@shohojdhara/atomix 0.4.1 → 0.4.2

package/dist/index.esm.js

@@ -1949,7 +1949,7 @@ function useAccordion(initialProps) {
     };
 }
 
-const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
+const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
     if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
     const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
     return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -1962,36 +1962,36 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
     // Bounded calculation — keeps the glass effect subtle and stable
-        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$1.MOUSE_INFLUENCE_DIVISOR;
+        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$2.MOUSE_INFLUENCE_DIVISOR;
     return Math.min(.8, influence);
  // Tighter cap to prevent blur/filter blow-out
-}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$1.MIN_BLUR : Math.max(CONSTANTS$1.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$1.MAX_SIZE && size.height <= CONSTANTS$1.MAX_SIZE, parseBorderRadiusValue = value => {
+}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$2.MIN_BLUR : Math.max(CONSTANTS$2.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$2.MAX_SIZE && size.height <= CONSTANTS$2.MAX_SIZE, parseBorderRadiusValue = value => {
     if ("number" == typeof value) return Math.max(0, value);
-    if ("string" != typeof value || !value.trim()) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    if ("string" != typeof value || !value.trim()) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
     const trimmedValue = value.trim();
     // Handle px values
         if (trimmedValue.endsWith("px")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
     }
     // Handle rem values (assume 16px = 1rem)
         if (trimmedValue.endsWith("rem")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle em values (assume 16px = 1em for simplicity)
         if (trimmedValue.endsWith("em")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle percentage (convert to approximate px value, assuming 200px container)
         if (trimmedValue.endsWith("%")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
     }
     // Handle unitless numbers
         const numValue = parseFloat(trimmedValue);
-    return isNaN(numValue) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
+    return isNaN(numValue) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
 }, extractBorderRadiusFromElement = element => {
     if (!element || !element.props) return null;
     // Check inline styles first (highest priority)
@@ -2007,11 +2007,11 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
     // If element has children, recursively check them
         if (element.props.children) {
         const childRadius = extractBorderRadiusFromChildren(element.props.children);
-        if (childRadius > 0 && childRadius !== CONSTANTS$1.DEFAULT_CORNER_RADIUS) return childRadius;
+        if (childRadius > 0 && childRadius !== CONSTANTS$2.DEFAULT_CORNER_RADIUS) return childRadius;
     }
     return null;
 }, extractBorderRadiusFromChildren = children => {
-    if (!children) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    if (!children) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
     try {
         const childArray = React.Children.toArray(children);
         for (let i = 0; i < childArray.length; i++) {
@@ -2024,7 +2024,7 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
     } catch (error) {
         // Silently handle errors
     }
-    return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
 }, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
@@ -2195,10 +2195,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, 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 = {}, cornerRadius: cornerRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, 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 = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
     // Use a module-level counter that's consistent across server and client
     const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
@@ -2308,7 +2308,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             flowBlur: 1.2 * blurAmount
         };
         // Enhanced validation for liquid blur
-                if (!enableLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
+                if (!withLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
         try {
             const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = 2 * blurAmount, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * .15), edgeIntensity = .15 * mouseInfluence, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = .1 * mouseInfluence, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, 1.2 * baseBlur);
             // NOTE: hover/active multipliers intentionally omitted here —
@@ -2323,14 +2323,14 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
             defaultBlur;
         }
-    }), [ enableLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
+    }), [ withLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
         try {
             const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), validatedBaseBlur = "number" != typeof liquidBlur.baseBlur || isNaN(liquidBlur.baseBlur) ? 0 : liquidBlur.baseBlur, validatedEdgeBlur = "number" != typeof liquidBlur.edgeBlur || isNaN(liquidBlur.edgeBlur) ? 0 : liquidBlur.edgeBlur, validatedCenterBlur = "number" != typeof liquidBlur.centerBlur || isNaN(liquidBlur.centerBlur) ? 0 : liquidBlur.centerBlur, validatedFlowBlur = "number" != typeof liquidBlur.flowBlur || isNaN(liquidBlur.flowBlur) ? 0 : liquidBlur.flowBlur, area = rectCache ? rectCache.width * rectCache.height : 0;
             // Validate blur values before using them
-                        return !enableLiquidBlur || effectiveReducedMotion || effectiveDisableEffects || area > 18e4 ? {
+                        return !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? {
                 backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
             } : {
-                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
+                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1}) brightness(${overLightConfig?.brightness || 1})`
             };
             // Single-pass fallback: stronger radius to match perceived blur of multi-pass
                 } catch (error) {
@@ -2339,7 +2339,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
             };
         }
-    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = useMemo((() => {
+    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur ]), 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;
@@ -2347,10 +2347,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--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 cornerRadius || isNaN(cornerRadius) ? 0 : cornerRadius}px`,
+                "--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": effectiveDisableEffects ? 0 : 1,
+                "--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)",
@@ -2368,14 +2368,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]), setForceNoTransition = el => {
-        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
-        el.style.setProperty("transition-delay", "0s", "important"));
-    };
+    }), [ glassSize, padding, borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects ]);
     return jsx("div", {
         ref: el => {
             // Apply force no-transition
-            setForceNoTransition(el), 
             // Handle forwarded ref
             "function" == typeof ref ? ref(el) : ref && (ref.current = el);
         },
@@ -2410,7 +2406,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
-                    ref: setForceNoTransition,
+                    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})`,
@@ -2527,7 +2526,128 @@ class {
    */    getSubscriberCount() {
         return this.listeners.size;
     }
-}, {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
+}, 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 = {
+        opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
+        contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
+        brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
+        shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
+        borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence)),
+        saturationBoost: baseOverLightConfig.saturationBoost
+    };
+    // Calculate mouse influence
+        // Calculate elastic translation
+    let elasticTranslation = {
+        x: 0,
+        y: 0
+    };
+    if (!effectiveWithoutEffects && wrapperElement) {
+        const rect = wrapperElement.getBoundingClientRect(), center = calculateElementCenter(rect);
+        // Calculate fade in factor
+        let fadeInFactor = 0;
+        if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
+            const edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - 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;
+        }
+        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}`;
+    // 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 = {
+            hover1: {
+                x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
+                y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
+            },
+            hover2: {
+                x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
+                y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
+            },
+            hover3: {
+                x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+                y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
+            }
+        }, basePosition = {
+            x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
+            y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
+        }, opacityValues = {
+            hover1: isHovered || isActive ? .5 : 0,
+            hover2: isActive ? .5 : 0,
+            hover3: isHovered ? .4 : isActive ? .8 : 0,
+            base: isOverLight ? overLightConfig.opacity : 0,
+            over: isOverLight ? 1.1 * overLightConfig.opacity : 0
+        }, style = wrapperElement.style;
+        style.setProperty("--atomix-glass-transform", transformStyle || "none"), 
+        // Gradients
+        style.setProperty("--atomix-glass-border-gradient-1", `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
+        style.setProperty("--atomix-glass-border-gradient-2", `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
+        // Hover gradients
+        style.setProperty("--atomix-glass-hover-1-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`), 
+        style.setProperty("--atomix-glass-hover-2-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`), 
+        style.setProperty("--atomix-glass-hover-3-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`), 
+        style.setProperty("--atomix-glass-base-gradient", isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`), 
+        style.setProperty("--atomix-glass-overlay-gradient", isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`), 
+        // Opacities
+        style.setProperty("--atomix-glass-hover-1-opacity", opacityValues.hover1.toString()), 
+        style.setProperty("--atomix-glass-hover-2-opacity", opacityValues.hover2.toString()), 
+        style.setProperty("--atomix-glass-hover-3-opacity", opacityValues.hover3.toString()), 
+        style.setProperty("--atomix-glass-base-opacity", opacityValues.base.toString()), 
+        style.setProperty("--atomix-glass-overlay-opacity", opacityValues.over.toString()), 
+        style.setProperty("--atomix-glass-overlay-highlight-opacity", (opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER).toString()), 
+        // Other
+        style.setProperty("--atomix-glass-blend-mode", isOverLight ? "multiply" : "overlay"), 
+        style.setProperty("--atomix-glass-radius", `${effectiveBorderRadius}px`);
+    }
+    // Update Container Styles (containerVars)
+        if (containerElement) {
+        const mx = mouseOffset.x, 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();
+        let liquidBlur = {
+            baseBlur: blurAmount,
+            edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
+            centerBlur: blurAmount * CENTER_BLUR_MULTIPLIER,
+            flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER
+        };
+        if (withLiquidBlur && rect) {
+            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = blurAmount * MAX_BLUR_RELATIVE, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR), edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
+            liquidBlur = {
+                baseBlur: clampBlur(baseBlur),
+                edgeBlur: clampBlur(edgeBlur),
+                centerBlur: clampBlur(centerBlur),
+                flowBlur: clampBlur(flowBlur)
+            };
+        }
+        // Backdrop filter
+                let backdropFilterString = `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`;
+        const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), area = rect ? rect.width * rect.height : 0;
+        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-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-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;
+
+/**
+ * Updates the styles of the AtomixGlass wrapper and container elements imperatively
+ * to avoid React re-renders on mouse movement.
+ */ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
         result: result,
         timestamp: Date.now(),
@@ -2540,18 +2660,74 @@ class {
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadius: cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, disableEffects: disableEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugCornerRadius: debugCornerRadius = !1, debugOverLight: debugOverLight = !1, children: children}) {
+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}) {
     // State
-    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), [glassSize, setGlassSize] = useState({
-        width: 270,
-        height: 69
-    }), [internalGlobalMousePosition, setInternalGlobalMousePosition] = useState({
+    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
-    }), [internalMouseOffset, setInternalMouseOffset] = useState({
+    }), internalMouseOffsetRef = useRef({
         x: 0,
         y: 0
-    }), [dynamicCornerRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveCornerRadius = useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
+    }), [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
+        });
+        return useEffect((() => {
+            const isValidElement = element => null !== element && element instanceof HTMLElement && element.isConnected;
+            let rafId = null, lastSize = {
+                width: 0,
+                height: 0
+            }, lastCornerRadius = effectiveBorderRadius;
+            const updateGlassSize = (forceUpdate = !1) => {
+                null !== rafId && cancelAnimationFrame(rafId), rafId = requestAnimationFrame((() => {
+                    if (!isValidElement(glassRef.current)) return void (rafId = null);
+                    const rect = glassRef.current.getBoundingClientRect();
+                    if (rect.width <= 0 || rect.height <= 0) return void (rafId = null);
+                    // Measure actual rendered size without artificial offsets to avoid feedback loops
+                                        const newSize = {
+                        width: Math.round(rect.width),
+                        height: Math.round(rect.height)
+                    }, cornerRadiusChanged = lastCornerRadius !== effectiveBorderRadius, dimensionsChanged = Math.abs(newSize.width - lastSize.width) > 1 || Math.abs(newSize.height - lastSize.height) > 1;
+                    var size;
+                    (forceUpdate || cornerRadiusChanged || dimensionsChanged) && validateGlassSize(size = newSize) && size.width <= CONSTANTS$1.MAX_SIZE && size.height <= CONSTANTS$1.MAX_SIZE && (lastSize = newSize, 
+                    lastCornerRadius = effectiveBorderRadius, setGlassSize(newSize)), rafId = null;
+                }));
+            };
+            let resizeTimeoutId = null;
+            const debouncedResizeHandler = () => {
+                resizeTimeoutId && clearTimeout(resizeTimeoutId), resizeTimeoutId = setTimeout((() => updateGlassSize(!1)), 16);
+            }, initialTimeoutId = setTimeout((() => updateGlassSize(!0)), 0);
+            let resizeObserver = null, resizeDebounceTimeout = null;
+            // ResizeObserver has 98%+ browser support, no need for fallback
+            if ("undefined" != typeof ResizeObserver && isValidElement(glassRef.current)) try {
+                resizeObserver = new ResizeObserver((entries => {
+                    for (const entry of entries) if (entry.target === glassRef.current) {
+                        // Update cached rect when size changes
+                        glassRef.current && cachedRectRef && (cachedRectRef.current = glassRef.current.getBoundingClientRect()), 
+                        // Debounce resize updates to match RAF timing (16ms)
+                        resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), resizeDebounceTimeout = setTimeout((() => updateGlassSize(!1)), 16);
+                        break;
+                    }
+                })), resizeObserver.observe(glassRef.current);
+            } catch (error) {
+                console.warn("AtomixGlass: ResizeObserver not available, using window resize only", error);
+            }
+            return window.addEventListener("resize", debouncedResizeHandler, {
+                passive: !0
+            }), () => {
+                clearTimeout(initialTimeoutId), null !== rafId && cancelAnimationFrame(rafId), resizeTimeoutId && clearTimeout(resizeTimeoutId), 
+                resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), window.removeEventListener("resize", debouncedResizeHandler), 
+                resizeObserver?.disconnect();
+            };
+        }), [ effectiveBorderRadius, glassRef, cachedRectRef ]), {
+            glassSize: glassSize
+        };
+    }({
+        glassRef: glassRef,
+        effectiveBorderRadius: effectiveBorderRadius,
+        cachedRectRef: cachedRectRef
+    }), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
@@ -2582,13 +2758,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                 }
                 null !== extractedRadius && extractedRadius > 0 && setDynamicCornerRadius(extractedRadius);
             } catch (error) {
-                "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugCornerRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
+                "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugBorderRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
             }
         };
         extractRadius();
         const timeoutId = setTimeout(extractRadius, 100);
         return () => clearTimeout(timeoutId);
-    }), [ children, debugCornerRadius, contentRef ]), 
+    }), [ children, debugBorderRadius, contentRef ]), 
     // Media query handlers and background detection
     useEffect((() => {
         if (("auto" === overLight || "object" == typeof overLight && null !== overLight) && glassRef.current) {
@@ -2644,72 +2820,52 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                                 const rgb = bgColor.match(/\d+/g);
                                 if (rgb && rgb.length >= 3) {
                                     const r = Number(rgb[0]), g = Number(rgb[1]), b = Number(rgb[2]);
-                                    // Validate RGB values are valid numbers
-                                    if (!isNaN(r) && !isNaN(g) && !isNaN(b) && isFinite(r) && isFinite(g) && isFinite(b) && r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255 && (r > 10 || g > 10 || b > 10)) {
+                                    if (!isNaN(r) && !isNaN(g) && !isNaN(b) && (r > 10 || g > 10 || b > 10)) {
                                         const luminance = (.299 * r + .587 * g + .114 * b) / 255;
                                         !isNaN(luminance) && isFinite(luminance) && (totalLuminance += luminance, validSamples++, 
                                         hasValidBackground = !0);
                                     }
                                 }
                             }
-                            // Check for image backgrounds
-                                                        bgImage && "none" !== bgImage && "initial" !== bgImage && (
-                            // For image backgrounds, assume medium luminance
-                            totalLuminance += .5, validSamples++, hasValidBackground = !0);
+                            bgImage && "none" !== bgImage && "initial" !== bgImage && (totalLuminance += .5, 
+                            validSamples++, hasValidBackground = !0);
                         } catch (styleError) {
-                            "undefined" == typeof process || process.env;
+                            // Silently continue
                         }
-                        // Move to parent element for next iteration
-                                                if (!currentElement) break;
- // Exit loop if currentElement becomes null
-                                                currentElement = currentElement.parentElement, depth++;
+                        if (!currentElement) break;
+                        currentElement = currentElement.parentElement, depth++;
                     }
-                    // More conservative detection with better error handling
-                                        if (hasValidBackground && validSamples > 0) {
+                    if (hasValidBackground && validSamples > 0) {
                         const avgLuminance = totalLuminance / validSamples;
                         if (!isNaN(avgLuminance) && isFinite(avgLuminance)) {
                             let threshold = .7;
- // Conservative threshold for overlight
-                            // If overLight is an object, use its threshold property with validation
-                                                        if ("object" == typeof overLight && null !== overLight) {
+                            if ("object" == typeof overLight && null !== overLight) {
                                 const objConfig = overLight;
                                 if (void 0 !== objConfig.threshold) {
-                                    const configThreshold = "number" == typeof objConfig.threshold && !isNaN(objConfig.threshold) && isFinite(objConfig.threshold) ? objConfig.threshold : .7;
+                                    const configThreshold = "number" != typeof objConfig.threshold || isNaN(objConfig.threshold) ? .7 : objConfig.threshold;
                                     threshold = Math.min(.9, Math.max(.1, configThreshold));
                                 }
                             }
                             const isOverLightDetected = avgLuminance > threshold;
-                            // Cache the result in shared cache
-                                                        setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold), 
+                            setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold), 
                             setDetectedOverLight(isOverLightDetected);
                         } else {
-                            // Invalid luminance calculation, default to false
                             const result = !1, threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
                             setCachedBackgroundDetection(element.parentElement, overLight, result, threshold), 
                             setDetectedOverLight(result);
                         }
                     } else {
-                        // Default to false if no valid background found
                         const result = !1, threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
                         setCachedBackgroundDetection(element.parentElement, overLight, result, threshold), 
                         setDetectedOverLight(result);
                     }
                 } catch (error) {
-                    // Enhanced error logging with context
-                    "undefined" != typeof process && "development" !== process.env?.NODE_ENV || console.warn("AtomixGlass: Error detecting background brightness:", error);
-                    const result = !1;
-                    if (element && element.parentElement) {
-                        const threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
-                        setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
-                    }
-                    setDetectedOverLight(result);
+                    setDetectedOverLight(!1);
                 }
             }), 150);
             return () => clearTimeout(timeoutId);
         }
-        if ("boolean" == typeof overLight && 
-        // For boolean values, disable auto-detection
-        setDetectedOverLight(!1), "function" == typeof window.matchMedia) try {
+        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 => {
@@ -2720,64 +2876,54 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             return mediaQueryReducedMotion.addEventListener ? (mediaQueryReducedMotion.addEventListener("change", handleReducedMotionChange), 
             mediaQueryHighContrast.addEventListener("change", handleHighContrastChange)) : mediaQueryReducedMotion.addListener && (mediaQueryReducedMotion.addListener(handleReducedMotionChange), 
             mediaQueryHighContrast.addListener(handleHighContrastChange)), () => {
-                try {
-                    mediaQueryReducedMotion.removeEventListener ? (mediaQueryReducedMotion.removeEventListener("change", handleReducedMotionChange), 
-                    mediaQueryHighContrast.removeEventListener("change", handleHighContrastChange)) : mediaQueryReducedMotion.removeListener && (mediaQueryReducedMotion.removeListener(handleReducedMotionChange), 
-                    mediaQueryHighContrast.removeListener(handleHighContrastChange));
-                } catch (cleanupError) {
-                    console.error("AtomixGlass: Error cleaning up media query listeners:", cleanupError);
-                }
+                // ignore
             };
         } catch (error) {
-            return void console.error("AtomixGlass: Error setting up media queries:", error);
+            return;
         }
     }), [ overLight, glassRef, debugOverLight ]);
