@shohojdhara/atomix 0.6.3 → 0.6.5

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -1,44 +1,32 @@
 import React, { forwardRef, useId, useRef, useState, useEffect, useMemo } from 'react';
-import type { CSSProperties } from 'react';
 import type {
   DisplacementMode,
   MousePosition,
   GlassSize,
   AtomixGlassProps,
 } from '../../lib/types/components';
+import useForkRef from '../../lib/utils/useForkRef';
+import { mergeClassNames } from '../../lib/utils/componentUtils';
 import type { FragmentShaderType, ShaderOptions, Vec2 } from './shader-utils';
 import { GlassFilter } from './GlassFilter';
 import {
-  calculateMouseInfluence,
-  clampBlur,
-  validateGlassSize,
   getCachedShader,
+  getShaderAnimationTargetFps,
   setCachedShader,
+  toSafeNumber,
+  validateGlassSize,
 } from './glass-utils';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 
-const { CONSTANTS } = ATOMIX_GLASS;
-
-// ─── Blur multiplier constants (module-level, never change at runtime) ────────
-const EDGE_BLUR_MULTIPLIER = 1.25;
-const CENTER_BLUR_MULTIPLIER = 1.1;
-const FLOW_BLUR_MULTIPLIER = 1.2;
-const MOUSE_INFLUENCE_BLUR_FACTOR = 0.15;
-const EDGE_INTENSITY_MULTIPLIER = 1.5;
-const EDGE_INTENSITY_MOUSE_FACTOR = 0.15;
-const CENTER_INTENSITY_DISTANCE_FACTOR = 0.3;
-const CENTER_INTENSITY_MOUSE_FACTOR = 0.1;
-/** Maximum blur multiplier relative to base — prevents runaway blur. */
-const MAX_BLUR_RELATIVE = 2;
 
-// ─── Shader utility types ─────────────────────────────────────────────────────
 
+/** Minimal interface for dynamically loaded shader displacement generators. */
 interface ShaderGenerator {
   updateShader(): string;
   destroy(): void;
 }
 
-/** Fragment shader function — signature matches shader-utils.ts */
+/** Fragment shader signature; must match `shader-utils.ts`. */
 type FragmentShaderFn = (uv: Vec2, mousePosition?: Vec2) => Vec2;
 
 interface ShaderUtilsModule {
@@ -69,7 +57,6 @@ interface AtomixGlassContainerProps
   onMouseEnter?: () => void;
   onMouseDown?: () => void;
   onMouseUp?: () => void;
-  isHovered?: boolean;
   isActive?: boolean;
   overLight?: boolean;
   overLightConfig?: {
@@ -79,7 +66,7 @@ interface AtomixGlassContainerProps
     borderOpacity?: number;
   };
   borderRadius?: number;
-  padding?: string;
+
   glassSize?: GlassSize;
   onClick?: () => void;
   mode?: DisplacementMode;
@@ -90,8 +77,6 @@ interface AtomixGlassContainerProps
   withLiquidBlur?: boolean;
   isFixedOrSticky?: boolean;
   elasticity?: number;
-
-  // Phase 1: Animation System props
   shaderTime?: number;
 
   contentRef?: React.RefObject<HTMLDivElement | null>;
@@ -99,8 +84,10 @@ interface AtomixGlassContainerProps
 }
 
 /**
- * AtomixGlassContainer - Internal container component for glass effects
- * Handles the visual glass morphism layer with filters and backdrop effects
+ * 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.
  */
 export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContainerProps>(
   (
@@ -121,7 +108,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       overLight = false,
       overLightConfig = {},
       borderRadius = 0,
-      padding = '0 0',
+
       glassSize = { width: 0, height: 0 },
       onClick,
       mode = 'standard',
@@ -130,8 +117,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       shaderVariant = 'liquidGlass',
       withLiquidBlur = false,
       isFixedOrSticky = false,
-
-      // Phase 1: Animation System props
       shaderTime,
       withTimeAnimation = false,
       animationSpeed = 1.0,
@@ -148,6 +133,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     // React 18 useId — stable, unique, and SSR-safe (no module-level counter)
     const rawId = useId();
     const filterId = useMemo(() => `atomix-glass-filter-${rawId.replace(/:/g, '')}`, [rawId]);
+    const containerRef = useForkRef(ref, null);
 
     const [shaderMapUrl, setShaderMapUrl] = useState<string>('');
     const shaderGeneratorRef = useRef<ShaderGenerator | null>(null);
@@ -156,7 +142,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     const shaderDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const shaderUpdateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-    // Phase 1: Animation frame ref for continuous shader updates
     const animationFrameRef = useRef<number | null>(null);
 
     // Lazy load shader utilities only when shader mode is needed
@@ -260,7 +245,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       };
     }, [mode, glassSize, shaderVariant]);
 
