Revert "format, cleanup, deps"

This reverts commit eab8ec3ba81b86fdd4ade920d999c28fb34785b1.

1 files changed, 976 insertions, 978 deletions

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index ec724539..9a2c7361 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -1,20 +1,20 @@
 import { create } from "zustand";
 import {
-	TrackType,
-	TimelineElement,
-	CreateTimelineElement,
-	TimelineTrack,
-	TextElement,
-	DragData,
-	sortTracksByOrder,
-	ensureMainTrack,
-	validateElementTrackCompatibility,
+  TrackType,
+  TimelineElement,
+  CreateTimelineElement,
+  TimelineTrack,
+  TextElement,
+  DragData,
+  sortTracksByOrder,
+  ensureMainTrack,
+  validateElementTrackCompatibility,
 } from "@/types/timeline";
 import { useEditorStore } from "./editor-store";
 import {
-	useMediaStore,
-	getMediaAspectRatio,
-	type MediaItem,
+  useMediaStore,
+  getMediaAspectRatio,
+  type MediaItem,
 } from "./media-store";
 import { storageService } from "@/lib/storage/storage-service";
 import { useProjectStore } from "./project-store";
@@ -24,1108 +24,1106 @@ import { toast } from "sonner";
 
 // Helper function to manage element naming with suffixes
 const getElementNameWithSuffix = (
-	originalName: string,
-	suffix: string,
+  originalName: string,
+  suffix: string
 ): string => {
-	// Remove existing suffixes to prevent accumulation
-	const baseName = originalName
-		.replace(/ \(left\)$/, "")
-		.replace(/ \(right\)$/, "")
-		.replace(/ \(audio\)$/, "")
-		.replace(/ \(split \d+\)$/, "");
+  // Remove existing suffixes to prevent accumulation
+  const baseName = originalName
+    .replace(/ \(left\)$/, "")
+    .replace(/ \(right\)$/, "")
+    .replace(/ \(audio\)$/, "")
+    .replace(/ \(split \d+\)$/, "");
 
-	return `${baseName} (${suffix})`;
+  return `${baseName} (${suffix})`;
 };
 
 interface TimelineStore {
-	// Private track storage
-	_tracks: TimelineTrack[];
-	history: TimelineTrack[][];
-	redoStack: TimelineTrack[][];
+  // Private track storage
+  _tracks: TimelineTrack[];
+  history: TimelineTrack[][];
+  redoStack: TimelineTrack[][];
 
-	// Always returns properly ordered tracks with main track ensured
-	tracks: TimelineTrack[];
+  // Always returns properly ordered tracks with main track ensured
+  tracks: TimelineTrack[];
 
-	// Manual method if you need to force recomputation
-	getSortedTracks: () => TimelineTrack[];
+  // Manual method if you need to force recomputation
+  getSortedTracks: () => TimelineTrack[];
 
-	// Snapping settings
-	snappingEnabled: boolean;
+  // Snapping settings
+  snappingEnabled: boolean;
 
-	// Snapping actions
-	toggleSnapping: () => void;
+  // Snapping actions
+  toggleSnapping: () => void;
 
-	// Multi-selection
-	selectedElements: { trackId: string; elementId: string }[];
-	selectElement: (trackId: string, elementId: string, multi?: boolean) => void;
-	deselectElement: (trackId: string, elementId: string) => void;
-	clearSelectedElements: () => void;
-	setSelectedElements: (
-		elements: { trackId: string; elementId: string }[],
-	) => void;
+  // Multi-selection
+  selectedElements: { trackId: string; elementId: string }[];
+  selectElement: (trackId: string, elementId: string, multi?: boolean) => void;
+  deselectElement: (trackId: string, elementId: string) => void;
+  clearSelectedElements: () => void;
+  setSelectedElements: (
+    elements: { trackId: string; elementId: string }[]
+  ) => void;
 
-	// Drag state
-	dragState: {
-		isDragging: boolean;
-		elementId: string | null;
-		trackId: string | null;
-		startMouseX: number;
-		startElementTime: number;
-		clickOffsetTime: number;
-		currentTime: number;
-	};
-	setDragState: (dragState: Partial<TimelineStore["dragState"]>) => void;
-	startDrag: (
-		elementId: string,
-		trackId: string,
-		startMouseX: number,
-		startElementTime: number,
-		clickOffsetTime: number,
-	) => void;
-	updateDragTime: (currentTime: number) => void;
-	endDrag: () => void;
+  // Drag state
+  dragState: {
+    isDragging: boolean;
+    elementId: string | null;
+    trackId: string | null;
+    startMouseX: number;
+    startElementTime: number;
+    clickOffsetTime: number;
+    currentTime: number;
+  };
+  setDragState: (dragState: Partial<TimelineStore["dragState"]>) => void;
+  startDrag: (
+    elementId: string,
+    trackId: string,
+    startMouseX: number,
+    startElementTime: number,
+    clickOffsetTime: number
+  ) => void;
+  updateDragTime: (currentTime: number) => void;
+  endDrag: () => void;
 
-	// Actions
-	addTrack: (type: TrackType) => string;
-	insertTrackAt: (type: TrackType, index: number) => string;
-	removeTrack: (trackId: string) => void;
-	addElementToTrack: (trackId: string, element: CreateTimelineElement) => void;
-	removeElementFromTrack: (trackId: string, elementId: string) => void;
-	moveElementToTrack: (
-		fromTrackId: string,
-		toTrackId: string,
-		elementId: string,
-	) => void;
-	updateElementTrim: (
-		trackId: string,
-		elementId: string,
-		trimStart: number,
-		trimEnd: number,
-	) => void;
-	updateElementDuration: (
-		trackId: string,
-		elementId: string,
-		duration: number,
-	) => void;
-	updateElementStartTime: (
-		trackId: string,
-		elementId: string,
-		startTime: number,
-	) => void;
-	toggleTrackMute: (trackId: string) => void;
+  // Actions
+  addTrack: (type: TrackType) => string;
+  insertTrackAt: (type: TrackType, index: number) => string;
+  removeTrack: (trackId: string) => void;
+  addElementToTrack: (trackId: string, element: CreateTimelineElement) => void;
+  removeElementFromTrack: (trackId: string, elementId: string) => void;
+  moveElementToTrack: (
+    fromTrackId: string,
+    toTrackId: string,
+    elementId: string
+  ) => void;
+  updateElementTrim: (
+    trackId: string,
+    elementId: string,
+    trimStart: number,
+    trimEnd: number
+  ) => void;
+  updateElementDuration: (
+    trackId: string,
+    elementId: string,
+    duration: number
+  ) => void;
+  updateElementStartTime: (
+    trackId: string,
+    elementId: string,
+    startTime: number
+  ) => void;
+  toggleTrackMute: (trackId: string) => void;
 
-	// Split operations for elements
-	splitElement: (
-		trackId: string,
-		elementId: string,
-		splitTime: number,
-	) => string | null;
-	splitAndKeepLeft: (
-		trackId: string,
-		elementId: string,
-		splitTime: number,
-	) => void;
-	splitAndKeepRight: (
-		trackId: string,
-		elementId: string,
-		splitTime: number,
-	) => void;
-	separateAudio: (trackId: string, elementId: string) => string | null;
+  // Split operations for elements
+  splitElement: (
+    trackId: string,
+    elementId: string,
+    splitTime: number
+  ) => string | null;
+  splitAndKeepLeft: (
+    trackId: string,
+    elementId: string,
+    splitTime: number
+  ) => void;
+  splitAndKeepRight: (
+    trackId: string,
+    elementId: string,
+    splitTime: number
+  ) => void;
+  separateAudio: (trackId: string, elementId: string) => string | null;
 
-	// Replace media for an element
-	replaceElementMedia: (
-		trackId: string,
-		elementId: string,
-		newFile: File,
-	) => Promise<boolean>;
+  // Replace media for an element
+  replaceElementMedia: (
+    trackId: string,
+    elementId: string,
+    newFile: File
+  ) => Promise<boolean>;
 
-	// Computed values
-	getTotalDuration: () => number;
+  // Computed values
+  getTotalDuration: () => number;
 
-	// History actions
-	undo: () => void;
-	redo: () => void;
-	pushHistory: () => void;
+  // History actions
+  undo: () => void;
+  redo: () => void;
+  pushHistory: () => void;
 
-	// Persistence actions
-	loadProjectTimeline: (projectId: string) => Promise<void>;
-	saveProjectTimeline: (projectId: string) => Promise<void>;
-	clearTimeline: () => void;
-	updateTextElement: (
-		trackId: string,
-		elementId: string,
-		updates: Partial<
-			Pick<
-				TextElement,
-				| "content"
-				| "fontSize"
-				| "fontFamily"
-				| "color"
-				| "backgroundColor"
-				| "textAlign"
-				| "fontWeight"
-				| "fontStyle"
-				| "textDecoration"
-				| "x"
-				| "y"
-				| "rotation"
-				| "opacity"
-			>
-		>,
-	) => void;
-	checkElementOverlap: (
-		trackId: string,
-		startTime: number,
-		duration: number,
-		excludeElementId?: string,
-	) => boolean;
-	findOrCreateTrack: (trackType: TrackType) => string;
-	addMediaAtTime: (item: MediaItem, currentTime?: number) => boolean;
-	addTextAtTime: (item: TextElement, currentTime?: number) => boolean;
-	addMediaToNewTrack: (item: MediaItem) => boolean;
-	addTextToNewTrack: (item: TextElement | DragData) => boolean;
+  // Persistence actions
+  loadProjectTimeline: (projectId: string) => Promise<void>;
+  saveProjectTimeline: (projectId: string) => Promise<void>;
+  clearTimeline: () => void;
+  updateTextElement: (
+    trackId: string,
+    elementId: string,
+    updates: Partial<
+      Pick<
+        TextElement,
+        | "content"
+        | "fontSize"
+        | "fontFamily"
+        | "color"
+        | "backgroundColor"
+        | "textAlign"
+        | "fontWeight"
+        | "fontStyle"
+        | "textDecoration"
+        | "x"
+        | "y"
+        | "rotation"
+        | "opacity"
+      >
+    >
+  ) => void;
+  checkElementOverlap: (
+    trackId: string,
+    startTime: number,
+    duration: number,
+    excludeElementId?: string
+  ) => boolean;
+  findOrCreateTrack: (trackType: TrackType) => string;
+  addMediaAtTime: (item: MediaItem, currentTime?: number) => boolean;
+  addTextAtTime: (item: TextElement, currentTime?: number) => boolean;
+  addMediaToNewTrack: (item: MediaItem) => boolean;
+  addTextToNewTrack: (item: TextElement | DragData) => boolean;
 }
 
 export const useTimelineStore = create<TimelineStore>((set, get) => {
-	// Helper to update tracks and maintain ordering
-	const updateTracks = (newTracks: TimelineTrack[]) => {
-		const tracksWithMain = ensureMainTrack(newTracks);
-		const sortedTracks = sortTracksByOrder(tracksWithMain);
-		set({
-			_tracks: tracksWithMain,
-			tracks: sortedTracks,
-		});
-	};
+  // Helper to update tracks and maintain ordering
+  const updateTracks = (newTracks: TimelineTrack[]) => {
+    const tracksWithMain = ensureMainTrack(newTracks);
+    const sortedTracks = sortTracksByOrder(tracksWithMain);
+    set({
+      _tracks: tracksWithMain,
+      tracks: sortedTracks,
+    });
+  };
 
-	// Helper to auto-save timeline changes
-	const autoSaveTimeline = async () => {
-		const activeProject = useProjectStore.getState().activeProject;
-		if (activeProject) {
-			try {
-				await storageService.saveTimeline(activeProject.id, get()._tracks);
-			} catch (error) {
-				console.error("Failed to auto-save timeline:", error);
-			}
-		}
-	};
+  // Helper to auto-save timeline changes
+  const autoSaveTimeline = async () => {
+    const activeProject = useProjectStore.getState().activeProject;
+    if (activeProject) {
+      try {
+        await storageService.saveTimeline(activeProject.id, get()._tracks);
+      } catch (error) {
+        console.error("Failed to auto-save timeline:", error);
+      }
+    }
+  };
 
-	// Helper to update tracks and auto-save
-	const updateTracksAndSave = (newTracks: TimelineTrack[]) => {
-		updateTracks(newTracks);
-		// Auto-save in background
-		setTimeout(autoSaveTimeline, 100);
-	};
+  // Helper to update tracks and auto-save
+  const updateTracksAndSave = (newTracks: TimelineTrack[]) => {
+    updateTracks(newTracks);
+    // Auto-save in background
+    setTimeout(autoSaveTimeline, 100);
+  };
 
-	// Initialize with proper track ordering
-	const initialTracks = ensureMainTrack([]);
-	const sortedInitialTracks = sortTracksByOrder(initialTracks);
+  // Initialize with proper track ordering
+  const initialTracks = ensureMainTrack([]);
+  const sortedInitialTracks = sortTracksByOrder(initialTracks);
 
-	return {
-		_tracks: initialTracks,
-		tracks: sortedInitialTracks,
-		history: [],
-		redoStack: [],
-		selectedElements: [],
+  return {
+    _tracks: initialTracks,
+    tracks: sortedInitialTracks,
+    history: [],
+    redoStack: [],
+    selectedElements: [],
 
-		// Snapping settings defaults
-		snappingEnabled: true,
+    // Snapping settings defaults
+    snappingEnabled: true,
 
-		getSortedTracks: () => {
-			const { _tracks } = get();
-			const tracksWithMain = ensureMainTrack(_tracks);
-			return sortTracksByOrder(tracksWithMain);
-		},
+    getSortedTracks: () => {
+      const { _tracks } = get();
+      const tracksWithMain = ensureMainTrack(_tracks);
+      return sortTracksByOrder(tracksWithMain);
+    },
 
-		pushHistory: () => {
-			const { _tracks, history } = get();
-			set({
-				history: [...history, JSON.parse(JSON.stringify(_tracks))],
-				redoStack: [],
-			});
-		},
+    pushHistory: () => {
+      const { _tracks, history } = get();
+      set({
+        history: [...history, JSON.parse(JSON.stringify(_tracks))],
+        redoStack: [],
+      });
+    },
 
-		undo: () => {
-			const { history, redoStack, _tracks } = get();
-			if (history.length === 0) return;
-			const prev = history[history.length - 1];
-			updateTracksAndSave(prev);
-			set({
-				history: history.slice(0, -1),
-				redoStack: [...redoStack, JSON.parse(JSON.stringify(_tracks))],
-			});
-		},
+    undo: () => {
+      const { history, redoStack, _tracks } = get();
+      if (history.length === 0) return;
+      const prev = history[history.length - 1];
+      updateTracksAndSave(prev);
+      set({
+        history: history.slice(0, -1),
+        redoStack: [...redoStack, JSON.parse(JSON.stringify(_tracks))],
+      });
+    },
 
-		selectElement: (trackId, elementId, multi = false) => {
-			set((state) => {
-				const exists = state.selectedElements.some(
-					(c) => c.trackId === trackId && c.elementId === elementId,
-				);
-				if (multi) {
-					return exists
-						? {
-								selectedElements: state.selectedElements.filter(
-									(c) => !(c.trackId === trackId && c.elementId === elementId),
-								),
-							}
-						: {
-								selectedElements: [
-									...state.selectedElements,
-									{ trackId, elementId },
-								],
-							};
-				} else {
-					return { selectedElements: [{ trackId, elementId }] };
-				}
-			});
-		},
+    selectElement: (trackId, elementId, multi = false) => {
+      set((state) => {
+        const exists = state.selectedElements.some(
+          (c) => c.trackId === trackId && c.elementId === elementId
+        );
+        if (multi) {
+          return exists
+            ? {
+                selectedElements: state.selectedElements.filter(
+                  (c) => !(c.trackId === trackId && c.elementId === elementId)
+                ),
+              }
+            : {
+                selectedElements: [
+                  ...state.selectedElements,
+                  { trackId, elementId },
+                ],
+              };
+        } else {
+          return { selectedElements: [{ trackId, elementId }] };
+        }
+      });
+    },
 
-		deselectElement: (trackId, elementId) => {
-			set((state) => ({
-				selectedElements: state.selectedElements.filter(
-					(c) => !(c.trackId === trackId && c.elementId === elementId),
-				),
-			}));
-		},
+    deselectElement: (trackId, elementId) => {
+      set((state) => ({
+        selectedElements: state.selectedElements.filter(
+          (c) => !(c.trackId === trackId && c.elementId === elementId)
+        ),
+      }));
+    },
 
-		clearSelectedElements: () => {
-			set({ selectedElements: [] });
-		},
+    clearSelectedElements: () => {
+      set({ selectedElements: [] });
+    },
 
-		setSelectedElements: (elements) => set({ selectedElements: elements }),
+    setSelectedElements: (elements) => set({ selectedElements: elements }),
 
-		addTrack: (type) => {
-			get().pushHistory();
+    addTrack: (type) => {
+      get().pushHistory();
 
-			// Generate proper track name based on type
-			const trackName =
-				type === "media"
-					? "Media Track"
-					: type === "text"
-						? "Text Track"
-						: type === "audio"
-							? "Audio Track"
-							: "Track";
+      // Generate proper track name based on type
+      const trackName =
+        type === "media"
+          ? "Media Track"
+          : type === "text"
+            ? "Text Track"
+            : type === "audio"
+              ? "Audio Track"
+              : "Track";
 
-			const newTrack: TimelineTrack = {
-				id: generateUUID(),
-				name: trackName,
-				type,
-				elements: [],
-				muted: false,
-			};
+      const newTrack: TimelineTrack = {
+        id: generateUUID(),
+        name: trackName,
+        type,
+        elements: [],
+        muted: false,
+      };
 
-			updateTracksAndSave([...get()._tracks, newTrack]);
-			return newTrack.id;
-		},
+      updateTracksAndSave([...get()._tracks, newTrack]);
+      return newTrack.id;
+    },
 
-		insertTrackAt: (type, index) => {
-			get().pushHistory();
+    insertTrackAt: (type, index) => {
+      get().pushHistory();
 
-			// Generate proper track name based on type
-			const trackName =
-				type === "media"
-					? "Media Track"
-					: type === "text"
-						? "Text Track"
-						: type === "audio"
-							? "Audio Track"
-							: "Track";
+      // Generate proper track name based on type
+      const trackName =
+        type === "media"
+          ? "Media Track"
+          : type === "text"
+            ? "Text Track"
+            : type === "audio"
+              ? "Audio Track"
+              : "Track";
 
-			const newTrack: TimelineTrack = {
-				id: generateUUID(),
-				name: trackName,
-				type,
-				elements: [],
-				muted: false,
-			};
+      const newTrack: TimelineTrack = {
+        id: generateUUID(),
+        name: trackName,
+        type,
+        elements: [],
+        muted: false,
+      };
 
-			const newTracks = [...get()._tracks];
-			newTracks.splice(index, 0, newTrack);
-			updateTracksAndSave(newTracks);
-			return newTrack.id;
-		},
+      const newTracks = [...get()._tracks];
+      newTracks.splice(index, 0, newTrack);
+      updateTracksAndSave(newTracks);
+      return newTrack.id;
+    },
 
-		removeTrack: (trackId) => {
-			get().pushHistory();
-			updateTracksAndSave(
-				get()._tracks.filter((track) => track.id !== trackId),
-			);
-		},
+    removeTrack: (trackId) => {
+      get().pushHistory();
+      updateTracksAndSave(
+        get()._tracks.filter((track) => track.id !== trackId)
+      );
+    },
 
-		addElementToTrack: (trackId, elementData) => {
-			get().pushHistory();
+    addElementToTrack: (trackId, elementData) => {
+      get().pushHistory();
 
-			// Validate element type matches track type
-			const track = get()._tracks.find((t) => t.id === trackId);
-			if (!track) {
-				console.error("Track not found:", trackId);
-				return;
-			}
+      // Validate element type matches track type
+      const track = get()._tracks.find((t) => t.id === trackId);
+      if (!track) {
+        console.error("Track not found:", trackId);
+        return;
+      }
 
-			// Use utility function for validation
-			const validation = validateElementTrackCompatibility(elementData, track);
-			if (!validation.isValid) {
-				console.error(validation.errorMessage);
-				return;
-			}
+      // Use utility function for validation
+      const validation = validateElementTrackCompatibility(elementData, track);
+      if (!validation.isValid) {
+        console.error(validation.errorMessage);
+        return;
+      }
 
-			// For media elements, validate mediaId exists
-			if (elementData.type === "media" && !elementData.mediaId) {
-				console.error("Media element must have mediaId");
-				return;
-			}
+      // For media elements, validate mediaId exists
+      if (elementData.type === "media" && !elementData.mediaId) {
+        console.error("Media element must have mediaId");
+        return;
+      }
 
-			// For text elements, validate required text properties
-			if (elementData.type === "text" && !elementData.content) {
-				console.error("Text element must have content");
-				return;
-			}
+      // For text elements, validate required text properties
+      if (elementData.type === "text" && !elementData.content) {
+        console.error("Text element must have content");
+        return;
+      }
 
-			// Check if this is the first element being added to the timeline
-			const currentState = get();
-			const totalElementsInTimeline = currentState._tracks.reduce(
-				(total, track) => total + track.elements.length,
-				0,
-			);
-			const isFirstElement = totalElementsInTimeline === 0;
+      // Check if this is the first element being added to the timeline
+      const currentState = get();
+      const totalElementsInTimeline = currentState._tracks.reduce(
+        (total, track) => total + track.elements.length,
+        0
+      );
+      const isFirstElement = totalElementsInTimeline === 0;
 
-			const newElement: TimelineElement = {
-				...elementData,
-				id: generateUUID(),
-				startTime: elementData.startTime || 0,
-				trimStart: 0,
-				trimEnd: 0,
-			} as TimelineElement; // Type assertion since we trust the caller passes valid data
+      const newElement: TimelineElement = {
+        ...elementData,
+        id: generateUUID(),
+        startTime: elementData.startTime || 0,
+        trimStart: 0,
+        trimEnd: 0,
+      } as TimelineElement; // Type assertion since we trust the caller passes valid data
 
-			// If this is the first element and it's a media element, automatically set the project canvas size
-			// to match the media's aspect ratio and FPS (for videos)
-			if (isFirstElement && newElement.type === "media") {
-				const mediaStore = useMediaStore.getState();
-				const mediaItem = mediaStore.mediaItems.find(
-					(item) => item.id === newElement.mediaId,
-				);
+      // If this is the first element and it's a media element, automatically set the project canvas size
+      // to match the media's aspect ratio and FPS (for videos)
+      if (isFirstElement && newElement.type === "media") {
+        const mediaStore = useMediaStore.getState();
+        const mediaItem = mediaStore.mediaItems.find(
+          (item) => item.id === newElement.mediaId
+        );
 
-				if (
-					mediaItem &&
-					(mediaItem.type === "image" || mediaItem.type === "video")
-				) {
-					const editorStore = useEditorStore.getState();
-					editorStore.setCanvasSizeFromAspectRatio(
-						getMediaAspectRatio(mediaItem),
-					);
-				}
+        if (
+          mediaItem &&
+          (mediaItem.type === "image" || mediaItem.type === "video")
+        ) {
+          const editorStore = useEditorStore.getState();
+          editorStore.setCanvasSizeFromAspectRatio(
+            getMediaAspectRatio(mediaItem)
+          );
+        }
 
-				// Set project FPS from the first video element
-				if (mediaItem && mediaItem.type === "video" && mediaItem.fps) {
-					const projectStore = useProjectStore.getState();
-					if (projectStore.activeProject) {
-						projectStore.updateProjectFps(mediaItem.fps);
-					}
-				}
-			}
+        // Set project FPS from the first video element
+        if (mediaItem && mediaItem.type === "video" && mediaItem.fps) {
+          const projectStore = useProjectStore.getState();
+          if (projectStore.activeProject) {
+            projectStore.updateProjectFps(mediaItem.fps);
+          }
+        }
+      }
 
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId
-						? { ...track, elements: [...track.elements, newElement] }
-						: track,
-				),
-			);
-		},
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? { ...track, elements: [...track.elements, newElement] }
+            : track
+        )
+      );
+    },
 
