@shohojdhara/atomix 0.4.4 → 0.4.6

package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap

@@ -1,222 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`] = `
-<div>
-  <div
-    class="c-atomix-glass"
-    style="--atomix-glass-radius: 16px; --atomix-glass-transform: translate(0px, 0px) scale(1); --atomix-glass-position: absolute; --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-width: 100%; --atomix-glass-height: 100%; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08399999999999999) 33%, rgba(255, 255, 255, 0.27999999999999997) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22399999999999998) 33%, rgba(255, 255, 255, 0.42) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05);"
-  >
-    <div
-      class="c-atomix-glass__container   "
-      style="transform: translate(0px, 0px) scale(1); --atomix-glass-container-width: 270; --atomix-glass-container-height: 69; --atomix-glass-container-padding: 0 0; --atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(1.2100000000000002px) saturate(160%) contrast(1.4) brightness(0.9); --atomix-glass-container-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset; --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25); transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s;"
-    >
-      <div
-        class="c-atomix-glass__inner"
-        style="box-shadow: var(--atomix-glass-container-box-shadow);"
-      >
-        <div
-          class="c-atomix-glass__filter"
-          style="z-index: 1; position: absolute; inset: 0;"
-        >
-          <svg
-            aria-hidden="true"
-            style="position: absolute; width: 100%; height: 100%; inset: 0;"
-          >
-            <defs>
-              <radialgradient
-                cx="50%"
-                cy="50%"
-                id="atomix-glass-filter-14-edge-mask"
-                r="50%"
-              >
-                <stop
-                  offset="0%"
-                  stop-color="black"
-                  stop-opacity="0"
-                />
-                <stop
-                  offset="75%"
-                  stop-color="black"
-                  stop-opacity="0"
-                />
-                <stop
-                  offset="100%"
-                  stop-color="white"
-                  stop-opacity="1"
-                />
-              </radialgradient>
-              <filter
-                color-interpolation-filters="sRGB"
-                height="170%"
-                id="atomix-glass-filter-14"
-                width="170%"
-                x="-35%"
-                y="-35%"
-              >
-                <feimage
-                  height="100%"
-                  href="data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k="
-                  id="atomix-glass-filter-14-image"
-                  preserveAspectRatio="xMidYMid slice"
-                  result="DISPLACEMENT_MAP"
-                  width="100%"
-                  x="0"
-                  y="0"
-                />
-                <fecolormatrix
-                  in="DISPLACEMENT_MAP"
-                  result="EDGE_INTENSITY"
-                  type="matrix"
-                  values="0.3 0.3 0.3 0 0
-                 0.3 0.3 0.3 0 0
-                 0.3 0.3 0.3 0 0
-                 0 0 0 1 0"
-                />
-                <fecomponenttransfer
-                  in="EDGE_INTENSITY"
-                  result="EDGE_MASK"
-                >
-                  <fefunca
-                    tableValues="0 0.125 1"
-                    type="discrete"
-                  />
-                </fecomponenttransfer>
-                <feoffset
-                  dx="0"
-                  dy="0"
-                  in="SourceGraphic"
-                  result="CENTER_ORIGINAL"
-                />
-                <fedisplacementmap
-                  in="SourceGraphic"
-                  in2="DISPLACEMENT_MAP"
-                  result="RED_DISPLACED"
-                  scale="-20"
-                  xChannelSelector="R"
-                  yChannelSelector="B"
-                />
-                <fecolormatrix
-                  in="RED_DISPLACED"
-                  result="RED_CHANNEL"
-                  type="matrix"
-                  values="1 0 0 0 0
-                 0 0 0 0 0
-                 0 0 0 0 0
-                 0 0 0 1 0"
-                />
-                <fedisplacementmap
-                  in="SourceGraphic"
-                  in2="DISPLACEMENT_MAP"
-                  result="GREEN_DISPLACED"
-                  scale="-21"
-                  xChannelSelector="R"
-                  yChannelSelector="B"
-                />
-                <fecolormatrix
-                  in="GREEN_DISPLACED"
-                  result="GREEN_CHANNEL"
-                  type="matrix"
-                  values="0 0 0 0 0
-                 0 1 0 0 0
-                 0 0 0 0 0
-                 0 0 0 1 0"
-                />
-                <fedisplacementmap
-                  in="SourceGraphic"
-                  in2="DISPLACEMENT_MAP"
-                  result="BLUE_DISPLACED"
-                  scale="-21.5"
-                  xChannelSelector="R"
-                  yChannelSelector="B"
-                />
-                <fecolormatrix
-                  in="BLUE_DISPLACED"
-                  result="BLUE_CHANNEL"
-                  type="matrix"
-                  values="0 0 0 0 0
-                 0 0 0 0 0
-                 0 0 1 0 0
-                 0 0 0 1 0"
-                />
-                <feblend
-                  in="GREEN_CHANNEL"
-                  in2="BLUE_CHANNEL"
-                  mode="screen"
-                  result="GB_COMBINED"
-                />
-                <feblend
-                  in="RED_CHANNEL"
-                  in2="GB_COMBINED"
-                  mode="screen"
-                  result="RGB_COMBINED"
-                />
-                <fegaussianblur
-                  in="RGB_COMBINED"
-                  result="ABERRATED_BLURRED"
-                  stdDeviation="0.125"
-                />
-                <fecomposite
-                  in="ABERRATED_BLURRED"
-                  in2="EDGE_MASK"
-                  operator="in"
-                  result="EDGE_ABERRATION"
-                />
-                <fecomponenttransfer
-                  in="EDGE_MASK"
-                  result="INVERTED_MASK"
-                >
-                  <fefunca
-                    tableValues="1 0"
-                    type="table"
-                  />
-                </fecomponenttransfer>
-                <fecomposite
-                  in="CENTER_ORIGINAL"
-                  in2="INVERTED_MASK"
-                  operator="in"
-                  result="CENTER_CLEAN"
-                />
-                <fecomposite
-                  in="EDGE_ABERRATION"
-                  in2="CENTER_CLEAN"
-                  operator="over"
-                />
-              </filter>
-            </defs>
-          </svg>
-          <div
-            class="c-atomix-glass__filter-overlay"
-            style="filter: url(#atomix-glass-filter-14); border-radius: var(--atomix-glass-container-radius); transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s;"
-          />
-          <div
-            class="c-atomix-glass__filter-shadow"
-            style="box-shadow: var(--atomix-glass-container-shadow); border-radius: var(--atomix-glass-container-radius);"
-          />
-        </div>
-        <div
-          class="c-atomix-glass__content"
-          style="position: relative; text-shadow: var(--atomix-glass-container-text-shadow); z-index: 100;"
-        >
-          <div>
-            Default Glass
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--dark c-atomix-glass__background-layer--hidden"
-      style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; border-radius: 16px; transform: translate(0px, 0px) scale(1);"
-    />
-    <div
-      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--black c-atomix-glass__background-layer--hidden"
-      style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; border-radius: 16px; transform: translate(0px, 0px) scale(1);"
-    />
-    <span
-      class="c-atomix-glass__border-1"
-    />
-    <span
-      class="c-atomix-glass__border-2"
-    />
-  </div>
-</div>
-`;

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,
-  };
-}