refactor: snapping system

apps/web/src/hooks/timeline/element/use-element-interaction.ts

@@ -17,14 +17,16 @@ import { snapTimeToFrame } from "@/lib/time";
 import { computeDropTarget } from "@/lib/timeline/drop-utils";
 import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils";
 import { generateUUID } from "@/utils/id";
-import { useTimelineSnapping } from "@/hooks/timeline/use-timeline-snapping";
+import {
+	snapElementEdge,
+	type SnapPoint,
+} from "@/lib/timeline/snap-utils";
 import type {
 	DropTarget,
 	ElementDragState,
 	TimelineElement,
 	TimelineTrack,
 } from "@/types/timeline";
-import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
 
 interface UseElementInteractionProps {
 	zoomLevel: number;
@@ -162,7 +164,6 @@ export function useElementInteraction({
 	const editor = useEditor();
 	const isShiftHeldRef = useShiftKey();
 	const tracks = editor.timeline.getTracks();
-	const { snapElementEdge } = useTimelineSnapping();
 	const {
 		isElementSelected,
 		selectElement,
@@ -255,14 +256,7 @@ export function useElementInteraction({
 				snapPoint: snapResult.snapPoint,
 			};
 		},
-		[
-			snappingEnabled,
-			editor.playback,
-			snapElementEdge,
-			tracks,
-			zoomLevel,
-			isShiftHeldRef,
-		],
+		[snappingEnabled, editor.playback, tracks, zoomLevel, isShiftHeldRef],
 	);
 
 	useEffect(() => {

apps/web/src/hooks/timeline/element/use-element-resize.ts

@@ -5,9 +5,10 @@ import type { TimelineElement, TimelineTrack } from "@/types/timeline";
 import { useEditor } from "@/hooks/use-editor";
 import { useShiftKey } from "@/hooks/use-shift-key";
 import {
-	useTimelineSnapping,
+	findSnapPoints,
+	snapToNearestPoint,
 	type SnapPoint,
-} from "@/hooks/timeline/use-timeline-snapping";
+} from "@/lib/timeline/snap-utils";
 import { useTimelineStore } from "@/stores/timeline-store";
 
 export interface ResizeState {
@@ -39,7 +40,7 @@ export function useTimelineElementResize({
 	const activeProject = editor.project.getActive();
 	const isShiftHeldRef = useShiftKey();
 	const snappingEnabled = useTimelineStore((state) => state.snappingEnabled);
-	const { findSnapPoints, snapToNearestPoint } = useTimelineSnapping();
+
 
 	const [resizing, setResizing] = useState<ResizeState | null>(null);
 	const [currentTrimStart, setCurrentTrimStart] = useState(element.trimStart);
@@ -269,8 +270,6 @@ export function useTimelineElementResize({
 			activeProject.settings.fps,
 			snappingEnabled,
 			editor,
-			findSnapPoints,
-			snapToNearestPoint,
 			element.id,
 			onSnapPointChange,
 			canExtendElementDuration,