@shohojdhara/atomix 0.6.4 → 0.6.5

package/dist/core.js

@@ -516,6 +516,62 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         SIZES: [ "xs", "sm", "md", "lg", "xl", "none" ],
         DEFAULT: "md"
     }
+}, GLASS_DEFAULTS_BUTTON = {
+    displacementScale: 16,
+    saturation: 180,
+    elasticity: 0
+}, GLASS_DEFAULTS_BADGE = {
+    displacementScale: 14,
+    borderRadius: 16,
+    elasticity: 0
+}, GLASS_DEFAULTS_ACCORDION = {
+    displacementScale: 18,
+    elasticity: 0
+}, GLASS_DEFAULTS_CALLOUT = {
+    displacementScale: 22,
+    borderRadius: 8,
+    elasticity: 0
+}, GLASS_DEFAULTS_SPINNER = {
+    displacementScale: 12,
+    elasticity: 0
+}, GLASS_BORDER_GRADIENT = {
+    BASE_ANGLE: 135,
+    ANGLE_MULTIPLIER: .5,
+    VELOCITY_ANGLE_MULTIPLIER: .5,
+    CHROMATIC_OFFSET: 1.5,
+    STOP_1: {
+        MIN: 10,
+        BASE: 33,
+        get MULTIPLIER() {
+            return .009 * this.BASE;
+        }
+    },
+    STOP_2: {
+        MAX: 90,
+        BASE: 66,
+        get MULTIPLIER() {
+            return .006 * this.BASE;
+        }
+    },
+    OPACITY: {
+        /** Matches $glass-border-1-opacity (0.08) */
+        BASE_1: .08,
+        get BASE_2() {
+            return 3.33 * this.BASE_1;
+        },
+        get BASE_3() {
+            return 2.66 * this.BASE_1;
+        },
+        get BASE_4() {
+            return 5 * this.BASE_1;
+        },
+        get MULTIPLIER_LOW() {
+            return .066 * this.BASE_1;
+        },
+        get MULTIPLIER_HIGH() {
+            return .1 * this.BASE_1;
+        }
+    }
 }, ATOMIX_GLASS = {
     BASE_CLASS: "c-atomix-glass",
     CONTAINER_CLASS: "c-atomix-glass__container",
@@ -527,6 +583,22 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     BORDER_BACKDROP_CLASS: "c-atomix-glass__border-backdrop",
     BORDER_1_CLASS: "c-atomix-glass__border-1",
     BORDER_2_CLASS: "c-atomix-glass__border-2",
+    /** Centralized liquid glass rim configuration */
+    BORDER: {
+        WIDTH_CSS_VAR: "--atomix-glass-border-width",
+        DEFAULT_WIDTH: "0.5px",
+        GRADIENT_CSS_VARS: {
+            GRADIENT_1: "--atomix-glass-border-gradient-1",
+            GRADIENT_2: "--atomix-glass-border-gradient-2"
+        },
+        GRADIENT: GLASS_BORDER_GRADIENT,
+        OVER_LIGHT: {
+            opacity: .7
+        },
+        DARK: {
+            opacity: .35
+        }
+    },
     HOVER_1_CLASS: "c-atomix-glass__hover-1",
     HOVER_2_CLASS: "c-atomix-glass__hover-2",
     HOVER_3_CLASS: "c-atomix-glass__hover-3",
@@ -555,25 +627,22 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         SHADER: "c-atomix-glass--shader"
     },
     DEFAULTS: {
-        DISPLACEMENT_SCALE: 70,
+        /** Subtle refraction — Apple UI chrome avoids heavy liquid distortion */
+        DISPLACEMENT_SCALE: 28,
         get BLUR_AMOUNT() {
-            return .15 * this.DISPLACEMENT_SCALE;
- // Dynamically computed based on displacement
-                },
-        get SATURATION() {
-            return 100 + .5 * this.DISPLACEMENT_SCALE;
- // Saturate relative to intensity
-                },
+            // Apple Music sidebar / player bar: ~20–40px frost (see $glass-backdrop-filter)
+            return Math.max(20, .72 * this.DISPLACEMENT_SCALE);
+        },
+        /** Fixed 180% matches Apple's saturate(180%) backdrop recipe */
+        SATURATION: 180,
         get ABERRATION_INTENSITY() {
-            return .03 * this.DISPLACEMENT_SCALE;
- // Scale aberration with displacement
-                },
-        ELASTICITY: .15,
+            return .02 * this.DISPLACEMENT_SCALE;
+        },
+        ELASTICITY: .05,
         get CORNER_RADIUS() {
             return 16;
  // Use 16 to match SCSS design system (was 20)
                 },
-        PADDING: "0",
         MODE: "standard",
         OVER_LIGHT: !1,
         ENABLE_OVER_LIGHT_LAYERS: !0,
@@ -589,19 +658,24 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     },
     CONSTANTS: {
         ACTIVATION_ZONE: 200,
-        LERP_FACTOR: .08,
+        LERP_FACTOR: .05,
+        // Lower = more viscous, liquid-smooth tracking (Apple feel)
         SMOOTHSTEP_POWER: 2.5,
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
-        // Elasticity physics constants
-        ELASTICITY_TRANSLATION_FACTOR: .1,
+        // Elasticity physics constants — Apple-tuned: soft springs, fast settling, minimal stretch
+        ELASTICITY_TRANSLATION_FACTOR: .06,
+        // Subtler elastic shift (was 0.1)
         ELASTICITY_DISTANCE_THRESHOLD: 200,
         ELASTICITY_COMPRESSION_FACTOR: .3,
-        ELASTICITY_STIFFNESS: .1,
-        ELASTICITY_DAMPING: .76,
+        ELASTICITY_STIFFNESS: .06,
+        // Softer springs = gentler motion (was 0.1)
+        ELASTICITY_DAMPING: .88,
+        // Fast settling, no wobble (was 0.76)
         ELASTICITY_VELOCITY_FACTOR: .65,
-        ELASTICITY_STRETCH_RATIO: .45,
+        ELASTICITY_STRETCH_RATIO: .25,
+        // Less visible surface tension stretch (was 0.45)
         ELASTICITY_MAGNIFICATION_BASE: 1.02,
         // Note: This default must match the SCSS variable --atomix-radius-md
         // @see src/styles/01-settings/_settings.global.scss
@@ -615,55 +689,16 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         },
         // Gradient calculation constants
         GRADIENT: {
-            BASE_ANGLE: 135,
-            // Base angle for border gradients (degrees)
-            ANGLE_MULTIPLIER: 1.2,
-            // Multiplier for mouse influence on angle
-            VELOCITY_ANGLE_MULTIPLIER: 2.5,
-            // How much velocity affects gradient rotation
-            CHROMATIC_OFFSET: 1.5,
-            // Degree offset for chromatic rim layers
-            BORDER_STOP_1: {
-                MIN: 10,
-                // Minimum percentage for border stop 1
-                BASE: 33,
-                // Base percentage for border stop 1
-                get MULTIPLIER() {
-                    return .009 * this.BASE;
-                }
-            },
-            BORDER_STOP_2: {
-                MAX: 90,
-                // Maximum percentage for border stop 2
-                BASE: 66,
-                // Base percentage for border stop 2
-                get MULTIPLIER() {
-                    return .006 * this.BASE;
-                }
-            },
-            BORDER_OPACITY: {
-                BASE_1: .12,
-                // Base opacity for border gradient 1
-                get BASE_2() {
-                    return 3.33 * this.BASE_1;
-                },
-                // Base opacity for border gradient 2
-                get BASE_3() {
-                    return 2.66 * this.BASE_1;
-                },
-                // Base opacity for border gradient 3
-                get BASE_4() {
-                    return 5 * this.BASE_1;
-                },
-                // Base opacity for border gradient 4
-                get MULTIPLIER_LOW() {
-                    return .066 * this.BASE_1;
-                },
-                // Low multiplier for mouse influence on opacity
-                get MULTIPLIER_HIGH() {
-                    return .1 * this.BASE_1;
-                }
-            },
+            BASE_ANGLE: GLASS_BORDER_GRADIENT.BASE_ANGLE,
+            ANGLE_MULTIPLIER: GLASS_BORDER_GRADIENT.ANGLE_MULTIPLIER,
+            VELOCITY_ANGLE_MULTIPLIER: GLASS_BORDER_GRADIENT.VELOCITY_ANGLE_MULTIPLIER,
+            CHROMATIC_OFFSET: GLASS_BORDER_GRADIENT.CHROMATIC_OFFSET,
+            /** @deprecated Use ATOMIX_GLASS.BORDER.GRADIENT.STOP_1 */
+            BORDER_STOP_1: GLASS_BORDER_GRADIENT.STOP_1,
+            /** @deprecated Use ATOMIX_GLASS.BORDER.GRADIENT.STOP_2 */
+            BORDER_STOP_2: GLASS_BORDER_GRADIENT.STOP_2,
+            /** @deprecated Use ATOMIX_GLASS.BORDER.GRADIENT.OPACITY */
+            BORDER_OPACITY: GLASS_BORDER_GRADIENT.OPACITY,
             CENTER_POSITION: 50,
             // Center position percentage (50%)
             HOVER_POSITION: {
@@ -696,8 +731,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
                     return 2 * this.BLACK_STOP;
                 },
                 // End percentage for black hover 1
-                WHITE_START: .5,
-                // Start opacity for white hover 1
+                WHITE_START: .35,
+                // Gentler hover flash — Apple hover is barely visible
                 get WHITE_STOP() {
                     return this.BLACK_END - 10;
                 }
@@ -715,8 +750,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
                     return 2 * this.BLACK_STOP;
                 },
                 // End percentage for black hover 2
