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

package/dist/components/ui/battery-conscious-animation-demo.esm.js

@@ -1,568 +1,139 @@
-import React, { useState, useCallback } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Badge } from './badge'
-import { Button } from './button'
-import { useBatteryAnimations } from '../../hooks/use-battery-animations'
-import { usePerformanceThrottling } from '../../hooks/use-performance-throttling'
-
-export const BatteryConsciousAnimationDemo: React.FC = () => {
-  const [showBatteryInfo, setShowBatteryInfo] = useState(true)
-  const [showPerformanceInfo, setShowPerformanceInfo] = useState(true)
-  const [showAnimationDemo, setShowAnimationDemo] = useState(true)
-  const [showControls] = useState(true)
-
-  // Animation states
-  const [animationState, setAnimationState] = useState<'idle' | 'running' | 'paused'>('idle')
-  const [animationType, setAnimationType] = useState<'battery' | 'performance' | 'reduced-motion' | 'user-preference'>('battery')
-  const [animationComplexity, setAnimationComplexity] = useState<'low' | 'medium' | 'high'>('medium')
-
-  // Hooks
-  const batteryAnimations = useBatteryAnimations({
-    enableBatteryMonitoring: true,
-    enablePerformanceThrottling: true,
-    enableReducedMotion: true,
-    enableUserPreferences: true,
-    enableAutomaticOptimization: true
-  }, {
-    onBatteryLevelChange: (level, isLow) => console.log('Battery level changed:', level, isLow),
-    onPerformanceWarning: (score, shouldThrottle) => console.log('Performance warning:', score, shouldThrottle),
-    onAnimationThrottled: (level, reason) => console.log('Animation throttled:', level, reason),
-    onUserPreferenceChange: (preference) => console.log('User preference changed:', preference),
-    onReducedMotionChange: (enabled) => console.log('Reduced motion changed:', enabled)
-  })
-
-  const performanceThrottling = 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)
-  })
-
-  // Animation controls
-  const startAnimation = useCallback(() => {
-    setAnimationState('running')
-    setTimeout(() => setAnimationState('idle'), 3000)
-  }, [])
-
-  const pauseAnimation = useCallback(() => {
-    setAnimationState('paused')
-  }, [])
-
-  const resumeAnimation = useCallback(() => {
-    setAnimationState('running')
-  }, [])
-
-  // Get animation classes based on current state
-  const getAnimationClasses = useCallback(() => {
-    const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out'
-    
-    // Base battery-conscious animation
-    let classes = `${baseClasses} battery-conscious-animation`
-    
-    // Add battery-specific classes
-    if (batteryAnimations.state.isCriticalBattery) {
-      classes += ' battery-critical-animation'
-    } else if (batteryAnimations.state.isLowBattery) {
-      classes += ' battery-optimized-animation'
-    }
-    
-    // Add performance throttling classes
-    if (performanceThrottling.throttleLevel === 'aggressive') {
-      classes += ' performance-throttled-aggressive'
-    } else if (performanceThrottling.throttleLevel === 'moderate') {
-      classes += ' performance-throttled-moderate'
-    } else if (performanceThrottling.throttleLevel === 'light') {
-      classes += ' performance-throttled-light'
-    }
-    
-    // Add complexity classes
-    if (animationComplexity === 'low') {
-      classes += ' animation-complexity-low'
-    } else if (animationComplexity === 'high') {
-      classes += ' animation-complexity-high'
-    }
-    
-    // Add user preference classes
-    classes += ` user-preference-${batteryAnimations.state.userPreference}`
-    
-    // Add performance optimization classes
-    if (performanceThrottling.metrics.performanceScore < 50) {
-      classes += ' performance-poor'
-    } else if (performanceThrottling.metrics.performanceScore < 70) {
-      classes += ' performance-fair'
-    }
-    
-    return classes
-  }, [batteryAnimations.state, performanceThrottling.throttleLevel, animationComplexity])
-
-  // Get animation styles based on state
-  const getAnimationStyles = useCallback(() => {
-    const settings = batteryAnimations.animationSettings
-    
-    if (!settings.shouldAnimate || batteryAnimations.shouldDisableAnimations) {
-      return {
-        transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
-        opacity: 1
-      }
-    }
-    
-    switch (animationState) {
-      case 'running':
-        return {
-          transform: `translate3d(100px, 0, 0) rotate(360deg) scale(1.2)`,
-          opacity: 0.8,
-          transitionDuration: `${settings.duration}ms`,
-          transitionTimingFunction: settings.easing
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { Button } from './button';
+import { useBatteryAnimations } from '../../hooks/use-battery-animations';
+import { usePerformanceThrottling } from '../../hooks/use-performance-throttling';
+export const BatteryConsciousAnimationDemo = () => {
+    const [showBatteryInfo, setShowBatteryInfo] = useState(true);
+    const [showPerformanceInfo, setShowPerformanceInfo] = useState(true);
+    const [showAnimationDemo, setShowAnimationDemo] = useState(true);
+    const [showControls] = useState(true);
+    // Animation states
+    const [animationState, setAnimationState] = useState('idle');
+    const [animationType, setAnimationType] = useState('battery');
+    const [animationComplexity, setAnimationComplexity] = useState('medium');
+    // Hooks
+    const batteryAnimations = useBatteryAnimations({
+        enableBatteryMonitoring: true,
+        enablePerformanceThrottling: true,
+        enableReducedMotion: true,
+        enableUserPreferences: true,
+        enableAutomaticOptimization: true
+    }, {
+        onBatteryLevelChange: (level, isLow) => console.log('Battery level changed:', level, isLow),
+        onPerformanceWarning: (score, shouldThrottle) => console.log('Performance warning:', score, shouldThrottle),
+        onAnimationThrottled: (level, reason) => console.log('Animation throttled:', level, reason),
+        onUserPreferenceChange: (preference) => console.log('User preference changed:', preference),
+        onReducedMotionChange: (enabled) => console.log('Reduced motion changed:', enabled)
+    });
+    const performanceThrottling = 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)
+    });
+    // Animation controls
+    const startAnimation = useCallback(() => {
+        setAnimationState('running');
+        setTimeout(() => setAnimationState('idle'), 3000);
+    }, []);
+    const pauseAnimation = useCallback(() => {
+        setAnimationState('paused');
+    }, []);
+    const resumeAnimation = useCallback(() => {
+        setAnimationState('running');
+    }, []);
+    // Get animation classes based on current state
+    const getAnimationClasses = useCallback(() => {
+        const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out';
+        // Base battery-conscious animation
+        let classes = `${baseClasses} battery-conscious-animation`;
+        // Add battery-specific classes
+        if (batteryAnimations.state.isCriticalBattery) {
+            classes += ' battery-critical-animation';
         }
-      case 'paused':
-        return {
-          transform: `translate3d(50px, 0, 0) rotate(180deg) scale(1.1)`,
-          opacity: 0.9,
-          transitionDuration: `${settings.duration}ms`,
-          transitionTimingFunction: settings.easing
+        else if (batteryAnimations.state.isLowBattery) {
+            classes += ' battery-optimized-animation';
         }
-      default:
-        return {
-          transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
-          opacity: 1,
-          transitionDuration: `${settings.duration}ms`,
-          transitionTimingFunction: settings.easing
+        // Add performance throttling classes
+        if (performanceThrottling.throttleLevel === 'aggressive') {
+            classes += ' performance-throttled-aggressive';
         }
-    }
-  }, [animationState, batteryAnimations.animationSettings, batteryAnimations.shouldDisableAnimations])
-
-  // Get background color based on battery level
-  const getBackgroundColor = useCallback(() => {
-    if (batteryAnimations.state.isCriticalBattery) return 'bg-red-500'
-    if (batteryAnimations.state.isLowBattery) return 'bg-yellow-500'
-    if (batteryAnimations.state.batteryLevel < 0.5) return 'bg-orange-500'
-    return 'bg-green-500'
-  }, [batteryAnimations.state])
-
-  return (
-    <div className="space-y-6">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold text-cs-text-primary mb-2">
-          🔋 Battery-Conscious Mobile Animations
-        </h1>
-        <p className="text-lg text-cs-text-secondary mb-4">
-          Story 9 Implementation - Smart animation system that respects battery life, performance, and user preferences
-        </p>
-        <div className="flex items-center justify-center gap-2">
-          <Badge variant="default">Story 9</Badge>
-          <Badge variant="outline">Battery Conscious</Badge>
-          <Badge variant="secondary">Performance Optimized</Badge>
-          <Badge variant="outline">Accessibility First</Badge>
-        </div>
-      </div>
-
-      {/* Battery Information */}
-      {showBatteryInfo && (
-        <Card className="border-2 border-cs-primary">
-          <CardHeader>
-            <CardTitle className="text-xl flex items-center gap-2">
-              🔋 Battery Status
-              <Badge variant={batteryAnimations.state.isLowBattery ? 'secondary' : 'default'}>
-                {batteryAnimations.batteryPercentage}%
-              </Badge>
-            </CardTitle>
-            <CardDescription>
-              Real-time battery monitoring and animation optimization
-            </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 Information</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">{batteryAnimations.batteryPercentage}%</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Status:</span>
-                    <Badge variant={batteryAnimations.state.isCharging ? 'default' : 'secondary'}>
-                      {batteryAnimations.state.isCharging ? 'Charging' : 'Discharging'}
-                    </Badge>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Health:</span>
-                    <Badge variant="outline">{batteryAnimations.getBatteryHealth()}</Badge>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Throttle Level:</span>
-                    <Badge variant="outline">{batteryAnimations.state.throttleLevel}</Badge>
-                  </div>
-                </div>
-              </div>
-              
-              <div className="space-y-3">
-                <h4 className="font-medium">Animation Settings</h4>
-                <div className="space-y-2">
-                  <div className="flex justify-between">
-                    <span className="text-sm">Duration:</span>
-                    <span className="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.duration}ms</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Easing:</span>
-                    <span className="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.easing}</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Complexity:</span>
-                    <Badge variant="outline">{batteryAnimations.animationSettings.complexity}</Badge>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Frame Rate:</span>
-                    <span className="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.frameRate}fps</span>
-                  </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={batteryAnimations.state.userPreference === 'performance' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => batteryAnimations.updateUserPreference('performance')}
-                >
-                  Performance
-                </Button>
-                <Button
-                  variant={batteryAnimations.state.userPreference === 'balanced' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => batteryAnimations.updateUserPreference('balanced')}
-                >
-                  Balanced
-                </Button>
-                <Button
-                  variant={batteryAnimations.state.userPreference === 'battery' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => batteryAnimations.updateUserPreference('battery')}
-                >
-                  Battery
-                </Button>
-                <Button
-                  variant={batteryAnimations.state.userPreference === 'accessibility' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => batteryAnimations.updateUserPreference('accessibility')}
-                >
-                  Accessibility
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Performance Information */}
-      {showPerformanceInfo && (
-        <Card className="border-2 border-cs-secondary">
-          <CardHeader>
-            <CardTitle className="text-xl flex items-center gap-2">
-              📊 Performance Monitoring
-              <Badge variant={performanceThrottling.isThrottling ? 'secondary' : 'default'}>
-                {performanceThrottling.isThrottling ? 'Throttling' : 'Optimal'}
-              </Badge>
-            </CardTitle>
-            <CardDescription>
-              Real-time performance metrics and automatic throttling
-            </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">
-                  {performanceThrottling.metrics.fps}
-                </p>
-                <p className="text-sm text-cs-text-secondary">FPS</p>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-cs-secondary">
-                  {performanceThrottling.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">
-                  {performanceThrottling.metrics.performanceScore}
-                </p>
-                <p className="text-sm text-cs-text-secondary">Performance Score</p>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-cs-primary">
-                  {performanceThrottling.throttleLevel}
-                </p>
-                <p className="text-sm text-cs-text-secondary">Throttle Level</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={
-                  performanceThrottling.performanceLevel === 'excellent' || performanceThrottling.performanceLevel === 'good' 
-                    ? 'default' : 'secondary'
-                }>
-                  {performanceThrottling.performanceLevel.toUpperCase()}
-                </Badge>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="font-medium text-sm">Throttling Status:</span>
-                <Badge variant={performanceThrottling.isThrottling ? 'secondary' : 'default'}>
-                  {performanceThrottling.isThrottling ? 'Active' : 'Inactive'}
-                </Badge>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Animation Demo */}
-      {showAnimationDemo && (
-        <Card className="border border-cs-border">
-          <CardHeader>
-            <CardTitle className="text-lg">Battery-Conscious Animation Demo</CardTitle>
-            <CardDescription>
-              Test different animation types with real-time battery and performance optimization
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {/* Animation Type Selection */}
-            <div className="flex flex-wrap gap-2">
-              <Button
-                variant={animationType === 'battery' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setAnimationType('battery')}
-              >
-                Battery Optimized
-              </Button>
-              <Button
-                variant={animationType === 'performance' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setAnimationType('performance')}
-              >
-                Performance Optimized
-              </Button>
-              <Button
-                variant={animationType === 'reduced-motion' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setAnimationType('reduced-motion')}
-              >
-                Reduced Motion
-              </Button>
-              <Button
-                variant={animationType === 'user-preference' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setAnimationType('user-preference')}
-              >
-                User Preference
-              </Button>
-            </div>
-
-            {/* Animation Complexity Selection */}
-            <div className="flex flex-wrap gap-2">
-              <Button
-                variant={animationComplexity === 'low' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setAnimationComplexity('low')}
-              >
-                Low Complexity
-              </Button>
-              <Button
-                variant={animationComplexity === 'medium' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setAnimationComplexity('medium')}
-              >
-                Medium Complexity
-              </Button>
-              <Button
-                variant={animationComplexity === 'high' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setAnimationComplexity('high')}
-              >
-                High Complexity
-              </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()} ${getBackgroundColor()}`}
-                style={getAnimationStyles()}
-              />
-            </div>
-
-            {/* Animation Info */}
-            <div className="text-center text-sm text-cs-text-secondary">
-              <p>Animation Type: <span className="font-medium">{animationType}</span></p>
-              <p>Complexity: <span className="font-medium">{animationComplexity}</span></p>
-              <p>State: <span className="font-medium">{animationState}</span></p>
-              <p>Battery Optimized: <span className="font-medium">
-                {batteryAnimations.isAnimationOptimized() ? 'Yes' : 'No'}
-              </span></p>
-              <p>Animations Disabled: <span className="font-medium">
-                {batteryAnimations.shouldDisableAnimations ? 'Yes' : 'No'}
-              </span></p>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Controls */}
-      {showControls && (
-        <Card className="border border-cs-border">
-          <CardHeader>
-            <CardTitle className="text-lg">Demo Controls</CardTitle>
-            <CardDescription>
-              Configure and test different battery-conscious animation features
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex flex-wrap gap-4">
-              <Button
-                variant={showBatteryInfo ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setShowBatteryInfo(!showBatteryInfo)}
-              >
-                {showBatteryInfo ? 'Hide' : 'Show'} Battery Info
-              </Button>
-              <Button
-                variant={showPerformanceInfo ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setShowPerformanceInfo(!showPerformanceInfo)}
-              >
-                {showPerformanceInfo ? 'Hide' : 'Show'} Performance
-              </Button>
-              <Button
-                variant={showAnimationDemo ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setShowAnimationDemo(!showAnimationDemo)}
-              >
-                {showAnimationDemo ? 'Hide' : 'Show'} Animation Demo
-              </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">Battery Optimization:</span>
-              <Badge variant={batteryAnimations.isAnimationOptimized() ? 'default' : 'secondary'}>
-                {batteryAnimations.isAnimationOptimized() ? 'Active' : 'Inactive'}
-              </Badge>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm">Performance Throttling:</span>
-              <Badge variant={performanceThrottling.isThrottling ? 'secondary' : 'default'}>
-                {performanceThrottling.isThrottling ? 'Active' : 'Inactive'}
-              </Badge>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm">Reduced Motion:</span>
-              <Badge variant={batteryAnimations.state.reducedMotion ? 'secondary' : 'default'}>
-                {batteryAnimations.state.reducedMotion ? 'Enabled' : 'Disabled'}
-              </Badge>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm">User Preference:</span>
-              <Badge variant="outline">{batteryAnimations.state.userPreference}</Badge>
-            </div>
-          </div>
-
-          {/* Recent Optimizations */}
-          {batteryAnimations.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">
-                {batteryAnimations.optimizations.slice(-3).map((optimization, index) => (
-                  <li key={index}>• {optimization}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {/* Performance Optimizations */}
-          {performanceThrottling.optimizations.length > 0 && (
-            <div className="mt-4 p-3 bg-cs-secondary/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Performance Optimizations:</h4>
-              <ul className="text-xs text-cs-text-secondary space-y-1">
-                {performanceThrottling.optimizations.slice(-3).map((optimization, index) => (
-                  <li key={index}>• {optimization}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {/* Battery Recommendations */}
-          {batteryAnimations.recommendations.length > 0 && (
-            <div className="mt-4 p-3 bg-cs-primary/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">
-                {batteryAnimations.recommendations.slice(0, 3).map((recommendation, index) => (
-                  <li key={index}>• {recommendation}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {/* Performance Recommendations */}
-          {performanceThrottling.recommendations.length > 0 && (
-            <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Performance Recommendations:</h4>
-              <ul className="text-xs text-cs-text-secondary space-y-1">
-                {performanceThrottling.recommendations.slice(0, 3).map((recommendation, index) => (
-                  <li key={index}>• {recommendation}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-export default BatteryConsciousAnimationDemo
+        else if (performanceThrottling.throttleLevel === 'moderate') {
+            classes += ' performance-throttled-moderate';
+        }
+        else if (performanceThrottling.throttleLevel === 'light') {
+            classes += ' performance-throttled-light';
+        }
+        // Add complexity classes
+        if (animationComplexity === 'low') {
+            classes += ' animation-complexity-low';
+        }
+        else if (animationComplexity === 'high') {
+            classes += ' animation-complexity-high';
+        }
+        // Add user preference classes
+        classes += ` user-preference-${batteryAnimations.state.userPreference}`;
+        // Add performance optimization classes
+        if (performanceThrottling.metrics.performanceScore < 50) {
+            classes += ' performance-poor';
+        }
+        else if (performanceThrottling.metrics.performanceScore < 70) {
+            classes += ' performance-fair';
+        }
+        return classes;
+    }, [batteryAnimations.state, performanceThrottling.throttleLevel, animationComplexity]);
+    // Get animation styles based on state
+    const getAnimationStyles = useCallback(() => {
+        const settings = batteryAnimations.animationSettings;
+        if (!settings.shouldAnimate || batteryAnimations.shouldDisableAnimations) {
+            return {
+                transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                opacity: 1
+            };
+        }
+        switch (animationState) {
+            case 'running':
+                return {
+                    transform: `translate3d(100px, 0, 0) rotate(360deg) scale(1.2)`,
+                    opacity: 0.8,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+            case 'paused':
+                return {
+                    transform: `translate3d(50px, 0, 0) rotate(180deg) scale(1.1)`,
+                    opacity: 0.9,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+            default:
+                return {
+                    transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                    opacity: 1,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+        }
+    }, [animationState, batteryAnimations.animationSettings, batteryAnimations.shouldDisableAnimations]);
+    // Get background color based on battery level
+    const getBackgroundColor = useCallback(() => {
+        if (batteryAnimations.state.isCriticalBattery)
+            return 'bg-red-500';
+        if (batteryAnimations.state.isLowBattery)
+            return 'bg-yellow-500';
+        if (batteryAnimations.state.batteryLevel < 0.5)
+            return 'bg-orange-500';
+        return 'bg-green-500';
+    }, [batteryAnimations.state]);
+    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\uDD0B Battery-Conscious Mobile Animations" }), _jsx("p", { className: "text-lg text-cs-text-secondary mb-4", children: "Story 9 Implementation - Smart animation system that respects battery life, performance, and user preferences" }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Story 9" }), _jsx(Badge, { variant: "outline", children: "Battery Conscious" }), _jsx(Badge, { variant: "secondary", children: "Performance Optimized" }), _jsx(Badge, { variant: "outline", children: "Accessibility First" })] })] }), showBatteryInfo && (_jsxs(Card, { className: "border-2 border-cs-primary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDD0B Battery Status", _jsxs(Badge, { variant: batteryAnimations.state.isLowBattery ? 'secondary' : 'default', children: [batteryAnimations.batteryPercentage, "%"] })] }), _jsx(CardDescription, { children: "Real-time battery monitoring and animation optimization" })] }), _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 Information" }), _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: [batteryAnimations.batteryPercentage, "%"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Status:" }), _jsx(Badge, { variant: batteryAnimations.state.isCharging ? 'default' : 'secondary', children: batteryAnimations.state.isCharging ? 'Charging' : 'Discharging' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Health:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.getBatteryHealth() })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Throttle Level:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.state.throttleLevel })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Animation Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Duration:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryAnimations.animationSettings.duration, "ms"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Easing:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: batteryAnimations.animationSettings.easing })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Complexity:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.animationSettings.complexity })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Frame Rate:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryAnimations.animationSettings.frameRate, "fps"] })] })] })] })] }), _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: batteryAnimations.state.userPreference === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('performance'), children: "Performance" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'balanced' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('balanced'), children: "Balanced" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('battery'), children: "Battery" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'accessibility' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('accessibility'), children: "Accessibility" })] })] })] })] })), showPerformanceInfo && (_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 Monitoring", _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Throttling' : 'Optimal' })] }), _jsx(CardDescription, { children: "Real-time performance metrics and automatic throttling" })] }), _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: performanceThrottling.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: [performanceThrottling.metrics.frameTime.toFixed(1), "ms"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Frame Time" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-accent", children: performanceThrottling.metrics.performanceScore }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Performance Score" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: performanceThrottling.throttleLevel }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Throttle Level" })] })] }), _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: performanceThrottling.performanceLevel === 'excellent' || performanceThrottling.performanceLevel === 'good'
+                                                    ? 'default' : 'secondary', children: performanceThrottling.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium text-sm", children: "Throttling Status:" }), _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Active' : 'Inactive' })] })] })] })] })), showAnimationDemo && (_jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Battery-Conscious Animation Demo" }), _jsx(CardDescription, { children: "Test different animation types with real-time battery and performance optimization" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationType === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('battery'), children: "Battery Optimized" }), _jsx(Button, { variant: animationType === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('performance'), children: "Performance Optimized" }), _jsx(Button, { variant: animationType === 'reduced-motion' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('reduced-motion'), children: "Reduced Motion" }), _jsx(Button, { variant: animationType === 'user-preference' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('user-preference'), children: "User Preference" })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationComplexity === 'low' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('low'), children: "Low Complexity" }), _jsx(Button, { variant: animationComplexity === 'medium' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('medium'), children: "Medium Complexity" }), _jsx(Button, { variant: animationComplexity === 'high' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('high'), children: "High Complexity" })] }), _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()} ${getBackgroundColor()}`, style: getAnimationStyles() }) }), _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: ["Complexity: ", _jsx("span", { className: "font-medium", children: animationComplexity })] }), _jsxs("p", { children: ["State: ", _jsx("span", { className: "font-medium", children: animationState })] }), _jsxs("p", { children: ["Battery Optimized: ", _jsx("span", { className: "font-medium", children: batteryAnimations.isAnimationOptimized() ? 'Yes' : 'No' })] }), _jsxs("p", { children: ["Animations Disabled: ", _jsx("span", { className: "font-medium", children: batteryAnimations.shouldDisableAnimations ? 'Yes' : 'No' })] })] })] })] })), showControls && (_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 battery-conscious animation features" })] }), _jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: showBatteryInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowBatteryInfo(!showBatteryInfo), children: [showBatteryInfo ? 'Hide' : 'Show', " Battery Info"] }), _jsxs(Button, { variant: showPerformanceInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowPerformanceInfo(!showPerformanceInfo), children: [showPerformanceInfo ? 'Hide' : 'Show', " Performance"] }), _jsxs(Button, { variant: showAnimationDemo ? 'default' : 'outline', size: "sm", onClick: () => setShowAnimationDemo(!showAnimationDemo), children: [showAnimationDemo ? 'Hide' : 'Show', " Animation Demo"] })] }) })] })), _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: "Battery Optimization:" }), _jsx(Badge, { variant: batteryAnimations.isAnimationOptimized() ? 'default' : 'secondary', children: batteryAnimations.isAnimationOptimized() ? 'Active' : 'Inactive' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Performance Throttling:" }), _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Active' : 'Inactive' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Reduced Motion:" }), _jsx(Badge, { variant: batteryAnimations.state.reducedMotion ? 'secondary' : 'default', children: batteryAnimations.state.reducedMotion ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "User Preference:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.state.userPreference })] })] }), batteryAnimations.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: batteryAnimations.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), performanceThrottling.optimizations.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: "Performance Optimizations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: performanceThrottling.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), batteryAnimations.recommendations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-primary/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: batteryAnimations.recommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] })), performanceThrottling.recommendations.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: "Performance Recommendations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: performanceThrottling.recommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] }))] })] })] }));
+};
+export default BatteryConsciousAnimationDemo;