@umituz/react-native-ai-generation-content 1.27.22 → 1.27.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.27.22",
+  "version": "1.27.23",
   "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/wizard/presentation/components/WizardFlow.types.ts

@@ -0,0 +1,34 @@
+/**
+ * Shared types for Wizard Flow components
+ */
+
+import type { AlertMessages } from "../../../../../presentation/hooks/generation/types";
+
+export interface BaseWizardFlowProps {
+  /** Model ID for generation */
+  readonly model: string;
+  /** User ID for saving creations */
+  readonly userId?: string;
+  /** Is user authenticated (registered, not anonymous) */
+  readonly isAuthenticated: boolean;
+  /** Does user have premium subscription */
+  readonly hasPremium: boolean;
+  /** User's credit balance */
+  readonly creditBalance: number;
+  /** Are credits loaded */
+  readonly isCreditsLoaded: boolean;
+  /** Show auth modal with callback */
+  readonly onShowAuthModal: (callback: () => void) => void;
+  /** Show paywall */
+  readonly onShowPaywall: () => void;
+  /** Called when generation completes */
+  readonly onGenerationComplete?: () => void;
+  /** Called on generation error */
+  readonly onGenerationError?: (error: string) => void;
+  /** Called when back is pressed on first step */
+  readonly onBack: () => void;
+  /** Translation function */
+  readonly t: (key: string) => string;
+  /** Alert messages for error handling */
+  readonly alertMessages?: AlertMessages;
+}

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

@@ -4,9 +4,10 @@ import { StepType } from "../../../../../domain/entities/flow-config.types";
 import { GenericPhotoUploadScreen } from "../screens/GenericPhotoUploadScreen";
 import { GeneratingScreen } from "../screens/GeneratingScreen";
 import { TextInputScreen } from "../screens/TextInputScreen";
+import { SelectionScreen } from "../screens/SelectionScreen";
 import { ScenarioPreviewScreen } from "../../../../scenarios/presentation/screens/ScenarioPreviewScreen";
 import { ResultPreviewScreen } from "../../../../result-preview/presentation/components/ResultPreviewScreen";
-import { getWizardStepConfig, getTextInputConfig, getUploadedImage } from "./WizardStepRenderer.utils";
+import { getWizardStepConfig, getTextInputConfig, getSelectionConfig, getUploadedImage } from "./WizardStepRenderer.utils";
 import type { WizardStepRendererProps } from "./WizardStepRenderer.types";
 
 export type { WizardStepRendererProps } from "./WizardStepRenderer.types";
@@ -166,6 +167,43 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
       );
     }
 
+    case StepType.FEATURE_SELECTION: {
+      const selectionConfig = getSelectionConfig(step.config);
+      const titleKey = selectionConfig?.titleKey ?? `wizard.steps.${step.id}.title`;
+      const subtitleKey = selectionConfig?.subtitleKey ?? `wizard.steps.${step.id}.subtitle`;
+      const existingValue = customData[step.id] as string | string[] | undefined;
+
+      const options = selectionConfig?.options ?? [];
+
+      return (
+        <SelectionScreen
+          stepId={step.id}
+          translations={{
+            title: t(titleKey),
+            subtitle: subtitleKey ? t(subtitleKey) : undefined,
+            continueButton: t("common.continue"),
+            backButton: t("common.back"),
+          }}
+          options={options.map((opt) => ({
+            id: opt.id,
+            label: opt.label,
+            icon: opt.icon,
+            value: opt.value,
+          }))}
+          config={{
+            multiSelect: selectionConfig?.multiSelect ?? false,
+            required: step.required ?? true,
+          }}
+          initialValue={existingValue}
+          onBack={onBack}
+          onContinue={(value) => {
+            // Store selection value
+            onPhotoContinue(step.id, { uri: String(value), selection: value, previewUrl: "" } as any);
+          }}
+        />
+      );
+    }
+
     default:
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.warn("[WizardStepRenderer] Unhandled step type", { stepType: step.type });

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

@@ -2,6 +2,7 @@ import type {
   WizardStepConfig,
   TextInputStepConfig,
   PhotoUploadStepConfig,
+  SelectionStepConfig,
 } from "../../domain/entities/wizard-config.types";
 import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
 
@@ -39,3 +40,9 @@ export function getUploadedImage(data: unknown): UploadedImage | undefined {
   if (isUploadedImage(data)) return data;
   return undefined;
 }
+
+export function getSelectionConfig(config: unknown): SelectionStepConfig | undefined {
+  if (!isRecord(config)) return undefined;
+  if (config.type === "selection") return config as unknown as SelectionStepConfig;
+  return undefined;
+}

package/src/domains/generation/wizard/presentation/components/step-renderers/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Step Renderers
+ * Separated renderer functions for each wizard step type
+ */
+
+export { renderPreviewStep, type PreviewStepProps } from "./renderPreviewStep";
+export { renderGeneratingStep, type GeneratingStepProps } from "./renderGeneratingStep";
+export { renderResultStep, type ResultStepProps } from "./renderResultStep";

package/src/domains/generation/wizard/presentation/components/step-renderers/renderGeneratingStep.tsx

@@ -0,0 +1,24 @@
+/**
+ * Generating Step Renderer
+ */
+
+import React from "react";
+import { GeneratingScreen } from "../../screens/GeneratingScreen";
+import type { WizardScenarioData } from "../../hooks/useWizardGeneration";
+
+export interface GeneratingStepProps {
+  readonly progress: number;
+  readonly scenario: WizardScenarioData | undefined;
+  readonly t: (key: string) => string;
+  readonly renderGenerating?: (progress: number) => React.ReactElement | null;
+}
+
+export function renderGeneratingStep({
+  progress,
+  scenario,
+  t,
+  renderGenerating,
+}: GeneratingStepProps): React.ReactElement | null {
+  if (renderGenerating) return renderGenerating(progress);
+  return <GeneratingScreen progress={progress} scenario={scenario} t={t} />;
+}

package/src/domains/generation/wizard/presentation/components/step-renderers/renderPreviewStep.tsx

@@ -0,0 +1,41 @@
+/**
+ * Preview Step Renderer
+ */
+
+import React from "react";
+import { ScenarioPreviewScreen } from "../../../../../scenarios/presentation/screens/ScenarioPreviewScreen";
+import type { ScenarioData } from "../../../../../scenarios/domain/scenario.types";
+import type { StepDefinition } from "../../../../../../domain/entities/flow-config.types";
+
+export interface PreviewStepProps {
+  readonly step: StepDefinition;
+  readonly scenario: ScenarioData | undefined;
+  readonly onNext: () => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
+}
+
+export function renderPreviewStep({
+  scenario,
+  onNext,
+  onBack,
+  t,
+  renderPreview,
+}: PreviewStepProps): React.ReactElement | null {
+  if (renderPreview) return renderPreview(onNext);
+  if (!scenario) return null;
+
+  return (
+    <ScenarioPreviewScreen
+      scenario={scenario}
+      translations={{
+        continueButton: t("common.continue"),
+        whatToExpect: t("scenarioPreview.whatToExpect"),
+      }}
+      onContinue={onNext}
+      onBack={onBack}
+      t={t}
+    />
+  );
+}

package/src/domains/generation/wizard/presentation/components/step-renderers/renderResultStep.tsx

