@shohojdhara/atomix 0.5.2 → 0.5.4

package/src/lib/theme/tokens/tokens.ts

@@ -378,6 +378,59 @@ export interface DesignTokens {
   'breakpoint-xl': string;
   'breakpoint-xxl': string;
 
+  // ============================================================================
+  // Advanced Features - Interactive Effects (Phase 2)
+  // ============================================================================
+  'interactive-vortex-enabled': string;
+  'interactive-vortex-strength': string;
+  'interactive-vortex-radius': string;
+  'interactive-vortex-decay': string;
+  'interactive-chromatic-enabled': string;
+  'interactive-chromatic-mode': string;
+  'interactive-chromatic-red-shift': string;
+  'interactive-chromatic-green-shift': string;
+  'interactive-chromatic-blue-shift': string;
+  'interactive-chromatic-edge-only': string;
+  'interactive-chromatic-edge-threshold': string;
+  'interactive-mouse-sensitivity': string;
+  'interactive-mouse-trail-effect': string;
+  'interactive-animation-speed-base': string;
+  'interactive-animation-speed-multiplier': string;
+
+  // ============================================================================
+  // Advanced Features - Optimization (Phase 3)
+  // ============================================================================
+  'optimization-breakpoint-mobile': string;
+  'optimization-breakpoint-tablet': string;
+  'optimization-breakpoint-desktop': string;
+  'optimization-breakpoint-wide': string;
+  'optimization-device-scaling-mobile': string;
+  'optimization-device-scaling-tablet': string;
+  'optimization-device-scaling-desktop': string;
+  'optimization-performance-fps-target': string;
+  'optimization-auto-scaling-enabled': string;
+  'optimization-auto-scaling-low-end': string;
+  'optimization-auto-scaling-mid-range': string;
+  'optimization-auto-scaling-high-end': string;
+
+  // ============================================================================
+  // Advanced Features - Visual Polish (Phase 4)
+  // ============================================================================
+  'visual-polish-border-iridescent-glow': string;
+  'visual-polish-border-shimmer-effect': string;
+  'visual-polish-border-beveled-edges': string;
+  'visual-polish-border-pulsing-glow': string;
+  'visual-polish-content-aware-blur-enabled': string;
+  'visual-polish-content-aware-depth-detection': string;
+  'visual-polish-content-aware-edge-preservation': string;
+  'visual-polish-content-aware-variable-radius': string;
+  'visual-polish-holographic-enabled': string;
+  'visual-polish-holographic-rainbow-diffraction': string;
+  'visual-polish-holographic-scanline-animation': string;
+  'visual-polish-holographic-grid-overlay': string;
+  'visual-polish-holographic-data-stream': string;
+  'visual-polish-holographic-pulse-rings': string;
+
   // ============================================================================
   // Custom tokens (allow any additional tokens)
   // ============================================================================
@@ -701,6 +754,53 @@ export const defaultTokens: DesignTokens = {
   'breakpoint-lg': '992px',
   'breakpoint-xl': '1200px',
   'breakpoint-xxl': '1440px',
+
+  // Advanced Features - Interactive Effects (Phase 2)
+  'interactive-vortex-enabled': 'false',
+  'interactive-vortex-strength': '0.5',
+  'interactive-vortex-radius': '100',
+  'interactive-vortex-decay': '0.8',
+  'interactive-chromatic-enabled': 'false',
+  'interactive-chromatic-mode': 'lateral',
+  'interactive-chromatic-red-shift': '0.02',
+  'interactive-chromatic-green-shift': '0',
+  'interactive-chromatic-blue-shift': '-0.02',
+  'interactive-chromatic-edge-only': 'false',
+  'interactive-chromatic-edge-threshold': '0.5',
+  'interactive-mouse-sensitivity': '1.0',
+  'interactive-mouse-trail-effect': 'false',
+  'interactive-animation-speed-base': '1.0',
+  'interactive-animation-speed-multiplier': '1.0',
+
+  // Advanced Features - Optimization (Phase 3)
+  'optimization-breakpoint-mobile': '0px',
+  'optimization-breakpoint-tablet': '768px',
+  'optimization-breakpoint-desktop': '1024px',
+  'optimization-breakpoint-wide': '1440px',
+  'optimization-device-scaling-mobile': '0.5',
+  'optimization-device-scaling-tablet': '0.75',
+  'optimization-device-scaling-desktop': '1.0',
+  'optimization-performance-fps-target': '60',
+  'optimization-auto-scaling-enabled': 'false',
+  'optimization-auto-scaling-low-end': '0.5',
+  'optimization-auto-scaling-mid-range': '0.75',
+  'optimization-auto-scaling-high-end': '1.0',
+
+  // Advanced Features - Visual Polish (Phase 4)
+  'visual-polish-border-iridescent-glow': 'false',
+  'visual-polish-border-shimmer-effect': 'false',
+  'visual-polish-border-beveled-edges': 'false',
+  'visual-polish-border-pulsing-glow': 'false',
+  'visual-polish-content-aware-blur-enabled': 'false',
+  'visual-polish-content-aware-depth-detection': 'false',
+  'visual-polish-content-aware-edge-preservation': 'false',
+  'visual-polish-content-aware-variable-radius': 'false',
+  'visual-polish-holographic-enabled': 'false',
+  'visual-polish-holographic-rainbow-diffraction': 'false',
+  'visual-polish-holographic-scanline-animation': 'false',
+  'visual-polish-holographic-grid-overlay': 'false',
+  'visual-polish-holographic-data-stream': 'false',
+  'visual-polish-holographic-pulse-rings': 'false',
 };
 
 /**
@@ -719,4 +819,4 @@ export const defaultTokens: DesignTokens = {
  */
 export function createTokens(overrides?: Partial<DesignTokens>): DesignTokens {
   return { ...defaultTokens, ...overrides };
-}
+}

