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

package/dist/components/ui/hardware-acceleration-demo.js

@@ -1,547 +1,106 @@
-import React, { useState, useCallback, useEffect } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Badge } from './badge'
-import { Button } from './button'
-import { useHardwareAcceleration } from '../../hooks/use-hardware-acceleration'
-import { useBatteryOptimization } from '../../hooks/use-battery-optimization'
-
-export const HardwareAccelerationDemo: React.FC = () => {
-  const [showGPUInfo, setShowGPUInfo] = useState(true)
-  const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true)
-  const [showBatteryInfo, setShowBatteryInfo] = useState(true)
-  const [enableHardwareAcceleration, setEnableHardwareAcceleration] = useState(true)
-  const [enableBatteryOptimization, setEnableBatteryOptimization] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  // Hooks with error handling
-  const hardwareAcceleration = useHardwareAcceleration({
-    enableGPUMonitoring: true,
-    enablePerformanceTracking: true,
-    enableBatteryOptimization: true,
-    enableAutomaticOptimization: true
-  }, {
-    onGPUDetected: (gpuInfo) => console.log('GPU detected:', gpuInfo),
-    onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
-    onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow),
-    onOptimizationApplied: (optimization) => console.log('Optimization applied:', optimization)
-  })
-
-  const batteryOptimization = useBatteryOptimization({
-    enableBatteryMonitoring: true,
-    enablePerformanceThrottling: true,
-    enableUserPreferences: true,
-    enableAdaptiveOptimization: true
-  }, {
-    onBatteryStatusChange: (status) => console.log('Battery status changed:', status),
-    onLowBatteryWarning: (status) => console.log('Low battery warning:', status),
-    onCriticalBatteryWarning: (status) => console.log('Critical battery warning:', status),
-    onPerformanceThrottled: (level, reason) => console.log('Performance throttled:', level, reason),
-    onOptimizationApplied: (optimization) => console.log('Battery optimization applied:', optimization)
-  })
-
-  // Error boundary effect
-  useEffect(() => {
-    const handleError = (error: ErrorEvent) => {
-      console.error('Hardware acceleration demo error:', error)
-      setError(error.message)
-    }
-
-    window.addEventListener('error', handleError)
-    return () => window.removeEventListener('error', handleError)
-  }, [])
-
-  // Demo animations with hardware acceleration
-  const [animationState, setAnimationState] = useState<'idle' | 'running' | 'paused'>('idle')
-  const [animationType, setAnimationType] = useState<'basic' | 'gpu' | 'transform3d' | 'performance'>('basic')
-
-  const startAnimation = useCallback(() => {
-    setAnimationState('running')
-    setTimeout(() => setAnimationState('idle'), 3000)
-  }, [])
-
-  const pauseAnimation = useCallback(() => {
-    setAnimationState('paused')
-  }, [])
-
-  const resumeAnimation = useCallback(() => {
-    setAnimationState('running')
-  }, [])
-
-  // Get animation classes based on type
-  const getAnimationClasses = useCallback((type: string) => {
-    const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out'
-    
-    switch (type) {
-      case 'basic':
-        return `${baseClasses} bg-cs-primary hover:bg-cs-secondary`
-      case 'gpu':
-        return `${baseClasses} bg-cs-secondary gpu-optimized hover:bg-cs-accent`
-      case 'transform3d':
-        return `${baseClasses} bg-cs-accent transform3d-optimized hover:bg-cs-primary`
-      case 'performance':
-        return `${baseClasses} bg-cs-primary performance-accelerated hover:bg-cs-secondary`
-      default:
-        return baseClasses
-    }
-  }, [])
-
-  // Get animation styles based on state
-  const getAnimationStyles = useCallback((state: string) => {
-    switch (state) {
-      case 'running':
-        return {
-          transform: 'translate3d(100px, 0, 0) rotate(360deg) scale(1.2)',
-          opacity: 0.8
-        }
-      case 'paused':
-        return {
-          transform: 'translate3d(50px, 0, 0) rotate(180deg) scale(1.1)',
-          opacity: 0.9
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { Button } from './button';
+import { useHardwareAcceleration } from '../../hooks/use-hardware-acceleration';
+import { useBatteryOptimization } from '../../hooks/use-battery-optimization';
+export const HardwareAccelerationDemo = () => {
+    const [showGPUInfo, setShowGPUInfo] = useState(true);
+    const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true);
+    const [showBatteryInfo, setShowBatteryInfo] = useState(true);
+    const [enableHardwareAcceleration, setEnableHardwareAcceleration] = useState(true);
+    const [enableBatteryOptimization, setEnableBatteryOptimization] = useState(true);
+    const [error, setError] = useState(null);
+    // Hooks with error handling
+    const hardwareAcceleration = useHardwareAcceleration({
+        enableGPUMonitoring: true,
+        enablePerformanceTracking: true,
+        enableBatteryOptimization: true,
+        enableAutomaticOptimization: true
+    }, {
+        onGPUDetected: (gpuInfo) => console.log('GPU detected:', gpuInfo),
+        onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+        onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow),
+        onOptimizationApplied: (optimization) => console.log('Optimization applied:', optimization)
+    });
+    const batteryOptimization = useBatteryOptimization({
+        enableBatteryMonitoring: true,
+        enablePerformanceThrottling: true,
+        enableUserPreferences: true,
+        enableAdaptiveOptimization: true
+    }, {
+        onBatteryStatusChange: (status) => console.log('Battery status changed:', status),
+        onLowBatteryWarning: (status) => console.log('Low battery warning:', status),
+        onCriticalBatteryWarning: (status) => console.log('Critical battery warning:', status),
+        onPerformanceThrottled: (level, reason) => console.log('Performance throttled:', level, reason),
+        onOptimizationApplied: (optimization) => console.log('Battery optimization applied:', optimization)
+    });
+    // Error boundary effect
+    useEffect(() => {
+        const handleError = (error) => {
+            console.error('Hardware acceleration demo error:', error);
+            setError(error.message);
+        };
+        window.addEventListener('error', handleError);
+        return () => window.removeEventListener('error', handleError);
+    }, []);
+    // Demo animations with hardware acceleration
+    const [animationState, setAnimationState] = useState('idle');
+    const [animationType, setAnimationType] = useState('basic');
+    const startAnimation = useCallback(() => {
+        setAnimationState('running');
+        setTimeout(() => setAnimationState('idle'), 3000);
+    }, []);
+    const pauseAnimation = useCallback(() => {
+        setAnimationState('paused');
+    }, []);
+    const resumeAnimation = useCallback(() => {
+        setAnimationState('running');
+    }, []);
+    // Get animation classes based on type
+    const getAnimationClasses = useCallback((type) => {
+        const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out';
+        switch (type) {
+            case 'basic':
+                return `${baseClasses} bg-cs-primary hover:bg-cs-secondary`;
+            case 'gpu':
+                return `${baseClasses} bg-cs-secondary gpu-optimized hover:bg-cs-accent`;
+            case 'transform3d':
+                return `${baseClasses} bg-cs-accent transform3d-optimized hover:bg-cs-primary`;
+            case 'performance':
+                return `${baseClasses} bg-cs-primary performance-accelerated hover:bg-cs-secondary`;
+            default:
+                return baseClasses;
         }
-      default:
-        return {
-          transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
-          opacity: 1
+    }, []);
+    // Get animation styles based on state
+    const getAnimationStyles = useCallback((state) => {
+        switch (state) {
+            case 'running':
+                return {
+                    transform: 'translate3d(100px, 0, 0) rotate(360deg) scale(1.2)',
+                    opacity: 0.8
+                };
+            case 'paused':
+                return {
+                    transform: 'translate3d(50px, 0, 0) rotate(180deg) scale(1.1)',
+                    opacity: 0.9
+                };
+            default:
+                return {
+                    transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                    opacity: 1
+                };
         }
+    }, []);
+    // Show error if any
+    if (error) {
+        return (_jsxs("div", { className: "p-6 bg-red-50 border border-red-200 rounded-lg", children: [_jsx("h2", { className: "text-lg font-semibold text-red-800 mb-2", children: "Error Loading Hardware Acceleration Demo" }), _jsx("p", { className: "text-red-600 mb-4", children: error }), _jsx(Button, { onClick: () => setError(null), variant: "outline", children: "Try Again" })] }));
     }
-  }, [])
-
-  // Show error if any
-  if (error) {
-    return (
-      <div className="p-6 bg-red-50 border border-red-200 rounded-lg">
-        <h2 className="text-lg font-semibold text-red-800 mb-2">Error Loading Hardware Acceleration Demo</h2>
-        <p className="text-red-600 mb-4">{error}</p>
-        <Button onClick={() => setError(null)} variant="outline">
-          Try Again
-        </Button>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold text-cs-text-primary mb-2">
-          🚀 Hardware Acceleration & GPU Optimization
-        </h1>
-        <p className="text-lg text-cs-text-secondary mb-4">
-          Story 8 Implementation - Advanced hardware acceleration with GPU optimization and battery awareness
-        </p>
-        <div className="flex items-center justify-center gap-2">
-          <Badge variant="default">Story 8</Badge>
-          <Badge variant="outline">Hardware Acceleration</Badge>
-          <Badge variant="secondary">GPU Optimization</Badge>
-          <Badge variant="outline">Battery Optimization</Badge>
-        </div>
-      </div>
-
-      {/* GPU Information */}
-      {showGPUInfo && hardwareAcceleration.gpuInfo && (
-        <Card className="border-2 border-cs-primary">
-          <CardHeader>
-            <CardTitle className="text-xl flex items-center gap-2">
-              🎮 GPU Information
-              <Badge variant={hardwareAcceleration.isGPUSupported ? 'default' : 'secondary'}>
-                {hardwareAcceleration.isGPUSupported ? 'Supported' : 'Not Supported'}
-              </Badge>
-            </CardTitle>
-            <CardDescription>
-              Real-time GPU capability detection and WebGL support information
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <span className="text-sm font-medium">Vendor:</span>
-                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.vendor}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-sm font-medium">Renderer:</span>
-                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.renderer}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-sm font-medium">Version:</span>
-                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.version}</span>
-                </div>
-              </div>
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <span className="text-sm font-medium">WebGL Support:</span>
-                  <Badge variant={hardwareAcceleration.gpuInfo.isWebGLSupported ? 'default' : 'secondary'}>
-                    {hardwareAcceleration.gpuInfo.isWebGLSupported ? 'Yes' : 'No'}
-                  </Badge>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-sm font-medium">WebGL2 Support:</span>
-                  <Badge variant={hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'default' : 'secondary'}>
-                    {hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'Yes' : 'No'}
-                  </Badge>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-sm font-medium">Max Texture Size:</span>
-                  <span className="text-sm text-cs-text-secondary">{hardwareAcceleration.gpuInfo.maxTextureSize}</span>
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Performance Metrics */}
-      {showPerformanceMetrics && (
-        <Card className="border-2 border-cs-secondary">
-          <CardHeader>
-            <CardTitle className="text-xl flex items-center gap-2">
-              📊 Performance Metrics
-              <Badge variant="outline">Real-time</Badge>
-            </CardTitle>
-            <CardDescription>
-              Hardware acceleration performance monitoring and optimization status
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
-              <div>
-                <p className="text-2xl font-bold text-cs-primary">
-                  {hardwareAcceleration.metrics.fps}
-                </p>
-                <p className="text-sm text-cs-text-secondary">FPS</p>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-cs-secondary">
-                  {hardwareAcceleration.metrics.frameTime.toFixed(1)}ms
-                </p>
-                <p className="text-sm text-cs-text-secondary">Frame Time</p>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-cs-accent">
-                  {hardwareAcceleration.metrics.gpuUtilization.toFixed(1)}%
-                </p>
-                <p className="text-sm text-cs-text-secondary">GPU Usage</p>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-cs-primary">
-                  {hardwareAcceleration.metrics.performanceScore}
-                </p>
-                <p className="text-sm text-cs-text-secondary">Performance Score</p>
-              </div>
-            </div>
-            
-            <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-              <div className="flex items-center justify-between mb-2">
-                <span className="font-medium text-sm">Performance Level:</span>
-                <Badge variant={
-                  hardwareAcceleration.performanceLevel === 'excellent' ? 'default' :
-                  hardwareAcceleration.performanceLevel === 'good' ? 'default' :
-                  hardwareAcceleration.performanceLevel === 'fair' ? 'secondary' : 'secondary'
-                }>
-                  {hardwareAcceleration.performanceLevel.toUpperCase()}
-                </Badge>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="font-medium text-sm">Hardware Acceleration:</span>
-                <Badge variant={hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary'}>
-                  {hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled'}
-                </Badge>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Battery Information */}
-      {showBatteryInfo && (
-        <Card className="border-2 border-cs-accent">
-          <CardHeader>
-            <CardTitle className="text-xl flex items-center gap-2">
-              🔋 Battery Optimization
-              <Badge variant={batteryOptimization.isLowBattery ? 'secondary' : 'default'}>
-                {batteryOptimization.batteryPercentage}%
-              </Badge>
-            </CardTitle>
-            <CardDescription>
-              Battery-aware performance optimization and user preference management
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div className="space-y-3">
-                <h4 className="font-medium">Battery Status</h4>
-                <div className="space-y-2">
-                  <div className="flex justify-between">
-                    <span className="text-sm">Level:</span>
-                    <span className="text-sm text-cs-text-secondary">{batteryOptimization.batteryPercentage}%</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Status:</span>
-                    <Badge variant={batteryOptimization.isCharging ? 'default' : 'secondary'}>
-                      {batteryOptimization.isCharging ? 'Charging' : 'Discharging'}
-                    </Badge>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Health:</span>
-                    <Badge variant="outline">{batteryOptimization.getBatteryHealth()}</Badge>
-                  </div>
-                </div>
-              </div>
-              
-              <div className="space-y-3">
-                <h4 className="font-medium">Performance Settings</h4>
-                <div className="space-y-2">
-                  <div className="flex justify-between">
-                    <span className="text-sm">Throttle Level:</span>
-                    <Badge variant="outline">{batteryOptimization.currentThrottleLevel}</Badge>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">User Preference:</span>
-                    <Badge variant="outline">{batteryOptimization.userPreferences}</Badge>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Optimization:</span>
-                    <Badge variant={batteryOptimization.isOptimizing ? 'secondary' : 'default'}>
-                      {batteryOptimization.isOptimizing ? 'Active' : 'Idle'}
-                    </Badge>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* User Preference Controls */}
-            <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">User Preference:</h4>
-              <div className="flex gap-2">
-                <Button
-                  variant={batteryOptimization.userPreferences === 'performance' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => batteryOptimization.updateUserPreferences('performance')}
-                >
-                  Performance
-                </Button>
-                <Button
-                  variant={batteryOptimization.userPreferences === 'balanced' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => batteryOptimization.updateUserPreferences('balanced')}
-                >
-                  Balanced
-                </Button>
-                <Button
-                  variant={batteryOptimization.userPreferences === 'battery' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => batteryOptimization.updateUserPreferences('battery')}
-                >
-                  Battery
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Hardware Acceleration Demo */}
-      <Card className="border border-cs-border">
-        <CardHeader>
-          <CardTitle className="text-lg">Hardware Acceleration Demo</CardTitle>
-          <CardDescription>
-            Test different types of hardware acceleration with real-time animations
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* Animation Type Selection */}
-          <div className="flex flex-wrap gap-2">
-            <Button
-              variant={animationType === 'basic' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setAnimationType('basic')}
-            >
-              Basic
-            </Button>
-            <Button
-              variant={animationType === 'gpu' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setAnimationType('gpu')}
-            >
-              GPU Optimized
-            </Button>
-            <Button
-              variant={animationType === 'transform3d' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setAnimationType('transform3d')}
-            >
-              Transform3D
-            </Button>
-            <Button
-              variant={animationType === 'performance' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setAnimationType('performance')}
-            >
-              Performance
-            </Button>
-          </div>
-
-          {/* Animation Controls */}
-          <div className="flex gap-2">
-            <Button
-              variant="default"
-              onClick={startAnimation}
-              disabled={animationState === 'running'}
-            >
-              Start Animation
-            </Button>
-            <Button
-              variant="outline"
-              onClick={pauseAnimation}
-              disabled={animationState !== 'running'}
-            >
-              Pause
-            </Button>
-            <Button
-              variant="outline"
-              onClick={resumeAnimation}
-              disabled={animationState !== 'paused'}
-            >
-              Resume
-            </Button>
-          </div>
-
-          {/* Animation Display */}
-          <div className="flex justify-center">
-            <div
-              className={getAnimationClasses(animationType)}
-              style={getAnimationStyles(animationState)}
-            />
-          </div>
-
-          {/* Animation Info */}
-          <div className="text-center text-sm text-cs-text-secondary">
-            <p>Animation Type: <span className="font-medium">{animationType}</span></p>
-            <p>State: <span className="font-medium">{animationState}</span></p>
-            <p>Hardware Acceleration: <span className="font-medium">
-              {hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled'}
-            </span></p>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Controls */}
-      <Card className="border border-cs-border">
-        <CardHeader>
-          <CardTitle className="text-lg">Demo Controls</CardTitle>
-          <CardDescription>
-            Configure and test different hardware acceleration features
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex flex-wrap gap-4">
-            <Button
-              variant={showGPUInfo ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setShowGPUInfo(!showGPUInfo)}
-            >
-              {showGPUInfo ? 'Hide' : 'Show'} GPU Info
-            </Button>
-            <Button
-              variant={showPerformanceMetrics ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setShowPerformanceMetrics(!showPerformanceMetrics)}
-            >
-              {showPerformanceMetrics ? 'Hide' : 'Show'} Performance
-            </Button>
-            <Button
-              variant={showBatteryInfo ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setShowBatteryInfo(!showBatteryInfo)}
-            >
-              {showBatteryInfo ? 'Hide' : 'Show'} Battery Info
-            </Button>
-          </div>
-
-          <div className="flex flex-wrap gap-4">
-            <Button
-              variant={enableHardwareAcceleration ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setEnableHardwareAcceleration(!enableHardwareAcceleration)}
-            >
-              {enableHardwareAcceleration ? 'Disable' : 'Enable'} Hardware Acceleration
-            </Button>
-            <Button
-              variant={enableBatteryOptimization ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setEnableBatteryOptimization(!enableBatteryOptimization)}
-            >
-              {enableBatteryOptimization ? 'Disable' : 'Enable'} Battery Optimization
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Optimization Status */}
-      <Card className="border border-cs-border">
-        <CardHeader>
-          <CardTitle className="text-lg">Optimization Status</CardTitle>
-          <CardDescription>
-            Current optimization status and recommendations
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <span className="text-sm">Hardware Acceleration:</span>
-              <Badge variant={hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary'}>
-                {hardwareAcceleration.isHardwareAccelerated ? 'Optimal' : 'Needs Optimization'}
-              </Badge>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm">Performance Level:</span>
-              <Badge variant={
-                hardwareAcceleration.performanceLevel === 'excellent' || hardwareAcceleration.performanceLevel === 'good' 
-                  ? 'default' : 'secondary'
-              }>
-                {hardwareAcceleration.performanceLevel.toUpperCase()}
-              </Badge>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm">Battery Optimization:</span>
-              <Badge variant={batteryOptimization.isLowBattery ? 'secondary' : 'default'}>
-                {batteryOptimization.isLowBattery ? 'Needs Optimization' : 'Optimized'}
-              </Badge>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm">GPU Utilization:</span>
-              <Badge variant={hardwareAcceleration.metrics.gpuUtilization < 80 ? 'default' : 'secondary'}>
-                {hardwareAcceleration.metrics.gpuUtilization < 80 ? 'Optimal' : 'High Usage'}
-              </Badge>
-            </div>
-          </div>
-
-          {/* Recent Optimizations */}
-          {hardwareAcceleration.optimizations.length > 0 && (
-            <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Recent Optimizations:</h4>
-              <ul className="text-xs text-cs-text-secondary space-y-1">
-                {hardwareAcceleration.optimizations.slice(-3).map((optimization, index) => (
-                  <li key={index}>• {optimization}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {/* Battery Recommendations */}
-          {batteryOptimization.optimizationRecommendations.length > 0 && (
-            <div className="mt-4 p-3 bg-cs-secondary/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Battery Recommendations:</h4>
-              <ul className="text-xs text-cs-text-secondary space-y-1">
-                {batteryOptimization.optimizationRecommendations.slice(0, 3).map((recommendation, index) => (
-                  <li key={index}>• {recommendation}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-export default HardwareAccelerationDemo
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-cs-text-primary mb-2", children: "\uD83D\uDE80 Hardware Acceleration & GPU Optimization" }), _jsx("p", { className: "text-lg text-cs-text-secondary mb-4", children: "Story 8 Implementation - Advanced hardware acceleration with GPU optimization and battery awareness" }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Story 8" }), _jsx(Badge, { variant: "outline", children: "Hardware Acceleration" }), _jsx(Badge, { variant: "secondary", children: "GPU Optimization" }), _jsx(Badge, { variant: "outline", children: "Battery Optimization" })] })] }), showGPUInfo && hardwareAcceleration.gpuInfo && (_jsxs(Card, { className: "border-2 border-cs-primary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83C\uDFAE GPU Information", _jsx(Badge, { variant: hardwareAcceleration.isGPUSupported ? 'default' : 'secondary', children: hardwareAcceleration.isGPUSupported ? 'Supported' : 'Not Supported' })] }), _jsx(CardDescription, { children: "Real-time GPU capability detection and WebGL support information" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Vendor:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.vendor })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Renderer:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.renderer })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Version:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.version })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "WebGL Support:" }), _jsx(Badge, { variant: hardwareAcceleration.gpuInfo.isWebGLSupported ? 'default' : 'secondary', children: hardwareAcceleration.gpuInfo.isWebGLSupported ? 'Yes' : 'No' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "WebGL2 Support:" }), _jsx(Badge, { variant: hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'default' : 'secondary', children: hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'Yes' : 'No' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Max Texture Size:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.maxTextureSize })] })] })] }) })] })), showPerformanceMetrics && (_jsxs(Card, { className: "border-2 border-cs-secondary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDCCA Performance Metrics", _jsx(Badge, { variant: "outline", children: "Real-time" })] }), _jsx(CardDescription, { children: "Hardware acceleration performance monitoring and optimization status" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4 text-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: hardwareAcceleration.metrics.fps }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "FPS" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-2xl font-bold text-cs-secondary", children: [hardwareAcceleration.metrics.frameTime.toFixed(1), "ms"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Frame Time" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-2xl font-bold text-cs-accent", children: [hardwareAcceleration.metrics.gpuUtilization.toFixed(1), "%"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "GPU Usage" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: hardwareAcceleration.metrics.performanceScore }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Performance Score" })] })] }), _jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "font-medium text-sm", children: "Performance Level:" }), _jsx(Badge, { variant: hardwareAcceleration.performanceLevel === 'excellent' ? 'default' :
+                                                    hardwareAcceleration.performanceLevel === 'good' ? 'default' :
+                                                        hardwareAcceleration.performanceLevel === 'fair' ? 'secondary' : 'secondary', children: hardwareAcceleration.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium text-sm", children: "Hardware Acceleration:" }), _jsx(Badge, { variant: hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary', children: hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled' })] })] })] })] })), showBatteryInfo && (_jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDD0B Battery Optimization", _jsxs(Badge, { variant: batteryOptimization.isLowBattery ? 'secondary' : 'default', children: [batteryOptimization.batteryPercentage, "%"] })] }), _jsx(CardDescription, { children: "Battery-aware performance optimization and user preference management" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Battery Status" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Level:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryOptimization.batteryPercentage, "%"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Status:" }), _jsx(Badge, { variant: batteryOptimization.isCharging ? 'default' : 'secondary', children: batteryOptimization.isCharging ? 'Charging' : 'Discharging' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Health:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.getBatteryHealth() })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Performance Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Throttle Level:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.currentThrottleLevel })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "User Preference:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.userPreferences })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Optimization:" }), _jsx(Badge, { variant: batteryOptimization.isOptimizing ? 'secondary' : 'default', children: batteryOptimization.isOptimizing ? 'Active' : 'Idle' })] })] })] })] }), _jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "User Preference:" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: batteryOptimization.userPreferences === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('performance'), children: "Performance" }), _jsx(Button, { variant: batteryOptimization.userPreferences === 'balanced' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('balanced'), children: "Balanced" }), _jsx(Button, { variant: batteryOptimization.userPreferences === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('battery'), children: "Battery" })] })] })] })] })), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Hardware Acceleration Demo" }), _jsx(CardDescription, { children: "Test different types of hardware acceleration with real-time animations" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationType === 'basic' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('basic'), children: "Basic" }), _jsx(Button, { variant: animationType === 'gpu' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('gpu'), children: "GPU Optimized" }), _jsx(Button, { variant: animationType === 'transform3d' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('transform3d'), children: "Transform3D" }), _jsx(Button, { variant: animationType === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('performance'), children: "Performance" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "default", onClick: startAnimation, disabled: animationState === 'running', children: "Start Animation" }), _jsx(Button, { variant: "outline", onClick: pauseAnimation, disabled: animationState !== 'running', children: "Pause" }), _jsx(Button, { variant: "outline", onClick: resumeAnimation, disabled: animationState !== 'paused', children: "Resume" })] }), _jsx("div", { className: "flex justify-center", children: _jsx("div", { className: getAnimationClasses(animationType), style: getAnimationStyles(animationState) }) }), _jsxs("div", { className: "text-center text-sm text-cs-text-secondary", children: [_jsxs("p", { children: ["Animation Type: ", _jsx("span", { className: "font-medium", children: animationType })] }), _jsxs("p", { children: ["State: ", _jsx("span", { className: "font-medium", children: animationState })] }), _jsxs("p", { children: ["Hardware Acceleration: ", _jsx("span", { className: "font-medium", children: hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled' })] })] })] })] }), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Demo Controls" }), _jsx(CardDescription, { children: "Configure and test different hardware acceleration features" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: showGPUInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowGPUInfo(!showGPUInfo), children: [showGPUInfo ? 'Hide' : 'Show', " GPU Info"] }), _jsxs(Button, { variant: showPerformanceMetrics ? 'default' : 'outline', size: "sm", onClick: () => setShowPerformanceMetrics(!showPerformanceMetrics), children: [showPerformanceMetrics ? 'Hide' : 'Show', " Performance"] }), _jsxs(Button, { variant: showBatteryInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowBatteryInfo(!showBatteryInfo), children: [showBatteryInfo ? 'Hide' : 'Show', " Battery Info"] })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: enableHardwareAcceleration ? 'default' : 'outline', size: "sm", onClick: () => setEnableHardwareAcceleration(!enableHardwareAcceleration), children: [enableHardwareAcceleration ? 'Disable' : 'Enable', " Hardware Acceleration"] }), _jsxs(Button, { variant: enableBatteryOptimization ? 'default' : 'outline', size: "sm", onClick: () => setEnableBatteryOptimization(!enableBatteryOptimization), children: [enableBatteryOptimization ? 'Disable' : 'Enable', " Battery Optimization"] })] })] })] }), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Optimization Status" }), _jsx(CardDescription, { children: "Current optimization status and recommendations" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Hardware Acceleration:" }), _jsx(Badge, { variant: hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary', children: hardwareAcceleration.isHardwareAccelerated ? 'Optimal' : 'Needs Optimization' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Performance Level:" }), _jsx(Badge, { variant: hardwareAcceleration.performanceLevel === 'excellent' || hardwareAcceleration.performanceLevel === 'good'
+                                                    ? 'default' : 'secondary', children: hardwareAcceleration.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Battery Optimization:" }), _jsx(Badge, { variant: batteryOptimization.isLowBattery ? 'secondary' : 'default', children: batteryOptimization.isLowBattery ? 'Needs Optimization' : 'Optimized' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "GPU Utilization:" }), _jsx(Badge, { variant: hardwareAcceleration.metrics.gpuUtilization < 80 ? 'default' : 'secondary', children: hardwareAcceleration.metrics.gpuUtilization < 80 ? 'Optimal' : 'High Usage' })] })] }), hardwareAcceleration.optimizations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "Recent Optimizations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: hardwareAcceleration.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), batteryOptimization.optimizationRecommendations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-secondary/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "Battery Recommendations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: batteryOptimization.optimizationRecommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] }))] })] })] }));
+};
+export default HardwareAccelerationDemo;