-    // Mouse tracking using shared global tracker
-    // Cache bounding rect to avoid repeated getBoundingClientRect calls
-    const cachedRectRef = useRef(null), updateRectRef = useRef(null), handleGlobalMousePosition = useCallback((globalPos => {
-        if (externalGlobalMousePosition && externalMouseOffset) 
-        // External mouse position provided, skip internal tracking
-        return;
-        if (effectiveDisableEffects) return;
-        const container = mouseContainer?.current || glassRef.current;
-        if (!container) return;
-        // Use cached rect if available, otherwise get new one
-                let rect = cachedRectRef.current;
-        if (rect && 0 !== rect.width && 0 !== rect.height || (rect = container.getBoundingClientRect(), 
-        cachedRectRef.current = rect), 0 === rect.width || 0 === rect.height) return;
-        const center = calculateElementCenter(rect), newOffset = {
-            x: (globalPos.x - center.x) / rect.width * 100,
-            y: (globalPos.y - center.y) / rect.height * 100
+    /**
+   * 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 = {
+            isOverLight: isOverLight,
+            threshold: .7,
+            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5)) : 0,
+            contrast: 1,
+            // Base contrast
+            brightness: 1,
+            // Base brightness
+            saturationBoost: 1.3,
+            shadowIntensity: .9,
+            borderOpacity: .7
         };
-        // Calculate offset relative to this container
-                // React 18 automatically batches these updates
-        setInternalMouseOffset(newOffset), setInternalGlobalMousePosition(globalPos);
-    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects ]);
-    // Subscribe to shared mouse tracker
-    useEffect((() => {
-        if (externalGlobalMousePosition && externalMouseOffset) 
-        // External mouse position provided, don't subscribe
-        return;
-        if (effectiveDisableEffects) 
-        // Effects disabled, don't subscribe
-        return;
-        // Subscribe to shared tracker
-                const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition), container = mouseContainer?.current || glassRef.current;
-        // Update cached rect when container size changes
-                let resizeObserver = null;
-        return container && "undefined" != typeof ResizeObserver && (resizeObserver = new ResizeObserver((() => {
-            null !== updateRectRef.current && cancelAnimationFrame(updateRectRef.current), updateRectRef.current = requestAnimationFrame((() => {
-                const container = mouseContainer?.current || glassRef.current;
-                container && (cachedRectRef.current = container.getBoundingClientRect()), updateRectRef.current = null;
-            }));
-        })), resizeObserver.observe(container)), () => {
-            unsubscribe(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
-            updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
+        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 {
+                ...baseConfig,
+                threshold: validatedThreshold,
+                opacity: validatedOpacity,
+                contrast: validatedContrast,
+                brightness: validatedBrightness,
+                saturationBoost: validatedSaturationBoost
+            };
+        }
+        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))
         };
-    }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects ]);
-    // Transform calculations
-    const calculateDirectionalScale = useCallback((() => {
-        if (!0 === overLight || "auto" === overLight && detectedOverLight || "object" == typeof overLight && null !== overLight && detectedOverLight) return "scale(1)";
+    }), [ 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,
@@ -2791,7 +2937,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         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, overLight, detectedOverLight ]), calculateFadeInFactor = useCallback((() => {
+    }), [ 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,
@@ -2811,122 +2957,110 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             x: (globalMousePosition.x - center.x) * elasticity * .1 * fadeInFactor,
             y: (globalMousePosition.y - center.y) * elasticity * .1 * fadeInFactor
         };
-    }), [ globalMousePosition, elasticity, calculateFadeInFactor, glassRef ]), elasticTranslation = useMemo((() => effectiveDisableEffects ? {
+    }), [ globalMousePosition, elasticity, calculateFadeInFactor, glassRef ]), elasticTranslation = useMemo((() => effectiveWithoutEffects ? {
         x: 0,
         y: 0
-    } : calculateElasticTranslation()), [ calculateElasticTranslation, effectiveDisableEffects ]), directionalScale = useMemo((() => effectiveDisableEffects ? "scale(1)" : calculateDirectionalScale()), [ calculateDirectionalScale, effectiveDisableEffects ]), transformStyle = useMemo((() => effectiveDisableEffects ? 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, effectiveDisableEffects ]);
-    // Size management
-    useEffect((() => {
-        const isValidElement = element => null !== element && element instanceof HTMLElement && element.isConnected;
-        let rafId = null, lastSize = {
-            width: 0,
-            height: 0
-        }, lastCornerRadius = effectiveCornerRadius;
-        const updateGlassSize = (forceUpdate = !1) => {
-            null !== rafId && cancelAnimationFrame(rafId), rafId = requestAnimationFrame((() => {
-                if (!isValidElement(glassRef.current)) return void (rafId = null);
-                const rect = glassRef.current.getBoundingClientRect();
-                if (rect.width <= 0 || rect.height <= 0) return void (rafId = null);
-                // Measure actual rendered size without artificial offsets to avoid feedback loops
-                                const newSize = {
-                    width: Math.round(rect.width),
-                    height: Math.round(rect.height)
-                }, cornerRadiusChanged = lastCornerRadius !== effectiveCornerRadius, dimensionsChanged = Math.abs(newSize.width - lastSize.width) > 1 || Math.abs(newSize.height - lastSize.height) > 1;
-                var size;
-                (forceUpdate || cornerRadiusChanged || dimensionsChanged) && validateGlassSize(size = newSize) && size.width <= CONSTANTS.MAX_SIZE && size.height <= CONSTANTS.MAX_SIZE && (lastSize = newSize, 
-                lastCornerRadius = effectiveCornerRadius, setGlassSize(newSize)), rafId = null;
-            }));
-        };
-        let resizeTimeoutId = null;
-        const debouncedResizeHandler = () => {
-            resizeTimeoutId && clearTimeout(resizeTimeoutId), resizeTimeoutId = setTimeout((() => updateGlassSize(!1)), 16);
-        }, initialTimeoutId = setTimeout((() => updateGlassSize(!0)), 0);
-        let resizeObserver = null, resizeDebounceTimeout = null;
-        // ResizeObserver has 98%+ browser support, no need for fallback
-        if ("undefined" != typeof ResizeObserver && isValidElement(glassRef.current)) try {
-            resizeObserver = new ResizeObserver((entries => {
-                for (const entry of entries) if (entry.target === glassRef.current) {
-                    // Update cached rect when size changes
-                    glassRef.current && (cachedRectRef.current = glassRef.current.getBoundingClientRect()), 
-                    // Debounce resize updates to match RAF timing (16ms)
-                    resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), resizeDebounceTimeout = setTimeout((() => updateGlassSize(!1)), 16);
-                    break;
-                }
-            })), resizeObserver.observe(glassRef.current);
-        } catch (error) {
-            console.warn("AtomixGlass: ResizeObserver not available, using window resize only", error);
-        }
-        return window.addEventListener("resize", debouncedResizeHandler, {
-            passive: !0
-        }), () => {
-            clearTimeout(initialTimeoutId), null !== rafId && cancelAnimationFrame(rafId), resizeTimeoutId && clearTimeout(resizeTimeoutId), 
-            resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), window.removeEventListener("resize", debouncedResizeHandler), 
-            resizeObserver?.disconnect();
+    } : 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 => {
+        if (externalGlobalMousePosition && externalMouseOffset) return;
+        if (effectiveWithoutEffects) return;
+        const container = mouseContainer?.current || glassRef.current;
+        if (!container) return;
+        // Use cached rect if available, otherwise get new one
+                let rect = cachedRectRef.current;
+        if (rect && 0 !== rect.width && 0 !== rect.height || (rect = container.getBoundingClientRect(), 
+        cachedRectRef.current = rect), 0 === rect.width || 0 === rect.height) return;
+        const center = calculateElementCenter(rect), newOffset = {
+            x: (globalPos.x - center.x) / rect.width * 100,
+            y: (globalPos.y - center.y) / rect.height * 100
         };
-    }), [ effectiveCornerRadius, glassRef ]);
-    // OverLight config
+        // 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 ]);
     /**
-   * Get effective overLight value based on configuration
-   * - boolean: returns the boolean value directly
-   * - 'auto': returns detectedOverLight (auto-detected from background)
-   * - object: returns detectedOverLight (auto-detected, but config object provides customization)
-   */
-    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(), mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
-            isOverLight: isOverLight,
-            threshold: .7,
-            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: Math.min(1.6, Math.max(1, 1.4 + .1 * mouseInfluence)),
-            brightness: Math.min(1.1, Math.max(.8, .9 + .05 * mouseInfluence)),
-            saturationBoost: 1.3,
-            // Fixed value — dynamic saturation amplifies perceived displacement
-            shadowIntensity: Math.min(1.2, Math.max(.5, .9 + .2 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, .7 + .1 * mouseInfluence))
+   * Validate and clamp a numeric config value
+   */    
+    // Subscribe to shared mouse tracker
+    useEffect((() => {
+        if (externalGlobalMousePosition && externalMouseOffset) return;
+        if (effectiveWithoutEffects) return;
+        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition), 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((() => {
+                const container = mouseContainer?.current || glassRef.current;
+                container && (cachedRectRef.current = container.getBoundingClientRect()), updateRectRef.current = null;
+            }));
+        })), resizeObserver.observe(container)), () => {
+            unsubscribe(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
+            updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
         };
-        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), finalConfig = {
-                ...baseConfig,
-                threshold: validatedThreshold,
-                opacity: validatedOpacity * hoverIntensity * activeIntensity,
-                contrast: Math.min(1.6, validatedContrast + .1 * mouseInfluence),
-                brightness: Math.min(1.1, validatedBrightness + .05 * mouseInfluence),
-                saturationBoost: validatedSaturationBoost
-            };
-            // Validate and apply object config values with proper clamping
-                        return "undefined" == typeof process || process.env, finalConfig;
-        }
-        // Debug logging for non-object configs
-                return "undefined" == typeof process || process.env, baseConfig;
-    }), [ overLight, getEffectiveOverLight, mouseOffset, isHovered, isActive, validateConfigValue, debugOverLight ]), handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleKeyDown = useCallback((e => {
+    }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
+    // Also call updateStyles on other state changes (hover, active, etc)
+    useEffect((() => {
+        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+            mouseOffset: externalMouseOffset || internalMouseOffsetRef.current,
+            globalMousePosition: externalGlobalMousePosition || internalGlobalMousePositionRef.current,
+            glassSize: glassSize,
+            isHovered: isHovered,
+            isActive: isActive,
+            isOverLight: baseOverLightConfig.isOverLight,
+            baseOverLightConfig: baseOverLightConfig,
+            effectiveBorderRadius: effectiveBorderRadius,
+            effectiveWithoutEffects: effectiveWithoutEffects,
+            effectiveReducedMotion: effectiveReducedMotion,
+            elasticity: elasticity,
+            directionalScale: directionalScale,
+            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 ]);
+    // 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 => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
-    }), [ onClick ]), handleMouseMove = useCallback((_e => {}), []);
-    /**
-   * Validate and clamp a numeric config value
-   * @param value - The value to validate
-   * @param min - Minimum allowed value
-   * @param max - Maximum allowed value
-   * @param defaultValue - Default value if validation fails
-   * @returns Validated and clamped value
-   */    return {
-        // State
+    }), [ onClick ]);
+    return {
         isHovered: isHovered,
         isActive: isActive,
         glassSize: glassSize,
-        dynamicCornerRadius: dynamicCornerRadius,
-        effectiveCornerRadius: effectiveCornerRadius,
+        dynamicBorderRadius: dynamicBorderRadius,
+        effectiveBorderRadius: effectiveBorderRadius,
         effectiveReducedMotion: effectiveReducedMotion,
         effectiveHighContrast: effectiveHighContrast,
-        effectiveDisableEffects: effectiveDisableEffects,
+        effectiveWithoutEffects: effectiveWithoutEffects,
         detectedOverLight: detectedOverLight,
         globalMousePosition: globalMousePosition,
+        // This is now static (refs or props) unless prop changes
         mouseOffset: mouseOffset,
-        // OverLight config
+        // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
-        // Transform calculations
         elasticTranslation: elasticTranslation,
         directionalScale: directionalScale,
         transformStyle: transformStyle,
-        // Event handlers
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -2965,7 +3099,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
  *
  * @example
  * // Manual border-radius override
- * <AtomixGlass cornerRadius={20}>
+ * <AtomixGlass borderRadius={20}>
  *   <div>Content with 20px glass radius</div>
  * </AtomixGlass>
  *
@@ -3006,37 +3140,48 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
  * <AtomixGlass overLight="auto" debugOverLight={true}>
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
- */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, cornerRadius: cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, disableEffects: disableEffects = !1, enableLiquidBlur: enableLiquidBlur = !1, enableBorderEffect: enableBorderEffect = !0, enableOverLightLayers: enableOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, enablePerformanceMonitoring: enablePerformanceMonitoring = !1, debugCornerRadius: debugCornerRadius = !1, debugOverLight: debugOverLight = !1}) {
-    const glassRef = useRef(null), contentRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveCornerRadius: effectiveCornerRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveDisableEffects: effectiveDisableEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+ */ 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({
         glassRef: glassRef,
         contentRef: contentRef,
-        cornerRadius: cornerRadius,
+        borderRadius: borderRadius,
         globalMousePosition: externalGlobalMousePosition,
         mouseOffset: externalMouseOffset,
         mouseContainer: mouseContainer,
         overLight: overLight,
         reducedMotion: reducedMotion,
         highContrast: highContrast,
-        disableEffects: disableEffects,
+        withoutEffects: withoutEffects,
         elasticity: elasticity,
         onClick: onClick,
-        debugCornerRadius: debugCornerRadius,
+        debugBorderRadius: debugBorderRadius,
         debugOverLight: debugOverLight,
-        enablePerformanceMonitoring: enablePerformanceMonitoring,
-        children: children
-    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
+        debugPerformance: debugPerformance,
+        children: children,
+        blurAmount: blurAmount,
+        saturation: saturation,
+        withLiquidBlur: withLiquidBlur,
+        padding: padding,
+        style: style
+    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, baseStyle = {
         ...style,
-        ...!effectiveDisableEffects && {
+        ...!effectiveWithoutEffects && {
             transform: transformStyle
         }
-    }, componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveDisableEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
+    }, 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((() => ({
-        width: "fixed" !== style.position ? "100%" : style.width ? style.width : Math.max(glassSize.width, 0),
-        height: "fixed" !== style.position ? "100%" : style.height ? style.height : Math.max(glassSize.height, 0)
-    })), [ style.position, style.width, style.height, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
+    })), [ style.position, style.top, style.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, height, style.width, style.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,
@@ -3078,13 +3223,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [ 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 {
-            "--atomix-glass-radius": `${effectiveCornerRadius}px`,
+            "--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",
-            "--atomix-glass-width": "fixed" !== style.position ? adjustedSize.width : `${adjustedSize.width}px`,
-            "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
+            "--atomix-glass-width": adjustedSize.width,
+            "--atomix-glass-height": adjustedSize.height,
             "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
             "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
             "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
@@ -3100,24 +3245,25 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             "--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})`
         };
-    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ 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: `${effectiveCornerRadius}px`,
+            borderRadius: `${effectiveBorderRadius}px`,
             transform: baseStyle.transform
         }
     });
     return jsxs("div", {
+        ...rest,
         className: componentClassName,
         style: glassVars,
         role: role || (onClick ? "button" : void 0),
         tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
-        "aria-disabled": !(!onClick || !effectiveDisableEffects) || !onClick && void 0,
+        "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
         "aria-pressed": !(!onClick || !isActive) || !onClick && void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsx(AtomixGlassContainer, {
@@ -3125,18 +3271,18 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             contentRef: contentRef,
             className: className,
             style: baseStyle,
-            cornerRadius: effectiveCornerRadius,
-            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
-            blurAmount: effectiveDisableEffects ? 0 : blurAmount,
+            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,
             saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
-            aberrationIntensity: effectiveDisableEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
+            aberrationIntensity: effectiveWithoutEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
             glassSize: glassSize,
             padding: padding,
-            mouseOffset: effectiveDisableEffects ? {
+            mouseOffset: effectiveWithoutEffects ? {
                 x: 0,
                 y: 0
             } : mouseOffset,
-            globalMousePosition: effectiveDisableEffects ? {
+            globalMousePosition: effectiveWithoutEffects ? {
                 x: 0,
                 y: 0
             } : globalMousePosition,
@@ -3156,11 +3302,11 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             onClick: onClick,
             mode: mode,
             transform: baseStyle.transform,
-            effectiveDisableEffects: effectiveDisableEffects,
+            effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
             elasticity: elasticity,
-            enableLiquidBlur: enableLiquidBlur,
+            withLiquidBlur: withLiquidBlur,
             children: children
         }), Boolean(onClick) && jsxs(Fragment, {
             children: [ jsx("div", {
@@ -3182,11 +3328,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                     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}%)`
                 }
             }) ]
-        }), enableBorderEffect && jsxs(Fragment, {
+        }), withBorder && jsxs(Fragment, {
             children: [ jsx("span", {
-                className: ATOMIX_GLASS.BORDER_1_CLASS
+                className: ATOMIX_GLASS.BORDER_1_CLASS,
+                style: {
+                    width: glassSize.width,
+                    height: glassSize.height
+                }
             }), jsx("span", {
-                className: ATOMIX_GLASS.BORDER_2_CLASS
+                className: ATOMIX_GLASS.BORDER_2_CLASS,
+                style: {
+                    width: glassSize.width,
+                    height: glassSize.height
+                }
             }) ]
         }) ]
     });
@@ -3788,7 +3942,7 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
         // Default glass settings for badges
         const defaultGlassProps = {
             displacementScale: 20,
-            cornerRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
+            borderRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
             className: "c-badge--glass",
             elasticity: 0
         }, glassProps = !0 === glass ? defaultGlassProps : {
@@ -3909,7 +4063,7 @@ const useBlock = () => ({
  * ```
  */ Block.displayName = "Block";
 
-const BreadcrumbItem =  forwardRef((({children: children, href: href, active: active, icon: icon, onClick: onClick, className: className = "", style: style, linkAs: LinkComponent, linkProps: linkProps = {}, ...props}, ref) => {
+const BreadcrumbItem =  forwardRef((({children: children, href: href, active: active, icon: icon, onClick: onClick, className: className = "", style: style, linkAs: linkAs, linkProps: linkProps = {}, ...props}, ref) => {
     const itemClasses = [ BREADCRUMB.CLASSES.ITEM, active ? BREADCRUMB.CLASSES.ACTIVE : "", className ].filter(Boolean).join(" "), linkContent = jsxs(Fragment, {
         children: [ icon && jsx("span", {
             className: "c-breadcrumb__icon",
@@ -3927,7 +4081,9 @@ const BreadcrumbItem =  forwardRef((({children: children, href: href, active: ac
         className: itemClasses,
         style: style,
         ...props,
-        children: href && !active ? jsx(LinkComponent || "a", {
+        children: href && !active ? 
+        // @ts-ignore - Dynamic components are tricky in TS without stricter types
+        jsx(linkAs || "a", {
             href: href,
             ...commonLinkProps,
             children: linkContent
@@ -3940,7 +4096,7 @@ const BreadcrumbItem =  forwardRef((({children: children, href: href, active: ac
 
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
-const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style, children: children}) => {
+const Breadcrumb =  memo((function({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style, children: children}) {
     const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
     let content;
     if (items && items.length > 0) 
@@ -3962,11 +4118,11 @@ const Breadcrumb =  memo((({items: items, divider: divider, className: className
         const childrenCount = Children.count(children);
         content = Children.map(children, ((child, index) => {
             if ( isValidElement(child)) {
-                const isLast = index === childrenCount - 1, childProps = child.props;
+                const isLast = index === childrenCount - 1, childProps = child.props, {active: active, linkAs: linkAs, ...otherProps} = childProps;
                 
                 return cloneElement(child, {
-                    active: childProps.active ?? (!!isLast || void 0),
-                    linkAs: childProps.linkAs ?? LinkComponent
+                    active: active ?? (!!isLast || void 0),
+                    linkAs: linkAs ?? LinkComponent
                 });
             }
             return child;
@@ -4034,7 +4190,7 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
         const defaultGlassProps = {
             displacementScale: 20,
             blurAmount: 1,
-            cornerRadius: 999,
+            borderRadius: 999,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -4431,7 +4587,7 @@ const Callout =  memo((({title: title, children: children, icon: icon, variant:
         // Default glass settings for callouts
         const defaultGlassProps = {
             displacementScale: 30,
-            cornerRadius: 8,
+            borderRadius: 8,
             elasticity: 0
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -4453,7 +4609,7 @@ const Callout =  memo((({title: title, children: children, icon: icon, variant:
                 children: jsx("div", {
                     className: "c-callout__glass-content",
                     style: {
-                        borderRadius: glassProps.cornerRadius
+                        borderRadius: glassProps.borderRadius
                     },
                     children: calloutContent
                 })
@@ -5132,12 +5288,22 @@ const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
         left: 40
     }, config) => {
         if (!datasets || 0 === datasets.length) return null;
-        // Flatten all data points to find min/max values
-                const allDataPoints = datasets.flatMap((dataset => dataset.data));
-        if (0 === allDataPoints.length) return null;
-        const minValue = Math.min(...allDataPoints.map((point => point.value))), maxValue = Math.max(...allDataPoints.map((point => point.value))), valueRange = maxValue - minValue || 1, innerWidth = width - padding.left - padding.right, innerHeight = height - padding.top - padding.bottom;
-        return {
-            xScale: (index, dataLength = allDataPoints.length) => dataLength <= 1 ? padding.left + innerWidth / 2 : padding.left + index / (dataLength - 1) * innerWidth,
+        // Calculate total points and min/max values efficiently avoiding spread operator
+                let totalPoints = 0, minValue = 1 / 0, maxValue = -1 / 0, hasValidData = !1;
+        for (const dataset of datasets) if (dataset.data) {
+            totalPoints += dataset.data.length;
+            const {min: min, max: max, hasValid: hasValid} = getDatasetBounds(dataset.data);
+            hasValid && (min < minValue && (minValue = min), max > maxValue && (maxValue = max), 
+            hasValidData = !0);
+        }
+        if (0 === totalPoints) return null;
+        // Handle case with no valid numeric data
+                hasValidData || (minValue = 0, maxValue = 0);
+        const valueRange = maxValue - minValue || 1, innerWidth = width - padding.left - padding.right, innerHeight = height - padding.top - padding.bottom;
+ // Avoid division by zero
+        // Apply padding
+                return {
+            xScale: (index, dataLength = totalPoints) => dataLength <= 1 ? padding.left + innerWidth / 2 : padding.left + index / (dataLength - 1) * innerWidth,
             yScale: value => padding.top + innerHeight - (value - minValue) / valueRange * innerHeight,
             minValue: minValue,
             maxValue: maxValue,
@@ -5192,6 +5358,29 @@ const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
 
 /**
  * Hook for chart data processing and transformation
+ */
+/**
+ * Helper to calculate min/max values from a dataset efficiently
+ * avoiding spread operator which can cause stack overflow on large arrays
+ */
+function getDatasetBounds(data) {
+    let min = 1 / 0, max = -1 / 0, hasValid = !1;
+    if (data && data.length > 0) for (let i = 0; i < data.length; i++) {
+        const point = data[i];
+        if (point && "number" == typeof point.value) {
+            const val = point.value;
+            val < min && (min = val), val > max && (max = val), hasValid = !0;
+        }
+    }
+    return {
+        min: min,
+        max: max,
+        hasValid: hasValid
+    };
+}
+
+/**
+ * Hook for managing chart toolbar state and generating chart-specific configurations
  */ const ChartToolbar =  memo( forwardRef((({chartType: chartType = "line", groups: groups = [], enableDefaults: enableDefaults = !0, defaults: defaults = {
     refresh: !0,
     export: !0,
@@ -5612,11 +5801,7 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         onZoomReset: handleZoomReset,
         onPanToggle: handlePanToggle,
         onReset: handleReset
-    })), [ onRefresh, onExport, handleFullscreenChange, handleZoomIn, handleZoomOut, handleZoomReset, handlePanToggle, handleReset ]), {state: toolbarState, handlers: toolbarHandlers, toolbarGroups: toolbarGroups} = 
-    /**
- * Hook for managing chart toolbar state and generating chart-specific configurations
- */
-    function(chartType, config = {}, handlers = {}) {
+    })), [ onRefresh, onExport, handleFullscreenChange, handleZoomIn, handleZoomOut, handleZoomReset, handlePanToggle, handleReset ]), {state: toolbarState, handlers: toolbarHandlers, toolbarGroups: toolbarGroups} = function(chartType, config = {}, handlers = {}) {
         const [state, setState] = useState({
             isFullscreen: !1,
             isExporting: !1,
@@ -6001,16 +6186,16 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         aberrationIntensity: 1.5,
         elasticity: 0,
         // No elastic effect for charts
-        enableLiquidBlur: !1,
+        withLiquidBlur: !1,
         // Keep it simple
-        enableBorderEffect: !0,
+        withBorder: !0,
         mode: "standard",
         mouseContainer: chartContainerRef,
         reducedMotion: !1
     })), []), glassProps = useMemo((() => glass ? !0 === glass ? defaultChartGlassProps : {
         ...defaultChartGlassProps,
         ...glass
-    } : null), [ glass, defaultChartGlassProps ]), chartBorderRadius = useMemo((() => glassProps?.cornerRadius || void 0), [ glassProps?.cornerRadius ]), chartContextValue = useMemo((() => ({
+    } : null), [ glass, defaultChartGlassProps ]), chartBorderRadius = useMemo((() => glassProps?.borderRadius || void 0), [ glassProps?.borderRadius ]), chartContextValue = useMemo((() => ({
         zoomLevel: zoomLevel,
         panOffset: panOffset,
         panEnabled: panEnabled,
@@ -6141,7 +6326,7 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         }) ]
     }), wrappedChart = glassProps ? jsx(AtomixGlass, {
         ...glassProps,
-        cornerRadius: chartBorderRadius,
+        borderRadius: chartBorderRadius,
         style: {
             width: "100%",
             height: "100%",
@@ -6194,7 +6379,13 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
     // Get chart context (zoom/pan state from toolbar) - optional
     // Always call useContext to maintain consistent hook order
     const chartContext = useContext(ChartContext), {calculateScales: calculateScales, getChartColors: getChartColors} = useChart(), {processedData: processedData, isProcessing: isProcessing} = function(datasets, options) {
-        const [processedData, setProcessedData] = useState(datasets), [isProcessing, setIsProcessing] = useState(!1), {enableDecimation: enableDecimation = !1, maxDataPoints: maxDataPoints = 1e3, enableRealTime: enableRealTime = !1, realTimeInterval: realTimeInterval = 1e3} = options || {}, decimateData = useCallback(((data, maxPoints) => {
+        const [processedData, setProcessedData] = useState(datasets), [isProcessing, setIsProcessing] = useState(!1), {enableDecimation: enableDecimation = !1, maxDataPoints: maxDataPoints = 1e3, enableRealTime: enableRealTime = !1, realTimeInterval: realTimeInterval = 1e3} = options || {}, lastDataSignature = useRef(""), getDatasetSignature = useCallback((data => data.map((d => `${d.label}:${JSON.stringify(d.data)}`)).join("|")), []);
+        // Update signature when processedData changes (e.g. via props)
+        useEffect((() => {
+            lastDataSignature.current = getDatasetSignature(processedData);
+        }), [ processedData, getDatasetSignature ]);
+        // Data decimation for performance
+        const decimateData = useCallback(((data, maxPoints) => {
             if (!enableDecimation || !data.length) return data;
             const dataLength = data[0]?.data?.length || 0;
             if (dataLength <= maxPoints) return data;
@@ -6214,10 +6405,17 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
         }), []), calculateTrendLine = useCallback((values => {
             const n = values.length;
             if (n < 2) return values.map((() => null));
-            const xSum = _reduceInstanceProperty(values).call(values, ((sum, _, i) => sum + i), 0), ySum = _reduceInstanceProperty(values).call(values, ((sum, val) => sum + val), 0), slope = (n * _reduceInstanceProperty(values).call(values, ((sum, val, i) => sum + i * val), 0) - xSum * ySum) / (n * _reduceInstanceProperty(values).call(values, ((sum, _, i) => sum + i * i), 0) - xSum * xSum), intercept = (ySum - slope * xSum) / n;
+            let xSum = 0, ySum = 0, xySum = 0, x2Sum = 0;
+            for (let i = 0; i < n; i++) {
+                const val = values[i], safeVal = "number" == typeof val ? val : 0;
+                // Treat null/undefined as 0 to match original reduce behavior
+                                xSum += i, ySum += safeVal, xySum += i * safeVal, x2Sum += i * i;
+            }
+            const slope = (n * xySum - xSum * ySum) / (n * x2Sum - xSum * xSum), intercept = (ySum - slope * xSum) / n;
             return values.map(((_, i) => slope * i + intercept));
         }), []);
-        // Process data when datasets change
+        // Moving average calculation
+                // Process data when datasets change
         return useEffect((() => {
             setIsProcessing(!0), (async () => {
                 let processed = [ ...datasets ];
@@ -6229,11 +6427,12 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
         useEffect((() => {
             if (!enableRealTime) return;
             const interval = setInterval((() => {
-                setProcessedData((prev => [ ...prev ]));
- // Trigger re-render for real-time updates
-                        }), realTimeInterval);
+                setProcessedData((prev => 
+                // Only trigger update if signature changed
+                getDatasetSignature(prev) === lastDataSignature.current ? prev : [ ...prev ]));
+            }), realTimeInterval);
             return () => clearInterval(interval);
-        }), [ enableRealTime, realTimeInterval ]), {
+        }), [ enableRealTime, realTimeInterval, getDatasetSignature ]), {
             processedData: processedData,
             isProcessing: isProcessing,
             decimateData: decimateData,
@@ -6254,12 +6453,12 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
  */
     function(datasets, options) {
         const {enableVirtualization: enableVirtualization = !1, enableMemoization: enableMemoization = !0, debounceMs: debounceMs = 100} = options || {}, [isOptimizing, setIsOptimizing] = useState(!1), debounceRef = useRef(null), memoizedScales = useMemo((() => enableMemoization ? datasets.map((dataset => {
-            const values = dataset.data?.map((d => d.value)).filter((v => "number" == typeof v)) || [], validValues = values.length > 0 ? values : [ 0 ];
+            const {min: min, max: max, hasValid: hasValid} = getDatasetBounds(dataset.data);
             return {
                 label: dataset.label,
                 dataLength: dataset.data?.length || 0,
-                minValue: Math.min(...validValues),
-                maxValue: Math.max(...validValues)
+                minValue: hasValid ? min : 0,
+                maxValue: hasValid ? max : 0
             };
         })) : null), [ datasets, enableMemoization ]), debouncedUpdate = useCallback((callback => {
             debounceRef.current && clearTimeout(debounceRef.current), debounceRef.current = setTimeout((() => {
@@ -6358,8 +6557,8 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
         const getAccessibleDescription = useCallback((() => {
             if (!datasets.length) return "Empty chart";
             const datasetDescriptions = datasets.map(((dataset, i) => {
-                const dataCount = dataset.data?.length || 0, values = dataset.data?.map((d => d.value)).filter((v => "number" == typeof v)) || [], min = values.length > 0 ? Math.min(...values) : 0, max = values.length > 0 ? Math.max(...values) : 0;
-                return `Dataset ${i + 1}: ${dataset.label}, ${dataCount} points, range ${min} to ${max}`;
+                const dataCount = dataset.data?.length || 0, {min: min, max: max, hasValid: hasValid} = getDatasetBounds(dataset.data), minVal = hasValid ? min : 0, maxVal = hasValid ? max : 0;
+                return `Dataset ${i + 1}: ${dataset.label}, ${dataCount} points, range ${minVal} to ${maxVal}`;
             })).join(". ");
             return `Chart with ${datasets.length} datasets. ${datasetDescriptions}`;
         }), [ datasets ]);
@@ -8605,14 +8804,14 @@ const ScatterChart =  memo( forwardRef((({datasets: datasets = [], config: confi
 
 ScatterChart.displayName = "ScatterChart";
 
-const TreemapChart =  memo( forwardRef((({data: data = [], algorithm: algorithm = "squarified", colorConfig: colorConfig = {
+const DEFAULT_COLOR_CONFIG = {
     scheme: "category"
-}, labelConfig: labelConfig = {
+}, DEFAULT_LABEL_CONFIG = {
     showLabels: !0,
     minSize: 1e3,
     fontSize: 12,
     textColor: "white"
-}, onDataPointClick: onDataPointClick, config: config = {}, ...props}, ref) => {
+}, 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({
         x: 0,
@@ -8724,87 +8923,87 @@ const TreemapChart =  memo( forwardRef((({data: data = [], algorithm: algorithm
                 remainingHeight -= rowHeight), currentRow = [];
             }
         }
-    }), []);
+    }), []), renderContent = useCallback((({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint}) => {
+        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 totalValue = _reduceInstanceProperty(leafNodes).call(leafNodes, ((sum, node) => sum + node.value), 0), treemapNodes = leafNodes.map(((item, index) => ({
+            id: item.id,
+            label: item.label,
+            value: item.value,
+            color: generateColor(item, 0, index) || "transparent",
+            x: 0,
+            // Will be calculated by squarify
+            y: 0,
+            // Will be calculated by squarify
+            width: 0,
+            // Will be calculated by squarify
+            height: 0,
+            // Will be calculated by squarify
+            depth: 0,
+            children: [],
+            originalData: item
+        })));
+        // 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 {
+            // 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.height = nodeHeight;
+            }));
+        }
+        return jsx(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,
+                        fill: node.color,
+                        className: `c-chart__treemap-node ${isHovered ? "c-chart__treemap-node--hovered" : ""} ${isSelected ? "c-chart__treemap-node--selected" : ""}`,
+                        onClick: () => {
+                            setSelectedNode(node), handlers.onDataPointClick?.(node.originalData, 0, 0);
+                        },
+                        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);
+                        },
+                        onMouseLeave: () => {
+                            setHoveredNode(null), handlers.onPointLeave();
+                        }
+                    }), showLabel && jsx("text", {
+                        x: node.x + node.width / 2,
+                        y: node.y + node.height / 2,
+                        textAnchor: "middle",
+                        dominantBaseline: "middle",
+                        className: "c-chart__treemap-label",
+                        style: {
+                            fontSize: labelConfig.fontSize,
+                            fill: labelConfig.textColor
+                        },
+                        children: node.label
+                    }) ]
+                }, node.id);
+            }))
+        });
+    }), [ data, algorithm, generateColor, squarify, labelConfig, hoveredNode, selectedNode ]), datasets = useMemo((() => [ {
+        label: "Treemap Data",
+        data: data
+    } ]), [ data ]);
     // Squarified treemap algorithm
         return jsx(BaseChart, {
         ref: ref,
         type: "treemap",
-        datasets: [ {
-            label: "Treemap Data",
-            data: data
-        } ],
+        datasets: datasets,
         config: config,
-        renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint}) => {
-            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 totalValue = _reduceInstanceProperty(leafNodes).call(leafNodes, ((sum, node) => sum + node.value), 0), treemapNodes = leafNodes.map(((item, index) => ({
-                id: item.id,
-                label: item.label,
-                value: item.value,
-                color: generateColor(item, 0, index) || "transparent",
-                x: 0,
-                // Will be calculated by squarify
-                y: 0,
-                // Will be calculated by squarify
-                width: 0,
-                // Will be calculated by squarify
-                height: 0,
-                // Will be calculated by squarify
-                depth: 0,
-                children: [],
-                originalData: item
-            })));
-            // 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 {
-                // 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.height = nodeHeight;
-                }));
-            }
-            return jsx(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,
-                            fill: node.color,
-                            className: `c-chart__treemap-node ${isHovered ? "c-chart__treemap-node--hovered" : ""} ${isSelected ? "c-chart__treemap-node--selected" : ""}`,
-                            onClick: () => {
-                                setSelectedNode(node), handlers.onDataPointClick?.(node.originalData, 0, 0);
-                            },
-                            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);
-                            },
-                            onMouseLeave: () => {
-                                setHoveredNode(null), handlers.onPointLeave();
-                            }
-                        }), showLabel && jsx("text", {
-                            x: node.x + node.width / 2,
-                            y: node.y + node.height / 2,
-                            textAnchor: "middle",
-                            dominantBaseline: "middle",
-                            className: "c-chart__treemap-label",
-                            style: {
-                                fontSize: labelConfig.fontSize,
-                                fill: labelConfig.textColor
-                            },
-                            children: node.label
-                        }) ]
-                    }, node.id);
-                }))
-            });
-        },
+        renderContent: renderContent,
         onDataPointClick: onDataPointClick,
         interactive: !0,
         ...props
@@ -9492,7 +9691,7 @@ const DOTS = "...", range = (start, end) => {
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -9563,7 +9762,7 @@ const Checkbox =  React.memo( forwardRef((({label: label, checked: checked, onCh
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .3,
-            cornerRadius: 6,
+            borderRadius: 6,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -11236,7 +11435,7 @@ const Input =  memo( forwardRef((({type: type = "text", value: value, defaultVal
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: .2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -11276,7 +11475,7 @@ function useHero(initialProps) {
  * @returns Slider state and methods
  */
     function(config) {
-        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), autoplayRef = useRef(null), isPausedRef = useRef(!1), slideRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), videoRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), handleSlideTransition = useCallback((nextIndex => {
+        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), autoplayRef = useRef(null), isPausedRef = useRef(!1), callbackRef = useRef(), slideRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), videoRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), handleSlideTransition = useCallback((nextIndex => {
             if (nextIndex === currentIndex || isTransitioning) return;
             if (nextIndex < 0 || nextIndex >= slides.length) return;
             setIsTransitioning(!0), 
@@ -11297,7 +11496,17 @@ function useHero(initialProps) {
             let nextIndex;
             nextIndex = loop ? (currentIndex + 1) % slides.length : Math.min(currentIndex + 1, slides.length - 1), 
             handleSlideTransition(nextIndex);
-        }), [ currentIndex, slides.length, loop, handleSlideTransition ]), pauseAutoplay = useCallback((() => {
+        }), [ currentIndex, slides.length, loop, handleSlideTransition ]);
+        // Update callbackRef whenever nextSlide or isTransitioning changes
+        useEffect((() => {
+            callbackRef.current = () => {
+                isPausedRef.current || isTransitioning || nextSlide();
+            };
+        }), [ nextSlide, isTransitioning ]);
+        /**
+   * Pause autoplay
+   */
+        const pauseAutoplay = useCallback((() => {
             isPausedRef.current = !0, autoplayRef.current && (clearInterval(autoplayRef.current), 
             autoplayRef.current = null);
         }), []), resumeAutoplay = useCallback((() => {
@@ -11306,24 +11515,26 @@ function useHero(initialProps) {
                 const delay = "object" == typeof autoplay ? autoplay.delay : 3e3;
                 // Restart autoplay
                                 autoplayRef.current || (autoplayRef.current = setInterval((() => {
-                    isPausedRef.current || isTransitioning || nextSlide();
+                    callbackRef.current && callbackRef.current();
                 }), delay));
             }
-        }), [ autoplay, slides.length, nextSlide, isTransitioning ]);
+        }), [ autoplay, slides.length ]);
+        /**
+   * Resume autoplay
+   */        
         // Autoplay effect
         return useEffect((() => {
             if (!autoplay || slides.length <= 1) return;
             const delay = "object" == typeof autoplay ? autoplay.delay : 3e3;
-            return "object" == typeof autoplay && autoplay.pauseOnHover, 
             // Clear any existing interval
-            autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null), 
+                        return autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null), 
             // Start autoplay if not paused
             isPausedRef.current || (autoplayRef.current = setInterval((() => {
-                isPausedRef.current || isTransitioning || nextSlide();
+                callbackRef.current && callbackRef.current();
             }), delay)), () => {
                 autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null);
             };
-        }), [ autoplay, slides.length, nextSlide, isTransitioning ]), 
+        }), [ autoplay, slides.length ]), 
         // Initialize first video if needed
         useEffect((() => {
             if (slides.length > 0 && "video" === slides[currentIndex]?.type) {
@@ -12324,7 +12535,14 @@ function useTodo(initialProps) {
 }
 
 function useSlider(options) {
-    const {slides: slides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, containerRef = useRef(null), wrapperRef = useRef(null), repositioningRef = useRef(!1), autoplayRef = useRef(null), [autoplayRunning, setAutoplayRunning] = useState(!1), [realIndex, setRealIndex] = useState(initialSlide), [internalIndex, setInternalIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), [containerSize, setContainerSize] = useState(0), [touching, setTouching] = useState(!1), [touchStart, setTouchStart] = useState(0), [dragOffset, setDragOffset] = useState(0), slideWidth = useMemo((() => 0 === containerSize ? 0 : (containerSize - spaceBetween * (slidesToShow - 1)) / slidesToShow), [ containerSize, spaceBetween, slidesToShow ]), allSlides = useMemo((() => loop && 0 !== slides.length ? [ ...slides.map(((slide, i) => ({
+    const {slides: slides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, containerRef = useRef(null), wrapperRef = useRef(null), repositioningRef = useRef(!1), autoplayRef = useRef(null), [autoplayRunning, setAutoplayRunning] = useState(!1), sliderStateRef = useRef({
+        isTransitioning: !1,
+        loop: loop,
+        slides: slides,
+        slidesToShow: slidesToShow,
+        speed: speed,
+        onSlideChange: onSlideChange
+    }), [realIndex, setRealIndex] = useState(initialSlide), [internalIndex, setInternalIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), [containerSize, setContainerSize] = useState(0), [touching, setTouching] = useState(!1), [touchStart, setTouchStart] = useState(0), [dragOffset, setDragOffset] = useState(0), slideWidth = useMemo((() => 0 === containerSize ? 0 : (containerSize - spaceBetween * (slidesToShow - 1)) / slidesToShow), [ containerSize, spaceBetween, slidesToShow ]), allSlides = useMemo((() => loop && 0 !== slides.length ? [ ...slides.map(((slide, i) => ({
         ...slide,
         id: `set1-${slide.id || i}`
     }))), ...slides.map(((slide, i) => ({
@@ -12334,6 +12552,17 @@ function useSlider(options) {
         ...slide,
         id: `set3-${slide.id || i}`
     }))) ] : slides), [ slides, loop ]), loopedSlides = slides.length, translateValue = useMemo((() => 0 === slideWidth ? 0 : -internalIndex * slideWidth + dragOffset), [ slideWidth, internalIndex, dragOffset ]);
+    // Update the ref whenever the relevant state/props change
+    useEffect((() => {
+        sliderStateRef.current = {
+            isTransitioning: isTransitioning,
+            loop: loop,
+            slides: slides,
+            slidesToShow: slidesToShow,
+            speed: speed,
+            onSlideChange: onSlideChange
+        };
+    }), [ isTransitioning, loop, slides, slidesToShow, speed, onSlideChange ]), 
     // Autoplay effect
     useEffect((() => {
         if (!autoplay) return autoplayRef.current && (clearInterval(autoplayRef.current), 
@@ -12345,32 +12574,34 @@ function useSlider(options) {
         autoplayRef.current && clearInterval(autoplayRef.current), 
         // Create new interval
         autoplayRef.current = setInterval((() => {
+            // Use ref to get the latest state without resetting the interval
+            const {isTransitioning: currentIsTransitioning, loop: currentLoop, slides: currentSlides, slidesToShow: currentSlidesToShow, speed: currentSpeed, onSlideChange: currentOnSlideChange} = sliderStateRef.current;
             // We need to use a functional update to get the latest values
-            setRealIndex((prevRealIndex => {
-                if (isTransitioning) return prevRealIndex;
+                        setRealIndex((prevRealIndex => {
+                if (currentIsTransitioning) return prevRealIndex;
                 // Stop autoplay on interaction if disableOnInteraction is true
                                 let nextIndex;
                 // Trigger the slide change
                 if (disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
-                autoplayRef.current = null, setAutoplayRunning(!1)), nextIndex = loop ? (prevRealIndex + 1) % slides.length : Math.min(prevRealIndex + 1, slides.length - slidesToShow), 
+                autoplayRef.current = null, setAutoplayRunning(!1)), nextIndex = currentLoop ? (prevRealIndex + 1) % currentSlides.length : Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow), 
                 reverseDirection) {
                     // For reverse direction, we would go to previous slide
-                    const prevIndex = loop ? 0 === prevRealIndex ? slides.length - 1 : prevRealIndex - 1 : Math.max(prevRealIndex - 1, 0);
-                    return setInternalIndex(loop ? slides.length + prevIndex : prevIndex), setIsTransitioning(!0), 
-                    setDragOffset(0), setTimeout((() => {
-                        setIsTransitioning(!1), onSlideChange?.(prevIndex);
-                    }), speed), prevIndex;
+                    const prevIndex = currentLoop ? 0 === prevRealIndex ? currentSlides.length - 1 : prevRealIndex - 1 : Math.max(prevRealIndex - 1, 0);
+                    return setInternalIndex(currentLoop ? currentSlides.length + prevIndex : prevIndex), 
+                    setIsTransitioning(!0), setDragOffset(0), setTimeout((() => {
+                        setIsTransitioning(!1), currentOnSlideChange?.(prevIndex);
+                    }), currentSpeed), prevIndex;
                 }
                 // Normal direction
-                return setInternalIndex(loop ? slides.length + nextIndex : nextIndex), setIsTransitioning(!0), 
-                setDragOffset(0), setTimeout((() => {
-                    setIsTransitioning(!1), onSlideChange?.(nextIndex), 
+                return setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex), 
+                setIsTransitioning(!0), setDragOffset(0), setTimeout((() => {
+                    setIsTransitioning(!1), currentOnSlideChange?.(nextIndex), 
                     // Reposition after transition ends for looped sliders
-                    loop && nextIndex >= 2 * slides.length && (repositioningRef.current = !0, setInternalIndex(slides.length + nextIndex), 
-                    setTimeout((() => {
+                    currentLoop && nextIndex >= 2 * currentSlides.length && (repositioningRef.current = !0, 
+                    setInternalIndex(currentSlides.length + nextIndex), setTimeout((() => {
                         repositioningRef.current = !1;
                     }), 0));
-                }), speed), nextIndex;
+                }), currentSpeed), nextIndex;
             }));
         }), delay), setAutoplayRunning(!0);
         // Handle pause on mouse enter/leave if enabled
@@ -12381,17 +12612,18 @@ function useSlider(options) {
         }, handleMouseLeave = () => {
             // Restart autoplay
             autoplayRef.current && clearInterval(autoplayRef.current), autoplayRef.current = setInterval((() => {
+                const {isTransitioning: currentIsTransitioning, loop: currentLoop, slides: currentSlides, slidesToShow: currentSlidesToShow, speed: currentSpeed, onSlideChange: currentOnSlideChange} = sliderStateRef.current;
                 setRealIndex((prevRealIndex => {
-                    if (isTransitioning) return prevRealIndex;
+                    if (currentIsTransitioning) return prevRealIndex;
                     let nextIndex;
-                    return nextIndex = loop ? (prevRealIndex + 1) % slides.length : Math.min(prevRealIndex + 1, slides.length - slidesToShow), 
-                    setInternalIndex(loop ? slides.length + nextIndex : nextIndex), setIsTransitioning(!0), 
+                    return nextIndex = currentLoop ? (prevRealIndex + 1) % currentSlides.length : Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow), 
+                    setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex), setIsTransitioning(!0), 
                     setDragOffset(0), setTimeout((() => {
-                        setIsTransitioning(!1), onSlideChange?.(nextIndex), loop && nextIndex >= 2 * slides.length && (repositioningRef.current = !0, 
-                        setInternalIndex(slides.length + nextIndex), setTimeout((() => {
+                        setIsTransitioning(!1), currentOnSlideChange?.(nextIndex), currentLoop && nextIndex >= 2 * currentSlides.length && (repositioningRef.current = !0, 
+                        setInternalIndex(currentSlides.length + nextIndex), setTimeout((() => {
                             repositioningRef.current = !1;
                         }), 0));
-                    }), speed), nextIndex;
+                    }), currentSpeed), nextIndex;
                 }));
             }), delay), setAutoplayRunning(!0);
         };
@@ -12403,7 +12635,7 @@ function useSlider(options) {
             containerElement && (containerElement.removeEventListener("mouseenter", handleMouseEnter), 
             containerElement.removeEventListener("mouseleave", handleMouseLeave)), setAutoplayRunning(!1);
         };
-    }), [ autoplay, slides.length, loop, slidesToShow, isTransitioning, speed, onSlideChange, repositioningRef ]), 
+    }), [ autoplay, repositioningRef ]), 
     // Initialize
     useEffect((() => {
         setInternalIndex(loop ? slides.length + initialSlide : initialSlide);
@@ -12863,7 +13095,7 @@ const Select =  memo((({options: options, value: value, onChange: onChange, onBl
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: .2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -12921,7 +13153,7 @@ const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange,
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .3,
-            cornerRadius: 6,
+            borderRadius: 6,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -12987,7 +13219,7 @@ const Textarea =  memo( forwardRef((({value: value, defaultValue: defaultValue,
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: 1,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -13828,7 +14060,7 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                 blurAmount: 3,
                 saturation: 180,
                 aberrationIntensity: 0,
-                cornerRadius: 8,
+                borderRadius: 8,
                 overLight: !1,
                 mode: "standard",
                 children: jsxs("div", {
@@ -14033,7 +14265,7 @@ Hero.Title = ({children: children, className: className, level: level = "h1", ..
             blurAmount: 3,
             saturation: 180,
             aberrationIntensity: 0,
-            cornerRadius: 8,
+            borderRadius: 8,
             overLight: !1,
             mode: "standard"
         } : glass;
@@ -14147,7 +14379,7 @@ const Messages = ({messages: messages = [], otherAvatar: otherAvatar, selfAvatar
         onSendMessage: onSendMessage
     }), messagesId = id || `messages-${Math.random().toString(36).substr(2, 9)}`, inputId = `${messagesId}-input`, defaultGlassProps = {
         displacementScale: 150,
-        cornerRadius: 12,
+        borderRadius: 12,
         elasticity: 0,
         aberrationIntensity: 2
     }, messagesClasses = `${MESSAGES.CLASSES.BASE} ${glass ? "c-messages--glass" : ""} ${disabled ? "is-disabled" : ""} ${className}`, messagesContent = jsxs(Fragment, {
@@ -14293,7 +14525,7 @@ const Messages = ({messages: messages = [], otherAvatar: otherAvatar, selfAvatar
                 children: jsx("div", {
                     className: "c-messages__glass-content",
                     style: {
-                        borderRadius: glassProps.cornerRadius
+                        borderRadius: glassProps.borderRadius
                     },
                     children: messagesContent
                 })
@@ -14521,7 +14753,7 @@ const Modal = ModalWithSubcomponents, Nav =  forwardRef((({children: children, a
         const defaultGlassProps = {
             displacementScale: 60,
             blurAmount: 1.5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -14727,7 +14959,7 @@ const Navbar =  forwardRef((({brand: brand, children: children, variant: variant
         const defaultGlassProps = {
             displacementScale: 30,
             blurAmount: 2,
-            cornerRadius: 0,
+            borderRadius: 0,
             elasticity: 0,
             mode: "shader",
             shaderVariant: "premiumGlass"
@@ -15108,7 +15340,7 @@ const SideMenu =  forwardRef((({title: title, children: children, menuItems: men
         const defaultGlassProps = {
             displacementScale: 70,
             blurAmount: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -16681,7 +16913,7 @@ const PopoverContext =  createContext({
                     blurAmount: 1,
                     saturation: 160,
                     aberrationIntensity: .5,
-                    cornerRadius: 8,
+                    borderRadius: 8,
                     mode: "shader"
                 }, glassProps = !0 === glass ? defaultGlassProps : {
                     ...defaultGlassProps,
@@ -16732,7 +16964,14 @@ const PopoverContext =  createContext({
 /**
  * Hook for managing rating component state and interactions
  */
-const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", variant: variant, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
+const calculateStarValue = (e, starValue, allowHalf) => {
+    if (!allowHalf) return starValue;
+    // Get the star element's bounding rectangle
+        const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2, adjustedValue = e.clientX < starCenterX ? starValue - .5 : starValue;
+    // Calculate the x position within the star
+        return Math.max(.5, adjustedValue);
+ // Ensure minimum of 0.5
+}, Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", variant: variant, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
     const internalRef = useRef(null), ratingInstance = useRef(null), {currentValue: currentValue, hoverValue: hoverValue, focusedIndex: focusedIndex, setHoverValue: setHoverValue, setFocused: setFocused, handleKeyDown: handleKeyDown} = (({value: value = 0, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, onChange: onChange}) => {
         // Determine if component is in controlled mode
         const isControlled = void 0 !== onChange, [internalValue, setInternalValue] = useState(value), [hoverValue, setHoverValue] = useState(null), [focusedIndex, setFocusedIndex] = useState(null), currentValue = isControlled ? value : internalValue, handleMouseEnter = useCallback((starValue => {
@@ -16794,30 +17033,14 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
         readOnly: readOnly,
         onChange: onChange
     }), forkedRef = useForkRef(internalRef, ref), handleMouseEnter = useCallback(((e, starValue) => {
-        if (!readOnly) if (allowHalf) {
-            // Get the star element's bounding rectangle
-            const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2, adjustedValue = e.clientX < starCenterX ? starValue - .5 : starValue;
-            // Calculate the x position within the star
-                        setHoverValue(Math.max(.5, adjustedValue));
-        } else setHoverValue(starValue);
+        readOnly || setHoverValue(calculateStarValue(e, starValue, !!allowHalf));
     }), [ readOnly, allowHalf, setHoverValue ]), handleMouseMove = useCallback(((e, starValue) => {
-        if (readOnly || !allowHalf) return;
-        // Get the star element's bounding rectangle
-                const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2, adjustedValue = e.clientX < starCenterX ? starValue - .5 : starValue;
-        // Calculate the x position within the star
-                setHoverValue(Math.max(.5, adjustedValue));
-    } // Ensure minimum of 0.5
-    ), [ readOnly, allowHalf, setHoverValue ]), handleMouseLeave = useCallback((() => {
+        !readOnly && allowHalf && setHoverValue(calculateStarValue(e, starValue, !!allowHalf));
+    }), [ readOnly, allowHalf, setHoverValue ]), handleMouseLeave = useCallback((() => {
         readOnly || setHoverValue(null);
     }), [ readOnly, setHoverValue ]), handleClick = useCallback(((e, starValue) => {
         if (readOnly) return;
-        let newValue = starValue;
-        if (allowHalf) {
-            // Get the star element's bounding rectangle
-            const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2;
-            // Calculate the x position within the star
-                        newValue = e.clientX < starCenterX ? starValue - .5 : starValue, newValue = Math.max(.5, newValue);
-        }
+        const newValue = calculateStarValue(e, starValue, !!allowHalf);
         onChange?.(newValue);
     }), [ readOnly, onChange, allowHalf ]);
     // Use vanilla JS implementation if specified
@@ -16922,7 +17145,7 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -16936,21 +17159,8 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
     return ratingContent;
 }));
 
-/**
- * Rating component for displaying and collecting star ratings
- *
- * @example
- * // Basic usage
- * <Rating value={3} onChange={handleRatingChange} />
- *
- * @example
- * // Read-only with custom variant
- * <Rating value={4.5} readOnly variant="warning" />
- *
- * @example
- * // With half-star support
- * <Rating value={3.5} allowHalf maxValue={5} />
- */ Rating.displayName = "Rating";
+// Helper function to calculate star value based on mouse position
+Rating.displayName = "Rating";
 
 /**
  * ProductReview component for collecting user ratings and feedback
@@ -17095,7 +17305,7 @@ const Progress =  memo( forwardRef((({value: value, variant: variant = "primary"
         const defaultGlassProps = {
             displacementScale: 30,
             blurAmount: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -17499,7 +17709,7 @@ const Steps = ({items: items, activeIndex: activeIndex = 0, vertical: vertical =
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -17657,7 +17867,7 @@ const Tabs =  memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTI
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -17900,7 +18110,7 @@ const Toggle = ({checked: controlledChecked, defaultChecked: defaultChecked = !1
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,