@shohojdhara/atomix 0.3.13 → 0.3.15

package/dist/heavy.js

@@ -80,10 +80,16 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
+        // Note: This default must match the SCSS variable --atomix-radius-md
+        // @see src/styles/01-settings/_settings.global.scss
         DEFAULT_CORNER_RADIUS: 16,
-        // Fallback value matching design system
         MAX_SIZE: 4096,
         // Maximum width/height for glass size
+        // Palette for internal calculations (matches design system base colors)
+        PALETTE: {
+            WHITE: "255, 255, 255",
+            BLACK: "0, 0, 0"
+        },
         // Gradient calculation constants
         GRADIENT: {
             BASE_ANGLE: 135,
@@ -242,10 +248,10 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     y: 0
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
-    // More responsive calculation for overlight effects
+    // 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;
-    return Math.min(1.5, influence);
- // Cap influence for better control
+    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 => {
     if ("number" == typeof value) return Math.max(0, value);
     if ("string" != typeof value || !value.trim()) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
@@ -474,7 +480,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, globalMousePosition: globalMousePosition = {
     x: 0,
     y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, active: active = !1, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, 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 = {}, cornerRadius: cornerRadius = 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) => {
@@ -587,28 +593,29 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             flowBlur: 1.2 * blurAmount
         };
         // Enhanced validation for liquid blur
-                if (!enableLiquidBlur || !rectCache || !globalMousePosition || "number" != typeof globalMousePosition.x || "number" != typeof globalMousePosition.y || isNaN(globalMousePosition.x) || isNaN(globalMousePosition.y)) return defaultBlur;
+                if (!enableLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
         try {
-            // Cache center and distance calculations
-            const center = calculateElementCenter(rectCache), distance = calculateDistance(globalMousePosition, center), maxDistance = Math.sqrt(rectCache.width * rectCache.width + rectCache.height * rectCache.height) / 2, normalizedDistance = Math.min(distance / maxDistance, 1), mouseInfluence = calculateMouseInfluence(mouseOffset), baseBlur = blurAmount + mouseInfluence * blurAmount * .4, edgeBlur = baseBlur * (.8 + .6 * (1.5 * normalizedDistance + .3 * mouseInfluence)), centerBlur = baseBlur * (.3 + .4 * (.3 * (1 - normalizedDistance) + .2 * mouseInfluence)), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, flowDirection = Math.atan2(deltaY, deltaX), flowBlur = baseBlur * (.4 + .6 * (.5 * Math.sin(flowDirection + mouseInfluence * Math.PI) + .5)), stateMultiplier = (isHovered ? 1.2 : 1) * (isActive ? 1.4 : 1);
+            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 —
+            // they belong on opacity layers, not the blur filter itself.
             return {
-                baseBlur: clampBlur(baseBlur * stateMultiplier),
-                edgeBlur: clampBlur(edgeBlur * stateMultiplier),
-                centerBlur: clampBlur(centerBlur * stateMultiplier),
-                flowBlur: clampBlur(flowBlur * stateMultiplier)
+                baseBlur: clampBlur(baseBlur),
+                edgeBlur: clampBlur(edgeBlur),
+                centerBlur: clampBlur(centerBlur),
+                flowBlur: clampBlur(flowBlur)
             };
         } catch (error) {
             return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
             defaultBlur;
         }
-    }), [ enableLiquidBlur, blurAmount, globalMousePosition, mouseOffset, isHovered, isActive, rectCache, style, glassSize ]), backdropStyle = useMemo((() => {
+    }), [ enableLiquidBlur, 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 ? {
-                backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`
+                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(${validatedBaseBlur}px)`, `blur(${validatedEdgeBlur}px)`, `blur(${validatedCenterBlur}px)`, `blur(${validatedFlowBlur}px)` ].join(" ")} saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) 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})`
             };
             // Single-pass fallback: stronger radius to match perceived blur of multi-pass
                 } catch (error) {
@@ -627,7 +634,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-padding": padding || "0 0",
                 "--atomix-glass-container-radius": `${"number" != typeof cornerRadius || isNaN(cornerRadius) ? 0 : cornerRadius}px`,
                 "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
-                "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${.4 + .002 * mx})`, `inset 0 -1px 0 rgba(0, 0, 0, ${.2 + .001 * Math.abs(my)})`, `inset 0 0 20px rgba(0, 0, 0, ${.08 + .001 * Math.abs(mx + my)})`, `0 2px 12px rgba(0, 0, 0, ${.12 + .002 * Math.abs(my)})` ].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": 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,
                 // 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",
