@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { forwardRef, memo, useMemo, useRef } from 'react';
 import type { AtomixGlassProps } from '../../lib/types/components';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 import { AtomixGlassContainer } from './AtomixGlassContainer';
@@ -7,7 +7,10 @@ import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
 import { useResponsiveGlass } from '../../lib/composables/useResponsiveGlass';
 import { usePerformanceMonitor } from '../../lib/composables/usePerformanceMonitor';
 import { PerformanceDashboard } from './PerformanceDashboard';
-import { getDevicePreset, MOBILE_OPTIMIZED_BREAKPOINTS } from '../../lib/composables/useResponsiveGlass.presets';
+import {
+  getDevicePreset,
+  MOBILE_OPTIMIZED_BREAKPOINTS,
+} from '../../lib/composables/useResponsiveGlass.presets';
 
 /**
  * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
@@ -88,53 +91,83 @@ import { getDevicePreset, MOBILE_OPTIMIZED_BREAKPOINTS } from '../../lib/composa
  *   <div>Mobile-optimized glass effect</div>
  * </AtomixGlass>
  */
-export function AtomixGlass({
-  children,
-  displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
-  blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
-  saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
-  aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
-  elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
-  borderRadius,
-  globalMousePosition: externalGlobalMousePosition,
-  mouseOffset: externalMouseOffset,
-  mouseContainer = null,
-  className = '',
-  padding = ATOMIX_GLASS.DEFAULTS.PADDING,
-  overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT,
-  style = {},
-  mode = ATOMIX_GLASS.DEFAULTS.MODE,
-  onClick,
-  shaderVariant = 'liquidGlass',
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  role,
-  tabIndex,
-  reducedMotion = false,
-  highContrast = false,
-  withoutEffects = false,
-  withLiquidBlur = false,
-  withBorder = true,
-  withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS,
-  debugPerformance = false,
-  debugOverLight = false,
-  height,
-  width,
-  withTimeAnimation = false,
-  animationSpeed = 1.0,
-  withMultiLayerDistortion = false,
-  distortionOctaves = 3,
-  distortionLacunarity = 2.0,
-  distortionGain = 0.5,
-  distortionQuality = 'medium',
-  devicePreset = 'balanced',
-  disableResponsiveBreakpoints = false,
-  ...rest
-}: AtomixGlassProps) {
+
+// ─── Type guard for the dev-only performance flag ────────────────────────────
+declare global {
+  interface Window {
+    enablePerformanceMonitoring?: boolean;
+  }
+}
+
+// Helper to merge refs
+function mergeRefs<T = any>(
+  ...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null)[]
+) {
+  return (node: T) => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+// Internal implementation with forwardRef
+const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function AtomixGlass(
+  {
+    children,
+    displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
+    blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
+    saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
+    aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+    elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
+    borderRadius,
+    globalMousePosition: externalGlobalMousePosition,
+    mouseOffset: externalMouseOffset,
+    mouseContainer = null,
+    className = '',
+    padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+    overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT,
+    style = {},
+    mode = ATOMIX_GLASS.DEFAULTS.MODE,
+    onClick,
+    shaderVariant = 'liquidGlass',
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    role,
+    tabIndex,
+    reducedMotion = false,
+    highContrast = false,
+    withoutEffects = false,
+    withLiquidBlur = false,
+    withBorder = true,
+    withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS,
+    debugPerformance = false,
+    debugOverLight = false,
+    height,
+    width,
+    withTimeAnimation = false,
+    animationSpeed = 1.0,
+    withMultiLayerDistortion = false,
+    distortionOctaves = 3,
+    distortionLacunarity = 2.0,
+    distortionGain = 0.5,
+    distortionQuality = 'medium',
+    devicePreset = 'balanced',
+    disableResponsiveBreakpoints = false,
+    isFixedOrSticky: propsIsFixedOrSticky,
+    ...rest
+  },
+  ref
+) {
   const glassRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const internalWrapperRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useMemo(() => mergeRefs(ref, internalWrapperRef), [ref]);
 
-  // ── Layout hoisting ──────────────────────────────────────────────────
+  // ── Layout hoisting ──────────────────────────────────────────────────────
   // When position is fixed/sticky the layout props must live on the ROOT
   // `.c-atomix-glass` element so that every decorative layer (borders,
   // backgrounds, hover effects) stays in the same stacking context.
@@ -143,7 +176,8 @@ export function AtomixGlass({
   // layers via --atomix-glass-base-z-index.  It must NOT be applied as a
   // real z-index on the root element — that would break the glass effect.
   const { zIndex: customZIndex, ...restStyle } = style;
-  const isFixedOrSticky = restStyle.position === 'fixed' || restStyle.position === 'sticky';
+  const isFixedOrSticky =
+    propsIsFixedOrSticky || restStyle.position === 'fixed' || restStyle.position === 'sticky';
 
   // Use composable hook for all state and logic
   const {
@@ -159,7 +193,6 @@ export function AtomixGlass({
     mouseOffset,
     transformStyle,
     getShaderTime,
-    applyTimeBasedDistortion,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,
@@ -168,6 +201,7 @@ export function AtomixGlass({
   } = useAtomixGlass({
     glassRef,
     contentRef,
+    wrapperRef: internalWrapperRef,
     borderRadius,
     globalMousePosition: externalGlobalMousePosition,
     mouseOffset: externalMouseOffset,
@@ -204,18 +238,15 @@ export function AtomixGlass({
   // Get device preset parameters - memoized to prevent recalculation
   const devicePresetParams = useMemo(() => {
     return getDevicePreset(devicePreset);
-  }, [devicePreset]); // Re-calculate only when devicePreset changes
+  }, [devicePreset]);
 
   // Responsive breakpoint system - automatically adjusts parameters based on viewport
-  const { 
-    responsiveParams, 
-    currentBreakpoint,
-    performanceTier,
-    isActive: isResponsiveActive
-  } = useResponsiveGlass({
+  useResponsiveGlass({
     baseParams: {
       ...devicePresetParams,
-      distortionOctaves: Math.round((displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE) / 25),
+      distortionOctaves: Math.round(
+        (displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE) / 25
+      ),
       displacementScale: displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
       blurAmount: blurAmount || ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
       saturation: saturation || ATOMIX_GLASS.DEFAULTS.SATURATION,
@@ -224,30 +255,24 @@ export function AtomixGlass({
       chromaticIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
     },
     breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
-    enabled: !disableResponsiveBreakpoints && typeof window !== 'undefined', // Enable unless disabled
-    debug: false
+    enabled: !disableResponsiveBreakpoints && typeof window !== 'undefined',
+    debug: false,
   });
 
   // Performance monitoring - tracks FPS, frame time, memory usage
-  const {
-    metrics: performanceMetrics,
-    recommendedQuality,
-    isUnderperforming,
-    setQualityLevel,
-    toggleMonitoring
-  } = usePerformanceMonitor({
-    enabled: false, // We'll toggle manually based on prop
+  const { metrics: performanceMetrics, toggleMonitoring } = usePerformanceMonitor({
+    enabled: debugPerformance, // Enable when debugPerformance is true
     debug: false,
-    showOverlay: false
+    showOverlay: false,
   });
 
-  // Auto-start performance monitoring if enabled (only in development)
+  // Auto-start performance monitoring when debugPerformance is enabled
   React.useEffect(() => {
-    if (process.env.NODE_ENV === 'development' && (window as any)?.enablePerformanceMonitoring) {
+    if (debugPerformance) {
       toggleMonitoring();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Only run once on mount
+  }, [debugPerformance]); // Re-run when debugPerformance changes
 
   const isOverLight = useMemo(() => overLightConfig.isOverLight, [overLightConfig.isOverLight]);
 
@@ -272,14 +297,12 @@ export function AtomixGlass({
       const { position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle } = restStyle;
       return {
         ...visualStyle,
-        ...(!effectiveWithoutEffects && { transform: transformStyle }),
       };
     }
     return {
       ...restStyle,
-      ...(!effectiveWithoutEffects && { transform: transformStyle }),
     };
-  }, [isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle]);
+  }, [isFixedOrSticky, restStyle]);
 
   // Build className with state modifiers
   const componentClassName = [
@@ -299,10 +322,19 @@ export function AtomixGlass({
       position: (isFixedOrSticky
         ? 'absolute'
         : restStyle.position || 'absolute') as React.CSSProperties['position'],
-      top: isFixedOrSticky ? 0 : restStyle.top || 0,
-      left: isFixedOrSticky ? 0 : restStyle.left || 0,
+      top: !isFixedOrSticky ? 0 : (restStyle.top ?? 0),
+      left: !isFixedOrSticky ? 0 : (restStyle.left ?? 0),
+      right: !isFixedOrSticky ? 'auto' : (restStyle.right ?? 'auto'),
+      bottom: !isFixedOrSticky ? 'auto' : (restStyle.bottom ?? 'auto'),
     }),
-    [isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left]
+    [
+      isFixedOrSticky,
+      restStyle.position,
+      restStyle.top,
+      restStyle.left,
+      restStyle.right,
+      restStyle.bottom,
+    ]
   );
 
   const adjustedSize = useMemo(() => {
@@ -311,12 +343,14 @@ export function AtomixGlass({
     const _position = positionStyles.position;
 
     const resolveLength = (value: string | number | undefined, measured: number): string => {
-      if (value !== undefined) {
+      if (value !== undefined && isFixedOrSticky) {
         return typeof value === 'number' ? `${value}px` : value;
       }
-      if (measured > 0) {
+
+      if (measured > 0 && isFixedOrSticky) {
         return `${measured}px`;
       }
+
       return '100%';
     };
 
@@ -335,6 +369,7 @@ export function AtomixGlass({
     positionStyles.position,
     glassSize.width,
     glassSize.height,
+    isFixedOrSticky,
   ]);
 
   // Memoize expensive gradient calculations
@@ -386,9 +421,14 @@ export function AtomixGlass({
     };
   }, [mouseOffset.x, mouseOffset.y]);
 
+  // Clamp overLight opacities to [0,1]
+  const clampedOverLightOpacity = Math.max(0, Math.min(1, overLightConfig?.opacity ?? 0.4));
+  const clampedBorderOpacity = Math.max(0, Math.min(1, overLightConfig?.borderOpacity ?? 1));
+
   // Memoize opacity calculations
   const opacityValues = useMemo(() => {
-    const overLightOpacity = overLightConfig.opacity;
+    // Use clamped opacity value here
+    const overLightOpacity = clampedOverLightOpacity;
     const BASE_OVER_LIGHT_OPACITY = 0.4;
     const OVER_OPACITY_MULTIPLIER = 1.1;
 
@@ -401,7 +441,7 @@ export function AtomixGlass({
         ? (overLightOpacity || BASE_OVER_LIGHT_OPACITY) * OVER_OPACITY_MULTIPLIER
         : 0,
     };
-  }, [isHovered, isActive, isOverLight, overLightConfig.opacity]);
+  }, [isHovered, isActive, isOverLight, clampedOverLightOpacity]);
 
   // Memoize CSS variables object
   const glassVars = useMemo(() => {
@@ -420,22 +460,22 @@ export function AtomixGlass({
       absMy,
     } = gradientValues;
 
-    const configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
-
     return {
       ...(customZIndex !== undefined && { '--atomix-glass-base-z-index': customZIndex }),
       '--atomix-glass-radius': `${effectiveBorderRadius}px`,
       '--atomix-glass-transform': transformStyle || 'none',
-      // Internal decorative layers are positioned relative to the root;
-      '--atomix-glass-position': rootLayoutStyle.position,
-      '--atomix-glass-top': `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
-      '--atomix-glass-left': `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
+      '--atomix-glass-container-position': `${!isFixedOrSticky ? positionStyles.position : rootLayoutStyle.position}`,
+      '--atomix-glass-position': `${!isFixedOrSticky ? positionStyles.position : rootLayoutStyle.position}`,
+      '--atomix-glass-top': `${!isFixedOrSticky ? 0 : (restStyle.top ?? 0)}px`,
+      '--atomix-glass-left': `${!isFixedOrSticky ? 0 : (restStyle.left ?? 0)}px`,
+      '--atomix-glass-right': !isFixedOrSticky ? 'auto' : (restStyle.right ?? 'auto'),
+      '--atomix-glass-bottom': !isFixedOrSticky ? 'auto' : (restStyle.bottom ?? 'auto'),
       '--atomix-glass-width': adjustedSize.width,
       '--atomix-glass-height': adjustedSize.height,
-      '--atomix-glass-border-width': 'var(--atomix-spacing-0-5, 0.09375rem)',
+      '--atomix-glass-border-width': 'var(--atomix-spacing-0-5, 0.125rem)',
       '--atomix-glass-blend-mode': isOverLight ? 'multiply' : 'overlay',
-      '--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-border-gradient-1': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * clampedBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * clampedBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+      '--atomix-glass-border-gradient-2': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * clampedBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * clampedBorderOpacity}) ${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}%)`
@@ -467,13 +507,28 @@ export function AtomixGlass({
     transformStyle,
     adjustedSize,
     isOverLight,
-    overLightConfig.borderOpacity,
+    clampedBorderOpacity,
     customZIndex,
-    rootLayoutStyle,
     isFixedOrSticky,
+    positionStyles.position,
+    rootLayoutStyle.position,
+    restStyle.top,
+    restStyle.left,
+    restStyle.right,
+    restStyle.bottom,
   ]);
 
-  // Helper function to render background layers
+  // ─── Render helpers ──────────────────────────────────────────────────────
+
+  const renderHoverLayers = () => (
+    <>
+      {/* Hover layers - opacity and background set via CSS variables in SCSS */}
+      <div className={ATOMIX_GLASS.HOVER_1_CLASS} />
+      <div className={ATOMIX_GLASS.HOVER_2_CLASS} />
+      <div className={ATOMIX_GLASS.HOVER_3_CLASS} />
+    </>
+  );
+
   const renderBackgroundLayer = (layerType: 'dark' | 'black') => (
     <div
       className={[
@@ -490,9 +545,30 @@ export function AtomixGlass({
     />
   );
 
+  const renderOverLightLayers = () => (
+    <>
+      {/* Base and overlay layers - opacity and background set via CSS variables in SCSS */}
+      <div className={ATOMIX_GLASS.BASE_LAYER_CLASS} />
+      <div className={ATOMIX_GLASS.OVERLAY_LAYER_CLASS} />
+      {/* Overlay highlight - opacity and background are dynamic, calculated inline */}
+      <div className={ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS} />
+    </>
+  );
+
+  const renderBorderElements = () => (
+    <>
+      {/* Border elements - all styles (static and dynamic via CSS variables) are in SCSS */}
+      {/* Position, size, transform, transition, border-radius all use CSS variables set in glassVars */}
+      <span className={ATOMIX_GLASS.BORDER_BACKDROP_CLASS} />
+      <span className={ATOMIX_GLASS.BORDER_1_CLASS} />
+      <span className={ATOMIX_GLASS.BORDER_2_CLASS} />
+    </>
+  );
+
   return (
     <div
       {...rest}
+      ref={mergedRef}
       className={componentClassName}
       style={{ ...glassVars }}
       role={role || (onClick ? 'button' : undefined)}
@@ -500,19 +576,14 @@ export function AtomixGlass({
       aria-label={ariaLabel}
       aria-describedby={ariaDescribedBy}
       aria-disabled={onClick && effectiveWithoutEffects ? true : onClick ? false : undefined}
-      aria-pressed={onClick && isActive ? true : onClick ? false : undefined}
-      onKeyDown={onClick ? handleKeyDown : undefined} // Dynamic CSS variables cause hydration mismatch due to mouse position calculations
+      aria-pressed={undefined}
+      onKeyDown={onClick ? handleKeyDown : undefined}
     >
       <AtomixGlassContainer
         ref={glassRef}
         contentRef={contentRef}
         className={className}
-        style={{
-          ...restStyle,
-          ...(!isFixedOrSticky && {
-            position: 'relative',
-          }),
-        }}
+        style={{ ...restStyle } as React.CSSProperties}
         borderRadius={effectiveBorderRadius}
         displacementScale={
           effectiveWithoutEffects
@@ -561,6 +632,7 @@ export function AtomixGlass({
         effectiveReducedMotion={effectiveReducedMotion}
         shaderVariant={shaderVariant}
         withLiquidBlur={withLiquidBlur}
+        isFixedOrSticky={isFixedOrSticky}
         // Phase 1: Animation System props
         shaderTime={getShaderTime()}
         withTimeAnimation={withTimeAnimation}
@@ -573,40 +645,20 @@ export function AtomixGlass({
       >
         {children}
       </AtomixGlassContainer>
-      {Boolean(onClick) && (
-        <>
-          {/* Hover layers - opacity and background set via CSS variables in SCSS */}
-          <div className={ATOMIX_GLASS.HOVER_1_CLASS} />
-          <div className={ATOMIX_GLASS.HOVER_2_CLASS} />
-          <div className={ATOMIX_GLASS.HOVER_3_CLASS} />
-        </>
-      )}
+
+      {Boolean(onClick) && renderHoverLayers()}
 
       {/* Background layers for over-light mode */}
       {/* Static styles (pointer-events) are in SCSS; will-change is managed via .u-glass-clean-root utility for backdrop-filter stability */}
       {renderBackgroundLayer('dark')}
       {renderBackgroundLayer('black')}
-      {shouldRenderOverLightLayers && (
-        <>
-          {/* Base and overlay layers - opacity and background set via CSS variables in SCSS */}
-          <div className={ATOMIX_GLASS.BASE_LAYER_CLASS} />
-          <div className={ATOMIX_GLASS.OVERLAY_LAYER_CLASS} />
-          {/* Overlay highlight - opacity and background are dynamic, calculated inline */}
-          <div className={ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS} />
-        </>
-      )}
-      {withBorder && (
-        <>
-          {/* Border elements - all styles (static and dynamic via CSS variables) are in SCSS */}
-          {/* Position, size, transform, transition, border-radius all use CSS variables set in glassVars */}
-          <span className={ATOMIX_GLASS.BORDER_1_CLASS} />
-          <span className={ATOMIX_GLASS.BORDER_2_CLASS} />
-        </>
-      )}
-      
+      {shouldRenderOverLightLayers && renderOverLightLayers()}
+
+      {withBorder && renderBorderElements()}
+
       {/* Phase 3: Performance Monitoring Dashboard - Only in development with debugPerformance enabled */}
       {debugPerformance && performanceMetrics && (
-        <PerformanceDashboard 
+        <PerformanceDashboard
           metrics={performanceMetrics}
           isVisible={true}
           onClose={() => {}} // No-op, dashboard always visible when debugPerformance is true
@@ -614,6 +666,14 @@ export function AtomixGlass({
       )}
     </div>
   );
-}
+});
+
+AtomixGlassInner.displayName = 'AtomixGlass';
+
+/**
+ * AtomixGlass - wrapped with React.memo to prevent unnecessary re-renders.
+ * Ref is forwarded to the root `<div>` element.
+ */
+export const AtomixGlass = memo(AtomixGlassInner);
 
 export default AtomixGlass;