@tresjs/leches 0.12.0 → 0.13.0

package/dist/tresleches.js

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