@@ -646,10 +653,18 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]);
+    }), [ 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"));
+    };
     return jsx("div", {
-        ref: ref,
-        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${active ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
+        ref: el => {
+            // Apply force no-transition
+            setForceNoTransition(el), 
+            // Handle forwarded ref
+            "function" == typeof ref ? ref(el) : ref && (ref.current = el);
+        },
+        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${isActive ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
         style: {
             ...style,
             ...containerVars
@@ -667,6 +682,11 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             onMouseUp: onMouseUp,
             children: [ jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
+                style: {
+                    zIndex: 1,
+                    position: "absolute",
+                    inset: 0
+                },
                 children: [ jsx(GlassFilter, {
                     blurAmount: blurAmount,
                     mode: mode,
@@ -675,6 +695,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
+                    ref: setForceNoTransition,
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
                         filter: `url(#${filterId})`,
@@ -696,9 +717,8 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 style: {
                     position: "relative",
                     textShadow: "var(--atomix-glass-container-text-shadow)",
-                    ...elasticity > 0 ? {
-                        zIndex: 100
-                    } : {}
+                    // Ensure content is always above the filter layer (zIndex 1)
+                    zIndex: elasticity > 0 ? 100 : 2
                 },
                 children: children
             }) ]
@@ -816,12 +836,12 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [internalMouseOffset, setInternalMouseOffset] = useState({
         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, debugCornerRadius ]), 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 ]);
+    }), [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 ]);
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
             try {
-                let extractedRadius = null, extractionSource = "default";
+                let extractedRadius = null;
                 if (contentRef.current) {
                     const firstChild = contentRef.current.firstElementChild;
                     if (firstChild) {
@@ -838,15 +858,14 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                                 return null;
                             }
                         })(firstChild);
-                        null !== domRadius && domRadius > 0 && (extractedRadius = domRadius, extractionSource = "DOM element");
+                        null !== domRadius && domRadius > 0 && (extractedRadius = domRadius);
                     }
                 }
                 if (null === extractedRadius) {
                     const childRadius = extractBorderRadiusFromChildren(children);
-                    childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius, 
-                    extractionSource = "React children");
+                    childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius);
                 }
-                null !== extractedRadius && extractedRadius > 0 ? setDynamicCornerRadius(extractedRadius) : "undefined" == typeof process || process.env;
+                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);
             }
@@ -975,7 +994,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         }
         if ("boolean" == typeof overLight && 
         // For boolean values, disable auto-detection
-        // Cache is automatically managed by WeakMap (no manual clearing needed)
         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);
@@ -1045,6 +1063,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [ 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)";
         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,
@@ -1058,7 +1077,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 ]), calculateFadeInFactor = useCallback((() => {
+    }), [ globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight ]), 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,
@@ -1143,20 +1162,21 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             isOverLight: isOverLight,
             threshold: .7,
             opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: Math.min(1.8, Math.max(1, 1.4 + .3 * mouseInfluence)),
-            brightness: Math.min(1.2, Math.max(.7, .85 + .15 * mouseInfluence)),
-            saturationBoost: Math.min(2, Math.max(1, 1.3 + .4 * mouseInfluence)),
-            shadowIntensity: Math.min(1.5, Math.max(.5, .9 + .5 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, .7 + .3 * mouseInfluence))
+            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))
         };
         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: validatedContrast + .3 * mouseInfluence,
