feat: migrate time utilities from typescript to rust WASM

7 files changed, 1096 insertions, 1158 deletions

diff --git a/apps/web/src/hooks/timeline/element/use-element-interaction.ts b/apps/web/src/hooks/timeline/element/use-element-interaction.ts
index fae8c527..3e0a6997 100644
--- a/apps/web/src/hooks/timeline/element/use-element-interaction.ts
+++ b/apps/web/src/hooks/timeline/element/use-element-interaction.ts
@@ -14,7 +14,7 @@ import {
 	DRAG_THRESHOLD_PX,
 	TIMELINE_CONSTANTS,
 } from "@/constants/timeline-constants";
-import { snapTimeToFrame } from "@/lib/time";
+import { snapTimeToFrame } from "opencut-wasm";
 import { computeDropTarget } from "@/lib/timeline/drop-utils";
 import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils";
 import { generateUUID } from "@/utils/id";
@@ -302,10 +302,7 @@ export function useElementInteraction({
 						0,
 						mouseTime - pendingDragRef.current.clickOffsetTime,
 					);
-					const snappedTime = snapTimeToFrame({
-						time: adjustedTime,
-						fps: activeProject.settings.fps,
-					});
+				const snappedTime = snapTimeToFrame({ time: adjustedTime, fps: activeProject.settings.fps });
 					startDrag({
 						...pendingDragRef.current,
 						initialCurrentTime: snappedTime,
diff --git a/apps/web/src/hooks/timeline/element/use-element-resize.ts b/apps/web/src/hooks/timeline/element/use-element-resize.ts
index b41f82f9..26bd8ef9 100644
--- a/apps/web/src/hooks/timeline/element/use-element-resize.ts
+++ b/apps/web/src/hooks/timeline/element/use-element-resize.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { snapTimeToFrame } from "@/lib/time";
+import { snapTimeToFrame } from "opencut-wasm";
 import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
 import { useEditor } from "@/hooks/use-editor";
 import { useShiftKey } from "@/hooks/use-shift-key";
@@ -285,26 +285,14 @@ export function useTimelineElementResize({
 					resizing.initialTrimStart + getSourceDeltaForClipDelta(deltaTime);
 
 				if (calculated >= 0 && calculated <= maxAllowed) {
-					const newTrimStart = snapTimeToFrame({
-						time: Math.min(
-							maxAllowed,
-							Math.max(minTrimStartForNeighbor, calculated),
-						),
-						fps: projectFps,
-					});
+				const newTrimStart = snapTimeToFrame({ time: Math.min(maxAllowed, Math.max(minTrimStartForNeighbor, calculated)), fps: projectFps });
 					const visibleSourceSpan = Math.max(
 						0,
 						sourceDuration - newTrimStart - resizing.initialTrimEnd,
 					);
-					const newDuration = snapTimeToFrame({
-						time: getDurationForVisibleSourceSpan(visibleSourceSpan),
-						fps: projectFps,
-					});
-					const trimDelta = resizing.initialDuration - newDuration;
-					const newStartTime = snapTimeToFrame({
-						time: resizing.initialStartTime + trimDelta,
-						fps: projectFps,
-					});
+				const newDuration = snapTimeToFrame({ time: getDurationForVisibleSourceSpan(visibleSourceSpan), fps: projectFps });
+				const trimDelta = resizing.initialDuration - newDuration;
+				const newStartTime = snapTimeToFrame({ time: resizing.initialStartTime + trimDelta, fps: projectFps });
 
 					setCurrentTrimStart(newTrimStart);
 					setCurrentStartTime(newStartTime);
@@ -326,14 +314,8 @@ export function useTimelineElementResize({
 									)
 								: Math.min(extensionAmount, maxExtension),
 						);
-						const newStartTime = snapTimeToFrame({
-							time: resizing.initialStartTime - actualExtension,
-							fps: projectFps,
-						});
-						const newDuration = snapTimeToFrame({
-							time: resizing.initialDuration + actualExtension,
-							fps: projectFps,
-						});
+					const newStartTime = snapTimeToFrame({ time: resizing.initialStartTime - actualExtension, fps: projectFps });
+					const newDuration = snapTimeToFrame({ time: resizing.initialDuration + actualExtension, fps: projectFps });
 
 						setCurrentTrimStart(0);
 						setCurrentStartTime(newStartTime);
@@ -359,16 +341,8 @@ export function useTimelineElementResize({
 							0,
 							sourceDuration - newTrimStart - resizing.initialTrimEnd,
 						);
-						const newDuration = snapTimeToFrame({
-							time: getDurationForVisibleSourceSpan(visibleSourceSpan),
-							fps: projectFps,
-						});
-						const newStartTime = snapTimeToFrame({
-							time:
-								resizing.initialStartTime +
-								(resizing.initialDuration - newDuration),
-							fps: projectFps,
-						});
+					const newDuration = snapTimeToFrame({ time: getDurationForVisibleSourceSpan(visibleSourceSpan), fps: projectFps });
+					const newStartTime = snapTimeToFrame({ time: resizing.initialStartTime + (resizing.initialDuration - newDuration), fps: projectFps });
 
 						setCurrentTrimStart(newTrimStart);
 						setCurrentStartTime(newStartTime);
@@ -395,13 +369,7 @@ export function useTimelineElementResize({
 						const extensionNeeded = Math.abs(newTrimEnd);
 						const baseDuration =
 							resizing.initialDuration + resizing.initialTrimEnd;
-						const newDuration = snapTimeToFrame({
-							time: Math.min(
-								baseDuration + extensionNeeded,
-								maxAllowedDuration,
-							),
-							fps: projectFps,
-						});
+					const newDuration = snapTimeToFrame({ time: Math.min(baseDuration + extensionNeeded, maxAllowedDuration), fps: projectFps });
 
 						setCurrentDuration(newDuration);
 						setCurrentTrimEnd(0);
@@ -411,10 +379,7 @@ export function useTimelineElementResize({
 						const unclampedDuration = getDurationForVisibleSourceSpan(
 							Math.max(0, sourceDuration - resizing.initialTrimStart),
 						);
-						const newDuration = snapTimeToFrame({
-							time: Math.min(unclampedDuration, maxAllowedDuration),
-							fps: projectFps,
-						});
+					const newDuration = snapTimeToFrame({ time: Math.min(unclampedDuration, maxAllowedDuration), fps: projectFps });
 
 						setCurrentDuration(newDuration);
 						setCurrentTrimEnd(0);
@@ -438,18 +403,12 @@ export function useTimelineElementResize({
 						maxTrimEnd,
 						Math.max(minTrimEndForNeighbor, newTrimEnd),
 					);
-					const finalTrimEnd = snapTimeToFrame({
-						time: clampedTrimEnd,
-						fps: projectFps,
-					});
+				const finalTrimEnd = snapTimeToFrame({ time: clampedTrimEnd, fps: projectFps });
 					const visibleSourceSpan = Math.max(
 						0,
 						sourceDuration - resizing.initialTrimStart - finalTrimEnd,
 					);
-					const newDuration = snapTimeToFrame({
-						time: getDurationForVisibleSourceSpan(visibleSourceSpan),
-						fps: projectFps,
-					});
+				const newDuration = snapTimeToFrame({ time: getDurationForVisibleSourceSpan(visibleSourceSpan), fps: projectFps });
 
 					setCurrentTrimEnd(finalTrimEnd);
 					setCurrentDuration(newDuration);
diff --git a/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts b/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
index 4f961a0a..e0bf8084 100644
--- a/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
+++ b/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
@@ -7,7 +7,7 @@ import {
 } from "react";
 import { useEditor } from "@/hooks/use-editor";
 import { useKeyframeSelection } from "./use-keyframe-selection";
-import { snapTimeToFrame, getSnappedSeekTime } from "@/lib/time";
+import { snapTimeToFrame, getSnappedSeekTime } from "opencut-wasm";
 import { timelineTimeToSnappedPixels } from "@/lib/timeline";
 import {
 	DRAG_THRESHOLD_PX,
@@ -254,11 +254,7 @@ export function useKeyframeDrag({
 			if (wasDrag) return;
 
 			const duration = editor.timeline.getTotalDuration();
-			const seekTime = getSnappedSeekTime({
-				rawTime: displayedStartTime + indicatorTime,
-				duration,
-				fps,
-			});
+			const seekTime = getSnappedSeekTime({ rawTime: displayedStartTime + indicatorTime, duration, fps });
 			editor.playback.seek({ time: seekTime });
 
 			if (event.shiftKey) {
diff --git a/apps/web/src/hooks/timeline/use-bookmark-drag.ts b/apps/web/src/hooks/timeline/use-bookmark-drag.ts
index e7e70495..4a1185bd 100644
--- a/apps/web/src/hooks/timeline/use-bookmark-drag.ts
+++ b/apps/web/src/hooks/timeline/use-bookmark-drag.ts
@@ -1,281 +1,275 @@
-import {

-	useState,

-	useCallback,

-	useEffect,

-	useRef,

-	type RefObject,

-} from "react";

-import { useEditor } from "@/hooks/use-editor";

-import { useShiftKey } from "@/hooks/use-shift-key";

-import { DRAG_THRESHOLD_PX } from "@/constants/timeline-constants";

-import { snapTimeToFrame } from "@/lib/time";

-import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils";

-import {

-	findSnapPoints,

-	snapToNearestPoint,

-	type SnapPoint,

-} from "@/lib/timeline/snap-utils";

-import type { Bookmark } from "@/lib/timeline";

-

-export interface BookmarkDragState {

-	isDragging: boolean;

-	bookmarkTime: number | null;

-	currentTime: number;

-}

-

-interface PendingBookmarkDrag {

-	bookmarkTime: number;

-	startMouseX: number;

-	startMouseY: number;

-}

-

-interface UseBookmarkDragProps {

-	zoomLevel: number;

-	scrollRef: RefObject<HTMLElement | null>;

-	snappingEnabled: boolean;

-	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;

-}

-

-export function useBookmarkDrag({

-	zoomLevel,

-	scrollRef,

-	snappingEnabled,

-	onSnapPointChange,

-}: UseBookmarkDragProps) {

-	const editor = useEditor();

-	const isShiftHeldRef = useShiftKey();

-	const tracks = editor.timeline.getTracks();

-	const activeScene = editor.scenes.getActiveScene();

-	const bookmarks = activeScene?.bookmarks ?? [];

-	const playheadTime = editor.playback.getCurrentTime();

-	const duration = editor.timeline.getTotalDuration();

-

-	const [dragState, setDragState] = useState<BookmarkDragState>({

-		isDragging: false,

-		bookmarkTime: null,

-		currentTime: 0,

-	});

-	const [isPendingDrag, setIsPendingDrag] = useState(false);

-	const pendingDragRef = useRef<PendingBookmarkDrag | null>(null);

-	const lastMouseXRef = useRef(0);

-

-	const startDrag = useCallback(

-		({

-			bookmarkTime,

-			initialCurrentTime,

-		}: {

-			bookmarkTime: number;

-			initialCurrentTime: number;

-		}) => {

-			setDragState({

-				isDragging: true,

-				bookmarkTime,

-				currentTime: initialCurrentTime,

-			});

-		},

-		[],

-	);

-

-	const endDrag = useCallback(() => {

-		setDragState({

-			isDragging: false,

-			bookmarkTime: null,

-			currentTime: 0,

-		});

-	}, []);

-

-	const getSnapResult = useCallback(

-		({

-			rawTime,

-			excludeBookmarkTime,

-		}: {

-			rawTime: number;

-			excludeBookmarkTime: number;

-		}): { snappedTime: number; snapPoint: SnapPoint | null } => {

-			const shouldSnap = snappingEnabled && !isShiftHeldRef.current;

-			if (!shouldSnap) {

-				return { snappedTime: rawTime, snapPoint: null };

-			}

-

-			const snapPoints = findSnapPoints({

-				tracks,

-				playheadTime,

-				bookmarks,

-				excludeBookmarkTime,

-			});

-			const result = snapToNearestPoint({

-				targetTime: rawTime,

-				snapPoints,

-				zoomLevel,

-			});

-			return {

-				snappedTime: result.snappedTime,

-				snapPoint: result.snapPoint,

-			};

-		},

-		[snappingEnabled, tracks, playheadTime, bookmarks, zoomLevel, isShiftHeldRef],

-	);

-

-	useEffect(() => {

-		if (!dragState.isDragging && !isPendingDrag) return;

-

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

-			lastMouseXRef.current = event.clientX;

-

-			const scrollContainer = scrollRef.current;

-			if (!scrollContainer) return;

-

-			if (isPendingDrag && pendingDragRef.current) {

-				const { startMouseX, startMouseY, bookmarkTime } =

-					pendingDragRef.current;

-				const deltaX = Math.abs(event.clientX - startMouseX);

-				const deltaY = Math.abs(event.clientY - startMouseY);

-

-				if (deltaX <= DRAG_THRESHOLD_PX && deltaY <= DRAG_THRESHOLD_PX) {

-					return;

-				}

-

-				const activeProject = editor.project.getActive();

-				if (!activeProject) return;

-

-				const scrollLeft = scrollContainer.scrollLeft;

-				const mouseTime = getMouseTimeFromClientX({

-					clientX: event.clientX,

-					containerRect: scrollContainer.getBoundingClientRect(),

-					zoomLevel,

-					scrollLeft,

-				});

-				const frameSnappedTime = snapTimeToFrame({

-					time: Math.max(0, Math.min(mouseTime, duration)),

-					fps: activeProject.settings.fps,

-				});

-				const { snappedTime: initialTime } = getSnapResult({

-					rawTime: frameSnappedTime,

-					excludeBookmarkTime: bookmarkTime,

-				});

-

-				startDrag({

-					bookmarkTime,

-					initialCurrentTime: initialTime,

-				});

-				pendingDragRef.current = null;

-				setIsPendingDrag(false);

-				return;

-			}

-

-			if (!dragState.isDragging || dragState.bookmarkTime === null) return;

-

-			const activeProject = editor.project.getActive();

-			if (!activeProject) return;

-

-			const scrollLeft = scrollContainer.scrollLeft;

-			const mouseTime = getMouseTimeFromClientX({

-				clientX: event.clientX,

-				containerRect: scrollContainer.getBoundingClientRect(),

-				zoomLevel,

-				scrollLeft,

-			});

-			const clampedTime = Math.max(0, Math.min(mouseTime, duration));

-			const frameSnappedTime = snapTimeToFrame({

-				time: clampedTime,

-				fps: activeProject.settings.fps,

-			});

-			const snapResult = getSnapResult({

-				rawTime: frameSnappedTime,

-				excludeBookmarkTime: dragState.bookmarkTime,

-			});

-

-			setDragState((previousDragState) => ({

-				...previousDragState,

-				currentTime: snapResult.snappedTime,

-			}));

-			onSnapPointChange?.(snapResult.snapPoint);

-		};

-

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

-		return () => document.removeEventListener("mousemove", handleMouseMove);

-	}, [

-		dragState.isDragging,

-		dragState.bookmarkTime,

-		zoomLevel,

-		duration,

-		editor.project,

-		scrollRef,

-		isPendingDrag,

-		startDrag,

-		getSnapResult,

-		onSnapPointChange,

-	]);

-

-	useEffect(() => {

-		if (!dragState.isDragging) return;

-

-		const handleMouseUp = () => {

-			if (dragState.bookmarkTime === null) {

-				endDrag();

-				onSnapPointChange?.(null);

-				return;

-			}

-

-			const clampedTime = Math.max(

-				0,

-				Math.min(dragState.currentTime, duration),

-			);

-

-			editor.scenes.moveBookmark({

-				fromTime: dragState.bookmarkTime,

-				toTime: clampedTime,

-			});

-

-			endDrag();

-			onSnapPointChange?.(null);

-		};

-

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

-		return () => document.removeEventListener("mouseup", handleMouseUp);

-	}, [

-		dragState.isDragging,

-		dragState.bookmarkTime,

-		dragState.currentTime,

-		duration,

-		endDrag,

-		onSnapPointChange,

-		editor.scenes,

-	]);

-

-	useEffect(() => {

-		if (!isPendingDrag) return;

-

-		const handleMouseUp = () => {

-			pendingDragRef.current = null;

-			setIsPendingDrag(false);

-			onSnapPointChange?.(null);

-		};

-

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

-		return () => document.removeEventListener("mouseup", handleMouseUp);

-	}, [isPendingDrag, onSnapPointChange]);

-

-	const handleBookmarkMouseDown = useCallback(

-		({ event, bookmark }: { event: React.MouseEvent; bookmark: Bookmark }) => {

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

-

-			event.preventDefault();

-			event.stopPropagation();

-

-			pendingDragRef.current = {

-				bookmarkTime: bookmark.time,

-				startMouseX: event.clientX,

-				startMouseY: event.clientY,

-			};

-			setIsPendingDrag(true);

-		},

-		[],

-	);

-

-	return {

-		dragState,

-		handleBookmarkMouseDown,

-		lastMouseXRef,

-	};

-}

+import {
+	useState,
+	useCallback,
+	useEffect,
+	useRef,
+	type RefObject,
+} from "react";
+import { useEditor } from "@/hooks/use-editor";
+import { useShiftKey } from "@/hooks/use-shift-key";
+import { DRAG_THRESHOLD_PX } from "@/constants/timeline-constants";
+import { snapTimeToFrame } from "opencut-wasm";
+import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils";
+import {
+	findSnapPoints,
+	snapToNearestPoint,
+	type SnapPoint,
+} from "@/lib/timeline/snap-utils";
+import type { Bookmark } from "@/lib/timeline";
+
+export interface BookmarkDragState {
+	isDragging: boolean;
+	bookmarkTime: number | null;
+	currentTime: number;
+}
+
+interface PendingBookmarkDrag {
+	bookmarkTime: number;
+	startMouseX: number;
+	startMouseY: number;
+}
+
+interface UseBookmarkDragProps {
+	zoomLevel: number;
+	scrollRef: RefObject<HTMLElement | null>;
+	snappingEnabled: boolean;
+	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
+}
+
+export function useBookmarkDrag({
+	zoomLevel,
+	scrollRef,
+	snappingEnabled,
+	onSnapPointChange,
+}: UseBookmarkDragProps) {
+	const editor = useEditor();
+	const isShiftHeldRef = useShiftKey();
+	const tracks = editor.timeline.getTracks();
+	const activeScene = editor.scenes.getActiveScene();
+	const bookmarks = activeScene?.bookmarks ?? [];
+	const playheadTime = editor.playback.getCurrentTime();
+	const duration = editor.timeline.getTotalDuration();
+
+	const [dragState, setDragState] = useState<BookmarkDragState>({
+		isDragging: false,
+		bookmarkTime: null,
+		currentTime: 0,
+	});
+	const [isPendingDrag, setIsPendingDrag] = useState(false);
+	const pendingDragRef = useRef<PendingBookmarkDrag | null>(null);
+	const lastMouseXRef = useRef(0);
+
+	const startDrag = useCallback(
+		({
+			bookmarkTime,
+			initialCurrentTime,
+		}: {
+			bookmarkTime: number;
+			initialCurrentTime: number;
+		}) => {
+			setDragState({
+				isDragging: true,
+				bookmarkTime,
+				currentTime: initialCurrentTime,
+			});
+		},
+		[],
+	);
+
+	const endDrag = useCallback(() => {
+		setDragState({
+			isDragging: false,
+			bookmarkTime: null,
+			currentTime: 0,
+		});
+	}, []);
+
+	const getSnapResult = useCallback(
+		({
+			rawTime,
+			excludeBookmarkTime,
+		}: {
+			rawTime: number;
+			excludeBookmarkTime: number;
+		}): { snappedTime: number; snapPoint: SnapPoint | null } => {
+			const shouldSnap = snappingEnabled && !isShiftHeldRef.current;
+			if (!shouldSnap) {
+				return { snappedTime: rawTime, snapPoint: null };
+			}
+
+			const snapPoints = findSnapPoints({
+				tracks,
+				playheadTime,
+				bookmarks,
+				excludeBookmarkTime,
+			});
+			const result = snapToNearestPoint({
+				targetTime: rawTime,
+				snapPoints,
+				zoomLevel,
+			});
+			return {
+				snappedTime: result.snappedTime,
+				snapPoint: result.snapPoint,
+			};
+		},
+		[snappingEnabled, tracks, playheadTime, bookmarks, zoomLevel, isShiftHeldRef],
+	);
+
+	useEffect(() => {
+		if (!dragState.isDragging && !isPendingDrag) return;
+
+		const handleMouseMove = (event: MouseEvent) => {
+			lastMouseXRef.current = event.clientX;
+
+			const scrollContainer = scrollRef.current;
+			if (!scrollContainer) return;
+
+			if (isPendingDrag && pendingDragRef.current) {
+				const { startMouseX, startMouseY, bookmarkTime } =
+					pendingDragRef.current;
+				const deltaX = Math.abs(event.clientX - startMouseX);
+				const deltaY = Math.abs(event.clientY - startMouseY);
+
+				if (deltaX <= DRAG_THRESHOLD_PX && deltaY <= DRAG_THRESHOLD_PX) {
+					return;
+				}
+
+				const activeProject = editor.project.getActive();
+				if (!activeProject) return;
+
+				const scrollLeft = scrollContainer.scrollLeft;
+				const mouseTime = getMouseTimeFromClientX({
+					clientX: event.clientX,
+					containerRect: scrollContainer.getBoundingClientRect(),
+					zoomLevel,
+					scrollLeft,
+				});
+			const frameSnappedTime = snapTimeToFrame({ time: Math.max(0, Math.min(mouseTime, duration)), fps: activeProject.settings.fps });
+				const { snappedTime: initialTime } = getSnapResult({
+					rawTime: frameSnappedTime,
+					excludeBookmarkTime: bookmarkTime,
+				});
+
+				startDrag({
+					bookmarkTime,
+					initialCurrentTime: initialTime,
+				});
+				pendingDragRef.current = null;
+				setIsPendingDrag(false);
+				return;
+			}
+
+			if (!dragState.isDragging || dragState.bookmarkTime === null) return;
+
+			const activeProject = editor.project.getActive();
+			if (!activeProject) return;
+
+			const scrollLeft = scrollContainer.scrollLeft;
+			const mouseTime = getMouseTimeFromClientX({
+				clientX: event.clientX,
+				containerRect: scrollContainer.getBoundingClientRect(),
+				zoomLevel,
+				scrollLeft,
+			});
+			const clampedTime = Math.max(0, Math.min(mouseTime, duration));
+			const frameSnappedTime = snapTimeToFrame({ time: clampedTime, fps: activeProject.settings.fps });
+			const snapResult = getSnapResult({
+				rawTime: frameSnappedTime,
+				excludeBookmarkTime: dragState.bookmarkTime,
+			});
+
+			setDragState((previousDragState) => ({
+				...previousDragState,
+				currentTime: snapResult.snappedTime,
+			}));
+			onSnapPointChange?.(snapResult.snapPoint);
+		};
+
+		document.addEventListener("mousemove", handleMouseMove);
+		return () => document.removeEventListener("mousemove", handleMouseMove);
+	}, [
+		dragState.isDragging,
+		dragState.bookmarkTime,
+		zoomLevel,
+		duration,
+		editor.project,
+		scrollRef,
+		isPendingDrag,
+		startDrag,
+		getSnapResult,
+		onSnapPointChange,
+	]);
+
+	useEffect(() => {
+		if (!dragState.isDragging) return;
+
+		const handleMouseUp = () => {
+			if (dragState.bookmarkTime === null) {
+				endDrag();
+				onSnapPointChange?.(null);
+				return;
+			}
+
+			const clampedTime = Math.max(
+				0,
+				Math.min(dragState.currentTime, duration),
+			);
+
+			editor.scenes.moveBookmark({
+				fromTime: dragState.bookmarkTime,
+				toTime: clampedTime,
+			});
+
+			endDrag();
+			onSnapPointChange?.(null);
+		};
+
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => document.removeEventListener("mouseup", handleMouseUp);
+	}, [
+		dragState.isDragging,
+		dragState.bookmarkTime,
+		dragState.currentTime,
+		duration,
+		endDrag,
+		onSnapPointChange,
+		editor.scenes,
+	]);
+
+	useEffect(() => {
+		if (!isPendingDrag) return;
+
+		const handleMouseUp = () => {
+			pendingDragRef.current = null;
+			setIsPendingDrag(false);
+			onSnapPointChange?.(null);
+		};
+
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => document.removeEventListener("mouseup", handleMouseUp);
+	}, [isPendingDrag, onSnapPointChange]);
+
+	const handleBookmarkMouseDown = useCallback(
+		({ event, bookmark }: { event: React.MouseEvent; bookmark: Bookmark }) => {
+			if (event.button !== 0) return;
+
+			event.preventDefault();
+			event.stopPropagation();
+
+			pendingDragRef.current = {
+				bookmarkTime: bookmark.time,
+				startMouseX: event.clientX,
+				startMouseY: event.clientY,
+			};
+			setIsPendingDrag(true);
+		},
+		[],
+	);
+
+	return {
+		dragState,
+		handleBookmarkMouseDown,
+		lastMouseXRef,
+	};
+}
diff --git a/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts b/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
index 7cd9f140..9693e8d8 100644
--- a/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
@@ -1,609 +1,609 @@
-import { useState, useCallback, type RefObject } from "react";

-import { useEditor } from "@/hooks/use-editor";

-import { processMediaAssets } from "@/lib/media/processing";

-import { toast } from "sonner";

-import { showMediaUploadToast } from "@/lib/media/upload-toast";

-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

-import { snapTimeToFrame } from "@/lib/time";

-import {

-	buildTextElement,

-	buildGraphicElement,

-	buildStickerElement,

-	buildElementFromMedia,

-	buildEffectElement,

-} from "@/lib/timeline/element-utils";

-import { AddTrackCommand, InsertElementCommand } from "@/lib/commands/timeline";

-import { BatchCommand } from "@/lib/commands";

-import { computeDropTarget } from "@/lib/timeline/drop-utils";

-import { getDragData, hasDragData } from "@/lib/drag-data";

-import { isMainTrack } from "@/lib/timeline/track-utils";

-import type { TrackType, DropTarget, ElementType } from "@/lib/timeline";

-import type {

-	MediaDragData,

-	GraphicDragData,

-	StickerDragData,

-	EffectDragData,

-} from "@/lib/timeline/drag";

-

-interface UseTimelineDragDropProps {

-	containerRef: RefObject<HTMLDivElement | null>;

-	headerRef?: RefObject<HTMLElement | null>;

-	tracksScrollRef?: RefObject<HTMLDivElement | null>;

-	zoomLevel: number;

-}

-

-export function useTimelineDragDrop({

-	containerRef,

-	headerRef,

-	tracksScrollRef,

-	zoomLevel,

-}: UseTimelineDragDropProps) {

-	const editor = useEditor();

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

-	const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);

-	const [dragElementType, setElementType] = useState<ElementType | null>(null);

-

-	const getSnappedTime = useCallback(

-		({ time }: { time: number }) => {

-			const projectFps = editor.project.getActive().settings.fps;

-			return snapTimeToFrame({ time, fps: projectFps });

-		},

-		[editor],

-	);

-

-	const getElementType = useCallback(

-		({ dataTransfer }: { dataTransfer: DataTransfer }): ElementType | null => {

-			const dragData = getDragData({ dataTransfer });

-			if (!dragData) return null;

-

-			if (dragData.type === "text") return "text";

-			if (dragData.type === "graphic") return "graphic";

-			if (dragData.type === "sticker") return "sticker";

-			if (dragData.type === "effect") return "effect";

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

-				return dragData.mediaType;

-			}

-			return null;

-		},

-		[],

-	);

-

-	const getElementDuration = useCallback(

-		({

-			elementType,

-			mediaId,

-		}: {

-			elementType: ElementType;

-			mediaId?: string;

-		}): number => {

-			if (

-				elementType === "text" ||

-				elementType === "graphic" ||

-				elementType === "sticker" ||

-				elementType === "effect"

-			) {

-				return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;

-			}

-			if (mediaId) {

-				const mediaAssets = editor.media.getAssets();

-				const media = mediaAssets.find((m) => m.id === mediaId);

-				return media?.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;

-			}

-			return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;

-		},

-		[editor],

-	);

-

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

-		e.preventDefault();

-		const hasAsset = hasDragData({ dataTransfer: e.dataTransfer });

-		const hasFiles = e.dataTransfer.types.includes("Files");

-		if (!hasAsset && !hasFiles) return;

-		setIsDragOver(true);

-	}, []);

-

-	const handleDragOver = useCallback(

-		(e: React.DragEvent) => {

-			e.preventDefault();

-

-			const scrollContainer = tracksScrollRef?.current;

-			const referenceRect =

-				scrollContainer?.getBoundingClientRect() ??

-				containerRef.current?.getBoundingClientRect();

-			if (!referenceRect) return;

-

-			const headerHeight =

-				headerRef?.current?.getBoundingClientRect().height ?? 0;

-			const scrollLeft = scrollContainer?.scrollLeft ?? 0;

-			const scrollTop = scrollContainer?.scrollTop ?? 0;

-			const hasFiles = e.dataTransfer.types.includes("Files");

-			const isExternal =

-				hasFiles && !hasDragData({ dataTransfer: e.dataTransfer });

-

-			const elementType = getElementType({ dataTransfer: e.dataTransfer });

-

-			if (!elementType && hasFiles && isExternal) {

-				setDropTarget(null);

-				setElementType(null);

-				return;

-			}

-

-			if (!elementType) return;

-

-			setElementType(elementType);

-

-			const dragData = getDragData({ dataTransfer: e.dataTransfer });

-			const duration = getElementDuration({

-				elementType,

-				mediaId: dragData?.type === "media" ? dragData.id : undefined,

-			});

-

-			const mouseX = e.clientX - referenceRect.left + scrollLeft;

-			const mouseY = e.clientY - referenceRect.top + scrollTop - headerHeight;

-

-			const targetElementTypes =

-				dragData?.type === "effect"

-					? (dragData as EffectDragData).targetElementTypes

-					: dragData?.type === "media"

-						? (dragData as MediaDragData).targetElementTypes

-						: undefined;

-

-			const tracks = editor.timeline.getTracks();

-			const currentTime = editor.playback.getCurrentTime();

-			const target = computeDropTarget({

-				elementType,

-				mouseX,

-				mouseY,

-				tracks,

-				playheadTime: currentTime,

-				isExternalDrop: isExternal,

-				elementDuration: duration,

-				pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,

-				zoomLevel,

-				targetElementTypes,

-			});

-

-			target.xPosition = getSnappedTime({ time: target.xPosition });

-

-			setDropTarget(target);

-			e.dataTransfer.dropEffect = "copy";

-		},

-		[

-			containerRef,

-			headerRef,

-			tracksScrollRef,

-			zoomLevel,

-			getElementType,

-			getElementDuration,

-			getSnappedTime,

-			editor,

-		],

-	);

-

-	const handleDragLeave = useCallback(

-		(e: React.DragEvent) => {

-			e.preventDefault();

-			const rect = containerRef.current?.getBoundingClientRect();

-			if (rect) {

-				const { clientX, clientY } = e;

-				if (

-					clientX < rect.left ||

-					clientX > rect.right ||

-					clientY < rect.top ||

-					clientY > rect.bottom

-				) {

-					setIsDragOver(false);

-					setDropTarget(null);

-					setElementType(null);

-				}

-			}

-		},

-		[containerRef],

-	);

-

-	const executeTextDrop = useCallback(

-		({

-			target,

-			dragData,

-		}: {

-			target: DropTarget;

-			dragData: { name?: string; content?: string };

-		}) => {

-			const element = buildTextElement({

-				raw: {

-					name: dragData.name ?? "",

-					content: dragData.content ?? "",

-				},

-				startTime: target.xPosition,

-			});

-

-			if (target.isNewTrack) {

-				const addTrackCmd = new AddTrackCommand("text", target.trackIndex);

-				const insertCmd = new InsertElementCommand({

-					element,

-					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },

-				});

-				editor.command.execute({

-					command: new BatchCommand([addTrackCmd, insertCmd]),

-				});

-				return;

-			}

-

-			const tracks = editor.timeline.getTracks();

-			const track = tracks[target.trackIndex];

-			if (!track) return;

-			editor.timeline.insertElement({

-				placement: { mode: "explicit", trackId: track.id },

-				element,

-			});

-		},

-		[editor],

-	);

-

-	const executeStickerDrop = useCallback(

-		({

-			target,

-			dragData,

-		}: {

-			target: DropTarget;

-			dragData: StickerDragData;

-		}) => {

-			const element = buildStickerElement({

-				stickerId: dragData.stickerId,

-				name: dragData.name,

-				startTime: target.xPosition,

-			});

-

-			if (target.isNewTrack) {

-				const addTrackCmd = new AddTrackCommand("graphic", target.trackIndex);

-				const insertCmd = new InsertElementCommand({

-					element,

-					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },

-				});

-				editor.command.execute({

-					command: new BatchCommand([addTrackCmd, insertCmd]),

-				});

-				return;

-			}

-

-			const tracks = editor.timeline.getTracks();

-			const track = tracks[target.trackIndex];

-			if (!track) return;

-			editor.timeline.insertElement({

-				placement: { mode: "explicit", trackId: track.id },

-				element,

-			});

-		},

-		[editor],

-	);

-

-	const executeGraphicDrop = useCallback(

-		({

-			target,

-			dragData,

-		}: {

-			target: DropTarget;

-			dragData: GraphicDragData;

-		}) => {

-			const element = buildGraphicElement({

-				definitionId: dragData.definitionId,

-				name: dragData.name,

-				startTime: target.xPosition,

-				params: dragData.params,

-			});

-

-			if (target.isNewTrack) {

-				const addTrackCmd = new AddTrackCommand("graphic", target.trackIndex);

-				const insertCmd = new InsertElementCommand({

-					element,

-					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },

-				});

-				editor.command.execute({

-					command: new BatchCommand([addTrackCmd, insertCmd]),

-				});

-				return;

-			}

-

-			const tracks = editor.timeline.getTracks();

-			const track = tracks[target.trackIndex];

-			if (!track) return;

-			editor.timeline.insertElement({

-				placement: { mode: "explicit", trackId: track.id },

-				element,

-			});

-		},

-		[editor],

-	);

-

-	const executeMediaDrop = useCallback(

-		({ target, dragData }: { target: DropTarget; dragData: MediaDragData }) => {

-			if (target.targetElement) {

-				toast.info("Replace media source is coming soon!");

-				return;

-			}

-

-			const mediaAssets = editor.media.getAssets();

-			const mediaAsset = mediaAssets.find((m) => m.id === dragData.id);

-			if (!mediaAsset) return;

-

-			const trackType: TrackType =

-				dragData.mediaType === "audio" ? "audio" : "video";

-

-			const duration =

-				mediaAsset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;

-			const element = buildElementFromMedia({

-				mediaId: mediaAsset.id,

-				mediaType: mediaAsset.type,

-				name: mediaAsset.name,

-				duration,

-				startTime: target.xPosition,

-			});

-

-			if (target.isNewTrack) {

-				const addTrackCmd = new AddTrackCommand(trackType, target.trackIndex);

-				const insertCmd = new InsertElementCommand({

-					element,

-					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },

-				});

-				editor.command.execute({

-					command: new BatchCommand([addTrackCmd, insertCmd]),

-				});

-				return;

-			}

-

-			const tracks = editor.timeline.getTracks();

-			const track = tracks[target.trackIndex];

-			if (!track) return;

-			editor.timeline.insertElement({

-				placement: { mode: "explicit", trackId: track.id },

-				element,

-			});

-		},

-		[editor],

-	);

-

-	const executeEffectDrop = useCallback(

-		({

-			target,

-			dragData,

-		}: {

-			target: DropTarget;

-			dragData: EffectDragData;

-		}) => {

-			if (target.targetElement) {

-				editor.timeline.addClipEffect({

-					trackId: target.targetElement.trackId,

-					elementId: target.targetElement.elementId,

-					effectType: dragData.effectType,

-				});

-				return;

-			}

-

-			const tracks = editor.timeline.getTracks();

-			const effectTrack = tracks.find((t) => t.type === "effect");

-			let trackId: string;

-

-			if (effectTrack) {

-				trackId = effectTrack.id;

-			} else if (target.isNewTrack) {

-				const addTrackCmd = new AddTrackCommand("effect", target.trackIndex);

-				const insertCmd = new InsertElementCommand({

-					element: buildEffectElement({

-						effectType: dragData.effectType,

-						startTime: target.xPosition,

-					}),

-					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },

-				});

-				editor.command.execute({

-					command: new BatchCommand([addTrackCmd, insertCmd]),

-				});

-				return;

-			} else {

-				const track = tracks[target.trackIndex];

-				if (!track || track.type !== "effect") return;

-				trackId = track.id;

-			}

-

-			const element = buildEffectElement({

-				effectType: dragData.effectType,

-				startTime: target.xPosition,

-			});

-

-			editor.timeline.insertElement({

-				placement: { mode: "explicit", trackId },

-				element,

-			});

-		},

-		[editor],

-	);

-

-	const executeFileDrop = useCallback(

-		async ({

-			files,

-			mouseX,

-			mouseY,

-		}: {

-			files: File[];

-			mouseX: number;

-			mouseY: number;

-		}) => {

-			const activeProject = editor.project.getActiveOrNull();

-			if (!activeProject) return;

-

-			await showMediaUploadToast({

-				filesCount: files.length,

-				promise: async () => {

-					const processedAssets = await processMediaAssets({ files });

-					const projectId = activeProject.metadata.id;

-

-					for (const asset of processedAssets) {

-						const createdAsset = await editor.media.addMediaAsset({

-							projectId,

-							asset,

-						});

-						if (!createdAsset) continue;

-

-						const duration =

-							createdAsset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;

-						const currentTracks = editor.timeline.getTracks();

-						const currentTime = editor.playback.getCurrentTime();

-						const onlyTrack = currentTracks[0];

-						const reuseMainTrackId =

-							createdAsset.type !== "audio" &&

-							currentTracks.length === 1 &&

-							!!onlyTrack &&

-							isMainTrack(onlyTrack) &&

-							onlyTrack.elements.length === 0

-								? onlyTrack.id

-								: null;

-						const dropTarget = reuseMainTrackId

-							? null

-							: computeDropTarget({

-									elementType: createdAsset.type,

-									mouseX,

-									mouseY,

-									tracks: currentTracks,

-									playheadTime: currentTime,

-									isExternalDrop: true,

-									elementDuration: duration,

-									pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,

-									zoomLevel,

-								});

-

-						const trackType: TrackType =

-							createdAsset.type === "audio" ? "audio" : "video";

-

-						let trackId: string | undefined;

-						if (reuseMainTrackId) {

-							trackId = reuseMainTrackId;

-						} else {

-							if (!dropTarget) continue;

-							if (dropTarget.isNewTrack) {

-								const addTrackCmd = new AddTrackCommand(

-									trackType,

-									dropTarget.trackIndex,

-								);

-								trackId = addTrackCmd.getTrackId();

-								editor.command.execute({ command: addTrackCmd });

-							} else {

-								trackId = currentTracks[dropTarget.trackIndex]?.id;

-							}

-						}

-

-						if (!trackId) continue;

-

-						const element = buildElementFromMedia({

-							mediaId: createdAsset.id,

-							mediaType: createdAsset.type,

-							name: createdAsset.name,

-							duration,

-							startTime: dropTarget?.xPosition ?? currentTime,

-							buffer:

-								createdAsset.type === "audio"

-									? new AudioBuffer({ length: 1, sampleRate: 44100 })

-									: undefined,

-						});

-

-						const insertCmd = new InsertElementCommand({

-							element,

-							placement: { mode: "explicit", trackId },

-						});

-						editor.command.execute({ command: insertCmd });

-					}

-

-					return {

-						uploadedCount: processedAssets.length,

-						assetNames: processedAssets.map((asset) => asset.name),

-					};

-				},

-			});

-		},

-		[editor, zoomLevel],

-	);

-

-	const handleDrop = useCallback(

-		async (e: React.DragEvent) => {

-			e.preventDefault();

-

-			const hasAsset = hasDragData({ dataTransfer: e.dataTransfer });

-			const hasFiles = e.dataTransfer.files?.length > 0;

-

-			if (!hasAsset && !hasFiles) return;

-

-			const currentTarget = dropTarget;

-			setIsDragOver(false);

-			setDropTarget(null);

-			setElementType(null);

-

-			try {

-				if (hasAsset) {

-					if (!currentTarget) return;

-					const dragData = getDragData({ dataTransfer: e.dataTransfer });

-					if (!dragData) return;

-

-					if (dragData.type === "text") {

-						executeTextDrop({ target: currentTarget, dragData });

-					} else if (dragData.type === "graphic") {

-						executeGraphicDrop({

-							target: currentTarget,

-							dragData: dragData as GraphicDragData,

-						});

-					} else if (dragData.type === "sticker") {

-						executeStickerDrop({ target: currentTarget, dragData });

-					} else if (dragData.type === "effect") {

-						executeEffectDrop({

-							target: currentTarget,

-							dragData: dragData as EffectDragData,

-						});

-					} else {

-						executeMediaDrop({ target: currentTarget, dragData });

-					}

-				} else if (hasFiles) {

-					const scrollContainer = tracksScrollRef?.current;

-					const referenceRect =

-						scrollContainer?.getBoundingClientRect() ??

-						containerRef.current?.getBoundingClientRect();

-					if (!referenceRect) return;

-					const scrollLeft = scrollContainer?.scrollLeft ?? 0;

-					const scrollTop = scrollContainer?.scrollTop ?? 0;

-					const mouseX = e.clientX - referenceRect.left + scrollLeft;

-					const headerHeight =

-						headerRef?.current?.getBoundingClientRect().height ?? 0;

-					const mouseY =

-						e.clientY - referenceRect.top + scrollTop - headerHeight;

-					await executeFileDrop({

-						files: Array.from(e.dataTransfer.files),

-						mouseX,

-						mouseY,

-					});

-				}

-			} catch (err) {

-				console.error("Failed to process drop:", err);

-			}

-		},

-		[

-			dropTarget,

-			executeTextDrop,

-			executeGraphicDrop,

-			executeStickerDrop,

-			executeMediaDrop,

-			executeEffectDrop,

-			executeFileDrop,

-			containerRef,

-			headerRef,

-			tracksScrollRef,

-		],

-	);

-

-	return {

-		isDragOver,

-		dropTarget,

-		dragElementType,

-		dragProps: {

-			onDragEnter: handleDragEnter,

-			onDragOver: handleDragOver,

-			onDragLeave: handleDragLeave,

-			onDrop: handleDrop,

-		},

-	};

-}

+import { useState, useCallback, type RefObject } from "react";
+import { useEditor } from "@/hooks/use-editor";
+import { processMediaAssets } from "@/lib/media/processing";
+import { toast } from "sonner";
+import { showMediaUploadToast } from "@/lib/media/upload-toast";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { snapTimeToFrame } from "opencut-wasm";
+import {
+	buildTextElement,
+	buildGraphicElement,
+	buildStickerElement,
+	buildElementFromMedia,
+	buildEffectElement,
+} from "@/lib/timeline/element-utils";
+import { AddTrackCommand, InsertElementCommand } from "@/lib/commands/timeline";
+import { BatchCommand } from "@/lib/commands";
+import { computeDropTarget } from "@/lib/timeline/drop-utils";
+import { getDragData, hasDragData } from "@/lib/drag-data";
+import { isMainTrack } from "@/lib/timeline/track-utils";
+import type { TrackType, DropTarget, ElementType } from "@/lib/timeline";
+import type {
+	MediaDragData,
+	GraphicDragData,
+	StickerDragData,
+	EffectDragData,
+} from "@/lib/timeline/drag";
+
+interface UseTimelineDragDropProps {
+	containerRef: RefObject<HTMLDivElement | null>;
+	headerRef?: RefObject<HTMLElement | null>;
+	tracksScrollRef?: RefObject<HTMLDivElement | null>;
+	zoomLevel: number;
+}
+
+export function useTimelineDragDrop({
+	containerRef,
+	headerRef,
+	tracksScrollRef,
+	zoomLevel,
+}: UseTimelineDragDropProps) {
+	const editor = useEditor();
+	const [isDragOver, setIsDragOver] = useState(false);
+	const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
+	const [dragElementType, setElementType] = useState<ElementType | null>(null);
+
+	const getSnappedTime = useCallback(
+		({ time }: { time: number }) => {
+			const projectFps = editor.project.getActive().settings.fps;
+			return snapTimeToFrame({ time, fps: projectFps });
+		},
+		[editor],
+	);
+
+	const getElementType = useCallback(
+		({ dataTransfer }: { dataTransfer: DataTransfer }): ElementType | null => {
+			const dragData = getDragData({ dataTransfer });
+			if (!dragData) return null;
+
+			if (dragData.type === "text") return "text";
+			if (dragData.type === "graphic") return "graphic";
+			if (dragData.type === "sticker") return "sticker";
+			if (dragData.type === "effect") return "effect";
+			if (dragData.type === "media") {
+				return dragData.mediaType;
+			}
+			return null;
+		},
+		[],
+	);
+
+	const getElementDuration = useCallback(
+		({
+			elementType,
+			mediaId,
+		}: {
+			elementType: ElementType;
+			mediaId?: string;
+		}): number => {
+			if (
+				elementType === "text" ||
+				elementType === "graphic" ||
+				elementType === "sticker" ||
+				elementType === "effect"
+			) {
+				return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+			}
+			if (mediaId) {
+				const mediaAssets = editor.media.getAssets();
+				const media = mediaAssets.find((m) => m.id === mediaId);
+				return media?.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+			}
+			return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+		},
+		[editor],
+	);
+
+	const handleDragEnter = useCallback((e: React.DragEvent) => {
+		e.preventDefault();
+		const hasAsset = hasDragData({ dataTransfer: e.dataTransfer });
+		const hasFiles = e.dataTransfer.types.includes("Files");
+		if (!hasAsset && !hasFiles) return;
+		setIsDragOver(true);
+	}, []);
+
+	const handleDragOver = useCallback(
+		(e: React.DragEvent) => {
+			e.preventDefault();
+
+			const scrollContainer = tracksScrollRef?.current;
+			const referenceRect =
+				scrollContainer?.getBoundingClientRect() ??
+				containerRef.current?.getBoundingClientRect();
+			if (!referenceRect) return;
+
+			const headerHeight =
+				headerRef?.current?.getBoundingClientRect().height ?? 0;
+			const scrollLeft = scrollContainer?.scrollLeft ?? 0;
+			const scrollTop = scrollContainer?.scrollTop ?? 0;
+			const hasFiles = e.dataTransfer.types.includes("Files");
+			const isExternal =
+				hasFiles && !hasDragData({ dataTransfer: e.dataTransfer });
+
+			const elementType = getElementType({ dataTransfer: e.dataTransfer });
+
+			if (!elementType && hasFiles && isExternal) {
+				setDropTarget(null);
+				setElementType(null);
+				return;
+			}
+
+			if (!elementType) return;
+
+			setElementType(elementType);
+
+			const dragData = getDragData({ dataTransfer: e.dataTransfer });
+			const duration = getElementDuration({
+				elementType,
+				mediaId: dragData?.type === "media" ? dragData.id : undefined,
+			});
+
+			const mouseX = e.clientX - referenceRect.left + scrollLeft;
+			const mouseY = e.clientY - referenceRect.top + scrollTop - headerHeight;
+
+			const targetElementTypes =
+				dragData?.type === "effect"
+					? (dragData as EffectDragData).targetElementTypes
+					: dragData?.type === "media"
+						? (dragData as MediaDragData).targetElementTypes
+						: undefined;
+
+			const tracks = editor.timeline.getTracks();
+			const currentTime = editor.playback.getCurrentTime();
+			const target = computeDropTarget({
+				elementType,
+				mouseX,
+				mouseY,
+				tracks,
+				playheadTime: currentTime,
+				isExternalDrop: isExternal,
+				elementDuration: duration,
+				pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
+				zoomLevel,
+				targetElementTypes,
+			});
+
+			target.xPosition = getSnappedTime({ time: target.xPosition });
+
+			setDropTarget(target);
+			e.dataTransfer.dropEffect = "copy";
+		},
+		[
+			containerRef,
+			headerRef,
+			tracksScrollRef,
+			zoomLevel,
+			getElementType,
+			getElementDuration,
+			getSnappedTime,
+			editor,
+		],
+	);
+
+	const handleDragLeave = useCallback(
+		(e: React.DragEvent) => {
+			e.preventDefault();
+			const rect = containerRef.current?.getBoundingClientRect();
+			if (rect) {
+				const { clientX, clientY } = e;
+				if (
+					clientX < rect.left ||
+					clientX > rect.right ||
+					clientY < rect.top ||
+					clientY > rect.bottom
+				) {
+					setIsDragOver(false);
+					setDropTarget(null);
+					setElementType(null);
+				}
+			}
+		},
+		[containerRef],
+	);
+
+	const executeTextDrop = useCallback(
+		({
+			target,
+			dragData,
+		}: {
+			target: DropTarget;
+			dragData: { name?: string; content?: string };
+		}) => {
+			const element = buildTextElement({
+				raw: {
+					name: dragData.name ?? "",
+					content: dragData.content ?? "",
+				},
+				startTime: target.xPosition,
+			});
+
+			if (target.isNewTrack) {
+				const addTrackCmd = new AddTrackCommand("text", target.trackIndex);
+				const insertCmd = new InsertElementCommand({
+					element,
+					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },
+				});
+				editor.command.execute({
+					command: new BatchCommand([addTrackCmd, insertCmd]),
+				});
+				return;
+			}
+
+			const tracks = editor.timeline.getTracks();
+			const track = tracks[target.trackIndex];
+			if (!track) return;
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId: track.id },
+				element,
+			});
+		},
+		[editor],
+	);
+
+	const executeStickerDrop = useCallback(
+		({
+			target,
+			dragData,
+		}: {
+			target: DropTarget;
+			dragData: StickerDragData;
+		}) => {
+			const element = buildStickerElement({
+				stickerId: dragData.stickerId,
+				name: dragData.name,
+				startTime: target.xPosition,
+			});
+
+			if (target.isNewTrack) {
+				const addTrackCmd = new AddTrackCommand("graphic", target.trackIndex);
+				const insertCmd = new InsertElementCommand({
+					element,
+					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },
+				});
+				editor.command.execute({
+					command: new BatchCommand([addTrackCmd, insertCmd]),
+				});
+				return;
+			}
+
+			const tracks = editor.timeline.getTracks();
+			const track = tracks[target.trackIndex];
+			if (!track) return;
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId: track.id },
+				element,
+			});
+		},
+		[editor],
+	);
+
+	const executeGraphicDrop = useCallback(
+		({
+			target,
+			dragData,
+		}: {
+			target: DropTarget;
+			dragData: GraphicDragData;
+		}) => {
+			const element = buildGraphicElement({
+				definitionId: dragData.definitionId,
+				name: dragData.name,
+				startTime: target.xPosition,
+				params: dragData.params,
+			});
+
+			if (target.isNewTrack) {
+				const addTrackCmd = new AddTrackCommand("graphic", target.trackIndex);
+				const insertCmd = new InsertElementCommand({
+					element,
+					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },
+				});
+				editor.command.execute({
+					command: new BatchCommand([addTrackCmd, insertCmd]),
+				});
+				return;
+			}
+
+			const tracks = editor.timeline.getTracks();
+			const track = tracks[target.trackIndex];
+			if (!track) return;
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId: track.id },
+				element,
+			});
+		},
+		[editor],
+	);
+
+	const executeMediaDrop = useCallback(
+		({ target, dragData }: { target: DropTarget; dragData: MediaDragData }) => {
+			if (target.targetElement) {
+				toast.info("Replace media source is coming soon!");
+				return;
+			}
+
+			const mediaAssets = editor.media.getAssets();
+			const mediaAsset = mediaAssets.find((m) => m.id === dragData.id);
+			if (!mediaAsset) return;
+
+			const trackType: TrackType =
+				dragData.mediaType === "audio" ? "audio" : "video";
+
+			const duration =
+				mediaAsset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+			const element = buildElementFromMedia({
+				mediaId: mediaAsset.id,
+				mediaType: mediaAsset.type,
+				name: mediaAsset.name,
+				duration,
+				startTime: target.xPosition,
+			});
+
+			if (target.isNewTrack) {
+				const addTrackCmd = new AddTrackCommand(trackType, target.trackIndex);
+				const insertCmd = new InsertElementCommand({
+					element,
+					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },
+				});
+				editor.command.execute({
+					command: new BatchCommand([addTrackCmd, insertCmd]),
+				});
+				return;
+			}
+
+			const tracks = editor.timeline.getTracks();
+			const track = tracks[target.trackIndex];
+			if (!track) return;
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId: track.id },
+				element,
+			});
+		},
+		[editor],
+	);
+
+	const executeEffectDrop = useCallback(
+		({
+			target,
+			dragData,
+		}: {
+			target: DropTarget;
+			dragData: EffectDragData;
+		}) => {
+			if (target.targetElement) {
+				editor.timeline.addClipEffect({
+					trackId: target.targetElement.trackId,
+					elementId: target.targetElement.elementId,
+					effectType: dragData.effectType,
+				});
+				return;
+			}
+
+			const tracks = editor.timeline.getTracks();
+			const effectTrack = tracks.find((t) => t.type === "effect");
+			let trackId: string;
+
+			if (effectTrack) {
+				trackId = effectTrack.id;
+			} else if (target.isNewTrack) {
+				const addTrackCmd = new AddTrackCommand("effect", target.trackIndex);
+				const insertCmd = new InsertElementCommand({
+					element: buildEffectElement({
+						effectType: dragData.effectType,
+						startTime: target.xPosition,
+					}),
+					placement: { mode: "explicit", trackId: addTrackCmd.getTrackId() },
+				});
+				editor.command.execute({
+					command: new BatchCommand([addTrackCmd, insertCmd]),
+				});
+				return;
+			} else {
+				const track = tracks[target.trackIndex];
+				if (!track || track.type !== "effect") return;
+				trackId = track.id;
+			}
+
+			const element = buildEffectElement({
+				effectType: dragData.effectType,
+				startTime: target.xPosition,
+			});
+
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId },
+				element,
+			});
+		},
+		[editor],
+	);
+
+	const executeFileDrop = useCallback(
+		async ({
+			files,
+			mouseX,
+			mouseY,
+		}: {
+			files: File[];
+			mouseX: number;
+			mouseY: number;
+		}) => {
+			const activeProject = editor.project.getActiveOrNull();
+			if (!activeProject) return;
+
+			await showMediaUploadToast({
+				filesCount: files.length,
+				promise: async () => {
+					const processedAssets = await processMediaAssets({ files });
+					const projectId = activeProject.metadata.id;
+
+					for (const asset of processedAssets) {
+						const createdAsset = await editor.media.addMediaAsset({
+							projectId,
+							asset,
+						});
+						if (!createdAsset) continue;
+
+						const duration =
+							createdAsset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+						const currentTracks = editor.timeline.getTracks();
+						const currentTime = editor.playback.getCurrentTime();
+						const onlyTrack = currentTracks[0];
+						const reuseMainTrackId =
+							createdAsset.type !== "audio" &&
+							currentTracks.length === 1 &&
+							!!onlyTrack &&
+							isMainTrack(onlyTrack) &&
+							onlyTrack.elements.length === 0
+								? onlyTrack.id
+								: null;
+						const dropTarget = reuseMainTrackId
+							? null
+							: computeDropTarget({
+									elementType: createdAsset.type,
+									mouseX,
+									mouseY,
+									tracks: currentTracks,
+									playheadTime: currentTime,
+									isExternalDrop: true,
+									elementDuration: duration,
+									pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
+									zoomLevel,
+								});
+
+						const trackType: TrackType =
+							createdAsset.type === "audio" ? "audio" : "video";
+
+						let trackId: string | undefined;
+						if (reuseMainTrackId) {
+							trackId = reuseMainTrackId;
+						} else {
+							if (!dropTarget) continue;
+							if (dropTarget.isNewTrack) {
+								const addTrackCmd = new AddTrackCommand(
+									trackType,
+									dropTarget.trackIndex,
+								);
+								trackId = addTrackCmd.getTrackId();
+								editor.command.execute({ command: addTrackCmd });
+							} else {
+								trackId = currentTracks[dropTarget.trackIndex]?.id;
+							}
+						}
+
+						if (!trackId) continue;
+
+						const element = buildElementFromMedia({
+							mediaId: createdAsset.id,
+							mediaType: createdAsset.type,
+							name: createdAsset.name,
+							duration,
+							startTime: dropTarget?.xPosition ?? currentTime,
+							buffer:
+								createdAsset.type === "audio"
+									? new AudioBuffer({ length: 1, sampleRate: 44100 })
+									: undefined,
+						});
+
+						const insertCmd = new InsertElementCommand({
+							element,
+							placement: { mode: "explicit", trackId },
+						});
+						editor.command.execute({ command: insertCmd });
+					}
+
+					return {
+						uploadedCount: processedAssets.length,
+						assetNames: processedAssets.map((asset) => asset.name),
+					};
+				},
+			});
+		},
+		[editor, zoomLevel],
+	);
+
+	const handleDrop = useCallback(
+		async (e: React.DragEvent) => {
+			e.preventDefault();
+
+			const hasAsset = hasDragData({ dataTransfer: e.dataTransfer });
+			const hasFiles = e.dataTransfer.files?.length > 0;
+
+			if (!hasAsset && !hasFiles) return;
+
+			const currentTarget = dropTarget;
+			setIsDragOver(false);
+			setDropTarget(null);
+			setElementType(null);
+
+			try {
+				if (hasAsset) {
+					if (!currentTarget) return;
+					const dragData = getDragData({ dataTransfer: e.dataTransfer });
+					if (!dragData) return;
+
+					if (dragData.type === "text") {
+						executeTextDrop({ target: currentTarget, dragData });
+					} else if (dragData.type === "graphic") {
+						executeGraphicDrop({
+							target: currentTarget,
+							dragData: dragData as GraphicDragData,
+						});
+					} else if (dragData.type === "sticker") {
+						executeStickerDrop({ target: currentTarget, dragData });
+					} else if (dragData.type === "effect") {
+						executeEffectDrop({
+							target: currentTarget,
+							dragData: dragData as EffectDragData,
+						});
+					} else {
+						executeMediaDrop({ target: currentTarget, dragData });
+					}
+				} else if (hasFiles) {
+					const scrollContainer = tracksScrollRef?.current;
+					const referenceRect =
+						scrollContainer?.getBoundingClientRect() ??
+						containerRef.current?.getBoundingClientRect();
+					if (!referenceRect) return;
+					const scrollLeft = scrollContainer?.scrollLeft ?? 0;
+					const scrollTop = scrollContainer?.scrollTop ?? 0;
+					const mouseX = e.clientX - referenceRect.left + scrollLeft;
+					const headerHeight =
+						headerRef?.current?.getBoundingClientRect().height ?? 0;
+					const mouseY =
+						e.clientY - referenceRect.top + scrollTop - headerHeight;
+					await executeFileDrop({
+						files: Array.from(e.dataTransfer.files),
+						mouseX,
+						mouseY,
+					});
+				}
+			} catch (err) {
+				console.error("Failed to process drop:", err);
+			}
+		},
+		[
+			dropTarget,
+			executeTextDrop,
+			executeGraphicDrop,
+			executeStickerDrop,
+			executeMediaDrop,
+			executeEffectDrop,
+			executeFileDrop,
+			containerRef,
+			headerRef,
+			tracksScrollRef,
+		],
+	);
+
+	return {
+		isDragOver,
+		dropTarget,
+		dragElementType,
+		dragProps: {
+			onDragEnter: handleDragEnter,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop,
+		},
+	};
+}
diff --git a/apps/web/src/hooks/timeline/use-timeline-playhead.ts b/apps/web/src/hooks/timeline/use-timeline-playhead.ts
index e6204f23..d4cfcc06 100644
--- a/apps/web/src/hooks/timeline/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-playhead.ts
@@ -1,4 +1,4 @@
-import { getSnappedSeekTime } from "@/lib/time";
+import { getSnappedSeekTime } from "opencut-wasm";
 import { useEffect, useCallback, useRef } from "react";
 import { useEdgeAutoScroll } from "@/hooks/timeline/use-edge-auto-scroll";
 import { useEditor } from "../use-editor";
