@umituz/react-native-ai-generation-content 1.17.183 → 1.17.184

package/package.json

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

package/src/features/photo-restoration/presentation/components/PhotoRestoreFeature.tsx

@@ -1,14 +1,13 @@
 /**
  * PhotoRestoreFeature Component
  * Self-contained photo restore feature UI component
- * Uses hook internally, only requires config and translations
+ * Uses centralized SingleImageFeatureLayout for consistent UX
  */
 
-import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import React, { useMemo } from "react";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
-import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { SingleImageFeatureLayout } from "../../../../presentation/layouts";
+import type { ProcessingModalRenderProps } from "../../../../presentation/layouts";
 import { PhotoRestoreResultView } from "./PhotoRestoreResultView";
 import { usePhotoRestoreFeature } from "../hooks";
 import type {
@@ -17,21 +16,17 @@ import type {
 } from "../../domain/types";
 
 export interface PhotoRestoreFeatureProps {
-  /** Feature configuration with provider-specific settings */
   config: PhotoRestoreFeatureConfig;
-  /** Translations for all UI text */
-  translations: PhotoRestoreTranslations;
-  /** Image picker callback */
+  translations: PhotoRestoreTranslations & {
+    modalTitle?: string;
+    modalMessage?: string;
+    modalHint?: string;
+    modalBackgroundHint?: string;
+  };
   onSelectImage: () => Promise<string | null>;
-  /** Save image callback */
   onSaveImage: (imageUrl: string) => Promise<void>;
-  /** Called before processing starts. Return false to cancel. */
   onBeforeProcess?: () => Promise<boolean>;
-  /** Optional custom processing modal renderer */
-  renderProcessingModal?: (props: {
-    visible: boolean;
-    progress: number;
-  }) => React.ReactNode;
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => React.ReactNode;
 }
 
 export const PhotoRestoreFeature: React.FC<PhotoRestoreFeatureProps> = ({
@@ -42,8 +37,6 @@ export const PhotoRestoreFeature: React.FC<PhotoRestoreFeatureProps> = ({
   onBeforeProcess,
   renderProcessingModal,
 }) => {
-  const tokens = useAppDesignTokens();
-
   const feature = usePhotoRestoreFeature({
     config,
     onSelectImage,
@@ -51,38 +44,46 @@ export const PhotoRestoreFeature: React.FC<PhotoRestoreFeatureProps> = ({
     onBeforeProcess,
   });
 
-  const photoTranslations = useMemo(
+  const modalTranslations = useMemo(
     () => ({
-      tapToUpload: translations.uploadTitle,
-      selectPhoto: translations.uploadSubtitle,
-      change: translations.uploadChange,
-      analyzing: translations.uploadAnalyzing,
+      title: translations.modalTitle || "Processing",
+      message: translations.modalMessage || "AI is restoring your photo...",
+      hint: translations.modalHint || "This may take a moment",
+      backgroundHint: translations.modalBackgroundHint || "Continue in background",
     }),
     [translations],
   );
 
-  const handleProcess = useCallback(() => {
-    void feature.process();
-  }, [feature]);
-
-  const handleSave = useCallback(() => {
-    void feature.save();
-  }, [feature]);
-
-  const handleSelectImage = useCallback(() => {
-    void feature.selectImage();
-  }, [feature]);
-
-  if (feature.processedUrl && feature.imageUri) {
-    return (
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
+  return (
+    <SingleImageFeatureLayout
+      feature={feature}
+      translations={translations}
+      modalTranslations={modalTranslations}
+      renderProcessingModal={renderProcessingModal}
+      renderInput={({ imageUri, onSelect, isDisabled, isProcessing }) => (
+        <PhotoUploadCard
+          imageUri={imageUri}
+          onPress={onSelect}
+          isValidating={isProcessing}
+          disabled={isDisabled}
+          translations={{
+            tapToUpload: translations.uploadTitle,
+            selectPhoto: translations.uploadSubtitle,
+            change: translations.uploadChange,
+            analyzing: translations.uploadAnalyzing,
+          }}
+          config={{
+            aspectRatio: 1,
+            borderRadius: 24,
+            showValidationStatus: false,
+            allowChange: true,
+          }}
+        />
+      )}
+      renderCustomResult={({ processedUrl, originalImageUri, onSave, onReset }) => (
         <PhotoRestoreResultView
-          originalUri={feature.imageUri}
-          processedUri={feature.processedUrl}
+          originalUri={originalImageUri}
+          processedUri={processedUrl}
           translations={{
             successText: translations.successText,
             saveButtonText: translations.saveButtonText,
@@ -90,72 +91,10 @@ export const PhotoRestoreFeature: React.FC<PhotoRestoreFeatureProps> = ({
             beforeLabel: translations.beforeLabel,
             afterLabel: translations.afterLabel,
           }}
-          onSave={handleSave}
-          onReset={feature.reset}
+          onSave={onSave}
+          onReset={onReset}
         />
-      </ScrollView>
-    );
-  }
-
-  return (
-    <>
-      <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,
-          }}
-        >
-          <PhotoUploadCard
-            imageUri={feature.imageUri}
-            onPress={handleSelectImage}
-            isValidating={feature.isProcessing}
-            disabled={feature.isProcessing}
-            translations={photoTranslations}
-            config={{
-              aspectRatio: 1,
-              borderRadius: 24,
-              showValidationStatus: false,
-              allowChange: true,
-            }}
-          />
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
-    </>
+      )}
+    />
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    paddingVertical: 16,
-  },
-  description: {
-    textAlign: "center",
-    marginHorizontal: 24,
-    marginBottom: 24,
-    lineHeight: 24,
-  },
-  errorContainer: {
-    marginHorizontal: 24,
-    marginBottom: 16,
-    padding: 16,
-    borderRadius: 12,
-  },
-  buttonContainer: {
-    marginHorizontal: 24,
-    marginTop: 8,
-  },
-});

package/src/features/remove-object/presentation/components/RemoveObjectFeature.tsx

@@ -1,19 +1,18 @@
 /**
  * RemoveObjectFeature Component
  * Self-contained remove object feature UI component
- * Uses hook internally, only requires config and translations
+ * Uses centralized SingleImageWithPromptFeatureLayout for consistent UX
  */
 
-import React, { useCallback, useMemo } from "react";
-import { View, ScrollView, StyleSheet, Image, TextInput } from "react-native";
+import React, { useMemo } from "react";
+import { View, Image, StyleSheet, TextInput } from "react-native";
 import {
   useAppDesignTokens,
-  useResponsive,
   AtomicText,
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
-import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
-import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
+import { SingleImageWithPromptFeatureLayout } from "../../../../presentation/layouts";
+import type { ProcessingModalRenderProps } from "../../../../presentation/layouts";
 import { useRemoveObjectFeature } from "../hooks";
 import type {
   RemoveObjectTranslations,
@@ -22,15 +21,16 @@ import type {
 
 export interface RemoveObjectFeatureProps {
   config: RemoveObjectFeatureConfig;
-  translations: RemoveObjectTranslations;
+  translations: RemoveObjectTranslations & {
+    modalTitle?: string;
+    modalMessage?: string;
+    modalHint?: string;
+    modalBackgroundHint?: string;
+  };
   onSelectImage: () => Promise<string | null>;
   onSaveImage: (imageUrl: string) => Promise<void>;
-  /** Called before processing starts. Return false to cancel. */
   onBeforeProcess?: () => Promise<boolean>;
-  renderProcessingModal?: (props: {
-    visible: boolean;
-    progress: number;
-  }) => React.ReactNode;
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => React.ReactNode;
 }
 
 export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
@@ -42,8 +42,6 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
-  const { width: screenWidth, horizontalPadding } = useResponsive();
-  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useRemoveObjectFeature({
     config,
@@ -52,79 +50,35 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
     onBeforeProcess,
   });
 
-  const photoTranslations = useMemo(
+  const modalTranslations = useMemo(
     () => ({
-      tapToUpload: translations.uploadTitle,
-      selectPhoto: translations.uploadSubtitle,
-      change: translations.uploadChange,
-      analyzing: translations.uploadAnalyzing,
+      title: translations.modalTitle || "Processing",
+      message: translations.modalMessage || "AI is removing objects...",
+      hint: translations.modalHint || "This may take a moment",
+      backgroundHint: translations.modalBackgroundHint || "Continue in background",
     }),
     [translations],
   );
 
-  const handleProcess = useCallback(() => {
-    void feature.process();
-  }, [feature]);
-
-  const handleSave = useCallback(() => {
-    void feature.save();
-  }, [feature]);
-
-  const handleSelectImage = useCallback(() => {
-    void feature.selectImage();
-  }, [feature]);
-
-  if (feature.processedUrl) {
-    return (
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationResult
-          successText={translations.successText}
-          primaryAction={{
-            label: translations.saveButtonText,
-            onPress: handleSave,
-          }}
-          secondaryAction={{
-            label: translations.tryAnotherText,
-            onPress: feature.reset,
-          }}
-        >
-          <Image
-            source={{ uri: feature.processedUrl }}
-            style={[styles.resultImage, { width: imageSize, height: imageSize }]}
-            resizeMode="contain"
-          />
-        </AIGenerationResult>
-      </ScrollView>
-    );
-  }
-
   return (
-    <>
-      <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,
-          }}
-        >
+    <SingleImageWithPromptFeatureLayout
+      feature={feature}
+      translations={translations}
+      modalTranslations={modalTranslations}
+      renderProcessingModal={renderProcessingModal}
+      renderInput={({ imageUri, onSelect, isDisabled, isProcessing, prompt, onPromptChange }) => (
+        <>
           <PhotoUploadCard
-            imageUri={feature.imageUri}
-            onPress={handleSelectImage}
-            isValidating={feature.isProcessing}
-            disabled={feature.isProcessing}
-            translations={photoTranslations}
+            imageUri={imageUri}
+            onPress={onSelect}
+            isValidating={isProcessing}
+            disabled={isDisabled}
+            translations={{
+              tapToUpload: translations.uploadTitle,
+              selectPhoto: translations.uploadSubtitle,
+              change: translations.uploadChange,
+              analyzing: translations.uploadAnalyzing,
+            }}
             config={{
               aspectRatio: 1,
               borderRadius: 24,
@@ -149,13 +103,13 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
                   borderColor: tokens.colors.border,
                 },
               ]}
-              value={feature.prompt}
-              onChangeText={feature.setPrompt}
+              value={prompt}
+              onChangeText={onPromptChange}
               placeholder={translations.promptPlaceholder}
               placeholderTextColor={tokens.colors.textTertiary}
               multiline
               numberOfLines={3}
-              editable={!feature.isProcessing}
+              editable={!isProcessing}
             />
             <AtomicText
               type="bodySmall"
@@ -164,27 +118,20 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
               {translations.maskSubtitle}
             </AtomicText>
           </View>
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
-    </>
+        </>
+      )}
+      renderResult={({ imageUrl, imageSize }) => (
+        <Image
+          source={{ uri: imageUrl }}
+          style={[styles.resultImage, { width: imageSize, height: imageSize }]}
+          resizeMode="contain"
+        />
+      )}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    paddingVertical: 16,
-  },
-  description: {
-    textAlign: "center",
-    marginHorizontal: 24,
-    marginBottom: 24,
-    lineHeight: 24,
-  },
   promptContainer: {
     marginHorizontal: 24,
     marginTop: 16,
@@ -204,24 +151,7 @@ const styles = StyleSheet.create({
   promptHint: {
     marginTop: 8,
   },
-  successText: {
-    textAlign: "center",
-    marginBottom: 24,
-  },
-  resultImageContainer: {
-    alignItems: "center",
-    marginHorizontal: 24,
-    marginBottom: 24,
-  },
   resultImage: {
     borderRadius: 16,
   },
-  resultActions: {
-    marginHorizontal: 24,
-    gap: 12,
-  },
-  buttonContainer: {
-    marginHorizontal: 24,
-    marginTop: 8,
-  },
 });

package/src/features/replace-background/presentation/components/ReplaceBackgroundFeature.tsx

@@ -1,19 +1,15 @@
 /**
  * ReplaceBackgroundFeature Component
  * Self-contained background replacement feature UI component
- * Uses hook internally, only requires config and translations
+ * Uses centralized SingleImageWithPromptFeatureLayout for consistent UX
  */
 
-import React, { useCallback, useMemo } from "react";
-import { View, ScrollView, StyleSheet, Image } from "react-native";
-import {
-  useAppDesignTokens,
-  useResponsive,
-  AtomicInput,
-} from "@umituz/react-native-design-system";
+import React, { useMemo } from "react";
+import { View, Image, StyleSheet } from "react-native";
+import { AtomicInput } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
-import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
-import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
+import { SingleImageWithPromptFeatureLayout } from "../../../../presentation/layouts";
+import type { ProcessingModalRenderProps } from "../../../../presentation/layouts";
 import { useReplaceBackgroundFeature } from "../hooks";
 import type {
   ReplaceBackgroundTranslations,
@@ -22,15 +18,16 @@ import type {
 
 export interface ReplaceBackgroundFeatureProps {
   config: ReplaceBackgroundFeatureConfig;
-  translations: ReplaceBackgroundTranslations;
+  translations: ReplaceBackgroundTranslations & {
+    modalTitle?: string;
+    modalMessage?: string;
+    modalHint?: string;
+    modalBackgroundHint?: string;
+  };
   onSelectImage: () => Promise<string | null>;
   onSaveImage: (imageUrl: string) => Promise<void>;
-  /** Called before processing starts. Return false to cancel. */
   onBeforeProcess?: () => Promise<boolean>;
-  renderProcessingModal?: (props: {
-    visible: boolean;
-    progress: number;
-  }) => React.ReactNode;
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => React.ReactNode;
 }
 
 export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> = ({
@@ -41,10 +38,6 @@ export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> =
   onBeforeProcess,
   renderProcessingModal,
 }) => {
-  const tokens = useAppDesignTokens();
-  const { width: screenWidth, horizontalPadding } = useResponsive();
-  const imageSize = screenWidth - horizontalPadding * 2;
-
   const feature = useReplaceBackgroundFeature({
     config,
     onSelectImage,
@@ -52,77 +45,35 @@ export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> =
     onBeforeProcess,
   });
 
-  const photoTranslations = useMemo(
+  const modalTranslations = useMemo(
     () => ({
-      tapToUpload: translations.uploadTitle,
-      selectPhoto: translations.uploadSubtitle,
-      change: translations.uploadChange,
-      analyzing: translations.uploadAnalyzing,
+      title: translations.modalTitle || "Processing",
+      message: translations.modalMessage || "AI is replacing the background...",
+      hint: translations.modalHint || "This may take a moment",
+      backgroundHint: translations.modalBackgroundHint || "Continue in background",
     }),
     [translations],
   );
 
-  const handleProcess = useCallback(() => {
-    void feature.process();
-  }, [feature]);
-
-  const handleSave = useCallback(() => {
-    void feature.save();
-  }, [feature]);
-
-  const handleSelectImage = useCallback(() => {
-    void feature.selectImage();
-  }, [feature]);
-
-  if (feature.processedUrl) {
-    return (
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationResult
-          successText={translations.successText}
-          primaryAction={{
-            label: translations.saveButtonText,
-            onPress: handleSave,
-          }}
-          secondaryAction={{
-            label: translations.tryAnotherText,
-            onPress: feature.reset,
-          }}
-        >
-          <Image
-            source={{ uri: feature.processedUrl }}
-            style={[styles.resultImage, { width: imageSize, height: imageSize }]}
-            resizeMode="contain"
-          />
-        </AIGenerationResult>
-      </ScrollView>
-    );
-  }
-
   return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-          }}
-        >
+    <SingleImageWithPromptFeatureLayout
+      feature={feature}
+      translations={translations}
+      modalTranslations={modalTranslations}
+      renderProcessingModal={renderProcessingModal}
+      renderInput={({ imageUri, onSelect, isDisabled, isProcessing, prompt, onPromptChange }) => (
+        <>
           <PhotoUploadCard
-            imageUri={feature.imageUri}
-            onPress={handleSelectImage}
-            isValidating={feature.isProcessing}
-            disabled={feature.isProcessing}
-            translations={photoTranslations}
+            imageUri={imageUri}
+            onPress={onSelect}
+            isValidating={isProcessing}
+            disabled={isDisabled}
+            translations={{
+              tapToUpload: translations.uploadTitle,
+              selectPhoto: translations.uploadSubtitle,
+              change: translations.uploadChange,
+              analyzing: translations.uploadAnalyzing,
+            }}
             config={{
               aspectRatio: 1,
               borderRadius: 24,
@@ -133,58 +84,34 @@ export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> =
 
           <View style={styles.promptContainer}>
             <AtomicInput
-              value={feature.prompt}
-              onChangeText={feature.setPrompt}
+              value={prompt}
+              onChangeText={onPromptChange}
               placeholder={translations.promptPlaceholder}
               multiline
               numberOfLines={3}
-              disabled={feature.isProcessing}
+              disabled={isProcessing}
             />
           </View>
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
-    </>
+        </>
+      )}
+      renderResult={({ imageUrl, imageSize }) => (
+        <Image
+          source={{ uri: imageUrl }}
+          style={[styles.resultImage, { width: imageSize, height: imageSize }]}
+          resizeMode="contain"
+        />
+      )}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    paddingVertical: 16,
-  },
-  description: {
-    textAlign: "center",
-    marginHorizontal: 24,
-    marginBottom: 24,
-    lineHeight: 24,
-  },
   promptContainer: {
     marginHorizontal: 24,
     marginTop: 16,
     marginBottom: 8,
   },
-  successText: {
-    textAlign: "center",
-    marginBottom: 24,
-  },
-  resultImageContainer: {
-    alignItems: "center",
-    marginHorizontal: 24,
-    marginBottom: 24,
-  },
   resultImage: {
     borderRadius: 16,
   },
-  resultActions: {
-    marginHorizontal: 24,
-    gap: 12,
-  },
-  buttonContainer: {
-    marginHorizontal: 24,
-    marginTop: 8,
-  },
 });

package/src/features/upscaling/presentation/components/UpscaleFeature.tsx

@@ -1,17 +1,13 @@
 /**
  * UpscaleFeature Component
  * Self-contained upscale feature UI component
- * Uses hook internally, only requires config and translations
+ * Uses centralized SingleImageFeatureLayout for consistent UX
  */
 
-import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet } from "react-native";
-import {
-  useAppDesignTokens,
-  AtomicText,
-} from "@umituz/react-native-design-system";
+import React, { useMemo } from "react";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
-import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { SingleImageFeatureLayout } from "../../../../presentation/layouts";
+import type { ProcessingModalRenderProps } from "../../../../presentation/layouts";
 import { UpscaleResultView } from "./UpscaleResultView";
 import { useUpscaleFeature } from "../hooks";
 import type {
@@ -20,21 +16,17 @@ import type {
 } from "../../domain/types";
 
 export interface UpscaleFeatureProps {
-  /** Feature configuration with provider-specific settings */
   config: UpscaleFeatureConfig;
-  /** Translations for all UI text */
-  translations: UpscaleTranslations;
-  /** Image picker callback */
+  translations: UpscaleTranslations & {
+    modalTitle?: string;
+    modalMessage?: string;
+    modalHint?: string;
+    modalBackgroundHint?: string;
+  };
   onSelectImage: () => Promise<string | null>;
-  /** Save image callback */
   onSaveImage: (imageUrl: string) => Promise<void>;
-  /** Called before processing starts. Return false to cancel. */
   onBeforeProcess?: () => Promise<boolean>;
-  /** Optional custom processing modal renderer */
-  renderProcessingModal?: (props: {
-    visible: boolean;
-    progress: number;
-  }) => React.ReactNode;
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => React.ReactNode;
 }
 
 export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
@@ -45,8 +37,6 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
   onBeforeProcess,
   renderProcessingModal,
 }) => {
-  const tokens = useAppDesignTokens();
-
   const feature = useUpscaleFeature({
     config,
     onSelectImage,
@@ -54,38 +44,47 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
     onBeforeProcess,
   });
 
-  const photoTranslations = useMemo(
+  const modalTranslations = useMemo(
     () => ({
-      tapToUpload: translations.uploadTitle,
-      selectPhoto: translations.uploadSubtitle,
-      change: translations.uploadChange,
-      analyzing: translations.uploadAnalyzing,
+      title: translations.modalTitle || "Processing",
+      message: translations.modalMessage || "AI is upscaling your image...",
+      hint: translations.modalHint || "This may take a moment",
+      backgroundHint: translations.modalBackgroundHint || "Continue in background",
     }),
     [translations],
   );
 
-  const handleProcess = useCallback(() => {
-    void feature.process();
-  }, [feature]);
-
-  const handleSave = useCallback(() => {
-    void feature.save();
-  }, [feature]);
-
-  const handleSelectImage = useCallback(() => {
-    void feature.selectImage();
-  }, [feature]);
-
-  if (feature.processedUrl && feature.imageUri) {
-    return (
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
+  return (
+    <SingleImageFeatureLayout
+      feature={feature}
+      translations={translations}
+      modalTranslations={modalTranslations}
+      description={translations.description}
+      renderProcessingModal={renderProcessingModal}
+      renderInput={({ imageUri, onSelect, isDisabled, isProcessing }) => (
+        <PhotoUploadCard
+          imageUri={imageUri}
+          onPress={onSelect}
+          isValidating={isProcessing}
+          disabled={isDisabled}
+          translations={{
+            tapToUpload: translations.uploadTitle,
+            selectPhoto: translations.uploadSubtitle,
+            change: translations.uploadChange,
+            analyzing: translations.uploadAnalyzing,
+          }}
+          config={{
+            aspectRatio: 1,
+            borderRadius: 24,
+            showValidationStatus: false,
+            allowChange: true,
+          }}
+        />
+      )}
+      renderCustomResult={({ processedUrl, originalImageUri, onSave, onReset }) => (
         <UpscaleResultView
-          originalUri={feature.imageUri}
-          processedUri={feature.processedUrl}
+          originalUri={originalImageUri}
+          processedUri={processedUrl}
           translations={{
             successText: translations.successText,
             saveButtonText: translations.saveButtonText,
@@ -93,79 +92,10 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
             beforeLabel: translations.beforeLabel,
             afterLabel: translations.afterLabel,
           }}
-          onSave={handleSave}
-          onReset={feature.reset}
+          onSave={onSave}
+          onReset={onReset}
         />
-      </ScrollView>
-    );
-  }
-
-  return (
-    <>
-      <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,
-          }}
-        >
-          <AtomicText
-            type="bodyLarge"
-            style={[styles.description, { color: tokens.colors.textSecondary }]}
-          >
-            {translations.description}
-          </AtomicText>
-
-          <PhotoUploadCard
-            imageUri={feature.imageUri}
-            onPress={handleSelectImage}
-            isValidating={feature.isProcessing}
-            disabled={feature.isProcessing}
-            translations={photoTranslations}
-            config={{
-              aspectRatio: 1,
-              borderRadius: 24,
-              showValidationStatus: false,
-              allowChange: true,
-            }}
-          />
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
-    </>
+      )}
+    />
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    paddingVertical: 16,
-  },
-  description: {
-    textAlign: "center",
-    marginHorizontal: 24,
-    marginBottom: 24,
-    lineHeight: 24,
-  },
-  errorContainer: {
-    marginHorizontal: 24,
-    marginBottom: 16,
-    padding: 16,
-    borderRadius: 12,
-  },
-  buttonContainer: {
-    marginHorizontal: 24,
-    marginTop: 8,
-  },
-});

package/src/index.ts

@@ -92,10 +92,15 @@ export {
   ASPECT_RATIO_IDS, COMMON_DURATIONS,
 } from "./presentation/components";
 
-export { SingleImageFeatureLayout, DualImageFeatureLayout, DualImageVideoFeatureLayout } from "./presentation/layouts";
+export {
+  SingleImageFeatureLayout, SingleImageWithPromptFeatureLayout,
+  DualImageFeatureLayout, DualImageVideoFeatureLayout,
+} from "./presentation/layouts";
 export type {
   ModalTranslations, BaseLayoutTranslations, PhotoUploadTranslations,
-  SingleImageInputRenderProps, DualImageInputRenderProps, ResultRenderProps,
+  SingleImageInputRenderProps, SingleImageWithPromptInputRenderProps,
+  SingleImageWithPromptFeatureState, SingleImageWithPromptFeatureLayoutProps,
+  DualImageInputRenderProps, ResultRenderProps, CustomResultRenderProps,
   ProcessingModalRenderProps, SingleImageFeatureLayoutProps, DualImageFeatureLayoutProps,
   DualImageVideoFeatureState, DualImageVideoFeatureLayoutProps,
 } from "./presentation/layouts";

package/src/presentation/layouts/SingleImageFeatureLayout.tsx

@@ -23,6 +23,7 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
   modalIcon = "sparkles",
   renderInput,
   renderResult,
+  renderCustomResult,
   description,
   renderProcessingModal,
   children,
@@ -57,8 +58,27 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
     />
   );
 
-  // Result view
-  if (feature.processedUrl) {
+  // Custom result view (for comparison sliders, etc.)
+  if (feature.processedUrl && renderCustomResult && feature.imageUri) {
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        {renderCustomResult({
+          processedUrl: feature.processedUrl,
+          originalImageUri: feature.imageUri,
+          imageSize,
+          onSave: handleSave,
+          onReset: feature.reset,
+        })}
+      </ScrollView>
+    );
+  }
+
+  // Standard result view with AIGenerationResult wrapper
+  if (feature.processedUrl && renderResult) {
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/presentation/layouts/SingleImageWithPromptFeatureLayout.tsx

@@ -0,0 +1,153 @@
+/**
+ * SingleImageWithPromptFeatureLayout
+ * Centralized layout for single-image + prompt processing features
+ * (e.g., replace-background, remove-object)
+ * Handles: Modal, ScrollView, AIGenerationForm, AIGenerationResult
+ */
+
+import React, { useCallback } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  useResponsive,
+  AtomicText,
+} from "@umituz/react-native-design-system";
+import { AIGenerationForm } from "../components/AIGenerationForm";
+import { AIGenerationResult } from "../components/display/AIGenerationResult";
+import { GenerationProgressModal } from "../components/GenerationProgressModal";
+import type { SingleImageWithPromptFeatureLayoutProps } from "./types";
+
+export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptFeatureLayoutProps> = ({
+  feature,
+  translations,
+  modalTranslations,
+  modalIcon = "sparkles",
+  renderInput,
+  renderResult,
+  description,
+  renderProcessingModal,
+  children,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
+
+  const handleProcess = useCallback(() => {
+    void feature.process();
+  }, [feature]);
+
+  const handleSave = useCallback(() => {
+    void feature.save();
+  }, [feature]);
+
+  const handleSelectImage = useCallback(() => {
+    void feature.selectImage();
+  }, [feature]);
+
+  const handlePromptChange = useCallback(
+    (prompt: string) => {
+      feature.setPrompt(prompt);
+    },
+    [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={() => {}}
+    />
+  );
+
+  // Result view
+  if (feature.processedUrl) {
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
+        >
+          {renderResult({ imageUrl: feature.processedUrl, imageSize })}
+        </AIGenerationResult>
+      </ScrollView>
+    );
+  }
+
+  // Input view
+  return (
+    <>
+      <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,
+          }}
+        >
+          {description && (
+            <AtomicText
+              type="bodyLarge"
+              style={[styles.description, { color: tokens.colors.textSecondary }]}
+            >
+              {description}
+            </AtomicText>
+          )}
+
+          {children}
+
+          {renderInput({
+            imageUri: feature.imageUri,
+            onSelect: handleSelectImage,
+            isDisabled: feature.isProcessing,
+            isProcessing: feature.isProcessing,
+            prompt: feature.prompt,
+            onPromptChange: handlePromptChange,
+          })}
+        </AIGenerationForm>
+      </ScrollView>
+
+      {renderProcessingModal
+        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
+        : defaultModal}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+});

package/src/presentation/layouts/index.ts

@@ -4,6 +4,7 @@
  */
 
 export { SingleImageFeatureLayout } from "./SingleImageFeatureLayout";
+export { SingleImageWithPromptFeatureLayout } from "./SingleImageWithPromptFeatureLayout";
 export { DualImageFeatureLayout } from "./DualImageFeatureLayout";
 export { DualImageVideoFeatureLayout } from "./DualImageVideoFeatureLayout";
 export type {
@@ -11,8 +12,12 @@ export type {
   BaseLayoutTranslations,
   PhotoUploadTranslations,
   SingleImageInputRenderProps,
+  SingleImageWithPromptInputRenderProps,
+  SingleImageWithPromptFeatureState,
+  SingleImageWithPromptFeatureLayoutProps,
   DualImageInputRenderProps,
   ResultRenderProps,
+  CustomResultRenderProps,
   ProcessingModalRenderProps,
   SingleImageFeatureLayoutProps,
   DualImageFeatureLayoutProps,

package/src/presentation/layouts/types.ts

@@ -78,6 +78,17 @@ export interface ProcessingModalRenderProps {
   progress: number;
 }
 
+/**
+ * Custom result render props (includes feature state for comparison views)
+ */
+export interface CustomResultRenderProps {
+  processedUrl: string;
+  originalImageUri: string;
+  imageSize: number;
+  onSave: () => void;
+  onReset: () => void;
+}
+
 /**
  * Single image feature layout props
  */
@@ -92,8 +103,10 @@ export interface SingleImageFeatureLayoutProps {
   modalIcon?: string;
   /** Render the input section (photo upload) */
   renderInput: (props: SingleImageInputRenderProps) => ReactNode;
-  /** Render the result section */
-  renderResult: (props: ResultRenderProps) => ReactNode;
+  /** Render the result section (wrapped with AIGenerationResult) */
+  renderResult?: (props: ResultRenderProps) => ReactNode;
+  /** Render a fully custom result section (no AIGenerationResult wrapper) */
+  renderCustomResult?: (props: CustomResultRenderProps) => ReactNode;
   /** Optional description text */
   description?: string;
   /** Optional custom processing modal */
@@ -164,3 +177,52 @@ export interface DualImageVideoFeatureLayoutProps {
   /** Optional children to render before the input */
   children?: ReactNode;
 }
+
+/**
+ * Single image with prompt feature state
+ */
+export interface SingleImageWithPromptFeatureState {
+  imageUri: string | null;
+  prompt: string;
+  processedUrl: string | null;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+  selectImage: () => Promise<void>;
+  setPrompt: (prompt: string) => void;
+  process: () => Promise<void>;
+  save: () => Promise<void>;
+  reset: () => void;
+}
+
+/**
+ * Input render props for single image with prompt
+ */
+export interface SingleImageWithPromptInputRenderProps extends SingleImageInputRenderProps {
+  prompt: string;
+  onPromptChange: (prompt: string) => void;
+}
+
+/**
+ * Single image with prompt feature layout props
+ */
+export interface SingleImageWithPromptFeatureLayoutProps {
+  /** Feature hook return */
+  feature: SingleImageWithPromptFeatureState;
+  /** UI translations */
+  translations: BaseLayoutTranslations & PhotoUploadTranslations;
+  /** Modal translations */
+  modalTranslations: ModalTranslations;
+  /** Modal icon */
+  modalIcon?: string;
+  /** Render the input section (photo upload + prompt) */
+  renderInput: (props: SingleImageWithPromptInputRenderProps) => ReactNode;
+  /** Render the result section */
+  renderResult: (props: ResultRenderProps) => ReactNode;
+  /** Optional description text */
+  description?: string;
+  /** Optional custom processing modal */
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => ReactNode;
+  /** Optional children to render before the input */
+  children?: ReactNode;
+}