@tresjs/leches 0.14.0 → 0.15.0-next.2

package/dist/tresleches.js

@@ -1,100 +1,101 @@
 /**
  * name: @tresjs/leches
- * version: v0.14.0
+ * version: v0.15.0-next.2
  * (c) 2023
  * 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);
+import { unref as k, isRef as H, toRefs as q, customRef as $t, ref as b, watch as N, computed as P, defineComponent as w, reactive as V, h as kt, provide as pt, isReactive as Mt, onUnmounted as Ct, openBlock as d, createElementBlock as v, normalizeClass as C, Fragment as K, createTextVNode as J, toDisplayString as M, createVNode as F, createElementVNode as i, withDirectives as Q, vShow as Z, normalizeStyle as Et, renderList as B, createCommentVNode as W, watchEffect as Tt, createBlock as I, Transition as ft, withCtx as R, renderSlot as mt } from "vue";
+import { useWindowSize as vt, useEventListener as tt, useStorage as St, isClient as It, useFps as Ft, useMemory as At, useRafFn as bt, useMouse as st, useMousePressed as Dt, useKeyModifier as ut } from "@vueuse/core";
+import { useTresContext as Kt } from "@tresjs/core";
+function O(e) {
+  return typeof e == "function" ? e() : k(e);
 }
-const dt = typeof window < "u" && typeof document < "u";
+const gt = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-function St(e, o = {}) {
-  if (!G(e))
-    return B(e);
+function Pt(e, n = {}) {
+  if (!H(e))
+    return q(e);
   const l = Array.isArray(e.value) ? Array.from({ length: e.value.length }) : {};
-  for (const n in e.value)
-    l[n] = gt(() => ({
+  for (const o in e.value)
+    l[o] = $t(() => ({
       get() {
-        return e.value[n];
+        return e.value[o];
       },
       set(t) {
-        var i;
-        if ((i = E(o.replaceRef)) != null ? i : !0)
+        var c;
+        if ((c = O(n.replaceRef)) != null ? c : !0)
           if (Array.isArray(e.value)) {
-            const c = [...e.value];
-            c[n] = t, e.value = c;
+            const s = [...e.value];
+            s[o] = t, e.value = s;
           } else {
-            const c = { ...e.value, [n]: t };
-            Object.setPrototypeOf(c, Object.getPrototypeOf(e.value)), e.value = c;
+            const s = { ...e.value, [o]: t };
+            Object.setPrototypeOf(s, Object.getPrototypeOf(e.value)), e.value = s;
           }
         else
-          e.value[n] = t;
+          e.value[o] = t;
       }
     }));
   return l;
 }
-const Tt = dt ? window : void 0;
-function At(e, o = {}) {
+const Vt = gt ? window : void 0;
+function Ut(e, n = {}) {
   const {
     pointerTypes: l,
-    preventDefault: n,
+    preventDefault: o,
     stopPropagation: t,
-    exact: i,
-    onMove: r,
-    onEnd: c,
-    onStart: u,
-    initialValue: _,
-    axis: y = "both",
-    draggingElement: s = Tt,
-    handle: a = e
-  } = o, { width: m } = pt();
-  let S = m.value;
-  const v = d(
-    E(_) ?? { x: 0, y: 0 }
+    exact: c,
+    onMove: a,
+    onEnd: s,
+    onStart: f,
+    initialValue: y,
+    axis: g = "both",
+    draggingElement: u = Vt,
+    handle: r = e
+  } = n, { width: p } = vt();
+  let E = p.value;
+  const m = b(
+    O(y) ?? { x: 0, y: 0 }
   );
-  O(m, () => {
-    const g = m.value - S;
-    v.value.x += g, S = m.value;
+  N(p, () => {
+    const _ = p.value - E;
+    m.value.x += _, E = p.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 S = b(), U = (_) => l ? l.includes(_.pointerType) : !0, T = (_) => {
+    O(o) && _.preventDefault(), O(t) && _.stopPropagation();
+  }, A = (_) => {
+    if (!U(_) || O(c) && _.target !== O(e))
       return;
-    const b = E(e).getBoundingClientRect(), x = {
-      x: g.clientX - b.left,
-      y: g.clientY - b.top
+    const h = O(e).getBoundingClientRect(), $ = {
+      x: _.clientX - h.left,
+      y: _.clientY - h.top
     };
-    (u == null ? void 0 : u(x, g)) !== !1 && (T.value = x, $(g));
-  }, q = (g) => {
-    if (!D(g) || !T.value)
+    (f == null ? void 0 : f($, _)) !== !1 && (S.value = $, T(_));
+  }, L = (_) => {
+    if (!U(_) || !S.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 = {
-      x: b,
-      y: x
-    }, r == null || r(v.value, g), $(g);
-  }, P = (g) => {
-    D(g) && T.value && (T.value = void 0, c == null || c(v.value, g), $(g));
+    let { x: h, y: $ } = m.value;
+    (g === "x" || g === "both") && (h = _.clientX - S.value.x), (g === "y" || g === "both") && ($ = _.clientY - S.value.y), m.value = {
+      x: h,
+      y: $
+    }, a == null || a(m.value, _), T(_);
+  }, Y = (_) => {
+    U(_) && S.value && (S.value = void 0, s == null || s(m.value, _), T(_));
   };
-  if (dt) {
-    const g = { capture: o.capture ?? !0 };
-    J(a, "pointerdown", A, g), J(s, "pointermove", q, g), J(s, "pointerup", P, g);
+  if (gt) {
+    const _ = { capture: n.capture ?? !0 };
+    tt(r, "pointerdown", A, _), tt(u, "pointermove", L, _), tt(u, "pointerup", Y, _);
   }
   return {
-    ...St(v),
-    position: v,
-    isDragging: z(() => !!T.value),
-    style: z(
-      () => `left:${v.value.x}px;top:${v.value.y}px;`
+    ...Pt(m),
+    position: m,
+    isDragging: P(() => !!S.value),
+    style: P(
+      () => `left:${m.value.x}px;top:${m.value.y}px;`
     )
   };
 }
-const It = /* @__PURE__ */ k({
+const Ot = /* @__PURE__ */ w({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -111,155 +112,236 @@ const It = /* @__PURE__ */ k({
     "onMove",
     "onEnd"
   ],
-  setup(e, { slots: o }) {
-    const l = d(), n = z(() => e.handle ?? l.value), t = e.storageKey && xt(
+  setup(e, { slots: n }) {
+    const l = b(), o = P(() => e.handle ?? l.value), t = e.storageKey && St(
       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, {
+      O(e.initialValue) || { x: 0, y: 0 },
+      It ? e.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), c = t || e.initialValue || { x: 0, y: 0 }, s = V(Ut(l, {
       ...e,
-      handle: n,
-      initialValue: i,
-      onEnd: (u, _) => {
-        var y;
-        (y = e.onEnd) == null || y.call(e, u, _), t && (t.value.x = u.x, t.value.y = u.y);
+      handle: o,
+      initialValue: c,
+      onEnd: (f, y) => {
+        var g;
+        (g = e.onEnd) == null || g.call(e, f, y), t && (t.value.x = f.x, t.value.y = f.y);
       }
     }));
     return () => {
-      if (o.default)
-        return mt(e.as || "div", { ref: l, style: `touch-action:none;${c.style}` }, o.default(c));
+      if (n.default)
+        return kt(e.as || "div", { ref: l, style: `touch-action:none;${s.style}` }, n.default(s));
     };
   }
-}), Kt = Symbol("CONTROLS_CONTEXT_KEY"), ft = "default", L = N({});
-function Dt(e = ft) {
-  return yt(Kt, L), L[e];
+}), Bt = Symbol("CONTROLS_CONTEXT_KEY"), yt = "default", X = V({});
+function Lt(e = yt) {
+  return pt(Bt, X), X[e];
 }
-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 et = (e) => {
+  const n = /^#([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" && n.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";
+}, G = (e, n, l, o) => {
   const t = {
-    key: d(e),
-    label: d(e),
-    name: d(e),
-    type: d(l),
-    value: d(o),
-    visible: d(!0),
-    icon: d(),
-    uniqueKey: d(e),
-    [e]: d(o)
+    key: b(e),
+    label: b(e),
+    name: b(e),
+    type: b(l),
+    value: b(n),
+    visible: b(!0),
+    icon: b(),
+    uniqueKey: b(e),
+    [e]: b(n)
   };
-  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") {
-    const s = Y("fpsgraph", null, "fpsgraph", null);
-    return L[c].fpsgraph = s, n.fpsgraph = s, B(N(n));
+  return o && (t.folder = b(o)), t;
+}, bl = (e, n, l) => {
+  const o = {}, t = typeof e == "string" ? e : null, c = t ? n : e, a = t && t !== "fpsgraph" ? l : n, s = (a == null ? void 0 : a.uuid) || yt;
+  if (X[s] || (X[s] = V({})), e === "fpsgraph") {
+    const u = G("fpsgraph", null, "fpsgraph", null);
+    return X[s].fpsgraph = u, o.fpsgraph = u, q(V(o));
   }
-  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 : {
+  const f = X[s], y = Mt(c), g = y ? q(c) : {};
+  for (const u in c) {
+    let r = c[u], p = u;
+    if (y && g[u] && (r = g[u]), t && (p = `${t}${u.charAt(0).toUpperCase() + u.slice(1)}`), typeof r == "object" && !H(r) && !Array.isArray(r) && r.value !== void 0) {
+      const m = r, S = H(m.value) ? m.value : b(m.value), U = m.type || et(m), T = G(u, S, U, t);
+      U === "select" && (T.options = b(m.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] = $;
+      }))), U === "range" && (T.min = b(m.min || 0), T.max = b(m.max || 1), T.step = b(m.step || 0.1)), T.label.value = m.label || u, T.icon.value = m.icon, T.visible.value = m.visible !== void 0 ? m.visible : !0, T.uniqueKey.value = p, f[p] = T, o[p] = T;
       continue;
     }
-    if (G(a)) {
-      const v = Y(s, a, a.value.type || Q(a.value), t);
-      u[m] = v, n[m] = v;
+    if (H(r)) {
+      const m = G(u, r, r.value.type || et(r.value), t);
+      f[p] = m, o[p] = m;
       continue;
-    } else if (typeof a == "object" && !Array.isArray(a)) {
-      const v = B(a);
-      v[s] && (a = v[s]);
+    } else if (typeof r == "object" && !Array.isArray(r)) {
+      const m = q(r);
+      m[u] && (r = m[u]);
     }
-    const S = Y(s, a, a.type || Q(a), t);
-    u[m] = S, n[m] = S, S.uniqueKey.value = m;
+    const E = G(u, r, r.type || et(r), t);
+    f[p] = E, o[p] = E, E.uniqueKey.value = p;
   }
-  return Object.keys(n).length > 1 ? B(N(n)) : Object.values(n)[0];
-}, Ft = ["for", "title"], R = /* @__PURE__ */ k({
+  return Object.keys(o).length > 1 ? q(V(o)) : Object.values(o)[0];
+};
+function zt(e) {
+  if (typeof e == "number")
+    return [e, e, e];
+  if (rt(e)) {
+    const { x: n, y: l, z: o } = e;
+    return [n, l, o];
+  }
+  if (nt(e)) {
+    const { x: n, y: l } = e;
+    return [n, l];
+  }
+  return e;
+}
+function nt(e) {
+  return e && typeof e.x == "number" && typeof e.y == "number";
+}
+function rt(e) {
+  return e && typeof e.x == "number" && typeof e.y == "number" && typeof e.z == "number";
+}
+function Rt(e) {
+  let n = 0;
+  return e.traverse((l) => {
+    if (l.isMesh && l.geometry) {
+      const o = l.geometry, t = o.attributes.position.count * 3 * Float32Array.BYTES_PER_ELEMENT, c = o.index ? o.index.count * Uint32Array.BYTES_PER_ELEMENT : 0, a = o.attributes.normal ? o.attributes.normal.count * 3 * Float32Array.BYTES_PER_ELEMENT : 0, s = o.attributes.uv ? o.attributes.uv.count * 2 * Float32Array.BYTES_PER_ELEMENT : 0, f = t + c + a + s;
+      n += f;
+    }
+  }), n;
+}
+function qt(e) {
+  return (e / 1024).toFixed(2);
+}
+const Nt = Symbol("PERF_CONTEXT_KEY"), it = "default", at = V({
+  [it]: {
+    perf: {
+      fps: V({
+        value: 0,
+        accumulator: [],
+        lastLoggedTime: Date.now(),
+        logInterval: 1e3
+      }),
+      memory: V({
+        currentMem: 0,
+        averageMem: 0,
+        maxMemory: 0,
+        allocatedMem: 0,
+        accumulator: [],
+        lastLoggedTime: Date.now(),
+        logInterval: 1e3
+      }),
+      // Placeholder for memory object
+      gl: void 0,
+      scene: void 0
+    }
+  }
+});
+function ct(e = it) {
+  return pt(Nt, at), at[e].perf;
+}
+function Xt(e) {
+  const { renderer: n, scene: l } = Kt(), o = (e == null ? void 0 : e.renderer) || n.value;
+  if (!o)
+    throw new Error("Renderer not found");
+  const t = at[it].perf;
+  t.gl = o, t.scene = l.value;
+  const c = 100, a = Ft({ every: c }), { isSupported: s, memory: f } = At({ interval: c }), y = 80;
+  let g = performance.now();
+  const u = ({ timestamp: E }) => {
+    t.memory.allocatedMem = Rt(k(l)), E - g >= c && (g = E, t.fps.accumulator.push(a.value), t.fps.accumulator.length > y && t.fps.accumulator.shift(), t.fps.value = t.fps.accumulator.reduce((m, S) => m + S, 0) / t.fps.accumulator.length, s.value && f.value && (t.memory.accumulator.push(f.value.usedJSHeapSize / 1024 / 1024), t.memory.accumulator.length > y && t.memory.accumulator.shift(), t.memory.currentMem = t.memory.accumulator.reduce((m, S) => m + S, 0) / t.memory.accumulator.length));
+  }, { pause: r, resume: p } = bt(u, { immediate: !0 });
+  return Ct(() => {
+    r();
+  }), {
+    perf: t,
+    fps: t.fps,
+    memory: t.memory,
+    gl: t.gl,
+    pausePerfTracking: r,
+    resumePerfTracking: p
+  };
+}
+const Yt = ["for", "title"], j = /* @__PURE__ */ w({
   __name: "ControlLabel",
   props: {
     label: {},
     control: {}
   },
   setup(e) {
-    return (o, l) => (p(), h("label", {
-      for: o.control.uniqueKey,
-      title: o.label,
+    return (n, l) => (d(), v("label", {
+      for: n.control.uniqueKey,
+      title: n.label,
       class: "tl-text-gray-500 tl-w-1/3 tl-truncate"
     }, [
-      o.control.icon ? (p(), h("i", {
+      n.control.icon ? (d(), v("i", {
         key: 0,
-        class: M(o.control.icon)
-      }, null, 2)) : (p(), h(V, { key: 1 }, [
-        st(F(o.label), 1)
+        class: C(n.control.icon)
+      }, null, 2)) : (d(), v(K, { key: 1 }, [
+        J(M(n.label), 1)
       ], 64))
-    ], 8, Ft));
+    ], 8, Yt));
   }
-}), 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({
+}), Wt = { class: "tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2" }, jt = ["id", "value", "min", "max", "step"], Gt = /* @__PURE__ */ w({
   __name: "NumberControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: o }) {
-    const l = e, n = o;
-    function t(s) {
-      const { target: a } = s;
-      n("change", a.valueAsNumber);
+  setup(e, { emit: n }) {
+    const l = e, o = n;
+    function t(u) {
+      const { target: r } = u;
+      o("change", r.valueAsNumber);
     }
-    const i = lt(), r = d(0), c = d(!1), u = (s) => {
-      r.value = s.clientX, c.value = !0;
-    }, _ = () => {
-      c.value = !1;
-    }, y = (s) => Math.floor(Math.abs(s) / 10);
-    return O(i.x, (s) => {
-      if (c.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;
+    const c = st(), a = b(0), s = b(!1), f = (u) => {
+      a.value = u.clientX, s.value = !0;
+    }, y = () => {
+      s.value = !1;
+    }, g = (u) => Math.floor(Math.abs(u) / 10);
+    return N(c.x, (u) => {
+      if (s.value) {
+        const r = u - a.value, p = g(r);
+        r > 0 ? o("change", l.control.value + 1 + p) : r < 0 && o("change", l.control.value - 1 + p), l.control.min !== void 0 && l.control.value < l.control.min && o("change", l.control.min), l.control.max !== void 0 && l.control.value > l.control.max && o("change", l.control.max), a.value = u;
       }
-    }), (s, a) => (p(), h("div", Et, [
-      X(R, {
-        label: s.label,
-        control: s.control
+    }), (u, r) => (d(), v("div", Wt, [
+      F(j, {
+        label: u.label,
+        control: u.control
       }, null, 8, ["label", "control"]),
-      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 }]),
+      i("input", {
+        id: u.control.uniqueKey,
+        value: u.control.value,
+        class: C(["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": s.value }]),
         type: "number",
-        min: s.control.min,
-        max: s.control.max,
-        step: s.control.step,
+        min: u.control.min,
+        max: u.control.max,
+        step: u.control.step,
         onInput: t,
-        onMousedown: u,
-        onMouseup: _
-      }, null, 42, Vt)
+        onMousedown: f,
+        onMouseup: y
+      }, null, 42, jt)
     ]));
   }
-}), 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({
+}), Ht = { class: "tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px" }, Jt = ["id", "value", "aria-label"], Qt = /* @__PURE__ */ w({
   __name: "TextControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: o }) {
-    const l = o;
-    function n(t) {
-      const { target: i } = t;
-      l("change", i.value);
+  setup(e, { emit: n }) {
+    const l = n;
+    function o(t) {
+      const { target: c } = t;
+      l("change", c.value);
     }
-    return (t, i) => (p(), h("div", qt, [
-      X(R, {
+    return (t, c) => (d(), v("div", Ht, [
+      F(j, {
         label: t.label,
         control: t.control
       }, null, 8, ["label", "control"]),
-      f("input", {
+      i("input", {
         id: t.control.uniqueKey,
         value: t.control.value,
         type: "text",
@@ -267,504 +349,721 @@ const Q = (e) => {
         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,
         placeholder: "Enter value here...",
-        onChange: n
-      }, null, 40, Ut)
+        onChange: o
+      }, null, 40, Jt)
     ]));
   }
-}), 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({
+}), Zt = { class: "tl-flex tl-px-4 tl-justify-start tl-gap-2 tl-items-center tl-mb-2 tl-min-h-32px" }, te = { class: "tl-text-gray-500 tl-w-1/3" }, ee = ["id", "checked"], le = ["for"], oe = ["aria-checked"], ne = { class: "i-ic:baseline-check tl-text-light" }, re = /* @__PURE__ */ w({
   __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(e, { emit: n }) {
+    const l = e, o = n;
+    function t(a) {
+      const { target: s } = a;
+      o("change", s.checked);
     }
-    function i(r) {
-      (r.code === "Space" || r.code === "Enter") && (r.preventDefault(), n("change", !l.control.value));
+    function c(a) {
+      (a.code === "Space" || a.code === "Enter") && (a.preventDefault(), o("change", !l.control.value));
     }
-    return (r, c) => (p(), h("div", Xt, [
-      f("label", Bt, F(r.label), 1),
-      f("input", {
-        id: r.control.uniqueKey,
-        checked: r.control.value,
+    return (a, s) => (d(), v("div", Zt, [
+      i("label", te, M(a.label), 1),
+      i("input", {
+        id: a.control.uniqueKey,
+        checked: a.control.value,
         class: "tl-hidden",
         type: "checkbox",
         onInput: t
-      }, null, 40, Lt),
-      f("label", {
-        for: r.control.uniqueKey,
+      }, null, 40, ee),
+      i("label", {
+        for: a.control.uniqueKey,
         class: "tl-inline-flex tl-items-center tl-cursor-pointer"
       }, [
-        f("span", {
+        i("span", {
           tabindex: "0",
           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
+          "aria-checked": a.control.value.toString(),
+          class: C([{ "tl-bg-dark-500": a.control.value, "tl-bg-gray-200": !a.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: c
         }, [
-          ct(f("i", Nt, null, 512), [
-            [it, r.control.value]
+          Q(i("i", ne, null, 512), [
+            [Z, a.control.value]
           ])
-        ], 42, Wt)
-      ], 8, Pt)
+        ], 42, oe)
+      ], 8, le)
     ]));
   }
-}), 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({
+}), ae = { class: "tl-px-4 tl-relative tl-flex tl-justify-between tl-gap-4 tl-items-center tl-mb-2" }, se = ["value", "min", "max", "step"], ie = ["value", "min", "max", "step"], ce = /* @__PURE__ */ w({
   __name: "SliderControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: o }) {
-    const l = e, n = o;
-    function t(a) {
-      const { target: m } = a;
-      n("change", m.valueAsNumber);
+  setup(e, { emit: n }) {
+    const l = e, o = n;
+    function t(r) {
+      const { target: p } = r;
+      o("change", p.valueAsNumber);
     }
-    const i = z(() => ({
+    const c = P(() => ({
       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;
-    }, y = () => {
-      u.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;
+    })), a = st(), s = b(0), f = b(!1), y = (r) => {
+      s.value = r.clientX, f.value = !0;
+    }, g = () => {
+      f.value = !1;
+    }, u = (r) => Math.floor(Math.abs(r) / 10);
+    return N(a.x, (r) => {
+      if (f.value) {
+        const p = r - s.value, E = u(p);
+        p > 0 ? o("change", l.control.value + 1 + E) : p < 0 && o("change", l.control.value - 1 + E), l.control.min !== void 0 && l.control.value < l.control.min && o("change", l.control.min), l.control.max !== void 0 && l.control.value > l.control.max && o("change", l.control.max), s.value = r;
       }
-    }), (a, m) => (p(), h("div", Rt, [
-      X(R, {
-        label: a.label,
-        control: a.control
+    }), (r, p) => (d(), v("div", ae, [
+      F(j, {
+        label: r.label,
+        control: r.control
       }, null, 8, ["label", "control"]),
-      f("input", {
-        value: a.control.value,
+      i("input", {
+        value: r.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: Et(c.value),
         type: "range",
-        min: a.control.min,
-        max: a.control.max,
-        step: a.control.step,
+        min: r.control.min,
+        max: r.control.max,
+        step: r.control.step,
         onInput: t
-      }, null, 44, Yt),
-      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 }]),
+      }, null, 44, se),
+      i("input", {
+        value: r.control.value,
+        class: C(["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": f.value }]),
         type: "number",
-        min: a.control.min,
-        max: a.control.max,
-        step: a.control.step,
+        min: r.control.min,
+        max: r.control.max,
+        step: r.control.step,
         onInput: t,
-        onMousedown: _,
-        onMouseup: y
-      }, null, 42, Gt)
+        onMousedown: y,
+        onMouseup: g
+      }, null, 42, ie)
     ]));
   }
-}), vt = (e, o) => {
+}), ht = (e, n) => {
   const l = e.__vccOpts || e;
-  for (const [n, t] of o)
-    l[n] = t;
+  for (const [o, t] of n)
+    l[o] = t;
   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({
+}, ue = /* @__PURE__ */ ht(ce, [["__scopeId", "data-v-e775088a"]]), de = { class: "tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2" }, pe = { class: "tl-text-gray-500 tl-w-1/3" }, fe = ["id", "value", "aria-label"], me = ["id", "aria-label", "value"], ve = /* @__PURE__ */ w({
   __name: "ColorControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: o }) {
-    const l = o;
-    function n(t) {
-      const { target: i } = t;
-      l("change", i.value);
+  setup(e, { emit: n }) {
+    const l = n;
+    function o(t) {
+      const { target: c } = t;
+      l("change", c.value);
     }
-    return (t, i) => (p(), h("div", Qt, [
-      f("label", Zt, F(t.label), 1),
-      f("input", {
+    return (t, c) => (d(), v("div", de, [
+      i("label", pe, M(t.label), 1),
+      i("input", {
         id: t.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" }]),
+        class: C(["focus:tl-outline-none focus:tl-ring-2 focus:tl-ring-blue-600", { "important-tl-outline-gray-200": t.control.value === "#ffffff" }]),
         type: "color",
-        onInput: n
-      }, null, 42, te),
-      f("input", {
+        onInput: o
+      }, null, 42, fe),
+      i("input", {
         id: t.control.uniqueKey,
         tabindex: "0",
         "aria-label": t.label,
         value: t.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)
+        onInput: o
+      }, null, 40, me)
     ]));
   }
-});
-function ne(e) {
-  if (typeof e == "number")
-    return [e, e, e];
-  if (et(e)) {
-    const { x: o, y: l, z: n } = e;
-    return [o, l, n];
-  }
-  if (tt(e)) {
-    const { x: o, y: l } = e;
-    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";
-}
-const oe = { class: "tl-relative tl-w-2/3 tl-flex tl-justify-between tl-gap-0.5" }, ae = {
+}), be = { class: "tl-relative tl-w-2/3 tl-flex tl-justify-between tl-gap-0.5" }, ge = {
   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({
+}, ye = ["id", "step", "value", "onInput", "onMousedown", "onMouseup", "onFocus"], he = /* @__PURE__ */ w({
   __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) => {
-      y.value = b ? 10 : 1;
-    }), O(a, (b) => {
-      y.value = b ? 0.1 : 1;
+  setup(e, { emit: n }) {
+    const l = e, o = n, t = st(), { pressed: c } = Dt(), a = b(0), s = b(!1), f = b(0), y = b(null), g = b(1), u = ut("Shift"), r = ut("Alt");
+    N(u, (h) => {
+      g.value = h ? 10 : 1;
+    }), N(r, (h) => {
+      g.value = h ? 0.1 : 1;
     });
-    const m = (b) => {
-      _.value = b;
-    }, 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;
+    const p = (h) => {
+      y.value = h;
+    }, E = () => {
+      y.value = null;
+    }, m = (h, $) => {
+      f.value = $, a.value = h.clientX, s.value = !0;
+    }, S = (h, $) => {
+      f.value = $, s.value = !1;
+    }, U = () => {
+      s.value = !1;
     };
-    O(i, (b) => {
-      b || (c.value = !1);
+    N(c, (h) => {
+      h || (s.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));
-    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 T = (h) => Math.floor(Math.abs(h) / 10), A = P(() => zt(l.control.value)), L = b(["x", "y", "z"]), Y = P(() => nt(l.control.value) || rt(l.control.value));
+    function _(h, $) {
+      const { value: z } = l.control, { target: x } = h;
+      f.value = $, z[Y.value ? L.value[f.value] : f.value] = parseFloat(x.value), o("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 N(t.x, (h) => {
+      if (s.value) {
+        const $ = h - a.value, z = T($), { value: x } = l.control, D = Y.value ? L.value[f.value] : f.value;
+        $ > 0 ? x[D] += g.value + z : $ < 0 && (x[D] -= g.value + z), l.control.min !== void 0 && x < l.control.min && (x[D] = l.control.min), l.control.max !== void 0 && x > l.control.max && (x[D] = l.control.max), o("change", x), a.value = h;
       }
-    }), (b, x) => (p(), h("div", {
+    }), (h, $) => (d(), v("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: $[0] || ($[0] = (z) => U())
     }, [
-      X(R, {
-        label: b.label,
-        control: b.control
+      F(j, {
+        label: h.label,
+        control: h.control
       }, null, 8, ["label", "control"]),
-      f("div", oe, [
-        (p(!0), h(V, null, j(A.value, (U, 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)
+      i("div", be, [
+        (d(!0), v(K, null, B(A.value, (z, x) => (d(), v("div", {
+          key: h.label + x,
+          class: C(["tl-flex tl-items-center tl-bg-gray-100 tl-rounded", {
+            "tl-w-2/5": y.value === x,
+            "tl-w-1/3": k(rt)(h.control.value),
+            "tl-w-1/2": k(nt)(h.control.value)
           }])
         }, [
-          q.value[w] && P.value ? (p(), h("span", ae, F(q.value[w]), 1)) : H("", !0),
-          f("input", {
-            id: `${b.control.uniqueKey}-${q.value[w]}`,
+          L.value[x] && Y.value ? (d(), v("span", ge, M(L.value[x]), 1)) : W("", !0),
+          i("input", {
+            id: `${h.control.uniqueKey}-${L.value[x]}`,
             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),
-            onInput: (I) => g(I, w),
-            onMousedown: (I) => v(I, w),
-            onMouseup: (I) => T(I, w),
-            onFocus: (I) => m(w),
-            onBlur: S
-          }, null, 42, re)
+            step: g.value,
+            class: C(["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": s.value }]),
+            value: A.value[x].toFixed(2),
+            onInput: (D) => _(D, x),
+            onMousedown: (D) => m(D, x),
+            onMouseup: (D) => S(D, x),
+            onFocus: (D) => p(x),
+            onBlur: E
+          }, null, 42, ye)
         ], 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({
-  __name: "FPSGraph",
+}), _e = { class: "tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2" }, xe = { class: "tl-text-gray-500 tl-w-1/3" }, we = { 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" }, $e = { class: "tl-absolute tl-bottom-0.5 tl-right-0.5 tl-font-sans tl-text-xs" }, ke = ["points"], Me = 160, lt = 40, dt = 2, _t = /* @__PURE__ */ w({
+  __name: "Graph",
   props: {
-    label: {},
-    control: {}
+    points: {},
+    value: {},
+    unit: {},
+    label: {}
   },
   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}`
-      ).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),
-        (p(), h("svg", {
-          width: ot,
-          height: Z,
+    const n = e, l = b(140);
+    Tt(() => {
+      const t = Math.max(...n.points, 30);
+      l.value = Math.max(t, l.value);
+    });
+    const o = P(() => n.points.map(
+      (t, c) => `${c * dt},${lt - t * lt / l.value}`
+    ).join(" "));
+    return (t, c) => (d(), v("div", _e, [
+      i("label", xe, M(t.label), 1),
+      i("div", we, [
+        i("div", $e, M(Math.round(t.value)) + " " + M(t.unit), 1),
+        (d(), v("svg", {
+          width: Me,
+          height: lt,
           xmlns: "http://www.w3.org/2000/svg",
           class: "tl-bg-gray-100"
         }, [
-          f("polyline", {
-            points: l.value,
+          i("polyline", {
+            points: o.value,
             fill: "none",
             stroke: "lightgray",
-            "stroke-width": W,
+            "stroke-width": dt,
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
-          }, null, 8, de)
+          }, null, 8, ke)
         ]))
       ])
     ]));
   }
-}), 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({
+}), Ce = /* @__PURE__ */ w({
+  __name: "FPSGraph",
+  props: {
+    label: {},
+    control: {}
+  },
+  setup(e) {
+    const { fps: n } = ct();
+    return (l, o) => (d(), I(_t, {
+      points: k(n).accumulator,
+      value: k(n).value,
+      unit: "FPS",
+      label: l.label
+    }, null, 8, ["points", "value", "label"]));
+  }
+}), Ee = { class: "tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px" }, Te = ["id", "value"], Se = ["value"], Ie = /* @__PURE__ */ w({
   __name: "SelectControl",
   props: {
     label: {},
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: o }) {
-    const l = o;
-    function n(t) {
+  setup(e, { emit: n }) {
+    const l = n;
+    function o(t) {
       l("change", t.target.value);
     }
-    return (t, i) => (p(), h("div", ve, [
-      X(R, {
+    return (t, c) => (d(), v("div", Ee, [
+      F(j, {
         label: t.label,
         control: t.control
       }, null, 8, ["label", "control"]),
-      f("select", {
+      i("select", {
         id: t.control.uniqueKey,
         value: t.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
+        onChange: o
       }, [
-        (p(!0), h(V, null, j(t.control.options, (r) => (p(), h("option", {
-          key: r.value,
-          value: r.value
-        }, F(r.text), 9, ge))), 128))
-      ], 40, be)
+        (d(!0), v(K, null, B(t.control.options, (a) => (d(), v("option", {
+          key: a.value,
+          value: a.value
+        }, M(a.text), 9, Se))), 128))
+      ], 40, Te)
     ]));
   }
-}), ye = /* @__PURE__ */ k({
+}), Fe = /* @__PURE__ */ w({
   __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];
+    const n = e, l = P(() => {
+      const o = "leches-btn", t = `leches-btn-${n.control.value.variant || "primary"}`, c = `leches-btn-${n.control.value.size || "sm"}`;
+      return [o, t, c];
     });
-    return (n, t) => (p(), h("button", {
-      class: M(l.value),
+    return (o, t) => (d(), v("button", {
+      class: C(l.value),
       onClick: t[0] || (t[0] = //@ts-ignore
-      (...i) => n.control.value.onClick && n.control.value.onClick(...i))
+      (...c) => o.control.value.onClick && o.control.value.onClick(...c))
     }, [
-      f("i", {
-        class: M([n.control.value.icon, n.control.value.label ? "mr-1" : ""])
+      i("i", {
+        class: C([o.control.value.icon, o.control.value.label ? "mr-1" : ""])
       }, null, 2),
-      st(" " + F(n.control.value.label), 1)
+      J(" " + M(o.control.value.label), 1)
     ], 2));
   }
-}), he = /* @__PURE__ */ vt(ye, [["__scopeId", "data-v-6a95ac59"]]), bt = /* @__PURE__ */ k({
+}), Ae = /* @__PURE__ */ ht(Fe, [["__scopeId", "data-v-6a95ac59"]]), xt = /* @__PURE__ */ w({
   __name: "ControlInput",
   props: {
     control: {}
   },
   emits: ["change"],
-  setup(e, { emit: o }) {
-    const l = o;
-    function n(t) {
+  setup(e, { emit: n }) {
+    const l = n;
+    function o(t) {
       l("change", t);
     }
-    return (t, i) => t.control.visible ? (p(), h(V, { key: 0 }, [
-      t.control.type === "color" ? (p(), C(le, {
+    return (t, c) => t.control.visible ? (d(), v(K, { key: 0 }, [
+      t.control.type === "color" ? (d(), I(ve, {
         key: 0,
         label: t.control.label,
         control: t.control,
-        onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "select" ? (p(), C(me, {
+        onChange: o
+      }, null, 8, ["label", "control"])) : t.control.type === "select" ? (d(), I(Ie, {
         key: 1,
         label: t.control.label,
         control: t.control,
-        onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "vector" ? (p(), C(se, {
+        onChange: o
+      }, null, 8, ["label", "control"])) : t.control.type === "vector" ? (d(), I(he, {
         key: 2,
         label: t.control.label,
         control: t.control,
-        onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "boolean" ? (p(), C(jt, {
+        onChange: o
+      }, null, 8, ["label", "control"])) : t.control.type === "boolean" ? (d(), I(re, {
         key: 3,
         label: t.control.label,
         control: t.control,
-        onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "fpsgraph" ? (p(), C(fe, {
+        onChange: o
+      }, null, 8, ["label", "control"])) : t.control.type === "fpsgraph" ? (d(), I(Ce, {
         key: 4,
         label: t.control.label,
         control: t.control
-      }, null, 8, ["label", "control"])) : t.control.type === "number" ? (p(), C(zt, {
+      }, null, 8, ["label", "control"])) : t.control.type === "number" ? (d(), I(Gt, {
         key: 5,
         label: t.control.label,
         control: t.control,
-        onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "range" ? (p(), C(Jt, {
+        onChange: o
+      }, null, 8, ["label", "control"])) : t.control.type === "range" ? (d(), I(ue, {
         key: 6,
         label: t.control.label,
         control: t.control,
-        onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "button" ? (p(), h("div", {
+        onChange: o
+      }, null, 8, ["label", "control"])) : t.control.type === "button" ? (d(), v("div", {
         key: 7,
-        class: M(["tl-p-2", t.control.value.size === "tl-block" ? "tl-flex" : "tl-inline-flex"])
+        class: C(["tl-p-2", t.control.value.size === "tl-block" ? "tl-flex" : "tl-inline-flex"])
       }, [
-        X(he, {
+        F(Ae, {
           label: t.control.label,
           control: t.control
         }, null, 8, ["label", "control"])
-      ], 2)) : (p(), C(Ot, {
+      ], 2)) : (d(), I(Qt, {
         key: 8,
         label: t.control.label,
         control: t.control,
-        onChange: n
+        onChange: o
       }, null, 8, ["label", "control"]))
-    ], 64)) : H("", !0);
+    ], 64)) : W("", !0);
   }
-}), _e = { class: "tl-mb-4" }, we = ["aria-expanded", "data-folder"], xe = {
+}), De = { class: "tl-mb-4" }, Ke = ["aria-expanded", "data-folder"], Pe = {
   class: "tl-bg-white tl-rounded-b tl-pt-4",
   role: "menu"
-}, $e = /* @__PURE__ */ k({
+}, Ve = /* @__PURE__ */ w({
   __name: "Folder",
   props: {
     controls: {},
     label: {}
   },
   setup(e) {
-    function o(t, i) {
-      i.value = t;
+    function n(t, c) {
+      c.value = t;
     }
-    const l = d(!1), n = () => {
+    const l = b(!1), o = () => {
       l.value = !l.value;
     };
-    return (t, i) => (p(), h("div", _e, [
-      f("button", {
+    return (t, c) => (d(), v("div", De, [
+      i("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,
         tabindex: "0",
-        onClick: n
+        onClick: o
       }, [
-        f("span", null, F(t.label), 1),
-        f("i", {
-          class: M(l.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+        i("span", null, M(t.label), 1),
+        i("i", {
+          class: C(l.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
         }, null, 2)
-      ], 8, we),
-      X(wt, {
+      ], 8, Ke),
+      F(ft, {
         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, {
-              key: r.label,
-              control: r,
+        default: R(() => [
+          Q(i("div", Pe, [
+            (d(!0), v(K, null, B(t.controls, (a) => (d(), I(xt, {
+              key: a.label,
+              control: a,
               role: "menuitem",
-              onChange: (c) => o(c, r)
+              onChange: (s) => n(s, a)
             }, null, 8, ["control", "onChange"]))), 128))
           ], 512), [
-            [it, l.value]
+            [Z, l.value]
           ])
         ]),
         _: 1
       })
     ]));
   }
-}), ke = {
+}), Ue = { class: "tl-relative tl-px-4 tl-py-6 tl-grid tl-grid-cols-2 tl-border tl-border-solid tl-border-gray-300 tl-rounded tl-my-4" }, Oe = { class: "tl-absolute tl-bg-white tl-text-gray-400 tl-px-2 tl-rounded -tl-top-2 tl-left-2" }, ot = /* @__PURE__ */ w({
+  __name: "Pane",
+  props: {
+    title: {}
+  },
+  setup(e) {
+    return (n, l) => (d(), v("div", Ue, [
+      i("span", Oe, M(n.title), 1),
+      mt(n.$slots, "default")
+    ]));
+  }
+}), Be = { class: "" }, Le = ["onClick"], ze = { class: "tl-cursor-pointer tl-flex tl-items-center" }, Re = { class: "tl-mr-2 tl-py-2" }, qe = /* @__PURE__ */ i("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2",
+  d: "M9 5l7 7-7 7"
+}, null, -1), Ne = [
+  qe
+], Xe = { class: "tl-border-l-2 tl-border-transparent tl-border-l-gray-200 tl-border-2 tl-border-solid tl-ml-2 tl-pl-4" }, wt = /* @__PURE__ */ w({
+  __name: "Tree",
+  props: {
+    items: {},
+    depth: { default: 0 }
+  },
+  setup(e) {
+    const n = e, l = P(() => {
+      var t;
+      return (t = n.items) == null ? void 0 : t.map((c) => V({
+        ...c,
+        isOpen: !1
+      }));
+    });
+    function o(t) {
+      t.isOpen = !t.isOpen;
+    }
+    return (t, c) => (d(), v("div", Be, [
+      i("ul", {
+        class: C(["tl-list-none", { "tl-pl-0": t.depth === 0 }]),
+        "V-IF": ""
+      }, [
+        (d(!0), v(K, null, B(l.value, (a, s) => (d(), v("li", {
+          key: s,
+          onClick: (f) => o(a)
+        }, [
+          i("div", ze, [
+            i("span", Re, [
+              (d(), v("svg", {
+                class: C([a.isOpen ? "tl-transform tl-rotate-90" : "", "tl-w-4 tl-h-4 tl-transition-transform tl-text-gray-300"]),
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor"
+              }, Ne, 2))
+            ]),
+            J(" " + M(a.name), 1)
+          ]),
+          Q(i("div", Xe, [
+            mt(t.$slots, `depth-${t.depth}`, { item: a }, () => [
+              F(wt, {
+                items: a.children,
+                depth: t.depth + 1
+              }, null, 8, ["items", "depth"])
+            ])
+          ], 512), [
+            [Z, a.isOpen]
+          ])
+        ], 8, Le))), 128))
+      ], 2)
+    ]));
+  }
+}), Ye = { class: "tl-mb-4" }, We = ["aria-expanded"], je = /* @__PURE__ */ i("span", null, [
+  /* @__PURE__ */ i("i", { class: "i-iconoir-dashboard-speed" }),
+  /* @__PURE__ */ J(" Performance ")
+], -1), Ge = {
+  class: "tl-bg-white tl-rounded-b tl-pt-4",
+  role: "menu"
+}, He = { class: "tl-p-2" }, Je = { class: "tl-flex tl-items-center tl-mb-2" }, Qe = { class: "tl-bg-gray-200 tl-text-gray-600 tl-rounded tl-p-1 tl-flex tl-w-4 tl-mr-1" }, Ze = { class: "tl-ml-2 tl-font-bold tl-text" }, tl = { class: "tl-text-xs tl-text-gray-500" }, el = { class: "tl-flex tl-items-center tl-mb-2" }, ll = { class: "tl-bg-gray-200 tl-text-gray-600 tl-rounded tl-p-1 tl-flex tl-w-4 tl-mr-1" }, ol = { class: "tl-ml-2 tl-font-bold tl-text" }, nl = { class: "tl-text-xs tl-text-gray-500" }, rl = { class: "tl-w-full tl-overflow tl-text-xxs" }, al = /* @__PURE__ */ w({
+  __name: "index",
+  props: {
+    uuid: {}
+  },
+  setup(e) {
+    const n = e, { uuid: l } = q(n), { gl: o, memory: t } = ct(l == null ? void 0 : l.value), c = [{
+      label: "geometries",
+      icon: "i-iconoir-box-3d-three-points"
+    }, {
+      label: "textures",
+      icon: "i-iconoir-select-face-3d"
+    }], a = [{
+      label: "calls",
+      icon: "i-iconoir-comp-align-left"
+    }, {
+      label: "triangles",
+      icon: "i-iconoir-triangle"
+    }, {
+      label: "points",
+      icon: "i-iconoir-one-point-circle"
+    }, {
+      label: "lines",
+      icon: "i-iconoir-linear"
+    }], s = V({
+      geometries: 0,
+      textures: 0,
+      calls: 0,
+      triangles: 0,
+      points: 0,
+      lines: 0,
+      programs: []
+    });
+    bt(() => {
+      o && (s.geometries = o.info.memory.geometries, s.textures = o.info.memory.textures, s.calls = o.info.render.calls, s.triangles = o.info.render.triangles, s.points = o.info.render.points, s.lines = o.info.render.lines, s.programs = o.info.programs);
+    });
+    const f = b(!1), y = () => {
+      f.value = !f.value;
+    }, g = P(() => s.programs.map((u) => ({
+      ...u,
+      name: u.type,
+      uniforms: u.getUniforms()
+    })));
+    return (u, r) => (d(), v("div", Ye, [
+      i("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": f.value,
+        "aria-haspopup": "true",
+        role: "button",
+        tabindex: "0",
+        onClick: y
+      }, [
+        je,
+        i("i", {
+          class: C(f.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+        }, null, 2)
+      ], 8, We),
+      F(ft, {
+        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: R(() => [
+          Q(i("div", Ge, [
+            i("div", He, [
+              F(ot, {
+                title: `Memory ${k(qt)(k(t).allocatedMem)}KB`
+              }, {
+                default: R(() => [
+                  (d(), v(K, null, B(c, (p) => i("div", {
+                    key: p,
+                    class: "tl-flex tl-flex-col tl-items-center"
+                  }, [
+                    i("div", Je, [
+                      i("span", Qe, [
+                        i("i", {
+                          class: C(["tl-pl tl-text-sm", p.icon])
+                        }, null, 2)
+                      ]),
+                      i("span", Ze, M(s[p.label]), 1)
+                    ]),
+                    i("span", tl, M(p.label), 1)
+                  ])), 64))
+                ]),
+                _: 1
+              }, 8, ["title"]),
+              F(_t, {
+                points: k(t).accumulator,
+                value: k(t).currentMem,
+                unit: "MB",
+                label: "memory"
+              }, null, 8, ["points", "value"]),
+              F(ot, { title: "Render" }, {
+                default: R(() => [
+                  (d(), v(K, null, B(a, (p) => i("div", {
+                    key: p,
+                    class: "tl-flex tl-flex-col tl-items-center tl-mb-2"
+                  }, [
+                    i("div", el, [
+                      i("span", ll, [
+                        i("i", {
+                          class: C(["tl-pl tl-text-sm", p.icon])
+                        }, null, 2)
+                      ]),
+                      i("span", ol, M(s[p.label]), 1)
+                    ]),
+                    i("span", nl, M(p.label), 1)
+                  ])), 64))
+                ]),
+                _: 1
+              }),
+              F(ot, { title: "Programs" }, {
+                default: R(() => [
+                  F(wt, { items: g.value }, {
+                    "depth-0": R(({ item: p }) => [
+                      i("pre", rl, M(p), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["items"])
+                ]),
+                _: 1
+              })
+            ])
+          ], 512), [
+            [Z, f.value]
+          ])
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), sl = {
   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({
+}, il = /* @__PURE__ */ i("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), cl = /* @__PURE__ */ i("div", null, [
+  /* @__PURE__ */ i("i", { class: "i-ic-baseline-drag-indicator" }),
+  /* @__PURE__ */ i("i", { class: "i-ic-baseline-drag-indicator" }),
+  /* @__PURE__ */ i("i", { class: "i-ic-baseline-drag-indicator" })
+], -1), ul = /* @__PURE__ */ i("div", null, null, -1), dl = [
+  il,
+  cl,
+  ul
+], pl = 280, gl = /* @__PURE__ */ w({
   __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)] = _;
+    const n = e, { uuid: l } = q(n), { width: o } = vt(), t = b(null), c = Lt(l == null ? void 0 : l.value), a = ct(l == null ? void 0 : l.value);
+    function s(y, g) {
+      c[k(y)].value = g, c[k(y)][k(y)] = g;
     }
-    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 f = P(() => {
+      const y = {};
+      for (const g in c) {
+        const u = c[g], r = u.folder || "default";
+        y[r] || (y[r] = []), y[r].push(u);
       }
-      return u;
+      return y;
     });
-    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]),
+    return (y, g) => (d(), I(k(Ot), {
+      id: k(l),
+      "initial-value": { x: k(o) - pl - 40, y: 10 },
+      class: C(["tl-absolute tl-select-none tl-z-24 tl-w-280px tl-font-sans tl-text-xs", y.$attrs.class]),
       handle: t.value
     }, {
-      default: ut(() => [
-        f("div", ke, [
-          f("header", {
+      default: R(() => [
+        i("div", sl, [
+          i("header", {
             ref_key: "handle",
             ref: t,
             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, {
+          }, dl, 512),
+          (d(!0), v(K, null, B(f.value, (u, r) => (d(), v(K, { key: r }, [
+            r !== "default" ? (d(), I(Ve, {
               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, {
-              key: a.label,
-              control: a,
-              onChange: (m) => r(a.key, m)
-            }, null, 8, ["control", "onChange"]))), 128)) : H("", !0)
-          ], 64))), 128))
+              label: r,
+              controls: u
+            }, null, 8, ["label", "controls"])) : W("", !0),
+            r === "default" ? (d(!0), v(K, { key: 1 }, B(u, (p) => (d(), I(xt, {
+              key: p.label,
+              control: p,
+              onChange: (E) => s(p.key, E)
+            }, null, 8, ["control", "onChange"]))), 128)) : W("", !0)
+          ], 64))), 128)),
+          k(a).gl ? (d(), I(al, {
+            key: 0,
+            uuid: k(l)
+          }, null, 8, ["uuid"])) : W("", !0)
         ])
       ]),
       _: 1
     }, 8, ["id", "initial-value", "class", "handle"]));
   }
+}), yl = /* @__PURE__ */ w({
+  __name: "TresPerf",
+  setup(e) {
+    return Xt(), (n, l) => (d(), v("div"));
+  }
 });
 export {
-  Fe as TresLeches,
-  De as useControls,
-  Dt as useControlsProvider
+  yl as Perf,
+  gl as TresLeches,
+  bl as useControls,
+  Lt as useControlsProvider,
+  Xt as usePerf
 };