@shaykec/app-agent 1.0.9 → 1.0.10

package/templates/react-native/ChatTemplate/src/animation/useAnimatedList.ts

@@ -1,5 +1,5 @@
-import { useRef, useEffect } from 'react';
-import { Animated } from 'react-native';
+import { useRef, useEffect, useCallback } from 'react';
+import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
 import { useMotionPreferences } from './useMotionPreferences';
 
 /**
@@ -39,6 +39,7 @@ export function useStaggeredAppear(index: number) {
 
   return {
     opacity,
+    translateY,
     transform: [{ translateY }],
   };
 }
@@ -78,6 +79,7 @@ export function useSlideIn(delay: number = 0) {
 
   return {
     opacity,
+    translateY,
     transform: [{ translateY }],
   };
 }
@@ -118,3 +120,218 @@ export function useBounceScale(trigger: boolean) {
     transform: [{ scale }],
   };
 }
+
+/**
+ * Hook for scale-down press feedback on tappable elements.
+ * Returns animated style + press handlers to spread on Pressable.
+ */
+export function useScaleOnPress(scaleValue: number = 0.95) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const onPressIn = useCallback(() => {
+    if (shouldSkipAnimation) return;
+    Animated.spring(scale, {
+      toValue: scaleValue,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  }, [shouldSkipAnimation, scale, scaleValue]);
+
+  const onPressOut = useCallback(() => {
+    if (shouldSkipAnimation) return;
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  }, [shouldSkipAnimation, scale]);
+
+  return {
+    style: { transform: [{ scale }] },
+    onPressIn,
+    onPressOut,
+  };
+}
+
+/**
+ * Hook for slide-from-side + fade-in animation on appear.
+ */
+export function useSlideAndFade(delay: number = 0) {
+  const { shouldAnimate, shouldSkipAnimation } = useMotionPreferences();
+  const opacity = useRef(new Animated.Value(shouldSkipAnimation ? 1 : 0)).current;
+  const translateX = useRef(new Animated.Value(shouldSkipAnimation ? 0 : 20)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) {
+      opacity.setValue(1);
+      translateX.setValue(0);
+      return;
+    }
+
+    const duration = shouldAnimate ? 400 : 200;
+
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration,
+        delay,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateX, {
+        toValue: 0,
+        duration,
+        delay,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [delay, shouldAnimate, shouldSkipAnimation, opacity, translateX]);
+
+  return {
+    opacity,
+    transform: [{ translateX }],
+  };
+}
+
+/**
+ * Card shadow style for cards and elevated surfaces.
+ * Uses platform-specific shadow implementation.
+ */
+export function cardShadowStyle(color: string = '#000000'): ViewStyle {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 4,
+    },
+    default: {
+      elevation: 4,
+    },
+  }) as ViewStyle;
+}
+
+/**
+ * Elevated shadow style for FABs and floating elements.
+ */
+export function elevatedShadowStyle(color: string = '#000000'): ViewStyle {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.12,
+      shadowRadius: 16,
+    },
+    android: {
+      elevation: 8,
+    },
+    default: {
+      elevation: 8,
+    },
+  }) as ViewStyle;
+}
+
+/**
+ * Hook for shimmer/skeleton loading animation.
+ * Returns an animated opacity style that pulses for loading placeholders.
+ */
+export function useShimmer(durationMs: number = 1500) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const opacity = useRef(new Animated.Value(shouldSkipAnimation ? 1 : 0.3)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) {
+      opacity.setValue(1);
+      return;
+    }
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: durationMs / 2,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.3,
+          duration: durationMs / 2,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [durationMs, shouldSkipAnimation, opacity]);
+
+  return { opacity };
+}
+
+/**
+ * Hook for repeating pulse scale animation (notifications, live indicators).
+ */
+export function usePulse(intensity: number = 0.05) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) return;
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(scale, {
+          toValue: 1 + intensity,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [intensity, shouldSkipAnimation, scale]);
+
+  return { transform: [{ scale }] };
+}
+
+/**
+ * Hook for heart/like bounce effect when toggled active.
+ * Scales up to 1.3x then springs back.
+ */
+export function useHeartBounce(isActive: boolean) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+  const prevActive = useRef(isActive);
+
+  useEffect(() => {
+    if (isActive && !prevActive.current && !shouldSkipAnimation) {
+      Animated.sequence([
+        Animated.spring(scale, {
+          toValue: 1.3,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 12,
+        }),
+        Animated.spring(scale, {
+          toValue: 1,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 12,
+        }),
+      ]).start();
+    }
+    prevActive.current = isActive;
+  }, [isActive, shouldSkipAnimation, scale]);
+
+  return { transform: [{ scale }] };
+}

package/templates/react-native/ChatTemplate/src/animation/useMotionPreferences.ts

@@ -1,9 +1,17 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { AccessibilityInfo } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const INTENSITY_STORAGE_KEY = '@motion_preferences_intensity';
 
