@umituz/react-native-ai-generation-content 1.20.12 → 1.20.13

package/src/index.ts

@@ -85,7 +85,7 @@ export type {
 } from "./presentation/hooks";
 
 export {
-  GenerationProgressModal, GenerationProgressContent, GenerationProgressBar, PendingJobCard,
+  GenerationProgressContent, GenerationProgressBar, PendingJobCard,
   PendingJobProgressBar, PendingJobCardActions, GenerationResultContent, ResultHeader,
   ResultImageCard, ResultStoryCard, ResultActions, DEFAULT_RESULT_CONFIG, PhotoStep,
   DualImagePicker, PromptInput, AIGenerationHero, ExamplePrompts, ModerationSummary,
@@ -105,20 +105,19 @@ export type {
   SingleImageInputRenderProps, SingleImageWithPromptInputRenderProps,
   SingleImageWithPromptFeatureState, SingleImageWithPromptFeatureLayoutProps,
   DualImageInputRenderProps, ResultRenderProps, CustomResultRenderProps,
-  ProcessingModalRenderProps, SingleImageFeatureLayoutProps, DualImageFeatureLayoutProps,
+  SingleImageFeatureLayoutProps, DualImageFeatureLayoutProps,
   DualImageVideoFeatureState, DualImageVideoFeatureLayoutProps,
 } from "./presentation/layouts";
 
 export type {
-  GenerationProgressModalProps, GenerationProgressRenderProps, GenerationProgressContentProps,
-  GenerationProgressBarProps, PendingJobCardProps, StatusLabels, PendingJobProgressBarProps,
-  PendingJobCardActionsProps, GenerationResultData, GenerationResultContentProps, ResultHeaderProps,
-  ResultImageCardProps, ResultStoryCardProps, ResultActionsProps, ResultConfig, ResultHeaderConfig,
-  ResultImageConfig, ResultStoryConfig, ResultActionsConfig, ResultLayoutConfig, ResultActionButton,
-  PhotoStepProps, DualImagePickerProps, PromptInputProps, AIGenerationHeroProps, ExamplePromptsProps,
-  ModerationSummaryProps, StylePresetsGridProps, StylePreset, GenerateButtonProps, ResultDisplayProps,
-  ResultDisplayAction, AIGenerationResultProps, AIGenerationResultAction, ErrorDisplayProps,
-  FeatureHeaderProps, AIGenScreenHeaderProps, NavigationButtonType, CreditBadgeProps,
+  GenerationProgressContentProps, GenerationProgressBarProps, PendingJobCardProps, StatusLabels,
+  PendingJobProgressBarProps, PendingJobCardActionsProps, GenerationResultData, GenerationResultContentProps,
+  ResultHeaderProps, ResultImageCardProps, ResultStoryCardProps, ResultActionsProps, ResultConfig,
+  ResultHeaderConfig, ResultImageConfig, ResultStoryConfig, ResultActionsConfig, ResultLayoutConfig,
+  ResultActionButton, PhotoStepProps, DualImagePickerProps, PromptInputProps, AIGenerationHeroProps,
+  ExamplePromptsProps, ModerationSummaryProps, StylePresetsGridProps, StylePreset, GenerateButtonProps,
+  ResultDisplayProps, ResultDisplayAction, AIGenerationResultProps, AIGenerationResultAction,
+  ErrorDisplayProps, FeatureHeaderProps, AIGenScreenHeaderProps, NavigationButtonType, CreditBadgeProps,
   PhotoUploadCardProps, PhotoUploadCardConfig, SettingsSheetProps, StyleSelectorProps,
   AspectRatioSelectorProps, DurationSelectorProps, GridSelectorProps, GridSelectorOption,
   StyleOption, AspectRatioOption, DurationValue, AspectRatioTranslations, DurationOption,

package/src/presentation/components/AIGenerationForm.tsx

@@ -14,7 +14,6 @@ import { PromptInput } from "./PromptInput";
 import { GenerateButton } from "./buttons/GenerateButton";
 import { ExamplePrompts } from "./prompts/ExamplePrompts";
 import { StylePresetsGrid } from "./StylePresetsGrid";
-import { GenerationProgressModal } from "./GenerationProgressModal";
 import type { AIGenerationFormProps } from "./AIGenerationForm.types";
 
 export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
@@ -35,10 +34,6 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   onGenerate,
   isGenerating,
   hideGenerateButton,
-  progress,
-  progressIcon,
-  isProgressModalVisible,
-  onCloseProgressModal,
   generateButtonProps,
   showAdvanced,
   onAdvancedToggle,
@@ -155,17 +150,6 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
           )}
         </>
       )}
