@shohojdhara/atomix 0.6.5 → 0.6.6

package/dist/index.esm.js

@@ -2041,6 +2041,11 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
+        // Interaction intensity multipliers shared by the hook and the imperative style updater
+        INTERACTION: {
+            HOVER_INTENSITY: 1.4,
+            ACTIVE_INTENSITY: 1.6
+        },
         // Elasticity physics constants — Apple-tuned: soft springs, fast settling, minimal stretch
         ELASTICITY_TRANSLATION_FACTOR: .06,
         // Subtler elastic shift (was 0.1)
@@ -2238,7 +2243,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         },
         // Container shadows — hairline inner catch + soft floating lift (Apple player bar)
         CONTAINER_SHADOW: {
-            LIGHT: "inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16)"
+            LIGHT: "inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08)"
         },
         // Phase 1: Animation System Constants
         ANIMATION: {
@@ -2688,7 +2693,28 @@ const {CONSTANTS: CONSTANTS$3} = ATOMIX_GLASS, calculateElementCenter = rect =>
 }, smoothstep = t => {
     const clamped = Math.max(0, Math.min(1, t));
     return clamped * clamped * (3 - 2 * clamped);
-}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
+}, lerp = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), clamp = (value, min, max) => "number" != typeof value || isNaN(value) ? min : Math.max(min, Math.min(max, value)), smoothstepEdge = (edge0, edge1, x) => "number" != typeof edge0 || "number" != typeof edge1 || "number" != typeof x ? 0 : smoothstep((x - edge0) / (edge1 - edge0)), easeInOutCubic = t => {
+    if ("number" != typeof t || isNaN(t)) return 0;
+    const clamped = Math.max(0, Math.min(1, t));
+    return clamped < .5 ? 4 * clamped * clamped * clamped : 1 - Math.pow(-2 * clamped + 2, 3) / 2;
+}, easeOutQuart = t => {
+    if ("number" != typeof t || isNaN(t)) return 0;
+    const clamped = Math.max(0, Math.min(1, t));
+    return 1 - Math.pow(1 - clamped, 4);
+}, vec2Length = (x, y) => {
+    if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
+    const maxComponent = Math.max(Math.abs(x), Math.abs(y));
+    if (0 === maxComponent) return 0;
+    const scaledX = x / maxComponent, scaledY = y / maxComponent;
+    return maxComponent * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
+}, getInteractionIntensity = (isHovered, isActive) => ({
+    hoverIntensity: isHovered ? CONSTANTS$3.INTERACTION.HOVER_INTENSITY : 1,
+    activeIntensity: isActive ? CONSTANTS$3.INTERACTION.ACTIVE_INTENSITY : 1
+})
+/**
+ * Spring-damper integration helper
+ * Calculates the next value based on velocity, stiffness, and damping.
+ */ , calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
     const newVelocity = (velocity + (target - current) * stiffness) * damping;
     return {
         value: current + newVelocity,
@@ -2894,7 +2920,7 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
 }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, 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) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
     // React 18 useId — stable, unique, and SSR-safe (no module-level counter)
     const rawId = useId(), filterId = useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), containerRef = useForkRef(ref, null), [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
@@ -3192,7 +3218,7 @@ class {
 }, {BORDER: BORDER, CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, BORDER_GRADIENT = BORDER.GRADIENT, WHITE = CONSTANTS$2.PALETTE.WHITE, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
     if (!wrapperElement && !containerElement) return;
     if (!validateGlassSize(params.glassSize)) return;
-    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, isFixedOrSticky: isFixedOrSticky = !1, borderAnimated: borderAnimated = !0, borderOpacityMultiplier: borderOpacityMultiplier = 1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, isFixedOrSticky: isFixedOrSticky = !1, borderAnimated: borderAnimated = !0, borderOpacityMultiplier: borderOpacityMultiplier = 1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), overLightConfig = {
         opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
         contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
         brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
@@ -3323,140 +3349,9 @@ class {
         style.setProperty("--atomix-glass-container-shadow-opacity", effectiveWithoutEffects ? "0" : "1"), 
         style.setProperty("--atomix-glass-container-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"), 
         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)" : "0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18)");
+        style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10)");
     }