@@ -83,11 +83,7 @@ export function useTimelinePlayhead({
 			);
 
 			const framesPerSecond = activeProject.settings.fps;
-			const frameTime = getSnappedSeekTime({
-				rawTime,
-				duration,
-				fps: framesPerSecond,
-			});
+			const frameTime = getSnappedSeekTime({ rawTime, duration, fps: framesPerSecond });
 
 			const shouldSnap = snappingEnabled && !isShiftHeldRef.current;
 			const time = (() => {
diff --git a/apps/web/src/hooks/timeline/use-timeline-seek.ts b/apps/web/src/hooks/timeline/use-timeline-seek.ts
index 4abbf023..2672062f 100644
--- a/apps/web/src/hooks/timeline/use-timeline-seek.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-seek.ts
@@ -1,197 +1,193 @@
-import { useCallback, useRef } from "react";

-import type { MutableRefObject, RefObject } from "react";

-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

-import { getSnappedSeekTime } from "@/lib/time";

-import { useEditor } from "../use-editor";

-

-interface UseTimelineSeekProps {

-	playheadRef: RefObject<HTMLDivElement | null>;

-	trackLabelsRef: RefObject<HTMLDivElement | null>;

-	rulerScrollRef: RefObject<HTMLDivElement | null>;

-	tracksScrollRef: RefObject<HTMLDivElement | null>;

-	zoomLevel: number;

-	duration: number;

-	isSelecting: boolean;

-	clearSelectedElements: () => void;

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

-}

-

-function resetMouseTracking({

-	mouseTrackingRef,

-}: {

-	mouseTrackingRef: MutableRefObject<{

-		isMouseDown: boolean;

-		downX: number;

-		downY: number;

-		downTime: number;

-	}>;

-}) {

-	mouseTrackingRef.current = {

-		isMouseDown: false,

-		downX: 0,

-		downY: 0,

-		downTime: 0,

-	};

-}

-

-function setMouseTracking({

-	mouseTrackingRef,

-	event,

-}: {

-	mouseTrackingRef: MutableRefObject<{

-		isMouseDown: boolean;

-		downX: number;

-		downY: number;

-		downTime: number;

-	}>;

-	event: React.MouseEvent;

-}) {

-	mouseTrackingRef.current = {

-		isMouseDown: true,

-		downX: event.clientX,

-		downY: event.clientY,

-		downTime: event.timeStamp,

-	};

-}

-

-export function useTimelineSeek({

-	playheadRef,

-	trackLabelsRef,

-	rulerScrollRef,

-	tracksScrollRef,

-	zoomLevel,

-	duration,

-	isSelecting,

-	clearSelectedElements,

-	seek,

-}: UseTimelineSeekProps) {

-	const editor = useEditor();

-	const activeProject = editor.project.getActive();

-

-	const mouseTrackingRef = useRef({

-		isMouseDown: false,

-		downX: 0,

-		downY: 0,

-		downTime: 0,

-	});

-

-	const handleTracksMouseDown = useCallback((event: React.MouseEvent) => {

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

-		setMouseTracking({ mouseTrackingRef, event });

-	}, []);

-

-	const handleRulerMouseDown = useCallback((event: React.MouseEvent) => {

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

-		setMouseTracking({ mouseTrackingRef, event });

-	}, []);

-

-	const shouldProcessTimelineClick = useCallback(

-		({ event }: { event: React.MouseEvent }) => {

-			const target = event.target as HTMLElement;

-			const { isMouseDown, downX, downY, downTime } = mouseTrackingRef.current;

-			const deltaX = Math.abs(event.clientX - downX);

-			const deltaY = Math.abs(event.clientY - downY);

-			const deltaTime = event.timeStamp - downTime;

-			const isPlayhead = !!playheadRef.current?.contains(target);

-			const isTrackLabels = !!trackLabelsRef.current?.contains(target);

-			const shouldBlockForDrag = deltaX > 5 || deltaY > 5 || deltaTime > 500;

-

-			if (!isMouseDown) return false;

-			if (shouldBlockForDrag) return false;

-			if (isSelecting) return false;

-			if (isPlayhead) return false;

-			if (isTrackLabels) {

-				clearSelectedElements();

-				return false;

-			}

-

-			return true;

-		},

-		[isSelecting, clearSelectedElements, playheadRef, trackLabelsRef],

-	);

-

-	const handleTimelineSeek = useCallback(

-		({

-			event,

-			source,

-		}: {

-			event: React.MouseEvent;

-			source: "ruler" | "tracks";

-		}) => {

-			const scrollContainer =

-				source === "ruler" ? rulerScrollRef.current : tracksScrollRef.current;

-

-			if (!scrollContainer) return;

-

-			const rect = scrollContainer.getBoundingClientRect();

-			const mouseX = event.clientX - rect.left;

-			const scrollLeft = scrollContainer.scrollLeft;

-

-			const rawTime = Math.max(

-				0,

-				Math.min(

-					duration,

-					(mouseX + scrollLeft) /

-						(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),

-				),

-			);

-

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

-			const time = getSnappedSeekTime({

-				rawTime,

-				duration,

-				fps: projectFps,

-			});

-			seek(time);

-			editor.project.setTimelineViewState({

-				viewState: {

-					zoomLevel,

-					scrollLeft: scrollContainer.scrollLeft,

-					playheadTime: time,

-				},

-			});

-		},

-		[

-			duration,

-			zoomLevel,

-			rulerScrollRef,

-			tracksScrollRef,

-			seek,

-			editor,

-			activeProject?.settings.fps,

-		],

-	);

-

-	const handleTracksClick = useCallback(

-		(event: React.MouseEvent) => {

-			const shouldProcess = shouldProcessTimelineClick({ event });

-			resetMouseTracking({ mouseTrackingRef });

-

-			if (shouldProcess) {

-				clearSelectedElements();

-				handleTimelineSeek({ event, source: "tracks" });

-			}

-		},

-		[shouldProcessTimelineClick, handleTimelineSeek, clearSelectedElements],

-	);

-

-	const handleRulerClick = useCallback(

-		(event: React.MouseEvent) => {

-			const shouldProcess = shouldProcessTimelineClick({ event });

-			resetMouseTracking({ mouseTrackingRef });

-

-			if (shouldProcess) {

-				clearSelectedElements();

-				handleTimelineSeek({ event, source: "ruler" });

-			}

-		},

-		[shouldProcessTimelineClick, handleTimelineSeek, clearSelectedElements],

-	);

-

-	return {

-		handleTracksMouseDown,

-		handleTracksClick,

-		handleRulerMouseDown,

-		handleRulerClick,

-	};

-}

+import { useCallback, useRef } from "react";
+import type { MutableRefObject, RefObject } from "react";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { getSnappedSeekTime } from "opencut-wasm";
+import { useEditor } from "../use-editor";
+
+interface UseTimelineSeekProps {
+	playheadRef: RefObject<HTMLDivElement | null>;
+	trackLabelsRef: RefObject<HTMLDivElement | null>;
+	rulerScrollRef: RefObject<HTMLDivElement | null>;
+	tracksScrollRef: RefObject<HTMLDivElement | null>;
+	zoomLevel: number;
+	duration: number;
+	isSelecting: boolean;
+	clearSelectedElements: () => void;
+	seek: (time: number) => void;
+}
+
+function resetMouseTracking({
+	mouseTrackingRef,
+}: {
+	mouseTrackingRef: MutableRefObject<{
+		isMouseDown: boolean;
+		downX: number;
+		downY: number;
+		downTime: number;
+	}>;
+}) {
+	mouseTrackingRef.current = {
+		isMouseDown: false,
+		downX: 0,
+		downY: 0,
+		downTime: 0,
+	};
+}
+
+function setMouseTracking({
+	mouseTrackingRef,
+	event,
+}: {
+	mouseTrackingRef: MutableRefObject<{
+		isMouseDown: boolean;
+		downX: number;
+		downY: number;
+		downTime: number;
+	}>;
+	event: React.MouseEvent;
+}) {
+	mouseTrackingRef.current = {
+		isMouseDown: true,
+		downX: event.clientX,
+		downY: event.clientY,
+		downTime: event.timeStamp,
+	};
+}
+
+export function useTimelineSeek({
+	playheadRef,
+	trackLabelsRef,
+	rulerScrollRef,
+	tracksScrollRef,
+	zoomLevel,
+	duration,
+	isSelecting,
+	clearSelectedElements,
+	seek,
+}: UseTimelineSeekProps) {
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+
+	const mouseTrackingRef = useRef({
+		isMouseDown: false,
+		downX: 0,
+		downY: 0,
+		downTime: 0,
+	});
+
+	const handleTracksMouseDown = useCallback((event: React.MouseEvent) => {
+		if (event.button !== 0) return;
+		setMouseTracking({ mouseTrackingRef, event });
+	}, []);
+
+	const handleRulerMouseDown = useCallback((event: React.MouseEvent) => {
+		if (event.button !== 0) return;
+		setMouseTracking({ mouseTrackingRef, event });
+	}, []);
+
+	const shouldProcessTimelineClick = useCallback(
+		({ event }: { event: React.MouseEvent }) => {
+			const target = event.target as HTMLElement;
+			const { isMouseDown, downX, downY, downTime } = mouseTrackingRef.current;
+			const deltaX = Math.abs(event.clientX - downX);
+			const deltaY = Math.abs(event.clientY - downY);
+			const deltaTime = event.timeStamp - downTime;
+			const isPlayhead = !!playheadRef.current?.contains(target);
+			const isTrackLabels = !!trackLabelsRef.current?.contains(target);
+			const shouldBlockForDrag = deltaX > 5 || deltaY > 5 || deltaTime > 500;
+
+			if (!isMouseDown) return false;
+			if (shouldBlockForDrag) return false;
+			if (isSelecting) return false;
+			if (isPlayhead) return false;
+			if (isTrackLabels) {
+				clearSelectedElements();
+				return false;
+			}
+
+			return true;
+		},
+		[isSelecting, clearSelectedElements, playheadRef, trackLabelsRef],
+	);
+
+	const handleTimelineSeek = useCallback(
+		({
+			event,
+			source,
+		}: {
+			event: React.MouseEvent;
+			source: "ruler" | "tracks";
+		}) => {
+			const scrollContainer =
+				source === "ruler" ? rulerScrollRef.current : tracksScrollRef.current;
+
+			if (!scrollContainer) return;
+
+			const rect = scrollContainer.getBoundingClientRect();
+			const mouseX = event.clientX - rect.left;
+			const scrollLeft = scrollContainer.scrollLeft;
+
+			const rawTime = Math.max(
+				0,
+				Math.min(
+					duration,
+					(mouseX + scrollLeft) /
+						(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
+				),
+			);
+
+			const projectFps = activeProject?.settings.fps || 30;
+			const time = getSnappedSeekTime({ rawTime, duration, fps: projectFps });
+			seek(time);
+			editor.project.setTimelineViewState({
+				viewState: {
+					zoomLevel,
+					scrollLeft: scrollContainer.scrollLeft,
+					playheadTime: time,
+				},
+			});
+		},
+		[
+			duration,
+			zoomLevel,
+			rulerScrollRef,
+			tracksScrollRef,
+			seek,
+			editor,
+			activeProject?.settings.fps,
+		],
+	);
+
+	const handleTracksClick = useCallback(
+		(event: React.MouseEvent) => {
+			const shouldProcess = shouldProcessTimelineClick({ event });
+			resetMouseTracking({ mouseTrackingRef });
+
+			if (shouldProcess) {
+				clearSelectedElements();
+				handleTimelineSeek({ event, source: "tracks" });
+			}
+		},
+		[shouldProcessTimelineClick, handleTimelineSeek, clearSelectedElements],
+	);
+
+	const handleRulerClick = useCallback(
+		(event: React.MouseEvent) => {
+			const shouldProcess = shouldProcessTimelineClick({ event });
+			resetMouseTracking({ mouseTrackingRef });
+
+			if (shouldProcess) {
+				clearSelectedElements();
+				handleTimelineSeek({ event, source: "ruler" });
+			}
+		},
+		[shouldProcessTimelineClick, handleTimelineSeek, clearSelectedElements],
+	);
+
+	return {
+		handleTracksMouseDown,
+		handleTracksClick,
+		handleRulerMouseDown,
+		handleRulerClick,
+	};
+}