@shohojdhara/atomix 0.4.6 → 0.4.8

package/dist/index.esm.js

@@ -1717,20 +1717,20 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         SHADER: "c-atomix-glass--shader"
     },
     DEFAULTS: {
-        DISPLACEMENT_SCALE: 20,
-        BLUR_AMOUNT: 1,
+        DISPLACEMENT_SCALE: 70,
+        BLUR_AMOUNT: 0,
         SATURATION: 140,
-        ABERRATION_INTENSITY: 2.5,
-        ELASTICITY: .05,
-        CORNER_RADIUS: 16,
+        ABERRATION_INTENSITY: 2,
+        ELASTICITY: .15,
+        CORNER_RADIUS: 20,
         // Default border-radius matching design system
-        PADDING: "0 0",
+        PADDING: "0",
         MODE: "standard",
         OVER_LIGHT: !1,
         ENABLE_OVER_LIGHT_LAYERS: !0
     },
     CONSTANTS: {
-        ACTIVATION_ZONE: 350,
+        ACTIVATION_ZONE: 200,
         LERP_FACTOR: .08,
         SMOOTHSTEP_POWER: 2.5,
         MIN_BLUR: .1,
@@ -2194,10 +2194,7 @@ let idCounter = 0;
 const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
-}, globalMousePosition: globalMousePosition = {
-    x: 0,
-    y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
 }, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, contentRef: contentRef}, ref) => {
@@ -2341,21 +2338,18 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
             };
         }
-    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur ]), containerVars = useMemo((() => {
+    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur, overLightConfig ]), containerVars = useMemo((() => {
         try {
             // Safe extraction of mouse offset values
             const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
             return {
-                "--atomix-glass-container-width": `${glassSize?.width}`,
-                "--atomix-glass-container-height": `${glassSize?.height}`,
-                "--atomix-glass-container-padding": padding || "0 0",
                 "--atomix-glass-container-radius": `${"number" != typeof borderRadius || isNaN(borderRadius) ? 0 : borderRadius}px`,
                 "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
                 "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig?.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
                 "--atomix-glass-container-shadow-opacity": effectiveWithoutEffects ? 0 : 1,
                 // Background and shadow values use design token-aligned RGB values
                 "--atomix-glass-container-bg": overLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none",
-                "--atomix-glass-container-text-shadow": overLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)",
+                "--atomix-glass-container-text-shadow": overLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)",
                 "--atomix-glass-container-box-shadow": overLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)"
             };
         } catch (error) {
@@ -2370,7 +2364,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects ]);
+    }), [ borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects, overLightConfig ]);
     return jsx("div", {
         ref: el => {
             // Apply force no-transition
@@ -2399,10 +2393,6 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
-                    ref: el => {
-                        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
-                        el.style.setProperty("transition-delay", "0s", "important"));
-                    },
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
                         filter: `url(#${filterId})`
@@ -2507,7 +2497,7 @@ class {
     }
 }, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
     if (!wrapperElement && !containerElement) return;
-    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, directionalScale: directionalScale, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, directionalScale: directionalScale, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, isFixedOrSticky: isFixedOrSticky = !1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
         opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
         contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
         brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
@@ -2597,7 +2587,7 @@ class {
     }
     // Update Container Styles (containerVars)
         if (containerElement) {
-        const mx = mouseOffset.x, my = mouseOffset.y, EDGE_BLUR_MULTIPLIER = 1.25, CENTER_BLUR_MULTIPLIER = 1.1, FLOW_BLUR_MULTIPLIER = 1.2, MOUSE_INFLUENCE_BLUR_FACTOR = .15, EDGE_INTENSITY_MOUSE_FACTOR = .15, CENTER_INTENSITY_MOUSE_FACTOR = .1, MAX_BLUR_RELATIVE = 2, rect = containerElement.getBoundingClientRect();
+        const mx = mouseOffset.x, my = mouseOffset.y, EDGE_BLUR_MULTIPLIER = .5, CENTER_BLUR_MULTIPLIER = .2, FLOW_BLUR_MULTIPLIER = .3, MOUSE_INFLUENCE_BLUR_FACTOR = .4, EDGE_INTENSITY_MOUSE_FACTOR = .15, CENTER_INTENSITY_MOUSE_FACTOR = .1, MAX_BLUR_RELATIVE = 2, rect = containerElement.getBoundingClientRect();
         let liquidBlur = {
             baseBlur: blurAmount,
             edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
@@ -2619,14 +2609,15 @@ class {
         backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
         // Container variables
                 const style = containerElement.style;
-        style.setProperty("--atomix-glass-container-width", `${glassSize.width}`), style.setProperty("--atomix-glass-container-height", `${glassSize.height}`), 
+        style.setProperty("--atomix-glass-container-width", isFixedOrSticky ? `${glassSize.width}` : "100%"), 
+        style.setProperty("--atomix-glass-container-height", isFixedOrSticky ? `${glassSize.height}` : "100%"), 
         style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
         style.setProperty("--atomix-glass-container-backdrop", backdropFilterString), 
         // Shadows
         style.setProperty("--atomix-glass-container-shadow", isOverLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset"), 
         style.setProperty("--atomix-glass-container-shadow-opacity", effectiveWithoutEffects ? "0" : "1"), 
         style.setProperty("--atomix-glass-container-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"), 
-        style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"), 
+        style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"), 
         style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)");
     }
 }, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
@@ -2647,7 +2638,7 @@ class {
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, debugPerformance: debugPerformance = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur}) {
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1}) {
     // State
     const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
@@ -2958,12 +2949,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 withLiquidBlur: withLiquidBlur,
                 blurAmount: blurAmount,
                 saturation: saturation,
-                padding: padding
+                padding: padding,
+                isFixedOrSticky: isFixedOrSticky
             }), lerpRafRef.current = requestAnimationFrame(tick);
         };
  // 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((() => {
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky ]), stopLerpLoop = useCallback((() => {
         lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
         lerpRafRef.current = null);
     }), []);
