@tresjs/leches 0.7.0 → 0.8.0

package/dist/tresleches.js

@@ -1,65 +1,98 @@
 /**
  * name: @tresjs/leches
- * version: v0.7.0
+ * version: v0.8.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { unref as D, getCurrentScope as ne, onScopeDispose as oe, toRef as le, readonly as ae, customRef as se, ref as g, defineComponent as w, computed as I, reactive as H, h as re, watch as T, provide as ue, isReactive as ie, toRefs as ce, onUnmounted as fe, isRef as L, openBlock as f, createElementBlock as d, createElementVNode as u, toDisplayString as m, normalizeClass as M, withDirectives as G, vShow as q, createTextVNode as pe, normalizeStyle as ve, Fragment as E, renderList as A, createCommentVNode as J, createVNode as de, Transition as be, withCtx as Q, createBlock as _ } from "vue";
-import { useStorage as ge, isClient as ye, useDraggable as he, useMouse as R, useFps as _e, useRafFn as me, useWindowSize as we } from "@vueuse/core";
-function Z(t) {
-  return ne() ? (oe(t), !0) : !1;
+import { unref as D, isRef as O, toRefs as K, customRef as ae, watch as P, ref as v, computed as A, defineComponent as M, reactive as Y, h as ce, openBlock as d, createElementBlock as m, createElementVNode as c, toDisplayString as k, normalizeClass as I, withDirectives as q, vShow as J, createTextVNode as ue, normalizeStyle as ie, Fragment as S, renderList as U, createCommentVNode as L, createBlock as C, createVNode as pe, Transition as de, withCtx as Q, provide as fe } from "vue";
+import { useWindowSize as Z, useEventListener as N, useStorage as ve, isClient as ge, useMouse as j, useFps as he, useRafFn as ye } from "@vueuse/core";
+function T(n) {
+  return typeof n == "function" ? n() : D(n);
 }
-function P(t) {
-  return typeof t == "function" ? t() : D(t);
-}
-const O = typeof window < "u", F = () => {
-}, X = /* @__PURE__ */ xe();
-function xe() {
-  var t;
-  return O && ((t = window == null ? void 0 : window.navigator) == null ? void 0 : t.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
-}
-function $e(...t) {
-  if (t.length !== 1)
-    return le(...t);
-  const o = t[0];
-  return typeof o == "function" ? ae(se(() => ({ get: o, set: F }))) : g(o);
-}
-function ke(t) {
-  var o;
-  const e = P(t);
-  return (o = e == null ? void 0 : e.$el) != null ? o : e;
+const ee = typeof window < "u" && typeof document < "u";
+function be(n, o = {}) {
+  if (!O(n))
+    return K(n);
+  const t = Array.isArray(n.value) ? Array.from({ length: n.value.length }) : {};
+  for (const e in n.value)
+    t[e] = ae(() => ({
+      get() {
+        return n.value[e];
+      },
+      set(l) {
+        var u;
+        if ((u = T(o.replaceRef)) != null ? u : !0)
+          if (Array.isArray(n.value)) {
+            const p = [...n.value];
+            p[e] = l, n.value = p;
+          } else {
+            const p = { ...n.value, [e]: l };
+            Object.setPrototypeOf(p, Object.getPrototypeOf(n.value)), n.value = p;
+          }
+        else
+          n.value[e] = l;
+      }
+    }));
+  return t;
 }
-const Ce = O ? window : void 0;
-function Me(...t) {
-  let o, e, n, l;
-  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([e, n, l] = t, o = Ce) : [o, e, n, l] = t, !o)
-    return F;
-  Array.isArray(e) || (e = [e]), Array.isArray(n) || (n = [n]);
-  const a = [], s = () => {
-    a.forEach((c) => c()), a.length = 0;
-  }, i = (c, r, v, C) => (c.addEventListener(r, v, C), () => c.removeEventListener(r, v, C)), p = T(
-    () => [ke(o), P(l)],
-    ([c, r]) => {
-      s(), c && a.push(
-        ...e.flatMap((v) => n.map((C) => i(c, v, C, r)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), x = () => {
-    p(), s();
+const me = ee ? window : void 0;
+function _e(n, o = {}) {
+  const {
+    pointerTypes: t,
+    preventDefault: e,
+    stopPropagation: l,
+    exact: u,
+    onMove: a,
+    onEnd: p,
+    onStart: f,
+    initialValue: g,
+    axis: r = "both",
+    draggingElement: s = me,
+    handle: i = n
+  } = o, { width: $ } = Z();
+  let _ = $.value;
+  P($, () => {
+    const y = $.value - _;
+    h.value.x += y, _ = $.value;
+  });
+  const h = v(
+    T(g) ?? { x: 0, y: 0 }
+  ), x = v(), b = (y) => t ? t.includes(y.pointerType) : !0, w = (y) => {
+    T(e) && y.preventDefault(), T(l) && y.stopPropagation();
+  }, le = (y) => {
+    if (!b(y) || T(u) && y.target !== T(n))
+      return;
+    const F = T(n).getBoundingClientRect(), V = {
+      x: y.clientX - F.left,
+      y: y.clientY - F.top
+    };
+    (f == null ? void 0 : f(V, y)) !== !1 && (x.value = V, w(y));
+  }, re = (y) => {
+    if (!b(y) || !x.value)
+      return;
+    let { x: F, y: V } = h.value;
+    (r === "x" || r === "both") && (F = y.clientX - x.value.x), (r === "y" || r === "both") && (V = y.clientY - x.value.y), h.value = {
+      x: F,
+      y: V
+    }, a == null || a(h.value, y), w(y);
+  }, se = (y) => {
+    b(y) && x.value && (x.value = void 0, p == null || p(h.value, y), w(y));
+  };
+  if (ee) {
+    const y = { capture: o.capture ?? !0 };
+    N(i, "pointerdown", le, y), N(s, "pointermove", re, y), N(s, "pointerup", se, y);
+  }
+  return {
+    ...be(h),
+    position: h,
+    isDragging: A(() => !!x.value),
+    style: A(
+      () => `left:${h.value.x}px;top:${h.value.y}px;`
+    )
   };
-  return Z(x), x;
 }
-var Se = Object.defineProperty, Ie = Object.defineProperties, Te = Object.getOwnPropertyDescriptors, U = Object.getOwnPropertySymbols, je = Object.prototype.hasOwnProperty, De = Object.prototype.propertyIsEnumerable, W = (t, o, e) => o in t ? Se(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e, Pe = (t, o) => {
-  for (var e in o || (o = {}))
-    je.call(o, e) && W(t, e, o[e]);
-  if (U)
-    for (var e of U(o))
-      De.call(o, e) && W(t, e, o[e]);
-  return t;
-}, Ee = (t, o) => Ie(t, Te(o));
-const Ae = /* @__PURE__ */ w({
+const xe = /* @__PURE__ */ M({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -76,601 +109,529 @@ const Ae = /* @__PURE__ */ w({
     "onMove",
     "onEnd"
   ],
-  setup(t, { slots: o }) {
-    const e = g(), n = I(() => {
-      var p;
-      return (p = t.handle) != null ? p : e.value;
-    }), l = t.storageKey && ge(
-      t.storageKey,
-      P(t.initialValue) || { x: 0, y: 0 },
-      ye ? t.storageType === "session" ? sessionStorage : localStorage : void 0
-    ), a = l || t.initialValue || { x: 0, y: 0 }, s = (p, x) => {
-      var c;
-      (c = t.onEnd) == null || c.call(t, p, x), l && (l.value.x = p.x, l.value.y = p.y);
-    }, i = H(he(e, Ee(Pe({}, t), {
-      handle: n,
-      initialValue: a,
-      onEnd: s
-    })));
+  setup(n, { slots: o }) {
+    const t = v(), e = A(() => n.handle ?? t.value), l = n.storageKey && ve(
+      n.storageKey,
+      T(n.initialValue) || { x: 0, y: 0 },
+      ge ? n.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), u = l || n.initialValue || { x: 0, y: 0 }, p = Y(_e(t, {
+      ...n,
+      handle: e,
+      initialValue: u,
+      onEnd: (f, g) => {
+        var r;
+        (r = n.onEnd) == null || r.call(n, f, g), l && (l.value.x = f.x, l.value.y = f.y);
+      }
+    }));
     return () => {
       if (o.default)
-        return re(t.as || "div", { ref: e, style: `touch-action:none;${i.style}` }, o.default(i));
-    };
-  }
-});
-function N(t) {
-  const o = window.getComputedStyle(t);
-  if (o.overflowX === "scroll" || o.overflowY === "scroll" || o.overflowX === "auto" && t.clientWidth < t.scrollWidth || o.overflowY === "auto" && t.clientHeight < t.scrollHeight)
-    return !0;
-  {
-    const e = t.parentNode;
-    return !e || e.tagName === "BODY" ? !1 : N(e);
-  }
-}
-function Le(t) {
-  const o = t || window.event, e = o.target;
-  return N(e) ? !1 : o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
-}
-function Ve(t, o = !1) {
-  const e = g(o);
-  let n = null, l;
-  T($e(t), (i) => {
-    if (i) {
-      const p = i;
-      l = p.style.overflow, e.value && (p.style.overflow = "hidden");
-    }
-  }, {
-    immediate: !0
-  });
-  const a = () => {
-    const i = P(t);
-    !i || e.value || (X && (n = Me(
-      i,
-      "touchmove",
-      (p) => {
-        Le(p);
-      },
-      { passive: !1 }
-    )), i.style.overflow = "hidden", e.value = !0);
-  }, s = () => {
-    const i = P(t);
-    !i || !e.value || (X && (n == null || n()), i.style.overflow = l, e.value = !1);
-  };
-  return Z(s), I({
-    get() {
-      return e.value;
-    },
-    set(i) {
-      i ? a() : s();
-    }
-  });
-}
-function ze() {
-  let t = !1;
-  const o = g(!1);
-  return (e, n) => {
-    if (o.value = n.value, t)
-      return;
-    t = !0;
-    const l = Ve(e, n.value);
-    T(o, (a) => l.value = a);
-  };
-}
-ze();
-const Re = Symbol("CONTROLS_CONTEXT_KEY"), y = H({});
-function Xe() {
-  return ue(Re, y), y;
-}
-function V(t) {
-  return Object.entries(t).map(([o, e]) => {
-    let n = "string", l;
-    const a = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-    return !L(e) && e.value || L(e) ? (n = typeof e.value, l = e.value) : (n = typeof e, l = e), n === "number" && (e.step || e.max || e.min) && (n = "range"), n === "string" && a.test(l) && (n = "color"), (l.isVector3 || l instanceof Array) && (n = "vector"), !L(e) && e.value ? {
-      ...e,
-      label: e.label || o,
-      value: e.value,
-      type: n,
-      visible: !0
-    } : {
-      label: e.label || o,
-      value: e,
-      type: n,
-      visible: !0
+        return ce(n.as || "div", { ref: t, style: `touch-action:none;${p.style}` }, o.default(p));
     };
-  });
-}
-function Ue() {
-  for (const t in y)
-    delete y[t];
-}
-function Bt(t, o, e) {
-  const n = g();
-  if (typeof t == "string")
-    t === "fpsgraph" ? (y[t] = {
-      label: "fpsgraph",
-      visible: !0,
-      type: "fpsgraph"
-    }, n.value = y[t]) : (y[t] = {
-      label: t,
-      visible: !0,
-      type: "folder",
-      controls: o ? V(o) : []
-    }, n.value = y[t]);
-  else if (typeof t == "object" && t.options)
-    y[t.label || "Dropdown"] = {
-      ...e,
-      label: t.label || "Dropdown",
-      visible: !0,
-      value: t.value,
-      type: "select",
-      ref: t,
-      options: t.options
-    }, n.value = y[t.label || "Dropdown"];
-  else if (typeof t == "object" && typeof o == "string")
-    y[o] = {
-      ...e,
-      label: o,
-      visible: !0,
-      value: t[o],
-      type: typeof t[o],
-      ref: t
-    }, n.value = y[o];
-  else if (ie(t)) {
-    const l = ce(t), a = V(l);
-    for (const s of a)
-      y[s.label] = s;
-    n.value = a;
-  } else {
-    const l = V(t);
-    for (const a of l)
-      y[a.label] = a;
-    n.value = l;
   }
-  return fe(Ue), n;
-}
-const We = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Be = { class: "text-gray-500 w-1/3" }, Ke = ["value", "min", "max", "step"], Ye = /* @__PURE__ */ w({
+}), we = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, $e = { class: "text-gray-500 w-1/3" }, Ce = ["value", "min", "max", "step"], ke = /* @__PURE__ */ M({
   __name: "NumberControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(t, { emit: o }) {
-    const e = t;
-    function n(c) {
-      const { target: r } = c;
-      o("change", r.valueAsNumber);
+  setup(n, { emit: o }) {
+    const t = n;
+    function e(r) {
+      const { target: s } = r;
+      o("change", s.valueAsNumber);
     }
-    const l = R(), a = g(0), s = g(!1), i = (c) => {
-      a.value = c.clientX, s.value = !0;
-    }, p = () => {
-      s.value = !1;
-    }, x = (c) => Math.floor(Math.abs(c) / 10);
-    return T(l.x, (c) => {
-      if (s.value) {
-        const r = c - a.value, v = x(r);
-        r > 0 ? o("change", e.control.value + 1 + v) : r < 0 && o("change", e.control.value - 1 + v), e.control.min !== void 0 && e.control.value < e.control.min && o("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && o("change", e.control.max), a.value = c;
+    const l = j(), u = v(0), a = v(!1), p = (r) => {
+      u.value = r.clientX, a.value = !0;
+    }, f = () => {
+      a.value = !1;
+    }, g = (r) => Math.floor(Math.abs(r) / 10);
+    return P(l.x, (r) => {
+      if (a.value) {
+        const s = r - u.value, i = g(s);
+        s > 0 ? o("change", t.control.value + 1 + i) : s < 0 && o("change", t.control.value - 1 + i), t.control.min !== void 0 && t.control.value < t.control.min && o("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && o("change", t.control.max), u.value = r;
       }
-    }), (c, r) => (f(), d("div", We, [
-      u("label", Be, m(c.label), 1),
-      u("input", {
-        value: c.control.value,
-        class: M(["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": s.value }]),
+    }), (r, s) => (d(), m("div", we, [
+      c("label", $e, k(r.label), 1),
+      c("input", {
+        value: r.control.value,
+        class: I(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": a.value }]),
         type: "number",
-        min: c.control.min,
-        max: c.control.max,
-        step: c.control.step,
-        onInput: n,
-        onMousedown: i,
-        onMouseup: p
-      }, null, 42, Ke)
+        min: r.control.min,
+        max: r.control.max,
+        step: r.control.step,
+        onInput: e,
+        onMousedown: p,
+        onMouseup: f
+      }, null, 42, Ce)
     ]));
   }
-}), He = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Ge = { class: "text-gray-500 w-1/3" }, qe = ["value"], Je = /* @__PURE__ */ w({
+}), Me = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Te = { class: "text-gray-500 w-1/3" }, Ie = ["value"], Se = /* @__PURE__ */ M({
   __name: "TextControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(t, { emit: o }) {
-    function e(n) {
-      o("change", n);
+  setup(n, { emit: o }) {
+    function t(e) {
+      const { target: l } = e;
+      o("change", l.value);
     }
-    return (n, l) => (f(), d("div", He, [
-      u("label", Ge, m(n.label), 1),
-      u("input", {
-        value: n.control.value,
-        type: "string",
+    return (e, l) => (d(), m("div", Me, [
+      c("label", Te, k(e.label), 1),
+      c("input", {
+        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: e
-      }, null, 40, qe)
+        onChange: t
+      }, null, 40, Ie)
     ]));
   }
-}), Qe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Ze = { class: "text-gray-500 w-1/3" }, Oe = ["id", "checked"], Fe = ["for"], Ne = { class: "i-ic:baseline-check text-light" }, et = /* @__PURE__ */ w({
+}), Ae = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, De = { class: "text-gray-500 w-1/3" }, Ee = ["id", "checked"], Fe = ["for"], Ve = { class: "i-ic:baseline-check text-light" }, ze = /* @__PURE__ */ M({
   __name: "BooleanControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(t, { emit: o }) {
-    function e(n) {
-      const { target: l } = n;
+  setup(n, { emit: o }) {
+    function t(e) {
+      const { target: l } = e;
       o("change", l.checked);
     }
-    return (n, l) => (f(), d("div", Qe, [
-      u("label", Ze, m(n.label), 1),
-      u("input", {
-        id: n.control.label,
-        checked: n.control.value,
+    return (e, l) => (d(), m("div", Ae, [
+      c("label", De, k(e.label), 1),
+      c("input", {
+        id: e.control.label,
+        checked: e.control.value,
         class: "hidden",
         type: "checkbox",
-        onInput: e
-      }, null, 40, Oe),
-      u("label", {
-        for: n.control.label,
+        onInput: t
+      }, null, 40, Ee),
+      c("label", {
+        for: e.control.label,
         class: "inline-flex items-center cursor-pointer"
       }, [
-        u("span", {
-          class: M([{ "bg-dark-500": n.control.value, "bg-gray-200": !n.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])
+        c("span", {
+          class: I([{ "bg-dark-500": e.control.value, "bg-gray-200": !e.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])
         }, [
-          G(u("i", Ne, null, 512), [
-            [q, n.control.value]
+          q(c("i", Ve, null, 512), [
+            [J, e.control.value]
           ])
         ], 2)
       ], 8, Fe)
     ]));
   }
-}), tt = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, nt = ["value", "min", "max", "step"], ot = ["value", "min", "max", "step"], lt = /* @__PURE__ */ w({
+}), Ue = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, Xe = ["value", "min", "max", "step"], Oe = ["value", "min", "max", "step"], Le = /* @__PURE__ */ M({
   __name: "SliderControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(t, { emit: o }) {
-    const e = t;
-    function n(r) {
-      const { target: v } = r;
-      o("change", v.valueAsNumber);
+  setup(n, { emit: o }) {
+    const t = n;
+    function e(s) {
+      const { target: i } = s;
+      o("change", i.valueAsNumber);
     }
-    const l = I(() => ({
-      backgroundImage: `linear-gradient(to right, #333 0% ${100 * (e.control.value - (e.control.min || 0)) / ((e.control.max || 100) - (e.control.min || 0))}%, #e2e2e2 0%)`
-    })), a = R(), s = g(0), i = g(!1), p = (r) => {
-      s.value = r.clientX, i.value = !0;
-    }, x = () => {
-      i.value = !1;
-    }, c = (r) => Math.floor(Math.abs(r) / 10);
-    return T(a.x, (r) => {
-      if (i.value) {
-        const v = r - s.value, C = c(v);
-        v > 0 ? o("change", e.control.value + 1 + C) : v < 0 && o("change", e.control.value - 1 + C), e.control.min !== void 0 && e.control.value < e.control.min && o("change", e.control.min), e.control.max !== void 0 && e.control.value > e.control.max && o("change", e.control.max), s.value = r;
+    const l = A(() => ({
+      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%)`
+    })), u = j(), a = v(0), p = v(!1), f = (s) => {
+      a.value = s.clientX, p.value = !0;
+    }, g = () => {
+      p.value = !1;
+    }, r = (s) => Math.floor(Math.abs(s) / 10);
+    return P(u.x, (s) => {
+      if (p.value) {
+        const i = s - a.value, $ = r(i);
+        i > 0 ? o("change", t.control.value + 1 + $) : i < 0 && o("change", t.control.value - 1 + $), t.control.min !== void 0 && t.control.value < t.control.min && o("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && o("change", t.control.max), a.value = s;
       }
-    }), (r, v) => (f(), d("div", tt, [
-      u("label", {
-        class: M(["text-gray-500 w-1/3", { "flex justify-between items-center": r.control.icon }])
+    }), (s, i) => (d(), m("div", Ue, [
+      c("label", {
+        class: I(["text-gray-500 w-1/3", { "flex justify-between items-center": s.control.icon }])
       }, [
-        pe(m(r.label) + " ", 1),
-        u("i", {
-          class: M(`i-${r.control.icon}`)
+        ue(k(s.label) + " ", 1),
+        c("i", {
+          class: I(`i-${s.control.icon}`)
         }, null, 2)
       ], 2),
-      u("input", {
-        value: r.control.value,
+      c("input", {
+        value: s.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: ve(l.value),
+        style: ie(l.value),
         type: "range",
-        min: r.control.min,
-        max: r.control.max,
-        step: r.control.step,
-        onInput: n
-      }, null, 44, nt),
-      u("input", {
-        value: r.control.value,
-        class: M(["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": i.value }]),
+        min: s.control.min,
+        max: s.control.max,
+        step: s.control.step,
+        onInput: e
+      }, null, 44, Xe),
+      c("input", {
+        value: s.control.value,
+        class: I(["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 }]),
         type: "number",
-        min: r.control.min,
-        max: r.control.max,
-        step: r.control.step,
-        onInput: n,
-        onMousedown: p,
-        onMouseup: x
-      }, null, 42, ot)
+        min: s.control.min,
+        max: s.control.max,
+        step: s.control.step,
+        onInput: e,
+        onMousedown: f,
+        onMouseup: g
+      }, null, 42, Oe)
     ]));
   }
 });
-const at = (t, o) => {
-  const e = t.__vccOpts || t;
-  for (const [n, l] of o)
-    e[n] = l;
-  return e;
-}, st = /* @__PURE__ */ at(lt, [["__scopeId", "data-v-743fd350"]]), rt = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, ut = { class: "text-gray-500 w-1/3" }, it = ["value"], ct = ["value"], ft = /* @__PURE__ */ w({
+const Pe = (n, o) => {
+  const t = n.__vccOpts || n;
+  for (const [e, l] of o)
+    t[e] = l;
+  return t;
+}, Ne = /* @__PURE__ */ Pe(Le, [["__scopeId", "data-v-743fd350"]]), We = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Be = { class: "text-gray-500 w-1/3" }, Ke = ["value"], Ye = ["value"], je = /* @__PURE__ */ M({
   __name: "ColorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(t, { emit: o }) {
-    function e(n) {
-      const { target: l } = n;
+  setup(n, { emit: o }) {
+    function t(e) {
+      const { target: l } = e;
       o("change", l.value);
     }
-    return (n, l) => (f(), d("div", rt, [
-      u("label", ut, m(n.label), 1),
-      u("input", {
-        value: n.control.value,
+    return (e, l) => (d(), m("div", We, [
+      c("label", Be, k(e.label), 1),
+      c("input", {
+        value: e.control.value,
         type: "color",
-        onInput: e
-      }, null, 40, it),
-      u("input", {
-        value: n.control.value,
+        onInput: t
+      }, null, 40, Ke),
+      c("input", {
+        value: e.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",
         type: "text",
-        onInput: e
-      }, null, 40, ct)
+        onInput: t
+      }, null, 40, Ye)
     ]));
   }
 });
-function pt(t) {
-  if (typeof t == "number")
-    return [t, t, t];
-  if (ee(t)) {
-    const { x: o, y: e, z: n } = t;
-    return [o, e, n];
+function He(n) {
+  if (typeof n == "number")
+    return [n, n, n];
+  if (ne(n)) {
+    const { x: o, y: t, z: e } = n;
+    return [o, t, e];
   }
-  return t;
+  return n;
 }
-function vt(t) {
-  return t && typeof t.x == "number" && typeof t.y == "number" && typeof t.z > "u";
+function Re(n) {
+  return n && typeof n.x == "number" && typeof n.y == "number" && typeof n.z > "u";
 }
-function ee(t) {
-  return t && typeof t.x == "number" && typeof t.y == "number" && typeof t.z == "number";
+function ne(n) {
+  return n && typeof n.x == "number" && typeof n.y == "number" && typeof n.z == "number";
 }
-const dt = { class: "flex px-4 justify-between gap-2 items-center mb-2" }, bt = { class: "text-gray-500 w-1/3" }, gt = { class: "w-2/3 flex justify-between gap-1" }, yt = {
+const Ge = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, qe = { class: "text-gray-500 w-1/3" }, Je = { class: "w-2/3 flex justify-between gap-0.5" }, Qe = {
   key: 0,
-  class: "font-bold px-0.5 py-1 text-0.65rem text-gray-300"
-}, ht = ["value", "onInput", "onMousedown", "onMouseup"], _t = /* @__PURE__ */ w({
+  class: "font-bold px-1 py-1 text-0.65rem text-gray-300"
+}, Ze = ["value", "onInput", "onMousedown", "onMouseup"], en = /* @__PURE__ */ M({
   __name: "VectorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(t, { emit: o }) {
-    const e = t, n = R(), l = g(0), a = g(!1), s = g(0), i = (h, $) => {
-      s.value = $, l.value = h.clientX, a.value = !0;
-    }, p = (h, $) => {
-      s.value = $, a.value = !1;
-    }, x = (h) => Math.floor(Math.abs(h) / 10), c = I(() => pt(e.control.value)), r = I(() => Object.keys(e.control.value)), v = I(() => vt(e.control.value) || ee(e.control.value));
-    function C(h, $) {
-      const { value: S } = e.control, { target: b } = h;
-      s.value = $, S[v.value ? r.value[s.value] : s.value] = parseInt(b.value, 10), o("change", S);
+  setup(n, { emit: o }) {
+    const t = n, e = j(), l = v(0), u = v(!1), a = v(0), p = (_, h) => {
+      a.value = h, l.value = _.clientX, u.value = !0;
+    }, f = (_, h) => {
+      a.value = h, u.value = !1;
+    }, g = (_) => Math.floor(Math.abs(_) / 10), r = A(() => He(t.control.value)), s = v(["x", "y", "z"]), i = A(() => Re(t.control.value) || ne(t.control.value));
+    function $(_, h) {
+      const { value: x } = t.control, { target: b } = _;
+      a.value = h, x[i.value ? s.value[a.value] : a.value] = parseInt(b.value, 10), o("change", x);
     }
-    return T(n.x, (h) => {
-      if (a.value) {
-        const $ = h - l.value, S = x($), { value: b } = e.control, k = v.value ? r.value[s.value] : s.value;
-        $ > 0 ? b[k] += 1 + S : $ < 0 && (b[k] -= 1 + S), e.control.min !== void 0 && b < e.control.min && (b[k] = e.control.min), e.control.max !== void 0 && b > e.control.max && (b[k] = e.control.max), o("change", b), l.value = h;
+    return P(e.x, (_) => {
+      if (u.value) {
+        const h = _ - l.value, x = g(h), { value: b } = t.control, w = i.value ? s.value[a.value] : a.value;
+        h > 0 ? b[w] += 0.1 + x : h < 0 && (b[w] -= 0.1 + x), t.control.min !== void 0 && b < t.control.min && (b[w] = t.control.min), t.control.max !== void 0 && b > t.control.max && (b[w] = t.control.max), o("change", b), l.value = _;
       }
-    }), (h, $) => (f(), d("div", dt, [
-      u("label", bt, m(h.label), 1),
-      u("div", gt, [
-        (f(!0), d(E, null, A(c.value, (S, b) => (f(), d("div", {
-          key: h.label + b,
+    }), (_, h) => (d(), m("div", Ge, [
+      c("label", qe, k(_.label), 1),
+      c("div", Je, [
+        (d(!0), m(S, null, U(r.value, (x, b) => (d(), m("div", {
+          key: _.label + b,
           class: "flex items-center w-1/3 bg-gray-100 rounded"
         }, [
-          r.value[b] && v.value ? (f(), d("span", yt, m(r.value[b]), 1)) : J("", !0),
-          u("input", {
+          s.value[b] && i.value ? (d(), m("span", Qe, k(s.value[b]), 1)) : L("", !0),
+          c("input", {
             type: "text",
-            class: M(["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": a.value }]),
-            value: c.value[b].toFixed(2),
-            onInput: (k) => C(k, b),
-            onMousedown: (k) => i(k, b),
-            onMouseup: (k) => p(k, b)
-          }, null, 42, ht)
+            class: I(["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": u.value }]),
+            value: r.value[b].toFixed(2),
+            onInput: (w) => $(w, b),
+            onMousedown: (w) => p(w, b),
+            onMouseup: (w) => f(w, b)
+          }, null, 42, Ze)
         ]))), 128))
       ])
     ]));
   }
-}), mt = { class: "mb-4" }, wt = { class: "bg-white rounded-b pt-4" }, xt = /* @__PURE__ */ w({
-  __name: "Folder",
-  props: {
-    control: {}
-  },
-  setup(t) {
-    function o(l, a) {
-      a.value = l;
-    }
-    const e = g(!1), n = () => {
-      e.value = !e.value;
-    };
-    return (l, a) => (f(), d("div", mt, [
-      u("button", {
-        class: "flex items-center justify-between w-full p-4 bg-gray-100 border-none text-gray-400 font-bold text-xs focus:outline-none font-sans cursor-pointer",
-        onClick: n
-      }, [
-        u("span", null, m(l.control.label), 1),
-        u("i", {
-          class: M(e.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
-        }, null, 2)
-      ]),
-      de(be, {
-        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(() => [
-          G(u("div", wt, [
-            (f(!0), d(E, null, A(l.control.controls, (s) => (f(), _(te, {
-              key: s.label,
-              control: s,
-              onChange: (i) => o(i, s)
-            }, null, 8, ["control", "onChange"]))), 128))
-          ], 512), [
-            [q, e.value]
-          ])
-        ]),
-        _: 1
-      })
-    ]));
-  }
-}), $t = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, kt = { class: "text-gray-500 w-1/3" }, Ct = { 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" }, Mt = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, St = ["points"], B = 160, z = 40, j = 2, K = 100, Y = 20, It = /* @__PURE__ */ w({
+}), nn = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, tn = { class: "text-gray-500 w-1/3" }, on = { 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" }, ln = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, rn = ["points"], H = 160, W = 40, z = 2, R = 100, G = 20, sn = /* @__PURE__ */ M({
   __name: "FPSGraph",
   props: {
     label: {},
     control: {}
   },
-  setup(t) {
-    const o = _e({ every: K }), e = g(""), n = g([]), l = g(B / j);
-    let a = performance.now();
-    return me(({ timestamp: s }) => {
-      s - a >= K && (a = s, n.value.push(o.value), n.value.length > l.value && n.value.shift(), e.value = n.value.map(
-        (i, p) => `${p * j},${z + Y - j / 2 - i * (z + Y - j) / 120}`
+  setup(n) {
+    const o = he({ every: R }), t = v(""), e = v([]), l = v(H / z);
+    let u = performance.now();
+    return ye(({ timestamp: a }) => {
+      a - u >= R && (u = a, e.value.push(o.value), e.value.length > l.value && e.value.shift(), t.value = e.value.map(
+        (p, f) => `${f * z},${W + G - z / 2 - p * (W + G - z) / 120}`
       ).join(" "));
-    }), (s, i) => (f(), d("div", $t, [
-      u("label", kt, m(s.label), 1),
-      u("div", Ct, [
-        u("div", Mt, m(Math.round(D(o))) + " FPS", 1),
-        (f(), d("svg", {
-          width: B,
-          height: z,
+    }), (a, p) => (d(), m("div", nn, [
+      c("label", tn, k(a.label), 1),
+      c("div", on, [
+        c("div", ln, k(Math.round(D(o))) + " FPS", 1),
+        (d(), m("svg", {
+          width: H,
+          height: W,
           xmlns: "http://www.w3.org/2000/svg",
           class: "bg-gray-100"
         }, [
-          u("polyline", {
-            points: e.value,
+          c("polyline", {
+            points: t.value,
             fill: "none",
             stroke: "lightgray",
-            "stroke-width": j,
+            "stroke-width": z,
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
-          }, null, 8, St)
+          }, null, 8, rn)
         ]))
       ])
     ]));
   }
-}), Tt = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, jt = { class: "text-gray-500 w-1/3" }, Dt = ["value"], Pt = ["value"], Et = /* @__PURE__ */ w({
+}), an = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, cn = { class: "text-gray-500 w-1/3" }, un = ["value"], pn = ["value"], dn = /* @__PURE__ */ M({
   __name: "SelectControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(t, { emit: o }) {
-    function e(n) {
-      o("change", n.target.value);
+  setup(n, { emit: o }) {
+    function t(e) {
+      o("change", e.target.value);
     }
-    return (n, l) => (f(), d("div", Tt, [
-      u("label", jt, m(n.label), 1),
-      u("select", {
-        value: n.control.value,
+    return (e, l) => (d(), m("div", an, [
+      c("label", cn, k(e.label), 1),
+      c("select", {
+        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: e
+        onChange: t
       }, [
-        (f(!0), d(E, null, A(n.control.options, (a) => (f(), d("option", {
-          key: a.value,
-          value: a.value
-        }, m(a.text), 9, Pt))), 128))
-      ], 40, Dt)
+        (d(!0), m(S, null, U(e.control.options, (u) => (d(), m("option", {
+          key: u.value,
+          value: u.value
+        }, k(u.text), 9, pn))), 128))
+      ], 40, un)
     ]));
   }
-}), te = /* @__PURE__ */ w({
+}), te = /* @__PURE__ */ M({
   __name: "ControlInput",
   props: {
     control: {}
   },
   emits: ["change"],
-  setup(t, { emit: o }) {
-    function e(n) {
-      o("change", n);
+  setup(n, { emit: o }) {
+    function t(e) {
+      o("change", e);
     }
-    return (n, l) => n.control.visible ? (f(), d(E, { key: 0 }, [
-      n.control.type === "color" ? (f(), _(ft, {
+    return (e, l) => e.control.visible ? (d(), m(S, { key: 0 }, [
+      e.control.type === "color" ? (d(), C(je, {
         key: 0,
-        label: n.control.label,
-        control: n.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : n.control.type === "vector" ? (f(), _(_t, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "select" ? (d(), C(dn, {
         key: 1,
-        label: n.control.label,
-        control: n.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : n.control.type === "boolean" ? (f(), _(et, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "vector" ? (d(), C(en, {
         key: 2,
-        label: n.control.label,
-        control: n.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : n.control.type === "fpsgraph" ? (f(), _(It, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "boolean" ? (d(), C(ze, {
         key: 3,
-        label: n.control.label,
-        control: n.control
-      }, null, 8, ["label", "control"])) : n.control.type === "folder" ? (f(), _(xt, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "fpsgraph" ? (d(), C(sn, {
         key: 4,
-        label: n.control.label,
-        control: n.control
-      }, null, 8, ["label", "control"])) : n.control.type === "number" ? (f(), _(Ye, {
+        label: e.control.label,
+        control: e.control
+      }, null, 8, ["label", "control"])) : e.control.type === "number" ? (d(), C(ke, {
         key: 5,
-        label: n.control.label,
-        control: n.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : n.control.type === "range" ? (f(), _(st, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : e.control.type === "range" ? (d(), C(Ne, {
         key: 6,
-        label: n.control.label,
-        control: n.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : n.control.type === "select" ? (f(), _(Et, {
+        label: e.control.label,
+        control: e.control,
+        onChange: t
+      }, null, 8, ["label", "control"])) : (d(), C(Se, {
         key: 7,
-        label: n.control.label,
-        control: n.control,
-        onChange: e
-      }, null, 8, ["label", "control"])) : (f(), _(Je, {
-        key: 8,
-        label: n.control.label,
-        control: n.control,
-        onChange: e
+        label: e.control.label,
+        control: e.control,
+        onChange: t
       }, null, 8, ["label", "control"]))
-    ], 64)) : J("", !0);
+    ], 64)) : L("", !0);
   }
-}), At = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, Lt = /* @__PURE__ */ u("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), Vt = /* @__PURE__ */ u("div", null, [
-  /* @__PURE__ */ u("i", { class: "i-ic-baseline-drag-indicator" }),
-  /* @__PURE__ */ u("i", { class: "i-ic-baseline-drag-indicator" }),
-  /* @__PURE__ */ u("i", { class: "i-ic-baseline-drag-indicator" })
-], -1), zt = /* @__PURE__ */ u("div", null, null, -1), Rt = [
-  Lt,
-  Vt,
-  zt
-], Xt = 280, Kt = /* @__PURE__ */ w({
+}), fn = { class: "mb-4" }, vn = { class: "bg-white rounded-b pt-4" }, gn = /* @__PURE__ */ M({
+  __name: "Folder",
+  props: {
+    controls: {},
+    label: {}
+  },
+  setup(n) {
+    function o(l, u) {
+      u.value = l;
+    }
+    const t = v(!1), e = () => {
+      t.value = !t.value;
+    };
+    return (l, u) => (d(), m("div", fn, [
+      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: e
+      }, [
+        c("span", null, k(l.label), 1),
+        c("i", {
+          class: I(t.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+        }, null, 2)
+      ]),
+      pe(de, {
+        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", vn, [
+            (d(!0), m(S, null, U(l.controls, (a) => (d(), C(te, {
+              key: a.label,
+              control: a,
+              onChange: (p) => o(p, a)
+            }, null, 8, ["control", "onChange"]))), 128))
+          ], 512), [
+            [J, t.value]
+          ])
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), hn = Symbol("CONTROLS_CONTEXT_KEY"), oe = "default";
+function yn(n = oe) {
+  return fe(hn, E), E[n];
+}
+const E = Y({}), B = (n) => {
+  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 n == "boolean" ? "boolean" : typeof n == "number" ? "number" : typeof n == "string" && o.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) && n.options.every((t) => "text" in t && "value" in t) ? "select" : "unknown";
+}, X = (n, o, t, e) => {
+  const l = {
+    label: v(n),
+    name: v(n),
+    type: v(t),
+    value: v(o),
+    visible: v(!0),
+    [n]: v(o)
+  };
+  return e && (l.folder = v(e)), l;
+}, Mn = (n, o, t) => {
+  const e = [], l = typeof n == "string" ? n : null, u = l ? o : n, a = l && l !== "fpsgraph" ? t : o, p = (a == null ? void 0 : a.uuid) || oe;
+  if (E[p] || (E[p] = Y({})), n === "fpsgraph") {
+    const g = X("fpsgraph", null, "fpsgraph", null);
+    return E[p].fpsgraph = g, e.push(g), e.length === 1 ? e[0] : e;
+  }
+  const f = E[p];
+  for (const g in u) {
+    let r = u[g];
+    if (typeof r == "object" && !O(r) && !Array.isArray(r) && r.value !== void 0) {
+      const i = r, $ = O(i.value) ? i.value : v(i.value), _ = B(i), h = X(g, $, _, l);
+      _ === "select" && (h.options = v(i.options)), _ === "range" && (h.min = v(i.min), h.max = v(i.max), h.step = v(i.step)), f[g] = h, e.push(h);
+      continue;
+    }
+    if (O(r)) {
+      const i = X(g, r, B(r.value), l);
+      f[g] = i, e.push(i);
+      continue;
+    } else if (typeof r == "object" && !Array.isArray(r)) {
+      const i = K(r);
+      i[g] && (r = i[g]);
+    }
+    const s = X(g, r, B(r), l);
+    f[g] = s, e.push(s);
+  }
+  return e.length === 1 ? e[0] : e;
+}, bn = { class: "bg-white shadow-xl rounded border-4 border-solid border-black" }, mn = /* @__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), _n = /* @__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), xn = /* @__PURE__ */ c("div", null, null, -1), wn = [
+  mn,
+  _n,
+  xn
+], $n = 280, Tn = /* @__PURE__ */ M({
   __name: "TresLeches",
-  setup(t) {
-    const { width: o } = we(), e = g(null), n = Xe();
-    function l(a, s) {
-      s.ref && (s.ref[s.label] = a), s.value = a;
+  props: {
+    uuid: {}
+  },
+  setup(n) {
+    const o = n, { uuid: t } = K(o), { width: e } = Z(), l = v(null), u = yn(t == null ? void 0 : t.value);
+    function a(f, g) {
+      u[D(f)].value = g;
     }
-    return (a, s) => (f(), _(D(Ae), {
-      "initial-value": { x: D(o) - Xt - 20, y: 10 },
-      class: M(["absolute select-none z-24 w-280px font-sans text-xs", a.$attrs.class]),
-      handle: e.value
+    const p = A(() => {
+      const f = {};
+      for (const g in u) {
+        const r = u[g], s = r.folder || "default";
+        f[s] || (f[s] = []), f[s].push(r);
+      }
+      return f;
+    });
+    return (f, g) => (d(), C(D(xe), {
+      id: D(t),
+      "initial-value": { x: D(e) - $n - 40, y: 10 },
+      class: I(["absolute select-none z-24 w-280px font-sans text-xs", f.$attrs.class]),
+      handle: l.value
     }, {
       default: Q(() => [
-        u("div", At, [
-          u("header", {
+        c("div", bn, [
+          c("header", {
             ref_key: "handle",
-            ref: e,
+            ref: l,
             class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
-          }, Rt, 512),
-          (f(!0), d(E, null, A(D(n), (i) => (f(), _(te, {
-            key: i.label,
-            control: i,
-            onChange: (p) => l(p, i)
-          }, null, 8, ["control", "onChange"]))), 128))
+          }, wn, 512),
+          (d(!0), m(S, null, U(p.value, (r, s) => (d(), m(S, { key: s }, [
+            s !== "default" ? (d(), C(gn, {
+              key: 0,
+              label: s,
+              controls: r
+            }, null, 8, ["label", "controls"])) : L("", !0),
+            s === "default" ? (d(!0), m(S, { key: 1 }, U(r, (i) => (d(), C(te, {
+              key: i.label,
+              control: i,
+              onChange: ($) => a(i.label, $)
+            }, null, 8, ["control", "onChange"]))), 128)) : L("", !0)
+          ], 64))), 128))
         ])
       ]),
       _: 1
-    }, 8, ["initial-value", "class", "handle"]));
+    }, 8, ["id", "initial-value", "class", "handle"]));
   }
 });
 export {
-  Kt as TresLeches,
-  Bt as useControls
+  Tn as TresLeches,
+  Mn as useControls,
+  yn as useControlsProvider
 };