@umituz/react-native-video-editor 1.0.26 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.0.26",
+  "version": "1.0.30",
   "description": "Professional video editor with layer-based timeline, text/image/shape/audio/animation layers, and export functionality",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -53,7 +53,6 @@
     "expo-document-picker": "^14.0.8",
     "expo-file-system": "^19.0.0",
     "expo-image": "^3.0.11",
-    "expo-linear-gradient": "^15.0.7",
     "expo-video": "^3.0.15",
     "react": "19.1.0",
     "react-native": "0.81.5",

package/src/player/presentation/components/VideoPlayer.tsx

@@ -98,9 +98,8 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     progressContainer: {
       ...StyleSheet.absoluteFillObject,
       justifyContent: "center", alignItems: "center",
-      backgroundColor: "rgba(0,0,0,0.5)",
     },
-    progressText: { color: "#fff", fontSize: 16, fontWeight: "600" },
+    progressText: { color: tokens.colors.onPrimary, fontSize: 16, fontWeight: "600" },
     errorText: { color: tokens.colors.error, fontSize: 14, textAlign: "center", padding: 16 },
   }), [tokens, videoWidth, videoHeight]);
 
@@ -129,7 +128,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
           ) : (
             <View style={styles.placeholder} />
           )}
-          <View style={styles.progressContainer}>
+          <View style={[styles.progressContainer, { backgroundColor: "rgba(0,0,0,0.5)" }]}>
             <AtomicText style={styles.progressText}>{progressPercent}%</AtomicText>
           </View>
         </View>

package/src/presentation/components/AudioEditor.tsx

@@ -5,17 +5,12 @@
 
 import React, { useCallback } from "react";
 import { View, ScrollView, StyleSheet, Alert } from "react-native";
-// Safe import for expo-document-picker
-let DocumentPicker: any;
-try {
-  DocumentPicker = require("expo-document-picker");
-} catch (e) {
-  // Graceful fail - DocumentPicker will be undefined
-}
+import * as DocumentPicker from "expo-document-picker";
 import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
 import type { Audio } from "../../domain/entities";
 import { useAudioLayerForm } from "../hooks/useAudioLayerForm";
 import { AUDIO_FILE_TYPES } from "../../infrastructure/constants/audio-layer.constants";
@@ -41,6 +36,7 @@ export const AudioEditor: React.FC<AudioEditorProps> = ({
   onCancel,
 }) => {
   const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
   const {
     formState,
     setAudioUri,
@@ -52,10 +48,6 @@ export const AudioEditor: React.FC<AudioEditorProps> = ({
   } = useAudioLayerForm(audio);
 
   const handlePickAudio = useCallback(async () => {
-    if (!DocumentPicker) {
-      Alert.alert("Error", "Audio picker is not available in this environment");
-      return;
-    }
     try {
       const result = await DocumentPicker.getDocumentAsync({
         type: AUDIO_FILE_TYPES[0],
@@ -66,26 +58,26 @@ export const AudioEditor: React.FC<AudioEditorProps> = ({
         setAudioUri(result.assets[0].uri);
       }
     } catch (error) {
-      Alert.alert("Error", "Failed to pick audio file");
+      Alert.alert(t("audio.errors.pickFailed"));
     }
-  }, [setAudioUri]);
+  }, [setAudioUri, t]);
 
   const handleSave = useCallback(() => {
     if (!isValid) {
-      Alert.alert("Error", "Please select an audio file");
+      Alert.alert(t("audio.errors.noFile"));
       return;
     }
     onSave(buildAudioData());
-  }, [isValid, buildAudioData, onSave]);
+  }, [isValid, buildAudioData, onSave, t]);
 
   const handleRemoveAudio = useCallback(() => {
     Alert.alert(
-      "Remove Audio",
-      "Are you sure you want to remove the audio from this scene?",
+      t("audio.remove.title"),
+      t("audio.remove.message"),
       [
-        { text: "Cancel", style: "cancel" },
+        { text: t("common.buttons.cancel"), style: "cancel" },
         {
-          text: "Remove",
+          text: t("audio.remove.confirm"),
           style: "destructive",
           onPress: () => {
             onRemove?.();
@@ -93,12 +85,12 @@ export const AudioEditor: React.FC<AudioEditorProps> = ({
         },
       ],
     );
-  }, [onRemove]);
+  }, [onRemove, t]);
 
   const getFileName = useCallback((uri: string) => {
     const parts = uri.split("/");
-    return parts[parts.length - 1] || "Unknown";
-  }, []);
+    return parts[parts.length - 1] || t("audio.unknownFile");
+  }, [t]);
 
   return (
     <View style={styles.container}>
@@ -112,7 +104,7 @@ export const AudioEditor: React.FC<AudioEditorProps> = ({
               marginBottom: 8,
             }}
           >
-            Audio File
+            {t("audio.file.title")}
           </AtomicText>
           <AudioFileSelector
             audioUri={formState.audioUri}

package/src/presentation/components/EditorTimeline.tsx

@@ -80,7 +80,7 @@ export const EditorTimeline: React.FC<EditorTimelineProps> = ({
             >
               <AtomicText
                 type="labelSmall"
-                style={{ color: "#FFFFFF", fontWeight: "600" }}
+                style={{ color: tokens.colors.onPrimary, fontWeight: "600" }}
               >
                 {index + 1}
               </AtomicText>

package/src/presentation/components/EditorToolPanel.tsx

@@ -135,8 +135,8 @@ export const EditorToolPanel: React.FC<EditorToolPanelProps> = ({
           ]}
           onPress={() =>
             Alert.alert(
-              t("editor.tools.effects", "Effects"),
-              t("editor.tools.effectsComingSoon", "Coming soon!"),
+              t("editor.tools.effects"),
+              t("editor.tools.effectsComingSoon"),
             )
           }
         >

package/src/presentation/components/LayerActionsMenu.tsx

@@ -10,6 +10,7 @@ import {
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
 import type { Layer, ImageLayer } from "../../domain/entities";
 
 export interface LayerActionsMenuProps {
@@ -38,6 +39,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
   onDelete,
 }) => {
   const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
 
   return (
     <View style={{ paddingVertical: 8 }}>
@@ -51,7 +53,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
               marginLeft: 12,
             }}
           >
-            Edit Text
+            {t("editor.layers.actions.editText")}
           </AtomicText>
         </TouchableOpacity>
       )}
@@ -65,7 +67,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
               marginLeft: 12,
             }}
           >
