@shohojdhara/atomix 0.4.8 → 0.4.9

package/dist/heavy.js

@@ -73,7 +73,16 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         PADDING: "0",
         MODE: "standard",
         OVER_LIGHT: !1,
-        ENABLE_OVER_LIGHT_LAYERS: !0
+        ENABLE_OVER_LIGHT_LAYERS: !0,
+        // Phase 1: Time-Based Animation System defaults
+        WITH_TIME_ANIMATION: !0,
+        ANIMATION_SPEED: 1,
+        // Phase 1: Multi-Layer Distortion System defaults
+        WITH_MULTI_LAYER_DISTORTION: !1,
+        DISTORTION_OCTAVES: 5,
+        DISTORTION_LACUNARITY: 2,
+        DISTORTION_GAIN: .5,
+        DISTORTION_QUALITY: "high"
     },
     CONSTANTS: {
         ACTIVATION_ZONE: 200,
@@ -236,6 +245,44 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         // Saturation constants
         SATURATION: {
             HIGH_CONTRAST: 200
+        },
+        // Phase 1: Animation System Constants
+        ANIMATION: {
+            // Breathing effect timing (in milliseconds)
+            BREATHING_CYCLE: 2e3,
+            // 2-second breathing cycle
+            // Flow animation speed
+            FLOW_SPEED_X: .1,
+            // Horizontal flow speed
+            FLOW_SPEED_Y: .15,
+            // Vertical flow speed
+            // Wave propagation
+            WAVE_SPEED: .05,
+            // Radial wave speed
+            WAVE_AMPLITUDE: .02
+        },
+        // Phase 1: Multi-Layer Distortion Quality Presets
+        DISTORTION_QUALITY_PRESETS: {
+            low: {
+                octaves: 2,
+                lacunarity: 2,
+                gain: .5
+            },
+            medium: {
+                octaves: 4,
+                lacunarity: 2,
+                gain: .5
+            },
+            high: {
+                octaves: 5,
+                lacunarity: 2,
+                gain: .5
+            },
+            ultra: {
+                octaves: 7,
+                lacunarity: 2,
+                gain: .5
+            }
         }
     }
 }, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
@@ -314,7 +361,7 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         // Silently handle errors
     }
     return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
-}, lerp = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
+}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -482,14 +529,16 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, 
+// Phase 1: Animation System props
+shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
     // Use a module-level counter that's consistent across server and client