-                WHITE_START: 1,
-                // Start opacity for white hover 2
+                WHITE_START: .7,
+                // Gentler hover flash
                 get WHITE_STOP() {
                     return this.BLACK_END;
                 }
@@ -734,8 +769,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
                     return 2 * this.BLACK_STOP;
                 },
                 // End percentage for black hover 3
-                WHITE_START: 1,
-                // Start opacity for white hover 3
+                WHITE_START: .7,
+                // Gentler hover flash
                 get WHITE_STOP() {
                     return this.BLACK_END;
                 }
@@ -745,13 +780,13 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         BASE_GRADIENT: {
             ANGLE: 135,
             // Gradient angle in degrees
-            BLACK_START_BASE: .15,
+            BLACK_START_BASE: .1,
             // Base start opacity for black
             get BLACK_START_MULTIPLIER() {
                 return .02 * this.BLACK_START_BASE;
             },
             // Multiplier for mouse X influence on start
-            BLACK_MID_BASE: .1,
+            BLACK_MID_BASE: .07,
             // Base mid opacity for black
             get BLACK_MID_MULTIPLIER() {
                 return .02 * this.BLACK_MID_BASE;
@@ -772,7 +807,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
             }
         },
         OVERLAY_GRADIENT: {
-            BLACK_START_BASE: .12,
+            BLACK_START_BASE: .08,
             // Base start opacity for black overlay
             get BLACK_START_MULTIPLIER() {
                 return .025 * this.BLACK_START_BASE;
@@ -796,14 +831,14 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
                 return .416 * this.BLACK_START_BASE;
             }
         },
-        // Overlay highlight constants
+        // Overlay highlight constants — Apple places specular at the top-center
         OVERLAY_HIGHLIGHT: {
-            POSITION_X: 20,
-            // X position percentage
-            POSITION_Y: 20,
-            // Y position percentage
-            WHITE_OPACITY: .4,
-            // White opacity in gradient
+            POSITION_X: 50,
+            // Centered horizontal — Apple's top-center specular
+            POSITION_Y: 5,
+            // Very top — catches light like a curved glass surface
+            WHITE_OPACITY: .28,
+            // Softer specular — visible but not glaring
             get STOP() {
                 return 150 * this.WHITE_OPACITY;
             },
@@ -824,6 +859,10 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         SATURATION: {
             HIGH_CONTRAST: 200
         },
+        // Container shadows — hairline inner catch + soft floating lift (Apple player bar)
+        CONTAINER_SHADOW: {
+            LIGHT: "inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16)"
+        },
         // Phase 1: Animation System Constants
         ANIMATION: {
             // Breathing effect timing (in milliseconds)
@@ -863,7 +902,44 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
             }
         }
     }
