format, cleanup, deps

14 files changed, 1573 insertions, 1571 deletions

diff --git a/apps/web/src/hooks/auth/useLogin.ts b/apps/web/src/hooks/auth/useLogin.ts
index 12eddcbf..a3942506 100644
--- a/apps/web/src/hooks/auth/useLogin.ts
+++ b/apps/web/src/hooks/auth/useLogin.ts
@@ -3,58 +3,58 @@ import { useRouter } from "next/navigation";
 import { signIn } from "@opencut/auth/client";
 
 export function useLogin() {
-    const router = useRouter();
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState<string | null>(null);
-    const [isEmailLoading, setIsEmailLoading] = useState(false);
-    const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+	const router = useRouter();
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [isEmailLoading, setIsEmailLoading] = useState(false);
+	const [isGoogleLoading, setIsGoogleLoading] = useState(false);
 
-    const handleLogin = useCallback(async () => {
-        setError(null);
-        setIsEmailLoading(true);
+	const handleLogin = useCallback(async () => {
+		setError(null);
+		setIsEmailLoading(true);
 
-        const { error } = await signIn.email({
-            email,
-            password,
-        });
+		const { error } = await signIn.email({
+			email,
+			password,
+		});
 
-        if (error) {
-            setError(error.message || "An unexpected error occurred.");
-            setIsEmailLoading(false);
-            return;
-        }
+		if (error) {
+			setError(error.message || "An unexpected error occurred.");
+			setIsEmailLoading(false);
+			return;
+		}
 
-        router.push("/projects");
-    }, [router, email, password]);
+		router.push("/projects");
+	}, [router, email, password]);
 
-    const handleGoogleLogin = async () => {
-        setError(null);
-        setIsGoogleLoading(true);
+	const handleGoogleLogin = async () => {
+		setError(null);
+		setIsGoogleLoading(true);
 
-        try {
-            await signIn.social({
-                provider: "google",
-                callbackURL: "/projects",
-            });
-        } catch (error) {
-            setError("Failed to sign in with Google. Please try again.");
-            setIsGoogleLoading(false);
-        }
-    };
+		try {
+			await signIn.social({
+				provider: "google",
+				callbackURL: "/projects",
+			});
+		} catch (error) {
+			setError("Failed to sign in with Google. Please try again.");
+			setIsGoogleLoading(false);
+		}
+	};
 
-    const isAnyLoading = isEmailLoading || isGoogleLoading;
+	const isAnyLoading = isEmailLoading || isGoogleLoading;
 
-    return {
-        email,
-        setEmail,
-        password,
-        setPassword,
-        error,
-        isEmailLoading,
-        isGoogleLoading,
-        isAnyLoading,
-        handleLogin,
-        handleGoogleLogin,
-    };
+	return {
+		email,
+		setEmail,
+		password,
+		setPassword,
+		error,
+		isEmailLoading,
+		isGoogleLoading,
+		isAnyLoading,
+		handleLogin,
+		handleGoogleLogin,
+	};
 }
diff --git a/apps/web/src/hooks/auth/useSignUp.ts b/apps/web/src/hooks/auth/useSignUp.ts
index 4cd2850a..fae7c967 100644
--- a/apps/web/src/hooks/auth/useSignUp.ts
+++ b/apps/web/src/hooks/auth/useSignUp.ts
@@ -3,63 +3,63 @@ import { useRouter } from "next/navigation";
 import { signUp, signIn } from "@opencut/auth/client";
 
 export function useSignUp() {
-    const router = useRouter();
-    const [name, setName] = useState("");
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState<string | null>(null);
-    const [isEmailLoading, setIsEmailLoading] = useState(false);
-    const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+	const router = useRouter();
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [isEmailLoading, setIsEmailLoading] = useState(false);
+	const [isGoogleLoading, setIsGoogleLoading] = useState(false);
 
-    const handleSignUp = useCallback(async () => {
-        setError(null);
-        setIsEmailLoading(true);
+	const handleSignUp = useCallback(async () => {
+		setError(null);
+		setIsEmailLoading(true);
 
-        const { error } = await signUp.email({
-            name,
-            email,
-            password,
-        });
+		const { error } = await signUp.email({
+			name,
+			email,
+			password,
+		});
 
-        if (error) {
-            setError(error.message || "An unexpected error occurred.");
-            setIsEmailLoading(false);
-            return;
-        }
+		if (error) {
+			setError(error.message || "An unexpected error occurred.");
+			setIsEmailLoading(false);
+			return;
+		}
 
-        router.push("/login");
-    }, [name, email, password, router]);
+		router.push("/login");
+	}, [name, email, password, router]);
 
-    const handleGoogleSignUp = useCallback(async () => {
-        setError(null);
-        setIsGoogleLoading(true);
+	const handleGoogleSignUp = useCallback(async () => {
+		setError(null);
+		setIsGoogleLoading(true);
 
-        try {
-            await signIn.social({
-                provider: "google",
-            });
+		try {
+			await signIn.social({
+				provider: "google",
+			});
 
-            router.push("/editor");
-        } catch (error) {
-            setError("Failed to sign up with Google. Please try again.");
-            setIsGoogleLoading(false);
-        }
-    }, [router]);
+			router.push("/editor");
+		} catch (error) {
+			setError("Failed to sign up with Google. Please try again.");
+			setIsGoogleLoading(false);
+		}
+	}, [router]);
 
-    const isAnyLoading = isEmailLoading || isGoogleLoading;
+	const isAnyLoading = isEmailLoading || isGoogleLoading;
 
-    return {
-        name,
-        setName,
-        email,
-        setEmail,
-        password,
-        setPassword,
-        error,
-        isEmailLoading,
-        isGoogleLoading,
-        isAnyLoading,
-        handleSignUp,
-        handleGoogleSignUp,
-    };
-}
\ No newline at end of file
+	return {
+		name,
+		setName,
+		email,
+		setEmail,
+		password,
+		setPassword,
+		error,
+		isEmailLoading,
+		isGoogleLoading,
+		isAnyLoading,
+		handleSignUp,
+		handleGoogleSignUp,
+	};
+}
diff --git a/apps/web/src/hooks/use-aspect-ratio.ts b/apps/web/src/hooks/use-aspect-ratio.ts
index 40de8454..b297f6b5 100644
--- a/apps/web/src/hooks/use-aspect-ratio.ts
+++ b/apps/web/src/hooks/use-aspect-ratio.ts
@@ -1,92 +1,92 @@
-import { useEditorStore } from "@/stores/editor-store";

-import { useMediaStore, getMediaAspectRatio } from "@/stores/media-store";

-import { useTimelineStore } from "@/stores/timeline-store";

-

-export function useAspectRatio() {

-  const { canvasSize, canvasMode, canvasPresets } = useEditorStore();

-  const { mediaItems } = useMediaStore();

-  const { tracks } = useTimelineStore();

-

-  // Find the current preset based on canvas size

-  const currentPreset = canvasPresets.find(

-    (preset) =>

-      preset.width === canvasSize.width && preset.height === canvasSize.height

-  );

-

-  // Get the original aspect ratio from the first video/image in timeline

-  const getOriginalAspectRatio = (): number => {

-    // Find first video or image in timeline

-    for (const track of tracks) {

-      for (const element of track.elements) {

-        if (element.type === "media") {

-          const mediaItem = mediaItems.find(

-            (item) => item.id === element.mediaId

-          );

-          if (

-            mediaItem &&

-            (mediaItem.type === "video" || mediaItem.type === "image")

-          ) {

-            return getMediaAspectRatio(mediaItem);

-          }

-        }

-      }

-    }

-    return 16 / 9; // Default aspect ratio

-  };

-

-  // Get current aspect ratio

-  const getCurrentAspectRatio = (): number => {

-    return canvasSize.width / canvasSize.height;

-  };

-

-  // Format aspect ratio as a readable string

-  const formatAspectRatio = (aspectRatio: number): string => {

-    // Check if it matches a common aspect ratio

-    const ratios = [

-      { ratio: 16 / 9, label: "16:9" },

-      { ratio: 9 / 16, label: "9:16" },

-      { ratio: 1, label: "1:1" },

-      { ratio: 4 / 3, label: "4:3" },

-      { ratio: 3 / 4, label: "3:4" },

-      { ratio: 21 / 9, label: "21:9" },

-    ];

-

-    for (const { ratio, label } of ratios) {

-      if (Math.abs(aspectRatio - ratio) < 0.01) {

-        return label;

-      }

-    }

-

-    // If not a common ratio, format as decimal

-    return aspectRatio.toFixed(2);

-  };

-

-  // Check if current mode is "Original"

-  const isOriginal = canvasMode === "original";

-

-  // Get display name for current aspect ratio

-  const getDisplayName = (): string => {

-    // If explicitly set to original mode, always show "Original"

-    if (canvasMode === "original") {

-      return "Original";

-    }

-

-    if (currentPreset) {

-      return currentPreset.name;

-    }

-

-    return formatAspectRatio(getCurrentAspectRatio());

-  };

-

-  return {

-    currentPreset,

-    canvasMode,

-    isOriginal,

-    getCurrentAspectRatio,

-    getOriginalAspectRatio,

-    formatAspectRatio,

-    getDisplayName,

-    canvasSize,

-    canvasPresets,

-  };

-}

