@tresjs/leches 0.6.0 → 0.8.0

package/dist/tresleches.js

@@ -1,65 +1,98 @@
 /**
  * name: @tresjs/leches
- * version: v0.6.0
+ * version: v0.8.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-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;
+import { unref as D, isRef as O, toRefs as K, customRef as ae, watch as P, ref as v, computed as A, defineComponent as M, reactive as Y, h as ce, openBlock as d, createElementBlock as m, createElementVNode as c, toDisplayString as k, normalizeClass as I, withDirectives as q, vShow as J, createTextVNode as ue, normalizeStyle as ie, Fragment as S, renderList as U, createCommentVNode as L, createBlock as C, createVNode as pe, Transition as de, withCtx as Q, provide as fe } from "vue";
+import { useWindowSize as Z, useEventListener as N, useStorage as ve, isClient as ge, useMouse as j, useFps as he, useRafFn as ye } from "@vueuse/core";
+function T(n) {
+  return typeof n == "function" ? n() : D(n);
 }
-function q(o) {
-  return typeof o == "function" ? o() : j(o);
-}
-const rt = typeof window < "u", at = () => {
-}, U = /* @__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 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 jt(o) {
-  var t;
-  const e = q(o);
-  return (t = e == null ? void 0 : e.$el) != null ? t : e;
+const ee = typeof window < "u" && typeof document < "u";
+function be(n, o = {}) {
+  if (!O(n))
+    return K(n);
+  const t = Array.isArray(n.value) ? Array.from({ length: n.value.length }) : {};
+  for (const e in n.value)
+    t[e] = ae(() => ({
+      get() {
+        return n.value[e];
+      },
+      set(l) {
+        var u;
+        if ((u = T(o.replaceRef)) != null ? u : !0)
+          if (Array.isArray(n.value)) {
+            const p = [...n.value];
+            p[e] = l, n.value = p;
+          } else {
+            const p = { ...n.value, [e]: l };
+            Object.setPrototypeOf(p, Object.getPrototypeOf(n.value)), n.value = p;
+          }
+        else
+          n.value[e] = l;
+      }
+    }));
+  return t;
 }
-const qt = rt ? window : void 0;
-function Pt(...o) {
-  let t, e, s, n;
-  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, 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 = () => {
-    y(), a();
+const me = ee ? window : void 0;
+function _e(n, o = {}) {
+  const {
+    pointerTypes: t,
+    preventDefault: e,
+    stopPropagation: l,
+    exact: u,
+    onMove: a,
+    onEnd: p,
+    onStart: f,
+    initialValue: g,
+    axis: r = "both",
+    draggingElement: s = me,
+    handle: i = n
+  } = o, { width: $ } = Z();
+  let _ = $.value;
+  P($, () => {
+    const y = $.value - _;
+    h.value.x += y, _ = $.value;
+  });
+  const h = v(
+    T(g) ?? { x: 0, y: 0 }
+  ), x = v(), b = (y) => t ? t.includes(y.pointerType) : !0, w = (y) => {
+    T(e) && y.preventDefault(), T(l) && y.stopPropagation();
+  }, le = (y) => {
+    if (!b(y) || T(u) && y.target !== T(n))
+      return;
+    const F = T(n).getBoundingClientRect(), V = {
+      x: y.clientX - F.left,
+      y: y.clientY - F.top
+    };
+    (f == null ? void 0 : f(V, y)) !== !1 && (x.value = V, w(y));
+  }, re = (y) => {
+    if (!b(y) || !x.value)
+      return;
+    let { x: F, y: V } = h.value;
+    (r === "x" || r === "both") && (F = y.clientX - x.value.x), (r === "y" || r === "both") && (V = y.clientY - x.value.y), h.value = {
+      x: F,
+      y: V
+    }, a == null || a(h.value, y), w(y);
+  }, se = (y) => {
+    b(y) && x.value && (x.value = void 0, p == null || p(h.value, y), w(y));
+  };
+  if (ee) {
+    const y = { capture: o.capture ?? !0 };
+    N(i, "pointerdown", le, y), N(s, "pointermove", re, y), N(s, "pointerup", se, y);
+  }
+  return {
+    ...be(h),
+    position: h,
+    isDragging: A(() => !!x.value),
+    style: A(
+      () => `left:${h.value.x}px;top:${h.value.y}px;`
+    )
   };
-  return ot(c), c;
 }
-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 = {}))
-    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({
+const xe = /* @__PURE__ */ M({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -76,1280 +109,529 @@ const Qt = /* @__PURE__ */ S({
     "onMove",
     "onEnd"
   ],
-  setup(o, { slots: t }) {
-    const e = m(), s = T(() => {
-      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, Ht(Yt({}, o), {
-      handle: s,
-      initialValue: i,
-      onEnd: a
-    })));
-    return () => {
-      if (t.default)
-        return dt(o.as || "div", { ref: e, style: `touch-action:none;${l.style}` }, t.default(l));
-    };
-  }
-});
-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 = o.parentNode;
-    return !e || e.tagName === "BODY" ? !1 : ht(e);
-  }
-}
-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 Zt(o, t = !1) {
-  const e = m(t);
-  let s = null, n;
-  I(At(o), (l) => {
-    if (l) {
-      const y = l;
-      n = y.style.overflow, e.value && (y.style.overflow = "hidden");
-    }
-  }, {
-    immediate: !0
-  });
-  const i = () => {
-    const l = q(o);
-    !l || e.value || (U && (s = Pt(
-      l,
-      "touchmove",
-      (y) => {
-        Wt(y);
-      },
-      { passive: !1 }
-    )), l.style.overflow = "hidden", e.value = !0);
-  }, a = () => {
-    const l = q(o);
-    !l || !e.value || (U && (s == null || s()), l.style.overflow = n, e.value = !1);
-  };
-  return ot(a), T({
-    get() {
-      return e.value;
-    },
-    set(l) {
-      l ? i() : a();
-    }
-  });
-}
-function Bt() {
-  let o = !1;
-  const t = m(!1);
-  return (e, s) => {
-    if (t.value = s.value, o)
-      return;
-    o = !0;
-    const n = Zt(e, s.value);
-    I(t, (i) => n.value = i);
-  };
-}
-Bt();
-/**
- * @license
- * Copyright 2010-2023 Three.js Authors
- * SPDX-License-Identifier: MIT
- */
-const lt = "155";
-function Q(o, t, e) {
-  return Math.max(t, Math.min(e, o));
-}
-class W {
-  constructor(t = 0, e = 0) {
-    W.prototype.isVector2 = !0, this.x = t, this.y = e;
-  }
-  get width() {
-    return this.x;
-  }
-  set width(t) {
-    this.x = t;
-  }
-  get height() {
-    return this.y;
-  }
-  set height(t) {
-    this.y = t;
-  }
-  set(t, e) {
-    return this.x = t, this.y = e, this;
-  }
-  setScalar(t) {
-    return this.x = t, this.y = t, this;
-  }
-  setX(t) {
-    return this.x = t, this;
-  }
-  setY(t) {
-    return this.y = t, this;
-  }
-  setComponent(t, e) {
-    switch (t) {
-      case 0:
-        this.x = e;
-        break;
-      case 1:
-        this.y = e;
-        break;
-      default:
-        throw new Error("index is out of range: " + t);
-    }
-    return this;
-  }
-  getComponent(t) {
-    switch (t) {
-      case 0:
-        return this.x;
-      case 1:
-        return this.y;
-      default:
-        throw new Error("index is out of range: " + t);
-    }
-  }
-  clone() {
-    return new this.constructor(this.x, this.y);
-  }
-  copy(t) {
-    return this.x = t.x, this.y = t.y, this;
-  }
-  add(t) {
-    return this.x += t.x, this.y += t.y, this;
-  }
-  addScalar(t) {
-    return this.x += t, this.y += t, this;
-  }
-  addVectors(t, e) {
-    return this.x = t.x + e.x, this.y = t.y + e.y, this;
-  }
-  addScaledVector(t, e) {
-    return this.x += t.x * e, this.y += t.y * e, this;
-  }
-  sub(t) {
-    return this.x -= t.x, this.y -= t.y, this;
-  }
-  subScalar(t) {
-    return this.x -= t, this.y -= t, this;
-  }
-  subVectors(t, e) {
-    return this.x = t.x - e.x, this.y = t.y - e.y, this;
-  }
-  multiply(t) {
-    return this.x *= t.x, this.y *= t.y, this;
-  }
-  multiplyScalar(t) {
-    return this.x *= t, this.y *= t, this;
-  }
-  divide(t) {
-    return this.x /= t.x, this.y /= t.y, this;
-  }
-  divideScalar(t) {
-    return this.multiplyScalar(1 / t);
-  }
-  applyMatrix3(t) {
-    const e = this.x, s = this.y, n = t.elements;
-    return this.x = n[0] * e + n[3] * s + n[6], this.y = n[1] * e + n[4] * s + n[7], this;
-  }
-  min(t) {
-    return this.x = Math.min(this.x, t.x), this.y = Math.min(this.y, t.y), this;
-  }
-  max(t) {
-    return this.x = Math.max(this.x, t.x), this.y = Math.max(this.y, t.y), this;
-  }
-  clamp(t, e) {
-    return this.x = Math.max(t.x, Math.min(e.x, this.x)), this.y = Math.max(t.y, Math.min(e.y, this.y)), this;
-  }
-  clampScalar(t, e) {
-    return this.x = Math.max(t, Math.min(e, this.x)), this.y = Math.max(t, Math.min(e, this.y)), this;
-  }
-  clampLength(t, e) {
-    const s = this.length();
-    return this.divideScalar(s || 1).multiplyScalar(Math.max(t, Math.min(e, s)));
-  }
-  floor() {
-    return this.x = Math.floor(this.x), this.y = Math.floor(this.y), this;
-  }
-  ceil() {
-    return this.x = Math.ceil(this.x), this.y = Math.ceil(this.y), this;
-  }
-  round() {
-    return this.x = Math.round(this.x), this.y = Math.round(this.y), this;
-  }
-  roundToZero() {
-    return this.x = this.x < 0 ? Math.ceil(this.x) : Math.floor(this.x), this.y = this.y < 0 ? Math.ceil(this.y) : Math.floor(this.y), this;
-  }
-  negate() {
-    return this.x = -this.x, this.y = -this.y, this;
-  }
-  dot(t) {
-    return this.x * t.x + this.y * t.y;
-  }
-  cross(t) {
-    return this.x * t.y - this.y * t.x;
-  }
-  lengthSq() {
-    return this.x * this.x + this.y * this.y;
-  }
-  length() {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
-  }
-  manhattanLength() {
-    return Math.abs(this.x) + Math.abs(this.y);
-  }
-  normalize() {
-    return this.divideScalar(this.length() || 1);
-  }
-  angle() {
-    return Math.atan2(-this.y, -this.x) + Math.PI;
-  }
-  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(Q(s, -1, 1));
-  }
-  distanceTo(t) {
-    return Math.sqrt(this.distanceToSquared(t));
-  }
-  distanceToSquared(t) {
-    const e = this.x - t.x, s = this.y - t.y;
-    return e * e + s * s;
-  }
-  manhattanDistanceTo(t) {
-    return Math.abs(this.x - t.x) + Math.abs(this.y - t.y);
-  }
-  setLength(t) {
-    return this.normalize().multiplyScalar(t);
-  }
-  lerp(t, e) {
-    return this.x += (t.x - this.x) * e, this.y += (t.y - this.y) * e, this;
-  }
-  lerpVectors(t, e, s) {
-    return this.x = t.x + (e.x - t.x) * s, this.y = t.y + (e.y - t.y) * s, this;
-  }
-  equals(t) {
-    return t.x === this.x && t.y === this.y;
-  }
-  fromArray(t, e = 0) {
-    return this.x = t[e], this.y = t[e + 1], this;
-  }
-  toArray(t = [], e = 0) {
-    return t[e] = this.x, t[e + 1] = this.y, t;
-  }
-  fromBufferAttribute(t, e) {
-    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, 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;
-  }
-  *[Symbol.iterator]() {
-    yield this.x, yield this.y;
-  }
-}
-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], 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] = r;
-      return;
-    }
-    if (l === 1) {
-      t[e + 0] = _, t[e + 1] = u, t[e + 2] = x, t[e + 3] = b;
-      return;
-    }
-    if (r !== b || y !== _ || c !== u || h !== x) {
-      let z = 1 - l;
-      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 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;
+  setup(n, { slots: o }) {
+    const t = v(), e = A(() => n.handle ?? t.value), l = n.storageKey && ve(
+      n.storageKey,
+      T(n.initialValue) || { x: 0, y: 0 },
+      ge ? n.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), u = l || n.initialValue || { x: 0, y: 0 }, p = Y(_e(t, {
+      ...n,
+      handle: e,
+      initialValue: u,
+      onEnd: (f, g) => {
+        var r;
+        (r = n.onEnd) == null || r.call(n, f, g), l && (l.value.x = f.x, l.value.y = f.y);
       }
-    }
-    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], 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;
-  }
-  set x(t) {
-    this._x = t, this._onChangeCallback();
-  }
-  get y() {
-    return this._y;
-  }
-  set y(t) {
-    this._y = t, this._onChangeCallback();
-  }
-  get z() {
-    return this._z;
-  }
-  set z(t) {
-    this._z = t, this._onChangeCallback();
-  }
-  get w() {
-    return this._w;
-  }
-  set w(t) {
-    this._w = t, this._onChangeCallback();
-  }
-  set(t, e, s, n) {
-    return this._x = t, this._y = e, this._z = s, this._w = n, this._onChangeCallback(), this;
-  }
-  clone() {
-    return new this.constructor(this._x, this._y, this._z, this._w);
-  }
-  copy(t) {
-    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), r = l(i / 2), _ = y(s / 2), u = y(n / 2), x = y(i / 2);
-    switch (a) {
-      case "XYZ":
-        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 * 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 * 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 * 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 * 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 * 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);
-    }
-    return e !== !1 && this._onChangeCallback(), this;
-  }
-  setFromAxisAngle(t, e) {
-    const s = e / 2, n = Math.sin(s);
-    return this._x = t.x * n, this._y = t.y * n, this._z = t.z * n, this._w = Math.cos(s), this._onChangeCallback(), this;
-  }
-  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], 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 + 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;
-  }
-  setFromUnitVectors(t, e) {
-    let s = t.dot(e) + 1;
-    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(Q(this.dot(t), -1, 1)));
-  }
-  rotateTowards(t, e) {
-    const s = this.angleTo(t);
-    if (s === 0)
-      return this;
-    const n = Math.min(1, e / s);
-    return this.slerp(t, n), this;
-  }
-  identity() {
-    return this.set(0, 0, 0, 1);
-  }
-  invert() {
-    return this.conjugate();
-  }
-  conjugate() {
-    return this._x *= -1, this._y *= -1, this._z *= -1, this._onChangeCallback(), this;
-  }
-  dot(t) {
-    return this._x * t._x + this._y * t._y + this._z * t._z + this._w * t._w;
-  }
-  lengthSq() {
-    return this._x * this._x + this._y * this._y + this._z * this._z + this._w * this._w;
-  }
-  length() {
-    return Math.sqrt(this._x * this._x + this._y * this._y + this._z * this._z + this._w * this._w);
-  }
-  normalize() {
-    let t = this.length();
-    return t === 0 ? (this._x = 0, this._y = 0, this._z = 0, this._w = 1) : (t = 1 / t, this._x = this._x * t, this._y = this._y * t, this._z = this._z * t, this._w = this._w * t), this._onChangeCallback(), this;
-  }
-  multiply(t) {
-    return this.multiplyQuaternions(this, t);
-  }
-  premultiply(t) {
-    return this.multiplyQuaternions(t, this);
-  }
-  multiplyQuaternions(t, e) {
-    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, a = this._w;
-    let l = a * t._w + s * t._x + n * t._y + i * t._z;
-    if (l < 0 ? (this._w = -t._w, this._x = -t._x, this._y = -t._y, this._z = -t._z, l = -l) : this.copy(t), l >= 1)
-      return this._w = a, this._x = s, this._y = n, this._z = i, this;
-    const y = 1 - l * l;
-    if (y <= Number.EPSILON) {
-      const 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), 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);
-  }
-  random() {
-    const t = Math.random(), e = Math.sqrt(1 - t), s = Math.sqrt(t), n = 2 * Math.PI * Math.random(), i = 2 * Math.PI * Math.random();
-    return this.set(
-      e * Math.cos(n),
-      s * Math.sin(i),
-      s * Math.cos(i),
-      e * Math.sin(n)
-    );
-  }
-  equals(t) {
-    return t._x === this._x && t._y === this._y && t._z === this._z && t._w === this._w;
-  }
-  fromArray(t, e = 0) {
-    return this._x = t[e], this._y = t[e + 1], this._z = t[e + 2], this._w = t[e + 3], this._onChangeCallback(), this;
-  }
-  toArray(t = [], e = 0) {
-    return t[e] = this._x, t[e + 1] = this._y, t[e + 2] = this._z, t[e + 3] = this._w, t;
-  }
-  fromBufferAttribute(t, e) {
-    return this._x = t.getX(e), this._y = t.getY(e), this._z = t.getZ(e), this._w = t.getW(e), this;
-  }
-  toJSON() {
-    return this.toArray();
-  }
-  _onChange(t) {
-    return this._onChangeCallback = t, this;
-  }
-  _onChangeCallback() {
-  }
-  *[Symbol.iterator]() {
-    yield this._x, yield this._y, yield this._z, yield this._w;
-  }
-}
-class E {
-  constructor(t = 0, e = 0, s = 0) {
-    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;
-  }
-  setScalar(t) {
-    return this.x = t, this.y = t, this.z = t, this;
-  }
-  setX(t) {
-    return this.x = t, this;
-  }
-  setY(t) {
-    return this.y = t, this;
-  }
-  setZ(t) {
-    return this.z = t, this;
-  }
-  setComponent(t, e) {
-    switch (t) {
-      case 0:
-        this.x = e;
-        break;
-      case 1:
-        this.y = e;
-        break;
-      case 2:
-        this.z = e;
-        break;
-      default:
-        throw new Error("index is out of range: " + t);
-    }
-    return this;
-  }
-  getComponent(t) {
-    switch (t) {
-      case 0:
-        return this.x;
-      case 1:
-        return this.y;
-      case 2:
-        return this.z;
-      default:
-        throw new Error("index is out of range: " + t);
-    }
-  }
-  clone() {
-    return new this.constructor(this.x, this.y, this.z);
-  }
-  copy(t) {
-    return this.x = t.x, this.y = t.y, this.z = t.z, this;
-  }
-  add(t) {
-    return this.x += t.x, this.y += t.y, this.z += t.z, this;
-  }
-  addScalar(t) {
-    return this.x += t, this.y += t, this.z += t, this;
-  }
-  addVectors(t, e) {
-    return this.x = t.x + e.x, this.y = t.y + e.y, this.z = t.z + e.z, this;
-  }
-  addScaledVector(t, e) {
-    return this.x += t.x * e, this.y += t.y * e, this.z += t.z * e, this;
-  }
-  sub(t) {
-    return this.x -= t.x, this.y -= t.y, this.z -= t.z, this;
-  }
-  subScalar(t) {
-    return this.x -= t, this.y -= t, this.z -= t, this;
-  }
-  subVectors(t, e) {
-    return this.x = t.x - e.x, this.y = t.y - e.y, this.z = t.z - e.z, this;
-  }
-  multiply(t) {
-    return this.x *= t.x, this.y *= t.y, this.z *= t.z, this;
-  }
-  multiplyScalar(t) {
-    return this.x *= t, this.y *= t, this.z *= t, this;
-  }
-  multiplyVectors(t, e) {
-    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(N.setFromEuler(t));
-  }
-  applyAxisAngle(t, e) {
-    return this.applyQuaternion(N.setFromAxisAngle(t, e));
-  }
-  applyMatrix3(t) {
-    const e = this.x, s = this.y, n = this.z, i = t.elements;
-    return this.x = i[0] * e + i[3] * s + i[6] * n, this.y = i[1] * e + i[4] * s + i[7] * n, this.z = i[2] * e + i[5] * s + i[8] * n, this;
-  }
-  applyNormalMatrix(t) {
-    return this.applyMatrix3(t).normalize();
-  }
-  applyMatrix4(t) {
-    const e = this.x, s = this.y, n = this.z, 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, 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);
-  }
-  unproject(t) {
-    return this.applyMatrix4(t.projectionMatrixInverse).applyMatrix4(t.matrixWorld);
-  }
-  transformDirection(t) {
-    const e = this.x, s = this.y, n = this.z, i = t.elements;
-    return this.x = i[0] * e + i[4] * s + i[8] * n, this.y = i[1] * e + i[5] * s + i[9] * n, this.z = i[2] * e + i[6] * s + i[10] * n, this.normalize();
-  }
-  divide(t) {
-    return this.x /= t.x, this.y /= t.y, this.z /= t.z, this;
-  }
-  divideScalar(t) {
-    return this.multiplyScalar(1 / t);
-  }
-  min(t) {
-    return this.x = Math.min(this.x, t.x), this.y = Math.min(this.y, t.y), this.z = Math.min(this.z, t.z), this;
-  }
-  max(t) {
-    return this.x = Math.max(this.x, t.x), this.y = Math.max(this.y, t.y), this.z = Math.max(this.z, t.z), this;
-  }
-  clamp(t, e) {
-    return this.x = Math.max(t.x, Math.min(e.x, this.x)), this.y = Math.max(t.y, Math.min(e.y, this.y)), this.z = Math.max(t.z, Math.min(e.z, this.z)), this;
-  }
-  clampScalar(t, e) {
-    return this.x = Math.max(t, Math.min(e, this.x)), this.y = Math.max(t, Math.min(e, this.y)), this.z = Math.max(t, Math.min(e, this.z)), this;
-  }
-  clampLength(t, e) {
-    const s = this.length();
-    return this.divideScalar(s || 1).multiplyScalar(Math.max(t, Math.min(e, s)));
-  }
-  floor() {
-    return this.x = Math.floor(this.x), this.y = Math.floor(this.y), this.z = Math.floor(this.z), this;
-  }
-  ceil() {
-    return this.x = Math.ceil(this.x), this.y = Math.ceil(this.y), this.z = Math.ceil(this.z), this;
-  }
-  round() {
-    return this.x = Math.round(this.x), this.y = Math.round(this.y), this.z = Math.round(this.z), this;
-  }
-  roundToZero() {
-    return this.x = this.x < 0 ? Math.ceil(this.x) : Math.floor(this.x), this.y = this.y < 0 ? Math.ceil(this.y) : Math.floor(this.y), this.z = this.z < 0 ? Math.ceil(this.z) : Math.floor(this.z), this;
-  }
-  negate() {
-    return this.x = -this.x, this.y = -this.y, this.z = -this.z, this;
-  }
-  dot(t) {
-    return this.x * t.x + this.y * t.y + this.z * t.z;
-  }
-  // TODO lengthSquared?
-  lengthSq() {
-    return this.x * this.x + this.y * this.y + this.z * this.z;
-  }
-  length() {
-    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
-  }
-  manhattanLength() {
-    return Math.abs(this.x) + Math.abs(this.y) + Math.abs(this.z);
-  }
-  normalize() {
-    return this.divideScalar(this.length() || 1);
-  }
-  setLength(t) {
-    return this.normalize().multiplyScalar(t);
-  }
-  lerp(t, e) {
-    return this.x += (t.x - this.x) * e, this.y += (t.y - this.y) * e, this.z += (t.z - this.z) * e, this;
-  }
-  lerpVectors(t, e, s) {
-    return this.x = t.x + (e.x - t.x) * s, this.y = t.y + (e.y - t.y) * s, this.z = t.z + (e.z - t.z) * s, this;
-  }
-  cross(t) {
-    return this.crossVectors(this, t);
-  }
-  crossVectors(t, e) {
-    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();
-    if (e === 0)
-      return this.set(0, 0, 0);
-    const s = t.dot(this) / e;
-    return this.copy(t).multiplyScalar(s);
-  }
-  projectOnPlane(t) {
-    return X.copy(this).projectOnVector(t), this.sub(X);
-  }
-  reflect(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(Q(s, -1, 1));
-  }
-  distanceTo(t) {
-    return Math.sqrt(this.distanceToSquared(t));
-  }
-  distanceToSquared(t) {
-    const e = this.x - t.x, s = this.y - t.y, n = this.z - t.z;
-    return e * e + s * s + n * n;
-  }
-  manhattanDistanceTo(t) {
-    return Math.abs(this.x - t.x) + Math.abs(this.y - t.y) + Math.abs(this.z - t.z);
-  }
-  setFromSpherical(t) {
-    return this.setFromSphericalCoords(t.radius, t.phi, t.theta);
-  }
-  setFromSphericalCoords(t, e, s) {
-    const n = Math.sin(e) * t;
-    return this.x = n * Math.sin(s), this.y = Math.cos(e) * t, this.z = n * Math.cos(s), this;
-  }
-  setFromCylindrical(t) {
-    return this.setFromCylindricalCoords(t.radius, t.theta, t.y);
-  }
-  setFromCylindricalCoords(t, e, s) {
-    return this.x = t * Math.sin(e), this.y = s, this.z = t * Math.cos(e), this;
-  }
-  setFromMatrixPosition(t) {
-    const e = t.elements;
-    return this.x = e[12], this.y = e[13], this.z = e[14], this;
-  }
-  setFromMatrixScale(t) {
-    const e = this.setFromMatrixColumn(t, 0).length(), s = this.setFromMatrixColumn(t, 1).length(), n = this.setFromMatrixColumn(t, 2).length();
-    return this.x = e, this.y = s, this.z = n, this;
-  }
-  setFromMatrixColumn(t, e) {
-    return this.fromArray(t.elements, e * 4);
-  }
-  setFromMatrix3Column(t, e) {
-    return this.fromArray(t.elements, e * 3);
-  }
-  setFromEuler(t) {
-    return this.x = t._x, this.y = t._y, this.z = t._z, this;
-  }
-  setFromColor(t) {
-    return this.x = t.r, this.y = t.g, this.z = t.b, this;
-  }
-  equals(t) {
-    return t.x === this.x && t.y === this.y && t.z === this.z;
-  }
-  fromArray(t, e = 0) {
-    return this.x = t[e], this.y = t[e + 1], this.z = t[e + 2], this;
-  }
-  toArray(t = [], e = 0) {
-    return t[e] = this.x, t[e + 1] = this.y, t[e + 2] = this.z, t;
-  }
-  fromBufferAttribute(t, e) {
-    return this.x = t.getX(e), this.y = t.getY(e), this.z = t.getZ(e), this;
-  }
-  random() {
-    return this.x = Math.random(), this.y = Math.random(), this.z = Math.random(), this;
-  }
-  randomDirection() {
-    const t = (Math.random() - 0.5) * 2, e = Math.random() * Math.PI * 2, s = Math.sqrt(1 - t ** 2);
-    return this.x = s * Math.cos(e), this.y = s * Math.sin(e), this.z = t, this;
-  }
-  *[Symbol.iterator]() {
-    yield this.x, yield this.y, yield this.z;
-  }
-}
-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 Ft = Symbol("CONTROLS_CONTEXT_KEY"), w = tt({});
-function Kt() {
-  return ft(Ft, w), w;
-}
-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 E || n instanceof E || n instanceof Array) && (s = "vector"), !V(e) && e.value ? {
-      ...e,
-      label: e.label || t,
-      value: e.value,
-      type: s,
-      visible: !0
-    } : {
-      label: e.label || t,
-      value: e,
-      type: s,
-      visible: !0
+    }));
+    return () => {
+      if (o.default)
+        return ce(n.as || "div", { ref: t, style: `touch-action:none;${p.style}` }, o.default(p));
     };
