@shohojdhara/atomix 0.3.10 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -109,7 +109,7 @@ export function AtomixGlass({
 }: AtomixGlassProps) {
   const glassRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
-  
+
   // Use composable hook for all state and logic
   const {
     isHovered,
@@ -192,101 +192,132 @@ export function AtomixGlass({
           : Math.max(glassSize.height, 0),
   };
 
-  // Calculate gradient values directly without excessive memoization
-  const mx = mouseOffset.x;
-  const my = mouseOffset.y;
+  // Memoize expensive gradient calculations
+  const gradientValues = useMemo(() => {
+    const mx = mouseOffset.x;
+    const my = mouseOffset.y;
+    const absMx = Math.abs(mx);
+    const absMy = Math.abs(my);
+    const GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
 
-  // Calculate gradient angles and stops
-  const GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
-  const borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER;
-  const borderStop1 = Math.max(
-    GRADIENT.BORDER_STOP_1.MIN,
-    GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER
-  );
-  const borderStop2 = Math.min(
-    GRADIENT.BORDER_STOP_2.MAX,
-    GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER
-  );
-  const borderOpacity1 =
-    GRADIENT.BORDER_OPACITY.BASE_1 +
-    Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW;
-  const borderOpacity2 =
-    GRADIENT.BORDER_OPACITY.BASE_2 +
-    Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH;
-  const borderOpacity3 =
-    GRADIENT.BORDER_OPACITY.BASE_3 +
-    Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW;
-  const borderOpacity4 =
-    GRADIENT.BORDER_OPACITY.BASE_4 +
-    Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH;
+    return {
+      borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
+      borderStop1: Math.max(
+        GRADIENT.BORDER_STOP_1.MIN,
+        GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER
+      ),
+      borderStop2: Math.min(
+        GRADIENT.BORDER_STOP_2.MAX,
+        GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER
+      ),
+      borderOpacities: [
+        GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW,
+        GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH,
+        GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW,
+        GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH,
+      ],
+      hoverPositions: {
+        hover1: {
+          x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
+          y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1,
+        },
+        hover2: {
+          x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
+          y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2,
+        },
+        hover3: {
+          x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+          y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+        },
+      },
+      basePosition: {
+        x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
+        y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER,
+      },
+      mx,
+      my,
+      absMx,
+      absMy,
+    };
+  }, [mouseOffset.x, mouseOffset.y]);
 
-  // Hover gradient positions
-  const hover1X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1;
-  const hover1Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1;
-  const hover2X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2;
-  const hover2Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2;
-  const hover3X = GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3;
-  const hover3Y = GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3;
+  // Memoize opacity calculations
+  const opacityValues = useMemo(() => {
+    const overLightOpacity = overLightConfig.opacity;
+    const BASE_OVER_LIGHT_OPACITY = 0.4;
+    const OVER_OPACITY_MULTIPLIER = 1.1;
 
-  // Base layer positions
-  const baseX = GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER;
-  const baseY = GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER;
+    return {
+      hover1: isHovered || isActive ? 0.5 : 0,
+      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,
+    };
+  }, [isHovered, isActive, isOverLight, overLightConfig.opacity]);
 
-  // Calculate opacity values
-  const overLightOpacity = overLightConfig.opacity;
-  const BASE_OVER_LIGHT_OPACITY = 0.4; // Default opacity value
-  const OVER_OPACITY_MULTIPLIER = 1.1; // Dynamic multiplier for overlay
+  // 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 opacityValues = {
-    hover1: isHovered || isActive ? 0.5 : 0,
-    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,
-  };
+    return {
+      '--atomix-glass-radius': `${effectiveCornerRadius}px`,
+      '--atomix-glass-transform': transformStyle || 'none',
+      '--atomix-glass-position': positionStyles.position,
+      '--atomix-glass-top': positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
+      '--atomix-glass-left': positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
+      '--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-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}%)`
+        : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
+      '--atomix-glass-hover-2-opacity': opacityValues.hover2,
+      '--atomix-glass-hover-2-gradient': isOverLight
+        ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)`
+        : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
+      '--atomix-glass-hover-3-opacity': opacityValues.hover3,
+      '--atomix-glass-hover-3-gradient': isOverLight
+        ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)`
+        : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
+      '--atomix-glass-base-opacity': opacityValues.base,
+      '--atomix-glass-base-gradient': isOverLight
+        ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
+        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+      '--atomix-glass-overlay-opacity': opacityValues.over,
+      '--atomix-glass-overlay-gradient': isOverLight
+        ? `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]);
 
-  // Generate CSS variables for layers
-  const whiteColor = '255, 255, 255'; // Default white RGB
-  const blackColor = '0, 0, 0'; // Default black RGB
-
-  const glassVars = {
-    // Standard CSS custom properties for dynamic values
-    '--atomix-glass-radius': `${effectiveCornerRadius}px`,
-    '--atomix-glass-transform': transformStyle || 'none',
-    '--atomix-glass-position': positionStyles.position,
-    '--atomix-glass-top': positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
-    '--atomix-glass-left': positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
-    '--atomix-glass-width':
-      style.position !== 'fixed' ? adjustedSize.width : `${adjustedSize.width}px`,
-    '--atomix-glass-height':
-      style.position !== 'fixed' ? adjustedSize.height : `${adjustedSize.height}px`,
-    // Border width: Use spacing token for consistency
-    '--atomix-glass-border-width': 'var(--atomix-spacing-0-5, 0.09375rem)',
-    '--atomix-glass-blend-mode': isOverLight ? 'multiply' : 'overlay',
-    // Dynamic gradients and backgrounds
-    '--atomix-glass-border-gradient-1': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacity1}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacity2}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-    '--atomix-glass-border-gradient-2': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacity3}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacity4}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-    '--atomix-glass-hover-1-opacity': opacityValues.hover1,
-    '--atomix-glass-hover-1-gradient': isOverLight
-      ? `radial-gradient(circle at ${hover1X}% ${hover1Y}%, 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}%)`
-      : `radial-gradient(circle at ${hover1X}% ${hover1Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
-    '--atomix-glass-hover-2-opacity': opacityValues.hover2,
-    '--atomix-glass-hover-2-gradient': isOverLight
-      ? `radial-gradient(circle at ${hover2X}% ${hover2Y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)`
-      : `radial-gradient(circle at ${hover2X}% ${hover2Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
-    '--atomix-glass-hover-3-opacity': opacityValues.hover3,
-    '--atomix-glass-hover-3-gradient': isOverLight
-      ? `radial-gradient(circle at ${hover3X}% ${hover3Y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)`
-      : `radial-gradient(circle at ${hover3X}% ${hover3Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
-    '--atomix-glass-base-opacity': opacityValues.base,
-    '--atomix-glass-base-gradient': isOverLight
-      ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + Math.abs(mx) * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
-      : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
-    '--atomix-glass-overlay-opacity': opacityValues.over,
-    '--atomix-glass-overlay-gradient': isOverLight
-      ? `radial-gradient(circle at ${baseX}% ${baseY}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + Math.abs(mx) * 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 + Math.abs(my) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
-      : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
-  } as React.CSSProperties;
+  // 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,
+        isOverLight
+          ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS
+          : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={{
+        ...positionStyles,
+        height: adjustedSize.height,
+        width: adjustedSize.width,
+        borderRadius: `${effectiveCornerRadius}px`,
+        transform: baseStyle.transform,
+      }}
+    />
+  );
 
   return (
     <div
@@ -298,7 +329,7 @@ export function AtomixGlass({
       aria-describedby={ariaDescribedBy}
       aria-disabled={onClick && effectiveDisableEffects ? true : onClick ? false : undefined}
       aria-pressed={onClick && isActive ? true : onClick ? false : undefined}
-      onKeyDown={onClick ? handleKeyDown : undefined}
+      onKeyDown={onClick ? handleKeyDown : undefined} // Dynamic CSS variables cause hydration mismatch due to mouse position calculations
     >
       <AtomixGlassContainer
         ref={glassRef}
@@ -364,42 +395,8 @@ export function AtomixGlass({
 
       {/* Background layers for over-light mode */}
       {/* Static styles (pointer-events, will-change) are in SCSS */}
-      <div
-        className={[
-          ATOMIX_GLASS.BACKGROUND_LAYER_CLASS,
-          ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS,
-          isOverLight
-            ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS
-            : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        style={{
-          ...positionStyles,
-          height: adjustedSize.height,
-          width: adjustedSize.width,
-          borderRadius: `${effectiveCornerRadius}px`,
-          transform: baseStyle.transform,
-        }}
-      />
-      <div
-        className={[
-          ATOMIX_GLASS.BACKGROUND_LAYER_CLASS,
-          ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS,
-          isOverLight
-            ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS
-            : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        style={{
-          ...positionStyles,
-          height: adjustedSize.height,
-          width: adjustedSize.width,
-          borderRadius: `${effectiveCornerRadius}px`,
-          transform: baseStyle.transform,
-        }}
-      />
+      {renderBackgroundLayer('dark')}
+      {renderBackgroundLayer('black')}
       {shouldRenderOverLightLayers && (
         <>
           {/* Base and overlay layers - opacity and background set via CSS variables in SCSS */}

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useId, useRef, useState, useEffect, useMemo } from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import type { DisplacementMode, MousePosition, GlassSize } from '../../lib/types/components';
 import type { FragmentShaderType } from './shader-utils';
@@ -51,11 +51,11 @@ const setCachedShader = (key: string, url: string): void => {
     }
   }
   sharedShaderCache.set(key, { url, timestamp: Date.now() });
-  
+
   // 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: ${sharedShaderCache.size}/${MAX_CACHE_SIZE}`);
+      console.log(`AtomixGlass: Shader cache size: ${String(sharedShaderCache.size).replace(/[\r\n]/g, '')}/${String(MAX_CACHE_SIZE).replace(/[\r\n]/g, '')}`);
     }
   }
 };
@@ -131,26 +131,26 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     ref
   ) => {
     // Generate a stable, deterministic ID for SSR compatibility
-    // React's useId() should produce the same ID on server and client for the same
-    // component position in the tree. We use useState to ensure the ID is only
-    // generated once and remains stable across renders.
-    const baseId = useId();
+    // Use a counter-based approach to avoid hydration mismatches
     const [filterId] = useState(() => {
-      // Normalize the ID to ensure it's valid and consistent
-      // Remove colons (which useId() uses) and ensure it starts with a letter
-      const normalizedId = baseId.replace(/:/g, '-').replace(/^[^a-z]/i, 'atomix-');
-      return `atomix-glass-filter-${normalizedId}`;
+      // Use a simple counter for deterministic IDs
+      if (typeof window === 'undefined') {
+        // Server-side: use a predictable pattern
+        return `atomix-glass-filter-ssr-${Math.random().toString(36).substring(2, 11)}`;
+      }
+      // Client-side: use timestamp + random for uniqueness
+      return `atomix-glass-filter-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
     });
-    
+
     const [shaderMapUrl, setShaderMapUrl] = useState<string>('');
     const shaderGeneratorRef = useRef<any>(null);
     const shaderUtilsRef = useRef<{
       ShaderDisplacementGenerator: any;
       fragmentShaders: any;
     } | null>(null);
-    
+
     // Use shared module-level cache (no per-instance cache needed)
-    const shaderDebounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const shaderDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     // Lazy load shader utilities only when shader mode is needed
     useEffect(() => {
@@ -162,7 +162,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             fragmentShaders: shaderUtils.fragmentShaders,
           };
         }).catch((error) => {
-          console.warn('AtomixGlassContainer: Error loading shader utilities', 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
@@ -176,7 +176,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       if (mode === 'shader' && glassSize && validateGlassSize(glassSize) && shaderUtilsRef.current) {
         // Create cache key from size and variant
         const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`;
-        
+
         // Check shared cache first
         const cachedUrl = getCachedShader(cacheKey);
         if (cachedUrl) {
@@ -206,7 +206,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               height: glassSize.height,
               fragment: selectedShader,
             });
-            
+
             // Use requestIdleCallback if available for non-blocking generation
             const generate = () => {
               const url = shaderGeneratorRef.current?.updateShader() || '';
@@ -435,11 +435,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})`,
+              `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(', ')
             : '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
@@ -511,25 +511,22 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               shaderMapUrl={shaderMapUrl}
             />
             {/* Enhanced Apple Liquid Glass Inner Shadow Layer */}
-
             <div
               className={ATOMIX_GLASS.FILTER_OVERLAY_CLASS}
-              suppressHydrationWarning
               style={{
                 filter: `url(#${filterId})`,
                 backdropFilter: `var(--atomix-glass-container-backdrop)`,
                 borderRadius: `var(--atomix-glass-container-radius)`,
               }}
             />
-
             <div
               className={ATOMIX_GLASS.FILTER_SHADOW_CLASS}
-            style={{
-              boxShadow: `var(--atomix-glass-container-shadow)`,
-              opacity: `var(--atomix-glass-container-shadow-opacity)`,
-              background: `var(--atomix-glass-container-bg)`,
-              borderRadius: `var(--atomix-glass-container-radius)`,
-            }}
+              style={{
+                boxShadow: `var(--atomix-glass-container-shadow)`,
+                opacity: `var(--atomix-glass-container-shadow-opacity)`,
+                background: `var(--atomix-glass-container-bg)`,
+                borderRadius: `var(--atomix-glass-container-radius)`,
+              }}
             />
           </div>
 
@@ -538,7 +535,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             className={ATOMIX_GLASS.CONTENT_CLASS}
             style={{
               position: 'relative',
-              
               textShadow: `var(--atomix-glass-container-text-shadow)`,
               ...(elasticity > 0 ? { zIndex: 100 } : {}),
             }}

package/src/components/AtomixGlass/GlassFilter.tsx

@@ -33,10 +33,14 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
       inset: 0,
     }}
     aria-hidden="true"
