@umituz/react-native-ai-generation-content 1.33.2 → 1.34.0

package/package.json

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

package/src/domains/generation/infrastructure/executors/video-executor.ts

@@ -1,6 +1,6 @@
 /**
  * Video Generation Executor
- * Generic executor for all video generation features
+ * Generic executor for all video generation features (provider-agnostic)
  */
 
 import type {
@@ -41,16 +41,12 @@ export class VideoExecutor
         return { success: false, error: "AI provider not initialized" };
       }
 
-      options?.onProgress?.(5);
-
       const modelInput = this.buildModelInput(input);
 
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.log("[VideoExecutor] Model input prepared");
       }
 
-      options?.onProgress?.(10);
-
       const result = await provider.subscribe(model, modelInput, {
         timeoutMs: options?.timeoutMs ?? 300000,
         onQueueUpdate: (status) => {
@@ -101,7 +97,7 @@ export class VideoExecutor
     }
   }
 
-  private buildModelInput(input: VideoGenerationInput) {
+  private buildModelInput(input: VideoGenerationInput): Record<string, unknown> {
     const { sourceImageBase64, targetImageBase64, prompt } = input;
 
     const formatBase64 = (base64: string): string => {

package/src/domains/generation/wizard/presentation/components/GenericWizardFlow.tsx

@@ -66,6 +66,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
   const [currentCreation, setCurrentCreation] = useState<Creation | null>(null);
   const [showRatingPicker, setShowRatingPicker] = useState(false);
   const [hasRated, setHasRated] = useState(false);
+  const [isGeneratingDismissed, setIsGeneratingDismissed] = useState(false);
   const prevStepIdRef = useRef<string | undefined>(undefined);
 
   const repository = useMemo(() => createCreationsRepository("creations"), []);
@@ -133,10 +134,31 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
       if (prevStepIdRef.current !== currentStepId) {
         prevStepIdRef.current = currentStepId;
         onStepChange(currentStep.id, currentStep.type);
+        // Reset dismissed state when entering generating step
+        if (currentStep.type === StepType.GENERATING) {
+          setIsGeneratingDismissed(false);
+        }
       }
     }
   }, [currentStep, currentStepIndex, onStepChange]);
 
+  // Handle dismiss generating - go back but generation continues in background
+  const handleDismissGenerating = useCallback(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[GenericWizardFlow] Dismissing generating screen - generation continues in background");
+    }
+    setIsGeneratingDismissed(true);
+    // Show alert that generation continues
+    alert.show(
+      AlertType.INFO,
+      AlertMode.TOAST,
+      t("generator.backgroundTitle"),
+      t("generator.backgroundMessage")
+    );
+    // Go back to previous step (or close)
+    onBack?.();
+  }, [alert, t, onBack]);
+
   const handleBack = useCallback(() => {
     if (currentStepIndex === 0) {
       onBack?.();
@@ -209,6 +231,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
         onShare={handleShare}
         onRate={handleOpenRatingPicker}
         onTryAgain={onTryAgain}
+        onDismissGenerating={handleDismissGenerating}
         t={t}
         renderPreview={renderPreview}
         renderGenerating={renderGenerating}

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.tsx

@@ -28,6 +28,7 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
   onShare,
   onRate,
   onTryAgain,
+  onDismissGenerating,
   t,
   renderPreview,
   renderGenerating,
@@ -61,7 +62,12 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
     case StepType.GENERATING: {
       if (renderGenerating) return renderGenerating(generationProgress);
       return (
-        <GeneratingScreen progress={generationProgress} scenario={scenario} t={t} />
+        <GeneratingScreen
+          progress={generationProgress}
+          scenario={scenario}
+          t={t}
+          onDismiss={onDismissGenerating}
+        />
       );
     }
 

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.types.ts

@@ -18,6 +18,8 @@ export interface WizardStepRendererProps {
   readonly onShare: () => void;
   readonly onRate?: () => void;
   readonly onTryAgain?: () => void;
+  /** Called when user dismisses generating screen - generation continues in background */
+  readonly onDismissGenerating?: () => void;
   readonly t: (key: string) => string;
   readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
   readonly renderGenerating?: (progress: number) => React.ReactElement | null;

package/src/domains/generation/wizard/presentation/screens/GeneratingScreen.tsx

@@ -2,11 +2,12 @@
  * Generic Generating Screen
  * Shows indeterminate progress while AI generates content
  * Uses status messages instead of fake percentages (UX best practice)
+ * Supports background generation - user can dismiss and generation continues
  */
 
 import React, { useMemo } from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { View, StyleSheet, ActivityIndicator, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
 import { useGenerationPhase } from "../hooks/useGenerationPhase";
 import { IndeterminateProgressBar } from "../components/IndeterminateProgressBar";
 
@@ -20,17 +21,19 @@ export interface GeneratingScreenProps {
       readonly title?: string;
       readonly waitMessage?: string;
       readonly hint?: string;
+      readonly backgroundHint?: string;
     };
   };
   readonly t: (key: string) => string;
-  readonly onCancel?: () => void;
+  /** Called when user dismisses the screen - generation continues in background */
+  readonly onDismiss?: () => void;
 }
 
 export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
   progress: _progress,
   scenario,
   t,
-  onCancel: _onCancel,
+  onDismiss,
 }) => {
   const tokens = useAppDesignTokens();
   const phase = useGenerationPhase();
@@ -48,6 +51,7 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
       title: custom?.title || t("generator.title"),
       waitMessage: custom?.waitMessage || t("generator.waitMessage"),
       hint: custom?.hint || t("generator.hint"),
+      backgroundHint: custom?.backgroundHint || t("generator.backgroundHint"),
     };
   }, [scenario, t]);
 
