@shohojdhara/atomix 0.6.4 → 0.6.6

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import { NavbarProps } from '../../../lib/types/components';
 import { useNavbar } from '../../../lib/composables/useNavbar';
-import { NAVBAR } from '../../../lib/constants/components';
+import { NAVBAR, GLASS_DEFAULTS } from '../../../lib/constants/components';
 import { AtomixGlass } from '../../AtomixGlass/AtomixGlass';
 
 /**
@@ -187,14 +187,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
     );
 
     if (glass) {
-      const defaultGlassProps = {
-        displacementScale: 30,
-        blurAmount: 2,
-        borderRadius: 0,
-        elasticity: 0,
-        mode: 'shader' as const,
-        shaderVariant: 'premiumGlass' as const,
-      };
+      const defaultGlassProps = GLASS_DEFAULTS.NAVBAR;
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
       // AtomixGlass hoists layout props (position/top/left/right/zIndex) to its

package/src/components/Navigation/SideMenu/SideMenu.tsx

@@ -6,6 +6,7 @@ import { AtomixGlass } from '../../AtomixGlass/AtomixGlass';
 import useForkRef from '../../../lib/utils/useForkRef';
 import SideMenuList from './SideMenuList';
 import SideMenuItem from './SideMenuItem';
+import { GLASS_DEFAULTS } from '../../../lib/constants/components';
 
 /**
  * SideMenu component provides a collapsible navigation menu with title and menu items.
@@ -305,12 +306,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
     );
 
     if (glass) {
-      const defaultGlassProps = {
-        displacementScale: 70,
-        blurAmount: 2,
-        borderRadius: 12,
-        mode: 'shader' as const,
-      };
+      const defaultGlassProps = GLASS_DEFAULTS.SIDE_MENU;
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
       return (
         <AtomixGlass {...glassProps}>

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useState, FormEvent } from 'react';
 import { PaginationProps } from '../../lib/types/components';
 import { usePagination, DOTS } from '../../lib/composables/usePagination';
-import { PAGINATION_DEFAULTS } from '../../lib/constants/components';
+import { PAGINATION_DEFAULTS, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { Icon, IconProps } from '../Icon/Icon';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
@@ -238,15 +238,7 @@ export const Pagination: React.FC<PaginationProps> = memo(
     );
 
     if (glass) {
-      // Default glass settings for pagination
-      const defaultGlassProps = {
-        displacementScale: 60,
-        blurAmount: 1,
-        saturation: 160,
-        aberrationIntensity: 0.5,
-        borderRadius: 8,
-        mode: 'shader' as const,
-      };
+      const defaultGlassProps = GLASS_DEFAULTS.PAGINATION;
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Popover/Popover.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, forwardRef, createContext } from 'react';
 import { createPortal } from 'react-dom';
-import { POPOVER } from '../../lib/constants/components';
+import { POPOVER, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { usePopover } from '../../lib/composables/usePopover';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import type { PopoverProps, PopoverTriggerProps } from '../../lib/types/components';
@@ -81,14 +81,7 @@ export const Popover: React.FC<PopoverProps> = ({
             {glass ? (
               // Default glass settings for popovers
               (() => {
-                const defaultGlassProps = {
-                  displacementScale: 50,
-                  blurAmount: 1,
-                  saturation: 160,
-                  aberrationIntensity: 0.5,
-                  borderRadius: 8,
-                  mode: 'shader' as const,
-                };
+                const defaultGlassProps = GLASS_DEFAULTS.POPOVER;
 
                 const glassProps =
                   glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Progress/Progress.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, memo } from 'react';
 import { ProgressProps } from '../../lib/types/components';
 import { useProgress } from '../../lib/composables/useProgress';
-import { PROGRESS } from '../../lib/constants/components';
+import { PROGRESS, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Progress = memo(
@@ -43,12 +43,7 @@ export const Progress = memo(
       );
 
       if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 30,
-          blurAmount: 0.5,
-          borderRadius: 8,
-          mode: 'shader' as const,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.PROGRESS;
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
         return <AtomixGlass {...glassProps}>{progressContent}</AtomixGlass>;
       }

package/src/components/Rating/Rating.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useCallback, forwardRef } from 'react';
-import { THEME_COLORS, SIZES, RATING } from '../../lib/constants/components';
+import { THEME_COLORS, SIZES, RATING, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { useRating } from '../../lib/composables/useRating';
 import type { RatingProps } from '../../lib/types/components';
 import useForkRef from '../../lib/utils/useForkRef';
@@ -275,15 +275,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     );
 
     if (glass) {
-      // Default glass settings for ratings
-      const defaultGlassProps = {
-        displacementScale: 60,
-        blurAmount: 1,
-        saturation: 160,
-        aberrationIntensity: 0.5,
-        borderRadius: 8,
-        mode: 'shader' as const,
-      };
+      const defaultGlassProps = GLASS_DEFAULTS.RATING;
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Spinner/Spinner.tsx

@@ -1,7 +1,7 @@
 import React, { memo, forwardRef } from 'react';
 import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
-import { SPINNER } from '../../lib/constants/components';
+import { SPINNER, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Spinner = memo(
@@ -51,12 +51,7 @@ export const Spinner = memo(
       );
 
       if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 20,
-          blurAmount: 1,
-          borderRadius: 999,
-          mode: 'shader' as const,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.SPINNER;
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
         return <AtomixGlass {...glassProps}>{spinnerContent}</AtomixGlass>;
       }

package/src/components/Steps/Steps.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, ReactNode, forwardRef, Children, cloneElement, isValidElement } from 'react';
-import { STEPS } from '../../lib/constants/components';
+import { STEPS, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 
@@ -225,15 +225,7 @@ const StepsComp: React.FC<StepsProps> = ({
   );
 
   if (glass) {
-    // Default glass settings for steps
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      borderRadius: 8,
-      mode: 'shader' as const,
-    };
+    const defaultGlassProps = GLASS_DEFAULTS.STEPS;
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Tabs/Tabs.tsx

@@ -7,7 +7,7 @@ import React, {
   forwardRef,
   ComponentType,
 } from 'react';
-import { TAB } from '../../lib/constants/components';
+import { TAB, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 
@@ -354,14 +354,7 @@ const TabsComponentBase = ({
 
   if (glass) {
     // Default glass settings for tabs
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      borderRadius: 8,
-      mode: 'shader' as const,
-    };
+    const defaultGlassProps = GLASS_DEFAULTS.TABS;
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { TOGGLE } from '../../lib/constants/components';
+import { TOGGLE, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps, BaseComponentProps } from '../../lib/types/components';
 
@@ -115,15 +115,7 @@ export const Toggle: React.FC<ToggleProps> = ({
   );
 
   if (glass) {
-    // Default glass settings for toggles
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      borderRadius: 8,
-      mode: 'shader' as const,
-    };
+    const defaultGlassProps = GLASS_DEFAULTS.TOGGLE;
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, memo } from 'react';
-import { TOOLTIP } from '../../lib/constants/components';
+import { TOOLTIP, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 import {
@@ -118,10 +118,7 @@ export const Tooltip: React.FC<TooltipProps> = memo(
       );
 
       if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 100,
-          blurAmount: 3,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.TOOLTIP;
 
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/lib/composables/useAtomixGlass.ts

@@ -10,23 +10,18 @@ import { ATOMIX_GLASS } from '../constants/components';
 import { globalMouseTracker } from './shared-mouse-tracker';
 import {
   calculateElementCenter,
-  calculateMouseInfluence,
   extractBorderRadiusFromChildren,
   extractBorderRadiusFromDOMElement,
-  validateGlassSize,
+  getInteractionIntensity,
   lerp,
   calculateSpring,
-  calculateVelocity,
   smoothstep,
 } from '../../components/AtomixGlass/glass-utils';
-import { updateAtomixGlassStyles } from './useAtomixGlassStyles';
-// Phase 1: Time-Based Animation System
 import {
-  createAnimationLoop,
-  createFBMEngine,
-  getFBMConfigForQuality,
-  liquidGlassWithTime,
-} from '../../components/AtomixGlass/animation-system';
+  normalizeBorderConfig,
+  type ResolvedGlassBorderConfig,
+} from '../../components/AtomixGlass/glass-border-styles';
+import { updateAtomixGlassStyles } from './useAtomixGlassStyles';
 
 const { CONSTANTS } = ATOMIX_GLASS;
 
@@ -153,13 +148,7 @@ interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
   children?: React.ReactNode;
   isFixedOrSticky?: boolean;
   priority?: number; // Priority for z-index ordering
-  // Phase 1: Time-Based Animation System
   withLiquidBlur?: boolean;
-  animationQuality?: 'low' | 'medium' | 'high';
-  timeSpeed?: number;
-  noiseAmplitude?: number;
-  noiseFrequency?: number;
-  displacementStrength?: number;
 }
 
 interface UseAtomixGlassReturn {
@@ -191,9 +180,8 @@ interface UseAtomixGlassReturn {
   // Transform calculations
   transformStyle: string;
 
-  // Phase 1: Animation System - Shader time control
-  getShaderTime: () => number;
-  applyTimeBasedDistortion: (uv: { x: number; y: number }) => { x: number; y: number };
+  /** Resolved liquid glass rim configuration */
+  resolvedBorder: ResolvedGlassBorderConfig;
 
   // Event handlers
   handleMouseEnter: () => void;
