@umituz/react-native-design-system 4.25.93 → 4.25.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.93",
+  "version": "4.25.95",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/atoms/AtomicFab.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { useResponsive } from '../responsive';
@@ -57,45 +57,41 @@ export const AtomicFab: React.FC<AtomicFabProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const responsive = useResponsive();
-  const isDisabled = disabled;
 
-  // Get configurations
-  const baseSizeConfig = FAB_SIZES[size as 'sm' | 'md' | 'lg'];
-  const variants = getFabVariants(tokens);
-  const variantConfig = variants[variant as 'primary' | 'secondary' | 'surface'];
-  const baseIconSize = getFabIconSize(size as 'sm' | 'md' | 'lg');
+  const variantConfig = useMemo(() => getFabVariants(tokens)[variant as 'primary' | 'secondary' | 'surface'], [tokens, variant]);
+  const iconSize = useMemo(() => getFabIconSize(size as 'sm' | 'md' | 'lg') * tokens.spacingMultiplier, [size, tokens.spacingMultiplier]);
 
-  // Scale dimensions
-  const sizeConfig = {
-    width: baseSizeConfig.width * tokens.spacingMultiplier,
-    height: baseSizeConfig.height * tokens.spacingMultiplier,
-    borderRadius: baseSizeConfig.borderRadius * tokens.spacingMultiplier,
-  };
-  const iconSize = baseIconSize * tokens.spacingMultiplier;
+  const fabStyle = useMemo(() => {
+    const baseSizeConfig = FAB_SIZES[size as 'sm' | 'md' | 'lg'];
+    const sizeConfig = {
+      width: baseSizeConfig.width * tokens.spacingMultiplier,
+      height: baseSizeConfig.height * tokens.spacingMultiplier,
+      borderRadius: baseSizeConfig.borderRadius * tokens.spacingMultiplier,
+    };
 
-  // Combine styles
-  const fabStyle = StyleSheet.flatten([
-    {
-      position: 'absolute' as const,
-      bottom: responsive.fabPosition.bottom,
-      right: responsive.fabPosition.right,
-      width: sizeConfig.width,
-      height: sizeConfig.height,
-      borderRadius: sizeConfig.borderRadius,
-      backgroundColor: variantConfig.backgroundColor,
-      alignItems: 'center' as const,
-      justifyContent: 'center' as const,
-    },
-    getFabBorder(tokens),
-    isDisabled ? { opacity: tokens.opacity.disabled } : undefined,
-    style, // Custom style override
-  ]);
+    return StyleSheet.flatten([
+      {
+        position: 'absolute' as const,
+        bottom: responsive.fabPosition.bottom,
+        right: responsive.fabPosition.right,
+        width: sizeConfig.width,
+        height: sizeConfig.height,
+        borderRadius: sizeConfig.borderRadius,
+        backgroundColor: variantConfig.backgroundColor,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+      },
+      getFabBorder(tokens),
+      disabled ? { opacity: tokens.opacity.disabled } : undefined,
+      style,
+    ]);
+  }, [size, tokens, responsive.fabPosition, variantConfig, disabled, style]);
 
   return (
     <TouchableOpacity
       style={fabStyle}
       onPress={onPress}
-      disabled={isDisabled}
+      disabled={disabled}
       activeOpacity={activeOpacity}
       testID={testID}
       accessibilityLabel={accessibilityLabel || `${icon} floating action button`}

package/src/atoms/AtomicInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, TextInput, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { useInputState } from './input/hooks/useInputState';
@@ -69,7 +69,7 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
   const iconColor = isDisabled ? tokens.colors.textDisabled : tokens.colors.textSecondary;
   const iconPadding = sizeConfig.iconSize + 8;
 
-  const containerStyle: StyleProp<ViewStyle> = [
+  const containerStyle = useMemo<StyleProp<ViewStyle>>(() => [
     inputStyles.container,
     variantStyle,
     {
@@ -77,13 +77,16 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
       paddingBottom: sizeConfig.paddingVertical,
       paddingHorizontal: sizeConfig.paddingHorizontal,
       minHeight: sizeConfig.minHeight,
-      justifyContent: 'center',
+      justifyContent: 'center' as const,
       opacity: isDisabled ? 0.5 : 1,
     },
     style,
-  ];
+  ], [variantStyle, sizeConfig, isDisabled, style]);
 
-  const textInputStyle: StyleProp<TextStyle> = [
+  const handleBlur = useCallback(() => { setIsFocused(false); onBlur?.(); }, [setIsFocused, onBlur]);
+  const handleFocus = useCallback(() => { setIsFocused(true); onFocus?.(); }, [setIsFocused, onFocus]);
+
+  const textInputStyle = useMemo<StyleProp<TextStyle>>(() => [
     inputStyles.input,
     {
       fontSize: sizeConfig.fontSize,
@@ -94,7 +97,7 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
       paddingRight: (trailingIcon || showPasswordToggle) ? iconPadding : undefined,
     },
     inputStyle,
-  ];
+  ], [sizeConfig, textColor, leadingIcon, trailingIcon, showPasswordToggle, iconPadding, inputStyle]);
 
   return (
     <View testID={testID}>
@@ -123,8 +126,8 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
           numberOfLines={numberOfLines}
           textContentType={textContentType}
           style={textInputStyle}
-          onBlur={() => { setIsFocused(false); onBlur?.(); }}
-          onFocus={() => { setIsFocused(true); onFocus?.(); }}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
           testID={testID ? `${testID}-input` : undefined}
         />
 

package/src/atoms/AtomicProgress.tsx

@@ -14,7 +14,7 @@
  * - Form completion
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, ViewStyle, DimensionValue, Text } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 
@@ -82,27 +82,27 @@ export const AtomicProgress: React.FC<AtomicProgressProps> = ({
   // Border radius based on shape
   const progressBorderRadius = shape === 'rounded' ? scaledHeight / 2 : 0;
 
-  const containerStyle: ViewStyle = {
+  const containerStyle = useMemo<ViewStyle>(() => ({
     width: width as DimensionValue,
     height: scaledHeight,
     backgroundColor: progressBackground,
     borderRadius: progressBorderRadius,
     overflow: 'hidden',
-  };
+  }), [width, scaledHeight, progressBackground, progressBorderRadius]);
 
-  const progressStyle: ViewStyle = {
+  const progressStyle = useMemo<ViewStyle>(() => ({
     width: progressWidth as DimensionValue,
     height: '100%' as DimensionValue,
     backgroundColor: progressColor,
     borderRadius: progressBorderRadius,
-  };
+  }), [progressWidth, progressColor, progressBorderRadius]);
 
-  const textStyle = {
+  const textStyle = useMemo(() => ({
     fontSize: tokens.typography.bodySmall.responsiveFontSize,
     fontWeight: tokens.typography.labelMedium.fontWeight,
     color: progressTextColor,
     textAlign: 'center' as const,
-  };
+  }), [tokens.typography.bodySmall.responsiveFontSize, tokens.typography.labelMedium.fontWeight, progressTextColor]);
 
   return (
     <View

package/src/atoms/AtomicSwitch.tsx

@@ -5,7 +5,7 @@
  * Purpose: Boolean toggle across all apps
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Switch, StyleSheet, ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { AtomicText } from './AtomicText';
@@ -31,6 +31,10 @@ export const AtomicSwitch: React.FC<AtomicSwitchProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
+  const labelStyle = useMemo(() => ({ color: tokens.colors.textPrimary }), [tokens.colors.textPrimary]);
+  const descriptionStyle = useMemo(() => ({ color: tokens.colors.textSecondary, marginTop: 2 }), [tokens.colors.textSecondary]);
+  const trackColor = useMemo(() => ({ false: tokens.colors.border, true: tokens.colors.primary }), [tokens.colors.border, tokens.colors.primary]);
+
   return (
     <View style={[styles.container, style]} testID={testID}>
       <View style={styles.row}>
@@ -38,14 +42,14 @@ export const AtomicSwitch: React.FC<AtomicSwitchProps> = ({
           <View style={styles.labelContainer}>
             <AtomicText
               type="bodyMedium"
-              style={{ color: tokens.colors.textPrimary }}
+              style={labelStyle}
             >
               {label}
             </AtomicText>
             {description && (
               <AtomicText
                 type="bodySmall"
-                style={{ color: tokens.colors.textSecondary, marginTop: 2 }}
+                style={descriptionStyle}
               >
                 {description}
               </AtomicText>
@@ -56,11 +60,11 @@ export const AtomicSwitch: React.FC<AtomicSwitchProps> = ({
           value={value}
           onValueChange={onValueChange}
           disabled={disabled}
-          trackColor={{
-            false: tokens.colors.border,
-            true: tokens.colors.primary,
-          }}
+          trackColor={trackColor}
           thumbColor={value ? tokens.colors.onPrimary : tokens.colors.surface}
+          accessibilityRole="switch"
+          accessibilityLabel={label}
+          accessibilityState={{ checked: value, disabled }}
         />
       </View>
     </View>

package/src/atoms/AtomicTouchable.tsx

@@ -5,7 +5,7 @@
  * Purpose: Touchable wrapper across all apps
  */
 
-import React, { useRef } from 'react';
+import React, { useRef, useCallback } from 'react';
 import { TouchableOpacity, ViewStyle, StyleProp } from 'react-native';
 
 const DEBOUNCE_MS = 300;
@@ -47,19 +47,19 @@ const AtomicTouchableComponent: React.FC<AtomicTouchableProps> = ({
   accessible = true,
 }) => {
   const lastPressRef = useRef(0);
+  const onPressRef = useRef(onPress);
+  onPressRef.current = onPress;
 
-  const handlePress = onPress
-    ? () => {
-        const now = Date.now();
-        if (now - lastPressRef.current < DEBOUNCE_MS) return;
-        lastPressRef.current = now;
-        onPress();
-      }
-    : undefined;
+  const handlePress = useCallback(() => {
+    const now = Date.now();
+    if (now - lastPressRef.current < DEBOUNCE_MS) return;
+    lastPressRef.current = now;
+    onPressRef.current?.();
+  }, []);
 
   return (
     <TouchableOpacity
-      onPress={handlePress}
+      onPress={onPress ? handlePress : undefined}
       onLongPress={onLongPress}
       disabled={disabled}
       activeOpacity={activeOpacity}

package/src/atoms/chip/AtomicChip.tsx

@@ -47,7 +47,7 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
   const isDisabled = disabled || (!clickable && !onPress);
   const opacity = isDisabled ? 0.5 : 1;
 
-  const chipStyle: ViewStyle = {
+  const chipStyle = useMemo<ViewStyle>(() => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -58,23 +58,28 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
     ...borderStyle,
     borderColor: finalBorderColor,
     ...selectedStyle,
-  };
+  }), [sizeConfig, finalBackgroundColor, opacity, borderStyle, finalBorderColor, selectedStyle]);
 
-  const textStyle = {
+  const textStyle = useMemo(() => ({
     fontSize: sizeConfig.fontSize,
     fontWeight: tokens.typography.medium,
-  };
+  }), [sizeConfig.fontSize, tokens.typography.medium]);
 
   const iconColor = finalTextColor;
 
-  const Component = (clickable && onPress && !disabled) ? TouchableOpacity : View;
-  const componentProps = (clickable && onPress && !disabled) ? { onPress, activeOpacity } : {};
+  const isInteractive = clickable && onPress && !disabled;
+  const Component = isInteractive ? TouchableOpacity : View;
+  const componentProps = isInteractive ? { onPress, activeOpacity } : {};
+  const accessibilityProps = isInteractive
+    ? { accessibilityRole: 'button' as const, accessibilityState: { selected, disabled } }
+    : {};
 
   return (
-    <Component 
-      style={[chipStyle, style]} 
+    <Component
+      style={[chipStyle, style]}
       testID={testID}
       {...componentProps}
+      {...accessibilityProps}
     >
       {leadingIcon && (
         <AtomicIcon

package/src/atoms/image/AtomicImage.tsx

@@ -19,6 +19,16 @@ export type AtomicImageProps = {
   [key: string]: any;
 };
 
+const RESIZE_MODE_MAP: Record<string, 'cover' | 'contain' | 'stretch' | 'center'> = {
+  cover: 'cover',
+  contain: 'contain',
+  fill: 'stretch',
+  none: 'center',
+  'scale-down': 'contain',
+};
+
+const ROUNDED_STYLE = { borderRadius: 9999 };
+
 export const AtomicImage: React.FC<AtomicImageProps> = ({
   style,
   rounded,
@@ -26,7 +36,7 @@ export const AtomicImage: React.FC<AtomicImageProps> = ({
   cachePolicy,
   ...props
 }) => {
-  const roundedStyle = rounded ? { borderRadius: 9999 } : undefined;
+  const roundedStyle = rounded ? ROUNDED_STYLE : undefined;
 
   if (ExpoImage) {
     return (
@@ -34,23 +44,17 @@ export const AtomicImage: React.FC<AtomicImageProps> = ({
         style={[style, roundedStyle]}
         contentFit={contentFit}
         cachePolicy={cachePolicy}
+        accessibilityRole="image"
         {...props}
       />
     );
   }
 
-  // Fallback: React Native Image
-  const resizeModeMap: Record<string, 'cover' | 'contain' | 'stretch' | 'center'> = {
-    cover: 'cover',
-    contain: 'contain',
-    fill: 'stretch',
-    none: 'center',
-    'scale-down': 'contain',
-  };
   return (
     <RNImage
       style={[style as StyleProp<ImageStyle>, roundedStyle]}
-      resizeMode={resizeModeMap[contentFit] ?? 'cover'}
+      resizeMode={RESIZE_MODE_MAP[contentFit] ?? 'cover'}
+      accessibilityRole="image"
       {...props}
     />
   );

package/src/atoms/picker/components/PickerIcons.tsx

@@ -3,7 +3,7 @@
  * Renders clear button and dropdown icon for AtomicPicker
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { AtomicIcon, useIconName } from '../../icon';
@@ -33,8 +33,14 @@ export const PickerIcons: React.FC<PickerIconsProps> = ({
   const chevronUpIcon = useIconName('chevronUp');
   const chevronDownIcon = useIconName('chevronDown');
 
+  const containerStyle = useMemo(() => ({
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    gap: tokens.spacing.xs,
+  }), [tokens.spacing.xs]);
+
   return (
-    <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
+    <View style={containerStyle}>
       {/* Clear Button */}
       {clearable && selectedOptionsCount > 0 && !disabled && (
         <TouchableOpacity

package/src/device/infrastructure/services/DeviceFeatureService.ts

@@ -112,8 +112,10 @@ export class DeviceFeatureService {
     const key = this.getStorageKey(deviceId, featureName);
     try {
       await storageRepository.setItem(key, usage);
-    } catch {
-      // Silent fail
+    } catch (error) {
+      if (__DEV__) {
+        console.warn(`[DesignSystem] DeviceFeatureService: Failed to persist usage for "${featureName}"`, error);
+      }
     }
   }
 

package/src/device/infrastructure/services/PersistentDeviceIdService.ts

@@ -99,14 +99,20 @@ export class PersistentDeviceIdService {
    */
   static async clearStoredId(): Promise<void> {
     try {
+      // Wait for pending initialization to prevent race condition
+      if (initializationPromise) {
+        await initializationPromise.catch(() => {});
+      }
       await this.secureRepo.remove();
       cachedDeviceId = null;
       initializationPromise = null;
       if (__DEV__) {
         console.log('[DesignSystem] Device ID: Stored ID cleared');
       }
-    } catch {
-      // Silent fail
+    } catch (error) {
+      if (__DEV__) {
+        console.warn('[DesignSystem] Device ID: Failed to clear stored ID', error);
+      }
     }
   }
 

package/src/device/presentation/hooks/useDeviceFeatures.ts

@@ -32,8 +32,10 @@ export function useDeviceFeatures(
     try {
       const result = await DeviceFeatureService.checkFeatureAccess(featureName);
       setAccess(result);
-    } catch {
-      // Silent fail
+    } catch (error) {
+      if (__DEV__) {
+        console.warn(`[DesignSystem] useDeviceFeatures: Failed to check access for "${featureName}"`, error);
+      }
     }
   }, [featureName]);
 
@@ -41,8 +43,10 @@ export function useDeviceFeatures(
     try {
       await DeviceFeatureService.incrementFeatureUsage(featureName);
       await checkAccess();
-    } catch {
-      // Silent fail
+    } catch (error) {
+      if (__DEV__) {
+        console.warn(`[DesignSystem] useDeviceFeatures: Failed to increment usage for "${featureName}"`, error);
+      }
     }
   }, [featureName, checkAccess]);
 

package/src/image/infrastructure/services/ImageEnhanceService.ts

@@ -36,12 +36,15 @@ export class ImageEnhanceService {
         throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'analyzeImage');
       }
 
+      if (__DEV__) {
+        console.warn('[DesignSystem] ImageEnhanceService.analyzeImage: Returning placeholder metrics. Real image analysis is not yet implemented.');
+      }
       return {
-        sharpness: Math.random() * 100,
-        brightness: Math.random() * 100,
-        contrast: Math.random() * 100,
-        colorfulness: Math.random() * 100,
-        overallQuality: Math.random() * 100,
+        sharpness: 50,
+        brightness: 50,
+        contrast: 50,
+        colorfulness: 50,
+        overallQuality: 50,
       };
     } catch (error) {
       throw ImageErrorHandler.handleUnknownError(error, 'analyzeImage');

package/src/molecules/SearchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
     View,
     TextInput,
@@ -28,10 +28,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     const searchIcon = useIconName('search');
     const closeCircleIcon = useIconName('closeCircle');
 
-    const handleClear = () => {
+    const handleClear = useCallback(() => {
         onChangeText('');
         onClear?.();
-    };
+    }, [onChangeText, onClear]);
 
     const showClear = value.length > 0 && !loading;
 

package/src/molecules/avatar/AvatarGroup.tsx

@@ -60,7 +60,7 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
     <View style={[styles.container, style]}>
       {visibleItems.map((item, index) => (
         <View
-          key={item.uri || item.name || item.icon}
+          key={item.uri || item.name || item.icon || `avatar-${index}`}
           style={[
             styles.avatarWrapper,
             index > 0 && { marginLeft: spacing },

package/src/molecules/calendar/infrastructure/services/CalendarService.ts

@@ -96,12 +96,12 @@ export class CalendarService {
   /**
    * Get weekday names
    */
-  static getWeekdayNames(): string[] {
+  static getWeekdayNames(locale?: string): string[] {
     const weekdays: string[] = [];
     for (let i = 0; i < 7; i++) {
       const date = new Date();
       date.setDate(date.getDate() - date.getDay() + i);
-      weekdays.push(date.toLocaleDateString('en-US', { weekday: 'short' }));
+      weekdays.push(date.toLocaleDateString(locale ?? undefined, { weekday: 'short' }));
     }
     return weekdays;
   }

package/src/molecules/filter-group/FilterGroup.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import { AtomicChip } from '../../atoms/chip/AtomicChip';
 import { useAppDesignTokens } from '../../theme';
@@ -16,7 +16,7 @@ export function FilterGroup<T = string>({
 }: FilterGroupProps<T>) {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: {
       flexGrow: 0,
     },
@@ -26,9 +26,8 @@ export function FilterGroup<T = string>({
       alignItems: 'center',
     },
     item: {
-      // Default styles if needed, though AtomicChip handles most
     },
-  });
+  }), [tokens.spacing.md]);
 
   return (
     <ScrollView

package/src/onboarding/presentation/hooks/useOnboardingGestures.ts

@@ -3,7 +3,7 @@
  * Handles swipe gestures for onboarding navigation
  */
 
-import { useRef, useEffect } from "react";
+import { useRef } from "react";
 import { PanResponder } from "react-native";
 
 interface UseOnboardingGesturesProps {
@@ -27,15 +27,8 @@ export const useOnboardingGestures = ({
     onBack,
   });
 
-  // Update refs on every render to ensure PanResponder has fresh values
-  useEffect(() => {
-    latestPropsRef.current = {
-      isFirstSlide,
-      isAnswerValid,
-      onNext,
-      onBack,
-    };
-  });
+  // Update ref on every render to ensure PanResponder has fresh values
+  latestPropsRef.current = { isFirstSlide, isAnswerValid, onNext, onBack };
 
   const panResponder = useRef(
     PanResponder.create({

package/src/storage/presentation/hooks/usePersistentCache.ts

@@ -101,9 +101,7 @@ export function usePersistentCache<T>(
 
   // Stabilize actions to prevent circular dependency
   const stableActionsRef = useRef(actions);
-  useEffect(() => {
-    stableActionsRef.current = actions;
-  });
+  stableActionsRef.current = actions;
 
   const loadFromStorage = useCallback(async () => {
     const currentActions = stableActionsRef.current;

package/src/storage/presentation/hooks/useStorageState.ts

@@ -5,11 +5,10 @@
  * Combines React state with automatic storage persistence
  */
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { storageRepository } from '../../infrastructure/repositories/AsyncStorageRepository';
 import { unwrap } from '../../domain/entities/StorageResult';
 import type { StorageKey } from '../../domain/value-objects/StorageKey';
-import { useAsyncOperation } from '../../../utils/hooks';
 
 /**
  * Storage State Hook
@@ -27,20 +26,33 @@ export const useStorageState = <T>(
 ): [T, (value: T) => Promise<void>, boolean] => {
   const keyString = typeof key === 'string' ? key : String(key);
   const [state, setState] = useState<T>(defaultValue);
+  const [isLoading, setIsLoading] = useState(true);
+  const isMountedRef = useRef(true);
 
-  // Load initial value from storage
-  const { data, isLoading } = useAsyncOperation<T, Error>(
-    async () => {
-      const result = await storageRepository.getItem(keyString, defaultValue);
-      return unwrap(result, defaultValue);
-    },
-    {
-      immediate: true,
-      initialData: defaultValue,
-      errorHandler: (err) => err as Error,
-      onSuccess: (value) => setState(value),
-    }
-  );
+  useEffect(() => {
+    isMountedRef.current = true;
+    setIsLoading(true);
+
+    storageRepository
+      .getItem<T>(keyString, defaultValue)
+      .then((result) => {
+        if (isMountedRef.current) {
+          setState(unwrap(result, defaultValue));
+        }
+      })
+      .catch(() => {
+        // Keep defaultValue on error
+      })
+      .finally(() => {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [keyString]);
 
   // Update state and persist to storage
   const updateState = useCallback(

package/src/tanstack/infrastructure/monitoring/DevMonitor.ts

@@ -95,6 +95,8 @@ class DevMonitorClass {
       this.cacheSubscription = null;
     }
 
+    this.stopStatsLogging();
+    this.metrics.clear();
     this.queryClient = null;
   }
 

package/src/theme/core/colors/DarkColors.ts

@@ -1,74 +1,74 @@
 /**
  * DARK THEME COLORS
- * 
- * Dark theme color palette with warm orange harmony
+ *
+ * Dark theme color palette — Forest Green & Warm Orange (MoveLog theme)
  */
 
 export const darkColors = {
-  // PRIMARY BRAND COLORS - Warm Orange & Harmony Bloom (Dark Mode)
-  primary: '#FF8C42',          // Warm Orange for dark backgrounds
-  primaryLight: '#FFA07A',     // Light Salmon
-  primaryDark: '#FF6B35',      // Vibrant Orange
-
-  secondary: '#FFCC99',        // Light Peach for dark backgrounds
-  secondaryLight: '#FFD4A3',   // Warm Beige
-  secondaryDark: '#FFB88C',    // Soft Peach
-
-  accent: '#FFB6C1',           // Light Pink (Bloom) for dark backgrounds
-  accentLight: '#FFA07A',      // Light Salmon
-  accentDark: '#FF8C69',       // Salmon
-
-  // MATERIAL DESIGN 3 - ON COLORS (Dark mode text colors)
-  onPrimary: '#000000',           // Dark text on light primary
-  onSecondary: '#000000',         // Dark text on light secondary
-  onSuccess: '#000000',           // Dark text on light success
-  onError: '#FFFFFF',             // Light text on dark error
-  onWarning: '#000000',           // Dark text on light warning
-  onInfo: '#000000',              // Dark text on light info
-  onSurface: '#E2E8F0',           // Light text on dark surface
-  onBackground: '#F1F5F9',        // Light text on dark background
-  onSurfaceDisabled: '#64748B',   // Disabled dark mode text
-  onSurfaceVariant: '#CBD5E1',    // Text on dark surface variant
-
-  // MATERIAL DESIGN 3 - CONTAINER COLORS (Dark mode containers)
-  primaryContainer: '#CC4A1F',    // Dark orange container
-  onPrimaryContainer: '#FFE4CD',  // Light text on dark primary container
-  secondaryContainer: '#CC8C5F',  // Dark peach container
-  onSecondaryContainer: '#FFF8DC', // Light text on dark secondary container
-  errorContainer: '#7F1D1D',      // Dark red container
-  onErrorContainer: '#FEE2E2',    // Light text on dark error container
-
-  // MATERIAL DESIGN 3 - OUTLINE (Dark mode outlines)
-  outline: '#475569',             // Medium gray outline for dark mode
-  outlineVariant: '#334155',      // Darker outline variant
-  outlineDisabled: '#334155',     // Disabled outline
+  // PRIMARY BRAND COLORS - Forest Green (lighter for dark backgrounds)
+  primary: '#5AAF7F',          // Lighter Forest Green for dark mode
+  primaryLight: '#6BC48F',     // Light Green
+  primaryDark: '#4A9B6F',      // Forest Green
+
+  secondary: '#FF8C42',        // Warm Orange
+  secondaryLight: '#FFA06A',   // Light Orange
+  secondaryDark: '#E57030',    // Dark Orange
+
+  accent: '#FF8C42',           // Warm Orange
+  accentLight: '#FFA06A',      // Light Orange
+  accentDark: '#E57030',       // Dark Orange
+
+  // MATERIAL DESIGN 3 - ON COLORS (Dark mode)
+  onPrimary: '#000000',
+  onSecondary: '#000000',
+  onSuccess: '#000000',
+  onError: '#FFFFFF',
+  onWarning: '#000000',
+  onInfo: '#000000',
+  onSurface: '#E2E8F0',
+  onBackground: '#F1F5F9',
+  onSurfaceDisabled: '#6C757D',
+  onSurfaceVariant: '#98989D',
+
+  // MATERIAL DESIGN 3 - CONTAINER COLORS (Dark mode)
+  primaryContainer: '#2D6B4A',    // Dark green container
+  onPrimaryContainer: '#D1F5E3',  // Light green text
+  secondaryContainer: '#CC5500',  // Dark orange container
+  onSecondaryContainer: '#FFE8D4', // Light text
+  errorContainer: '#7F1D1D',
+  onErrorContainer: '#FEE2E2',
+
+  // MATERIAL DESIGN 3 - OUTLINE (Dark mode)
+  outline: '#48484A',
+  outlineVariant: '#3A3A3C',
+  outlineDisabled: '#3A3A3C',
 
   // SEMANTIC UI COLORS (slightly lighter for dark backgrounds)
-  success: '#34D399',             // Lighter green for dark mode
-  successLight: '#34D399',
-  successDark: '#059669',
+  success: '#5AAF7F',             // Lighter green for dark mode
+  successLight: '#6BC48F',
+  successDark: '#4A9B6F',
 
   error: '#EF4444',
   errorLight: '#F87171',
   errorDark: '#DC2626',
 
-  warning: '#F59E0B',
-  warningLight: '#FBBF24',
-  warningDark: '#D97706',
+  warning: '#FFC107',
+  warningLight: '#FFD54F',
+  warningDark: '#E6A800',
 
-  info: '#FF8C42',              // Warm Orange for info (dark mode)
-  infoLight: '#FFA07A',         // Light Salmon
-  infoDark: '#FF6347',          // Tomato
+  info: '#FF8C42',
+  infoLight: '#FFA06A',
+  infoDark: '#E57030',
 
-  // SEMANTIC CONTAINER COLORS (Same as light mode for type consistency)
-  successContainer: '#D1FAE5',        // Same as light mode for type consistency
-  onSuccessContainer: '#065F46',      // Same as light mode for type consistency
-  warningContainer: '#FEF3C7',        // Same as light mode for type consistency
-  onWarningContainer: '#92400E',      // Same as light mode for type consistency
-  infoContainer: '#FFE4CD',           // Light orange container
-  onInfoContainer: '#CC4A1F',         // Text on info container
+  // SEMANTIC CONTAINER COLORS
+  successContainer: '#D1F5E3',
+  onSuccessContainer: '#2D6B4A',
+  warningContainer: '#FEF3C7',
+  onWarningContainer: '#92400E',
+  infoContainer: '#FFE8D4',
+  onInfoContainer: '#CC5500',
 
-  // GRAYSCALE PALETTE (Same as light mode for type consistency)
+  // GRAYSCALE PALETTE
   gray50: '#FAFAFA',
   gray100: '#F4F4F5',
   gray200: '#E4E4E7',
@@ -80,65 +80,65 @@ export const darkColors = {
   gray800: '#27272A',
   gray900: '#18181B',
 
-  // BACKGROUND COLORS (dark mode - true dark backgrounds)
-  backgroundPrimary: '#0F172A',      // Slate 900 - Deep dark background
-  backgroundSecondary: '#1E293B',    // Slate 800 - Slightly lighter
+  // BACKGROUND COLORS — MoveLog's signature dark palette
+  backgroundPrimary: '#1C1C1E',      // MoveLog dark root
+  backgroundSecondary: '#2C2C2E',    // MoveLog dark default
 
-  surface: '#1E293B',                // Slate 800 - Card/surface backgrounds
-  surfaceVariant: '#334155',         // Slate 700 - Variant surfaces
-  surfaceSecondary: '#334155',       // Alias for surfaceVariant
-  surfaceDisabled: '#475569',        // Slate 600 - Disabled surfaces
+  surface: '#2C2C2E',                // MoveLog backgroundDefault
+  surfaceVariant: '#3A3A3C',         // MoveLog backgroundSecondary
+  surfaceSecondary: '#3A3A3C',
+  surfaceDisabled: '#48484A',        // MoveLog backgroundTertiary
 
-  // TEXT COLORS (dark mode - light text on dark backgrounds)
-  textPrimary: '#F1F5F9',            // Slate 100 - Primary text (very light)
-  textSecondary: '#CBD5E1',          // Slate 300 - Secondary text
-  textTertiary: '#94A3B8',           // Slate 400 - Tertiary text
-  textDisabled: '#64748B',           // Slate 500 - Disabled text
-  textInverse: '#0F172A',            // Dark text for light backgrounds
+  // TEXT COLORS (dark mode)
+  textPrimary: '#FFFFFF',            // MoveLog dark text
+  textSecondary: '#98989D',          // MoveLog dark textSecondary
+  textTertiary: '#6C757D',
+  textDisabled: '#48484A',
+  textInverse: '#1C1C1E',
 
-  // BORDER COLORS (dark mode - subtle borders)
-  border: '#334155',                 // Slate 700 - Default border
-  borderLight: '#475569',            // Slate 600 - Light border
-  borderMedium: '#64748B',           // Slate 500 - Medium border
-  borderFocus: '#60A5FA',            // Blue 400 - Focus border (lighter)
-  borderDisabled: '#475569',         // Slate 600 - Disabled border
+  // BORDER COLORS (dark mode)
+  border: '#48484A',                 // MoveLog dark border
+  borderLight: '#3A3A3C',
+  borderMedium: '#636366',
+  borderFocus: '#5AAF7F',            // Green focus
+  borderDisabled: '#3A3A3C',
 
-  // COMPONENT-SPECIFIC COLORS (dark mode specific)
-  buttonPrimary: '#FF8C42',          // Warm Orange for dark mode
-  buttonSecondary: '#FFCC99',        // Light Peach for dark mode
+  // COMPONENT-SPECIFIC COLORS (dark mode)
+  buttonPrimary: '#5AAF7F',
+  buttonSecondary: '#FF8C42',
 
-  inputBackground: '#1E293B',        // Dark input background
-  inputBorder: '#475569',            // Subtle input border
+  inputBackground: '#2C2C2E',
+  inputBorder: '#48484A',
 
-  cardBackground: '#1E293B',         // Dark card background
+  cardBackground: '#2C2C2E',
 
   // COLOR ALIASES
-  text: '#F1F5F9',                    // Alias for textPrimary
-  background: '#0F172A',              // Alias for backgroundPrimary
-  card: '#1E293B',                    // Alias for cardBackground
+  text: '#FFFFFF',
+  background: '#1C1C1E',
+  card: '#2C2C2E',
 
   // SPECIAL COLORS
   transparent: 'transparent',
   black: '#000000',
   white: '#FFFFFF',
 
-  // RGBA OVERLAY COLORS (Same as light mode for type consistency)
-  modalOverlay: 'rgba(0, 0, 0, 0.5)',
+  // RGBA OVERLAY COLORS
+  modalOverlay: 'rgba(0, 0, 0, 0.7)',
   overlaySubtle: 'rgba(0, 0, 0, 0.05)',
   overlayLight: 'rgba(0, 0, 0, 0.1)',
-  overlayMedium: 'rgba(0, 0, 0, 0.3)',
-  overlayBackground: 'rgba(0, 0, 0, 0.05)',
+  overlayMedium: 'rgba(0, 0, 0, 0.4)',
+  overlayBackground: 'rgba(0, 0, 0, 0.1)',
 
   whiteOverlay: 'rgba(255, 255, 255, 0.2)',
   whiteOverlayStrong: 'rgba(255, 255, 255, 0.95)',
-  whiteOverlayBorder: 'rgba(255, 255, 255, 0.5)',
+  whiteOverlayBorder: 'rgba(255, 255, 255, 0.3)',
 
   textWhiteOpacity: 'rgba(255, 255, 255, 0.8)',
 
   errorBackground: 'rgba(239, 68, 68, 0.1)',
-  primaryBackground: 'rgba(255, 140, 66, 0.1)',  // Orange background (dark mode)
+  primaryBackground: 'rgba(90, 175, 127, 0.15)',  // Green overlay (dark mode)
 
-  cardOverlay: 'rgba(0, 0, 0, 0.15)',
+  cardOverlay: 'rgba(0, 0, 0, 0.25)',
 
-  inputBackground_RGBA: 'rgba(248, 250, 252, 0.9)',
-};
+  inputBackground_RGBA: 'rgba(44, 44, 46, 0.9)',
+};

package/src/theme/core/colors/LightColors.ts

@@ -1,128 +1,128 @@
 /**
  * LIGHT THEME COLORS
- * 
- * Light theme color palette with warm orange harmony
+ *
+ * Light theme color palette — Forest Green & Warm Orange (MoveLog theme)
  */
 
 export const lightColors = {
-  // PRIMARY BRAND COLORS - Warm Orange & Harmony Bloom
-  primary: '#FF6B35',          // Vibrant Orange
-  primaryLight: '#FF8C42',     // Warm Orange
-  primaryDark: '#FF4500',      // Orange Red
-
-  secondary: '#FFB88C',        // Soft Peach
-  secondaryLight: '#FFCC99',   // Light Peach
-  secondaryDark: '#FF8C69',    // Salmon
-
-  accent: '#FFB6C1',           // Light Pink (Bloom)
-  accentLight: '#FFA07A',      // Light Salmon
-  accentDark: '#FF8C69',       // Salmon
-
-  // MATERIAL DESIGN 3 - ON COLORS (Text on colored backgrounds)
-  onPrimary: '#FFFFFF',           // Text on primary background
-  onSecondary: '#FFFFFF',         // Text on secondary background
-  onSuccess: '#FFFFFF',           // Text on success background
-  onError: '#FFFFFF',             // Text on error background
-  onWarning: '#000000',           // Text on warning background
-  onInfo: '#FFFFFF',              // Text on info background
-  onSurface: '#1E293B',           // Text on surface
-  onBackground: '#1E293B',        // Text on background
-  onSurfaceDisabled: '#CBD5E1',   // Disabled text color
-  onSurfaceVariant: '#64748B',    // Text on surface variant
-
-  // MATERIAL DESIGN 3 - CONTAINER COLORS (Lighter versions for containers)
-  primaryContainer: '#FFE4CD',    // Light orange container
-  onPrimaryContainer: '#CC4A1F',  // Text on primary container
-  secondaryContainer: '#FFF8DC',  // Light peach container
-  onSecondaryContainer: '#CC8C5F', // Text on secondary container
-  errorContainer: '#FEE2E2',      // Light container using error
-  onErrorContainer: '#991B1B',    // Text on error container
+  // PRIMARY BRAND COLORS - Forest Green (MoveLog)
+  primary: '#4A9B6F',          // Forest Green
+  primaryLight: '#6BC48F',     // Light Green
+  primaryDark: '#3A7A5A',      // Deep Green
+
+  secondary: '#FF8C42',        // Warm Orange (accent)
+  secondaryLight: '#FFA06A',   // Light Orange
+  secondaryDark: '#E57030',    // Dark Orange
+
+  accent: '#FF8C42',           // Warm Orange
+  accentLight: '#FFA06A',      // Light Orange
+  accentDark: '#E57030',       // Dark Orange
+
+  // MATERIAL DESIGN 3 - ON COLORS
+  onPrimary: '#FFFFFF',
+  onSecondary: '#FFFFFF',
+  onSuccess: '#FFFFFF',
+  onError: '#FFFFFF',
+  onWarning: '#000000',
+  onInfo: '#FFFFFF',
+  onSurface: '#1C1C1E',
+  onBackground: '#1C1C1E',
+  onSurfaceDisabled: '#C7C7CC',
+  onSurfaceVariant: '#6C757D',
+
+  // MATERIAL DESIGN 3 - CONTAINER COLORS
+  primaryContainer: '#D1F5E3',    // Light green container
+  onPrimaryContainer: '#2D6B4A',  // Dark green text
+  secondaryContainer: '#FFE8D4',  // Light orange container
+  onSecondaryContainer: '#CC5500', // Dark orange text
+  errorContainer: '#FEE2E2',
+  onErrorContainer: '#991B1B',
 
   // MATERIAL DESIGN 3 - OUTLINE
-  outline: '#CBD5E1',             // Default outline color
-  outlineVariant: '#E2E8F0',      // Lighter outline variant
-  outlineDisabled: '#E2E8F0',     // Disabled outline color
+  outline: '#C7C7CC',
+  outlineVariant: '#E5E5EA',
+  outlineDisabled: '#E5E5EA',
 
   // SEMANTIC UI COLORS
-  success: '#10B981',
-  successLight: '#34D399',
-  successDark: '#059669',
-
-  error: '#EF4444',
-  errorLight: '#F87171',
-  errorDark: '#DC2626',
-
-  warning: '#F59E0B',
-  warningLight: '#FBBF24',
-  warningDark: '#D97706',
-
-  info: '#FF8C42',              // Warm Orange for info
-  infoLight: '#FFA07A',         // Light Salmon
-  infoDark: '#FF6347',          // Tomato
-
-  // SEMANTIC CONTAINER COLORS (Light mode)
-  successContainer: '#D1FAE5',        // Light container for success states
-  onSuccessContainer: '#065F46',      // Text on success container
-  warningContainer: '#FEF3C7',        // Light container for warning states
-  onWarningContainer: '#92400E',      // Text on warning container
-  infoContainer: '#FFE4CD',           // Light orange container for info states
-  onInfoContainer: '#CC4A1F',         // Text on info container
+  success: '#4A9B6F',             // Forest Green (same as primary)
+  successLight: '#6BC48F',
+  successDark: '#3A7A5A',
+
+  error: '#DC3545',
+  errorLight: '#E87070',
+  errorDark: '#B02A37',
+
+  warning: '#FFC107',
+  warningLight: '#FFD54F',
+  warningDark: '#E6A800',
+
+  info: '#FF8C42',                // Warm Orange for info
+  infoLight: '#FFA06A',
+  infoDark: '#E57030',
+
+  // SEMANTIC CONTAINER COLORS
+  successContainer: '#D1F5E3',
+  onSuccessContainer: '#2D6B4A',
+  warningContainer: '#FFF8DC',
+  onWarningContainer: '#92400E',
+  infoContainer: '#FFE8D4',
+  onInfoContainer: '#CC5500',
 
   // GRAYSCALE PALETTE
   gray50: '#FAFAFA',
   gray100: '#F4F4F5',
-  gray200: '#E4E4E7',
-  gray300: '#D4D4D8',
-  gray400: '#A1A1AA',
-  gray500: '#71717A',
-  gray600: '#52525B',
-  gray700: '#3F3F46',
-  gray800: '#27272A',
-  gray900: '#18181B',
-
-  // BACKGROUND COLORS
+  gray200: '#E5E5EA',
+  gray300: '#D1D1D6',
+  gray400: '#AEAEB2',
+  gray500: '#8E8E93',
+  gray600: '#636366',
+  gray700: '#48484A',
+  gray800: '#3A3A3C',
+  gray900: '#1C1C1E',
+
+  // BACKGROUND COLORS — clean iOS-style whites
   backgroundPrimary: '#FFFFFF',
-  backgroundSecondary: '#F8FAFC',
+  backgroundSecondary: '#F8F9FA',
 
   surface: '#FFFFFF',
-  surfaceVariant: '#F1F5F9',
-  surfaceSecondary: '#F1F5F9', // Alias
-  surfaceDisabled: '#F4F4F5',     // Disabled surface color
+  surfaceVariant: '#F2F2F7',
+  surfaceSecondary: '#F2F2F7',
+  surfaceDisabled: '#F4F4F4',
 
   // TEXT COLORS
-  textPrimary: '#1E293B',
-  textSecondary: '#64748B',
-  textTertiary: '#94A3B8',
-  textDisabled: '#CBD5E1',
+  textPrimary: '#1C1C1E',
+  textSecondary: '#6C757D',
+  textTertiary: '#98989D',
+  textDisabled: '#C7C7CC',
   textInverse: '#FFFFFF',
 
   // BORDER COLORS
-  border: '#E2E8F0',
-  borderLight: '#F1F5F9',
-  borderMedium: '#CBD5E1',
-  borderFocus: '#3B82F6',
-  borderDisabled: '#F1F5F9',
+  border: '#E5E5EA',
+  borderLight: '#F2F2F7',
+  borderMedium: '#C7C7CC',
+  borderFocus: '#4A9B6F',
+  borderDisabled: '#F2F2F7',
 
   // COMPONENT-SPECIFIC COLORS
-  buttonPrimary: '#FF6B35',        // Vibrant Orange
-  buttonSecondary: '#FFB88C',      // Soft Peach
+  buttonPrimary: '#4A9B6F',
+  buttonSecondary: '#FF8C42',
 
   inputBackground: '#FFFFFF',
-  inputBorder: '#E2E8F0',
+  inputBorder: '#E5E5EA',
 
   cardBackground: '#FFFFFF',
 
   // COLOR ALIASES
-  text: '#1E293B',                    // Alias for textPrimary
-  background: '#FFFFFF',              // Alias for backgroundPrimary
-  card: '#FFFFFF',                    // Alias for cardBackground
+  text: '#1C1C1E',
+  background: '#FFFFFF',
+  card: '#FFFFFF',
 
   // SPECIAL COLORS
   transparent: 'transparent',
   black: '#000000',
   white: '#FFFFFF',
 
-  // RGBA OVERLAY COLORS (for modals, cards, etc.)
+  // RGBA OVERLAY COLORS
   modalOverlay: 'rgba(0, 0, 0, 0.5)',
   overlaySubtle: 'rgba(0, 0, 0, 0.05)',
   overlayLight: 'rgba(0, 0, 0, 0.1)',
@@ -135,10 +135,10 @@ export const lightColors = {
 
   textWhiteOpacity: 'rgba(255, 255, 255, 0.8)',
 
-  errorBackground: 'rgba(239, 68, 68, 0.1)',
-  primaryBackground: 'rgba(255, 107, 53, 0.1)',  // Orange background
+  errorBackground: 'rgba(220, 53, 69, 0.1)',
+  primaryBackground: 'rgba(74, 155, 111, 0.1)',  // Green background
 
-  cardOverlay: 'rgba(0, 0, 0, 0.15)',
+  cardOverlay: 'rgba(0, 0, 0, 0.08)',
 
-  inputBackground_RGBA: 'rgba(248, 250, 252, 0.9)',
-};
+  inputBackground_RGBA: 'rgba(248, 249, 250, 0.9)',
+};

package/src/theme/infrastructure/stores/themeStore.ts

@@ -103,9 +103,18 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
     },
 
     setCustomColors: async (colors?: CustomThemeColors) => {
-      set({ customColors: colors });
-      await ThemeStorage.setCustomColors(colors);
-      useDesignSystemTheme.getState().setCustomColors(colors);
+      const { _updateInProgress } = get();
+      if (_updateInProgress) return;
+      set({ _updateInProgress: true, customColors: colors });
+
+      try {
+        await ThemeStorage.setCustomColors(colors);
+        useDesignSystemTheme.getState().setCustomColors(colors);
+      } catch {
+        // Silent failure
+      } finally {
+        set({ _updateInProgress: false });
+      }
     },
 
     setDefaultColors: (colors: CustomThemeColors) => {

package/src/timezone/infrastructure/utils/SimpleCache.ts

@@ -14,6 +14,7 @@ export class SimpleCache<T> {
   private cache = new Map<string, CacheEntry<T>>();
   private defaultTTL: number;
   private cleanupTimeout: ReturnType<typeof setTimeout> | null = null;
+  private destroyed = false;
 
   constructor(defaultTTL: number = 60000) {
     this.defaultTTL = defaultTTL;
@@ -24,6 +25,7 @@ export class SimpleCache<T> {
    * Destroy the cache and stop cleanup timer
    */
   destroy(): void {
+    this.destroyed = true;
     if (this.cleanupTimeout) {
       clearTimeout(this.cleanupTimeout);
       this.cleanupTimeout = null;
@@ -32,6 +34,7 @@ export class SimpleCache<T> {
   }
 
   set(key: string, value: T, ttl?: number): void {
+    if (this.destroyed) return;
     const expires = Date.now() + (ttl ?? this.defaultTTL);
     this.cache.set(key, { value, expires });
   }
@@ -73,6 +76,8 @@ export class SimpleCache<T> {
   }
 
   private scheduleCleanup(): void {
+    if (this.destroyed) return;
+
     if (this.cleanupTimeout) {
       clearTimeout(this.cleanupTimeout);
     }

package/src/utils/hooks/useAsyncOperation.ts

@@ -79,13 +79,10 @@ export function useAsyncOperation<T, E = Error>(
   const operationRef = useRef(operation);
   const errorHandlerRef = useRef(errorHandler);
 
-  useEffect(() => {
-    onSuccessRef.current = onSuccess;
-    onErrorRef.current = onError;
-    onFinallyRef.current = onFinally;
-  }, [onSuccess, onError, onFinally]);
-
-  // Keep operation and errorHandler in refs so execute doesn't need them as deps
+  // Keep all callback refs in sync with latest values
+  onSuccessRef.current = onSuccess;
+  onErrorRef.current = onError;
+  onFinallyRef.current = onFinally;
   operationRef.current = operation;
   errorHandlerRef.current = errorHandler;