@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -7,9 +7,7 @@ import React, {
   useRef,
   useState,
   useCallback,
-  useMemo,
   Children,
-  cloneElement,
   isValidElement,
 } from 'react';
 // Import styles for scoped CSS modules
@@ -122,7 +120,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
     // === REFS & STATE ===
     const [columns, setColumns] = useState(xs);
     const [positions, setPositions] = useState<ItemPosition[]>([]);
-    const [layoutComplete, setLayoutComplete] = useState(false);
+    const [, setLayoutComplete] = useState(false);
     const [loadingImages, setLoadingImages] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
     const columnHeights = useRef<number[]>([]);
@@ -178,6 +176,32 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       setItems(newItems);
     }, [children]);
 
+    // === MANAGE ITEM LAYOUT ===
+    const calculateLayout = useCallback(() => {
+      if (!containerRef.current || items.length === 0) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      const colWidth = (containerWidth - gap * (columns - 1)) / columns;
+      columnHeights.current = Array(columns).fill(0);
+      const newPositions: ItemPosition[] = [];
+      items.forEach((item, index) => {
+        if (item.ref.current) {
+          // Find the shortest column
+          const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current));
+          const left = shortestCol * (colWidth + gap);
+          const top = columnHeights.current[shortestCol] ?? 0;
+          const height = item.ref.current.offsetHeight;
+          columnHeights.current[shortestCol] = top + height + gap;
+          newPositions[index] = {
+            left,
+            top,
+            width: colWidth,
+            height,
+          };
+        }
+      });
+      setPositions(newPositions);
+    }, [items, columns, gap]);
+
     // === TRACK & MANAGE IMAGES ===
 
     const handleImageLoad = useCallback(
@@ -195,30 +219,28 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
             itemElement.classList.remove('o-masonry-grid__item-loading');
           }
         }
-        // Ensure layout is recalculated after DOM paints the item image (prevents overlap on slow/late image loads)
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
+        // Schedule layout recalculation after next paint to prevent overlap
+        const scheduleLayoutUpdate = () => {
+          const frameId = requestAnimationFrame(() => {
+            onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current);
             calculateLayout();
           });
-        });
-        onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current);
+          return () => cancelAnimationFrame(frameId);
+        };
+
+        // Clean up previous scheduled updates
+        const cleanup = scheduleLayoutUpdate();
 
         // If all images have loaded, update loading state and complete layout
         if (imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0) {
           setLayoutComplete(true);
-          setLoadingImages(false); // This ensures the loading class is removed *immediately* after images load
-          // Force a double requestAnimationFrame for final layout calculation after all images are loaded (guarantees DOM paint)
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              calculateLayout();
-              // As a failsafe, if still present for some render lag, force another setLoadingImages(false)
-              setLoadingImages(false);
-            });
-          });
+          setLoadingImages(false);
+          setTimeout(() => cleanup(), 0); // Clean up after current execution
+          scheduleLayoutUpdate();
           onLayoutComplete?.();
         }
       },
-      [onImageLoad, onLayoutComplete, imagesLoaded]
+      [onImageLoad, onLayoutComplete, imagesLoaded, calculateLayout]
     );
 
     const trackImages = useCallback(() => {
@@ -262,40 +284,28 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       };
     }, [imagesLoaded, handleImageLoad, onLayoutComplete]);
 
