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

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

@@ -1,51 +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 U, ref as te, onUnmounted as Rt, computed as h, onMounted as Zt, openBlock as Je, createElementBlock as Kt, createCommentVNode as gt, createElementVNode as Yt, onBeforeMount as Qt, defineComponent as Z, h as m, inject as Wt, useModel as Jt, onBeforeUnmount as eo, createBlock as at, unref as it, withCtx as ct, createVNode as to, mergeModels as oo } from "vue";
-import { Platform as ft, useQuasar as so, QBtn as qt, QSeparator as je } from "quasar";
-import { CBaseButton as re, CColorPickerPopup as Ot, CExpansion as rt, CToggle as Ze, CSlider as dt, CDraggableDrawer as Qe, CBaseButtons as no, CDraggableDrawers as ro, CToolPage as lo } from "@figurosity/consumer-controls";
-import { defineStore as ve, storeToRefs as $, getActivePinia as ao } from "pinia";
-import * as S 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 se, GRID as Se, LIGHTS as ge, RELATED as xe } from "@figurosity/toolbox";
-import { OrbitControls as io } from "three/examples/jsm/controls/OrbitControls.js";
-import { mergeVertices as Bt, mergeGeometries as co } from "three/examples/jsm/utils/BufferGeometryUtils.js";
-import { RoundedBoxGeometry as uo } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
-import { FBXLoader as po } from "three/examples/jsm/loaders/FBXLoader.js";
-function Ce(e) {
-  const o = e.startsWith("#") ? e.slice(1) : e;
-  return parseInt(o, 16);
-}
-function fe(e) {
-  return `#${e.toString(16).padStart(6, "0")}`;
-}
-const ut = new S.Vector3(), Dt = (e) => {
-  const o = new S.Box3().setFromObject(e);
-  console.log("box", o);
-  const t = o.getSize(new S.Vector3()), s = new S.Vector3(
-    (o.min.x + o.max.x) / 2,
-    (o.min.y + o.max.y) / 2,
-    (o.min.z + o.max.z) / 2
+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 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 = o.min.y;
-  return console.log("bottom", n), Math.abs(n) < -0.01 && (n = mo(e)), console.log("bottom", n), {
-    box: o,
-    size: t,
-    center: s,
-    bottom: n,
-    top: o.max.y
+  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: s,
+    center: i,
+    bottom: r,
+    top: t.max.y
   };
-}, mo = (e) => {
-  let o = 1 / 0;
-  return e.updateMatrixWorld(!0), e.traverse((t) => {
-    var n, r;
-    if (!t.isMesh) return;
-    const s = (r = (n = t.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(t.matrixWorld), o = Math.min(o, ut.y);
-  }), o;
-}, ho = (e) => ({
+}, ks = (e) => {
+  let t = 1 / 0;
+  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;
+}, Ht = (e) => ({
   box: {
     min: {
       x: e.box.min.x,
@@ -70,69 +65,33 @@ const ut = new S.Vector3(), Dt = (e) => {
   },
   bottom: e.bottom,
   top: e.top
-}), go = [
-  "#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"
-], de = ve("3d-fbxs", {
+}), 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,
+  bounds: e.bounds ?? null
+}), me = Xe("3d-glbs", {
   state: () => ({
-    models: {},
-    loadingUrl: null,
-    palette: go
+    models: {}
   }),
   getters: {
-    changed(e) {
-      var s, n, r, l, i;
-      const t = b().selected;
-      return console.log("fbx model", (s = e.models) == null ? void 0 : s[t]), (r = (n = e.models) == null ? void 0 : n[t]) != null && r.color ? ((i = (l = e.models) == null ? void 0 : l[t]) == null ? void 0 : i.color) !== 16777215 : !1;
-    },
     selectedId() {
-      return b().selected;
+      return A().selected;
     },
     poseId(e) {
-      var s, n;
-      const t = b().selected;
-      return (n = (s = e.models) == null ? void 0 : s[t]) == null ? void 0 : n.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 = b().selected;
+      const t = A().selected;
       return t && e.models[t] ? e.models[t] : null;
     },
     url() {
@@ -142,211 +101,341 @@ const ut = new S.Vector3(), Dt = (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 ? fe(this.model.color) : "#fefefe";
     }
   },
   actions: {
-    resetColor() {
-      const o = b().selected;
-      this.models[o].color = 16777215;
-    },
     setBounds(e) {
-      const t = b().selected;
-      this.models[t].bounds = ho(e);
+      const t = A().selected;
+      this.models[t] && (this.models[t].bounds = Ht(e));
     },
     setSubjectsFromResponse(e) {
-      const o = e.entities.fbx;
-      this.models = { ...this.models, ...o };
-    },
-    setColorHex(e) {
-      const t = b().selected;
-      this.models[t].color = Ce(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 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 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 n == "string" ? parseInt(n, 10) : n;
     }
   }
-}), vt = { visible: !0, opacity: 1, color: 16711422, texture: "none" }, zt = (e = {}) => ({ ...vt, ...e }), Ve = ve("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 t, s;
-      const o = b().selected;
-      return ((s = (t = e.models) == null ? void 0 : t[o]) == null ? void 0 : s.color) !== 16711422;
+    keyId() {
+      return A()[n];
     },
-    property() {
-      return (e, o = null) => {
-        var t;
-        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
-      };
+    model(o) {
+      return o.models[A()[n]];
     },
-    selectedId() {
-      return b().selected;
+    exists(o) {
+      return typeof o.models[A()[n]] < "u";
     },
-    selectedModel(e) {
-      const o = this.selectedId;
-      return e.models[o] ?? null;
+    selectedModel(o) {
+      return o.models[A()[n]] ?? null;
     },
     mergedModel() {
-      return { ...vt, ...this.selectedModel ?? {} };
+      return { ...t, ...this.selectedModel ?? {} };
     },
-    model(e) {
-      const t = b().selected;
-      return t && e.models[t] ? e.models[t] : 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;
+    propertyChangedById() {
+      return (o, l) => this.propertyById(o, l) !== t[l];
     },
-    colorHex() {
-      return fe(this.mergedModel.color);
-    },
-    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 = b().selected;
-      this.models[e] = zt();
+    initModel(o) {
+      o != null && (typeof this.models[o] < "u" || this.$patch((l) => {
+        l.models[o] = { ...t };
+      }));
     },
     ensureSelectedModel() {
-      const e = b().selected;
-      return this.models[e] || (this.models[e] = { ...vt }), this.models[e];
-    },
-    patchSelected(e) {
-      const o = this.ensureSelectedModel();
-      Object.assign(o, e);
+      const o = A()[n];
+      return o == null ? null : (this.models[o] || (this.models[o] = { ...t }), this.models[o]);
     },
-    setProperty(e, o) {
-      const t = this.ensureSelectedModel();
-      t[e] = o;
+    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", Ce(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] = zt());
-    }
+    ...r
   }
-}), Ke = {
+}), 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");
+  }
+}, 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 = {}) => ({ ...Ke, ...e }), he = {
+}, 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 = {}) => ({ ...he, ...e }), Me = ve("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 t = b().selected, s = !tt(e.options[t], he), n = {
-        key: { ...Ke },
-        fill: { ...Ke },
-        back: { ...Ke }
-      }, r = !tt(e.lights[t], 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 t = b().selected;
-      return ((s = e.options[t]) == 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 t = b().selected;
-      return ((s = e.options[t]) == 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 t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.position) || he.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 t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.quaternion) || he.quaternion;
+      var t;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.quaternion) || Ae.quaternion;
     },
     target(e) {
-      var s;
-      const t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.target) || he.target;
+      var t;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.target) || Ae.target;
     },
     radius(e) {
-      var s;
-      const t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.radius) || he.radius;
+      var t;
+      return (t = e.options[this.bpId]) == null ? void 0 : t.radius;
     },
     property(e) {
-      return (o, t = null, s = null) => {
-        const r = b().selected;
-        return !e.lights[r] || !e.lights[r][o] || !(t in e.lights[r][o]) ? s : e.lights[r][o][t];
+      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 (o) => {
-        const s = b().selected;
-        return !e.lights[s] || !e.lights[s][o] ? "#ffffff" : fe(e.lights[s][o].color);
+      return (t) => {
+        const s = e.lights[this.bpId];
+        return !s || !s[t] ? "#ffffff" : ue(s[t].color);
       };
     },
     lightKeys(e) {
-      const t = b().selected;
-      return Object.keys(e.lights[t]);
+      return Object.keys(e.lights[this.bpId] || {});
     },
-    isVisible(e) {
-      return (o) => e.move && (this.advancedMode === !0 && this.property(o, "visible") || o === "key");
+    isVisible() {
+      return () => this.move;
     }
   },
   actions: {
     reset() {
-      const e = b().selected;
-      this.options[e] = { ...he }, this.collection.forEach(
-        (o) => this.lights[e][o] = { ...Ke }
-      );
+      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 = b().selected;
-      return this.options[e] || (this.options[e] = { ...he }), this.options[e];
+      const e = this.bpId;
+      return e == null ? null : (this.options[e] || (this.options[e] = tt()), this.options[e]);
     },
-    patchSelected(e) {
-      const o = this.ensureSelectedOptions();
-      Object.assign(o, e);
+    ensureSelectedScales() {
+      const e = this.skinId;
+      return e == null ? null : (this.scales[e] || (this.scales[e] = st()), this.scales[e]);
     },
-    setControlProperty(e, o) {
-      const t = this.ensureSelectedOptions();
-      t[e] = o;
+    setControlProperty(e, t) {
+      const s = this.ensureSelectedOptions();
+      s && (s[e] = t);
     },
     setPosition(e) {
       this.setControlProperty("position", e);
@@ -361,169 +450,152 @@ const ut = new S.Vector3(), Dt = (e) => {
       this.setControlProperty("radius", e);
     },
     setMove(e = !1) {
-      const t = b().selected;
-      this.options[t].move = e;
+      this.initLights();
+      const t = this.ensureSelectedOptions();
+      t && (t.move = e);
     },
     setAdvanced(e = !1) {
-      const t = b().selected;
+      const t = this.bpId;
+      if (t == null) return;
+      const s = this.ensureSelectedOptions();
+      if (!s) return;
       if (e === !0) {
-        this.options[t].advanced = !0;
+        s.advanced = !0;
         return;
       }
-      this.options[t].advanced = !1;
-      const s = this.lights[t].key;
-      this.lightKeys.forEach((n) => {
-        n !== "key" && (this.lights[t][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, o, t = null) {
-      t === null && (t = b().selected), this.options[t] || (this.options[t] = Et());
-      const s = e.position.clone(), n = e.quaternion.clone(), r = o.target.clone();
-      this.options[t].position = { x: s.x, y: s.y, z: s.z }, this.options[t].quaternion = { x: n.x, y: n.y, z: n.z, w: n.w }, this.options[t].target = { x: r.x, y: r.y, z: r.z };
-    },
-    setColorHex(e, o) {
-      var l;
-      const s = b().selected, n = this.lights[s], r = Ce(o);
-      if (((l = this.options[s]) == null ? void 0 : l.advanced) === !0) {
-        n[e].color = r;
+    setColorHex(e, t) {
+      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((i) => {
-        n[i].color = r;
+      this.collection.forEach((o) => {
+        i[o].color = r;
       });
     },
-    setProperty(e, o, t) {
-      const n = b().selected;
-      this.lights[n][e][o] = t;
+    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 o = b().selected;
-      this.lights[o] || (this.lights[o] = {
-        key: pt(),
-        fill: pt({ shadow: !0 }),
-        back: pt({ shadow: !0 })
-      }), this.options[o] || (this.options[o] = 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
-}, Tt = (e = {}) => ({ ...Ye, ...e }), Ct = ve("3d-controls", {
-  state: () => ({
-    models: {}
-  }),
-  getters: {
-    changed(e) {
-      var s;
-      const t = b().selected;
-      return (s = e.models) != null && s[t] ? !tt(e.models[t], Ye) : !1;
-    },
-    property() {
-      return (e, o = null) => {
-        var t;
-        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
-      };
-    },
-    selectedId() {
-      return b().selected;
-    },
-    selectedModel(e) {
-      const o = this.selectedId;
-      return e.models[o] ?? 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 = b().selected;
-      this.models[e] = { ...Ye };
-    },
-    ensureSelectedModel() {
-      const e = b().selected;
-      return this.models[e] || (this.models[e] = { ...Ye }), this.models[e];
-    },
-    patchSelected(e) {
-      const o = this.ensureSelectedModel();
-      Object.assign(o, e);
-    },
-    setProperty(e, o) {
-      const t = this.ensureSelectedModel();
-      t[e] = o;
-    },
-    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, o, t = null) {
-      t === null && (t = b().selected), this.models[t] || (this.models[t] = Tt());
-      const s = e.position.clone(), n = e.quaternion.clone(), r = o.target.clone();
-      this.models[t].position = { x: s.x, y: s.y, z: s.z }, this.models[t].quaternion = { x: n.x, y: n.y, z: n.z, w: n.w }, this.models[t].target = { x: r.x, y: r.y, z: r.z };
-    },
-    initControls() {
-      const o = b().selected;
-      o && !this.models[o] && (this.models[o] = Tt());
-    }
+  // 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;
   }
-}), bt = {
+}, 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);
+  }
+}, ct = Qe({
+  storeId: "3d-controls",
+  defaultValues: Wt,
+  state: { framed: {} },
+  getters: Rs,
+  actions: Gs,
+  keyBy: "basePoseId"
+}), Fs = {
   color: 16711422
-}, At = (e = {}) => ({ ...bt, ...e }), lt = ve("3d-scene", {
-  state: () => ({
-    models: {}
-  }),
-  getters: {
-    changed(e) {
-      var s, n;
-      const t = b().selected;
-      return ((n = (s = e.models) == null ? void 0 : s[t]) == null ? void 0 : n.color) !== 16711422;
-    },
-    colorHex(e) {
-      var n;
-      const t = b().selected, s = (n = e.models[t]) == null ? void 0 : n.color;
-      return fe(s || bt.color);
-    }
+}, _s = {
+  changed() {
+    return this.propertyChanged("color");
   },
-  actions: {
-    reset() {
-      const o = b().selected;
-      this.models[o] = { ...bt };
-    },
-    selectedId() {
-      return b().selected;
-    },
-    setColorHex(e) {
-      const t = b().selected;
-      this.models[t] || (this.models[t] = At()), this.models[t].color = Ce(e);
-    },
-    init() {
-      const o = b().selected;
-      this.models[o] || (this.models[o] = At());
-    }
+  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,
@@ -533,90 +605,34 @@ const ut = new S.Vector3(), Dt = (e) => {
   bottom: !1,
   divisions: 6,
   opacity: 0.5,
-  size: 2,
-  lineColor: 13421772,
-  centerLineColor: 16711680
-}, fo = (e = {}) => ({ ...Te, ...e }), ke = ve("3d-grid", {
-  state: () => ({
-    models: {}
-  }),
-  getters: {
-    changed(e) {
-      const t = b().selected;
-      return console.log("state.models[id]", e.models[t]), console.log("defaults", Te), !tt(e.models[t], Te);
-    },
-    property() {
-      return (e, o = null) => {
-        var t;
-        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
-      };
-    },
-    selectedId() {
-      return b().selected;
-    },
-    selectedModel(e) {
-      const o = this.selectedId;
-      return e.models[o] ?? 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 fe(this.mergedModel.lineColor);
-    },
-    centerLineColorHex() {
-      return fe(this.mergedModel.centerLineColor);
-    }
+  size: 2
+}, Us = {
+  changed() {
+    return !Ze(this.mergedModel, Xt);
   },
-  actions: {
-    reset() {
-      const o = b().selected;
-      this.models[o] = { ...Te }, Ht(() => {
-        this.models[o].show = !1;
-      });
-    },
-    ensureSelectedModel() {
-      const e = b().selected;
-      return this.models[e] || (this.models[e] = { ...Te }), this.models[e];
-    },
-    patchSelected(e) {
-      const o = this.ensureSelectedModel();
-      Object.assign(o, e);
-    },
-    setProperty(e, o) {
-      const t = this.ensureSelectedModel();
-      t[e] = o;
-    },
-    setLineColorHex(e) {
-      this.setProperty("lineColor", Ce(e));
-    },
-    setCenterLineColorHex(e) {
-      this.setProperty("centerLineColor", Ce(e));
-    },
-    init() {
-      const o = b().selected;
-      this.models[o] || (this.models[o] = fo());
-    }
+  show() {
+    return this.property("show");
+  },
+  opacity() {
+    return this.property("opacity");
+  },
+  size() {
+    return this.property("size");
+  },
+  divisions() {
+    return this.property("divisions");
   }
-}), vo = [
+}, Os = {
+  init() {
+    this.initModel(this.keyId);
+  }
+}, Ee = Qe({
+  storeId: "3d-grid",
+  defaultValues: Xt,
+  getters: Us,
+  actions: Os,
+  keyBy: "basePoseId"
+}), $s = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -657,74 +673,60 @@ const ut = new S.Vector3(), Dt = (e) => {
   "#BDACA8",
   "#DACDC9",
   "#E5E4E3"
-], yt = "background", et = "subject", St = "ground", Vt = {
-  [et]: 16711422,
-  [yt]: 16777215,
-  [St]: 12961221
-}, Ut = ve("3d-colors", {
-  state: () => ({
-    models: {},
-    palette: vo
-  }),
-  getters: {
-    property() {
-      return (e, o = null) => {
-        var t;
-        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
-      };
-    },
-    selectedId() {
-      return b().selected;
-    },
-    selectedModel(e) {
-      const o = this.selectedId;
-      return e.models[o] ?? null;
-    },
-    mergedModel() {
-      return { ...Vt, ...this.selectedModel ?? {} };
-    },
-    model(e) {
-      const t = b().selected;
-      return t && e.models[t] ? e.models[t] : null;
-    },
-    subjectHex() {
-      return this.getHexColor(et);
-    },
-    groundHex() {
-      return this.getHexColor(St);
-    },
-    backgroundHex() {
-      return this.getHexColor(yt);
-    }
+], 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] = { ...Vt };
-    },
-    getHexColor(e) {
-      const t = b().selected;
-      if (!this.models[t] || !this.models[t][e]) return "#F0F0F0";
-      const s = this.models[t][e];
-      return fe(s);
-    },
-    setHexColor(e = et, o = "#e6e6e6") {
-      const s = b().selected;
-      !this.models[s] || !this.models[s][e] || (this.models[s][e] = Ce(o));
-    },
-    setSubjectHex(e) {
-      this.setHexColor(et, e);
-    },
-    setGroundHex(e) {
-      this.setHexColor(St, e);
-    },
-    setBackgroundHex(e) {
-      this.setHexColor(yt, 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"));
   }
-}), b = ve("3d", {
+}, 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);
+  }
+}, 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: {
@@ -744,8 +746,7 @@ const ut = new S.Vector3(), Dt = (e) => {
   getters: {
     active(e) {
       var t, s;
-      const o = ft.is.mobile ? ot : se;
-      return ((s = (t = this.models) == null ? void 0 : t[e.selected]) == null ? void 0 : s.active) || o;
+      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;
@@ -753,135 +754,142 @@ const ut = new S.Vector3(), Dt = (e) => {
   },
   actions: {
     hasAccess(e) {
-      var o;
-      return ((o = this.appAccessStore) == null ? void 0 : o.hasAccess(e)) || !1;
+      var t;
+      return ((t = this.appAccessStore) == null ? void 0 : t.hasAccess(e)) || !1;
     },
     block(e) {
-      var o;
-      return ((o = this.appPaywallStore) == null ? void 0 : o.block(e)) || !0;
+      var t;
+      return ((t = this.appPaywallStore) == null ? void 0 : t.block(e)) || !0;
     },
     isExpanded(e = []) {
       return e = Array.isArray(e) ? e : [e], e.includes(this.active);
     },
-    setActive(e, o = 0) {
+    setActive(e, t = 0) {
       this.models[this.selected] || (this.models[this.selected] = {}), this.models[this.selected].active !== e && (this.models[this.selected].active = e);
     },
     subscribe(e) {
-      const o = this;
-      e.$on("fbx:loaded", (t) => {
-        console.log("bus.$on('fbx:loaded')", t), console.log(o.setFromResponse), o.setFromResponse(t);
+      const t = this;
+      e.$on("glb:loaded", (s) => {
+        t.setFromResponse(s);
       });
     },
     setFromResponse(e) {
-      var u;
-      console.log("3d setFromresponse", e);
-      const o = Ut(), t = Ct(), s = ke(), n = Ve(), r = Me(), l = lt(), i = de(), d = e.result.fbx;
-      this.selected = parseInt(d), o.initModel(d), r.initLights(), n.setGroundFromResponse(d), i.setSubjectsFromResponse(e), t.initControls(), s.init(), l.init(), this.models[d] || (this.models[d] = {}), (u = this.models[d]) != null && u.active || (this.models[d].active = ft.is.mobile ? ot : se);
+      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 = 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 ae = null, Fe = null;
-const Ae = () => {
-  const e = b(), { aspect: o, width: t, height: s } = $(e), n = (i = { x: 0, y: 0.8, z: 1.5 }) => (console.debug("useCamera init"), ae ? (console.debug("view camera already inited"), ae) : (ae = new S.PerspectiveCamera(75, o.value, 0.1, 100), e.loaded.camera = !0, ae)), r = () => {
-    if (ae)
-      return ae;
+let J = null, Ge = null;
+const Le = () => {
+  const e = A(), { aspect: t, width: s, height: i } = $(e), r = (l = { x: 0, y: 0.8, z: 1.5 }) => (console.debug("useCamera init"), J ? (console.debug("view camera already inited"), J) : (J = new I.PerspectiveCamera(75, t.value, 0.1, 100), e.loaded.camera = !0, J)), n = () => {
+    if (J)
+      return J;
   };
-  return Fe = U(
-    () => o.value,
-    (i) => {
-      if (!ae) {
-        n();
+  return Ge = O(
+    () => t.value,
+    (l) => {
+      if (!J) {
+        r();
         return;
       }
-      ae.aspect = i, ae.updateProjectionMatrix();
+      J.aspect = l, J.updateProjectionMatrix();
     }
   ), {
-    init: n,
-    getCamera: r,
+    init: r,
+    getCamera: n,
     dispose: () => {
-      Fe == null || Fe(), Fe = null, ae = null;
+      Ge == null || Ge(), Ge = null, J = null;
     }
   };
 };
-let ne = null;
-const st = () => {
-  const e = te(!1), o = te({
+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
-  }), t = (v, f = {}) => {
-    if (console.debug("useOrbitControlsBase init"), ne)
-      return console.debug("controls already inited"), ne;
-    const A = new S.Object3D();
-    return ne = new io(A, v.domElement), n(f), ne;
-  }, s = () => {
-    if (!ne) throw new Error("OrbitControls not initialized");
-    return ne;
-  }, n = (v = {}) => {
-    const f = s();
-    f.enableDamping = v.enableDamping ?? !0, f.dampingFactor = v.dampingFactor ?? 0.5, f.rotateSpeed = v.rotateSpeed ?? 0.2, f.enableZoom = v.enableZoom ?? !0, f.minDistance = v.minDistance ?? 0.5, f.maxDistance = v.maxDistance ?? 6;
-  }, r = ({ mode: v, camera: f, store: A, options: C }) => {
-    const y = s();
-    if (!f) throw new Error(`setMode(${v}): camera is required`);
-    if (!A) throw new Error(`setMode(${v}): store is required`);
-    y.object = f, n(C), o.value = { mode: v, camera: f, store: A }, d(), y.update();
-  }, l = () => {
-    ne && ne.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 = () => {
-    const v = s(), { camera: f, store: A } = o.value;
-    !f || !A || e.value || (A.setPosition({ ...f.position }), A.setQuaternion({ ...f.quaternion }), A.setTarget({ ...v.target }), A.setRadius(f.position.distanceTo(v.target)));
-  }, d = () => {
-    const v = s(), { camera: f, store: A } = o.value;
-    if (!f || !A) return;
+    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 = () => {
+    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 h = i(), { camera: f, store: S } = t.value;
+    if (!f || !S) return;
     e.value = !0;
-    const { position: C, quaternion: y, target: B, radius: M } = A;
-    v.target.set(B.x, B.y, B.z);
-    const z = new S.Vector3(
-      C.x - B.x,
-      C.y - B.y,
-      C.z - B.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(v.target).add(z.multiplyScalar(M)), f.quaternion.set(
+    f.position.copy(h.target).add(G.multiplyScalar(P)), f.quaternion.set(
       y.x,
       y.y,
       y.z,
       y.w
-    ), v.update(), e.value = !1;
-  };
+    ), h.update(), e.value = !1;
+  }, u = 0, p = 0.1;
   return {
-    init: t,
-    get: s,
-    setMode: r,
-    update: l,
-    syncToStore: i,
-    applyFromStore: d,
-    frameToBounds: (v, f = 1.75, A = 0.02) => {
-      const C = s(), { camera: y } = o.value;
-      if (!y || !v) return;
-      const B = new S.Vector3(
-        v.center.x,
-        v.center.y + v.size.y * A,
-        v.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", v);
-      const M = Math.max(v.size.x, v.size.y, v.size.z), z = S.MathUtils.degToRad(y.fov);
-      let H = M / 2 / Math.tan(z / 2) * f;
-      C.target.copy(B), y.position.set(B.x, B.y, B.z + H), y.near = H / 100, y.far = H * 100, y.updateProjectionMatrix(), C.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"), ne && (ne.dispose(), ne = null, o.value = { mode: null, camera: null, store: null });
+      console.debug("controls disposed"), Q && (Q.dispose(), Q = null, t.value = { mode: null, camera: null, store: null });
     }
   };
-}, wt = () => {
-  const { getCamera: e } = Ae(), o = Ct(), t = st();
+}, Mt = () => {
+  const { getCamera: e } = Le(), t = ct(), s = rt();
   return {
     activate: () => {
-      t.setMode({
+      s.setMode({
         mode: "camera",
         camera: e(),
-        store: o,
+        store: t,
         options: {
           enableZoom: !0,
           minDistance: 0.5,
@@ -889,35 +897,40 @@ const st = () => {
         }
       });
     },
-    frameToBounds: t.frameToBounds,
-    syncToStore: t.syncToStore,
-    applyFromStore: t.applyFromStore
+    frameToBounds: s.frameToBounds,
+    syncToStore: s.syncToStore,
+    applyFromStore: s.applyFromStore
   };
 };
-let oe = null, Pe = null;
+let X = null, ge = null, be = null, Fe = null;
 const we = () => {
-  const e = lt(), o = b(), { colorHex: t } = $(e), s = () => (console.debug("useScene init"), oe ? (console.debug("scene already inited"), oe) : (oe = new S.Scene(), r(t.value), o.loaded.scene = !0, oe)), n = () => {
-    if (oe)
-      return oe;
-  }, r = (i) => {
-    if (!oe) throw new Error("Scene has not been initialized");
-    oe.background = new S.Color(i);
+  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 Pe = U(
-    () => t.value,
-    (i) => r(i)
+  return Fe = O(
+    () => s.value,
+    (a) => n(a)
   ), {
-    init: s,
-    get: n,
+    init: i,
+    get: r,
     dispose: () => {
-      o.loaded.scene = !1, Pe == null || Pe(), Pe = null, oe && (oe.traverse((i) => {
-        var d, u;
-        i.isMesh && ((d = i.geometry) == null || d.dispose(), Array.isArray(i.material) ? i.material.forEach((g) => g == null ? void 0 : g.dispose()) : (u = i.material) == null || u.dispose());
-      }), oe.clear(), oe = 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
   };
-}, bo = {
+}, qs = {
   asphalt: {
     ao: "ao.jpg",
     color: "color.jpg",
@@ -953,565 +966,595 @@ const we = () => {
     repeat: 100
   }
 };
-let T = null, Ge = null, He = null, Re = null;
-const Lt = () => {
-  const e = Ve(), { get: o } = we(), { getCamera: t } = Ae(), {
-    visible: s,
-    color: n,
-    texture: r,
-    offset: l
-  } = $(e), i = () => {
-    if (console.debug("useGround init"), T)
-      return console.debug("ground already inited"), T;
-    const C = o(), y = new S.PlaneGeometry(100, 100), B = new S.Color(n.value || 16777215), M = new S.MeshStandardMaterial({
-      color: B,
+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: S.DoubleSide,
+      side: I.DoubleSide,
       roughness: 0.4,
       metalness: 0.3,
-      emissive: B,
+      emissive: E,
       emissiveIntensity: 0.05
       // tweak 0.1–0.6
     });
-    return T = new S.Mesh(y, M), T.rotation.x = -Math.PI / 2, T.receiveShadow = !0, T.visible = s.value, C.add(T), Ge = U(
-      () => s.value,
-      () => d()
-    ), He = U(
-      () => n.value,
-      (z) => f(z)
-    ), Re = U(
+    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,
-      (z) => g(z)
-    ), T;
+      (T) => w(T)
+    ), Ue = O(
+      () => n.value,
+      (T) => p(T)
+    ), k;
   };
-  function d() {
-    if (t().position.y < T.position.y) {
-      T.visible = !1;
+  function a() {
+    if (s().position.y < k.position.y) {
+      k.visible = !1;
       return;
     }
-    T.visible = s.value;
+    k.visible = i.value;
   }
-  function u(C, y = 1, B = 1) {
-    return new S.TextureLoader().load(C, (H) => {
-      H.wrapS = S.RepeatWrapping, H.wrapT = S.RepeatWrapping, H.repeat.set(y, B), H.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 = (C) => {
-    if (!T) throw new Error("Ground has not been initialized");
-    const y = bo[C];
-    if (!y)
-      T.material.map = null, T.material.normalMap = null, T.material.displacementMap = null, T.material.roughnessMap = null, T.material.aoMap = null, T.material.metalnessMap = null, T.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 B = `https://static.figurosity.com/3d/textures/${C}/`, M = y.repeat;
-      T.material.map = u(
-        `${B}${y.color}`,
-        M,
-        M
-      ), T.material.normalMap = u(
-        `${B}${y.normal}`,
-        M,
-        M
-      ), T.material.displacementMap = u(
-        `${B}${y.displacement}`,
-        M,
-        M
-      ), T.material.roughnessMap = u(
-        `${B}${y.roughness}`,
-        M,
-        M
-      ), T.material.aoMap = u(
-        `${B}${y.ao}`,
-        M,
-        M
-      ), y.metalness && (T.material.metalnessMap = u(
-        `${B}${y.metalness}`,
-        M,
-        M
-      )), T.material.displacementScale = 0.1, T.material.displacementBias = -0.05, T.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;
     }
-    T.position.y = l.value, T.geometry.computeBoundingBox(), T.geometry.computeVertexNormals();
-  }, v = () => {
-    if (!T) throw new Error("Ground has not been initialized");
-    return T;
-  }, f = (C) => {
-    if (!T) throw new Error("Ground has not been initialized");
-    T.material.color.set(C);
+    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: i, get: v, setColor: f, updateVisibility: d, dispose: () => {
-    var y, B;
-    if (Ge == null || Ge(), He == null || He(), Re == null || Re(), Ge = null, He = null, Re = null, !T) return;
-    const C = o();
-    C == null || C.remove(T), (y = T.geometry) == null || y.dispose(), Array.isArray(T.material) ? T.material.forEach((M) => M == null ? void 0 : M.dispose()) : (B = T.material) == null || B.dispose(), T = 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;
   } };
-}, yo = (e, o = 16711422) => {
-  const t = new uo(0.1, 0.1, 0.1, 6, 0.01), s = 0.1, n = 0.05, r = new S.ConeGeometry(n, s, 32);
-  t.index || t.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: t.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(t), Bt(r);
-  const l = co([t, r]), i = new S.MeshBasicMaterial({
-    color: o,
+  ), 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
-  }), d = new S.Mesh(l, i);
-  if (d.position.set(0, 0, 0), d.rotateX(Math.PI), e && e.target) {
-    const u = new S.Vector3();
-    e.target.getWorldPosition(u), d.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 d.position.copy(e.position), d;
+  return a.position.copy(e.position), a;
 };
-let We = {}, ie = {}, Y = {}, mt = {}, ye = {}, Be = null, pe = null, qe = [], De = /* @__PURE__ */ new Map();
-const nt = () => {
-  const e = b(), o = Me(), t = de();
-  te(!1);
-  const { subjectLoaded: s, width: n, height: r, selected: l } = $(e), { debug: i, collection: d, advancedMode: u, move: g } = $(o), { get: v } = we(), f = o.property, A = () => {
-    if (pe)
-      return console.warn("lights camera already inited"), pe;
-    const c = v();
-    return Be = y(), pe = B(), d.value.forEach((a) => {
-      const w = a === "key" ? pe : c, { group: E, light: L, directional: j, visualization: D } = M(
-        a,
-        w
-      );
-      Y[a] = L, We[a] = E, mt[a] = j, ye[a] = D, Y[a].castShadow = !0, Y[a].angle = Math.PI / 8, Y[a].penumbra = 0.2, Y[a].shadow.camera.near = 0.5, Y[a].shadow.camera.far = 12, Y[a].shadow.focus = 0.9, Y[a].shadow.mapSize.set(4096, 4096), Y[a].shadow.bias = -2e-4, Y[a].shadow.normalBias = 0.02, Y[a].shadow.radius = 2, Y[a].shadow.camera.updateProjectionMatrix();
-    }), W(), k(), pe;
-  }, C = () => {
-    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 c = v(), a = new S.AmbientLight(f("key", "color"), 0.75);
-    return c.add(a), a;
-  }, B = () => {
-    const c = v(), a = new S.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 a.position.set(0, 0, 1.5), c.add(a), a;
+    return c.position.set(0, 0, 1.5), g.add(c), c;
   };
-  function M(c, a = null) {
-    const w = v(), E = new S.Group(), L = new S.SpotLight(
-      f(c, "color"),
-      f(c, "opacity")
+  function P(g, c = null) {
+    const v = w(), L = new I.Group(), M = new I.SpotLight(
+      h(g, "color"),
+      h(g, "intensity")
     );
-    L.position.set(0, 0, 0);
-    const j = new S.DirectionalLight(f(c, "color"), 0.2);
-    j.position.set(0, 0, 4), H(), L.target.position.set(0, 1, 0), L.target.updateMatrixWorld(), w.add(L.target), E.add(L), E.add(j);
-    const D = yo(
-      L,
-      f(c, "visualizationColor")
-    ), F = o.isVisible(c);
-    return D.visible = F, E.add(D), a.add(E), { group: E, light: L, directional: j, visualization: D };
+    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 z = () => {
-    H(), Q(), R();
+  const G = () => {
+    H(), Z(), b();
   }, H = () => {
-    Be && Be.color.set(f("key", "color"));
-    const c = o.lights[l.value];
-    c && Object.keys(c).forEach((a) => {
-      const w = Y[a];
-      if (!w) return;
-      const E = f(a, "color"), L = f(a, "visible"), j = f(a, "opacity"), D = f(a, "shadow") || !1;
-      if (E && w.color.set(E), w.visible = L, j != null && (w.intensity = j), w.castShadow = D, D) {
-        const F = f(a, "shadowSettings", {});
-        w.shadow.mapSize.set(
-          F.width || 1024,
-          F.height || 1024
-        ), w.shadow.camera.near = F.near || 0.5, w.shadow.camera.far = F.far || 50, w.shadow.needsUpdate = !0;
+    if (!t.lights[l.value]) return;
+    const c = t.seeds[o.value], v = t.ambientScale, L = t.userScale;
+    if (Me && (c != null && c.ambient) && (Me.intensity = c.ambient.intensity * v), c != null && c.env) {
+      const M = w();
+      M && (M.environmentIntensity = c.env.intensity * v);
+    }
+    u.value.forEach((M) => {
+      const x = N[M];
+      if (!x) return;
+      const U = h(M, "color"), he = h(M, "visible"), K = h(M, "shadow") || !1;
+      if (U && x.color.set(U), x.visible = he, c != null && c[M] && (x.intensity = c[M].intensity * L), x.castShadow = K, K) {
+        const re = h(M, "shadowSettings", {});
+        x.shadow.mapSize.set(
+          re.width || 1024,
+          re.height || 1024
+        ), x.shadow.camera.near = re.near || 0.5, x.shadow.camera.far = re.far || 50, x.shadow.needsUpdate = !0;
       }
     });
-  }, Q = () => {
-    const c = o.lights[l.value];
-    c && Object.keys(c).forEach((a) => {
-      if (!ye[a]) return console.warn(`${a} does not exist`);
-      const w = o.isVisible(a);
-      ye[a].visible = w, ye[a].material.color.set(f(a, "color"));
+  }, Z = () => {
+    t.lights[l.value] && u.value.forEach((c) => {
+      if (!ie[c]) return console.warn(`${c} does not exist`);
+      const v = t.isVisible(c);
+      ie[c].visible = v, ie[c].material.color.set(h(c, "color"));
     });
-  }, R = () => {
-    const c = o.lights[l.value];
-    c && Object.keys(c).forEach((a) => {
-      const w = f(a, "debug") || i.value;
-      !ie[a] && w && (ie[a] = I(a, Y[a]), Y[a].add(ie[a])), ie[a] && !w && (ie[a] = N(ie[a]));
+  }, 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]));
     });
-  }, I = (c, a) => {
-    const w = v(), E = new S.SpotLightHelper(
-      a,
-      f(c, "visualizationColor")
+  }, m = (g, c) => {
+    const v = w(), L = new I.SpotLightHelper(
+      c,
+      h(g, "visualizationColor")
     );
-    return w.add(E), E;
-  }, N = (c) => {
-    const a = v();
-    if (!(!a || !c))
-      return a.remove(c), c.dispose(), c = null, c;
-  }, W = () => {
-    const c = C(), a = t.bounds;
-    if (!a) return;
-    const w = new S.Vector3(
-      a.center.x,
-      a.center.y,
-      // + bounds.size.y + 0.05,
-      a.center.z
-    ), E = new S.Vector3().subVectors(w, c.position).normalize(), L = new S.Vector3(
-      E.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,
-      E.z
-    ).normalize(), j = new S.Vector3(
-      -L.z,
+      M.z
+    ).normalize(), U = new I.Vector3(
+      -x.z,
       0,
-      L.x
-    ), F = 2 * c.position.distanceTo(w) / Math.sqrt(3), _ = 1, G = w.clone().add(j.clone().multiplyScalar(-F / _)).add(E.clone().multiplyScalar(Math.sqrt(3) * F / 2)), X = w.clone().add(j.clone().multiplyScalar(F / _)).add(E.clone().multiplyScalar(Math.sqrt(3) * F / 2));
-    We.fill.position.copy(G), We.back.position.copy(X), d.value.forEach((J) => {
-      var K, le, ue;
-      const p = Y[J];
-      p.shadow.needsUpdate = !0, p.target.position.copy(w), p.target.updateMatrixWorld(), (K = ye[J]) == null || K.lookAt(w), (ue = (le = ie[J]) == null ? void 0 : le.update) == null || ue.call(le);
+      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);
     });
-  }, x = (c) => {
-    const a = o.lights[c];
-    if (!a) return;
-    const w = `watcher-${c}`;
-    if (De.has(w)) return;
-    const E = [];
-    Object.keys(a).forEach((j) => {
-      var D, F;
-      (D = a[j]) != null && D.color && E.push(() => a[j].color), (F = a[j]) != null && F.visible && E.push(() => a[j].visible);
-    });
-    const L = U(
-      () => E.map((j) => j()),
-      z,
+  }, z = (g) => {
+    const c = `watcher-${g}`;
+    if (Te.has(c)) return;
+    const v = O(
+      () => [t.lights[g], t.options[g]],
+      G,
       { deep: !0 }
     );
-    De.set(w, L);
-  }, V = (c) => {
-    const a = `watcher-${c}`, w = De.get(a);
-    w && (w(), De.delete(a));
-  }, k = () => {
-    qe.push(
-      U(
-        () => [u.value, l.value, g.value],
-        () => z()
+    Te.set(c, v);
+  }, j = (g) => {
+    const c = `watcher-${g}`, v = Te.get(c);
+    v && (v(), Te.delete(c));
+  }, Y = () => {
+    De.push(
+      O(
+        () => [p.value, o.value, D.value],
+        () => G()
+      )
+    ), De.push(
+      O(
+        () => [t.ambientScale, t.userScale],
+        () => G()
       )
-    ), qe.push(
-      U(
-        () => s.value,
-        (c) => {
-          c === !0 && W();
+    ), De.push(
+      O(
+        () => i.value,
+        (g) => {
+          g === !0 && F();
         }
       )
-    ), qe.push(
-      U(
+    ), De.push(
+      O(
         () => l.value,
-        (c, a) => {
-          a && V(a), c != null && (x(c), Ht(z));
+        (g, c) => {
+          c && j(c), g != null && (z(g), ns(G));
         },
         { immediate: !0 }
       )
     );
   };
   return {
-    init: A,
-    updatePosition: W,
-    getCamera: C,
+    init: f,
+    updatePosition: F,
+    getCamera: S,
     dispose: () => {
-      const c = v();
-      c && (qe.forEach((a) => a()), qe = [], De.forEach((a) => a()), De.clear(), Object.values(Y).forEach((a) => c.remove(a)), Object.values(mt).forEach((a) => c.remove(a)), Object.values(ie).forEach((a) => c.remove(a)), Object.values(ye).forEach((a) => {
-        var w, E, L, j;
-        c.remove(a), (E = (w = a.geometry) == null ? void 0 : w.dispose) == null || E.call(w), (j = (L = a.material) == null ? void 0 : L.dispose) == null || j.call(L);
-      }), Be && c.remove(Be), We = {}, ie = {}, Y = {}, mt = {}, ye = {}, Be = 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
   };
-}, Mt = () => {
-  const e = Me(), o = st(), { getCamera: t } = nt();
+}, Ws = 0.4, Xs = 0.25, Dt = () => {
+  const e = fe(), t = rt(), { getCamera: s } = it();
   return {
     activate: () => {
-      o.setMode({
+      t.setMode({
         mode: "lights",
-        camera: t(),
+        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: o.frameToBounds,
-    syncToStore: o.syncToStore,
-    applyFromStore: o.applyFromStore
+    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 So = () => {
+let le = null;
+const Zs = () => {
   const e = () => {
-    const t = b(), s = de(), { loadingUrl: n } = $(s);
-    return console.log("laodingUrl", n), me = new S.LoadingManager(), me.onStart = function(r, l, i) {
-      n.url = r, t.loading.active = !0, t.loading.url = r, t.loading.percent = 0;
-    }, me.onError = () => {
-      n.url = null, t.loading.active = !1, t.loading.url = null;
-    }, me.onLoad = function() {
-      n.url = null, t.loading.active = !1, t.loading.url = null, t.loading.percent = 100;
-    }, me.onProgress = function(r, l, i) {
-      t.loading.percent = Math.round(l / i * 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 O = null, Oe = null, Ue = null;
-const xt = () => {
-  const e = b(), { get: o } = we(), { getCamera: t } = Ae(), { width: s, height: n, subjectLoaded: r } = $(e);
-  function l(g) {
-    return console.debug("useRenderer init"), O ? (console.debug("renderer already inited"), O) : (O = new S.WebGLRenderer({ antialias: !0, alpha: !0 }), O.setSize(s.value, n.value), O.toneMapping = S.ACESFilmicToneMapping, O.toneMappingExposure = 1.2, O.shadowMap.enabled = !0, O.shadowMap.type = S.PCFSoftShadowMap, O.gammaFactor = 2.2, O.gammaOutput = !0, O.outputColorSpace = S.SRGBColorSpace, g && g.appendChild(O.domElement), e.loaded.renderer = !0, O);
+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 i = () => {
-    if (!O) throw new Error("Renderer has not been initialized");
-    return O;
-  }, d = () => {
-    const g = o(), v = t();
-    !g || !v || O.render(g, v);
+  const l = () => {
+    if (!_) throw new Error("Renderer has not been initialized");
+    return _;
+  }, a = (D) => {
+    _ && (_.toneMappingExposure = D);
+  }, u = () => {
+    const D = t(), w = s();
+    !D || !w || _.render(D, w);
   };
-  Oe = U(
-    () => [s.value, n.value],
-    ([g, v]) => {
-      !g || !v || !O || O.setSize(g, v);
+  Oe = O(
+    () => [i.value, r.value],
+    ([D, w]) => {
+      !D || !w || !_ || _.setSize(D, w);
     }
-  ), Ue = U(
-    () => r.value,
-    () => d()
+  ), $e = O(
+    () => n.value,
+    () => u()
   );
-  function u() {
-    console.debug("renderer disposed"), e.loaded.renderer = !1, Oe == null || Oe(), Ue == null || Ue(), Oe = null, Ue = null, O && (O.domElement.parentElement && O.domElement.parentElement.removeChild(O.domElement), O.dispose(), O = 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: i,
-    dispose: u,
-    render: d
+    init: o,
+    get: l,
+    dispose: p,
+    render: u,
+    setExposure: a
   };
-}, jt = (e, o, t = {}) => {
-  const { removeSpecular: s = !1, removeShininess: n = !1 } = t;
-  e && e.traverse((r) => {
-    if (!r.isMesh) return;
-    (Array.isArray(r.material) ? r.material : [r.material]).forEach((i) => {
-      i && (i.color && i.color.set(o), s && i.specular && i.specular.set(0), n && typeof i.shininess == "number" && (i.shininess = 0), i.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);
     });
   });
+}, 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 ce = null, _e = null, ze, Ee, ht = 0;
-const Ft = () => {
-  const { get: e } = So(), o = de(), t = b(), s = Ve(), { selected: n } = $(t), { color: r, url: l, loadingUrl: i } = $(o), { offset: d } = $(s), { getCamera: u } = Ae(), { get: g } = we(), { get: v, render: f } = xt();
-  new S.Vector3();
-  const A = (R, I) => {
-    const N = I.load(
-      "https://static.figurosity.com/3d/textures/stainless-steel/color.jpg"
-    );
-    return N.colorSpace = S.SRGBColorSpace, N.anisotropy = R.capabilities.getMaxAnisotropy(), _e = new S.MeshBasicMaterial({
-      color: 16777215
-    }), _e;
-  }, C = (R) => {
-    const { frameToBounds: I } = wt(), { frameToBounds: N } = Mt(), W = ++ht;
-    t.subjectLoaded = !1, y();
-    const x = v(), V = e(), k = new S.TextureLoader();
-    A(x, k);
-    const P = new po(V);
-    P.setWithCredentials(!0), P.manager.setURLModifier((c) => c), P.load(R, (c) => {
-      if (W !== ht) {
-        c.traverse((_) => {
-          var X;
-          if (!_.isMesh) return;
-          (X = _.geometry) == null || X.dispose();
-          const G = _.material;
-          Array.isArray(G) ? G.forEach((J) => J == null ? void 0 : J.dispose()) : G == null || G.dispose();
+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;
-      } else
-        console.debug("currentLoad === loadVersion"), console.debug(`${W} === ${ht}`);
-      if (!c) {
-        console.debug("model not loaded");
-        return;
       }
-      ce = c;
-      const a = g(), w = u(), E = new S.Group();
-      E.name = "FBXSubject", E.add(c), c.traverse((_) => {
-        _.isMesh && (_.castShadow = !0, _.receiveShadow = !0);
-      }), jt(c, r.value, {
-        removeSpecular: !0,
-        removeShininess: !0
-      });
-      const L = new S.Box3().setFromObject(c), j = new S.Vector3();
-      L.getSize(j), Math.max(j.x, j.y, j.z), c.scale.setScalar(0.01), c.updateMatrixWorld(!0);
-      const D = Dt(c);
-      E.position.y -= D.bottom, E.updateMatrixWorld(!0), a.add(E), ce = E;
-      const F = Dt(E);
-      o.setBounds(F), f(a, w), I(F), N(F), t.subjectLoaded = !0;
-    });
-  }, y = () => {
-    if (console.log("removeSubject", ce), !ce) return;
-    g().remove(ce), ce.traverse((I) => {
-      var W;
-      if (!I.isMesh) return;
-      (W = I.geometry) == null || W.dispose();
-      const N = I.material;
-      Array.isArray(N) ? N.forEach((x) => x == null ? void 0 : x.dispose()) : N == null || N.dispose();
-    }), ce = null, t.subjectLoaded = !1;
-  }, B = () => {
-    _e && (_e.dispose(), _e = null);
-  }, M = (R) => {
-    jt(ce, R, {
-      removeSpecular: !0,
-      removeShininess: !0
+      if (!m)
+        return;
+      ve = m, ee = to[(g = t.model) == null ? void 0 : g.slug] || lt, T(ee.exposure), P.seedFromRecipe(s.selected, ee);
+      const B = p(), F = u(), z = new I.Group();
+      z.name = "GLBSubject", z.add(m);
+      const j = /brow|lash/i;
+      m.traverse((c) => {
+        if (!c.isMesh) return;
+        c.castShadow = !0, c.receiveShadow = !0;
+        const v = Array.isArray(c.material) ? c.material : [c.material], L = `${c.name} ${v.map((x) => x == null ? void 0 : x.name).join(" ")}`, M = j.test(L);
+        v.forEach((x) => {
+          x && (ee.roughnessFloor !== null && typeof x.roughness == "number" && (x.roughness = Math.max(
+            x.roughness,
+            ee.roughnessFloor
+          )), ee.metalness !== null && typeof x.metalness == "number" && (x.metalness = ee.metalness), ee.envMapIntensity !== null && typeof x.envMapIntensity == "number" && (x.envMapIntensity = ee.envMapIntensity), x.transparent && M && (x.alphaTest = 0.2, x.depthWrite = !0), x.needsUpdate = !0);
+        });
+      }), 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;
     });
-  }, z = () => ce, H = () => {
-    if (ze || Ee) {
-      console.warn("useSubject.init() called more than once");
+  }, 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;
     }
-    ze = U(
+    ke = O(
       () => n.value,
-      (R, I) => {
-        !R || R === I || (console.log("url", l.value), l.value && C(l.value));
+      (y, T) => {
+        !y || y === T || o.value && w(o.value);
       },
       { immediate: !0 }
-    ), Ee = U(
-      () => r.value,
-      (R) => M(R)
     );
-  }, Q = () => {
-    console.debug("fbx disposed"), ze == null || ze(), Ee == null || Ee(), ze = null, Ee = null, y(), B();
+  }, E = () => {
+    ke == null || ke(), ke = null, h(), ce == null || ce.dispose(), ce = null;
   };
-  return Rt(() => {
-    Q();
-  }), { init: H, get: z, dispose: Q, updateColor: M };
-}, xo = (e, o, t = 500) => {
-  const s = e.material;
-  s.transparent = !0;
-  const n = s.opacity, r = performance.now(), l = (i) => {
-    const d = i - r, u = Math.min(d / t, 1), g = n + (o - 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 q = null, $e = null, Ie = null, Ne = null, Xe = null;
-const Pt = () => {
-  const e = ke(), o = Ve(), t = de(), { show: s, lineColor: n, centerLineColor: r, divisions: l, size: i, opacity: d } = $(e), { offset: u } = $(o), { bounds: g } = $(t), { get: v } = we(), f = () => {
-    const x = Q(n.value), V = Q(r.value), { positions: k, colors: P } = A({
-      size: i.value,
-      divisions: l.value,
-      color: x,
-      centerColor: V
-    }), c = C(k, P), a = y(d.value);
-    return new S.LineSegments(c, a);
-  }, A = ({ size: x, divisions: V, color: k, centerColor: P }) => {
-    const c = x / 2, a = x / V, w = [], E = [], L = Math.floor(V / 2), j = (D, F, _, G) => {
-      w.push(D, F, _);
-      const X = G ? P : k;
-      E.push(X.r, X.g, X.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 D = 0; D <= V; D++) {
-      const F = -c + D * a, _ = D === L;
-      for (let G = 0; G <= V; G++) {
-        const X = -c + G * a, p = _ || G === L;
-        j(-c, F, X, p), j(+c, F, X, p);
+    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 D = 0; D <= V; D++) {
-      const F = -c + D * a, _ = D === L;
-      for (let G = 0; G <= V; G++) {
-        const X = -c + G * a, p = _ || G === L;
-        j(F, -c, X, p), j(F, +c, X, p);
+    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 D = 0; D <= V; D++) {
-      const F = -c + D * a, _ = D === L;
-      for (let G = 0; G <= V; G++) {
-        const X = -c + G * a, p = _ || G === L;
-        j(F, X, -c, p), j(F, X, +c, p);
+    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: w, colors: E };
-  }, C = (x, V) => {
-    const k = new S.BufferGeometry();
-    return k.setAttribute(
+    return { positions: Y, colors: q };
+  }, w = (b, m) => {
+    const B = new I.BufferGeometry();
+    return B.setAttribute(
       "position",
-      new S.Float32BufferAttribute(x, 3)
-    ), k.setAttribute("color", new S.Float32BufferAttribute(V, 3)), k;
-  }, y = (x) => new S.LineBasicMaterial({
+      new I.Float32BufferAttribute(b, 3)
+    ), B.setAttribute("color", new I.Float32BufferAttribute(m, 3)), B;
+  }, h = (b) => new I.LineBasicMaterial({
     transparent: !0,
-    opacity: x,
+    opacity: b,
     depthWrite: !1,
-    blending: S.NormalBlending,
-    vertexColors: !1
-  }), B = () => {
-    q && H(s.value);
-  }, M = () => {
-    const x = v();
-    q = f(n.value), N(), x.add(q), z(0);
-  }, z = (x) => {
-    q && (q.material.transparent = !0, x = s.value ? x : 0, q.material.opacity = x);
-  }, H = (x) => {
-    const V = x ? d.value : 0;
-    xo(q, V, 500);
-  }, Q = (x) => ({
-    r: (x >> 16 & 255) / 255,
-    g: (x >> 8 & 255) / 255,
-    b: (x & 255) / 255
-  }), R = (x, V) => {
-    if (!q) return;
-    const k = Q(x), P = Q(V), c = q.geometry.attributes.color, a = q.geometry.attributes.position, w = a.count, E = i.value / 2, L = i.value / l.value, j = Math.floor(l.value / 2);
-    for (let D = 0; D < w; D++) {
-      const F = a.getX(D), _ = a.getY(D), G = a.getZ(D), X = Math.round((F + E) / L), J = Math.round((_ + E) / L), p = Math.round((G + E) / L), le = X === j || J === j || p === j ? k : P;
-      c.setXYZ(D, le.r, le.g, le.b);
+    blending: I.NormalBlending,
+    vertexColors: !0
+  }), f = () => {
+    V && y(i.value);
+  }, S = () => {
+    const b = u();
+    V = p(), H(), b.add(V), E(0);
+  }, E = (b) => {
+    V && (V.material.transparent = !0, b = i.value ? b : 0, V.material.opacity = b);
+  }, y = (b) => {
+    const m = b ? o.value : 0;
+    so(V, m, 500);
+  }, T = (b) => ({
+    r: (b >> 16 & 255) / 255,
+    g: (b >> 8 & 255) / 255,
+    b: (b & 255) / 255
+  }), P = (b, m) => {
+    if (!V) return;
+    const B = T(b), F = T(m), z = V.geometry.attributes.color, j = V.geometry.attributes.position, Y = j.count, q = n.value / 2, g = n.value / r.value, c = Math.floor(r.value / 2);
+    for (let v = 0; v < Y; v++) {
+      const L = j.getX(v), M = j.getY(v), x = j.getZ(v), U = Math.round((L + q) / g), he = Math.round((M + q) / g), K = Math.round((x + q) / g), Re = U === c || he === c || K === c ? B : F;
+      z.setXYZ(v, Re.r, Re.g, Re.b);
     }
-    c.needsUpdate = !0;
-  }, I = () => {
-    const x = v();
-    q && (x.remove(q), q.geometry.dispose(), q.material.dispose(), q = null), q = f(n.value), N(), x.add(q);
-  }, N = () => {
-    var V;
-    const x = ((V = g.value) == null ? void 0 : V.bottom) || 0;
-    q.position.set(0, x + i.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 $e = U(
-    () => [i.value, l.value],
-    ([x, V], [k, P]) => {
-      x === k && V === P || (I(), B());
+  return Ne = O(
+    () => [n.value, r.value],
+    ([b, m], [B, F]) => {
+      b === B && m === F || (G(), f());
     },
     { flush: "post" }
-  ), Ie = U(
-    () => s.value,
+  ), He = O(
+    () => i.value,
     () => {
-      B();
+      f();
     },
     { flush: "post" }
-  ), Ne = U(
-    () => d.value,
-    (x) => {
-      z(x);
+  ), qe = O(
+    () => o.value,
+    (b) => {
+      E(b);
     },
     { flush: "post" }
-  ), Xe = U(
-    () => [n.value, r.value],
-    ([x, V]) => {
-      R(V, x);
-    }
   ), {
-    init: M,
-    showHideGrid: H,
-    updateGridColors: R,
+    init: S,
+    showHideGrid: y,
+    updateGridColors: P,
     dispose: () => {
-      var V, k;
-      const x = v();
-      $e == null || $e(), Ie == null || Ie(), Ne == null || Ne(), Xe == null || Xe(), $e = null, Ie = null, Ne = null, Xe = null, q && (x.remove(q), (V = q.geometry) == null || V.dispose(), Array.isArray(q.material) ? q.material.forEach((P) => P == null ? void 0 : P.dispose()) : (k = q.material) == null || k.dispose(), q = 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);
     }
   };
-}, Co = { class: "three-dimension-tool" }, wo = ["data-id"], Mo = /* @__PURE__ */ Object.assign({
+}, no = { class: "three-dimension-tool" }, ro = ["data-id"], io = /* @__PURE__ */ Object.assign({
   name: "ThreeDimensionTool",
   slug: "three-dimension-tool",
   inheritAttrs: !1
@@ -1521,201 +1564,182 @@ const Pt = () => {
     id: Number
   },
   setup(e) {
-    const o = e;
-    let t = null;
-    const s = h(() => Number(o.id)), n = b(), r = Me(), l = de(), { move: i } = $(r), d = te(null), u = te(!1);
-    let g, v, f;
-    const A = st(), C = wt(), y = Mt(), { init: B } = we(), { init: M } = xt(), { init: z } = Ae(), { init: H, updateVisibility: Q } = Lt(), { init: R, updatePosition: I } = nt(), { init: N } = Ft(), { init: W } = Pt(), x = () => {
-      if (!d.value || u.value) {
+    const t = e;
+    let s = null;
+    const i = C(() => Number(t.id)), r = A(), n = ct(), o = fe(), l = me(), { move: a } = $(o), u = pe(null), p = pe(!1);
+    let D, w, h;
+    const f = rt(), S = Mt(), E = Dt(), { init: y, setEnvironment: T } = we(), { init: P } = at(), { init: G } = Le(), { init: H, updateVisibility: Z } = Pt(), { init: b, updatePosition: m } = it(), { init: B } = Rt(), { init: F } = Gt(), z = () => {
+      if (!u.value || p.value) {
         console.warn("Canvas element not found");
         return;
       }
-      u.value = !0, f = B(), v = M(d.value), N(), g = z(), R(), W(), H(), A.init(v), V();
-    }, V = () => {
-      u.value && (i.value !== t && (t = i.value, i.value ? y.activate() : C.activate()), A.update(), i.value ? (I(), y.syncToStore()) : C.syncToStore(), Q(), v.render(f, g), requestAnimationFrame(V));
-    }, k = () => {
-      if (d.value) {
-        const P = window.innerWidth, c = window.innerHeight;
-        n.$patch({ width: P, height: c }), d.value.style.height = c + "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 Zt(() => {
-      console.log("onMounted", d.value), x(), window.addEventListener("resize", k), k();
-    }), U(
+    return jt(() => {
+      console.log("onMounted", u.value), z(), window.addEventListener("resize", Y), Y();
+    }), O(
       () => l.bounds,
-      (P) => {
-        P && (A.frameToBounds(P), y.activate(), y.frameToBounds(P), y.syncToStore(), C.activate(), C.frameToBounds(P), C.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()));
       }
-    ), U(
-      () => n.subjectLoaded,
-      (P) => {
-        if (!P) return;
-        const c = l.bounds;
-        if (!c) return;
-        A.frameToBounds(c);
-        const a = A.get();
-        a.update(), a.saveState();
+    ), O(
+      () => r.subjectLoaded,
+      (q) => {
+        if (!q) return;
+        const g = l.bounds;
+        if (!g) return;
+        n.hasRig || (f.frameToBounds(g), n.markFramed());
+        const c = f.get();
+        c.update(), c.saveState();
       }
-    ), Rt(() => {
-      console.debug("ThreeDimensionTool unMounted"), window.removeEventListener("resize", this), u.value = !1, Ft().dispose(), Pt().dispose(), Lt().dispose(), nt().dispose(), st().dispose(), Ae().dispose(), we().dispose(), xt().dispose();
-    }), (P, c) => (Je(), Kt("div", Co, [
-      gt("", !0),
-      Yt("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: d,
-        "data-id": s.value
-      }, null, 8, wo)
+        ref: u,
+        "data-id": i.value
+      }, null, 8, ro)
     ]));
   }
-}), Gt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-CIql5zKW.js") }), ee = (e = "../i18n") => {
-  const o = so(), t = te({}), s = h(() => o.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(t.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 U(
-    () => s.value,
+  return O(
+    () => i.value,
     () => {
-      n();
+      r();
     },
     { immediate: !0 }
-  ), Qt(() => {
-    n();
-  }), { lang: t };
-}, be = ({ tab: e = se, store: o, options: t = [] }) => {
-  const s = ao(), n = b(s), r = h({
-    get: () => n.isExpanded(t),
-    set: (d) => {
-      d && 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 = h(() => o && o.changed);
-  return { click: () => n.setActive(e), expanded: r, selected: l };
-}, kt = Z({
+  }), 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: o, emit: t }) {
-    function s() {
-      t("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 m("div", { class: "tool-reset-button q-pa-md" }, m(qt, r));
+      return d("div", { class: "tool-reset-button q-pa-md" }, d(Ut, n));
     }
-    return () => n();
+    return () => r();
   }
-}), _t = Z({
+}), Yt = R({
   name: "TdColorsSection",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = b(), r = lt(), l = de(), i = Ve(), { active: d } = $(n), u = te(!1), g = te(!1), v = te(!1), f = h(
+  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 k;
-        return (k = s.value.td) == null ? void 0 : k.components.colors.items.background;
+        var b;
+        return (b = i.value.td) == null ? void 0 : b.components.colors.items.background;
       }
-    ), A = h(
+    ), D = C(
       () => {
-        var k;
-        return (k = s.value.td) == null ? void 0 : k.components.colors.items.subject;
+        var b;
+        return (b = i.value.td) == null ? void 0 : b.components.colors.items.ground;
       }
-    ), C = h(
-      () => {
-        var k;
-        return (k = s.value.td) == null ? void 0 : k.components.colors.items.ground;
-      }
-    ), y = h(() => ({
-      key: A.value,
-      label: A.value,
-      type: "none",
-      icon: "f_subject",
-      size: "sm",
-      color: l.colorHex,
-      onClick: () => g.value = !0
-    })), B = h(() => ({
-      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
-    })), M = h(() => ({
-      key: C.value,
-      label: C.value,
+      color: n.colorHex,
+      onClick: () => a.value = !0
+    })), h = C(() => ({
+      key: D.value,
+      label: D.value,
       type: "none",
       icon: "f_ground",
       size: "sm",
-      color: i.colorHex,
-      onClick: () => v.value = !0
-    })), z = h({
-      get: () => v.value || u.value || g.value,
-      set: (k) => v.value = u.value = g.value = !1
-    }), H = h({
-      get: () => v.value ? i.colorHex : u.value ? r.colorHex : l.colorHex,
-      set: (k) => {
-        if (console.log("showGround", v.value), v.value) {
-          console.log("val", k), i.setColorHex(k);
-          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(k);
+          o.setColorHex(b);
           return;
         }
-        l.setColorHex(k);
+        n.setColorHex(b);
       }
-    }), Q = h(() => ({
+    }), E = C(() => ({
       class: "td-colors-tool q-pa-xs row justify-center items-center q-gutter-md",
-      style: z.value ? "display: none" : ""
-    })), R = h(() => ({
-      modelValue: H.value,
-      "onUpdate:modelValue": (k) => H.value = k,
-      show: z.value,
-      "onUpdate:show": (k) => z.value = k,
-      label: I.value
-    })), I = h(() => v.value ? C.value : u.value ? f.value : A.value), N = () => {
-      r.reset(), l.resetColor(), i.reset();
-    }, W = h(() => l.changed || i.changed || r.changed), x = h(() => ({
+      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: N,
-      style: z.value ? "display: none" : "",
-      disable: !W.value
+      onClick: P,
+      style: f.value ? "display: none" : "",
+      disable: !G.value
     }));
-    U(d, (k) => {
-      k !== se && (z.value = !1);
+    O(l, (b) => {
+      b !== se && (f.value = !1);
     });
-    function V() {
-      return m("div", {
+    function Z() {
+      return d("div", {
         class: "full-width"
-        // style: pickerShow.value ? 'display: none' : '',
       }, [
-        m("div", Q.value, [
-          m(re, y.value),
-          m(re, B.value),
-          m(re, M.value)
+        d("div", E.value, [
+          d(Ce, w.value),
+          d(Ce, h.value)
         ]),
-        m(kt, x.value),
-        m(Ot, R.value)
+        d(Tt, H.value),
+        d(fs, y.value)
       ]);
     }
-    return () => V();
+    return () => Z();
   }
-}), ko = Z({
+}), ao = R({
   name: "TdColorsExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1723,101 +1747,103 @@ const Pt = () => {
     label: { type: String, required: !1 }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = Ut(), { expanded: r, selected: l } = be({
-      store: n,
+  setup(e, { slots: t, emit: s }) {
+    const { lang: i } = W(), r = It(), { expanded: n, selected: o } = oe({
+      store: r,
       options: se,
       tab: se
-    }), i = h(() => {
+    }), 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;
     });
-    h({
+    C({
       get: () => e.modelValue,
-      set: (u) => t("update:modelValue", u)
+      set: (u) => s("update:modelValue", u)
     });
-    function d() {
+    function a() {
       const u = {
         class: "td-colors-expansion",
         "data-cy": "td-colors-expansion",
-        modelValue: r.value,
-        "onUpdate:modelValue": (g) => r.value = g,
-        label: i.value,
-        selected: l.value,
+        modelValue: n.value,
+        "onUpdate:modelValue": (p) => n.value = p,
+        label: l.value,
+        selected: o.value,
         icon: "f_palette"
       };
-      return m(rt, u, () => m(_t));
+      return d(We, u, () => d(Yt));
     }
-    return () => d();
+    return () => a();
   }
-}), $t = Z({
+}), Qt = R({
   name: "TdGridSection",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = ke(), r = h(
+  setup(e, { slots: t, emit: s }) {
+    const { lang: i } = W(), r = Ee(), n = C(
       () => {
-        var f, A;
-        return l.value ? ((f = s.value.td) == null ? void 0 : f.components.grid.toggle.off) || "" : ((A = s.value.td) == null ? void 0 : A.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 = h({
-      get: () => n.show,
-      set: (f) => n.setProperty("show", f)
-    }), i = h({
-      get: () => n.opacity,
-      set: (f) => n.setProperty("opacity", f)
-    }), d = h({
-      get: () => n.size,
-      set: (f) => n.setProperty("size", f)
-    }), u = h({
-      get: () => n.divisions,
-      set: (f) => n.setProperty("divisions", f)
-    }), g = h(() => ({
+    ), 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 v() {
-      const f = {
+    function D() {
+      const w = {
         class: "td-grid-tool"
-      }, A = {
+      }, h = {
         access: "grd",
         // drawer: !props.noIcons,
-        modelValue: l.value,
-        "onUpdate:modelValue": (z) => l.value = z,
-        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,
-      }, C = {
+      }, f = {
         title: "Opacity",
         icon: "f_opacity",
         min: 1,
         max: 100,
         initial: 50,
-        modelValue: i.value * 100,
-        "onUpdate:modelValue": (z) => i.value = z / 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: d.value * 100,
-        "onUpdate:modelValue": (z) => d.value = z / 100
-      }, B = {
+        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": (z) => u.value = z
-      }, M = [m(Ze, A)];
-      return l.value && (M.push(m(dt, y)), M.push(m(dt, B)), M.push(m(dt, C)), M.push(m(kt, g.value))), m("div", f, M);
+        "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 () => v();
+    return () => D();
   }
-}), Bo = Z({
+}), lo = R({
   name: "TdGridExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1825,34 +1851,34 @@ const Pt = () => {
     label: { type: String, required: !1 }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = ke(), { expanded: r, selected: l } = be({
-      store: n,
+  setup(e, { slots: t, emit: s }) {
+    const { lang: i } = W(), r = Ee(), { expanded: n, selected: o } = oe({
+      store: r,
       options: Se,
       tab: Se
-    }), i = h(() => {
+    }), 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;
     });
-    h({
+    C({
       get: () => e.modelValue,
-      set: (u) => t("update:modelValue", u)
+      set: (u) => s("update:modelValue", u)
     });
-    function d() {
+    function a() {
       const u = {
         class: "td-colors-expansion",
         "data-cy": "td-colors-expansion",
-        modelValue: r.value,
-        "onUpdate:modelValue": (g) => r.value = g,
-        label: i.value,
-        selected: l.value,
+        modelValue: n.value,
+        "onUpdate:modelValue": (p) => n.value = p,
+        label: l.value,
+        selected: o.value,
         icon: "f_grid"
       };
-      return m(rt, u, () => m($t));
+      return d(We, u, () => d(Qt));
     }
-    return () => d();
+    return () => a();
   }
-}), It = Z({
+}), Jt = R({
   name: "TdLightsSection",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1860,172 +1886,90 @@ const Pt = () => {
     label: { type: String, required: !1 }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = Me(), r = b(), l = nt(), { active: i } = $(r), d = h({
-      get: () => n.advancedMode,
-      set: (p) => n.setAdvanced(p)
-    }), u = h({
-      get: () => n.move,
-      set: (p) => n.setMove(p)
-    }), g = h(
+  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 p, K;
-        return n.advancedMode ? ((p = s.value.td) == null ? void 0 : p.components.lights.toggles.advanced.off) || "" : ((K = s.value.td) == null ? void 0 : K.components.lights.toggles.advanced.on) || "";
+        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) || "";
       }
-    ), v = h(() => ({
-      modelValue: d.value,
-      "onUpdate:modelValue": (p) => d.value = p,
-      label: g.value
-    })), f = h(
+    ), p = C(() => ({
+      modelValue: a.value,
+      "onUpdate:modelValue": (m) => a.value = m,
+      label: u.value
+    })), D = C(
       () => {
-        var p, K;
-        return n.move ? ((p = s.value.td) == null ? void 0 : p.components.lights.toggles.position.off) || "" : ((K = s.value.td) == null ? void 0 : K.components.lights.toggles.position.on) || "";
+        var m;
+        return ((m = e.value.td) == null ? void 0 : m.components.lights.ambientIntensity) || "";
       }
-    ), A = h(() => ({
-      modelValue: u.value,
-      "onUpdate:modelValue": (p) => u.value = p,
-      label: f.value
-    })), C = h(
+    ), w = C(
       () => {
-        var p;
-        return ((p = s.value.td) == null ? void 0 : p.components.lights.color) || "";
+        var m;
+        return ((m = e.value.td) == null ? void 0 : m.components.lights.userIntensity) || "";
       }
-    ), y = te(!1), B = h(() => ({
-      key: C.value,
-      label: C.value,
-      type: "none",
-      icon: "f_bulb_light",
-      size: "sm",
-      color: n.colorHex("key"),
-      onClick: () => y.value = !0
-    })), M = h(
-      () => {
-        var p;
-        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.key) || "";
-      }
-    ), z = te(!1), H = h({
-      get: () => n.colorHex("key"),
-      set: (p) => n.setColorHex("key", p)
-    }), Q = h(() => ({
-      key: M.value,
-      label: M.value,
-      type: "none",
-      icon: "f_bulb_key",
-      size: "sm",
-      color: H.value,
-      onClick: () => z.value = !0
-    })), R = h(
-      () => {
-        var p;
-        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.back) || "";
-      }
-    ), I = te(!1), N = h({
-      get: () => n.colorHex("back"),
-      set: (p) => n.setColorHex("back", p)
-    }), W = h(() => ({
-      key: R.value,
-      label: R.value,
-      type: "none",
-      icon: "f_bulb_back",
-      size: "sm",
-      color: N.value,
-      onClick: () => I.value = !0,
-      disable: !V.value
-    })), x = h(
-      () => {
-        var p, K;
-        return V.value ? ((p = s.value.td) == null ? void 0 : p.components.lights.toggles.back.off) || "" : ((K = s.value.td) == null ? void 0 : K.components.lights.toggles.back.on) || "";
-      }
-    ), V = h({
-      get: () => n.property("back", "visible", !0),
-      set: (p) => n.setProperty("back", "visible", p)
-    }), k = h(() => ({
-      modelValue: V.value,
-      "onUpdate:modelValue": (p) => V.value = p,
-      label: x.value
-    })), P = h(
-      () => {
-        var p;
-        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.fill) || "";
-      }
-    ), c = te(!1), a = h({
-      get: () => n.colorHex("fill"),
-      set: (p) => n.setColorHex("fill", p)
-    }), w = h(() => ({
-      key: P.value,
-      label: P.value,
-      type: "none",
-      icon: "f_bulb_fill",
-      size: "sm",
-      color: a.value,
-      onClick: () => c.value = !0,
-      disable: !L.value
-    })), E = h(
-      () => {
-        var p, K;
-        return L.value ? ((p = s.value.td) == null ? void 0 : p.components.lights.toggles.fill.off) || "" : ((K = s.value.td) == null ? void 0 : K.components.lights.toggles.fill.on) || "";
-      }
-    ), L = h({
-      get: () => n.property("fill", "visible", !0),
-      set: (p) => n.setProperty("fill", "visible", p)
-    }), j = h(() => ({
-      modelValue: L.value,
-      "onUpdate:modelValue": (p) => L.value = p,
-      label: E.value
-    })), D = h({
-      get: () => y.value || z.value || c.value || I.value,
-      set: (p) => y.value = z.value = c.value = I.value = !1
-    }), F = h({
-      get: () => y.value || z.value ? n.colorHex("key") : c.value ? n.colorHex("fill") : n.colorHex("back"),
-      set: (p) => {
-        if (y.value || z.value) {
-          n.setColorHex("key", p);
-          return;
-        }
-        if (c.value) {
-          n.setColorHex("fill", p);
-          return;
-        }
-        n.setColorHex("back", p);
+    ), 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));
       }
-    }), _ = h(() => ({
-      modelValue: F.value,
-      "onUpdate:modelValue": (p) => F.value = p,
-      show: D.value,
-      "onUpdate:show": (p) => D.value = p,
-      label: G.value
-    })), G = h(() => y.value ? C.value : z.value ? M.value : c.value ? P.value : R.value), X = h(() => ({
+    }), 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);
       }
     }));
-    U(d, (p) => {
-      p || (L.value = !0, V.value = !0);
-    }), U(i, (p) => {
-      p !== ge && (D.value = !1, u.value = !1);
+    O(l, (m) => {
+      m !== de && (a.value = !1);
     });
-    function J() {
-      const p = {
+    function b() {
+      const m = {
         class: "td-lights-tool"
-      };
-      let K = [];
-      if (D.value)
-        K = [m(Ot, _.value)];
-      else {
-        const le = {
-          class: "td-colors-tool q-pa-xs row justify-center items-center q-gutter-md"
-        }, ue = [];
-        d.value ? (ue.push(m(re, Q.value)), ue.push(m(re, w.value)), ue.push(m(re, W.value))) : ue.push(m(re, B.value));
-        const Le = [];
-        Le.push(m(Ze, A.value)), d.value && (Le.push(m(Ze, j.value)), Le.push(m(Ze, k.value))), Le.push(m(Ze, v.value)), K = [m("div", le, ue), ...Le], K.push(m(kt, X.value));
-      }
-      return m("div", p, K);
+      }, B = [
+        d(Ot, p.value),
+        d(Ke, G.value),
+        d(Ke, H.value),
+        d(Tt, Z.value)
+      ];
+      return d("div", m, B);
     }
-    return () => J();
+    return () => b();
   }
-}), Do = Z({
+}), co = R({
   name: "TdLightExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -2033,70 +1977,177 @@ const Pt = () => {
     label: { type: String, required: !1 }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = Me(), { expanded: r, selected: l } = be({
-      store: n,
-      options: ge,
-      tab: ge
-    }), i = h(() => {
+  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;
     });
-    h({
+    C({
       get: () => e.modelValue,
-      set: (u) => t("update:modelValue", u)
+      set: (u) => s("update:modelValue", u)
     });
-    function d() {
+    function a() {
       const u = {
         class: "td-lights-expansion",
         "data-cy": "td-lights-expansion",
-        modelValue: r.value,
-        "onUpdate:modelValue": (g) => r.value = g,
-        label: i.value,
-        selected: l.value,
+        modelValue: n.value,
+        "onUpdate:modelValue": (p) => n.value = p,
+        label: l.value,
+        selected: o.value,
         icon: "f_bulb_light"
       };
-      return m(rt, u, () => m(It));
+      return d(We, u, () => d(Jt));
     }
-    return () => d();
+    return () => a();
   }
-}), Nt = Z({
+}), es = R({
   name: "TdRelatedSection",
-  setup(e, { slots: o, emit: t }) {
-    const s = Symbol.for("RelatedThreeDSection"), n = Wt(s), r = b(), l = de(), { poseId: i } = $(l);
-    function d() {
-      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 && i.value && g.push(
-        m(n, {
-          id: i.value,
-          fbxId: r.selected
-        })
-      ), m("div", u, g);
+      }, r = [];
+      return t && r.push(d(t)), d("div", i, r);
     }
-    return () => d();
+    return () => s();
   }
-}), zo = Z({
+}), uo = R({
   name: "TdRelatedExpansion",
-  setup(e, { slots: o, emit: t }) {
-    const { expanded: s } = be({
+  setup(e, { slots: t, emit: s }) {
+    const { expanded: i } = oe({
       options: xe,
       tab: xe
-    }), n = h(() => "Related");
-    function r() {
-      const l = {
+    }), r = C(() => "Related");
+    function n() {
+      const o = {
         class: "td-related-expansion",
-        modelValue: s.value,
-        "onUpdate:modelValue": (i) => s.value = i,
-        label: n.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (l) => i.value = l,
+        label: r.value,
         icon: "f_related"
       };
-      return m(rt, l, () => m(Nt));
+      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();
   }
-}), Xt = Z({
+}), 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 },
@@ -2108,309 +2159,334 @@ const Pt = () => {
     }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: o, emit: t }) {
-    const s = wt(), n = Mt(), r = Ct(), l = Ve(), i = Me(), d = lt(), u = de(), { changed: g } = $(r), { changed: v } = $(l), { changed: f } = $(i), { changed: A } = $(d), { changed: C } = $(u), y = h(() => !(g.value || v.value || f.value || A.value || C.value));
-    function B() {
-      r.reset(), l.reset(), i.reset(), d.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 M = (H) => H.preventDefault();
-    function z() {
-      const Q = {
-        style: h(() => 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"
-      }, R = {
+      }, P = {
         class: "td-reset-button",
         label: "Reset All",
-        onClick: B,
-        onKeyup: M,
+        onClick: f,
+        onKeyup: S,
         rounded: !0,
         unelevated: !0,
         outline: !0,
-        disable: y.value
+        disable: h.value
       };
-      return m("div", Q, [m(qt, R)]);
+      return d("div", T, [d(Ut, P)]);
     }
-    return () => z();
+    return () => E();
   }
-}), Eo = Z({
+}), vo = R({
   name: "TdExpansions",
-  setup(e, { slots: o, emit: t }) {
-    function s() {
-      return m("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),
-        m(je),
-        m(ko),
-        m(je),
-        m(Bo),
-        m(je),
-        m(Do),
-        m(je),
+        d(Ie),
+        d(bo),
+        d(Ie),
+        d(ao),
+        d(Ie),
+        d(lo),
+        d(Ie),
+        d(co),
+        d(Ie),
         // h(TsGridExpansion),
         // h(QSeparator),
         // h(TsAdjustmentExpansion),
-        m(zo),
-        m(je),
+        d(uo),
+        d(Ie),
         // h('div', {}, store.loading.percent),
-        m(Xt)
+        d(ss)
       ]);
     }
-    return () => s();
+    return () => i();
   }
-}), To = Z({
+}), yo = R({
   name: "TdColorsButton",
   props: { size: String },
   setup(e, {}) {
-    const o = ke(), t = b(), s = h(() => (t == null ? void 0 : t.hasAccess("grd")) || !1), { lang: n } = ee(), r = h(() => {
-      var g;
-      return (g = n.value.td) == null ? void 0 : g.controls.colors.iconTitle;
-    }), { click: l, selected: i } = be({
-      store: o,
+    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: se,
       tab: se
     });
-    function d(g) {
-      return t.block(g);
+    function a(p) {
+      return s.block(p);
     }
     function u() {
-      const g = {
-        hasAccess: s.value,
-        selected: i.value,
-        onClick: l,
-        onBlockAccess: d,
+      const p = {
+        hasAccess: i.value,
+        selected: l.value,
+        onClick: o,
+        onBlockAccess: a,
         size: e.size,
         "data-id": se,
         name: "colors",
         type: "none",
         icon: "f_palette",
-        label: r.value
+        label: n.value
       };
-      return m(re, g, () => []);
+      return d(Ce, p, () => []);
     }
     return () => u();
   }
-}), Ao = Z({
+}), So = R({
   name: "TdGridButton",
   props: { size: String },
   setup(e, {}) {
-    const o = ke(), t = b(), s = h(() => (t == null ? void 0 : t.hasAccess("grd")) || !1), { lang: n } = ee(), r = h(() => {
-      var g;
-      return (g = n.value.td) == null ? void 0 : g.controls.grid.iconTitle;
-    }), { click: l, selected: i } = be({
-      store: o,
+    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: Se,
       tab: Se
     });
-    function d(g) {
-      return t.block(g);
+    function a(p) {
+      return s.block(p);
     }
     function u() {
-      const g = {
-        hasAccess: s.value,
-        selected: i.value,
-        onClick: l,
-        onBlockAccess: d,
+      const p = {
+        hasAccess: i.value,
+        selected: l.value,
+        onClick: o,
+        onBlockAccess: a,
         size: e.size,
         "data-id": Se,
         name: "grid",
         type: "none",
         icon: "f_grid",
-        label: r.value
+        label: n.value
       };
-      return m(re, g, () => []);
+      return d(Ce, p, () => []);
     }
     return () => u();
   }
-}), Vo = Z({
+}), xo = R({
   name: "TdLightsButton",
   props: { size: String },
   setup(e, {}) {
-    const o = ke(), t = b(), s = h(() => (t == null ? void 0 : t.hasAccess("grd")) || !1), { lang: n } = ee(), r = h(() => {
-      var g;
-      return (g = n.value.td) == null ? void 0 : g.controls.lights.iconTitle;
-    }), { click: l, selected: i } = be({
-      store: o,
-      options: ge,
-      tab: ge
+    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: de,
+      tab: de
     });
-    function d(g) {
-      return t.block(g);
+    function a(p) {
+      return s.block(p);
     }
     function u() {
-      const g = {
-        hasAccess: s.value,
-        selected: i.value,
-        onClick: l,
-        onBlockAccess: d,
+      const p = {
+        hasAccess: i.value,
+        selected: l.value,
+        onClick: o,
+        onBlockAccess: a,
         size: e.size,
-        "data-id": ge,
+        "data-id": de,
         name: "lights",
         type: "none",
         icon: "f_bulb_light",
-        label: r.value
+        label: n.value
       };
-      return m(re, g, () => []);
+      return d(Ce, p, () => []);
     }
     return () => u();
   }
-}), Lo = Z({
+}), Co = R({
   name: "TsAdjustmentsButton",
   props: { size: String },
   setup(e, {}) {
-    const o = b(), { lang: t } = ee(), s = h(() => {
-      var d;
-      return (d = t.value.td) == null ? void 0 : d.controls.related.iconTitle;
-    }), { click: n, selected: r } = be({
+    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(d) {
-      return o.block(d);
+    function o(a) {
+      return t.block(a);
     }
-    function i() {
-      const d = {
+    function l() {
+      const a = {
         hasAccess: !0,
-        selected: r.value,
-        onClick: n,
-        onBlockAccess: l,
+        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 m(re, d, () => []);
+      return d(Ce, a, () => []);
     }
-    return () => i();
+    return () => l();
   }
-}), jo = Z({
+}), wo = R({
   name: "TsDefaultDrawer",
   props: {},
   emits: ["click"],
-  setup(e, { slots: o, emit: t }) {
-    const s = b(), 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 () => m(
-      Qe,
-      { name: ot },
+    return () => d(
+      Pe,
+      { name: Nt },
       {
-        default: () => m(no, {}, () => [
-          m(To, r(se)),
-          m(Ao, r(Se)),
-          m(Vo, r(ge)),
-          m(Lo, r(xe))
+        default: () => d($t, {}, () => [
+          d(yo, n(se)),
+          d(So, n(Se)),
+          d(xo, n(de)),
+          d(Co, n(xe))
         ]),
-        secondary: () => m(Xt, { fixed: !1 })
+        secondary: () => d(ss, { fixed: !1 })
       }
     );
   }
-}), Fo = Z({
+}), Eo = R({
   name: "TdGridDrawer",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = h(() => {
-      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: Se,
-        label: n.value
+        label: r.value
       };
-      return m(Qe, l, () => m($t));
+      return d(Pe, o, () => d(Qt));
     }
-    return () => r();
+    return () => n();
   }
-}), Po = Z({
+}), Io = R({
   name: "TdRelatedDrawer",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = h(() => {
-      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: xe,
-        label: n.value
+        label: r.value
       };
-      return m(Qe, l, () => m(Nt));
+      return d(Pe, o, () => d(es));
     }
-    return () => r();
+    return () => n();
   }
-}), Go = Z({
+}), Mo = R({
   name: "TdLightsDrawer",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = h(() => {
-      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: ge,
-        label: n.value
+        name: de,
+        label: r.value
       };
-      return m(Qe, l, () => m(It));
+      return d(Pe, o, () => d(Jt));
     }
-    return () => r();
+    return () => n();
   }
-}), Ho = Z({
+}), Do = R({
   name: "TdLightsDrawer",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = h(() => {
-      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: se,
-        label: n.value
+        label: r.value
       };
-      return m(Qe, l, () => m(_t));
+      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();
   }
-}), Ro = Z({
+}), ko = R({
   name: "TsDrawers",
-  setup(e, { slots: o, emit: t }) {
-    const s = b(), n = h({
-      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": (i) => n.value = i
+    function n() {
+      const o = {
+        modelValue: r.value,
+        "onUpdate:modelValue": (l) => r.value = l
       };
-      return m(ro, l, () => [
-        m(jo),
-        m(Go),
-        m(Ho),
-        m(Fo),
-        m(Po)
+      return d(hs, o, () => [
+        d(wo),
+        d(To),
+        d(Mo),
+        d(Do),
+        d(Eo),
+        d(Io)
       ]);
     }
-    return () => r();
+    return () => n();
   }
-}), Qo = /* @__PURE__ */ Object.assign({
+}), No = /* @__PURE__ */ Object.assign({
   name: "TdPage",
   slug: "td-page",
   inheritAttrs: !1
 }, {
   __name: "TdPage",
-  props: /* @__PURE__ */ oo({
+  props: /* @__PURE__ */ ds({
     id: Number
   }, {
     miniState: { type: Boolean },
@@ -2418,37 +2494,150 @@ const Pt = () => {
   }),
   emits: ["update:miniState"],
   setup(e) {
-    const o = e, t = b(), s = h(() => Number(o.id)), n = Jt(e, "miniState");
-    return eo(() => {
-      t.setActive(ft.is.mobile ? ot : se);
-    }), (r, l) => (Je(), at(it(lo), {
+    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] = (i) => n.value = i),
+      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 ? gt("", !0) : (Je(), at(it(Eo), { 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(), at(it(Ro), { key: 0 })) : gt("", !0)
+      bottomDrawer: ht(() => [
+        a.$q.platform.is.mobile ? (nt(), mt(ft(ko), { key: 0 })) : vt("", !0)
       ]),
-      default: ct(() => [
-        to(Mo, { id: s.value }, null, 8, ["id"])
+      default: ht(() => [
+        us(io, { id: n.value }, null, 8, ["id"])
       ]),
       _: 1
     }, 8, ["miniState"]));
   }
+}), Ao = [
+  "#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"
+], Ho = Xe("3d-fbxs", {
+  state: () => ({
+    models: {},
+    loadingUrl: null,
+    palette: Ao
+  }),
+  getters: {
+    changed(e) {
+      var i, r, n, o, l;
+      const s = A().selected;
+      return console.log("fbx model", (i = e.models) == null ? void 0 : i[s]), (n = (r = e.models) == null ? void 0 : r[s]) != null && n.color ? ((l = (o = e.models) == null ? void 0 : o[s]) == null ? void 0 : l.color) !== 16777215 : !1;
+    },
+    selectedId() {
+      return A().selected;
+    },
+    poseId(e) {
+      var i, r;
+      const s = A().selected;
+      return (r = (i = e.models) == null ? void 0 : i[s]) == null ? void 0 : r.poseId;
+    },
+    model(e) {
+      const s = A().selected;
+      return s && e.models[s] ? e.models[s] : null;
+    },
+    url() {
+      var e;
+      return ((e = this.model) == null ? void 0 : e.url) || null;
+    },
+    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 ? ue(this.model.color) : "#fefefe";
+    }
+  },
+  actions: {
+    resetColor() {
+      const t = A().selected;
+      this.models[t].color = 16777215;
+    },
+    setBounds(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 s = A().selected;
+      this.models[s].color = Ye(e);
+    }
+  }
 });
 export {
-  Qo as TdPage,
-  b as use3dStore,
-  Ut as useColorsStore,
-  Ct as useControlsStore,
-  de as useFBXStore,
-  ke 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,
-  Me as useLightsStore,
-  lt as useSceneStore
+  fe as useLightsStore,
+  ut as useSceneStore
 };