@umituz/web-design-system 3.1.9 → 3.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "3.1.9",
+  "version": "3.1.11",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",

package/src/infrastructure/performance/index.ts

@@ -1,6 +1,76 @@
-export { usePerformanceMonitor } from './usePerformanceMonitor';
+export { usePerformanceMonitor, useRenderPerformance } from './usePerformanceMonitor';
 export { useLazyLoading } from './useLazyLoading';
-export { useMemoryOptimization } from './useMemoryOptimization';
+export { useMemoryOptimization, useMemoryLeakDetector } from './useMemoryOptimization';
 
 export type { PerformanceMetrics, PerformanceConfig } from './usePerformanceMonitor';
 export type { MemoryOptimizationConfig, CleanupFunction } from './useMemoryOptimization';
+
+// Performance monitoring utilities
+export const performanceUtils = {
+  // Measure render performance
+  measureRender: (componentName: string, fn: () => void) => {
+    const start = performance.now();
+    fn();
+    const end = performance.now();
+
+    if (import.meta.env.DEV) {
+      const duration = end - start;
+      if (duration > 16) {
+        console.warn(`[Performance] ${componentName} took ${duration.toFixed(2)}ms to render`);
+      }
+    }
+
+    return end - start;
+  },
+
+  // Measure async operation
+  measureAsync: async <T>(componentName: string, operation: string, fn: () => Promise<T>): Promise<T> => {
+    const start = performance.now();
+    try {
+      const result = await fn();
+      const duration = performance.now() - start;
+
+      if (import.meta.env.DEV) {
+        console.log(`[Performance] ${componentName} ${operation} completed in ${duration.toFixed(2)}ms`);
+      }
+
+      return result;
+    } catch (error) {
+      const duration = performance.now() - start;
+      console.error(`[Performance] ${componentName} ${operation} failed after ${duration.toFixed(2)}ms:`, error);
+      throw error;
+    }
+  },
+
+  // Get performance metrics
+  getMetrics: () => {
+    if (typeof performance === 'undefined' || !performance.memory) {
+      return null;
+    }
+
+    return {
+      memory: {
+        usedJSHeapSize: performance.memory.usedJSHeapSize,
+        totalJSHeapSize: performance.memory.totalJSHeapSize,
+        jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
+      },
+      navigation: performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined,
+    };
+  },
+
+  // Log performance summary
+  logSummary: () => {
+    const metrics = performanceUtils.getMetrics();
+    if (!metrics) return;
+
+    if (import.meta.env.DEV && metrics.memory) {
+      const memoryUsage = ((metrics.memory.usedJSHeapSize / metrics.memory.jsHeapSizeLimit) * 100).toFixed(2);
+      console.log(`[Performance] Memory usage: ${memoryUsage}%`);
+    }
+
+    if (metrics.navigation) {
+      const loadTime = metrics.navigation.loadEventEnd - metrics.navigation.fetchStart;
+      console.log(`[Performance] Page load time: ${loadTime.toFixed(2)}ms`);
+    }
+  },
+};

package/src/infrastructure/security/validation.ts

@@ -38,22 +38,22 @@ export const validateInput = (
 
   // HTML tag check for non-HTML content
   if (!config?.allowHtml) {
-    if (/<[^>]*>/.test(trimmed)) {
-      return { isValid: false, error: "HTML tags are not allowed" };
-    }
-
-    // Check for suspicious patterns
-    const suspiciousPatterns = [
-      /javascript:/gi,
-      /vbscript:/gi,
-      /data:text\/html/gi,
-      /data:application\/javascript/gi,
-      /on\w+\s*=/gi,
+    // FIX: Better HTML detection that catches encoded variations
+    const htmlPatterns = [
+      /<[^>]*>/gi,           // Standard HTML tags
+      /&lt;[^&]*&gt;/gi,      // HTML encoded tags
+      /&lt;[a-z]/gi,         // Partial encoded tags
+      /javascript:/gi,        // JavaScript protocol
+      /vbscript:/gi,          // VBScript protocol
+      /data:text\/html/gi,    // Data URI with HTML
+      /on\w+\s*=/gi,          // Inline event handlers
+      /<script/gi,            // Script tags (case-insensitive)
+      /<\/script>/gi,         // Closing script tags
     ];
 
-    for (const pattern of suspiciousPatterns) {
+    for (const pattern of htmlPatterns) {
       if (pattern.test(trimmed)) {
-        return { isValid: false, error: "Potentially unsafe content detected" };
+        return { isValid: false, error: "HTML tags or scripts are not allowed" };
       }
     }
   }
@@ -180,19 +180,20 @@ export const validateFileName = (fileName: string): ValidationResult => {
     return { isValid: false, error: "File name is required" };
   }
 
-  // Check for dangerous patterns
+  // FIX: Remove global flag from regex patterns to prevent lastIndex issues
+  // Each pattern is tested once and should not have global flag
   const dangerousPatterns = [
-    /\.\./g, // Directory traversal
-    /[<>:"|?*]/g, // Invalid file name characters
-    /^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i, // Windows reserved names
-    /^\./g, // Hidden files starting with dot
-    /\.$/, // Files ending with dot
-    /\s+$/ // Trailing whitespace
+    { pattern: /\.\./, name: 'Directory traversal' },
+    { pattern: /[<>:"|?*]/, name: 'Invalid characters' },
+    { pattern: /^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i, name: 'Windows reserved' },
+    { pattern: /^\./, name: 'Hidden file' },
+    { pattern: /\.$/, name: 'Trailing dot' },
+    { pattern: /\s+$/, name: 'Trailing whitespace' }
   ];
 
-  for (const pattern of dangerousPatterns) {
+  for (const { pattern, name } of dangerousPatterns) {
     if (pattern.test(trimmed)) {
-      return { isValid: false, error: "Invalid file name format" };
+      return { isValid: false, error: `Invalid file name: ${name}` };
     }
   }
 
@@ -211,24 +212,27 @@ export const validateFileName = (fileName: string): ValidationResult => {
 export const validateCSPCompliance = (content: string): ValidationResult => {
   const violations = [];
 
-  // Check for inline scripts
-  if (/<script[^>]*>/.test(content)) {
-    violations.push("Inline scripts not allowed");
-  }
-
-  // Check for inline styles
-  if (/style\s*=/.test(content)) {
-    violations.push("Inline styles not allowed");
-  }
+  // FIX: Enhanced script detection - catch more variations
+  const scriptPatterns = [
+    /<script[^>]*>/gi,
+    /<script/gi,
+    /<\/script>/gi,
+    /javascript:/gi,
+    /vbscript:/gi,
+    /data:\s*text\/html/gi,
+    /data:\s*application\/javascript/gi
+  ];
 
-  // Check for javascript: URLs
-  if (/javascript:/gi.test(content)) {
-    violations.push("JavaScript URLs not allowed");
+  for (const pattern of scriptPatterns) {
+    if (pattern.test(content)) {
+      violations.push("Potentially dangerous script content detected");
+      break;
+    }
   }
 
-  // Check for data: URLs with dangerous content
-  if (/data:(?:text\/html|application\/javascript)/gi.test(content)) {
-    violations.push("Dangerous data URLs not allowed");
+  // Check for inline styles (more lenient - styles are often used legitimately)
+  if (/<style[^>]*>[\s\S]*?<\/style>/gi.test(content)) {
+    violations.push("Inline style blocks not allowed");
   }
 
   if (violations.length > 0) {

package/src/infrastructure/utils/cn.util.ts

@@ -36,7 +36,10 @@ class LRUCache<K, V> {
     // Remove oldest entry if at capacity
     else if (this.cache.size >= this.maxSize) {
       const firstKey = this.cache.keys().next().value;
-      this.cache.delete(firstKey);
+      // FIX: Check if firstKey exists before deleting
+      if (firstKey !== undefined) {
+        this.cache.delete(firstKey);
+      }
     }
     this.cache.set(key, value);
   }
@@ -49,23 +52,57 @@ class LRUCache<K, V> {
 // Create cache instance
 const classNameCache = new LRUCache<string, string>(256);
 
-// Cache key generator
+// FIX: Better cache key generator that handles functions and undefined
 function generateCacheKey(inputs: ClassValue[]): string {
-  return JSON.stringify(inputs);
+  try {
+    // Convert inputs to a cacheable string representation
+    const normalized = inputs.map((input) => {
+      if (input === null || input === undefined) {
+        return 'null';
+      }
+      if (typeof input === 'function') {
+        // For functions, use a placeholder since functions can't be reliably serialized
+        return 'function';
+      }
+      if (typeof input === 'object') {
+        // Handle objects (like conditional objects in clsx)
+        return JSON.stringify(
+          Object.entries(input)
+            .filter(([_, value]) => Boolean(value))
+            .map(([key]) => key)
+            .sort()
+        );
+      }
+      return String(input);
+    });
+
+    return normalized.join('|');
+  } catch {
+    // Fallback if anything goes wrong with serialization
+    return inputs.join('|');
+  }
 }
 
 export function cn(...inputs: ClassValue[]): string {
-  const cacheKey = generateCacheKey(inputs);
-  const cached = classNameCache.get(cacheKey);
+  // Skip cache for dynamic inputs that might contain functions
+  const hasFunction = inputs.some((input) => typeof input === 'function');
 
-  if (cached) {
-    return cached;
-  }
+  if (!hasFunction) {
+    const cacheKey = generateCacheKey(inputs);
+    const cached = classNameCache.get(cacheKey);
 
-  const result = twMerge(clsx(inputs));
-  classNameCache.set(cacheKey, result);
+    if (cached) {
+      return cached;
+    }
+
+    const result = twMerge(clsx(inputs));
+    classNameCache.set(cacheKey, result);
+
+    return result;
+  }
 
-  return result;
+  // For inputs with functions, skip cache and compute directly
+  return twMerge(clsx(inputs));
 }
 
 // Export cache for manual clearing if needed

package/src/presentation/atoms/Checkbox.tsx

@@ -3,7 +3,7 @@
  * @description Checkbox input element
  */
 
-import { forwardRef, type InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes, useCallback } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
@@ -20,11 +20,12 @@ const sizeStyles = {
 };
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, checked, onCheckedChange, size = 'md', disabled, ...props }, ref) => {
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  ({ className, checked, onCheckedChange, size = 'md', disabled, onChange, ...props }, ref) => {
+    // FIX: Memoize handleChange to prevent re-renders
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
       onCheckedChange?.(e.target.checked);
-      props.onChange?.(e);
-    };
+      onChange?.(e);
+    }, [onCheckedChange, onChange]);
 
     return (
       <input

package/src/presentation/atoms/Input.tsx

@@ -14,9 +14,9 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 }
 
 const sizeStyles: Record<MediumSizes, string> = {
-  sm: 'h-8 px-3 text-sm',
-  md: 'h-9 px-3 text-sm',
-  lg: 'h-10 px-4 text-base',
+  sm: 'h-8 text-sm',
+  md: 'h-9 text-sm',
+  lg: 'h-10 text-base',
 };
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -26,7 +26,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         type={type}
         className={cn(
-          'flex w-full rounded-md border bg-background px-3 py-2',
+          'flex w-full rounded-md border bg-background py-2',
           'text-sm ring-offset-background',
           'file:border-0 file:bg-transparent file:text-sm file:font-medium',
           'placeholder:text-muted-foreground',

package/src/presentation/atoms/Switch.tsx

@@ -10,7 +10,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../infrastructure/utils';
 
 const switchVariants = cva(
-  'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
   {
     variants: {
       size: {
@@ -43,13 +43,13 @@ const switchThumbVariants = cva(
 
 export interface SwitchProps extends React.ComponentProps<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {}
 
-const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+const Switch = React.memo(React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
   ({ className, size, ...props }, ref) => (
     <SwitchPrimitives.Root className={cn(switchVariants({ size, className }))} {...props} ref={ref}>
       <SwitchPrimitives.Thumb className={cn(switchThumbVariants({ size }))} />
     </SwitchPrimitives.Root>
   )
-);
+));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };

package/src/presentation/hooks/useClickOutside.ts

@@ -15,7 +15,9 @@ export function useClickOutside<T extends HTMLElement>(
     if (!enabled) return;
 
     const handleClick = (event: Event) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
+      // FIX: Safe null check and type guard
+      const target = event.target as Node;
+      if (ref.current && target && !ref.current.contains(target)) {
         callback();
       }
     };

package/src/presentation/hooks/useDebounce.ts

@@ -3,7 +3,7 @@
  * @description Debounce a value with optimized performance
  */
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 
 export function useDebounce<T>(value: T, delay: number = 500): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
@@ -55,11 +55,11 @@ export function useThrottle<T extends (...args: any[]) => any>(
       clearTimeout(timeoutRef.current);
     }
 
+    // FIX: Ensure delay is never negative
+    const delayUntilNextExecution = Math.max(0, delay - timeSinceLastRun);
     timeoutRef.current = window.setTimeout(() => {
       lastRun.current = new Date();
       func(...args);
-    }, delay - timeSinceLastRun);
+    }, delayUntilNextExecution);
   }, [func, delay]) as T;
 }
-
-import { useCallback } from 'react';

package/src/presentation/hooks/useKeyboard.ts

@@ -3,7 +3,7 @@
  * @description Keyboard event handling
  */
 
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 
 export type KeyboardKey = string;
 export type KeyboardModifier = 'ctrl' | 'shift' | 'alt' | 'meta';
@@ -16,6 +16,24 @@ export interface KeyboardOptions {
   enabled?: boolean;
 }
 
+// Helper function to check if modifiers match
+const checkModifiers = (event: KeyboardEvent, modifiers: KeyboardModifier[]): boolean => {
+  return modifiers.every((mod) => {
+    switch (mod) {
+      case 'ctrl':
+        return event.ctrlKey;
+      case 'shift':
+        return event.shiftKey;
+      case 'alt':
+        return event.altKey;
+      case 'meta':
+        return event.metaKey;
+      default:
+        return true;
+    }
+  });
+};
+
 export function useKeyboard({
   key,
   modifiers = [],
@@ -23,52 +41,27 @@ export function useKeyboard({
   onKeyUp,
   enabled = true,
 }: KeyboardOptions) {
-  useEffect(() => {
-    if (!enabled) return;
+  // FIX: Create handlers once and reuse to prevent duplicate logic
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    const keyMatches = event.key.toLowerCase() === key.toLowerCase();
+    const modifiersMatch = checkModifiers(event, modifiers);
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const keyMatches = event.key.toLowerCase() === key.toLowerCase();
-      const modifiersMatch = modifiers.every((mod) => {
-        switch (mod) {
-          case 'ctrl':
-            return event.ctrlKey;
-          case 'shift':
-            return event.shiftKey;
-          case 'alt':
-            return event.altKey;
-          case 'meta':
-            return event.metaKey;
-          default:
-            return true;
-        }
-      });
+    if (keyMatches && modifiersMatch) {
+      onKeyDown?.(event);
+    }
+  }, [key, modifiers, onKeyDown]);
 
-      if (keyMatches && modifiersMatch) {
-        onKeyDown?.(event);
-      }
-    };
+  const handleKeyUp = useCallback((event: KeyboardEvent) => {
+    const keyMatches = event.key.toLowerCase() === key.toLowerCase();
+    const modifiersMatch = checkModifiers(event, modifiers);
 
-    const handleKeyUp = (event: KeyboardEvent) => {
-      const keyMatches = event.key.toLowerCase() === key.toLowerCase();
-      const modifiersMatch = modifiers.every((mod) => {
-        switch (mod) {
-          case 'ctrl':
-            return event.ctrlKey;
-          case 'shift':
-            return event.shiftKey;
-          case 'alt':
-            return event.altKey;
-          case 'meta':
-            return event.metaKey;
-          default:
-            return true;
-        }
-      });
+    if (keyMatches && modifiersMatch) {
+      onKeyUp?.(event);
+    }
+  }, [key, modifiers, onKeyUp]);
 
-      if (keyMatches && modifiersMatch) {
-        onKeyUp?.(event);
-      }
-    };
+  useEffect(() => {
+    if (!enabled) return;
 
     document.addEventListener('keydown', handleKeyDown);
     document.addEventListener('keyup', handleKeyUp);
@@ -77,7 +70,7 @@ export function useKeyboard({
       document.removeEventListener('keydown', handleKeyDown);
       document.removeEventListener('keyup', handleKeyUp);
     };
-  }, [key, modifiers, onKeyDown, onKeyUp, enabled]);
+  }, [enabled, handleKeyDown, handleKeyUp]);
 }
 
 export function useEscape(callback: () => void, enabled = true) {

package/src/presentation/hooks/useLocalStorage.ts

@@ -25,7 +25,8 @@ export function useLocalStorage<T>(
   const setValue = useCallback(
     (value: T | ((prev: T) => T)) => {
       try {
-        const valueToStore = value instanceof Function ? value(valueRef.current) : value;
+        // FIX: Use typeof instead of instanceof for better React functional update support
+        const valueToStore = typeof value === 'function' ? (value as (prev: T) => T)(valueRef.current) : value;
         setStoredValue(valueToStore);
         window.localStorage.setItem(key, JSON.stringify(valueToStore));
       } catch (error) {

package/src/presentation/hooks/useMediaQuery.ts

@@ -3,7 +3,7 @@
  * @description Enhanced responsive breakpoint detection with helper functions
  */
 
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import type {
   Breakpoint,
   UseBreakpointReturn,
@@ -29,6 +29,9 @@ export function useMediaQuery(breakpoint: Breakpoint): boolean {
   const [matches, setMatches] = useState(false);
 
   useEffect(() => {
+    // FIX: SSR-safe check
+    if (typeof window === 'undefined') return;
+
     const query = createMediaQuery(breakpoint);
     const media = window.matchMedia(query);
     setMatches(media.matches);
@@ -58,24 +61,30 @@ export function useMediaQuery(breakpoint: Breakpoint): boolean {
  * ```
  */
 export function useBreakpoint(): UseBreakpointReturn {
+  // FIX: Sort breakpoints once and memoize
+  const sortedBreakpoints = useMemo(() => {
+    return Object.entries(BREAKPOINTS).sort(
+      ([, a], [, b]) => b.min - a.min
+    );
+  }, []);
+
   const [currentBreakpoint, setCurrentBreakpoint] = useState<Breakpoint>(() => {
-    // Initialize with current window size
+    // FIX: SSR-safe initialization
     if (typeof window === 'undefined') return 'lg';
 
     const width = window.innerWidth;
-    for (const [bp, value] of Object.entries(BREAKPOINTS).reverse()) {
+    for (const [bp, value] of sortedBreakpoints) {
       if (width >= value.min) return bp as Breakpoint;
     }
     return 'xs';
   });
 
+  // FIX: Use useRef for resize timer to prevent timer issues
+  const resizeTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
   useEffect(() => {
-    // More efficient: track window resize with debounce
     const updateBreakpoint = () => {
       const width = window.innerWidth;
-      const sortedBreakpoints = Object.entries(BREAKPOINTS).sort(
-        ([, a], [, b]) => b.min - a.min
-      );
 
       for (const [bp, value] of sortedBreakpoints) {
         if (width >= value.min) {
@@ -89,19 +98,22 @@ export function useBreakpoint(): UseBreakpointReturn {
     updateBreakpoint();
 
     // Debounced resize listener
-    let resizeTimer: ReturnType<typeof setTimeout>;
     const handleResize = () => {
-      clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(updateBreakpoint, 100);
+      if (resizeTimerRef.current) {
+        clearTimeout(resizeTimerRef.current);
+      }
+      resizeTimerRef.current = setTimeout(updateBreakpoint, 100);
     };
 
     window.addEventListener('resize', handleResize);
 
     return () => {
       window.removeEventListener('resize', handleResize);
-      clearTimeout(resizeTimer);
+      if (resizeTimerRef.current) {
+        clearTimeout(resizeTimerRef.current);
+      }
     };
-  }, []);
+  }, [sortedBreakpoints]);
 
   // Helper functions
   const matches = useCallback(

package/src/presentation/hooks/useScrollLock.ts

@@ -12,8 +12,8 @@ export function useScrollLock(enabled: boolean = true) {
     const originalStyle = window.getComputedStyle(document.body).overflow;
     const originalPaddingRight = window.getComputedStyle(document.body).paddingRight;
 
-    // Calculate scrollbar width
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    // FIX: Ensure scrollbar width is never negative
+    const scrollbarWidth = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
 
     document.body.style.overflow = 'hidden';
     document.body.style.paddingRight = `${scrollbarWidth}px`;

package/src/presentation/hooks/useTheme.ts

@@ -1,50 +1,95 @@
 /**
  * useTheme Hook
- * @description Theme toggle functionality
+ * @description Theme toggle functionality with SSR support and system preference detection
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
-export type Theme = 'light' | 'dark';
+export type Theme = 'light' | 'dark' | 'system';
 
 export interface UseThemeReturn {
   theme: Theme;
+  effectiveTheme: 'light' | 'dark';
   toggleTheme: () => void;
   setTheme: (theme: Theme) => void;
 }
 
+const THEME_STORAGE_KEY = 'theme';
+
+const isValidTheme = (value: unknown): value is 'light' | 'dark' => {
+  return value === 'light' || value === 'dark';
+};
+
+const getSystemTheme = (): 'light' | 'dark' => {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
 export function useTheme(): UseThemeReturn {
   const [theme, setThemeState] = useState<Theme>(() => {
+    // FIX: SSR-safe initialization
+    if (typeof window === 'undefined') return 'system';
+
     try {
-      const saved = localStorage.getItem('theme') as Theme | null;
-      if (saved === 'light' || saved === 'dark') return saved;
-      return 'light';
+      const saved = localStorage.getItem(THEME_STORAGE_KEY);
+      if (isValidTheme(saved)) return saved;
+      if (saved === 'system') return 'system';
+      return 'system';
     } catch {
-      return 'light';
+      return 'system';
     }
   });
 
+  const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>(() => {
+    if (theme === 'system') {
+      return getSystemTheme();
+    }
+    return theme;
+  });
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (theme !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      setEffectiveTheme(e.matches ? 'dark' : 'light');
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+
   useEffect(() => {
     const root = document.documentElement;
+    const themeToApply = theme === 'system' ? getSystemTheme() : theme;
+
     root.classList.remove('light', 'dark');
-    root.classList.add(theme);
+    root.classList.add(themeToApply);
+
     try {
-      localStorage.setItem('theme', theme);
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
     } catch {
-      // Ignore
+      // Ignore storage errors
     }
   }, [theme]);
 
-  const toggleTheme = () => {
-    setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));
-  };
+  // FIX: Memoize callbacks to prevent unnecessary re-renders
+  const toggleTheme = useCallback(() => {
+    setThemeState((prev) => {
+      if (prev === 'light') return 'dark';
+      if (prev === 'dark') return 'system';
+      return 'light';
+    });
+  }, []);
 
-  const setTheme = (newTheme: Theme) => {
+  const setTheme = useCallback((newTheme: Theme) => {
     setThemeState(newTheme);
-  };
+  }, []);
 
   return {
     theme,
+    effectiveTheme: theme === 'system' ? effectiveTheme : theme,
     toggleTheme,
     setTheme,
   };

package/src/presentation/organisms/Modal.tsx

@@ -3,7 +3,7 @@
  * @description Dialog/overlay container with optimized transitions
  */
 
-import { forwardRef, type HTMLAttributes, useEffect, useState } from 'react';
+import { forwardRef, type HTMLAttributes, useEffect, useState, useRef } from 'react';
 import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
@@ -27,22 +27,33 @@ export const Modal = React.memo(forwardRef<HTMLDivElement, ModalProps>(
   ({ open = false, onClose, showCloseButton = true, size = 'md', className, children, ...props }, ref) => {
     const [shouldRender, setShouldRender] = useState(open);
     const [isAnimating, setIsAnimating] = useState(false);
+    const rafRef = useRef<number>();
+    const timerRef = useRef<number>();
 
     useEffect(() => {
       if (open) {
         setShouldRender(true);
-        // Small delay to trigger animation
-        requestAnimationFrame(() => {
+        // FIX: Store rafId and cleanup properly
+        rafRef.current = requestAnimationFrame(() => {
           setIsAnimating(true);
         });
       } else {
         setIsAnimating(false);
         // Wait for animation to complete before unmounting
-        const timer = setTimeout(() => {
+        timerRef.current = window.setTimeout(() => {
           setShouldRender(false);
         }, 200); // Match animation duration
-        return () => clearTimeout(timer);
       }
+
+      // FIX: Proper cleanup for both animation frame and timeout
+      return () => {
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+        }
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+      };
     }, [open]);
 
     if (!shouldRender) return null;