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

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

@@ -1,51 +1,52 @@
 (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 { nextTick as Ht, watch as O, ref as ee, onUnmounted as Rt, computed as v, onMounted as Xt, openBlock as Je, createElementBlock as Yt, createCommentVNode as ht, createElementVNode as Qt, onBeforeMount as Wt, defineComponent as $, h, inject as Jt, useModel as eo, onBeforeUnmount as to, createBlock as it, unref as at, withCtx as ct, createVNode as oo, mergeModels as so } from "vue";
+import { Platform as ft, useQuasar as no, QBtn as Ot, QSeparator as Fe } from "quasar";
+import { CBaseButton as ne, CColorPickerPopup as qt, CExpansion as rt, CToggle as Ke, CSlider as dt, CDraggableDrawer as Qe, CBaseButtons as ro, CDraggableDrawers as lo, CToolPage as io } from "@figurosity/consumer-controls";
+import { defineStore as de, storeToRefs as I, getActivePinia as ao } from "pinia";
+import * as M from "three";
 import tt from "lodash.isequal";
 import "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);
+import { DEFAULT as ot, COLORS as oe, GRID as xe, LIGHTS as ve, RELATED as we } from "@figurosity/toolbox";
+import { OrbitControls as co } from "three/examples/jsm/controls/OrbitControls.js";
+import { mergeVertices as Bt, mergeGeometries as uo } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import { RoundedBoxGeometry as po } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
+import { GLTFLoader as mo } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader as ho } from "three/examples/jsm/loaders/DRACOLoader.js";
+function be(e) {
+  const t = e.startsWith("#") ? e.slice(1) : e;
+  return parseInt(t, 16);
 }