-    suppressHydrationWarning
   >
     <defs>
-      <radialGradient id={`${id}-edge-mask`} cx="50%" cy="50%" r="50%">
+      <radialGradient
+        id={`${id}-edge-mask`}
+        cx="50%"
+        cy="50%"
+        r="50%"
+      >
         <stop offset="0%" stopColor="black" stopOpacity="0" />
         <stop
           offset={`${Math.max(30, 80 - aberrationIntensity * 2)}%`}
@@ -45,9 +49,16 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
         />
         <stop offset="100%" stopColor="white" stopOpacity="1" />
       </radialGradient>
-      <filter id={id} x="-35%" y="-35%" width="170%" height="170%" colorInterpolationFilters="sRGB">
+      <filter
+        id={id}
+        x="-35%"
+        y="-35%"
+        width="170%"
+        height="170%"
+        colorInterpolationFilters="sRGB"
+      >
         <feImage
-          id="feimage"
+          id={`${id}-image`}
           x="0"
           y="0"
           width="100%"

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -504,14 +504,12 @@ export const GlassPremium: Story = {
             <Card
               title="Enhanced Visuals"
               text="Premium glass shader provides the most refined appearance."
-              glass
               className="u-mb-3"
             />
 
             <Card
               title="Perfect for Modern Apps"
               text="Ideal for applications requiring sophisticated UI design."
-              glass
               className="u-mb-3"
             />
 
@@ -598,7 +596,7 @@ export const GlassShowcase: Story = {
               <p className="u-mb-4">
                 Classic glass morphism with balanced displacement and blur for general use.
               </p>
-              <Card title="Balanced Design" text="Perfect for everyday applications." glass />
+              <Card title="Balanced Design" text="Perfect for everyday applications." />
             </div>
           </EdgePanel>
 
@@ -630,7 +628,6 @@ export const GlassShowcase: Story = {
               <Card
                 title="Radial Distortion"
                 text="Creates circular displacement patterns."
-                glass
               />
             </div>
           </EdgePanel>
@@ -660,7 +657,7 @@ export const GlassShowcase: Story = {
               <p className="u-mb-4">
                 Stronger displacement and blur for bold, eye-catching interfaces.
               </p>
-              <Card title="Bold Appearance" text="Maximum visual impact and depth." glass />
+              <Card title="Bold Appearance" text="Maximum visual impact and depth." />
             </div>
           </EdgePanel>
 
@@ -693,7 +690,6 @@ export const GlassShowcase: Story = {
               <Card
                 title="Premium Quality"
                 text="Smooth, flowing distortions powered by WebGL shaders."
-                glass
               />
             </div>
           </EdgePanel>
@@ -727,7 +723,6 @@ export const GlassShowcase: Story = {
               <Card
                 title="Elite Design"
                 text="The pinnacle of glass morphism for luxury applications."
-                glass
               />
             </div>
           </EdgePanel>

package/src/components/EdgePanel/EdgePanel.tsx

@@ -127,16 +127,6 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
         {glass ? (
           <AtomixGlass
             {...glassProps}
-            className="c-edge-panel__glass-wrapper"
-            style={{
-              position: 'fixed',
-              width: glassContentRef.current?.offsetWidth,
-              height: glassContentRef.current?.offsetHeight,
-              top: containerRef.current?.offsetTop,
-              left: containerRef.current?.offsetLeft,
-              bottom: containerRef.current?.style.bottom,
-              right: containerRef.current?.style.right,
-            }}
           >
             <div
               ref={glassContentRef}