@shohojdhara/atomix 0.6.3 → 0.6.5

package/src/lib/constants/components.ts

@@ -1620,6 +1620,311 @@ export const FOOTER = {
   },
 };
 
+/**
+ * Per-component AtomixGlass default configurations.
+ *
+ * These are the canonical glass-effect settings used by each component when
+ * `glass={true}` is passed and no override props are supplied. They follow the
+ * Apple "liquid glass" design language introduced in the AtomixGlass refinement:
+ *
+ * - Displacement is lower than the raw ATOMIX_GLASS.DEFAULTS (55) for tight
+ *   UI elements (Button, Badge, Accordion) and raised for overlay/panel surfaces.
+ * - Elasticity is 0 for all static / overlay components — only interactive
+ *   standalone glass cards should use non-zero elasticity.
+ * - Shader mode is enabled for surfaces ≥ "medium" viewport area (Navbar, Nav,
+ *   Popover, Tabs) where the refraction effect is visible and worth the cost.
+ * - blurAmount is omitted where the SCSS $glass-backdrop-filter token is
+ *   sufficient on its own (Button, Accordion, Dropdown, EdgePanel).
+ */
+export const 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: {} as Record<string, never>,
+
+  /**
+   * 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' as const,
+    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' as const,
+    shaderVariant: 'premiumGlass' as const,
+  },
+
+  /**
+   * 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' as const,
+  },
+
+  /**
+   * SideMenu — persistent sidebar navigation.
+   * Moderate displacement; shader for depth. Zero elasticity.
+   */
+  SIDE_MENU: {
+    displacementScale: 24,
+    blurAmount: 24,
+    borderRadius: 0,
+    elasticity: 0,
+    mode: 'shader' as const,
+  },
+
+  /**
+   * 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: 0.35,
+    borderRadius: 12,
+    elasticity: 0,
+    mode: 'shader' as const,
+  },
+
+  /**
+   * 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: 0.35,
+    borderRadius: 12,
+    elasticity: 0,
+    mode: 'shader' as const,
+  },
+
+  /**
+   * 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,
+  },
+} as const;
+
+/**
+ * Liquid glass border gradient math (canonical; mirrors _settings.atomix-glass.scss).
+ */
+export const GLASS_BORDER_GRADIENT = {
+  BASE_ANGLE: 135,
+  ANGLE_MULTIPLIER: 0.5,
+  VELOCITY_ANGLE_MULTIPLIER: 0.5,
+  CHROMATIC_OFFSET: 1.5,
+  STOP_1: {
+    MIN: 10,
+    BASE: 33,
+    get MULTIPLIER() {
+      return this.BASE * 0.009;
+    },
+  },
+  STOP_2: {
+    MAX: 90,
+    BASE: 66,
+    get MULTIPLIER() {
+      return this.BASE * 0.006;
+    },
+  },
+  OPACITY: {
+    /** Matches $glass-border-1-opacity (0.08) */
+    BASE_1: 0.08,
+    get BASE_2() {
+      return this.BASE_1 * 3.33;
+    },
+    get BASE_3() {
+      return this.BASE_1 * 2.66;
+    },
+    get BASE_4() {
+      return this.BASE_1 * 5;
+    },
+    get MULTIPLIER_LOW() {
+      return this.BASE_1 * 0.066;
+    },
+    get MULTIPLIER_HIGH() {
+      return this.BASE_1 * 0.1;
+    },
+  },
+} as const;
+
 /**
  * AtomixGlass-specific constants
  */
@@ -1634,6 +1939,18 @@ export const ATOMIX_GLASS = {
   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: 0.7 },