-}, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
+};
+
+/**
+ * Default theme colors for components
+ */
+/**
+ * Button-specific constants
+ */
+/**
+ * Component Utilities
+ *
+ * Helper functions for component development with the new customization system
+ */
+/**
+ * Merge multiple class names
+ */
+function mergeClassNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+
+/**
+ * Utility to merge multiple React refs into one
+ */ function setRef(ref, value) {
+    "function" == typeof ref ? ref(value) : ref && (
+    // This is safe because we're checking that ref exists first
+    ref.current = value);
+}
+
+/**
+ * Combines two React refs into a single ref function
+ * This is used when you need to use and forward a ref at the same time
+ */ function useForkRef(refA, refB) {
+    return React.useMemo((() => null == refA && null == refB ? null : refValue => {
+        setRef(refA, refValue), setRef(refB, refValue);
+    }), [ refA, refB ]);
+}
+
+const {CONSTANTS: CONSTANTS$3} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
     x: rect.left + rect.width / 2,
     y: rect.top + rect.height / 2
 } : {
@@ -871,37 +947,37 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     y: 0
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
-    // Bounded calculation — keeps the glass effect subtle and stable
-        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$2.MOUSE_INFLUENCE_DIVISOR;
+    // Clamp influence to keep mouse response subtle and stable.
+        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$3.MOUSE_INFLUENCE_DIVISOR;
     return Math.min(.8, influence);
  // Tighter cap to prevent blur/filter blow-out
-}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$2.MIN_BLUR : Math.max(CONSTANTS$2.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$2.MAX_SIZE && size.height <= CONSTANTS$2.MAX_SIZE, parseBorderRadiusValue = value => {
+}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$3.MIN_BLUR : Math.max(CONSTANTS$3.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$3.MAX_SIZE && size.height <= CONSTANTS$3.MAX_SIZE, parseBorderRadiusValue = value => {
     if ("number" == typeof value) return Math.max(0, value);
-    if ("string" != typeof value || !value.trim()) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
+    if ("string" != typeof value || !value.trim()) return CONSTANTS$3.DEFAULT_CORNER_RADIUS;
     const trimmedValue = value.trim();
     // Handle px values
         if (trimmedValue.endsWith("px")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
+        return isNaN(parsed) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
     }
     // Handle rem values (assume 16px = 1rem)
         if (trimmedValue.endsWith("rem")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle em values (assume 16px = 1em for simplicity)
         if (trimmedValue.endsWith("em")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle percentage (convert to approximate px value, assuming 200px container)
         if (trimmedValue.endsWith("%")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
+        return isNaN(parsed) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
     }
     // Handle unitless numbers
         const numValue = parseFloat(trimmedValue);
-    return isNaN(numValue) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
+    return isNaN(numValue) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
 }, extractBorderRadiusFromElement = element => {
     if (!element || !element.props) return null;
     // Check inline styles first (highest priority)
@@ -917,11 +993,11 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     // If element has children, recursively check them
         if (element.props.children) {
         const childRadius = extractBorderRadiusFromChildren(element.props.children);
-        if (childRadius > 0 && childRadius !== CONSTANTS$2.DEFAULT_CORNER_RADIUS) return childRadius;
+        if (childRadius > 0 && childRadius !== CONSTANTS$3.DEFAULT_CORNER_RADIUS) return childRadius;
     }
     return null;
 }, extractBorderRadiusFromChildren = children => {
-    if (!children) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
+    if (!children) return CONSTANTS$3.DEFAULT_CORNER_RADIUS;
     try {
         const childArray = React.Children.toArray(children);
         for (let i = 0; i < childArray.length; i++) {
@@ -934,7 +1010,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     } catch (error) {
         // Silently handle errors
     }
-    return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
+    return CONSTANTS$3.DEFAULT_CORNER_RADIUS;
 }, smoothstep = t => {
     const clamped = Math.max(0, Math.min(1, t));
     return clamped * clamped * (3 - 2 * clamped);
@@ -944,7 +1020,47 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         value: current + newVelocity,
         velocity: newVelocity
     };
-}, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
+};
+
+/**
+ * Calculate element center from bounding rect
+ */
+/**
+ * Normalizes a layout inset for use in CSS custom properties.
+ *
+ * @param value - Raw inset from `style` (number, px string, or `auto`).
+ * @param fallback - Value used when `value` is undefined.
+ */
+function formatGlassInsetValue(value, fallback = "auto") {
+    return void 0 === value ? "number" == typeof fallback ? `${fallback}px` : String(fallback) : "auto" === value ? "auto" : "number" == typeof value ? `${value}px` : value;
+}
+
+/**
+ * Determines whether the glass should use fixed/sticky layout semantics.
+ *
+ * @param explicit - Value of the `isFixedOrSticky` prop.
+ * @param position - `position` from the consumer `style` object.
+ */
+/** Coerces a value to a finite number, returning `fallback` when invalid. */
+function toSafeNumber(value, fallback = 0) {
+    return "number" != typeof value || isNaN(value) ? fallback : value;
+}
+
+/**
+ * Calculates the target frame rate for shader time-animation loops.
+ *
+ * Balances visual quality against distortion complexity and `animationSpeed`.
+ */
+/**
+ * Computes per-channel displacement scale for the SVG chromatic-aberration filter.
+ */
+function getChromaticDisplacementScale(mode, displacementScale, aberrationIntensity, channelFactor) {
+    return displacementScale * (("shader" === mode ? 1 : -1) - aberrationIntensity * channelFactor);
+}
+
+/**
+ * Get displacement map URL based on mode
+ */ const getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -961,13 +1077,28 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
       default:
         return console.warn("AtomixGlass: Invalid displacement mode"), displacementMap;
     }
-}, sharedShaderCache = new Map, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsx("svg", {
-    style: {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        inset: 0
-    },
+}, sharedShaderCache = new Map, CHROMATIC_CHANNELS = [ {
+    result: "RED_DISPLACED",
+    channelResult: "RED_CHANNEL",
+    aberrationFactor: 0,
+    colorMatrix: "1 0 0 0 0\n0 0 0 0 0\n0 0 0 0 0\n0 0 0 1 0"
+}, {
+    result: "GREEN_DISPLACED",
+    channelResult: "GREEN_CHANNEL",
+    aberrationFactor: .02,
+    colorMatrix: "0 0 0 0 0\n0 1 0 0 0\n0 0 0 0 0\n0 0 0 1 0"
+}, {
+    result: "BLUE_DISPLACED",
+    channelResult: "BLUE_CHANNEL",
+    aberrationFactor: .03,
+    colorMatrix: "0 0 0 0 0\n0 0 0 0 0\n0 0 1 0 0\n0 0 0 1 0"
+} ], FILTER_SVG_STYLE = {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    inset: 0
+}, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsx("svg", {
+    style: FILTER_SVG_STYLE,
     "aria-hidden": "true",
     children: jsxs("defs", {
         children: [ jsxs("radialGradient", {
@@ -1021,43 +1152,21 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
                 dx: "0",
                 dy: "0",
                 result: "CENTER_ORIGINAL"
-            }), jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * ("shader" === mode ? 1 : -1),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "RED_DISPLACED"
-            }), jsx("feColorMatrix", {
-                in: "RED_DISPLACED",
-                type: "matrix",
-                values: "1 0 0 0 0\n                 0 0 0 0 0\n                 0 0 0 0 0\n                 0 0 0 1 0",
-                result: "RED_CHANNEL"
-            }), jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * (("shader" === mode ? 1 : -1) - .02 * aberrationIntensity),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "GREEN_DISPLACED"
-            }), jsx("feColorMatrix", {
-                in: "GREEN_DISPLACED",
-                type: "matrix",
-                values: "0 0 0 0 0\n                 0 1 0 0 0\n                 0 0 0 0 0\n                 0 0 0 1 0",
-                result: "GREEN_CHANNEL"
-            }), jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * (("shader" === mode ? 1 : -1) - .03 * aberrationIntensity),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "BLUE_DISPLACED"
-            }), jsx("feColorMatrix", {
-                in: "BLUE_DISPLACED",
-                type: "matrix",
-                values: "0 0 0 0 0\n                 0 0 0 0 0\n                 0 0 1 0 0\n                 0 0 0 1 0",
-                result: "BLUE_CHANNEL"
-            }), jsx("feBlend", {
+            }), CHROMATIC_CHANNELS.map((channel => jsxs(React.Fragment, {
+                children: [ jsx("feDisplacementMap", {
+                    in: "SourceGraphic",
+                    in2: "DISPLACEMENT_MAP",
+                    scale: getChromaticDisplacementScale(mode, displacementScale, aberrationIntensity, channel.aberrationFactor),
+                    xChannelSelector: "R",
+                    yChannelSelector: "B",
+                    result: channel.result
+                }), jsx("feColorMatrix", {
+                    in: channel.result,
+                    type: "matrix",
+                    values: channel.colorMatrix,
+                    result: channel.channelResult
+                }) ]
+            }, channel.channelResult))), jsx("feBlend", {
                 in: "GREEN_CHANNEL",
                 in2: "BLUE_CHANNEL",
                 mode: "screen",
@@ -1098,24 +1207,22 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
 });
 
 /**
- * Default theme colors for components
- */
-/**
- * Button-specific constants
+ * Module-level LRU cache for shader displacement maps.
+ *
+ * Shared across all `AtomixGlassContainer` instances so identical size and
+ * variant combinations are generated once.
  */ GlassFilterComponent.displayName = "GlassFilter";
 
-// Memoize component to prevent unnecessary re-renders
+/** Shallow prop comparison to avoid redundant SVG filter regeneration. */
 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 = {
+}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, glassSize: glassSize = {
     width: 0,
     height: 0
-}, 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) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, 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) => {
     // 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);
+    const rawId = useId(), filterId = useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), containerRef = useForkRef(ref, null), [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 ? 
@@ -1193,15 +1300,23 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
                 shaderGeneratorRef.current = null;
             }
         };
-    }), [ mode, glassSize, shaderVariant ]), 
-    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
-    useEffect((() => {
+    }), [ mode, glassSize, shaderVariant ]), useEffect((() => {
         // Only run animations in shader mode with time animation enabled
         if ("shader" !== mode || !withTimeAnimation || effectiveReducedMotion || effectiveWithoutEffects) 
         // Cancel any existing animation frame
         return void (null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
         animationFrameRef.current = null));
-        const baseFps = "ultra" === distortionQuality ? 60 : "high" === distortionQuality ? 30 : "medium" === distortionQuality ? 24 : 20, effectiveSpeed = Math.max(.5, Math.min(2, animationSpeed || 1)), complexity = withMultiLayerDistortion ? Math.max(1, (distortionOctaves || 3) / 3 + .25 * Math.max(0, (distortionLacunarity || 2) - 2) + Math.max(0, (distortionGain || .5) - .5)) : 1, frameInterval = 1e3 / Math.max(12, Math.min(60, Math.round(baseFps * effectiveSpeed / complexity)));
+        const targetFps = function(options) {
+            const {distortionQuality: distortionQuality, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5} = options, baseFps = "ultra" === distortionQuality ? 60 : "high" === distortionQuality ? 30 : "medium" === distortionQuality ? 24 : 20, effectiveSpeed = Math.max(.5, Math.min(2, animationSpeed)), complexity = withMultiLayerDistortion ? Math.max(1, distortionOctaves / 3 + .25 * Math.max(0, distortionLacunarity - 2) + Math.max(0, distortionGain - .5)) : 1;
+            return Math.max(12, Math.min(60, Math.round(baseFps * effectiveSpeed / complexity)));
+        }({
+            distortionQuality: distortionQuality,
+            animationSpeed: animationSpeed,
+            withMultiLayerDistortion: withMultiLayerDistortion,
+            distortionOctaves: distortionOctaves,
+            distortionLacunarity: distortionLacunarity,
+            distortionGain: distortionGain
+        }), frameInterval = 1e3 / targetFps;
         let lastUpdate = 0, isCancelled = !1;
         const animate = currentTime => {
             if (!isCancelled) {
@@ -1225,88 +1340,21 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
         };
     }), [ mode, withTimeAnimation, animationSpeed, displacementScale, withMultiLayerDistortion, distortionOctaves, distortionLacunarity, distortionGain, distortionQuality, effectiveReducedMotion, effectiveWithoutEffects, glassSize ]);
     // Removed forced reflow to avoid layout thrash and potential feedback sizing loops
