@shohojdhara/atomix 0.5.0 → 0.5.2

package/dist/heavy.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
-import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallback, useImperativeHandle, Children, isValidElement } from "react";
+import React, { memo, forwardRef, useId, useMemo, useState, useRef, useEffect, useCallback, useImperativeHandle, Children, isValidElement } from "react";
 
 import * as PhosphorIcons from "@phosphor-icons/react";
 
@@ -33,6 +33,7 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     FILTER_OVERLAY_CLASS: "c-atomix-glass__filter-overlay",
     FILTER_SHADOW_CLASS: "c-atomix-glass__filter-shadow",
     CONTENT_CLASS: "c-atomix-glass__content",
+    BORDER_BACKDROP_CLASS: "c-atomix-glass__border-backdrop",
     BORDER_1_CLASS: "c-atomix-glass__border-1",
     BORDER_2_CLASS: "c-atomix-glass__border-2",
     HOVER_1_CLASS: "c-atomix-glass__hover-1",
@@ -378,7 +379,7 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
       default:
         return console.warn("AtomixGlass: Invalid displacement mode"), displacementMap;
     }
-}, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsx("svg", {
+}, sharedShaderCache = new Map, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsx("svg", {
     style: {
         position: "absolute",
         width: "100%",
@@ -517,24 +518,17 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
 GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
-const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount));
-
-// Module-level counter for deterministic ID generation
-let idCounter = 0;
-
-// Module-level shared shader cache with LRU eviction
-const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
+const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
 }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, 
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, 
 // Phase 1: Animation System props
 shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", 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), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
+    // React 18 useId — stable, unique, and SSR-safe (no module-level counter)
+    const rawId = useId(), filterId = useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
@@ -557,9 +551,7 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
             // Create cache key from size and variant
             const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`, cachedUrl = (key => {
                 const entry = sharedShaderCache.get(key);
-                return entry ? (
-                // Update access timestamp for LRU
-                entry.timestamp = Date.now(), entry.url) : null;
+                return entry ? (entry.timestamp = Date.now(), entry.url) : null;
             })(cacheKey);
             // Check shared cache first
                         if (cachedUrl) return void setShaderMapUrl(cachedUrl);
@@ -570,29 +562,24 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
                 if (shaderUtilsRef.current) try {
                     const {ShaderDisplacementGenerator: ShaderDisplacementGenerator, fragmentShaders: fragmentShaders} = shaderUtilsRef.current;
                     shaderGeneratorRef.current?.destroy();
-                    const selectedShader = fragmentShaders[shaderVariant] || fragmentShaders.liquidGlass;
+                    const selectedShader = fragmentShaders[shaderVariant] ?? fragmentShaders.liquidGlass;
                     shaderGeneratorRef.current = new ShaderDisplacementGenerator({
                         width: glassSize.width,
                         height: glassSize.height,
                         fragment: selectedShader
                     }), shaderUpdateTimeoutRef.current = setTimeout((() => {
-                        const url = shaderGeneratorRef.current?.updateShader() || "";
+                        const url = shaderGeneratorRef.current?.updateShader() ?? "";
                         url && ((key, url) => {
-                            // Evict oldest entries if at capacity
                             if (sharedShaderCache.size >= 15) {
                                 const entries = Array.from(sharedShaderCache.entries());
-                                // Sort by timestamp (oldest first)
-                                                                entries.sort(((a, b) => a[1].timestamp - b[1].timestamp));
-                                // Remove oldest entry
-                                const oldestEntry = entries[0];
-                                oldestEntry && sharedShaderCache.delete(oldestEntry[0]);
+                                entries.sort(((a, b) => a[1].timestamp - b[1].timestamp));
+                                const oldest = entries[0];
+                                oldest && sharedShaderCache.delete(oldest[0]);
                             }
                             sharedShaderCache.set(key, {
                                 url: url,
                                 timestamp: Date.now()
-                            }), 
-                            // Development mode: log cache size
-                            "undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
+                            }), "undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
                         })(cacheKey, url), setShaderMapUrl(url);
                     }), 100);
                 } catch (error) {
@@ -661,7 +648,6 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
             console.warn("AtomixGlassContainer: Error getting element bounds", error), setRectCache(null);
         }
     }), [ ref, glassSize ]);
-    // Pre-calculate static multipliers outside useMemo
     const liquidBlur = useMemo((() => {
         const defaultBlur = {
             baseBlur: blurAmount,
@@ -730,7 +716,6 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
     }), [ borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects, overLightConfig ]);
     return jsx("div", {
         ref: el => {
-            // Apply force no-transition
             // Handle forwarded ref
             "function" == typeof ref ? ref(el) : ref && (ref.current = el);
         },
@@ -772,6 +757,7 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
     });
 }));
 
+// ─── Blur multiplier constants (module-level, never change at runtime) ────────
 AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance
@@ -972,8 +958,6 @@ class {
         backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
         // Container variables
                 const style = containerElement.style;
-        style.setProperty("--atomix-glass-container-width", isFixedOrSticky ? `${glassSize.width}` : "100%"), 
-        style.setProperty("--atomix-glass-container-height", isFixedOrSticky ? `${glassSize.height}` : "100%"), 
         style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
         style.setProperty("--atomix-glass-container-backdrop", backdropFilterString), 
         // Shadows
@@ -1434,47 +1418,55 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             return "undefined" == typeof process || process.env, finalConfig;
         }
         return "undefined" == typeof process || process.env, baseConfig;
-    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = useRef(null), handleGlobalMousePosition = useCallback((globalPos => {
-        if (externalGlobalMousePosition && externalMouseOffset) return;
-        if (effectiveWithoutEffects) return;
-        const container = mouseContainer?.current || glassRef.current;
-        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);
-        // Write raw target — the lerp loop will smoothly pursue it
-                targetMouseOffsetRef.current = {
-            x: (globalPos.x - center.x) / rect.width * 100,
-            y: (globalPos.y - center.y) / rect.height * 100
-        }, targetGlobalMousePositionRef.current = globalPos;
-    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), startLerpLoop = useCallback((() => {
+    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = useRef(null), stopLerpLoop = useCallback((() => {
+        lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
+        lerpRafRef.current = null);
+    }), []), startLerpLoop = useCallback((() => {
         if (lerpActiveRef.current) return;
         lerpActiveRef.current = !0;
         const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
             if (!lerpActiveRef.current) return;
-            // Add ref validity check to prevent memory leaks
-                        if (!glassRef.current || !wrapperRef?.current) return void (lerpActiveRef.current = !1);
+            if (!glassRef.current) return void (lerpActiveRef.current = !1);
             const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, dx = tgt.x - cur.x, dy = tgt.y - cur.y;
             // If we're close enough, snap and park
-            if (Math.abs(dx) < .05 && Math.abs(dy) < .05) internalMouseOffsetRef.current = {
+            if (Math.abs(dx) < .01 && Math.abs(dy) < .01) return internalMouseOffsetRef.current = {
                 ...tgt
             }, internalGlobalMousePositionRef.current = {
                 ...targetGlobalMousePositionRef.current
-            }; else {
-                internalMouseOffsetRef.current = {
-                    x: lerp$1(cur.x, tgt.x, LERP_T),
-                    y: lerp$1(cur.y, tgt.y, LERP_T)
-                };
-                const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
-                internalGlobalMousePositionRef.current = {
-                    x: lerp$1(curG.x, tgtG.x, LERP_T),
-                    y: lerp$1(curG.y, tgtG.y, LERP_T)
-                };
-            }
-            // Imperative style update with the smoothed values
-                        updateAtomixGlassStyles(wrapperRef.current, glassRef.current, {
+            }, 
+            // Final update and stop
+            updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+                mouseOffset: internalMouseOffsetRef.current,
+                globalMousePosition: internalGlobalMousePositionRef.current,
+                glassSize: glassSize,
+                isHovered: isHovered,
+                isActive: isActive,
+                isOverLight: overLightConfig.isOverLight,
+                baseOverLightConfig: overLightConfig,
+                effectiveBorderRadius: effectiveBorderRadius,
+                effectiveWithoutEffects: effectiveWithoutEffects,
+                effectiveReducedMotion: effectiveReducedMotion,
+                elasticity: elasticity,
+                directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
+                onClick: onClick,
+                withLiquidBlur: withLiquidBlur,
+                blurAmount: blurAmount,
+                saturation: saturation,
+                padding: padding,
+                isFixedOrSticky: isFixedOrSticky
+            }), void stopLerpLoop();
+            // Smooth step
+                        internalMouseOffsetRef.current = {
+                x: lerp$1(cur.x, tgt.x, LERP_T),
+                y: lerp$1(cur.y, tgt.y, LERP_T)
+            };
+            const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
+            internalGlobalMousePositionRef.current = {
+                x: lerp$1(curG.x, tgtG.x, LERP_T),
+                y: lerp$1(curG.y, tgtG.y, LERP_T)
+            }, 
+            // Imperative style update
+            updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
                 mouseOffset: internalMouseOffsetRef.current,
                 globalMousePosition: internalGlobalMousePositionRef.current,
                 glassSize: glassSize,
@@ -1497,10 +1489,24 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         };
  // 0.08 – lower = more viscous
                 lerpRafRef.current = requestAnimationFrame(tick);
-    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky ]), stopLerpLoop = useCallback((() => {
-        lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
-        lerpRafRef.current = null);
-    }), []);
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky, stopLerpLoop ]), 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);
+        // Write raw target — the lerp loop will smoothly pursue it
+                targetMouseOffsetRef.current = {
+            x: (globalPos.x - center.x) / rect.width * 100,
+            y: (globalPos.y - center.y) / rect.height * 100
+        }, targetGlobalMousePositionRef.current = globalPos, 
+        // Ensure the lerp loop is running to smoothly chase the new target
+        lerpActiveRef.current || startLerpLoop();
+    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects, startLerpLoop ]);
     /**
    * Validate and clamp a numeric config value
    */    
@@ -1509,7 +1515,7 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
         const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
-        // Start the lerp loop — it will smoothly chase the target
+        // Initial start
                 startLerpLoop();
         const container = mouseContainer?.current || glassRef.current;
         let resizeObserver = null;
@@ -1522,7 +1528,7 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             unsubscribe(), stopLerpLoop(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
             updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
         };
-    }), [ handleGlobalMousePosition, startLerpLoop, stopLerpLoop, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
+    }), [ externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects, handleGlobalMousePosition, startLerpLoop, stopLerpLoop, mouseContainer, glassRef ]), 
     // Also call updateStyles on other state changes (hover, active, etc)
     useEffect((() => {
         updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
@@ -1998,184 +2004,147 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
 /**
  * Get GPU memory info if available (Chrome DevTools only)
  */
+/** Map an FPS value to a semantic color token string. */
+const getQualityColor = quality => {
+    switch (quality) {
+      case "high":
+        return "var(--atomix-color-success, #4ade80)";
+
+      case "medium":
+        return "var(--atomix-color-warning, #fbbf24)";
+
+      case "low":
+        return "var(--atomix-color-danger, #ef4444)";
+
+      default:
+        return "#9ca3af";
+    }
+}, getFpsLabel = fps => fps >= 58 ? "Optimal" : fps >= 45 ? "Warning" : "Critical";
+
+/** Map a quality level string to a semantic color token string. */
+// Inject keyframes once
+if ("undefined" != typeof document) {
+    const styleId = "perf-dashboard-keyframes";
+    if (!document.getElementById(styleId)) {
+        const styleEl = document.createElement("style");
+        styleEl.id = styleId, styleEl.textContent = "\n@keyframes perf-dashboard-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n", 
+        document.head.appendChild(styleEl);
+    }
+}
+
 /**
- * PerformanceDashboard - Real-time performance monitoring overlay
+ * PerformanceDashboard - Real-time performance monitoring overlay.
  *
- * Displays:
- * - Current FPS with color coding
- * - Frame time statistics
- * - Quality level indicator
- * - GPU memory usage (if available)
- * - Auto-scaling status
- */
-const PerformanceDashboard = ({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
-    // Get color for FPS display
-    const getFpsColor = fps => fps >= 58 ? "#4ade80" : // Green - good
-    fps >= 45 ? "#fbbf24" : "#ef4444" // Red - critical
-    , dashboardStyle = useMemo((() => ({
-        position: "fixed",
-        top: "16px",
-        right: "16px",
-        padding: "12px 16px",
-        backgroundColor: "rgba(17, 24, 39, 0.95)",
-        borderRadius: "8px",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-        fontFamily: "monospace",
-        fontSize: "12px",
-        color: "#fff",
-        zIndex: 9999,
-        minWidth: "200px",
-        backdropFilter: "blur(8px)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
-        transition: "opacity 0.3s ease",
-        opacity: isVisible ? 1 : 0,
-        pointerEvents: isVisible ? "auto" : "none"
-    })), [ isVisible ]), headerStyle = useMemo((() => ({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: "8px",
-        paddingBottom: "8px",
-        borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
-    })), []), titleStyle = useMemo((() => ({
-        fontWeight: "bold",
-        fontSize: "13px",
-        color: "#fff"
-    })), []), closeButtonStyle = useMemo((() => ({
-        background: "transparent",
-        border: "none",
-        color: "#9ca3af",
-        cursor: "pointer",
-        fontSize: "16px",
-        padding: "0",
-        lineHeight: "1"
-    })), []), metricRowStyle = useMemo((() => ({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: "6px"
-    })), []), labelStyle = useMemo((() => ({
-        color: "#9ca3af",
-        marginRight: "12px"
-    })), []), valueStyle = useMemo((() => ({
-        fontWeight: "bold"
-    })), []);
-    // Get quality level badge color
-        return isVisible ? jsxs("div", {
-        style: dashboardStyle,
+ * Displays FPS, frame time, quality level, GPU memory, and auto-scaling status.
+ * Rendered only when `debugPerformance={true}` on the parent `AtomixGlass`.
+ */ const PerformanceDashboard =  memo((({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
+    if (!isVisible) return null;
+    const fpsColor = (fps = metrics.fps) >= 58 ? "var(--atomix-color-success, #4ade80)" : fps >= 45 ? "var(--atomix-color-warning, #fbbf24)" : "var(--atomix-color-danger, #ef4444)";
+    var fps;
+    const isCritical = metrics.fps < 45;
+    return jsxs("div", {
+        className: "c-perf-dashboard u-position-fixed u-top-4 u-end-4 u-p-3 u-px-4 u-text-xs u-font-mono u-text-white u-rounded-md u-border u-border-white-alpha-10 u-shadow-lg",
+        style: {
+            zIndex: 9999,
+            minWidth: "12.5rem",
+            // 200px
+            backgroundColor: "rgba(17, 24, 39, 0.95)",
+            backdropFilter: "blur(8px)",
+            transition: "opacity 0.3s ease"
+        },
         children: [ jsxs("div", {
-            style: headerStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-2 u-pb-2 u-border-b u-border-white-alpha-10",
             children: [ jsx("span", {
-                style: titleStyle,
+                className: "u-text-sm u-font-bold u-text-white",
                 children: "Performance Monitor"
             }), onClose && jsx("button", {
-                style: closeButtonStyle,
+                className: "u-bg-transparent u-border-none u-p-0 u-line-height-1 u-text-base u-text-gray-400 u-cursor-pointer hover:u-text-white",
                 onClick: onClose,
                 "aria-label": "Close performance dashboard",
+                style: {
+                    transition: "color 0.2s ease"
+                },
                 children: "×"
             }) ]
         }), jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "FPS"
             }), jsx("span", {
+                className: "u-font-bold",
                 style: {
-                    ...valueStyle,
-                    color: getFpsColor(metrics.fps)
+                    color: fpsColor
                 },
                 children: Math.round(metrics.fps)
             }) ]
         }), jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "Frame Time"
             }), jsxs("span", {
-                style: valueStyle,
+                className: "u-font-bold",
                 children: [ metrics.frameTime.toFixed(2), "ms" ]
             }) ]
         }), jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "Quality"
             }), jsx("span", {
+                className: "u-font-bold u-text-uppercase",
                 style: {
-                    ...valueStyle,
-                    color: (quality => {
-                        switch (quality) {
-                          case "high":
-                            return "#4ade80";
-
-                          case "medium":
-                            return "#fbbf24";
-
-                          case "low":
-                            return "#ef4444";
-
-                          default:
-                            return "#9ca3af";
-                        }
-                    })(metrics.qualityLevel),
-                    textTransform: "uppercase",
-                    fontSize: "11px"
+                    fontSize: "0.6875rem",
+                    // 11px
+                    color: getQualityColor(metrics.qualityLevel)
                 },
                 children: metrics.qualityLevel
             }) ]
         }), metrics.gpuMemory && jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "GPU Memory"
             }), jsxs("span", {
-                style: valueStyle,
+                className: "u-font-bold",
                 children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
             }) ]
         }), metrics.isAutoScaling && jsx("div", {
+            className: "u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10 u-text-center",
             style: {
-                marginTop: "8px",
-                paddingTop: "8px",
-                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
-                fontSize: "10px",
-                color: "#6b7280",
-                textAlign: "center"
+                fontSize: "0.625rem",
+                // 10px
+                color: "#6b7280"
             },
             children: "Auto-scaling active"
         }), jsxs("div", {
-            style: {
-                marginTop: "8px",
-                paddingTop: "8px",
-                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
-                display: "flex",
-                alignItems: "center",
-                gap: "6px"
-            },
+            className: "u-flex u-items-center u-gap-2 u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10",
             children: [ jsx("div", {
+                className: "u-rounded-full",
                 style: {
-                    width: "8px",
-                    height: "8px",
-                    borderRadius: "50%",
-                    backgroundColor: getFpsColor(metrics.fps),
-                    animation: metrics.fps < 45 ? "pulse 1s infinite" : "none"
+                    width: "0.5rem",
+                    height: "0.5rem",
+                    flexShrink: 0,
+                    backgroundColor: fpsColor,
+                    ...isCritical && {
+                        animation: "perf-dashboard-pulse 1s infinite"
+                    }
                 }
             }), jsx("span", {
+                className: "u-text-xs",
                 style: {
-                    fontSize: "10px",
-                    color: metrics.fps >= 58 ? "#4ade80" : metrics.fps >= 45 ? "#fbbf24" : "#ef4444"
+                    fontSize: "0.625rem",
+                    // 10px
+                    color: fpsColor
                 },
-                children: metrics.fps >= 58 ? "Optimal" : metrics.fps >= 45 ? "Warning" : "Critical"
+                children: getFpsLabel(metrics.fps)
             }) ]
         }) ]
-    }) : null;
-};
+    });
+}));
 
-// Add pulse animation for critical FPS
-if ("undefined" != typeof document) {
-    const styleSheet = document.createElement("style");
-    styleSheet.textContent = "\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n  ", 
-    document.head.appendChild(styleSheet);
-}
+PerformanceDashboard.displayName = "PerformanceDashboard";
 
 /**
  * Mobile optimization presets
@@ -2186,7 +2155,8 @@ if ("undefined" != typeof document) {
 /**
  * Performance preset - Maximum FPS, reduced quality
  * Best for low-end devices or when battery saving is priority
- */ const PERFORMANCE_PRESET = {
+ */
+const PERFORMANCE_PRESET = {
     distortionOctaves: 2,
     // Minimal FBM layers
     displacementScale: 50,
@@ -2295,95 +2265,21 @@ if ("undefined" != typeof document) {
             saturation: 70
         }
     }
-};
-
-/**
- * Balanced preset - Good quality with reasonable performance
- * Default preset for most mobile devices
- */
-/**
- * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
- *
- * Features:
- * - Hardware-accelerated glass effects with SVG filters
- * - Mouse-responsive liquid distortion
- * - Dynamic border-radius extraction from children CSS properties
- * - Automatic light/dark theme detection via overLight prop
- * - Accessibility and performance optimizations
- * - Multiple displacement modes (standard, polar, prominent, shader)
- * - Design token integration for consistent theming
- * - Focus ring support for keyboard navigation
- * - Responsive breakpoints for mobile optimization
- * - Enhanced ARIA attributes for screen readers
- * - Time-based animation system with FBM distortion
- * - Device preset optimization for performance/quality balance
- *
- * Design System Compliance:
- * - Uses design tokens for opacity, spacing, and colors
- * - Follows BEM methodology for class naming
- * - Implements focus-ring mixin for accessibility
- * - Supports reduced motion and high contrast preferences
- *
- * @example
- * // Basic usage with dynamic border-radius extraction
- * <AtomixGlass>
- *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
- * </AtomixGlass>
- *
- * @example
- * // Manual border-radius override
- * <AtomixGlass borderRadius={20}>
- *   <div>Content with 20px glass radius</div>
- * </AtomixGlass>
- *
- * @example
- * // Interactive glass with click handler
- * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
- *   <div>Clickable content</div>
- * </AtomixGlass>
- *
- * @example
- * // OverLight - Boolean mode (explicit control)
- * <AtomixGlass overLight={true}>
- *   <div>Content on light background</div>
- * </AtomixGlass>
- *
- * @example
- * // OverLight - Auto-detection mode
- * <AtomixGlass overLight="auto">
- *   <div>Content with auto-detected background</div>
- * </AtomixGlass>
- *
- * @example
- * // OverLight - Object config with custom settings
- * <AtomixGlass
- *   overLight={{
- *     threshold: 0.8,
- *     opacity: 0.6,
- *     contrast: 1.8,
- *     brightness: 1.0,
- *     saturationBoost: 1.5
- *   }}
- * >
- *   <div>Content with custom overLight config</div>
- * </AtomixGlass>
- *
- * @example
- * // Debug mode for overLight detection
- * <AtomixGlass overLight="auto" debugOverLight={true}>
- *   <div>Content with debug logging enabled</div>
- * </AtomixGlass>
- *
- * @example
- * // Performance-optimized for mobile devices
- * <AtomixGlass devicePreset="performance" disableResponsiveBreakpoints={false}>
- *   <div>Mobile-optimized glass effect</div>
- * </AtomixGlass>
- */
-function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, ...rest}) {
-    const glassRef = useRef(null), contentRef = useRef(null), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, applyTimeBasedDistortion: applyTimeBasedDistortion, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+}, AtomixGlassInner =  forwardRef((function({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, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, isFixedOrSticky: propsIsFixedOrSticky, ...rest}, ref) {
+    const glassRef = useRef(null), contentRef = useRef(null), internalWrapperRef = useRef(null), mergedRef = useMemo((() => 
+    // Helper to merge refs
+    function(...refs) {
+        return node => {
+            refs.forEach((ref => {
+                "function" == typeof ref ? ref(node) : null != ref && (ref.current = node);
+            }));
+        };
+    }
+    // Internal implementation with forwardRef
+    (ref, internalWrapperRef)), [ ref ]), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = propsIsFixedOrSticky || "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
+        wrapperRef: internalWrapperRef,
         borderRadius: borderRadius,
         globalMousePosition: externalGlobalMousePosition,
         mouseOffset: externalMouseOffset,
@@ -2412,7 +2308,6 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
         distortionGain: distortionGain,
         distortionQuality: distortionQuality
     });
-    // Re-calculate only when devicePreset changes
     // Responsive breakpoint system - automatically adjusts parameters based on viewport
     !
     /**
@@ -2602,11 +2497,10 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
         },
         breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
         enabled: !disableResponsiveBreakpoints && "undefined" != typeof window,
-        // Enable unless disabled
         debug: !1
     });
     // Performance monitoring - tracks FPS, frame time, memory usage
-    const {metrics: performanceMetrics, recommendedQuality: recommendedQuality, isUnderperforming: isUnderperforming, setQualityLevel: setQualityLevel, toggleMonitoring: toggleMonitoring} = 
+    const {metrics: performanceMetrics, toggleMonitoring: toggleMonitoring} = 
     /**
  * Performance Monitor Hook
  *
@@ -2770,17 +2664,17 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
             toggleMonitoring: toggleMonitoring
         };
     }({
-        enabled: !1,
-        // We'll toggle manually based on prop
+        enabled: debugPerformance,
+        // Enable when debugPerformance is true
         debug: !1,
         showOverlay: !1
     });
-    // Auto-start performance monitoring if enabled (only in development)
+    // Auto-start performance monitoring when debugPerformance is enabled
         React.useEffect((() => {
-        "development" === process.env.NODE_ENV && window?.enablePerformanceMonitoring && toggleMonitoring();
+        debugPerformance && toggleMonitoring();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        }), []);
-    // Only run once on mount
+        }), [ debugPerformance ]);
+    // Re-run when debugPerformance changes
     const isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = useMemo((() => {
         if (!isFixedOrSticky) return {};
         const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
@@ -2808,34 +2702,30 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
         if (isFixedOrSticky) {
             const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
             return {
-                ...visualStyle,
-                ...!effectiveWithoutEffects && {
-                    transform: transformStyle
-                }
+                ...visualStyle
             };
         }
         return {
-            ...restStyle,
-            ...!effectiveWithoutEffects && {
-                transform: transformStyle
-            }
+            ...restStyle
         };
-    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]);
+    }), [ isFixedOrSticky, restStyle ]);
     // Build className with state modifiers
     const componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
         position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
-        top: isFixedOrSticky ? 0 : restStyle.top || 0,
-        left: isFixedOrSticky ? 0 : restStyle.left || 0
-    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left ]), adjustedSize = useMemo((() => {
+        top: isFixedOrSticky ? restStyle.top ?? 0 : 0,
+        left: isFixedOrSticky ? restStyle.left ?? 0 : 0,
+        right: isFixedOrSticky ? restStyle.right ?? "auto" : "auto",
+        bottom: isFixedOrSticky ? restStyle.bottom ?? "auto" : "auto"
+    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left, restStyle.right, restStyle.bottom ]), adjustedSize = useMemo((() => {
         // Keep a reference to positionStyles to avoid unused-variable lint,
         // but sizing is driven by explicit width/height or measured size.
         positionStyles.position;
-        const resolveLength = (value, measured) => void 0 !== value ? "number" == typeof value ? `${value}px` : value : measured > 0 ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
+        const resolveLength = (value, measured) => void 0 !== value && isFixedOrSticky ? "number" == typeof value ? `${value}px` : value : measured > 0 && isFixedOrSticky ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
         return {
             width: resolveLength(effectiveWidth, glassSize.width),
             height: resolveLength(effectiveHeight, glassSize.height)
         };
-    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
+    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height, isFixedOrSticky ]), 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,
@@ -2865,33 +2755,32 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
             absMx: absMx,
             absMy: absMy
         };
-    }), [ mouseOffset.x, mouseOffset.y ]), opacityValues = useMemo((() => {
-        const overLightOpacity = overLightConfig.opacity;
-        return {
-            hover1: isHovered || isActive ? .5 : 0,
-            hover2: isActive ? .5 : 0,
-            hover3: isHovered ? .4 : isActive ? .8 : 0,
-            base: isOverLight ? overLightOpacity || .4 : 0,
-            over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
-        };
-    }), [ 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;
+    }), [ mouseOffset.x, mouseOffset.y ]), clampedOverLightOpacity = Math.max(0, Math.min(1, overLightConfig?.opacity ?? .4)), clampedBorderOpacity = Math.max(0, Math.min(1, overLightConfig?.borderOpacity ?? 1)), opacityValues = useMemo((() => ({
+        hover1: isHovered || isActive ? .5 : 0,
+        hover2: isActive ? .5 : 0,
+        hover3: isHovered ? .4 : isActive ? .8 : 0,
+        base: isOverLight ? clampedOverLightOpacity || .4 : 0,
+        over: isOverLight ? 1.1 * (clampedOverLightOpacity || .4) : 0
+    })), [ isHovered, isActive, isOverLight, clampedOverLightOpacity ]), 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;
         return {
             ...void 0 !== customZIndex && {
                 "--atomix-glass-base-z-index": customZIndex
             },
             "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
-            // Internal decorative layers are positioned relative to the root;
-            "--atomix-glass-position": rootLayoutStyle.position,
-            "--atomix-glass-top": `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
-            "--atomix-glass-left": `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
+            "--atomix-glass-container-position": `${isFixedOrSticky ? rootLayoutStyle.position : positionStyles.position}`,
+            "--atomix-glass-position": `${isFixedOrSticky ? rootLayoutStyle.position : positionStyles.position}`,
+            "--atomix-glass-top": `${isFixedOrSticky ? restStyle.top ?? 0 : 0}px`,
+            "--atomix-glass-left": `${isFixedOrSticky ? restStyle.left ?? 0 : 0}px`,
+            "--atomix-glass-right": isFixedOrSticky ? restStyle.right ?? "auto" : "auto",
+            "--atomix-glass-bottom": isFixedOrSticky ? restStyle.bottom ?? "auto" : "auto",
             "--atomix-glass-width": adjustedSize.width,
             "--atomix-glass-height": adjustedSize.height,
-            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
+            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.125rem)",
             "--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%)`,
-            "--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-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * clampedBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * clampedBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * clampedBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * clampedBorderOpacity}) ${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(${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,
@@ -2905,13 +2794,14 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
             "--atomix-glass-overlay-highlight-opacity": opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
             "--atomix-glass-overlay-highlight-bg": `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
         };
-    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex, rootLayoutStyle, isFixedOrSticky ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, clampedBorderOpacity, customZIndex, isFixedOrSticky, positionStyles.position, rootLayoutStyle.position, restStyle.top, restStyle.left, restStyle.right, restStyle.bottom ]), 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(" ")
     });
     // Calculate position and size styles for internal layers
     // When root is fixed/sticky, internal layers use absolute (relative to root)
         return jsxs("div", {
         ...rest,
+        ref: mergedRef,
         className: componentClassName,
         style: {
             ...glassVars
@@ -2921,17 +2811,14 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
-        "aria-pressed": !(!onClick || !isActive) || !onClick && void 0,
+        "aria-pressed": void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsx(AtomixGlassContainer, {
             ref: glassRef,
             contentRef: contentRef,
             className: className,
             style: {
-                ...restStyle,
-                ...!isFixedOrSticky && {
-                    position: "relative"
-                }
+                ...restStyle
             },
             borderRadius: effectiveBorderRadius,
             displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
@@ -2967,6 +2854,7 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
+            isFixedOrSticky: isFixedOrSticky,
             // Phase 1: Animation System props
             shaderTime: getShaderTime(),
             withTimeAnimation: withTimeAnimation,
@@ -2995,6 +2883,8 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
             }) ]
         }), withBorder && jsxs(Fragment, {
             children: [ jsx("span", {
+                className: ATOMIX_GLASS.BORDER_BACKDROP_CLASS
+            }), jsx("span", {
                 className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsx("span", {
                 className: ATOMIX_GLASS.BORDER_2_CLASS
@@ -3005,11 +2895,18 @@ function AtomixGlass({children: children, displacementScale: displacementScale =
             onClose: () => {}
         }) ]
     });
-}
+}));
 
-// Adapted from https://github.com/shuding/liquid-glass
-// Constants
-const smoothStep = (a, b, t) => {
+/**
+ * Balanced preset - Good quality with reasonable performance
+ * Default preset for most mobile devices
+ */ AtomixGlassInner.displayName = "AtomixGlass";
+
+/**
+ * AtomixGlass - wrapped with React.memo to prevent unnecessary re-renders.
+ * Ref is forwarded to the root `<div>` element.
+ */
+const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
     // Add input validation
     if ("number" != typeof a || "number" != typeof b || "number" != typeof t) return 0;
     const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
@@ -3304,6 +3201,8 @@ const smoothStep = (a, b, t) => {
     value: "Module"
 }));
 
+// Adapted from https://github.com/shuding/liquid-glass
+// Constants
 /**
  * Component Utilities
  *
@@ -3676,11 +3575,13 @@ const VideoPlayer =  forwardRef((({src: src, type: type = "video", youtubeId: yo
                 detectBorderRadius();
         // Create ResizeObserver to watch for style changes
         let resizeObserver = null;
-        return "undefined" != typeof ResizeObserver && containerRef.current && (resizeObserver = new ResizeObserver(detectBorderRadius), 
+        "undefined" != typeof ResizeObserver && containerRef.current && (resizeObserver = new ResizeObserver(detectBorderRadius), 
         resizeObserver.observe(containerRef.current)), 
         // Also listen for window resize (in case styles change)
-        window.addEventListener("resize", detectBorderRadius), () => {
-            window.removeEventListener("resize", detectBorderRadius), resizeObserver && containerRef.current && (resizeObserver.unobserve(containerRef.current), 
+        window.addEventListener("resize", detectBorderRadius);
+        const currentContainer = containerRef.current;
+        return () => {
+            window.removeEventListener("resize", detectBorderRadius), resizeObserver && currentContainer && (resizeObserver.unobserve(currentContainer), 
             resizeObserver.disconnect());
         };
     }), []);
@@ -4015,7 +3916,7 @@ VideoPlayer.displayName = "VideoPlayer";
  */
 const MasonryGrid =  forwardRef((({children: children, className: className = "", xs: xs = 1, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, gap: gap = 16, animate: animate = !0, imagesLoaded: imagesLoaded = !0, onLayoutComplete: onLayoutComplete, onImageLoad: onImageLoad, ...props}, ref) => {
     // === REFS & STATE ===
-    const [columns, setColumns] = useState(xs), [positions, setPositions] = useState([]), [layoutComplete, setLayoutComplete] = useState(!1), [loadingImages, setLoadingImages] = useState(!1), containerRef = useRef(null), columnHeights = useRef([]), imagesLoadedCount = useRef(0), totalImagesCount = useRef(0), imageElements = useRef(new Map);
+    const [columns, setColumns] = useState(xs), [positions, setPositions] = useState([]), [, setLayoutComplete] = useState(!1), [loadingImages, setLoadingImages] = useState(!1), containerRef = useRef(null), columnHeights = useRef([]), imagesLoadedCount = useRef(0), totalImagesCount = useRef(0), imageElements = useRef(new Map);
     useEffect((() => {
         setLoadingImages(!!imagesLoaded);
     }), [ columns, imagesLoaded ]), 
@@ -4044,34 +3945,45 @@ const MasonryGrid =  forwardRef((({children: children, className: className = ""
             });
         })), setItems(newItems);
     }), [ children ]);
-    // === TRACK & MANAGE IMAGES ===
-    const handleImageLoad = useCallback((img => {
-        if (!imageElements.current.get(img)) {
-            // Add loaded class for animation
-            if (imageElements.current.set(img, !0), imagesLoadedCount.current += 1, containerRef.current && imagesLoaded) {
-                const itemElement = img.closest(".o-masonry-grid > div");
-                itemElement && (itemElement.offsetHeight, itemElement.classList.add("o-masonry-grid__item-loaded"), 
-                itemElement.classList.remove("o-masonry-grid__item-loading"));
+    // === MANAGE ITEM LAYOUT ===
+    const calculateLayout = useCallback((() => {
+        if (!containerRef.current || 0 === items.length) return;
+        const colWidth = (containerRef.current.offsetWidth - gap * (columns - 1)) / columns;
+        columnHeights.current = Array(columns).fill(0);
+        const newPositions = [];
+        items.forEach(((item, index) => {
+            if (item.ref.current) {
+                // Find the shortest column
+                const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current)), left = shortestCol * (colWidth + gap), top = columnHeights.current[shortestCol] ?? 0, height = item.ref.current.offsetHeight;
+                columnHeights.current[shortestCol] = top + height + gap, newPositions[index] = {
+                    left: left,
+                    top: top,
+                    width: colWidth,
+                    height: height
+                };
             }
-            // Ensure layout is recalculated after DOM paints the item image (prevents overlap on slow/late image loads)
-                        requestAnimationFrame((() => {
-                requestAnimationFrame((() => {
-                    calculateLayout();
-                }));
-            })), onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current), 
-            // If all images have loaded, update loading state and complete layout
-            imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0 && (setLayoutComplete(!0), 
-            setLoadingImages(!1), // This ensures the loading class is removed *immediately* after images load
-            // Force a double requestAnimationFrame for final layout calculation after all images are loaded (guarantees DOM paint)
-            requestAnimationFrame((() => {
-                requestAnimationFrame((() => {
-                    calculateLayout(), 
-                    // As a failsafe, if still present for some render lag, force another setLoadingImages(false)
-                    setLoadingImages(!1);
-                }));
-            })), onLayoutComplete?.());
+        })), setPositions(newPositions);
+    }), [ items, columns, gap ]), handleImageLoad = useCallback((img => {
+        if (imageElements.current.get(img)) return;
+        // Add loaded class for animation
+        if (imageElements.current.set(img, !0), imagesLoadedCount.current += 1, containerRef.current && imagesLoaded) {
+            const itemElement = img.closest(".o-masonry-grid > div");
+            itemElement && (itemElement.offsetHeight, itemElement.classList.add("o-masonry-grid__item-loaded"), 
+            itemElement.classList.remove("o-masonry-grid__item-loading"));
         }
-    }), [ onImageLoad, onLayoutComplete, imagesLoaded ]), trackImages = useCallback((() => {
+        // Schedule layout recalculation after next paint to prevent overlap
+                const scheduleLayoutUpdate = () => {
+            const frameId = requestAnimationFrame((() => {
+                onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current), calculateLayout();
+            }));
+            return () => cancelAnimationFrame(frameId);
+        }, cleanup = scheduleLayoutUpdate();
+        // Clean up previous scheduled updates
+                // If all images have loaded, update loading state and complete layout
+        imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0 && (setLayoutComplete(!0), 
+        setLoadingImages(!1), setTimeout((() => cleanup()), 0), // Clean up after current execution
+        scheduleLayoutUpdate(), onLayoutComplete?.());
+    }), [ onImageLoad, onLayoutComplete, imagesLoaded, calculateLayout ]), trackImages = useCallback((() => {
         if (!imagesLoaded || !containerRef.current) return;
         imageElements.current.clear(), imagesLoadedCount.current = 0;
         const images = containerRef.current.querySelectorAll("img");
@@ -4090,30 +4002,21 @@ const MasonryGrid =  forwardRef((({children: children, className: className = ""
                 img.removeEventListener("error", masonryImg._masonryLoadHandler), delete masonryImg._masonryLoadHandler);
             }));
         });
-    }), [ imagesLoaded, handleImageLoad, onLayoutComplete ]), calculateLayout = useCallback((() => {
-        if (!containerRef.current || 0 === items.length) return;
-        const colWidth = (containerRef.current.offsetWidth - gap * (columns - 1)) / columns;
-        columnHeights.current = Array(columns).fill(0);
-        const newPositions = [];
-        items.forEach(((item, index) => {
-            if (item.ref.current) {
-                // Find the shortest column
-                const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current)), left = shortestCol * (colWidth + gap), top = columnHeights.current[shortestCol] ?? 0, height = item.ref.current.offsetHeight;
-                columnHeights.current[shortestCol] = top + height + gap, newPositions[index] = {
-                    left: left,
-                    top: top,
-                    width: colWidth,
-                    height: height
-                };
-            }
-        })), setPositions(newPositions);
-    }), [ items, columns, gap ]);
-    // === OBSERVE CONTAINER RESIZE ===
+    }), [ imagesLoaded, handleImageLoad, onLayoutComplete ]);
+    // === TRACK & MANAGE IMAGES ===
+        // === OBSERVE CONTAINER RESIZE ===
     useEffect((() => {
         if (!containerRef.current) return;
-        let animationFrame = null;
-        const observer = new ResizeObserver((() => {
-            animationFrame && cancelAnimationFrame(animationFrame), animationFrame = requestAnimationFrame((() => calculateLayout()));
+        let animationFrame = null, lastWidth = 0;
+        const observer = new ResizeObserver((entries => {
+            const entry = entries[0];
+            if (!entry) return;
+            const currentWidth = entry.contentRect.width;
+            // Only recalculate if width actually changed (prevents excessive calculations)
+                        Math.abs(currentWidth - lastWidth) > 1 && (animationFrame && cancelAnimationFrame(animationFrame), 
+            animationFrame = requestAnimationFrame((() => {
+                calculateLayout(), lastWidth = currentWidth;
+            })));
         }));
         return observer.observe(containerRef.current), () => {
             observer.disconnect(), animationFrame && cancelAnimationFrame(animationFrame);
@@ -4124,24 +4027,21 @@ const MasonryGrid =  forwardRef((({children: children, className: className = ""
     setLayoutComplete(!0), void setLoadingImages(!1))
     // Only reset layoutComplete when items or columns change
     ), [ items, columns, calculateLayout, imagesLoaded, trackImages ]), 
-    // === NEW: Add ResizeObservers to all grid items for bulletproof image+content measurement ===
+    // === ADD RESIZEOBSERVERS TO GRID ITEMS FOR DYNAMIC CONTENT MEASUREMENT ===
     React.useEffect((() => {
-        // Clean up old observers if items ever change
         const observers = [];
+        let animationFrame = null;
+        // Debounced layout calculation for item resize events
+                const debouncedCalculateLayout = () => {
+            animationFrame && cancelAnimationFrame(animationFrame), animationFrame = requestAnimationFrame(calculateLayout);
+        };
         return items.forEach((item => {
             if (item.ref.current) {
-                const obs = new ResizeObserver((() => {
-                    // Double rAF: ensures layout only runs after DOM/paint/async renders
-                    requestAnimationFrame((() => {
-                        requestAnimationFrame((() => {
-                            calculateLayout();
-                        }));
-                    }));
-                }));
+                const obs = new ResizeObserver(debouncedCalculateLayout);
                 obs.observe(item.ref.current), observers.push(obs);
             }
         })), () => {
-            observers.forEach((obs => obs.disconnect()));
+            observers.forEach((obs => obs.disconnect())), animationFrame && cancelAnimationFrame(animationFrame);
         };
     }), [ items, calculateLayout ]);
     // Ensure loadingImages state resets when items/columns/imagesLoaded change
@@ -4452,9 +4352,48 @@ class ThemeNaming {
     }
 }
 
+/**
+ * Render a slot with the given props
+ *
+ * Priority order:
+ * 1. render function
+ * 2. component
+ * 3. children
+ * 4. fallback
+ *
+ * @example
+ * renderSlot(
+ *   { render: (props) => <CustomButton {...props} /> },
+ *   { onClick: handleClick, children: 'Click me' }
+ * )
+ */
+function renderSlot(slot, props, fallback) {
+    // No slot provided, use fallback
+    if (!slot) return fallback;
+    // Slot is a plain React node
+        if ( React.isValidElement(slot) || "string" == typeof slot || "number" == typeof slot) return slot;
+    // Slot is an object with rendering options
+        if ("object" == typeof slot && null !== slot) {
+        const slotObj = slot;
+        // Priority 1: render function
+                if (slotObj.render && "function" == typeof slotObj.render) return slotObj.render(props);
+        // Priority 2: component
+                if (slotObj.component) {
+            const Component = slotObj.component;
+            return jsx(Component, {
+                ...props
+            });
+        }
+        // Priority 3: children
+                if (void 0 !== slotObj.children) return slotObj.children;
+    }
+    // Fallback
+        return fallback;
+}
+
 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, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": 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, slots: slots, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -4470,17 +4409,28 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         children: [ loading && jsx("span", {
             className: ThemeNaming.bemClass("btn", "spinner"),
             "aria-hidden": "true",
-            children: jsx(Spinner, {
+            children: renderSlot(slots?.spinner, {
+                className: ThemeNaming.bemClass("btn", "spinner"),
                 size: spinnerSize,
                 variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
-            })
+            }, jsx(Spinner, {
+                size: spinnerSize,
+                variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
+            }))
         }), iconElement && !loading && jsx("span", {
             className: ThemeNaming.bemClass("btn", "icon"),
             "aria-hidden": "true",
-            children: iconElement
+            children: renderSlot(slots?.icon, {
+                className: ThemeNaming.bemClass("btn", "icon"),
+                children: iconElement,
+                size: iconSize
+            }, iconElement)
         }), !iconOnly && buttonText && jsx("span", {
             className: ThemeNaming.bemClass("btn", "label"),
-            children: buttonText
+            children: renderSlot(slots?.label, {
+                className: ThemeNaming.bemClass("btn", "label"),
+                children: buttonText
+            }, buttonText)
         }) ]
     }), buttonProps = {
         className: buttonClass,
@@ -4497,48 +4447,59 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
         style: style,
         ...props
-    };
-    // 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 = {
+    }, buttonChildren = renderSlot(slots?.root, {
+        className: buttonClass,
+        children: buttonContent,
+        disabled: isDisabled,
+        loading: loading,
+        onClick: handleClickEvent,
+        type: type,
+        "aria-label": safeAriaLabel,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading
+    }, (() => {
+        // 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: isDisabled ? void 0 : href,
+                    to: isDisabled ? void 0 : href,
+                    target: target,
+                    rel: "_blank" === target ? "noopener noreferrer" : void 0
+                };
+                return jsx(LinkComp, {
+                    ...linkProps,
+                    children: buttonContent
+                });
+            }
+            // Fallback to regular anchor tag
+            return jsx("a", {
+                ...buttonProps,
+                ref: ref,
+                href: isDisabled ? void 0 : href,
+                target: target,
+                rel: "_blank" === target ? "noopener noreferrer" : void 0,
+                children: buttonContent
+            });
+        }
+        // Default button rendering
+        return jsx(Component, {
             ...buttonProps,
             ref: ref,
-            // linkComponent usually forwards ref to anchor
-            href: isDisabled ? void 0 : href,
-            to: isDisabled ? void 0 : href,
-            target: target,
-            rel: "_blank" === target ? "noopener noreferrer" : void 0
-        };
-        content = jsx(LinkComp, {
-            ...linkProps,
+            type: "button" === Component ? type : void 0,
+            disabled: isDisabled,
             children: buttonContent
         });
-    } else 
-    // Fallback to regular anchor tag
-    content = jsx("a", {
-        ...buttonProps,
-        ref: ref,
-        href: isDisabled ? void 0 : href,
-        target: target,
-        rel: "_blank" === target ? "noopener noreferrer" : void 0,
-        children: buttonContent
-    }); else 
-    // Default button rendering
-    content = jsx(Component, {
-        ...buttonProps,
-        ref: ref,
-        type: "button" === Component ? type : void 0,
-        disabled: isDisabled,
-        children: buttonContent
-    });
-    if (glass) {
+    })());
+    // 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.
+        if (glass) {
         // Default glass props
         const defaultGlassProps = {
             displacementScale: 20,
@@ -4551,10 +4512,10 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         };
         return jsx(AtomixGlass, {
             ...glassProps,
-            children: content
+            children: buttonChildren
         });
     }
-    return content;
+    return buttonChildren;
 })));
 
 Button.displayName = "Button";
@@ -5093,7 +5054,7 @@ useEffect((() => {
                     }
                 };
             }));
-        }), [ isMounted, currentIndex, calculateBounds, constrainPosition ]), setImagePosition = useCallback((position => {
+        }), [ currentIndex, calculateBounds, constrainPosition ]), setImagePosition = useCallback((position => {
             setImageStates((prev => {
                 const currentState = prev[currentIndex] || {
                     zoomLevel: 1,
@@ -5143,7 +5104,7 @@ useEffect((() => {
                     }
                 };
             }));
-        }), [ isMounted, currentIndex, calculateBounds, constrainPosition ]), handleWheel = useCallback((event => {
+        }), [ currentIndex, calculateBounds, constrainPosition ]), handleWheel = useCallback((event => {
             var _context;
             if (!isMounted || !event || !event.currentTarget) return;
             // Additional safety check for the target element
@@ -5500,7 +5461,7 @@ useEffect((() => {
                 }
                 return prev;
             }));
-        }), [ isMounted, enableGestures, isDragging, startDragPosition, currentIndex, constrainPosition, calculateBounds ]), handleTouchEnd = useCallback((() => {
+        }), [ enableGestures, isDragging, startDragPosition, currentIndex, constrainPosition, calculateBounds ]), handleTouchEnd = useCallback((() => {
             setIsDragging(!1), lastDistanceRef.current = null, lastMidpointRef.current = null;
         }), []), currentState = imageStates[currentIndex] || {
             zoomLevel: 1,