+    DARK: { opacity: 0.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',
@@ -1662,21 +1979,22 @@ export const ATOMIX_GLASS = {
     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 this.DISPLACEMENT_SCALE * 0.15; // Dynamically computed based on displacement
-    },
-    get SATURATION() {
-      return 100 + (this.DISPLACEMENT_SCALE * 0.5); // Saturate relative to intensity
+      // Apple Music sidebar / player bar: ~20–40px frost (see $glass-backdrop-filter)
+      return Math.max(20, this.DISPLACEMENT_SCALE * 0.72);
     },
+    /** Fixed 180% matches Apple's saturate(180%) backdrop recipe */
+    SATURATION: 180,
     get ABERRATION_INTENSITY() {
-      return this.DISPLACEMENT_SCALE * 0.03; // Scale aberration with displacement
+      return this.DISPLACEMENT_SCALE * 0.02;
     },
-    ELASTICITY: 0.15,
+    ELASTICITY: 0.05,
     get CORNER_RADIUS() {
       return 16; // Use 16 to match SCSS design system (was 20)
     },
-    PADDING: '0',
+
     MODE: 'standard' as const,
     OVER_LIGHT: false as const,
     ENABLE_OVER_LIGHT_LAYERS: true,
@@ -1692,19 +2010,19 @@ export const ATOMIX_GLASS = {
   },
   CONSTANTS: {
     ACTIVATION_ZONE: 200,
-    LERP_FACTOR: 0.08,
+    LERP_FACTOR: 0.05, // Lower = more viscous, liquid-smooth tracking (Apple feel)
     SMOOTHSTEP_POWER: 2.5,
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,
-    // Elasticity physics constants
-    ELASTICITY_TRANSLATION_FACTOR: 0.1,
+    // Elasticity physics constants — Apple-tuned: soft springs, fast settling, minimal stretch
+    ELASTICITY_TRANSLATION_FACTOR: 0.06, // Subtler elastic shift (was 0.1)
     ELASTICITY_DISTANCE_THRESHOLD: 200,
     ELASTICITY_COMPRESSION_FACTOR: 0.3,
-    ELASTICITY_STIFFNESS: 0.1,
-    ELASTICITY_DAMPING: 0.76,
+    ELASTICITY_STIFFNESS: 0.06, // Softer springs = gentler motion (was 0.1)
+    ELASTICITY_DAMPING: 0.88, // Fast settling, no wobble (was 0.76)
     ELASTICITY_VELOCITY_FACTOR: 0.65,
-    ELASTICITY_STRETCH_RATIO: 0.45,
+    ELASTICITY_STRETCH_RATIO: 0.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
@@ -1719,28 +2037,16 @@ export const ATOMIX_GLASS = {
 
     // 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 this.BASE * 0.009; }, // Multiplier for mouse Y influence
-      },
-      BORDER_STOP_2: {
-        MAX: 90, // Maximum percentage for border stop 2
-        BASE: 66, // Base percentage for border stop 2
-        get MULTIPLIER() { return this.BASE * 0.006; }, // Multiplier for mouse Y influence
-      },
-      BORDER_OPACITY: {
-        BASE_1: 0.12, // Base opacity for border gradient 1
-        get BASE_2() { return this.BASE_1 * 3.33; }, // Base opacity for border gradient 2
-        get BASE_3() { return this.BASE_1 * 2.66; }, // Base opacity for border gradient 3
-        get BASE_4() { return this.BASE_1 * 5; }, // Base opacity for border gradient 4
-        get MULTIPLIER_LOW() { return this.BASE_1 * 0.066; }, // Low multiplier for mouse influence on opacity
-        get MULTIPLIER_HIGH() { return this.BASE_1 * 0.1; }, // High multiplier for mouse influence on opacity
-      },
+      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: {
         DIVISOR_1: 2, // Divisor for hover 1 position calculation
@@ -1757,7 +2063,7 @@ export const ATOMIX_GLASS = {
         get BLACK_MID() { return this.BLACK_START / 3; }, // Mid opacity for black hover 1
         BLACK_STOP: 30, // Stop percentage for black hover 1
         get BLACK_END() { return this.BLACK_STOP * 2; }, // End percentage for black hover 1
-        WHITE_START: 0.5, // Start opacity for white hover 1
+        WHITE_START: 0.35, // Gentler hover flash — Apple hover is barely visible
         get WHITE_STOP() { return this.BLACK_END - 10; }, // Stop percentage for white hover 1
       },
       HOVER_2: {
@@ -1765,7 +2071,7 @@ export const ATOMIX_GLASS = {
         get BLACK_MID() { return this.BLACK_START * 0.375; }, // Mid opacity for black hover 2
         BLACK_STOP: 40, // Stop percentage for black hover 2
         get BLACK_END() { return this.BLACK_STOP * 2; }, // End percentage for black hover 2
-        WHITE_START: 1, // Start opacity for white hover 2
+        WHITE_START: 0.7, // Gentler hover flash
         get WHITE_STOP() { return this.BLACK_END; }, // Stop percentage for white hover 2
       },
       HOVER_3: {
@@ -1773,7 +2079,7 @@ export const ATOMIX_GLASS = {
         get BLACK_MID() { return this.BLACK_START * 0.4; }, // Mid opacity for black hover 3
         BLACK_STOP: 50, // Stop percentage for black hover 3
         get BLACK_END() { return this.BLACK_STOP * 2; }, // End percentage for black hover 3
-        WHITE_START: 1, // Start opacity for white hover 3
+        WHITE_START: 0.7, // Gentler hover flash
         get WHITE_STOP() { return this.BLACK_END; }, // Stop percentage for white hover 3
       },
     },
@@ -1781,9 +2087,9 @@ export const ATOMIX_GLASS = {
     // Base and overlay gradient constants
     BASE_GRADIENT: {
       ANGLE: 135, // Gradient angle in degrees
-      BLACK_START_BASE: 0.15, // Base start opacity for black
+      BLACK_START_BASE: 0.10, // Base start opacity for black
       get BLACK_START_MULTIPLIER() { return this.BLACK_START_BASE * 0.02; }, // Multiplier for mouse X influence on start
-      BLACK_MID_BASE: 0.1, // Base mid opacity for black
+      BLACK_MID_BASE: 0.07, // Base mid opacity for black
       get BLACK_MID_MULTIPLIER() { return this.BLACK_MID_BASE * 0.02; }, // Multiplier for mouse Y influence on mid
       BLACK_MID_STOP: 50, // Mid stop percentage
       get BLACK_END_BASE() { return this.BLACK_START_BASE * 1.2; }, // Base end opacity for black
@@ -1792,7 +2098,7 @@ export const ATOMIX_GLASS = {
     },
 
     OVERLAY_GRADIENT: {
-      BLACK_START_BASE: 0.12, // Base start opacity for black overlay
+      BLACK_START_BASE: 0.08, // Base start opacity for black overlay
       get BLACK_START_MULTIPLIER() { return this.BLACK_START_BASE * 0.025; }, // Multiplier for mouse X influence on start
       get BLACK_MID() { return this.BLACK_START_BASE * 0.5; }, // Mid opacity for black overlay
       BLACK_MID_STOP: 40, // Mid stop percentage
@@ -1801,11 +2107,11 @@ export const ATOMIX_GLASS = {
       get WHITE_OPACITY() { return this.BLACK_START_BASE * 0.416; }, // White opacity for non-overlight mode
     },
 
-    // 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: 0.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: 0.28, // Softer specular — visible but not glaring
       get STOP() { return this.WHITE_OPACITY * 150; }, // Stop percentage
       get OPACITY_MULTIPLIER() { return this.WHITE_OPACITY * 1.75; }, // Multiplier for overlay highlight opacity
     },
@@ -1822,6 +2128,12 @@ export const ATOMIX_GLASS = {
       HIGH_CONTRAST: 200, // Saturation value for high contrast mode
     },
 
+    // Container shadows — hairline inner catch + soft floating lift (Apple player bar)
+    CONTAINER_SHADOW: {
+      LIGHT:
+        'inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16)',
+    },
+
     // Phase 1: Animation System Constants
     ANIMATION: {
       // Breathing effect timing (in milliseconds)

package/src/lib/types/components.ts

@@ -210,6 +210,30 @@ export interface OverLightObjectConfig {
    * saturationBoost: 2.0
    */
   saturationBoost?: number;
+
+  /**
+   * Rim opacity multiplier for animated border gradients (0.1 - 1.0)
+   *
+   * @default 0.7 when over-light is active, 0.35 otherwise
+   */
+  borderOpacity?: number;
+}
+
+/**
+ * Liquid glass rim configuration (Apple-style hairline border).
+ */
+export interface GlassBorderConfig {
+  /** Whether border layers render. @default true */
+  enabled?: boolean;
+  /** Rim width — maps to `--atomix-glass-border-width`. @default 0.5px */
+  width?: string | number;
+  /** Multiplier on rim gradient opacities. @default 1 */
+  opacity?: number;
+  /**
+   * When false, skips JS gradient vars so SCSS static fallbacks apply.
+   * @default true
+   */
+  animated?: boolean;
 }
 
 /**
@@ -226,7 +250,7 @@ export interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
   globalMousePosition?: MousePosition;
   mouseOffset?: MousePosition;
   mouseContainer?: React.RefObject<HTMLElement | null> | null;
-  padding?: string;
+
   height?: string | number;
   width?: string | number;
   overLight?: OverLightConfig;
@@ -264,6 +288,14 @@ export interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
   highContrast?: boolean;
   withoutEffects?: boolean;
   withLiquidBlur?: boolean;
+  /**
+   * Liquid glass rim — boolean shorthand or structured config.
+   * Takes precedence over legacy `withBorder` when provided.
+   */
+  border?: boolean | GlassBorderConfig;
+  /**
+   * @deprecated Use `border` instead. When `border` is omitted, defaults to this value.
+   */
   withBorder?: boolean;
   withOverLightLayers?: boolean;