+import { useEditorStore } from "@/stores/editor-store";
+import { useMediaStore, getMediaAspectRatio } from "@/stores/media-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+
+export function useAspectRatio() {
+	const { canvasSize, canvasMode, canvasPresets } = useEditorStore();
+	const { mediaItems } = useMediaStore();
+	const { tracks } = useTimelineStore();
+
+	// Find the current preset based on canvas size
+	const currentPreset = canvasPresets.find(
+		(preset) =>
+			preset.width === canvasSize.width && preset.height === canvasSize.height,
+	);
+
+	// Get the original aspect ratio from the first video/image in timeline
+	const getOriginalAspectRatio = (): number => {
+		// Find first video or image in timeline
+		for (const track of tracks) {
+			for (const element of track.elements) {
+				if (element.type === "media") {
+					const mediaItem = mediaItems.find(
+						(item) => item.id === element.mediaId,
+					);
+					if (
+						mediaItem &&
+						(mediaItem.type === "video" || mediaItem.type === "image")
+					) {
+						return getMediaAspectRatio(mediaItem);
+					}
+				}
+			}
+		}
+		return 16 / 9; // Default aspect ratio
+	};
+
+	// Get current aspect ratio
+	const getCurrentAspectRatio = (): number => {
+		return canvasSize.width / canvasSize.height;
+	};
+
+	// Format aspect ratio as a readable string
+	const formatAspectRatio = (aspectRatio: number): string => {
+		// Check if it matches a common aspect ratio
+		const ratios = [
+			{ ratio: 16 / 9, label: "16:9" },
+			{ ratio: 9 / 16, label: "9:16" },
+			{ ratio: 1, label: "1:1" },
+			{ ratio: 4 / 3, label: "4:3" },
+			{ ratio: 3 / 4, label: "3:4" },
+			{ ratio: 21 / 9, label: "21:9" },
+		];
+
+		for (const { ratio, label } of ratios) {
+			if (Math.abs(aspectRatio - ratio) < 0.01) {
+				return label;
+			}
+		}
+
+		// If not a common ratio, format as decimal
+		return aspectRatio.toFixed(2);
+	};
+
+	// Check if current mode is "Original"
+	const isOriginal = canvasMode === "original";
+
+	// Get display name for current aspect ratio
+	const getDisplayName = (): string => {
+		// If explicitly set to original mode, always show "Original"
+		if (canvasMode === "original") {
+			return "Original";
+		}
+
+		if (currentPreset) {
+			return currentPreset.name;
+		}
+
+		return formatAspectRatio(getCurrentAspectRatio());
+	};
+
+	return {
+		currentPreset,
+		canvasMode,
+		isOriginal,
+		getCurrentAspectRatio,
+		getOriginalAspectRatio,
+		formatAspectRatio,
+		getDisplayName,
+		canvasSize,
+		canvasPresets,
+	};
+}
diff --git a/apps/web/src/hooks/use-disable-browser-zoom.ts b/apps/web/src/hooks/use-disable-browser-zoom.ts
index 9467cb71..53f86507 100644
--- a/apps/web/src/hooks/use-disable-browser-zoom.ts
+++ b/apps/web/src/hooks/use-disable-browser-zoom.ts
@@ -12,52 +12,52 @@ import { useEffect } from "react";
  * Use with caution, especially for public-facing applications.
  */
 export const useDisableBrowserZoom = () => {
-  useEffect(() => {
-    /**
-     * Prevents browser zoom when user holds Ctrl (or Cmd on Mac) and scrolls the mouse wheel.
-     */
-    const handleWheel = (e: WheelEvent) => {
-      if (e.ctrlKey) {
-        e.preventDefault();
-      }
-    };
+	useEffect(() => {
+		/**
+		 * Prevents browser zoom when user holds Ctrl (or Cmd on Mac) and scrolls the mouse wheel.
+		 */
+		const handleWheel = (e: WheelEvent) => {
+			if (e.ctrlKey) {
+				e.preventDefault();
+			}
+		};
 
-    /**
-     * Prevents browser zoom via keyboard shortcuts:
-     * Ctrl/Cmd + '+', '-', '=', or '0' (reset zoom)
-     * Some keyboards emit '=' for '+' (without Shift).
-     */
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.ctrlKey) {
-        const key = e.key;
-        if (key === "+" || key === "-" || key === "0" || key === "=") {
-          e.preventDefault();
-        }
-      }
-    };
+		/**
+		 * Prevents browser zoom via keyboard shortcuts:
+		 * Ctrl/Cmd + '+', '-', '=', or '0' (reset zoom)
+		 * Some keyboards emit '=' for '+' (without Shift).
+		 */
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.ctrlKey) {
+				const key = e.key;
+				if (key === "+" || key === "-" || key === "0" || key === "=") {
+					e.preventDefault();
+				}
+			}
+		};
 
-    /**
-     * Prevents pinch-zoom gestures on supported browsers (mainly Safari/macOS/iOS).
-     * gesturestart, gesturechange, and gestureend are non-standard and not supported everywhere.
-     */
-    const handleGesture = (e: Event) => {
-      e.preventDefault();
-    };
+		/**
+		 * Prevents pinch-zoom gestures on supported browsers (mainly Safari/macOS/iOS).
+		 * gesturestart, gesturechange, and gestureend are non-standard and not supported everywhere.
+		 */
+		const handleGesture = (e: Event) => {
+			e.preventDefault();
+		};
 
-    // Attach event listeners (passive: false is required for preventDefault to work)
-    window.addEventListener("wheel", handleWheel, { passive: false });
-    window.addEventListener("keydown", handleKeyDown, { passive: false });
-    window.addEventListener("gesturestart", handleGesture, { passive: false });
-    window.addEventListener("gesturechange", handleGesture, { passive: false });
-    window.addEventListener("gestureend", handleGesture, { passive: false });
+		// Attach event listeners (passive: false is required for preventDefault to work)
+		window.addEventListener("wheel", handleWheel, { passive: false });
+		window.addEventListener("keydown", handleKeyDown, { passive: false });
+		window.addEventListener("gesturestart", handleGesture, { passive: false });
+		window.addEventListener("gesturechange", handleGesture, { passive: false });
+		window.addEventListener("gestureend", handleGesture, { passive: false });
 
-    // Cleanup listeners on unmount to avoid memory leaks
-    return () => {
-      window.removeEventListener("wheel", handleWheel);
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("gesturestart", handleGesture);
-      window.removeEventListener("gesturechange", handleGesture);
-      window.removeEventListener("gestureend", handleGesture);
-    };
-  }, []);
+		// Cleanup listeners on unmount to avoid memory leaks
+		return () => {
+			window.removeEventListener("wheel", handleWheel);
+			window.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("gesturestart", handleGesture);
+			window.removeEventListener("gesturechange", handleGesture);
+			window.removeEventListener("gestureend", handleGesture);
+		};
+	}, []);
 };
diff --git a/apps/web/src/hooks/use-drag-drop.ts b/apps/web/src/hooks/use-drag-drop.ts
index eaab89d8..768014ec 100644
--- a/apps/web/src/hooks/use-drag-drop.ts
+++ b/apps/web/src/hooks/use-drag-drop.ts
@@ -1,85 +1,85 @@
-import { useState, useRef } from "react";

-

-interface UseDragDropOptions {

-  onDrop?: (files: FileList) => void;

-}

-

-// Helper function to check if drag contains files from external sources (not internal app drags)

-const containsFiles = (dataTransfer: DataTransfer): boolean => {

-  // Check if this is an internal app drag (media item)

-  if (dataTransfer.types.includes("application/x-media-item")) {

-    return false;

-  }

-

-  // Only show overlay for external file drags

-  return dataTransfer.types.includes("Files");

-};

-

-export function useDragDrop(options: UseDragDropOptions = {}) {

-  const [isDragOver, setIsDragOver] = useState(false);

-  const dragCounterRef = useRef(0);

-

-  const handleDragEnter = (e: React.DragEvent) => {

-    e.preventDefault();

-

-    // Only handle external file drags, not internal app element drags

-    if (!containsFiles(e.dataTransfer)) {

-      return;

-    }

-

-    dragCounterRef.current += 1;

-    if (!isDragOver) {

-      setIsDragOver(true);

-    }

-  };

-

-  const handleDragOver = (e: React.DragEvent) => {

-    e.preventDefault();

-

-    // Only handle file drags

-    if (!containsFiles(e.dataTransfer)) {

-      return;

-    }

-  };

-

-  const handleDragLeave = (e: React.DragEvent) => {

-    e.preventDefault();

-

-    // Only handle file drags

-    if (!containsFiles(e.dataTransfer)) {

-      return;

-    }

-

-    dragCounterRef.current -= 1;

-    if (dragCounterRef.current === 0) {

-      setIsDragOver(false);

-    }

-  };

-

-  const handleDrop = (e: React.DragEvent) => {

-    e.preventDefault();

-    setIsDragOver(false);

-    dragCounterRef.current = 0;

-

-    // Only handle file drops

-    if (

-      options.onDrop &&

-      e.dataTransfer.files &&

-      containsFiles(e.dataTransfer)

-    ) {

-      options.onDrop(e.dataTransfer.files);

-    }

-  };

-

-  const dragProps = {

-    onDragEnter: handleDragEnter,

-    onDragOver: handleDragOver,

-    onDragLeave: handleDragLeave,

-    onDrop: handleDrop,

-  };

-

-  return {

-    isDragOver,

-    dragProps,

-  };

-}

+import { useState, useRef } from "react";
+
+interface UseDragDropOptions {
+	onDrop?: (files: FileList) => void;
+}
+
+// Helper function to check if drag contains files from external sources (not internal app drags)
+const containsFiles = (dataTransfer: DataTransfer): boolean => {
+	// Check if this is an internal app drag (media item)
+	if (dataTransfer.types.includes("application/x-media-item")) {
+		return false;
+	}
+
+	// Only show overlay for external file drags
+	return dataTransfer.types.includes("Files");
+};
+
+export function useDragDrop(options: UseDragDropOptions = {}) {
+	const [isDragOver, setIsDragOver] = useState(false);
+	const dragCounterRef = useRef(0);
+
+	const handleDragEnter = (e: React.DragEvent) => {
+		e.preventDefault();
+
+		// Only handle external file drags, not internal app element drags
+		if (!containsFiles(e.dataTransfer)) {
+			return;
+		}
+
+		dragCounterRef.current += 1;
+		if (!isDragOver) {
+			setIsDragOver(true);
+		}
+	};
+
+	const handleDragOver = (e: React.DragEvent) => {
+		e.preventDefault();
+
+		// Only handle file drags
+		if (!containsFiles(e.dataTransfer)) {
+			return;
+		}
+	};
+
+	const handleDragLeave = (e: React.DragEvent) => {
+		e.preventDefault();
+
+		// Only handle file drags
+		if (!containsFiles(e.dataTransfer)) {
+			return;
+		}
+
+		dragCounterRef.current -= 1;
+		if (dragCounterRef.current === 0) {
+			setIsDragOver(false);
+		}
+	};
+
+	const handleDrop = (e: React.DragEvent) => {
+		e.preventDefault();
+		setIsDragOver(false);
+		dragCounterRef.current = 0;
+
+		// Only handle file drops
+		if (
+			options.onDrop &&
+			e.dataTransfer.files &&
+			containsFiles(e.dataTransfer)
+		) {
+			options.onDrop(e.dataTransfer.files);
+		}
+	};
+
+	const dragProps = {
+		onDragEnter: handleDragEnter,
+		onDragOver: handleDragOver,
+		onDragLeave: handleDragLeave,
+		onDrop: handleDrop,
+	};
+
+	return {
+		isDragOver,
+		dragProps,
+	};
+}
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts
index feb8f409..cd1790fd 100644
--- a/apps/web/src/hooks/use-keyboard-shortcuts.ts
+++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts
@@ -1,338 +1,338 @@
-"use client";

-

-import { useEffect, useCallback } from "react";

-import { useTimelineStore } from "@/stores/timeline-store";

-import { usePlaybackStore } from "@/stores/playback-store";

-import { useProjectStore } from "@/stores/project-store";

-import { toast } from "sonner";

-

-export interface KeyboardShortcut {

-  id: string;

-  keys: string[];

-  description: string;

-  category: string;

-  action: () => void;

-  enabled?: boolean;

-  requiresSelection?: boolean;

-  icon?: React.ReactNode;

-}

-

-interface UseKeyboardShortcutsOptions {

-  enabled?: boolean;

-  context?: "global" | "timeline" | "editor";

-}

-