-    // === MANAGE ITEM LAYOUT ===
-    const calculateLayout = useCallback(() => {
-      if (!containerRef.current || items.length === 0) return;
-      const containerWidth = containerRef.current.offsetWidth;
-      const colWidth = (containerWidth - gap * (columns - 1)) / columns;
-      columnHeights.current = Array(columns).fill(0);
-      const newPositions: ItemPosition[] = [];
-      items.forEach((item, index) => {
-        if (item.ref.current) {
-          // Find the shortest column
-          const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current));
-          const left = shortestCol * (colWidth + gap);
-          const top = columnHeights.current[shortestCol] ?? 0;
-          const height = item.ref.current.offsetHeight;
-          columnHeights.current[shortestCol] = top + height + gap;
-          newPositions[index] = {
-            left,
-            top,
-            width: colWidth,
-            height,
-          };
-        }
-      });
-      setPositions(newPositions);
-    }, [items, columns, gap]);
-
     // === OBSERVE CONTAINER RESIZE ===
     useEffect(() => {
       if (!containerRef.current) return undefined;
+      
       let animationFrame: ReturnType<typeof requestAnimationFrame> | null = null;
-      const observer = new ResizeObserver(() => {
-        if (animationFrame) cancelAnimationFrame(animationFrame);
-        animationFrame = requestAnimationFrame(() => calculateLayout());
+      let lastWidth = 0;
+      
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        const currentWidth = entry.contentRect.width;
+        
+        // Only recalculate if width actually changed (prevents excessive calculations)
+        if (Math.abs(currentWidth - lastWidth) > 1) {
+          if (animationFrame) cancelAnimationFrame(animationFrame);
+          animationFrame = requestAnimationFrame(() => {
+            calculateLayout();
+            lastWidth = currentWidth;
+          });
+        }
       });
+      
       observer.observe(containerRef.current);
       return () => {
         observer.disconnect();
@@ -317,26 +327,28 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       // Only reset layoutComplete when items or columns change
     }, [items, columns, calculateLayout, imagesLoaded, trackImages]);
 
-    // === NEW: Add ResizeObservers to all grid items for bulletproof image+content measurement ===
+    // === ADD RESIZEOBSERVERS TO GRID ITEMS FOR DYNAMIC CONTENT MEASUREMENT ===
     React.useEffect(() => {
-      // Clean up old observers if items ever change
       const observers: ResizeObserver[] = [];
+      let animationFrame: ReturnType<typeof requestAnimationFrame> | null = null;
+      
+      // Debounced layout calculation for item resize events
+      const debouncedCalculateLayout = () => {
+        if (animationFrame) cancelAnimationFrame(animationFrame);
+        animationFrame = requestAnimationFrame(calculateLayout);
+      };
+      
       items.forEach(item => {
         if (item.ref.current) {
-          const obs = new ResizeObserver(() => {
-            // Double rAF: ensures layout only runs after DOM/paint/async renders
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                calculateLayout();
-              });
-            });
-          });
+          const obs = new ResizeObserver(debouncedCalculateLayout);
           obs.observe(item.ref.current);
           observers.push(obs);
         }
       });
+      
       return () => {
         observers.forEach(obs => obs.disconnect());
+        if (animationFrame) cancelAnimationFrame(animationFrame);
       };
     }, [items, calculateLayout]);
 
@@ -376,7 +388,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
             return (
               <div
                 key={item.id}
-                ref={item.ref as React.LegacyRef<HTMLDivElement>}
+                ref={item.ref as React.RefObject<HTMLDivElement>}
                 style={{ opacity: 0, position: 'absolute' }}
               >
                 {item.element}
@@ -386,7 +398,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           return (
             <div
               key={item.id}
-              ref={item.ref as React.LegacyRef<HTMLDivElement>}
+              ref={item.ref as React.RefObject<HTMLDivElement>}
               className="o-masonry-grid__item"
               style={{
                 position: 'absolute',

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

@@ -6,7 +6,7 @@ import type { GlassSize } from '../../types/components';
 const { CONSTANTS } = ATOMIX_GLASS;
 
 interface UseGlassSizeProps {
-  glassRef: React.RefObject<HTMLDivElement>;
+  glassRef: React.RefObject<HTMLDivElement | null>;
   effectiveBorderRadius: number;
   cachedRectRef?: React.MutableRefObject<DOMRect | null>;
 }

package/src/lib/composables/useAccordion.ts

@@ -1,5 +1,5 @@
 import { AccordionProps, AccordionState, IconPosition, ElementRefs } from '../types/components';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { ACCORDION } from '../constants/components';
 
 /**
@@ -72,20 +72,20 @@ export function useAccordion(
   /**
    * Update panel height based on content
    */
-  const updatePanelHeight = (): void => {
+  const updatePanelHeight = useCallback((): void => {
     if (contentRef.current && panelRef.current) {
       const height = isOpen ? `${contentRef.current.clientHeight}px` : '0px';
       panelRef.current.style.setProperty(ACCORDION.CSS_VARS.PANEL_HEIGHT, height);
       setPanelHeight(height);
     }
-  };
+  }, [isOpen]);
 
   /**
    * Effect to update panel height when open state changes
    */
   useEffect(() => {
     updatePanelHeight();
-  }, [isOpen]);
+  }, [isOpen, updatePanelHeight]);
 
   /**
    * Effect to handle window resize and update panel height
@@ -99,7 +99,7 @@ export function useAccordion(
 
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, [isOpen]);
+  }, [isOpen, updatePanelHeight]);
 
   /**
    * Generate accordion class names based on state

package/src/lib/composables/useAtomixGlass.ts

@@ -153,9 +153,9 @@ const setCachedBackgroundDetection = (
 };
 
 interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
-  glassRef: React.RefObject<HTMLDivElement>;
-  contentRef: React.RefObject<HTMLDivElement>;
-  wrapperRef?: React.RefObject<HTMLDivElement>;
+  glassRef: React.RefObject<HTMLDivElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  wrapperRef?: React.RefObject<HTMLDivElement | null>;
   children?: React.ReactNode;
   isFixedOrSticky?: boolean;
   // Phase 1: Time-Based Animation System
@@ -775,49 +775,14 @@ export function useAtomixGlass({
   // ── Raw mouse handler — writes to TARGET refs only ──────────────────
   // The lerp loop (below) reads the targets and incrementally
   // moves the "current" refs toward them for liquid smoothing.
-  const handleGlobalMousePosition = useCallback(
-    (globalPos: MousePosition) => {
-      if (externalGlobalMousePosition && externalMouseOffset) {
-        return;
-      }
-
-      if (effectiveWithoutEffects) {
-        return;
-      }
-
-      const container = mouseContainer?.current || glassRef.current;
-      if (!container) {
-        return;
-      }
-
-      // Use cached rect if available, otherwise get new one
-      let rect = cachedRectRef.current;
-      if (!rect || rect.width === 0 || rect.height === 0) {
-        rect = container.getBoundingClientRect();
-        cachedRectRef.current = rect;
-      }
 
-      if (rect.width === 0 || rect.height === 0) {
-        return;
-      }
-
-      const center = calculateElementCenter(rect);
-
-      // Write raw target — the lerp loop will smoothly pursue it
-      targetMouseOffsetRef.current = {
-        x: ((globalPos.x - center.x) / rect.width) * 100,
-        y: ((globalPos.y - center.y) / rect.height) * 100,
-      };
-      targetGlobalMousePositionRef.current = globalPos;
-    },
-    [
-      mouseContainer,
-      glassRef,
-      externalGlobalMousePosition,
-      externalMouseOffset,
-      effectiveWithoutEffects,
-    ]
-  );
+  const stopLerpLoop = useCallback(() => {
+    lerpActiveRef.current = false;
+    if (lerpRafRef.current !== null) {
+      cancelAnimationFrame(lerpRafRef.current);
+      lerpRafRef.current = null;
+    }
+  }, []);
 
   // ── Lerp animation loop ─────────────────────────────────────────────
   // Continuously interpolates the current offset toward the target.
@@ -827,20 +792,18 @@ export function useAtomixGlass({
     lerpActiveRef.current = true;
 
     const LERP_T = CONSTANTS.LERP_FACTOR; // 0.08 – lower = more viscous
-    const EPSILON = 0.05; // Stop iterating when close enough
+    const EPSILON = 0.01; // Snap when close enough
 
     const tick = () => {
       if (!lerpActiveRef.current) return;
 
-      // Add ref validity check to prevent memory leaks
-      if (!glassRef.current || !wrapperRef?.current) {
+      if (!glassRef.current) {
         lerpActiveRef.current = false;
         return;
       }
 
       const cur = internalMouseOffsetRef.current;
       const tgt = targetMouseOffsetRef.current;
-
       const dx = tgt.x - cur.x;
       const dy = tgt.y - cur.y;
 
@@ -848,22 +811,53 @@ export function useAtomixGlass({
       if (Math.abs(dx) < EPSILON && Math.abs(dy) < EPSILON) {
         internalMouseOffsetRef.current = { ...tgt };
         internalGlobalMousePositionRef.current = { ...targetGlobalMousePositionRef.current };
-      } else {
-        internalMouseOffsetRef.current = {
-          x: lerp(cur.x, tgt.x, LERP_T),
-          y: lerp(cur.y, tgt.y, LERP_T),
-        };
-        const curG = internalGlobalMousePositionRef.current;
-        const tgtG = targetGlobalMousePositionRef.current;
-        internalGlobalMousePositionRef.current = {
-          x: lerp(curG.x, tgtG.x, LERP_T),
-          y: lerp(curG.y, tgtG.y, LERP_T),
-        };
+        
+        // Final update and stop
+        updateAtomixGlassStyles(
+          wrapperRef?.current || null,
+          glassRef.current,
+          {
+            mouseOffset: internalMouseOffsetRef.current,
+            globalMousePosition: internalGlobalMousePositionRef.current,
+            glassSize,
+            isHovered,
+            isActive,
+            isOverLight: overLightConfig.isOverLight,
+            baseOverLightConfig: overLightConfig,
+            effectiveBorderRadius,
+            effectiveWithoutEffects,
+            effectiveReducedMotion,
+            elasticity,
+            directionalScale: isActive && Boolean(onClick) ? 'scale(0.96)' : 'scale(1)',
+            onClick,
+            withLiquidBlur,
+            blurAmount,
+            saturation,
+            padding,
+            isFixedOrSticky,
+          }
+        );
+        
+        stopLerpLoop();
+        return;
       }
 
-      // Imperative style update with the smoothed values
+      // Smooth step
+      internalMouseOffsetRef.current = {
+        x: lerp(cur.x, tgt.x, LERP_T),
+        y: lerp(cur.y, tgt.y, LERP_T),
+      };
+      
+      const curG = internalGlobalMousePositionRef.current;
+      const tgtG = targetGlobalMousePositionRef.current;
+      internalGlobalMousePositionRef.current = {
+        x: lerp(curG.x, tgtG.x, LERP_T),
+        y: lerp(curG.y, tgtG.y, LERP_T),
+      };
+
+      // Imperative style update
       updateAtomixGlassStyles(
-        wrapperRef.current,
+        wrapperRef?.current || null,
         glassRef.current,
         {
           mouseOffset: internalMouseOffsetRef.current,
@@ -908,15 +902,58 @@ export function useAtomixGlass({
     saturation,
     padding,
     isFixedOrSticky,
+    stopLerpLoop,
   ]);
 
-  const stopLerpLoop = useCallback(() => {
-    lerpActiveRef.current = false;
-    if (lerpRafRef.current !== null) {
-      cancelAnimationFrame(lerpRafRef.current);
-      lerpRafRef.current = null;
-    }
-  }, []);
+  const handleGlobalMousePosition = useCallback(
+    (globalPos: MousePosition) => {
+      if (externalGlobalMousePosition && externalMouseOffset) {
+        return;
+      }
+
+      if (effectiveWithoutEffects) {
+        return;
+      }
+
+      const container = mouseContainer?.current || glassRef.current;
+      if (!container) {
+        return;
+      }
+
+      // Use cached rect if available, otherwise get new one
+      let rect = cachedRectRef.current;
+      if (!rect || rect.width === 0 || rect.height === 0) {
+        rect = container.getBoundingClientRect();
+        cachedRectRef.current = rect;
+      }
+
+      if (rect.width === 0 || rect.height === 0) {
+        return;
+      }
+
+      const center = calculateElementCenter(rect);
+
+      // Write raw target — the lerp loop will smoothly pursue it
+      targetMouseOffsetRef.current = {
+        x: ((globalPos.x - center.x) / rect.width) * 100,
+        y: ((globalPos.y - center.y) / rect.height) * 100,
+      };
+      targetGlobalMousePositionRef.current = globalPos;
+
+      // Ensure the lerp loop is running to smoothly chase the new target
+      if (!lerpActiveRef.current) {
+        startLerpLoop();
+      }
+    },
+    [
+      mouseContainer,
+      glassRef,
+      externalGlobalMousePosition,
+      externalMouseOffset,
+      effectiveWithoutEffects,
+      startLerpLoop,
+    ]
+  );
 
   // Subscribe to shared mouse tracker
   useEffect(() => {
@@ -929,8 +966,8 @@ export function useAtomixGlass({
     }
 
     const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
-
-    // Start the lerp loop — it will smoothly chase the target
+    
+    // Initial start
     startLerpLoop();
 
     const updateRect = () => {
@@ -966,14 +1003,14 @@ export function useAtomixGlass({
       }
     };
   }, [
+    externalGlobalMousePosition,
+    externalMouseOffset,
+    effectiveWithoutEffects,
     handleGlobalMousePosition,
     startLerpLoop,
     stopLerpLoop,
     mouseContainer,
     glassRef,
-    externalGlobalMousePosition,
-    externalMouseOffset,
-    effectiveWithoutEffects,
   ]);
 
   // Also call updateStyles on other state changes (hover, active, etc)

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -298,8 +298,6 @@ export const updateAtomixGlassStyles = (
     // Container variables
     const style = containerElement.style;
 
-    style.setProperty('--atomix-glass-container-width', !isFixedOrSticky ? '100%' : `${glassSize.width}`);
-    style.setProperty('--atomix-glass-container-height', !isFixedOrSticky ? '100%' : `${glassSize.height}`);
     style.setProperty('--atomix-glass-container-padding', padding);
     style.setProperty('--atomix-glass-container-radius', `${effectiveBorderRadius}px`);
 

package/src/lib/composables/useBarChart.ts

@@ -325,7 +325,7 @@ export function useBarChart(datasets: ChartDataset[], options: BarChartOptions =
       }
       return value.toString();
     },
-    [options.valueFormatter]
+    [options]
   );
 
   // Calculate data label position
@@ -352,7 +352,7 @@ export function useBarChart(datasets: ChartDataset[], options: BarChartOptions =
           };
       }
     },
-    [options.dataLabelPosition]
+    [options]
   );
 
   return {

package/src/lib/composables/useChart.ts

@@ -104,9 +104,10 @@ export function useChart(initialProps?: Partial<ChartProps>) {
 
   // Cleanup animation frame on unmount
   useEffect(() => {
+    const currentRef = animationFrameRef.current;
     return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
+      if (currentRef) {
+        cancelAnimationFrame(currentRef);
       }
     };
   }, []);