@umituz/react-native-ai-generation-content 1.83.40 → 1.83.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.83.40",
+  "version": "1.83.42",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/creations/presentation/components/GalleryEmptyStates.tsx

@@ -23,7 +23,7 @@ interface GalleryEmptyStatesProps {
 }
 
 /** Skeleton card matching CreationCard layout */
-function CreationCardSkeleton({ tokens }: { tokens: DesignTokens }) {
+const CreationCardSkeleton: React.FC<{ tokens: DesignTokens }> = ({ tokens }) => {
     const styles = createSkeletonStyles(tokens);
     return (
         <View style={styles.card}>
@@ -52,7 +52,7 @@ function CreationCardSkeleton({ tokens }: { tokens: DesignTokens }) {
     );
 }
 
-export function GalleryEmptyStates({
+export const GalleryEmptyStates: React.FC<GalleryEmptyStatesProps> = ({
     isLoading,
     creations,
     isFiltered,
@@ -63,7 +63,7 @@ export function GalleryEmptyStates({
     emptyActionLabel,
     onEmptyAction,
     onClearFilters,
-}: GalleryEmptyStatesProps) {
+}) => {
     const styles = createStyles(tokens);
 
     // 1. Loading State - Show skeleton cards

package/src/domains/creations/presentation/hooks/useCreations.ts

@@ -69,10 +69,22 @@ export function useCreations({
     setIsLoading(true);
     setError(null);
 
-    const unsubscribe = repository.subscribeToAll(userId, onDataCallback, onErrorCallback);
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const handleData = (creations: Creation[]) => {
+      clearTimeout(timeoutId);
+      onDataCallback(creations);
+    };
+
+    const handleError = (err: Error) => {
+      clearTimeout(timeoutId);
+      onErrorCallback(err);
+    };
+
+    const unsubscribe = repository.subscribeToAll(userId, handleData, handleError);
 
     // Fallback timeout: if Firestore doesn't respond in 10s, stop loading
-    const timeoutId = setTimeout(() => {
+    timeoutId = setTimeout(() => {
       if (!isMounted) return;
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.warn("[useCreations] Loading timeout - setting empty state");

package/src/domains/image-to-video/presentation/components/GridImageItem.tsx

@@ -19,12 +19,12 @@ interface GridImageItemProps {
   onRemove: () => void;
 }
 
-export function GridImageItem({
+export const GridImageItem: React.FC<GridImageItemProps> = ({
   styles,
   uri,
   index,
   onRemove,
-}: GridImageItemProps) {
+}) => {
   const tokens = useAppDesignTokens();
 
   return (

package/src/domains/scenarios/presentation/containers/CategoryNavigationContainer.tsx

@@ -24,7 +24,6 @@ export interface CategoryNavigationContainerProps {
   readonly t: (key: string) => string;
   readonly headerTitle?: string;
   readonly headerDescription?: string;
-  readonly numColumns?: number;
   readonly isLoading?: boolean;
 }
 
@@ -41,7 +40,6 @@ export const CategoryNavigationContainer: React.FC<
   t,
   headerTitle,
   headerDescription,
-  numColumns = 2,
   isLoading = false,
 }) => {
   const [currentStep, setCurrentStep] = useState<NavigationStep>("main_category");
@@ -107,7 +105,6 @@ export const CategoryNavigationContainer: React.FC<
         onSelectScenario={onSelectScenario}
         onBack={handleBackFromScenarioList}
         t={t}
-        numColumns={numColumns}
         isLoading={isLoading}
       />
     );

package/src/domains/scenarios/presentation/screens/HierarchicalScenarioListScreen.tsx

@@ -9,7 +9,6 @@ import {
   AtomicText,
   AtomicCard,
   useAppDesignTokens,
-  useResponsive,
   ScreenLayout,
   NavigationHeader,
   AtomicSpinner,
@@ -28,7 +27,6 @@ interface HierarchicalScenarioListScreenProps {
   readonly onSelectScenario: (scenarioId: string) => void;
   readonly onBack: () => void;
   readonly t: (key: string) => string;
-  readonly numColumns?: number;
   readonly isLoading?: boolean;
 }
 
@@ -39,12 +37,10 @@ export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListSc
   onSelectScenario,
   onBack,
   t,
-  numColumns = 2,
   isLoading = false,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
-  const { width } = useResponsive();
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
   const { subCategory, filteredScenarios } = useHierarchicalScenarios({
@@ -56,14 +52,9 @@ export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListSc
   const horizontalPadding = tokens.spacing.md;
   const cardSpacing = tokens.spacing.md;
 
-  const cardWidth = useMemo(() => {
-    const availableWidth = width - horizontalPadding * 2 - cardSpacing;
-    return availableWidth / numColumns;
-  }, [width, horizontalPadding, cardSpacing, numColumns]);
-
   const styles = useMemo(
-    () => createStyles(tokens, cardSpacing, horizontalPadding),
-    [tokens, cardSpacing, horizontalPadding]
+    () => createStyles(tokens, cardSpacing),
+    [tokens, cardSpacing]
   );
 
   const handleContinue = useCallback(() => {
@@ -82,12 +73,12 @@ export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListSc
         subtitle={t(`scenario.${item.id}.description`)}
         imageAspectRatio={1.25}
         selected={selectedId === item.id}
-        style={{ width: cardWidth }}
+        style={{ width: "100%" }}
         onPress={() => handleCardPress(item.id)}
         testID={`scenario-card-${item.id}`}
       />
     ),
-    [cardWidth, selectedId, t, handleCardPress]
+    [selectedId, t, handleCardPress]
   );
 
   const ListEmptyComponent = useMemo(
@@ -131,13 +122,14 @@ export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListSc
       <ScreenLayout scrollable={false} edges={["left", "right"]} backgroundColor={tokens.colors.backgroundPrimary}>
         <FlatList
           data={filteredScenarios}
-          numColumns={numColumns}
           showsVerticalScrollIndicator={false}
-          columnWrapperStyle={styles.row}
           renderItem={renderItem}
           keyExtractor={(item) => item.id}
           ListEmptyComponent={isLoading ? LoadingComponent : (filteredScenarios.length === 0 ? ListEmptyComponent : null)}
-          contentContainerStyle={[styles.listContent, { paddingBottom: insets.bottom + 100 }]}
+          contentContainerStyle={[
+            styles.listContent,
+            { paddingHorizontal: horizontalPadding, paddingBottom: insets.bottom + 100 }
+          ]}
           removeClippedSubviews
           maxToRenderPerBatch={10}
           updateCellsBatchingPeriod={50}
@@ -149,11 +141,10 @@ export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListSc
   );
 };
 
-const createStyles = (tokens: DesignTokens, cardSpacing: number, horizontalPadding: number) =>
+const createStyles = (tokens: DesignTokens, cardSpacing: number) =>
   StyleSheet.create({
     container: { flex: 1 },
-    listContent: { paddingTop: tokens.spacing.sm, flexGrow: 1 },
-    row: { gap: cardSpacing, marginBottom: cardSpacing, paddingHorizontal: horizontalPadding },
+    listContent: { paddingTop: tokens.spacing.sm, gap: cardSpacing, flexGrow: 1 },
     emptyState: { flex: 1, justifyContent: "center", alignItems: "center", paddingVertical: tokens.spacing.xl },
     loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center", paddingVertical: tokens.spacing.xl },
   });

package/src/domains/scenarios/presentation/screens/ScenarioPreviewScreen.tsx

@@ -40,6 +40,9 @@ export const ScenarioPreviewScreen: React.FC<ScenarioPreviewScreenProps> = ({
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => createStyles(tokens), [tokens]);
 
+  const rawImage = scenario.previewImageUrl || scenario.imageUrl;
+  const isNetworkUrl = typeof rawImage === "string";
+
   return (
     <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
       <NavigationHeader
@@ -61,7 +64,8 @@ export const ScenarioPreviewScreen: React.FC<ScenarioPreviewScreenProps> = ({
       >
         <HeroSection
           icon={scenario.icon}
-          imageUrl={scenario.imageUrl ?? scenario.previewImageUrl}
+          imageUrl={isNetworkUrl ? rawImage : undefined}
+          imageSource={!isNetworkUrl && rawImage ? rawImage : undefined}
         />
 
         <View style={styles.contentSection}>
@@ -75,7 +79,7 @@ export const ScenarioPreviewScreen: React.FC<ScenarioPreviewScreenProps> = ({
 
           <View style={styles.infoCard}>
             <View style={styles.infoHeader}>
-              <AtomicIcon name="information-circle" size="sm" color="primary" />
+              <AtomicIcon name="info" size="sm" color="primary" />
               <AtomicText style={styles.infoTitle}>
                 {translations.whatToExpect}
               </AtomicText>

package/src/presentation/components/PendingJobCard.tsx

@@ -40,7 +40,7 @@ const DEFAULT_STATUS_LABELS: StatusLabels = {
   failed: "Failed",
 };
 
-export function PendingJobCard<TInput = unknown, TResult = unknown>({
+export const PendingJobCard: React.FC<PendingJobCardProps<any, any>> = ({
   job,
   onCancel,
   onRetry,
@@ -48,7 +48,7 @@ export function PendingJobCard<TInput = unknown, TResult = unknown>({
   statusLabels = DEFAULT_STATUS_LABELS,
   renderThumbnail,
   renderActions,
-}: PendingJobCardProps<TInput, TResult>): React.ReactElement {
+}) => {
   const tokens = useAppDesignTokens();
   const isFailed = job.status === "failed";
 

package/src/presentation/components/headers/AIGenScreenHeader.tsx

@@ -92,7 +92,7 @@ export const AIGenScreenHeader: React.FC<AIGenScreenHeaderProps> = ({
 const styles = StyleSheet.create({
   header: {
     paddingHorizontal: 16,
-    paddingTop: 60,
+    paddingTop: 16,
     width: "100%",
     marginBottom: 24,
   },