@shohojdhara/atomix 0.4.9 → 0.5.1

package/dist/index.js

@@ -1718,6 +1718,7 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
     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",
@@ -2120,7 +2121,7 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
       default:
         return console.warn("AtomixGlass: Invalid displacement mode"), displacementMap;
     }
-}, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsxRuntime.jsx("svg", {
+}, sharedShaderCache = new Map, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsxRuntime.jsx("svg", {
     style: {
         position: "absolute",
         width: "100%",
@@ -2261,24 +2262,17 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
  */ GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
-const GlassFilter =  React.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 =  React.forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
+const GlassFilter =  React.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 =  React.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 = React.useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null), shaderUpdateTimeoutRef = React.useRef(null), animationFrameRef = React.useRef(null);
+    // React 18 useId — stable, unique, and SSR-safe (no module-level counter)
+    const rawId = React.useId(), filterId = React.useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null), shaderUpdateTimeoutRef = React.useRef(null), animationFrameRef = React.useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     React.useEffect((() => {
         "shader" === mode ? 
@@ -2303,9 +2297,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);
@@ -2316,29 +2308,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) {
@@ -2407,7 +2394,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 = React.useMemo((() => {
         const defaultBlur = {
             baseBlur: blurAmount,
@@ -2476,7 +2462,6 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
     }), [ borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects, overLightConfig ]);
     return jsxRuntime.jsx("div", {
         ref: el => {
-            // Apply force no-transition
             // Handle forwarded ref
             "function" == typeof ref ? ref(el) : ref && (ref.current = el);
         },
@@ -2518,6 +2503,7 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
     });
 }));
 
+// ─── Blur multiplier constants (module-level, never change at runtime) ────────
 AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance
@@ -2718,8 +2704,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
@@ -3180,47 +3164,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 = React.useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = React.useRef(null), handleGlobalMousePosition = React.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 = React.useCallback((() => {
+    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = React.useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = React.useRef(null), stopLerpLoop = React.useCallback((() => {
+        lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
+        lerpRafRef.current = null);
+    }), []), startLerpLoop = React.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,
@@ -3243,10 +3235,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 = React.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 = React.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
    */    
@@ -3255,7 +3261,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;
@@ -3268,7 +3274,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)
     React.useEffect((() => {
         updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
@@ -3763,183 +3769,146 @@ function usePerformanceMonitor(config = {}) {
     }
 }
 
+/** 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 = React.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 = React.useMemo((() => ({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: "8px",
-        paddingBottom: "8px",
-        borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
-    })), []), titleStyle = React.useMemo((() => ({
-        fontWeight: "bold",
-        fontSize: "13px",
-        color: "#fff"
-    })), []), closeButtonStyle = React.useMemo((() => ({
-        background: "transparent",
-        border: "none",
-        color: "#9ca3af",
-        cursor: "pointer",
-        fontSize: "16px",
-        padding: "0",
-        lineHeight: "1"
-    })), []), metricRowStyle = React.useMemo((() => ({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: "6px"
-    })), []), labelStyle = React.useMemo((() => ({
-        color: "#9ca3af",
-        marginRight: "12px"
-    })), []), valueStyle = React.useMemo((() => ({
-        fontWeight: "bold"
-    })), []);
-    // Get quality level badge color
-        return isVisible ? jsxRuntime.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 =  React.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 jsxRuntime.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: [ jsxRuntime.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: [ jsxRuntime.jsx("span", {
-                style: titleStyle,
+                className: "u-text-sm u-font-bold u-text-white",
                 children: "Performance Monitor"
             }), onClose && jsxRuntime.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: "×"
             }) ]
         }), jsxRuntime.jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsxRuntime.jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "FPS"
             }), jsxRuntime.jsx("span", {
+                className: "u-font-bold",
                 style: {
-                    ...valueStyle,
-                    color: getFpsColor(metrics.fps)
+                    color: fpsColor
                 },
                 children: Math.round(metrics.fps)
             }) ]
         }), jsxRuntime.jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsxRuntime.jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "Frame Time"
             }), jsxRuntime.jsxs("span", {
-                style: valueStyle,
+                className: "u-font-bold",
                 children: [ metrics.frameTime.toFixed(2), "ms" ]
             }) ]
         }), jsxRuntime.jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsxRuntime.jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "Quality"
             }), jsxRuntime.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 && jsxRuntime.jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsxRuntime.jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "GPU Memory"
             }), jsxRuntime.jsxs("span", {
-                style: valueStyle,
+                className: "u-font-bold",
                 children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
             }) ]
         }), metrics.isAutoScaling && jsxRuntime.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"
         }), jsxRuntime.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: [ jsxRuntime.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"
+                    }
                 }
             }), jsxRuntime.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
@@ -3950,7 +3919,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,
@@ -4113,90 +4083,21 @@ function getDevicePreset(presetName) {
     getPixelRatio: () => "undefined" == typeof window ? 1 : window.devicePixelRatio || 1,
     /** Check if device has touch support */
     hasTouchSupport: () => "undefined" != typeof window && ("ontouchstart" in window || navigator.maxTouchPoints > 0)
-};
-
-/**
- * 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 = React.useRef(null), contentRef = React.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 =  React.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 = React.useRef(null), contentRef = React.useRef(null), internalWrapperRef = React.useRef(null), mergedRef = React.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,
@@ -4225,7 +4126,6 @@ function getDevicePreset(presetName) {
         distortionGain: distortionGain,
         distortionQuality: distortionQuality
     });
-    // Re-calculate only when devicePreset changes
     // Responsive breakpoint system - automatically adjusts parameters based on viewport
     useResponsiveGlass({
         baseParams: {
@@ -4240,22 +4140,21 @@ function getDevicePreset(presetName) {
         },
         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} = usePerformanceMonitor({
-        enabled: !1,
-        // We'll toggle manually based on prop
+    const {metrics: performanceMetrics, toggleMonitoring: toggleMonitoring} = usePerformanceMonitor({
+        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__default.default.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 = React.useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = React.useMemo((() => {
         if (!isFixedOrSticky) return {};
         const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
@@ -4283,34 +4182,30 @@ function getDevicePreset(presetName) {
         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 = React.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 = React.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 = React.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 = React.useMemo((() => {
+    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height, isFixedOrSticky ]), gradientValues = React.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,
@@ -4340,33 +4235,32 @@ function getDevicePreset(presetName) {
             absMx: absMx,
             absMy: absMy
         };
-    }), [ mouseOffset.x, mouseOffset.y ]), opacityValues = React.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 = React.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 = React.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 = React.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,
@@ -4380,13 +4274,14 @@ function getDevicePreset(presetName) {
             "--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 => jsxRuntime.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 => jsxRuntime.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 jsxRuntime.jsxs("div", {
         ...rest,
+        ref: mergedRef,
         className: componentClassName,
         style: {
             ...glassVars
@@ -4396,17 +4291,14 @@ function getDevicePreset(presetName) {
         "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: [ jsxRuntime.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,
@@ -4442,6 +4334,7 @@ function getDevicePreset(presetName) {
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
+            isFixedOrSticky: isFixedOrSticky,
             // Phase 1: Animation System props
             shaderTime: getShaderTime(),
             withTimeAnimation: withTimeAnimation,
@@ -4470,6 +4363,8 @@ function getDevicePreset(presetName) {
             }) ]
         }), withBorder && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("span", {
+                className: ATOMIX_GLASS.BORDER_BACKDROP_CLASS
+            }), jsxRuntime.jsx("span", {
                 className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsxRuntime.jsx("span", {
                 className: ATOMIX_GLASS.BORDER_2_CLASS
@@ -4480,10 +4375,15 @@ function getDevicePreset(presetName) {
             onClose: () => {}
         }) ]
     });
-}
+}));
 
-// Default icon
-const DefaultIcon = () => jsxRuntime.jsx("i", {
+AtomixGlassInner.displayName = "AtomixGlass";
+
+/**
+ * AtomixGlass - wrapped with React.memo to prevent unnecessary re-renders.
+ * Ref is forwarded to the root `<div>` element.
+ */
+const AtomixGlass =  React.memo(AtomixGlassInner), DefaultIcon = () => jsxRuntime.jsx("i", {
     className: "c-accordion__icon",
     "aria-hidden": "true",
     children: jsxRuntime.jsx("svg", {
@@ -4517,6 +4417,7 @@ const DefaultIcon = () => jsxRuntime.jsx("i", {
     });
 }));
 
+// Default icon
 AccordionHeader.displayName = "AccordionHeader";
 
 const AccordionBody =  React.forwardRef((({children: children, className: className = "", panelRef: panelRef, contentRef: contentRef, ...props}, ref) => {