@figurosity/consumer-three-dimension-tool 0.2.0 → 0.5.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";
+import { watch as O, ref as pe, nextTick as ns, onUnmounted as _t, computed as C, onMounted as jt, openBlock as nt, createElementBlock as rs, createCommentVNode as vt, createElementVNode as is, onBeforeMount as as, defineComponent as R, h as d, inject as xt, useModel as ls, onBeforeUnmount as cs, createBlock as mt, unref as ft, withCtx as ht, createVNode as us, mergeModels as ds } from "vue";
+import { useQuasar as ps, QBtn as Ut, QSeparator as Ie, Platform as ms } from "quasar";
+import { CBaseButton as Ce, CColorPickerPopup as fs, CExpansion as We, CToggle as Ot, CSlider as Ke, CBaseButtons as $t, CDraggableDrawer as Pe, CDraggableDrawers as hs, CToolPage as gs } from "@figurosity/consumer-controls";
+import { defineStore as Xe, storeToRefs as $, getActivePinia as bs } from "pinia";
+import * as I from "three";
+import Ze from "lodash.isequal";
+import { SKINS as ye, COLORS as se, GRID as Se, LIGHTS as de, RELATED as xe, getConfig as vs, useDynamicImages as ys, DEFAULT as Nt } from "@figurosity/toolbox";
+import { OrbitControls as Ss } from "three/examples/jsm/controls/OrbitControls.js";
 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 xs } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { mergeVertices as Bt, mergeGeometries as Cs } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import { RoundedBoxGeometry as ws } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
+import { GLTFLoader as Es } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader as Is } from "three/examples/jsm/loaders/DRACOLoader.js";
+const Ms = "tool:switched", Ds = "pose:viewed", Ts = "skin:changed", gt = new I.Vector3(), zt = (e) => {
+  const t = new I.Box3().setFromObject(e);
   console.log("box", t);
-  const o = t.getSize(new M.Vector3()), s = new M.Vector3(
+  const s = t.getSize(new I.Vector3()), i = 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", i);
+  let r = t.min.y;
+  return console.log("bottom", r), Math.abs(r) < -0.01 && (r = ks(e)), console.log("bottom", r), {
     box: t,
-    size: o,
-    center: s,
-    bottom: n,
+    size: s,
+    center: i,
+    bottom: r,
     top: t.max.y
   };
-}, fo = (e) => {
+}, ks = (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, n;
+    if (!s.isMesh) return;
+    const i = (n = (r = s.geometry) == null ? void 0 : r.attributes) == null ? void 0 : n.position;
+    if (i)
+      for (let o = 0; o < i.count; o++)
+        gt.fromBufferAttribute(i, o), gt.applyMatrix4(s.matrixWorld), t = Math.min(t, gt.y);
   }), t;
-}, _t = (e) => ({
+}, Ht = (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) => ({
+}), qt = "smooth", As = (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", {
+}), me = Xe("3d-glbs", {
   state: () => ({
-    models: {},
-    palette: vo
+    models: {}
   }),
   getters: {
     selectedId() {
-      return p().selected;
+      return A().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, i;
+      const t = A().selected;
+      return (i = (s = e.models) == null ? void 0 : s[t]) == null ? void 0 : i.poseId;
     },
     model(e) {
-      const t = p().selected;
+      const t = A().selected;
       return t && e.models[t] ? e.models[t] : null;
     },
     url() {
@@ -146,232 +101,341 @@ 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 = A().selected;
+      this.models[t] && (this.models[t].bounds = Ht(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 i;
+      const t = ((i = e == null ? void 0 : e.entities) == null ? void 0 : i.glb) || {}, s = {};
+      return Object.keys(t).forEach((r) => {
+        s[r] = As(t[r]);
+      }), 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, l, 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 = ((l = e == null ? void 0 : e.entities) == null ? void 0 : l.skins) || {}, i = ((a = e == null ? void 0 : e.entities) == null ? void 0 : a.glb) || {}, n = t.find((u) => {
+        var D, w;
+        const p = (D = i[u]) == null ? void 0 : D.skinId;
+        return p != null && ((w = s[p]) == null ? void 0 : w.slug) === qt;
       }) ?? t[0];
-      return typeof r == "string" ? parseInt(r, 10) : r;
+      return typeof n == "string" ? parseInt(n, 10) : n;
     }
   }
-}), gt = { visible: !0, opacity: 1, color: 16711422, texture: "none" }, kt = (e = {}) => ({ ...gt, ...e }), Ve = de("3d-ground", {
+});
+function Ye(e) {
+  const t = e.startsWith("#") ? e.slice(1) : e;
+  return parseInt(t, 16);
+}
+function ue(e) {
+  return `#${e.toString(16).padStart(6, "0")}`;
+}
+const Qe = ({
+  storeId: e,
+  defaultValues: t = {},
+  state: s = {},
+  getters: i = {},
+  actions: r = {},
+  keyBy: n = "selected"
+}) => Xe(e, {
   state: () => ({
+    loading: !1,
     models: {},
-    offset: -0.75
+    ...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 A()[n];
     },
-    property() {
-      return (e, t = null) => {
-        var o;
-        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
-      };
+    model(o) {
+      return o.models[A()[n]];
     },
-    selectedId() {
-      return p().selected;
+    exists(o) {
+      return typeof o.models[A()[n]] < "u";
     },
-    selectedModel(e) {
-      const t = this.selectedId;
-      return e.models[t] ?? null;
+    selectedModel(o) {
+      return o.models[A()[n]] ?? null;
     },
     mergedModel() {
-      return { ...gt, ...this.selectedModel ?? {} };
+      return { ...t, ...this.selectedModel ?? {} };
     },
-    model(e) {
-      const o = p().selected;
-      return o && e.models[o] ? e.models[o] : null;
+    propertyById(o) {
+      return (l, a, u = null) => o.models[l] && a in o.models[l] ? o.models[l][a] : u;
     },
-    color() {
-      return this.mergedModel.color;
-    },
-    colorHex() {
-      return ce(this.mergedModel.color);
+    propertyChangedById() {
+      return (o, l) => this.propertyById(o, l) !== t[l];
     },
-    opacity() {
-      return this.mergedModel.opacity;
+    propertyChanged(o) {
+      const l = A()[n];
+      return (a) => o.models[l] ? this.propertyById(l, a) !== t[a] : !1;
     },
-    texture() {
-      return this.mergedModel.texture;
+    property() {
+      const o = A()[n];
+      return (l, a = t[l]) => this.propertyById(o, l, a);
     },
-    visible() {
-      return this.mergedModel.visible;
-    }
+    ...i
   },
   actions: {
-    reset() {
-      const e = p().selected;
-      this.models[e] = kt();
+    initModel(o) {
+      o != null && (typeof this.models[o] < "u" || this.$patch((l) => {
+        l.models[o] = { ...t };
+      }));
     },
     ensureSelectedModel() {
-      const e = p().selected;
-      return this.models[e] || (this.models[e] = { ...gt }), this.models[e];
-    },
-    patchSelected(e) {
-      const t = this.ensureSelectedModel();
-      Object.assign(t, e);
+      const o = A()[n];
+      return o == null ? null : (this.models[o] || (this.models[o] = { ...t }), this.models[o]);
     },
-    setProperty(e, t) {
-      const o = this.ensureSelectedModel();
-      o[e] = t;
+    setPropertyById(o, l, a) {
+      o != null && (this.models[o] || this.initModel(o), this.$patch({
+        models: {
+          [o]: { ...this.models[o], [l]: a }
+        }
+      }));
     },
-    setColor(e) {
-      this.setProperty("color", e);
+    setProperty(o, l) {
+      const a = A()[n];
+      a != null && (this.models[a] || this.initModel(a), this.$patch({
+        models: {
+          [a]: { ...this.models[a], [o]: l }
+        }
+      }));
     },
-    setColorHex(e) {
-      this.setProperty("color", be(e));
+    patchSelected(o) {
+      const l = this.ensureSelectedModel();
+      l && Object.assign(l, o);
     },
-    setTexture(e) {
-      this.setProperty("texture", e);
+    reset() {
+      const o = A()[n];
+      o != null && this.$patch((l) => {
+        l.models[o] = { ...t };
+      });
     },
-    setVisible(e) {
-      this.setProperty("visible", e);
+    resetProperty(o) {
+      const l = A()[n];
+      l != null && this.models[l] && this.$patch({
+        models: {
+          [l]: {
+            ...this.models[l],
+            [o]: t[o]
+          }
+        }
+      });
     },
-    setGroundFromResponse(e) {
-      this.models[e] || (this.models[e] = kt());
-    }
+    ...r
+  }
+}), Kt = {
+  visible: !0,
+  opacity: 1,
+  color: 16711422,
+  texture: "none"
+}, Bs = {
+  changed() {
+    return this.exists ? !Ze(this.mergedModel, Kt) : !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");
   }
-}), Xe = {
+}, zs = {
+  init() {
+    this.initModel(this.keyId);
+  },
+  setColor(e) {
+    this.setProperty("color", e);
+  },
+  setColorHex(e) {
+    this.setProperty("color", Ye(e));
+  },
+  setTexture(e) {
+    this.setProperty("texture", e);
+  },
+  setVisible(e) {
+    this.setProperty("visible", e);
+  }
+}, Ve = Qe({
+  storeId: "3d-ground",
+  defaultValues: Kt,
+  state: { offset: -0.75 },
+  getters: Bs,
+  actions: zs,
+  keyBy: "basePoseId"
+}), Ls = {
   color: 16777215,
   visible: !0,
   debug: !1,
   shadow: !0,
-  opacity: 1,
   visualization: !0
-}, pt = (e = {}) => ({ ...Xe, ...e }), ge = {
+}, Be = 0, te = 1, yt = 1.25, St = 3, et = (e, t, s) => Math.max(t, Math.min(s, e)), Ps = 1.25, ze = (e = {}) => ({ ...Ls, ...e }), Ae = {
   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", {
+}, Lt = ["advanced", "move"], tt = (e = {}) => ({ ...Ae, ...e }), Vs = {
+  ambientScale: te,
+  userScale: te
+}, st = (e = {}) => ({ ...Vs, ...e }), bt = () => ({
+  key: ze(),
+  fill: ze({ shadow: !0 }),
+  back: ze({ shadow: !0 })
+}), fe = Xe("3d-lights", {
   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
   }),
   getters: {
+    bpId() {
+      return A().basePoseId;
+    },
+    skinId() {
+      return A().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 && Lt.some((i) => !Ze(t[i], Ae[i])))
+        return !0;
+      const s = e.scales[this.skinId];
+      return !!(s && (s.ambientScale !== te || s.userScale !== te));
+    },
+    // 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) ?? te;
+      return et(t, Be, yt);
     },
-    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) ?? te;
+      return et(t, Be, St);
+    },
+    position(e) {
+      var t;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.position) || Ae.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) || Ae.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) || Ae.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, i = null) => {
+        const r = e.lights[this.bpId];
+        return !r || !r[t] || !(s in r[t]) ? i : 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] = tt()), Lt.forEach((i) => this.options[e][i] = Ae[i]), t != null && (this.scales[t] || (this.scales[t] = st()), this.scales[t].ambientScale = te, this.scales[t].userScale = te);
+      const s = this.seeds[t];
+      s ? this.lights[e] = {
+        key: { ...s.key },
+        fill: { ...s.fill },
+        back: { ...s.back }
+      } : this.lights[e] = bt();
+    },
+    // 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) * Ps, i = (t == null ? void 0 : t.ambientIntensity) ?? 0, r = (t == null ? void 0 : t.envIntensity) ?? 1;
+      this.seeds[e] = {
+        key: ze({ intensity: s }),
+        fill: ze({ intensity: s, shadow: !0 }),
+        back: ze({ intensity: s, shadow: !0 }),
+        ambient: { intensity: i },
+        env: { intensity: r }
+      }, e != null && !this.scales[e] && (this.scales[e] = st());
+      const n = this.bpId;
+      n != null && (this.lights[n] || (this.lights[n] = bt()), this.options[n] || (this.options[n] = tt()));
     },
     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] = tt()), 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] = st()), 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 +450,152 @@ 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 i = this.lights[t];
+      if (!i) return;
+      const r = i.key;
+      this.collection.forEach((n) => {
+        n !== "key" && (i[n].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) {
-        n[e].color = r;
+      var n;
+      this.initLights();
+      const s = this.bpId;
+      if (s == null) return;
+      const i = this.lights[s];
+      if (!i) return;
+      const r = Ye(t);
+      if (((n = this.options[s]) == null ? void 0 : n.advanced) === !0) {
+        i[e].color = r;
         return;
       }
-      this.collection.forEach((a) => {
-        n[a].color = r;
+      this.collection.forEach((o) => {
+        i[o].color = r;
       });
     },
-    setProperty(e, t, o) {
-      const n = p().selected;
-      this.lights[n][e][t] = o;
+    setProperty(e, t, s) {
+      this.initLights();
+      const i = this.bpId;
+      if (i == null) return;
+      const r = this.lights[i];
+      r && (r[e][t] = s);
+    },
+    setAmbientScale(e) {
+      this.initLights();
+      const t = this.ensureSelectedScales();
+      t && (t.ambientScale = et(e, Be, yt));
+    },
+    setUserScale(e) {
+      this.initLights();
+      const t = this.ensureSelectedScales();
+      t && (t.userScale = et(e, Be, St));
     },
     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] = st()), e != null && (this.lights[e] || (this.lights[e] = bt()), this.options[e] || (this.options[e] = tt()));
+    },
+    markFramed() {
+      const e = this.bpId;
+      e != null && (this.framed[e] = !0);
     }
   }
-}), Ye = {
+}), Wt = {
   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;
-    }
+}, Rs = {
+  changed() {
+    return this.exists ? !Ze(this.mergedModel, Wt) : !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;
+  }
+}, Gs = {
+  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 = {
+}, ct = Qe({
+  storeId: "3d-controls",
+  defaultValues: Wt,
+  state: { framed: {} },
+  getters: Rs,
+  actions: Gs,
+  keyBy: "basePoseId"
+}), Fs = {
   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"));
   }
-}), Te = {
+}, js = {
+  init() {
+    this.initModel(this.keyId);
+  },
+  setColorHex(e) {
+    this.setProperty("color", Ye(e));
+  }
+}, ut = Qe({
+  storeId: "3d-scene",
+  defaultValues: Fs,
+  getters: _s,
+  actions: js,
+  keyBy: "basePoseId"
+}), Xt = {
   show: !1,
   front: !1,
   back: !1,
@@ -558,90 +605,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
+}, Us = {
+  changed() {
+    return !Ze(this.mergedModel, Xt);
   },
-  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");
   }