-		removeElementFromTrack: (trackId, elementId) => {
-			get().pushHistory();
-			updateTracksAndSave(
-				get()
-					._tracks.map((track) =>
-						track.id === trackId
-							? {
-									...track,
-									elements: track.elements.filter(
-										(element) => element.id !== elementId,
-									),
-								}
-							: track,
-					)
-					.filter((track) => track.elements.length > 0),
-			);
-		},
+    removeElementFromTrack: (trackId, elementId) => {
+      get().pushHistory();
+      updateTracksAndSave(
+        get()
+          ._tracks.map((track) =>
+            track.id === trackId
+              ? {
+                  ...track,
+                  elements: track.elements.filter(
+                    (element) => element.id !== elementId
+                  ),
+                }
+              : track
+          )
+          .filter((track) => track.elements.length > 0)
+      );
+    },
 
-		moveElementToTrack: (fromTrackId, toTrackId, elementId) => {
-			get().pushHistory();
+    moveElementToTrack: (fromTrackId, toTrackId, elementId) => {
+      get().pushHistory();
 
-			const fromTrack = get()._tracks.find((track) => track.id === fromTrackId);
-			const toTrack = get()._tracks.find((track) => track.id === toTrackId);
-			const elementToMove = fromTrack?.elements.find(
-				(element) => element.id === elementId,
-			);
+      const fromTrack = get()._tracks.find((track) => track.id === fromTrackId);
+      const toTrack = get()._tracks.find((track) => track.id === toTrackId);
+      const elementToMove = fromTrack?.elements.find(
+        (element) => element.id === elementId
+      );
 
-			if (!elementToMove || !toTrack) return;
+      if (!elementToMove || !toTrack) return;
 
-			// Validate element type compatibility with target track
-			const validation = validateElementTrackCompatibility(
-				elementToMove,
-				toTrack,
-			);
-			if (!validation.isValid) {
-				console.error(validation.errorMessage);
-				return;
-			}
+      // Validate element type compatibility with target track
+      const validation = validateElementTrackCompatibility(
+        elementToMove,
+        toTrack
+      );
+      if (!validation.isValid) {
+        console.error(validation.errorMessage);
+        return;
+      }
 
-			const newTracks = get()
-				._tracks.map((track) => {
-					if (track.id === fromTrackId) {
-						return {
-							...track,
-							elements: track.elements.filter(
-								(element) => element.id !== elementId,
-							),
-						};
-					} else if (track.id === toTrackId) {
-						return {
-							...track,
-							elements: [...track.elements, elementToMove],
-						};
-					}
-					return track;
-				})
-				.filter((track) => track.elements.length > 0);
+      const newTracks = get()
+        ._tracks.map((track) => {
+          if (track.id === fromTrackId) {
+            return {
+              ...track,
+              elements: track.elements.filter(
+                (element) => element.id !== elementId
+              ),
+            };
+          } else if (track.id === toTrackId) {
+            return {
+              ...track,
+              elements: [...track.elements, elementToMove],
+            };
+          }
+          return track;
+        })
+        .filter((track) => track.elements.length > 0);
 
-			updateTracksAndSave(newTracks);
-		},
+      updateTracksAndSave(newTracks);
+    },
 
