@shohojdhara/atomix 0.6.4 → 0.6.6

package/dist/index.js

@@ -1710,6 +1710,268 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         NEWSLETTER_BUTTON_TEXT: "Subscribe",
         BACK_TO_TOP_TEXT: "Back to Top"
     }
+}, GLASS_DEFAULTS = {
+    /**
+   * Button — compact interactive element.
+   * Low displacement + no blur override so the backdrop token handles frosting.
+   * Zero elasticity: the button itself handles press/hover feedback.
+   */
+    BUTTON: {
+        displacementScale: 16,
+        saturation: 180,
+        elasticity: 0
+    },
+    /**
+   * Badge — pill-shaped tag. Tiny surface, minimal distortion.
+   * borderRadius is set dynamically at runtime; this serves as a safe fallback.
+   */
+    BADGE: {
+        displacementScale: 14,
+        borderRadius: 16,
+        elasticity: 0
+    },
+    /**
+   * Accordion — block-level content container.
+   * Gentle displacement; zero elasticity so open/close animation isn't jittery.
+   */
+    ACCORDION: {
+        displacementScale: 18,
+        elasticity: 0
+    },
+    /**
+   * Callout — notification / alert banner.
+   * Slightly more frosted than Accordion to give it visual priority.
+   */
+    CALLOUT: {
+        displacementScale: 22,
+        borderRadius: 8,
+        elasticity: 0
+    },
+    /**
+   * Dropdown — floating menu. Small surface, should feel light and airy.
+   * No blur override — rely on the backdrop token.
+   */
+    DROPDOWN: {
+        displacementScale: 16,
+        elasticity: 0
+    },
+    /**
+   * EdgePanel — full-height side drawer.
+   * Empty config: the panel inherits all ATOMIX_GLASS.DEFAULTS.
+   * borderRadius and size are managed by the panel's own SCSS.
+   */
+    EDGE_PANEL: {},
+    /**
+   * Modal — full-screen overlay dialog. Shader mode for premium refraction.
+   * displacementScale omitted — set dynamically from modal content height at runtime.
+   * elasticity: 0 — modals should not wobble when the user interacts with them.
+   */
+    MODAL: {
+        blurAmount: 28,
+        elasticity: 0,
+        mode: "shader",
+        shaderMode: "premiumGlass"
+    },
+    /**
+   * Navbar — sticky / fixed navigation bar spanning full width.
+   * Shader gives the top edge a polished lens look.
+   * borderRadius: 0 — navbars run edge-to-edge.
+   * elasticity: 0 — no wobble on a fixed chrome element.
+   */
+    NAVBAR: {
+        displacementScale: 24,
+        blurAmount: 24,
+        borderRadius: 0,
+        elasticity: 0,
+        mode: "shader",
+        shaderVariant: "premiumGlass"
+    },
+    /**
+   * Nav (inline nav list) — narrower than a full Navbar, standard mode is
+   * enough. Rounded corners to match typical pill / tab nav designs.
+   */
+    NAV: {
+        displacementScale: 24,
+        blurAmount: 20,
+        borderRadius: 8,
+        elasticity: 0,
+        mode: "shader"
+    },
+    /**
+   * SideMenu — persistent sidebar navigation.
+   * Moderate displacement; shader for depth. Zero elasticity.
+   */
+    SIDE_MENU: {
+        displacementScale: 24,
+        blurAmount: 24,
+        borderRadius: 0,
+        elasticity: 0,
+        mode: "shader"
+    },
+    /**
+   * Popover — small floating card above content.
+   * Shader mode + aberration for the characteristic lens fringe.
+   * Low displacement so the content remains readable.
+   */
+    POPOVER: {
+        displacementScale: 22,
+        blurAmount: 20,
+        saturation: 180,
+        aberrationIntensity: .35,
+        borderRadius: 12,
+        elasticity: 0,
+        mode: "shader"
+    },
+    /**
+   * Tooltip — tiny single-line label.
+   * Higher displacement than other small elements because tooltips float
+   * freely and the distortion reads as depth. No shader (too small to matter).
+   */
+    TOOLTIP: {
+        displacementScale: 18,
+        blurAmount: 16,
+        elasticity: 0
+    },
+    /**
+   * Tabs — tabbed content panel. Shader for the nav strip refraction.
+   */
+    TABS: {
+        displacementScale: 24,
+        blurAmount: 20,
+        saturation: 180,
+        aberrationIntensity: .35,
+        borderRadius: 12,
+        elasticity: 0,
+        mode: "shader"
+    },
+    /**
+   * Toggle — switch control. Compact, pill shape.
+   * Relies on borderRadius from the component's own SCSS.
+   */
+    TOGGLE: {
+        displacementScale: 16,
+        elasticity: 0
+    },
+    /**
+   * Form inputs (Input, Textarea, Select, Checkbox, Radio).
+   * Unified glass feel for all form controls — subtle displacement,
+   * rounded corners matching the $input-border-radius token (≈ 6px).
+   */
+    INPUT: {
+        displacementScale: 18,
+        borderRadius: 6,
+        elasticity: 0
+    },
+    TEXTAREA: {
+        displacementScale: 18,
+        borderRadius: 6,
+        elasticity: 0
+    },
+    SELECT: {
+        displacementScale: 18,
+        borderRadius: 6,
+        elasticity: 0
+    },
+    CHECKBOX: {
+        displacementScale: 14,
+        borderRadius: 4,
+        elasticity: 0
+    },
+    RADIO: {
+        displacementScale: 14,
+        borderRadius: 99,
+        elasticity: 0
+    },
+    /**
+   * Pagination — row of page buttons.
+   * Thin, horizontal strip; low displacement so numbers stay legible.
+   */
+    PAGINATION: {
+        displacementScale: 18,
+        borderRadius: 8,
+        elasticity: 0
+    },
+    /**
+   * Progress — horizontal bar track.
+   * Very low displacement — the bar should not distort.
+   */
+    PROGRESS: {
+        displacementScale: 10,
+        borderRadius: 99,
+        elasticity: 0
+    },
+    /**
+   * Rating — star picker.
+   * Compact inline element; minimal glass, no shader needed.
+   */
+    RATING: {
+        displacementScale: 16,
+        elasticity: 0
+    },
+    /**
+   * Spinner — loading indicator.
+   * Barely-there glass; the spinner itself provides visual interest.
+   */
+    SPINNER: {
+        displacementScale: 12,
+        elasticity: 0
+    },
+    /**
+   * Steps — horizontal / vertical stepper.
+   * Moderate displacement so the connector lines remain crisp.
+   */
+    STEPS: {
+        displacementScale: 22,
+        borderRadius: 8,
+        elasticity: 0
+    },
+    /**
+   * Messages / chat bubbles.
+   * Rounded pill-like bubbles; gentle glass to aid readability.
+   */
+    MESSAGES: {
+        displacementScale: 20,
+        borderRadius: 16,
+        elasticity: 0
+    }
+}, GLASS_BORDER_GRADIENT = {
+    BASE_ANGLE: 135,
+    ANGLE_MULTIPLIER: .5,
+    VELOCITY_ANGLE_MULTIPLIER: .5,
+    CHROMATIC_OFFSET: 1.5,
+    STOP_1: {
+        MIN: 10,
+        BASE: 33,
+        get MULTIPLIER() {
+            return .009 * this.BASE;
+        }
+    },
+    STOP_2: {
+        MAX: 90,
+        BASE: 66,
+        get MULTIPLIER() {
+            return .006 * this.BASE;
+        }
+    },
+    OPACITY: {
+        /** Matches $glass-border-1-opacity (0.08) */
+        BASE_1: .08,
+        get BASE_2() {
+            return 3.33 * this.BASE_1;
+        },
+        get BASE_3() {
+            return 2.66 * this.BASE_1;
+        },
+        get BASE_4() {
+            return 5 * this.BASE_1;
+        },
+        get MULTIPLIER_LOW() {
+            return .066 * this.BASE_1;
+        },
+        get MULTIPLIER_HIGH() {
+            return .1 * this.BASE_1;
+        }
+    }
 }, ATOMIX_GLASS = {
     BASE_CLASS: "c-atomix-glass",
     CONTAINER_CLASS: "c-atomix-glass__container",
@@ -1721,6 +1983,22 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
     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",
@@ -1749,25 +2027,22 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         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,
@@ -1783,19 +2058,29 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
     },
     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
@@ -1809,55 +2094,16 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         },
         // 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: {
@@ -1890,8 +2136,8 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
                     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;
                 }
@@ -1909,8 +2155,8 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
                     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;
                 }
@@ -1928,8 +2174,8 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
                     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;
                 }
@@ -1939,13 +2185,13 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         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;
@@ -1966,7 +2212,7 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
             }
         },
         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;
@@ -1990,14 +2236,14 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
                 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;
             },
@@ -2018,6 +2264,10 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         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)
@@ -2114,120 +2364,472 @@ function useAccordion(initialProps) {
     };
 }
 
-const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
-    x: rect.left + rect.width / 2,
-    y: rect.top + rect.height / 2
-} : {
-    x: 0,
-    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;
-    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 => {
-    if ("number" == typeof value) return Math.max(0, value);
-    if ("string" != typeof value || !value.trim()) return CONSTANTS$2.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);
-    }
-    // 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);
-    }
-    // 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);
-    }
-    // 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);
-    }
-    // Handle unitless numbers
-        const numValue = parseFloat(trimmedValue);
-    return isNaN(numValue) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
-}, extractBorderRadiusFromElement = element => {
-    if (!element || !element.props) return null;
-    // Check inline styles first (highest priority)
-        if (element.props.style) {
-        const radiusFromStyle = (style => {
-            if (!style) return null;
-            // Check various border-radius properties
-                        const borderRadius = style.borderRadius || style.borderTopLeftRadius || style.borderTopRightRadius || style.borderBottomLeftRadius || style.borderBottomRightRadius;
-            return void 0 !== borderRadius ? parseBorderRadiusValue(borderRadius) : null;
-        })(element.props.style);
-        if (null !== radiusFromStyle && radiusFromStyle > 0) return radiusFromStyle;
-    }
-    // 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;
-    }
-    return null;
-}, extractBorderRadiusFromChildren = children => {
-    if (!children) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
-    try {
-        const childArray = React__default.default.Children.toArray(children);
-        for (let i = 0; i < childArray.length; i++) {
-            const child = childArray[i];
-            if ( React__default.default.isValidElement(child)) {
-                const radius = extractBorderRadiusFromElement(child);
-                if (null !== radius) return radius;
+var aCallable = aCallable$3, toObject = toObject$2, IndexedObject = indexedObject, lengthOfArrayLike = lengthOfArrayLike$2, $TypeError = TypeError, REDUCE_EMPTY = "Reduce of empty array with no initial value", createMethod = function(IS_RIGHT) {
+    return function(that, callbackfn, argumentsLength, memo) {
+        var O = toObject(that), self = IndexedObject(O), length = lengthOfArrayLike(O);
+        if (aCallable(callbackfn), 0 === length && argumentsLength < 2) throw new $TypeError(REDUCE_EMPTY);
+        var index = IS_RIGHT ? length - 1 : 0, i = IS_RIGHT ? -1 : 1;
+        if (argumentsLength < 2) for (;;) {
+            if (index in self) {
+                memo = self[index], index += i;
+                break;
             }
+            if (index += i, IS_RIGHT ? index < 0 : length <= index) throw new $TypeError(REDUCE_EMPTY);
         }
-    } catch (error) {
-        // Silently handle errors
-    }
-    return CONSTANTS$2.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) => {
-    const newVelocity = (velocity + (target - current) * stiffness) * damping;
-    return {
-        value: current + newVelocity,
-        velocity: newVelocity
+        for (;IS_RIGHT ? index >= 0 : length > index; index += i) index in self && (memo = callbackfn(memo, self[index], index, O));
+        return memo;
     };
-}, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
-    switch (mode) {
-      case "standard":
-        return displacementMap;
+}, arrayReduce = {
+    // `Array.prototype.reduce` method
+    // https://tc39.es/ecma262/#sec-array.prototype.reduce
+    left: createMethod(!1),
+    // `Array.prototype.reduceRight` method
+    // https://tc39.es/ecma262/#sec-array.prototype.reduceright
+    right: createMethod(!0)
+}, fails = fails$9, globalThis$1 = globalThis_1, userAgent = environmentUserAgent, classof = classofRaw$2, userAgentStartsWith = function(string) {
+    return userAgent.slice(0, string.length) === string;
+}, environment = userAgentStartsWith("Bun/") ? "BUN" : userAgentStartsWith("Cloudflare-Workers") ? "CLOUDFLARE" : userAgentStartsWith("Deno/") ? "DENO" : userAgentStartsWith("Node.js/") ? "NODE" : globalThis$1.Bun && "string" == typeof Bun.version ? "BUN" : globalThis$1.Deno && "object" == typeof Deno.version ? "DENO" : "process" === classof(globalThis$1.process) ? "NODE" : globalThis$1.window && globalThis$1.document ? "BROWSER" : "REST", $reduce = arrayReduce.left;
 
-      case "polar":
-        return polarDisplacementMap;
+// `Array.prototype.reduce` method
+// https://tc39.es/ecma262/#sec-array.prototype.reduce
+_export({
+    target: "Array",
+    proto: !0,
+    forced: !("NODE" === environment) && environmentV8Version > 79 && environmentV8Version < 83 || !function(METHOD_NAME, argument) {
+        var method = [][METHOD_NAME];
+        return !!method && fails((function() {
+            // eslint-disable-next-line no-useless-call -- required for testing
+            method.call(null, argument || function() {
+                return 1;
+            }, 1);
+        }));
+    }("reduce")
+}, {
+    reduce: function(callbackfn /* , initialValue */) {
+        var length = arguments.length;
+        return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : void 0);
+    }
+});
 
-      case "prominent":
-        return prominentDisplacementMap;
+var reduce$3 = getBuiltInPrototypeMethod$3("Array", "reduce"), isPrototypeOf = objectIsPrototypeOf, method = reduce$3, ArrayPrototype = Array.prototype, _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.reduce;
+    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.reduce ? method : own;
+}));
 