-    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
     useEffect(() => {
       // Only run animations in shader mode with time animation enabled
       if (
@@ -277,27 +261,14 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         return;
       }
 
-      const baseFps =
-        distortionQuality === 'ultra'
-          ? 60
-          : distortionQuality === 'high'
-            ? 30
-            : distortionQuality === 'medium'
-              ? 24
-              : 20;
-      const effectiveSpeed = Math.max(0.5, Math.min(2, animationSpeed || 1));
-      const complexity = withMultiLayerDistortion
-        ? Math.max(
-            1,
-            (distortionOctaves || 3) / 3 +
-              Math.max(0, (distortionLacunarity || 2) - 2) * 0.25 +
-              Math.max(0, (distortionGain || 0.5) - 0.5)
-          )
-        : 1;
-      const targetFps = Math.max(
-        12,
-        Math.min(60, Math.round((baseFps * effectiveSpeed) / complexity))
-      );
+      const targetFps = getShaderAnimationTargetFps({
+        distortionQuality,
+        animationSpeed,
+        withMultiLayerDistortion,
+        distortionOctaves,
+        distortionLacunarity,
+        distortionGain,
+      });
       const frameInterval = 1000 / targetFps;
       let lastUpdate = 0;
       let isCancelled = false;
@@ -350,212 +321,32 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
 
     // Removed forced reflow to avoid layout thrash and potential feedback sizing loops
 
-    const [rectCache, setRectCache] = useState<DOMRect | null>(null);
-
-    useEffect(() => {
-      if (!ref || typeof ref === 'function') return undefined;
-      const element = (ref as React.RefObject<HTMLDivElement>).current;
-      if (!element) return undefined;
-
-      try {
-        setRectCache(element.getBoundingClientRect());
-      } catch (error) {
-        console.warn('AtomixGlassContainer: Error getting element bounds', error);
-        setRectCache(null);
-      }
-
-      return undefined;
-    }, [ref, glassSize]);
-
-    const liquidBlur = useMemo(() => {
-      const defaultBlur = {
-        baseBlur: blurAmount,
-        edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
-        centerBlur: blurAmount * CENTER_BLUR_MULTIPLIER,
-        flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER,
-      };
-
-      // Enhanced validation for liquid blur
-      if (
-        !withLiquidBlur ||
-        !rectCache ||
-        !mouseOffset ||
-        typeof mouseOffset.x !== 'number' ||
-        typeof mouseOffset.y !== 'number' ||
-        isNaN(mouseOffset.x) ||
-        isNaN(mouseOffset.y)
-      ) {
-        return defaultBlur;
-      }
-
-      try {
-        const mouseInfluence = calculateMouseInfluence(mouseOffset);
-        const maxBlur = blurAmount * MAX_BLUR_RELATIVE;
-
-        const baseBlur = Math.min(
-          maxBlur,
-          blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR
-        );
-        const edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
-        const edgeBlur = Math.min(maxBlur, baseBlur * (0.8 + edgeIntensity * 0.4));
-        const centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
-        const centerBlur = Math.min(maxBlur, baseBlur * (0.3 + centerIntensity * 0.3));
-        const flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
-
-        // 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) {
-        console.warn('AtomixGlassContainer: Error calculating liquid blur', error);
-        return defaultBlur;
-      }
-    }, [withLiquidBlur, blurAmount, mouseOffset, rectCache]);
 
-    const backdropStyle = useMemo(() => {
-      try {
-        const dynamicSaturation = saturation + (liquidBlur.baseBlur || 0) * 20;
-
-        // Validate blur values before using them
-        const validatedBaseBlur =
-          typeof liquidBlur.baseBlur === 'number' && !isNaN(liquidBlur.baseBlur)
-            ? liquidBlur.baseBlur
-            : 0;
-        const validatedEdgeBlur =
-          typeof liquidBlur.edgeBlur === 'number' && !isNaN(liquidBlur.edgeBlur)
-            ? liquidBlur.edgeBlur
-            : 0;
-        const validatedCenterBlur =
-          typeof liquidBlur.centerBlur === 'number' && !isNaN(liquidBlur.centerBlur)
-            ? liquidBlur.centerBlur
-            : 0;
-        const validatedFlowBlur =
-          typeof liquidBlur.flowBlur === 'number' && !isNaN(liquidBlur.flowBlur)
-            ? liquidBlur.flowBlur
-            : 0;
-
-        // Adaptive strategy: prefer single-pass blur for large areas or when effects are reduced
-        const area = rectCache ? rectCache.width * rectCache.height : 0;
-        const areaIsLarge = area > 180000; // ~600x300 threshold; tune as needed
-        const devicePrefersPerformance = effectiveReducedMotion || effectiveWithoutEffects;
-        const useMultiPass = withLiquidBlur && !devicePrefersPerformance && !areaIsLarge;
-
-        if (useMultiPass) {
-          // Use a single weighted-average blur instead of stacking multiple
-          // blur() calls. CSS blur() is additive — stacking 4 passes
-          // causes the perceived blur to compound far beyond any single value.
-          const weightedBlur = clampBlur(
-            validatedBaseBlur * 0.4 +
-              validatedEdgeBlur * 0.25 +
-              validatedCenterBlur * 0.15 +
-              validatedFlowBlur * 0.2
-          );
-
-          return {
-            backdropFilter: `blur(${weightedBlur}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
-        const effectiveBlur = clampBlur(
-          Math.max(
-            validatedBaseBlur,
-            validatedEdgeBlur * 0.8,
-            validatedCenterBlur * 1.1,
-            validatedFlowBlur * 0.9
-          )
-        );
 
-        return {
-          backdropFilter: `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`,
-        };
-      } catch (error) {
-        console.warn('AtomixGlassContainer: Error calculating backdrop style', error);
-        return {
-          backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`,
-        };
-      }
-    }, [
-      liquidBlur,
-      saturation,
-      blurAmount,
-      rectCache,
-      effectiveReducedMotion,
-      effectiveWithoutEffects,
-      withLiquidBlur,
-      overLightConfig,
-    ]);
 
     const containerVars = useMemo(() => {
       try {
-        // Safe extraction of mouse offset values
-        const mx =
-          mouseOffset && typeof mouseOffset.x === 'number' && !isNaN(mouseOffset.x)
-            ? mouseOffset.x
-            : 0;
-        const my =
-          mouseOffset && typeof mouseOffset.y === 'number' && !isNaN(mouseOffset.y)
-            ? mouseOffset.y
-            : 0;
         return {
           '--atomix-glass-container-radius': `${typeof borderRadius === 'number' && !isNaN(borderRadius) ? borderRadius : 0}px`,
-          '--atomix-glass-container-backdrop': backdropStyle?.backdropFilter || 'none',
-          '--atomix-glass-container-shadow': overLight
-            ? [
-                `inset 0 1px 0 rgba(255, 255, 255, ${(0.4 + mx * 0.002) * (overLightConfig?.shadowIntensity || 1)})`,
-                `inset 0 -1px 0 rgba(0, 0, 0, ${(0.2 + Math.abs(my) * 0.001) * (overLightConfig?.shadowIntensity || 1)})`,
-                `inset 0 0 20px rgba(0, 0, 0, ${(0.08 + Math.abs(mx + my) * 0.001) * (overLightConfig?.shadowIntensity || 1)})`,
-                `0 2px 12px rgba(0, 0, 0, ${(0.12 + Math.abs(my) * 0.002) * (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 + mx * 0.5}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)',
         } as React.CSSProperties;
       } catch (error) {
         console.warn('AtomixGlassContainer: Error generating container variables', error);
         return {
-          '--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',
         } as React.CSSProperties;
       }
-    }, [
-      borderRadius,
-      backdropStyle,
-      mouseOffset,
-      overLight,
-      effectiveWithoutEffects,
-      overLightConfig,
-    ]);
+    }, [borderRadius]);
 
     return (
       <div
-        ref={el => {
-          // Handle forwarded ref
-          if (typeof ref === 'function') {
-            ref(el);
-          } else if (ref) {
-            (ref as React.MutableRefObject<HTMLDivElement | null>).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 }}
         onClick={onClick}
       >
@@ -571,16 +362,8 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               blurAmount={blurAmount}
               mode={mode}
               id={filterId}
-              displacementScale={
-                typeof displacementScale === 'number' && !isNaN(displacementScale)
-                  ? displacementScale
-                  : 0
-              }
-              aberrationIntensity={
-                typeof aberrationIntensity === 'number' && !isNaN(aberrationIntensity)
-                  ? aberrationIntensity
-                  : 0
-              }
+              displacementScale={toSafeNumber(displacementScale)}
+              aberrationIntensity={toSafeNumber(aberrationIntensity)}
               shaderMapUrl={shaderMapUrl}
             />
             {/* Enhanced Apple Liquid Glass Inner Shadow Layer */}

package/src/components/AtomixGlass/GlassFilter.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 import type { DisplacementMode } from '../../lib/types/components';
-import type { FragmentShaderType } from './shader-utils';
-import { getDisplacementMap } from './glass-utils';
+import { getChromaticDisplacementScale, getDisplacementMap } from './glass-utils';
 import { displacementMap, polarDisplacementMap, prominentDisplacementMap } from './utils';
 
 interface GlassFilterProps {
@@ -13,9 +12,43 @@ interface GlassFilterProps {
   blurAmount: number;
 }
 
+/** Per-channel SVG filter configuration for chromatic aberration. */
+const 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: 0.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: 0.03,
+    colorMatrix:
+      '0 0 0 0 0\n0 0 0 0 0\n0 0 1 0 0\n0 0 0 1 0',
+  },
+] as const;
+
+const FILTER_SVG_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  inset: 0,
+};
+
 /**
- * GlassFilter - SVG filter component for glass morphism effects
- * Creates chromatic aberration and edge distortion effects using SVG filters
+ * Renders an SVG filter definition for glass morphism distortion.
+ *
+ * Produces chromatic aberration at the edges via channel-separated displacement
+ * maps and recomposites the center region without distortion.
  */
 const GlassFilterComponent: React.FC<GlassFilterProps> = ({
   id,
@@ -25,15 +58,7 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
   shaderMapUrl,
   blurAmount,
 }) => (
-  <svg
-    style={{
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      inset: 0,
-    }}
-    aria-hidden="true"
-  >
+  <svg style={FILTER_SVG_STYLE} aria-hidden="true">
     <defs>
       <radialGradient id={`${id}-edge-mask`} cx="50%" cy="50%" r="50%">
         <stop offset="0%" stopColor="black" stopOpacity="0" />
@@ -77,59 +102,29 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
 
         <feOffset in="SourceGraphic" dx="0" dy="0" result="CENTER_ORIGINAL" />
 
-        <feDisplacementMap
-          in="SourceGraphic"
-          in2="DISPLACEMENT_MAP"
-          scale={displacementScale * (mode === 'shader' ? 1 : -1)}
-          xChannelSelector="R"
-          yChannelSelector="B"
-          result="RED_DISPLACED"
-        />
-        <feColorMatrix
-          in="RED_DISPLACED"
-          type="matrix"
-          values="1 0 0 0 0
-                 0 0 0 0 0
-                 0 0 0 0 0
-                 0 0 0 1 0"
-          result="RED_CHANNEL"
-        />
-
-        <feDisplacementMap
-          in="SourceGraphic"
-          in2="DISPLACEMENT_MAP"
-          scale={displacementScale * ((mode === 'shader' ? 1 : -1) - aberrationIntensity * 0.02)}
-          xChannelSelector="R"
-          yChannelSelector="B"
-          result="GREEN_DISPLACED"
-        />
-        <feColorMatrix
-          in="GREEN_DISPLACED"
-          type="matrix"
-          values="0 0 0 0 0
-                 0 1 0 0 0
-                 0 0 0 0 0
-                 0 0 0 1 0"
-          result="GREEN_CHANNEL"
-        />
-
-        <feDisplacementMap
-          in="SourceGraphic"
-          in2="DISPLACEMENT_MAP"
-          scale={displacementScale * ((mode === 'shader' ? 1 : -1) - aberrationIntensity * 0.03)}
-          xChannelSelector="R"
-          yChannelSelector="B"
-          result="BLUE_DISPLACED"
-        />
-        <feColorMatrix
-          in="BLUE_DISPLACED"
-          type="matrix"
-          values="0 0 0 0 0
-                 0 0 0 0 0
-                 0 0 1 0 0
-                 0 0 0 1 0"
-          result="BLUE_CHANNEL"
-        />
+        {CHROMATIC_CHANNELS.map(channel => (
+          <React.Fragment key={channel.channelResult}>
+            <feDisplacementMap
+              in="SourceGraphic"
+              in2="DISPLACEMENT_MAP"
+              scale={getChromaticDisplacementScale(
+                mode,
+                displacementScale,
+                aberrationIntensity,
+                channel.aberrationFactor
+              )}
+              xChannelSelector="R"
+              yChannelSelector="B"
+              result={channel.result}
+            />
+            <feColorMatrix
+              in={channel.result}
+              type="matrix"
+              values={channel.colorMatrix}
+              result={channel.channelResult}
+            />
+          </React.Fragment>
+        ))}
 
         <feBlend in="GREEN_CHANNEL" in2="BLUE_CHANNEL" mode="screen" result="GB_COMBINED" />
         <feBlend in="RED_CHANNEL" in2="GB_COMBINED" mode="screen" result="RGB_COMBINED" />
@@ -160,9 +155,8 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
 
 GlassFilterComponent.displayName = 'GlassFilter';
 
-// Memoize component to prevent unnecessary re-renders
+/** Shallow prop comparison to avoid redundant SVG filter regeneration. */
 export const GlassFilter = memo(GlassFilterComponent, (prevProps, nextProps) => {
-  // Custom comparison: only re-render if props actually changed
   return (
     prevProps.id === nextProps.id &&
     prevProps.displacementScale === nextProps.displacementScale &&

package/src/components/AtomixGlass/README.md

@@ -58,7 +58,8 @@ function MyComponent() {
 | `debugOverLight` | boolean | false | Enable debug logging for overLight detection and configuration |
 | `mode` | 'standard' \| 'polar' \| 'prominent' \| 'shader' | 'standard' | The glass effect mode |
 | `onClick` | function | undefined | Click handler |
-| `withBorder` | boolean | true | Whether to show border effects |
+| `border` | boolean \| GlassBorderConfig | true | Liquid glass rim (~0.5px). Structured: `{ enabled?, width?, opacity?, animated? }` |
+| `withBorder` | boolean | true | **Deprecated** — use `border` (alias when `border` is omitted) |
 | `withLiquidBlur` | boolean | false | Whether to enable liquid blur effects |
 | `withoutEffects` | boolean | false | Whether to disable all visual effects |
 | `reducedMotion` | boolean | false | Force reduced motion preference |