-		updateElementTrim: (trackId, elementId, trimStart, trimEnd) => {
-			get().pushHistory();
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId
-						? {
-								...track,
-								elements: track.elements.map((element) =>
-									element.id === elementId
-										? { ...element, trimStart, trimEnd }
-										: element,
-								),
-							}
-						: track,
-				),
-			);
-		},
+    updateElementTrim: (trackId, elementId, trimStart, trimEnd) => {
+      get().pushHistory();
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? {
+                ...track,
+                elements: track.elements.map((element) =>
+                  element.id === elementId
+                    ? { ...element, trimStart, trimEnd }
+                    : element
+                ),
+              }
+            : track
+        )
+      );
+    },
 
-		updateElementDuration: (trackId, elementId, duration) => {
-			get().pushHistory();
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId
-						? {
-								...track,
-								elements: track.elements.map((element) =>
-									element.id === elementId ? { ...element, duration } : element,
-								),
-							}
-						: track,
-				),
-			);
-		},
+    updateElementDuration: (trackId, elementId, duration) => {
+      get().pushHistory();
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? {
+                ...track,
+                elements: track.elements.map((element) =>
+                  element.id === elementId ? { ...element, duration } : element
+                ),
+              }
+            : track
+        )
+      );
+    },
 
-		updateElementStartTime: (trackId, elementId, startTime) => {
-			get().pushHistory();
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId
-						? {
-								...track,
-								elements: track.elements.map((element) =>
-									element.id === elementId
-										? { ...element, startTime }
-										: element,
-								),
-							}
-						: track,
-				),
-			);
-		},
+    updateElementStartTime: (trackId, elementId, startTime) => {
+      get().pushHistory();
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? {
+                ...track,
+                elements: track.elements.map((element) =>
+                  element.id === elementId ? { ...element, startTime } : element
+                ),
+              }
+            : track
+        )
+      );
+    },
 
