@umituz/react-native-ai-generation-content 1.17.268 → 1.17.269

package/package.json

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

package/src/features/scenarios/domain/types.ts

@@ -0,0 +1,75 @@
+/**
+ * Scenario Domain Types
+ * Generic types for scenario selection feature
+ */
+
+export enum ScenarioCategory {
+  TIME_TRAVEL = "time_travel",
+  FAMILY = "family",
+  LIFESTYLE = "lifestyle",
+  FANTASY = "fantasy",
+  CAREER = "career",
+  TRAVEL = "travel",
+  CULTURAL = "cultural",
+}
+
+export interface ScenarioData {
+  readonly id: string;
+  readonly category?: ScenarioCategory;
+  readonly title: string;
+  readonly description: string;
+  readonly icon: string;
+  readonly imageUrl?: string;
+  readonly previewImageUrl?: string;
+  readonly aiPrompt: string;
+  readonly storyTemplate: string;
+  readonly requiresPhoto?: boolean;
+  readonly hidden?: boolean;
+}
+
+export interface ScenarioSelectorConfig {
+  readonly titleKey: string;
+  readonly subtitleKey: string;
+  readonly showCategoryFilter?: boolean;
+  readonly enableSearch?: boolean;
+  readonly pageSize?: number;
+}
+
+export interface ScenarioPreviewConfig {
+  readonly showTips?: boolean;
+  readonly showDetails?: boolean;
+  readonly enableCustomization?: boolean;
+}
+
+export interface MagicPromptConfig {
+  readonly maxLength: number;
+  readonly minLength: number;
+  readonly headerKey: string;
+  readonly headlinePart1Key: string;
+  readonly headlinePart2Key: string;
+  readonly subtitleKey: string;
+  readonly inputLabelKey: string;
+  readonly surpriseButtonKey: string;
+  readonly placeholderKey: string;
+  readonly styleTitleKey: string;
+  readonly inspirationTitleKey: string;
+  readonly continueKey: string;
+}
+
+export interface VisualStyleOption {
+  readonly id: string;
+  readonly icon: string;
+  readonly labelKey: string;
+}
+
+export interface InspirationChipData {
+  readonly id: string;
+  readonly labelKey: string;
+  readonly promptKey: string;
+}
+
+export const SCENARIO_DEFAULTS = {
+  pageSize: 10,
+  maxPromptLength: 500,
+  minPromptLength: 10,
+} as const;

package/src/features/scenarios/index.ts

@@ -0,0 +1,45 @@
+/**
+ * Scenarios Feature
+ * Config-driven scenario selection and preview screens
+ */
+
+// Domain types
+export type {
+  ScenarioData,
+  ScenarioCategory,
+  ScenarioSelectorConfig,
+  ScenarioPreviewConfig,
+  MagicPromptConfig,
+  VisualStyleOption,
+  InspirationChipData,
+} from "./domain/types";
+export { ScenarioCategory as ScenarioCategoryEnum, SCENARIO_DEFAULTS } from "./domain/types";
+
+// Components
+export {
+  ScenarioHeader,
+  ScenarioGrid,
+  MagicPromptHeadline,
+  InspirationChips,
+  StyleSelector,
+} from "./presentation/components";
+export type {
+  ScenarioHeaderProps,
+  ScenarioGridProps,
+  MagicPromptHeadlineProps,
+  InspirationChipsProps,
+  StyleSelectorProps,
+} from "./presentation/components";
+
+// Screens
+export { ScenarioSelectorScreen } from "./presentation/screens/ScenarioSelectorScreen";
+export type { ScenarioSelectorScreenProps } from "./presentation/screens/ScenarioSelectorScreen";
+
+export { ScenarioPreviewScreen } from "./presentation/screens/ScenarioPreviewScreen";
+export type {
+  ScenarioPreviewScreenProps,
+  ScenarioPreviewTranslations,
+} from "./presentation/screens/ScenarioPreviewScreen";
+
+export { MagicPromptScreen } from "./presentation/screens/MagicPromptScreen";
+export type { MagicPromptScreenProps } from "./presentation/screens/MagicPromptScreen";

package/src/features/scenarios/presentation/components/InspirationChips.tsx

