@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/components/ui/performance-demo.esm.js

@@ -1,596 +1,110 @@
-import React, { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Badge } from './badge'
-import { 
-  usePerformance,
-  useFrameRate,
-  useMemoryUsage,
-  useBatteryStatus,
-  usePerformanceThrottling
-} from '../../hooks'
-import { useDevice } from '../../hooks/use-device'
-
-export const PerformanceDemo: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<'overview' | 'fps' | 'memory' | 'battery' | 'throttling'>('overview')
-  const [showRecommendations, setShowRecommendations] = useState(false)
-  
-  const device = useDevice()
-  
-  // Main performance hook
-  const {
-    throttlingEnabled,
-    throttlingReason,
-    performanceMode,
-    getOptimizationRecommendations
-  } = usePerformance({
-    callbacks: {
-      onFPSWarning: (fps) => console.warn(`FPS Warning: ${fps}`),
-      onMemoryWarning: (usage) => console.warn(`Memory Warning: ${(usage * 100).toFixed(1)}%`),
-      onBatteryLow: (level) => console.warn(`Battery Low: ${(level * 100).toFixed(1)}%`),
-      onPerformanceModeChange: (mode) => console.log(`Performance mode changed to: ${mode}`),
-      onThrottlingChange: (enabled, reason) => console.log(`Throttling ${enabled ? 'enabled' : 'disabled'}: ${reason}`)
-    }
-  })
-
-  // Specialized hooks
-  const {
-    metrics: fpsMetrics,
-    performanceScore: fpsScore,
-    getPerformanceInsights: getFPSInsights
-  } = useFrameRate({
-    callbacks: {
-      onFPSWarning: (fps) => console.warn(`Frame rate warning: ${fps} FPS`),
-      onFPSDrop: (fps, previous) => console.warn(`FPS drop detected: ${previous} → ${fps}`)
-    }
-  })
-
-  const {
-    metrics: memoryMetrics,
-    memoryTrend,
-    memoryLeakDetected,
-    getOptimizationRecommendations: getMemoryRecommendations,
-    getCleanupSuggestions: getMemoryCleanupSuggestions
-  } = useMemoryUsage({
-    callbacks: {
-      onMemoryWarning: (usage) => console.warn(`Memory usage warning: ${(usage * 100).toFixed(1)}%`),
-      onMemoryLeakDetected: (trend) => console.warn(`Memory leak detected: ${trend} trend`)
-    }
-  })
-
-  const {
-    metrics: batteryMetrics,
-    batteryLevel,
-    isCharging,
-    isLowPowerMode,
-    isCriticalBattery,
-    getOptimizationRecommendations: getBatteryRecommendations,
-    getPowerSavingSuggestions: getBatteryPowerSuggestions,
-    getBatteryStatus: getBatteryStatusText
-  } = useBatteryStatus({
-    callbacks: {
-      onBatteryLow: (level) => console.warn(`Battery low: ${(level * 100).toFixed(1)}%`),
-      onBatteryCritical: (level) => console.error(`Battery critical: ${(level * 100).toFixed(1)}%`)
-    }
-  })
-
-  const {
-    metrics,
-    isThrottling,
-    throttleLevel,
-    optimizations,
-    recommendations,
-    performanceSettings,
-
-  } = usePerformanceThrottling({
-    enablePerformanceMonitoring: true,
-    enableAutomaticThrottling: true,
-    enableUserExperienceOptimization: true,
-    enableBatteryPreservation: true
-  }, {
-    onPerformanceWarning: (metrics) => console.log('Performance warning:', metrics),
-    onThrottlingApplied: (level, reason) => console.log('Throttling applied:', level, reason),
-    onPerformanceRecovery: (metrics) => console.log('Performance recovery:', metrics),
-    onUserExperienceOptimized: (optimization) => console.log('User experience optimized:', optimization)
-  })
-
-  // Performance score color mapping
-  const getScoreColor = (score: string) => {
-    switch (score) {
-      case 'excellent': return 'text-green-600 bg-green-100'
-      case 'good': return 'text-blue-600 bg-blue-100'
-      case 'fair': return 'text-yellow-600 bg-yellow-100'
-      case 'poor': return 'text-red-600 bg-red-100'
-      default: return 'text-gray-600 bg-gray-100'
-    }
-  }
-
-  // Performance mode color mapping
-  const getModeColor = (mode: string) => {
-    switch (mode) {
-      case 'high': return 'text-green-600 bg-green-100'
-      case 'medium': return 'text-yellow-600 bg-yellow-100'
-      case 'low': return 'text-red-600 bg-red-100'
-      default: return 'text-gray-600 bg-gray-100'
-    }
-  }
-
-  // Throttling level color mapping
-  const getThrottlingColor = (level: string) => {
-    switch (level) {
-      case 'none': return 'text-green-600 bg-green-100'
-      case 'light': return 'text-blue-600 bg-blue-100'
-      case 'moderate': return 'text-yellow-600 bg-yellow-100'
-      case 'aggressive': return 'text-red-600 bg-red-100'
-      default: return 'text-gray-600 bg-gray-100'
-    }
-  }
-
-  // Memory trend icon
-  const getMemoryTrendIcon = (trend: string) => {
-    switch (trend) {
-      case 'increasing': return '📈'
-      case 'decreasing': return '📉'
-      case 'stable': return '➡️'
-      default: return '❓'
-    }
-  }
-
-  // Battery icon
-  const getBatteryIcon = (level: number, charging: boolean) => {
-    if (charging) return '🔌'
-    if (level <= 0.15) return '🔴'
-    if (level <= 0.3) return '🟠'
-    if (level <= 0.5) return '🟡'
-    return '🟢'
-  }
-
-  const tabs = [
-    { id: 'overview', label: 'Overview', icon: '📊' },
-    { id: 'fps', label: 'Frame Rate', icon: '🎬' },
-    { id: 'memory', label: 'Memory', icon: '🧠' },
-    { id: 'battery', label: 'Battery', icon: '🔋' },
-    { id: 'throttling', label: 'Throttling', icon: '⚡' }
-  ]
-
-  return (
-    <div className="space-y-6">
-      {/* Tab Navigation */}
-      <div className="flex flex-wrap gap-2 border-b pb-4">
-        {tabs.map((tab) => (
-          <Button
-            key={tab.id}
-            variant={activeTab === tab.id ? 'default' : 'outline'}
-            size="sm"
-            onClick={() => setActiveTab(tab.id as any)}
-            className="flex items-center gap-2"
-          >
-            <span>{tab.icon}</span>
-            {tab.label}
-          </Button>
-        ))}
-      </div>
-
-      {/* Overview Tab */}
-      {activeTab === 'overview' && (
-        <div className="space-y-6">
-          {/* Performance Summary */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                🎯 Performance Summary
-                <Badge variant={performanceMode === 'high' ? 'default' : 'secondary'}>
-                  {performanceMode.toUpperCase()} MODE
-                </Badge>
-              </CardTitle>
-              <CardDescription>
-                Real-time performance overview and system status
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                {/* FPS Status */}
-                <div className="text-center p-4 border rounded-lg">
-                  <div className="text-2xl font-bold text-blue-600">{fpsMetrics.fps}</div>
-                  <div className="text-sm text-gray-600">FPS</div>
-                  <Badge className={`mt-2 ${getScoreColor(fpsScore)}`}>
-                    {fpsScore}
-                  </Badge>
-                </div>
-
-                {/* Memory Status */}
-                <div className="text-center p-4 border rounded-lg">
-                  <div className="text-2xl font-bold text-purple-600">
-                    {memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A'}%
-                  </div>
-                  <div className="text-sm text-gray-600">Memory Usage</div>
-                  <div className="flex items-center justify-center gap-1 mt-2">
-                    <span>{getMemoryTrendIcon(memoryTrend)}</span>
-                    <Badge variant={memoryLeakDetected ? 'destructive' : 'secondary'}>
-                      {memoryLeakDetected ? 'Leak Detected' : memoryTrend}
-                    </Badge>
-                  </div>
-                </div>
-
-                {/* Battery Status */}
-                <div className="text-center p-4 border rounded-lg">
-                  <div className="text-2xl font-bold text-green-600">
-                    {getBatteryIcon(batteryLevel || 1, isCharging)}
-                  </div>
-                  <div className="text-sm text-gray-600">Battery</div>
-                  <Badge variant={isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default'}>
-                    {getBatteryStatusText()}
-                  </Badge>
-                </div>
-              </div>
-
-              {/* Throttling Status */}
-              {throttlingEnabled && (
-                <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
-                  <div className="flex items-center gap-2">
-                    <span className="text-yellow-600">⚠️</span>
-                    <div>
-                      <div className="font-medium text-yellow-800">Performance Throttling Active</div>
-                      <div className="text-sm text-yellow-700">{throttlingReason}</div>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {/* Recommendations Toggle */}
-              <Button
-                variant="outline"
-                onClick={() => setShowRecommendations(!showRecommendations)}
-                className="w-full"
-              >
-                {showRecommendations ? 'Hide' : 'Show'} Performance Recommendations
-              </Button>
-
-              {/* Performance Recommendations */}
-              {showRecommendations && (
-                <div className="space-y-3">
-                  <h4 className="font-medium text-gray-900">Optimization Recommendations:</h4>
-                  <ul className="space-y-2 text-sm text-gray-700">
-                    {getOptimizationRecommendations().map((rec, index) => (
-                      <li key={index} className="flex items-start gap-2">
-                        <span className="text-blue-500">•</span>
-                        {rec}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-
-          {/* Device Information */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                📱 Device Information
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-                <div>
-                  <span className="font-medium">Device Type:</span> {device.screenSize}
-                </div>
-                <div>
-                  <span className="font-medium">Screen Size:</span> {device.screenSize}
-                </div>
-                <div>
-                  <span className="font-medium">Orientation:</span> {device.orientation}
-                </div>
-                <div>
-                  <span className="font-medium">Touch Device:</span> {device.touchDevice ? 'Yes' : 'No'}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      )}
-
-      {/* Frame Rate Tab */}
-      {activeTab === 'fps' && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              🎬 Frame Rate Monitoring
-              <Badge className={getScoreColor(fpsScore)}>
-                {fpsScore.toUpperCase()}
-              </Badge>
-            </CardTitle>
-            <CardDescription>
-              Real-time FPS tracking and performance analysis
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-blue-600">{fpsMetrics.fps}</div>
-                <div className="text-xs text-gray-600">Current FPS</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-green-600">{fpsMetrics.averageFPS}</div>
-                <div className="text-xs text-gray-600">Average FPS</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-purple-600">{fpsMetrics.minFPS}</div>
-                <div className="text-xs text-gray-600">Min FPS</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-orange-600">{fpsMetrics.maxFPS}</div>
-                <div className="text-xs text-gray-600">Max FPS</div>
-              </div>
-            </div>
-
-            <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-              <h4 className="font-medium text-blue-800 mb-2">Performance Insights:</h4>
-              <ul className="space-y-1 text-sm text-blue-700">
-                {getFPSInsights().map((insight, index) => (
-                  <li key={index} className="flex items-start gap-2">
-                    <span className="text-blue-500">•</span>
-                    {insight}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Memory Tab */}
-      {activeTab === 'memory' && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              🧠 Memory Usage Monitoring
-              <Badge variant={memoryLeakDetected ? 'destructive' : 'secondary'}>
-                {memoryLeakDetected ? 'LEAK DETECTED' : memoryTrend.toUpperCase()}
-              </Badge>
-            </CardTitle>
-            <CardDescription>
-              Memory usage tracking and leak detection
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-purple-600">
-                  {memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A'}%
-                </div>
-                <div className="text-xs text-gray-600">Usage</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-blue-600">
-                  {memoryMetrics.usedJSHeapSize ? (memoryMetrics.usedJSHeapSize / 1024 / 1024).toFixed(1) : 'N/A'} MB
-                </div>
-                <div className="text-xs text-gray-600">Used</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-green-600">
-                  {memoryMetrics.jsHeapSizeLimit ? (memoryMetrics.jsHeapSizeLimit / 1024 / 1024).toFixed(1) : 'N/A'} MB
-                </div>
-                <div className="text-xs text-gray-600">Limit</div>
-              </div>
-            </div>
-
-            <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
-              <h4 className="font-medium text-purple-800 mb-2">Memory Optimization:</h4>
-              <ul className="space-y-1 text-sm text-purple-700">
-                {getMemoryRecommendations().map((rec, index) => (
-                  <li key={index} className="flex items-start gap-2">
-                    <span className="text-purple-500">•</span>
-                    {rec}
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {memoryLeakDetected && (
-              <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
-                <h4 className="font-medium text-red-800 mb-2">Memory Leak Cleanup Suggestions:</h4>
-                <ul className="space-y-1 text-sm text-red-700">
-                  {getMemoryCleanupSuggestions().map((suggestion, index) => (
-                    <li key={index} className="flex items-start gap-2">
-                      <span className="text-red-500">•</span>
-                      {suggestion}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Battery Tab */}
-      {activeTab === 'battery' && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              🔋 Battery Status Monitoring
-              <Badge variant={isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default'}>
-                {getBatteryStatusText()}
-              </Badge>
-            </CardTitle>
-            <CardDescription>
-              Battery level monitoring and power optimization
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-2xl">{getBatteryIcon(batteryLevel || 1, isCharging)}</div>
-                <div className="text-xl font-bold text-green-600">
-                  {batteryLevel ? (batteryLevel * 100).toFixed(1) : 'N/A'}%
-                </div>
-                <div className="text-xs text-gray-600">Level</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-blue-600">
-                  {isCharging ? 'Yes' : 'No'}
-                </div>
-                <div className="text-xs text-gray-600">Charging</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-purple-600">
-                  {batteryMetrics.chargingTime || 'N/A'}
-                </div>
-                <div className="text-xs text-gray-600">Charging Time</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-orange-600">
-                  {batteryMetrics.dischargingTime || 'N/A'}
-                </div>
-                <div className="text-xs text-gray-600">Discharge Time</div>
-              </div>
-            </div>
-
-            <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
-              <h4 className="font-medium text-green-800 mb-2">Battery Optimization:</h4>
-              <ul className="space-y-1 text-sm text-green-700">
-                {getBatteryRecommendations().map((rec, index) => (
-                  <li key={index} className="flex items-start gap-2">
-                    <span className="text-green-500">•</span>
-                    {rec}
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {(isLowPowerMode || isCriticalBattery) && (
-              <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
-                <h4 className="font-medium text-yellow-800 mb-2">Power Saving Suggestions:</h4>
-                <ul className="space-y-1 text-sm text-yellow-700">
-                  {getBatteryPowerSuggestions().map((suggestion, index) => (
-                    <li key={index} className="flex items-start gap-2">
-                      <span className="text-yellow-500">•</span>
-                      {suggestion}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Throttling Tab */}
-      {activeTab === 'throttling' && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              ⚡ Performance Throttling
-                              <Badge className={getThrottlingColor(throttleLevel)}>
-                  {throttleLevel.toUpperCase()}
-                </Badge>
-            </CardTitle>
-            <CardDescription>
-              Automatic and manual performance throttling controls
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-blue-600">
-                  {isThrottling ? 'Active' : 'Inactive'}
-                </div>
-                <div className="text-xs text-gray-600">Throttling Status</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <Badge className={getModeColor(performanceSettings.animationQuality)}>
-                  {performanceSettings.animationQuality.toUpperCase()}
-                </Badge>
-                <div className="text-xs text-gray-600 mt-1">Performance Mode</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-xl font-bold text-green-600">
-                  {performanceSettings.memoryOptimization ? 'Yes' : 'No'}
-                </div>
-                <div className="text-xs text-gray-600">Battery Optimized</div>
-              </div>
-            </div>
-
-            {/* Throttling Status */}
-            <div className="flex flex-wrap gap-2">
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-lg font-bold text-blue-600">
-                  {throttleLevel}
-                </div>
-                <div className="text-xs text-gray-600">Current Level</div>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <div className="text-lg font-bold text-green-600">
-                  {isThrottling ? 'Active' : 'Inactive'}
-                </div>
-                <div className="text-xs text-gray-600">Throttling Status</div>
-              </div>
-            </div>
-
-            {/* Performance Settings */}
-            <div className="space-y-2">
-              <h4 className="font-medium text-gray-900">Performance Settings:</h4>
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div>
-                  <span className="font-medium">Max Concurrent Animations:</span>
-                  <div className="text-blue-600">{performanceSettings.maxConcurrentAnimations}</div>
-                </div>
-                <div>
-                  <span className="font-medium">Frame Rate Limit:</span>
-                  <div className="text-blue-600">{performanceSettings.frameRateLimit}fps</div>
-                </div>
-                <div>
-                  <span className="font-medium">Animation Quality:</span>
-                  <div className="text-blue-600">{performanceSettings.animationQuality}</div>
-                </div>
-                <div>
-                  <span className="font-medium">Memory Optimization:</span>
-                  <div className="text-blue-600">{performanceSettings.memoryOptimization ? 'Yes' : 'No'}</div>
-                </div>
-              </div>
-            </div>
-
-            {/* Throttling Information */}
-            {isThrottling && (
-              <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
-                <h4 className="font-medium text-yellow-800 mb-2">Throttling Information:</h4>
-                <div className="text-sm text-yellow-700 space-y-1">
-                  <div><strong>Level:</strong> {throttleLevel}</div>
-                  <div><strong>Performance Score:</strong> {metrics.performanceScore}</div>
-                  <div><strong>FPS:</strong> {metrics.fps}</div>
-                </div>
-              </div>
-            )}
-
-            {/* Recommendations */}
-            <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-              <h4 className="font-medium text-blue-800 mb-2">Throttling Recommendations:</h4>
-              <ul className="space-y-1 text-sm text-blue-700">
-                {recommendations.map((rec, index) => (
-                  <li key={index} className="flex items-start gap-2">
-                    <span className="text-blue-500">•</span>
-                    {rec}
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Optimization Suggestions */}
-            <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
-              <h4 className="font-medium text-green-800 mb-2">Optimization Suggestions:</h4>
-              <ul className="space-y-1 text-sm text-green-700">
-                {optimizations.map((suggestion, index) => (
-                  <li key={index} className="flex items-start gap-2">
-                    <span className="text-green-500">•</span>
-                    {suggestion}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  )
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Button } from './button';
+import { Badge } from './badge';
+import { usePerformance, useFrameRate, useMemoryUsage, useBatteryStatus, usePerformanceThrottling } from '../../hooks';
+import { useDevice } from '../../hooks/use-device';
+export const PerformanceDemo = () => {
+    const [activeTab, setActiveTab] = useState('overview');
+    const [showRecommendations, setShowRecommendations] = useState(false);
+    const device = useDevice();
+    // Main performance hook
+    const { throttlingEnabled, throttlingReason, performanceMode, getOptimizationRecommendations } = usePerformance({
+        callbacks: {
+            onFPSWarning: (fps) => console.warn(`FPS Warning: ${fps}`),
+            onMemoryWarning: (usage) => console.warn(`Memory Warning: ${(usage * 100).toFixed(1)}%`),
+            onBatteryLow: (level) => console.warn(`Battery Low: ${(level * 100).toFixed(1)}%`),
+            onPerformanceModeChange: (mode) => console.log(`Performance mode changed to: ${mode}`),
+            onThrottlingChange: (enabled, reason) => console.log(`Throttling ${enabled ? 'enabled' : 'disabled'}: ${reason}`)
+        }
+    });
+    // Specialized hooks
+    const { metrics: fpsMetrics, performanceScore: fpsScore, getPerformanceInsights: getFPSInsights } = useFrameRate({
+        callbacks: {
+            onFPSWarning: (fps) => console.warn(`Frame rate warning: ${fps} FPS`),
+            onFPSDrop: (fps, previous) => console.warn(`FPS drop detected: ${previous} → ${fps}`)
+        }
+    });
+    const { metrics: memoryMetrics, memoryTrend, memoryLeakDetected, getOptimizationRecommendations: getMemoryRecommendations, getCleanupSuggestions: getMemoryCleanupSuggestions } = useMemoryUsage({
+        callbacks: {
+            onMemoryWarning: (usage) => console.warn(`Memory usage warning: ${(usage * 100).toFixed(1)}%`),
+            onMemoryLeakDetected: (trend) => console.warn(`Memory leak detected: ${trend} trend`)
+        }
+    });
+    const { metrics: batteryMetrics, batteryLevel, isCharging, isLowPowerMode, isCriticalBattery, getOptimizationRecommendations: getBatteryRecommendations, getPowerSavingSuggestions: getBatteryPowerSuggestions, getBatteryStatus: getBatteryStatusText } = useBatteryStatus({
+        callbacks: {
+            onBatteryLow: (level) => console.warn(`Battery low: ${(level * 100).toFixed(1)}%`),
+            onBatteryCritical: (level) => console.error(`Battery critical: ${(level * 100).toFixed(1)}%`)
+        }
+    });
+    const { metrics, isThrottling, throttleLevel, optimizations, recommendations, performanceSettings, } = usePerformanceThrottling({
+        enablePerformanceMonitoring: true,
+        enableAutomaticThrottling: true,
+        enableUserExperienceOptimization: true,
+        enableBatteryPreservation: true
+    }, {
+        onPerformanceWarning: (metrics) => console.log('Performance warning:', metrics),
+        onThrottlingApplied: (level, reason) => console.log('Throttling applied:', level, reason),
+        onPerformanceRecovery: (metrics) => console.log('Performance recovery:', metrics),
+        onUserExperienceOptimized: (optimization) => console.log('User experience optimized:', optimization)
+    });
+    // Performance score color mapping
+    const getScoreColor = (score) => {
+        switch (score) {
+            case 'excellent': return 'text-green-600 bg-green-100';
+            case 'good': return 'text-blue-600 bg-blue-100';
+            case 'fair': return 'text-yellow-600 bg-yellow-100';
+            case 'poor': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Performance mode color mapping
+    const getModeColor = (mode) => {
+        switch (mode) {
+            case 'high': return 'text-green-600 bg-green-100';
+            case 'medium': return 'text-yellow-600 bg-yellow-100';
+            case 'low': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Throttling level color mapping
+    const getThrottlingColor = (level) => {
+        switch (level) {
+            case 'none': return 'text-green-600 bg-green-100';
+            case 'light': return 'text-blue-600 bg-blue-100';
+            case 'moderate': return 'text-yellow-600 bg-yellow-100';
+            case 'aggressive': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Memory trend icon
+    const getMemoryTrendIcon = (trend) => {
+        switch (trend) {
+            case 'increasing': return '📈';
+            case 'decreasing': return '📉';
+            case 'stable': return '➡️';
+            default: return '❓';
+        }
+    };
+    // Battery icon
+    const getBatteryIcon = (level, charging) => {
+        if (charging)
+            return '🔌';
+        if (level <= 0.15)
+            return '🔴';
+        if (level <= 0.3)
+            return '🟠';
+        if (level <= 0.5)
+            return '🟡';
+        return '🟢';
+    };
+    const tabs = [
+        { id: 'overview', label: 'Overview', icon: '📊' },
+        { id: 'fps', label: 'Frame Rate', icon: '🎬' },
+        { id: 'memory', label: 'Memory', icon: '🧠' },
+        { id: 'battery', label: 'Battery', icon: '🔋' },
+        { id: 'throttling', label: 'Throttling', icon: '⚡' }
+    ];
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2 border-b pb-4", children: tabs.map((tab) => (_jsxs(Button, { variant: activeTab === tab.id ? 'default' : 'outline', size: "sm", onClick: () => setActiveTab(tab.id), className: "flex items-center gap-2", children: [_jsx("span", { children: tab.icon }), tab.label] }, tab.id))) }), activeTab === 'overview' && (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAF Performance Summary", _jsxs(Badge, { variant: performanceMode === 'high' ? 'default' : 'secondary', children: [performanceMode.toUpperCase(), " MODE"] })] }), _jsx(CardDescription, { children: "Real-time performance overview and system status" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsx("div", { className: "text-2xl font-bold text-blue-600", children: fpsMetrics.fps }), _jsx("div", { className: "text-sm text-gray-600", children: "FPS" }), _jsx(Badge, { className: `mt-2 ${getScoreColor(fpsScore)}`, children: fpsScore })] }), _jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsxs("div", { className: "text-2xl font-bold text-purple-600", children: [memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-sm text-gray-600", children: "Memory Usage" }), _jsxs("div", { className: "flex items-center justify-center gap-1 mt-2", children: [_jsx("span", { children: getMemoryTrendIcon(memoryTrend) }), _jsx(Badge, { variant: memoryLeakDetected ? 'destructive' : 'secondary', children: memoryLeakDetected ? 'Leak Detected' : memoryTrend })] })] }), _jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsx("div", { className: "text-2xl font-bold text-green-600", children: getBatteryIcon(batteryLevel || 1, isCharging) }), _jsx("div", { className: "text-sm text-gray-600", children: "Battery" }), _jsx(Badge, { variant: isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default', children: getBatteryStatusText() })] })] }), throttlingEnabled && (_jsx("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-yellow-600", children: "\u26A0\uFE0F" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-yellow-800", children: "Performance Throttling Active" }), _jsx("div", { className: "text-sm text-yellow-700", children: throttlingReason })] })] }) })), _jsxs(Button, { variant: "outline", onClick: () => setShowRecommendations(!showRecommendations), className: "w-full", children: [showRecommendations ? 'Hide' : 'Show', " Performance Recommendations"] }), showRecommendations && (_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Optimization Recommendations:" }), _jsx("ul", { className: "space-y-2 text-sm text-gray-700", children: getOptimizationRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), rec] }, index))) })] }))] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "flex items-center gap-2", children: "\uD83D\uDCF1 Device Information" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Device Type:" }), " ", device.screenSize] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Screen Size:" }), " ", device.screenSize] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Orientation:" }), " ", device.orientation] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Touch Device:" }), " ", device.touchDevice ? 'Yes' : 'No'] })] }) })] })] })), activeTab === 'fps' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAC Frame Rate Monitoring", _jsx(Badge, { className: getScoreColor(fpsScore), children: fpsScore.toUpperCase() })] }), _jsx(CardDescription, { children: "Real-time FPS tracking and performance analysis" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: fpsMetrics.fps }), _jsx("div", { className: "text-xs text-gray-600", children: "Current FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-green-600", children: fpsMetrics.averageFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Average FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-purple-600", children: fpsMetrics.minFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Min FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-orange-600", children: fpsMetrics.maxFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Max FPS" })] })] }), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-blue-800 mb-2", children: "Performance Insights:" }), _jsx("ul", { className: "space-y-1 text-sm text-blue-700", children: getFPSInsights().map((insight, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), insight] }, index))) })] })] })] })), activeTab === 'memory' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83E\uDDE0 Memory Usage Monitoring", _jsx(Badge, { variant: memoryLeakDetected ? 'destructive' : 'secondary', children: memoryLeakDetected ? 'LEAK DETECTED' : memoryTrend.toUpperCase() })] }), _jsx(CardDescription, { children: "Memory usage tracking and leak detection" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-purple-600", children: [memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Usage" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-blue-600", children: [memoryMetrics.usedJSHeapSize ? (memoryMetrics.usedJSHeapSize / 1024 / 1024).toFixed(1) : 'N/A', " MB"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Used" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-green-600", children: [memoryMetrics.jsHeapSizeLimit ? (memoryMetrics.jsHeapSizeLimit / 1024 / 1024).toFixed(1) : 'N/A', " MB"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Limit" })] })] }), _jsxs("div", { className: "p-4 bg-purple-50 border border-purple-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-purple-800 mb-2", children: "Memory Optimization:" }), _jsx("ul", { className: "space-y-1 text-sm text-purple-700", children: getMemoryRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-purple-500", children: "\u2022" }), rec] }, index))) })] }), memoryLeakDetected && (_jsxs("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-red-800 mb-2", children: "Memory Leak Cleanup Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-red-700", children: getMemoryCleanupSuggestions().map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-red-500", children: "\u2022" }), suggestion] }, index))) })] }))] })] })), activeTab === 'battery' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDD0B Battery Status Monitoring", _jsx(Badge, { variant: isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default', children: getBatteryStatusText() })] }), _jsx(CardDescription, { children: "Battery level monitoring and power optimization" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-2xl", children: getBatteryIcon(batteryLevel || 1, isCharging) }), _jsxs("div", { className: "text-xl font-bold text-green-600", children: [batteryLevel ? (batteryLevel * 100).toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Level" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: isCharging ? 'Yes' : 'No' }), _jsx("div", { className: "text-xs text-gray-600", children: "Charging" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-purple-600", children: batteryMetrics.chargingTime || 'N/A' }), _jsx("div", { className: "text-xs text-gray-600", children: "Charging Time" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-orange-600", children: batteryMetrics.dischargingTime || 'N/A' }), _jsx("div", { className: "text-xs text-gray-600", children: "Discharge Time" })] })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-green-800 mb-2", children: "Battery Optimization:" }), _jsx("ul", { className: "space-y-1 text-sm text-green-700", children: getBatteryRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-500", children: "\u2022" }), rec] }, index))) })] }), (isLowPowerMode || isCriticalBattery) && (_jsxs("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-yellow-800 mb-2", children: "Power Saving Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-yellow-700", children: getBatteryPowerSuggestions().map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-yellow-500", children: "\u2022" }), suggestion] }, index))) })] }))] })] })), activeTab === 'throttling' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\u26A1 Performance Throttling", _jsx(Badge, { className: getThrottlingColor(throttleLevel), children: throttleLevel.toUpperCase() })] }), _jsx(CardDescription, { children: "Automatic and manual performance throttling controls" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: isThrottling ? 'Active' : 'Inactive' }), _jsx("div", { className: "text-xs text-gray-600", children: "Throttling Status" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx(Badge, { className: getModeColor(performanceSettings.animationQuality), children: performanceSettings.animationQuality.toUpperCase() }), _jsx("div", { className: "text-xs text-gray-600 mt-1", children: "Performance Mode" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-green-600", children: performanceSettings.memoryOptimization ? 'Yes' : 'No' }), _jsx("div", { className: "text-xs text-gray-600", children: "Battery Optimized" })] })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-lg font-bold text-blue-600", children: throttleLevel }), _jsx("div", { className: "text-xs text-gray-600", children: "Current Level" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-lg font-bold text-green-600", children: isThrottling ? 'Active' : 'Inactive' }), _jsx("div", { className: "text-xs text-gray-600", children: "Throttling Status" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Performance Settings:" }), _jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Max Concurrent Animations:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.maxConcurrentAnimations })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Frame Rate Limit:" }), _jsxs("div", { className: "text-blue-600", children: [performanceSettings.frameRateLimit, "fps"] })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Animation Quality:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.animationQuality })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Memory Optimization:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.memoryOptimization ? 'Yes' : 'No' })] })] })] }), isThrottling && (_jsxs("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-yellow-800 mb-2", children: "Throttling Information:" }), _jsxs("div", { className: "text-sm text-yellow-700 space-y-1", children: [_jsxs("div", { children: [_jsx("strong", { children: "Level:" }), " ", throttleLevel] }), _jsxs("div", { children: [_jsx("strong", { children: "Performance Score:" }), " ", metrics.performanceScore] }), _jsxs("div", { children: [_jsx("strong", { children: "FPS:" }), " ", metrics.fps] })] })] })), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-blue-800 mb-2", children: "Throttling Recommendations:" }), _jsx("ul", { className: "space-y-1 text-sm text-blue-700", children: recommendations.map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), rec] }, index))) })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-green-800 mb-2", children: "Optimization Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-green-700", children: optimizations.map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-500", children: "\u2022" }), suggestion] }, index))) })] })] })] }))] }));
+};