-		toggleTrackMute: (trackId) => {
-			get().pushHistory();
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId ? { ...track, muted: !track.muted } : track,
-				),
-			);
-		},
+    toggleTrackMute: (trackId) => {
+      get().pushHistory();
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId ? { ...track, muted: !track.muted } : track
+        )
+      );
+    },
 
-		updateTextElement: (trackId, elementId, updates) => {
-			get().pushHistory();
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId
-						? {
-								...track,
-								elements: track.elements.map((element) =>
-									element.id === elementId && element.type === "text"
-										? { ...element, ...updates }
-										: element,
-								),
-							}
-						: track,
-				),
-			);
-		},
+    updateTextElement: (trackId, elementId, updates) => {
+      get().pushHistory();
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? {
+                ...track,
+                elements: track.elements.map((element) =>
+                  element.id === elementId && element.type === "text"
+                    ? { ...element, ...updates }
+                    : element
+                ),
+              }
+            : track
+        )
+      );
+    },
 
-		splitElement: (trackId, elementId, splitTime) => {
-			const { _tracks } = get();
-			const track = _tracks.find((t) => t.id === trackId);
-			const element = track?.elements.find((c) => c.id === elementId);
+    splitElement: (trackId, elementId, splitTime) => {
+      const { _tracks } = get();
+      const track = _tracks.find((t) => t.id === trackId);
+      const element = track?.elements.find((c) => c.id === elementId);
 
-			if (!element) return null;
+      if (!element) return null;
 
-			const effectiveStart = element.startTime;
-			const effectiveEnd =
-				element.startTime +
-				(element.duration - element.trimStart - element.trimEnd);
+      const effectiveStart = element.startTime;
+      const effectiveEnd =
+        element.startTime +
+        (element.duration - element.trimStart - element.trimEnd);
 
-			if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return null;
+      if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return null;
 
-			get().pushHistory();
+      get().pushHistory();
 
-			const relativeTime = splitTime - element.startTime;
-			const firstDuration = relativeTime;
-			const secondDuration =
-				element.duration - element.trimStart - element.trimEnd - relativeTime;
+      const relativeTime = splitTime - element.startTime;
+      const firstDuration = relativeTime;
+      const secondDuration =
+        element.duration - element.trimStart - element.trimEnd - relativeTime;
 
-			const secondElementId = generateUUID();
+      const secondElementId = generateUUID();
 
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId
-						? {
-								...track,
-								elements: track.elements.flatMap((c) =>
-									c.id === elementId
-										? [
-												{
-													...c,
-													trimEnd: c.trimEnd + secondDuration,
-													name: getElementNameWithSuffix(c.name, "left"),
-												},
-												{
-													...c,
-													id: secondElementId,
-													startTime: splitTime,
-													trimStart: c.trimStart + firstDuration,
-													name: getElementNameWithSuffix(c.name, "right"),
-												},
-											]
-										: [c],
-								),
-							}
-						: track,
-				),
-			);
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? {
+                ...track,
+                elements: track.elements.flatMap((c) =>
+                  c.id === elementId
+                    ? [
+                        {
+                          ...c,
+                          trimEnd: c.trimEnd + secondDuration,
+                          name: getElementNameWithSuffix(c.name, "left"),
+                        },
+                        {
+                          ...c,
+                          id: secondElementId,
+                          startTime: splitTime,
+                          trimStart: c.trimStart + firstDuration,
+                          name: getElementNameWithSuffix(c.name, "right"),
+                        },
+                      ]
+                    : [c]
+                ),
+              }
+            : track
+        )
+      );
 