-    const [rectCache, setRectCache] = useState(null);
-    useEffect((() => {
-        if (!ref || "function" == typeof ref) return;
-        const element = ref.current;
-        if (element) try {
-            setRectCache(element.getBoundingClientRect());
-        } catch (error) {
-            console.warn("AtomixGlassContainer: Error getting element bounds", error), setRectCache(null);
-        }
-    }), [ ref, glassSize ]);
-    const liquidBlur = useMemo((() => {
-        const defaultBlur = {
-            baseBlur: blurAmount,
-            edgeBlur: 1.25 * blurAmount,
-            centerBlur: 1.1 * blurAmount,
-            flowBlur: 1.2 * blurAmount
-        };
-        // Enhanced validation for liquid blur
-                if (!withLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
+    const containerVars = useMemo((() => {
         try {
-            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = 2 * blurAmount, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * .15), edgeIntensity = .15 * mouseInfluence, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = .1 * mouseInfluence, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, 1.2 * baseBlur);
-            // NOTE: hover/active multipliers intentionally omitted here —
-            // they belong on opacity layers, not the blur filter itself.
             return {
-                baseBlur: clampBlur(baseBlur),
-                edgeBlur: clampBlur(edgeBlur),
-                centerBlur: clampBlur(centerBlur),
-                flowBlur: clampBlur(flowBlur)
-            };
-        } catch (error) {
-            return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
-            defaultBlur;
-        }
-    }), [ withLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
-        try {
-            const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), validatedBaseBlur = "number" != typeof liquidBlur.baseBlur || isNaN(liquidBlur.baseBlur) ? 0 : liquidBlur.baseBlur, validatedEdgeBlur = "number" != typeof liquidBlur.edgeBlur || isNaN(liquidBlur.edgeBlur) ? 0 : liquidBlur.edgeBlur, validatedCenterBlur = "number" != typeof liquidBlur.centerBlur || isNaN(liquidBlur.centerBlur) ? 0 : liquidBlur.centerBlur, validatedFlowBlur = "number" != typeof liquidBlur.flowBlur || isNaN(liquidBlur.flowBlur) ? 0 : liquidBlur.flowBlur, area = rectCache ? rectCache.width * rectCache.height : 0;
-            // Validate blur values before using them
-                        return !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? {
-                backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
-            } : {
-                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1}) brightness(${overLightConfig?.brightness || 1})`
-            };
-            // Single-pass fallback: stronger radius to match perceived blur of multi-pass
-                } catch (error) {
-            return console.warn("AtomixGlassContainer: Error calculating backdrop style", error), 
-            {
-                backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
-            };
-        }
-    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur, overLightConfig ]), containerVars = useMemo((() => {
-        try {
-            // Safe extraction of mouse offset values
-            const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
-            return {
-                "--atomix-glass-container-radius": `${"number" != typeof borderRadius || isNaN(borderRadius) ? 0 : borderRadius}px`,
-                "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
-                "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig?.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
-                "--atomix-glass-container-shadow-opacity": effectiveWithoutEffects ? 0 : 1,
-                // Background and shadow values use design token-aligned RGB values
-                "--atomix-glass-container-bg": overLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none",
-                "--atomix-glass-container-text-shadow": overLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)",
-                "--atomix-glass-container-box-shadow": overLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)"
+                "--atomix-glass-container-radius": `${"number" != typeof borderRadius || isNaN(borderRadius) ? 0 : borderRadius}px`
             };
         } catch (error) {
             return console.warn("AtomixGlassContainer: Error generating container variables", error), 
             {
-                "--atomix-glass-container-padding": "0 0",
-                "--atomix-glass-container-radius": "0px",
-                "--atomix-glass-container-backdrop": "none",
-                "--atomix-glass-container-shadow": "none",
-                "--atomix-glass-container-shadow-opacity": 1,
-                "--atomix-glass-container-bg": "none",
-                "--atomix-glass-container-text-shadow": "none"
+                "--atomix-glass-container-radius": "0px"
             };
         }
-    }), [ borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects, overLightConfig ]);
+    }), [ borderRadius ]);
     return jsx("div", {
-        ref: el => {
-            // Handle forwarded ref
-            "function" == typeof ref ? ref(el) : ref && (ref.current = el);
-        },
-        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${isActive ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
+        ref: containerRef,
+        className: mergeClassNames(ATOMIX_GLASS.CONTAINER_CLASS, className, isActive && ATOMIX_GLASS.CLASSES.ACTIVE, overLight && ATOMIX_GLASS.CLASSES.OVER_LIGHT),
         style: {
             ...style,
             ...containerVars
@@ -1324,8 +1372,8 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
                     blurAmount: blurAmount,
                     mode: mode,
                     id: filterId,
-                    displacementScale: "number" != typeof displacementScale || isNaN(displacementScale) ? 0 : displacementScale,
-                    aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
+                    displacementScale: toSafeNumber(displacementScale),
+                    aberrationIntensity: toSafeNumber(aberrationIntensity),
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
@@ -1347,8 +1395,12 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
     });
 }));
 
-// ─── Blur multiplier constants (module-level, never change at runtime) ────────
-AtomixGlassContainer.displayName = "AtomixGlassContainer";
+/**
+ * Internal glass surface that owns backdrop-filter, SVG distortion, and content.
+ *
+ * Layout and stacking styles are applied via the `style` prop from the parent.
+ * The root wrapper supplies CSS custom properties only.
+ */ AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance
 const globalMouseTracker = new 
@@ -1463,28 +1515,32 @@ class {
    */    getSubscriberCount() {
         return this.listeners.size;
     }
-}, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
+}, {BORDER: BORDER, CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, BORDER_GRADIENT = BORDER.GRADIENT, WHITE = CONSTANTS$2.PALETTE.WHITE, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
     if (!wrapperElement && !containerElement) return;
     if (!validateGlassSize(params.glassSize)) return;
-    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, isFixedOrSticky: isFixedOrSticky = !1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, isFixedOrSticky: isFixedOrSticky = !1, borderAnimated: borderAnimated = !0, borderOpacityMultiplier: borderOpacityMultiplier = 1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
         opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
         contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
         brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
         shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
         borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence)),
         saturationBoost: baseOverLightConfig.saturationBoost
-    }, scaleX = directionalScale.x * scaleBase, scaleY = directionalScale.y * scaleBase, transformStyle = effectiveWithoutEffects ? `scale(${scaleBase})` : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) scaleX(${scaleX}) scaleY(${scaleY})`, stretchMagnitude = ((pos1, pos2) => {
-        if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
-        const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
-        return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-    })({
-        x: 0,
-        y: 0
-    }, elasticTranslation), tensionFactor = smoothstep(stretchMagnitude / 80), lightingContrast = Math.min(1.8, overLightConfig.contrast + .2 * tensionFactor), lightingBrightness = Math.min(1.2, overLightConfig.brightness + .1 * tensionFactor);
+    }, scaleX = directionalScale.x * scaleBase, scaleY = directionalScale.y * scaleBase, transformStyle = effectiveWithoutEffects ? `scale(${scaleBase})` : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) scaleX(${scaleX}) scaleY(${scaleY})`, tensionFactor = 
+    /**
+ * Computes tension factor from elastic translation magnitude (0–1).
+ */
+    function(elasticTranslation) {
+        const magnitude = Math.hypot(elasticTranslation.x, elasticTranslation.y);
+        return smoothstep(magnitude / 80);
+    }
+    /**
+ * Updates the styles of the AtomixGlass wrapper and container elements imperatively
+ * to avoid React re-renders on mouse movement.
+ */ (elasticTranslation), lightingContrast = Math.min(1.8, overLightConfig.contrast + .2 * tensionFactor), lightingBrightness = Math.min(1.2, overLightConfig.brightness + .1 * tensionFactor);
     // Calculate mouse influence
         // Update Wrapper Styles (glassVars)
     if (wrapperElement) {
-        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, velocityRotation = (mouseVelocity.x + elasticVelocity.x) * (GRADIENT.VELOCITY_ANGLE_MULTIPLIER || 2.5), borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER + velocityRotation, chromaticOffset = GRADIENT.CHROMATIC_OFFSET || 1.5, angleR = borderGradientAngle - chromaticOffset, angleB = borderGradientAngle + chromaticOffset, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), tensionGlow = 1 + .5 * tensionFactor, borderOpacities = [ (GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) * tensionGlow ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
+        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
             hover1: {
                 x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
                 y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
@@ -1501,28 +1557,55 @@ class {
             x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
             y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
         }, opacityValues = {
-            hover1: isHovered || isActive ? .5 : 0,
-            hover2: isActive ? .5 : 0,
-            hover3: isHovered ? .4 : isActive ? .8 : 0,
-            base: isOverLight ? overLightConfig.opacity : 0,
-            over: isOverLight ? 1.1 * overLightConfig.opacity : 0
+            // hover-1: ambient highlight glow — present on hover and during press
+            hover1: isHovered || isActive ? 1 : 0,
+            // hover-2: press depth shadow — only fires on active (mousedown)
+            hover2: isActive ? 1 : 0,
+            // hover-3: global soft-light surface shift — half-strength on hover, full on press
+            hover3: isActive ? 1 : isHovered ? .55 : 0,
+            // Dark chrome: faint smoky tint; over-light keeps stronger fill
+            base: isOverLight ? overLightConfig.opacity : .14,
+            over: isOverLight ? 1.1 * overLightConfig.opacity : .1
         }, style = wrapperElement.style;
         style.setProperty("--atomix-glass-transform", transformStyle || "none");
         // Parallax for content (liquid refraction feel)
         const parallaxFactor = .38 + .12 * tensionFactor;
         style.setProperty("--atomix-glass-child-parallax", `translate(${elasticTranslation.x * -parallaxFactor}px, ${elasticTranslation.y * -parallaxFactor}px)`), 
-        style.setProperty("--atomix-glass-contrast", lightingContrast.toString()), style.setProperty("--atomix-glass-brightness", lightingBrightness.toString()), 
+        style.setProperty("--atomix-glass-contrast", lightingContrast.toString()), style.setProperty("--atomix-glass-brightness", lightingBrightness.toString());
         // ── Chromatic Rim Lighting ──────────────────────────────────────
-        // Layer 1: Core White/Blue highlight
-        style.setProperty("--atomix-glass-border-gradient-1", `linear-gradient(${angleB}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
-        // Layer 2: Subtle Red/Warm highlight (offset angle)
-        style.setProperty("--atomix-glass-border-gradient-2", `linear-gradient(${angleR}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
-        // Hover gradients
-        style.setProperty("--atomix-glass-hover-1-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`), 
-        style.setProperty("--atomix-glass-hover-2-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`), 
-        style.setProperty("--atomix-glass-hover-3-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`), 
-        style.setProperty("--atomix-glass-base-gradient", isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`), 
-        style.setProperty("--atomix-glass-overlay-gradient", isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`), 
+        const borderVars = ATOMIX_GLASS.BORDER.GRADIENT_CSS_VARS;
+        if (borderAnimated && !effectiveWithoutEffects) {
+            const borderCssVars = 
+            /**
+ * Builds animated chromatic rim CSS variables for border layers 1 and 2.
+ * When empty, SCSS static conic/linear fallbacks apply.
+ */
+            function(params) {
+                const {mouseOffset: mouseOffset, mouseVelocity: mouseVelocity, elasticVelocity: elasticVelocity, borderOpacity: borderOpacity, opacityMultiplier: opacityMultiplier = 1, tensionFactor: tensionFactor = 0} = params, mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), velocityRotation = (mouseVelocity.x + elasticVelocity.x) * BORDER_GRADIENT.VELOCITY_ANGLE_MULTIPLIER, borderGradientAngle = BORDER_GRADIENT.BASE_ANGLE + mx * BORDER_GRADIENT.ANGLE_MULTIPLIER + velocityRotation, chromaticOffset = BORDER_GRADIENT.CHROMATIC_OFFSET, angleR = borderGradientAngle - chromaticOffset, angleB = borderGradientAngle + chromaticOffset, borderStop1 = Math.max(BORDER_GRADIENT.STOP_1.MIN, BORDER_GRADIENT.STOP_1.BASE + my * BORDER_GRADIENT.STOP_1.MULTIPLIER), borderStop2 = Math.min(BORDER_GRADIENT.STOP_2.MAX, BORDER_GRADIENT.STOP_2.BASE + my * BORDER_GRADIENT.STOP_2.MULTIPLIER), tensionGlow = 1 + .5 * tensionFactor, opacities = BORDER_GRADIENT.OPACITY, borderOpacities = [ (opacities.BASE_1 + absMx * opacities.MULTIPLIER_LOW) * tensionGlow, (opacities.BASE_2 + absMx * opacities.MULTIPLIER_HIGH) * tensionGlow, (opacities.BASE_3 + absMx * opacities.MULTIPLIER_LOW) * tensionGlow, (opacities.BASE_4 + absMx * opacities.MULTIPLIER_HIGH) * tensionGlow ], configBorderOpacity = borderOpacity * opacityMultiplier, gradient1 = `linear-gradient(${angleB}deg, rgba(${WHITE}, 0) 0%, rgba(${WHITE}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${WHITE}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${WHITE}, 0) 100%)`, gradient2 = `linear-gradient(${angleR}deg, rgba(${WHITE}, 0) 0%, rgba(${WHITE}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${WHITE}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${WHITE}, 0) 100%)`;
+                return {
+                    [BORDER.GRADIENT_CSS_VARS.GRADIENT_1]: gradient1,
+                    [BORDER.GRADIENT_CSS_VARS.GRADIENT_2]: gradient2
+                };
+            }({
+                mouseOffset: mouseOffset,
+                mouseVelocity: mouseVelocity,
+                elasticVelocity: elasticVelocity,
+                borderOpacity: overLightConfig.borderOpacity,
+                opacityMultiplier: borderOpacityMultiplier,
+                tensionFactor: tensionFactor
+            });
+            style.setProperty(borderVars.GRADIENT_1, borderCssVars[borderVars.GRADIENT_1] ?? ""), 
+            style.setProperty(borderVars.GRADIENT_2, borderCssVars[borderVars.GRADIENT_2] ?? "");
+        } else style.removeProperty(borderVars.GRADIENT_1), style.removeProperty(borderVars.GRADIENT_2);
+        // Hover gradients — cursor-relative radial positions for realistic light tracking.
+        // hover-1: white overlay highlight following cursor (works on both dark + light)
+                style.setProperty("--atomix-glass-hover-1-gradient", `radial-gradient(65% 55% at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, 0.24) 0%, rgba(${whiteColor}, 0.06) 45%, rgba(${whiteColor}, 0) 72%)`), 
+        // hover-2: press depth — darkens at cursor with multiply blend, isOverLight uses stronger black
+        style.setProperty("--atomix-glass-hover-2-gradient", isOverLight ? `radial-gradient(60% 50% at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, 0.22) 0%, rgba(${blackColor}, 0.06) 50%, rgba(${blackColor}, 0) 72%)` : `radial-gradient(60% 50% at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, 0.18) 0%, rgba(${blackColor}, 0.04) 50%, rgba(${blackColor}, 0) 72%)`), 
+        // hover-3: full-surface soft-light tint; linear gradient angled with cursor X
+        style.setProperty("--atomix-glass-hover-3-gradient", `linear-gradient(${150 + .3 * mx}deg, rgba(${whiteColor}, ${isOverLight ? .08 : .12}) 0%, rgba(${whiteColor}, 0.04) 55%, rgba(${whiteColor}, 0) 100%)`), 
+        style.setProperty("--atomix-glass-base-gradient", isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `linear-gradient(180deg, rgba(${blackColor}, 0.42) 0%, rgba(${blackColor}, 0.22) 55%, rgba(${blackColor}, 0.12) 100%)`), 
+        style.setProperty("--atomix-glass-overlay-gradient", isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `radial-gradient(120% 80% at 50% 0%, rgba(${whiteColor}, 0.14) 0%, rgba(${whiteColor}, 0) 55%)`), 
         // Opacities
         style.setProperty("--atomix-glass-hover-1-opacity", opacityValues.hover1.toString()), 
         style.setProperty("--atomix-glass-hover-2-opacity", opacityValues.hover2.toString()), 
@@ -1559,21 +1642,17 @@ 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, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})`;
         // Container variables
                 const style = containerElement.style;
-        style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
+        style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
         style.setProperty("--atomix-glass-container-backdrop", backdropFilterString), 
         // Shadows
-        style.setProperty("--atomix-glass-container-shadow", isOverLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset"), 
+        style.setProperty("--atomix-glass-container-shadow", isOverLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.35 + .002 * mx) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.15 + .001 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.06 + .001 * Math.abs(mx + my)) * (overLightConfig.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.08 + .002 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})` ].join(", ") : ATOMIX_GLASS.CONSTANTS.CONTAINER_SHADOW.LIGHT), 
         style.setProperty("--atomix-glass-container-shadow-opacity", effectiveWithoutEffects ? "0" : "1"), 
         style.setProperty("--atomix-glass-container-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"), 
         style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"), 