-            Edit Image
+            {t("editor.layers.actions.editImage")}
           </AtomicText>
         </TouchableOpacity>
       )}
@@ -79,7 +81,9 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
             marginLeft: 12,
           }}
         >
-          {layer.animation ? "Edit Animation" : "Add Animation"}
+          {layer.animation
+            ? t("editor.layers.actions.editAnimation")
+            : t("editor.layers.actions.addAnimation")}
         </AtomicText>
         {layer.animation && (
           <View
@@ -100,11 +104,13 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
             marginLeft: 12,
           }}
         >
-          Duplicate Layer
+          {t("editor.layers.actions.duplicate")}
         </AtomicText>
       </TouchableOpacity>
 
-      <View style={styles.divider} />
+      <View
+        style={[styles.divider, { backgroundColor: tokens.colors.border }]}
+      />
 
       <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveFront}>
         <AtomicIcon name="chevron-up-outline" size="md" color="secondary" />
@@ -115,7 +121,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
             marginLeft: 12,
           }}
         >
-          Bring to Front
+          {t("editor.layers.actions.bringToFront")}
         </AtomicText>
       </TouchableOpacity>
 
@@ -128,7 +134,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
             marginLeft: 12,
           }}
         >
-          Move Up
+          {t("editor.layers.actions.moveUp")}
         </AtomicText>
       </TouchableOpacity>
 
@@ -141,7 +147,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
             marginLeft: 12,
           }}
         >
-          Move Down
+          {t("editor.layers.actions.moveDown")}
         </AtomicText>
       </TouchableOpacity>
 
@@ -154,11 +160,13 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
             marginLeft: 12,
           }}
         >
-          Send to Back
+          {t("editor.layers.actions.sendToBack")}
         </AtomicText>
       </TouchableOpacity>
 
-      <View style={styles.divider} />
+      <View
+        style={[styles.divider, { backgroundColor: tokens.colors.border }]}
+      />
 
       <TouchableOpacity style={styles.actionMenuItem} onPress={onDelete}>
         <AtomicIcon name="trash-outline" size="md" color="error" />
@@ -169,7 +177,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
             marginLeft: 12,
           }}
         >
-          Delete Layer
+          {t("editor.layers.actions.delete")}
         </AtomicText>
       </TouchableOpacity>
     </View>
