r3f-frame-profiler 1.0.2 → 1.0.3

package/dist/index-o5zvhDta.js

@@ -0,0 +1,4406 @@
+import { useRef as I, useEffect as A, useState as B, useMemo as L, useCallback as Z } from "react";
+import { useFrame as le, useThree as he } from "@react-three/fiber";
+import { Mesh as oe, Texture as ne, Light as se, Camera as fe } from "three";
+import { jsxs as c, jsx as s, Fragment as N } from "react/jsx-runtime";
+class ye {
+  data = /* @__PURE__ */ new Map();
+  frameCount = 0;
+  enabled = !1;
+  maxHistorySize = 240;
+  listeners = /* @__PURE__ */ new Set();
+  reportGenerator = null;
+  constructor() {
+    this.updateEnabledState(), typeof window < "u" && (window.addEventListener("storage", () => {
+      this.updateEnabledState();
+    }), import("./report-generator-BCq_enQo.js").then(({ reportGenerator: e }) => {
+      this.reportGenerator = e;
+    }));
+  }
+  updateEnabledState() {
+    if (typeof window > "u") {
+      this.enabled = !1;
+      return;
+    }
+    const e = new URLSearchParams(window.location.search);
+    this.enabled = e.get("debug") === "1" || localStorage.getItem("debug") === "true";
+  }
+  isEnabled() {
+    return this.enabled;
+  }
+  profile(e, t) {
+    if (!this.enabled)
+      return t();
+    const r = performance.now(), o = t(), d = performance.now() - r;
+    return this.record(e, d), o;
+  }
+  async profileAsync(e, t) {
+    if (!this.enabled)
+      return t();
+    const r = performance.now(), o = await t(), d = performance.now() - r;
+    return this.record(e, d), o;
+  }
+  record(e, t) {
+    if (!this.enabled) return;
+    this.data.has(e) || this.data.set(e, {
+      total: 0,
+      calls: 0,
+      max: 0,
+      times: []
+    });
+    const r = this.data.get(e);
+    if (r.total += t, r.calls += 1, r.max = Math.max(r.max, t), r.times.push(t), typeof window < "u" && window.__hotPathDetector)
+      try {
+        window.__hotPathDetector.recordCall(e, t);
+      } catch {
+      }
+    if (r.times.length > this.maxHistorySize) {
+      const o = r.times.shift();
+      r.total -= o, r.calls -= 1;
+    }
+    this.frameCount += 1, this.frameCount > this.maxHistorySize && (this.frameCount = this.maxHistorySize);
+  }
+  wrap(e, t) {
+    if (!this.enabled)
+      return t;
+    const r = this;
+    return ((...o) => r.profile(e, () => t(...o)));
+  }
+  wrapAsync(e, t) {
+    if (!this.enabled)
+      return t;
+    const r = this;
+    return (async (...o) => r.profileAsync(e, () => t(...o)));
+  }
+  getData() {
+    if (!this.enabled) return null;
+    const e = Array.from(this.data.entries()).map(([o, a]) => ({
+      name: o,
+      total: a.total,
+      avg: a.calls > 0 ? a.total / a.calls : 0,
+      max: a.max,
+      calls: a.calls
+    })), t = e.reduce((o, a) => o + a.total, 0);
+    return {
+      entries: e.map((o) => ({
+        ...o,
+        percentage: t > 0 ? o.total / t * 100 : 0,
+        avg: isFinite(o.avg) ? o.avg : 0
+        // Ensure safe number
+      })),
+      totalTime: t,
+      calls: Math.max(...e.map((o) => o.calls), 0),
+      frames: this.frameCount
+    };
+  }
+  /**
+   * Get raw profiler data including individual timing samples for percentile analysis
+   */
+  getRawData() {
+    return this.enabled ? this.data : null;
+  }
+  reset() {
+    this.data.clear(), this.frameCount = 0, this.notifyListeners();
+  }
+  subscribe(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  /**
+   * Notifie tous les listeners
+   */
+  notifyListeners() {
+    const e = this.getData();
+    this.listeners.forEach((t) => t(e));
+  }
+  /**
+   * Force une notification aux listeners
+   */
+  notify() {
+    this.notifyListeners();
+  }
+  /**
+   * Configure la taille maximale de l'historique
+   */
+  setMaxHistorySize(e) {
+    this.maxHistorySize = e;
+  }
+  /**
+   * Génère un rapport de performance markdown
+   * Optimisé pour être analysé par une IA
+   */
+  async generateReport() {
+    const { reportGenerator: e } = await import("./report-generator-BCq_enQo.js");
+    return e.generateMarkdownReport();
+  }
+  /**
+   * Copie le rapport dans le clipboard
+   */
+  async copyReportToClipboard() {
+    const { reportGenerator: e } = await import("./report-generator-BCq_enQo.js");
+    await e.copyReportToClipboard();
+  }
+  /**
+   * Enregistre une frame pour les statistiques du rapport
+   */
+  recordFrameStats(e, t, r) {
+    !isFinite(e) || !isFinite(t) || e > 1e3 || t <= 0 || (this.reportGenerator ? this.reportGenerator.recordFrame(e, t, r) : import("./report-generator-BCq_enQo.js").then(({ reportGenerator: o }) => {
+      this.reportGenerator = o, this.reportGenerator.recordFrame(e, t, r);
+    }));
+  }
+  /**
+   * Enregistre une métrique custom pour le rapport
+   */
+  recordMetricForReport(e, t) {
+    import("./report-generator-BCq_enQo.js").then(({ reportGenerator: r }) => {
+      r.recordMetric(e, t);
+    });
+  }
+}
+const E = new ye();
+typeof window < "u" && Promise.resolve().then(async () => {
+  try {
+    const { hotPathDetector: n } = await Promise.resolve().then(() => Ke);
+    window.__hotPathDetector = n;
+  } catch {
+  }
+});
+const be = (n, e) => E.profile(n, e), ce = () => E.isEnabled(), xe = (n, e) => {
+  E.recordMetricForReport(n, e);
+}, ve = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  isProfilerEnabled: ce,
+  profile: be,
+  profiler: E,
+  reportMetric: xe
+}, Symbol.toStringTag, { value: "Module" })), ot = () => {
+  const n = I(performance.now());
+  return le(() => {
+    if (E.isEnabled()) {
+      const e = performance.now(), t = e - n.current;
+      n.current = e, E.record("Frame", t), E.notify();
+    } else
+      n.current = performance.now();
+  }), null;
+};
+class Se {
+  renderer = null;
+  lastStats = null;
+  frameStartTime = 0;
+  setRenderer(e) {
+    this.renderer = e;
+  }
+  getStats() {
+    if (!this.renderer)
+      return null;
+    const e = this.renderer.info, t = e.memory, r = e.render, o = "points" in r ? r.points : 0, a = "lines" in r ? r.lines : 0;
+    let d = 0, l = 0;
+    if (t.textures && this.renderer)
+      try {
+        d = t.textures * 2 * 1024 * 1024;
+      } catch {
+        d = t.textures * 1024 * 1024;
+      }
+    if (t.geometries && this.renderer)
+      try {
+        l = (this.renderer.info.render.triangles || 0) * 100, l += t.geometries * 10 * 1024;
+      } catch {
+        l = t.geometries * 100 * 1024;
+      }
+    const g = {
+      drawCalls: r.calls || 0,
+      triangles: r.triangles || 0,
+      points: o || 0,
+      lines: a || 0,
+      textures: t.textures || 0,
+      geometries: t.geometries || 0,
+      programs: e.programs?.length || 0,
+      memory: {
+        textures: d,
+        geometries: l,
+        programs: 0,
+        // Not available in memory object
+        total: d + l
+      },
+      frameTime: performance.now() - this.frameStartTime,
+      timestamp: performance.now()
+    };
+    return this.lastStats = g, g;
+  }
+  startFrame() {
+    this.frameStartTime = performance.now();
+  }
+  endFrame() {
+  }
+  getLastStats() {
+    return this.lastStats;
+  }
+  reset() {
+    this.lastStats = null;
+  }
+}
+const O = new Se();
+class we {
+  scene = null;
+  setScene(e) {
+    this.scene = e;
+  }
+  getStats() {
+    if (!this.scene)
+      return null;
+    const e = {
+      total: 0,
+      meshes: 0,
+      lights: 0,
+      cameras: 0,
+      groups: 0,
+      other: 0
+    }, t = {
+      total: 0,
+      byType: {}
+    }, r = {
+      total: 0,
+      totalSize: 0,
+      byFormat: {},
+      environment: 0,
+      system: 0
+    }, o = {
+      total: 0,
+      vertices: 0,
+      faces: 0
+    }, a = {
+      meshes: 0,
+      total: 0
+    }, d = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), w = (h) => {
+      if (!h || h.userData && (h.userData.rapier || h.userData.physics || h.userData.type === "RigidBody" || h.userData.__r3f || h.userData.__reactInternalInstance || h.userData.internal === !0 || h.userData.helper === !0))
+        return !0;
+      if (h.name) {
+        const m = h.name.toLowerCase();
+        if (m.includes("__rapier") || m.includes("__physics") || m.includes("__r3f") || m.includes("__internal") || m.startsWith("_helper") || m.startsWith("_internal") || m.includes("__internal") || m.startsWith("_") || m.includes("collider") || m.includes("rigidbody") || m.includes("helper") || m.includes("debug"))
+          return !0;
+      }
+      return !!(h.type === "RigidBody" || h.isRigidBody || h.type && h.type.includes("Helper"));
+    }, y = (h) => {
+      if (!(h instanceof oe || h.isMesh)) return !1;
+      const m = h;
+      return !(!m.geometry || !m.material || w(h));
+    }, u = (h) => !(!(h instanceof se || h.isLight) || w(h) || h.type && h.type.includes("Helper")), f = (h, m = 0, S = !1) => {
+      if (!h) return;
+      const z = w(h) || S;
+      if (h instanceof oe || h.isMesh) {
+        const p = h;
+        if (y(h) && !i.has(p)) {
+          if (i.add(p), e.meshes++, h.visible && a.meshes++, z || (e.total++, h.visible && a.total++), p.geometry && !g.has(p.geometry)) {
+            g.add(p.geometry), o.total++;
+            const T = p.geometry;
+            if (T.attributes && T.attributes.position) {
+              const P = T.attributes.position.count || 0;
+              o.vertices += P, T.index ? o.faces += Math.floor(T.index.count / 3) : o.faces += Math.floor(P / 3);
+            }
+          }
+          p.material && (Array.isArray(p.material) ? p.material : [p.material]).forEach((P) => {
+            if (P && !d.has(P)) {
+              d.add(P), t.total++;
+              const D = P.type || P.constructor.name || "Unknown";
+              t.byType[D] = (t.byType[D] || 0) + 1, [
+                "map",
+                "normalMap",
+                "roughnessMap",
+                "metalnessMap",
+                "aoMap",
+                "emissiveMap",
+                "bumpMap",
+                "displacementMap",
+                "alphaMap",
+                "envMap",
+                "lightMap",
+                "specularMap",
+                "clearcoatMap",
+                "clearcoatNormalMap",
+                "clearcoatRoughnessMap",
+                "sheenColorMap",
+                "sheenRoughnessMap",
+                "transmissionMap",
+                "thicknessMap",
+                "iridescenceMap",
+                "iridescenceThicknessMap"
+              ].forEach((b) => {
+                const R = P[b];
+                if (R && R instanceof ne && !l.has(R)) {
+                  l.add(R), r.total++;
+                  const $ = this.estimateTextureSize(R);
+                  r.totalSize += $;
+                  const G = R.format?.toString() || "unknown";
+                  r.byFormat[G] = (r.byFormat[G] || 0) + 1, (b === "envMap" || R.name?.toLowerCase().includes("env") || R.name?.toLowerCase().includes("environment")) && r.environment++, (b === "lightMap" || R.name?.toLowerCase().includes("lightmap") || R.name?.toLowerCase().includes("system")) && r.system++;
+                }
+              }), Object.keys(P).forEach((b) => {
+                const R = P[b];
+                if (R && R instanceof ne && !l.has(R)) {
+                  l.add(R), r.total++;
+                  const $ = this.estimateTextureSize(R);
+                  r.totalSize += $;
+                  const G = R.format?.toString() || "unknown";
+                  r.byFormat[G] = (r.byFormat[G] || 0) + 1, (b === "envMap" || R.name?.toLowerCase().includes("env") || R.name?.toLowerCase().includes("environment")) && r.environment++, (b === "lightMap" || R.name?.toLowerCase().includes("lightmap") || R.name?.toLowerCase().includes("system")) && r.system++;
+                }
+              });
+            }
+          });
+        }
+      } else h instanceof se || h.isLight ? u(h) && e.lights++ : h instanceof fe || h.isCamera ? !z && !h.type?.includes("Helper") && e.cameras++ : h.type === "Group" || h.isGroup ? z || e.groups++ : z || e.other++;
+      m < 20 && h.children && h.children.length > 0 && h.children.forEach((p) => {
+        p && f(p, m + 1, z);
+      });
+    };
+    this.scene.children.forEach((h) => {
+      h && f(h, 0, !1);
+    });
+    const M = e.meshes > 0 ? o.vertices / e.meshes : 0, C = e.meshes > 0 ? o.faces / e.meshes : 0;
+    return {
+      objects: e,
+      materials: t,
+      textures: r,
+      geometries: o,
+      visible: a,
+      complexity: {
+        averageVerticesPerMesh: M,
+        averageFacesPerMesh: C,
+        totalDrawCalls: e.meshes
+        // Simplified estimate
+      },
+      timestamp: performance.now()
+    };
+  }
+  estimateTextureSize(e) {
+    if (!e.image) return 0;
+    const t = e.image;
+    if (!t) return 0;
+    const r = t.width || 1, o = t.height || 1;
+    let a = 4;
+    try {
+      const d = Number(e.format);
+      isNaN(d) || (d === 1022 && (a = 3), d === 1021 && (a = 1), d === 1020 && (a = 1));
+    } catch {
+    }
+    return r * o * a;
+  }
+  reset() {
+  }
+}
+const de = new we();
+class Re {
+  renderer = null;
+  lastStats = null;
+  history = [];
+  historySize = 60;
+  // Keep last 60 samples (1 minute at 1 sample/sec)
+  startTime = 0;
+  warmupPeriod = 1e4;
+  // 10 seconds warmup before leak detection
+  setRenderer(e) {
+    this.renderer = e, this.startTime === 0 && (this.startTime = performance.now());
+  }
+  getStats() {
+    const e = this.getJSHeapStats(), t = this.getGPUMemoryStats(), r = this.detectLeaks();
+    if (!e && !t)
+      return null;
+    const o = {
+      jsHeap: e || {
+        used: 0,
+        total: 0,
+        limit: 0,
+        percentage: 0
+      },
+      gpuMemory: t || {
+        textures: 0,
+        geometries: 0,
+        total: 0
+      },
+      leaks: r,
+      timestamp: performance.now()
+    };
+    return this.lastStats = o, o;
+  }
+  getJSHeapStats() {
+    if (typeof performance > "u" || !performance.memory)
+      return null;
+    const e = performance.memory, t = e.usedJSHeapSize, r = e.totalJSHeapSize, o = e.jsHeapSizeLimit, a = o > 0 ? t / o * 100 : 0;
+    return this.addToHistory(t), {
+      used: t,
+      total: r,
+      limit: o,
+      percentage: Math.min(100, Math.max(0, a))
+    };
+  }
+  getGPUMemoryStats() {
+    if (!this.renderer)
+      return null;
+    const e = this.renderer.info, t = e.memory, r = e.render;
+    let o = 0, a = 0;
+    if (t.textures && this.renderer)
+      try {
+        o = t.textures * 2 * 1024 * 1024;
+      } catch {
+        o = t.textures * 1024 * 1024;
+      }
+    if (t.geometries && this.renderer)
+      try {
+        a = (r.triangles || 0) * 100, a += t.geometries * 10 * 1024;
+      } catch {
+        a = t.geometries * 100 * 1024;
+      }
+    return {
+      textures: o,
+      geometries: a,
+      total: o + a
+    };
+  }
+  addToHistory(e) {
+    const t = performance.now();
+    this.history.push({ timestamp: t, used: e }), this.history.length > this.historySize && this.history.shift();
+  }
+  detectLeaks() {
+    if (performance.now() - this.startTime < this.warmupPeriod)
+      return {
+        detected: !1,
+        growthRate: 0,
+        trend: "stable"
+      };
+    if (this.history.length < 20)
+      return {
+        detected: !1,
+        growthRate: 0,
+        trend: "stable"
+      };
+    const t = this.history.slice(-10), r = this.history.slice(-30), o = t[0], a = t[t.length - 1], d = (a.timestamp - o.timestamp) / 1e3, l = a.used - o.used, g = d > 0 ? l / d : 0, i = r[0], w = r[r.length - 1], y = (w.timestamp - i.timestamp) / 1e3, u = w.used - i.used, f = y > 0 ? u / y : 0, M = (g + f) / 2, C = 33 * 1024, h = g > 0 && f > 0, m = M > C && h;
+    let S = "stable";
+    return Math.abs(M) < 2048 ? S = "stable" : M > 0 ? S = "increasing" : S = "decreasing", {
+      detected: m,
+      growthRate: M,
+      trend: S
+    };
+  }
+  getLastStats() {
+    return this.lastStats;
+  }
+  reset() {
+    this.lastStats = null, this.history = [], this.startTime = 0;
+  }
+}
+const Y = new Re();
+class ze {
+  phases = /* @__PURE__ */ new Map();
+  timeline = [];
+  frameStartTime = 0;
+  lastFrameTime = 0;
+  currentInterval = 0;
+  lastBreakdown = null;
+  maxTimelineEntries = 100;
+  startFrame() {
+    const e = performance.now();
+    this.lastFrameTime > 0 && (this.currentInterval = e - this.lastFrameTime), this.lastFrameTime = e, this.frameStartTime = e, this.phases.clear(), this.timeline = [];
+  }
+  startPhase(e) {
+    const t = performance.now();
+    this.phases.set(e, { start: t });
+  }
+  endPhase(e) {
+    const t = this.phases.get(e);
+    if (!t)
+      return;
+    const r = performance.now();
+    t.end = r;
+    const o = r - t.start;
+    this.timeline.push({
+      name: e,
+      start: t.start,
+      end: r,
+      duration: o
+    });
+  }
+  endFrame() {
+    const t = performance.now() - this.frameStartTime, r = this.currentInterval > 0 ? this.currentInterval : t > 0 ? t : 16.66, o = {
+      react: this.getPhaseDuration("react"),
+      update: this.getPhaseDuration("update"),
+      physics: this.getPhaseDuration("physics"),
+      render: this.getPhaseDuration("render"),
+      postProcess: this.getPhaseDuration("postProcess"),
+      other: 0
+    }, a = Object.values(o).reduce((l, g) => l + g, 0);
+    o.other = Math.max(0, t - a);
+    const d = {
+      total: t,
+      interval: r,
+      phases: o,
+      timeline: [...this.timeline].slice(-this.maxTimelineEntries),
+      // Keep last N entries
+      timestamp: this.frameStartTime
+    };
+    return this.lastBreakdown = d, d;
+  }
+  getPhaseDuration(e) {
+    const t = this.phases.get(e);
+    return !t || t.end === void 0 ? 0 : t.end - t.start;
+  }
+  // Helper method to measure a function execution
+  measure(e, t) {
+    this.startPhase(e);
+    try {
+      return t();
+    } finally {
+      this.endPhase(e);
+    }
+  }
+  // Helper method to measure async function execution
+  async measureAsync(e, t) {
+    this.startPhase(e);
+    try {
+      return await t();
+    } finally {
+      this.endPhase(e);
+    }
+  }
+  getLastBreakdown() {
+    return this.lastBreakdown;
+  }
+  reset() {
+    this.phases.clear(), this.timeline = [], this.lastBreakdown = null;
+  }
+}
+const H = new ze();
+class Ce {
+  enabled = !1;
+  reactPhaseStart = 0;
+  isReactRendering = !1;
+  isUpdating = !1;
+  isPhysicsRunning = !1;
+  isRendering = !1;
+  mutationObserver = null;
+  enable() {
+    this.enabled || (this.enabled = !0, this.setupReactInstrumentation(), this.setupThreeJSInstrumentation(), this.setupPhysicsInstrumentation());
+  }
+  disable() {
+    this.enabled && (this.enabled = !1, this.cleanup());
+  }
+  setupReactInstrumentation() {
+    if (typeof window > "u") return;
+    const e = document.getElementById("root") || document.body;
+    if (e && (this.mutationObserver = new MutationObserver(() => {
+      this.isReactRendering || this.startReactPhase();
+    }), this.mutationObserver.observe(e, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeOldValue: !1
+    })), performance.mark) {
+      const t = performance.mark;
+      performance.mark = ((r, o) => ((r.includes("react") || r.includes("React")) && (this.isReactRendering || this.startReactPhase()), t.call(performance, r, o)));
+    }
+  }
+  setupThreeJSInstrumentation() {
+  }
+  setupPhysicsInstrumentation() {
+  }
+  startFrame() {
+    this.enabled && H.startFrame();
+  }
+  startReactPhase() {
+    !this.enabled || this.isReactRendering || (this.isReactRendering = !0, this.reactPhaseStart = performance.now(), H.startPhase("react"));
+  }
+  endReactPhase() {
+    !this.enabled || !this.isReactRendering || (this.isReactRendering = !1, H.endPhase("react"));
+  }
+  // Called by ReactMonitor when a component renders
+  onReactRender(e) {
+    this.enabled && (this.isReactRendering || this.startReactPhase(), setTimeout(() => {
+      this.isReactRendering && performance.now() - this.reactPhaseStart > e && this.endReactPhase();
+    }, 0));
+  }
+  startUpdatePhase() {
+    !this.enabled || this.isUpdating || (this.isUpdating = !0, H.startPhase("update"));
+  }
+  endUpdatePhase() {
+    !this.enabled || !this.isUpdating || (this.isUpdating = !1, H.endPhase("update"));
+  }
+  startPhysicsPhase() {
+    !this.enabled || this.isPhysicsRunning || (this.isPhysicsRunning = !0, H.startPhase("physics"));
+  }
+  endPhysicsPhase() {
+    !this.enabled || !this.isPhysicsRunning || (this.isPhysicsRunning = !1, H.endPhase("physics"));
+  }
+  startRenderPhase() {
+    !this.enabled || this.isRendering || (this.isRendering = !0, H.startPhase("render"));
+  }
+  endRenderPhase() {
+    !this.enabled || !this.isRendering || (this.isRendering = !1, H.endPhase("render"), H.endFrame());
+  }
+  cleanup() {
+    this.isReactRendering = !1, this.isUpdating = !1, this.isPhysicsRunning = !1, this.isRendering = !1, this.mutationObserver && (this.mutationObserver.disconnect(), this.mutationObserver = null);
+  }
+  isActive() {
+    return this.enabled;
+  }
+}
+const _ = new Ce();
+class Te {
+  isPaused = !1;
+  listeners = /* @__PURE__ */ new Set();
+  STORAGE_KEY = "r3f-profiler-paused";
+  constructor() {
+    this.loadPauseState();
+  }
+  loadPauseState() {
+    try {
+      const e = localStorage.getItem(this.STORAGE_KEY);
+      e !== null && (this.isPaused = e === "true");
+    } catch (e) {
+      console.warn("Failed to load pause state:", e);
+    }
+  }
+  savePauseState() {
+    try {
+      localStorage.setItem(this.STORAGE_KEY, String(this.isPaused));
+    } catch (e) {
+      console.warn("Failed to save pause state:", e);
+    }
+  }
+  pause() {
+    this.isPaused || (this.isPaused = !0, this.savePauseState(), this.notifyListeners());
+  }
+  resume() {
+    this.isPaused && (this.isPaused = !1, this.savePauseState(), this.notifyListeners());
+  }
+  toggle() {
+    this.isPaused ? this.resume() : this.pause();
+  }
+  getPaused() {
+    return this.isPaused;
+  }
+  subscribe(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  notifyListeners() {
+    this.listeners.forEach((e) => {
+      try {
+        e(this.isPaused);
+      } catch (t) {
+        console.error("Error in monitor state listener:", t);
+      }
+    });
+  }
+}
+const k = new Te(), nt = () => {
+  const { gl: n, scene: e } = he();
+  return A(() => {
+    n && (O.setRenderer(n), Y.setRenderer(n));
+  }, [n]), A(() => {
+    e && de.setScene(e);
+  }, [e]), A(() => (_.enable(), () => {
+    _.disable();
+  }), []), le((t, r) => {
+    n && !k.getPaused() && (H.startFrame(), _.startUpdatePhase(), _.endUpdatePhase(), _.startRenderPhase(), O.startFrame(), requestAnimationFrame(() => {
+      if (!k.getPaused()) {
+        _.endRenderPhase();
+        const o = H.endFrame();
+        if (O.endFrame(), O.getStats(), Y.getStats(), o) {
+          const a = o.interval || o.total, d = Math.max(a, 1e-3), l = 1e3 / d, g = l > 500 && o.total < 16 ? 0 : l;
+          let i;
+          typeof performance < "u" && performance.memory && (i = performance.memory.usedJSHeapSize / (1024 * 1024)), E.isEnabled() && E.recordFrameStats(g, d, i);
+        }
+      }
+    }));
+  }), null;
+}, Me = {
+  colors: {
+    background: "rgba(15, 15, 15, 0.95)",
+    surface: "rgba(26, 26, 26, 0.98)",
+    surfaceElevated: "rgba(35, 35, 35, 0.98)",
+    text: "#ffffff",
+    textSecondary: "rgba(255, 255, 255, 0.7)",
+    textTertiary: "rgba(255, 255, 255, 0.5)",
+    border: "rgba(255, 255, 255, 0.1)",
+    borderLight: "rgba(255, 255, 255, 0.05)",
+    primary: "#3b82f6",
+    primaryHover: "#2563eb",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4",
+    accent: "#8b5cf6"
+  },
+  shadows: {
+    md: "0 4px 6px rgba(0, 0, 0, 0.4)",
+    xl: "0 20px 25px rgba(0, 0, 0, 0.6)"
+  },
+  borderRadius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px"
+  },
+  typography: {
+    fontFamilyMono: '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace',
+    fontSize: {
+      xs: "10px",
+      sm: "12px",
+      md: "14px",
+      lg: "16px"
+    }
+  },
+  transitions: {
+    fast: "150ms ease",
+    normal: "250ms ease"
+  },
+  zIndex: {
+    base: 1e4
+  }
+}, F = Me;
+function ie(n, e) {
+  return n <= e.good ? F.colors.success : n <= e.warning ? F.colors.warning : F.colors.error;
+}
+function v(n, e = 2) {
+  return n.toFixed(e);
+}
+const x = ({
+  label: n,
+  value: e,
+  unit: t,
+  trend: r,
+  status: o,
+  color: a,
+  icon: d,
+  onClick: l,
+  className: g = ""
+}) => {
+  const i = F;
+  let w = a;
+  !w && o && (w = o === "good" ? i.colors.success : o === "warning" ? i.colors.warning : i.colors.error);
+  const y = typeof e == "number" ? e.toLocaleString() : e, u = t ? ` ${t}` : "";
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      onClick: l,
+      className: g,
+      style: {
+        backgroundColor: i.colors.surface,
+        border: `1px solid ${i.colors.border}`,
+        borderRadius: i.borderRadius.md,
+        padding: i.spacing.md,
+        cursor: l ? "pointer" : "default",
+        transition: i.transitions.fast,
+        position: "relative",
+        overflow: "hidden"
+      },
+      onMouseEnter: (f) => {
+        l && (f.currentTarget.style.backgroundColor = i.colors.surfaceElevated, f.currentTarget.style.transform = "translateY(-2px)", f.currentTarget.style.boxShadow = i.shadows.md);
+      },
+      onMouseLeave: (f) => {
+        l && (f.currentTarget.style.backgroundColor = i.colors.surface, f.currentTarget.style.transform = "translateY(0)", f.currentTarget.style.boxShadow = "none");
+      },
+      children: [
+        d && /* @__PURE__ */ s("div", { style: {
+          position: "absolute",
+          top: i.spacing.sm,
+          right: i.spacing.sm,
+          opacity: 0.3
+        }, children: d }),
+        /* @__PURE__ */ s("div", { style: {
+          fontSize: i.typography.fontSize.sm,
+          color: i.colors.textSecondary,
+          marginBottom: i.spacing.xs,
+          fontWeight: 500
+        }, children: n }),
+        /* @__PURE__ */ c("div", { style: {
+          display: "flex",
+          alignItems: "baseline",
+          gap: i.spacing.xs
+        }, children: [
+          /* @__PURE__ */ s("div", { style: {
+            fontSize: i.typography.fontSize.lg,
+            fontWeight: "bold",
+            color: w || i.colors.text,
+            fontFamily: i.typography.fontFamilyMono
+          }, children: y }),
+          t && /* @__PURE__ */ s("div", { style: {
+            fontSize: i.typography.fontSize.sm,
+            color: i.colors.textTertiary
+          }, children: u }),
+          r && /* @__PURE__ */ s("div", { style: {
+            fontSize: i.typography.fontSize.xs,
+            color: r === "up" ? i.colors.error : r === "down" ? i.colors.success : i.colors.textTertiary,
+            marginLeft: "auto"
+          }, children: r === "up" ? "↑" : r === "down" ? "↓" : "→" })
+        ] }),
+        w && /* @__PURE__ */ s("div", { style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: "2px",
+          backgroundColor: w
+        } })
+      ]
+    }
+  );
+}, Pe = ({ tabs: n, activeTab: e, onTabChange: t, className: r = "" }) => {
+  const o = F;
+  return /* @__PURE__ */ s("div", { className: r, style: { position: "relative" }, children: /* @__PURE__ */ s("div", { style: {
+    display: "flex",
+    gap: o.spacing.xs,
+    borderBottom: `1px solid ${o.colors.border}`,
+    paddingBottom: o.spacing.xs
+  }, children: n.map((a) => {
+    const d = a.id === e;
+    return /* @__PURE__ */ c(
+      "button",
+      {
+        onClick: () => t(a.id),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: o.spacing.xs,
+          padding: `${o.spacing.sm} ${o.spacing.md}`,
+          backgroundColor: "transparent",
+          border: "none",
+          color: d ? o.colors.primary : o.colors.textSecondary,
+          fontSize: o.typography.fontSize.sm,
+          fontWeight: d ? 600 : 400,
+          cursor: "pointer",
+          position: "relative",
+          transition: o.transitions.fast,
+          borderRadius: `${o.borderRadius.sm} ${o.borderRadius.sm} 0 0`
+        },
+        onMouseEnter: (l) => {
+          d || (l.currentTarget.style.color = o.colors.text, l.currentTarget.style.backgroundColor = o.colors.surfaceElevated);
+        },
+        onMouseLeave: (l) => {
+          d || (l.currentTarget.style.color = o.colors.textSecondary, l.currentTarget.style.backgroundColor = "transparent");
+        },
+        children: [
+          a.icon && /* @__PURE__ */ s("span", { style: { display: "flex", alignItems: "center" }, children: a.icon }),
+          /* @__PURE__ */ s("span", { children: a.label }),
+          a.badge !== void 0 && /* @__PURE__ */ s("span", { style: {
+            backgroundColor: d ? o.colors.primary : o.colors.surfaceElevated,
+            color: d ? o.colors.text : o.colors.textSecondary,
+            borderRadius: o.borderRadius.sm,
+            padding: `2px ${o.spacing.xs}`,
+            fontSize: o.typography.fontSize.xs,
+            fontWeight: 600,
+            minWidth: "18px",
+            textAlign: "center"
+          }, children: a.badge }),
+          d && /* @__PURE__ */ s("div", { style: {
+            position: "absolute",
+            bottom: -1,
+            left: 0,
+            right: 0,
+            height: "2px",
+            backgroundColor: o.colors.primary
+          } })
+        ]
+      },
+      a.id
+    );
+  }) }) });
+}, V = ({ severity: n, count: e, children: t, onClick: r }) => {
+  const o = F, d = {
+    info: o.colors.info,
+    warning: o.colors.warning,
+    error: o.colors.error
+  }[n];
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      onClick: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: o.spacing.xs,
+        padding: `${o.spacing.xs} ${o.spacing.sm}`,
+        backgroundColor: `${d}20`,
+        color: d,
+        borderRadius: o.borderRadius.md,
+        fontSize: o.typography.fontSize.xs,
+        fontWeight: 600,
+        cursor: r ? "pointer" : "default",
+        border: `1px solid ${d}40`,
+        transition: o.transitions.fast
+      },
+      onMouseEnter: (l) => {
+        r && (l.currentTarget.style.backgroundColor = `${d}30`);
+      },
+      onMouseLeave: (l) => {
+        r && (l.currentTarget.style.backgroundColor = `${d}20`);
+      },
+      children: [
+        /* @__PURE__ */ s("div", { style: {
+          width: "8px",
+          height: "8px",
+          borderRadius: "50%",
+          backgroundColor: d
+        } }),
+        e !== void 0 && e > 0 && /* @__PURE__ */ s("span", { children: e }),
+        t
+      ]
+    }
+  );
+};
+function J() {
+  const [n, e] = B(null);
+  return A(() => {
+    const t = () => {
+      if (!k.getPaused()) {
+        const d = E.getData();
+        e(d);
+      }
+    }, r = E.subscribe((d) => {
+      k.getPaused() || e(d);
+    });
+    t();
+    const o = setInterval(() => {
+      E.isEnabled() && !k.getPaused() && t();
+    }, 100), a = k.subscribe((d) => {
+      d || t();
+    });
+    return () => {
+      r(), a(), clearInterval(o);
+    };
+  }, []), n;
+}
+const U = 120;
+function j() {
+  const n = J(), [e, t] = B([]), r = I(0), o = I(null);
+  return A(() => {
+    if (!n || n.frames === 0) {
+      t([]), r.current = 0;
+      return;
+    }
+    const a = () => {
+      if (k.getPaused()) return;
+      const l = H.getLastBreakdown();
+      if (l && l.total > 0) {
+        t((g) => {
+          const i = g.length > 0 ? g[g.length - 1] : null;
+          if (i === null || Math.abs(l.total - i) > 0.1) {
+            const w = [...g, l.total];
+            return w.length > U ? w.slice(-U) : w;
+          }
+          return g;
+        });
+        return;
+      }
+      if (n && n.frames > 0) {
+        const g = n.totalTime / n.frames;
+        if (n.frames > r.current) {
+          const i = n.frames - r.current;
+          r.current = n.frames, t((w) => {
+            const y = [...w], u = Math.min(i, 10);
+            for (let f = 0; f < u; f++)
+              y.push(g);
+            return y.length > U ? y.slice(-U) : y;
+          });
+        }
+      }
+    };
+    o.current = window.setInterval(a, 16);
+    const d = k.subscribe((l) => {
+      !l && n && n.frames > 0 && a();
+    });
+    return () => {
+      o.current !== null && clearInterval(o.current), d();
+    };
+  }, [n]), e;
+}
+function ue() {
+  const [n, e] = B(null), t = I(null);
+  return A(() => {
+    const r = () => {
+      if (!k.getPaused()) {
+        const a = H.getLastBreakdown();
+        a && e(a);
+      }
+    };
+    r(), t.current = window.setInterval(r, 100);
+    const o = k.subscribe((a) => {
+      a || r();
+    });
+    return () => {
+      t.current !== null && clearInterval(t.current), o();
+    };
+  }, []), n;
+}
+const ke = ({
+  width: n = 600,
+  height: e = 200,
+  showGrid: t = !0,
+  showLabels: r = !0,
+  maxValue: o,
+  minValue: a
+}) => {
+  const d = j(), l = F, g = typeof n == "string" && n.includes("%"), i = g ? "100%" : typeof n == "number" ? n : 600, { normalizedData: w, chartMax: y, chartMin: u } = L(() => {
+    if (d.length === 0)
+      return {
+        normalizedData: [],
+        chartMax: 0,
+        chartMin: 0
+      };
+    const p = o ?? Math.max(...d), T = a ?? Math.min(...d), P = p - T || 1;
+    return {
+      normalizedData: d.map((q) => {
+        const b = (q - T) / P * e;
+        return Math.max(0, Math.min(e, b));
+      }),
+      chartMax: p,
+      chartMin: T
+    };
+  }, [d, o, a, e]);
+  if (d.length === 0)
+    return /* @__PURE__ */ s("div", { style: {
+      width: i,
+      height: e,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: l.colors.textTertiary,
+      fontSize: l.typography.fontSize.sm,
+      border: `1px solid ${l.colors.border}`,
+      borderRadius: l.borderRadius.md
+    }, children: "No frame data available" });
+  const f = g ? 600 : typeof i == "number" ? i : 600, M = f / (d.length - 1 || 1), C = w.map((p, T) => {
+    const P = T * M;
+    return `${T === 0 ? "M" : "L"} ${P} ${e - p}`;
+  }).join(" "), h = `${C} L ${f} ${e} L 0 ${e} Z`, S = e - (16.67 - u) / (y - u || 1) * e;
+  return /* @__PURE__ */ s("div", { style: { position: "relative", width: i }, children: /* @__PURE__ */ c(
+    "svg",
+    {
+      width: g ? "100%" : i,
+      height: e,
+      style: { display: "block" },
+      viewBox: g ? `0 0 600 ${e}` : void 0,
+      preserveAspectRatio: g ? "none" : void 0,
+      children: [
+        t && /* @__PURE__ */ s("g", { opacity: 0.2, children: [0, 0.25, 0.5, 0.75, 1].map((p) => {
+          const T = e * p;
+          return /* @__PURE__ */ s(
+            "line",
+            {
+              x1: 0,
+              y1: T,
+              x2: f,
+              y2: T,
+              stroke: l.colors.border,
+              strokeWidth: 1
+            },
+            p
+          );
+        }) }),
+        S >= 0 && S <= e && /* @__PURE__ */ s(
+          "line",
+          {
+            x1: 0,
+            y1: S,
+            x2: f,
+            y2: S,
+            stroke: l.colors.success,
+            strokeWidth: 2,
+            strokeDasharray: "4 4",
+            opacity: 0.5
+          }
+        ),
+        /* @__PURE__ */ s(
+          "path",
+          {
+            d: h,
+            fill: l.colors.primary,
+            fillOpacity: 0.2
+          }
+        ),
+        /* @__PURE__ */ s(
+          "path",
+          {
+            d: C,
+            fill: "none",
+            stroke: l.colors.primary,
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        w.map((p, T) => {
+          const D = d[T] > 16.67;
+          return /* @__PURE__ */ s(
+            "circle",
+            {
+              cx: T * M,
+              cy: e - p,
+              r: D ? 3 : 2,
+              fill: D ? l.colors.error : l.colors.primary
+            },
+            T
+          );
+        }),
+        r && /* @__PURE__ */ c("g", { children: [
+          /* @__PURE__ */ c(
+            "text",
+            {
+              x: f - 4,
+              y: 12,
+              fill: l.colors.textSecondary,
+              fontSize: l.typography.fontSize.xs,
+              textAnchor: "end",
+              children: [
+                v(y, 2),
+                "ms"
+              ]
+            }
+          ),
+          /* @__PURE__ */ c(
+            "text",
+            {
+              x: f - 4,
+              y: e - 4,
+              fill: l.colors.textSecondary,
+              fontSize: l.typography.fontSize.xs,
+              textAnchor: "end",
+              children: [
+                v(u, 2),
+                "ms"
+              ]
+            }
+          ),
+          S >= 0 && S <= e && /* @__PURE__ */ s(
+            "text",
+            {
+              x: 4,
+              y: S - 4,
+              fill: l.colors.success,
+              fontSize: l.typography.fontSize.xs,
+              fontWeight: 600,
+              children: "60 FPS"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}, $e = ({
+  width: n = 800,
+  height: e = 300,
+  timeWindow: t = 10
+  // 10 seconds
+}) => {
+  const r = j(), o = F, a = typeof n == "string" && n.includes("%"), d = a ? "100%" : typeof n == "number" ? n : 800, l = L(() => {
+    const S = performance.now(), z = r.slice(-Math.floor(t * 60));
+    return z.map((T, P) => ({
+      timestamp: S - (z.length - P) * 16.666666666666668,
+      frameTime: T,
+      fps: T > 0 ? 1e3 / T : 0
+    }));
+  }, [r, t]);
+  if (l.length === 0)
+    return /* @__PURE__ */ s("div", { style: {
+      width: d,
+      height: e,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: o.colors.textTertiary,
+      fontSize: o.typography.fontSize.sm,
+      border: `1px solid ${o.colors.border}`,
+      borderRadius: o.borderRadius.md,
+      backgroundColor: o.colors.surface
+    }, children: "No timeline data available" });
+  const g = Math.max(...l.map((S) => S.frameTime), 50), i = Math.min(...l.map((S) => S.frameTime), 0), w = Math.max(...l.map((S) => S.fps), 60), y = Math.min(...l.map((S) => S.fps), 0), u = e / 2, f = a ? 800 : typeof d == "number" ? d : 800, M = f / (l.length - 1 || 1), C = l.map((S, z) => {
+    const p = u - (S.frameTime - i) / (g - i || 1) * u, T = z * M;
+    return `${z === 0 ? "M" : "L"} ${T} ${p}`;
+  }).join(" "), h = l.map((S, z) => {
+    const p = u - (S.fps - y) / (w - y || 1) * u, T = z * M;
+    return `${z === 0 ? "M" : "L"} ${T} ${p + u}`;
+  }).join(" "), m = a ? "100%" : d;
+  return /* @__PURE__ */ c("div", { style: {
+    width: d,
+    height: e,
+    backgroundColor: "transparent",
+    borderRadius: o.borderRadius.md
+  }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      fontSize: o.typography.fontSize.sm,
+      fontWeight: 600,
+      color: o.colors.text,
+      marginBottom: o.spacing.sm
+    }, children: [
+      "Timeline (",
+      t,
+      "s window)"
+    ] }),
+    /* @__PURE__ */ s("div", { style: {
+      width: "100%",
+      height: e,
+      position: "relative",
+      overflow: "hidden"
+    }, children: /* @__PURE__ */ c("svg", { width: m, height: e, style: { display: "block" }, viewBox: a ? `0 0 800 ${e}` : void 0, preserveAspectRatio: a ? "none" : void 0, children: [
+      /* @__PURE__ */ s("g", { opacity: 0.1, children: [0, 0.25, 0.5, 0.75, 1].map((S) => {
+        const z = e * S;
+        return /* @__PURE__ */ s(
+          "line",
+          {
+            x1: 0,
+            y1: z,
+            x2: f,
+            y2: z,
+            stroke: o.colors.border,
+            strokeWidth: 1
+          },
+          S
+        );
+      }) }),
+      /* @__PURE__ */ s(
+        "line",
+        {
+          x1: 0,
+          y1: u,
+          x2: f,
+          y2: u,
+          stroke: o.colors.border,
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ c("g", { children: [
+        /* @__PURE__ */ s(
+          "text",
+          {
+            x: 4,
+            y: 12,
+            fill: o.colors.textSecondary,
+            fontSize: o.typography.fontSize.xs,
+            fontWeight: 600,
+            children: "Frame Time (ms)"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "path",
+          {
+            d: C,
+            fill: "none",
+            stroke: o.colors.error,
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "line",
+          {
+            x1: 0,
+            y1: u - (16.67 - i) / (g - i || 1) * u,
+            x2: f,
+            y2: u - (16.67 - i) / (g - i || 1) * u,
+            stroke: o.colors.success,
+            strokeWidth: 1,
+            strokeDasharray: "2 2",
+            opacity: 0.5
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c("g", { children: [
+        /* @__PURE__ */ s(
+          "text",
+          {
+            x: 4,
+            y: u + 12,
+            fill: o.colors.textSecondary,
+            fontSize: o.typography.fontSize.xs,
+            fontWeight: 600,
+            children: "FPS"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "path",
+          {
+            d: h,
+            fill: "none",
+            stroke: o.colors.success,
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "line",
+          {
+            x1: 0,
+            y1: u + u - (60 - y) / (w - y || 1) * u,
+            x2: f,
+            y2: u + u - (60 - y) / (w - y || 1) * u,
+            stroke: o.colors.success,
+            strokeWidth: 1,
+            strokeDasharray: "2 2",
+            opacity: 0.5
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c("g", { children: [
+        /* @__PURE__ */ c(
+          "text",
+          {
+            x: f - 4,
+            y: 12,
+            fill: o.colors.textTertiary,
+            fontSize: o.typography.fontSize.xs,
+            textAnchor: "end",
+            children: [
+              v(g, 1),
+              "ms"
+            ]
+          }
+        ),
+        /* @__PURE__ */ c(
+          "text",
+          {
+            x: f - 4,
+            y: u - 4,
+            fill: o.colors.textTertiary,
+            fontSize: o.typography.fontSize.xs,
+            textAnchor: "end",
+            children: [
+              v(i, 1),
+              "ms"
+            ]
+          }
+        ),
+        /* @__PURE__ */ c(
+          "text",
+          {
+            x: f - 4,
+            y: u + 12,
+            fill: o.colors.textTertiary,
+            fontSize: o.typography.fontSize.xs,
+            textAnchor: "end",
+            children: [
+              v(w, 0),
+              " FPS"
+            ]
+          }
+        ),
+        /* @__PURE__ */ c(
+          "text",
+          {
+            x: f - 4,
+            y: e - 4,
+            fill: o.colors.textTertiary,
+            fontSize: o.typography.fontSize.xs,
+            textAnchor: "end",
+            children: [
+              v(y, 0),
+              " FPS"
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+function Be() {
+  const [n, e] = B([]);
+  return A(() => {
+    const t = () => {
+      if (!k.getPaused()) {
+        const a = Y.getStats();
+        a && e((d) => [...d, { ...a, time: Date.now() }].slice(-120));
+      }
+    };
+    t();
+    const r = setInterval(t, 1e3), o = k.subscribe((a) => {
+      a || t();
+    });
+    return () => {
+      clearInterval(r), o();
+    };
+  }, []), n;
+}
+const Fe = ({
+  width: n = "100%",
+  height: e = 200,
+  showGrid: t = !0,
+  showLabels: r = !0,
+  timeWindow: o = 60,
+  // 60 seconds default
+  metric: a = "both"
+}) => {
+  const d = Be(), l = F, g = L(() => {
+    const h = Date.now() - o * 1e3, m = d.filter((D) => D.time >= h);
+    if (m.length === 0)
+      return {
+        jsHeapData: [],
+        gpuMemoryData: [],
+        maxValue: 0,
+        minValue: 0
+      };
+    const S = m.map((D) => D.jsHeap.used), z = m.map((D) => D.gpuMemory.total), p = [...S, ...z].filter((D) => D > 0), T = p.length > 0 ? Math.max(...p) : 0, P = p.length > 0 ? Math.min(...p) : 0;
+    return {
+      jsHeapData: S,
+      gpuMemoryData: z,
+      maxValue: T || 1,
+      minValue: P
+    };
+  }, [d, o]);
+  if (g.jsHeapData.length === 0 && g.gpuMemoryData.length === 0)
+    return /* @__PURE__ */ s("div", { style: {
+      width: n,
+      height: e,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: l.colors.textTertiary,
+      fontSize: l.typography.fontSize.sm,
+      border: `1px solid ${l.colors.border}`,
+      borderRadius: l.borderRadius.md,
+      backgroundColor: l.colors.surface
+    }, children: "No memory data available" });
+  const i = 800, w = i / (Math.max(g.jsHeapData.length, g.gpuMemoryData.length) - 1 || 1), y = g.maxValue - g.minValue || 1, u = g.jsHeapData.map((C, h) => {
+    const m = e - (C - g.minValue) / y * e, S = h * w;
+    return `${h === 0 ? "M" : "L"} ${S} ${m}`;
+  }).join(" "), f = g.gpuMemoryData.map((C, h) => {
+    const m = e - (C - g.minValue) / y * e, S = h * w;
+    return `${h === 0 ? "M" : "L"} ${S} ${m}`;
+  }).join(" "), M = (C) => C < 1024 ? `${v(C, 0)} B` : C < 1024 * 1024 ? `${v(C / 1024, 1)} KB` : C < 1024 * 1024 * 1024 ? `${v(C / (1024 * 1024), 1)} MB` : `${v(C / (1024 * 1024 * 1024), 2)} GB`;
+  return /* @__PURE__ */ s("div", { style: { position: "relative", width: n, height: e }, children: /* @__PURE__ */ c("svg", { width: "100%", height: e, viewBox: `0 0 ${i} ${e}`, preserveAspectRatio: "none", style: { display: "block" }, children: [
+    t && /* @__PURE__ */ s("g", { opacity: 0.2, children: [0, 0.25, 0.5, 0.75, 1].map((C) => {
+      const h = e * C;
+      return /* @__PURE__ */ s(
+        "line",
+        {
+          x1: 0,
+          y1: h,
+          x2: i,
+          y2: h,
+          stroke: l.colors.border,
+          strokeWidth: 1
+        },
+        C
+      );
+    }) }),
+    a === "jsHeap" || a === "both" ? /* @__PURE__ */ c(N, { children: [
+      /* @__PURE__ */ s(
+        "path",
+        {
+          d: `${u} L ${i} ${e} L 0 ${e} Z`,
+          fill: l.colors.primary,
+          fillOpacity: 0.1
+        }
+      ),
+      /* @__PURE__ */ s(
+        "path",
+        {
+          d: u,
+          fill: "none",
+          stroke: l.colors.primary,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ] }) : null,
+    a === "gpuMemory" || a === "both" ? /* @__PURE__ */ c(N, { children: [
+      /* @__PURE__ */ s(
+        "path",
+        {
+          d: `${f} L ${i} ${e} L 0 ${e} Z`,
+          fill: l.colors.accent,
+          fillOpacity: 0.1
+        }
+      ),
+      /* @__PURE__ */ s(
+        "path",
+        {
+          d: f,
+          fill: "none",
+          stroke: l.colors.accent,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ] }) : null,
+    r && /* @__PURE__ */ c("g", { children: [
+      /* @__PURE__ */ s(
+        "text",
+        {
+          x: i - 4,
+          y: 12,
+          fill: l.colors.textSecondary,
+          fontSize: l.typography.fontSize.xs,
+          textAnchor: "end",
+          children: M(g.maxValue)
+        }
+      ),
+      /* @__PURE__ */ s(
+        "text",
+        {
+          x: i - 4,
+          y: e - 4,
+          fill: l.colors.textSecondary,
+          fontSize: l.typography.fontSize.xs,
+          textAnchor: "end",
+          children: M(g.minValue)
+        }
+      ),
+      a === "both" && /* @__PURE__ */ c(N, { children: [
+        /* @__PURE__ */ s(
+          "text",
+          {
+            x: 4,
+            y: 12,
+            fill: l.colors.primary,
+            fontSize: l.typography.fontSize.xs,
+            children: "JS Heap"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "text",
+          {
+            x: 4,
+            y: e - 4,
+            fill: l.colors.accent,
+            fontSize: l.typography.fontSize.xs,
+            children: "GPU Memory"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}, De = () => {
+  const n = J(), e = j(), t = ue(), r = F, o = L(() => !n || !n.entries ? [] : [...n.entries].sort((y, u) => u.total - y.total), [n]), a = L(() => t ? t.interval || t.total : !n || n.totalTime || n.frames === 0 ? 0 : n.totalTime / n.frames, [t, n]), d = L(() => t ? t.total : !n || n.frames === 0 ? 0 : n.totalTime / n.frames, [t, n]), l = L(() => a > 0 ? 1e3 / a : 0, [a]), g = L(() => d <= 16.67 ? "good" : d <= 33.33 ? "warning" : "error", [d]), i = L(() => e.length > 0 ? e : d > 0 ? [d] : [], [e, d]), w = L(() => i.length === 0 ? 33 : Math.max(...i, 20), [i]);
+  return !n || n.entries.length === 0 ? /* @__PURE__ */ s("div", { style: {
+    padding: r.spacing.lg,
+    textAlign: "center",
+    color: r.colors.textSecondary,
+    fontSize: r.typography.fontSize.sm
+  }, children: "Aucune donnée profilée pour le moment." }) : /* @__PURE__ */ c("div", { style: { padding: r.spacing.md }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+      gap: r.spacing.md,
+      marginBottom: r.spacing.lg
+    }, children: [
+      /* @__PURE__ */ s(
+        x,
+        {
+          label: "FPS",
+          value: v(l, 1),
+          status: l >= 60 ? "good" : l >= 30 ? "warning" : "error"
+        }
+      ),
+      /* @__PURE__ */ s(
+        x,
+        {
+          label: "Frame Time",
+          value: v(d, 2),
+          unit: "ms",
+          status: g
+        }
+      ),
+      /* @__PURE__ */ s(
+        x,
+        {
+          label: "Total Time",
+          value: v(n.totalTime, 2),
+          unit: "ms"
+        }
+      ),
+      /* @__PURE__ */ s(
+        x,
+        {
+          label: "Frames",
+          value: n.frames
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: r.colors.surface,
+      borderRadius: r.borderRadius.md,
+      padding: r.spacing.md,
+      marginBottom: r.spacing.lg,
+      border: `1px solid ${r.colors.border}`,
+      overflow: "hidden"
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: r.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s("div", { style: {
+          fontSize: r.typography.fontSize.sm,
+          fontWeight: 600,
+          color: r.colors.text
+        }, children: "Frame Time History" }),
+        /* @__PURE__ */ c("div", { style: {
+          fontSize: r.typography.fontSize.xs,
+          color: r.colors.textSecondary,
+          fontFamily: r.typography.fontFamilyMono
+        }, children: [
+          i.length,
+          " frames"
+        ] })
+      ] }),
+      /* @__PURE__ */ s(
+        ke,
+        {
+          width: "100%",
+          height: 100,
+          showGrid: !0,
+          showLabels: !0,
+          maxValue: w
+        }
+      ),
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        justifyContent: "space-between",
+        marginTop: r.spacing.xs,
+        fontSize: r.typography.fontSize.xs,
+        color: r.colors.textTertiary
+      }, children: [
+        /* @__PURE__ */ s("div", { children: "Target: <16.67ms (60 FPS)" }),
+        /* @__PURE__ */ c("div", { style: {
+          color: ie(d, { good: 16.67, warning: 33.33 })
+        }, children: [
+          "Current: ",
+          v(d, 2),
+          "ms (work)"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ s("div", { style: {
+      backgroundColor: r.colors.surface,
+      borderRadius: r.borderRadius.md,
+      padding: r.spacing.md,
+      marginBottom: r.spacing.lg,
+      border: `1px solid ${r.colors.border}`,
+      overflow: "hidden"
+    }, children: /* @__PURE__ */ s($e, { width: "100%", height: 200, timeWindow: 10 }) }),
+    /* @__PURE__ */ s("div", { style: {
+      backgroundColor: r.colors.surface,
+      borderRadius: r.borderRadius.md,
+      border: `1px solid ${r.colors.border}`,
+      overflow: "hidden"
+    }, children: /* @__PURE__ */ c("table", { style: {
+      width: "100%",
+      borderCollapse: "collapse"
+    }, children: [
+      /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", { style: {
+        backgroundColor: r.colors.surfaceElevated,
+        borderBottom: `1px solid ${r.colors.border}`
+      }, children: [
+        /* @__PURE__ */ s("th", { style: {
+          textAlign: "left",
+          padding: r.spacing.md,
+          color: r.colors.textSecondary,
+          fontSize: r.typography.fontSize.sm,
+          fontWeight: 600
+        }, children: "Hook" }),
+        /* @__PURE__ */ s("th", { style: {
+          textAlign: "right",
+          padding: r.spacing.md,
+          color: r.colors.textSecondary,
+          fontSize: r.typography.fontSize.sm,
+          fontWeight: 600
+        }, children: "Total (ms)" }),
+        /* @__PURE__ */ s("th", { style: {
+          textAlign: "right",
+          padding: r.spacing.md,
+          color: r.colors.textSecondary,
+          fontSize: r.typography.fontSize.sm,
+          fontWeight: 600
+        }, children: "Avg (ms)" }),
+        /* @__PURE__ */ s("th", { style: {
+          textAlign: "right",
+          padding: r.spacing.md,
+          color: r.colors.textSecondary,
+          fontSize: r.typography.fontSize.sm,
+          fontWeight: 600
+        }, children: "Max (ms)" }),
+        /* @__PURE__ */ s("th", { style: {
+          textAlign: "right",
+          padding: r.spacing.md,
+          color: r.colors.textSecondary,
+          fontSize: r.typography.fontSize.sm,
+          fontWeight: 600
+        }, children: "%" })
+      ] }) }),
+      /* @__PURE__ */ s("tbody", { children: o.map((y, u) => {
+        const f = ie(y.avg, { good: 5, warning: 10 });
+        return /* @__PURE__ */ c(
+          "tr",
+          {
+            style: {
+              borderBottom: u < o.length - 1 ? `1px solid ${r.colors.borderLight}` : "none",
+              transition: r.transitions.fast
+            },
+            onMouseEnter: (M) => {
+              M.currentTarget.style.backgroundColor = r.colors.surfaceElevated;
+            },
+            onMouseLeave: (M) => {
+              M.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: [
+              /* @__PURE__ */ s("td", { style: {
+                padding: r.spacing.md,
+                color: r.colors.text,
+                fontFamily: r.typography.fontFamilyMono,
+                fontSize: r.typography.fontSize.sm
+              }, children: y.name }),
+              /* @__PURE__ */ s("td", { style: {
+                textAlign: "right",
+                padding: r.spacing.md,
+                color: r.colors.text,
+                fontFamily: r.typography.fontFamilyMono,
+                fontSize: r.typography.fontSize.sm
+              }, children: v(y.total, 2) }),
+              /* @__PURE__ */ s("td", { style: {
+                textAlign: "right",
+                padding: r.spacing.md,
+                color: f,
+                fontFamily: r.typography.fontFamilyMono,
+                fontSize: r.typography.fontSize.sm,
+                fontWeight: 600
+              }, children: v(y.avg, 3) }),
+              /* @__PURE__ */ s("td", { style: {
+                textAlign: "right",
+                padding: r.spacing.md,
+                color: r.colors.text,
+                fontFamily: r.typography.fontFamilyMono,
+                fontSize: r.typography.fontSize.sm
+              }, children: v(y.max, 3) }),
+              /* @__PURE__ */ c("td", { style: {
+                textAlign: "right",
+                padding: r.spacing.md,
+                color: r.colors.textSecondary,
+                fontFamily: r.typography.fontFamilyMono,
+                fontSize: r.typography.fontSize.sm
+              }, children: [
+                v(y.percentage, 1),
+                "%"
+              ] })
+            ]
+          },
+          y.name
+        );
+      }) })
+    ] }) })
+  ] });
+};
+function Q() {
+  const [n, e] = B(null), t = I(null);
+  return A(() => {
+    const r = () => {
+      if (!k.getPaused()) {
+        const a = O.getStats();
+        a && e(a);
+      }
+    };
+    r(), t.current = window.setInterval(r, 100);
+    const o = k.subscribe((a) => {
+      a || r();
+    });
+    return () => {
+      t.current !== null && clearInterval(t.current), o();
+    };
+  }, []), n;
+}
+const Le = () => {
+  const n = Q(), e = F, t = L(() => n ? n.drawCalls <= 100 ? "good" : n.drawCalls <= 500 ? "warning" : "error" : "neutral", [n]), r = L(() => n ? n.triangles <= 1e5 ? "good" : n.triangles <= 5e5 ? "warning" : "error" : "neutral", [n]);
+  if (!n)
+    return /* @__PURE__ */ s("div", { style: {
+      padding: e.spacing.lg,
+      textAlign: "center",
+      color: e.colors.textSecondary,
+      fontSize: e.typography.fontSize.sm
+    }, children: "Aucune donnée GPU disponible. Assurez-vous que le composant est à l'intérieur d'un Canvas R3F." });
+  const o = (a) => a === 0 ? "0 B" : a < 1024 ? `${v(a, 0)} B` : a < 1024 * 1024 ? `${v(a / 1024, 2)} KB` : `${v(a / (1024 * 1024), 2)} MB`;
+  return /* @__PURE__ */ c("div", { style: { padding: e.spacing.md }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+      gap: e.spacing.md,
+      marginBottom: e.spacing.lg
+    }, children: [
+      /* @__PURE__ */ s(
+        x,
+        {
+          label: "Draw Calls",
+          value: n.drawCalls.toLocaleString(),
+          status: t
+        }
+      ),
+      /* @__PURE__ */ s(
+        x,
+        {
+          label: "Triangles",
+          value: n.triangles.toLocaleString(),
+          status: r
+        }
+      ),
+      /* @__PURE__ */ s(
+        x,
+        {
+          label: "Points",
+          value: n.points.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ s(
+        x,
+        {
+          label: "Lines",
+          value: n.lines.toLocaleString()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.md,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.md
+      }, children: "GPU Memory" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+        gap: e.spacing.md
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Textures",
+            value: o(n.memory.textures)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Geometries",
+            value: o(n.memory.geometries)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Programs",
+            value: o(n.memory.programs)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Total",
+            value: o(n.memory.total),
+            color: n.memory.total > 100 * 1024 * 1024 ? e.colors.warning : e.colors.success
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.md,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.md
+      }, children: "Resources" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+        gap: e.spacing.md
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Textures",
+            value: n.textures
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Geometries",
+            value: n.geometries
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Programs",
+            value: n.programs
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+function Ae() {
+  const [n, e] = B(null), t = I(null);
+  return A(() => {
+    const r = () => {
+      if (!k.getPaused()) {
+        const a = de.getStats();
+        a && e(a);
+      }
+    };
+    r(), t.current = window.setInterval(r, 500);
+    const o = k.subscribe((a) => {
+      a || r();
+    });
+    return () => {
+      t.current !== null && clearInterval(t.current), o();
+    };
+  }, []), n;
+}
+const He = () => {
+  const n = Ae(), e = F;
+  if (!n)
+    return /* @__PURE__ */ s("div", { style: {
+      padding: e.spacing.lg,
+      textAlign: "center",
+      color: e.colors.textSecondary,
+      fontSize: e.typography.fontSize.sm
+    }, children: "Aucune donnée de scène disponible. Assurez-vous que le composant est à l'intérieur d'un Canvas R3F." });
+  const t = (r) => r < 1024 ? `${v(r, 0)} B` : r < 1024 * 1024 ? `${v(r / 1024, 2)} KB` : `${v(r / (1024 * 1024), 2)} MB`;
+  return /* @__PURE__ */ c("div", { style: { padding: e.spacing.md }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.md,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.md
+      }, children: "Objects" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+        gap: e.spacing.md
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Total",
+            value: n.objects.total.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Meshes",
+            value: n.objects.meshes.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Lights",
+            value: n.objects.lights.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Cameras",
+            value: n.objects.cameras.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Groups",
+            value: n.objects.groups.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Visible",
+            value: n.visible.total.toLocaleString(),
+            color: n.visible.total === n.objects.total ? e.colors.success : e.colors.warning
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        fontSize: e.typography.fontSize.md,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.md
+      }, children: [
+        "Materials (",
+        n.materials.total,
+        ")"
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: e.spacing.sm
+      }, children: Object.entries(n.materials.byType).map(([r, o]) => /* @__PURE__ */ c(
+        "div",
+        {
+          style: {
+            backgroundColor: e.colors.surfaceElevated,
+            padding: `${e.spacing.xs} ${e.spacing.sm}`,
+            borderRadius: e.borderRadius.sm,
+            fontSize: e.typography.fontSize.xs,
+            color: e.colors.textSecondary,
+            fontFamily: e.typography.fontFamilyMono
+          },
+          children: [
+            r,
+            ": ",
+            o
+          ]
+        },
+        r
+      )) })
+    ] }),
+    n.textures.total > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.md,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.md
+      }, children: "Textures" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+        gap: e.spacing.md
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Total",
+            value: n.textures.total.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Total Size",
+            value: t(n.textures.totalSize)
+          }
+        ),
+        n.textures.environment > 0 && /* @__PURE__ */ s(
+          x,
+          {
+            label: "Environment",
+            value: n.textures.environment.toLocaleString(),
+            color: e.colors.info
+          }
+        ),
+        n.textures.system > 0 && /* @__PURE__ */ s(
+          x,
+          {
+            label: "System",
+            value: n.textures.system.toLocaleString(),
+            color: e.colors.warning
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.md,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.md
+      }, children: "Geometries" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+        gap: e.spacing.md
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Total",
+            value: n.geometries.total.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Vertices",
+            value: n.geometries.vertices.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Faces",
+            value: n.geometries.faces.toLocaleString()
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.md,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.md
+      }, children: "Complexity" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+        gap: e.spacing.md
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Avg Vertices/Mesh",
+            value: v(n.complexity.averageVerticesPerMesh, 0)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Avg Faces/Mesh",
+            value: v(n.complexity.averageFacesPerMesh, 0)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Est. Draw Calls",
+            value: n.complexity.totalDrawCalls.toLocaleString()
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+function ee() {
+  const [n, e] = B(null), t = I(null);
+  return A(() => {
+    const r = () => {
+      if (!k.getPaused()) {
+        const a = Y.getStats();
+        a && e(a);
+      }
+    };
+    r(), t.current = window.setInterval(r, 1e3);
+    const o = k.subscribe((a) => {
+      a || r();
+    });
+    return () => {
+      t.current !== null && clearInterval(t.current), o();
+    };
+  }, []), n;
+}
+const Ee = () => {
+  const n = ee(), e = F, t = (a) => a === 0 ? "0 B" : a < 1024 ? `${v(a, 0)} B` : a < 1024 * 1024 ? `${v(a / 1024, 2)} KB` : a < 1024 * 1024 * 1024 ? `${v(a / (1024 * 1024), 2)} MB` : `${v(a / (1024 * 1024 * 1024), 2)} GB`, r = L(() => {
+    if (!n) return "neutral";
+    const a = n.jsHeap.percentage;
+    return a < 50 ? "good" : a < 80 ? "warning" : "error";
+  }, [n]), o = L(() => n ? n.leaks.detected ? "error" : "good" : "neutral", [n]);
+  return n ? /* @__PURE__ */ c("div", { style: { padding: e.spacing.md }, children: [
+    n.jsHeap.limit > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "JavaScript Heap Memory" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+        gap: e.spacing.md,
+        marginBottom: e.spacing.md
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Used",
+            value: t(n.jsHeap.used),
+            status: r
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Total",
+            value: t(n.jsHeap.total)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Limit",
+            value: t(n.jsHeap.limit)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Usage",
+            value: `${v(n.jsHeap.percentage, 1)}%`,
+            status: r
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        width: "100%",
+        height: "8px",
+        backgroundColor: e.colors.border,
+        borderRadius: e.borderRadius.sm,
+        overflow: "hidden",
+        marginTop: e.spacing.sm
+      }, children: /* @__PURE__ */ s("div", { style: {
+        width: `${Math.min(100, n.jsHeap.percentage)}%`,
+        height: "100%",
+        backgroundColor: n.jsHeap.percentage <= 50 ? e.colors.success : n.jsHeap.percentage <= 80 ? e.colors.warning : e.colors.error,
+        transition: e.transitions.normal
+      } }) })
+    ] }),
+    n.gpuMemory.total > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "GPU Memory (Estimated)" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+        gap: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Textures",
+            value: t(n.gpuMemory.textures)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Geometries",
+            value: t(n.gpuMemory.geometries)
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Total",
+            value: t(n.gpuMemory.total)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.xs,
+        color: e.colors.textTertiary,
+        marginTop: e.spacing.sm
+      }, children: "Note: GPU memory is an estimation based on resource counts. Actual usage may vary." })
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`,
+      overflow: "hidden"
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "Memory Evolution (Last 60s)" }),
+      /* @__PURE__ */ s(
+        Fe,
+        {
+          width: "100%",
+          height: 150,
+          timeWindow: 60,
+          metric: "both",
+          showGrid: !0,
+          showLabels: !0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "Memory Leak Detection" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: e.spacing.sm,
+        marginBottom: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s("div", { style: {
+          width: "12px",
+          height: "12px",
+          borderRadius: "50%",
+          backgroundColor: o === "good" ? e.colors.success : e.colors.error
+        } }),
+        /* @__PURE__ */ s("div", { style: {
+          color: e.colors.text,
+          fontSize: e.typography.fontSize.sm
+        }, children: n.leaks.detected ? "Potential leak detected" : "No leaks detected" })
+      ] }),
+      /* @__PURE__ */ c("div", { style: {
+        fontSize: e.typography.fontSize.xs,
+        color: e.colors.textSecondary,
+        fontFamily: e.typography.fontFamilyMono
+      }, children: [
+        /* @__PURE__ */ c("div", { children: [
+          "Growth Rate: ",
+          t(Math.abs(n.leaks.growthRate)),
+          "/s"
+        ] }),
+        /* @__PURE__ */ c("div", { children: [
+          "Trend: ",
+          n.leaks.trend
+        ] })
+      ] })
+    ] })
+  ] }) : /* @__PURE__ */ s("div", { style: {
+    padding: e.spacing.lg,
+    textAlign: "center",
+    color: e.colors.textSecondary,
+    fontSize: e.typography.fontSize.sm
+  }, children: "Aucune donnée de mémoire disponible. Les stats de mémoire JS nécessitent Chrome." });
+}, We = () => {
+  const n = ue(), e = F, t = (l) => l < 0.1 ? `${v(l * 1e3, 0)} μs` : l < 1 ? `${v(l, 2)} ms` : `${v(l, 2)} ms`, r = (l, g) => g === 0 ? "0%" : `${v(l / g * 100, 1)}%`, o = L(() => n ? n.total <= 16.67 ? "good" : n.total <= 33.33 ? "warning" : "error" : "neutral", [n]);
+  if (!n)
+    return /* @__PURE__ */ s("div", { style: {
+      padding: e.spacing.lg,
+      textAlign: "center",
+      color: e.colors.textSecondary,
+      fontSize: e.typography.fontSize.sm
+    }, children: "Aucune donnée de breakdown de frame disponible. Le frame breakdown nécessite une instrumentation du code." });
+  const a = [
+    { name: "React", value: n.phases.react, color: e.colors.primary },
+    { name: "Update", value: n.phases.update, color: e.colors.info },
+    { name: "Physics", value: n.phases.physics, color: e.colors.warning },
+    { name: "Render", value: n.phases.render, color: e.colors.success },
+    { name: "Post-Process", value: n.phases.postProcess, color: e.colors.accent },
+    { name: "Other", value: n.phases.other, color: e.colors.textSecondary }
+  ].filter((l) => l.value > 0), d = Math.max(...a.map((l) => l.value), n.total);
+  return /* @__PURE__ */ c("div", { style: { padding: e.spacing.md }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "Total Frame Time" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        alignItems: "baseline",
+        gap: e.spacing.sm,
+        marginBottom: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Frame Time",
+            value: t(n.total),
+            status: o
+          }
+        ),
+        /* @__PURE__ */ c("div", { style: {
+          fontSize: e.typography.fontSize.xs,
+          color: e.colors.textSecondary
+        }, children: [
+          "(",
+          v(1e3 / n.total, 1),
+          " FPS)"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "Phase Breakdown" }),
+      /* @__PURE__ */ s("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+        gap: e.spacing.sm,
+        marginBottom: e.spacing.md
+      }, children: a.map((l) => /* @__PURE__ */ s(
+        x,
+        {
+          label: l.name,
+          value: t(l.value)
+        },
+        l.name
+      )) }),
+      /* @__PURE__ */ c("div", { style: {
+        marginTop: e.spacing.md
+      }, children: [
+        /* @__PURE__ */ s("div", { style: {
+          fontSize: e.typography.fontSize.xs,
+          color: e.colors.textSecondary,
+          marginBottom: e.spacing.sm
+        }, children: "Timeline (Waterfall)" }),
+        /* @__PURE__ */ s("div", { style: {
+          position: "relative",
+          height: "200px",
+          backgroundColor: e.colors.background,
+          borderRadius: e.borderRadius.sm,
+          border: `1px solid ${e.colors.border}`,
+          padding: e.spacing.xs
+        }, children: a.map((l, g) => {
+          const i = l.value / d * 100, w = a.slice(0, g).reduce((y, u) => y + u.value / d * 100, 0);
+          return /* @__PURE__ */ s(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${w}%`,
+                width: `${i}%`,
+                height: "30px",
+                backgroundColor: l.color,
+                borderRadius: e.borderRadius.sm,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: e.typography.fontSize.xs,
+                color: e.colors.background,
+                fontWeight: 600,
+                marginTop: `${g * 35}px`,
+                opacity: 0.8,
+                border: `1px solid ${e.colors.border}`
+              },
+              title: `${l.name}: ${t(l.value)} (${r(l.value, n.total)})`,
+              children: i > 5 && `${l.name}: ${t(l.value)}`
+            },
+            l.name
+          );
+        }) })
+      ] })
+    ] }),
+    n.timeline.length > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "Timeline Details" }),
+      /* @__PURE__ */ s("div", { style: {
+        maxHeight: "200px",
+        overflowY: "auto",
+        fontSize: e.typography.fontSize.xs,
+        fontFamily: e.typography.fontFamilyMono,
+        color: e.colors.textSecondary
+      }, children: n.timeline.slice(-20).reverse().map((l, g) => /* @__PURE__ */ c(
+        "div",
+        {
+          style: {
+            padding: e.spacing.xs,
+            borderBottom: `1px solid ${e.colors.border}`,
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ s("span", { children: l.name }),
+            /* @__PURE__ */ s("span", { children: t(l.duration) })
+          ]
+        },
+        g
+      )) })
+    ] })
+  ] });
+};
+class Ie {
+  budget = null;
+  violations = [];
+  maxHistorySize = 100;
+  listeners = /* @__PURE__ */ new Set();
+  STORAGE_KEY = "r3f-profiler-budget";
+  constructor() {
+    this.loadBudget();
+  }
+  loadBudget() {
+    try {
+      const e = localStorage.getItem(this.STORAGE_KEY);
+      if (e) {
+        const t = JSON.parse(e);
+        this.isValidBudget(t) && (this.budget = t);
+      }
+    } catch (e) {
+      console.warn("Failed to load saved budget from localStorage:", e);
+    }
+  }
+  saveBudget() {
+    try {
+      this.budget ? localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.budget)) : localStorage.removeItem(this.STORAGE_KEY);
+    } catch (e) {
+      console.warn("Failed to save budget to localStorage:", e);
+    }
+  }
+  isValidBudget(e) {
+    return !e || typeof e != "object" ? !1 : e.fps && typeof e.fps.min == "number" || e.frameTime && typeof e.frameTime.max == "number" || e.memory && (typeof e.memory.max == "number" || e.memory.jsHeap) || e.gpu && (e.gpu.drawCalls || e.gpu.triangles);
+  }
+  setBudget(e) {
+    !e || !e.fps && !e.frameTime && !e.memory && !e.gpu ? this.budget = null : this.budget = e, this.violations = [], this.saveBudget(), this.notifyListeners();
+  }
+  getBudget() {
+    return this.budget;
+  }
+  checkBudget(e) {
+    if (!this.budget)
+      return [];
+    const t = [];
+    return this.budget.fps?.min !== void 0 && e.fps !== void 0 && e.fps < this.budget.fps.min && t.push({
+      id: `fps-${Date.now()}-${Math.random()}`,
+      metric: "fps",
+      current: e.fps,
+      budget: this.budget.fps.min,
+      severity: e.fps < this.budget.fps.min * 0.7 ? "error" : "warning",
+      timestamp: performance.now(),
+      message: `FPS is ${e.fps.toFixed(1)} (budget: ${this.budget.fps.min} FPS)`
+    }), this.budget.frameTime?.max !== void 0 && e.frameTime !== void 0 && e.frameTime > this.budget.frameTime.max && t.push({
+      id: `frameTime-${Date.now()}-${Math.random()}`,
+      metric: "frameTime",
+      current: e.frameTime,
+      budget: this.budget.frameTime.max,
+      severity: e.frameTime > this.budget.frameTime.max * 1.5 ? "error" : "warning",
+      timestamp: performance.now(),
+      message: `Frame time is ${e.frameTime.toFixed(2)}ms (budget: ${this.budget.frameTime.max}ms)`
+    }), this.budget.memory && (this.budget.memory.max !== void 0 && e.memory?.used !== void 0 && e.memory.used > this.budget.memory.max && t.push({
+      id: `memory-${Date.now()}-${Math.random()}`,
+      metric: "memory",
+      current: e.memory.used,
+      budget: this.budget.memory.max,
+      severity: e.memory.used > this.budget.memory.max * 1.2 ? "error" : "warning",
+      timestamp: performance.now(),
+      message: `Memory usage is ${(e.memory.used / (1024 * 1024)).toFixed(2)}MB (budget: ${(this.budget.memory.max / (1024 * 1024)).toFixed(2)}MB)`
+    }), this.budget.memory.jsHeap?.maxPercentage !== void 0 && e.memory?.jsHeapPercentage !== void 0 && e.memory.jsHeapPercentage > this.budget.memory.jsHeap.maxPercentage && t.push({
+      id: `jsHeap-${Date.now()}-${Math.random()}`,
+      metric: "jsHeap",
+      current: e.memory.jsHeapPercentage,
+      budget: this.budget.memory.jsHeap.maxPercentage,
+      severity: e.memory.jsHeapPercentage > this.budget.memory.jsHeap.maxPercentage * 1.1 ? "error" : "warning",
+      timestamp: performance.now(),
+      message: `JS Heap usage is ${e.memory.jsHeapPercentage.toFixed(1)}% (budget: ${this.budget.memory.jsHeap.maxPercentage}%)`
+    })), this.budget.gpu && (this.budget.gpu.drawCalls?.max !== void 0 && e.gpu?.drawCalls !== void 0 && e.gpu.drawCalls > this.budget.gpu.drawCalls.max && t.push({
+      id: `drawCalls-${Date.now()}-${Math.random()}`,
+      metric: "drawCalls",
+      current: e.gpu.drawCalls,
+      budget: this.budget.gpu.drawCalls.max,
+      severity: e.gpu.drawCalls > this.budget.gpu.drawCalls.max * 1.5 ? "error" : "warning",
+      timestamp: performance.now(),
+      message: `Draw calls: ${e.gpu.drawCalls} (budget: ${this.budget.gpu.drawCalls.max})`
+    }), this.budget.gpu.triangles?.max !== void 0 && e.gpu?.triangles !== void 0 && e.gpu.triangles > this.budget.gpu.triangles.max && t.push({
+      id: `triangles-${Date.now()}-${Math.random()}`,
+      metric: "triangles",
+      current: e.gpu.triangles,
+      budget: this.budget.gpu.triangles.max,
+      severity: e.gpu.triangles > this.budget.gpu.triangles.max * 1.5 ? "error" : "warning",
+      timestamp: performance.now(),
+      message: `Triangles: ${e.gpu.triangles.toLocaleString()} (budget: ${this.budget.gpu.triangles.max.toLocaleString()})`
+    })), t.length > 0 && (this.violations.push(...t), this.violations.length > this.maxHistorySize && (this.violations = this.violations.slice(-this.maxHistorySize)), this.notifyListeners()), t;
+  }
+  getViolations() {
+    return [...this.violations];
+  }
+  getRecentViolations(e = 60) {
+    const t = performance.now() - e * 1e3;
+    return this.violations.filter((r) => r.timestamp >= t);
+  }
+  getViolationsByMetric(e) {
+    return this.violations.filter((t) => t.metric === e);
+  }
+  clearViolations() {
+    this.violations = [], this.notifyListeners();
+  }
+  // Get default budget recommendations based on current metrics
+  getRecommendedBudget(e) {
+    const t = {};
+    return e.fps !== void 0 && (t.fps = {
+      min: Math.max(30, Math.floor(e.fps * 0.9))
+    }), e.frameTime !== void 0 && (t.frameTime = {
+      max: Math.ceil(e.frameTime * 1.1)
+    }), e.memory?.used !== void 0 && (t.memory = {
+      max: Math.ceil(e.memory.used * 1.2),
+      jsHeap: {
+        maxPercentage: 80
+        // Default 80% of heap limit
+      }
+    }), e.gpu && (t.gpu = {}, e.gpu.drawCalls !== void 0 && (t.gpu.drawCalls = {
+      max: Math.ceil(e.gpu.drawCalls * 1.2)
+    }), e.gpu.triangles !== void 0 && (t.gpu.triangles = {
+      max: Math.ceil(e.gpu.triangles * 1.2)
+    })), t;
+  }
+  // Subscribe to violation changes
+  subscribe(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  notifyListeners() {
+    const e = this.getRecentViolations(60);
+    this.listeners.forEach((t) => {
+      try {
+        t(e);
+      } catch (r) {
+        console.error("Error in budget violation listener:", r);
+      }
+    });
+  }
+  reset() {
+    this.budget = null, this.violations = [], this.listeners.clear(), localStorage.removeItem(this.STORAGE_KEY);
+  }
+}
+const W = new Ie();
+function Ge() {
+  const [n, e] = B(null), [t, r] = B([]);
+  return A(() => {
+    e(W.getBudget()), r(W.getRecentViolations(60));
+    const g = W.subscribe((i) => {
+      r(i), e(W.getBudget());
+    });
+    return () => {
+      g();
+    };
+  }, []), {
+    budget: n,
+    violations: t,
+    setBudget: (g) => {
+      W.setBudget(g), e(g), r([]);
+    },
+    clearViolations: () => {
+      W.clearViolations(), r([]);
+    },
+    clearBudget: () => {
+      W.setBudget({}), e(null), r([]);
+    },
+    getRecommendedBudget: (g) => W.getRecommendedBudget(g)
+  };
+}
+class Ve {
+  alerts = [];
+  maxAlerts = 50;
+  listeners = /* @__PURE__ */ new Set();
+  soundEnabled = !1;
+  // Create alert from budget violation
+  createFromViolation(e) {
+    return {
+      id: `alert-${e.id}`,
+      type: "budget",
+      severity: e.severity,
+      title: `Budget Violation: ${e.metric}`,
+      message: e.message,
+      timestamp: e.timestamp,
+      dismissed: !1,
+      data: {
+        violation: e
+      }
+    };
+  }
+  // Create custom alert
+  createAlert(e, t, r, o, a) {
+    const d = {
+      id: `alert-${Date.now()}-${Math.random()}`,
+      type: e,
+      severity: t,
+      title: r,
+      message: o,
+      timestamp: performance.now(),
+      dismissed: !1,
+      data: a
+    };
+    return this.addAlert(d), d;
+  }
+  addAlert(e) {
+    if (e.type === "budget" && e.data?.violation) {
+      const t = e.data.violation;
+      this.alerts = this.alerts.filter(
+        (r) => !(r.type === "budget" && r.data?.violation && r.data.violation.metric === t.metric)
+      );
+    }
+    this.alerts.push(e), this.alerts.length > this.maxAlerts && (this.alerts = this.alerts.slice(-this.maxAlerts)), this.soundEnabled && e.severity === "error" && this.playAlertSound(), this.notifyListeners();
+  }
+  getAlerts(e = !1) {
+    return e ? [...this.alerts] : this.alerts.filter((t) => !t.dismissed);
+  }
+  getActiveAlerts() {
+    return this.alerts.filter((e) => !e.dismissed);
+  }
+  getAlertsBySeverity(e) {
+    return this.alerts.filter((t) => !t.dismissed && t.severity === e);
+  }
+  getAlertsByType(e) {
+    return this.alerts.filter((t) => !t.dismissed && t.type === e);
+  }
+  dismissAlert(e) {
+    const t = this.alerts.find((r) => r.id === e);
+    t && (t.dismissed = !0, this.notifyListeners());
+  }
+  dismissAll() {
+    this.alerts.forEach((e) => {
+      e.dismissed = !0;
+    }), this.notifyListeners();
+  }
+  removeAlert(e) {
+    this.alerts = this.alerts.filter((t) => t.id !== e), this.notifyListeners();
+  }
+  clearAlerts() {
+    this.alerts = [], this.notifyListeners();
+  }
+  setSoundEnabled(e) {
+    this.soundEnabled = e;
+  }
+  isSoundEnabled() {
+    return this.soundEnabled;
+  }
+  playAlertSound() {
+    try {
+      const e = new (window.AudioContext || window.webkitAudioContext)(), t = e.createOscillator(), r = e.createGain();
+      t.connect(r), r.connect(e.destination), t.frequency.value = 800, t.type = "sine", r.gain.setValueAtTime(0.3, e.currentTime), r.gain.exponentialRampToValueAtTime(0.01, e.currentTime + 0.1), t.start(e.currentTime), t.stop(e.currentTime + 0.1);
+    } catch (e) {
+      console.debug("Could not play alert sound:", e);
+    }
+  }
+  // Subscribe to alert changes
+  subscribe(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  notifyListeners() {
+    const e = this.getActiveAlerts();
+    this.listeners.forEach((t) => {
+      try {
+        t(e);
+      } catch (r) {
+        console.error("Error in alert listener:", r);
+      }
+    });
+  }
+  reset() {
+    this.alerts = [], this.listeners.clear(), this.soundEnabled = !1;
+  }
+}
+const ae = new Ve();
+function _e() {
+  const n = j(), e = J(), t = Q(), r = ee(), o = I(null);
+  A(() => {
+    const a = () => {
+      if (!W.getBudget())
+        return;
+      let l = 0, g = 0;
+      e && e.totalTime > 0 && e.frames > 0 ? (g = e.totalTime / e.frames, l = 1e3 / g) : n.length > 0 ? (g = n.reduce((y, u) => y + u, 0) / n.length, l = g > 0 ? 1e3 / g : 0) : t && t.frameTime > 0 && (g = t.frameTime, l = g > 0 ? 1e3 / g : 0);
+      const i = {
+        fps: l,
+        frameTime: g,
+        memory: r ? {
+          used: r.jsHeap.used,
+          jsHeapPercentage: r.jsHeap.percentage
+        } : void 0,
+        gpu: t ? {
+          drawCalls: t.drawCalls,
+          triangles: t.triangles
+        } : void 0
+      };
+      W.checkBudget(i).forEach((y) => {
+        ae.getAlerts().find(
+          (f) => f.type === "budget" && f.data?.violation && f.data.violation.id === y.id
+        ) || ae.createFromViolation(y);
+      });
+    };
+    return o.current = window.setInterval(a, 1e3), a(), () => {
+      o.current !== null && clearInterval(o.current);
+    };
+  }, [n, e, t, r]);
+}
+const Oe = () => {
+  const { budget: n, violations: e, setBudget: t, clearViolations: r, clearBudget: o, getRecommendedBudget: a } = Ge(), d = j(), l = Q(), g = ee(), i = F;
+  _e();
+  const [w, y] = B(!1), [u, f] = B(n || {}), M = L(() => {
+    const p = d.length > 0 ? d.reduce((P, D) => P + D, 0) / d.length : 0;
+    return {
+      fps: p > 0 ? 1e3 / p : 0,
+      frameTime: p,
+      memory: g ? {
+        used: g.jsHeap.used,
+        jsHeapPercentage: g.jsHeap.percentage
+      } : void 0,
+      gpu: l ? {
+        drawCalls: l.drawCalls,
+        triangles: l.triangles
+      } : void 0
+    };
+  }, [d, l, g]), C = (p) => p === 0 ? "0 B" : p < 1024 ? `${v(p, 0)} B` : p < 1024 * 1024 ? `${v(p / 1024, 2)} KB` : p < 1024 * 1024 * 1024 ? `${v(p / (1024 * 1024), 2)} MB` : `${v(p / (1024 * 1024 * 1024), 2)} GB`, h = () => {
+    t(u), y(!1);
+  }, m = () => {
+    const p = a(M);
+    f(p), t(p), y(!1);
+  }, S = () => {
+    f(n || {}), y(!1);
+  }, z = L(() => {
+    const p = e.filter((P) => P.severity === "error").length, T = e.filter((P) => P.severity === "warning").length;
+    return { errors: p, warnings: T };
+  }, [e]);
+  return /* @__PURE__ */ c("div", { style: { padding: i.spacing.md }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: i.colors.surface,
+      borderRadius: i.borderRadius.md,
+      padding: i.spacing.md,
+      marginBottom: i.spacing.lg,
+      border: `1px solid ${i.colors.border}`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: i.spacing.md
+      }, children: [
+        /* @__PURE__ */ s("div", { style: {
+          fontSize: i.typography.fontSize.sm,
+          fontWeight: 600,
+          color: i.colors.text
+        }, children: "Budget Status" }),
+        /* @__PURE__ */ c("div", { style: {
+          display: "flex",
+          gap: i.spacing.sm,
+          alignItems: "center"
+        }, children: [
+          z.errors > 0 && /* @__PURE__ */ s(V, { severity: "error", count: z.errors }),
+          z.warnings > 0 && /* @__PURE__ */ s(V, { severity: "warning", count: z.warnings }),
+          !n && /* @__PURE__ */ s("div", { style: {
+            fontSize: i.typography.fontSize.xs,
+            color: i.colors.textSecondary
+          }, children: "No budget configured" })
+        ] })
+      ] }),
+      n ? /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+        gap: i.spacing.sm
+      }, children: [
+        n.fps && /* @__PURE__ */ s(
+          x,
+          {
+            label: "FPS Min",
+            value: n.fps.min,
+            unit: "FPS"
+          }
+        ),
+        n.frameTime && /* @__PURE__ */ s(
+          x,
+          {
+            label: "Frame Time Max",
+            value: `${n.frameTime.max.toFixed(2)}ms`
+          }
+        ),
+        n.memory?.max && /* @__PURE__ */ s(
+          x,
+          {
+            label: "Memory Max",
+            value: C(n.memory.max)
+          }
+        ),
+        n.gpu?.drawCalls?.max && /* @__PURE__ */ s(
+          x,
+          {
+            label: "Draw Calls Max",
+            value: n.gpu.drawCalls.max.toLocaleString()
+          }
+        ),
+        n.gpu?.triangles?.max && /* @__PURE__ */ s(
+          x,
+          {
+            label: "Triangles Max",
+            value: n.gpu.triangles.max.toLocaleString()
+          }
+        )
+      ] }) : /* @__PURE__ */ s("div", { style: {
+        padding: i.spacing.md,
+        textAlign: "center",
+        color: i.colors.textSecondary,
+        fontSize: i.typography.fontSize.sm
+      }, children: "Configure a budget to start monitoring performance thresholds" })
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: i.colors.surface,
+      borderRadius: i.borderRadius.md,
+      padding: i.spacing.md,
+      marginBottom: i.spacing.lg,
+      border: `1px solid ${i.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: i.typography.fontSize.sm,
+        fontWeight: 600,
+        color: i.colors.text,
+        marginBottom: i.spacing.md
+      }, children: "Budget Configuration" }),
+      w ? /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ c("div", { style: {
+          display: "grid",
+          gap: i.spacing.sm,
+          marginBottom: i.spacing.md
+        }, children: [
+          /* @__PURE__ */ c("div", { children: [
+            /* @__PURE__ */ s("label", { style: {
+              display: "block",
+              fontSize: i.typography.fontSize.xs,
+              color: i.colors.textSecondary,
+              marginBottom: i.spacing.xs
+            }, children: "FPS Minimum" }),
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "number",
+                value: u.fps?.min || "",
+                onChange: (p) => f({
+                  ...u,
+                  fps: { min: parseInt(p.target.value) || 0 }
+                }),
+                placeholder: "60",
+                style: {
+                  width: "100%",
+                  padding: i.spacing.sm,
+                  backgroundColor: i.colors.background,
+                  border: `1px solid ${i.colors.border}`,
+                  borderRadius: i.borderRadius.sm,
+                  color: i.colors.text,
+                  fontSize: i.typography.fontSize.sm
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c("div", { children: [
+            /* @__PURE__ */ s("label", { style: {
+              display: "block",
+              fontSize: i.typography.fontSize.xs,
+              color: i.colors.textSecondary,
+              marginBottom: i.spacing.xs
+            }, children: "Frame Time Maximum (ms)" }),
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "number",
+                value: u.frameTime?.max || "",
+                onChange: (p) => f({
+                  ...u,
+                  frameTime: { max: parseFloat(p.target.value) || 0 }
+                }),
+                placeholder: "16.67",
+                step: "0.1",
+                style: {
+                  width: "100%",
+                  padding: i.spacing.sm,
+                  backgroundColor: i.colors.background,
+                  border: `1px solid ${i.colors.border}`,
+                  borderRadius: i.borderRadius.sm,
+                  color: i.colors.text,
+                  fontSize: i.typography.fontSize.sm
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c("div", { children: [
+            /* @__PURE__ */ s("label", { style: {
+              display: "block",
+              fontSize: i.typography.fontSize.xs,
+              color: i.colors.textSecondary,
+              marginBottom: i.spacing.xs
+            }, children: "Memory Maximum (MB)" }),
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "number",
+                value: u.memory?.max ? u.memory.max / (1024 * 1024) : "",
+                onChange: (p) => f({
+                  ...u,
+                  memory: {
+                    ...u.memory,
+                    max: (parseFloat(p.target.value) || 0) * 1024 * 1024
+                  }
+                }),
+                placeholder: "512",
+                step: "1",
+                style: {
+                  width: "100%",
+                  padding: i.spacing.sm,
+                  backgroundColor: i.colors.background,
+                  border: `1px solid ${i.colors.border}`,
+                  borderRadius: i.borderRadius.sm,
+                  color: i.colors.text,
+                  fontSize: i.typography.fontSize.sm
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c("div", { children: [
+            /* @__PURE__ */ s("label", { style: {
+              display: "block",
+              fontSize: i.typography.fontSize.xs,
+              color: i.colors.textSecondary,
+              marginBottom: i.spacing.xs
+            }, children: "Draw Calls Maximum" }),
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "number",
+                value: u.gpu?.drawCalls?.max || "",
+                onChange: (p) => f({
+                  ...u,
+                  gpu: {
+                    ...u.gpu,
+                    drawCalls: { max: parseInt(p.target.value) || 0 }
+                  }
+                }),
+                placeholder: "100",
+                style: {
+                  width: "100%",
+                  padding: i.spacing.sm,
+                  backgroundColor: i.colors.background,
+                  border: `1px solid ${i.colors.border}`,
+                  borderRadius: i.borderRadius.sm,
+                  color: i.colors.text,
+                  fontSize: i.typography.fontSize.sm
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c("div", { children: [
+            /* @__PURE__ */ s("label", { style: {
+              display: "block",
+              fontSize: i.typography.fontSize.xs,
+              color: i.colors.textSecondary,
+              marginBottom: i.spacing.xs
+            }, children: "Triangles Maximum" }),
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "number",
+                value: u.gpu?.triangles?.max || "",
+                onChange: (p) => f({
+                  ...u,
+                  gpu: {
+                    ...u.gpu,
+                    triangles: { max: parseInt(p.target.value) || 0 }
+                  }
+                }),
+                placeholder: "100000",
+                style: {
+                  width: "100%",
+                  padding: i.spacing.sm,
+                  backgroundColor: i.colors.background,
+                  border: `1px solid ${i.colors.border}`,
+                  borderRadius: i.borderRadius.sm,
+                  color: i.colors.text,
+                  fontSize: i.typography.fontSize.sm
+                }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ c("div", { style: {
+          display: "flex",
+          gap: i.spacing.sm
+        }, children: [
+          /* @__PURE__ */ s(
+            "button",
+            {
+              onClick: h,
+              style: {
+                padding: `${i.spacing.sm} ${i.spacing.md}`,
+                backgroundColor: i.colors.success,
+                color: i.colors.background,
+                border: "none",
+                borderRadius: i.borderRadius.sm,
+                cursor: "pointer",
+                fontSize: i.typography.fontSize.sm,
+                fontWeight: 600
+              },
+              children: "Save"
+            }
+          ),
+          /* @__PURE__ */ s(
+            "button",
+            {
+              onClick: S,
+              style: {
+                padding: `${i.spacing.sm} ${i.spacing.md}`,
+                backgroundColor: "transparent",
+                color: i.colors.textSecondary,
+                border: `1px solid ${i.colors.border}`,
+                borderRadius: i.borderRadius.sm,
+                cursor: "pointer",
+                fontSize: i.typography.fontSize.sm,
+                fontWeight: 600
+              },
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        gap: i.spacing.sm,
+        flexWrap: "wrap"
+      }, children: [
+        /* @__PURE__ */ s(
+          "button",
+          {
+            onClick: () => y(!0),
+            style: {
+              padding: `${i.spacing.sm} ${i.spacing.md}`,
+              backgroundColor: i.colors.primary,
+              color: i.colors.background,
+              border: "none",
+              borderRadius: i.borderRadius.sm,
+              cursor: "pointer",
+              fontSize: i.typography.fontSize.sm,
+              fontWeight: 600,
+              transition: i.transitions.fast
+            },
+            onMouseEnter: (p) => {
+              p.currentTarget.style.backgroundColor = i.colors.primaryHover;
+            },
+            onMouseLeave: (p) => {
+              p.currentTarget.style.backgroundColor = i.colors.primary;
+            },
+            children: n ? "Edit Budget" : "Set Budget"
+          }
+        ),
+        !n && /* @__PURE__ */ s(
+          "button",
+          {
+            onClick: m,
+            style: {
+              padding: `${i.spacing.sm} ${i.spacing.md}`,
+              backgroundColor: "transparent",
+              color: i.colors.primary,
+              border: `1px solid ${i.colors.primary}`,
+              borderRadius: i.borderRadius.sm,
+              cursor: "pointer",
+              fontSize: i.typography.fontSize.sm,
+              fontWeight: 600,
+              transition: i.transitions.fast
+            },
+            onMouseEnter: (p) => {
+              p.currentTarget.style.backgroundColor = `${i.colors.primary}20`;
+            },
+            onMouseLeave: (p) => {
+              p.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: "Use Recommended"
+          }
+        ),
+        n && /* @__PURE__ */ s(
+          "button",
+          {
+            onClick: () => {
+              window.confirm("Are you sure you want to delete the current budget?") && o();
+            },
+            style: {
+              padding: `${i.spacing.sm} ${i.spacing.md}`,
+              backgroundColor: "transparent",
+              color: i.colors.error,
+              border: `1px solid ${i.colors.error}`,
+              borderRadius: i.borderRadius.sm,
+              cursor: "pointer",
+              fontSize: i.typography.fontSize.sm,
+              fontWeight: 600,
+              transition: i.transitions.fast
+            },
+            onMouseEnter: (p) => {
+              p.currentTarget.style.backgroundColor = `${i.colors.error}20`;
+            },
+            onMouseLeave: (p) => {
+              p.currentTarget.style.backgroundColor = "transparent";
+            },
+            children: "Delete Budget"
+          }
+        )
+      ] })
+    ] }),
+    e.length > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: i.colors.surface,
+      borderRadius: i.borderRadius.md,
+      padding: i.spacing.md,
+      border: `1px solid ${i.colors.border}`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: i.spacing.md
+      }, children: [
+        /* @__PURE__ */ c("div", { style: {
+          fontSize: i.typography.fontSize.sm,
+          fontWeight: 600,
+          color: i.colors.text
+        }, children: [
+          "Recent Violations (",
+          e.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            onClick: r,
+            style: {
+              padding: `${i.spacing.xs} ${i.spacing.sm}`,
+              backgroundColor: "transparent",
+              color: i.colors.textSecondary,
+              border: "none",
+              cursor: "pointer",
+              fontSize: i.typography.fontSize.xs
+            },
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        maxHeight: "200px",
+        overflowY: "auto",
+        fontSize: i.typography.fontSize.xs,
+        fontFamily: i.typography.fontFamilyMono
+      }, children: e.slice(-10).reverse().map((p) => /* @__PURE__ */ c(
+        "div",
+        {
+          style: {
+            padding: i.spacing.sm,
+            borderBottom: `1px solid ${i.colors.border}`,
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ c("div", { children: [
+              /* @__PURE__ */ s("div", { style: {
+                color: p.severity === "error" ? i.colors.error : i.colors.warning,
+                fontWeight: 600
+              }, children: p.metric }),
+              /* @__PURE__ */ s("div", { style: {
+                color: i.colors.textSecondary,
+                marginTop: i.spacing.xs
+              }, children: p.message })
+            ] }),
+            /* @__PURE__ */ s(V, { severity: p.severity })
+          ]
+        },
+        p.id
+      )) })
+    ] })
+  ] });
+};
+class je {
+  componentStats = /* @__PURE__ */ new Map();
+  recentRenders = [];
+  totalRenders = 0;
+  maxRecentRenders = 100;
+  slowThreshold = 16;
+  // ms (1 frame at 60fps)
+  frequentThreshold = 10;
+  // renders per second
+  // React Profiler callback
+  onRenderCallback = (e, t, r, o, a, d) => {
+    const l = this.getComponentName(e), g = performance.now(), i = {
+      id: e,
+      name: l,
+      phase: t,
+      actualDuration: r,
+      baseDuration: o,
+      startTime: a,
+      commitTime: d,
+      timestamp: g
+    };
+    this.recentRenders.push(i), this.recentRenders.length > this.maxRecentRenders && this.recentRenders.shift(), this.updateComponentStats(l, i), _.onReactRender(r), this.totalRenders++;
+  };
+  getComponentName(e) {
+    return e.split(":")[0] || e;
+  }
+  updateComponentStats(e, t) {
+    let r = this.componentStats.get(e);
+    r || (r = {
+      name: e,
+      renderCount: 0,
+      totalDuration: 0,
+      averageDuration: 0,
+      maxDuration: 0,
+      minDuration: 1 / 0,
+      lastRenderTime: 0,
+      phases: {
+        mount: 0,
+        update: 0
+      }
+    }, this.componentStats.set(e, r)), r.renderCount++, r.totalDuration += t.actualDuration, r.averageDuration = r.totalDuration / r.renderCount, r.maxDuration = Math.max(r.maxDuration, t.actualDuration), r.minDuration = Math.min(r.minDuration, t.actualDuration), r.lastRenderTime = t.timestamp, t.phase === "mount" ? r.phases.mount++ : r.phases.update++;
+  }
+  getPerformanceData() {
+    const e = new Map(this.componentStats), t = Array.from(e.values()).filter((d) => d.averageDuration > this.slowThreshold).sort((d, l) => l.averageDuration - d.averageDuration), r = performance.now(), o = 1e3, a = Array.from(e.values()).filter((d) => r - d.lastRenderTime > o ? !1 : d.renderCount / (o / 1e3) > this.frequentThreshold).sort((d, l) => l.renderCount - d.renderCount);
+    return {
+      components: e,
+      recentRenders: [...this.recentRenders],
+      totalRenders: this.totalRenders,
+      slowComponents: t,
+      frequentRenders: a,
+      timestamp: performance.now()
+    };
+  }
+  getComponentStats(e) {
+    return this.componentStats.get(e) || null;
+  }
+  getSlowComponents() {
+    return this.getPerformanceData().slowComponents;
+  }
+  getFrequentRenders() {
+    return this.getPerformanceData().frequentRenders;
+  }
+  reset() {
+    this.componentStats.clear(), this.recentRenders = [], this.totalRenders = 0;
+  }
+}
+const qe = new je();
+function Ue() {
+  const [n, e] = B(null);
+  return A(() => {
+    const t = () => {
+      if (!k.getPaused()) {
+        const a = qe.getPerformanceData();
+        e(a);
+      }
+    };
+    t();
+    const r = setInterval(t, 500), o = k.subscribe((a) => {
+      a || t();
+    });
+    return () => {
+      clearInterval(r), o();
+    };
+  }, []), n;
+}
+const Ne = () => {
+  const n = Ue(), e = F, t = (o) => o < 0.1 ? `${v(o * 1e3, 0)} μs` : o < 1 ? `${v(o, 2)} ms` : `${v(o, 2)} ms`, r = L(() => n ? Array.from(n.components.values()).sort((o, a) => a.totalDuration - o.totalDuration) : [], [n]);
+  return n ? /* @__PURE__ */ c("div", { style: { padding: e.spacing.md }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "Overview" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+        gap: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Total Renders",
+            value: n.totalRenders.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Components",
+            value: n.components.size.toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Slow Components",
+            value: n.slowComponents.length.toLocaleString(),
+            status: n.slowComponents.length > 0 ? "warning" : "good"
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Frequent Renders",
+            value: n.frequentRenders.length.toLocaleString(),
+            status: n.frequentRenders.length > 0 ? "warning" : "good"
+          }
+        )
+      ] })
+    ] }),
+    n.slowComponents.length > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.warning}40`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: e.spacing.sm,
+        marginBottom: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s(V, { severity: "warning", count: n.slowComponents.length }),
+        /* @__PURE__ */ s("div", { style: {
+          fontSize: e.typography.fontSize.sm,
+          fontWeight: 600,
+          color: e.colors.text
+        }, children: "Slow Components (avg > 16ms)" })
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.xs,
+        color: e.colors.textSecondary,
+        fontFamily: e.typography.fontFamilyMono
+      }, children: n.slowComponents.slice(0, 5).map((o) => /* @__PURE__ */ c("div", { style: { marginBottom: e.spacing.xs }, children: [
+        o.name,
+        ": ",
+        t(o.averageDuration),
+        " avg (",
+        o.renderCount,
+        " renders)"
+      ] }, o.name)) })
+    ] }),
+    n.frequentRenders.length > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.warning}40`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: e.spacing.sm,
+        marginBottom: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s(V, { severity: "warning", count: n.frequentRenders.length }),
+        /* @__PURE__ */ s("div", { style: {
+          fontSize: e.typography.fontSize.sm,
+          fontWeight: 600,
+          color: e.colors.text
+        }, children: "Frequent Renders (> 10 renders/sec)" })
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.xs,
+        color: e.colors.textSecondary,
+        fontFamily: e.typography.fontFamilyMono
+      }, children: n.frequentRenders.slice(0, 5).map((o) => /* @__PURE__ */ c("div", { style: { marginBottom: e.spacing.xs }, children: [
+        o.name,
+        ": ",
+        o.renderCount,
+        " renders"
+      ] }, o.name)) })
+    ] }),
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: [
+        "Components (",
+        r.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        maxHeight: "400px",
+        overflowY: "auto"
+      }, children: r.length === 0 ? /* @__PURE__ */ s("div", { style: {
+        padding: e.spacing.md,
+        textAlign: "center",
+        color: e.colors.textSecondary,
+        fontSize: e.typography.fontSize.sm
+      }, children: "No components profiled yet" }) : /* @__PURE__ */ s(Ye, { components: r, formatTime: t }) })
+    ] })
+  ] }) : /* @__PURE__ */ s("div", { style: {
+    padding: e.spacing.lg,
+    textAlign: "center",
+    color: e.colors.textSecondary,
+    fontSize: e.typography.fontSize.sm
+  }, children: "Aucune donnée React disponible. Enveloppez vos composants avec <ReactProfiler> pour commencer le monitoring." });
+}, Ye = ({ components: n, formatTime: e }) => {
+  const t = F;
+  return /* @__PURE__ */ c("table", { style: {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: t.typography.fontSize.xs,
+    fontFamily: t.typography.fontFamilyMono
+  }, children: [
+    /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", { style: {
+      borderBottom: `1px solid ${t.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("th", { style: {
+        textAlign: "left",
+        padding: t.spacing.sm,
+        color: t.colors.textSecondary,
+        fontWeight: 600
+      }, children: "Component" }),
+      /* @__PURE__ */ s("th", { style: {
+        textAlign: "right",
+        padding: t.spacing.sm,
+        color: t.colors.textSecondary,
+        fontWeight: 600
+      }, children: "Renders" }),
+      /* @__PURE__ */ s("th", { style: {
+        textAlign: "right",
+        padding: t.spacing.sm,
+        color: t.colors.textSecondary,
+        fontWeight: 600
+      }, children: "Avg Time" }),
+      /* @__PURE__ */ s("th", { style: {
+        textAlign: "right",
+        padding: t.spacing.sm,
+        color: t.colors.textSecondary,
+        fontWeight: 600
+      }, children: "Max Time" }),
+      /* @__PURE__ */ s("th", { style: {
+        textAlign: "right",
+        padding: t.spacing.sm,
+        color: t.colors.textSecondary,
+        fontWeight: 600
+      }, children: "Total Time" })
+    ] }) }),
+    /* @__PURE__ */ s("tbody", { children: n.map((r) => {
+      const o = r.averageDuration > 16, a = r.renderCount > 10;
+      return /* @__PURE__ */ c(
+        "tr",
+        {
+          style: {
+            borderBottom: `1px solid ${t.colors.border}`,
+            backgroundColor: o || a ? `${t.colors.warning}10` : "transparent"
+          },
+          children: [
+            /* @__PURE__ */ s("td", { style: {
+              padding: t.spacing.sm,
+              color: t.colors.text,
+              fontWeight: o || a ? 600 : 400
+            }, children: r.name }),
+            /* @__PURE__ */ s("td", { style: {
+              textAlign: "right",
+              padding: t.spacing.sm,
+              color: t.colors.textSecondary
+            }, children: r.renderCount.toLocaleString() }),
+            /* @__PURE__ */ s("td", { style: {
+              textAlign: "right",
+              padding: t.spacing.sm,
+              color: o ? t.colors.warning : t.colors.textSecondary,
+              fontWeight: o ? 600 : 400
+            }, children: e(r.averageDuration) }),
+            /* @__PURE__ */ s("td", { style: {
+              textAlign: "right",
+              padding: t.spacing.sm,
+              color: t.colors.textSecondary
+            }, children: e(r.maxDuration) }),
+            /* @__PURE__ */ s("td", { style: {
+              textAlign: "right",
+              padding: t.spacing.sm,
+              color: t.colors.textSecondary
+            }, children: e(r.totalDuration) })
+          ]
+        },
+        r.name
+      );
+    }) })
+  ] });
+};
+class Je {
+  functionCalls = /* @__PURE__ */ new Map();
+  callHistory = [];
+  maxHistorySize = 1e3;
+  hotPathThreshold = 5;
+  // ms - functions taking longer than this are considered hot
+  frequencyThreshold = 10;
+  // calls per second
+  recordCall(e, t, r) {
+    const o = performance.now();
+    let a = this.functionCalls.get(e);
+    a || (a = {
+      name: e,
+      duration: 0,
+      timestamp: o,
+      callCount: 0,
+      averageDuration: 0,
+      maxDuration: 0,
+      stack: r || []
+    }, this.functionCalls.set(e, a)), a.callCount++, a.duration += t, a.averageDuration = a.duration / a.callCount, a.maxDuration = Math.max(a.maxDuration, t), a.timestamp = o, this.callHistory.push({ name: e, duration: t, timestamp: o }), this.callHistory.length > this.maxHistorySize && this.callHistory.shift();
+  }
+  analyze(e) {
+    const t = performance.now(), r = 5e3, o = t - r, a = this.callHistory.filter((u) => u.timestamp >= o), d = /* @__PURE__ */ new Map();
+    a.forEach((u) => {
+      const f = d.get(u.name) || 0;
+      d.set(u.name, f + 1);
+    });
+    const l = /* @__PURE__ */ new Map();
+    d.forEach((u, f) => {
+      l.set(f, u / r * 1e3);
+    });
+    const g = [], i = [], w = [];
+    this.functionCalls.forEach((u, f) => {
+      const M = l.get(f) || 0, C = u.averageDuration > this.hotPathThreshold, h = M > this.frequencyThreshold;
+      if (C || h) {
+        const S = u.averageDuration > 16 ? "high" : u.averageDuration > 8 ? "medium" : "low", z = [];
+        C && z.push(`Optimize ${f} - average duration: ${u.averageDuration.toFixed(2)}ms`), h && z.push(`Reduce calls to ${f} - ${M.toFixed(1)} calls/sec`), u.maxDuration > u.averageDuration * 2 && z.push(`Investigate performance spikes in ${f} - max: ${u.maxDuration.toFixed(2)}ms`);
+        const p = {
+          id: `hotpath-${f}-${Date.now()}`,
+          path: [f],
+          totalDuration: u.duration,
+          averageDuration: u.averageDuration,
+          callCount: u.callCount,
+          frequency: M,
+          impact: S,
+          recommendations: z
+        };
+        g.push(p), C && w.push(p);
+      }
+      i.push(u);
+    }), i.sort((u, f) => f.duration - u.duration);
+    const y = [];
+    return w.length > 0 && y.push(`Found ${w.length} performance bottlenecks`), g.length > 5 && y.push("Consider optimizing multiple hot paths simultaneously"), e && e.forEach((u) => {
+      u.avg > this.hotPathThreshold && y.push(`Hook "${u.name}" takes ${u.avg.toFixed(2)}ms on average`);
+    }), {
+      hotPaths: g.sort((u, f) => f.averageDuration - u.averageDuration),
+      topFunctions: i.slice(0, 10),
+      // Top 10
+      bottlenecks: w.sort((u, f) => f.averageDuration - u.averageDuration),
+      recommendations: y,
+      timestamp: t
+    };
+  }
+  detectCallChain(e) {
+    const t = /* @__PURE__ */ new Map();
+    this.callHistory.forEach((o) => {
+      const a = o.name;
+      let d = t.get(a);
+      d || (d = { path: [o.name], duration: 0, count: 0 }, t.set(a, d)), d.duration += o.duration, d.count++;
+    });
+    const r = [];
+    return t.forEach((o, a) => {
+      const d = o.duration / o.count;
+      d > this.hotPathThreshold && r.push({
+        id: `chain-${a}-${Date.now()}`,
+        path: o.path,
+        totalDuration: o.duration,
+        averageDuration: d,
+        callCount: o.count,
+        frequency: o.count / 5,
+        // Approximate
+        impact: d > 16 ? "high" : d > 8 ? "medium" : "low",
+        recommendations: [`Optimize call chain: ${o.path.join(" -> ")}`]
+      });
+    }), r;
+  }
+  reset() {
+    this.functionCalls.clear(), this.callHistory = [];
+  }
+  getTopFunctions(e = 10) {
+    return Array.from(this.functionCalls.values()).sort((t, r) => r.duration - t.duration).slice(0, e);
+  }
+}
+const me = new Je(), Ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  hotPathDetector: me
+}, Symbol.toStringTag, { value: "Module" }));
+function Xe() {
+  const [n, e] = B(null), t = J();
+  return A(() => {
+    const r = () => {
+      if (!k.getPaused()) {
+        const d = me.analyze(t?.entries);
+        e(d);
+      }
+    };
+    r();
+    const o = setInterval(r, 2e3), a = k.subscribe((d) => {
+      d || r();
+    });
+    return () => {
+      clearInterval(o), a();
+    };
+  }, [t]), n;
+}
+const Ze = () => {
+  const n = Xe(), e = F, t = (o) => o < 0.1 ? `${v(o * 1e3, 0)} μs` : o < 1 ? `${v(o, 2)} ms` : `${v(o, 2)} ms`, r = {
+    high: e.colors.error,
+    medium: e.colors.warning,
+    low: e.colors.info
+  };
+  return n ? /* @__PURE__ */ c("div", { style: { padding: e.spacing.md }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "Overview" }),
+      /* @__PURE__ */ c("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+        gap: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Hot Paths",
+            value: n.hotPaths.length.toLocaleString(),
+            status: n.hotPaths.length > 0 ? "warning" : "good"
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Bottlenecks",
+            value: n.bottlenecks.length.toLocaleString(),
+            status: n.bottlenecks.length > 0 ? "error" : "good"
+          }
+        ),
+        /* @__PURE__ */ s(
+          x,
+          {
+            label: "Top Functions",
+            value: n.topFunctions.length.toLocaleString()
+          }
+        )
+      ] })
+    ] }),
+    n.recommendations.length > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.warning}40`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: e.spacing.sm,
+        marginBottom: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s(V, { severity: "warning" }),
+        /* @__PURE__ */ s("div", { style: {
+          fontSize: e.typography.fontSize.sm,
+          fontWeight: 600,
+          color: e.colors.text
+        }, children: "Recommendations" })
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.xs,
+        color: e.colors.textSecondary,
+        fontFamily: e.typography.fontFamilyMono
+      }, children: n.recommendations.map((o, a) => /* @__PURE__ */ c("div", { style: { marginBottom: e.spacing.xs }, children: [
+        "• ",
+        o
+      ] }, a)) })
+    ] }),
+    n.bottlenecks.length > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.error}40`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: e.spacing.sm,
+        marginBottom: e.spacing.sm
+      }, children: [
+        /* @__PURE__ */ s(V, { severity: "error", count: n.bottlenecks.length }),
+        /* @__PURE__ */ s("div", { style: {
+          fontSize: e.typography.fontSize.sm,
+          fontWeight: 600,
+          color: e.colors.text
+        }, children: "Performance Bottlenecks" })
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        maxHeight: "300px",
+        overflowY: "auto"
+      }, children: n.bottlenecks.map((o) => /* @__PURE__ */ c(
+        "div",
+        {
+          style: {
+            padding: e.spacing.sm,
+            borderBottom: `1px solid ${e.colors.border}`,
+            backgroundColor: `${r[o.impact]}10`
+          },
+          children: [
+            /* @__PURE__ */ c("div", { style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: e.spacing.xs
+            }, children: [
+              /* @__PURE__ */ s("div", { style: {
+                fontSize: e.typography.fontSize.sm,
+                fontWeight: 600,
+                color: r[o.impact],
+                fontFamily: e.typography.fontFamilyMono
+              }, children: o.path.join(" -> ") }),
+              /* @__PURE__ */ c("div", { style: {
+                fontSize: e.typography.fontSize.xs,
+                color: e.colors.textSecondary
+              }, children: [
+                t(o.averageDuration),
+                " avg"
+              ] })
+            ] }),
+            /* @__PURE__ */ c("div", { style: {
+              fontSize: e.typography.fontSize.xs,
+              color: e.colors.textSecondary,
+              marginBottom: e.spacing.xs
+            }, children: [
+              o.callCount.toLocaleString(),
+              " calls • ",
+              o.frequency.toFixed(1),
+              " calls/sec"
+            ] }),
+            o.recommendations.length > 0 && /* @__PURE__ */ s("div", { style: {
+              fontSize: e.typography.fontSize.xs,
+              color: e.colors.textTertiary,
+              fontStyle: "italic"
+            }, children: o.recommendations[0] })
+          ]
+        },
+        o.id
+      )) })
+    ] }),
+    n.hotPaths.length > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      marginBottom: e.spacing.lg,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: [
+        "Hot Paths (",
+        n.hotPaths.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ s("div", { style: {
+        maxHeight: "400px",
+        overflowY: "auto"
+      }, children: /* @__PURE__ */ c("table", { style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        fontSize: e.typography.fontSize.xs,
+        fontFamily: e.typography.fontFamilyMono
+      }, children: [
+        /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", { style: {
+          borderBottom: `1px solid ${e.colors.border}`
+        }, children: [
+          /* @__PURE__ */ s("th", { style: {
+            textAlign: "left",
+            padding: e.spacing.sm,
+            color: e.colors.textSecondary,
+            fontWeight: 600
+          }, children: "Path" }),
+          /* @__PURE__ */ s("th", { style: {
+            textAlign: "right",
+            padding: e.spacing.sm,
+            color: e.colors.textSecondary,
+            fontWeight: 600
+          }, children: "Avg Time" }),
+          /* @__PURE__ */ s("th", { style: {
+            textAlign: "right",
+            padding: e.spacing.sm,
+            color: e.colors.textSecondary,
+            fontWeight: 600
+          }, children: "Calls" }),
+          /* @__PURE__ */ s("th", { style: {
+            textAlign: "right",
+            padding: e.spacing.sm,
+            color: e.colors.textSecondary,
+            fontWeight: 600
+          }, children: "Freq/sec" }),
+          /* @__PURE__ */ s("th", { style: {
+            textAlign: "center",
+            padding: e.spacing.sm,
+            color: e.colors.textSecondary,
+            fontWeight: 600
+          }, children: "Impact" })
+        ] }) }),
+        /* @__PURE__ */ s("tbody", { children: n.hotPaths.map((o) => /* @__PURE__ */ c(
+          "tr",
+          {
+            style: {
+              borderBottom: `1px solid ${e.colors.border}`,
+              backgroundColor: `${r[o.impact]}10`
+            },
+            children: [
+              /* @__PURE__ */ s("td", { style: {
+                padding: e.spacing.sm,
+                color: e.colors.text
+              }, children: o.path.join(" -> ") }),
+              /* @__PURE__ */ s("td", { style: {
+                textAlign: "right",
+                padding: e.spacing.sm,
+                color: r[o.impact],
+                fontWeight: 600
+              }, children: t(o.averageDuration) }),
+              /* @__PURE__ */ s("td", { style: {
+                textAlign: "right",
+                padding: e.spacing.sm,
+                color: e.colors.textSecondary
+              }, children: o.callCount.toLocaleString() }),
+              /* @__PURE__ */ s("td", { style: {
+                textAlign: "right",
+                padding: e.spacing.sm,
+                color: e.colors.textSecondary
+              }, children: v(o.frequency, 1) }),
+              /* @__PURE__ */ s("td", { style: {
+                textAlign: "center",
+                padding: e.spacing.sm
+              }, children: /* @__PURE__ */ s(V, { severity: o.impact === "high" ? "error" : o.impact === "medium" ? "warning" : "info" }) })
+            ]
+          },
+          o.id
+        )) })
+      ] }) })
+    ] }),
+    n.topFunctions.length > 0 && /* @__PURE__ */ c("div", { style: {
+      backgroundColor: e.colors.surface,
+      borderRadius: e.borderRadius.md,
+      padding: e.spacing.md,
+      border: `1px solid ${e.colors.border}`
+    }, children: [
+      /* @__PURE__ */ s("div", { style: {
+        fontSize: e.typography.fontSize.sm,
+        fontWeight: 600,
+        color: e.colors.text,
+        marginBottom: e.spacing.sm
+      }, children: "Top Functions (by total duration)" }),
+      /* @__PURE__ */ s("div", { style: {
+        maxHeight: "300px",
+        overflowY: "auto",
+        fontSize: e.typography.fontSize.xs,
+        fontFamily: e.typography.fontFamilyMono,
+        color: e.colors.textSecondary
+      }, children: n.topFunctions.map((o, a) => /* @__PURE__ */ c(
+        "div",
+        {
+          style: {
+            padding: e.spacing.sm,
+            borderBottom: `1px solid ${e.colors.border}`,
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ c("span", { children: [
+              a + 1,
+              ". ",
+              o.name
+            ] }),
+            /* @__PURE__ */ c("span", { children: [
+              t(o.averageDuration),
+              " avg (",
+              o.callCount.toLocaleString(),
+              " calls)"
+            ] })
+          ]
+        },
+        o.name
+      )) })
+    ] })
+  ] }) : /* @__PURE__ */ s("div", { style: {
+    padding: e.spacing.lg,
+    textAlign: "center",
+    color: e.colors.textSecondary,
+    fontSize: e.typography.fontSize.sm
+  }, children: "Aucune analyse de hot path disponible. Les hot paths sont détectés automatiquement à partir des données du profiler." });
+}, st = ({
+  position: n = "top-right",
+  defaultTab: e = "frames",
+  collapsed: t = !1
+}) => {
+  const [r, o] = B(!1), [a, d] = B(e), [l, g] = B(t), [i, w] = B(k.getPaused()), [y, u] = B(!1), [f, M] = B(null), C = I(null), h = I(null), m = F, S = "r3f-profiler-state";
+  A(() => {
+    const b = localStorage.getItem(S);
+    if (b)
+      try {
+        const $ = JSON.parse(b);
+        $.position && typeof $.position.x == "number" && typeof $.position.y == "number" && M({ x: $.position.x, y: $.position.y }), typeof $.collapsed == "boolean" && g($.collapsed), typeof $.activeTab == "string" && $.activeTab && d($.activeTab);
+      } catch ($) {
+        console.warn("Failed to load saved profiler state:", $);
+      }
+    const R = k.subscribe(($) => {
+      w($);
+    });
+    return () => {
+      R();
+    };
+  }, []);
+  const z = Z((b) => {
+    try {
+      const R = localStorage.getItem(S), G = {
+        ...R ? JSON.parse(R) : {},
+        ...b
+      };
+      localStorage.setItem(S, JSON.stringify(G));
+    } catch (R) {
+      console.warn("Failed to save profiler state:", R);
+    }
+  }, []), p = Z((b, R) => {
+    z({ position: { x: b, y: R } });
+  }, [z]), T = Z((b) => {
+    if (!b.target.closest("button") && (u(!0), h.current)) {
+      const R = h.current.getBoundingClientRect();
+      C.current = {
+        x: b.clientX - R.left,
+        y: b.clientY - R.top
+      };
+    }
+  }, []);
+  if (A(() => {
+    if (!y) return;
+    const b = ($) => {
+      if (!C.current || !h.current) return;
+      const te = h.current.getBoundingClientRect(), ge = window.innerWidth, pe = window.innerHeight;
+      let K = $.clientX - C.current.x, X = $.clientY - C.current.y;
+      K = Math.max(0, Math.min(K, ge - te.width)), X = Math.max(0, Math.min(X, pe - te.height));
+      const re = { x: K, y: X };
+      M(re), z({ position: re });
+    }, R = () => {
+      u(!1), C.current = null;
+    };
+    return window.addEventListener("mousemove", b), window.addEventListener("mouseup", R), () => {
+      window.removeEventListener("mousemove", b), window.removeEventListener("mouseup", R);
+    };
+  }, [y, p]), A(() => {
+    const b = () => ce();
+    o(b());
+    const R = () => {
+      o(b());
+    };
+    return window.addEventListener("storage", R), () => {
+      window.removeEventListener("storage", R);
+    };
+  }, []), !r)
+    return null;
+  const P = [
+    { id: "frames", label: "Frames" },
+    { id: "gpu", label: "GPU" },
+    { id: "scene", label: "Scene" },
+    { id: "memory", label: "Memory" },
+    { id: "frame-time", label: "Frame Time" },
+    { id: "budget", label: "Budget" },
+    { id: "react", label: "React" },
+    { id: "hot-path", label: "Hot Path" }
+  ], q = f ? {
+    left: `${f.x}px`,
+    top: `${f.y}px`,
+    right: "auto",
+    bottom: "auto"
+  } : {
+    "top-left": { top: m.spacing.md, left: m.spacing.md, right: "auto", bottom: "auto" },
+    "top-right": { top: m.spacing.md, right: m.spacing.md, left: "auto", bottom: "auto" },
+    "bottom-left": { bottom: m.spacing.md, left: m.spacing.md, right: "auto", top: "auto" },
+    "bottom-right": { bottom: m.spacing.md, right: m.spacing.md, left: "auto", top: "auto" }
+  }[n];
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: h,
+      style: {
+        position: "fixed",
+        ...q,
+        width: l ? "auto" : "600px",
+        maxWidth: l ? "auto" : "90vw",
+        maxHeight: "80vh",
+        backgroundColor: m.colors.background,
+        backdropFilter: "blur(10px)",
+        borderRadius: m.borderRadius.lg,
+        boxShadow: m.shadows.xl,
+        border: `1px solid ${m.colors.border}`,
+        zIndex: m.zIndex.base,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        transition: y ? "none" : m.transitions.normal,
+        userSelect: y ? "none" : "auto"
+      },
+      children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            onMouseDown: T,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: m.spacing.md,
+              borderBottom: `1px solid ${m.colors.border}`,
+              backgroundColor: m.colors.surface,
+              cursor: y ? "grabbing" : "grab",
+              userSelect: "none"
+            },
+            children: [
+              /* @__PURE__ */ c("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: m.spacing.sm,
+                flex: 1
+              }, children: [
+                /* @__PURE__ */ s("div", { style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: m.spacing.xs,
+                  color: m.colors.textTertiary,
+                  fontSize: m.typography.fontSize.xs
+                }, children: /* @__PURE__ */ s("span", { children: "⋮⋮" }) }),
+                /* @__PURE__ */ s("div", { style: {
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "50%",
+                  backgroundColor: m.colors.success,
+                  boxShadow: `0 0 8px ${m.colors.success}`
+                } }),
+                /* @__PURE__ */ s("h2", { style: {
+                  margin: 0,
+                  fontSize: m.typography.fontSize.lg,
+                  fontWeight: 600,
+                  color: m.colors.text
+                }, children: "Performance Monitor" })
+              ] }),
+              /* @__PURE__ */ c("div", { style: {
+                display: "flex",
+                gap: m.spacing.xs,
+                alignItems: "center"
+              }, children: [
+                i && /* @__PURE__ */ s("div", { style: {
+                  fontSize: m.typography.fontSize.xs,
+                  color: m.colors.warning,
+                  fontFamily: m.typography.fontFamilyMono,
+                  padding: `0 ${m.spacing.xs}`
+                }, children: "PAUSED" }),
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    onClick: () => {
+                      k.toggle();
+                    },
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: i ? m.colors.warning : m.colors.textSecondary,
+                      cursor: "pointer",
+                      padding: m.spacing.xs,
+                      borderRadius: m.borderRadius.sm,
+                      transition: m.transitions.fast,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    onMouseEnter: (b) => {
+                      b.currentTarget.style.backgroundColor = m.colors.surfaceElevated, b.currentTarget.style.color = i ? m.colors.warning : m.colors.text;
+                    },
+                    onMouseLeave: (b) => {
+                      b.currentTarget.style.backgroundColor = "transparent", b.currentTarget.style.color = i ? m.colors.warning : m.colors.textSecondary;
+                    },
+                    title: i ? "Resume" : "Pause",
+                    children: i ? "▶" : "⏸"
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    onClick: async () => {
+                      const { profiler: b } = await Promise.resolve().then(() => ve);
+                      await b.copyReportToClipboard(), alert("📊 Performance report copied to clipboard!");
+                    },
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: m.colors.textSecondary,
+                      cursor: "pointer",
+                      padding: m.spacing.xs,
+                      borderRadius: m.borderRadius.sm,
+                      transition: m.transitions.fast,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    onMouseEnter: (b) => {
+                      b.currentTarget.style.backgroundColor = m.colors.surfaceElevated, b.currentTarget.style.color = m.colors.success;
+                    },
+                    onMouseLeave: (b) => {
+                      b.currentTarget.style.backgroundColor = "transparent", b.currentTarget.style.color = m.colors.textSecondary;
+                    },
+                    title: "Copy Performance Report (for AI analysis)",
+                    children: "📊"
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    onClick: () => {
+                      const b = !l;
+                      g(b), z({ collapsed: b });
+                    },
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: m.colors.textSecondary,
+                      cursor: "pointer",
+                      padding: m.spacing.xs,
+                      borderRadius: m.borderRadius.sm,
+                      transition: m.transitions.fast,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    onMouseEnter: (b) => {
+                      b.currentTarget.style.backgroundColor = m.colors.surfaceElevated, b.currentTarget.style.color = m.colors.text;
+                    },
+                    onMouseLeave: (b) => {
+                      b.currentTarget.style.backgroundColor = "transparent", b.currentTarget.style.color = m.colors.textSecondary;
+                    },
+                    title: l ? "Expand" : "Collapse",
+                    children: l ? "◀" : "▼"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !l && /* @__PURE__ */ c(N, { children: [
+          /* @__PURE__ */ s("div", { style: {
+            padding: `0 ${m.spacing.md}`,
+            backgroundColor: m.colors.surface
+          }, children: /* @__PURE__ */ s(
+            Pe,
+            {
+              tabs: P,
+              activeTab: a,
+              onTabChange: (b) => {
+                d(b), z({ activeTab: b });
+              }
+            }
+          ) }),
+          /* @__PURE__ */ c("div", { style: {
+            flex: 1,
+            overflow: "auto",
+            backgroundColor: m.colors.background
+          }, children: [
+            a === "frames" && /* @__PURE__ */ s(De, {}),
+            a === "gpu" && /* @__PURE__ */ s(Le, {}),
+            a === "scene" && /* @__PURE__ */ s(He, {}),
+            a === "memory" && /* @__PURE__ */ s(Ee, {}),
+            a === "frame-time" && /* @__PURE__ */ s(We, {}),
+            a === "budget" && /* @__PURE__ */ s(Oe, {}),
+            a === "react" && /* @__PURE__ */ s(Ne, {}),
+            a === "hot-path" && /* @__PURE__ */ s(Ze, {})
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  st as P,
+  nt as R,
+  ot as a,
+  be as b,
+  ce as i,
+  E as p,
+  xe as r
+};
+//# sourceMappingURL=index-o5zvhDta.js.map