@shohojdhara/atomix 0.6.5 → 0.6.6

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.
Files changed (39) hide show
  1. package/dist/atomix.css +2 -2
  2. package/dist/atomix.css.map +1 -1
  3. package/dist/atomix.min.css +1 -1
  4. package/dist/atomix.min.css.map +1 -1
  5. package/dist/atomix.umd.js +1 -1
  6. package/dist/atomix.umd.js.map +1 -1
  7. package/dist/atomix.umd.min.js +1 -1
  8. package/dist/charts.js +65 -255
  9. package/dist/charts.js.map +1 -1
  10. package/dist/core.js +65 -255
  11. package/dist/core.js.map +1 -1
  12. package/dist/forms.js +65 -255
  13. package/dist/forms.js.map +1 -1
  14. package/dist/heavy.js +65 -255
  15. package/dist/heavy.js.map +1 -1
  16. package/dist/index.d.ts +6 -37
  17. package/dist/index.esm.js +66 -300
  18. package/dist/index.esm.js.map +1 -1
  19. package/dist/index.js +66 -300
  20. package/dist/index.js.map +1 -1
  21. package/dist/index.min.js +1 -1
  22. package/dist/index.min.js.map +1 -1
  23. package/package.json +1 -1
  24. package/src/components/AtomixGlass/AtomixGlass.tsx +0 -9
  25. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +0 -2
  26. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +1 -1
  27. package/src/components/AtomixGlass/glass-utils.ts +82 -53
  28. package/src/components/AtomixGlass/shader-utils.ts +19 -77
  29. package/src/components/Form/Select.test.tsx +6 -6
  30. package/src/components/Form/Textarea.stories.tsx +5 -5
  31. package/src/lib/composables/useAtomixGlass.ts +2 -134
  32. package/src/lib/composables/useAtomixGlassStyles.ts +3 -3
  33. package/src/lib/composables/usePerformanceMonitor.ts +0 -66
  34. package/src/lib/constants/components.ts +6 -1
  35. package/src/styles/01-settings/_settings.atomix-glass.scss +2 -2
  36. package/src/styles/02-tools/_tools.button.scss +51 -42
  37. package/src/styles/06-components/_components.atomix-glass.scss +2 -2
  38. package/src/components/AtomixGlass/PerformanceDashboard.tsx +0 -171
  39. package/src/components/AtomixGlass/animation-system.ts +0 -578
package/dist/heavy.js CHANGED
@@ -166,6 +166,11 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
166
166
  MIN_BLUR: .1,
167
167
  MOUSE_INFLUENCE_DIVISOR: 100,
168
168
  EDGE_FADE_PIXELS: 2,
169
+ // Interaction intensity multipliers shared by the hook and the imperative style updater
170
+ INTERACTION: {
171
+ HOVER_INTENSITY: 1.4,
172
+ ACTIVE_INTENSITY: 1.6
173
+ },
169
174
  // Elasticity physics constants — Apple-tuned: soft springs, fast settling, minimal stretch
170
175
  ELASTICITY_TRANSLATION_FACTOR: .06,
171
176
  // Subtler elastic shift (was 0.1)
@@ -363,7 +368,7 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
363
368
  },
364
369
  // Container shadows — hairline inner catch + soft floating lift (Apple player bar)
365
370
  CONTAINER_SHADOW: {
366
- LIGHT: "inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16)"
371
+ LIGHT: "inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08)"
367
372
  },
368
373
  // Phase 1: Animation System Constants
