@umituz/react-native-video-editor 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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",

package/src/domain/entities/video-project.types.ts

@@ -31,14 +31,6 @@ export interface Subtitle {
 
 export type TransitionType = "fade" | "slide" | "zoom" | "wipe" | "none";
 
-export type AnimationType =
-  | "fade"
-  | "slide"
-  | "bounce"
-  | "zoom"
-  | "rotate"
-  | "none";
-
 export interface Position {
   x: number;
   y: number;
@@ -49,13 +41,6 @@ export interface Size {
   height: number;
 }
 
-export interface Animation {
-  type: AnimationType;
-  duration: number;
-  delay?: number;
-  easing?: "linear" | "ease-in" | "ease-out" | "ease-in-out";
-}
-
 export interface Transition {
   type: TransitionType;
   duration: number;
@@ -90,7 +75,6 @@ export interface TextLayer {
     | "900";
   color: string;
   textAlign: "left" | "center" | "right";
-  animation?: Animation;
 }
 
 export interface ImageLayer {
@@ -101,7 +85,6 @@ export interface ImageLayer {
   size: Size;
   rotation: number;
   opacity: number;
-  animation?: Animation;
 }
 
 export interface VideoLayer {
@@ -115,7 +98,6 @@ export interface VideoLayer {
   startTime: number;
   endTime: number;
   volume: number;
-  animation?: Animation;
 }
 
 export interface ShapeLayer {
@@ -129,7 +111,6 @@ export interface ShapeLayer {
   fillColor: string;
   borderColor?: string;
   borderWidth?: number;
-  animation?: Animation;
 }
 
 export type Layer = TextLayer | ImageLayer | VideoLayer | ShapeLayer;

package/src/infrastructure/services/image-layer-operations.service.ts

@@ -20,11 +20,6 @@ class ImageLayerOperationsService extends BaseLayerOperationsService<ImageLayer>
       size: { width: 70, height: 40 },
       rotation: 0,
       opacity: layerData.opacity ?? 1,
-      animation: {
-        type: "fade",
-        duration: 500,
-        easing: "ease-in-out",
-      },
     };
   }
 

package/src/infrastructure/services/layer-manipulation.service.ts

@@ -3,7 +3,7 @@
  * Orchestrator service that delegates to specialized layer operation services
  */
 
-import type { Scene, Animation } from "../../domain/entities/video-project.types";
+import type { Scene } from "../../domain/entities/video-project.types";
 import type { LayerOperationResult, LayerOrderAction } from "../../domain/entities/video-project.types";
 import { layerDeleteService } from "./layer-operations/layer-delete.service";
 import { layerOrderService } from "./layer-operations/layer-order.service";
@@ -72,20 +72,6 @@ class LayerManipulationService {
       height,
     );
   }
-
-  updateLayerAnimation(
-    scenes: Scene[],
-    sceneIndex: number,
-    layerId: string,
-    animation: Animation | undefined,
-  ): LayerOperationResult {
-    return layerTransformService.updateLayerAnimation(
-      scenes,
-      sceneIndex,
-      layerId,
-      animation,
-    );
-  }
 }
 
 export const layerManipulationService = new LayerManipulationService();

package/src/infrastructure/services/layer-operations/layer-transform.service.ts

@@ -1,9 +1,9 @@
 /**
  * Layer Transform Service
- * Single Responsibility: Handle layer position, size, and animation updates
+ * Single Responsibility: Handle layer position and size updates
  */
 
-import type { Scene, Animation } from "../../../domain/entities/video-project.types";
+import type { Scene } from "../../../domain/entities/video-project.types";
 import type { LayerOperationResult } from "../../../domain/entities/video-project.types";
 
 class LayerTransformService {
@@ -114,56 +114,6 @@ class LayerTransformService {
       };
     }
   }
-
-  /**
-   * Update layer animation
-   */
-  updateLayerAnimation(
-    scenes: Scene[],
-    sceneIndex: number,
-    layerId: string,
-    animation: Animation | undefined,
-  ): LayerOperationResult {
-    try {
-      if (sceneIndex < 0 || sceneIndex >= scenes.length) {
-        return {
-          success: false,
-          updatedScenes: scenes,
-          error: "Invalid scene index",
-        };
-      }
-
-      const updatedScenes = [...scenes];
-      const layerIndex = updatedScenes[sceneIndex].layers.findIndex(
-        (l) => l.id === layerId,
-      );
-
-      if (layerIndex === -1) {
-        return {
-          success: false,
-          updatedScenes: scenes,
-          error: "Layer not found",
-        };
-      }
-
-      const existingLayer = updatedScenes[sceneIndex].layers[layerIndex];
-      updatedScenes[sceneIndex].layers[layerIndex] = {
-        ...existingLayer,
-        animation,
-      };
-
-      return { success: true, updatedScenes };
-    } catch (error) {
-      return {
-        success: false,
-        updatedScenes: scenes,
-        error:
-          error instanceof Error
-            ? error.message
-            : "Failed to update layer animation",
-      };
-    }
-  }
 }
 
 export const layerTransformService = new LayerTransformService();