-
-      {/* MANDATORY: Progress Modal shows automatically when isGenerating */}
-      <GenerationProgressModal
-        visible={isProgressModalVisible ?? isGenerating}
-        progress={progress ?? 0}
-        icon={progressIcon || "sparkles-outline"}
-        title={translations.progressTitle || translations.generatingButton}
-        message={translations.progressMessage || translations.progressHint}
-        onClose={onCloseProgressModal}
-        backgroundHint={onCloseProgressModal ? translations.progressBackgroundHint : undefined}
-      />
     </>
   );
 };

package/src/presentation/components/index.ts

@@ -1,4 +1,3 @@
-export { GenerationProgressModal } from "./GenerationProgressModal";
 export { GenerationProgressContent } from "./GenerationProgressContent";
 export { GenerationProgressBar } from "./GenerationProgressBar";
 export { PendingJobCard } from "./PendingJobCard";
@@ -10,11 +9,6 @@ export * from "./StylePresetsGrid";
 export * from "./AIGenerationForm";
 export * from "./AIGenerationForm.types";
 
-export type {
-  GenerationProgressModalProps,
-  GenerationProgressRenderProps,
-} from "./GenerationProgressModal";
-
 export type { GenerationProgressContentProps } from "./GenerationProgressContent";
 export type { GenerationProgressBarProps } from "./GenerationProgressBar";
 

package/src/presentation/layouts/DualImageFeatureLayout.tsx