369
374
  ANIMATION: {
@@ -803,7 +808,28 @@ const {CONSTANTS: CONSTANTS$3} = ATOMIX_GLASS, calculateElementCenter = rect =>
803
808
  }, smoothstep = t => {
804
809
  const clamped = Math.max(0, Math.min(1, t));
805
810
  return clamped * clamped * (3 - 2 * clamped);
806
- }, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
811
+ }, lerp = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), clamp = (value, min, max) => "number" != typeof value || isNaN(value) ? min : Math.max(min, Math.min(max, value)), smoothstepEdge = (edge0, edge1, x) => "number" != typeof edge0 || "number" != typeof edge1 || "number" != typeof x ? 0 : smoothstep((x - edge0) / (edge1 - edge0)), easeInOutCubic = t => {
812
+ if ("number" != typeof t || isNaN(t)) return 0;
813
+ const clamped = Math.max(0, Math.min(1, t));
814
+ return clamped < .5 ? 4 * clamped * clamped * clamped : 1 - Math.pow(-2 * clamped + 2, 3) / 2;
815
+ }, easeOutQuart = t => {
816
+ if ("number" != typeof t || isNaN(t)) return 0;
817
+ const clamped = Math.max(0, Math.min(1, t));
818
+ return 1 - Math.pow(1 - clamped, 4);
819
+ }, vec2Length = (x, y) => {
820
+ if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
821
+ const maxComponent = Math.max(Math.abs(x), Math.abs(y));
822
+ if (0 === maxComponent) return 0;
823
+ const scaledX = x / maxComponent, scaledY = y / maxComponent;
824
+ return maxComponent * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
825
+ }, getInteractionIntensity = (isHovered, isActive) => ({
826
+ hoverIntensity: isHovered ? CONSTANTS$3.INTERACTION.HOVER_INTENSITY : 1,
827
+ activeIntensity: isActive ? CONSTANTS$3.INTERACTION.ACTIVE_INTENSITY : 1
828
+ })
829
+ /**
830
+ * Spring-damper integration helper
831
+ * Calculates the next value based on velocity, stiffness, and damping.
832
+ */ , calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
807
833
  const newVelocity = (velocity + (target - current) * stiffness) * damping;
808
834
  return {
809
835
  value: current + newVelocity,
@@ -1009,7 +1035,7 @@ const GlassFilter = memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
1009
1035
  }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, glassSize: glassSize = {
1010
1036
  width: 0,
1011
1037
  height: 0
1012
- }, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
1038
+ }, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
1013
1039
  // React 18 useId — stable, unique, and SSR-safe (no module-level counter)
1014
1040
  const rawId = useId(), filterId = useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), containerRef = useForkRef(ref, null), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
1015
1041
  // Lazy load shader utilities only when shader mode is needed
@@ -1307,7 +1333,7 @@ class {
1307
1333
  }, {BORDER: BORDER, CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, BORDER_GRADIENT = BORDER.GRADIENT, WHITE = CONSTANTS$2.PALETTE.WHITE, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
1308
1334
  if (!wrapperElement && !containerElement) return;
1309
1335
  if (!validateGlassSize(params.glassSize)) return;
1310
- const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, isFixedOrSticky: isFixedOrSticky = !1, borderAnimated: borderAnimated = !0, borderOpacityMultiplier: borderOpacityMultiplier = 1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
1336
+ const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, isFixedOrSticky: isFixedOrSticky = !1, borderAnimated: borderAnimated = !0, borderOpacityMultiplier: borderOpacityMultiplier = 1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), overLightConfig = {
1311
1337
  opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
1312
1338
  contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
1313
1339
  brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
@@ -1438,140 +1464,9 @@ class {
1438
1464
  style.setProperty("--atomix-glass-container-shadow-opacity", effectiveWithoutEffects ? "0" : "1"),
1439
1465
  style.setProperty("--atomix-glass-container-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"),
1440
1466
  style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"),
1441
- style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18)");
1467
+ style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10)");
1442
1468
  }