-}), So = [
+}, Os = {
+  init() {
+    this.initModel(this.keyId);
+  }
+}, Ee = Qe({
+  storeId: "3d-grid",
+  defaultValues: Xt,
+  getters: Us,
+  actions: Os,
+  keyBy: "basePoseId"
+}), $s = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -682,74 +673,60 @@ 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);
-    }
+], Ct = "background", wt = "subject", Et = "ground", Zt = {
+  [wt]: 16711422,
+  [Ct]: 16777215,
+  [Et]: 12961221
+}, Ns = {
+  changed() {
+    return this.exists ? !Ze(this.mergedModel, Zt) : !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);
-    },
-    setBackgroundHex(e) {
-      this.setHexColor(bt, e);
-    }
+  subjectHex() {
+    return ue(this.property(wt));
+  },
+  groundHex() {
+    return ue(this.property(Et));
+  },
+  backgroundHex() {
+    return ue(this.property(Ct));
+  },
+  getHexColor() {
+    return (e) => ue(this.property(e, "#F0F0F0"));
+  }
+}, Hs = {
+  setHexColor(e, t) {
+    this.setProperty(e, Ye(t));
+  },
+  setSubjectHex(e) {
+    this.setHexColor(wt, e);
+  },
+  setGroundHex(e) {
+    this.setHexColor(Et, e);
+  },
+  setBackgroundHex(e) {
+    this.setHexColor(Ct, e);
   }
-}), p = de("3d", {
+}, It = Qe({
+  storeId: "3d-colors",
+  defaultValues: Zt,
+  state: { palette: $s },
+  getters: Ns,
+  actions: Hs,
+  keyBy: "basePoseId"
+}), A = Xe("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,9 +745,8 @@ 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 t, s;
+      return ((s = (t = this.models) == null ? void 0 : t[e.selected]) == null ? void 0 : s.active) || ye;
     },
     aspect(e) {
       return e.height > 0 ? e.width / e.height : 0;
@@ -793,120 +769,124 @@ 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, D;
+      const t = It(), s = ct(), i = Ee(), r = Ve(), n = fe(), o = ut(), a = me().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), n.initLights(), r.init(), s.initControls(), i.init(), o.init(), this.models[a] || (this.models[a] = {}), (D = this.models[a]) != null && D.active || (this.models[a].active = ye);
     }
   }
 });
-let ie = null, Pe = null;
+let J = null, Ge = 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;
+  const e = A(), { aspect: t, width: s, height: i } = $(e), r = (l = { x: 0, y: 0.8, z: 1.5 }) => (console.debug("useCamera init"), J ? (console.debug("view camera already inited"), J) : (J = new I.PerspectiveCamera(75, t.value, 0.1, 100), e.loaded.camera = !0, J)), n = () => {
+    if (J)
+      return J;
   };
-  return Pe = O(
+  return Ge = O(
     () => t.value,
-    (a) => {
-      if (!ie) {
-        n();
+    (l) => {
+      if (!J) {
+        r();
         return;
       }
-      ie.aspect = a, ie.updateProjectionMatrix();
+      J.aspect = l, J.updateProjectionMatrix();
     }
   ), {
-    init: n,
-    getCamera: r,
+    init: r,
+    getCamera: n,
     dispose: () => {
-      Pe == null || Pe(), Pe = null, ie = null;
+      Ge == null || Ge(), Ge = null, J = null;
     }
   };
 };
-let se = null;
-const st = () => {
-  const e = ee(!1), t = ee({
+let Q = null;
+const rt = () => {
+  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();
+  }), s = (h, f = {}) => {
+    if (console.debug("useOrbitControlsBase init"), Q)
+      return console.debug("controls already inited"), Q;
+    const S = new I.Object3D();
+    return Q = new Ss(S, h.domElement), r(f), Q;
+  }, i = () => {
+    if (!Q) throw new Error("OrbitControls not initialized");
+    return Q;
+  }, r = (h = {}) => {
+    const f = i();
+    f.enableDamping = h.enableDamping ?? !0, f.dampingFactor = h.dampingFactor ?? 0.5, f.rotateSpeed = h.rotateSpeed ?? 0.2, f.enableZoom = h.enableZoom ?? !0, f.minDistance = h.minDistance ?? 0.5, f.maxDistance = h.maxDistance ?? 6, f.panSpeed = h.panSpeed ?? 1;
+  }, n = ({ mode: h, camera: f, store: S, options: E }) => {
+    const y = i();
+    if (!f) throw new Error(`setMode(${h}): camera is required`);
+    if (!S) throw new Error(`setMode(${h}): store is required`);
+    y.object = f, r(E), t.value = { mode: h, camera: f, store: S }, a(), y.update();
+  }, o = () => {
+    Q && Q.update();
   }, l = () => {
-    se && se.update();
+    const h = i(), { camera: f, store: S } = t.value;
+    !f || !S || e.value || (S.setPosition({ ...f.position }), S.setQuaternion({ ...f.quaternion }), S.setTarget({ ...h.target }), S.setRadius(f.position.distanceTo(h.target)));
   }, 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)));
-  }, c = () => {
-    const b = s(), { camera: f, store: E } = t.value;
-    if (!f || !E) return;
+    const h = i(), { camera: f, store: S } = t.value;
+    if (!f || !S) 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: E, quaternion: y, target: T, radius: P } = S;
+    h.target.set(T.x, T.y, T.z);
+    const G = new I.Vector3(
+      E.x - T.x,
+      E.y - T.y,
+      E.z - T.z
     ).normalize();
