@shohojdhara/atomix 0.3.10 → 0.3.12

package/dist/index.js

@@ -1715,7 +1715,6 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
         inset: 0
     },
     "aria-hidden": "true",
-    suppressHydrationWarning: !0,
     children: jsxRuntime.jsxs("defs", {
         children: [ jsxRuntime.jsxs("radialGradient", {
             id: `${id}-edge-mask`,
@@ -1743,7 +1742,7 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
             height: "170%",
             colorInterpolationFilters: "sRGB",
             children: [ jsxRuntime.jsx("feImage", {
-                id: "feimage",
+                id: `${id}-image`,
                 x: "0",
                 y: "0",
                 width: "100%",
@@ -1860,10 +1859,10 @@ const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
     height: 0
 }, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
-    // React's useId() should produce the same ID on server and client for the same
-    // component position in the tree. We use useState to ensure the ID is only
-    // generated once and remains stable across renders.
-    const baseId = React.useId(), [filterId] = React.useState((() => `atomix-glass-filter-${baseId.replace(/:/g, "-").replace(/^[^a-z]/i, "atomix-")}`)), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null);
+    // Use a counter-based approach to avoid hydration mismatches
+    const [filterId] = React.useState((() => 
+    // Use a simple counter for deterministic IDs
+    "undefined" == typeof window ? `atomix-glass-filter-ssr-${Math.random().toString(36).substring(2, 11)}` : `atomix-glass-filter-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`)), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     React.useEffect((() => {
         "shader" === mode ? 
@@ -1876,7 +1875,7 @@ const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
                 fragmentShaders: shaderUtils.fragmentShaders
             };
         })).catch((error => {
-            console.warn("AtomixGlassContainer: Error loading shader utilities", error);
+            console.warn("AtomixGlassContainer: Error loading shader utilities", String(error).replace(/[\r\n]/g, ""));
         })) : 
         // Clear shader utils when not in shader mode to free memory
         shaderUtilsRef.current = null;
@@ -2066,7 +2065,6 @@ const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
                     shaderMapUrl: shaderMapUrl
                 }), jsxRuntime.jsx("div", {
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
-                    suppressHydrationWarning: !0,
                     style: {
                         filter: `url(#${filterId})`,
                         backdropFilter: "var(--atomix-glass-container-backdrop)",
@@ -2694,38 +2692,80 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }, adjustedSize = {
         width: "fixed" !== style.position ? "100%" : style.width ? style.width : Math.max(glassSize.width, 0),
         height: "fixed" !== style.position ? "100%" : style.height ? style.height : Math.max(glassSize.height, 0)
-    }, mx = mouseOffset.x, my = mouseOffset.y, GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), borderOpacity1 = GRADIENT.BORDER_OPACITY.BASE_1 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, borderOpacity2 = GRADIENT.BORDER_OPACITY.BASE_2 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, borderOpacity3 = GRADIENT.BORDER_OPACITY.BASE_3 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, borderOpacity4 = GRADIENT.BORDER_OPACITY.BASE_4 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, hover1X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1, hover1Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1, hover2X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2, hover2Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2, hover3X = GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3, hover3Y = GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3, baseX = GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER, baseY = GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER, overLightOpacity = overLightConfig.opacity, opacityValues = {
-        hover1: isHovered || isActive ? .5 : 0,
-        hover2: isActive ? .5 : 0,
-        hover3: isHovered ? .4 : isActive ? .8 : 0,
-        base: isOverLight ? overLightOpacity || .4 : 0,
-        over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
-    }, whiteColor = "255, 255, 255", glassVars = {
-        // Standard CSS custom properties for dynamic values
-        "--atomix-glass-radius": `${effectiveCornerRadius}px`,
-        "--atomix-glass-transform": transformStyle || "none",
-        "--atomix-glass-position": positionStyles.position,
-        "--atomix-glass-top": "fixed" !== positionStyles.top ? `${positionStyles.top}px` : "0",
-        "--atomix-glass-left": "fixed" !== positionStyles.left ? `${positionStyles.left}px` : "0",
-        "--atomix-glass-width": "fixed" !== style.position ? adjustedSize.width : `${adjustedSize.width}px`,
-        "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
-        // Border width: Use spacing token for consistency
-        "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
-        "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
-        // Dynamic gradients and backgrounds
-        "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacity1}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacity2}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-        "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacity3}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacity4}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-        "--atomix-glass-hover-1-opacity": opacityValues.hover1,
-        "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hover1X}% ${hover1Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hover1X}% ${hover1Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
-        "--atomix-glass-hover-2-opacity": opacityValues.hover2,
-        "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hover2X}% ${hover2Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hover2X}% ${hover2Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
-        "--atomix-glass-hover-3-opacity": opacityValues.hover3,
-        "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hover3X}% ${hover3Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hover3X}% ${hover3Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
-        "--atomix-glass-base-opacity": opacityValues.base,
-        "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + Math.abs(mx) * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
-        "--atomix-glass-overlay-opacity": opacityValues.over,
-        "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${baseX}% ${baseY}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + Math.abs(mx) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + Math.abs(my) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
-    };
+    }, gradientValues = React.useMemo((() => {
+        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
+        return {
+            borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
+            borderStop1: Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER),
+            borderStop2: Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER),
+            borderOpacities: [ GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH ],
+            hoverPositions: {
+                hover1: {
+                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
+                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
+                },
+                hover2: {
+                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
+                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
+                },
+                hover3: {
+                    x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+                    y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
+                }
+            },
+            basePosition: {
+                x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
+                y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
+            },
+            mx: mx,
+            my: my,
+            absMx: absMx,
+            absMy: absMy
+        };
+    }), [ mouseOffset.x, mouseOffset.y ]), opacityValues = React.useMemo((() => {
+        const overLightOpacity = overLightConfig.opacity;
+        return {
+            hover1: isHovered || isActive ? .5 : 0,
+            hover2: isActive ? .5 : 0,
+            hover3: isHovered ? .4 : isActive ? .8 : 0,
+            base: isOverLight ? overLightOpacity || .4 : 0,
+            over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
+        };
+    }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = React.useMemo((() => {
+        const whiteColor = "255, 255, 255", {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
+        return {
+            "--atomix-glass-radius": `${effectiveCornerRadius}px`,
+            "--atomix-glass-transform": transformStyle || "none",
+            "--atomix-glass-position": positionStyles.position,
+            "--atomix-glass-top": "fixed" !== positionStyles.top ? `${positionStyles.top}px` : "0",
+            "--atomix-glass-left": "fixed" !== positionStyles.left ? `${positionStyles.left}px` : "0",
+            "--atomix-glass-width": "fixed" !== style.position ? adjustedSize.width : `${adjustedSize.width}px`,
+            "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
+            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
+            "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
+            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[0]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[1]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[2]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[3]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-hover-1-opacity": opacityValues.hover1,
+            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
+            "--atomix-glass-hover-2-opacity": opacityValues.hover2,
+            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
+            "--atomix-glass-hover-3-opacity": opacityValues.hover3,
+            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
+            "--atomix-glass-base-opacity": opacityValues.base,
+            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+            "--atomix-glass-overlay-opacity": opacityValues.over,
+            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+        };
+    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight ]), renderBackgroundLayer = layerType => jsxRuntime.jsx("div", {
+        className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
+        style: {
+            ...positionStyles,
+            height: adjustedSize.height,
+            width: adjustedSize.width,
+            borderRadius: `${effectiveCornerRadius}px`,
+            transform: baseStyle.transform
+        }
+    });
     return jsxRuntime.jsxs("div", {
         className: componentClassName,
         style: glassVars,
@@ -2781,25 +2821,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             }), jsxRuntime.jsx("div", {
                 className: ATOMIX_GLASS.HOVER_3_CLASS
             }) ]
-        }), jsxRuntime.jsx("div", {
-            className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
-            style: {
-                ...positionStyles,
-                height: adjustedSize.height,
-                width: adjustedSize.width,
-                borderRadius: `${effectiveCornerRadius}px`,
-                transform: baseStyle.transform
-            }
-        }), jsxRuntime.jsx("div", {
-            className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
-            style: {
-                ...positionStyles,
-                height: adjustedSize.height,
-                width: adjustedSize.width,
-                borderRadius: `${effectiveCornerRadius}px`,
-                transform: baseStyle.transform
-            }
-        }), shouldRenderOverLightLayers && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        }), renderBackgroundLayer("dark"), renderBackgroundLayer("black"), shouldRenderOverLightLayers && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("div", {
                 className: ATOMIX_GLASS.BASE_LAYER_CLASS
             }), jsxRuntime.jsx("div", {
@@ -10831,16 +10853,6 @@ const EdgePanel = ({title: title, children: children, position: position = "star
             className: "c-edge-panel__container",
             children: glass ? jsxRuntime.jsx(AtomixGlass, {
                 ...glassProps,
-                className: "c-edge-panel__glass-wrapper",
-                style: {
-                    position: "fixed",
-                    width: glassContentRef.current?.offsetWidth,
-                    height: glassContentRef.current?.offsetHeight,
-                    top: containerRef.current?.offsetTop,
-                    left: containerRef.current?.offsetLeft,
-                    bottom: containerRef.current?.style.bottom,
-                    right: containerRef.current?.style.right
-                },
                 children: jsxRuntime.jsx("div", {
                     ref: glassContentRef,
                     className: "c-edge-panel__glass-content",
@@ -14432,7 +14444,13 @@ SideMenuList.displayName = "SideMenuList";
  *   Click me
  * </SideMenuItem>
  *
- * // With icon
+ * // With icon and custom link component
+ * import Link from 'next/link';
+ * <SideMenuItem href="/settings" icon={<Icon name="Settings" />} LinkComponent={Link}>
+ *   Settings
+ * </SideMenuItem>
+ *
+ * // With icon and custom link component
  * <SideMenuItem href="/settings" icon={<Icon name="Settings" />}>
  *   Settings
  * </SideMenuItem>
@@ -14444,17 +14462,15 @@ SideMenuList.displayName = "SideMenuList";
  * ```
  */
 const SideMenuItem =  React.forwardRef((({children: children, href: href, onClick: onClick, active: active = !1, disabled: disabled = !1, icon: icon, className: className = "", target: target, rel: rel, LinkComponent: LinkComponentProp}, ref) => {
-    const {LinkComponent: LinkComponentFromContext} = useSideMenuContext(), LinkComponent = LinkComponentProp ?? LinkComponentFromContext, {generateSideMenuItemClass: generateSideMenuItemClass, handleClick: handleClick} = useSideMenuItem({
+    const {generateSideMenuItemClass: generateSideMenuItemClass, handleClick: handleClick} = useSideMenuItem({
         active: active,
         disabled: disabled,
         className: className
     }), itemClass = generateSideMenuItemClass();
-    // Use LinkComponent from props first, then fall back to context
-        // Render as link if href is provided
+    // Render as link if href is provided
     if (href) {
-        // When using a custom LinkComponent (e.g., Next.js Link, React Router Link)
-        if (LinkComponent) {
-            const Component = LinkComponent, linkProps = {
+        if (LinkComponentProp) {
+            const LinkComp = LinkComponentProp, linkProps = {
                 ref: ref,
                 className: itemClass,
                 onClick: disabled ? e => {
@@ -14465,16 +14481,12 @@ const SideMenuItem =  React.forwardRef((({children: children, href: href, onClic
                 target: target,
                 rel: rel,
                 tabIndex: disabled ? -1 : 0,
-                // Support both Next.js (href) and React Router (to) Link components
-                // Pass both props - the Link component will use whichever it needs
                 ...disabled ? {} : {
                     href: href,
                     to: href
                 }
             };
-            // Build link props - support both 'href' (Next.js) and 'to' (React Router)
-            // The Link component will use whichever prop it needs
-                        return jsxRuntime.jsxs(Component, {
+            return jsxRuntime.jsxs(LinkComp, {
                 ...linkProps,
                 children: [ icon && jsxRuntime.jsx("span", {
                     className: "c-side-menu__link-icon",
@@ -14529,8 +14541,6 @@ const SideMenuItem =  React.forwardRef((({children: children, href: href, onClic
 
 SideMenuItem.displayName = "SideMenuItem";
 
-// Context for passing LinkComponent to SideMenuItem children
-const SideMenuContext =  React.createContext({}), useSideMenuContext = () => React.useContext(SideMenuContext)
 /**
  * SideMenu component provides a collapsible navigation menu with title and menu items.
  * Automatically collapses on mobile devices and can be toggled via a header button.
@@ -14545,7 +14555,8 @@ const SideMenuContext =  React.createContext({}), useSideMenuContext = () => Rea
  *   </SideMenuList>
  * </SideMenu>
  * ```
- */ , SideMenu =  React.forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, LinkComponent: LinkComponent}, ref) => {
+ */
+const SideMenu =  React.forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, LinkComponent: LinkComponent}, ref) => {
     const {isOpenState: isOpenState, wrapperRef: wrapperRef, innerRef: innerRef, sideMenuRef: sideMenuRef, generateSideMenuClass: generateSideMenuClass, generateWrapperClass: generateWrapperClass, handleToggle: handleToggle} = useSideMenu({
         isOpen: isOpen,
         onToggle: onToggle,
@@ -14650,68 +14661,63 @@ const SideMenuContext =  React.createContext({}), useSideMenuContext = () => Rea
             className: wrapperClass,
             id: id ? `${id}-content` : void 0,
             "aria-hidden": !!shouldShowToggler && !isOpenState,
-            children: jsxRuntime.jsx(SideMenuContext.Provider, {
-                value: {
-                    LinkComponent: LinkComponent
-                },
-                children: jsxRuntime.jsxs("div", {
-                    ref: innerRef,
-                    className: "c-side-menu__inner",
-                    children: [ children, menuItems?.map(((item, index) => {
-                        const isNestedItemOpen = nestedItemStates[index] ?? !0, hasItems = item.items && item.items.length > 0, canToggle = hasItems && !disabled, handleNestedToggle = () => {
-                            canToggle && setNestedItemStates((prev => ({
-                                ...prev,
-                                [index]: !prev[index]
-                            })));
-                        };
-                        return jsxRuntime.jsxs("div", {
-                            className: "c-side-menu__item",
-                            children: [ item.title && jsxRuntime.jsxs("div", {
-                                className: [ "c-side-menu__toggler", canToggle && "c-side-menu__toggler--nested", isNestedItemOpen && "is-open" ].filter(Boolean).join(" "),
-                                onClick: canToggle ? handleNestedToggle : void 0,
-                                role: canToggle ? "button" : void 0,
-                                tabIndex: canToggle && !disabled ? 0 : void 0,
-                                "aria-expanded": canToggle ? isNestedItemOpen : void 0,
-                                "aria-disabled": disabled,
-                                onKeyDown: canToggle ? e => {
-                                    "Enter" !== e.key && " " !== e.key || disabled || (e.preventDefault(), handleNestedToggle());
-                                } : void 0,
-                                children: [ jsxRuntime.jsx("span", {
-                                    className: "c-side-menu__title",
-                                    children: item.title
-                                }), canToggle && jsxRuntime.jsx("span", {
-                                    className: "c-side-menu__toggler-icon",
-                                    children: item.toggleIcon || jsxRuntime.jsx(Icon, {
-                                        name: "CaretRight",
-                                        size: "xs"
-                                    })
-                                }) ]
-                            }), hasItems && jsxRuntime.jsx("div", {
+            children: jsxRuntime.jsxs("div", {
+                ref: innerRef,
+                className: "c-side-menu__inner",
+                children: [ children, menuItems?.map(((item, index) => {
+                    const isNestedItemOpen = nestedItemStates[index] ?? !0, hasItems = item.items && item.items.length > 0, canToggle = hasItems && !disabled, handleNestedToggle = () => {
+                        canToggle && setNestedItemStates((prev => ({
+                            ...prev,
+                            [index]: !prev[index]
+                        })));
+                    };
+                    return jsxRuntime.jsxs("div", {
+                        className: "c-side-menu__item",
+                        children: [ item.title && jsxRuntime.jsxs("div", {
+                            className: [ "c-side-menu__toggler", canToggle && "c-side-menu__toggler--nested", isNestedItemOpen && "is-open" ].filter(Boolean).join(" "),
+                            onClick: canToggle ? handleNestedToggle : void 0,
+                            role: canToggle ? "button" : void 0,
+                            tabIndex: canToggle && !disabled ? 0 : void 0,
+                            "aria-expanded": canToggle ? isNestedItemOpen : void 0,
+                            "aria-disabled": disabled,
+                            onKeyDown: canToggle ? e => {
+                                "Enter" !== e.key && " " !== e.key || disabled || (e.preventDefault(), handleNestedToggle());
+                            } : void 0,
+                            children: [ jsxRuntime.jsx("span", {
+                                className: "c-side-menu__title",
+                                children: item.title
+                            }), canToggle && jsxRuntime.jsx("span", {
+                                className: "c-side-menu__toggler-icon",
+                                children: item.toggleIcon || jsxRuntime.jsx(Icon, {
+                                    name: "CaretRight",
+                                    size: "xs"
+                                })
+                            }) ]
+                        }), hasItems && jsxRuntime.jsx("div", {
+                            ref: node => {
+                                nestedWrapperRefs.current[index] = node;
+                            },
+                            className: "c-side-menu__nested-wrapper",
+                            children: jsxRuntime.jsx("div", {
                                 ref: node => {
-                                    nestedWrapperRefs.current[index] = node;
+                                    nestedInnerRefs.current[index] = node;
                                 },
-                                className: "c-side-menu__nested-wrapper",
-                                children: jsxRuntime.jsx("div", {
-                                    ref: node => {
-                                        nestedInnerRefs.current[index] = node;
-                                    },
-                                    className: "c-side-menu__nested-inner",
-                                    children: jsxRuntime.jsx(SideMenuList, {
-                                        children: item.items?.map(((subItem, subIndex) => jsxRuntime.jsx(SideMenuItem, {
-                                            href: subItem.href,
-                                            onClick: subItem.onClick,
-                                            active: subItem.active,
-                                            disabled: subItem.disabled,
-                                            icon: subItem.icon,
-                                            LinkComponent: LinkComponent,
-                                            children: subItem.title
-                                        }, subIndex)))
-                                    })
+                                className: "c-side-menu__nested-inner",
+                                children: jsxRuntime.jsx(SideMenuList, {
+                                    children: item.items?.map(((subItem, subIndex) => jsxRuntime.jsx(SideMenuItem, {
+                                        href: subItem.href,
+                                        onClick: subItem.onClick,
+                                        active: subItem.active,
+                                        disabled: subItem.disabled,
+                                        icon: subItem.icon,
+                                        LinkComponent: LinkComponent,
+                                        children: subItem.title
+                                    }, subIndex)))
                                 })
-                            }) ]
-                        }, index);
-                    })) ]
-                })
+                            })
+                        }) ]
+                    }, index);
+                })) ]
             })
         }) ]
     });
@@ -14745,7 +14751,6 @@ const SideMenuContext =  React.createContext({}), useSideMenuContext = () => Rea
     });
 }));
 
-// Hook to use SideMenu context
 SideMenu.displayName = "SideMenu";
 
 const Menu =  React.forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsxRuntime.jsx("div", {
@@ -14947,14 +14952,13 @@ const NavDropdown =  React.forwardRef((({title: title, children: children, align
             size: "sm",
             className: "c-nav__icon"
         }) ]
-    }), menuContent = jsxRuntime.jsx("div", {
+    }), MenuTag = megaMenu ? "div" : "ul", menuContent = jsxRuntime.jsx(MenuTag, {
         className: dropdownMenuClass,
         ref: dropdownRef,
         "aria-hidden": !isActive,
         children: children
     });
-    // Create the dropdown/mega menu content
-        return jsxRuntime.jsxs(NavItem, {
+    return jsxRuntime.jsxs(NavItem, {
         dropdown: !megaMenu,
         megaMenu: megaMenu,
         disabled: disabled,
@@ -19337,39 +19341,13 @@ class ThemeLogger {
                 tokens = input;
     }
     // Merge with defaults and generate CSS
-     else {
-        // Check if we're in a browser environment
-        if ("undefined" != typeof window) throw new ThemeError("No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.", ThemeErrorCode.CONFIG_LOAD_FAILED, {
-            environment: "browser"
-        });
-        // Load from config when no input provided
-                let loadThemeFromConfigSync, loadAtomixConfig;
-        try {
-            const configLoaderModule = require("../config/configLoader"), loaderModule = require("../../config/loader");
-            // Get prefix from config if needed
-            if (loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync, loadAtomixConfig = loaderModule.loadAtomixConfig, 
-            tokens = loadThemeFromConfigSync(), !options?.prefix) try {
-                const config = loadAtomixConfig({
-                    configPath: "atomix.config.ts",
-                    required: !1
-                });
-                options = {
-                    ...options,
-                    prefix: config?.prefix || "atomix"
-                };
-            } catch (error) {
-                // If config loading fails, use default prefix
-                options = {
-                    ...options,
-                    prefix: "atomix"
-                };
-            }
-        } catch (error) {
-            throw new ThemeError("No input provided and config loading is not available in this environment. Please provide tokens explicitly.", ThemeErrorCode.CONFIG_LOAD_FAILED, {
-                error: error instanceof Error ? error.message : String(error)
-            });
-        }
-    }
+     else 
+    // Auto-loading config from file system is removed for browser compatibility.
+    // If no input is provided, we return an empty theme (using defaults only) or user must provide tokens.
+    // This allows createTheme to be isomorphic.
+    // Warn in development if no input provided
+    "production" !== process.env.NODE_ENV && "undefined" != typeof window && console.warn("Atomix: createTheme() called without tokens. Using default tokens only."), 
+    tokens = {};
     const allTokens = createTokens(tokens), prefix = options?.prefix ?? "atomix";
     // Get prefix from options or use default
         return generateCSSVariables$1(allTokens, {
@@ -19600,24 +19578,12 @@ class ThemeLogger {
 }
 
 /**
- * CSS File Utilities
+ * Theme System Constants
  *
- * Save CSS to file system (Node.js only).
+ * Centralized constants for the theme system to avoid magic numbers and strings.
  */
 /**
- * Save CSS to file
- *
- * Writes CSS string to a file. Only works in Node.js environment.
- *
- * @param css - CSS string to save
- * @param filePath - Output file path
- * @throws Error if called in browser environment
- *
- * @example
- * ```typescript
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
- * await saveCSSFile(css, './themes/custom.css');
- * ```
+ * Default storage key for theme persistence
  */ "undefined" != typeof process && process.env;
 
 /**
@@ -20392,141 +20358,6 @@ function generateClassName(block, element, modifiers) {
     return property => getComponentThemeValue(component, property, variant, size);
 }
 
-/**
- * Atomix Config Loader
- *
- * Helper functions to load atomix.config.ts from external projects.
- * Similar to how Tailwind loads tailwind.config.js
- */
-/**
- * Load Atomix configuration from project root
- *
- * Attempts to load atomix.config.ts from the current working directory.
- * Falls back to default config if file doesn't exist.
- *
- * @param options - Loader options
- * @returns Loaded configuration or default
- *
- * @example
- * ```typescript
- * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
- * import { createTheme } from '@shohojdhara/atomix/theme';
- *
- * const config = loadAtomixConfig();
- * const theme = createTheme(config.theme?.tokens || {});
- * ```
- */ function loadAtomixConfig(options = {}) {
-    const {configPath: configPath = "atomix.config.ts", required: required = !1} = options, defaultConfig = {
-        prefix: "atomix",
-        theme: {
-            extend: {}
-        }
-    };
-    // Default config
-        // In browser environments, config loading is not supported
-    if ("undefined" != typeof window) {
-        if (required) throw new Error("loadAtomixConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-        return defaultConfig;
-    }
-    // Try to load config file
-        try {
-        // Use dynamic import for ESM compatibility
-        const configModule = require(configPath), config = configModule.default || configModule;
-        // Validate it's an AtomixConfig
-        if (config && "object" == typeof config) return config;
-        throw new Error("Invalid config format");
-    } catch (error) {
-        if (required) throw new Error(`Failed to load config from ${configPath}: ${error.message}`);
-        // Return default config if not required
-                return defaultConfig;
-    }
-}
-
-/**
- * Resolve config path
- *
- * Finds atomix.config.ts in the project, checking common locations.
- * Returns null in browser environments where file system access is not available.
- *
- * This function is designed to work in Node.js environments only.
- * In browser builds, it will always return null without attempting to access Node.js modules.
- *
- * @internal This function uses Node.js modules and should not be called in browser environments.
- */
-/**
- * Theme Configuration Loader
- *
- * Provides functions to load theme configurations from atomix.config.ts
- * Includes both sync and async versions, with automatic fallbacks
- */
-/**
- * Load theme from config file (synchronous, Node.js only)
- * @param configPath - Path to config file (default: atomix.config.ts)
- * @returns DesignTokens from theme configuration
- * @throws Error if config loading is not available in browser environment
- */
-function loadThemeFromConfigSync(options) {
-    // Check if we're in a browser environment
-    if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-    // Use static import - the function handles browser environment checks internally
-        let config;
-    try {
-        config = loadAtomixConfig({
-            configPath: options?.configPath || "atomix.config.ts",
-            required: !1 !== options?.required
-        });
-    } catch (error) {
-        if (!1 !== options?.required) throw new Error("Config loader module not available");
-        // Return empty tokens if config is not required
-                return createTokens({});
-    }
-    if (!config?.theme) return createTokens({});
-    // Extract tokens from config.theme structure
-    // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
-    // We need to extract the actual DesignTokens (flat structure)
-        const themeConfig = config.theme;
-    // Check if theme is directly a flat object (DesignTokens format)
-    // This handles the case where config.theme might be passed as DesignTokens directly
-        return createTokens(!themeConfig || "object" != typeof themeConfig || "extend" in themeConfig || "tokens" in themeConfig || "themes" in themeConfig ? {} : themeConfig);
-    // If theme has nested structure (extend/tokens/themes), we can't directly use it
-    // Return empty tokens - the theme system will use defaults
-    // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
-}
-
-/**
- * Load theme from config file (asynchronous)
- * @param configPath - Path to config file (default: atomix.config.ts)
- * @returns Promise resolving to DesignTokens from theme configuration
- */ async function loadThemeFromConfig(options) {
-    // Check if we're in a browser environment
-    if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-    // Use static import with runtime check
-    // The function will handle browser environment checks internally
-        let config;
-    try {
-        // loadAtomixConfig is synchronous, not async
-        config = loadAtomixConfig({
-            configPath: options?.configPath || "atomix.config.ts",
-            required: !1 !== options?.required
-        });
-    } catch (error) {
-        if (!1 !== options?.required) throw new Error("Config loader module not available");
-        // Return empty tokens if config is not required
-                return createTokens({});
-    }
-    if (!config?.theme) return createTokens({});
-    // Extract tokens from config.theme structure
-    // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
-    // We need to extract the actual DesignTokens (flat structure)
-        const themeConfig = config.theme;
-    // Check if theme is directly a flat object (DesignTokens format)
-    // This handles the case where config.theme might be passed as DesignTokens directly
-        return createTokens(!themeConfig || "object" != typeof themeConfig || "extend" in themeConfig || "tokens" in themeConfig || "themes" in themeConfig ? {} : themeConfig);
-    // If theme has nested structure (extend/tokens/themes), we can't directly use it
-    // Return empty tokens - the theme system will use defaults
-    // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
-}
-
 /**
  * Theme Context
  *
@@ -20568,21 +20399,9 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
             if (stored) return stored;
         }
         // If defaultTheme is provided, use it
-                if (null != defaultTheme) return defaultTheme;
-        // Try to load from atomix.config.ts as fallback, but only in Node.js/SSR environments
-                if ("undefined" == typeof window) try {
-            // Dynamically import the config loader to avoid bundling issues in browser
-            // eslint-disable-next-line @typescript-eslint/no-var-requires
-            const {loadThemeFromConfigSync: loadThemeFromConfigSync} = require("../config/configLoader"), configTokens = loadThemeFromConfigSync();
-            if (configTokens && Object.keys(configTokens).length > 0) 
-            // For simplicity, we'll treat config tokens as a special theme name
-            return "config-theme";
-        } catch (error) {
-            // Failed to load theme from config, using default
-        }
+                return null != defaultTheme ? defaultTheme : "default";
         // Default fallback
-                return "default";
-    }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = React.useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = React.useState((() => 
+        }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = React.useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = React.useState((() => 
     // If defaultTheme is DesignTokens, store them
     defaultTheme && "string" != typeof defaultTheme ? createTokens(defaultTheme) : null)), [isLoading, setIsLoading] = React.useState(!1), [error, setError] = React.useState(null), loadedThemesRef = React.useRef(new Set), themePromisesRef = React.useRef({}), abortControllerRef = React.useRef(null);
     // Handle initial DesignTokens defaultTheme
@@ -23577,6 +23396,7 @@ class RTLManager {
 // Core Theme Functions
 // ============================================================================
 // Create theme CSS from DesignTokens
+// File saving utilities removed to prevent bundling Node.js modules in browser
 /**
  * Inject theme CSS into DOM
  */ function injectTheme(css, id = "atomix-theme") {
@@ -23589,30 +23409,6 @@ class RTLManager {
     removeCSS(id);
 }
 
-/**
- * Save theme to CSS file
- */ async function saveTheme(css, filePath) {
-    await async function(css, filePath) {
-        // Check if in browser environment
-        if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
-        // Dynamic import to avoid bundling Node.js modules in browser builds
-                const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
-        await fs.mkdir(dir, {
-            recursive: !0
-        }), 
-        // Write file
-        await fs.writeFile(filePath, css, "utf8");
-    }
-    /**
- * Theme System Constants
- *
- * Centralized constants for the theme system to avoid magic numbers and strings.
- */
-    /**
- * Default storage key for theme persistence
- */ (css, filePath);
-}
-
 /**
  * CSS Variables Constants
  *
@@ -23989,8 +23785,6 @@ const composables = composablesImport, utils = utilsImport, types = typesImport,
     isCSSInjected: isCSSInjected,
     isDesignTokens: isDesignTokens,
     isValidCSSVariableName: isValidCSSVariableName,
-    loadThemeFromConfig: loadThemeFromConfig,
-    loadThemeFromConfigSync: loadThemeFromConfigSync,
     mapSCSSTokensToCSSVars: mapSCSSTokensToCSSVars,
     mergeCSSVars: mergeCSSVars,
     mergeTheme: mergeTheme,
@@ -23999,7 +23793,6 @@ const composables = composablesImport, utils = utilsImport, types = typesImport,
     removeCSS: removeCSS,
     removeCSSVariables: removeCSSVariables,
     removeTheme: removeTheme,
-    saveTheme: saveTheme,
     themePropertyToCSSVar: themePropertyToCSSVar,
     unregisterTheme: unregisterTheme,
     useComponentTheme: useComponentTheme,
@@ -24265,11 +24058,9 @@ exports.isDesignTokens = isDesignTokens, exports.isSlot = function(value) {
  * Merge multiple slot configurations
  * Later slots override earlier ones
  */ , exports.isValidCSSVariableName = isValidCSSVariableName, exports.isYouTubeUrl = isYouTubeUrl, 
-exports.loadAtomixConfig = loadAtomixConfig, exports.loadThemeFromConfig = loadThemeFromConfig, 
-exports.loadThemeFromConfigSync = loadThemeFromConfigSync, exports.mapSCSSTokensToCSSVars = mapSCSSTokensToCSSVars, 
-exports.mergeCSSVars = mergeCSSVars, exports.mergeClassNames = mergeClassNames, 
-exports.mergeComponentProps = mergeComponentProps, exports.mergePartStyles = mergePartStyles, 
-exports.mergeSlots = function(...slots) {
+exports.mapSCSSTokensToCSSVars = mapSCSSTokensToCSSVars, exports.mergeCSSVars = mergeCSSVars, 
+exports.mergeClassNames = mergeClassNames, exports.mergeComponentProps = mergeComponentProps, 
+exports.mergePartStyles = mergePartStyles, exports.mergeSlots = function(...slots) {
     const filtered = slots.filter((s => void 0 !== s));
     if (0 !== filtered.length) return 1 === filtered.length ? filtered[0] : _reduceInstanceProperty(filtered).call(filtered, ((acc, slot) => ({
         ...acc,
@@ -24293,42 +24084,8 @@ function(name, primaryColor, secondaryColor) {
         }
     });
 }, exports.registerTheme = registerTheme, exports.removeCSS = removeCSS, exports.removeCSSVariables = removeCSSVariables, 
-exports.removeTheme = removeTheme, exports.renderSlot = renderSlot, exports.resolveConfigPath = function() {
-    // Early return for browser environments - prevents any Node.js module access
-    // This check happens before any require() calls, preventing bundlers from analyzing them
-    if ("undefined" != typeof window || "undefined" == typeof process || !process.cwd) return null;
-    // Only attempt to load Node.js modules in Node.js runtime
-    // Use a lazy-loading pattern that prevents static analysis by bundlers
-        try {
-        // Create a function that only executes in Node.js runtime
-        // Use string-based module names to prevent static analysis by bundlers
-        const modules = (() => {
-            // These requires are only executed at runtime in Node.js environments
-            // They are marked as external in Rollup config and should not be bundled
-            // Using string concatenation and computed property access to prevent static analysis
-            if ("undefined" == typeof require) return null;
-            // Use a try-catch wrapper to safely access require
-                        try {
-                // Build module names dynamically to prevent static analysis
-                const moduleNames = [ "fs", "path" ];
-                // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-                                return {
-                    fs: require(moduleNames[0]),
-                    path: require(moduleNames[1])
-                };
-            } catch {
-                return null;
-            }
-        })();
-        if (!modules) return null;
-        const {fs: fs, path: path} = modules, cwd = process.cwd(), possiblePaths = [ path.join(cwd, "atomix.config.ts"), path.join(cwd, "atomix.config.js"), path.join(cwd, "atomix.config.mjs") ];
-        for (const configPath of possiblePaths) if (fs.existsSync(configPath)) return configPath;
-    } catch (error) {
-        // Silently fail in browser environments or when modules are unavailable
-        return null;
-    }
-    return null;
-}, exports.saveTheme = saveTheme, exports.sliderConstants = sliderConstants, exports.supportsDarkMode = function(theme) {
+exports.removeTheme = removeTheme, exports.renderSlot = renderSlot, exports.sliderConstants = sliderConstants, 
+exports.supportsDarkMode = function(theme) {
     var _context;
     return "dark" === theme.palette?.mode || !0 === theme.supportsDarkMode || Boolean((null == (_context = theme.a11y?.modes) ? void 0 : Function.call.bind(_includesInstanceProperty(_context), _context))?.("dark"));
 }, exports.theme = theme, exports.themePropertyToCSSVar = themePropertyToCSSVar,