-      case "shader":
-        return shaderMapUrl || displacementMap;
+/**
+ * Map SCSS tokens to CSS custom properties
+ *
+ * @example
+ * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
+ * const vars = mapSCSSTokensToCSSVars(tokens)
+ * // Returns: { '--primary-color': '#7AFFD7', '--spacing-md': '16px' }
+ */
+function mapSCSSTokensToCSSVars(tokens, options = {}) {
+    const vars = {}, {prefix: prefix = "atomix", separator: separator = "-"} = options;
+    return Object.entries(tokens).forEach((([key, value]) => {
+        // Remove $ prefix from SCSS variables
+        const normalizedKey = (key.startsWith("$") ? key.slice(1) : key).replace(/_/g, separator);
+        // Convert underscores to separators
+                vars[`--${prefix}${separator}${normalizedKey}`] = String(value);
+    })), vars;
+}
 
-      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}) => jsxRuntime.jsx("svg", {
-    style: {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        inset: 0
-    },
-    "aria-hidden": "true",
-    children: jsxRuntime.jsxs("defs", {
-        children: [ jsxRuntime.jsxs("radialGradient", {
-            id: `${id}-edge-mask`,
-            cx: "50%",
-            cy: "50%",
-            r: "50%",
-            children: [ jsxRuntime.jsx("stop", {
-                offset: "0%",
+/**
+ * Apply CSS variables to an element
+ *
+ * @param vars - CSS variables to apply
+ * @param element - Target element (defaults to document.documentElement)
+ */ function applyCSSVariables(vars, element) {
+    if ("undefined" == typeof window) return;
+ // SSR safety
+        const target = element || document.documentElement;
+    Object.entries(vars).forEach((([key, value]) => {
+        target.style.setProperty(key, String(value));
+    }));
+}
+
+/**
+ * Remove CSS variables from an element
+ *
+ * @param varNames - Variable names to remove
+ * @param element - Target element (defaults to document.documentElement)
+ */ function removeCSSVariables(varNames, element) {
+    if ("undefined" == typeof window) return;
+ // SSR safety
+        const target = element || document.documentElement;
+    varNames.forEach((varName => {
+        target.style.removeProperty(varName);
+    }));
+}
+
+/**
+ * Get CSS variable value from an element
+ *
+ * @param varName - Variable name to get
+ * @param element - Target element (defaults to document.documentElement)
+ * @returns Variable value or null if not found
+ */ function getCSSVariable(varName, element) {
+    if ("undefined" == typeof window) return null;
+ // SSR safety
+        const target = element || document.documentElement;
+    return getComputedStyle(target).getPropertyValue(varName).trim() || null;
+}
+
+/**
+ * Convert CSS variable object to inline style object
+ *
+ * @example
+ * const vars = { '--atomix-button-bg': '#000' }
+ * const style = cssVarsToStyle(vars)
+ * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
+ */ function cssVarsToStyle(vars) {
+    var _context;
+    return _reduceInstanceProperty(_context = Object.entries(vars)).call(_context, ((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
+    acc)), {});
+}
+
+/**
+ * Merge multiple CSS variable objects
+ * Later objects override earlier ones
+ */ function mergeCSSVars(...varObjects) {
+    return _reduceInstanceProperty(varObjects).call(varObjects, ((acc, vars) => (vars && Object.assign(acc, vars), 
+    acc)), {});
+}
+
+/**
+ * Validate CSS variable name format
+ */ function isValidCSSVariableName(name) {
+    return /^--[a-z0-9-]+$/.test(name);
+}
+
+/**
+ * Extract component name from CSS variable name
+ *
+ * @example
+ * extractComponentName('--atomix-button-bg')
+ * // Returns: 'button'
+ */ function extractComponentName(varName, prefix = "atomix") {
+    const regex = new RegExp(`^--${prefix}-([a-z0-9]+)-`), match = varName.match(regex);
+    return match ? match[1] ?? null : null;
+}
+
+/**
+ * Component Utilities
+ *
+ * Helper functions for component development with the new customization system
+ */
+/**
+ * Merge multiple class names
+ */ function mergeClassNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+
+/**
+ * Apply part styles to element props
+ */ function applyPartStyles(baseProps, partStyles) {
+    return partStyles ? {
+        ...baseProps,
+        className: mergeClassNames(baseProps.className, partStyles.className),
+        style: {
+            ...baseProps.style,
+            ...partStyles.style
+        }
+    } : baseProps;
+}
+
+/**
+ * Create style object from CSS variables
+ */ function createCSSVarStyle(cssVars, baseStyle) {
+    return cssVars ? {
+        ...cssVarsToStyle(cssVars),
+        ...baseStyle
+    } : baseStyle || {};
+}
+
+function mergeComponentProps(baseProps, customization) {
+    const {className: className, style: style, cssVars: cssVars, parts: parts} = customization, cssVarStyle = cssVars ? cssVarsToStyle(cssVars) : {};
+    // Merge CSS variables into style
+        return {
+        ...baseProps,
+        className: mergeClassNames(baseProps.className, className),
+        style: {
+            ...cssVarStyle,
+            ...baseProps.style,
+            ...style
+        }
+    };
+}
+
+/**
+ * Get part styles from parts object
+ */ function getPartStyles(parts, partName) {
+    return parts?.[partName];
+}
+
+/**
+ * Create element props with part styles
+ */ function createPartProps(baseClassName, partStyles, additionalProps) {
+    return {
+        ...additionalProps,
+        className: mergeClassNames(baseClassName, partStyles?.className),
+        style: {
+            ...partStyles?.style,
+            ...additionalProps?.style
+        }
+    };
+}
+
+/**
+ * Check if component has customization
+ */ function hasCustomization(props) {
+    return Boolean(props.parts || props.cssVars || props.slots);
+}
+
+/**
+ * Create data attributes for debugging
+ */ function createDebugAttrs(componentName, variant) {
+    return "undefined" == typeof process || "development" !== process.env?.NODE_ENV ? {} : {
+        "data-component": componentName,
+        ...variant && {
+            "data-variant": variant
+        }
+    };
+}
+
+/**
+ * Generate a UUID v4
+ */ function generateUUID() {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c => {
+        const r = 16 * Math.random() | 0;
+        return ("x" === c ? r : 3 & r | 8).toString(16);
+    }));
+}
+
+/**
+ * Check if a URL is a YouTube URL
+ */ function isYouTubeUrl(url) {
+    return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/.test(url);
+}
+
+/**
+ * Extract YouTube video ID from URL
+ */ function extractYouTubeId(url) {
+    if (!isYouTubeUrl(url)) return null;
+    const patterns = [ /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/, /youtube\.com\/.*[?&]v=([^&\n?#]+)/ ];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match && match[1]) return match[1];
+    }
+    return null;
+}
+
+/**
+ * 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__default.default.useMemo((() => null == refA && null == refB ? null : refValue => {
+        setRef(refA, refValue), setRef(refB, refValue);
+    }), [ refA, refB ]);
+}
+
+const {CONSTANTS: CONSTANTS$3} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2
+} : {
+    x: 0,
+    y: 0
+}, calculateMouseInfluence = mouseOffset => {
+    if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
+    // 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$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$3.DEFAULT_CORNER_RADIUS;
+    const trimmedValue = value.trim();
+    // Handle px values
+        if (trimmedValue.endsWith("px")) {
+        const parsed = parseFloat(trimmedValue);
+        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$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$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$3.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
+    }
+    // Handle unitless numbers
+        const numValue = parseFloat(trimmedValue);
+    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)
+        if (element.props.style) {
+        const radiusFromStyle = (style => {
+            if (!style) return null;
+            // Check various border-radius properties
+                        const borderRadius = style.borderRadius || style.borderTopLeftRadius || style.borderTopRightRadius || style.borderBottomLeftRadius || style.borderBottomRightRadius;
+            return void 0 !== borderRadius ? parseBorderRadiusValue(borderRadius) : null;
+        })(element.props.style);
+        if (null !== radiusFromStyle && radiusFromStyle > 0) return radiusFromStyle;
+    }
+    // If element has children, recursively check them
+        if (element.props.children) {
+        const childRadius = extractBorderRadiusFromChildren(element.props.children);
+        if (childRadius > 0 && childRadius !== CONSTANTS$3.DEFAULT_CORNER_RADIUS) return childRadius;
+    }
+    return null;
+}, extractBorderRadiusFromChildren = children => {
+    if (!children) return CONSTANTS$3.DEFAULT_CORNER_RADIUS;
+    try {
+        const childArray = React__default.default.Children.toArray(children);
+        for (let i = 0; i < childArray.length; i++) {
+            const child = childArray[i];
+            if ( React__default.default.isValidElement(child)) {
+                const radius = extractBorderRadiusFromElement(child);
+                if (null !== radius) return radius;
+            }
+        }
+    } catch (error) {
+        // Silently handle errors
+    }
+    return CONSTANTS$3.DEFAULT_CORNER_RADIUS;
+}, smoothstep = t => {
+    const clamped = Math.max(0, Math.min(1, t));
+    return clamped * clamped * (3 - 2 * clamped);
+}, 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
+    };
+};
+
+/**
+ * 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;
+
+      case "polar":
+        return polarDisplacementMap;
+
+      case "prominent":
+        return prominentDisplacementMap;
+
+      case "shader":
+        return shaderMapUrl || displacementMap;
+
+      default:
+        return console.warn("AtomixGlass: Invalid displacement mode"), displacementMap;
+    }
+}, 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}) => jsxRuntime.jsx("svg", {
+    style: FILTER_SVG_STYLE,
+    "aria-hidden": "true",
+    children: jsxRuntime.jsxs("defs", {
+        children: [ jsxRuntime.jsxs("radialGradient", {
+            id: `${id}-edge-mask`,
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            children: [ jsxRuntime.jsx("stop", {
+                offset: "0%",
                 stopColor: "black",
                 stopOpacity: "0"
             }), jsxRuntime.jsx("stop", {
@@ -2272,43 +2874,21 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect =>
                 dx: "0",
                 dy: "0",
                 result: "CENTER_ORIGINAL"
-            }), jsxRuntime.jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * ("shader" === mode ? 1 : -1),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "RED_DISPLACED"
-            }), jsxRuntime.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"
-            }), jsxRuntime.jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * (("shader" === mode ? 1 : -1) - .02 * aberrationIntensity),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "GREEN_DISPLACED"
-            }), jsxRuntime.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"
-            }), jsxRuntime.jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * (("shader" === mode ? 1 : -1) - .03 * aberrationIntensity),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "BLUE_DISPLACED"
-            }), jsxRuntime.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"
-            }), jsxRuntime.jsx("feBlend", {
+            }), CHROMATIC_CHANNELS.map((channel => jsxRuntime.jsxs(React__default.default.Fragment, {
+                children: [ jsxRuntime.jsx("feDisplacementMap", {
+                    in: "SourceGraphic",
+                    in2: "DISPLACEMENT_MAP",
+                    scale: getChromaticDisplacementScale(mode, displacementScale, aberrationIntensity, channel.aberrationFactor),
+                    xChannelSelector: "R",
+                    yChannelSelector: "B",
+                    result: channel.result
+                }), jsxRuntime.jsx("feColorMatrix", {
+                    in: channel.result,
+                    type: "matrix",
+                    values: channel.colorMatrix,
+                    result: channel.channelResult
+                }) ]
+            }, channel.channelResult))), jsxRuntime.jsx("feBlend", {
                 in: "GREEN_CHANNEL",
                 in2: "BLUE_CHANNEL",
                 mode: "screen",
@@ -2349,21 +2929,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 =  React.memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), AtomixGlassContainer =  React.forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, 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 = React.useId(), filterId = React.useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null), shaderUpdateTimeoutRef = React.useRef(null), animationFrameRef = React.useRef(null);
+    const rawId = React.useId(), filterId = React.useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), containerRef = useForkRef(ref, null), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null), shaderUpdateTimeoutRef = React.useRef(null), animationFrameRef = React.useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     React.useEffect((() => {
         "shader" === mode ? 
@@ -2443,15 +3024,23 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
                 shaderGeneratorRef.current = null;
             }
         };
-    }), [ mode, glassSize, shaderVariant ]), 
-    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
-    React.useEffect((() => {
+    }), [ mode, glassSize, shaderVariant ]), React.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) {
@@ -2475,88 +3064,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] = React.useState(null);
-    React.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 = React.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 = React.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 = React.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 = React.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 jsxRuntime.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
@@ -2574,8 +3096,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
                 }), jsxRuntime.jsx("div", {
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
@@ -2597,8 +3119,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 
@@ -2713,28 +3239,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
@@ -2751,28 +3281,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()), 
@@ -2809,151 +3366,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, {
@@ -2968,12 +3390,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] = React.useState(!1), [isActive, setIsActive] = React.useState(!1), cachedRectRef = React.useRef(null), internalGlobalMousePositionRef = React.useRef({
+    const [isHovered, setIsHovered] = React.useState(!1), [isActive, setIsActive] = React.useState(!1), resolvedBorder = React.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 = React.useRef(null), internalGlobalMousePositionRef = React.useRef({
         x: 0,
         y: 0
     }), internalMouseOffsetRef = React.useRef({
@@ -2997,52 +3442,10 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
     }), scaleVelocityRef = React.useRef({
         x: 0,
         y: 0
-    });
-    React.useRef(0);
-    const mouseVelocityRef = React.useRef({
+    }), mouseVelocityRef = React.useRef({
         x: 0,
         y: 0
-    }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = React.useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = React.useState(!1), [detectedOverLight, setDetectedOverLight] = React.useState(!1), animationFrameIdRef = React.useRef(null), animationStartTimeRef = React.useRef(0), elapsedTimeRef = React.useRef(0), shaderTimeRef = React.useRef(0), fbmConfig = React.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 = React.useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = React.useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = React.useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
-    /**
-   * Animation loop for time-based effects
-   */
-    React.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 = React.useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = React.useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = React.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] = React.useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = React.useState(!1), [detectedOverLight, setDetectedOverLight] = React.useState(!1), effectiveReducedMotion = React.useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveBorderRadius = React.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] = React.useState({
             width: 270,
             height: 69
@@ -3102,9 +3505,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         effectiveBorderRadius: effectiveBorderRadius,
         cachedRectRef: cachedRectRef
     }), effectiveHighContrast = React.useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = React.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
     React.useEffect((() => {
         const extractRadius = () => {
@@ -3264,25 +3664,26 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
    * Get effective overLight value based on configuration
    */
     const getEffectiveOverLight = React.useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = React.useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = React.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;
         }
@@ -3307,8 +3708,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 = {
@@ -3380,12 +3781,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 = React.useCallback((globalPos => {
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, isFixedOrSticky, resolvedBorder.animated, resolvedBorder.opacityMultiplier, stopLerpLoop ]), handleGlobalMousePosition = React.useCallback((globalPos => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
         const container = mouseContainer?.current || glassRef.current;
@@ -3449,9 +3851,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 = React.useCallback((() => setIsHovered(!0)), []), handleMouseLeave = React.useCallback((() => setIsHovered(!1)), []), handleMouseDown = React.useCallback((() => setIsActive(!0)), []), handleMouseUp = React.useCallback((() => setIsActive(!1)), []), handleKeyDown = React.useCallback((e => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
@@ -3471,9 +3874,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,
@@ -3751,7 +4153,13 @@ function usePerformanceMonitor$1(config = {}) {
         timestamp: 0,
         isAutoScaling: !0,
         lowFpsCount: 0
-    }), [manualOverride, setManualOverride] = React.useState(!1), [isEnabled, setIsEnabled] = React.useState(enabled), frameCountRef = React.useRef(0), lastFpsUpdateRef = React.useRef(0), lastFrameTimeRef = React.useRef(0), animationFrameRef = React.useRef(null), lowFpsCountRef = React.useRef(0), highFpsCountRef = React.useRef(0), qualityLevelRef = React.useRef("medium"), updateMetrics = React.useCallback((newMetrics => {
+    }), [manualOverride, setManualOverride] = React.useState(!1), [isEnabled, setIsEnabled] = React.useState(enabled);
+    // Sync external `enabled` prop changes into internal state
+    React.useEffect((() => {
+        setIsEnabled(enabled ?? !0);
+    }), [ enabled ]);
+    // Refs for frame tracking
+    const frameCountRef = React.useRef(0), lastFpsUpdateRef = React.useRef(0), lastFrameTimeRef = React.useRef(0), animationFrameRef = React.useRef(null), lowFpsCountRef = React.useRef(0), highFpsCountRef = React.useRef(0), qualityLevelRef = React.useRef("medium"), updateMetrics = React.useCallback((newMetrics => {
         setMetrics((prev => ({
             ...prev,
             ...newMetrics,
@@ -3872,163 +4280,15 @@ function usePerformanceMonitor$1(config = {}) {
    * 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
-    };
-}
-
-/**
- * Debug Overlay Component (Optional)
- *
- * Shows real-time performance metrics on screen.
- * Only rendered when showOverlay is enabled.
- */
-/** 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);
-    }
+        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
+    };
 }
 
-/**
- * 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 =  React.memo((({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
-    if (!isVisible) return null;
-    const fpsColor = (fps = metrics.fps) >= 58 ? "var(--atomix-color-success, #4ade80)" : fps >= 45 ? "var(--atomix-color-warning, #fbbf24)" : "var(--atomix-color-danger, #ef4444)";
-    var fps;
-    const isCritical = metrics.fps < 45;
-    return jsxRuntime.jsxs("div", {
-        className: "c-perf-dashboard u-position-fixed u-top-4 u-end-4 u-p-3 u-px-4 u-text-xs u-font-mono u-text-white u-rounded-md u-border u-border-white-alpha-10 u-shadow-lg",
-        style: {
-            zIndex: 9999,
-            minWidth: "12.5rem",
-            // 200px
-            backgroundColor: "rgba(17, 24, 39, 0.95)",
-            backdropFilter: "blur(8px)",
-            transition: "opacity 0.3s ease"
-        },
-        children: [ jsxRuntime.jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-2 u-pb-2 u-border-b u-border-white-alpha-10",
-            children: [ jsxRuntime.jsx("span", {
-                className: "u-text-sm u-font-bold u-text-white",
-                children: "Performance Monitor"
-            }), onClose && jsxRuntime.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: "×"
-            }) ]
-        }), jsxRuntime.jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsxRuntime.jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "FPS"
-            }), jsxRuntime.jsx("span", {
-                className: "u-font-bold",
-                style: {
-                    color: fpsColor
-                },
-                children: Math.round(metrics.fps)
-            }) ]
-        }), jsxRuntime.jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsxRuntime.jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "Frame Time"
-            }), jsxRuntime.jsxs("span", {
-                className: "u-font-bold",
-                children: [ metrics.frameTime.toFixed(2), "ms" ]
-            }) ]
-        }), jsxRuntime.jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsxRuntime.jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "Quality"
-            }), jsxRuntime.jsx("span", {
-                className: "u-font-bold u-text-uppercase",
-                style: {
-                    fontSize: "0.6875rem",
-                    // 11px
-                    color: getQualityColor(metrics.qualityLevel)
-                },
-                children: metrics.qualityLevel
-            }) ]
-        }), metrics.gpuMemory && jsxRuntime.jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsxRuntime.jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "GPU Memory"
-            }), jsxRuntime.jsxs("span", {
-                className: "u-font-bold",
-                children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
-            }) ]
-        }), metrics.isAutoScaling && jsxRuntime.jsx("div", {
-            className: "u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10 u-text-center",
-            style: {
-                fontSize: "0.625rem",
-                // 10px
-                color: "#6b7280"
-            },
-            children: "Auto-scaling active"
-        }), jsxRuntime.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: [ jsxRuntime.jsx("div", {
-                className: "u-rounded-full",
-                style: {
-                    width: "0.5rem",
-                    height: "0.5rem",
-                    flexShrink: 0,
-                    backgroundColor: fpsColor,
-                    ...isCritical && {
-                        animation: "perf-dashboard-pulse 1s infinite"
-                    }
-                }
-            }), jsxRuntime.jsx("span", {
-                className: "u-text-xs",
-                style: {
-                    fontSize: "0.625rem",
-                    // 10px
-                    color: fpsColor
-                },
-                children: getFpsLabel(metrics.fps)
-            }) ]
-        }) ]
-    });
-}));
-
-PerformanceDashboard.displayName = "PerformanceDashboard";
-
 /**
  * Mobile optimization presets
  *
@@ -4038,8 +4298,7 @@ PerformanceDashboard.displayName = "PerformanceDashboard";
 /**
  * Performance preset - Maximum FPS, reduced quality
  * Best for low-end devices or when battery saving is priority
- */
-const PERFORMANCE_PRESET = {
+ */ const PERFORMANCE_PRESET = {
     distortionOctaves: 2,
     // Minimal FBM layers
     displacementScale: 50,
@@ -4202,18 +4461,13 @@ function getDevicePreset(presetName) {
     getPixelRatio: () => "undefined" == typeof window ? 1 : window.devicePixelRatio || 1,
     /** Check if device has touch support */
     hasTouchSupport: () => "undefined" != typeof window && ("ontouchstart" in window || navigator.maxTouchPoints > 0)
-}, AtomixGlassInner =  React.forwardRef((function({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, isFixedOrSticky: propsIsFixedOrSticky, ...rest}, ref) {
-    const glassRef = React.useRef(null), contentRef = React.useRef(null), internalWrapperRef = React.useRef(null), mergedRef = React.useMemo((() => 
-    // Helper to merge refs
-    function(...refs) {
-        return node => {
-            refs.forEach((ref => {
-                "function" == typeof ref ? ref(node) : null != ref && (ref.current = node);
-            }));
-        };
-    }
-    // Internal implementation with forwardRef
-    (ref, internalWrapperRef)), [ ref ]), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = propsIsFixedOrSticky || "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+}, AtomixGlassInner =  React.forwardRef((function({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", 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 = React.useRef(null), contentRef = React.useRef(null), internalWrapperRef = React.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,
@@ -4233,19 +4487,12 @@ function getDevicePreset(presetName) {
         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
     useResponsiveGlass({
         baseParams: {
             ...React.useMemo((() => getDevicePreset(devicePreset)), [ devicePreset ]),
@@ -4260,185 +4507,213 @@ function getDevicePreset(presetName) {
         breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
         enabled: !disableResponsiveBreakpoints && "undefined" != typeof window,
         debug: !1
-    });
-    // Performance monitoring - tracks FPS, frame time, memory usage
-    const {metrics: performanceMetrics, toggleMonitoring: toggleMonitoring} = usePerformanceMonitor$1({
+    }), usePerformanceMonitor$1({
         enabled: debugPerformance,
-        // Enable when debugPerformance is true
         debug: !1,
         showOverlay: !1
     });
-    // Auto-start performance monitoring when debugPerformance is enabled
-        React__default.default.useEffect((() => {
-        debugPerformance && toggleMonitoring();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        }), [ debugPerformance ]);
-    // Re-run when debugPerformance changes
-    const isOverLight = React.useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = React.useMemo((() => {
-        if (!isFixedOrSticky) return {};
-        const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
-        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
-    React.useMemo((() => {
-        if (isFixedOrSticky) {
-            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
-            return {
-                ...visualStyle
-            };
+    const isOverLight = React.useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, containerStyle = React.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 = React.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 = React.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 = React.useMemo((() => {
-        // Keep a reference to positionStyles to avoid unused-variable lint,
-        // but sizing is driven by explicit width/height or measured size.
-        positionStyles.position;
-        const resolveLength = (value, measured) => void 0 !== value && 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 = React.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 = React.useMemo((() => {
-        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
-        return {
-            borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
-            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 = React.useMemo((() => ({
-        hover1: isHovered || isActive ? .5 : 0,
-        hover2: isActive ? .5 : 0,
-        hover3: isHovered ? .4 : isActive ? .8 : 0,
-        base: isOverLight ? clampedOverLightOpacity || .4 : 0,
-        over: isOverLight ? 1.1 * (clampedOverLightOpacity || .4) : 0
-    })), [ isHovered, isActive, isOverLight, clampedOverLightOpacity ]), glassVars = React.useMemo((() => {
-        const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
+    }
+    /**
+ * 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 = React.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"
+        };
+    }
+    /**
+ * 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 = React.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
         };
-    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, clampedBorderOpacity, customZIndex, isFixedOrSticky, positionStyles.position, rootLayoutStyle.position, restStyle.top, restStyle.left, restStyle.right, restStyle.bottom ]), renderBackgroundLayer = layerType => jsxRuntime.jsx("div", {
-        className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" ")
+    }({
+        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 => jsxRuntime.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 jsxRuntime.jsxs("div", {
+    return jsxRuntime.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: [ jsxRuntime.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: {
@@ -4454,8 +4729,6 @@ function getDevicePreset(presetName) {
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
             isFixedOrSticky: isFixedOrSticky,
-            // Phase 1: Animation System props
-            shaderTime: getShaderTime(),
             withTimeAnimation: withTimeAnimation,
             animationSpeed: animationSpeed,
             withMultiLayerDistortion: withMultiLayerDistortion,
@@ -4466,42 +4739,129 @@ function getDevicePreset(presetName) {
             children: children
         }), Boolean(onClick) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_1_CLASS
             }), jsxRuntime.jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_2_CLASS
             }), jsxRuntime.jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_3_CLASS
             }) ]
-        }), renderBackgroundLayer("dark"), renderBackgroundLayer("black"), shouldRenderOverLightLayers && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        }), [ "dark", "black" ].map((layerType => jsxRuntime.jsx(React__default.default.Fragment, {
+            children: renderBackgroundLayer(layerType)
+        }, layerType))), shouldRenderOverLightLayers && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BASE_LAYER_CLASS
             }), jsxRuntime.jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS
             }), jsxRuntime.jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS
             }) ]
-        }), withBorder && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        }), resolvedBorder.enabled && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_BACKDROP_CLASS
             }), jsxRuntime.jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsxRuntime.jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
-        }), debugPerformance && performanceMetrics && jsxRuntime.jsx(PerformanceDashboard, {
-            metrics: performanceMetrics,
-            isVisible: !0,
-            onClose: () => {}
         }) ]
     });
 }));
 
-AtomixGlassInner.displayName = "AtomixGlass";
-
 /**
- * AtomixGlass - wrapped with React.memo to prevent unnecessary re-renders.
- * Ref is forwarded to the root `<div>` element.
+ * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
+ *
+ * Features:
+ * - Hardware-accelerated glass effects with SVG filters
+ * - Mouse-responsive liquid distortion
+ * - Dynamic border-radius extraction from children CSS properties
+ * - Automatic light/dark theme detection via overLight prop
+ * - Accessibility and performance optimizations
+ * - Multiple displacement modes (standard, polar, prominent, shader)
+ * - Design token integration for consistent theming
+ * - Focus ring support for keyboard navigation
+ * - Responsive breakpoints for mobile optimization
+ * - Enhanced ARIA attributes for screen readers
+ * - Time-based animation system with FBM distortion
+ * - Device preset optimization for performance/quality balance
+ *
+ * Design System Compliance:
+ * - Uses design tokens for opacity, spacing, and colors
+ * - Follows BEM methodology for class naming
+ * - Implements focus-ring mixin for accessibility
+ * - Supports reduced motion and high contrast preferences
+ *
+ * Style architecture:
+ * - Root (`.c-atomix-glass`): CSS custom properties for layer geometry and motion.
+ * - Container (`.c-atomix-glass__container`): layout, z-index, and backdrop-filter.
+ *
+ * @example
+ * // Basic usage with dynamic border-radius extraction
+ * <AtomixGlass>
+ *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Manual border-radius override
+ * <AtomixGlass borderRadius={20}>
+ *   <div>Content with 20px glass radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Interactive glass with click handler
+ * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
+ *   <div>Clickable content</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Boolean mode (explicit control)
+ * <AtomixGlass overLight={true}>
+ *   <div>Content on light background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Auto-detection mode
+ * <AtomixGlass overLight="auto">
+ *   <div>Content with auto-detected background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Object config with custom settings
+ * <AtomixGlass
+ *   overLight={{
+ *     threshold: 0.8,
+ *     opacity: 0.6,
+ *     contrast: 1.8,
+ *     brightness: 1.0,
+ *     saturationBoost: 1.5
+ *   }}
+ * >
+ *   <div>Content with custom overLight config</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Debug mode for overLight detection
+ * <AtomixGlass overLight="auto" debugOverLight={true}>
+ *   <div>Content with debug logging enabled</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Performance-optimized for mobile devices
+ * <AtomixGlass devicePreset="performance" disableResponsiveBreakpoints={false}>
+ *   <div>Mobile-optimized glass effect</div>
+ * </AtomixGlass>
  */
+/** Internal implementation; ref is forwarded to the root wrapper element. */ AtomixGlassInner.displayName = "AtomixGlass";
+
+/** Memoized public export. Ref targets the root `.c-atomix-glass` wrapper. */
 const AtomixGlass =  React.memo(AtomixGlassInner), DefaultIcon = () => jsxRuntime.jsx("i", {
     className: "c-accordion__icon",
     "aria-hidden": "true",
@@ -4629,10 +4989,7 @@ const AccordionImpl =  React.memo((({title: title, children: children, defaultOp
     });
     if (glass) {
         // Default glass settings for accordions
-        const defaultGlassProps = {
-            displacementScale: 20,
-            elasticity: 0
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.ACCORDION, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -4665,40 +5022,15 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
         d: "M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z",
         fill: color
     }) ]
-}), 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) => {
+}), 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) => {
@@ -4737,13 +5069,13 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             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),
@@ -4755,7 +5087,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
                 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,
@@ -4766,8 +5098,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
                 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) => {
@@ -4775,8 +5107,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             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) => {
@@ -4784,7 +5116,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             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++) {
@@ -4792,8 +5124,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             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) => {
@@ -4801,8 +5133,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             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
@@ -4811,7 +5143,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             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
@@ -4829,7 +5161,7 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
                     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,
@@ -4869,8 +5201,8 @@ const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24
             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),
@@ -4914,8 +5246,8 @@ var shaderUtils =  Object.freeze({
                     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);
@@ -4925,9 +5257,9 @@ var shaderUtils =  Object.freeze({
                 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();
@@ -4955,9 +5287,7 @@ var shaderUtils =  Object.freeze({
             return this.canvasDPI;
         }
     },
-    createFBMEngine: createFBMEngine,
-    fragmentShaders: fragmentShaders,
-    liquidGlassWithTime: liquidGlassWithTime
+    fragmentShaders: fragmentShaders
 });
 
 // Map string sizes to pixel values
@@ -5106,10 +5436,10 @@ const Badge =  React.memo((({label: label, variant: variant = "primary", size: s
     if (glass) {
         // Default glass settings for badges
         const defaultGlassProps = {
-            displacementScale: 20,
-            borderRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
-            className: "c-badge--glass",
-            elasticity: 0
+            ...GLASS_DEFAULTS.BADGE,
+            // Override borderRadius dynamically if the ref is available
+            borderRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : GLASS_DEFAULTS.BADGE.borderRadius,
+            className: "c-badge--glass"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
@@ -5360,12 +5690,7 @@ const Spinner =  React.memo( React.forwardRef((({size: size = "md", variant: var
         })
     });
     if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 1,
-            borderRadius: 999,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.SPINNER, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -5467,60 +5792,6 @@ class ThemeNaming {
     }
 }
 
-ThemeNaming.prefix = "atomix";
-
-var aCallable = aCallable$3, toObject = toObject$2, IndexedObject = indexedObject, lengthOfArrayLike = lengthOfArrayLike$2, $TypeError = TypeError, REDUCE_EMPTY = "Reduce of empty array with no initial value", createMethod = function(IS_RIGHT) {
-    return function(that, callbackfn, argumentsLength, memo) {
-        var O = toObject(that), self = IndexedObject(O), length = lengthOfArrayLike(O);
-        if (aCallable(callbackfn), 0 === length && argumentsLength < 2) throw new $TypeError(REDUCE_EMPTY);
-        var index = IS_RIGHT ? length - 1 : 0, i = IS_RIGHT ? -1 : 1;
-        if (argumentsLength < 2) for (;;) {
-            if (index in self) {
-                memo = self[index], index += i;
-                break;
-            }
-            if (index += i, IS_RIGHT ? index < 0 : length <= index) throw new $TypeError(REDUCE_EMPTY);
-        }
-        for (;IS_RIGHT ? index >= 0 : length > index; index += i) index in self && (memo = callbackfn(memo, self[index], index, O));
-        return memo;
-    };
-}, arrayReduce = {
-    // `Array.prototype.reduce` method
-    // https://tc39.es/ecma262/#sec-array.prototype.reduce
-    left: createMethod(!1),
-    // `Array.prototype.reduceRight` method
-    // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-    right: createMethod(!0)
-}, fails = fails$9, globalThis$1 = globalThis_1, userAgent = environmentUserAgent, classof = classofRaw$2, userAgentStartsWith = function(string) {
-    return userAgent.slice(0, string.length) === string;
-}, environment = userAgentStartsWith("Bun/") ? "BUN" : userAgentStartsWith("Cloudflare-Workers") ? "CLOUDFLARE" : userAgentStartsWith("Deno/") ? "DENO" : userAgentStartsWith("Node.js/") ? "NODE" : globalThis$1.Bun && "string" == typeof Bun.version ? "BUN" : globalThis$1.Deno && "object" == typeof Deno.version ? "DENO" : "process" === classof(globalThis$1.process) ? "NODE" : globalThis$1.window && globalThis$1.document ? "BROWSER" : "REST", $reduce = arrayReduce.left;
-
-// `Array.prototype.reduce` method
-// https://tc39.es/ecma262/#sec-array.prototype.reduce
-_export({
-    target: "Array",
-    proto: !0,
-    forced: !("NODE" === environment) && environmentV8Version > 79 && environmentV8Version < 83 || !function(METHOD_NAME, argument) {
-        var method = [][METHOD_NAME];
-        return !!method && fails((function() {
-            // eslint-disable-next-line no-useless-call -- required for testing
-            method.call(null, argument || function() {
-                return 1;
-            }, 1);
-        }));
-    }("reduce")
-}, {
-    reduce: function(callbackfn /* , initialValue */) {
-        var length = arguments.length;
-        return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : void 0);
-    }
-});
-
-var reduce$3 = getBuiltInPrototypeMethod$3("Array", "reduce"), isPrototypeOf = objectIsPrototypeOf, method = reduce$3, ArrayPrototype = Array.prototype, _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
-    var own = it.reduce;
-    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.reduce ? method : own;
-}));
-
 /**
  * Render a slot with the given props
  *
@@ -5562,7 +5833,9 @@ function renderSlot(slot, props, fallback) {
 
 /**
  * Check if a value is a slot configuration
- */ const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, slots: slots, ...props}, ref) => {
+ */ ThemeNaming.prefix = "atomix";
+
+const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, slots: slots, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href), iconElement = iconName ? jsxRuntime.jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -5670,11 +5943,7 @@ function renderSlot(slot, props, fallback) {
     // This is a safe fallback for disabled links.
         if (glass) {
         // Default glass props
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 0,
-            saturation: 200
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.BUTTON, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -5873,11 +6142,7 @@ const CalloutComponentBase = ({title: title, children: children, icon: icon, var
     // Determine appropriate ARIA attributes based on variant
         if (glass) {
         // Default glass settings for callouts
-        const defaultGlassProps = {
-            displacementScale: 30,
-            borderRadius: 8,
-            elasticity: 0
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.CALLOUT, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -10695,15 +10960,7 @@ const range = (start, end) => {
         }) ]
     });
     if (glass) {
-        // Default glass settings for pagination
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .5,
-            borderRadius: 8,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.PAGINATION, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -10767,14 +11024,7 @@ const Checkbox =  React__default.default.memo( React.forwardRef((({label: label,
         style: style,
         children: inputElement
     }), glass) {
-        const defaultGlassProps = {
-            displacementScale: 40,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .3,
-            borderRadius: 6,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.CHECKBOX, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -11044,13 +11294,8 @@ const DropdownStyleContext =  React.createContext({}), Dropdown =  React.memo((f
             "aria-orientation": "vertical",
             "aria-hidden": !isOpen,
             onKeyDown: handleKeyDown,
-            children: glass ? 
-            // Default glass settings for dropdowns
-            (() => {
-                const defaultGlassProps = {
-                    displacementScale: 20,
-                    elasticity: 0
-                }, glassProps = !0 === glass ? defaultGlassProps : {
+            children: glass ? (() => {
+                const defaultGlassProps = GLASS_DEFAULTS.DROPDOWN, glassProps = !0 === glass ? defaultGlassProps : {
                     ...defaultGlassProps,
                     ...glass
                 };
@@ -12614,16 +12859,8 @@ const Input =  React.memo( React.forwardRef((({type: type = "text", value: value
             ...style
         } : style
     });
-    if (glass) {
-        // Default glass settings for inputs
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1,
-            saturation: 180,
-            aberrationIntensity: .2,
-            borderRadius: 12,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+    if (glass) {
+        const defaultGlassProps = GLASS_DEFAULTS.INPUT, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -12807,498 +13044,292 @@ function useHero(initialProps) {
             customClass && classes.push(customClass), classes.join(" ");
         },
         generateContentColClass: (size = defaultProps.contentColSize || 5, customClass) => {
-            const classes = [ `o-grid__col o-grid__col--md-${size}` ];
-            // Handle mobile stacking order
-                        return defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-last u-order-md-first") : classes.push("u-order-first u-order-md-last")), 
-            customClass && classes.push(customClass), classes.join(" ");
-        },
-        hasBackgroundImage: hasBackgroundImage,
-        hasForegroundImage: hasForegroundImage,
-        useGridLayout: useGridLayout,
-        heroRef: heroRef,
-        videoRef: videoRef,
-        applyParallaxEffect: applyParallaxEffect,
-        removeParallaxEffect: removeParallaxEffect,
-        backgroundSlider: backgroundSlider,
-        hasBackgroundSlider: hasBackgroundSlider
-    };
-}
-
-/**
- * Hook for River component functionality
- * @param initialProps - Initial river props
- * @returns River methods and state
- */ function useRiver(initialProps) {
-    const defaultProps = {
-        center: !1,
-        breakout: !1,
-        reverse: !1,
-        imageAlt: "Image",
-        showOverlay: !0,
-        ...initialProps
-    };
-    /**
-   * Check if the river has a background image
-   */    return {
-        generateRiverClassNames: (baseClassName = "") => {
-            const classes = [ RIVER.SELECTORS.RIVER.replace(".", "") ];
-            // Add layout classes
-                        return defaultProps.center && classes.push(RIVER.CLASSES.CENTER), defaultProps.breakout && classes.push(RIVER.CLASSES.BREAKOUT), 
-            defaultProps.reverse && classes.push(RIVER.CLASSES.REVERSE), baseClassName && classes.push(baseClassName), 
-            classes.join(" ");
-        },
-        generateContentClass: () => RIVER.SELECTORS.CONTENT.replace(".", ""),
-        generateVisualClass: () => RIVER.SELECTORS.VISUAL.replace(".", ""),
-        hasBackgroundImage: !!defaultProps.backgroundImageSrc,
-        hasForegroundImage: !!defaultProps.imageSrc,
-        textContent: "string" == typeof defaultProps.text ? [ defaultProps.text ] : defaultProps.text || []
-    };
-}
-
-/**
- * Navbar state and functionality
- * @param initialProps - Initial navbar properties
- * @returns Navbar state and methods
- */ function useNavbar(initialProps) {
-    // Default navbar properties
-    const defaultProps = {
-        position: "static",
-        collapsible: !0,
-        backdrop: !1,
-        closeOnOutsideClick: !0,
-        closeOnEscape: !0,
-        "aria-label": "Main navigation",
-        ...initialProps
-    }, [isExpanded, setIsExpanded] = React.useState(defaultProps.expanded || !1);
-    // Local expanded state for when not controlled externally
-        return {
-        defaultProps: defaultProps,
-        isExpanded: isExpanded,
-        setIsExpanded: setIsExpanded,
-        generateNavbarClass: props => {
-            const {position: position = defaultProps.position, variant: variant, collapsible: collapsible = defaultProps.collapsible, className: className = ""} = props;
-            return `c-navbar ${"static" !== position ? `c-navbar--${position}` : ""} ${variant ? `c-navbar--${variant}` : ""} ${collapsible ? "c-navbar--collapsible" : ""} ${className}`.trim();
-        },
-        generateContainerStyle: width => width ? {
-            maxWidth: width
-        } : {},
-        generateCollapseClass: expanded => ("c-navbar__collapse " + (expanded ? "is-expanded" : "")).trim(),
-        toggleExpanded: () => {
-            const newState = !isExpanded;
-            setIsExpanded(newState), defaultProps.onToggle && defaultProps.onToggle(newState);
-        },
-        getExpandedState: controlled => void 0 !== controlled ? controlled : isExpanded
-    };
-}
-
-/**
- * Nav state and functionality
- * @param initialProps - Initial nav properties
- * @returns Nav state and methods
- */ function useNav(initialProps) {
-    // Default nav properties
-    const defaultProps = {
-        alignment: "start",
-        variant: "default",
-        ...initialProps
-    };
-    /**
-   * Generate nav class based on properties
-   * @param props - Nav properties
-   * @returns Class string
-   */    return {
-        defaultProps: defaultProps,
-        generateNavClass: props => {
-            const {alignment: alignment = defaultProps.alignment, variant: variant = defaultProps.variant, className: className = ""} = props;
-            return `c-nav ${"start" !== alignment ? `c-nav--${alignment}` : ""} ${"default" !== variant ? `c-nav--${variant}` : ""} ${className}`.trim();
-        }
-    };
-}
-
-/**
- * Nav item state and functionality
- * @param initialProps - Initial nav item properties
- * @returns Nav item state and methods
- */ function useNavItem(initialProps) {
-    // Default nav item properties
-    const defaultProps = {
-        dropdown: !1,
-        megaMenu: !1,
-        active: !1,
-        ...initialProps
-    };
-    /**
-   * Generate nav item class based on properties
-   * @param props - Nav item properties
-   * @returns Class string
-   */    return {
-        defaultProps: defaultProps,
-        generateNavItemClass: props => {
-            const {dropdown: dropdown = defaultProps.dropdown, megaMenu: megaMenu = defaultProps.megaMenu, active: active = defaultProps.active, disabled: disabled = defaultProps.disabled, className: className = ""} = props;
-            // Apply dropdown class only for regular dropdowns, not mega menus
-                        return `c-nav__item ${dropdown && !megaMenu ? NAV.SELECTORS.DROPDOWN.replace(".", "") : ""} ${megaMenu ? "c-nav__item--mega-menu" : ""} ${active ? NAV.CLASSES.ACTIVE : ""} ${disabled ? NAV.CLASSES.DISABLED : ""} ${className}`.trim();
-        },
-        generateNavLinkClass: (active = !1, disabled = !1, className = "") => `c-nav__link ${active ? NAV.CLASSES.ACTIVE : ""} ${disabled ? "c-nav__link--disabled" : ""} ${className}`.trim(),
-        handleClick: handler => e => {
-            !defaultProps.disabled && handler ? handler() : e.preventDefault();
-        }
-    };
-}
-
-/**
- * Nav dropdown state and functionality
- * @param initialProps - Initial dropdown properties
- * @returns Dropdown state and methods
- */ function useNavDropdown(initialProps) {
-    // Default dropdown properties
-    const defaultProps = {
-        alignment: "start",
-        megaMenu: !1,
-        ...initialProps
-    }, isInFixedBottomNavbar = () => null !== document.querySelector(".c-navbar--fixed-bottom");
-    /**
-   * Generate dropdown menu class based on properties
-   * @param props - Dropdown properties
-   * @returns Class string
-   */    return {
-        defaultProps: defaultProps,
-        generateDropdownMenuClass: props => {
-            const {alignment: alignment = defaultProps.alignment, megaMenu: megaMenu = defaultProps.megaMenu, className: className = ""} = props, baseClass = megaMenu ? NAV.SELECTORS.MEGA_MENU.replace(".", "") : NAV.SELECTORS.DROPDOWN_MENU.replace(".", "");
-            // Select the base class based on mega menu or regular dropdown
-                        // Add alignment class if not default 'start'
-            let alignmentClass = "";
-            return "center" === alignment ? alignmentClass = `${baseClass}--center` : "end" === alignment && (alignmentClass = `${baseClass}--end`), 
-            `${baseClass} ${alignmentClass} ${className}`.trim();
-        },
-        isInFixedBottomNavbar: isInFixedBottomNavbar,
-        getIconName: (isMegaMenu = !1) => isInFixedBottomNavbar() ? "CaretUp" : "CaretDown"
-    };
-}
-
-/**
- * SideMenu state and functionality
- * @param initialProps - Initial side menu properties
- * @returns SideMenu state and methods
- */ function useSideMenu(initialProps) {
-    const {collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, isOpen: isOpen, onToggle: onToggle, disabled: disabled = !1} = initialProps || {}, [isOpenState, setIsOpenState] = React.useState(void 0 !== defaultCollapsedDesktop ? !defaultCollapsedDesktop : isOpen || !1), wrapperRef = React.useRef(null), innerRef = React.useRef(null), sideMenuRef = React.useRef(null);
-    // Local open state for when not controlled externally
-        // Update local state when external state changes
-    React.useEffect((() => {
-        void 0 !== isOpen ? setIsOpenState(isOpen) : void 0 !== defaultCollapsedDesktop && setIsOpenState(!defaultCollapsedDesktop);
-    }), [ isOpen, defaultCollapsedDesktop ]), 
-    // Set initial height on mount
-    React.useEffect((() => {
-        const shouldCollapse = window.innerWidth < 768 ? collapsible : collapsibleDesktop, currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
-        if (shouldCollapse && wrapperRef.current && innerRef.current) {
-            // Use setTimeout to ensure DOM is fully rendered
-            const timeoutId = setTimeout((() => {
-                wrapperRef.current && innerRef.current && (wrapperRef.current.style.height = currentOpen ? `${innerRef.current.scrollHeight}px` : "0px");
-            }), 0);
-            return () => clearTimeout(timeoutId);
-        }
-        !shouldCollapse && wrapperRef.current && (wrapperRef.current.style.height = "auto");
-    }), [ collapsible, collapsibleDesktop, isOpen, isOpenState ]), 
-    // Handle responsive behavior - vertical collapse for both mobile and desktop
-    React.useEffect((() => {
-        const handleResize = () => {
-            if (window.innerWidth < 768 ? collapsible : collapsibleDesktop) {
-                if (wrapperRef.current && innerRef.current) {
-                    // Set proper height for vertical animation (both mobile and desktop)
-                    const currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
-                    // Use requestAnimationFrame to ensure DOM is ready
-                                        requestAnimationFrame((() => {
-                        wrapperRef.current && innerRef.current && (wrapperRef.current.style.height = currentOpen ? `${innerRef.current.scrollHeight}px` : "0px");
-                    }));
-                }
-            } else 
-            // Not collapsible - always show content
-            wrapperRef.current && (wrapperRef.current.style.height = "auto");
-        }, timeoutId = setTimeout(handleResize, 0);
-        // Initial call with a small delay to ensure DOM is ready
-                return window.addEventListener("resize", handleResize), () => {
-            clearTimeout(timeoutId), window.removeEventListener("resize", handleResize);
-        };
-    }), [ collapsible, collapsibleDesktop, isOpen, onToggle, isOpenState ]), 
-    // Update wrapper height when open state changes (both mobile and desktop)
-    React.useEffect((() => {
-        const shouldCollapse = window.innerWidth < 768 ? collapsible : collapsibleDesktop;
-        if (shouldCollapse && wrapperRef.current && innerRef.current) {
-            const currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
-            // Use requestAnimationFrame to ensure DOM is ready
-                        requestAnimationFrame((() => {
-                wrapperRef.current && innerRef.current && (wrapperRef.current.style.height = currentOpen ? `${innerRef.current.scrollHeight}px` : "0px");
-            }));
-        } else !shouldCollapse && wrapperRef.current && (
-        // Not collapsible - always show content
-        wrapperRef.current.style.height = "auto");
-    }), [ isOpen, isOpenState, collapsible, collapsibleDesktop ]);
-    /**
-   * Generate side menu class based on properties
-   * @param props - Side menu properties
-   * @returns Class string
-   */
-    const handleToggle = () => {
-        if (disabled) return;
-        const newState = void 0 !== isOpen ? !isOpen : !isOpenState;
-        "function" == typeof onToggle ? 
-        // Controlled component
-        onToggle(newState) : 
-        // Uncontrolled component
-        setIsOpenState(newState);
-    }, getCurrentOpenState = () => void 0 !== isOpen ? isOpen : isOpenState;
-    /**
-   * Generate wrapper class
-   * @returns Class string
-   */    return {
-        isOpenState: getCurrentOpenState(),
-        wrapperRef: wrapperRef,
-        innerRef: innerRef,
-        sideMenuRef: sideMenuRef,
-        generateSideMenuClass: props => {
-            const {className: className = "", isOpen: isOpen = !1} = props, openClass = isOpen ? SIDE_MENU.CLASSES.IS_OPEN : "";
-            return `${SIDE_MENU.CLASSES.BASE} ${openClass} ${className}`.trim();
-        },
-        generateWrapperClass: () => SIDE_MENU.CLASSES.WRAPPER,
-        handleToggle: handleToggle,
-        handleDesktopCollapse: () => {
-            handleToggle();
+            const classes = [ `o-grid__col o-grid__col--md-${size}` ];
+            // Handle mobile stacking order
+                        return defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-last u-order-md-first") : classes.push("u-order-first u-order-md-last")), 
+            customClass && classes.push(customClass), classes.join(" ");
         },
-        getCurrentOpenState: getCurrentOpenState
+        hasBackgroundImage: hasBackgroundImage,
+        hasForegroundImage: hasForegroundImage,
+        useGridLayout: useGridLayout,
+        heroRef: heroRef,
+        videoRef: videoRef,
+        applyParallaxEffect: applyParallaxEffect,
+        removeParallaxEffect: removeParallaxEffect,
+        backgroundSlider: backgroundSlider,
+        hasBackgroundSlider: hasBackgroundSlider
     };
 }
 
 /**
- * SideMenuItem state and functionality
- * @param initialProps - Initial side menu item properties
- * @returns SideMenuItem state and methods
- */ function useSideMenuItem(initialProps) {
-    // Default side menu item properties
+ * Hook for River component functionality
+ * @param initialProps - Initial river props
+ * @returns River methods and state
+ */ function useRiver(initialProps) {
     const defaultProps = {
-        active: !1,
-        disabled: !1,
+        center: !1,
+        breakout: !1,
+        reverse: !1,
+        imageAlt: "Image",
+        showOverlay: !0,
         ...initialProps
     };
     /**
-   * Generate side menu item class based on properties
-   * @returns Class string
+   * Check if the river has a background image
    */    return {
-        defaultProps: defaultProps,
-        generateSideMenuItemClass: () => {
-            const {active: active = defaultProps.active, disabled: disabled = defaultProps.disabled, className: className = ""} = defaultProps, activeClass = active ? SIDE_MENU.CLASSES.ACTIVE : "", disabledClass = disabled ? SIDE_MENU.CLASSES.DISABLED : "";
-            return `${SIDE_MENU.CLASSES.LINK} ${activeClass} ${disabledClass} ${className}`.trim();
+        generateRiverClassNames: (baseClassName = "") => {
+            const classes = [ RIVER.SELECTORS.RIVER.replace(".", "") ];
+            // Add layout classes
+                        return defaultProps.center && classes.push(RIVER.CLASSES.CENTER), defaultProps.breakout && classes.push(RIVER.CLASSES.BREAKOUT), 
+            defaultProps.reverse && classes.push(RIVER.CLASSES.REVERSE), baseClassName && classes.push(baseClassName), 
+            classes.join(" ");
         },
-        handleClick: handler => e => {
-            defaultProps.disabled ? e.preventDefault() : handler && handler(e);
-        }
+        generateContentClass: () => RIVER.SELECTORS.CONTENT.replace(".", ""),
+        generateVisualClass: () => RIVER.SELECTORS.VISUAL.replace(".", ""),
+        hasBackgroundImage: !!defaultProps.backgroundImageSrc,
+        hasForegroundImage: !!defaultProps.imageSrc,
+        textContent: "string" == typeof defaultProps.text ? [ defaultProps.text ] : defaultProps.text || []
     };
 }
 
 /**
- * Map SCSS tokens to CSS custom properties
- *
- * @example
- * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
- * const vars = mapSCSSTokensToCSSVars(tokens)
- * // Returns: { '--primary-color': '#7AFFD7', '--spacing-md': '16px' }
- */ function mapSCSSTokensToCSSVars(tokens, options = {}) {
-    const vars = {}, {prefix: prefix = "atomix", separator: separator = "-"} = options;
-    return Object.entries(tokens).forEach((([key, value]) => {
-        // Remove $ prefix from SCSS variables
-        const normalizedKey = (key.startsWith("$") ? key.slice(1) : key).replace(/_/g, separator);
-        // Convert underscores to separators
-                vars[`--${prefix}${separator}${normalizedKey}`] = String(value);
-    })), vars;
-}
-
-/**
- * Apply CSS variables to an element
- *
- * @param vars - CSS variables to apply
- * @param element - Target element (defaults to document.documentElement)
- */ function applyCSSVariables(vars, element) {
-    if ("undefined" == typeof window) return;
- // SSR safety
-        const target = element || document.documentElement;
-    Object.entries(vars).forEach((([key, value]) => {
-        target.style.setProperty(key, String(value));
-    }));
-}
-
-/**
- * Remove CSS variables from an element
- *
- * @param varNames - Variable names to remove
- * @param element - Target element (defaults to document.documentElement)
- */ function removeCSSVariables(varNames, element) {
-    if ("undefined" == typeof window) return;
- // SSR safety
-        const target = element || document.documentElement;
-    varNames.forEach((varName => {
-        target.style.removeProperty(varName);
-    }));
-}
-
-/**
- * Get CSS variable value from an element
- *
- * @param varName - Variable name to get
- * @param element - Target element (defaults to document.documentElement)
- * @returns Variable value or null if not found
- */ function getCSSVariable(varName, element) {
-    if ("undefined" == typeof window) return null;
- // SSR safety
-        const target = element || document.documentElement;
-    return getComputedStyle(target).getPropertyValue(varName).trim() || null;
-}
-
-/**
- * Convert CSS variable object to inline style object
- *
- * @example
- * const vars = { '--atomix-button-bg': '#000' }
- * const style = cssVarsToStyle(vars)
- * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
- */ function cssVarsToStyle(vars) {
-    var _context;
-    return _reduceInstanceProperty(_context = Object.entries(vars)).call(_context, ((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
-    acc)), {});
-}
-
-/**
- * Merge multiple CSS variable objects
- * Later objects override earlier ones
- */ function mergeCSSVars(...varObjects) {
-    return _reduceInstanceProperty(varObjects).call(varObjects, ((acc, vars) => (vars && Object.assign(acc, vars), 
-    acc)), {});
-}
-
-/**
- * Validate CSS variable name format
- */ function isValidCSSVariableName(name) {
-    return /^--[a-z0-9-]+$/.test(name);
-}
-
-/**
- * Extract component name from CSS variable name
- *
- * @example
- * extractComponentName('--atomix-button-bg')
- * // Returns: 'button'
- */ function extractComponentName(varName, prefix = "atomix") {
-    const regex = new RegExp(`^--${prefix}-([a-z0-9]+)-`), match = varName.match(regex);
-    return match ? match[1] ?? null : null;
-}
-
-/**
- * Component Utilities
- *
- * Helper functions for component development with the new customization system
- */
-/**
- * Merge multiple class names
- */ function mergeClassNames(...classes) {
-    return classes.filter(Boolean).join(" ");
+ * Navbar state and functionality
+ * @param initialProps - Initial navbar properties
+ * @returns Navbar state and methods
+ */ function useNavbar(initialProps) {
+    // Default navbar properties
+    const defaultProps = {
+        position: "static",
+        collapsible: !0,
+        backdrop: !1,
+        closeOnOutsideClick: !0,
+        closeOnEscape: !0,
+        "aria-label": "Main navigation",
+        ...initialProps
+    }, [isExpanded, setIsExpanded] = React.useState(defaultProps.expanded || !1);
+    // Local expanded state for when not controlled externally
+        return {
+        defaultProps: defaultProps,
+        isExpanded: isExpanded,
+        setIsExpanded: setIsExpanded,
+        generateNavbarClass: props => {
+            const {position: position = defaultProps.position, variant: variant, collapsible: collapsible = defaultProps.collapsible, className: className = ""} = props;
+            return `c-navbar ${"static" !== position ? `c-navbar--${position}` : ""} ${variant ? `c-navbar--${variant}` : ""} ${collapsible ? "c-navbar--collapsible" : ""} ${className}`.trim();
+        },
+        generateContainerStyle: width => width ? {
+            maxWidth: width
+        } : {},
+        generateCollapseClass: expanded => ("c-navbar__collapse " + (expanded ? "is-expanded" : "")).trim(),
+        toggleExpanded: () => {
+            const newState = !isExpanded;
+            setIsExpanded(newState), defaultProps.onToggle && defaultProps.onToggle(newState);
+        },
+        getExpandedState: controlled => void 0 !== controlled ? controlled : isExpanded
+    };
 }
 
 /**
- * Apply part styles to element props
- */ function applyPartStyles(baseProps, partStyles) {
-    return partStyles ? {
-        ...baseProps,
-        className: mergeClassNames(baseProps.className, partStyles.className),
-        style: {
-            ...baseProps.style,
-            ...partStyles.style
+ * Nav state and functionality
+ * @param initialProps - Initial nav properties
+ * @returns Nav state and methods
+ */ function useNav(initialProps) {
+    // Default nav properties
+    const defaultProps = {
+        alignment: "start",
+        variant: "default",
+        ...initialProps
+    };
+    /**
+   * Generate nav class based on properties
+   * @param props - Nav properties
+   * @returns Class string
+   */    return {
+        defaultProps: defaultProps,
+        generateNavClass: props => {
+            const {alignment: alignment = defaultProps.alignment, variant: variant = defaultProps.variant, className: className = ""} = props;
+            return `c-nav ${"start" !== alignment ? `c-nav--${alignment}` : ""} ${"default" !== variant ? `c-nav--${variant}` : ""} ${className}`.trim();
         }
-    } : baseProps;
+    };
 }
 
 /**
- * Create style object from CSS variables
- */ function createCSSVarStyle(cssVars, baseStyle) {
-    return cssVars ? {
-        ...cssVarsToStyle(cssVars),
-        ...baseStyle
-    } : baseStyle || {};
-}
-
-function mergeComponentProps(baseProps, customization) {
-    const {className: className, style: style, cssVars: cssVars, parts: parts} = customization, cssVarStyle = cssVars ? cssVarsToStyle(cssVars) : {};
-    // Merge CSS variables into style
-        return {
-        ...baseProps,
-        className: mergeClassNames(baseProps.className, className),
-        style: {
-            ...cssVarStyle,
-            ...baseProps.style,
-            ...style
+ * Nav item state and functionality
+ * @param initialProps - Initial nav item properties
+ * @returns Nav item state and methods
+ */ function useNavItem(initialProps) {
+    // Default nav item properties
+    const defaultProps = {
+        dropdown: !1,
+        megaMenu: !1,
+        active: !1,
+        ...initialProps
+    };
+    /**
+   * Generate nav item class based on properties
+   * @param props - Nav item properties
+   * @returns Class string
+   */    return {
+        defaultProps: defaultProps,
+        generateNavItemClass: props => {
+            const {dropdown: dropdown = defaultProps.dropdown, megaMenu: megaMenu = defaultProps.megaMenu, active: active = defaultProps.active, disabled: disabled = defaultProps.disabled, className: className = ""} = props;
+            // Apply dropdown class only for regular dropdowns, not mega menus
+                        return `c-nav__item ${dropdown && !megaMenu ? NAV.SELECTORS.DROPDOWN.replace(".", "") : ""} ${megaMenu ? "c-nav__item--mega-menu" : ""} ${active ? NAV.CLASSES.ACTIVE : ""} ${disabled ? NAV.CLASSES.DISABLED : ""} ${className}`.trim();
+        },
+        generateNavLinkClass: (active = !1, disabled = !1, className = "") => `c-nav__link ${active ? NAV.CLASSES.ACTIVE : ""} ${disabled ? "c-nav__link--disabled" : ""} ${className}`.trim(),
+        handleClick: handler => e => {
+            !defaultProps.disabled && handler ? handler() : e.preventDefault();
         }
     };
 }
 
 /**
- * Get part styles from parts object
- */ function getPartStyles(parts, partName) {
-    return parts?.[partName];
+ * Nav dropdown state and functionality
+ * @param initialProps - Initial dropdown properties
+ * @returns Dropdown state and methods
+ */ function useNavDropdown(initialProps) {
+    // Default dropdown properties
+    const defaultProps = {
+        alignment: "start",
+        megaMenu: !1,
+        ...initialProps
+    }, isInFixedBottomNavbar = () => null !== document.querySelector(".c-navbar--fixed-bottom");
+    /**
+   * Generate dropdown menu class based on properties
+   * @param props - Dropdown properties
+   * @returns Class string
+   */    return {
+        defaultProps: defaultProps,
+        generateDropdownMenuClass: props => {
+            const {alignment: alignment = defaultProps.alignment, megaMenu: megaMenu = defaultProps.megaMenu, className: className = ""} = props, baseClass = megaMenu ? NAV.SELECTORS.MEGA_MENU.replace(".", "") : NAV.SELECTORS.DROPDOWN_MENU.replace(".", "");
+            // Select the base class based on mega menu or regular dropdown
+                        // Add alignment class if not default 'start'
+            let alignmentClass = "";
+            return "center" === alignment ? alignmentClass = `${baseClass}--center` : "end" === alignment && (alignmentClass = `${baseClass}--end`), 
+            `${baseClass} ${alignmentClass} ${className}`.trim();
+        },
+        isInFixedBottomNavbar: isInFixedBottomNavbar,
+        getIconName: (isMegaMenu = !1) => isInFixedBottomNavbar() ? "CaretUp" : "CaretDown"
+    };
 }
 
 /**
- * Create element props with part styles
- */ function createPartProps(baseClassName, partStyles, additionalProps) {
-    return {
-        ...additionalProps,
-        className: mergeClassNames(baseClassName, partStyles?.className),
-        style: {
-            ...partStyles?.style,
-            ...additionalProps?.style
+ * SideMenu state and functionality
+ * @param initialProps - Initial side menu properties
+ * @returns SideMenu state and methods
+ */ function useSideMenu(initialProps) {
+    const {collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, isOpen: isOpen, onToggle: onToggle, disabled: disabled = !1} = initialProps || {}, [isOpenState, setIsOpenState] = React.useState(void 0 !== defaultCollapsedDesktop ? !defaultCollapsedDesktop : isOpen || !1), wrapperRef = React.useRef(null), innerRef = React.useRef(null), sideMenuRef = React.useRef(null);
+    // Local open state for when not controlled externally
+        // Update local state when external state changes
+    React.useEffect((() => {
+        void 0 !== isOpen ? setIsOpenState(isOpen) : void 0 !== defaultCollapsedDesktop && setIsOpenState(!defaultCollapsedDesktop);
+    }), [ isOpen, defaultCollapsedDesktop ]), 
+    // Set initial height on mount
+    React.useEffect((() => {
+        const shouldCollapse = window.innerWidth < 768 ? collapsible : collapsibleDesktop, currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
+        if (shouldCollapse && wrapperRef.current && innerRef.current) {
+            // Use setTimeout to ensure DOM is fully rendered
+            const timeoutId = setTimeout((() => {
+                wrapperRef.current && innerRef.current && (wrapperRef.current.style.height = currentOpen ? `${innerRef.current.scrollHeight}px` : "0px");
+            }), 0);
+            return () => clearTimeout(timeoutId);
         }
+        !shouldCollapse && wrapperRef.current && (wrapperRef.current.style.height = "auto");
+    }), [ collapsible, collapsibleDesktop, isOpen, isOpenState ]), 
+    // Handle responsive behavior - vertical collapse for both mobile and desktop
+    React.useEffect((() => {
+        const handleResize = () => {
+            if (window.innerWidth < 768 ? collapsible : collapsibleDesktop) {
+                if (wrapperRef.current && innerRef.current) {
+                    // Set proper height for vertical animation (both mobile and desktop)
+                    const currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
+                    // Use requestAnimationFrame to ensure DOM is ready
+                                        requestAnimationFrame((() => {
+                        wrapperRef.current && innerRef.current && (wrapperRef.current.style.height = currentOpen ? `${innerRef.current.scrollHeight}px` : "0px");
+                    }));
+                }
+            } else 
+            // Not collapsible - always show content
+            wrapperRef.current && (wrapperRef.current.style.height = "auto");
+        }, timeoutId = setTimeout(handleResize, 0);
+        // Initial call with a small delay to ensure DOM is ready
+                return window.addEventListener("resize", handleResize), () => {
+            clearTimeout(timeoutId), window.removeEventListener("resize", handleResize);
+        };
+    }), [ collapsible, collapsibleDesktop, isOpen, onToggle, isOpenState ]), 
+    // Update wrapper height when open state changes (both mobile and desktop)
+    React.useEffect((() => {
+        const shouldCollapse = window.innerWidth < 768 ? collapsible : collapsibleDesktop;
+        if (shouldCollapse && wrapperRef.current && innerRef.current) {
+            const currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
+            // Use requestAnimationFrame to ensure DOM is ready
+                        requestAnimationFrame((() => {
+                wrapperRef.current && innerRef.current && (wrapperRef.current.style.height = currentOpen ? `${innerRef.current.scrollHeight}px` : "0px");
+            }));
+        } else !shouldCollapse && wrapperRef.current && (
+        // Not collapsible - always show content
+        wrapperRef.current.style.height = "auto");
+    }), [ isOpen, isOpenState, collapsible, collapsibleDesktop ]);
+    /**
+   * Generate side menu class based on properties
+   * @param props - Side menu properties
+   * @returns Class string
+   */
+    const handleToggle = () => {
+        if (disabled) return;
+        const newState = void 0 !== isOpen ? !isOpen : !isOpenState;
+        "function" == typeof onToggle ? 
+        // Controlled component
+        onToggle(newState) : 
+        // Uncontrolled component
+        setIsOpenState(newState);
+    }, getCurrentOpenState = () => void 0 !== isOpen ? isOpen : isOpenState;
+    /**
+   * Generate wrapper class
+   * @returns Class string
+   */    return {
+        isOpenState: getCurrentOpenState(),
+        wrapperRef: wrapperRef,
+        innerRef: innerRef,
+        sideMenuRef: sideMenuRef,
+        generateSideMenuClass: props => {
+            const {className: className = "", isOpen: isOpen = !1} = props, openClass = isOpen ? SIDE_MENU.CLASSES.IS_OPEN : "";
+            return `${SIDE_MENU.CLASSES.BASE} ${openClass} ${className}`.trim();
+        },
+        generateWrapperClass: () => SIDE_MENU.CLASSES.WRAPPER,
+        handleToggle: handleToggle,
+        handleDesktopCollapse: () => {
+            handleToggle();
+        },
+        getCurrentOpenState: getCurrentOpenState
     };
 }
 
 /**
- * Check if component has customization
- */ function hasCustomization(props) {
-    return Boolean(props.parts || props.cssVars || props.slots);
-}
-
-/**
- * Create data attributes for debugging
- */ function createDebugAttrs(componentName, variant) {
-    return "undefined" == typeof process || "development" !== process.env?.NODE_ENV ? {} : {
-        "data-component": componentName,
-        ...variant && {
-            "data-variant": variant
+ * SideMenuItem state and functionality
+ * @param initialProps - Initial side menu item properties
+ * @returns SideMenuItem state and methods
+ */ function useSideMenuItem(initialProps) {
+    // Default side menu item properties
+    const defaultProps = {
+        active: !1,
+        disabled: !1,
+        ...initialProps
+    };
+    /**
+   * Generate side menu item class based on properties
+   * @returns Class string
+   */    return {
+        defaultProps: defaultProps,
+        generateSideMenuItemClass: () => {
+            const {active: active = defaultProps.active, disabled: disabled = defaultProps.disabled, className: className = ""} = defaultProps, activeClass = active ? SIDE_MENU.CLASSES.ACTIVE : "", disabledClass = disabled ? SIDE_MENU.CLASSES.DISABLED : "";
+            return `${SIDE_MENU.CLASSES.LINK} ${activeClass} ${disabledClass} ${className}`.trim();
+        },
+        handleClick: handler => e => {
+            defaultProps.disabled ? e.preventDefault() : handler && handler(e);
         }
     };
 }
 
-/**
- * Generate a UUID v4
- */ function generateUUID() {
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c => {
-        const r = 16 * Math.random() | 0;
-        return ("x" === c ? r : 3 & r | 8).toString(16);
-    }));
-}
-
-/**
- * Check if a URL is a YouTube URL
- */ function isYouTubeUrl(url) {
-    return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/.test(url);
-}
-
-/**
- * Extract YouTube video ID from URL
- */ function extractYouTubeId(url) {
-    if (!isYouTubeUrl(url)) return null;
-    const patterns = [ /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/, /youtube\.com\/.*[?&]v=([^&\n?#]+)/ ];
-    for (const pattern of patterns) {
-        const match = url.match(pattern);
-        if (match && match[1]) return match[1];
-    }
-    return null;
-}
-
 /**
  * Font Preloading Utilities
  *
@@ -13664,48 +13695,11 @@ var composablesImport =  Object.freeze({
     DeviceDetector: DeviceDetector,
     MOBILE_OPTIMIZED_BREAKPOINTS: MOBILE_OPTIMIZED_BREAKPOINTS,
     PERFORMANCE_PRESET: PERFORMANCE_PRESET,
-    PerformanceOverlay: function({metrics: metrics}) {
-        return null;
-        // Performance overlay removed - will be implemented as separate component
-        }
-    /**
- * Utility to get quality multipliers for glass parameters
- */ ,
     QUALITY_PRESET: QUALITY_PRESET,
     createBreakpoints: createBreakpoints$1,
     getDefaultBreakpoints: getDefaultBreakpoints,
     getDevicePreset: getDevicePreset,
     getMobileOptimizedParams: getMobileOptimizedParams,
-    getQualityMultipliers: function(quality) {
-        switch (quality) {
-          case "low":
-            return {
-                distortionOctaves: 2,
-                displacementScale: .6,
-                blurAmount: .7,
-                animationSpeed: .8,
-                chromaticIntensity: .5
-            };
-
-          case "medium":
-            return {
-                distortionOctaves: 4,
-                displacementScale: .85,
-                blurAmount: .9,
-                animationSpeed: .95,
-                chromaticIntensity: .75
-            };
-
-          case "high":
-            return {
-                distortionOctaves: 5,
-                displacementScale: 1,
-                blurAmount: 1,
-                animationSpeed: 1,
-                chromaticIntensity: 1
-            };
-        }
-    },
     useAccordion: useAccordion,
     useAtomixGlass: useAtomixGlass,
     useBadge: useBadge,
@@ -14008,12 +14002,7 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
     });
     // Handle item selection
         if (glass) {
-        // Default glass settings for select components
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 10,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.SELECT, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -14063,15 +14052,7 @@ const Radio =  React.memo((({label: label, checked: checked = !1, onChange: onCh
         }) ]
     });
     if (glass) {
-        // Default glass settings for radio buttons
-        const defaultGlassProps = {
-            displacementScale: 40,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .3,
-            borderRadius: 6,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.RADIO, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -14129,15 +14110,7 @@ const Textarea =  React.memo( React.forwardRef((({value: value, defaultValue: de
         } : style
     });
     if (glass) {
-        // Default glass settings for textareas
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1,
-            saturation: 180,
-            aberrationIntensity: 1,
-            borderRadius: 8,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.TEXTAREA, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -15260,12 +15233,7 @@ const Messages = ({messages: messages = [], otherAvatar: otherAvatar, selfAvatar
         };
     })({
         onSendMessage: onSendMessage
-    }), messagesId = id || `messages-${Math.random().toString(36).substr(2, 9)}`, inputId = `${messagesId}-input`, defaultGlassProps = {
-        displacementScale: 150,
-        borderRadius: 12,
-        elasticity: 0,
-        aberrationIntensity: 2
-    }, messagesClasses = `${MESSAGES.CLASSES.BASE} ${glass ? "c-messages--glass" : ""} ${disabled ? "is-disabled" : ""} ${className}`, messagesContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }), messagesId = id || `messages-${Math.random().toString(36).substr(2, 9)}`, inputId = `${messagesId}-input`, defaultGlassProps = GLASS_DEFAULTS.MESSAGES, messagesClasses = `${MESSAGES.CLASSES.BASE} ${glass ? "c-messages--glass" : ""} ${disabled ? "is-disabled" : ""} ${className}`, messagesContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ jsxRuntime.jsx("div", {
             className: MESSAGES.CLASSES.BODY,
             style: bodyHeight ? {
@@ -15625,12 +15593,11 @@ const ModalImpl =  React.memo((({children: children, isOpen: isOpen = !1, onOpen
             children: glass ? 
             // Default glass settings for modals
             (() => {
+                // Default glass settings for modals
                 const defaultGlassProps = {
-                    displacementScale: document.querySelector(".c-modal---glass .c-modal__content")?.clientHeight,
-                    blurAmount: 2.2,
-                    elasticity: 0,
-                    mode: "shader",
-                    shaderMode: "premiumGlass"
+                    ...GLASS_DEFAULTS.MODAL,
+                    // displacementScale driven by modal content height at runtime
+                    displacementScale: document.querySelector(".c-modal---glass .c-modal__content")?.clientHeight
                 }, glassProps = !0 === glass ? defaultGlassProps : {
                     ...defaultGlassProps,
                     ...glass
@@ -15678,12 +15645,7 @@ const Modal = ModalWithSubcomponents, Nav =  React.forwardRef((({children: child
         }))
     });
     if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1.5,
-            borderRadius: 8,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.NAV, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -15709,24 +15671,7 @@ const Modal = ModalWithSubcomponents, Nav =  React.forwardRef((({children: child
  *   </NavDropdown>
  * </Nav>
  * ```
- */
-/**
- * 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__default.default.useMemo((() => null == refA && null == refB ? null : refValue => {
-        setRef(refA, refValue), setRef(refB, refValue);
-    }), [ refA, refB ]);
-}
+ */ Nav.displayName = "Nav";
 
 /**
  * NavItem component represents a single navigation item that can be a link, dropdown trigger, or mega menu trigger.
@@ -15755,8 +15700,7 @@ function setRef(ref, value) {
  *   </MegaMenu>
  * </NavItem>
  * ```
- */ Nav.displayName = "Nav";
-
+ */
 const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1, megaMenu: megaMenu = !1, active: active = !1, href: href, target: target, onClick: onClick, className: className = "", disabled: disabled = !1, "aria-expanded": ariaExpanded, linkComponent: linkComponent}, ref) => {
     const {generateNavItemClass: generateNavItemClass, generateNavLinkClass: generateNavLinkClass, handleClick: handleClick} = useNavItem({
         dropdown: dropdown,
@@ -15929,14 +15873,7 @@ const Navbar =  React.forwardRef((({brand: brand, children: children, variant: v
     });
     // Generate the container style
         if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 30,
-            blurAmount: 2,
-            borderRadius: 0,
-            elasticity: 0,
-            mode: "shader",
-            shaderVariant: "premiumGlass"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.NAVBAR, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         }, isFixed = "fixed" === position || "fixed-bottom" === position;
@@ -16294,12 +16231,7 @@ const SideMenu =  React.forwardRef((({title: title, children: children, menuItem
         }) ]
     });
     if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 70,
-            blurAmount: 2,
-            borderRadius: 12,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.SIDE_MENU, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -17896,14 +17828,7 @@ const PopoverContext =  React.createContext({
             children: [ glass ? 
             // Default glass settings for popovers
             (() => {
-                const defaultGlassProps = {
-                    displacementScale: 50,
-                    blurAmount: 1,
-                    saturation: 160,
-                    aberrationIntensity: .5,
-                    borderRadius: 8,
-                    mode: "shader"
-                }, glassProps = !0 === glass ? defaultGlassProps : {
+                const defaultGlassProps = GLASS_DEFAULTS.POPOVER, glassProps = !0 === glass ? defaultGlassProps : {
                     ...defaultGlassProps,
                     ...glass
                 };
@@ -18128,15 +18053,7 @@ const calculateStarValue = (e, starValue, allowHalf) => {
     });
     // Generate stars
         if (glass) {
-        // Default glass settings for ratings
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .5,
-            borderRadius: 8,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.RATING, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -18292,12 +18209,7 @@ const Progress =  React.memo( React.forwardRef((({value: value, variant: variant
         })
     });
     if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 30,
-            blurAmount: .5,
-            borderRadius: 8,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.PROGRESS, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -18946,15 +18858,7 @@ const Steps = ({items: items, activeIndex: activeIndex = 0, vertical: vertical =
         children: content
     });
     if (glass) {
-        // Default glass settings for steps
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .5,
-            borderRadius: 8,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.STEPS, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -19158,14 +19062,7 @@ const TabsComponentBase = ({items: items, activeIndex: activeIndex = TAB.DEFAULT
     });
     if (glass) {
         // Default glass settings for tabs
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .5,
-            borderRadius: 8,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.TABS, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -19401,15 +19298,7 @@ const Toggle = ({checked: controlledChecked, defaultChecked: defaultChecked = !1
         })
     });
     if (glass) {
-        // Default glass settings for toggles
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .5,
-            borderRadius: 8,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS.TOGGLE, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -19597,10 +19486,7 @@ const Tooltip =  React.memo((({content: content, children: children, position: p
                     }), content ]
                 });
                 if (glass) {
-                    const defaultGlassProps = {
-                        displacementScale: 100,
-                        blurAmount: 3
-                    }, glassProps = !0 === glass ? defaultGlassProps : {
+                    const defaultGlassProps = GLASS_DEFAULTS.TOOLTIP, glassProps = !0 === glass ? defaultGlassProps : {
                         ...defaultGlassProps,
                         ...glass
                     };
@@ -20776,6 +20662,8 @@ var components =  Object.freeze({
     FOOTER: FOOTER,
     FORM: FORM,
     FORM_GROUP: FORM_GROUP,
+    GLASS_BORDER_GRADIENT: GLASS_BORDER_GRADIENT,
+    GLASS_DEFAULTS: GLASS_DEFAULTS,
     HERO: HERO,
     INPUT: INPUT,
     LIST: LIST,
@@ -28340,6 +28228,7 @@ exports.EDGE_PANEL = EDGE_PANEL, exports.EdgePanel = EdgePanel, exports.Elevatio
 exports.FOOTER = FOOTER, exports.FORM = FORM, exports.FORM_GROUP = FORM_GROUP, exports.Footer = Footer, 
 exports.FooterLink = FooterLink, exports.FooterSection = FooterSection, exports.FooterSocialLink = FooterSocialLink, 
 exports.Form = Form, exports.FormGroup = FormGroup, exports.FunnelChart = FunnelChart, 
+exports.GLASS_BORDER_GRADIENT = GLASS_BORDER_GRADIENT, exports.GLASS_DEFAULTS = GLASS_DEFAULTS, 
 exports.GaugeChart = GaugeChart, exports.Grid = Grid, exports.GridCol = GridCol, 
 exports.HERO = HERO, exports.HeatmapChart = HeatmapChart, exports.Hero = Hero, exports.INPUT = INPUT, 
 exports.INPUT_CSS_VARS = INPUT_CSS_VARS, exports.Icon = Icon, exports.Input = Input,