+// Safely load AsyncStorage — the native module may not be available on all
+// simulator runtimes (e.g. iOS 26 beta). Fall back to in-memory storage.
+let _asyncStorage: any = null;
+try {
+  _asyncStorage = require('@react-native-async-storage/async-storage').default;
+} catch (_) {
+  // Native module unavailable — preferences won't persist across restarts.
+}
+
 export type AnimationIntensity = 'full' | 'reduced' | 'off';
 
 export interface UseMotionPreferencesReturn {
@@ -25,12 +33,14 @@ export function useMotionPreferences(): UseMotionPreferencesReturn {
   const [animationIntensity, setIntensityState] = useState<AnimationIntensity>('full');
 
   useEffect(() => {
-    // Load persisted preference
-    AsyncStorage.getItem(INTENSITY_STORAGE_KEY).then((stored: string | null) => {
-      if (stored === 'full' || stored === 'reduced' || stored === 'off') {
-        setIntensityState(stored);
-      }
-    }).catch(() => {});
+    // Load persisted preference (skip if AsyncStorage unavailable)
+    if (_asyncStorage) {
+      _asyncStorage.getItem(INTENSITY_STORAGE_KEY).then((stored: string | null) => {
+        if (stored === 'full' || stored === 'reduced' || stored === 'off') {
+          setIntensityState(stored);
+        }
+      }).catch(() => {});
+    }
 
     // Check system Reduce Motion
     AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
@@ -51,10 +61,14 @@ export function useMotionPreferences(): UseMotionPreferencesReturn {
 
   const setAnimationIntensity = useCallback(async (intensity: AnimationIntensity) => {
     try {
-      await AsyncStorage.setItem(INTENSITY_STORAGE_KEY, intensity);
+      if (_asyncStorage) {
+        await _asyncStorage.setItem(INTENSITY_STORAGE_KEY, intensity);
+      }
       setIntensityState(intensity);
     } catch (error) {
-      console.error('Failed to save motion preference:', error);
+      // Still update in-memory state even if persistence fails
+      setIntensityState(intensity);
+      console.warn('Failed to save motion preference:', error);
     }
   }, []);
 

package/templates/react-native/ChatTemplate/src/screens/Profile/ProfileScreen.tsx

@@ -61,7 +61,7 @@ const ProfileScreen: React.FC = () => {
               accessibilityRole="button"
               accessibilityLabel="Animations settings"
               style={styles.row}
-              onPress={() => navigation.navigate('MotionPreferences' as any)}>
+              onPress={() => (navigation as any).navigate('MotionPreferences')}>
               <Text style={[styles.rowLabel, {color: colors.primaryText, fontSize: typography.body}]}>
                 Animations
               </Text>

package/templates/react-native/DashTemplate/src/animation/useAnimatedList.ts

@@ -1,5 +1,5 @@
-import { useRef, useEffect } from 'react';
-import { Animated } from 'react-native';
+import { useRef, useEffect, useCallback } from 'react';
+import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
 import { useMotionPreferences } from './useMotionPreferences';
 
 /**
@@ -39,6 +39,7 @@ export function useStaggeredAppear(index: number) {
 
   return {
     opacity,
+    translateY,
     transform: [{ translateY }],
   };
 }
@@ -78,6 +79,7 @@ export function useSlideIn(delay: number = 0) {
 
   return {
     opacity,
+    translateY,
     transform: [{ translateY }],
   };
 }
@@ -118,3 +120,218 @@ export function useBounceScale(trigger: boolean) {
     transform: [{ scale }],
   };
 }
+
+/**
+ * Hook for scale-down press feedback on tappable elements.
+ * Returns animated style + press handlers to spread on Pressable.
+ */
+export function useScaleOnPress(scaleValue: number = 0.95) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const onPressIn = useCallback(() => {
+    if (shouldSkipAnimation) return;
+    Animated.spring(scale, {
+      toValue: scaleValue,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  }, [shouldSkipAnimation, scale, scaleValue]);
+
+  const onPressOut = useCallback(() => {
+    if (shouldSkipAnimation) return;
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  }, [shouldSkipAnimation, scale]);
+
+  return {
+    style: { transform: [{ scale }] },
+    onPressIn,
+    onPressOut,
+  };
+}
+
+/**
+ * Hook for slide-from-side + fade-in animation on appear.
+ */
+export function useSlideAndFade(delay: number = 0) {
+  const { shouldAnimate, shouldSkipAnimation } = useMotionPreferences();
+  const opacity = useRef(new Animated.Value(shouldSkipAnimation ? 1 : 0)).current;
+  const translateX = useRef(new Animated.Value(shouldSkipAnimation ? 0 : 20)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) {
+      opacity.setValue(1);
+      translateX.setValue(0);
+      return;
+    }
+
+    const duration = shouldAnimate ? 400 : 200;
+
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration,
+        delay,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateX, {
+        toValue: 0,
+        duration,
+        delay,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [delay, shouldAnimate, shouldSkipAnimation, opacity, translateX]);
+
+  return {
+    opacity,
+    transform: [{ translateX }],
+  };
+}
+
+/**
+ * Card shadow style for cards and elevated surfaces.
+ * Uses platform-specific shadow implementation.
+ */
+export function cardShadowStyle(color: string = '#000000'): ViewStyle {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 4,
+    },
+    default: {
+      elevation: 4,
+    },
+  }) as ViewStyle;
+}
+
+/**
+ * Elevated shadow style for FABs and floating elements.
+ */
+export function elevatedShadowStyle(color: string = '#000000'): ViewStyle {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.12,
+      shadowRadius: 16,
+    },
+    android: {
+      elevation: 8,
+    },
+    default: {
+      elevation: 8,
+    },
+  }) as ViewStyle;
+}
+
+/**
+ * Hook for shimmer/skeleton loading animation.
+ * Returns an animated opacity style that pulses for loading placeholders.
+ */
+export function useShimmer(durationMs: number = 1500) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const opacity = useRef(new Animated.Value(shouldSkipAnimation ? 1 : 0.3)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) {
+      opacity.setValue(1);
+      return;
+    }
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: durationMs / 2,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.3,
+          duration: durationMs / 2,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [durationMs, shouldSkipAnimation, opacity]);
+
+  return { opacity };
+}
+
+/**
+ * Hook for repeating pulse scale animation (notifications, live indicators).
+ */
+export function usePulse(intensity: number = 0.05) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) return;
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(scale, {
+          toValue: 1 + intensity,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [intensity, shouldSkipAnimation, scale]);
+
+  return { transform: [{ scale }] };
+}
+
+/**
+ * Hook for heart/like bounce effect when toggled active.
+ * Scales up to 1.3x then springs back.
+ */
+export function useHeartBounce(isActive: boolean) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+  const prevActive = useRef(isActive);
+
+  useEffect(() => {
+    if (isActive && !prevActive.current && !shouldSkipAnimation) {
+      Animated.sequence([
+        Animated.spring(scale, {
+          toValue: 1.3,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 12,
+        }),
+        Animated.spring(scale, {
+          toValue: 1,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 12,
+        }),
+      ]).start();
+    }
+    prevActive.current = isActive;
+  }, [isActive, shouldSkipAnimation, scale]);
+
+  return { transform: [{ scale }] };
+}

