@tresjs/leches 0.1.0 → 0.2.0

package/dist/tresleches.js

@@ -1,65 +1,65 @@
 /**
  * name: @tresjs/leches
- * version: v0.1.0
+ * version: v0.2.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { unref as z, getCurrentScope as st, onScopeDispose as it, toRef as nt, readonly as rt, customRef as ot, ref as w, defineComponent as C, computed as v, reactive as W, h as ht, watch as E, inject as at, isReactive as lt, toRefs as ct, isRef as F, openBlock as g, createElementBlock as b, createElementVNode as d, toDisplayString as $, normalizeClass as q, withDirectives as ut, vShow as yt, normalizeStyle as xt, Fragment as L, renderList as B, createCommentVNode as U, createBlock as k, withCtx as _t } from "vue";
-import { useStorage as dt, isClient as mt, useDraggable as gt, useMouse as V, useWindowSize as ft } from "@vueuse/core";
-function K(i) {
-  return st() ? (it(i), !0) : !1;
+import { unref as z, getCurrentScope as ot, onScopeDispose as ht, toRef as at, readonly as lt, customRef as ct, ref as w, defineComponent as C, computed as S, reactive as B, h as ut, watch as E, inject as yt, isReactive as xt, toRefs as _t, isRef as O, openBlock as m, createElementBlock as b, createElementVNode as d, toDisplayString as $, normalizeClass as T, withDirectives as U, vShow as K, normalizeStyle as dt, Fragment as D, renderList as X, createCommentVNode as G, createVNode as mt, Transition as gt, withCtx as J, createBlock as v } from "vue";
+import { useStorage as ft, isClient as pt, useDraggable as zt, useMouse as N, useWindowSize as Mt } from "@vueuse/core";
+function tt(n) {
+  return ot() ? (ht(n), !0) : !1;
 }
-function I(i) {
-  return typeof i == "function" ? i() : z(i);
+function A(n) {
+  return typeof n == "function" ? n() : z(n);
 }
-const G = typeof window < "u", J = () => {
-}, Y = /* @__PURE__ */ pt();
-function pt() {
-  var i;
-  return G && ((i = window == null ? void 0 : window.navigator) == null ? void 0 : i.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
+const et = typeof window < "u", st = () => {
+}, H = /* @__PURE__ */ bt();
+function bt() {
+  var n;
+  return et && ((n = window == null ? void 0 : window.navigator) == null ? void 0 : n.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
 }
-function zt(...i) {
-  if (i.length !== 1)
-    return nt(...i);
-  const t = i[0];
-  return typeof t == "function" ? rt(ot(() => ({ get: t, set: J }))) : w(t);
+function wt(...n) {
+  if (n.length !== 1)
+    return at(...n);
+  const t = n[0];
+  return typeof t == "function" ? lt(ct(() => ({ get: t, set: st }))) : w(t);
 }
-function Mt(i) {
+function vt(n) {
   var t;
-  const e = I(i);
+  const e = A(n);
   return (t = e == null ? void 0 : e.$el) != null ? t : e;
 }
-const wt = G ? window : void 0;
-function bt(...i) {
-  let t, e, s, n;
-  if (typeof i[0] == "string" || Array.isArray(i[0]) ? ([e, s, n] = i, t = wt) : [t, e, s, n] = i, !t)
-    return J;
+const Ct = et ? window : void 0;
+function St(...n) {
+  let t, e, s, i;
+  if (typeof n[0] == "string" || Array.isArray(n[0]) ? ([e, s, i] = n, t = Ct) : [t, e, s, i] = n, !t)
+    return st;
   Array.isArray(e) || (e = [e]), Array.isArray(s) || (s = [s]);
-  const r = [], a = () => {
+  const r = [], o = () => {
     r.forEach((l) => l()), r.length = 0;
-  }, h = (l, o, x, c) => (l.addEventListener(o, x, c), () => l.removeEventListener(o, x, c)), y = E(
-    () => [Mt(t), I(n)],
-    ([l, o]) => {
-      a(), l && r.push(
-        ...e.flatMap((x) => s.map((c) => h(l, x, c, o)))
+  }, h = (l, a, x, c) => (l.addEventListener(a, x, c), () => l.removeEventListener(a, x, c)), y = E(
+    () => [vt(t), A(i)],
+    ([l, a]) => {
+      o(), l && r.push(
+        ...e.flatMap((x) => s.map((c) => h(l, x, c, a)))
       );
     },
     { immediate: !0, flush: "post" }
   ), u = () => {
-    y(), a();
+    y(), o();
   };
-  return K(u), u;
+  return tt(u), u;
 }
-var vt = Object.defineProperty, Ct = Object.defineProperties, St = Object.getOwnPropertyDescriptors, H = Object.getOwnPropertySymbols, kt = Object.prototype.hasOwnProperty, $t = Object.prototype.propertyIsEnumerable, O = (i, t, e) => t in i ? vt(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, Et = (i, t) => {
+var kt = Object.defineProperty, $t = Object.defineProperties, Et = Object.getOwnPropertyDescriptors, Q = Object.getOwnPropertySymbols, It = Object.prototype.hasOwnProperty, At = Object.prototype.propertyIsEnumerable, Z = (n, t, e) => t in n ? kt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e, Tt = (n, t) => {
   for (var e in t || (t = {}))
-    kt.call(t, e) && O(i, e, t[e]);
-  if (H)
-    for (var e of H(t))
-      $t.call(t, e) && O(i, e, t[e]);
-  return i;
-}, At = (i, t) => Ct(i, St(t));
-const It = /* @__PURE__ */ C({
+    It.call(t, e) && Z(n, e, t[e]);
+  if (Q)
+    for (var e of Q(t))
+      At.call(t, e) && Z(n, e, t[e]);
+  return n;
+}, qt = (n, t) => $t(n, Et(t));
+const Dt = /* @__PURE__ */ C({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -73,94 +73,94 @@ const It = /* @__PURE__ */ C({
     "handle",
     "axis"
   ],
-  setup(i, { slots: t }) {
-    const e = w(), s = v(() => {
+  setup(n, { slots: t }) {
+    const e = w(), s = S(() => {
       var y;
-      return (y = i.handle) != null ? y : e.value;
-    }), n = i.storageKey && dt(
-      i.storageKey,
-      I(i.initialValue) || { x: 0, y: 0 },
-      mt ? i.storageType === "session" ? sessionStorage : localStorage : void 0
-    ), r = n || i.initialValue || { x: 0, y: 0 }, a = (y) => {
-      n && (n.value.x = y.x, n.value.y = y.y);
-    }, h = W(gt(e, At(Et({}, i), {
+      return (y = n.handle) != null ? y : e.value;
+    }), i = n.storageKey && ft(
+      n.storageKey,
+      A(n.initialValue) || { x: 0, y: 0 },
+      pt ? n.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), r = i || n.initialValue || { x: 0, y: 0 }, o = (y) => {
+      i && (i.value.x = y.x, i.value.y = y.y);
+    }, h = B(zt(e, qt(Tt({}, n), {
       handle: s,
       initialValue: r,
-      onEnd: a
+      onEnd: o
     })));
     return () => {
       if (t.default)
-        return ht(i.as || "div", { ref: e, style: `touch-action:none;${h.style}` }, t.default(h));
+        return ut(n.as || "div", { ref: e, style: `touch-action:none;${h.style}` }, t.default(h));
     };
   }
 });
-function tt(i) {
-  const t = window.getComputedStyle(i);
-  if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && i.clientHeight < i.scrollHeight || t.overflowY === "auto" && i.clientWidth < i.scrollWidth)
+function nt(n) {
+  const t = window.getComputedStyle(n);
+  if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && n.clientHeight < n.scrollHeight || t.overflowY === "auto" && n.clientWidth < n.scrollWidth)
     return !0;
   {
-    const e = i.parentNode;
-    return !e || e.tagName === "BODY" ? !1 : tt(e);
+    const e = n.parentNode;
+    return !e || e.tagName === "BODY" ? !1 : nt(e);
   }
 }
-function Tt(i) {
-  const t = i || window.event, e = t.target;
-  return tt(e) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+function jt(n) {
+  const t = n || window.event, e = t.target;
+  return nt(e) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }
-function qt(i, t = !1) {
+function Pt(n, t = !1) {
   const e = w(t);
-  let s = null, n;
-  E(zt(i), (h) => {
+  let s = null, i;
+  E(wt(n), (h) => {
     if (h) {
       const y = h;
-      n = y.style.overflow, e.value && (y.style.overflow = "hidden");
+      i = y.style.overflow, e.value && (y.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
   const r = () => {
-    const h = I(i);
-    !h || e.value || (Y && (s = bt(
+    const h = A(n);
+    !h || e.value || (H && (s = St(
       h,
       "touchmove",
       (y) => {
-        Tt(y);
+        jt(y);
       },
       { passive: !1 }
     )), h.style.overflow = "hidden", e.value = !0);
-  }, a = () => {
-    const h = I(i);
-    !h || !e.value || (Y && (s == null || s()), h.style.overflow = n, e.value = !1);
+  }, o = () => {
+    const h = A(n);
+    !h || !e.value || (H && (s == null || s()), h.style.overflow = i, e.value = !1);
   };
-  return K(a), v({
+  return tt(o), S({
     get() {
       return e.value;
     },
     set(h) {
-      h ? r() : a();
+      h ? r() : o();
     }
   });
 }
-function Dt() {
-  let i = !1;
+function Lt() {
+  let n = !1;
   const t = w(!1);
   return (e, s) => {
-    if (t.value = s.value, i)
+    if (t.value = s.value, n)
       return;
-    i = !0;
-    const n = qt(e, s.value);
-    E(t, (r) => n.value = r);
+    n = !0;
+    const i = Pt(e, s.value);
+    E(t, (r) => i.value = r);
   };
 }
-Dt();
-const Pt = Symbol("CONTROLS_CONTEXT_KEY"), j = W({
+Lt();
+const Vt = Symbol("CONTROLS_CONTEXT_KEY"), V = B({
   controls: []
 });
-function jt() {
-  return j;
+function Xt() {
+  return V;
 }
-function Q(i) {
-  return Object.entries(i).map(([t, e]) => !F(e) && e.value ? {
+function P(n) {
+  return Object.entries(n).map(([t, e]) => !O(e) && e.value ? {
     ...e,
     label: e.label || t,
     value: e.value,
@@ -169,33 +169,39 @@ function Q(i) {
   } : {
     label: e.label || t,
     value: e,
-    type: F(e) ? typeof e.value : typeof e,
+    type: O(e) ? typeof e.value : typeof e,
     visible: !0
   });
 }
-function Se(i) {
-  const t = at(Pt, {});
-  let e = [];
-  if (typeof i != "string")
-    if (lt(i)) {
-      const s = ct(i);
-      e = Q(s);
-    } else
-      e = Q(i);
-  return j.controls = [...j.controls, ...e], t;
+function Ee(n, t) {
+  const e = yt(Vt, {});
+  let s = [];
+  if (typeof n == "string")
+    s.push({
+      label: n,
+      visible: !0,
+      type: "folder",
+      controls: P(t)
+    });
+  else if (xt(n)) {
+    const i = _t(n);
+    s = P(i);
+  } else
+    s = P(n);
+  return V.controls = [...V.controls, ...s], e;
 }
 /**
  * @license
  * Copyright 2010-2023 Three.js Authors
  * SPDX-License-Identifier: MIT
  */
-const et = "152";
-function X(i, t, e) {
-  return Math.max(t, Math.min(e, i));
+const it = "152";
+function R(n, t, e) {
+  return Math.max(t, Math.min(e, n));
 }
-class D {
+class j {
   constructor(t = 0, e = 0) {
-    D.prototype.isVector2 = !0, this.x = t, this.y = e;
+    j.prototype.isVector2 = !0, this.x = t, this.y = e;
   }
   get width() {
     return this.x;
@@ -284,8 +290,8 @@ class D {
     return this.multiplyScalar(1 / t);
   }
   applyMatrix3(t) {
-    const e = this.x, s = this.y, n = t.elements;
-    return this.x = n[0] * e + n[3] * s + n[6], this.y = n[1] * e + n[4] * s + n[7], this;
+    const e = this.x, s = this.y, i = t.elements;
+    return this.x = i[0] * e + i[3] * s + i[6], this.y = i[1] * e + i[4] * s + i[7], this;
   }
   min(t) {
     return this.x = Math.min(this.x, t.x), this.y = Math.min(this.y, t.y), this;
@@ -344,7 +350,7 @@ class D {
     if (e === 0)
       return Math.PI / 2;
     const s = this.dot(t) / e;
-    return Math.acos(X(s, -1, 1));
+    return Math.acos(R(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -378,8 +384,8 @@ class D {
     return this.x = t.getX(e), this.y = t.getY(e), this;
   }
   rotateAround(t, e) {
-    const s = Math.cos(e), n = Math.sin(e), r = this.x - t.x, a = this.y - t.y;
-    return this.x = r * s - a * n + t.x, this.y = r * n + a * s + t.y, this;
+    const s = Math.cos(e), i = Math.sin(e), r = this.x - t.x, o = this.y - t.y;
+    return this.x = r * s - o * i + t.x, this.y = r * i + o * s + t.y, this;
   }
   random() {
     return this.x = Math.random(), this.y = Math.random(), this;
@@ -388,39 +394,39 @@ class D {
     yield this.x, yield this.y;
   }
 }
-class Lt {
-  constructor(t = 0, e = 0, s = 0, n = 1) {
-    this.isQuaternion = !0, this._x = t, this._y = e, this._z = s, this._w = n;
+class Nt {
+  constructor(t = 0, e = 0, s = 0, i = 1) {
+    this.isQuaternion = !0, this._x = t, this._y = e, this._z = s, this._w = i;
   }
-  static slerpFlat(t, e, s, n, r, a, h) {
-    let y = s[n + 0], u = s[n + 1], l = s[n + 2], o = s[n + 3];
-    const x = r[a + 0], c = r[a + 1], _ = r[a + 2], f = r[a + 3];
+  static slerpFlat(t, e, s, i, r, o, h) {
+    let y = s[i + 0], u = s[i + 1], l = s[i + 2], a = s[i + 3];
+    const x = r[o + 0], c = r[o + 1], _ = r[o + 2], f = r[o + 3];
     if (h === 0) {
-      t[e + 0] = y, t[e + 1] = u, t[e + 2] = l, t[e + 3] = o;
+      t[e + 0] = y, t[e + 1] = u, t[e + 2] = l, t[e + 3] = a;
       return;
     }
     if (h === 1) {
       t[e + 0] = x, t[e + 1] = c, t[e + 2] = _, t[e + 3] = f;
       return;
     }
-    if (o !== f || y !== x || u !== c || l !== _) {
+    if (a !== f || y !== x || u !== c || l !== _) {
       let p = 1 - h;
-      const m = y * x + u * c + l * _ + o * f, M = m >= 0 ? 1 : -1, N = 1 - m * m;
-      if (N > Number.EPSILON) {
-        const S = Math.sqrt(N), R = Math.atan2(S, m * M);
-        p = Math.sin(p * R) / S, h = Math.sin(h * R) / S;
+      const g = y * x + u * c + l * _ + a * f, M = g >= 0 ? 1 : -1, F = 1 - g * g;
+      if (F > Number.EPSILON) {
+        const k = Math.sqrt(F), Y = Math.atan2(k, g * M);
+        p = Math.sin(p * Y) / k, h = Math.sin(h * Y) / k;
       }
-      const T = h * M;
-      if (y = y * p + x * T, u = u * p + c * T, l = l * p + _ * T, o = o * p + f * T, p === 1 - h) {
-        const S = 1 / Math.sqrt(y * y + u * u + l * l + o * o);
-        y *= S, u *= S, l *= S, o *= S;
+      const q = h * M;
+      if (y = y * p + x * q, u = u * p + c * q, l = l * p + _ * q, a = a * p + f * q, p === 1 - h) {
+        const k = 1 / Math.sqrt(y * y + u * u + l * l + a * a);
+        y *= k, u *= k, l *= k, a *= k;
       }
     }
-    t[e] = y, t[e + 1] = u, t[e + 2] = l, t[e + 3] = o;
+    t[e] = y, t[e + 1] = u, t[e + 2] = l, t[e + 3] = a;
   }
-  static multiplyQuaternionsFlat(t, e, s, n, r, a) {
-    const h = s[n], y = s[n + 1], u = s[n + 2], l = s[n + 3], o = r[a], x = r[a + 1], c = r[a + 2], _ = r[a + 3];
-    return t[e] = h * _ + l * o + y * c - u * x, t[e + 1] = y * _ + l * x + u * o - h * c, t[e + 2] = u * _ + l * c + h * x - y * o, t[e + 3] = l * _ - h * o - y * x - u * c, t;
+  static multiplyQuaternionsFlat(t, e, s, i, r, o) {
+    const h = s[i], y = s[i + 1], u = s[i + 2], l = s[i + 3], a = r[o], x = r[o + 1], c = r[o + 2], _ = r[o + 3];
+    return t[e] = h * _ + l * a + y * c - u * x, t[e + 1] = y * _ + l * x + u * a - h * c, t[e + 2] = u * _ + l * c + h * x - y * a, t[e + 3] = l * _ - h * a - y * x - u * c, t;
   }
   get x() {
     return this._x;
@@ -446,8 +452,8 @@ class Lt {
   set w(t) {
     this._w = t, this._onChangeCallback();
   }
-  set(t, e, s, n) {
-    return this._x = t, this._y = e, this._z = s, this._w = n, this._onChangeCallback(), this;
+  set(t, e, s, i) {
+    return this._x = t, this._y = e, this._z = s, this._w = i, this._onChangeCallback(), this;
   }
   clone() {
     return new this.constructor(this._x, this._y, this._z, this._w);
@@ -456,49 +462,49 @@ class Lt {
     return this._x = t.x, this._y = t.y, this._z = t.z, this._w = t.w, this._onChangeCallback(), this;
   }
   setFromEuler(t, e) {
-    const s = t._x, n = t._y, r = t._z, a = t._order, h = Math.cos, y = Math.sin, u = h(s / 2), l = h(n / 2), o = h(r / 2), x = y(s / 2), c = y(n / 2), _ = y(r / 2);
-    switch (a) {
+    const s = t._x, i = t._y, r = t._z, o = t._order, h = Math.cos, y = Math.sin, u = h(s / 2), l = h(i / 2), a = h(r / 2), x = y(s / 2), c = y(i / 2), _ = y(r / 2);
+    switch (o) {
       case "XYZ":
-        this._x = x * l * o + u * c * _, this._y = u * c * o - x * l * _, this._z = u * l * _ + x * c * o, this._w = u * l * o - x * c * _;
+        this._x = x * l * a + u * c * _, this._y = u * c * a - x * l * _, this._z = u * l * _ + x * c * a, this._w = u * l * a - x * c * _;
         break;
       case "YXZ":
-        this._x = x * l * o + u * c * _, this._y = u * c * o - x * l * _, this._z = u * l * _ - x * c * o, this._w = u * l * o + x * c * _;
+        this._x = x * l * a + u * c * _, this._y = u * c * a - x * l * _, this._z = u * l * _ - x * c * a, this._w = u * l * a + x * c * _;
         break;
       case "ZXY":
-        this._x = x * l * o - u * c * _, this._y = u * c * o + x * l * _, this._z = u * l * _ + x * c * o, this._w = u * l * o - x * c * _;
+        this._x = x * l * a - u * c * _, this._y = u * c * a + x * l * _, this._z = u * l * _ + x * c * a, this._w = u * l * a - x * c * _;
         break;
       case "ZYX":
-        this._x = x * l * o - u * c * _, this._y = u * c * o + x * l * _, this._z = u * l * _ - x * c * o, this._w = u * l * o + x * c * _;
+        this._x = x * l * a - u * c * _, this._y = u * c * a + x * l * _, this._z = u * l * _ - x * c * a, this._w = u * l * a + x * c * _;
         break;
       case "YZX":
-        this._x = x * l * o + u * c * _, this._y = u * c * o + x * l * _, this._z = u * l * _ - x * c * o, this._w = u * l * o - x * c * _;
+        this._x = x * l * a + u * c * _, this._y = u * c * a + x * l * _, this._z = u * l * _ - x * c * a, this._w = u * l * a - x * c * _;
         break;
       case "XZY":
-        this._x = x * l * o - u * c * _, this._y = u * c * o - x * l * _, this._z = u * l * _ + x * c * o, this._w = u * l * o + x * c * _;
+        this._x = x * l * a - u * c * _, this._y = u * c * a - x * l * _, this._z = u * l * _ + x * c * a, this._w = u * l * a + x * c * _;
         break;
       default:
-        console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + a);
+        console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + o);
     }
     return e !== !1 && this._onChangeCallback(), this;
   }
   setFromAxisAngle(t, e) {
-    const s = e / 2, n = Math.sin(s);
-    return this._x = t.x * n, this._y = t.y * n, this._z = t.z * n, this._w = Math.cos(s), this._onChangeCallback(), this;
+    const s = e / 2, i = Math.sin(s);
+    return this._x = t.x * i, this._y = t.y * i, this._z = t.z * i, this._w = Math.cos(s), this._onChangeCallback(), this;
   }
   setFromRotationMatrix(t) {
-    const e = t.elements, s = e[0], n = e[4], r = e[8], a = e[1], h = e[5], y = e[9], u = e[2], l = e[6], o = e[10], x = s + h + o;
+    const e = t.elements, s = e[0], i = e[4], r = e[8], o = e[1], h = e[5], y = e[9], u = e[2], l = e[6], a = e[10], x = s + h + a;
     if (x > 0) {
       const c = 0.5 / Math.sqrt(x + 1);
-      this._w = 0.25 / c, this._x = (l - y) * c, this._y = (r - u) * c, this._z = (a - n) * c;
-    } else if (s > h && s > o) {
-      const c = 2 * Math.sqrt(1 + s - h - o);
-      this._w = (l - y) / c, this._x = 0.25 * c, this._y = (n + a) / c, this._z = (r + u) / c;
-    } else if (h > o) {
-      const c = 2 * Math.sqrt(1 + h - s - o);
-      this._w = (r - u) / c, this._x = (n + a) / c, this._y = 0.25 * c, this._z = (y + l) / c;
+      this._w = 0.25 / c, this._x = (l - y) * c, this._y = (r - u) * c, this._z = (o - i) * c;
+    } else if (s > h && s > a) {
+      const c = 2 * Math.sqrt(1 + s - h - a);
+      this._w = (l - y) / c, this._x = 0.25 * c, this._y = (i + o) / c, this._z = (r + u) / c;
+    } else if (h > a) {
+      const c = 2 * Math.sqrt(1 + h - s - a);
+      this._w = (r - u) / c, this._x = (i + o) / c, this._y = 0.25 * c, this._z = (y + l) / c;
     } else {
-      const c = 2 * Math.sqrt(1 + o - s - h);
-      this._w = (a - n) / c, this._x = (r + u) / c, this._y = (y + l) / c, this._z = 0.25 * c;
+      const c = 2 * Math.sqrt(1 + a - s - h);
+      this._w = (o - i) / c, this._x = (r + u) / c, this._y = (y + l) / c, this._z = 0.25 * c;
     }
     return this._onChangeCallback(), this;
   }
@@ -507,14 +513,14 @@ class Lt {
     return s < Number.EPSILON ? (s = 0, Math.abs(t.x) > Math.abs(t.z) ? (this._x = -t.y, this._y = t.x, this._z = 0, this._w = s) : (this._x = 0, this._y = -t.z, this._z = t.y, this._w = s)) : (this._x = t.y * e.z - t.z * e.y, this._y = t.z * e.x - t.x * e.z, this._z = t.x * e.y - t.y * e.x, this._w = s), this.normalize();
   }
   angleTo(t) {
-    return 2 * Math.acos(Math.abs(X(this.dot(t), -1, 1)));
+    return 2 * Math.acos(Math.abs(R(this.dot(t), -1, 1)));
   }
   rotateTowards(t, e) {
     const s = this.angleTo(t);
     if (s === 0)
       return this;
-    const n = Math.min(1, e / s);
-    return this.slerp(t, n), this;
+    const i = Math.min(1, e / s);
+    return this.slerp(t, i), this;
   }
   identity() {
     return this.set(0, 0, 0, 1);
@@ -545,36 +551,36 @@ class Lt {
     return this.multiplyQuaternions(t, this);
   }
   multiplyQuaternions(t, e) {
-    const s = t._x, n = t._y, r = t._z, a = t._w, h = e._x, y = e._y, u = e._z, l = e._w;
-    return this._x = s * l + a * h + n * u - r * y, this._y = n * l + a * y + r * h - s * u, this._z = r * l + a * u + s * y - n * h, this._w = a * l - s * h - n * y - r * u, this._onChangeCallback(), this;
+    const s = t._x, i = t._y, r = t._z, o = t._w, h = e._x, y = e._y, u = e._z, l = e._w;
+    return this._x = s * l + o * h + i * u - r * y, this._y = i * l + o * y + r * h - s * u, this._z = r * l + o * u + s * y - i * h, this._w = o * l - s * h - i * y - r * u, this._onChangeCallback(), this;
   }
   slerp(t, e) {
     if (e === 0)
       return this;
     if (e === 1)
       return this.copy(t);
-    const s = this._x, n = this._y, r = this._z, a = this._w;
-    let h = a * t._w + s * t._x + n * t._y + r * t._z;
+    const s = this._x, i = this._y, r = this._z, o = this._w;
+    let h = o * t._w + s * t._x + i * t._y + r * t._z;
     if (h < 0 ? (this._w = -t._w, this._x = -t._x, this._y = -t._y, this._z = -t._z, h = -h) : this.copy(t), h >= 1)
-      return this._w = a, this._x = s, this._y = n, this._z = r, this;
+      return this._w = o, this._x = s, this._y = i, this._z = r, this;
     const y = 1 - h * h;
     if (y <= Number.EPSILON) {
       const c = 1 - e;
-      return this._w = c * a + e * this._w, this._x = c * s + e * this._x, this._y = c * n + e * this._y, this._z = c * r + e * this._z, this.normalize(), this._onChangeCallback(), this;
+      return this._w = c * o + e * this._w, this._x = c * s + e * this._x, this._y = c * i + e * this._y, this._z = c * r + e * this._z, this.normalize(), this._onChangeCallback(), this;
     }
-    const u = Math.sqrt(y), l = Math.atan2(u, h), o = Math.sin((1 - e) * l) / u, x = Math.sin(e * l) / u;
-    return this._w = a * o + this._w * x, this._x = s * o + this._x * x, this._y = n * o + this._y * x, this._z = r * o + this._z * x, this._onChangeCallback(), this;
+    const u = Math.sqrt(y), l = Math.atan2(u, h), a = Math.sin((1 - e) * l) / u, x = Math.sin(e * l) / u;
+    return this._w = o * a + this._w * x, this._x = s * a + this._x * x, this._y = i * a + this._y * x, this._z = r * a + this._z * x, this._onChangeCallback(), this;
   }
   slerpQuaternions(t, e, s) {
     return this.copy(t).slerp(e, s);
   }
   random() {
-    const t = Math.random(), e = Math.sqrt(1 - t), s = Math.sqrt(t), n = 2 * Math.PI * Math.random(), r = 2 * Math.PI * Math.random();
+    const t = Math.random(), e = Math.sqrt(1 - t), s = Math.sqrt(t), i = 2 * Math.PI * Math.random(), r = 2 * Math.PI * Math.random();
     return this.set(
-      e * Math.cos(n),
+      e * Math.cos(i),
       s * Math.sin(r),
       s * Math.cos(r),
-      e * Math.sin(n)
+      e * Math.sin(i)
     );
   }
   equals(t) {
@@ -601,9 +607,9 @@ class Lt {
     yield this._x, yield this._y, yield this._z, yield this._w;
   }
 }
-class A {
+class I {
   constructor(t = 0, e = 0, s = 0) {
-    A.prototype.isVector3 = !0, this.x = t, this.y = e, this.z = s;
+    I.prototype.isVector3 = !0, this.x = t, this.y = e, this.z = s;
   }
   set(t, e, s) {
     return s === void 0 && (s = this.z), this.x = t, this.y = e, this.z = s, this;
@@ -685,25 +691,25 @@ class A {
     return this.x = t.x * e.x, this.y = t.y * e.y, this.z = t.z * e.z, this;
   }
   applyEuler(t) {
-    return this.applyQuaternion(Z.setFromEuler(t));
+    return this.applyQuaternion(W.setFromEuler(t));
   }
   applyAxisAngle(t, e) {
-    return this.applyQuaternion(Z.setFromAxisAngle(t, e));
+    return this.applyQuaternion(W.setFromAxisAngle(t, e));
   }
   applyMatrix3(t) {
-    const e = this.x, s = this.y, n = this.z, r = t.elements;
-    return this.x = r[0] * e + r[3] * s + r[6] * n, this.y = r[1] * e + r[4] * s + r[7] * n, this.z = r[2] * e + r[5] * s + r[8] * n, this;
+    const e = this.x, s = this.y, i = this.z, r = t.elements;
+    return this.x = r[0] * e + r[3] * s + r[6] * i, this.y = r[1] * e + r[4] * s + r[7] * i, this.z = r[2] * e + r[5] * s + r[8] * i, this;
   }
   applyNormalMatrix(t) {
     return this.applyMatrix3(t).normalize();
   }
   applyMatrix4(t) {
-    const e = this.x, s = this.y, n = this.z, r = t.elements, a = 1 / (r[3] * e + r[7] * s + r[11] * n + r[15]);
-    return this.x = (r[0] * e + r[4] * s + r[8] * n + r[12]) * a, this.y = (r[1] * e + r[5] * s + r[9] * n + r[13]) * a, this.z = (r[2] * e + r[6] * s + r[10] * n + r[14]) * a, this;
+    const e = this.x, s = this.y, i = this.z, r = t.elements, o = 1 / (r[3] * e + r[7] * s + r[11] * i + r[15]);
+    return this.x = (r[0] * e + r[4] * s + r[8] * i + r[12]) * o, this.y = (r[1] * e + r[5] * s + r[9] * i + r[13]) * o, this.z = (r[2] * e + r[6] * s + r[10] * i + r[14]) * o, this;
   }
   applyQuaternion(t) {
-    const e = this.x, s = this.y, n = this.z, r = t.x, a = t.y, h = t.z, y = t.w, u = y * e + a * n - h * s, l = y * s + h * e - r * n, o = y * n + r * s - a * e, x = -r * e - a * s - h * n;
-    return this.x = u * y + x * -r + l * -h - o * -a, this.y = l * y + x * -a + o * -r - u * -h, this.z = o * y + x * -h + u * -a - l * -r, this;
+    const e = this.x, s = this.y, i = this.z, r = t.x, o = t.y, h = t.z, y = t.w, u = y * e + o * i - h * s, l = y * s + h * e - r * i, a = y * i + r * s - o * e, x = -r * e - o * s - h * i;
+    return this.x = u * y + x * -r + l * -h - a * -o, this.y = l * y + x * -o + a * -r - u * -h, this.z = a * y + x * -h + u * -o - l * -r, this;
   }
   project(t) {
     return this.applyMatrix4(t.matrixWorldInverse).applyMatrix4(t.projectionMatrix);
@@ -712,8 +718,8 @@ class A {
     return this.applyMatrix4(t.projectionMatrixInverse).applyMatrix4(t.matrixWorld);
   }
   transformDirection(t) {
-    const e = this.x, s = this.y, n = this.z, r = t.elements;
-    return this.x = r[0] * e + r[4] * s + r[8] * n, this.y = r[1] * e + r[5] * s + r[9] * n, this.z = r[2] * e + r[6] * s + r[10] * n, this.normalize();
+    const e = this.x, s = this.y, i = this.z, r = t.elements;
+    return this.x = r[0] * e + r[4] * s + r[8] * i, this.y = r[1] * e + r[5] * s + r[9] * i, this.z = r[2] * e + r[6] * s + r[10] * i, this.normalize();
   }
   divide(t) {
     return this.x /= t.x, this.y /= t.y, this.z /= t.z, this;
@@ -781,8 +787,8 @@ class A {
     return this.crossVectors(this, t);
   }
   crossVectors(t, e) {
-    const s = t.x, n = t.y, r = t.z, a = e.x, h = e.y, y = e.z;
-    return this.x = n * y - r * h, this.y = r * a - s * y, this.z = s * h - n * a, this;
+    const s = t.x, i = t.y, r = t.z, o = e.x, h = e.y, y = e.z;
+    return this.x = i * y - r * h, this.y = r * o - s * y, this.z = s * h - i * o, this;
   }
   projectOnVector(t) {
     const e = t.lengthSq();
@@ -792,24 +798,24 @@ class A {
     return this.copy(t).multiplyScalar(s);
   }
   projectOnPlane(t) {
-    return P.copy(this).projectOnVector(t), this.sub(P);
+    return L.copy(this).projectOnVector(t), this.sub(L);
   }
   reflect(t) {
-    return this.sub(P.copy(t).multiplyScalar(2 * this.dot(t)));
+    return this.sub(L.copy(t).multiplyScalar(2 * this.dot(t)));
   }
   angleTo(t) {
     const e = Math.sqrt(this.lengthSq() * t.lengthSq());
     if (e === 0)
       return Math.PI / 2;
     const s = this.dot(t) / e;
-    return Math.acos(X(s, -1, 1));
+    return Math.acos(R(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
   }
   distanceToSquared(t) {
-    const e = this.x - t.x, s = this.y - t.y, n = this.z - t.z;
-    return e * e + s * s + n * n;
+    const e = this.x - t.x, s = this.y - t.y, i = this.z - t.z;
+    return e * e + s * s + i * i;
   }
   manhattanDistanceTo(t) {
     return Math.abs(this.x - t.x) + Math.abs(this.y - t.y) + Math.abs(this.z - t.z);
@@ -818,8 +824,8 @@ class A {
     return this.setFromSphericalCoords(t.radius, t.phi, t.theta);
   }
   setFromSphericalCoords(t, e, s) {
-    const n = Math.sin(e) * t;
-    return this.x = n * Math.sin(s), this.y = Math.cos(e) * t, this.z = n * Math.cos(s), this;
+    const i = Math.sin(e) * t;
+    return this.x = i * Math.sin(s), this.y = Math.cos(e) * t, this.z = i * Math.cos(s), this;
   }
   setFromCylindrical(t) {
     return this.setFromCylindricalCoords(t.radius, t.theta, t.y);
@@ -832,8 +838,8 @@ class A {
     return this.x = e[12], this.y = e[13], this.z = e[14], this;
   }
   setFromMatrixScale(t) {
-    const e = this.setFromMatrixColumn(t, 0).length(), s = this.setFromMatrixColumn(t, 1).length(), n = this.setFromMatrixColumn(t, 2).length();
-    return this.x = e, this.y = s, this.z = n, this;
+    const e = this.setFromMatrixColumn(t, 0).length(), s = this.setFromMatrixColumn(t, 1).length(), i = this.setFromMatrixColumn(t, 2).length();
+    return this.x = e, this.y = s, this.z = i, this;
   }
   setFromMatrixColumn(t, e) {
     return this.fromArray(t.elements, e * 4);
@@ -870,323 +876,367 @@ class A {
     yield this.x, yield this.y, yield this.z;
   }
 }
-const P = /* @__PURE__ */ new A(), Z = /* @__PURE__ */ new Lt();
+const L = /* @__PURE__ */ new I(), W = /* @__PURE__ */ new Nt();
 typeof __THREE_DEVTOOLS__ < "u" && __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("register", { detail: {
-  revision: et
+  revision: it
 } }));
-typeof window < "u" && (window.__THREE__ ? console.warn("WARNING: Multiple instances of Three.js being imported.") : window.__THREE__ = et);
-const Vt = { class: "flex justify-between gap-4 items-center mb-2" }, Xt = { class: "text-gray-500 w-1/3" }, Nt = ["value", "min", "max", "step"], Rt = /* @__PURE__ */ C({
+typeof window < "u" && (window.__THREE__ ? console.warn("WARNING: Multiple instances of Three.js being imported.") : window.__THREE__ = it);
+const Rt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ft = { class: "text-gray-500 w-1/3" }, Yt = ["value", "min", "max", "step"], Ot = /* @__PURE__ */ C({
   __name: "NumberControl",
   props: {
     label: null,
     control: null
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
-    const e = i;
+  setup(n, { emit: t }) {
+    const e = n;
     function s(l) {
-      const { target: o } = l;
-      t("change", o.valueAsNumber);
+      const { target: a } = l;
+      t("change", a.valueAsNumber);
     }
-    const n = V(), r = w(0), a = w(!1), h = (l) => {
-      r.value = l.clientX, a.value = !0;
+    const i = N(), r = w(0), o = w(!1), h = (l) => {
+      r.value = l.clientX, o.value = !0;
     }, y = () => {
-      a.value = !1;
+      o.value = !1;
     }, u = (l) => Math.floor(Math.abs(l) / 10);
-    return E(n.x, (l) => {
-      if (a.value) {
-        const o = l - r.value, x = u(o);
-        o > 0 ? t("change", e.control.value + 1 + x) : o < 0 && t("change", e.control.value - 1 + x), e.control.min !== void 0 && e.control.value < e.control.min && t("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && t("change", e.control.max), r.value = l;
+    return E(i.x, (l) => {
+      if (o.value) {
+        const a = l - r.value, x = u(a);
+        a > 0 ? t("change", e.control.value + 1 + x) : a < 0 && t("change", e.control.value - 1 + x), e.control.min !== void 0 && e.control.value < e.control.min && t("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && t("change", e.control.max), r.value = l;
       }
-    }), (l, o) => (g(), b("div", Vt, [
-      d("label", Xt, $(i.label), 1),
+    }), (l, a) => (m(), b("div", Rt, [
+      d("label", Ft, $(n.label), 1),
       d("input", {
-        value: i.control.value,
-        class: q(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": a.value }]),
+        value: n.control.value,
+        class: T(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": o.value }]),
         type: "number",
-        min: i.control.min,
-        max: i.control.max,
-        step: i.control.step,
+        min: n.control.min,
+        max: n.control.max,
+        step: n.control.step,
         onInput: s,
         onMousedown: h,
         onMouseup: y
-      }, null, 42, Nt)
+      }, null, 42, Yt)
     ]));
   }
-}), Ft = { class: "flex justify-between gap-4 items-center mb-2 min-h-32px" }, Yt = { class: "text-gray-500 w-1/3" }, Ht = ["value"], Ot = /* @__PURE__ */ C({
+}), Ht = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Qt = { class: "text-gray-500 w-1/3" }, Zt = ["value"], Wt = /* @__PURE__ */ C({
   __name: "TextControl",
   props: {
     label: null,
     control: null
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
+  setup(n, { emit: t }) {
     function e(s) {
       t("change", s);
     }
-    return (s, n) => (g(), b("div", Ft, [
-      d("label", Yt, $(i.label), 1),
+    return (s, i) => (m(), b("div", Ht, [
+      d("label", Qt, $(n.label), 1),
       d("input", {
-        value: i.control.value,
+        value: n.control.value,
         type: "string",
         class: "p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",
         onChange: e
-      }, null, 40, Ht)
+      }, null, 40, Zt)
     ]));
   }
-}), Qt = { class: "flex justify-start gap-2 items-center mb-2 min-h-32px" }, Zt = { class: "text-gray-500 w-1/3" }, Wt = ["id", "checked"], Bt = ["for"], Ut = { class: "i-ic:baseline-check text-light" }, Kt = /* @__PURE__ */ C({
+}), Bt = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Ut = { class: "text-gray-500 w-1/3" }, Kt = ["id", "checked"], Gt = ["for"], Jt = { class: "i-ic:baseline-check text-light" }, te = /* @__PURE__ */ C({
   __name: "BooleanControl",
   props: {
     label: null,
     control: null
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
+  setup(n, { emit: t }) {
     function e(s) {
-      const { target: n } = s;
-      t("change", n.checked);
+      const { target: i } = s;
+      t("change", i.checked);
     }
-    return (s, n) => (g(), b("div", Qt, [
-      d("label", Zt, $(i.label), 1),
+    return (s, i) => (m(), b("div", Bt, [
+      d("label", Ut, $(n.label), 1),
       d("input", {
-        id: i.control.label,
-        checked: i.control.value,
+        id: n.control.label,
+        checked: n.control.value,
         class: "hidden",
         type: "checkbox",
         onInput: e
-      }, null, 40, Wt),
+      }, null, 40, Kt),
       d("label", {
-        for: i.control.label,
+        for: n.control.label,
         class: "inline-flex items-center cursor-pointer"
       }, [
         d("span", {
-          class: q([{ "bg-dark-500": i.control.value, "bg-gray-200": !i.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])
+          class: T([{ "bg-dark-500": n.control.value, "bg-gray-200": !n.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])
         }, [
-          ut(d("i", Ut, null, 512), [
-            [yt, i.control.value]
+          U(d("i", Jt, null, 512), [
+            [K, n.control.value]
           ])
         ], 2)
-      ], 8, Bt)
+      ], 8, Gt)
     ]));
   }
-}), Gt = { class: "relative flex justify-between gap-4 items-center mb-2" }, Jt = { class: "text-gray-500 w-1/3" }, te = ["value", "min", "max", "step"], ee = ["value", "min", "max", "step"], se = /* @__PURE__ */ C({
+}), ee = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, se = { class: "text-gray-500 w-1/3" }, ne = ["value", "min", "max", "step"], ie = ["value", "min", "max", "step"], re = /* @__PURE__ */ C({
   __name: "SliderControl",
   props: {
     label: null,
     control: null
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
-    const e = i;
-    function s(o) {
-      const { target: x } = o;
+  setup(n, { emit: t }) {
+    const e = n;
+    function s(a) {
+      const { target: x } = a;
       t("change", x.valueAsNumber);
     }
-    const n = v(() => ({
+    const i = S(() => ({
       backgroundImage: `linear-gradient(to right, #333 0% ${100 * (e.control.value - (e.control.min || 0)) / ((e.control.max || 100) - (e.control.min || 0))}%, #e2e2e2 0%)`
-    })), r = V(), a = w(0), h = w(!1), y = (o) => {
-      a.value = o.clientX, h.value = !0;
+    })), r = N(), o = w(0), h = w(!1), y = (a) => {
+      o.value = a.clientX, h.value = !0;
     }, u = () => {
       h.value = !1;
-    }, l = (o) => Math.floor(Math.abs(o) / 10);
-    return E(r.x, (o) => {
+    }, l = (a) => Math.floor(Math.abs(a) / 10);
+    return E(r.x, (a) => {
       if (h.value) {
-        const x = o - a.value, c = l(x);
-        x > 0 ? t("change", e.control.value + 1 + c) : x < 0 && t("change", e.control.value - 1 + c), e.control.min !== void 0 && e.control.value < e.control.min && t("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && t("change", e.control.max), a.value = o;
+        const x = a - o.value, c = l(x);
+        x > 0 ? t("change", e.control.value + 1 + c) : x < 0 && t("change", e.control.value - 1 + c), e.control.min !== void 0 && e.control.value < e.control.min && t("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && t("change", e.control.max), o.value = a;
       }
-    }), (o, x) => (g(), b("div", Gt, [
-      d("label", Jt, $(i.label), 1),
+    }), (a, x) => (m(), b("div", ee, [
+      d("label", se, $(n.label), 1),
       d("input", {
-        value: i.control.value,
+        value: n.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: xt(z(n)),
+        style: dt(z(i)),
         type: "range",
-        min: i.control.min,
-        max: i.control.max,
-        step: i.control.step,
+        min: n.control.min,
+        max: n.control.max,
+        step: n.control.step,
         onInput: s
-      }, null, 44, te),
+      }, null, 44, ne),
       d("input", {
-        value: i.control.value,
-        class: q(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": h.value }]),
+        value: n.control.value,
+        class: T(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": h.value }]),
         type: "number",
-        min: i.control.min,
-        max: i.control.max,
-        step: i.control.step,
+        min: n.control.min,
+        max: n.control.max,
+        step: n.control.step,
         onInput: s,
         onMousedown: y,
         onMouseup: u
-      }, null, 42, ee)
+      }, null, 42, ie)
     ]));
   }
 });
-const ie = (i, t) => {
-  const e = i.__vccOpts || i;
-  for (const [s, n] of t)
-    e[s] = n;
+const oe = (n, t) => {
+  const e = n.__vccOpts || n;
+  for (const [s, i] of t)
+    e[s] = i;
   return e;
-}, ne = /* @__PURE__ */ ie(se, [["__scopeId", "data-v-546d47fc"]]), re = { class: "flex justify-between gap-4 items-center mb-2" }, oe = { class: "text-gray-500 w-1/3" }, he = ["value"], ae = ["value"], le = /* @__PURE__ */ C({
+}, he = /* @__PURE__ */ oe(re, [["__scopeId", "data-v-da7e8146"]]), ae = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, le = { class: "text-gray-500 w-1/3" }, ce = ["value"], ue = ["value"], ye = /* @__PURE__ */ C({
   __name: "ColorControl",
   props: {
     label: null,
     control: null
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
+  setup(n, { emit: t }) {
     function e(s) {
-      const { target: n } = s;
-      t("change", n.value);
+      const { target: i } = s;
+      t("change", i.value);
     }
-    return (s, n) => (g(), b("div", re, [
-      d("label", oe, $(i.label), 1),
+    return (s, i) => (m(), b("div", ae, [
+      d("label", le, $(n.label), 1),
       d("input", {
-        value: i.control.value,
+        value: n.control.value,
         type: "color",
         onInput: e
-      }, null, 40, he),
+      }, null, 40, ce),
       d("input", {
-        value: i.control.value,
+        value: n.control.value,
         class: "p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",
         type: "text",
         onInput: e
-      }, null, 40, ae)
+      }, null, 40, ue)
     ]));
   }
 });
-function ce(i) {
-  return typeof i == "number" ? [i, i, i] : i instanceof A ? [i.x, i.y, i.z] : i;
+function xe(n) {
+  return typeof n == "number" ? [n, n, n] : n instanceof I ? [n.x, n.y, n.z] : n;
 }
-const ue = { class: "flex justify-between gap-2 items-center mb-2" }, ye = { class: "text-gray-500 w-1/3" }, xe = { class: "w-2/3 flex justify-between gap-1" }, _e = {
+const _e = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, de = { class: "text-gray-500 w-1/3" }, me = { class: "w-2/3 flex justify-between gap-1" }, ge = {
   key: 0,
   class: "font-bold px-0.5 py-1 text-0.65rem text-gray-300"
-}, de = ["value", "onInput", "onMousedown", "onMouseup"], me = /* @__PURE__ */ C({
+}, fe = ["value", "onInput", "onMousedown", "onMouseup"], pe = /* @__PURE__ */ C({
   __name: "VectorControl",
   props: {
     label: null,
     control: null
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
-    const e = i, s = V(), n = w(0), r = w(!1), a = w(0), h = (_, f) => {
-      a.value = f, n.value = _.clientX, r.value = !0;
+  setup(n, { emit: t }) {
+    const e = n, s = N(), i = w(0), r = w(!1), o = w(0), h = (_, f) => {
+      o.value = f, i.value = _.clientX, r.value = !0;
     }, y = (_, f) => {
-      a.value = f, r.value = !1;
-    }, u = (_) => Math.floor(Math.abs(_) / 10), l = v(() => ce(e.control.value)), o = v(() => Object.keys(e.control.value)), x = v(() => e.control.value instanceof D || e.control.value instanceof A);
+      o.value = f, r.value = !1;
+    }, u = (_) => Math.floor(Math.abs(_) / 10), l = S(() => xe(e.control.value)), a = S(() => Object.keys(e.control.value)), x = S(() => e.control.value instanceof j || e.control.value instanceof I);
     function c(_, f) {
-      const { value: p } = e.control, { target: m } = _;
-      a.value = f, p[x.value ? o.value[a.value] : a.value] = parseInt(m.value, 10), t("change", p);
+      const { value: p } = e.control, { target: g } = _;
+      o.value = f, p[x.value ? a.value[o.value] : o.value] = parseInt(g.value, 10), t("change", p);
     }
     return E(s.x, (_) => {
       if (r.value) {
-        const f = _ - n.value, p = u(f), { value: m } = e.control, M = x.value ? o.value[a.value] : a.value;
-        f > 0 ? m[M] += 1 + p : f < 0 && (m[M] -= 1 + p), e.control.min !== void 0 && m < e.control.min && (m[M] = e.control.min), e.control.max !== void 0 && m > e.control.max && (m[M] = e.control.max), t("change", m), n.value = _;
+        const f = _ - i.value, p = u(f), { value: g } = e.control, M = x.value ? a.value[o.value] : o.value;
+        f > 0 ? g[M] += 1 + p : f < 0 && (g[M] -= 1 + p), e.control.min !== void 0 && g < e.control.min && (g[M] = e.control.min), e.control.max !== void 0 && g > e.control.max && (g[M] = e.control.max), t("change", g), i.value = _;
       }
-    }), (_, f) => (g(), b("div", ue, [
-      d("label", ye, $(i.label), 1),
-      d("div", xe, [
-        (g(!0), b(L, null, B(z(l), (p, m) => (g(), b("div", {
-          key: i.label + m,
+    }), (_, f) => (m(), b("div", _e, [
+      d("label", de, $(n.label), 1),
+      d("div", me, [
+        (m(!0), b(D, null, X(z(l), (p, g) => (m(), b("div", {
+          key: n.label + g,
           class: "flex items-center w-1/3 bg-gray-100 rounded"
         }, [
-          z(o)[m] && z(x) ? (g(), b("span", _e, $(z(o)[m]), 1)) : U("", !0),
+          z(a)[g] && z(x) ? (m(), b("span", ge, $(z(a)[g]), 1)) : G("", !0),
           d("input", {
             type: "text",
-            class: q(["w-full pl-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": r.value }]),
-            value: z(l)[m].toFixed(2),
-            onInput: (M) => c(M, m),
-            onMousedown: (M) => h(M, m),
-            onMouseup: (M) => y(M, m)
-          }, null, 42, de)
+            class: T(["w-full pl-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": r.value }]),
+            value: z(l)[g].toFixed(2),
+            onInput: (M) => c(M, g),
+            onMousedown: (M) => h(M, g),
+            onMouseup: (M) => y(M, g)
+          }, null, 42, fe)
         ]))), 128))
       ])
     ]));
   }
-}), ge = /* @__PURE__ */ C({
+}), ze = { class: "bg-white rounded-b" }, Me = /* @__PURE__ */ C({
+  __name: "Folder",
+  props: {
+    control: null
+  },
+  setup(n) {
+    function t(i, r) {
+      r.value = i;
+    }
+    const e = w(!1), s = () => {
+      e.value = !e.value;
+    };
+    return (i, r) => (m(), b("div", null, [
+      d("button", {
+        class: "flex items-center justify-between w-full p-4 bg-gray-100 border-none text-gray-400 font-bold text-xs focus:outline-none font-sans cursor-pointer",
+        onClick: s
+      }, [
+        d("span", null, $(n.control.label), 1),
+        d("i", {
+          class: T(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+        }, null, 2)
+      ]),
+      mt(gt, {
+        name: "animate__animated",
+        "enter-active-class": "animate__fadeIn",
+        "leave-active-class": "animate__fadeOut"
+      }, {
+        default: J(() => [
+          U(d("div", ze, [
+            (m(!0), b(D, null, X(n.control.controls, (o) => (m(), v(rt, {
+              key: o.label,
+              control: o,
+              onChange: r[0] || (r[0] = (h) => t(h, n.control))
+            }, null, 8, ["control"]))), 128))
+          ], 512), [
+            [K, e.value]
+          ])
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), rt = /* @__PURE__ */ C({
   __name: "ControlInput",
   props: {
     control: null
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
-    const e = i, s = v(
+  setup(n, { emit: t }) {
+    const e = n, s = S(
       () => e.control.type === "number" && (e.control.step || e.control.max || e.control.min)
-    ), n = v(() => {
+    ), i = S(() => {
       const h = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
       return e.control.type === "color" || h.test(e.control.value);
-    }), r = v(
-      () => e.control.value instanceof Array || e.control.value instanceof D || e.control.value instanceof A
+    }), r = S(
+      () => e.control.value instanceof Array || e.control.value instanceof j || e.control.value instanceof I
     );
-    function a(h) {
+    function o(h) {
       t("change", h);
     }
-    return (h, y) => i.control.visible ? (g(), b(L, { key: 0 }, [
-      z(n) ? (g(), k(le, {
+    return (h, y) => n.control.visible ? (m(), b(D, { key: 0 }, [
+      z(i) ? (m(), v(ye, {
         key: 0,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : z(r) ? (g(), k(me, {
+        label: n.control.label,
+        control: n.control,
+        onChange: o
+      }, null, 8, ["label", "control"])) : z(r) ? (m(), v(pe, {
         key: 1,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : i.control.type === "boolean" ? (g(), k(Kt, {
+        label: n.control.label,
+        control: n.control,
+        onChange: o
+      }, null, 8, ["label", "control"])) : n.control.type === "boolean" ? (m(), v(te, {
         key: 2,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : z(s) ? z(s) ? (g(), k(ne, {
-        key: 4,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : (g(), k(Ot, {
-        key: 5,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : (g(), k(Rt, {
+        label: n.control.label,
+        control: n.control,
+        onChange: o
+      }, null, 8, ["label", "control"])) : n.control.type === "folder" ? (m(), v(Me, {
         key: 3,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
+        label: n.control.label,
+        control: n.control
+      }, null, 8, ["label", "control"])) : z(s) ? z(s) ? (m(), v(he, {
+        key: 5,
+        label: n.control.label,
+        control: n.control,
+        onChange: o
+      }, null, 8, ["label", "control"])) : (m(), v(Wt, {
+        key: 6,
+        label: n.control.label,
+        control: n.control,
+        onChange: o
+      }, null, 8, ["label", "control"])) : (m(), v(Ot, {
+        key: 4,
+        label: n.control.label,
+        control: n.control,
+        onChange: o
       }, null, 8, ["label", "control"]))
-    ], 64)) : U("", !0);
+    ], 64)) : G("", !0);
   }
-}), fe = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, pe = /* @__PURE__ */ d("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), ze = /* @__PURE__ */ d("div", null, [
+}), be = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, we = /* @__PURE__ */ d("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), ve = /* @__PURE__ */ d("div", null, [
   /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" }),
   /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" }),
   /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" })
-], -1), Me = /* @__PURE__ */ d("div", null, null, -1), we = [
-  pe,
-  ze,
-  Me
-], be = { class: "p-4" }, ke = /* @__PURE__ */ C({
+], -1), Ce = /* @__PURE__ */ d("div", null, null, -1), Se = [
+  we,
+  ve,
+  Ce
+], Ie = /* @__PURE__ */ C({
   __name: "TresLeches",
-  setup(i) {
-    const { width: t } = ft(), e = 280, s = w(null), n = jt();
-    function r(a, h) {
-      h.value = a;
+  setup(n) {
+    const { width: t } = Mt(), e = 280, s = w(null), i = Xt();
+    function r(o, h) {
+      h.value = o;
     }
-    return (a, h) => (g(), k(z(It), {
+    return (o, h) => (m(), v(z(Dt), {
       "initial-value": { x: z(t) - e - 20, y: 10 },
       class: "fixed select-none z-24 w-280px font-sans text-xs",
       handle: s.value
     }, {
-      default: _t(() => [
-        d("div", fe, [
+      default: J(() => [
+        d("div", be, [
           d("header", {
             ref_key: "handle",
             ref: s,
             class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
-          }, we, 512),
-          d("div", be, [
-            (g(!0), b(L, null, B(z(n).controls, (y) => (g(), k(ge, {
-              key: y.label,
-              control: y,
-              onChange: (u) => r(u, y)
-            }, null, 8, ["control", "onChange"]))), 128))
-          ])
+          }, Se, 512),
+          (m(!0), b(D, null, X(z(i).controls, (y) => (m(), v(rt, {
+            key: y.label,
+            control: y,
+            onChange: (u) => r(u, y)
+          }, null, 8, ["control", "onChange"]))), 128))
         ])
       ]),
       _: 1
@@ -1194,6 +1244,6 @@ const ue = { class: "flex justify-between gap-2 items-center mb-2" }, ye = { cla
   }
 });
 export {
-  ke as TresLeches,
-  Se as useControls
+  Ie as TresLeches,
+  Ee as useControls
 };