@tresjs/leches 0.2.0 → 0.3.1

package/dist/tresleches.js

@@ -1,65 +1,65 @@
 /**
  * name: @tresjs/leches
- * version: v0.2.0
+ * version: v0.3.1
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-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;
+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 E, reactive as tt, h as dt, watch as I, 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 Et } from "@vueuse/core";
+function rt(r) {
+  return ct() ? (yt(r), !0) : !1;
 }
-function A(n) {
-  return typeof n == "function" ? n() : z(n);
+function q(r) {
+  return typeof r == "function" ? r() : T(r);
 }
-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);
+const ot = typeof window < "u", ht = () => {
+}, Z = /* @__PURE__ */ It();
+function It() {
+  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 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 At(...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 vt(n) {
+function Tt(r) {
   var t;
-  const e = A(n);
+  const e = q(r);
   return (t = e == null ? void 0 : e.$el) != null ? t : e;
 }
-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;
+const jt = ot ? window : void 0;
+function qt(...r) {
+  let t, e, s, n;
+  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 = [], o = () => {
-    r.forEach((l) => l()), r.length = 0;
-  }, 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)))
+  const i = [], a = () => {
+    i.forEach((h) => h()), i.length = 0;
+  }, l = (h, o, _, u) => (h.addEventListener(o, _, u), () => h.removeEventListener(o, _, u)), y = I(
+    () => [Tt(t), q(n)],
+    ([h, o]) => {
+      a(), h && i.push(
+        ...e.flatMap((_) => s.map((u) => l(h, _, u, o)))
       );
     },
     { immediate: !0, flush: "post" }
-  ), u = () => {
-    y(), o();
+  ), c = () => {
+    y(), a();
   };
-  return tt(u), u;
+  return rt(c), c;
 }
