@shohojdhara/atomix 0.3.5 → 0.3.6

package/dist/charts.js

@@ -1730,10 +1730,11 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
     width: 0,
     height: 0
 }, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
-    // Use React's useId() for SSR compatibility
-    // Note: In Next.js, IDs may differ between server and client
-    // We'll suppress hydration warnings on elements that use this ID
-    const filterId = useId(), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
+    // Generate a stable, deterministic ID for SSR compatibility
+    // React's useId() should produce the same ID on server and client for the same
+    // component position in the tree. We use useState to ensure the ID is only
+    // generated once and remains stable across renders.
+    const baseId = useId(), [filterId] = useState((() => `atomix-glass-filter-${baseId.replace(/:/g, "-").replace(/^[^a-z]/i, "atomix-")}`)), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
@@ -2533,7 +2534,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
  */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, cornerRadius: cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, disableEffects: disableEffects = !1, enableLiquidBlur: enableLiquidBlur = !1, enableBorderEffect: enableBorderEffect = !0, enableOverLightLayers: enableOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, enablePerformanceMonitoring: enablePerformanceMonitoring = !1, debugCornerRadius: debugCornerRadius = !1, debugOverLight: debugOverLight = !1}) {
-    const glassRef = useRef(null), contentRef = useRef(null), opacityCacheRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveCornerRadius: effectiveCornerRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveDisableEffects: effectiveDisableEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+    const glassRef = useRef(null), contentRef = useRef(null), opacityCacheRef = useRef(null), rgbCacheRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveCornerRadius: effectiveCornerRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveDisableEffects: effectiveDisableEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         cornerRadius: cornerRadius,
@@ -2553,26 +2554,43 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), isOverLight = overLightConfig.isOverLight, shouldRenderOverLightLayers = enableOverLightLayers && isOverLight;
     // Read CSS custom properties once on mount and cache them
     useEffect((() => {
-        if ("undefined" != typeof window && glassRef.current && !opacityCacheRef.current) try {
-            const computedStyle = window.getComputedStyle(glassRef.current), opacity50Value = computedStyle.getPropertyValue("--atomix-opacity-50").trim(), opacity40Value = computedStyle.getPropertyValue("--atomix-opacity-40").trim(), opacity80Value = computedStyle.getPropertyValue("--atomix-opacity-80").trim(), opacity0Value = computedStyle.getPropertyValue("--atomix-opacity-0").trim(), parseOpacity = (value, defaultValue) => {
-                if (!value) return defaultValue;
-                const parsed = parseFloat(value);
-                return isNaN(parsed) ? defaultValue : parsed;
-            };
-            opacityCacheRef.current = {
-                opacity50: parseOpacity(opacity50Value, .5),
-                opacity40: parseOpacity(opacity40Value, .4),
-                opacity80: parseOpacity(opacity80Value, .8),
-                opacity0: parseOpacity(opacity0Value, 0)
-            };
+        if ("undefined" != typeof window && glassRef.current) try {
+            const computedStyle = window.getComputedStyle(glassRef.current);
+            // Cache opacity values
+                        if (!opacityCacheRef.current) {
+                const opacity50Value = computedStyle.getPropertyValue("--atomix-opacity-50").trim(), opacity40Value = computedStyle.getPropertyValue("--atomix-opacity-40").trim(), opacity80Value = computedStyle.getPropertyValue("--atomix-opacity-80").trim(), opacity0Value = computedStyle.getPropertyValue("--atomix-opacity-0").trim(), parseOpacity = (value, defaultValue) => {
+                    if (!value) return defaultValue;
+                    const parsed = parseFloat(value);
+                    return isNaN(parsed) ? defaultValue : parsed;
+                };
+                opacityCacheRef.current = {
+                    opacity50: parseOpacity(opacity50Value, .5),
+                    opacity40: parseOpacity(opacity40Value, .4),
+                    opacity80: parseOpacity(opacity80Value, .8),
+                    opacity0: parseOpacity(opacity0Value, 0)
+                };
+            }
+            // Cache RGB color values from design tokens
+                        if (!rgbCacheRef.current) {
+                // Try to read from design tokens, fallback to defaults
+                const whiteRgbValue = computedStyle.getPropertyValue("--atomix-light-rgb").trim() || computedStyle.getPropertyValue("--atomix-white-rgb").trim() || "", blackRgbValue = computedStyle.getPropertyValue("--atomix-dark-rgb").trim() || computedStyle.getPropertyValue("--atomix-black-rgb").trim() || "";
+                rgbCacheRef.current = {
+                    whiteRgb: whiteRgbValue || "255, 255, 255",
+                    // Fallback to white RGB
+                    blackRgb: blackRgbValue || "0, 0, 0"
+                };
+            }
         } catch (error) {
             // Fallback to defaults if reading fails
-            opacityCacheRef.current = {
+            opacityCacheRef.current || (opacityCacheRef.current = {
                 opacity50: .5,
                 opacity40: .4,
                 opacity80: .8,
                 opacity0: 0
-            };
+            }), rgbCacheRef.current || (rgbCacheRef.current = {
+                whiteRgb: "255, 255, 255",
+                blackRgb: "0, 0, 0"
+            });
         }
     }), []);
     // Calculate base style with transforms (only dynamic values)
@@ -2623,13 +2641,11 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         };
     }), [ isHovered, isActive, isOverLight, overLightOpacity ]), gradientIsOverLight = gradientCalculations.isOverLight, gradientMx = gradientCalculations.mx, gradientMy = gradientCalculations.my, gradientBorderGradientAngle = gradientCalculations.borderGradientAngle, gradientBorderStop1 = gradientCalculations.borderStop1, gradientBorderStop2 = gradientCalculations.borderStop2, gradientBorderOpacity1 = gradientCalculations.borderOpacity1, gradientBorderOpacity2 = gradientCalculations.borderOpacity2, gradientBorderOpacity3 = gradientCalculations.borderOpacity3, gradientBorderOpacity4 = gradientCalculations.borderOpacity4, gradientHover1X = gradientCalculations.hover1X, gradientHover1Y = gradientCalculations.hover1Y, gradientHover2X = gradientCalculations.hover2X, gradientHover2Y = gradientCalculations.hover2Y, gradientHover3X = gradientCalculations.hover3X, gradientHover3Y = gradientCalculations.hover3Y, gradientBaseX = gradientCalculations.baseX, gradientBaseY = gradientCalculations.baseY, positionStylesPosition = positionStyles.position, positionStylesTop = positionStyles.top, positionStylesLeft = positionStyles.left, adjustedSizeWidth = adjustedSize.width, adjustedSizeHeight = adjustedSize.height, baseStyleTransform = baseStyle.transform, opacityValuesHover1 = opacityValues.hover1, opacityValuesHover2 = opacityValues.hover2, opacityValuesHover3 = opacityValues.hover3, opacityValuesBase = opacityValues.base, opacityValuesOver = opacityValues.over, glassVars = useMemo((() => {
         // RGB color values for rgba() functions
-        // Note: CSS doesn't support rgba(var(--rgb), opacity) syntax, so we use direct values
-        // These values align with design tokens: --atomix-white-rgb and --atomix-black-rgb
-        // The actual RGB values are defined in SCSS and should match these fallbacks
-        // TODO: Consider reading from CSS custom properties if browser support improves
-        const whiteColor = "255, 255, 255";
- // Matches --atomix-white-rgb design token
-                // Matches --atomix-black-rgb design token
+        // Note: CSS doesn't support rgba(var(--rgb), opacity) syntax - this is a CSS specification
+        // limitation, not a browser support issue. We read RGB values from design tokens at mount
+        // and cache them for performance. Falls back to defaults if tokens are not available.
+        // Uses design tokens: --atomix-light-rgb / --atomix-white-rgb and --atomix-dark-rgb / --atomix-black-rgb
+        const whiteColor = rgbCacheRef.current?.whiteRgb || "255, 255, 255", blackColor = rgbCacheRef.current?.blackRgb || "0, 0, 0";
         return {
             // Standard CSS custom properties for dynamic values
             "--atomix-glass-radius": `${effectiveCornerRadius}px`,
@@ -2647,15 +2663,15 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             "--atomix-glass-border-gradient-1": `linear-gradient(${gradientBorderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${gradientBorderOpacity1}) ${gradientBorderStop1}%, rgba(${whiteColor}, ${gradientBorderOpacity2}) ${gradientBorderStop2}%, rgba(${whiteColor}, 0) 100%)`,
             "--atomix-glass-border-gradient-2": `linear-gradient(${gradientBorderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${gradientBorderOpacity3}) ${gradientBorderStop1}%, rgba(${whiteColor}, ${gradientBorderOpacity4}) ${gradientBorderStop2}%, rgba(${whiteColor}, 0) 100%)`,
             "--atomix-glass-hover-1-opacity": opacityValuesHover1,
-            "--atomix-glass-hover-1-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover1X}% ${gradientHover1Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${gradientHover1X}% ${gradientHover1Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
+            "--atomix-glass-hover-1-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover1X}% ${gradientHover1Y}%, 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 ${gradientHover1X}% ${gradientHover1Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
             "--atomix-glass-hover-2-opacity": opacityValuesHover2,
-            "--atomix-glass-hover-2-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover2X}% ${gradientHover2Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${gradientHover2X}% ${gradientHover2Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
+            "--atomix-glass-hover-2-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover2X}% ${gradientHover2Y}%, 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 ${gradientHover2X}% ${gradientHover2Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
             "--atomix-glass-hover-3-opacity": opacityValuesHover3,
-            "--atomix-glass-hover-3-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover3X}% ${gradientHover3Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${gradientHover3X}% ${gradientHover3Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
+            "--atomix-glass-hover-3-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover3X}% ${gradientHover3Y}%, 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 ${gradientHover3X}% ${gradientHover3Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
             "--atomix-glass-base-opacity": opacityValuesBase,
-            "--atomix-glass-base-gradient": gradientIsOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + gradientMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + gradientMy * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + Math.abs(gradientMx) * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+            "--atomix-glass-base-gradient": gradientIsOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + gradientMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + gradientMy * 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 + Math.abs(gradientMx) * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
             "--atomix-glass-overlay-opacity": opacityValuesOver,
-            "--atomix-glass-overlay-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientBaseX}% ${gradientBaseY}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + Math.abs(gradientMx) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + Math.abs(gradientMy) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+            "--atomix-glass-overlay-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientBaseX}% ${gradientBaseY}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + Math.abs(gradientMx) * 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 + Math.abs(gradientMy) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
         };
     }), [ 
     // Position styles - only specific properties
@@ -3175,16 +3191,8 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         interactive: interactive,
         panEnabled: panEnabled
     });