package/src/infrastructure/services/layer-operations.service.ts

@@ -7,7 +7,7 @@ import { textLayerOperationsService } from "./text-layer-operations.service";
 import { imageLayerOperationsService } from "./image-layer-operations.service";
 import { shapeLayerOperationsService } from "./shape-layer-operations.service";
 import { layerManipulationService } from "./layer-manipulation.service";
-import type { Scene, TextLayer, ImageLayer, Animation } from "../../domain/entities/video-project.types";
+import type { Scene, TextLayer, ImageLayer } from "../../domain/entities/video-project.types";
 import type {
   LayerOperationResult,
   LayerOrderAction,
@@ -176,23 +176,6 @@ class LayerOperationsService {
       height,
     );
   }
-
-  /**
-   * Update layer animation
-   */
-  updateLayerAnimation(
-    scenes: Scene[],
-    sceneIndex: number,
-    layerId: string,
-    animation: Animation | undefined,
-  ): LayerOperationResult {
-    return layerManipulationService.updateLayerAnimation(
-      scenes,
-      sceneIndex,
-      layerId,
-      animation,
-    );
-  }
 }
 
 export const layerOperationsService = new LayerOperationsService();

package/src/infrastructure/services/shape-layer-operations.service.ts

@@ -27,11 +27,6 @@ class ShapeLayerOperationsService extends BaseLayerOperationsService<ShapeLayer>
       fillColor: layerData.fillColor ?? defaultColor,
       borderColor: layerData.borderColor,
       borderWidth: layerData.borderWidth,
-      animation: {
-        type: "fade",
-        duration: 500,
-        easing: "ease-in-out",
-      },
     };
   }
 

package/src/infrastructure/services/text-layer-operations.service.ts

@@ -29,11 +29,6 @@ class TextLayerOperationsService extends BaseLayerOperationsService<TextLayer> {
       fontWeight: (layerData.fontWeight as TextLayer["fontWeight"]) || "bold",
       color: layerData.color || defaultColor,
       textAlign: layerData.textAlign || "center",
-      animation: {
-        type: "fade",
-        duration: 500,
-        easing: "ease-in-out",
-      },
     };
   }
 

package/src/presentation/components/LayerActionsMenu.tsx

