@figurosity/consumer-three-dimension-tool 0.2.0 → 0.8.0

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

@@ -1,52 +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 { nextTick as Ht, watch as O, ref as ee, onUnmounted as Rt, computed as v, onMounted as Xt, openBlock as Je, createElementBlock as Yt, createCommentVNode as ht, createElementVNode as Qt, onBeforeMount as Wt, defineComponent as $, h, inject as Jt, useModel as eo, onBeforeUnmount as to, createBlock as it, unref as at, withCtx as ct, createVNode as oo, mergeModels as so } from "vue";
-import { Platform as ft, useQuasar as no, QBtn as Ot, QSeparator as Fe } from "quasar";
-import { CBaseButton as ne, CColorPickerPopup as qt, CExpansion as rt, CToggle as Ke, CSlider as dt, CDraggableDrawer as Qe, CBaseButtons as ro, CDraggableDrawers as lo, CToolPage as io } from "@figurosity/consumer-controls";
-import { defineStore as de, storeToRefs as I, getActivePinia as ao } from "pinia";
-import * as M from "three";
-import tt from "lodash.isequal";
+(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 j, ref as pe, nextTick as ls, onUnmounted as Ut, computed as C, onMounted as $t, openBlock as at, createElementBlock as cs, createCommentVNode as wt, createElementVNode as us, onBeforeMount as ds, defineComponent as V, h as d, withDirectives as ps, vShow as ms, inject as Ze, useModel as fs, onBeforeUnmount as hs, createBlock as vt, unref as bt, withCtx as yt, createVNode as gs, mergeModels as vs } from "vue";
+import { Platform as Ct, useQuasar as bs, QBtn as qt, QSeparator as ve } from "quasar";
+import { CBaseButton as me, CColorPickerPopup as ys, CExpansion as Ve, CToggle as Ht, CSlider as We, CBaseButtons as Jt, CDraggableDrawer as De, CDraggableDrawers as Ss, CToolPage as xs } from "@figurosity/consumer-controls";
+import { defineStore as Ye, storeToRefs as N, getActivePinia as ws } from "pinia";
+import * as I from "three";
+import Qe from "lodash.isequal";
+import { DEFAULT as lt, SKINS as xe, COLORS as oe, GRID as we, LIGHTS as de, RELATED as Ce, getConfig as Cs, useDynamicImages as Es } from "@figurosity/toolbox";
 import "three/examples/jsm/loaders/RGBELoader.js";
