@tresjs/leches 0.1.0 → 0.3.0

package/dist/tresleches.js

@@ -1,65 +1,65 @@
 /**
  * name: @tresjs/leches
- * version: v0.1.0
+ * version: v0.3.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 T, getCurrentScope as ct, onScopeDispose as yt, toRef as _t, readonly as xt, customRef as pt, ref as g, defineComponent as v, computed as I, reactive as tt, h as dt, watch as A, isReactive as ft, toRefs as gt, onUnmounted as mt, isRef as V, openBlock as d, createElementBlock as b, createElementVNode as p, toDisplayString as C, normalizeClass as k, withDirectives as et, vShow as st, createTextVNode as bt, normalizeStyle as zt, Fragment as D, renderList as R, createCommentVNode as nt, createVNode as Mt, Transition as wt, withCtx as it, createBlock as w } from "vue";
+import { useStorage as vt, isClient as Ct, useDraggable as St, useMouse as Y, useFps as kt, useRafFn as $t, useWindowSize as It } from "@vueuse/core";
+function rt(r) {
+  return ct() ? (yt(r), !0) : !1;
 }
-function I(i) {
-  return typeof i == "function" ? i() : z(i);
+function q(r) {
+  return typeof r == "function" ? r() : T(r);
 }
-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 ot = typeof window < "u", ht = () => {
+}, Z = /* @__PURE__ */ At();
+function At() {
+  var r;
+  return ot && ((r = window == null ? void 0 : window.navigator) == null ? void 0 : r.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 Et(...r) {
+  if (r.length !== 1)
+    return _t(...r);
+  const t = r[0];
+  return typeof t == "function" ? xt(pt(() => ({ get: t, set: ht }))) : g(t);
 }
-function Mt(i) {
+function Tt(r) {
   var t;
-  const e = I(i);
+  const e = q(r);
   return (t = e == null ? void 0 : e.$el) != null ? t : e;
 }
-const wt = G ? window : void 0;
-function bt(...i) {
+const jt = ot ? window : void 0;
+function qt(...r) {
   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;
+  if (typeof r[0] == "string" || Array.isArray(r[0]) ? ([e, s, n] = r, t = jt) : [t, e, s, n] = r, !t)
+    return ht;
   Array.isArray(e) || (e = [e]), Array.isArray(s) || (s = [s]);
-  const r = [], a = () => {
-    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)))
+  const i = [], h = () => {
+    i.forEach((a) => a()), i.length = 0;
+  }, l = (a, o, y, u) => (a.addEventListener(o, y, u), () => a.removeEventListener(o, y, u)), _ = A(
+    () => [Tt(t), q(n)],
+    ([a, o]) => {
+      h(), a && i.push(
+        ...e.flatMap((y) => s.map((u) => l(a, y, u, o)))
       );
     },
     { immediate: !0, flush: "post" }
-  ), u = () => {
-    y(), a();
+  ), c = () => {
+    _(), h();
   };
-  return K(u), u;
+  return rt(c), c;
 }
-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 Pt = Object.defineProperty, Dt = Object.defineProperties, Vt = Object.getOwnPropertyDescriptors, B = Object.getOwnPropertySymbols, Lt = Object.prototype.hasOwnProperty, Xt = Object.prototype.propertyIsEnumerable, U = (r, t, e) => t in r ? Pt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, Ft = (r, 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({
+    Lt.call(t, e) && U(r, e, t[e]);
+  if (B)
+    for (var e of B(t))
+      Xt.call(t, e) && U(r, e, t[e]);
+  return r;
+}, Rt = (r, t) => Dt(r, Vt(t));
+const Yt = /* @__PURE__ */ v({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -73,129 +73,98 @@ const It = /* @__PURE__ */ C({
     "handle",
     "axis"
   ],
-  setup(i, { slots: t }) {
-    const e = w(), s = v(() => {
-      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), {
+  setup(r, { slots: t }) {
+    const e = g(), s = I(() => {
+      var _;
+      return (_ = r.handle) != null ? _ : e.value;
+    }), n = r.storageKey && vt(
+      r.storageKey,
+      q(r.initialValue) || { x: 0, y: 0 },
+      Ct ? r.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), i = n || r.initialValue || { x: 0, y: 0 }, h = (_) => {
+      n && (n.value.x = _.x, n.value.y = _.y);
+    }, l = tt(St(e, Rt(Ft({}, r), {
       handle: s,
-      initialValue: r,
-      onEnd: a
+      initialValue: i,
+      onEnd: h
     })));
     return () => {
       if (t.default)
-        return ht(i.as || "div", { ref: e, style: `touch-action:none;${h.style}` }, t.default(h));
+        return dt(r.as || "div", { ref: e, style: `touch-action:none;${l.style}` }, t.default(l));
     };
   }
 });
-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 at(r) {
+  const t = window.getComputedStyle(r);
+  if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && r.clientHeight < r.scrollHeight || t.overflowY === "auto" && r.clientWidth < r.scrollWidth)
     return !0;
   {
-    const e = i.parentNode;
-    return !e || e.tagName === "BODY" ? !1 : tt(e);
+    const e = r.parentNode;
+    return !e || e.tagName === "BODY" ? !1 : at(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 Nt(r) {
+  const t = r || window.event, e = t.target;
+  return at(e) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }
-function qt(i, t = !1) {
-  const e = w(t);
+function Ht(r, t = !1) {
+  const e = g(t);
   let s = null, n;
-  E(zt(i), (h) => {
-    if (h) {
-      const y = h;
-      n = y.style.overflow, e.value && (y.style.overflow = "hidden");
+  A(Et(r), (l) => {
+    if (l) {
+      const _ = l;
+      n = _.style.overflow, e.value && (_.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
-  const r = () => {
-    const h = I(i);
-    !h || e.value || (Y && (s = bt(
-      h,
+  const i = () => {
+    const l = q(r);
+    !l || e.value || (Z && (s = qt(
+      l,
       "touchmove",
-      (y) => {
-        Tt(y);
+      (_) => {
+        Nt(_);
       },
       { 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);
+    )), l.style.overflow = "hidden", e.value = !0);
+  }, h = () => {
+    const l = q(r);
+    !l || !e.value || (Z && (s == null || s()), l.style.overflow = n, e.value = !1);
   };
-  return K(a), v({
+  return rt(h), I({
     get() {
       return e.value;
     },
-    set(h) {
-      h ? r() : a();
+    set(l) {
+      l ? i() : h();
     }
   });
 }
-function Dt() {
-  let i = !1;
-  const t = w(!1);
+function Qt() {
+  let r = !1;
+  const t = g(!1);
   return (e, s) => {
-    if (t.value = s.value, i)
+    if (t.value = s.value, r)
       return;
-    i = !0;
-    const n = qt(e, s.value);
-    E(t, (r) => n.value = r);
+    r = !0;
+    const n = Ht(e, s.value);
+    A(t, (i) => n.value = i);
   };
 }
-Dt();
-const Pt = Symbol("CONTROLS_CONTEXT_KEY"), j = W({
-  controls: []
-});
-function jt() {
-  return j;
-}
-function Q(i) {
-  return Object.entries(i).map(([t, e]) => !F(e) && e.value ? {
-    ...e,
-    label: e.label || t,
-    value: e.value,
-    type: typeof e.value.value,
-    visible: !0
-  } : {
-    label: e.label || t,
-    value: e,
-    type: F(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;
-}
+Qt();
 /**
  * @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 lt = "152";
+function N(r, t, e) {
+  return Math.max(t, Math.min(e, r));
 }
-class D {
+class H {
   constructor(t = 0, e = 0) {
-    D.prototype.isVector2 = !0, this.x = t, this.y = e;
+    H.prototype.isVector2 = !0, this.x = t, this.y = e;
   }
   get width() {
     return this.x;
@@ -344,7 +313,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(N(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -378,8 +347,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), n = Math.sin(e), i = this.x - t.x, h = this.y - t.y;
+    return this.x = i * s - h * n + t.x, this.y = i * n + h * s + t.y, this;
   }
   random() {
     return this.x = Math.random(), this.y = Math.random(), this;
@@ -388,39 +357,39 @@ class D {
     yield this.x, yield this.y;
   }
 }
-class Lt {
+class Wt {
   constructor(t = 0, e = 0, s = 0, n = 1) {
     this.isQuaternion = !0, this._x = t, this._y = e, this._z = s, this._w = n;
   }
-  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];
-    if (h === 0) {
-      t[e + 0] = y, t[e + 1] = u, t[e + 2] = l, t[e + 3] = o;
+  static slerpFlat(t, e, s, n, i, h, l) {
+    let _ = s[n + 0], c = s[n + 1], a = s[n + 2], o = s[n + 3];
+    const y = i[h + 0], u = i[h + 1], x = i[h + 2], m = i[h + 3];
+    if (l === 0) {
+      t[e + 0] = _, t[e + 1] = c, t[e + 2] = a, t[e + 3] = o;
       return;
     }
-    if (h === 1) {
-      t[e + 0] = x, t[e + 1] = c, t[e + 2] = _, t[e + 3] = f;
+    if (l === 1) {
+      t[e + 0] = y, t[e + 1] = u, t[e + 2] = x, t[e + 3] = m;
       return;
     }
-    if (o !== 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;
+    if (o !== m || _ !== y || c !== u || a !== x) {
+      let z = 1 - l;
+      const f = _ * y + c * u + a * x + o * m, M = f >= 0 ? 1 : -1, Q = 1 - f * f;
+      if (Q > Number.EPSILON) {
+        const S = Math.sqrt(Q), W = Math.atan2(S, f * M);
+        z = Math.sin(z * W) / S, l = Math.sin(l * W) / S;
       }
-      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 P = l * M;
+      if (_ = _ * z + y * P, c = c * z + u * P, a = a * z + x * P, o = o * z + m * P, z === 1 - l) {
+        const S = 1 / Math.sqrt(_ * _ + c * c + a * a + o * o);
+        _ *= S, c *= S, a *= S, o *= S;
       }
     }
-    t[e] = y, t[e + 1] = u, t[e + 2] = l, t[e + 3] = o;
+    t[e] = _, t[e + 1] = c, t[e + 2] = a, t[e + 3] = o;
   }
-  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, n, i, h) {
+    const l = s[n], _ = s[n + 1], c = s[n + 2], a = s[n + 3], o = i[h], y = i[h + 1], u = i[h + 2], x = i[h + 3];
+    return t[e] = l * x + a * o + _ * u - c * y, t[e + 1] = _ * x + a * y + c * o - l * u, t[e + 2] = c * x + a * u + l * y - _ * o, t[e + 3] = a * x - l * o - _ * y - c * u, t;
   }
   get x() {
     return this._x;
@@ -456,28 +425,28 @@ 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, n = t._y, i = t._z, h = t._order, l = Math.cos, _ = Math.sin, c = l(s / 2), a = l(n / 2), o = l(i / 2), y = _(s / 2), u = _(n / 2), x = _(i / 2);
+    switch (h) {
       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 = y * a * o + c * u * x, this._y = c * u * o - y * a * x, this._z = c * a * x + y * u * o, this._w = c * a * o - y * u * x;
         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 = y * a * o + c * u * x, this._y = c * u * o - y * a * x, this._z = c * a * x - y * u * o, this._w = c * a * o + y * u * x;
         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 = y * a * o - c * u * x, this._y = c * u * o + y * a * x, this._z = c * a * x + y * u * o, this._w = c * a * o - y * u * x;
         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 = y * a * o - c * u * x, this._y = c * u * o + y * a * x, this._z = c * a * x - y * u * o, this._w = c * a * o + y * u * x;
         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 = y * a * o + c * u * x, this._y = c * u * o + y * a * x, this._z = c * a * x - y * u * o, this._w = c * a * o - y * u * x;
         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 = y * a * o - c * u * x, this._y = c * u * o - y * a * x, this._z = c * a * x + y * u * o, this._w = c * a * o + y * u * x;
         break;
       default:
-        console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + a);
+        console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + h);
     }
     return e !== !1 && this._onChangeCallback(), this;
   }
@@ -486,19 +455,19 @@ class Lt {
     return this._x = t.x * n, this._y = t.y * n, this._z = t.z * n, 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;
-    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;
+    const e = t.elements, s = e[0], n = e[4], i = e[8], h = e[1], l = e[5], _ = e[9], c = e[2], a = e[6], o = e[10], y = s + l + o;
+    if (y > 0) {
+      const u = 0.5 / Math.sqrt(y + 1);
+      this._w = 0.25 / u, this._x = (a - _) * u, this._y = (i - c) * u, this._z = (h - n) * u;
+    } else if (s > l && s > o) {
+      const u = 2 * Math.sqrt(1 + s - l - o);
+      this._w = (a - _) / u, this._x = 0.25 * u, this._y = (n + h) / u, this._z = (i + c) / u;
+    } else if (l > o) {
+      const u = 2 * Math.sqrt(1 + l - s - o);
+      this._w = (i - c) / u, this._x = (n + h) / u, this._y = 0.25 * u, this._z = (_ + a) / u;
     } 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 u = 2 * Math.sqrt(1 + o - s - l);
+      this._w = (h - n) / u, this._x = (i + c) / u, this._y = (_ + a) / u, this._z = 0.25 * u;
     }
     return this._onChangeCallback(), this;
   }
@@ -507,7 +476,7 @@ 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(N(this.dot(t), -1, 1)));
   }
   rotateTowards(t, e) {
     const s = this.angleTo(t);
@@ -545,35 +514,35 @@ 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, n = t._y, i = t._z, h = t._w, l = e._x, _ = e._y, c = e._z, a = e._w;
+    return this._x = s * a + h * l + n * c - i * _, this._y = n * a + h * _ + i * l - s * c, this._z = i * a + h * c + s * _ - n * l, this._w = h * a - s * l - n * _ - i * c, 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;
-    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;
-    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;
+    const s = this._x, n = this._y, i = this._z, h = this._w;
+    let l = h * t._w + s * t._x + n * t._y + i * t._z;
+    if (l < 0 ? (this._w = -t._w, this._x = -t._x, this._y = -t._y, this._z = -t._z, l = -l) : this.copy(t), l >= 1)
+      return this._w = h, this._x = s, this._y = n, this._z = i, this;
+    const _ = 1 - l * l;
+    if (_ <= Number.EPSILON) {
+      const u = 1 - e;
+      return this._w = u * h + e * this._w, this._x = u * s + e * this._x, this._y = u * n + e * this._y, this._z = u * i + 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 c = Math.sqrt(_), a = Math.atan2(c, l), o = Math.sin((1 - e) * a) / c, y = Math.sin(e * a) / c;
+    return this._w = h * o + this._w * y, this._x = s * o + this._x * y, this._y = n * o + this._y * y, this._z = i * o + this._z * y, 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), n = 2 * Math.PI * Math.random(), i = 2 * Math.PI * Math.random();
     return this.set(
       e * Math.cos(n),
-      s * Math.sin(r),
-      s * Math.cos(r),
+      s * Math.sin(i),
+      s * Math.cos(i),
       e * Math.sin(n)
     );
   }
@@ -601,9 +570,9 @@ class Lt {
     yield this._x, yield this._y, yield this._z, yield this._w;
   }
 }
-class A {
+class $ {
   constructor(t = 0, e = 0, s = 0) {
-    A.prototype.isVector3 = !0, this.x = t, this.y = e, this.z = s;
+    $.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 +654,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(K.setFromEuler(t));
   }
   applyAxisAngle(t, e) {
-    return this.applyQuaternion(Z.setFromAxisAngle(t, e));
+    return this.applyQuaternion(K.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, n = this.z, i = t.elements;
+    return this.x = i[0] * e + i[3] * s + i[6] * n, this.y = i[1] * e + i[4] * s + i[7] * n, this.z = i[2] * e + i[5] * s + i[8] * n, 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, n = this.z, i = t.elements, h = 1 / (i[3] * e + i[7] * s + i[11] * n + i[15]);
+    return this.x = (i[0] * e + i[4] * s + i[8] * n + i[12]) * h, this.y = (i[1] * e + i[5] * s + i[9] * n + i[13]) * h, this.z = (i[2] * e + i[6] * s + i[10] * n + i[14]) * h, 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, n = this.z, i = t.x, h = t.y, l = t.z, _ = t.w, c = _ * e + h * n - l * s, a = _ * s + l * e - i * n, o = _ * n + i * s - h * e, y = -i * e - h * s - l * n;
+    return this.x = c * _ + y * -i + a * -l - o * -h, this.y = a * _ + y * -h + o * -i - c * -l, this.z = o * _ + y * -l + c * -h - a * -i, this;
   }
   project(t) {
     return this.applyMatrix4(t.matrixWorldInverse).applyMatrix4(t.projectionMatrix);
@@ -712,8 +681,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, n = this.z, i = t.elements;
+    return this.x = i[0] * e + i[4] * s + i[8] * n, this.y = i[1] * e + i[5] * s + i[9] * n, this.z = i[2] * e + i[6] * s + i[10] * n, this.normalize();
   }
   divide(t) {
     return this.x /= t.x, this.y /= t.y, this.z /= t.z, this;
@@ -781,8 +750,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, n = t.y, i = t.z, h = e.x, l = e.y, _ = e.z;
+    return this.x = n * _ - i * l, this.y = i * h - s * _, this.z = s * l - n * h, this;
   }
   projectOnVector(t) {
     const e = t.lengthSq();
@@ -792,17 +761,17 @@ 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(N(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -870,323 +839,461 @@ class A {
     yield this.x, yield this.y, yield this.z;
   }
 }
-const P = /* @__PURE__ */ new A(), Z = /* @__PURE__ */ new Lt();
+const L = /* @__PURE__ */ new $(), K = /* @__PURE__ */ new Wt();
 typeof __THREE_DEVTOOLS__ < "u" && __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("register", { detail: {
-  revision: et
+  revision: lt
 } }));
-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__ = lt);
+const j = tt({
+  controls: []
+});
+function Zt() {
+  return j;
+}
+function X(r) {
+  return Object.entries(r).map(([t, e]) => {
+    let s = "string", n;
+    const i = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return !V(e) && e.value || V(e) ? (s = typeof e.value, n = e.value) : (s = typeof e, n = e), s === "number" && (e.step || e.max || e.min) && (s = "range"), s === "string" && i.test(n) && (s = "color"), (n instanceof $ || n instanceof $ || n instanceof Array) && (s = "vector"), !V(e) && e.value ? {
+      ...e,
+      label: e.label || t,
+      value: e.value,
+      type: s,
+      visible: !0
+    } : {
+      label: e.label || t,
+      value: e,
+      type: s,
+      visible: !0
+    };
+  });
+}
+function Bt() {
+  j.controls = [];
+}
+function He(r, t, e) {
+  let s = [];
+  if (typeof r == "string")
+    r === "fpsgraph" ? s.push({
+      label: "fpsgraph",
+      visible: !0,
+      type: "fpsgraph"
+    }) : s.push({
+      label: r,
+      visible: !0,
+      type: "folder",
+      controls: X(t)
+    });
+  else if (typeof r == "object" && typeof t == "string")
+    s.push({
+      ...e,
+      label: t,
+      visible: !0,
+      value: r[t],
+      type: typeof r[t],
+      ref: r
+    });
+  else if (ft(r)) {
+    const n = gt(r);
+    s = X(n);
+  } else
+    s = X(r);
+  return j.controls = [...j.controls, ...s], mt(Bt), { state: j, controls: s };
+}
+const Ut = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Kt = { class: "text-gray-500 w-1/3" }, Gt = ["value", "min", "max", "step"], Jt = /* @__PURE__ */ v({
   __name: "NumberControl",
   props: {
-    label: null,
-    control: null
+    label: {},
+    control: {}
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
-    const e = i;
-    function s(l) {
-      const { target: o } = l;
+  setup(r, { emit: t }) {
+    const e = r;
+    function s(a) {
+      const { target: o } = a;
       t("change", o.valueAsNumber);
     }
-    const n = V(), r = w(0), a = w(!1), h = (l) => {
-      r.value = l.clientX, a.value = !0;
-    }, y = () => {
-      a.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;
+    const n = Y(), i = g(0), h = g(!1), l = (a) => {
+      i.value = a.clientX, h.value = !0;
+    }, _ = () => {
+      h.value = !1;
+    }, c = (a) => Math.floor(Math.abs(a) / 10);
+    return A(n.x, (a) => {
+      if (h.value) {
+        const o = a - i.value, y = c(o);
+        o > 0 ? t("change", e.control.value + 1 + y) : o < 0 && t("change", e.control.value - 1 + y), 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), i.value = a;
       }
-    }), (l, o) => (g(), b("div", Vt, [
-      d("label", Xt, $(i.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 }]),
+    }), (a, o) => (d(), b("div", Ut, [
+      p("label", Kt, C(a.label), 1),
+      p("input", {
+        value: a.control.value,
+        class: k(["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": h.value }]),
         type: "number",
-        min: i.control.min,
-        max: i.control.max,
-        step: i.control.step,
+        min: a.control.min,
+        max: a.control.max,
+        step: a.control.step,
         onInput: s,
-        onMousedown: h,
-        onMouseup: y
-      }, null, 42, Nt)
+        onMousedown: l,
+        onMouseup: _
+      }, null, 42, Gt)
     ]));
   }
-}), 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({
+}), Ot = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, te = { class: "text-gray-500 w-1/3" }, ee = ["value"], se = /* @__PURE__ */ v({
   __name: "TextControl",
   props: {
-    label: null,
-    control: null
+    label: {},
+    control: {}
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
+  setup(r, { emit: t }) {
     function e(s) {
       t("change", s);
     }
-    return (s, n) => (g(), b("div", Ft, [
-      d("label", Yt, $(i.label), 1),
-      d("input", {
-        value: i.control.value,
+    return (s, n) => (d(), b("div", Ot, [
+      p("label", te, C(s.label), 1),
+      p("input", {
+        value: s.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, ee)
     ]));
   }
-}), 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({
+}), ne = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, ie = { class: "text-gray-500 w-1/3" }, re = ["id", "checked"], oe = ["for"], he = { class: "i-ic:baseline-check text-light" }, ae = /* @__PURE__ */ v({
   __name: "BooleanControl",
   props: {
-    label: null,
-    control: null
+    label: {},
+    control: {}
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
+  setup(r, { emit: t }) {
     function e(s) {
       const { target: n } = s;
       t("change", n.checked);
     }
-    return (s, n) => (g(), b("div", Qt, [
-      d("label", Zt, $(i.label), 1),
-      d("input", {
-        id: i.control.label,
-        checked: i.control.value,
+    return (s, n) => (d(), b("div", ne, [
+      p("label", ie, C(s.label), 1),
+      p("input", {
+        id: s.control.label,
+        checked: s.control.value,
         class: "hidden",
         type: "checkbox",
         onInput: e
-      }, null, 40, Wt),
-      d("label", {
-        for: i.control.label,
+      }, null, 40, re),
+      p("label", {
+        for: s.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"])
+        p("span", {
+          class: k([{ "bg-dark-500": s.control.value, "bg-gray-200": !s.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]
+          et(p("i", he, null, 512), [
+            [st, s.control.value]
           ])
         ], 2)
-      ], 8, Bt)
+      ], 8, oe)
     ]));
   }
-}), 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({
+}), le = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, ue = ["value", "min", "max", "step"], ce = ["value", "min", "max", "step"], ye = /* @__PURE__ */ v({
   __name: "SliderControl",
   props: {
-    label: null,
-    control: null
+    label: {},
+    control: {}
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
-    const e = i;
+  setup(r, { emit: t }) {
+    const e = r;
     function s(o) {
-      const { target: x } = o;
-      t("change", x.valueAsNumber);
+      const { target: y } = o;
+      t("change", y.valueAsNumber);
     }
-    const n = v(() => ({
+    const n = I(() => ({
       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;
-    }, u = () => {
-      h.value = !1;
-    }, l = (o) => Math.floor(Math.abs(o) / 10);
-    return E(r.x, (o) => {
-      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;
+    })), i = Y(), h = g(0), l = g(!1), _ = (o) => {
+      h.value = o.clientX, l.value = !0;
+    }, c = () => {
+      l.value = !1;
+    }, a = (o) => Math.floor(Math.abs(o) / 10);
+    return A(i.x, (o) => {
+      if (l.value) {
+        const y = o - h.value, u = a(y);
+        y > 0 ? t("change", e.control.value + 1 + u) : y < 0 && t("change", e.control.value - 1 + u), 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), h.value = o;
       }
-    }), (o, x) => (g(), b("div", Gt, [
-      d("label", Jt, $(i.label), 1),
-      d("input", {
-        value: i.control.value,
+    }), (o, y) => (d(), b("div", le, [
+      p("label", {
+        class: k(["text-gray-500 w-1/3", { "flex justify-between items-center": o.control.icon }])
+      }, [
+        bt(C(o.label) + " ", 1),
+        p("i", {
+          class: k(`i-${o.control.icon}`)
+        }, null, 2)
+      ], 2),
+      p("input", {
+        value: o.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: xt(z(n)),
+        style: zt(n.value),
         type: "range",
-        min: i.control.min,
-        max: i.control.max,
-        step: i.control.step,
+        min: o.control.min,
+        max: o.control.max,
+        step: o.control.step,
         onInput: s
-      }, null, 44, te),
-      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 }]),
+      }, null, 44, ue),
+      p("input", {
+        value: o.control.value,
+        class: k(["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": l.value }]),
         type: "number",
-        min: i.control.min,
-        max: i.control.max,
-        step: i.control.step,
+        min: o.control.min,
+        max: o.control.max,
+        step: o.control.step,
         onInput: s,
-        onMousedown: y,
-        onMouseup: u
-      }, null, 42, ee)
+        onMousedown: _,
+        onMouseup: c
+      }, null, 42, ce)
     ]));
   }
 });
-const ie = (i, t) => {
-  const e = i.__vccOpts || i;
+const _e = (r, t) => {
+  const e = r.__vccOpts || r;
   for (const [s, n] of t)
     e[s] = n;
   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({
+}, xe = /* @__PURE__ */ _e(ye, [["__scopeId", "data-v-743fd350"]]), pe = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, de = { class: "text-gray-500 w-1/3" }, fe = ["value"], ge = ["value"], me = /* @__PURE__ */ v({
   __name: "ColorControl",
   props: {
-    label: null,
-    control: null
+    label: {},
+    control: {}
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
+  setup(r, { emit: t }) {
     function e(s) {
       const { target: n } = s;
       t("change", n.value);
     }
-    return (s, n) => (g(), b("div", re, [
-      d("label", oe, $(i.label), 1),
-      d("input", {
-        value: i.control.value,
+    return (s, n) => (d(), b("div", pe, [
+      p("label", de, C(s.label), 1),
+      p("input", {
+        value: s.control.value,
         type: "color",
         onInput: e
-      }, null, 40, he),
-      d("input", {
-        value: i.control.value,
+      }, null, 40, fe),
+      p("input", {
+        value: s.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, ge)
     ]));
   }
 });
-function ce(i) {
-  return typeof i == "number" ? [i, i, i] : i instanceof A ? [i.x, i.y, i.z] : i;
+function be(r) {
+  return typeof r == "number" ? [r, r, r] : r instanceof $ ? [r.x, r.y, r.z] : r;
 }
-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 ze = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, Me = { class: "text-gray-500 w-1/3" }, we = { class: "w-2/3 flex justify-between gap-1" }, ve = {
   key: 0,
   class: "font-bold px-0.5 py-1 text-0.65rem text-gray-300"
-}, de = ["value", "onInput", "onMousedown", "onMouseup"], me = /* @__PURE__ */ C({
+}, Ce = ["value", "onInput", "onMousedown", "onMouseup"], Se = /* @__PURE__ */ v({
   __name: "VectorControl",
   props: {
-    label: null,
-    control: null
+    label: {},
+    control: {}
   },
   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;
-    }, 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);
-    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);
+  setup(r, { emit: t }) {
+    const e = r, s = Y(), n = g(0), i = g(!1), h = g(0), l = (x, m) => {
+      h.value = m, n.value = x.clientX, i.value = !0;
+    }, _ = (x, m) => {
+      h.value = m, i.value = !1;
+    }, c = (x) => Math.floor(Math.abs(x) / 10), a = I(() => be(e.control.value)), o = I(() => Object.keys(e.control.value)), y = I(() => e.control.value instanceof H || e.control.value instanceof $);
+    function u(x, m) {
+      const { value: z } = e.control, { target: f } = x;
+      h.value = m, z[y.value ? o.value[h.value] : h.value] = parseInt(f.value, 10), t("change", z);
     }
-    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 = _;
+    return A(s.x, (x) => {
+      if (i.value) {
+        const m = x - n.value, z = c(m), { value: f } = e.control, M = y.value ? o.value[h.value] : h.value;
+        m > 0 ? f[M] += 1 + z : m < 0 && (f[M] -= 1 + z), e.control.min !== void 0 && f < e.control.min && (f[M] = e.control.min), e.control.max !== void 0 && f > e.control.max && (f[M] = e.control.max), t("change", f), n.value = x;
       }
-    }), (_, 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,
+    }), (x, m) => (d(), b("div", ze, [
+      p("label", Me, C(x.label), 1),
+      p("div", we, [
+        (d(!0), b(D, null, R(a.value, (z, f) => (d(), b("div", {
+          key: x.label + f,
           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),
-          d("input", {
+          o.value[f] && y.value ? (d(), b("span", ve, C(o.value[f]), 1)) : nt("", !0),
+          p("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: k(["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": i.value }]),
+            value: a.value[f].toFixed(2),
+            onInput: (M) => u(M, f),
+            onMousedown: (M) => l(M, f),
+            onMouseup: (M) => _(M, f)
+          }, null, 42, Ce)
         ]))), 128))
       ])
     ]));
   }
-}), ge = /* @__PURE__ */ C({
+}), ke = { class: "mb-4" }, $e = { class: "bg-white rounded-b pt-4" }, Ie = /* @__PURE__ */ v({
+  __name: "Folder",
+  props: {
+    control: {}
+  },
+  setup(r) {
+    function t(n, i) {
+      i.value = n;
+    }
+    const e = g(!1), s = () => {
+      e.value = !e.value;
+    };
+    return (n, i) => (d(), b("div", ke, [
+      p("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
+      }, [
+        p("span", null, C(n.control.label), 1),
+        p("i", {
+          class: k(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+        }, null, 2)
+      ]),
+      Mt(wt, {
+        name: "slide",
+        "enter-active-class": " animate-fade-in animate-duration-200 animate-ease-in-out",
+        "leave-active-class": " animate-fade-out animate-duration-200 animate-ease-in-out"
+      }, {
+        default: it(() => [
+          et(p("div", $e, [
+            (d(!0), b(D, null, R(n.control.controls, (h) => (d(), w(ut, {
+              key: h.label,
+              control: h,
+              onChange: (l) => t(l, h)
+            }, null, 8, ["control", "onChange"]))), 128))
+          ], 512), [
+            [st, e.value]
+          ])
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), Ae = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ee = { class: "text-gray-500 w-1/3" }, Te = { class: "relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans" }, je = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, qe = ["points"], G = 160, F = 40, E = 2, J = 100, O = 20, Pe = /* @__PURE__ */ v({
+  __name: "FPSGraph",
+  props: {
+    label: {},
+    control: {}
+  },
+  setup(r) {
+    const t = kt({ every: J }), e = g(""), s = g([]), n = g(G / E);
+    let i = performance.now();
+    return $t(({ timestamp: h }) => {
+      h - i >= J && (i = h, s.value.push(t.value), s.value.length > n.value && s.value.shift(), e.value = s.value.map(
+        (l, _) => `${_ * E},${F + O - E / 2 - l * (F + O - E) / 120}`
+      ).join(" "));
+    }), (h, l) => (d(), b("div", Ae, [
+      p("label", Ee, C(h.label), 1),
+      p("div", Te, [
+        p("div", je, C(Math.round(T(t))) + " FPS", 1),
+        (d(), b("svg", {
+          width: G,
+          height: F,
+          xmlns: "http://www.w3.org/2000/svg",
+          class: "bg-gray-100"
+        }, [
+          p("polyline", {
+            points: e.value,
+            fill: "none",
+            stroke: "lightgray",
+            "stroke-width": E,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, 8, qe)
+        ]))
+      ])
+    ]));
+  }
+}), ut = /* @__PURE__ */ v({
   __name: "ControlInput",
   props: {
-    control: null
+    control: {}
   },
   emits: ["change"],
-  setup(i, { emit: t }) {
-    const e = i, s = v(
-      () => e.control.type === "number" && (e.control.step || e.control.max || e.control.min)
-    ), n = v(() => {
-      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
-    );
-    function a(h) {
-      t("change", h);
+  setup(r, { emit: t }) {
+    function e(s) {
+      t("change", s);
     }
-    return (h, y) => i.control.visible ? (g(), b(L, { key: 0 }, [
-      z(n) ? (g(), k(le, {
+    return (s, n) => s.control.visible ? (d(), b(D, { key: 0 }, [
+      s.control.type === "color" ? (d(), w(me, {
         key: 0,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : z(r) ? (g(), k(me, {
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : s.control.type === "vector" ? (d(), w(Se, {
         key: 1,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : i.control.type === "boolean" ? (g(), k(Kt, {
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : s.control.type === "boolean" ? (d(), w(ae, {
         key: 2,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : z(s) ? z(s) ? (g(), k(ne, {
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : s.control.type === "fpsgraph" ? (d(), w(Pe, {
+        key: 3,
+        label: s.control.label,
+        control: s.control
+      }, null, 8, ["label", "control"])) : s.control.type === "folder" ? (d(), w(Ie, {
         key: 4,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : (g(), k(Ot, {
+        label: s.control.label,
+        control: s.control
+      }, null, 8, ["label", "control"])) : s.control.type === "number" ? (d(), w(Jt, {
         key: 5,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
-      }, null, 8, ["label", "control"])) : (g(), k(Rt, {
-        key: 3,
-        label: i.control.label,
-        control: i.control,
-        onChange: a
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : s.control.type === "range" ? (d(), w(xe, {
+        key: 6,
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : (d(), w(se, {
+        key: 7,
+        label: s.control.label,
+        control: s.control,
+        onChange: e
       }, null, 8, ["label", "control"]))
-    ], 64)) : U("", !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, [
-  /* @__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({
+    ], 64)) : nt("", !0);
+  }
+}), De = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, Ve = /* @__PURE__ */ p("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), Le = /* @__PURE__ */ p("div", null, [
+  /* @__PURE__ */ p("i", { class: "i-ic-baseline-drag-indicator" }),
+  /* @__PURE__ */ p("i", { class: "i-ic-baseline-drag-indicator" }),
+  /* @__PURE__ */ p("i", { class: "i-ic-baseline-drag-indicator" })
+], -1), Xe = /* @__PURE__ */ p("div", null, null, -1), Fe = [
+  Ve,
+  Le,
+  Xe
+], Re = 280, Qe = /* @__PURE__ */ v({
   __name: "TresLeches",
-  setup(i) {
-    const { width: t } = ft(), e = 280, s = w(null), n = jt();
-    function r(a, h) {
-      h.value = a;
+  setup(r) {
+    const { width: t } = It(), e = g(null), s = Zt();
+    function n(i, h) {
+      h.ref && (h.ref[h.label] = i), h.value = i;
     }
-    return (a, h) => (g(), k(z(It), {
-      "initial-value": { x: z(t) - e - 20, y: 10 },
+    return (i, h) => (d(), w(T(Yt), {
+      "initial-value": { x: T(t) - Re - 20, y: 10 },
       class: "fixed select-none z-24 w-280px font-sans text-xs",
-      handle: s.value
+      handle: e.value
     }, {
-      default: _t(() => [
-        d("div", fe, [
-          d("header", {
+      default: it(() => [
+        p("div", De, [
+          p("header", {
             ref_key: "handle",
-            ref: s,
+            ref: e,
             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))
-          ])
+          }, Fe, 512),
+          (d(!0), b(D, null, R(T(s).controls, (l) => (d(), w(ut, {
+            key: l.label,
+            control: l,
+            onChange: (_) => n(_, l)
+          }, null, 8, ["control", "onChange"]))), 128))
         ])
       ]),
       _: 1
@@ -1194,6 +1301,6 @@ const ue = { class: "flex justify-between gap-2 items-center mb-2" }, ye = { cla
   }
 });
 export {
-  ke as TresLeches,
-  Se as useControls
+  Qe as TresLeches,
+  He as useControls
 };