@nice2dev/game-engine 1.3.15 → 1.3.17

package/dist/esm/editor/ProfilerPanel.js

@@ -1,709 +1,664 @@
-/**
- * @file ProfilerPanel.ts
- * @description Advanced Profiler Panel System for Editor
- * PRO-1.4: Professional Editor Features
- *
- * Features:
- * - CPU profiling with hierarchical flame graph
- * - GPU timing (WebGL/WebGPU)
- * - Memory tracking (JS heap, textures, buffers)
- * - Frame timeline visualization
- * - System breakdown
- * - Custom markers/regions
- * - Export/import profiler data
- * - Real-time graphs
- */
-// ============================================================
-// Marker Colors
-// ============================================================
 const CATEGORY_COLORS = {
-    scripts: '#4FC3F7', // Light Blue
-    physics: '#AED581', // Light Green
-    rendering: '#FFB74D', // Orange
-    animation: '#BA68C8', // Purple
-    audio: '#F06292', // Pink
-    ai: '#4DB6AC', // Teal
-    networking: '#7986CB', // Indigo
-    loading: '#FFD54F', // Amber
-    gc: '#E57373', // Red
-    vsync: '#90A4AE', // Blue Grey
-    other: '#78909C', // Grey
+  scripts: "#4FC3F7",
+  // Light Blue
+  physics: "#AED581",
+  // Light Green
+  rendering: "#FFB74D",
+  // Orange
+  animation: "#BA68C8",
+  // Purple
+  audio: "#F06292",
+  // Pink
+  ai: "#4DB6AC",
+  // Teal
+  networking: "#7986CB",
+  // Indigo
+  loading: "#FFD54F",
+  // Amber
+  gc: "#E57373",
+  // Red
+  vsync: "#90A4AE",
+  // Blue Grey
+  other: "#78909C"
+  // Grey
 };
 const DEFAULT_PROFILER_CONFIG = {
-    enabled: true,
-    deepProfiling: false,
-    gpuProfiling: true,
-    memoryProfiling: true,
-    maxFrames: 300,
-    sampleInterval: 0,
-    recordAllocations: false,
-    categorize: true,
-    autoCapture: false,
-    captureThreshold: 33.33, // 30 FPS
+  enabled: true,
+  deepProfiling: false,
+  gpuProfiling: true,
+  memoryProfiling: true,
+  maxFrames: 300,
+  sampleInterval: 0,
+  recordAllocations: false,
+  categorize: true,
+  autoCapture: false,
+  captureThreshold: 33.33
+  // 30 FPS
 };
