@shohojdhara/atomix 0.4.1 → 0.4.2

package/src/lib/composables/atomix-glass/useGlassBackgroundDetection.ts

@@ -0,0 +1,329 @@
+import { useEffect, useState } from 'react';
+import type { OverLightConfig, OverLightObjectConfig } from '../../types/components';
+
+// Module-level shared background detection cache using WeakMap
+// Automatically cleaned up when elements are removed from DOM
+interface BackgroundDetectionCacheEntry {
+  result: boolean;
+  timestamp: number;
+  config: OverLightConfig;
+  threshold: number;
+}
+
+const backgroundDetectionCache = new WeakMap<HTMLElement, BackgroundDetectionCacheEntry>();
+
+/**
+ * Compare two OverLightConfig values for equality
+ * Handles primitives (boolean, 'auto') and objects with deep comparison
+ */
+export const compareOverLightConfig = (
+  config1: OverLightConfig,
+  config2: OverLightConfig
+): boolean => {
+  // Primitive comparison for boolean and 'auto'
+  if (typeof config1 !== 'object' || config1 === null) {
+    return config1 === config2;
+  }
+
+  // Both must be objects at this point
+  if (typeof config2 !== 'object' || config2 === null) {
+    return false;
+  }
+
+  const obj1 = config1 as OverLightObjectConfig;
+  const obj2 = config2 as OverLightObjectConfig;
+
+  // Deep comparison of object properties
+  // Compare all defined properties (threshold, opacity, contrast, brightness, saturationBoost)
+  const props: (keyof OverLightObjectConfig)[] = [
+    'threshold',
+    'opacity',
+    'contrast',
+    'brightness',
+    'saturationBoost',
+  ];
+
+  for (const prop of props) {
+    const val1 = obj1[prop];
+    const val2 = obj2[prop];
+
+    // If both are undefined, they're equal for this property
+    if (val1 === undefined && val2 === undefined) {
+      continue;
+    }
+
+    // If one is undefined and the other isn't, they're different
+    if (val1 === undefined || val2 === undefined) {
+      return false;
+    }
+
+    // Compare numeric values (handle NaN and floating point precision)
+    if (typeof val1 === 'number' && typeof val2 === 'number') {
+      // Use Number.isNaN for proper NaN comparison
+      if (Number.isNaN(val1) && Number.isNaN(val2)) {
+        continue;
+      }
+      if (Number.isNaN(val1) || Number.isNaN(val2)) {
+        return false;
+      }
+      // Compare with small epsilon for floating point numbers
+      if (Math.abs(val1 - val2) > Number.EPSILON) {
+        return false;
+      }
+    } else if (val1 !== val2) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Get cached background detection result
+ */
+const getCachedBackgroundDetection = (
+  parentElement: HTMLElement | null,
+  overLightConfig: OverLightConfig
+): boolean | null => {
+  if (!parentElement) {
+    return null;
+  }
+
+  const cached = backgroundDetectionCache.get(parentElement);
+  if (cached && compareOverLightConfig(cached.config, overLightConfig)) {
+    // Update timestamp for LRU-like behavior (though WeakMap doesn't support LRU)
+    cached.timestamp = Date.now();
+    return cached.result;
+  }
+
+  return null;
+};
+
+/**
+ * Set cached background detection result
+ */
+const setCachedBackgroundDetection = (
+  parentElement: HTMLElement | null,
+  overLightConfig: OverLightConfig,
+  result: boolean,
+  threshold: number
+): void => {
+  if (!parentElement) {
+    return;
+  }
+
+  backgroundDetectionCache.set(parentElement, {
+    result,
+    timestamp: Date.now(),
+    config: overLightConfig,
+    threshold,
+  });
+};
+
+interface UseGlassBackgroundDetectionProps {
+  glassRef: React.RefObject<HTMLDivElement>;
+  overLight: OverLightConfig;
+  debugOverLight?: boolean;
+}
+
+export function useGlassBackgroundDetection({
+  glassRef,
+  overLight,
+  debugOverLight = false,
+}: UseGlassBackgroundDetectionProps) {
+  const [detectedOverLight, setDetectedOverLight] = useState(false);
+
+  useEffect(() => {
+    // Only run auto-detection for 'auto' mode or object config (which uses auto-detection)
+    const shouldDetect =
+      overLight === 'auto' || (typeof overLight === 'object' && overLight !== null);
+
+    if (shouldDetect && glassRef.current) {
+      const element = glassRef.current;
+      const parentElement = element.parentElement;
+
+      // Check shared cache: skip detection if parent unchanged and config unchanged
+      const cachedResult = getCachedBackgroundDetection(parentElement, overLight);
+      if (cachedResult !== null) {
+        setDetectedOverLight(cachedResult);
+        return;
+      }
+
+      const timeoutId = setTimeout(() => {
+        try {
+          if (!element) {
+            setDetectedOverLight(false);
+            return;
+          }
+
+          // Validate window context
+          if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
+            setDetectedOverLight(false);
+            return;
+          }
+
+          let totalLuminance = 0;
+          let validSamples = 0;
+          let hasValidBackground = false;
+
+          let currentElement = element.parentElement;
+          let depth = 0;
+          const maxDepth = 20;
+          const maxSamples = 10;
+
+          // Limit traversal depth to prevent infinite loops and performance issues
+          while (currentElement && validSamples < maxSamples && depth < maxDepth) {
+            try {
+              const computedStyle = window.getComputedStyle(currentElement);
+              if (!computedStyle) {
+                currentElement = currentElement.parentElement;
+                depth++;
+                continue;
+              }
+
+              const bgColor = computedStyle.backgroundColor;
+              const bgImage = computedStyle.backgroundImage;
+
+              // Check for solid color backgrounds
+              if (
+                bgColor &&
+                bgColor !== 'rgba(0, 0, 0, 0)' &&
+                bgColor !== 'transparent' &&
+                bgColor !== 'initial' &&
+                bgColor !== 'none'
+              ) {
+                const rgb = bgColor.match(/\d+/g);
+                if (rgb && rgb.length >= 3) {
+                  const r = Number(rgb[0]);
+                  const g = Number(rgb[1]);
+                  const b = Number(rgb[2]);
+
+                  // Validate RGB values are valid numbers
+                  if (
+                    !isNaN(r) &&
+                    !isNaN(g) &&
+                    !isNaN(b) &&
+                    isFinite(r) &&
+                    isFinite(g) &&
+                    isFinite(b) &&
+                    r >= 0 &&
+                    r <= 255 &&
+                    g >= 0 &&
+                    g <= 255 &&
+                    b >= 0 &&
+                    b <= 255
+                  ) {
+                    // Only consider if it's not pure black or very dark
+                    if (r > 10 || g > 10 || b > 10) {
+                      const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+                      if (!isNaN(luminance) && isFinite(luminance)) {
+                        totalLuminance += luminance;
+                        validSamples++;
+                        hasValidBackground = true;
+                      }
+                    }
+                  }
+                }
+              }
+
+              // Check for image backgrounds
+              if (bgImage && bgImage !== 'none' && bgImage !== 'initial') {
+                // For image backgrounds, assume medium luminance
+                totalLuminance += 0.5;
+                validSamples++;
+                hasValidBackground = true;
+              }
+            } catch (styleError) {
+              // Silently continue if getting computed style fails for this element
+              if (typeof process === 'undefined' || process.env?.NODE_ENV === 'development') {
+                console.debug('AtomixGlass: Error getting computed style for element:', styleError);
+              }
+            }
+
+            // Move to parent element for next iteration
+            if (currentElement) {
+              currentElement = currentElement.parentElement;
+              depth++;
+            } else {
+              break; // Exit loop if currentElement becomes null
+            }
+          }
+
+          // More conservative detection with better error handling
+          if (hasValidBackground && validSamples > 0) {
+            const avgLuminance = totalLuminance / validSamples;
+            if (!isNaN(avgLuminance) && isFinite(avgLuminance)) {
+              let threshold = 0.7; // Conservative threshold for overlight
+
+              // If overLight is an object, use its threshold property with validation
+              if (typeof overLight === 'object' && overLight !== null) {
+                const objConfig = overLight as OverLightObjectConfig;
+                if (objConfig.threshold !== undefined) {
+                  const configThreshold =
+                    typeof objConfig.threshold === 'number' &&
+                    !isNaN(objConfig.threshold) &&
+                    isFinite(objConfig.threshold)
+                      ? objConfig.threshold
+                      : 0.7;
+                  threshold = Math.min(0.9, Math.max(0.1, configThreshold));
+                }
+              }
+
+              const isOverLightDetected = avgLuminance > threshold;
+
+              // Cache the result in shared cache
+              setCachedBackgroundDetection(
+                element.parentElement,
+                overLight,
+                isOverLightDetected,
+                threshold
+              );
+
+              setDetectedOverLight(isOverLightDetected);
+            } else {
+              // Invalid luminance calculation, default to false
+              const result = false;
+              const threshold =
+                typeof overLight === 'object' && overLight !== null
+                  ? (overLight as OverLightObjectConfig).threshold || 0.7
+                  : 0.7;
+              setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
+              setDetectedOverLight(result);
+            }
+          } else {
+            // Default to false if no valid background found
+            const result = false;
+            const threshold =
+              typeof overLight === 'object' && overLight !== null
+                ? (overLight as OverLightObjectConfig).threshold || 0.7
+                : 0.7;
+            setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
+            setDetectedOverLight(result);
+          }
+        } catch (error) {
+          // Enhanced error logging with context
+          if (typeof process === 'undefined' || process.env?.NODE_ENV === 'development') {
+            console.warn('AtomixGlass: Error detecting background brightness:', error);
+          }
+          const result = false;
+          if (element && element.parentElement) {
+            const threshold =
+              typeof overLight === 'object' && overLight !== null
+                ? (overLight as OverLightObjectConfig).threshold || 0.7
+                : 0.7;
+            setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
+          }
+          setDetectedOverLight(result);
+        }
+      }, 150);
+
+      return () => clearTimeout(timeoutId);
+    } else if (typeof overLight === 'boolean') {
+      // For boolean values, disable auto-detection
+      setDetectedOverLight(false);
+    }
+    return undefined;
+  }, [overLight, glassRef, debugOverLight]);
+
+  return { detectedOverLight };
+}

package/src/lib/composables/atomix-glass/useGlassCornerRadius.ts

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { ATOMIX_GLASS } from '../../constants/components';
+import {
+  extractBorderRadiusFromChildren,
+  extractBorderRadiusFromDOMElement,
+} from '../../../components/AtomixGlass/glass-utils';
+
+const { CONSTANTS } = ATOMIX_GLASS;
+
+interface UseGlassCornerRadiusProps {
+  contentRef: React.RefObject<HTMLDivElement>;
+  borderRadius?: number;
+  children?: React.ReactNode;
+  debugBorderRadius?: boolean;
+}
+
+export function useGlassCornerRadius({
+  contentRef,
+  borderRadius,
+  children,
+  debugBorderRadius = false,
+}: UseGlassCornerRadiusProps) {
+  const [dynamicBorderRadius, setDynamicCornerRadius] = useState<number>(
+    CONSTANTS.DEFAULT_CORNER_RADIUS
+  );
+
+  const effectiveBorderRadius = useMemo(() => {
+    if (borderRadius !== undefined) {
+      const result = Math.max(0, borderRadius);
+      return result;
+    }
+
+    const result = Math.max(0, dynamicBorderRadius);
+    return result;
+  }, [borderRadius, dynamicBorderRadius]);
+
+  // Extract border-radius from children
+  useEffect(() => {
+    const extractRadius = () => {
+      try {
+        let extractedRadius: number | null = null;
+
+        if (contentRef.current) {
+          const firstChild = contentRef.current.firstElementChild as HTMLElement;
+          if (firstChild) {
+            const domRadius = extractBorderRadiusFromDOMElement(firstChild);
+            if (domRadius !== null && domRadius > 0) {
+              extractedRadius = domRadius;
+            }
+          }
+        }
+
+        if (extractedRadius === null) {
+          const childRadius = extractBorderRadiusFromChildren(children);
+          if (childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS) {
+            extractedRadius = childRadius;
+          }
+        }
+
+        if (extractedRadius !== null && extractedRadius > 0) {
+          setDynamicCornerRadius(extractedRadius);
+        }
+      } catch (error) {
+        if (
+          (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
+          debugBorderRadius
+        ) {
+          console.error('[AtomixGlass] Error extracting corner radius:', error);
+        }
+      }
+    };
+
+    extractRadius();
+    const timeoutId = setTimeout(extractRadius, 100);
+    return () => clearTimeout(timeoutId);
+  }, [children, debugBorderRadius, contentRef]);
+
+  return {
+    dynamicBorderRadius,
+    effectiveBorderRadius,
+  };
+}

package/src/lib/composables/atomix-glass/useGlassMouseTracking.ts

@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { globalMouseTracker } from '../shared-mouse-tracker';
+import { calculateElementCenter } from '../../../components/AtomixGlass/glass-utils';
+import type { MousePosition } from '../../types/components';
+
+interface UseGlassMouseTrackingProps {
+  glassRef: React.RefObject<HTMLDivElement>;
+  mouseContainer?: React.RefObject<HTMLElement | null> | null;
+  externalGlobalMousePosition?: MousePosition;
+  externalMouseOffset?: MousePosition;
+  effectiveWithoutEffects?: boolean;
+}
+
+export function useGlassMouseTracking({
+  glassRef,
+  mouseContainer,
+  externalGlobalMousePosition,
+  externalMouseOffset,
+  effectiveWithoutEffects = false,
+}: UseGlassMouseTrackingProps) {
+  const [internalGlobalMousePosition, setInternalGlobalMousePosition] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+  });
+  const [internalMouseOffset, setInternalMouseOffset] = useState<MousePosition>({ x: 0, y: 0 });
+
+  // Mouse tracking using shared global tracker
+  // Cache bounding rect to avoid repeated getBoundingClientRect calls
+  const cachedRectRef = useRef<DOMRect | null>(null);
+  const updateRectRef = useRef<number | null>(null);
+
+  const globalMousePosition = useMemo(
+    () => externalGlobalMousePosition || internalGlobalMousePosition,
+    [externalGlobalMousePosition, internalGlobalMousePosition]
+  );
+
+  const mouseOffset = useMemo(
+    () => externalMouseOffset || internalMouseOffset,
+    [externalMouseOffset, internalMouseOffset]
+  );
+
+  // Handle mouse position updates from shared tracker
+  const handleGlobalMousePosition = useCallback(
+    (globalPos: MousePosition) => {
+      if (externalGlobalMousePosition && externalMouseOffset) {
+        // External mouse position provided, skip internal tracking
+        return;
+      }
+
+      if (effectiveWithoutEffects) {
+        return;
+      }
+
+      const container = mouseContainer?.current || glassRef.current;
+      if (!container) {
+        return;
+      }
+
+      // Use cached rect if available, otherwise get new one
+      let rect = cachedRectRef.current;
+      if (!rect || rect.width === 0 || rect.height === 0) {
+        rect = container.getBoundingClientRect();
+        cachedRectRef.current = rect;
+      }
+
+      if (rect.width === 0 || rect.height === 0) {
+        return;
+      }
+
+      const center = calculateElementCenter(rect);
+
+      // Calculate offset relative to this container
+      const newOffset = {
+        x: ((globalPos.x - center.x) / rect.width) * 100,
+        y: ((globalPos.y - center.y) / rect.height) * 100,
+      };
+
+      // React 18 automatically batches these updates
+      setInternalMouseOffset(newOffset);
+      setInternalGlobalMousePosition(globalPos);
+    },
+    [
+      mouseContainer,
+      glassRef,
+      externalGlobalMousePosition,
+      externalMouseOffset,
+      effectiveWithoutEffects,
+    ]
+  );
+
+  // Subscribe to shared mouse tracker
+  useEffect(() => {
+    if (externalGlobalMousePosition && externalMouseOffset) {
+      // External mouse position provided, don't subscribe
+      return undefined;
+    }
+
+    if (effectiveWithoutEffects) {
+      // Effects disabled, don't subscribe
+      return undefined;
+    }
+
+    // Subscribe to shared tracker
+    const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
+
+    // Update cached rect when container size changes
+    const updateRect = () => {
+      if (updateRectRef.current !== null) {
+        cancelAnimationFrame(updateRectRef.current);
+      }
+      updateRectRef.current = requestAnimationFrame(() => {
+        const container = mouseContainer?.current || glassRef.current;
+        if (container) {
+          cachedRectRef.current = container.getBoundingClientRect();
+        }
+        updateRectRef.current = null;
+      });
+    };
+
+    // Use ResizeObserver to update cached rect when container size changes
+    const container = mouseContainer?.current || glassRef.current;
+    let resizeObserver: ResizeObserver | null = null;
+
+    if (container && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(updateRect);
+      resizeObserver.observe(container);
+    }
+
+    return () => {
+      unsubscribe();
+      if (updateRectRef.current !== null) {
+        cancelAnimationFrame(updateRectRef.current);
+        updateRectRef.current = null;
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [
+    handleGlobalMousePosition,
+    mouseContainer,
+    glassRef,
+    externalGlobalMousePosition,
+    externalMouseOffset,
+    effectiveWithoutEffects,
+  ]);
+
+  return {
+    globalMousePosition,
+    mouseOffset,
+    cachedRectRef,
+  };
+}