@@ -13,7 +13,6 @@ interface LayerActionsMenuProps {
   layer: Layer;
   onEditText: () => void;
   onEditImage: () => void;
-  onAnimate: () => void;
   onDuplicate: () => void;
   onMoveFront: () => void;
   onMoveUp: () => void;
@@ -26,7 +25,6 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
   layer,
   onEditText,
   onEditImage,
-  onAnimate,
   onDuplicate,
   onMoveFront,
   onMoveUp,
@@ -59,13 +57,6 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
 
     // Common actions
     items.push(
-      {
-        id: "animate",
-        label: layer.animation
-          ? (t("editor.layers.actions.editAnimation") || "Edit Animation")
-          : (t("editor.layers.actions.addAnimation") || "Add Animation"),
-        icon: "sparkles-outline",
-      },
       {
         id: "duplicate",
         label: t("editor.layers.actions.duplicate") || "Duplicate",
@@ -111,9 +102,6 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
       case "edit-image":
         onEditImage();
         break;
-      case "animate":
-        onAnimate();
-        break;
       case "duplicate":
         onDuplicate();
         break;
@@ -133,7 +121,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
         onDelete();
         break;
     }
-  }, [onEditText, onEditImage, onAnimate, onDuplicate, onMoveFront, onMoveUp, onMoveDown, onMoveBack, onDelete]);
+  }, [onEditText, onEditImage, onDuplicate, onMoveFront, onMoveUp, onMoveDown, onMoveBack, onDelete]);
 
   return <ActionMenu actions={menuItems} onSelect={handleSelect} testID="layer-actions-menu" />;
 };

package/src/presentation/hooks/index.ts

@@ -3,7 +3,6 @@
  * All hooks for the video editor presentation layer
  */
 
-export { useAnimationForm } from "./useAnimationForm";
 export { useAudioLayerForm } from "./useAudioLayerForm";
 export { useCollageEditor } from "./useCollageEditor";
 export { useDraggableLayerGestures } from "./useDraggableLayerGestures";

package/src/presentation/hooks/useEditorActions.tsx