-export const useKeyboardShortcuts = (

-  options: UseKeyboardShortcutsOptions = {}

-) => {

-  const { enabled = true, context = "editor" } = options;

-

-  const {

-    tracks,

-    selectedElements,

-    clearSelectedElements,

-    setSelectedElements,

-    removeElementFromTrack,

-    splitElement,

-    addElementToTrack,

-    snappingEnabled,

-    toggleSnapping,

-    undo,

-    redo,

-  } = useTimelineStore();

-

-  const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();

-

-  const { activeProject } = useProjectStore();

-

-  // Check if user is typing in an input field

-  const isInputFocused = useCallback(() => {

-    const activeElement = document.activeElement as HTMLElement;

-    return (

-      activeElement &&

-      (activeElement.tagName === "INPUT" ||

-        activeElement.tagName === "TEXTAREA" ||

-        activeElement.contentEditable === "true")

-    );

-  }, []);

-

-  // Define all shortcuts in one place

-  const shortcuts: KeyboardShortcut[] = [

-    // Playback Controls

-    {

-      id: "play-pause",

-      keys: ["Space"],

-      description: "Play/Pause",

-      category: "Playback",

-      action: () => {

-        toggle();

-      },

-    },

-    {

-      id: "rewind",

-      keys: ["J"],

-      description: "Rewind 1 second",

-      category: "Playback",

-      action: () => {

-        seek(Math.max(0, currentTime - 1));

-      },

-    },

-    {

-      id: "play-pause-alt",

-      keys: ["K"],

-      description: "Play/Pause (alternative)",

-      category: "Playback",

-      action: () => {

-        toggle();

-      },

-    },

-    {

-      id: "fast-forward",

-      keys: ["L"],

-      description: "Fast forward 1 second",

-      category: "Playback",

-      action: () => {

-        seek(Math.min(duration, currentTime + 1));

-      },

-    },

-

-    // Navigation

-    {

-      id: "frame-backward",

-      keys: ["ArrowLeft"],

-      description: "Frame step backward",

-      category: "Navigation",

-      action: () => {

-        const projectFps = activeProject?.fps || 30;

-        seek(Math.max(0, currentTime - 1 / projectFps));

-      },

-    },

-    {

-      id: "frame-forward",

-      keys: ["ArrowRight"],

-      description: "Frame step forward",

-      category: "Navigation",

-      action: () => {

-        const projectFps = activeProject?.fps || 30;

-        seek(Math.min(duration, currentTime + 1 / projectFps));

-      },

-    },

-    {

-      id: "jump-backward",

-      keys: ["Shift+ArrowLeft"],

-      description: "Jump back 5 seconds",

-      category: "Navigation",

-      action: () => {

-        seek(Math.max(0, currentTime - 5));

-      },

-    },

-    {

-      id: "jump-forward",

-      keys: ["Shift+ArrowRight"],

-      description: "Jump forward 5 seconds",

-      category: "Navigation",

-      action: () => {

-        seek(Math.min(duration, currentTime + 5));

-      },

-    },

-    {

-      id: "goto-start",

-      keys: ["Home"],

-      description: "Go to timeline start",

-      category: "Navigation",

-      action: () => {

-        seek(0);

-      },

-    },

-    {

-      id: "goto-end",

-      keys: ["End"],

-      description: "Go to timeline end",

-      category: "Navigation",

-      action: () => {

-        seek(duration);

-      },

-    },

-

-    // Editing

-    {

-      id: "split-element",

-      keys: ["S"],

-      description: "Split element at playhead",

-      category: "Editing",

-      requiresSelection: true,

-      action: () => {

-        if (selectedElements.length !== 1) {

-          toast.error("Select exactly one element to split");

-          return;

-        }

-

-        const { trackId, elementId } = selectedElements[0];

-        const track = tracks.find((t: any) => t.id === trackId);

-        const element = track?.elements.find((el: any) => el.id === elementId);

-

-        if (element) {

-          const effectiveStart = element.startTime;

-          const effectiveEnd =

-            element.startTime +

-            (element.duration - element.trimStart - element.trimEnd);

-

-          if (currentTime > effectiveStart && currentTime < effectiveEnd) {

-            splitElement(trackId, elementId, currentTime);

-          } else {

-            toast.error("Playhead must be within selected element");

-          }

-        }

-      },

-    },

-    {

-      id: "delete-elements",

-      keys: ["Delete", "Backspace"],

-      description: "Delete selected elements",

-      category: "Editing",

-      requiresSelection: true,

-      action: () => {

-        if (selectedElements.length === 0) {

-          toast.error("No elements selected");

-          return;

-        }

-        selectedElements.forEach(

-          ({ trackId, elementId }: { trackId: string; elementId: string }) => {

-            removeElementFromTrack(trackId, elementId);

-          }

-        );

-        clearSelectedElements();

-      },

-    },

-    {

-      id: "toggle-snapping",

-      keys: ["N"],

-      description: "Toggle snapping",

-      category: "Editing",

-      action: () => {

-        toggleSnapping();

-      },

-    },

-

-    // Selection & Organization

-    {

-      id: "select-all",

-      keys: ["Cmd+A", "Ctrl+A"],

-      description: "Select all elements",

-      category: "Selection",

-      action: () => {

-        const allElements = tracks.flatMap((track: any) =>

-          track.elements.map((element: any) => ({

-            trackId: track.id,

-            elementId: element.id,

-          }))

-        );

-        setSelectedElements(allElements);

-      },

-    },

-    {

-      id: "duplicate-element",

-      keys: ["Cmd+D", "Ctrl+D"],

-      description: "Duplicate selected element",

-      category: "Selection",

-      requiresSelection: true,

-      action: () => {

-        if (selectedElements.length !== 1) {

-          toast.error("Select exactly one element to duplicate");

-          return;

-        }

-

-        const { trackId, elementId } = selectedElements[0];

-        const track = tracks.find((t: any) => t.id === trackId);

-        const element = track?.elements.find((el: any) => el.id === elementId);

-

-        if (element) {

-          const newStartTime =

-            element.startTime +

-            (element.duration - element.trimStart - element.trimEnd) +

-            0.1;

-          const { id, ...elementWithoutId } = element;

-

-          addElementToTrack(trackId, {

-            ...elementWithoutId,

-            startTime: newStartTime,

-          });

-        }

-      },

-    },

-

-    // History

-    {

-      id: "undo",

-      keys: ["Cmd+Z", "Ctrl+Z"],

-      description: "Undo",

-      category: "History",

-      action: () => {

-        undo();

-      },

-    },

-    {

-      id: "redo",

-      keys: ["Cmd+Shift+Z", "Ctrl+Shift+Z", "Cmd+Y", "Ctrl+Y"],

-      description: "Redo",

-      category: "History",

-      action: () => {

-        redo();

-      },

-    },

-  ];

-

-  // Parse keyboard event to match against shortcuts

-  const parseKeyboardEvent = useCallback((e: KeyboardEvent): string => {

-    const parts: string[] = [];

-

-    if (e.metaKey || e.ctrlKey) parts.push(e.metaKey ? "Cmd" : "Ctrl");

-    if (e.shiftKey) parts.push("Shift");

-    if (e.altKey) parts.push("Alt");

-

-    parts.push(e.key);

-

-    return parts.join("+").toLowerCase();

-  }, []);

-

-  // Handle keyboard events

-  const handleKeyDown = useCallback(

-    (e: KeyboardEvent) => {

-      if (!enabled || isInputFocused()) return;

-

-      const keyCombo = parseKeyboardEvent(e);

-      const shortcut = shortcuts.find((s) =>

-        s.keys.some(

-          (key) =>

-            key.toLowerCase() === keyCombo ||

-            key.toLowerCase() === e.key.toLowerCase()

-        )

-      );

-

-      if (shortcut) {

-        // Check if shortcut requires selection

-        if (shortcut.requiresSelection && selectedElements.length === 0) {

-          return;

-        }

-

-        e.preventDefault();

-        shortcut.action();

-      }

-    },

-    [enabled, shortcuts, selectedElements, parseKeyboardEvent, isInputFocused]

-  );

-

-  // Set up event listener

-  useEffect(() => {

-    if (!enabled) return;

-

-    window.addEventListener("keydown", handleKeyDown);

-    return () => window.removeEventListener("keydown", handleKeyDown);

-  }, [enabled, handleKeyDown]);

-

-  // Return shortcuts for help component

-  return {

-    shortcuts: shortcuts.filter((s) => s.enabled !== false),

-    enabled,

-  };

-};

+"use client";
+
+import { useEffect, useCallback } from "react";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { useProjectStore } from "@/stores/project-store";
+import { toast } from "sonner";
+
+export interface KeyboardShortcut {
+	id: string;
+	keys: string[];
+	description: string;
+	category: string;
+	action: () => void;
+	enabled?: boolean;
+	requiresSelection?: boolean;
+	icon?: React.ReactNode;
+}
+
+interface UseKeyboardShortcutsOptions {
+	enabled?: boolean;
+	context?: "global" | "timeline" | "editor";
+}
+
+export const useKeyboardShortcuts = (
+	options: UseKeyboardShortcutsOptions = {},
+) => {
+	const { enabled = true, context = "editor" } = options;
+
+	const {
+		tracks,
+		selectedElements,
+		clearSelectedElements,
+		setSelectedElements,
+		removeElementFromTrack,
+		splitElement,
+		addElementToTrack,
+		snappingEnabled,
+		toggleSnapping,
+		undo,
+		redo,
+	} = useTimelineStore();
+
+	const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();
+
+	const { activeProject } = useProjectStore();
+
+	// Check if user is typing in an input field
+	const isInputFocused = useCallback(() => {
+		const activeElement = document.activeElement as HTMLElement;
+		return (
+			activeElement &&
+			(activeElement.tagName === "INPUT" ||
+				activeElement.tagName === "TEXTAREA" ||
+				activeElement.contentEditable === "true")
+		);
+	}, []);
+
+	// Define all shortcuts in one place
+	const shortcuts: KeyboardShortcut[] = [
+		// Playback Controls
+		{
+			id: "play-pause",
+			keys: ["Space"],
+			description: "Play/Pause",
+			category: "Playback",
+			action: () => {
+				toggle();
+			},
+		},
+		{
+			id: "rewind",
+			keys: ["J"],
+			description: "Rewind 1 second",
+			category: "Playback",
+			action: () => {
+				seek(Math.max(0, currentTime - 1));
+			},
+		},
+		{
+			id: "play-pause-alt",
+			keys: ["K"],
+			description: "Play/Pause (alternative)",
+			category: "Playback",
+			action: () => {
+				toggle();
+			},
+		},
+		{
+			id: "fast-forward",
+			keys: ["L"],
+			description: "Fast forward 1 second",
+			category: "Playback",
+			action: () => {
+				seek(Math.min(duration, currentTime + 1));
+			},
+		},
+
+		// Navigation
+		{
+			id: "frame-backward",
+			keys: ["ArrowLeft"],
+			description: "Frame step backward",
+			category: "Navigation",
+			action: () => {
+				const projectFps = activeProject?.fps || 30;
+				seek(Math.max(0, currentTime - 1 / projectFps));
+			},
+		},
+		{
+			id: "frame-forward",
+			keys: ["ArrowRight"],
+			description: "Frame step forward",
+			category: "Navigation",
+			action: () => {
+				const projectFps = activeProject?.fps || 30;
+				seek(Math.min(duration, currentTime + 1 / projectFps));
+			},
+		},
+		{
+			id: "jump-backward",
+			keys: ["Shift+ArrowLeft"],
+			description: "Jump back 5 seconds",
+			category: "Navigation",
+			action: () => {
+				seek(Math.max(0, currentTime - 5));
+			},
+		},
+		{
+			id: "jump-forward",
+			keys: ["Shift+ArrowRight"],
+			description: "Jump forward 5 seconds",
+			category: "Navigation",
+			action: () => {
+				seek(Math.min(duration, currentTime + 5));
+			},
+		},
+		{
+			id: "goto-start",
+			keys: ["Home"],
+			description: "Go to timeline start",
+			category: "Navigation",
+			action: () => {
+				seek(0);
+			},
+		},
+		{
+			id: "goto-end",
+			keys: ["End"],
+			description: "Go to timeline end",
+			category: "Navigation",
+			action: () => {
+				seek(duration);
+			},
+		},
+
+		// Editing
+		{
+			id: "split-element",
+			keys: ["S"],
+			description: "Split element at playhead",
+			category: "Editing",
+			requiresSelection: true,
+			action: () => {
+				if (selectedElements.length !== 1) {
+					toast.error("Select exactly one element to split");
+					return;
+				}
+
+				const { trackId, elementId } = selectedElements[0];
+				const track = tracks.find((t: any) => t.id === trackId);
+				const element = track?.elements.find((el: any) => el.id === elementId);
+
+				if (element) {
+					const effectiveStart = element.startTime;
+					const effectiveEnd =
+						element.startTime +
+						(element.duration - element.trimStart - element.trimEnd);
+
+					if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+						splitElement(trackId, elementId, currentTime);
+					} else {
+						toast.error("Playhead must be within selected element");
+					}
+				}
+			},
+		},
+		{
+			id: "delete-elements",
+			keys: ["Delete", "Backspace"],
+			description: "Delete selected elements",
+			category: "Editing",
+			requiresSelection: true,
+			action: () => {
+				if (selectedElements.length === 0) {
+					toast.error("No elements selected");
+					return;
+				}
+				selectedElements.forEach(
+					({ trackId, elementId }: { trackId: string; elementId: string }) => {
+						removeElementFromTrack(trackId, elementId);
+					},
+				);
+				clearSelectedElements();
+			},
+		},
+		{
+			id: "toggle-snapping",
+			keys: ["N"],
+			description: "Toggle snapping",
+			category: "Editing",
+			action: () => {
+				toggleSnapping();
+			},
+		},
+
+		// Selection & Organization
+		{
+			id: "select-all",
+			keys: ["Cmd+A", "Ctrl+A"],
+			description: "Select all elements",
+			category: "Selection",
+			action: () => {
+				const allElements = tracks.flatMap((track: any) =>
+					track.elements.map((element: any) => ({
+						trackId: track.id,
+						elementId: element.id,
+					})),
+				);
+				setSelectedElements(allElements);
+			},
+		},
+		{
+			id: "duplicate-element",
+			keys: ["Cmd+D", "Ctrl+D"],
+			description: "Duplicate selected element",
+			category: "Selection",
+			requiresSelection: true,
+			action: () => {
+				if (selectedElements.length !== 1) {
+					toast.error("Select exactly one element to duplicate");
+					return;
+				}
+
+				const { trackId, elementId } = selectedElements[0];
+				const track = tracks.find((t: any) => t.id === trackId);
+				const element = track?.elements.find((el: any) => el.id === elementId);
+
+				if (element) {
+					const newStartTime =
+						element.startTime +
+						(element.duration - element.trimStart - element.trimEnd) +
+						0.1;
+					const { id, ...elementWithoutId } = element;
+
+					addElementToTrack(trackId, {
+						...elementWithoutId,
+						startTime: newStartTime,
+					});
+				}
+			},
+		},
+
+		// History
+		{
+			id: "undo",
+			keys: ["Cmd+Z", "Ctrl+Z"],
+			description: "Undo",
+			category: "History",
+			action: () => {
+				undo();
+			},
+		},
+		{
+			id: "redo",
+			keys: ["Cmd+Shift+Z", "Ctrl+Shift+Z", "Cmd+Y", "Ctrl+Y"],
+			description: "Redo",
+			category: "History",
+			action: () => {
+				redo();
+			},
+		},
+	];
+
+	// Parse keyboard event to match against shortcuts
+	const parseKeyboardEvent = useCallback((e: KeyboardEvent): string => {
+		const parts: string[] = [];
+
+		if (e.metaKey || e.ctrlKey) parts.push(e.metaKey ? "Cmd" : "Ctrl");
+		if (e.shiftKey) parts.push("Shift");
+		if (e.altKey) parts.push("Alt");
+
+		parts.push(e.key);
+
+		return parts.join("+").toLowerCase();
+	}, []);
+
+	// Handle keyboard events
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			if (!enabled || isInputFocused()) return;
+
+			const keyCombo = parseKeyboardEvent(e);
+			const shortcut = shortcuts.find((s) =>
+				s.keys.some(
+					(key) =>
+						key.toLowerCase() === keyCombo ||
+						key.toLowerCase() === e.key.toLowerCase(),
+				),
+			);
+
+			if (shortcut) {
+				// Check if shortcut requires selection
+				if (shortcut.requiresSelection && selectedElements.length === 0) {
+					return;
+				}
+
+				e.preventDefault();
+				shortcut.action();
+			}
+		},
+		[enabled, shortcuts, selectedElements, parseKeyboardEvent, isInputFocused],
+	);
+
+	// Set up event listener
+	useEffect(() => {
+		if (!enabled) return;
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [enabled, handleKeyDown]);
+
+	// Return shortcuts for help component
+	return {
+		shortcuts: shortcuts.filter((s) => s.enabled !== false),
+		enabled,
+	};
+};
diff --git a/apps/web/src/hooks/use-mobile.tsx b/apps/web/src/hooks/use-mobile.tsx
index 2b0fe1df..0a892310 100644
--- a/apps/web/src/hooks/use-mobile.tsx
+++ b/apps/web/src/hooks/use-mobile.tsx
@@ -1,19 +1,21 @@
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+		undefined,
+	);
 
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
 
