@tresjs/leches 0.14.0 → 0.14.1

package/dist/tresleches.js

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