@shohojdhara/atomix 0.4.7 → 0.4.9

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -3,6 +3,11 @@ import type { AtomixGlassProps } from '../../lib/types/components';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 import { AtomixGlassContainer } from './AtomixGlassContainer';
 import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
+// Phase 3: Optimization & Adaptation
+import { useResponsiveGlass } from '../../lib/composables/useResponsiveGlass';
+import { usePerformanceMonitor } from '../../lib/composables/usePerformanceMonitor';
+import { PerformanceDashboard } from './PerformanceDashboard';
+import { getDevicePreset, MOBILE_OPTIMIZED_BREAKPOINTS } from '../../lib/composables/useResponsiveGlass.presets';
 
 /**
  * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
@@ -18,6 +23,8 @@ import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
  * - Focus ring support for keyboard navigation
  * - Responsive breakpoints for mobile optimization
  * - Enhanced ARIA attributes for screen readers
+ * - Time-based animation system with FBM distortion
+ * - Device preset optimization for performance/quality balance
  *
  * Design System Compliance:
  * - Uses design tokens for opacity, spacing, and colors
@@ -74,6 +81,12 @@ import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
  * <AtomixGlass overLight="auto" debugOverLight={true}>
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
+ *
+ * @example
+ * // Performance-optimized for mobile devices
+ * <AtomixGlass devicePreset="performance" disableResponsiveBreakpoints={false}>
+ *   <div>Mobile-optimized glass effect</div>
+ * </AtomixGlass>
  */
 export function AtomixGlass({
   children,
@@ -104,15 +117,34 @@ export function AtomixGlass({
   withBorder = true,
   withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS,
   debugPerformance = false,
-  debugBorderRadius = false,
   debugOverLight = false,
   height,
   width,
+  withTimeAnimation = false,
+  animationSpeed = 1.0,
+  withMultiLayerDistortion = false,
+  distortionOctaves = 3,
+  distortionLacunarity = 2.0,
+  distortionGain = 0.5,
+  distortionQuality = 'medium',
+  devicePreset = 'balanced',
+  disableResponsiveBreakpoints = false,
   ...rest
 }: AtomixGlassProps) {
   const glassRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
+  // ── Layout hoisting ──────────────────────────────────────────────────
+  // When position is fixed/sticky the layout props must live on the ROOT
+  // `.c-atomix-glass` element so that every decorative layer (borders,
+  // backgrounds, hover effects) stays in the same stacking context.
+
+  // Extract zIndex from style so it becomes the base for ALL internal
+  // layers via --atomix-glass-base-z-index.  It must NOT be applied as a
+  // real z-index on the root element — that would break the glass effect.
+  const { zIndex: customZIndex, ...restStyle } = style;
+  const isFixedOrSticky = restStyle.position === 'fixed' || restStyle.position === 'sticky';
+
   // Use composable hook for all state and logic
   const {
     isHovered,
@@ -126,6 +158,8 @@ export function AtomixGlass({
     globalMousePosition,
     mouseOffset,
     transformStyle,
+    getShaderTime,
+    applyTimeBasedDistortion,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,
@@ -144,7 +178,6 @@ export function AtomixGlass({
     withoutEffects,
     elasticity,
     onClick,
-    debugBorderRadius,
     debugOverLight,
     debugPerformance,
     children,
@@ -153,22 +186,72 @@ export function AtomixGlass({
     withLiquidBlur,
     padding,
     style,
+    isFixedOrSticky,
+    // Phase 1: Animation System props
+    withTimeAnimation,
+    animationSpeed,
+    withMultiLayerDistortion,
+    distortionOctaves,
+    distortionLacunarity,
+    distortionGain,
+    distortionQuality,
   });
 
-  const isOverLight = useMemo(() => overLightConfig.isOverLight, [overLightConfig.isOverLight]);
+  // ============================================================================
+  // Phase 3: Optimization & Adaptation Systems
+  // ============================================================================
 
-  const shouldRenderOverLightLayers = withOverLightLayers && isOverLight;
+  // Get device preset parameters - memoized to prevent recalculation
+  const devicePresetParams = useMemo(() => {
+    return getDevicePreset(devicePreset);
+  }, [devicePreset]); // Re-calculate only when devicePreset changes
 
-  // ── Layout hoisting ──────────────────────────────────────────────────
-  // When position is fixed/sticky the layout props must live on the ROOT
-  // `.c-atomix-glass` element so that every decorative layer (borders,
-  // backgrounds, hover effects) stays in the same stacking context.
+  // Responsive breakpoint system - automatically adjusts parameters based on viewport
+  const { 
+    responsiveParams, 
+    currentBreakpoint,
+    performanceTier,
+    isActive: isResponsiveActive
+  } = useResponsiveGlass({
+    baseParams: {
+      ...devicePresetParams,
+      distortionOctaves: Math.round((displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE) / 25),
+      displacementScale: displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
+      blurAmount: blurAmount || ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
+      saturation: saturation || ATOMIX_GLASS.DEFAULTS.SATURATION,
+      aberrationIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+      animationSpeed: 1.0,
+      chromaticIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+    },
+    breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
+    enabled: !disableResponsiveBreakpoints && typeof window !== 'undefined', // Enable unless disabled
+    debug: false
+  });
 
-  // Extract zIndex from style so it becomes the base for ALL internal
-  // layers via --atomix-glass-base-z-index.  It must NOT be applied as a
-  // real z-index on the root element — that would break the glass effect.
-  const { zIndex: customZIndex, ...restStyle } = style;
-  const isFixedOrSticky = restStyle.position === 'fixed' || restStyle.position === 'sticky';
+  // Performance monitoring - tracks FPS, frame time, memory usage
+  const {
+    metrics: performanceMetrics,
+    recommendedQuality,
+    isUnderperforming,
+    setQualityLevel,
+    toggleMonitoring
+  } = usePerformanceMonitor({
+    enabled: false, // We'll toggle manually based on prop
+    debug: false,
+    showOverlay: false
+  });
+
+  // Auto-start performance monitoring if enabled (only in development)
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === 'development' && (window as any)?.enablePerformanceMonitoring) {
+      toggleMonitoring();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run once on mount
+
+  const isOverLight = useMemo(() => overLightConfig.isOverLight, [overLightConfig.isOverLight]);
+
+  const shouldRenderOverLightLayers = withOverLightLayers && isOverLight;
 
   const rootLayoutStyle = useMemo<React.CSSProperties>(() => {
     if (!isFixedOrSticky) return {};
@@ -223,21 +306,26 @@ export function AtomixGlass({
   );
 
   const adjustedSize = useMemo(() => {
-    const resolveSize = (
-      propValue: string | number | undefined,
-      styleValue: string | number | undefined,
-      measuredSize: number
-    ) => {
-      const explicitSize = propValue ?? styleValue;
-      if (explicitSize !== undefined) {
-        return typeof explicitSize === 'number' ? `${explicitSize}px` : explicitSize;
+    // Keep a reference to positionStyles to avoid unused-variable lint,
+    // but sizing is driven by explicit width/height or measured size.
+    const _position = positionStyles.position;
+
+    const resolveLength = (value: string | number | undefined, measured: number): string => {
+      if (value !== undefined) {
+        return typeof value === 'number' ? `${value}px` : value;
       }
-      return positionStyles.position === 'fixed' ? `${Math.max(measuredSize, 0)}px` : '100%';
+      if (measured > 0) {
+        return `${measured}px`;
+      }
+      return '100%';
     };
 
+    const effectiveWidth = width ?? restStyle.width;
+    const effectiveHeight = height ?? restStyle.height;
+
     return {
-      width: resolveSize(width, restStyle.width, glassSize.width),
-      height: resolveSize(height, restStyle.height, glassSize.height),
+      width: resolveLength(effectiveWidth, glassSize.width),
+      height: resolveLength(effectiveHeight, glassSize.height),
     };
   }, [
     width,
@@ -338,9 +426,10 @@ export function AtomixGlass({
       ...(customZIndex !== undefined && { '--atomix-glass-base-z-index': customZIndex }),
       '--atomix-glass-radius': `${effectiveBorderRadius}px`,
       '--atomix-glass-transform': transformStyle || 'none',
-      '--atomix-glass-position': positionStyles.position,
-      '--atomix-glass-top': positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
-      '--atomix-glass-left': positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
+      // Internal decorative layers are positioned relative to the root;
+      '--atomix-glass-position': rootLayoutStyle.position,
+      '--atomix-glass-top': `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
+      '--atomix-glass-left': `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
       '--atomix-glass-width': adjustedSize.width,
       '--atomix-glass-height': adjustedSize.height,
       '--atomix-glass-border-width': 'var(--atomix-spacing-0-5, 0.09375rem)',
@@ -376,11 +465,12 @@ export function AtomixGlass({
     opacityValues,
     effectiveBorderRadius,
     transformStyle,
-    positionStyles,
     adjustedSize,
     isOverLight,
     overLightConfig.borderOpacity,
     customZIndex,
+    rootLayoutStyle,
+    isFixedOrSticky,
   ]);
 
   // Helper function to render background layers
@@ -417,7 +507,12 @@ export function AtomixGlass({
         ref={glassRef}
         contentRef={contentRef}
         className={className}
-        style={rootLayoutStyle}
+        style={{
+          ...restStyle,
+          ...(!isFixedOrSticky && {
+            position: 'relative',
+          }),
+        }}
         borderRadius={effectiveBorderRadius}
         displacementScale={
           effectiveWithoutEffects
@@ -462,11 +557,19 @@ export function AtomixGlass({
         }}
         onClick={onClick}
         mode={mode}
-        transform={baseStyle.transform}
         effectiveWithoutEffects={effectiveWithoutEffects}
         effectiveReducedMotion={effectiveReducedMotion}
         shaderVariant={shaderVariant}
         withLiquidBlur={withLiquidBlur}
+        // Phase 1: Animation System props
+        shaderTime={getShaderTime()}
+        withTimeAnimation={withTimeAnimation}
+        animationSpeed={animationSpeed}
+        withMultiLayerDistortion={withMultiLayerDistortion}
+        distortionOctaves={distortionOctaves}
+        distortionLacunarity={distortionLacunarity}
+        distortionGain={distortionGain}
+        distortionQuality={distortionQuality}
       >
         {children}
       </AtomixGlassContainer>
@@ -480,7 +583,7 @@ export function AtomixGlass({
       )}
 
       {/* Background layers for over-light mode */}
-      {/* Static styles (pointer-events, will-change) are in SCSS */}
+      {/* Static styles (pointer-events) are in SCSS; will-change is managed via .u-glass-clean-root utility for backdrop-filter stability */}
       {renderBackgroundLayer('dark')}
       {renderBackgroundLayer('black')}
       {shouldRenderOverLightLayers && (
@@ -500,6 +603,15 @@ export function AtomixGlass({
           <span className={ATOMIX_GLASS.BORDER_2_CLASS} />
         </>
       )}
+      
+      {/* Phase 3: Performance Monitoring Dashboard - Only in development with debugPerformance enabled */}
+      {debugPerformance && performanceMetrics && (
+        <PerformanceDashboard 
+          metrics={performanceMetrics}
+          isVisible={true}
+          onClose={() => {}} // No-op, dashboard always visible when debugPerformance is true
+        />
+      )}
     </div>
   );
 }

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import type { CSSProperties } from 'react';
-import type { DisplacementMode, MousePosition, GlassSize } from '../../lib/types/components';
+import type { DisplacementMode, MousePosition, GlassSize, AtomixGlassProps } from '../../lib/types/components';
 import type { FragmentShaderType } from './shader-utils';
 import { GlassFilter } from './GlassFilter';
 import { calculateMouseInfluence, clampBlur, validateGlassSize } from './glass-utils';
@@ -59,7 +59,17 @@ const setCachedShader = (key: string, url: string): void => {
   }
 };
 
-interface AtomixGlassContainerProps {
+interface AtomixGlassContainerProps
+  extends Pick<
+    AtomixGlassProps,
+    | 'withTimeAnimation'
+    | 'animationSpeed'
+    | 'withMultiLayerDistortion'
+    | 'distortionOctaves'
+    | 'distortionLacunarity'
+    | 'distortionGain'
+    | 'distortionQuality'
+  > {
   className?: string;
   style?: React.CSSProperties;
   displacementScale?: number;
@@ -92,6 +102,9 @@ interface AtomixGlassContainerProps {
   shaderVariant?: FragmentShaderType;
   withLiquidBlur?: boolean;
 
+  // Phase 1: Animation System props
+  shaderTime?: number;
+
   contentRef?: React.RefObject<HTMLDivElement>;
   children?: React.ReactNode;
 }
@@ -111,12 +124,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       saturation = 180,
       aberrationIntensity = 2,
       mouseOffset = { x: 0, y: 0 },
-      globalMousePosition = { x: 0, y: 0 },
       onMouseEnter,
       onMouseLeave,
       onMouseDown,
       onMouseUp,
-      isHovered = false,
       isActive = false,
       overLight = false,
       overLightConfig = {},
@@ -130,6 +141,16 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       shaderVariant = 'liquidGlass',
       withLiquidBlur = false,
 
+      // Phase 1: Animation System props
+      shaderTime,
+      withTimeAnimation = false,
+      animationSpeed = 1.0,
+      withMultiLayerDistortion = false,
+      distortionOctaves = 3,
+      distortionLacunarity = 2.0,
+      distortionGain = 0.5,
+      distortionQuality = 'medium',
+
       contentRef,
     },
     ref
@@ -149,11 +170,15 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
 
     // Use shared module-level cache (no per-instance cache needed)
     const shaderDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const shaderUpdateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    
+    // Phase 1: Animation frame ref for continuous shader updates
+    const animationFrameRef = useRef<number | null>(null);
 
     // Lazy load shader utilities only when shader mode is needed
     useEffect(() => {
       if (mode === 'shader') {
-        // Dynamic import shader utilities
+        // Dynamic import shader utilities with animation support
         import('./shader-utils')
           .then(shaderUtils => {
             shaderUtilsRef.current = {
@@ -176,12 +201,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     // Generate shader map with debouncing and caching
     useEffect(() => {
       // Enhanced validation for shader mode
-      if (
-        mode === 'shader' &&
-        glassSize &&
-        validateGlassSize(glassSize) &&
-        shaderUtilsRef.current
-      ) {
+      if (mode === 'shader' && glassSize && validateGlassSize(glassSize)) {
         // Create cache key from size and variant
         const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`;
 
@@ -215,10 +235,11 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               fragment: selectedShader,
             });
 
-            // Defer shader generation with longer delay to avoid blocking
-            setTimeout(() => {
+            shaderUpdateTimeoutRef.current = setTimeout(() => {
               const url = shaderGeneratorRef.current?.updateShader() || '';
-              setCachedShader(cacheKey, url);
+              if (url) {
+                setCachedShader(cacheKey, url);
+              }
               setShaderMapUrl(url);
             }, 100);
           } catch (error) {
@@ -240,6 +261,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           clearTimeout(shaderDebounceTimeoutRef.current);
           shaderDebounceTimeoutRef.current = null;
         }
+        if (shaderUpdateTimeoutRef.current) {
+          clearTimeout(shaderUpdateTimeoutRef.current);
+          shaderUpdateTimeoutRef.current = null;
+        }
         try {
           shaderGeneratorRef.current?.destroy();
         } catch (error) {
@@ -250,6 +275,92 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       };
     }, [mode, glassSize, shaderVariant]);
 
+    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
+    useEffect(() => {
+      // Only run animations in shader mode with time animation enabled
+      if (
+        mode !== 'shader' ||
+        !withTimeAnimation ||
+        effectiveReducedMotion ||
+        effectiveWithoutEffects
+      ) {
+        // Cancel any existing animation frame
+        if (animationFrameRef.current !== null) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = null;
+        }
+        return;
+      }
+
+      const baseFps =
+        distortionQuality === 'ultra'
+          ? 60
+          : distortionQuality === 'high'
+            ? 30
+            : distortionQuality === 'medium'
+              ? 24
+              : 20;
+      const effectiveSpeed = Math.max(0.5, Math.min(2, animationSpeed || 1));
+      const complexity =
+        withMultiLayerDistortion
+          ? Math.max(
+              1,
+              (distortionOctaves || 3) / 3 +
+                Math.max(0, (distortionLacunarity || 2) - 2) * 0.25 +
+                Math.max(0, (distortionGain || 0.5) - 0.5)
+            )
+          : 1;
+      const targetFps = Math.max(12, Math.min(60, Math.round((baseFps * effectiveSpeed) / complexity)));
+      const frameInterval = 1000 / targetFps;
+      let lastUpdate = 0;
+      let isCancelled = false;
+
+      const animate = (currentTime: number) => {
+        if (isCancelled) {
+          return;
+        }
+
+        if (currentTime - lastUpdate >= frameInterval && shaderGeneratorRef.current) {
+          lastUpdate = currentTime;
+          try {
+            const animatedShaderUrl = shaderGeneratorRef.current.updateShader();
+            if (animatedShaderUrl) {
+              setShaderMapUrl(animatedShaderUrl);
+            }
+          } catch (error) {
+            console.warn('AtomixGlassContainer: Error in animation loop', error);
+          }
+        }
+
+        animationFrameRef.current = requestAnimationFrame(animate);
+      };
+
+      // Start animation loop
+      animationFrameRef.current = requestAnimationFrame(animate);
+
+      // Cleanup animation on unmount or dependency change
+      return () => {
+        isCancelled = true;
+        if (animationFrameRef.current !== null) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = null;
+        }
+      };
+    }, [
+      mode,
+      withTimeAnimation,
+      animationSpeed,
+      displacementScale,
+      withMultiLayerDistortion,
+      distortionOctaves,
+      distortionLacunarity,
+      distortionGain,
+      distortionQuality,
+      effectiveReducedMotion,
+      effectiveWithoutEffects,
+      glassSize,
+    ]);
+
     // Removed forced reflow to avoid layout thrash and potential feedback sizing loops
 
     const [rectCache, setRectCache] = useState<DOMRect | null>(null);
@@ -401,6 +512,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       effectiveReducedMotion,
       effectiveWithoutEffects,
       withLiquidBlur,
+      overLightConfig,
     ]);
 
     const containerVars = useMemo(() => {
@@ -415,9 +527,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             ? mouseOffset.y
             : 0;
         return {
-          '--atomix-glass-container-width': `${glassSize?.width}`,
-          '--atomix-glass-container-height': `${glassSize?.height}`,
-          '--atomix-glass-container-padding': padding || '0 0',
           '--atomix-glass-container-radius': `${typeof borderRadius === 'number' && !isNaN(borderRadius) ? borderRadius : 0}px`,
           '--atomix-glass-container-backdrop': backdropStyle?.backdropFilter || 'none',
           '--atomix-glass-container-shadow': overLight
@@ -434,7 +543,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             ? `linear-gradient(${180 + mx * 0.5}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)`
             : 'none',
           '--atomix-glass-container-text-shadow': overLight
-            ? '0px 2px 12px rgba(0, 0, 0, 0)'
+            ? '0px 1px 2px rgba(255, 255, 255, 0.15)'
             : '0px 2px 12px rgba(0, 0, 0, 0.4)',
           '--atomix-glass-container-box-shadow': overLight
             ? '0px 16px 70px rgba(0, 0, 0, 0.75)'
@@ -453,24 +562,14 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         } as React.CSSProperties;
       }
     }, [
-      glassSize,
-      padding,
-      borderRadius,
+    borderRadius,
       backdropStyle,
       mouseOffset,
       overLight,
       effectiveWithoutEffects,
+      overLightConfig,
     ]);
 
-    // Helper to force no transition/animation overrides with !important
-    const setForceNoTransition = (el: HTMLElement | null) => {
-      if (el) {
-        el.style.setProperty('transition-duration', '0s', 'important');
-        el.style.setProperty('animation-duration', '0s', 'important');
-        el.style.setProperty('transition-delay', '0s', 'important');
-      }
-    };
-
     return (
       <div
         ref={el => {
@@ -513,7 +612,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             />
             {/* Enhanced Apple Liquid Glass Inner Shadow Layer */}
             <div
-              ref={setForceNoTransition}
               className={ATOMIX_GLASS.FILTER_OVERLAY_CLASS}
               style={{
                 filter: `url(#${filterId})`,