-  return !!isMobile
+	return !!isMobile;
 }
diff --git a/apps/web/src/hooks/use-playback-controls.ts b/apps/web/src/hooks/use-playback-controls.ts
index ecbd1232..39b5c841 100644
--- a/apps/web/src/hooks/use-playback-controls.ts
+++ b/apps/web/src/hooks/use-playback-controls.ts
@@ -4,106 +4,106 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { toast } from "sonner";
 
 export const usePlaybackControls = () => {
-  const { isPlaying, currentTime, play, pause, seek } = usePlaybackStore();
+	const { isPlaying, currentTime, play, pause, seek } = usePlaybackStore();
 
-  const {
-    selectedElements,
-    tracks,
-    splitElement,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    separateAudio,
-  } = useTimelineStore();
+	const {
+		selectedElements,
+		tracks,
+		splitElement,
+		splitAndKeepLeft,
+		splitAndKeepRight,
+		separateAudio,
+	} = useTimelineStore();
 
-  const handleSplitSelectedElement = useCallback(() => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element to split");
-      return;
-    }
+	const handleSplitSelectedElement = useCallback(() => {
+		if (selectedElements.length !== 1) {
+			toast.error("Select exactly one element to split");
+			return;
+		}
 
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    const element = track?.elements.find((e) => e.id === elementId);
+		const { trackId, elementId } = selectedElements[0];
+		const track = tracks.find((t) => t.id === trackId);
+		const element = track?.elements.find((e) => e.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 (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within selected element");
-      return;
-    }
+		if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+			toast.error("Playhead must be within selected element");
+			return;
+		}
 
-    splitElement(trackId, elementId, currentTime);
-  }, [selectedElements, tracks, currentTime, splitElement]);
+		splitElement(trackId, elementId, currentTime);
+	}, [selectedElements, tracks, currentTime, splitElement]);
 
-  const handleSplitAndKeepLeftCallback = useCallback(() => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element");
-      return;
-    }
+	const handleSplitAndKeepLeftCallback = useCallback(() => {
+		if (selectedElements.length !== 1) {
+			toast.error("Select exactly one element");
+			return;
+		}
 
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    const element = track?.elements.find((e) => e.id === elementId);
+		const { trackId, elementId } = selectedElements[0];
+		const track = tracks.find((t) => t.id === trackId);
+		const element = track?.elements.find((e) => e.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 (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within selected element");
-      return;
-    }
+		if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+			toast.error("Playhead must be within selected element");
+			return;
+		}
 
-    splitAndKeepLeft(trackId, elementId, currentTime);
-  }, [selectedElements, tracks, currentTime, splitAndKeepLeft]);
+		splitAndKeepLeft(trackId, elementId, currentTime);
+	}, [selectedElements, tracks, currentTime, splitAndKeepLeft]);
 
-  const handleSplitAndKeepRightCallback = useCallback(() => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element");
-      return;
-    }
+	const handleSplitAndKeepRightCallback = useCallback(() => {
+		if (selectedElements.length !== 1) {
+			toast.error("Select exactly one element");
+			return;
+		}
 
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
-    const element = track?.elements.find((e) => e.id === elementId);
+		const { trackId, elementId } = selectedElements[0];
+		const track = tracks.find((t) => t.id === trackId);
+		const element = track?.elements.find((e) => e.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 (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within selected element");
-      return;
-    }
+		if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+			toast.error("Playhead must be within selected element");
+			return;
+		}
 
-    splitAndKeepRight(trackId, elementId, currentTime);
-  }, [selectedElements, tracks, currentTime, splitAndKeepRight]);
+		splitAndKeepRight(trackId, elementId, currentTime);
+	}, [selectedElements, tracks, currentTime, splitAndKeepRight]);
 
-  const handleSeparateAudioCallback = useCallback(() => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one media element to separate audio");
-      return;
-    }
+	const handleSeparateAudioCallback = useCallback(() => {
+		if (selectedElements.length !== 1) {
+			toast.error("Select exactly one media element to separate audio");
+			return;
+		}
 
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t) => t.id === trackId);
+		const { trackId, elementId } = selectedElements[0];
+		const track = tracks.find((t) => t.id === trackId);
 
-    if (!track || track.type !== "media") {
-      toast.error("Select a media element to separate audio");
-      return;
-    }
+		if (!track || track.type !== "media") {
+			toast.error("Select a media element to separate audio");
+			return;
+		}
 
-    separateAudio(trackId, elementId);
-  }, [selectedElements, tracks, separateAudio]);
+		separateAudio(trackId, elementId);
+	}, [selectedElements, tracks, separateAudio]);
 };
diff --git a/apps/web/src/hooks/use-selection-box.ts b/apps/web/src/hooks/use-selection-box.ts
index c40617c1..0abf8707 100644
--- a/apps/web/src/hooks/use-selection-box.ts
+++ b/apps/web/src/hooks/use-selection-box.ts
@@ -1,199 +1,199 @@
-import { useState, useEffect, useCallback } from "react";

-

-interface UseSelectionBoxProps {

-  containerRef: React.RefObject<HTMLElement>;

-  playheadRef?: React.RefObject<HTMLElement>;

-  onSelectionComplete: (

-    elements: { trackId: string; elementId: string }[]

-  ) => void;

-  isEnabled?: boolean;

-}

-

-interface SelectionBoxState {

-  startPos: { x: number; y: number };

-  currentPos: { x: number; y: number };

-  isActive: boolean;

-}

-

-export function useSelectionBox({

-  containerRef,

-  playheadRef,

-  onSelectionComplete,

-  isEnabled = true,

-}: UseSelectionBoxProps) {

-  const [selectionBox, setSelectionBox] = useState<SelectionBoxState | null>(

-    null

-  );

-  const [justFinishedSelecting, setJustFinishedSelecting] = useState(false);

-

-  // Mouse down handler to start selection

-  const handleMouseDown = useCallback(

-    (e: React.MouseEvent) => {

-      if (!isEnabled) return;

-

-      // Only start selection on empty space clicks

-      if ((e.target as HTMLElement).closest(".timeline-element")) {

-        return;

-      }

-      if (playheadRef?.current?.contains(e.target as Node)) {

-        return;

-      }

-      if ((e.target as HTMLElement).closest("[data-track-labels]")) {

-        return;

-      }

-      // Don't start selection when clicking in the ruler area - this interferes with playhead dragging

-      if ((e.target as HTMLElement).closest("[data-ruler-area]")) {

-        return;

-      }

-

-      setSelectionBox({

-        startPos: { x: e.clientX, y: e.clientY },

-        currentPos: { x: e.clientX, y: e.clientY },

-        isActive: false, // Will become active when mouse moves

-      });

-    },

-    [isEnabled, playheadRef]

-  );

-

-  // Function to select elements within the selection box

-  const selectElementsInBox = useCallback(

-    (startPos: { x: number; y: number }, endPos: { x: number; y: number }) => {

-      if (!containerRef.current) return;

-

-      const container = containerRef.current;

-      const containerRect = container.getBoundingClientRect();

-

-      // Calculate selection rectangle in container coordinates

-      const startX = startPos.x - containerRect.left;

-      const startY = startPos.y - containerRect.top;

-      const endX = endPos.x - containerRect.left;

-      const endY = endPos.y - containerRect.top;

-

-      const selectionRect = {

-        left: Math.min(startX, endX),

-        top: Math.min(startY, endY),

-        right: Math.max(startX, endX),

-        bottom: Math.max(startY, endY),

-      };

-

-      // Find all timeline elements within the selection rectangle

-      const timelineElements = container.querySelectorAll(".timeline-element");

-

-      const selectedElements: { trackId: string; elementId: string }[] = [];

-

-      timelineElements.forEach((element) => {

-        const elementRect = element.getBoundingClientRect();

-        // Use absolute coordinates for more accurate intersection detection

-        const elementAbsolute = {

-          left: elementRect.left,

-          top: elementRect.top,

-          right: elementRect.right,

-          bottom: elementRect.bottom,

-        };

-

-        const selectionAbsolute = {

-          left: startPos.x,

-          top: startPos.y,

-          right: endPos.x,

-          bottom: endPos.y,

-        };

-

-        // Normalize selection rectangle (handle dragging in any direction)

-        const normalizedSelection = {

-          left: Math.min(selectionAbsolute.left, selectionAbsolute.right),

-          top: Math.min(selectionAbsolute.top, selectionAbsolute.bottom),

-          right: Math.max(selectionAbsolute.left, selectionAbsolute.right),

-          bottom: Math.max(selectionAbsolute.top, selectionAbsolute.bottom),

-        };

-

-        const elementId = element.getAttribute("data-element-id");

-        const trackId = element.getAttribute("data-track-id");

-

-        // Check if element intersects with selection rectangle (any overlap)

-        // Using absolute coordinates for more precise detection

-        const intersects = !(

-          elementAbsolute.right < normalizedSelection.left ||

-          elementAbsolute.left > normalizedSelection.right ||

-          elementAbsolute.bottom < normalizedSelection.top ||

-          elementAbsolute.top > normalizedSelection.bottom

-        );

-

-        if (intersects && elementId && trackId) {

-          selectedElements.push({ trackId, elementId });

-        }

-      });

-

-      // Always call the callback - with elements or empty array to clear selection

-      console.log(

-        JSON.stringify({ selectElementsInBox: selectedElements.length })

-      );

-      onSelectionComplete(selectedElements);

-    },

-    [containerRef, onSelectionComplete]

-  );

-

-  // Effect to track selection box movement

-  useEffect(() => {

-    if (!selectionBox) return;

-

-    const handleMouseMove = (e: MouseEvent) => {

-      const deltaX = Math.abs(e.clientX - selectionBox.startPos.x);

-      const deltaY = Math.abs(e.clientY - selectionBox.startPos.y);

-

-      // Start selection if mouse moved more than 5px

-      const shouldActivate = deltaX > 5 || deltaY > 5;

-

-      const newSelectionBox = {

-        ...selectionBox,

-        currentPos: { x: e.clientX, y: e.clientY },

-        isActive: shouldActivate || selectionBox.isActive,

-      };

-

-      setSelectionBox(newSelectionBox);

-

-      // Real-time visual feedback: update selection as we drag

-      if (newSelectionBox.isActive) {

-        selectElementsInBox(

-          newSelectionBox.startPos,

-          newSelectionBox.currentPos

-        );

-      }

-    };

-

-    const handleMouseUp = () => {

-      console.log(

-        JSON.stringify({ mouseUp: { wasActive: selectionBox?.isActive } })

-      );

-

-      // If we had an active selection, mark that we just finished selecting

-      if (selectionBox?.isActive) {

-        console.log(JSON.stringify({ settingJustFinishedSelecting: true }));

-        setJustFinishedSelecting(true);

-        // Clear the flag after a short delay to allow click events to check it

-        setTimeout(() => {

-          console.log(JSON.stringify({ clearingJustFinishedSelecting: true }));

-          setJustFinishedSelecting(false);

-        }, 50);

-      }

-

-      // Don't call selectElementsInBox again - real-time selection already handled it

-      // Just clean up the selection box visual

-      setSelectionBox(null);

-    };

-

-    window.addEventListener("mousemove", handleMouseMove);

-    window.addEventListener("mouseup", handleMouseUp);

-

-    return () => {

-      window.removeEventListener("mousemove", handleMouseMove);

-      window.removeEventListener("mouseup", handleMouseUp);

-    };

-  }, [selectionBox, selectElementsInBox]);

-

-  return {

-    selectionBox,

-    handleMouseDown,

-    isSelecting: selectionBox?.isActive || false,

-    justFinishedSelecting,

-  };

-}

+import { useState, useEffect, useCallback } from "react";
+
+interface UseSelectionBoxProps {
+	containerRef: React.RefObject<HTMLElement>;
+	playheadRef?: React.RefObject<HTMLElement>;
+	onSelectionComplete: (
+		elements: { trackId: string; elementId: string }[],
+	) => void;
+	isEnabled?: boolean;
+}
+
+interface SelectionBoxState {
+	startPos: { x: number; y: number };
+	currentPos: { x: number; y: number };
+	isActive: boolean;
+}
+
+export function useSelectionBox({
+	containerRef,
+	playheadRef,
+	onSelectionComplete,
+	isEnabled = true,
+}: UseSelectionBoxProps) {
+	const [selectionBox, setSelectionBox] = useState<SelectionBoxState | null>(
+		null,
+	);
+	const [justFinishedSelecting, setJustFinishedSelecting] = useState(false);
+
+	// Mouse down handler to start selection
+	const handleMouseDown = useCallback(
+		(e: React.MouseEvent) => {
+			if (!isEnabled) return;
+
+			// Only start selection on empty space clicks
+			if ((e.target as HTMLElement).closest(".timeline-element")) {
+				return;
+			}
+			if (playheadRef?.current?.contains(e.target as Node)) {
+				return;
+			}
+			if ((e.target as HTMLElement).closest("[data-track-labels]")) {
+				return;
+			}
+			// Don't start selection when clicking in the ruler area - this interferes with playhead dragging
+			if ((e.target as HTMLElement).closest("[data-ruler-area]")) {
+				return;
+			}
+
+			setSelectionBox({
+				startPos: { x: e.clientX, y: e.clientY },
+				currentPos: { x: e.clientX, y: e.clientY },
+				isActive: false, // Will become active when mouse moves
+			});
+		},
+		[isEnabled, playheadRef],
+	);
+
+	// Function to select elements within the selection box
+	const selectElementsInBox = useCallback(
+		(startPos: { x: number; y: number }, endPos: { x: number; y: number }) => {
+			if (!containerRef.current) return;
+
+			const container = containerRef.current;
+			const containerRect = container.getBoundingClientRect();
+
+			// Calculate selection rectangle in container coordinates
+			const startX = startPos.x - containerRect.left;
+			const startY = startPos.y - containerRect.top;
+			const endX = endPos.x - containerRect.left;
+			const endY = endPos.y - containerRect.top;
+
+			const selectionRect = {
+				left: Math.min(startX, endX),
+				top: Math.min(startY, endY),
+				right: Math.max(startX, endX),
+				bottom: Math.max(startY, endY),
+			};
+
+			// Find all timeline elements within the selection rectangle
+			const timelineElements = container.querySelectorAll(".timeline-element");
+
+			const selectedElements: { trackId: string; elementId: string }[] = [];
+
+			timelineElements.forEach((element) => {
+				const elementRect = element.getBoundingClientRect();
+				// Use absolute coordinates for more accurate intersection detection
+				const elementAbsolute = {
+					left: elementRect.left,
+					top: elementRect.top,
+					right: elementRect.right,
+					bottom: elementRect.bottom,
+				};
+
+				const selectionAbsolute = {
+					left: startPos.x,
+					top: startPos.y,
+					right: endPos.x,
+					bottom: endPos.y,
+				};
+
+				// Normalize selection rectangle (handle dragging in any direction)
+				const normalizedSelection = {
+					left: Math.min(selectionAbsolute.left, selectionAbsolute.right),
+					top: Math.min(selectionAbsolute.top, selectionAbsolute.bottom),
+					right: Math.max(selectionAbsolute.left, selectionAbsolute.right),
+					bottom: Math.max(selectionAbsolute.top, selectionAbsolute.bottom),
+				};
+
+				const elementId = element.getAttribute("data-element-id");
+				const trackId = element.getAttribute("data-track-id");
+
+				// Check if element intersects with selection rectangle (any overlap)
+				// Using absolute coordinates for more precise detection
+				const intersects = !(
+					elementAbsolute.right < normalizedSelection.left ||
+					elementAbsolute.left > normalizedSelection.right ||
+					elementAbsolute.bottom < normalizedSelection.top ||
+					elementAbsolute.top > normalizedSelection.bottom
+				);
+
+				if (intersects && elementId && trackId) {
+					selectedElements.push({ trackId, elementId });
+				}
+			});
+
+			// Always call the callback - with elements or empty array to clear selection
+			console.log(
+				JSON.stringify({ selectElementsInBox: selectedElements.length }),
+			);
+			onSelectionComplete(selectedElements);
+		},
+		[containerRef, onSelectionComplete],
+	);
+
+	// Effect to track selection box movement
+	useEffect(() => {
+		if (!selectionBox) return;
+
+		const handleMouseMove = (e: MouseEvent) => {
+			const deltaX = Math.abs(e.clientX - selectionBox.startPos.x);
+			const deltaY = Math.abs(e.clientY - selectionBox.startPos.y);
+
+			// Start selection if mouse moved more than 5px
+			const shouldActivate = deltaX > 5 || deltaY > 5;
+
+			const newSelectionBox = {
+				...selectionBox,
+				currentPos: { x: e.clientX, y: e.clientY },
+				isActive: shouldActivate || selectionBox.isActive,
+			};
+
+			setSelectionBox(newSelectionBox);
+
+			// Real-time visual feedback: update selection as we drag
+			if (newSelectionBox.isActive) {
+				selectElementsInBox(
+					newSelectionBox.startPos,
+					newSelectionBox.currentPos,
+				);
+			}
+		};
+
+		const handleMouseUp = () => {
+			console.log(
+				JSON.stringify({ mouseUp: { wasActive: selectionBox?.isActive } }),
+			);
+
+			// If we had an active selection, mark that we just finished selecting
+			if (selectionBox?.isActive) {
+				console.log(JSON.stringify({ settingJustFinishedSelecting: true }));
+				setJustFinishedSelecting(true);
+				// Clear the flag after a short delay to allow click events to check it
+				setTimeout(() => {
+					console.log(JSON.stringify({ clearingJustFinishedSelecting: true }));
+					setJustFinishedSelecting(false);
+				}, 50);
+			}
+
+			// Don't call selectElementsInBox again - real-time selection already handled it
+			// Just clean up the selection box visual
+			setSelectionBox(null);
+		};
+
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [selectionBox, selectElementsInBox]);
+
+	return {
+		selectionBox,
+		handleMouseDown,
+		isSelecting: selectionBox?.isActive || false,
+		justFinishedSelecting,
+	};
+}
diff --git a/apps/web/src/hooks/use-timeline-element-resize.ts b/apps/web/src/hooks/use-timeline-element-resize.ts
index 0e409977..f7737346 100644
--- a/apps/web/src/hooks/use-timeline-element-resize.ts
+++ b/apps/web/src/hooks/use-timeline-element-resize.ts
@@ -3,162 +3,162 @@ import { ResizeState, TimelineElement, TimelineTrack } from "@/types/timeline";
 import { useMediaStore } from "@/stores/media-store";
 
 interface UseTimelineElementResizeProps {
-  element: TimelineElement;
-  track: TimelineTrack;
-  zoomLevel: number;
-  onUpdateTrim: (
-    trackId: string,
-    elementId: string,
-    trimStart: number,
-    trimEnd: number
-  ) => void;
-  onUpdateDuration: (
-    trackId: string,
-    elementId: string,
-    duration: number
-  ) => void;
+	element: TimelineElement;
+	track: TimelineTrack;
+	zoomLevel: number;
+	onUpdateTrim: (
+		trackId: string,
+		elementId: string,
+		trimStart: number,
+		trimEnd: number,
+	) => void;
+	onUpdateDuration: (
+		trackId: string,
+		elementId: string,
+		duration: number,
+	) => void;
 }
 
 export function useTimelineElementResize({
-  element,
-  track,
-  zoomLevel,
-  onUpdateTrim,
-  onUpdateDuration,
+	element,
+	track,
+	zoomLevel,
+	onUpdateTrim,
+	onUpdateDuration,
 }: UseTimelineElementResizeProps) {
-  const [resizing, setResizing] = useState<ResizeState | null>(null);
-  const { mediaItems } = useMediaStore();
+	const [resizing, setResizing] = useState<ResizeState | null>(null);
+	const { mediaItems } = useMediaStore();
 
-  // Set up document-level mouse listeners during resize (like proper drag behavior)
-  useEffect(() => {
-    if (!resizing) return;
+	// Set up document-level mouse listeners during resize (like proper drag behavior)
+	useEffect(() => {
+		if (!resizing) return;
 
-    const handleDocumentMouseMove = (e: MouseEvent) => {
-      updateTrimFromMouseMove({ clientX: e.clientX });
-    };
+		const handleDocumentMouseMove = (e: MouseEvent) => {
+			updateTrimFromMouseMove({ clientX: e.clientX });
+		};
 
-    const handleDocumentMouseUp = () => {
-      handleResizeEnd();
-    };
+		const handleDocumentMouseUp = () => {
+			handleResizeEnd();
+		};
 
-    // Add document-level listeners for proper drag behavior
-    document.addEventListener("mousemove", handleDocumentMouseMove);
-    document.addEventListener("mouseup", handleDocumentMouseUp);
+		// Add document-level listeners for proper drag behavior
+		document.addEventListener("mousemove", handleDocumentMouseMove);
+		document.addEventListener("mouseup", handleDocumentMouseUp);
 
-    return () => {
-      document.removeEventListener("mousemove", handleDocumentMouseMove);
-      document.removeEventListener("mouseup", handleDocumentMouseUp);
-    };
-  }, [resizing]); // Re-run when resizing state changes
+		return () => {
+			document.removeEventListener("mousemove", handleDocumentMouseMove);
+			document.removeEventListener("mouseup", handleDocumentMouseUp);
+		};
+	}, [resizing]); // Re-run when resizing state changes
 
-  const handleResizeStart = (
-    e: React.MouseEvent,
-    elementId: string,
-    side: "left" | "right"
-  ) => {
-    e.stopPropagation();
-    e.preventDefault();
+	const handleResizeStart = (
+		e: React.MouseEvent,
+		elementId: string,
+		side: "left" | "right",
+	) => {
+		e.stopPropagation();
+		e.preventDefault();
 
-    setResizing({
-      elementId,
-      side,
-      startX: e.clientX,
-      initialTrimStart: element.trimStart,
-      initialTrimEnd: element.trimEnd,
-    });
-  };
+		setResizing({
+			elementId,
+			side,
+			startX: e.clientX,
+			initialTrimStart: element.trimStart,
+			initialTrimEnd: element.trimEnd,
+		});
+	};
 
-  const canExtendElementDuration = () => {
-    // Text elements can always be extended
-    if (element.type === "text") {
-      return true;
-    }
+	const canExtendElementDuration = () => {
+		// Text elements can always be extended
+		if (element.type === "text") {
+			return true;
+		}
 
-    // Media elements - check the media type
-    if (element.type === "media") {
-      const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
-      if (!mediaItem) return false;
+		// Media elements - check the media type
+		if (element.type === "media") {
+			const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
+			if (!mediaItem) return false;
 
-      // Images can be extended (static content)
-      if (mediaItem.type === "image") {
-        return true;
-      }
+			// Images can be extended (static content)
+			if (mediaItem.type === "image") {
+				return true;
+			}
 
-      // Videos and audio cannot be extended beyond their natural duration
-      // (no additional content exists)
-      return false;
-    }
+			// Videos and audio cannot be extended beyond their natural duration
+			// (no additional content exists)
+			return false;
+		}
 
-    return false;
-  };
+		return false;
+	};
 
-  const updateTrimFromMouseMove = (e: { clientX: number }) => {
-    if (!resizing) return;
+	const updateTrimFromMouseMove = (e: { clientX: number }) => {
+		if (!resizing) return;
 
-    const deltaX = e.clientX - resizing.startX;
-    // Reasonable sensitivity for resize operations - similar to timeline scale
-    const deltaTime = deltaX / (50 * zoomLevel);
+		const deltaX = e.clientX - resizing.startX;
+		// Reasonable sensitivity for resize operations - similar to timeline scale
+		const deltaTime = deltaX / (50 * zoomLevel);
 
-    if (resizing.side === "left") {
-      // Left resize - only trim within original duration
-      const maxAllowed = element.duration - resizing.initialTrimEnd - 0.1;
-      const calculated = resizing.initialTrimStart + deltaTime;
-      const newTrimStart = Math.max(0, Math.min(maxAllowed, calculated));
+		if (resizing.side === "left") {
+			// Left resize - only trim within original duration
+			const maxAllowed = element.duration - resizing.initialTrimEnd - 0.1;
+			const calculated = resizing.initialTrimStart + deltaTime;
+			const newTrimStart = Math.max(0, Math.min(maxAllowed, calculated));
 
-      onUpdateTrim(track.id, element.id, newTrimStart, resizing.initialTrimEnd);
-    } else {
-      // Right resize - can extend duration for supported element types
-      const calculated = resizing.initialTrimEnd - deltaTime;
+			onUpdateTrim(track.id, element.id, newTrimStart, resizing.initialTrimEnd);
+		} else {
+			// Right resize - can extend duration for supported element types
+			const calculated = resizing.initialTrimEnd - deltaTime;
 
-      if (calculated < 0) {
-        // We're trying to extend beyond original duration
-        if (canExtendElementDuration()) {
-          // Extend the duration instead of reducing trimEnd further
-          const extensionNeeded = Math.abs(calculated);
-          const newDuration = element.duration + extensionNeeded;
-          const newTrimEnd = 0; // Reset trimEnd to 0 since we're extending
+			if (calculated < 0) {
+				// We're trying to extend beyond original duration
+				if (canExtendElementDuration()) {
+					// Extend the duration instead of reducing trimEnd further
+					const extensionNeeded = Math.abs(calculated);
+					const newDuration = element.duration + extensionNeeded;
+					const newTrimEnd = 0; // Reset trimEnd to 0 since we're extending
 
-          // Update duration first, then trim
-          onUpdateDuration(track.id, element.id, newDuration);
-          onUpdateTrim(
-            track.id,
-            element.id,
-            resizing.initialTrimStart,
-            newTrimEnd
-          );
-        } else {
-          // Can't extend - just set trimEnd to 0 (maximum possible extension)
-          onUpdateTrim(track.id, element.id, resizing.initialTrimStart, 0);
-        }
-      } else {
-        // Normal trimming within original duration
-        const maxTrimEnd = element.duration - resizing.initialTrimStart - 0.1; // Leave at least 0.1s visible
-        const newTrimEnd = Math.max(0, Math.min(maxTrimEnd, calculated));
+					// Update duration first, then trim
+					onUpdateDuration(track.id, element.id, newDuration);
+					onUpdateTrim(
+						track.id,
+						element.id,
+						resizing.initialTrimStart,
+						newTrimEnd,
+					);
+				} else {
+					// Can't extend - just set trimEnd to 0 (maximum possible extension)
+					onUpdateTrim(track.id, element.id, resizing.initialTrimStart, 0);
+				}
+			} else {
+				// Normal trimming within original duration
+				const maxTrimEnd = element.duration - resizing.initialTrimStart - 0.1; // Leave at least 0.1s visible
+				const newTrimEnd = Math.max(0, Math.min(maxTrimEnd, calculated));
 
-        onUpdateTrim(
-          track.id,
-          element.id,
-          resizing.initialTrimStart,
-          newTrimEnd
-        );
-      }
-    }
-  };
+				onUpdateTrim(
+					track.id,
+					element.id,
+					resizing.initialTrimStart,
+					newTrimEnd,
+				);
+			}
+		}
+	};
 
-  const handleResizeMove = (e: React.MouseEvent) => {
-    updateTrimFromMouseMove(e);
-  };
+	const handleResizeMove = (e: React.MouseEvent) => {
+		updateTrimFromMouseMove(e);
+	};
 
-  const handleResizeEnd = () => {
-    setResizing(null);
-  };
+	const handleResizeEnd = () => {
+		setResizing(null);
+	};
 
-  return {
-    resizing,
-    isResizing: resizing !== null,
-    handleResizeStart,
-    // Return empty handlers since we use document listeners now
-    handleResizeMove: () => {}, // Not used anymore
-    handleResizeEnd: () => {}, // Not used anymore
-  };
+	return {
+		resizing,
+		isResizing: resizing !== null,
+		handleResizeStart,
+		// Return empty handlers since we use document listeners now
+		handleResizeMove: () => {}, // Not used anymore
+		handleResizeEnd: () => {}, // Not used anymore
+	};
 }
diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts
index 9eb06485..73dca7a5 100644
--- a/apps/web/src/hooks/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/use-timeline-playhead.ts
@@ -1,125 +1,125 @@
-import { snapTimeToFrame } from "@/constants/timeline-constants";

-import { useProjectStore } from "@/stores/project-store";

-import { useRef, useState, useCallback } from "react";

-

-interface UseTimelinePlayheadProps {

-  currentTime: number;

-  duration: number;

-  zoomLevel: number;

-  seek: (time: number) => void;

-  rulerRef: React.RefObject<HTMLDivElement>;

-  rulerScrollRef: React.RefObject<HTMLDivElement>;

-}

-

-/**

- * useTimelinePlayhead

- *

- * Custom hook to manage playhead (scrubbing) logic for a timeline editor.

- * Handles mouse interaction for timeline ruler, calculates time from mouse,

- * and enables smooth scrubbing without unnecessary re-renders.

- */

-export function useTimelinePlayhead({

-  currentTime,

-  duration,

-  zoomLevel,

-  seek,

-  rulerRef,

-  rulerScrollRef,

-}: UseTimelinePlayheadProps) {

-  // Get current project info (especially FPS) from global store

-  const { activeProject } = useProjectStore();

-

-  // Ref to track if currently scrubbing

-  const isScrubbingRef = useRef(false);

-

-  // Ref to hold the playhead time while scrubbing (does not trigger re-render)

-  const scrubTimeRef = useRef<number | null>(null);

-

-  // State to force re-render when scrubbing ends

-  const [_, forceRerender] = useState(0);

-

-  /**

-   * Determines the actual playhead position:

-   * - If scrubbing, use the value in scrubTimeRef

-   * - Otherwise, use the currentTime (controlled by external state)

-   */

-  const playheadPosition =

-    isScrubbingRef.current && scrubTimeRef.current !== null

-      ? scrubTimeRef.current

-      : currentTime;

-

-  /**

-   * Calculate timeline time (in seconds) based on mouse X position.

-   * - Gets bounding rect of the ruler

-   * - Adjusts for scroll position if ruler is scrollable

-   * - Converts X pixel offset to seconds using current zoom level

-   * - Snaps to nearest frame using FPS

-   */

-  const getTimeFromMouse = useCallback(

-    (e: MouseEvent | React.MouseEvent) => {

-      const ruler = rulerRef.current;

-      const scrollArea = rulerScrollRef.current?.querySelector(

-        "[data-radix-scroll-area-viewport]"

-      ) as HTMLElement;

-

-      if (!ruler || !scrollArea) return 0;

-

-      const rect = ruler.getBoundingClientRect();

-      const scrollLeft = scrollArea.scrollLeft;

-      const x = e.clientX - rect.left + scrollLeft;

-

-      // Calculate how many pixels represent one second, depending on zoom

-      const pixelsPerSecond = 50 * zoomLevel;

-      const rawTime = Math.max(0, Math.min(duration, x / pixelsPerSecond));

-      const time = snapTimeToFrame(rawTime, activeProject?.fps || 30);

-      return time;

-    },

-    [rulerRef, rulerScrollRef, duration, zoomLevel, activeProject?.fps]

-  );

-

-  /**

-   * Handle mouse down event on the ruler:

-   * - Starts scrubbing and updates playhead immediately

-   * - Registers mousemove/mouseup events to allow scrubbing

-   * - Updates time as mouse moves and seeks to new time

-   * - Cleans up listeners and triggers re-render when scrubbing ends

-   */

-  const handleRulerMouseDown = useCallback(

-    (e: React.MouseEvent) => {

-      if (e.button !== 0) return;

-      e.preventDefault();

-      const time = getTimeFromMouse(e);

-

-      isScrubbingRef.current = true;

-      scrubTimeRef.current = time;

-      seek(time);

-

-      // Mouse move handler: update playhead and seek to new time

-      const onMouseMove = (e: MouseEvent) => {

-        const t = getTimeFromMouse(e);

-        if (t !== scrubTimeRef.current) {

-          scrubTimeRef.current = t;

-          seek(t);

-        }

-      };

-

-      // Mouse up handler: stop scrubbing, cleanup, and force re-render

-      const onMouseUp = () => {

-        isScrubbingRef.current = false;

-        window.removeEventListener("mousemove", onMouseMove);

-        window.removeEventListener("mouseup", onMouseUp);

-        forceRerender((v) => v + 1);

-      };

-

-      // Attach listeners to window for drag outside the ruler area

-      window.addEventListener("mousemove", onMouseMove);

-      window.addEventListener("mouseup", onMouseUp);

-    },

-    [getTimeFromMouse, seek]

-  );

-

-  return {

-    playheadPosition, // Current playhead position (real-time while scrubbing)

-    handleRulerMouseDown, // Attach to the ruler's onMouseDown

-  };

-}

+import { snapTimeToFrame } from "@/constants/timeline-constants";
+import { useProjectStore } from "@/stores/project-store";
+import { useRef, useState, useCallback } from "react";
+
+interface UseTimelinePlayheadProps {
+	currentTime: number;
+	duration: number;
+	zoomLevel: number;
+	seek: (time: number) => void;
+	rulerRef: React.RefObject<HTMLDivElement>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * useTimelinePlayhead
+ *
+ * Custom hook to manage playhead (scrubbing) logic for a timeline editor.
+ * Handles mouse interaction for timeline ruler, calculates time from mouse,
+ * and enables smooth scrubbing without unnecessary re-renders.
+ */
+export function useTimelinePlayhead({
+	currentTime,
+	duration,
+	zoomLevel,
+	seek,
+	rulerRef,
+	rulerScrollRef,
+}: UseTimelinePlayheadProps) {
+	// Get current project info (especially FPS) from global store
+	const { activeProject } = useProjectStore();
+
+	// Ref to track if currently scrubbing
+	const isScrubbingRef = useRef(false);
+
+	// Ref to hold the playhead time while scrubbing (does not trigger re-render)
+	const scrubTimeRef = useRef<number | null>(null);
+
+	// State to force re-render when scrubbing ends
+	const [_, forceRerender] = useState(0);
+
+	/**
+	 * Determines the actual playhead position:
+	 * - If scrubbing, use the value in scrubTimeRef
+	 * - Otherwise, use the currentTime (controlled by external state)
+	 */
+	const playheadPosition =
+		isScrubbingRef.current && scrubTimeRef.current !== null
+			? scrubTimeRef.current
+			: currentTime;
+
+	/**
+	 * Calculate timeline time (in seconds) based on mouse X position.
+	 * - Gets bounding rect of the ruler
+	 * - Adjusts for scroll position if ruler is scrollable
+	 * - Converts X pixel offset to seconds using current zoom level
+	 * - Snaps to nearest frame using FPS
+	 */
+	const getTimeFromMouse = useCallback(
+		(e: MouseEvent | React.MouseEvent) => {
+			const ruler = rulerRef.current;
+			const scrollArea = rulerScrollRef.current?.querySelector(
+				"[data-radix-scroll-area-viewport]",
+			) as HTMLElement;
+
+			if (!ruler || !scrollArea) return 0;
+
+			const rect = ruler.getBoundingClientRect();
+			const scrollLeft = scrollArea.scrollLeft;
+			const x = e.clientX - rect.left + scrollLeft;
+
+			// Calculate how many pixels represent one second, depending on zoom
+			const pixelsPerSecond = 50 * zoomLevel;
+			const rawTime = Math.max(0, Math.min(duration, x / pixelsPerSecond));
+			const time = snapTimeToFrame(rawTime, activeProject?.fps || 30);
+			return time;
+		},
+		[rulerRef, rulerScrollRef, duration, zoomLevel, activeProject?.fps],
+	);
+
+	/**
+	 * Handle mouse down event on the ruler:
+	 * - Starts scrubbing and updates playhead immediately
+	 * - Registers mousemove/mouseup events to allow scrubbing
+	 * - Updates time as mouse moves and seeks to new time
+	 * - Cleans up listeners and triggers re-render when scrubbing ends
+	 */
+	const handleRulerMouseDown = useCallback(
+		(e: React.MouseEvent) => {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			const time = getTimeFromMouse(e);
+
+			isScrubbingRef.current = true;
+			scrubTimeRef.current = time;
+			seek(time);
+
+			// Mouse move handler: update playhead and seek to new time
+			const onMouseMove = (e: MouseEvent) => {
+				const t = getTimeFromMouse(e);
+				if (t !== scrubTimeRef.current) {
+					scrubTimeRef.current = t;
+					seek(t);
+				}
+			};
+
+			// Mouse up handler: stop scrubbing, cleanup, and force re-render
+			const onMouseUp = () => {
+				isScrubbingRef.current = false;
+				window.removeEventListener("mousemove", onMouseMove);
+				window.removeEventListener("mouseup", onMouseUp);
+				forceRerender((v) => v + 1);
+			};
+
+			// Attach listeners to window for drag outside the ruler area
+			window.addEventListener("mousemove", onMouseMove);
+			window.addEventListener("mouseup", onMouseUp);
+		},
+		[getTimeFromMouse, seek],
+	);
+
+	return {
+		playheadPosition, // Current playhead position (real-time while scrubbing)
+		handleRulerMouseDown, // Attach to the ruler's onMouseDown
+	};
+}
diff --git a/apps/web/src/hooks/use-timeline-snapping.ts b/apps/web/src/hooks/use-timeline-snapping.ts
index f7f96392..e51f6a22 100644
--- a/apps/web/src/hooks/use-timeline-snapping.ts
+++ b/apps/web/src/hooks/use-timeline-snapping.ts
@@ -3,176 +3,176 @@ import { TimelineTrack } from "@/types/timeline";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 export interface SnapPoint {
-  time: number;
-  type: "element-start" | "element-end" | "playhead";
-  elementId?: string;
-  trackId?: string;
+	time: number;
+	type: "element-start" | "element-end" | "playhead";
+	elementId?: string;
+	trackId?: string;
 }
 
 export interface SnapResult {
-  snappedTime: number;
-  snapPoint: SnapPoint | null;
-  snapDistance: number;
+	snappedTime: number;
+	snapPoint: SnapPoint | null;
+	snapDistance: number;
 }
 
 export interface UseTimelineSnappingOptions {
-  snapThreshold?: number; // Distance in pixels to trigger snapping
-  enableElementSnapping?: boolean;
-  enablePlayheadSnapping?: boolean;
+	snapThreshold?: number; // Distance in pixels to trigger snapping
+	enableElementSnapping?: boolean;
+	enablePlayheadSnapping?: boolean;
 }
 
 export function useTimelineSnapping({
-  snapThreshold = 10,
-  enableElementSnapping = true,
-  enablePlayheadSnapping = true,
+	snapThreshold = 10,
+	enableElementSnapping = true,
+	enablePlayheadSnapping = true,
 }: UseTimelineSnappingOptions = {}) {
-  const findSnapPoints = useCallback(
-    (
-      tracks: TimelineTrack[],
-      currentTime: number,
-      playheadTime: number,
-      zoomLevel: number,
-      excludeElementId?: string
-    ): SnapPoint[] => {
-      const snapPoints: SnapPoint[] = [];
+	const findSnapPoints = useCallback(
+		(
+			tracks: TimelineTrack[],
+			currentTime: number,
+			playheadTime: number,
+			zoomLevel: number,
+			excludeElementId?: string,
+		): SnapPoint[] => {
+			const snapPoints: SnapPoint[] = [];
 
-      // Add element snap points
-      if (enableElementSnapping) {
-        tracks.forEach((track) => {
-          track.elements.forEach((element) => {
-            // Skip the element being dragged
-            if (element.id === excludeElementId) return;
+			// Add element snap points
+			if (enableElementSnapping) {
+				tracks.forEach((track) => {
+					track.elements.forEach((element) => {
+						// Skip the element being dragged
+						if (element.id === excludeElementId) return;
 
-            const elementStart = element.startTime;
-            const elementEnd =
-              element.startTime +
-              (element.duration - element.trimStart - element.trimEnd);
+						const elementStart = element.startTime;
+						const elementEnd =
+							element.startTime +
+							(element.duration - element.trimStart - element.trimEnd);
 
-            snapPoints.push(
-              {
-                time: elementStart,
-                type: "element-start",
-                elementId: element.id,
-                trackId: track.id,
-              },
-              {
-                time: elementEnd,
-                type: "element-end",
-                elementId: element.id,
-                trackId: track.id,
-              }
-            );
-          });
-        });
-      }
+						snapPoints.push(
+							{
+								time: elementStart,
+								type: "element-start",
+								elementId: element.id,
+								trackId: track.id,
+							},
+							{
+								time: elementEnd,
+								type: "element-end",
+								elementId: element.id,
+								trackId: track.id,
+							},
+						);
+					});
+				});
+			}
 
-      // Add playhead snap point
-      if (enablePlayheadSnapping) {
-        snapPoints.push({
-          time: playheadTime,
-          type: "playhead",
-        });
-      }
+			// Add playhead snap point
+			if (enablePlayheadSnapping) {
+				snapPoints.push({
+					time: playheadTime,
+					type: "playhead",
+				});
+			}
 
-      return snapPoints;
-    },
-    [enableElementSnapping, enablePlayheadSnapping]
-  );
+			return snapPoints;
+		},
+		[enableElementSnapping, enablePlayheadSnapping],
+	);
 
-  const snapToNearestPoint = useCallback(
-    (
-      targetTime: number,
-      snapPoints: SnapPoint[],
-      zoomLevel: number
-    ): SnapResult => {
-      const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-      const thresholdInSeconds = snapThreshold / pixelsPerSecond;
+	const snapToNearestPoint = useCallback(
+		(
+			targetTime: number,
+			snapPoints: SnapPoint[],
+			zoomLevel: number,
+		): SnapResult => {
+			const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+			const thresholdInSeconds = snapThreshold / pixelsPerSecond;
 
-      let closestSnapPoint: SnapPoint | null = null;
-      let closestDistance = Infinity;
+			let closestSnapPoint: SnapPoint | null = null;
+			let closestDistance = Infinity;
 
-      snapPoints.forEach((snapPoint) => {
-        const distance = Math.abs(targetTime - snapPoint.time);
-        if (distance < thresholdInSeconds && distance < closestDistance) {
-          closestDistance = distance;
-          closestSnapPoint = snapPoint;
-        }
-      });
+			snapPoints.forEach((snapPoint) => {
+				const distance = Math.abs(targetTime - snapPoint.time);
+				if (distance < thresholdInSeconds && distance < closestDistance) {
+					closestDistance = distance;
+					closestSnapPoint = snapPoint;
+				}
+			});
 
-      return {
-        snappedTime: closestSnapPoint
-          ? (closestSnapPoint as SnapPoint).time
-          : targetTime,
-        snapPoint: closestSnapPoint,
-        snapDistance: closestDistance,
-      };
-    },
-    [snapThreshold]
-  );
+			return {
+				snappedTime: closestSnapPoint
+					? (closestSnapPoint as SnapPoint).time
+					: targetTime,
+				snapPoint: closestSnapPoint,
+				snapDistance: closestDistance,
+			};
+		},
+		[snapThreshold],
+	);
 
-  const snapElementPosition = useCallback(
-    (
-      targetTime: number,
-      tracks: TimelineTrack[],
-      playheadTime: number,
-      zoomLevel: number,
-      excludeElementId?: string
-    ): SnapResult => {
-      const snapPoints = findSnapPoints(
-        tracks,
-        targetTime,
-        playheadTime,
-        zoomLevel,
-        excludeElementId
-      );
+	const snapElementPosition = useCallback(
+		(
+			targetTime: number,
+			tracks: TimelineTrack[],
+			playheadTime: number,
+			zoomLevel: number,
+			excludeElementId?: string,
+		): SnapResult => {
+			const snapPoints = findSnapPoints(
+				tracks,
+				targetTime,
+				playheadTime,
+				zoomLevel,
+				excludeElementId,
+			);
 
-      return snapToNearestPoint(targetTime, snapPoints, zoomLevel);
-    },
-    [findSnapPoints, snapToNearestPoint]
-  );
+			return snapToNearestPoint(targetTime, snapPoints, zoomLevel);
+		},
+		[findSnapPoints, snapToNearestPoint],
+	);
 
-  const snapElementEdge = useCallback(
-    (
-      targetTime: number,
-      elementDuration: number,
-      tracks: TimelineTrack[],
-      playheadTime: number,
-      zoomLevel: number,
-      excludeElementId?: string,
-      snapToStart = true // true for start edge, false for end edge
-    ): SnapResult => {
-      const snapPoints = findSnapPoints(
-        tracks,
-        targetTime,
-        playheadTime,
-        zoomLevel,
-        excludeElementId
-      );
+	const snapElementEdge = useCallback(
+		(
+			targetTime: number,
+			elementDuration: number,
+			tracks: TimelineTrack[],
+			playheadTime: number,
+			zoomLevel: number,
+			excludeElementId?: string,
+			snapToStart = true, // true for start edge, false for end edge
+		): SnapResult => {
+			const snapPoints = findSnapPoints(
+				tracks,
+				targetTime,
+				playheadTime,
+				zoomLevel,
+				excludeElementId,
+			);
 
-      // For end edge snapping, we need to account for element duration
-      const effectiveTargetTime = snapToStart
-        ? targetTime
-        : targetTime + elementDuration;
-      const snapResult = snapToNearestPoint(
-        effectiveTargetTime,
-        snapPoints,
-        zoomLevel
-      );
+			// For end edge snapping, we need to account for element duration
+			const effectiveTargetTime = snapToStart
+				? targetTime
+				: targetTime + elementDuration;
+			const snapResult = snapToNearestPoint(
+				effectiveTargetTime,
+				snapPoints,
+				zoomLevel,
+			);
 
-      // Adjust the snapped time back for end edge
-      if (!snapToStart && snapResult.snapPoint) {
-        snapResult.snappedTime = snapResult.snappedTime - elementDuration;
-      }
+			// Adjust the snapped time back for end edge
+			if (!snapToStart && snapResult.snapPoint) {
+				snapResult.snappedTime = snapResult.snappedTime - elementDuration;
+			}
 
-      return snapResult;
-    },
-    [findSnapPoints, snapToNearestPoint]
-  );
+			return snapResult;
+		},
+		[findSnapPoints, snapToNearestPoint],
+	);
 
-  return {
-    snapElementPosition,
-    snapElementEdge,
-    findSnapPoints,
-    snapToNearestPoint,
-  };
+	return {
+		snapElementPosition,
+		snapElementEdge,
+		findSnapPoints,
+		snapToNearestPoint,
+	};
 }
diff --git a/apps/web/src/hooks/use-timeline-zoom.ts b/apps/web/src/hooks/use-timeline-zoom.ts
index c8780f9a..8da2f718 100644
--- a/apps/web/src/hooks/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/use-timeline-zoom.ts
@@ -1,93 +1,93 @@
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

-import { useState, useCallback, RefObject, useMemo } from "react";

-

-interface UseTimelineZoomProps {

-  containerRef: RefObject<HTMLDivElement>;

-  isInTimeline?: boolean;

-}

-

-interface UseTimelineZoomReturn {

-  zoomLevel: number;

-  zoomStep: number;

-  setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void;

-  handleChangeZoomStep: (zoomStep: number) => void;

-  handleChangeZoomLevel: (zoomStep: number) => void;

-  handleWheel: (e: React.WheelEvent) => void;

-}

-

-/**

- * useTimelineZoom

- *

- * Custom hook to manage zoom logic for a timeline component.

- * Handles zoom state, step calculation, level changes, and mouse wheel zooming (with ctrl/meta).

- */

-export function useTimelineZoom(): UseTimelineZoomReturn {

-  // Current zoom level (1 = default)

-  const [zoomLevel, setZoomLevel] = useState(1);

-

-  /**

-   * Calculate the current zoom step based on the zoom level and a base step constant.

-   * Ensures minimum step is 1 (prevents zero or negative step).

-   */

-  const zoomStep = useMemo(

-    () =>

-      Math.max(1, Math.round(zoomLevel / TIMELINE_CONSTANTS.ZOOM_STEP_BASE)),

-    [zoomLevel]

-  );

-

-  /**

-   * Update the zoom level using a given step.

-   * The zoom level is clamped to a minimum value defined in constants.

-   */

-  const handleChangeZoomStep = useCallback((newStep: number) => {

-    setZoomLevel(

-      Math.max(

-        TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,

-        newStep * TIMELINE_CONSTANTS.ZOOM_STEP_BASE

-      )

-    );

-  }, []);

-

-  /**

-   * Update the zoom level directly.

-   * The new value is clamped between the defined minimum and maximum levels.

-   */

-  const handleChangeZoomLevel = useCallback((newLevel: number) => {

-    setZoomLevel(

-      Math.max(

-        TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,

-        Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, newLevel)

-      )

-    );

-  }, []);

-

-  /**

-   * Handle zooming using mouse wheel + ctrl/meta key (like browser zoom).

-   * Prevents default browser behavior and updates zoom level accordingly.

-   */

-  const handleWheel = useCallback((e: React.WheelEvent) => {

-    if (e.ctrlKey || e.metaKey) {

-      e.preventDefault?.();

-      const delta =

-        e.deltaY > 0

-          ? -TIMELINE_CONSTANTS.ZOOM_STEP_BASE

-          : TIMELINE_CONSTANTS.ZOOM_STEP_BASE;

-      setZoomLevel((prev) =>

-        Math.max(

-          TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,

-          Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, prev + delta)

-        )

-      );

-    }

-  }, []);

-

-  // Return all handlers and state values for use in timeline components

-  return {

-    zoomLevel, // Current zoom level

-    zoomStep, // Current zoom step (calculated from zoomLevel)

-    setZoomLevel, // Directly set the zoom level (accepts value or updater function)

-    handleChangeZoomStep, // Change zoom by step value

-    handleChangeZoomLevel, // Change zoom by level value

-    handleWheel, // Handler for mouse wheel zooming

-  };

-}

+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { useState, useCallback, RefObject, useMemo } from "react";
+
+interface UseTimelineZoomProps {
+	containerRef: RefObject<HTMLDivElement>;
+	isInTimeline?: boolean;
+}
+
+interface UseTimelineZoomReturn {
+	zoomLevel: number;
+	zoomStep: number;
+	setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void;
+	handleChangeZoomStep: (zoomStep: number) => void;
+	handleChangeZoomLevel: (zoomStep: number) => void;
+	handleWheel: (e: React.WheelEvent) => void;
+}
+
+/**
+ * useTimelineZoom
+ *
+ * Custom hook to manage zoom logic for a timeline component.
+ * Handles zoom state, step calculation, level changes, and mouse wheel zooming (with ctrl/meta).
+ */
+export function useTimelineZoom(): UseTimelineZoomReturn {
+	// Current zoom level (1 = default)
+	const [zoomLevel, setZoomLevel] = useState(1);
+
+	/**
+	 * Calculate the current zoom step based on the zoom level and a base step constant.
+	 * Ensures minimum step is 1 (prevents zero or negative step).
+	 */
+	const zoomStep = useMemo(
+		() =>
+			Math.max(1, Math.round(zoomLevel / TIMELINE_CONSTANTS.ZOOM_STEP_BASE)),
+		[zoomLevel],
+	);
+
+	/**
+	 * Update the zoom level using a given step.
+	 * The zoom level is clamped to a minimum value defined in constants.
+	 */
+	const handleChangeZoomStep = useCallback((newStep: number) => {
+		setZoomLevel(
+			Math.max(
+				TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,
+				newStep * TIMELINE_CONSTANTS.ZOOM_STEP_BASE,
+			),
+		);
+	}, []);
+
+	/**
+	 * Update the zoom level directly.
+	 * The new value is clamped between the defined minimum and maximum levels.
+	 */
+	const handleChangeZoomLevel = useCallback((newLevel: number) => {
+		setZoomLevel(
+			Math.max(
+				TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,
+				Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, newLevel),
+			),
+		);
+	}, []);
+
+	/**
+	 * Handle zooming using mouse wheel + ctrl/meta key (like browser zoom).
+	 * Prevents default browser behavior and updates zoom level accordingly.
+	 */
+	const handleWheel = useCallback((e: React.WheelEvent) => {
+		if (e.ctrlKey || e.metaKey) {
+			e.preventDefault?.();
+			const delta =
+				e.deltaY > 0
+					? -TIMELINE_CONSTANTS.ZOOM_STEP_BASE
+					: TIMELINE_CONSTANTS.ZOOM_STEP_BASE;
+			setZoomLevel((prev) =>
+				Math.max(
+					TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,
+					Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, prev + delta),
+				),
+			);
+		}
+	}, []);
+
+	// Return all handlers and state values for use in timeline components
+	return {
+		zoomLevel, // Current zoom level
+		zoomStep, // Current zoom step (calculated from zoomLevel)
+		setZoomLevel, // Directly set the zoom level (accepts value or updater function)
+		handleChangeZoomStep, // Change zoom by step value
+		handleChangeZoomLevel, // Change zoom by level value
+		handleWheel, // Handler for mouse wheel zooming
+	};
+}
diff --git a/apps/web/src/hooks/use-toast.ts b/apps/web/src/hooks/use-toast.ts
index c682cd1f..78cc46e8 100644
--- a/apps/web/src/hooks/use-toast.ts
+++ b/apps/web/src/hooks/use-toast.ts
@@ -9,121 +9,121 @@ const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
+	id: string;
+	title?: React.ReactNode;
+	description?: React.ReactNode;
+	action?: ToastActionElement;
 };
 
 const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