@@ -185,7 +193,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: "#E5E7EB",
     marginVertical: 8,
   },
   animationBadge: {

package/src/presentation/components/animation-layer/AnimationEditorActions.tsx

@@ -68,7 +68,7 @@ export const AnimationEditorActions: React.FC<AnimationEditorActionsProps> = ({
         <AtomicIcon name="checkmark-outline" size="sm" color="onSurface" />
         <AtomicText
           type="bodyMedium"
-          style={{ color: "#FFFFFF", fontWeight: "600", marginLeft: 6 }}
+          style={{ color: tokens.colors.onPrimary, fontWeight: "600", marginLeft: 6 }}
         >
           Apply
         </AtomicText>

package/src/presentation/components/animation-layer/AnimationTypeSelector.tsx

@@ -70,7 +70,7 @@ export const AnimationTypeSelector: React.FC<AnimationTypeSelectorProps> = ({
               style={{
                 color:
                   selectedType === anim.type
-                    ? "#FFFFFF"
+                    ? tokens.colors.onPrimary
                     : tokens.colors.textPrimary,
                 marginTop: 6,
                 fontWeight: selectedType === anim.type ? "600" : "400",

package/src/presentation/components/audio-layer/AudioEditorActions.tsx

@@ -81,7 +81,7 @@ export const AudioEditorActions: React.FC<AudioEditorActionsProps> = ({
         <AtomicIcon name="checkmark-outline" size="sm" color="onSurface" />
         <AtomicText
           type="bodyMedium"
-          style={{ color: "#FFFFFF", fontWeight: "600", marginLeft: 6 }}
+          style={{ color: tokens.colors.onPrimary, fontWeight: "600", marginLeft: 6 }}
         >
           Save
         </AtomicText>

package/src/presentation/components/audio-layer/AudioFileSelector.tsx

@@ -68,7 +68,13 @@ export const AudioFileSelector: React.FC<AudioFileSelectorProps> = ({
 
   return (
     <TouchableOpacity
-      style={[styles.pickButton, { backgroundColor: tokens.colors.surface }]}
+      style={[
+        styles.pickButton,
+        {
+          backgroundColor: tokens.colors.surface,
+          borderColor: tokens.colors.borderLight,
+        },
+      ]}
       onPress={onPickAudio}
     >
       <AtomicIcon name="cloud-upload-outline" size="md" color="primary" />
@@ -102,7 +108,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: 2,
-    borderColor: "rgba(0, 0, 0, 0.1)",
     borderStyle: "dashed",
   },
   fileCard: {

package/src/presentation/components/audio-layer/FadeEffectsSelector.tsx

@@ -73,7 +73,7 @@ export const FadeEffectsSelector: React.FC<FadeEffectsSelectorProps> = ({
                   type="labelSmall"
                   style={{
                     color:
-                      fadeIn === val ? "#FFFFFF" : tokens.colors.textPrimary,
+                      fadeIn === val ? tokens.colors.onPrimary : tokens.colors.textPrimary,
                     fontSize: 11,
                   }}
                 >
@@ -114,7 +114,7 @@ export const FadeEffectsSelector: React.FC<FadeEffectsSelectorProps> = ({
                   type="labelSmall"
                   style={{
                     color:
-                      fadeOut === val ? "#FFFFFF" : tokens.colors.textPrimary,
+                      fadeOut === val ? tokens.colors.onPrimary : tokens.colors.textPrimary,
                     fontSize: 11,
                   }}
                 >

package/src/presentation/components/audio-layer/VolumeSelector.tsx

@@ -61,7 +61,7 @@ export const VolumeSelector: React.FC<VolumeSelectorProps> = ({
             <AtomicText
               type="labelSmall"
               style={{
-                color: volume === val ? "#FFFFFF" : tokens.colors.textPrimary,
+                color: volume === val ? tokens.colors.onPrimary : tokens.colors.textPrimary,
                 fontWeight: volume === val ? "600" : "400",
               }}
             >

package/src/presentation/components/draggable-layer/LayerContent.tsx

@@ -51,7 +51,7 @@ export const LayerContent: React.FC<LayerContentProps> = ({ layer }) => {
           resizeMode="cover"
         />
       ) : (
-        <View style={styles.imagePlaceholder}>
+        <View style={[styles.imagePlaceholder, { backgroundColor: tokens.colors.surface }]}>
           <AtomicIcon name="image-outline" size="md" color="secondary" />
         </View>
       );
@@ -95,7 +95,6 @@ const styles = StyleSheet.create({
   imagePlaceholder: {
     width: "100%",
     height: "100%",
-    backgroundColor: "rgba(0,0,0,0.1)",
     alignItems: "center",
     justifyContent: "center",
   },

package/src/presentation/components/draggable-layer/ResizeHandles.tsx

@@ -31,7 +31,10 @@ export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
           style={[
             styles.handle,
             styles.handleTopLeft,
-            { backgroundColor: tokens.colors.primary },
+            {
+              backgroundColor: tokens.colors.primary,
+              borderColor: tokens.colors.onPrimary,
+            },
           ]}
         />
       </GestureDetector>
@@ -41,7 +44,10 @@ export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
           style={[
             styles.handle,
             styles.handleTopRight,
-            { backgroundColor: tokens.colors.primary },
+            {
+              backgroundColor: tokens.colors.primary,
+              borderColor: tokens.colors.onPrimary,
+            },
           ]}
         />
       </GestureDetector>
@@ -51,7 +57,10 @@ export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
           style={[
             styles.handle,
             styles.handleBottomLeft,
-            { backgroundColor: tokens.colors.primary },
+            {
+              backgroundColor: tokens.colors.primary,
+              borderColor: tokens.colors.onPrimary,
+            },
           ]}
         />
       </GestureDetector>
@@ -61,7 +70,10 @@ export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
           style={[
             styles.handle,
             styles.handleBottomRight,
-            { backgroundColor: tokens.colors.primary },
+            {
+              backgroundColor: tokens.colors.primary,
+              borderColor: tokens.colors.onPrimary,
+            },
           ]}
         />
       </GestureDetector>
@@ -76,7 +88,6 @@ const styles = StyleSheet.create({
     height: 12,
     borderRadius: 6,
     borderWidth: 2,
-    borderColor: "#FFFFFF",
   },
   handleTopLeft: {
     top: -6,

package/src/presentation/components/export/ExportActions.tsx

@@ -70,7 +70,7 @@ export const ExportActions: React.FC<ExportActionsProps> = ({
         )}
         <AtomicText
           type="bodyMedium"
-          style={{ color: "#FFFFFF", fontWeight: "600", marginLeft: 8 }}
+          style={{ color: tokens.colors.onPrimary, fontWeight: "600", marginLeft: 8 }}
         >
           {isExporting ? "Exporting..." : "Export Video"}
         </AtomicText>

package/src/presentation/components/export/ExportProgress.tsx

@@ -57,7 +57,12 @@ export const ExportProgress: React.FC<ExportProgressProps> = ({ progress }) => {
         </AtomicText>
       </View>
 
-      <View style={styles.progressBarContainer}>
+      <View
+        style={[
+          styles.progressBarContainer,
+          { backgroundColor: tokens.colors.borderLight },
+        ]}
+      >
         <View
           style={[
             styles.progressBar,
@@ -98,7 +103,6 @@ const styles = StyleSheet.create({
   },
   progressBarContainer: {
     height: 8,
-    backgroundColor: "rgba(0, 0, 0, 0.1)",
     borderRadius: 4,
     overflow: "hidden",
     marginBottom: 8,

package/src/presentation/components/export/OptionSelectorRow.tsx

@@ -67,7 +67,7 @@ export function OptionSelectorRow<T extends string>({
               style={{
                 color:
                   selectedValue === option.value
-                    ? "#FFFFFF"
+                    ? tokens.colors.onPrimary
                     : tokens.colors.textPrimary,
                 fontWeight: selectedValue === option.value ? "600" : "400",
                 textTransform: option.textTransform || "none",

package/src/presentation/components/export/WatermarkToggle.tsx

@@ -54,7 +54,7 @@ export const WatermarkToggle: React.FC<WatermarkToggleProps> = ({
           style={[
             styles.toggleThumb,
             {
-              backgroundColor: "#FFFFFF",
+              backgroundColor: tokens.colors.onPrimary,
               transform: [{ translateX: includeWatermark ? 20 : 0 }],
             },
           ]}

package/src/presentation/components/image-layer/OpacitySelector.tsx

@@ -59,7 +59,7 @@ export const OpacitySelector: React.FC<OpacitySelectorProps> = ({
               type="bodySmall"
               style={{
                 color:
-                  opacity === value ? "#FFFFFF" : tokens.colors.textPrimary,
+                  opacity === value ? tokens.colors.onPrimary : tokens.colors.textPrimary,
                 fontWeight: opacity === value ? "600" : "400",
               }}
             >

package/src/presentation/components/shape-layer/ColorPickerHorizontal.tsx

@@ -53,7 +53,7 @@ export const ColorPickerHorizontal: React.FC<ColorPickerHorizontalProps> = ({
                 borderColor:
                   selectedColor === color.value
                     ? tokens.colors.primary
-                    : "#E5E7EB",
+                    : tokens.colors.borderLight,
                 borderWidth: selectedColor === color.value ? 3 : 2,
               },
             ]}

package/src/presentation/components/shape-layer/ShapeTypeSelector.tsx

@@ -68,7 +68,7 @@ export const ShapeTypeSelector: React.FC<ShapeTypeSelectorProps> = ({
               style={{
                 color:
                   selectedShape === s.type
-                    ? "#FFFFFF"
+                    ? tokens.colors.onPrimary
                     : tokens.colors.textPrimary,
                 marginTop: 8,
                 fontWeight: selectedShape === s.type ? "600" : "400",

package/src/presentation/components/shape-layer/ValueSelector.tsx

@@ -66,7 +66,7 @@ export const ValueSelector: React.FC<ValueSelectorProps> = ({
             <AtomicText
               type="labelSmall"
               style={{
-                color: value === option ? "#FFFFFF" : tokens.colors.textPrimary,
+                color: value === option ? tokens.colors.onPrimary : tokens.colors.textPrimary,
                 fontWeight: value === option ? "600" : "400",
               }}
             >

package/src/presentation/components/text-layer/EditorActions.tsx

@@ -44,7 +44,7 @@ export const EditorActions: React.FC<EditorActionsProps> = ({
           type="bodyMedium"
           style={{ color: tokens.colors.textSecondary }}
         >
-          {t("common.buttons.cancel", "Cancel")}
+          {t("common.buttons.cancel")}
         </AtomicText>
       </TouchableOpacity>
 

package/src/presentation/components/text-layer/FontSizeSelector.tsx

@@ -59,7 +59,7 @@ export const FontSizeSelector: React.FC<FontSizeSelectorProps> = ({
               type="bodySmall"
               style={{
                 color:
-                  fontSize === size ? "#FFFFFF" : tokens.colors.textPrimary,
+                  fontSize === size ? tokens.colors.onPrimary : tokens.colors.textPrimary,
                 fontWeight: fontSize === size ? "600" : "400",
               }}
             >

package/src/presentation/hooks/useEditorHistory.ts

@@ -5,11 +5,12 @@
 
 import { useCallback } from "react";
 import { Alert } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
 // TODO: Refactor to use TanStack Query instead of store
 // Temporary stub until refactor
 const useHistoryStore = () => ({
   addToHistory: () => {},
-  pushHistory: (_project: any, _action: string) => {},
+  pushHistory: (_project: VideoProject | undefined, _action: string) => {},
   undo: () => undefined,
   redo: () => undefined,
   canUndo: () => false,
@@ -36,6 +37,7 @@ export function useEditorHistory({
   projectId,
   onUpdateProject,
 }: UseEditorHistoryParams): UseEditorHistoryReturn {
+  const { t } = useLocalization();
   const {
     pushHistory,
     undo: historyUndo,
@@ -58,17 +60,17 @@ export function useEditorHistory({
     const previousState = historyUndo();
     if (previousState) {
       onUpdateProject(previousState);
-      Alert.alert("Undo", "Action undone");
+      Alert.alert(t("editor.history.undo.success"));
     }
-  }, [historyUndo, onUpdateProject]);
+  }, [historyUndo, onUpdateProject, t]);
 
   const redo = useCallback(() => {
     const nextState = historyRedo();
     if (nextState) {
       onUpdateProject(nextState);
-      Alert.alert("Redo", "Action redone");
+      Alert.alert(t("editor.history.redo.success"));
     }
-  }, [historyRedo, onUpdateProject]);
+  }, [historyRedo, onUpdateProject, t]);
 
   return {
     undo,

package/src/presentation/hooks/useEditorScenes.ts

@@ -5,13 +5,14 @@
 
 import { useCallback } from "react";
 import { Alert } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
 import { sceneOperationsService } from "../../infrastructure/services/scene-operations.service";
-import type { Audio } from "../../domain/entities";
+import type { Scene, Audio } from "../../domain/entities";
 
 export interface UseEditorScenesParams {
-  scenes: any[];
+  scenes: Scene[];
   currentSceneIndex: number;
-  onUpdateScenes: (scenes: any[]) => void;
+  onUpdateScenes: (scenes: Scene[]) => void;
   onSceneIndexChange: (index: number) => void;
 }
 
@@ -28,6 +29,8 @@ export function useEditorScenes({
   onUpdateScenes,
   onSceneIndexChange,
 }: UseEditorScenesParams): UseEditorScenesReturn {
+  const { t } = useLocalization();
+
   const addScene = useCallback(() => {
     const result = sceneOperationsService.addScene(scenes);
     if (result.success) {
@@ -35,11 +38,11 @@ export function useEditorScenes({
       if (result.newSceneIndex !== undefined) {
         onSceneIndexChange(result.newSceneIndex);
       }
-      Alert.alert("Success", "New scene added!");
+      Alert.alert(t("editor.scenes.add.success"));
     } else {
-      Alert.alert("Error", result.error || "Failed to add scene");
+      Alert.alert(t("editor.scenes.add.error"));
     }
-  }, [scenes, onUpdateScenes, onSceneIndexChange]);
+  }, [scenes, onUpdateScenes, onSceneIndexChange, t]);
 
   const duplicateScene = useCallback(
     (sceneIndex: number) => {
@@ -49,12 +52,12 @@ export function useEditorScenes({
         if (result.newSceneIndex !== undefined) {
           onSceneIndexChange(result.newSceneIndex);
         }
-        Alert.alert("Success", "Scene duplicated!");
+        Alert.alert(t("editor.scenes.duplicate.success"));
       } else {
-        Alert.alert("Error", result.error || "Failed to duplicate scene");
+        Alert.alert(t("editor.scenes.duplicate.error"));
       }
     },
-    [scenes, onUpdateScenes, onSceneIndexChange],
+    [scenes, onUpdateScenes, onSceneIndexChange, t],
   );
 
   const deleteScene = useCallback(
@@ -69,12 +72,12 @@ export function useEditorScenes({
         if (result.newSceneIndex !== undefined) {
           onSceneIndexChange(result.newSceneIndex);
         }
-        Alert.alert("Success", "Scene deleted");
+        Alert.alert(t("editor.scenes.delete.success"));
       } else {
-        Alert.alert("Error", result.error || "Failed to delete scene");
+        Alert.alert(t("editor.scenes.delete.error"));
       }
     },
-    [scenes, currentSceneIndex, onUpdateScenes, onSceneIndexChange],
+    [scenes, currentSceneIndex, onUpdateScenes, onSceneIndexChange, t],
   );
 
   const updateSceneAudio = useCallback(
@@ -87,14 +90,14 @@ export function useEditorScenes({
       if (result.success) {
         onUpdateScenes(result.updatedScenes);
         Alert.alert(
-          "Success",
-          audio ? "Audio added to scene!" : "Audio removed from scene",
+          t("editor.scenes.audio.success"),
+          t(audio ? "editor.scenes.audio.added" : "editor.scenes.audio.removed"),
         );
       } else {
-        Alert.alert("Error", result.error || "Failed to update scene audio");
+        Alert.alert(t("editor.scenes.audio.error"));
       }
     },
-    [scenes, currentSceneIndex, onUpdateScenes],
+    [scenes, currentSceneIndex, onUpdateScenes, t],
   );
 
   return {

package/src/presentation/hooks/useImageLayerOperations.ts

@@ -5,14 +5,14 @@
 
 import { useCallback } from "react";
 import { Alert } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
 import { layerOperationsService } from "../../infrastructure/services/layer-operations.service";
-import type { AddImageLayerData } from "../../domain/entities";
-import type { ImageLayer } from "../../domain/entities";
+import type { AddImageLayerData, Scene, ImageLayer } from "../../domain/entities";
 
 export interface UseImageLayerOperationsParams {
-  scenes: any[];
+  scenes: Scene[];
   sceneIndex: number;
-  onUpdateScenes: (scenes: any[]) => void;
+  onUpdateScenes: (scenes: Scene[]) => void;
   onCloseBottomSheet: () => void;
 }
 
@@ -27,6 +27,8 @@ export function useImageLayerOperations({
   onUpdateScenes,
   onCloseBottomSheet,
 }: UseImageLayerOperationsParams): UseImageLayerOperationsReturn {
+  const { t } = useLocalization();
+
   const addImageLayer = useCallback(
     (data: AddImageLayerData) => {
       const result = layerOperationsService.addImageLayer(
@@ -37,12 +39,12 @@ export function useImageLayerOperations({
       if (result.success) {
         onUpdateScenes(result.updatedScenes);
         onCloseBottomSheet();
-        Alert.alert("Success", "Image layer added!");
+        Alert.alert(t("editor.layers.image.add.success"));
       } else {
-        Alert.alert("Error", result.error || "Failed to add image layer");
+        Alert.alert(t("editor.layers.image.add.error"));
       }
     },
-    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet],
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, t],
   );
 
   const editImageLayer = useCallback(
@@ -56,12 +58,12 @@ export function useImageLayerOperations({
       if (result.success) {
         onUpdateScenes(result.updatedScenes);
         onCloseBottomSheet();
-        Alert.alert("Success", "Image layer updated!");
+        Alert.alert(t("editor.layers.image.update.success"));
       } else {
-        Alert.alert("Error", result.error || "Failed to update image layer");
+        Alert.alert(t("editor.layers.image.update.error"));
       }
     },
-    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet],
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, t],
   );
 
   return {

package/src/presentation/hooks/useLayerActions.tsx

@@ -4,17 +4,18 @@
  */
 
 import { useCallback } from "react";
+import { useLocalization } from "@umituz/react-native-localization";
 import { TextLayerEditor } from "../components/TextLayerEditor";
 import { ImageLayerEditor } from "../components/ImageLayerEditor";
 import { ShapeLayerEditor } from "../components/ShapeLayerEditor";
 import { AnimationEditor } from "../components/AnimationEditor";
-import type { ImageLayer } from "../../domain/entities";
+import type { Scene, ImageLayer, Layer } from "../../domain/entities";
 import type { UseEditorLayersReturn } from "./useEditorLayers";
 import type { UseEditorBottomSheetReturn } from "./useEditorBottomSheet";
 
 export interface UseLayerActionsParams {
   selectedLayerId: string | null;
-  currentScene: any;
+  currentScene: Scene | undefined;
   layers: UseEditorLayersReturn;
   bottomSheet: UseEditorBottomSheetReturn;
 }
@@ -34,11 +35,12 @@ export function useLayerActions({
   layers,
   bottomSheet,
 }: UseLayerActionsParams): UseLayerActionsReturn {
+  const { t } = useLocalization();
   const { openBottomSheet, closeBottomSheet } = bottomSheet;
 
   const handleAddText = useCallback(() => {
     openBottomSheet({
-      title: "Add Text Layer",
+      title: t("editor.layers.text.add"),
       children: (
         <TextLayerEditor
           onSave={layers.addTextLayer}
@@ -46,17 +48,17 @@ export function useLayerActions({
         />
       ),
     });
-  }, [layers.addTextLayer, openBottomSheet, closeBottomSheet]);
+  }, [layers.addTextLayer, openBottomSheet, closeBottomSheet, t]);
 
   const handleEditLayer = useCallback(() => {
     if (!selectedLayerId || !currentScene) return;
     const layer = currentScene.layers.find(
-      (l: any) => l.id === selectedLayerId,
+      (l: Layer) => l.id === selectedLayerId,
     );
     if (!layer || layer.type !== "text") return;
 
     openBottomSheet({
-      title: "Edit Text Layer",
+      title: t("editor.layers.text.edit"),
       children: (
         <TextLayerEditor
           layer={layer}
@@ -71,11 +73,12 @@ export function useLayerActions({
     layers.editTextLayer,
     openBottomSheet,
     closeBottomSheet,
+    t,
   ]);
 
   const handleAddImage = useCallback(() => {
     openBottomSheet({
-      title: "Add Image Layer",
+      title: t("editor.layers.image.add"),
       children: (
         <ImageLayerEditor
           onSave={layers.addImageLayer}
@@ -83,18 +86,18 @@ export function useLayerActions({
         />
       ),
     });
-  }, [layers.addImageLayer, openBottomSheet, closeBottomSheet]);
+  }, [layers.addImageLayer, openBottomSheet, closeBottomSheet, t]);
 
   const handleEditImageLayer = useCallback(
     (layerId: string) => {
       if (!currentScene) return;
-      const layer = currentScene.layers.find((l: any) => l.id === layerId) as
+      const layer = currentScene.layers.find((l: Layer) => l.id === layerId) as
         | ImageLayer
         | undefined;
       if (!layer) return;
 
       openBottomSheet({
-        title: "Edit Image Layer",
+        title: t("editor.layers.image.edit"),
         children: (
           <ImageLayerEditor
             layer={layer}
@@ -104,12 +107,12 @@ export function useLayerActions({
         ),
       });
     },
-    [currentScene, layers.editImageLayer, openBottomSheet, closeBottomSheet],
+    [currentScene, layers.editImageLayer, openBottomSheet, closeBottomSheet, t],
   );
 
   const handleAddShape = useCallback(() => {
     openBottomSheet({
-      title: "Add Shape Layer",
+      title: t("editor.layers.shape.add"),
       children: (
         <ShapeLayerEditor
           onSave={layers.addShapeLayer}
@@ -117,16 +120,18 @@ export function useLayerActions({
         />
       ),
     });
-  }, [layers.addShapeLayer, openBottomSheet, closeBottomSheet]);
+  }, [layers.addShapeLayer, openBottomSheet, closeBottomSheet, t]);
 
   const handleAnimate = useCallback(
     (layerId: string) => {
       if (!currentScene) return;
-      const layer = currentScene.layers.find((l: any) => l.id === layerId);
+      const layer = currentScene.layers.find((l: Layer) => l.id === layerId);
       if (!layer) return;
 
       openBottomSheet({
-        title: layer.animation ? "Edit Animation" : "Add Animation",
+        title: layer.animation
+          ? t("editor.layers.animation.edit")
+          : t("editor.layers.animation.add"),
         children: (
           <AnimationEditor
             animation={layer.animation}
@@ -148,6 +153,7 @@ export function useLayerActions({
       layers.updateLayerAnimation,
       openBottomSheet,
       closeBottomSheet,
+      t,
     ],
   );
 

package/src/presentation/hooks/useLayerManipulation.ts

@@ -5,14 +5,14 @@
 
 import { useCallback } from "react";
 import { Alert } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
 import { layerOperationsService } from "../../infrastructure/services/layer-operations.service";
-import type { LayerOrderAction } from "../../domain/entities";
-import type { Animation } from "../../domain/entities";
+import type { Scene, LayerOrderAction, Animation } from "../../domain/entities";
 
 export interface UseLayerManipulationParams {
-  scenes: any[];
+  scenes: Scene[];
   sceneIndex: number;
-  onUpdateScenes: (scenes: any[]) => void;
+  onUpdateScenes: (scenes: Scene[]) => void;
   onCloseBottomSheet: () => void;
   onLayerDeleted?: () => void;
 }
@@ -36,15 +36,17 @@ export function useLayerManipulation({
   onCloseBottomSheet,
   onLayerDeleted,
 }: UseLayerManipulationParams): UseLayerManipulationReturn {
+  const { t } = useLocalization();
+
   const deleteLayer = useCallback(
     (layerId: string) => {
       Alert.alert(
-        "Delete Layer",
-        "Are you sure you want to delete this layer?",
+        t("editor.layers.delete.title"),
+        t("editor.layers.delete.message"),
         [
-          { text: "Cancel", style: "cancel" },
+          { text: t("common.buttons.cancel"), style: "cancel" },
           {
-            text: "Delete",
+            text: t("editor.layers.delete.confirm"),
             style: "destructive",
             onPress: () => {
               const result = layerOperationsService.deleteLayer(
@@ -55,16 +57,16 @@ export function useLayerManipulation({
               if (result.success) {
                 onUpdateScenes(result.updatedScenes);
                 onLayerDeleted?.();
-                Alert.alert("Success", "Layer deleted");
+                Alert.alert(t("editor.layers.delete.success"));
               } else {
-                Alert.alert("Error", result.error || "Failed to delete layer");
+                Alert.alert(t("editor.layers.delete.error"));
               }
             },
           },
         ],
       );
     },
-    [scenes, sceneIndex, onUpdateScenes, onLayerDeleted],
+    [scenes, sceneIndex, onUpdateScenes, onLayerDeleted, t],
   );
 
   const changeLayerOrder = useCallback(
@@ -77,18 +79,12 @@ export function useLayerManipulation({
       );
       if (result.success) {
         onUpdateScenes(result.updatedScenes);
-        const actionNames = {
-          front: "Layer moved to front",
-          back: "Layer moved to back",
-          up: "Layer moved up",
-          down: "Layer moved down",
-        };
-        Alert.alert("Success", actionNames[action]);
+        Alert.alert(t("editor.layers.order.success"), t(`editor.layers.order.${action}`));
       } else {
-        Alert.alert("Error", result.error || "Failed to change layer order");
+        Alert.alert(t("editor.layers.order.error"));
       }
     },
-    [scenes, sceneIndex, onUpdateScenes],
+    [scenes, sceneIndex, onUpdateScenes, t],
   );
 
   const duplicateLayer = useCallback(
@@ -100,12 +96,12 @@ export function useLayerManipulation({
       );
       if (result.success) {
         onUpdateScenes(result.updatedScenes);
-        Alert.alert("Success", "Layer duplicated!");
+        Alert.alert(t("editor.layers.duplicate.success"));
       } else {
-        Alert.alert("Error", result.error || "Failed to duplicate layer");
+        Alert.alert(t("editor.layers.duplicate.error"));
       }
     },
-    [scenes, sceneIndex, onUpdateScenes],
+    [scenes, sceneIndex, onUpdateScenes, t],
   );
 
   const updateLayerPosition = useCallback(
@@ -152,19 +148,16 @@ export function useLayerManipulation({
         onUpdateScenes(result.updatedScenes);
         onCloseBottomSheet();
         Alert.alert(
-          "Success",
-          animation
-            ? "Animation applied to layer!"
-            : "Animation removed from layer",
+          t("editor.layers.animation.success"),
+          t(animation
+            ? "editor.layers.animation.applied"
+            : "editor.layers.animation.removed"),
         );
       } else {
-        Alert.alert(
-          "Error",
-          result.error || "Failed to update layer animation",
-        );
+        Alert.alert(t("editor.layers.animation.error"));
       }
     },
-    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet],
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, t],
   );
 
   return {

package/src/presentation/hooks/useShapeLayerForm.ts

@@ -36,7 +36,7 @@ export function useShapeLayerForm(
 
   const [formState, setFormState] = useState<ShapeLayerFormState>({
     shape: initialLayer?.shape || "rectangle",
-    fillColor: initialLayer?.fillColor || "#3B82F6",
+    fillColor: initialLayer?.fillColor || tokens.colors.primary,
     borderColor: initialLayer?.borderColor || tokens.colors.textPrimary,
     borderWidth: initialLayer?.borderWidth || 0,
     opacity: initialLayer?.opacity || 1,

package/src/presentation/hooks/useShapeLayerOperations.ts

@@ -5,13 +5,14 @@
 
 import { useCallback } from "react";
 import { Alert } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
 import { layerOperationsService } from "../../infrastructure/services/layer-operations.service";
-import type { AddShapeLayerData } from "../../domain/entities";
+import type { AddShapeLayerData, Scene } from "../../domain/entities";
 
 export interface UseShapeLayerOperationsParams {
-  scenes: any[];
+  scenes: Scene[];
   sceneIndex: number;
-  onUpdateScenes: (scenes: any[]) => void;
+  onUpdateScenes: (scenes: Scene[]) => void;
   onCloseBottomSheet: () => void;
   defaultColor: string;
 }
@@ -27,6 +28,8 @@ export function useShapeLayerOperations({
   onCloseBottomSheet,
   defaultColor,
 }: UseShapeLayerOperationsParams): UseShapeLayerOperationsReturn {
+  const { t } = useLocalization();
+
   const addShapeLayer = useCallback(
     (data: AddShapeLayerData) => {
       const result = layerOperationsService.addShapeLayer(
@@ -38,12 +41,12 @@ export function useShapeLayerOperations({
       if (result.success) {
         onUpdateScenes(result.updatedScenes);
         onCloseBottomSheet();
-        Alert.alert("Success", "Shape layer added!");
+        Alert.alert(t("editor.layers.shape.add.success"));
       } else {
-        Alert.alert("Error", result.error || "Failed to add shape layer");
+        Alert.alert(t("editor.layers.shape.add.error"));
       }
     },
-    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, defaultColor],
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, defaultColor, t],
   );
 
   return {

package/src/presentation/hooks/useTextLayerOperations.ts

@@ -5,14 +5,14 @@
 
 import { useCallback } from "react";
 import { Alert } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
 import { layerOperationsService } from "../../infrastructure/services/layer-operations.service";
-import type { AddTextLayerData } from "../../domain/entities";
-import type { TextLayer } from "../../domain/entities";
+import type { AddTextLayerData, Scene, TextLayer } from "../../domain/entities";
 
 export interface UseTextLayerOperationsParams {
-  scenes: any[];
+  scenes: Scene[];
   sceneIndex: number;
-  onUpdateScenes: (scenes: any[]) => void;
+  onUpdateScenes: (scenes: Scene[]) => void;
   onCloseBottomSheet: () => void;
   defaultColor: string;
 }
@@ -29,6 +29,8 @@ export function useTextLayerOperations({
   onCloseBottomSheet,
   defaultColor,
 }: UseTextLayerOperationsParams): UseTextLayerOperationsReturn {
+  const { t } = useLocalization();
+
   const addTextLayer = useCallback(
     (data: AddTextLayerData) => {
       const result = layerOperationsService.addTextLayer(
@@ -40,12 +42,12 @@ export function useTextLayerOperations({
       if (result.success) {
         onUpdateScenes(result.updatedScenes);
         onCloseBottomSheet();
-        Alert.alert("Success", "Text layer added!");
+        Alert.alert(t("editor.layers.text.add.success"));
       } else {
-        Alert.alert("Error", result.error || "Failed to add text layer");
+        Alert.alert(t("editor.layers.text.add.error"));
       }
     },
-    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, defaultColor],
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, defaultColor, t],
   );
 
   const editTextLayer = useCallback(
@@ -59,12 +61,12 @@ export function useTextLayerOperations({
       if (result.success) {
         onUpdateScenes(result.updatedScenes);
         onCloseBottomSheet();
-        Alert.alert("Success", "Text layer updated!");
+        Alert.alert(t("editor.layers.text.update.success"));
       } else {
-        Alert.alert("Error", result.error || "Failed to update text layer");
+        Alert.alert(t("editor.layers.text.update.error"));
       }
     },
-    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet],
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, t],
   );
 
   return {