@shohojdhara/atomix 0.6.4 → 0.6.6

package/dist/charts.js

@@ -462,6 +462,44 @@ const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
         POSITIONS: [ "top", "bottom", "left", "right" ],
         ACTION_VARIANTS: [ "primary", "secondary", "success", "info", "warning", "error" ]
     }
+}, 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",
@@ -473,6 +511,22 @@ const _reduceInstanceProperty =  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",
@@ -501,25 +555,22 @@ const _reduceInstanceProperty =  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,
@@ -535,19 +586,29 @@ const _reduceInstanceProperty =  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,
+        // Interaction intensity multipliers shared by the hook and the imperative style updater
+        INTERACTION: {
+            HOVER_INTENSITY: 1.4,
+            ACTIVE_INTENSITY: 1.6
+        },
+        // 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
@@ -561,55 +622,16 @@ const _reduceInstanceProperty =  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: {
@@ -642,8 +664,8 @@ const _reduceInstanceProperty =  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;
                 }
@@ -661,8 +683,8 @@ const _reduceInstanceProperty =  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;
                 }
@@ -680,8 +702,8 @@ const _reduceInstanceProperty =  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;
                 }
@@ -691,13 +713,13 @@ const _reduceInstanceProperty =  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;
@@ -718,7 +740,7 @@ const _reduceInstanceProperty =  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;
@@ -742,14 +764,14 @@ const _reduceInstanceProperty =  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;
             },
@@ -770,6 +792,10 @@ const _reduceInstanceProperty =  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 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08)"
+        },
         // Phase 1: Animation System Constants
         ANIMATION: {
             // Breathing effect timing (in milliseconds)
@@ -1664,9 +1690,38 @@ const ChartToolbar =  memo( forwardRef((({chartType: chartType = "line", groups:
     });
 })));
 
