@shohojdhara/atomix 0.6.3 → 0.6.5

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -1,12 +1,19 @@
 import React, { forwardRef, memo, useMemo, useRef } from 'react';
 import type { AtomixGlassProps } from '../../lib/types/components';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
+import { mergeClassNames } from '../../lib/utils/componentUtils';
+import useForkRef from '../../lib/utils/useForkRef';
 import { AtomixGlassContainer } from './AtomixGlassContainer';
+import {
+  buildGlassRootCssVariables,
+  getGlassInternalPositionStyles,
+  isGlassFixedOrSticky,
+  resolveGlassAdjustedSize,
+  resolveGlassContainerEffects,
+} from './glass-utils';
 import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
-// Phase 3: Optimization & Adaptation
 import { useResponsiveGlass } from '../../lib/composables/useResponsiveGlass';
 import { usePerformanceMonitor } from '../../lib/composables/usePerformanceMonitor';
-import { PerformanceDashboard } from './PerformanceDashboard';
 import {
   getDevicePreset,
   MOBILE_OPTIMIZED_BREAKPOINTS,
@@ -35,6 +42,10 @@ import {
  * - Implements focus-ring mixin for accessibility
  * - Supports reduced motion and high contrast preferences
  *
+ * Style architecture:
+ * - Root (`.c-atomix-glass`): CSS custom properties for layer geometry and motion.
+ * - Container (`.c-atomix-glass__container`): layout, z-index, and backdrop-filter.
+ *
  * @example
  * // Basic usage with dynamic border-radius extraction
  * <AtomixGlass>
@@ -92,29 +103,7 @@ import {
  * </AtomixGlass>
  */
 
-// ─── 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
+/** Internal implementation; ref is forwarded to the root wrapper element. */
 const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function AtomixGlass(
   {
     children,
@@ -128,7 +117,7 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
     mouseOffset: externalMouseOffset,
     mouseContainer = null,
     className = '',
-    padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+
     overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT,
     style = {},
     mode = ATOMIX_GLASS.DEFAULTS.MODE,
@@ -142,7 +131,9 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
     highContrast = false,
     withoutEffects = false,
     withLiquidBlur = false,
+    border,
     withBorder = true,
+    debugBorderRadius = false,
     withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS,
     debugPerformance = false,
     debugOverLight = false,
@@ -165,21 +156,18 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
   const glassRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const internalWrapperRef = useRef<HTMLDivElement>(null);
-  const mergedRef = useMemo(() => mergeRefs(ref, internalWrapperRef), [ref]);
-
-  // ── 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.
-
-  // Extract zIndex from style so it becomes the base for ALL internal
-  // 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 mergedRef = useForkRef(ref, internalWrapperRef);
+
+  /**
+   * Style partitioning for backdrop-filter compatibility.
+   * - Root (`.c-atomix-glass`): CSS custom properties only (`glassVars`).
+   * - Container (`.c-atomix-glass__container`): layout, stacking, and visual styles.
+   * Backdrop sampling occurs on `__filter-overlay` inside the container; layout
+   * properties must not be applied to the root or the effect will not render correctly.
+   */
   const { zIndex: customZIndex, ...restStyle } = style;
-  const isFixedOrSticky =
-    propsIsFixedOrSticky || restStyle.position === 'fixed' || restStyle.position === 'sticky';
+  const isFixedOrSticky = isGlassFixedOrSticky(propsIsFixedOrSticky, restStyle.position);
 
-  // Use composable hook for all state and logic
   const {
     isHovered,
     isActive,
@@ -198,6 +186,7 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
     handleMouseDown,
     handleMouseUp,
     handleKeyDown,
+    resolvedBorder,
   } = useAtomixGlass({
     glassRef,
     contentRef,
@@ -218,10 +207,12 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
     blurAmount,
     saturation,
     withLiquidBlur,
-    padding,
+    border,
+    withBorder,
+    debugBorderRadius,
+
     style,
     isFixedOrSticky,
-    // Phase 1: Animation System props
     withTimeAnimation,
     animationSpeed,
     withMultiLayerDistortion,
@@ -231,16 +222,11 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
     distortionQuality,
   });
 
-  // ============================================================================
-  // Phase 3: Optimization & Adaptation Systems
-  // ============================================================================
 
-  // Get device preset parameters - memoized to prevent recalculation
   const devicePresetParams = useMemo(() => {
     return getDevicePreset(devicePreset);
   }, [devicePreset]);
 
-  // Responsive breakpoint system - automatically adjusts parameters based on viewport
   useResponsiveGlass({
     baseParams: {
       ...devicePresetParams,
@@ -259,309 +245,142 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
     debug: false,
   });
 
-  // Performance monitoring - tracks FPS, frame time, memory usage
-  const { metrics: performanceMetrics, toggleMonitoring } = usePerformanceMonitor({
-    enabled: debugPerformance, // Enable when debugPerformance is true
+  usePerformanceMonitor({
+    enabled: debugPerformance,
     debug: false,
     showOverlay: false,
   });
 
-  // Auto-start performance monitoring when debugPerformance is enabled
-  React.useEffect(() => {
-    if (debugPerformance) {
-      toggleMonitoring();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debugPerformance]); // Re-run when debugPerformance changes
-
   const isOverLight = useMemo(() => overLightConfig.isOverLight, [overLightConfig.isOverLight]);
 
   const shouldRenderOverLightLayers = withOverLightLayers && isOverLight;
 
-  const rootLayoutStyle = useMemo<React.CSSProperties>(() => {
-    if (!isFixedOrSticky) return {};
-    const { position: p, top: t, left: l, right: r, bottom: b } = restStyle;
-    return {
-      ...(p && { position: p }),
-      ...(t !== undefined && { top: t }),
-      ...(l !== undefined && { left: l }),
-      ...(r !== undefined && { right: r }),
-      ...(b !== undefined && { bottom: b }),
-    };
-  }, [isFixedOrSticky, restStyle]);
-
-  // Calculate base style with transforms
-  // When layout is hoisted to the root, strip those props from the container
-  const baseStyle = useMemo(() => {
-    if (isFixedOrSticky) {
-      const { position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle } = restStyle;
-      return {
-        ...visualStyle,
-      };
-    }
-    return {
+  const containerStyle = useMemo(
+    () => ({
       ...restStyle,
-    };
-  }, [isFixedOrSticky, restStyle]);
+      ...(customZIndex !== undefined && { zIndex: customZIndex }),
+    }),
+    [restStyle, customZIndex]
+  );
 
-  // Build className with state modifiers
-  const componentClassName = [
+  const componentClassName = mergeClassNames(
     ATOMIX_GLASS.BASE_CLASS,
     effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`,
     effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`,
     effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
+    className
+  );
 
-  // Calculate position and size styles for internal layers
-  // When root is fixed/sticky, internal layers use absolute (relative to root)
   const positionStyles = useMemo(
-    () => ({
-      position: (isFixedOrSticky
-        ? 'absolute'
-        : restStyle.position || 'absolute') as React.CSSProperties['position'],
-      top: !isFixedOrSticky ? 0 : (restStyle.top ?? 0),
-      left: !isFixedOrSticky ? 0 : (restStyle.left ?? 0),
-      right: !isFixedOrSticky ? 'auto' : (restStyle.right ?? 'auto'),
-      bottom: !isFixedOrSticky ? 'auto' : (restStyle.bottom ?? 'auto'),
-    }),
+    () => getGlassInternalPositionStyles(isFixedOrSticky, restStyle),
+    [isFixedOrSticky, restStyle]
+  );
+
+  const adjustedSize = useMemo(
+    () =>
+      resolveGlassAdjustedSize({
+        width,
+        height,
+        restStyle,
+        glassSize,
+        isFixedOrSticky,
+      }),
+    [width, height, restStyle, glassSize, isFixedOrSticky]
+  );
+
+  const glassVars = useMemo(
+    () =>
+      buildGlassRootCssVariables({
+        effectiveBorderRadius,
+        transformStyle,
+        adjustedSize,
+        isOverLight,
+        customZIndex,
+        isFixedOrSticky,
+        positionStyles,
+        restStyle,
+        borderWidth: resolvedBorder.width,
+      }),
     [
+      effectiveBorderRadius,
+      transformStyle,
+      adjustedSize,
+      isOverLight,
+      customZIndex,
       isFixedOrSticky,
-      restStyle.position,
-      restStyle.top,
-      restStyle.left,
-      restStyle.right,
-      restStyle.bottom,
+      positionStyles,
+      restStyle,
+      resolvedBorder.width,
     ]
   );
 
-  const adjustedSize = useMemo(() => {
-    // Keep a reference to positionStyles to avoid unused-variable lint,
-    // but sizing is driven by explicit width/height or measured size.
-    const _position = positionStyles.position;
-
-    const resolveLength = (value: string | number | undefined, measured: number): string => {
-      if (value !== undefined && isFixedOrSticky) {
-        return typeof value === 'number' ? `${value}px` : value;
-      }
-
-      if (measured > 0 && isFixedOrSticky) {
-        return `${measured}px`;
-      }
-
-      return '100%';
-    };
-
-    const effectiveWidth = width ?? restStyle.width;
-    const effectiveHeight = height ?? restStyle.height;
-
-    return {
-      width: resolveLength(effectiveWidth, glassSize.width),
-      height: resolveLength(effectiveHeight, glassSize.height),
-    };
-  }, [
-    width,
-    height,
-    restStyle.width,
-    restStyle.height,
-    positionStyles.position,
-    glassSize.width,
-    glassSize.height,
-    isFixedOrSticky,
-  ]);
-
-  // 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;
-
-    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]);
-
-  // 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(() => {
-    // Use clamped opacity value here
-    const overLightOpacity = clampedOverLightOpacity;
-    const BASE_OVER_LIGHT_OPACITY = 0.4;
-    const OVER_OPACITY_MULTIPLIER = 1.1;
-
-    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, clampedOverLightOpacity]);
-
-  // Memoize CSS variables object
-  const glassVars = useMemo(() => {
-    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;
-
-    return {
-      ...(customZIndex !== undefined && { '--atomix-glass-base-z-index': customZIndex }),
-      '--atomix-glass-radius': `${effectiveBorderRadius}px`,
-      '--atomix-glass-transform': transformStyle || 'none',
-      '--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.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) * 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}%)`
-        : `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})`,
-      '--atomix-glass-overlay-highlight-opacity':
-        opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
-      '--atomix-glass-overlay-highlight-bg': `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}%)`,
-    } as React.CSSProperties;
-  }, [
-    gradientValues,
-    opacityValues,
-    effectiveBorderRadius,
-    transformStyle,
-    adjustedSize,
-    isOverLight,
-    clampedBorderOpacity,
-    customZIndex,
-    isFixedOrSticky,
-    positionStyles.position,
-    rootLayoutStyle.position,
-    restStyle.top,
-    restStyle.left,
-    restStyle.right,
-    restStyle.bottom,
-  ]);
-
-  // ─── Render helpers ──────────────────────────────────────────────────────
+  const containerEffects = useMemo(
+    () =>
+      resolveGlassContainerEffects({
+        displacementScale,
+        blurAmount,
+        saturation,
+        aberrationIntensity,
+        mode,
+        effectiveWithoutEffects,
+        effectiveHighContrast,
+        isOverLight,
+        saturationBoost: overLightConfig.saturationBoost,
+        mouseOffset,
+        globalMousePosition,
+      }),
+    [
+      displacementScale,
+      blurAmount,
+      saturation,
+      aberrationIntensity,
+      mode,
+      effectiveWithoutEffects,
+      effectiveHighContrast,
+      isOverLight,
+      overLightConfig.saturationBoost,
+      mouseOffset,
+      globalMousePosition,
+    ]
+  );
 
   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} />
+      <div aria-hidden="true" className={ATOMIX_GLASS.HOVER_1_CLASS} />
+      <div aria-hidden="true" className={ATOMIX_GLASS.HOVER_2_CLASS} />
+      <div aria-hidden="true" className={ATOMIX_GLASS.HOVER_3_CLASS} />
     </>
   );
 
-  const renderBackgroundLayer = (layerType: 'dark' | 'black') => (
+  const backgroundLayerTypes = ['dark', 'black'] as const;
+  const renderBackgroundLayer = (layerType: (typeof backgroundLayerTypes)[number]) => (
     <div
-      className={[
+      aria-hidden="true"
+      className={mergeClassNames(
         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(' ')}
+          : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS
+      )}
     />
   );
 
   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} />
+      <div aria-hidden="true" className={ATOMIX_GLASS.BASE_LAYER_CLASS} />
+      <div aria-hidden="true" className={ATOMIX_GLASS.OVERLAY_LAYER_CLASS} />
+      <div aria-hidden="true" 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} />
+      <span aria-hidden="true" className={ATOMIX_GLASS.BORDER_BACKDROP_CLASS} />
+      <span aria-hidden="true" className={ATOMIX_GLASS.BORDER_1_CLASS} />
+      <span aria-hidden="true" className={ATOMIX_GLASS.BORDER_2_CLASS} />
     </>
   );
 
@@ -570,54 +389,31 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
       {...rest}
       ref={mergedRef}
       className={componentClassName}
-      style={{ ...glassVars }}
+      style={glassVars}
       role={role || (onClick ? 'button' : undefined)}
       tabIndex={onClick ? (tabIndex ?? 0) : tabIndex}
       aria-label={ariaLabel}
       aria-describedby={ariaDescribedBy}
       aria-disabled={onClick && effectiveWithoutEffects ? true : onClick ? false : undefined}
-      aria-pressed={onClick ? isActive : undefined}
       onKeyDown={onClick ? handleKeyDown : undefined}
     >
       <AtomixGlassContainer
         ref={glassRef}
         contentRef={contentRef}
         className={className}
-        style={{ ...restStyle } as React.CSSProperties}
+        style={containerStyle as React.CSSProperties}
         borderRadius={effectiveBorderRadius}
-        displacementScale={
-          effectiveWithoutEffects
-            ? 0
-            : mode === 'shader'
-              ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT
-              : isOverLight
-                ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT
-                : displacementScale
-        }
-        blurAmount={effectiveWithoutEffects ? 0 : blurAmount}
-        saturation={
-          effectiveHighContrast
-            ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST
-            : isOverLight
-              ? saturation * overLightConfig.saturationBoost
-              : saturation
-        }
-        aberrationIntensity={
-          effectiveWithoutEffects
-            ? 0
-            : mode === 'shader'
-              ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION
-              : aberrationIntensity
-        }
+        displacementScale={containerEffects.displacementScale}
+        blurAmount={containerEffects.blurAmount}
+        saturation={containerEffects.saturation}
+        aberrationIntensity={containerEffects.aberrationIntensity}
         glassSize={glassSize}
-        padding={padding}
-        mouseOffset={effectiveWithoutEffects ? { x: 0, y: 0 } : mouseOffset}
-        globalMousePosition={effectiveWithoutEffects ? { x: 0, y: 0 } : globalMousePosition}
+        mouseOffset={containerEffects.mouseOffset}
+        globalMousePosition={containerEffects.globalMousePosition}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}
-        isHovered={isHovered}
         isActive={isActive}
         overLight={isOverLight}
         overLightConfig={{
@@ -633,7 +429,6 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
         shaderVariant={shaderVariant}
         withLiquidBlur={withLiquidBlur}
         isFixedOrSticky={isFixedOrSticky}
-        // Phase 1: Animation System props
         shaderTime={getShaderTime()}
         withTimeAnimation={withTimeAnimation}
         animationSpeed={animationSpeed}
@@ -648,32 +443,19 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
 
       {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')}
+      {backgroundLayerTypes.map(layerType => (
+        <React.Fragment key={layerType}>{renderBackgroundLayer(layerType)}</React.Fragment>
+      ))}
       {shouldRenderOverLightLayers && renderOverLightLayers()}
 
-      {withBorder && renderBorderElements()}
-
-      {/* Phase 3: Performance Monitoring Dashboard - Only in development with debugPerformance enabled */}
-      {debugPerformance && performanceMetrics && (
-        <PerformanceDashboard
-          metrics={performanceMetrics}
-          isVisible={true}
-          onClose={() => {}} // No-op, dashboard always visible when debugPerformance is true
-        />
-      )}
+      {resolvedBorder.enabled && renderBorderElements()}
     </div>
   );
 });
 
 AtomixGlassInner.displayName = 'AtomixGlass';
 
-/**
- * AtomixGlass - wrapped with React.memo to prevent unnecessary re-renders.
- * Ref is forwarded to the root `<div>` element.
- */
+/** Memoized public export. Ref targets the root `.c-atomix-glass` wrapper. */
 export const AtomixGlass = memo(AtomixGlassInner);
 
 export default AtomixGlass;