-};
-
-/**
- * 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;
+}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
 
 const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
@@ -3471,10 +3366,7 @@ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new Weak
  * 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, border: border, withBorder: withBorder = !0, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1, withTimeAnimation: 
-// Default priority
-// 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}) {
+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, border: border, withBorder: withBorder = !0, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1}) {
     // State
     const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), resolvedBorder = useMemo((() => 
     /**
@@ -3526,52 +3418,10 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
     }), scaleVelocityRef = useRef({
         x: 0,
         y: 0
-    });
-    useRef(0);
-    const mouseVelocityRef = useRef({
+    }), mouseVelocityRef = useRef({
         x: 0,
         y: 0
-    }), [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}) {
+    }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), 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
@@ -3631,9 +3481,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         effectiveBorderRadius: effectiveBorderRadius,
         cachedRectRef: cachedRectRef
     }), 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 = () => {
@@ -3793,7 +3640,7 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
    * Get effective overLight value based on configuration
    */
     const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = useMemo((() => {
-        const isOverLight = getEffectiveOverLight(), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
+        const isOverLight = getEffectiveOverLight(), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), baseConfig = {
             isOverLight: isOverLight,
             threshold: .7,
             opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
@@ -3837,8 +3684,8 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             };
             const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
             internalGlobalMousePositionRef.current = {
-                x: lerp$1(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
-                y: lerp$1(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
+                x: lerp(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
+                y: lerp(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
             };
             // ── Calculate Elastic Physics ─────────────────────────────────────
             let targetElasticTranslation = {
@@ -4005,8 +3852,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         overLightConfig: overLightConfig,
         resolvedBorder: resolvedBorder,
         transformStyle: transformStyle,
-        getShaderTime: getShaderTime,
-        applyTimeBasedDistortion: applyTimeBasedDistortion,
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -4420,12 +4265,6 @@ function usePerformanceMonitor$1(config = {}) {
     };
 }
 
-/**
- * Debug Overlay Component (Optional)
- *
- * Shows real-time performance metrics on screen.
- * Only rendered when showOverlay is enabled.
- */
 /**
  * Mobile optimization presets
  *
@@ -4435,8 +4274,7 @@ function usePerformanceMonitor$1(config = {}) {
 /**
  * Performance preset - Maximum FPS, reduced quality
  * Best for low-end devices or when battery saving is priority
- */
-const PERFORMANCE_PRESET = {
+ */ const PERFORMANCE_PRESET = {
     distortionOctaves: 2,
     // Minimal FBM layers
     displacementScale: 50,
@@ -4605,7 +4443,7 @@ function getDevicePreset(presetName) {
     var explicit, position;
     /**
  * Extracts layout-related properties from a React `CSSProperties` object.
- */    const {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown, resolvedBorder: resolvedBorder} = useAtomixGlass({
+ */    const {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, resolvedBorder: resolvedBorder} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         wrapperRef: internalWrapperRef,
@@ -4629,14 +4467,7 @@ function getDevicePreset(presetName) {
         withBorder: withBorder,
         debugBorderRadius: debugBorderRadius,
         style: style,
-        isFixedOrSticky: isFixedOrSticky,
-        withTimeAnimation: withTimeAnimation,
-        animationSpeed: animationSpeed,
-        withMultiLayerDistortion: withMultiLayerDistortion,
-        distortionOctaves: distortionOctaves,
-        distortionLacunarity: distortionLacunarity,
-        distortionGain: distortionGain,
-        distortionQuality: distortionQuality
+        isFixedOrSticky: isFixedOrSticky
     });
     useResponsiveGlass({
         baseParams: {
@@ -4874,7 +4705,6 @@ function getDevicePreset(presetName) {
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
             isFixedOrSticky: isFixedOrSticky,
-            shaderTime: getShaderTime(),
             withTimeAnimation: withTimeAnimation,
             animationSpeed: animationSpeed,
             withMultiLayerDistortion: withMultiLayerDistortion,
@@ -5168,40 +4998,15 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
         d: "M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z",
         fill: color
     }) ]
-}), smoothStep = (a, b, t) => {
-    // Add input validation
-    if ("number" != typeof a || "number" != typeof b || "number" != typeof t) return 0;
-    const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
-    return clamped * clamped * (3 - 2 * clamped);
-}, calculateLength = (x, y) => {
-    // Add input validation and error handling
-    if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
-    // Prevent potential overflow
-        const maxX = Math.max(Math.abs(x), Math.abs(y));
-    if (0 === maxX) return 0;
-    const scaledX = x / maxX, scaledY = y / maxX;
-    return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
-}, roundedRectSDF = (x, y, width, height, radius) => {
+}), roundedRectSDF = (x, y, width, height, radius) => {
     // Add input validation
     if ("number" != typeof x || "number" != typeof y || "number" != typeof width || "number" != typeof height || "number" != typeof radius) return 0;
     const qx = Math.abs(x) - width + radius, qy = Math.abs(y) - height + radius;
-    return Math.min(Math.max(qx, qy), 0) + calculateLength(Math.max(qx, 0), Math.max(qy, 0)) - radius;
+    return Math.min(Math.max(qx, qy), 0) + vec2Length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
 }, createTexture = (x, y) => ({
     x: "number" != typeof x || isNaN(x) ? .5 : Math.max(0, Math.min(1, x)),
     y: "number" != typeof y || isNaN(y) ? .5 : Math.max(0, Math.min(1, y))
-}), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), clampValue = (value, min, max) => 
-// Add input validation
-"number" != typeof value || "number" != typeof min || "number" != typeof max || isNaN(value) ? min : isNaN(min) ? 0 : isNaN(max) ? 1 : Math.max(min, Math.min(max, value)), easeInOutCubic = t => {
-    // Add input validation
-    if ("number" != typeof t || isNaN(t)) return 0;
-    const clampedT = Math.max(0, Math.min(1, t));
-    return clampedT < .5 ? 4 * clampedT * clampedT * clampedT : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
-}, easeOutQuart = t => {
-    // Add input validation
-    if ("number" != typeof t || isNaN(t)) return 0;
-    const clampedT = Math.max(0, Math.min(1, t));
-    return 1 - Math.pow(1 - clampedT, 4);
-}, noise2D = (x, y) => {
+}), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), noise2D = (x, y) => {
     // Add input validation
     if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
     const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = easeInOutCubic(xf), v = easeInOutCubic(yf), hash = (i, j) => {
@@ -5240,13 +5045,13 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothStep(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothstepEdge(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
             // Add input validation
             if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y) || isNaN(strength)) return {
                 x: 0,
                 y: 0
             };
-            const distance = calculateLength(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
+            const distance = vec2Length(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
             // Limit distance to prevent extreme values
             return {
                 x: x * (1 + distortion),
@@ -5258,7 +5063,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
                 x: 0,
                 y: 0
             };
-            const distance = calculateLength(x, y);
+            const distance = vec2Length(x, y);
             // Prevent division by zero and extreme values
                         if (0 === distance) return {
                 x: 0,
@@ -5269,8 +5074,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
                 x: Math.cos(angle) * distance * intensity,
                 y: Math.sin(angle) * distance * intensity
             };
-        })(ix, iy, .015 * baseDisplacement), scaled = smoothStep(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
-        return createTexture(clampValue(finalX * scaled + .5, 0, 1), clampValue(finalY * scaled + .5, 0, 1));
+        })(ix, iy, .015 * baseDisplacement), scaled = smoothstepEdge(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
+        return createTexture(clamp(finalX * scaled + .5, 0, 1), clamp(finalY * scaled + .5, 0, 1));
     },
     // Premium Apple-style fluid glass with enhanced organic flow
     appleFluid: (uv, mousePosition) => {
@@ -5278,8 +5083,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothStep(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
-        return createTexture(clampValue(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clampValue(totalY + .5, 0, 1));
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothstepEdge(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
+        return createTexture(clamp(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clamp(totalY + .5, 0, 1));
     },
     // High-end glass with advanced refraction and depth
     premiumGlass: (uv, mousePosition) => {
@@ -5287,7 +5092,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), centerDistance = calculateLength(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), centerDistance = vec2Length(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
         // Multi-layer depth effect
         let depthX = 0, depthY = 0;
         for (let layer = 0; layer < 3; layer++) {
@@ -5295,8 +5100,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             depthX += Math.sin(ix * layerScale + layerTime) * layerStrength, depthY += Math.cos(iy * layerScale - layerTime) * layerStrength;
         }
         // Glass refraction with mouse influence
-                const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothStep(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
-        return createTexture(clampValue(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clampValue(finalY + .5, 0, 1));
+                const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothstepEdge(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
+        return createTexture(clamp(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clamp(finalY + .5, 0, 1));
     },
     // Metallic liquid effect with shimmer
     liquidMetal: (uv, mousePosition) => {
@@ -5304,8 +5109,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = calculateLength(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothStep(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
-        return createTexture(clampValue(totalX + .5, 0, 1), clampValue(totalY + .5, 0, 1));
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = vec2Length(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothstepEdge(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
+        return createTexture(clamp(totalX + .5, 0, 1), clamp(totalY + .5, 0, 1));
     },
     // basiBasi - Expert Premium Glass Shader
     // The most advanced shader with caustics, spectral dispersion, parallax depth, and volumetric effects
@@ -5314,7 +5119,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) => 
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) => 
         // Add input validation
         "number" != typeof x || "number" != typeof y || "number" != typeof time || "number" != typeof intensity || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(intensity) ? .5 : .5 * (Math.sin(8 * x + 2 * time) * Math.cos(8 * y - 2 * time) * .5 + Math.sin(8 * (x + .5) * 1.3 - 2 * time * .8) * Math.cos(8 * (y - .3) * 1.3 + 2 * time * .8) * .3 + Math.sin(8 * (x - .3) * .7 + 2 * time * 1.2) * Math.cos(8 * (y + .4) * .7 - 2 * time * 1.2) * .2 + 1) * intensity)(ix, iy, time, .8), causticDistortion = .02 * (causticIntensity - .5), refractionAngle = Math.atan2(iy, ix), spectralDispersion = ((x, y, angle) => {
             // Add input validation
@@ -5332,7 +5137,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
                     y: 0
                 }
             };
-            const distance = calculateLength(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
+            const distance = vec2Length(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
             return {
                 r: {
                     x: Math.cos(angle) * redOffset,
@@ -5372,8 +5177,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             return turbulence;
         })(6 * ix, 6 * iy, time, 6), turbulenceX = .012 * Math.cos(turbulence * Math.PI * 2), turbulenceY = .012 * Math.sin(turbulence * Math.PI * 2), microSurface = ((x, y, time) => 
         // Add input validation
-        "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = calculateLength(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = calculateLength(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothStep(.92, -.12, distanceToEdge), edgeSoftness = smoothStep(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
-        return createTexture(clampValue(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clampValue(finalY + .5, 0, 1));
+        "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = vec2Length(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = vec2Length(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothstepEdge(.92, -.12, distanceToEdge), edgeSoftness = smoothstepEdge(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
+        return createTexture(clamp(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clamp(finalY + .5, 0, 1));
     },
     // Aliases for compatibility
     plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
@@ -5415,8 +5220,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
                     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);
+                    dx *= smoothstepEdge(0, .2, edgeFactor), dy *= smoothstepEdge(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);
@@ -5426,9 +5231,9 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
                 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] = clamp(255 * r, 0, 255), // Red channel (X displacement)
+                    data[pixelIndex + 1] = clamp(255 * g, 0, 255), // Green channel (Y displacement)
+                    data[pixelIndex + 2] = clamp(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();
@@ -5456,9 +5261,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             return this.canvasDPI;
         }
     },
-    createFBMEngine: createFBMEngine,
-    fragmentShaders: fragmentShaders,
-    liquidGlassWithTime: liquidGlassWithTime
+    fragmentShaders: fragmentShaders
 }, Symbol.toStringTag, {
     value: "Module"
 })), sizeMap = {
@@ -13888,48 +13691,11 @@ const composablesImport =  Object.freeze( Object.defineProperty({
     DeviceDetector: DeviceDetector,
     MOBILE_OPTIMIZED_BREAKPOINTS: MOBILE_OPTIMIZED_BREAKPOINTS,
     PERFORMANCE_PRESET: PERFORMANCE_PRESET,
-    PerformanceOverlay: function({metrics: metrics}) {
-        return null;
-        // Performance overlay removed - will be implemented as separate component
-        }
-    /**
- * Utility to get quality multipliers for glass parameters
- */ ,
     QUALITY_PRESET: QUALITY_PRESET,
     createBreakpoints: createBreakpoints$1,
     getDefaultBreakpoints: getDefaultBreakpoints,
     getDevicePreset: getDevicePreset,
     getMobileOptimizedParams: getMobileOptimizedParams,
-    getQualityMultipliers: function(quality) {
-        switch (quality) {
-          case "low":
-            return {
-                distortionOctaves: 2,
-                displacementScale: .6,
-                blurAmount: .7,
-                animationSpeed: .8,
-                chromaticIntensity: .5
-            };
-
-          case "medium":
-            return {
-                distortionOctaves: 4,
-                displacementScale: .85,
-                blurAmount: .9,
-                animationSpeed: .95,
-                chromaticIntensity: .75
-            };
-
-          case "high":
-            return {
-                distortionOctaves: 5,
-                displacementScale: 1,
-                blurAmount: 1,
-                animationSpeed: 1,
-                chromaticIntensity: 1
-            };
-        }
-    },
     useAccordion: useAccordion,
     useAtomixGlass: useAtomixGlass,
     useBadge: useBadge,