+	ADD_TOAST: "ADD_TOAST",
+	UPDATE_TOAST: "UPDATE_TOAST",
+	DISMISS_TOAST: "DISMISS_TOAST",
+	REMOVE_TOAST: "REMOVE_TOAST",
 } as const;
 
 let count = 0;
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
+	count = (count + 1) % Number.MAX_SAFE_INTEGER;
+	return count.toString();
 }
 
 type ActionType = typeof actionTypes;
 
 type Action =
-  | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
+	| {
+			type: ActionType["ADD_TOAST"];
+			toast: ToasterToast;
+	  }
+	| {
+			type: ActionType["UPDATE_TOAST"];
+			toast: Partial<ToasterToast>;
+	  }
+	| {
+			type: ActionType["DISMISS_TOAST"];
+			toastId?: ToasterToast["id"];
+	  }
+	| {
+			type: ActionType["REMOVE_TOAST"];
+			toastId?: ToasterToast["id"];
+	  };
 
 interface State {
-  toasts: ToasterToast[];
+	toasts: ToasterToast[];
 }
 
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
 const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
+	if (toastTimeouts.has(toastId)) {
+		return;
+	}
 
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
+	const timeout = setTimeout(() => {
+		toastTimeouts.delete(toastId);
+		dispatch({
+			type: "REMOVE_TOAST",
+			toastId: toastId,
+		});
+	}, TOAST_REMOVE_DELAY);
 