package/templates/react-native/DashTemplate/src/animation/useMotionPreferences.ts

@@ -1,9 +1,17 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { AccessibilityInfo } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const INTENSITY_STORAGE_KEY = '@motion_preferences_intensity';
 
+// Safely load AsyncStorage — the native module may not be available on all
+// simulator runtimes (e.g. iOS 26 beta). Fall back to in-memory storage.
+let _asyncStorage: any = null;
+try {
+  _asyncStorage = require('@react-native-async-storage/async-storage').default;
+} catch (_) {
+  // Native module unavailable — preferences won't persist across restarts.
+}
+
 export type AnimationIntensity = 'full' | 'reduced' | 'off';
 
 export interface UseMotionPreferencesReturn {
@@ -25,12 +33,14 @@ export function useMotionPreferences(): UseMotionPreferencesReturn {
   const [animationIntensity, setIntensityState] = useState<AnimationIntensity>('full');
 
   useEffect(() => {
-    // Load persisted preference
-    AsyncStorage.getItem(INTENSITY_STORAGE_KEY).then((stored: string | null) => {
-      if (stored === 'full' || stored === 'reduced' || stored === 'off') {
-        setIntensityState(stored);
-      }
-    }).catch(() => {});
+    // Load persisted preference (skip if AsyncStorage unavailable)
+    if (_asyncStorage) {
+      _asyncStorage.getItem(INTENSITY_STORAGE_KEY).then((stored: string | null) => {
+        if (stored === 'full' || stored === 'reduced' || stored === 'off') {
+          setIntensityState(stored);
+        }
+      }).catch(() => {});
+    }
 
     // Check system Reduce Motion
     AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
@@ -51,10 +61,14 @@ export function useMotionPreferences(): UseMotionPreferencesReturn {
 
   const setAnimationIntensity = useCallback(async (intensity: AnimationIntensity) => {
     try {
-      await AsyncStorage.setItem(INTENSITY_STORAGE_KEY, intensity);
+      if (_asyncStorage) {
+        await _asyncStorage.setItem(INTENSITY_STORAGE_KEY, intensity);
+      }
       setIntensityState(intensity);
     } catch (error) {
-      console.error('Failed to save motion preference:', error);
+      // Still update in-memory state even if persistence fails
+      setIntensityState(intensity);
+      console.warn('Failed to save motion preference:', error);
     }
   }, []);
 

package/templates/react-native/DashTemplate/src/screens/Profile/ProfileScreen.tsx

@@ -61,7 +61,7 @@ const ProfileScreen: React.FC = () => {
               accessibilityRole="button"
               accessibilityLabel="Animations settings"
               style={styles.row}
-              onPress={() => navigation.navigate('MotionPreferences' as any)}>
+              onPress={() => (navigation as any).navigate('MotionPreferences')}>
               <Text style={[styles.rowLabel, {color: colors.primaryText, fontSize: typography.body}]}>
                 Animations
               </Text>