-        style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)");
+        style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18)");
     }
 };
 
-/**
- * Updates the styles of the AtomixGlass wrapper and container elements imperatively
- * to avoid React re-renders on mouse movement.
- */
 /**
  * Animation System for AtomixGlass Component
  *
@@ -1718,12 +1797,38 @@ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new Weak
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1, withTimeAnimation: 
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, border: border, withBorder: withBorder = !0, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1, withTimeAnimation: 
 // Default priority
 // Phase 1: Animation System Props
 withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
     // State
-    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
+    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), resolvedBorder = useMemo((() => 
+    /**
+ * Resolves `border` and legacy `withBorder` into a single configuration object.
+ */
+    function(border, withBorder) {
+        const legacyDefault = withBorder ?? !0;
+        return void 0 === border ? {
+            enabled: legacyDefault,
+            width: BORDER.DEFAULT_WIDTH,
+            opacityMultiplier: 1,
+            animated: !0
+        } : "boolean" == typeof border ? {
+            enabled: border,
+            width: BORDER.DEFAULT_WIDTH,
+            opacityMultiplier: 1,
+            animated: !0
+        } : {
+            enabled: border.enabled ?? legacyDefault,
+            width: (value = border.width, void 0 === value ? BORDER.DEFAULT_WIDTH : "number" == typeof value ? `${value}px` : value),
+            opacityMultiplier: border.opacity ?? 1,
+            animated: !1 !== border.animated
+        };
+        /**
+ * Formats border width for CSS custom properties.
+ */
+        var value;
+    }(border, withBorder)), [ border, withBorder ]), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
     }), internalMouseOffsetRef = useRef({
@@ -2018,21 +2123,22 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             isOverLight: isOverLight,
             threshold: .7,
             opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: 1.4,
-            brightness: .9,
-            saturationBoost: 1.3,
-            // Fixed value — dynamic saturation amplifies perceived displacement
-            shadowIntensity: .9,
-            borderOpacity: .7
+            // Dark UI (Apple Music): neutral contrast + slight brightness lift
+            contrast: isOverLight ? 1.4 : 1.02,
+            brightness: isOverLight ? .9 : 1.02,
+            saturationBoost: isOverLight ? 1.3 : 1,
+            shadowIntensity: isOverLight ? .9 : 1,
+            borderOpacity: isOverLight ? ATOMIX_GLASS.BORDER.OVER_LIGHT.opacity : ATOMIX_GLASS.BORDER.DARK.opacity
         };
         if ("object" == typeof overLight && null !== overLight) {
-            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), finalConfig = {
+            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), validatedBorderOpacity = validateConfigValue(objConfig.borderOpacity, .1, 1, baseConfig.borderOpacity), finalConfig = {
                 ...baseConfig,
                 threshold: validatedThreshold,
                 opacity: validatedOpacity * hoverIntensity * activeIntensity,
                 contrast: validatedContrast,
                 brightness: validatedBrightness,
-                saturationBoost: validatedSaturationBoost
+                saturationBoost: validatedSaturationBoost,
+                borderOpacity: validatedBorderOpacity
             };
             return "undefined" == typeof process || process.env, finalConfig;
         }
