aura-glass/dist/esm/primitives/OptimizedGlassCore.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsx } from 'react/jsx-runtime';
import { forwardRef, useState, useEffect, useMemo } from 'react';
import { createGlassStyle } from '../core/mixins/glassMixins.js';
import { cn } from '../lib/utilsComprehensive.js';
import { detectDevice } from '../utils/deviceCapabilities.js';
import { isBrowser } from '../utils/env.js';

const IS_TEST_ENV = typeof process !== 'undefined' && process.env?.JEST_WORKER_ID !== undefined;
const OptimizedGlassCore = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    as: Component = 'div',
    intent = 'neutral',
    elevation = 'level2',
    tier = 'high',
    rounded = 'md',
    glow = false,
    glowColor = 'rgba(255, 255, 255, 0.5)',
    glowIntensity = 0.5,
    hover = false,
    interactive = false,
    press = false,
    animation = 'none',
    // Prevent forwarding custom props to DOM
    performanceMode: _performanceMode,
    // Also intercept additional non-DOM props so they don't leak
    optimization,
    hardwareAcceleration,
    intensity,
    depth,
    tint,
    border,
    blur,
    variant,
    lighting,
    // Advanced visual flags (do not forward to DOM)
    caustics,
    chromatic,
    parallax,
    refraction,
    adaptive,
    magnet,
    cursorHighlight,
    liftOnHover = false,
    hoverSheen = false,
    className,
    children,
    style,
    ...restProps
  } = props;
  // CRITICAL FIX for SSR hydration: Defer tier detection until after initial render
  // This prevents className mismatches between server and client
  const [computedTier, setComputedTier] = useState(() => {
    // If tier is explicitly set (not default 'high'), respect it immediately
    if (tier !== 'high') return tier;
    // Start with 'medium' for both server and initial client render
    return 'medium';
  });
  // Auto-detect performance tier on client AFTER hydration
  useEffect(() => {
    if (IS_TEST_ENV) {
      return;
    }
    // Only auto-detect if using default tier
    if (tier !== 'high') {
      setComputedTier(tier);
      return;
    }
    // Skip detection on server
    if (!isBrowser()) return;
    // Detect device capabilities and update tier
    const device = detectDevice();
    if (device.capabilities.gpu && device.capabilities.hardwareAcceleration) {
      setComputedTier('high');
    } else if (device.capabilities.webgl) {
      setComputedTier('medium');
    } else {
      setComputedTier('low');
    }
  }, [tier]);
  // Use unified glass system with performance tier
  const glassStyles = useMemo(() => {
    const glassOptions = {
      intent,
      elevation,
      tier: computedTier,
      interactive,
      hoverLift: liftOnHover,
      focusRing: interactive,
      press
    };
    return createGlassStyle(glassOptions);
  }, [intent, elevation, computedTier, interactive, liftOnHover, press]);
  // Add border radius and any custom styles 
  const combinedStyles = {
    ...glassStyles,
    borderRadius: rounded === 'none' ? '0px' : rounded === 'sm' ? '4px' : rounded === 'md' ? '8px' : rounded === 'lg' ? '12px' : rounded === 'xl' ? '16px' : rounded === 'full' ? '9999px' : '8px',
    ...style
  };
  // Ensure no custom props leak into the DOM element
  const {
    performanceMode: __ignorePerformanceMode,
    optimization: __ignoreOptimization,
    hardwareAcceleration: __ignoreHardwareAcceleration,
    intensity: __ignoreIntensity,
    depth: __ignoreDepth,
    tint: __ignoreTint,
    border: __ignoreBorder,
    blur: __ignoreBlur,
    // Common prop name used across components; should not reach DOM
    blurStrength: __ignoreBlurStrength,
    variant: __ignoreVariant,
    lighting: __ignoreLighting,
    // Consciousness master flag should never reach the DOM
    consciousness: __ignoreConsciousness,
    caustics: __ignoreCaustics,
    chromatic: __ignoreChromatic,
    parallax: __ignoreParallax,
    refraction: __ignoreRefraction,
    adaptive: __ignoreAdaptive,
    magnet: __ignoreMagnet,
    cursorHighlight: __ignoreCursorHighlight,
    glassConfig: __ignoreGlassConfig,
    ...domProps
  } = restProps || {};
  // Remove any accidental custom props leaking to DOM, e.g., camelCase starting with 'glass'
  // Keep data-*/aria-* untouched; React handles them.
  Object.keys(domProps).forEach(key => {
    if (/^glass[A-Z]/.test(key)) {
      delete domProps[key];
    }
  });
  return jsx(Component, {
    ref: ref,
    className: cn('optimized-glass-surface', `glass-${intent}-${elevation}`, {
      'glass-interactive': interactive,
      'glass-lift-on-hover': liftOnHover,
      'glass-hover-sheen': hoverSheen,
      'glass-glow': glow,
      'glass-press': press,
      'glass-tier-high': computedTier === 'high',
      'glass-tier-medium': computedTier === 'medium',
      'glass-tier-low': computedTier === 'low'
    }, className),
    style: combinedStyles,
    "data-performance-mode": _performanceMode,
    "data-caustics": caustics || undefined,
    "data-chromatic": chromatic || undefined,
    "data-parallax": parallax || undefined,
    "data-refraction": refraction || undefined,
    "data-adaptive": adaptive || undefined,
    "data-magnet": magnet || undefined,
    "data-cursor-highlight": cursorHighlight || undefined,
    ...domProps,
    children: children
  });
});
OptimizedGlassCore.displayName = 'OptimizedGlassCore';

export { OptimizedGlassCore, OptimizedGlassCore as default };
//# sourceMappingURL=OptimizedGlassCore.js.map