@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

package/dist/hooks/use-hardware-acceleration.esm.js

@@ -0,0 +1,313 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface GPUInfo {
+  vendor}
+
+export interface HardwareAccelerationMetrics {
+  fps}
+
+export interface HardwareAccelerationConfig {
+  enableGPUMonitoring?}
+
+export interface HardwareAccelerationCallbacks {
+  onGPUDetected?) => void
+  onPerformanceWarning?, metrics) => void
+  onBatteryWarning?, isLow) => void
+  onOptimizationApplied?) => void
+}
+
+export const useHardwareAcceleration = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enableGPUMonitoring = true,
+    enablePerformanceTracking = true,
+    enableBatteryOptimization = true,
+    enableAutomaticOptimization = true,
+    fpsTarget = 60,
+    memoryThreshold = 80,
+    batteryLowThreshold = 0.2
+  } = config
+
+  const [gpuInfo, setGpuInfo] = useState<GPUInfo | null>(null)
+  const [metrics, setMetrics] = useState<HardwareAccelerationMetrics>({
+    fps,
+    frameTime,
+    memoryUsage,
+    gpuUtilization,
+    batteryImpact,
+    performanceScore})
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const [isHardwareAccelerated, setIsHardwareAccelerated] = useState(false)
+
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const glRef = useRef<WebGLRenderingContext | null>(null)
+  const frameCountRef = useRef(0)
+  const lastFrameTimeRef = useRef(performance.now())
+  const performanceTimerRef = useRef<number | null>(null)
+
+  // GPU capability detection
+  const detectGPU = useCallback(()=> {
+    if (!enableGPUMonitoring) return null
+
+    try {
+      const canvas = document.createElement('canvas')
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') as WebGLRenderingContext
+      
+      if (!gl) {
+        return {
+          vendor,
+          renderer,
+          version,
+          isWebGLSupported,
+          isWebGL2Supported,
+          maxTextureSize,
+          maxAnisotropy,
+          maxPrecision}
+      }
+
+      const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
+      const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) = gl.getParameter(gl.VERSION) || 'Unknown'
+      
+      // Check WebGL2 support
+      const canvas2 = document.createElement('canvas')
+      const gl2 = canvas2.getContext('webgl2')
+      const isWebGL2Supported = !!gl2
+
+      // Get GPU capabilities
+      const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE) || 0
+      const maxAnisotropy = gl.getParameter((gl as any).MAX_TEXTURE_MAX_ANISOTROPY_EXT) || 0
+      const maxPrecision = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT)?.precision?.toString() || 'Unknown'
+
+      const gpuInfo= {
+        vendor,
+        renderer,
+        version,
+        isWebGLSupported,
+        isWebGL2Supported,
+        maxTextureSize,
+        maxAnisotropy,
+        maxPrecision
+      }
+
+      setGpuInfo(gpuInfo)
+      callbacks.onGPUDetected?.(gpuInfo)
+      
+      return gpuInfo
+    } catch (error) {
+      console.warn('GPU detection failed, error)
+      return null
+    }
+  }, [enableGPUMonitoring, callbacks])
+
+  // Performance monitoring
+  const measurePerformance = useCallback(() => {
+    if (!enablePerformanceTracking) return
+
+    const now = performance.now()
+    frameCountRef.current++
+    
+    if (now - lastFrameTimeRef.current >= 1000) {
+      const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current))
+      const frameTime = 1000 / fps
+      
+      // Simulate GPU utilization and memory usage
+      const gpuUtilization = Math.random() * 100
+      const memoryUsage = Math.random() * 100
+      
+      // Calculate battery impact based on performance
+      const batteryImpact = Math.min((fps / fpsTarget) * 50 + (gpuUtilization / 100) * 30, 100)
+      
+      // Calculate performance score
+      const fpsScore = Math.min((fps / fpsTarget) * 100, 100)
+      const timeScore = Math.max(100 - (frameTime - 16.67) * 10, 0)
+      const memoryScore = Math.max(100 - memoryUsage, 0)
+      const gpuScore = Math.max(100 - gpuUtilization, 0)
+      
+      const performanceScore = Math.round((fpsScore + timeScore + memoryScore + gpuScore) / 4)
+      
+      const newMetrics= {
+        fps,
+        frameTime,
+        memoryUsage,
+        gpuUtilization,
+        batteryImpact,
+        performanceScore
+      }
+      
+      setMetrics(newMetrics)
+      
+      // Check for performance warnings
+      if (fps < fpsTarget * 0.8) {
+        callbacks.onPerformanceWarning?.('FPS below target', newMetrics)
+      }
+      
+      if (memoryUsage > memoryThreshold) {
+        callbacks.onPerformanceWarning?.('Memory usage high', newMetrics)
+      }
+      
+      frameCountRef.current = 0
+      lastFrameTimeRef.current = now
+    }
+  }, [enablePerformanceTracking, fpsTarget, memoryThreshold, callbacks])
+
+  // Battery monitoring
+  const checkBatteryStatus = useCallback(async () => {
+    if (!enableBatteryOptimization || !('getBattery' in navigator)) return
+
+    try {
+      const battery = await (navigator as any).getBattery()
+      const level = battery.level
+      
+      if (level < batteryLowThreshold) {
+        callbacks.onBatteryWarning?.(level, true)
+        applyBatteryOptimizations()
+      }
+    } catch (error) {
+      console.warn('Battery API not available, error)
+    }
+  }, [enableBatteryOptimization, batteryLowThreshold, callbacks])
+
+  // Apply battery optimizations
+  const applyBatteryOptimizations = useCallback(() => {
+    if (!enableBatteryOptimization) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const optimizations = [
+        'Reduced animation complexity for battery optimization',
+        'Hardware acceleration throttled for power efficiency',
+        'GPU utilization optimized for battery life'
+      ]
+      
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+      
+      optimizations.forEach(optimization => {
+        callbacks.onOptimizationApplied?.(optimization)
+      })
+    }, 300)
+  }, [enableBatteryOptimization, callbacks])
+
+  // Automatic optimization
+  const applyAutomaticOptimizations = useCallback(() => {
+    if (!enableAutomaticOptimization) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const optimizations] = []
+      
+      if (metrics.fps < fpsTarget * 0.8) {
+        optimizations.push('Hardware acceleration optimized for better FPS')
+      }
+      
+      if (metrics.memoryUsage > memoryThreshold) {
+        optimizations.push('Memory usage optimized for better performance')
+      }
+      
+      if (metrics.gpuUtilization > 80) {
+        optimizations.push('GPU utilization optimized for better efficiency')
+      }
+      
+      if (optimizations.length > 0) {
+        setOptimizations(prev => [...prev, ...optimizations])
+        optimizations.forEach(optimization => {
+          callbacks.onOptimizationApplied?.(optimization)
+        })
+      }
+      
+      setIsOptimizing(false)
+    }, 200)
+  }, [enableAutomaticOptimization, metrics, fpsTarget, memoryThreshold, callbacks])
+
+  // Hardware acceleration status check
+  const checkHardwareAcceleration = useCallback(() => {
+    if (!gpuInfo) return false
+    
+    const isSupported = gpuInfo.isWebGLSupported || gpuInfo.isWebGL2Supported
+    const hasGoodPerformance = metrics.performanceScore >= 80
+    
+    setIsHardwareAccelerated(isSupported && hasGoodPerformance)
+    return isSupported && hasGoodPerformance
+  }, [gpuInfo, metrics.performanceScore])
+
+  // Initialize monitoring
+  useEffect(() => {
+    try {
+      // Detect GPU on mount
+      const detectedGPU = detectGPU()
+      
+      if (detectedGPU) {
+        canvasRef.current = document.createElement('canvas')
+        glRef.current = canvasRef.current.getContext('webgl')
+      }
+
+      // Set up performance monitoring
+      if (enablePerformanceTracking) {
+        performanceTimerRef.current = window.setInterval(measurePerformance, 1000)
+      }
+
+      // Set up battery monitoring
+      if (enableBatteryOptimization) {
+        checkBatteryStatus()
+        const batteryInterval = setInterval(checkBatteryStatus, 30000) // Check every 30 seconds
+        
+        return () => {
+          if (batteryInterval) clearInterval(batteryInterval)
+        }
+      }
+    } catch (error) {
+      console.warn('Hardware acceleration initialization failed, error)
+    }
+  }, [detectGPU, enablePerformanceTracking, enableBatteryOptimization, checkBatteryStatus, measurePerformance])
+
+  // Check hardware acceleration status when metrics change
+  useEffect(() => {
+    checkHardwareAcceleration()
+  }, [checkHardwareAcceleration])
+
+  // Apply automatic optimizations when performance degrades
+  useEffect(() => {
+    if (enableAutomaticOptimization && metrics.performanceScore < 70) {
+      applyAutomaticOptimizations()
+    }
+  }, [enableAutomaticOptimization, metrics.performanceScore, applyAutomaticOptimizations])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (performanceTimerRef.current) {
+        clearInterval(performanceTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    gpuInfo,
+    metrics,
+    isOptimizing,
+    optimizations,
+    isHardwareAccelerated,
+    
+    // Actions
+    detectGPU,
+    measurePerformance,
+    checkBatteryStatus,
+    applyBatteryOptimizations,
+    applyAutomaticOptimizations,
+    checkHardwareAcceleration,
+    
+    // Computed values
+    isGPUSupported,
+    isWebGL2Supported,
+    performanceLevel= 90 ? 'excellent' = 80 ? 'good' = 70 ? 'fair' ,
+    needsOptimization,
+    batteryOptimized}
+}
+
+export default useHardwareAcceleration

package/dist/hooks/use-hardware-acceleration.js

@@ -0,0 +1,313 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface GPUInfo {
+  vendor}
+
+export interface HardwareAccelerationMetrics {
+  fps}
+
+export interface HardwareAccelerationConfig {
+  enableGPUMonitoring?}
+
+export interface HardwareAccelerationCallbacks {
+  onGPUDetected?) => void
+  onPerformanceWarning?, metrics) => void
+  onBatteryWarning?, isLow) => void
+  onOptimizationApplied?) => void
+}
+
+export const useHardwareAcceleration = (
+  config= {},
+  callbacks= {}
+) => {
+  const {
+    enableGPUMonitoring = true,
+    enablePerformanceTracking = true,
+    enableBatteryOptimization = true,
+    enableAutomaticOptimization = true,
+    fpsTarget = 60,
+    memoryThreshold = 80,
+    batteryLowThreshold = 0.2
+  } = config
+
+  const [gpuInfo, setGpuInfo] = useState<GPUInfo | null>(null)
+  const [metrics, setMetrics] = useState<HardwareAccelerationMetrics>({
+    fps,
+    frameTime,
+    memoryUsage,
+    gpuUtilization,
+    batteryImpact,
+    performanceScore})
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const [isHardwareAccelerated, setIsHardwareAccelerated] = useState(false)
+
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const glRef = useRef<WebGLRenderingContext | null>(null)
+  const frameCountRef = useRef(0)
+  const lastFrameTimeRef = useRef(performance.now())
+  const performanceTimerRef = useRef<number | null>(null)
+
+  // GPU capability detection
+  const detectGPU = useCallback(()=> {
+    if (!enableGPUMonitoring) return null
+
+    try {
+      const canvas = document.createElement('canvas')
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') as WebGLRenderingContext
+      
+      if (!gl) {
+        return {
+          vendor,
+          renderer,
+          version,
+          isWebGLSupported,
+          isWebGL2Supported,
+          maxTextureSize,
+          maxAnisotropy,
+          maxPrecision}
+      }
+
+      const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
+      const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) = gl.getParameter(gl.VERSION) || 'Unknown'
+      
+      // Check WebGL2 support
+      const canvas2 = document.createElement('canvas')
+      const gl2 = canvas2.getContext('webgl2')
+      const isWebGL2Supported = !!gl2
+
+      // Get GPU capabilities
+      const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE) || 0
+      const maxAnisotropy = gl.getParameter((gl as any).MAX_TEXTURE_MAX_ANISOTROPY_EXT) || 0
+      const maxPrecision = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT)?.precision?.toString() || 'Unknown'
+
+      const gpuInfo= {
+        vendor,
+        renderer,
+        version,
+        isWebGLSupported,
+        isWebGL2Supported,
+        maxTextureSize,
+        maxAnisotropy,
+        maxPrecision
+      }
+
+      setGpuInfo(gpuInfo)
+      callbacks.onGPUDetected?.(gpuInfo)
+      
+      return gpuInfo
+    } catch (error) {
+      console.warn('GPU detection failed, error)
+      return null
+    }
+  }, [enableGPUMonitoring, callbacks])
+
+  // Performance monitoring
+  const measurePerformance = useCallback(() => {
+    if (!enablePerformanceTracking) return
+
+    const now = performance.now()
+    frameCountRef.current++
+    
+    if (now - lastFrameTimeRef.current >= 1000) {
+      const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current))
+      const frameTime = 1000 / fps
+      
+      // Simulate GPU utilization and memory usage
+      const gpuUtilization = Math.random() * 100
+      const memoryUsage = Math.random() * 100
+      
+      // Calculate battery impact based on performance
+      const batteryImpact = Math.min((fps / fpsTarget) * 50 + (gpuUtilization / 100) * 30, 100)
+      
+      // Calculate performance score
+      const fpsScore = Math.min((fps / fpsTarget) * 100, 100)
+      const timeScore = Math.max(100 - (frameTime - 16.67) * 10, 0)
+      const memoryScore = Math.max(100 - memoryUsage, 0)
+      const gpuScore = Math.max(100 - gpuUtilization, 0)
+      
+      const performanceScore = Math.round((fpsScore + timeScore + memoryScore + gpuScore) / 4)
+      
+      const newMetrics= {
+        fps,
+        frameTime,
+        memoryUsage,
+        gpuUtilization,
+        batteryImpact,
+        performanceScore
+      }
+      
+      setMetrics(newMetrics)
+      
+      // Check for performance warnings
+      if (fps < fpsTarget * 0.8) {
+        callbacks.onPerformanceWarning?.('FPS below target', newMetrics)
+      }
+      
+      if (memoryUsage > memoryThreshold) {
+        callbacks.onPerformanceWarning?.('Memory usage high', newMetrics)
+      }
+      
+      frameCountRef.current = 0
+      lastFrameTimeRef.current = now
+    }
+  }, [enablePerformanceTracking, fpsTarget, memoryThreshold, callbacks])
+
+  // Battery monitoring
+  const checkBatteryStatus = useCallback(async () => {
+    if (!enableBatteryOptimization || !('getBattery' in navigator)) return
+
+    try {
+      const battery = await (navigator as any).getBattery()
+      const level = battery.level
+      
+      if (level < batteryLowThreshold) {
+        callbacks.onBatteryWarning?.(level, true)
+        applyBatteryOptimizations()
+      }
+    } catch (error) {
+      console.warn('Battery API not available, error)
+    }
+  }, [enableBatteryOptimization, batteryLowThreshold, callbacks])
+
+  // Apply battery optimizations
+  const applyBatteryOptimizations = useCallback(() => {
+    if (!enableBatteryOptimization) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const optimizations = [
+        'Reduced animation complexity for battery optimization',
+        'Hardware acceleration throttled for power efficiency',
+        'GPU utilization optimized for battery life'
+      ]
+      
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+      
+      optimizations.forEach(optimization => {
+        callbacks.onOptimizationApplied?.(optimization)
+      })
+    }, 300)
+  }, [enableBatteryOptimization, callbacks])
+
+  // Automatic optimization
+  const applyAutomaticOptimizations = useCallback(() => {
+    if (!enableAutomaticOptimization) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const optimizations] = []
+      
+      if (metrics.fps < fpsTarget * 0.8) {
+        optimizations.push('Hardware acceleration optimized for better FPS')
+      }
+      
+      if (metrics.memoryUsage > memoryThreshold) {
+        optimizations.push('Memory usage optimized for better performance')
+      }
+      
+      if (metrics.gpuUtilization > 80) {
+        optimizations.push('GPU utilization optimized for better efficiency')
+      }
+      
+      if (optimizations.length > 0) {
+        setOptimizations(prev => [...prev, ...optimizations])
+        optimizations.forEach(optimization => {
+          callbacks.onOptimizationApplied?.(optimization)
+        })
+      }
+      
+      setIsOptimizing(false)
+    }, 200)
+  }, [enableAutomaticOptimization, metrics, fpsTarget, memoryThreshold, callbacks])
+
+  // Hardware acceleration status check
+  const checkHardwareAcceleration = useCallback(() => {
+    if (!gpuInfo) return false
+    
+    const isSupported = gpuInfo.isWebGLSupported || gpuInfo.isWebGL2Supported
+    const hasGoodPerformance = metrics.performanceScore >= 80
+    
+    setIsHardwareAccelerated(isSupported && hasGoodPerformance)
+    return isSupported && hasGoodPerformance
+  }, [gpuInfo, metrics.performanceScore])
+
+  // Initialize monitoring
+  useEffect(() => {
+    try {
+      // Detect GPU on mount
+      const detectedGPU = detectGPU()
+      
+      if (detectedGPU) {
+        canvasRef.current = document.createElement('canvas')
+        glRef.current = canvasRef.current.getContext('webgl')
+      }
+
+      // Set up performance monitoring
+      if (enablePerformanceTracking) {
+        performanceTimerRef.current = window.setInterval(measurePerformance, 1000)
+      }
+
+      // Set up battery monitoring
+      if (enableBatteryOptimization) {
+        checkBatteryStatus()
+        const batteryInterval = setInterval(checkBatteryStatus, 30000) // Check every 30 seconds
+        
+        return () => {
+          if (batteryInterval) clearInterval(batteryInterval)
+        }
+      }
+    } catch (error) {
+      console.warn('Hardware acceleration initialization failed, error)
+    }
+  }, [detectGPU, enablePerformanceTracking, enableBatteryOptimization, checkBatteryStatus, measurePerformance])
+
+  // Check hardware acceleration status when metrics change
+  useEffect(() => {
+    checkHardwareAcceleration()
+  }, [checkHardwareAcceleration])
+
+  // Apply automatic optimizations when performance degrades
+  useEffect(() => {
+    if (enableAutomaticOptimization && metrics.performanceScore < 70) {
+      applyAutomaticOptimizations()
+    }
+  }, [enableAutomaticOptimization, metrics.performanceScore, applyAutomaticOptimizations])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (performanceTimerRef.current) {
+        clearInterval(performanceTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    gpuInfo,
+    metrics,
+    isOptimizing,
+    optimizations,
+    isHardwareAccelerated,
+    
+    // Actions
+    detectGPU,
+    measurePerformance,
+    checkBatteryStatus,
+    applyBatteryOptimizations,
+    applyAutomaticOptimizations,
+    checkHardwareAcceleration,
+    
+    // Computed values
+    isGPUSupported,
+    isWebGL2Supported,
+    performanceLevel= 90 ? 'excellent' = 80 ? 'good' = 70 ? 'fair' ,
+    needsOptimization,
+    batteryOptimized}
+}
+
+export default useHardwareAcceleration