-  toastTimeouts.set(toastId, timeout);
+	toastTimeouts.set(toastId, timeout);
 };
 
 export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
+	switch (action.type) {
+		case "ADD_TOAST":
+			return {
+				...state,
+				toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+			};
 
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      };
+		case "UPDATE_TOAST":
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === action.toast.id ? { ...t, ...action.toast } : t,
+				),
+			};
 
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
+		case "DISMISS_TOAST": {
+			const { toastId } = action;
 
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
+			// ! Side effects ! - This could be extracted into a dismissToast() action,
+			// but I'll keep it here for simplicity
+			if (toastId) {
+				addToRemoveQueue(toastId);
+			} else {
+				state.toasts.forEach((toast) => {
+					addToRemoveQueue(toast.id);
+				});
+			}
 
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === toastId || toastId === undefined
+						? {
+								...t,
+								open: false,
+							}
+						: t,
+				),
+			};
+		}
+		case "REMOVE_TOAST":
+			if (action.toastId === undefined) {
+				return {
+					...state,
+					toasts: [],
+				};
+			}
+			return {
+				...state,
+				toasts: state.toasts.filter((t) => t.id !== action.toastId),
+			};
+	}
 };
 
 const listeners: Array<(state: State) => void> = [];
@@ -131,61 +131,61 @@ const listeners: Array<(state: State) => void> = [];
 let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
+	memoryState = reducer(memoryState, action);
+	listeners.forEach((listener) => {
+		listener(memoryState);
+	});
 }
 
 type Toast = Omit<ToasterToast, "id">;
 
 function toast({ ...props }: Toast) {
-  const id = genId();
+	const id = genId();
 
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+	const update = (props: ToasterToast) =>
+		dispatch({
+			type: "UPDATE_TOAST",
+			toast: { ...props, id },
+		});
+	const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
+	dispatch({
+		type: "ADD_TOAST",
+		toast: {
+			...props,
+			id,
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) dismiss();
+			},
+		},
+	});
 
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
+	return {
+		id: id,
+		dismiss,
+		update,
+	};
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
+	const [state, setState] = React.useState<State>(memoryState);
 
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
+	React.useEffect(() => {
+		listeners.push(setState);
+		return () => {
+			const index = listeners.indexOf(setState);
+			if (index > -1) {
+				listeners.splice(index, 1);
+			}
+		};
+	}, [state]);
 
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
+	return {
+		...state,
+		toast,
+		dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+	};
 }
 
 export { useToast, toast };