refactor(web): split touch canvas adapters

apps/web/src/hooks/useTimelineDrag.ts

@@ -29,7 +29,16 @@ import {
 } from "./timelineMultiSelect.js";
 import { reconcileOptimisticEntries } from "./timelineOptimisticAllocations.js";
 import { createRangeSelectionState, finalizeRangeSelection, updateRangeSelectionDraft } from "./timelineRangeSelection.js";
-import { createTouchMouseDownEvent, getTouchPoint, resolveTouchDragDecision, type TouchMouseDownEvent } from "./timelineTouch.js";
+import {
+  createTouchCanvasPointerEvent,
+  createTouchMouseDownEvent,
+  type TouchCanvasPointerEvent,
+  type TouchMouseDownEvent,
+} from "./timelineTouchAdapters.js";
+import {
+  getTouchPoint,
+  resolveTouchDragDecision,
+} from "./timelineTouch.js";
 
 const DRAG_CLICK_THRESHOLD_PX = 5;
 
@@ -811,7 +820,7 @@ export function useTimelineDrag({
   // ── Canvas-level handlers (project shift + range select only) ──────────────
 
   const onCanvasMouseMove = useCallback(
-    (e: React.MouseEvent) => {
+    (e: TouchCanvasPointerEvent) => {
       if (updateProjectDragPosition(e.clientX)) {
         return;
       }
@@ -828,7 +837,7 @@ export function useTimelineDrag({
   );
 
   const onCanvasMouseUp = useCallback(
-    async (e: React.MouseEvent) => {
+    async (e: TouchCanvasPointerEvent) => {
       // Project shift
       const drag = dragStateRef.current;
       if (drag.isDragging) {
@@ -982,15 +991,14 @@ export function useTimelineDrag({
         return;
       }
 
-      onCanvasMouseMove({ clientX: point.clientX } as React.MouseEvent);
+      onCanvasMouseMove(createTouchCanvasPointerEvent(point));
     },
     [onCanvasMouseMove],
   );
 
   const onCanvasTouchEnd = useCallback(
     async (e: React.TouchEvent) => {
-      const { clientX, clientY } = getTouchPoint(e);
-      await onCanvasMouseUp({ clientX, clientY } as React.MouseEvent);
+      await onCanvasMouseUp(createTouchCanvasPointerEvent(getTouchPoint(e)));
     },
     [onCanvasMouseUp],
   );