@@ -0,0 +1,82 @@
+/**
+ * InspirationChips Component
+ * Horizontal scrollable suggestion chips for Magic Prompt
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { InspirationChipData } from "../../domain/types";
+
+export interface InspirationChipsProps {
+  readonly chips: readonly InspirationChipData[];
+  readonly title: string;
+  readonly onSelect: (promptKey: string) => void;
+  readonly t: (key: string) => string;
+}
+
+export const InspirationChips: React.FC<InspirationChipsProps> = ({
+  chips,
+  title,
+  onSelect,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginBottom: tokens.spacing.lg,
+        },
+        sectionTitle: {
+          fontWeight: "700",
+          marginBottom: tokens.spacing.sm,
+        },
+        chipsContainer: {
+          gap: tokens.spacing.sm,
+          paddingBottom: 4,
+        },
+        chip: {
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: 10,
+          borderRadius: 999,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+          backgroundColor: tokens.colors.surface,
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="labelLarge" style={styles.sectionTitle}>
+        {title}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.chipsContainer}
+      >
+        {chips.map((chip) => (
+          <TouchableOpacity
+            key={chip.id}
+            style={styles.chip}
+            onPress={() => onSelect(chip.promptKey)}
+          >
+            <AtomicText
+              type="bodySmall"
+              style={{ color: tokens.colors.textPrimary }}
+            >
+              {t(chip.labelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};

package/src/features/scenarios/presentation/components/MagicPromptHeadline.tsx

@@ -0,0 +1,79 @@
+/**
+ * MagicPromptHeadline Component
+ * Headline section with highlighted text for Magic Prompt screen
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface MagicPromptHeadlineProps {
+  readonly headlinePart1: string;
+  readonly headlinePart2: string;
+  readonly subtitle: string;
+}
+
+export const MagicPromptHeadline: React.FC<MagicPromptHeadlineProps> = ({
+  headlinePart1,
+  headlinePart2,
+  subtitle,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.titleRow}>
+        <AtomicText
+          type="headlineLarge"
+          style={[styles.title, { color: tokens.colors.textPrimary }]}
+        >
+          {headlinePart1}{" "}
+          <AtomicText
+            type="headlineLarge"
+            style={[
+              styles.titleHighlight,
+              { color: tokens.colors.textPrimary },
+            ]}
+          >
+            {headlinePart2}
+          </AtomicText>
+        </AtomicText>
+      </View>
+      <AtomicText
+        type="bodyLarge"
+        style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
+      >
+        {subtitle}
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 24,
+  },
+  titleRow: {
+    marginBottom: 12,
+  },
+  title: {
+    fontWeight: "800",
+    fontSize: 32,
+    lineHeight: 40,
+  },
+  titleHighlight: {
+    fontWeight: "800",
+    fontSize: 32,
+    lineHeight: 40,
+    textDecorationLine: "underline",
+    textDecorationColor: "rgba(255, 140, 90, 0.5)",
+    textDecorationStyle: "solid",
+  },
+  subtitle: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

package/src/features/scenarios/presentation/components/ScenarioGrid.tsx

@@ -0,0 +1,225 @@
+/**
+ * ScenarioGrid Component
+ * Grid display for scenario selection with category filtering
+ */
+
+import React, { useMemo, useCallback, useState } from "react";
+import {
+  View as RNView,
+  FlatList as RNFlatList,
+  StyleSheet,
+} from "react-native";
+import {
+  useAppDesignTokens,
+  useResponsive,
+  AtomicCard,
+  AtomicText,
+  AtomicSkeleton,
+  FilterGroup,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { ScenarioData, ScenarioCategory } from "../../domain/types";
+import { SCENARIO_DEFAULTS } from "../../domain/types";
+
+const View = RNView as any;
+const FlatList = RNFlatList as any;
+
+export interface ScenarioGridProps {
+  readonly scenarios: readonly ScenarioData[];
+  readonly selectedScenarioId: string | null;
+  readonly onSelect: (id: string) => void;
+  readonly categories: readonly ScenarioCategory[];
+  readonly t: (key: string) => string;
+  readonly pageSize?: number;
+  readonly categoryAllLabel?: string;
+}
+
+export const ScenarioGrid: React.FC<ScenarioGridProps> = ({
+  scenarios,
+  selectedScenarioId,
+  onSelect,
+  categories,
+  t,
+  pageSize = SCENARIO_DEFAULTS.pageSize,
+  categoryAllLabel = "All",
+}) => {
+  const [category, setCategory] = useState<ScenarioCategory | "all">("all");
+  const [displayedCount, setDisplayedCount] = useState(pageSize);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+  const { width } = useResponsive();
+
+  const numColumns = 2;
+  const horizontalPadding = tokens.spacing.md;
+  const cardSpacing = tokens.spacing.md;
+  const availableWidth = width - horizontalPadding * 2 - cardSpacing;
+  const cardWidth = availableWidth / numColumns;
+
+  const filteredScenarios = useMemo(() => {
+    if (category === "all") return scenarios;
+    return scenarios.filter((s) => s.category === category);
+  }, [scenarios, category]);
+
+  const displayedScenarios = useMemo(
+    () => filteredScenarios.slice(0, displayedCount),
+    [filteredScenarios, displayedCount],
+  );
+
+  const hasMore = displayedCount < filteredScenarios.length;
+  const isLoadingMore = isLoading && displayedCount > pageSize;
+
+  const styles = useMemo(
+    () => createStyles(tokens, cardWidth, cardSpacing),
+    [tokens, cardWidth, cardSpacing],
+  );
+
+  const loadMore = useCallback(() => {
+    if (hasMore && !isLoading) {
+      setIsLoading(true);
+      setTimeout(() => {
+        setDisplayedCount((prev) =>
+          Math.min(prev + pageSize, filteredScenarios.length),
+        );
+        setIsLoading(false);
+      }, 300);
+    }
+  }, [hasMore, isLoading, filteredScenarios.length, pageSize]);
+
+  const handleCategoryChange = useCallback(
+    (val: ScenarioCategory | "all") => {
+      setCategory(val);
+      setDisplayedCount(pageSize);
+    },
+    [pageSize],
+  );
+
+  const ListEmptyComponent = useMemo(
+    () => (
+      <View style={styles.centerContainer}>
+        <AtomicText type="bodyMedium" color="textSecondary">
+          {t("scenario.empty")}
+        </AtomicText>
+      </View>
+    ),
+    [t, styles.centerContainer],
+  );
+
+  const ListFooterComponent = useMemo(
+    () =>
+      isLoadingMore ? (
+        <View style={styles.footerLoader}>
+          <AtomicSkeleton pattern="card" count={2} />
+        </View>
+      ) : null,
+    [isLoadingMore, styles.footerLoader],
+  );
+
+  const ListHeaderComponent = useMemo(
+    () => (
+      <View style={{ marginBottom: tokens.spacing.md }}>
+        <FilterGroup
+          items={[
+            { label: categoryAllLabel, value: "all" },
+            ...categories.map((cat) => ({
+              label: t(`category.${cat}`),
+              value: cat,
+            })),
+          ]}
+          selectedValue={category}
+          onSelect={(val) =>
+            handleCategoryChange(val as ScenarioCategory | "all")
+          }
+          contentContainerStyle={{ paddingHorizontal: horizontalPadding }}
+        />
+      </View>
+    ),
+    [
+      category,
+      t,
+      horizontalPadding,
+      tokens.spacing.md,
+      categories,
+      categoryAllLabel,
+      handleCategoryChange,
+    ],
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: ScenarioData }) => {
+      const title = t(`scenario.${item.id}.title`);
+      const description = t(`scenario.${item.id}.description`);
+
+      return (
+        <AtomicCard
+          image={item.imageUrl || ""}
+          title={title}
+          subtitle={description}
+          selected={selectedScenarioId === item.id}
+          imageAspectRatio={1.25}
+          style={{ width: cardWidth }}
+          onPress={() => onSelect(item.id)}
+          testID={`scenario-card-${item.id}`}
+        />
+      );
+    },
+    [cardWidth, selectedScenarioId, onSelect, t],
+  );
+
+  return (
+    <FlatList
+      data={displayedScenarios}
+      numColumns={numColumns}
+      key={`grid-${numColumns}`}
+      showsVerticalScrollIndicator={false}
+      columnWrapperStyle={styles.row}
+      renderItem={renderItem}
+      keyExtractor={(item: ScenarioData) => item.id}
+      ListHeaderComponent={ListHeaderComponent}
+      ListEmptyComponent={filteredScenarios.length === 0 ? ListEmptyComponent : null}
+      ListFooterComponent={ListFooterComponent}
+      onEndReached={loadMore}
+      onEndReachedThreshold={0.5}
+      contentContainerStyle={[
+        styles.listContent,
+        {
+          paddingBottom: insets.bottom + 100,
+          paddingHorizontal: horizontalPadding,
+        },
+      ]}
+      initialNumToRender={pageSize}
+      maxToRenderPerBatch={pageSize}
+      windowSize={5}
+    />
+  );
+};
+
+const createStyles = (
+  tokens: DesignTokens,
+  cardWidth: number,
+  cardSpacing: number,
+) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    listContent: {
+      paddingTop: tokens.spacing.sm,
+      flexGrow: 1,
+    },
+    row: {
+      gap: cardSpacing,
+      marginBottom: cardSpacing,
+    },
+    centerContainer: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      paddingVertical: tokens.spacing.xl,
+    },
+    footerLoader: {
+      paddingVertical: tokens.spacing.md,
+    },
+  });