-    const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
+    const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
-        // Dynamic import shader utilities
+        // Dynamic import shader utilities with animation support
         Promise.resolve().then((() => shaderUtils)).then((shaderUtils => {
             shaderUtilsRef.current = {
                 ShaderDisplacementGenerator: shaderUtils.ShaderDisplacementGenerator,
@@ -504,7 +553,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
     // Generate shader map with debouncing and caching
     useEffect((() => {
         // Enhanced validation for shader mode
-        if ("shader" === mode && glassSize && validateGlassSize(glassSize) && shaderUtilsRef.current) {
+        if ("shader" === mode && glassSize && validateGlassSize(glassSize)) {
             // Create cache key from size and variant
             const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`, cachedUrl = (key => {
                 const entry = sharedShaderCache.get(key);
@@ -526,11 +575,9 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                         width: glassSize.width,
                         height: glassSize.height,
                         fragment: selectedShader
-                    }), 
-                    // Defer shader generation with longer delay to avoid blocking
-                    setTimeout((() => {
+                    }), shaderUpdateTimeoutRef.current = setTimeout((() => {
                         const url = shaderGeneratorRef.current?.updateShader() || "";
-                        ((key, url) => {
+                        url && ((key, url) => {
                             // Evict oldest entries if at capacity
                             if (sharedShaderCache.size >= 15) {
                                 const entries = Array.from(sharedShaderCache.entries());
@@ -562,7 +609,8 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
         // Cleanup function with error handling
                 return () => {
             shaderDebounceTimeoutRef.current && (clearTimeout(shaderDebounceTimeoutRef.current), 
-            shaderDebounceTimeoutRef.current = null);
+            shaderDebounceTimeoutRef.current = null), shaderUpdateTimeoutRef.current && (clearTimeout(shaderUpdateTimeoutRef.current), 
+            shaderUpdateTimeoutRef.current = null);
             try {
                 shaderGeneratorRef.current?.destroy();
             } catch (error) {
@@ -571,7 +619,37 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 shaderGeneratorRef.current = null;
             }
         };
-    }), [ mode, glassSize, shaderVariant ]);
+    }), [ mode, glassSize, shaderVariant ]), 
+    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
+    useEffect((() => {
+        // Only run animations in shader mode with time animation enabled
+        if ("shader" !== mode || !withTimeAnimation || effectiveReducedMotion || effectiveWithoutEffects) 
+        // Cancel any existing animation frame
+        return void (null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+        animationFrameRef.current = null));
+        const baseFps = "ultra" === distortionQuality ? 60 : "high" === distortionQuality ? 30 : "medium" === distortionQuality ? 24 : 20, effectiveSpeed = Math.max(.5, Math.min(2, animationSpeed || 1)), complexity = withMultiLayerDistortion ? Math.max(1, (distortionOctaves || 3) / 3 + .25 * Math.max(0, (distortionLacunarity || 2) - 2) + Math.max(0, (distortionGain || .5) - .5)) : 1, frameInterval = 1e3 / Math.max(12, Math.min(60, Math.round(baseFps * effectiveSpeed / complexity)));
+        let lastUpdate = 0, isCancelled = !1;
+        const animate = currentTime => {
+            if (!isCancelled) {
+                if (currentTime - lastUpdate >= frameInterval && shaderGeneratorRef.current) {
+                    lastUpdate = currentTime;
+                    try {
+                        const animatedShaderUrl = shaderGeneratorRef.current.updateShader();
+                        animatedShaderUrl && setShaderMapUrl(animatedShaderUrl);
+                    } catch (error) {
+                        console.warn("AtomixGlassContainer: Error in animation loop", error);
+                    }
+                }
+                animationFrameRef.current = requestAnimationFrame(animate);
+            }
+        };
+        // Start animation loop
+                // Cleanup animation on unmount or dependency change
+        return animationFrameRef.current = requestAnimationFrame(animate), () => {
+            isCancelled = !0, null !== animationFrameRef.current && (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(null);
     useEffect((() => {
@@ -905,12 +983,144 @@ class {
         style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"), 
         style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)");
     }
-}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+};
 
 /**
  * Updates the styles of the AtomixGlass wrapper and container elements imperatively
  * to avoid React re-renders on mouse movement.
- */ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
+ */
+/**
+ * Animation System for AtomixGlass Component
+ *
+ * Implements Phase 1 features from the AtomixGlass Feature Implementation Roadmap:
+ * - Feature 1.1: Time-Based Animation System
+ * - Feature 1.2: Multi-Layer Distortion System (FBM)
+ *
+ * @packageDocumentation
+ */
+// ============================================================================
+// Noise Functions for FBM (Feature 1.2)
+// ============================================================================
+/**
+ * Perlin noise implementation for smooth gradient noise
+ *
+ * @param x - X coordinate
+ * @param y - Y coordinate
+ * @returns Noise value in range [0, 1]
+ */
+function perlinNoise(x, y) {
+    // Simplified Perlin noise using pseudo-random gradients
+    const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = fade(xf), v = fade(yf), A = p[X] + Y & 255, B = p[X + 1] + Y & 255, ga = grad(p[A], xf, yf), gb = grad(p[B], xf - 1, yf), gc = grad(p[A + 1 & 255], xf, yf - 1), gd = grad(p[B + 1 & 255], xf - 1, yf - 1), lerpX1 = lerp(ga, gb, u), lerpX2 = lerp(gc, gd, u);
+    // Scale to [0, 1] range
+    return (lerp(lerpX1, lerpX2, v) + 1) / 2;
+}
+
+// ============================================================================
+// Fractal Brownian Motion (FBM) Engine (Feature 1.2)
+// ============================================================================
+/**
+ * Creates an FBM engine with configurable parameters
+ *
+ * @param config - FBM configuration (octaves, lacunarity, gain)
+ * @returns Object with fbm function
+ *
+ * @example
+ * ```typescript
+ * const fbmEngine = createFBMEngine({ octaves: 5, lacunarity: 2, gain: 0.5 });
+ *
+ * // Generate noise at position (0.5, 0.5) with time animation
+ * const noiseValue = fbmEngine.fbm(0.5, 0.5, Date.now());
+ * ```
+ */ function createFBMEngine(config) {
+    /**
+   * Fractal Brownian Motion function
+   * Combines multiple octaves of noise for complex, natural patterns
+   *
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param time - Optional time value for animation
+   * @returns FBM noise value in range [0, 1]
+   */
+    const fbm = (x, y, time = 0) => {
+        let value = 0, amplitude = .5, frequency = 1, phase = .001 * time;
+        // Convert to seconds for reasonable animation speed
+        for (let i = 0; i < config.octaves; i++) 
+        // Apply time-based phase shift to all octaves
+        value += perlinNoise(x * frequency + phase, y * frequency + phase) * amplitude, 
+        frequency *= config.lacunarity, // Increase frequency
+        amplitude *= config.gain;
+        return value;
+    };
+    /**
+   * Get FBM with simple time factor
+   */    return {
+        fbm: fbm,
+        fbmWithTime: (x, y, time) => fbm(x, y, time)
+    };
+}
+
+/**
+ * Gets optimal FBM config based on quality preset
+ *
+ * @param quality - Quality preset level
+ * @returns FBM configuration for the quality level
+ */ const fbmEngineCache = new Map;
+
+// ============================================================================
+// Shader Utility Functions for Time-Based Effects
+// ============================================================================
+/**
+ * Liquid glass distortion with time-based animation
+ * Uses FBM to create organic, flowing liquid effects
+ *
+ * @param uv - UV coordinates (normalized 0-1)
+ * @param time - Elapsed time in milliseconds
+ * @param config - FBM configuration
+ * @returns Distorted UV coordinates
+ */ function liquidGlassWithTime(uv, time, config) {
+    const configKey = `${config.octaves}-${config.lacunarity}-${config.gain}`;
+    let fbmEngine = fbmEngineCache.get(configKey);
+    fbmEngine || (fbmEngine = createFBMEngine(config), fbmEngineCache.set(configKey, fbmEngine));
+    // Animate noise with time
+        const animatedNoise = fbmEngine.fbmWithTime(2 * uv.x + 1e-4 * time, 2 * uv.y + 15e-5 * time, time);
+    return {
+        x: uv.x + .04 * (animatedNoise - .5),
+        y: uv.y + .04 * (animatedNoise - .5)
+    };
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Fade curve for smooth interpolation (Perlin's fade function)
+ */ function fade(t) {
+    return t * t * t * (t * (6 * t - 15) + 10);
+}
+
+/**
+ * Linear interpolation
+ */ function lerp(a, b, t) {
+    return a + t * (b - a);
+}
+
+/**
+ * Gradient calculation for Perlin noise
+ */ function grad(hash, x, y) {
+    const h = 15 & hash, u = h < 8 ? x : y, v = h < 4 ? y : 12 === h || 14 === h ? x : 0;
+    return (1 & h ? -u : u) + (2 & h ? -v : v);
+}
+
+/**
+ * Permutation table for Perlin noise
+ */ const p = (() => {
+    const permutation = [];
+    for (let i = 0; i < 256; i++) permutation[i] = Math.floor(256 * Math.random());
+    // Duplicate for overflow handling
+        return [ ...permutation, ...permutation ];
+})(), {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+
+const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
         result: result,
         timestamp: Date.now(),
@@ -923,7 +1133,9 @@ class {
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1}) {
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: 
+// Phase 1: Animation System Props
+withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
     // State
     const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
@@ -937,7 +1149,47 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), targetGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
-    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = useMemo((() => {
+        // If quality preset is provided, use it as base
+        const preset = (quality = distortionQuality, ATOMIX_GLASS.CONSTANTS.DISTORTION_QUALITY_PRESETS[quality]);
+        // Override with custom values if provided
+                var quality;
+        return {
+            octaves: distortionOctaves ?? preset.octaves,
+            lacunarity: distortionLacunarity ?? preset.lacunarity,
+            gain: distortionGain ?? preset.gain
+        };
+    }), [ distortionQuality, distortionOctaves, distortionLacunarity, distortionGain ]), fbmEngine = useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
+    /**
+   * Animation loop for time-based effects
+   */
+    useEffect((() => {
+        if (!effectiveWithTimeAnimation || "undefined" == typeof window) return;
+        let lastFrameTime = performance.now();
+        /**
+     * Animation frame handler
+     */        const animate = currentTime => {
+            // Calculate delta time
+            const deltaTime = currentTime - lastFrameTime;
+            lastFrameTime = currentTime;
+            // Apply animation speed multiplier
+            const scaledDelta = deltaTime * animationSpeed;
+            elapsedTimeRef.current += scaledDelta, shaderTimeRef.current = elapsedTimeRef.current, 
+            // Continue animation loop
+            animationFrameIdRef.current = requestAnimationFrame(animate);
+        };
+        // Start animation
+                // Cleanup
+        return animationStartTimeRef.current = performance.now(), animationFrameIdRef.current = requestAnimationFrame(animate), 
+        () => {
+            null !== animationFrameIdRef.current && (cancelAnimationFrame(animationFrameIdRef.current), 
+            animationFrameIdRef.current = null);
+        };
+    }), [ effectiveWithTimeAnimation, animationSpeed ]);
+    /**
+   * Get current shader time for animations
+   */
+    const getShaderTime = useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = useState({
             width: 270,
             height: 69
@@ -996,7 +1248,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         glassRef: glassRef,
         effectiveBorderRadius: effectiveBorderRadius,
         cachedRectRef: cachedRectRef
-    }), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
+    }), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
+    /**
+   * Apply time-based distortion to UV coordinates
+   */    
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
@@ -1199,6 +1454,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         lerpActiveRef.current = !0;
         const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
             if (!lerpActiveRef.current) return;
+            // Add ref validity check to prevent memory leaks
+                        if (!glassRef.current || !wrapperRef?.current) return void (lerpActiveRef.current = !1);
             const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, dx = tgt.x - cur.x, dy = tgt.y - cur.y;
             // If we're close enough, snap and park
             if (Math.abs(dx) < .05 && Math.abs(dy) < .05) internalMouseOffsetRef.current = {
@@ -1207,17 +1464,17 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 ...targetGlobalMousePositionRef.current
             }; else {
                 internalMouseOffsetRef.current = {
-                    x: lerp(cur.x, tgt.x, LERP_T),
-                    y: lerp(cur.y, tgt.y, LERP_T)
+                    x: lerp$1(cur.x, tgt.x, LERP_T),
+                    y: lerp$1(cur.y, tgt.y, LERP_T)
                 };
                 const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
                 internalGlobalMousePositionRef.current = {
-                    x: lerp(curG.x, tgtG.x, LERP_T),
-                    y: lerp(curG.y, tgtG.y, LERP_T)
+                    x: lerp$1(curG.x, tgtG.x, LERP_T),
+                    y: lerp$1(curG.y, tgtG.y, LERP_T)
                 };
             }
             // Imperative style update with the smoothed values
-                        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+                        updateAtomixGlassStyles(wrapperRef.current, glassRef.current, {
                 mouseOffset: internalMouseOffsetRef.current,
                 globalMousePosition: internalGlobalMousePositionRef.current,
                 glassSize: glassSize,
@@ -1308,6 +1565,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
         transformStyle: transformStyle,
+        getShaderTime: getShaderTime,
+        applyTimeBasedDistortion: applyTimeBasedDistortion,
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -1317,143 +1576,1255 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
 }
 
 /**
- * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
- *
- * Features:
- * - Hardware-accelerated glass effects with SVG filters
- * - Mouse-responsive liquid distortion
- * - Dynamic border-radius extraction from children CSS properties
- * - Automatic light/dark theme detection via overLight prop
- * - Accessibility and performance optimizations
- * - Multiple displacement modes (standard, polar, prominent, shader)
- * - Design token integration for consistent theming
- * - Focus ring support for keyboard navigation
- * - Responsive breakpoints for mobile optimization
- * - Enhanced ARIA attributes for screen readers
- *
- * Design System Compliance:
- * - Uses design tokens for opacity, spacing, and colors
- * - Follows BEM methodology for class naming
- * - Implements focus-ring mixin for accessibility
- * - Supports reduced motion and high contrast preferences
- *
- * @example
- * // Basic usage with dynamic border-radius extraction
- * <AtomixGlass>
- *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
- * </AtomixGlass>
- *
- * @example
- * // Manual border-radius override
- * <AtomixGlass borderRadius={20}>
- *   <div>Content with 20px glass radius</div>
- * </AtomixGlass>
- *
- * @example
- * // Interactive glass with click handler
- * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
- *   <div>Clickable content</div>
- * </AtomixGlass>
- *
- * @example
- * // OverLight - Boolean mode (explicit control)
- * <AtomixGlass overLight={true}>
- *   <div>Content on light background</div>
- * </AtomixGlass>
+ * Default responsive breakpoints configuration
  *
- * @example
- * // OverLight - Auto-detection mode
- * <AtomixGlass overLight="auto">
- *   <div>Content with auto-detected background</div>
- * </AtomixGlass>
+ * These breakpoints are optimized for glass effect performance across device classes:
+ * - Mobile: Reduced complexity for 60 FPS target
+ * - Tablet: Balanced quality and performance
+ * - Desktop: Full fidelity effects
+ */ const DEFAULT_BREAKPOINTS = {
+    mobile: {
+        maxWidth: 640,
+        params: {
+            distortionOctaves: 3,
+            displacementScale: .7,
+            blurAmount: .8,
+            animationSpeed: .8,
+            chromaticIntensity: .5
+        }
+    },
+    tablet: {
+        minWidth: 641,
+        maxWidth: 1024,
+        params: {
+            distortionOctaves: 4,
+            displacementScale: .85,
+            blurAmount: .9,
+            animationSpeed: .9,
+            chromaticIntensity: .75
+        }
+    },
+    desktop: {
+        minWidth: 1025,
+        params: {
+            distortionOctaves: 5,
+            displacementScale: 1,
+            blurAmount: 1,
+            animationSpeed: 1,
+            chromaticIntensity: 1
+        }
+    }
+};
+
+/**
+ * Device performance tier detection
  *
- * @example
- * // OverLight - Object config with custom settings
- * <AtomixGlass
- *   overLight={{
- *     threshold: 0.8,
- *     opacity: 0.6,
- *     contrast: 1.8,
- *     brightness: 1.0,
- *     saturationBoost: 1.5
- *   }}
- * >
- *   <div>Content with custom overLight config</div>
- * </AtomixGlass>
+ * Uses Device Memory API and Hardware Concurrency API to classify devices
+ * into performance tiers for automatic quality adjustment.
  *
- * @example
- * // Debug mode for overLight detection
- * <AtomixGlass overLight="auto" debugOverLight={true}>
- *   <div>Content with debug logging enabled</div>
- * </AtomixGlass>
- */ function AtomixGlass({children: children, 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, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, height: height, width: width, ...rest}) {
-    const glassRef = useRef(null), contentRef = useRef(null), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
-        glassRef: glassRef,
-        contentRef: contentRef,
-        borderRadius: borderRadius,
-        globalMousePosition: externalGlobalMousePosition,
-        mouseOffset: externalMouseOffset,
-        mouseContainer: mouseContainer,
-        overLight: overLight,
-        reducedMotion: reducedMotion,
-        highContrast: highContrast,
-        withoutEffects: withoutEffects,
-        elasticity: elasticity,
-        onClick: onClick,
-        debugBorderRadius: debugBorderRadius,
-        debugOverLight: debugOverLight,
-        debugPerformance: debugPerformance,
-        children: children,
-        blurAmount: blurAmount,
-        saturation: saturation,
-        withLiquidBlur: withLiquidBlur,
-        padding: padding,
-        style: style,
-        isFixedOrSticky: isFixedOrSticky
-    }), isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = useMemo((() => {
-        if (!isFixedOrSticky) return {};
-        const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
-        return {
-            ...p && {
-                position: p
-            },
-            ...void 0 !== t && {
-                top: t
-            },
-            ...void 0 !== l && {
-                left: l
-            },
-            ...void 0 !== r && {
-                right: r
-            },
-            ...void 0 !== b && {
-                bottom: b
-            }
-        };
-    }), [ isFixedOrSticky, restStyle ]);
-    // Calculate base style with transforms
-    // When layout is hoisted to the root, strip those props from the container
-    useMemo((() => {
-        if (isFixedOrSticky) {
-            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
-            return {
-                ...visualStyle,
-                ...!effectiveWithoutEffects && {
-                    transform: transformStyle
-                }
-            };
+ * @returns Performance tier classification
+ */ var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+
+function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+
+var fails$8 = function(exec) {
+    try {
+        return !!exec();
+    } catch (error) {
+        return !0;
+    }
+}, functionBindNative = !fails$8((function() {
+    // eslint-disable-next-line es/no-function-prototype-bind -- safe
+    var test = function() {/* empty */}.bind();
+    // eslint-disable-next-line no-prototype-builtins -- safe
+        return "function" != typeof test || test.hasOwnProperty("prototype");
+})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
+    return function() {
+        return call$5.apply(fn, arguments);
+    };
+}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
+    return it && it.Math === Math && it;
+}, globalThis_1 = 
+// eslint-disable-next-line es/no-global-this -- safe
+check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
+// eslint-disable-next-line no-restricted-globals -- safe
+check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
+// eslint-disable-next-line no-new-func -- fallback
+function() {
+    return this;
+}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
+    return call$4.apply(apply$1, arguments);
+}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
+    return stringSlice(toString$3(it), 8, -1);
+}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
+    // Nashorn bug:
+    //   https://github.com/zloirock/core-js/issues/1128
+    //   https://github.com/zloirock/core-js/issues/1130
+    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
+}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
+    return "function" == typeof argument || argument === documentAll;
+} : function(argument) {
+    return "function" == typeof argument;
+}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty({}, 1, {
+        get: function() {
+            return 7;
         }
-        return {
-            ...restStyle,
-            ...!effectiveWithoutEffects && {
-                transform: transformStyle
-            }
-        };
-    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]);
-    // Build className with state modifiers
-    const componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
-        position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
-        top: isFixedOrSticky ? 0 : restStyle.top || 0,
+    })[1];
+})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
+    return call$3.apply(call$3, arguments);
+}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
+    1: 2
+}, 1);
+
+// `Object.prototype.propertyIsEnumerable` method implementation
+// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
+objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
+    var descriptor = getOwnPropertyDescriptor$1(this, V);
+    return !!descriptor && descriptor.enumerable;
+} : $propertyIsEnumerable;
+
+var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
+    return {
+        enumerable: !(1 & bitmap),
+        configurable: !(2 & bitmap),
+        writable: !(4 & bitmap),
+        value: value
+    };
+}, fails$5 = fails$8, classof$3 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$5((function() {
+    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
+    // eslint-disable-next-line no-prototype-builtins -- safe
+    return !$Object$3("z").propertyIsEnumerable(0);
+})) ? function(it) {
+    return "String" === classof$3(it) ? split(it, "") : $Object$3(it);
+} : $Object$3, isNullOrUndefined$2 = function(it) {
+    return null == it;
+}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$6 = TypeError, requireObjectCoercible$3 = function(it) {
+    if (isNullOrUndefined$1(it)) throw new $TypeError$6("Can't call method on " + it);
+    return it;
+}, IndexedObject = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
+    return IndexedObject(requireObjectCoercible$2(it));
+}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
+    return "object" == typeof it ? null !== it : isCallable$7(it);
+}, path$3 = {}, path$2 = path$3, globalThis$a = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
+    return isCallable$6(variable) ? variable : void 0;
+}, navigator$1 = globalThis_1.navigator, userAgent$1 = navigator$1 && navigator$1.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
+
+v8 && (
+// in old Chrome, versions of V8 isn't V8 = Chrome / 10
+// but their correct versions are not interesting for us
+version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
+// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
+// so check `userAgent` even if `.v8` exists, but 0
+!version && userAgent && (!(match = userAgent.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent.match(/Chrome\/(\d+)/)) && (version = +match[1]);
+
+var V8_VERSION = version, fails$4 = fails$8, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$4((function() {
+    var symbol = Symbol("symbol detection");
+    // Chrome 38 Symbol has incorrect toString conversion
+    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
+    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
+    // of course, fail.
+        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
+    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
+    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
+})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$1 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
+    return "symbol" == typeof it;
+} : function(it) {
+    var $Symbol = function(namespace, method) {
+        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$a[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$a[namespace] && globalThis$a[namespace][method];
+    }("Symbol");
+    return isCallable$5($Symbol) && isPrototypeOf$1($Symbol.prototype, $Object$2(it));
+}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$5 = TypeError, aCallable$2 = function(argument) {
+    if (isCallable$4(argument)) return argument;
+    throw new $TypeError$5(function(argument) {
+        try {
+            return $String$2(argument);
+        } catch (error) {
+            return "Object";
+        }
+    }(argument) + " is not a function");
+}, aCallable$1 = aCallable$2, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$4 = TypeError, sharedStore = {
+    exports: {}
+}, globalThis$6 = globalThis_1, defineProperty = Object.defineProperty, globalThis$5 = globalThis_1, store$1 = sharedStore.exports = globalThis$5["__core-js_shared__"] || function(key, value) {
+    try {
+        defineProperty(globalThis$6, key, {
+            value: value,
+            configurable: !0,
+            writable: !0
+        });
+    } catch (error) {
+        globalThis$6[key] = value;
+    }
+    return value;
+}("__core-js_shared__", {});
+
+/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
+    version: "3.43.0",
+    mode: "pure",
+    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
+    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
+    source: "https://github.com/zloirock/core-js"
+});
+
+var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
+    return hasOwnProperty($Object$1(requireObjectCoercible$1(it)), key);
+}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
+    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
+}, wellKnownSymbol$5 = function(name) {
+    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
+    WellKnownSymbolsStore[name];
+}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$3 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
+    if (!isObject$3(input) || isSymbol$1(input)) return input;
+    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$1(func));
+    if (exoticToPrim) {
+        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
+        !isObject$3(result) || isSymbol$1(result)) return result;
+        throw new $TypeError$3("Can't convert object to primitive value");
+    }
+    return void 0 === pref && (pref = "number"), function(input, pref) {
+        var fn, val;
+        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
+        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        throw new $TypeError$4("Can't convert object to primitive value");
+    }(input, pref);
+}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
+    var key = toPrimitive(argument, "string");
+    return isSymbol(key) ? key : key + "";
+}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
+        get: function() {
+            return 7;
+        }
+    }).a;
+    var it;
+})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
+
+// `Object.getOwnPropertyDescriptor` method
+// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
+objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
+    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
+        return $getOwnPropertyDescriptor$1(O, P);
+    } catch (error) {/* empty */}
+    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
+};
+
+var fails$2 = fails$8, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
+    var value = data[normalize(feature)];
+    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$2(detection) : !!detection);
+}, normalize = isForced$1.normalize = function(string) {
+    return String(string).replace(replacement, ".").toLowerCase();
+}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable = aCallable$2, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
+        value: 42,
+        writable: !1
+    }).prototype;
+})), isObject$1 = isObject$5, $String$1 = String, $TypeError$2 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
+    if (isObject$1(argument)) return argument;
+    throw new $TypeError$2($String$1(argument) + " is not an object");
+}, toPropertyKey = toPropertyKey$2, $TypeError$1 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+
+// `Object.defineProperty` method
+// https://tc39.es/ecma262/#sec-object.defineproperty
+objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
+        var current = $getOwnPropertyDescriptor(O, P);
+        current && current.writable && (O[P] = Attributes.value, Attributes = {
+            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
+            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
+            writable: !1
+        });
+    }
+    return $defineProperty(O, P, Attributes);
+} : $defineProperty : function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
+        return $defineProperty(O, P, Attributes);
+    } catch (error) {/* empty */}
+    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$1("Accessors not supported");
+    return "value" in Attributes && (O[P] = Attributes.value), O;
+};
+
+var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
+    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
+} : function(object, key, value) {
+    return object[key] = value, object;
+}, globalThis$2 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
+    return aCallable(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
+        return fn.apply(that, arguments);
+    };
+}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
+    var Wrapper = function(a, b, c) {
+        if (this instanceof Wrapper) {
+            switch (arguments.length) {
+              case 0:
+                return new NativeConstructor;
+
+              case 1:
+                return new NativeConstructor(a);
+
+              case 2:
+                return new NativeConstructor(a, b);
+            }
+            return new NativeConstructor(a, b, c);
+        }
+        return apply(NativeConstructor, this, arguments);
+    };
+    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
+}, _export = function(options, source) {
+    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$2 : STATIC ? globalThis$2[TARGET] : globalThis$2[TARGET] && globalThis$2[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
+    for (key in source) 
+    // contains in native
+    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
+    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
+    // export native or implementation
+    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
+    // bind methods to global for calling from export context
+    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$2) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
+    // add a flag to not completely full polyfills
+    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
+    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
+    // export virtual prototype methods
+    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
+    // export real prototype methods
+    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
+}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
+    var n = +x;
+    return (n > 0 ? floor : ceil)(n);
+}, toIntegerOrInfinity$2 = function(argument) {
+    var number = +argument;
+    // eslint-disable-next-line no-self-compare -- NaN check
+        return number != number || 0 === number ? 0 : trunc(number);
+}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, toIndexedObject = toIndexedObject$2, lengthOfArrayLike = function(obj) {
+    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
+    var argument, len;
+}, createMethod = function(IS_INCLUDES) {
+    return function($this, el, fromIndex) {
+        var O = toIndexedObject($this), length = lengthOfArrayLike(O);
+        if (0 === length) return !IS_INCLUDES && -1;
+        var value, index = function(index, length) {
+            var integer = toIntegerOrInfinity$1(index);
+            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
+        }(fromIndex, length);
+        // Array#includes uses SameValueZero equality algorithm
+        // eslint-disable-next-line no-self-compare -- NaN check
+        if (IS_INCLUDES && el != el) {
+            for (;length > index; ) 
+            // eslint-disable-next-line no-self-compare -- NaN check
+            if ((value = O[index++]) != value) return !0;
+            // Array#indexOf ignores holes, Array#includes - not
+                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
+        return !IS_INCLUDES && -1;
+    };
+}, $includes = [ createMethod(!0), createMethod(!1) ][0];
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+_export({
+    target: "Array",
+    proto: !0,
+    forced: fails$8((function() {
+        // eslint-disable-next-line es/no-array-prototype-includes -- detection
+        return !Array(1).includes();
+    }))
+}, {
+    includes: function(el /* , fromIndex = 0 */) {
+        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var globalThis$1 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$2 = function(CONSTRUCTOR, METHOD) {
+    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
+    if (pureMethod) return pureMethod;
+    var NativeConstructor = globalThis$1[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
+    return NativePrototype && NativePrototype[METHOD];
+}, includes$4 = getBuiltInPrototypeMethod$2("Array", "includes"), isObject = isObject$5, classof$2 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError = TypeError, test = {};
+
+test[wellKnownSymbol$5("toStringTag")] = "z";
+
+var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
+    return arguments;
+}()), classof = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
+    var O, tag, result;
+    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
+        try {
+            return it[key];
+        } catch (error) {/* empty */}
+    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
+}, $String = String, MATCH = wellKnownSymbol$5("match"), $ = _export, notARegExp = function(it) {
+    if (function(it) {
+        var isRegExp;
+        return isObject(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$2(it));
+    }(it)) throw new $TypeError("The method doesn't accept regular expressions");
+    return it;
+}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
+    if ("Symbol" === classof(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
+    return $String(argument);
+}, stringIndexOf = functionUncurryThis("".indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$({
+    target: "String",
+    proto: !0,
+    forced: !function(METHOD_NAME) {
+        var regexp = /./;
+        try {
+            "/./"[METHOD_NAME](regexp);
+        } catch (error1) {
+            try {
+                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
+            } catch (error2) {/* empty */}
+        }
+        return !1;
+    }("includes")
+}, {
+    includes: function(searchString /* , position = 0 */) {
+        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var includes$3 = getBuiltInPrototypeMethod$2("String", "includes"), isPrototypeOf = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype = Array.prototype, StringPrototype = String.prototype;
+
+const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.includes;
+    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
+}));
+
+/**
+ * Get GPU memory info if available (Chrome DevTools only)
+ */
+/**
+ * PerformanceDashboard - Real-time performance monitoring overlay
+ *
+ * Displays:
+ * - Current FPS with color coding
+ * - Frame time statistics
+ * - Quality level indicator
+ * - GPU memory usage (if available)
+ * - Auto-scaling status
+ */
+const PerformanceDashboard = ({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
+    // Get color for FPS display
+    const getFpsColor = fps => fps >= 58 ? "#4ade80" : // Green - good
+    fps >= 45 ? "#fbbf24" : "#ef4444" // Red - critical
+    , dashboardStyle = useMemo((() => ({
+        position: "fixed",
+        top: "16px",
+        right: "16px",
+        padding: "12px 16px",
+        backgroundColor: "rgba(17, 24, 39, 0.95)",
+        borderRadius: "8px",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        fontFamily: "monospace",
+        fontSize: "12px",
+        color: "#fff",
+        zIndex: 9999,
+        minWidth: "200px",
+        backdropFilter: "blur(8px)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        transition: "opacity 0.3s ease",
+        opacity: isVisible ? 1 : 0,
+        pointerEvents: isVisible ? "auto" : "none"
+    })), [ isVisible ]), headerStyle = useMemo((() => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "8px",
+        paddingBottom: "8px",
+        borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
+    })), []), titleStyle = useMemo((() => ({
+        fontWeight: "bold",
+        fontSize: "13px",
+        color: "#fff"
+    })), []), closeButtonStyle = useMemo((() => ({
+        background: "transparent",
+        border: "none",
+        color: "#9ca3af",
+        cursor: "pointer",
+        fontSize: "16px",
+        padding: "0",
+        lineHeight: "1"
+    })), []), metricRowStyle = useMemo((() => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "6px"
+    })), []), labelStyle = useMemo((() => ({
+        color: "#9ca3af",
+        marginRight: "12px"
+    })), []), valueStyle = useMemo((() => ({
+        fontWeight: "bold"
+    })), []);
+    // Get quality level badge color
+        return isVisible ? jsxs("div", {
+        style: dashboardStyle,
+        children: [ jsxs("div", {
+            style: headerStyle,
+            children: [ jsx("span", {
+                style: titleStyle,
+                children: "Performance Monitor"
+            }), onClose && jsx("button", {
+                style: closeButtonStyle,
+                onClick: onClose,
+                "aria-label": "Close performance dashboard",
+                children: "×"
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "FPS"
+            }), jsx("span", {
+                style: {
+                    ...valueStyle,
+                    color: getFpsColor(metrics.fps)
+                },
+                children: Math.round(metrics.fps)
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "Frame Time"
+            }), jsxs("span", {
+                style: valueStyle,
+                children: [ metrics.frameTime.toFixed(2), "ms" ]
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "Quality"
+            }), jsx("span", {
+                style: {
+                    ...valueStyle,
+                    color: (quality => {
+                        switch (quality) {
+                          case "high":
+                            return "#4ade80";
+
+                          case "medium":
+                            return "#fbbf24";
+
+                          case "low":
+                            return "#ef4444";
+
+                          default:
+                            return "#9ca3af";
+                        }
+                    })(metrics.qualityLevel),
+                    textTransform: "uppercase",
+                    fontSize: "11px"
+                },
+                children: metrics.qualityLevel
+            }) ]
+        }), metrics.gpuMemory && jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "GPU Memory"
+            }), jsxs("span", {
+                style: valueStyle,
+                children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
+            }) ]
+        }), metrics.isAutoScaling && jsx("div", {
+            style: {
+                marginTop: "8px",
+                paddingTop: "8px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                fontSize: "10px",
+                color: "#6b7280",
+                textAlign: "center"
+            },
+            children: "Auto-scaling active"
+        }), jsxs("div", {
+            style: {
+                marginTop: "8px",
+                paddingTop: "8px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                display: "flex",
+                alignItems: "center",
+                gap: "6px"
+            },
+            children: [ jsx("div", {
+                style: {
+                    width: "8px",
+                    height: "8px",
+                    borderRadius: "50%",
+                    backgroundColor: getFpsColor(metrics.fps),
+                    animation: metrics.fps < 45 ? "pulse 1s infinite" : "none"
+                }
+            }), jsx("span", {
+                style: {
+                    fontSize: "10px",
+                    color: metrics.fps >= 58 ? "#4ade80" : metrics.fps >= 45 ? "#fbbf24" : "#ef4444"
+                },
+                children: metrics.fps >= 58 ? "Optimal" : metrics.fps >= 45 ? "Warning" : "Critical"
+            }) ]
+        }) ]
+    }) : null;
+};
+
+// Add pulse animation for critical FPS
+if ("undefined" != typeof document) {
+    const styleSheet = document.createElement("style");
+    styleSheet.textContent = "\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n  ", 
+    document.head.appendChild(styleSheet);
+}
+
+/**
+ * Mobile optimization presets
+ *
+ * These presets adjust glass effect parameters based on device performance tier
+ * to ensure smooth animations and responsive interactions.
+ */
+/**
+ * Performance preset - Maximum FPS, reduced quality
+ * Best for low-end devices or when battery saving is priority
+ */ const PERFORMANCE_PRESET = {
+    distortionOctaves: 2,
+    // Minimal FBM layers
+    displacementScale: 50,
+    // Subtle displacement
+    blurAmount: 5,
+    // Light blur
+    saturation: 80,
+    // Reduced saturation
+    aberrationIntensity: .3,
+    // Minimal chromatic aberration
+    animationSpeed: .8,
+    // Slightly slower for performance
+    chromaticIntensity: .3,
+    // Low chromatic effect
+    distortionLacunarity: 1.5,
+    // Simpler noise pattern
+    distortionGain: .3
+}, BALANCED_PRESET = {
+    distortionOctaves: 3,
+    // Moderate FBM layers
+    displacementScale: 75,
+    // Medium displacement
+    blurAmount: 8,
+    // Moderate blur
+    saturation: 90,
+    // Near-full saturation
+    aberrationIntensity: .5,
+    // Moderate chromatic aberration
+    animationSpeed: 1,
+    // Normal speed
+    chromaticIntensity: .5,
+    // Moderate chromatic effect
+    distortionLacunarity: 2,
+    // Standard noise pattern
+    distortionGain: .4
+}, QUALITY_PRESET = {
+    distortionOctaves: 4,
+    // More FBM layers for detail
+    displacementScale: 100,
+    // Stronger displacement
+    blurAmount: 12,
+    // Smoother blur
+    saturation: 100,
+    // Full saturation
+    aberrationIntensity: .7,
+    // Pronounced chromatic aberration
+    animationSpeed: 1.2,
+    // Slightly faster for drama
+    chromaticIntensity: .7,
+    // Strong chromatic effect
+    distortionLacunarity: 2.2,
+    // Richer noise pattern
+    distortionGain: .5
+}, MOBILE_OPTIMIZED_BREAKPOINTS = {
+    /** Desktop - Full quality */
+    desktop: {
+        minWidth: 1024,
+        params: {
+            distortionOctaves: 6,
+            displacementScale: 150,
+            blurAmount: 15,
+            saturation: 100,
+            aberrationIntensity: 1,
+            animationSpeed: 1,
+            chromaticIntensity: 1,
+            distortionLacunarity: 2.5,
+            distortionGain: .6
+        }
+    },
+    /** Laptop - High quality */
+    laptop: {
+        minWidth: 768,
+        params: {
+            ...QUALITY_PRESET,
+            distortionOctaves: 5,
+            displacementScale: 120
+        }
+    },
+    /** Tablet - Balanced quality */
+    tablet: {
+        minWidth: 640,
+        params: {
+            ...BALANCED_PRESET,
+            distortionOctaves: 4,
+            displacementScale: 90
+        }
+    },
+    /** Mobile - Performance optimized */
+    mobile: {
+        maxWidth: 639,
+        params: {
+            ...PERFORMANCE_PRESET,
+            distortionOctaves: 3,
+            displacementScale: 75,
+            blurAmount: 6
+        }
+    },
+    /** Small mobile - Maximum performance */
+    mobileSmall: {
+        maxWidth: 375,
+        params: {
+            ...PERFORMANCE_PRESET,
+            distortionOctaves: 2,
+            displacementScale: 50,
+            blurAmount: 4,
+            saturation: 70
+        }
+    }
+};
+
+/**
+ * Balanced preset - Good quality with reasonable performance
+ * Default preset for most mobile devices
+ */
+/**
+ * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
+ *
+ * Features:
+ * - Hardware-accelerated glass effects with SVG filters
+ * - Mouse-responsive liquid distortion
+ * - Dynamic border-radius extraction from children CSS properties
+ * - Automatic light/dark theme detection via overLight prop
+ * - Accessibility and performance optimizations
+ * - Multiple displacement modes (standard, polar, prominent, shader)
+ * - Design token integration for consistent theming
+ * - 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
+ * - Follows BEM methodology for class naming
+ * - Implements focus-ring mixin for accessibility
+ * - Supports reduced motion and high contrast preferences
+ *
+ * @example
+ * // Basic usage with dynamic border-radius extraction
+ * <AtomixGlass>
+ *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Manual border-radius override
+ * <AtomixGlass borderRadius={20}>
+ *   <div>Content with 20px glass radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Interactive glass with click handler
+ * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
+ *   <div>Clickable content</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Boolean mode (explicit control)
+ * <AtomixGlass overLight={true}>
+ *   <div>Content on light background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Auto-detection mode
+ * <AtomixGlass overLight="auto">
+ *   <div>Content with auto-detected background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Object config with custom settings
+ * <AtomixGlass
+ *   overLight={{
+ *     threshold: 0.8,
+ *     opacity: 0.6,
+ *     contrast: 1.8,
+ *     brightness: 1.0,
+ *     saturationBoost: 1.5
+ *   }}
+ * >
+ *   <div>Content with custom overLight config</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Debug mode for overLight detection
+ * <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>
+ */
+function AtomixGlass({children: children, 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, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, ...rest}) {
+    const glassRef = useRef(null), contentRef = useRef(null), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, applyTimeBasedDistortion: applyTimeBasedDistortion, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+        glassRef: glassRef,
+        contentRef: contentRef,
+        borderRadius: borderRadius,
+        globalMousePosition: externalGlobalMousePosition,
+        mouseOffset: externalMouseOffset,
+        mouseContainer: mouseContainer,
+        overLight: overLight,
+        reducedMotion: reducedMotion,
+        highContrast: highContrast,
+        withoutEffects: withoutEffects,
+        elasticity: elasticity,
+        onClick: onClick,
+        debugOverLight: debugOverLight,
+        debugPerformance: debugPerformance,
+        children: children,
+        blurAmount: blurAmount,
+        saturation: saturation,
+        withLiquidBlur: withLiquidBlur,
+        padding: padding,
+        style: style,
+        isFixedOrSticky: isFixedOrSticky,
+        // Phase 1: Animation System props
+        withTimeAnimation: withTimeAnimation,
+        animationSpeed: animationSpeed,
+        withMultiLayerDistortion: withMultiLayerDistortion,
+        distortionOctaves: distortionOctaves,
+        distortionLacunarity: distortionLacunarity,
+        distortionGain: distortionGain,
+        distortionQuality: distortionQuality
+    });
+    // Re-calculate only when devicePreset changes
+    // Responsive breakpoint system - automatically adjusts parameters based on viewport
+    !
+    /**
+ * Responsive Glass Parameters Hook
+ *
+ * Automatically adjusts glass effect parameters based on:
+ * 1. Screen size (mobile/tablet/desktop breakpoints)
+ * 2. Device performance (RAM and CPU detection)
+ * 3. Custom breakpoint configuration
+ *
+ * Features:
+ * - Debounced resize handling
+ * - Performance-based quality adjustment
+ * - Smooth parameter transitions
+ * - Debug mode for development
+ *
+ * @example
+ * ```typescript
+ * const { responsiveParams, currentBreakpoint } = useResponsiveGlass({
+ *   baseParams: {
+ *     distortionOctaves: 5,
+ *     displacementScale: 20,
+ *     blurAmount: 10,
+ *   },
+ *   debug: true,
+ * });
+ * ```
+ *
+ * @param options Hook configuration options
+ * @returns Responsive parameters and metadata
+ */
+    function({baseParams: baseParams, breakpoints: breakpoints = DEFAULT_BREAKPOINTS, enabled: enabled = !0, enablePerformanceAdjustment: enablePerformanceAdjustment = !0, debug: debug = !1}) {
+        const [responsiveParams, setResponsiveParams] = useState(baseParams), [currentBreakpoint, setCurrentBreakpoint] = useState("desktop"), [performanceTier, setPerformanceTier] = useState("high"), [isActive, setIsActive] = useState(enabled), baseParamsRef = useRef(baseParams), breakpointsRef = useRef(breakpoints);
+        // Update refs when props change
+        baseParamsRef.current = baseParams, breakpointsRef.current = breakpoints;
+        /**
+   * Calculate and apply responsive parameters
+   */
+        const calculateParams = useCallback((() => {
+            if (!enabled || "undefined" == typeof window) return setIsActive(!1), setResponsiveParams(baseParamsRef.current), 
+            void setCurrentBreakpoint("disabled");
+            setIsActive(!0);
+            // Get current screen width
+            const width = window.innerWidth, {name: name, params: breakpointParams} = ((width, breakpoints) => {
+                // Convert breakpoints to array and sort by minWidth descending
+                const sortedBreakpoints = Object.entries(breakpoints).filter((([_, bp]) => void 0 !== bp.minWidth)).sort(((a, b) => (b[1].minWidth || 0) - (a[1].minWidth || 0)));
+                // Find first breakpoint where width >= minWidth
+                                for (const [name, bp] of sortedBreakpoints) if (width >= (bp.minWidth || 0)) return {
+                    name: name,
+                    params: bp.params
+                };
+                // If no minWidth matched, check maxWidth breakpoints
+                                const maxWidthBreakpoints = Object.entries(breakpoints).filter((([_, bp]) => void 0 !== bp.maxWidth)).sort(((a, b) => (a[1].maxWidth || 1 / 0) - (b[1].maxWidth || 1 / 0)));
+                for (const [name, bp] of maxWidthBreakpoints) if (width <= (bp.maxWidth || 1 / 0)) return {
+                    name: name,
+                    params: bp.params
+                };
+                // Fallback to first available breakpoint
+                                const entries = Object.entries(breakpoints);
+                if (0 === entries.length) 
+                // Ultimate fallback - return sensible defaults
+                return {
+                    name: "desktop",
+                    params: {
+                        distortionOctaves: 5,
+                        displacementScale: 1,
+                        blurAmount: 1
+                    }
+                };
+                const firstEntry = entries[0];
+                if (!firstEntry) return {
+                    name: "desktop",
+                    params: {
+                        distortionOctaves: 5,
+                        displacementScale: 1,
+                        blurAmount: 1
+                    }
+                };
+                const [fallbackName, fallbackBreakpoint] = firstEntry;
+                return {
+                    name: fallbackName,
+                    params: fallbackBreakpoint.params
+                };
+            })(width, breakpointsRef.current);
+            // Determine current breakpoint
+                        setCurrentBreakpoint(name);
+            // Merge base params with breakpoint params
+            let mergedParams = ((baseParams, breakpointParams) => {
+                const result = {
+                    ...baseParams
+                }, scaleProperties = [ "displacementScale", "blurAmount", "saturation", "aberrationIntensity", "animationSpeed", "chromaticIntensity" ];
+                // Apply scaling for specific properties
+                                for (const prop of scaleProperties) void 0 !== breakpointParams[prop] && void 0 !== baseParams[prop] && (result[prop] = baseParams[prop] * breakpointParams[prop]);
+                // Override properties that should be set directly (not scaled)
+                                const overrideProperties = [ "distortionOctaves", "distortionLacunarity", "distortionGain" ];
+                for (const prop of overrideProperties) void 0 !== breakpointParams[prop] && (result[prop] = breakpointParams[prop]);
+                return result;
+            })(baseParamsRef.current, breakpointParams);
+            // Apply performance adjustments if enabled
+                        if (enablePerformanceAdjustment) {
+                const tier = (() => {
+                    // Check if we're in a browser environment
+                    if ("undefined" == typeof window || "undefined" == typeof navigator) return "high"; // Default to high for SSR
+                    // Device Memory API (Chrome, Edge, Opera)
+                    // Returns RAM in GB: 0.25, 0.5, 1, 2, 4, 8
+                                        const deviceMemory = navigator.deviceMemory || 4, hardwareConcurrency = navigator.hardwareConcurrency || 4;
+                    // Hardware Concurrency API (logical CPU cores)
+                                        // Low-end: ≤2GB RAM OR ≤2 CPU cores
+                    return deviceMemory <= 2 || hardwareConcurrency <= 2 ? "low" : 
+                    // High-end: ≥4GB RAM AND ≥4 CPU cores
+                    deviceMemory >= 4 && hardwareConcurrency >= 4 ? "high" : "medium";
+                })();
+                setPerformanceTier(tier), mergedParams = ((baseParams, performanceTier) => {
+                    if ("high" === performanceTier) return baseParams;
+ // No adjustment needed
+                                        const multiplier = "low" === performanceTier ? .7 : .85;
+                    return {
+                        ...baseParams,
+                        distortionOctaves: Math.max(2, Math.round((baseParams.distortionOctaves || 5) * multiplier)),
+                        displacementScale: (baseParams.displacementScale || 1) * multiplier,
+                        blurAmount: (baseParams.blurAmount || 1) * multiplier,
+                        animationSpeed: (baseParams.animationSpeed || 1) * multiplier,
+                        chromaticIntensity: (baseParams.chromaticIntensity || 1) * multiplier
+                    };
+                })(mergedParams, tier);
+            }
+            setResponsiveParams(mergedParams);
+        }), [ enabled, enablePerformanceAdjustment, debug ]), debouncedCalculate = (func => {
+            const timeoutRef = useRef(null);
+            return useEffect((() => () => {
+                timeoutRef.current && clearTimeout(timeoutRef.current);
+            }), []), useCallback(((...args) => {
+                timeoutRef.current && clearTimeout(timeoutRef.current), timeoutRef.current = setTimeout((() => {
+                    func(...args);
+                }), 200);
+            }), [ func, 200 ]);
+        })(calculateParams);
+        /**
+   * Debounced parameter calculation for resize events
+   */        
+        /**
+   * Handle window resize
+   */
+        useEffect((() => {
+            if (enabled) 
+            // Cleanup
+            // Initial calculation
+            return calculateParams(), 
+            // Listen for resize events
+            window.addEventListener("resize", debouncedCalculate), () => {
+                window.removeEventListener("resize", debouncedCalculate);
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+                }), [ enabled ]), useCallback((() => {
+            calculateParams();
+        }), [ calculateParams ]);
+    }({
+        baseParams: {
+            ...useMemo((() => 
+            /**
+ * Get preset by name
+ */
+            function(presetName) {
+                switch (presetName) {
+                  case "performance":
+                    return PERFORMANCE_PRESET;
+
+                  case "balanced":
+                  default:
+                    return BALANCED_PRESET;
+
+                  case "quality":
+                    return QUALITY_PRESET;
+                }
+            }
+            /**
+ * Mobile-optimized responsive breakpoints
+ * Automatically applies appropriate presets based on viewport size
+ */ (devicePreset)), [ devicePreset ]),
+            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,
+            chromaticIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY
+        },
+        breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
+        enabled: !disableResponsiveBreakpoints && "undefined" != typeof window,
+        // Enable unless disabled
+        debug: !1
+    });
+    // Performance monitoring - tracks FPS, frame time, memory usage
+    const {metrics: performanceMetrics, recommendedQuality: recommendedQuality, isUnderperforming: isUnderperforming, setQualityLevel: setQualityLevel, toggleMonitoring: toggleMonitoring} = 
+    /**
+ * Performance Monitor Hook
+ *
+ * Real-time performance tracking with automatic quality scaling.
+ * Monitors FPS, frame time, and GPU memory to optimize glass effects.
+ *
+ * Features:
+ * - Real-time FPS measurement
+ * - Frame timing analysis
+ * - Automatic quality scaling
+ * - Debug overlay option
+ * - Manual override capability
+ *
+ * @example
+ * ```typescript
+ * const { metrics, recommendedQuality, setQualityLevel } = usePerformanceMonitor({
+ *   targetFps: 60,
+ *   minFps: 45,
+ *   debug: true,
+ * });
+ * ```
+ *
+ * @param config Monitor configuration
+ * @returns Performance metrics and controls
+ */
+    function(config = {}) {
+        const {enabled: enabled = !0, targetFps: targetFps = 60, minFps: minFps = 45, scaleUpThreshold: scaleUpThreshold = 58, lowFpsFrames: lowFpsFrames = 3, highFpsFrames: highFpsFrames = 10, debug: debug = !1, showOverlay: showOverlay = !1} = config, [metrics, setMetrics] = useState({
+            fps: 0,
+            frameTime: 0,
+            gpuMemory: null,
+            qualityLevel: "medium",
+            timestamp: 0,
+            isAutoScaling: !0,
+            lowFpsCount: 0
+        }), [manualOverride, setManualOverride] = useState(!1), [isEnabled, setIsEnabled] = useState(enabled), frameCountRef = useRef(0), lastFpsUpdateRef = useRef(0), lastFrameTimeRef = useRef(0), animationFrameRef = useRef(null), lowFpsCountRef = useRef(0), highFpsCountRef = useRef(0), qualityLevelRef = useRef("medium"), updateMetrics = useCallback((newMetrics => {
+            setMetrics((prev => ({
+                ...prev,
+                ...newMetrics,
+                timestamp: performance.now()
+            })));
+        }), []), applyAutoScaling = useCallback((currentFps => {
+            if (manualOverride) return;
+            const currentQuality = qualityLevelRef.current;
+            // Check for low FPS
+                        if (currentFps < minFps) lowFpsCountRef.current++, highFpsCountRef.current = 0, 
+            // Scale down after N consecutive low-FPS frames
+            lowFpsCountRef.current >= lowFpsFrames && "low" !== currentQuality && (qualityLevelRef.current = "low", 
+            updateMetrics({
+                qualityLevel: "low",
+                lowFpsCount: lowFpsCountRef.current
+            })); else if (currentFps >= scaleUpThreshold) {
+                // Scale up after N consecutive high-FPS frames
+                if (highFpsCountRef.current++, lowFpsCountRef.current = 0, highFpsCountRef.current >= highFpsFrames) {
+                    const newQuality = "low" === currentQuality ? "medium" : "high";
+                    qualityLevelRef.current = newQuality, updateMetrics({
+                        qualityLevel: newQuality,
+                        lowFpsCount: 0
+                    }), highFpsCountRef.current = 0;
+                }
+            } else 
+            // FPS in normal range, reset counters
+            lowFpsCountRef.current = 0, highFpsCountRef.current = 0;
+        }), [ manualOverride, minFps, scaleUpThreshold, lowFpsFrames, highFpsFrames, debug, updateMetrics ]), measureFrame = useCallback((currentTime => {
+            if (!isEnabled) return;
+            frameCountRef.current++;
+            // Calculate frame time
+            const frameTime = currentTime - lastFrameTimeRef.current;
+            // Update FPS every 100ms for responsiveness
+            if (lastFrameTimeRef.current = currentTime, currentTime - lastFpsUpdateRef.current >= 100) {
+                const elapsed = currentTime - lastFpsUpdateRef.current, fps = Math.round(1e3 * frameCountRef.current / elapsed);
+                // Apply auto-scaling
+                applyAutoScaling(fps), updateMetrics({
+                    fps: fps,
+                    frameTime: frameTime,
+                    qualityLevel: qualityLevelRef.current,
+                    lowFpsCount: lowFpsCountRef.current
+                }), 
+                // Reset for next measurement period
+                frameCountRef.current = 0, lastFpsUpdateRef.current = currentTime;
+            }
+            // Continue measurement loop
+                        animationFrameRef.current = requestAnimationFrame(measureFrame);
+        }), [ isEnabled, applyAutoScaling, updateMetrics ]);
+        /**
+   * Initialize GPU memory tracking
+   */
+        useEffect((() => {
+            if (!isEnabled || "undefined" == typeof window) return;
+            let mounted = !0;
+            return (async () => {
+                const memory = await new Promise((resolve => {
+                    // Check for WebGL debug renderer info
+                    if ("undefined" != typeof window && "undefined" != typeof document) try {
+                        const canvas = document.createElement("canvas"), gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+                        if (gl) {
+                            const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+                            if (debugInfo) {
+                                var _context, _context2, _context3;
+                                // Note: Actual memory info is not directly available via WebGL
+                                // We estimate based on renderer
+                                                                const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+                                // Rough estimation based on renderer type
+                                return void ((null == (_context = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context), _context))?.("Integrated") ? resolve(256) : (null == (_context2 = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context2), _context2))?.("AMD") || (null == (_context3 = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context3), _context3))?.("NVIDIA") ? resolve(512) : resolve(null));
+                            }
+                        }
+                    } catch (e) {
+                        // WebGL not available or error occurred
+                    }
+                    resolve(null);
+                }));
+                mounted && updateMetrics({
+                    gpuMemory: memory
+                });
+            })(), () => {
+                mounted = !1;
+            };
+        }), [ isEnabled, updateMetrics ]), 
+        /**
+   * Start/stop monitoring based on enabled state
+   */
+        useEffect((() => {
+            if (isEnabled) 
+            // Cleanup
+            // Initialize
+            return lastFpsUpdateRef.current = performance.now(), lastFrameTimeRef.current = performance.now(), 
+            animationFrameRef.current = requestAnimationFrame(measureFrame), () => {
+                null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+                animationFrameRef.current = null);
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+                        null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+            animationFrameRef.current = null);
+        }), [ isEnabled ]);
+        // measureFrame is stable via useCallback, avoid re-creating RAF loop
+        /**
+   * Manually set quality level (disables auto-scaling)
+   */
+        const setQualityLevel = useCallback((level => {
+            setManualOverride(!0), qualityLevelRef.current = level, updateMetrics({
+                qualityLevel: level,
+                isAutoScaling: !1
+            });
+        }), [ updateMetrics, debug ]), resetAutoScaling = useCallback((() => {
+            setManualOverride(!1), lowFpsCountRef.current = 0, highFpsCountRef.current = 0, 
+            updateMetrics({
+                isAutoScaling: !0,
+                lowFpsCount: 0
+            });
+        }), [ updateMetrics, debug ]), toggleMonitoring = useCallback((() => {
+            setIsEnabled((prev => !prev));
+        }), []);
+        /**
+   * Reset to auto-scaling mode
+   */        var fps, currentQuality;
+        return {
+            metrics: metrics,
+            recommendedQuality: (fps = metrics.fps, currentQuality = metrics.qualityLevel, fps >= 58 ? "high" : fps >= 45 ? "high" === currentQuality ? "high" : "medium" : "low"),
+            isUnderperforming: metrics.fps < minFps,
+            setQualityLevel: setQualityLevel,
+            resetAutoScaling: resetAutoScaling,
+            toggleMonitoring: toggleMonitoring
+        };
+    }({
+        enabled: !1,
+        // We'll toggle manually based on prop
+        debug: !1,
+        showOverlay: !1
+    });
+    // Auto-start performance monitoring if enabled (only in development)
+        React.useEffect((() => {
+        "development" === process.env.NODE_ENV && window?.enablePerformanceMonitoring && toggleMonitoring();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }), []);
+    // Only run once on mount
+    const isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = useMemo((() => {
+        if (!isFixedOrSticky) return {};
+        const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
+        return {
+            ...p && {
+                position: p
+            },
+            ...void 0 !== t && {
+                top: t
+            },
+            ...void 0 !== l && {
+                left: l
+            },
+            ...void 0 !== r && {
+                right: r
+            },
+            ...void 0 !== b && {
+                bottom: b
+            }
+        };
+    }), [ isFixedOrSticky, restStyle ]);
+    // Calculate base style with transforms
+    // When layout is hoisted to the root, strip those props from the container
+    useMemo((() => {
+        if (isFixedOrSticky) {
+            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
+            return {
+                ...visualStyle,
+                ...!effectiveWithoutEffects && {
+                    transform: transformStyle
+                }
+            };
+        }
+        return {
+            ...restStyle,
+            ...!effectiveWithoutEffects && {
+                transform: transformStyle
+            }
+        };
+    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]);
+    // Build className with state modifiers
+    const componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
+        position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
+        top: isFixedOrSticky ? 0 : restStyle.top || 0,
         left: isFixedOrSticky ? 0 : restStyle.left || 0
     })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left ]), adjustedSize = useMemo((() => {
         // Keep a reference to positionStyles to avoid unused-variable lint,
@@ -1596,6 +2967,15 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             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: children
         }), Boolean(onClick) && jsxs(Fragment, {
             children: [ jsx("div", {
@@ -1619,6 +2999,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }), jsx("span", {
                 className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
+        }), debugPerformance && performanceMetrics && jsx(PerformanceDashboard, {
+            metrics: performanceMetrics,
+            isVisible: !0,
+            onClose: () => {}
         }) ]
     });
 }
@@ -1845,449 +3229,79 @@ const smoothStep = (a, b, t) => {
             // Enhanced validation for canvas dimensions
             this.canvas.width = Math.max(1, Math.min(4096, Math.round(options.width * this.canvasDPI || 256))), 
             this.canvas.height = Math.max(1, Math.min(4096, Math.round(options.height * this.canvasDPI || 256))), 
-            this.canvas.style.display = "none";
-            const context = this.canvas.getContext("2d");
-            if (!context) throw new Error("AtomixGlass: Could not get 2D canvas context");
-            this.context = context;
-        }
-        validateOptions(options) {
-            try {
-                return options && "number" == typeof options.width && options.width > 0 && options.width <= 4096 && "number" == typeof options.height && options.height > 0 && options.height <= 4096 && "function" == typeof options.fragment;
-            } catch (e) {
-                // Graceful error handling
-                return !1;
-            }
-        }
-        updateShader(mousePosition) {
-            try {
-                const w = this.options.width * this.canvasDPI, h = this.options.height * this.canvasDPI;
-                let maxScale = 0;
-                const rawValues = [];
-                // Calculate displacement values with enhanced smoothing
-                                for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
-                    const uv = {
-                        x: x / w,
-                        y: y / h
-                    }, pos = this.options.fragment(uv, mousePosition);
-                    let dx = pos.x * w - x, dy = pos.y * h - y;
-                    // Apply edge smoothing for Apple-like effect
-                    const edgeX = 2 * Math.min(x / w, (w - x) / w), edgeY = 2 * Math.min(y / h, (h - y) / h), edgeFactor = Math.min(edgeX, edgeY);
-                    dx *= smoothStep(0, .2, edgeFactor), dy *= smoothStep(0, .2, edgeFactor), maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), 
-                    rawValues.push(dx, dy);
-                }
-                // Improved normalization to prevent artifacts while maintaining intensity
-                                maxScale = Math.max(maxScale, 1);
-                // Create ImageData and fill it
-                const imageData = this.context.createImageData(w, h), data = imageData.data;
-                // Convert to image data with smoother normalization
-                let rawIndex = 0;
-                for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
-                    const dx = rawValues[rawIndex++] || 0, dy = rawValues[rawIndex++] || 0, edgeDistance = Math.min(x, y, w - x - 1, h - y - 1), edgeFactor = Math.min(1, edgeDistance / 2), r = dx * edgeFactor / maxScale + .5, g = dy * edgeFactor / maxScale + .5, pixelIndex = 4 * (y * w + x);
-                    data[pixelIndex] = clampValue(255 * r, 0, 255), // Red channel (X displacement)
-                    data[pixelIndex + 1] = clampValue(255 * g, 0, 255), // Green channel (Y displacement)
-                    data[pixelIndex + 2] = clampValue(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
-                    data[pixelIndex + 3] = 255;
-                }
-                return this.context.putImageData(imageData, 0, 0), this.canvas.toDataURL();
-            } catch (error) {
-                // Graceful fallback on error
-                return console.warn("ShaderDisplacementGenerator: Error generating shader map, using fallback", error), 
-                "";
- // Return empty string as fallback
-                        }
-        }
-        destroy() {
-            try {
-                // Clear canvas data to free memory
-                this.context && this.context.clearRect(0, 0, this.canvas.width, this.canvas.height), 
-                // Reduce memory footprint by setting dimensions to 0
-                this.canvas.width = 0, this.canvas.height = 0, 
-                // Remove from DOM
-                this.canvas.remove();
-            } catch (e) {
-                // Silently handle cleanup errors
-                console.warn("ShaderDisplacementGenerator: Error during cleanup", e);
-            }
-        }
-        getScale() {
-            return this.canvasDPI;
-        }
-    },
-    fragmentShaders: fragmentShaders
-}, Symbol.toStringTag, {
-    value: "Module"
-}));
-
-var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
-
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
-
-var fails$8 = function(exec) {
-    try {
-        return !!exec();
-    } catch (error) {
-        return !0;
-    }
-}, functionBindNative = !fails$8((function() {
-    // eslint-disable-next-line es/no-function-prototype-bind -- safe
-    var test = function() {/* empty */}.bind();
-    // eslint-disable-next-line no-prototype-builtins -- safe
-        return "function" != typeof test || test.hasOwnProperty("prototype");
-})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
-    return function() {
-        return call$5.apply(fn, arguments);
-    };
-}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
-    return it && it.Math === Math && it;
-}, globalThis_1 = 
-// eslint-disable-next-line es/no-global-this -- safe
-check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
-// eslint-disable-next-line no-restricted-globals -- safe
-check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
-// eslint-disable-next-line no-new-func -- fallback
-function() {
-    return this;
-}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
-    return call$4.apply(apply$1, arguments);
-}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
-    return stringSlice(toString$3(it), 8, -1);
-}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
-    // Nashorn bug:
-    //   https://github.com/zloirock/core-js/issues/1128
-    //   https://github.com/zloirock/core-js/issues/1130
-    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
-}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
-    return "function" == typeof argument || argument === documentAll;
-} : function(argument) {
-    return "function" == typeof argument;
-}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty({}, 1, {
-        get: function() {
-            return 7;
-        }
-    })[1];
-})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
-    return call$3.apply(call$3, arguments);
-}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
-    1: 2
-}, 1);
-
-// `Object.prototype.propertyIsEnumerable` method implementation
-// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
-objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
-    var descriptor = getOwnPropertyDescriptor$1(this, V);
-    return !!descriptor && descriptor.enumerable;
-} : $propertyIsEnumerable;
-
-var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
-    return {
-        enumerable: !(1 & bitmap),
-        configurable: !(2 & bitmap),
-        writable: !(4 & bitmap),
-        value: value
-    };
-}, fails$5 = fails$8, classof$3 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$5((function() {
-    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
-    // eslint-disable-next-line no-prototype-builtins -- safe
-    return !$Object$3("z").propertyIsEnumerable(0);
-})) ? function(it) {
-    return "String" === classof$3(it) ? split(it, "") : $Object$3(it);
-} : $Object$3, isNullOrUndefined$2 = function(it) {
-    return null == it;
-}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$6 = TypeError, requireObjectCoercible$3 = function(it) {
-    if (isNullOrUndefined$1(it)) throw new $TypeError$6("Can't call method on " + it);
-    return it;
-}, IndexedObject = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
-    return IndexedObject(requireObjectCoercible$2(it));
-}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
-    return "object" == typeof it ? null !== it : isCallable$7(it);
-}, path$3 = {}, path$2 = path$3, globalThis$a = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
-    return isCallable$6(variable) ? variable : void 0;
-}, navigator$1 = globalThis_1.navigator, userAgent$1 = navigator$1 && navigator$1.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
-
-v8 && (
-// in old Chrome, versions of V8 isn't V8 = Chrome / 10
-// but their correct versions are not interesting for us
-version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
-// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
-// so check `userAgent` even if `.v8` exists, but 0
-!version && userAgent && (!(match = userAgent.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent.match(/Chrome\/(\d+)/)) && (version = +match[1]);
-
-var V8_VERSION = version, fails$4 = fails$8, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$4((function() {
-    var symbol = Symbol("symbol detection");
-    // Chrome 38 Symbol has incorrect toString conversion
-    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
-    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
-    // of course, fail.
-        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
-    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
-    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
-})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$1 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
-    return "symbol" == typeof it;
-} : function(it) {
-    var $Symbol = function(namespace, method) {
-        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$a[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$a[namespace] && globalThis$a[namespace][method];
-    }("Symbol");
-    return isCallable$5($Symbol) && isPrototypeOf$1($Symbol.prototype, $Object$2(it));
-}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$5 = TypeError, aCallable$2 = function(argument) {
-    if (isCallable$4(argument)) return argument;
-    throw new $TypeError$5(function(argument) {
-        try {
-            return $String$2(argument);
-        } catch (error) {
-            return "Object";
-        }
-    }(argument) + " is not a function");
-}, aCallable$1 = aCallable$2, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$4 = TypeError, sharedStore = {
-    exports: {}
-}, globalThis$6 = globalThis_1, defineProperty = Object.defineProperty, globalThis$5 = globalThis_1, store$1 = sharedStore.exports = globalThis$5["__core-js_shared__"] || function(key, value) {
-    try {
-        defineProperty(globalThis$6, key, {
-            value: value,
-            configurable: !0,
-            writable: !0
-        });
-    } catch (error) {
-        globalThis$6[key] = value;
-    }
-    return value;
-}("__core-js_shared__", {});
-
-/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
-    version: "3.43.0",
-    mode: "pure",
-    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
-    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
-    source: "https://github.com/zloirock/core-js"
-});
-
-var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
-    return hasOwnProperty($Object$1(requireObjectCoercible$1(it)), key);
-}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
-    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
-}, wellKnownSymbol$5 = function(name) {
-    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
-    WellKnownSymbolsStore[name];
-}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$3 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
-    if (!isObject$3(input) || isSymbol$1(input)) return input;
-    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$1(func));
-    if (exoticToPrim) {
-        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
-        !isObject$3(result) || isSymbol$1(result)) return result;
-        throw new $TypeError$3("Can't convert object to primitive value");
-    }
-    return void 0 === pref && (pref = "number"), function(input, pref) {
-        var fn, val;
-        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
-        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
-        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
-        throw new $TypeError$4("Can't convert object to primitive value");
-    }(input, pref);
-}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
-    var key = toPrimitive(argument, "string");
-    return isSymbol(key) ? key : key + "";
-}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
-        get: function() {
-            return 7;
+            this.canvas.style.display = "none";
+            const context = this.canvas.getContext("2d");
+            if (!context) throw new Error("AtomixGlass: Could not get 2D canvas context");
+            this.context = context;
         }
-    }).a;
-    var it;
-})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
-
-// `Object.getOwnPropertyDescriptor` method
-// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
-objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
-    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
-        return $getOwnPropertyDescriptor$1(O, P);
-    } catch (error) {/* empty */}
-    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
-};
-
-var fails$2 = fails$8, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
-    var value = data[normalize(feature)];
-    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$2(detection) : !!detection);
-}, normalize = isForced$1.normalize = function(string) {
-    return String(string).replace(replacement, ".").toLowerCase();
-}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable = aCallable$2, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
-        value: 42,
-        writable: !1
-    }).prototype;
-})), isObject$1 = isObject$5, $String$1 = String, $TypeError$2 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
-    if (isObject$1(argument)) return argument;
-    throw new $TypeError$2($String$1(argument) + " is not an object");
-}, toPropertyKey = toPropertyKey$2, $TypeError$1 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-
-// `Object.defineProperty` method
-// https://tc39.es/ecma262/#sec-object.defineproperty
-objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
-        var current = $getOwnPropertyDescriptor(O, P);
-        current && current.writable && (O[P] = Attributes.value, Attributes = {
-            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
-            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
-            writable: !1
-        });
-    }
-    return $defineProperty(O, P, Attributes);
-} : $defineProperty : function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
-        return $defineProperty(O, P, Attributes);
-    } catch (error) {/* empty */}
-    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$1("Accessors not supported");
-    return "value" in Attributes && (O[P] = Attributes.value), O;
-};
-
-var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
-    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
-} : function(object, key, value) {
-    return object[key] = value, object;
-}, globalThis$2 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
-    return aCallable(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
-        return fn.apply(that, arguments);
-    };
-}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
-    var Wrapper = function(a, b, c) {
-        if (this instanceof Wrapper) {
-            switch (arguments.length) {
-              case 0:
-                return new NativeConstructor;
-
-              case 1:
-                return new NativeConstructor(a);
-
-              case 2:
-                return new NativeConstructor(a, b);
+        validateOptions(options) {
+            try {
+                return options && "number" == typeof options.width && options.width > 0 && options.width <= 4096 && "number" == typeof options.height && options.height > 0 && options.height <= 4096 && "function" == typeof options.fragment;
+            } catch (e) {
+                // Graceful error handling
+                return !1;
             }
-            return new NativeConstructor(a, b, c);
         }
-        return apply(NativeConstructor, this, arguments);
-    };
-    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
-}, _export = function(options, source) {
-    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$2 : STATIC ? globalThis$2[TARGET] : globalThis$2[TARGET] && globalThis$2[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
-    for (key in source) 
-    // contains in native
-    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
-    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
-    // export native or implementation
-    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
-    // bind methods to global for calling from export context
-    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$2) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
-    // add a flag to not completely full polyfills
-    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
-    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
-    // export virtual prototype methods
-    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
-    // export real prototype methods
-    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
-}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
-    var n = +x;
-    return (n > 0 ? floor : ceil)(n);
-}, toIntegerOrInfinity$2 = function(argument) {
-    var number = +argument;
-    // eslint-disable-next-line no-self-compare -- NaN check
-        return number != number || 0 === number ? 0 : trunc(number);
-}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, toIndexedObject = toIndexedObject$2, lengthOfArrayLike = function(obj) {
-    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
-    var argument, len;
-}, createMethod = function(IS_INCLUDES) {
-    return function($this, el, fromIndex) {
-        var O = toIndexedObject($this), length = lengthOfArrayLike(O);
-        if (0 === length) return !IS_INCLUDES && -1;
-        var value, index = function(index, length) {
-            var integer = toIntegerOrInfinity$1(index);
-            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
-        }(fromIndex, length);
-        // Array#includes uses SameValueZero equality algorithm
-        // eslint-disable-next-line no-self-compare -- NaN check
-        if (IS_INCLUDES && el != el) {
-            for (;length > index; ) 
-            // eslint-disable-next-line no-self-compare -- NaN check
-            if ((value = O[index++]) != value) return !0;
-            // Array#indexOf ignores holes, Array#includes - not
-                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
-        return !IS_INCLUDES && -1;
-    };
-}, $includes = [ createMethod(!0), createMethod(!1) ][0];
-
-// `Array.prototype.includes` method
-// https://tc39.es/ecma262/#sec-array.prototype.includes
-_export({
-    target: "Array",
-    proto: !0,
-    forced: fails$8((function() {
-        // eslint-disable-next-line es/no-array-prototype-includes -- detection
-        return !Array(1).includes();
-    }))
-}, {
-    includes: function(el /* , fromIndex = 0 */) {
-        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
-    }
-});
-
-var globalThis$1 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$2 = function(CONSTRUCTOR, METHOD) {
-    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
-    if (pureMethod) return pureMethod;
-    var NativeConstructor = globalThis$1[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
-    return NativePrototype && NativePrototype[METHOD];
-}, includes$4 = getBuiltInPrototypeMethod$2("Array", "includes"), isObject = isObject$5, classof$2 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError = TypeError, test = {};
-
-test[wellKnownSymbol$5("toStringTag")] = "z";
-
-var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
-    return arguments;
-}()), classof = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
-    var O, tag, result;
-    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
-        try {
-            return it[key];
-        } catch (error) {/* empty */}
-    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
-}, $String = String, MATCH = wellKnownSymbol$5("match"), $ = _export, notARegExp = function(it) {
-    if (function(it) {
-        var isRegExp;
-        return isObject(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$2(it));
-    }(it)) throw new $TypeError("The method doesn't accept regular expressions");
-    return it;
-}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
-    if ("Symbol" === classof(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
-    return $String(argument);
-}, stringIndexOf = functionUncurryThis("".indexOf);
-
-// `String.prototype.includes` method
-// https://tc39.es/ecma262/#sec-string.prototype.includes
-$({
-    target: "String",
-    proto: !0,
-    forced: !function(METHOD_NAME) {
-        var regexp = /./;
-        try {
-            "/./"[METHOD_NAME](regexp);
-        } catch (error1) {
+        updateShader(mousePosition) {
             try {
-                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
-            } catch (error2) {/* empty */}
+                const w = this.options.width * this.canvasDPI, h = this.options.height * this.canvasDPI;
+                let maxScale = 0;
+                const rawValues = [];
+                // Calculate displacement values with enhanced smoothing
+                                for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
+                    const uv = {
+                        x: x / w,
+                        y: y / h
+                    }, pos = this.options.fragment(uv, mousePosition);
+                    let dx = pos.x * w - x, dy = pos.y * h - y;
+                    // Apply edge smoothing for Apple-like effect
+                    const edgeX = 2 * Math.min(x / w, (w - x) / w), edgeY = 2 * Math.min(y / h, (h - y) / h), edgeFactor = Math.min(edgeX, edgeY);
+                    dx *= smoothStep(0, .2, edgeFactor), dy *= smoothStep(0, .2, edgeFactor), maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), 
+                    rawValues.push(dx, dy);
+                }
+                // Improved normalization to prevent artifacts while maintaining intensity
+                                maxScale = Math.max(maxScale, 1);
+                // Create ImageData and fill it
+                const imageData = this.context.createImageData(w, h), data = imageData.data;
+                // Convert to image data with smoother normalization
+                let rawIndex = 0;
+                for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
+                    const dx = rawValues[rawIndex++] || 0, dy = rawValues[rawIndex++] || 0, edgeDistance = Math.min(x, y, w - x - 1, h - y - 1), edgeFactor = Math.min(1, edgeDistance / 2), r = dx * edgeFactor / maxScale + .5, g = dy * edgeFactor / maxScale + .5, pixelIndex = 4 * (y * w + x);
+                    data[pixelIndex] = clampValue(255 * r, 0, 255), // Red channel (X displacement)
+                    data[pixelIndex + 1] = clampValue(255 * g, 0, 255), // Green channel (Y displacement)
+                    data[pixelIndex + 2] = clampValue(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
+                    data[pixelIndex + 3] = 255;
+                }
+                return this.context.putImageData(imageData, 0, 0), this.canvas.toDataURL();
+            } catch (error) {
+                // Graceful fallback on error
+                return console.warn("ShaderDisplacementGenerator: Error generating shader map, using fallback", error), 
+                "";
+ // Return empty string as fallback
+                        }
         }
-        return !1;
-    }("includes")
-}, {
-    includes: function(searchString /* , position = 0 */) {
-        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
-    }
-});
-
-var includes$3 = getBuiltInPrototypeMethod$2("String", "includes"), isPrototypeOf = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype = Array.prototype, StringPrototype = String.prototype;
-
-const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
-    var own = it.includes;
-    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
+        destroy() {
+            try {
+                // Clear canvas data to free memory
+                this.context && this.context.clearRect(0, 0, this.canvas.width, this.canvas.height), 
+                // Reduce memory footprint by setting dimensions to 0
+                this.canvas.width = 0, this.canvas.height = 0, 
+                // Remove from DOM
+                this.canvas.remove();
+            } catch (e) {
+                // Silently handle cleanup errors
+                console.warn("ShaderDisplacementGenerator: Error during cleanup", e);
+            }
+        }
+        getScale() {
+            return this.canvasDPI;
+        }
+    },
+    createFBMEngine: createFBMEngine,
+    fragmentShaders: fragmentShaders,
+    liquidGlassWithTime: liquidGlassWithTime
+}, Symbol.toStringTag, {
+    value: "Module"
 }));
 
 /**
@@ -2547,9 +3561,15 @@ const VideoPlayer =  forwardRef((({src: src, type: type = "video", youtubeId: yo
         const rect = e.currentTarget.getBoundingClientRect(), percent = (e.clientX - rect.left) / rect.width;
         setVolume(percent);
     }), [ setVolume ]), handleDownload = useCallback((() => {
-        if (src) {
-            const a = document.createElement("a");
-            a.href = src, a.download = "video", a.click();
+        if (src) try {
+            var _context;
+            const url = new URL(src, window.location.origin);
+            if (_includesInstanceProperty(_context = [ "http:", "https:", "blob:", "data:" ]).call(_context, url.protocol)) {
+                const a = document.createElement("a");
+                a.href = url.href, a.download = "video", a.click();
+            }
+        } catch (e) {
+            // Ignore invalid URLs
         }
     }), [ src ]), handleShare = useCallback((async () => {
         if (navigator.share) try {
@@ -3435,7 +4455,7 @@ class ThemeNaming {
 ThemeNaming.prefix = "atomix";
 
 const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, ...props}, ref) => {
-    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
+    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
     }) : icon, buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass("btn", variant), "md" !== size ? ThemeNaming.sizeClass("btn", size) : "", iconOnly ? ThemeNaming.stateClass("btn", "icon") : "", rounded ? ThemeNaming.stateClass("btn", "rounded") : "", isDisabled ? ThemeNaming.stateClass("btn", "disabled") : "", glass ? ThemeNaming.stateClass("btn", "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
@@ -3491,8 +4511,8 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
             ...buttonProps,
             ref: ref,
             // linkComponent usually forwards ref to anchor
-            href: href,
-            to: href,
+            href: isDisabled ? void 0 : href,
+            to: isDisabled ? void 0 : href,
             target: target,
             rel: "_blank" === target ? "noopener noreferrer" : void 0
         };
@@ -3505,7 +4525,7 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
     content = jsx("a", {
         ...buttonProps,
         ref: ref,
-        href: href,
+        href: isDisabled ? void 0 : href,
         target: target,
         rel: "_blank" === target ? "noopener noreferrer" : void 0,
         children: buttonContent