-			return secondElementId;
-		},
+      return secondElementId;
+    },
 
-		// Split element and keep only the left portion
-		splitAndKeepLeft: (trackId, elementId, splitTime) => {
-			const { _tracks } = get();
-			const track = _tracks.find((t) => t.id === trackId);
-			const element = track?.elements.find((c) => c.id === elementId);
+    // Split element and keep only the left portion
+    splitAndKeepLeft: (trackId, elementId, splitTime) => {
+      const { _tracks } = get();
+      const track = _tracks.find((t) => t.id === trackId);
+      const element = track?.elements.find((c) => c.id === elementId);
 
-			if (!element) return;
+      if (!element) return;
 
-			const effectiveStart = element.startTime;
-			const effectiveEnd =
-				element.startTime +
-				(element.duration - element.trimStart - element.trimEnd);
+      const effectiveStart = element.startTime;
+      const effectiveEnd =
+        element.startTime +
+        (element.duration - element.trimStart - element.trimEnd);
 
-			if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
+      if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
 
-			get().pushHistory();
+      get().pushHistory();
 
-			const relativeTime = splitTime - element.startTime;
-			const durationToRemove =
-				element.duration - element.trimStart - element.trimEnd - relativeTime;
+      const relativeTime = splitTime - element.startTime;
+      const durationToRemove =
+        element.duration - element.trimStart - element.trimEnd - relativeTime;
 
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId
-						? {
-								...track,
-								elements: track.elements.map((c) =>
-									c.id === elementId
-										? {
-												...c,
-												trimEnd: c.trimEnd + durationToRemove,
-												name: getElementNameWithSuffix(c.name, "left"),
-											}
-										: c,
-								),
-							}
-						: track,
-				),
-			);
-		},
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? {
+                ...track,
+                elements: track.elements.map((c) =>
+                  c.id === elementId
+                    ? {
+                        ...c,
+                        trimEnd: c.trimEnd + durationToRemove,
+                        name: getElementNameWithSuffix(c.name, "left"),
+                      }
+                    : c
+                ),
+              }
+            : track
+        )
+      );
+    },
 
-		// Split element and keep only the right portion
-		splitAndKeepRight: (trackId, elementId, splitTime) => {
-			const { _tracks } = get();
-			const track = _tracks.find((t) => t.id === trackId);
-			const element = track?.elements.find((c) => c.id === elementId);
+    // Split element and keep only the right portion
+    splitAndKeepRight: (trackId, elementId, splitTime) => {
+      const { _tracks } = get();
+      const track = _tracks.find((t) => t.id === trackId);
+      const element = track?.elements.find((c) => c.id === elementId);
 
-			if (!element) return;
+      if (!element) return;
 
-			const effectiveStart = element.startTime;
-			const effectiveEnd =
-				element.startTime +
-				(element.duration - element.trimStart - element.trimEnd);
+      const effectiveStart = element.startTime;
+      const effectiveEnd =
+        element.startTime +
+        (element.duration - element.trimStart - element.trimEnd);
 
-			if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
+      if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
 
-			get().pushHistory();
+      get().pushHistory();
 
-			const relativeTime = splitTime - element.startTime;
+      const relativeTime = splitTime - element.startTime;
 
-			updateTracksAndSave(
-				get()._tracks.map((track) =>
-					track.id === trackId
-						? {
-								...track,
-								elements: track.elements.map((c) =>
-									c.id === elementId
-										? {
-												...c,
-												startTime: splitTime,
-												trimStart: c.trimStart + relativeTime,
-												name: getElementNameWithSuffix(c.name, "right"),
-											}
-										: c,
-								),
-							}
-						: track,
-				),
-			);
-		},
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? {
+                ...track,
+                elements: track.elements.map((c) =>
+                  c.id === elementId
+                    ? {
+                        ...c,
+                        startTime: splitTime,
+                        trimStart: c.trimStart + relativeTime,
+                        name: getElementNameWithSuffix(c.name, "right"),
+                      }
+                    : c
+                ),
+              }
+            : track
+        )
+      );
+    },
 