-function fe(e) {
+function ce(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
+const ut = new M.Vector3(), Mt = (e) => {
+  const t = new M.Box3().setFromObject(e);
+  console.log("box", t);
+  const o = t.getSize(new M.Vector3()), s = new M.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,
+  let n = t.min.y;
+  return console.log("bottom", n), Math.abs(n) < -0.01 && (n = fo(e)), console.log("bottom", n), {
+    box: t,
+    size: o,
     center: s,
     bottom: n,
-    top: o.max.y
+    top: t.max.y
   };
-}, mo = (e) => {
-  let o = 1 / 0;
-  return e.updateMatrixWorld(!0), e.traverse((t) => {
+}, fo = (e) => {
+  let t = 1 / 0;
+  return e.updateMatrixWorld(!0), e.traverse((o) => {
     var n, r;
-    if (!t.isMesh) return;
-    const s = (r = (n = t.geometry) == null ? void 0 : n.attributes) == null ? void 0 : r.position;
+    if (!o.isMesh) return;
+    const s = (r = (n = o.geometry) == null ? void 0 : n.attributes) == null ? void 0 : r.position;
     if (s)
       for (let l = 0; l < s.count; l++)
-        ut.fromBufferAttribute(s, l), ut.applyMatrix4(t.matrixWorld), o = Math.min(o, ut.y);
-  }), o;
-}, ho = (e) => ({
+        ut.fromBufferAttribute(s, l), ut.applyMatrix4(o.matrixWorld), t = Math.min(t, ut.y);
+  }), t;
+}, _t = (e) => ({
   box: {
     min: {
       x: e.box.min.x,
@@ -70,7 +71,7 @@ const ut = new S.Vector3(), Dt = (e) => {
   },
   bottom: e.bottom,
   top: e.top
-}), go = [
+}), go = "smooth", vo = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -111,28 +112,31 @@ const ut = new S.Vector3(), Dt = (e) => {
   "#BDACA8",
   "#DACDC9",
   "#E5E4E3"
-], de = ve("3d-fbxs", {
+], bo = (e) => ({
+  id: e.id,
+  uuid: e.uuid ?? null,
+  basePoseId: e.basePoseId ?? null,
+  skinId: e.skinId ?? null,
+  poseId: e.poseId ?? null,
+  url: e.glbPathWebp || e.glbPath || null,
+  color: e.color ?? 16777215,
+  bounds: e.bounds ?? null
+}), ye = de("3d-glbs", {
   state: () => ({
     models: {},
-    loadingUrl: null,
-    palette: go
+    palette: vo
   }),
   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 p().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 o, s;
+      const t = p().selected;
+      return (s = (o = e.models) == null ? void 0 : o[t]) == null ? void 0 : s.poseId;
     },
     model(e) {
-      const t = b().selected;
+      const t = p().selected;
       return t && e.models[t] ? e.models[t] : null;
     },
     url() {
@@ -149,63 +153,84 @@ const ut = new S.Vector3(), Dt = (e) => {
     },
     colorHex() {
       var e;
-      return (e = this.model) != null && e.color ? fe(this.model.color) : "#fefefe";
+      return (e = this.model) != null && e.color ? ce(this.model.color) : "#fefefe";
+    },
+    changed(e) {
+      var o, s, n, r;
+      const t = p().selected;
+      return (s = (o = e.models) == null ? void 0 : o[t]) != null && s.color ? ((r = (n = e.models) == null ? void 0 : n[t]) == null ? void 0 : r.color) !== 16777215 : !1;
     }
   },
   actions: {
     resetColor() {
-      const o = b().selected;
-      this.models[o].color = 16777215;
+      const e = p().selected;
+      this.models[e] && (this.models[e].color = 16777215);
     },
     setBounds(e) {
-      const t = b().selected;
-      this.models[t].bounds = ho(e);
-    },
-    setSubjectsFromResponse(e) {
-      const o = e.entities.fbx;
-      this.models = { ...this.models, ...o };
+      const t = p().selected;
+      this.models[t] && (this.models[t].bounds = _t(e));
     },
     setColorHex(e) {
-      const t = b().selected;
-      this.models[t].color = Ce(e);
+      const t = p().selected;
+      this.models[t] && (this.models[t].color = be(e));
+    },
+    setSubjectsFromResponse(e) {
+      var s;
+      const t = ((s = e == null ? void 0 : e.entities) == null ? void 0 : s.glb) || {}, o = {};
+      return Object.keys(t).forEach((n) => {
+        o[n] = bo(t[n]);
+      }), this.models = { ...this.models, ...o }, this.selectDefaultGlbId(e);
+    },
+    // Picks the GLB id whose skin slug matches DEFAULT_SKIN_SLUG, falls
+    // back to result.glb[0], or null when no GLBs are available.
+    selectDefaultGlbId(e) {
+      var l, a, c;
+      const t = Array.isArray((l = e == null ? void 0 : e.result) == null ? void 0 : l.glb) ? e.result.glb : [];
+      if (t.length === 0) return null;
+      const o = ((a = e == null ? void 0 : e.entities) == null ? void 0 : a.skins) || {}, s = ((c = e == null ? void 0 : e.entities) == null ? void 0 : c.glb) || {}, r = t.find((u) => {
+        var b, f;
+        const g = (b = s[u]) == null ? void 0 : b.skinId;
+        return g != null && ((f = o[g]) == null ? void 0 : f.slug) === go;
+      }) ?? t[0];
+      return typeof r == "string" ? parseInt(r, 10) : r;
     }
   }
-}), vt = { visible: !0, opacity: 1, color: 16711422, texture: "none" }, zt = (e = {}) => ({ ...vt, ...e }), Ve = ve("3d-ground", {
+}), gt = { visible: !0, opacity: 1, color: 16711422, texture: "none" }, kt = (e = {}) => ({ ...gt, ...e }), Ve = de("3d-ground", {
   state: () => ({
     models: {},
     offset: -0.75
   }),
   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;
+      var o, s;
+      const t = p().selected;
+      return ((s = (o = e.models) == null ? void 0 : o[t]) == null ? void 0 : s.color) !== 16711422;
     },
     property() {
-      return (e, o = null) => {
-        var t;
-        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
+      return (e, t = null) => {
+        var o;
+        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
       };
     },
     selectedId() {
-      return b().selected;
+      return p().selected;
     },
     selectedModel(e) {
-      const o = this.selectedId;
-      return e.models[o] ?? null;
+      const t = this.selectedId;
+      return e.models[t] ?? null;
     },
     mergedModel() {
-      return { ...vt, ...this.selectedModel ?? {} };
+      return { ...gt, ...this.selectedModel ?? {} };
     },
     model(e) {
-      const t = b().selected;
-      return t && e.models[t] ? e.models[t] : null;
+      const o = p().selected;
+      return o && e.models[o] ? e.models[o] : null;
     },
     color() {
       return this.mergedModel.color;
     },
     colorHex() {
-      return fe(this.mergedModel.color);
+      return ce(this.mergedModel.color);
     },
     opacity() {
       return this.mergedModel.opacity;
@@ -219,26 +244,26 @@ const ut = new S.Vector3(), Dt = (e) => {
   },
   actions: {
     reset() {
-      const e = b().selected;
-      this.models[e] = zt();
+      const e = p().selected;
+      this.models[e] = kt();
     },
     ensureSelectedModel() {
-      const e = b().selected;
-      return this.models[e] || (this.models[e] = { ...vt }), this.models[e];
+      const e = p().selected;
+      return this.models[e] || (this.models[e] = { ...gt }), this.models[e];
     },
     patchSelected(e) {
-      const o = this.ensureSelectedModel();
-      Object.assign(o, e);
-    },
-    setProperty(e, o) {
       const t = this.ensureSelectedModel();
-      t[e] = o;
+      Object.assign(t, e);
+    },
+    setProperty(e, t) {
+      const o = this.ensureSelectedModel();
+      o[e] = t;
     },
     setColor(e) {
       this.setProperty("color", e);
     },
     setColorHex(e) {
-      this.setProperty("color", Ce(e));
+      this.setProperty("color", be(e));
     },
     setTexture(e) {
       this.setProperty("texture", e);
@@ -247,23 +272,23 @@ const ut = new S.Vector3(), Dt = (e) => {
       this.setProperty("visible", e);
     },
     setGroundFromResponse(e) {
-      this.models[e] || (this.models[e] = zt());
+      this.models[e] || (this.models[e] = kt());
     }
   }
-}), Ke = {
+}), Xe = {
   color: 16777215,
   visible: !0,
   debug: !1,
   shadow: !0,
   opacity: 1,
   visualization: !0
-}, pt = (e = {}) => ({ ...Ke, ...e }), he = {
+}, pt = (e = {}) => ({ ...Xe, ...e }), ge = {
   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", {
+}, Et = (e = {}) => ({ ...ge, ...e }), Be = de("3d-lights", {
   state: () => ({
     lights: {},
     options: {},
@@ -272,81 +297,81 @@ const ut = new S.Vector3(), Dt = (e) => {
   }),
   getters: {
     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);
+      const o = p().selected, s = !tt(e.options[o], ge), n = {
+        key: { ...Xe },
+        fill: { ...Xe },
+        back: { ...Xe }
+      }, r = !tt(e.lights[o], n);
       return s || r;
     },
     move(e) {
       var s;
-      const t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.move) || !1;
+      const o = p().selected;
+      return ((s = e.options[o]) == null ? void 0 : s.move) || !1;
     },
     advancedMode(e) {
       var s;
-      const t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.advanced) || !1;
+      const o = p().selected;
+      return ((s = e.options[o]) == null ? void 0 : s.advanced) || !1;
     },
     position(e) {
       var s;
-      const t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.position) || he.position;
+      const o = p().selected;
+      return ((s = e.options[o]) == null ? void 0 : s.position) || ge.position;
     },
     quaternion(e) {
       var s;
-      const t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.quaternion) || he.quaternion;
+      const o = p().selected;
+      return ((s = e.options[o]) == null ? void 0 : s.quaternion) || ge.quaternion;
     },
     target(e) {
       var s;
-      const t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.target) || he.target;
+      const o = p().selected;
+      return ((s = e.options[o]) == null ? void 0 : s.target) || ge.target;
     },
     radius(e) {
       var s;
-      const t = b().selected;
-      return ((s = e.options[t]) == null ? void 0 : s.radius) || he.radius;
+      const o = p().selected;
+      return ((s = e.options[o]) == null ? void 0 : s.radius) || ge.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, o = null, s = null) => {
+        const r = p().selected;
+        return !e.lights[r] || !e.lights[r][t] || !(o in e.lights[r][t]) ? s : e.lights[r][t][o];
       };
     },
     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 = p().selected;
+        return !e.lights[s] || !e.lights[s][t] ? "#ffffff" : ce(e.lights[s][t].color);
       };
     },
     lightKeys(e) {
-      const t = b().selected;
-      return Object.keys(e.lights[t]);
+      const o = p().selected;
+      return Object.keys(e.lights[o]);
     },
     isVisible(e) {
-      return (o) => e.move && (this.advancedMode === !0 && this.property(o, "visible") || o === "key");
+      return (t) => e.move && (this.advancedMode === !0 && this.property(t, "visible") || t === "key");
     }
   },
   actions: {
     reset() {
-      const e = b().selected;
-      this.options[e] = { ...he }, this.collection.forEach(
-        (o) => this.lights[e][o] = { ...Ke }
+      const e = p().selected;
+      this.options[e] = { ...ge }, this.collection.forEach(
+        (t) => this.lights[e][t] = { ...Xe }
       );
     },
     ensureSelectedOptions() {
-      const e = b().selected;
-      return this.options[e] || (this.options[e] = { ...he }), this.options[e];
+      const e = p().selected;
+      return this.options[e] || (this.options[e] = { ...ge }), this.options[e];
     },
     patchSelected(e) {
-      const o = this.ensureSelectedOptions();
-      Object.assign(o, e);
-    },
-    setControlProperty(e, o) {
       const t = this.ensureSelectedOptions();
-      t[e] = o;
+      Object.assign(t, e);
+    },
+    setControlProperty(e, t) {
+      const o = this.ensureSelectedOptions();
+      o[e] = t;
     },
     setPosition(e) {
       this.setControlProperty("position", e);
@@ -361,48 +386,48 @@ const ut = new S.Vector3(), Dt = (e) => {
       this.setControlProperty("radius", e);
     },
     setMove(e = !1) {
-      const t = b().selected;
-      this.options[t].move = e;
+      const o = p().selected;
+      this.options[o].move = e;
     },
     setAdvanced(e = !1) {
-      const t = b().selected;
+      const o = p().selected;
       if (e === !0) {
-        this.options[t].advanced = !0;
+        this.options[o].advanced = !0;
         return;
       }
-      this.options[t].advanced = !1;
-      const s = this.lights[t].key;
+      this.options[o].advanced = !1;
+      const s = this.lights[o].key;
       this.lightKeys.forEach((n) => {
-        n !== "key" && (this.lights[t][n].color = s.color);
+        n !== "key" && (this.lights[o][n].color = s.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 };
+    setControlOptions(e, t, o = null) {
+      o === null && (o = p().selected), this.options[o] || (this.options[o] = Et());
+      const s = e.position.clone(), n = e.quaternion.clone(), r = t.target.clone();
+      this.options[o].position = { x: s.x, y: s.y, z: s.z }, this.options[o].quaternion = { x: n.x, y: n.y, z: n.z, w: n.w }, this.options[o].target = { x: r.x, y: r.y, z: r.z };
     },
-    setColorHex(e, o) {
+    setColorHex(e, t) {
       var l;
-      const s = b().selected, n = this.lights[s], r = Ce(o);
+      const s = p().selected, n = this.lights[s], r = be(t);
       if (((l = this.options[s]) == null ? void 0 : l.advanced) === !0) {
         n[e].color = r;
         return;
       }
-      this.collection.forEach((i) => {
-        n[i].color = r;
+      this.collection.forEach((a) => {
+        n[a].color = r;
       });
     },
-    setProperty(e, o, t) {
-      const n = b().selected;
-      this.lights[n][e][o] = t;
+    setProperty(e, t, o) {
+      const n = p().selected;
+      this.lights[n][e][t] = o;
     },
     initLights() {
-      const o = b().selected;
-      this.lights[o] || (this.lights[o] = {
+      const t = p().selected;
+      this.lights[t] || (this.lights[t] = {
         key: pt(),
         fill: pt({ shadow: !0 }),
         back: pt({ shadow: !0 })
-      }), this.options[o] || (this.options[o] = Et());
+      }), this.options[t] || (this.options[t] = Et());
     }
   }
 }), Ye = {
@@ -410,28 +435,28 @@ const ut = new S.Vector3(), Dt = (e) => {
   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", {
+}, At = (e = {}) => ({ ...Ye, ...e }), Ct = de("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;
+      const o = p().selected;
+      return (s = e.models) != null && s[o] ? !tt(e.models[o], Ye) : !1;
     },
     property() {
-      return (e, o = null) => {
-        var t;
-        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
+      return (e, t = null) => {
+        var o;
+        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
       };
     },
     selectedId() {
-      return b().selected;
+      return p().selected;
     },
     selectedModel(e) {
-      const o = this.selectedId;
-      return e.models[o] ?? null;
+      const t = this.selectedId;
+      return e.models[t] ?? null;
     },
     mergedModel() {
       return { ...Ye, ...this.selectedModel ?? {} };
@@ -451,20 +476,20 @@ const ut = new S.Vector3(), Dt = (e) => {
   },
   actions: {
     reset() {
-      const e = b().selected;
+      const e = p().selected;
       this.models[e] = { ...Ye };
     },
     ensureSelectedModel() {
-      const e = b().selected;
+      const e = p().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;
+      Object.assign(t, e);
+    },
+    setProperty(e, t) {
+      const o = this.ensureSelectedModel();
+      o[e] = t;
     },
     setPosition(e) {
       this.setProperty("position", e);
@@ -478,49 +503,49 @@ const ut = new S.Vector3(), Dt = (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 };
+    setControlOptions(e, t, o = null) {
+      o === null && (o = p().selected), this.models[o] || (this.models[o] = At());
+      const s = e.position.clone(), n = e.quaternion.clone(), r = t.target.clone();
+      this.models[o].position = { x: s.x, y: s.y, z: s.z }, this.models[o].quaternion = { x: n.x, y: n.y, z: n.z, w: n.w }, this.models[o].target = { x: r.x, y: r.y, z: r.z };
     },
     initControls() {
-      const o = b().selected;
-      o && !this.models[o] && (this.models[o] = Tt());
+      const t = p().selected;
+      t && !this.models[t] && (this.models[t] = At());
     }
   }
-}), bt = {
+}), vt = {
   color: 16711422
-}, At = (e = {}) => ({ ...bt, ...e }), lt = ve("3d-scene", {
+}, zt = (e = {}) => ({ ...vt, ...e }), lt = de("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;
+      const o = p().selected;
+      return ((n = (s = e.models) == null ? void 0 : s[o]) == null ? void 0 : n.color) !== 16711422;
     },
     colorHex(e) {
       var n;
-      const t = b().selected, s = (n = e.models[t]) == null ? void 0 : n.color;
-      return fe(s || bt.color);
+      const o = p().selected, s = (n = e.models[o]) == null ? void 0 : n.color;
+      return ce(s || vt.color);
     }
   },
   actions: {
     reset() {
-      const o = b().selected;
-      this.models[o] = { ...bt };
+      const t = p().selected;
+      this.models[t] = { ...vt };
     },
     selectedId() {
-      return b().selected;
+      return p().selected;
     },
     setColorHex(e) {
-      const t = b().selected;
-      this.models[t] || (this.models[t] = At()), this.models[t].color = Ce(e);
+      const o = p().selected;
+      this.models[o] || (this.models[o] = zt()), this.models[o].color = be(e);
     },
     init() {
-      const o = b().selected;
-      this.models[o] || (this.models[o] = At());
+      const t = p().selected;
+      this.models[t] || (this.models[t] = zt());
     }
   }
 }), Te = {
@@ -536,27 +561,27 @@ const ut = new S.Vector3(), Dt = (e) => {
   size: 2,
   lineColor: 13421772,
   centerLineColor: 16711680
-}, fo = (e = {}) => ({ ...Te, ...e }), ke = ve("3d-grid", {
+}, yo = (e = {}) => ({ ...Te, ...e }), Me = de("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);
+      const o = p().selected;
+      return console.log("state.models[id]", e.models[o]), console.log("defaults", Te), !tt(e.models[o], Te);
     },
     property() {
-      return (e, o = null) => {
-        var t;
-        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
+      return (e, t = null) => {
+        var o;
+        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
       };
     },
     selectedId() {
-      return b().selected;
+      return p().selected;
     },
     selectedModel(e) {
-      const o = this.selectedId;
-      return e.models[o] ?? null;
+      const t = this.selectedId;
+      return e.models[t] ?? null;
     },
     mergedModel() {
       return { ...Te, ...this.selectedModel ?? {} };
@@ -580,43 +605,43 @@ const ut = new S.Vector3(), Dt = (e) => {
       return this.mergedModel.divisions;
     },
     lineColorHex() {
-      return fe(this.mergedModel.lineColor);
+      return ce(this.mergedModel.lineColor);
     },
     centerLineColorHex() {
-      return fe(this.mergedModel.centerLineColor);
+      return ce(this.mergedModel.centerLineColor);
     }
   },
   actions: {
     reset() {
-      const o = b().selected;
-      this.models[o] = { ...Te }, Ht(() => {
-        this.models[o].show = !1;
+      const t = p().selected;
+      this.models[t] = { ...Te }, Ht(() => {
+        this.models[t].show = !1;
       });
     },
     ensureSelectedModel() {
-      const e = b().selected;
+      const e = p().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;
+      Object.assign(t, e);
+    },
+    setProperty(e, t) {
+      const o = this.ensureSelectedModel();
+      o[e] = t;
     },
     setLineColorHex(e) {
-      this.setProperty("lineColor", Ce(e));
+      this.setProperty("lineColor", be(e));
     },
     setCenterLineColorHex(e) {
-      this.setProperty("centerLineColor", Ce(e));
+      this.setProperty("centerLineColor", be(e));
     },
     init() {
-      const o = b().selected;
-      this.models[o] || (this.models[o] = fo());
+      const t = p().selected;
+      this.models[t] || (this.models[t] = yo());
     }
   }
-}), vo = [
+}), So = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -657,71 +682,71 @@ const ut = new S.Vector3(), Dt = (e) => {
   "#BDACA8",
   "#DACDC9",
   "#E5E4E3"
-], yt = "background", et = "subject", St = "ground", Vt = {
+], bt = "background", et = "subject", yt = "ground", Tt = {
   [et]: 16711422,
-  [yt]: 16777215,
-  [St]: 12961221
-}, Ut = ve("3d-colors", {
+  [bt]: 16777215,
+  [yt]: 12961221
+}, Ut = de("3d-colors", {
   state: () => ({
     models: {},
-    palette: vo
+    palette: So
   }),
   getters: {
     property() {
-      return (e, o = null) => {
-        var t;
-        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
+      return (e, t = null) => {
+        var o;
+        return ((o = this.selectedModel) == null ? void 0 : o[e]) ?? t;
       };
     },
     selectedId() {
-      return b().selected;
+      return p().selected;
     },
     selectedModel(e) {
-      const o = this.selectedId;
-      return e.models[o] ?? null;
+      const t = this.selectedId;
+      return e.models[t] ?? null;
     },
     mergedModel() {
-      return { ...Vt, ...this.selectedModel ?? {} };
+      return { ...Tt, ...this.selectedModel ?? {} };
     },
     model(e) {
-      const t = b().selected;
-      return t && e.models[t] ? e.models[t] : null;
+      const o = p().selected;
+      return o && e.models[o] ? e.models[o] : null;
     },
     subjectHex() {
       return this.getHexColor(et);
     },
     groundHex() {
-      return this.getHexColor(St);
+      return this.getHexColor(yt);
     },
     backgroundHex() {
-      return this.getHexColor(yt);
+      return this.getHexColor(bt);
     }
   },
   actions: {
     initModel(e) {
-      this.models[e] = { ...Vt };
+      this.models[e] = { ...Tt };
     },
     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);
+      const o = p().selected;
+      if (!this.models[o] || !this.models[o][e]) return "#F0F0F0";
+      const s = this.models[o][e];
+      return ce(s);
     },
-    setHexColor(e = et, o = "#e6e6e6") {
-      const s = b().selected;
-      !this.models[s] || !this.models[s][e] || (this.models[s][e] = Ce(o));
+    setHexColor(e = et, t = "#e6e6e6") {
+      const s = p().selected;
+      !this.models[s] || !this.models[s][e] || (this.models[s][e] = be(t));
     },
     setSubjectHex(e) {
       this.setHexColor(et, e);
     },
     setGroundHex(e) {
-      this.setHexColor(St, e);
+      this.setHexColor(yt, e);
     },
     setBackgroundHex(e) {
-      this.setHexColor(yt, e);
+      this.setHexColor(bt, e);
     }
   }
-}), b = ve("3d", {
+}), p = de("3d", {
   state: () => ({
     // models: {},
     selected: null,
@@ -743,9 +768,9 @@ 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;
+      var o, s;
+      const t = ft.is.mobile ? ot : oe;
+      return ((s = (o = this.models) == null ? void 0 : o[e.selected]) == null ? void 0 : s.active) || t;
     },
     aspect(e) {
       return e.height > 0 ? e.width / e.height : 0;
@@ -753,135 +778,138 @@ 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", (o) => {
+        t.setFromResponse(o);
       });
     },
     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);
+      const t = Ut(), o = Ct(), s = Me(), n = Ve(), r = Be(), l = lt(), c = ye().setSubjectsFromResponse(e);
+      if (c == null) {
+        this.selected = null;
+        return;
+      }
+      this.selected = c, t.initModel(c), r.initLights(), n.setGroundFromResponse(c), o.initControls(), s.init(), l.init(), this.models[c] || (this.models[c] = {}), (u = this.models[c]) != null && u.active || (this.models[c].active = ft.is.mobile ? ot : oe);
     }
   }
 });
-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 ie = null, Pe = null;
+const Le = () => {
+  const e = p(), { aspect: t, width: o, height: s } = I(e), n = (a = { x: 0, y: 0.8, z: 1.5 }) => (console.debug("useCamera init"), ie ? (console.debug("view camera already inited"), ie) : (ie = new M.PerspectiveCamera(75, t.value, 0.1, 100), e.loaded.camera = !0, ie)), r = () => {
+    if (ie)
+      return ie;
   };
-  return Fe = U(
-    () => o.value,
-    (i) => {
-      if (!ae) {
+  return Pe = O(
+    () => t.value,
+    (a) => {
+      if (!ie) {
         n();
         return;
       }
-      ae.aspect = i, ae.updateProjectionMatrix();
+      ie.aspect = a, ie.updateProjectionMatrix();
     }
   ), {
     init: n,
     getCamera: r,
     dispose: () => {
-      Fe == null || Fe(), Fe = null, ae = null;
+      Pe == null || Pe(), Pe = null, ie = null;
     }
   };
 };
-let ne = null;
+let se = null;
 const st = () => {
-  const e = te(!1), o = te({
+  const e = ee(!1), t = ee({
     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;
+  }), o = (b, f = {}) => {
+    if (console.debug("useOrbitControlsBase init"), se)
+      return console.debug("controls already inited"), se;
+    const E = new M.Object3D();
+    return se = new co(E, b.domElement), n(f), se;
   }, s = () => {
-    if (!ne) throw new Error("OrbitControls not initialized");
-    return ne;
-  }, n = (v = {}) => {
+    if (!se) throw new Error("OrbitControls not initialized");
+    return se;
+  }, n = (b = {}) => {
     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 }) => {
+    f.enableDamping = b.enableDamping ?? !0, f.dampingFactor = b.dampingFactor ?? 0.5, f.rotateSpeed = b.rotateSpeed ?? 0.2, f.enableZoom = b.enableZoom ?? !0, f.minDistance = b.minDistance ?? 0.5, f.maxDistance = b.maxDistance ?? 6;
+  }, r = ({ mode: b, camera: f, store: E, options: D }) => {
     const y = s();
-    if (!f) throw new Error(`setMode(${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();
+    if (!f) throw new Error(`setMode(${b}): camera is required`);
+    if (!E) throw new Error(`setMode(${b}): store is required`);
+    y.object = f, n(D), t.value = { mode: b, camera: f, store: E }, c(), y.update();
   }, l = () => {
-    ne && ne.update();
-  }, 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;
+    se && se.update();
+  }, a = () => {
+    const b = s(), { camera: f, store: E } = t.value;
+    !f || !E || e.value || (E.setPosition({ ...f.position }), E.setQuaternion({ ...f.quaternion }), E.setTarget({ ...b.target }), E.setRadius(f.position.distanceTo(b.target)));
+  }, c = () => {
+    const b = s(), { camera: f, store: E } = t.value;
+    if (!f || !E) 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: D, quaternion: y, target: k, radius: S } = E;
+    b.target.set(k.x, k.y, k.z);
+    const w = new M.Vector3(
+      D.x - k.x,
+      D.y - k.y,
+      D.z - k.z
     ).normalize();
-    f.position.copy(v.target).add(z.multiplyScalar(M)), f.quaternion.set(
+    f.position.copy(b.target).add(w.multiplyScalar(S)), f.quaternion.set(
       y.x,
       y.y,
       y.z,
       y.w
-    ), v.update(), e.value = !1;
+    ), b.update(), e.value = !1;
   };
   return {
-    init: t,
+    init: o,
     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
+    syncToStore: a,
+    applyFromStore: c,
+    frameToBounds: (b, f = 1.75, E = 0.02) => {
+      const D = s(), { camera: y } = t.value;
+      if (!y || !b) return;
+      const k = new M.Vector3(
+        b.center.x,
+        b.center.y + b.size.y * E,
+        b.center.z
       );
-      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", b);
+      const S = Math.max(b.size.x, b.size.y, b.size.z), w = M.MathUtils.degToRad(y.fov);
+      let F = S / 2 / Math.tan(w / 2) * f;
+      D.target.copy(k), y.position.set(k.x, k.y, k.z + F), y.near = F / 100, y.far = F * 100, y.updateProjectionMatrix(), D.update();
     },
     dispose: () => {
-      console.debug("controls disposed"), ne && (ne.dispose(), ne = null, o.value = { mode: null, camera: null, store: null });
+      console.debug("controls disposed"), se && (se.dispose(), se = null, t.value = { mode: null, camera: null, store: null });
     }
   };
-}, wt = () => {
-  const { getCamera: e } = Ae(), o = Ct(), t = st();
+}, xt = () => {
+  const { getCamera: e } = Le(), t = Ct(), o = st();
   return {
     activate: () => {
-      t.setMode({
+      o.setMode({
         mode: "camera",
         camera: e(),
-        store: o,
+        store: t,
         options: {
           enableZoom: !0,
           minDistance: 0.5,
@@ -889,35 +917,35 @@ const st = () => {
         }
       });
     },
-    frameToBounds: t.frameToBounds,
-    syncToStore: t.syncToStore,
-    applyFromStore: t.applyFromStore
+    frameToBounds: o.frameToBounds,
+    syncToStore: o.syncToStore,
+    applyFromStore: o.applyFromStore
   };
 };
-let oe = null, Pe = 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);
+let te = null, Ge = null;
+const De = () => {
+  const e = lt(), t = p(), { colorHex: o } = I(e), s = () => (console.debug("useScene init"), te ? (console.debug("scene already inited"), te) : (te = new M.Scene(), r(o.value), t.loaded.scene = !0, te)), n = () => {
+    if (te)
+      return te;
+  }, r = (a) => {
+    if (!te) throw new Error("Scene has not been initialized");
+    te.background = new M.Color(a);
   };
-  return Pe = U(
-    () => t.value,
-    (i) => r(i)
+  return Ge = O(
+    () => o.value,
+    (a) => r(a)
   ), {
     init: s,
     get: n,
     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, Ge == null || Ge(), Ge = null, te && (te.traverse((a) => {
+        var c, u;
+        a.isMesh && ((c = a.geometry) == null || c.dispose(), Array.isArray(a.material) ? a.material.forEach((g) => g == null ? void 0 : g.dispose()) : (u = a.material) == null || u.dispose());
+      }), te.clear(), te = null);
     },
     setBackgroundColor: r
   };
-}, bo = {
+}, Co = {
   asphalt: {
     ao: "ao.jpg",
     color: "color.jpg",
@@ -953,101 +981,101 @@ const we = () => {
     repeat: 100
   }
 };
-let T = null, Ge = null, He = null, Re = null;
+let z = null, He = null, Re = null, Oe = null;
 const Lt = () => {
-  const e = Ve(), { get: o } = we(), { getCamera: t } = Ae(), {
+  const e = Ve(), { get: t } = De(), { getCamera: o } = Le(), {
     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,
+  } = I(e), a = () => {
+    if (console.debug("useGround init"), z)
+      return console.debug("ground already inited"), z;
+    const D = t(), y = new M.PlaneGeometry(100, 100), k = new M.Color(n.value || 16777215), S = new M.MeshStandardMaterial({
+      color: k,
       // Default to white
-      side: S.DoubleSide,
+      side: M.DoubleSide,
       roughness: 0.4,
       metalness: 0.3,
-      emissive: B,
+      emissive: k,
       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(
+    return z = new M.Mesh(y, S), z.rotation.x = -Math.PI / 2, z.receiveShadow = !0, z.visible = s.value, D.add(z), He = O(
       () => s.value,
-      () => d()
-    ), He = U(
+      () => c()
+    ), Re = O(
       () => n.value,
-      (z) => f(z)
-    ), Re = U(
+      (w) => f(w)
+    ), Oe = O(
       () => r.value,
-      (z) => g(z)
-    ), T;
+      (w) => g(w)
+    ), z;
   };
-  function d() {
-    if (t().position.y < T.position.y) {
-      T.visible = !1;
+  function c() {
+    if (o().position.y < z.position.y) {
+      z.visible = !1;
       return;
     }
-    T.visible = s.value;
+    z.visible = s.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(D, y = 1, k = 1) {
+    return new M.TextureLoader().load(D, (F) => {
+      F.wrapS = M.RepeatWrapping, F.wrapT = M.RepeatWrapping, F.repeat.set(y, k), F.needsUpdate = !0;
     });
   }
-  const g = (C) => {
-    if (!T) throw new Error("Ground has not been initialized");
-    const y = bo[C];
+  const g = (D) => {
+    if (!z) throw new Error("Ground has not been initialized");
+    const y = Co[D];
     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;
+      z.material.map = null, z.material.normalMap = null, z.material.displacementMap = null, z.material.roughnessMap = null, z.material.aoMap = null, z.material.metalnessMap = null, z.material.needsUpdate = !0;
     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 k = `https://static.figurosity.com/3d/textures/${D}/`, S = y.repeat;
+      z.material.map = u(
+        `${k}${y.color}`,
+        S,
+        S
+      ), z.material.normalMap = u(
+        `${k}${y.normal}`,
+        S,
+        S
+      ), z.material.displacementMap = u(
+        `${k}${y.displacement}`,
+        S,
+        S
+      ), z.material.roughnessMap = u(
+        `${k}${y.roughness}`,
+        S,
+        S
+      ), z.material.aoMap = u(
+        `${k}${y.ao}`,
+        S,
+        S
+      ), y.metalness && (z.material.metalnessMap = u(
+        `${k}${y.metalness}`,
+        S,
+        S
+      )), z.material.displacementScale = 0.1, z.material.displacementBias = -0.05, z.material.needsUpdate = !0;
     }
-    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);
+    z.position.y = l.value, z.geometry.computeBoundingBox(), z.geometry.computeVertexNormals();
+  }, b = () => {
+    if (!z) throw new Error("Ground has not been initialized");
+    return z;
+  }, f = (D) => {
+    if (!z) throw new Error("Ground has not been initialized");
+    z.material.color.set(D);
   };
-  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: a, get: b, setColor: f, updateVisibility: c, dispose: () => {
+    var y, k;
+    if (He == null || He(), Re == null || Re(), Oe == null || Oe(), He = null, Re = null, Oe = null, !z) return;
+    const D = t();
+    D == null || D.remove(z), (y = z.geometry) == null || y.dispose(), Array.isArray(z.material) ? z.material.forEach((S) => S == null ? void 0 : S.dispose()) : (k = z.material) == null || k.dispose(), z = null;
   } };
-}, 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(
+}, xo = (e, t = 16711422) => {
+  const o = new po(0.1, 0.1, 0.1, 6, 0.01), s = 0.1, n = 0.05, r = new M.ConeGeometry(n, s, 32);
+  o.index || o.setIndex(
     Array.from(
-      { length: t.attributes.position.count },
+      { length: o.attributes.position.count },
       (u, g) => g
     )
   ), r.index || r.setIndex(
@@ -1055,186 +1083,186 @@ const Lt = () => {
       { length: r.attributes.position.count },
       (u, g) => g
     )
-  ), 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,
+  ), r.rotateX(-Math.PI / 2), r.translate(0, 0, s / 2), Bt(o), Bt(r);
+  const l = uo([o, r]), a = new M.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);
+  }), c = new M.Mesh(l, a);
+  if (c.position.set(0, 0, 0), c.rotateX(Math.PI), e && e.target) {
+    const u = new M.Vector3();
+    e.target.getWorldPosition(u), c.lookAt(u);
   }
-  return d.position.copy(e.position), d;
+  return c.position.copy(e.position), c;
 };
-let We = {}, ie = {}, Y = {}, mt = {}, ye = {}, Be = null, pe = null, qe = [], De = /* @__PURE__ */ new Map();
+let We = {}, ae = {}, X = {}, mt = {}, Ce = {}, ke = null, pe = null, qe = [], Ee = /* @__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 = () => {
+  const e = p(), t = Be(), o = ye();
+  ee(!1);
+  const { subjectLoaded: s, width: n, height: r, selected: l } = I(e), { debug: a, collection: c, advancedMode: u, move: g } = I(t), { get: b } = De(), f = t.property, E = () => {
     if (pe)
       return console.warn("lights camera already inited"), pe;
-    const 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
+    const d = b();
+    return ke = y(), pe = k(), c.value.forEach((i) => {
+      const x = i === "key" ? pe : d, { group: V, light: A, directional: j, visualization: L } = S(
+        i,
+        x
       );
-      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 = () => {
+      X[i] = A, We[i] = V, mt[i] = j, Ce[i] = L, X[i].castShadow = !0, X[i].angle = Math.PI / 8, X[i].penumbra = 0.2, X[i].shadow.camera.near = 0.5, X[i].shadow.camera.far = 12, X[i].shadow.focus = 0.9, X[i].shadow.mapSize.set(4096, 4096), X[i].shadow.bias = -2e-4, X[i].shadow.normalBias = 0.02, X[i].shadow.radius = 2, X[i].shadow.camera.updateProjectionMatrix();
+    }), q(), C(), pe;
+  }, D = () => {
     if (!pe)
       throw new Error("Light camera not initialized.");
     return pe;
   }, 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 d = b(), i = new M.AmbientLight(f("key", "color"), 0.75);
+    return d.add(i), i;
+  }, k = () => {
+    const d = b(), i = new M.PerspectiveCamera(
       75,
       n.value / r.value,
       0.1,
       100
     );
-    return a.position.set(0, 0, 1.5), c.add(a), a;
+    return i.position.set(0, 0, 1.5), d.add(i), i;
   };
-  function M(c, a = null) {
-    const w = v(), E = new S.Group(), L = new S.SpotLight(
-      f(c, "color"),
-      f(c, "opacity")
+  function S(d, i = null) {
+    const x = b(), V = new M.Group(), A = new M.SpotLight(
+      f(d, "color"),
+      f(d, "opacity")
     );
-    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 };
+    A.position.set(0, 0, 0);
+    const j = new M.DirectionalLight(f(d, "color"), 0.2);
+    j.position.set(0, 0, 4), F(), A.target.position.set(0, 1, 0), A.target.updateMatrixWorld(), x.add(A.target), V.add(A), V.add(j);
+    const L = xo(
+      A,
+      f(d, "visualizationColor")
+    ), P = t.isVisible(d);
+    return L.visible = P, V.add(L), i.add(V), { group: V, light: A, directional: j, visualization: L };
   }
-  const z = () => {
-    H(), Q(), R();
-  }, 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;
+  const w = () => {
+    F(), Z(), U();
+  }, F = () => {
+    ke && ke.color.set(f("key", "color"));
+    const d = t.lights[l.value];
+    d && Object.keys(d).forEach((i) => {
+      const x = X[i];
+      if (!x) return;
+      const V = f(i, "color"), A = f(i, "visible"), j = f(i, "opacity"), L = f(i, "shadow") || !1;
+      if (V && x.color.set(V), x.visible = A, j != null && (x.intensity = j), x.castShadow = L, L) {
+        const P = f(i, "shadowSettings", {});
+        x.shadow.mapSize.set(
+          P.width || 1024,
+          P.height || 1024
+        ), x.shadow.camera.near = P.near || 0.5, x.shadow.camera.far = P.far || 50, x.shadow.needsUpdate = !0;
       }
     });
-  }, 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 = () => {
+    const d = t.lights[l.value];
+    d && Object.keys(d).forEach((i) => {
+      if (!Ce[i]) return console.warn(`${i} does not exist`);
+      const x = t.isVisible(i);
+      Ce[i].visible = x, Ce[i].material.color.set(f(i, "color"));
     });
-  }, 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]));
+  }, U = () => {
+    const d = t.lights[l.value];
+    d && Object.keys(d).forEach((i) => {
+      const x = f(i, "debug") || a.value;
+      !ae[i] && x && (ae[i] = Y(i, X[i]), X[i].add(ae[i])), ae[i] && !x && (ae[i] = Q(ae[i]));
     });
-  }, I = (c, a) => {
-    const w = v(), E = new S.SpotLightHelper(
-      a,
-      f(c, "visualizationColor")
+  }, Y = (d, i) => {
+    const x = b(), V = new M.SpotLightHelper(
+      i,
+      f(d, "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,
+    return x.add(V), V;
+  }, Q = (d) => {
+    const i = b();
+    if (!(!i || !d))
+      return i.remove(d), d.dispose(), d = null, d;
+  }, q = () => {
+    const d = D(), i = o.bounds;
+    if (!i) return;
+    const x = new M.Vector3(
+      i.center.x,
+      i.center.y,
       // + bounds.size.y + 0.05,
-      a.center.z
-    ), E = new S.Vector3().subVectors(w, c.position).normalize(), L = new S.Vector3(
-      E.x,
+      i.center.z
+    ), V = new M.Vector3().subVectors(x, d.position).normalize(), A = new M.Vector3(
+      V.x,
       0,
-      E.z
-    ).normalize(), j = new S.Vector3(
-      -L.z,
+      V.z
+    ).normalize(), j = new M.Vector3(
+      -A.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);
+      A.x
+    ), P = 2 * d.position.distanceTo(x) / Math.sqrt(3), W = 1, _ = x.clone().add(j.clone().multiplyScalar(-P / W)).add(V.clone().multiplyScalar(Math.sqrt(3) * P / 2)), K = x.clone().add(j.clone().multiplyScalar(P / W)).add(V.clone().multiplyScalar(Math.sqrt(3) * P / 2));
+    We.fill.position.copy(_), We.back.position.copy(K), c.value.forEach((re) => {
+      var N, le, ue;
+      const m = X[re];
+      m.shadow.needsUpdate = !0, m.target.position.copy(x), m.target.updateMatrixWorld(), (N = Ce[re]) == null || N.lookAt(x), (ue = (le = ae[re]) == null ? void 0 : le.update) == null || ue.call(le);
     });
-  }, 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);
+  }, B = (d) => {
+    const i = t.lights[d];
+    if (!i) return;
+    const x = `watcher-${d}`;
+    if (Ee.has(x)) return;
+    const V = [];
+    Object.keys(i).forEach((j) => {
+      var L, P;
+      (L = i[j]) != null && L.color && V.push(() => i[j].color), (P = i[j]) != null && P.visible && V.push(() => i[j].visible);
     });
-    const L = U(
-      () => E.map((j) => j()),
-      z,
+    const A = O(
+      () => V.map((j) => j()),
+      w,
       { deep: !0 }
     );
-    De.set(w, L);
-  }, V = (c) => {
-    const a = `watcher-${c}`, w = De.get(a);
-    w && (w(), De.delete(a));
-  }, k = () => {
+    Ee.set(x, A);
+  }, T = (d) => {
+    const i = `watcher-${d}`, x = Ee.get(i);
+    x && (x(), Ee.delete(i));
+  }, C = () => {
     qe.push(
-      U(
+      O(
         () => [u.value, l.value, g.value],
-        () => z()
+        () => w()
       )
     ), qe.push(
-      U(
+      O(
         () => s.value,
-        (c) => {
-          c === !0 && W();
+        (d) => {
+          d === !0 && q();
         }
       )
     ), qe.push(
-      U(
+      O(
         () => l.value,
-        (c, a) => {
-          a && V(a), c != null && (x(c), Ht(z));
+        (d, i) => {
+          i && T(i), d != null && (B(d), Ht(w));
         },
         { immediate: !0 }
       )
     );
   };
   return {
-    init: A,
-    updatePosition: W,
-    getCamera: C,
+    init: E,
+    updatePosition: q,
+    getCamera: D,
     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 d = b();
+      d && (qe.forEach((i) => i()), qe = [], Ee.forEach((i) => i()), Ee.clear(), Object.values(X).forEach((i) => d.remove(i)), Object.values(mt).forEach((i) => d.remove(i)), Object.values(ae).forEach((i) => d.remove(i)), Object.values(Ce).forEach((i) => {
+        var x, V, A, j;
+        d.remove(i), (V = (x = i.geometry) == null ? void 0 : x.dispose) == null || V.call(x), (j = (A = i.material) == null ? void 0 : A.dispose) == null || j.call(A);
+      }), ke && d.remove(ke), We = {}, ae = {}, X = {}, mt = {}, Ce = {}, ke = null, pe = null);
     }
   };
-}, Mt = () => {
-  const e = Me(), o = st(), { getCamera: t } = nt();
+}, wt = () => {
+  const e = Be(), t = st(), { getCamera: o } = nt();
   return {
     activate: () => {
-      o.setMode({
+      t.setMode({
         mode: "lights",
-        camera: t(),
+        camera: o(),
         store: e,
         options: {
           enableZoom: !0,
@@ -1243,275 +1271,254 @@ const nt = () => {
         }
       });
     },
-    frameToBounds: o.frameToBounds,
-    syncToStore: o.syncToStore,
-    applyFromStore: o.applyFromStore
+    frameToBounds: t.frameToBounds,
+    syncToStore: t.syncToStore,
+    applyFromStore: t.applyFromStore
   };
 };
 let me = null;
-const So = () => {
+const wo = () => {
   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;
+    const o = p();
+    return me = new M.LoadingManager(), me.onStart = function(s) {
+      o.loading.active = !0, o.loading.url = s, o.loading.percent = 0;
     }, me.onError = () => {
-      n.url = null, t.loading.active = !1, t.loading.url = null;
+      o.loading.active = !1, o.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);
+      o.loading.active = !1, o.loading.url = null, o.loading.percent = 100;
+    }, me.onProgress = function(s, n, r) {
+      o.loading.percent = Math.round(n / r * 100);
     }, me;
   };
   return { get: () => (me || e(), me) };
 };
-let O = null, Oe = null, Ue = null;
-const xt = () => {
-  const e = b(), { get: o } = we(), { getCamera: t } = Ae(), { width: s, height: n, subjectLoaded: r } = $(e);
+let R = null, _e = null, Ue = null;
+const St = () => {
+  const e = p(), { get: t } = De(), { getCamera: o } = Le(), { width: s, height: n, subjectLoaded: r } = I(e);
   function l(g) {
-    return console.debug("useRenderer init"), 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);
+    return console.debug("useRenderer init"), R ? (console.debug("renderer already inited"), R) : (R = new M.WebGLRenderer({ antialias: !0, alpha: !0 }), R.setSize(s.value, n.value), R.toneMapping = M.ACESFilmicToneMapping, R.toneMappingExposure = 1.2, R.shadowMap.enabled = !0, R.shadowMap.type = M.PCFSoftShadowMap, R.gammaFactor = 2.2, R.gammaOutput = !0, R.outputColorSpace = M.SRGBColorSpace, g && g.appendChild(R.domElement), e.loaded.renderer = !0, R);
   }
-  const 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 a = () => {
+    if (!R) throw new Error("Renderer has not been initialized");
+    return R;
+  }, c = () => {
+    const g = t(), b = o();
+    !g || !b || R.render(g, b);
   };
-  Oe = U(
+  _e = O(
     () => [s.value, n.value],
-    ([g, v]) => {
-      !g || !v || !O || O.setSize(g, v);
+    ([g, b]) => {
+      !g || !b || !R || R.setSize(g, b);
     }
-  ), Ue = U(
+  ), Ue = O(
     () => r.value,
-    () => d()
+    () => c()
   );
   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);
+    console.debug("renderer disposed"), e.loaded.renderer = !1, _e == null || _e(), Ue == null || Ue(), _e = null, Ue = null, R && (R.domElement.parentElement && R.domElement.parentElement.removeChild(R.domElement), R.dispose(), R = null);
   }
   return {
     init: l,
-    get: i,
+    get: a,
     dispose: u,
-    render: d
+    render: c
   };
-}, jt = (e, o, t = {}) => {
-  const { removeSpecular: s = !1, removeShininess: n = !1 } = t;
+}, Vt = (e, t, o = {}) => {
+  const { removeSpecular: s = !1, removeShininess: n = !1 } = o;
   e && e.traverse((r) => {
     if (!r.isMesh) return;
-    (Array.isArray(r.material) ? r.material : [r.material]).forEach((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);
+    (Array.isArray(r.material) ? r.material : [r.material]).forEach((a) => {
+      a && (a.color && a.color.set(t), s && a.specular && a.specular.set(0), n && typeof a.shininess == "number" && (a.shininess = 0), a.needsUpdate = !0);
     });
   });
-};
-let ce = null, _e = null, ze, Ee, ht = 0;
+}, Do = 1, Bo = "https://www.gstatic.com/draco/v1/decoders/";
+let he = null, fe = null, Ae, ze, jt = 0;
 const Ft = () => {
-  const { get: e } = 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();
+  const { get: e } = wo(), t = ye(), o = p(), s = Ve(), { selected: n } = I(o), { color: r, url: l } = I(t), { offset: a } = I(s), { getCamera: c } = Le(), { get: u } = De(), { render: g } = St(), b = (S) => {
+    const { frameToBounds: w } = xt(), { frameToBounds: F } = wt(), Z = ++jt;
+    o.subjectLoaded = !1, f();
+    const U = e();
+    fe || (fe = new ho(U), fe.setDecoderPath(Bo));
+    const Y = new mo(U);
+    Y.setDRACOLoader(fe), Y.setWithCredentials(!0), Y.manager.setURLModifier((Q) => Q), Y.load(S, (Q) => {
+      const q = Q == null ? void 0 : Q.scene;
+      if (Z !== jt) {
+        q == null || q.traverse((i) => {
+          var V;
+          if (!i.isMesh) return;
+          (V = i.geometry) == null || V.dispose();
+          const x = i.material;
+          Array.isArray(x) ? x.forEach((A) => A == null ? void 0 : A.dispose()) : x == null || x.dispose();
         });
         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 (!q)
+        return;
+      he = q;
+      const B = u(), T = c(), C = new M.Group();
+      C.name = "GLBSubject", C.add(q), q.traverse((i) => {
+        i.isMesh && (i.castShadow = !0, i.receiveShadow = !0);
+      }), Vt(q, r.value), q.scale.setScalar(Do), q.updateMatrixWorld(!0);
+      const G = Mt(q);
+      C.position.y -= G.bottom, C.updateMatrixWorld(!0), B.add(C), he = C;
+      const d = Mt(C);
+      t.setBounds(d), g(B, T), w(d), F(d), o.subjectLoaded = !0;
     });
-  }, z = () => ce, H = () => {
-    if (ze || Ee) {
-      console.warn("useSubject.init() called more than once");
+  }, f = () => {
+    if (!he) return;
+    u().remove(he), he.traverse((w) => {
+      var Z;
+      if (!w.isMesh) return;
+      (Z = w.geometry) == null || Z.dispose();
+      const F = w.material;
+      Array.isArray(F) ? F.forEach((U) => U == null ? void 0 : U.dispose()) : F == null || F.dispose();
+    }), he = null, o.subjectLoaded = !1;
+  }, E = (S) => {
+    Vt(he, S);
+  }, D = () => he, y = () => {
+    if (Ae || ze) {
+      console.warn("useGLB.init() called more than once");
       return;
     }
-    ze = U(
+    Ae = O(
       () => n.value,
-      (R, I) => {
-        !R || R === I || (console.log("url", l.value), l.value && C(l.value));
+      (S, w) => {
+        !S || S === w || l.value && b(l.value);
       },
       { immediate: !0 }
-    ), Ee = U(
+    ), ze = O(
       () => r.value,
-      (R) => M(R)
+      (S) => E(S)
     );
-  }, Q = () => {
-    console.debug("fbx disposed"), ze == null || ze(), Ee == null || Ee(), ze = null, Ee = null, y(), B();
+  }, k = () => {
+    Ae == null || Ae(), ze == null || ze(), Ae = null, ze = null, f(), fe == null || fe.dispose(), fe = null;
   };
   return Rt(() => {
-    Q();
-  }), { init: H, get: z, dispose: Q, updateColor: M };
-}, xo = (e, o, t = 500) => {
+    k();
+  }), { init: y, get: D, dispose: k, updateColor: E };
+}, Mo = (e, t, o = 500) => {
   const s = e.material;
   s.transparent = !0;
-  const n = s.opacity, r = performance.now(), l = (i) => {
-    const d = i - r, u = Math.min(d / t, 1), g = n + (o - n) * u;
+  const n = s.opacity, r = performance.now(), l = (a) => {
+    const c = a - r, u = Math.min(c / o, 1), g = n + (t - n) * u;
     s.opacity = g, u < 1 && requestAnimationFrame(l);
   };
   requestAnimationFrame(l);
 };
-let q = null, $e = null, Ie = null, Ne = null, Xe = null;
+let H = null, Ie = null, $e = null, Ne = null, Ze = 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,
+  const e = Me(), t = Ve(), o = ye(), { show: s, lineColor: n, centerLineColor: r, divisions: l, size: a, opacity: c } = I(e), { offset: u } = I(t), { bounds: g } = I(o), { get: b } = De(), f = () => {
+    const B = Z(n.value), T = Z(r.value), { positions: C, colors: G } = E({
+      size: a.value,
       divisions: l.value,
-      color: 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);
+      color: B,
+      centerColor: T
+    }), d = D(C, G), i = y(c.value);
+    return new M.LineSegments(d, i);
+  }, E = ({ size: B, divisions: T, color: C, centerColor: G }) => {
+    const d = B / 2, i = B / T, x = [], V = [], A = Math.floor(T / 2), j = (L, P, W, _) => {
+      x.push(L, P, W);
+      const K = _ ? G : C;
+      V.push(K.r, K.g, K.b);
     };
-    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 L = 0; L <= T; L++) {
+      const P = -d + L * i, W = L === A;
+      for (let _ = 0; _ <= T; _++) {
+        const K = -d + _ * i, m = W || _ === A;
+        j(-d, P, K, m), j(+d, P, K, m);
       }
     }
-    for (let 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 L = 0; L <= T; L++) {
+      const P = -d + L * i, W = L === A;
+      for (let _ = 0; _ <= T; _++) {
+        const K = -d + _ * i, m = W || _ === A;
+        j(P, -d, K, m), j(P, +d, K, m);
       }
     }
-    for (let 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 L = 0; L <= T; L++) {
+      const P = -d + L * i, W = L === A;
+      for (let _ = 0; _ <= T; _++) {
+        const K = -d + _ * i, m = W || _ === A;
+        j(P, K, -d, m), j(P, K, +d, m);
       }
     }
-    return { positions: w, colors: E };
-  }, C = (x, V) => {
-    const k = new S.BufferGeometry();
-    return k.setAttribute(
+    return { positions: x, colors: V };
+  }, D = (B, T) => {
+    const C = new M.BufferGeometry();
+    return C.setAttribute(
       "position",
-      new S.Float32BufferAttribute(x, 3)
-    ), k.setAttribute("color", new S.Float32BufferAttribute(V, 3)), k;
-  }, y = (x) => new S.LineBasicMaterial({
+      new M.Float32BufferAttribute(B, 3)
+    ), C.setAttribute("color", new M.Float32BufferAttribute(T, 3)), C;
+  }, y = (B) => new M.LineBasicMaterial({
     transparent: !0,
-    opacity: x,
+    opacity: B,
     depthWrite: !1,
-    blending: S.NormalBlending,
+    blending: M.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);
+  }), k = () => {
+    H && F(s.value);
+  }, S = () => {
+    const B = b();
+    H = f(n.value), Q(), B.add(H), w(0);
+  }, w = (B) => {
+    H && (H.material.transparent = !0, B = s.value ? B : 0, H.material.opacity = B);
+  }, F = (B) => {
+    const T = B ? c.value : 0;
+    Mo(H, T, 500);
+  }, Z = (B) => ({
+    r: (B >> 16 & 255) / 255,
+    g: (B >> 8 & 255) / 255,
+    b: (B & 255) / 255
+  }), U = (B, T) => {
+    if (!H) return;
+    const C = Z(B), G = Z(T), d = H.geometry.attributes.color, i = H.geometry.attributes.position, x = i.count, V = a.value / 2, A = a.value / l.value, j = Math.floor(l.value / 2);
+    for (let L = 0; L < x; L++) {
+      const P = i.getX(L), W = i.getY(L), _ = i.getZ(L), K = Math.round((P + V) / A), re = Math.round((W + V) / A), m = Math.round((_ + V) / A), le = K === j || re === j || m === j ? C : G;
+      d.setXYZ(L, le.r, le.g, le.b);
     }
-    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);
+    d.needsUpdate = !0;
+  }, Y = () => {
+    const B = b();
+    H && (B.remove(H), H.geometry.dispose(), H.material.dispose(), H = null), H = f(n.value), Q(), B.add(H);
+  }, Q = () => {
+    var T;
+    const B = ((T = g.value) == null ? void 0 : T.bottom) || 0;
+    H.position.set(0, B + a.value / 2 + 7e-3, 0);
   };
-  return $e = U(
-    () => [i.value, l.value],
-    ([x, V], [k, P]) => {
-      x === k && V === P || (I(), B());
+  return Ie = O(
+    () => [a.value, l.value],
+    ([B, T], [C, G]) => {
+      B === C && T === G || (Y(), k());
     },
     { flush: "post" }
-  ), Ie = U(
+  ), $e = O(
     () => s.value,
     () => {
-      B();
+      k();
     },
     { flush: "post" }
-  ), Ne = U(
-    () => d.value,
-    (x) => {
-      z(x);
+  ), Ne = O(
+    () => c.value,
+    (B) => {
+      w(B);
     },
     { flush: "post" }
-  ), Xe = U(
+  ), Ze = O(
     () => [n.value, r.value],
-    ([x, V]) => {
-      R(V, x);
+    ([B, T]) => {
+      U(T, B);
     }
   ), {
-    init: M,
-    showHideGrid: H,
-    updateGridColors: R,
+    init: S,
+    showHideGrid: F,
+    updateGridColors: U,
     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 T, C;
+      const B = b();
+      Ie == null || Ie(), $e == null || $e(), Ne == null || Ne(), Ze == null || Ze(), Ie = null, $e = null, Ne = null, Ze = null, H && (B.remove(H), (T = H.geometry) == null || T.dispose(), Array.isArray(H.material) ? H.material.forEach((G) => G == null ? void 0 : G.dispose()) : (C = H.material) == null || C.dispose(), H = null);
     }
   };
-}, Co = { class: "three-dimension-tool" }, wo = ["data-id"], Mo = /* @__PURE__ */ Object.assign({
+}, ko = { class: "three-dimension-tool" }, Eo = ["data-id"], Ao = /* @__PURE__ */ Object.assign({
   name: "ThreeDimensionTool",
   slug: "three-dimension-tool",
   inheritAttrs: !1
@@ -1521,93 +1528,93 @@ 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 o = null;
+    const s = v(() => Number(t.id)), n = p(), r = Be(), l = ye(), { move: a } = I(r), c = ee(null), u = ee(!1);
+    let g, b, f;
+    const E = st(), D = xt(), y = wt(), { init: k } = De(), { init: S } = St(), { init: w } = Le(), { init: F, updateVisibility: Z } = Lt(), { init: U, updatePosition: Y } = nt(), { init: Q } = Ft(), { init: q } = Pt(), B = () => {
+      if (!c.value || u.value) {
         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";
+      u.value = !0, f = k(), b = S(c.value), Q(), g = w(), U(), q(), F(), E.init(b), T();
+    }, T = () => {
+      u.value && (a.value !== o && (o = a.value, a.value ? y.activate() : D.activate()), E.update(), a.value ? (Y(), y.syncToStore()) : D.syncToStore(), Z(), b.render(f, g), requestAnimationFrame(T));
+    }, C = () => {
+      if (c.value) {
+        const G = window.innerWidth, d = window.innerHeight;
+        n.$patch({ width: G, height: d }), c.value.style.height = d + "px";
       }
     };
-    return Zt(() => {
-      console.log("onMounted", d.value), x(), window.addEventListener("resize", k), k();
-    }), U(
+    return Xt(() => {
+      console.log("onMounted", c.value), B(), window.addEventListener("resize", C), C();
+    }), O(
       () => l.bounds,
-      (P) => {
-        P && (A.frameToBounds(P), y.activate(), y.frameToBounds(P), y.syncToStore(), C.activate(), C.frameToBounds(P), C.syncToStore());
+      (G) => {
+        G && (E.frameToBounds(G), y.activate(), y.frameToBounds(G), y.syncToStore(), D.activate(), D.frameToBounds(G), D.syncToStore());
       }
-    ), U(
+    ), O(
       () => n.subjectLoaded,
-      (P) => {
-        if (!P) return;
-        const c = l.bounds;
-        if (!c) return;
-        A.frameToBounds(c);
-        const a = A.get();
-        a.update(), a.saveState();
+      (G) => {
+        if (!G) return;
+        const d = l.bounds;
+        if (!d) return;
+        E.frameToBounds(d);
+        const i = E.get();
+        i.update(), i.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", {
+      console.debug("ThreeDimensionTool unMounted"), window.removeEventListener("resize", this), u.value = !1, Ft().dispose(), Pt().dispose(), Lt().dispose(), nt().dispose(), st().dispose(), Le().dispose(), De().dispose(), St().dispose();
+    }), (G, d) => (Je(), Yt("div", ko, [
+      ht("", !0),
+      Qt("div", {
         class: "tres",
         ref_key: "tres",
-        ref: d,
+        ref: c,
         "data-id": s.value
-      }, null, 8, wo)
+      }, null, 8, Eo)
     ]));
   }
-}), 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 () => {
+}), Gt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-CIql5zKW.js") }), J = (e = "../i18n") => {
+  const t = no(), o = ee({}), s = v(() => t.lang.isoName || "en-US"), n = async () => {
     const r = `${e}/${s.value}/index.js`;
     if (Gt[r])
       try {
         const l = await Gt[r]();
-        l.default && Object.assign(t.value, l.default);
+        l.default && Object.assign(o.value, l.default);
       } catch (l) {
         console.error(`Error loading i18n for ${s.value}`, l);
       }
     else
       console.error(`Module not found: ${r}`);
   };
-  return U(
+  return O(
     () => s.value,
     () => {
       n();
     },
     { immediate: !0 }
-  ), Qt(() => {
+  ), Wt(() => {
     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);
+  }), { lang: o };
+}, Se = ({ tab: e = oe, store: t, options: o = [] }) => {
+  const s = ao(), n = p(s), r = v({
+    get: () => n.isExpanded(o),
+    set: (c) => {
+      c && n.setActive(e);
     }
-  }), l = h(() => o && o.changed);
+  }), l = v(() => t && t.changed);
   return { click: () => n.setActive(e), expanded: r, selected: l };
-}, kt = Z({
+}, Dt = $({
   name: "ToolResetButton",
   props: {
     label: { type: String, required: !1, default: "Reset" },
     disable: Boolean
   },
   emits: ["click"],
-  setup(e, { slots: o, emit: t }) {
+  setup(e, { slots: t, emit: o }) {
     function s() {
-      t("click");
+      o("click");
     }
     function n() {
       const r = {
@@ -1617,37 +1624,37 @@ const Pt = () => {
         onClick: s,
         disable: e.disable
       };
-      return m("div", { class: "tool-reset-button q-pa-md" }, m(qt, r));
+      return h("div", { class: "tool-reset-button q-pa-md" }, h(Ot, r));
     }
     return () => n();
   }
-}), _t = Z({
+}), It = $({
   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: o }) {
+    const { lang: s } = J(), n = p(), r = lt(), l = ye(), a = Ve(), { active: c } = I(n), u = ee(!1), g = ee(!1), b = ee(!1), f = v(
       () => {
-        var k;
-        return (k = s.value.td) == null ? void 0 : k.components.colors.items.background;
+        var C;
+        return (C = s.value.td) == null ? void 0 : C.components.colors.items.background;
       }
-    ), A = h(
+    ), E = v(
       () => {
-        var k;
-        return (k = s.value.td) == null ? void 0 : k.components.colors.items.subject;
+        var C;
+        return (C = s.value.td) == null ? void 0 : C.components.colors.items.subject;
       }
-    ), C = h(
+    ), D = v(
       () => {
-        var k;
-        return (k = s.value.td) == null ? void 0 : k.components.colors.items.ground;
+        var C;
+        return (C = s.value.td) == null ? void 0 : C.components.colors.items.ground;
       }
-    ), y = h(() => ({
-      key: A.value,
-      label: A.value,
+    ), y = v(() => ({
+      key: E.value,
+      label: E.value,
       type: "none",
       icon: "f_subject",
       size: "sm",
       color: l.colorHex,
       onClick: () => g.value = !0
-    })), B = h(() => ({
+    })), k = v(() => ({
       key: f.value,
       label: f.value,
       type: "none",
@@ -1655,67 +1662,67 @@ const Pt = () => {
       size: "sm",
       color: r.colorHex,
       onClick: () => u.value = !0
-    })), M = h(() => ({
-      key: C.value,
-      label: C.value,
+    })), S = v(() => ({
+      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);
+      color: a.colorHex,
+      onClick: () => b.value = !0
+    })), w = v({
+      get: () => b.value || u.value || g.value,
+      set: (C) => b.value = u.value = g.value = !1
+    }), F = v({
+      get: () => b.value ? a.colorHex : u.value ? r.colorHex : l.colorHex,
+      set: (C) => {
+        if (console.log("showGround", b.value), b.value) {
+          console.log("val", C), a.setColorHex(C);
           return;
         }
         if (u.value) {
-          r.setColorHex(k);
+          r.setColorHex(C);
           return;
         }
-        l.setColorHex(k);
+        l.setColorHex(C);
       }
-    }), Q = h(() => ({
+    }), Z = v(() => ({
       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: w.value ? "display: none" : ""
+    })), U = v(() => ({
+      modelValue: F.value,
+      "onUpdate:modelValue": (C) => F.value = C,
+      show: w.value,
+      "onUpdate:show": (C) => w.value = C,
+      label: Y.value
+    })), Y = v(() => b.value ? D.value : u.value ? f.value : E.value), Q = () => {
+      r.reset(), l.resetColor(), a.reset();
+    }, q = v(() => l.changed || a.changed || r.changed), B = v(() => ({
       label: "Reset Colors",
-      onClick: N,
-      style: z.value ? "display: none" : "",
-      disable: !W.value
+      onClick: Q,
+      style: w.value ? "display: none" : "",
+      disable: !q.value
     }));
-    U(d, (k) => {
-      k !== se && (z.value = !1);
+    O(c, (C) => {
+      C !== oe && (w.value = !1);
     });
-    function V() {
-      return m("div", {
+    function T() {
+      return h("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)
+        h("div", Z.value, [
+          h(ne, y.value),
+          h(ne, k.value),
+          h(ne, S.value)
         ]),
-        m(kt, x.value),
-        m(Ot, R.value)
+        h(Dt, B.value),
+        h(qt, U.value)
       ]);
     }
-    return () => V();
+    return () => T();
   }
-}), ko = Z({
+}), zo = $({
   name: "TdColorsExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1723,101 +1730,101 @@ 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({
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = Ut(), { expanded: r, selected: l } = Se({
       store: n,
-      options: se,
-      tab: se
-    }), i = h(() => {
+      options: oe,
+      tab: oe
+    }), a = v(() => {
       var u;
       return (u = s.value.td) == null ? void 0 : u.components.colors.title;
     });
-    h({
+    v({
       get: () => e.modelValue,
-      set: (u) => t("update:modelValue", u)
+      set: (u) => o("update:modelValue", u)
     });
-    function d() {
+    function c() {
       const u = {
         class: "td-colors-expansion",
         "data-cy": "td-colors-expansion",
         modelValue: r.value,
         "onUpdate:modelValue": (g) => r.value = g,
-        label: i.value,
+        label: a.value,
         selected: l.value,
         icon: "f_palette"
       };
-      return m(rt, u, () => m(_t));
+      return h(rt, u, () => h(It));
     }
-    return () => d();
+    return () => c();
   }
-}), $t = Z({
+}), $t = $({
   name: "TdGridSection",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = ke(), r = h(
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = Me(), r = v(
       () => {
-        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 f, E;
+        return l.value ? ((f = s.value.td) == null ? void 0 : f.components.grid.toggle.off) || "" : ((E = s.value.td) == null ? void 0 : E.components.grid.toggle.on) || "";
       }
-    ), l = h({
+    ), l = v({
       get: () => n.show,
       set: (f) => n.setProperty("show", f)
-    }), i = h({
+    }), a = v({
       get: () => n.opacity,
       set: (f) => n.setProperty("opacity", f)
-    }), d = h({
+    }), c = v({
       get: () => n.size,
       set: (f) => n.setProperty("size", f)
-    }), u = h({
+    }), u = v({
       get: () => n.divisions,
       set: (f) => n.setProperty("divisions", f)
-    }), g = h(() => ({
+    }), g = v(() => ({
       label: "Reset Grid",
       disable: !n.changed,
       onClick: n.reset
     }));
-    function v() {
+    function b() {
       const f = {
         class: "td-grid-tool"
-      }, A = {
+      }, E = {
         access: "grd",
         // drawer: !props.noIcons,
         modelValue: l.value,
-        "onUpdate:modelValue": (z) => l.value = z,
+        "onUpdate:modelValue": (w) => l.value = w,
         label: r.value
         // dark: props.dark,
         // disable: props.disable,
         // hasAccess: props.hasAccess,
         // onBlockAccess: emitBlockAccess,
-      }, C = {
+      }, D = {
         title: "Opacity",
         icon: "f_opacity",
         min: 1,
         max: 100,
         initial: 50,
-        modelValue: i.value * 100,
-        "onUpdate:modelValue": (z) => i.value = z / 100
+        modelValue: a.value * 100,
+        "onUpdate:modelValue": (w) => a.value = w / 100
       }, y = {
         title: "Size",
         icon: "f_size",
         min: 100,
         max: 300,
         initial: 200,
-        modelValue: d.value * 100,
-        "onUpdate:modelValue": (z) => d.value = z / 100
-      }, B = {
+        modelValue: c.value * 100,
+        "onUpdate:modelValue": (w) => c.value = w / 100
+      }, k = {
         title: "Number of lines",
         icon: "f_grid",
         min: 2,
         max: 10,
         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": (w) => u.value = w
+      }, S = [h(Ke, E)];
+      return l.value && (S.push(h(dt, y)), S.push(h(dt, k)), S.push(h(dt, D)), S.push(h(Dt, g.value))), h("div", f, S);
     }
-    return () => v();
+    return () => b();
   }
-}), Bo = Z({
+}), To = $({
   name: "TdGridExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1825,34 +1832,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({
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = Me(), { expanded: r, selected: l } = Se({
       store: n,
-      options: Se,
-      tab: Se
-    }), i = h(() => {
+      options: xe,
+      tab: xe
+    }), a = v(() => {
       var u;
       return (u = s.value.td) == null ? void 0 : u.components.grid.title;
     });
-    h({
+    v({
       get: () => e.modelValue,
-      set: (u) => t("update:modelValue", u)
+      set: (u) => o("update:modelValue", u)
     });
-    function d() {
+    function c() {
       const u = {
         class: "td-colors-expansion",
         "data-cy": "td-colors-expansion",
         modelValue: r.value,
         "onUpdate:modelValue": (g) => r.value = g,
-        label: i.value,
+        label: a.value,
         selected: l.value,
         icon: "f_grid"
       };
-      return m(rt, u, () => m($t));
+      return h(rt, u, () => h($t));
     }
-    return () => d();
+    return () => c();
   }
-}), It = Z({
+}), Nt = $({
   name: "TdLightsSection",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1860,172 +1867,172 @@ 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({
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = Be(), r = p(), l = nt(), { active: a } = I(r), c = v({
       get: () => n.advancedMode,
-      set: (p) => n.setAdvanced(p)
-    }), u = h({
+      set: (m) => n.setAdvanced(m)
+    }), u = v({
       get: () => n.move,
-      set: (p) => n.setMove(p)
-    }), g = h(
+      set: (m) => n.setMove(m)
+    }), g = v(
       () => {
-        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, N;
+        return n.advancedMode ? ((m = s.value.td) == null ? void 0 : m.components.lights.toggles.advanced.off) || "" : ((N = s.value.td) == null ? void 0 : N.components.lights.toggles.advanced.on) || "";
       }
-    ), v = h(() => ({
-      modelValue: d.value,
-      "onUpdate:modelValue": (p) => d.value = p,
+    ), b = v(() => ({
+      modelValue: c.value,
+      "onUpdate:modelValue": (m) => c.value = m,
       label: g.value
-    })), f = h(
+    })), f = v(
       () => {
-        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, N;
+        return n.move ? ((m = s.value.td) == null ? void 0 : m.components.lights.toggles.position.off) || "" : ((N = s.value.td) == null ? void 0 : N.components.lights.toggles.position.on) || "";
       }
-    ), A = h(() => ({
+    ), E = v(() => ({
       modelValue: u.value,
-      "onUpdate:modelValue": (p) => u.value = p,
+      "onUpdate:modelValue": (m) => u.value = m,
       label: f.value
-    })), C = h(
+    })), D = v(
       () => {
-        var p;
-        return ((p = s.value.td) == null ? void 0 : p.components.lights.color) || "";
+        var m;
+        return ((m = s.value.td) == null ? void 0 : m.components.lights.color) || "";
       }
-    ), y = te(!1), B = h(() => ({
-      key: C.value,
-      label: C.value,
+    ), y = ee(!1), k = v(() => ({
+      key: D.value,
+      label: D.value,
       type: "none",
       icon: "f_bulb_light",
       size: "sm",
       color: n.colorHex("key"),
       onClick: () => y.value = !0
-    })), M = h(
+    })), S = v(
       () => {
-        var p;
-        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.key) || "";
+        var m;
+        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.key) || "";
       }
-    ), z = te(!1), H = h({
+    ), w = ee(!1), F = v({
       get: () => n.colorHex("key"),
-      set: (p) => n.setColorHex("key", p)
-    }), Q = h(() => ({
-      key: M.value,
-      label: M.value,
+      set: (m) => n.setColorHex("key", m)
+    }), Z = v(() => ({
+      key: S.value,
+      label: S.value,
       type: "none",
       icon: "f_bulb_key",
       size: "sm",
-      color: H.value,
-      onClick: () => z.value = !0
-    })), R = h(
+      color: F.value,
+      onClick: () => w.value = !0
+    })), U = v(
       () => {
-        var p;
-        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.back) || "";
+        var m;
+        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.back) || "";
       }
-    ), I = te(!1), N = h({
+    ), Y = ee(!1), Q = v({
       get: () => n.colorHex("back"),
-      set: (p) => n.setColorHex("back", p)
-    }), W = h(() => ({
-      key: R.value,
-      label: R.value,
+      set: (m) => n.setColorHex("back", m)
+    }), q = v(() => ({
+      key: U.value,
+      label: U.value,
       type: "none",
       icon: "f_bulb_back",
       size: "sm",
-      color: N.value,
-      onClick: () => I.value = !0,
-      disable: !V.value
-    })), x = h(
+      color: Q.value,
+      onClick: () => Y.value = !0,
+      disable: !T.value
+    })), B = v(
       () => {
-        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) || "";
+        var m, N;
+        return T.value ? ((m = s.value.td) == null ? void 0 : m.components.lights.toggles.back.off) || "" : ((N = s.value.td) == null ? void 0 : N.components.lights.toggles.back.on) || "";
       }
-    ), V = h({
+    ), T = v({
       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(
+      set: (m) => n.setProperty("back", "visible", m)
+    }), C = v(() => ({
+      modelValue: T.value,
+      "onUpdate:modelValue": (m) => T.value = m,
+      label: B.value
+    })), G = v(
       () => {
-        var p;
-        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.fill) || "";
+        var m;
+        return ((m = s.value.td) == null ? void 0 : m.components.lights.labels.fill) || "";
       }
-    ), c = te(!1), a = h({
+    ), d = ee(!1), i = v({
       get: () => n.colorHex("fill"),
-      set: (p) => n.setColorHex("fill", p)
-    }), w = h(() => ({
-      key: P.value,
-      label: P.value,
+      set: (m) => n.setColorHex("fill", m)
+    }), x = v(() => ({
+      key: G.value,
+      label: G.value,
       type: "none",
       icon: "f_bulb_fill",
       size: "sm",
-      color: a.value,
-      onClick: () => c.value = !0,
-      disable: !L.value
-    })), E = h(
+      color: i.value,
+      onClick: () => d.value = !0,
+      disable: !A.value
+    })), V = v(
       () => {
-        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) || "";
+        var m, N;
+        return A.value ? ((m = s.value.td) == null ? void 0 : m.components.lights.toggles.fill.off) || "" : ((N = s.value.td) == null ? void 0 : N.components.lights.toggles.fill.on) || "";
       }
-    ), L = h({
+    ), A = v({
       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);
+      set: (m) => n.setProperty("fill", "visible", m)
+    }), j = v(() => ({
+      modelValue: A.value,
+      "onUpdate:modelValue": (m) => A.value = m,
+      label: V.value
+    })), L = v({
+      get: () => y.value || w.value || d.value || Y.value,
+      set: (m) => y.value = w.value = d.value = Y.value = !1
+    }), P = v({
+      get: () => y.value || w.value ? n.colorHex("key") : d.value ? n.colorHex("fill") : n.colorHex("back"),
+      set: (m) => {
+        if (y.value || w.value) {
+          n.setColorHex("key", m);
           return;
         }
-        if (c.value) {
-          n.setColorHex("fill", p);
+        if (d.value) {
+          n.setColorHex("fill", m);
           return;
         }
-        n.setColorHex("back", p);
+        n.setColorHex("back", m);
       }
-    }), _ = 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(() => ({
+    }), W = v(() => ({
+      modelValue: P.value,
+      "onUpdate:modelValue": (m) => P.value = m,
+      show: L.value,
+      "onUpdate:show": (m) => L.value = m,
+      label: _.value
+    })), _ = v(() => y.value ? D.value : w.value ? S.value : d.value ? G.value : U.value), K = v(() => ({
       label: "Reset Lights",
       disable: !n.changed,
       onClick: () => {
         n.reset(), l.applyFromStore();
       }
     }));
-    U(d, (p) => {
-      p || (L.value = !0, V.value = !0);
-    }), U(i, (p) => {
-      p !== ge && (D.value = !1, u.value = !1);
+    O(c, (m) => {
+      m || (A.value = !0, T.value = !0);
+    }), O(a, (m) => {
+      m !== ve && (L.value = !1, u.value = !1);
     });
-    function J() {
-      const p = {
+    function re() {
+      const m = {
         class: "td-lights-tool"
       };
-      let K = [];
-      if (D.value)
-        K = [m(Ot, _.value)];
+      let N = [];
+      if (L.value)
+        N = [h(qt, W.value)];
       else {
         const le = {
           class: "td-colors-tool q-pa-xs row justify-center items-center q-gutter-md"
         }, ue = [];
-        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));
+        c.value ? (ue.push(h(ne, Z.value)), ue.push(h(ne, x.value)), ue.push(h(ne, q.value))) : ue.push(h(ne, k.value));
+        const je = [];
+        je.push(h(Ke, E.value)), c.value && (je.push(h(Ke, j.value)), je.push(h(Ke, C.value))), je.push(h(Ke, b.value)), N = [h("div", le, ue), ...je], N.push(h(Dt, K.value));
       }
-      return m("div", p, K);
+      return h("div", m, N);
     }
-    return () => J();
+    return () => re();
   }
-}), Do = Z({
+}), Lo = $({
   name: "TdLightExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -2033,70 +2040,70 @@ 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({
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = Be(), { expanded: r, selected: l } = Se({
       store: n,
-      options: ge,
-      tab: ge
-    }), i = h(() => {
+      options: ve,
+      tab: ve
+    }), a = v(() => {
       var u;
       return (u = s.value.td) == null ? void 0 : u.components.lights.title;
     });
-    h({
+    v({
       get: () => e.modelValue,
-      set: (u) => t("update:modelValue", u)
+      set: (u) => o("update:modelValue", u)
     });
-    function d() {
+    function c() {
       const u = {
         class: "td-lights-expansion",
         "data-cy": "td-lights-expansion",
         modelValue: r.value,
         "onUpdate:modelValue": (g) => r.value = g,
-        label: i.value,
+        label: a.value,
         selected: l.value,
         icon: "f_bulb_light"
       };
-      return m(rt, u, () => m(It));
+      return h(rt, u, () => h(Nt));
     }
-    return () => d();
+    return () => c();
   }
-}), Nt = Z({
+}), Zt = $({
   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() {
+  setup(e, { slots: t, emit: o }) {
+    const s = Symbol.for("RelatedThreeDSection"), n = Jt(s), r = p(), l = ye(), { poseId: a } = I(l);
+    function c() {
       const u = {
         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
+      return n && a.value && g.push(
+        h(n, {
+          id: a.value,
+          glbId: r.selected
         })
-      ), m("div", u, g);
+      ), h("div", u, g);
     }
-    return () => d();
+    return () => c();
   }
-}), zo = Z({
+}), Vo = $({
   name: "TdRelatedExpansion",
-  setup(e, { slots: o, emit: t }) {
-    const { expanded: s } = be({
-      options: xe,
-      tab: xe
-    }), n = h(() => "Related");
+  setup(e, { slots: t, emit: o }) {
+    const { expanded: s } = Se({
+      options: we,
+      tab: we
+    }), n = v(() => "Related");
     function r() {
       const l = {
         class: "td-related-expansion",
         modelValue: s.value,
-        "onUpdate:modelValue": (i) => s.value = i,
+        "onUpdate:modelValue": (a) => s.value = a,
         label: n.value,
         icon: "f_related"
       };
-      return m(rt, l, () => m(Nt));
+      return h(rt, l, () => h(Zt));
     }
     return () => r();
   }
-}), Xt = Z({
+}), Kt = $({
   name: "TdButtons",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -2108,191 +2115,191 @@ 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: o }) {
+    const s = xt(), n = wt(), r = Ct(), l = Ve(), a = Be(), c = lt(), u = ye(), { changed: g } = I(r), { changed: b } = I(l), { changed: f } = I(a), { changed: E } = I(c), { changed: D } = I(u), y = v(() => !(g.value || b.value || f.value || E.value || D.value));
+    function k() {
+      r.reset(), l.reset(), a.reset(), c.reset(), u.resetColor(), s.applyFromStore(), n.applyFromStore();
     }
-    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 = (F) => F.preventDefault();
+    function w() {
+      const Z = {
+        style: v(() => e.fixed ? "position: fixed;bottom: 0; left: 0; right: 0;border-top: 1px solid var(--grey-300)" : ""),
         class: "row justify-center items-center q-pa-md"
-      }, R = {
+      }, U = {
         class: "td-reset-button",
         label: "Reset All",
-        onClick: B,
-        onKeyup: M,
+        onClick: k,
+        onKeyup: S,
         rounded: !0,
         unelevated: !0,
         outline: !0,
         disable: y.value
       };
-      return m("div", Q, [m(qt, R)]);
+      return h("div", Z, [h(Ot, U)]);
     }
-    return () => z();
+    return () => w();
   }
-}), Eo = Z({
+}), jo = $({
   name: "TdExpansions",
-  setup(e, { slots: o, emit: t }) {
+  setup(e, { slots: t, emit: o }) {
     function s() {
-      return m("div", {
+      return h("div", {
         class: "td-expansions",
         onClick: (r) => r.stopPropagation(),
         style: "padding-bottom: 60px; position: relative "
       }, [
         // h(TsPoseButtonsSection),
-        m(je),
-        m(ko),
-        m(je),
-        m(Bo),
-        m(je),
-        m(Do),
-        m(je),
+        h(Fe),
+        h(zo),
+        h(Fe),
+        h(To),
+        h(Fe),
+        h(Lo),
+        h(Fe),
         // h(TsGridExpansion),
         // h(QSeparator),
         // h(TsAdjustmentExpansion),
-        m(zo),
-        m(je),
+        h(Vo),
+        h(Fe),
         // h('div', {}, store.loading.percent),
-        m(Xt)
+        h(Kt)
       ]);
     }
     return () => s();
   }
-}), To = Z({
+}), Fo = $({
   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(() => {
+    const t = Me(), o = p(), s = v(() => (o == null ? void 0 : o.hasAccess("grd")) || !1), { lang: n } = J(), r = v(() => {
       var g;
       return (g = n.value.td) == null ? void 0 : g.controls.colors.iconTitle;
-    }), { click: l, selected: i } = be({
-      store: o,
-      options: se,
-      tab: se
+    }), { click: l, selected: a } = Se({
+      store: t,
+      options: oe,
+      tab: oe
     });
-    function d(g) {
-      return t.block(g);
+    function c(g) {
+      return o.block(g);
     }
     function u() {
       const g = {
         hasAccess: s.value,
-        selected: i.value,
+        selected: a.value,
         onClick: l,
-        onBlockAccess: d,
+        onBlockAccess: c,
         size: e.size,
-        "data-id": se,
+        "data-id": oe,
         name: "colors",
         type: "none",
         icon: "f_palette",
         label: r.value
       };
-      return m(re, g, () => []);
+      return h(ne, g, () => []);
     }
     return () => u();
   }
-}), Ao = Z({
+}), Po = $({
   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(() => {
+    const t = Me(), o = p(), s = v(() => (o == null ? void 0 : o.hasAccess("grd")) || !1), { lang: n } = J(), r = v(() => {
       var g;
       return (g = n.value.td) == null ? void 0 : g.controls.grid.iconTitle;
-    }), { click: l, selected: i } = be({
-      store: o,
-      options: Se,
-      tab: Se
+    }), { click: l, selected: a } = Se({
+      store: t,
+      options: xe,
+      tab: xe
     });
-    function d(g) {
-      return t.block(g);
+    function c(g) {
+      return o.block(g);
     }
     function u() {
       const g = {
         hasAccess: s.value,
-        selected: i.value,
+        selected: a.value,
         onClick: l,
-        onBlockAccess: d,
+        onBlockAccess: c,
         size: e.size,
-        "data-id": Se,
+        "data-id": xe,
         name: "grid",
         type: "none",
         icon: "f_grid",
         label: r.value
       };
-      return m(re, g, () => []);
+      return h(ne, g, () => []);
     }
     return () => u();
   }
-}), Vo = Z({
+}), Go = $({
   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(() => {
+    const t = Me(), o = p(), s = v(() => (o == null ? void 0 : o.hasAccess("grd")) || !1), { lang: n } = J(), r = v(() => {
       var g;
       return (g = n.value.td) == null ? void 0 : g.controls.lights.iconTitle;
-    }), { click: l, selected: i } = be({
-      store: o,
-      options: ge,
-      tab: ge
+    }), { click: l, selected: a } = Se({
+      store: t,
+      options: ve,
+      tab: ve
     });
-    function d(g) {
-      return t.block(g);
+    function c(g) {
+      return o.block(g);
     }
     function u() {
       const g = {
         hasAccess: s.value,
-        selected: i.value,
+        selected: a.value,
         onClick: l,
-        onBlockAccess: d,
+        onBlockAccess: c,
         size: e.size,
-        "data-id": ge,
+        "data-id": ve,
         name: "lights",
         type: "none",
         icon: "f_bulb_light",
         label: r.value
       };
-      return m(re, g, () => []);
+      return h(ne, g, () => []);
     }
     return () => u();
   }
-}), Lo = Z({
+}), Ho = $({
   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({
-      options: xe,
-      tab: xe
+    const t = p(), { lang: o } = J(), s = v(() => {
+      var c;
+      return (c = o.value.td) == null ? void 0 : c.controls.related.iconTitle;
+    }), { click: n, selected: r } = Se({
+      options: we,
+      tab: we
     });
-    function l(d) {
-      return o.block(d);
+    function l(c) {
+      return t.block(c);
     }
-    function i() {
-      const d = {
+    function a() {
+      const c = {
         hasAccess: !0,
         selected: r.value,
         onClick: n,
         onBlockAccess: l,
-        "data-id": xe,
+        "data-id": we,
         size: e.size,
         name: "related",
         icon: "f_related",
         type: "none",
         label: s.value
       };
-      return m(re, d, () => []);
+      return h(ne, c, () => []);
     }
-    return () => i();
+    return () => a();
   }
-}), jo = Z({
+}), Ro = $({
   name: "TsDefaultDrawer",
   props: {},
   emits: ["click"],
-  setup(e, { slots: o, emit: t }) {
-    const s = b(), n = "q-ma-xs";
+  setup(e, { slots: t, emit: o }) {
+    const s = p(), n = "q-ma-xs";
     function r(l) {
       return {
         class: n,
@@ -2300,117 +2307,117 @@ const Pt = () => {
         onClick: () => s.setActive(l)
       };
     }
-    return () => m(
+    return () => h(
       Qe,
       { name: ot },
       {
-        default: () => m(no, {}, () => [
-          m(To, r(se)),
-          m(Ao, r(Se)),
-          m(Vo, r(ge)),
-          m(Lo, r(xe))
+        default: () => h(ro, {}, () => [
+          h(Fo, r(oe)),
+          h(Po, r(xe)),
+          h(Go, r(ve)),
+          h(Ho, r(we))
         ]),
-        secondary: () => m(Xt, { fixed: !1 })
+        secondary: () => h(Kt, { fixed: !1 })
       }
     );
   }
-}), Fo = Z({
+}), Oo = $({
   name: "TdGridDrawer",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = h(() => {
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = v(() => {
       var l;
       return (l = s.value.td) == null ? void 0 : l.controls.grid.title;
     });
     function r() {
       const l = {
         class: "td-grid-drawer",
-        name: Se,
+        name: xe,
         label: n.value
       };
-      return m(Qe, l, () => m($t));
+      return h(Qe, l, () => h($t));
     }
     return () => r();
   }
-}), Po = Z({
+}), qo = $({
   name: "TdRelatedDrawer",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = h(() => {
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = v(() => {
       var l;
       return (l = s.value.td) == null ? void 0 : l.controls.related.title;
     });
     function r() {
       const l = {
         class: "td-related-drawer",
-        name: xe,
+        name: we,
         label: n.value
       };
-      return m(Qe, l, () => m(Nt));
+      return h(Qe, l, () => h(Zt));
     }
     return () => r();
   }
-}), Go = Z({
+}), _o = $({
   name: "TdLightsDrawer",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = h(() => {
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = v(() => {
       var l;
       return (l = s.value.td) == null ? void 0 : l.controls.lights.title;
     });
     function r() {
       const l = {
         class: "td-lights-drawer",
-        name: ge,
+        name: ve,
         label: n.value
       };
-      return m(Qe, l, () => m(It));
+      return h(Qe, l, () => h(Nt));
     }
     return () => r();
   }
-}), Ho = Z({
+}), Uo = $({
   name: "TdLightsDrawer",
-  setup(e, { slots: o, emit: t }) {
-    const { lang: s } = ee(), n = h(() => {
+  setup(e, { slots: t, emit: o }) {
+    const { lang: s } = J(), n = v(() => {
       var l;
       return (l = s.value.td) == null ? void 0 : l.controls.colors.title;
     });
     function r() {
       const l = {
         class: "td-colors-drawer",
-        name: se,
+        name: oe,
         label: n.value
       };
-      return m(Qe, l, () => m(_t));
+      return h(Qe, l, () => h(It));
     }
     return () => r();
   }
-}), Ro = Z({
+}), Io = $({
   name: "TsDrawers",
-  setup(e, { slots: o, emit: t }) {
-    const s = b(), n = h({
+  setup(e, { slots: t, emit: o }) {
+    const s = p(), n = v({
       get: () => s.active,
       set: (l) => s.setActive(l)
     });
     function r() {
       const l = {
         modelValue: n.value,
-        "onUpdate:modelValue": (i) => n.value = i
+        "onUpdate:modelValue": (a) => n.value = a
       };
-      return m(ro, l, () => [
-        m(jo),
-        m(Go),
-        m(Ho),
-        m(Fo),
-        m(Po)
+      return h(lo, l, () => [
+        h(Ro),
+        h(_o),
+        h(Uo),
+        h(Oo),
+        h(qo)
       ]);
     }
     return () => r();
   }
-}), Qo = /* @__PURE__ */ Object.assign({
+}), ns = /* @__PURE__ */ Object.assign({
   name: "TdPage",
   slug: "td-page",
   inheritAttrs: !1
 }, {
   __name: "TdPage",
-  props: /* @__PURE__ */ oo({
+  props: /* @__PURE__ */ so({
     id: Number
   }, {
     miniState: { type: Boolean },
@@ -2418,37 +2425,138 @@ 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, o = p(), s = v(() => Number(t.id)), n = eo(e, "miniState");
+    return to(() => {
+      o.setActive(ft.is.mobile ? ot : oe);
+    }), (r, l) => (Je(), it(at(io), {
       class: "three-dimension-page",
       miniState: n.value,
-      "onUpdate:miniState": l[0] || (l[0] = (i) => n.value = i),
+      "onUpdate:miniState": l[0] || (l[0] = (a) => n.value = a),
       "no-drawer-padding": !0,
       title: "3D Viewer"
     }, {
       toolDrawer: ct(() => [
-        r.$q.platform.is.mobile ? gt("", !0) : (Je(), at(it(Eo), { key: 0 }))
+        r.$q.platform.is.mobile ? ht("", !0) : (Je(), it(at(jo), { key: 0 }))
       ]),
       bottomDrawer: ct(() => [
-        r.$q.platform.is.mobile ? (Je(), at(it(Ro), { key: 0 })) : gt("", !0)
+        r.$q.platform.is.mobile ? (Je(), it(at(Io), { key: 0 })) : ht("", !0)
       ]),
       default: ct(() => [
-        to(Mo, { id: s.value }, null, 8, ["id"])
+        oo(Ao, { id: s.value }, null, 8, ["id"])
       ]),
       _: 1
     }, 8, ["miniState"]));
   }
+}), $o = [
+  "#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"
+], rs = de("3d-fbxs", {
+  state: () => ({
+    models: {},
+    loadingUrl: null,
+    palette: $o
+  }),
+  getters: {
+    changed(e) {
+      var s, n, r, l, a;
+      const o = p().selected;
+      return console.log("fbx model", (s = e.models) == null ? void 0 : s[o]), (r = (n = e.models) == null ? void 0 : n[o]) != null && r.color ? ((a = (l = e.models) == null ? void 0 : l[o]) == null ? void 0 : a.color) !== 16777215 : !1;
+    },
+    selectedId() {
+      return p().selected;
+    },
+    poseId(e) {
+      var s, n;
+      const o = p().selected;
+      return (n = (s = e.models) == null ? void 0 : s[o]) == null ? void 0 : n.poseId;
+    },
+    model(e) {
+      const o = p().selected;
+      return o && e.models[o] ? e.models[o] : 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 ? ce(this.model.color) : "#fefefe";
+    }
+  },
+  actions: {
+    resetColor() {
+      const t = p().selected;
+      this.models[t].color = 16777215;
+    },
+    setBounds(e) {
+      const o = p().selected;
+      this.models[o].bounds = _t(e);
+    },
+    setSubjectsFromResponse(e) {
+      const t = e.entities.fbx;
+      this.models = { ...this.models, ...t };
+    },
+    setColorHex(e) {
+      const o = p().selected;
+      this.models[o].color = be(e);
+    }
+  }
 });
 export {
-  Qo as TdPage,
-  b as use3dStore,
+  ns as TdPage,
+  p as use3dStore,
   Ut as useColorsStore,
   Ct as useControlsStore,
-  de as useFBXStore,
-  ke as useGridStore,
+  rs as useFBXStore,
+  ye as useGLBStore,
+  Me as useGridStore,
   Ve as useGroundStore,
-  Me as useLightsStore,
+  Be as useLightsStore,
   lt as useSceneStore
 };