@figurosity/consumer-three-dimension-tool 0.1.0

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

@@ -0,0 +1,2454 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".tool-reset-button .qbtn{color:#333;font-weight:700}.debug-color{max-width:100px}.debug-color .swatch{height:20px;width:20px;border-radius:10px;border:1px solid #333}.debug-color .label{font-weight:700}.debug-value span{margin-top:2px;min-width:60px;font-size:11px}.debug-vector{min-width:130px}.debug-vector>div{font-size:10px}.debug-vector>div>span{min-width:20px;font-weight:700}.debug-boolean .indicator{margin-top:6px;margin-right:4px;height:10px;width:10px;border-radius:10px;border:1px solid #333;display:inline-block;background:red}.debug-boolean .indicator.on{background:#adff2f}.debug3D{position:absolute;z-index:14400;top:20px;left:40px;padding:20px;border:1px solid #ccc;border-radius:10px;background-color:#ffffffb3}.debug3D .color-square{display:inline-block;height:15px;width:15px;margin-bottom:-3px;border:1px dotted black}.three-dimension-tool{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100}.three-dimension-tool .tres{width:100%;height:100vh}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import { nextTick as Ht, watch as U, ref as te, onUnmounted as Rt, computed as h, onMounted as Zt, openBlock as Je, createElementBlock as Kt, createCommentVNode as gt, createElementVNode as Yt, onBeforeMount as Qt, defineComponent as Z, h as m, inject as Wt, useModel as Jt, onBeforeUnmount as eo, createBlock as at, unref as it, withCtx as ct, createVNode as to, mergeModels as oo } from "vue";
+import { Platform as ft, useQuasar as so, QBtn as qt, QSeparator as je } from "quasar";
+import { CBaseButton as re, CColorPickerPopup as Ot, CExpansion as rt, CToggle as Ze, CSlider as dt, CDraggableDrawer as Qe, CBaseButtons as no, CDraggableDrawers as ro, CToolPage as lo } from "@figurosity/consumer-controls";
+import { defineStore as ve, storeToRefs as $, getActivePinia as ao } from "pinia";
+import * as S from "three";
+import tt from "lodash.isequal";
+import "three/examples/jsm/loaders/RGBELoader.js";
+import { DEFAULT as ot, COLORS as se, GRID as Se, LIGHTS as ge, RELATED as xe } from "@figurosity/toolbox";
+import { OrbitControls as io } from "three/examples/jsm/controls/OrbitControls.js";
+import { mergeVertices as Bt, mergeGeometries as co } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import { RoundedBoxGeometry as uo } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
+import { FBXLoader as po } from "three/examples/jsm/loaders/FBXLoader.js";
+function Ce(e) {
+  const o = e.startsWith("#") ? e.slice(1) : e;
+  return parseInt(o, 16);
+}
+function fe(e) {
+  return `#${e.toString(16).padStart(6, "0")}`;
+}
+const ut = new S.Vector3(), Dt = (e) => {
+  const o = new S.Box3().setFromObject(e);
+  console.log("box", o);
+  const t = o.getSize(new S.Vector3()), s = new S.Vector3(
+    (o.min.x + o.max.x) / 2,
+    (o.min.y + o.max.y) / 2,
+    (o.min.z + o.max.z) / 2
+  );
+  console.log("center", s);
+  let n = o.min.y;
+  return console.log("bottom", n), Math.abs(n) < -0.01 && (n = mo(e)), console.log("bottom", n), {
+    box: o,
+    size: t,
+    center: s,
+    bottom: n,
+    top: o.max.y
+  };
+}, mo = (e) => {
+  let o = 1 / 0;
+  return e.updateMatrixWorld(!0), e.traverse((t) => {
+    var n, r;
+    if (!t.isMesh) return;
+    const s = (r = (n = t.geometry) == null ? void 0 : n.attributes) == null ? void 0 : r.position;
+    if (s)
+      for (let l = 0; l < s.count; l++)
+        ut.fromBufferAttribute(s, l), ut.applyMatrix4(t.matrixWorld), o = Math.min(o, ut.y);
+  }), o;
+}, ho = (e) => ({
+  box: {
+    min: {
+      x: e.box.min.x,
+      y: e.box.min.y,
+      z: e.box.min.z
+    },
+    max: {
+      x: e.box.max.x,
+      y: e.box.max.y,
+      z: e.box.max.z
+    }
+  },
+  size: {
+    x: e.size.x,
+    y: e.size.y,
+    z: e.size.z
+  },
+  center: {
+    x: e.center.x,
+    y: e.center.y,
+    z: e.center.z
+  },
+  bottom: e.bottom,
+  top: e.top
+}), go = [
+  "#141111",
+  "#3E251E",
+  "#633C30",
+  "#A56F57",
+  "#CC9E86",
+  "#543F2E",
+  "#7C5B48",
+  "#98775B",
+  "#AD8B6B",
+  "#BFA282",
+  "#794524",
+  "#8F603E",
+  "#B08057",
+  "#D7A56F",
+  "#F7DBA2",
+  "#673E28",
+  "#C5815E",
+  "#D59671",
+  "#EFB698",
+  "#F5D2C0",
+  "#6E453A",
+  "#996C5E",
+  "#C88D7D",
+  "#E7B09E",
+  "#EEC1AE",
+  "#432B26",
+  "#88635A",
+  "#BA8C82",
+  "#EBBAB6",
+  "#F7D2C8",
+  "#796362",
+  "#8F7277",
+  "#C399A0",
+  "#E3C7CB",
+  "#E6D1D2",
+  "#684C4B",
+  "#98807B",
+  "#BDACA8",
+  "#DACDC9",
+  "#E5E4E3"
+], de = ve("3d-fbxs", {
+  state: () => ({
+    models: {},
+    loadingUrl: null,
+    palette: go
+  }),
+  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;
+    },
+    poseId(e) {
+      var s, n;
+      const t = b().selected;
+      return (n = (s = e.models) == null ? void 0 : s[t]) == null ? void 0 : n.poseId;
+    },
+    model(e) {
+      const t = b().selected;
+      return t && e.models[t] ? e.models[t] : 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 ? fe(this.model.color) : "#fefefe";
+    }
+  },
+  actions: {
+    resetColor() {
+      const o = b().selected;
+      this.models[o].color = 16777215;
+    },
+    setBounds(e) {
+      const t = b().selected;
+      this.models[t].bounds = ho(e);
+    },
+    setSubjectsFromResponse(e) {
+      const o = e.entities.fbx;
+      this.models = { ...this.models, ...o };
+    },
+    setColorHex(e) {
+      const t = b().selected;
+      this.models[t].color = Ce(e);
+    }
+  }
+}), vt = { visible: !0, opacity: 1, color: 16711422, texture: "none" }, zt = (e = {}) => ({ ...vt, ...e }), Ve = ve("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;
+    },
+    property() {
+      return (e, o = null) => {
+        var t;
+        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
+      };
+    },
+    selectedId() {
+      return b().selected;
+    },
+    selectedModel(e) {
+      const o = this.selectedId;
+      return e.models[o] ?? null;
+    },
+    mergedModel() {
+      return { ...vt, ...this.selectedModel ?? {} };
+    },
+    model(e) {
+      const t = b().selected;
+      return t && e.models[t] ? e.models[t] : null;
+    },
+    color() {
+      return this.mergedModel.color;
+    },
+    colorHex() {
+      return fe(this.mergedModel.color);
+    },
+    opacity() {
+      return this.mergedModel.opacity;
+    },
+    texture() {
+      return this.mergedModel.texture;
+    },
+    visible() {
+      return this.mergedModel.visible;
+    }
+  },
+  actions: {
+    reset() {
+      const e = b().selected;
+      this.models[e] = zt();
+    },
+    ensureSelectedModel() {
+      const e = b().selected;
+      return this.models[e] || (this.models[e] = { ...vt }), this.models[e];
+    },
+    patchSelected(e) {
+      const o = this.ensureSelectedModel();
+      Object.assign(o, e);
+    },
+    setProperty(e, o) {
+      const t = this.ensureSelectedModel();
+      t[e] = o;
+    },
+    setColor(e) {
+      this.setProperty("color", e);
+    },
+    setColorHex(e) {
+      this.setProperty("color", Ce(e));
+    },
+    setTexture(e) {
+      this.setProperty("texture", e);
+    },
+    setVisible(e) {
+      this.setProperty("visible", e);
+    },
+    setGroundFromResponse(e) {
+      this.models[e] || (this.models[e] = zt());
+    }
+  }
+}), Ke = {
+  color: 16777215,
+  visible: !0,
+  debug: !1,
+  shadow: !0,
+  opacity: 1,
+  visualization: !0
+}, pt = (e = {}) => ({ ...Ke, ...e }), he = {
+  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", {
+  state: () => ({
+    lights: {},
+    options: {},
+    collection: ["key", "fill", "back"],
+    debug: !1
+  }),
+  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);
+      return s || r;
+    },
+    move(e) {
+      var s;
+      const t = b().selected;
+      return ((s = e.options[t]) == 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;
+    },
+    position(e) {
+      var s;
+      const t = b().selected;
+      return ((s = e.options[t]) == null ? void 0 : s.position) || he.position;
+    },
+    quaternion(e) {
+      var s;
+      const t = b().selected;
+      return ((s = e.options[t]) == null ? void 0 : s.quaternion) || he.quaternion;
+    },
+    target(e) {
+      var s;
+      const t = b().selected;
+      return ((s = e.options[t]) == null ? void 0 : s.target) || he.target;
+    },
+    radius(e) {
+      var s;
+      const t = b().selected;
+      return ((s = e.options[t]) == null ? void 0 : s.radius) || he.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];
+      };
+    },
+    colorHex(e) {
+      return (o) => {
+        const s = b().selected;
+        return !e.lights[s] || !e.lights[s][o] ? "#ffffff" : fe(e.lights[s][o].color);
+      };
+    },
+    lightKeys(e) {
+      const t = b().selected;
+      return Object.keys(e.lights[t]);
+    },
+    isVisible(e) {
+      return (o) => e.move && (this.advancedMode === !0 && this.property(o, "visible") || o === "key");
+    }
+  },
+  actions: {
+    reset() {
+      const e = b().selected;
+      this.options[e] = { ...he }, this.collection.forEach(
+        (o) => this.lights[e][o] = { ...Ke }
+      );
+    },
+    ensureSelectedOptions() {
+      const e = b().selected;
+      return this.options[e] || (this.options[e] = { ...he }), this.options[e];
+    },
+    patchSelected(e) {
+      const o = this.ensureSelectedOptions();
+      Object.assign(o, e);
+    },
+    setControlProperty(e, o) {
+      const t = this.ensureSelectedOptions();
+      t[e] = o;
+    },
+    setPosition(e) {
+      this.setControlProperty("position", e);
+    },
+    setQuaternion(e) {
+      this.setControlProperty("quaternion", e);
+    },
+    setTarget(e) {
+      this.setControlProperty("target", e);
+    },
+    setRadius(e) {
+      this.setControlProperty("radius", e);
+    },
+    setMove(e = !1) {
+      const t = b().selected;
+      this.options[t].move = e;
+    },
+    setAdvanced(e = !1) {
+      const t = b().selected;
+      if (e === !0) {
+        this.options[t].advanced = !0;
+        return;
+      }
+      this.options[t].advanced = !1;
+      const s = this.lights[t].key;
+      this.lightKeys.forEach((n) => {
+        n !== "key" && (this.lights[t][n].color = s.color);
+      });
+    },
+    setControlOptions(e, o, t = null) {
+      t === null && (t = b().selected), this.options[t] || (this.options[t] = Et());
+      const s = e.position.clone(), n = e.quaternion.clone(), r = o.target.clone();
+      this.options[t].position = { x: s.x, y: s.y, z: s.z }, this.options[t].quaternion = { x: n.x, y: n.y, z: n.z, w: n.w }, this.options[t].target = { x: r.x, y: r.y, z: r.z };
+    },
+    setColorHex(e, o) {
+      var l;
+      const s = b().selected, n = this.lights[s], r = Ce(o);
+      if (((l = this.options[s]) == null ? void 0 : l.advanced) === !0) {
+        n[e].color = r;
+        return;
+      }
+      this.collection.forEach((i) => {
+        n[i].color = r;
+      });
+    },
+    setProperty(e, o, t) {
+      const n = b().selected;
+      this.lights[n][e][o] = t;
+    },
+    initLights() {
+      const o = b().selected;
+      this.lights[o] || (this.lights[o] = {
+        key: pt(),
+        fill: pt({ shadow: !0 }),
+        back: pt({ shadow: !0 })
+      }), this.options[o] || (this.options[o] = Et());
+    }
+  }
+}), Ye = {
+  position: { x: 0, y: 0.39999999999999986, z: 1.5 },
+  quaternion: { x: -0.12993279108591813, y: 0, z: 0, w: 0.9915228034698058 },
+  target: { x: 0, y: 0, z: 0 },
+  radius: 1.5
+}, Tt = (e = {}) => ({ ...Ye, ...e }), Ct = ve("3d-controls", {
+  state: () => ({
+    models: {}
+  }),
+  getters: {
+    changed(e) {
+      var s;
+      const t = b().selected;
+      return (s = e.models) != null && s[t] ? !tt(e.models[t], Ye) : !1;
+    },
+    property() {
+      return (e, o = null) => {
+        var t;
+        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
+      };
+    },
+    selectedId() {
+      return b().selected;
+    },
+    selectedModel(e) {
+      const o = this.selectedId;
+      return e.models[o] ?? null;
+    },
+    mergedModel() {
+      return { ...Ye, ...this.selectedModel ?? {} };
+    },
+    position() {
+      return this.mergedModel.position;
+    },
+    quaternion() {
+      return this.mergedModel.quaternion;
+    },
+    target() {
+      return this.mergedModel.target;
+    },
+    radius() {
+      return this.mergedModel.radius;
+    }
+  },
+  actions: {
+    reset() {
+      const e = b().selected;
+      this.models[e] = { ...Ye };
+    },
+    ensureSelectedModel() {
+      const e = b().selected;
+      return this.models[e] || (this.models[e] = { ...Ye }), this.models[e];
+    },
+    patchSelected(e) {
+      const o = this.ensureSelectedModel();
+      Object.assign(o, e);
+    },
+    setProperty(e, o) {
+      const t = this.ensureSelectedModel();
+      t[e] = o;
+    },
+    setPosition(e) {
+      this.setProperty("position", e);
+    },
+    setQuaternion(e) {
+      this.setProperty("quaternion", e);
+    },
+    setTarget(e) {
+      this.setProperty("target", e);
+    },
+    setRadius(e) {
+      this.setProperty("radius", e);
+    },
+    setControlOptions(e, o, t = null) {
+      t === null && (t = b().selected), this.models[t] || (this.models[t] = Tt());
+      const s = e.position.clone(), n = e.quaternion.clone(), r = o.target.clone();
+      this.models[t].position = { x: s.x, y: s.y, z: s.z }, this.models[t].quaternion = { x: n.x, y: n.y, z: n.z, w: n.w }, this.models[t].target = { x: r.x, y: r.y, z: r.z };
+    },
+    initControls() {
+      const o = b().selected;
+      o && !this.models[o] && (this.models[o] = Tt());
+    }
+  }
+}), bt = {
+  color: 16711422
+}, At = (e = {}) => ({ ...bt, ...e }), lt = ve("3d-scene", {
+  state: () => ({
+    models: {}
+  }),
+  getters: {
+    changed(e) {
+      var s, n;
+      const t = b().selected;
+      return ((n = (s = e.models) == null ? void 0 : s[t]) == null ? void 0 : n.color) !== 16711422;
+    },
+    colorHex(e) {
+      var n;
+      const t = b().selected, s = (n = e.models[t]) == null ? void 0 : n.color;
+      return fe(s || bt.color);
+    }
+  },
+  actions: {
+    reset() {
+      const o = b().selected;
+      this.models[o] = { ...bt };
+    },
+    selectedId() {
+      return b().selected;
+    },
+    setColorHex(e) {
+      const t = b().selected;
+      this.models[t] || (this.models[t] = At()), this.models[t].color = Ce(e);
+    },
+    init() {
+      const o = b().selected;
+      this.models[o] || (this.models[o] = At());
+    }
+  }
+}), Te = {
+  show: !1,
+  front: !1,
+  back: !1,
+  left: !1,
+  right: !1,
+  top: !1,
+  bottom: !1,
+  divisions: 6,
+  opacity: 0.5,
+  size: 2,
+  lineColor: 13421772,
+  centerLineColor: 16711680
+}, fo = (e = {}) => ({ ...Te, ...e }), ke = ve("3d-grid", {
+  state: () => ({
+    models: {}
+  }),
+  getters: {
+    changed(e) {
+      const t = b().selected;
+      return console.log("state.models[id]", e.models[t]), console.log("defaults", Te), !tt(e.models[t], Te);
+    },
+    property() {
+      return (e, o = null) => {
+        var t;
+        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
+      };
+    },
+    selectedId() {
+      return b().selected;
+    },
+    selectedModel(e) {
+      const o = this.selectedId;
+      return e.models[o] ?? null;
+    },
+    mergedModel() {
+      return { ...Te, ...this.selectedModel ?? {} };
+    },
+    show() {
+      return this.mergedModel.show;
+    },
+    lineColor() {
+      return this.mergedModel.lineColor;
+    },
+    centerLineColor() {
+      return this.mergedModel.centerLineColor;
+    },
+    opacity() {
+      return this.mergedModel.opacity;
+    },
+    size() {
+      return this.mergedModel.size;
+    },
+    divisions() {
+      return this.mergedModel.divisions;
+    },
+    lineColorHex() {
+      return fe(this.mergedModel.lineColor);
+    },
+    centerLineColorHex() {
+      return fe(this.mergedModel.centerLineColor);
+    }
+  },
+  actions: {
+    reset() {
+      const o = b().selected;
+      this.models[o] = { ...Te }, Ht(() => {
+        this.models[o].show = !1;
+      });
+    },
+    ensureSelectedModel() {
+      const e = b().selected;
+      return this.models[e] || (this.models[e] = { ...Te }), this.models[e];
+    },
+    patchSelected(e) {
+      const o = this.ensureSelectedModel();
+      Object.assign(o, e);
+    },
+    setProperty(e, o) {
+      const t = this.ensureSelectedModel();
+      t[e] = o;
+    },
+    setLineColorHex(e) {
+      this.setProperty("lineColor", Ce(e));
+    },
+    setCenterLineColorHex(e) {
+      this.setProperty("centerLineColor", Ce(e));
+    },
+    init() {
+      const o = b().selected;
+      this.models[o] || (this.models[o] = fo());
+    }
+  }
+}), vo = [
+  "#141111",
+  "#3E251E",
+  "#633C30",
+  "#A56F57",
+  "#CC9E86",
+  "#543F2E",
+  "#7C5B48",
+  "#98775B",
+  "#AD8B6B",
+  "#BFA282",
+  "#794524",
+  "#8F603E",
+  "#B08057",
+  "#D7A56F",
+  "#F7DBA2",
+  "#673E28",
+  "#C5815E",
+  "#D59671",
+  "#EFB698",
+  "#F5D2C0",
+  "#6E453A",
+  "#996C5E",
+  "#C88D7D",
+  "#E7B09E",
+  "#EEC1AE",
+  "#432B26",
+  "#88635A",
+  "#BA8C82",
+  "#EBBAB6",
+  "#F7D2C8",
+  "#796362",
+  "#8F7277",
+  "#C399A0",
+  "#E3C7CB",
+  "#E6D1D2",
+  "#684C4B",
+  "#98807B",
+  "#BDACA8",
+  "#DACDC9",
+  "#E5E4E3"
+], yt = "background", et = "subject", St = "ground", Vt = {
+  [et]: 16711422,
+  [yt]: 16777215,
+  [St]: 12961221
+}, Ut = ve("3d-colors", {
+  state: () => ({
+    models: {},
+    palette: vo
+  }),
+  getters: {
+    property() {
+      return (e, o = null) => {
+        var t;
+        return ((t = this.selectedModel) == null ? void 0 : t[e]) ?? o;
+      };
+    },
+    selectedId() {
+      return b().selected;
+    },
+    selectedModel(e) {
+      const o = this.selectedId;
+      return e.models[o] ?? null;
+    },
+    mergedModel() {
+      return { ...Vt, ...this.selectedModel ?? {} };
+    },
+    model(e) {
+      const t = b().selected;
+      return t && e.models[t] ? e.models[t] : null;
+    },
+    subjectHex() {
+      return this.getHexColor(et);
+    },
+    groundHex() {
+      return this.getHexColor(St);
+    },
+    backgroundHex() {
+      return this.getHexColor(yt);
+    }
+  },
+  actions: {
+    initModel(e) {
+      this.models[e] = { ...Vt };
+    },
+    getHexColor(e) {
+      const t = b().selected;
+      if (!this.models[t] || !this.models[t][e]) return "#F0F0F0";
+      const s = this.models[t][e];
+      return fe(s);
+    },
+    setHexColor(e = et, o = "#e6e6e6") {
+      const s = b().selected;
+      !this.models[s] || !this.models[s][e] || (this.models[s][e] = Ce(o));
+    },
+    setSubjectHex(e) {
+      this.setHexColor(et, e);
+    },
+    setGroundHex(e) {
+      this.setHexColor(St, e);
+    },
+    setBackgroundHex(e) {
+      this.setHexColor(yt, e);
+    }
+  }
+}), b = ve("3d", {
+  state: () => ({
+    // models: {},
+    selected: null,
+    width: 0,
+    height: 0,
+    loaded: {
+      camera: !1,
+      renderer: !1,
+      scene: !1,
+      subject: !1
+    },
+    loading: {
+      active: !1,
+      percent: 0,
+      url: null
+    },
+    subjectLoaded: !1,
+    models: {}
+  }),
+  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;
+    },
+    aspect(e) {
+      return e.height > 0 ? e.width / e.height : 0;
+    }
+  },
+  actions: {
+    hasAccess(e) {
+      var o;
+      return ((o = this.appAccessStore) == null ? void 0 : o.hasAccess(e)) || !1;
+    },
+    block(e) {
+      var o;
+      return ((o = this.appPaywallStore) == null ? void 0 : o.block(e)) || !0;
+    },
+    isExpanded(e = []) {
+      return e = Array.isArray(e) ? e : [e], e.includes(this.active);
+    },
+    setActive(e, o = 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);
+      });
+    },
+    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);
+    }
+  }
+});
+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;
+  };
+  return Fe = U(
+    () => o.value,
+    (i) => {
+      if (!ae) {
+        n();
+        return;
+      }
+      ae.aspect = i, ae.updateProjectionMatrix();
+    }
+  ), {
+    init: n,
+    getCamera: r,
+    dispose: () => {
+      Fe == null || Fe(), Fe = null, ae = null;
+    }
+  };
+};
+let ne = null;
+const st = () => {
+  const e = te(!1), o = te({
+    mode: null,
+    camera: null,
+    // camera (or your lights-camera)
+    store: null
+    // pinia store with position/quaternion/target
+  }), t = (v, f = {}) => {
+    if (console.debug("useOrbitControlsBase init"), ne)
+      return console.debug("controls already inited"), ne;
+    const A = new S.Object3D();
+    return ne = new io(A, v.domElement), n(f), ne;
+  }, s = () => {
+    if (!ne) throw new Error("OrbitControls not initialized");
+    return ne;
+  }, n = (v = {}) => {
+    const f = s();
+    f.enableDamping = v.enableDamping ?? !0, f.dampingFactor = v.dampingFactor ?? 0.5, f.rotateSpeed = v.rotateSpeed ?? 0.2, f.enableZoom = v.enableZoom ?? !0, f.minDistance = v.minDistance ?? 0.5, f.maxDistance = v.maxDistance ?? 6;
+  }, r = ({ mode: v, camera: f, store: A, options: C }) => {
+    const y = s();
+    if (!f) throw new Error(`setMode(${v}): camera is required`);
+    if (!A) throw new Error(`setMode(${v}): store is required`);
+    y.object = f, n(C), o.value = { mode: v, camera: f, store: A }, d(), y.update();
+  }, l = () => {
+    ne && ne.update();
+  }, 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;
+    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
+    ).normalize();
+    f.position.copy(v.target).add(z.multiplyScalar(M)), f.quaternion.set(
+      y.x,
+      y.y,
+      y.z,
+      y.w
+    ), v.update(), e.value = !1;
+  };
+  return {
+    init: t,
+    get: s,
+    setMode: r,
+    update: l,
+    syncToStore: i,
+    applyFromStore: d,
+    frameToBounds: (v, f = 1.75, A = 0.02) => {
+      const C = s(), { camera: y } = o.value;
+      if (!y || !v) return;
+      const B = new S.Vector3(
+        v.center.x,
+        v.center.y + v.size.y * A,
+        v.center.z
+      );
+      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();
+    },
+    dispose: () => {
+      console.debug("controls disposed"), ne && (ne.dispose(), ne = null, o.value = { mode: null, camera: null, store: null });
+    }
+  };
+}, wt = () => {
+  const { getCamera: e } = Ae(), o = Ct(), t = st();
+  return {
+    activate: () => {
+      t.setMode({
+        mode: "camera",
+        camera: e(),
+        store: o,
+        options: {
+          enableZoom: !0,
+          minDistance: 0.5,
+          maxDistance: 6
+        }
+      });
+    },
+    frameToBounds: t.frameToBounds,
+    syncToStore: t.syncToStore,
+    applyFromStore: t.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);
+  };
+  return Pe = U(
+    () => t.value,
+    (i) => r(i)
+  ), {
+    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);
+    },
+    setBackgroundColor: r
+  };
+}, bo = {
+  asphalt: {
+    ao: "ao.jpg",
+    color: "color.jpg",
+    displacement: "displacement.jpg",
+    normal: "normal.jpg",
+    roughness: "roughness.jpg",
+    repeat: 100
+  },
+  "diamond-plate": {
+    ao: "ao.jpg",
+    color: "color.jpg",
+    displacement: "displacement.jpg",
+    metalness: "metalness.jpg",
+    normal: "normal.jpg",
+    roughness: "roughness.jpg",
+    repeat: 100
+  },
+  tiles: {
+    ao: "ao.jpg",
+    color: "color.jpg",
+    displacement: "displacement.jpg",
+    normal: "normal.jpg",
+    roughness: "roughness.jpg",
+    repeat: 200
+  },
+  "wood-floor": {
+    ao: "ao.jpg",
+    color: "color.jpg",
+    displacement: "displacement.jpg",
+    metalness: "metalness.jpg",
+    normal: "normal.jpg",
+    roughness: "roughness.jpg",
+    repeat: 100
+  }
+};
+let T = null, Ge = null, He = null, Re = null;
+const Lt = () => {
+  const e = Ve(), { get: o } = we(), { getCamera: t } = Ae(), {
+    visible: s,
+    color: n,
+    texture: r,
+    offset: l
+  } = $(e), i = () => {
+    if (console.debug("useGround init"), T)
+      return console.debug("ground already inited"), T;
+    const C = o(), y = new S.PlaneGeometry(100, 100), B = new S.Color(n.value || 16777215), M = new S.MeshStandardMaterial({
+      color: B,
+      // Default to white
+      side: S.DoubleSide,
+      roughness: 0.4,
+      metalness: 0.3,
+      emissive: B,
+      emissiveIntensity: 0.05
+      // tweak 0.1–0.6
+    });
+    return T = new S.Mesh(y, M), T.rotation.x = -Math.PI / 2, T.receiveShadow = !0, T.visible = s.value, C.add(T), Ge = U(
+      () => s.value,
+      () => d()
+    ), He = U(
+      () => n.value,
+      (z) => f(z)
+    ), Re = U(
+      () => r.value,
+      (z) => g(z)
+    ), T;
+  };
+  function d() {
+    if (t().position.y < T.position.y) {
+      T.visible = !1;
+      return;
+    }
+    T.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;
+    });
+  }
+  const g = (C) => {
+    if (!T) throw new Error("Ground has not been initialized");
+    const y = bo[C];
+    if (!y)
+      T.material.map = null, T.material.normalMap = null, T.material.displacementMap = null, T.material.roughnessMap = null, T.material.aoMap = null, T.material.metalnessMap = null, T.material.needsUpdate = !0;
+    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;
+    }
+    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);
+  };
+  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;
+  } };
+}, 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(
+    Array.from(
+      { length: t.attributes.position.count },
+      (u, g) => g
+    )
+  ), r.index || r.setIndex(
+    Array.from(
+      { 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,
+    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);
+  }
+  return d.position.copy(e.position), d;
+};
+let We = {}, ie = {}, Y = {}, mt = {}, ye = {}, Be = null, pe = null, qe = [], De = /* @__PURE__ */ new Map();
+const nt = () => {
+  const e = b(), o = Me(), t = de();
+  te(!1);
+  const { subjectLoaded: s, width: n, height: r, selected: l } = $(e), { debug: i, collection: d, advancedMode: u, move: g } = $(o), { get: v } = we(), f = o.property, A = () => {
+    if (pe)
+      return console.warn("lights camera already inited"), pe;
+    const c = v();
+    return Be = y(), pe = B(), d.value.forEach((a) => {
+      const w = a === "key" ? pe : c, { group: E, light: L, directional: j, visualization: D } = M(
+        a,
+        w
+      );
+      Y[a] = L, We[a] = E, mt[a] = j, ye[a] = D, Y[a].castShadow = !0, Y[a].angle = Math.PI / 8, Y[a].penumbra = 0.2, Y[a].shadow.camera.near = 0.5, Y[a].shadow.camera.far = 12, Y[a].shadow.focus = 0.9, Y[a].shadow.mapSize.set(4096, 4096), Y[a].shadow.bias = -2e-4, Y[a].shadow.normalBias = 0.02, Y[a].shadow.radius = 2, Y[a].shadow.camera.updateProjectionMatrix();
+    }), W(), k(), pe;
+  }, C = () => {
+    if (!pe)
+      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(
+      75,
+      n.value / r.value,
+      0.1,
+      100
+    );
+    return a.position.set(0, 0, 1.5), c.add(a), a;
+  };
+  function M(c, a = null) {
+    const w = v(), E = new S.Group(), L = new S.SpotLight(
+      f(c, "color"),
+      f(c, "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 };
+  }
+  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;
+      }
+    });
+  }, 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"));
+    });
+  }, 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]));
+    });
+  }, I = (c, a) => {
+    const w = v(), E = new S.SpotLightHelper(
+      a,
+      f(c, "visualizationColor")
+    );
+    return w.add(E), E;
+  }, N = (c) => {
+    const a = v();
+    if (!(!a || !c))
+      return a.remove(c), c.dispose(), c = null, c;
+  }, W = () => {
+    const c = C(), a = t.bounds;
+    if (!a) return;
+    const w = new S.Vector3(
+      a.center.x,
+      a.center.y,
+      // + bounds.size.y + 0.05,
+      a.center.z
+    ), E = new S.Vector3().subVectors(w, c.position).normalize(), L = new S.Vector3(
+      E.x,
+      0,
+      E.z
+    ).normalize(), j = new S.Vector3(
+      -L.z,
+      0,
+      L.x
+    ), F = 2 * c.position.distanceTo(w) / Math.sqrt(3), _ = 1, G = w.clone().add(j.clone().multiplyScalar(-F / _)).add(E.clone().multiplyScalar(Math.sqrt(3) * F / 2)), X = w.clone().add(j.clone().multiplyScalar(F / _)).add(E.clone().multiplyScalar(Math.sqrt(3) * F / 2));
+    We.fill.position.copy(G), We.back.position.copy(X), d.value.forEach((J) => {
+      var K, le, ue;
+      const p = Y[J];
+      p.shadow.needsUpdate = !0, p.target.position.copy(w), p.target.updateMatrixWorld(), (K = ye[J]) == null || K.lookAt(w), (ue = (le = ie[J]) == null ? void 0 : le.update) == null || ue.call(le);
+    });
+  }, x = (c) => {
+    const a = o.lights[c];
+    if (!a) return;
+    const w = `watcher-${c}`;
+    if (De.has(w)) return;
+    const E = [];
+    Object.keys(a).forEach((j) => {
+      var D, F;
+      (D = a[j]) != null && D.color && E.push(() => a[j].color), (F = a[j]) != null && F.visible && E.push(() => a[j].visible);
+    });
+    const L = U(
+      () => E.map((j) => j()),
+      z,
+      { deep: !0 }
+    );
+    De.set(w, L);
+  }, V = (c) => {
+    const a = `watcher-${c}`, w = De.get(a);
+    w && (w(), De.delete(a));
+  }, k = () => {
+    qe.push(
+      U(
+        () => [u.value, l.value, g.value],
+        () => z()
+      )
+    ), qe.push(
+      U(
+        () => s.value,
+        (c) => {
+          c === !0 && W();
+        }
+      )
+    ), qe.push(
+      U(
+        () => l.value,
+        (c, a) => {
+          a && V(a), c != null && (x(c), Ht(z));
+        },
+        { immediate: !0 }
+      )
+    );
+  };
+  return {
+    init: A,
+    updatePosition: W,
+    getCamera: C,
+    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);
+    }
+  };
+}, Mt = () => {
+  const e = Me(), o = st(), { getCamera: t } = nt();
+  return {
+    activate: () => {
+      o.setMode({
+        mode: "lights",
+        camera: t(),
+        store: e,
+        options: {
+          enableZoom: !0,
+          minDistance: 0.5,
+          maxDistance: 10
+        }
+      });
+    },
+    frameToBounds: o.frameToBounds,
+    syncToStore: o.syncToStore,
+    applyFromStore: o.applyFromStore
+  };
+};
+let me = null;
+const So = () => {
+  const e = () => {
+    const t = b(), s = de(), { loadingUrl: n } = $(s);
+    return console.log("laodingUrl", n), me = new S.LoadingManager(), me.onStart = function(r, l, i) {
+      n.url = r, t.loading.active = !0, t.loading.url = r, t.loading.percent = 0;
+    }, me.onError = () => {
+      n.url = null, t.loading.active = !1, t.loading.url = null;
+    }, me.onLoad = function() {
+      n.url = null, t.loading.active = !1, t.loading.url = null, t.loading.percent = 100;
+    }, me.onProgress = function(r, l, i) {
+      t.loading.percent = Math.round(l / i * 100);
+    }, me;
+  };
+  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);
+  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);
+  }
+  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);
+  };
+  Oe = U(
+    () => [s.value, n.value],
+    ([g, v]) => {
+      !g || !v || !O || O.setSize(g, v);
+    }
+  ), Ue = U(
+    () => r.value,
+    () => d()
+  );
+  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);
+  }
+  return {
+    init: l,
+    get: i,
+    dispose: u,
+    render: d
+  };
+}, jt = (e, o, t = {}) => {
+  const { removeSpecular: s = !1, removeShininess: n = !1 } = t;
+  e && e.traverse((r) => {
+    if (!r.isMesh) return;
+    (Array.isArray(r.material) ? r.material : [r.material]).forEach((i) => {
+      i && (i.color && i.color.set(o), s && i.specular && i.specular.set(0), n && typeof i.shininess == "number" && (i.shininess = 0), i.needsUpdate = !0);
+    });
+  });
+};
+let ce = null, _e = null, ze, Ee, ht = 0;
+const Ft = () => {
+  const { get: e } = So(), o = de(), t = b(), s = Ve(), { selected: n } = $(t), { color: r, url: l, loadingUrl: i } = $(o), { offset: d } = $(s), { getCamera: u } = Ae(), { get: g } = we(), { get: v, render: f } = xt();
+  new S.Vector3();
+  const A = (R, I) => {
+    const N = I.load(
+      "https://static.figurosity.com/3d/textures/stainless-steel/color.jpg"
+    );
+    return N.colorSpace = S.SRGBColorSpace, N.anisotropy = R.capabilities.getMaxAnisotropy(), _e = new S.MeshBasicMaterial({
+      color: 16777215
+    }), _e;
+  }, C = (R) => {
+    const { frameToBounds: I } = wt(), { frameToBounds: N } = Mt(), W = ++ht;
+    t.subjectLoaded = !1, y();
+    const x = v(), V = e(), k = new S.TextureLoader();
+    A(x, k);
+    const P = new po(V);
+    P.setWithCredentials(!0), P.manager.setURLModifier((c) => c), P.load(R, (c) => {
+      if (W !== ht) {
+        c.traverse((_) => {
+          var X;
+          if (!_.isMesh) return;
+          (X = _.geometry) == null || X.dispose();
+          const G = _.material;
+          Array.isArray(G) ? G.forEach((J) => J == null ? void 0 : J.dispose()) : G == null || G.dispose();
+        });
+        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
+    });
+  }, z = () => ce, H = () => {
+    if (ze || Ee) {
+      console.warn("useSubject.init() called more than once");
+      return;
+    }
+    ze = U(
+      () => n.value,
+      (R, I) => {
+        !R || R === I || (console.log("url", l.value), l.value && C(l.value));
+      },
+      { immediate: !0 }
+    ), Ee = U(
+      () => r.value,
+      (R) => M(R)
+    );
+  }, Q = () => {
+    console.debug("fbx disposed"), ze == null || ze(), Ee == null || Ee(), ze = null, Ee = null, y(), B();
+  };
+  return Rt(() => {
+    Q();
+  }), { init: H, get: z, dispose: Q, updateColor: M };
+}, xo = (e, o, t = 500) => {
+  const s = e.material;
+  s.transparent = !0;
+  const n = s.opacity, r = performance.now(), l = (i) => {
+    const d = i - r, u = Math.min(d / t, 1), g = n + (o - n) * u;
+    s.opacity = g, u < 1 && requestAnimationFrame(l);
+  };
+  requestAnimationFrame(l);
+};
+let q = null, $e = null, Ie = null, Ne = null, Xe = null;
+const Pt = () => {
+  const e = ke(), o = Ve(), t = de(), { show: s, lineColor: n, centerLineColor: r, divisions: l, size: i, opacity: d } = $(e), { offset: u } = $(o), { bounds: g } = $(t), { get: v } = we(), f = () => {
+    const x = Q(n.value), V = Q(r.value), { positions: k, colors: P } = A({
+      size: i.value,
+      divisions: l.value,
+      color: x,
+      centerColor: V
+    }), c = C(k, P), a = y(d.value);
+    return new S.LineSegments(c, a);
+  }, A = ({ size: x, divisions: V, color: k, centerColor: P }) => {
+    const c = x / 2, a = x / V, w = [], E = [], L = Math.floor(V / 2), j = (D, F, _, G) => {
+      w.push(D, F, _);
+      const X = G ? P : k;
+      E.push(X.r, X.g, X.b);
+    };
+    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 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 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);
+      }
+    }
+    return { positions: w, colors: E };
+  }, C = (x, V) => {
+    const k = new S.BufferGeometry();
+    return k.setAttribute(
+      "position",
+      new S.Float32BufferAttribute(x, 3)
+    ), k.setAttribute("color", new S.Float32BufferAttribute(V, 3)), k;
+  }, y = (x) => new S.LineBasicMaterial({
+    transparent: !0,
+    opacity: x,
+    depthWrite: !1,
+    blending: S.NormalBlending,
+    vertexColors: !1
+  }), B = () => {
+    q && H(s.value);
+  }, M = () => {
+    const x = v();
+    q = f(n.value), N(), x.add(q), z(0);
+  }, z = (x) => {
+    q && (q.material.transparent = !0, x = s.value ? x : 0, q.material.opacity = x);
+  }, H = (x) => {
+    const V = x ? d.value : 0;
+    xo(q, V, 500);
+  }, Q = (x) => ({
+    r: (x >> 16 & 255) / 255,
+    g: (x >> 8 & 255) / 255,
+    b: (x & 255) / 255
+  }), R = (x, V) => {
+    if (!q) return;
+    const k = Q(x), P = Q(V), c = q.geometry.attributes.color, a = q.geometry.attributes.position, w = a.count, E = i.value / 2, L = i.value / l.value, j = Math.floor(l.value / 2);
+    for (let D = 0; D < w; D++) {
+      const F = a.getX(D), _ = a.getY(D), G = a.getZ(D), X = Math.round((F + E) / L), J = Math.round((_ + E) / L), p = Math.round((G + E) / L), le = X === j || J === j || p === j ? k : P;
+      c.setXYZ(D, le.r, le.g, le.b);
+    }
+    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);
+  };
+  return $e = U(
+    () => [i.value, l.value],
+    ([x, V], [k, P]) => {
+      x === k && V === P || (I(), B());
+    },
+    { flush: "post" }
+  ), Ie = U(
+    () => s.value,
+    () => {
+      B();
+    },
+    { flush: "post" }
+  ), Ne = U(
+    () => d.value,
+    (x) => {
+      z(x);
+    },
+    { flush: "post" }
+  ), Xe = U(
+    () => [n.value, r.value],
+    ([x, V]) => {
+      R(V, x);
+    }
+  ), {
+    init: M,
+    showHideGrid: H,
+    updateGridColors: R,
+    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);
+    }
+  };
+}, Co = { class: "three-dimension-tool" }, wo = ["data-id"], Mo = /* @__PURE__ */ Object.assign({
+  name: "ThreeDimensionTool",
+  slug: "three-dimension-tool",
+  inheritAttrs: !1
+}, {
+  __name: "ThreeDimensionTool",
+  props: {
+    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) {
+        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";
+      }
+    };
+    return Zt(() => {
+      console.log("onMounted", d.value), x(), window.addEventListener("resize", k), k();
+    }), U(
+      () => l.bounds,
+      (P) => {
+        P && (A.frameToBounds(P), y.activate(), y.frameToBounds(P), y.syncToStore(), C.activate(), C.frameToBounds(P), C.syncToStore());
+      }
+    ), U(
+      () => n.subjectLoaded,
+      (P) => {
+        if (!P) return;
+        const c = l.bounds;
+        if (!c) return;
+        A.frameToBounds(c);
+        const a = A.get();
+        a.update(), a.saveState();
+      }
+    ), 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", {
+        class: "tres",
+        ref_key: "tres",
+        ref: d,
+        "data-id": s.value
+      }, null, 8, wo)
+    ]));
+  }
+}), Gt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-CIql5zKW.js") }), ee = (e = "../i18n") => {
+  const o = so(), t = te({}), s = h(() => o.lang.isoName || "en-US"), n = async () => {
+    const r = `${e}/${s.value}/index.js`;
+    if (Gt[r])
+      try {
+        const l = await Gt[r]();
+        l.default && Object.assign(t.value, l.default);
+      } catch (l) {
+        console.error(`Error loading i18n for ${s.value}`, l);
+      }
+    else
+      console.error(`Module not found: ${r}`);
+  };
+  return U(
+    () => s.value,
+    () => {
+      n();
+    },
+    { immediate: !0 }
+  ), Qt(() => {
+    n();
+  }), { lang: t };
+}, be = ({ tab: e = se, store: o, options: t = [] }) => {
+  const s = ao(), n = b(s), r = h({
+    get: () => n.isExpanded(t),
+    set: (d) => {
+      d && n.setActive(e);
+    }
+  }), l = h(() => o && o.changed);
+  return { click: () => n.setActive(e), expanded: r, selected: l };
+}, kt = Z({
+  name: "ToolResetButton",
+  props: {
+    label: { type: String, required: !1, default: "Reset" },
+    disable: Boolean
+  },
+  emits: ["click"],
+  setup(e, { slots: o, emit: t }) {
+    function s() {
+      t("click");
+    }
+    function n() {
+      const r = {
+        label: e.label,
+        class: "full-width",
+        flat: !0,
+        onClick: s,
+        disable: e.disable
+      };
+      return m("div", { class: "tool-reset-button q-pa-md" }, m(qt, r));
+    }
+    return () => n();
+  }
+}), _t = Z({
+  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(
+      () => {
+        var k;
+        return (k = s.value.td) == null ? void 0 : k.components.colors.items.background;
+      }
+    ), A = h(
+      () => {
+        var k;
+        return (k = s.value.td) == null ? void 0 : k.components.colors.items.subject;
+      }
+    ), C = h(
+      () => {
+        var k;
+        return (k = s.value.td) == null ? void 0 : k.components.colors.items.ground;
+      }
+    ), y = h(() => ({
+      key: A.value,
+      label: A.value,
+      type: "none",
+      icon: "f_subject",
+      size: "sm",
+      color: l.colorHex,
+      onClick: () => g.value = !0
+    })), B = h(() => ({
+      key: f.value,
+      label: f.value,
+      type: "none",
+      icon: "f_scene",
+      size: "sm",
+      color: r.colorHex,
+      onClick: () => u.value = !0
+    })), M = h(() => ({
+      key: C.value,
+      label: C.value,
+      type: "none",
+      icon: "f_ground",
+      size: "sm",
+      color: i.colorHex,
+      onClick: () => v.value = !0
+    })), z = h({
+      get: () => v.value || u.value || g.value,
+      set: (k) => v.value = u.value = g.value = !1
+    }), H = h({
+      get: () => v.value ? i.colorHex : u.value ? r.colorHex : l.colorHex,
+      set: (k) => {
+        if (console.log("showGround", v.value), v.value) {
+          console.log("val", k), i.setColorHex(k);
+          return;
+        }
+        if (u.value) {
+          r.setColorHex(k);
+          return;
+        }
+        l.setColorHex(k);
+      }
+    }), Q = h(() => ({
+      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(() => ({
+      label: "Reset Colors",
+      onClick: N,
+      style: z.value ? "display: none" : "",
+      disable: !W.value
+    }));
+    U(d, (k) => {
+      k !== se && (z.value = !1);
+    });
+    function V() {
+      return m("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)
+        ]),
+        m(kt, x.value),
+        m(Ot, R.value)
+      ]);
+    }
+    return () => V();
+  }
+}), ko = Z({
+  name: "TdColorsExpansion",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    "onUpdate:modelValue": [Function, Array],
+    label: { type: String, required: !1 }
+  },
+  emits: ["click", "update:modelValue"],
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = Ut(), { expanded: r, selected: l } = be({
+      store: n,
+      options: se,
+      tab: se
+    }), i = h(() => {
+      var u;
+      return (u = s.value.td) == null ? void 0 : u.components.colors.title;
+    });
+    h({
+      get: () => e.modelValue,
+      set: (u) => t("update:modelValue", u)
+    });
+    function d() {
+      const u = {
+        class: "td-colors-expansion",
+        "data-cy": "td-colors-expansion",
+        modelValue: r.value,
+        "onUpdate:modelValue": (g) => r.value = g,
+        label: i.value,
+        selected: l.value,
+        icon: "f_palette"
+      };
+      return m(rt, u, () => m(_t));
+    }
+    return () => d();
+  }
+}), $t = Z({
+  name: "TdGridSection",
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = ke(), r = h(
+      () => {
+        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) || "";
+      }
+    ), l = h({
+      get: () => n.show,
+      set: (f) => n.setProperty("show", f)
+    }), i = h({
+      get: () => n.opacity,
+      set: (f) => n.setProperty("opacity", f)
+    }), d = h({
+      get: () => n.size,
+      set: (f) => n.setProperty("size", f)
+    }), u = h({
+      get: () => n.divisions,
+      set: (f) => n.setProperty("divisions", f)
+    }), g = h(() => ({
+      label: "Reset Grid",
+      disable: !n.changed,
+      onClick: n.reset
+    }));
+    function v() {
+      const f = {
+        class: "td-grid-tool"
+      }, A = {
+        access: "grd",
+        // drawer: !props.noIcons,
+        modelValue: l.value,
+        "onUpdate:modelValue": (z) => l.value = z,
+        label: r.value
+        // dark: props.dark,
+        // disable: props.disable,
+        // hasAccess: props.hasAccess,
+        // onBlockAccess: emitBlockAccess,
+      }, C = {
+        title: "Opacity",
+        icon: "f_opacity",
+        min: 1,
+        max: 100,
+        initial: 50,
+        modelValue: i.value * 100,
+        "onUpdate:modelValue": (z) => i.value = z / 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 = {
+        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);
+    }
+    return () => v();
+  }
+}), Bo = Z({
+  name: "TdGridExpansion",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    "onUpdate:modelValue": [Function, Array],
+    label: { type: String, required: !1 }
+  },
+  emits: ["click", "update:modelValue"],
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = ke(), { expanded: r, selected: l } = be({
+      store: n,
+      options: Se,
+      tab: Se
+    }), i = h(() => {
+      var u;
+      return (u = s.value.td) == null ? void 0 : u.components.grid.title;
+    });
+    h({
+      get: () => e.modelValue,
+      set: (u) => t("update:modelValue", u)
+    });
+    function d() {
+      const u = {
+        class: "td-colors-expansion",
+        "data-cy": "td-colors-expansion",
+        modelValue: r.value,
+        "onUpdate:modelValue": (g) => r.value = g,
+        label: i.value,
+        selected: l.value,
+        icon: "f_grid"
+      };
+      return m(rt, u, () => m($t));
+    }
+    return () => d();
+  }
+}), It = Z({
+  name: "TdLightsSection",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    "onUpdate:modelValue": [Function, Array],
+    label: { type: String, required: !1 }
+  },
+  emits: ["click", "update:modelValue"],
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = Me(), r = b(), l = nt(), { active: i } = $(r), d = h({
+      get: () => n.advancedMode,
+      set: (p) => n.setAdvanced(p)
+    }), u = h({
+      get: () => n.move,
+      set: (p) => n.setMove(p)
+    }), g = h(
+      () => {
+        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) || "";
+      }
+    ), v = h(() => ({
+      modelValue: d.value,
+      "onUpdate:modelValue": (p) => d.value = p,
+      label: g.value
+    })), f = h(
+      () => {
+        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) || "";
+      }
+    ), A = h(() => ({
+      modelValue: u.value,
+      "onUpdate:modelValue": (p) => u.value = p,
+      label: f.value
+    })), C = h(
+      () => {
+        var p;
+        return ((p = s.value.td) == null ? void 0 : p.components.lights.color) || "";
+      }
+    ), y = te(!1), B = h(() => ({
+      key: C.value,
+      label: C.value,
+      type: "none",
+      icon: "f_bulb_light",
+      size: "sm",
+      color: n.colorHex("key"),
+      onClick: () => y.value = !0
+    })), M = h(
+      () => {
+        var p;
+        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.key) || "";
+      }
+    ), z = te(!1), H = h({
+      get: () => n.colorHex("key"),
+      set: (p) => n.setColorHex("key", p)
+    }), Q = h(() => ({
+      key: M.value,
+      label: M.value,
+      type: "none",
+      icon: "f_bulb_key",
+      size: "sm",
+      color: H.value,
+      onClick: () => z.value = !0
+    })), R = h(
+      () => {
+        var p;
+        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.back) || "";
+      }
+    ), I = te(!1), N = h({
+      get: () => n.colorHex("back"),
+      set: (p) => n.setColorHex("back", p)
+    }), W = h(() => ({
+      key: R.value,
+      label: R.value,
+      type: "none",
+      icon: "f_bulb_back",
+      size: "sm",
+      color: N.value,
+      onClick: () => I.value = !0,
+      disable: !V.value
+    })), x = h(
+      () => {
+        var p, K;
+        return V.value ? ((p = s.value.td) == null ? void 0 : p.components.lights.toggles.back.off) || "" : ((K = s.value.td) == null ? void 0 : K.components.lights.toggles.back.on) || "";
+      }
+    ), V = h({
+      get: () => n.property("back", "visible", !0),
+      set: (p) => n.setProperty("back", "visible", p)
+    }), k = h(() => ({
+      modelValue: V.value,
+      "onUpdate:modelValue": (p) => V.value = p,
+      label: x.value
+    })), P = h(
+      () => {
+        var p;
+        return ((p = s.value.td) == null ? void 0 : p.components.lights.labels.fill) || "";
+      }
+    ), c = te(!1), a = h({
+      get: () => n.colorHex("fill"),
+      set: (p) => n.setColorHex("fill", p)
+    }), w = h(() => ({
+      key: P.value,
+      label: P.value,
+      type: "none",
+      icon: "f_bulb_fill",
+      size: "sm",
+      color: a.value,
+      onClick: () => c.value = !0,
+      disable: !L.value
+    })), E = h(
+      () => {
+        var p, K;
+        return L.value ? ((p = s.value.td) == null ? void 0 : p.components.lights.toggles.fill.off) || "" : ((K = s.value.td) == null ? void 0 : K.components.lights.toggles.fill.on) || "";
+      }
+    ), L = h({
+      get: () => n.property("fill", "visible", !0),
+      set: (p) => n.setProperty("fill", "visible", p)
+    }), j = h(() => ({
+      modelValue: L.value,
+      "onUpdate:modelValue": (p) => L.value = p,
+      label: E.value
+    })), D = h({
+      get: () => y.value || z.value || c.value || I.value,
+      set: (p) => y.value = z.value = c.value = I.value = !1
+    }), F = h({
+      get: () => y.value || z.value ? n.colorHex("key") : c.value ? n.colorHex("fill") : n.colorHex("back"),
+      set: (p) => {
+        if (y.value || z.value) {
+          n.setColorHex("key", p);
+          return;
+        }
+        if (c.value) {
+          n.setColorHex("fill", p);
+          return;
+        }
+        n.setColorHex("back", p);
+      }
+    }), _ = h(() => ({
+      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(() => ({
+      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);
+    });
+    function J() {
+      const p = {
+        class: "td-lights-tool"
+      };
+      let K = [];
+      if (D.value)
+        K = [m(Ot, _.value)];
+      else {
+        const le = {
+          class: "td-colors-tool q-pa-xs row justify-center items-center q-gutter-md"
+        }, ue = [];
+        d.value ? (ue.push(m(re, Q.value)), ue.push(m(re, w.value)), ue.push(m(re, W.value))) : ue.push(m(re, B.value));
+        const Le = [];
+        Le.push(m(Ze, A.value)), d.value && (Le.push(m(Ze, j.value)), Le.push(m(Ze, k.value))), Le.push(m(Ze, v.value)), K = [m("div", le, ue), ...Le], K.push(m(kt, X.value));
+      }
+      return m("div", p, K);
+    }
+    return () => J();
+  }
+}), Do = Z({
+  name: "TdLightExpansion",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    "onUpdate:modelValue": [Function, Array],
+    label: { type: String, required: !1 }
+  },
+  emits: ["click", "update:modelValue"],
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = Me(), { expanded: r, selected: l } = be({
+      store: n,
+      options: ge,
+      tab: ge
+    }), i = h(() => {
+      var u;
+      return (u = s.value.td) == null ? void 0 : u.components.lights.title;
+    });
+    h({
+      get: () => e.modelValue,
+      set: (u) => t("update:modelValue", u)
+    });
+    function d() {
+      const u = {
+        class: "td-lights-expansion",
+        "data-cy": "td-lights-expansion",
+        modelValue: r.value,
+        "onUpdate:modelValue": (g) => r.value = g,
+        label: i.value,
+        selected: l.value,
+        icon: "f_bulb_light"
+      };
+      return m(rt, u, () => m(It));
+    }
+    return () => d();
+  }
+}), Nt = Z({
+  name: "TdRelatedSection",
+  setup(e, { slots: o, emit: t }) {
+    const s = Symbol.for("RelatedThreeDSection"), n = Wt(s), r = b(), l = de(), { poseId: i } = $(l);
+    function d() {
+      const u = {
+        class: "td-related-section q-mx-lg q-my-sm"
+      }, g = [];
+      return n && i.value && g.push(
+        m(n, {
+          id: i.value,
+          fbxId: r.selected
+        })
+      ), m("div", u, g);
+    }
+    return () => d();
+  }
+}), zo = Z({
+  name: "TdRelatedExpansion",
+  setup(e, { slots: o, emit: t }) {
+    const { expanded: s } = be({
+      options: xe,
+      tab: xe
+    }), n = h(() => "Related");
+    function r() {
+      const l = {
+        class: "td-related-expansion",
+        modelValue: s.value,
+        "onUpdate:modelValue": (i) => s.value = i,
+        label: n.value,
+        icon: "f_related"
+      };
+      return m(rt, l, () => m(Nt));
+    }
+    return () => r();
+  }
+}), Xt = Z({
+  name: "TdButtons",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    "onUpdate:modelValue": [Function, Array],
+    label: { type: String, required: !1 },
+    fixed: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  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();
+    }
+    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)" : ""),
+        class: "row justify-center items-center q-pa-md"
+      }, R = {
+        class: "td-reset-button",
+        label: "Reset All",
+        onClick: B,
+        onKeyup: M,
+        rounded: !0,
+        unelevated: !0,
+        outline: !0,
+        disable: y.value
+      };
+      return m("div", Q, [m(qt, R)]);
+    }
+    return () => z();
+  }
+}), Eo = Z({
+  name: "TdExpansions",
+  setup(e, { slots: o, emit: t }) {
+    function s() {
+      return m("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(TsGridExpansion),
+        // h(QSeparator),
+        // h(TsAdjustmentExpansion),
+        m(zo),
+        m(je),
+        // h('div', {}, store.loading.percent),
+        m(Xt)
+      ]);
+    }
+    return () => s();
+  }
+}), To = Z({
+  name: "TdColorsButton",
+  props: { size: String },
+  setup(e, {}) {
+    const o = ke(), t = b(), s = h(() => (t == null ? void 0 : t.hasAccess("grd")) || !1), { lang: n } = ee(), r = h(() => {
+      var g;
+      return (g = n.value.td) == null ? void 0 : g.controls.colors.iconTitle;
+    }), { click: l, selected: i } = be({
+      store: o,
+      options: se,
+      tab: se
+    });
+    function d(g) {
+      return t.block(g);
+    }
+    function u() {
+      const g = {
+        hasAccess: s.value,
+        selected: i.value,
+        onClick: l,
+        onBlockAccess: d,
+        size: e.size,
+        "data-id": se,
+        name: "colors",
+        type: "none",
+        icon: "f_palette",
+        label: r.value
+      };
+      return m(re, g, () => []);
+    }
+    return () => u();
+  }
+}), Ao = Z({
+  name: "TdGridButton",
+  props: { size: String },
+  setup(e, {}) {
+    const o = ke(), t = b(), s = h(() => (t == null ? void 0 : t.hasAccess("grd")) || !1), { lang: n } = ee(), r = h(() => {
+      var g;
+      return (g = n.value.td) == null ? void 0 : g.controls.grid.iconTitle;
+    }), { click: l, selected: i } = be({
+      store: o,
+      options: Se,
+      tab: Se
+    });
+    function d(g) {
+      return t.block(g);
+    }
+    function u() {
+      const g = {
+        hasAccess: s.value,
+        selected: i.value,
+        onClick: l,
+        onBlockAccess: d,
+        size: e.size,
+        "data-id": Se,
+        name: "grid",
+        type: "none",
+        icon: "f_grid",
+        label: r.value
+      };
+      return m(re, g, () => []);
+    }
+    return () => u();
+  }
+}), Vo = Z({
+  name: "TdLightsButton",
+  props: { size: String },
+  setup(e, {}) {
+    const o = ke(), t = b(), s = h(() => (t == null ? void 0 : t.hasAccess("grd")) || !1), { lang: n } = ee(), r = h(() => {
+      var g;
+      return (g = n.value.td) == null ? void 0 : g.controls.lights.iconTitle;
+    }), { click: l, selected: i } = be({
+      store: o,
+      options: ge,
+      tab: ge
+    });
+    function d(g) {
+      return t.block(g);
+    }
+    function u() {
+      const g = {
+        hasAccess: s.value,
+        selected: i.value,
+        onClick: l,
+        onBlockAccess: d,
+        size: e.size,
+        "data-id": ge,
+        name: "lights",
+        type: "none",
+        icon: "f_bulb_light",
+        label: r.value
+      };
+      return m(re, g, () => []);
+    }
+    return () => u();
+  }
+}), Lo = Z({
+  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
+    });
+    function l(d) {
+      return o.block(d);
+    }
+    function i() {
+      const d = {
+        hasAccess: !0,
+        selected: r.value,
+        onClick: n,
+        onBlockAccess: l,
+        "data-id": xe,
+        size: e.size,
+        name: "related",
+        icon: "f_related",
+        type: "none",
+        label: s.value
+      };
+      return m(re, d, () => []);
+    }
+    return () => i();
+  }
+}), jo = Z({
+  name: "TsDefaultDrawer",
+  props: {},
+  emits: ["click"],
+  setup(e, { slots: o, emit: t }) {
+    const s = b(), n = "q-ma-xs";
+    function r(l) {
+      return {
+        class: n,
+        size: "sm",
+        onClick: () => s.setActive(l)
+      };
+    }
+    return () => m(
+      Qe,
+      { name: ot },
+      {
+        default: () => m(no, {}, () => [
+          m(To, r(se)),
+          m(Ao, r(Se)),
+          m(Vo, r(ge)),
+          m(Lo, r(xe))
+        ]),
+        secondary: () => m(Xt, { fixed: !1 })
+      }
+    );
+  }
+}), Fo = Z({
+  name: "TdGridDrawer",
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = h(() => {
+      var l;
+      return (l = s.value.td) == null ? void 0 : l.controls.grid.title;
+    });
+    function r() {
+      const l = {
+        class: "td-grid-drawer",
+        name: Se,
+        label: n.value
+      };
+      return m(Qe, l, () => m($t));
+    }
+    return () => r();
+  }
+}), Po = Z({
+  name: "TdRelatedDrawer",
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = h(() => {
+      var l;
+      return (l = s.value.td) == null ? void 0 : l.controls.related.title;
+    });
+    function r() {
+      const l = {
+        class: "td-related-drawer",
+        name: xe,
+        label: n.value
+      };
+      return m(Qe, l, () => m(Nt));
+    }
+    return () => r();
+  }
+}), Go = Z({
+  name: "TdLightsDrawer",
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = h(() => {
+      var l;
+      return (l = s.value.td) == null ? void 0 : l.controls.lights.title;
+    });
+    function r() {
+      const l = {
+        class: "td-lights-drawer",
+        name: ge,
+        label: n.value
+      };
+      return m(Qe, l, () => m(It));
+    }
+    return () => r();
+  }
+}), Ho = Z({
+  name: "TdLightsDrawer",
+  setup(e, { slots: o, emit: t }) {
+    const { lang: s } = ee(), n = h(() => {
+      var l;
+      return (l = s.value.td) == null ? void 0 : l.controls.colors.title;
+    });
+    function r() {
+      const l = {
+        class: "td-colors-drawer",
+        name: se,
+        label: n.value
+      };
+      return m(Qe, l, () => m(_t));
+    }
+    return () => r();
+  }
+}), Ro = Z({
+  name: "TsDrawers",
+  setup(e, { slots: o, emit: t }) {
+    const s = b(), n = h({
+      get: () => s.active,
+      set: (l) => s.setActive(l)
+    });
+    function r() {
+      const l = {
+        modelValue: n.value,
+        "onUpdate:modelValue": (i) => n.value = i
+      };
+      return m(ro, l, () => [
+        m(jo),
+        m(Go),
+        m(Ho),
+        m(Fo),
+        m(Po)
+      ]);
+    }
+    return () => r();
+  }
+}), Qo = /* @__PURE__ */ Object.assign({
+  name: "TdPage",
+  slug: "td-page",
+  inheritAttrs: !1
+}, {
+  __name: "TdPage",
+  props: /* @__PURE__ */ oo({
+    id: Number
+  }, {
+    miniState: { type: Boolean },
+    miniStateModifiers: {}
+  }),
+  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), {
+      class: "three-dimension-page",
+      miniState: n.value,
+      "onUpdate:miniState": l[0] || (l[0] = (i) => n.value = i),
+      "no-drawer-padding": !0,
+      title: "3D Viewer"
+    }, {
+      toolDrawer: ct(() => [
+        r.$q.platform.is.mobile ? gt("", !0) : (Je(), at(it(Eo), { key: 0 }))
+      ]),
+      bottomDrawer: ct(() => [
+        r.$q.platform.is.mobile ? (Je(), at(it(Ro), { key: 0 })) : gt("", !0)
+      ]),
+      default: ct(() => [
+        to(Mo, { id: s.value }, null, 8, ["id"])
+      ]),
+      _: 1
+    }, 8, ["miniState"]));
+  }
+});
+export {
+  Qo as TdPage,
+  b as use3dStore,
+  Ut as useColorsStore,
+  Ct as useControlsStore,
+  de as useFBXStore,
+  ke as useGridStore,
+  Ve as useGroundStore,
+  Me as useLightsStore,
+  lt as useSceneStore
+};