@@ -3110,7 +3102,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
  *   <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, borderRadius: borderRadius, 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, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, height: height, width: width, ...rest}) {
-    const glassRef = useRef(null), contentRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, 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), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         borderRadius: borderRadius,
@@ -3131,8 +3123,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         saturation: saturation,
         withLiquidBlur: withLiquidBlur,
         padding: padding,
-        style: style
-    }), isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, rootLayoutStyle = useMemo((() => {
+        style: style,
+        isFixedOrSticky: isFixedOrSticky
+    }), isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = useMemo((() => {
         if (!isFixedOrSticky) return {};
         const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
         return {
@@ -3152,7 +3145,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 bottom: b
             }
         };
-    }), [ isFixedOrSticky, restStyle ]), baseStyle = useMemo((() => {
+    }), [ isFixedOrSticky, restStyle ]);
+    // Calculate base style with transforms
+    // When layout is hoisted to the root, strip those props from the container
+    useMemo((() => {
         if (isFixedOrSticky) {
             const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
             return {
@@ -3168,18 +3164,20 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 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((() => ({
+    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]);
+    // Build className with state modifiers
+    const 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%";
-        };
+        // Keep a reference to positionStyles to avoid unused-variable lint,
+        // but sizing is driven by explicit width/height or measured size.
+        positionStyles.position;
+        const resolveLength = (value, measured) => void 0 !== value ? "number" == typeof value ? `${value}px` : value : measured > 0 ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
         return {
-            width: resolveSize(width, restStyle.width, glassSize.width),
-            height: resolveSize(height, restStyle.height, glassSize.height)
+            width: resolveLength(effectiveWidth, glassSize.width),
+            height: resolveLength(effectiveHeight, glassSize.height)
         };
     }), [ 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;
@@ -3228,9 +3226,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             },
             "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
-            "--atomix-glass-position": positionStyles.position,
-            "--atomix-glass-top": "fixed" !== positionStyles.top ? `${positionStyles.top}px` : "0",
-            "--atomix-glass-left": "fixed" !== positionStyles.left ? `${positionStyles.left}px` : "0",
+            // Internal decorative layers are positioned relative to the root;
+            "--atomix-glass-position": rootLayoutStyle.position,
+            "--atomix-glass-top": `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
+            "--atomix-glass-left": `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
             "--atomix-glass-width": adjustedSize.width,
             "--atomix-glass-height": adjustedSize.height,
             "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
@@ -3250,10 +3249,12 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             "--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, customZIndex ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex, rootLayoutStyle, isFixedOrSticky ]), 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", {
+    // Calculate position and size styles for internal layers
+    // When root is fixed/sticky, internal layers use absolute (relative to root)
+        return jsxs("div", {
         ...rest,
         className: componentClassName,
         style: {
@@ -3270,7 +3271,12 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             ref: glassRef,
             contentRef: contentRef,
             className: className,
-            style: rootLayoutStyle,
+            style: {
+                ...restStyle,
+                ...!isFixedOrSticky && {
+                    position: "relative"
+                }
+            },
             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,
@@ -3301,7 +3307,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             },
             onClick: onClick,
             mode: mode,
-            transform: baseStyle.transform,
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
@@ -5391,7 +5396,7 @@ function getDatasetBounds(data) {
     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,
@@ -5403,7 +5408,7 @@ function getDatasetBounds(data) {
         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 => {
@@ -6853,120 +6858,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
@@ -6988,15 +6879,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", {
@@ -7315,8 +7207,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) {
@@ -7777,9 +7670,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,
@@ -7789,12 +7683,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
@@ -7802,8 +7696,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,
@@ -7814,39 +7709,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),
@@ -7878,11 +7777,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
@@ -7942,9 +7839,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 && (() => {
@@ -7963,7 +7859,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,
@@ -7973,12 +7869,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,
@@ -7988,8 +7879,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,
@@ -8000,7 +7897,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,
@@ -8009,36 +7906,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"
@@ -8810,8 +8709,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({
@@ -8875,13 +8773,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);
@@ -8890,7 +8788,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);
@@ -8921,14 +8819,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,
@@ -8948,24 +8846,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: () => {
@@ -8973,8 +8873,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();
@@ -8986,13 +8886,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",
@@ -19254,7 +19162,6 @@ VideoPlayer.displayName = "VideoPlayer";
 const components =  Object.freeze( Object.defineProperty({
     __proto__: null,
     Accordion: Accordion,
-    AnimatedChart: AnimatedChart,
     AreaChart: AreaChart,
     AtomixGlass: AtomixGlass,
     AtomixLogo: AtomixLogo,
@@ -25341,5 +25248,5 @@ const atomix = {
     types: types
 };
 
-export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DesignTokensCustomizer, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, getThemeMetadata, hasCustomization, hasTheme, importTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isValidCSSVariableName, isYouTubeUrl, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, quickTheme, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, sliderConstants, supportsDarkMode, theme, themePropertyToCSSVar, themeToCSS, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useCard, useChartData, useChartInteraction, useChartScale, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useDataTable, useEdgePanel, useForm, useFormGroup, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal$1 as useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils, validateTheme };
+export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DesignTokensCustomizer, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, getThemeMetadata, hasCustomization, hasTheme, importTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isValidCSSVariableName, isYouTubeUrl, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, quickTheme, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, sliderConstants, supportsDarkMode, theme, themePropertyToCSSVar, themeToCSS, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useCard, useChartData, useChartInteraction, useChartScale, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useDataTable, useEdgePanel, useForm, useFormGroup, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal$1 as useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils, validateTheme };
 //# sourceMappingURL=index.esm.js.map