@@ -2130,12 +2236,13 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
                 withLiquidBlur: withLiquidBlur,
                 blurAmount: blurAmount,
                 saturation: saturation,
-                padding: padding,
-                isFixedOrSticky: isFixedOrSticky
+                isFixedOrSticky: isFixedOrSticky,
+                borderAnimated: resolvedBorder.animated,
+                borderOpacityMultiplier: resolvedBorder.opacityMultiplier
             }), Math.abs(mouseVelocityRef.current.x) < .001 && Math.abs(mouseVelocityRef.current.y) < .001 && Math.abs(elasticVelocityRef.current.x) < .001 && Math.abs(elasticVelocityRef.current.y) < .001 && Math.abs(scaleVelocityRef.current.x) < .001 && Math.abs(scaleVelocityRef.current.y) < .001 && Math.abs(internalMouseOffsetRef.current.x - targetMouseOffsetRef.current.x) < .001 && Math.abs(internalMouseOffsetRef.current.y - targetMouseOffsetRef.current.y) < .001 ? stopLerpLoop() : lerpRafRef.current = requestAnimationFrame(tick);
         };
         lerpRafRef.current = requestAnimationFrame(tick);
-    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky, stopLerpLoop ]), handleGlobalMousePosition = useCallback((globalPos => {
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, isFixedOrSticky, resolvedBorder.animated, resolvedBorder.opacityMultiplier, stopLerpLoop ]), handleGlobalMousePosition = useCallback((globalPos => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
         const container = mouseContainer?.current || glassRef.current;
@@ -2199,9 +2306,10 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             withLiquidBlur: withLiquidBlur,
             blurAmount: blurAmount,
             saturation: saturation,
-            padding: padding
+            borderAnimated: resolvedBorder.animated,
+            borderOpacityMultiplier: resolvedBorder.opacityMultiplier
         });
-    }), [ isHovered, isActive, glassSize, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, padding, onClick ]);
+    }), [ isHovered, isActive, glassSize, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, resolvedBorder.animated, resolvedBorder.opacityMultiplier, onClick ]);
     // Event handlers
     const handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleKeyDown = useCallback((e => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
@@ -2221,6 +2329,7 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         mouseOffset: mouseOffset,
         // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
+        resolvedBorder: resolvedBorder,
         transformStyle: transformStyle,
         getShaderTime: getShaderTime,
         applyTimeBasedDistortion: applyTimeBasedDistortion,
@@ -2281,148 +2390,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
  *
  * @returns Performance tier classification
  */
-/** 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.
- *
- * 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", {
-            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", {
-                className: "u-text-sm u-font-bold u-text-white",
-                children: "Performance Monitor"
-            }), onClose && jsx("button", {
-                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", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "FPS"
-            }), jsx("span", {
-                className: "u-font-bold",
-                style: {
-                    color: fpsColor
-                },
-                children: Math.round(metrics.fps)
-            }) ]
-        }), jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "Frame Time"
-            }), jsxs("span", {
-                className: "u-font-bold",
-                children: [ metrics.frameTime.toFixed(2), "ms" ]
-            }) ]
-        }), jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "Quality"
-            }), jsx("span", {
-                className: "u-font-bold u-text-uppercase",
-                style: {
-                    fontSize: "0.6875rem",
-                    // 11px
-                    color: getQualityColor(metrics.qualityLevel)
-                },
-                children: metrics.qualityLevel
-            }) ]
-        }), metrics.gpuMemory && jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "GPU Memory"
-            }), jsxs("span", {
-                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: {
-                fontSize: "0.625rem",
-                // 10px
-                color: "#6b7280"
-            },
-            children: "Auto-scaling active"
-        }), jsxs("div", {
-            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: "0.5rem",
-                    height: "0.5rem",
-                    flexShrink: 0,
-                    backgroundColor: fpsColor,
-                    ...isCritical && {
-                        animation: "perf-dashboard-pulse 1s infinite"
-                    }
-                }
-            }), jsx("span", {
-                className: "u-text-xs",
-                style: {
-                    fontSize: "0.625rem",
-                    // 10px
-                    color: fpsColor
-                },
-                children: getFpsLabel(metrics.fps)
-            }) ]
-        }) ]
-    });
-}));
-
-PerformanceDashboard.displayName = "PerformanceDashboard";
-
 /**
  * Mobile optimization presets
  *
@@ -2542,18 +2509,13 @@ const PERFORMANCE_PRESET = {
             saturation: 70
         }
     }
-}, 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({
+}, 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 = "", 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, border: border, withBorder: withBorder = !0, debugBorderRadius: debugBorderRadius = !1, 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 = useForkRef(ref, internalWrapperRef), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = (explicit = propsIsFixedOrSticky, 
+    position = restStyle.position, Boolean(explicit || "fixed" === position || "sticky" === position));
+    var explicit, position;
+    /**
+ * Extracts layout-related properties from a React `CSSProperties` object.
+ */    const {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, resolvedBorder: resolvedBorder} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         wrapperRef: internalWrapperRef,
@@ -2573,10 +2535,11 @@ const PERFORMANCE_PRESET = {
         blurAmount: blurAmount,
         saturation: saturation,
         withLiquidBlur: withLiquidBlur,
-        padding: padding,
+        border: border,
+        withBorder: withBorder,
+        debugBorderRadius: debugBorderRadius,
         style: style,
         isFixedOrSticky: isFixedOrSticky,
-        // Phase 1: Animation System props
         withTimeAnimation: withTimeAnimation,
         animationSpeed: animationSpeed,
         withMultiLayerDistortion: withMultiLayerDistortion,
@@ -2585,8 +2548,7 @@ const PERFORMANCE_PRESET = {
         distortionGain: distortionGain,
         distortionQuality: distortionQuality
     });
-    // Responsive breakpoint system - automatically adjusts parameters based on viewport
-    !
+    (
     /**
  * Responsive Glass Parameters Hook
  *
@@ -2744,7 +2706,7 @@ const PERFORMANCE_PRESET = {
     }
     /**
  * Get GPU memory info if available (Chrome DevTools only)
- */ ({
+ */)({
         baseParams: {
             ...useMemo((() => 
             /**
@@ -2778,9 +2740,7 @@ const PERFORMANCE_PRESET = {
         breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
         enabled: !disableResponsiveBreakpoints && "undefined" != typeof window,
         debug: !1
-    });
-    // Performance monitoring - tracks FPS, frame time, memory usage
-    const {metrics: performanceMetrics, toggleMonitoring: toggleMonitoring} = 
+    }), 
     /**
  * Performance Monitor Hook
  *
@@ -2815,7 +2775,13 @@ const PERFORMANCE_PRESET = {
             timestamp: 0,
             isAutoScaling: !0,
             lowFpsCount: 0
-        }), [manualOverride, setManualOverride] = useState(!1), [isEnabled, setIsEnabled] = useState(enabled), frameCountRef = useRef(0), lastFpsUpdateRef = useRef(0), lastFrameTimeRef = useRef(0), animationFrameRef = useRef(null), lowFpsCountRef = useRef(0), highFpsCountRef = useRef(0), qualityLevelRef = useRef("medium"), updateMetrics = useCallback((newMetrics => {
+        }), [manualOverride, setManualOverride] = useState(!1), [isEnabled, setIsEnabled] = useState(enabled);
+        // Sync external `enabled` prop changes into internal state
+        useEffect((() => {
+            setIsEnabled(enabled ?? !0);
+        }), [ enabled ]);
+        // Refs for frame tracking
+        const frameCountRef = useRef(0), lastFpsUpdateRef = useRef(0), lastFrameTimeRef = useRef(0), animationFrameRef = useRef(null), lowFpsCountRef = useRef(0), highFpsCountRef = useRef(0), qualityLevelRef = useRef("medium"), updateMetrics = useCallback((newMetrics => {
             setMetrics((prev => ({
                 ...prev,
                 ...newMetrics,
@@ -2935,191 +2901,214 @@ const PERFORMANCE_PRESET = {
         /**
    * Reset to auto-scaling mode
    */        var fps, currentQuality;
-        return {
-            metrics: metrics,
-            recommendedQuality: (fps = metrics.fps, currentQuality = metrics.qualityLevel, fps >= 58 ? "high" : fps >= 45 ? "high" === currentQuality ? "high" : "medium" : "low"),
-            isUnderperforming: metrics.fps < minFps,
-            setQualityLevel: setQualityLevel,
-            resetAutoScaling: resetAutoScaling,
-            toggleMonitoring: toggleMonitoring
-        };
+        fps = metrics.fps, currentQuality = metrics.qualityLevel, metrics.fps;
     }({
         enabled: debugPerformance,
-        // Enable when debugPerformance is true
         debug: !1,
         showOverlay: !1
     });
-    // Auto-start performance monitoring when debugPerformance is enabled
-        React.useEffect((() => {
-        debugPerformance && toggleMonitoring();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        }), [ 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;
-        return {
-            ...p && {
-                position: p
-            },
-            ...void 0 !== t && {
-                top: t
-            },
-            ...void 0 !== l && {
-                left: l
-            },
-            ...void 0 !== r && {
-                right: r
-            },
-            ...void 0 !== b && {
-                bottom: b
-            }
-        };
-    }), [ isFixedOrSticky, restStyle ]);
-    // Calculate base style with transforms
-    // When layout is hoisted to the root, strip those props from the container
-    useMemo((() => {
-        if (isFixedOrSticky) {
-            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
-            return {
-                ...visualStyle
-            };
+    const isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, containerStyle = useMemo((() => ({
+        ...restStyle,
+        ...void 0 !== customZIndex && {
+            zIndex: customZIndex
         }
+    })), [ restStyle, customZIndex ]), componentClassName = mergeClassNames(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), positionStyles = useMemo((() => 
+    /**
+ * Returns the internal positioning context for effect layers relative to the root.
+ */
+    function(isFixedOrSticky, restStyle) {
         return {
-            ...restStyle
+            position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
+            top: 0,
+            left: 0,
+            right: "auto",
+            bottom: "auto"
         };
-    }), [ 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 ? 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 && isFixedOrSticky ? "number" == typeof value ? `${value}px` : value : measured > 0 && isFixedOrSticky ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
+    }
+    /**
+ * Computes `--atomix-glass-width` and `--atomix-glass-height` values.
+ *
+ * Fixed/sticky elements prefer explicit dimensions or measured size; in-flow
+ * elements default to `100%`.
+ */ (isFixedOrSticky, restStyle)), [ isFixedOrSticky, restStyle ]), adjustedSize = useMemo((() => function(options) {
+        const {width: width, height: height, restStyle: restStyle, glassSize: glassSize, isFixedOrSticky: isFixedOrSticky} = options, 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, 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,
-            borderStop1: Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER),
-            borderStop2: Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER),
-            borderOpacities: [ GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH ],
-            hoverPositions: {
-                hover1: {
-                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
-                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
-                },
-                hover2: {
-                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
-                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
-                },
-                hover3: {
-                    x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
-                    y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
-                }
-            },
-            basePosition: {
-                x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
-                y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
-            },
-            mx: mx,
-            my: my,
-            absMx: absMx,
-            absMy: absMy
-        };
-    }), [ 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;
+    }
+    /**
+ * Builds the CSS custom properties applied to the root `.c-atomix-glass` element.
+ *
+ * These variables drive layer geometry, transforms, and stacking offsets. They
+ * must not include layout properties that would interfere with backdrop-filter.
+ */ ({
+        width: width,
+        height: height,
+        restStyle: restStyle,
+        glassSize: glassSize,
+        isFixedOrSticky: isFixedOrSticky
+    })), [ width, height, restStyle, glassSize, isFixedOrSticky ]), glassVars = useMemo((() => function(input) {
+        const {effectiveBorderRadius: effectiveBorderRadius, transformStyle: transformStyle, adjustedSize: adjustedSize, isOverLight: isOverLight, customZIndex: customZIndex, isFixedOrSticky: isFixedOrSticky, positionStyles: positionStyles, restStyle: restStyle, borderWidth: borderWidth = ATOMIX_GLASS.BORDER.DEFAULT_WIDTH} = input, layerPosition = 
+        /**
+ * Resolves the `--atomix-glass-position` value for decorative layers.
+ *
+ * Fixed/sticky layers use the same positioning mode as the container; in-flow
+ * layers default to the internal absolute positioning context.
+ */
+        function(isFixedOrSticky, positionStyles, restStyle) {
+            return isFixedOrSticky ? `${function(style) {
+                const {position: position, top: top, left: left, right: right, bottom: bottom, inset: inset} = style;
+                return {
+                    ...null != position && {
+                        position: position
+                    },
+                    ...void 0 !== top && {
+                        top: top
+                    },
+                    ...void 0 !== left && {
+                        left: left
+                    },
+                    ...void 0 !== right && {
+                        right: right
+                    },
+                    ...void 0 !== bottom && {
+                        bottom: bottom
+                    },
+                    ...void 0 !== inset && {
+                        inset: inset
+                    }
+                };
+            }
+            /**
+ * Resolves inset custom properties for decorative layers (hover, borders, backgrounds).
+ *
+ * For fixed and sticky modes, insets mirror the container so sibling layers remain
+ * aligned. In-flow modes, insets follow the consumer `style` when a non-default
+ * `position` is provided.
+ */ (restStyle).position ?? restStyle.position ?? "fixed"}` : `${positionStyles.position}`;
+        }(isFixedOrSticky, positionStyles, restStyle), layerInsets = function(isFixedOrSticky, restStyle) {
+            if (isFixedOrSticky) return {
+                top: formatGlassInsetValue(restStyle.top, 0),
+                left: formatGlassInsetValue(restStyle.left, 0),
+                right: formatGlassInsetValue(restStyle.right, "auto"),
+                bottom: formatGlassInsetValue(restStyle.bottom, "auto")
+            };
+            const position = restStyle.position;
+            return null != position && "static" !== position && "relative" !== position ? {
+                top: formatGlassInsetValue(restStyle.top, 0),
+                left: formatGlassInsetValue(restStyle.left, 0),
+                right: formatGlassInsetValue(restStyle.right, "auto"),
+                bottom: formatGlassInsetValue(restStyle.bottom, "auto")
+            } : {
+                top: "0px",
+                left: "0px",
+                right: "auto",
+                bottom: "auto"
+            };
+        }(isFixedOrSticky, restStyle);
         return {
             ...void 0 !== customZIndex && {
                 "--atomix-glass-base-z-index": customZIndex
             },
             "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
-            "--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-container-position": layerPosition,
+            "--atomix-glass-position": layerPosition,
+            "--atomix-glass-top": layerInsets.top,
+            "--atomix-glass-left": layerInsets.left,
+            "--atomix-glass-right": layerInsets.right,
+            "--atomix-glass-bottom": layerInsets.bottom,
             "--atomix-glass-width": adjustedSize.width,
             "--atomix-glass-height": adjustedSize.height,
-            "--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) * 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,
-            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
-            "--atomix-glass-hover-3-opacity": opacityValues.hover3,
-            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
-            "--atomix-glass-base-opacity": opacityValues.base,
-            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
-            "--atomix-glass-overlay-opacity": opacityValues.over,
-            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
-            "--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}%)`
+            // Aliases maintained for backward compatibility and consumer overrides.
+            "--atomix-glass-container-width": adjustedSize.width,
+            "--atomix-glass-container-height": adjustedSize.height,
+            [ATOMIX_GLASS.BORDER.WIDTH_CSS_VAR]: borderWidth,
+            "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay"
         };
-    }), [ 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(" ")
+    }
+    /**
+ * Applies mode-specific multipliers and accessibility overrides to container effects.
+ */ ({
+        effectiveBorderRadius: effectiveBorderRadius,
+        transformStyle: transformStyle,
+        adjustedSize: adjustedSize,
+        isOverLight: isOverLight,
+        customZIndex: customZIndex,
+        isFixedOrSticky: isFixedOrSticky,
+        positionStyles: positionStyles,
+        restStyle: restStyle,
+        borderWidth: resolvedBorder.width
+    })), [ effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, customZIndex, isFixedOrSticky, positionStyles, restStyle, resolvedBorder.width ]), containerEffects = useMemo((() => function(options) {
+        const {MULTIPLIERS: MULTIPLIERS, SATURATION: SATURATION} = ATOMIX_GLASS.CONSTANTS, zeroMouse = {
+            x: 0,
+            y: 0
+        }, resolveSaturation = () => options.effectiveHighContrast ? SATURATION.HIGH_CONTRAST : options.isOverLight ? options.saturation * options.saturationBoost : options.saturation;
+        if (options.effectiveWithoutEffects) return {
+            displacementScale: 0,
+            blurAmount: 0,
+            saturation: resolveSaturation(),
+            aberrationIntensity: 0,
+            mouseOffset: zeroMouse,
+            globalMousePosition: zeroMouse
+        };
+        let resolvedDisplacement = options.displacementScale;
+        "shader" === options.mode ? resolvedDisplacement *= MULTIPLIERS.SHADER_DISPLACEMENT : options.isOverLight && (resolvedDisplacement *= MULTIPLIERS.OVER_LIGHT_DISPLACEMENT);
+        let resolvedAberration = options.aberrationIntensity;
+        return "shader" === options.mode && (resolvedAberration *= MULTIPLIERS.SHADER_ABERRATION), 
+        {
+            displacementScale: resolvedDisplacement,
+            blurAmount: options.blurAmount,
+            saturation: resolveSaturation(),
+            aberrationIntensity: resolvedAberration,
+            mouseOffset: options.mouseOffset,
+            globalMousePosition: options.globalMousePosition
+        };
+    }({
+        displacementScale: displacementScale,
+        blurAmount: blurAmount,
+        saturation: saturation,
+        aberrationIntensity: aberrationIntensity,
+        mode: mode,
+        effectiveWithoutEffects: effectiveWithoutEffects,
+        effectiveHighContrast: effectiveHighContrast,
+        isOverLight: isOverLight,
+        saturationBoost: overLightConfig.saturationBoost,
+        mouseOffset: mouseOffset,
+        globalMousePosition: globalMousePosition
+    })), [ displacementScale, blurAmount, saturation, aberrationIntensity, mode, effectiveWithoutEffects, effectiveHighContrast, isOverLight, overLightConfig.saturationBoost, mouseOffset, globalMousePosition ]), renderBackgroundLayer = layerType => jsx("div", {
+        "aria-hidden": "true",
+        className: mergeClassNames(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)
     });
-    // Calculate position and size styles for internal layers
-    // When root is fixed/sticky, internal layers use absolute (relative to root)
-        return jsxs("div", {
+    return jsxs("div", {
         ...rest,
         ref: mergedRef,
         className: componentClassName,
-        style: {
-            ...glassVars
-        },
+        style: glassVars,
         role: role || (onClick ? "button" : void 0),
         tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
-        "aria-pressed": onClick ? isActive : void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsx(AtomixGlassContainer, {
             ref: glassRef,
             contentRef: contentRef,
             className: className,
-            style: {
-                ...restStyle
-            },
+            style: containerStyle,
             borderRadius: effectiveBorderRadius,
-            displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
-            blurAmount: effectiveWithoutEffects ? 0 : blurAmount,
-            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
-            aberrationIntensity: effectiveWithoutEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
+            displacementScale: containerEffects.displacementScale,
+            blurAmount: containerEffects.blurAmount,
+            saturation: containerEffects.saturation,
+            aberrationIntensity: containerEffects.aberrationIntensity,
             glassSize: glassSize,
-            padding: padding,
-            mouseOffset: effectiveWithoutEffects ? {
-                x: 0,
-                y: 0
-            } : mouseOffset,
-            globalMousePosition: effectiveWithoutEffects ? {
-                x: 0,
-                y: 0
-            } : globalMousePosition,
+            mouseOffset: containerEffects.mouseOffset,
+            globalMousePosition: containerEffects.globalMousePosition,
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             onMouseDown: handleMouseDown,
             onMouseUp: handleMouseUp,
-            isHovered: isHovered,
             isActive: isActive,
             overLight: isOverLight,
             overLightConfig: {
@@ -3135,7 +3124,6 @@ const PERFORMANCE_PRESET = {
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
             isFixedOrSticky: isFixedOrSticky,
-            // Phase 1: Animation System props
             shaderTime: getShaderTime(),
             withTimeAnimation: withTimeAnimation,
             animationSpeed: animationSpeed,
@@ -3147,32 +3135,39 @@ const PERFORMANCE_PRESET = {
             children: children
         }), Boolean(onClick) && jsxs(Fragment, {
             children: [ jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_1_CLASS
             }), jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_2_CLASS
             }), jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_3_CLASS
             }) ]
-        }), renderBackgroundLayer("dark"), renderBackgroundLayer("black"), shouldRenderOverLightLayers && jsxs(Fragment, {
+        }), [ "dark", "black" ].map((layerType => jsx(React.Fragment, {
+            children: renderBackgroundLayer(layerType)
+        }, layerType))), shouldRenderOverLightLayers && jsxs(Fragment, {
             children: [ jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BASE_LAYER_CLASS
             }), jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS
             }), jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS
             }) ]
-        }), withBorder && jsxs(Fragment, {
+        }), resolvedBorder.enabled && jsxs(Fragment, {
             children: [ jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_BACKDROP_CLASS
             }), jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
-        }), debugPerformance && performanceMetrics && jsx(PerformanceDashboard, {
-            metrics: performanceMetrics,
-            isVisible: !0,
-            onClose: () => {}
         }) ]
     });
 }));