-    f.position.copy(b.target).add(w.multiplyScalar(S)), f.quaternion.set(
+    f.position.copy(h.target).add(G.multiplyScalar(P)), f.quaternion.set(
       y.x,
       y.y,
       y.z,
       y.w
-    ), b.update(), e.value = !1;
-  };
+    ), h.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: i,
+    setMode: n,
+    update: o,
+    syncToStore: l,
+    applyFromStore: a,
+    frameToBounds: (h, f = 1.75) => {
+      const S = i(), { camera: E } = t.value;
+      if (!E || !h) return;
+      const y = new I.Vector3(
+        h.center.x,
+        h.center.y + h.size.y * u,
+        h.center.z
       );
-      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", h);
+      const T = Math.max(h.size.x, h.size.y, h.size.z), P = I.MathUtils.degToRad(E.fov);
+      let G = T / 2 / Math.tan(P / 2) * f;
+      S.target.copy(y), E.position.set(
+        y.x,
+        y.y + h.size.y * p,
+        y.z + G
+      ), E.near = G / 100, E.far = G * 100, E.updateProjectionMatrix(), S.update();
     },
     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();
+}, Mt = () => {
+  const { getCamera: e } = Le(), t = ct(), s = rt();
   return {
     activate: () => {
-      o.setMode({
+      s.setMode({
         mode: "camera",
         camera: e(),
         store: t,
@@ -917,35 +897,40 @@ const st = () => {
         }
       });
     },
-    frameToBounds: o.frameToBounds,
-    syncToStore: o.syncToStore,
-    applyFromStore: o.applyFromStore
+    frameToBounds: s.frameToBounds,
+    syncToStore: s.syncToStore,
+    applyFromStore: s.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);
+let X = null, ge = null, be = null, Fe = null;
+const we = () => {
+  const e = ut(), t = A(), { colorHex: s } = $(e), i = () => (console.debug("useScene init"), X ? (console.debug("scene already inited"), X) : (X = new I.Scene(), n(s.value), t.loaded.scene = !0, X)), r = () => {
+    if (X)
+      return X;
+  }, n = (a) => {
+    if (!X) throw new Error("Scene has not been initialized");
+    X.background = new I.Color(a);
+  }, o = (a) => {
+    if (!X) throw new Error("Scene has not been initialized");
+    if (!a) throw new Error("Renderer required to build environment");
+    ge || (be = new I.PMREMGenerator(a), be.compileEquirectangularShader(), ge = be.fromScene(new xs(), 0.04).texture, X.environment = ge);
   };
-  return Ge = O(
-    () => o.value,
-    (a) => r(a)
+  return Fe = O(
+    () => s.value,
+    (a) => n(a)
   ), {
-    init: s,
-    get: n,
+    init: i,
+    get: r,
     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);
+      t.loaded.scene = !1, Fe == null || Fe(), Fe = null, X && (X.traverse((a) => {
+        var u, p;
+        a.isMesh && ((u = a.geometry) == null || u.dispose(), Array.isArray(a.material) ? a.material.forEach((D) => D == null ? void 0 : D.dispose()) : (p = a.material) == null || p.dispose());
+      }), X.clear(), X = null, ge == null || ge.dispose(), be == null || be.dispose(), ge = null, be = null);
     },
-    setBackgroundColor: r
+    setBackgroundColor: n,
+    setEnvironment: o
   };
-}, Co = {
+}, qs = {
   asphalt: {
     ao: "ao.jpg",
     color: "color.jpg",
@@ -981,544 +966,595 @@ 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 k = null, _e = null, je = null, Ue = null;
+const Pt = () => {
+  const e = Ve(), { get: t } = we(), { getCamera: s } = Le(), {
+    visible: i,
+    color: r,
+    texture: n,
+    offset: o
+  } = $(e), l = () => {
+    if (console.debug("useGround init"), k)
+      return console.debug("ground already inited"), k;
+    const f = t(), S = new I.PlaneGeometry(100, 100), E = new I.Color(r.value || 16777215), y = new I.MeshStandardMaterial({
+      color: E,
       // Default to white
-      side: M.DoubleSide,
+      side: I.DoubleSide,
       roughness: 0.4,
       metalness: 0.3,
-      emissive: k,
+      emissive: E,
       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(
-      () => n.value,
-      (w) => f(w)
-    ), Oe = O(
+    return k = new I.Mesh(S, y), k.rotation.x = -Math.PI / 2, k.receiveShadow = !0, k.visible = i.value, f.add(k), _e = O(
+      () => i.value,
+      () => a()
+    ), je = O(
       () => r.value,
-      (w) => g(w)
-    ), z;
+      (T) => w(T)
+    ), Ue = O(
+      () => n.value,
+      (T) => p(T)
+    ), k;
   };
-  function c() {
-    if (o().position.y < z.position.y) {
-      z.visible = !1;
+  function a() {
+    if (s().position.y < k.position.y) {
+      k.visible = !1;
       return;
     }
-    z.visible = s.value;
+    k.visible = i.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(f, S = 1, E = 1) {
+    return new I.TextureLoader().load(f, (P) => {
+      P.wrapS = I.RepeatWrapping, P.wrapT = I.RepeatWrapping, P.repeat.set(S, E), P.needsUpdate = !0;
     });
   }
-  const g = (D) => {
-    if (!z) throw new Error("Ground has not been initialized");
-    const y = Co[D];
-    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;
+  const p = (f) => {
+    if (!k) throw new Error("Ground has not been initialized");
+    const S = qs[f];
+    if (!S)
+      k.material.map = null, k.material.normalMap = null, k.material.displacementMap = null, k.material.roughnessMap = null, k.material.aoMap = null, k.material.metalnessMap = null, k.material.needsUpdate = !0;
     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 E = `https://static.figurosity.com/3d/textures/${f}/`, y = S.repeat;
+      k.material.map = u(
+        `${E}${S.color}`,
+        y,
+        y
+      ), k.material.normalMap = u(
+        `${E}${S.normal}`,
+        y,
+        y
+      ), k.material.displacementMap = u(
+        `${E}${S.displacement}`,
+        y,
+        y
+      ), k.material.roughnessMap = u(
+        `${E}${S.roughness}`,
+        y,
+        y
+      ), k.material.aoMap = u(
+        `${E}${S.ao}`,
+        y,
+        y
+      ), S.metalness && (k.material.metalnessMap = u(
+        `${E}${S.metalness}`,
+        y,
+        y
+      )), k.material.displacementScale = 0.1, k.material.displacementBias = -0.05, k.material.needsUpdate = !0;
     }
-    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);
+    k.position.y = o.value, k.geometry.computeBoundingBox(), k.geometry.computeVertexNormals();
+  }, D = () => {
+    if (!k) throw new Error("Ground has not been initialized");
+    return k;
+  }, w = (f) => {
+    if (!k) throw new Error("Ground has not been initialized");
+    k.material.color.set(f);
   };
-  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: l, get: D, setColor: w, updateVisibility: a, dispose: () => {
+    var S, E;
+    if (_e == null || _e(), je == null || je(), Ue == null || Ue(), _e = null, je = null, Ue = null, !k) return;
+    const f = t();
+    f == null || f.remove(k), (S = k.geometry) == null || S.dispose(), Array.isArray(k.material) ? k.material.forEach((y) => y == null ? void 0 : y.dispose()) : (E = k.material) == null || E.dispose(), k = null;
   } };
-}, 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(
+}, Ks = (e, t = 16711422) => {
+  const s = new ws(0.1, 0.1, 0.1, 6, 0.01), i = 0.1, r = 0.05, n = new I.ConeGeometry(r, i, 32);
+  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(
+  ), n.index || n.setIndex(
     Array.from(
-      { length: r.attributes.position.count },
-      (u, g) => g
+      { length: n.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({
+  ), n.rotateX(-Math.PI / 2), n.translate(0, 0, i / 2), Bt(s), Bt(n);
+  const o = Cs([s, n]), l = 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, l);
+  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)
+let ot = {}, ne = {}, N = {}, ie = {}, Me = null, ae = null, De = [], Te = /* @__PURE__ */ new Map();
+const it = () => {
+  const e = A(), t = fe(), s = me();
+  pe(!1);
+  const { subjectLoaded: i, width: r, height: n, selected: o, basePoseId: l } = $(e), { debug: a, collection: u, advancedMode: p, move: D } = $(t), { get: w } = we(), h = t.property, f = () => {
+    if (ae)
+      return console.warn("lights camera already inited"), ae;
+    const g = w();
+    return Me = y(), ae = T(), u.value.forEach((c) => {
+      const v = c === "key" ? ae : g, { group: L, light: M, visualization: x } = P(c, v);
+      N[c] = M, ot[c] = L, ie[c] = x, N[c].castShadow = !0, N[c].angle = Math.PI / 4, N[c].penumbra = 0.5, N[c].shadow.camera.near = 0.5, N[c].shadow.camera.far = 12, N[c].shadow.focus = 0.9, N[c].shadow.mapSize.set(4096, 4096), N[c].shadow.bias = -2e-4, N[c].shadow.normalBias = 0.02, N[c].shadow.radius = 2, N[c].shadow.camera.updateProjectionMatrix();
+    }), F(), Y(), ae;
+  }, S = () => {
+    if (!ae)
       throw new Error("Light camera not initialized.");
-    return pe;
+    return ae;
+  }, E = (g) => {
+    g && (Object.values(N).forEach((c) => c == null ? void 0 : c.color.set(g)), Object.values(ie).forEach((c) => {
+      var v;
+      return (v = c == null ? void 0 : c.material) == null ? void 0 : v.color.set(g);
+    }));
   }, y = () => {
-    const d = b(), i = new M.AmbientLight(f("key", "color"), 0.75);
-    return d.add(i), i;
-  }, k = () => {
-    const d = b(), i = new M.PerspectiveCamera(
+    const g = w(), c = new I.AmbientLight(16777215, 0.2);
+    return g.add(c), c;
+  }, T = () => {
+    const g = w(), c = new I.PerspectiveCamera(
       75,
-      n.value / r.value,
+      r.value / n.value,
       0.1,
       100
     );
-    return i.position.set(0, 0, 1.5), d.add(i), i;
+    return c.position.set(0, 0, 1.5), g.add(c), c;
   };
-  function S(d, i = null) {
-    const x = b(), V = new M.Group(), A = new M.SpotLight(
-      f(d, "color"),
-      f(d, "opacity")
+  function P(g, c = null) {
+    const v = w(), L = new I.Group(), M = new I.SpotLight(
+      h(g, "color"),
+      h(g, "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 };
+    M.position.set(0, 0, 0), H(), M.target.position.set(0, 1, 0), M.target.updateMatrixWorld(), v.add(M.target), L.add(M);
+    const x = Ks(
+      M,
+      h(g, "visualizationColor")
+    ), U = t.isVisible(g);
+    return x.visible = U, L.add(x), c.add(L), { group: L, light: M, visualization: x };
   }
-  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];
+  const G = () => {
+    H(), Z(), b();
+  }, H = () => {
+    if (!t.lights[l.value]) return;
+    const c = t.seeds[o.value], v = t.ambientScale, L = t.userScale;
+    if (Me && (c != null && c.ambient) && (Me.intensity = c.ambient.intensity * v), c != null && c.env) {
+      const M = w();
+      M && (M.environmentIntensity = c.env.intensity * v);
+    }
+    u.value.forEach((M) => {
+      const x = N[M];
       if (!x) return;
-      const 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", {});
+      const U = h(M, "color"), he = h(M, "visible"), K = h(M, "shadow") || !1;
+      if (U && x.color.set(U), x.visible = he, c != null && c[M] && (x.intensity = c[M].intensity * L), x.castShadow = K, K) {
+        const re = h(M, "shadowSettings", {});
         x.shadow.mapSize.set(
-          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;
+          re.width || 1024,
+          re.height || 1024
+        ), x.shadow.camera.near = re.near || 0.5, x.shadow.camera.far = re.far || 50, x.shadow.needsUpdate = !0;
       }
     });
   }, 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"));
+    t.lights[l.value] && u.value.forEach((c) => {
+      if (!ie[c]) return console.warn(`${c} does not exist`);
+      const v = t.isVisible(c);
+      ie[c].visible = v, ie[c].material.color.set(h(c, "color"));
     });
-  }, 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[l.value] && u.value.forEach((c) => {
+      const v = h(c, "debug") || a.value;
+      !ne[c] && v && (ne[c] = m(c, N[c]), N[c].add(ne[c])), ne[c] && !v && (ne[c] = B(ne[c]));
     });
-  }, Y = (d, i) => {
-    const x = b(), V = new M.SpotLightHelper(
-      i,
-      f(d, "visualizationColor")
+  }, m = (g, c) => {
+    const v = w(), L = new I.SpotLightHelper(
+      c,
+      h(g, "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 v.add(L), L;
+  }, B = (g) => {
+    const c = w();
+    if (!(!c || !g))
+      return c.remove(g), g.dispose(), g = null, g;
+  }, F = () => {
+    const g = S();
+    if (!s.bounds) return;
+    const v = t.target, L = new I.Vector3(v.x, v.y, v.z), M = new I.Vector3().subVectors(L, g.position).normalize(), x = new I.Vector3(
+      M.x,
       0,
-      V.z
-    ).normalize(), j = new M.Vector3(
-      -A.z,
+      M.z
+    ).normalize(), U = new I.Vector3(
+      -x.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);
+      x.x
+    ), K = 2 * g.position.distanceTo(L) / Math.sqrt(3), re = 1, Re = L.clone().add(U.clone().multiplyScalar(-K / re)).add(M.clone().multiplyScalar(Math.sqrt(3) * K / 2)), os = L.clone().add(U.clone().multiplyScalar(K / re)).add(M.clone().multiplyScalar(Math.sqrt(3) * K / 2));
+    ot.fill.position.copy(Re), ot.back.position.copy(os), u.value.forEach((dt) => {
+      var kt, Je, At;
+      const pt = N[dt];
+      pt.shadow.needsUpdate = !0, pt.target.position.copy(L), pt.target.updateMatrixWorld(), (kt = ie[dt]) == null || kt.lookAt(L), (At = (Je = ne[dt]) == null ? void 0 : Je.update) == null || At.call(Je);
     });
-    const A = O(
-      () => V.map((j) => j()),
-      w,
+  }, z = (g) => {
+    const c = `watcher-${g}`;
+    if (Te.has(c)) return;
+    const v = O(
+      () => [t.lights[g], t.options[g]],
+      G,
       { deep: !0 }
     );
-    Ee.set(x, A);
-  }, T = (d) => {
-    const i = `watcher-${d}`, x = Ee.get(i);
-    x && (x(), Ee.delete(i));
-  }, C = () => {
-    qe.push(
+    Te.set(c, v);
+  }, j = (g) => {
+    const c = `watcher-${g}`, v = Te.get(c);
+    v && (v(), Te.delete(c));
+  }, Y = () => {
+    De.push(
       O(
-        () => [u.value, l.value, g.value],
-        () => w()
+        () => [p.value, o.value, D.value],
+        () => G()
       )
-    ), qe.push(
+    ), De.push(
       O(
-        () => s.value,
-        (d) => {
-          d === !0 && q();
+        () => [t.ambientScale, t.userScale],
+        () => G()
+      )
+    ), De.push(
+      O(
+        () => i.value,
+        (g) => {
+          g === !0 && F();
         }
       )
-    ), qe.push(
+    ), De.push(
       O(
         () => l.value,
-        (d, i) => {
-          i && T(i), d != null && (B(d), Ht(w));
+        (g, c) => {
+          c && j(c), g != null && (z(g), ns(G));
         },
         { immediate: !0 }
       )
     );
   };
   return {
-    init: E,
-    updatePosition: q,
-    getCamera: D,
+    init: f,
+    updatePosition: F,
+    getCamera: S,
     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 g = w();
+      g && (De.forEach((c) => c()), De = [], Te.forEach((c) => c()), Te.clear(), Object.values(N).forEach((c) => g.remove(c)), Object.values(ne).forEach((c) => g.remove(c)), Object.values(ie).forEach((c) => {
+        var v, L, M, x;
+        g.remove(c), (L = (v = c.geometry) == null ? void 0 : v.dispose) == null || L.call(v), (x = (M = c.material) == null ? void 0 : M.dispose) == null || x.call(M);
+      }), Me && g.remove(Me), ot = {}, ne = {}, N = {}, ie = {}, Me = null, ae = null);
+    },
+    applyColorPreview: E,
+    applyFromStore: G
   };
-}, wt = () => {
-  const e = Be(), t = st(), { getCamera: o } = nt();
+}, Ws = 0.4, Xs = 0.25, Dt = () => {
+  const e = fe(), t = rt(), { getCamera: s } = it();
   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: (n, o = 1.75) => {
+      if (!n) return;
+      const l = t.get(), a = s(), u = new I.Vector3(
+        n.center.x,
+        n.center.y + n.size.y * Ws,
+        n.center.z
+      ), p = Math.max(n.size.x, n.size.y, n.size.z), D = I.MathUtils.degToRad(a.fov), w = p / 2 / Math.tan(D / 2) * o;
+      l.target.copy(u), a.position.set(u.x, u.y + n.size.y * Xs, u.z + w), a.near = w / 100, a.far = w * 100, a.updateProjectionMatrix(), l.update();
+    },
     syncToStore: t.syncToStore,
     applyFromStore: t.applyFromStore
   };
 };
-let me = null;
-const wo = () => {
+let le = null;
+const Zs = () => {
   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;
+    const s = A();
+    return le = new I.LoadingManager(), le.onStart = function(i) {
+      s.loading.active = !0, s.loading.url = i, s.loading.percent = 0;
+    }, le.onError = () => {
+      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(i, r, n) {
+      s.loading.percent = Math.round(r / n * 100);
+    }, le;
   };
-  return { get: () => (me || e(), me) };
+  return { get: () => (le || e(), le) };
 };
-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);
+let _ = null, Oe = null, $e = null;
+const at = () => {
+  const e = A(), { get: t } = we(), { getCamera: s } = Le(), { width: i, height: r, subjectLoaded: n } = $(e);
+  function o(D) {
+    return console.debug("useRenderer init"), _ ? (console.debug("renderer already inited"), _) : (_ = new I.WebGLRenderer({ antialias: !0, alpha: !0 }), _.setSize(i.value, r.value), _.toneMapping = I.ACESFilmicToneMapping, _.toneMappingExposure = 0.8, _.shadowMap.enabled = !0, _.shadowMap.type = I.PCFSoftShadowMap, _.outputColorSpace = I.SRGBColorSpace, D && D.appendChild(_.domElement), e.loaded.renderer = !0, _);
   }
-  const 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);
+  const l = () => {
+    if (!_) throw new Error("Renderer has not been initialized");
+    return _;
+  }, a = (D) => {
+    _ && (_.toneMappingExposure = D);
+  }, u = () => {
+    const D = t(), w = s();
+    !D || !w || _.render(D, w);
   };
-  _e = O(
-    () => [s.value, n.value],
-    ([g, b]) => {
-      !g || !b || !R || R.setSize(g, b);
+  Oe = O(
+    () => [i.value, r.value],
+    ([D, w]) => {
+      !D || !w || !_ || _.setSize(D, w);
     }
-  ), Ue = O(
-    () => r.value,
-    () => c()
+  ), $e = O(
+    () => n.value,
+    () => u()
   );
-  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);
+  function p() {
+    console.debug("renderer disposed"), e.loaded.renderer = !1, Oe == null || Oe(), $e == null || $e(), Oe = null, $e = null, _ && (_.domElement.parentElement && _.domElement.parentElement.removeChild(_.domElement), _.dispose(), _ = null);
   }
   return {
-    init: l,
-    get: a,
-    dispose: u,
-    render: c
+    init: o,
+    get: l,
+    dispose: p,
+    render: u,
+    setExposure: a
   };
-}, 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);
+}, Ys = /hair|lash|brow|eye|cornea|sclera|iris|pupil|tear|teeth|tongue|mouth|gum|lip|nail/i, Qs = (e, t, s = {}) => {
+  const { removeSpecular: i = !1, removeShininess: r = !1 } = s;
+  e && e.traverse((n) => {
+    if (!n.isMesh) return;
+    (Array.isArray(n.material) ? n.material : [n.material]).forEach((l) => {
+      if (!l) return;
+      const a = `${n.name} ${l.name || ""}`;
+      Ys.test(a) || (l.color && l.color.set(t), i && l.specular && l.specular.set(0), r && typeof l.shininess == "number" && (l.shininess = 0), l.needsUpdate = !0);
     });
   });
-}, 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();
+}, Js = 1, eo = "https://www.gstatic.com/draco/v1/decoders/", lt = {
+  roughnessFloor: 0.85,
+  metalness: null,
+  envMapIntensity: null,
+  applyTint: !0,
+  exposure: 0.8,
+  ambientIntensity: 0.2,
+  spotIntensity: 1,
+  envIntensity: 1
+}, to = {
+  nude: { ...lt },
+  // 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: {
+    ...lt,
+    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 ve = null, ce = null, ke, Vt = 0, ee = lt;
+const Rt = () => {
+  const { get: e } = Zs(), t = me(), s = A(), i = Ve(), r = It(), { selected: n } = $(s), { url: o } = $(t), { subjectHex: l } = $(r), { offset: a } = $(i), { getCamera: u } = Le(), { get: p } = we(), { render: D } = at(), w = (y) => {
+    const { setExposure: T } = at(), P = fe(), G = ++Vt;
+    s.subjectLoaded = !1, h();
+    const H = e();
+    ce || (ce = new Is(H), ce.setDecoderPath(eo));
+    const Z = new Es(H);
+    Z.setDRACOLoader(ce), Z.setWithCredentials(!0), Z.manager.setURLModifier((b) => b), Z.load(y, (b) => {
+      var g;
+      const m = b == null ? void 0 : b.scene;
+      if (G !== Vt) {
+        m == null || m.traverse((c) => {
+          var L;
+          if (!c.isMesh) return;
+          (L = c.geometry) == null || L.dispose();
+          const v = c.material;
+          Array.isArray(v) ? v.forEach((M) => M == null ? void 0 : M.dispose()) : v == null || v.dispose();
         });
         return;
       }
-      if (!q)
+      if (!m)
         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;
+      ve = m, ee = to[(g = t.model) == null ? void 0 : g.slug] || lt, T(ee.exposure), P.seedFromRecipe(s.selected, ee);
+      const B = p(), F = u(), z = new I.Group();
+      z.name = "GLBSubject", z.add(m);
+      const j = /brow|lash/i;
+      m.traverse((c) => {
+        if (!c.isMesh) return;
+        c.castShadow = !0, c.receiveShadow = !0;
+        const v = Array.isArray(c.material) ? c.material : [c.material], L = `${c.name} ${v.map((x) => x == null ? void 0 : x.name).join(" ")}`, M = j.test(L);
+        v.forEach((x) => {
+          x && (ee.roughnessFloor !== null && typeof x.roughness == "number" && (x.roughness = Math.max(
+            x.roughness,
+            ee.roughnessFloor
+          )), ee.metalness !== null && typeof x.metalness == "number" && (x.metalness = ee.metalness), ee.envMapIntensity !== null && typeof x.envMapIntensity == "number" && (x.envMapIntensity = ee.envMapIntensity), x.transparent && M && (x.alphaTest = 0.2, x.depthWrite = !0), x.needsUpdate = !0);
+        });
+      }), ee.applyTint && Qs(m, l.value), m.scale.setScalar(Js), m.updateMatrixWorld(!0);
+      const Y = zt(m);
+      z.position.y -= Y.bottom, z.updateMatrixWorld(!0), B.add(z), ve = z;
+      const q = zt(z);
+      t.setBounds(q), D(B, F), s.subjectLoaded = !0;
     });
-  }, 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) {
+  }, h = () => {
+    if (!ve) return;
+    p().remove(ve), ve.traverse((T) => {
+      var G;
+      if (!T.isMesh) return;
+      (G = T.geometry) == null || G.dispose();
+      const P = T.material;
+      Array.isArray(P) ? P.forEach((H) => H == null ? void 0 : H.dispose()) : P == null || P.dispose();
+    }), ve = null, s.subjectLoaded = !1;
+  }, f = () => ve, S = () => {
+    if (ke) {
       console.warn("useGLB.init() called more than once");
       return;
     }
-    Ae = O(
+    ke = O(
       () => n.value,
-      (S, w) => {
-        !S || S === w || l.value && b(l.value);
+      (y, T) => {
+        !y || y === T || 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;
+  }, E = () => {
+    ke == null || ke(), ke = null, h(), 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 _t(() => {
+    E();
+  }), { init: S, get: f, dispose: E };
+}, so = (e, t, s = 500) => {
+  const i = e.material;
+  i.transparent = !0;
+  const r = i.opacity, n = performance.now(), o = (l) => {
+    const a = l - n, u = Math.min(a / s, 1), p = r + (t - r) * u;
+    i.opacity = p, u < 1 && requestAnimationFrame(o);
   };
-  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);
+}, oo = 34815;
+let V = null, Ne = null, He = null, qe = null;
+const Gt = () => {
+  const e = Ee(), t = Ve(), s = me(), { show: i, divisions: r, size: n, opacity: o } = $(e), { offset: l } = $(t), { bounds: a } = $(s), { get: u } = we(), p = () => {
+    const b = T(oo), m = b, { positions: B, colors: F } = D({
+      size: n.value,
+      divisions: r.value,
+      color: b,
+      centerColor: m
+    }), z = w(B, F), j = h(o.value);
+    return new I.LineSegments(z, j);
+  }, D = ({ size: b, divisions: m, color: B, centerColor: F }) => {
+    const z = b / 2, j = b / m, Y = [], q = [], g = Math.floor(m / 2), c = (v, L, M, x) => {
+      Y.push(v, L, M);
+      const U = x ? F : B;
+      q.push(U.r, U.g, U.b);
     };
-    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 v = 0; v <= m; v++) {
+      const L = -z + v * j, M = v === g;
+      for (let x = 0; x <= m; x++) {
+        const U = -z + x * j, K = M || x === g;
+        c(-z, L, U, K), c(+z, L, U, K);
       }
     }
-    for (let 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 v = 0; v <= m; v++) {
+      const L = -z + v * j, M = v === g;
+      for (let x = 0; x <= m; x++) {
+        const U = -z + x * j, K = M || x === g;
+        c(L, -z, U, K), c(L, +z, U, K);
       }
     }
-    for (let 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 v = 0; v <= m; v++) {
+      const L = -z + v * j, M = v === g;
+      for (let x = 0; x <= m; x++) {
+        const U = -z + x * j, K = M || x === g;
+        c(L, U, -z, K), c(L, U, +z, K);
       }
     }
-    return { positions: x, colors: V };
-  }, D = (B, T) => {
-    const C = new M.BufferGeometry();
-    return C.setAttribute(
+    return { positions: Y, colors: q };
+  }, w = (b, m) => {
+    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(m, 3)), B;
+  }, h = (b) => new I.LineBasicMaterial({
     transparent: !0,
-    opacity: B,
+    opacity: b,
     depthWrite: !1,
-    blending: M.NormalBlending,
-    vertexColors: !1
-  }), k = () => {
-    H && F(s.value);
+    blending: I.NormalBlending,
+    vertexColors: !0
+  }), f = () => {
+    V && y(i.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);
+    const b = u();
+    V = p(), H(), b.add(V), E(0);
+  }, E = (b) => {
+    V && (V.material.transparent = !0, b = i.value ? b : 0, V.material.opacity = b);
+  }, y = (b) => {
+    const m = b ? o.value : 0;
+    so(V, m, 500);
+  }, T = (b) => ({
+    r: (b >> 16 & 255) / 255,
+    g: (b >> 8 & 255) / 255,
+    b: (b & 255) / 255
+  }), P = (b, m) => {
+    if (!V) return;
+    const B = T(b), F = T(m), z = V.geometry.attributes.color, j = V.geometry.attributes.position, Y = j.count, q = n.value / 2, g = n.value / r.value, c = Math.floor(r.value / 2);
+    for (let v = 0; v < Y; v++) {
+      const L = j.getX(v), M = j.getY(v), x = j.getZ(v), U = Math.round((L + q) / g), he = Math.round((M + q) / g), K = Math.round((x + q) / g), Re = U === c || he === c || K === c ? B : F;
+      z.setXYZ(v, Re.r, Re.g, Re.b);
     }
-    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;
+  }, G = () => {
+    const b = u();
+    V && (b.remove(V), V.geometry.dispose(), V.material.dispose(), V = null), V = p(), H(), b.add(V);
+  }, H = () => {
+    var m;
+    const b = ((m = a.value) == null ? void 0 : m.bottom) || 0;
+    V.position.set(0, b + n.value / 2 + 7e-3, 0);
   };
-  return Ie = O(
-    () => [a.value, l.value],
-    ([B, T], [C, G]) => {
-      B === C && T === G || (Y(), k());
+  return Ne = O(
+    () => [n.value, r.value],
+    ([b, m], [B, F]) => {
+      b === B && m === F || (G(), f());
     },
     { flush: "post" }
-  ), $e = O(
-    () => s.value,
+  ), He = O(
+    () => i.value,
     () => {
-      k();
+      f();
     },
     { flush: "post" }
-  ), Ne = O(
-    () => c.value,
-    (B) => {
-      w(B);
+  ), qe = O(
+    () => o.value,
+    (b) => {
+      E(b);
     },
     { flush: "post" }
-  ), Ze = O(
-    () => [n.value, r.value],
-    ([B, T]) => {
-      U(T, B);
-    }
   ), {
     init: S,
-    showHideGrid: F,
-    updateGridColors: U,
+    showHideGrid: y,
+    updateGridColors: P,
     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 m, B;
+      const b = u();
+      Ne == null || Ne(), He == null || He(), qe == null || qe(), Ne = null, He = null, qe = null, V && (b.remove(V), (m = V.geometry) == null || m.dispose(), Array.isArray(V.material) ? V.material.forEach((F) => F == null ? void 0 : F.dispose()) : (B = V.material) == null || B.dispose(), V = null);
     }
   };
-}, ko = { class: "three-dimension-tool" }, Eo = ["data-id"], Ao = /* @__PURE__ */ Object.assign({
+}, no = { class: "three-dimension-tool" }, ro = ["data-id"], io = /* @__PURE__ */ Object.assign({
   name: "ThreeDimensionTool",
   slug: "three-dimension-tool",
   inheritAttrs: !1
@@ -1529,200 +1565,181 @@ 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 i = C(() => Number(t.id)), r = A(), n = ct(), o = fe(), l = me(), { move: a } = $(o), u = pe(null), p = pe(!1);
+    let D, w, h;
+    const f = rt(), S = Mt(), E = Dt(), { init: y, setEnvironment: T } = we(), { init: P } = at(), { init: G } = Le(), { init: H, updateVisibility: Z } = Pt(), { init: b, updatePosition: m } = it(), { init: B } = Rt(), { init: F } = Gt(), z = () => {
+      if (!u.value || p.value) {
         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, h = y(), w = P(u.value), T(w), B(), D = G(), b(), F(), H(), f.init(w), j();
+    }, j = () => {
+      p.value && (a.value !== s && (s = a.value, a.value ? E.activate() : S.activate()), f.update(), a.value ? (m(), E.syncToStore()) : S.syncToStore(), Z(), w.render(h, D), requestAnimationFrame(j));
+    }, Y = () => {
+      if (u.value) {
+        const q = window.innerWidth, g = window.innerHeight;
+        r.$patch({ width: q, height: g }), u.value.style.height = g + "px";
       }
     };
-    return Xt(() => {
-      console.log("onMounted", c.value), B(), window.addEventListener("resize", C), C();
+    return jt(() => {
+      console.log("onMounted", u.value), z(), window.addEventListener("resize", Y), Y();
     }), O(
       () => l.bounds,
-      (G) => {
-        G && (E.frameToBounds(G), y.activate(), y.frameToBounds(G), y.syncToStore(), D.activate(), D.frameToBounds(G), D.syncToStore());
+      (q) => {
+        q && (E.activate(), o.hasRig || (E.frameToBounds(q), E.syncToStore(), o.markFramed()), S.activate(), n.hasRig || (S.frameToBounds(q), S.syncToStore(), n.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();
+      () => r.subjectLoaded,
+      (q) => {
+        if (!q) return;
+        const g = l.bounds;
+        if (!g) return;
+        n.hasRig || (f.frameToBounds(g), n.markFramed());
+        const c = f.get();
+        c.update(), c.saveState();
       }
-    ), 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", {
+    ), _t(() => {
+      console.debug("ThreeDimensionTool unMounted"), window.removeEventListener("resize", this), p.value = !1, Rt().dispose(), Gt().dispose(), Pt().dispose(), it().dispose(), rt().dispose(), Le().dispose(), we().dispose(), at().dispose();
+    }), (q, g) => (nt(), rs("div", no, [
+      vt("", !0),
+      is("div", {
         class: "tres",
         ref_key: "tres",
-        ref: c,
-        "data-id": s.value
-      }, null, 8, Eo)
+        ref: u,
+        "data-id": i.value
+      }, null, 8, ro)
     ]));
   }
-}), 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])
+}), Ft = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-CwHAnjEe.js") }), W = (e = "../i18n") => {
+  const t = ps(), s = pe({}), i = C(() => t.lang.isoName || "en-US"), r = async () => {
+    const n = `${e}/${i.value}/index.js`;
+    if (Ft[n])
       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 Ft[n]();
+        o.default && Object.assign(s.value, o.default);
+      } catch (o) {
+        console.error(`Error loading i18n for ${i.value}`, o);
       }
     else
-      console.error(`Module not found: ${r}`);
+      console.error(`Module not found: ${n}`);
   };
   return O(
-    () => s.value,
+    () => i.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);
+  ), as(() => {
+    r();
+  }), { lang: s };
+}, oe = ({ tab: e = se, store: t, options: s = [] }) => {
+  const i = bs(), r = A(i), n = 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: n, selected: o };
+}, Tt = R({
   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 i() {
+      s("click");
     }
-    function n() {
-      const r = {
+    function r() {
+      const n = {
         label: e.label,
         class: "full-width",
         flat: !0,
-        onClick: s,
+        onClick: i,
         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(Ut, n));
     }
-    return () => n();
+    return () => r();
   }
-}), It = $({
+}), Yt = R({
   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: i } = W(), r = A(), n = ut(), o = Ve(), { active: l } = $(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 = i.value.td) == null ? void 0 : b.components.colors.items.background;
       }
-    ), D = v(
+    ), D = C(
       () => {
-        var C;
-        return (C = s.value.td) == null ? void 0 : C.components.colors.items.ground;
+        var b;
+        return (b = i.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(() => ({
+      color: n.colorHex,
+      onClick: () => a.value = !0
+    })), h = C(() => ({
       key: D.value,
       label: D.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
+    })), f = C({
+      get: () => u.value || a.value,
+      set: (b) => u.value = a.value = !1
+    }), S = C({
+      get: () => u.value ? o.colorHex : n.colorHex,
+      set: (b) => {
         if (u.value) {
-          r.setColorHex(C);
+          o.setColorHex(b);
           return;
         }
-        l.setColorHex(C);
+        n.setColorHex(b);
       }
-    }), Z = v(() => ({
+    }), E = 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: f.value ? "display: none" : ""
+    })), y = C(() => ({
+      modelValue: S.value,
+      "onUpdate:modelValue": (b) => S.value = b,
+      show: f.value,
+      "onUpdate:show": (b) => f.value = b,
+      label: T.value
+    })), T = C(() => u.value ? D.value : p.value), P = () => {
+      n.reset(), o.reset();
+    }, G = C(() => o.changed || n.changed), H = C(() => ({
       label: "Reset Colors",
-      onClick: Q,
-      style: w.value ? "display: none" : "",
-      disable: !q.value
+      onClick: P,
+      style: f.value ? "display: none" : "",
+      disable: !G.value
     }));
-    O(c, (C) => {
-      C !== oe && (w.value = !1);
+    O(l, (b) => {
+      b !== se && (f.value = !1);
     });
-    function T() {
-      return h("div", {
+    function Z() {
+      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("div", E.value, [
+          d(Ce, w.value),
+          d(Ce, h.value)
         ]),
-        h(Dt, B.value),
-        h(qt, U.value)
+        d(Tt, H.value),
+        d(fs, y.value)
       ]);
     }
-    return () => T();
+    return () => Z();
   }
-}), zo = $({
+}), ao = R({
   name: "TdColorsExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1730,101 +1747,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,
-      options: oe,
-      tab: oe
-    }), a = v(() => {
+  setup(e, { slots: t, emit: s }) {
+    const { lang: i } = W(), r = It(), { expanded: n, selected: o } = oe({
+      store: r,
+      options: se,
+      tab: se
+    }), l = C(() => {
       var u;
-      return (u = s.value.td) == null ? void 0 : u.components.colors.title;
+      return (u = i.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: n.value,
+        "onUpdate:modelValue": (p) => n.value = p,
+        label: l.value,
+        selected: o.value,
         icon: "f_palette"
       };
-      return h(rt, u, () => h(It));
+      return d(We, u, () => d(Yt));
     }
-    return () => c();
+    return () => a();
   }
-}), $t = $({
+}), Qt = R({
   name: "TdGridSection",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = J(), n = Me(), r = v(
+  setup(e, { slots: t, emit: s }) {
+    const { lang: i } = W(), r = Ee(), n = 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, h;
+        return o.value ? ((w = i.value.td) == null ? void 0 : w.components.grid.toggle.off) || "" : ((h = i.value.td) == null ? void 0 : h.components.grid.toggle.on) || "";
       }
-    ), 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)
+    }), l = 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 D() {
+      const w = {
         class: "td-grid-tool"
-      }, E = {
+      }, h = {
         access: "grd",
         // drawer: !props.noIcons,
-        modelValue: l.value,
-        "onUpdate:modelValue": (w) => l.value = w,
-        label: r.value
+        modelValue: o.value,
+        "onUpdate:modelValue": (T) => o.value = T,
+        label: n.value
         // dark: props.dark,
         // disable: props.disable,
         // hasAccess: props.hasAccess,
         // onBlockAccess: emitBlockAccess,
-      }, D = {
+      }, f = {
         title: "Opacity",
         icon: "f_opacity",
         min: 1,
         max: 100,
         initial: 50,
-        modelValue: a.value * 100,
-        "onUpdate:modelValue": (w) => a.value = w / 100
-      }, y = {
+        modelValue: l.value * 100,
+        "onUpdate:modelValue": (T) => l.value = T / 100
+      }, S = {
         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": (T) => a.value = T / 100
+      }, E = {
         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": (T) => u.value = T
+      }, y = [d(Ot, h)];
+      return o.value && (y.push(d(Ke, S)), y.push(d(Ke, E)), y.push(d(Ke, f)), y.push(d(Tt, p.value))), d("div", w, y);
     }
-    return () => b();
+    return () => D();
   }
-}), To = $({
+}), lo = R({
   name: "TdGridExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1832,34 +1851,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: i } = W(), r = Ee(), { expanded: n, selected: o } = oe({
+      store: r,
+      options: Se,
+      tab: Se
+    }), l = C(() => {
       var u;
-      return (u = s.value.td) == null ? void 0 : u.components.grid.title;
+      return (u = i.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: n.value,
+        "onUpdate:modelValue": (p) => n.value = p,
+        label: l.value,
+        selected: o.value,
         icon: "f_grid"
       };
-      return h(rt, u, () => h($t));
+      return d(We, u, () => d(Qt));
     }
-    return () => c();
+    return () => a();
   }
-}), Nt = $({
+}), Jt = R({
   name: "TdLightsSection",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1867,172 +1886,90 @@ 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(
+  setup() {
+    const { lang: e } = W(), t = fe(), s = A(), i = me(), r = it(), n = Dt(), o = Mt(), { active: l } = $(s), a = C({
+      get: () => t.move,
+      set: (m) => t.setMove(m)
+    }), u = C(
       () => {
-        var m;
-        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.key) || "";
+        var m, B;
+        return t.move ? ((m = e.value.td) == null ? void 0 : m.components.lights.toggles.position.off) || "" : ((B = e.value.td) == null ? void 0 : B.components.lights.toggles.position.on) || "";
       }
-    ), 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(
+    ), p = C(() => ({
+      modelValue: a.value,
+      "onUpdate:modelValue": (m) => a.value = m,
+      label: u.value
+    })), D = C(
       () => {
         var m;
-        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.back) || "";
+        return ((m = e.value.td) == null ? void 0 : m.components.lights.ambientIntensity) || "";
       }
-    ), 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(
+    ), w = C(
       () => {
         var m;
-        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.fill) || "";
+        return ((m = e.value.td) == null ? void 0 : m.components.lights.userIntensity) || "";
       }
-    ), 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(
-      () => {
-        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) || "";
-      }
-    ), 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);
+    ), h = 0, f = 50, S = 100, E = (m, B, F) => ({
+      toSlider: (z) => z <= B ? h + (z - m) / (B - m) * (f - h) : f + (z - B) / (F - B) * (S - f),
+      fromSlider: (z) => z <= f ? m + (z - h) / (f - h) * (B - m) : B + (z - f) / (S - f) * (F - B)
+    }), y = E(
+      Be,
+      te,
+      yt
+    ), T = E(
+      Be,
+      te,
+      St
+    ), P = (m, B, F, z) => ({
+      title: m,
+      icon: "f_brightness",
+      min: h,
+      max: S,
+      modelValue: B.toSlider(F),
+      "onUpdate:modelValue": (j) => {
+        z(B.fromSlider(j));
       }
-    }), 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(() => ({
+    }), G = C(
+      () => P(
+        D.value,
+        y,
+        t.ambientScale,
+        (m) => t.setAmbientScale(m)
+      )
+    ), H = C(
+      () => P(
+        w.value,
+        T,
+        t.userScale,
+        (m) => t.setUserScale(m)
+      )
+    ), Z = C(() => ({
       label: "Reset Lights",
-      disable: !n.changed,
+      disable: !t.changed,
       onClick: () => {
-        n.reset(), l.applyFromStore();
+        var B;
+        t.reset();
+        const m = i.bounds;
+        m && (n.activate(), n.frameToBounds(m), n.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);
+    O(l, (m) => {
+      m !== de && (a.value = !1);
     });
-    function re() {
+    function b() {
       const m = {
         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(Ot, p.value),
+        d(Ke, G.value),
+        d(Ke, H.value),
+        d(Tt, Z.value)
+      ];
+      return d("div", m, B);
     }
-    return () => re();
+    return () => b();
   }
-}), Lo = $({
+}), co = R({
   name: "TdLightExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -2040,70 +1977,177 @@ 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: i } = W(), r = fe(), { expanded: n, selected: o } = oe({
+      store: r,
+      options: de,
+      tab: de
+    }), l = C(() => {
       var u;
-      return (u = s.value.td) == null ? void 0 : u.components.lights.title;
+      return (u = i.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: n.value,
+        "onUpdate:modelValue": (p) => n.value = p,
+        label: l.value,
+        selected: o.value,
         icon: "f_bulb_light"
       };
-      return h(rt, u, () => h(Nt));
+      return d(We, u, () => d(Jt));
     }
-    return () => c();
+    return () => a();
   }
-}), Zt = $({
+}), es = R({
   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 = xt(e);
+    function s() {
+      const i = {
         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", i, r);
     }
-    return () => c();
+    return () => s();
   }
-}), Vo = $({
+}), uo = R({
   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: i } = oe({
+      options: xe,
+      tab: xe
+    }), r = C(() => "Related");
+    function n() {
+      const o = {
         class: "td-related-expansion",
-        modelValue: s.value,
-        "onUpdate:modelValue": (a) => s.value = a,
-        label: n.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (l) => i.value = l,
+        label: r.value,
         icon: "f_related"
       };
-      return h(rt, l, () => h(Zt));
+      return d(We, o, () => d(es));
     }
-    return () => r();
+    return () => n();
+  }
+});
+function po() {
+  const { freeServer: e, paidServer: t } = vs();
+  return ys({ freeServer: e, paidServer: t });
+}
+const mo = Symbol.for("activity-tracking"), fo = ["nude", "muscle", "smooth"];
+function ho() {
+  const e = A(), t = me(), s = xt(mo, null), { getThumbnail: i } = po();
+  return { skins: C(() => {
+    const n = e.setUuid, o = e.selected, l = {};
+    return Object.values(t.models).forEach((a) => {
+      !(a != null && a.slug) || l[a.slug] || (l[a.slug] = a);
+    }), fo.filter((a) => l[a]).map((a) => {
+      const u = l[a];
+      return {
+        id: u.id,
+        slug: a,
+        name: a,
+        imageUrl: n ? i({ type: "sets", uuid: n, image: a }) : null,
+        selected: u.id === o,
+        click: () => {
+          e.selected = u.id, s == null || s.trackEvent(Ts, { value: a });
+        }
+      };
+    });
+  }) };
+}
+const go = R({
+  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 i() {
+      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(Ce, r);
+    }
+    return () => i();
+  }
+}), ts = R({
+  name: "TdSkinsSection",
+  props: { size: { type: String, default: "sm" } },
+  setup(e) {
+    const { skins: t } = ho(), { lang: s } = W();
+    function i() {
+      const r = t.value.map(
+        (n) => {
+          var o, l;
+          return d(go, {
+            id: n.id,
+            slug: n.slug,
+            label: ((l = (o = s.value.td) == null ? void 0 : o.components.skins.items) == null ? void 0 : l[n.slug]) ?? n.slug,
+            image: n.imageUrl,
+            selected: n.selected,
+            size: e.size,
+            onClick: n.click
+          });
+        }
+      );
+      return d($t, {}, () => r);
+    }
+    return () => i();
   }
-}), Kt = $({
+}), bo = R({
+  name: "TdSkinsExpansion",
+  setup() {
+    const { lang: e } = W(), t = me(), { expanded: s } = oe({
+      options: ye,
+      tab: ye
+    }), i = C(() => {
+      var l;
+      const o = (l = t.model) == null ? void 0 : l.slug;
+      return !!o && o !== qt;
+    }), r = C(() => {
+      var o;
+      return (o = e.value.td) == null ? void 0 : o.components.skins.title;
+    });
+    function n() {
+      const o = {
+        class: "td-skins-expansion",
+        "data-cy": "td-skins-expansion",
+        modelValue: s.value,
+        "onUpdate:modelValue": (l) => s.value = l,
+        label: r.value,
+        selected: i.value,
+        icon: "f_shirt"
+      };
+      return d(We, o, () => d(ts, { size: "sm", class: "q-py-sm" }));
+    }
+    return () => n();
+  }
+}), ss = R({
   name: "TdButtons",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -2115,309 +2159,334 @@ 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 i = Mt(), r = Dt(), n = ct(), o = Ve(), l = fe(), a = ut(), { changed: u } = $(n), { changed: p } = $(o), { changed: D } = $(l), { changed: w } = $(a), h = C(() => !(u.value || p.value || D.value || w.value));
+    function f() {
+      n.reset(), o.reset(), l.reset(), a.reset(), i.applyFromStore(), r.applyFromStore();
     }
-    const S = (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 S = (y) => y.preventDefault();
+    function E() {
+      const T = {
+        style: C(() => e.fixed ? "position: fixed;bottom: 0; left: 0; right: 0;border-top: 1px solid var(--grey-300)" : ""),
         class: "row justify-center items-center q-pa-md"
-      }, U = {
+      }, P = {
         class: "td-reset-button",
         label: "Reset All",
-        onClick: k,
+        onClick: f,
         onKeyup: S,
         rounded: !0,
         unelevated: !0,
         outline: !0,
-        disable: y.value
+        disable: h.value
       };
-      return h("div", Z, [h(Ot, U)]);
+      return d("div", T, [d(Ut, P)]);
     }
-    return () => w();
+    return () => E();
   }
-}), jo = $({
+}), vo = R({
   name: "TdExpansions",
-  setup(e, { slots: t, emit: o }) {
-    function s() {
-      return h("div", {
+  setup(e, { slots: t, emit: s }) {
+    function i() {
+      return d("div", {
         class: "td-expansions",
-        onClick: (r) => r.stopPropagation(),
+        onClick: (n) => n.stopPropagation(),
         style: "padding-bottom: 60px; position: relative "
       }, [
         // h(TsPoseButtonsSection),
-        h(Fe),
-        h(zo),
-        h(Fe),
-        h(To),
-        h(Fe),
-        h(Lo),
-        h(Fe),
+        d(Ie),
+        d(bo),
+        d(Ie),
+        d(ao),
+        d(Ie),
+        d(lo),
+        d(Ie),
+        d(co),
+        d(Ie),
         // h(TsGridExpansion),
         // h(QSeparator),
         // h(TsAdjustmentExpansion),
-        h(Vo),
-        h(Fe),
+        d(uo),
+        d(Ie),
         // h('div', {}, store.loading.percent),
-        h(Kt)
+        d(ss)
       ]);
     }
-    return () => s();
+    return () => i();
   }
-}), Fo = $({
+}), yo = R({
   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 = Ee(), s = A(), i = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = W(), n = C(() => {
+      var p;
+      return (p = r.value.td) == null ? void 0 : p.controls.colors.iconTitle;
+    }), { click: o, selected: l } = oe({
       store: t,
-      options: oe,
-      tab: oe
+      options: se,
+      tab: se
     });
-    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: i.value,
+        selected: l.value,
+        onClick: o,
+        onBlockAccess: a,
         size: e.size,
-        "data-id": oe,
+        "data-id": se,
         name: "colors",
         type: "none",
         icon: "f_palette",
-        label: r.value
+        label: n.value
       };
-      return h(ne, g, () => []);
+      return d(Ce, p, () => []);
     }
     return () => u();
   }
-}), Po = $({
+}), So = R({
   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 = Ee(), s = A(), i = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = W(), n = C(() => {
+      var p;
+      return (p = r.value.td) == null ? void 0 : p.controls.grid.iconTitle;
+    }), { click: o, selected: l } = oe({
       store: t,
-      options: xe,
-      tab: xe
+      options: Se,
+      tab: Se
     });
-    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: i.value,
+        selected: l.value,
+        onClick: o,
+        onBlockAccess: a,
         size: e.size,
-        "data-id": xe,
+        "data-id": Se,
         name: "grid",
         type: "none",
         icon: "f_grid",
-        label: r.value
+        label: n.value
       };
-      return h(ne, g, () => []);
+      return d(Ce, p, () => []);
     }
     return () => u();
   }
-}), Go = $({
+}), xo = R({
   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 = Ee(), s = A(), i = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = W(), n = C(() => {
+      var p;
+      return (p = r.value.td) == null ? void 0 : p.controls.lights.iconTitle;
+    }), { click: o, selected: l } = oe({
       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: i.value,
+        selected: l.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: n.value
       };
-      return h(ne, g, () => []);
+      return d(Ce, p, () => []);
     }
     return () => u();
   }
-}), Ho = $({
+}), Co = R({
   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 = A(), { lang: s } = W(), i = C(() => {
+      var a;
+      return (a = s.value.td) == null ? void 0 : a.controls.related.iconTitle;
+    }), { click: r, selected: n } = oe({
+      options: xe,
+      tab: xe
     });
-    function l(c) {
-      return t.block(c);
+    function o(a) {
+      return t.block(a);
     }
-    function a() {
-      const c = {
+    function l() {
+      const a = {
         hasAccess: !0,
-        selected: r.value,
-        onClick: n,
-        onBlockAccess: l,
-        "data-id": we,
+        selected: n.value,
+        onClick: r,
+        onBlockAccess: o,
+        "data-id": xe,
         size: e.size,
         name: "related",
         icon: "f_related",
         type: "none",
-        label: s.value
+        label: i.value
       };
-      return h(ne, c, () => []);
+      return d(Ce, a, () => []);
     }
-    return () => a();
+    return () => l();
   }
-}), Ro = $({
+}), wo = R({
   name: "TsDefaultDrawer",
   props: {},
   emits: ["click"],
-  setup(e, { slots: t, emit: o }) {
-    const s = p(), n = "q-ma-xs";
-    function r(l) {
+  setup(e, { slots: t, emit: s }) {
+    const i = A(), r = "q-ma-xs";
+    function n(o) {
       return {
-        class: n,
+        class: r,
         size: "sm",
-        onClick: () => s.setActive(l)
+        onClick: () => i.setActive(o)
       };
     }
-    return () => h(
-      Qe,
-      { name: ot },
+    return () => d(
+      Pe,
+      { name: Nt },
       {
-        default: () => h(ro, {}, () => [
-          h(Fo, r(oe)),
-          h(Po, r(xe)),
-          h(Go, r(ve)),
-          h(Ho, r(we))
+        default: () => d($t, {}, () => [
+          d(yo, n(se)),
+          d(So, n(Se)),
+          d(xo, n(de)),
+          d(Co, n(xe))
         ]),
-        secondary: () => h(Kt, { fixed: !1 })
+        secondary: () => d(ss, { fixed: !1 })
       }
     );
   }
-}), Oo = $({
+}), Eo = R({
   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: i } = W(), r = C(() => {
+      var o;
+      return (o = i.value.td) == null ? void 0 : o.controls.grid.title;
     });
-    function r() {
-      const l = {
+    function n() {
+      const o = {
         class: "td-grid-drawer",
-        name: xe,
-        label: n.value
+        name: Se,
+        label: r.value
       };
-      return h(Qe, l, () => h($t));
+      return d(Pe, o, () => d(Qt));
     }
-    return () => r();
+    return () => n();
   }
-}), qo = $({
+}), Io = R({
   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: i } = W(), r = C(() => {
+      var o;
+      return (o = i.value.td) == null ? void 0 : o.controls.related.title;
     });
-    function r() {
-      const l = {
+    function n() {
+      const o = {
         class: "td-related-drawer",
-        name: we,
-        label: n.value
+        name: xe,
+        label: r.value
       };
-      return h(Qe, l, () => h(Zt));
+      return d(Pe, o, () => d(es));
     }
-    return () => r();
+    return () => n();
   }
-}), _o = $({
+}), Mo = R({
   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: i } = W(), r = C(() => {
+      var o;
+      return (o = i.value.td) == null ? void 0 : o.controls.lights.title;
     });
-    function r() {
-      const l = {
+    function n() {
+      const o = {
         class: "td-lights-drawer",
-        name: ve,
-        label: n.value
+        name: de,
+        label: r.value
       };
-      return h(Qe, l, () => h(Nt));
+      return d(Pe, o, () => d(Jt));
     }
-    return () => r();
+    return () => n();
   }
-}), Uo = $({
+}), Do = R({
   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: i } = W(), r = C(() => {
+      var o;
+      return (o = i.value.td) == null ? void 0 : o.controls.colors.title;
     });
-    function r() {
-      const l = {
+    function n() {
+      const o = {
         class: "td-colors-drawer",
-        name: oe,
-        label: n.value
+        name: se,
+        label: r.value
       };
-      return h(Qe, l, () => h(It));
+      return d(Pe, o, () => d(Yt));
     }
-    return () => r();
+    return () => n();
+  }
+}), To = R({
+  name: "TdSkinsDrawer",
+  setup() {
+    const { lang: e } = W(), { expanded: t } = oe({
+      options: ye,
+      tab: ye
+    }), s = C(() => {
+      var r;
+      return (r = e.value.td) == null ? void 0 : r.controls.skins.title;
+    });
+    function i() {
+      const r = {
+        class: "td-skins-drawer",
+        name: ye,
+        label: s.value,
+        modelValue: t.value,
+        "onUpdate:modelValue": (n) => t.value = n
+      };
+      return d(Pe, r, () => d(ts));
+    }
+    return () => i();
   }
-}), Io = $({
+}), ko = R({
   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 i = A(), r = C({
+      get: () => i.active,
+      set: (o) => i.setActive(o)
     });
-    function r() {
-      const l = {
-        modelValue: n.value,
-        "onUpdate:modelValue": (a) => n.value = a
+    function n() {
+      const o = {
+        modelValue: r.value,
+        "onUpdate:modelValue": (l) => r.value = l
       };
-      return h(lo, l, () => [
-        h(Ro),
-        h(_o),
-        h(Uo),
-        h(Oo),
-        h(qo)
+      return d(hs, o, () => [
+        d(wo),
+        d(To),
+        d(Mo),
+        d(Do),
+        d(Eo),
+        d(Io)
       ]);
     }
-    return () => r();
+    return () => n();
   }
-}), ns = /* @__PURE__ */ Object.assign({
+}), No = /* @__PURE__ */ Object.assign({
   name: "TdPage",
   slug: "td-page",
   inheritAttrs: !1
 }, {
   __name: "TdPage",
-  props: /* @__PURE__ */ so({
+  props: /* @__PURE__ */ ds({
     id: Number
   }, {
     miniState: { type: Boolean },
@@ -2425,29 +2494,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"), i = A(), r = xt(s, null), n = C(() => Number(t.id)), o = ls(e, "miniState"), l = (a) => {
+      a && (r == null || r.trackEvent(Ds, {
+        glb_id: i.selected || null,
+        base_pose_id: a
+      }));
+    };
+    return jt(async () => {
+      r && (await r.beginExplore(), r.trackEvent(Ms, { from: null, to: "3d" }), i.basePoseId && (r.beginSegment(String(i.basePoseId)), l(i.basePoseId)));
+    }), O(
+      () => i.basePoseId,
+      (a, u) => {
+        !a || a === u || (r == null || r.beginSegment(String(a)), l(a));
+      }
+    ), cs(() => {
+      i.setActive(ms.is.mobile ? Nt : se), r == null || r.end();
+    }), (a, u) => (nt(), mt(ft(gs), {
       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: ht(() => [
+        a.$q.platform.is.mobile ? vt("", !0) : (nt(), mt(ft(vo), { key: 0 }))
       ]),
-      bottomDrawer: ct(() => [
-        r.$q.platform.is.mobile ? (Je(), it(at(Io), { key: 0 })) : ht("", !0)
+      bottomDrawer: ht(() => [
+        a.$q.platform.is.mobile ? (nt(), mt(ft(ko), { key: 0 })) : vt("", !0)
       ]),
-      default: ct(() => [
-        oo(Ao, { id: s.value }, null, 8, ["id"])
+      default: ht(() => [
+        us(io, { id: n.value }, null, 8, ["id"])
       ]),
       _: 1
     }, 8, ["miniState"]));
   }
-}), $o = [
+}), Ao = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -2488,29 +2569,29 @@ const Pt = () => {
   "#BDACA8",
   "#DACDC9",
   "#E5E4E3"
-], rs = de("3d-fbxs", {
+], Ho = Xe("3d-fbxs", {
   state: () => ({
     models: {},
     loadingUrl: null,
-    palette: $o
+    palette: Ao
   }),
   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 i, r, n, o, l;
+      const s = A().selected;
+      return console.log("fbx model", (i = e.models) == null ? void 0 : i[s]), (n = (r = e.models) == null ? void 0 : r[s]) != null && n.color ? ((l = (o = e.models) == null ? void 0 : o[s]) == null ? void 0 : l.color) !== 16777215 : !1;
     },
     selectedId() {
-      return p().selected;
+      return A().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 i, r;
+      const s = A().selected;
+      return (r = (i = e.models) == null ? void 0 : i[s]) == null ? void 0 : r.poseId;
     },
     model(e) {
-      const o = p().selected;
-      return o && e.models[o] ? e.models[o] : null;
+      const s = A().selected;
+      return s && e.models[s] ? e.models[s] : null;
     },
     url() {
       var e;
@@ -2526,37 +2607,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 = A().selected;
       this.models[t].color = 16777215;
     },
     setBounds(e) {
-      const o = p().selected;
-      this.models[o].bounds = _t(e);
+      const s = A().selected;
+      this.models[s].bounds = Ht(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 = A().selected;
+      this.models[s].color = Ye(e);
     }
   }
 });
 export {
-  ns as TdPage,
-  p as use3dStore,
-  Ut as useColorsStore,
-  Ct as useControlsStore,
-  rs as useFBXStore,
-  ye as useGLBStore,
-  Me as useGridStore,
+  No as TdPage,
+  A as use3dStore,
+  It as useColorsStore,
+  ct as useControlsStore,
+  Ho as useFBXStore,
+  me as useGLBStore,
+  Ee as useGridStore,
   Ve as useGroundStore,
-  Be as useLightsStore,
-  lt as useSceneStore
+  fe as useLightsStore,
+  ut as useSceneStore
 };