-// ============================================================
-// Profiler Panel System
-// ============================================================
 class ProfilerPanel {
-    constructor(config) {
-        this.config = { ...DEFAULT_PROFILER_CONFIG };
-        this.frames = [];
-        this.currentFrame = null;
-        this.markerStack = [];
-        this.pendingGPUQueries = [];
-        // Tracking
-        this.frameNumber = 0;
-        this.lastFrameTimestamp = 0;
-        this.isRecording = false;
-        this.capturedFrames = [];
-        // Memory tracking
-        this.lastMemory = null;
-        this.allocationCounter = 0;
-        this.deallocationCounter = 0;
-        this.gcCounter = 0;
-        // GPU Tracking (WebGL/WebGPU)
-        this.gl = null;
-        // EXT_disjoint_timer_query_webgl2 / EXT_disjoint_timer_query extension; shape varies between vendors
-        this.gpuTimerExtension = null;
-        this.activeGPUQueries = new Map();
-        // Rendering stats (set externally)
-        this.renderStats = {
-            drawCalls: 0,
-            triangles: 0,
-            vertices: 0,
-            setPassCalls: 0,
-            batchCount: 0,
-            shadowCasters: 0,
-            visibleObjects: 0,
-        };
-        if (config) {
-            this.config = { ...this.config, ...config };
-        }
-    }
-    // ─── Configuration ─────────────────────────────────────
-    setConfig(config) {
-        this.config = { ...this.config, ...config };
-    }
-    getConfig() {
-        return { ...this.config };
-    }
-    enable() {
-        this.config.enabled = true;
-    }
-    disable() {
-        this.config.enabled = false;
-    }
-    isEnabled() {
-        return this.config.enabled;
-    }
-    // ─── GPU Timer Setup ───────────────────────────────────
-    initializeGPU(gl) {
-        this.gl = gl;
-        // Try to get EXT_disjoint_timer_query extension
-        if (gl instanceof WebGL2RenderingContext) {
-            this.gpuTimerExtension = gl.getExtension('EXT_disjoint_timer_query_webgl2');
-        }
-        else {
-            this.gpuTimerExtension = gl.getExtension('EXT_disjoint_timer_query');
-        }
-        if (!this.gpuTimerExtension) {
-            console.warn('GPU timer queries not available');
-        }
-    }
-    // ─── Frame Lifecycle ───────────────────────────────────
-    beginFrame() {
-        if (!this.config.enabled) {
-            return;
-        }
-        const now = performance.now();
-        const deltaTime = this.lastFrameTimestamp > 0 ? now - this.lastFrameTimestamp : 16.67;
-        this.lastFrameTimestamp = now;
-        this.currentFrame = {
-            frameNumber: this.frameNumber++,
-            timestamp: now,
-            deltaTime,
-            cpuTime: 0,
-            gpuTime: 0,
-            waitTime: 0,
-            markers: [],
-            gpuQueries: [],
-            memory: this.captureMemory(),
-            systemTimes: new Map(),
-            ...this.renderStats,
-        };
-        // Reset stats for new frame
-        this.renderStats = {
-            drawCalls: 0,
-            triangles: 0,
-            vertices: 0,
-            setPassCalls: 0,
-            batchCount: 0,
-            shadowCasters: 0,
-            visibleObjects: 0,
-        };
-    }
-    endFrame() {
-        if (!this.config.enabled || !this.currentFrame) {
-            return;
-        }
-        // Calculate total CPU time from markers
-        let cpuTime = 0;
-        for (const marker of this.currentFrame.markers) {
-            if (marker.depth === 0) {
-                cpuTime += marker.duration;
-            }
-        }
-        this.currentFrame.cpuTime = cpuTime;
-        // Collect GPU queries
-        this.collectGPUQueries();
-        // Calculate GPU time
-        let gpuTime = 0;
-        for (const query of this.currentFrame.gpuQueries) {
-            gpuTime += query.duration;
-        }
-        this.currentFrame.gpuTime = gpuTime;
-        // Calculate wait time (vsync, etc.)
-        this.currentFrame.waitTime = Math.max(0, this.currentFrame.deltaTime - cpuTime - gpuTime);
-        // Store frame
-        this.frames.push(this.currentFrame);
-        if (this.frames.length > this.config.maxFrames) {
-            this.frames.shift();
-        }
-        // Check for slow frame
-        if (this.config.autoCapture && this.currentFrame.deltaTime > this.config.captureThreshold) {
-            this.capturedFrames.push({ ...this.currentFrame });
-            this.onSlowFrame?.(this.currentFrame);
-        }
-        // Callback
-        this.onFrameComplete?.(this.currentFrame);
-        // Recording
-        if (this.isRecording) {
-            this.capturedFrames.push({ ...this.currentFrame });
-        }
-        this.currentFrame = null;
-        this.markerStack = [];
-    }
-    // ─── Markers ───────────────────────────────────────────
-    beginMarker(name, category = 'other') {
-        if (!this.config.enabled || !this.currentFrame) {
-            return;
-        }
-        const marker = {
-            id: `${name}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-            name,
-            category,
-            color: CATEGORY_COLORS[category],
-            startTime: performance.now(),
-            endTime: 0,
-            duration: 0,
-            depth: this.markerStack.length,
-            children: [],
-        };
-        if (this.markerStack.length > 0) {
-            // Add as child to current parent
-            this.markerStack[this.markerStack.length - 1].children.push(marker);
-        }
-        else {
-            // Top-level marker
-            this.currentFrame.markers.push(marker);
-        }
-        this.markerStack.push(marker);
-    }
-    endMarker() {
-        if (!this.config.enabled || this.markerStack.length === 0) {
-            return;
-        }
-        const marker = this.markerStack.pop();
-        marker.endTime = performance.now();
-        marker.duration = marker.endTime - marker.startTime;
-    }
-    /** Convenience method to wrap a function with profiling */
-    profile(name, category, fn) {
-        this.beginMarker(name, category);
-        try {
-            return fn();
-        }
-        finally {
-            this.endMarker();
-        }
-    }
-    /** Async version of profile */
-    async profileAsync(name, category, fn) {
-        this.beginMarker(name, category);
-        try {
-            return await fn();
-        }
-        finally {
-            this.endMarker();
-        }
-    }
-    // ─── System Timing ─────────────────────────────────────
-    recordSystemTime(systemName, time) {
-        if (!this.config.enabled || !this.currentFrame) {
-            return;
-        }
-        this.currentFrame.systemTimes.set(systemName, time);
-    }
-    // ─── Render Stats ──────────────────────────────────────
-    addDrawCall(triangles, vertices) {
-        this.renderStats.drawCalls++;
-        this.renderStats.triangles += triangles;
-        this.renderStats.vertices += vertices;
-    }
-    addBatch() {
-        this.renderStats.batchCount++;
-    }
-    addSetPassCall() {
-        this.renderStats.setPassCalls++;
-    }
-    setVisibleObjects(count) {
-        this.renderStats.visibleObjects = count;
-    }
-    setShadowCasters(count) {
-        this.renderStats.shadowCasters = count;
-    }
-    // ─── GPU Queries ───────────────────────────────────────
-    beginGPUQuery(name) {
-        if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension) {
-            return;
-        }
-        const gl = this.gl;
-        const query = gl.createQuery();
-        if (!query) {
-            return;
-        }
-        gl.beginQuery(this.gpuTimerExtension.TIME_ELAPSED_EXT, query);
-        this.activeGPUQueries.set(name, query);
-    }
-    endGPUQuery(name) {
-        if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension) {
-            return;
-        }
-        const gl = this.gl;
-        const query = this.activeGPUQueries.get(name);
-        if (!query) {
-            return;
-        }
-        gl.endQuery(this.gpuTimerExtension.TIME_ELAPSED_EXT);
-        this.pendingGPUQueries.push({
-            id: name,
-            name,
-            startTime: 0,
-            endTime: 0,
-            duration: 0,
-        });
-    }
-    collectGPUQueries() {
-        if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension || !this.currentFrame) {
-            return;
-        }
-        const gl = this.gl;
-        // Check for disjoint (GPU was reset, results invalid)
-        const disjoint = gl.getParameter(this.gpuTimerExtension.GPU_DISJOINT_EXT);
-        if (disjoint) {
-            // Discard all pending queries
-            this.pendingGPUQueries = [];
-            this.activeGPUQueries.clear();
-            return;
-        }
-        // Collect results from pending queries
-        for (const pendingQuery of this.pendingGPUQueries) {
-            const query = this.activeGPUQueries.get(pendingQuery.name);
-            if (!query) {
-                continue;
-            }
-            const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
-            if (available) {
-                const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
-                pendingQuery.duration = timeElapsed / 1000000; // Convert ns to ms
-                this.currentFrame.gpuQueries.push(pendingQuery);
-                gl.deleteQuery(query);
-                this.activeGPUQueries.delete(pendingQuery.name);
-            }
-        }
-        this.pendingGPUQueries = this.pendingGPUQueries.filter((q) => this.activeGPUQueries.has(q.name));
-    }
-    // ─── Memory ────────────────────────────────────────────
-    captureMemory() {
-        const perf = performance;
-        const snapshot = {
-            timestamp: performance.now(),
-            jsHeapUsed: perf.memory?.usedJSHeapSize ?? 0,
-            jsHeapTotal: perf.memory?.totalJSHeapSize ?? 0,
-            jsHeapLimit: perf.memory?.jsHeapSizeLimit ?? 0,
-            externalMemory: 0,
-            arrayBuffers: 0,
-            gpuTextures: 0,
-            gpuBuffers: 0,
-            gpuShaders: 0,
-            gpuRenderTargets: 0,
-            allocations: this.allocationCounter,
-            deallocations: this.deallocationCounter,
-            gcCollections: this.gcCounter,
-        };
-        // Detect GC by sudden memory drops
-        if (this.lastMemory && snapshot.jsHeapUsed < this.lastMemory.jsHeapUsed * 0.9) {
-            this.gcCounter++;
-        }
-        this.lastMemory = snapshot;
-        return snapshot;
-    }
-    trackAllocation(bytes) {
-        if (this.config.recordAllocations) {
-            this.allocationCounter += bytes;
-        }
-    }
-    trackDeallocation(bytes) {
-        if (this.config.recordAllocations) {
-            this.deallocationCounter += bytes;
-        }
-    }
-    setGPUMemory(textures, buffers, shaders, renderTargets) {
-        if (this.currentFrame) {
-            this.currentFrame.memory.gpuTextures = textures;
-            this.currentFrame.memory.gpuBuffers = buffers;
-            this.currentFrame.memory.gpuShaders = shaders;
-            this.currentFrame.memory.gpuRenderTargets = renderTargets;
-        }
-    }
-    // ─── Recording ─────────────────────────────────────────
-    startRecording() {
-        this.isRecording = true;
-        this.capturedFrames = [];
-    }
-    stopRecording() {
-        this.isRecording = false;
-        return [...this.capturedFrames];
-    }
-    clearRecording() {
-        this.capturedFrames = [];
-    }
-    isRecordingActive() {
-        return this.isRecording;
-    }
-    // ─── Data Access ───────────────────────────────────────
-    getFrames() {
-        return this.frames;
-    }
-    getLastFrame() {
-        return this.frames.length > 0 ? this.frames[this.frames.length - 1] : null;
-    }
-    getFrame(index) {
-        return this.frames[index] ?? null;
-    }
-    getFrameRange(start, end) {
-        return this.frames.slice(start, end);
-    }
-    getCapturedFrames() {
-        return this.capturedFrames;
-    }
-    // ─── Statistics ────────────────────────────────────────
-    getStats(frameCount = 60) {
-        const recentFrames = this.frames.slice(-frameCount);
-        if (recentFrames.length === 0) {
-            return {
-                avgFrameTime: 0,
-                avgCPUTime: 0,
-                avgGPUTime: 0,
-                avgFPS: 0,
-                minFPS: 0,
-                maxFPS: 0,
-                frame1Percent: 0,
-                frame01Percent: 0,
-                avgMemory: 0,
-                peakMemory: 0,
-                memoryGrowthRate: 0,
-                avgDrawCalls: 0,
-                avgBatches: 0,
-                avgTriangles: 0,
-                avgSetPassCalls: 0,
-            };
-        }
-        // Timing
-        const frameTimes = recentFrames.map((f) => f.deltaTime);
-        const cpuTimes = recentFrames.map((f) => f.cpuTime);
-        const gpuTimes = recentFrames.map((f) => f.gpuTime);
-        const avgFrameTime = frameTimes.reduce((a, b) => a + b, 0) / frameTimes.length;
-        const avgCPUTime = cpuTimes.reduce((a, b) => a + b, 0) / cpuTimes.length;
-        const avgGPUTime = gpuTimes.reduce((a, b) => a + b, 0) / gpuTimes.length;
-        const sortedFrameTimes = [...frameTimes].sort((a, b) => b - a);
-        const frame1Percent = sortedFrameTimes[Math.floor(sortedFrameTimes.length * 0.01)] ?? 0;
-        const frame01Percent = sortedFrameTimes[Math.floor(sortedFrameTimes.length * 0.001)] ?? 0;
-        const fpsValues = frameTimes.map((t) => (t > 0 ? 1000 / t : 0));
-        const avgFPS = fpsValues.reduce((a, b) => a + b, 0) / fpsValues.length;
-        const minFPS = Math.min(...fpsValues);
-        const maxFPS = Math.max(...fpsValues);
-        // Memory
-        const memories = recentFrames.map((f) => f.memory.jsHeapUsed);
-        const avgMemory = memories.reduce((a, b) => a + b, 0) / memories.length;
-        const peakMemory = Math.max(...memories);
-        const memoryGrowthRate = recentFrames.length > 1
-            ? ((memories[memories.length - 1] - memories[0]) /
-                (recentFrames[recentFrames.length - 1].timestamp - recentFrames[0].timestamp)) *
-                1000
-            : 0;
-        // Rendering
-        const avgDrawCalls = recentFrames.reduce((a, f) => a + f.drawCalls, 0) / recentFrames.length;
-        const avgBatches = recentFrames.reduce((a, f) => a + f.batchCount, 0) / recentFrames.length;
-        const avgTriangles = recentFrames.reduce((a, f) => a + f.triangles, 0) / recentFrames.length;
-        const avgSetPassCalls = recentFrames.reduce((a, f) => a + f.setPassCalls, 0) / recentFrames.length;
-        return {
-            avgFrameTime,
-            avgCPUTime,
-            avgGPUTime,
-            avgFPS,
-            minFPS,
-            maxFPS,
-            frame1Percent,
-            frame01Percent,
-            avgMemory,
-            peakMemory,
-            memoryGrowthRate,
-            avgDrawCalls,
-            avgBatches,
-            avgTriangles,
-            avgSetPassCalls,
-        };
-    }
-    // ─── Graph Data ────────────────────────────────────────
-    getFrameTimeGraph(frameCount = 300) {
-        const recentFrames = this.frames.slice(-frameCount);
-        const cpuData = [];
-        const gpuData = [];
-        const waitData = [];
-        for (let i = 0; i < recentFrames.length; i++) {
-            const f = recentFrames[i];
-            cpuData.push({ x: i, y: f.cpuTime });
-            gpuData.push({ x: i, y: f.gpuTime });
-            waitData.push({ x: i, y: f.waitTime });
-        }
-        const cpuValues = cpuData.map((p) => p.y);
-        const gpuValues = gpuData.map((p) => p.y);
-        const waitValues = waitData.map((p) => p.y);
-        return {
-            title: 'Frame Time',
-            yAxisLabel: 'Time',
-            yAxisUnit: 'ms',
-            series: [
-                {
-                    name: 'CPU',
-                    color: CATEGORY_COLORS.scripts,
-                    data: cpuData,
-                    minValue: Math.min(...cpuValues),
-                    maxValue: Math.max(...cpuValues),
-                    avgValue: cpuValues.reduce((a, b) => a + b, 0) / cpuValues.length || 0,
-                },
-                {
-                    name: 'GPU',
-                    color: CATEGORY_COLORS.rendering,
-                    data: gpuData,
-                    minValue: Math.min(...gpuValues),
-                    maxValue: Math.max(...gpuValues),
-                    avgValue: gpuValues.reduce((a, b) => a + b, 0) / gpuValues.length || 0,
-                },
-                {
-                    name: 'Wait',
-                    color: CATEGORY_COLORS.vsync,
-                    data: waitData,
-                    minValue: Math.min(...waitValues),
-                    maxValue: Math.max(...waitValues),
-                    avgValue: waitValues.reduce((a, b) => a + b, 0) / waitValues.length || 0,
-                },
-            ],
-            targetLine: 16.67, // 60 FPS
-            warningLine: 33.33, // 30 FPS
-        };
-    }
-    getMemoryGraph(frameCount = 300) {
-        const recentFrames = this.frames.slice(-frameCount);
-        const jsHeapData = [];
-        const gpuData = [];
-        for (let i = 0; i < recentFrames.length; i++) {
-            const f = recentFrames[i];
-            const jsHeapMB = f.memory.jsHeapUsed / (1024 * 1024);
-            const gpuMB = (f.memory.gpuTextures +
-                f.memory.gpuBuffers +
-                f.memory.gpuShaders +
-                f.memory.gpuRenderTargets) /
-                (1024 * 1024);
-            jsHeapData.push({ x: i, y: jsHeapMB });
-            gpuData.push({ x: i, y: gpuMB });
-        }
-        const jsValues = jsHeapData.map((p) => p.y);
-        const gpuValues = gpuData.map((p) => p.y);
-        return {
-            title: 'Memory',
-            yAxisLabel: 'Memory',
-            yAxisUnit: 'MB',
-            series: [
-                {
-                    name: 'JS Heap',
-                    color: '#4FC3F7',
-                    data: jsHeapData,
-                    minValue: Math.min(...jsValues),
-                    maxValue: Math.max(...jsValues),
-                    avgValue: jsValues.reduce((a, b) => a + b, 0) / jsValues.length || 0,
-                },
-                {
-                    name: 'GPU',
-                    color: '#FFB74D',
-                    data: gpuData,
-                    minValue: Math.min(...gpuValues),
-                    maxValue: Math.max(...gpuValues),
-                    avgValue: gpuValues.reduce((a, b) => a + b, 0) / gpuValues.length || 0,
-                },
-            ],
-        };
-    }
-    getRenderingGraph(frameCount = 300) {
-        const recentFrames = this.frames.slice(-frameCount);
-        const drawCallsData = [];
-        const batchesData = [];
-        const trianglesData = [];
-        for (let i = 0; i < recentFrames.length; i++) {
-            const f = recentFrames[i];
-            drawCallsData.push({ x: i, y: f.drawCalls });
-            batchesData.push({ x: i, y: f.batchCount });
-            trianglesData.push({ x: i, y: f.triangles / 1000 }); // In thousands
-        }
-        const dcValues = drawCallsData.map((p) => p.y);
-        const batchValues = batchesData.map((p) => p.y);
-        const triValues = trianglesData.map((p) => p.y);
-        return {
-            title: 'Rendering',
-            yAxisLabel: 'Count',
-            yAxisUnit: '',
-            series: [
-                {
-                    name: 'Draw Calls',
-                    color: '#E57373',
-                    data: drawCallsData,
-                    minValue: Math.min(...dcValues),
-                    maxValue: Math.max(...dcValues),
-                    avgValue: dcValues.reduce((a, b) => a + b, 0) / dcValues.length || 0,
-                },
-                {
-                    name: 'Batches',
-                    color: '#81C784',
-                    data: batchesData,
-                    minValue: Math.min(...batchValues),
-                    maxValue: Math.max(...batchValues),
-                    avgValue: batchValues.reduce((a, b) => a + b, 0) / batchValues.length || 0,
-                },
-                {
-                    name: 'Triangles (K)',
-                    color: '#64B5F6',
-                    data: trianglesData,
-                    minValue: Math.min(...triValues),
-                    maxValue: Math.max(...triValues),
-                    avgValue: triValues.reduce((a, b) => a + b, 0) / triValues.length || 0,
-                },
-            ],
-        };
-    }
-    // ─── Flame Graph Data ──────────────────────────────────
-    getFlameGraph(frame) {
-        // Returns markers in format suitable for flame graph visualization
-        return frame.markers;
-    }
-    // ─── System Breakdown ──────────────────────────────────
-    getSystemBreakdown(frameCount = 60) {
-        const recentFrames = this.frames.slice(-frameCount);
-        const totals = new Map();
-        for (const frame of recentFrames) {
-            for (const [system, time] of frame.systemTimes) {
-                totals.set(system, (totals.get(system) ?? 0) + time);
-            }
-        }
-        // Calculate averages
-        for (const [system, total] of totals) {
-            totals.set(system, total / recentFrames.length);
-        }
-        return totals;
-    }
-    // ─── Export/Import ─────────────────────────────────────
-    exportData() {
-        const exportData = {
-            version: 1,
-            config: this.config,
-            frames: this.frames.map((f) => ({
-                ...f,
-                systemTimes: Array.from(f.systemTimes.entries()),
-            })),
-            capturedFrames: this.capturedFrames.map((f) => ({
-                ...f,
-                systemTimes: Array.from(f.systemTimes.entries()),
-            })),
-        };
-        return JSON.stringify(exportData);
-    }
-    importData(json) {
-        try {
-            const data = JSON.parse(json);
-            if (data.version !== 1) {
-                throw new Error('Unsupported profiler data version');
-            }
-            this.config = { ...DEFAULT_PROFILER_CONFIG, ...data.config };
-            this.frames = data.frames.map((f) => ({
-                ...f,
-                systemTimes: new Map(f.systemTimes),
-            }));
-            this.capturedFrames = data.capturedFrames.map((f) => ({
-                ...f,
-                systemTimes: new Map(f.systemTimes),
-            }));
-        }
-        catch (error) {
-            console.error('Failed to import profiler data:', error);
-        }
-    }
-    // ─── Callbacks ─────────────────────────────────────────
-    setOnFrameComplete(callback) {
-        this.onFrameComplete = callback;
-    }
-    setOnSlowFrame(callback) {
-        this.onSlowFrame = callback;
-    }
-    // ─── Clear ─────────────────────────────────────────────
-    clear() {
-        this.frames = [];
-        this.capturedFrames = [];
-        this.frameNumber = 0;
-        this.lastFrameTimestamp = 0;
-        this.allocationCounter = 0;
-        this.deallocationCounter = 0;
-        this.gcCounter = 0;
-        this.lastMemory = null;
-    }
+  constructor(config) {
+    this.config = { ...DEFAULT_PROFILER_CONFIG };
+    this.frames = [];
+    this.currentFrame = null;
+    this.markerStack = [];
+    this.pendingGPUQueries = [];
+    this.frameNumber = 0;
+    this.lastFrameTimestamp = 0;
+    this.isRecording = false;
+    this.capturedFrames = [];
+    this.lastMemory = null;
+    this.allocationCounter = 0;
+    this.deallocationCounter = 0;
+    this.gcCounter = 0;
+    this.gl = null;
+    this.gpuTimerExtension = null;
+    this.activeGPUQueries = /* @__PURE__ */ new Map();
+    this.renderStats = {
+      drawCalls: 0,
+      triangles: 0,
+      vertices: 0,
+      setPassCalls: 0,
+      batchCount: 0,
+      shadowCasters: 0,
+      visibleObjects: 0
+    };
+    if (config) {
+      this.config = { ...this.config, ...config };
+    }
+  }
+  // ─── Configuration ─────────────────────────────────────
+  setConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+  getConfig() {
+    return { ...this.config };
+  }
+  enable() {
+    this.config.enabled = true;
+  }
+  disable() {
+    this.config.enabled = false;
+  }
+  isEnabled() {
+    return this.config.enabled;
+  }
+  // ─── GPU Timer Setup ───────────────────────────────────
+  initializeGPU(gl) {
+    this.gl = gl;
+    if (gl instanceof WebGL2RenderingContext) {
+      this.gpuTimerExtension = gl.getExtension("EXT_disjoint_timer_query_webgl2");
+    } else {
+      this.gpuTimerExtension = gl.getExtension("EXT_disjoint_timer_query");
+    }
+    if (!this.gpuTimerExtension) {
+      console.warn("GPU timer queries not available");
+    }
+  }
+  // ─── Frame Lifecycle ───────────────────────────────────
+  beginFrame() {
+    if (!this.config.enabled) {
+      return;
+    }
+    const now = performance.now();
+    const deltaTime = this.lastFrameTimestamp > 0 ? now - this.lastFrameTimestamp : 16.67;
+    this.lastFrameTimestamp = now;
+    this.currentFrame = {
+      frameNumber: this.frameNumber++,
+      timestamp: now,
+      deltaTime,
+      cpuTime: 0,
+      gpuTime: 0,
+      waitTime: 0,
+      markers: [],
+      gpuQueries: [],
+      memory: this.captureMemory(),
+      systemTimes: /* @__PURE__ */ new Map(),
+      ...this.renderStats
+    };
+    this.renderStats = {
+      drawCalls: 0,
+      triangles: 0,
+      vertices: 0,
+      setPassCalls: 0,
+      batchCount: 0,
+      shadowCasters: 0,
+      visibleObjects: 0
+    };
+  }
+  endFrame() {
+    if (!this.config.enabled || !this.currentFrame) {
+      return;
+    }
+    let cpuTime = 0;
+    for (const marker of this.currentFrame.markers) {
+      if (marker.depth === 0) {
+        cpuTime += marker.duration;
+      }
+    }
+    this.currentFrame.cpuTime = cpuTime;
+    this.collectGPUQueries();
+    let gpuTime = 0;
+    for (const query of this.currentFrame.gpuQueries) {
+      gpuTime += query.duration;
+    }
+    this.currentFrame.gpuTime = gpuTime;
+    this.currentFrame.waitTime = Math.max(0, this.currentFrame.deltaTime - cpuTime - gpuTime);
+    this.frames.push(this.currentFrame);
+    if (this.frames.length > this.config.maxFrames) {
+      this.frames.shift();
+    }
+    if (this.config.autoCapture && this.currentFrame.deltaTime > this.config.captureThreshold) {
+      this.capturedFrames.push({ ...this.currentFrame });
+      this.onSlowFrame?.(this.currentFrame);
+    }
+    this.onFrameComplete?.(this.currentFrame);
+    if (this.isRecording) {
+      this.capturedFrames.push({ ...this.currentFrame });
+    }
+    this.currentFrame = null;
+    this.markerStack = [];
+  }
+  // ─── Markers ───────────────────────────────────────────
+  beginMarker(name, category = "other") {
+    if (!this.config.enabled || !this.currentFrame) {
+      return;
+    }
+    const marker = {
+      id: `${name}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      name,
+      category,
+      color: CATEGORY_COLORS[category],
+      startTime: performance.now(),
+      endTime: 0,
+      duration: 0,
+      depth: this.markerStack.length,
+      children: []
+    };
+    if (this.markerStack.length > 0) {
+      this.markerStack[this.markerStack.length - 1].children.push(marker);
+    } else {
+      this.currentFrame.markers.push(marker);
+    }
+    this.markerStack.push(marker);
+  }
+  endMarker() {
+    if (!this.config.enabled || this.markerStack.length === 0) {
+      return;
+    }
+    const marker = this.markerStack.pop();
+    marker.endTime = performance.now();
+    marker.duration = marker.endTime - marker.startTime;
+  }
+  /** Convenience method to wrap a function with profiling */
+  profile(name, category, fn) {
+    this.beginMarker(name, category);
+    try {
+      return fn();
+    } finally {
+      this.endMarker();
+    }
+  }
+  /** Async version of profile */
+  async profileAsync(name, category, fn) {
+    this.beginMarker(name, category);
+    try {
+      return await fn();
+    } finally {
+      this.endMarker();
+    }
+  }
+  // ─── System Timing ─────────────────────────────────────
+  recordSystemTime(systemName, time) {
+    if (!this.config.enabled || !this.currentFrame) {
+      return;
+    }
+    this.currentFrame.systemTimes.set(systemName, time);
+  }
+  // ─── Render Stats ──────────────────────────────────────
+  addDrawCall(triangles, vertices) {
+    this.renderStats.drawCalls++;
+    this.renderStats.triangles += triangles;
+    this.renderStats.vertices += vertices;
+  }
+  addBatch() {
+    this.renderStats.batchCount++;
+  }
+  addSetPassCall() {
+    this.renderStats.setPassCalls++;
+  }
+  setVisibleObjects(count) {
+    this.renderStats.visibleObjects = count;
+  }
+  setShadowCasters(count) {
+    this.renderStats.shadowCasters = count;
+  }
+  // ─── GPU Queries ───────────────────────────────────────
+  beginGPUQuery(name) {
+    if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension) {
+      return;
+    }
+    const gl = this.gl;
+    const query = gl.createQuery();
+    if (!query) {
+      return;
+    }
+    gl.beginQuery(this.gpuTimerExtension.TIME_ELAPSED_EXT, query);
+    this.activeGPUQueries.set(name, query);
+  }
+  endGPUQuery(name) {
+    if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension) {
+      return;
+    }
+    const gl = this.gl;
+    const query = this.activeGPUQueries.get(name);
+    if (!query) {
+      return;
+    }
+    gl.endQuery(this.gpuTimerExtension.TIME_ELAPSED_EXT);
+    this.pendingGPUQueries.push({
+      id: name,
+      name,
+      startTime: 0,
+      endTime: 0,
+      duration: 0
+    });
+  }
+  collectGPUQueries() {
+    if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension || !this.currentFrame) {
+      return;
+    }
+    const gl = this.gl;
+    const disjoint = gl.getParameter(this.gpuTimerExtension.GPU_DISJOINT_EXT);
+    if (disjoint) {
+      this.pendingGPUQueries = [];
+      this.activeGPUQueries.clear();
+      return;
+    }
+    for (const pendingQuery of this.pendingGPUQueries) {
+      const query = this.activeGPUQueries.get(pendingQuery.name);
+      if (!query) {
+        continue;
+      }
+      const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
+      if (available) {
+        const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
+        pendingQuery.duration = timeElapsed / 1e6;
+        this.currentFrame.gpuQueries.push(pendingQuery);
+        gl.deleteQuery(query);
+        this.activeGPUQueries.delete(pendingQuery.name);
+      }
+    }
+    this.pendingGPUQueries = this.pendingGPUQueries.filter(
+      (q) => this.activeGPUQueries.has(q.name)
+    );
+  }
+  // ─── Memory ────────────────────────────────────────────
+  captureMemory() {
+    const perf = performance;
+    const snapshot = {
+      timestamp: performance.now(),
+      jsHeapUsed: perf.memory?.usedJSHeapSize ?? 0,
+      jsHeapTotal: perf.memory?.totalJSHeapSize ?? 0,
+      jsHeapLimit: perf.memory?.jsHeapSizeLimit ?? 0,
+      externalMemory: 0,
+      arrayBuffers: 0,
+      gpuTextures: 0,
+      gpuBuffers: 0,
+      gpuShaders: 0,
+      gpuRenderTargets: 0,
+      allocations: this.allocationCounter,
+      deallocations: this.deallocationCounter,
+      gcCollections: this.gcCounter
+    };
+    if (this.lastMemory && snapshot.jsHeapUsed < this.lastMemory.jsHeapUsed * 0.9) {
+      this.gcCounter++;
+    }
+    this.lastMemory = snapshot;
+    return snapshot;
+  }
+  trackAllocation(bytes) {
+    if (this.config.recordAllocations) {
+      this.allocationCounter += bytes;
+    }
+  }
+  trackDeallocation(bytes) {
+    if (this.config.recordAllocations) {
+      this.deallocationCounter += bytes;
+    }
+  }
+  setGPUMemory(textures, buffers, shaders, renderTargets) {
+    if (this.currentFrame) {
+      this.currentFrame.memory.gpuTextures = textures;
+      this.currentFrame.memory.gpuBuffers = buffers;
+      this.currentFrame.memory.gpuShaders = shaders;
+      this.currentFrame.memory.gpuRenderTargets = renderTargets;
+    }
+  }
+  // ─── Recording ─────────────────────────────────────────
+  startRecording() {
+    this.isRecording = true;
+    this.capturedFrames = [];
+  }
+  stopRecording() {
+    this.isRecording = false;
+    return [...this.capturedFrames];
+  }
+  clearRecording() {
+    this.capturedFrames = [];
+  }
+  isRecordingActive() {
+    return this.isRecording;
+  }
+  // ─── Data Access ───────────────────────────────────────
+  getFrames() {
+    return this.frames;
+  }
+  getLastFrame() {
+    return this.frames.length > 0 ? this.frames[this.frames.length - 1] : null;
+  }
+  getFrame(index) {
+    return this.frames[index] ?? null;
+  }
+  getFrameRange(start, end) {
+    return this.frames.slice(start, end);
+  }
+  getCapturedFrames() {
+    return this.capturedFrames;
+  }
+  // ─── Statistics ────────────────────────────────────────
+  getStats(frameCount = 60) {
+    const recentFrames = this.frames.slice(-frameCount);
+    if (recentFrames.length === 0) {
+      return {
+        avgFrameTime: 0,
+        avgCPUTime: 0,
+        avgGPUTime: 0,
+        avgFPS: 0,
+        minFPS: 0,
+        maxFPS: 0,
+        frame1Percent: 0,
+        frame01Percent: 0,
+        avgMemory: 0,
+        peakMemory: 0,
+        memoryGrowthRate: 0,
+        avgDrawCalls: 0,
+        avgBatches: 0,
+        avgTriangles: 0,
+        avgSetPassCalls: 0
+      };
+    }
+    const frameTimes = recentFrames.map((f) => f.deltaTime);
+    const cpuTimes = recentFrames.map((f) => f.cpuTime);
+    const gpuTimes = recentFrames.map((f) => f.gpuTime);
+    const avgFrameTime = frameTimes.reduce((a, b) => a + b, 0) / frameTimes.length;
+    const avgCPUTime = cpuTimes.reduce((a, b) => a + b, 0) / cpuTimes.length;
+    const avgGPUTime = gpuTimes.reduce((a, b) => a + b, 0) / gpuTimes.length;
+    const sortedFrameTimes = [...frameTimes].sort((a, b) => b - a);
+    const frame1Percent = sortedFrameTimes[Math.floor(sortedFrameTimes.length * 0.01)] ?? 0;
+    const frame01Percent = sortedFrameTimes[Math.floor(sortedFrameTimes.length * 1e-3)] ?? 0;
+    const fpsValues = frameTimes.map((t) => t > 0 ? 1e3 / t : 0);
+    const avgFPS = fpsValues.reduce((a, b) => a + b, 0) / fpsValues.length;
+    const minFPS = Math.min(...fpsValues);
+    const maxFPS = Math.max(...fpsValues);
+    const memories = recentFrames.map((f) => f.memory.jsHeapUsed);
+    const avgMemory = memories.reduce((a, b) => a + b, 0) / memories.length;
+    const peakMemory = Math.max(...memories);
+    const memoryGrowthRate = recentFrames.length > 1 ? (memories[memories.length - 1] - memories[0]) / (recentFrames[recentFrames.length - 1].timestamp - recentFrames[0].timestamp) * 1e3 : 0;
+    const avgDrawCalls = recentFrames.reduce((a, f) => a + f.drawCalls, 0) / recentFrames.length;
+    const avgBatches = recentFrames.reduce((a, f) => a + f.batchCount, 0) / recentFrames.length;
+    const avgTriangles = recentFrames.reduce((a, f) => a + f.triangles, 0) / recentFrames.length;
+    const avgSetPassCalls = recentFrames.reduce((a, f) => a + f.setPassCalls, 0) / recentFrames.length;
+    return {
+      avgFrameTime,
+      avgCPUTime,
+      avgGPUTime,
+      avgFPS,
+      minFPS,
+      maxFPS,
+      frame1Percent,
+      frame01Percent,
+      avgMemory,
+      peakMemory,
+      memoryGrowthRate,
+      avgDrawCalls,
+      avgBatches,
+      avgTriangles,
+      avgSetPassCalls
+    };
+  }
+  // ─── Graph Data ────────────────────────────────────────
+  getFrameTimeGraph(frameCount = 300) {
+    const recentFrames = this.frames.slice(-frameCount);
+    const cpuData = [];
+    const gpuData = [];
+    const waitData = [];
+    for (let i = 0; i < recentFrames.length; i++) {
+      const f = recentFrames[i];
+      cpuData.push({ x: i, y: f.cpuTime });
+      gpuData.push({ x: i, y: f.gpuTime });
+      waitData.push({ x: i, y: f.waitTime });
+    }
+    const cpuValues = cpuData.map((p) => p.y);
+    const gpuValues = gpuData.map((p) => p.y);
+    const waitValues = waitData.map((p) => p.y);
+    return {
+      title: "Frame Time",
+      yAxisLabel: "Time",
+      yAxisUnit: "ms",
+      series: [
+        {
+          name: "CPU",
+          color: CATEGORY_COLORS.scripts,
+          data: cpuData,
+          minValue: Math.min(...cpuValues),
+          maxValue: Math.max(...cpuValues),
+          avgValue: cpuValues.reduce((a, b) => a + b, 0) / cpuValues.length || 0
+        },
+        {
+          name: "GPU",
+          color: CATEGORY_COLORS.rendering,
+          data: gpuData,
+          minValue: Math.min(...gpuValues),
+          maxValue: Math.max(...gpuValues),
+          avgValue: gpuValues.reduce((a, b) => a + b, 0) / gpuValues.length || 0
+        },
+        {
+          name: "Wait",
+          color: CATEGORY_COLORS.vsync,
+          data: waitData,
+          minValue: Math.min(...waitValues),
+          maxValue: Math.max(...waitValues),
+          avgValue: waitValues.reduce((a, b) => a + b, 0) / waitValues.length || 0
+        }
+      ],
+      targetLine: 16.67,
+      // 60 FPS
+      warningLine: 33.33
+      // 30 FPS
+    };
+  }
+  getMemoryGraph(frameCount = 300) {
+    const recentFrames = this.frames.slice(-frameCount);
+    const jsHeapData = [];
+    const gpuData = [];
+    for (let i = 0; i < recentFrames.length; i++) {
+      const f = recentFrames[i];
+      const jsHeapMB = f.memory.jsHeapUsed / (1024 * 1024);
+      const gpuMB = (f.memory.gpuTextures + f.memory.gpuBuffers + f.memory.gpuShaders + f.memory.gpuRenderTargets) / (1024 * 1024);
+      jsHeapData.push({ x: i, y: jsHeapMB });
+      gpuData.push({ x: i, y: gpuMB });
+    }
+    const jsValues = jsHeapData.map((p) => p.y);
+    const gpuValues = gpuData.map((p) => p.y);
+    return {
+      title: "Memory",
+      yAxisLabel: "Memory",
+      yAxisUnit: "MB",
+      series: [
+        {
+          name: "JS Heap",
+          color: "#4FC3F7",
+          data: jsHeapData,
+          minValue: Math.min(...jsValues),
+          maxValue: Math.max(...jsValues),
+          avgValue: jsValues.reduce((a, b) => a + b, 0) / jsValues.length || 0
+        },
+        {
+          name: "GPU",
+          color: "#FFB74D",
+          data: gpuData,
+          minValue: Math.min(...gpuValues),
+          maxValue: Math.max(...gpuValues),
+          avgValue: gpuValues.reduce((a, b) => a + b, 0) / gpuValues.length || 0
+        }
+      ]
+    };
+  }
+  getRenderingGraph(frameCount = 300) {
+    const recentFrames = this.frames.slice(-frameCount);
+    const drawCallsData = [];
+    const batchesData = [];
+    const trianglesData = [];
+    for (let i = 0; i < recentFrames.length; i++) {
+      const f = recentFrames[i];
+      drawCallsData.push({ x: i, y: f.drawCalls });
+      batchesData.push({ x: i, y: f.batchCount });
+      trianglesData.push({ x: i, y: f.triangles / 1e3 });
+    }
+    const dcValues = drawCallsData.map((p) => p.y);
+    const batchValues = batchesData.map((p) => p.y);
+    const triValues = trianglesData.map((p) => p.y);
+    return {
+      title: "Rendering",
+      yAxisLabel: "Count",
+      yAxisUnit: "",
+      series: [
+        {
+          name: "Draw Calls",
+          color: "#E57373",
+          data: drawCallsData,
+          minValue: Math.min(...dcValues),
+          maxValue: Math.max(...dcValues),
+          avgValue: dcValues.reduce((a, b) => a + b, 0) / dcValues.length || 0
+        },
+        {
+          name: "Batches",
+          color: "#81C784",
+          data: batchesData,
+          minValue: Math.min(...batchValues),
+          maxValue: Math.max(...batchValues),
+          avgValue: batchValues.reduce((a, b) => a + b, 0) / batchValues.length || 0
+        },
+        {
+          name: "Triangles (K)",
+          color: "#64B5F6",
+          data: trianglesData,
+          minValue: Math.min(...triValues),
+          maxValue: Math.max(...triValues),
+          avgValue: triValues.reduce((a, b) => a + b, 0) / triValues.length || 0
+        }
+      ]
+    };
+  }
+  // ─── Flame Graph Data ──────────────────────────────────
+  getFlameGraph(frame) {
+    return frame.markers;
+  }
+  // ─── System Breakdown ──────────────────────────────────
+  getSystemBreakdown(frameCount = 60) {
+    const recentFrames = this.frames.slice(-frameCount);
+    const totals = /* @__PURE__ */ new Map();
+    for (const frame of recentFrames) {
+      for (const [system, time] of frame.systemTimes) {
+        totals.set(system, (totals.get(system) ?? 0) + time);
+      }
+    }
+    for (const [system, total] of totals) {
+      totals.set(system, total / recentFrames.length);
+    }
+    return totals;
+  }
+  // ─── Export/Import ─────────────────────────────────────
+  exportData() {
+    const exportData = {
+      version: 1,
+      config: this.config,
+      frames: this.frames.map((f) => ({
+        ...f,
+        systemTimes: Array.from(f.systemTimes.entries())
+      })),
+      capturedFrames: this.capturedFrames.map((f) => ({
+        ...f,
+        systemTimes: Array.from(f.systemTimes.entries())
+      }))
+    };
+    return JSON.stringify(exportData);
+  }
+  importData(json) {
+    try {
+      const data = JSON.parse(json);
+      if (data.version !== 1) {
+        throw new Error("Unsupported profiler data version");
+      }
+      this.config = { ...DEFAULT_PROFILER_CONFIG, ...data.config };
+      this.frames = data.frames.map((f) => ({
+        ...f,
+        systemTimes: new Map(f.systemTimes)
+      }));
+      this.capturedFrames = data.capturedFrames.map((f) => ({
+        ...f,
+        systemTimes: new Map(f.systemTimes)
+      }));
+    } catch (error) {
+      console.error("Failed to import profiler data:", error);
+    }
+  }
+  // ─── Callbacks ─────────────────────────────────────────
+  setOnFrameComplete(callback) {
+    this.onFrameComplete = callback;
+  }
+  setOnSlowFrame(callback) {
+    this.onSlowFrame = callback;
+  }
+  // ─── Clear ─────────────────────────────────────────────
+  clear() {
+    this.frames = [];
+    this.capturedFrames = [];
+    this.frameNumber = 0;
+    this.lastFrameTimestamp = 0;
+    this.allocationCounter = 0;
+    this.deallocationCounter = 0;
+    this.gcCounter = 0;
+    this.lastMemory = null;
+  }
 }