package/src/features/scenarios/presentation/components/ScenarioHeader.tsx

@@ -0,0 +1,56 @@
+/**
+ * ScenarioHeader Component
+ * Header section for scenario selection screen
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface ScenarioHeaderProps {
+  readonly title: string;
+  readonly subtitle: string;
+}
+
+export const ScenarioHeader: React.FC<ScenarioHeaderProps> = ({
+  title,
+  subtitle,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = React.useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="headlineLarge" style={styles.title}>
+        {title}
+      </AtomicText>
+      <AtomicText
+        type="bodyMedium"
+        color="textSecondary"
+        style={styles.subtitle}
+      >
+        {subtitle}
+      </AtomicText>
+    </View>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingTop: tokens.spacing.lg,
+      paddingBottom: tokens.spacing.md,
+      gap: tokens.spacing.xs,
+    },
+    title: {
+      lineHeight: 34,
+    },
+    subtitle: {
+      lineHeight: 22,
+    },
+  });

package/src/features/scenarios/presentation/components/StyleSelector.tsx

@@ -0,0 +1,119 @@
+/**
+ * StyleSelector Component
+ * Visual style selection grid for Magic Prompt
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { VisualStyleOption } from "../../domain/types";
+
+export interface StyleSelectorProps {
+  readonly styles: readonly VisualStyleOption[];
+  readonly selectedStyle: string;
+  readonly title: string;
+  readonly onSelect: (styleId: string) => void;
+  readonly t: (key: string) => string;
+}
+
+export const StyleSelector: React.FC<StyleSelectorProps> = ({
+  styles: visualStyles,
+  selectedStyle,
+  title,
+  onSelect,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const componentStyles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginBottom: tokens.spacing.lg,
+        },
+        sectionTitle: {
+          fontWeight: "700",
+          marginBottom: tokens.spacing.sm,
+        },
+        stylesGrid: {
+          flexDirection: "row",
+          gap: tokens.spacing.md,
+        },
+        styleItem: {
+          flex: 1,
+          alignItems: "center",
+          gap: tokens.spacing.xs,
+        },
+        styleIcon: {
+          width: 64,
+          height: 64,
+          borderRadius: tokens.borders.radius.md,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        styleLabel: {
+          textAlign: "center",
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={componentStyles.container}>
+      <AtomicText type="labelLarge" style={componentStyles.sectionTitle}>
+        {title}
+      </AtomicText>
+      <View style={componentStyles.stylesGrid}>
+        {visualStyles.map((style) => (
+          <TouchableOpacity
+            key={style.id}
+            style={componentStyles.styleItem}
+            onPress={() => onSelect(style.id)}
+          >
+            <View
+              style={[
+                componentStyles.styleIcon,
+                {
+                  backgroundColor:
+                    selectedStyle === style.id
+                      ? tokens.colors.primaryContainer
+                      : tokens.colors.surface,
+                  borderWidth: selectedStyle === style.id ? 2 : 1,
+                  borderColor:
+                    selectedStyle === style.id
+                      ? tokens.colors.primary
+                      : tokens.colors.border,
+                },
+              ]}
+            >
+              <AtomicIcon
+                name={style.icon as any}
+                size="md"
+                color={selectedStyle === style.id ? "primary" : "textSecondary"}
+              />
+            </View>
+            <AtomicText
+              type="labelSmall"
+              style={[
+                componentStyles.styleLabel,
+                {
+                  color:
+                    selectedStyle === style.id
+                      ? tokens.colors.textPrimary
+                      : tokens.colors.textSecondary,
+                  fontWeight: selectedStyle === style.id ? "700" : "500",
+                },
+              ]}
+            >
+              {t(style.labelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};

package/src/features/scenarios/presentation/components/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Scenario Components Index
+ */
+
+export { ScenarioHeader } from "./ScenarioHeader";
+export type { ScenarioHeaderProps } from "./ScenarioHeader";
+
+export { ScenarioGrid } from "./ScenarioGrid";
+export type { ScenarioGridProps } from "./ScenarioGrid";
+
+export { MagicPromptHeadline } from "./MagicPromptHeadline";
+export type { MagicPromptHeadlineProps } from "./MagicPromptHeadline";
+
+export { InspirationChips } from "./InspirationChips";
+export type { InspirationChipsProps } from "./InspirationChips";
+
+export { StyleSelector } from "./StyleSelector";
+export type { StyleSelectorProps } from "./StyleSelector";