@@ -29,7 +29,6 @@ interface UseEditorActionsReturn {
   handleEditImageLayer: (layerId: string) => void;
   handleAddShape: () => void;
   handleAudio: () => void;
-  handleAnimate: (layerId: string) => void;
   handleLayerActionsPress: (layer: Layer) => void;
   handleSceneLongPress: (index: number) => void;
   handleExport: () => void;
@@ -63,7 +62,6 @@ export function useEditorActions({
     bottomSheet,
     handleEditLayer: layerActions.handleEditLayer,
     handleEditImageLayer: layerActions.handleEditImageLayer,
-    handleAnimate: layerActions.handleAnimate,
   });
 
   const exportActions = useExportActions({
@@ -84,7 +82,6 @@ export function useEditorActions({
     handleEditImageLayer: layerActions.handleEditImageLayer,
     handleAddShape: layerActions.handleAddShape,
     handleAudio: sceneActions.handleAudio,
-    handleAnimate: layerActions.handleAnimate,
     handleLayerActionsPress: menuActions.handleLayerActionsPress,
     handleSceneLongPress,
     handleExport: exportActions.handleExport,

package/src/presentation/hooks/useEditorLayers.ts

@@ -14,7 +14,7 @@ import type {
   LayerOrderAction,
   Scene,
 } from "../../domain/entities/video-project.types";
-import type { TextLayer, ImageLayer, Animation } from "../../domain/entities/video-project.types";
+import type { TextLayer, ImageLayer } from "../../domain/entities/video-project.types";
 
 interface UseEditorLayersParams {
   projectId: string;
@@ -37,10 +37,6 @@ export interface UseEditorLayersReturn {
   duplicateLayer: (layerId: string) => void;
   updateLayerPosition: (layerId: string, x: number, y: number) => void;
   updateLayerSize: (layerId: string, width: number, height: number) => void;
-  updateLayerAnimation: (
-    layerId: string,
-    animation: Animation | undefined,
-  ) => void;
 }
 
 export function useEditorLayers({
@@ -93,6 +89,5 @@ export function useEditorLayers({
     duplicateLayer: layerManipulation.duplicateLayer,
     updateLayerPosition: layerManipulation.updateLayerPosition,
     updateLayerSize: layerManipulation.updateLayerSize,
-    updateLayerAnimation: layerManipulation.updateLayerAnimation,
   };
 }

package/src/presentation/hooks/useLayerActions.tsx

@@ -1,6 +1,6 @@
 /**
  * useLayerActions Hook
- * Single Responsibility: Layer action handlers (add, edit, animate)
+ * Single Responsibility: Layer action handlers (add, edit)
  */
 
 import { useCallback } from "react";
@@ -8,7 +8,6 @@ import { useLocalization } from "@umituz/react-native-settings";
 import { TextLayerEditor } from "../components/TextLayerEditor";
 import { ImageLayerEditor } from "../components/ImageLayerEditor";
 import { ShapeLayerEditor } from "../components/ShapeLayerEditor";
-import { AnimationEditor } from "../components/AnimationEditor";
 import type { Scene, Layer } from "../../domain/entities/video-project.types";
 import type { UseEditorLayersReturn } from "./useEditorLayers";
 import type { UseEditorBottomSheetReturn } from "./useEditorBottomSheet";
@@ -26,7 +25,6 @@ interface UseLayerActionsReturn {
   handleAddImage: () => void;
   handleEditImageLayer: (layerId: string) => void;
   handleAddShape: () => void;
-  handleAnimate: (layerId: string) => void;
 }
 
 export function useLayerActions({
@@ -120,47 +118,11 @@ export function useLayerActions({
     });
   }, [layers.addShapeLayer, openBottomSheet, closeBottomSheet, t]);
 
-  const handleAnimate = useCallback(
-    (layerId: string) => {
-      if (!currentScene) return;
-      const layer = currentScene.layers.find((l: Layer) => l.id === layerId);
-      if (!layer) return;
-
-      openBottomSheet({
-        title: layer.animation
-          ? t("editor.layers.animation.edit")
-          : t("editor.layers.animation.add"),
-        children: (
-          <AnimationEditor
-            animation={layer.animation}
-            onSave={(animation) =>
-              layers.updateLayerAnimation(layerId, animation)
-            }
-            onRemove={
-              layer.animation
-                ? () => layers.updateLayerAnimation(layerId, undefined)
-                : undefined
-            }
-            onCancel={closeBottomSheet}
-          />
-        ),
-      });
-    },
-    [
-      currentScene,
-      layers.updateLayerAnimation,
-      openBottomSheet,
-      closeBottomSheet,
-      t,
-    ],
-  );
-
   return {
     handleAddText,
     handleEditLayer,
     handleAddImage,
     handleEditImageLayer,
     handleAddShape,
-    handleAnimate,
   };
 }

package/src/presentation/hooks/useLayerManipulation.ts

@@ -1,13 +1,13 @@
 /**
  * useLayerManipulation Hook
- * Single Responsibility: Layer manipulation operations (delete, order, duplicate, position, size, animation)
+ * Single Responsibility: Layer manipulation operations (delete, order, duplicate, position, size)
  */
 
 import { useCallback } from "react";
 import { Alert } from "react-native";
 import { useLocalization } from "@umituz/react-native-settings";
 import { layerOperationsService } from "../../infrastructure/services/layer-operations.service";
-import type { Scene, LayerOrderAction, Animation } from "../../domain/entities/video-project.types";
+import type { Scene, LayerOrderAction } from "../../domain/entities/video-project.types";
 
 interface UseLayerManipulationParams {
   scenes: Scene[];
@@ -23,10 +23,6 @@ interface UseLayerManipulationReturn {
   duplicateLayer: (layerId: string) => void;
   updateLayerPosition: (layerId: string, x: number, y: number) => void;
   updateLayerSize: (layerId: string, width: number, height: number) => void;
-  updateLayerAnimation: (
-    layerId: string,
-    animation: Animation | undefined,
-  ) => void;
 }
 
 export function useLayerManipulation({
@@ -136,36 +132,11 @@ export function useLayerManipulation({
     [scenes, sceneIndex, onUpdateScenes],
   );
 
-  const updateLayerAnimation = useCallback(
-    (layerId: string, animation: Animation | undefined) => {
-      const result = layerOperationsService.updateLayerAnimation(
-        scenes,
-        sceneIndex,
-        layerId,
-        animation,
-      );
-      if (result.success) {
-        onUpdateScenes(result.updatedScenes);
-        onCloseBottomSheet();
-        Alert.alert(
-          t("editor.layers.animation.success"),
-          t(animation
-            ? "editor.layers.animation.applied"
-            : "editor.layers.animation.removed"),
-        );
-      } else {
-        Alert.alert(t("editor.layers.animation.error"));
-      }
-    },
-    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, t],
-  );
-
   return {
     deleteLayer,
     changeLayerOrder,
     duplicateLayer,
     updateLayerPosition,
     updateLayerSize,
-    updateLayerAnimation,
   };
 }

package/src/presentation/hooks/useMenuActions.tsx

@@ -15,7 +15,6 @@ interface UseMenuActionsParams {
   bottomSheet: UseEditorBottomSheetReturn;
   handleEditLayer: () => void;
   handleEditImageLayer: (layerId: string) => void;
-  handleAnimate: (layerId: string) => void;
 }
 
 interface UseMenuActionsReturn {
@@ -27,7 +26,6 @@ export function useMenuActions({
   bottomSheet,
   handleEditLayer,
   handleEditImageLayer,
-  handleAnimate,
 }: UseMenuActionsParams): UseMenuActionsReturn {
   const { openBottomSheet, closeBottomSheet } = bottomSheet;
 
@@ -59,11 +57,6 @@ export function useMenuActions({
               const timer = setTimeout(() => handleEditImageLayer(layer.id), 300);
               timersRef.current.push(timer);
             }}
-            onAnimate={() => {
-              closeBottomSheet();
-              const timer = setTimeout(() => handleAnimate(layer.id), 300);
-              timersRef.current.push(timer);
-            }}
             onDuplicate={() => {
               closeBottomSheet();
               layers.duplicateLayer(layer.id);
@@ -96,7 +89,6 @@ export function useMenuActions({
       layers,
       handleEditLayer,
       handleEditImageLayer,
-      handleAnimate,
       openBottomSheet,
       closeBottomSheet,
     ],

package/src/presentation/components/AnimationEditor.tsx

@@ -1,273 +0,0 @@
-/**
- * AnimationEditor Component
- * Main component for editing layer animations
- */
-
-import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-import { useLocalization } from "@umituz/react-native-settings";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import type { Animation } from "../../domain/entities/video-project.types";
-import { useAnimationForm } from "../hooks/useAnimationForm";
-import { EditorActions } from "./text-layer/EditorActions";
-
-interface AnimationEditorProps {
-  readonly animation?: Animation;
-  readonly onSave: (animation: Animation) => void;
-  readonly onRemove?: () => void;
-  readonly onCancel: () => void;
-}
-
-const ANIMATION_TYPES = [
-  { label: "None", value: "none" as const },
-  { label: "Fade", value: "fade" as const },
-  { label: "Slide", value: "slide" as const },
-  { label: "Bounce", value: "bounce" as const },
-  { label: "Zoom", value: "zoom" as const },
-  { label: "Rotate", value: "rotate" as const },
-] as const;
-
-const EASING_OPTIONS = [
-  { label: "Linear", value: "linear" as const },
-  { label: "Ease In", value: "ease-in" as const },
-  { label: "Ease Out", value: "ease-out" as const },
-  { label: "Ease In Out", value: "ease-in-out" as const },
-] as const;
-
-export const AnimationEditor: React.FC<AnimationEditorProps> = ({
-  animation,
-  onSave,
-  onRemove,
-  onCancel,
-}) => {
-  const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
-  const {
-    formState,
-    setAnimationType,
-    setDuration,
-    setDelay,
-    setEasing,
-    buildAnimationData,
-    isValid,
-  } = useAnimationForm(animation);
-
-  const handleSave = useCallback(() => {
-    if (!isValid) return;
-    onSave(buildAnimationData());
-  }, [isValid, buildAnimationData, onSave]);
-
-  return (
-    <View style={styles.container}>
-      <ScrollView showsVerticalScrollIndicator={false}>
-        {/* Animation Type Selector */}
-        <View style={styles.section}>
-          <AtomicText
-            type="labelMedium"
-            color="textSecondary"
-            style={{ marginBottom: tokens.spacing.sm }}
-          >
-            {t("editor.properties.animation_type") || "Animation Type"}
-          </AtomicText>
-          <View style={styles.optionsContainer}>
-            {ANIMATION_TYPES.map((option) => (
-              <View
-                key={option.value}
-                style={[
-                  styles.optionButton,
-                  formState.type === option.value && {
-                    backgroundColor: tokens.colors.primary,
-                  },
-                ]}
-              >
-                <AtomicText
-                  fontWeight="medium"
-                  color={
-                    formState.type === option.value
-                      ? "onPrimary"
-                      : "textPrimary"
-                  }
-                  onPress={() => setAnimationType(option.value)}
-                >
-                  {option.label}
-                </AtomicText>
-              </View>
-            ))}
-          </View>
-        </View>
-
-        {/* Duration Selector */}
-        {formState.type !== "none" && (
-          <>
-            <View style={styles.section}>
-              <AtomicText
-                type="labelMedium"
-                color="textSecondary"
-                style={{ marginBottom: tokens.spacing.sm }}
-              >
-                {t("editor.properties.duration") || "Duration"}
-              </AtomicText>
-              <View style={styles.sliderContainer}>
-                <AtomicText type="bodySmall" color="textSecondary">
-                  {formState.duration}ms
-                </AtomicText>
-              </View>
-              <View style={styles.valueButtons}>
-                {[300, 500, 1000, 1500, 2000].map((value) => (
-                  <View
-                    key={value}
-                    style={[
-                      styles.valueButton,
-                      formState.duration === value && {
-                        backgroundColor: tokens.colors.primary,
-                      },
-                    ]}
-                  >
-                    <AtomicText
-                      type="labelSmall"
-                      color={
-                        formState.duration === value
-                          ? "onPrimary"
-                          : "textPrimary"
-                      }
-                      onPress={() => setDuration(value)}
-                    >
-                      {value}ms
-                    </AtomicText>
-                  </View>
-                ))}
-              </View>
-            </View>
-
-            {/* Delay Selector */}
-            <View style={styles.section}>
-              <AtomicText
-                type="labelMedium"
-                color="textSecondary"
-                style={{ marginBottom: tokens.spacing.sm }}
-              >
-                {t("editor.properties.delay") || "Delay"}
-              </AtomicText>
-              <View style={styles.sliderContainer}>
-                <AtomicText type="bodySmall" color="textSecondary">
-                  {formState.delay || 0}ms
-                </AtomicText>
-              </View>
-              <View style={styles.valueButtons}>
-                {[0, 100, 200, 500, 1000].map((value) => (
-                  <View
-                    key={value}
-                    style={[
-                      styles.valueButton,
-                      (formState.delay || 0) === value && {
-                        backgroundColor: tokens.colors.primary,
-                      },
-                    ]}
-                  >
-                    <AtomicText
-                      type="labelSmall"
-                      color={
-                        (formState.delay || 0) === value
-                          ? "onPrimary"
-                          : "textPrimary"
-                      }
-                      onPress={() => setDelay(value)}
-                    >
-                      {value}ms
-                    </AtomicText>
-                  </View>
-                ))}
-              </View>
-            </View>
-
-            {/* Easing Selector */}
-            <View style={styles.section}>
-              <AtomicText
-                type="labelMedium"
-                color="textSecondary"
-                style={{ marginBottom: tokens.spacing.sm }}
-              >
-                {t("editor.properties.easing") || "Easing"}
-              </AtomicText>
-              <View style={styles.optionsContainer}>
-                {EASING_OPTIONS.map((option) => (
-                  <View
-                    key={option.value}
-                    style={[
-                      styles.optionButton,
-                      formState.easing === option.value && {
-                        backgroundColor: tokens.colors.primary,
-                      },
-                    ]}
-                  >
-                    <AtomicText
-                      fontWeight="medium"
-                      color={
-                        formState.easing === option.value
-                          ? "onPrimary"
-                          : "textPrimary"
-                      }
-                      onPress={() => setEasing(option.value)}
-                    >
-                      {option.label}
-                    </AtomicText>
-                  </View>
-                ))}
-              </View>
-            </View>
-          </>
-        )}
-      </ScrollView>
-
-      <EditorActions
-        onCancel={onCancel}
-        onSave={handleSave}
-        saveLabel={animation ? "Update Animation" : "Add Animation"}
-        isValid={isValid}
-        onRemove={onRemove}
-        removeLabel="Remove Animation"
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    maxHeight: "80%",
-  },
-  section: {
-    marginBottom: 20,
-  },
-  optionsContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-  },
-  optionButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: "#ccc",
-    minWidth: 80,
-    alignItems: "center",
-  },
-  sliderContainer: {
-    marginBottom: 12,
-  },
-  valueButtons: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-  },
-  valueButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: "#ccc",
-    minWidth: 60,
-    alignItems: "center",
-  },
-});

package/src/presentation/hooks/useAnimationForm.tsx

@@ -1,98 +0,0 @@
-/**
- * useAnimationForm Hook
- * Manages form state for animation editing
- */
-
-import { useCallback, useMemo } from "react";
-import type { Animation, AnimationType } from "../../domain/entities/video-project.types";
-
-interface AnimationFormState {
-  type: AnimationType;
-  duration: number;
-  delay?: number;
-  easing: "linear" | "ease-in" | "ease-out" | "ease-in-out";
-}
-
-interface UseAnimationFormParams {
-  animation?: Animation;
-}
-
-interface UseAnimationFormReturn {
-  formState: AnimationFormState;
-  setAnimationType: (type: AnimationType) => void;
-  setDuration: (duration: number) => void;
-  setDelay: (delay: number) => void;
-  setEasing: (easing: "linear" | "ease-in" | "ease-out" | "ease-in-out") => void;
-  buildAnimationData: () => Animation;
-  isValid: boolean;
-}
-
-const DEFAULT_ANIMATION: AnimationFormState = {
-  type: "none",
-  duration: 500,
-  delay: 0,
-  easing: "ease-in-out",
-};
-
-export function useAnimationForm({
-  animation,
-}: UseAnimationFormParams = {}): UseAnimationFormReturn {
-  const formState = useMemo<AnimationFormState>(() => {
-    if (!animation) {
-      return DEFAULT_ANIMATION;
-    }
-
-    return {
-      type: animation.type,
-      duration: animation.duration,
-      delay: animation.delay,
-      easing: animation.easing || "ease-in-out",
-    };
-  }, [animation]);
-
-  const setAnimationType = useCallback((type: AnimationType) => {
-    (formState as any).type = type;
-  }, [formState]);
-
-  const setDuration = useCallback((duration: number) => {
-    (formState as any).duration = duration;
-  }, [formState]);
-
-  const setDelay = useCallback((delay: number) => {
-    (formState as any).delay = delay;
-  }, [formState]);
-
-  const setEasing = useCallback((
-    easing: "linear" | "ease-in" | "ease-out" | "ease-in-out"
-  ) => {
-    (formState as any).easing = easing;
-  }, [formState]);
-
-  const buildAnimationData = useCallback((): Animation => {
-    const data: Animation = {
-      type: formState.type,
-      duration: formState.duration,
-      easing: formState.easing,
-    };
-
-    if (formState.delay && formState.delay > 0) {
-      data.delay = formState.delay;
-    }
-
-    return data;
-  }, [formState]);
-
-  const isValid = useMemo(() => {
-    return formState.type !== "none" && formState.duration > 0;
-  }, [formState]);
-
-  return {
-    formState,
-    setAnimationType,
-    setDuration,
-    setDelay,
-    setEasing,
-    buildAnimationData,
-    isValid,
-  };
-}