@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/lib/composables/atomix-glass/useGlassOverLight.ts

@@ -0,0 +1,198 @@
+import { useCallback, useMemo } from 'react';
+import { calculateMouseInfluence } from '../../../components/AtomixGlass/glass-utils';
+import type {
+  MousePosition,
+  OverLightConfig,
+  OverLightObjectConfig,
+} from '../../types/components';
+
+interface UseGlassOverLightProps {
+  overLight: OverLightConfig;
+  detectedOverLight: boolean;
+  mouseOffset: MousePosition;
+  isHovered: boolean;
+  isActive: boolean;
+  debugOverLight?: boolean;
+}
+
+export function useGlassOverLight({
+  overLight,
+  detectedOverLight,
+  mouseOffset,
+  isHovered,
+  isActive,
+  debugOverLight = false,
+}: UseGlassOverLightProps) {
+  /**
+   * 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.6, Math.max(1.0, 1.4 + mouseInfluence * 0.1)),
+      brightness: Math.min(1.1, Math.max(0.8, 0.9 + mouseInfluence * 0.05)),
+      saturationBoost: 1.3, // Fixed value — dynamic saturation amplifies perceived displacement
+      shadowIntensity: Math.min(1.2, Math.max(0.5, 0.9 + mouseInfluence * 0.2)),
+      borderOpacity: Math.min(1.0, Math.max(0.3, 0.7 + mouseInfluence * 0.1)),
+    };
+
+    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: Math.min(1.6, validatedContrast + mouseInfluence * 0.1),
+        brightness: Math.min(1.1, validatedBrightness + mouseInfluence * 0.05),
+        saturationBoost: validatedSaturationBoost, // Use validated value directly, no mouse influence
+      };
+
+      // Debug logging
+      if (
+        (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
+        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 (
+      (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
+      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,
+  ]);
+
+  return { overLightConfig };
+}

package/src/lib/composables/atomix-glass/useGlassSize.ts

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import { ATOMIX_GLASS } from '../../constants/components';
+import { validateGlassSize } from '../../../components/AtomixGlass/glass-utils';
+import type { GlassSize } from '../../types/components';
+
+const { CONSTANTS } = ATOMIX_GLASS;
+
+interface UseGlassSizeProps {
+  glassRef: React.RefObject<HTMLDivElement>;
+  effectiveBorderRadius: number;
+  cachedRectRef?: React.MutableRefObject<DOMRect | null>;
+}
+
+export function useGlassSize({
+  glassRef,
+  effectiveBorderRadius,
+  cachedRectRef,
+}: UseGlassSizeProps) {
+  const [glassSize, setGlassSize] = useState<GlassSize>({ width: 270, height: 69 });
+
+  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 = effectiveBorderRadius;
+
+    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;
+        }
+
+        // Measure actual rendered size without artificial offsets to avoid feedback loops
+        const newSize: GlassSize = {
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+        };
+
+        const cornerRadiusChanged = lastCornerRadius !== effectiveBorderRadius;
+        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 = effectiveBorderRadius;
+          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 resizeDebounceTimeout: NodeJS.Timeout | null = null;
+
+    // ResizeObserver has 98%+ browser support, no need for fallback
+    if (typeof ResizeObserver !== 'undefined' && isValidElement(glassRef.current)) {
+      try {
+        resizeObserver = new ResizeObserver(entries => {
+          for (const entry of entries) {
+            if (entry.target === glassRef.current) {
+              // Update cached rect when size changes
+              if (glassRef.current && cachedRectRef) {
+                cachedRectRef.current = glassRef.current.getBoundingClientRect();
+              }
+              // Debounce resize updates to match RAF timing (16ms)
+              if (resizeDebounceTimeout) clearTimeout(resizeDebounceTimeout);
+              resizeDebounceTimeout = setTimeout(() => updateGlassSize(false), 16);
+              break;
+            }
+          }
+        });
+        resizeObserver.observe(glassRef.current);
+      } catch (error) {
+        console.warn('AtomixGlass: ResizeObserver not available, using window resize only', error);
+      }
+    }
+
+    window.addEventListener('resize', debouncedResizeHandler, { passive: true });
+
+    return () => {
+      clearTimeout(initialTimeoutId);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      if (resizeTimeoutId) clearTimeout(resizeTimeoutId);
+      if (resizeDebounceTimeout) clearTimeout(resizeDebounceTimeout);
+      window.removeEventListener('resize', debouncedResizeHandler);
+      resizeObserver?.disconnect();
+    };
+  }, [effectiveBorderRadius, glassRef, cachedRectRef]);
+
+  return { glassSize };
+}

package/src/lib/composables/atomix-glass/useGlassState.ts

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { AtomixGlassProps } from '../../types/components';
+
+interface UseGlassStateProps {
+  reducedMotion?: boolean;
+  highContrast?: boolean;
+  withoutEffects?: boolean;
+  onClick?: () => void;
+}
+
+export function useGlassState({
+  reducedMotion = false,
+  highContrast = false,
+  withoutEffects = false,
+  onClick,
+}: UseGlassStateProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+  const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(false);
+  const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
+
+  // Media query handlers
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return undefined;
+    }
+
+    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;
+    }
+  }, []);
+
+  const effectiveReducedMotion = useMemo(
+    () => reducedMotion || userPrefersReducedMotion,
+    [reducedMotion, userPrefersReducedMotion]
+  );
+
+  const effectiveHighContrast = useMemo(
+    () => highContrast || userPrefersHighContrast,
+    [highContrast, userPrefersHighContrast]
+  );
+
+  const effectiveWithoutEffects = useMemo(
+    () => withoutEffects || effectiveReducedMotion,
+    [withoutEffects, effectiveReducedMotion]
+  );
+
+  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 {
+    isHovered,
+    isActive,
+    effectiveReducedMotion,
+    effectiveHighContrast,
+    effectiveWithoutEffects,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseDown,
+    handleMouseUp,
+    handleKeyDown,
+  };
+}

package/src/lib/composables/atomix-glass/useGlassTransforms.ts

@@ -0,0 +1,160 @@
+import React, { useCallback, useMemo } from 'react';
+import { ATOMIX_GLASS } from '../../constants/components';
+import {
+  calculateDistance,
+  calculateElementCenter,
+  validateGlassSize,
+} from '../../../components/AtomixGlass/glass-utils';
+import type { GlassSize, MousePosition, OverLightConfig } from '../../types/components';
+
+const { CONSTANTS } = ATOMIX_GLASS;
+
+interface UseGlassTransformsProps {
+  glassRef: React.RefObject<HTMLDivElement>;
+  globalMousePosition: MousePosition;
+  glassSize: GlassSize;
+  overLight: OverLightConfig;
+  detectedOverLight: boolean;
+  elasticity?: number;
+  effectiveWithoutEffects?: boolean;
+  isActive?: boolean;
+  onClick?: () => void;
+}
+
+export function useGlassTransforms({
+  glassRef,
+  globalMousePosition,
+  glassSize,
+  overLight,
+  detectedOverLight,
+  elasticity = 0.05,
+  effectiveWithoutEffects = false,
+  isActive = false,
+  onClick,
+}: UseGlassTransformsProps) {
+  const calculateDirectionalScale = useCallback(() => {
+    // Disable directional scaling if overLight is active (to prevent zooming/distorting the premium glass effect)
+    const isOverLightActive =
+      overLight === true ||
+      (overLight === 'auto' && detectedOverLight) ||
+      (typeof overLight === 'object' && overLight !== null && detectedOverLight);
+
+    if (isOverLightActive) {
+      return 'scale(1)';
+    }
+
+    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;
+
+    return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
+  }, [globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight]);
+
+  const calculateFadeInFactor = useCallback(() => {
+    if (
+      !globalMousePosition.x ||
+      !globalMousePosition.y ||
+      !glassRef.current ||
+      !validateGlassSize(glassSize)
+    ) {
+      return 0;
+    }
+
+    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 (effectiveWithoutEffects) {
+      return { x: 0, y: 0 };
+    }
+    return calculateElasticTranslation();
+  }, [calculateElasticTranslation, effectiveWithoutEffects]);
+
+  const directionalScale = useMemo(() => {
+    if (effectiveWithoutEffects) {
+      return 'scale(1)';
+    }
+    return calculateDirectionalScale();
+  }, [calculateDirectionalScale, effectiveWithoutEffects]);
+
+  const transformStyle = useMemo(() => {
+    if (effectiveWithoutEffects) {
+      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, effectiveWithoutEffects]);
+
+  return {
+    elasticTranslation,
+    directionalScale,
+    transformStyle,
+  };
+}