@tresjs/leches 0.9.1 → 0.11.0

package/dist/tresleches.js

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