@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/lib/composables/usePopover.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, RefObject } from 'react';
+import { useState, useRef, useEffect, RefObject, useCallback } from 'react';
 
 type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
 type PopoverTrigger = 'click' | 'hover';
@@ -57,14 +57,17 @@ export const usePopover = ({
   const isOpenState = isControlled ? controlledIsOpen : isOpen;
 
   // Define setIsOpen function before using it in useEffect
-  const setIsOpen = (newIsOpen: boolean) => {
-    if (!isControlled) {
-      setIsOpenState(newIsOpen);
-    }
-    if (onOpenChange) {
-      onOpenChange(newIsOpen);
-    }
-  };
+  const setIsOpen = useCallback(
+    (newIsOpen: boolean) => {
+      if (!isControlled) {
+        setIsOpenState(newIsOpen);
+      }
+      if (onOpenChange) {
+        onOpenChange(newIsOpen);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
 
   // Handle hover events if trigger is hover
   useEffect(() => {
@@ -115,141 +118,150 @@ export const usePopover = ({
     popoverRef.current.addEventListener('mouseenter', handlePopoverMouseEnter);
     popoverRef.current.addEventListener('mouseleave', handlePopoverMouseLeave);
 
+    const currentTrigger = triggerRef.current;
+    const currentPopover = popoverRef.current;
+
     return () => {
-      if (triggerRef.current) {
-        triggerRef.current.removeEventListener('mouseenter', handleTriggerMouseEnter);
-        triggerRef.current.removeEventListener('mouseleave', handleTriggerMouseLeave);
+      if (currentTrigger) {
+        currentTrigger.removeEventListener('mouseenter', handleTriggerMouseEnter);
+        currentTrigger.removeEventListener('mouseleave', handleTriggerMouseLeave);
       }
-      if (popoverRef.current) {
-        popoverRef.current.removeEventListener('mouseenter', handlePopoverMouseEnter);
-        popoverRef.current.removeEventListener('mouseleave', handlePopoverMouseLeave);
+      if (currentPopover) {
+        currentPopover.removeEventListener('mouseenter', handlePopoverMouseEnter);
+        currentPopover.removeEventListener('mouseleave', handlePopoverMouseLeave);
       }
       if (timeoutRef.current !== null) {
         window.clearTimeout(timeoutRef.current);
       }
     };
-  }, [trigger, delay, isOpenState]);
-
-  const updatePosition = (event?: Event) => {
-    if (!triggerRef.current || !popoverRef.current) return;
-
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popoverRect = popoverRef.current.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    // Check if the trigger is near viewport edges
-    const isNearViewportEdge =
-      triggerRect.top < 50 ||
-      triggerRect.bottom > viewportHeight - 50 ||
-      triggerRect.left < 50 ||
-      triggerRect.right > viewportWidth - 50;
-
-    // If this is a scroll update and trigger isn't near edges, skip repositioning
-    if (event?.type === 'scroll' && !isNearViewportEdge) {
-      return;
-    }
-
-    // Calculate space available in each direction
-    const spaceTop = triggerRect.top;
-    const spaceBottom = viewportHeight - triggerRect.bottom;
-    const spaceLeft = triggerRect.left;
-    const spaceRight = viewportWidth - triggerRect.right;
-
-    // Determine best position based on available space
-    let bestPosition: PopoverPosition = position === 'auto' ? 'top' : (position as PopoverPosition);
-
-    // If specified position is 'auto', find the position with most space
-    if (position === 'auto') {
-      const spaces = [
-        { position: 'top', space: spaceTop },
-        { position: 'right', space: spaceRight },
-        { position: 'bottom', space: spaceBottom },
-        { position: 'left', space: spaceLeft },
-      ];
-
-      // Sort by available space (descending)
-      spaces.sort((a, b) => b.space - a.space);
-
-      // Select position with most space
-      bestPosition = spaces[0]?.position as PopoverPosition;
-    } else {
-      // Check if the preferred position has enough space
-      const needsFlip =
-        (position === 'top' &&
-          spaceTop < popoverRect.height + offset &&
-          spaceBottom >= popoverRect.height + offset) ||
-        (position === 'bottom' &&
-          spaceBottom < popoverRect.height + offset &&
-          spaceTop >= popoverRect.height + offset) ||
-        (position === 'left' &&
-          spaceLeft < popoverRect.width + offset &&
-          spaceRight >= popoverRect.width + offset) ||
-        (position === 'right' &&
-          spaceRight < popoverRect.width + offset &&
-          spaceLeft >= popoverRect.width + offset);
-
-      if (needsFlip) {
-        // Flip to the opposite side
-        const oppositePositions: Record<PopoverPosition | 'auto', PopoverPosition> = {
-          top: 'bottom',
-          bottom: 'top',
-          left: 'right',
-          right: 'left',
-          auto: 'bottom',
-        };
-        bestPosition = oppositePositions[position as PopoverPosition | 'auto'];
+  }, [trigger, delay, isOpenState, setIsOpen]);
+
+  const updatePosition = useCallback(
+    (event?: Event) => {
+      if (!triggerRef.current || !popoverRef.current) return;
+
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Check if the trigger is near viewport edges
+      const isNearViewportEdge =
+        triggerRect.top < 50 ||
+        triggerRect.bottom > viewportHeight - 50 ||
+        triggerRect.left < 50 ||
+        triggerRect.right > viewportWidth - 50;
+
+      // If this is a scroll update and trigger isn't near edges, skip repositioning
+      if (event?.type === 'scroll' && !isNearViewportEdge) {
+        return;
       }
-    }
-
-    setCurrentPosition(bestPosition);
-
-    // Calculate position based on the determined best position
-    let top = 0;
-    let left = 0;
-
-    // Calculate viewport-relative position
-    switch (bestPosition) {
-      case 'top':
-        top = triggerRect.top - popoverRect.height - offset;
-        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
-        break;
-      case 'bottom':
-        top = triggerRect.bottom + offset;
-        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
-        break;
-      case 'left':
-        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
-        left = triggerRect.left - popoverRect.width - offset;
-        break;
-      case 'right':
-        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
-        left = triggerRect.right + offset;
-        break;
-    }
-
-    // Constrain to viewport boundaries
-    if (left < 0) {
-      left = 5;
-    } else if (left + popoverRect.width > viewportWidth) {
-      left = viewportWidth - popoverRect.width - 5;
-    }
-
-    if (top < 0) {
-      top = 5;
-    } else if (top + popoverRect.height > viewportHeight) {
-      top = viewportHeight - popoverRect.height - 5;
-    }
-
-    // Add scroll position to convert viewport coordinates to absolute position
-    const absoluteTop = top + window.scrollY;
-    const absoluteLeft = left + window.scrollX;
-
-    // Apply position using absolute positioning to follow when scrolling
-    popoverRef.current.style.position = 'absolute';
-    popoverRef.current.style.top = `${absoluteTop}px`;
-    popoverRef.current.style.left = `${absoluteLeft}px`;
-  };
+
+      // Calculate space available in each direction
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+
+      // Determine best position based on available space
+      let bestPosition: PopoverPosition =
+        position === 'auto' ? 'top' : (position as PopoverPosition);
+
+      // If specified position is 'auto', find the position with most space
+      if (position === 'auto') {
+        const spaces = [
+          { position: 'top', space: spaceTop },
+          { position: 'right', space: spaceRight },
+          { position: 'bottom', space: spaceBottom },
+          { position: 'left', space: spaceLeft },
+        ];
+
+        // Sort by available space (descending)
+        spaces.sort((a, b) => b.space - a.space);
+
+        // Select position with most space
+        bestPosition = spaces[0]?.position as PopoverPosition;
+      } else {
+        // Check if the preferred position has enough space
+        const needsFlip =
+          (position === 'top' &&
+            spaceTop < popoverRect.height + offset &&
+            spaceBottom >= popoverRect.height + offset) ||
+          (position === 'bottom' &&
+            spaceBottom < popoverRect.height + offset &&
+            spaceTop >= popoverRect.height + offset) ||
+          (position === 'left' &&
+            spaceLeft < popoverRect.width + offset &&
+            spaceRight >= popoverRect.width + offset) ||
+          (position === 'right' &&
+            spaceRight < popoverRect.width + offset &&
+            spaceLeft >= popoverRect.width + offset);
+
+        if (needsFlip) {
+          // Flip to the opposite side
+          const oppositePositions: Record<PopoverPosition | 'auto', PopoverPosition> = {
+            top: 'bottom',
+            bottom: 'top',
+            left: 'right',
+            right: 'left',
+            auto: 'bottom',
+          };
+          bestPosition = oppositePositions[position as PopoverPosition | 'auto'];
+        }
+      }
+
+      setCurrentPosition(bestPosition);
+
+      // Calculate position based on the determined best position
+      let top = 0;
+      let left = 0;
+
+      // Calculate viewport-relative position
+      switch (bestPosition) {
+        case 'top':
+          top = triggerRect.top - popoverRect.height - offset;
+          left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+          break;
+        case 'bottom':
+          top = triggerRect.bottom + offset;
+          left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+          break;
+        case 'left':
+          top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+          left = triggerRect.left - popoverRect.width - offset;
+          break;
+        case 'right':
+          top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+          left = triggerRect.right + offset;
+          break;
+      }
+
+      // Constrain to viewport boundaries
+      if (left < 0) {
+        left = 5;
+      } else if (left + popoverRect.width > viewportWidth) {
+        left = viewportWidth - popoverRect.width - 5;
+      }
+
+      if (top < 0) {
+        top = 5;
+      } else if (top + popoverRect.height > viewportHeight) {
+        top = viewportHeight - popoverRect.height - 5;
+      }
+
+      // Add scroll position to convert viewport coordinates to absolute position
+      const absoluteTop = top + window.scrollY;
+      const absoluteLeft = left + window.scrollX;
+
+      // Apply position using absolute positioning to follow when scrolling
+      if (popoverRef.current) {
+        popoverRef.current.style.position = 'absolute';
+        popoverRef.current.style.top = `${absoluteTop}px`;
+        popoverRef.current.style.left = `${absoluteLeft}px`;
+      }
+    },
+    [position, offset]
+  );
 
   // Position the popover
   useEffect(() => {
@@ -289,7 +301,7 @@ export const usePopover = ({
       }
       clearInterval(intervalId);
     };
-  }, [isOpenState, position, offset]);
+  }, [isOpenState, updatePosition]);
 
   // Handle click outside to close popover
   useEffect(() => {
@@ -311,7 +323,7 @@ export const usePopover = ({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isOpenState, closeOnClickOutside]);
+  }, [isOpenState, closeOnClickOutside, setIsOpen]);
 
   // Handle escape key to close popover
   useEffect(() => {
@@ -328,7 +340,7 @@ export const usePopover = ({
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
-  }, [isOpenState, closeOnEscape]);
+  }, [isOpenState, closeOnEscape, setIsOpen]);
 
   // Clean up on unmount
   useEffect(() => {

package/src/lib/composables/useSideMenu.ts

@@ -8,20 +8,18 @@ import { SIDE_MENU } from '../constants/components';
  * @returns SideMenu state and methods
  */
 export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
-  // Default side menu properties
-  const defaultProps: Partial<SideMenuProps> = {
-    collapsible: true,
-    collapsibleDesktop: false,
-    defaultCollapsedDesktop: false,
-    isOpen: false,
-    ...initialProps,
-  };
+  const {
+    collapsible = true,
+    collapsibleDesktop = false,
+    defaultCollapsedDesktop = false,
+    isOpen,
+    onToggle,
+    disabled = false,
+  } = initialProps || {};
 
   // Local open state for when not controlled externally
   const [isOpenState, setIsOpenState] = useState(
-    defaultProps.defaultCollapsedDesktop !== undefined
-      ? !defaultProps.defaultCollapsedDesktop
-      : defaultProps.isOpen || false
+    defaultCollapsedDesktop !== undefined ? !defaultCollapsedDesktop : isOpen || false
   );
 
   // Refs for managing responsive behavior
@@ -31,19 +29,18 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
 
   // Update local state when external state changes
   useEffect(() => {
-    if (typeof defaultProps.isOpen !== 'undefined') {
-      setIsOpenState(defaultProps.isOpen);
-    } else if (defaultProps.defaultCollapsedDesktop !== undefined) {
-      setIsOpenState(!defaultProps.defaultCollapsedDesktop);
+    if (typeof isOpen !== 'undefined') {
+      setIsOpenState(isOpen);
+    } else if (defaultCollapsedDesktop !== undefined) {
+      setIsOpenState(!defaultCollapsedDesktop);
     }
-  }, [defaultProps.isOpen, defaultProps.defaultCollapsedDesktop]);
+  }, [isOpen, defaultCollapsedDesktop]);
 
   // Set initial height on mount
   useEffect(() => {
     const isMobile = window.innerWidth < 768;
-    const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
-    const currentOpen =
-      typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+    const shouldCollapse = isMobile ? collapsible : collapsibleDesktop;
+    const currentOpen = typeof isOpen !== 'undefined' ? isOpen : isOpenState;
 
     if (shouldCollapse && wrapperRef.current && innerRef.current) {
       // Use setTimeout to ensure DOM is fully rendered
@@ -62,13 +59,13 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
       wrapperRef.current.style.height = 'auto';
     }
     return undefined;
-  }, []); // Only run on mount
+  }, [collapsible, collapsibleDesktop, isOpen, isOpenState]);
 
   // Handle responsive behavior - vertical collapse for both mobile and desktop
   useEffect(() => {
     const handleResize = () => {
       const isMobile = window.innerWidth < 768; // MD breakpoint
-      const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+      const shouldCollapse = isMobile ? collapsible : collapsibleDesktop;
 
       if (!shouldCollapse) {
         // Not collapsible - always show content
@@ -77,8 +74,7 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
         }
       } else if (wrapperRef.current && innerRef.current) {
         // Set proper height for vertical animation (both mobile and desktop)
-        const currentOpen =
-          typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+        const currentOpen = typeof isOpen !== 'undefined' ? isOpen : isOpenState;
 
         // Use requestAnimationFrame to ensure DOM is ready
         requestAnimationFrame(() => {
@@ -101,22 +97,15 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
       clearTimeout(timeoutId);
       window.removeEventListener('resize', handleResize);
     };
-  }, [
-    defaultProps.collapsible,
-    defaultProps.collapsibleDesktop,
-    defaultProps.isOpen,
-    defaultProps.onToggle,
-    isOpenState,
-  ]);
+  }, [collapsible, collapsibleDesktop, isOpen, onToggle, isOpenState]);
 
   // Update wrapper height when open state changes (both mobile and desktop)
   useEffect(() => {
     const isMobile = window.innerWidth < 768;
-    const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+    const shouldCollapse = isMobile ? collapsible : collapsibleDesktop;
 
     if (shouldCollapse && wrapperRef.current && innerRef.current) {
-      const currentOpen =
-        typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+      const currentOpen = typeof isOpen !== 'undefined' ? isOpen : isOpenState;
 
       // Use requestAnimationFrame to ensure DOM is ready
       requestAnimationFrame(() => {
@@ -132,7 +121,7 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
       // Not collapsible - always show content
       wrapperRef.current.style.height = 'auto';
     }
-  }, [defaultProps.isOpen, isOpenState, defaultProps.collapsible, defaultProps.collapsibleDesktop]);
+  }, [isOpen, isOpenState, collapsible, collapsibleDesktop]);
 
   /**
    * Generate side menu class based on properties
@@ -159,14 +148,13 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
    * Handle toggle click (mobile)
    */
   const handleToggle = () => {
-    if (defaultProps.disabled) return;
+    if (disabled) return;
 
-    const newState =
-      typeof defaultProps.isOpen !== 'undefined' ? !defaultProps.isOpen : !isOpenState;
+    const newState = typeof isOpen !== 'undefined' ? !isOpen : !isOpenState;
 
-    if (typeof defaultProps.onToggle === 'function') {
+    if (typeof onToggle === 'function') {
       // Controlled component
-      defaultProps.onToggle(newState);
+      onToggle(newState);
     } else {
       // Uncontrolled component
       setIsOpenState(newState);
@@ -185,11 +173,10 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
    * @returns Current open state
    */
   const getCurrentOpenState = (): boolean => {
-    return typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+    return typeof isOpen !== 'undefined' ? isOpen : isOpenState;
   };
 
   return {
-    defaultProps,
     isOpenState: getCurrentOpenState(),
     wrapperRef,
     innerRef,

package/src/lib/composables/useSlider.ts

@@ -39,7 +39,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
   } = options;
 
-  const slides = Array.isArray(rawSlides) ? rawSlides : [];
+  const slides = useMemo(() => (Array.isArray(rawSlides) ? rawSlides : []), [rawSlides]);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -364,8 +364,6 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     isTransitioning,
     speed,
     onSlideChange,
-    allSlides.length,
-    loopedSlides,
     autoplay,
   ]);
 
@@ -426,8 +424,6 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     isTransitioning,
     speed,
     onSlideChange,
-    allSlides.length,
-    loopedSlides,
     autoplay,
   ]);
 
@@ -458,7 +454,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
         onSlideChange?.(index);
       }, speed);
     },
-    [realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides, autoplay]
+    [realIndex, isTransitioning, speed, onSlideChange, loop, slides.length, autoplay]
   );
 
   const handleTouchStart = useCallback(

package/src/lib/composables/useTooltip.ts

@@ -28,8 +28,8 @@ interface UseTooltipResult {
   isVisible: boolean;
   isPositioned: boolean;
   tooltipId: string;
-  triggerRef: RefObject<HTMLDivElement>;
-  tooltipRef: RefObject<HTMLDivElement>;
+  triggerRef: RefObject<HTMLDivElement | null>;
+  tooltipRef: RefObject<HTMLDivElement | null>;
   tooltipStyle: React.CSSProperties;
   arrowStyle: React.CSSProperties;
   showTooltip: () => void;

package/src/lib/config/index.ts

@@ -206,6 +206,29 @@ export interface TokenEngineConfig {
   };
 }
 
+/**
+ * CLI component generator defaults (merged before CLI flags; flags win).
+ */
+export interface GeneratorConfig {
+  /** Default output directory for generated components */
+  outputPath?: string;
+  /** Override detected framework */
+  framework?: 'react' | 'next' | 'vanilla';
+  /** Per-feature defaults (CLI --no-* flags override) */
+  features?: {
+    storybook?: boolean;
+    hook?: boolean;
+    styles?: boolean;
+    tests?: boolean;
+  };
+  /** Composable hooks directory relative to project root */
+  hookOutputDir?: string;
+  /** Story file: side-effect import for global Atomix styles */
+  storybookCssImport?: string;
+  /** Barrel file strategy for new components */
+  barrel?: 'index' | 'none';
+}
+
 /**
  * Atomix Configuration Interface
  *
@@ -241,6 +264,17 @@ export interface AtomixConfig {
     model?: string;
     /** API key for the provider */
     apiKey?: string;
+    /** Temperature for AI creativity (0.0-1.0, default: 0.7) */
+    temperature?: number;
+    /** Maximum tokens per AI response (default: 4000) */
+    maxTokens?: number;
+    /** Rate limiting configuration */
+    rateLimit?: {
+      /** Maximum requests allowed */
+      requests: number;
+      /** Time window in milliseconds */
+      windowMs: number;
+    };
   };
 
   /**
@@ -255,6 +289,11 @@ export interface AtomixConfig {
     anonymize?: boolean;
   };
 
+  /**
+   * `atomix generate` defaults (CLI overrides these)
+   */
+  generator?: GeneratorConfig;
+
   /**
    * Theme customization (Tailwind-like)
    *

package/src/lib/constants/components.ts

@@ -1631,6 +1631,7 @@ export const ATOMIX_GLASS = {
   FILTER_OVERLAY_CLASS: 'c-atomix-glass__filter-overlay',
   FILTER_SHADOW_CLASS: 'c-atomix-glass__filter-shadow',
   CONTENT_CLASS: 'c-atomix-glass__content',
+  BORDER_BACKDROP_CLASS: 'c-atomix-glass__border-backdrop',
   BORDER_1_CLASS: 'c-atomix-glass__border-1',
   BORDER_2_CLASS: 'c-atomix-glass__border-2',
   HOVER_1_CLASS: 'c-atomix-glass__hover-1',

package/src/lib/theme/devtools/Comparator.tsx

@@ -48,7 +48,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>('');
   const [filterType, setFilterType] = useState<'all' | 'added' | 'removed' | 'changed'>('all');
   const [filterCategory, setFilterCategory] = useState<string>('all');
-  const searchTimeoutRef = useRef<NodeJS.Timeout>();
+  const searchTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
   // Debounce search query
   useEffect(() => {

package/src/lib/theme/devtools/Inspector.tsx

@@ -57,7 +57,7 @@ export const ThemeInspector: React.FC<ThemeInspectorProps> = ({
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>('');
   const [copiedPath, setCopiedPath] = useState<string | null>(null);
-  const searchTimeoutRef = useRef<NodeJS.Timeout>();
+  const searchTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
   // Debounce search query
   useEffect(() => {

package/src/lib/theme/devtools/LiveEditor.tsx

@@ -200,7 +200,7 @@ export const ThemeLiveEditor: React.FC<ThemeLiveEditorProps> = ({
   );
 
   // Debounced JSON update to history
-  const jsonUpdateTimeoutRef = useRef<NodeJS.Timeout>();
+  const jsonUpdateTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   useEffect(() => {
     if (error) return;
 

package/src/lib/theme/runtime/ThemeProvider.tsx

@@ -91,7 +91,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
 
     // Default fallback
     return 'default';
-  }, [defaultTheme, enablePersistence, storageKey]);
+  }, [defaultTheme, enablePersistence, storageKey, storageAdapter]);
 
   // Initialize state - handle both string and DesignTokens for defaultTheme
   const [currentTheme, setCurrentTheme] = useState<string>(() => {

package/src/lib/types/components.ts

@@ -232,6 +232,7 @@ export interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
   overLight?: OverLightConfig;
   mode?: DisplacementMode;
   onClick?: () => void;
+  isFixedOrSticky?: boolean;
 
   /**
    * Shader variant for shader mode

package/src/styles/01-settings/_index.scss

@@ -13,6 +13,7 @@
 // Component settings
 @forward './settings.accordion';
 @forward './settings.animations';
+@forward './settings.atomix-glass';
 @forward './settings.avatar-group';
 @forward './settings.avatar';
 @forward './settings.badge';