@shohojdhara/atomix 0.4.5 → 0.4.6

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -1,5 +1,5 @@
 import { ATOMIX_GLASS } from '../constants/components';
-import { calculateDistance, calculateElementCenter, calculateMouseInfluence, validateGlassSize, clampBlur } from '../../components/AtomixGlass/glass-utils';
+import { calculateDistance, calculateElementCenter, calculateMouseInfluence, validateGlassSize, clampBlur, smoothstep, softClamp } from '../../components/AtomixGlass/glass-utils';
 import type { GlassSize, MousePosition, OverLightObjectConfig } from '../types/components';
 
 /**
@@ -73,30 +73,53 @@ export const updateAtomixGlassStyles = (
       saturationBoost: baseOverLightConfig.saturationBoost
   };
 
-  // Calculate elastic translation
-  let elasticTranslation = { x: 0, y: 0 };
-  if (!effectiveWithoutEffects && wrapperElement) {
-    const rect = wrapperElement.getBoundingClientRect();
-    const center = calculateElementCenter(rect);
-
-    // Calculate fade in factor
-    let fadeInFactor = 0;
-    if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
-      const edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2);
-      const edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2);
-      const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
-      fadeInFactor = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
-    }
+    let computedDirectionalScale = directionalScale;
+
+    // Calculate elastic translation and directional scale
+    let elasticTranslation = { x: 0, y: 0 };
+    if (!effectiveWithoutEffects && wrapperElement) {
+      const rect = wrapperElement.getBoundingClientRect();
+      const center = calculateElementCenter(rect);
+
+      // Mouse presence and edge distance logic
+      if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
+        const deltaX = globalMousePosition.x - center.x;
+        const deltaY = globalMousePosition.y - center.y;
+        const edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2);
+        const edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2);
+        const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
+        
+        // Elastic translation
+        const rawT = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
+        const fadeInFactor = smoothstep(rawT);
+        elasticTranslation = {
+            x: deltaX * elasticity * 0.1 * fadeInFactor,
+            y: deltaY * elasticity * 0.1 * fadeInFactor,
+        };
 
-    elasticTranslation = {
-        x: (globalMousePosition.x - center.x) * elasticity * 0.1 * fadeInFactor,
-        y: (globalMousePosition.y - center.y) * elasticity * 0.1 * fadeInFactor,
-    };
-  }
+        // Directional scale
+        if (!isOverLight && edgeDistance <= ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE) {
+          const centerDistance = calculateDistance(globalMousePosition, center);
+          if (centerDistance > 0) {
+            const normalizedX = deltaX / centerDistance;
+            const normalizedY = deltaY / centerDistance;
+            const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * rawT;
+            
+            const scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * 0.3 - Math.abs(normalizedY) * stretchIntensity * 0.15;
+            const scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * 0.3 - Math.abs(normalizedX) * stretchIntensity * 0.15;
+            
+            const softScaleX = 1 - softClamp(Math.max(0, 1 - scaleX), 0.2);
+            const softScaleY = 1 - softClamp(Math.max(0, 1 - scaleY), 0.2);
+            
+            computedDirectionalScale = `scaleX(${Math.max(0.85, softScaleX)}) scaleY(${Math.max(0.85, softScaleY)})`;
+          }
+        }
+      }
+    }
 
-  const transformStyle = effectiveWithoutEffects
-      ? isActive && Boolean(onClick) ? 'scale(0.98)' : 'scale(1)'
-      : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? 'scale(0.96)' : directionalScale}`;
+    const transformStyle = effectiveWithoutEffects
+        ? isActive && Boolean(onClick) ? 'scale(0.98)' : 'scale(1)'
+        : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? 'scale(0.96)' : computedDirectionalScale}`;
 
   // Update Wrapper Styles (glassVars)
   if (wrapperElement) {

package/src/lib/constants/components.ts

@@ -1663,7 +1663,9 @@ export const ATOMIX_GLASS = {
     ENABLE_OVER_LIGHT_LAYERS: true,
   },
   CONSTANTS: {
-    ACTIVATION_ZONE: 200,
+    ACTIVATION_ZONE: 350,
+    LERP_FACTOR: 0.08,
+    SMOOTHSTEP_POWER: 2.5,
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,

package/src/styles/06-components/_components.atomix-glass.scss

@@ -9,7 +9,8 @@
   // CSS custom property defaults
   --atomix-glass-radius: var(--atomix-radius-md, 16px);
   --atomix-glass-transform: none;
-  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.15s) ease-out;
+  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.45s)
+    cubic-bezier(0.22, 1, 0.36, 1);
   --atomix-glass-position: absolute;
   --atomix-glass-container-width: 100%;
   --atomix-glass-container-height: 100%;
@@ -19,22 +20,28 @@
   // Z-INDEX STACKING ORDER (local scale, scoped to this component)
   // =========================================================================
   // 0: background layers
-  // 1: filter (SVG filter + backdrop)
+  // 1: container (wraps filter + content)
   // 2: base / overlay effect layers
   // 3: hover effect layers
-  // 4: content (user-facing children)
+  // 4: overlay-highlight
   // 5: border-1
   // 6: border-2
-  // 7: overlay-highlight
   // =========================================================================
-  --_glass-z-background: 0;
-  --_glass-z-filter: 1;
-  --_glass-z-effect: 2;
-  --_glass-z-hover: 3;
-  --_glass-z-overlay-highlight: 4;
-  --_glass-z-border-1: 5;
-  --_glass-z-border-2: 6;
-  --_glass-z-content: 7;
+  // Internal layers within the container:
+  //   filter  = base + 1
+  //   content = base + 7
+  // =========================================================================
+  --atomix-glass-base-z-index: 0;
+
+  --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
+  --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
+  --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
+  --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
+  --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
+  --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
+  --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
+  --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
+  --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
 
   // Base layer styles for all effect layers (hover, border, overlay)
   &__hover-1,
@@ -71,19 +78,25 @@
   }
 
   &__hover-1 {
-    transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
+    transition:
+      opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
+      background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
     opacity: var(--atomix-glass-hover-1-opacity, 0);
     background: var(--atomix-glass-hover-1-gradient, none);
   }
 
   &__hover-2 {
-    transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
+    transition:
+      opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+      background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
     opacity: var(--atomix-glass-hover-2-opacity, 0);
     background: var(--atomix-glass-hover-2-gradient, none);
   }
 
   &__hover-3 {
-    transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
+    transition:
+      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+      background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
     opacity: var(--atomix-glass-hover-3-opacity, 0);
     background: var(--atomix-glass-hover-3-gradient, none);
   }
@@ -112,9 +125,8 @@
     transition: var(--atomix-glass-transition);
     mix-blend-mode: screen;
     z-index: var(--_glass-z-overlay-highlight);
-    // Dynamic opacity and background are set via inline styles
-    // Opacity is calculated: opacityValues.over * OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER
-    // Background gradient uses constants for positioning
+    opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
+    background: var(--atomix-glass-overlay-highlight-bg, none);
   }
 
   // Border effect layers - matching old version exactly
@@ -180,6 +192,7 @@
     position: relative;
     border-radius: var(--atomix-glass-radius);
     transition: var(--atomix-glass-transition);
+    z-index: var(--_glass-z-container);
   }
 
   &__inner {
@@ -187,6 +200,8 @@
     height: var(--atomix-glass-container-height);
     position: relative;
     border-radius: var(--atomix-glass-radius);
+    padding: var(--atomix-glass-container-padding);
+    box-shadow: var(--atomix-glass-container-box-shadow);
   }
 
   &__filter {
@@ -207,13 +222,18 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    border-radius: var(--atomix-glass-radius);
+    border-radius: var(--atomix-glass-container-radius);
+    backdrop-filter: var(--atomix-glass-container-backdrop);
   }
 
   &__filter-shadow {
     position: absolute;
     inset: var(--atomix-glass-border-width);
     pointer-events: none;
+    border-radius: var(--atomix-glass-container-radius);
+    box-shadow: var(--atomix-glass-container-shadow);
+    opacity: var(--atomix-glass-container-shadow-opacity);
+    background: var(--atomix-glass-container-bg);
   }
 
   &__content {
@@ -222,11 +242,16 @@
     height: var(--atomix-glass-container-height);
     border-radius: var(--atomix-glass-radius);
     z-index: var(--_glass-z-content);
+    text-shadow: var(--atomix-glass-container-text-shadow);
   }
 
   // Background layers for over-light mode
   &__background-layer {
-    position: absolute;
+    position: var(--atomix-glass-position);
+    top: var(--atomix-glass-top);
+    left: var(--atomix-glass-left);
+    width: var(--atomix-glass-width);
+    height: var(--atomix-glass-height);
     pointer-events: none;
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);

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

@@ -1,329 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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,
-  };
-}