@tresjs/leches 0.5.0 → 0.7.0

package/dist/tresleches.js

@@ -1,65 +1,65 @@
 /**
  * name: @tresjs/leches
- * version: v0.5.0
+ * version: v0.7.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, getCurrentScope as ne, onScopeDispose as oe, toRef as le, readonly as ae, customRef as se, ref as g, defineComponent as w, computed as I, reactive as H, h as re, watch as T, provide as ue, isReactive as ie, toRefs as ce, onUnmounted as fe, isRef as L, openBlock as f, createElementBlock as d, createElementVNode as u, toDisplayString as m, normalizeClass as M, withDirectives as G, vShow as q, createTextVNode as pe, normalizeStyle as ve, Fragment as E, renderList as A, createCommentVNode as J, createVNode as de, Transition as be, withCtx as Q, createBlock as _ } from "vue";
+import { useStorage as ge, isClient as ye, useDraggable as he, useMouse as R, useFps as _e, useRafFn as me, useWindowSize as we } from "@vueuse/core";
+function Z(t) {
+  return ne() ? (oe(t), !0) : !1;
 }
-function q(o) {
-  return typeof o == "function" ? o() : j(o);
+function P(t) {
+  return typeof t == "function" ? t() : D(t);
 }
-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);
+const O = typeof window < "u", F = () => {
+}, X = /* @__PURE__ */ xe();
+function xe() {
+  var t;
+  return O && ((t = window == null ? void 0 : window.navigator) == null ? void 0 : t.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 $e(...t) {
+  if (t.length !== 1)
+    return le(...t);
+  const o = t[0];
+  return typeof o == "function" ? ae(se(() => ({ get: o, set: F }))) : g(o);
 }
-function jt(o) {
-  var t;
-  const e = q(o);
-  return (t = e == null ? void 0 : e.$el) != null ? t : e;
+function ke(t) {
+  var o;
+  const e = P(t);
+  return (o = e == null ? void 0 : e.$el) != null ? o : e;
 }
-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)))
+const Ce = O ? window : void 0;
+function Me(...t) {
+  let o, e, n, l;
+  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([e, n, l] = t, o = Ce) : [o, e, n, l] = t, !o)
+    return F;
+  Array.isArray(e) || (e = [e]), Array.isArray(n) || (n = [n]);
+  const a = [], s = () => {
+    a.forEach((c) => c()), a.length = 0;
+  }, i = (c, r, v, C) => (c.addEventListener(r, v, C), () => c.removeEventListener(r, v, C)), p = T(
+    () => [ke(o), P(l)],
+    ([c, r]) => {
+      s(), c && a.push(
+        ...e.flatMap((v) => n.map((C) => i(c, v, C, r)))
       );
     },
     { immediate: !0, flush: "post" }
-  ), c = () => {
-    y(), a();
+  ), x = () => {
+    p(), s();
   };
-  return ot(c), c;
+  return Z(x), x;
 }
