aura-glass 2.0.28 → 2.0.30

package/dist/index.js

@@ -112,14 +112,20 @@ function cn$1() {
 
 /**
  * Environment helpers to centralize SSR/browser detection and safe global access.
+ *
+ * CRITICAL: These must check dynamically, NOT cache at module load time,
+ * to handle polyfills and avoid locking in server environment values.
+ */
+/**
+ * Dynamic check - re-evaluates on every call to support polyfills
  */
-const hasWindow = typeof window !== 'undefined';
-const hasDocument = typeof document !== 'undefined';
-const hasNavigator = typeof navigator !== 'undefined';
+const hasWindow = () => typeof window !== 'undefined';
+const hasDocument = () => typeof document !== 'undefined';
+const hasNavigator = () => typeof navigator !== 'undefined';
 /**
  * Returns true when executed in a browser-like environment.
  */
-const isBrowser = () => hasWindow && hasDocument;
+const isBrowser = () => hasWindow() && hasDocument();
 /**
  * Convenience inverse helper.
  */
@@ -127,15 +133,15 @@ const isServer = () => !isBrowser();
 /**
  * Safely access the `window` object when available.
  */
-const getSafeWindow = () => hasWindow ? window : undefined;
+const getSafeWindow = () => hasWindow() ? window : undefined;
 /**
  * Safely access the `document` object when available.
  */
-const getSafeDocument = () => hasDocument ? document : undefined;
+const getSafeDocument = () => hasDocument() ? document : undefined;
 /**
  * Safely access the `navigator` object when available.
  */
-const getSafeNavigator = () => hasNavigator ? navigator : undefined;
+const getSafeNavigator = () => hasNavigator() ? navigator : undefined;
 /**
  * Helper to guard feature detection against SSR environments.
  */
@@ -3843,20 +3849,33 @@ const OptimizedGlassCore = /*#__PURE__*/React.forwardRef((props, ref) => {
       style
     } = props,
     restProps = _objectWithoutProperties(props, _excluded$2S);
-  // Detect device capabilities for auto tier selection
-  const device = React.useMemo(() => detectDevice(), []);
-  // Automatically determine performance tier based on device capabilities
-  const computedTier = React.useMemo(() => {
-    if (tier !== 'high') return tier; // Respect explicitly set tier
-    // Auto-detect performance tier
+  // CRITICAL FIX for SSR hydration: Defer tier detection until after initial render
+  // This prevents className mismatches between server and client
+  const [computedTier, setComputedTier] = React.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
+  React.useEffect(() => {
+    // 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) {
-      return 'high';
+      setComputedTier('high');
     } else if (device.capabilities.webgl) {
-      return 'medium';
+      setComputedTier('medium');
     } else {
-      return 'low';
+      setComputedTier('low');
     }
-  }, [tier, device.capabilities]);
+  }, [tier]);
   // Use unified glass system with performance tier
   const glassStyles = React.useMemo(() => {
     const glassOptions = {
@@ -5478,6 +5497,11 @@ const UnifiedThemeProvider = _ref => {
               children: jsxRuntime.jsx(ResponsiveContext.Provider, {
                 value: responsiveContextValue,
                 children: (() => {
+                  // Server-side: skip styled-components entirely
+                  if (typeof window === 'undefined') {
+                    return children;
+                  }
+                  // Client-side only: load styled-components
                   const StyledThemeProvider = getStyledThemeProvider();
                   return StyledThemeProvider ? jsxRuntime.jsx(StyledThemeProvider, {
                     theme: theme,