@tresjs/leches 0.13.0 → 0.14.0-next.0

package/dist/tresleches.js

@@ -1,94 +1,94 @@
 /**
  * name: @tresjs/leches
- * version: v0.13.0
+ * version: v0.14.0-next.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { unref as K, isRef as R, toRefs as X, customRef as pe, ref as f, watch as U, computed as O, defineComponent as M, reactive as j, h as fe, provide as ve, isReactive as ge, openBlock as p, createElementBlock as x, createElementVNode as d, toDisplayString as k, normalizeClass as D, withDirectives as ae, vShow as re, createTextVNode as ye, normalizeStyle as be, Fragment as z, renderList as N, createCommentVNode as Y, createBlock as C, createVNode as he, Transition as me, withCtx as se } from "vue";
-import { useWindowSize as ie, useEventListener as H, useStorage as _e, isClient as xe, useMouse as ee, useMousePressed as we, useKeyModifier as te, useFps as $e, useRafFn as Ce } from "@vueuse/core";
-function E(e) {
-  return typeof e == "function" ? e() : K(e);
+import { unref as D, isRef as R, toRefs as B, customRef as ge, ref as f, watch as U, computed as V, defineComponent as M, reactive as j, h as be, provide as ye, isReactive as me, openBlock as d, createElementBlock as h, createElementVNode as p, toDisplayString as k, normalizeClass as C, withDirectives as ae, vShow as re, createTextVNode as se, normalizeStyle as he, Fragment as O, renderList as N, createCommentVNode as Y, createBlock as S, createVNode as ie, Transition as _e, withCtx as ce } from "vue";
+import { useWindowSize as ue, useEventListener as H, useStorage as xe, isClient as we, useMouse as ee, useMousePressed as $e, useKeyModifier as te, useFps as Ce, useRafFn as ke } from "@vueuse/core";
+function E(t) {
+  return typeof t == "function" ? t() : D(t);
 }
-const ce = typeof window < "u" && typeof document < "u";
-function ke(e, s = {}) {
-  if (!R(e))
-    return X(e);
-  const n = Array.isArray(e.value) ? Array.from({ length: e.value.length }) : {};
-  for (const o in e.value)
-    n[o] = pe(() => ({
+const pe = typeof window < "u" && typeof document < "u";
+function Me(t, s = {}) {
+  if (!R(t))
+    return B(t);
+  const n = Array.isArray(t.value) ? Array.from({ length: t.value.length }) : {};
+  for (const o in t.value)
+    n[o] = ge(() => ({
       get() {
-        return e.value[o];
+        return t.value[o];
       },
-      set(t) {
-        var u;
-        if ((u = E(s.replaceRef)) != null ? u : !0)
-          if (Array.isArray(e.value)) {
-            const i = [...e.value];
-            i[o] = t, e.value = i;
+      set(e) {
+        var c;
+        if ((c = E(s.replaceRef)) != null ? c : !0)
+          if (Array.isArray(t.value)) {
+            const i = [...t.value];
+            i[o] = e, t.value = i;
           } else {
-            const i = { ...e.value, [o]: t };
-            Object.setPrototypeOf(i, Object.getPrototypeOf(e.value)), e.value = i;
+            const i = { ...t.value, [o]: e };
+            Object.setPrototypeOf(i, Object.getPrototypeOf(t.value)), t.value = i;
           }
         else
-          e.value[o] = t;
+          t.value[o] = e;
       }
     }));
   return n;
 }
-const Me = ce ? window : void 0;
-function Se(e, s = {}) {
+const Se = pe ? window : void 0;
+function Ie(t, s = {}) {
   const {
     pointerTypes: n,
     preventDefault: o,
-    stopPropagation: t,
-    exact: u,
+    stopPropagation: e,
+    exact: c,
     onMove: a,
     onEnd: i,
-    onStart: c,
-    initialValue: m,
-    axis: h = "both",
-    draggingElement: r = Me,
-    handle: l = e
-  } = s, { width: b } = ie();
-  let S = b.value;
+    onStart: u,
+    initialValue: _,
+    axis: m = "both",
+    draggingElement: r = Se,
+    handle: l = t
+  } = s, { width: y } = ue();
+  let I = y.value;
   const v = f(
-    E(m) ?? { x: 0, y: 0 }
+    E(_) ?? { x: 0, y: 0 }
   );
-  U(b, () => {
-    const g = b.value - S;
-    v.value.x += g, S = b.value;
+  U(y, () => {
+    const g = y.value - I;
+    v.value.x += g, I = y.value;
   });
   const T = f(), F = (g) => n ? n.includes(g.pointerType) : !0, $ = (g) => {
-    E(o) && g.preventDefault(), E(t) && g.stopPropagation();
+    E(o) && g.preventDefault(), E(e) && g.stopPropagation();
   }, A = (g) => {
-    if (!F(g) || E(u) && g.target !== E(e))
+    if (!F(g) || E(c) && g.target !== E(t))
       return;
-    const y = E(e).getBoundingClientRect(), w = {
-      x: g.clientX - y.left,
-      y: g.clientY - y.top
+    const b = E(t).getBoundingClientRect(), w = {
+      x: g.clientX - b.left,
+      y: g.clientY - b.top
     };
-    (c == null ? void 0 : c(w, g)) !== !1 && (T.value = w, $(g));
-  }, V = (g) => {
+    (u == null ? void 0 : u(w, g)) !== !1 && (T.value = w, $(g));
+  }, z = (g) => {
     if (!F(g) || !T.value)
       return;
-    let { x: y, y: w } = v.value;
-    (h === "x" || h === "both") && (y = g.clientX - T.value.x), (h === "y" || h === "both") && (w = g.clientY - T.value.y), v.value = {
-      x: y,
+    let { x: b, y: w } = v.value;
+    (m === "x" || m === "both") && (b = g.clientX - T.value.x), (m === "y" || m === "both") && (w = g.clientY - T.value.y), v.value = {
+      x: b,
       y: w
     }, a == null || a(v.value, g), $(g);
-  }, L = (g) => {
+  }, P = (g) => {
     F(g) && T.value && (T.value = void 0, i == null || i(v.value, g), $(g));
   };
-  if (ce) {
+  if (pe) {
     const g = { capture: s.capture ?? !0 };
-    H(l, "pointerdown", A, g), H(r, "pointermove", V, g), H(r, "pointerup", L, g);
+    H(l, "pointerdown", A, g), H(r, "pointermove", z, g), H(r, "pointerup", P, g);
   }
   return {
-    ...ke(v),
+    ...Me(v),
     position: v,
-    isDragging: O(() => !!T.value),
-    style: O(
+    isDragging: V(() => !!T.value),
+    style: V(
       () => `left:${v.value.x}px;top:${v.value.y}px;`
     )
   };
@@ -110,279 +110,279 @@ const Te = /* @__PURE__ */ M({
     "onMove",
     "onEnd"
   ],
-  setup(e, { slots: s }) {
-    const n = f(), o = O(() => e.handle ?? n.value), t = e.storageKey && _e(
-      e.storageKey,
-      E(e.initialValue) || { x: 0, y: 0 },
-      xe ? e.storageType === "session" ? sessionStorage : localStorage : void 0
-    ), u = t || e.initialValue || { x: 0, y: 0 }, i = j(Se(n, {
-      ...e,
+  setup(t, { slots: s }) {
+    const n = f(), o = V(() => t.handle ?? n.value), e = t.storageKey && xe(
+      t.storageKey,
+      E(t.initialValue) || { x: 0, y: 0 },
+      we ? t.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), c = e || t.initialValue || { x: 0, y: 0 }, i = j(Ie(n, {
+      ...t,
       handle: o,
-      initialValue: u,
-      onEnd: (c, m) => {
-        var h;
-        (h = e.onEnd) == null || h.call(e, c, m), t && (t.value.x = c.x, t.value.y = c.y);
+      initialValue: c,
+      onEnd: (u, _) => {
+        var m;
+        (m = t.onEnd) == null || m.call(t, u, _), e && (e.value.x = u.x, e.value.y = u.y);
       }
     }));
     return () => {
       if (s.default)
-        return fe(e.as || "div", { ref: n, style: `touch-action:none;${i.style}` }, s.default(i));
+        return be(t.as || "div", { ref: n, style: `touch-action:none;${i.style}` }, s.default(i));
     };
   }
-}), Ae = Symbol("CONTROLS_CONTEXT_KEY"), ue = "default", P = j({});
-function Ie(e = ue) {
-  return ve(Ae, P), P[e];
+}), Ae = Symbol("CONTROLS_CONTEXT_KEY"), de = "default", X = j({});
+function Ke(t = de) {
+  return ye(Ae, X), X[t];
 }
-const G = (e) => {
+const G = (t) => {
   const s = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-  return typeof e == "boolean" ? "boolean" : typeof e == "number" ? "number" : typeof e == "string" && s.test(e) ? "color" : typeof e == "string" ? "string" : e.isVector3 || e.isVector2 || e.isEuler || e instanceof Array ? "vector" : e.min !== void 0 || e.max !== void 0 || e.step !== void 0 ? "range" : e.options && Array.isArray(e.options) ? "select" : "unknown";
-}, W = (e, s, n, o) => {
-  const t = {
-    key: f(e),
-    label: f(e),
-    name: f(e),
+  return typeof t == "boolean" ? "boolean" : typeof t == "number" ? "number" : typeof t == "string" && s.test(t) ? "color" : typeof t == "string" ? "string" : t.isVector3 || t.isVector2 || t.isEuler || t instanceof Array ? "vector" : t.min !== void 0 || t.max !== void 0 || t.step !== void 0 ? "range" : t.options && Array.isArray(t.options) ? "select" : "unknown";
+}, W = (t, s, n, o) => {
+  const e = {
+    key: f(t),
+    label: f(t),
+    name: f(t),
     type: f(n),
     value: f(s),
     visible: f(!0),
-    [e]: f(s)
+    [t]: f(s)
   };
-  return o && (t.folder = f(o)), t;
-}, Dt = (e, s, n) => {
-  const o = {}, t = typeof e == "string" ? e : null, u = t ? s : e, a = t && t !== "fpsgraph" ? n : s, i = (a == null ? void 0 : a.uuid) || ue;
-  if (P[i] || (P[i] = j({})), e === "fpsgraph") {
+  return o && (e.folder = f(o)), e;
+}, Et = (t, s, n) => {
+  const o = {}, e = typeof t == "string" ? t : null, c = e ? s : t, a = e && e !== "fpsgraph" ? n : s, i = (a == null ? void 0 : a.uuid) || de;
+  if (X[i] || (X[i] = j({})), t === "fpsgraph") {
     const r = W("fpsgraph", null, "fpsgraph", null);
-    return P[i].fpsgraph = r, o.fpsgraph = r, X(j(o));
+    return X[i].fpsgraph = r, o.fpsgraph = r, B(j(o));
   }
-  const c = P[i], m = ge(u), h = m ? X(u) : {};
-  for (const r in u) {
-    let l = u[r], b = r;
-    if (m && h[r] && (l = h[r]), t && (b = `${t}${r.charAt(0).toUpperCase() + r.slice(1)}`), typeof l == "object" && !R(l) && !Array.isArray(l) && l.value !== void 0) {
-      const v = l, T = R(v.value) ? v.value : f(v.value), F = G(v), $ = W(r, T, F, t);
+  const u = X[i], _ = me(c), m = _ ? B(c) : {};
+  for (const r in c) {
+    let l = c[r], y = r;
+    if (_ && m[r] && (l = m[r]), e && (y = `${e}${r.charAt(0).toUpperCase() + r.slice(1)}`), typeof l == "object" && !R(l) && !Array.isArray(l) && l.value !== void 0) {
+      const v = l, T = R(v.value) ? v.value : f(v.value), F = v.type || G(v.value), $ = W(r, T, F, e);
       F === "select" && ($.options = f(v.options.map((A) => typeof A == "object" && A.text && A.value ? A : {
         text: A,
         value: A
-      }))), F === "range" && ($.min = f(v.min || 0), $.max = f(v.max || 1), $.step = f(v.step || 0.1)), $.label.value = v.label || r, $.visible.value = v.visible !== void 0 ? v.visible : !0, c[b] = $, o[b] = $;
+      }))), F === "range" && ($.min = f(v.min || 0), $.max = f(v.max || 1), $.step = f(v.step || 0.1)), $.label.value = v.label || r, $.visible.value = v.visible !== void 0 ? v.visible : !0, u[y] = $, o[y] = $;
       continue;
     }
     if (R(l)) {
-      const v = W(r, l, G(l.value), t);
-      c[b] = v, o[b] = v;
+      const v = W(r, l, l.value.type || G(l.value), e);
+      u[y] = v, o[y] = v;
       continue;
     } else if (typeof l == "object" && !Array.isArray(l)) {
-      const v = X(l);
+      const v = B(l);
       v[r] && (l = v[r]);
     }
-    const S = W(r, l, G(l), t);
-    c[b] = S, o[b] = S, S.uniqueKey = b;
+    const I = W(r, l, l.type || G(l), e);
+    u[y] = I, o[y] = I, I.uniqueKey = y;
   }
-  return Object.keys(o).length > 1 ? X(j(o)) : Object.values(o)[0];
-}, Ke = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, De = ["for"], Fe = ["id", "value", "min", "max", "step"], Ee = /* @__PURE__ */ M({
+  return Object.keys(o).length > 1 ? B(j(o)) : Object.values(o)[0];
+}, De = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Fe = ["for"], Ee = ["id", "value", "min", "max", "step"], Ve = /* @__PURE__ */ M({
   __name: "NumberControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: s }) {
-    const n = e, o = s;
-    function t(r) {
+  setup(t, { emit: s }) {
+    const n = t, o = s;
+    function e(r) {
       const { target: l } = r;
       o("change", l.valueAsNumber);
     }
-    const u = ee(), a = f(0), i = f(!1), c = (r) => {
+    const c = ee(), a = f(0), i = f(!1), u = (r) => {
       a.value = r.clientX, i.value = !0;
-    }, m = () => {
+    }, _ = () => {
       i.value = !1;
-    }, h = (r) => Math.floor(Math.abs(r) / 10);
-    return U(u.x, (r) => {
+    }, m = (r) => Math.floor(Math.abs(r) / 10);
+    return U(c.x, (r) => {
       if (i.value) {
-        const l = r - a.value, b = h(l);
-        l > 0 ? o("change", n.control.value + 1 + b) : l < 0 && o("change", n.control.value - 1 + b), n.control.min !== void 0 && n.control.value < n.control.min && o("change", n.control.min), n.control.max !== void 0 && n.control.value > n.control.max && o("change", n.control.max), a.value = r;
+        const l = r - a.value, y = m(l);
+        l > 0 ? o("change", n.control.value + 1 + y) : l < 0 && o("change", n.control.value - 1 + y), n.control.min !== void 0 && n.control.value < n.control.min && o("change", n.control.min), n.control.max !== void 0 && n.control.value > n.control.max && o("change", n.control.max), a.value = r;
       }
-    }), (r, l) => (p(), x("div", Ke, [
-      d("label", {
+    }), (r, l) => (d(), h("div", De, [
+      p("label", {
         class: "text-gray-500 w-1/3",
         for: r.control.uniqueKey
-      }, k(r.label), 9, De),
-      d("input", {
+      }, k(r.label), 9, Fe),
+      p("input", {
         id: r.control.uniqueKey,
         value: r.control.value,
-        class: D(["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": i.value }]),
+        class: C(["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": i.value }]),
         type: "number",
         min: r.control.min,
         max: r.control.max,
         step: r.control.step,
-        onInput: t,
-        onMousedown: c,
-        onMouseup: m
-      }, null, 42, Fe)
+        onInput: e,
+        onMousedown: u,
+        onMouseup: _
+      }, null, 42, Ee)
     ]));
   }
-}), Ve = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, qe = ["for"], Ue = ["id", "value", "aria-label"], ze = /* @__PURE__ */ M({
+}), ze = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, qe = ["for"], Ue = ["id", "value", "aria-label"], Oe = /* @__PURE__ */ M({
   __name: "TextControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: s }) {
+  setup(t, { emit: s }) {
     const n = s;
-    function o(t) {
-      const { target: u } = t;
-      n("change", u.value);
+    function o(e) {
+      const { target: c } = e;
+      n("change", c.value);
     }
-    return (t, u) => (p(), x("div", Ve, [
-      d("label", {
-        for: t.control.uniqueKey,
+    return (e, c) => (d(), h("div", ze, [
+      p("label", {
+        for: e.control.uniqueKey,
         class: "text-gray-500 w-1/3"
-      }, k(t.label), 9, qe),
-      d("input", {
-        id: t.control.uniqueKey,
-        value: t.control.value,
+      }, k(e.label), 9, qe),
+      p("input", {
+        id: e.control.uniqueKey,
+        value: e.control.value,
         type: "text",
         tabindex: "0",
         class: "p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 border-none font-sans",
-        "aria-label": t.label,
+        "aria-label": e.label,
         placeholder: "Enter value here...",
         onChange: o
       }, null, 40, Ue)
     ]));
   }
-}), Oe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Xe = { class: "text-gray-500 w-1/3" }, Pe = ["id", "checked"], Le = ["for"], Be = ["aria-checked"], je = { class: "i-ic:baseline-check text-light" }, Ne = /* @__PURE__ */ M({
+}), Be = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Xe = { class: "text-gray-500 w-1/3" }, Pe = ["id", "checked"], Le = ["for"], je = ["aria-checked"], Ne = { class: "i-ic:baseline-check text-light" }, We = /* @__PURE__ */ M({
   __name: "BooleanControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: s }) {
-    const n = e, o = s;
-    function t(a) {
+  setup(t, { emit: s }) {
+    const n = t, o = s;
+    function e(a) {
       const { target: i } = a;
       o("change", i.checked);
     }
-    function u(a) {
+    function c(a) {
       (a.code === "Space" || a.code === "Enter") && (a.preventDefault(), o("change", !n.control.value));
     }
-    return (a, i) => (p(), x("div", Oe, [
-      d("label", Xe, k(a.label), 1),
-      d("input", {
+    return (a, i) => (d(), h("div", Be, [
+      p("label", Xe, k(a.label), 1),
+      p("input", {
         id: a.control.uniqueKey,
         checked: a.control.value,
         class: "hidden",
         type: "checkbox",
-        onInput: t
+        onInput: e
       }, null, 40, Pe),
-      d("label", {
+      p("label", {
         for: a.control.uniqueKey,
         class: "inline-flex items-center cursor-pointer"
       }, [
-        d("span", {
+        p("span", {
           tabindex: "0",
           role: "checkbox",
           "aria-checked": a.control.value.toString(),
-          class: D([{ "bg-dark-500": a.control.value, "bg-gray-200": !a.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),
-          onKeydown: u
+          class: C([{ "bg-dark-500": a.control.value, "bg-gray-200": !a.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),
+          onKeydown: c
         }, [
-          ae(d("i", je, null, 512), [
+          ae(p("i", Ne, null, 512), [
             [re, a.control.value]
           ])
-        ], 42, Be)
+        ], 42, je)
       ], 8, Le)
     ]));
   }
-}), We = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, Re = ["value", "min", "max", "step"], Ye = ["value", "min", "max", "step"], He = /* @__PURE__ */ M({
+}), Re = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, Ye = ["value", "min", "max", "step"], He = ["value", "min", "max", "step"], Ge = /* @__PURE__ */ M({
   __name: "SliderControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: s }) {
-    const n = e, o = s;
-    function t(l) {
-      const { target: b } = l;
-      o("change", b.valueAsNumber);
+  setup(t, { emit: s }) {
+    const n = t, o = s;
+    function e(l) {
+      const { target: y } = l;
+      o("change", y.valueAsNumber);
     }
-    const u = O(() => ({
+    const c = V(() => ({
       backgroundImage: `linear-gradient(to right, #333 0% ${100 * (n.control.value - (n.control.min || 0)) / ((n.control.max || 100) - (n.control.min || 0))}%, #e2e2e2 0%)`
-    })), a = ee(), i = f(0), c = f(!1), m = (l) => {
-      i.value = l.clientX, c.value = !0;
-    }, h = () => {
-      c.value = !1;
+    })), a = ee(), i = f(0), u = f(!1), _ = (l) => {
+      i.value = l.clientX, u.value = !0;
+    }, m = () => {
+      u.value = !1;
     }, r = (l) => Math.floor(Math.abs(l) / 10);
     return U(a.x, (l) => {
-      if (c.value) {
-        const b = l - i.value, S = r(b);
-        b > 0 ? o("change", n.control.value + 1 + S) : b < 0 && o("change", n.control.value - 1 + S), n.control.min !== void 0 && n.control.value < n.control.min && o("change", n.control.min), n.control.max !== void 0 && n.control.value > n.control.max && o("change", n.control.max), i.value = l;
+      if (u.value) {
+        const y = l - i.value, I = r(y);
+        y > 0 ? o("change", n.control.value + 1 + I) : y < 0 && o("change", n.control.value - 1 + I), n.control.min !== void 0 && n.control.value < n.control.min && o("change", n.control.min), n.control.max !== void 0 && n.control.value > n.control.max && o("change", n.control.max), i.value = l;
       }
-    }), (l, b) => (p(), x("div", We, [
-      d("label", {
-        class: D(["text-gray-500 w-1/3", { "flex justify-between items-center": l.control.icon }])
+    }), (l, y) => (d(), h("div", Re, [
+      p("label", {
+        class: C(["text-gray-500 w-1/3", { "flex justify-between items-center": l.control.icon }])
       }, [
-        ye(k(l.label) + " ", 1),
-        d("i", {
-          class: D(`i-${l.control.icon}`)
+        se(k(l.label) + " ", 1),
+        p("i", {
+          class: C(`i-${l.control.icon}`)
         }, null, 2)
       ], 2),
-      d("input", {
+      p("input", {
         value: l.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: be(u.value),
+        style: he(c.value),
         type: "range",
         min: l.control.min,
         max: l.control.max,
         step: l.control.step,
-        onInput: t
-      }, null, 44, Re),
-      d("input", {
+        onInput: e
+      }, null, 44, Ye),
+      p("input", {
         value: l.control.value,
-        class: D(["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": c.value }]),
+        class: C(["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": u.value }]),
         type: "number",
         min: l.control.min,
         max: l.control.max,
         step: l.control.step,
-        onInput: t,
-        onMousedown: m,
-        onMouseup: h
-      }, null, 42, Ye)
+        onInput: e,
+        onMousedown: _,
+        onMouseup: m
+      }, null, 42, He)
     ]));
   }
 });
-const Ge = (e, s) => {
-  const n = e.__vccOpts || e;
-  for (const [o, t] of s)
-    n[o] = t;
+const fe = (t, s) => {
+  const n = t.__vccOpts || t;
+  for (const [o, e] of s)
+    n[o] = e;
   return n;
-}, Je = /* @__PURE__ */ Ge(He, [["__scopeId", "data-v-9e6267fe"]]), Qe = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ze = { class: "text-gray-500 w-1/3" }, et = ["id", "value", "aria-label"], tt = ["id", "aria-label", "value"], nt = /* @__PURE__ */ M({
+}, Je = /* @__PURE__ */ fe(Ge, [["__scopeId", "data-v-9e6267fe"]]), Qe = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ze = { class: "text-gray-500 w-1/3" }, et = ["id", "value", "aria-label"], tt = ["id", "aria-label", "value"], nt = /* @__PURE__ */ M({
   __name: "ColorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: s }) {
+  setup(t, { emit: s }) {
     const n = s;
-    function o(t) {
-      const { target: u } = t;
-      n("change", u.value);
+    function o(e) {
+      const { target: c } = e;
+      n("change", c.value);
     }
-    return (t, u) => (p(), x("div", Qe, [
-      d("label", Ze, k(t.label), 1),
-      d("input", {
-        id: t.control.uniqueKey,
+    return (e, c) => (d(), h("div", Qe, [
+      p("label", Ze, k(e.label), 1),
+      p("input", {
+        id: e.control.uniqueKey,
         tabindex: "0",
-        value: t.control.value,
-        "aria-label": t.label,
-        class: D(["focus:outline-none focus:ring-2 focus:ring-blue-600", { "important-outline-gray-200": t.control.value === "#ffffff" }]),
+        value: e.control.value,
+        "aria-label": e.label,
+        class: C(["focus:outline-none focus:ring-2 focus:ring-blue-600", { "important-outline-gray-200": e.control.value === "#ffffff" }]),
         type: "color",
         onInput: o
       }, null, 42, et),
-      d("input", {
-        id: t.control.uniqueKey,
+      p("input", {
+        id: e.control.uniqueKey,
         tabindex: "0",
-        "aria-label": t.label,
-        value: t.control.value,
+        "aria-label": e.label,
+        value: e.control.value,
         class: "p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 border-none font-sans",
         type: "text",
         onInput: o
@@ -390,24 +390,24 @@ const Ge = (e, s) => {
     ]));
   }
 });
-function ot(e) {
-  if (typeof e == "number")
-    return [e, e, e];
-  if (Z(e)) {
-    const { x: s, y: n, z: o } = e;
+function ot(t) {
+  if (typeof t == "number")
+    return [t, t, t];
+  if (Z(t)) {
+    const { x: s, y: n, z: o } = t;
     return [s, n, o];
   }
-  if (Q(e)) {
-    const { x: s, y: n } = e;
+  if (Q(t)) {
+    const { x: s, y: n } = t;
     return [s, n];
   }
-  return e;
+  return t;
 }
-function Q(e) {
-  return e && typeof e.x == "number" && typeof e.y == "number";
+function Q(t) {
+  return t && typeof t.x == "number" && typeof t.y == "number";
 }
-function Z(e) {
-  return e && typeof e.x == "number" && typeof e.y == "number" && typeof e.z == "number";
+function Z(t) {
+  return t && typeof t.x == "number" && typeof t.y == "number" && typeof t.z == "number";
 }
 const lt = { class: "text-gray-500 w-1/3" }, at = { class: "relative w-2/3 flex justify-between gap-0.5" }, rt = {
   key: 0,
@@ -419,92 +419,92 @@ const lt = { class: "text-gray-500 w-1/3" }, at = { class: "relative w-2/3 flex
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: s }) {
-    const n = e, o = s, t = ee(), { pressed: u } = we(), a = f(0), i = f(!1), c = f(0), m = f(null), h = f(1), r = te("Shift"), l = te("Alt");
-    U(r, (y) => {
-      h.value = y ? 10 : 1;
-    }), U(l, (y) => {
-      h.value = y ? 0.1 : 1;
+  setup(t, { emit: s }) {
+    const n = t, o = s, e = ee(), { pressed: c } = $e(), a = f(0), i = f(!1), u = f(0), _ = f(null), m = f(1), r = te("Shift"), l = te("Alt");
+    U(r, (b) => {
+      m.value = b ? 10 : 1;
+    }), U(l, (b) => {
+      m.value = b ? 0.1 : 1;
     });
-    const b = (y) => {
-      m.value = y;
-    }, S = () => {
-      m.value = null;
-    }, v = (y, w) => {
-      c.value = w, a.value = y.clientX, i.value = !0;
-    }, T = (y, w) => {
-      c.value = w, i.value = !1;
+    const y = (b) => {
+      _.value = b;
+    }, I = () => {
+      _.value = null;
+    }, v = (b, w) => {
+      u.value = w, a.value = b.clientX, i.value = !0;
+    }, T = (b, w) => {
+      u.value = w, i.value = !1;
     }, F = () => {
       i.value = !1;
     };
-    U(u, (y) => {
-      y || (i.value = !1);
+    U(c, (b) => {
+      b || (i.value = !1);
     });
-    const $ = (y) => Math.floor(Math.abs(y) / 10), A = O(() => ot(n.control.value)), V = f(["x", "y", "z"]), L = O(() => Q(n.control.value) || Z(n.control.value));
-    function g(y, w) {
-      const { value: q } = n.control, { target: _ } = y;
-      c.value = w, q[L.value ? V.value[c.value] : c.value] = parseFloat(_.value), o("change", q);
+    const $ = (b) => Math.floor(Math.abs(b) / 10), A = V(() => ot(n.control.value)), z = f(["x", "y", "z"]), P = V(() => Q(n.control.value) || Z(n.control.value));
+    function g(b, w) {
+      const { value: q } = n.control, { target: x } = b;
+      u.value = w, q[P.value ? z.value[u.value] : u.value] = parseFloat(x.value), o("change", q);
     }
-    return U(t.x, (y) => {
+    return U(e.x, (b) => {
       if (i.value) {
-        const w = y - a.value, q = $(w), { value: _ } = n.control, I = L.value ? V.value[c.value] : c.value;
-        w > 0 ? _[I] += h.value + q : w < 0 && (_[I] -= h.value + q), n.control.min !== void 0 && _ < n.control.min && (_[I] = n.control.min), n.control.max !== void 0 && _ > n.control.max && (_[I] = n.control.max), o("change", _), a.value = y;
+        const w = b - a.value, q = $(w), { value: x } = n.control, K = P.value ? z.value[u.value] : u.value;
+        w > 0 ? x[K] += m.value + q : w < 0 && (x[K] -= m.value + q), n.control.min !== void 0 && x < n.control.min && (x[K] = n.control.min), n.control.max !== void 0 && x > n.control.max && (x[K] = n.control.max), o("change", x), a.value = b;
       }
-    }), (y, w) => (p(), x("div", {
+    }), (b, w) => (d(), h("div", {
       class: "flex px-4 justify-between gap-1 items-center mb-2",
       onMouseup: w[0] || (w[0] = (q) => F())
     }, [
-      d("label", lt, k(y.label), 1),
-      d("div", at, [
-        (p(!0), x(z, null, N(A.value, (q, _) => (p(), x("div", {
-          key: y.label + _,
-          class: D(["flex items-center bg-gray-100 rounded", { "w-2/5": m.value === _, "w-1/3": K(Z)(y.control.value), "w-1/2": K(Q)(y.control.value) }])
+      p("label", lt, k(b.label), 1),
+      p("div", at, [
+        (d(!0), h(O, null, N(A.value, (q, x) => (d(), h("div", {
+          key: b.label + x,
+          class: C(["flex items-center bg-gray-100 rounded", { "w-2/5": _.value === x, "w-1/3": D(Z)(b.control.value), "w-1/2": D(Q)(b.control.value) }])
         }, [
-          V.value[_] && L.value ? (p(), x("span", rt, k(V.value[_]), 1)) : Y("", !0),
-          d("input", {
-            id: `${y.control.uniqueKey}-${V.value[_]}`,
+          z.value[x] && P.value ? (d(), h("span", rt, k(z.value[x]), 1)) : Y("", !0),
+          p("input", {
+            id: `${b.control.uniqueKey}-${z.value[x]}`,
             type: "number",
-            step: h.value,
-            class: D(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none", { "cursor-ew-resize": i.value }]),
-            value: A.value[_].toFixed(2),
-            onInput: (I) => g(I, _),
-            onMousedown: (I) => v(I, _),
-            onMouseup: (I) => T(I, _),
-            onFocus: (I) => b(_),
-            onBlur: S
+            step: m.value,
+            class: C(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none", { "cursor-ew-resize": i.value }]),
+            value: A.value[x].toFixed(2),
+            onInput: (K) => g(K, x),
+            onMousedown: (K) => v(K, x),
+            onMouseup: (K) => T(K, x),
+            onFocus: (K) => y(x),
+            onBlur: I
           }, null, 42, st)
         ], 2))), 128))
       ])
     ], 32));
   }
-}), ct = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, ut = { class: "text-gray-500 w-1/3" }, dt = { 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" }, pt = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, ft = ["points"], ne = 160, J = 40, B = 2, oe = 100, le = 20, vt = /* @__PURE__ */ M({
+}), ct = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, ut = { class: "text-gray-500 w-1/3" }, pt = { 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" }, dt = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, ft = ["points"], ne = 160, J = 40, L = 2, oe = 100, le = 20, vt = /* @__PURE__ */ M({
   __name: "FPSGraph",
   props: {
     label: {},
     control: {}
   },
-  setup(e) {
-    const s = $e({ every: oe }), n = f(""), o = f([]), t = f(ne / B);
-    let u = performance.now();
-    return Ce(({ timestamp: a }) => {
-      a - u >= oe && (u = a, o.value.push(s.value), o.value.length > t.value && o.value.shift(), n.value = o.value.map(
-        (i, c) => `${c * B},${J + le - B / 2 - i * (J + le - B) / 120}`
+  setup(t) {
+    const s = Ce({ every: oe }), n = f(""), o = f([]), e = f(ne / L);
+    let c = performance.now();
+    return ke(({ timestamp: a }) => {
+      a - c >= oe && (c = a, o.value.push(s.value), o.value.length > e.value && o.value.shift(), n.value = o.value.map(
+        (i, u) => `${u * L},${J + le - L / 2 - i * (J + le - L) / 120}`
       ).join(" "));
-    }), (a, i) => (p(), x("div", ct, [
-      d("label", ut, k(a.label), 1),
-      d("div", dt, [
-        d("div", pt, k(Math.round(K(s))) + " FPS ", 1),
-        (p(), x("svg", {
+    }), (a, i) => (d(), h("div", ct, [
+      p("label", ut, k(a.label), 1),
+      p("div", pt, [
+        p("div", dt, k(Math.round(D(s))) + " FPS ", 1),
+        (d(), h("svg", {
           width: ne,
           height: J,
           xmlns: "http://www.w3.org/2000/svg",
           class: "bg-gray-100"
         }, [
-          d("polyline", {
+          p("polyline", {
             points: n.value,
             fill: "none",
             stroke: "lightgray",
-            "stroke-width": B,
+            "stroke-width": L,
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
           }, null, 8, ft)
@@ -512,129 +512,160 @@ const lt = { class: "text-gray-500 w-1/3" }, at = { class: "relative w-2/3 flex
       ])
     ]));
   }
-}), gt = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, yt = ["for"], bt = ["id", "value"], ht = ["value"], mt = /* @__PURE__ */ M({
+}), gt = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, bt = ["for"], yt = ["id", "value"], mt = ["value"], ht = /* @__PURE__ */ M({
   __name: "SelectControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: s }) {
+  setup(t, { emit: s }) {
     const n = s;
-    function o(t) {
-      n("change", t.target.value);
+    function o(e) {
+      n("change", e.target.value);
     }
-    return (t, u) => (p(), x("div", gt, [
-      d("label", {
+    return (e, c) => (d(), h("div", gt, [
+      p("label", {
         class: "text-gray-500 w-1/3",
-        for: t.control.uniqueKey
-      }, k(t.label), 9, yt),
-      d("select", {
-        id: t.control.uniqueKey,
-        value: t.control.value,
+        for: e.control.uniqueKey
+      }, k(e.label), 9, bt),
+      p("select", {
+        id: e.control.uniqueKey,
+        value: e.control.value,
         class: "p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",
         onChange: o
       }, [
-        (p(!0), x(z, null, N(t.control.options, (a) => (p(), x("option", {
+        (d(!0), h(O, null, N(e.control.options, (a) => (d(), h("option", {
           key: a.value,
           value: a.value
-        }, k(a.text), 9, ht))), 128))
-      ], 40, bt)
+        }, k(a.text), 9, mt))), 128))
+      ], 40, yt)
     ]));
   }
-}), de = /* @__PURE__ */ M({
+}), _t = /* @__PURE__ */ M({
+  __name: "ButtonControl",
+  props: {
+    label: {},
+    control: {}
+  },
+  setup(t) {
+    const s = t, n = V(() => {
+      const o = "btn", e = `btn-${s.control.value.variant || "primary"}`, c = `btn-${s.control.value.size || "sm"}`;
+      return [o, e, c];
+    });
+    return (o, e) => (d(), h("button", {
+      class: C(n.value),
+      onClick: e[0] || (e[0] = //@ts-ignore
+      (...c) => o.control.value.onClick && o.control.value.onClick(...c))
+    }, [
+      p("i", {
+        class: C(["mr-2", o.control.value.icon])
+      }, null, 2),
+      se(" " + k(o.control.label), 1)
+    ], 2));
+  }
+});
+const xt = /* @__PURE__ */ fe(_t, [["__scopeId", "data-v-846e24c4"]]), ve = /* @__PURE__ */ M({
   __name: "ControlInput",
   props: {
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: s }) {
+  setup(t, { emit: s }) {
     const n = s;
-    function o(t) {
-      n("change", t);
+    function o(e) {
+      n("change", e);
     }
-    return (t, u) => t.control.visible ? (p(), x(z, { key: 0 }, [
-      t.control.type === "color" ? (p(), C(nt, {
+    return (e, c) => e.control.visible ? (d(), h(O, { key: 0 }, [
+      e.control.type === "color" ? (d(), S(nt, {
         key: 0,
-        label: t.control.label,
-        control: t.control,
+        label: e.control.label,
+        control: e.control,
         onChange: o
-      }, null, 8, ["label", "control"])) : t.control.type === "select" ? (p(), C(mt, {
+      }, null, 8, ["label", "control"])) : e.control.type === "select" ? (d(), S(ht, {
         key: 1,
-        label: t.control.label,
-        control: t.control,
+        label: e.control.label,
+        control: e.control,
         onChange: o
-      }, null, 8, ["label", "control"])) : t.control.type === "vector" ? (p(), C(it, {
+      }, null, 8, ["label", "control"])) : e.control.type === "vector" ? (d(), S(it, {
         key: 2,
-        label: t.control.label,
-        control: t.control,
+        label: e.control.label,
+        control: e.control,
         onChange: o
-      }, null, 8, ["label", "control"])) : t.control.type === "boolean" ? (p(), C(Ne, {
+      }, null, 8, ["label", "control"])) : e.control.type === "boolean" ? (d(), S(We, {
         key: 3,
-        label: t.control.label,
-        control: t.control,
+        label: e.control.label,
+        control: e.control,
         onChange: o
-      }, null, 8, ["label", "control"])) : t.control.type === "fpsgraph" ? (p(), C(vt, {
+      }, null, 8, ["label", "control"])) : e.control.type === "fpsgraph" ? (d(), S(vt, {
         key: 4,
-        label: t.control.label,
-        control: t.control
-      }, null, 8, ["label", "control"])) : t.control.type === "number" ? (p(), C(Ee, {
+        label: e.control.label,
+        control: e.control
+      }, null, 8, ["label", "control"])) : e.control.type === "number" ? (d(), S(Ve, {
         key: 5,
-        label: t.control.label,
-        control: t.control,
+        label: e.control.label,
+        control: e.control,
         onChange: o
-      }, null, 8, ["label", "control"])) : t.control.type === "range" ? (p(), C(Je, {
+      }, null, 8, ["label", "control"])) : e.control.type === "range" ? (d(), S(Je, {
         key: 6,
-        label: t.control.label,
-        control: t.control,
+        label: e.control.label,
+        control: e.control,
         onChange: o
-      }, null, 8, ["label", "control"])) : (p(), C(ze, {
+      }, null, 8, ["label", "control"])) : e.control.type === "button" ? (d(), h("div", {
         key: 7,
-        label: t.control.label,
-        control: t.control,
+        class: C(["p-2", e.control.value.size === "block" ? "flex" : "inline-flex"])
+      }, [
+        ie(xt, {
+          label: e.control.label,
+          control: e.control
+        }, null, 8, ["label", "control"])
+      ], 2)) : (d(), S(Oe, {
+        key: 8,
+        label: e.control.label,
+        control: e.control,
         onChange: o
       }, null, 8, ["label", "control"]))
     ], 64)) : Y("", !0);
   }
-}), _t = { class: "mb-4" }, xt = ["aria-expanded", "data-folder"], wt = {
+}), wt = { class: "mb-4" }, $t = ["aria-expanded", "data-folder"], Ct = {
   class: "bg-white rounded-b pt-4",
   role: "menu"
-}, $t = /* @__PURE__ */ M({
+}, kt = /* @__PURE__ */ M({
   __name: "Folder",
   props: {
     controls: {},
     label: {}
   },
-  setup(e) {
-    function s(t, u) {
-      u.value = t;
+  setup(t) {
+    function s(e, c) {
+      c.value = e;
     }
     const n = f(!1), o = () => {
       n.value = !n.value;
     };
-    return (t, u) => (p(), x("div", _t, [
-      d("button", {
+    return (e, c) => (d(), h("div", wt, [
+      p("button", {
         class: "flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs font-sans cursor-pointer",
         "aria-expanded": n.value,
         "aria-haspopup": "true",
         role: "button",
-        "data-folder": t.label,
+        "data-folder": e.label,
         tabindex: "0",
         onClick: o
       }, [
-        d("span", null, k(t.label), 1),
-        d("i", {
-          class: D(n.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+        p("span", null, k(e.label), 1),
+        p("i", {
+          class: C(n.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
         }, null, 2)
-      ], 8, xt),
-      he(me, {
+      ], 8, $t),
+      ie(_e, {
         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: se(() => [
-          ae(d("div", wt, [
-            (p(!0), x(z, null, N(t.controls, (a) => (p(), C(de, {
+        default: ce(() => [
+          ae(p("div", Ct, [
+            (d(!0), h(O, null, N(e.controls, (a) => (d(), S(ve, {
               key: a.label,
               control: a,
               role: "menuitem",
@@ -648,58 +679,58 @@ const lt = { class: "text-gray-500 w-1/3" }, at = { class: "relative w-2/3 flex
       })
     ]));
   }
-}), Ct = {
+}), Mt = {
   tabindex: "0",
   class: "bg-white shadow-xl rounded border-4 border-solid border-black"
-}, kt = /* @__PURE__ */ d("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), Mt = /* @__PURE__ */ d("div", null, [
-  /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" }),
-  /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" }),
-  /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" })
-], -1), St = /* @__PURE__ */ d("div", null, null, -1), Tt = [
-  kt,
-  Mt,
-  St
-], At = 280, Ft = /* @__PURE__ */ M({
+}, St = /* @__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), It = /* @__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), Tt = /* @__PURE__ */ p("div", null, null, -1), At = [
+  St,
+  It,
+  Tt
+], Kt = 280, Vt = /* @__PURE__ */ M({
   __name: "TresLeches",
   props: {
     uuid: {}
   },
-  setup(e) {
-    const s = e, { uuid: n } = X(s), { width: o } = ie(), t = f(null), u = Ie(n == null ? void 0 : n.value);
-    function a(c, m) {
-      u[K(c)].value = m, u[K(c)][K(c)] = m;
+  setup(t) {
+    const s = t, { uuid: n } = B(s), { width: o } = ue(), e = f(null), c = Ke(n == null ? void 0 : n.value);
+    function a(u, _) {
+      c[D(u)].value = _, c[D(u)][D(u)] = _;
     }
-    const i = O(() => {
-      const c = {};
-      for (const m in u) {
-        const h = u[m], r = h.folder || "default";
-        c[r] || (c[r] = []), c[r].push(h);
+    const i = V(() => {
+      const u = {};
+      for (const _ in c) {
+        const m = c[_], r = m.folder || "default";
+        u[r] || (u[r] = []), u[r].push(m);
       }
-      return c;
+      return u;
     });
-    return (c, m) => (p(), C(K(Te), {
-      id: K(n),
-      "initial-value": { x: K(o) - At - 40, y: 10 },
-      class: D(["absolute select-none z-24 w-280px font-sans text-xs", c.$attrs.class]),
-      handle: t.value
+    return (u, _) => (d(), S(D(Te), {
+      id: D(n),
+      "initial-value": { x: D(o) - Kt - 40, y: 10 },
+      class: C(["absolute select-none z-24 w-280px font-sans text-xs", u.$attrs.class]),
+      handle: e.value
     }, {
-      default: se(() => [
-        d("div", Ct, [
-          d("header", {
+      default: ce(() => [
+        p("div", Mt, [
+          p("header", {
             ref_key: "handle",
-            ref: t,
+            ref: e,
             class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
-          }, Tt, 512),
-          (p(!0), x(z, null, N(i.value, (h, r) => (p(), x(z, { key: r }, [
-            r !== "default" ? (p(), C($t, {
+          }, At, 512),
+          (d(!0), h(O, null, N(i.value, (m, r) => (d(), h(O, { key: r }, [
+            r !== "default" ? (d(), S(kt, {
               key: 0,
               label: r,
-              controls: h
+              controls: m
             }, null, 8, ["label", "controls"])) : Y("", !0),
-            r === "default" ? (p(!0), x(z, { key: 1 }, N(h, (l) => (p(), C(de, {
+            r === "default" ? (d(!0), h(O, { key: 1 }, N(m, (l) => (d(), S(ve, {
               key: l.label,
               control: l,
-              onChange: (b) => a(l.key, b)
+              onChange: (y) => a(l.key, y)
             }, null, 8, ["control", "onChange"]))), 128)) : Y("", !0)
           ], 64))), 128))
         ])
@@ -709,7 +740,7 @@ const lt = { class: "text-gray-500 w-1/3" }, at = { class: "relative w-2/3 flex
   }
 });
 export {
-  Ft as TresLeches,
-  Dt as useControls,
-  Ie as useControlsProvider
+  Vt as TresLeches,
+  Et as useControls,
+  Ke as useControlsProvider
 };