@@ -1,11 +1,12 @@
 /**
  * DualImageFeatureLayout
  * Centralized layout for all dual-image processing features (face-swap, ai-kiss, ai-hug)
- * Handles: Modal, ScrollView, AIGenerationForm, AIGenerationResult
+ * Handles: ScrollView, AIGenerationForm, AIGenerationResult, GenerationProgressContent
+ * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
 import React, { useCallback } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
   useResponsive,
@@ -13,7 +14,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { AIGenerationForm } from "../components/AIGenerationForm";
 import { AIGenerationResult } from "../components/display/AIGenerationResult";
-import { GenerationProgressModal } from "../components/GenerationProgressModal";
+import { GenerationProgressContent } from "../components/GenerationProgressContent";
 import type { DualImageFeatureLayoutProps } from "./types";
 
 export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
@@ -24,7 +25,6 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
   renderInput,
   renderResult,
   description,
-  renderProcessingModal,
   children,
 }) => {
   const tokens = useAppDesignTokens();
@@ -47,19 +47,29 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
     void feature.selectTargetImage();
   }, [feature]);
 
-  // Default modal
-  const defaultModal = (
-    <GenerationProgressModal
-      visible={feature.isProcessing}
-      progress={feature.progress}
-      icon={modalIcon}
-      title={modalTranslations.title}
-      message={modalTranslations.message}
-      hint={modalTranslations.hint}
-      backgroundHint={modalTranslations.backgroundHint}
-      onClose={() => {}}
-    />
-  );
+  // Processing view - fullscreen (FutureUS pattern, no Modal)
+  if (feature.isProcessing) {
+    return (
+      <View
+        style={[
+          styles.processingContainer,
+          { backgroundColor: tokens.colors.backgroundPrimary },
+        ]}
+      >
+        <GenerationProgressContent
+          progress={feature.progress}
+          icon={modalIcon}
+          title={modalTranslations.title}
+          message={modalTranslations.message}
+          hint={modalTranslations.hint}
+          backgroundHint={modalTranslations.backgroundHint}
+          backgroundColor={tokens.colors.surface}
+          textColor={tokens.colors.textPrimary}
+          progressColor={tokens.colors.primary}
+        />
+      </View>
+    );
+  }
 
   // Result view
   if (feature.processedUrl) {
@@ -88,48 +98,42 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
 
   // Input view
   return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
+    <ScrollView
+      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+      contentContainerStyle={styles.content}
+      showsVerticalScrollIndicator={false}
+    >
+      <AIGenerationForm
+        onGenerate={handleProcess}
+        isGenerating={feature.isProcessing}
+        progress={feature.progress}
+        translations={{
+          generateButton: translations.processButtonText,
+          generatingButton: translations.processingText,
+          progressTitle: translations.processingText,
+        }}
       >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          progress={feature.progress}
-          translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-            progressTitle: translations.processingText,
-          }}
-        >
-          {description && (
-            <AtomicText
-              type="bodyLarge"
-              style={[styles.description, { color: tokens.colors.textSecondary }]}
-            >
-              {description}
-            </AtomicText>
-          )}
+        {description && (
+          <AtomicText
+            type="bodyLarge"
+            style={[styles.description, { color: tokens.colors.textSecondary }]}
+          >
+            {description}
+          </AtomicText>
+        )}
 
-          {children}
+        {children}
 
-          {renderInput({
-            sourceImageUri: feature.sourceImageUri,
-            targetImageUri: feature.targetImageUri,
-            onSelectSource: handleSelectSource,
-            onSelectTarget: handleSelectTarget,
-            isDisabled: feature.isProcessing,
-            isProcessing: feature.isProcessing,
-          })}
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal
-        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
-        : defaultModal}
-    </>
+        {renderInput({
+          sourceImageUri: feature.sourceImageUri,
+          targetImageUri: feature.targetImageUri,
+          onSelectSource: handleSelectSource,
+          onSelectTarget: handleSelectTarget,
+          isDisabled: feature.isProcessing,
+          isProcessing: feature.isProcessing,
+        })}
+      </AIGenerationForm>
+    </ScrollView>
   );
 };
 
@@ -146,4 +150,9 @@ const styles = StyleSheet.create({
     marginBottom: 24,
     lineHeight: 24,
   },
+  processingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });

package/src/presentation/layouts/DualImageVideoFeatureLayout.tsx

@@ -1,18 +1,19 @@
 /**
  * DualImageVideoFeatureLayout
  * Centralized layout for dual-image video features (ai-kiss, ai-hug)
- * Handles: Modal, ScrollView, AIGenerationForm, AIGenerationResult
+ * Handles: ScrollView, AIGenerationForm, AIGenerationResult, GenerationProgressContent
+ * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
 import React, { useCallback } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
   AtomicText,
 } from "@umituz/react-native-design-system";
 import { AIGenerationForm } from "../components/AIGenerationForm";
 import { AIGenerationResult } from "../components/display/AIGenerationResult";
-import { GenerationProgressModal } from "../components/GenerationProgressModal";
+import { GenerationProgressContent } from "../components/GenerationProgressContent";
 import type { DualImageVideoFeatureLayoutProps } from "./types";
 
 export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutProps> = ({
@@ -22,7 +23,6 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
   modalIcon = "sparkles",
   renderInput,
   description,
-  renderProcessingModal,
   children,
 }) => {
   const tokens = useAppDesignTokens();
@@ -43,19 +43,29 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
     void feature.selectTargetImage();
   }, [feature]);
 
-  // Default modal
-  const defaultModal = (
-    <GenerationProgressModal
-      visible={feature.isProcessing}
-      progress={feature.progress}
-      icon={modalIcon}
-      title={modalTranslations.title}
-      message={modalTranslations.message}
-      hint={modalTranslations.hint}
-      backgroundHint={modalTranslations.backgroundHint}
-      onClose={() => {}}
-    />
-  );
+  // Processing view - fullscreen (FutureUS pattern, no Modal)
+  if (feature.isProcessing) {
+    return (
+      <View
+        style={[
+          styles.processingContainer,
+          { backgroundColor: tokens.colors.backgroundPrimary },
+        ]}
+      >
+        <GenerationProgressContent
+          progress={feature.progress}
+          icon={modalIcon}
+          title={modalTranslations.title}
+          message={modalTranslations.message}
+          hint={modalTranslations.hint}
+          backgroundHint={modalTranslations.backgroundHint}
+          backgroundColor={tokens.colors.surface}
+          textColor={tokens.colors.textPrimary}
+          progressColor={tokens.colors.primary}
+        />
+      </View>
+    );
+  }
 
   // Result view (video features show result without embedded content)
   if (feature.processedVideoUrl) {
@@ -82,48 +92,42 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
 
   // Input view
   return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
+    <ScrollView
+      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+      contentContainerStyle={styles.content}
+      showsVerticalScrollIndicator={false}
+    >
+      <AIGenerationForm
+        onGenerate={handleProcess}
+        isGenerating={feature.isProcessing}
+        progress={feature.progress}
+        translations={{
+          generateButton: translations.processButtonText,
+          generatingButton: translations.processingText,
+          progressTitle: translations.processingText,
+        }}
       >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          progress={feature.progress}
-          translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-            progressTitle: translations.processingText,
-          }}
-        >
-          {description && (
-            <AtomicText
-              type="bodyLarge"
-              style={[styles.description, { color: tokens.colors.textSecondary }]}
-            >
-              {description}
-            </AtomicText>
-          )}
+        {description && (
+          <AtomicText
+            type="bodyLarge"
+            style={[styles.description, { color: tokens.colors.textSecondary }]}
+          >
+            {description}
+          </AtomicText>
+        )}
 
-          {children}
+        {children}
 
-          {renderInput({
-            sourceImageUri: feature.sourceImageUri,
-            targetImageUri: feature.targetImageUri,
-            onSelectSource: handleSelectSource,
-            onSelectTarget: handleSelectTarget,
-            isDisabled: feature.isProcessing,
-            isProcessing: feature.isProcessing,
-          })}
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal
-        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
-        : defaultModal}
-    </>
+        {renderInput({
+          sourceImageUri: feature.sourceImageUri,
+          targetImageUri: feature.targetImageUri,
+          onSelectSource: handleSelectSource,
+          onSelectTarget: handleSelectTarget,
+          isDisabled: feature.isProcessing,
+          isProcessing: feature.isProcessing,
+        })}
+      </AIGenerationForm>
+    </ScrollView>
   );
 };
 
@@ -140,4 +144,9 @@ const styles = StyleSheet.create({
     marginBottom: 24,
     lineHeight: 24,
   },
+  processingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });

package/src/presentation/layouts/SingleImageFeatureLayout.tsx

@@ -1,11 +1,12 @@
 /**
  * SingleImageFeatureLayout
  * Centralized layout for all single-image processing features
- * Handles: Modal, ScrollView, AIGenerationForm, AIGenerationResult
+ * Handles: ScrollView, AIGenerationForm, AIGenerationResult, GenerationProgressContent
+ * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
 import React, { useCallback } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
   useResponsive,
@@ -13,7 +14,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { AIGenerationForm } from "../components/AIGenerationForm";
 import { AIGenerationResult } from "../components/display/AIGenerationResult";
-import { GenerationProgressModal } from "../components/GenerationProgressModal";
+import { GenerationProgressContent } from "../components/GenerationProgressContent";
 import type { SingleImageFeatureLayoutProps } from "./types";
 
 export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> = ({
@@ -25,7 +26,6 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
   renderResult,
   renderCustomResult,
   description,
-  renderProcessingModal,
   children,
 }) => {
   const tokens = useAppDesignTokens();
@@ -44,19 +44,29 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
     void feature.selectImage();
   }, [feature]);
 
-  // Default modal
-  const defaultModal = (
-    <GenerationProgressModal
-      visible={feature.isProcessing}
-      progress={feature.progress}
-      icon={modalIcon}
-      title={modalTranslations.title}
-      message={modalTranslations.message}
-      hint={modalTranslations.hint}
-      backgroundHint={modalTranslations.backgroundHint}
-      onClose={() => {}}
-    />
-  );
+  // Processing view - fullscreen (FutureUS pattern, no Modal)
+  if (feature.isProcessing) {
+    return (
+      <View
+        style={[
+          styles.processingContainer,
+          { backgroundColor: tokens.colors.backgroundPrimary },
+        ]}
+      >
+        <GenerationProgressContent
+          progress={feature.progress}
+          icon={modalIcon}
+          title={modalTranslations.title}
+          message={modalTranslations.message}
+          hint={modalTranslations.hint}
+          backgroundHint={modalTranslations.backgroundHint}
+          backgroundColor={tokens.colors.surface}
+          textColor={tokens.colors.textPrimary}
+          progressColor={tokens.colors.primary}
+        />
+      </View>
+    );
+  }
 
   // Custom result view (for comparison sliders, etc.)
   if (feature.processedUrl && renderCustomResult && feature.imageUri) {
@@ -104,46 +114,40 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
 
   // Input view
   return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
+    <ScrollView
+      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+      contentContainerStyle={styles.content}
+      showsVerticalScrollIndicator={false}
+    >
+      <AIGenerationForm
+        onGenerate={handleProcess}
+        isGenerating={feature.isProcessing}
+        progress={feature.progress}
+        translations={{
+          generateButton: translations.processButtonText,
+          generatingButton: translations.processingText,
+          progressTitle: translations.processingText,
+        }}
       >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          progress={feature.progress}
-          translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-            progressTitle: translations.processingText,
-          }}
-        >
-          {description && (
-            <AtomicText
-              type="bodyLarge"
-              style={[styles.description, { color: tokens.colors.textSecondary }]}
-            >
-              {description}
-            </AtomicText>
-          )}
+        {description && (
+          <AtomicText
+            type="bodyLarge"
+            style={[styles.description, { color: tokens.colors.textSecondary }]}
+          >
+            {description}
+          </AtomicText>
+        )}
 
-          {children}
+        {children}
 
-          {renderInput({
-            imageUri: feature.imageUri,
-            onSelect: handleSelectImage,
-            isDisabled: feature.isProcessing,
-            isProcessing: feature.isProcessing,
-          })}
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal
-        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
-        : defaultModal}
-    </>
+        {renderInput({
+          imageUri: feature.imageUri,
+          onSelect: handleSelectImage,
+          isDisabled: feature.isProcessing,
+          isProcessing: feature.isProcessing,
+        })}
+      </AIGenerationForm>
+    </ScrollView>
   );
 };
 
@@ -160,4 +164,9 @@ const styles = StyleSheet.create({
     marginBottom: 24,
     lineHeight: 24,
   },
+  processingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });