@shohojdhara/atomix 0.3.13 → 0.3.15

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Accordion } from './Accordion';
+import React from 'react';
+
+describe('Accordion Component', () => {
+    it('renders correctly with title', () => {
+        render(<Accordion title="Test Accordion">Content</Accordion>);
+        expect(screen.getByText('Test Accordion')).toBeInTheDocument();
+        expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+
+    it('toggles when clicked', () => {
+        const onOpenChange = vi.fn();
+        render(<Accordion title="Test" onOpenChange={onOpenChange}>Content</Accordion>);
+        const button = screen.getByRole('button');
+
+        fireEvent.click(button);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+        expect(button).toHaveAttribute('aria-expanded', 'true');
+
+        fireEvent.click(button);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+        expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('calls legacy onOpen/onClose handlers', () => {
+        const onOpen = vi.fn();
+        const onClose = vi.fn();
+        render(<Accordion title="Test" onOpen={onOpen} onClose={onClose}>Content</Accordion>);
+        const button = screen.getByRole('button');
+
+        fireEvent.click(button);
+        expect(onOpen).toHaveBeenCalled();
+
+        fireEvent.click(button);
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it('handles controlled state', () => {
+        const onOpenChange = vi.fn();
+        const { rerender } = render(<Accordion title="Test" isOpen={false} onOpenChange={onOpenChange}>Content</Accordion>);
+        const button = screen.getByRole('button');
+
+        fireEvent.click(button);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+        expect(button).toHaveAttribute('aria-expanded', 'false'); // Should not change internally
+
+        rerender(<Accordion title="Test" isOpen={true} onOpenChange={onOpenChange}>Content</Accordion>);
+        expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('supports glass effect', () => {
+        const { container } = render(<Accordion title="Test" glass>Content</Accordion>);
+        expect(container.querySelector('.c-accordion--glass')).toBeInTheDocument();
+    });
+});

package/src/components/Accordion/Accordion.tsx

@@ -12,6 +12,8 @@ export const Accordion: React.FC<AccordionProps> = memo(({
   defaultOpen = false,
   isOpen: controlledOpen,
   onOpenChange,
+  onOpen,
+  onClose,
   disabled = false,
   iconPosition = 'right',
   icon,
@@ -39,6 +41,8 @@ export const Accordion: React.FC<AccordionProps> = memo(({
     iconPosition,
     isOpen: controlledOpen,
     onOpenChange,
+    onOpen,
+    onClose,
   });
 
   // Default icon

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -57,7 +57,7 @@ import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
  *
  * @example
  * // OverLight - Object config with custom settings
- * <AtomixGlass 
+ * <AtomixGlass
  *   overLight={{
  *     threshold: 0.8,
  *     opacity: 0.6,
@@ -147,14 +147,16 @@ export function AtomixGlass({
     children,
   });
 
-  // Use consistent overLight state from hook
-  const isOverLight = overLightConfig.isOverLight;
+  // Calculate isOverLight independently from overLightConfig to prevent displacement changes on hover
+  // overLightConfig recalculates with hover/active states, but displacement should remain stable
+  const isOverLight = useMemo(() => overLightConfig?.isOverLight, [overLight]);
+
   const shouldRenderOverLightLayers = enableOverLightLayers && isOverLight;
 
   // Calculate base style with transforms
   const baseStyle = {
     ...style,
-    ...(elasticity !== 0 && !effectiveDisableEffects && {
+    ...(!effectiveDisableEffects && {
       transform: transformStyle,
     }),
   };
@@ -171,26 +173,32 @@ export function AtomixGlass({
     .join(' ');
 
   // Calculate position and size styles
-  const positionStyles = {
-    position: (style.position || 'absolute') as React.CSSProperties['position'],
-    top: style.top || 0,
-    left: style.left || 0,
-  };
+  const positionStyles = useMemo(
+    () => ({
+      position: (style.position || 'absolute') as React.CSSProperties['position'],
+      top: style.top || 0,
+      left: style.left || 0,
+    }),
+    [style.position, style.top, style.left]
+  );
 
-  const adjustedSize = {
-    width:
-      style.position !== 'fixed'
-        ? '100%'
-        : style.width
-          ? style.width
-          : Math.max(glassSize.width, 0),
-    height:
-      style.position !== 'fixed'
-        ? '100%'
-        : style.height
-          ? style.height
-          : Math.max(glassSize.height, 0),
-  };
+  const adjustedSize = useMemo(
+    () => ({
+      width:
+        style.position !== 'fixed'
+          ? '100%'
+          : style.width
+            ? style.width
+            : Math.max(glassSize.width, 0),
+      height:
+        style.position !== 'fixed'
+          ? '100%'
+          : style.height
+            ? style.height
+            : Math.max(glassSize.height, 0),
+    }),
+    [style.position, style.width, style.height, glassSize.width, glassSize.height]
+  );
 
   // Memoize expensive gradient calculations
   const gradientValues = useMemo(() => {
@@ -252,15 +260,30 @@ export function AtomixGlass({
       hover2: isActive ? 0.5 : 0,
       hover3: isHovered ? 0.4 : isActive ? 0.8 : 0,
       base: isOverLight ? overLightOpacity || BASE_OVER_LIGHT_OPACITY : 0,
-      over: isOverLight ? (overLightOpacity || BASE_OVER_LIGHT_OPACITY) * OVER_OPACITY_MULTIPLIER : 0,
+      over: isOverLight
+        ? (overLightOpacity || BASE_OVER_LIGHT_OPACITY) * OVER_OPACITY_MULTIPLIER
+        : 0,
     };
   }, [isHovered, isActive, isOverLight, overLightConfig.opacity]);
 
   // Memoize CSS variables object
   const glassVars = useMemo(() => {
-    const whiteColor = '255, 255, 255';
-    const blackColor = '0, 0, 0';
-    const { borderGradientAngle, borderStop1, borderStop2, borderOpacities, hoverPositions, basePosition, mx, my, absMx, absMy } = gradientValues;
+    const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE;
+    const blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK;
+    const {
+      borderGradientAngle,
+      borderStop1,
+      borderStop2,
+      borderOpacities,
+      hoverPositions,
+      basePosition,
+      mx,
+      my,
+      absMx,
+      absMy,
+    } = gradientValues;
+
+    const configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
 
     return {
       '--atomix-glass-radius': `${effectiveCornerRadius}px`,
@@ -268,12 +291,14 @@ export function AtomixGlass({
       '--atomix-glass-position': positionStyles.position,
       '--atomix-glass-top': positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
       '--atomix-glass-left': positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
-      '--atomix-glass-width': style.position !== 'fixed' ? adjustedSize.width : `${adjustedSize.width}px`,
-      '--atomix-glass-height': style.position !== 'fixed' ? adjustedSize.height : `${adjustedSize.height}px`,
+      '--atomix-glass-width':
+        style.position !== 'fixed' ? adjustedSize.width : `${adjustedSize.width}px`,
+      '--atomix-glass-height':
+        style.position !== 'fixed' ? adjustedSize.height : `${adjustedSize.height}px`,
       '--atomix-glass-border-width': 'var(--atomix-spacing-0-5, 0.09375rem)',
       '--atomix-glass-blend-mode': isOverLight ? 'multiply' : 'overlay',
-      '--atomix-glass-border-gradient-1': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[0]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[1]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-      '--atomix-glass-border-gradient-2': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[2]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[3]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+      '--atomix-glass-border-gradient-1': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+      '--atomix-glass-border-gradient-2': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
       '--atomix-glass-hover-1-opacity': opacityValues.hover1,
       '--atomix-glass-hover-1-gradient': isOverLight
         ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)`
@@ -295,14 +320,26 @@ export function AtomixGlass({
         ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
         : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
     } as React.CSSProperties;
-  }, [gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight]);
+  }, [
+    gradientValues,
+    opacityValues,
+    effectiveCornerRadius,
+    transformStyle,
+    positionStyles,
+    adjustedSize,
+    style.position,
+    isOverLight,
+    overLightConfig.borderOpacity,
+  ]);
 
   // Helper function to render background layers
   const renderBackgroundLayer = (layerType: 'dark' | 'black') => (
     <div
       className={[
         ATOMIX_GLASS.BACKGROUND_LAYER_CLASS,
-        layerType === 'dark' ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS,
+        layerType === 'dark'
+          ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS
+          : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS,
         isOverLight
           ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS
           : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS,
@@ -342,7 +379,7 @@ export function AtomixGlass({
             ? 0
             : mode === 'shader'
               ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT
-              : overLightConfig.isOverLight
+              : isOverLight
                 ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT
                 : displacementScale
         }
@@ -350,7 +387,7 @@ export function AtomixGlass({
         saturation={
           effectiveHighContrast
             ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST
-            : overLightConfig.isOverLight
+            : isOverLight
               ? saturation * overLightConfig.saturationBoost
               : saturation
         }
@@ -369,10 +406,15 @@ export function AtomixGlass({
         onMouseLeave={handleMouseLeave}
         onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}
-        active={isActive}
         isHovered={isHovered}
         isActive={isActive}
-        overLight={overLightConfig.isOverLight}
+        overLight={isOverLight}
+        overLightConfig={{
+          contrast: overLightConfig.contrast,
+          brightness: overLightConfig.brightness,
+          shadowIntensity: overLightConfig.shadowIntensity,
+          borderOpacity: overLightConfig.borderOpacity,
+        }}
         onClick={onClick}
         mode={mode}
         transform={baseStyle.transform}
@@ -407,8 +449,7 @@ export function AtomixGlass({
             className={ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS}
             style={{
               opacity:
-                opacityValues.over *
-                ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
+                opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
               background: `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`,
             }}
           />

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -3,13 +3,7 @@ import type { CSSProperties } from 'react';
 import type { DisplacementMode, MousePosition, GlassSize } from '../../lib/types/components';
 import type { FragmentShaderType } from './shader-utils';
 import { GlassFilter } from './GlassFilter';
-import {
-  calculateElementCenter,
-  calculateDistance,
-  calculateMouseInfluence,
-  clampBlur,
-  validateGlassSize,
-} from './glass-utils';
+import { calculateMouseInfluence, clampBlur, validateGlassSize } from './glass-utils';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 
 const { CONSTANTS } = ATOMIX_GLASS;
@@ -58,7 +52,9 @@ const setCachedShader = (key: string, url: string): void => {
   // Development mode: log cache size
   if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
     if (sharedShaderCache.size >= MAX_CACHE_SIZE * 0.8) {
-      console.log(`AtomixGlass: Shader cache size: ${String(sharedShaderCache.size).replace(/[\r\n]/g, '')}/${String(MAX_CACHE_SIZE).replace(/[\r\n]/g, '')}`);
+      console.log(
+        `AtomixGlass: Shader cache size: ${String(sharedShaderCache.size).replace(/[\r\n]/g, '')}/${String(MAX_CACHE_SIZE).replace(/[\r\n]/g, '')}`
+      );
     }
   }
 };
@@ -76,10 +72,15 @@ interface AtomixGlassContainerProps {
   onMouseEnter?: () => void;
   onMouseDown?: () => void;
   onMouseUp?: () => void;
-  active?: boolean;
   isHovered?: boolean;
   isActive?: boolean;
   overLight?: boolean;
+  overLightConfig?: {
+    contrast?: number;
+    brightness?: number;
+    shadowIntensity?: number;
+    borderOpacity?: number;
+  };
   cornerRadius?: number;
   padding?: string;
   glassSize?: GlassSize;
@@ -115,10 +116,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       onMouseLeave,
       onMouseDown,
       onMouseUp,
-      active = false,
       isHovered = false,
       isActive = false,
       overLight = false,
+      overLightConfig = {},
       cornerRadius = 0,
       padding = '0 0',
       glassSize = { width: 0, height: 0 },
@@ -153,14 +154,19 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     useEffect(() => {
       if (mode === 'shader') {
         // Dynamic import shader utilities
-        import('./shader-utils').then((shaderUtils) => {
-          shaderUtilsRef.current = {
-            ShaderDisplacementGenerator: shaderUtils.ShaderDisplacementGenerator,
-            fragmentShaders: shaderUtils.fragmentShaders,
-          };
-        }).catch((error) => {
-          console.warn('AtomixGlassContainer: Error loading shader utilities', String(error).replace(/[\r\n]/g, ''));
-        });
+        import('./shader-utils')
+          .then(shaderUtils => {
+            shaderUtilsRef.current = {
+              ShaderDisplacementGenerator: shaderUtils.ShaderDisplacementGenerator,
+              fragmentShaders: shaderUtils.fragmentShaders,
+            };
+          })
+          .catch(error => {
+            console.warn(
+              'AtomixGlassContainer: Error loading shader utilities',
+              String(error).replace(/[\r\n]/g, '')
+            );
+          });
       } else {
         // Clear shader utils when not in shader mode to free memory
         shaderUtilsRef.current = null;
@@ -170,7 +176,12 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     // Generate shader map with debouncing and caching
     useEffect(() => {
       // Enhanced validation for shader mode
-      if (mode === 'shader' && glassSize && validateGlassSize(glassSize) && shaderUtilsRef.current) {
+      if (
+        mode === 'shader' &&
+        glassSize &&
+        validateGlassSize(glassSize) &&
+        shaderUtilsRef.current
+      ) {
         // Create cache key from size and variant
         const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`;
 
@@ -262,11 +273,13 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     const EDGE_BLUR_MULTIPLIER = 1.25;
     const CENTER_BLUR_MULTIPLIER = 1.1;
     const FLOW_BLUR_MULTIPLIER = 1.2;
-    const MOUSE_INFLUENCE_BLUR_FACTOR = 0.4;
+    const MOUSE_INFLUENCE_BLUR_FACTOR = 0.15;
     const EDGE_INTENSITY_MULTIPLIER = 1.5;
-    const EDGE_INTENSITY_MOUSE_FACTOR = 0.3;
+    const EDGE_INTENSITY_MOUSE_FACTOR = 0.15;
     const CENTER_INTENSITY_DISTANCE_FACTOR = 0.3;
-    const CENTER_INTENSITY_MOUSE_FACTOR = 0.2;
+    const CENTER_INTENSITY_MOUSE_FACTOR = 0.1;
+    // Maximum blur multiplier relative to base — prevents runaway blur
+    const MAX_BLUR_RELATIVE = 2;
 
     const liquidBlur = useMemo(() => {
       const defaultBlur = {
@@ -280,60 +293,42 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       if (
         !enableLiquidBlur ||
         !rectCache ||
-        !globalMousePosition ||
-        typeof globalMousePosition.x !== 'number' ||
-        typeof globalMousePosition.y !== 'number' ||
-        isNaN(globalMousePosition.x) ||
-        isNaN(globalMousePosition.y)
+        !mouseOffset ||
+        typeof mouseOffset.x !== 'number' ||
+        typeof mouseOffset.y !== 'number' ||
+        isNaN(mouseOffset.x) ||
+        isNaN(mouseOffset.y)
       ) {
         return defaultBlur;
       }
 
       try {
-        // Cache center and distance calculations
-        const center = calculateElementCenter(rectCache);
-        const distance = calculateDistance(globalMousePosition, center);
-        const maxDistance =
-          Math.sqrt(rectCache.width * rectCache.width + rectCache.height * rectCache.height) / 2;
-        const normalizedDistance = Math.min(distance / maxDistance, 1);
         const mouseInfluence = calculateMouseInfluence(mouseOffset);
+        const maxBlur = blurAmount * MAX_BLUR_RELATIVE;
 
-        const baseBlur = blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR;
-        const edgeIntensity = normalizedDistance * EDGE_INTENSITY_MULTIPLIER + mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
-        const edgeBlur = baseBlur * (0.8 + edgeIntensity * 0.6);
-        const centerIntensity = (1 - normalizedDistance) * CENTER_INTENSITY_DISTANCE_FACTOR + mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
-        const centerBlur = baseBlur * (0.3 + centerIntensity * 0.4);
-        const deltaX = globalMousePosition.x - center.x;
-        const deltaY = globalMousePosition.y - center.y;
-        const flowDirection = Math.atan2(deltaY, deltaX);
-        const flowIntensity = Math.sin(flowDirection + mouseInfluence * Math.PI) * 0.5 + 0.5;
-        const flowBlur = baseBlur * (0.4 + flowIntensity * 0.6);
-
-        const hoverMultiplier = isHovered ? 1.2 : 1;
-        const activeMultiplier = isActive ? 1.4 : 1;
-        const stateMultiplier = hoverMultiplier * activeMultiplier;
-
+        const baseBlur = Math.min(
+          maxBlur,
+          blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR
+        );
+        const edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
+        const edgeBlur = Math.min(maxBlur, baseBlur * (0.8 + edgeIntensity * 0.4));
+        const centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
+        const centerBlur = Math.min(maxBlur, baseBlur * (0.3 + centerIntensity * 0.3));
+        const flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
+
+        // NOTE: hover/active multipliers intentionally omitted here —
+        // they belong on opacity layers, not the blur filter itself.
         return {
-          baseBlur: clampBlur(baseBlur * stateMultiplier),
-          edgeBlur: clampBlur(edgeBlur * stateMultiplier),
-          centerBlur: clampBlur(centerBlur * stateMultiplier),
-          flowBlur: clampBlur(flowBlur * stateMultiplier),
+          baseBlur: clampBlur(baseBlur),
+          edgeBlur: clampBlur(edgeBlur),
+          centerBlur: clampBlur(centerBlur),
+          flowBlur: clampBlur(flowBlur),
         };
       } catch (error) {
         console.warn('AtomixGlassContainer: Error calculating liquid blur', error);
         return defaultBlur;
       }
-    }, [
-      enableLiquidBlur,
-      blurAmount,
-      globalMousePosition,
-      mouseOffset,
-      isHovered,
-      isActive,
-      rectCache,
-      style,
-      glassSize,
-    ]);
+    }, [enableLiquidBlur, blurAmount, mouseOffset, rectCache]);
 
     const backdropStyle = useMemo(() => {
       try {
@@ -364,15 +359,18 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         const useMultiPass = enableLiquidBlur && !devicePrefersPerformance && !areaIsLarge;
 
         if (useMultiPass) {
-          const blurLayers = [
-            `blur(${validatedBaseBlur}px)`,
-            `blur(${validatedEdgeBlur}px)`,
-            `blur(${validatedCenterBlur}px)`,
-            `blur(${validatedFlowBlur}px)`,
-          ];
+          // Use a single weighted-average blur instead of stacking multiple
+          // blur() calls. CSS blur() is additive — stacking 4 passes
+          // causes the perceived blur to compound far beyond any single value.
+          const weightedBlur = clampBlur(
+            validatedBaseBlur * 0.4 +
+              validatedEdgeBlur * 0.25 +
+              validatedCenterBlur * 0.15 +
+              validatedFlowBlur * 0.2
+          );
 
           return {
-            backdropFilter: `${blurLayers.join(' ')} saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`,
+            backdropFilter: `blur(${weightedBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`,
           };
         }
 
@@ -387,7 +385,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         );
 
         return {
-          backdropFilter: `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`,
+          backdropFilter: `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`,
         };
       } catch (error) {
         console.warn('AtomixGlassContainer: Error calculating backdrop style', error);
@@ -424,11 +422,11 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           '--atomix-glass-container-backdrop': backdropStyle?.backdropFilter || 'none',
           '--atomix-glass-container-shadow': overLight
             ? [
-              `inset 0 1px 0 rgba(255, 255, 255, ${0.4 + mx * 0.002})`,
-              `inset 0 -1px 0 rgba(0, 0, 0, ${0.2 + Math.abs(my) * 0.001})`,
-              `inset 0 0 20px rgba(0, 0, 0, ${0.08 + Math.abs(mx + my) * 0.001})`,
-              `0 2px 12px rgba(0, 0, 0, ${0.12 + Math.abs(my) * 0.002})`,
-            ].join(', ')
+                `inset 0 1px 0 rgba(255, 255, 255, ${(0.4 + mx * 0.002) * (overLightConfig?.shadowIntensity || 1)})`,
+                `inset 0 -1px 0 rgba(0, 0, 0, ${(0.2 + Math.abs(my) * 0.001) * (overLightConfig?.shadowIntensity || 1)})`,
+                `inset 0 0 20px rgba(0, 0, 0, ${(0.08 + Math.abs(mx + my) * 0.001) * (overLightConfig?.shadowIntensity || 1)})`,
+                `0 2px 12px rgba(0, 0, 0, ${(0.12 + Math.abs(my) * 0.002) * (overLightConfig?.shadowIntensity || 1)})`,
+              ].join(', ')
             : '0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset',
           '--atomix-glass-container-shadow-opacity': effectiveDisableEffects ? 0 : 1,
           // Background and shadow values use design token-aligned RGB values
@@ -464,10 +462,29 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       effectiveDisableEffects,
     ]);
 
+    // Helper to force no transition/animation overrides with !important
+    const setForceNoTransition = (el: HTMLElement | null) => {
+      if (el) {
+        el.style.setProperty('transition-duration', '0s', 'important');
+        el.style.setProperty('animation-duration', '0s', 'important');
+        el.style.setProperty('transition-delay', '0s', 'important');
+      }
+    };
+
     return (
       <div
-        ref={ref}
-        className={`${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${active ? ATOMIX_GLASS.CLASSES.ACTIVE : ''} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ''}`}
+        ref={el => {
+          // Apply force no-transition
+          setForceNoTransition(el);
+
+          // Handle forwarded ref
+          if (typeof ref === 'function') {
+            ref(el);
+          } else if (ref) {
+            (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+          }
+        }}
+        className={`${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${isActive ? ATOMIX_GLASS.CLASSES.ACTIVE : ''} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ''}`}
         style={{ ...style, ...containerVars }}
         onClick={onClick}
       >
@@ -484,7 +501,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           onMouseDown={onMouseDown}
           onMouseUp={onMouseUp}
         >
-          <div className={ATOMIX_GLASS.FILTER_CLASS}>
+          <div
+            className={ATOMIX_GLASS.FILTER_CLASS}
+            style={{ zIndex: 1, position: 'absolute', inset: 0 }}
+          >
             <GlassFilter
               blurAmount={blurAmount}
               mode={mode}
@@ -503,6 +523,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             />
             {/* Enhanced Apple Liquid Glass Inner Shadow Layer */}
             <div
+              ref={setForceNoTransition}
               className={ATOMIX_GLASS.FILTER_OVERLAY_CLASS}
               style={
                 {
@@ -532,7 +553,8 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               {
                 position: 'relative',
                 textShadow: `var(--atomix-glass-container-text-shadow)`,
-                ...(elasticity > 0 ? { zIndex: 100 } : {}),
+                // Ensure content is always above the filter layer (zIndex 1)
+                zIndex: elasticity > 0 ? 100 : 2,
               } as CSSProperties
             }
           >
@@ -544,4 +566,4 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
   }
 );
 
-AtomixGlassContainer.displayName = 'AtomixGlassContainer';
+AtomixGlassContainer.displayName = 'AtomixGlassContainer';