@umituz/react-native-ai-generation-content 1.83.90 → 1.83.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.83.90",
+  "version": "1.83.91",
   "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/CreationCardCompact.tsx

@@ -0,0 +1,72 @@
+/**
+ * CreationCardCompact Component
+ * Compact 2-column grid card — image fills the card, badge overlay only
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { CreationPreview } from "./CreationPreview";
+import { CreationBadges } from "./CreationBadges";
+import { getPreviewUrl } from "../../domain/utils";
+import type { CreationCardData, CreationCardCallbacks } from "./CreationCard.types";
+import type { CreationTypeId } from "../../domain/types";
+
+interface CreationCardCompactProps {
+  readonly creation: CreationCardData;
+  readonly callbacks?: CreationCardCallbacks;
+}
+
+export function CreationCardCompact({ creation, callbacks }: CreationCardCompactProps) {
+  const tokens = useAppDesignTokens();
+  const previewUrl = getPreviewUrl(creation.output) || creation.uri;
+
+  const handlePress = useCallback(() => {
+    callbacks?.onPress?.(creation);
+  }, [callbacks, creation]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        card: {
+          flex: 1,
+          borderRadius: 12,
+          overflow: "hidden",
+          aspectRatio: 3 / 4,
+          backgroundColor: tokens.colors.surface,
+        },
+        previewWrapper: {
+          width: "100%",
+          height: "100%",
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <TouchableOpacity
+      style={styles.card}
+      onPress={handlePress}
+      activeOpacity={callbacks?.onPress ? 0.85 : 1}
+      disabled={!callbacks?.onPress}
+    >
+      <View style={styles.previewWrapper}>
+        <CreationPreview
+          uri={previewUrl}
+          thumbnailUrl={creation.output?.thumbnailUrl}
+          status={creation.status}
+          type={creation.type as CreationTypeId}
+          aspectRatio={3 / 4}
+          showLoadingIndicator
+        />
+      </View>
+      {creation.status && (
+        <CreationBadges
+          status={creation.status}
+          type={creation.type as CreationTypeId}
+          showType={false}
+        />
+      )}
+    </TouchableOpacity>
+  );
+}

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

@@ -4,8 +4,8 @@
  * Uses expo-image for caching and performance
  */
 
