@umituz/react-native-design-system 4.25.94 → 4.25.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.94",
+  "version": "4.25.96",
   "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/molecules/icon-grid/IconGrid.tsx

@@ -0,0 +1,149 @@
+/**
+ * IconGrid - Reusable icon card grid
+ *
+ * Self-measuring grid that calculates item widths from actual container width.
+ * Works correctly inside ScreenLayout (or any padded container) without needing
+ * to know the parent's padding upfront.
+ */
+
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import { AtomicIcon } from '../../atoms';
+import { AtomicText } from '../../atoms';
+import type { IconName } from '../../atoms';
+
+export interface IconGridItem {
+  /** Unique identifier */
+  id: string;
+  /** Label shown below the icon */
+  label: string;
+  /** Icon name (AtomicIcon / Lucide-based) */
+  icon: IconName;
+  /** Called when the card is tapped */
+  onPress: () => void;
+}
+
+export interface IconGridProps {
+  /** Items to display */
+  items: IconGridItem[];
+  /** Number of columns (default: 3) */
+  columns?: number;
+  /** Gap between items in pixels (default: 10) */
+  gap?: number;
+  /** Vertical gap between rows (default: same as gap) */
+  rowGap?: number;
+  /** Optional container style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A self-sizing icon card grid.
+ *
+ * @example
+ * ```tsx
+ * <IconGrid
+ *   columns={3}
+ *   items={[
+ *     { id: 'aging', label: 'Aging', icon: 'flash', onPress: () => navigate('Aging') },
+ *     { id: 'wardrobe', label: 'Wardrobe', icon: 'shirt', onPress: () => navigate('Wardrobe') },
+ *   ]}
+ * />
+ * ```
+ */
+export const IconGrid: React.FC<IconGridProps> = ({
+  items,
+  columns = 3,
+  gap = 10,
+  rowGap,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const { width } = e.nativeEvent.layout;
+      if (width > 0 && width !== containerWidth) {
+        setContainerWidth(width);
+      }
+    },
+    [containerWidth],
+  );
+
+  // Total gap space between columns (N columns = N-1 gaps)
+  const itemWidth = useMemo(() => {
+    if (containerWidth <= 0) return 0;
+    const totalGap = gap * (columns - 1);
+    // Subtract 1px safety margin to prevent sub-pixel wrapping
+    return Math.floor((containerWidth - totalGap) / columns) - 1;
+  }, [containerWidth, columns, gap]);
+
+  const { cardBackground, borderLight, textPrimary } = tokens.colors;
+
+  return (
+    <View
+      style={[styles.grid, { columnGap: gap, rowGap: rowGap ?? gap }, style]}
+      onLayout={handleLayout}
+    >
+      {items.map((item) =>
+        itemWidth > 0 ? (
+          <TouchableOpacity
+            key={item.id}
+            activeOpacity={0.7}
+            onPress={item.onPress}
+            style={[styles.card, { width: itemWidth }]}
+          >
+            <View
+              style={[
+                styles.iconBox,
+                { width: itemWidth, backgroundColor: cardBackground, borderColor: borderLight },
+              ]}
+            >
+              <AtomicIcon name={item.icon} size="lg" color="textPrimary" />
+            </View>
+            <AtomicText
+              style={[styles.label, { color: textPrimary }]}
+              numberOfLines={1}
+            >
+              {item.label}
+            </AtomicText>
+          </TouchableOpacity>
+        ) : (
+          // Placeholder — keeps grid stable before first layout measurement
+          <View key={item.id} style={{ width: 0, height: 0 }} />
+        ),
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  card: {
+    alignItems: 'center',
+    gap: 8,
+  },
+  iconBox: {
+    aspectRatio: 1,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+});

package/src/molecules/icon-grid/index.ts

@@ -0,0 +1 @@
+export { IconGrid, type IconGridItem, type IconGridProps } from './IconGrid';

package/src/molecules/index.ts

@@ -65,3 +65,5 @@ export * from './info-grid';
 
 
 export * from './circular-menu';
+
+export * from './icon-grid';

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/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;