-		// Extract audio from video element to an audio track
-		separateAudio: (trackId, elementId) => {
-			const { _tracks } = get();
-			const track = _tracks.find((t) => t.id === trackId);
-			const element = track?.elements.find((c) => c.id === elementId);
+    // Extract audio from video element to an audio track
+    separateAudio: (trackId, elementId) => {
+      const { _tracks } = get();
+      const track = _tracks.find((t) => t.id === trackId);
+      const element = track?.elements.find((c) => c.id === elementId);
 
-			if (!element || track?.type !== "media") return null;
+      if (!element || track?.type !== "media") return null;
 
-			get().pushHistory();
+      get().pushHistory();
 
-			// Find existing audio track or prepare to create one
-			const existingAudioTrack = _tracks.find((t) => t.type === "audio");
-			const audioElementId = generateUUID();
+      // Find existing audio track or prepare to create one
+      const existingAudioTrack = _tracks.find((t) => t.type === "audio");
+      const audioElementId = generateUUID();
 
-			if (existingAudioTrack) {
-				// Add audio element to existing audio track
-				updateTracksAndSave(
-					get()._tracks.map((track) =>
-						track.id === existingAudioTrack.id
-							? {
-									...track,
-									elements: [
-										...track.elements,
-										{
-											...element,
-											id: audioElementId,
-											name: getElementNameWithSuffix(element.name, "audio"),
-										},
-									],
-								}
-							: track,
-					),
-				);
-			} else {
-				// Create new audio track with the audio element in a single atomic update
-				const newAudioTrack: TimelineTrack = {
-					id: generateUUID(),
-					name: "Audio Track",
-					type: "audio",
-					elements: [
-						{
-							...element,
-							id: audioElementId,
-							name: getElementNameWithSuffix(element.name, "audio"),
-						},
-					],
-					muted: false,
-				};
+      if (existingAudioTrack) {
+        // Add audio element to existing audio track
+        updateTracksAndSave(
+          get()._tracks.map((track) =>
+            track.id === existingAudioTrack.id
+              ? {
+                  ...track,
+                  elements: [
+                    ...track.elements,
+                    {
+                      ...element,
+                      id: audioElementId,
+                      name: getElementNameWithSuffix(element.name, "audio"),
+                    },
+                  ],
+                }
+              : track
+          )
+        );
+      } else {
+        // Create new audio track with the audio element in a single atomic update
+        const newAudioTrack: TimelineTrack = {
+          id: generateUUID(),
+          name: "Audio Track",
+          type: "audio",
+          elements: [
+            {
+              ...element,
+              id: audioElementId,
+              name: getElementNameWithSuffix(element.name, "audio"),
+            },
+          ],
+          muted: false,
+        };
 
-				updateTracksAndSave([...get()._tracks, newAudioTrack]);
-			}
+        updateTracksAndSave([...get()._tracks, newAudioTrack]);
+      }
 
-			return audioElementId;
-		},
+      return audioElementId;
+    },
 
-		// Replace media for an element
-		replaceElementMedia: async (trackId, elementId, newFile) => {
-			const { _tracks } = get();
-			const track = _tracks.find((t) => t.id === trackId);
-			const element = track?.elements.find((c) => c.id === elementId);
+    // Replace media for an element
+    replaceElementMedia: async (trackId, elementId, newFile) => {
+      const { _tracks } = get();
+      const track = _tracks.find((t) => t.id === trackId);
+      const element = track?.elements.find((c) => c.id === elementId);
 
-			if (!element || element.type !== "media") return false;
+      if (!element || element.type !== "media") return false;
 
-			try {
-				const mediaStore = useMediaStore.getState();
-				const projectStore = useProjectStore.getState();
+      try {
+        const mediaStore = useMediaStore.getState();
+        const projectStore = useProjectStore.getState();
 
-				if (!projectStore.activeProject) return false;
+        if (!projectStore.activeProject) return false;
 
-				// Import required media processing functions
-				const {
-					getFileType,
-					getImageDimensions,
-					generateVideoThumbnail,
-					getMediaDuration,
-				} = await import("./media-store");
+        // Import required media processing functions
+        const {
+          getFileType,
+          getImageDimensions,
+          generateVideoThumbnail,
+          getMediaDuration,
+        } = await import("./media-store");
 
-				const fileType = getFileType(newFile);
-				if (!fileType) return false;
+        const fileType = getFileType(newFile);
+        if (!fileType) return false;
 
-				// Process the new media file
-				let mediaData: any = {
-					name: newFile.name,
-					type: fileType,
-					file: newFile,
-					url: URL.createObjectURL(newFile),
-				};
+        // Process the new media file
+        let mediaData: any = {
+          name: newFile.name,
+          type: fileType,
+          file: newFile,
+          url: URL.createObjectURL(newFile),
+        };
 
-				// Get media-specific metadata
-				if (fileType === "image") {
-					const { width, height } = await getImageDimensions(newFile);
-					mediaData.width = width;
-					mediaData.height = height;
-				} else if (fileType === "video") {
-					const [duration, { thumbnailUrl, width, height }] = await Promise.all(
-						[getMediaDuration(newFile), generateVideoThumbnail(newFile)],
-					);
-					mediaData.duration = duration;
-					mediaData.thumbnailUrl = thumbnailUrl;
-					mediaData.width = width;
-					mediaData.height = height;
-				} else if (fileType === "audio") {
-					mediaData.duration = await getMediaDuration(newFile);
-				}
+        // Get media-specific metadata
+        if (fileType === "image") {
+          const { width, height } = await getImageDimensions(newFile);
+          mediaData.width = width;
+          mediaData.height = height;
+        } else if (fileType === "video") {
+          const [duration, { thumbnailUrl, width, height }] = await Promise.all(
+            [getMediaDuration(newFile), generateVideoThumbnail(newFile)]
+          );
+          mediaData.duration = duration;
+          mediaData.thumbnailUrl = thumbnailUrl;
+          mediaData.width = width;
+          mediaData.height = height;
+        } else if (fileType === "audio") {
+          mediaData.duration = await getMediaDuration(newFile);
+        }
 
-				// Add new media item to store
-				await mediaStore.addMediaItem(projectStore.activeProject.id, mediaData);
+        // Add new media item to store
+        await mediaStore.addMediaItem(projectStore.activeProject.id, mediaData);
 
-				// Find the newly created media item
-				const newMediaItem = mediaStore.mediaItems.find(
-					(item) => item.file === newFile,
-				);
+        // Find the newly created media item
+        const newMediaItem = mediaStore.mediaItems.find(
+          (item) => item.file === newFile
+        );
 
-				if (!newMediaItem) return false;
+        if (!newMediaItem) return false;
 
-				get().pushHistory();
+        get().pushHistory();
 
-				// Update the timeline element to reference the new media
-				updateTracksAndSave(
-					_tracks.map((track) =>
-						track.id === trackId
-							? {
-									...track,
-									elements: track.elements.map((c) =>
-										c.id === elementId
-											? {
-													...c,
-													mediaId: newMediaItem.id,
-													name: newMediaItem.name,
-													// Update duration if the new media has a different duration
-													duration: newMediaItem.duration || c.duration,
-												}
-											: c,
-									),
-								}
-							: track,
-					),
-				);
+        // Update the timeline element to reference the new media
+        updateTracksAndSave(
+          _tracks.map((track) =>
+            track.id === trackId
+              ? {
+                  ...track,
+                  elements: track.elements.map((c) =>
+                    c.id === elementId
+                      ? {
+                          ...c,
+                          mediaId: newMediaItem.id,
+                          name: newMediaItem.name,
+                          // Update duration if the new media has a different duration
+                          duration: newMediaItem.duration || c.duration,
+                        }
+                      : c
+                  ),
+                }
+              : track
+          )
+        );
 
-				return true;
-			} catch (error) {
-				console.log(
-					JSON.stringify({
-						error: "Failed to replace element media",
-						details: error,
-					}),
-				);
-				return false;
-			}
-		},
+        return true;
+      } catch (error) {
+        console.log(
+          JSON.stringify({
+            error: "Failed to replace element media",
+            details: error,
+          })
+        );
+        return false;
+      }
+    },
 
-		getTotalDuration: () => {
-			const { _tracks } = get();
-			if (_tracks.length === 0) return 0;
+    getTotalDuration: () => {
+      const { _tracks } = get();
+      if (_tracks.length === 0) return 0;
 
-			const trackEndTimes = _tracks.map((track) =>
-				track.elements.reduce((maxEnd, element) => {
-					const elementEnd =
-						element.startTime +
-						element.duration -
-						element.trimStart -
-						element.trimEnd;
-					return Math.max(maxEnd, elementEnd);
-				}, 0),
-			);
+      const trackEndTimes = _tracks.map((track) =>
+        track.elements.reduce((maxEnd, element) => {
+          const elementEnd =
+            element.startTime +
+            element.duration -
+            element.trimStart -
+            element.trimEnd;
+          return Math.max(maxEnd, elementEnd);
+        }, 0)
+      );
 
-			return Math.max(...trackEndTimes, 0);
-		},
+      return Math.max(...trackEndTimes, 0);
+    },
 
