@shohojdhara/atomix 0.3.12 → 0.3.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atomix.css +6 -11
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +5 -15258
- package/dist/atomix.min.css.map +1 -1
- package/dist/charts.js +16 -18
- package/dist/charts.js.map +1 -1
- package/dist/core.js +16 -18
- package/dist/core.js.map +1 -1
- package/dist/forms.js +17 -19
- package/dist/forms.js.map +1 -1
- package/dist/heavy.js +17 -19
- package/dist/heavy.js.map +1 -1
- package/dist/index.esm.js +16 -18
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +16 -18
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +41 -44
- package/src/components/AtomixGlass/stories/Modes.stories.tsx +1 -2
- package/src/styles/06-components/_components.atomix-glass.scss +14 -15
package/dist/charts.js
CHANGED
|
@@ -1719,7 +1719,13 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
|
|
|
1719
1719
|
*/ GlassFilterComponent.displayName = "GlassFilter";
|
|
1720
1720
|
|
|
1721
1721
|
// Memoize component to prevent unnecessary re-renders
|
|
1722
|
-
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))
|
|
1722
|
+
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));
|
|
1723
|
+
|
|
1724
|
+
// Module-level counter for deterministic ID generation
|
|
1725
|
+
let idCounter = 0;
|
|
1726
|
+
|
|
1727
|
+
// Module-level shared shader cache with LRU eviction
|
|
1728
|
+
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 = {
|
|
1723
1729
|
x: 0,
|
|
1724
1730
|
y: 0
|
|
1725
1731
|
}, globalMousePosition: globalMousePosition = {
|
|
@@ -1730,10 +1736,8 @@ const GlassFilter = memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
|
|
|
1730
1736
|
height: 0
|
|
1731
1737
|
}, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
|
|
1732
1738
|
// Generate a stable, deterministic ID for SSR compatibility
|
|
1733
|
-
// Use a
|
|
1734
|
-
const [
|
|
1735
|
-
// Use a simple counter for deterministic IDs
|
|
1736
|
-
"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);
|
|
1739
|
+
// Use a module-level counter that's consistent across server and client
|
|
1740
|
+
const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
|
|
1737
1741
|
// Lazy load shader utilities only when shader mode is needed
|
|
1738
1742
|
useEffect((() => {
|
|
1739
1743
|
"shader" === mode ?
|
|
@@ -1774,9 +1778,9 @@ const GlassFilter = memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
|
|
|
1774
1778
|
width: glassSize.width,
|
|
1775
1779
|
height: glassSize.height,
|
|
1776
1780
|
fragment: selectedShader
|
|
1777
|
-
})
|
|
1778
|
-
//
|
|
1779
|
-
|
|
1781
|
+
}),
|
|
1782
|
+
// Defer shader generation with longer delay to avoid blocking
|
|
1783
|
+
setTimeout((() => {
|
|
1780
1784
|
const url = shaderGeneratorRef.current?.updateShader() || "";
|
|
1781
1785
|
((key, url) => {
|
|
1782
1786
|
// Evict oldest entries if at capacity
|
|
@@ -1795,20 +1799,15 @@ const GlassFilter = memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
|
|
|
1795
1799
|
// Development mode: log cache size
|
|
1796
1800
|
"undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
|
|
1797
1801
|
})(cacheKey, url), setShaderMapUrl(url);
|
|
1798
|
-
};
|
|
1799
|
-
"undefined" != typeof requestIdleCallback ? requestIdleCallback(generate, {
|
|
1800
|
-
timeout: 1e3
|
|
1801
|
-
}) :
|
|
1802
|
-
// Fallback to setTimeout for browsers without requestIdleCallback
|
|
1803
|
-
setTimeout(generate, 0);
|
|
1802
|
+
}), 100);
|
|
1804
1803
|
} catch (error) {
|
|
1805
1804
|
console.warn("AtomixGlassContainer: Error generating shader map", error), setShaderMapUrl("");
|
|
1806
1805
|
} else
|
|
1807
1806
|
// Shader utils not loaded yet, retry after a short delay
|
|
1808
1807
|
shaderDebounceTimeoutRef.current = setTimeout(generateShader, 100);
|
|
1809
1808
|
};
|
|
1810
|
-
// Debounce with
|
|
1811
|
-
shaderDebounceTimeoutRef.current = setTimeout(generateShader,
|
|
1809
|
+
// Debounce with 500ms delay to reduce frequency
|
|
1810
|
+
shaderDebounceTimeoutRef.current = setTimeout(generateShader, 500);
|
|
1812
1811
|
} else
|
|
1813
1812
|
// Not in shader mode, clear URL
|
|
1814
1813
|
setShaderMapUrl("");
|
|
@@ -1875,7 +1874,7 @@ const GlassFilter = memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
|
|
|
1875
1874
|
backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
|
|
1876
1875
|
};
|
|
1877
1876
|
}
|
|
1878
|
-
}), [
|
|
1877
|
+
}), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = useMemo((() => {
|
|
1879
1878
|
try {
|
|
1880
1879
|
// Safe extraction of mouse offset values
|
|
1881
1880
|
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;
|
|
@@ -1964,7 +1963,6 @@ const GlassFilter = memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
|
|
|
1964
1963
|
});
|
|
1965
1964
|
}));
|
|
1966
1965
|
|
|
1967
|
-
// Module-level shared shader cache with LRU eviction
|
|
1968
1966
|
AtomixGlassContainer.displayName = "AtomixGlassContainer";
|
|
1969
1967
|
|
|
1970
1968
|
// Singleton instance
|