@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -0,0 +1,307 @@
+import { ATOMIX_GLASS } from '../constants/components';
+import { calculateDistance, calculateElementCenter, calculateMouseInfluence, validateGlassSize, clampBlur } from '../../components/AtomixGlass/glass-utils';
+import type { GlassSize, MousePosition, OverLightObjectConfig } from '../types/components';
+
+/**
+ * Updates the styles of the AtomixGlass wrapper and container elements imperatively
+ * to avoid React re-renders on mouse movement.
+ */
+export const updateAtomixGlassStyles = (
+  wrapperElement: HTMLElement | null,
+  containerElement: HTMLElement | null,
+  params: {
+    mouseOffset: MousePosition;
+    globalMousePosition: MousePosition;
+    glassSize: GlassSize;
+    isHovered: boolean;
+    isActive: boolean;
+    isOverLight: boolean;
+    baseOverLightConfig: {
+      opacity: number;
+      borderOpacity: number;
+      contrast: number;
+      brightness: number;
+      shadowIntensity: number;
+      saturationBoost: number;
+    };
+    effectiveBorderRadius: number;
+    effectiveWithoutEffects: boolean;
+    effectiveReducedMotion: boolean;
+    elasticity: number;
+    directionalScale: string;
+    onClick?: () => void;
+    withLiquidBlur?: boolean;
+    blurAmount?: number;
+    saturation?: number;
+    padding?: string;
+  }
+) => {
+  if (!wrapperElement && !containerElement) return;
+
+  const {
+    mouseOffset,
+    globalMousePosition,
+    glassSize,
+    isHovered,
+    isActive,
+    isOverLight,
+    baseOverLightConfig,
+    effectiveBorderRadius,
+    effectiveWithoutEffects,
+    effectiveReducedMotion,
+    elasticity,
+    directionalScale,
+    onClick,
+    withLiquidBlur,
+    blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
+    saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
+    padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+  } = params;
+
+  // Calculate mouse influence
+  const mouseInfluence = calculateMouseInfluence(mouseOffset);
+  const hoverIntensity = isHovered ? 1.4 : 1;
+  const activeIntensity = isActive ? 1.6 : 1;
+
+  // Calculate dynamic OverLight config
+  const overLightConfig = {
+      opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
+      contrast: Math.min(1.6, baseOverLightConfig.contrast + mouseInfluence * 0.1),
+      brightness: Math.min(1.1, baseOverLightConfig.brightness + mouseInfluence * 0.05),
+      shadowIntensity: Math.min(1.2, Math.max(0.5, baseOverLightConfig.shadowIntensity + mouseInfluence * 0.2)),
+      borderOpacity: Math.min(1.0, Math.max(0.3, baseOverLightConfig.borderOpacity + mouseInfluence * 0.1)),
+      saturationBoost: baseOverLightConfig.saturationBoost
+  };
+
+  // Calculate elastic translation
+  let elasticTranslation = { x: 0, y: 0 };
+  if (!effectiveWithoutEffects && wrapperElement) {
+    const rect = wrapperElement.getBoundingClientRect();
+    const center = calculateElementCenter(rect);
+
+    // Calculate fade in factor
+    let fadeInFactor = 0;
+    if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
+      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 });
+      fadeInFactor = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
+    }
+
+    elasticTranslation = {
+        x: (globalMousePosition.x - center.x) * elasticity * 0.1 * fadeInFactor,
+        y: (globalMousePosition.y - center.y) * elasticity * 0.1 * fadeInFactor,
+    };
+  }
+
+  const transformStyle = effectiveWithoutEffects
+      ? isActive && Boolean(onClick) ? 'scale(0.98)' : 'scale(1)'
+      : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? 'scale(0.96)' : directionalScale}`;
+
+  // Update Wrapper Styles (glassVars)
+  if (wrapperElement) {
+    const mx = mouseOffset.x;
+    const my = mouseOffset.y;
+    const absMx = Math.abs(mx);
+    const absMy = Math.abs(my);
+    const GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
+
+    const borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER;
+    const borderStop1 = Math.max(
+      GRADIENT.BORDER_STOP_1.MIN,
+      GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER
+    );
+    const borderStop2 = Math.min(
+      GRADIENT.BORDER_STOP_2.MAX,
+      GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER
+    );
+    const borderOpacities = [
+      GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW,
+      GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH,
+      GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW,
+      GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH,
+    ];
+
+    const configBorderOpacity = overLightConfig.borderOpacity;
+    const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE;
+    const blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK;
+
+    const hoverPositions = {
+        hover1: {
+          x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
+          y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1,
+        },
+        hover2: {
+          x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
+          y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2,
+        },
+        hover3: {
+          x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+          y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+        },
+      };
+
+    const basePosition = {
+        x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
+        y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER,
+    };
+
+    const opacityValues = {
+        hover1: isHovered || isActive ? 0.5 : 0,
+        hover2: isActive ? 0.5 : 0,
+        hover3: isHovered ? 0.4 : isActive ? 0.8 : 0,
+        base: isOverLight ? overLightConfig.opacity : 0,
+        over: isOverLight ? overLightConfig.opacity * 1.1 : 0,
+    };
+
+    const style = wrapperElement.style;
+
+    style.setProperty('--atomix-glass-transform', transformStyle || 'none');
+
+    // Gradients
+    style.setProperty('--atomix-glass-border-gradient-1', `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`);
+    style.setProperty('--atomix-glass-border-gradient-2', `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`);
+
+    // Hover gradients
+    style.setProperty('--atomix-glass-hover-1-gradient', isOverLight
+        ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)`
+        : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`);
+
+    style.setProperty('--atomix-glass-hover-2-gradient', isOverLight
+        ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)`
+        : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`);
+
+    style.setProperty('--atomix-glass-hover-3-gradient', isOverLight
+        ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)`
+        : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`);
+
+    style.setProperty('--atomix-glass-base-gradient', isOverLight
+        ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
+        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`);
+
+    style.setProperty('--atomix-glass-overlay-gradient', isOverLight
+        ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
+        : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`);
+
+    // Opacities
+    style.setProperty('--atomix-glass-hover-1-opacity', opacityValues.hover1.toString());
+    style.setProperty('--atomix-glass-hover-2-opacity', opacityValues.hover2.toString());
+    style.setProperty('--atomix-glass-hover-3-opacity', opacityValues.hover3.toString());
+    style.setProperty('--atomix-glass-base-opacity', opacityValues.base.toString());
+    style.setProperty('--atomix-glass-overlay-opacity', opacityValues.over.toString());
+    style.setProperty('--atomix-glass-overlay-highlight-opacity', (opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER).toString());
+
+    // Other
+    style.setProperty('--atomix-glass-blend-mode', isOverLight ? 'multiply' : 'overlay');
+    style.setProperty('--atomix-glass-radius', `${effectiveBorderRadius}px`);
+  }
+
+  // Update Container Styles (containerVars)
+  if (containerElement) {
+    const mx = mouseOffset.x;
+    const my = mouseOffset.y;
+
+    // Constants for blur calculation
+    const EDGE_BLUR_MULTIPLIER = 1.25;
+    const CENTER_BLUR_MULTIPLIER = 1.1;
+    const FLOW_BLUR_MULTIPLIER = 1.2;
+    const MOUSE_INFLUENCE_BLUR_FACTOR = 0.15;
+    const EDGE_INTENSITY_MOUSE_FACTOR = 0.15;
+    const CENTER_INTENSITY_MOUSE_FACTOR = 0.1;
+    const MAX_BLUR_RELATIVE = 2;
+
+    const rect = containerElement.getBoundingClientRect();
+
+    let liquidBlur = {
+        baseBlur: blurAmount,
+        edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
+        centerBlur: blurAmount * CENTER_BLUR_MULTIPLIER,
+        flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER,
+    };
+
+    if (withLiquidBlur && rect) {
+        const mouseInfluence = calculateMouseInfluence(mouseOffset);
+        const maxBlur = blurAmount * MAX_BLUR_RELATIVE;
+
+        const baseBlur = Math.min(
+          maxBlur,
+          blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR
+        );
+        const edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
+        const edgeBlur = Math.min(maxBlur, baseBlur * (0.8 + edgeIntensity * 0.4));
+        const centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
+        const centerBlur = Math.min(maxBlur, baseBlur * (0.3 + centerIntensity * 0.3));
+        const flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
+
+        liquidBlur = {
+          baseBlur: clampBlur(baseBlur),
+          edgeBlur: clampBlur(edgeBlur),
+          centerBlur: clampBlur(centerBlur),
+          flowBlur: clampBlur(flowBlur),
+        };
+    }
+
+    // Backdrop filter
+    let backdropFilterString = `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`;
+
+    const dynamicSaturation = saturation + (liquidBlur.baseBlur || 0) * 20;
+    const area = rect ? rect.width * rect.height : 0;
+    const areaIsLarge = area > 180000;
+    const devicePrefersPerformance = effectiveReducedMotion || effectiveWithoutEffects;
+    const useMultiPass = withLiquidBlur && !devicePrefersPerformance && !areaIsLarge;
+
+    if (useMultiPass) {
+        const weightedBlur = clampBlur(
+            liquidBlur.baseBlur * 0.4 +
+            liquidBlur.edgeBlur * 0.25 +
+            liquidBlur.centerBlur * 0.15 +
+            liquidBlur.flowBlur * 0.2
+        );
+        backdropFilterString = `blur(${weightedBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
+    } else {
+        const effectiveBlur = clampBlur(
+          Math.max(
+            liquidBlur.baseBlur,
+            liquidBlur.edgeBlur * 0.8,
+            liquidBlur.centerBlur * 1.1,
+            liquidBlur.flowBlur * 0.9
+          )
+        );
+        backdropFilterString = `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
+    }
+
+    // Container variables
+    const style = containerElement.style;
+
+    style.setProperty('--atomix-glass-container-width', `${glassSize.width}`);
+    style.setProperty('--atomix-glass-container-height', `${glassSize.height}`);
+    style.setProperty('--atomix-glass-container-padding', padding);
+    style.setProperty('--atomix-glass-container-radius', `${effectiveBorderRadius}px`);
+
+    style.setProperty('--atomix-glass-container-backdrop', backdropFilterString);
+
+    // Shadows
+    style.setProperty('--atomix-glass-container-shadow', isOverLight
+        ? [
+            `inset 0 1px 0 rgba(255, 255, 255, ${(0.4 + mx * 0.002) * (overLightConfig.shadowIntensity || 1)})`,
+            `inset 0 -1px 0 rgba(0, 0, 0, ${(0.2 + Math.abs(my) * 0.001) * (overLightConfig.shadowIntensity || 1)})`,
+            `inset 0 0 20px rgba(0, 0, 0, ${(0.08 + Math.abs(mx + my) * 0.001) * (overLightConfig.shadowIntensity || 1)})`,
+            `0 2px 12px rgba(0, 0, 0, ${(0.12 + Math.abs(my) * 0.002) * (overLightConfig.shadowIntensity || 1)})`,
+          ].join(', ')
+        : '0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset');
+
+    style.setProperty('--atomix-glass-container-shadow-opacity', effectiveWithoutEffects ? '0' : '1');
+
+    style.setProperty('--atomix-glass-container-bg', isOverLight
+        ? `linear-gradient(${180 + mx * 0.5}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)`
+        : 'none');
+
+    style.setProperty('--atomix-glass-container-text-shadow', isOverLight
+        ? '0px 2px 12px rgba(0, 0, 0, 0)'
+        : '0px 2px 12px rgba(0, 0, 0, 0.4)');
+
+    style.setProperty('--atomix-glass-container-box-shadow', isOverLight
+        ? '0px 16px 70px rgba(0, 0, 0, 0.75)'
+        : '0px 12px 40px rgba(0, 0, 0, 0.25)');
+  }
+};

package/src/lib/composables/useBarChart.ts

@@ -18,7 +18,7 @@ export interface BarChartOptions {
   /**
    * Corner radius for bars
    */
-  cornerRadius?: number;
+  borderRadius?: number;
 
   /**
    * Padding between bar groups

package/src/lib/composables/useBreadcrumb.ts

@@ -1,8 +1,8 @@
-import { BreadcrumbItem } from '../../components/Breadcrumb/Breadcrumb';
+import { BreadcrumbItemType } from '../../components/Breadcrumb/Breadcrumb';
 import { BREADCRUMB } from '../constants/components';
 
 interface BreadcrumbOptions {
-  items: BreadcrumbItem[];
+  items: BreadcrumbItemType[];
   divider?: React.ReactNode;
   className?: string;
   'aria-label'?: string;
@@ -40,7 +40,7 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
    * @param isLast - Whether this is the last item
    * @returns Class string
    */
-  const generateItemClass = (item: BreadcrumbItem, isLast: boolean): string => {
+  const generateItemClass = (item: BreadcrumbItemType, isLast: boolean): string => {
     return [BREADCRUMB.CLASSES.ITEM, item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : '']
       .filter(Boolean)
       .join(' ')
@@ -53,7 +53,7 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
    * @param isLast - Whether this is the last item
    * @returns Whether item should be a link
    */
-  const isItemLink = (item: BreadcrumbItem, isLast: boolean): boolean => {
+  const isItemLink = (item: BreadcrumbItemType, isLast: boolean): boolean => {
     return Boolean(item.href && !item.active && !isLast);
   };
 
@@ -62,9 +62,9 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
    * @param jsonString - JSON string of items
    * @returns Array of breadcrumb items
    */
-  const parseItemsFromJson = (jsonString: string): BreadcrumbItem[] => {
+  const parseItemsFromJson = (jsonString: string): BreadcrumbItemType[] => {
     try {
-      return JSON.parse(jsonString) as BreadcrumbItem[];
+      return JSON.parse(jsonString) as BreadcrumbItemType[];
     } catch (error) {
       console.error('Error parsing breadcrumb items:', error);
       return [];

package/src/lib/composables/useChart.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CHART } from '../constants/components';
-import { ChartDataset, ChartProps } from '../types/components';
+import { ChartDataset, ChartProps, ChartDataPoint } from '../types/components';
 
 /**
  * Chart interaction state interface
@@ -527,12 +527,32 @@ export function useChart(initialProps?: Partial<ChartProps>) {
     ): ChartScales | null => {
       if (!datasets || datasets.length === 0) return null;
 
-      // Flatten all data points to find min/max values
-      const allDataPoints = datasets.flatMap(dataset => dataset.data);
-      if (allDataPoints.length === 0) return null;
+      // Calculate total points and min/max values efficiently avoiding spread operator
+      let totalPoints = 0;
+      let minValue = Infinity;
+      let maxValue = -Infinity;
+      let hasValidData = false;
+
+      for (const dataset of datasets) {
+        if (dataset.data) {
+          totalPoints += dataset.data.length;
+          const { min, max, hasValid } = getDatasetBounds(dataset.data);
+          if (hasValid) {
+            if (min < minValue) minValue = min;
+            if (max > maxValue) maxValue = max;
+            hasValidData = true;
+          }
+        }
+      }
+
+      if (totalPoints === 0) return null;
+
+      // Handle case with no valid numeric data
+      if (!hasValidData) {
+        minValue = 0;
+        maxValue = 0;
+      }
 
-      const minValue = Math.min(...allDataPoints.map(point => point.value));
-      const maxValue = Math.max(...allDataPoints.map(point => point.value));
       const valueRange = maxValue - minValue || 1; // Avoid division by zero
 
       // Apply padding
@@ -540,7 +560,7 @@ export function useChart(initialProps?: Partial<ChartProps>) {
       const innerHeight = height - padding.top - padding.bottom;
 
       // Create scale functions
-      const xScale = (index: number, dataLength: number = allDataPoints.length) => {
+      const xScale = (index: number, dataLength: number = totalPoints) => {
         if (dataLength <= 1) return padding.left + innerWidth / 2;
         return padding.left + (index / (dataLength - 1)) * innerWidth;
       };
@@ -641,6 +661,23 @@ export function useChartData(
     realTimeInterval = 1000,
   } = options || {};
 
+  const lastDataSignature = useRef<string>('');
+
+  // Helper to generate a signature for the dataset to detect changes
+  const getDatasetSignature = useCallback((data: ChartDataset[]) => {
+    return data
+      .map(d => {
+        // Use JSON stringify for robustness to detect any value change, including historical data
+        return `${d.label}:${JSON.stringify(d.data)}`;
+      })
+      .join('|');
+  }, []);
+
+  // Update signature when processedData changes (e.g. via props)
+  useEffect(() => {
+    lastDataSignature.current = getDatasetSignature(processedData);
+  }, [processedData, getDatasetSignature]);
+
   // Data decimation for performance
   const decimateData = useCallback(
     (data: ChartDataset[], maxPoints: number) => {
@@ -677,10 +714,20 @@ export function useChartData(
     const n = values.length;
     if (n < 2) return values.map((): null => null);
 
-    const xSum = values.reduce((sum, _, i) => sum + i, 0);
-    const ySum = values.reduce((sum, val) => sum + val, 0);
-    const xySum = values.reduce((sum, val, i) => sum + i * val, 0);
-    const x2Sum = values.reduce((sum, _, i) => sum + i * i, 0);
+    let xSum = 0;
+    let ySum = 0;
+    let xySum = 0;
+    let x2Sum = 0;
+
+    for (let i = 0; i < n; i++) {
+      const val = values[i];
+      // Treat null/undefined as 0 to match original reduce behavior
+      const safeVal = typeof val === 'number' ? val : 0;
+      xSum += i;
+      ySum += safeVal;
+      xySum += i * safeVal;
+      x2Sum += i * i;
+    }
 
     const slope = (n * xySum - xSum * ySum) / (n * x2Sum - xSum * xSum);
     const intercept = (ySum - slope * xSum) / n;
@@ -711,11 +758,20 @@ export function useChartData(
     if (!enableRealTime) return undefined;
 
     const interval = setInterval(() => {
-      setProcessedData(prev => [...prev]); // Trigger re-render for real-time updates
+      setProcessedData(prev => {
+        const currentSignature = getDatasetSignature(prev);
+        // Only trigger update if signature changed
+        if (currentSignature === lastDataSignature.current) {
+          return prev;
+        }
+        // Note: We do not update lastDataSignature.current here to avoid side effects in updater.
+        // It will be updated by the useEffect([processedData]) when the state update completes.
+        return [...prev];
+      });
     }, realTimeInterval);
 
     return () => clearInterval(interval);
-  }, [enableRealTime, realTimeInterval]);
+  }, [enableRealTime, realTimeInterval, getDatasetSignature]);
 
   return {
     processedData,
@@ -831,11 +887,11 @@ export function useChartAccessibility(
     const datasetDescriptions = datasets
       .map((dataset, i) => {
         const dataCount = dataset.data?.length || 0;
-        const values = dataset.data?.map(d => d.value).filter(v => typeof v === 'number') || [];
-        const min = values.length > 0 ? Math.min(...values) : 0;
-        const max = values.length > 0 ? Math.max(...values) : 0;
+        const { min, max, hasValid } = getDatasetBounds(dataset.data);
+        const minVal = hasValid ? min : 0;
+        const maxVal = hasValid ? max : 0;
 
-        return `Dataset ${i + 1}: ${dataset.label}, ${dataCount} points, range ${min} to ${max}`;
+        return `Dataset ${i + 1}: ${dataset.label}, ${dataCount} points, range ${minVal} to ${maxVal}`;
       })
       .join('. ');
 
@@ -878,14 +934,13 @@ export function useChartPerformance(
 
     // Cache expensive scale calculations
     return datasets.map(dataset => {
-      const values = dataset.data?.map(d => d.value).filter(v => typeof v === 'number') || [];
-      const validValues = values.length > 0 ? values : [0];
+      const { min, max, hasValid } = getDatasetBounds(dataset.data);
 
       return {
         label: dataset.label,
         dataLength: dataset.data?.length || 0,
-        minValue: Math.min(...validValues),
-        maxValue: Math.max(...validValues),
+        minValue: hasValid ? min : 0,
+        maxValue: hasValid ? max : 0,
       };
     });
   }, [datasets, enableMemoization]);
@@ -937,3 +992,31 @@ export function useChartPerformance(
     getVisibleRange,
   };
 }
+
+/**
+ * Helper to calculate min/max values from a dataset efficiently
+ * avoiding spread operator which can cause stack overflow on large arrays
+ */
+export function getDatasetBounds(data: ChartDataPoint[] | undefined): {
+  min: number;
+  max: number;
+  hasValid: boolean;
+} {
+  let min = Infinity;
+  let max = -Infinity;
+  let hasValid = false;
+
+  if (data && data.length > 0) {
+    for (let i = 0; i < data.length; i++) {
+      const point = data[i];
+      if (point && typeof point.value === 'number') {
+        const val = point.value;
+        if (val < min) min = val;
+        if (val > max) max = val;
+        hasValid = true;
+      }
+    }
+  }
+
+  return { min, max, hasValid };
+}

package/src/lib/composables/useHeroBackgroundSlider.ts

@@ -55,6 +55,7 @@ export function useHeroBackgroundSlider(
   const [isTransitioning, setIsTransitioning] = useState(false);
   const autoplayRef = useRef<NodeJS.Timeout | null>(null);
   const isPausedRef = useRef(false);
+  const callbackRef = useRef<() => void>();
 
   // Create refs for slide containers
   const slideRefs = useMemo(
@@ -124,6 +125,15 @@ export function useHeroBackgroundSlider(
     handleSlideTransition(nextIndex);
   }, [currentIndex, slides.length, loop, handleSlideTransition]);
 
+  // Update callbackRef whenever nextSlide or isTransitioning changes
+  useEffect(() => {
+    callbackRef.current = () => {
+      if (!isPausedRef.current && !isTransitioning) {
+        nextSlide();
+      }
+    };
+  }, [nextSlide, isTransitioning]);
+
   /**
    * Pause autoplay
    */
@@ -146,13 +156,13 @@ export function useHeroBackgroundSlider(
       // Restart autoplay
       if (!autoplayRef.current) {
         autoplayRef.current = setInterval(() => {
-          if (!isPausedRef.current && !isTransitioning) {
-            nextSlide();
+          if (callbackRef.current) {
+            callbackRef.current();
           }
         }, delay);
       }
     }
-  }, [autoplay, slides.length, nextSlide, isTransitioning]);
+  }, [autoplay, slides.length]);
 
   // Autoplay effect
   useEffect(() => {
@@ -161,7 +171,6 @@ export function useHeroBackgroundSlider(
     }
 
     const delay = typeof autoplay === 'object' ? autoplay.delay : 3000;
-    const pauseOnHover = typeof autoplay === 'object' ? autoplay.pauseOnHover : false;
 
     // Clear any existing interval
     if (autoplayRef.current) {
@@ -172,8 +181,8 @@ export function useHeroBackgroundSlider(
     // Start autoplay if not paused
     if (!isPausedRef.current) {
       autoplayRef.current = setInterval(() => {
-        if (!isPausedRef.current && !isTransitioning) {
-          nextSlide();
+        if (callbackRef.current) {
+          callbackRef.current();
         }
       }, delay);
     }
@@ -184,7 +193,7 @@ export function useHeroBackgroundSlider(
         autoplayRef.current = null;
       }
     };
-  }, [autoplay, slides.length, nextSlide, isTransitioning]);
+  }, [autoplay, slides.length]);
 
   // Initialize first video if needed
   useEffect(() => {