-    // Legacy handlers for backward compatibility
-        useCallback((() => {
-        toolbarHandlers.onFullscreen(!toolbarState.isFullscreen);
-    }), [ toolbarHandlers, toolbarState.isFullscreen ]), useCallback((async format => {
-        await toolbarHandlers.onExport(format);
-    }), [ toolbarHandlers ]), useCallback((() => {
-        toolbarHandlers.onRefresh();
-    }), [ toolbarHandlers ]), 
     // Sync all toolbar state with component state
-    useEffect((() => {
+        useEffect((() => {
         setIsFullscreen(toolbarState.isFullscreen), setIsExporting(toolbarState.isExporting);
     }), [ toolbarState.isFullscreen, toolbarState.isExporting ]);
     // Render enhanced toolbar
@@ -4048,8 +4056,7 @@ const AreaChart =  memo( forwardRef((({datasets: datasets = [], config: config =
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!renderedDatasets.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0;
+            const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0;
             return jsxs(Fragment, {
                 children: [ renderedDatasets.map(((dataset, datasetIndex) => {
                     const color = dataset.color || colors[datasetIndex], data = dataset.data || [];
@@ -4249,8 +4256,7 @@ const BarChart =  memo( forwardRef((({datasets: datasets = [], config: config =
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!renderedDatasets.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, barDimensions = calculateBarDimensions(renderedDatasets, scales.width, scales.height, scales.padding, horizontal);
+            const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, barDimensions = calculateBarDimensions(renderedDatasets, scales.width, scales.height, scales.padding, horizontal);
             return jsxs(Fragment, {
                 children: [ barDimensions.map(((bar, index) => {
                     const dataset = renderedDatasets[bar.datasetIndex];
@@ -4309,8 +4315,7 @@ const BubbleChart =  memo( forwardRef((({bubbleData: bubbleData = [], config: co
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!bubbleData.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, sizeValues = bubbleData.map((b => b.size)), minSize = Math.min(...sizeValues), sizeRange = Math.max(...sizeValues) - minSize || 1, bubbles = bubbleData.map(((bubble, index) => {
+            const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, sizeValues = bubbleData.map((b => b.size)), minSize = Math.min(...sizeValues), sizeRange = Math.max(...sizeValues) - minSize || 1, bubbles = bubbleData.map(((bubble, index) => {
                 // Calculate scaled size
                 const scaledSize = minBubbleSize + (bubble.size - minSize) / sizeRange * (maxBubbleSize - minBubbleSize), x = scales.padding.left + bubble.x / 100 * scales.innerWidth, y = scales.padding.top + scales.innerHeight - bubble.y / 100 * scales.innerHeight;
                 // Calculate position
@@ -4394,8 +4399,7 @@ const CandlestickChart =  memo( forwardRef((({candlestickData: candlestickData =
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!candlestickData.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? candlestickOptions.showTooltips ?? !0, chartWidth = scales.width - 80, chartHeight = scales.height - 80, volumeHeight = showVolume ? chartHeight * volumeHeightRatio : 0, priceHeight = chartHeight - volumeHeight, allHighs = candlestickData.map((d => d.high)), allLows = candlestickData.map((d => d.low)), priceMin = Math.min(...allLows), priceMax = Math.max(...allHighs), priceRange = priceMax - priceMin || 1, volumes = candlestickData.map((d => d.volume || 0)), volumeRange = Math.max(...volumes) || 1, gridLines = [];
+            const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? candlestickOptions.showTooltips ?? !0, chartWidth = scales.width - 80, chartHeight = scales.height - 80, volumeHeight = showVolume ? chartHeight * volumeHeightRatio : 0, priceHeight = chartHeight - volumeHeight, allHighs = candlestickData.map((d => d.high)), allLows = candlestickData.map((d => d.low)), priceMin = Math.min(...allLows), priceMax = Math.max(...allHighs), priceRange = priceMax - priceMin || 1, volumes = candlestickData.map((d => d.volume || 0)), volumeRange = Math.max(...volumes) || 1, gridLines = [];
             if (showGrid) {
                 // Horizontal grid lines for price
                 for (let i = 0; i <= 5; i++) {
@@ -4572,8 +4576,7 @@ const DonutChart =  memo( forwardRef((({datasets: datasets = [], config: config
                     percentage: point.value / total * 100
                 };
             })), showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        return jsxs(Fragment, {
+            return jsxs(Fragment, {
                 children: [ slices.map(((slice, index) => {
                     const isHovered = hoveredPoint?.pointIndex === index;
                     return jsxs("g", {
@@ -4648,8 +4651,7 @@ const FunnelChart =  memo( forwardRef((({funnelData: funnelData = [], config: co
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!funnelData.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, chartWidth = scales.width - 120, chartHeight = scales.height - 120, maxValue = Math.max(...funnelData.map((d => d.value))), processedData = funnelData.map(((item, index) => {
+            const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, chartWidth = scales.width - 120, chartHeight = scales.height - 120, maxValue = Math.max(...funnelData.map((d => d.value))), processedData = funnelData.map(((item, index) => {
                 const percentage = item.value / maxValue * 100, conversionRate = index > 0 && funnelData[index - 1] ? item.value / funnelData[index - 1].value * 100 : 100;
                 return {
                     ...item,
@@ -4767,8 +4769,7 @@ const GaugeChart =  memo( forwardRef((({value: value, min: min = 0, max: max = 1
                 const innerRadius = radius * (1 - thickness), x1 = centerX + radius * Math.cos(startAngle), y1 = centerY + radius * Math.sin(startAngle), x2 = centerX + radius * Math.cos(endAngle), y2 = centerY + radius * Math.sin(endAngle), x3 = centerX + innerRadius * Math.cos(endAngle), y3 = centerY + innerRadius * Math.sin(endAngle), x4 = centerX + innerRadius * Math.cos(startAngle), y4 = centerY + innerRadius * Math.sin(startAngle), largeArcFlag = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0, sweepFlag = endAngle > startAngle ? 1 : 0;
                 return `M ${x1} ${y1} \n                  A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}\n                  L ${x3} ${y3}\n                  A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} ${1 - sweepFlag} ${x4} ${y4}\n                  Z`;
             }, zones = [];
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        for (const zone of colorZones) {
+            for (const zone of colorZones) {
                 const zoneStart = startAngleRad + (zone.from - min) / (max - min) * angleRange, zoneEnd = startAngleRad + (zone.to - min) / (max - min) * angleRange;
                 zones.push(jsx("path", {
                     d: createArcPath(centerX, centerY, radius, zoneStart, zoneEnd, thickness),
@@ -4942,8 +4943,7 @@ const colorSchemes = {
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             const {matrix: matrix, xLabels: xLabels, yLabels: yLabels} = processedData, showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        if (!matrix.length) return null;
+            if (!matrix.length) return null;
             const cellWidth = cellConfig.width || 40, cellHeight = cellConfig.height || 40, spacing = cellConfig.spacing || 2, borderRadius = cellConfig.borderRadius || 4;
             // Leave space for x-axis labels
             return xLabels.length, yLabels.length, jsxs(Fragment, {
@@ -5211,8 +5211,7 @@ const LineChart =  memo( forwardRef((({datasets: datasets = [], config: config =
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!renderedDatasets.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0;
+            const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0;
             return toolbarState?.animationsEnabled ?? renderConfig?.animate ?? mergedLineOptions.smooth, 
             jsxs(Fragment, {
                 children: [ renderedDatasets.map(((dataset, datasetIndex) => {
@@ -5300,8 +5299,7 @@ const MultiAxisChart =  memo( forwardRef((({datasets: datasets = [], config: con
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!datasets.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const effectiveShowGrid = toolbarState?.showGrid ?? !0, chartWidth = scales.width - 120, chartHeight = scales.height - 120, yAxisConfigs = yAxes.length ? yAxes : [ {
+            const effectiveShowGrid = toolbarState?.showGrid ?? !0, chartWidth = scales.width - 120, chartHeight = scales.height - 120, yAxisConfigs = yAxes.length ? yAxes : [ {
                 id: "y-axis-1",
                 position: "left",
                 label: "Y Axis"
@@ -5599,8 +5597,7 @@ const RadarChart =  memo( forwardRef((({datasets: datasets = [], config: config
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!renderedDatasets.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, centerX = scales.width / 2, centerY = scales.height / 2, radius = .8 * Math.min(centerX, centerY), firstDataset = renderedDatasets[0];
+            const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, centerX = scales.width / 2, centerY = scales.height / 2, radius = .8 * Math.min(centerX, centerY), firstDataset = renderedDatasets[0];
             if (!firstDataset) return null;
             const dataPoints = firstDataset.data || [], angleStep = 2 * Math.PI / dataPoints.length;
             // Calculate value bounds
@@ -5746,8 +5743,7 @@ const ScatterChart =  memo( forwardRef((({datasets: datasets = [], config: confi
     config: config,
     renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
         if (!renderedDatasets.length) return null;
-        // Use toolbar state if available, fallback to config for backward compatibility
-                const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, points = [];
+        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, points = [];
         return renderedDatasets.forEach(((dataset, datasetIndex) => {
             const color = dataset.color || colors[datasetIndex % colors.length];
             dataset.data?.forEach(((point, pointIndex) => {
@@ -6034,8 +6030,7 @@ const WaterfallChart =  memo( forwardRef((({waterfallData: waterfallData = [], c
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!waterfallData.length) return null;
-            // Use toolbar state if available, fallback to config for backward compatibility
-                        const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? animate, chartWidth = scales.width - 120, chartHeight = scales.height - 120;
+            const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? animate, chartWidth = scales.width - 120, chartHeight = scales.height - 120;
             // Calculate cumulative values and positions
             let cumulativeValue = 0;
             const processedData = waterfallData.map(((item, index) => {