-// ============================================================
-// Factory Functions
-// ============================================================
 function createProfilerPanel(config) {
-    return new ProfilerPanel(config);
+  return new ProfilerPanel(config);
 }
-// ============================================================
-// Quick Stats Overlay Text Generator
-// ============================================================
 function generateStatsOverlay(panel) {
-    const stats = panel.getStats();
-    panel.getLastFrame();
-    return [
-        `FPS: ${stats.avgFPS.toFixed(1)} (${stats.minFPS.toFixed(1)}-${stats.maxFPS.toFixed(1)})`,
-        `Frame: ${stats.avgFrameTime.toFixed(2)}ms`,
-        `  CPU: ${stats.avgCPUTime.toFixed(2)}ms`,
-        `  GPU: ${stats.avgGPUTime.toFixed(2)}ms`,
-        ``,
-        `Memory: ${(stats.avgMemory / (1024 * 1024)).toFixed(1)}MB`,
-        `  Peak: ${(stats.peakMemory / (1024 * 1024)).toFixed(1)}MB`,
-        ``,
-        `Draw Calls: ${stats.avgDrawCalls.toFixed(0)}`,
-        `Batches: ${stats.avgBatches.toFixed(0)}`,
-        `Triangles: ${(stats.avgTriangles / 1000).toFixed(1)}K`,
-        ``,
-        `1% Low: ${stats.frame1Percent.toFixed(2)}ms`,
-        `0.1% Low: ${stats.frame01Percent.toFixed(2)}ms`,
-    ];
+  const stats = panel.getStats();
+  panel.getLastFrame();
+  return [
+    `FPS: ${stats.avgFPS.toFixed(1)} (${stats.minFPS.toFixed(1)}-${stats.maxFPS.toFixed(1)})`,
+    `Frame: ${stats.avgFrameTime.toFixed(2)}ms`,
+    `  CPU: ${stats.avgCPUTime.toFixed(2)}ms`,
+    `  GPU: ${stats.avgGPUTime.toFixed(2)}ms`,
+    ``,
+    `Memory: ${(stats.avgMemory / (1024 * 1024)).toFixed(1)}MB`,
+    `  Peak: ${(stats.peakMemory / (1024 * 1024)).toFixed(1)}MB`,
+    ``,
+    `Draw Calls: ${stats.avgDrawCalls.toFixed(0)}`,
+    `Batches: ${stats.avgBatches.toFixed(0)}`,
+    `Triangles: ${(stats.avgTriangles / 1e3).toFixed(1)}K`,
+    ``,
+    `1% Low: ${stats.frame1Percent.toFixed(2)}ms`,
+    `0.1% Low: ${stats.frame01Percent.toFixed(2)}ms`
+  ];
 }
-
-export { CATEGORY_COLORS, DEFAULT_PROFILER_CONFIG, ProfilerPanel, createProfilerPanel, generateStatsOverlay };
+export {
+  CATEGORY_COLORS,
+  DEFAULT_PROFILER_CONFIG,
+  ProfilerPanel,
+  createProfilerPanel,
+  generateStatsOverlay
+};