+/**
+ * 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 ]);
+}
+
 ChartToolbar.displayName = "ChartToolbar";
 
-const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
+const {CONSTANTS: CONSTANTS$3} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
     x: rect.left + rect.width / 2,
     y: rect.top + rect.height / 2
 } : {
@@ -1674,37 +1729,37 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect =>
     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)
@@ -1720,11 +1775,11 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect =>
     // 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++) {
@@ -1737,17 +1792,78 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect =>
     } 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);
-}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
+}, lerp = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), clamp = (value, min, max) => "number" != typeof value || isNaN(value) ? min : Math.max(min, Math.min(max, value)), smoothstepEdge = (edge0, edge1, x) => "number" != typeof edge0 || "number" != typeof edge1 || "number" != typeof x ? 0 : smoothstep((x - edge0) / (edge1 - edge0)), easeInOutCubic = t => {
+    if ("number" != typeof t || isNaN(t)) return 0;
+    const clamped = Math.max(0, Math.min(1, t));
+    return clamped < .5 ? 4 * clamped * clamped * clamped : 1 - Math.pow(-2 * clamped + 2, 3) / 2;
+}, easeOutQuart = t => {
+    if ("number" != typeof t || isNaN(t)) return 0;
+    const clamped = Math.max(0, Math.min(1, t));
+    return 1 - Math.pow(1 - clamped, 4);
+}, vec2Length = (x, y) => {
+    if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
+    const maxComponent = Math.max(Math.abs(x), Math.abs(y));
+    if (0 === maxComponent) return 0;
+    const scaledX = x / maxComponent, scaledY = y / maxComponent;
+    return maxComponent * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
+}, getInteractionIntensity = (isHovered, isActive) => ({
+    hoverIntensity: isHovered ? CONSTANTS$3.INTERACTION.HOVER_INTENSITY : 1,
+    activeIntensity: isActive ? CONSTANTS$3.INTERACTION.ACTIVE_INTENSITY : 1
+})
+/**
+ * Spring-damper integration helper
+ * Calculates the next value based on velocity, stiffness, and damping.
+ */ , calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
     const newVelocity = (velocity + (target - current) * stiffness) * damping;
     return {
         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;
@@ -1764,13 +1880,28 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect =>
       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", {
@@ -1824,43 +1955,21 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect =>
                 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",
@@ -1901,21 +2010,22 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect =>
 });
 
 /**
- * Calculate distance between two points
+ * 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, 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 ? 
@@ -1993,15 +2103,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) {
@@ -2025,88 +2143,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
@@ -2124,8 +2175,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,
@@ -2147,8 +2198,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 
@@ -2263,28 +2318,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: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), 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
@@ -2301,28 +2360,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()), 
@@ -2359,151 +2445,16 @@ 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 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10)");
     }
-};
-
-/**
- * Updates the styles of the AtomixGlass wrapper and container elements imperatively
- * to avoid React re-renders on mouse movement.
- */
-/**
- * Animation System for AtomixGlass Component
- *
- * Implements Phase 1 features from the AtomixGlass Feature Implementation Roadmap:
- * - Feature 1.1: Time-Based Animation System
- * - Feature 1.2: Multi-Layer Distortion System (FBM)
- *
- * @packageDocumentation
- */
-// ============================================================================
-// Noise Functions for FBM (Feature 1.2)
-// ============================================================================
-/**
- * Perlin noise implementation for smooth gradient noise
- *
- * @param x - X coordinate
- * @param y - Y coordinate
- * @returns Noise value in range [0, 1]
- */
-function perlinNoise(x, y) {
-    // Simplified Perlin noise using pseudo-random gradients
-    const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = fade(xf), v = fade(yf), A = p[X] + Y & 255, B = p[X + 1] + Y & 255, ga = grad(p[A], xf, yf), gb = grad(p[B], xf - 1, yf), gc = grad(p[A + 1 & 255], xf, yf - 1), gd = grad(p[B + 1 & 255], xf - 1, yf - 1), lerpX1 = lerp(ga, gb, u), lerpX2 = lerp(gc, gd, u);
-    // Scale to [0, 1] range
-    return (lerp(lerpX1, lerpX2, v) + 1) / 2;
-}
-
-// ============================================================================
-// Fractal Brownian Motion (FBM) Engine (Feature 1.2)
-// ============================================================================
-/**
- * Creates an FBM engine with configurable parameters
- *
- * @param config - FBM configuration (octaves, lacunarity, gain)
- * @returns Object with fbm function
- *
- * @example
- * ```typescript
- * const fbmEngine = createFBMEngine({ octaves: 5, lacunarity: 2, gain: 0.5 });
- *
- * // Generate noise at position (0.5, 0.5) with time animation
- * const noiseValue = fbmEngine.fbm(0.5, 0.5, Date.now());
- * ```
- */ function createFBMEngine(config) {
-    /**
-   * Fractal Brownian Motion function
-   * Combines multiple octaves of noise for complex, natural patterns
-   *
-   * @param x - X coordinate
-   * @param y - Y coordinate
-   * @param time - Optional time value for animation
-   * @returns FBM noise value in range [0, 1]
-   */
-    const fbm = (x, y, time = 0) => {
-        let value = 0, amplitude = .5, frequency = 1, phase = .001 * time;
-        // Convert to seconds for reasonable animation speed
-        for (let i = 0; i < config.octaves; i++) 
-        // Apply time-based phase shift to all octaves
-        value += perlinNoise(x * frequency + phase, y * frequency + phase) * amplitude, 
-        frequency *= config.lacunarity, // Increase frequency
-        amplitude *= config.gain;
-        return value;
-    };
-    /**
-   * Get FBM with simple time factor
-   */    return {
-        fbm: fbm,
-        fbmWithTime: (x, y, time) => fbm(x, y, time)
-    };
-}
-
-/**
- * Gets optimal FBM config based on quality preset
- *
- * @param quality - Quality preset level
- * @returns FBM configuration for the quality level
- */ const fbmEngineCache = new Map;
-
-// ============================================================================
-// Shader Utility Functions for Time-Based Effects
-// ============================================================================
-/**
- * Liquid glass distortion with time-based animation
- * Uses FBM to create organic, flowing liquid effects
- *
- * @param uv - UV coordinates (normalized 0-1)
- * @param time - Elapsed time in milliseconds
- * @param config - FBM configuration
- * @returns Distorted UV coordinates
- */ function liquidGlassWithTime(uv, time, config) {
-    const configKey = `${config.octaves}-${config.lacunarity}-${config.gain}`;
-    let fbmEngine = fbmEngineCache.get(configKey);
-    fbmEngine || (fbmEngine = createFBMEngine(config), fbmEngineCache.set(configKey, fbmEngine));
-    // Animate noise with time
-        const animatedNoise = fbmEngine.fbmWithTime(2 * uv.x + 1e-4 * time, 2 * uv.y + 15e-5 * time, time);
-    return {
-        x: uv.x + .04 * (animatedNoise - .5),
-        y: uv.y + .04 * (animatedNoise - .5)
-    };
-}
-
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Fade curve for smooth interpolation (Perlin's fade function)
- */ function fade(t) {
-    return t * t * t * (t * (6 * t - 15) + 10);
-}
-
-/**
- * Linear interpolation
- */ function lerp(a, b, t) {
-    return a + t * (b - a);
-}
-
-/**
- * Gradient calculation for Perlin noise
- */ function grad(hash, x, y) {
-    const h = 15 & hash, u = h < 8 ? x : y, v = h < 4 ? y : 12 === h || 14 === h ? x : 0;
-    return (1 & h ? -u : u) + (2 & h ? -v : v);
-}
-
-/**
- * Permutation table for Perlin noise
- */ const p = (() => {
-    const permutation = [];
-    for (let i = 0; i < 256; i++) permutation[i] = Math.floor(256 * Math.random());
-    // Duplicate for overflow handling
-        return [ ...permutation, ...permutation ];
-})(), {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
 
 const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
@@ -2518,12 +2469,35 @@ 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: 
-// 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}) {
+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}) {
     // 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({
@@ -2547,52 +2521,10 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
     }), scaleVelocityRef = useRef({
         x: 0,
         y: 0
-    });
-    useRef(0);
-    const mouseVelocityRef = useRef({
+    }), mouseVelocityRef = useRef({
         x: 0,
         y: 0
-    }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = useMemo((() => {
-        // If quality preset is provided, use it as base
-        const preset = (quality = distortionQuality, ATOMIX_GLASS.CONSTANTS.DISTORTION_QUALITY_PRESETS[quality]);
-        // Override with custom values if provided
-                var quality;
-        return {
-            octaves: distortionOctaves ?? preset.octaves,
-            lacunarity: distortionLacunarity ?? preset.lacunarity,
-            gain: distortionGain ?? preset.gain
-        };
-    }), [ distortionQuality, distortionOctaves, distortionLacunarity, distortionGain ]), fbmEngine = useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
-    /**
-   * Animation loop for time-based effects
-   */
-    useEffect((() => {
-        if (!effectiveWithTimeAnimation || "undefined" == typeof window) return;
-        let lastFrameTime = performance.now();
-        /**
-     * Animation frame handler
-     */        const animate = currentTime => {
-            // Calculate delta time
-            const deltaTime = currentTime - lastFrameTime;
-            lastFrameTime = currentTime;
-            // Apply animation speed multiplier
-            const scaledDelta = deltaTime * animationSpeed;
-            elapsedTimeRef.current += scaledDelta, shaderTimeRef.current = elapsedTimeRef.current, 
-            // Continue animation loop
-            animationFrameIdRef.current = requestAnimationFrame(animate);
-        };
-        // Start animation
-                // Cleanup
-        return animationStartTimeRef.current = performance.now(), animationFrameIdRef.current = requestAnimationFrame(animate), 
-        () => {
-            null !== animationFrameIdRef.current && (cancelAnimationFrame(animationFrameIdRef.current), 
-            animationFrameIdRef.current = null);
-        };
-    }), [ effectiveWithTimeAnimation, animationSpeed ]);
-    /**
-   * Get current shader time for animations
-   */
-    const getShaderTime = useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = useState({
             width: 270,
             height: 69
@@ -2652,9 +2584,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         effectiveBorderRadius: effectiveBorderRadius,
         cachedRectRef: cachedRectRef
     }), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
-    /**
-   * Apply time-based distortion to UV coordinates
-   */    
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
@@ -2814,25 +2743,26 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
    * Get effective overLight value based on configuration
    */
     const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = useMemo((() => {
-        const isOverLight = getEffectiveOverLight(), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
+        const isOverLight = getEffectiveOverLight(), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), baseConfig = {
             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;
         }
@@ -2857,8 +2787,8 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             };
             const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
             internalGlobalMousePositionRef.current = {
-                x: lerp$1(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
-                y: lerp$1(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
+                x: lerp(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
+                y: lerp(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
             };
             // ── Calculate Elastic Physics ─────────────────────────────────────
             let targetElasticTranslation = {
@@ -2930,12 +2860,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;
@@ -2999,9 +2930,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());
@@ -3021,9 +2953,8 @@ 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,
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -3171,148 +3102,6 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
 /**
  * Get GPU memory info if available (Chrome DevTools only)
  */
-/** Map an FPS value to a semantic color token string. */
-const getQualityColor = quality => {
-    switch (quality) {
-      case "high":
-        return "var(--atomix-color-success, #4ade80)";
-
-      case "medium":
-        return "var(--atomix-color-warning, #fbbf24)";
-
-      case "low":
-        return "var(--atomix-color-danger, #ef4444)";
-
-      default:
-        return "#9ca3af";
-    }
-}, getFpsLabel = fps => fps >= 58 ? "Optimal" : fps >= 45 ? "Warning" : "Critical";
-
-/** Map a quality level string to a semantic color token string. */
-// Inject keyframes once
-if ("undefined" != typeof document) {
-    const styleId = "perf-dashboard-keyframes";
-    if (!document.getElementById(styleId)) {
-        const styleEl = document.createElement("style");
-        styleEl.id = styleId, styleEl.textContent = "\n@keyframes perf-dashboard-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n", 
-        document.head.appendChild(styleEl);
-    }
-}
-
-/**
- * PerformanceDashboard - Real-time performance monitoring overlay.
- *
- * 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
  *
@@ -3432,18 +3221,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, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown, resolvedBorder: resolvedBorder} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         wrapperRef: internalWrapperRef,
@@ -3463,20 +3247,13 @@ 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,
-        distortionOctaves: distortionOctaves,
-        distortionLacunarity: distortionLacunarity,
-        distortionGain: distortionGain,
-        distortionQuality: distortionQuality
+        isFixedOrSticky: isFixedOrSticky
     });
-    // Responsive breakpoint system - automatically adjusts parameters based on viewport
-    !
+    (
     /**
  * Responsive Glass Parameters Hook
  *
@@ -3631,7 +3408,7 @@ const PERFORMANCE_PRESET = {
                 }), [ enabled ]), useCallback((() => {
             calculateParams();
         }), [ calculateParams ]);
-    }({
+    })({
         baseParams: {
             ...useMemo((() => 
             /**
@@ -3665,9 +3442,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
  *
@@ -3702,7 +3477,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,
@@ -3822,191 +3603,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: {
@@ -4022,8 +3826,6 @@ const PERFORMANCE_PRESET = {
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
             isFixedOrSticky: isFixedOrSticky,
-            // Phase 1: Animation System props
-            shaderTime: getShaderTime(),
             withTimeAnimation: withTimeAnimation,
             animationSpeed: animationSpeed,
             withMultiLayerDistortion: withMultiLayerDistortion,
@@ -4034,32 +3836,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: () => {}
         }) ]
     });
 }));
@@ -4069,10 +3878,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), ChartContext =  createContext(null), Chart =  memo( forwardRef((({children: children, type: type = "line", size: size = "md", variant: variant = "primary", title: title, subtitle: subtitle, loading: loading = !1, error: error, className: className = "", "aria-label": ariaLabel, onFullscreen: onFullscreen, onExport: onExport, onRefresh: onRefresh, showToolbar: showToolbar = !1, enableFullscreen: enableFullscreen = !1, enableExport: enableExport = !1, enableRefresh: enableRefresh = !1, exportFormats: exportFormats = [ "png", "svg", "csv" ], datasets: datasets, config: config, 
 // Destructure non-DOM props to prevent passing to DOM element
 toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, customToolbarGroups: customToolbarGroups, data: data, showLegend: showLegend, interactive: interactive, fullscreen: fullscreen, onDataPointClick: onDataPointClick, onLegendItemClick: onLegendItemClick, glass: glass, ...props}, ref) => {
@@ -7388,40 +7194,15 @@ WaterfallChart.displayName = "WaterfallChart";
 
 // Adapted from https://github.com/shuding/liquid-glass
 // Constants
-const smoothStep = (a, b, t) => {
-    // Add input validation
-    if ("number" != typeof a || "number" != typeof b || "number" != typeof t) return 0;
-    const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
-    return clamped * clamped * (3 - 2 * clamped);
-}, calculateLength = (x, y) => {
-    // Add input validation and error handling
-    if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
-    // Prevent potential overflow
-        const maxX = Math.max(Math.abs(x), Math.abs(y));
-    if (0 === maxX) return 0;
-    const scaledX = x / maxX, scaledY = y / maxX;
-    return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
-}, roundedRectSDF = (x, y, width, height, radius) => {
+const roundedRectSDF = (x, y, width, height, radius) => {
     // Add input validation
     if ("number" != typeof x || "number" != typeof y || "number" != typeof width || "number" != typeof height || "number" != typeof radius) return 0;
     const qx = Math.abs(x) - width + radius, qy = Math.abs(y) - height + radius;
-    return Math.min(Math.max(qx, qy), 0) + calculateLength(Math.max(qx, 0), Math.max(qy, 0)) - radius;
+    return Math.min(Math.max(qx, qy), 0) + vec2Length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
 }, createTexture = (x, y) => ({
     x: "number" != typeof x || isNaN(x) ? .5 : Math.max(0, Math.min(1, x)),
     y: "number" != typeof y || isNaN(y) ? .5 : Math.max(0, Math.min(1, y))
-}), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), clampValue = (value, min, max) => 
-// Add input validation
-"number" != typeof value || "number" != typeof min || "number" != typeof max || isNaN(value) ? min : isNaN(min) ? 0 : isNaN(max) ? 1 : Math.max(min, Math.min(max, value)), easeInOutCubic = t => {
-    // Add input validation
-    if ("number" != typeof t || isNaN(t)) return 0;
-    const clampedT = Math.max(0, Math.min(1, t));
-    return clampedT < .5 ? 4 * clampedT * clampedT * clampedT : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
-}, easeOutQuart = t => {
-    // Add input validation
-    if ("number" != typeof t || isNaN(t)) return 0;
-    const clampedT = Math.max(0, Math.min(1, t));
-    return 1 - Math.pow(1 - clampedT, 4);
-}, noise2D = (x, y) => {
+}), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), noise2D = (x, y) => {
     // Add input validation
     if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
     const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = easeInOutCubic(xf), v = easeInOutCubic(yf), hash = (i, j) => {
@@ -7460,13 +7241,13 @@ const smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothStep(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothstepEdge(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
             // Add input validation
             if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y) || isNaN(strength)) return {
                 x: 0,
                 y: 0
             };
-            const distance = calculateLength(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
+            const distance = vec2Length(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
             // Limit distance to prevent extreme values
             return {
                 x: x * (1 + distortion),
@@ -7478,7 +7259,7 @@ const smoothStep = (a, b, t) => {
                 x: 0,
                 y: 0
             };
-            const distance = calculateLength(x, y);
+            const distance = vec2Length(x, y);
             // Prevent division by zero and extreme values
                         if (0 === distance) return {
                 x: 0,
@@ -7489,8 +7270,8 @@ const smoothStep = (a, b, t) => {
                 x: Math.cos(angle) * distance * intensity,
                 y: Math.sin(angle) * distance * intensity
             };
-        })(ix, iy, .015 * baseDisplacement), scaled = smoothStep(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
-        return createTexture(clampValue(finalX * scaled + .5, 0, 1), clampValue(finalY * scaled + .5, 0, 1));
+        })(ix, iy, .015 * baseDisplacement), scaled = smoothstepEdge(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
+        return createTexture(clamp(finalX * scaled + .5, 0, 1), clamp(finalY * scaled + .5, 0, 1));
     },
     // Premium Apple-style fluid glass with enhanced organic flow
     appleFluid: (uv, mousePosition) => {
@@ -7498,8 +7279,8 @@ const smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothStep(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
-        return createTexture(clampValue(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clampValue(totalY + .5, 0, 1));
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothstepEdge(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
+        return createTexture(clamp(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clamp(totalY + .5, 0, 1));
     },
     // High-end glass with advanced refraction and depth
     premiumGlass: (uv, mousePosition) => {
@@ -7507,7 +7288,7 @@ const smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), centerDistance = calculateLength(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), centerDistance = vec2Length(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
         // Multi-layer depth effect
         let depthX = 0, depthY = 0;
         for (let layer = 0; layer < 3; layer++) {
@@ -7515,8 +7296,8 @@ const smoothStep = (a, b, t) => {
             depthX += Math.sin(ix * layerScale + layerTime) * layerStrength, depthY += Math.cos(iy * layerScale - layerTime) * layerStrength;
         }
         // Glass refraction with mouse influence
-                const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothStep(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
-        return createTexture(clampValue(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clampValue(finalY + .5, 0, 1));
+                const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothstepEdge(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
+        return createTexture(clamp(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clamp(finalY + .5, 0, 1));
     },
     // Metallic liquid effect with shimmer
     liquidMetal: (uv, mousePosition) => {
@@ -7524,8 +7305,8 @@ const smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = calculateLength(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothStep(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
-        return createTexture(clampValue(totalX + .5, 0, 1), clampValue(totalY + .5, 0, 1));
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = vec2Length(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothstepEdge(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
+        return createTexture(clamp(totalX + .5, 0, 1), clamp(totalY + .5, 0, 1));
     },
     // basiBasi - Expert Premium Glass Shader
     // The most advanced shader with caustics, spectral dispersion, parallax depth, and volumetric effects
@@ -7534,7 +7315,7 @@ const smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) => 
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) => 
         // Add input validation
         "number" != typeof x || "number" != typeof y || "number" != typeof time || "number" != typeof intensity || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(intensity) ? .5 : .5 * (Math.sin(8 * x + 2 * time) * Math.cos(8 * y - 2 * time) * .5 + Math.sin(8 * (x + .5) * 1.3 - 2 * time * .8) * Math.cos(8 * (y - .3) * 1.3 + 2 * time * .8) * .3 + Math.sin(8 * (x - .3) * .7 + 2 * time * 1.2) * Math.cos(8 * (y + .4) * .7 - 2 * time * 1.2) * .2 + 1) * intensity)(ix, iy, time, .8), causticDistortion = .02 * (causticIntensity - .5), refractionAngle = Math.atan2(iy, ix), spectralDispersion = ((x, y, angle) => {
             // Add input validation
@@ -7552,7 +7333,7 @@ const smoothStep = (a, b, t) => {
                     y: 0
                 }
             };
-            const distance = calculateLength(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
+            const distance = vec2Length(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
             return {
                 r: {
                     x: Math.cos(angle) * redOffset,
@@ -7592,8 +7373,8 @@ const smoothStep = (a, b, t) => {
             return turbulence;
         })(6 * ix, 6 * iy, time, 6), turbulenceX = .012 * Math.cos(turbulence * Math.PI * 2), turbulenceY = .012 * Math.sin(turbulence * Math.PI * 2), microSurface = ((x, y, time) => 
         // Add input validation
-        "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = calculateLength(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = calculateLength(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothStep(.92, -.12, distanceToEdge), edgeSoftness = smoothStep(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
-        return createTexture(clampValue(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clampValue(finalY + .5, 0, 1));
+        "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = vec2Length(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = vec2Length(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothstepEdge(.92, -.12, distanceToEdge), edgeSoftness = smoothstepEdge(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
+        return createTexture(clamp(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clamp(finalY + .5, 0, 1));
     },
     // Aliases for compatibility
     plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
@@ -7635,8 +7416,8 @@ const smoothStep = (a, b, t) => {
                     let dx = pos.x * w - x, dy = pos.y * h - y;
                     // Apply edge smoothing for Apple-like effect
                     const edgeX = 2 * Math.min(x / w, (w - x) / w), edgeY = 2 * Math.min(y / h, (h - y) / h), edgeFactor = Math.min(edgeX, edgeY);
-                    dx *= smoothStep(0, .2, edgeFactor), dy *= smoothStep(0, .2, edgeFactor), maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), 
-                    rawValues.push(dx, dy);
+                    dx *= smoothstepEdge(0, .2, edgeFactor), dy *= smoothstepEdge(0, .2, edgeFactor), 
+                    maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), rawValues.push(dx, dy);
                 }
                 // Improved normalization to prevent artifacts while maintaining intensity
                                 maxScale = Math.max(maxScale, 1);
@@ -7646,9 +7427,9 @@ const smoothStep = (a, b, t) => {
                 let rawIndex = 0;
                 for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
                     const dx = rawValues[rawIndex++] || 0, dy = rawValues[rawIndex++] || 0, edgeDistance = Math.min(x, y, w - x - 1, h - y - 1), edgeFactor = Math.min(1, edgeDistance / 2), r = dx * edgeFactor / maxScale + .5, g = dy * edgeFactor / maxScale + .5, pixelIndex = 4 * (y * w + x);
-                    data[pixelIndex] = clampValue(255 * r, 0, 255), // Red channel (X displacement)
-                    data[pixelIndex + 1] = clampValue(255 * g, 0, 255), // Green channel (Y displacement)
-                    data[pixelIndex + 2] = clampValue(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
+                    data[pixelIndex] = clamp(255 * r, 0, 255), // Red channel (X displacement)
+                    data[pixelIndex + 1] = clamp(255 * g, 0, 255), // Green channel (Y displacement)
+                    data[pixelIndex + 2] = clamp(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
                     data[pixelIndex + 3] = 255;
                 }
                 return this.context.putImageData(imageData, 0, 0), this.canvas.toDataURL();
@@ -7676,9 +7457,7 @@ const smoothStep = (a, b, t) => {
             return this.canvasDPI;
         }
     },
-    createFBMEngine: createFBMEngine,
-    fragmentShaders: fragmentShaders,
-    liquidGlassWithTime: liquidGlassWithTime
+    fragmentShaders: fragmentShaders
 }, Symbol.toStringTag, {
     value: "Module"
 }));