@@ -3182,10 +3177,7 @@ const PERFORMANCE_PRESET = {
  * 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.
- */
+/** Memoized public export. Ref targets the root `.c-atomix-glass` wrapper. */
 const AtomixGlass =  memo(AtomixGlassInner), DefaultIcon = () => jsx("i", {
     className: "c-accordion__icon",
     "aria-hidden": "true",
@@ -3364,10 +3356,7 @@ const AccordionImpl =  memo((({title: title, children: children, defaultOpen: de
     });
     if (glass) {
         // Default glass settings for accordions
-        const defaultGlassProps = {
-            displacementScale: 20,
-            elasticity: 0
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS_ACCORDION, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -3444,10 +3433,10 @@ const Accordion = AccordionWithSubcomponents, Badge =  memo((({label: label, var
     if (glass) {
         // Default glass settings for badges
         const defaultGlassProps = {
-            displacementScale: 20,
-            borderRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
-            className: "c-badge--glass",
-            elasticity: 0
+            ...GLASS_DEFAULTS_BADGE,
+            // Override borderRadius dynamically if the ref is available
+            borderRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : GLASS_DEFAULTS_BADGE.borderRadius,
+            className: "c-badge--glass"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
@@ -3697,12 +3686,7 @@ const Spinner =  memo( forwardRef((({size: size = "md", variant: variant = "prim
         })
     });
     if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 1,
-            borderRadius: 999,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS_SPINNER, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -3982,11 +3966,7 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
     // This is a safe fallback for disabled links.
         if (glass) {
         // Default glass props
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 0,
-            saturation: 200
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS_BUTTON, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -4426,11 +4406,7 @@ const Callout =  memo((({title: title, children: children, icon: icon, variant:
     // Determine appropriate ARIA attributes based on variant
         if (glass) {
         // Default glass settings for callouts
-        const defaultGlassProps = {
-            displacementScale: 30,
-            borderRadius: 8,
-            elasticity: 0
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS_CALLOUT, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };