r3f-performance 0.1.3 → 0.1.6

package/dist/index.mjs

@@ -1,55 +1,348 @@
 (function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode('._perfS_ans5i_1{position:fixed;z-index:9999;font-family:Roboto Mono,-apple-system,BlinkMacSystemFont,monospace;background-color:#000c;color:#fff;padding:6px 0 6px 6px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column}._containerHeight_ans5i_16{min-height:110px}._topLeft_ans5i_21{top:0;left:0}._topRight_ans5i_22{top:0;right:0}._bottomLeft_ans5i_23{bottom:0;left:0}._bottomRight_ans5i_24{bottom:0;right:0}._minimal_ans5i_26{background-color:#242424d9}._perfIContainer_ans5i_30{display:flex;flex-wrap:wrap;gap:5px 10px}._perfIContainer_ans5i_30{display:flex;flex-wrap:wrap;gap:6px 12px;width:100%;padding-right:6px;box-sizing:border-box}._perfI_ans5i_30{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:55px;height:auto;position:relative;margin-right:4px}._perfI_ans5i_30 small{font-size:12px;color:#e0e0e0;font-weight:500;padding-left:0;margin-bottom:2px;white-space:nowrap}._perfB_ans5i_69{position:relative;bottom:auto;right:auto;text-align:left;font-size:8px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#65c5bc;width:100%;opacity:.9}._toggleContainer_ans5i_83{display:flex;justify-content:flex-end;padding-right:4px}._toggle_ans5i_83{cursor:pointer;font-size:10px;background-color:#ffffff1a;color:#fff;padding:4px 8px;border-radius:2px;margin-left:4px;transition:all .2s}._toggle_ans5i_83:hover{background-color:#fff3;color:#fff}._activeTab_ans5i_105{background-color:#65c5bc4d;color:#fff}._containerScroll_ans5i_110{max-height:50vh;overflow-y:auto}._programGeo_ans5i_115{margin-bottom:2px;pointer-events:auto}._programHeader_ans5i_120{display:flex;align-items:center;justify-content:space-between;background-color:#ffffff0f;padding:6px 8px;border-radius:4px;cursor:pointer;transition:background-color .2s;min-height:24px;border:1px solid transparent}._programHeader_ans5i_120:hover{background-color:#ffffff1a;border-color:#ffffff1a}._programHeader_ans5i_120 *{cursor:pointer!important}._programHeader_ans5i_120 small{font-size:9px}._programHeader_ans5i_120>b{margin-right:4px;cursor:pointer}._headerLeft_ans5i_149{display:flex;align-items:center;flex:1;overflow:hidden}._programTitle_ans5i_156{font-weight:700;font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:10px}._toggleArrow_ans5i_166{font-size:10px;margin-right:8px;color:#888;width:12px;text-align:center;transition:transform .2s}._toggleVisible_ans5i_175{pointer-events:auto;justify-content:center;cursor:pointer;font-size:12px;background-color:#292b2d;width:auto;margin:0;color:#919191;text-align:center;display:inline-block;vertical-align:middle;padding:4px 6px}._toggleVisible_ans5i_175:hover{background-color:#1f1f1f}._toggleVisible_ans5i_175 svg{width:12px;height:12px;float:left}._programConsole_ans5i_200{font-weight:700;letter-spacing:.02em;background-color:#292b2d;color:#d3d3d3;overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:block;font-size:11px;padding:5px;margin:4px auto;border:none;width:100%;text-align:center}._programsContainer_ans5i_218{margin-top:0}._headerRight_ans5i_222{display:flex;align-items:center;gap:6px}._metricBadge_ans5i_228{display:flex;align-items:center;background-color:#0000004d;padding:2px 6px;border-radius:3px;font-size:10px;color:#aaa;white-space:nowrap}._metricBadge_ans5i_228 b{color:#4fd1c5;margin-right:4px;font-weight:600;font-size:11px}._programsULHeader_ans5i_246{display:flex;position:relative;font-weight:700;color:#fff;line-height:14px;margin:4px 0}._programsULHeader_ans5i_246 svg{margin-right:4px;display:inline-block}._programsUL_ans5i_246{display:block;position:relative;padding-left:10px;margin:6px;list-style:none}._programsUL_ans5i_246 img{max-height:60px;max-width:100%;margin:6px auto;display:block}._programsUL_ans5i_246:after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background-color:gray;transform:translate(-50%);max-height:50vh;overflow-y:auto}._programsUL_ans5i_246 li{border-bottom:1px solid #313131;display:block;padding:4px;margin:0;line-height:1}._programsUL_ans5i_246 b{font-weight:700}._programsUL_ans5i_246 small{text-align:revert;letter-spacing:1px;font-size:10px;font-weight:500;margin-left:2px;color:#65c5bc}._programsGeoLi_ans5i_309{display:flex!important;height:auto!important}._programsGeoLi_ans5i_309 span{display:block;position:relative}._programsGeoLi_ans5i_309 b{padding-left:12px}._graph_ans5i_324{width:100%;height:66px;overflow:hidden;position:absolute;pointer-events:none;display:flex;top:0;left:0;justify-content:center;z-index:0}._graphpc_ans5i_336{text-align:center;font-weight:700;font-size:12px;line-height:12px;display:flex;justify-content:center;align-items:center;vertical-align:middle;color:#f1f1f1;padding:7px;width:100%;background-color:#242425cc;z-index:1;position:absolute;height:100%}._visibilityBtn_ans5i_354{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;margin-left:4px;color:#666;background:transparent;transition:all .2s}._visibilityBtn_ans5i_354:hover{background-color:#fff3;color:#fff}._visibilityBtn_ans5i_354._active_ans5i_105{color:#fff}')),document.head.appendChild(i)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { jsx as n, jsxs as y, Fragment as z } from "react/jsx-runtime";