1443
- };
1444
-
1445
- /**
1446
- * Animation System for AtomixGlass Component
1447
- *
1448
- * Implements Phase 1 features from the AtomixGlass Feature Implementation Roadmap:
1449
- * - Feature 1.1: Time-Based Animation System
1450
- * - Feature 1.2: Multi-Layer Distortion System (FBM)
1451
- *
1452
- * @packageDocumentation
1453
- */
1454
- // ============================================================================
1455
- // Noise Functions for FBM (Feature 1.2)
1456
- // ============================================================================
1457
- /**
1458
- * Perlin noise implementation for smooth gradient noise
1459
- *
1460
- * @param x - X coordinate
1461
- * @param y - Y coordinate
1462
- * @returns Noise value in range [0, 1]
1463
- */
1464
- function perlinNoise(x, y) {
1465
- // Simplified Perlin noise using pseudo-random gradients
1466
- const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = fade(xf), v = fade(yf), A = p[X] + Y & 255, B = p[X + 1] + Y & 255, ga = grad(p[A], xf, yf), gb = grad(p[B], xf - 1, yf), gc = grad(p[A + 1 & 255], xf, yf - 1), gd = grad(p[B + 1 & 255], xf - 1, yf - 1), lerpX1 = lerp(ga, gb, u), lerpX2 = lerp(gc, gd, u);
1467
- // Scale to [0, 1] range
1468
- return (lerp(lerpX1, lerpX2, v) + 1) / 2;
1469
- }
1470
-
1471
- // ============================================================================
1472
- // Fractal Brownian Motion (FBM) Engine (Feature 1.2)
1473
- // ============================================================================
1474
- /**
1475
- * Creates an FBM engine with configurable parameters
1476
- *
1477
- * @param config - FBM configuration (octaves, lacunarity, gain)
1478
- * @returns Object with fbm function
1479
- *
1480
- * @example
1481
- * ```typescript
1482
- * const fbmEngine = createFBMEngine({ octaves: 5, lacunarity: 2, gain: 0.5 });
1483
- *
1484
- * // Generate noise at position (0.5, 0.5) with time animation
1485
- * const noiseValue = fbmEngine.fbm(0.5, 0.5, Date.now());
1486
- * ```
1487
- */ function createFBMEngine(config) {
1488
- /**
1489
- * Fractal Brownian Motion function
1490
- * Combines multiple octaves of noise for complex, natural patterns
1491
- *
1492
- * @param x - X coordinate
1493
- * @param y - Y coordinate
1494
- * @param time - Optional time value for animation
1495
- * @returns FBM noise value in range [0, 1]
1496
- */
1497
- const fbm = (x, y, time = 0) => {
1498
- let value = 0, amplitude = .5, frequency = 1, phase = .001 * time;
1499
- // Convert to seconds for reasonable animation speed
1500
- for (let i = 0; i < config.octaves; i++)
1501
- // Apply time-based phase shift to all octaves
1502
- value += perlinNoise(x * frequency + phase, y * frequency + phase) * amplitude,
1503
- frequency *= config.lacunarity, // Increase frequency
1504
- amplitude *= config.gain;
1505
- return value;
1506
- };
1507
- /**
1508
- * Get FBM with simple time factor
1509
- */ return {
1510
- fbm: fbm,
1511
- fbmWithTime: (x, y, time) => fbm(x, y, time)
1512
- };
1513
- }
1514
-
1515
- /**
1516
- * Gets optimal FBM config based on quality preset
1517
- *
1518
- * @param quality - Quality preset level
1519
- * @returns FBM configuration for the quality level
1520
- */ const fbmEngineCache = new Map;
1521
-
1522
- // ============================================================================
1523
- // Shader Utility Functions for Time-Based Effects
1524
- // ============================================================================
1525
- /**
1526
- * Liquid glass distortion with time-based animation
1527
- * Uses FBM to create organic, flowing liquid effects
1528
- *
1529
- * @param uv - UV coordinates (normalized 0-1)
1530
- * @param time - Elapsed time in milliseconds
1531
- * @param config - FBM configuration
1532
- * @returns Distorted UV coordinates
1533
- */ function liquidGlassWithTime(uv, time, config) {
1534
- const configKey = `${config.octaves}-${config.lacunarity}-${config.gain}`;
1535
- let fbmEngine = fbmEngineCache.get(configKey);
1536
- fbmEngine || (fbmEngine = createFBMEngine(config), fbmEngineCache.set(configKey, fbmEngine));
1537
- // Animate noise with time
1538
- const animatedNoise = fbmEngine.fbmWithTime(2 * uv.x + 1e-4 * time, 2 * uv.y + 15e-5 * time, time);
1539
- return {
1540
- x: uv.x + .04 * (animatedNoise - .5),
1541
- y: uv.y + .04 * (animatedNoise - .5)
1542
- };
1543
- }
1544
-
1545
- // ============================================================================
1546
- // Helper Functions
1547
- // ============================================================================
1548
- /**
1549
- * Fade curve for smooth interpolation (Perlin's fade function)
1550
- */ function fade(t) {
1551
- return t * t * t * (t * (6 * t - 15) + 10);
1552
- }
1553
-
1554
- /**
1555
- * Linear interpolation
1556
- */ function lerp(a, b, t) {
1557
- return a + t * (b - a);
1558
- }
1559
-
1560
- /**
1561
- * Gradient calculation for Perlin noise
1562
- */ function grad(hash, x, y) {
1563
- const h = 15 & hash, u = h < 8 ? x : y, v = h < 4 ? y : 12 === h || 14 === h ? x : 0;
1564
- return (1 & h ? -u : u) + (2 & h ? -v : v);
1565
- }
1566
-
1567
- /**
1568
- * Permutation table for Perlin noise
1569
- */ const p = (() => {
1570
- const permutation = [];
1571
- for (let i = 0; i < 256; i++) permutation[i] = Math.floor(256 * Math.random());
1572
- // Duplicate for overflow handling
1573
- return [ ...permutation, ...permutation ];
1574
- })(), {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
1469
+ }, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
1575
1470
 
1576
1471
  const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
1577
1472
  parentElement && backgroundDetectionCache.set(parentElement, {
@@ -1586,10 +1481,7 @@ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new Weak
1586
1481
  * Composable hook for AtomixGlass component logic
1587
1482
  * Manages all state, calculations, and event handlers
1588
1483
  */
1589
- function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, border: border, withBorder: withBorder = !0, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1, withTimeAnimation:
1590
- // Default priority
1591
- // Phase 1: Animation System Props
1592
- withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
1484
+ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, border: border, withBorder: withBorder = !0, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1}) {
1593
1485
  // State
1594
1486
  const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), resolvedBorder = useMemo((() =>
1595
1487
  /**
@@ -1641,52 +1533,10 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
1641
1533
  }), scaleVelocityRef = useRef({
1642
1534
  x: 0,
1643
1535
  y: 0
1644
- });
1645
- useRef(0);
1646
- const mouseVelocityRef = useRef({
1536
+ }), mouseVelocityRef = useRef({
1647
1537
  x: 0,
1648
1538
  y: 0
1649
- }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = useMemo((() => {
1650
- // If quality preset is provided, use it as base
1651
- const preset = (quality = distortionQuality, ATOMIX_GLASS.CONSTANTS.DISTORTION_QUALITY_PRESETS[quality]);
1652
- // Override with custom values if provided
1653
- var quality;
1654
- return {
1655
- octaves: distortionOctaves ?? preset.octaves,
1656
- lacunarity: distortionLacunarity ?? preset.lacunarity,
1657
- gain: distortionGain ?? preset.gain
1658
- };
1659
- }), [ distortionQuality, distortionOctaves, distortionLacunarity, distortionGain ]), fbmEngine = useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
1660
- /**
1661
- * Animation loop for time-based effects
1662
- */
1663
- useEffect((() => {
1664
- if (!effectiveWithTimeAnimation || "undefined" == typeof window) return;
1665
- let lastFrameTime = performance.now();
1666
- /**
1667
- * Animation frame handler
1668
- */ const animate = currentTime => {
1669
- // Calculate delta time
1670
- const deltaTime = currentTime - lastFrameTime;
1671
- lastFrameTime = currentTime;
1672
- // Apply animation speed multiplier
1673
- const scaledDelta = deltaTime * animationSpeed;
1674
- elapsedTimeRef.current += scaledDelta, shaderTimeRef.current = elapsedTimeRef.current,
1675
- // Continue animation loop
1676
- animationFrameIdRef.current = requestAnimationFrame(animate);
1677
- };
1678
- // Start animation
1679
- // Cleanup
1680
- return animationStartTimeRef.current = performance.now(), animationFrameIdRef.current = requestAnimationFrame(animate),
1681
- () => {
1682
- null !== animationFrameIdRef.current && (cancelAnimationFrame(animationFrameIdRef.current),
1683
- animationFrameIdRef.current = null);
1684
- };
1685
- }), [ effectiveWithTimeAnimation, animationSpeed ]);
1686
- /**
1687
- * Get current shader time for animations
1688
- */
1689
- const getShaderTime = useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
1539
+ }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
1690
1540
  const [glassSize, setGlassSize] = useState({
1691
1541
  width: 270,
1692
1542
  height: 69
@@ -1746,9 +1596,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
1746
1596
  effectiveBorderRadius: effectiveBorderRadius,
1747
1597
  cachedRectRef: cachedRectRef
1748
1598
  }), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
1749
- /**
1750
- * Apply time-based distortion to UV coordinates
1751
- */
1752
1599
  // Extract border-radius from children
1753
1600
  useEffect((() => {
1754
1601
  const extractRadius = () => {
@@ -1908,7 +1755,7 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
1908
1755
  * Get effective overLight value based on configuration
1909
1756
  */
1910
1757
  const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = useMemo((() => {
1911
- const isOverLight = getEffectiveOverLight(), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
1758
+ const isOverLight = getEffectiveOverLight(), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), baseConfig = {
1912
1759
  isOverLight: isOverLight,
1913
1760
  threshold: .7,
1914
1761
  opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
@@ -1952,8 +1799,8 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
1952
1799
  };
1953
1800
  const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
1954
1801
  internalGlobalMousePositionRef.current = {
1955
- x: lerp$1(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
1956
- y: lerp$1(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
1802
+ x: lerp(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
1803
+ y: lerp(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
1957
1804
  };
1958
1805
  // ── Calculate Elastic Physics ─────────────────────────────────────
1959
1806
  let targetElasticTranslation = {
@@ -2120,8 +1967,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
2120
1967
  overLightConfig: overLightConfig,
2121
1968
  resolvedBorder: resolvedBorder,
2122
1969
  transformStyle: transformStyle,
2123
- getShaderTime: getShaderTime,
2124
- applyTimeBasedDistortion: applyTimeBasedDistortion,
2125
1970
  handleMouseEnter: handleMouseEnter,
2126
1971
  handleMouseLeave: handleMouseLeave,
2127
1972
  handleMouseDown: handleMouseDown,
@@ -2397,7 +2242,7 @@ const PERFORMANCE_PRESET = {
2397
2242
  var explicit, position;
2398
2243
  /**
2399
2244
  * Extracts layout-related properties from a React `CSSProperties` object.
2400
- */ const {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown, resolvedBorder: resolvedBorder} = useAtomixGlass({
2245
+ */ const {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown, resolvedBorder: resolvedBorder} = useAtomixGlass({
2401
2246
  glassRef: glassRef,
2402
2247
  contentRef: contentRef,
2403
2248
  wrapperRef: internalWrapperRef,
@@ -2421,14 +2266,7 @@ const PERFORMANCE_PRESET = {
2421
2266
  withBorder: withBorder,
2422
2267
  debugBorderRadius: debugBorderRadius,
2423
2268
  style: style,
2424
- isFixedOrSticky: isFixedOrSticky,
2425
- withTimeAnimation: withTimeAnimation,
2426
- animationSpeed: animationSpeed,
2427
- withMultiLayerDistortion: withMultiLayerDistortion,
2428
- distortionOctaves: distortionOctaves,
2429
- distortionLacunarity: distortionLacunarity,
2430
- distortionGain: distortionGain,
2431
- distortionQuality: distortionQuality
2269
+ isFixedOrSticky: isFixedOrSticky
2432
2270
  });
2433
2271
  (
2434
2272
  /**
@@ -3003,7 +2841,6 @@ const PERFORMANCE_PRESET = {
3003
2841
  shaderVariant: shaderVariant,
3004
2842
  withLiquidBlur: withLiquidBlur,
3005
2843
  isFixedOrSticky: isFixedOrSticky,
3006
- shaderTime: getShaderTime(),
3007
2844
  withTimeAnimation: withTimeAnimation,
3008
2845
  animationSpeed: animationSpeed,
3009
2846
  withMultiLayerDistortion: withMultiLayerDistortion,
@@ -3057,40 +2894,15 @@ const PERFORMANCE_PRESET = {
3057
2894
  */ AtomixGlassInner.displayName = "AtomixGlass";
3058
2895
 
3059
2896
  /** Memoized public export. Ref targets the root `.c-atomix-glass` wrapper. */
3060
- const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3061
- // Add input validation
3062
- if ("number" != typeof a || "number" != typeof b || "number" != typeof t) return 0;
3063
- const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
3064
- return clamped * clamped * (3 - 2 * clamped);
3065
- }, calculateLength = (x, y) => {
3066
- // Add input validation and error handling
3067
- if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
3068
- // Prevent potential overflow
3069
- const maxX = Math.max(Math.abs(x), Math.abs(y));
3070
- if (0 === maxX) return 0;
3071
- const scaledX = x / maxX, scaledY = y / maxX;
3072
- return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
3073
- }, roundedRectSDF = (x, y, width, height, radius) => {
2897
+ const AtomixGlass = memo(AtomixGlassInner), roundedRectSDF = (x, y, width, height, radius) => {
3074
2898
  // Add input validation
3075
2899
  if ("number" != typeof x || "number" != typeof y || "number" != typeof width || "number" != typeof height || "number" != typeof radius) return 0;
3076
2900
  const qx = Math.abs(x) - width + radius, qy = Math.abs(y) - height + radius;
3077
- return Math.min(Math.max(qx, qy), 0) + calculateLength(Math.max(qx, 0), Math.max(qy, 0)) - radius;
2901
+ return Math.min(Math.max(qx, qy), 0) + vec2Length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
3078
2902
  }, createTexture = (x, y) => ({
3079
2903
  x: "number" != typeof x || isNaN(x) ? .5 : Math.max(0, Math.min(1, x)),
3080
2904
  y: "number" != typeof y || isNaN(y) ? .5 : Math.max(0, Math.min(1, y))
3081
- }), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), clampValue = (value, min, max) =>
3082
- // Add input validation
3083
- "number" != typeof value || "number" != typeof min || "number" != typeof max || isNaN(value) ? min : isNaN(min) ? 0 : isNaN(max) ? 1 : Math.max(min, Math.min(max, value)), easeInOutCubic = t => {
3084
- // Add input validation
3085
- if ("number" != typeof t || isNaN(t)) return 0;
3086
- const clampedT = Math.max(0, Math.min(1, t));
3087
- return clampedT < .5 ? 4 * clampedT * clampedT * clampedT : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
3088
- }, easeOutQuart = t => {
3089
- // Add input validation
3090
- if ("number" != typeof t || isNaN(t)) return 0;
3091
- const clampedT = Math.max(0, Math.min(1, t));
3092
- return 1 - Math.pow(1 - clampedT, 4);
3093
- }, noise2D = (x, y) => {
2905
+ }), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), noise2D = (x, y) => {
3094
2906
  // Add input validation
3095
2907
  if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
3096
2908
  const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = easeInOutCubic(xf), v = easeInOutCubic(yf), hash = (i, j) => {
@@ -3129,13 +2941,13 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3129
2941
  x: .5,
3130
2942
  y: .5
3131
2943
  };
3132
- const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothStep(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
2944
+ const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothstepEdge(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
3133
2945
  // Add input validation
3134
2946
  if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y) || isNaN(strength)) return {
3135
2947
  x: 0,
3136
2948
  y: 0
3137
2949
  };
3138
- const distance = calculateLength(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
2950
+ const distance = vec2Length(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
3139
2951
  // Limit distance to prevent extreme values
3140
2952
  return {
3141
2953
  x: x * (1 + distortion),
@@ -3147,7 +2959,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3147
2959
  x: 0,
3148
2960
  y: 0
3149
2961
  };
3150
- const distance = calculateLength(x, y);
2962
+ const distance = vec2Length(x, y);
3151
2963
  // Prevent division by zero and extreme values
3152
2964
  if (0 === distance) return {
3153
2965
  x: 0,
@@ -3158,8 +2970,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3158
2970
  x: Math.cos(angle) * distance * intensity,
3159
2971
  y: Math.sin(angle) * distance * intensity
3160
2972
  };
3161
- })(ix, iy, .015 * baseDisplacement), scaled = smoothStep(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
3162
- return createTexture(clampValue(finalX * scaled + .5, 0, 1), clampValue(finalY * scaled + .5, 0, 1));
2973
+ })(ix, iy, .015 * baseDisplacement), scaled = smoothstepEdge(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
2974
+ return createTexture(clamp(finalX * scaled + .5, 0, 1), clamp(finalY * scaled + .5, 0, 1));
3163
2975
  },
3164
2976
  // Premium Apple-style fluid glass with enhanced organic flow
3165
2977
  appleFluid: (uv, mousePosition) => {
@@ -3167,8 +2979,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3167
2979
  x: .5,
3168
2980
  y: .5
3169
2981
  };
3170
- const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothStep(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
3171
- return createTexture(clampValue(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clampValue(totalY + .5, 0, 1));
2982
+ const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothstepEdge(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
2983
+ return createTexture(clamp(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clamp(totalY + .5, 0, 1));
3172
2984
  },
3173
2985
  // High-end glass with advanced refraction and depth
3174
2986
  premiumGlass: (uv, mousePosition) => {
@@ -3176,7 +2988,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3176
2988
  x: .5,
3177
2989
  y: .5
3178
2990
  };
3179
- const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), centerDistance = calculateLength(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
2991
+ const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), centerDistance = vec2Length(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
3180
2992
  // Multi-layer depth effect
3181
2993
  let depthX = 0, depthY = 0;
3182
2994
  for (let layer = 0; layer < 3; layer++) {
@@ -3184,8 +2996,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3184
2996
  depthX += Math.sin(ix * layerScale + layerTime) * layerStrength, depthY += Math.cos(iy * layerScale - layerTime) * layerStrength;
3185
2997
  }
3186
2998
  // Glass refraction with mouse influence
3187
- const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothStep(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
3188
- return createTexture(clampValue(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clampValue(finalY + .5, 0, 1));
2999
+ const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothstepEdge(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
3000
+ return createTexture(clamp(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clamp(finalY + .5, 0, 1));
3189
3001
  },
3190
3002
  // Metallic liquid effect with shimmer
3191
3003
  liquidMetal: (uv, mousePosition) => {
@@ -3193,8 +3005,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3193
3005
  x: .5,
3194
3006
  y: .5
3195
3007
  };
3196
- const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = calculateLength(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothStep(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
3197
- return createTexture(clampValue(totalX + .5, 0, 1), clampValue(totalY + .5, 0, 1));
3008
+ const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = vec2Length(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothstepEdge(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
3009
+ return createTexture(clamp(totalX + .5, 0, 1), clamp(totalY + .5, 0, 1));
3198
3010
  },
3199
3011
  // basiBasi - Expert Premium Glass Shader
3200
3012
  // The most advanced shader with caustics, spectral dispersion, parallax depth, and volumetric effects
@@ -3203,7 +3015,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3203
3015
  x: .5,
3204
3016
  y: .5
3205
3017
  };
3206
- const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) =>
3018
+ const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) =>
3207
3019
  // Add input validation
3208
3020
  "number" != typeof x || "number" != typeof y || "number" != typeof time || "number" != typeof intensity || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(intensity) ? .5 : .5 * (Math.sin(8 * x + 2 * time) * Math.cos(8 * y - 2 * time) * .5 + Math.sin(8 * (x + .5) * 1.3 - 2 * time * .8) * Math.cos(8 * (y - .3) * 1.3 + 2 * time * .8) * .3 + Math.sin(8 * (x - .3) * .7 + 2 * time * 1.2) * Math.cos(8 * (y + .4) * .7 - 2 * time * 1.2) * .2 + 1) * intensity)(ix, iy, time, .8), causticDistortion = .02 * (causticIntensity - .5), refractionAngle = Math.atan2(iy, ix), spectralDispersion = ((x, y, angle) => {
3209
3021
  // Add input validation
@@ -3221,7 +3033,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3221
3033
  y: 0
3222
3034
  }
3223
3035
  };
3224
- const distance = calculateLength(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
3036
+ const distance = vec2Length(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
3225
3037
  return {
3226
3038
  r: {
3227
3039
  x: Math.cos(angle) * redOffset,
@@ -3261,8 +3073,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3261
3073
  return turbulence;
3262
3074
  })(6 * ix, 6 * iy, time, 6), turbulenceX = .012 * Math.cos(turbulence * Math.PI * 2), turbulenceY = .012 * Math.sin(turbulence * Math.PI * 2), microSurface = ((x, y, time) =>
3263
3075
  // Add input validation
3264
- "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = calculateLength(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = calculateLength(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothStep(.92, -.12, distanceToEdge), edgeSoftness = smoothStep(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
3265
- return createTexture(clampValue(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clampValue(finalY + .5, 0, 1));
3076
+ "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = vec2Length(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = vec2Length(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothstepEdge(.92, -.12, distanceToEdge), edgeSoftness = smoothstepEdge(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
3077
+ return createTexture(clamp(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clamp(finalY + .5, 0, 1));
3266
3078
  },
3267
3079
  // Aliases for compatibility
3268
3080
  plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
@@ -3304,8 +3116,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3304
3116
  let dx = pos.x * w - x, dy = pos.y * h - y;
3305
3117
  // Apply edge smoothing for Apple-like effect
3306
3118
  const edgeX = 2 * Math.min(x / w, (w - x) / w), edgeY = 2 * Math.min(y / h, (h - y) / h), edgeFactor = Math.min(edgeX, edgeY);
3307
- dx *= smoothStep(0, .2, edgeFactor), dy *= smoothStep(0, .2, edgeFactor), maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)),
3308
- rawValues.push(dx, dy);
3119
+ dx *= smoothstepEdge(0, .2, edgeFactor), dy *= smoothstepEdge(0, .2, edgeFactor),
3120
+ maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), rawValues.push(dx, dy);
3309
3121
  }
3310
3122
  // Improved normalization to prevent artifacts while maintaining intensity
3311
3123
  maxScale = Math.max(maxScale, 1);
@@ -3315,9 +3127,9 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3315
3127
  let rawIndex = 0;
3316
3128
  for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
3317
3129
  const dx = rawValues[rawIndex++] || 0, dy = rawValues[rawIndex++] || 0, edgeDistance = Math.min(x, y, w - x - 1, h - y - 1), edgeFactor = Math.min(1, edgeDistance / 2), r = dx * edgeFactor / maxScale + .5, g = dy * edgeFactor / maxScale + .5, pixelIndex = 4 * (y * w + x);
3318
- data[pixelIndex] = clampValue(255 * r, 0, 255), // Red channel (X displacement)
3319
- data[pixelIndex + 1] = clampValue(255 * g, 0, 255), // Green channel (Y displacement)
3320
- data[pixelIndex + 2] = clampValue(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
3130
+ data[pixelIndex] = clamp(255 * r, 0, 255), // Red channel (X displacement)
3131
+ data[pixelIndex + 1] = clamp(255 * g, 0, 255), // Green channel (Y displacement)
3132
+ data[pixelIndex + 2] = clamp(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
3321
3133
  data[pixelIndex + 3] = 255;
3322
3134
  }
3323
3135
  return this.context.putImageData(imageData, 0, 0), this.canvas.toDataURL();
@@ -3345,9 +3157,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
3345
3157
  return this.canvasDPI;
3346
3158
  }
3347
3159
  },
3348
- createFBMEngine: createFBMEngine,
3349
- fragmentShaders: fragmentShaders,
3350
- liquidGlassWithTime: liquidGlassWithTime
3160
+ fragmentShaders: fragmentShaders
3351
3161
  }, Symbol.toStringTag, {
3352
3162
  value: "Module"
3353
3163
  })), VideoPlayer = forwardRef((({src: src, type: type = "video", youtubeId: youtubeId, poster: poster, autoplay: autoplay = !1, loop: loop = !1, muted: muted = !1, controls: controls = !0, preload: preload = "metadata", width: width, height: height, aspectRatio: aspectRatio = "16:9", className: className = "", onPlay: onPlay, onPause: onPause, onEnded: onEnded, onTimeUpdate: onTimeUpdate, onVolumeChange: onVolumeChange, onFullscreenChange: onFullscreenChange, onError: onError, showDownload: showDownload = !1, showShare: showShare = !1, showSettings: showSettings = !0, playbackRates: playbackRates = [ .5, .75, 1, 1.25, 1.5, 2 ], subtitles: subtitles, quality: quality, ambientMode: ambientMode = !1, glass: glass = !1, glassOpacity: glassOpacity = 1, glassContent: glassContent, style: style, ...props}, ref) => {