@@ -0,0 +1,69 @@
+/**
+ * Result Step Renderer
+ */
+
+import React from "react";
+import { extractMediaUrl, getMediaTypeFromUrl } from "@umituz/react-native-design-system";
+import { ResultPreviewScreen } from "../../../../../result-preview/presentation/components/ResultPreviewScreen";
+
+export interface ResultStepProps {
+  readonly generationResult: unknown;
+  readonly isSaving: boolean;
+  readonly isSharing: boolean;
+  readonly showRating: boolean;
+  readonly onDownload: () => void;
+  readonly onShare: () => void;
+  readonly onRate?: () => void;
+  readonly onTryAgain?: () => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly renderResult?: (result: unknown) => React.ReactElement | null;
+}
+
+export function renderResultStep({
+  generationResult,
+  isSaving,
+  isSharing,
+  showRating,
+  onDownload,
+  onShare,
+  onRate,
+  onTryAgain,
+  onBack,
+  t,
+  renderResult,
+}: ResultStepProps): React.ReactElement | null {
+  if (renderResult) return renderResult(generationResult);
+
+  const media = extractMediaUrl(generationResult);
+  if (!media) return null;
+
+  const isVideo = media.isVideo || getMediaTypeFromUrl(media.url) === "video";
+  const handleTryAgain = onTryAgain ?? onBack;
+
+  return (
+    <ResultPreviewScreen
+      imageUrl={isVideo ? undefined : media.url}
+      videoUrl={isVideo ? media.url : undefined}
+      isSaving={isSaving}
+      isSharing={isSharing}
+      onDownload={onDownload}
+      onShare={onShare}
+      onRate={onRate}
+      onTryAgain={handleTryAgain}
+      onNavigateBack={handleTryAgain}
+      hideLabel
+      iconOnly
+      showTryAgain
+      showRating={showRating}
+      translations={{
+        title: t("generation.result.title"),
+        saveButton: t("generation.result.save"),
+        saving: t("generation.result.saving"),
+        shareButton: t("generation.result.share"),
+        sharing: t("generation.result.sharing"),
+        tryAnother: t("generation.result.tryAnother"),
+      }}
+    />
+  );
+}

package/src/domains/generation/wizard/presentation/screens/SelectionScreen.styles.ts

@@ -0,0 +1,63 @@
+/**
+ * SelectionScreen Styles
+ */
+
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+  },
+  backButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  backButtonText: {
+    marginLeft: 4,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  title: {
+    marginBottom: 8,
+  },
+  optionsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  optionCard: {
+    flex: 1,
+    minWidth: "45%",
+    padding: 16,
+    borderWidth: 2,
+    alignItems: "center",
+    position: "relative",
+  },
+  optionLabel: {
+    marginTop: 8,
+    textAlign: "center",
+  },
+  checkmark: {
+    position: "absolute",
+    top: 8,
+    right: 8,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  footer: {
+    borderTopWidth: 1,
+    borderTopColor: "rgba(0,0,0,0.1)",
+  },
+  continueButton: {
+    width: "100%",
+  },
+});

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

