@tresjs/leches 0.4.0 → 0.6.0

package/dist/tresleches.js

@@ -1,20 +1,20 @@
 /**
  * name: @tresjs/leches
- * version: v0.4.0
+ * version: v0.6.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 C, computed as E, reactive as tt, h as dt, watch as I, provide as ft, isReactive as gt, toRefs as mt, onUnmounted as bt, isRef as V, openBlock as d, createElementBlock as g, createElementVNode as p, toDisplayString as v, normalizeClass as k, withDirectives as et, vShow as st, createTextVNode as zt, normalizeStyle as Mt, Fragment as P, renderList as L, createCommentVNode as nt, createVNode as wt, Transition as vt, withCtx as it, createBlock as w } from "vue";
-import { useStorage as Ct, isClient as St, useDraggable as kt, useMouse as F, useFps as $t, useRafFn as Et, useWindowSize as Tt } from "@vueuse/core";
+import { unref as j, getCurrentScope as ct, onScopeDispose as yt, toRef as _t, readonly as xt, customRef as pt, ref as m, defineComponent as S, computed as T, reactive as tt, h as dt, watch as I, provide as ft, isReactive as gt, toRefs as mt, onUnmounted as bt, isRef as V, openBlock as d, createElementBlock as g, createElementVNode as p, toDisplayString as C, normalizeClass as $, withDirectives as et, vShow as st, createTextVNode as zt, normalizeStyle as wt, Fragment as P, renderList as L, createCommentVNode as nt, createVNode as Mt, Transition as vt, withCtx as it, createBlock as v } from "vue";
+import { useStorage as Ct, isClient as St, useDraggable as kt, useMouse as H, useFps as $t, useRafFn as Et, useWindowSize as Tt } from "@vueuse/core";
 function ot(o) {
   return ct() ? (yt(o), !0) : !1;
 }
 function q(o) {
   return typeof o == "function" ? o() : j(o);
 }
-const rt = typeof window < "u", ht = () => {
-}, N = /* @__PURE__ */ It();
+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);
@@ -23,7 +23,7 @@ function At(...o) {
   if (o.length !== 1)
     return _t(...o);
   const t = o[0];
-  return typeof t == "function" ? xt(pt(() => ({ get: t, set: ht }))) : m(t);
+  return typeof t == "function" ? xt(pt(() => ({ get: t, set: at }))) : m(t);
 }
 function jt(o) {
   var t;
@@ -34,7 +34,7 @@ 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 ht;
+    return at;
   Array.isArray(e) || (e = [e]), Array.isArray(s) || (s = [s]);
   const i = [], a = () => {
     i.forEach((h) => h()), i.length = 0;
@@ -51,15 +51,15 @@ function Pt(...o) {
   };
   return ot(c), c;
 }
-var Dt = Object.defineProperty, Lt = Object.defineProperties, Vt = Object.getOwnPropertyDescriptors, B = Object.getOwnPropertySymbols, Xt = Object.prototype.hasOwnProperty, Rt = Object.prototype.propertyIsEnumerable, U = (o, t, e) => t in o ? Dt(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, Yt = (o, t) => {
+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) && U(o, e, t[e]);
-  if (B)
-    for (var e of B(t))
-      Rt.call(t, e) && U(o, e, t[e]);
+    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;
-}, Ft = (o, t) => Lt(o, Vt(t));
-const Ht = /* @__PURE__ */ C({
+}, Ht = (o, t) => Lt(o, Vt(t));
+const Qt = /* @__PURE__ */ S({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -77,7 +77,7 @@ const Ht = /* @__PURE__ */ C({
     "onEnd"
   ],
   setup(o, { slots: t }) {
-    const e = m(), s = E(() => {
+    const e = m(), s = T(() => {
       var y;
       return (y = o.handle) != null ? y : e.value;
     }), n = o.storageKey && Ct(
@@ -87,7 +87,7 @@ const Ht = /* @__PURE__ */ C({
     ), i = n || o.initialValue || { x: 0, y: 0 }, a = (y, c) => {
       var h;
       (h = o.onEnd) == null || h.call(o, y, c), n && (n.value.x = y.x, n.value.y = y.y);
-    }, l = tt(kt(e, Ft(Yt({}, o), {
+    }, l = tt(kt(e, Ht(Yt({}, o), {
       handle: s,
       initialValue: i,
       onEnd: a
@@ -98,20 +98,20 @@ const Ht = /* @__PURE__ */ C({
     };
   }
 });
-function at(o) {
+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 : at(e);
+    return !e || e.tagName === "BODY" ? !1 : ht(e);
   }
 }
-function Qt(o) {
+function Wt(o) {
   const t = o || window.event, e = t.target;
-  return at(e) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+  return ht(e) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }
-function Wt(o, t = !1) {
+function Zt(o, t = !1) {
   const e = m(t);
   let s = null, n;
   I(At(o), (l) => {
@@ -124,19 +124,19 @@ function Wt(o, t = !1) {
   });
   const i = () => {
     const l = q(o);
-    !l || e.value || (N && (s = Pt(
+    !l || e.value || (U && (s = Pt(
       l,
       "touchmove",
       (y) => {
-        Qt(y);
+        Wt(y);
       },
       { passive: !1 }
     )), l.style.overflow = "hidden", e.value = !0);
   }, a = () => {
     const l = q(o);
-    !l || !e.value || (N && (s == null || s()), l.style.overflow = n, e.value = !1);
+    !l || !e.value || (U && (s == null || s()), l.style.overflow = n, e.value = !1);
   };
-  return ot(a), E({
+  return ot(a), T({
     get() {
       return e.value;
     },
@@ -145,30 +145,30 @@ function Wt(o, t = !1) {
     }
   });
 }
-function Zt() {
+function Bt() {
   let o = !1;
   const t = m(!1);
   return (e, s) => {
     if (t.value = s.value, o)
       return;
     o = !0;
-    const n = Wt(e, s.value);
+    const n = Zt(e, s.value);
     I(t, (i) => n.value = i);
   };
 }
-Zt();
+Bt();
 /**
  * @license
  * Copyright 2010-2023 Three.js Authors
  * SPDX-License-Identifier: MIT
  */
-const lt = "153";
-function H(o, t, e) {
+const lt = "155";
+function Q(o, t, e) {
   return Math.max(t, Math.min(e, o));
 }
-class Q {
+class W {
   constructor(t = 0, e = 0) {
-    Q.prototype.isVector2 = !0, this.x = t, this.y = e;
+    W.prototype.isVector2 = !0, this.x = t, this.y = e;
   }
   get width() {
     return this.x;
@@ -317,7 +317,7 @@ class Q {
     if (e === 0)
       return Math.PI / 2;
     const s = this.dot(t) / e;
-    return Math.acos(H(s, -1, 1));
+    return Math.acos(Q(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -361,7 +361,7 @@ class Q {
     yield this.x, yield this.y;
   }
 }
-class Nt {
+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;
   }
@@ -378,15 +378,15 @@ class Nt {
     }
     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, W = 1 - f * f;
-      if (W > Number.EPSILON) {
-        const S = Math.sqrt(W), Z = Math.atan2(S, f * M);
-        z = Math.sin(z * Z) / S, l = Math.sin(l * Z) / S;
+      const 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 S = 1 / Math.sqrt(y * y + c * c + h * h + r * r);
-        y *= S, c *= S, h *= S, r *= S;
+        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;
@@ -480,7 +480,7 @@ class Nt {
     return s < Number.EPSILON ? (s = 0, Math.abs(t.x) > Math.abs(t.z) ? (this._x = -t.y, this._y = t.x, this._z = 0, this._w = s) : (this._x = 0, this._y = -t.z, this._z = t.y, this._w = s)) : (this._x = t.y * e.z - t.z * e.y, this._y = t.z * e.x - t.x * e.z, this._z = t.x * e.y - t.y * e.x, this._w = s), this.normalize();
   }
   angleTo(t) {
-    return 2 * Math.acos(Math.abs(H(this.dot(t), -1, 1)));
+    return 2 * Math.acos(Math.abs(Q(this.dot(t), -1, 1)));
   }
   rotateTowards(t, e) {
     const s = this.angleTo(t);
@@ -574,9 +574,9 @@ class Nt {
     yield this._x, yield this._y, yield this._z, yield this._w;
   }
 }
-class $ {
+class E {
   constructor(t = 0, e = 0, s = 0) {
-    $.prototype.isVector3 = !0, this.x = t, this.y = e, this.z = s;
+    E.prototype.isVector3 = !0, this.x = t, this.y = e, this.z = s;
   }
   set(t, e, s) {
     return s === void 0 && (s = this.z), this.x = t, this.y = e, this.z = s, this;
@@ -658,10 +658,10 @@ class $ {
     return this.x = t.x * e.x, this.y = t.y * e.y, this.z = t.z * e.z, this;
   }
   applyEuler(t) {
-    return this.applyQuaternion(K.setFromEuler(t));
+    return this.applyQuaternion(N.setFromEuler(t));
   }
   applyAxisAngle(t, e) {
-    return this.applyQuaternion(K.setFromAxisAngle(t, e));
+    return this.applyQuaternion(N.setFromAxisAngle(t, e));
   }
   applyMatrix3(t) {
     const e = this.x, s = this.y, n = this.z, i = t.elements;
@@ -775,7 +775,7 @@ class $ {
     if (e === 0)
       return Math.PI / 2;
     const s = this.dot(t) / e;
-    return Math.acos(H(s, -1, 1));
+    return Math.acos(Q(s, -1, 1));
   }
   distanceTo(t) {
     return Math.sqrt(this.distanceToSquared(t));
@@ -843,22 +843,20 @@ class $ {
     yield this.x, yield this.y, yield this.z;
   }
 }
-const X = /* @__PURE__ */ new $(), K = /* @__PURE__ */ new Nt();
+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 Bt = Symbol("CONTROLS_CONTEXT_KEY"), T = tt({
-  controls: []
-});
-function Ut() {
-  return ft(Bt, T), T;
+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 $ || n instanceof $ || n instanceof Array) && (s = "vector"), !V(e) && e.value ? {
+    return !V(e) && e.value || V(e) ? (s = typeof e.value, n = e.value) : (s = typeof e, n = e), s === "number" && (e.step || e.max || e.min) && (s = "range"), s === "string" && i.test(n) && (s = "color"), (n instanceof E || n instanceof E || n instanceof Array) && (s = "vector"), !V(e) && e.value ? {
       ...e,
       label: e.label || t,
       value: e.value,
@@ -872,24 +870,25 @@ function R(o) {
     };
   });
 }
-function Kt() {
-  T.controls = [];
+function Nt() {
+  for (const o in w)
+    delete w[o];
 }
 function Ge(o, t, e) {
-  let s = [];
+  const s = m();
   if (typeof o == "string")
-    o === "fpsgraph" ? s.push({
+    o === "fpsgraph" ? (w[o] = {
       label: "fpsgraph",
       visible: !0,
       type: "fpsgraph"
-    }) : s.push({
+    }, s.value = w[o]) : (w[o] = {
       label: o,
       visible: !0,
       type: "folder",
-      controls: R(t)
-    });
+      controls: t ? R(t) : []
+    }, s.value = w[o]);
   else if (typeof o == "object" && o.options)
-    s.push({
+    w[o.label || "Dropdown"] = {
       ...e,
       label: o.label || "Dropdown",
       visible: !0,
@@ -897,24 +896,30 @@ function Ge(o, t, e) {
       type: "select",
       ref: o,
       options: o.options
-    });
+    }, s.value = w[o.label || "Dropdown"];
   else if (typeof o == "object" && typeof t == "string")
-    s.push({
+    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);
-    s = R(n);
-  } else
-    s = R(o);
-  return T.controls = [...T.controls, ...s], bt(Kt), { state: T, controls: s };
+    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__ */ C({
+const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt = { class: "text-gray-500 w-1/3" }, Ot = ["value", "min", "max", "step"], te = /* @__PURE__ */ S({
   __name: "NumberControl",
   props: {
     label: {},
@@ -927,7 +932,7 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
       const { target: r } = h;
       t("change", r.valueAsNumber);
     }
-    const n = F(), i = m(0), a = m(!1), l = (h) => {
+    const n = H(), i = m(0), a = m(!1), l = (h) => {
       i.value = h.clientX, a.value = !0;
     }, y = () => {
       a.value = !1;
@@ -938,10 +943,10 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
         r > 0 ? t("change", e.control.value + 1 + _) : r < 0 && t("change", e.control.value - 1 + _), e.control.min !== void 0 && e.control.value < e.control.min && t("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && t("change", e.control.max), i.value = h;
       }
     }), (h, r) => (d(), g("div", Gt, [
-      p("label", Jt, v(h.label), 1),
+      p("label", Jt, C(h.label), 1),
       p("input", {
         value: h.control.value,
-        class: k(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": a.value }]),
+        class: $(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": a.value }]),
         type: "number",
         min: h.control.min,
         max: h.control.max,
@@ -952,7 +957,7 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
       }, null, 42, Ot)
     ]));
   }
-}), ee = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, se = { class: "text-gray-500 w-1/3" }, ne = ["value"], ie = /* @__PURE__ */ C({
+}), ee = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, se = { class: "text-gray-500 w-1/3" }, ne = ["value"], ie = /* @__PURE__ */ S({
   __name: "TextControl",
   props: {
     label: {},
@@ -964,7 +969,7 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
       t("change", s);
     }
     return (s, n) => (d(), g("div", ee, [
-      p("label", se, v(s.label), 1),
+      p("label", se, C(s.label), 1),
       p("input", {
         value: s.control.value,
         type: "string",
@@ -973,7 +978,7 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
       }, null, 40, ne)
     ]));
   }
-}), oe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, re = { class: "text-gray-500 w-1/3" }, he = ["id", "checked"], ae = ["for"], le = { class: "i-ic:baseline-check text-light" }, ue = /* @__PURE__ */ C({
+}), oe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, re = { class: "text-gray-500 w-1/3" }, ae = ["id", "checked"], he = ["for"], le = { class: "i-ic:baseline-check text-light" }, ue = /* @__PURE__ */ S({
   __name: "BooleanControl",
   props: {
     label: {},
@@ -986,29 +991,29 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
       t("change", n.checked);
     }
     return (s, n) => (d(), g("div", oe, [
-      p("label", re, v(s.label), 1),
+      p("label", re, C(s.label), 1),
       p("input", {
         id: s.control.label,
         checked: s.control.value,
         class: "hidden",
         type: "checkbox",
         onInput: e
-      }, null, 40, he),
+      }, null, 40, ae),
       p("label", {
         for: s.control.label,
         class: "inline-flex items-center cursor-pointer"
       }, [
         p("span", {
-          class: k([{ "bg-dark-500": s.control.value, "bg-gray-200": !s.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])
+          class: $([{ "bg-dark-500": s.control.value, "bg-gray-200": !s.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])
         }, [
           et(p("i", le, null, 512), [
             [st, s.control.value]
           ])
         ], 2)
-      ], 8, ae)
+      ], 8, he)
     ]));
   }
-}), ce = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, ye = ["value", "min", "max", "step"], _e = ["value", "min", "max", "step"], xe = /* @__PURE__ */ C({
+}), ce = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, ye = ["value", "min", "max", "step"], _e = ["value", "min", "max", "step"], xe = /* @__PURE__ */ S({
   __name: "SliderControl",
   props: {
     label: {},
@@ -1021,9 +1026,9 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
       const { target: _ } = r;
       t("change", _.valueAsNumber);
     }
-    const n = E(() => ({
+    const n = T(() => ({
       backgroundImage: `linear-gradient(to right, #333 0% ${100 * (e.control.value - (e.control.min || 0)) / ((e.control.max || 100) - (e.control.min || 0))}%, #e2e2e2 0%)`
-    })), i = F(), a = m(0), l = m(!1), y = (r) => {
+    })), i = H(), a = m(0), l = m(!1), y = (r) => {
       a.value = r.clientX, l.value = !0;
     }, c = () => {
       l.value = !1;
@@ -1035,17 +1040,17 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
       }
     }), (r, _) => (d(), g("div", ce, [
       p("label", {
-        class: k(["text-gray-500 w-1/3", { "flex justify-between items-center": r.control.icon }])
+        class: $(["text-gray-500 w-1/3", { "flex justify-between items-center": r.control.icon }])
       }, [
-        zt(v(r.label) + " ", 1),
+        zt(C(r.label) + " ", 1),
         p("i", {
-          class: k(`i-${r.control.icon}`)
+          class: $(`i-${r.control.icon}`)
         }, null, 2)
       ], 2),
       p("input", {
         value: r.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: Mt(n.value),
+        style: wt(n.value),
         type: "range",
         min: r.control.min,
         max: r.control.max,
@@ -1054,7 +1059,7 @@ const Gt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Jt =
       }, null, 44, ye),
       p("input", {
         value: r.control.value,
-        class: k(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": l.value }]),
+        class: $(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": l.value }]),
         type: "number",
         min: r.control.min,
         max: r.control.max,
@@ -1071,7 +1076,7 @@ const pe = (o, t) => {
   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__ */ C({
+}, de = /* @__PURE__ */ pe(xe, [["__scopeId", "data-v-743fd350"]]), fe = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, ge = { class: "text-gray-500 w-1/3" }, me = ["value"], be = ["value"], ze = /* @__PURE__ */ S({
   __name: "ColorControl",
   props: {
     label: {},
@@ -1084,7 +1089,7 @@ const pe = (o, t) => {
       t("change", n.value);
     }
     return (s, n) => (d(), g("div", fe, [
-      p("label", ge, v(s.label), 1),
+      p("label", ge, C(s.label), 1),
       p("input", {
         value: s.control.value,
         type: "color",
@@ -1099,13 +1104,13 @@ const pe = (o, t) => {
     ]));
   }
 });
-function Me(o) {
-  return typeof o == "number" ? [o, o, o] : o instanceof $ ? [o.x, o.y, o.z] : o;
+function we(o) {
+  return typeof o == "number" ? [o, o, o] : o instanceof E ? [o.x, o.y, o.z] : o;
 }
-const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve = { class: "text-gray-500 w-1/3" }, Ce = { class: "w-2/3 flex justify-between gap-1" }, Se = {
+const Me = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve = { class: "text-gray-500 w-1/3" }, Ce = { class: "w-2/3 flex justify-between gap-1" }, Se = {
   key: 0,
   class: "font-bold px-0.5 py-1 text-0.65rem text-gray-300"
-}, ke = ["value", "onInput", "onMousedown", "onMouseup"], $e = /* @__PURE__ */ C({
+}, ke = ["value", "onInput", "onMousedown", "onMouseup"], $e = /* @__PURE__ */ S({
   __name: "VectorControl",
   props: {
     label: {},
@@ -1113,11 +1118,11 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
   },
   emits: ["change"],
   setup(o, { emit: t }) {
-    const e = o, s = F(), n = m(0), i = m(!1), a = m(0), l = (x, b) => {
+    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 = E(() => Me(e.control.value)), r = E(() => Object.keys(e.control.value)), _ = E(() => e.control.value instanceof Q || e.control.value instanceof $);
+    }, 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);
@@ -1127,17 +1132,17 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
         const b = x - n.value, z = c(b), { value: f } = e.control, M = _.value ? r.value[a.value] : a.value;
         b > 0 ? f[M] += 1 + z : b < 0 && (f[M] -= 1 + z), e.control.min !== void 0 && f < e.control.min && (f[M] = e.control.min), e.control.max !== void 0 && f > e.control.max && (f[M] = e.control.max), t("change", f), n.value = x;
       }
-    }), (x, b) => (d(), g("div", we, [
-      p("label", ve, v(x.label), 1),
+    }), (x, b) => (d(), g("div", Me, [
+      p("label", ve, C(x.label), 1),
       p("div", Ce, [
         (d(!0), g(P, null, L(h.value, (z, f) => (d(), g("div", {
           key: x.label + f,
           class: "flex items-center w-1/3 bg-gray-100 rounded"
         }, [
-          r.value[f] && _.value ? (d(), g("span", Se, v(r.value[f]), 1)) : nt("", !0),
+          r.value[f] && _.value ? (d(), g("span", Se, C(r.value[f]), 1)) : nt("", !0),
           p("input", {
             type: "text",
-            class: k(["w-full pl-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": i.value }]),
+            class: $(["w-full pl-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": i.value }]),
             value: h.value[f].toFixed(2),
             onInput: (M) => u(M, f),
             onMousedown: (M) => l(M, f),
@@ -1147,7 +1152,7 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
       ])
     ]));
   }
-}), Ee = { class: "mb-4" }, Te = { class: "bg-white rounded-b pt-4" }, Ie = /* @__PURE__ */ C({
+}), Ee = { class: "mb-4" }, Te = { class: "bg-white rounded-b pt-4" }, Ie = /* @__PURE__ */ S({
   __name: "Folder",
   props: {
     control: {}
@@ -1164,19 +1169,19 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
         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, v(n.control.label), 1),
+        p("span", null, C(n.control.label), 1),
         p("i", {
-          class: k(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+          class: $(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
         }, null, 2)
       ]),
-      wt(vt, {
+      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(), w(ut, {
+            (d(!0), g(P, null, L(n.control.controls, (a) => (d(), v(ut, {
               key: a.label,
               control: a,
               onChange: (l) => t(l, a)
@@ -1189,7 +1194,7 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
       })
     ]));
   }
-}), Ae = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, je = { class: "text-gray-500 w-1/3" }, qe = { class: "relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans" }, Pe = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, De = ["points"], G = 160, Y = 40, A = 2, J = 100, O = 20, Le = /* @__PURE__ */ C({
+}), Ae = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, je = { class: "text-gray-500 w-1/3" }, qe = { class: "relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans" }, Pe = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, De = ["points"], G = 160, Y = 40, A = 2, J = 100, O = 20, Le = /* @__PURE__ */ S({
   __name: "FPSGraph",
   props: {
     label: {},
@@ -1203,9 +1208,9 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
         (l, y) => `${y * A},${Y + O - A / 2 - l * (Y + O - A) / 120}`
       ).join(" "));
     }), (a, l) => (d(), g("div", Ae, [
-      p("label", je, v(a.label), 1),
+      p("label", je, C(a.label), 1),
       p("div", qe, [
-        p("div", Pe, v(Math.round(j(t))) + " FPS", 1),
+        p("div", Pe, C(Math.round(j(t))) + " FPS", 1),
         (d(), g("svg", {
           width: G,
           height: Y,
@@ -1224,7 +1229,7 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
       ])
     ]));
   }
-}), Ve = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Xe = { class: "text-gray-500 w-1/3" }, Re = ["value"], Ye = ["value"], Fe = /* @__PURE__ */ C({
+}), Ve = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Xe = { class: "text-gray-500 w-1/3" }, Re = ["value"], Ye = ["value"], He = /* @__PURE__ */ S({
   __name: "SelectControl",
   props: {
     label: {},
@@ -1236,7 +1241,7 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
       t("change", s.target.value);
     }
     return (s, n) => (d(), g("div", Ve, [
-      p("label", Xe, v(s.label), 1),
+      p("label", Xe, C(s.label), 1),
       p("select", {
         value: s.control.value,
         class: "p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",
@@ -1245,11 +1250,11 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
         (d(!0), g(P, null, L(s.control.options, (i) => (d(), g("option", {
           key: i.value,
           value: i.value
-        }, v(i.text), 9, Ye))), 128))
+        }, C(i.text), 9, Ye))), 128))
       ], 40, Re)
     ]));
   }
-}), ut = /* @__PURE__ */ C({
+}), ut = /* @__PURE__ */ S({
   __name: "ControlInput",
   props: {
     control: {}
@@ -1260,45 +1265,45 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
       t("change", s);
     }
     return (s, n) => s.control.visible ? (d(), g(P, { key: 0 }, [
-      s.control.type === "color" ? (d(), w(ze, {
+      s.control.type === "color" ? (d(), v(ze, {
         key: 0,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "vector" ? (d(), w($e, {
+      }, null, 8, ["label", "control"])) : s.control.type === "vector" ? (d(), v($e, {
         key: 1,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "boolean" ? (d(), w(ue, {
+      }, null, 8, ["label", "control"])) : s.control.type === "boolean" ? (d(), v(ue, {
         key: 2,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "fpsgraph" ? (d(), w(Le, {
+      }, null, 8, ["label", "control"])) : s.control.type === "fpsgraph" ? (d(), v(Le, {
         key: 3,
         label: s.control.label,
         control: s.control
-      }, null, 8, ["label", "control"])) : s.control.type === "folder" ? (d(), w(Ie, {
+      }, null, 8, ["label", "control"])) : s.control.type === "folder" ? (d(), v(Ie, {
         key: 4,
         label: s.control.label,
         control: s.control
-      }, null, 8, ["label", "control"])) : s.control.type === "number" ? (d(), w(te, {
+      }, null, 8, ["label", "control"])) : s.control.type === "number" ? (d(), v(te, {
         key: 5,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "range" ? (d(), w(de, {
+      }, null, 8, ["label", "control"])) : s.control.type === "range" ? (d(), v(de, {
         key: 6,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : s.control.type === "select" ? (d(), w(Fe, {
+      }, null, 8, ["label", "control"])) : s.control.type === "select" ? (d(), v(He, {
         key: 7,
         label: s.control.label,
         control: s.control,
         onChange: e
-      }, null, 8, ["label", "control"])) : (d(), w(ie, {
+      }, null, 8, ["label", "control"])) : (d(), v(ie, {
         key: 8,
         label: s.control.label,
         control: s.control,
@@ -1306,34 +1311,34 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
       }, null, 8, ["label", "control"]))
     ], 64)) : nt("", !0);
   }
-}), He = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, Qe = /* @__PURE__ */ p("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), We = /* @__PURE__ */ p("div", null, [
+}), 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), Ze = /* @__PURE__ */ p("div", null, null, -1), Ne = [
-  Qe,
+], -1), Be = /* @__PURE__ */ p("div", null, null, -1), Ue = [
   We,
-  Ze
-], Be = 280, Je = /* @__PURE__ */ C({
+  Ze,
+  Be
+], Fe = 280, Je = /* @__PURE__ */ S({
   __name: "TresLeches",
   setup(o) {
-    const { width: t } = Tt(), e = m(null), s = Ut();
+    const { width: t } = Tt(), e = m(null), s = Kt();
     function n(i, a) {
       a.ref && (a.ref[a.label] = i), a.value = i;
     }
-    return (i, a) => (d(), w(j(Ht), {
-      "initial-value": { x: j(t) - Be - 20, y: 10 },
-      class: "fixed select-none z-24 w-280px font-sans text-xs",
+    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
     }, {
       default: it(() => [
-        p("div", He, [
+        p("div", Qe, [
           p("header", {
             ref_key: "handle",
             ref: e,
             class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
-          }, Ne, 512),
-          (d(!0), g(P, null, L(j(s).controls, (l) => (d(), w(ut, {
+          }, Ue, 512),
+          (d(!0), g(P, null, L(j(s), (l) => (d(), v(ut, {
             key: l.label,
             control: l,
             onChange: (y) => n(y, l)
@@ -1341,7 +1346,7 @@ const we = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, ve =
         ])
       ]),
       _: 1
-    }, 8, ["initial-value", "handle"]));
+    }, 8, ["initial-value", "class", "handle"]));
   }
 });
 export {