-import { DEFAULT as ot, COLORS as oe, GRID as xe, LIGHTS as ve, RELATED as we } from "@figurosity/toolbox";
-import { OrbitControls as co } from "three/examples/jsm/controls/OrbitControls.js";
-import { mergeVertices as Bt, mergeGeometries as uo } from "three/examples/jsm/utils/BufferGeometryUtils.js";
-import { RoundedBoxGeometry as po } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
-import { GLTFLoader as mo } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { DRACOLoader as ho } from "three/examples/jsm/loaders/DRACOLoader.js";
-function be(e) {
-  const t = e.startsWith("#") ? e.slice(1) : e;
-  return parseInt(t, 16);
-}
-function ce(e) {
-  return `#${e.toString(16).padStart(6, "0")}`;
-}
-const ut = new M.Vector3(), Mt = (e) => {
-  const t = new M.Box3().setFromObject(e);
+import { RoomEnvironment as Is } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { OrbitControls as Ds } from "three/examples/jsm/controls/OrbitControls.js";
+import { mergeVertices as Rt, mergeGeometries as ks } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import { RoundedBoxGeometry as Ts } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
+import { GLTFLoader as Ms } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader as As } from "three/examples/jsm/loaders/DRACOLoader.js";
+const Bs = "tool:switched", zs = "pose:viewed", Ps = "skin:changed", St = new I.Vector3(), Vt = (e) => {
+  const t = new I.Box3().setFromObject(e);
   console.log("box", t);
-  const o = t.getSize(new M.Vector3()), s = new M.Vector3(
+  const s = t.getSize(new I.Vector3()), n = new I.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", s);
-  let n = t.min.y;
-  return console.log("bottom", n), Math.abs(n) < -0.01 && (n = fo(e)), console.log("bottom", n), {
+  console.log("center", n);
+  let r = t.min.y;
+  return console.log("bottom", r), Math.abs(r) < -0.01 && (r = Ls(e)), console.log("bottom", r), {
     box: t,
-    size: o,
-    center: s,
-    bottom: n,
+    size: s,
+    center: n,
+    bottom: r,
     top: t.max.y
   };
-}, fo = (e) => {
+}, Ls = (e) => {
   let t = 1 / 0;
-  return e.updateMatrixWorld(!0), e.traverse((o) => {
-    var n, r;
-    if (!o.isMesh) return;
-    const s = (r = (n = o.geometry) == null ? void 0 : n.attributes) == null ? void 0 : r.position;
-    if (s)
-      for (let l = 0; l < s.count; l++)
-        ut.fromBufferAttribute(s, l), ut.applyMatrix4(o.matrixWorld), t = Math.min(t, ut.y);
+  return e.updateMatrixWorld(!0), e.traverse((s) => {
+    var r, i;
+    if (!s.isMesh) return;
+    const n = (i = (r = s.geometry) == null ? void 0 : r.attributes) == null ? void 0 : i.position;
+    if (n)
+      for (let o = 0; o < n.count; o++)
+        St.fromBufferAttribute(n, o), St.applyMatrix4(s.matrixWorld), t = Math.min(t, St.y);
   }), t;
-}, _t = (e) => ({
+}, Kt = (e) => ({
   box: {
     min: {
       x: e.box.min.x,
@@ -71,72 +65,33 @@ const ut = new M.Vector3(), Mt = (e) => {
   },
   bottom: e.bottom,
   top: e.top
-}), go = "smooth", vo = [
-  "#141111",
-  "#3E251E",
-  "#633C30",
-  "#A56F57",
-  "#CC9E86",
-  "#543F2E",
-  "#7C5B48",
-  "#98775B",
-  "#AD8B6B",
-  "#BFA282",
-  "#794524",
-  "#8F603E",
-  "#B08057",
-  "#D7A56F",
-  "#F7DBA2",
-  "#673E28",
-  "#C5815E",
-  "#D59671",
-  "#EFB698",
-  "#F5D2C0",
-  "#6E453A",
-  "#996C5E",
-  "#C88D7D",
-  "#E7B09E",
-  "#EEC1AE",
-  "#432B26",
-  "#88635A",
-  "#BA8C82",
-  "#EBBAB6",
-  "#F7D2C8",
-  "#796362",
-  "#8F7277",
-  "#C399A0",
-  "#E3C7CB",
-  "#E6D1D2",
-  "#684C4B",
-  "#98807B",
-  "#BDACA8",
-  "#DACDC9",
-  "#E5E4E3"
-], bo = (e) => ({
+}), Wt = "smooth", Rs = (e) => ({
   id: e.id,
   uuid: e.uuid ?? null,
   basePoseId: e.basePoseId ?? null,
   skinId: e.skinId ?? null,
+  // Skin slug — host overrides the row's own `slug` (basePose slug) with
+  // the resolved skin slug before sending the envelope, so the lib can
+  // read this field to drive the skin selector.
+  slug: e.slug ?? null,
   poseId: e.poseId ?? null,
   url: e.glbPathWebp || e.glbPath || null,
-  color: e.color ?? 16777215,
   bounds: e.bounds ?? null
-}), ye = de("3d-glbs", {
+}), fe = Ye("3d-glbs", {
   state: () => ({
-    models: {},
-    palette: vo
+    models: {}
   }),
   getters: {
     selectedId() {
-      return p().selected;
+      return M().selected;
     },
     poseId(e) {
-      var o, s;
-      const t = p().selected;
-      return (s = (o = e.models) == null ? void 0 : o[t]) == null ? void 0 : s.poseId;
+      var s, n;
+      const t = M().selected;
+      return (n = (s = e.models) == null ? void 0 : s[t]) == null ? void 0 : n.poseId;
     },
     model(e) {
-      const t = p().selected;
+      const t = M().selected;
       return t && e.models[t] ? e.models[t] : null;
     },
     url() {
@@ -146,232 +101,380 @@ const ut = new M.Vector3(), Mt = (e) => {
     bounds() {
       var e;
       return (e = this.model) == null ? void 0 : e.bounds;
-    },
-    color() {
-      var e;
-      return ((e = this.model) == null ? void 0 : e.color) || 16777215;
-    },
-    colorHex() {
-      var e;
-      return (e = this.model) != null && e.color ? ce(this.model.color) : "#fefefe";
-    },
-    changed(e) {
-      var o, s, n, r;
-      const t = p().selected;
-      return (s = (o = e.models) == null ? void 0 : o[t]) != null && s.color ? ((r = (n = e.models) == null ? void 0 : n[t]) == null ? void 0 : r.color) !== 16777215 : !1;
     }
   },
   actions: {
-    resetColor() {
-      const e = p().selected;
-      this.models[e] && (this.models[e].color = 16777215);
-    },
     setBounds(e) {
-      const t = p().selected;
-      this.models[t] && (this.models[t].bounds = _t(e));
-    },
-    setColorHex(e) {
-      const t = p().selected;
-      this.models[t] && (this.models[t].color = be(e));
+      const t = M().selected;
+      this.models[t] && (this.models[t].bounds = Kt(e));
     },
     setSubjectsFromResponse(e) {
-      var s;
-      const t = ((s = e == null ? void 0 : e.entities) == null ? void 0 : s.glb) || {}, o = {};
-      return Object.keys(t).forEach((n) => {
-        o[n] = bo(t[n]);
-      }), this.models = { ...this.models, ...o }, this.selectDefaultGlbId(e);
+      var n;
+      const t = ((n = e == null ? void 0 : e.entities) == null ? void 0 : n.glb) || {}, s = {};
+      return Object.keys(t).forEach((r) => {
+        s[r] = Rs(t[r]);
+      }), 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 l, a, c;
-      const t = Array.isArray((l = e == null ? void 0 : e.result) == null ? void 0 : l.glb) ? e.result.glb : [];
+      var o, c, a;
+      const t = Array.isArray((o = e == null ? void 0 : e.result) == null ? void 0 : o.glb) ? e.result.glb : [];
       if (t.length === 0) return null;
-      const o = ((a = e == null ? void 0 : e.entities) == null ? void 0 : a.skins) || {}, s = ((c = e == null ? void 0 : e.entities) == null ? void 0 : c.glb) || {}, r = t.find((u) => {
-        var b, f;
-        const g = (b = s[u]) == null ? void 0 : b.skinId;
-        return g != null && ((f = o[g]) == null ? void 0 : f.slug) === go;
+      const s = ((c = e == null ? void 0 : e.entities) == null ? void 0 : c.skins) || {}, n = ((a = e == null ? void 0 : e.entities) == null ? void 0 : a.glb) || {}, i = t.find((u) => {
+        var P, w;
+        const p = (P = n[u]) == null ? void 0 : P.skinId;
+        return p != null && ((w = s[p]) == null ? void 0 : w.slug) === Wt;
       }) ?? t[0];
-      return typeof r == "string" ? parseInt(r, 10) : r;
+      return typeof i == "string" ? parseInt(i, 10) : i;
     }
   }
-}), gt = { visible: !0, opacity: 1, color: 16711422, texture: "none" }, kt = (e = {}) => ({ ...gt, ...e }), Ve = de("3d-ground", {
+});
+function et(e) {
+  const t = e.startsWith("#") ? e.slice(1) : e;
+  return parseInt(t, 16);
+}
+function ue(e) {
+  return `#${e.toString(16).padStart(6, "0")}`;
+}
+const tt = ({
+  storeId: e,
+  defaultValues: t = {},
+  state: s = {},
+  getters: n = {},
+  actions: r = {},
+  keyBy: i = "selected"
+}) => Ye(e, {
   state: () => ({
+    loading: !1,
     models: {},
-    offset: -0.75
+    // 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: {
-    changed(e) {
-      var o, s;
-      const t = p().selected;
-      return ((s = (o = e.models) == null ? void 0 : o[t]) == null ? void 0 : s.color) !== 16711422;
+    keyId() {
+      return M()[i];
     },
-    property() {
-      return (e, t = null) => {
-        var o;
-        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
-      };
+    model(o) {
+      return o.models[M()[i]];
     },
-    selectedId() {
-      return p().selected;
+    exists(o) {
+      return typeof o.models[M()[i]] < "u";
     },
-    selectedModel(e) {
-      const t = this.selectedId;
-      return e.models[t] ?? null;
+    selectedModel(o) {
+      return o.models[M()[i]] ?? null;
     },
     mergedModel() {
-      return { ...gt, ...this.selectedModel ?? {} };
-    },
-    model(e) {
-      const o = p().selected;
-      return o && e.models[o] ? e.models[o] : null;
+      return { ...t, ...this.selectedModel ?? {} };
     },
-    color() {
-      return this.mergedModel.color;
+    propertyById(o) {
+      return (c, a, u = null) => o.models[c] && a in o.models[c] ? o.models[c][a] : u;
     },
-    colorHex() {
-      return ce(this.mergedModel.color);
+    propertyChangedById() {
+      return (o, c) => this.propertyById(o, c) !== t[c];
     },
-    opacity() {
-      return this.mergedModel.opacity;
+    propertyChanged(o) {
+      const c = M()[i];
+      return (a) => o.models[c] ? this.propertyById(c, a) !== t[a] : !1;
     },
-    texture() {
-      return this.mergedModel.texture;
+    property() {
+      const o = M()[i];
+      return (c, a = t[c]) => this.propertyById(o, c, a);
     },
-    visible() {
-      return this.mergedModel.visible;
-    }
+    ...n
   },
   actions: {
-    reset() {
-      const e = p().selected;
-      this.models[e] = kt();
+    initModel(o) {
+      o != null && (typeof this.models[o] < "u" || this.$patch((c) => {
+        c.models[o] = { ...t };
+      }));
     },
     ensureSelectedModel() {
-      const e = p().selected;
-      return this.models[e] || (this.models[e] = { ...gt }), this.models[e];
+      const o = M()[i];
+      return o == null ? null : (this.models[o] || (this.models[o] = { ...t }), this.models[o]);
     },
-    patchSelected(e) {
-      const t = this.ensureSelectedModel();
-      Object.assign(t, e);
+    setPropertyById(o, c, a) {
+      o != null && (this.models[o] || this.initModel(o), this.$patch({
+        models: {
+          [o]: { ...this.models[o], [c]: a }
+        }
+      }));
     },
-    setProperty(e, t) {
-      const o = this.ensureSelectedModel();
-      o[e] = t;
+    setProperty(o, c) {
+      const a = M()[i];
+      a != null && (this.models[a] || this.initModel(a), this.$patch({
+        models: {
+          [a]: { ...this.models[a], [o]: c }
+        }
+      }));
     },
-    setColor(e) {
-      this.setProperty("color", e);
+    patchSelected(o) {
+      const c = this.ensureSelectedModel();
+      c && Object.assign(c, o);
     },
-    setColorHex(e) {
-      this.setProperty("color", be(e));
+    reset() {
+      const o = M()[i];
+      o != null && this.$patch((c) => {
+        c.models[o] = { ...t };
+      });
     },
-    setTexture(e) {
-      this.setProperty("texture", e);
+    resetProperty(o) {
+      const c = M()[i];
+      c != null && this.models[c] && this.$patch({
+        models: {
+          [c]: {
+            ...this.models[c],
+            [o]: t[o]
+          }
+        }
+      });
     },
-    setVisible(e) {
-      this.setProperty("visible", e);
+    // 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 o = M()[i];
+      return o == null || !this.models[o] ? null : JSON.parse(JSON.stringify(this.models[o]));
+    },
+    // 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(o) {
+      if (o == null || typeof o != "object") return;
+      const c = M()[i];
+      if (c == null) return;
+      const a = JSON.parse(JSON.stringify(o));
+      this.$patch((u) => {
+        u.models[c] = { ...t, ...a }, u.framed && (u.framed[c] = !0), u.applyRevision = (u.applyRevision || 0) + 1;
+      });
     },
-    setGroundFromResponse(e) {
-      this.models[e] || (this.models[e] = kt());
-    }
+    ...r
+  }
+}), Xt = {
+  visible: !0,
+  opacity: 1,
+  color: 16711422,
+  texture: "none"
+}, Vs = {
+  changed() {
+    return this.exists ? !Qe(this.mergedModel, Xt) : !1;
+  },
+  color() {
+    return this.property("color");
+  },
+  colorHex() {
+    return ue(this.property("color"));
+  },
+  opacity() {
+    return this.property("opacity");
+  },
+  texture() {
+    return this.property("texture");
+  },
+  visible() {
+    return this.property("visible");
+  }
+}, Fs = {
+  init() {
+    this.initModel(this.keyId);
+  },
+  setColor(e) {
+    this.setProperty("color", e);
+  },
+  setColorHex(e) {
+    this.setProperty("color", et(e));
+  },
+  setTexture(e) {
+    this.setProperty("texture", e);
+  },
+  setVisible(e) {
+    this.setProperty("visible", e);
   }
-}), Xe = {
+}, Fe = tt({
+  storeId: "3d-ground",
+  defaultValues: Xt,
+  state: { offset: -0.75 },
+  getters: Vs,
+  actions: Fs,
+  keyBy: "basePoseId"
+}), _s = {
   color: 16777215,
   visible: !0,
   debug: !1,
   shadow: !0,
-  opacity: 1,
   visualization: !0
-}, pt = (e = {}) => ({ ...Xe, ...e }), ge = {
+}, Pe = 0, se = 1, Et = 1.25, It = 3, ot = (e, t, s) => Math.max(t, Math.min(s, e)), Gs = 1.25, Le = (e = {}) => ({ ..._s, ...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 }
-}, Et = (e = {}) => ({ ...ge, ...e }), Be = de("3d-lights", {
+}, Ft = ["advanced", "move"], nt = (e = {}) => ({ ...ze, ...e }), js = {
+  ambientScale: se,
+  userScale: se
+}, rt = (e = {}) => ({ ...js, ...e }), xt = () => ({
+  key: Le(),
+  fill: Le({ shadow: !0 }),
+  back: Le({ shadow: !0 })
+}), he = Ye("3d-lights", {
   state: () => ({
     lights: {},
     options: {},
+    scales: {},
+    seeds: {},
+    // basePoseId -> true once frameToBounds + syncToStore have landed
+    // on this basePose's lights rig. Explicit flag rather than an
+    // inferred sentinel so the bounds watcher's framing decision
+    // 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 M().basePoseId;
+    },
+    skinId() {
+      return M().selected;
+    },
+    // The reset button reflects "user has tweaked something on the
+    // active skin." Toggles + rig are per-basePose; sliders are
+    // per-skin. Rig-orbit fields are written by syncToStore every
+    // animate tick and would otherwise read as "changed" immediately
+    // after the GLB loads, so they're excluded — only the user-visible
+    // toggles + the active skin's slider values count.
     changed(e) {
-      const o = p().selected, s = !tt(e.options[o], ge), n = {
-        key: { ...Xe },
-        fill: { ...Xe },
-        back: { ...Xe }
-      }, r = !tt(e.lights[o], n);
-      return s || r;
+      const t = e.options[this.bpId];
+      if (t && Ft.some((n) => !Qe(t[n], ze[n])))
+        return !0;
+      const s = e.scales[this.skinId];
+      return !!(s && (s.ambientScale !== se || s.userScale !== se));
+    },
+    // Has frameToBounds + syncToStore landed on this basePose's
+    // lights rig? Set by markFramed() from the bounds watcher in
+    // ThreeDimensionTool. Used by the GLB load path: a basePose the
+    // user has already framed applies the persisted rig instead of
+    // reframing on every skin swap.
+    hasRig(e) {
+      return !!e.framed[this.bpId];
     },
     move(e) {
-      var s;
-      const o = p().selected;
-      return ((s = e.options[o]) == null ? void 0 : s.move) || !1;
+      var t;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.move) || !1;
     },
     advancedMode(e) {
+      var t;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.advanced) || !1;
+    },
+    // Re-clamp on read so persisted values from a session before the
+    // per-source ceilings landed (when both maxed at 2.0) don't sit
+    // above the new AMBIENT_SCALE_MAX / USER_SCALE_MAX.
+    ambientScale(e) {
       var s;
-      const o = p().selected;
-      return ((s = e.options[o]) == null ? void 0 : s.advanced) || !1;
+      const t = ((s = e.scales[this.skinId]) == null ? void 0 : s.ambientScale) ?? se;
+      return ot(t, Pe, Et);
     },
-    position(e) {
+    userScale(e) {
       var s;
-      const o = p().selected;
-      return ((s = e.options[o]) == null ? void 0 : s.position) || ge.position;
+      const t = ((s = e.scales[this.skinId]) == null ? void 0 : s.userScale) ?? se;
+      return ot(t, Pe, It);
+    },
+    position(e) {
+      var t;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.position) || ze.position;
     },
     quaternion(e) {
-      var s;
-      const o = p().selected;
-      return ((s = e.options[o]) == null ? void 0 : s.quaternion) || ge.quaternion;
+      var t;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.quaternion) || ze.quaternion;
     },
     target(e) {
-      var s;
-      const o = p().selected;
-      return ((s = e.options[o]) == null ? void 0 : s.target) || ge.target;
+      var t;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.target) || ze.target;
     },
     radius(e) {
-      var s;
-      const o = p().selected;
-      return ((s = e.options[o]) == null ? void 0 : s.radius) || ge.radius;
+      var t;
+      return (t = e.options[this.bpId]) == null ? void 0 : t.radius;
     },
     property(e) {
-      return (t, o = null, s = null) => {
-        const r = p().selected;
-        return !e.lights[r] || !e.lights[r][t] || !(o in e.lights[r][t]) ? s : e.lights[r][t][o];
+      return (t, s = null, n = null) => {
+        const r = e.lights[this.bpId];
+        return !r || !r[t] || !(s in r[t]) ? n : r[t][s];
       };
     },
     colorHex(e) {
       return (t) => {
-        const s = p().selected;
-        return !e.lights[s] || !e.lights[s][t] ? "#ffffff" : ce(e.lights[s][t].color);
+        const s = e.lights[this.bpId];
+        return !s || !s[t] ? "#ffffff" : ue(s[t].color);
       };
     },
     lightKeys(e) {
-      const o = p().selected;
-      return Object.keys(e.lights[o]);
+      return Object.keys(e.lights[this.bpId] || {});
     },
-    isVisible(e) {
-      return (t) => e.move && (this.advancedMode === !0 && this.property(t, "visible") || t === "key");
+    isVisible() {
+      return () => this.move;
     }
   },
   actions: {
     reset() {
-      const e = p().selected;
-      this.options[e] = { ...ge }, this.collection.forEach(
-        (t) => this.lights[e][t] = { ...Xe }
-      );
+      const e = this.bpId, t = this.skinId;
+      if (e == null) return;
+      this.options[e] || (this.options[e] = nt()), Ft.forEach((n) => this.options[e][n] = ze[n]), t != null && (this.scales[t] || (this.scales[t] = rt()), this.scales[t].ambientScale = se, this.scales[t].userScale = se);
+      const s = this.seeds[t];
+      s ? this.lights[e] = {
+        key: { ...s.key },
+        fill: { ...s.fill },
+        back: { ...s.back }
+      } : 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
+    // (different skin = different intensities); lights[bpId] and
+    // options[bpId] are only initialized on first entry into the
+    // basePose bucket so user state — color picks, rig position —
+    // 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) * Gs, n = (t == null ? void 0 : t.ambientIntensity) ?? 0, r = (t == null ? void 0 : t.envIntensity) ?? 1;
+      this.seeds[e] = {
+        key: Le({ intensity: s }),
+        fill: Le({ intensity: s, shadow: !0 }),
+        back: Le({ intensity: s, shadow: !0 }),
+        ambient: { intensity: n },
+        env: { intensity: r }
+      }, 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 = p().selected;
-      return this.options[e] || (this.options[e] = { ...ge }), this.options[e];
+      const e = this.bpId;
+      return e == null ? null : (this.options[e] || (this.options[e] = nt()), this.options[e]);
     },
-    patchSelected(e) {
-      const t = this.ensureSelectedOptions();
-      Object.assign(t, e);
+    ensureSelectedScales() {
+      const e = this.skinId;
+      return e == null ? null : (this.scales[e] || (this.scales[e] = rt()), this.scales[e]);
     },
     setControlProperty(e, t) {
-      const o = this.ensureSelectedOptions();
-      o[e] = t;
+      const s = this.ensureSelectedOptions();
+      s && (s[e] = t);
     },
     setPosition(e) {
       this.setControlProperty("position", e);
@@ -386,169 +489,174 @@ const ut = new M.Vector3(), Mt = (e) => {
       this.setControlProperty("radius", e);
     },
     setMove(e = !1) {
-      const o = p().selected;
-      this.options[o].move = e;
+      this.initLights();
+      const t = this.ensureSelectedOptions();
+      t && (t.move = e);
     },
     setAdvanced(e = !1) {
-      const o = p().selected;
+      const t = this.bpId;
+      if (t == null) return;
+      const s = this.ensureSelectedOptions();
+      if (!s) return;
       if (e === !0) {
-        this.options[o].advanced = !0;
+        s.advanced = !0;
         return;
       }
-      this.options[o].advanced = !1;
-      const s = this.lights[o].key;
-      this.lightKeys.forEach((n) => {
-        n !== "key" && (this.lights[o][n].color = s.color);
+      s.advanced = !1;
+      const n = this.lights[t];
+      if (!n) return;
+      const r = n.key;
+      this.collection.forEach((i) => {
+        i !== "key" && (n[i].color = r.color);
       });
     },
-    setControlOptions(e, t, o = null) {
-      o === null && (o = p().selected), this.options[o] || (this.options[o] = Et());
-      const s = e.position.clone(), n = e.quaternion.clone(), r = t.target.clone();
-      this.options[o].position = { x: s.x, y: s.y, z: s.z }, this.options[o].quaternion = { x: n.x, y: n.y, z: n.z, w: n.w }, this.options[o].target = { x: r.x, y: r.y, z: r.z };
-    },
     setColorHex(e, t) {
-      var l;
-      const s = p().selected, n = this.lights[s], r = be(t);
-      if (((l = this.options[s]) == null ? void 0 : l.advanced) === !0) {
+      var i;
+      this.initLights();
+      const s = this.bpId;
+      if (s == null) return;
+      const n = this.lights[s];
+      if (!n) return;
+      const r = et(t);
+      if (((i = this.options[s]) == null ? void 0 : i.advanced) === !0) {
         n[e].color = r;
         return;
       }
-      this.collection.forEach((a) => {
-        n[a].color = r;
+      this.collection.forEach((o) => {
+        n[o].color = r;
       });
     },
-    setProperty(e, t, o) {
-      const n = p().selected;
-      this.lights[n][e][t] = o;
+    setProperty(e, t, s) {
+      this.initLights();
+      const n = this.bpId;
+      if (n == null) return;
+      const r = this.lights[n];
+      r && (r[e][t] = s);
+    },
+    setAmbientScale(e) {
+      this.initLights();
+      const t = this.ensureSelectedScales();
+      t && (t.ambientScale = ot(e, Pe, Et));
+    },
+    setUserScale(e) {
+      this.initLights();
+      const t = this.ensureSelectedScales();
+      t && (t.userScale = ot(e, Pe, It));
     },
     initLights() {
-      const t = p().selected;
-      this.lights[t] || (this.lights[t] = {
-        key: pt(),
-        fill: pt({ shadow: !0 }),
-        back: pt({ shadow: !0 })
-      }), this.options[t] || (this.options[t] = Et());
+      const e = this.bpId, t = this.skinId;
+      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, n = this.options[e] ? JSON.parse(JSON.stringify(this.options[e])) : null, r = t != null && this.scales[t] ? JSON.parse(JSON.stringify(this.scales[t])) : null;
+      return !s && !n && !r ? null : { lights: s, options: n, scales: r };
+    },
+    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);
     }
   }
-}), Ye = {
+}), 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
-}, At = (e = {}) => ({ ...Ye, ...e }), Ct = de("3d-controls", {
-  state: () => ({
-    models: {}
-  }),
-  getters: {
-    changed(e) {
-      var s;
-      const o = p().selected;
-      return (s = e.models) != null && s[o] ? !tt(e.models[o], Ye) : !1;
-    },
-    property() {
-      return (e, t = null) => {
-        var o;
-        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
-      };
-    },
-    selectedId() {
-      return p().selected;
-    },
-    selectedModel(e) {
-      const t = this.selectedId;
-      return e.models[t] ?? null;
-    },
-    mergedModel() {
-      return { ...Ye, ...this.selectedModel ?? {} };
-    },
-    position() {
-      return this.mergedModel.position;
-    },
-    quaternion() {
-      return this.mergedModel.quaternion;
-    },
-    target() {
-      return this.mergedModel.target;
-    },
-    radius() {
-      return this.mergedModel.radius;
-    }
+}, Os = {
+  changed() {
+    return this.exists ? !Qe(this.mergedModel, Zt) : !1;
   },
-  actions: {
-    reset() {
-      const e = p().selected;
-      this.models[e] = { ...Ye };
-    },
-    ensureSelectedModel() {
-      const e = p().selected;
-      return this.models[e] || (this.models[e] = { ...Ye }), this.models[e];
-    },
-    patchSelected(e) {
-      const t = this.ensureSelectedModel();
-      Object.assign(t, e);
-    },
-    setProperty(e, t) {
-      const o = this.ensureSelectedModel();
-      o[e] = t;
-    },
-    setPosition(e) {
-      this.setProperty("position", e);
-    },
-    setQuaternion(e) {
-      this.setProperty("quaternion", e);
-    },
-    setTarget(e) {
-      this.setProperty("target", e);
-    },
-    setRadius(e) {
-      this.setProperty("radius", e);
-    },
-    setControlOptions(e, t, o = null) {
-      o === null && (o = p().selected), this.models[o] || (this.models[o] = At());
-      const s = e.position.clone(), n = e.quaternion.clone(), r = t.target.clone();
-      this.models[o].position = { x: s.x, y: s.y, z: s.z }, this.models[o].quaternion = { x: n.x, y: n.y, z: n.z, w: n.w }, this.models[o].target = { x: r.x, y: r.y, z: r.z };
-    },
-    initControls() {
-      const t = p().selected;
-      t && !this.models[t] && (this.models[t] = At());
-    }
+  // Has frameToBounds + syncToStore landed on this basePose's
+  // bucket? An explicit per-basePose flag, set by markFramed() from
+  // the bounds watcher in ThreeDimensionTool. We can't infer this by
+  // comparing position to defaults: applyFromStore normalizes the
+  // default direction and scales by radius, so syncToStore writes a
+  // position that's close to but not exactly equal to defaults, and
+  // happens every animate frame — by the time bounds arrive, a
+  // value-based check would already read "rigged" on a fresh basePose
+  // and skip the initial framing.
+  hasRig(e) {
+    return !!e.framed[this.keyId];
+  },
+  position() {
+    return this.mergedModel.position;
+  },
+  quaternion() {
+    return this.mergedModel.quaternion;
+  },
+  target() {
+    return this.mergedModel.target;
+  },
+  radius() {
+    return this.mergedModel.radius;
+  }
+}, Ns = {
+  initControls() {
+    this.initModel(this.keyId);
+  },
+  markFramed() {
+    const e = this.keyId;
+    e != null && (this.framed[e] = !0);
+  },
+  setPosition(e) {
+    this.setProperty("position", e);
+  },
+  setQuaternion(e) {
+    this.setProperty("quaternion", e);
+  },
+  setTarget(e) {
+    this.setProperty("target", e);
+  },
+  setRadius(e) {
+    this.setProperty("radius", e);
   }
-}), vt = {
+}, pt = tt({
+  storeId: "3d-controls",
+  defaultValues: Zt,
+  state: { framed: {} },
+  getters: Os,
+  actions: Ns,
+  keyBy: "basePoseId"
+}), Us = {
   color: 16711422
-}, zt = (e = {}) => ({ ...vt, ...e }), lt = de("3d-scene", {
-  state: () => ({
-    models: {}
-  }),
-  getters: {
-    changed(e) {
-      var s, n;
-      const o = p().selected;
-      return ((n = (s = e.models) == null ? void 0 : s[o]) == null ? void 0 : n.color) !== 16711422;
-    },
-    colorHex(e) {
-      var n;
-      const o = p().selected, s = (n = e.models[o]) == null ? void 0 : n.color;
-      return ce(s || vt.color);
-    }
+}, $s = {
+  changed() {
+    return this.propertyChanged("color");
   },
-  actions: {
-    reset() {
-      const t = p().selected;
-      this.models[t] = { ...vt };
-    },
-    selectedId() {
-      return p().selected;
-    },
-    setColorHex(e) {
-      const o = p().selected;
-      this.models[o] || (this.models[o] = zt()), this.models[o].color = be(e);
-    },
-    init() {
-      const t = p().selected;
-      this.models[t] || (this.models[t] = zt());
-    }
+  colorHex() {
+    return ue(this.property("color"));
+  }
+}, qs = {
+  init() {
+    this.initModel(this.keyId);
+  },
+  setColorHex(e) {
+    this.setProperty("color", et(e));
   }
-}), Te = {
+}, mt = tt({
+  storeId: "3d-scene",
+  defaultValues: Us,
+  getters: $s,
+  actions: qs,
+  keyBy: "basePoseId"
+}), Yt = {
   show: !1,
   front: !1,
   back: !1,
@@ -558,90 +666,34 @@ const ut = new M.Vector3(), Mt = (e) => {
   bottom: !1,
   divisions: 6,
   opacity: 0.5,
-  size: 2,
-  lineColor: 13421772,
-  centerLineColor: 16711680
-}, yo = (e = {}) => ({ ...Te, ...e }), Me = de("3d-grid", {
-  state: () => ({
-    models: {}
-  }),
-  getters: {
-    changed(e) {
-      const o = p().selected;
-      return console.log("state.models[id]", e.models[o]), console.log("defaults", Te), !tt(e.models[o], Te);
-    },
-    property() {
-      return (e, t = null) => {
-        var o;
-        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
-      };
-    },
-    selectedId() {
-      return p().selected;
-    },
-    selectedModel(e) {
-      const t = this.selectedId;
-      return e.models[t] ?? null;
-    },
-    mergedModel() {
-      return { ...Te, ...this.selectedModel ?? {} };
-    },
-    show() {
-      return this.mergedModel.show;
-    },
-    lineColor() {
-      return this.mergedModel.lineColor;
-    },
-    centerLineColor() {
-      return this.mergedModel.centerLineColor;
-    },
-    opacity() {
-      return this.mergedModel.opacity;
-    },
-    size() {
-      return this.mergedModel.size;
-    },
-    divisions() {
-      return this.mergedModel.divisions;
-    },
-    lineColorHex() {
-      return ce(this.mergedModel.lineColor);
-    },
-    centerLineColorHex() {
-      return ce(this.mergedModel.centerLineColor);
-    }
+  size: 2
+}, Hs = {
+  changed() {
+    return !Qe(this.mergedModel, Yt);
   },
-  actions: {
-    reset() {
-      const t = p().selected;
-      this.models[t] = { ...Te }, Ht(() => {
-        this.models[t].show = !1;
-      });
-    },
-    ensureSelectedModel() {
-      const e = p().selected;
-      return this.models[e] || (this.models[e] = { ...Te }), this.models[e];
-    },
-    patchSelected(e) {
-      const t = this.ensureSelectedModel();
-      Object.assign(t, e);
-    },
-    setProperty(e, t) {
-      const o = this.ensureSelectedModel();
-      o[e] = t;
-    },
-    setLineColorHex(e) {
-      this.setProperty("lineColor", be(e));
-    },
-    setCenterLineColorHex(e) {
-      this.setProperty("centerLineColor", be(e));
-    },
-    init() {
-      const t = p().selected;
-      this.models[t] || (this.models[t] = yo());
-    }
+  show() {
+    return this.property("show");
+  },
+  opacity() {
+    return this.property("opacity");
+  },
+  size() {
+    return this.property("size");
+  },
+  divisions() {
+    return this.property("divisions");
+  }
+}, Js = {
+  init() {
+    this.initModel(this.keyId);
   }
-}), So = [
+}, ke = tt({
+  storeId: "3d-grid",
+  defaultValues: Yt,
+  getters: Hs,
+  actions: Js,
+  keyBy: "basePoseId"
+}), Ks = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -682,74 +734,167 @@ const ut = new M.Vector3(), Mt = (e) => {
   "#BDACA8",
   "#DACDC9",
   "#E5E4E3"
-], bt = "background", et = "subject", yt = "ground", Tt = {
-  [et]: 16711422,
-  [bt]: 16777215,
-  [yt]: 12961221
-}, Ut = de("3d-colors", {
-  state: () => ({
-    models: {},
-    palette: So
-  }),
-  getters: {
-    property() {
-      return (e, t = null) => {
-        var o;
-        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
-      };
-    },
-    selectedId() {
-      return p().selected;
-    },
-    selectedModel(e) {
-      const t = this.selectedId;
-      return e.models[t] ?? null;
-    },
-    mergedModel() {
-      return { ...Tt, ...this.selectedModel ?? {} };
-    },
-    model(e) {
-      const o = p().selected;
-      return o && e.models[o] ? e.models[o] : null;
-    },
-    subjectHex() {
-      return this.getHexColor(et);
-    },
-    groundHex() {
-      return this.getHexColor(yt);
-    },
-    backgroundHex() {
-      return this.getHexColor(bt);
-    }
+], Dt = "background", kt = "subject", Tt = "ground", Qt = {
+  [kt]: 16711422,
+  [Dt]: 16777215,
+  [Tt]: 12961221
+}, Ws = {
+  changed() {
+    return this.exists ? !Qe(this.mergedModel, Qt) : !1;
   },
-  actions: {
-    initModel(e) {
-      this.models[e] = { ...Tt };
-    },
-    getHexColor(e) {
-      const o = p().selected;
-      if (!this.models[o] || !this.models[o][e]) return "#F0F0F0";
-      const s = this.models[o][e];
-      return ce(s);
-    },
-    setHexColor(e = et, t = "#e6e6e6") {
-      const s = p().selected;
-      !this.models[s] || !this.models[s][e] || (this.models[s][e] = be(t));
-    },
-    setSubjectHex(e) {
-      this.setHexColor(et, e);
-    },
-    setGroundHex(e) {
-      this.setHexColor(yt, e);
+  subjectHex() {
+    return ue(this.property(kt));
+  },
+  groundHex() {
+    return ue(this.property(Tt));
+  },
+  backgroundHex() {
+    return ue(this.property(Dt));
+  },
+  getHexColor() {
+    return (e) => ue(this.property(e, "#F0F0F0"));
+  }
+}, Xs = {
+  setHexColor(e, t) {
+    this.setProperty(e, et(t));
+  },
+  setSubjectHex(e) {
+    this.setHexColor(kt, e);
+  },
+  setGroundHex(e) {
+    this.setHexColor(Tt, e);
+  },
+  setBackgroundHex(e) {
+    this.setHexColor(Dt, e);
+  }
+}, Mt = tt({
+  storeId: "3d-colors",
+  defaultValues: Qt,
+  state: { palette: Ks },
+  getters: Ws,
+  actions: Xs,
+  keyBy: "basePoseId"
+});
+let ee = null, Ge = null;
+const Re = () => {
+  const e = M(), { aspect: t, width: s, height: n } = N(e), r = (c = { x: 0, y: 0.8, z: 1.5 }) => (console.debug("useCamera init"), ee ? (console.debug("view camera already inited"), ee) : (ee = new I.PerspectiveCamera(75, t.value, 0.1, 100), e.loaded.camera = !0, ee)), i = () => {
+    if (ee)
+      return ee;
+  };
+  return Ge = j(
+    () => t.value,
+    (c) => {
+      if (!ee) {
+        r();
+        return;
+      }
+      ee.aspect = c, ee.updateProjectionMatrix();
+    }
+  ), {
+    init: r,
+    getCamera: i,
+    dispose: () => {
+      Ge == null || Ge(), Ge = null, ee = null;
+    }
+  };
+};
+let W = null, be = null, ye = null, je = null;
+const Ie = () => {
+  const e = mt(), t = M(), { colorHex: s } = N(e), n = () => (console.debug("useScene init"), W ? (console.debug("scene already inited"), W) : (W = new I.Scene(), i(s.value), t.loaded.scene = !0, W)), r = () => {
+    if (W)
+      return W;
+  }, i = (a) => {
+    if (!W) throw new Error("Scene has not been initialized");
+    W.background = new I.Color(a);
+  }, o = (a) => {
+    if (!W) throw new Error("Scene has not been initialized");
+    if (!a) throw new Error("Renderer required to build environment");
+    be || (ye = new I.PMREMGenerator(a), ye.compileEquirectangularShader(), be = ye.fromScene(new Is(), 0.04).texture, W.environment = be);
+  };
+  return je = j(
+    () => s.value,
+    (a) => i(a)
+  ), {
+    init: n,
+    get: r,
+    dispose: () => {
+      t.loaded.scene = !1, je == null || je(), je = 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, be == null || be.dispose(), ye == null || ye.dispose(), be = null, ye = null);
     },
-    setBackgroundHex(e) {
-      this.setHexColor(bt, e);
+    setBackgroundColor: i,
+    setEnvironment: o
+  };
+};
+let L = null, Oe = null, Ne = null;
+const Xe = () => {
+  const e = M(), { get: t } = Ie(), { getCamera: s } = Re(), { width: n, height: r, subjectLoaded: i } = N(e);
+  function o(w) {
+    return console.debug("useRenderer init"), L ? (console.debug("renderer already inited"), L) : (L = new I.WebGLRenderer({ antialias: !0, alpha: !0, preserveDrawingBuffer: !0 }), L.setSize(n.value, r.value), L.toneMapping = I.ACESFilmicToneMapping, L.toneMappingExposure = 0.8, L.shadowMap.enabled = !0, L.shadowMap.type = I.PCFSoftShadowMap, L.outputColorSpace = I.SRGBColorSpace, w && w.appendChild(L.domElement), e.loaded.renderer = !0, L);
+  }
+  const c = () => {
+    if (!L) throw new Error("Renderer has not been initialized");
+    return L;
+  }, a = (w) => {
+    L && (L.toneMappingExposure = w);
+  }, u = () => {
+    const w = t(), m = s();
+    !w || !m || L.render(w, m);
+  };
+  async function p({ size: w = 1024, format: m = "jpeg", quality: g = 0.85 } = {}) {
+    if (!L) 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 v = L.getSize(new I.Vector2()), k = L.getPixelRatio(), R = x.aspect;
+    try {
+      L.setPixelRatio(1), L.setSize(w, w, !1), x.aspect = 1, x.updateProjectionMatrix(), L.render(y, x);
+      const F = m === "png" ? "image/png" : "image/jpeg";
+      return await new Promise(($, K) => {
+        L.domElement.toBlob(
+          (b) => b ? $(b) : K(new Error("toBlob returned null")),
+          F,
+          m === "jpeg" ? g : void 0
+        );
+      });
+    } finally {
+      L.setPixelRatio(k), L.setSize(v.x, v.y, !1), x.aspect = R, x.updateProjectionMatrix(), L.render(y, x);
     }
   }
-}), p = de("3d", {
+  Oe = j(
+    () => [n.value, r.value],
+    ([w, m]) => {
+      !w || !m || !L || L.setSize(w, m);
+    }
+  ), Ne = j(
+    () => i.value,
+    () => u()
+  );
+  function P() {
+    console.debug("renderer disposed"), e.loaded.renderer = !1, Oe == null || Oe(), Ne == null || Ne(), Oe = null, Ne = null, L && (L.domElement.parentElement && L.domElement.parentElement.removeChild(L.domElement), L.dispose(), L = null);
+  }
+  return {
+    init: o,
+    get: c,
+    dispose: P,
+    render: u,
+    setExposure: a,
+    captureSnapshot: p
+  };
+}, M = Ye("3d", {
   state: () => ({
     // models: {},
     selected: null,
+    // Identifies the per-session bucket for stores keyed by basePoseId
+    // (3d-grid, and future basePose-scoped 3D stores) so they survive
+    // skin/GLB swaps within the same basePose. Set in setFromResponse
+    // from the host envelope's result.basePoseId. Mirrors use360Store's
+    // basePoseId field — see GitHub #149 / #145.
+    basePoseId: null,
+    // Per-set thumbnail UUID from the host envelope. Used by the skins
+    // selector to render preview thumbnails against the dynamic-images
+    // server's /sets/{uuid}/.../{slug}.webp pattern.
+    setUuid: null,
     width: 0,
     height: 0,
     loaded: {
@@ -768,12 +913,16 @@ const ut = new M.Vector3(), Mt = (e) => {
   }),
   getters: {
     active(e) {
-      var o, s;
-      const t = ft.is.mobile ? ot : oe;
-      return ((s = (o = this.models) == null ? void 0 : o[e.selected]) == null ? void 0 : s.active) || t;
+      var s, n;
+      const t = Ct.is.mobile ? lt : xe;
+      return ((n = (s = this.models) == null ? void 0 : s[e.selected]) == null ? void 0 : n.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: {
@@ -785,6 +934,13 @@ const ut = new M.Vector3(), Mt = (e) => {
       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);
     },
@@ -793,120 +949,101 @@ const ut = new M.Vector3(), Mt = (e) => {
     },
     subscribe(e) {
       const t = this;
-      e.$on("glb:loaded", (o) => {
-        t.setFromResponse(o);
+      e.$on("glb:loaded", (s) => {
+        t.setFromResponse(s);
       });
     },
     setFromResponse(e) {
-      var u;
-      const t = Ut(), o = Ct(), s = Me(), n = Ve(), r = Be(), l = lt(), c = ye().setSubjectsFromResponse(e);
-      if (c == null) {
+      var u, p, P;
+      const t = Mt(), s = pt(), n = ke(), r = Fe(), i = he(), o = mt(), a = fe().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 = c, t.initModel(c), r.initLights(), n.setGroundFromResponse(c), o.initControls(), s.init(), l.init(), this.models[c] || (this.models[c] = {}), (u = this.models[c]) != null && u.active || (this.models[c].active = ft.is.mobile ? ot : oe);
+      this.selected = a, t.initModel(this.basePoseId), i.initLights(), r.init(), s.initControls(), n.init(), o.init(), this.models[a] || (this.models[a] = {}), (P = this.models[a]) != null && P.active || (this.models[a].active = Ct.is.mobile ? lt : xe);
     }
   }
 });
-let ie = null, Pe = null;
-const Le = () => {
-  const e = p(), { aspect: t, width: o, height: s } = I(e), n = (a = { x: 0, y: 0.8, z: 1.5 }) => (console.debug("useCamera init"), ie ? (console.debug("view camera already inited"), ie) : (ie = new M.PerspectiveCamera(75, t.value, 0.1, 100), e.loaded.camera = !0, ie)), r = () => {
-    if (ie)
-      return ie;
-  };
-  return Pe = O(
-    () => t.value,
-    (a) => {
-      if (!ie) {
-        n();
-        return;
-      }
-      ie.aspect = a, ie.updateProjectionMatrix();
-    }
-  ), {
-    init: n,
-    getCamera: r,
-    dispose: () => {
-      Pe == null || Pe(), Pe = null, ie = null;
-    }
-  };
-};
-let se = null;
-const st = () => {
-  const e = ee(!1), t = ee({
+let Q = null;
+const ct = () => {
+  const e = pe(!1), t = pe({
     mode: null,
     camera: null,
     // camera (or your lights-camera)
     store: null
     // pinia store with position/quaternion/target
-  }), o = (b, f = {}) => {
-    if (console.debug("useOrbitControlsBase init"), se)
-      return console.debug("controls already inited"), se;
-    const E = new M.Object3D();
-    return se = new co(E, b.domElement), n(f), se;
-  }, s = () => {
-    if (!se) throw new Error("OrbitControls not initialized");
-    return se;
-  }, n = (b = {}) => {
-    const f = s();
-    f.enableDamping = b.enableDamping ?? !0, f.dampingFactor = b.dampingFactor ?? 0.5, f.rotateSpeed = b.rotateSpeed ?? 0.2, f.enableZoom = b.enableZoom ?? !0, f.minDistance = b.minDistance ?? 0.5, f.maxDistance = b.maxDistance ?? 6;
-  }, r = ({ mode: b, camera: f, store: E, options: D }) => {
-    const y = s();
-    if (!f) throw new Error(`setMode(${b}): camera is required`);
-    if (!E) throw new Error(`setMode(${b}): store is required`);
-    y.object = f, n(D), t.value = { mode: b, camera: f, store: E }, c(), y.update();
-  }, l = () => {
-    se && se.update();
-  }, a = () => {
-    const b = s(), { camera: f, store: E } = t.value;
-    !f || !E || e.value || (E.setPosition({ ...f.position }), E.setQuaternion({ ...f.quaternion }), E.setTarget({ ...b.target }), E.setRadius(f.position.distanceTo(b.target)));
+  }), s = (m, g = {}) => {
+    if (console.debug("useOrbitControlsBase init"), Q)
+      return console.debug("controls already inited"), Q;
+    const y = new I.Object3D();
+    return Q = new Ds(y, m.domElement), r(g), Q;
+  }, n = () => {
+    if (!Q) throw new Error("OrbitControls not initialized");
+    return Q;
+  }, r = (m = {}) => {
+    const g = n();
+    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 v = n();
+    if (!g) throw new Error(`setMode(${m}): camera is required`);
+    if (!y) throw new Error(`setMode(${m}): store is required`);
+    v.object = g, r(x), t.value = { mode: m, camera: g, store: y }, a(), v.update();
+  }, o = () => {
+    Q && Q.update();
   }, c = () => {
-    const b = s(), { camera: f, store: E } = t.value;
-    if (!f || !E) return;
+    const m = n(), { 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 m = n(), { camera: g, store: y } = t.value;
+    if (!g || !y) return;
     e.value = !0;
-    const { position: D, quaternion: y, target: k, radius: S } = E;
-    b.target.set(k.x, k.y, k.z);
-    const w = new M.Vector3(
-      D.x - k.x,
-      D.y - k.y,
-      D.z - k.z
+    const { position: x, quaternion: v, target: k, radius: R } = y;
+    m.target.set(k.x, k.y, k.z);
+    const F = new I.Vector3(
+      x.x - k.x,
+      x.y - k.y,
+      x.z - k.z
     ).normalize();
-    f.position.copy(b.target).add(w.multiplyScalar(S)), f.quaternion.set(
-      y.x,
-      y.y,
-      y.z,
-      y.w
-    ), b.update(), e.value = !1;
-  };
+    g.position.copy(m.target).add(F.multiplyScalar(R)), g.quaternion.set(
+      v.x,
+      v.y,
+      v.z,
+      v.w
+    ), m.update(), e.value = !1;
+  }, u = 0, p = 0.1;
   return {
-    init: o,
-    get: s,
-    setMode: r,
-    update: l,
-    syncToStore: a,
-    applyFromStore: c,
-    frameToBounds: (b, f = 1.75, E = 0.02) => {
-      const D = s(), { camera: y } = t.value;
-      if (!y || !b) return;
-      const k = new M.Vector3(
-        b.center.x,
-        b.center.y + b.size.y * E,
-        b.center.z
+    init: s,
+    get: n,
+    setMode: i,
+    update: o,
+    syncToStore: c,
+    applyFromStore: a,
+    frameToBounds: (m, g = 1.75) => {
+      const y = n(), { camera: x } = t.value;
+      if (!x || !m) return;
+      const v = new I.Vector3(
+        m.center.x,
+        m.center.y + m.size.y * u,
+        m.center.z
       );
-      console.log("bounds", b);
-      const S = Math.max(b.size.x, b.size.y, b.size.z), w = M.MathUtils.degToRad(y.fov);
-      let F = S / 2 / Math.tan(w / 2) * f;
-      D.target.copy(k), y.position.set(k.x, k.y, k.z + F), y.near = F / 100, y.far = F * 100, y.updateProjectionMatrix(), D.update();
+      console.log("bounds", m);
+      const k = Math.max(m.size.x, m.size.y, m.size.z), R = I.MathUtils.degToRad(x.fov);
+      let F = k / 2 / Math.tan(R / 2) * g;
+      y.target.copy(v), x.position.set(
+        v.x,
+        v.y + m.size.y * p,
+        v.z + F
+      ), x.near = F / 100, x.far = F * 100, x.updateProjectionMatrix(), y.update();
     },
     dispose: () => {
-      console.debug("controls disposed"), se && (se.dispose(), se = null, t.value = { mode: null, camera: null, store: null });
+      console.debug("controls disposed"), Q && (Q.dispose(), Q = null, t.value = { mode: null, camera: null, store: null });
     }
   };
-}, xt = () => {
-  const { getCamera: e } = Le(), t = Ct(), o = st();
+}, At = () => {
+  const { getCamera: e } = Re(), t = pt(), s = ct();
   return {
     activate: () => {
-      o.setMode({
+      s.setMode({
         mode: "camera",
         camera: e(),
         store: t,
@@ -915,37 +1052,13 @@ const st = () => {
           minDistance: 0.5,
           maxDistance: 6
         }
-      });
-    },
-    frameToBounds: o.frameToBounds,
-    syncToStore: o.syncToStore,
-    applyFromStore: o.applyFromStore
-  };
-};
-let te = null, Ge = null;
-const De = () => {
-  const e = lt(), t = p(), { colorHex: o } = I(e), s = () => (console.debug("useScene init"), te ? (console.debug("scene already inited"), te) : (te = new M.Scene(), r(o.value), t.loaded.scene = !0, te)), n = () => {
-    if (te)
-      return te;
-  }, r = (a) => {
-    if (!te) throw new Error("Scene has not been initialized");
-    te.background = new M.Color(a);
-  };
-  return Ge = O(
-    () => o.value,
-    (a) => r(a)
-  ), {
-    init: s,
-    get: n,
-    dispose: () => {
-      t.loaded.scene = !1, Ge == null || Ge(), Ge = null, te && (te.traverse((a) => {
-        var c, u;
-        a.isMesh && ((c = a.geometry) == null || c.dispose(), Array.isArray(a.material) ? a.material.forEach((g) => g == null ? void 0 : g.dispose()) : (u = a.material) == null || u.dispose());
-      }), te.clear(), te = null);
+      });
     },
-    setBackgroundColor: r
+    frameToBounds: s.frameToBounds,
+    syncToStore: s.syncToStore,
+    applyFromStore: s.applyFromStore
   };
-}, Co = {
+}, Zs = {
   asphalt: {
     ao: "ao.jpg",
     color: "color.jpg",
@@ -981,544 +1094,560 @@ const De = () => {
     repeat: 100
   }
 };
-let z = null, He = null, Re = null, Oe = null;
-const Lt = () => {
-  const e = Ve(), { get: t } = De(), { getCamera: o } = Le(), {
-    visible: s,
-    color: n,
-    texture: r,
-    offset: l
-  } = I(e), a = () => {
-    if (console.debug("useGround init"), z)
-      return console.debug("ground already inited"), z;
-    const D = t(), y = new M.PlaneGeometry(100, 100), k = new M.Color(n.value || 16777215), S = new M.MeshStandardMaterial({
-      color: k,
+let A = null, Ue = null, $e = null, qe = null;
+const _t = () => {
+  const e = Fe(), { get: t } = Ie(), { getCamera: s } = Re(), {
+    visible: n,
+    color: r,
+    texture: i,
+    offset: o
+  } = N(e), c = () => {
+    if (console.debug("useGround init"), A)
+      return console.debug("ground already inited"), A;
+    const g = t(), y = new I.PlaneGeometry(100, 100), x = new I.Color(r.value || 16777215), v = new I.MeshStandardMaterial({
+      color: x,
       // Default to white
-      side: M.DoubleSide,
+      side: I.DoubleSide,
       roughness: 0.4,
       metalness: 0.3,
-      emissive: k,
+      emissive: x,
       emissiveIntensity: 0.05
       // tweak 0.1–0.6
     });
-    return z = new M.Mesh(y, S), z.rotation.x = -Math.PI / 2, z.receiveShadow = !0, z.visible = s.value, D.add(z), He = O(
-      () => s.value,
-      () => c()
-    ), Re = O(
+    return A = new I.Mesh(y, v), A.rotation.x = -Math.PI / 2, A.receiveShadow = !0, A.visible = n.value, g.add(A), Ue = j(
       () => n.value,
-      (w) => f(w)
-    ), Oe = O(
+      () => a()
+    ), $e = j(
       () => r.value,
-      (w) => g(w)
-    ), z;
+      (k) => w(k)
+    ), qe = j(
+      () => i.value,
+      (k) => p(k)
+    ), A;
   };
-  function c() {
-    if (o().position.y < z.position.y) {
-      z.visible = !1;
+  function a() {
+    if (s().position.y < A.position.y) {
+      A.visible = !1;
       return;
     }
-    z.visible = s.value;
+    A.visible = n.value;
   }
-  function u(D, y = 1, k = 1) {
-    return new M.TextureLoader().load(D, (F) => {
-      F.wrapS = M.RepeatWrapping, F.wrapT = M.RepeatWrapping, F.repeat.set(y, k), F.needsUpdate = !0;
+  function u(g, y = 1, x = 1) {
+    return new I.TextureLoader().load(g, (R) => {
+      R.wrapS = I.RepeatWrapping, R.wrapT = I.RepeatWrapping, R.repeat.set(y, x), R.needsUpdate = !0;
     });
   }
-  const g = (D) => {
-    if (!z) throw new Error("Ground has not been initialized");
-    const y = Co[D];
+  const p = (g) => {
+    if (!A) throw new Error("Ground has not been initialized");
+    const y = Zs[g];
     if (!y)
-      z.material.map = null, z.material.normalMap = null, z.material.displacementMap = null, z.material.roughnessMap = null, z.material.aoMap = null, z.material.metalnessMap = null, z.material.needsUpdate = !0;
+      A.material.map = null, A.material.normalMap = null, A.material.displacementMap = null, A.material.roughnessMap = null, A.material.aoMap = null, A.material.metalnessMap = null, A.material.needsUpdate = !0;
     else {
-      const k = `https://static.figurosity.com/3d/textures/${D}/`, S = y.repeat;
-      z.material.map = u(
-        `${k}${y.color}`,
-        S,
-        S
-      ), z.material.normalMap = u(
-        `${k}${y.normal}`,
-        S,
-        S
-      ), z.material.displacementMap = u(
-        `${k}${y.displacement}`,
-        S,
-        S
-      ), z.material.roughnessMap = u(
-        `${k}${y.roughness}`,
-        S,
-        S
-      ), z.material.aoMap = u(
-        `${k}${y.ao}`,
-        S,
-        S
-      ), y.metalness && (z.material.metalnessMap = u(
-        `${k}${y.metalness}`,
-        S,
-        S
-      )), z.material.displacementScale = 0.1, z.material.displacementBias = -0.05, z.material.needsUpdate = !0;
+      const x = `https://static.figurosity.com/3d/textures/${g}/`, v = y.repeat;
+      A.material.map = u(
+        `${x}${y.color}`,
+        v,
+        v
+      ), A.material.normalMap = u(
+        `${x}${y.normal}`,
+        v,
+        v
+      ), A.material.displacementMap = u(
+        `${x}${y.displacement}`,
+        v,
+        v
+      ), A.material.roughnessMap = u(
+        `${x}${y.roughness}`,
+        v,
+        v
+      ), A.material.aoMap = u(
+        `${x}${y.ao}`,
+        v,
+        v
+      ), y.metalness && (A.material.metalnessMap = u(
+        `${x}${y.metalness}`,
+        v,
+        v
+      )), A.material.displacementScale = 0.1, A.material.displacementBias = -0.05, A.material.needsUpdate = !0;
     }
-    z.position.y = l.value, z.geometry.computeBoundingBox(), z.geometry.computeVertexNormals();
-  }, b = () => {
-    if (!z) throw new Error("Ground has not been initialized");
-    return z;
-  }, f = (D) => {
-    if (!z) throw new Error("Ground has not been initialized");
-    z.material.color.set(D);
+    A.position.y = o.value, A.geometry.computeBoundingBox(), A.geometry.computeVertexNormals();
+  }, P = () => {
+    if (!A) throw new Error("Ground has not been initialized");
+    return A;
+  }, w = (g) => {
+    if (!A) throw new Error("Ground has not been initialized");
+    A.material.color.set(g);
   };
-  return { init: a, get: b, setColor: f, updateVisibility: c, dispose: () => {
-    var y, k;
-    if (He == null || He(), Re == null || Re(), Oe == null || Oe(), He = null, Re = null, Oe = null, !z) return;
-    const D = t();
-    D == null || D.remove(z), (y = z.geometry) == null || y.dispose(), Array.isArray(z.material) ? z.material.forEach((S) => S == null ? void 0 : S.dispose()) : (k = z.material) == null || k.dispose(), z = 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, !A) return;
+    const g = t();
+    g == null || g.remove(A), (y = A.geometry) == null || y.dispose(), Array.isArray(A.material) ? A.material.forEach((v) => v == null ? void 0 : v.dispose()) : (x = A.material) == null || x.dispose(), A = null;
   } };
-}, xo = (e, t = 16711422) => {
-  const o = new po(0.1, 0.1, 0.1, 6, 0.01), s = 0.1, n = 0.05, r = new M.ConeGeometry(n, s, 32);
-  o.index || o.setIndex(
+}, Ys = (e, t = 16711422) => {
+  const s = new Ts(0.1, 0.1, 0.1, 6, 0.01), n = 0.1, r = 0.05, i = new I.ConeGeometry(r, n, 32);
+  s.index || s.setIndex(
     Array.from(
-      { length: o.attributes.position.count },
-      (u, g) => g
+      { length: s.attributes.position.count },
+      (u, p) => p
     )
-  ), r.index || r.setIndex(
+  ), i.index || i.setIndex(
     Array.from(
-      { length: r.attributes.position.count },
-      (u, g) => g
+      { length: i.attributes.position.count },
+      (u, p) => p
     )
-  ), r.rotateX(-Math.PI / 2), r.translate(0, 0, s / 2), Bt(o), Bt(r);
-  const l = uo([o, r]), a = new M.MeshBasicMaterial({
+  ), i.rotateX(-Math.PI / 2), i.translate(0, 0, n / 2), Rt(s), Rt(i);
+  const o = ks([s, i]), c = new I.MeshBasicMaterial({
     color: t,
     transparent: !0,
     opacity: 0.8
-  }), c = new M.Mesh(l, a);
-  if (c.position.set(0, 0, 0), c.rotateX(Math.PI), e && e.target) {
-    const u = new M.Vector3();
-    e.target.getWorldPosition(u), c.lookAt(u);
+  }), a = new I.Mesh(o, c);
+  if (a.position.set(0, 0, 0), a.rotateX(Math.PI), e && e.target) {
+    const u = new I.Vector3();
+    e.target.getWorldPosition(u), a.lookAt(u);
   }
-  return c.position.copy(e.position), c;
+  return a.position.copy(e.position), a;
 };
-let We = {}, ae = {}, X = {}, mt = {}, Ce = {}, ke = null, pe = null, qe = [], Ee = /* @__PURE__ */ new Map();
-const nt = () => {
-  const e = p(), t = Be(), o = ye();
-  ee(!1);
-  const { subjectLoaded: s, width: n, height: r, selected: l } = I(e), { debug: a, collection: c, advancedMode: u, move: g } = I(t), { get: b } = De(), f = t.property, E = () => {
-    if (pe)
-      return console.warn("lights camera already inited"), pe;
-    const d = b();
-    return ke = y(), pe = k(), c.value.forEach((i) => {
-      const x = i === "key" ? pe : d, { group: V, light: A, directional: j, visualization: L } = S(
-        i,
-        x
-      );
-      X[i] = A, We[i] = V, mt[i] = j, Ce[i] = L, X[i].castShadow = !0, X[i].angle = Math.PI / 8, X[i].penumbra = 0.2, X[i].shadow.camera.near = 0.5, X[i].shadow.camera.far = 12, X[i].shadow.focus = 0.9, X[i].shadow.mapSize.set(4096, 4096), X[i].shadow.bias = -2e-4, X[i].shadow.normalBias = 0.02, X[i].shadow.radius = 2, X[i].shadow.camera.updateProjectionMatrix();
-    }), q(), C(), pe;
-  }, D = () => {
-    if (!pe)
-      throw new Error("Light camera not initialized.");
-    return pe;
+let it = {}, ne = {}, q = {}, ie = {}, Te = null, ae = null, Me = [], Ae = /* @__PURE__ */ new Map();
+const ut = () => {
+  const e = M(), t = he(), s = fe();
+  pe(!1);
+  const { subjectLoaded: n, width: r, height: i, selected: o, basePoseId: c } = N(e), { debug: a, collection: u, advancedMode: p, move: P } = N(t), { get: w } = Ie(), m = t.property, g = () => {
+    if (ae)
+      return console.warn("lights camera already inited"), ae;
+    const S = w();
+    return Te = v(), ae = k(), u.value.forEach((l) => {
+      const f = l === "key" ? ae : S, { group: T, light: D, visualization: E } = R(l, f);
+      q[l] = D, it[l] = T, ie[l] = E, q[l].castShadow = !0, q[l].angle = Math.PI / 4, q[l].penumbra = 0.5, q[l].shadow.camera.near = 0.5, q[l].shadow.camera.far = 12, q[l].shadow.focus = 0.9, q[l].shadow.mapSize.set(4096, 4096), q[l].shadow.bias = -2e-4, q[l].shadow.normalBias = 0.02, q[l].shadow.radius = 2, q[l].shadow.camera.updateProjectionMatrix();
+    }), G(), Y(), ae;
   }, y = () => {
-    const d = b(), i = new M.AmbientLight(f("key", "color"), 0.75);
-    return d.add(i), i;
+    if (!ae)
+      throw new Error("Light camera not initialized.");
+    return ae;
+  }, x = (S) => {
+    S && (Object.values(q).forEach((l) => l == null ? void 0 : l.color.set(S)), Object.values(ie).forEach((l) => {
+      var f;
+      return (f = l == null ? void 0 : l.material) == null ? void 0 : f.color.set(S);
+    }));
+  }, v = () => {
+    const S = w(), l = new I.AmbientLight(16777215, 0.2);
+    return S.add(l), l;
   }, k = () => {
-    const d = b(), i = new M.PerspectiveCamera(
+    const S = w(), l = new I.PerspectiveCamera(
       75,
-      n.value / r.value,
+      r.value / i.value,
       0.1,
       100
     );
-    return i.position.set(0, 0, 1.5), d.add(i), i;
+    return l.position.set(0, 0, 1.5), S.add(l), l;
   };
-  function S(d, i = null) {
-    const x = b(), V = new M.Group(), A = new M.SpotLight(
-      f(d, "color"),
-      f(d, "opacity")
+  function R(S, l = null) {
+    const f = w(), T = new I.Group(), D = new I.SpotLight(
+      m(S, "color"),
+      m(S, "intensity")
     );
-    A.position.set(0, 0, 0);
-    const j = new M.DirectionalLight(f(d, "color"), 0.2);
-    j.position.set(0, 0, 4), F(), A.target.position.set(0, 1, 0), A.target.updateMatrixWorld(), x.add(A.target), V.add(A), V.add(j);
-    const L = xo(
-      A,
-      f(d, "visualizationColor")
-    ), P = t.isVisible(d);
-    return L.visible = P, V.add(L), i.add(V), { group: V, light: A, directional: j, visualization: L };
+    D.position.set(0, 0, 0), $(), D.target.position.set(0, 1, 0), D.target.updateMatrixWorld(), f.add(D.target), T.add(D);
+    const E = Ys(
+      D,
+      m(S, "visualizationColor")
+    ), O = t.isVisible(S);
+    return E.visible = O, T.add(E), l.add(T), { group: T, light: D, visualization: E };
   }
-  const w = () => {
-    F(), Z(), U();
-  }, F = () => {
-    ke && ke.color.set(f("key", "color"));
-    const d = t.lights[l.value];
-    d && Object.keys(d).forEach((i) => {
-      const x = X[i];
-      if (!x) return;
-      const V = f(i, "color"), A = f(i, "visible"), j = f(i, "opacity"), L = f(i, "shadow") || !1;
-      if (V && x.color.set(V), x.visible = A, j != null && (x.intensity = j), x.castShadow = L, L) {
-        const P = f(i, "shadowSettings", {});
-        x.shadow.mapSize.set(
-          P.width || 1024,
-          P.height || 1024
-        ), x.shadow.camera.near = P.near || 0.5, x.shadow.camera.far = P.far || 50, x.shadow.needsUpdate = !0;
+  const F = () => {
+    $(), K(), b();
+  }, $ = () => {
+    if (!t.lights[c.value]) return;
+    const l = t.seeds[o.value], f = t.ambientScale, T = t.userScale;
+    if (Te && (l != null && l.ambient) && (Te.intensity = l.ambient.intensity * f), l != null && l.env) {
+      const D = w();
+      D && (D.environmentIntensity = l.env.intensity * f);
+    }
+    u.value.forEach((D) => {
+      const E = q[D];
+      if (!E) return;
+      const O = m(D, "color"), ge = m(D, "visible"), J = m(D, "shadow") || !1;
+      if (O && E.color.set(O), E.visible = ge, l != null && l[D] && (E.intensity = l[D].intensity * T), E.castShadow = J, J) {
+        const re = m(D, "shadowSettings", {});
+        E.shadow.mapSize.set(
+          re.width || 1024,
+          re.height || 1024
+        ), E.shadow.camera.near = re.near || 0.5, E.shadow.camera.far = re.far || 50, E.shadow.needsUpdate = !0;
       }
     });
-  }, Z = () => {
-    const d = t.lights[l.value];
-    d && Object.keys(d).forEach((i) => {
-      if (!Ce[i]) return console.warn(`${i} does not exist`);
-      const x = t.isVisible(i);
-      Ce[i].visible = x, Ce[i].material.color.set(f(i, "color"));
+  }, K = () => {
+    t.lights[c.value] && u.value.forEach((l) => {
+      if (!ie[l]) return console.warn(`${l} does not exist`);
+      const f = t.isVisible(l);
+      ie[l].visible = f, ie[l].material.color.set(m(l, "color"));
     });
-  }, U = () => {
-    const d = t.lights[l.value];
-    d && Object.keys(d).forEach((i) => {
-      const x = f(i, "debug") || a.value;
-      !ae[i] && x && (ae[i] = Y(i, X[i]), X[i].add(ae[i])), ae[i] && !x && (ae[i] = Q(ae[i]));
+  }, b = () => {
+    t.lights[c.value] && u.value.forEach((l) => {
+      const f = m(l, "debug") || a.value;
+      !ne[l] && f && (ne[l] = h(l, q[l]), q[l].add(ne[l])), ne[l] && !f && (ne[l] = B(ne[l]));
     });
-  }, Y = (d, i) => {
-    const x = b(), V = new M.SpotLightHelper(
-      i,
-      f(d, "visualizationColor")
+  }, h = (S, l) => {
+    const f = w(), T = new I.SpotLightHelper(
+      l,
+      m(S, "visualizationColor")
     );
-    return x.add(V), V;
-  }, Q = (d) => {
-    const i = b();
-    if (!(!i || !d))
-      return i.remove(d), d.dispose(), d = null, d;
-  }, q = () => {
-    const d = D(), i = o.bounds;
-    if (!i) return;
-    const x = new M.Vector3(
-      i.center.x,
-      i.center.y,
-      // + bounds.size.y + 0.05,
-      i.center.z
-    ), V = new M.Vector3().subVectors(x, d.position).normalize(), A = new M.Vector3(
-      V.x,
+    return f.add(T), T;
+  }, B = (S) => {
+    const l = w();
+    if (!(!l || !S))
+      return l.remove(S), S.dispose(), S = null, S;
+  }, G = () => {
+    const S = y();
+    if (!s.bounds) return;
+    const f = t.target, T = new I.Vector3(f.x, f.y, f.z), D = new I.Vector3().subVectors(T, S.position).normalize(), E = new I.Vector3(
+      D.x,
       0,
-      V.z
-    ).normalize(), j = new M.Vector3(
-      -A.z,
+      D.z
+    ).normalize(), O = new I.Vector3(
+      -E.z,
       0,
-      A.x
-    ), P = 2 * d.position.distanceTo(x) / Math.sqrt(3), W = 1, _ = x.clone().add(j.clone().multiplyScalar(-P / W)).add(V.clone().multiplyScalar(Math.sqrt(3) * P / 2)), K = x.clone().add(j.clone().multiplyScalar(P / W)).add(V.clone().multiplyScalar(Math.sqrt(3) * P / 2));
-    We.fill.position.copy(_), We.back.position.copy(K), c.value.forEach((re) => {
-      var N, le, ue;
-      const m = X[re];
-      m.shadow.needsUpdate = !0, m.target.position.copy(x), m.target.updateMatrixWorld(), (N = Ce[re]) == null || N.lookAt(x), (ue = (le = ae[re]) == null ? void 0 : le.update) == null || ue.call(le);
-    });
-  }, B = (d) => {
-    const i = t.lights[d];
-    if (!i) return;
-    const x = `watcher-${d}`;
-    if (Ee.has(x)) return;
-    const V = [];
-    Object.keys(i).forEach((j) => {
-      var L, P;
-      (L = i[j]) != null && L.color && V.push(() => i[j].color), (P = i[j]) != null && P.visible && V.push(() => i[j].visible);
+      E.x
+    ), J = 2 * S.position.distanceTo(T) / Math.sqrt(3), re = 1, _e = T.clone().add(O.clone().multiplyScalar(-J / re)).add(D.clone().multiplyScalar(Math.sqrt(3) * J / 2)), as = T.clone().add(O.clone().multiplyScalar(J / re)).add(D.clone().multiplyScalar(Math.sqrt(3) * J / 2));
+    it.fill.position.copy(_e), it.back.position.copy(as), u.value.forEach((ht) => {
+      var Pt, st, Lt;
+      const gt = q[ht];
+      gt.shadow.needsUpdate = !0, gt.target.position.copy(T), gt.target.updateMatrixWorld(), (Pt = ie[ht]) == null || Pt.lookAt(T), (Lt = (st = ne[ht]) == null ? void 0 : st.update) == null || Lt.call(st);
     });
-    const A = O(
-      () => V.map((j) => j()),
-      w,
+  }, z = (S) => {
+    const l = `watcher-${S}`;
+    if (Ae.has(l)) return;
+    const f = j(
+      () => [t.lights[S], t.options[S]],
+      F,
       { deep: !0 }
     );
-    Ee.set(x, A);
-  }, T = (d) => {
-    const i = `watcher-${d}`, x = Ee.get(i);
-    x && (x(), Ee.delete(i));
-  }, C = () => {
-    qe.push(
-      O(
-        () => [u.value, l.value, g.value],
-        () => w()
+    Ae.set(l, f);
+  }, U = (S) => {
+    const l = `watcher-${S}`, f = Ae.get(l);
+    f && (f(), Ae.delete(l));
+  }, Y = () => {
+    Me.push(
+      j(
+        () => [p.value, o.value, P.value],
+        () => F()
+      )
+    ), Me.push(
+      j(
+        () => [t.ambientScale, t.userScale],
+        () => F()
       )
-    ), qe.push(
-      O(
-        () => s.value,
-        (d) => {
-          d === !0 && q();
+    ), Me.push(
+      j(
+        () => n.value,
+        (S) => {
+          S === !0 && G();
         }
       )
-    ), qe.push(
-      O(
-        () => l.value,
-        (d, i) => {
-          i && T(i), d != null && (B(d), Ht(w));
+    ), Me.push(
+      j(
+        () => c.value,
+        (S, l) => {
+          l && U(l), S != null && (z(S), ls(F));
         },
         { immediate: !0 }
       )
     );
   };
   return {
-    init: E,
-    updatePosition: q,
-    getCamera: D,
+    init: g,
+    updatePosition: G,
+    getCamera: y,
     dispose: () => {
-      const d = b();
-      d && (qe.forEach((i) => i()), qe = [], Ee.forEach((i) => i()), Ee.clear(), Object.values(X).forEach((i) => d.remove(i)), Object.values(mt).forEach((i) => d.remove(i)), Object.values(ae).forEach((i) => d.remove(i)), Object.values(Ce).forEach((i) => {
-        var x, V, A, j;
-        d.remove(i), (V = (x = i.geometry) == null ? void 0 : x.dispose) == null || V.call(x), (j = (A = i.material) == null ? void 0 : A.dispose) == null || j.call(A);
-      }), ke && d.remove(ke), We = {}, ae = {}, X = {}, mt = {}, Ce = {}, ke = null, pe = null);
-    }
+      const S = w();
+      S && (Me.forEach((l) => l()), Me = [], Ae.forEach((l) => l()), Ae.clear(), Object.values(q).forEach((l) => S.remove(l)), Object.values(ne).forEach((l) => S.remove(l)), Object.values(ie).forEach((l) => {
+        var f, T, D, E;
+        S.remove(l), (T = (f = l.geometry) == null ? void 0 : f.dispose) == null || T.call(f), (E = (D = l.material) == null ? void 0 : D.dispose) == null || E.call(D);
+      }), Te && S.remove(Te), it = {}, ne = {}, q = {}, ie = {}, Te = null, ae = null);
+    },
+    applyColorPreview: x,
+    applyFromStore: F
   };
-}, wt = () => {
-  const e = Be(), t = st(), { getCamera: o } = nt();
+}, Qs = 0.4, eo = 0.25, Bt = () => {
+  const e = he(), t = ct(), { getCamera: s } = ut();
   return {
     activate: () => {
       t.setMode({
         mode: "lights",
-        camera: o(),
+        camera: s(),
         store: e,
         options: {
           enableZoom: !0,
           minDistance: 0.5,
-          maxDistance: 10
+          maxDistance: 10,
+          // Invert OrbitControls' "drag the world" pan so shift+drag
+          // translates the rig in the direction of the drag — matches
+          // the user's "I'm moving the lights" mental model.
+          panSpeed: -1
         }
       });
     },
-    frameToBounds: t.frameToBounds,
+    frameToBounds: (i, o = 1.75) => {
+      if (!i) return;
+      const c = t.get(), a = s(), u = new I.Vector3(
+        i.center.x,
+        i.center.y + i.size.y * Qs,
+        i.center.z
+      ), p = Math.max(i.size.x, i.size.y, i.size.z), P = I.MathUtils.degToRad(a.fov), w = p / 2 / Math.tan(P / 2) * o;
+      c.target.copy(u), a.position.set(u.x, u.y + i.size.y * eo, u.z + w), a.near = w / 100, a.far = w * 100, a.updateProjectionMatrix(), c.update();
+    },
     syncToStore: t.syncToStore,
     applyFromStore: t.applyFromStore
   };
 };
-let me = null;
-const wo = () => {
+let le = null;
+const to = () => {
   const e = () => {
-    const o = p();
-    return me = new M.LoadingManager(), me.onStart = function(s) {
-      o.loading.active = !0, o.loading.url = s, o.loading.percent = 0;
-    }, me.onError = () => {
-      o.loading.active = !1, o.loading.url = null;
-    }, me.onLoad = function() {
-      o.loading.active = !1, o.loading.url = null, o.loading.percent = 100;
-    }, me.onProgress = function(s, n, r) {
-      o.loading.percent = Math.round(n / r * 100);
-    }, me;
-  };
-  return { get: () => (me || e(), me) };
-};
-let R = null, _e = null, Ue = null;
-const St = () => {
-  const e = p(), { get: t } = De(), { getCamera: o } = Le(), { width: s, height: n, subjectLoaded: r } = I(e);
-  function l(g) {
-    return console.debug("useRenderer init"), R ? (console.debug("renderer already inited"), R) : (R = new M.WebGLRenderer({ antialias: !0, alpha: !0 }), R.setSize(s.value, n.value), R.toneMapping = M.ACESFilmicToneMapping, R.toneMappingExposure = 1.2, R.shadowMap.enabled = !0, R.shadowMap.type = M.PCFSoftShadowMap, R.gammaFactor = 2.2, R.gammaOutput = !0, R.outputColorSpace = M.SRGBColorSpace, g && g.appendChild(R.domElement), e.loaded.renderer = !0, R);
-  }
-  const a = () => {
-    if (!R) throw new Error("Renderer has not been initialized");
-    return R;
-  }, c = () => {
-    const g = t(), b = o();
-    !g || !b || R.render(g, b);
-  };
-  _e = O(
-    () => [s.value, n.value],
-    ([g, b]) => {
-      !g || !b || !R || R.setSize(g, b);
-    }
-  ), Ue = O(
-    () => r.value,
-    () => c()
-  );
-  function u() {
-    console.debug("renderer disposed"), e.loaded.renderer = !1, _e == null || _e(), Ue == null || Ue(), _e = null, Ue = null, R && (R.domElement.parentElement && R.domElement.parentElement.removeChild(R.domElement), R.dispose(), R = null);
-  }
-  return {
-    init: l,
-    get: a,
-    dispose: u,
-    render: c
+    const s = M();
+    return le = new I.LoadingManager(), le.onStart = function(n) {
+      s.loading.active = !0, s.loading.url = n, s.loading.percent = 0;
+    }, le.onError = () => {
+      s.loading.active = !1, s.loading.url = null;
+    }, le.onLoad = function() {
+      s.loading.active = !1, s.loading.url = null, s.loading.percent = 100;
+    }, le.onProgress = function(n, r, i) {
+      s.loading.percent = Math.round(r / i * 100);
+    }, le;
   };
-}, Vt = (e, t, o = {}) => {
-  const { removeSpecular: s = !1, removeShininess: n = !1 } = o;
-  e && e.traverse((r) => {
-    if (!r.isMesh) return;
-    (Array.isArray(r.material) ? r.material : [r.material]).forEach((a) => {
-      a && (a.color && a.color.set(t), s && a.specular && a.specular.set(0), n && typeof a.shininess == "number" && (a.shininess = 0), a.needsUpdate = !0);
+  return { get: () => (le || e(), le) };
+}, so = /hair|lash|brow|eye|cornea|sclera|iris|pupil|tear|teeth|tongue|mouth|gum|lip|nail/i, oo = (e, t, s = {}) => {
+  const { removeSpecular: n = !1, removeShininess: r = !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 || ""}`;
+      so.test(a) || (c.color && c.color.set(t), n && c.specular && c.specular.set(0), r && typeof c.shininess == "number" && (c.shininess = 0), c.needsUpdate = !0);
     });
   });
-}, Do = 1, Bo = "https://www.gstatic.com/draco/v1/decoders/";
-let he = null, fe = null, Ae, ze, jt = 0;
-const Ft = () => {
-  const { get: e } = wo(), t = ye(), o = p(), s = Ve(), { selected: n } = I(o), { color: r, url: l } = I(t), { offset: a } = I(s), { getCamera: c } = Le(), { get: u } = De(), { render: g } = St(), b = (S) => {
-    const { frameToBounds: w } = xt(), { frameToBounds: F } = wt(), Z = ++jt;
-    o.subjectLoaded = !1, f();
-    const U = e();
-    fe || (fe = new ho(U), fe.setDecoderPath(Bo));
-    const Y = new mo(U);
-    Y.setDRACOLoader(fe), Y.setWithCredentials(!0), Y.manager.setURLModifier((Q) => Q), Y.load(S, (Q) => {
-      const q = Q == null ? void 0 : Q.scene;
-      if (Z !== jt) {
-        q == null || q.traverse((i) => {
-          var V;
-          if (!i.isMesh) return;
-          (V = i.geometry) == null || V.dispose();
-          const x = i.material;
-          Array.isArray(x) ? x.forEach((A) => A == null ? void 0 : A.dispose()) : x == null || x.dispose();
+}, no = 1, ro = "https://www.gstatic.com/draco/v1/decoders/", dt = {
+  roughnessFloor: 0.85,
+  metalness: null,
+  envMapIntensity: null,
+  applyTint: !0,
+  exposure: 0.8,
+  ambientIntensity: 0.2,
+  spotIntensity: 1,
+  envIntensity: 1
+}, io = {
+  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
+  // muscle; flipping to 0 restores diffuse. Studio-marble lighting:
+  // strong directional spots, very low ambient and env fill, lower
+  // exposure so lit surfaces don't saturate to white. The contrast
+  // between lit and unlit faces is what makes form readable.
+  smooth: {
+    ...dt,
+    roughnessFloor: 0.3,
+    metalness: 0,
+    envMapIntensity: 0.02,
+    exposure: 0.5,
+    ambientIntensity: 0
+  },
+  muscle: {
+    roughnessFloor: 0.9,
+    metalness: 0,
+    envMapIntensity: 0,
+    applyTint: !1,
+    exposure: 0.2,
+    ambientIntensity: 0.5,
+    spotIntensity: 0.3,
+    envIntensity: 1
+  }
+};
+let Se = null, ce = null, Be, Gt = 0, te = dt;
+const jt = () => {
+  const { get: e } = to(), t = fe(), s = M(), n = Fe(), r = Mt(), { selected: i } = N(s), { url: o } = N(t), { subjectHex: c } = N(r), { offset: a } = N(n), { getCamera: u } = Re(), { get: p } = Ie(), { render: P } = Xe(), w = (v) => {
+    const { setExposure: k } = Xe(), R = he(), F = ++Gt;
+    s.subjectLoaded = !1, m();
+    const $ = e();
+    ce || (ce = new As($), ce.setDecoderPath(ro));
+    const K = new Ms($);
+    K.setDRACOLoader(ce), K.setWithCredentials(!0), K.manager.setURLModifier((b) => b), K.load(v, (b) => {
+      var S;
+      const h = b == null ? void 0 : b.scene;
+      if (F !== Gt) {
+        h == null || h.traverse((l) => {
+          var T;
+          if (!l.isMesh) return;
+          (T = l.geometry) == null || T.dispose();
+          const f = l.material;
+          Array.isArray(f) ? f.forEach((D) => D == null ? void 0 : D.dispose()) : f == null || f.dispose();
         });
         return;
       }
-      if (!q)
+      if (!h)
         return;
-      he = q;
-      const B = u(), T = c(), C = new M.Group();
-      C.name = "GLBSubject", C.add(q), q.traverse((i) => {
-        i.isMesh && (i.castShadow = !0, i.receiveShadow = !0);
-      }), Vt(q, r.value), q.scale.setScalar(Do), q.updateMatrixWorld(!0);
-      const G = Mt(q);
-      C.position.y -= G.bottom, C.updateMatrixWorld(!0), B.add(C), he = C;
-      const d = Mt(C);
-      t.setBounds(d), g(B, T), w(d), F(d), o.subjectLoaded = !0;
+      Se = h, te = io[(S = t.model) == null ? void 0 : S.slug] || dt, k(te.exposure), R.seedFromRecipe(s.selected, te);
+      const B = p(), G = u(), z = new I.Group();
+      z.name = "GLBSubject", z.add(h);
+      const U = /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], T = `${l.name} ${f.map((E) => E == null ? void 0 : E.name).join(" ")}`, D = U.test(T);
+        f.forEach((E) => {
+          E && (te.roughnessFloor !== null && typeof E.roughness == "number" && (E.roughness = Math.max(
+            E.roughness,
+            te.roughnessFloor
+          )), te.metalness !== null && typeof E.metalness == "number" && (E.metalness = te.metalness), te.envMapIntensity !== null && typeof E.envMapIntensity == "number" && (E.envMapIntensity = te.envMapIntensity), E.transparent && D && (E.alphaTest = 0.2, E.depthWrite = !0), E.needsUpdate = !0);
+        });
+      }), te.applyTint && oo(h, c.value), h.scale.setScalar(no), h.updateMatrixWorld(!0);
+      const Y = Vt(h);
+      z.position.y -= Y.bottom, z.updateMatrixWorld(!0), B.add(z), Se = z;
+      const X = Vt(z);
+      t.setBounds(X), P(B, G), s.subjectLoaded = !0;
     });
-  }, f = () => {
-    if (!he) return;
-    u().remove(he), he.traverse((w) => {
-      var Z;
-      if (!w.isMesh) return;
-      (Z = w.geometry) == null || Z.dispose();
-      const F = w.material;
-      Array.isArray(F) ? F.forEach((U) => U == null ? void 0 : U.dispose()) : F == null || F.dispose();
-    }), he = null, o.subjectLoaded = !1;
-  }, E = (S) => {
-    Vt(he, S);
-  }, D = () => he, y = () => {
-    if (Ae || ze) {
+  }, m = () => {
+    if (!Se) return;
+    p().remove(Se), Se.traverse((k) => {
+      var F;
+      if (!k.isMesh) return;
+      (F = k.geometry) == null || F.dispose();
+      const R = k.material;
+      Array.isArray(R) ? R.forEach(($) => $ == null ? void 0 : $.dispose()) : R == null || R.dispose();
+    }), Se = null, s.subjectLoaded = !1;
+  }, g = () => Se, y = () => {
+    if (Be) {
       console.warn("useGLB.init() called more than once");
       return;
     }
-    Ae = O(
-      () => n.value,
-      (S, w) => {
-        !S || S === w || l.value && b(l.value);
+    Be = j(
+      () => i.value,
+      (v, k) => {
+        !v || v === k || o.value && w(o.value);
       },
       { immediate: !0 }
-    ), ze = O(
-      () => r.value,
-      (S) => E(S)
     );
-  }, k = () => {
-    Ae == null || Ae(), ze == null || ze(), Ae = null, ze = null, f(), fe == null || fe.dispose(), fe = null;
+  }, x = () => {
+    Be == null || Be(), Be = null, m(), ce == null || ce.dispose(), ce = null;
   };
-  return Rt(() => {
-    k();
-  }), { init: y, get: D, dispose: k, updateColor: E };
-}, Mo = (e, t, o = 500) => {
-  const s = e.material;
-  s.transparent = !0;
-  const n = s.opacity, r = performance.now(), l = (a) => {
-    const c = a - r, u = Math.min(c / o, 1), g = n + (t - n) * u;
-    s.opacity = g, u < 1 && requestAnimationFrame(l);
+  return Ut(() => {
+    x();
+  }), { init: y, get: g, dispose: x };
+}, ao = (e, t, s = 500) => {
+  const n = e.material;
+  n.transparent = !0;
+  const r = n.opacity, i = performance.now(), o = (c) => {
+    const a = c - i, u = Math.min(a / s, 1), p = r + (t - r) * u;
+    n.opacity = p, u < 1 && requestAnimationFrame(o);
   };
-  requestAnimationFrame(l);
-};
-let H = null, Ie = null, $e = null, Ne = null, Ze = null;
-const Pt = () => {
-  const e = Me(), t = Ve(), o = ye(), { show: s, lineColor: n, centerLineColor: r, divisions: l, size: a, opacity: c } = I(e), { offset: u } = I(t), { bounds: g } = I(o), { get: b } = De(), f = () => {
-    const B = Z(n.value), T = Z(r.value), { positions: C, colors: G } = E({
-      size: a.value,
-      divisions: l.value,
-      color: B,
-      centerColor: T
-    }), d = D(C, G), i = y(c.value);
-    return new M.LineSegments(d, i);
-  }, E = ({ size: B, divisions: T, color: C, centerColor: G }) => {
-    const d = B / 2, i = B / T, x = [], V = [], A = Math.floor(T / 2), j = (L, P, W, _) => {
-      x.push(L, P, W);
-      const K = _ ? G : C;
-      V.push(K.r, K.g, K.b);
+  requestAnimationFrame(o);
+}, lo = 34815;
+let _ = null, He = null, Je = null, Ke = null;
+const Ot = () => {
+  const e = ke(), t = Fe(), s = fe(), { show: n, divisions: r, size: i, opacity: o } = N(e), { offset: c } = N(t), { bounds: a } = N(s), { get: u } = Ie(), p = () => {
+    const b = k(lo), h = b, { positions: B, colors: G } = P({
+      size: i.value,
+      divisions: r.value,
+      color: b,
+      centerColor: h
+    }), z = w(B, G), U = m(o.value);
+    return new I.LineSegments(z, U);
+  }, P = ({ size: b, divisions: h, color: B, centerColor: G }) => {
+    const z = b / 2, U = b / h, Y = [], X = [], S = Math.floor(h / 2), l = (f, T, D, E) => {
+      Y.push(f, T, D);
+      const O = E ? G : B;
+      X.push(O.r, O.g, O.b);
     };
-    for (let L = 0; L <= T; L++) {
-      const P = -d + L * i, W = L === A;
-      for (let _ = 0; _ <= T; _++) {
-        const K = -d + _ * i, m = W || _ === A;
-        j(-d, P, K, m), j(+d, P, K, m);
+    for (let f = 0; f <= h; f++) {
+      const T = -z + f * U, D = f === S;
+      for (let E = 0; E <= h; E++) {
+        const O = -z + E * U, J = D || E === S;
+        l(-z, T, O, J), l(+z, T, O, J);
       }
     }
-    for (let L = 0; L <= T; L++) {
-      const P = -d + L * i, W = L === A;
-      for (let _ = 0; _ <= T; _++) {
-        const K = -d + _ * i, m = W || _ === A;
-        j(P, -d, K, m), j(P, +d, K, m);
+    for (let f = 0; f <= h; f++) {
+      const T = -z + f * U, D = f === S;
+      for (let E = 0; E <= h; E++) {
+        const O = -z + E * U, J = D || E === S;
+        l(T, -z, O, J), l(T, +z, O, J);
       }
     }
-    for (let L = 0; L <= T; L++) {
-      const P = -d + L * i, W = L === A;
-      for (let _ = 0; _ <= T; _++) {
-        const K = -d + _ * i, m = W || _ === A;
-        j(P, K, -d, m), j(P, K, +d, m);
+    for (let f = 0; f <= h; f++) {
+      const T = -z + f * U, D = f === S;
+      for (let E = 0; E <= h; E++) {
+        const O = -z + E * U, J = D || E === S;
+        l(T, O, -z, J), l(T, O, +z, J);
       }
     }
-    return { positions: x, colors: V };
-  }, D = (B, T) => {
-    const C = new M.BufferGeometry();
-    return C.setAttribute(
+    return { positions: Y, colors: X };
+  }, w = (b, h) => {
+    const B = new I.BufferGeometry();
+    return B.setAttribute(
       "position",
-      new M.Float32BufferAttribute(B, 3)
-    ), C.setAttribute("color", new M.Float32BufferAttribute(T, 3)), C;
-  }, y = (B) => new M.LineBasicMaterial({
+      new I.Float32BufferAttribute(b, 3)
+    ), B.setAttribute("color", new I.Float32BufferAttribute(h, 3)), B;
+  }, m = (b) => new I.LineBasicMaterial({
     transparent: !0,
-    opacity: B,
+    opacity: b,
     depthWrite: !1,
-    blending: M.NormalBlending,
-    vertexColors: !1
-  }), k = () => {
-    H && F(s.value);
-  }, S = () => {
-    const B = b();
-    H = f(n.value), Q(), B.add(H), w(0);
-  }, w = (B) => {
-    H && (H.material.transparent = !0, B = s.value ? B : 0, H.material.opacity = B);
-  }, F = (B) => {
-    const T = B ? c.value : 0;
-    Mo(H, T, 500);
-  }, Z = (B) => ({
-    r: (B >> 16 & 255) / 255,
-    g: (B >> 8 & 255) / 255,
-    b: (B & 255) / 255
-  }), U = (B, T) => {
-    if (!H) return;
-    const C = Z(B), G = Z(T), d = H.geometry.attributes.color, i = H.geometry.attributes.position, x = i.count, V = a.value / 2, A = a.value / l.value, j = Math.floor(l.value / 2);
-    for (let L = 0; L < x; L++) {
-      const P = i.getX(L), W = i.getY(L), _ = i.getZ(L), K = Math.round((P + V) / A), re = Math.round((W + V) / A), m = Math.round((_ + V) / A), le = K === j || re === j || m === j ? C : G;
-      d.setXYZ(L, le.r, le.g, le.b);
+    blending: I.NormalBlending,
+    vertexColors: !0
+  }), g = () => {
+    _ && v(n.value);
+  }, y = () => {
+    const b = u();
+    _ = p(), $(), b.add(_), x(0);
+  }, x = (b) => {
+    _ && (_.material.transparent = !0, b = n.value ? b : 0, _.material.opacity = b);
+  }, v = (b) => {
+    const h = b ? o.value : 0;
+    ao(_, h, 500);
+  }, k = (b) => ({
+    r: (b >> 16 & 255) / 255,
+    g: (b >> 8 & 255) / 255,
+    b: (b & 255) / 255
+  }), R = (b, h) => {
+    if (!_) return;
+    const B = k(b), G = k(h), z = _.geometry.attributes.color, U = _.geometry.attributes.position, Y = U.count, X = i.value / 2, S = i.value / r.value, l = Math.floor(r.value / 2);
+    for (let f = 0; f < Y; f++) {
+      const T = U.getX(f), D = U.getY(f), E = U.getZ(f), O = Math.round((T + X) / S), ge = Math.round((D + X) / S), J = Math.round((E + X) / S), _e = O === l || ge === l || J === l ? B : G;
+      z.setXYZ(f, _e.r, _e.g, _e.b);
     }
-    d.needsUpdate = !0;
-  }, Y = () => {
-    const B = b();
-    H && (B.remove(H), H.geometry.dispose(), H.material.dispose(), H = null), H = f(n.value), Q(), B.add(H);
-  }, Q = () => {
-    var T;
-    const B = ((T = g.value) == null ? void 0 : T.bottom) || 0;
-    H.position.set(0, B + a.value / 2 + 7e-3, 0);
+    z.needsUpdate = !0;
+  }, F = () => {
+    const b = u();
+    _ && (b.remove(_), _.geometry.dispose(), _.material.dispose(), _ = null), _ = p(), $(), b.add(_);
+  }, $ = () => {
+    var h;
+    const b = ((h = a.value) == null ? void 0 : h.bottom) || 0;
+    _.position.set(0, b + i.value / 2 + 7e-3, 0);
   };
-  return Ie = O(
-    () => [a.value, l.value],
-    ([B, T], [C, G]) => {
-      B === C && T === G || (Y(), k());
+  return He = j(
+    () => [i.value, r.value],
+    ([b, h], [B, G]) => {
+      b === B && h === G || (F(), g());
     },
     { flush: "post" }
-  ), $e = O(
-    () => s.value,
+  ), Je = j(
+    () => n.value,
     () => {
-      k();
+      g();
     },
     { flush: "post" }
-  ), Ne = O(
-    () => c.value,
-    (B) => {
-      w(B);
+  ), Ke = j(
+    () => o.value,
+    (b) => {
+      x(b);
     },
     { flush: "post" }
-  ), Ze = O(
-    () => [n.value, r.value],
-    ([B, T]) => {
-      U(T, B);
-    }
   ), {
-    init: S,
-    showHideGrid: F,
-    updateGridColors: U,
+    init: y,
+    showHideGrid: v,
+    updateGridColors: R,
     dispose: () => {
-      var T, C;
-      const B = b();
-      Ie == null || Ie(), $e == null || $e(), Ne == null || Ne(), Ze == null || Ze(), Ie = null, $e = null, Ne = null, Ze = null, H && (B.remove(H), (T = H.geometry) == null || T.dispose(), Array.isArray(H.material) ? H.material.forEach((G) => G == null ? void 0 : G.dispose()) : (C = H.material) == null || C.dispose(), H = null);
+      var h, B;
+      const b = u();
+      He == null || He(), Je == null || Je(), Ke == null || Ke(), He = null, Je = null, Ke = null, _ && (b.remove(_), (h = _.geometry) == null || h.dispose(), Array.isArray(_.material) ? _.material.forEach((G) => G == null ? void 0 : G.dispose()) : (B = _.material) == null || B.dispose(), _ = null);
     }
   };
-}, ko = { class: "three-dimension-tool" }, Eo = ["data-id"], Ao = /* @__PURE__ */ Object.assign({
+}, co = { class: "three-dimension-tool" }, uo = ["data-id"], po = /* @__PURE__ */ Object.assign({
   name: "ThreeDimensionTool",
   slug: "three-dimension-tool",
   inheritAttrs: !1
@@ -1529,200 +1658,207 @@ const Pt = () => {
   },
   setup(e) {
     const t = e;
-    let o = null;
-    const s = v(() => Number(t.id)), n = p(), r = Be(), l = ye(), { move: a } = I(r), c = ee(null), u = ee(!1);
-    let g, b, f;
-    const E = st(), D = xt(), y = wt(), { init: k } = De(), { init: S } = St(), { init: w } = Le(), { init: F, updateVisibility: Z } = Lt(), { init: U, updatePosition: Y } = nt(), { init: Q } = Ft(), { init: q } = Pt(), B = () => {
-      if (!c.value || u.value) {
+    let s = null;
+    const n = C(() => Number(t.id)), r = M(), i = pt(), o = he(), c = fe(), { move: a } = N(o), { isFrozen: u } = N(r), p = pe(null), P = pe(!1);
+    let w, m, g;
+    const y = ct(), x = At(), v = Bt(), { init: k, setEnvironment: R } = Ie(), { init: F } = Xe(), { init: $ } = Re(), { init: K, updateVisibility: b } = _t(), { init: h, updatePosition: B } = ut(), { init: G } = jt(), { init: z } = Ot(), U = () => {
+      if (!p.value || P.value) {
         console.warn("Canvas element not found");
         return;
       }
-      u.value = !0, f = k(), b = S(c.value), Q(), g = w(), U(), q(), F(), E.init(b), T();
-    }, T = () => {
-      u.value && (a.value !== o && (o = a.value, a.value ? y.activate() : D.activate()), E.update(), a.value ? (Y(), y.syncToStore()) : D.syncToStore(), Z(), b.render(f, g), requestAnimationFrame(T));
-    }, C = () => {
-      if (c.value) {
-        const G = window.innerWidth, d = window.innerHeight;
-        n.$patch({ width: G, height: d }), c.value.style.height = d + "px";
+      P.value = !0, g = k(), m = F(p.value), R(m), G(), w = $(), h(), z(), K(), y.init(m), Y();
+    }, Y = () => {
+      P.value && (a.value !== s && (s = a.value, a.value ? v.activate() : x.activate()), y.update(), a.value ? (B(), v.syncToStore()) : x.syncToStore(), b(), m.render(g, w), requestAnimationFrame(Y));
+    }, X = () => {
+      if (p.value) {
+        const l = window.innerWidth, f = window.innerHeight;
+        r.$patch({ width: l, height: f }), p.value.style.height = f + "px";
       }
+    }, S = () => {
+      u.value && r.pokeFreeze();
     };
-    return Xt(() => {
-      console.log("onMounted", c.value), B(), window.addEventListener("resize", C), C();
-    }), O(
-      () => l.bounds,
-      (G) => {
-        G && (E.frameToBounds(G), y.activate(), y.frameToBounds(G), y.syncToStore(), D.activate(), D.frameToBounds(G), D.syncToStore());
+    return j(u, (l) => {
+      var T;
+      const f = (T = y.get) == null ? void 0 : T.call(y);
+      f && (f.enabled = !l);
+    }), j(
+      () => [i.applyRevision, o.applyRevision],
+      () => {
+        P.value && (v.activate(), B(), x.activate());
+      }
+    ), $t(() => {
+      var l;
+      console.log("onMounted", p.value), U(), window.addEventListener("resize", X), X(), (l = p.value) == null || l.addEventListener("pointerdown", S, !0);
+    }), j(
+      () => c.bounds,
+      (l) => {
+        l && (v.activate(), o.hasRig || (v.frameToBounds(l), v.syncToStore(), o.markFramed()), x.activate(), i.hasRig || (x.frameToBounds(l), x.syncToStore(), i.markFramed()));
       }
-    ), O(
-      () => n.subjectLoaded,
-      (G) => {
-        if (!G) return;
-        const d = l.bounds;
-        if (!d) return;
-        E.frameToBounds(d);
-        const i = E.get();
-        i.update(), i.saveState();
+    ), j(
+      () => r.subjectLoaded,
+      (l) => {
+        if (!l) return;
+        const f = c.bounds;
+        if (!f) return;
+        i.hasRig || (y.frameToBounds(f), i.markFramed());
+        const T = y.get();
+        T.update(), T.saveState();
       }
-    ), Rt(() => {
-      console.debug("ThreeDimensionTool unMounted"), window.removeEventListener("resize", this), u.value = !1, Ft().dispose(), Pt().dispose(), Lt().dispose(), nt().dispose(), st().dispose(), Le().dispose(), De().dispose(), St().dispose();
-    }), (G, d) => (Je(), Yt("div", ko, [
-      ht("", !0),
-      Qt("div", {
+    ), Ut(() => {
+      var l;
+      console.debug("ThreeDimensionTool unMounted"), window.removeEventListener("resize", this), (l = p.value) == null || l.removeEventListener("pointerdown", S, !0), P.value = !1, jt().dispose(), Ot().dispose(), _t().dispose(), ut().dispose(), ct().dispose(), Re().dispose(), Ie().dispose(), Xe().dispose();
+    }), (l, f) => (at(), cs("div", co, [
+      wt("", !0),
+      us("div", {
         class: "tres",
         ref_key: "tres",
-        ref: c,
-        "data-id": s.value
-      }, null, 8, Eo)
+        ref: p,
+        "data-id": n.value
+      }, null, 8, uo)
     ]));
   }
-}), Gt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-CIql5zKW.js") }), J = (e = "../i18n") => {
-  const t = no(), o = ee({}), s = v(() => t.lang.isoName || "en-US"), n = async () => {
-    const r = `${e}/${s.value}/index.js`;
-    if (Gt[r])
+}), Nt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-CwHAnjEe.js") }), H = (e = "../i18n") => {
+  const t = bs(), s = pe({}), n = C(() => t.lang.isoName || "en-US"), r = async () => {
+    const i = `${e}/${n.value}/index.js`;
+    if (Nt[i])
       try {
-        const l = await Gt[r]();
-        l.default && Object.assign(o.value, l.default);
-      } catch (l) {
-        console.error(`Error loading i18n for ${s.value}`, l);
+        const o = await Nt[i]();
+        o.default && Object.assign(s.value, o.default);
+      } catch (o) {
+        console.error(`Error loading i18n for ${n.value}`, o);
       }
     else
-      console.error(`Module not found: ${r}`);
+      console.error(`Module not found: ${i}`);
   };
-  return O(
-    () => s.value,
+  return j(
+    () => n.value,
     () => {
-      n();
+      r();
     },
     { immediate: !0 }
-  ), Wt(() => {
-    n();
-  }), { lang: o };
-}, Se = ({ tab: e = oe, store: t, options: o = [] }) => {
-  const s = ao(), n = p(s), r = v({
-    get: () => n.isExpanded(o),
-    set: (c) => {
-      c && n.setActive(e);
+  ), ds(() => {
+    r();
+  }), { lang: s };
+}, Ee = 26, Z = ({ tab: e = oe, store: t, options: s = [] }) => {
+  const n = ws(), r = M(n), i = C({
+    get: () => r.isExpanded(s),
+    set: (a) => {
+      a && r.setActive(e);
     }
-  }), l = v(() => t && t.changed);
-  return { click: () => n.setActive(e), expanded: r, selected: l };
-}, Dt = $({
+  }), o = C(() => t && t.changed);
+  return { click: () => r.setActive(e), expanded: i, selected: o };
+}, zt = V({
   name: "ToolResetButton",
   props: {
     label: { type: String, required: !1, default: "Reset" },
     disable: Boolean
   },
   emits: ["click"],
-  setup(e, { slots: t, emit: o }) {
-    function s() {
-      o("click");
-    }
+  setup(e, { slots: t, emit: s }) {
     function n() {
-      const r = {
+      s("click");
+    }
+    function r() {
+      const i = {
         label: e.label,
         class: "full-width",
         flat: !0,
-        onClick: s,
+        onClick: n,
         disable: e.disable
       };
-      return h("div", { class: "tool-reset-button q-pa-md" }, h(Ot, r));
+      return d("div", { class: "tool-reset-button q-pa-md" }, d(qt, i));
     }
-    return () => n();
+    return () => r();
+  }
+}), ft = V({
+  name: "FrozenOverlay",
+  setup() {
+    const e = M(), { isFrozen: t } = N(e);
+    function s() {
+      return ps(d("div", {
+        class: "frozen-overlay",
+        onClick: () => e.pokeFreeze()
+      }, []), [[ms, t.value]]);
+    }
+    return () => s();
   }
-}), It = $({
+}), es = V({
   name: "TdColorsSection",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = p(), r = lt(), l = ye(), a = Ve(), { active: c } = I(n), u = ee(!1), g = ee(!1), b = ee(!1), f = v(
-      () => {
-        var C;
-        return (C = s.value.td) == null ? void 0 : C.components.colors.items.background;
-      }
-    ), E = v(
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = M(), i = mt(), o = Fe(), { active: c } = N(r), a = pe(!1), u = pe(!1), p = C(
       () => {
-        var C;
-        return (C = s.value.td) == null ? void 0 : C.components.colors.items.subject;
+        var b;
+        return (b = n.value.td) == null ? void 0 : b.components.colors.items.background;
       }
-    ), D = v(
+    ), P = C(
       () => {
-        var C;
-        return (C = s.value.td) == null ? void 0 : C.components.colors.items.ground;
+        var b;
+        return (b = n.value.td) == null ? void 0 : b.components.colors.items.ground;
       }
-    ), y = v(() => ({
-      key: E.value,
-      label: E.value,
-      type: "none",
-      icon: "f_subject",
-      size: "sm",
-      color: l.colorHex,
-      onClick: () => g.value = !0
-    })), k = v(() => ({
-      key: f.value,
-      label: f.value,
+    ), w = C(() => ({
+      key: p.value,
+      label: p.value,
       type: "none",
       icon: "f_scene",
       size: "sm",
-      color: r.colorHex,
-      onClick: () => u.value = !0
-    })), S = v(() => ({
-      key: D.value,
-      label: D.value,
+      color: i.colorHex,
+      onClick: () => a.value = !0
+    })), m = C(() => ({
+      key: P.value,
+      label: P.value,
       type: "none",
       icon: "f_ground",
       size: "sm",
-      color: a.colorHex,
-      onClick: () => b.value = !0
-    })), w = v({
-      get: () => b.value || u.value || g.value,
-      set: (C) => b.value = u.value = g.value = !1
-    }), F = v({
-      get: () => b.value ? a.colorHex : u.value ? r.colorHex : l.colorHex,
-      set: (C) => {
-        if (console.log("showGround", b.value), b.value) {
-          console.log("val", C), a.setColorHex(C);
-          return;
-        }
+      color: o.colorHex,
+      onClick: () => u.value = !0
+    })), g = C({
+      get: () => u.value || a.value,
+      set: (b) => u.value = a.value = !1
+    }), y = C({
+      get: () => u.value ? o.colorHex : i.colorHex,
+      set: (b) => {
         if (u.value) {
-          r.setColorHex(C);
+          o.setColorHex(b);
           return;
         }
-        l.setColorHex(C);
+        i.setColorHex(b);
       }
-    }), Z = v(() => ({
+    }), x = C(() => ({
       class: "td-colors-tool q-pa-xs row justify-center items-center q-gutter-md",
-      style: w.value ? "display: none" : ""
-    })), U = v(() => ({
-      modelValue: F.value,
-      "onUpdate:modelValue": (C) => F.value = C,
-      show: w.value,
-      "onUpdate:show": (C) => w.value = C,
-      label: Y.value
-    })), Y = v(() => b.value ? D.value : u.value ? f.value : E.value), Q = () => {
-      r.reset(), l.resetColor(), a.reset();
-    }, q = v(() => l.changed || a.changed || r.changed), B = v(() => ({
+      style: g.value ? "display: none" : ""
+    })), v = C(() => ({
+      modelValue: y.value,
+      "onUpdate:modelValue": (b) => y.value = b,
+      show: g.value,
+      "onUpdate:show": (b) => g.value = b,
+      label: k.value
+    })), k = C(() => u.value ? P.value : p.value), R = () => {
+      i.reset(), o.reset();
+    }, F = C(() => o.changed || i.changed), $ = C(() => ({
       label: "Reset Colors",
-      onClick: Q,
-      style: w.value ? "display: none" : "",
-      disable: !q.value
+      onClick: R,
+      style: g.value ? "display: none" : "",
+      disable: !F.value
     }));
-    O(c, (C) => {
-      C !== oe && (w.value = !1);
+    j(c, (b) => {
+      b !== oe && (g.value = !1);
     });
-    function T() {
-      return h("div", {
+    function K() {
+      return d("div", {
         class: "full-width"
-        // style: pickerShow.value ? 'display: none' : '',
       }, [
-        h("div", Z.value, [
-          h(ne, y.value),
-          h(ne, k.value),
-          h(ne, S.value)
+        d(ft),
+        d("div", x.value, [
+          d(me, w.value),
+          d(me, m.value)
         ]),
-        h(Dt, B.value),
-        h(qt, U.value)
+        d(zt, $.value),
+        d(ys, v.value)
       ]);
     }
-    return () => T();
+    return () => K();
   }
-}), zo = $({
+}), mo = V({
   name: "TdColorsExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1730,101 +1866,103 @@ const Pt = () => {
     label: { type: String, required: !1 }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = Ut(), { expanded: r, selected: l } = Se({
-      store: n,
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = Mt(), { expanded: i, selected: o } = Z({
+      store: r,
       options: oe,
       tab: oe
-    }), a = v(() => {
+    }), c = C(() => {
       var u;
-      return (u = s.value.td) == null ? void 0 : u.components.colors.title;
+      return (u = n.value.td) == null ? void 0 : u.components.colors.title;
     });
-    v({
+    C({
       get: () => e.modelValue,
-      set: (u) => o("update:modelValue", u)
+      set: (u) => s("update:modelValue", u)
     });
-    function c() {
+    function a() {
       const u = {
         class: "td-colors-expansion",
         "data-cy": "td-colors-expansion",
-        modelValue: r.value,
-        "onUpdate:modelValue": (g) => r.value = g,
-        label: a.value,
-        selected: l.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (p) => i.value = p,
+        label: c.value,
+        selected: o.value,
         icon: "f_palette"
       };
-      return h(rt, u, () => h(It));
+      return d(Ve, u, () => d(es));
     }
-    return () => c();
+    return () => a();
   }
-}), $t = $({
+}), ts = V({
   name: "TdGridSection",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = Me(), r = v(
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = ke(), i = C(
       () => {
-        var f, E;
-        return l.value ? ((f = s.value.td) == null ? void 0 : f.components.grid.toggle.off) || "" : ((E = s.value.td) == null ? void 0 : E.components.grid.toggle.on) || "";
+        var w, m;
+        return o.value ? ((w = n.value.td) == null ? void 0 : w.components.grid.toggle.off) || "" : ((m = n.value.td) == null ? void 0 : m.components.grid.toggle.on) || "";
       }
-    ), l = v({
-      get: () => n.show,
-      set: (f) => n.setProperty("show", f)
-    }), a = v({
-      get: () => n.opacity,
-      set: (f) => n.setProperty("opacity", f)
-    }), c = v({
-      get: () => n.size,
-      set: (f) => n.setProperty("size", f)
-    }), u = v({
-      get: () => n.divisions,
-      set: (f) => n.setProperty("divisions", f)
-    }), g = v(() => ({
+    ), o = C({
+      get: () => r.show,
+      set: (w) => r.setProperty("show", w)
+    }), c = C({
+      get: () => r.opacity,
+      set: (w) => r.setProperty("opacity", w)
+    }), a = C({
+      get: () => r.size,
+      set: (w) => r.setProperty("size", w)
+    }), u = C({
+      get: () => r.divisions,
+      set: (w) => r.setProperty("divisions", w)
+    }), p = C(() => ({
       label: "Reset Grid",
-      disable: !n.changed,
-      onClick: n.reset
+      disable: !r.changed,
+      onClick: r.reset
     }));
-    function b() {
-      const f = {
+    function P() {
+      const w = {
         class: "td-grid-tool"
-      }, E = {
+      }, m = {
         access: "grd",
         // drawer: !props.noIcons,
-        modelValue: l.value,
-        "onUpdate:modelValue": (w) => l.value = w,
-        label: r.value
+        modelValue: o.value,
+        "onUpdate:modelValue": (k) => o.value = k,
+        label: i.value
         // dark: props.dark,
         // disable: props.disable,
         // hasAccess: props.hasAccess,
         // onBlockAccess: emitBlockAccess,
-      }, D = {
+      }, g = {
         title: "Opacity",
         icon: "f_opacity",
         min: 1,
         max: 100,
         initial: 50,
-        modelValue: a.value * 100,
-        "onUpdate:modelValue": (w) => a.value = w / 100
+        modelValue: c.value * 100,
+        "onUpdate:modelValue": (k) => c.value = k / 100
       }, y = {
         title: "Size",
         icon: "f_size",
         min: 100,
         max: 300,
         initial: 200,
-        modelValue: c.value * 100,
-        "onUpdate:modelValue": (w) => c.value = w / 100
-      }, k = {
+        modelValue: a.value * 100,
+        "onUpdate:modelValue": (k) => a.value = k / 100
+      }, x = {
         title: "Number of lines",
         icon: "f_grid",
         min: 2,
         max: 10,
+        // Even-only so a grid line always passes through the model's center
+        step: 2,
         initial: 6,
         modelValue: u.value,
-        "onUpdate:modelValue": (w) => u.value = w
-      }, S = [h(Ke, E)];
-      return l.value && (S.push(h(dt, y)), S.push(h(dt, k)), S.push(h(dt, D)), S.push(h(Dt, g.value))), h("div", f, S);
+        "onUpdate:modelValue": (k) => u.value = k
+      }, v = [d(ft), d(Ht, m)];
+      return o.value && (v.push(d(We, y)), v.push(d(We, x)), v.push(d(We, g)), v.push(d(zt, p.value))), d("div", w, v);
     }
-    return () => b();
+    return () => P();
   }
-}), To = $({
+}), fo = V({
   name: "TdGridExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1832,34 +1970,34 @@ const Pt = () => {
     label: { type: String, required: !1 }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = Me(), { expanded: r, selected: l } = Se({
-      store: n,
-      options: xe,
-      tab: xe
-    }), a = v(() => {
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = ke(), { expanded: i, selected: o } = Z({
+      store: r,
+      options: we,
+      tab: we
+    }), c = C(() => {
       var u;
-      return (u = s.value.td) == null ? void 0 : u.components.grid.title;
+      return (u = n.value.td) == null ? void 0 : u.components.grid.title;
     });
-    v({
+    C({
       get: () => e.modelValue,
-      set: (u) => o("update:modelValue", u)
+      set: (u) => s("update:modelValue", u)
     });
-    function c() {
+    function a() {
       const u = {
         class: "td-colors-expansion",
         "data-cy": "td-colors-expansion",
-        modelValue: r.value,
-        "onUpdate:modelValue": (g) => r.value = g,
-        label: a.value,
-        selected: l.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (p) => i.value = p,
+        label: c.value,
+        selected: o.value,
         icon: "f_grid"
       };
-      return h(rt, u, () => h($t));
+      return d(Ve, u, () => d(ts));
     }
-    return () => c();
+    return () => a();
   }
-}), Nt = $({
+}), ss = V({
   name: "TdLightsSection",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1867,172 +2005,91 @@ const Pt = () => {
     label: { type: String, required: !1 }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = Be(), r = p(), l = nt(), { active: a } = I(r), c = v({
-      get: () => n.advancedMode,
-      set: (m) => n.setAdvanced(m)
-    }), u = v({
-      get: () => n.move,
-      set: (m) => n.setMove(m)
-    }), g = v(
-      () => {
-        var m, N;
-        return n.advancedMode ? ((m = s.value.td) == null ? void 0 : m.components.lights.toggles.advanced.off) || "" : ((N = s.value.td) == null ? void 0 : N.components.lights.toggles.advanced.on) || "";
-      }
-    ), b = v(() => ({
-      modelValue: c.value,
-      "onUpdate:modelValue": (m) => c.value = m,
-      label: g.value
-    })), f = v(
-      () => {
-        var m, N;
-        return n.move ? ((m = s.value.td) == null ? void 0 : m.components.lights.toggles.position.off) || "" : ((N = s.value.td) == null ? void 0 : N.components.lights.toggles.position.on) || "";
-      }
-    ), E = v(() => ({
-      modelValue: u.value,
-      "onUpdate:modelValue": (m) => u.value = m,
-      label: f.value
-    })), D = v(
-      () => {
-        var m;
-        return ((m = s.value.td) == null ? void 0 : m.components.lights.color) || "";
-      }
-    ), y = ee(!1), k = v(() => ({
-      key: D.value,
-      label: D.value,
-      type: "none",
-      icon: "f_bulb_light",
-      size: "sm",
-      color: n.colorHex("key"),
-      onClick: () => y.value = !0
-    })), S = v(
-      () => {
-        var m;
-        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.key) || "";
-      }
-    ), w = ee(!1), F = v({
-      get: () => n.colorHex("key"),
-      set: (m) => n.setColorHex("key", m)
-    }), Z = v(() => ({
-      key: S.value,
-      label: S.value,
-      type: "none",
-      icon: "f_bulb_key",
-      size: "sm",
-      color: F.value,
-      onClick: () => w.value = !0
-    })), U = v(
+  setup() {
+    const { lang: e } = H(), t = he(), s = M(), n = fe(), r = ut(), i = Bt(), o = At(), { active: c } = N(s), a = C({
+      get: () => t.move,
+      set: (h) => t.setMove(h)
+    }), u = C(
       () => {
-        var m;
-        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.back) || "";
+        var h, B;
+        return t.move ? ((h = e.value.td) == null ? void 0 : h.components.lights.toggles.position.off) || "" : ((B = e.value.td) == null ? void 0 : B.components.lights.toggles.position.on) || "";
       }
-    ), Y = ee(!1), Q = v({
-      get: () => n.colorHex("back"),
-      set: (m) => n.setColorHex("back", m)
-    }), q = v(() => ({
-      key: U.value,
-      label: U.value,
-      type: "none",
-      icon: "f_bulb_back",
-      size: "sm",
-      color: Q.value,
-      onClick: () => Y.value = !0,
-      disable: !T.value
-    })), B = v(
-      () => {
-        var m, N;
-        return T.value ? ((m = s.value.td) == null ? void 0 : m.components.lights.toggles.back.off) || "" : ((N = s.value.td) == null ? void 0 : N.components.lights.toggles.back.on) || "";
-      }
-    ), T = v({
-      get: () => n.property("back", "visible", !0),
-      set: (m) => n.setProperty("back", "visible", m)
-    }), C = v(() => ({
-      modelValue: T.value,
-      "onUpdate:modelValue": (m) => T.value = m,
-      label: B.value
-    })), G = v(
+    ), p = C(() => ({
+      modelValue: a.value,
+      "onUpdate:modelValue": (h) => a.value = h,
+      label: u.value
+    })), P = C(
       () => {
-        var m;
-        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.fill) || "";
+        var h;
+        return ((h = e.value.td) == null ? void 0 : h.components.lights.ambientIntensity) || "";
       }
-    ), d = ee(!1), i = v({
-      get: () => n.colorHex("fill"),
-      set: (m) => n.setColorHex("fill", m)
-    }), x = v(() => ({
-      key: G.value,
-      label: G.value,
-      type: "none",
-      icon: "f_bulb_fill",
-      size: "sm",
-      color: i.value,
-      onClick: () => d.value = !0,
-      disable: !A.value
-    })), V = v(
+    ), w = C(
       () => {
-        var m, N;
-        return A.value ? ((m = s.value.td) == null ? void 0 : m.components.lights.toggles.fill.off) || "" : ((N = s.value.td) == null ? void 0 : N.components.lights.toggles.fill.on) || "";
+        var h;
+        return ((h = e.value.td) == null ? void 0 : h.components.lights.userIntensity) || "";
       }
-    ), A = v({
-      get: () => n.property("fill", "visible", !0),
-      set: (m) => n.setProperty("fill", "visible", m)
-    }), j = v(() => ({
-      modelValue: A.value,
-      "onUpdate:modelValue": (m) => A.value = m,
-      label: V.value
-    })), L = v({
-      get: () => y.value || w.value || d.value || Y.value,
-      set: (m) => y.value = w.value = d.value = Y.value = !1
-    }), P = v({
-      get: () => y.value || w.value ? n.colorHex("key") : d.value ? n.colorHex("fill") : n.colorHex("back"),
-      set: (m) => {
-        if (y.value || w.value) {
-          n.setColorHex("key", m);
-          return;
-        }
-        if (d.value) {
-          n.setColorHex("fill", m);
-          return;
-        }
-        n.setColorHex("back", m);
+    ), m = 0, g = 50, y = 100, x = (h, B, G) => ({
+      toSlider: (z) => z <= B ? m + (z - h) / (B - h) * (g - m) : g + (z - B) / (G - B) * (y - g),
+      fromSlider: (z) => z <= g ? h + (z - m) / (g - m) * (B - h) : B + (z - g) / (y - g) * (G - B)
+    }), v = x(
+      Pe,
+      se,
+      Et
+    ), k = x(
+      Pe,
+      se,
+      It
+    ), R = (h, B, G, z) => ({
+      title: h,
+      icon: "f_brightness",
+      min: m,
+      max: y,
+      modelValue: B.toSlider(G),
+      "onUpdate:modelValue": (U) => {
+        z(B.fromSlider(U));
       }
-    }), W = v(() => ({
-      modelValue: P.value,
-      "onUpdate:modelValue": (m) => P.value = m,
-      show: L.value,
-      "onUpdate:show": (m) => L.value = m,
-      label: _.value
-    })), _ = v(() => y.value ? D.value : w.value ? S.value : d.value ? G.value : U.value), K = v(() => ({
+    }), F = C(
+      () => R(
+        P.value,
+        v,
+        t.ambientScale,
+        (h) => t.setAmbientScale(h)
+      )
+    ), $ = C(
+      () => R(
+        w.value,
+        k,
+        t.userScale,
+        (h) => t.setUserScale(h)
+      )
+    ), K = C(() => ({
       label: "Reset Lights",
-      disable: !n.changed,
+      disable: !t.changed,
       onClick: () => {
-        n.reset(), l.applyFromStore();
+        var B;
+        t.reset();
+        const h = n.bounds;
+        h && (i.activate(), i.frameToBounds(h), i.syncToStore(), o.activate()), (B = r.applyFromStore) == null || B.call(r);
       }
     }));
-    O(c, (m) => {
-      m || (A.value = !0, T.value = !0);
-    }), O(a, (m) => {
-      m !== ve && (L.value = !1, u.value = !1);
+    j(c, (h) => {
+      h !== de && (a.value = !1);
     });
-    function re() {
-      const m = {
+    function b() {
+      const h = {
         class: "td-lights-tool"
-      };
-      let N = [];
-      if (L.value)
-        N = [h(qt, W.value)];
-      else {
-        const le = {
-          class: "td-colors-tool q-pa-xs row justify-center items-center q-gutter-md"
-        }, ue = [];
-        c.value ? (ue.push(h(ne, Z.value)), ue.push(h(ne, x.value)), ue.push(h(ne, q.value))) : ue.push(h(ne, k.value));
-        const je = [];
-        je.push(h(Ke, E.value)), c.value && (je.push(h(Ke, j.value)), je.push(h(Ke, C.value))), je.push(h(Ke, b.value)), N = [h("div", le, ue), ...je], N.push(h(Dt, K.value));
-      }
-      return h("div", m, N);
+      }, B = [
+        d(ft),
+        d(Ht, p.value),
+        d(We, F.value),
+        d(We, $.value),
+        d(zt, K.value)
+      ];
+      return d("div", h, B);
     }
-    return () => re();
+    return () => b();
   }
-}), Lo = $({
+}), ho = V({
   name: "TdLightExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -2040,70 +2097,207 @@ const Pt = () => {
     label: { type: String, required: !1 }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = Be(), { expanded: r, selected: l } = Se({
-      store: n,
-      options: ve,
-      tab: ve
-    }), a = v(() => {
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = he(), { expanded: i, selected: o } = Z({
+      store: r,
+      options: de,
+      tab: de
+    }), c = C(() => {
       var u;
-      return (u = s.value.td) == null ? void 0 : u.components.lights.title;
+      return (u = n.value.td) == null ? void 0 : u.components.lights.title;
     });
-    v({
+    C({
       get: () => e.modelValue,
-      set: (u) => o("update:modelValue", u)
+      set: (u) => s("update:modelValue", u)
     });
-    function c() {
+    function a() {
       const u = {
         class: "td-lights-expansion",
         "data-cy": "td-lights-expansion",
-        modelValue: r.value,
-        "onUpdate:modelValue": (g) => r.value = g,
-        label: a.value,
-        selected: l.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (p) => i.value = p,
+        label: c.value,
+        selected: o.value,
         icon: "f_bulb_light"
       };
-      return h(rt, u, () => h(Nt));
+      return d(Ve, u, () => d(ss));
     }
-    return () => c();
+    return () => a();
   }
-}), Zt = $({
+}), os = V({
   name: "TdRelatedSection",
-  setup(e, { slots: t, emit: o }) {
-    const s = Symbol.for("RelatedThreeDSection"), n = Jt(s), r = p(), l = ye(), { poseId: a } = I(l);
-    function c() {
-      const u = {
+  setup() {
+    const e = Symbol.for("RelatedSection"), t = Ze(e);
+    function s() {
+      const n = {
         class: "td-related-section q-mx-lg q-my-sm"
-      }, g = [];
-      return n && a.value && g.push(
-        h(n, {
-          id: a.value,
-          glbId: r.selected
-        })
-      ), h("div", u, g);
+      }, r = [];
+      return t && r.push(d(t)), d("div", n, r);
     }
-    return () => c();
+    return () => s();
   }
-}), Vo = $({
+}), go = V({
   name: "TdRelatedExpansion",
-  setup(e, { slots: t, emit: o }) {
-    const { expanded: s } = Se({
-      options: we,
-      tab: we
-    }), n = v(() => "Related");
-    function r() {
-      const l = {
+  setup(e, { slots: t, emit: s }) {
+    const { expanded: n } = Z({
+      options: Ce,
+      tab: Ce
+    }), r = C(() => "Related");
+    function i() {
+      const o = {
         class: "td-related-expansion",
-        modelValue: s.value,
-        "onUpdate:modelValue": (a) => s.value = a,
-        label: n.value,
+        modelValue: n.value,
+        "onUpdate:modelValue": (c) => n.value = c,
+        label: r.value,
         icon: "f_related"
       };
-      return h(rt, l, () => h(Zt));
+      return d(Ve, o, () => d(os));
     }
-    return () => r();
+    return () => i();
   }
-}), Kt = $({
+}), 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();
+  }
+}), vo = V({
+  name: "TdSavedExpansion",
+  setup() {
+    const { expanded: e } = Z({
+      options: Ee,
+      tab: Ee
+    }), t = C(() => "Saved");
+    function s() {
+      const n = {
+        class: "td-saved-expansion",
+        modelValue: e.value,
+        "onUpdate:modelValue": (r) => e.value = r,
+        label: t.value,
+        icon: "f_save"
+      };
+      return d(Ve, n, () => d(ns));
+    }
+    return () => s();
+  }
+});
+function bo() {
+  const { freeServer: e, paidServer: t } = Cs();
+  return Es({ freeServer: e, paidServer: t });
+}
+const yo = Symbol.for("activity-tracking"), So = ["nude", "muscle", "smooth"];
+function xo() {
+  const e = M(), t = fe(), s = Ze(yo, null), { getThumbnail: n } = bo();
+  return { skins: C(() => {
+    const i = e.setUuid, o = e.selected, c = {};
+    return Object.values(t.models).forEach((a) => {
+      !(a != null && a.slug) || c[a.slug] || (c[a.slug] = a);
+    }), So.filter((a) => c[a]).map((a) => {
+      const u = c[a];
+      return {
+        id: u.id,
+        slug: a,
+        name: a,
+        imageUrl: i ? n({ type: "sets", uuid: i, image: a }) : null,
+        selected: u.id === o,
+        click: () => {
+          e.selected = u.id, s == null || s.trackEvent(Ps, { value: a });
+        }
+      };
+    });
+  }) };
+}
+const wo = V({
+  name: "TdSkinButton",
+  props: {
+    id: { type: Number, required: !0 },
+    slug: { type: String, required: !0 },
+    label: { type: String, default: "" },
+    image: { type: String, default: null },
+    selected: { type: Boolean, default: !1 },
+    size: { type: String, default: "sm" }
+  },
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const s = C(() => ({
+      margin: "3px",
+      marginBottom: e.size === "sm" ? "40px" : "30px"
+    }));
+    function n() {
+      const r = {
+        class: `td-${e.slug}-button td-skin-button`,
+        key: e.id,
+        label: e.label,
+        image: e.image,
+        size: e.size,
+        style: s.value,
+        type: "radio",
+        dark: !0,
+        selected: e.selected,
+        onClick: () => t("click")
+      };
+      return d(me, r);
+    }
+    return () => n();
+  }
+}), rs = V({
+  name: "TdSkinsSection",
+  props: { size: { type: String, default: "sm" } },
+  setup(e) {
+    const { skins: t } = xo(), { lang: s } = H();
+    function n() {
+      const r = [d(ft)];
+      return t.value.forEach((i) => {
+        var o, c;
+        r.push(
+          d(wo, {
+            id: i.id,
+            slug: i.slug,
+            label: ((c = (o = s.value.td) == null ? void 0 : o.components.skins.items) == null ? void 0 : c[i.slug]) ?? i.slug,
+            image: i.imageUrl,
+            selected: i.selected,
+            size: e.size,
+            onClick: i.click
+          })
+        );
+      }), d(Jt, {}, () => r);
+    }
+    return () => n();
+  }
+}), Co = V({
+  name: "TdSkinsExpansion",
+  setup() {
+    const { lang: e } = H(), t = fe(), { expanded: s } = Z({
+      options: xe,
+      tab: xe
+    }), n = C(() => {
+      var c;
+      const o = (c = t.model) == null ? void 0 : c.slug;
+      return !!o && o !== Wt;
+    }), r = C(() => {
+      var o;
+      return (o = e.value.td) == null ? void 0 : o.components.skins.title;
+    });
+    function i() {
+      const o = {
+        class: "td-skins-expansion",
+        "data-cy": "td-skins-expansion",
+        modelValue: s.value,
+        "onUpdate:modelValue": (c) => s.value = c,
+        label: r.value,
+        selected: n.value,
+        icon: "f_shirt"
+      };
+      return d(Ve, o, () => d(rs, { size: "sm", class: "q-py-sm" }));
+    }
+    return () => i();
+  }
+}), Eo = V({
   name: "TdButtons",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -2115,309 +2309,400 @@ const Pt = () => {
     }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const s = xt(), n = wt(), r = Ct(), l = Ve(), a = Be(), c = lt(), u = ye(), { changed: g } = I(r), { changed: b } = I(l), { changed: f } = I(a), { changed: E } = I(c), { changed: D } = I(u), y = v(() => !(g.value || b.value || f.value || E.value || D.value));
-    function k() {
-      r.reset(), l.reset(), a.reset(), c.reset(), u.resetColor(), s.applyFromStore(), n.applyFromStore();
+  setup(e, { slots: t, emit: s }) {
+    const n = At(), r = Bt(), i = pt(), o = Fe(), c = he(), a = mt(), { changed: u } = N(i), { changed: p } = N(o), { changed: P } = N(c), { changed: w } = N(a), m = C(() => !(u.value || p.value || P.value || w.value));
+    function g() {
+      i.reset(), o.reset(), c.reset(), a.reset(), n.applyFromStore(), r.applyFromStore();
     }
-    const S = (F) => F.preventDefault();
-    function w() {
-      const Z = {
-        style: v(() => e.fixed ? "position: fixed;bottom: 0; left: 0; right: 0;border-top: 1px solid var(--grey-300)" : ""),
+    const y = (v) => v.preventDefault();
+    function x() {
+      const k = {
+        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"
-      }, U = {
+      }, R = {
         class: "td-reset-button",
         label: "Reset All",
-        onClick: k,
-        onKeyup: S,
+        onClick: g,
+        onKeyup: y,
         rounded: !0,
         unelevated: !0,
         outline: !0,
-        disable: y.value
+        disable: m.value
       };
-      return h("div", Z, [h(Ot, U)]);
+      return d("div", k, [d(qt, R)]);
     }
-    return () => w();
+    return () => x();
   }
-}), jo = $({
-  name: "TdExpansions",
-  setup(e, { slots: t, emit: o }) {
+}), is = V({
+  name: "TdPoseButtonsSection",
+  setup() {
+    const e = Symbol.for("PoseButtonsSection"), t = Ze(e, null);
     function s() {
-      return h("div", {
+      const n = {
+        class: "td-pose-buttons-section"
+      }, r = [];
+      return t && r.push(d(t)), d("div", n, r);
+    }
+    return () => s();
+  }
+}), Io = V({
+  name: "TdExpansions",
+  setup(e, { slots: t, emit: s }) {
+    function n() {
+      return d("div", {
         class: "td-expansions",
-        onClick: (r) => r.stopPropagation(),
+        onClick: (i) => i.stopPropagation(),
         style: "padding-bottom: 60px; position: relative "
       }, [
-        // h(TsPoseButtonsSection),
-        h(Fe),
-        h(zo),
-        h(Fe),
-        h(To),
-        h(Fe),
-        h(Lo),
-        h(Fe),
+        d(is),
+        d(ve),
+        d(Co),
+        d(ve),
+        d(mo),
+        d(ve),
+        d(fo),
+        d(ve),
+        d(ho),
+        d(ve),
         // h(TsGridExpansion),
         // h(QSeparator),
         // h(TsAdjustmentExpansion),
-        h(Vo),
-        h(Fe),
+        d(go),
+        d(ve),
+        d(vo),
+        d(ve),
         // h('div', {}, store.loading.percent),
-        h(Kt)
+        d(Eo)
       ]);
     }
-    return () => s();
+    return () => n();
   }
-}), Fo = $({
+}), Do = V({
   name: "TdColorsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = Me(), o = p(), s = v(() => (o == null ? void 0 : o.hasAccess("grd")) || !1), { lang: n } = J(), r = v(() => {
-      var g;
-      return (g = n.value.td) == null ? void 0 : g.controls.colors.iconTitle;
-    }), { click: l, selected: a } = Se({
+    const t = ke(), s = M(), n = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = H(), i = C(() => {
+      var p;
+      return (p = r.value.td) == null ? void 0 : p.controls.colors.iconTitle;
+    }), { click: o, selected: c } = Z({
       store: t,
       options: oe,
       tab: oe
     });
-    function c(g) {
-      return o.block(g);
+    function a(p) {
+      return s.block(p);
     }
     function u() {
-      const g = {
-        hasAccess: s.value,
-        selected: a.value,
-        onClick: l,
-        onBlockAccess: c,
+      const p = {
+        hasAccess: n.value,
+        selected: c.value,
+        onClick: o,
+        onBlockAccess: a,
         size: e.size,
         "data-id": oe,
         name: "colors",
         type: "none",
         icon: "f_palette",
-        label: r.value
+        label: i.value
       };
-      return h(ne, g, () => []);
+      return d(me, p, () => []);
     }
     return () => u();
   }
-}), Po = $({
+}), ko = V({
   name: "TdGridButton",
   props: { size: String },
   setup(e, {}) {
-    const t = Me(), o = p(), s = v(() => (o == null ? void 0 : o.hasAccess("grd")) || !1), { lang: n } = J(), r = v(() => {
-      var g;
-      return (g = n.value.td) == null ? void 0 : g.controls.grid.iconTitle;
-    }), { click: l, selected: a } = Se({
+    const t = ke(), s = M(), n = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = H(), i = C(() => {
+      var p;
+      return (p = r.value.td) == null ? void 0 : p.controls.grid.iconTitle;
+    }), { click: o, selected: c } = Z({
       store: t,
-      options: xe,
-      tab: xe
+      options: we,
+      tab: we
     });
-    function c(g) {
-      return o.block(g);
+    function a(p) {
+      return s.block(p);
     }
     function u() {
-      const g = {
-        hasAccess: s.value,
-        selected: a.value,
-        onClick: l,
-        onBlockAccess: c,
+      const p = {
+        hasAccess: n.value,
+        selected: c.value,
+        onClick: o,
+        onBlockAccess: a,
         size: e.size,
-        "data-id": xe,
+        "data-id": we,
         name: "grid",
         type: "none",
         icon: "f_grid",
-        label: r.value
+        label: i.value
       };
-      return h(ne, g, () => []);
+      return d(me, p, () => []);
     }
     return () => u();
   }
-}), Go = $({
+}), To = V({
   name: "TdLightsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = Me(), o = p(), s = v(() => (o == null ? void 0 : o.hasAccess("grd")) || !1), { lang: n } = J(), r = v(() => {
-      var g;
-      return (g = n.value.td) == null ? void 0 : g.controls.lights.iconTitle;
-    }), { click: l, selected: a } = Se({
+    const t = ke(), s = M(), n = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = H(), i = C(() => {
+      var p;
+      return (p = r.value.td) == null ? void 0 : p.controls.lights.iconTitle;
+    }), { click: o, selected: c } = Z({
       store: t,
-      options: ve,
-      tab: ve
+      options: de,
+      tab: de
     });
-    function c(g) {
-      return o.block(g);
+    function a(p) {
+      return s.block(p);
     }
     function u() {
-      const g = {
-        hasAccess: s.value,
-        selected: a.value,
-        onClick: l,
-        onBlockAccess: c,
+      const p = {
+        hasAccess: n.value,
+        selected: c.value,
+        onClick: o,
+        onBlockAccess: a,
         size: e.size,
-        "data-id": ve,
+        "data-id": de,
         name: "lights",
         type: "none",
         icon: "f_bulb_light",
-        label: r.value
+        label: i.value
       };
-      return h(ne, g, () => []);
+      return d(me, p, () => []);
     }
     return () => u();
   }
-}), Ho = $({
+}), Mo = V({
   name: "TsAdjustmentsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = p(), { lang: o } = J(), s = v(() => {
-      var c;
-      return (c = o.value.td) == null ? void 0 : c.controls.related.iconTitle;
-    }), { click: n, selected: r } = Se({
-      options: we,
-      tab: we
+    const t = M(), { lang: s } = H(), n = C(() => {
+      var a;
+      return (a = s.value.td) == null ? void 0 : a.controls.related.iconTitle;
+    }), { click: r, selected: i } = Z({
+      options: Ce,
+      tab: Ce
     });
-    function l(c) {
-      return t.block(c);
+    function o(a) {
+      return t.block(a);
     }
-    function a() {
-      const c = {
+    function c() {
+      const a = {
         hasAccess: !0,
-        selected: r.value,
-        onClick: n,
-        onBlockAccess: l,
-        "data-id": we,
+        selected: i.value,
+        onClick: r,
+        onBlockAccess: o,
+        "data-id": Ce,
         size: e.size,
         name: "related",
         icon: "f_related",
         type: "none",
-        label: s.value
+        label: n.value
       };
-      return h(ne, c, () => []);
+      return d(me, a, () => []);
     }
-    return () => a();
+    return () => c();
+  }
+}), Ao = V({
+  name: "TdSavedButton",
+  props: { size: String },
+  setup(e) {
+    const t = M(), { lang: s } = H(), n = C(
+      () => {
+        var a, u;
+        return ((u = (a = s.value.td) == null ? void 0 : a.controls.saved) == null ? void 0 : u.iconTitle) || "Saved";
+      }
+    ), { click: r, selected: i } = Z({
+      options: Ee,
+      tab: Ee
+    });
+    function o(a) {
+      return t.block(a);
+    }
+    function c() {
+      const a = {
+        hasAccess: !0,
+        selected: i.value,
+        onClick: r,
+        onBlockAccess: o,
+        "data-id": Ee,
+        size: e.size,
+        name: "saved",
+        icon: "f_save",
+        type: "none",
+        label: n.value
+      };
+      return d(me, a, () => []);
+    }
+    return () => c();
   }
-}), Ro = $({
-  name: "TsDefaultDrawer",
+}), Bo = V({
+  name: "TdDefaultDrawer",
   props: {},
   emits: ["click"],
-  setup(e, { slots: t, emit: o }) {
-    const s = p(), n = "q-ma-xs";
-    function r(l) {
+  setup() {
+    const e = M(), t = "q-ma-xs";
+    function s(n) {
       return {
-        class: n,
+        class: t,
         size: "sm",
-        onClick: () => s.setActive(l)
+        onClick: () => e.setActive(n)
       };
     }
-    return () => h(
-      Qe,
-      { name: ot },
+    return () => d(
+      De,
+      { name: lt },
       {
-        default: () => h(ro, {}, () => [
-          h(Fo, r(oe)),
-          h(Po, r(xe)),
-          h(Go, r(ve)),
-          h(Ho, r(we))
+        default: () => d(Jt, {}, () => [
+          d(Do, s(oe)),
+          d(ko, s(we)),
+          d(To, s(de)),
+          d(Mo, s(Ce)),
+          d(Ao, s(Ee))
         ]),
-        secondary: () => h(Kt, { fixed: !1 })
+        secondary: () => d(is)
       }
     );
   }
-}), Oo = $({
+}), zo = V({
   name: "TdGridDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = v(() => {
-      var l;
-      return (l = s.value.td) == null ? void 0 : l.controls.grid.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = C(() => {
+      var o;
+      return (o = n.value.td) == null ? void 0 : o.controls.grid.title;
     });
-    function r() {
-      const l = {
+    function i() {
+      const o = {
         class: "td-grid-drawer",
-        name: xe,
-        label: n.value
+        name: we,
+        label: r.value
       };
-      return h(Qe, l, () => h($t));
+      return d(De, o, () => d(ts));
     }
-    return () => r();
+    return () => i();
   }
-}), qo = $({
+}), Po = V({
   name: "TdRelatedDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = v(() => {
-      var l;
-      return (l = s.value.td) == null ? void 0 : l.controls.related.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = C(() => {
+      var o;
+      return (o = n.value.td) == null ? void 0 : o.controls.related.title;
     });
-    function r() {
-      const l = {
+    function i() {
+      const o = {
         class: "td-related-drawer",
-        name: we,
-        label: n.value
+        name: Ce,
+        label: r.value
       };
-      return h(Qe, l, () => h(Zt));
+      return d(De, o, () => d(os));
     }
-    return () => r();
+    return () => i();
+  }
+}), Lo = V({
+  name: "TdSavedDrawer",
+  setup() {
+    const { lang: e } = H(), t = C(() => {
+      var n, r;
+      return ((r = (n = e.value.td) == null ? void 0 : n.controls.saved) == null ? void 0 : r.title) || "Saved";
+    });
+    function s() {
+      const n = {
+        class: "td-saved-drawer",
+        name: Ee,
+        label: t.value
+      };
+      return d(De, n, () => d(ns));
+    }
+    return () => s();
   }
-}), _o = $({
+}), Ro = V({
   name: "TdLightsDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = v(() => {
-      var l;
-      return (l = s.value.td) == null ? void 0 : l.controls.lights.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = C(() => {
+      var o;
+      return (o = n.value.td) == null ? void 0 : o.controls.lights.title;
     });
-    function r() {
-      const l = {
+    function i() {
+      const o = {
         class: "td-lights-drawer",
-        name: ve,
-        label: n.value
+        name: de,
+        label: r.value
       };
-      return h(Qe, l, () => h(Nt));
+      return d(De, o, () => d(ss));
     }
-    return () => r();
+    return () => i();
   }
-}), Uo = $({
+}), Vo = V({
   name: "TdLightsDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = v(() => {
-      var l;
-      return (l = s.value.td) == null ? void 0 : l.controls.colors.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = H(), r = C(() => {
+      var o;
+      return (o = n.value.td) == null ? void 0 : o.controls.colors.title;
     });
-    function r() {
-      const l = {
+    function i() {
+      const o = {
         class: "td-colors-drawer",
         name: oe,
-        label: n.value
+        label: r.value
       };
-      return h(Qe, l, () => h(It));
+      return d(De, o, () => d(es));
     }
-    return () => r();
+    return () => i();
+  }
+}), Fo = V({
+  name: "TdSkinsDrawer",
+  setup() {
+    const { lang: e } = H(), { expanded: t } = Z({
+      options: xe,
+      tab: xe
+    }), s = C(() => {
+      var r;
+      return (r = e.value.td) == null ? void 0 : r.controls.skins.title;
+    });
+    function n() {
+      const r = {
+        class: "td-skins-drawer",
+        name: xe,
+        label: s.value,
+        modelValue: t.value,
+        "onUpdate:modelValue": (i) => t.value = i
+      };
+      return d(De, r, () => d(rs));
+    }
+    return () => n();
   }
-}), Io = $({
+}), _o = V({
   name: "TsDrawers",
-  setup(e, { slots: t, emit: o }) {
-    const s = p(), n = v({
-      get: () => s.active,
-      set: (l) => s.setActive(l)
+  setup(e, { slots: t, emit: s }) {
+    const n = M(), r = C({
+      get: () => n.active,
+      set: (o) => n.setActive(o)
     });
-    function r() {
-      const l = {
-        modelValue: n.value,
-        "onUpdate:modelValue": (a) => n.value = a
+    function i() {
+      const o = {
+        modelValue: r.value,
+        "onUpdate:modelValue": (c) => r.value = c
       };
-      return h(lo, l, () => [
-        h(Ro),
-        h(_o),
-        h(Uo),
-        h(Oo),
-        h(qo)
+      return d(Ss, o, () => [
+        d(Bo),
+        d(Fo),
+        d(Ro),
+        d(Vo),
+        d(zo),
+        d(Po),
+        d(Lo)
       ]);
     }
-    return () => r();
+    return () => i();
   }
-}), ns = /* @__PURE__ */ Object.assign({
+}), Qo = /* @__PURE__ */ Object.assign({
   name: "TdPage",
   slug: "td-page",
   inheritAttrs: !1
 }, {
   __name: "TdPage",
-  props: /* @__PURE__ */ so({
+  props: /* @__PURE__ */ vs({
     id: Number
   }, {
     miniState: { type: Boolean },
@@ -2425,29 +2710,41 @@ const Pt = () => {
   }),
   emits: ["update:miniState"],
   setup(e) {
-    const t = e, o = p(), s = v(() => Number(t.id)), n = eo(e, "miniState");
-    return to(() => {
-      o.setActive(ft.is.mobile ? ot : oe);
-    }), (r, l) => (Je(), it(at(io), {
+    const t = e, s = Symbol.for("activity-tracking"), n = M(), r = Ze(s, null), i = C(() => Number(t.id)), o = fs(e, "miniState"), c = (a) => {
+      a && (r == null || r.trackEvent(zs, {
+        glb_id: n.selected || null,
+        base_pose_id: a
+      }));
+    };
+    return $t(async () => {
+      r && (await r.beginExplore(), r.trackEvent(Bs, { from: null, to: "3d" }), n.basePoseId && (r.beginSegment(String(n.basePoseId)), c(n.basePoseId)));
+    }), j(
+      () => n.basePoseId,
+      (a, u) => {
+        !a || a === u || (r == null || r.beginSegment(String(a)), c(a));
+      }
+    ), hs(() => {
+      n.setActive(Ct.is.mobile ? lt : oe), r == null || r.end();
+    }), (a, u) => (at(), vt(bt(xs), {
       class: "three-dimension-page",
-      miniState: n.value,
-      "onUpdate:miniState": l[0] || (l[0] = (a) => n.value = a),
+      miniState: o.value,
+      "onUpdate:miniState": u[0] || (u[0] = (p) => o.value = p),
       "no-drawer-padding": !0,
       title: "3D Viewer"
     }, {
-      toolDrawer: ct(() => [
-        r.$q.platform.is.mobile ? ht("", !0) : (Je(), it(at(jo), { key: 0 }))
+      toolDrawer: yt(() => [
+        a.$q.platform.is.mobile ? wt("", !0) : (at(), vt(bt(Io), { key: 0 }))
       ]),
-      bottomDrawer: ct(() => [
-        r.$q.platform.is.mobile ? (Je(), it(at(Io), { key: 0 })) : ht("", !0)
+      bottomDrawer: yt(() => [
+        a.$q.platform.is.mobile ? (at(), vt(bt(_o), { key: 0 })) : wt("", !0)
       ]),
-      default: ct(() => [
-        oo(Ao, { id: s.value }, null, 8, ["id"])
+      default: yt(() => [
+        gs(po, { id: i.value }, null, 8, ["id"])
       ]),
       _: 1
     }, 8, ["miniState"]));
   }
-}), $o = [
+}), Go = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -2488,29 +2785,29 @@ const Pt = () => {
   "#BDACA8",
   "#DACDC9",
   "#E5E4E3"
-], rs = de("3d-fbxs", {
+], en = Ye("3d-fbxs", {
   state: () => ({
     models: {},
     loadingUrl: null,
-    palette: $o
+    palette: Go
   }),
   getters: {
     changed(e) {
-      var s, n, r, l, a;
-      const o = p().selected;
-      return console.log("fbx model", (s = e.models) == null ? void 0 : s[o]), (r = (n = e.models) == null ? void 0 : n[o]) != null && r.color ? ((a = (l = e.models) == null ? void 0 : l[o]) == null ? void 0 : a.color) !== 16777215 : !1;
+      var n, r, i, o, c;
+      const s = M().selected;
+      return console.log("fbx model", (n = e.models) == null ? void 0 : n[s]), (i = (r = e.models) == null ? void 0 : r[s]) != null && i.color ? ((c = (o = e.models) == null ? void 0 : o[s]) == null ? void 0 : c.color) !== 16777215 : !1;
     },
     selectedId() {
-      return p().selected;
+      return M().selected;
     },
     poseId(e) {
-      var s, n;
-      const o = p().selected;
-      return (n = (s = e.models) == null ? void 0 : s[o]) == null ? void 0 : n.poseId;
+      var n, r;
+      const s = M().selected;
+      return (r = (n = e.models) == null ? void 0 : n[s]) == null ? void 0 : r.poseId;
     },
     model(e) {
-      const o = p().selected;
-      return o && e.models[o] ? e.models[o] : null;
+      const s = M().selected;
+      return s && e.models[s] ? e.models[s] : null;
     },
     url() {
       var e;
@@ -2526,37 +2823,37 @@ const Pt = () => {
     },
     colorHex() {
       var e;
-      return (e = this.model) != null && e.color ? ce(this.model.color) : "#fefefe";
+      return (e = this.model) != null && e.color ? ue(this.model.color) : "#fefefe";
     }
   },
   actions: {
     resetColor() {
-      const t = p().selected;
+      const t = M().selected;
       this.models[t].color = 16777215;
     },
     setBounds(e) {
-      const o = p().selected;
-      this.models[o].bounds = _t(e);
+      const s = M().selected;
+      this.models[s].bounds = Kt(e);
     },
     setSubjectsFromResponse(e) {
       const t = e.entities.fbx;
       this.models = { ...this.models, ...t };
     },
     setColorHex(e) {
-      const o = p().selected;
-      this.models[o].color = be(e);
+      const s = M().selected;
+      this.models[s].color = et(e);
     }
   }
 });
 export {
-  ns as TdPage,
-  p as use3dStore,
-  Ut as useColorsStore,
-  Ct as useControlsStore,
-  rs as useFBXStore,
-  ye as useGLBStore,
-  Me as useGridStore,
-  Ve as useGroundStore,
-  Be as useLightsStore,
-  lt as useSceneStore
+  Qo as TdPage,
+  M as use3dStore,
+  Mt as useColorsStore,
+  pt as useControlsStore,
+  en as useFBXStore,
+  fe as useGLBStore,
+  ke as useGridStore,
+  Fe as useGroundStore,
+  he as useLightsStore,
+  mt as useSceneStore
 };