package/src/features/scenarios/presentation/screens/MagicPromptScreen.tsx

@@ -0,0 +1,242 @@
+/**
+ * MagicPromptScreen
+ * Config-driven custom prompt screen
+ */
+
+import React, { useState, useCallback, useMemo } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicTextArea,
+  AtomicIcon,
+  useAppDesignTokens,
+  ScreenLayout,
+  NavigationHeader,
+} from "@umituz/react-native-design-system";
+import { MagicPromptHeadline } from "../components/MagicPromptHeadline";
+import { InspirationChips } from "../components/InspirationChips";
+import { StyleSelector } from "../components/StyleSelector";
+import type {
+  MagicPromptConfig,
+  VisualStyleOption,
+  InspirationChipData,
+} from "../../domain/types";
+
+export interface MagicPromptScreenProps {
+  readonly config: MagicPromptConfig;
+  readonly visualStyles: readonly VisualStyleOption[];
+  readonly inspirationChips: readonly InspirationChipData[];
+  readonly surprisePrompts: readonly string[];
+  readonly initialPrompt: string;
+  readonly initialVisualStyle: string;
+  readonly onContinue: (prompt: string, visualStyle: string) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+}
+
+export const MagicPromptScreen: React.FC<MagicPromptScreenProps> = ({
+  config,
+  visualStyles,
+  inspirationChips,
+  surprisePrompts,
+  initialPrompt,
+  initialVisualStyle,
+  onContinue,
+  onBack,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [text, setText] = useState(initialPrompt);
+  const [selectedStyle, setSelectedStyle] = useState(initialVisualStyle);
+
+  const handleSurprise = useCallback(() => {
+    const randomIndex = Math.floor(Math.random() * surprisePrompts.length);
+    const surprisePrompt = t(surprisePrompts[randomIndex]);
+    setText(surprisePrompt);
+
+    const randomStyleIndex = Math.floor(Math.random() * visualStyles.length);
+    setSelectedStyle(visualStyles[randomStyleIndex].id);
+  }, [surprisePrompts, visualStyles, t]);
+
+  const handleInspirationSelect = useCallback(
+    (promptKey: string) => {
+      const prompt = t(promptKey);
+      setText(prompt);
+    },
+    [t],
+  );
+
+  const handleStyleSelect = useCallback((styleId: string) => {
+    setSelectedStyle(styleId);
+  }, []);
+
+  const handleContinue = useCallback(() => {
+    onContinue(text, selectedStyle);
+  }, [onContinue, text, selectedStyle]);
+
+  const isValid = text.trim().length >= config.minLength;
+
+  const componentStyles = useMemo(
+    () =>
+      StyleSheet.create({
+        inputCard: {
+          borderWidth: 1,
+          borderRadius: 16,
+          padding: 16,
+          marginBottom: 24,
+        },
+        inputHeader: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 12,
+        },
+        label: {
+          textTransform: "uppercase",
+          fontWeight: "700",
+          letterSpacing: 1,
+        },
+        surpriseButton: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 6,
+          paddingHorizontal: 12,
+          paddingVertical: 6,
+          borderRadius: 999,
+        },
+        surpriseText: { fontWeight: "600" },
+        textArea: { marginBottom: 12 },
+        charCounter: { alignItems: "flex-end", paddingTop: 8 },
+      }),
+    [],
+  );
+
+  return (
+    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+      <NavigationHeader
+        title={t(config.headerKey)}
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinue}
+            disabled={!isValid}
+            activeOpacity={0.7}
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: isValid
+                ? tokens.colors.primary
+                : tokens.colors.surfaceVariant,
+              paddingHorizontal: tokens.spacing.md,
+              paddingVertical: tokens.spacing.xs,
+              borderRadius: tokens.borders.radius.full,
+              opacity: isValid ? 1 : 0.5,
+            }}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={{
+                fontWeight: "800",
+                color: isValid
+                  ? tokens.colors.onPrimary
+                  : tokens.colors.textSecondary,
+                marginRight: 4,
+              }}
+            >
+              {t(config.continueKey)}
+            </AtomicText>
+            <AtomicIcon
+              name="arrow-forward"
+              size="sm"
+              color={isValid ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={true}
+        edges={["left", "right"]}
+        keyboardAvoiding={true}
+        contentContainerStyle={{ paddingHorizontal: tokens.spacing.lg }}
+      >
+        <MagicPromptHeadline
+          headlinePart1={t(config.headlinePart1Key)}
+          headlinePart2={t(config.headlinePart2Key)}
+          subtitle={t(config.subtitleKey)}
+        />
+
+        <View
+          style={[
+            componentStyles.inputCard,
+            { borderColor: tokens.colors.border },
+          ]}
+        >
+          <View style={componentStyles.inputHeader}>
+            <AtomicText
+              type="labelSmall"
+              style={[
+                componentStyles.label,
+                { color: tokens.colors.textSecondary },
+              ]}
+            >
+              {t(config.inputLabelKey)}
+            </AtomicText>
+            <TouchableOpacity
+              onPress={handleSurprise}
+              style={[
+                componentStyles.surpriseButton,
+                { backgroundColor: tokens.colors.primaryContainer },
+              ]}
+            >
+              <AtomicIcon name="sparkles" size="xs" color="primary" />
+              <AtomicText
+                type="labelSmall"
+                style={[
+                  componentStyles.surpriseText,
+                  { color: tokens.colors.primary },
+                ]}
+              >
+                {t(config.surpriseButtonKey)}
+              </AtomicText>
+            </TouchableOpacity>
+          </View>
+
+          <AtomicTextArea
+            placeholder={t(config.placeholderKey)}
+            value={text}
+            onChangeText={setText}
+            numberOfLines={8}
+            maxLength={config.maxLength}
+            autoFocus
+            minHeight={200}
+            style={componentStyles.textArea}
+          />
+
+          <View style={componentStyles.charCounter}>
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.textSecondary }}
+            >
+              {text.length}/{config.maxLength}
+            </AtomicText>
+          </View>
+        </View>
+
+        <InspirationChips
+          chips={inspirationChips}
+          title={t(config.inspirationTitleKey)}
+          onSelect={handleInspirationSelect}
+          t={t}
+        />
+
+        <StyleSelector
+          styles={visualStyles}
+          selectedStyle={selectedStyle}
+          title={t(config.styleTitleKey)}
+          onSelect={handleStyleSelect}
+          t={t}
+        />
+      </ScreenLayout>
+    </View>
+  );
+};