-import React, { useMemo, useState, useCallback } from "react";
-import { View, StyleSheet } from "react-native";
+import React, { useMemo, useState, useCallback, useRef, useEffect } from "react";
+import { View, StyleSheet, Animated } from "react-native";
 import { AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { AtomicImage } from "@umituz/react-native-design-system/image";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -40,6 +40,19 @@ export function CreationImagePreview({
   const typeIcon = getTypeIcon(type);
   const [imageError, setImageError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const pulseAnim = useRef(new Animated.Value(0.4)).current;
+
+  useEffect(() => {
+    if (!inProgress) return;
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, { toValue: 1, duration: 1100, useNativeDriver: true }),
+        Animated.timing(pulseAnim, { toValue: 0.4, duration: 1100, useNativeDriver: true }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [inProgress, pulseAnim]);
 
   const hasPreview = !!uri && !inProgress && !imageError;
 
@@ -91,15 +104,15 @@ export function CreationImagePreview({
     [tokens, aspectRatio, height]
   );
 
-  // Show loading state during generation
+  // Show pulsing shimmer during generation
   if (inProgress && showLoadingIndicator) {
     return (
       <View style={styles.container}>
-        <View style={styles.loadingOverlay}>
+        <Animated.View style={[styles.loadingOverlay, { opacity: pulseAnim, backgroundColor: tokens.colors.backgroundSecondary }]}>
           <View style={styles.loadingIcon}>
             <AtomicSpinner size="lg" color="primary" />
           </View>
-        </View>
+        </Animated.View>
       </View>
     );
   }

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

@@ -19,6 +19,8 @@ interface GalleryHeaderProps {
   readonly filterButtons?: FilterButtonConfig[];
   readonly showFilter?: boolean;
   readonly style?: ViewStyle;
+  readonly viewMode?: "list" | "grid";
+  readonly onViewModeChange?: (mode: "list" | "grid") => void;
 }
 
 const EMPTY_FILTER_BUTTONS: FilterButtonConfig[] = [];
@@ -29,13 +31,15 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
   filterButtons = EMPTY_FILTER_BUTTONS,
   showFilter = true,
   style,
+  viewMode = "list",
+  onViewModeChange,
 }: GalleryHeaderProps) => {
   const tokens = useAppDesignTokens();
   const styles = useStyles(tokens);
 
   return (
     <View style={[styles.headerArea, style]}>
-      <View>
+      <View style={styles.leftSection}>
         {title ? (
           <View style={styles.titleRow}>
             <AtomicText style={styles.title}>{title}</AtomicText>
@@ -45,35 +49,64 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
           {countLabel}
         </AtomicText>
       </View>
-      {showFilter && filterButtons.length > 0 && (
-        <View style={styles.filterRow}>
-          {filterButtons.map((btn: FilterButtonConfig) => (
+
+      <View style={styles.rightSection}>
+        {showFilter && filterButtons.length > 0 && (
+          <View style={styles.filterRow}>
+            {filterButtons.map((btn: FilterButtonConfig) => (
+              <TouchableOpacity
+                key={btn.id}
+                onPress={() => {
+                  if (__DEV__) {
+                    console.log(`[GalleryHeader] ${btn.id} filter pressed`);
+                  }
+                  btn.onPress();
+                }}
+                style={[styles.filterButton, btn.isActive && styles.filterButtonActive]}
+                activeOpacity={0.7}
+              >
+                <AtomicIcon
+                  name={btn.icon}
+                  size="sm"
+                  color={btn.isActive ? "primary" : "secondary"}
+                />
+                <AtomicText
+                  style={[styles.filterText, { color: btn.isActive ? tokens.colors.primary : tokens.colors.textSecondary }]}
+                >
+                  {btn.label}
+                </AtomicText>
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+
+        {onViewModeChange && (
+          <View style={styles.viewToggle}>
             <TouchableOpacity
-              key={btn.id}
-              onPress={() => {
-                if (__DEV__) {
-                   
-                  console.log(`[GalleryHeader] ${btn.id} filter pressed`);
-                }
-                btn.onPress();
-              }}
-              style={[styles.filterButton, btn.isActive && styles.filterButtonActive]}
+              onPress={() => onViewModeChange("list")}
+              style={[styles.toggleBtn, viewMode === "list" && styles.toggleBtnActive]}
               activeOpacity={0.7}
             >
               <AtomicIcon
-                name={btn.icon}
+                name="list-outline"
                 size="sm"
-                color={btn.isActive ? "primary" : "secondary"}
+                color={viewMode === "list" ? "primary" : "secondary"}
               />
-              <AtomicText
-                style={[styles.filterText, { color: btn.isActive ? tokens.colors.primary : tokens.colors.textSecondary }]}
-              >
-                {btn.label}
-              </AtomicText>
             </TouchableOpacity>
-          ))}
-        </View>
-      )}
+            <TouchableOpacity
+              onPress={() => onViewModeChange("grid")}
+              style={[styles.toggleBtn, viewMode === "grid" && styles.toggleBtnActive]}
+              activeOpacity={0.7}
+            >
+              <AtomicIcon
+                name="grid-outline"
+                size="sm"
+                color={viewMode === "grid" ? "primary" : "secondary"}
+              />
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
     </View>
   );
 };
@@ -88,6 +121,14 @@ const useStyles = (tokens: DesignTokens) =>
       paddingVertical: tokens.spacing.sm,
       marginBottom: tokens.spacing.sm,
     },
+    leftSection: {
+      flex: 1,
+    },
+    rightSection: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.spacing.sm,
+    },
     titleRow: {
       flexDirection: "row",
       alignItems: "center",
@@ -127,4 +168,21 @@ const useStyles = (tokens: DesignTokens) =>
       fontSize: 13,
       fontWeight: "500",
     },
+    viewToggle: {
+      flexDirection: "row",
+      gap: 2,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: 8,
+      padding: 2,
+    },
+    toggleBtn: {
+      width: 32,
+      height: 32,
+      borderRadius: 6,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    toggleBtnActive: {
+      backgroundColor: tokens.colors.surface,
+    },
   });

package/src/domains/creations/presentation/components/index.ts

@@ -7,6 +7,8 @@ export {
   CreationCard,
 } from "./CreationCard";
 
+export { CreationCardCompact } from "./CreationCardCompact";
+
 // Gallery Components
 export { GalleryHeader } from "./GalleryHeader";
 export { GalleryEmptyStates } from "./GalleryEmptyStates";

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useState } from "react";
 import { View } from "react-native";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { FilterSheet, useAppFocusEffect } from "@umituz/react-native-design-system/molecules";
@@ -9,7 +9,7 @@ import { useProcessingJobsPoller } from "../hooks/useProcessingJobsPoller";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
 import { useGalleryCallbacks } from "../hooks/useGalleryCallbacks";
 import { useGalleryState } from "../hooks/useGalleryState";
-import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
+import { GalleryHeader, CreationCard, CreationCardCompact, GalleryEmptyStates } from "../components";
 import { GalleryResultPreview } from "../components/GalleryResultPreview";
 import { GalleryScreenHeader } from "../components/GalleryScreenHeader";
 import { MEDIA_FILTER_OPTIONS, STATUS_FILTER_OPTIONS } from "../../domain/types/creation-filter";
@@ -34,6 +34,7 @@ export function CreationsGalleryScreen({
   onCreationPress,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
 
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
   const deleteMutation = useDeleteCreation({ userId, repository });
@@ -89,18 +90,43 @@ export function CreationsGalleryScreen({
     [config.types, t, getCreationTitle]
   );
 
+  const getItemCallbacks = useCallback((item: Creation) => ({
+    onPress: () => onCreationPress ? onCreationPress(item) : callbacks.handleCardPress(item),
+    onShare: async () => callbacks.handleShareCard(item),
+    onDelete: () => callbacks.handleDelete(item),
+    onFavorite: () => callbacks.handleFavorite(item),
+  }), [callbacks, onCreationPress]);
+
   const renderItem = useCallback(({ item }: { item: Creation }) => (
     <CreationCard
       creation={item}
       titleText={getItemTitle(item)}
-      callbacks={{
-        onPress: () => onCreationPress ? onCreationPress(item) : callbacks.handleCardPress(item),
-        onShare: async () => callbacks.handleShareCard(item),
-        onDelete: () => callbacks.handleDelete(item),
-        onFavorite: () => callbacks.handleFavorite(item),
-      }}
+      callbacks={getItemCallbacks(item)}
     />
-  ), [callbacks, getItemTitle, onCreationPress]);
+  ), [getItemTitle, getItemCallbacks]);
+
+  const renderGridItems = useCallback((items: Creation[]) => {
+    const rows: Array<{ left: Creation; right: Creation | null }> = [];
+    for (let i = 0; i < items.length; i += 2) {
+      rows.push({ left: items[i], right: items[i + 1] ?? null });
+    }
+    return rows.map((row, index) => (
+      <View key={`grid-row-${index}`} style={styles.gridRow}>
+        <CreationCardCompact
+          creation={row.left}
+          callbacks={{ onPress: getItemCallbacks(row.left).onPress }}
+        />
+        {row.right ? (
+          <CreationCardCompact
+            creation={row.right}
+            callbacks={{ onPress: getItemCallbacks(row.right).onPress }}
+          />
+        ) : (
+          <View style={styles.gridPlaceholder} />
+        )}
+      </View>
+    ));
+  }, [getItemCallbacks]);
 
   const hasScreenHeader = Boolean(onBack);
 
@@ -115,10 +141,12 @@ export function CreationsGalleryScreen({
           countLabel={`${filters.filtered.length} ${t(config.translations.photoCount)}`}
           showFilter={showFilter}
           filterButtons={filterButtons}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
         />
       </View>
     );
-  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens, hasScreenHeader]);
+  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens, hasScreenHeader, viewMode]);
 
   const renderEmpty = useMemo(() => (
     <GalleryEmptyStates
@@ -165,6 +193,10 @@ export function CreationsGalleryScreen({
         <View style={[styles.listContent, styles.emptyContent]}>
           {renderEmpty}
         </View>
+      ) : viewMode === "grid" ? (
+        <View style={styles.gridContent}>
+          {renderGridItems(filters.filtered)}
+        </View>
       ) : (
         <View style={styles.listContent}>
           {filters.filtered.map((item) => (

package/src/domains/creations/presentation/screens/creations-gallery.styles.ts

@@ -7,7 +7,16 @@ import { StyleSheet } from "react-native";
 export const creationsGalleryStyles = StyleSheet.create({
   header: { borderBottomWidth: 1 },
   listContent: { paddingHorizontal: 16, paddingTop: 16 },
+  gridContent: { paddingHorizontal: 12, paddingTop: 12 },
   emptyContent: { flexGrow: 1 },
+  gridRow: {
+    flexDirection: "row",
+    gap: 8,
+    marginBottom: 8,
+  },
+  gridPlaceholder: {
+    flex: 1,
+  },
   screenHeader: {
     flexDirection: "row",
     alignItems: "center",

package/src/domains/generation/wizard/presentation/hooks/usePhotoBlockingGeneration.ts

@@ -48,7 +48,6 @@ export function usePhotoBlockingGeneration(
   } = props;
 
   const creationIdRef = useRef<string | null>(null);
-  const logSessionIdRef = useRef<string | undefined>(undefined);
 
   const handleSuccess = useCallback(
     async (result: unknown) => {

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

@@ -5,8 +5,8 @@
  * Supports background generation - user can dismiss and generation continues
  */
 
-import React, { useMemo } from "react";
-import { View, StyleSheet, ActivityIndicator, TouchableOpacity } from "react-native";
+import React, { useMemo, useRef, useEffect } from "react";
+import { View, StyleSheet, ActivityIndicator, TouchableOpacity, Animated } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -30,6 +30,18 @@ interface GeneratingScreenProps {
   readonly onDismiss?: () => void;
 }
 
+const PHASES = [
+  { id: "queued", index: 0 },
+  { id: "processing", index: 1 },
+  { id: "finalizing", index: 2 },
+] as const;
+
+const PHASE_LABELS = {
+  queued: "Analyzing",
+  processing: "Creating",
+  finalizing: "Refining",
+} as const;
+
 export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
   progress: _progress,
   scenario,
@@ -38,6 +50,18 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const phase = useGenerationPhase();
+  const pulseAnim = useRef(new Animated.Value(0.6)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, { toValue: 1, duration: 900, useNativeDriver: true }),
+        Animated.timing(pulseAnim, { toValue: 0.6, duration: 900, useNativeDriver: true }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [pulseAnim]);
 
   const messages = useMemo(() => {
     const custom = scenario?.generatingMessages;
@@ -52,26 +76,84 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
   const statusMessage = useMemo(() => {
     switch (phase) {
       case "queued":
-        return t("generator.status.queued") || "Waiting in queue...";
+        return t("generator.status.queued") || "Analyzing your photos...";
       case "processing":
-        return t("generator.status.processing") || "Generating your content...";
+        return t("generator.status.processing") || "Creating your scene...";
       case "finalizing":
-        return t("generator.status.finalizing") || "Almost done...";
+        return t("generator.status.finalizing") || "Adding finishing touches...";
       default:
         return messages.waitMessage;
     }
   }, [phase, t, messages.waitMessage]);
 
+  const activePhaseIndex = PHASES.find((p) => p.id === phase)?.index ?? 0;
+
   return (
     <ScreenLayout backgroundColor={tokens.colors.backgroundPrimary}>
       <View style={styles.container}>
         <View style={styles.content}>
-          <ActivityIndicator size="large" color={tokens.colors.primary} />
+          {/* Pulsing spinner */}
+          <Animated.View style={[styles.spinnerContainer, { opacity: pulseAnim, backgroundColor: tokens.colors.primary + "15" }]}>
+            <ActivityIndicator size="large" color={tokens.colors.primary} />
+          </Animated.View>
 
           <AtomicText type="headlineMedium" style={styles.title}>
             {messages.title}
           </AtomicText>
 
+          {/* Phase step bubbles */}
+          <View style={styles.stepsRow}>
+            {PHASES.map((p, idx) => {
+              const isActive = idx === activePhaseIndex;
+              const isDone = idx < activePhaseIndex;
+              return (
+                <React.Fragment key={p.id}>
+                  <View style={styles.stepItem}>
+                    <View
+                      style={[
+                        styles.stepBubble,
+                        {
+                          backgroundColor: isDone || isActive
+                            ? tokens.colors.primary
+                            : tokens.colors.surfaceVariant,
+                          borderColor: isActive ? tokens.colors.primary : "transparent",
+                        },
+                      ]}
+                    >
+                      <AtomicText
+                        style={[
+                          styles.stepNumber,
+                          { color: isDone || isActive ? "#FFFFFF" : tokens.colors.textSecondary },
+                        ]}
+                      >
+                        {isDone ? "✓" : String(idx + 1)}
+                      </AtomicText>
+                    </View>
+                    <AtomicText
+                      style={[
+                        styles.stepLabel,
+                        {
+                          color: isActive ? tokens.colors.primary : tokens.colors.textSecondary,
+                          fontWeight: isActive ? "700" : "400",
+                        },
+                      ]}
+                    >
+                      {PHASE_LABELS[p.id]}
+                    </AtomicText>
+                  </View>
+                  {idx < PHASES.length - 1 && (
+                    <View
+                      style={[
+                        styles.stepConnector,
+                        { backgroundColor: idx < activePhaseIndex ? tokens.colors.primary : tokens.colors.surfaceVariant },
+                      ]}
+                    />
+                  )}
+                </React.Fragment>
+              );
+            })}
+          </View>
+
           <AtomicText type="bodyMedium" style={[styles.message, { color: tokens.colors.textSecondary }]}>
             {statusMessage}
           </AtomicText>
@@ -83,12 +165,6 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
             />
           </View>
 
-          {scenario && (
-            <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
-              {scenario.title || scenario.id}
-            </AtomicText>
-          )}
-
           <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
             {messages.hint}
           </AtomicText>
@@ -116,25 +192,64 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   content: {
-    width: "80%",
+    width: "85%",
     maxWidth: 400,
     alignItems: "center",
     gap: 16,
   },
+  spinnerContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 8,
+  },
   title: {
     textAlign: "center",
-    marginTop: 24,
+  },
+  stepsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 8,
+  },
+  stepItem: {
+    alignItems: "center",
+    gap: 6,
+  },
+  stepBubble: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+  },
+  stepNumber: {
+    fontSize: 12,
+    fontWeight: "700",
+  },
+  stepLabel: {
+    fontSize: 11,
+  },
+  stepConnector: {
+    width: 40,
+    height: 2,
+    borderRadius: 1,
+    marginBottom: 18,
+    marginHorizontal: 4,
   },
   message: {
     textAlign: "center",
   },
   progressContainer: {
     width: "100%",
-    marginTop: 24,
+    marginTop: 8,
   },
   hint: {
     textAlign: "center",
-    marginTop: 8,
+    marginTop: 4,
   },
   backgroundHintButton: {
     marginTop: 32,

package/src/presentation/components/display/VideoResultPlayer.tsx

@@ -6,7 +6,6 @@ let useVideoPlayer: (...args: any[]) => any = () => null;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let VideoView: React.ComponentType<any> = () => null;
 try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const expoVideo = require("expo-video");
   useVideoPlayer = expoVideo.useVideoPlayer;
   VideoView = expoVideo.VideoView;