@@ -0,0 +1,148 @@
+/**
+ * SelectionScreen
+ * Generic selection step for wizard flows (duration, style, etc.)
+ */
+
+import React, { useState, useCallback } from "react";
+import { View, ScrollView, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { styles } from "./SelectionScreen.styles";
+import type { SelectionScreenProps } from "./SelectionScreen.types";
+
+export type {
+  SelectionOption,
+  SelectionScreenTranslations,
+  SelectionScreenConfig,
+  SelectionScreenProps,
+} from "./SelectionScreen.types";
+
+export const SelectionScreen: React.FC<SelectionScreenProps> = ({
+  stepId: _stepId,
+  translations,
+  options,
+  config,
+  initialValue,
+  onBack,
+  onContinue,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [selected, setSelected] = useState<string | string[]>(() => {
+    if (initialValue) return initialValue;
+    if (config?.multiSelect) return [];
+    return "";
+  });
+
+  const isMultiSelect = config?.multiSelect ?? false;
+  const isRequired = config?.required ?? true;
+
+  const canContinue = isRequired
+    ? isMultiSelect
+      ? (selected as string[]).length > 0
+      : selected !== ""
+    : true;
+
+  const handleSelect = useCallback(
+    (optionId: string) => {
+      if (isMultiSelect) {
+        setSelected((prev) => {
+          const arr = prev as string[];
+          return arr.includes(optionId)
+            ? arr.filter((id) => id !== optionId)
+            : [...arr, optionId];
+        });
+      } else {
+        setSelected(optionId);
+      }
+    },
+    [isMultiSelect],
+  );
+
+  const handleContinue = useCallback(() => {
+    if (canContinue) {
+      onContinue(selected);
+    }
+  }, [canContinue, selected, onContinue]);
+
+  const isOptionSelected = useCallback(
+    (optionId: string): boolean => {
+      if (isMultiSelect) {
+        return (selected as string[]).includes(optionId);
+      }
+      return selected === optionId;
+    },
+    [isMultiSelect, selected],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <View style={[styles.header, { paddingHorizontal: tokens.spacing.md }]}>
+        <AtomicButton variant="text" size="sm" onPress={onBack}>
+          <View style={styles.backButtonContent}>
+            <AtomicIcon name="arrow-back" size="sm" color="textPrimary" />
+            {translations.backButton ? (
+              <AtomicText type="labelMedium" color="textPrimary" style={styles.backButtonText}>
+                {translations.backButton}
+              </AtomicText>
+            ) : null}
+          </View>
+        </AtomicButton>
+      </View>
+
+      <ScrollView style={styles.scrollView} contentContainerStyle={{ padding: tokens.spacing.md }}>
+        <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>
+          {translations.title}
+        </AtomicText>
+
+        {translations.subtitle ? (
+          <AtomicText type="bodyMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.lg }}>
+            {translations.subtitle}
+          </AtomicText>
+        ) : null}
+
+        <View style={styles.optionsGrid}>
+          {options.map((option) => {
+            const isSelected = isOptionSelected(option.id);
+            return (
+              <TouchableOpacity
+                key={option.id}
+                style={[
+                  styles.optionCard,
+                  {
+                    backgroundColor: isSelected ? tokens.colors.primaryContainer : tokens.colors.backgroundSecondary,
+                    borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                    borderRadius: tokens.borders.radius.md,
+                  },
+                ]}
+                onPress={() => handleSelect(option.id)}
+                activeOpacity={0.7}
+              >
+                {option.icon ? (
+                  <AtomicIcon name={option.icon} size="lg" color={isSelected ? "primary" : "textSecondary"} />
+                ) : null}
+                <AtomicText type="labelLarge" color={isSelected ? "primary" : "textPrimary"} style={styles.optionLabel}>
+                  {option.label}
+                </AtomicText>
+                {isSelected ? (
+                  <View style={[styles.checkmark, { backgroundColor: tokens.colors.primary }]}>
+                    <AtomicIcon name="checkmark" size="xs" color="onPrimary" />
+                  </View>
+                ) : null}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </ScrollView>
+
+      <View style={[styles.footer, { padding: tokens.spacing.md }]}>
+        <AtomicButton variant="primary" size="lg" onPress={handleContinue} disabled={!canContinue} style={styles.continueButton}>
+          {translations.continueButton}
+        </AtomicButton>
+      </View>
+    </View>
+  );
+};

package/src/domains/generation/wizard/presentation/screens/SelectionScreen.types.ts

@@ -0,0 +1,32 @@
+/**
+ * SelectionScreen Types
+ */
+
+export interface SelectionOption {
+  readonly id: string;
+  readonly label: string;
+  readonly icon?: string;
+  readonly value: unknown;
+}
+
+export interface SelectionScreenTranslations {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly continueButton: string;
+  readonly backButton?: string;
+}
+
+export interface SelectionScreenConfig {
+  readonly multiSelect?: boolean;
+  readonly required?: boolean;
+}
+
+export interface SelectionScreenProps {
+  readonly stepId: string;
+  readonly translations: SelectionScreenTranslations;
+  readonly options: readonly SelectionOption[];
+  readonly config?: SelectionScreenConfig;
+  readonly initialValue?: string | string[];
+  readonly onBack: () => void;
+  readonly onContinue: (selectedValue: string | string[]) => void;
+}

package/src/domains/generation/wizard/presentation/screens/TextInputScreen.styles.ts

@@ -0,0 +1,48 @@
+/**
+ * TextInputScreen Styles
+ */
+
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+  },
+  backButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  backButtonText: {
+    marginLeft: 4,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  title: {
+    marginBottom: 8,
+  },
+  inputContainer: {
+    borderWidth: 1,
+    padding: 12,
+  },
+  textInput: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  charCount: {
+    textAlign: "right",
+    marginTop: 4,
+  },
+  footer: {
+    borderTopWidth: 1,
+    borderTopColor: "rgba(0,0,0,0.1)",
+  },
+  continueButton: {
+    width: "100%",
+  },
+});

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

@@ -1,41 +1,24 @@
 /**
- * Text Input Screen
+ * TextInputScreen
  * Generic text input step for wizard flows
  */
 
 import React, { useState, useCallback } from "react";
-import { View, ScrollView, TextInput, StyleSheet } from "react-native";
+import { View, ScrollView, TextInput } from "react-native";
 import {
   AtomicText,
   AtomicButton,
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import { styles } from "./TextInputScreen.styles";
+import type { TextInputScreenProps } from "./TextInputScreen.types";
 
-export interface TextInputScreenTranslations {
-  readonly title: string;
-  readonly subtitle?: string;
-  readonly placeholder: string;
-  readonly continueButton: string;
-  readonly backButton?: string;
-  readonly examplesTitle?: string;
-}
-
-export interface TextInputScreenConfig {
-  readonly minLength?: number;
-  readonly maxLength?: number;
-  readonly multiline?: boolean;
-}
-
-export interface TextInputScreenProps {
-  readonly stepId: string;
-  readonly translations: TextInputScreenTranslations;
-  readonly config?: TextInputScreenConfig;
-  readonly examplePrompts?: string[];
-  readonly initialValue?: string;
-  readonly onBack: () => void;
-  readonly onContinue: (text: string) => void;
-}
+export type {
+  TextInputScreenTranslations,
+  TextInputScreenConfig,
+  TextInputScreenProps,
+} from "./TextInputScreen.types";
 
 export const TextInputScreen: React.FC<TextInputScreenProps> = ({
   stepId: _stepId,
@@ -66,11 +49,7 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
       <View style={[styles.header, { paddingHorizontal: tokens.spacing.md }]}>
-        <AtomicButton
-          variant="text"
-          size="sm"
-          onPress={onBack}
-        >
+        <AtomicButton variant="text" size="sm" onPress={onBack}>
           <View style={styles.backButtonContent}>
             <AtomicIcon name="arrow-back" size="sm" color="textPrimary" />
             {translations.backButton ? (
@@ -92,11 +71,7 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
         </AtomicText>
 
         {translations.subtitle ? (
-          <AtomicText
-            type="bodyMedium"
-            color="textSecondary"
-            style={{ marginBottom: tokens.spacing.lg }}
-          >
+          <AtomicText type="bodyMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.lg }}>
             {translations.subtitle}
           </AtomicText>
         ) : null}
@@ -112,13 +87,7 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
           ]}
         >
           <TextInput
-            style={[
-              styles.textInput,
-              {
-                color: tokens.colors.textPrimary,
-                minHeight: config?.multiline ? 120 : 48,
-              },
-            ]}
+            style={[styles.textInput, { color: tokens.colors.textPrimary, minHeight: config?.multiline ? 120 : 48 }]}
             placeholder={translations.placeholder}
             placeholderTextColor={tokens.colors.textTertiary}
             value={text}
@@ -127,22 +96,14 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
             maxLength={maxLength}
             textAlignVertical="top"
           />
-          <AtomicText
-            type="bodySmall"
-            color="textTertiary"
-            style={styles.charCount}
-          >
+          <AtomicText type="bodySmall" color="textTertiary" style={styles.charCount}>
             {text.length}/{maxLength}
           </AtomicText>
         </View>
 
         {examplePrompts.length > 0 && translations.examplesTitle ? (
           <View style={{ marginTop: tokens.spacing.lg }}>
-            <AtomicText
-              type="labelLarge"
-              color="textSecondary"
-              style={{ marginBottom: tokens.spacing.sm }}
-            >
+            <AtomicText type="labelLarge" color="textSecondary" style={{ marginBottom: tokens.spacing.sm }}>
               {translations.examplesTitle}
             </AtomicText>
             {examplePrompts.slice(0, 4).map((example, index) => (
@@ -161,59 +122,10 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
       </ScrollView>
 
       <View style={[styles.footer, { padding: tokens.spacing.md }]}>
-        <AtomicButton
-          variant="primary"
-          size="lg"
-          onPress={handleContinue}
-          disabled={!canContinue}
-          style={styles.continueButton}
-        >
+        <AtomicButton variant="primary" size="lg" onPress={handleContinue} disabled={!canContinue} style={styles.continueButton}>
           {translations.continueButton}
         </AtomicButton>
       </View>
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 8,
-  },
-  backButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  backButtonText: {
-    marginLeft: 4,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  title: {
-    marginBottom: 8,
-  },
-  inputContainer: {
-    borderWidth: 1,
-    padding: 12,
-  },
-  textInput: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  charCount: {
-    textAlign: "right",
-    marginTop: 4,
-  },
-  footer: {
-    borderTopWidth: 1,
-    borderTopColor: "rgba(0,0,0,0.1)",
-  },
-  continueButton: {
-    width: "100%",
-  },
-});

package/src/domains/generation/wizard/presentation/screens/TextInputScreen.types.ts

@@ -0,0 +1,28 @@
+/**
+ * TextInputScreen Types
+ */
+
+export interface TextInputScreenTranslations {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly placeholder: string;
+  readonly continueButton: string;
+  readonly backButton?: string;
+  readonly examplesTitle?: string;
+}
+
+export interface TextInputScreenConfig {
+  readonly minLength?: number;
+  readonly maxLength?: number;
+  readonly multiline?: boolean;
+}
+
+export interface TextInputScreenProps {
+  readonly stepId: string;
+  readonly translations: TextInputScreenTranslations;
+  readonly config?: TextInputScreenConfig;
+  readonly examplePrompts?: string[];
+  readonly initialValue?: string;
+  readonly onBack: () => void;
+  readonly onContinue: (text: string) => void;
+}

package/src/domains/generation/wizard/presentation/screens/index.ts

@@ -11,3 +11,10 @@ export type {
   TextInputScreenConfig,
   TextInputScreenProps,
 } from "./TextInputScreen";
+export { SelectionScreen } from "./SelectionScreen";
+export type {
+  SelectionOption,
+  SelectionScreenTranslations,
+  SelectionScreenConfig,
+  SelectionScreenProps,
+} from "./SelectionScreen";

package/src/features/image-to-video/presentation/index.ts

@@ -3,3 +3,7 @@ export * from "./hooks";
 
 // Components
 export * from "./components";
+
+// Screens
+export { ImageToVideoWizardFlow } from "./screens/ImageToVideoWizardFlow";
+export type { ImageToVideoWizardFlowProps } from "./screens/ImageToVideoWizardFlow";

package/src/features/image-to-video/presentation/screens/ImageToVideoWizardFlow.tsx

@@ -0,0 +1,94 @@
+/**
+ * ImageToVideoWizardFlow
+ * Step-based wizard flow for image-to-video generation
+ */
+
+import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { GenericWizardFlow } from "../../../../domains/generation/wizard/presentation/components";
+import { IMAGE_TO_VIDEO_WIZARD_CONFIG } from "../../../../domains/generation/wizard/configs";
+import type { WizardScenarioData } from "../../../../domains/generation/wizard/presentation/hooks/useWizardGeneration";
+import type { BaseWizardFlowProps } from "../../../../domains/generation/wizard/presentation/components/WizardFlow.types";
+import type { AlertMessages } from "../../../../presentation/hooks/generation/types";
+
+const AutoSkipPreview: React.FC<{ onContinue: () => void }> = ({ onContinue }) => {
+  const hasContinued = useRef(false);
+  useEffect(() => {
+    if (!hasContinued.current) {
+      hasContinued.current = true;
+      onContinue();
+    }
+  }, [onContinue]);
+  return null;
+};
+
+export type ImageToVideoWizardFlowProps = BaseWizardFlowProps;
+
+export const ImageToVideoWizardFlow: React.FC<ImageToVideoWizardFlowProps> = (props) => {
+  const {
+    model,
+    userId,
+    isAuthenticated,
+    hasPremium,
+    creditBalance,
+    isCreditsLoaded,
+    onShowAuthModal,
+    onShowPaywall,
+    onGenerationComplete,
+    onGenerationError,
+    onBack,
+    t,
+    alertMessages,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+
+  const scenario: WizardScenarioData = useMemo(
+    () => ({ id: "image-to-video", outputType: "video", model, title: t("image2video.title") }),
+    [model, t],
+  );
+
+  const defaultAlerts = useMemo<AlertMessages>(
+    () => ({
+      networkError: t("common.errors.network"),
+      policyViolation: t("common.errors.policy"),
+      saveFailed: t("common.errors.saveFailed"),
+      creditFailed: t("common.errors.creditFailed"),
+      unknown: t("common.errors.unknown"),
+    }),
+    [t],
+  );
+
+  const handleGenerationStart = useCallback(
+    (_data: Record<string, unknown>, proceed: () => void) => {
+      if (!isAuthenticated) { onShowAuthModal(proceed); return; }
+      if (!hasPremium && isCreditsLoaded && creditBalance < 1) { onShowPaywall(); return; }
+      proceed();
+    },
+    [isAuthenticated, hasPremium, creditBalance, isCreditsLoaded, onShowAuthModal, onShowPaywall],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <GenericWizardFlow
+        featureConfig={IMAGE_TO_VIDEO_WIZARD_CONFIG}
+        scenario={scenario}
+        userId={userId}
+        alertMessages={alertMessages ?? defaultAlerts}
+        onGenerationStart={handleGenerationStart}
+        onGenerationComplete={onGenerationComplete}
+        onGenerationError={onGenerationError}
+        onCreditsExhausted={onShowPaywall}
+        onBack={onBack}
+        onTryAgain={onBack}
+        t={t}
+        renderPreview={(onContinue) => <AutoSkipPreview onContinue={onContinue} />}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

package/src/features/text-to-image/presentation/index.ts

@@ -1,7 +1,9 @@
 /**
  * Text-to-Image Presentation Layer
- * Hooks and components exports
+ * Hooks, components, and screens exports
  */
 
 export * from "./hooks";
 export * from "./components";
+export { TextToImageWizardFlow } from "./screens/TextToImageWizardFlow";
+export type { TextToImageWizardFlowProps } from "./screens/TextToImageWizardFlow";

package/src/features/text-to-image/presentation/screens/TextToImageWizardFlow.tsx

@@ -0,0 +1,94 @@
+/**
+ * TextToImageWizardFlow
+ * Step-based wizard flow for text-to-image generation
+ */
+
+import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { GenericWizardFlow } from "../../../../domains/generation/wizard/presentation/components";
+import { TEXT_TO_IMAGE_WIZARD_CONFIG } from "../../../../domains/generation/wizard/configs";
+import type { WizardScenarioData } from "../../../../domains/generation/wizard/presentation/hooks/useWizardGeneration";
+import type { BaseWizardFlowProps } from "../../../../domains/generation/wizard/presentation/components/WizardFlow.types";
+import type { AlertMessages } from "../../../../presentation/hooks/generation/types";
+
+const AutoSkipPreview: React.FC<{ onContinue: () => void }> = ({ onContinue }) => {
+  const hasContinued = useRef(false);
+  useEffect(() => {
+    if (!hasContinued.current) {
+      hasContinued.current = true;
+      onContinue();
+    }
+  }, [onContinue]);
+  return null;
+};
+
+export type TextToImageWizardFlowProps = BaseWizardFlowProps;
+
+export const TextToImageWizardFlow: React.FC<TextToImageWizardFlowProps> = (props) => {
+  const {
+    model,
+    userId,
+    isAuthenticated,
+    hasPremium,
+    creditBalance,
+    isCreditsLoaded,
+    onShowAuthModal,
+    onShowPaywall,
+    onGenerationComplete,
+    onGenerationError,
+    onBack,
+    t,
+    alertMessages,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+
+  const scenario: WizardScenarioData = useMemo(
+    () => ({ id: "text-to-image", outputType: "image", model, title: t("text2image.title") }),
+    [model, t],
+  );
+
+  const defaultAlerts = useMemo<AlertMessages>(
+    () => ({
+      networkError: t("common.errors.network"),
+      policyViolation: t("common.errors.policy"),
+      saveFailed: t("common.errors.saveFailed"),
+      creditFailed: t("common.errors.creditFailed"),
+      unknown: t("common.errors.unknown"),
+    }),
+    [t],
+  );
+
+  const handleGenerationStart = useCallback(
+    (_data: Record<string, unknown>, proceed: () => void) => {
+      if (!isAuthenticated) { onShowAuthModal(proceed); return; }
+      if (!hasPremium && isCreditsLoaded && creditBalance < 1) { onShowPaywall(); return; }
+      proceed();
+    },
+    [isAuthenticated, hasPremium, creditBalance, isCreditsLoaded, onShowAuthModal, onShowPaywall],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <GenericWizardFlow
+        featureConfig={TEXT_TO_IMAGE_WIZARD_CONFIG}
+        scenario={scenario}
+        userId={userId}
+        alertMessages={alertMessages ?? defaultAlerts}
+        onGenerationStart={handleGenerationStart}
+        onGenerationComplete={onGenerationComplete}
+        onGenerationError={onGenerationError}
+        onCreditsExhausted={onShowPaywall}
+        onBack={onBack}
+        onTryAgain={onBack}
+        t={t}
+        renderPreview={(onContinue) => <AutoSkipPreview onContinue={onContinue} />}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

package/src/features/text-to-video/presentation/index.ts

@@ -5,3 +5,5 @@
 
 export * from "./hooks";
 export * from "./components";
+export { TextToVideoWizardFlow } from "./screens/TextToVideoWizardFlow";
+export type { TextToVideoWizardFlowProps } from "./screens/TextToVideoWizardFlow";

package/src/features/text-to-video/presentation/screens/TextToVideoWizardFlow.tsx

@@ -0,0 +1,94 @@
+/**
+ * TextToVideoWizardFlow
+ * Step-based wizard flow for text-to-video generation
+ */
+
+import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { GenericWizardFlow } from "../../../../domains/generation/wizard/presentation/components";
+import { TEXT_TO_VIDEO_WIZARD_CONFIG } from "../../../../domains/generation/wizard/configs";
+import type { WizardScenarioData } from "../../../../domains/generation/wizard/presentation/hooks/useWizardGeneration";
+import type { BaseWizardFlowProps } from "../../../../domains/generation/wizard/presentation/components/WizardFlow.types";
+import type { AlertMessages } from "../../../../presentation/hooks/generation/types";
+
+const AutoSkipPreview: React.FC<{ onContinue: () => void }> = ({ onContinue }) => {
+  const hasContinued = useRef(false);
+  useEffect(() => {
+    if (!hasContinued.current) {
+      hasContinued.current = true;
+      onContinue();
+    }
+  }, [onContinue]);
+  return null;
+};
+
+export type TextToVideoWizardFlowProps = BaseWizardFlowProps;
+
+export const TextToVideoWizardFlow: React.FC<TextToVideoWizardFlowProps> = (props) => {
+  const {
+    model,
+    userId,
+    isAuthenticated,
+    hasPremium,
+    creditBalance,
+    isCreditsLoaded,
+    onShowAuthModal,
+    onShowPaywall,
+    onGenerationComplete,
+    onGenerationError,
+    onBack,
+    t,
+    alertMessages,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+
+  const scenario: WizardScenarioData = useMemo(
+    () => ({ id: "text-to-video", outputType: "video", model, title: t("text2video.title") }),
+    [model, t],
+  );
+
+  const defaultAlerts = useMemo<AlertMessages>(
+    () => ({
+      networkError: t("common.errors.network"),
+      policyViolation: t("common.errors.policy"),
+      saveFailed: t("common.errors.saveFailed"),
+      creditFailed: t("common.errors.creditFailed"),
+      unknown: t("common.errors.unknown"),
+    }),
+    [t],
+  );
+
+  const handleGenerationStart = useCallback(
+    (_data: Record<string, unknown>, proceed: () => void) => {
+      if (!isAuthenticated) { onShowAuthModal(proceed); return; }
+      if (!hasPremium && isCreditsLoaded && creditBalance < 1) { onShowPaywall(); return; }
+      proceed();
+    },
+    [isAuthenticated, hasPremium, creditBalance, isCreditsLoaded, onShowAuthModal, onShowPaywall],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <GenericWizardFlow
+        featureConfig={TEXT_TO_VIDEO_WIZARD_CONFIG}
+        scenario={scenario}
+        userId={userId}
+        alertMessages={alertMessages ?? defaultAlerts}
+        onGenerationStart={handleGenerationStart}
+        onGenerationComplete={onGenerationComplete}
+        onGenerationError={onGenerationError}
+        onCreditsExhausted={onShowPaywall}
+        onBack={onBack}
+        onTryAgain={onBack}
+        t={t}
+        renderPreview={(onContinue) => <AutoSkipPreview onContinue={onContinue} />}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});