package/src/features/scenarios/presentation/screens/ScenarioPreviewScreen.tsx

@@ -0,0 +1,164 @@
+/**
+ * ScenarioPreviewScreen
+ * Config-driven scenario preview screen
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  ScreenLayout,
+  type DesignTokens,
+  HeroSection,
+  AtomicIcon,
+  NavigationHeader,
+} from "@umituz/react-native-design-system";
+import type { ScenarioData } from "../../domain/types";
+
+export interface ScenarioPreviewTranslations {
+  readonly continueButton: string;
+  readonly whatToExpect: string;
+}
+
+export interface ScenarioPreviewScreenProps {
+  readonly scenario: ScenarioData;
+  readonly translations: ScenarioPreviewTranslations;
+  readonly onBack: () => void;
+  readonly onContinue: () => void;
+  readonly t: (key: string) => string;
+}
+
+export const ScenarioPreviewScreen: React.FC<ScenarioPreviewScreenProps> = ({
+  scenario,
+  translations,
+  onBack,
+  onContinue,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+      <NavigationHeader
+        title=""
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={onContinue}
+            activeOpacity={0.7}
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: tokens.colors.primary,
+              paddingHorizontal: tokens.spacing.md,
+              paddingVertical: tokens.spacing.xs,
+              borderRadius: tokens.borders.radius.full,
+            }}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={{
+                fontWeight: "800",
+                color: tokens.colors.onPrimary,
+                marginRight: 4,
+              }}
+            >
+              {translations.continueButton}
+            </AtomicText>
+            <AtomicIcon name="arrow-forward" size="sm" color="onPrimary" />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={true}
+        edges={["left", "right"]}
+        hideScrollIndicator={true}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <HeroSection
+          icon={scenario.icon}
+          imageUrl={scenario.previewImageUrl ?? scenario.imageUrl}
+        />
+
+        <View style={styles.contentSection}>
+          <AtomicText style={styles.scenarioTitle}>
+            {t(`scenario.${scenario.id}.title`)}
+          </AtomicText>
+
+          <AtomicText style={styles.scenarioDescription}>
+            {t(`scenario.${scenario.id}.description`)}
+          </AtomicText>
+
+          <View style={styles.infoCard}>
+            <View style={styles.infoHeader}>
+              <AtomicIcon name="information-circle" size="sm" color="primary" />
+              <AtomicText style={styles.infoTitle}>
+                {translations.whatToExpect}
+              </AtomicText>
+            </View>
+            <AtomicText style={styles.infoDescription}>
+              {t(`scenario.${scenario.id}.details`)}
+            </AtomicText>
+          </View>
+        </View>
+      </ScreenLayout>
+    </View>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    scrollContent: {
+      paddingBottom: 120,
+    },
+    contentSection: {
+      paddingHorizontal: tokens.spacing.lg,
+      marginTop: -40,
+    },
+    scenarioTitle: {
+      ...tokens.typography.headingLarge,
+      color: tokens.colors.textPrimary,
+      fontWeight: "900",
+      marginBottom: 12,
+      textAlign: "left",
+    },
+    scenarioDescription: {
+      ...tokens.typography.bodyLarge,
+      color: tokens.colors.textSecondary,
+      lineHeight: 28,
+      marginBottom: 24,
+      opacity: 0.9,
+      textAlign: "left",
+    },
+    infoCard: {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.lg,
+      padding: tokens.spacing.lg,
+      borderWidth: 1,
+      borderColor: tokens.colors.outlineVariant,
+    },
+    infoHeader: {
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: tokens.spacing.sm,
+      gap: tokens.spacing.xs,
+    },
+    infoTitle: {
+      ...tokens.typography.labelLarge,
+      color: tokens.colors.textPrimary,
+      fontWeight: "700",
+      textTransform: "uppercase",
+      letterSpacing: 0.5,
+    },
+    infoDescription: {
+      ...tokens.typography.bodyMedium,
+      color: tokens.colors.textSecondary,
+      lineHeight: 22,
+    },
+  });

package/src/features/scenarios/presentation/screens/ScenarioSelectorScreen.tsx

@@ -0,0 +1,65 @@
+/**
+ * ScenarioSelectorScreen
+ * Config-driven scenario selection screen
+ */
+
+import React from "react";
+import { StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  ScreenLayout,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { ScenarioHeader } from "../components/ScenarioHeader";
+import { ScenarioGrid } from "../components/ScenarioGrid";
+import type { ScenarioData, ScenarioCategory, ScenarioSelectorConfig } from "../../domain/types";
+
+export interface ScenarioSelectorScreenProps {
+  readonly config: ScenarioSelectorConfig;
+  readonly scenarios: readonly ScenarioData[];
+  readonly categories: readonly ScenarioCategory[];
+  readonly selectedScenarioId: string | null;
+  readonly onSelect: (id: string) => void;
+  readonly t: (key: string) => string;
+}
+
+export const ScenarioSelectorScreen: React.FC<ScenarioSelectorScreenProps> = ({
+  config,
+  scenarios,
+  categories,
+  selectedScenarioId,
+  onSelect,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = React.useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <ScreenLayout
+      scrollable={false}
+      edges={["top", "left", "right"]}
+      contentContainerStyle={styles.container}
+      backgroundColor={tokens.colors.backgroundPrimary}
+    >
+      <ScenarioHeader
+        title={t(config.titleKey)}
+        subtitle={t(config.subtitleKey)}
+      />
+      <ScenarioGrid
+        scenarios={scenarios}
+        categories={categories}
+        selectedScenarioId={selectedScenarioId}
+        onSelect={onSelect}
+        t={t}
+        categoryAllLabel={t("category.all")}
+      />
+    </ScreenLayout>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+  });

package/src/index.ts

@@ -153,6 +153,7 @@ export * from "./features/meme-generator";
 export * from "./features/couple-future";
 export * from "./features/love-message";
 export * from "./features/partner-upload";
+export * from "./features/scenarios";
 export * from "./infrastructure/orchestration";
 
 // Result Preview Domain