@shohojdhara/atomix 0.4.5 → 0.4.7

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

@@ -1,198 +0,0 @@
-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/useGlassState.ts

@@ -1,112 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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,
-  };
-}