@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/lib/composables/useAtomixGlass.ts

@@ -1,71 +1,888 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-export interface UseAtomixGlassOptions {
-  size?: 'sm' | 'md' | 'lg';
-  mode?: 'standard' | 'polar' | 'prominent' | 'shader';
-  overLight?: boolean;
-  clickable?: boolean;
-  active?: boolean;
-  className?: string;
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type {
+  AtomixGlassProps,
+  DisplacementMode,
+  GlassSize,
+  MousePosition,
+  OverLightConfig,
+  OverLightObjectConfig,
+} from '../types/components';
+import { ATOMIX_GLASS } from '../constants/components';
+import {
+  calculateDistance,
+  calculateElementCenter,
+  calculateMouseInfluence,
+  extractBorderRadiusFromChildren,
+  extractBorderRadiusFromDOMElement,
+  validateGlassSize,
+} from '../../components/AtomixGlass/glass-utils';
+
+const { CONSTANTS } = ATOMIX_GLASS;
+
+interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
+  glassRef: React.RefObject<HTMLDivElement>;
+  contentRef: React.RefObject<HTMLDivElement>;
+  children?: React.ReactNode;
 }
 
-export interface UseAtomixGlassReturn {
-  generateGlassClass: (options: UseAtomixGlassOptions) => string;
-  generateElementClass: (element: string, modifier?: string) => string;
+interface UseAtomixGlassReturn {
+  // State
+  isHovered: boolean;
+  isActive: boolean;
+  glassSize: GlassSize;
+  dynamicCornerRadius: number;
+  effectiveCornerRadius: number;
+  effectiveReducedMotion: boolean;
+  effectiveHighContrast: boolean;
+  effectiveDisableEffects: boolean;
+  detectedOverLight: boolean;
+  globalMousePosition: MousePosition;
+  mouseOffset: MousePosition;
+  
+  // OverLight config
+  overLightConfig: {
+    isOverLight: boolean;
+    threshold: number;
+    opacity: number;
+    contrast: number;
+    brightness: number;
+    saturationBoost: number;
+    shadowIntensity: number;
+    borderOpacity: number;
+  };
+  
+  // Transform calculations
+  elasticTranslation: { x: number; y: number };
+  directionalScale: string;
+  transformStyle: string;
+  
+  // Event handlers
+  handleMouseEnter: () => void;
+  handleMouseLeave: () => void;
+  handleMouseDown: () => void;
+  handleMouseUp: () => void;
+  handleMouseMove: (e: MouseEvent) => void;
+  handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 /**
- * Hook for generating AtomixGlass CSS classes following BEM methodology
+ * Composable hook for AtomixGlass component logic
+ * Manages all state, calculations, and event handlers
  */
-export function useAtomixGlass(): UseAtomixGlassReturn {
-  // Generate CSS class for the main glass component
-  const generateGlassClass = useCallback((options: UseAtomixGlassOptions) => {
-    const classes = ['c-atomix-glass'];
+export function useAtomixGlass({
+  glassRef,
+  contentRef,
+  cornerRadius,
+  globalMousePosition: externalGlobalMousePosition,
+  mouseOffset: externalMouseOffset,
+  mouseContainer,
+  overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT,
+  reducedMotion = false,
+  highContrast = false,
+  disableEffects = false,
+  elasticity = 0.05,
+  onClick,
+  debugCornerRadius = false,
+  debugOverLight = false,
+  enablePerformanceMonitoring = false,
+  children,
+}: UseAtomixGlassOptions): UseAtomixGlassReturn {
+  // State
+  const [isHovered, setIsHovered] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+  const [glassSize, setGlassSize] = useState<GlassSize>({ width: 270, height: 69 });
+  const [internalGlobalMousePosition, setInternalGlobalMousePosition] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+  });
+  const [internalMouseOffset, setInternalMouseOffset] = useState<MousePosition>({ x: 0, y: 0 });
+  const [dynamicCornerRadius, setDynamicCornerRadius] = useState<number>(
+    CONSTANTS.DEFAULT_CORNER_RADIUS
+  );
+  const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(false);
+  const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
+  const [detectedOverLight, setDetectedOverLight] = useState(false);
 
-    // Add size modifier
-    if (options.size && options.size !== 'md') {
-      classes.push(`c-atomix-glass--${options.size}`);
+  // Memoized derived values
+  const effectiveCornerRadius = useMemo(() => {
+    if (cornerRadius !== undefined) {
+      const result = Math.max(0, cornerRadius);
+      if (debugCornerRadius) {
+        console.log('[AtomixGlass] Using manual cornerRadius prop:', result);
+      }
+      return result;
     }
 
-    // Add mode modifier
-    if (options.mode && options.mode !== 'standard') {
-      classes.push(`c-atomix-glass--${options.mode}`);
+    const result = Math.max(0, dynamicCornerRadius);
+    if (debugCornerRadius) {
+      console.log('[AtomixGlass] Using dynamic cornerRadius:', result);
     }
+    return result;
+  }, [cornerRadius, dynamicCornerRadius, debugCornerRadius]);
+
+  const effectiveReducedMotion = useMemo(
+    () => reducedMotion || userPrefersReducedMotion,
+    [reducedMotion, userPrefersReducedMotion]
+  );
+
+  const effectiveHighContrast = useMemo(
+    () => highContrast || userPrefersHighContrast,
+    [highContrast, userPrefersHighContrast]
+  );
+
+  const effectiveDisableEffects = useMemo(
+    () => disableEffects || effectiveReducedMotion,
+    [disableEffects, effectiveReducedMotion]
+  );
+
+  const globalMousePosition = useMemo(
+    () => externalGlobalMousePosition || internalGlobalMousePosition,
+    [externalGlobalMousePosition, internalGlobalMousePosition]
+  );
+
+  const mouseOffset = useMemo(
+    () => externalMouseOffset || internalMouseOffset,
+    [externalMouseOffset, internalMouseOffset]
+  );
+
+  // Extract border-radius from children
+  useEffect(() => {
+    const extractRadius = () => {
+      try {
+        let extractedRadius: number | null = null;
+        let extractionSource = 'default';
+
+        if (contentRef.current) {
+          const firstChild = contentRef.current.firstElementChild as HTMLElement;
+          if (firstChild) {
+            const domRadius = extractBorderRadiusFromDOMElement(firstChild);
+            if (domRadius !== null && domRadius > 0) {
+              extractedRadius = domRadius;
+              extractionSource = 'DOM element';
+            }
+          }
+        }
+
+        if (extractedRadius === null) {
+          const childRadius = extractBorderRadiusFromChildren(children);
+          if (childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS) {
+            extractedRadius = childRadius;
+            extractionSource = 'React children';
+          }
+        }
+
+        if (extractedRadius !== null && extractedRadius > 0) {
+          setDynamicCornerRadius(extractedRadius);
+
+          if (debugCornerRadius) {
+            console.log('[AtomixGlass] Corner radius extracted:', {
+              value: extractedRadius,
+              source: extractionSource,
+              timestamp: new Date().toISOString(),
+            });
+          }
+        } else if (debugCornerRadius) {
+          console.log(
+            '[AtomixGlass] No corner radius found, using default:',
+            CONSTANTS.DEFAULT_CORNER_RADIUS
+          );
+        }
+      } catch (error) {
+        if (debugCornerRadius) {
+          console.error('[AtomixGlass] Error extracting corner radius:', error);
+        }
+      }
+    };
 
-    // Add state modifiers
-    if (options.clickable) {
-      classes.push('c-atomix-glass--clickable');
+    extractRadius();
+    const timeoutId = setTimeout(extractRadius, 100);
+    return () => clearTimeout(timeoutId);
+  }, [children, debugCornerRadius, contentRef]);
+
+  // Media query handlers and background detection
+  useEffect(() => {
+    // Only run auto-detection for 'auto' mode or object config (which uses auto-detection)
+    const shouldDetect = (overLight === 'auto' || (typeof overLight === 'object' && overLight !== null));
+    
+    if (shouldDetect && glassRef.current) {
+      const timeoutId = setTimeout(() => {
+        try {
+          const element = glassRef.current;
+          if (!element) {
+            setDetectedOverLight(false);
+            return;
+          }
+          
+          // Validate window context
+          if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
+            setDetectedOverLight(false);
+            return;
+          }
+          
+          let totalLuminance = 0;
+          let validSamples = 0;
+          let hasValidBackground = false;
+
+          let currentElement = element.parentElement;
+          let depth = 0;
+          const maxDepth = 20;
+          const maxSamples = 10;
+          
+          // Limit traversal depth to prevent infinite loops and performance issues
+          while (currentElement && validSamples < maxSamples && depth < maxDepth) {
+            try {
+              const computedStyle = window.getComputedStyle(currentElement);
+              if (!computedStyle) {
+                currentElement = currentElement.parentElement;
+                depth++;
+                continue;
+              }
+              
+              const bgColor = computedStyle.backgroundColor;
+              const bgImage = computedStyle.backgroundImage;
+
+              // Check for solid color backgrounds
+              if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' && bgColor !== 'initial' && bgColor !== 'none') {
+                const rgb = bgColor.match(/\d+/g);
+                if (rgb && rgb.length >= 3) {
+                  const r = Number(rgb[0]);
+                  const g = Number(rgb[1]);
+                  const b = Number(rgb[2]);
+                  
+                  // Validate RGB values are valid numbers
+                  if (!isNaN(r) && !isNaN(g) && !isNaN(b) && 
+                      isFinite(r) && isFinite(g) && isFinite(b) &&
+                      r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
+                    // Only consider if it's not pure black or very dark
+                    if (r > 10 || g > 10 || b > 10) {
+                      const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+                      if (!isNaN(luminance) && isFinite(luminance)) {
+                        totalLuminance += luminance;
+                        validSamples++;
+                        hasValidBackground = true;
+                      }
+                    }
+                  }
+                }
+              }
+              
+              // Check for image backgrounds
+              if (bgImage && bgImage !== 'none' && bgImage !== 'initial') {
+                // For image backgrounds, assume medium luminance
+                totalLuminance += 0.5;
+                validSamples++;
+                hasValidBackground = true;
+              }
+            } catch (styleError) {
+              // Silently continue if getting computed style fails for this element
+              if (process.env.NODE_ENV === 'development') {
+                console.debug('AtomixGlass: Error getting computed style for element:', styleError);
+              }
+            }
+            
+            // Move to parent element for next iteration
+            if (currentElement) {
+              currentElement = currentElement.parentElement;
+              depth++;
+            } else {
+              break; // Exit loop if currentElement becomes null
+            }
+          }
+
+          // More conservative detection with better error handling
+          if (hasValidBackground && validSamples > 0) {
+            const avgLuminance = totalLuminance / validSamples;
+            if (!isNaN(avgLuminance) && isFinite(avgLuminance)) {
+              let threshold = 0.7; // Conservative threshold for overlight
+              
+              // If overLight is an object, use its threshold property with validation
+              if (typeof overLight === 'object' && overLight !== null) {
+                const objConfig = overLight as OverLightObjectConfig;
+                if (objConfig.threshold !== undefined) {
+                  const configThreshold = typeof objConfig.threshold === 'number' && 
+                                         !isNaN(objConfig.threshold) && 
+                                         isFinite(objConfig.threshold)
+                                         ? objConfig.threshold 
+                                         : 0.7;
+                  threshold = Math.min(0.9, Math.max(0.1, configThreshold));
+                }
+              }
+              
+              const isOverLightDetected = avgLuminance > threshold;
+              setDetectedOverLight(isOverLightDetected);
+              
+              // Debug logging
+              if (debugOverLight) {
+                console.log('[AtomixGlass] OverLight Detection:', {
+                  avgLuminance: avgLuminance.toFixed(3),
+                  threshold: threshold.toFixed(3),
+                  detected: isOverLightDetected,
+                  validSamples,
+                  totalLuminance: totalLuminance.toFixed(3),
+                  configType: typeof overLight === 'object' ? 'object' : typeof overLight,
+                  timestamp: new Date().toISOString(),
+                });
+              }
+            } else {
+              // Invalid luminance calculation, default to false
+              setDetectedOverLight(false);
+            }
+          } else {
+            // Default to false if no valid background found
+            setDetectedOverLight(false);
+          }
+        } catch (error) {
+          // Enhanced error logging with context
+          if (process.env.NODE_ENV === 'development') {
+            console.warn('AtomixGlass: Error detecting background brightness:', error);
+          }
+          setDetectedOverLight(false);
+        }
+      }, 150);
+      
+      return () => clearTimeout(timeoutId);
+    } else if (typeof overLight === 'boolean') {
+      // For boolean values, disable auto-detection
+      setDetectedOverLight(false);
+      
+      // Debug logging for boolean mode
+      if (debugOverLight) {
+        console.log('[AtomixGlass] OverLight Mode: boolean', {
+          value: overLight,
+          autoDetection: false,
+          timestamp: new Date().toISOString(),
+        });
+      }
     }
 
-    if (options.overLight) {
-      classes.push('c-atomix-glass--over-light');
+    if (typeof window.matchMedia !== 'function') {
+      return undefined;
     }
 
-    if (options.active) {
-      classes.push('c-atomix-glass--active');
+    try {
+      const mediaQueryReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+      const mediaQueryHighContrast = window.matchMedia('(prefers-contrast: high)');
+
+      setUserPrefersReducedMotion(mediaQueryReducedMotion.matches);
+      setUserPrefersHighContrast(mediaQueryHighContrast.matches);
+
+      const handleReducedMotionChange = (e: MediaQueryListEvent) => {
+        setUserPrefersReducedMotion(e.matches);
+      };
+
+      const handleHighContrastChange = (e: MediaQueryListEvent) => {
+        setUserPrefersHighContrast(e.matches);
+      };
+
+      if (mediaQueryReducedMotion.addEventListener) {
+        mediaQueryReducedMotion.addEventListener('change', handleReducedMotionChange);
+        mediaQueryHighContrast.addEventListener('change', handleHighContrastChange);
+      } else if (mediaQueryReducedMotion.addListener) {
+        mediaQueryReducedMotion.addListener(handleReducedMotionChange);
+        mediaQueryHighContrast.addListener(handleHighContrastChange);
+      }
+
+      return () => {
+        try {
+          if (mediaQueryReducedMotion.removeEventListener) {
+            mediaQueryReducedMotion.removeEventListener('change', handleReducedMotionChange);
+            mediaQueryHighContrast.removeEventListener('change', handleHighContrastChange);
+          } else if (mediaQueryReducedMotion.removeListener) {
+            mediaQueryReducedMotion.removeListener(handleReducedMotionChange);
+            mediaQueryHighContrast.removeListener(handleHighContrastChange);
+          }
+        } catch (cleanupError) {
+          console.error('AtomixGlass: Error cleaning up media query listeners:', cleanupError);
+        }
+      };
+    } catch (error) {
+      console.error('AtomixGlass: Error setting up media queries:', error);
+      return undefined;
     }
+  }, [overLight, glassRef, debugOverLight]);
+
+  // Mouse tracking
+  const mouseMoveThrottleRef = useRef<number | null>(null);
+  const lastMouseEventRef = useRef<MouseEvent | null>(null);
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      lastMouseEventRef.current = e;
+
+      if (mouseMoveThrottleRef.current === null) {
+        mouseMoveThrottleRef.current = requestAnimationFrame(() => {
+          const event = lastMouseEventRef.current;
+          if (!event) {
+            mouseMoveThrottleRef.current = null;
+            return;
+          }
 
-    // Add custom className
-    if (options.className) {
-      classes.push(options.className);
+          const container = mouseContainer?.current || glassRef.current;
+          if (!container) {
+            mouseMoveThrottleRef.current = null;
+            return;
+          }
+
+          const startTime = enablePerformanceMonitoring ? performance.now() : 0;
+
+          const rect = container.getBoundingClientRect();
+          if (rect.width === 0 || rect.height === 0) {
+            mouseMoveThrottleRef.current = null;
+            return;
+          }
+
+          const center = calculateElementCenter(rect);
+
+          setInternalMouseOffset({
+            x: ((event.clientX - center.x) / rect.width) * 100,
+            y: ((event.clientY - center.y) / rect.height) * 100,
+          });
+
+          setInternalGlobalMousePosition({
+            x: event.clientX,
+            y: event.clientY,
+          });
+
+          if (enablePerformanceMonitoring) {
+            const endTime = performance.now();
+            const duration = endTime - startTime;
+            if (duration > 5) {
+              console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
+            }
+          }
+
+          mouseMoveThrottleRef.current = null;
+        });
+      }
+    },
+    [mouseContainer, glassRef, enablePerformanceMonitoring]
+  );
+
+  useEffect(() => {
+    if (externalGlobalMousePosition && externalMouseOffset) {
+      return undefined;
+    }
+
+    if (effectiveDisableEffects) {
+      return undefined;
+    }
+
+    const container = mouseContainer?.current || glassRef.current;
+    if (!container) {
+      return undefined;
     }
 
-    return classes.filter(Boolean).join(' ');
-  }, []);
+    container.addEventListener('mousemove', handleMouseMove, { passive: true });
+
+    return () => {
+      container.removeEventListener('mousemove', handleMouseMove);
+      if (mouseMoveThrottleRef.current) {
+        cancelAnimationFrame(mouseMoveThrottleRef.current);
+        mouseMoveThrottleRef.current = null;
+      }
+    };
+  }, [
+    handleMouseMove,
+    mouseContainer,
+    glassRef,
+    externalGlobalMousePosition,
+    externalMouseOffset,
+    effectiveDisableEffects,
+  ]);
+
+  // Transform calculations
+  const calculateDirectionalScale = useCallback(() => {
+    if (
+      !globalMousePosition.x ||
+      !globalMousePosition.y ||
+      !glassRef.current ||
+      !validateGlassSize(glassSize)
+    ) {
+      return 'scale(1)';
+    }
+
+    const rect = glassRef.current.getBoundingClientRect();
+    const center = calculateElementCenter(rect);
+    const deltaX = globalMousePosition.x - center.x;
+    const deltaY = globalMousePosition.y - center.y;
+
+    const edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2);
+    const edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2);
+    const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
+
+    if (edgeDistance > CONSTANTS.ACTIVATION_ZONE) {
+      return 'scale(1)';
+    }
+
+    const fadeInFactor = 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
+    const centerDistance = calculateDistance(globalMousePosition, center);
+
+    if (centerDistance === 0) {
+      return 'scale(1)';
+    }
+
+    const normalizedX = deltaX / centerDistance;
+    const normalizedY = deltaY / centerDistance;
+    const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor;
+
+    const scaleX =
+      1 +
+      Math.abs(normalizedX) * stretchIntensity * 0.3 -
+      Math.abs(normalizedY) * stretchIntensity * 0.15;
+    const scaleY =
+      1 +
+      Math.abs(normalizedY) * stretchIntensity * 0.3 -
+      Math.abs(normalizedX) * stretchIntensity * 0.15;
 
-  // Generate CSS class for elements
-  const generateElementClass = useCallback((element: string, modifier?: string) => {
-    const baseClass = `c-atomix-glass__${element}`;
+    return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
+  }, [globalMousePosition, elasticity, glassSize, glassRef]);
 
-    if (modifier) {
-      return `${baseClass}--${modifier}`;
+  const calculateFadeInFactor = useCallback(() => {
+    if (
+      !globalMousePosition.x ||
+      !globalMousePosition.y ||
+      !glassRef.current ||
+      !validateGlassSize(glassSize)
+    ) {
+      return 0;
     }
 
-    return baseClass;
-  }, []);
+    const rect = glassRef.current.getBoundingClientRect();
+    const center = calculateElementCenter(rect);
+
+    const edgeDistanceX = Math.max(
+      0,
+      Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2
+    );
+    const edgeDistanceY = Math.max(
+      0,
+      Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2
+    );
+    const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
+
+    return edgeDistance > CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
+  }, [globalMousePosition, glassSize, glassRef]);
+
+  const calculateElasticTranslation = useCallback(() => {
+    if (!glassRef.current) {
+      return { x: 0, y: 0 };
+    }
+
+    const fadeInFactor = calculateFadeInFactor();
+    const rect = glassRef.current.getBoundingClientRect();
+    const center = calculateElementCenter(rect);
+
+    return {
+      x: (globalMousePosition.x - center.x) * elasticity * 0.1 * fadeInFactor,
+      y: (globalMousePosition.y - center.y) * elasticity * 0.1 * fadeInFactor,
+    };
+  }, [globalMousePosition, elasticity, calculateFadeInFactor, glassRef]);
+
+  const elasticTranslation = useMemo(() => {
+    if (effectiveDisableEffects) {
+      return { x: 0, y: 0 };
+    }
+    return calculateElasticTranslation();
+  }, [calculateElasticTranslation, effectiveDisableEffects]);
+
+  const directionalScale = useMemo(() => {
+    if (effectiveDisableEffects) {
+      return 'scale(1)';
+    }
+    return calculateDirectionalScale();
+  }, [calculateDirectionalScale, effectiveDisableEffects]);
+
+  const transformStyle = useMemo(() => {
+    if (effectiveDisableEffects) {
+      return isActive && Boolean(onClick) ? 'scale(0.98)' : 'scale(1)';
+    }
+    return `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? 'scale(0.96)' : directionalScale}`;
+  }, [elasticTranslation, isActive, onClick, directionalScale, effectiveDisableEffects]);
+
+  // Size management
+  useEffect(() => {
+    const isValidElement = (element: HTMLElement | null): element is HTMLElement =>
+      element !== null && element instanceof HTMLElement && element.isConnected;
+
+    const validateSize = (size: GlassSize): boolean =>
+      validateGlassSize(size) && size.width <= CONSTANTS.MAX_SIZE && size.height <= CONSTANTS.MAX_SIZE;
+
+    let rafId: number | null = null;
+    let lastSize = { width: 0, height: 0 };
+    let lastCornerRadius = effectiveCornerRadius;
+
+    const updateGlassSize = (forceUpdate = false): void => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+
+      rafId = requestAnimationFrame(() => {
+        if (!isValidElement(glassRef.current)) {
+          rafId = null;
+          return;
+        }
+
+        const rect = glassRef.current.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+          rafId = null;
+          return;
+        }
+
+        const cornerRadiusOffset = Math.max(0, Math.min(effectiveCornerRadius * 0.1, 10));
+        const newSize: GlassSize = {
+          width: Math.round(rect.width + cornerRadiusOffset),
+          height: Math.round(rect.height + cornerRadiusOffset),
+        };
+
+        const cornerRadiusChanged = lastCornerRadius !== effectiveCornerRadius;
+        const dimensionsChanged =
+          Math.abs(newSize.width - lastSize.width) > 1 ||
+          Math.abs(newSize.height - lastSize.height) > 1;
+
+        if ((forceUpdate || cornerRadiusChanged || dimensionsChanged) && validateSize(newSize)) {
+          lastSize = newSize;
+          lastCornerRadius = effectiveCornerRadius;
+          setGlassSize(newSize);
+        }
+
+        rafId = null;
+      });
+    };
+
+    let resizeTimeoutId: NodeJS.Timeout | null = null;
+    const debouncedResizeHandler = (): void => {
+      if (resizeTimeoutId) clearTimeout(resizeTimeoutId);
+      resizeTimeoutId = setTimeout(() => updateGlassSize(false), 16);
+    };
+
+    const initialTimeoutId = setTimeout(() => updateGlassSize(true), 0);
+
+    let resizeObserver: ResizeObserver | null = null;
+    let fallbackInterval: NodeJS.Timeout | null = null;
+
+    const hasResizeObserver = typeof ResizeObserver !== 'undefined';
+
+    if (hasResizeObserver && isValidElement(glassRef.current)) {
+      try {
+        resizeObserver = new ResizeObserver(entries => {
+          for (const entry of entries) {
+            if (entry.target === glassRef.current) {
+              updateGlassSize(false);
+              break;
+            }
+          }
+        });
+        resizeObserver.observe(glassRef.current);
+      } catch {
+        fallbackInterval = setInterval(
+          () => isValidElement(glassRef.current) && updateGlassSize(false),
+          100
+        );
+      }
+    } else {
+      fallbackInterval = setInterval(
+        () => isValidElement(glassRef.current) && updateGlassSize(false),
+        100
+      );
+    }
+
+    window.addEventListener('resize', debouncedResizeHandler, { passive: true });
+
+    return () => {
+      clearTimeout(initialTimeoutId);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      if (resizeTimeoutId) clearTimeout(resizeTimeoutId);
+      if (fallbackInterval) clearInterval(fallbackInterval);
+      window.removeEventListener('resize', debouncedResizeHandler);
+      resizeObserver?.disconnect();
+    };
+  }, [effectiveCornerRadius, glassRef]);
+
+  // OverLight config
+  /**
+   * Get effective overLight value based on configuration
+   * - boolean: returns the boolean value directly
+   * - 'auto': returns detectedOverLight (auto-detected from background)
+   * - object: returns detectedOverLight (auto-detected, but config object provides customization)
+   */
+  const getEffectiveOverLight = useCallback(() => {
+    if (typeof overLight === 'boolean') {
+      return overLight;
+    }
+    if (overLight === 'auto') {
+      return detectedOverLight;
+    }
+    if (typeof overLight === 'object' && overLight !== null) {
+      return detectedOverLight;
+    }
+    // Default to false for safety when overLight is undefined or invalid
+    return false;
+  }, [overLight, detectedOverLight]);
+
+  /**
+   * Validate and clamp a numeric config value
+   * @param value - The value to validate
+   * @param min - Minimum allowed value
+   * @param max - Maximum allowed value
+   * @param defaultValue - Default value if validation fails
+   * @returns Validated and clamped value
+   */
+  const validateConfigValue = useCallback(
+    (value: unknown, min: number, max: number, defaultValue: number): number => {
+      if (typeof value !== 'number' || isNaN(value) || !isFinite(value)) {
+        return defaultValue;
+      }
+      return Math.min(max, Math.max(min, value));
+    },
+    []
+  );
+
+  const overLightConfig = useMemo(() => {
+    const isOverLight = getEffectiveOverLight();
+    const mouseInfluence = calculateMouseInfluence(mouseOffset);
+    const hoverIntensity = isHovered ? 1.4 : 1;
+    const activeIntensity = isActive ? 1.6 : 1;
+
+    // More robust overlight configuration with better defaults and clamping
+    const baseOpacity = isOverLight ? Math.min(0.6, Math.max(0.2, 0.5 * hoverIntensity * activeIntensity)) : 0;
+    
+    const baseConfig = {
+      isOverLight,
+      threshold: 0.7,
+      opacity: baseOpacity,
+      contrast: Math.min(1.8, Math.max(1.0, 1.4 + mouseInfluence * 0.3)),
+      brightness: Math.min(1.2, Math.max(0.7, 0.85 + mouseInfluence * 0.15)),
+      saturationBoost: Math.min(2.0, Math.max(1.0, 1.3 + mouseInfluence * 0.4)),
+      shadowIntensity: Math.min(1.5, Math.max(0.5, 0.9 + mouseInfluence * 0.5)),
+      borderOpacity: Math.min(1.0, Math.max(0.3, 0.7 + mouseInfluence * 0.3)),
+    };
+
+    if (typeof overLight === 'object' && overLight !== null) {
+      const objConfig = overLight as OverLightObjectConfig;
+      
+      // Validate and apply object config values with proper clamping
+      const validatedThreshold = validateConfigValue(objConfig.threshold, 0.1, 1.0, baseConfig.threshold);
+      const validatedOpacity = validateConfigValue(objConfig.opacity, 0.1, 1.0, baseConfig.opacity);
+      const validatedContrast = validateConfigValue(objConfig.contrast, 0.5, 2.5, baseConfig.contrast);
+      const validatedBrightness = validateConfigValue(objConfig.brightness, 0.5, 2.0, baseConfig.brightness);
+      const validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, 0.5, 3.0, baseConfig.saturationBoost);
+      
+      const finalConfig = {
+        ...baseConfig,
+        threshold: validatedThreshold,
+        opacity: validatedOpacity * hoverIntensity * activeIntensity,
+        contrast: validatedContrast + mouseInfluence * 0.3,
+        brightness: validatedBrightness + mouseInfluence * 0.15,
+        saturationBoost: validatedSaturationBoost + mouseInfluence * 0.4,
+      };
+      
+      // Debug logging
+      if (debugOverLight) {
+        console.log('[AtomixGlass] OverLight Config:', {
+          isOverLight,
+          config: {
+            threshold: finalConfig.threshold.toFixed(3),
+            opacity: finalConfig.opacity.toFixed(3),
+            contrast: finalConfig.contrast.toFixed(3),
+            brightness: finalConfig.brightness.toFixed(3),
+            saturationBoost: finalConfig.saturationBoost.toFixed(3),
+            shadowIntensity: finalConfig.shadowIntensity.toFixed(3),
+            borderOpacity: finalConfig.borderOpacity.toFixed(3),
+          },
+          input: {
+            threshold: objConfig.threshold,
+            opacity: objConfig.opacity,
+            contrast: objConfig.contrast,
+            brightness: objConfig.brightness,
+            saturationBoost: objConfig.saturationBoost,
+          },
+          dynamic: {
+            mouseInfluence: mouseInfluence.toFixed(3),
+            hoverIntensity: hoverIntensity.toFixed(3),
+            activeIntensity: activeIntensity.toFixed(3),
+          },
+          timestamp: new Date().toISOString(),
+        });
+      }
+      
+      return finalConfig;
+    }
+
+    // Debug logging for non-object configs
+    if (debugOverLight) {
+      console.log('[AtomixGlass] OverLight Config:', {
+        isOverLight,
+        configType: typeof overLight === 'boolean' ? (overLight ? 'true' : 'false') : overLight,
+        config: {
+          threshold: baseConfig.threshold.toFixed(3),
+          opacity: baseConfig.opacity.toFixed(3),
+          contrast: baseConfig.contrast.toFixed(3),
+          brightness: baseConfig.brightness.toFixed(3),
+          saturationBoost: baseConfig.saturationBoost.toFixed(3),
+          shadowIntensity: baseConfig.shadowIntensity.toFixed(3),
+          borderOpacity: baseConfig.borderOpacity.toFixed(3),
+        },
+        dynamic: {
+          mouseInfluence: mouseInfluence.toFixed(3),
+          hoverIntensity: hoverIntensity.toFixed(3),
+          activeIntensity: activeIntensity.toFixed(3),
+        },
+        timestamp: new Date().toISOString(),
+      });
+    }
+
+    return baseConfig;
+  }, [overLight, getEffectiveOverLight, mouseOffset, isHovered, isActive, validateConfigValue, debugOverLight]);
+
+  // Event handlers
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+  const handleMouseDown = useCallback(() => setIsActive(true), []);
+  const handleMouseUp = useCallback(() => setIsActive(false), []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        onClick();
+      }
+    },
+    [onClick]
+  );
 
   return {
-    generateGlassClass,
-    generateElementClass,
+    // State
+    isHovered,
+    isActive,
+    glassSize,
+    dynamicCornerRadius,
+    effectiveCornerRadius,
+    effectiveReducedMotion,
+    effectiveHighContrast,
+    effectiveDisableEffects,
+    detectedOverLight,
+    globalMousePosition,
+    mouseOffset,
+
+    // OverLight config
+    overLightConfig,
+
+    // Transform calculations
+    elasticTranslation,
+    directionalScale,
+    transformStyle,
+
+    // Event handlers
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseDown,
+    handleMouseUp,
+    handleMouseMove,
+    handleKeyDown,
   };
 }
+