-		redo: () => {
-			const { redoStack } = get();
-			if (redoStack.length === 0) return;
-			const next = redoStack[redoStack.length - 1];
-			updateTracksAndSave(next);
-			set({ redoStack: redoStack.slice(0, -1) });
-		},
+    redo: () => {
+      const { redoStack } = get();
+      if (redoStack.length === 0) return;
+      const next = redoStack[redoStack.length - 1];
+      updateTracksAndSave(next);
+      set({ redoStack: redoStack.slice(0, -1) });
+    },
 
-		dragState: {
-			isDragging: false,
-			elementId: null,
-			trackId: null,
-			startMouseX: 0,
-			startElementTime: 0,
-			clickOffsetTime: 0,
-			currentTime: 0,
-		},
+    dragState: {
+      isDragging: false,
+      elementId: null,
+      trackId: null,
+      startMouseX: 0,
+      startElementTime: 0,
+      clickOffsetTime: 0,
+      currentTime: 0,
+    },
 
-		setDragState: (dragState) =>
-			set((state) => ({
-				dragState: { ...state.dragState, ...dragState },
-			})),
+    setDragState: (dragState) =>
+      set((state) => ({
+        dragState: { ...state.dragState, ...dragState },
+      })),
 
-		startDrag: (
-			elementId,
-			trackId,
-			startMouseX,
-			startElementTime,
-			clickOffsetTime,
-		) => {
-			set({
-				dragState: {
-					isDragging: true,
-					elementId,
-					trackId,
-					startMouseX,
-					startElementTime,
-					clickOffsetTime,
-					currentTime: startElementTime,
-				},
-			});
-		},
+    startDrag: (
+      elementId,
+      trackId,
+      startMouseX,
+      startElementTime,
+      clickOffsetTime
+    ) => {
+      set({
+        dragState: {
+          isDragging: true,
+          elementId,
+          trackId,
+          startMouseX,
+          startElementTime,
+          clickOffsetTime,
+          currentTime: startElementTime,
+        },
+      });
+    },
 
-		updateDragTime: (currentTime) => {
-			set((state) => ({
-				dragState: {
-					...state.dragState,
-					currentTime,
-				},
-			}));
-		},
+    updateDragTime: (currentTime) => {
+      set((state) => ({
+        dragState: {
+          ...state.dragState,
+          currentTime,
+        },
+      }));
+    },
 
-		endDrag: () => {
-			set({
-				dragState: {
-					isDragging: false,
-					elementId: null,
-					trackId: null,
-					startMouseX: 0,
-					startElementTime: 0,
-					clickOffsetTime: 0,
-					currentTime: 0,
-				},
-			});
-		},
+    endDrag: () => {
+      set({
+        dragState: {
+          isDragging: false,
+          elementId: null,
+          trackId: null,
+          startMouseX: 0,
+          startElementTime: 0,
+          clickOffsetTime: 0,
+          currentTime: 0,
+        },
+      });
+    },
 
-		// Persistence methods
-		loadProjectTimeline: async (projectId) => {
-			try {
-				const tracks = await storageService.loadTimeline(projectId);
-				if (tracks) {
-					updateTracks(tracks);
-				} else {
-					// No timeline saved yet, initialize with default
-					const defaultTracks = ensureMainTrack([]);
-					updateTracks(defaultTracks);
-				}
-				// Clear history when loading a project
-				set({ history: [], redoStack: [] });
-			} catch (error) {
-				console.error("Failed to load timeline:", error);
-				// Initialize with default on error
-				const defaultTracks = ensureMainTrack([]);
-				updateTracks(defaultTracks);
-				set({ history: [], redoStack: [] });
-			}
-		},
+    // Persistence methods
+    loadProjectTimeline: async (projectId) => {
+      try {
+        const tracks = await storageService.loadTimeline(projectId);
+        if (tracks) {
+          updateTracks(tracks);
+        } else {
+          // No timeline saved yet, initialize with default
+          const defaultTracks = ensureMainTrack([]);
+          updateTracks(defaultTracks);
+        }
+        // Clear history when loading a project
+        set({ history: [], redoStack: [] });
+      } catch (error) {
+        console.error("Failed to load timeline:", error);
+        // Initialize with default on error
+        const defaultTracks = ensureMainTrack([]);
+        updateTracks(defaultTracks);
+        set({ history: [], redoStack: [] });
+      }
+    },
 
-		saveProjectTimeline: async (projectId) => {
-			try {
-				await storageService.saveTimeline(projectId, get()._tracks);
-			} catch (error) {
-				console.error("Failed to save timeline:", error);
-			}
-		},
+    saveProjectTimeline: async (projectId) => {
+      try {
+        await storageService.saveTimeline(projectId, get()._tracks);
+      } catch (error) {
+        console.error("Failed to save timeline:", error);
+      }
+    },
 
-		clearTimeline: () => {
-			const defaultTracks = ensureMainTrack([]);
-			updateTracks(defaultTracks);
-			set({ history: [], redoStack: [], selectedElements: [] });
-		},
+    clearTimeline: () => {
+      const defaultTracks = ensureMainTrack([]);
+      updateTracks(defaultTracks);
+      set({ history: [], redoStack: [], selectedElements: [] });
+    },
 
-		// Snapping actions
-		toggleSnapping: () => {
-			set((state) => ({ snappingEnabled: !state.snappingEnabled }));
-		},
+    // Snapping actions
+    toggleSnapping: () => {
+      set((state) => ({ snappingEnabled: !state.snappingEnabled }));
+    },
 
-		checkElementOverlap: (trackId, startTime, duration, excludeElementId) => {
-			const track = get()._tracks.find((t) => t.id === trackId);
-			if (!track) return false;
+    checkElementOverlap: (trackId, startTime, duration, excludeElementId) => {
+      const track = get()._tracks.find((t) => t.id === trackId);
+      if (!track) return false;
 
-			const overlap = track.elements.some((element) => {
-				const elementEnd =
-					element.startTime +
-					element.duration -
-					element.trimStart -
-					element.trimEnd;
+      const overlap = track.elements.some((element) => {
+        const elementEnd =
+          element.startTime +
+          element.duration -
+          element.trimStart -
+          element.trimEnd;
 
-				if (element.id === excludeElementId) {
-					return false;
-				}
+        if (element.id === excludeElementId) {
+          return false;
+        }
 
-				return (
-					(startTime >= element.startTime && startTime < elementEnd) ||
-					(startTime + duration > element.startTime &&
-						startTime + duration <= elementEnd) ||
-					(startTime < element.startTime && startTime + duration > elementEnd)
-				);
-			});
-			return overlap;
-		},
+        return (
+          (startTime >= element.startTime && startTime < elementEnd) ||
+          (startTime + duration > element.startTime &&
+            startTime + duration <= elementEnd) ||
+          (startTime < element.startTime && startTime + duration > elementEnd)
+        );
+      });
+      return overlap;
+    },
 
-		findOrCreateTrack: (trackType) => {
-			// Always create new text track to allow multiple text elements
-			if (trackType === "text") {
-				return get().addTrack(trackType);
-			}
+    findOrCreateTrack: (trackType) => {
+      // Always create new text track to allow multiple text elements
+      if (trackType === "text") {
+        return get().addTrack(trackType);
+      }
 
-			const existingTrack = get()._tracks.find((t) => t.type === trackType);
-			if (existingTrack) {
-				return existingTrack.id;
-			}
+      const existingTrack = get()._tracks.find((t) => t.type === trackType);
+      if (existingTrack) {
+        return existingTrack.id;
+      }
 
-			return get().addTrack(trackType);
-		},
+      return get().addTrack(trackType);
+    },
 
