@shohojdhara/atomix 0.3.12 → 0.3.13

package/dist/index.esm.js

@@ -1825,7 +1825,13 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
  */ GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
-const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
+const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount));
+
+// Module-level counter for deterministic ID generation
+let idCounter = 0;
+
+// Module-level shared shader cache with LRU eviction
+const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
 }, globalMousePosition: globalMousePosition = {
@@ -1836,10 +1842,8 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
     height: 0
 }, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
-    // Use a counter-based approach to avoid hydration mismatches
-    const [filterId] = useState((() => 
-    // Use a simple counter for deterministic IDs
-    "undefined" == typeof window ? `atomix-glass-filter-ssr-${Math.random().toString(36).substring(2, 11)}` : `atomix-glass-filter-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`)), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
+    // Use a module-level counter that's consistent across server and client
+    const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
@@ -1880,9 +1884,9 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
                         width: glassSize.width,
                         height: glassSize.height,
                         fragment: selectedShader
-                    });
-                    // Use requestIdleCallback if available for non-blocking generation
-                    const generate = () => {
+                    }), 
+                    // Defer shader generation with longer delay to avoid blocking
+                    setTimeout((() => {
                         const url = shaderGeneratorRef.current?.updateShader() || "";
                         ((key, url) => {
                             // Evict oldest entries if at capacity
@@ -1901,20 +1905,15 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
                             // Development mode: log cache size
                             "undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
                         })(cacheKey, url), setShaderMapUrl(url);
-                    };
-                    "undefined" != typeof requestIdleCallback ? requestIdleCallback(generate, {
-                        timeout: 1e3
-                    }) : 
-                    // Fallback to setTimeout for browsers without requestIdleCallback
-                    setTimeout(generate, 0);
+                    }), 100);
                 } catch (error) {
                     console.warn("AtomixGlassContainer: Error generating shader map", error), setShaderMapUrl("");
                 } else 
                 // Shader utils not loaded yet, retry after a short delay
                 shaderDebounceTimeoutRef.current = setTimeout(generateShader, 100);
             };
-            // Debounce with 300ms delay
-                        shaderDebounceTimeoutRef.current = setTimeout(generateShader, 300);
+            // Debounce with 500ms delay to reduce frequency
+                        shaderDebounceTimeoutRef.current = setTimeout(generateShader, 500);
         } else 
         // Not in shader mode, clear URL
         setShaderMapUrl("");
@@ -1981,7 +1980,7 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
                 backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
             };
         }
-    }), [ filterId, liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = useMemo((() => {
+    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = useMemo((() => {
         try {
             // Safe extraction of mouse offset values
             const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
@@ -2070,7 +2069,6 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
     });
 }));
 
-// Module-level shared shader cache with LRU eviction
 AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance