@umituz/react-native-ai-generation-content 1.17.133 → 1.17.135

package/package.json

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

package/src/domains/creations/presentation/components/CreationDetail/DetailVideo.tsx

@@ -3,8 +3,9 @@
  * Video player with thumbnail and play controls for creation detail view
  */
 
-import React from "react";
-import { View, StyleSheet, useWindowDimensions } from "react-native";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { useResponsive } from "@umituz/react-native-design-system";
 import { VideoPlayer } from "@umituz/react-native-video-editor";
 
 interface DetailVideoProps {
@@ -12,17 +13,20 @@ interface DetailVideoProps {
   readonly thumbnailUrl?: string;
 }
 
-const HORIZONTAL_PADDING = 16;
-
 export const DetailVideo: React.FC<DetailVideoProps> = ({
   videoUrl,
   thumbnailUrl,
 }) => {
-  const { width } = useWindowDimensions();
-  const videoWidth = width - (HORIZONTAL_PADDING * 2);
+  const { width, horizontalPadding, spacingMultiplier } = useResponsive();
+  const videoWidth = width - (horizontalPadding * 2);
+
+  const containerStyle = useMemo(() => ({
+    paddingHorizontal: horizontalPadding,
+    marginVertical: 16 * spacingMultiplier,
+  }), [horizontalPadding, spacingMultiplier]);
 
   return (
-    <View style={styles.container}>
+    <View style={containerStyle}>
       <VideoPlayer
         source={videoUrl}
         thumbnailUrl={thumbnailUrl}
@@ -34,10 +38,3 @@ export const DetailVideo: React.FC<DetailVideoProps> = ({
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: HORIZONTAL_PADDING,
-    marginVertical: 16,
-  },
-});

package/src/features/ai-hug/presentation/components/AIHugFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -46,6 +46,8 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const videoSize = screenWidth - horizontalPadding * 2;
 
   const feature = useAIHugFeature({
     config,
@@ -71,9 +73,6 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedVideoUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const videoSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/ai-kiss/presentation/components/AIKissFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -40,6 +40,8 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const videoSize = screenWidth - horizontalPadding * 2;
 
   const feature = useAIKissFeature({
     config,
@@ -65,9 +67,6 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedVideoUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const videoSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/anime-selfie/presentation/components/AnimeSelfieFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet, Image, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ScrollView, StyleSheet, Image } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -35,6 +35,8 @@ export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useAnimeSelfieFeature({
     config,
@@ -65,9 +67,6 @@ export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/face-swap/presentation/components/FaceSwapFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet, Image, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, ScrollView, StyleSheet, Image } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -37,6 +37,8 @@ export const FaceSwapFeature: React.FC<FaceSwapFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useFaceSwapFeature({
     config,
@@ -62,9 +64,6 @@ export const FaceSwapFeature: React.FC<FaceSwapFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/hd-touch-up/presentation/components/HDTouchUpFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet, Image, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ScrollView, StyleSheet, Image } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -35,6 +35,8 @@ export const HDTouchUpFeature: React.FC<HDTouchUpFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useHDTouchUpFeature({
     config,
@@ -65,9 +67,6 @@ export const HDTouchUpFeature: React.FC<HDTouchUpFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/remove-background/presentation/components/RemoveBackgroundFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet, Image, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ScrollView, StyleSheet, Image } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -35,6 +35,8 @@ export const RemoveBackgroundFeature: React.FC<RemoveBackgroundFeatureProps> = (
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useRemoveBackgroundFeature({
     config,
@@ -65,9 +67,6 @@ export const RemoveBackgroundFeature: React.FC<RemoveBackgroundFeatureProps> = (
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

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

@@ -5,9 +5,10 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { View, ScrollView, StyleSheet, Image, Dimensions, TextInput } from "react-native";
+import { View, ScrollView, StyleSheet, Image, TextInput } from "react-native";
 import {
   useAppDesignTokens,
+  useResponsive,
   AtomicText,
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
@@ -38,6 +39,9 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
+
   const feature = useRemoveObjectFeature({
     config,
     onSelectImage,
@@ -67,9 +71,6 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

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

@@ -5,21 +5,14 @@
 
 import * as React from "react";
 import { memo, useState, useRef, useMemo } from "react";
-import {
-    View,
-    StyleSheet,
-    Image,
-    PanResponder,
-    Dimensions,
-} from "react-native";
+import { View, StyleSheet, Image, PanResponder } from "react-native";
 import {
     AtomicText,
     useAppDesignTokens,
+    useResponsive,
 } from "@umituz/react-native-design-system";
 import type { ComparisonSliderProps } from "../../domain/entities";
 
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-
 export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
     function ComparisonSlider({
         originalUri,
@@ -28,8 +21,9 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
         afterLabel,
     }) {
         const tokens = useAppDesignTokens();
+        const { width: screenWidth, horizontalPadding } = useResponsive();
         const [sliderPosition, setSliderPosition] = useState(50);
-        const containerWidth = useRef(SCREEN_WIDTH - 32);
+        const containerWidth = useRef(screenWidth - horizontalPadding * 2);
 
         const panResponder = useRef(
             PanResponder.create({

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

@@ -5,9 +5,10 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { View, ScrollView, StyleSheet, Image, Dimensions } from "react-native";
+import { View, ScrollView, StyleSheet, Image } from "react-native";
 import {
   useAppDesignTokens,
+  useResponsive,
   AtomicInput,
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
@@ -38,6 +39,8 @@ export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> =
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useReplaceBackgroundFeature({
     config,
@@ -68,9 +71,6 @@ export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> =
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

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

@@ -5,20 +5,13 @@
 
 import * as React from "react";
 import { memo, useState, useRef, useMemo } from "react";
-import {
-  View,
-  StyleSheet,
-  Image,
-  PanResponder,
-  Dimensions,
-} from "react-native";
+import { View, StyleSheet, Image, PanResponder } from "react-native";
 import {
   AtomicText,
   useAppDesignTokens,
+  useResponsive,
 } from "@umituz/react-native-design-system";
 
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-
 export interface ComparisonSliderProps {
   originalUri: string;
   processedUri: string;
@@ -34,8 +27,9 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
     afterLabel = "After",
   }) {
     const tokens = useAppDesignTokens();
+    const { width: screenWidth, horizontalPadding } = useResponsive();
     const [sliderPosition, setSliderPosition] = useState(50);
-    const containerWidth = useRef(SCREEN_WIDTH - 48);
+    const containerWidth = useRef(screenWidth - horizontalPadding * 2);
 
     const panResponder = useRef(
       PanResponder.create({