@@ -221,6 +209,8 @@ export function useAtomixGlass({
   reducedMotion = false,
   highContrast = false,
   withoutEffects = false,
+  border,
+  withBorder = true,
   elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
   onClick,
   debugBorderRadius = false,
@@ -228,23 +218,20 @@ export function useAtomixGlass({
   children,
   blurAmount,
   saturation,
-  padding,
+
   withLiquidBlur,
   isFixedOrSticky = false,
   priority = 1, // Default priority
-  // Phase 1: Animation System Props
-  withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION,
-  animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED,
-  withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION,
-  distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES,
-  distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY,
-  distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN,
-  distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY,
 }: UseAtomixGlassOptions): UseAtomixGlassReturn {
   // State
   const [isHovered, setIsHovered] = useState(false);
   const [isActive, setIsActive] = useState(false);
 
+  const resolvedBorder = useMemo(
+    () => normalizeBorderConfig(border, withBorder),
+    [border, withBorder]
+  );
+
   // Mouse tracking refs
   const cachedRectRef = useRef<DOMRect | null>(null);
   const internalGlobalMousePositionRef = useRef<MousePosition>({ x: 0, y: 0 });
@@ -267,46 +254,12 @@ export function useAtomixGlass({
   const elasticVelocityRef = useRef<MousePosition>({ x: 0, y: 0 });
   const directionalScaleRef = useRef<{ x: number; y: number }>({ x: 1, y: 1 });
   const scaleVelocityRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
-  const lastMouseTimeRef = useRef<number>(0);
   const mouseVelocityRef = useRef<MousePosition>({ x: 0, y: 0 });
 
   const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(false);
   const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
   const [detectedOverLight, setDetectedOverLight] = useState(false);
 
-  // ============================================================================
-  // Phase 1: Time-Based Animation System (Feature 1.1)
-  // ============================================================================
-
-  // Animation state refs
-  const animationFrameIdRef = useRef<number | null>(null);
-  const animationStartTimeRef = useRef<number>(0);
-  const elapsedTimeRef = useRef<number>(0);
-  const shaderTimeRef = useRef<number>(0);
-
-  /**
-   * Get FBM configuration based on quality preset or custom values
-   */
-  const fbmConfig = useMemo(() => {
-    // If quality preset is provided, use it as base
-    const preset = getFBMConfigForQuality(distortionQuality);
-
-    // Override with custom values if provided
-    return {
-      octaves: distortionOctaves ?? preset.octaves,
-      lacunarity: distortionLacunarity ?? preset.lacunarity,
-      gain: distortionGain ?? preset.gain,
-    };
-  }, [distortionQuality, distortionOctaves, distortionLacunarity, distortionGain]);
-
-  /**
-   * Create FBM engine for multi-layer distortion
-   */
-  const fbmEngine = useMemo(() => {
-    if (!withMultiLayerDistortion) return null;
-    return createFBMEngine(fbmConfig);
-  }, [withMultiLayerDistortion, fbmConfig]);
-
   /**
    * Determine effective animation settings
    */
@@ -315,74 +268,6 @@ export function useAtomixGlass({
     [reducedMotion, userPrefersReducedMotion]
   );
 
-  const effectiveWithTimeAnimation = useMemo(() => {
-    return withTimeAnimation && !effectiveReducedMotion;
-  }, [withTimeAnimation, effectiveReducedMotion]);
-
-  /**
-   * Animation loop for time-based effects
-   */
-  useEffect(() => {
-    if (!effectiveWithTimeAnimation || typeof window === 'undefined') {
-      return undefined;
-    }
-
-    let lastFrameTime = performance.now();
-
-    /**
-     * Animation frame handler
-     */
-    const animate = (currentTime: number) => {
-      // Calculate delta time
-      const deltaTime = currentTime - lastFrameTime;
-      lastFrameTime = currentTime;
-
-      // Apply animation speed multiplier
-      const scaledDelta = deltaTime * animationSpeed;
-      elapsedTimeRef.current += scaledDelta;
-      shaderTimeRef.current = elapsedTimeRef.current;
-
-      // Continue animation loop
-      animationFrameIdRef.current = requestAnimationFrame(animate);
-    };
-
-    // Start animation
-    animationStartTimeRef.current = performance.now();
-    animationFrameIdRef.current = requestAnimationFrame(animate);
-
-    // Cleanup
-    return () => {
-      if (animationFrameIdRef.current !== null) {
-        cancelAnimationFrame(animationFrameIdRef.current);
-        animationFrameIdRef.current = null;
-      }
-    };
-  }, [effectiveWithTimeAnimation, animationSpeed]);
-
-  /**
-   * Get current shader time for animations
-   */
-  const getShaderTime = useCallback(() => {
-    return shaderTimeRef.current;
-  }, []);
-
-  /**
-   * Apply time-based distortion to UV coordinates
-   */
-  const applyTimeBasedDistortion = useCallback(
-    (uv: { x: number; y: number }): { x: number; y: number } => {
-      if (!effectiveWithTimeAnimation || !fbmEngine) {
-        return uv;
-      }
-
-      const time = shaderTimeRef.current;
-
-      // Apply liquid glass distortion with time
-      return liquidGlassWithTime(uv, time, fbmConfig);
-    },
-    [effectiveWithTimeAnimation, fbmEngine, fbmConfig]
-  );
-
   // Memoized derived values
   const effectiveBorderRadius = useMemo(() => {
     if (borderRadius !== undefined) {
@@ -666,8 +551,7 @@ export function useAtomixGlass({
 
   const overLightConfig = useMemo(() => {
     const isOverLight = getEffectiveOverLight();
-    const hoverIntensity = isHovered ? 1.4 : 1;
-    const activeIntensity = isActive ? 1.6 : 1;
+    const { hoverIntensity, activeIntensity } = getInteractionIntensity(isHovered, isActive);
 
     // More robust overlight configuration with better defaults and clamping
     const baseOpacity = isOverLight
@@ -678,11 +562,14 @@ export function useAtomixGlass({
       isOverLight,
       threshold: 0.7,
       opacity: baseOpacity,
-      contrast: 1.4,
-      brightness: 0.9,
-      saturationBoost: 1.3, // Fixed value — dynamic saturation amplifies perceived displacement
-      shadowIntensity: 0.9,
-      borderOpacity: 0.7,
+      // Dark UI (Apple Music): neutral contrast + slight brightness lift
+      contrast: isOverLight ? 1.4 : 1.02,
+      brightness: isOverLight ? 0.9 : 1.02,
+      saturationBoost: isOverLight ? 1.3 : 1.0,
+      shadowIntensity: isOverLight ? 0.9 : 1.0,
+      borderOpacity: isOverLight
+        ? ATOMIX_GLASS.BORDER.OVER_LIGHT.opacity
+        : ATOMIX_GLASS.BORDER.DARK.opacity,
     };
 
     if (typeof overLight === 'object' && overLight !== null) {
@@ -713,6 +600,12 @@ export function useAtomixGlass({
         3.0,
         baseConfig.saturationBoost
       );
+      const validatedBorderOpacity = validateConfigValue(
+        objConfig.borderOpacity,
+        0.1,
+        1.0,
+        baseConfig.borderOpacity
+      );
 
       const finalConfig = {
         ...baseConfig,
@@ -721,6 +614,7 @@ export function useAtomixGlass({
         contrast: validatedContrast,
         brightness: validatedBrightness,
         saturationBoost: validatedSaturationBoost,
+        borderOpacity: validatedBorderOpacity,
       };
 
       if (
@@ -958,8 +852,10 @@ export function useAtomixGlass({
         withLiquidBlur,
         blurAmount,
         saturation,
-        padding,
+
         isFixedOrSticky,
+        borderAnimated: resolvedBorder.animated,
+        borderOpacityMultiplier: resolvedBorder.opacityMultiplier,
       });
 
       // ── Stop check ──────────────────────────────────────────────────
@@ -1000,8 +896,10 @@ export function useAtomixGlass({
     withLiquidBlur,
     blurAmount,
     saturation,
-    padding,
+
     isFixedOrSticky,
+    resolvedBorder.animated,
+    resolvedBorder.opacityMultiplier,
     stopLerpLoop,
   ]);
 
@@ -1140,7 +1038,8 @@ export function useAtomixGlass({
       withLiquidBlur,
       blurAmount,
       saturation,
-      padding,
+      borderAnimated: resolvedBorder.animated,
+      borderOpacityMultiplier: resolvedBorder.opacityMultiplier,
     });
   }, [
     isHovered,
@@ -1158,7 +1057,8 @@ export function useAtomixGlass({
     withLiquidBlur,
     blurAmount,
     saturation,
-    padding,
+    resolvedBorder.animated,
+    resolvedBorder.opacityMultiplier,
     onClick,
   ]);
 
@@ -1191,9 +1091,8 @@ export function useAtomixGlass({
     globalMousePosition, // This is now static (refs or props) unless prop changes
     mouseOffset, // This is now static (refs or props) unless prop changes
     overLightConfig,
+    resolvedBorder,
     transformStyle,
-    getShaderTime,
-    applyTimeBasedDistortion,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,