@shohojdhara/atomix 0.4.5 → 0.4.7

package/dist/charts.js

@@ -510,7 +510,9 @@ const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
         ENABLE_OVER_LIGHT_LAYERS: !0
     },
     CONSTANTS: {
-        ACTIVATION_ZONE: 200,
+        ACTIVATION_ZONE: 350,
+        LERP_FACTOR: .08,
+        SMOOTHSTEP_POWER: 2.5,
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
@@ -1146,7 +1148,7 @@ const ChartToolbar =  memo( forwardRef((({chartType: chartType = "line", groups:
     pan: !0,
     reset: !0
 }, exportFormats: exportFormats = [ "png", "svg", "csv" ], size: size = "md", position: position = "top", onRefresh: onRefresh, onExport: onExport, onFullscreen: onFullscreen, onSettings: onSettings, onZoomIn: onZoomIn, onZoomOut: onZoomOut, onZoomReset: onZoomReset, onPanToggle: onPanToggle, onReset: onReset, onGridToggle: onGridToggle, onLegendToggle: onLegendToggle, onTooltipsToggle: onTooltipsToggle, onAnimationsToggle: onAnimationsToggle, state: state = {}, className: className = "", ...props}, ref) => {
-    const [showExportMenu, setShowExportMenu] = useState(!1), [showSettingsMenu, setShowSettingsMenu] = useState(!1), exportMenuRef = useRef(null), settingsMenuRef = useRef(null), exportButtonRef = useRef(null), settingsButtonRef = useRef(null), effectiveDefaults = groups && groups.length > 0 ? {
+    const [showExportMenu, setShowExportMenu] = useState(!1), [showSettingsMenu, setShowSettingsMenu] = useState(!1), exportMenuRef = useRef(null), settingsMenuRef = useRef(null), exportButtonRef = useRef(null), settingsButtonRef = useRef(null), effectiveDefaults = useMemo((() => groups && groups.length > 0 ? {
         refresh: defaults.refresh ?? !0,
         export: defaults.export ?? !0,
         fullscreen: defaults.fullscreen ?? !0,
@@ -1158,7 +1160,7 @@ const ChartToolbar =  memo( forwardRef((({chartType: chartType = "line", groups:
         legend: defaults.legend ?? !0,
         tooltips: defaults.tooltips ?? !0,
         animations: defaults.animations ?? !0
-    } : defaults;
+    } : defaults), [ groups, defaults ]);
     // Close menus when clicking outside
     useEffect((() => {
         const handleClickOutside = event => {
@@ -1600,7 +1602,7 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
         // Silently handle errors
     }
     return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
-}, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
+}, lerp = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -1958,20 +1960,12 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
         onClick: onClick,
         children: jsxs("div", {
             className: ATOMIX_GLASS.INNER_CLASS,
-            style: {
-                padding: "var(--atomix-glass-container-padding)",
-                boxShadow: "var(--atomix-glass-container-box-shadow)"
-            },
             onMouseEnter: onMouseEnter,
             onMouseLeave: onMouseLeave,
             onMouseDown: onMouseDown,
             onMouseUp: onMouseUp,
             children: [ jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
-                style: {
-                    position: "absolute",
-                    inset: 0
-                },
                 children: [ jsx(GlassFilter, {
                     blurAmount: blurAmount,
                     mode: mode,
@@ -1986,26 +1980,14 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     },
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
-                        filter: `url(#${filterId})`,
-                        backdropFilter: "var(--atomix-glass-container-backdrop)",
-                        borderRadius: "var(--atomix-glass-container-radius)"
+                        filter: `url(#${filterId})`
                     }
                 }), jsx("div", {
-                    className: ATOMIX_GLASS.FILTER_SHADOW_CLASS,
-                    style: {
-                        boxShadow: "var(--atomix-glass-container-shadow)",
-                        opacity: "var(--atomix-glass-container-shadow-opacity)",
-                        background: "var(--atomix-glass-container-bg)",
-                        borderRadius: "var(--atomix-glass-container-radius)"
-                    }
+                    className: ATOMIX_GLASS.FILTER_SHADOW_CLASS
                 }) ]
             }), jsx("div", {
                 ref: contentRef,
                 className: ATOMIX_GLASS.CONTENT_CLASS,
-                style: {
-                    position: "relative",
-                    textShadow: "var(--atomix-glass-container-text-shadow)"
-                },
                 children: children
             }) ]
         })
@@ -2109,31 +2091,39 @@ class {
         saturationBoost: baseOverLightConfig.saturationBoost
     };
     // Calculate mouse influence
-        // Calculate elastic translation
-    let elasticTranslation = {
+        let computedDirectionalScale = directionalScale, elasticTranslation = {
         x: 0,
         y: 0
     };
-    if (!effectiveWithoutEffects && wrapperElement) {
+    // Calculate elastic translation and directional scale
+        if (!effectiveWithoutEffects && wrapperElement) {
         const rect = wrapperElement.getBoundingClientRect(), center = calculateElementCenter(rect);
-        // Calculate fade in factor
-        let fadeInFactor = 0;
+        // Mouse presence and edge distance logic
         if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
-            const edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
+            const deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), 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;
+            }), rawT = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE, fadeInFactor = (t => {
+                const clamped = Math.max(0, Math.min(1, t));
+                return clamped * clamped * (3 - 2 * clamped);
+            })(rawT);
+            // Directional scale
+            if (elasticTranslation = {
+                x: deltaX * elasticity * .1 * fadeInFactor,
+                y: deltaY * elasticity * .1 * fadeInFactor
+            }, !isOverLight && edgeDistance <= ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE) {
+                const centerDistance = calculateDistance(globalMousePosition, center);
+                if (centerDistance > 0) {
+                    const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * rawT, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15, softScaleX = 1 - softClamp(Math.max(0, 1 - scaleX), .2), softScaleY = 1 - softClamp(Math.max(0, 1 - scaleY), .2);
+                    computedDirectionalScale = `scaleX(${Math.max(.85, softScaleX)}) scaleY(${Math.max(.85, softScaleY)})`;
+                }
+            }
         }
-        elasticTranslation = {
-            x: (globalMousePosition.x - center.x) * elasticity * .1 * fadeInFactor,
-            y: (globalMousePosition.y - center.y) * elasticity * .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}`;
+    const transformStyle = effectiveWithoutEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : computedDirectionalScale}`;
     // Update Wrapper Styles (glassVars)
         if (wrapperElement) {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), 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 ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
@@ -2240,7 +2230,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), internalMouseOffsetRef = useRef({
         x: 0,
         y: 0
-    }), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), targetMouseOffsetRef = useRef({
+        x: 0,
+        y: 0
+    }), targetGlobalMousePositionRef = useRef({
+        x: 0,
+        y: 0
+    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = useState({
             width: 270,
             height: 69
@@ -2337,7 +2333,23 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         const timeoutId = setTimeout(extractRadius, 100);
         return () => clearTimeout(timeoutId);
     }), [ children, debugBorderRadius, contentRef ]), 
-    // Media query handlers and background detection
+    // Media query detection for reduced motion and high contrast
+    useEffect((() => {
+        if ("undefined" == typeof window || "function" != typeof window.matchMedia) return;
+        const mediaQueryReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"), mediaQueryHighContrast = window.matchMedia("(prefers-contrast: high)");
+        setUserPrefersReducedMotion(mediaQueryReducedMotion.matches), setUserPrefersHighContrast(mediaQueryHighContrast.matches);
+        const handleReducedMotionChange = e => {
+            setUserPrefersReducedMotion(e.matches);
+        }, handleHighContrastChange = e => {
+            setUserPrefersHighContrast(e.matches);
+        };
+        return mediaQueryReducedMotion.addEventListener("change", handleReducedMotionChange), 
+        mediaQueryHighContrast.addEventListener("change", handleHighContrastChange), () => {
+            mediaQueryReducedMotion.removeEventListener("change", handleReducedMotionChange), 
+            mediaQueryHighContrast.removeEventListener("change", handleHighContrastChange);
+        };
+    }), []), 
+    // Background detection for overLight auto-detect
     useEffect((() => {
         if (("auto" === overLight || "object" == typeof overLight && null !== overLight) && glassRef.current) {
             const element = glassRef.current, cachedResult = ((parentElement, overLightConfig) => {
@@ -2437,102 +2449,36 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }), 150);
             return () => clearTimeout(timeoutId);
         }
-        if ("boolean" == typeof overLight && setDetectedOverLight(!1), "function" == typeof window.matchMedia) try {
-            const mediaQueryReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"), mediaQueryHighContrast = window.matchMedia("(prefers-contrast: high)");
-            setUserPrefersReducedMotion(mediaQueryReducedMotion.matches), setUserPrefersHighContrast(mediaQueryHighContrast.matches);
-            const handleReducedMotionChange = e => {
-                setUserPrefersReducedMotion(e.matches);
-            }, handleHighContrastChange = e => {
-                setUserPrefersHighContrast(e.matches);
-            };
-            return mediaQueryReducedMotion.addEventListener ? (mediaQueryReducedMotion.addEventListener("change", handleReducedMotionChange), 
-            mediaQueryHighContrast.addEventListener("change", handleHighContrastChange)) : mediaQueryReducedMotion.addListener && (mediaQueryReducedMotion.addListener(handleReducedMotionChange), 
-            mediaQueryHighContrast.addListener(handleHighContrastChange)), () => {
-                // ignore
-            };
-        } catch (error) {
-            return;
-        }
-    }), [ overLight, glassRef, debugOverLight ]);
+        "boolean" == typeof overLight && setDetectedOverLight(!1);
+    }), [ overLight, glassRef ]);
     /**
    * Get effective overLight value based on configuration
    */