package/src/lib/theme/types.ts

@@ -141,6 +141,8 @@ export interface UseThemeReturn {
     theme: string | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>,
     options?: ThemeLoadOptions
   ) => Promise<void>;
+  /** Update a specific theme section */
+  updateTheme: (section: ThemeSection, values: any) => Promise<void>;
   /** Available themes */
   availableThemes: ThemeMetadata[];
   /** Whether a theme is currently loading */
@@ -250,6 +252,16 @@ export interface ThemeProviderProps {
   onError?: (error: Error, themeName: string) => void;
 }
 
+/**
+ * Theme configuration (partial tokens)
+ */
+export type ThemeConfig = Partial<import('./tokens').DesignTokens>;
+
+/**
+ * Theme section name
+ */
+export type ThemeSection = keyof import('./tokens').DesignTokens;
+
 /**
  * Theme context value
  */
@@ -263,6 +275,8 @@ export interface ThemeContextValue {
     theme: string | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>,
     options?: ThemeLoadOptions
   ) => Promise<void>;
+  /** Update a specific theme section */
+  updateTheme: (section: ThemeSection, values: any) => Promise<void>;
   /** Available themes */
   availableThemes: ThemeMetadata[];
   /** Loading state */
@@ -501,6 +515,83 @@ export interface BorderRadiusOptions {
  * Users can augment this interface via module augmentation
  */
 export interface ThemeCustomProperties {
+  // Advanced Features Configuration
+  interactiveEffects?: {
+    vortex?: {
+      enabled?: boolean;
+      strength?: number;
+      radius?: number;
+      decay?: number;
+    };
+    chromaticAberration?: {
+      enabled?: boolean;
+      mode?: 'longitudinal' | 'lateral' | 'hybrid';
+      redShift?: number;
+      greenShift?: number;
+      blueShift?: number;
+      edgeOnly?: boolean;
+      edgeThreshold?: number;
+    };
+    mouseInteraction?: {
+      sensitivity?: number;
+      trailEffect?: boolean;
+    };
+    animationSpeed?: {
+      base?: number;
+      timeMultiplier?: number;
+    };
+  };
+  optimization?: {
+    responsive?: {
+      breakpoints?: {
+        mobile?: string;
+        tablet?: string;
+        desktop?: string;
+        wide?: string;
+      };
+      deviceScaling?: {
+        mobile?: number;
+        tablet?: number;
+        desktop?: number;
+      };
+    };
+    performance?: {
+      fpsTarget?: number;
+      autoScaling?: boolean;
+    };
+    autoScaling?: {
+      enabled?: boolean;
+      qualityThresholds?: {
+        lowEnd?: number;
+        midRange?: number;
+        highEnd?: number;
+      };
+    };
+  };
+  
+  visualPolish?: {
+    borders?: {
+      iridescentGlow?: boolean;
+      shimmerEffect?: boolean;
+      beveledEdges?: boolean;
+      pulsingGlow?: boolean;
+    };
+    contentAwareBlur?: {
+      enabled?: boolean;
+      depthDetection?: boolean;
+      edgePreservation?: boolean;
+      variableRadius?: boolean;
+    };
+    holographicEffects?: {
+      enabled?: boolean;
+      rainbowDiffraction?: boolean;
+      scanlineAnimation?: boolean;
+      gridOverlay?: boolean;
+      dataStream?: boolean;
+      pulseRings?: boolean;
+    };
+  };
+  
   [key: string]: any;
 }
 

package/src/lib/theme/utils/performanceMonitor.ts

@@ -0,0 +1,315 @@
+/**
+ * Performance Monitor Utility
+ * 
+ * Provides performance monitoring and metrics collection for the Atomix theme system.
+ * Used to measure and optimize performance of advanced visual effects.
+ */
+
+import React from 'react';
+
+/**
+ * Performance metrics collected by the monitor
+ */
+export interface PerformanceMetrics {
+  /** Frames per second */
+  fps: number;
+  /** Average frame render time in ms */
+  frameTime: number;
+  /** Peak frame render time in ms */
+  peakFrameTime: number;
+  /** Memory usage statistics */
+  memory?: {
+    usedJSHeapSize: number;
+    totalJSHeapSize: number;
+    jsHeapSizeLimit: number;
+  };
+  /** Timestamp of measurement */
+  timestamp: number;
+  /** Whether performance is degrading */
+  isDegraded: boolean;
+}
+
+/**
+ * Performance monitor configuration
+ */
+export interface PerformanceMonitorConfig {
+  /** Target FPS threshold (default: 60) */
+  fpsTarget?: number;
+  /** How frequently to sample (default: 500ms) */
+  sampleInterval?: number;
+  /** Callback for performance updates */
+  onUpdate?: (metrics: PerformanceMetrics) => void;
+  /** Callback when performance degrades */
+  onDegraded?: (metrics: PerformanceMetrics) => void;
+  /** Enable/disable memory monitoring */
+  enableMemoryMonitoring?: boolean;
+}
+
+/**
+ * Performance monitor class
+ */
+export class PerformanceMonitor {
+  public config: Required<PerformanceMonitorConfig>;
+  private frameCount: number = 0;
+  private lastSampleTime: number = 0;
+  private lastFpsUpdate: number = 0;
+  private frameTimes: number[] = [];
+  private animationFrameId: number | null = null;
+  private isActive: boolean = false;
+  private startTime: number = 0;
+  
+  /**
+   * Create a new performance monitor
+   * 
+   * @param config Configuration options
+   */
+  constructor(config?: PerformanceMonitorConfig) {
+    this.config = {
+      fpsTarget: config?.fpsTarget ?? 60,
+      sampleInterval: config?.sampleInterval ?? 500,
+      onUpdate: config?.onUpdate ?? (() => {}),
+      onDegraded: config?.onDegraded ?? (() => {}),
+      enableMemoryMonitoring: config?.enableMemoryMonitoring ?? (typeof window !== 'undefined' && 
+                              (window as any).performance &&
+                              (window as any).performance.memory),
+    };
+  }
+  
+  /**
+   * Start monitoring performance
+   */
+  public start(): void {
+    if (this.isActive) return;
+    
+    this.isActive = true;
+    this.frameCount = 0;
+    this.lastSampleTime = performance.now();
+    this.lastFpsUpdate = this.lastSampleTime;
+    this.frameTimes = [];
+    this.startTime = this.lastSampleTime;
+    
+    this.animationFrameId = requestAnimationFrame(this.onFrame.bind(this));
+  }
+  
+  /**
+   * Stop monitoring performance
+   */
+  public stop(): void {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.isActive = false;
+  }
+  
+  /**
+   * Get current performance metrics
+   */
+  public getMetrics(): PerformanceMetrics {
+    const now = performance.now();
+    const elapsed = now - this.lastFpsUpdate;
+    const fps = elapsed > 0 ? Math.round((this.frameCount / elapsed) * 1000) : 0;
+    
+    // Calculate average frame time
+    const avgFrameTime = this.frameTimes.length > 0 
+      ? this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length 
+      : 0;
+    
+    // Peak frame time
+    const peakFrameTime = this.frameTimes.length > 0 
+      ? Math.max(...this.frameTimes) 
+      : 0;
+    
+    // Get memory stats if available
+    let memory = undefined;
+    if (this.config.enableMemoryMonitoring) {
+      const perf = window.performance as any;
+      if (perf && perf.memory) {
+        memory = {
+          usedJSHeapSize: perf.memory.usedJSHeapSize,
+          totalJSHeapSize: perf.memory.totalJSHeapSize,
+          jsHeapSizeLimit: perf.memory.jsHeapSizeLimit,
+        };
+      }
+    }
+    
+    return {
+      fps,
+      frameTime: avgFrameTime,
+      peakFrameTime,
+      memory,
+      timestamp: now,
+      isDegraded: fps < (this.config.fpsTarget * 0.7), // Degraded if under 70% of target
+    };
+  }
+  
+  /**
+   * Get the current FPS
+   */
+  public getFps(): number {
+    return this.getMetrics().fps;
+  }
+  
+  /**
+   * Check if performance is degraded
+   */
+  public isPerformanceDegraded(): boolean {
+    return this.getMetrics().isDegraded;
+  }
+  
+  /**
+   * Private method called on each animation frame
+   */
+  private onFrame(timestamp: number): void {
+    if (!this.isActive) return;
+    
+    // Calculate frame time
+    const frameTime = timestamp - this.lastSampleTime;
+    this.frameTimes.push(frameTime);
+    
+    // Keep only the last 60 frame times for averaging
+    if (this.frameTimes.length > 60) {
+      this.frameTimes.shift();
+    }
+    
+    this.frameCount++;
+    this.lastSampleTime = timestamp;
+    
+    // Check if we need to update metrics
+    if (timestamp - this.lastFpsUpdate >= this.config.sampleInterval) {
+      const metrics = this.getMetrics();
+      
+      // Call update callback
+      this.config.onUpdate(metrics);
+      
+      // Check for degradation
+      if (metrics.isDegraded) {
+        this.config.onDegraded(metrics);
+      }
+      
+      // Reset counters
+      this.frameCount = 0;
+      this.lastFpsUpdate = timestamp;
+    }
+    
+    this.animationFrameId = requestAnimationFrame(this.onFrame.bind(this));
+  }
+  
+  /**
+   * Run a performance test for a specific function
+   * 
+   * @param fn Function to test
+   * @param iterations Number of iterations (default: 100)
+   * @returns Average execution time in ms
+   */
+  public async testFunctionPerformance(
+    fn: () => void, 
+    iterations: number = 100
+  ): Promise<number> {
+    const times: number[] = [];
+    
+    for (let i = 0; i < iterations; i++) {
+      const start = performance.now();
+      fn();
+      const end = performance.now();
+      times.push(end - start);
+    }
+    
+    return times.reduce((a, b) => a + b, 0) / times.length;
+  }
+}
+
+/**
+ * Create a performance monitor instance
+ * 
+ * @param config Configuration options
+ * @returns PerformanceMonitor instance
+ * 
+ * @example
+ * ```typescript
+ * import { createPerformanceMonitor } from '@shohojdhara/atomix/theme';
+ * 
+ * const monitor = createPerformanceMonitor({
+ *   fpsTarget: 60,
+ *   onUpdate: (metrics) => console.log('FPS:', metrics.fps),
+ *   onDegraded: (metrics) => console.warn('Performance degraded!', metrics),
+ * });
+ * 
+ * monitor.start();
+ * 
+ * // Later...
+ * monitor.stop();
+ * ```
+ */
+export function createPerformanceMonitor(config?: PerformanceMonitorConfig): PerformanceMonitor {
+  return new PerformanceMonitor(config);
+}
+
+/**
+ * Hook for React components to monitor performance
+ * 
+ * @param config Configuration options
+ * @returns Performance metrics and monitor controls
+ * 
+ * @example
+ * ```typescript
+ * import { usePerformanceMonitor } from '@shohojdhara/atomix/theme';
+ * 
+ * function MyComponent() {
+ *   const { metrics, start, stop } = usePerformanceMonitor({ fpsTarget: 60 });
+ *   
+ *   useEffect(() => {
+ *     start();
+ *     return () => stop();
+ *   }, []);
+ *   
+ *   return <div>FPS: {metrics.fps}</div>;
+ * }
+ * ```
+ */
+export function usePerformanceMonitor(config?: PerformanceMonitorConfig) {
+  const [monitor] = React.useState(() => createPerformanceMonitor(config));
+  const [metrics, setMetrics] = React.useState<PerformanceMetrics>(() => 
+    typeof window !== 'undefined' ? monitor.getMetrics() : {
+      fps: 0,
+      frameTime: 0,
+      peakFrameTime: 0,
+      timestamp: 0,
+      isDegraded: false,
+    } as PerformanceMetrics
+  );
+  
+  const start = React.useCallback(() => {
+    if (typeof window !== 'undefined') {
+      monitor.start();
+    }
+  }, [monitor]);
+  
+  const stop = React.useCallback(() => {
+    if (typeof window !== 'undefined') {
+      monitor.stop();
+    }
+  }, [monitor]);
+  
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    // Update metrics when monitor callbacks fire
+    const originalOnUpdate = config?.onUpdate;
+    monitor.config.onUpdate = (newMetrics: PerformanceMetrics) => {
+      setMetrics(newMetrics);
+      originalOnUpdate?.(newMetrics);
+    };
+    
+    return () => {
+      monitor.stop();
+    };
+  }, [monitor, config?.onUpdate]);
+  
+  return {
+    metrics,
+    start,
+    stop,
+  };
+}
+