@shohojdhara/atomix 0.6.4 → 0.6.6

package/src/components/AtomixGlass/stories/premium-presets.ts

@@ -0,0 +1,206 @@
+/**
+ * Premium / Apple liquid-glass presets for AtomixGlass Storybook stories.
+ * Centralizes tuned displacement, blur, and saturation so previews stay consistent.
+ */
+import type { AtomixGlassProps } from '../../../lib/types/components';
+
+/** Curated backgrounds that show frost, tint, and depth well */
+export const premiumBackgrounds = [
+  'https://images.unsplash.com/photo-1614188973043-4ed7d383de37?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2000',
+  'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2128',
+  'https://images.unsplash.com/photo-1593433073755-4233a78ee359?q=80&w=1600&auto=format&fit=crop',
+  'https://images.unsplash.com/photo-1637825891028-564f672aa42c?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2000',
+  'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2000&auto=format&fit=crop',
+  'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2000',
+] as const;
+
+/** Apple Music–style dark canvas when no photo is needed */
+export const premiumDarkCanvas =
+  'radial-gradient(ellipse 110% 90% at 65% 15%, #5c1030 0%, #1a0a12 42%, #0a0a0c 100%)';
+
+export type PremiumGlassPreset = Pick<
+  AtomixGlassProps,
+  | 'displacementScale'
+  | 'blurAmount'
+  | 'saturation'
+  | 'aberrationIntensity'
+  | 'elasticity'
+  | 'borderRadius'
+  | 'mode'
+  | 'withLiquidBlur'
+  | 'withTimeAnimation'
+  | 'withMultiLayerDistortion'
+  | 'distortionQuality'
+  | 'animationSpeed'
+  | 'shaderVariant'
+>;
+
+/** Production-tuned glass recipes */
+export const PREMIUM_GLASS = {
+  /** Sidebar, nav bar, player chrome — minimal warp, deep blur */
+  chrome: {
+    displacementScale: 24,
+    blurAmount: 24,
+    saturation: 180,
+    aberrationIntensity: 0.4,
+    elasticity: 0,
+    borderRadius: 12,
+  },
+  /** Cards, modals, panels */
+  card: {
+    displacementScale: 28,
+    blurAmount: 20,
+    saturation: 180,
+    aberrationIntensity: 0.56,
+    elasticity: 0.05,
+    borderRadius: 16,
+  },
+  /** Floating pills, toolbars */
+  pill: {
+    displacementScale: 22,
+    blurAmount: 22,
+    saturation: 180,
+    aberrationIntensity: 0.35,
+    elasticity: 0,
+    borderRadius: 999,
+  },
+  /** Marketing hero — more presence, still refined */
+  hero: {
+    displacementScale: 48,
+    blurAmount: 28,
+    saturation: 185,
+    aberrationIntensity: 1.2,
+    elasticity: 0.08,
+    borderRadius: 24,
+    mode: 'prominent' as const,
+    withLiquidBlur: true,
+    withTimeAnimation: true,
+    withMultiLayerDistortion: true,
+    distortionQuality: 'high' as const,
+  },
+  /** Shader + FBM demos */
+  liquid: {
+    displacementScale: 40,
+    blurAmount: 26,
+    saturation: 185,
+    aberrationIntensity: 1,
+    elasticity: 0.06,
+    borderRadius: 22,
+    mode: 'shader' as const,
+    withTimeAnimation: true,
+    withMultiLayerDistortion: true,
+    withLiquidBlur: true,
+    distortionQuality: 'high' as const,
+    animationSpeed: 1,
+    shaderVariant: 'liquidGlass' as const,
+  },
+  /** Cinematic / showcase */
+  cinematic: {
+    displacementScale: 56,
+    blurAmount: 32,
+    saturation: 190,
+    aberrationIntensity: 1.4,
+    elasticity: 0.1,
+    borderRadius: 28,
+    mode: 'shader' as const,
+    withTimeAnimation: true,
+    withMultiLayerDistortion: true,
+    withLiquidBlur: true,
+    distortionQuality: 'ultra' as const,
+    animationSpeed: 1.1,
+    shaderVariant: 'appleFluid' as const,
+  },
+} satisfies Record<string, PremiumGlassPreset>;
+
+export const premiumTypography = {
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif',
+  titleGradient:
+    'linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.72) 100%)',
+  muted: 'rgba(255,255,255,0.72)',
+  dim: 'rgba(255,255,255,0.45)',
+} as const;
+
+/** Playground sidebar preset bundle (settings object shape) */
+export const createPlaygroundPresetSettings = (
+  glass: PremiumGlassPreset,
+  extras: Record<string, unknown> = {}
+) => ({
+  displacementScale: glass.displacementScale ?? 28,
+  blurAmount: glass.blurAmount ?? 20,
+  saturation: glass.saturation ?? 180,
+  aberrationIntensity: glass.aberrationIntensity ?? 0.56,
+  elasticity: glass.elasticity ?? 0,
+  borderRadius: glass.borderRadius ?? 16,
+  overLight: false,
+  reducedMotion: false,
+  highContrast: false,
+  withoutEffects: false,
+  withLiquidBlur: Boolean(glass.withLiquidBlur),
+  withBorder: true,
+  withTimeAnimation: Boolean(glass.withTimeAnimation),
+  animationSpeed: glass.animationSpeed ?? 1,
+  withMultiLayerDistortion: Boolean(glass.withMultiLayerDistortion),
+  distortionOctaves: 5,
+  distortionLacunarity: 2,
+  distortionGain: 0.5,
+  distortionQuality: (glass.distortionQuality ?? 'high') as 'low' | 'medium' | 'high' | 'ultra',
+  devicePreset: 'quality' as const,
+  disableResponsiveBreakpoints: false,
+  debugPerformance: false,
+  debugOverLight: false,
+  ...extras,
+});
+
+export const PLAYGROUND_PRESETS = {
+  apple: {
+    name: 'Apple Chrome',
+    icon: '',
+    settings: createPlaygroundPresetSettings(PREMIUM_GLASS.chrome, {
+      withTimeAnimation: false,
+      devicePreset: 'balanced' as const,
+    }),
+    mode: 'standard' as const,
+    shader: 'liquidGlass' as const,
+  },
+  card: {
+    name: 'Premium Card',
+    icon: '💎',
+    settings: createPlaygroundPresetSettings(PREMIUM_GLASS.card),
+    mode: 'standard' as const,
+    shader: 'liquidGlass' as const,
+  },
+  liquid: {
+    name: 'Liquid Glass',
+    icon: '💧',
+    settings: createPlaygroundPresetSettings(PREMIUM_GLASS.liquid, {
+      animationSpeed: 1.1,
+      distortionOctaves: 5,
+    }),
+    mode: 'shader' as const,
+    shader: 'appleFluid' as const,
+  },
+  hero: {
+    name: 'Hero',
+    icon: '✨',
+    settings: createPlaygroundPresetSettings(PREMIUM_GLASS.hero, {
+      distortionOctaves: 4,
+    }),
+    mode: 'prominent' as const,
+    shader: 'liquidGlass' as const,
+  },
+  cinematic: {
+    name: 'Cinematic',
+    icon: '🎬',
+    settings: createPlaygroundPresetSettings(PREMIUM_GLASS.cinematic, {
+      animationSpeed: 1.2,
+      distortionOctaves: 6,
+      distortionLacunarity: 2.2,
+    }),
+    mode: 'shader' as const,
+    shader: 'appleFluid' as const,
+  },
+} as const;
+
+/** Default playground starting point */
+export const PLAYGROUND_DEFAULT_SETTINGS = PLAYGROUND_PRESETS.apple.settings;