-		addMediaAtTime: (item, currentTime = 0) => {
-			const trackType = item.type === "audio" ? "audio" : "media";
-			const targetTrackId = get().findOrCreateTrack(trackType);
+    addMediaAtTime: (item, currentTime = 0) => {
+      const trackType = item.type === "audio" ? "audio" : "media";
+      const targetTrackId = get().findOrCreateTrack(trackType);
 
-			const duration =
-				item.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION;
+      const duration =
+        item.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION;
 
-			if (get().checkElementOverlap(targetTrackId, currentTime, duration)) {
-				toast.error(
-					"Cannot place element here - it would overlap with existing elements",
-				);
-				return false;
-			}
+      if (get().checkElementOverlap(targetTrackId, currentTime, duration)) {
+        toast.error(
+          "Cannot place element here - it would overlap with existing elements"
+        );
+        return false;
+      }
 
-			get().addElementToTrack(targetTrackId, {
-				type: "media",
-				mediaId: item.id,
-				name: item.name,
-				duration,
-				startTime: currentTime,
-				trimStart: 0,
-				trimEnd: 0,
-			});
-			return true;
-		},
+      get().addElementToTrack(targetTrackId, {
+        type: "media",
+        mediaId: item.id,
+        name: item.name,
+        duration,
+        startTime: currentTime,
+        trimStart: 0,
+        trimEnd: 0,
+      });
+      return true;
+    },
 
-		addTextAtTime: (item, currentTime = 0) => {
-			const targetTrackId = get().addTrack("text"); // Always create new text track to allow multiple text elements
+    addTextAtTime: (item, currentTime = 0) => {
+      const targetTrackId = get().addTrack("text"); // Always create new text track to allow multiple text elements
 
-			get().addElementToTrack(targetTrackId, {
-				type: "text",
-				name: item.name || "Text",
-				content: item.content || "Default Text",
-				duration: item.duration || TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-				startTime: currentTime,
-				trimStart: 0,
-				trimEnd: 0,
-				fontSize: item.fontSize || 48,
-				fontFamily: item.fontFamily || "Arial",
-				color: item.color || "#ffffff",
-				backgroundColor: item.backgroundColor || "transparent",
-				textAlign: item.textAlign || "center",
-				fontWeight: item.fontWeight || "normal",
-				fontStyle: item.fontStyle || "normal",
-				textDecoration: item.textDecoration || "none",
-				x: item.x || 0,
-				y: item.y || 0,
-				rotation: item.rotation || 0,
-				opacity: item.opacity !== undefined ? item.opacity : 1,
-			});
-			return true;
-		},
+      get().addElementToTrack(targetTrackId, {
+        type: "text",
+        name: item.name || "Text",
+        content: item.content || "Default Text",
+        duration: item.duration || TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
+        startTime: currentTime,
+        trimStart: 0,
+        trimEnd: 0,
+        fontSize: item.fontSize || 48,
+        fontFamily: item.fontFamily || "Arial",
+        color: item.color || "#ffffff",
+        backgroundColor: item.backgroundColor || "transparent",
+        textAlign: item.textAlign || "center",
+        fontWeight: item.fontWeight || "normal",
+        fontStyle: item.fontStyle || "normal",
+        textDecoration: item.textDecoration || "none",
+        x: item.x || 0,
+        y: item.y || 0,
+        rotation: item.rotation || 0,
+        opacity: item.opacity !== undefined ? item.opacity : 1,
+      });
+      return true;
+    },
 
-		addMediaToNewTrack: (item) => {
-			const trackType = item.type === "audio" ? "audio" : "media";
-			const targetTrackId = get().findOrCreateTrack(trackType);
+    addMediaToNewTrack: (item) => {
+      const trackType = item.type === "audio" ? "audio" : "media";
+      const targetTrackId = get().findOrCreateTrack(trackType);
 
-			get().addElementToTrack(targetTrackId, {
-				type: "media",
-				mediaId: item.id,
-				name: item.name,
-				duration: item.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION,
-				startTime: 0,
-				trimStart: 0,
-				trimEnd: 0,
-			});
-			return true;
-		},
+      get().addElementToTrack(targetTrackId, {
+        type: "media",
+        mediaId: item.id,
+        name: item.name,
+        duration: item.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION,
+        startTime: 0,
+        trimStart: 0,
+        trimEnd: 0,
+      });
+      return true;
+    },
 
-		addTextToNewTrack: (item) => {
-			const targetTrackId = get().addTrack("text"); // Always create new text track to allow multiple text elements
+    addTextToNewTrack: (item) => {
+      const targetTrackId = get().addTrack("text"); // Always create new text track to allow multiple text elements
 
-			get().addElementToTrack(targetTrackId, {
-				type: "text",
-				name: item.name || "Text",
-				content:
-					("content" in item ? item.content : "Default Text") || "Default Text",
-				duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-				startTime: 0,
-				trimStart: 0,
-				trimEnd: 0,
-				fontSize: ("fontSize" in item ? item.fontSize : 48) || 48,
-				fontFamily:
-					("fontFamily" in item ? item.fontFamily : "Arial") || "Arial",
-				color: ("color" in item ? item.color : "#ffffff") || "#ffffff",
-				backgroundColor:
-					("backgroundColor" in item ? item.backgroundColor : "transparent") ||
-					"transparent",
-				textAlign:
-					("textAlign" in item ? item.textAlign : "center") || "center",
-				fontWeight:
-					("fontWeight" in item ? item.fontWeight : "normal") || "normal",
-				fontStyle:
-					("fontStyle" in item ? item.fontStyle : "normal") || "normal",
-				textDecoration:
-					("textDecoration" in item ? item.textDecoration : "none") || "none",
-				x: ("x" in item ? item.x : 0) || 0,
-				y: ("y" in item ? item.y : 0) || 0,
-				rotation: ("rotation" in item ? item.rotation : 0) || 0,
-				opacity:
-					"opacity" in item && item.opacity !== undefined ? item.opacity : 1,
-			});
-			return true;
-		},
-	};
+      get().addElementToTrack(targetTrackId, {
+        type: "text",
+        name: item.name || "Text",
+        content:
+          ("content" in item ? item.content : "Default Text") || "Default Text",
+        duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
+        startTime: 0,
+        trimStart: 0,
+        trimEnd: 0,
+        fontSize: ("fontSize" in item ? item.fontSize : 48) || 48,
+        fontFamily:
+          ("fontFamily" in item ? item.fontFamily : "Arial") || "Arial",
+        color: ("color" in item ? item.color : "#ffffff") || "#ffffff",
+        backgroundColor:
+          ("backgroundColor" in item ? item.backgroundColor : "transparent") ||
+          "transparent",
+        textAlign:
+          ("textAlign" in item ? item.textAlign : "center") || "center",
+        fontWeight:
+          ("fontWeight" in item ? item.fontWeight : "normal") || "normal",
+        fontStyle:
+          ("fontStyle" in item ? item.fontStyle : "normal") || "normal",
+        textDecoration:
+          ("textDecoration" in item ? item.textDecoration : "none") || "none",
+        x: ("x" in item ? item.x : 0) || 0,
+        y: ("y" in item ? item.y : 0) || 0,
+        rotation: ("rotation" in item ? item.rotation : 0) || 0,
+        opacity:
+          "opacity" in item && item.opacity !== undefined ? item.opacity : 1,
+      });
+      return true;
+    },
+  };
 });