-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({
+var Se = Object.defineProperty, Ie = Object.defineProperties, Te = Object.getOwnPropertyDescriptors, U = Object.getOwnPropertySymbols, je = Object.prototype.hasOwnProperty, De = Object.prototype.propertyIsEnumerable, W = (t, o, e) => o in t ? Se(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e, Pe = (t, o) => {
+  for (var e in o || (o = {}))
+    je.call(o, e) && W(t, e, o[e]);
+  if (U)
+    for (var e of U(o))
+      De.call(o, e) && W(t, e, o[e]);
+  return t;
+}, Ee = (t, o) => Ie(t, Te(o));
+const Ae = /* @__PURE__ */ w({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -76,1280 +76,601 @@ 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
+  setup(t, { slots: o }) {
+    const e = g(), n = I(() => {
+      var p;
+      return (p = t.handle) != null ? p : e.value;
+    }), l = t.storageKey && ge(
+      t.storageKey,
+      P(t.initialValue) || { x: 0, y: 0 },
+      ye ? t.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), a = l || t.initialValue || { x: 0, y: 0 }, s = (p, x) => {
+      var c;
+      (c = t.onEnd) == null || c.call(t, p, x), l && (l.value.x = p.x, l.value.y = p.y);
+    }, i = H(he(e, Ee(Pe({}, t), {
+      handle: n,
+      initialValue: a,
+      onEnd: s
     })));
     return () => {
-      if (t.default)
-        return dt(o.as || "div", { ref: e, style: `touch-action:none;${l.style}` }, t.default(l));
+      if (o.default)
+        return re(t.as || "div", { ref: e, style: `touch-action:none;${i.style}` }, o.default(i));
     };
   }
 });
-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)
+function N(t) {
+  const o = window.getComputedStyle(t);
+  if (o.overflowX === "scroll" || o.overflowY === "scroll" || o.overflowX === "auto" && t.clientWidth < t.scrollWidth || o.overflowY === "auto" && t.clientHeight < t.scrollHeight)
     return !0;
   {
-    const e = o.parentNode;
-    return !e || e.tagName === "BODY" ? !1 : ht(e);
+    const e = t.parentNode;
+    return !e || e.tagName === "BODY" ? !1 : N(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 Le(t) {
+  const o = t || window.event, e = o.target;
+  return N(e) ? !1 : o.touches.length > 1 ? !0 : (o.preventDefault && o.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");
+function Ve(t, o = !1) {
+  const e = g(o);
+  let n = null, l;
+  T($e(t), (i) => {
+    if (i) {
+      const p = i;
+      l = p.style.overflow, e.value && (p.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
-  const i = () => {
-    const l = q(o);
-    !l || e.value || (U && (s = Pt(
-      l,
+  const a = () => {
+    const i = P(t);
+    !i || e.value || (X && (n = Me(
+      i,
       "touchmove",
-      (y) => {
-        Wt(y);
+      (p) => {
+        Le(p);
       },
       { 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);
+    )), i.style.overflow = "hidden", e.value = !0);
+  }, s = () => {
+    const i = P(t);
+    !i || !e.value || (X && (n == null || n()), i.style.overflow = l, e.value = !1);
   };
-  return ot(a), T({
+  return Z(s), I({
     get() {
       return e.value;
     },
-    set(l) {
-      l ? i() : a();
+    set(i) {
+      i ? a() : s();
     }
   });
 }
-function Bt() {
-  let o = !1;
-  const t = m(!1);
-  return (e, s) => {
-    if (t.value = s.value, o)
+function ze() {
+  let t = !1;
+  const o = g(!1);
+  return (e, n) => {
+    if (o.value = n.value, t)
       return;
-    o = !0;
-    const n = Zt(e, s.value);
-    I(t, (i) => n.value = i);
+    t = !0;
+    const l = Ve(e, n.value);
+    T(o, (a) => l.value = a);
   };
 }
-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;
-  }
+ze();
+const Re = Symbol("CONTROLS_CONTEXT_KEY"), y = H({});
+function Xe() {
+  return ue(Re, y), 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;
-      }
-    }
-    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 ? {
+function V(t) {
+  return Object.entries(t).map(([o, e]) => {
+    let n = "string", l;
+    const a = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return !L(e) && e.value || L(e) ? (n = typeof e.value, l = e.value) : (n = typeof e, l = e), n === "number" && (e.step || e.max || e.min) && (n = "range"), n === "string" && a.test(l) && (n = "color"), (l.isVector3 || l instanceof Array) && (n = "vector"), !L(e) && e.value ? {
       ...e,
-      label: e.label || t,
+      label: e.label || o,
       value: e.value,
-      type: s,
+      type: n,
       visible: !0
     } : {
-      label: e.label || t,
+      label: e.label || o,
       value: e,
-      type: s,
+      type: n,
       visible: !0
     };
   });
 }
-function Nt() {
-  for (const o in w)
-    delete w[o];
+function Ue() {
+  for (const t in y)
+    delete y[t];
 }
-function Ge(o, t, e) {
-  const s = m();
-  if (typeof o == "string")
-    o === "fpsgraph" ? (w[o] = {
+function Bt(t, o, e) {
+  const n = g();
+  if (typeof t == "string")
+    t === "fpsgraph" ? (y[t] = {
       label: "fpsgraph",
       visible: !0,
       type: "fpsgraph"
-    }, s.value = w[o]) : (w[o] = {
-      label: o,
+    }, n.value = y[t]) : (y[t] = {
+      label: t,
       visible: !0,
       type: "folder",
-      controls: R(t)
-    }, s.value = w[o]);
-  else if (typeof o == "object" && o.options)
-    w[o.label || "Dropdown"] = {
+      controls: o ? V(o) : []
+    }, n.value = y[t]);
+  else if (typeof t == "object" && t.options)
+    y[t.label || "Dropdown"] = {
       ...e,
-      label: o.label || "Dropdown",
+      label: t.label || "Dropdown",
       visible: !0,
-      value: o.value,
+      value: t.value,
       type: "select",
-      ref: o,
-      options: o.options
-    }, s.value = w[o.label || "Dropdown"];
-  else if (typeof o == "object" && typeof t == "string")
-    w[t] = {
+      ref: t,
+      options: t.options
+    }, n.value = y[t.label || "Dropdown"];
+  else if (typeof t == "object" && typeof o == "string")
+    y[o] = {
       ...e,
-      label: t,
+      label: o,
       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;
+      value: t[o],
+      type: typeof t[o],
+      ref: t
+    }, n.value = y[o];
+  else if (ie(t)) {
+    const l = ce(t), a = V(l);
+    for (const s of a)
+      y[s.label] = s;
+    n.value = a;
   } else {
-    const n = R(o);
-    for (const i of n)
-      w[i.label] = i;
-    s.value = n;
+    const l = V(t);
+    for (const a of l)
+      y[a.label] = a;
+    n.value = l;
   }
-  return bt(Nt), s;
+  return fe(Ue), n;
 }
-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({
+const We = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Be = { class: "text-gray-500 w-1/3" }, Ke = ["value", "min", "max", "step"], Ye = /* @__PURE__ */ w({
   __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(t, { emit: o }) {
+    const e = t;
+    function n(c) {
+      const { target: r } = c;
+      o("change", r.valueAsNumber);
     }
-    const n = H(), i = m(0), a = m(!1), l = (h) => {
-      i.value = h.clientX, a.value = !0;
-    }, y = () => {
-      a.value = !1;
-    }, c = (h) => Math.floor(Math.abs(h) / 10);
-    return I(n.x, (h) => {
-      if (a.value) {
-        const 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 l = R(), a = g(0), s = g(!1), i = (c) => {
+      a.value = c.clientX, s.value = !0;
+    }, p = () => {
+      s.value = !1;
+    }, x = (c) => Math.floor(Math.abs(c) / 10);
+    return T(l.x, (c) => {
+      if (s.value) {
+        const r = c - a.value, v = x(r);
+        r > 0 ? o("change", e.control.value + 1 + v) : r < 0 && o("change", e.control.value - 1 + v), e.control.min !== void 0 && e.control.value < e.control.min && o("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && o("change", e.control.max), a.value = c;
       }
-    }), (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 }]),
+    }), (c, r) => (f(), d("div", We, [
+      u("label", Be, m(c.label), 1),
+      u("input", {
+        value: c.control.value,
+        class: M(["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": s.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: c.control.min,
+        max: c.control.max,
+        step: c.control.step,
+        onInput: n,
+        onMousedown: i,
+        onMouseup: p
+      }, null, 42, Ke)
     ]));
   }
-}), 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({
+}), He = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Ge = { class: "text-gray-500 w-1/3" }, qe = ["value"], Je = /* @__PURE__ */ w({
   __name: "TextControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      t("change", s);
+  setup(t, { emit: o }) {
+    function e(n) {
+      o("change", n);
     }
-    return (s, n) => (d(), g("div", ee, [
-      p("label", se, C(s.label), 1),
-      p("input", {
-        value: s.control.value,
+    return (n, l) => (f(), d("div", He, [
+      u("label", Ge, m(n.label), 1),
+      u("input", {
+        value: n.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, ne)
+      }, null, 40, qe)
     ]));
   }
-}), 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({
+}), Qe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Ze = { class: "text-gray-500 w-1/3" }, Oe = ["id", "checked"], Fe = ["for"], Ne = { class: "i-ic:baseline-check text-light" }, et = /* @__PURE__ */ w({
   __name: "BooleanControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      const { target: n } = s;
-      t("change", n.checked);
+  setup(t, { emit: o }) {
+    function e(n) {
+      const { target: l } = n;
+      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 (n, l) => (f(), d("div", Qe, [
+      u("label", Ze, m(n.label), 1),
+      u("input", {
+        id: n.control.label,
+        checked: n.control.value,
         class: "hidden",
         type: "checkbox",
         onInput: e
-      }, null, 40, ae),
-      p("label", {
-        for: s.control.label,
+      }, null, 40, Oe),
+      u("label", {
+        for: n.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"])
+        u("span", {
+          class: M([{ "bg-dark-500": n.control.value, "bg-gray-200": !n.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])
         }, [
-          et(p("i", le, null, 512), [
-            [st, s.control.value]
+          G(u("i", Ne, null, 512), [
+            [q, n.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({
+}), tt = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, nt = ["value", "min", "max", "step"], ot = ["value", "min", "max", "step"], lt = /* @__PURE__ */ w({
   __name: "SliderControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    const e = o;
-    function s(r) {
-      const { target: _ } = r;
-      t("change", _.valueAsNumber);
+  setup(t, { emit: o }) {
+    const e = t;
+    function n(r) {
+      const { target: v } = r;
+      o("change", v.valueAsNumber);
     }
-    const n = T(() => ({
+    const l = I(() => ({
       backgroundImage: `linear-gradient(to right, #333 0% ${100 * (e.control.value - (e.control.min || 0)) / ((e.control.max || 100) - (e.control.min || 0))}%, #e2e2e2 0%)`
-    })), 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;
+    })), a = R(), s = g(0), i = g(!1), p = (r) => {
+      s.value = r.clientX, i.value = !0;
+    }, x = () => {
+      i.value = !1;
+    }, c = (r) => Math.floor(Math.abs(r) / 10);
+    return T(a.x, (r) => {
+      if (i.value) {
+        const v = r - s.value, C = c(v);
+        v > 0 ? o("change", e.control.value + 1 + C) : v < 0 && o("change", e.control.value - 1 + C), e.control.min !== void 0 && e.control.value < e.control.min && o("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && o("change", e.control.max), s.value = r;
       }
-    }), (r, _) => (d(), g("div", ce, [
-      p("label", {
-        class: $(["text-gray-500 w-1/3", { "flex justify-between items-center": r.control.icon }])
+    }), (r, v) => (f(), d("div", tt, [
+      u("label", {
+        class: M(["text-gray-500 w-1/3", { "flex justify-between items-center": r.control.icon }])
       }, [
-        zt(C(r.label) + " ", 1),
-        p("i", {
-          class: $(`i-${r.control.icon}`)
+        pe(m(r.label) + " ", 1),
+        u("i", {
+          class: M(`i-${r.control.icon}`)
         }, null, 2)
       ], 2),
-      p("input", {
+      u("input", {
         value: r.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: wt(n.value),
+        style: ve(l.value),
         type: "range",
         min: r.control.min,
         max: r.control.max,
         step: r.control.step,
-        onInput: s
-      }, null, 44, ye),
-      p("input", {
+        onInput: n
+      }, null, 44, nt),
+      u("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 }]),
+        class: M(["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": i.value }]),
         type: "number",
         min: r.control.min,
         max: r.control.max,
         step: r.control.step,
-        onInput: s,
-        onMousedown: y,
-        onMouseup: c
-      }, null, 42, _e)
+        onInput: n,
+        onMousedown: p,
+        onMouseup: x
+      }, null, 42, ot)
     ]));
   }
 });
-const pe = (o, t) => {
-  const e = o.__vccOpts || o;
-  for (const [s, n] of t)
-    e[s] = n;
+const at = (t, o) => {
+  const e = t.__vccOpts || t;
+  for (const [n, l] of o)
+    e[n] = l;
   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({
+}, st = /* @__PURE__ */ at(lt, [["__scopeId", "data-v-743fd350"]]), rt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, ut = { class: "text-gray-500 w-1/3" }, it = ["value"], ct = ["value"], ft = /* @__PURE__ */ w({
   __name: "ColorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      const { target: n } = s;
-      t("change", n.value);
+  setup(t, { emit: o }) {
+    function e(n) {
+      const { target: l } = n;
+      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 (n, l) => (f(), d("div", rt, [
+      u("label", ut, m(n.label), 1),
+      u("input", {
+        value: n.control.value,
         type: "color",
         onInput: e
-      }, null, 40, me),
-      p("input", {
-        value: s.control.value,
+      }, null, 40, it),
+      u("input", {
+        value: n.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)
+      }, null, 40, ct)
     ]));
   }
 });
-function we(o) {
-  return typeof o == "number" ? [o, o, o] : o instanceof E ? [o.x, o.y, o.z] : o;
+function pt(t) {
+  if (typeof t == "number")
+    return [t, t, t];
+  if (ee(t)) {
+    const { x: o, y: e, z: n } = t;
+    return [o, e, n];
+  }
+  return t;
+}
+function vt(t) {
+  return t && typeof t.x == "number" && typeof t.y == "number" && typeof t.z > "u";
+}
+function ee(t) {
+  return t && typeof t.x == "number" && typeof t.y == "number" && typeof t.z == "number";
 }
-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 = {
+const dt = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, bt = { class: "text-gray-500 w-1/3" }, gt = { class: "w-2/3 flex justify-between gap-1" }, yt = {
   key: 0,
   class: "font-bold px-0.5 py-1 text-0.65rem text-gray-300"
-}, ke = ["value", "onInput", "onMousedown", "onMouseup"], $e = /* @__PURE__ */ S({
+}, ht = ["value", "onInput", "onMousedown", "onMouseup"], _t = /* @__PURE__ */ w({
   __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(t, { emit: o }) {
+    const e = t, n = R(), l = g(0), a = g(!1), s = g(0), i = (h, $) => {
+      s.value = $, l.value = h.clientX, a.value = !0;
+    }, p = (h, $) => {
+      s.value = $, a.value = !1;
+    }, x = (h) => Math.floor(Math.abs(h) / 10), c = I(() => pt(e.control.value)), r = I(() => Object.keys(e.control.value)), v = I(() => vt(e.control.value) || ee(e.control.value));
+    function C(h, $) {
+      const { value: S } = e.control, { target: b } = h;
+      s.value = $, S[v.value ? r.value[s.value] : s.value] = parseInt(b.value, 10), o("change", S);
     }
-    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 T(n.x, (h) => {
+      if (a.value) {
+        const $ = h - l.value, S = x($), { value: b } = e.control, k = v.value ? r.value[s.value] : s.value;
+        $ > 0 ? b[k] += 1 + S : $ < 0 && (b[k] -= 1 + S), e.control.min !== void 0 && b < e.control.min && (b[k] = e.control.min), e.control.max !== void 0 && b > e.control.max && (b[k] = e.control.max), o("change", b), l.value = h;
       }
-    }), (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, $) => (f(), d("div", dt, [
+      u("label", bt, m(h.label), 1),
+      u("div", gt, [
+        (f(!0), d(E, null, A(c.value, (S, b) => (f(), d("div", {
+          key: h.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", {
+          r.value[b] && v.value ? (f(), d("span", yt, m(r.value[b]), 1)) : J("", !0),
+          u("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: M(["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": a.value }]),
+            value: c.value[b].toFixed(2),
+            onInput: (k) => C(k, b),
+            onMousedown: (k) => i(k, b),
+            onMouseup: (k) => p(k, b)
+          }, null, 42, ht)
         ]))), 128))
       ])
     ]));
   }
-}), Ee = { class: "mb-4" }, Te = { class: "bg-white rounded-b pt-4" }, Ie = /* @__PURE__ */ S({
+}), mt = { class: "mb-4" }, wt = { class: "bg-white rounded-b pt-4" }, xt = /* @__PURE__ */ w({
   __name: "Folder",
   props: {
     control: {}
   },
-  setup(o) {
-    function t(n, i) {
-      i.value = n;
+  setup(t) {
+    function o(l, a) {
+      a.value = l;
     }
-    const e = m(!1), s = () => {
+    const e = g(!1), n = () => {
       e.value = !e.value;
     };
-    return (n, i) => (d(), g("div", Ee, [
-      p("button", {
+    return (l, a) => (f(), d("div", mt, [
+      u("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
+        onClick: n
       }, [
-        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")
+        u("span", null, m(l.control.label), 1),
+        u("i", {
+          class: M(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
         }, null, 2)
       ]),
-      Mt(vt, {
+      de(be, {
         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)
+        default: Q(() => [
+          G(u("div", wt, [
+            (f(!0), d(E, null, A(l.control.controls, (s) => (f(), _(te, {
+              key: s.label,
+              control: s,
+              onChange: (i) => o(i, s)
             }, null, 8, ["control", "onChange"]))), 128))
           ], 512), [
-            [st, e.value]
+            [q, 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({
+}), $t = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, kt = { class: "text-gray-500 w-1/3" }, Ct = { 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" }, Mt = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, St = ["points"], B = 160, z = 40, j = 2, K = 100, Y = 20, It = /* @__PURE__ */ w({
   __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(t) {
+    const o = _e({ every: K }), e = g(""), n = g([]), l = g(B / j);
+    let a = performance.now();
+    return me(({ timestamp: s }) => {
+      s - a >= K && (a = s, n.value.push(o.value), n.value.length > l.value && n.value.shift(), e.value = n.value.map(
+        (i, p) => `${p * j},${z + Y - j / 2 - i * (z + Y - j) / 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,
+    }), (s, i) => (f(), d("div", $t, [
+      u("label", kt, m(s.label), 1),
+      u("div", Ct, [
+        u("div", Mt, m(Math.round(D(o))) + " FPS", 1),
+        (f(), d("svg", {
+          width: B,
+          height: z,
           xmlns: "http://www.w3.org/2000/svg",
           class: "bg-gray-100"
         }, [
-          p("polyline", {
+          u("polyline", {
             points: e.value,
             fill: "none",
             stroke: "lightgray",
-            "stroke-width": A,
+            "stroke-width": j,
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
-          }, null, 8, De)
+          }, null, 8, St)
         ]))
       ])
     ]));
   }
-}), 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({
+}), Tt = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, jt = { class: "text-gray-500 w-1/3" }, Dt = ["value"], Pt = ["value"], Et = /* @__PURE__ */ w({
   __name: "SelectControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      t("change", s.target.value);
+  setup(t, { emit: o }) {
+    function e(n) {
+      o("change", n.target.value);
     }
-    return (s, n) => (d(), g("div", Ve, [
-      p("label", Xe, C(s.label), 1),
-      p("select", {
-        value: s.control.value,
+    return (n, l) => (f(), d("div", Tt, [
+      u("label", jt, m(n.label), 1),
+      u("select", {
+        value: n.control.value,
         class: "p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",
         onChange: e
       }, [
-        (d(!0), g(P, null, L(s.control.options, (i) => (d(), g("option", {
-          key: i.value,
-          value: i.value
-        }, C(i.text), 9, Ye))), 128))
-      ], 40, Re)
+        (f(!0), d(E, null, A(n.control.options, (a) => (f(), d("option", {
+          key: a.value,
+          value: a.value
+        }, m(a.text), 9, Pt))), 128))
+      ], 40, Dt)
     ]));
   }
-}), ut = /* @__PURE__ */ S({
+}), te = /* @__PURE__ */ w({
   __name: "ControlInput",
   props: {
     control: {}
   },
   emits: ["change"],
-  setup(o, { emit: t }) {
-    function e(s) {
-      t("change", s);
+  setup(t, { emit: o }) {
+    function e(n) {
+      o("change", n);
     }
-    return (s, n) => s.control.visible ? (d(), g(P, { key: 0 }, [
-      s.control.type === "color" ? (d(), v(ze, {
+    return (n, l) => n.control.visible ? (f(), d(E, { key: 0 }, [
+      n.control.type === "color" ? (f(), _(ft, {
         key: 0,
-        label: s.control.label,
-        control: s.control,
+        label: n.control.label,
+        control: n.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "vector" ? (d(), v($e, {
+      }, null, 8, ["label", "control"])) : n.control.type === "vector" ? (f(), _(_t, {
         key: 1,
-        label: s.control.label,
-        control: s.control,
+        label: n.control.label,
+        control: n.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "boolean" ? (d(), v(ue, {
+      }, null, 8, ["label", "control"])) : n.control.type === "boolean" ? (f(), _(et, {
         key: 2,
-        label: s.control.label,
-        control: s.control,
+        label: n.control.label,
+        control: n.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "fpsgraph" ? (d(), v(Le, {
+      }, null, 8, ["label", "control"])) : n.control.type === "fpsgraph" ? (f(), _(It, {
         key: 3,
-        label: s.control.label,
-        control: s.control
-      }, null, 8, ["label", "control"])) : s.control.type === "folder" ? (d(), v(Ie, {
+        label: n.control.label,
+        control: n.control
+      }, null, 8, ["label", "control"])) : n.control.type === "folder" ? (f(), _(xt, {
         key: 4,
-        label: s.control.label,
-        control: s.control
-      }, null, 8, ["label", "control"])) : s.control.type === "number" ? (d(), v(te, {
+        label: n.control.label,
+        control: n.control
+      }, null, 8, ["label", "control"])) : n.control.type === "number" ? (f(), _(Ye, {
         key: 5,
-        label: s.control.label,
-        control: s.control,
+        label: n.control.label,
+        control: n.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "range" ? (d(), v(de, {
+      }, null, 8, ["label", "control"])) : n.control.type === "range" ? (f(), _(st, {
         key: 6,
-        label: s.control.label,
-        control: s.control,
+        label: n.control.label,
+        control: n.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "select" ? (d(), v(He, {
+      }, null, 8, ["label", "control"])) : n.control.type === "select" ? (f(), _(Et, {
         key: 7,
-        label: s.control.label,
-        control: s.control,
+        label: n.control.label,
+        control: n.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : (d(), v(ie, {
+      }, null, 8, ["label", "control"])) : (f(), _(Je, {
         key: 8,
-        label: s.control.label,
-        control: s.control,
+        label: n.control.label,
+        control: n.control,
         onChange: e
       }, null, 8, ["label", "control"]))
-    ], 64)) : nt("", !0);
-  }
-}), 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({
+    ], 64)) : J("", !0);
+  }
+}), At = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, Lt = /* @__PURE__ */ u("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), Vt = /* @__PURE__ */ u("div", null, [
+  /* @__PURE__ */ u("i", { class: "i-ic-baseline-drag-indicator" }),
+  /* @__PURE__ */ u("i", { class: "i-ic-baseline-drag-indicator" }),
+  /* @__PURE__ */ u("i", { class: "i-ic-baseline-drag-indicator" })
+], -1), zt = /* @__PURE__ */ u("div", null, null, -1), Rt = [
+  Lt,
+  Vt,
+  zt
+], Xt = 280, Kt = /* @__PURE__ */ w({
   __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;
+  setup(t) {
+    const { width: o } = we(), e = g(null), n = Xe();
+    function l(a, s) {
+      s.ref && (s.ref[s.label] = a), s.value = a;
     }
-    return (i, a) => (d(), v(j(Qt), {
-      "initial-value": { x: j(t) - Fe - 20, y: 10 },
-      class: "fixed select-none z-24 w-280px font-sans text-xs",
+    return (a, s) => (f(), _(D(Ae), {
+      "initial-value": { x: D(o) - Xt - 20, y: 10 },
+      class: M(["absolute select-none z-24 w-280px font-sans text-xs", a.$attrs.class]),
       handle: e.value
     }, {
-      default: it(() => [
-        p("div", Qe, [
-          p("header", {
+      default: Q(() => [
+        u("div", At, [
+          u("header", {
             ref_key: "handle",
             ref: e,
             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)
+          }, Rt, 512),
+          (f(!0), d(E, null, A(D(n), (i) => (f(), _(te, {
+            key: i.label,
+            control: i,
+            onChange: (p) => l(p, i)
           }, null, 8, ["control", "onChange"]))), 128))
         ])
       ]),
       _: 1
-    }, 8, ["initial-value", "handle"]));
+    }, 8, ["initial-value", "class", "handle"]));
   }
 });
 export {
-  Je as TresLeches,
-  Ge as useControls
+  Kt as TresLeches,
+  Bt as useControls
 };