@tresjs/leches 0.3.0 → 0.4.0

package/dist/tresleches.js

@@ -1,65 +1,65 @@
 /**
  * name: @tresjs/leches
- * version: v0.3.0
+ * version: v0.4.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 I, reactive as tt, h as dt, watch as A, isReactive as ft, toRefs as gt, onUnmounted as mt, isRef as V, openBlock as d, createElementBlock as b, createElementVNode as p, toDisplayString as C, normalizeClass as k, withDirectives as et, vShow as st, createTextVNode as bt, normalizeStyle as zt, Fragment as D, renderList as R, createCommentVNode as nt, createVNode as Mt, Transition as wt, withCtx as it, createBlock as w } from "vue";
-import { useStorage as vt, isClient as Ct, useDraggable as St, useMouse as Y, useFps as kt, useRafFn as $t, useWindowSize as It } from "@vueuse/core";
-function rt(r) {
-  return ct() ? (yt(r), !0) : !1;
+import { unref as j, getCurrentScope as ct, onScopeDispose as yt, toRef as _t, readonly as xt, customRef as pt, ref as m, defineComponent as C, computed as E, 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 v, normalizeClass as k, withDirectives as et, vShow as st, createTextVNode as zt, normalizeStyle as Mt, Fragment as P, renderList as L, createCommentVNode as nt, createVNode as wt, Transition as vt, withCtx as it, createBlock as w } from "vue";
+import { useStorage as Ct, isClient as St, useDraggable as kt, useMouse as F, 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__ */ At();
-function At() {
-  var r;
-  return ot && ((r = window == null ? void 0 : window.navigator) == null ? void 0 : r.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
+const rt = typeof window < "u", ht = () => {
+}, N = /* @__PURE__ */ It();
+function It() {
+  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 Et(...r) {
-  if (r.length !== 1)
-    return _t(...r);
-  const t = r[0];
-  return typeof t == "function" ? xt(pt(() => ({ get: t, set: ht }))) : g(t);
+function At(...o) {
+  if (o.length !== 1)
+    return _t(...o);
+  const t = o[0];
+  return typeof t == "function" ? xt(pt(() => ({ get: t, set: ht }))) : 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)
+  if (typeof o[0] == "string" || Array.isArray(o[0]) ? ([e, s, n] = o, t = qt) : [t, e, s, n] = o, !t)
     return ht;
   Array.isArray(e) || (e = [e]), Array.isArray(s) || (s = [s]);
-  const i = [], h = () => {
-    i.forEach((a) => a()), i.length = 0;
-  }, l = (a, o, y, u) => (a.addEventListener(o, y, u), () => a.removeEventListener(o, y, u)), _ = A(
-    () => [Tt(t), q(n)],
-    ([a, o]) => {
-      h(), a && i.push(
-        ...e.flatMap((y) => s.map((u) => l(a, y, u, o)))
+  const i = [], a = () => {
+    i.forEach((h) => h()), i.length = 0;
+  }, 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, r)))
       );
     },
     { immediate: !0, flush: "post" }
   ), c = () => {
-    _(), h();
+    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, B = Object.getOwnPropertySymbols, Xt = Object.prototype.hasOwnProperty, Rt = Object.prototype.propertyIsEnumerable, U = (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]);
+    Xt.call(t, e) && U(o, 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({
+      Rt.call(t, e) && U(o, e, t[e]);
+  return o;
+}, Ft = (o, t) => Lt(o, Vt(t));
+const Ht = /* @__PURE__ */ C({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -71,100 +71,104 @@ const Yt = /* @__PURE__ */ v({
     "pointerTypes",
     "as",
     "handle",
-    "axis"
+    "axis",
+    "onStart",
+    "onMove",
+    "onEnd"
   ],
-  setup(r, { slots: t }) {
-    const e = g(), s = I(() => {
-      var _;
-      return (_ = r.handle) != null ? _ : e.value;
-    }), n = r.storageKey && vt(
-      r.storageKey,
-      q(r.initialValue) || { x: 0, y: 0 },
-      Ct ? r.storageType === "session" ? sessionStorage : localStorage : void 0
-    ), i = n || r.initialValue || { x: 0, y: 0 }, h = (_) => {
-      n && (n.value.x = _.x, n.value.y = _.y);
-    }, l = tt(St(e, Rt(Ft({}, r), {
+  setup(o, { slots: t }) {
+    const e = m(), s = E(() => {
+      var y;
+      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 = o.onEnd) == null || h.call(o, y, c), n && (n.value.x = y.x, n.value.y = y.y);
+    }, l = tt(kt(e, Ft(Yt({}, o), {
       handle: s,
       initialValue: i,
-      onEnd: h
+      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.clientHeight < r.scrollHeight || t.overflowY === "auto" && r.clientWidth < r.scrollWidth)
+function at(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;
+    const e = o.parentNode;
     return !e || e.tagName === "BODY" ? !1 : at(e);
   }
 }
-function Nt(r) {
-  const t = r || window.event, e = t.target;
+function Qt(o) {
+  const t = o || window.event, e = t.target;
   return at(e) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }
-function Ht(r, t = !1) {
-  const e = g(t);
+function Wt(o, t = !1) {
+  const e = m(t);
   let s = null, n;
-  A(Et(r), (l) => {
+  I(At(o), (l) => {
     if (l) {
-      const _ = l;
-      n = _.style.overflow, e.value && (_.style.overflow = "hidden");
+      const y = l;
+      n = y.style.overflow, e.value && (y.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
   const i = () => {
-    const l = q(r);
-    !l || e.value || (Z && (s = qt(
+    const l = q(o);
+    !l || e.value || (N && (s = Pt(
       l,
       "touchmove",
-      (_) => {
-        Nt(_);
+      (y) => {
+        Qt(y);
       },
       { passive: !1 }
     )), l.style.overflow = "hidden", e.value = !0);
-  }, h = () => {
-    const l = q(r);
-    !l || !e.value || (Z && (s == null || s()), l.style.overflow = n, e.value = !1);
+  }, a = () => {
+    const l = q(o);
+    !l || !e.value || (N && (s == null || s()), l.style.overflow = n, e.value = !1);
   };
-  return rt(h), I({
+  return ot(a), E({
     get() {
       return e.value;
     },
     set(l) {
-      l ? i() : h();
+      l ? i() : a();
     }
   });
 }
-function Qt() {
-  let r = !1;
-  const t = g(!1);
+function Zt() {
+  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);
-    A(t, (i) => n.value = i);
+    o = !0;
+    const n = Wt(e, s.value);
+    I(t, (i) => n.value = i);
   };
 }
-Qt();
+Zt();
 /**
  * @license
  * Copyright 2010-2023 Three.js Authors
  * SPDX-License-Identifier: MIT
  */
-const lt = "152";
-function N(r, t, e) {
-  return Math.max(t, Math.min(e, r));
+const lt = "153";
+function H(o, t, e) {
+  return Math.max(t, Math.min(e, o));
 }
-class H {
+class Q {
   constructor(t = 0, e = 0) {
-    H.prototype.isVector2 = !0, this.x = t, this.y = e;
+    Q.prototype.isVector2 = !0, this.x = t, this.y = e;
   }
   get width() {
     return this.x;
@@ -313,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(H(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -347,8 +351,8 @@ class H {
     return this.x = t.getX(e), this.y = t.getY(e), this;
   }
   rotateAround(t, e) {
-    const s = Math.cos(e), n = Math.sin(e), i = this.x - t.x, h = this.y - t.y;
-    return this.x = i * s - h * n + t.x, this.y = i * n + h * s + t.y, this;
+    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;
@@ -357,39 +361,39 @@ class H {
     yield this.x, yield this.y;
   }
 }
-class Wt {
+class Nt {
   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, h, l) {
-    let _ = s[n + 0], c = s[n + 1], a = s[n + 2], o = s[n + 3];
-    const y = i[h + 0], u = i[h + 1], x = i[h + 2], m = i[h + 3];
+  static slerpFlat(t, e, s, n, i, a, l) {
+    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] = _, t[e + 1] = c, t[e + 2] = a, 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] = y, 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 || a !== x) {
+    if (r !== b || y !== _ || c !== u || h !== x) {
       let z = 1 - l;
-      const f = _ * y + c * u + a * x + o * m, M = f >= 0 ? 1 : -1, Q = 1 - f * f;
-      if (Q > Number.EPSILON) {
-        const S = Math.sqrt(Q), W = Math.atan2(S, f * M);
-        z = Math.sin(z * W) / S, l = Math.sin(l * W) / S;
+      const f = y * _ + c * u + h * x + r * b, M = f >= 0 ? 1 : -1, W = 1 - f * f;
+      if (W > Number.EPSILON) {
+        const S = Math.sqrt(W), Z = Math.atan2(S, f * M);
+        z = Math.sin(z * Z) / S, l = Math.sin(l * Z) / S;
       }
-      const P = l * M;
-      if (_ = _ * z + y * P, c = c * z + u * P, a = a * z + x * P, o = o * z + m * P, z === 1 - l) {
-        const S = 1 / Math.sqrt(_ * _ + c * c + a * a + o * o);
-        _ *= S, c *= S, a *= S, o *= S;
+      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 S = 1 / Math.sqrt(y * y + c * c + h * h + r * r);
+        y *= S, c *= S, h *= S, r *= S;
       }
     }
-    t[e] = _, t[e + 1] = c, t[e + 2] = a, 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, h) {
-    const l = s[n], _ = s[n + 1], c = s[n + 2], a = s[n + 3], o = i[h], y = i[h + 1], u = i[h + 2], x = i[h + 3];
-    return t[e] = l * x + a * o + _ * u - c * y, t[e + 1] = _ * x + a * y + c * o - l * u, t[e + 2] = c * x + a * u + l * y - _ * o, t[e + 3] = a * x - l * o - _ * y - c * u, t;
+  static multiplyQuaternionsFlat(t, e, s, n, i, a) {
+    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;
@@ -425,28 +429,28 @@ 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, h = t._order, l = Math.cos, _ = Math.sin, c = l(s / 2), a = l(n / 2), o = l(i / 2), y = _(s / 2), u = _(n / 2), x = _(i / 2);
-    switch (h) {
+    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 = y * a * o + c * u * x, this._y = c * u * o - y * a * x, this._z = c * a * x + y * u * o, this._w = c * a * o - y * u * x;
+        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 = y * a * o + c * u * x, this._y = c * u * o - y * a * x, this._z = c * a * x - y * u * o, this._w = c * a * o + y * u * x;
+        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 = y * a * o - c * u * x, this._y = c * u * o + y * a * x, this._z = c * a * x + y * u * o, this._w = c * a * o - y * u * x;
+        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 = y * a * o - c * u * x, this._y = c * u * o + y * a * x, this._z = c * a * x - y * u * o, this._w = c * a * o + y * u * x;
+        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 = y * a * o + c * u * x, this._y = c * u * o + y * a * x, this._z = c * a * x - y * u * o, this._w = c * a * o - y * u * x;
+        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 = y * a * o - c * u * x, this._y = c * u * o - y * a * x, this._z = c * a * x + y * u * o, this._w = c * a * o + y * u * x;
+        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: " + h);
+        console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + a);
     }
     return e !== !1 && this._onChangeCallback(), this;
   }
@@ -455,19 +459,19 @@ 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], h = e[1], l = e[5], _ = e[9], c = e[2], a = e[6], o = e[10], y = s + l + o;
-    if (y > 0) {
-      const u = 0.5 / Math.sqrt(y + 1);
-      this._w = 0.25 / u, this._x = (a - _) * u, this._y = (i - c) * u, this._z = (h - n) * u;
-    } else if (s > l && s > o) {
-      const u = 2 * Math.sqrt(1 + s - l - o);
-      this._w = (a - _) / u, this._x = 0.25 * u, this._y = (n + h) / u, this._z = (i + c) / u;
-    } else if (l > o) {
-      const u = 2 * Math.sqrt(1 + l - s - o);
-      this._w = (i - c) / u, this._x = (n + h) / u, this._y = 0.25 * u, this._z = (_ + a) / u;
+    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 > 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 > 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);
-      this._w = (h - n) / u, this._x = (i + c) / u, this._y = (_ + a) / u, this._z = 0.25 * u;
+      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;
   }
@@ -476,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(H(this.dot(t), -1, 1)));
   }
   rotateTowards(t, e) {
     const s = this.angleTo(t);
@@ -514,25 +518,25 @@ class Wt {
     return this.multiplyQuaternions(t, this);
   }
   multiplyQuaternions(t, e) {
-    const s = t._x, n = t._y, i = t._z, h = t._w, l = e._x, _ = e._y, c = e._z, a = e._w;
-    return this._x = s * a + h * l + n * c - i * _, this._y = n * a + h * _ + i * l - s * c, this._z = i * a + h * c + s * _ - n * l, this._w = h * a - s * l - n * _ - i * c, this._onChangeCallback(), this;
+    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, n = this._y, i = this._z, h = this._w;
-    let l = h * t._w + s * t._x + n * t._y + i * t._z;
+    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 = h, this._x = s, this._y = n, this._z = i, this;
-    const _ = 1 - l * l;
-    if (_ <= Number.EPSILON) {
+      return this._w = a, this._x = s, this._y = n, this._z = i, this;
+    const y = 1 - l * l;
+    if (y <= Number.EPSILON) {
       const u = 1 - e;
-      return this._w = u * h + e * this._w, this._x = u * s + e * this._x, this._y = u * n + e * this._y, this._z = u * i + e * this._z, this.normalize(), this._onChangeCallback(), this;
+      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(_), a = Math.atan2(c, l), o = Math.sin((1 - e) * a) / c, y = Math.sin(e * a) / c;
-    return this._w = h * o + this._w * y, this._x = s * o + this._x * y, this._y = n * o + this._y * y, this._z = i * o + this._z * y, this._onChangeCallback(), this;
+    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);
@@ -667,12 +671,12 @@ class $ {
     return this.applyMatrix3(t).normalize();
   }
   applyMatrix4(t) {
-    const e = this.x, s = this.y, n = this.z, i = t.elements, h = 1 / (i[3] * e + i[7] * s + i[11] * n + i[15]);
-    return this.x = (i[0] * e + i[4] * s + i[8] * n + i[12]) * h, this.y = (i[1] * e + i[5] * s + i[9] * n + i[13]) * h, this.z = (i[2] * e + i[6] * s + i[10] * n + i[14]) * h, this;
+    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, n = this.z, i = t.x, h = t.y, l = t.z, _ = t.w, c = _ * e + h * n - l * s, a = _ * s + l * e - i * n, o = _ * n + i * s - h * e, y = -i * e - h * s - l * n;
-    return this.x = c * _ + y * -i + a * -l - o * -h, this.y = a * _ + y * -h + o * -i - c * -l, this.z = o * _ + y * -l + c * -h - a * -i, this;
+    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);
@@ -750,8 +754,8 @@ class $ {
     return this.crossVectors(this, t);
   }
   crossVectors(t, e) {
-    const s = t.x, n = t.y, i = t.z, h = e.x, l = e.y, _ = e.z;
-    return this.x = n * _ - i * l, this.y = i * h - s * _, this.z = s * l - n * h, this;
+    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();
@@ -761,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(H(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -839,19 +843,19 @@ class $ {
     yield this.x, yield this.y, yield this.z;
   }
 }
-const L = /* @__PURE__ */ new $(), K = /* @__PURE__ */ new Wt();
+const X = /* @__PURE__ */ new $(), K = /* @__PURE__ */ new Nt();
 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({
+const Bt = Symbol("CONTROLS_CONTEXT_KEY"), T = tt({
   controls: []
 });
-function Zt() {
-  return j;
+function Ut() {
+  return ft(Bt, T), T;
 }
-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 ? {
@@ -868,118 +872,128 @@ function X(r) {
     };
   });
 }
-function Bt() {
-  j.controls = [];
+function Kt() {
+  T.controls = [];
 }
-function He(r, t, e) {
+function Ge(o, t, e) {
   let s = [];
-  if (typeof r == "string")
-    r === "fpsgraph" ? s.push({
+  if (typeof o == "string")
+    o === "fpsgraph" ? s.push({
       label: "fpsgraph",
       visible: !0,
       type: "fpsgraph"
     }) : s.push({
-      label: r,
+      label: o,
       visible: !0,
       type: "folder",
-      controls: X(t)
+      controls: R(t)
+    });
+  else if (typeof o == "object" && o.options)
+    s.push({
+      ...e,
+      label: o.label || "Dropdown",
+      visible: !0,
+      value: o.value,
+      type: "select",
+      ref: o,
+      options: o.options
     });
-  else if (typeof r == "object" && typeof t == "string")
+  else if (typeof o == "object" && typeof t == "string")
     s.push({
       ...e,
       label: t,
       visible: !0,
-      value: r[t],
-      type: typeof r[t],
-      ref: r
+      value: o[t],
+      type: typeof o[t],
+      ref: o
     });
-  else if (ft(r)) {
-    const n = gt(r);
-    s = X(n);
+  else if (gt(o)) {
+    const n = mt(o);
+    s = R(n);
   } else
-    s = X(r);
-  return j.controls = [...j.controls, ...s], mt(Bt), { state: j, controls: s };
+    s = R(o);
+  return T.controls = [...T.controls, ...s], bt(Kt), { state: T, 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({
+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__ */ C({
   __name: "NumberControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
-    const e = r;
-    function s(a) {
-      const { target: o } = a;
-      t("change", o.valueAsNumber);
+  setup(o, { emit: t }) {
+    const e = o;
+    function s(h) {
+      const { target: r } = h;
+      t("change", r.valueAsNumber);
     }
-    const n = Y(), i = g(0), h = g(!1), l = (a) => {
-      i.value = a.clientX, h.value = !0;
-    }, _ = () => {
-      h.value = !1;
-    }, c = (a) => Math.floor(Math.abs(a) / 10);
-    return A(n.x, (a) => {
-      if (h.value) {
-        const o = a - i.value, y = c(o);
-        o > 0 ? t("change", e.control.value + 1 + y) : o < 0 && t("change", e.control.value - 1 + y), e.control.min !== void 0 && e.control.value < e.control.min && t("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && t("change", e.control.max), i.value = a;
+    const n = F(), 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 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;
       }
-    }), (a, o) => (d(), b("div", Ut, [
-      p("label", Kt, C(a.label), 1),
+    }), (h, r) => (d(), g("div", Gt, [
+      p("label", Jt, v(h.label), 1),
       p("input", {
-        value: a.control.value,
-        class: k(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": h.value }]),
+        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: a.control.min,
-        max: a.control.max,
-        step: a.control.step,
+        min: h.control.min,
+        max: h.control.max,
+        step: h.control.step,
         onInput: s,
         onMousedown: l,
-        onMouseup: _
-      }, null, 42, Gt)
+        onMouseup: y
+      }, 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__ */ C({
   __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, v(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" }, he = ["id", "checked"], ae = ["for"], le = { class: "i-ic:baseline-check text-light" }, ue = /* @__PURE__ */ C({
   __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, v(s.label), 1),
       p("input", {
         id: s.control.label,
         checked: s.control.value,
         class: "hidden",
         type: "checkbox",
         onInput: e
-      }, null, 40, re),
+      }, null, 40, he),
       p("label", {
         for: s.control.label,
         class: "inline-flex items-center cursor-pointer"
@@ -987,185 +1001,185 @@ const Ut = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Kt =
         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"])
         }, [
-          et(p("i", he, null, 512), [
+          et(p("i", le, null, 512), [
             [st, s.control.value]
           ])
         ], 2)
-      ], 8, oe)
+      ], 8, ae)
     ]));
   }
-}), 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__ */ C({
   __name: "SliderControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
-    const e = r;
-    function s(o) {
-      const { target: y } = o;
-      t("change", y.valueAsNumber);
+  setup(o, { emit: t }) {
+    const e = o;
+    function s(r) {
+      const { target: _ } = r;
+      t("change", _.valueAsNumber);
     }
-    const n = I(() => ({
+    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%)`
-    })), i = Y(), h = g(0), l = g(!1), _ = (o) => {
-      h.value = o.clientX, l.value = !0;
+    })), i = F(), a = m(0), l = m(!1), y = (r) => {
+      a.value = r.clientX, l.value = !0;
     }, c = () => {
       l.value = !1;
-    }, a = (o) => Math.floor(Math.abs(o) / 10);
-    return A(i.x, (o) => {
+    }, h = (r) => Math.floor(Math.abs(r) / 10);
+    return I(i.x, (r) => {
       if (l.value) {
-        const y = o - h.value, u = a(y);
-        y > 0 ? t("change", e.control.value + 1 + u) : y < 0 && t("change", e.control.value - 1 + u), e.control.min !== void 0 && e.control.value < e.control.min && t("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && t("change", e.control.max), h.value = o;
+        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, y) => (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: k(["text-gray-500 w-1/3", { "flex justify-between items-center": r.control.icon }])
       }, [
-        bt(C(o.label) + " ", 1),
+        zt(v(r.label) + " ", 1),
         p("i", {
-          class: k(`i-${o.control.icon}`)
+          class: k(`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: Mt(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,
+        value: r.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: 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: _,
+        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__ */ C({
   __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, v(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 Me(o) {
+  return typeof o == "number" ? [o, o, o] : o instanceof $ ? [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 we = { 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__ */ C({
   __name: "VectorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(r, { emit: t }) {
-    const e = r, s = Y(), n = g(0), i = g(!1), h = g(0), l = (x, m) => {
-      h.value = m, n.value = x.clientX, i.value = !0;
-    }, _ = (x, m) => {
-      h.value = m, i.value = !1;
-    }, c = (x) => Math.floor(Math.abs(x) / 10), a = I(() => be(e.control.value)), o = I(() => Object.keys(e.control.value)), y = I(() => e.control.value instanceof H || e.control.value instanceof $);
-    function u(x, m) {
+  setup(o, { emit: t }) {
+    const e = o, s = F(), 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 = E(() => Me(e.control.value)), r = E(() => Object.keys(e.control.value)), _ = E(() => e.control.value instanceof Q || e.control.value instanceof $);
+    function u(x, b) {
       const { value: z } = e.control, { target: f } = x;
-      h.value = m, z[y.value ? o.value[h.value] : h.value] = parseInt(f.value, 10), t("change", z);
+      a.value = b, z[_.value ? r.value[a.value] : a.value] = parseInt(f.value, 10), t("change", z);
     }
-    return A(s.x, (x) => {
+    return I(s.x, (x) => {
       if (i.value) {
-        const m = x - n.value, z = c(m), { value: f } = e.control, M = y.value ? o.value[h.value] : h.value;
-        m > 0 ? f[M] += 1 + z : m < 0 && (f[M] -= 1 + z), e.control.min !== void 0 && f < e.control.min && (f[M] = e.control.min), e.control.max !== void 0 && f > e.control.max && (f[M] = e.control.max), t("change", f), n.value = x;
+        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(a.value, (z, f) => (d(), b("div", {
+    }), (x, b) => (d(), g("div", we, [
+      p("label", ve, v(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] && y.value ? (d(), b("span", ve, C(o.value[f]), 1)) : nt("", !0),
+          r.value[f] && _.value ? (d(), g("span", Se, v(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 }]),
-            value: a.value[f].toFixed(2),
+            value: h.value[f].toFixed(2),
             onInput: (M) => u(M, f),
             onMousedown: (M) => l(M, f),
-            onMouseup: (M) => _(M, f)
-          }, null, 42, Ce)
+            onMouseup: (M) => y(M, f)
+          }, null, 42, ke)
         ]))), 128))
       ])
     ]));
   }
-}), ke = { class: "mb-4" }, $e = { class: "bg-white rounded-b pt-4" }, Ie = /* @__PURE__ */ v({
+}), Ee = { class: "mb-4" }, Te = { class: "bg-white rounded-b pt-4" }, Ie = /* @__PURE__ */ C({
   __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("span", null, v(n.control.label), 1),
         p("i", {
           class: k(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
         }, null, 2)
       ]),
-      Mt(wt, {
+      wt(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, (h) => (d(), w(ut, {
-              key: h.label,
-              control: h,
-              onChange: (l) => t(l, h)
+          et(p("div", Te, [
+            (d(!0), g(P, null, L(n.control.controls, (a) => (d(), w(ut, {
+              key: a.label,
+              control: a,
+              onChange: (l) => t(l, a)
             }, null, 8, ["control", "onChange"]))), 128))
           ], 512), [
             [st, e.value]
@@ -1175,26 +1189,26 @@ const ze = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, Me =
       })
     ]));
   }
-}), Ae = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ee = { class: "text-gray-500 w-1/3" }, Te = { class: "relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans" }, je = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, qe = ["points"], G = 160, F = 40, E = 2, J = 100, O = 20, Pe = /* @__PURE__ */ v({
+}), 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__ */ C({
   __name: "FPSGraph",
   props: {
     label: {},
     control: {}
   },
-  setup(r) {
-    const t = kt({ every: J }), e = g(""), s = g([]), n = g(G / E);
+  setup(o) {
+    const t = $t({ every: J }), e = m(""), s = m([]), n = m(G / A);
     let i = performance.now();
-    return $t(({ timestamp: h }) => {
-      h - i >= J && (i = h, s.value.push(t.value), s.value.length > n.value && s.value.shift(), e.value = s.value.map(
-        (l, _) => `${_ * E},${F + O - E / 2 - l * (F + O - E) / 120}`
+    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},${Y + O - A / 2 - l * (Y + O - A) / 120}`
       ).join(" "));
-    }), (h, l) => (d(), b("div", Ae, [
-      p("label", Ee, C(h.label), 1),
-      p("div", Te, [
-        p("div", je, C(Math.round(T(t))) + " FPS", 1),
-        (d(), b("svg", {
+    }), (a, l) => (d(), g("div", Ae, [
+      p("label", je, v(a.label), 1),
+      p("div", qe, [
+        p("div", Pe, v(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"
         }, [
@@ -1202,41 +1216,66 @@ const ze = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, Me =
             points: e.value,
             fill: "none",
             stroke: "lightgray",
-            "stroke-width": E,
+            "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"], Fe = /* @__PURE__ */ C({
+  __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, v(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
+        }, v(i.text), 9, Ye))), 128))
+      ], 40, Re)
+    ]));
+  }
+}), ut = /* @__PURE__ */ C({
   __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(), w(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(), w($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(), w(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(), w(Le, {
         key: 3,
         label: s.control.label,
         control: s.control
@@ -1244,55 +1283,60 @@ const ze = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, Me =
         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(), w(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(), w(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(), w(Fe, {
         key: 7,
         label: s.control.label,
         control: s.control,
         onChange: e
+      }, null, 8, ["label", "control"])) : (d(), w(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, [
+}), He = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, Qe = /* @__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), We = /* @__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), Ze = /* @__PURE__ */ p("div", null, null, -1), Ne = [
+  Qe,
+  We,
+  Ze
+], Be = 280, Je = /* @__PURE__ */ C({
   __name: "TresLeches",
-  setup(r) {
-    const { width: t } = It(), e = g(null), s = Zt();
-    function n(i, h) {
-      h.ref && (h.ref[h.label] = i), h.value = i;
+  setup(o) {
+    const { width: t } = Tt(), e = m(null), s = Ut();
+    function n(i, a) {
+      a.ref && (a.ref[a.label] = i), a.value = i;
     }
-    return (i, h) => (d(), w(T(Yt), {
-      "initial-value": { x: T(t) - Re - 20, y: 10 },
+    return (i, a) => (d(), w(j(Ht), {
+      "initial-value": { x: j(t) - Be - 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", He, [
           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, {
+          }, Ne, 512),
+          (d(!0), g(P, null, L(j(s).controls, (l) => (d(), w(ut, {
             key: l.label,
             control: l,
-            onChange: (_) => n(_, l)
+            onChange: (y) => n(y, l)
           }, null, 8, ["control", "onChange"]))), 128))
         ])
       ]),
@@ -1301,6 +1345,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
 };