package/src/components/AtomixGlass/stories/shared-components.tsx

@@ -12,6 +12,7 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import type { RefObject, ErrorInfo } from 'react';
 import type { StoryErrorBoundaryProps } from './types';
+import { premiumBackgrounds, premiumDarkCanvas } from './premium-presets';
 
 /**
  * Enhanced BackgroundWrapper Component
@@ -197,14 +198,57 @@ export const StoryContainer: React.FC<StoryContainerProps> = ({
 /**
  * Collection of high-quality background images for different moods and scenarios
  */
-export const backgroundImages = [
-  'https://images.unsplash.com/photo-1593433073755-4233a78ee359?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1637825891028-564f672aa42c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670',
-  'https://images.unsplash.com/photo-1773062278803-0643c4782445?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670',
-  'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-];
+/** @deprecated Use premiumBackgrounds — kept for backward compatibility */
+export const backgroundImages = [...premiumBackgrounds];
+
+export interface PremiumSceneProps {
+  children: React.ReactNode;
+  variant?: 'photo' | 'dark';
+  photoIndex?: number;
+  height?: string;
+  overlay?: boolean;
+}
+
+/**
+ * Premium story backdrop — Apple-style dark gradient or rich photography.
+ */
+export const PremiumScene: React.FC<PremiumSceneProps> = ({
+  children,
+  variant = 'photo',
+  photoIndex = 0,
+  height = '100vh',
+  overlay = true,
+}) => {
+  if (variant === 'dark') {
+    return (
+      <div
+        className="u-relative u-flex u-items-center u-justify-center u-overflow-hidden"
+        style={{
+          minHeight: height,
+          width: '100%',
+          background: premiumDarkCanvas,
+        }}
+      >
+        <div className="u-relative u-z-10 u-w-100 u-flex u-items-center u-justify-center u-p-6">
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <BackgroundWrapper
+      backgroundImage={premiumBackgrounds[photoIndex % premiumBackgrounds.length]}
+      height={height}
+      overlay={overlay}
+      overlayColor="rgba(0, 0, 0, 0.35)"
+      overlayOpacity={0.45}
+      padding="2rem"
+    >
+      {children}
+    </BackgroundWrapper>
+  );
+};
 
 /**
  * StoryErrorBoundary Component

package/src/components/Badge/Badge.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, memo } from 'react';
 import { useBadge } from '../../lib/composables/useBadge';
-import { BADGE } from '../../lib/constants/components';
+import { BADGE, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { BadgeProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
@@ -59,12 +59,12 @@ export const Badge: React.FC<BadgeProps> = memo(
     if (glass) {
       // Default glass settings for badges
       const defaultGlassProps = {
-        displacementScale: 20,
+        ...GLASS_DEFAULTS.BADGE,
+        // Override borderRadius dynamically if the ref is available
         borderRadius: ref.current?.getBoundingClientRect().width
           ? ref.current?.getBoundingClientRect().width / 2
-          : 16,
+          : GLASS_DEFAULTS.BADGE.borderRadius,
         className: 'c-badge--glass',
-        elasticity: 0,
       };
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Button/Button.tsx

@@ -3,7 +3,7 @@ import { ButtonProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { Spinner } from '../Spinner/Spinner';
 import { Icon, type PhosphorIconsType } from '../Icon/Icon';
-import { BUTTON, THEME_NAMING } from '../../lib/constants/components';
+import { BUTTON, THEME_NAMING, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { ThemeNaming } from '../../lib/utils/themeNaming';
 import { renderSlot } from '../../lib/patterns';
 
@@ -321,11 +321,7 @@ export const Button = React.memo(
 
       if (glass) {
         // Default glass props
-        const defaultGlassProps = {
-          displacementScale: 20,
-          blurAmount: 0,
-          saturation: 200,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.BUTTON;
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
         return <AtomixGlass {...glassProps}>{buttonChildren}</AtomixGlass>;
       }

package/src/components/Callout/Callout.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { Callout } from './Callout';
+import { GLASS_DEFAULTS } from '../../lib/constants/components';
 
 // Mock AtomixGlass component since it has complex WebGL dependencies
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
@@ -151,9 +152,9 @@ describe('Callout Component', () => {
       const glassProps = JSON.parse(glassElement.getAttribute('data-glass-props') || '{}');
 
       expect(glassProps).toMatchObject({
-        displacementScale: 30,
-        borderRadius: 8,
-        elasticity: 0,
+        displacementScale: GLASS_DEFAULTS.CALLOUT.displacementScale,
+        borderRadius: GLASS_DEFAULTS.CALLOUT.borderRadius,
+        elasticity: GLASS_DEFAULTS.CALLOUT.elasticity,
       });
     });
 

package/src/components/Callout/Callout.tsx

@@ -3,6 +3,7 @@ import { CalloutProps } from '../../lib/types/components';
 import { useCallout } from '../../lib/composables/useCallout';
 import { Icon } from '../Icon/Icon';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { GLASS_DEFAULTS } from '../../lib/constants/components';
 
 // Type-safe interface for compound component detection
 type ExtendedComponentType<P = {}> = ComponentType<P> & {
@@ -176,11 +177,7 @@ const CalloutComponentBase = ({
 
   if (glass) {
     // Default glass settings for callouts
-    const defaultGlassProps = {
-      displacementScale: 30,
-      borderRadius: 8,
-      elasticity: 0,
-    };
+    const defaultGlassProps = GLASS_DEFAULTS.CALLOUT;
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Dropdown/Dropdown.tsx

@@ -10,7 +10,7 @@ import React, {
   ReactNode,
   ComponentType,
 } from 'react';
-import { DROPDOWN } from '../../lib/constants/components';
+import { DROPDOWN, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import type {
   DropdownProps,
@@ -504,12 +504,8 @@ export const Dropdown: DropdownComponent = memo(function DropdownBase({
         onKeyDown={handleKeyDown}
       >
         {glass
-          ? // Default glass settings for dropdowns
-            (() => {
-              const defaultGlassProps = {
-                displacementScale: 20,
-                elasticity: 0,
-              };
+          ? (() => {
+              const defaultGlassProps = GLASS_DEFAULTS.DROPDOWN;
 
               const glassProps =
                 glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Form/Checkbox.tsx

@@ -1,6 +1,7 @@
 import React, { memo, forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
 import { CheckboxProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { GLASS_DEFAULTS } from '../../lib/constants/components';
 
 const CHECKBOX_CLASSES = {
   BASE: 'c-checkbox',
@@ -112,14 +113,7 @@ export const Checkbox = React.memo(
       }
 
       if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 40,
-          blurAmount: 1,
-          saturation: 160,
-          aberrationIntensity: 0.3,
-          borderRadius: 6,
-          mode: 'shader' as const,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.CHECKBOX;
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
         return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
       }

package/src/components/Form/Input.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, memo } from 'react';
 import { InputProps } from '../../lib/types/components';
 import { useInput } from '../../lib/composables/useInput';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { GLASS_DEFAULTS } from '../../lib/constants/components';
 
 /**
  * Input - A component for text input fields
@@ -95,15 +96,7 @@ export const Input = memo(
       );
 
       if (glass) {
-        // Default glass settings for inputs
-        const defaultGlassProps = {
-          displacementScale: 60,
-          blurAmount: 1,
-          saturation: 180,
-          aberrationIntensity: 0.2,
-          borderRadius: 12,
-          mode: 'shader' as const,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.INPUT;
 
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Form/Radio.tsx

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { RadioProps } from '../../lib/types/components';
 import { useRadio } from '../../lib/composables/useRadio';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { GLASS_DEFAULTS } from '../../lib/constants/components';
 
 /**
  * Radio - A component for radio button inputs
@@ -62,15 +63,7 @@ export const Radio: React.FC<RadioProps> = memo(
     );
 
     if (glass) {
-      // Default glass settings for radio buttons
-      const defaultGlassProps = {
-        displacementScale: 40,
-        blurAmount: 1,
-        saturation: 160,
-        aberrationIntensity: 0.3,
-        borderRadius: 6,
-        mode: 'shader' as const,
-      };
+      const defaultGlassProps = GLASS_DEFAULTS.RADIO;
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Form/Select.test.tsx

@@ -20,9 +20,9 @@ describe('Select Component', () => {
     // Check native select options
     const select = document.querySelector('select');
     expect(select).not.toBeNull();
-    expect(select?.options).toHaveLength(3); // Placeholder + 2
-    expect(select?.options[1].value).toBe('1');
-    expect(select?.options[2].value).toBe('2');
+    expect(select!.options).toHaveLength(3); // Placeholder + 2
+    expect(select!.options[1]!.value).toBe('1');
+    expect(select!.options[2]!.value).toBe('2');
   });
 
   it('renders compound options correctly', async () => {
@@ -43,9 +43,9 @@ describe('Select Component', () => {
     await waitFor(() => {
         const select = document.querySelector('select');
         expect(select).not.toBeNull();
-        expect(select?.options).toHaveLength(3); // Placeholder + 2
-        expect(select?.options[1].value).toBe('1');
-        expect(select?.options[2].value).toBe('2');
+        expect(select!.options).toHaveLength(3); // Placeholder + 2
+        expect(select!.options[1]!.value).toBe('1');
+        expect(select!.options[2]!.value).toBe('2');
     });
   });
 

package/src/components/Form/Select.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState, memo, useCallback, useMemo } from 'react';
 import { SelectProps, SelectOption as SelectOptionType } from '../../lib/types/components';
 import { useSelect } from '../../lib/composables';
-import { SELECT } from '../../lib/constants/components';
+import { SELECT, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { SelectContext, SelectOption } from './SelectOption';
 
@@ -396,12 +396,7 @@ const SelectComponentBase = ({
   );
 
   if (glass) {
-    // Default glass settings for select components
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 10,
-      mode: 'shader' as const,
-    };
+    const defaultGlassProps = GLASS_DEFAULTS.SELECT;
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Form/Textarea.stories.tsx

@@ -104,7 +104,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Number of visible text lines',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 2 },
+        defaultValue: { summary: '2' },
       },
     },
     cols: {
@@ -138,7 +138,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is disabled',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     invalid: {
@@ -146,7 +146,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is invalid',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     valid: {
@@ -154,7 +154,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is valid',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     glass: {
@@ -162,7 +162,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Enable glass morphism effect',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     defaultValue: {

package/src/components/Form/Textarea.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, memo } from 'react';
 import { TextareaProps } from '../../lib/types/components';
 import { useTextarea } from '../../lib/composables/useTextarea';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { GLASS_DEFAULTS } from '../../lib/constants/components';
 
 /**
  * Textarea - A component for multiline text input
@@ -86,15 +87,7 @@ export const Textarea = memo(
       );
 
       if (glass) {
-        // Default glass settings for textareas
-        const defaultGlassProps = {
-          displacementScale: 60,
-          blurAmount: 1,
-          saturation: 180,
-          aberrationIntensity: 1,
-          borderRadius: 8,
-          mode: 'shader' as const,
-        };
+        const defaultGlassProps = GLASS_DEFAULTS.TEXTAREA;
 
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 

package/src/components/Messages/Messages.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon } from '../Icon/Icon';
 import { Avatar } from '../Avatar/Avatar';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
-import { MESSAGES } from '../../lib/constants/components';
+import { MESSAGES, GLASS_DEFAULTS } from '../../lib/constants/components';
 import { MessagesProps } from '../../lib/types/components';
 import { useMessages } from '../../lib/composables/useMessages';
 
@@ -32,13 +32,7 @@ export const Messages: React.FC<MessagesProps> = ({
   const messagesId = id || `messages-${Math.random().toString(36).substr(2, 9)}`;
   const inputId = `${messagesId}-input`;
 
-  // Default glass settings for messages
-  const defaultGlassProps = {
-    displacementScale: 150,
-    borderRadius: 12,
-    elasticity: 0,
-    aberrationIntensity: 2,
-  };
+  const defaultGlassProps = GLASS_DEFAULTS.MESSAGES;
 
   const messagesClasses = `${MESSAGES.CLASSES.BASE} ${glass ? 'c-messages--glass' : ''} ${disabled ? 'is-disabled' : ''} ${className}`;
 

package/src/components/Modal/Modal.tsx

@@ -10,7 +10,7 @@ import React, {
   ComponentType,
 } from 'react';
 import { ModalProps } from '../../lib/types/components';
-import { MODAL } from '../../lib/constants/components';
+import { MODAL, GLASS_DEFAULTS } from '../../lib/constants/components';
 
 // Define ExtendedComponentType as a type alias instead of an interface to avoid TS2312 error
 type ExtendedComponentType<P = {}> = ComponentType<P> & {
@@ -299,13 +299,12 @@ const ModalImpl = memo(
           {glass
             ? // Default glass settings for modals
               (() => {
+                // Default glass settings for modals
                 const defaultGlassProps = {
+                  ...GLASS_DEFAULTS.MODAL,
+                  // displacementScale driven by modal content height at runtime
                   displacementScale: document.querySelector('.c-modal---glass .c-modal__content')
                     ?.clientHeight,
-                  blurAmount: 2.2,
-                  elasticity: 0,
-                  mode: 'shader' as const,
-                  shaderMode: 'premiumGlass',
                 };
 
                 const glassProps =

package/src/components/Navigation/Nav/Nav.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import { NavProps } from '../../../lib/types/components';
 import { useNav } from '../../../lib/composables/useNavbar';
+import { GLASS_DEFAULTS } from '../../../lib/constants/components';
 import { AtomixGlass } from '../../AtomixGlass/AtomixGlass';
 
 /**
@@ -48,12 +49,7 @@ export const Nav = forwardRef<HTMLUListElement, NavProps>(
     );
 
     if (glass) {
-      const defaultGlassProps = {
-        displacementScale: 60,
-        blurAmount: 1.5,
-        borderRadius: 8,
-        mode: 'shader' as const,
-      };
+      const defaultGlassProps = GLASS_DEFAULTS.NAV;
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
       return <AtomixGlass {...glassProps}>{navContent}</AtomixGlass>;
     }