-  });
-}
-function Nt() {
-  for (const o in w)
-    delete w[o];
-}
-function Ge(o, t, e) {
-  const s = m();
-  if (typeof o == "string")
-    o === "fpsgraph" ? (w[o] = {
-      label: "fpsgraph",
-      visible: !0,
-      type: "fpsgraph"
-    }, s.value = w[o]) : (w[o] = {
-      label: o,
-      visible: !0,
-      type: "folder",
-      controls: t ? 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: 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 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({
+}), we = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, $e = { class: "text-gray-500 w-1/3" }, Ce = ["value", "min", "max", "step"], ke = /* @__PURE__ */ M({
   __name: "NumberControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    const e = o;
-    function s(h) {
-      const { target: r } = h;
-      t("change", r.valueAsNumber);
+  setup(n, { emit: o }) {
+    const t = n;
+    function e(r) {
+      const { target: s } = r;
+      o("change", s.valueAsNumber);
     }
-    const n = H(), i = m(0), a = m(!1), l = (h) => {
-      i.value = h.clientX, a.value = !0;
-    }, y = () => {
+    const l = j(), u = v(0), a = v(!1), p = (r) => {
+      u.value = r.clientX, a.value = !0;
+    }, f = () => {
       a.value = !1;
-    }, c = (h) => Math.floor(Math.abs(h) / 10);
-    return I(n.x, (h) => {
+    }, g = (r) => Math.floor(Math.abs(r) / 10);
+    return P(l.x, (r) => {
       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;
+        const s = r - u.value, i = g(s);
+        s > 0 ? o("change", t.control.value + 1 + i) : s < 0 && o("change", t.control.value - 1 + i), t.control.min !== void 0 && t.control.value < t.control.min && o("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && o("change", t.control.max), u.value = r;
       }
-    }), (h, r) => (d(), g("div", Gt, [
-      p("label", Jt, C(h.label), 1),
-      p("input", {
-        value: h.control.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 }]),
+    }), (r, s) => (d(), m("div", we, [
+      c("label", $e, k(r.label), 1),
+      c("input", {
+        value: r.control.value,
+        class: I(["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,
-        step: h.control.step,
-        onInput: s,
-        onMousedown: l,
-        onMouseup: y
-      }, null, 42, Ot)
+        min: r.control.min,
+        max: r.control.max,
+        step: r.control.step,
+        onInput: e,
+        onMousedown: p,
+        onMouseup: f
+      }, null, 42, Ce)
     ]));
   }
-}), 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({
+}), Me = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Te = { class: "text-gray-500 w-1/3" }, Ie = ["value"], Se = /* @__PURE__ */ M({
   __name: "TextControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      t("change", s);
+  setup(n, { emit: o }) {
+    function t(e) {
+      const { target: l } = e;
+      o("change", l.value);
     }
-    return (s, n) => (d(), g("div", ee, [
-      p("label", se, C(s.label), 1),
-      p("input", {
-        value: s.control.value,
-        type: "string",
+    return (e, l) => (d(), m("div", Me, [
+      c("label", Te, k(e.label), 1),
+      c("input", {
+        value: e.control.value,
+        type: "text",
         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, ne)
+        onChange: t
+      }, null, 40, Ie)
     ]));
   }
-}), 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({
+}), Ae = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, De = { class: "text-gray-500 w-1/3" }, Ee = ["id", "checked"], Fe = ["for"], Ve = { class: "i-ic:baseline-check text-light" }, ze = /* @__PURE__ */ M({
   __name: "BooleanControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      const { target: n } = s;
-      t("change", n.checked);
+  setup(n, { emit: o }) {
+    function t(e) {
+      const { target: l } = e;
+      o("change", l.checked);
     }
-    return (s, n) => (d(), g("div", oe, [
-      p("label", re, C(s.label), 1),
-      p("input", {
-        id: s.control.label,
-        checked: s.control.value,
+    return (e, l) => (d(), m("div", Ae, [
+      c("label", De, k(e.label), 1),
+      c("input", {
+        id: e.control.label,
+        checked: e.control.value,
         class: "hidden",
         type: "checkbox",
-        onInput: e
-      }, null, 40, ae),
-      p("label", {
-        for: s.control.label,
+        onInput: t
+      }, null, 40, Ee),
+      c("label", {
+        for: e.control.label,
         class: "inline-flex items-center cursor-pointer"
       }, [
-        p("span", {
-          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"])
+        c("span", {
+          class: I([{ "bg-dark-500": e.control.value, "bg-gray-200": !e.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", le, null, 512), [
-            [st, s.control.value]
+          q(c("i", Ve, null, 512), [
+            [J, e.control.value]
           ])
         ], 2)
-      ], 8, he)
+      ], 8, Fe)
     ]));
   }
-}), 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({
+}), Ue = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, Xe = ["value", "min", "max", "step"], Oe = ["value", "min", "max", "step"], Le = /* @__PURE__ */ M({
   __name: "SliderControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    const e = o;
-    function s(r) {
-      const { target: _ } = r;
-      t("change", _.valueAsNumber);
+  setup(n, { emit: o }) {
+    const t = n;
+    function e(s) {
+      const { target: i } = s;
+      o("change", i.valueAsNumber);
     }
-    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 = H(), a = m(0), l = m(!1), y = (r) => {
-      a.value = r.clientX, l.value = !0;
-    }, c = () => {
-      l.value = !1;
-    }, h = (r) => Math.floor(Math.abs(r) / 10);
-    return I(i.x, (r) => {
-      if (l.value) {
-        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;
+    const l = A(() => ({
+      backgroundImage: `linear-gradient(to right, #333 0% ${100 * (t.control.value - (t.control.min || 0)) / ((t.control.max || 100) - (t.control.min || 0))}%, #e2e2e2 0%)`
+    })), u = j(), a = v(0), p = v(!1), f = (s) => {
+      a.value = s.clientX, p.value = !0;
+    }, g = () => {
+      p.value = !1;
+    }, r = (s) => Math.floor(Math.abs(s) / 10);
+    return P(u.x, (s) => {
+      if (p.value) {
+        const i = s - a.value, $ = r(i);
+        i > 0 ? o("change", t.control.value + 1 + $) : i < 0 && o("change", t.control.value - 1 + $), t.control.min !== void 0 && t.control.value < t.control.min && o("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && o("change", t.control.max), a.value = s;
       }
-    }), (r, _) => (d(), g("div", ce, [
-      p("label", {
-        class: $(["text-gray-500 w-1/3", { "flex justify-between items-center": r.control.icon }])
+    }), (s, i) => (d(), m("div", Ue, [
+      c("label", {
+        class: I(["text-gray-500 w-1/3", { "flex justify-between items-center": s.control.icon }])
       }, [
-        zt(C(r.label) + " ", 1),
-        p("i", {
-          class: $(`i-${r.control.icon}`)
+        ue(k(s.label) + " ", 1),
+        c("i", {
+          class: I(`i-${s.control.icon}`)
         }, null, 2)
       ], 2),
-      p("input", {
-        value: r.control.value,
+      c("input", {
+        value: s.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: wt(n.value),
+        style: ie(l.value),
         type: "range",
-        min: r.control.min,
-        max: r.control.max,
-        step: r.control.step,
-        onInput: s
-      }, null, 44, ye),
-      p("input", {
-        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 }]),
+        min: s.control.min,
+        max: s.control.max,
+        step: s.control.step,
+        onInput: e
+      }, null, 44, Xe),
+      c("input", {
+        value: s.control.value,
+        class: I(["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": p.value }]),
         type: "number",
-        min: r.control.min,
-        max: r.control.max,
-        step: r.control.step,
-        onInput: s,
-        onMousedown: y,
-        onMouseup: c
-      }, null, 42, _e)
+        min: s.control.min,
+        max: s.control.max,
+        step: s.control.step,
+        onInput: e,
+        onMousedown: f,
+        onMouseup: g
+      }, null, 42, Oe)
     ]));
   }
 });
-const pe = (o, t) => {
-  const e = o.__vccOpts || o;
-  for (const [s, n] of t)
-    e[s] = n;
-  return e;
-}, 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({
+const Pe = (n, o) => {
+  const t = n.__vccOpts || n;
+  for (const [e, l] of o)
+    t[e] = l;
+  return t;
+}, Ne = /* @__PURE__ */ Pe(Le, [["__scopeId", "data-v-743fd350"]]), We = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Be = { class: "text-gray-500 w-1/3" }, Ke = ["value"], Ye = ["value"], je = /* @__PURE__ */ M({
   __name: "ColorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      const { target: n } = s;
-      t("change", n.value);
+  setup(n, { emit: o }) {
+    function t(e) {
+      const { target: l } = e;
+      o("change", l.value);
     }
-    return (s, n) => (d(), g("div", fe, [
-      p("label", ge, C(s.label), 1),
-      p("input", {
-        value: s.control.value,
+    return (e, l) => (d(), m("div", We, [
+      c("label", Be, k(e.label), 1),
+      c("input", {
+        value: e.control.value,
         type: "color",
-        onInput: e
-      }, null, 40, me),
-      p("input", {
-        value: s.control.value,
+        onInput: t
+      }, null, 40, Ke),
+      c("input", {
+        value: e.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, be)
+        onInput: t
+      }, null, 40, Ye)
     ]));
   }
 });
-function we(o) {
-  return typeof o == "number" ? [o, o, o] : o instanceof E ? [o.x, o.y, o.z] : o;
+function He(n) {
+  if (typeof n == "number")
+    return [n, n, n];
+  if (ne(n)) {
+    const { x: o, y: t, z: e } = n;
+    return [o, t, e];
+  }
+  return n;
 }
-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 = {
+function Re(n) {
+  return n && typeof n.x == "number" && typeof n.y == "number" && typeof n.z > "u";
+}
+function ne(n) {
+  return n && typeof n.x == "number" && typeof n.y == "number" && typeof n.z == "number";
+}
+const Ge = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, qe = { class: "text-gray-500 w-1/3" }, Je = { class: "w-2/3 flex justify-between gap-0.5" }, Qe = {
   key: 0,
-  class: "font-bold px-0.5 py-1 text-0.65rem text-gray-300"
-}, ke = ["value", "onInput", "onMousedown", "onMouseup"], $e = /* @__PURE__ */ S({
+  class: "font-bold px-1 py-1 text-0.65rem text-gray-300"
+}, Ze = ["value", "onInput", "onMousedown", "onMouseup"], en = /* @__PURE__ */ M({
   __name: "VectorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  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 = b, z[_.value ? r.value[a.value] : a.value] = parseInt(f.value, 10), t("change", z);
+  setup(n, { emit: o }) {
+    const t = n, e = j(), l = v(0), u = v(!1), a = v(0), p = (_, h) => {
+      a.value = h, l.value = _.clientX, u.value = !0;
+    }, f = (_, h) => {
+      a.value = h, u.value = !1;
+    }, g = (_) => Math.floor(Math.abs(_) / 10), r = A(() => He(t.control.value)), s = v(["x", "y", "z"]), i = A(() => Re(t.control.value) || ne(t.control.value));
+    function $(_, h) {
+      const { value: x } = t.control, { target: b } = _;
+      a.value = h, x[i.value ? s.value[a.value] : a.value] = parseInt(b.value, 10), o("change", x);
     }
-    return I(s.x, (x) => {
-      if (i.value) {
-        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;
+    return P(e.x, (_) => {
+      if (u.value) {
+        const h = _ - l.value, x = g(h), { value: b } = t.control, w = i.value ? s.value[a.value] : a.value;
+        h > 0 ? b[w] += 0.1 + x : h < 0 && (b[w] -= 0.1 + x), t.control.min !== void 0 && b < t.control.min && (b[w] = t.control.min), t.control.max !== void 0 && b > t.control.max && (b[w] = t.control.max), o("change", b), l.value = _;
       }
-    }), (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,
+    }), (_, h) => (d(), m("div", Ge, [
+      c("label", qe, k(_.label), 1),
+      c("div", Je, [
+        (d(!0), m(S, null, U(r.value, (x, b) => (d(), m("div", {
+          key: _.label + b,
           class: "flex items-center w-1/3 bg-gray-100 rounded"
         }, [
-          r.value[f] && _.value ? (d(), g("span", Se, C(r.value[f]), 1)) : nt("", !0),
-          p("input", {
+          s.value[b] && i.value ? (d(), m("span", Qe, k(s.value[b]), 1)) : L("", !0),
+          c("input", {
             type: "text",
-            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, ke)
+            class: I(["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": u.value }]),
+            value: r.value[b].toFixed(2),
+            onInput: (w) => $(w, b),
+            onMousedown: (w) => p(w, b),
+            onMouseup: (w) => f(w, b)
+          }, null, 42, Ze)
         ]))), 128))
       ])
     ]));
   }
-}), Ee = { class: "mb-4" }, Te = { class: "bg-white rounded-b pt-4" }, Ie = /* @__PURE__ */ S({
-  __name: "Folder",
-  props: {
-    control: {}
-  },
-  setup(o) {
-    function t(n, i) {
-      i.value = n;
-    }
-    const e = m(!1), s = () => {
-      e.value = !e.value;
-    };
-    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: $(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
-        }, null, 2)
-      ]),
-      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", Te, [
-            (d(!0), g(P, null, L(n.control.controls, (a) => (d(), v(ut, {
-              key: a.label,
-              control: a,
-              onChange: (l) => t(l, a)
-            }, null, 8, ["control", "onChange"]))), 128))
-          ], 512), [
-            [st, e.value]
-          ])
-        ]),
-        _: 1
-      })
-    ]));
-  }
-}), 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({
+}), nn = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, tn = { class: "text-gray-500 w-1/3" }, on = { 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" }, ln = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, rn = ["points"], H = 160, W = 40, z = 2, R = 100, G = 20, sn = /* @__PURE__ */ M({
   __name: "FPSGraph",
   props: {
     label: {},
     control: {}
   },
-  setup(o) {
-    const t = $t({ every: J }), e = m(""), s = m([]), n = m(G / A);
-    let i = performance.now();
-    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}`
+  setup(n) {
+    const o = he({ every: R }), t = v(""), e = v([]), l = v(H / z);
+    let u = performance.now();
+    return ye(({ timestamp: a }) => {
+      a - u >= R && (u = a, e.value.push(o.value), e.value.length > l.value && e.value.shift(), t.value = e.value.map(
+        (p, f) => `${f * z},${W + G - z / 2 - p * (W + G - z) / 120}`
       ).join(" "));
-    }), (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: Y,
+    }), (a, p) => (d(), m("div", nn, [
+      c("label", tn, k(a.label), 1),
+      c("div", on, [
+        c("div", ln, k(Math.round(D(o))) + " FPS", 1),
+        (d(), m("svg", {
+          width: H,
+          height: W,
           xmlns: "http://www.w3.org/2000/svg",
           class: "bg-gray-100"
         }, [
-          p("polyline", {
-            points: e.value,
+          c("polyline", {
+            points: t.value,
             fill: "none",
             stroke: "lightgray",
-            "stroke-width": A,
+            "stroke-width": z,
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
-          }, null, 8, De)
+          }, null, 8, rn)
         ]))
       ])
     ]));
   }
-}), 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({
+}), an = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, cn = { class: "text-gray-500 w-1/3" }, un = ["value"], pn = ["value"], dn = /* @__PURE__ */ M({
   __name: "SelectControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      t("change", s.target.value);
+  setup(n, { emit: o }) {
+    function t(e) {
+      o("change", e.target.value);
     }
-    return (s, n) => (d(), g("div", Ve, [
-      p("label", Xe, C(s.label), 1),
-      p("select", {
-        value: s.control.value,
+    return (e, l) => (d(), m("div", an, [
+      c("label", cn, k(e.label), 1),
+      c("select", {
+        value: e.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
+        onChange: t
       }, [
-        (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)
+        (d(!0), m(S, null, U(e.control.options, (u) => (d(), m("option", {
+          key: u.value,
+          value: u.value
+        }, k(u.text), 9, pn))), 128))
+      ], 40, un)
     ]));
   }
-}), ut = /* @__PURE__ */ S({
+}), te = /* @__PURE__ */ M({
   __name: "ControlInput",
   props: {
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      t("change", s);
+  setup(n, { emit: o }) {
+    function t(e) {
+      o("change", e);
     }
-    return (s, n) => s.control.visible ? (d(), g(P, { key: 0 }, [
-      s.control.type === "color" ? (d(), v(ze, {
+    return (e, l) => e.control.visible ? (d(), m(S, { key: 0 }, [
+      e.control.type === "color" ? (d(), C(je, {
         key: 0,
-        label: s.control.label,
-        control: s.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "vector" ? (d(), v($e, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "select" ? (d(), C(dn, {
         key: 1,
-        label: s.control.label,
-        control: s.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "boolean" ? (d(), v(ue, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "vector" ? (d(), C(en, {
         key: 2,
-        label: s.control.label,
-        control: s.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "fpsgraph" ? (d(), v(Le, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "boolean" ? (d(), C(ze, {
         key: 3,
-        label: s.control.label,
-        control: s.control
-      }, null, 8, ["label", "control"])) : s.control.type === "folder" ? (d(), v(Ie, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "fpsgraph" ? (d(), C(sn, {
         key: 4,
-        label: s.control.label,
-        control: s.control
-      }, null, 8, ["label", "control"])) : s.control.type === "number" ? (d(), v(te, {
+        label: e.control.label,
+        control: e.control
+      }, null, 8, ["label", "control"])) : e.control.type === "number" ? (d(), C(ke, {
         key: 5,
-        label: s.control.label,
-        control: s.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "range" ? (d(), v(de, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "range" ? (d(), C(Ne, {
         key: 6,
-        label: s.control.label,
-        control: s.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "select" ? (d(), v(He, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : (d(), C(Se, {
         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
+        label: e.control.label,
+        control: e.control,
+        onChange: t
       }, null, 8, ["label", "control"]))
-    ], 64)) : nt("", !0);
+    ], 64)) : L("", !0);
+  }
+}), fn = { class: "mb-4" }, vn = { class: "bg-white rounded-b pt-4" }, gn = /* @__PURE__ */ M({
+  __name: "Folder",
+  props: {
+    controls: {},
+    label: {}
+  },
+  setup(n) {
+    function o(l, u) {
+      u.value = l;
+    }
+    const t = v(!1), e = () => {
+      t.value = !t.value;
+    };
+    return (l, u) => (d(), m("div", fn, [
+      c("button", {
+        class: "flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs focus:outline-none font-sans cursor-pointer",
+        onClick: e
+      }, [
+        c("span", null, k(l.label), 1),
+        c("i", {
+          class: I(t.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+        }, null, 2)
+      ]),
+      pe(de, {
+        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: Q(() => [
+          q(c("div", vn, [
+            (d(!0), m(S, null, U(l.controls, (a) => (d(), C(te, {
+              key: a.label,
+              control: a,
+              onChange: (p) => o(p, a)
+            }, null, 8, ["control", "onChange"]))), 128))
+          ], 512), [
+            [J, t.value]
+          ])
+        ]),
+        _: 1
+      })
+    ]));
   }
-}), 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), Be = /* @__PURE__ */ p("div", null, null, -1), Ue = [
-  We,
-  Ze,
-  Be
-], Fe = 280, Je = /* @__PURE__ */ S({
+}), hn = Symbol("CONTROLS_CONTEXT_KEY"), oe = "default";
+function yn(n = oe) {
+  return fe(hn, E), E[n];
+}
+const E = Y({}), B = (n) => {
+  const o = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  return typeof n == "boolean" ? "boolean" : typeof n == "number" ? "number" : typeof n == "string" && o.test(n) ? "color" : typeof n == "string" ? "string" : n.isVector3 || n.isVector2 || n.isEuler || n instanceof Array ? "vector" : n.min !== void 0 || n.max !== void 0 || n.step !== void 0 ? "range" : n.options && Array.isArray(n.options) && n.options.every((t) => "text" in t && "value" in t) ? "select" : "unknown";
+}, X = (n, o, t, e) => {
+  const l = {
+    label: v(n),
+    name: v(n),
+    type: v(t),
+    value: v(o),
+    visible: v(!0),
+    [n]: v(o)
+  };
+  return e && (l.folder = v(e)), l;
+}, Mn = (n, o, t) => {
+  const e = [], l = typeof n == "string" ? n : null, u = l ? o : n, a = l && l !== "fpsgraph" ? t : o, p = (a == null ? void 0 : a.uuid) || oe;
+  if (E[p] || (E[p] = Y({})), n === "fpsgraph") {
+    const g = X("fpsgraph", null, "fpsgraph", null);
+    return E[p].fpsgraph = g, e.push(g), e.length === 1 ? e[0] : e;
+  }
+  const f = E[p];
+  for (const g in u) {
+    let r = u[g];
+    if (typeof r == "object" && !O(r) && !Array.isArray(r) && r.value !== void 0) {
+      const i = r, $ = O(i.value) ? i.value : v(i.value), _ = B(i), h = X(g, $, _, l);
+      _ === "select" && (h.options = v(i.options)), _ === "range" && (h.min = v(i.min), h.max = v(i.max), h.step = v(i.step)), f[g] = h, e.push(h);
+      continue;
+    }
+    if (O(r)) {
+      const i = X(g, r, B(r.value), l);
+      f[g] = i, e.push(i);
+      continue;
+    } else if (typeof r == "object" && !Array.isArray(r)) {
+      const i = K(r);
+      i[g] && (r = i[g]);
+    }
+    const s = X(g, r, B(r), l);
+    f[g] = s, e.push(s);
+  }
+  return e.length === 1 ? e[0] : e;
+}, bn = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, mn = /* @__PURE__ */ c("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), _n = /* @__PURE__ */ c("div", null, [
+  /* @__PURE__ */ c("i", { class: "i-ic-baseline-drag-indicator" }),
+  /* @__PURE__ */ c("i", { class: "i-ic-baseline-drag-indicator" }),
+  /* @__PURE__ */ c("i", { class: "i-ic-baseline-drag-indicator" })
+], -1), xn = /* @__PURE__ */ c("div", null, null, -1), wn = [
+  mn,
+  _n,
+  xn
+], $n = 280, Tn = /* @__PURE__ */ M({
   __name: "TresLeches",
-  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;
+  props: {
+    uuid: {}
+  },
+  setup(n) {
+    const o = n, { uuid: t } = K(o), { width: e } = Z(), l = v(null), u = yn(t == null ? void 0 : t.value);
+    function a(f, g) {
+      u[D(f)].value = g;
     }
-    return (i, a) => (d(), v(j(Qt), {
-      "initial-value": { x: j(t) - Fe - 20, y: 10 },
-      class: $(["absolute select-none z-24 w-280px font-sans text-xs", i.$attrs.class]),
-      handle: e.value
+    const p = A(() => {
+      const f = {};
+      for (const g in u) {
+        const r = u[g], s = r.folder || "default";
+        f[s] || (f[s] = []), f[s].push(r);
+      }
+      return f;
+    });
+    return (f, g) => (d(), C(D(xe), {
+      id: D(t),
+      "initial-value": { x: D(e) - $n - 40, y: 10 },
+      class: I(["absolute select-none z-24 w-280px font-sans text-xs", f.$attrs.class]),
+      handle: l.value
     }, {
-      default: it(() => [
-        p("div", Qe, [
-          p("header", {
+      default: Q(() => [
+        c("div", bn, [
+          c("header", {
             ref_key: "handle",
-            ref: e,
+            ref: l,
             class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
-          }, Ue, 512),
-          (d(!0), g(P, null, L(j(s), (l) => (d(), v(ut, {
-            key: l.label,
-            control: l,
-            onChange: (y) => n(y, l)
-          }, null, 8, ["control", "onChange"]))), 128))
+          }, wn, 512),
+          (d(!0), m(S, null, U(p.value, (r, s) => (d(), m(S, { key: s }, [
+            s !== "default" ? (d(), C(gn, {
+              key: 0,
+              label: s,
+              controls: r
+            }, null, 8, ["label", "controls"])) : L("", !0),
+            s === "default" ? (d(!0), m(S, { key: 1 }, U(r, (i) => (d(), C(te, {
+              key: i.label,
+              control: i,
+              onChange: ($) => a(i.label, $)
+            }, null, 8, ["control", "onChange"]))), 128)) : L("", !0)
+          ], 64))), 128))
         ])
       ]),
       _: 1
-    }, 8, ["initial-value", "class", "handle"]));
+    }, 8, ["id", "initial-value", "class", "handle"]));
   }
 });
 export {
-  Je as TresLeches,
-  Ge as useControls
+  Tn as TresLeches,
+  Mn as useControls,
+  yn as useControlsProvider
 };