-    const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), baseOverLightConfig = useMemo((() => {
-        const isOverLight = getEffectiveOverLight(), baseConfig = {
+    const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = useMemo((() => {
+        const isOverLight = getEffectiveOverLight(), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
             isOverLight: isOverLight,
             threshold: .7,
-            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5)) : 0,
-            contrast: 1,
-            // Base contrast
-            brightness: 1,
-            // Base brightness
+            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
+            contrast: 1.4,
+            brightness: .9,
             saturationBoost: 1.3,
+            // Fixed value — dynamic saturation amplifies perceived displacement
             shadowIntensity: .9,
             borderOpacity: .7
         };
         if ("object" == typeof overLight && null !== overLight) {
-            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost);
-            return {
+            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), finalConfig = {
                 ...baseConfig,
                 threshold: validatedThreshold,
-                opacity: validatedOpacity,
+                opacity: validatedOpacity * hoverIntensity * activeIntensity,
                 contrast: validatedContrast,
                 brightness: validatedBrightness,
                 saturationBoost: validatedSaturationBoost
             };
+            return "undefined" == typeof process || process.env, finalConfig;
         }
-        return baseConfig;
-    }), [ overLight, getEffectiveOverLight, validateConfigValue ]), overLightConfig = useMemo((() => {
-        const mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1;
-        return {
-            isOverLight: baseOverLightConfig.isOverLight,
-            threshold: baseOverLightConfig.threshold,
-            opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
-            contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
-            brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
-            saturationBoost: baseOverLightConfig.saturationBoost,
-            shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence))
-        };
-    }), [ baseOverLightConfig, mouseOffset, isHovered, isActive ]), updateRectRef = useRef(null), calculateDirectionalScale = useCallback((() => {
-        if (baseOverLightConfig.isOverLight) return "scale(1)";
-        if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return "scale(1)";
-        const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), edgeDistance = calculateDistance({
-            x: edgeDistanceX,
-            y: edgeDistanceY
-        }, {
-            x: 0,
-            y: 0
-        });
-        if (edgeDistance > CONSTANTS.ACTIVATION_ZONE) return "scale(1)";
-        const fadeInFactor = 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE, centerDistance = calculateDistance(globalMousePosition, center);
-        if (0 === centerDistance) return "scale(1)";
-        const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15;
-        return `scaleX(${Math.max(.8, scaleX)}) scaleY(${Math.max(.8, scaleY)})`;
-    }), [ globalMousePosition, elasticity, glassSize, glassRef, baseOverLightConfig ]), calculateFadeInFactor = useCallback((() => {
-        if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return 0;
-        const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
-            x: edgeDistanceX,
-            y: edgeDistanceY
-        }, {
-            x: 0,
-            y: 0
-        });
-        return edgeDistance > CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
-    }), [ globalMousePosition, glassSize, glassRef ]), calculateElasticTranslation = useCallback((() => {
-        if (!glassRef.current) return {
-            x: 0,
-            y: 0
-        };
-        const fadeInFactor = calculateFadeInFactor(), rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect);
-        return {
-            x: (globalMousePosition.x - center.x) * elasticity * .1 * fadeInFactor,
-            y: (globalMousePosition.y - center.y) * elasticity * .1 * fadeInFactor
-        };
-    }), [ globalMousePosition, elasticity, calculateFadeInFactor, glassRef ]), elasticTranslation = useMemo((() => effectiveWithoutEffects ? {
-        x: 0,
-        y: 0
-    } : calculateElasticTranslation()), [ calculateElasticTranslation, effectiveWithoutEffects ]), directionalScale = useMemo((() => effectiveWithoutEffects ? "scale(1)" : calculateDirectionalScale()), [ calculateDirectionalScale, effectiveWithoutEffects ]), transformStyle = useMemo((() => effectiveWithoutEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : directionalScale}`), [ elasticTranslation, isActive, onClick, directionalScale, effectiveWithoutEffects ]), handleGlobalMousePosition = useCallback((globalPos => {
+        return "undefined" == typeof process || process.env, baseConfig;
+    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = useRef(null), handleGlobalMousePosition = useCallback((globalPos => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
         const container = mouseContainer?.current || glassRef.current;
@@ -2541,35 +2487,61 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 let rect = cachedRectRef.current;
         if (rect && 0 !== rect.width && 0 !== rect.height || (rect = container.getBoundingClientRect(), 
         cachedRectRef.current = rect), 0 === rect.width || 0 === rect.height) return;
-        const center = calculateElementCenter(rect), newOffset = {
+        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 ]), startLerpLoop = useCallback((() => {
+        if (lerpActiveRef.current) return;
+        lerpActiveRef.current = !0;
+        const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
+            if (!lerpActiveRef.current) return;
+            const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, dx = tgt.x - cur.x, dy = tgt.y - cur.y;
+            // If we're close enough, snap and park
+            if (Math.abs(dx) < .05 && Math.abs(dy) < .05) 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, tgtG = targetGlobalMousePositionRef.current;
+                internalGlobalMousePositionRef.current = {
+                    x: lerp(curG.x, tgtG.x, LERP_T),
+                    y: lerp(curG.y, tgtG.y, LERP_T)
+                };
+            }
+            // Imperative style update with the smoothed values
+                        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+                mouseOffset: internalMouseOffsetRef.current,
+                globalMousePosition: internalGlobalMousePositionRef.current,
+                glassSize: glassSize,
+                isHovered: isHovered,
+                isActive: isActive,
+                isOverLight: overLightConfig.isOverLight,
+                baseOverLightConfig: overLightConfig,
+                effectiveBorderRadius: effectiveBorderRadius,
+                effectiveWithoutEffects: effectiveWithoutEffects,
+                effectiveReducedMotion: effectiveReducedMotion,
+                elasticity: elasticity,
+                directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
+                onClick: onClick,
+                withLiquidBlur: withLiquidBlur,
+                blurAmount: blurAmount,
+                saturation: saturation,
+                padding: padding
+            }), lerpRafRef.current = requestAnimationFrame(tick);
         };
-        // Calculate offset relative to this container
-                // Store in refs instead of state
-        internalMouseOffsetRef.current = newOffset, internalGlobalMousePositionRef.current = globalPos, 
-        // Imperative style update
-        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
-            mouseOffset: newOffset,
-            globalMousePosition: globalPos,
-            glassSize: glassSize,
-            isHovered: isHovered,
-            isActive: isActive,
-            isOverLight: baseOverLightConfig.isOverLight,
-            baseOverLightConfig: baseOverLightConfig,
-            effectiveBorderRadius: effectiveBorderRadius,
-            effectiveWithoutEffects: effectiveWithoutEffects,
-            effectiveReducedMotion: effectiveReducedMotion,
-            elasticity: elasticity,
-            directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
-            // Simplified directional scale for fast path
-            onClick: onClick,
-            withLiquidBlur: withLiquidBlur,
-            blurAmount: blurAmount,
-            saturation: saturation,
-            padding: padding
-        });
-    }), [ mouseContainer, glassRef, wrapperRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects, glassSize, isHovered, isActive, baseOverLightConfig, effectiveBorderRadius, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding ]);
+ // 0.08 – lower = more viscous
+                lerpRafRef.current = requestAnimationFrame(tick);
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding ]), stopLerpLoop = useCallback((() => {
+        lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
+        lerpRafRef.current = null);
+    }), []);
     /**
    * Validate and clamp a numeric config value
    */    
@@ -2577,7 +2549,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     useEffect((() => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
-        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition), container = mouseContainer?.current || glassRef.current;
+        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
+        // Start the lerp loop — it will smoothly chase the target
+                startLerpLoop();
+        const container = mouseContainer?.current || glassRef.current;
         let resizeObserver = null;
         return container && "undefined" != typeof ResizeObserver && (resizeObserver = new ResizeObserver((() => {
             null !== updateRectRef.current && cancelAnimationFrame(updateRectRef.current), updateRectRef.current = requestAnimationFrame((() => {
@@ -2585,10 +2560,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 container && (cachedRectRef.current = container.getBoundingClientRect()), updateRectRef.current = null;
             }));
         })), resizeObserver.observe(container)), () => {
-            unsubscribe(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
+            unsubscribe(), stopLerpLoop(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
             updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
         };
-    }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
+    }), [ handleGlobalMousePosition, startLerpLoop, stopLerpLoop, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
     // Also call updateStyles on other state changes (hover, active, etc)
     useEffect((() => {
         updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
@@ -2597,22 +2572,22 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             glassSize: glassSize,
             isHovered: isHovered,
             isActive: isActive,
-            isOverLight: baseOverLightConfig.isOverLight,
-            baseOverLightConfig: baseOverLightConfig,
+            isOverLight: overLightConfig.isOverLight,
+            baseOverLightConfig: overLightConfig,
             effectiveBorderRadius: effectiveBorderRadius,
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             elasticity: elasticity,
-            directionalScale: directionalScale,
+            directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
             onClick: onClick,
             withLiquidBlur: withLiquidBlur,
             blurAmount: blurAmount,
             saturation: saturation,
             padding: padding
         });
-    }), [ isHovered, isActive, glassSize, baseOverLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, directionalScale, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, padding, onClick ]);
+    }), [ isHovered, isActive, glassSize, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, padding, onClick ]);
     // Event handlers
-    const handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleMouseMove = useCallback((_e => {}), []), handleKeyDown = useCallback((e => {
+    const handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleKeyDown = useCallback((e => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
     }), [ onClick ]);
     return {
@@ -2630,14 +2605,11 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         mouseOffset: mouseOffset,
         // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
-        elasticTranslation: elasticTranslation,
-        directionalScale: directionalScale,
         transformStyle: transformStyle,
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
         handleMouseUp: handleMouseUp,
-        handleMouseMove: handleMouseMove,
         handleKeyDown: handleKeyDown
     };
 }
@@ -2735,25 +2707,56 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         withLiquidBlur: withLiquidBlur,
         padding: padding,
         style: style
-    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, baseStyle = {
-        ...style,
-        ...!effectiveWithoutEffects && {
-            transform: transformStyle
+    }), isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, rootLayoutStyle = useMemo((() => {
+        if (!isFixedOrSticky) return {};
+        const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
+        return {
+            ...p && {
+                position: p
+            },
+            ...void 0 !== t && {
+                top: t
+            },
+            ...void 0 !== l && {
+                left: l
+            },
+            ...void 0 !== r && {
+                right: r
+            },
+            ...void 0 !== b && {
+                bottom: b
+            }
+        };
+    }), [ isFixedOrSticky, restStyle ]), baseStyle = useMemo((() => {
+        if (isFixedOrSticky) {
+            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
+            return {
+                ...visualStyle,
+                ...!effectiveWithoutEffects && {
+                    transform: transformStyle
+                }
+            };
         }
-    }, componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
-        position: style.position || "absolute",
-        top: style.top || 0,
-        left: style.left || 0
-    })), [ style.position, style.top, style.left ]), adjustedSize = useMemo((() => {
+        return {
+            ...restStyle,
+            ...!effectiveWithoutEffects && {
+                transform: transformStyle
+            }
+        };
+    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]), componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
+        position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
+        top: isFixedOrSticky ? 0 : restStyle.top || 0,
+        left: isFixedOrSticky ? 0 : restStyle.left || 0
+    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left ]), adjustedSize = useMemo((() => {
         const resolveSize = (propValue, styleValue, measuredSize) => {
             const explicitSize = propValue ?? styleValue;
             return void 0 !== explicitSize ? "number" == typeof explicitSize ? `${explicitSize}px` : explicitSize : "fixed" === positionStyles.position ? `${Math.max(measuredSize, 0)}px` : "100%";
         };
         return {
-            width: resolveSize(width, style.width, glassSize.width),
-            height: resolveSize(height, style.height, glassSize.height)
+            width: resolveSize(width, restStyle.width, glassSize.width),
+            height: resolveSize(height, restStyle.height, glassSize.height)
         };
-    }), [ width, height, style.width, style.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
+    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
         return {
             borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
@@ -2795,6 +2798,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = useMemo((() => {
         const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues, configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
         return {
+            ...void 0 !== customZIndex && {
+                "--atomix-glass-base-z-index": customZIndex
+            },
             "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
             "--atomix-glass-position": positionStyles.position,
@@ -2815,22 +2821,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             "--atomix-glass-base-opacity": opacityValues.base,
             "--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})`,
             "--atomix-glass-overlay-opacity": opacityValues.over,
-            "--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})`
+            "--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})`,
+            "--atomix-glass-overlay-highlight-opacity": opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
+            "--atomix-glass-overlay-highlight-bg": `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
         };
-    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, positionStyles, adjustedSize, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsx("div", {
-        className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
-        style: {
-            ...positionStyles,
-            height: adjustedSize.height,
-            width: adjustedSize.width,
-            borderRadius: `${effectiveBorderRadius}px`,
-            transform: baseStyle.transform
-        }
+    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, positionStyles, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex ]), renderBackgroundLayer = layerType => jsx("div", {
+        className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" ")
     });
     return jsxs("div", {
         ...rest,
         className: componentClassName,
-        style: glassVars,
+        style: {
+            ...glassVars
+        },
         role: role || (onClick ? "button" : void 0),
         tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
         "aria-label": ariaLabel,
@@ -2842,7 +2845,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             ref: glassRef,
             contentRef: contentRef,
             className: className,
-            style: baseStyle,
+            style: rootLayoutStyle,
             borderRadius: effectiveBorderRadius,
             displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
             blurAmount: effectiveWithoutEffects ? 0 : blurAmount,
@@ -2893,11 +2896,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }), jsx("div", {
                 className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS
             }), jsx("div", {
-                className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS,
-                style: {
-                    opacity: opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
-                    background: `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
-                }
+                className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS
             }) ]
         }), withBorder && jsxs(Fragment, {
             children: [ jsx("span", {
@@ -3993,120 +3992,6 @@ const BaseChart =  memo( forwardRef((({type: type, datasets: datasets = [], conf
 
 BaseChart.displayName = "BaseChart";
 
-const AnimatedChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, chartType: chartType = "line", particleEffects: particleEffects, onDataPointClick: onDataPointClick, ...props}, ref) => {
-    const animationRef = useRef(0), timeRef = useRef(0), particlesRef = useRef([]);
-    // Animation time tracking - moved outside callback
-    useEffect((() => {
-        const animateFrame = timestamp => {
-            timeRef.current = timestamp, animationRef.current = requestAnimationFrame(animateFrame);
-        };
-        return animationRef.current = requestAnimationFrame(animateFrame), () => {
-            animationRef.current && cancelAnimationFrame(animationRef.current);
-        };
-    }), []);
-    const renderContent = useCallback((({scales: scales, colors: colors, datasets: chartDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
-        if (!chartDatasets.length) return null;
-        const chartWidth = scales.width - 80, chartHeight = scales.height - 80, elements = [];
-        // Particle effects
-        if (chartDatasets.forEach(((dataset, datasetIndex) => {
-            const color = dataset.color || colors[datasetIndex % colors.length];
-            switch (chartType) {
-              case "bar":
-                // Create animated bars
-                dataset.data.forEach(((point, pointIndex) => {
-                    const barWidth = chartWidth / dataset.data.length * .8, x = 40 + pointIndex * (chartWidth / dataset.data.length) + (chartWidth / dataset.data.length - barWidth) / 2, height = point.value / 100 * chartHeight, y = 40 + chartHeight - height;
-                    elements.push(jsx("rect", {
-                        x: x,
-                        y: y,
-                        width: barWidth,
-                        height: height,
-                        fill: color,
-                        style: {
-                            transform: `scaleY(${.1 * Math.sin(.01 * timeRef.current + .2 * pointIndex) + .9})`,
-                            transformOrigin: "bottom"
-                        },
-                        onClick: () => handlers.onDataPointClick?.(point, datasetIndex, pointIndex)
-                    }, `bar-${datasetIndex}-${pointIndex}`));
-                }));
-                break;
-
-              default:
-                {
-                    // Create animated line/area
-                    const points = dataset.data.map(((point, pointIndex) => ({
-                        x: 40 + pointIndex / (dataset.data.length - 1) * chartWidth,
-                        y: 40 + chartHeight - point.value / 100 * chartHeight
-                    })));
-                    if (points.length > 0) {
-                        const linePath = `M ${points.map((p => `${p.x},${p.y}`)).join(" L ")}`;
-                        // Area for area chart
-                                                if ("area" === chartType) {
-                            const areaPath = `${linePath} L ${40 + chartWidth},${40 + chartHeight} L 40,${40 + chartHeight} Z`;
-                            elements.push(jsx("path", {
-                                d: areaPath,
-                                fill: color,
-                                fillOpacity: "0.3",
-                                style: {
-                                    transform: `translateY(${2 * Math.sin(.01 * timeRef.current)}px)`
-                                }
-                            }, `area-${datasetIndex}`));
-                        }
-                        // Line
-                                                elements.push(jsx("path", {
-                            d: linePath,
-                            stroke: color,
-                            fill: "none",
-                            className: "c-chart__data-line",
-                            style: {
-                                transform: `translateY(${2 * Math.sin(.01 * timeRef.current)}px)`
-                            }
-                        }, `line-${datasetIndex}`)), 
-                        // Data points
-                        points.forEach(((point, pointIndex) => {
-                            elements.push(jsx("circle", {
-                                cx: point.x,
-                                cy: point.y,
-                                r: "4",
-                                fill: color,
-                                style: {
-                                    transform: `scale(${1 + .2 * Math.sin(.01 * timeRef.current + pointIndex)})`
-                                },
-                                onClick: () => handlers.onDataPointClick?.(dataset.data[pointIndex], datasetIndex, pointIndex)
-                            }, `point-${datasetIndex}-${pointIndex}`));
-                        }));
-                    }
-                    break;
-                }
-            }
-        })), particleEffects?.enabled) for (let i = 0; i < particleEffects.count; i++) {
-            const particle = particlesRef.current[i];
-            particle && elements.push(jsx("circle", {
-                cx: particle.x,
-                cy: particle.y,
-                r: particle.size,
-                fill: particle.color,
-                style: {
-                    opacity: particle.life
-                }
-            }, `particle-${i}`));
-        }
-        return jsx("g", {
-            children: elements
-        });
-    }), [ chartType, particleEffects ]);
-    return jsx(BaseChart, {
-        ref: ref,
-        type: "line",
-        datasets: datasets,
-        config: config,
-        renderContent: renderContent,
-        onDataPointClick: onDataPointClick,
-        ...props
-    });
-})));
-
-AnimatedChart.displayName = "AnimatedChart";
-
 const ChartTooltip =  memo((({dataPoint: dataPoint, datasetLabel: datasetLabel, datasetColor: datasetColor, position: position, visible: visible, customRenderer: customRenderer}) => {
     const tooltipRef = useRef(null), [adjustedPosition, setAdjustedPosition] = useState(position);
     // Dynamic positioning to keep tooltip in viewport
@@ -4128,15 +4013,16 @@ const ChartTooltip =  memo((({dataPoint: dataPoint, datasetLabel: datasetLabel,
         ref: tooltipRef,
         className: "c-chart__tooltip",
         style: {
-            left: `${adjustedPosition.x}px`,
-            top: `${adjustedPosition.y}px`,
+            transform: `translate3d(${adjustedPosition.x}px, ${adjustedPosition.y}px, 0)`,
             opacity: visible ? 1 : 0,
             visibility: visible ? "visible" : "hidden",
-            transition: "opacity 0.2s ease, transform 0.2s ease",
-            transform: "translateZ(0)",
+            transition: "opacity 0.2s ease",
             position: "fixed",
+            left: 0,
+            top: 0,
             zIndex: 1e3,
-            pointerEvents: "none"
+            pointerEvents: "none",
+            willChange: "transform"
         },
         children: customRenderer ? customRenderer(dataPoint) : jsxs(Fragment, {
             children: [ jsx("div", {
@@ -4454,8 +4340,9 @@ const BubbleChart =  memo( forwardRef((({bubbleData: bubbleData = [], config: co
             if (!bubbleData.length) return null;
             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;
+                const scaledSize = minBubbleSize + (bubble.size - minSize) / sizeRange * (maxBubbleSize - minBubbleSize), effectiveWidth = scales.innerWidth - 2 * maxBubbleSize, effectiveHeight = scales.innerHeight - 2 * maxBubbleSize, x = scales.padding.left + maxBubbleSize + bubble.x / 100 * effectiveWidth, y = scales.padding.top + maxBubbleSize + effectiveHeight - bubble.y / 100 * effectiveHeight;
                 // Calculate position
+                // Ensure bubbles don't get cut off by adding padding equal to maxBubbleSize
                                 // Determine color
                 let bubbleColor = bubble.color;
                 if (!bubbleColor) if (sizeBasedColoring) {
@@ -4916,9 +4803,10 @@ const GaugeChart =  memo( forwardRef((({value: value, min: min = 0, max: max = 1
             // Create ticks
                         const ticks = [];
             if (showTicks) {
+                const innerRadius = radius * (1 - thickness);
                 // Major ticks
-                for (let i = 0; i <= majorTicks; i++) {
-                    const tickValue = min + i / majorTicks * (max - min), tickAngle = startAngleRad + i / majorTicks * angleRange, tickRadius = .95 * radius, tickLength = .05 * radius, x1 = centerX + tickRadius * Math.cos(tickAngle), y1 = centerY + tickRadius * Math.sin(tickAngle), x2 = centerX + (tickRadius - tickLength) * Math.cos(tickAngle), y2 = centerY + (tickRadius - tickLength) * Math.sin(tickAngle);
+                                for (let i = 0; i <= majorTicks; i++) {
+                    const tickValue = min + i / majorTicks * (max - min), tickAngle = startAngleRad + i / majorTicks * angleRange, tickRadius = innerRadius - 2, tickLength = .05 * radius, x1 = centerX + tickRadius * Math.cos(tickAngle), y1 = centerY + tickRadius * Math.sin(tickAngle), x2 = centerX + (tickRadius - tickLength) * Math.cos(tickAngle), y2 = centerY + (tickRadius - tickLength) * Math.sin(tickAngle);
                     // Labels for major ticks
                     if (ticks.push(jsx("line", {
                         x1: x1,
@@ -4928,12 +4816,12 @@ const GaugeChart =  memo( forwardRef((({value: value, min: min = 0, max: max = 1
                         stroke: "var(--atomix-brand-border-subtle)",
                         strokeWidth: "2"
                     }, `major-tick-${i}`)), showMinMaxLabels) {
-                        const labelX = centerX + (tickRadius - tickLength - 10) * Math.cos(tickAngle), labelY = centerY + (tickRadius - tickLength - 10) * Math.sin(tickAngle);
+                        const labelRadius = tickRadius - tickLength - 15, labelX = centerX + labelRadius * Math.cos(tickAngle), labelY = centerY + labelRadius * Math.sin(tickAngle);
                         ticks.push(jsx("text", {
                             x: labelX,
                             y: labelY,
                             textAnchor: "middle",
-                            dominantBaseline: "middle",
+                            dominantBaseline: "central",
                             fontSize: "12",
                             fill: "var(--atomix-brand-text-emphasis)",
                             children: tickValue
@@ -4941,8 +4829,9 @@ const GaugeChart =  memo( forwardRef((({value: value, min: min = 0, max: max = 1
                     }
                 }
                 // Minor ticks
-                                for (let i = 0; i < majorTicks * minorTicks; i++) {
-                    const tickAngle = startAngleRad + i / (majorTicks * minorTicks) * angleRange, tickRadius = .95 * radius, tickLength = .025 * radius, x1 = centerX + tickRadius * Math.cos(tickAngle), y1 = centerY + tickRadius * Math.sin(tickAngle), x2 = centerX + (tickRadius - tickLength) * Math.cos(tickAngle), y2 = centerY + (tickRadius - tickLength) * Math.sin(tickAngle);
+                                for (let i = 0; i <= majorTicks * minorTicks; i++) {
+                    if (i % minorTicks == 0) continue;
+                    const tickAngle = startAngleRad + i / (majorTicks * minorTicks) * angleRange, tickRadius = innerRadius - 2, tickLength = .025 * radius, x1 = centerX + tickRadius * Math.cos(tickAngle), y1 = centerY + tickRadius * Math.sin(tickAngle), x2 = centerX + (tickRadius - tickLength) * Math.cos(tickAngle), y2 = centerY + (tickRadius - tickLength) * Math.sin(tickAngle);
                     ticks.push(jsx("line", {
                         x1: x1,
                         y1: y1,
@@ -4953,39 +4842,43 @@ const GaugeChart =  memo( forwardRef((({value: value, min: min = 0, max: max = 1
                     }, `minor-tick-${i}`));
                 }
             }
-            // Create needle
-                        const needle = showNeedle ? jsxs("g", {
+            const innerRadius = radius * (1 - thickness), needle = showNeedle ? jsxs("g", {
                 children: [ jsx("line", {
                     x1: centerX,
                     y1: centerY,
-                    x2: centerX + .8 * radius * Math.cos(valueAngle),
-                    y2: centerY + .8 * radius * Math.sin(valueAngle),
+                    x2: centerX + (innerRadius - 15) * Math.cos(valueAngle),
+                    y2: centerY + (innerRadius - 15) * Math.sin(valueAngle),
                     stroke: needleColor,
-                    strokeWidth: "3",
+                    strokeWidth: "4",
                     strokeLinecap: "round"
                 }), jsx("circle", {
                     cx: centerX,
                     cy: centerY,
                     r: "8",
                     fill: needleColor
+                }), jsx("circle", {
+                    cx: centerX,
+                    cy: centerY,
+                    r: "3",
+                    fill: "var(--atomix-primary-bg, #fff)"
                 }) ]
             }) : null, valueText = showValue ? jsx("text", {
                 x: centerX,
-                y: centerY + 10,
+                y: centerY + 35,
                 textAnchor: "middle",
-                fontSize: "24",
+                fontSize: "32",
                 fontWeight: "bold",
                 fill: "var(--atomix-primary-text-emphasis)",
                 children: valueFormatter(clampedValue)
             }) : null, labelText = label ? jsx("text", {
                 x: centerX,
-                y: "top" === labelPosition ? centerY - .7 * radius : centerY + .7 * radius,
+                y: "top" === labelPosition ? centerY - .7 * radius : centerY + .7 * radius + 10,
                 textAnchor: "middle",
                 fontSize: "16",
                 fill: "var(--atomix-brand-text-emphasis)",
                 children: label
             }) : null;
-            // Value text
+            // Create needle
                         return jsxs("g", {
                 children: [ jsx("path", {
                     d: createArcPath(centerX, centerY, radius, startAngleRad, endAngleRad, thickness),
@@ -5017,11 +4910,9 @@ const colorSchemes = {
     greens: [ "var(--atomix-green-1)", "var(--atomix-green-2)", "var(--atomix-green-3)", "var(--atomix-green-4)", "var(--atomix-green-5)", "var(--atomix-green-6)", "var(--atomix-green-7)", "var(--atomix-green-8)", "var(--atomix-green-9)" ],
     github: [ "var(--atomix-gray-2)", "var(--atomix-green-3)", "var(--atomix-green-4)", "var(--atomix-green-5)", "var(--atomix-green-6)" ]
 }, HeatmapChart =  memo( forwardRef((({data: data = [], config: config = {}, colorScale: colorScale = {
-    scheme: "viridis",
+    scheme: "blues",
     steps: 9
 }, cellConfig: cellConfig = {
-    width: 40,
-    height: 40,
     spacing: 2,
     borderRadius: 4,
     showLabels: !1
@@ -5081,9 +4972,8 @@ const colorSchemes = {
         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;
             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, {
+            const spacing = cellConfig.spacing ?? 2, borderRadius = cellConfig.borderRadius ?? 4, {width: width, height: height} = scales, paddingRight = 20 + (showColorLegend ? 60 : 0), availableWidth = Math.max(0, width - 60 - paddingRight), availableHeight = Math.max(0, height - 20 - 40), cols = Math.max(1, xLabels.length), rows = Math.max(1, yLabels.length), maxCellWidth = Math.max(2, Math.floor((availableWidth - (cols - 1) * spacing) / cols)), maxCellHeight = Math.max(2, Math.floor((availableHeight - (rows - 1) * spacing) / rows)), cellWidth = cellConfig.width || maxCellWidth, cellHeight = cellConfig.height || maxCellHeight, totalWidth = cols * cellWidth + (cols - 1) * spacing, totalHeight = rows * cellHeight + (rows - 1) * spacing, startX = 60 + Math.max(0, (availableWidth - totalWidth) / 2), startY = 20 + Math.max(0, (availableHeight - totalHeight) / 2);
+            return jsxs(Fragment, {
                 children: [ jsxs("g", {
                     children: [ jsx("defs", {
                         children: showColorLegend && (() => {
@@ -5102,7 +4992,7 @@ const colorSchemes = {
                         })()
                     }), matrix.map(((row, rowIndex) => row.map(((cell, colIndex) => {
                         if (!cell) return null;
-                        const x = 100 + colIndex * (cellWidth + spacing), y = 50 + rowIndex * (cellHeight + spacing), color = getColorForValue(cell.value), isHovered = hoveredCell === cell;
+                        const x = startX + colIndex * (cellWidth + spacing), y = startY + rowIndex * (cellHeight + spacing), color = getColorForValue(cell.value);
                         return jsxs("g", {
                             children: [ jsx("rect", {
                                 x: x,
@@ -5112,12 +5002,7 @@ const colorSchemes = {
                                 rx: borderRadius,
                                 ry: borderRadius,
                                 fill: color,
-                                className: "c-chart__heatmap-cell " + (isHovered ? "c-chart__heatmap-cell--hovered" : ""),
-                                style: {
-                                    transition: "all 0.2s ease",
-                                    transform: isHovered ? "scale(1.05)" : "scale(1)",
-                                    transformOrigin: "center"
-                                },
+                                className: "c-chart__heatmap-cell " + (hoveredCell === cell ? "c-chart__heatmap-cell--hovered" : ""),
                                 onClick: () => {
                                     cell && handlers.onDataPointClick?.({
                                         ...cell,
@@ -5127,8 +5012,14 @@ const colorSchemes = {
                                 },
                                 onMouseEnter: e => {
                                     setHoveredCell(cell);
+                                    const pointIndex = data.findIndex((d => d.x === cell.x && d.y === cell.y)), rect = e.currentTarget.getBoundingClientRect();
+                                    handlers.onPointHover(0, 
+                                    // datasetIndex is always 0 for Heatmap
+                                    pointIndex >= 0 ? pointIndex : 0, x, y, rect.left + rect.width / 2, rect.top + rect.height / 2);
                                 },
-                                onMouseLeave: () => setHoveredCell(null)
+                                onMouseLeave: () => {
+                                    setHoveredCell(null), handlers.onPointLeave();
+                                }
                             }), cellConfig.showLabels && cell.label && jsx("text", {
                                 x: x + cellWidth / 2,
                                 y: y + cellHeight / 2,
@@ -5139,7 +5030,7 @@ const colorSchemes = {
                             }) ]
                         }, `cell-${rowIndex}-${colIndex}`);
                     })))), xLabels.map(((label, index) => {
-                        const x = 100 + index * (cellWidth + spacing) + cellWidth / 2, y = 50 + matrix.length * (cellHeight + spacing) + 20;
+                        const x = startX + index * (cellWidth + spacing) + cellWidth / 2, y = startY + matrix.length * (cellHeight + spacing) + 20;
                         return jsx("text", {
                             x: x,
                             y: y,
@@ -5148,36 +5039,38 @@ const colorSchemes = {
                             children: String(label)
                         }, `x-label-${index}`);
                     })), yLabels.map(((label, index) => jsx("text", {
-                        x: 80,
-                        y: 50 + index * (cellHeight + spacing) + cellHeight / 2,
+                        x: startX - 20,
+                        y: startY + index * (cellHeight + spacing) + cellHeight / 2,
                         textAnchor: "end",
                         dominantBaseline: "middle",
                         className: "c-chart__heatmap-axis-label",
                         children: String(label)
                     }, `y-label-${index}`))), showColorLegend && jsxs("g", {
-                        transform: "translate(600, 100)",
+                        transform: `translate(${startX + totalWidth + 20}, ${startY})`,
                         children: [ jsx("rect", {
                             x: "0",
                             y: "0",
-                            width: "20",
-                            height: "200",
+                            width: "12",
+                            height: totalHeight,
                             fill: "url(#heatmap-legend-gradient)",
                             stroke: "var(--atomix-border-color)",
-                            className: "c-chart__grid"
+                            className: "c-chart__grid",
+                            rx: borderRadius,
+                            ry: borderRadius
                         }), jsx("text", {
-                            x: "-10",
+                            x: "-5",
                             y: "-10",
                             className: "c-chart__heatmap-legend-title",
                             children: "Values"
                         }), jsx("text", {
-                            x: "25",
-                            y: "5",
+                            x: "20",
+                            y: "8",
                             textAnchor: "start",
                             className: "c-chart__heatmap-legend-label",
                             children: "High"
                         }), jsx("text", {
-                            x: "25",
-                            y: "200",
+                            x: "20",
+                            y: totalHeight,
                             textAnchor: "start",
                             className: "c-chart__heatmap-legend-label",
                             children: "Low"
@@ -5947,8 +5840,7 @@ const DEFAULT_COLOR_CONFIG = {
 }, DEFAULT_LABEL_CONFIG = {
     showLabels: !0,
     minSize: 1e3,
-    fontSize: 12,
-    textColor: "white"
+    fontSize: 12
 }, DEFAULT_CONFIG = {}, TreemapChart =  memo( forwardRef((({data: data = [], algorithm: algorithm = "squarified", colorConfig: colorConfig = DEFAULT_COLOR_CONFIG, labelConfig: labelConfig = DEFAULT_LABEL_CONFIG, onDataPointClick: onDataPointClick, config: config = DEFAULT_CONFIG, ...props}, ref) => {
     const [hoveredNode, setHoveredNode] = useState(null), [selectedNode, setSelectedNode] = useState(null);
     useState({
@@ -6012,13 +5904,13 @@ const DEFAULT_COLOR_CONFIG = {
         }
         // Sort nodes by value (descending)
                 const sortedNodes = [ ...nodes ].sort(((a, b) => b.value - a.value)), aspectRatio = rect => Math.max(rect.width / rect.height, rect.height / rect.width);
-        let currentRow = [], remainingNodes = [ ...sortedNodes ], currentX = x, currentY = y, remainingWidth = width, remainingHeight = height;
+        let currentRow = [], remainingNodes = [ ...sortedNodes ], currentX = x, currentY = y, remainingWidth = width, remainingHeight = height, remainingValue = totalValue;
         for (;remainingNodes.length > 0; ) {
             const node = remainingNodes.shift();
             if (!node) break;
             currentRow.push(node);
             // Calculate dimensions for current row
-            const rowValue = _reduceInstanceProperty(currentRow).call(currentRow, ((sum, n) => sum + n.value), 0), rowRatio = rowValue / totalValue;
+            const rowValue = _reduceInstanceProperty(currentRow).call(currentRow, ((sum, n) => sum + n.value), 0), rowRatio = remainingValue > 0 ? rowValue / remainingValue : 0;
             let rowWidth, rowHeight;
             remainingWidth >= remainingHeight ? (rowWidth = remainingWidth * rowRatio, rowHeight = remainingHeight) : (rowWidth = remainingWidth, 
             rowHeight = remainingHeight * rowRatio);
@@ -6027,7 +5919,7 @@ const DEFAULT_COLOR_CONFIG = {
             if (remainingNodes.length > 0) {
                 const nextNode = remainingNodes[0];
                 if (!nextNode) break;
-                const testRow = [ ...currentRow, nextNode ], testRowValue = _reduceInstanceProperty(testRow).call(testRow, ((sum, n) => sum + n.value), 0), testRowRatio = testRowValue / totalValue;
+                const testRow = [ ...currentRow, nextNode ], testRowValue = _reduceInstanceProperty(testRow).call(testRow, ((sum, n) => sum + n.value), 0), testRowRatio = remainingValue > 0 ? testRowValue / remainingValue : 0;
                 let testRowWidth, testRowHeight;
                 remainingWidth >= remainingHeight ? (testRowWidth = remainingWidth * testRowRatio, 
                 testRowHeight = remainingHeight) : (testRowWidth = remainingWidth, testRowHeight = remainingHeight * testRowRatio);
@@ -6058,14 +5950,14 @@ const DEFAULT_COLOR_CONFIG = {
                 })), 
                 // Update remaining space
                 remainingWidth >= remainingHeight ? (currentX += rowWidth, remainingWidth -= rowWidth) : (currentY += rowHeight, 
-                remainingHeight -= rowHeight), currentRow = [];
+                remainingHeight -= rowHeight), remainingValue -= rowValue, currentRow = [];
             }
         }
-    }), []), renderContent = useCallback((({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint}) => {
+    }), []), renderContent = useCallback((({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
         if (!data.length) return null;
-        // Calculate available space with padding
-                const availableWidth = scales.width - 40, availableHeight = scales.height - 40, leafNodes = data.filter((item => !item.children || 0 === item.children.length));
-        if (!leafNodes.length) return null;
+        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, availableWidth = Math.max(0, scales.width), availableHeight = Math.max(0, scales.height), leafNodes = data.filter((item => !item.children || 0 === item.children.length));
+        // Calculate available space
+                if (!leafNodes.length) return null;
         const totalValue = _reduceInstanceProperty(leafNodes).call(leafNodes, ((sum, node) => sum + node.value), 0), treemapNodes = leafNodes.map(((item, index) => ({
             id: item.id,
             label: item.label,
@@ -6085,24 +5977,26 @@ const DEFAULT_COLOR_CONFIG = {
         })));
         // Create treemap nodes with proper dimensions
                 // Apply squarified algorithm to layout nodes proportionally by value
-        if ("squarified" === algorithm && totalValue > 0) squarify(treemapNodes, 20, 20, availableWidth, availableHeight); else {
+        if ("squarified" === algorithm && totalValue > 0) squarify(treemapNodes, 0, 0, availableWidth, availableHeight); else {
             // Fallback: simple grid layout (equal sizes)
             const cols = Math.ceil(Math.sqrt(leafNodes.length)), rows = Math.ceil(leafNodes.length / cols), nodeWidth = availableWidth / cols, nodeHeight = availableHeight / rows;
             treemapNodes.forEach(((node, index) => {
                 const col = index % cols, row = Math.floor(index / cols);
-                node.x = 20 + col * nodeWidth, node.y = 20 + row * nodeHeight, node.width = nodeWidth, 
+                node.x = 0 + col * nodeWidth, node.y = 0 + row * nodeHeight, node.width = nodeWidth, 
                 node.height = nodeHeight;
             }));
         }
-        return jsx(Fragment, {
-            children: treemapNodes.map((node => {
+        return jsxs(Fragment, {
+            children: [ treemapNodes.map((node => {
                 const isHovered = hoveredNode === node, isSelected = selectedNode === node, area = node.width * node.height, showLabel = labelConfig.showLabels && area >= (labelConfig.minSize || 1e3);
                 return jsxs("g", {
                     children: [ jsx("rect", {
-                        x: node.x,
-                        y: node.y,
-                        width: node.width,
-                        height: node.height,
+                        x: node.x + 2,
+                        y: node.y + 2,
+                        width: Math.max(0, node.width - 4),
+                        height: Math.max(0, node.height - 4),
+                        rx: 6,
+                        ry: 6,
                         fill: node.color,
                         className: `c-chart__treemap-node ${isHovered ? "c-chart__treemap-node--hovered" : ""} ${isSelected ? "c-chart__treemap-node--selected" : ""}`,
                         onClick: () => {
@@ -6110,8 +6004,8 @@ const DEFAULT_COLOR_CONFIG = {
                         },
                         onMouseEnter: e => {
                             setHoveredNode(node);
-                            const rect = e.currentTarget.getBoundingClientRect();
-                            handlers.onPointHover(0, 0, node.x, node.y, rect.left + rect.width / 2, rect.top + rect.height / 2);
+                            const rect = e.currentTarget.getBoundingClientRect(), pointIndex = data.indexOf(node.originalData);
+                            handlers.onPointHover(0, pointIndex >= 0 ? pointIndex : 0, node.x, node.y, rect.left + rect.width / 2, rect.top + rect.height / 2);
                         },
                         onMouseLeave: () => {
                             setHoveredNode(null), handlers.onPointLeave();
@@ -6123,13 +6017,21 @@ const DEFAULT_COLOR_CONFIG = {
                         dominantBaseline: "middle",
                         className: "c-chart__treemap-label",
                         style: {
-                            fontSize: labelConfig.fontSize,
-                            fill: labelConfig.textColor
+                            fontSize: labelConfig.fontSize
                         },
                         children: node.label
                     }) ]
                 }, node.id);
-            }))
+            })), showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && jsx(ChartTooltip, {
+                dataPoint: renderedDatasets[hoveredPoint.datasetIndex].data[hoveredPoint.pointIndex],
+                datasetLabel: renderedDatasets[hoveredPoint.datasetIndex]?.label,
+                datasetColor: renderedDatasets[hoveredPoint.datasetIndex]?.color || colors[hoveredPoint.datasetIndex % colors.length],
+                position: {
+                    x: hoveredPoint.clientX,
+                    y: hoveredPoint.clientY
+                },
+                visible: !0
+            }) ]
         });
     }), [ data, algorithm, generateColor, squarify, labelConfig, hoveredNode, selectedNode ]), datasets = useMemo((() => [ {
         label: "Treemap Data",
@@ -6614,5 +6516,5 @@ const smoothStep = (a, b, t) => {
     value: "Module"
 }));
 
-export { AnimatedChart, AreaChart, BarChart, BubbleChart, CandlestickChart, Chart, ChartRenderer, DonutChart, FunnelChart, GaugeChart, HeatmapChart, LineChart, MultiAxisChart, PieChart, RadarChart, ScatterChart, TreemapChart, WaterfallChart };
+export { AreaChart, BarChart, BubbleChart, CandlestickChart, Chart, ChartRenderer, DonutChart, FunnelChart, GaugeChart, HeatmapChart, LineChart, MultiAxisChart, PieChart, RadarChart, ScatterChart, TreemapChart, WaterfallChart };
 //# sourceMappingURL=charts.js.map