-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) => {
+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 = {}))
-    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({
+    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",
@@ -71,137 +71,104 @@ const Dt = /* @__PURE__ */ C({
     "pointerTypes",
     "as",
     "handle",
-    "axis"
+    "axis",
+    "onStart",
+    "onMove",
+    "onEnd"
   ],
-  setup(n, { slots: t }) {
-    const e = w(), s = S(() => {
+  setup(r, { slots: t }) {
+    const e = g(), s = E(() => {
       var y;
-      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), {
+      return (y = r.handle) != null ? y : 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 }, a = (y, c) => {
+      var h;
+      (h = r.onEnd) == null || h.call(r, y, c), n && (n.value.x = y.x, n.value.y = y.y);
+    }, l = tt(St(e, Rt(Ft({}, r), {
       handle: s,
-      initialValue: r,
-      onEnd: o
+      initialValue: i,
+      onEnd: a
     })));
     return () => {
       if (t.default)
-        return ut(n.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 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)
+function at(r) {
+  const t = window.getComputedStyle(r);
+  if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && r.clientWidth < r.scrollWidth || t.overflowY === "auto" && r.clientHeight < r.scrollHeight)
     return !0;
   {
-    const e = n.parentNode;
-    return !e || e.tagName === "BODY" ? !1 : nt(e);
+    const e = r.parentNode;
+    return !e || e.tagName === "BODY" ? !1 : at(e);
   }
 }
-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 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 Pt(n, t = !1) {
-  const e = w(t);
-  let s = null, i;
-  E(wt(n), (h) => {
-    if (h) {
-      const y = h;
-      i = y.style.overflow, e.value && (y.style.overflow = "hidden");
+function Ht(r, t = !1) {
+  const e = g(t);
+  let s = null, n;
+  I(At(r), (l) => {
+    if (l) {
+      const y = l;
+      n = y.style.overflow, e.value && (y.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
-  const r = () => {
-    const h = A(n);
-    !h || e.value || (H && (s = St(
-      h,
+  const i = () => {
+    const l = q(r);
+    !l || e.value || (Z && (s = qt(
+      l,
       "touchmove",
       (y) => {
-        jt(y);
+        Nt(y);
       },
       { passive: !1 }
-    )), h.style.overflow = "hidden", e.value = !0);
-  }, o = () => {
-    const h = A(n);
-    !h || !e.value || (H && (s == null || s()), h.style.overflow = i, e.value = !1);
+    )), l.style.overflow = "hidden", e.value = !0);
+  }, a = () => {
+    const l = q(r);
+    !l || !e.value || (Z && (s == null || s()), l.style.overflow = n, e.value = !1);
   };
-  return tt(o), S({
+  return rt(a), E({
     get() {
       return e.value;
     },
-    set(h) {
-      h ? r() : o();
+    set(l) {
+      l ? i() : a();
     }
   });
 }
-function Lt() {
-  let n = !1;
-  const t = w(!1);
+function Qt() {
+  let r = !1;
+  const t = g(!1);
   return (e, s) => {
-    if (t.value = s.value, n)
+    if (t.value = s.value, r)
       return;
-    n = !0;
-    const i = Pt(e, s.value);
-    E(t, (r) => i.value = r);
+    r = !0;
+    const n = Ht(e, s.value);
+    I(t, (i) => n.value = i);
   };
 }
-Lt();
-const Vt = Symbol("CONTROLS_CONTEXT_KEY"), V = B({
-  controls: []
-});
-function Xt() {
-  return V;
-}
-function P(n) {
-  return Object.entries(n).map(([t, e]) => !O(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: O(e) ? typeof e.value : typeof e,
-    visible: !0
-  });
-}
-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;
-}
+Qt();
 /**
  * @license
  * Copyright 2010-2023 Three.js Authors
  * SPDX-License-Identifier: MIT
  */
-const it = "152";
-function R(n, t, e) {
-  return Math.max(t, Math.min(e, n));
+const lt = "153";
+function N(r, t, e) {
+  return Math.max(t, Math.min(e, r));
 }
-class j {
+class H {
   constructor(t = 0, e = 0) {
-    j.prototype.isVector2 = !0, this.x = t, this.y = e;
+    H.prototype.isVector2 = !0, this.x = t, this.y = e;
   }
   get width() {
     return this.x;
@@ -290,8 +257,8 @@ class j {
     return this.multiplyScalar(1 / t);
   }
   applyMatrix3(t) {
-    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;
+    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;
   }
   min(t) {
     return this.x = Math.min(this.x, t.x), this.y = Math.min(this.y, t.y), this;
@@ -350,7 +317,7 @@ class j {
     if (e === 0)
       return Math.PI / 2;
     const s = this.dot(t) / e;
-    return Math.acos(R(s, -1, 1));
+    return Math.acos(N(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -384,8 +351,8 @@ class j {
     return this.x = t.getX(e), this.y = t.getY(e), this;
   }
   rotateAround(t, e) {
-    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;
+    const s = Math.cos(e), n = Math.sin(e), i = this.x - t.x, a = this.y - t.y;
+    return this.x = i * s - a * n + t.x, this.y = i * n + a * s + t.y, this;
   }
   random() {
     return this.x = Math.random(), this.y = Math.random(), this;
@@ -394,39 +361,39 @@ class j {
     yield this.x, yield this.y;
   }
 }
-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, 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] = a;
+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, i, a, l) {
+    let y = s[n + 0], c = s[n + 1], h = s[n + 2], o = s[n + 3];
+    const _ = i[a + 0], u = i[a + 1], x = i[a + 2], m = i[a + 3];
+    if (l === 0) {
+      t[e + 0] = y, t[e + 1] = c, t[e + 2] = h, 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] = _, t[e + 1] = u, t[e + 2] = x, t[e + 3] = m;
       return;
     }
-    if (a !== f || y !== x || u !== c || l !== _) {
-      let p = 1 - h;
-      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;
+    if (o !== m || y !== _ || c !== u || h !== x) {
+      let z = 1 - l;
+      const f = y * _ + c * u + h * 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 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;
+      const P = l * M;
+      if (y = y * z + _ * P, c = c * z + u * P, h = h * z + x * P, o = o * z + m * P, z === 1 - l) {
+        const S = 1 / Math.sqrt(y * y + c * c + h * h + o * o);
+        y *= S, c *= S, h *= S, o *= S;
       }
     }
-    t[e] = y, t[e + 1] = u, t[e + 2] = l, t[e + 3] = a;
+    t[e] = y, t[e + 1] = c, t[e + 2] = h, t[e + 3] = o;
   }
-  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;
+  static multiplyQuaternionsFlat(t, e, s, n, i, a) {
+    const l = s[n], y = s[n + 1], c = s[n + 2], h = s[n + 3], o = i[a], _ = i[a + 1], u = i[a + 2], x = i[a + 3];
+    return t[e] = l * x + h * o + y * u - c * _, t[e + 1] = y * x + h * _ + c * o - l * u, t[e + 2] = c * x + h * u + l * _ - y * o, t[e + 3] = h * x - l * o - y * _ - c * u, t;
   }
   get x() {
     return this._x;
@@ -452,8 +419,8 @@ class Nt {
   set w(t) {
     this._w = t, this._onChangeCallback();
   }
-  set(t, e, s, i) {
-    return this._x = t, this._y = e, this._z = s, this._w = i, this._onChangeCallback(), this;
+  set(t, e, s, n) {
+    return this._x = t, this._y = e, this._z = s, this._w = n, this._onChangeCallback(), this;
   }
   clone() {
     return new this.constructor(this._x, this._y, this._z, this._w);
@@ -462,49 +429,49 @@ class Nt {
     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, 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) {
+    const s = t._x, n = t._y, i = t._z, a = t._order, l = Math.cos, y = Math.sin, c = l(s / 2), h = l(n / 2), o = l(i / 2), _ = y(s / 2), u = y(n / 2), x = y(i / 2);
+    switch (a) {
       case "XYZ":
-        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 * _;
+        this._x = _ * h * o + c * u * x, this._y = c * u * o - _ * h * x, this._z = c * h * x + _ * u * o, this._w = c * h * o - _ * u * x;
         break;
       case "YXZ":
-        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 * _;
+        this._x = _ * h * o + c * u * x, this._y = c * u * o - _ * h * x, this._z = c * h * x - _ * u * o, this._w = c * h * o + _ * u * x;
         break;
       case "ZXY":
-        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 * _;
+        this._x = _ * h * o - c * u * x, this._y = c * u * o + _ * h * x, this._z = c * h * x + _ * u * o, this._w = c * h * o - _ * u * x;
         break;
       case "ZYX":
-        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 * _;
+        this._x = _ * h * o - c * u * x, this._y = c * u * o + _ * h * x, this._z = c * h * x - _ * u * o, this._w = c * h * o + _ * u * x;
         break;
       case "YZX":
-        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 * _;
+        this._x = _ * h * o + c * u * x, this._y = c * u * o + _ * h * x, this._z = c * h * x - _ * u * o, this._w = c * h * o - _ * u * x;
         break;
       case "XZY":
-        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 * _;
+        this._x = _ * h * o - c * u * x, this._y = c * u * o - _ * h * x, this._z = c * h * x + _ * u * o, this._w = c * h * o + _ * u * x;
         break;
       default:
-        console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + o);
+        console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + a);
     }
     return e !== !1 && this._onChangeCallback(), this;
   }
   setFromAxisAngle(t, e) {
-    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;
+    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;
   }
   setFromRotationMatrix(t) {
-    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 = (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;
+    const e = t.elements, s = e[0], n = e[4], i = e[8], a = e[1], l = e[5], y = e[9], c = e[2], h = e[6], o = e[10], _ = s + l + o;
+    if (_ > 0) {
+      const u = 0.5 / Math.sqrt(_ + 1);
+      this._w = 0.25 / u, this._x = (h - y) * u, this._y = (i - c) * u, this._z = (a - n) * u;
+    } else if (s > l && s > o) {
+      const u = 2 * Math.sqrt(1 + s - l - o);
+      this._w = (h - y) / u, this._x = 0.25 * u, this._y = (n + a) / 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 + a) / u, this._y = 0.25 * u, this._z = (y + h) / u;
     } else {
-      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;
+      const u = 2 * Math.sqrt(1 + o - s - l);
+      this._w = (a - n) / u, this._x = (i + c) / u, this._y = (y + h) / u, this._z = 0.25 * u;
     }
     return this._onChangeCallback(), this;
   }
@@ -513,14 +480,14 @@ class Nt {
     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(R(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);
     if (s === 0)
       return this;
-    const i = Math.min(1, e / s);
-    return this.slerp(t, i), this;
+    const n = Math.min(1, e / s);
+    return this.slerp(t, n), this;
   }
   identity() {
     return this.set(0, 0, 0, 1);
@@ -551,36 +518,36 @@ class Nt {
     return this.multiplyQuaternions(t, this);
   }
   multiplyQuaternions(t, e) {
-    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;
+    const s = t._x, n = t._y, i = t._z, a = t._w, l = e._x, y = e._y, c = e._z, h = e._w;
+    return this._x = s * h + a * l + n * c - i * y, this._y = n * h + a * y + i * l - s * c, this._z = i * h + a * c + s * y - n * l, this._w = a * h - s * l - n * y - i * c, this._onChangeCallback(), this;
   }
   slerp(t, e) {
     if (e === 0)
       return this;
     if (e === 1)
       return this.copy(t);
-    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 = o, this._x = s, this._y = i, this._z = r, this;
-    const y = 1 - h * h;
+    const s = this._x, n = this._y, i = this._z, a = this._w;
+    let l = a * 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 = a, this._x = s, this._y = n, this._z = i, this;
+    const y = 1 - l * l;
     if (y <= Number.EPSILON) {
-      const c = 1 - e;
-      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 = 1 - e;
+      return this._w = u * a + 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), 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;
+    const c = Math.sqrt(y), h = Math.atan2(c, l), o = Math.sin((1 - e) * h) / c, _ = Math.sin(e * h) / c;
+    return this._w = a * o + this._w * _, this._x = s * o + this._x * _, this._y = n * o + this._y * _, this._z = i * o + this._z * _, 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), i = 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(i),
-      s * Math.sin(r),
-      s * Math.cos(r),
-      e * Math.sin(i)
+      e * Math.cos(n),
+      s * Math.sin(i),
+      s * Math.cos(i),
+      e * Math.sin(n)
     );
   }
   equals(t) {
@@ -607,9 +574,9 @@ class Nt {
     yield this._x, yield this._y, yield this._z, yield this._w;
   }
 }
-class I {
+class $ {
   constructor(t = 0, e = 0, s = 0) {
-    I.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;
@@ -691,25 +658,25 @@ class I {
     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(W.setFromEuler(t));
+    return this.applyQuaternion(K.setFromEuler(t));
   }
   applyAxisAngle(t, e) {
-    return this.applyQuaternion(W.setFromAxisAngle(t, e));
+    return this.applyQuaternion(K.setFromAxisAngle(t, e));
   }
   applyMatrix3(t) {
-    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;
+    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, 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;
+    const e = this.x, s = this.y, n = this.z, i = t.elements, a = 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]) * a, this.y = (i[1] * e + i[5] * s + i[9] * n + i[13]) * a, this.z = (i[2] * e + i[6] * s + i[10] * n + i[14]) * a, this;
   }
   applyQuaternion(t) {
-    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;
+    const e = this.x, s = this.y, n = this.z, i = t.x, a = t.y, l = t.z, y = t.w, c = y * e + a * n - l * s, h = y * s + l * e - i * n, o = y * n + i * s - a * e, _ = -i * e - a * s - l * n;
+    return this.x = c * y + _ * -i + h * -l - o * -a, this.y = h * y + _ * -a + o * -i - c * -l, this.z = o * y + _ * -l + c * -a - h * -i, this;
   }
   project(t) {
     return this.applyMatrix4(t.matrixWorldInverse).applyMatrix4(t.projectionMatrix);
@@ -718,8 +685,8 @@ class I {
     return this.applyMatrix4(t.projectionMatrixInverse).applyMatrix4(t.matrixWorld);
   }
   transformDirection(t) {
-    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();
+    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;
@@ -787,8 +754,8 @@ class I {
     return this.crossVectors(this, t);
   }
   crossVectors(t, e) {
-    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;
+    const s = t.x, n = t.y, i = t.z, a = e.x, l = e.y, y = e.z;
+    return this.x = n * y - i * l, this.y = i * a - s * y, this.z = s * l - n * a, this;
   }
   projectOnVector(t) {
     const e = t.lengthSq();
@@ -808,14 +775,14 @@ class I {
     if (e === 0)
       return Math.PI / 2;
     const s = this.dot(t) / e;
-    return Math.acos(R(s, -1, 1));
+    return Math.acos(N(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
   }
   distanceToSquared(t) {
-    const e = this.x - t.x, s = this.y - t.y, i = this.z - t.z;
-    return e * e + s * s + i * i;
+    const e = this.x - t.x, s = this.y - t.y, n = this.z - t.z;
+    return e * e + s * s + n * n;
   }
   manhattanDistanceTo(t) {
     return Math.abs(this.x - t.x) + Math.abs(this.y - t.y) + Math.abs(this.z - t.z);
@@ -824,8 +791,8 @@ class I {
     return this.setFromSphericalCoords(t.radius, t.phi, t.theta);
   }
   setFromSphericalCoords(t, e, s) {
-    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;
+    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;
   }
   setFromCylindrical(t) {
     return this.setFromCylindricalCoords(t.radius, t.theta, t.y);
@@ -838,8 +805,8 @@ class I {
     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(), i = this.setFromMatrixColumn(t, 2).length();
-    return this.x = e, this.y = s, this.z = i, this;
+    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;
   }
   setFromMatrixColumn(t, e) {
     return this.fromArray(t.elements, e * 4);
@@ -876,366 +843,460 @@ class I {
     yield this.x, yield this.y, yield this.z;
   }
 }
-const L = /* @__PURE__ */ new I(), W = /* @__PURE__ */ new Nt();
+const L = /* @__PURE__ */ new $(), K = /* @__PURE__ */ new Wt();
 typeof __THREE_DEVTOOLS__ < "u" && __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("register", { detail: {
-  revision: it
+  revision: lt
 } }));
-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({
+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(n, { emit: t }) {
-    const e = n;
-    function s(l) {
-      const { target: a } = l;
-      t("change", a.valueAsNumber);
+  setup(r, { emit: t }) {
+    const e = r;
+    function s(h) {
+      const { target: o } = h;
+      t("change", o.valueAsNumber);
     }
-    const i = N(), r = w(0), o = w(!1), h = (l) => {
-      r.value = l.clientX, o.value = !0;
+    const n = Y(), i = g(0), a = g(!1), l = (h) => {
+      i.value = h.clientX, a.value = !0;
     }, y = () => {
-      o.value = !1;
-    }, u = (l) => Math.floor(Math.abs(l) / 10);
-    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;
+      a.value = !1;
+    }, c = (h) => Math.floor(Math.abs(h) / 10);
+    return I(n.x, (h) => {
+      if (a.value) {
+        const o = h - i.value, _ = c(o);
+        o > 0 ? t("change", e.control.value + 1 + _) : o < 0 && t("change", e.control.value - 1 + _), 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 = h;
       }
-    }), (l, a) => (m(), b("div", Rt, [
-      d("label", Ft, $(n.label), 1),
-      d("input", {
-        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 }]),
+    }), (h, o) => (d(), b("div", Ut, [
+      p("label", Kt, C(h.label), 1),
+      p("input", {
+        value: h.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": a.value }]),
         type: "number",
-        min: n.control.min,
-        max: n.control.max,
-        step: n.control.step,
+        min: h.control.min,
+        max: h.control.max,
+        step: h.control.step,
         onInput: s,
-        onMousedown: h,
+        onMousedown: l,
         onMouseup: y
-      }, null, 42, Yt)
+      }, null, 42, Gt)
     ]));
   }
-}), 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({
+}), 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(n, { emit: t }) {
+  setup(r, { emit: t }) {
     function e(s) {
       t("change", s);
     }
-    return (s, i) => (m(), b("div", Ht, [
-      d("label", Qt, $(n.label), 1),
-      d("input", {
-        value: n.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, Zt)
+      }, null, 40, ee)
     ]));
   }
-}), 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({
+}), 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(n, { emit: t }) {
+  setup(r, { emit: t }) {
     function e(s) {
-      const { target: i } = s;
-      t("change", i.checked);
+      const { target: n } = s;
+      t("change", n.checked);
     }
-    return (s, i) => (m(), b("div", Bt, [
-      d("label", Ut, $(n.label), 1),
-      d("input", {
-        id: n.control.label,
-        checked: n.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, Kt),
-      d("label", {
-        for: n.control.label,
+      }, null, 40, re),
+      p("label", {
+        for: s.control.label,
         class: "inline-flex items-center cursor-pointer"
       }, [
-        d("span", {
-          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"])
+        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"])
         }, [
-          U(d("i", Jt, null, 512), [
-            [K, n.control.value]
+          et(p("i", he, null, 512), [
+            [st, s.control.value]
           ])
         ], 2)
-      ], 8, Gt)
+      ], 8, oe)
     ]));
   }
-}), 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({
+}), 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(n, { emit: t }) {
-    const e = n;
-    function s(a) {
-      const { target: x } = a;
-      t("change", x.valueAsNumber);
+  setup(r, { emit: t }) {
+    const e = r;
+    function s(o) {
+      const { target: _ } = o;
+      t("change", _.valueAsNumber);
     }
-    const i = S(() => ({
+    const n = E(() => ({
       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 = N(), o = w(0), h = w(!1), y = (a) => {
-      o.value = a.clientX, h.value = !0;
-    }, u = () => {
-      h.value = !1;
-    }, l = (a) => Math.floor(Math.abs(a) / 10);
-    return E(r.x, (a) => {
-      if (h.value) {
-        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;
+    })), i = Y(), a = g(0), l = g(!1), y = (o) => {
+      a.value = o.clientX, l.value = !0;
+    }, c = () => {
+      l.value = !1;
+    }, h = (o) => Math.floor(Math.abs(o) / 10);
+    return I(i.x, (o) => {
+      if (l.value) {
+        const _ = o - a.value, u = h(_);
+        _ > 0 ? t("change", e.control.value + 1 + u) : _ < 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), a.value = o;
       }
-    }), (a, x) => (m(), b("div", ee, [
-      d("label", se, $(n.label), 1),
-      d("input", {
-        value: n.control.value,
+    }), (o, _) => (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: dt(z(i)),
+        style: zt(n.value),
         type: "range",
-        min: n.control.min,
-        max: n.control.max,
-        step: n.control.step,
+        min: o.control.min,
+        max: o.control.max,
+        step: o.control.step,
         onInput: s
-      }, null, 44, ne),
-      d("input", {
-        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 }]),
+      }, 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: n.control.min,
-        max: n.control.max,
-        step: n.control.step,
+        min: o.control.min,
+        max: o.control.max,
+        step: o.control.step,
         onInput: s,
         onMousedown: y,
-        onMouseup: u
-      }, null, 42, ie)
+        onMouseup: c
+      }, null, 42, ce)
     ]));
   }
 });
-const oe = (n, t) => {
-  const e = n.__vccOpts || n;
-  for (const [s, i] of t)
-    e[s] = i;
+const _e = (r, t) => {
+  const e = r.__vccOpts || r;
+  for (const [s, n] of t)
+    e[s] = n;
   return e;
-}, 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({
+}, 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(n, { emit: t }) {
+  setup(r, { emit: t }) {
     function e(s) {
-      const { target: i } = s;
-      t("change", i.value);
+      const { target: n } = s;
+      t("change", n.value);
     }
-    return (s, i) => (m(), b("div", ae, [
-      d("label", le, $(n.label), 1),
-      d("input", {
-        value: n.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, ce),
-      d("input", {
-        value: n.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, ue)
+      }, null, 40, ge)
     ]));
   }
 });
-function xe(n) {
-  return typeof n == "number" ? [n, n, n] : n instanceof I ? [n.x, n.y, n.z] : n;
+function be(r) {
+  return typeof r == "number" ? [r, r, r] : r instanceof $ ? [r.x, r.y, r.z] : r;
 }
-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 = {
+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"
-}, fe = ["value", "onInput", "onMousedown", "onMouseup"], pe = /* @__PURE__ */ C({
+}, Ce = ["value", "onInput", "onMousedown", "onMouseup"], Se = /* @__PURE__ */ v({
   __name: "VectorControl",
   props: {
-    label: null,
-    control: null
+    label: {},
+    control: {}
   },
   emits: ["change"],
-  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) => {
-      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: g } = _;
-      o.value = f, p[x.value ? a.value[o.value] : o.value] = parseInt(g.value, 10), t("change", p);
+  setup(r, { emit: t }) {
+    const e = r, s = Y(), n = g(0), i = g(!1), a = g(0), l = (x, m) => {
+      a.value = m, n.value = x.clientX, i.value = !0;
+    }, y = (x, m) => {
+      a.value = m, i.value = !1;
+    }, c = (x) => Math.floor(Math.abs(x) / 10), h = E(() => be(e.control.value)), o = E(() => Object.keys(e.control.value)), _ = E(() => e.control.value instanceof H || e.control.value instanceof $);
+    function u(x, m) {
+      const { value: z } = e.control, { target: f } = x;
+      a.value = m, z[_.value ? o.value[a.value] : a.value] = parseInt(f.value, 10), t("change", z);
     }
-    return E(s.x, (_) => {
-      if (r.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 = _;
+    return I(s.x, (x) => {
+      if (i.value) {
+        const m = x - n.value, z = c(m), { value: f } = e.control, M = _.value ? o.value[a.value] : a.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) => (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,
+    }), (x, m) => (d(), b("div", ze, [
+      p("label", Me, C(x.label), 1),
+      p("div", we, [
+        (d(!0), b(D, null, R(h.value, (z, f) => (d(), b("div", {
+          key: x.label + f,
           class: "flex items-center w-1/3 bg-gray-100 rounded"
         }, [
-          z(a)[g] && z(x) ? (m(), b("span", ge, $(z(a)[g]), 1)) : G("", !0),
-          d("input", {
+          o.value[f] && _.value ? (d(), b("span", ve, C(o.value[f]), 1)) : nt("", !0),
+          p("input", {
             type: "text",
-            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)
+            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: h.value[f].toFixed(2),
+            onInput: (M) => u(M, f),
+            onMousedown: (M) => l(M, f),
+            onMouseup: (M) => y(M, f)
+          }, null, 42, Ce)
         ]))), 128))
       ])
     ]));
   }
-}), ze = { class: "bg-white rounded-b" }, Me = /* @__PURE__ */ C({
+}), ke = { class: "mb-4" }, $e = { class: "bg-white rounded-b pt-4" }, Ee = /* @__PURE__ */ v({
   __name: "Folder",
   props: {
-    control: null
+    control: {}
   },
-  setup(n) {
-    function t(i, r) {
-      r.value = i;
+  setup(r) {
+    function t(n, i) {
+      i.value = n;
     }
-    const e = w(!1), s = () => {
+    const e = g(!1), s = () => {
       e.value = !e.value;
     };
-    return (i, r) => (m(), b("div", null, [
-      d("button", {
+    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
       }, [
-        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")
+        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(gt, {
-        name: "animate__animated",
-        "enter-active-class": "animate__fadeIn",
-        "leave-active-class": "animate__fadeOut"
+      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: 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))
+        default: it(() => [
+          et(p("div", $e, [
+            (d(!0), b(D, null, R(n.control.controls, (a) => (d(), w(ut, {
+              key: a.label,
+              control: a,
+              onChange: (l) => t(l, a)
+            }, null, 8, ["control", "onChange"]))), 128))
           ], 512), [
-            [K, e.value]
+            [st, e.value]
           ])
         ]),
         _: 1
       })
     ]));
   }
-}), rt = /* @__PURE__ */ C({
+}), Ie = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ae = { 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, A = 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 / A);
+    let i = performance.now();
+    return $t(({ timestamp: a }) => {
+      a - i >= J && (i = a, s.value.push(t.value), s.value.length > n.value && s.value.shift(), e.value = s.value.map(
+        (l, y) => `${y * A},${F + O - A / 2 - l * (F + O - A) / 120}`
+      ).join(" "));
+    }), (a, l) => (d(), b("div", Ie, [
+      p("label", Ae, C(a.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": A,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, 8, qe)
+        ]))
+      ])
+    ]));
+  }
+}), ut = /* @__PURE__ */ v({
   __name: "ControlInput",
   props: {
-    control: null
+    control: {}
   },
   emits: ["change"],
-  setup(n, { emit: t }) {
-    const e = n, s = S(
-      () => e.control.type === "number" && (e.control.step || e.control.max || e.control.min)
-    ), 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 = S(
-      () => e.control.value instanceof Array || e.control.value instanceof j || e.control.value instanceof I
-    );
-    function o(h) {
-      t("change", h);
+  setup(r, { emit: t }) {
+    function e(s) {
+      t("change", s);
     }
-    return (h, y) => n.control.visible ? (m(), b(D, { key: 0 }, [
-      z(i) ? (m(), v(ye, {
+    return (s, n) => s.control.visible ? (d(), b(D, { key: 0 }, [
+      s.control.type === "color" ? (d(), w(me, {
         key: 0,
-        label: n.control.label,
-        control: n.control,
-        onChange: o
-      }, null, 8, ["label", "control"])) : z(r) ? (m(), v(pe, {
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : s.control.type === "vector" ? (d(), w(Se, {
         key: 1,
-        label: n.control.label,
-        control: n.control,
-        onChange: o
-      }, null, 8, ["label", "control"])) : n.control.type === "boolean" ? (m(), v(te, {
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : s.control.type === "boolean" ? (d(), w(ae, {
         key: 2,
-        label: n.control.label,
-        control: n.control,
-        onChange: o
-      }, null, 8, ["label", "control"])) : n.control.type === "folder" ? (m(), v(Me, {
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : s.control.type === "fpsgraph" ? (d(), w(Pe, {
         key: 3,
-        label: n.control.label,
-        control: n.control
-      }, null, 8, ["label", "control"])) : z(s) ? z(s) ? (m(), v(he, {
+        label: s.control.label,
+        control: s.control
+      }, null, 8, ["label", "control"])) : s.control.type === "folder" ? (d(), w(Ee, {
+        key: 4,
+        label: s.control.label,
+        control: s.control
+      }, null, 8, ["label", "control"])) : s.control.type === "number" ? (d(), w(Jt, {
         key: 5,
-        label: n.control.label,
-        control: n.control,
-        onChange: o
-      }, null, 8, ["label", "control"])) : (m(), v(Wt, {
+        label: s.control.label,
+        control: s.control,
+        onChange: e
+      }, null, 8, ["label", "control"])) : s.control.type === "range" ? (d(), w(xe, {
         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
+        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)) : G("", !0);
-  }
-}), 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), Ce = /* @__PURE__ */ d("div", null, null, -1), Se = [
-  we,
-  ve,
-  Ce
-], Ie = /* @__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(n) {
-    const { width: t } = Mt(), e = 280, s = w(null), i = Xt();
-    function r(o, h) {
-      h.value = o;
+  setup(r) {
+    const { width: t } = Et(), e = g(null), s = Zt();
+    function n(i, a) {
+      a.ref && (a.ref[a.label] = i), a.value = i;
     }
-    return (o, h) => (m(), v(z(Dt), {
-      "initial-value": { x: z(t) - e - 20, y: 10 },
+    return (i, a) => (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: J(() => [
-        d("div", be, [
-          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"
-          }, 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)
+          }, Fe, 512),
+          (d(!0), b(D, null, R(T(s).controls, (l) => (d(), w(ut, {
+            key: l.label,
+            control: l,
+            onChange: (y) => n(y, l)
           }, null, 8, ["control", "onChange"]))), 128))
         ])
       ]),
@@ -1244,6 +1305,6 @@ const _e = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, de =
   }
 });
 export {
-  Ie as TresLeches,
-  Ee as useControls
+  Qe as TresLeches,
+  He as useControls
 };