@tresjs/leches 0.3.1 → 0.5.0

package/dist/tresleches.js

@@ -1,65 +1,65 @@
 /**
  * name: @tresjs/leches
- * version: v0.3.1
+ * version: v0.5.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-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;
+import { unref as j, getCurrentScope as ct, onScopeDispose as yt, toRef as _t, readonly as xt, customRef as pt, ref as m, defineComponent as S, computed as T, reactive as tt, h as dt, watch as I, provide as ft, isReactive as gt, toRefs as mt, onUnmounted as bt, isRef as V, openBlock as d, createElementBlock as g, createElementVNode as p, toDisplayString as C, normalizeClass as $, withDirectives as et, vShow as st, createTextVNode as zt, normalizeStyle as wt, Fragment as P, renderList as L, createCommentVNode as nt, createVNode as Mt, Transition as vt, withCtx as it, createBlock as v } from "vue";
+import { useStorage as Ct, isClient as St, useDraggable as kt, useMouse as H, useFps as $t, useRafFn as Et, useWindowSize as Tt } from "@vueuse/core";
+function ot(o) {
+  return ct() ? (yt(o), !0) : !1;
 }
-function q(r) {
-  return typeof r == "function" ? r() : T(r);
+function q(o) {
+  return typeof o == "function" ? o() : j(o);
 }
-const ot = typeof window < "u", ht = () => {
-}, Z = /* @__PURE__ */ It();
+const rt = typeof window < "u", at = () => {
+}, U = /* @__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);
+  var o;
+  return rt && ((o = window == null ? void 0 : window.navigator) == null ? void 0 : o.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
 }
-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 At(...o) {
+  if (o.length !== 1)
+    return _t(...o);
+  const t = o[0];
+  return typeof t == "function" ? xt(pt(() => ({ get: t, set: at }))) : m(t);
 }
-function Tt(r) {
+function jt(o) {
   var t;
-  const e = q(r);
+  const e = q(o);
   return (t = e == null ? void 0 : e.$el) != null ? t : e;
 }
-const jt = ot ? window : void 0;
-function qt(...r) {
+const qt = rt ? window : void 0;
+function Pt(...o) {
   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;
+  if (typeof o[0] == "string" || Array.isArray(o[0]) ? ([e, s, n] = o, t = qt) : [t, e, s, n] = o, !t)
+    return at;
   Array.isArray(e) || (e = [e]), Array.isArray(s) || (s = [s]);
   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]) => {
+  }, l = (h, r, _, u) => (h.addEventListener(r, _, u), () => h.removeEventListener(r, _, u)), y = I(
+    () => [jt(t), q(n)],
+    ([h, r]) => {
       a(), h && i.push(
-        ...e.flatMap((_) => s.map((u) => l(h, _, u, o)))
+        ...e.flatMap((_) => s.map((u) => l(h, _, u, r)))
       );
     },
     { immediate: !0, flush: "post" }
   ), c = () => {
     y(), a();
   };
-  return rt(c), c;
+  return ot(c), c;
 }
-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) => {
+var Dt = Object.defineProperty, Lt = Object.defineProperties, Vt = Object.getOwnPropertyDescriptors, F = Object.getOwnPropertySymbols, Xt = Object.prototype.hasOwnProperty, Rt = Object.prototype.propertyIsEnumerable, K = (o, t, e) => t in o ? Dt(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, Yt = (o, t) => {
   for (var e in t || (t = {}))
-    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({
+    Xt.call(t, e) && K(o, e, t[e]);
+  if (F)
+    for (var e of F(t))
+      Rt.call(t, e) && K(o, e, t[e]);
+  return o;
+}, Ht = (o, t) => Lt(o, Vt(t));
+const Qt = /* @__PURE__ */ S({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -76,45 +76,45 @@ const Yt = /* @__PURE__ */ v({
     "onMove",
     "onEnd"
   ],
-  setup(r, { slots: t }) {
-    const e = g(), s = E(() => {
+  setup(o, { slots: t }) {
+    const e = m(), s = T(() => {
       var y;
-      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) => {
+      return (y = o.handle) != null ? y : e.value;
+    }), n = o.storageKey && Ct(
+      o.storageKey,
+      q(o.initialValue) || { x: 0, y: 0 },
+      St ? o.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), i = n || o.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), {
+      (h = o.onEnd) == null || h.call(o, y, c), n && (n.value.x = y.x, n.value.y = y.y);
+    }, l = tt(kt(e, Ht(Yt({}, o), {
       handle: s,
       initialValue: i,
       onEnd: a
     })));
     return () => {
       if (t.default)
-        return dt(r.as || "div", { ref: e, style: `touch-action:none;${l.style}` }, t.default(l));
+        return dt(o.as || "div", { ref: e, style: `touch-action:none;${l.style}` }, t.default(l));
     };
   }
 });
-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)
+function ht(o) {
+  const t = window.getComputedStyle(o);
+  if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && o.clientWidth < o.scrollWidth || t.overflowY === "auto" && o.clientHeight < o.scrollHeight)
     return !0;
   {
-    const e = r.parentNode;
-    return !e || e.tagName === "BODY" ? !1 : at(e);
+    const e = o.parentNode;
+    return !e || e.tagName === "BODY" ? !1 : ht(e);
   }
 }
-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 Wt(o) {
+  const t = o || window.event, e = t.target;
+  return ht(e) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }
-function Ht(r, t = !1) {
-  const e = g(t);
+function Zt(o, t = !1) {
+  const e = m(t);
   let s = null, n;
-  I(At(r), (l) => {
+  I(At(o), (l) => {
     if (l) {
       const y = l;
       n = y.style.overflow, e.value && (y.style.overflow = "hidden");
@@ -123,20 +123,20 @@ function Ht(r, t = !1) {
     immediate: !0
   });
   const i = () => {
-    const l = q(r);
-    !l || e.value || (Z && (s = qt(
+    const l = q(o);
+    !l || e.value || (U && (s = Pt(
       l,
       "touchmove",
       (y) => {
-        Nt(y);
+        Wt(y);
       },
       { passive: !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);
+    const l = q(o);
+    !l || !e.value || (U && (s == null || s()), l.style.overflow = n, e.value = !1);
   };
-  return rt(a), E({
+  return ot(a), T({
     get() {
       return e.value;
     },
@@ -145,30 +145,30 @@ function Ht(r, t = !1) {
     }
   });
 }
-function Qt() {
-  let r = !1;
-  const t = g(!1);
+function Bt() {
+  let o = !1;
+  const t = m(!1);
   return (e, s) => {
-    if (t.value = s.value, r)
+    if (t.value = s.value, o)
       return;
-    r = !0;
-    const n = Ht(e, s.value);
+    o = !0;
+    const n = Zt(e, s.value);
     I(t, (i) => n.value = i);
   };
 }
-Qt();
+Bt();
 /**
  * @license
  * Copyright 2010-2023 Three.js Authors
  * SPDX-License-Identifier: MIT
  */
-const lt = "153";
-function N(r, t, e) {
-  return Math.max(t, Math.min(e, r));
+const lt = "155";
+function Q(o, t, e) {
+  return Math.max(t, Math.min(e, o));
 }
-class H {
+class W {
   constructor(t = 0, e = 0) {
-    H.prototype.isVector2 = !0, this.x = t, this.y = e;
+    W.prototype.isVector2 = !0, this.x = t, this.y = e;
   }
   get width() {
     return this.x;
@@ -317,7 +317,7 @@ class H {
     if (e === 0)
       return Math.PI / 2;
     const s = this.dot(t) / e;
-    return Math.acos(N(s, -1, 1));
+    return Math.acos(Q(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -361,39 +361,39 @@ class H {
     yield this.x, yield this.y;
   }
 }
-class Wt {
+class Ut {
   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];
+    let y = s[n + 0], c = s[n + 1], h = s[n + 2], r = s[n + 3];
+    const _ = i[a + 0], u = i[a + 1], x = i[a + 2], b = i[a + 3];
     if (l === 0) {
-      t[e + 0] = y, t[e + 1] = c, t[e + 2] = h, t[e + 3] = o;
+      t[e + 0] = y, t[e + 1] = c, t[e + 2] = h, t[e + 3] = r;
       return;
     }
     if (l === 1) {
-      t[e + 0] = _, t[e + 1] = u, t[e + 2] = x, t[e + 3] = m;
+      t[e + 0] = _, t[e + 1] = u, t[e + 2] = x, t[e + 3] = b;
       return;
     }
-    if (o !== m || y !== _ || c !== u || h !== x) {
+    if (r !== b || 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 f = y * _ + c * u + h * x + r * b, M = f >= 0 ? 1 : -1, Z = 1 - f * f;
+      if (Z > Number.EPSILON) {
+        const k = Math.sqrt(Z), B = Math.atan2(k, f * M);
+        z = Math.sin(z * B) / k, l = Math.sin(l * B) / 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;
+      const D = l * M;
+      if (y = y * z + _ * D, c = c * z + u * D, h = h * z + x * D, r = r * z + b * D, z === 1 - l) {
+        const k = 1 / Math.sqrt(y * y + c * c + h * h + r * r);
+        y *= k, c *= k, h *= k, r *= k;
       }
     }
-    t[e] = y, t[e + 1] = c, t[e + 2] = h, t[e + 3] = o;
+    t[e] = y, t[e + 1] = c, t[e + 2] = h, t[e + 3] = r;
   }
   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;
+    const l = s[n], y = s[n + 1], c = s[n + 2], h = s[n + 3], r = i[a], _ = i[a + 1], u = i[a + 2], x = i[a + 3];
+    return t[e] = l * x + h * r + y * u - c * _, t[e + 1] = y * x + h * _ + c * r - l * u, t[e + 2] = c * x + h * u + l * _ - y * r, t[e + 3] = h * x - l * r - y * _ - c * u, t;
   }
   get x() {
     return this._x;
@@ -429,25 +429,25 @@ class Wt {
     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, 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);
+    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), r = l(i / 2), _ = y(s / 2), u = y(n / 2), x = y(i / 2);
     switch (a) {
       case "XYZ":
-        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;
+        this._x = _ * h * r + c * u * x, this._y = c * u * r - _ * h * x, this._z = c * h * x + _ * u * r, this._w = c * h * r - _ * u * x;
         break;
       case "YXZ":
-        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;
+        this._x = _ * h * r + c * u * x, this._y = c * u * r - _ * h * x, this._z = c * h * x - _ * u * r, this._w = c * h * r + _ * u * x;
         break;
       case "ZXY":
-        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;
+        this._x = _ * h * r - c * u * x, this._y = c * u * r + _ * h * x, this._z = c * h * x + _ * u * r, this._w = c * h * r - _ * u * x;
         break;
       case "ZYX":
-        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;
+        this._x = _ * h * r - c * u * x, this._y = c * u * r + _ * h * x, this._z = c * h * x - _ * u * r, this._w = c * h * r + _ * u * x;
         break;
       case "YZX":
-        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;
+        this._x = _ * h * r + c * u * x, this._y = c * u * r + _ * h * x, this._z = c * h * x - _ * u * r, this._w = c * h * r - _ * u * x;
         break;
       case "XZY":
-        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;
+        this._x = _ * h * r - c * u * x, this._y = c * u * r - _ * h * x, this._z = c * h * x + _ * u * r, this._w = c * h * r + _ * u * x;
         break;
       default:
         console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + a);
@@ -459,18 +459,18 @@ class Wt {
     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], i = e[8], a = e[1], l = e[5], y = e[9], c = e[2], h = e[6], o = e[10], _ = s + l + o;
+    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], r = e[10], _ = s + l + r;
     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);
+    } else if (s > l && s > r) {
+      const u = 2 * Math.sqrt(1 + s - l - r);
       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);
+    } else if (l > r) {
+      const u = 2 * Math.sqrt(1 + l - s - r);
       this._w = (i - c) / u, this._x = (n + a) / u, this._y = 0.25 * u, this._z = (y + h) / u;
     } else {
-      const u = 2 * Math.sqrt(1 + o - s - l);
+      const u = 2 * Math.sqrt(1 + r - 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;
@@ -480,7 +480,7 @@ class Wt {
     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(N(this.dot(t), -1, 1)));
+    return 2 * Math.acos(Math.abs(Q(this.dot(t), -1, 1)));
   }
   rotateTowards(t, e) {
     const s = this.angleTo(t);
@@ -535,8 +535,8 @@ class Wt {
       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 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;
+    const c = Math.sqrt(y), h = Math.atan2(c, l), r = Math.sin((1 - e) * h) / c, _ = Math.sin(e * h) / c;
+    return this._w = a * r + this._w * _, this._x = s * r + this._x * _, this._y = n * r + this._y * _, this._z = i * r + this._z * _, this._onChangeCallback(), this;
   }
   slerpQuaternions(t, e, s) {
     return this.copy(t).slerp(e, s);
@@ -574,9 +574,9 @@ class Wt {
     yield this._x, yield this._y, yield this._z, yield this._w;
   }
 }
-class $ {
+class E {
   constructor(t = 0, e = 0, s = 0) {
-    $.prototype.isVector3 = !0, this.x = t, this.y = e, this.z = s;
+    E.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;
@@ -658,10 +658,10 @@ class $ {
     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(K.setFromEuler(t));
+    return this.applyQuaternion(N.setFromEuler(t));
   }
   applyAxisAngle(t, e) {
-    return this.applyQuaternion(K.setFromAxisAngle(t, e));
+    return this.applyQuaternion(N.setFromAxisAngle(t, e));
   }
   applyMatrix3(t) {
     const e = this.x, s = this.y, n = this.z, i = t.elements;
@@ -675,8 +675,8 @@ class $ {
     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, 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;
+    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, r = y * n + i * s - a * e, _ = -i * e - a * s - l * n;
+    return this.x = c * y + _ * -i + h * -l - r * -a, this.y = h * y + _ * -a + r * -i - c * -l, this.z = r * y + _ * -l + c * -a - h * -i, this;
   }
   project(t) {
     return this.applyMatrix4(t.matrixWorldInverse).applyMatrix4(t.projectionMatrix);
@@ -765,17 +765,17 @@ class $ {
     return this.copy(t).multiplyScalar(s);
   }
   projectOnPlane(t) {
-    return L.copy(this).projectOnVector(t), this.sub(L);
+    return X.copy(this).projectOnVector(t), this.sub(X);
   }
   reflect(t) {
-    return this.sub(L.copy(t).multiplyScalar(2 * this.dot(t)));
+    return this.sub(X.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(N(s, -1, 1));
+    return Math.acos(Q(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -843,22 +843,20 @@ class $ {
     yield this.x, yield this.y, yield this.z;
   }
 }
-const L = /* @__PURE__ */ new $(), K = /* @__PURE__ */ new Wt();
+const X = /* @__PURE__ */ new E(), N = /* @__PURE__ */ new Ut();
 typeof __THREE_DEVTOOLS__ < "u" && __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("register", { detail: {
   revision: lt
 } }));
 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;
+const Ft = Symbol("CONTROLS_CONTEXT_KEY"), w = tt({});
+function Kt() {
+  return ft(Ft, w), w;
 }
-function X(r) {
-  return Object.entries(r).map(([t, e]) => {
+function R(o) {
+  return Object.entries(o).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 ? {
+    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 E || n instanceof E || n instanceof Array) && (s = "vector"), !V(e) && e.value ? {
       ...e,
       label: e.label || t,
       value: e.value,
@@ -872,66 +870,83 @@ function X(r) {
     };
   });
 }
-function Bt() {
-  j.controls = [];
+function Nt() {
+  for (const o in w)
+    delete w[o];
 }
-function He(r, t, e) {
-  let s = [];
-  if (typeof r == "string")
-    r === "fpsgraph" ? s.push({
+function Ge(o, t, e) {
+  const s = m();
+  if (typeof o == "string")
+    o === "fpsgraph" ? (w[o] = {
       label: "fpsgraph",
       visible: !0,
       type: "fpsgraph"
-    }) : s.push({
-      label: r,
+    }, s.value = w[o]) : (w[o] = {
+      label: o,
       visible: !0,
       type: "folder",
-      controls: X(t)
-    });
-  else if (typeof r == "object" && typeof t == "string")
-    s.push({
+      controls: R(t)
+    }, s.value = w[o]);
+  else if (typeof o == "object" && o.options)
+    w[o.label || "Dropdown"] = {
+      ...e,
+      label: o.label || "Dropdown",
+      visible: !0,
+      value: o.value,
+      type: "select",
+      ref: o,
+      options: o.options
+    }, s.value = w[o.label || "Dropdown"];
+  else if (typeof o == "object" && typeof t == "string")
+    w[t] = {
       ...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 };
+      value: o[t],
+      type: typeof o[t],
+      ref: o
+    }, s.value = w[t];
+  else if (gt(o)) {
+    const n = mt(o), i = R(n);
+    for (const a of i)
+      w[a.label] = a;
+    s.value = i;
+  } else {
+    const n = R(o);
+    for (const i of n)
+      w[i.label] = i;
+    s.value = n;
+  }
+  return bt(Nt), 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({
+const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt = { class: "text-gray-500 w-1/3" }, Ot = ["value", "min", "max", "step"], te = /* @__PURE__ */ S({
   __name: "NumberControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
-    const e = r;
+  setup(o, { emit: t }) {
+    const e = o;
     function s(h) {
-      const { target: o } = h;
-      t("change", o.valueAsNumber);
+      const { target: r } = h;
+      t("change", r.valueAsNumber);
     }
-    const n = Y(), i = g(0), a = g(!1), l = (h) => {
+    const n = H(), i = m(0), a = m(!1), l = (h) => {
       i.value = h.clientX, a.value = !0;
     }, y = () => {
       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;
+        const r = h - i.value, _ = c(r);
+        r > 0 ? t("change", e.control.value + 1 + _) : r < 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;
       }
-    }), (h, o) => (d(), b("div", Ut, [
-      p("label", Kt, C(h.label), 1),
+    }), (h, r) => (d(), g("div", Gt, [
+      p("label", Jt, 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 }]),
+        class: $(["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: h.control.min,
         max: h.control.max,
@@ -939,234 +954,234 @@ const Ut = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Kt =
         onInput: s,
         onMousedown: l,
         onMouseup: y
-      }, null, 42, Gt)
+      }, null, 42, Ot)
     ]));
   }
-}), 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({
+}), ee = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, se = { class: "text-gray-500 w-1/3" }, ne = ["value"], ie = /* @__PURE__ */ S({
   __name: "TextControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
+  setup(o, { emit: t }) {
     function e(s) {
       t("change", s);
     }
-    return (s, n) => (d(), b("div", Ot, [
-      p("label", te, C(s.label), 1),
+    return (s, n) => (d(), g("div", ee, [
+      p("label", se, 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, ee)
+      }, null, 40, ne)
     ]));
   }
-}), 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({
+}), oe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, re = { class: "text-gray-500 w-1/3" }, ae = ["id", "checked"], he = ["for"], le = { class: "i-ic:baseline-check text-light" }, ue = /* @__PURE__ */ S({
   __name: "BooleanControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
+  setup(o, { emit: t }) {
     function e(s) {
       const { target: n } = s;
       t("change", n.checked);
     }
-    return (s, n) => (d(), b("div", ne, [
-      p("label", ie, C(s.label), 1),
+    return (s, n) => (d(), g("div", oe, [
+      p("label", re, C(s.label), 1),
       p("input", {
         id: s.control.label,
         checked: s.control.value,
         class: "hidden",
         type: "checkbox",
         onInput: e
-      }, null, 40, re),
+      }, null, 40, ae),
       p("label", {
         for: s.control.label,
         class: "inline-flex items-center cursor-pointer"
       }, [
         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"])
+          class: $([{ "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"])
         }, [
-          et(p("i", he, null, 512), [
+          et(p("i", le, null, 512), [
             [st, s.control.value]
           ])
         ], 2)
-      ], 8, oe)
+      ], 8, he)
     ]));
   }
-}), 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({
+}), ce = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, ye = ["value", "min", "max", "step"], _e = ["value", "min", "max", "step"], xe = /* @__PURE__ */ S({
   __name: "SliderControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
-    const e = r;
-    function s(o) {
-      const { target: _ } = o;
+  setup(o, { emit: t }) {
+    const e = o;
+    function s(r) {
+      const { target: _ } = r;
       t("change", _.valueAsNumber);
     }
-    const n = E(() => ({
+    const n = T(() => ({
       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%)`
-    })), i = Y(), a = g(0), l = g(!1), y = (o) => {
-      a.value = o.clientX, l.value = !0;
+    })), i = H(), a = m(0), l = m(!1), y = (r) => {
+      a.value = r.clientX, l.value = !0;
     }, c = () => {
       l.value = !1;
-    }, h = (o) => Math.floor(Math.abs(o) / 10);
-    return I(i.x, (o) => {
+    }, h = (r) => Math.floor(Math.abs(r) / 10);
+    return I(i.x, (r) => {
       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;
+        const _ = r - 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 = r;
       }
-    }), (o, _) => (d(), b("div", le, [
+    }), (r, _) => (d(), g("div", ce, [
       p("label", {
-        class: k(["text-gray-500 w-1/3", { "flex justify-between items-center": o.control.icon }])
+        class: $(["text-gray-500 w-1/3", { "flex justify-between items-center": r.control.icon }])
       }, [
-        bt(C(o.label) + " ", 1),
+        zt(C(r.label) + " ", 1),
         p("i", {
-          class: k(`i-${o.control.icon}`)
+          class: $(`i-${r.control.icon}`)
         }, null, 2)
       ], 2),
       p("input", {
-        value: o.control.value,
+        value: r.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: zt(n.value),
+        style: wt(n.value),
         type: "range",
-        min: o.control.min,
-        max: o.control.max,
-        step: o.control.step,
+        min: r.control.min,
+        max: r.control.max,
+        step: r.control.step,
         onInput: s
-      }, null, 44, ue),
+      }, null, 44, ye),
       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 }]),
+        value: r.control.value,
+        class: $(["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: o.control.min,
-        max: o.control.max,
-        step: o.control.step,
+        min: r.control.min,
+        max: r.control.max,
+        step: r.control.step,
         onInput: s,
         onMousedown: y,
         onMouseup: c
-      }, null, 42, ce)
+      }, null, 42, _e)
     ]));
   }
 });
-const _e = (r, t) => {
-  const e = r.__vccOpts || r;
+const pe = (o, t) => {
+  const e = o.__vccOpts || o;
   for (const [s, n] of t)
     e[s] = n;
   return e;
-}, 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({
+}, de = /* @__PURE__ */ pe(xe, [["__scopeId", "data-v-743fd350"]]), fe = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, ge = { class: "text-gray-500 w-1/3" }, me = ["value"], be = ["value"], ze = /* @__PURE__ */ S({
   __name: "ColorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
+  setup(o, { emit: t }) {
     function e(s) {
       const { target: n } = s;
       t("change", n.value);
     }
-    return (s, n) => (d(), b("div", pe, [
-      p("label", de, C(s.label), 1),
+    return (s, n) => (d(), g("div", fe, [
+      p("label", ge, C(s.label), 1),
       p("input", {
         value: s.control.value,
         type: "color",
         onInput: e
-      }, null, 40, fe),
+      }, null, 40, me),
       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, ge)
+      }, null, 40, be)
     ]));
   }
 });
-function be(r) {
-  return typeof r == "number" ? [r, r, r] : r instanceof $ ? [r.x, r.y, r.z] : r;
+function we(o) {
+  return typeof o == "number" ? [o, o, o] : o instanceof E ? [o.x, o.y, o.z] : o;
 }
-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 = {
+const Me = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve = { class: "text-gray-500 w-1/3" }, Ce = { class: "w-2/3 flex justify-between gap-1" }, Se = {
   key: 0,
   class: "font-bold px-0.5 py-1 text-0.65rem text-gray-300"
-}, Ce = ["value", "onInput", "onMousedown", "onMouseup"], Se = /* @__PURE__ */ v({
+}, ke = ["value", "onInput", "onMousedown", "onMouseup"], $e = /* @__PURE__ */ S({
   __name: "VectorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  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) {
+  setup(o, { emit: t }) {
+    const e = o, s = H(), n = m(0), i = m(!1), a = m(0), l = (x, b) => {
+      a.value = b, n.value = x.clientX, i.value = !0;
+    }, y = (x, b) => {
+      a.value = b, i.value = !1;
+    }, c = (x) => Math.floor(Math.abs(x) / 10), h = T(() => we(e.control.value)), r = T(() => Object.keys(e.control.value)), _ = T(() => e.control.value instanceof W || e.control.value instanceof E);
+    function u(x, b) {
       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);
+      a.value = b, z[_.value ? r.value[a.value] : a.value] = parseInt(f.value, 10), t("change", z);
     }
     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;
+        const b = x - n.value, z = c(b), { value: f } = e.control, M = _.value ? r.value[a.value] : a.value;
+        b > 0 ? f[M] += 1 + z : b < 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;
       }
-    }), (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", {
+    }), (x, b) => (d(), g("div", Me, [
+      p("label", ve, C(x.label), 1),
+      p("div", Ce, [
+        (d(!0), g(P, null, L(h.value, (z, f) => (d(), g("div", {
           key: x.label + f,
           class: "flex items-center w-1/3 bg-gray-100 rounded"
         }, [
-          o.value[f] && _.value ? (d(), b("span", ve, C(o.value[f]), 1)) : nt("", !0),
+          r.value[f] && _.value ? (d(), g("span", Se, C(r.value[f]), 1)) : nt("", !0),
           p("input", {
             type: "text",
-            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 }]),
+            class: $(["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)
+          }, null, 42, ke)
         ]))), 128))
       ])
     ]));
   }
-}), ke = { class: "mb-4" }, $e = { class: "bg-white rounded-b pt-4" }, Ee = /* @__PURE__ */ v({
+}), Ee = { class: "mb-4" }, Te = { class: "bg-white rounded-b pt-4" }, Ie = /* @__PURE__ */ S({
   __name: "Folder",
   props: {
     control: {}
   },
-  setup(r) {
+  setup(o) {
     function t(n, i) {
       i.value = n;
     }
-    const e = g(!1), s = () => {
+    const e = m(!1), s = () => {
       e.value = !e.value;
     };
-    return (n, i) => (d(), b("div", ke, [
+    return (n, i) => (d(), g("div", Ee, [
       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")
+          class: $(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
         }, null, 2)
       ]),
-      Mt(wt, {
+      Mt(vt, {
         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, (a) => (d(), w(ut, {
+          et(p("div", Te, [
+            (d(!0), g(P, null, L(n.control.controls, (a) => (d(), v(ut, {
               key: a.label,
               control: a,
               onChange: (l) => t(l, a)
@@ -1179,26 +1194,26 @@ const ze = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, Me =
       })
     ]));
   }
-}), 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({
+}), Ae = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, je = { class: "text-gray-500 w-1/3" }, qe = { 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" }, Pe = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, De = ["points"], G = 160, Y = 40, A = 2, J = 100, O = 20, Le = /* @__PURE__ */ S({
   __name: "FPSGraph",
   props: {
     label: {},
     control: {}
   },
-  setup(r) {
-    const t = kt({ every: J }), e = g(""), s = g([]), n = g(G / A);
+  setup(o) {
+    const t = $t({ every: J }), e = m(""), s = m([]), n = m(G / A);
     let i = performance.now();
-    return $t(({ timestamp: a }) => {
+    return Et(({ 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}`
+        (l, y) => `${y * A},${Y + O - A / 2 - l * (Y + 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", {
+    }), (a, l) => (d(), g("div", Ae, [
+      p("label", je, C(a.label), 1),
+      p("div", qe, [
+        p("div", Pe, C(Math.round(j(t))) + " FPS", 1),
+        (d(), g("svg", {
           width: G,
-          height: F,
+          height: Y,
           xmlns: "http://www.w3.org/2000/svg",
           class: "bg-gray-100"
         }, [
@@ -1209,91 +1224,121 @@ const ze = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, Me =
             "stroke-width": A,
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
-          }, null, 8, qe)
+          }, null, 8, De)
         ]))
       ])
     ]));
   }
-}), ut = /* @__PURE__ */ v({
+}), Ve = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Xe = { class: "text-gray-500 w-1/3" }, Re = ["value"], Ye = ["value"], He = /* @__PURE__ */ S({
+  __name: "SelectControl",
+  props: {
+    label: {},
+    control: {}
+  },
+  emits: ["change"],
+  setup(o, { emit: t }) {
+    function e(s) {
+      t("change", s.target.value);
+    }
+    return (s, n) => (d(), g("div", Ve, [
+      p("label", Xe, C(s.label), 1),
+      p("select", {
+        value: s.control.value,
+        class: "p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",
+        onChange: e
+      }, [
+        (d(!0), g(P, null, L(s.control.options, (i) => (d(), g("option", {
+          key: i.value,
+          value: i.value
+        }, C(i.text), 9, Ye))), 128))
+      ], 40, Re)
+    ]));
+  }
+}), ut = /* @__PURE__ */ S({
   __name: "ControlInput",
   props: {
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
+  setup(o, { emit: t }) {
     function e(s) {
       t("change", s);
     }
-    return (s, n) => s.control.visible ? (d(), b(D, { key: 0 }, [
-      s.control.type === "color" ? (d(), w(me, {
+    return (s, n) => s.control.visible ? (d(), g(P, { key: 0 }, [
+      s.control.type === "color" ? (d(), v(ze, {
         key: 0,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "vector" ? (d(), w(Se, {
+      }, null, 8, ["label", "control"])) : s.control.type === "vector" ? (d(), v($e, {
         key: 1,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "boolean" ? (d(), w(ae, {
+      }, null, 8, ["label", "control"])) : s.control.type === "boolean" ? (d(), v(ue, {
         key: 2,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "fpsgraph" ? (d(), w(Pe, {
+      }, null, 8, ["label", "control"])) : s.control.type === "fpsgraph" ? (d(), v(Le, {
         key: 3,
         label: s.control.label,
         control: s.control
-      }, null, 8, ["label", "control"])) : s.control.type === "folder" ? (d(), w(Ee, {
+      }, null, 8, ["label", "control"])) : s.control.type === "folder" ? (d(), v(Ie, {
         key: 4,
         label: s.control.label,
         control: s.control
-      }, null, 8, ["label", "control"])) : s.control.type === "number" ? (d(), w(Jt, {
+      }, null, 8, ["label", "control"])) : s.control.type === "number" ? (d(), v(te, {
         key: 5,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "range" ? (d(), w(xe, {
+      }, null, 8, ["label", "control"])) : s.control.type === "range" ? (d(), v(de, {
         key: 6,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : (d(), w(se, {
+      }, null, 8, ["label", "control"])) : s.control.type === "select" ? (d(), v(He, {
         key: 7,
         label: s.control.label,
         control: s.control,
         onChange: e
+      }, null, 8, ["label", "control"])) : (d(), v(ie, {
+        key: 8,
+        label: s.control.label,
+        control: s.control,
+        onChange: e
       }, null, 8, ["label", "control"]))
     ], 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, [
+}), Qe = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, We = /* @__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), Ze = /* @__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({
+], -1), Be = /* @__PURE__ */ p("div", null, null, -1), Ue = [
+  We,
+  Ze,
+  Be
+], Fe = 280, Je = /* @__PURE__ */ S({
   __name: "TresLeches",
-  setup(r) {
-    const { width: t } = Et(), e = g(null), s = Zt();
+  setup(o) {
+    const { width: t } = Tt(), e = m(null), s = Kt();
     function n(i, a) {
       a.ref && (a.ref[a.label] = i), a.value = i;
     }
-    return (i, a) => (d(), w(T(Yt), {
-      "initial-value": { x: T(t) - Re - 20, y: 10 },
+    return (i, a) => (d(), v(j(Qt), {
+      "initial-value": { x: j(t) - Fe - 20, y: 10 },
       class: "fixed select-none z-24 w-280px font-sans text-xs",
       handle: e.value
     }, {
       default: it(() => [
-        p("div", De, [
+        p("div", Qe, [
           p("header", {
             ref_key: "handle",
             ref: e,
             class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
-          }, Fe, 512),
-          (d(!0), b(D, null, R(T(s).controls, (l) => (d(), w(ut, {
+          }, Ue, 512),
+          (d(!0), g(P, null, L(j(s), (l) => (d(), v(ut, {
             key: l.label,
             control: l,
             onChange: (y) => n(y, l)
@@ -1305,6 +1350,6 @@ const ze = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, Me =
   }
 });
 export {
-  Qe as TresLeches,
-  He as useControls
+  Je as TresLeches,
+  Ge as useControls
 };