@@ -66,6 +70,17 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {/* Close button - allows user to dismiss and continue in background */}
+      {onDismiss && (
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={onDismiss}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <AtomicIcon name="close" size="md" customColor={tokens.colors.textSecondary} />
+        </TouchableOpacity>
+      )}
+
       <View style={styles.content}>
         <ActivityIndicator size="large" color={tokens.colors.primary} />
 
@@ -93,6 +108,15 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
         <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
           {messages.hint}
         </AtomicText>
+
+        {/* Background hint - tap to dismiss */}
+        {onDismiss && (
+          <TouchableOpacity style={styles.backgroundHintButton} onPress={onDismiss}>
+            <AtomicText type="bodySmall" style={[styles.backgroundHint, { color: tokens.colors.primary }]}>
+              {messages.backgroundHint}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );
@@ -104,6 +128,13 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
+  closeButton: {
+    position: "absolute",
+    top: 16,
+    right: 16,
+    zIndex: 10,
+    padding: 8,
+  },
   content: {
     width: "80%",
     maxWidth: 400,
@@ -125,4 +156,13 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginTop: 8,
   },
+  backgroundHintButton: {
+    marginTop: 24,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  backgroundHint: {
+    textAlign: "center",
+    fontWeight: "600",
+  },
 });

package/src/presentation/layouts/DualImageFeatureLayout.tsx

@@ -5,7 +5,7 @@
  * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -31,6 +31,19 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const imageSize = screenWidth - horizontalPadding * 2;
 
+  // Background generation: user can dismiss progress but generation continues
+  const [isProgressDismissed, setIsProgressDismissed] = useState(false);
+
+  useEffect(() => {
+    if (feature.isProcessing) {
+      setIsProgressDismissed(false);
+    }
+  }, [feature.isProcessing]);
+
+  const handleDismissProgress = useCallback(() => {
+    setIsProgressDismissed(true);
+  }, []);
+
   const handleProcess = useCallback(() => {
     void feature.process();
   }, [feature]);
@@ -48,7 +61,8 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
   }, [feature]);
 
   // Processing view - fullscreen (FutureUS pattern, no Modal)