-                brightness: validatedBrightness + .15 * mouseInfluence,
-                saturationBoost: validatedSaturationBoost + .4 * mouseInfluence
+                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;
@@ -1290,19 +1310,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         debugOverLight: debugOverLight,
         enablePerformanceMonitoring: enablePerformanceMonitoring,
         children: children
-    }), isOverLight = overLightConfig.isOverLight, shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
+    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
         ...style,
-        ...0 !== elasticity && !effectiveDisableEffects && {
+        ...!effectiveDisableEffects && {
             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 = {
+    }, 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((() => ({
         position: style.position || "absolute",
         top: style.top || 0,
         left: style.left || 0
-    }, adjustedSize = {
+    })), [ 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)
-    }, gradientValues = useMemo((() => {
+    })), [ style.position, style.width, style.height, 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,
@@ -1342,7 +1362,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
         };
     }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = useMemo((() => {
-        const whiteColor = "255, 255, 255", {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
+        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-transform": transformStyle || "none",
@@ -1353,20 +1373,20 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
             "--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]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[1]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[2]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[3]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--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%)`,
+            "--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%)`,
             "--atomix-glass-hover-1-opacity": opacityValues.hover1,
-            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${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}%)`,
+            "--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}%)`,
             "--atomix-glass-hover-2-opacity": opacityValues.hover2,
-            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${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}%)`,
+            "--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}%)`,
             "--atomix-glass-hover-3-opacity": opacityValues.hover3,
-            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${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}%)`,
+            "--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}%)`,
             "--atomix-glass-base-opacity": opacityValues.base,
-            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${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(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
             "--atomix-glass-overlay-opacity": opacityValues.over,
-            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
         };
-    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, 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,
@@ -1392,9 +1412,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             className: className,
             style: baseStyle,
             cornerRadius: effectiveCornerRadius,
-            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : overLightConfig.isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
+            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,
-            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : overLightConfig.isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
+            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,
             glassSize: glassSize,
             padding: padding,
@@ -1410,10 +1430,15 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             onMouseLeave: handleMouseLeave,
             onMouseDown: handleMouseDown,
             onMouseUp: handleMouseUp,
-            active: isActive,
             isHovered: isHovered,
             isActive: isActive,
-            overLight: overLightConfig.isOverLight,
+            overLight: isOverLight,
+            overLightConfig: {
+                contrast: overLightConfig.contrast,
+                brightness: overLightConfig.brightness,
+                shadowIntensity: overLightConfig.shadowIntensity,
+                borderOpacity: overLightConfig.borderOpacity
+            },
             onClick: onClick,
             mode: mode,
             transform: baseStyle.transform,
@@ -1661,7 +1686,11 @@ const smoothStep = (a, b, t) => {
         // Add input validation
         "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = calculateLength(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = calculateLength(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothStep(.92, -.12, distanceToEdge), edgeSoftness = smoothStep(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
         return createTexture(clampValue(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clampValue(finalY + .5, 0, 1));
-    }
+    },
+    // Aliases for compatibility
+    plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
+    waves: (uv, mousePosition) => fragmentShaders.liquidMetal(uv, mousePosition),
+    noise: (uv, mousePosition) => fragmentShaders.appleFluid(uv, mousePosition)
 }, shaderUtils =  Object.freeze( Object.defineProperty({
     __proto__: null,
     ShaderDisplacementGenerator: class {
@@ -3000,7 +3029,7 @@ MasonryGrid.displayName = "MasonryGrid",  forwardRef((({children: children, clas
     });
 })).displayName = "MasonryGridItem";
 
-const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, className: className = "", glass: glass, style: style}) => {
+const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, onRemove: onRemove, "aria-label": ariaLabel, className: className = "", glass: glass, style: style}) => {
     const {generateBadgeClass: generateBadgeClass} = 
     /**
  * Badge state and functionality
@@ -3038,6 +3067,7 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
     }), badgeElement = jsxs("span", {
         className: badgeClass,
         "aria-disabled": disabled,
+        "aria-label": ariaLabel,
         ref: ref,
         style: style,
         children: [ icon && jsx("span", {
@@ -3045,6 +3075,13 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
             children: icon
         }), jsx("span", {
             children: label
+        }), onRemove && jsx("button", {
+            type: "button",
+            className: "c-badge__close",
+            onClick: onRemove,
+            "aria-label": "Remove badge",
+            disabled: disabled,
+            children: "×"
         }) ]
     });
     if (glass) {
@@ -3068,7 +3105,7 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
 
 Badge.displayName = "Badge";
 
-const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass}) => {
+const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status"}) => {
     const {generateSpinnerClass: generateSpinnerClass} = 
     /**
  * Spinner state and functionality
@@ -3106,10 +3143,11 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
     }), spinnerContent = jsx("div", {
         className: spinnerClass,
         style: style,
-        role: "status",
+        role: role,
+        "aria-label": ariaLabel || "Loading",
         children: jsx("span", {
             className: "u-visually-hidden",
-            children: "Loading..."
+            children: ariaLabel || "Loading..."
         })
     });
     if (glass) {
@@ -3190,7 +3228,7 @@ class ThemeNaming {
    * Convert kebab-case to camelCase for JavaScript properties
    * @param str - String to convert
    */    static kebabToCamel(str) {
-        return str.replace(/-([a-z])/g, (g => g[1].toUpperCase()));
+        return str.replace(/-([a-z])/g, (g => g[1]?.toUpperCase() ?? ""));
     }
     /**
    * Create a CSS variable name
@@ -3251,13 +3289,11 @@ class ThemeNaming {
 
 ThemeNaming.prefix = "atomix";
 
-const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaExpanded: ariaExpanded, ariaControls: ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
-    }) : icon;
-    // Determine if we should render as a link
-        const buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass("btn", variant), "md" !== size ? ThemeNaming.sizeClass("btn", size) : "", iconOnly ? ThemeNaming.stateClass("btn", "icon") : "", rounded ? ThemeNaming.stateClass("btn", "rounded") : "", isDisabled ? ThemeNaming.stateClass("btn", "disabled") : "", glass ? ThemeNaming.stateClass("btn", "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
+    }) : icon, buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass("btn", variant), "md" !== size ? ThemeNaming.sizeClass("btn", size) : "", iconOnly ? ThemeNaming.stateClass("btn", "icon") : "", rounded ? ThemeNaming.stateClass("btn", "rounded") : "", isDisabled ? ThemeNaming.stateClass("btn", "disabled") : "", glass ? ThemeNaming.stateClass("btn", "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
         isDisabled ? event.preventDefault() : onClick?.(event);
     }), [ isDisabled, onClick ]), handleMouseEnter = useCallback((event => {
         isDisabled || onHover?.(event);
@@ -3265,7 +3301,7 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         isDisabled || onFocus?.(event);
     }), [ isDisabled, onFocus ]), handleBlurEvent = useCallback((event => {
         isDisabled || onBlur?.(event);
-    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", buttonContent = jsxs(Fragment, {
+    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", safeAriaLabel = ariaLabel || (iconOnly ? "string" == typeof label ? label : "string" == typeof children ? children : void 0 : void 0), buttonContent = jsxs(Fragment, {
         children: [ loading && jsx("span", {
             className: ThemeNaming.bemClass("btn", "spinner"),
             "aria-hidden": "true",
@@ -3282,80 +3318,77 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
             children: buttonText
         }) ]
     }), buttonProps = {
-        ref: ref,
         className: buttonClass,
-        type: "button" !== Component || shouldRenderAsLink ? void 0 : type,
         onClick: handleClickEvent,
         onMouseEnter: onHover ? handleMouseEnter : void 0,
         onFocus: onFocus ? handleFocusEvent : void 0,
         onBlur: onBlur ? handleBlurEvent : void 0,
-        disabled: isDisabled && "button" === Component && !shouldRenderAsLink,
         "aria-disabled": isDisabled,
         "aria-busy": loading,
-        "aria-label": ariaLabel || (iconOnly ? label || children : void 0),
+        "aria-label": safeAriaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-expanded": ariaExpanded,
         "aria-controls": ariaControls,
         tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
         style: style,
         ...props
-    }, defaultGlassProps = {
-        displacementScale: 20,
-        blurAmount: 0,
-        saturation: 200,
-        elasticity: 0
-    }, glassProps = !0 === glass ? defaultGlassProps : {
-        ...defaultGlassProps,
-        ...glass
     };
-    // Handle click with loading check
-        // Render as anchor if href is provided
-    if (shouldRenderAsLink) {
-        const {ref: _, ...buttonPropsWithoutRef} = buttonProps, anchorButtonProps = {
-            ...buttonPropsWithoutRef,
-            type: void 0,
-            disabled: void 0
-        };
-        // Use custom LinkComponent if provided (e.g., Next.js Link)
-        if (LinkComponent) {
-            const LinkComp = LinkComponent, linkProps = {
-                ...anchorButtonProps,
-                ref: ref,
-                href: href,
-                target: target,
-                rel: "_blank" === target ? "noopener noreferrer" : void 0
-            }, linkElement = jsx(LinkComp, {
-                ...linkProps,
-                children: buttonContent
-            });
-            return glass ? jsx(AtomixGlass, {
-                ...glassProps,
-                children: linkElement
-            }) : linkElement;
-        }
-        // Fallback to regular anchor tag
-                const anchorElement = jsx("a", {
-            ...anchorButtonProps,
+    // Determine if we should render as a link
+    // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
+    // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
+    // This is a safe fallback for disabled links.
+        let content;
+    // Render as anchor if href is provided
+        if (shouldRenderAsLink) 
+    // Use custom LinkComponent if provided (e.g., Next.js Link)
+    if (LinkComponent) {
+        const LinkComp = LinkComponent, linkProps = {
+            ...buttonProps,
             ref: ref,
+            // LinkComponent usually forwards ref to anchor
             href: href,
             target: target,
-            rel: "_blank" === target ? "noopener noreferrer" : void 0,
+            rel: "_blank" === target ? "noopener noreferrer" : void 0
+        };
+        content = jsx(LinkComp, {
+            ...linkProps,
             children: buttonContent
         });
-        return glass ? jsx(AtomixGlass, {
-            ...glassProps,
-            children: anchorElement
-        }) : anchorElement;
-    }
+    } else 
+    // Fallback to regular anchor tag
+    content = jsx("a", {
+        ...buttonProps,
+        ref: ref,
+        href: href,
+        target: target,
+        rel: "_blank" === target ? "noopener noreferrer" : void 0,
+        children: buttonContent
+    }); else 
     // Default button rendering
-        const buttonElement = jsx(Component, {
+    content = jsx(Component, {
         ...buttonProps,
+        ref: ref,
+        type: "button" === Component ? type : void 0,
+        disabled: isDisabled,
         children: buttonContent
     });
-    return glass ? jsx(AtomixGlass, {
-        ...glassProps,
-        children: buttonElement
-    }) : buttonElement;
+    if (glass) {
+        // Default glass props
+        const defaultGlassProps = {
+            displacementScale: 20,
+            blurAmount: 0,
+            saturation: 200,
+            elasticity: 0
+        }, glassProps = !0 === glass ? defaultGlassProps : {
+            ...defaultGlassProps,
+            ...glass
+        };
+        return jsx(AtomixGlass, {
+            ...glassProps,
+            children: content
+        });
+    }
+    return content;
 })));
 
 Button.displayName = "Button";