-import { forwardRef as Te, useRef as I, useLayoutEffect as oe, useMemo as Y, useEffect as U, useState as O } from "react";
-import { useThree as we, addEffect as Ae, addAfterEffect as Se, addTail as Ne, Canvas as Re, useFrame as _e } from "@react-three/fiber";
-import { createRoot as Fe } from "react-dom/client";
-import * as E from "three";
-import { MathUtils as Pe } from "three";
-import { createWithEqualityFn as Ue } from "zustand/traditional";
-import { shallow as Ge } from "zustand/shallow";
-import Be from "eventemitter3";
-const be = Te(
-  ({ portal: r, className: e, children: t, name: i, ...m }, o) => {
-    const a = we((d) => d.gl), c = I(null), v = I(null), s = (r == null ? void 0 : r.current) != null ? r.current : a.domElement.parentNode;
-    return oe(() => {
-      if (!c.current || !s) return;
-      const d = document.createElement("div"), f = v.current = Fe(d);
-      return s.appendChild(d), () => {
-        f.unmount(), v.current = null, s.removeChild(d);
+import { jsx as p, jsxs as x, Fragment as q } from "react/jsx-runtime";
+import z, { forwardRef as Ke, useRef as T, useLayoutEffect as pe, useMemo as J, useEffect as P, useState as B } from "react";
+import { useThree as De, addEffect as Qe, addAfterEffect as Ye, addTail as Xe, Canvas as Je, useFrame as Ge } from "@react-three/fiber";
+import { createRoot as Ze } from "react-dom/client";
+import * as I from "three";
+import { MathUtils as et } from "three";
+const We = Ke(
+  ({ portal: t, className: e, children: n, name: o, ...d }, f) => {
+    const h = De((a) => a.gl), u = T(null), g = T(null), r = (t == null ? void 0 : t.current) != null ? t.current : h.domElement.parentNode;
+    return pe(() => {
+      if (!u.current || !r) return;
+      const a = document.createElement("div"), i = g.current = Ze(a);
+      return r.appendChild(a), () => {
+        i.unmount(), g.current = null, r.removeChild(a);
       };
-    }, [s]), oe(() => {
-      const d = v.current;
-      d && d.render(
-        /* @__PURE__ */ n("div", { ref: o, className: e, children: t })
+    }, [r]), pe(() => {
+      const a = g.current;
+      a && a.render(
+        /* @__PURE__ */ p("div", { ref: f, className: e, children: n })
       );
-    }), /* @__PURE__ */ n("group", { name: i, ...m, ref: c });
+    }), /* @__PURE__ */ p("group", { name: o, ...d, ref: u });
   }
 );
-be.displayName = "HtmlMinimal";
-const ee = Ue((r, e) => {
-  function t() {
-    var w;
-    const { accumulated: i, startTime: m, infos: o, estimatedMemory: a } = e(), c = (w = e().log) == null ? void 0 : w.maxMemory, { totalFrames: v, log: s, gl: d, max: f } = i, p = {
-      calls: d.calls / v,
-      triangles: d.triangles / v,
-      points: d.points / v,
-      lines: d.lines / v
-    }, h = {
-      gpu: s.gpu / v,
-      cpu: s.cpu / v,
-      mem: s.mem / v,
-      fps: s.fps / v
+We.displayName = "HtmlMinimal";
+function Be(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var ae = { exports: {} }, te = {}, Q = { exports: {} }, re = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var he;
+function tt() {
+  if (he) return re;
+  he = 1;
+  var t = z;
+  function e(i, m) {
+    return i === m && (i !== 0 || 1 / i === 1 / m) || i !== i && m !== m;
+  }
+  var n = typeof Object.is == "function" ? Object.is : e, o = t.useState, d = t.useEffect, f = t.useLayoutEffect, h = t.useDebugValue;
+  function u(i, m) {
+    var c = m(), s = o({ inst: { value: c, getSnapshot: m } }), y = s[0].inst, l = s[1];
+    return f(
+      function() {
+        y.value = c, y.getSnapshot = m, g(y) && l({ inst: y });
+      },
+      [i, c, m]
+    ), d(
+      function() {
+        return g(y) && l({ inst: y }), i(function() {
+          g(y) && l({ inst: y });
+        });
+      },
+      [i]
+    ), h(c), c;
+  }
+  function g(i) {
+    var m = i.getSnapshot;
+    i = i.value;
+    try {
+      var c = m();
+      return !n(i, c);
+    } catch {
+      return !0;
+    }
+  }
+  function r(i, m) {
+    return m();
+  }
+  var a = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? r : u;
+  return re.useSyncExternalStore = t.useSyncExternalStore !== void 0 ? t.useSyncExternalStore : a, re;
+}
+var ne = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ge;
+function rt() {
+  return ge || (ge = 1, process.env.NODE_ENV !== "production" && function() {
+    function t(c, s) {
+      return c === s && (c !== 0 || 1 / c === 1 / s) || c !== c && s !== s;
+    }
+    function e(c, s) {
+      a || d.startTransition === void 0 || (a = !0, console.error(
+        "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+      ));
+      var y = s();
+      if (!i) {
+        var l = s();
+        f(y, l) || (console.error(
+          "The result of getSnapshot should be cached to avoid an infinite loop"
+        ), i = !0);
+      }
+      l = h({
+        inst: { value: y, getSnapshot: s }
+      });
+      var E = l[0].inst, _ = l[1];
+      return g(
+        function() {
+          E.value = y, E.getSnapshot = s, n(E) && _({ inst: E });
+        },
+        [c, y, s]
+      ), u(
+        function() {
+          return n(E) && _({ inst: E }), c(function() {
+            n(E) && _({ inst: E });
+          });
+        },
+        [c]
+      ), r(y), y;
+    }
+    function n(c) {
+      var s = c.getSnapshot;
+      c = c.value;
+      try {
+        var y = s();
+        return !f(c, y);
+      } catch {
+        return !0;
+      }
+    }
+    function o(c, s) {
+      return s();
+    }
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var d = z, f = typeof Object.is == "function" ? Object.is : t, h = d.useState, u = d.useEffect, g = d.useLayoutEffect, r = d.useDebugValue, a = !1, i = !1, m = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? o : e;
+    ne.useSyncExternalStore = d.useSyncExternalStore !== void 0 ? d.useSyncExternalStore : m, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }()), ne;
+}
+var ye;
+function je() {
+  return ye || (ye = 1, process.env.NODE_ENV === "production" ? Q.exports = tt() : Q.exports = rt()), Q.exports;
+}
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ve;
+function nt() {
+  if (ve) return te;
+  ve = 1;
+  var t = z, e = je();
+  function n(r, a) {
+    return r === a && (r !== 0 || 1 / r === 1 / a) || r !== r && a !== a;
+  }
+  var o = typeof Object.is == "function" ? Object.is : n, d = e.useSyncExternalStore, f = t.useRef, h = t.useEffect, u = t.useMemo, g = t.useDebugValue;
+  return te.useSyncExternalStoreWithSelector = function(r, a, i, m, c) {
+    var s = f(null);
+    if (s.current === null) {
+      var y = { hasValue: !1, value: null };
+      s.current = y;
+    } else y = s.current;
+    s = u(
+      function() {
+        function E(w) {
+          if (!_) {
+            if (_ = !0, b = w, w = m(w), c !== void 0 && y.hasValue) {
+              var L = y.value;
+              if (c(L, w))
+                return S = L;
+            }
+            return S = w;
+          }
+          if (L = S, o(b, w)) return L;
+          var O = m(w);
+          return c !== void 0 && c(L, O) ? (b = w, L) : (b = w, S = O);
+        }
+        var _ = !1, b, S, C = i === void 0 ? null : i;
+        return [
+          function() {
+            return E(a());
+          },
+          C === null ? void 0 : function() {
+            return E(C());
+          }
+        ];
+      },
+      [a, i, m, c]
+    );
+    var l = d(r, s[0], s[1]);
+    return h(
+      function() {
+        y.hasValue = !0, y.value = l;
+      },
+      [l]
+    ), g(l), l;
+  }, te;
+}
+var se = {};
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var _e;
+function st() {
+  return _e || (_e = 1, process.env.NODE_ENV !== "production" && function() {
+    function t(r, a) {
+      return r === a && (r !== 0 || 1 / r === 1 / a) || r !== r && a !== a;
+    }
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var e = z, n = je(), o = typeof Object.is == "function" ? Object.is : t, d = n.useSyncExternalStore, f = e.useRef, h = e.useEffect, u = e.useMemo, g = e.useDebugValue;
+    se.useSyncExternalStoreWithSelector = function(r, a, i, m, c) {
+      var s = f(null);
+      if (s.current === null) {
+        var y = { hasValue: !1, value: null };
+        s.current = y;
+      } else y = s.current;
+      s = u(
+        function() {
+          function E(w) {
+            if (!_) {
+              if (_ = !0, b = w, w = m(w), c !== void 0 && y.hasValue) {
+                var L = y.value;
+                if (c(L, w))
+                  return S = L;
+              }
+              return S = w;
+            }
+            if (L = S, o(b, w))
+              return L;
+            var O = m(w);
+            return c !== void 0 && c(L, O) ? (b = w, L) : (b = w, S = O);
+          }
+          var _ = !1, b, S, C = i === void 0 ? null : i;
+          return [
+            function() {
+              return E(a());
+            },
+            C === null ? void 0 : function() {
+              return E(C());
+            }
+          ];
+        },
+        [a, i, m, c]
+      );
+      var l = d(r, s[0], s[1]);
+      return h(
+        function() {
+          y.hasValue = !0, y.value = l;
+        },
+        [l]
+      ), g(l), l;
+    }, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }()), se;
+}
+process.env.NODE_ENV === "production" ? ae.exports = nt() : ae.exports = st();
+var it = ae.exports;
+const at = /* @__PURE__ */ Be(it), Ee = (t) => {
+  let e;
+  const n = /* @__PURE__ */ new Set(), o = (r, a) => {
+    const i = typeof r == "function" ? r(e) : r;
+    if (!Object.is(i, e)) {
+      const m = e;
+      e = a ?? (typeof i != "object" || i === null) ? i : Object.assign({}, e, i), n.forEach((c) => c(e, m));
+    }
+  }, d = () => e, u = { setState: o, getState: d, getInitialState: () => g, subscribe: (r) => (n.add(r), () => n.delete(r)) }, g = e = t(o, d, u);
+  return u;
+}, ot = (t) => t ? Ee(t) : Ee, { useSyncExternalStoreWithSelector: ct } = at, lt = (t) => t;
+function ut(t, e = lt, n) {
+  const o = ct(
+    t.subscribe,
+    t.getState,
+    t.getInitialState,
+    e,
+    n
+  );
+  return z.useDebugValue(o), o;
+}
+const be = (t, e) => {
+  const n = ot(t), o = (d, f = e) => ut(n, d, f);
+  return Object.assign(o, n), o;
+}, ft = (t, e) => t ? be(t, e) : be, xe = (t) => Symbol.iterator in t, Se = (t) => (
+  // HACK: avoid checking entries type
+  "entries" in t
+), we = (t, e) => {
+  const n = t instanceof Map ? t : new Map(t.entries()), o = e instanceof Map ? e : new Map(e.entries());
+  if (n.size !== o.size)
+    return !1;
+  for (const [d, f] of n)
+    if (!o.has(d) || !Object.is(f, o.get(d)))
+      return !1;
+  return !0;
+}, mt = (t, e) => {
+  const n = t[Symbol.iterator](), o = e[Symbol.iterator]();
+  let d = n.next(), f = o.next();
+  for (; !d.done && !f.done; ) {
+    if (!Object.is(d.value, f.value))
+      return !1;
+    d = n.next(), f = o.next();
+  }
+  return !!d.done && !!f.done;
+};
+function dt(t, e) {
+  return Object.is(t, e) ? !0 : typeof t != "object" || t === null || typeof e != "object" || e === null || Object.getPrototypeOf(t) !== Object.getPrototypeOf(e) ? !1 : xe(t) && xe(e) ? Se(t) && Se(e) ? we(t, e) : mt(t, e) : we(
+    { entries: () => Object.entries(t) },
+    { entries: () => Object.entries(e) }
+  );
+}
+const oe = ft((t, e) => {
+  function n() {
+    var y;
+    const { accumulated: o, startTime: d, infos: f, estimatedMemory: h } = e(), u = (y = e().log) == null ? void 0 : y.maxMemory, { totalFrames: g, log: r, gl: a, max: i } = o, m = {
+      calls: a.calls / g,
+      triangles: a.triangles / g,
+      points: a.points / g,
+      lines: a.lines / g
+    }, c = {
+      gpu: r.gpu / g,
+      cpu: r.cpu / g,
+      mem: r.mem / g,
+      fps: r.fps / g
     };
     return {
-      sessionTime: (window.performance.now() - m) / 1e3,
-      infos: o,
-      memory: a,
+      sessionTime: (window.performance.now() - d) / 1e3,
+      infos: f,
+      memory: h,
       // Thêm memory vào report
-      log: h,
-      gl: p,
-      max: f,
-      maxMemory: c,
-      totalFrames: v
+      log: c,
+      gl: m,
+      max: i,
+      maxMemory: u,
+      totalFrames: g
     };
   }
   return {
@@ -114,16 +407,16 @@ const ee = Ue((r, e) => {
     programs: /* @__PURE__ */ new Map(),
     sceneLength: void 0,
     tab: "infos",
-    getReport: t
+    getReport: n
   };
-}), L = (r) => ee(r, Ge);
-Object.assign(L, ee);
-const { getState: R, setState: M } = ee, S = {
+}), A = (t) => oe(t, dt);
+Object.assign(A, oe);
+const { getState: F, setState: M } = oe, R = {
   value: 0,
   fpsLimit: 60,
   isOverLimit: 0
-}, H = (r) => (r == null ? void 0 : r.reduce((e, t) => e + t, 0)) / r.length;
-class De {
+}, V = (t) => (t == null ? void 0 : t.reduce((e, n) => e + n, 0)) / t.length;
+class pt {
   constructor(e = {}) {
     this.names = [""], this.finished = [], this.paused = !1, this.overClock = !1, this.queryHasResult = !1, this.queryCreated = !1, this.isWebGL2 = !0, this.memAccums = [], this.gpuAccums = [], this.activeAccums = [], this.logsAccums = {
       mem: [],
@@ -138,7 +431,7 @@ class De {
     }, this.t0 = 0, window.GLPerf = window.GLPerf || {}, Object.assign(this, e), this.fpsChart = new Array(this.chartLen).fill(0), this.gpuChart = new Array(this.chartLen).fill(0), this.cpuChart = new Array(this.chartLen).fill(0), this.memChart = new Array(this.chartLen).fill(0), this.now = () => window.performance && window.performance.now ? window.performance.now() : Date.now(), this.initGpu(), this.is120hz();
   }
   initGpu() {
-    this.uuid = Pe.generateUUID(), this.gl && (this.isWebGL2 = !0, this.extension || (this.extension = this.gl.getExtension(
+    this.uuid = et.generateUUID(), this.gl && (this.isWebGL2 = !0, this.extension || (this.extension = this.gl.getExtension(
       "EXT_disjoint_timer_query_webgl2"
     )), this.extension === null && (this.isWebGL2 = !1));
   }
@@ -147,10 +440,10 @@ class De {
    */
   is120hz() {
     let e = 0;
-    const t = (i) => {
-      ++e < 20 ? this.rafId = window.requestAnimationFrame(t) : (this.detected = Math.ceil(1e3 * e / (i - this.t0) / 70), window.cancelAnimationFrame(this.rafId)), this.t0 || (this.t0 = i);
+    const n = (o) => {
+      ++e < 20 ? this.rafId = window.requestAnimationFrame(n) : (this.detected = Math.ceil(1e3 * e / (o - this.t0) / 70), window.cancelAnimationFrame(this.rafId)), this.t0 || (this.t0 = o);
     };
-    this.rafId = window.requestAnimationFrame(t);
+    this.rafId = window.requestAnimationFrame(n);
   }
   /**
    * Explicit UI add
@@ -160,8 +453,8 @@ class De {
     this.names.indexOf(e) === -1 && (this.names.push(e), this.gpuAccums.push(0), this.activeAccums.push(!1));
   }
   nextFps(e) {
-    const t = 16.666666666666668, i = t - e.timeRemaining(), m = t * S.fpsLimit / 10 / i;
-    m < 0 || (S.value = m, S.isOverLimit < 25 ? S.isOverLimit++ : M({ overclockingFps: !0 }));
+    const n = 16.666666666666668, o = n - e.timeRemaining(), d = n * R.fpsLimit / 10 / o;
+    d < 0 || (R.value = d, R.isOverLimit < 25 ? R.isOverLimit++ : M({ overclockingFps: !0 }));
   }
   /**
    * Increase frameID
@@ -169,49 +462,49 @@ class De {
    */
   nextFrame(e) {
     this.frameId++;
-    const t = e || this.now(), i = t - this.paramTime;
-    let m = 0;
+    const n = e || this.now(), o = n - this.paramTime;
+    let d = 0;
     if (this.frameId <= 1)
-      this.paramFrame = this.frameId, this.paramTime = t;
-    else if (t >= this.paramTime) {
+      this.paramFrame = this.frameId, this.paramTime = n;
+    else if (n >= this.paramTime) {
       this.maxMemory = window.performance.memory ? window.performance.memory.jsHeapSizeLimit / 1048576 : 0;
-      const o = this.frameId - this.paramFrame, a = o * 1e3 / i, c = R().overclockingFps ? S.value : a;
-      if (m = this.isWebGL2 ? this.gpuAccums[0] : this.gpuAccums[0] / i, this.isWebGL2 ? this.gpuAccums[0] = 0 : Promise.all(this.finished).then(() => {
+      const f = this.frameId - this.paramFrame, h = f * 1e3 / o, u = F().overclockingFps ? R.value : h;
+      if (d = this.isWebGL2 ? this.gpuAccums[0] : this.gpuAccums[0] / o, this.isWebGL2 ? this.gpuAccums[0] = 0 : Promise.all(this.finished).then(() => {
         this.gpuAccums[0] = 0, this.finished = [];
       }), this.currentMem = Math.round(
         window.performance && window.performance.memory ? window.performance.memory.usedJSHeapSize / 1048576 : 0
       ), window.performance && this.startCpuProfiling) {
         window.performance.mark("cpu-finished");
-        const v = performance.measure(
+        const g = performance.measure(
           "cpu-duration",
           "cpu-started",
           "cpu-finished"
         );
-        this.currentCpu = (v == null ? void 0 : v.duration) || 0, this.logsAccums.cpu.push(this.currentCpu), this.startCpuProfiling = !1;
+        this.currentCpu = (g == null ? void 0 : g.duration) || 0, this.logsAccums.cpu.push(this.currentCpu), this.startCpuProfiling = !1;
       }
-      this.logsAccums.mem.push(this.currentMem), this.logsAccums.fpsFixed.push(a), this.logsAccums.fps.push(c), this.logsAccums.gpu.push(m), this.overClock && typeof window.requestIdleCallback < "u" && (S.isOverLimit > 0 && c > a ? S.isOverLimit-- : R().overclockingFps && M({ overclockingFps: !1 })), t >= this.paramTime + 1e3 / this.logsPerSecond && (this.paramLogger({
-        cpu: H(this.logsAccums.cpu),
-        gpu: H(this.logsAccums.gpu),
-        mem: H(this.logsAccums.mem),
-        fps: H(this.logsAccums.fps),
-        duration: Math.round(i),
+      this.logsAccums.mem.push(this.currentMem), this.logsAccums.fpsFixed.push(h), this.logsAccums.fps.push(u), this.logsAccums.gpu.push(d), this.overClock && typeof window.requestIdleCallback < "u" && (R.isOverLimit > 0 && u > h ? R.isOverLimit-- : F().overclockingFps && M({ overclockingFps: !1 })), n >= this.paramTime + 1e3 / this.logsPerSecond && (this.paramLogger({
+        cpu: V(this.logsAccums.cpu),
+        gpu: V(this.logsAccums.gpu),
+        mem: V(this.logsAccums.mem),
+        fps: V(this.logsAccums.fps),
+        duration: Math.round(o),
         maxMemory: this.maxMemory,
-        frameCount: o
-      }), this.logsAccums.mem = [], this.logsAccums.fps = [], this.logsAccums.gpu = [], this.logsAccums.cpu = [], this.paramFrame = this.frameId, this.paramTime = t), this.overClock && t - this.lastCalculateFixed >= 2 * 1e3 && (this.lastCalculateFixed = e, S.fpsLimit = Math.round(H(this.logsAccums.fpsFixed) / 10) * 100, M({ fpsLimit: S.fpsLimit / 10 }), this.logsAccums.fpsFixed = [], this.paramFrame = this.frameId, this.paramTime = t);
+        frameCount: f
+      }), this.logsAccums.mem = [], this.logsAccums.fps = [], this.logsAccums.gpu = [], this.logsAccums.cpu = [], this.paramFrame = this.frameId, this.paramTime = n), this.overClock && n - this.lastCalculateFixed >= 2 * 1e3 && (this.lastCalculateFixed = e, R.fpsLimit = Math.round(V(this.logsAccums.fpsFixed) / 10) * 100, M({ fpsLimit: R.fpsLimit / 10 }), this.logsAccums.fpsFixed = [], this.paramFrame = this.frameId, this.paramTime = n);
     }
     if (!this.detected || !this.chartFrame)
-      this.chartFrame = this.frameId, this.chartTime = t, this.circularId = 0;
+      this.chartFrame = this.frameId, this.chartTime = n, this.circularId = 0;
     else {
-      const o = t - this.chartTime;
-      let a = this.chartHz * o / 1e3;
-      for (; --a > 0 && this.detected; ) {
-        const v = (this.frameId - this.chartFrame) / o * 1e3, s = R().overclockingFps ? S.value : v;
-        this.fpsChart[this.circularId % this.chartLen] = s;
-        const d = 1e3 / this.currentMem, f = this.currentCpu, p = (this.isWebGL2 ? this.gpuAccums[1] * 2 : Math.round(this.gpuAccums[1] / i * 100)) + 4;
-        p > 0 && (this.gpuChart[this.circularId % this.chartLen] = p), f > 0 && (this.cpuChart[this.circularId % this.chartLen] = f), d > 0 && (this.memChart[this.circularId % this.chartLen] = d);
-        for (let h = 0; h < this.names.length; h++)
+      const f = n - this.chartTime;
+      let h = this.chartHz * f / 1e3;
+      for (; --h > 0 && this.detected; ) {
+        const g = (this.frameId - this.chartFrame) / f * 1e3, r = F().overclockingFps ? R.value : g;
+        this.fpsChart[this.circularId % this.chartLen] = r;
+        const a = 1e3 / this.currentMem, i = this.currentCpu, m = (this.isWebGL2 ? this.gpuAccums[1] * 2 : Math.round(this.gpuAccums[1] / o * 100)) + 4;
+        m > 0 && (this.gpuChart[this.circularId % this.chartLen] = m), i > 0 && (this.cpuChart[this.circularId % this.chartLen] = i), a > 0 && (this.memChart[this.circularId % this.chartLen] = a);
+        for (let c = 0; c < this.names.length; c++)
           this.chartLogger({
-            i: h,
+            i: c,
             data: {
               fps: this.fpsChart,
               gpu: this.gpuChart,
@@ -220,31 +513,31 @@ class De {
             },
             circularId: this.circularId
           });
-        this.circularId++, this.chartFrame = this.frameId, this.chartTime = t;
+        this.circularId++, this.chartFrame = this.frameId, this.chartTime = n;
       }
     }
   }
   startGpu() {
-    const e = this.gl, t = this.extension;
-    if (!(!e || !t) && this.isWebGL2) {
-      let i = !1, m, o;
+    const e = this.gl, n = this.extension;
+    if (!(!e || !n) && this.isWebGL2) {
+      let o = !1, d, f;
       if (this.query) {
         this.queryHasResult = !1;
-        let a = this.query;
-        if (i = e.getQueryParameter(a, e.QUERY_RESULT_AVAILABLE), m = e.getParameter(t.GPU_DISJOINT_EXT), i && !m) {
-          o = e.getQueryParameter(this.query, e.QUERY_RESULT);
-          const c = o * 1e-6;
-          (i || m) && (e.deleteQuery(this.query), a = null), i && c > 0 && (m || this.activeAccums.forEach((v, s) => {
-            this.gpuAccums[s] = c;
+        let h = this.query;
+        if (o = e.getQueryParameter(h, e.QUERY_RESULT_AVAILABLE), d = e.getParameter(n.GPU_DISJOINT_EXT), o && !d) {
+          f = e.getQueryParameter(this.query, e.QUERY_RESULT);
+          const u = f * 1e-6;
+          (o || d) && (e.deleteQuery(this.query), h = null), o && u > 0 && (d || this.activeAccums.forEach((g, r) => {
+            this.gpuAccums[r] = u;
           }));
         }
       }
-      (i || !this.query) && (this.queryCreated = !0, this.query = e.createQuery(), e.beginQuery(t.TIME_ELAPSED_EXT, this.query));
+      (o || !this.query) && (this.queryCreated = !0, this.query = e.createQuery(), e.beginQuery(n.TIME_ELAPSED_EXT, this.query));
     }
   }
   endGpu() {
-    const e = this.extension, t = this.gl;
-    this.isWebGL2 && this.queryCreated && t.getQuery(e.TIME_ELAPSED_EXT, t.CURRENT_QUERY) && t.endQuery(e.TIME_ELAPSED_EXT);
+    const e = this.extension, n = this.gl;
+    this.isWebGL2 && this.queryCreated && n.getQuery(e.TIME_ELAPSED_EXT, n.CURRENT_QUERY) && n.endQuery(e.TIME_ELAPSED_EXT);
   }
   /**
    * Begin named measurement
@@ -261,15 +554,15 @@ class De {
     this.endGpu(), this.updateAccums(e);
   }
   updateAccums(e) {
-    let t = this.names.indexOf(e);
-    t === -1 && (t = this.names.length, this.addUI(e));
-    const i = this.now();
-    this.activeAccums[t] = !this.activeAccums[t], this.t0 = i;
+    let n = this.names.indexOf(e);
+    n === -1 && (n = this.names.length, this.addUI(e));
+    const o = this.now();
+    this.activeAccums[n] = !this.activeAccums[n], this.t0 = o;
   }
   dispose() {
-    const e = this.gl, t = this.extension;
+    const e = this.gl, n = this.extension;
     try {
-      this.isWebGL2 && e && t && e.getQuery(t.TIME_ELAPSED_EXT, e.CURRENT_QUERY) && e.endQuery(t.TIME_ELAPSED_EXT);
+      this.isWebGL2 && e && n && e.getQuery(n.TIME_ELAPSED_EXT, e.CURRENT_QUERY) && e.endQuery(n.TIME_ELAPSED_EXT);
     } catch {
     }
     if (e && this.query) {
@@ -282,80 +575,187 @@ class De {
     this.queryCreated = !1, this.queryHasResult = !1;
   }
 }
-const We = (r) => {
-  r.forEach((e) => {
-    const { meshes: t } = e;
-    if (!t)
+const ht = (t) => {
+  t.forEach((e) => {
+    const { meshes: n } = e;
+    if (!n)
       return;
-    const i = {
+    const o = {
       total: 0,
       type: "Triangle",
       data: []
     };
-    Object.keys(t).forEach((m) => {
-      const o = t[m], { geometry: a, material: c } = o, v = a.index, s = a.attributes.position;
-      if (!s) return;
-      let d = 1;
-      c.wireframe === !0 && (d = 0);
-      const f = v !== null ? v.count : s.count, p = a.drawRange.start * d, h = a.drawRange.count * d, u = p, w = Math.min(f, p + h) - 1;
-      let g = 1;
-      const _ = o.count || 1;
-      let x = "Triangle", b = 0;
-      o.isMesh ? c.wireframe === !0 ? (x = "Line", g = g / 2) : (x = "Triangle", g = g / 3) : o.isLine ? (x = "Line", o.isLineSegments ? g = g / 2 : o.isLineLoop ? g = g : g = g - 1) : o.isPoints ? (x = "Point", g = g) : o.isSprite && (x = "Triangle", g = g / 3);
-      const C = Math.round(
-        Math.max(0, w - u + 1) * (g * _)
+    Object.keys(n).forEach((d) => {
+      const f = n[d], { geometry: h, material: u } = f, g = h.index, r = h.attributes.position;
+      if (!r) return;
+      let a = 1;
+      u.wireframe === !0 && (a = 0);
+      const i = g !== null ? g.count : r.count, m = h.drawRange.start * a, c = h.drawRange.count * a, s = m, y = Math.min(i, m + c) - 1;
+      let l = 1;
+      const E = f.count || 1;
+      let _ = "Triangle", b = 0;
+      f.isMesh ? u.wireframe === !0 ? (_ = "Line", l = l / 2) : (_ = "Triangle", l = l / 3) : f.isLine ? (_ = "Line", f.isLineSegments ? l = l / 2 : f.isLineLoop ? l = l : l = l - 1) : f.isPoints ? (_ = "Point", l = l) : f.isSprite && (_ = "Triangle", l = l / 3);
+      const S = Math.round(
+        Math.max(0, y - s + 1) * (l * E)
       );
-      C > b && (b = C, i.type = x), i.total += C, i.data.push({ drawCount: C, type: x }), o.userData.drawCount = {
-        type: x,
-        count: C
+      S > b && (b = S, o.type = _), o.total += S, o.data.push({ drawCount: S, type: _ }), f.userData.drawCount = {
+        type: _,
+        count: S
       };
-    }), e.drawCounts = i;
+    }), e.drawCounts = o;
   });
-}, te = new Be();
-function Oe(r, e, t) {
-  return te.on(r, e);
+};
+var Ve = { exports: {} };
+(function(t) {
+  var e = Object.prototype.hasOwnProperty, n = "~";
+  function o() {
+  }
+  Object.create && (o.prototype = /* @__PURE__ */ Object.create(null), new o().__proto__ || (n = !1));
+  function d(g, r, a) {
+    this.fn = g, this.context = r, this.once = a || !1;
+  }
+  function f(g, r, a, i, m) {
+    if (typeof a != "function")
+      throw new TypeError("The listener must be a function");
+    var c = new d(a, i || g, m), s = n ? n + r : r;
+    return g._events[s] ? g._events[s].fn ? g._events[s] = [g._events[s], c] : g._events[s].push(c) : (g._events[s] = c, g._eventsCount++), g;
+  }
+  function h(g, r) {
+    --g._eventsCount === 0 ? g._events = new o() : delete g._events[r];
+  }
+  function u() {
+    this._events = new o(), this._eventsCount = 0;
+  }
+  u.prototype.eventNames = function() {
+    var r = [], a, i;
+    if (this._eventsCount === 0) return r;
+    for (i in a = this._events)
+      e.call(a, i) && r.push(n ? i.slice(1) : i);
+    return Object.getOwnPropertySymbols ? r.concat(Object.getOwnPropertySymbols(a)) : r;
+  }, u.prototype.listeners = function(r) {
+    var a = n ? n + r : r, i = this._events[a];
+    if (!i) return [];
+    if (i.fn) return [i.fn];
+    for (var m = 0, c = i.length, s = new Array(c); m < c; m++)
+      s[m] = i[m].fn;
+    return s;
+  }, u.prototype.listenerCount = function(r) {
+    var a = n ? n + r : r, i = this._events[a];
+    return i ? i.fn ? 1 : i.length : 0;
+  }, u.prototype.emit = function(r, a, i, m, c, s) {
+    var y = n ? n + r : r;
+    if (!this._events[y]) return !1;
+    var l = this._events[y], E = arguments.length, _, b;
+    if (l.fn) {
+      switch (l.once && this.removeListener(r, l.fn, void 0, !0), E) {
+        case 1:
+          return l.fn.call(l.context), !0;
+        case 2:
+          return l.fn.call(l.context, a), !0;
+        case 3:
+          return l.fn.call(l.context, a, i), !0;
+        case 4:
+          return l.fn.call(l.context, a, i, m), !0;
+        case 5:
+          return l.fn.call(l.context, a, i, m, c), !0;
+        case 6:
+          return l.fn.call(l.context, a, i, m, c, s), !0;
+      }
+      for (b = 1, _ = new Array(E - 1); b < E; b++)
+        _[b - 1] = arguments[b];
+      l.fn.apply(l.context, _);
+    } else {
+      var S = l.length, C;
+      for (b = 0; b < S; b++)
+        switch (l[b].once && this.removeListener(r, l[b].fn, void 0, !0), E) {
+          case 1:
+            l[b].fn.call(l[b].context);
+            break;
+          case 2:
+            l[b].fn.call(l[b].context, a);
+            break;
+          case 3:
+            l[b].fn.call(l[b].context, a, i);
+            break;
+          case 4:
+            l[b].fn.call(l[b].context, a, i, m);
+            break;
+          default:
+            if (!_) for (C = 1, _ = new Array(E - 1); C < E; C++)
+              _[C - 1] = arguments[C];
+            l[b].fn.apply(l[b].context, _);
+        }
+    }
+    return !0;
+  }, u.prototype.on = function(r, a, i) {
+    return f(this, r, a, i, !1);
+  }, u.prototype.once = function(r, a, i) {
+    return f(this, r, a, i, !0);
+  }, u.prototype.removeListener = function(r, a, i, m) {
+    var c = n ? n + r : r;
+    if (!this._events[c]) return this;
+    if (!a)
+      return h(this, c), this;
+    var s = this._events[c];
+    if (s.fn)
+      s.fn === a && (!m || s.once) && (!i || s.context === i) && h(this, c);
+    else {
+      for (var y = 0, l = [], E = s.length; y < E; y++)
+        (s[y].fn !== a || m && !s[y].once || i && s[y].context !== i) && l.push(s[y]);
+      l.length ? this._events[c] = l.length === 1 ? l[0] : l : h(this, c);
+    }
+    return this;
+  }, u.prototype.removeAllListeners = function(r) {
+    var a;
+    return r ? (a = n ? n + r : r, this._events[a] && h(this, a)) : (this._events = new o(), this._eventsCount = 0), this;
+  }, u.prototype.off = u.prototype.removeListener, u.prototype.addListener = u.prototype.on, u.prefixed = n, u.EventEmitter = u, t.exports = u;
+})(Ve);
+var gt = Ve.exports;
+const yt = /* @__PURE__ */ Be(gt), ce = new yt();
+function vt(t, e, n) {
+  return ce.on(t, e);
 }
-function ke(r, e, t) {
-  te.removeListener(
-    r,
+function _t(t, e, n) {
+  ce.removeListener(
+    t,
     e,
-    (t == null ? void 0 : t.context) ?? null,
-    t == null ? void 0 : t.once
+    (n == null ? void 0 : n.context) ?? null,
+    n == null ? void 0 : n.once
   );
 }
-function He(r, e) {
-  te.emit(r, e);
+function Et(t, e) {
+  ce.emit(t, e);
 }
-function qe(r) {
-  let e = 0, t = 0;
-  const i = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Set();
-  return r.traverse((o) => {
-    if (o.isMesh) {
-      const a = o;
-      if (a.geometry && !i.has(a.geometry.uuid)) {
-        i.add(a.geometry.uuid);
-        const s = a.geometry.attributes;
-        for (const d in s) {
-          const f = s[d];
-          f.array && (t += f.array.byteLength);
+function bt(t) {
+  let e = 0, n = 0;
+  const o = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set();
+  return t.traverse((f) => {
+    if (f.isMesh) {
+      const h = f;
+      if (h.geometry && !o.has(h.geometry.uuid)) {
+        o.add(h.geometry.uuid);
+        const r = h.geometry.attributes;
+        for (const a in r) {
+          const i = r[a];
+          i.array && (n += i.array.byteLength);
         }
-        a.geometry.index && a.geometry.index.array && (t += a.geometry.index.array.byteLength);
+        h.geometry.index && h.geometry.index.array && (n += h.geometry.index.array.byteLength);
       }
-      const c = a.material;
-      (Array.isArray(c) ? c : [c]).forEach((s) => {
-        if (s)
-          for (const d in s) {
-            const f = s[d];
-            if (f && f.isTexture) {
-              const p = f;
-              if (!m.has(p.uuid)) {
-                if (m.add(p.uuid), p.isCompressedTexture && p.mipmaps)
-                  p.mipmaps.forEach((h) => {
-                    h.data && (e += h.data.byteLength);
+      const u = h.material;
+      (Array.isArray(u) ? u : [u]).forEach((r) => {
+        if (r)
+          for (const a in r) {
+            const i = r[a];
+            if (i && i.isTexture) {
+              const m = i;
+              if (!d.has(m.uuid)) {
+                if (d.add(m.uuid), m.isCompressedTexture && m.mipmaps)
+                  m.mipmaps.forEach((c) => {
+                    c.data && (e += c.data.byteLength);
                   });
-                else if (p.image) {
-                  const h = p.image, u = h.width || 0, w = h.height || 0, g = p.generateMipmaps ? 1.33 : 1;
-                  e += u * w * 4 * g;
+                else if (m.image) {
+                  const c = m.image, s = c.width || 0, y = c.height || 0, l = m.generateMipmaps ? 1.33 : 1;
+                  e += s * y * 4 * l;
                 }
               }
             }
@@ -363,151 +763,151 @@ function qe(r) {
       });
     }
   }), {
-    geometry: t,
+    geometry: n,
     texture: e,
-    total: t + e
+    total: n + e
   };
 }
-const ce = E.Object3D.prototype.updateMatrixWorld, le = E.Object3D.prototype.updateWorldMatrix, ue = E.Object3D.prototype.updateMatrix, me = ["calls", "triangles", "points", "lines"], de = ["gpu", "cpu", "mem", "fps"], je = (r) => /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
-  r
-), pe = (r, e) => {
-  r.defines || (r.defines = {}), r.defines.muiPerf || (r.defines = Object.assign(r.defines || {}, {
-    muiPerf: r.uuid
-  }), r.needsUpdate = !0);
-  const t = r.uuid;
-  return e[t] || (e[t] = { meshes: {}, material: r }), r.needsUpdate = !1, t;
-}, ze = (r) => r === "muiPerf", Ve = ({
-  overClock: r,
+const Le = I.Object3D.prototype.updateMatrixWorld, Ce = I.Object3D.prototype.updateWorldMatrix, Oe = I.Object3D.prototype.updateMatrix, Ie = ["calls", "triangles", "points", "lines"], Me = ["gpu", "cpu", "mem", "fps"], xt = (t) => /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
+  t
+), Te = (t, e) => {
+  t.defines || (t.defines = {}), t.defines.muiPerf || (t.defines = Object.assign(t.defines || {}, {
+    muiPerf: t.uuid
+  }), t.needsUpdate = !0);
+  const n = t.uuid;
+  return e[n] || (e[n] = { meshes: {}, material: t }), t.needsUpdate = !1, n;
+}, St = (t) => t === "muiPerf", wt = ({
+  overClock: t,
   logsPerSecond: e,
-  chart: t,
-  deepAnalyze: i,
-  matrixUpdate: m
+  chart: n,
+  deepAnalyze: o,
+  matrixUpdate: d
 }) => {
-  const { gl: o, scene: a } = we();
-  M({ gl: o, scene: a });
-  const c = 1e3;
-  let v = 0;
-  const s = Y(() => {
-    const d = new De({
+  const { gl: f, scene: h } = De();
+  M({ gl: f, scene: h });
+  const u = 1e3;
+  let g = 0;
+  const r = J(() => {
+    const a = new pt({
       trackGPU: !0,
-      overClock: r,
-      chartLen: t ? t.length : 120,
-      chartHz: t ? t.hz : 60,
+      overClock: t,
+      chartLen: n ? n.length : 120,
+      chartHz: n ? n.hz : 60,
       logsPerSecond: e || 10,
-      gl: o.getContext(),
-      chartLogger: (g) => {
-        M({ chart: g });
+      gl: f.getContext(),
+      chartLogger: (l) => {
+        M({ chart: l });
       },
-      paramLogger: (g) => {
-        var T;
-        const _ = {
-          maxMemory: g.maxMemory,
-          gpu: g.gpu,
-          cpu: g.cpu,
-          mem: g.mem,
-          fps: g.fps,
-          totalTime: g.duration,
-          frameCount: g.frameCount
+      paramLogger: (l) => {
+        var C;
+        const E = {
+          maxMemory: l.maxMemory,
+          gpu: l.gpu,
+          cpu: l.cpu,
+          mem: l.mem,
+          fps: l.fps,
+          totalTime: l.duration,
+          frameCount: l.frameCount
         };
-        M({ log: _ });
-        const { accumulated: x } = R(), b = o.info.render;
-        x.totalFrames++, x.gl.calls += b.calls, x.gl.triangles += b.triangles, x.gl.points += b.points, x.gl.lines += b.lines, x.log.gpu += g.gpu, x.log.cpu += g.cpu, x.log.mem += g.mem, x.log.fps += g.fps;
-        for (let F = 0; F < me.length; F++) {
-          const A = me[F], P = b[A];
-          P > x.max.gl[A] && (x.max.gl[A] = P);
+        M({ log: E });
+        const { accumulated: _ } = F(), b = f.info.render;
+        _.totalFrames++, _.gl.calls += b.calls, _.gl.triangles += b.triangles, _.gl.points += b.points, _.gl.lines += b.lines, _.log.gpu += l.gpu, _.log.cpu += l.cpu, _.log.mem += l.mem, _.log.fps += l.fps;
+        for (let w = 0; w < Ie.length; w++) {
+          const L = Ie[w], O = b[L];
+          O > _.max.gl[L] && (_.max.gl[L] = O);
         }
-        for (let F = 0; F < de.length; F++) {
-          const A = de[F], P = g[A];
-          P > x.max.log[A] && (x.max.log[A] = P);
+        for (let w = 0; w < Me.length; w++) {
+          const L = Me[w], O = l[L];
+          O > _.max.log[L] && (_.max.log[L] = O);
         }
-        M({ accumulated: x });
-        const C = {
-          calls: o.info.render.calls,
-          triangles: o.info.render.triangles,
-          points: o.info.render.points,
-          lines: o.info.render.lines,
-          geometries: o.info.memory.geometries,
-          textures: o.info.memory.textures,
-          programs: ((T = o.info.programs) == null ? void 0 : T.length) || 0
+        M({ accumulated: _ });
+        const S = {
+          calls: f.info.render.calls,
+          triangles: f.info.render.triangles,
+          points: f.info.render.points,
+          lines: f.info.render.lines,
+          geometries: f.info.memory.geometries,
+          textures: f.info.memory.textures,
+          programs: ((C = f.info.programs) == null ? void 0 : C.length) || 0
         };
-        He("log", [_, C]);
+        Et("log", [E, S]);
       }
-    }), f = o.getContext();
-    let p = null, h = null;
-    const u = f.getExtension("WEBGL_debug_renderer_info"), w = f.getParameter(f.VERSION);
-    return u && (p = f.getParameter(u.UNMASKED_RENDERER_WEBGL), h = f.getParameter(u.UNMASKED_VENDOR_WEBGL)), h || (h = "Unknown vendor"), p || (p = f.getParameter(f.RENDERER)), M({
+    }), i = f.getContext();
+    let m = null, c = null;
+    const s = i.getExtension("WEBGL_debug_renderer_info"), y = i.getParameter(i.VERSION);
+    return s && (m = i.getParameter(s.UNMASKED_RENDERER_WEBGL), c = i.getParameter(s.UNMASKED_VENDOR_WEBGL)), c || (c = "Unknown vendor"), m || (m = i.getParameter(i.RENDERER)), M({
       startTime: window.performance.now(),
       infos: {
-        version: w,
-        renderer: p,
-        vendor: h
+        version: y,
+        renderer: m,
+        vendor: c
       }
-    }), d;
-  }, [r, t, e, o]);
-  return U(() => {
-    s && (s.overClock = r || !1, r === !1 && (M({ overclockingFps: !1 }), S.value = 0, S.isOverLimit = 0), s.chartHz = (t == null ? void 0 : t.hz) || 60, s.chartLen = (t == null ? void 0 : t.length) || 120);
-  }, [s, r, t == null ? void 0 : t.hz, t == null ? void 0 : t.length]), U(() => {
-    if (!o.info) return;
-    o.info.autoReset = !1, m && (E.Object3D.prototype.updateMatrixWorld = function(...p) {
-      return this.matrixWorldNeedsUpdate || p[0], ce.apply(this, p);
-    }, E.Object3D.prototype.updateWorldMatrix = function(...p) {
-      return le.apply(this, p);
-    }, E.Object3D.prototype.updateMatrix = function(...p) {
-      return ue.apply(this, p);
+    }), a;
+  }, [t, n, e, f]);
+  return P(() => {
+    r && (r.overClock = t || !1, t === !1 && (M({ overclockingFps: !1 }), R.value = 0, R.isOverLimit = 0), r.chartHz = (n == null ? void 0 : n.hz) || 60, r.chartLen = (n == null ? void 0 : n.length) || 120);
+  }, [r, t, n == null ? void 0 : n.hz, n == null ? void 0 : n.length]), P(() => {
+    if (!f.info) return;
+    f.info.autoReset = !1, d && (I.Object3D.prototype.updateMatrixWorld = function(...m) {
+      return this.matrixWorldNeedsUpdate || m[0], Le.apply(this, m);
+    }, I.Object3D.prototype.updateWorldMatrix = function(...m) {
+      return Ce.apply(this, m);
+    }, I.Object3D.prototype.updateMatrix = function(...m) {
+      return Oe.apply(this, m);
     });
-    const d = Ae(() => {
-      R().paused && M({ paused: !1 }), s == null || s.begin("profiler"), window.performance && (window.performance.mark("cpu-started"), s.startCpuProfiling = !0), o.info.reset();
-    }), f = Se(() => {
-      var w, g;
-      s == null || s.end("profiler"), s && !s.paused && (s.nextFrame(window.performance.now()), r && typeof window.requestIdleCallback < "u" && (s.idleCbId = requestIdleCallback(s.nextFps)));
-      const p = window.performance.now();
-      if (p - v > c) {
-        v = p;
-        const _ = qe(a), x = s.currentMem || 0;
+    const a = Qe(() => {
+      F().paused && M({ paused: !1 }), r == null || r.begin("profiler"), window.performance && (window.performance.mark("cpu-started"), r.startCpuProfiling = !0), f.info.reset();
+    }), i = Ye(() => {
+      var y, l;
+      r == null || r.end("profiler"), r && !r.paused && (r.nextFrame(window.performance.now()), t && typeof window.requestIdleCallback < "u" && (r.idleCbId = requestIdleCallback(r.nextFps)));
+      const m = window.performance.now();
+      if (m - g > u) {
+        g = m;
+        const E = bt(h), _ = r.currentMem || 0;
         M({
           estimatedMemory: {
-            vram: _.total / 1024 / 1024,
+            vram: E.total / 1024 / 1024,
             // Đổi ra MB
-            tex: _.texture / 1024 / 1024,
-            geo: _.geometry / 1024 / 1024,
-            ram: x
+            tex: E.texture / 1024 / 1024,
+            geo: E.geometry / 1024 / 1024,
+            ram: _
             // Đã là MB
           }
         });
       }
-      if (!i) return;
-      const h = {}, u = /* @__PURE__ */ new Map();
-      a.traverse((_) => {
-        if (_ instanceof E.Mesh || _ instanceof E.Points) {
-          if (!_.material) return;
-          let x = _.material.uuid;
-          const b = Array.isArray(_.material) && _.material.length > 1;
-          x = pe(b ? _.material[1] : _.material, h), h[x].meshes[_.uuid] = _;
+      if (!o) return;
+      const c = {}, s = /* @__PURE__ */ new Map();
+      h.traverse((E) => {
+        if (E instanceof I.Mesh || E instanceof I.Points) {
+          if (!E.material) return;
+          let _ = E.material.uuid;
+          const b = Array.isArray(E.material) && E.material.length > 1;
+          _ = Te(b ? E.material[1] : E.material, c), c[_].meshes[E.uuid] = E;
         }
-      }), (g = (w = o == null ? void 0 : o.info) == null ? void 0 : w.programs) == null || g.forEach((_) => {
-        const x = _.cacheKey.split(","), b = x[x.findIndex(ze) + 1];
-        if (je(b) && h[b]) {
-          const { material: C, meshes: T } = h[b];
-          u.set(b, {
-            program: _,
-            material: C,
-            meshes: T,
+      }), (l = (y = f == null ? void 0 : f.info) == null ? void 0 : y.programs) == null || l.forEach((E) => {
+        const _ = E.cacheKey.split(","), b = _[_.findIndex(St) + 1];
+        if (xt(b) && c[b]) {
+          const { material: S, meshes: C } = c[b];
+          s.set(b, {
+            program: E,
+            material: S,
+            meshes: C,
             drawCounts: { total: 0, type: "triangle", data: [] },
             expand: !1,
             visible: !0
           });
         }
-      }), u.size !== R().programs.size && (We(u), M({
-        programs: u,
-        triggerProgramsUpdate: R().triggerProgramsUpdate + 1
+      }), s.size !== F().programs.size && (ht(s), M({
+        programs: s,
+        triggerProgramsUpdate: F().triggerProgramsUpdate + 1
       }));
     });
     return () => {
-      var p;
-      s && typeof window.cancelIdleCallback < "u" && window.cancelIdleCallback(s.idleCbId), (p = s == null ? void 0 : s.dispose) == null || p.call(s), m && (E.Object3D.prototype.updateMatrixWorld = ce, E.Object3D.prototype.updateWorldMatrix = le, E.Object3D.prototype.updateMatrix = ue), d(), f();
+      var m;
+      r && typeof window.cancelIdleCallback < "u" && window.cancelIdleCallback(r.idleCbId), (m = r == null ? void 0 : r.dispose) == null || m.call(r), d && (I.Object3D.prototype.updateMatrixWorld = Le, I.Object3D.prototype.updateWorldMatrix = Ce, I.Object3D.prototype.updateMatrix = Oe), a(), i();
     };
-  }, [s, o, a, i, r, m]), U(() => {
-    const d = Ne(() => (s && (s.paused = !0, M({
+  }, [r, f, h, o, t, d]), P(() => {
+    const a = Xe(() => (r && (r.paused = !0, M({
       paused: !0,
       log: {
         maxMemory: 0,
@@ -519,67 +919,67 @@ const ce = E.Object3D.prototype.updateMatrixWorld, le = E.Object3D.prototype.upd
         frameCount: 0
       }
     })), !1));
-    return () => d();
-  }, [s]), null;
+    return () => a();
+  }, [r]), null;
 };
-function re(r, e, t = [], i) {
-  const m = I(e);
-  U(() => {
-    m.current = e;
-  }, [e]), U(() => {
-    const o = (c) => {
-      var v;
-      return (v = m.current) == null ? void 0 : v.call(m, c);
-    }, a = Oe(r, o);
-    return () => ke(r, o, {
-      ...i,
-      context: a
+function le(t, e, n = [], o) {
+  const d = T(e);
+  P(() => {
+    d.current = e;
+  }, [e]), P(() => {
+    const f = (u) => {
+      var g;
+      return (g = d.current) == null ? void 0 : g.call(d, u);
+    }, h = vt(t, f);
+    return () => _t(t, f, {
+      ...o,
+      context: h
     });
-  }, [r, i == null ? void 0 : i.once, ...t]);
+  }, [t, o == null ? void 0 : o.once, ...n]);
 }
-function $e(r) {
+function Lt(t) {
   let e = 0;
-  for (const i in r.attributes) {
-    const m = r.getAttribute(i);
-    e += m.count * m.itemSize * m.array.BYTES_PER_ELEMENT;
+  for (const o in t.attributes) {
+    const d = t.getAttribute(o);
+    e += d.count * d.itemSize * d.array.BYTES_PER_ELEMENT;
   }
-  const t = r.getIndex();
-  return e += t ? t.count * t.itemSize * t.array.BYTES_PER_ELEMENT : 0, e;
+  const n = t.getIndex();
+  return e += n ? n.count * n.itemSize * n.array.BYTES_PER_ELEMENT : 0, e;
 }
-const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_ans5i_21", Ke = "_topRight_ans5i_22", Je = "_bottomLeft_ans5i_23", Ze = "_bottomRight_ans5i_24", et = "_minimal_ans5i_26", tt = "_perfIContainer_ans5i_30", rt = "_perfI_ans5i_30", st = "_perfB_ans5i_69", nt = "_toggleContainer_ans5i_83", it = "_toggle_ans5i_83", at = "_activeTab_ans5i_105", ot = "_containerScroll_ans5i_110", ct = "_programGeo_ans5i_115", lt = "_programHeader_ans5i_120", ut = "_headerLeft_ans5i_149", mt = "_programTitle_ans5i_156", dt = "_toggleArrow_ans5i_166", pt = "_programConsole_ans5i_200", ft = "_programsContainer_ans5i_218", ht = "_headerRight_ans5i_222", gt = "_metricBadge_ans5i_228", yt = "_programsULHeader_ans5i_246", vt = "_programsUL_ans5i_246", xt = "_programsGeoLi_ans5i_309", wt = "_graph_ans5i_324", _t = "_visibilityBtn_ans5i_354", bt = "_active_ans5i_105", l = {
-  perfS: Qe,
-  containerHeight: Xe,
-  topLeft: Ye,
-  topRight: Ke,
-  bottomLeft: Je,
-  bottomRight: Ze,
-  minimal: et,
-  perfIContainer: tt,
-  perfI: rt,
-  perfB: st,
-  toggleContainer: nt,
-  toggle: it,
-  activeTab: at,
-  containerScroll: ot,
-  programGeo: ct,
-  programHeader: lt,
-  headerLeft: ut,
-  programTitle: mt,
-  toggleArrow: dt,
-  programConsole: pt,
-  programsContainer: ft,
-  headerRight: ht,
-  metricBadge: gt,
-  programsULHeader: yt,
-  programsUL: vt,
-  programsGeoLi: xt,
-  graph: wt,
-  visibilityBtn: _t,
-  active: bt
-}, fe = (r, e) => {
-  var m, o;
-  const t = (a) => {
-    switch (a) {
+const Ct = "_perfS_ans5i_1", Ot = "_containerHeight_ans5i_16", It = "_topLeft_ans5i_21", Mt = "_topRight_ans5i_22", Tt = "_bottomLeft_ans5i_23", At = "_bottomRight_ans5i_24", Rt = "_minimal_ans5i_26", Nt = "_perfIContainer_ans5i_30", Ft = "_perfI_ans5i_30", Pt = "_perfB_ans5i_69", Ut = "_toggleContainer_ans5i_83", Dt = "_toggle_ans5i_83", Gt = "_activeTab_ans5i_105", Wt = "_containerScroll_ans5i_110", Bt = "_programGeo_ans5i_115", jt = "_programHeader_ans5i_120", Vt = "_headerLeft_ans5i_149", Ht = "_programTitle_ans5i_156", kt = "_toggleArrow_ans5i_166", qt = "_programConsole_ans5i_200", zt = "_programsContainer_ans5i_218", $t = "_headerRight_ans5i_222", Kt = "_metricBadge_ans5i_228", Qt = "_programsULHeader_ans5i_246", Yt = "_programsUL_ans5i_246", Xt = "_programsGeoLi_ans5i_309", Jt = "_graph_ans5i_324", Zt = "_visibilityBtn_ans5i_354", er = "_active_ans5i_105", v = {
+  perfS: Ct,
+  containerHeight: Ot,
+  topLeft: It,
+  topRight: Mt,
+  bottomLeft: Tt,
+  bottomRight: At,
+  minimal: Rt,
+  perfIContainer: Nt,
+  perfI: Ft,
+  perfB: Pt,
+  toggleContainer: Ut,
+  toggle: Dt,
+  activeTab: Gt,
+  containerScroll: Wt,
+  programGeo: Bt,
+  programHeader: jt,
+  headerLeft: Vt,
+  programTitle: Ht,
+  toggleArrow: kt,
+  programConsole: qt,
+  programsContainer: zt,
+  headerRight: $t,
+  metricBadge: Kt,
+  programsULHeader: Qt,
+  programsUL: Yt,
+  programsGeoLi: Xt,
+  graph: Jt,
+  visibilityBtn: Zt,
+  active: er
+}, Ae = (t, e) => {
+  var d, f;
+  const n = (h) => {
+    switch (h) {
       case 1e3:
         return "RepeatWrapping";
       case 1001:
@@ -589,8 +989,8 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
       default:
         return "ClampToEdgeWrapping";
     }
-  }, i = (a) => {
-    switch (a) {
+  }, o = (h) => {
+    switch (h) {
       case 3e3:
         return "LinearEncoding";
       case 3001:
@@ -612,30 +1012,30 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
     }
   };
   return {
-    name: r,
-    url: (m = e == null ? void 0 : e.image) == null ? void 0 : m.currentSrc,
-    encoding: i(e.encoding),
-    wrapT: t(e.wrapT),
-    flipY: (o = e.flipY) == null ? void 0 : o.toString()
+    name: t,
+    url: (d = e == null ? void 0 : e.image) == null ? void 0 : d.currentSrc,
+    encoding: o(e.encoding),
+    wrapT: n(e.wrapT),
+    flipY: (f = e.flipY) == null ? void 0 : f.toString()
   };
-}, Z = ({
-  value: r,
+}, ie = ({
+  value: t,
   label: e,
-  unit: t,
-  title: i
-}) => r == null || r === 0 || r === "0" ? null : /* @__PURE__ */ y("div", { className: l.metricBadge, title: i, children: [
-  /* @__PURE__ */ n("b", { children: r }),
+  unit: n,
+  title: o
+}) => t == null || t === 0 || t === "0" ? null : /* @__PURE__ */ x("div", { className: v.metricBadge, title: o, children: [
+  /* @__PURE__ */ p("b", { children: t }),
   " ",
-  t || e
-] }), Ct = ({ program: r, material: e, setTexNumber: t }) => {
-  const i = L((a) => a.gl), [m, o] = O(null);
-  return U(() => {
-    if (i) {
-      const a = r == null ? void 0 : r.getUniforms();
-      let c = 0;
-      const v = /* @__PURE__ */ new Map();
-      a && a.seq && a.seq.forEach((s) => {
-        if (!s.id.includes("uTroika") && ![
+  n || e
+] }), tr = ({ program: t, material: e, setTexNumber: n }) => {
+  const o = A((h) => h.gl), [d, f] = B(null);
+  return P(() => {
+    if (o) {
+      const h = t == null ? void 0 : t.getUniforms();
+      let u = 0;
+      const g = /* @__PURE__ */ new Map();
+      h && h.seq && h.seq.forEach((r) => {
+        if (!r.id.includes("uTroika") && ![
           "isOrthographic",
           "uvTransform",
           "lightProbe",
@@ -644,136 +1044,136 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
           "normalMatrix",
           "modelMatrix",
           "modelViewMatrix"
-        ].includes(s.id)) {
-          const d = [], f = { name: s.id };
-          s.cache && (s.cache.forEach((p) => {
-            typeof p < "u" && d.push(p.toString().substring(0, 4));
-          }), f.value = d.join(), e[s.id] && e[s.id].image && (c++, f.value = fe(s.id, e[s.id])), f.value || (f.value = "empty"), v.set(s.id, f));
+        ].includes(r.id)) {
+          const a = [], i = { name: r.id };
+          r.cache && (r.cache.forEach((m) => {
+            typeof m < "u" && a.push(m.toString().substring(0, 4));
+          }), i.value = a.join(), e[r.id] && e[r.id].image && (u++, i.value = Ae(r.id, e[r.id])), i.value || (i.value = "empty"), g.set(r.id, i));
         }
-      }), e.uniforms && Object.keys(e.uniforms).forEach((s) => {
-        const d = e.uniforms[s];
-        if (d.value) {
-          const { value: f } = d, p = { name: s };
-          if (s.includes("uTroika")) return;
-          if (f.isTexture)
-            c++, p.value = fe(s, f);
+      }), e.uniforms && Object.keys(e.uniforms).forEach((r) => {
+        const a = e.uniforms[r];
+        if (a.value) {
+          const { value: i } = a, m = { name: r };
+          if (r.includes("uTroika")) return;
+          if (i.isTexture)
+            u++, m.value = Ae(r, i);
           else {
-            let h = JSON.stringify(f);
+            let c = JSON.stringify(i);
             try {
-              h = JSON.stringify(f);
+              c = JSON.stringify(i);
             } catch {
-              h = f.toString();
+              c = i.toString();
             }
-            p.value = h;
+            m.value = c;
           }
-          v.set(s, p);
+          g.set(r, m);
         }
-      }), t(c), o(v);
+      }), n(u), f(g);
     }
-  }, [i, e, r, t]), /* @__PURE__ */ n("ul", { className: l.programsUL, children: m && Array.from(m.values()).map((a) => /* @__PURE__ */ n("span", { children: typeof a.value == "string" ? /* @__PURE__ */ n("li", { children: /* @__PURE__ */ y("span", { children: [
-    a.name,
+  }, [o, e, t, n]), /* @__PURE__ */ p("ul", { className: v.programsUL, children: d && Array.from(d.values()).map((h) => /* @__PURE__ */ p("span", { children: typeof h.value == "string" ? /* @__PURE__ */ p("li", { children: /* @__PURE__ */ x("span", { children: [
+    h.name,
     " :",
     " ",
-    /* @__PURE__ */ y("b", { children: [
-      a.value.substring(0, 30),
-      a.value.length > 30 ? "..." : ""
+    /* @__PURE__ */ x("b", { children: [
+      h.value.substring(0, 30),
+      h.value.length > 30 ? "..." : ""
     ] })
-  ] }) }) : /* @__PURE__ */ y(z, { children: [
-    /* @__PURE__ */ n("li", { children: /* @__PURE__ */ y("b", { children: [
-      a.value.name,
+  ] }) }) : /* @__PURE__ */ x(q, { children: [
+    /* @__PURE__ */ p("li", { children: /* @__PURE__ */ x("b", { children: [
+      h.value.name,
       ":"
     ] }) }),
-    /* @__PURE__ */ y("div", { children: [
-      Object.keys(a.value).map(
-        (c) => c !== "name" ? /* @__PURE__ */ n("div", { children: c === "url" ? /* @__PURE__ */ n(
+    /* @__PURE__ */ x("div", { children: [
+      Object.keys(h.value).map(
+        (u) => u !== "name" ? /* @__PURE__ */ p("div", { children: u === "url" ? /* @__PURE__ */ p(
           "a",
           {
-            href: a.value[c],
+            href: h.value[u],
             target: "_blank",
             rel: "noreferrer",
-            children: /* @__PURE__ */ n("img", { src: a.value[c], alt: "texture" })
+            children: /* @__PURE__ */ p("img", { src: h.value[u], alt: "texture" })
           }
-        ) : /* @__PURE__ */ y("li", { children: [
-          c,
+        ) : /* @__PURE__ */ x("li", { children: [
+          u,
           ": ",
-          /* @__PURE__ */ n("b", { children: a.value[c] })
-        ] }) }, c) : null
+          /* @__PURE__ */ p("b", { children: h.value[u] })
+        ] }) }, u) : null
       ),
-      /* @__PURE__ */ y(
+      /* @__PURE__ */ x(
         "button",
         {
-          className: l.programConsole,
+          className: v.programConsole,
           onClick: () => {
-            var c;
+            var u;
             console.info(
-              e[a.value.name] || ((c = e == null ? void 0 : e.uniforms[a.value.name]) == null ? void 0 : c.value)
+              e[h.value.name] || ((u = e == null ? void 0 : e.uniforms[h.value.name]) == null ? void 0 : u.value)
             );
           },
           children: [
             "console.info(",
-            a.value.name,
+            h.value.name,
             ");"
           ]
         }
       )
     ] })
-  ] }) }, a.name)) });
-}, Et = ({ el: r }) => {
-  const [e, t] = O(r.visible), [i, m] = O(r.expand), [o, a] = O(0), { meshes: c, program: v, material: s } = r, d = L((u) => u.gl), f = () => {
-    if (!d || !d.info || !d.info.render) return 0;
-    const u = d.info.render.triangles + d.info.render.lines + d.info.render.points;
-    if (u === 0) return 0;
-    const w = Math.round(r.drawCounts.total / u * 100 * 10) / 10;
-    return isFinite(w) && w || 0;
-  }, p = Object.keys(c).length, h = f();
-  return /* @__PURE__ */ y("div", { className: l.programGeo, children: [
-    /* @__PURE__ */ y(
+  ] }) }, h.name)) });
+}, rr = ({ el: t }) => {
+  const [e, n] = B(t.visible), [o, d] = B(t.expand), [f, h] = B(0), { meshes: u, program: g, material: r } = t, a = A((s) => s.gl), i = () => {
+    if (!a || !a.info || !a.info.render) return 0;
+    const s = a.info.render.triangles + a.info.render.lines + a.info.render.points;
+    if (s === 0) return 0;
+    const y = Math.round(t.drawCounts.total / s * 100 * 10) / 10;
+    return isFinite(y) && y || 0;
+  }, m = Object.keys(u).length, c = i();
+  return /* @__PURE__ */ x("div", { className: v.programGeo, children: [
+    /* @__PURE__ */ x(
       "div",
       {
-        className: l.programHeader,
+        className: v.programHeader,
         onClick: () => {
-          Object.keys(c).forEach((u) => {
-            c[u].material.wireframe = !1;
-          }), m(!i);
+          Object.keys(u).forEach((s) => {
+            u[s].material.wireframe = !1;
+          }), d(!o);
         },
         children: [
-          /* @__PURE__ */ y("div", { className: l.headerLeft, children: [
-            /* @__PURE__ */ n(
+          /* @__PURE__ */ x("div", { className: v.headerLeft, children: [
+            /* @__PURE__ */ p(
               "div",
               {
-                className: l.toggleArrow,
+                className: v.toggleArrow,
                 style: {
-                  transform: i ? "rotate(90deg)" : "rotate(0deg)"
+                  transform: o ? "rotate(90deg)" : "rotate(0deg)"
                 },
                 children: "▶"
               }
             ),
-            v && /* @__PURE__ */ n("span", { className: l.programTitle, children: v.name })
+            g && /* @__PURE__ */ p("span", { className: v.programTitle, children: g.name })
           ] }),
-          /* @__PURE__ */ y("div", { className: l.headerRight, children: [
-            /* @__PURE__ */ n(
-              Z,
+          /* @__PURE__ */ x("div", { className: v.headerRight, children: [
+            /* @__PURE__ */ p(
+              ie,
               {
-                value: p,
-                unit: p > 1 ? "users" : "user"
+                value: m,
+                unit: m > 1 ? "users" : "user"
               }
             ),
-            /* @__PURE__ */ n(Z, { value: o, unit: "tex" }),
-            r.drawCounts.total > 0 && /* @__PURE__ */ y(
+            /* @__PURE__ */ p(ie, { value: f, unit: "tex" }),
+            t.drawCounts.total > 0 && /* @__PURE__ */ x(
               "div",
               {
-                className: l.metricBadge,
-                title: `${h}% of total render`,
+                className: v.metricBadge,
+                title: `${c}% of total render`,
                 children: [
-                  /* @__PURE__ */ n("b", { children: r.drawCounts.total }),
-                  r.drawCounts.type === "Triangle" ? "tris" : r.drawCounts.type,
-                  r.visible && !r.material.wireframe && /* @__PURE__ */ y(
+                  /* @__PURE__ */ p("b", { children: t.drawCounts.total }),
+                  t.drawCounts.type === "Triangle" ? "tris" : t.drawCounts.type,
+                  t.visible && !t.material.wireframe && /* @__PURE__ */ x(
                     "span",
                     {
                       style: { marginLeft: "4px", opacity: 0.6, fontSize: "9px" },
                       children: [
                         "(",
-                        h,
+                        c,
                         "%)"
                       ]
                     }
@@ -781,27 +1181,27 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
                 ]
               }
             ),
-            s.glslVersion === "300 es" && /* @__PURE__ */ n(Z, { value: "300", unit: "es" }),
-            /* @__PURE__ */ n(
+            r.glslVersion === "300 es" && /* @__PURE__ */ p(ie, { value: "300", unit: "es" }),
+            /* @__PURE__ */ p(
               "div",
               {
-                className: `${l.visibilityBtn} ${e ? l.active : ""}`,
+                className: `${v.visibilityBtn} ${e ? v.active : ""}`,
                 onPointerEnter: () => {
-                  Object.keys(c).forEach(
-                    (u) => c[u].material.wireframe = !0
+                  Object.keys(u).forEach(
+                    (s) => u[s].material.wireframe = !0
                   );
                 },
                 onPointerLeave: () => {
-                  Object.keys(c).forEach(
-                    (u) => c[u].material.wireframe = !1
+                  Object.keys(u).forEach(
+                    (s) => u[s].material.wireframe = !1
                   );
                 },
-                onClick: (u) => {
-                  u.stopPropagation();
-                  const w = !e;
-                  Object.keys(c).forEach((g) => {
-                    c[g] && (c[g].visible = w);
-                  }), t(w);
+                onClick: (s) => {
+                  s.stopPropagation();
+                  const y = !e;
+                  Object.keys(u).forEach((l) => {
+                    u[l] && (u[l].visible = y);
+                  }), n(y);
                 },
                 children: e ? "👁" : "×"
               }
@@ -810,19 +1210,19 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
         ]
       }
     ),
-    /* @__PURE__ */ y("div", { style: { display: i ? "block" : "none" }, children: [
-      /* @__PURE__ */ n("div", { className: l.programsULHeader, style: { marginTop: "4px" }, children: "Uniforms" }),
-      /* @__PURE__ */ n(
-        Ct,
+    /* @__PURE__ */ x("div", { style: { display: o ? "block" : "none" }, children: [
+      /* @__PURE__ */ p("div", { className: v.programsULHeader, style: { marginTop: "4px" }, children: "Uniforms" }),
+      /* @__PURE__ */ p(
+        tr,
         {
-          program: v,
-          material: s,
-          setTexNumber: a
+          program: g,
+          material: r,
+          setTexNumber: h
         }
       ),
-      /* @__PURE__ */ n("div", { className: l.programsULHeader, children: "Geometries" }),
-      /* @__PURE__ */ n("ul", { className: l.programsUL, children: c && Object.keys(c).map(
-        (u) => c[u] && c[u].geometry && /* @__PURE__ */ n("li", { className: l.programsGeoLi, children: /* @__PURE__ */ y(
+      /* @__PURE__ */ p("div", { className: v.programsULHeader, children: "Geometries" }),
+      /* @__PURE__ */ p("ul", { className: v.programsUL, children: u && Object.keys(u).map(
+        (s) => u[s] && u[s].geometry && /* @__PURE__ */ p("li", { className: v.programsGeoLi, children: /* @__PURE__ */ x(
           "div",
           {
             style: {
@@ -832,8 +1232,8 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ n("span", { children: c[u].geometry.type }),
-              c[u].userData && c[u].userData.drawCount && /* @__PURE__ */ y(
+              /* @__PURE__ */ p("span", { children: u[s].geometry.type }),
+              u[s].userData && u[s].userData.drawCount && /* @__PURE__ */ x(
                 "span",
                 {
                   style: {
@@ -843,16 +1243,16 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
                     gap: "6px"
                   },
                   children: [
-                    /* @__PURE__ */ y("span", { children: [
-                      /* @__PURE__ */ n("b", { children: c[u].userData.drawCount.count }),
+                    /* @__PURE__ */ x("span", { children: [
+                      /* @__PURE__ */ p("b", { children: u[s].userData.drawCount.count }),
                       " ",
-                      c[u].userData.drawCount.type,
+                      u[s].userData.drawCount.type,
                       "s"
                     ] }),
-                    /* @__PURE__ */ n("span", { style: { opacity: 0.3 }, children: "|" }),
-                    /* @__PURE__ */ y("span", { children: [
-                      /* @__PURE__ */ n("b", { children: Math.round(
-                        $e(c[u].geometry) / 1024 * 100
+                    /* @__PURE__ */ p("span", { style: { opacity: 0.3 }, children: "|" }),
+                    /* @__PURE__ */ x("span", { children: [
+                      /* @__PURE__ */ p("b", { children: Math.round(
+                        Lt(u[s].geometry) / 1024 * 100
                       ) / 100 }),
                       " ",
                       "KB"
@@ -862,85 +1262,85 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
               )
             ]
           }
-        ) }, u)
+        ) }, s)
       ) }),
-      /* @__PURE__ */ y(
+      /* @__PURE__ */ x(
         "button",
         {
-          className: l.programConsole,
-          onClick: () => console.info(s),
+          className: v.programConsole,
+          onClick: () => console.info(r),
           children: [
             "Log Material (",
-            s.type,
+            r.type,
             ")"
           ]
         }
       )
     ] })
   ] });
-}, Mt = () => {
-  L((e) => e.triggerProgramsUpdate);
-  const r = L((e) => e.programs);
-  return /* @__PURE__ */ n(
+}, nr = () => {
+  A((e) => e.triggerProgramsUpdate);
+  const t = A((e) => e.programs);
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: l.programsContainer,
+      className: v.programsContainer,
       onWheel: (e) => e.stopPropagation(),
-      children: r && Array.from(r.values()).map((e) => e ? /* @__PURE__ */ n(Et, { el: e }, e.material.uuid) : null)
+      children: t && Array.from(t.values()).map((e) => e ? /* @__PURE__ */ p(rr, { el: e }, e.material.uuid) : null)
     }
   );
-}, It = ({
-  minimal: r,
+}, sr = ({
+  minimal: t,
   chart: e = { length: 120, hz: 60 }
 }) => {
-  const t = Y(() => ({
+  const n = J(() => ({
     fps: new Float32Array(e.length * 3),
     cpu: new Float32Array(e.length * 3),
     gpu: new Float32Array(e.length * 3)
-  }), [e]), i = I(null), m = I(null), o = I(null), a = I(null), c = Y(() => new E.Vector3(0, 0, 0), []), v = (s, d = 1, f, p) => {
-    let h = 0;
-    const { width: u, height: w } = p, g = R().chart.data[s];
-    if (!g || g.length === 0)
+  }), [e]), o = T(null), d = T(null), f = T(null), h = T(null), u = J(() => new I.Vector3(0, 0, 0), []), g = (r, a = 1, i, m) => {
+    let c = 0;
+    const { width: s, height: y } = m, l = F().chart.data[r];
+    if (!l || l.length === 0)
       return;
-    const _ = r ? 2 : 6, x = r ? 12 : 50, b = g.length;
-    for (let C = 0; C < b; C++) {
-      const T = (R().chart.circularId + C + 1) % b;
-      g[T] !== void 0 && (g[T] > h && (h = g[T] * d), c.set(
-        _ + C / (b - 1) * (u - _ * 2) - u / 2,
-        Math.min(100, g[T]) * d / 100 * (w - _ * 2 - x) - w / 2,
+    const E = t ? 2 : 6, _ = t ? 12 : 50, b = l.length;
+    for (let S = 0; S < b; S++) {
+      const C = (F().chart.circularId + S + 1) % b;
+      l[C] !== void 0 && (l[C] > c && (c = l[C] * a), u.set(
+        E + S / (b - 1) * (s - E * 2) - s / 2,
+        Math.min(100, l[C]) * a / 100 * (y - E * 2 - _) - y / 2,
         0
-      ), c.toArray(f.attributes.position.array, C * 3));
+      ), u.toArray(i.attributes.position.array, S * 3));
     }
-    f.attributes.position.needsUpdate = !0;
+    i.attributes.position.needsUpdate = !0;
   };
-  return _e(function({ viewport: d }) {
-    v("fps", 1, i.current, d), m.current && m.current.color.set(
-      R().overclockingFps ? N.overClock : N.fps
-    ), v("gpu", 5, o.current, d), v("cpu", 5, a.current, d);
-  }), /* @__PURE__ */ y(z, { children: [
-    /* @__PURE__ */ y(
+  return Ge(function({ viewport: a }) {
+    g("fps", 1, o.current, a), d.current && d.current.color.set(
+      F().overclockingFps ? N.overClock : N.fps
+    ), g("gpu", 5, f.current, a), g("cpu", 5, h.current, a);
+  }), /* @__PURE__ */ x(q, { children: [
+    /* @__PURE__ */ x(
       "line",
       {
-        onUpdate: (s) => {
-          s.updateMatrix(), s.matrixWorld.copy(s.matrix);
+        onUpdate: (r) => {
+          r.updateMatrix(), r.matrixWorld.copy(r.matrix);
         },
         children: [
-          /* @__PURE__ */ n("bufferGeometry", { ref: i, children: /* @__PURE__ */ n(
+          /* @__PURE__ */ p("bufferGeometry", { ref: o, children: /* @__PURE__ */ p(
             "bufferAttribute",
             {
               attach: "attributes-position",
               count: e.length,
-              args: [t.fps, 3],
-              array: t.fps,
+              args: [n.fps, 3],
+              array: n.fps,
               itemSize: 3,
-              usage: E.DynamicDrawUsage,
+              usage: I.DynamicDrawUsage,
               needsUpdate: !0
             }
           ) }),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ p(
             "lineBasicMaterial",
             {
-              ref: m,
+              ref: d,
               color: N.fps,
               transparent: !0,
               opacity: 0.5
@@ -949,87 +1349,87 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
         ]
       }
     ),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ x(
       "line",
       {
-        onUpdate: (s) => {
-          s.updateMatrix(), s.matrixWorld.copy(s.matrix);
+        onUpdate: (r) => {
+          r.updateMatrix(), r.matrixWorld.copy(r.matrix);
         },
         children: [
-          /* @__PURE__ */ n("bufferGeometry", { ref: o, children: /* @__PURE__ */ n(
+          /* @__PURE__ */ p("bufferGeometry", { ref: f, children: /* @__PURE__ */ p(
             "bufferAttribute",
             {
               attach: "attributes-position",
               count: e.length,
-              array: t.gpu,
-              args: [t.gpu, 3],
+              array: n.gpu,
+              args: [n.gpu, 3],
               itemSize: 3,
-              usage: E.DynamicDrawUsage,
+              usage: I.DynamicDrawUsage,
               needsUpdate: !0
             }
           ) }),
-          /* @__PURE__ */ n("lineBasicMaterial", { color: N.gpu, transparent: !0, opacity: 0.5 })
+          /* @__PURE__ */ p("lineBasicMaterial", { color: N.gpu, transparent: !0, opacity: 0.5 })
         ]
       }
     ),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ x(
       "line",
       {
-        onUpdate: (s) => {
-          s.updateMatrix(), s.matrixWorld.copy(s.matrix);
+        onUpdate: (r) => {
+          r.updateMatrix(), r.matrixWorld.copy(r.matrix);
         },
         children: [
-          /* @__PURE__ */ n("bufferGeometry", { ref: a, children: /* @__PURE__ */ n(
+          /* @__PURE__ */ p("bufferGeometry", { ref: h, children: /* @__PURE__ */ p(
             "bufferAttribute",
             {
               attach: "attributes-position",
               count: e.length,
-              array: t.cpu,
-              args: [t.cpu, 3],
+              array: n.cpu,
+              args: [n.cpu, 3],
               itemSize: 3,
-              usage: E.DynamicDrawUsage,
+              usage: I.DynamicDrawUsage,
               needsUpdate: !0
             }
           ) }),
-          /* @__PURE__ */ n("lineBasicMaterial", { color: N.cpu, transparent: !0, opacity: 0.5 })
+          /* @__PURE__ */ p("lineBasicMaterial", { color: N.cpu, transparent: !0, opacity: 0.5 })
         ]
       }
     )
   ] });
-}, Lt = ({
-  chart: r,
+}, ir = ({
+  chart: t,
   showGraph: e = !0,
-  antialias: t = !0,
-  minimal: i
+  antialias: n = !0,
+  minimal: o
 }) => {
-  const m = I(void 0), o = L((a) => a.paused);
-  return /* @__PURE__ */ n(
+  const d = T(void 0), f = A((h) => h.paused);
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: l.graph,
+      className: v.graph,
       style: {
         display: "flex",
         marginTop: 6,
         position: "absolute",
         width: "100%",
-        height: `${i ? 37 : e ? 100 : 60}px`
+        height: `${o ? 37 : e ? 100 : 60}px`
       },
-      children: /* @__PURE__ */ n(
-        Re,
+      children: /* @__PURE__ */ p(
+        Je,
         {
-          ref: m,
+          ref: d,
           orthographic: !0,
           camera: { rotation: [0, 0, 0] },
-          dpr: t ? [1, 2] : 1,
+          dpr: n ? [1, 2] : 1,
           gl: {
             antialias: !0,
             alpha: !0,
             stencil: !1,
             depth: !1
           },
-          onCreated: ({ scene: a }) => {
-            a.traverse((c) => {
-              c.matrixWorldAutoUpdate = !1, c.matrixAutoUpdate = !1;
+          onCreated: ({ scene: h }) => {
+            h.traverse((u) => {
+              u.matrixWorldAutoUpdate = !1, u.matrixAutoUpdate = !1;
             });
           },
           flat: !0,
@@ -1039,116 +1439,116 @@ const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_an
             pointerEvents: "none",
             background: "transparent !important",
             width: "100%",
-            height: `${i ? 37 : e ? 100 : 60}px`
+            height: `${o ? 37 : e ? 100 : 60}px`
           },
-          children: o ? null : /* @__PURE__ */ y(z, { children: [
-            /* @__PURE__ */ n(Tt, {}),
-            e && /* @__PURE__ */ n(It, { minimal: i, chart: r })
+          children: f ? null : /* @__PURE__ */ x(q, { children: [
+            /* @__PURE__ */ p(ar, {}),
+            e && /* @__PURE__ */ p(sr, { minimal: o, chart: t })
           ] })
         }
       )
     }
   );
-}, Tt = () => (_e(function({ gl: e, scene: t, camera: i }) {
-  i.updateMatrix(), i.matrixWorld.copy(i.matrix), i.matrixWorldInverse.copy(i.matrixWorld).invert(), e.render(t, i);
-}, 1 / 0), null), he = {
+}, ar = () => (Ge(function({ gl: e, scene: n, camera: o }) {
+  o.updateMatrix(), o.matrixWorld.copy(o.matrix), o.matrixWorldInverse.copy(o.matrixWorld).invert(), e.render(n, o);
+}, 1 / 0), null), Re = {
   fps: { fg: "#00ffff", bg: "#000022" },
   // Chỉnh màu nền đậm hơn chút
   cpu: { fg: "#00ff00", bg: "#002200" },
   gpu: { fg: "#ff0080", bg: "#220011" }
-}, D = [
+}, G = [
   { key: "fps", label: "FPS", maxVal: 120 },
   { key: "cpu", label: "CPU", maxVal: 40 },
   { key: "gpu", label: "GPU", maxVal: 40 }
-], W = 48, Ce = 15, Q = 2, j = Ce, q = W - j - 2, X = 6, At = 15, ge = 1e3 / At;
-function St({
-  show: r = !0,
+], W = 48, He = 15, Y = 2, k = He, H = W - k - 2, X = 6, or = 15, Ne = 1e3 / or;
+function cr({
+  show: t = !0,
   opacity: e = 1,
   // Tăng opacity lên 1 để bớt trong suốt
-  className: t,
-  style: i
+  className: n,
+  style: o
 }) {
-  const m = L((h) => h.paused), o = I(null), a = I(null), [c, v] = O(300), s = Y(
+  const d = A((c) => c.paused), f = T(null), h = T(null), [u, g] = B(300), r = J(
     () => Math.max(1, Math.round(window.devicePixelRatio || 1)),
     []
   );
-  U(() => {
-    if (!a.current) return;
-    const h = new ResizeObserver((u) => {
-      for (const w of u)
-        v(w.contentRect.width);
+  P(() => {
+    if (!h.current) return;
+    const c = new ResizeObserver((s) => {
+      for (const y of s)
+        g(y.contentRect.width);
     });
-    return h.observe(a.current), () => h.disconnect();
+    return c.observe(h.current), () => c.disconnect();
   }, []);
-  const d = (D.length - 1) * X, f = Math.max(0, (c - d) / D.length), p = Math.max(0, f - Q);
-  return U(() => {
-    const h = o.current;
-    if (!h) return;
-    h.width = c * s, h.height = W * s, h.style.width = "100%", h.style.height = `${W}px`;
-    const u = h.getContext("2d");
-    if (u) {
-      u.setTransform(1, 0, 0, 1, 0, 0), u.scale(s, s), u.imageSmoothingEnabled = !1, u.font = "bold 9px Roboto Mono, monospace", u.textBaseline = "top", u.clearRect(0, 0, c, W);
-      for (let w = 0; w < D.length; w++) {
-        const { key: g } = D[w], _ = w * (f + X), { bg: x } = he[g];
-        u.fillStyle = x, u.globalAlpha = e, u.fillRect(_, 0, f, W), u.globalAlpha = 1;
+  const a = (G.length - 1) * X, i = Math.max(0, (u - a) / G.length), m = Math.max(0, i - Y);
+  return P(() => {
+    const c = f.current;
+    if (!c) return;
+    c.width = u * r, c.height = W * r, c.style.width = "100%", c.style.height = `${W}px`;
+    const s = c.getContext("2d");
+    if (s) {
+      s.setTransform(1, 0, 0, 1, 0, 0), s.scale(r, r), s.imageSmoothingEnabled = !1, s.font = "bold 9px Roboto Mono, monospace", s.textBaseline = "top", s.clearRect(0, 0, u, W);
+      for (let y = 0; y < G.length; y++) {
+        const { key: l } = G[y], E = y * (i + X), { bg: _ } = Re[l];
+        s.fillStyle = _, s.globalAlpha = e, s.fillRect(E, 0, i, W), s.globalAlpha = 1;
       }
     }
-  }, [s, c, f, e]), U(() => {
-    if (!r) return;
-    const h = o.current;
-    if (!h) return;
-    const u = h.getContext("2d");
-    if (!u) return;
-    let w = 0, g = 0;
-    const _ = {
+  }, [r, u, i, e]), P(() => {
+    if (!t) return;
+    const c = f.current;
+    if (!c) return;
+    const s = c.getContext("2d");
+    if (!s) return;
+    let y = 0, l = 0;
+    const E = {
       fps: { min: 1 / 0, max: 0 },
       cpu: { min: 1 / 0, max: 0 },
       gpu: { min: 1 / 0, max: 0 }
     };
-    function x(b) {
-      if (!h || !u || (w = requestAnimationFrame(x), m)) return;
-      const C = b - g;
-      if (C < ge) return;
-      g = b - C % ge;
-      const T = R(), F = T.chart.circularId;
-      for (let A = 0; A < D.length; A++) {
-        const { key: P, label: Ee, maxVal: se } = D[A], k = A * (f + X), { fg: ne, bg: ie } = he[P], V = T.chart.data[P], K = (V == null ? void 0 : V.length) || 0;
-        let $ = 0;
-        if (K > 0) {
-          const Le = (F - 1 + K) % K;
-          $ = V[Le] ?? 0;
+    function _(b) {
+      if (!c || !s || (y = requestAnimationFrame(_), d)) return;
+      const S = b - l;
+      if (S < Ne) return;
+      l = b - S % Ne;
+      const C = F(), w = C.chart.circularId;
+      for (let L = 0; L < G.length; L++) {
+        const { key: O, label: ke, maxVal: ue } = G[L], j = L * (i + X), { fg: fe, bg: me } = Re[O], $ = C.chart.data[O], Z = ($ == null ? void 0 : $.length) || 0;
+        let K = 0;
+        if (Z > 0) {
+          const $e = (w - 1 + Z) % Z;
+          K = $[$e] ?? 0;
         }
-        const B = _[P];
-        B.min = Math.min(B.min, $), B.max = Math.max(B.max, $), u.fillStyle = ie, u.globalAlpha = 1, u.fillRect(k, 0, f, Ce), u.fillStyle = ne;
-        const Me = `${Ee} (${Math.round(B.min)}-${Math.round(B.max)})`;
-        u.fillText(Me, k + 3, 2), p > 1 && u.drawImage(
-          h,
-          (k + Q + 1) * s,
-          j * s,
-          (p - 1) * s,
-          q * s,
-          k + Q,
-          j,
-          p - 1,
-          q
+        const D = E[O];
+        D.min = Math.min(D.min, K), D.max = Math.max(D.max, K), s.fillStyle = me, s.globalAlpha = 1, s.fillRect(j, 0, i, He), s.fillStyle = fe;
+        const qe = `${ke} (${Math.round(D.min)}-${Math.round(D.max)})`;
+        s.fillText(qe, j + 3, 2), m > 1 && s.drawImage(
+          c,
+          (j + Y + 1) * r,
+          k * r,
+          (m - 1) * r,
+          H * r,
+          j + Y,
+          k,
+          m - 1,
+          H
         );
-        const ae = k + Q + p - 1;
-        u.fillStyle = ie, u.globalAlpha = 1, u.fillRect(ae, j, 1, q), u.fillStyle = ne, u.globalAlpha = 1;
-        const Ie = Math.min($, se) / se, J = Math.round(Ie * q);
-        J > 0 && u.fillRect(ae, j + q - J, 1, J);
+        const de = j + Y + m - 1;
+        s.fillStyle = me, s.globalAlpha = 1, s.fillRect(de, k, 1, H), s.fillStyle = fe, s.globalAlpha = 1;
+        const ze = Math.min(K, ue) / ue, ee = Math.round(ze * H);
+        ee > 0 && s.fillRect(de, k + H - ee, 1, ee);
       }
     }
-    return w = requestAnimationFrame(x), () => cancelAnimationFrame(w);
-  }, [m, r, s, f, p]), r ? /* @__PURE__ */ n(
+    return y = requestAnimationFrame(_), () => cancelAnimationFrame(y);
+  }, [d, t, r, i, m]), t ? /* @__PURE__ */ p(
     "div",
     {
-      ref: a,
-      className: t,
-      style: { width: "100%", ...i, marginTop: X },
-      children: /* @__PURE__ */ n(
+      ref: h,
+      className: n,
+      style: { width: "100%", ...o, marginTop: X },
+      children: /* @__PURE__ */ p(
         "canvas",
         {
-          ref: o,
+          ref: f,
           style: {
             display: "block",
             pointerEvents: "none",
@@ -1172,208 +1572,208 @@ const N = {
   // 255,208,0
   vram: "#FF8C00"
   // 255,140,0
-}, ye = ({
-  metric: r,
+}, Fe = ({
+  metric: t,
   decimal: e = 0,
-  suffix: t = ""
+  suffix: n = ""
 }) => {
-  const i = I(null);
-  return re("log", (m) => {
-    const [o] = m;
-    if (o && i.current) {
-      const a = o[r];
-      i.current.innerText = (typeof a == "number" ? a.toFixed(e) : "0") + t;
+  const o = T(null);
+  return le("log", (d) => {
+    const [f] = d;
+    if (f && o.current) {
+      const h = f[t];
+      o.current.innerText = (typeof h == "number" ? h.toFixed(e) : "0") + n;
     }
-  }), /* @__PURE__ */ y("span", { ref: i, children: [
+  }), /* @__PURE__ */ x("span", { ref: o, children: [
     "0",
-    t
+    n
   ] });
-}, G = ({
-  metric: r,
+}, U = ({
+  metric: t,
   suffix: e = ""
 }) => {
-  const t = I(null);
-  return re("log", (i) => {
-    const [, m] = i;
-    if (m && t.current) {
-      let o = m[r];
-      r === "calls" && o === 1 && (o = "--"), t.current.innerText = o + e;
+  const n = T(null);
+  return le("log", (o) => {
+    const [, d] = o;
+    if (d && n.current) {
+      let f = d[t];
+      t === "calls" && f === 1 && (f = "--"), n.current.innerText = f + e;
     }
-  }), /* @__PURE__ */ y("span", { ref: t, children: [
+  }), /* @__PURE__ */ x("span", { ref: n, children: [
     "0",
     e
   ] });
-}, ve = ({ type: r }) => {
-  const e = L((t) => t.estimatedMemory[r]);
-  return /* @__PURE__ */ y("span", { children: [
+}, Pe = ({ type: t }) => {
+  const e = A((n) => n.estimatedMemory[t]);
+  return /* @__PURE__ */ x("span", { children: [
     e.toFixed(0),
     " MB"
   ] });
-}, Nt = () => {
-  const r = L((m) => m.overclockingFps), e = L((m) => m.fpsLimit), t = I(null);
-  re("log", (m) => {
-    const [o] = m;
-    o && t.current && (t.current.innerText = Math.round(o.fps).toString());
+}, lr = () => {
+  const t = A((d) => d.overclockingFps), e = A((d) => d.fpsLimit), n = T(null);
+  le("log", (d) => {
+    const [f] = d;
+    f && n.current && (n.current.innerText = Math.round(f.fps).toString());
   });
-  const i = r ? N.overClock : N.fps;
-  return /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ y("span", { className: l.perfB, style: { color: i }, children: [
+  const o = t ? N.overClock : N.fps;
+  return /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ x("span", { className: v.perfB, style: { color: o }, children: [
       "FPS ",
-      r ? ` ${e}🚀` : ""
+      t ? ` ${e}🚀` : ""
     ] }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, ref: t, children: "0" })
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, ref: n, children: "0" })
   ] });
-}, Rt = ({ showGraph: r, minimal: e }) => L((i) => i.gl) ? /* @__PURE__ */ y("div", { className: l.perfIContainer, children: [
-  /* @__PURE__ */ n(Nt, { showGraph: r }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, style: { color: N.cpu }, children: "CPU" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(ye, { metric: "cpu", decimal: 2, suffix: " ms" }) })
+}, ur = ({ showGraph: t, minimal: e }) => A((o) => o.gl) ? /* @__PURE__ */ x("div", { className: v.perfIContainer, children: [
+  /* @__PURE__ */ p(lr, { showGraph: t }),
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, style: { color: N.cpu }, children: "CPU" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(Fe, { metric: "cpu", decimal: 2, suffix: " ms" }) })
   ] }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, style: { color: N.gpu }, children: "GPU" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(ye, { metric: "gpu", decimal: 2, suffix: " ms" }) })
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, style: { color: N.gpu }, children: "GPU" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(Fe, { metric: "gpu", decimal: 2, suffix: " ms" }) })
   ] }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, style: { color: N.memory }, children: "MEMORY" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(ve, { type: "ram" }) })
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, style: { color: N.memory }, children: "MEMORY" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(Pe, { type: "ram" }) })
   ] }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, style: { color: N.vram }, children: "VRAM" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(ve, { type: "vram" }) })
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, style: { color: N.vram }, children: "VRAM" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(Pe, { type: "vram" }) })
   ] }),
-  !e && /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, children: "Calls" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "calls" }) })
+  !e && /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, children: "Calls" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(U, { metric: "calls" }) })
   ] })
-] }) : null, Ft = ({ matrixUpdate: r }) => /* @__PURE__ */ y("div", { className: l.perfIContainer, children: [
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, children: "Geometries" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "geometries" }) })
+] }) : null, fr = ({ matrixUpdate: t }) => /* @__PURE__ */ x("div", { className: v.perfIContainer, children: [
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, children: "Geometries" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(U, { metric: "geometries" }) })
   ] }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, children: "Textures" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "textures" }) })
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, children: "Textures" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(U, { metric: "textures" }) })
   ] }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, children: "Shaders" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "programs" }) })
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, children: "Shaders" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(U, { metric: "programs" }) })
   ] }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, children: "Triangles" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "triangles" }) })
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, children: "Triangles" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(U, { metric: "triangles" }) })
   ] }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, children: "Lines" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "lines" }) })
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, children: "Lines" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(U, { metric: "lines" }) })
   ] }),
-  /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, children: "Points" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "points" }) })
+  /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, children: "Points" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: /* @__PURE__ */ p(U, { metric: "points" }) })
   ] }),
-  r && /* @__PURE__ */ y("div", { className: l.perfI, children: [
-    /* @__PURE__ */ n("span", { className: l.perfB, children: "Matrices" }),
-    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: r })
+  t && /* @__PURE__ */ x("div", { className: v.perfI, children: [
+    /* @__PURE__ */ p("span", { className: v.perfB, children: "Matrices" }),
+    /* @__PURE__ */ p("small", { className: v.perfSmallI, children: t })
   ] })
-] }), xe = ({ tab: r, title: e, set: t }) => {
-  const i = L((m) => m.tab);
-  return /* @__PURE__ */ n(
+] }), Ue = ({ tab: t, title: e, set: n }) => {
+  const o = A((d) => d.tab);
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: `${l.toggle} ${i === r ? l.activeTab : ""}`,
+      className: `${v.toggle} ${o === t ? v.activeTab : ""}`,
       onClick: () => {
-        t(!0), M({ tab: r });
+        n(!0), M({ tab: t });
       },
       children: e
     }
   );
-}, Pt = ({
-  openByDefault: r,
+}, mr = ({
+  openByDefault: t,
   showGraph: e,
-  deepAnalyze: t,
-  matrixUpdate: i,
-  graphType: m,
-  perfContainerRef: o,
-  antialias: a,
-  chart: c,
-  minimal: v
+  deepAnalyze: n,
+  matrixUpdate: o,
+  graphType: d,
+  perfContainerRef: f,
+  antialias: h,
+  chart: u,
+  minimal: g
 }) => {
-  const [s, d] = O(r || !1), f = L((p) => p.tab);
-  return /* @__PURE__ */ y(z, { children: [
-    /* @__PURE__ */ y("div", { style: { display: s ? "block" : "none", marginTop: "4px" }, children: [
-      /* @__PURE__ */ n(Ft, { matrixUpdate: i }),
-      e && (m === "bar" ? /* @__PURE__ */ n(St, {}) : /* @__PURE__ */ n(
-        Lt,
+  const [r, a] = B(t || !1), i = A((m) => m.tab);
+  return /* @__PURE__ */ x(q, { children: [
+    /* @__PURE__ */ x("div", { style: { display: r ? "block" : "none", marginTop: "4px" }, children: [
+      /* @__PURE__ */ p(fr, { matrixUpdate: o }),
+      e && (d === "bar" ? /* @__PURE__ */ p(cr, {}) : /* @__PURE__ */ p(
+        ir,
         {
-          perfContainerRef: o,
-          chart: c,
+          perfContainerRef: f,
+          chart: u,
           showGraph: e,
-          antialias: a,
-          minimal: v,
-          matrixUpdate: i
+          antialias: h,
+          minimal: g,
+          matrixUpdate: o
         }
       )),
-      s && /* @__PURE__ */ n("div", { className: l.containerScroll, children: f === "programs" && /* @__PURE__ */ n(Mt, {}) })
+      r && /* @__PURE__ */ p("div", { className: v.containerScroll, children: i === "programs" && /* @__PURE__ */ p(nr, {}) })
     ] }),
-    r && !t ? null : /* @__PURE__ */ y(
+    t && !n ? null : /* @__PURE__ */ x(
       "div",
       {
-        className: l.toggleContainer,
-        style: s && e && m === "line" ? { marginTop: 50 } : { marginTop: 6 },
+        className: v.toggleContainer,
+        style: r && e && d === "line" ? { marginTop: 50 } : { marginTop: 6 },
         children: [
-          t && /* @__PURE__ */ n(xe, { tab: "programs", title: "Programs", set: d }),
-          t && /* @__PURE__ */ n(xe, { tab: "infos", title: "Infos", set: d }),
-          /* @__PURE__ */ n("div", { className: l.toggle, onClick: () => d(!s), children: s ? "Minimize" : "More" })
+          n && /* @__PURE__ */ p(Ue, { tab: "programs", title: "Programs", set: a }),
+          n && /* @__PURE__ */ p(Ue, { tab: "infos", title: "Infos", set: a }),
+          /* @__PURE__ */ p("div", { className: v.toggle, onClick: () => a(!r), children: r ? "Minimize" : "More" })
         ]
       }
     )
   ] });
-}, qt = ({
-  showGraph: r = !0,
+}, vr = ({
+  showGraph: t = !0,
   openByDefault: e = !0,
-  className: t,
-  overClock: i = !1,
-  graphType: m = "bar",
-  style: o,
-  position: a = "top-right",
-  chart: c,
-  logsPerSecond: v,
-  deepAnalyze: s = !1,
-  antialias: d = !0,
-  matrixUpdate: f,
-  minimal: p
+  className: n,
+  overClock: o = !1,
+  graphType: d = "bar",
+  style: f,
+  position: h = "top-right",
+  chart: u,
+  logsPerSecond: g,
+  deepAnalyze: r = !1,
+  antialias: a = !0,
+  matrixUpdate: i,
+  minimal: m
 }) => {
-  const h = I(null), u = a === "top-left" ? l.topLeft : a === "bottom-left" ? l.bottomLeft : a === "bottom-right" ? l.bottomRight : l.topRight, w = r && m === "line" && !s;
-  return /* @__PURE__ */ y(z, { children: [
-    /* @__PURE__ */ n(
-      Ve,
+  const c = T(null), s = h === "top-left" ? v.topLeft : h === "bottom-left" ? v.bottomLeft : h === "bottom-right" ? v.bottomRight : v.topRight, y = t && d === "line" && !r;
+  return /* @__PURE__ */ x(q, { children: [
+    /* @__PURE__ */ p(
+      wt,
       {
-        logsPerSecond: v,
-        chart: c,
-        overClock: i,
-        deepAnalyze: s,
-        matrixUpdate: f
+        logsPerSecond: g,
+        chart: u,
+        overClock: o,
+        deepAnalyze: r,
+        matrixUpdate: i
       }
     ),
-    /* @__PURE__ */ n(be, { name: "r3f-perf", children: /* @__PURE__ */ y(
+    /* @__PURE__ */ p(We, { name: "r3f-perf", children: /* @__PURE__ */ x(
       "div",
       {
-        className: `${l.perfS} ${u} ${p ? l.minimal : ""} ${t || ""} ${w ? l.containerHeight : ""}`,
-        style: o,
-        ref: h,
+        className: `${v.perfS} ${s} ${m ? v.minimal : ""} ${n || ""} ${y ? v.containerHeight : ""}`,
+        style: f,
+        ref: c,
         children: [
-          /* @__PURE__ */ n(Rt, { showGraph: r, minimal: p }),
-          !p && /* @__PURE__ */ n(
-            Pt,
+          /* @__PURE__ */ p(ur, { showGraph: t, minimal: m }),
+          !m && /* @__PURE__ */ p(
+            mr,
             {
-              showGraph: r,
-              deepAnalyze: s,
-              matrixUpdate: f,
+              showGraph: t,
+              deepAnalyze: r,
+              matrixUpdate: i,
               openByDefault: e,
-              graphType: m,
-              perfContainerRef: h,
-              antialias: d,
-              chart: c,
-              minimal: p
+              graphType: d,
+              perfContainerRef: c,
+              antialias: a,
+              chart: u,
+              minimal: m
             }
           )
         ]
@@ -1382,5 +1782,5 @@ const N = {
   ] });
 };
 export {
-  qt as PerformanceMonitor
+  vr as PerfMonitor
 };