-  if (feature.isProcessing) {
+  // Show only if processing AND not dismissed
+  if (feature.isProcessing && !isProgressDismissed) {
     return (
       <View
         style={[
@@ -63,6 +77,7 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
           message={modalTranslations.message}
           hint={modalTranslations.hint}
           backgroundHint={modalTranslations.backgroundHint}
+          onClose={handleDismissProgress}
           backgroundColor={tokens.colors.surface}
           textColor={tokens.colors.textPrimary}
           progressColor={tokens.colors.primary}

package/src/presentation/layouts/DualImageVideoFeatureLayout.tsx

@@ -5,7 +5,7 @@
  * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -27,6 +27,19 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
 }) => {
   const tokens = useAppDesignTokens();
 
+  // Background generation: user can dismiss progress but generation continues
+  const [isProgressDismissed, setIsProgressDismissed] = useState(false);
+
+  useEffect(() => {
+    if (feature.isProcessing) {
+      setIsProgressDismissed(false);
+    }
+  }, [feature.isProcessing]);
+
+  const handleDismissProgress = useCallback(() => {
+    setIsProgressDismissed(true);
+  }, []);
+
   const handleProcess = useCallback(() => {
     void feature.process();
   }, [feature]);
@@ -44,7 +57,8 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
   }, [feature]);
 
   // Processing view - fullscreen (FutureUS pattern, no Modal)
-  if (feature.isProcessing) {
+  // Show only if processing AND not dismissed
+  if (feature.isProcessing && !isProgressDismissed) {
     return (
       <View
         style={[
@@ -59,6 +73,7 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
           message={modalTranslations.message}
           hint={modalTranslations.hint}
           backgroundHint={modalTranslations.backgroundHint}
+          onClose={handleDismissProgress}
           backgroundColor={tokens.colors.surface}
           textColor={tokens.colors.textPrimary}
           progressColor={tokens.colors.primary}

package/src/presentation/layouts/SingleImageFeatureLayout.tsx

@@ -5,7 +5,7 @@
  * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -32,6 +32,20 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const imageSize = screenWidth - horizontalPadding * 2;
 
+  // Background generation: user can dismiss progress but generation continues
+  const [isProgressDismissed, setIsProgressDismissed] = useState(false);
+
+  // Reset dismissed state when processing starts
+  useEffect(() => {
+    if (feature.isProcessing) {
+      setIsProgressDismissed(false);
+    }
+  }, [feature.isProcessing]);
+
+  const handleDismissProgress = useCallback(() => {
+    setIsProgressDismissed(true);
+  }, []);
+
   const handleProcess = useCallback(() => {
     void feature.process();
   }, [feature]);
@@ -45,7 +59,8 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
   }, [feature]);
 
   // Processing view - fullscreen (FutureUS pattern, no Modal)
-  if (feature.isProcessing) {
+  // Show only if processing AND not dismissed (user can dismiss and generation continues)
+  if (feature.isProcessing && !isProgressDismissed) {
     return (
       <View
         style={[
@@ -60,6 +75,7 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
           message={modalTranslations.message}
           hint={modalTranslations.hint}
           backgroundHint={modalTranslations.backgroundHint}
+          onClose={handleDismissProgress}
           backgroundColor={tokens.colors.surface}
           textColor={tokens.colors.textPrimary}
           progressColor={tokens.colors.primary}

package/src/presentation/layouts/SingleImageWithPromptFeatureLayout.tsx

@@ -6,7 +6,7 @@
  * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -32,6 +32,19 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const imageSize = screenWidth - horizontalPadding * 2;
 
+  // Background generation: user can dismiss progress but generation continues
+  const [isProgressDismissed, setIsProgressDismissed] = useState(false);
+
+  useEffect(() => {
+    if (feature.isProcessing) {
+      setIsProgressDismissed(false);
+    }
+  }, [feature.isProcessing]);
+
+  const handleDismissProgress = useCallback(() => {
+    setIsProgressDismissed(true);
+  }, []);
+
   const handleProcess = useCallback(() => {
     void feature.process();
   }, [feature]);
@@ -52,7 +65,8 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
   );
 
   // Processing view - fullscreen (FutureUS pattern, no Modal)
-  if (feature.isProcessing) {
+  // Show only if processing AND not dismissed
+  if (feature.isProcessing && !isProgressDismissed) {
     return (
       <View
         style={[
@@ -67,6 +81,7 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
           message={modalTranslations.message}
           hint={modalTranslations.hint}
           backgroundHint={modalTranslations.backgroundHint}
+          onClose={handleDismissProgress}
           backgroundColor={tokens.colors.surface}
           textColor={tokens.colors.textPrimary}
           progressColor={tokens.colors.primary}