@umituz/react-native-ai-generation-content 1.88.7 → 1.88.9

package/package.json

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

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

@@ -59,6 +59,11 @@ export function CreationCard({
     canPostToFeed,
   });
 
+  // Determine if video is downloading (has video URL but no thumbnail yet)
+  const hasVideoOutput = !!creation.output?.videoUrl;
+  const hasThumbnail = !!creation.output?.thumbnailUrl;
+  const isVideoDownloading = hasVideoOutput && !hasThumbnail && creation.status === 'completed';
+
   const handlePress = useCallback(() => {
     if (__DEV__) {
       console.log("[CreationCard] handlePress TRIGGERED", {
@@ -127,6 +132,7 @@ export function CreationCard({
           thumbnailUrl={creation.output?.thumbnailUrl}
           status={creation.status}
           type={creation.type as CreationTypeId}
+          showDownloadLoading={isVideoDownloading}
         />
         {showBadges && creation.status && (
           <CreationBadges

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

@@ -25,6 +25,8 @@ interface CreationPreviewProps {
   readonly height?: number;
   /** Show loading indicator when in progress */
   readonly showLoadingIndicator?: boolean;
+  /** Show loading when video is downloading but no thumbnail yet */
+  readonly showDownloadLoading?: boolean;
 }
 
 export function CreationPreview({
@@ -35,6 +37,7 @@ export function CreationPreview({
   aspectRatio = 16 / 9,
   height,
   showLoadingIndicator = true,
+  showDownloadLoading = false,
 }: CreationPreviewProps) {
   // Determine preview type based on URI content, not creation type
   // This handles scenario-based videos (solo_martial_artist, ski_resort, etc.)
@@ -51,6 +54,7 @@ export function CreationPreview({
         aspectRatio={aspectRatio}
         height={height}
         showLoadingIndicator={showLoadingIndicator}
+        showDownloadLoading={showDownloadLoading}
       />
     );
   }

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

@@ -26,6 +26,8 @@ interface CreationVideoPreviewProps {
   readonly height?: number;
   /** Show loading indicator when in progress */
   readonly showLoadingIndicator?: boolean;
+  /** Show loading when video is downloading but no thumbnail yet */
+  readonly showDownloadLoading?: boolean;
 }
 
 export function CreationVideoPreview({
@@ -35,10 +37,12 @@ export function CreationVideoPreview({
   aspectRatio = 16 / 9,
   height,
   showLoadingIndicator = true,
+  showDownloadLoading = false,
 }: CreationVideoPreviewProps) {
   const tokens = useAppDesignTokens();
   const inProgress = isInProgress(status);
   const hasThumbnail = shouldShowThumbnail(thumbnailUrl, inProgress);
+  const isDownloading = showDownloadLoading && !hasThumbnail && !inProgress && _videoUrl;
 
   // Debug logging
   if (__DEV__) {
@@ -47,9 +51,11 @@ export function CreationVideoPreview({
       status,
       inProgress,
       hasThumbnail,
-      willShowSpinner: inProgress && showLoadingIndicator,
+      isDownloading,
+      videoUrl: _videoUrl,
+      willShowSpinner: (inProgress && showLoadingIndicator) || isDownloading,
       willShowThumbnail: hasThumbnail,
-      willShowPlaceholder: !inProgress && !hasThumbnail,
+      willShowPlaceholder: !inProgress && !hasThumbnail && !isDownloading,
     });
   }
 
@@ -106,8 +112,8 @@ export function CreationVideoPreview({
     [tokens, aspectRatio, height]
   );
 
-  // Show loading state
-  if (inProgress && showLoadingIndicator) {
+  // Show loading state (progress or downloading)
+  if ((inProgress && showLoadingIndicator) || isDownloading) {
     return (
       <View style={styles.container}>
         <View style={styles.loadingContainer}>

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

@@ -53,6 +53,7 @@ export interface GenericWizardFlowProps {
   readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
   readonly renderGenerating?: (progress: number) => React.ReactElement | null;
   readonly renderResult?: (result: unknown) => React.ReactElement | null;
+  readonly renderMascot?: () => React.ReactNode;
 }
 
 export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = (props) => {
@@ -79,6 +80,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = (props) => {
     renderPreview,
     renderGenerating,
     renderResult,
+    renderMascot,
   } = props;
 
   // Resolve scenario from prop or registry
@@ -139,6 +141,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = (props) => {
       renderPreview={renderPreview}
       renderGenerating={renderGenerating}
       renderResult={renderResult}
+      renderMascot={renderMascot}
     />
   );
 };

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

@@ -10,11 +10,13 @@ import { View, StyleSheet } from "react-native";
 interface IndeterminateProgressBarProps {
   readonly backgroundColor: string;
   readonly fillColor: string;
+  readonly height?: number;
 }
 
 export const IndeterminateProgressBar: React.FC<IndeterminateProgressBarProps> = ({
   backgroundColor,
   fillColor,
+  height = 8,
 }) => {
   const [position, setPosition] = useState(0);
   const directionRef = useRef(1);
@@ -39,7 +41,7 @@ export const IndeterminateProgressBar: React.FC<IndeterminateProgressBarProps> =
   }, []);
 
   return (
-    <View style={[styles.progressBar, { backgroundColor }]}>
+    <View style={[styles.progressBar, { backgroundColor, height }]}>
       <View
         style={[
           styles.progressFill,

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

@@ -44,4 +44,6 @@ export interface BaseWizardFlowProps {
   readonly t: (key: string) => string;
   /** Alert messages for error handling */
   readonly alertMessages?: AlertMessages;
+  /** Optional mascot renderer */
+  readonly renderMascot?: () => React.ReactNode;
 }

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

@@ -54,6 +54,7 @@ interface WizardFlowContentProps {
   readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
   readonly renderGenerating?: (progress: number) => React.ReactElement | null;
   readonly renderResult?: (result: unknown) => React.ReactElement | null;
+  readonly renderMascot?: () => React.ReactNode;
 }
 
 export const WizardFlowContent: React.FC<WizardFlowContentProps> = (props) => {
@@ -80,6 +81,7 @@ export const WizardFlowContent: React.FC<WizardFlowContentProps> = (props) => {
     renderPreview,
     renderGenerating,
     renderResult,
+    renderMascot,
   } = props;
 
   const tokens = useAppDesignTokens();
@@ -249,6 +251,7 @@ export const WizardFlowContent: React.FC<WizardFlowContentProps> = (props) => {
         renderPreview={renderPreview}
         renderGenerating={renderGenerating}
         renderResult={renderResult}
+        renderMascot={renderMascot}
       />
       <StarRatingPicker
         visible={showRatingPicker}

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

@@ -39,6 +39,7 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
   renderPreview,
   renderGenerating,
   renderResult,
+  renderMascot,
 }) => {
   if (!step) {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
@@ -53,7 +54,15 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
 
     case StepType.GENERATING: {
       if (renderGenerating) return renderGenerating(generationProgress);
-      return <GeneratingScreen progress={generationProgress} scenario={scenario} t={t} onDismiss={onDismissGenerating} />;
+      return (
+        <GeneratingScreen
+          progress={generationProgress}
+          scenario={scenario}
+          t={t}
+          onDismiss={onDismissGenerating}
+          renderMascot={renderMascot}
+        />
+      );
     }
 
     case StepType.RESULT_PREVIEW: {

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

@@ -30,4 +30,5 @@ export interface WizardStepRendererProps {
   readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
   readonly renderGenerating?: (progress: number) => React.ReactElement | null;
   readonly renderResult?: (result: unknown) => React.ReactElement | null;
+  readonly renderMascot?: () => React.ReactNode;
 }

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

@@ -28,6 +28,7 @@ interface GeneratingScreenProps {
   };
   readonly t: (key: string) => string;
   readonly onDismiss?: () => void;
+  readonly renderMascot?: () => React.ReactNode;
 }
 
 const PHASES = [
@@ -47,6 +48,7 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
   scenario,
   t,
   onDismiss,
+  renderMascot,
 }) => {
   const tokens = useAppDesignTokens();
   const phase = useGenerationPhase();
@@ -100,8 +102,8 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
       <View style={styles.container}>
         <View style={styles.content}>
           {/* Scanning Animation Container */}
-          <View style={[styles.scanFrame, { borderColor: tokens.colors.primary + "30" }]}>
-            <View style={[styles.scanOverlay, { backgroundColor: tokens.colors.primary + "10" }]}>
+          <View style={[styles.scanFrame, { borderColor: tokens.colors.primary + "20" }]}>
+            <View style={[styles.scanOverlay, { backgroundColor: tokens.colors.primary + "05" }]}>
               <Animated.View 
                 style={[
                   styles.scanLine, 
@@ -109,18 +111,24 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
                     backgroundColor: tokens.colors.primary,
                     transform: [{ translateY: scanTranslateY }],
                     shadowColor: tokens.colors.primary,
-                    shadowOpacity: 0.8,
+                    shadowOpacity: 0.6,
                     shadowRadius: 10,
                   }
                 ]} 
               />
             </View>
-            <Animated.View style={[styles.spinnerOverlay, { opacity: pulseAnim }]}>
-              <ActivityIndicator size="large" color={tokens.colors.primary} />
-            </Animated.View>
+            <View style={styles.mascotContainer}>
+              {renderMascot ? (
+                renderMascot()
+              ) : (
+                <Animated.View style={[styles.spinnerOverlay, { opacity: pulseAnim }]}>
+                  <ActivityIndicator size="large" color={tokens.colors.primary} />
+                </Animated.View>
+              )}
+            </View>
           </View>
 
-          <AtomicText type="headlineMedium" style={styles.title}>
+          <AtomicText type="headlineSmall" style={[styles.title, { color: tokens.colors.textPrimary }]}>
             {messages.title}
           </AtomicText>
 
@@ -181,17 +189,20 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
             {statusMessage}
           </AtomicText>
 
-          <View style={styles.progressContainer}>
-            <IndeterminateProgressBar
-              backgroundColor={tokens.colors.surfaceVariant}
-              fillColor={tokens.colors.primary}
-            />
+          {/* Combined Progress section */}
+          <View style={styles.progressSection}>
+            <View style={styles.progressWrapper}>
+              <IndeterminateProgressBar
+                backgroundColor={tokens.colors.surfaceVariant}
+                fillColor={tokens.colors.primary}
+                height={4}
+              />
+            </View>
+            <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary, opacity: 0.7 }]}>
+              {messages.hint}
+            </AtomicText>
           </View>
 
-          <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
-            {messages.hint}
-          </AtomicText>
-
           {onDismiss && (
             <TouchableOpacity
               style={[styles.backgroundHintButton, { borderColor: tokens.colors.primary }]}
@@ -218,17 +229,16 @@ const styles = StyleSheet.create({
     width: "85%",
     maxWidth: 400,
     alignItems: "center",
-    gap: 16,
   },
   scanFrame: {
-    width: 140,
-    height: 180,
-    borderRadius: 24,
-    borderWidth: 2,
+    width: 160,
+    height: 160,
+    borderRadius: 80, // Circular for better look
+    borderWidth: 1,
     overflow: "hidden",
     justifyContent: "center",
     alignItems: "center",
-    marginBottom: 8,
+    marginBottom: 24,
   },
   scanOverlay: {
     ...StyleSheet.absoluteFillObject,
@@ -236,70 +246,93 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   scanLine: {
-    width: "120%",
-    height: 3,
+    width: "140%",
+    height: 2,
     position: "absolute",
-    left: "-10%",
-    elevation: 4,
+    left: "-20%",
+  },
+  mascotContainer: {
+    zIndex: 5,
+    justifyContent: "center",
+    alignItems: "center",
   },
   spinnerOverlay: {
     zIndex: 10,
   },
   title: {
     textAlign: "center",
+    fontWeight: "900",
+    letterSpacing: -0.5,
+    marginBottom: 20,
   },
   stepsRow: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    marginVertical: 8,
+    marginVertical: 12,
+    width: "100%",
   },
   stepItem: {
     alignItems: "center",
-    gap: 6,
+    width: 70,
   },
   stepBubble: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
     justifyContent: "center",
     alignItems: "center",
-    borderWidth: 2,
+    borderWidth: 1,
+    marginBottom: 8,
   },
   stepNumber: {
-    fontSize: 12,
-    fontWeight: "700",
+    fontSize: 14,
+    fontWeight: "800",
   },
   stepLabel: {
-    fontSize: 11,
+    fontSize: 10,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
   },
   stepConnector: {
-    width: 40,
-    height: 2,
+    flex: 1,
+    height: 1,
+    maxWidth: 30,
     borderRadius: 1,
-    marginBottom: 18,
+    marginTop: -18, // Align with bubble center
     marginHorizontal: 4,
   },
   message: {
     textAlign: "center",
+    marginTop: 20,
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  progressSection: {
+    width: "100%",
+    alignItems: "center",
+    marginTop: 24,
+    gap: 12,
   },
-  progressContainer: {
+  progressWrapper: {
     width: "100%",
-    marginTop: 8,
+    height: 4, // Slimmer progress bar
   },
   hint: {
     textAlign: "center",
-    marginTop: 4,
   },
   backgroundHintButton: {
-    marginTop: 32,
-    paddingVertical: 16,
-    paddingHorizontal: 24,
+    marginTop: 40,
+    paddingVertical: 14,
+    paddingHorizontal: 32,
     borderWidth: 1,
-    borderRadius: 12,
+    borderRadius: 30, // Pill shaped
+    backgroundColor: "rgba(255,255,255,0.03)",
   },
   backgroundHint: {
     textAlign: "center",
-    fontWeight: "700",
+    fontSize: 15,
+    fontWeight: "800",
+    letterSpacing: -0.2,
   },
 });

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

@@ -32,6 +32,7 @@ export const ImageToVideoWizardFlow: React.FC<ImageToVideoWizardFlowProps> = (pr
     onBack,
     t,
     alertMessages,
+    renderMascot,
   } = props;
 
   const tokens = useAppDesignTokens();
@@ -82,6 +83,7 @@ export const ImageToVideoWizardFlow: React.FC<ImageToVideoWizardFlowProps> = (pr
         onBack={onBack}
         onTryAgain={onBack}
         t={t}
+        renderMascot={renderMascot}
         renderPreview={(onContinue) => <AutoSkipPreview onContinue={onContinue} />}
       />
     </View>

package/src/domains/prompts/domain/base/constants.ts

@@ -4,16 +4,51 @@
  * Optimized for Gemini 3 Pro Image (nano-banana-2) — natural language format
  */
 
-export const IDENTITY_PRESERVATION_CORE = `IDENTITY PRESERVATION (HIGHEST PRIORITY):
-Preserve the EXACT facial appearance from reference photos with 100% accuracy.
-Keep every detail identical: bone structure, eye shape, eye color, nose, lips, skin texture, freckles, moles.
-The person must be instantly recognizable — do NOT alter, idealize, or beautify any facial feature.`;
-
-export const IDENTITY_PRESERVATION_COUPLE = `IDENTITY PRESERVATION (HIGHEST PRIORITY):
-Preserve the EXACT facial appearance of BOTH people from reference photos with 100% accuracy.
-The resulting image MUST show BOTH individuals together as a couple.
-Keep every detail identical for both individuals: bone structure, eye shape, eye color, nose, lips, skin texture, freckles, moles.
-Both people must be instantly recognizable — do NOT alter, idealize, or beautify any facial features.`;
+export const IDENTITY_PRESERVATION_CORE = `IDENTITY PRESERVATION (CRITICAL - HIGHEST PRIORITY):
+Preserve the EXACT facial appearance from the uploaded photo with 100% accuracy.
+
+MANDATORY REQUIREMENTS:
+- Keep EVERY facial detail IDENTICAL: bone structure, facial proportions, eye shape, eye color, iris pattern, nose shape/size, lip shape/fullness, cheekbones, jawline, chin shape
+- Preserve ALL unique characteristics: skin texture, pores, fine lines, smile lines, freckles, moles, birthmarks, scars, dimples, skin undertones
+- Maintain EXACT facial proportions and face shape - do NOT elongate, widen, or alter face geometry
+- Keep hair texture, color, and styling consistent with the uploaded photo
+- Preserve the person's natural expression and personality - do NOT add artificial or exaggerated expressions
+
+STRICTLY PROHIBITED:
+- Do NOT alter, idealize, beautify, or enhance any facial feature
+- Do NOT make the face look younger, older, more attractive, or different in any way
+- Do NOT add makeup, change skin tone, or smooth skin texture artificially
+- Do NOT create a plastic, doll-like, or AI-generated appearance
+- Do NOT change facial proportions to fit beauty standards
+- The person MUST be instantly recognizable as themselves - if a friend wouldn't recognize them, the generation has failed
+
+RESULT REQUIREMENT:
+The final image must look like a REAL photograph of the ACTUAL person from the uploaded photo - not an idealized or beautified version.`;
+
+export const IDENTITY_PRESERVATION_COUPLE = `IDENTITY PRESERVATION (CRITICAL - HIGHEST PRIORITY):
+Preserve the EXACT facial appearance of BOTH people from the uploaded photos with 100% accuracy.
+
+MANDATORY REQUIREMENTS FOR BOTH PERSONS:
+- Keep EVERY facial detail IDENTICAL for both individuals: bone structure, facial proportions, eye shape, eye color, iris pattern, nose shape/size, lip shape/fullness, cheekbones, jawline, chin shape
+- Preserve ALL unique characteristics for both: skin texture, pores, fine lines, smile lines, freckles, moles, birthmarks, scars, dimples, skin undertones
+- Maintain EXACT facial proportions and face shapes for both people - do NOT alter face geometry
+- Keep hair texture, color, and styling consistent with uploaded photos for both
+- Preserve natural expressions and personalities of both individuals
+
+COUPLE REQUIREMENTS:
+- The resulting image MUST show BOTH individuals together as a couple
+- Both people must be positioned naturally together with authentic interaction
+- Maintain accurate relative heights and proportions between the two people
+
+STRICTLY PROHIBITED:
+- Do NOT alter, idealize, beautify, or enhance any facial feature of either person
+- Do NOT make either person look younger, older, or more attractive
+- Do NOT add makeup, change skin tones, or smooth skin artificially
+- Do NOT create plastic, doll-like, or AI-generated appearances
+- Both people MUST be instantly recognizable as themselves - if friends wouldn't recognize them, the generation has failed
+
+RESULT REQUIREMENT:
+The final image must look like a REAL photograph of the ACTUAL two people from the uploaded photos - not idealized or beautified versions.`;
 
 export const PHOTOREALISTIC_RENDERING = `STYLE: Photorealistic photograph, high quality, professional photography, natural lighting with realistic shadows.
 PROHIBITED: No anime, cartoons, illustrations, sketches, 3D renders, paintings, or non-photorealistic styles.`;

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

@@ -31,6 +31,7 @@ export const TextToImageWizardFlow: React.FC<TextToImageWizardFlowProps> = (prop
     onBack,
     t,
     alertMessages,
+    renderMascot,
   } = props;
 
   const tokens = useAppDesignTokens();
@@ -83,6 +84,7 @@ export const TextToImageWizardFlow: React.FC<TextToImageWizardFlowProps> = (prop
         onBack={onBack}
         onTryAgain={onBack}
         t={t}
+        renderMascot={renderMascot}
         renderPreview={(onContinue) => <AutoSkipPreview onContinue={onContinue} />}
       />
     </View>

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

@@ -32,6 +32,7 @@ export const TextToVideoWizardFlow: React.FC<TextToVideoWizardFlowProps> = (prop
     onBack,
     t,
     alertMessages,
+    renderMascot,
   } = props;
 
   const tokens = useAppDesignTokens();
@@ -84,6 +85,7 @@ export const TextToVideoWizardFlow: React.FC<TextToVideoWizardFlowProps> = (prop
         onBack={onBack}
         onTryAgain={onBack}
         t={t}
+        renderMascot={renderMascot}
         renderPreview={(onContinue) => <AutoSkipPreview onContinue={onContinue} />}
       />
     </View>

package/src/infrastructure/config/env.config.ts

@@ -29,7 +29,7 @@ export const env = {
 
   // Generation Timeouts
   generationImageTimeoutMs: getEnvValue("GENERATION_IMAGE_TIMEOUT_MS", 120000) as number,
-  generationVideoTimeoutMs: getEnvValue("GENERATION_VIDEO_TIMEOUT_MS", 300000) as number,
+  generationVideoTimeoutMs: getEnvValue("GENERATION_VIDEO_TIMEOUT_MS", 600000) as number, // 10 min for complex videos
   generationMultiImageTimeoutMs: getEnvValue("GENERATION_MULTI_IMAGE_TIMEOUT_MS", 120000) as number,
 
   // Polling Configuration