refactor(web): split touch canvas adapters

apps/web/src/hooks/timelineTouch.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { createTouchMouseDownEvent, getTouchPoint, resolveTouchDragDecision } from "./timelineTouch.js";
+import { getTouchPoint, resolveTouchDragDecision } from "./timelineTouch.js";
 
 describe("timelineTouch", () => {
   it("falls back from active touches to changedTouches and then zeroes", () => {
@@ -73,24 +73,4 @@ describe("timelineTouch", () => {
     });
   });
 
-  it("creates a primary-button mouse-down adapter for touch handlers", () => {
-    const currentTarget = new EventTarget();
-
-    expect(createTouchMouseDownEvent({ clientX: 42, clientY: 17 }, currentTarget)).toMatchObject({
-      button: 0,
-      clientX: 42,
-      currentTarget,
-      shiftKey: false,
-    });
-  });
-
-  it("allows missing targets when creating a touch mouse-down adapter", () => {
-    const event = createTouchMouseDownEvent({ clientX: 7, clientY: 9 });
-
-    expect(event.currentTarget).toBeNull();
-    expect(() => {
-      event.preventDefault();
-      event.stopPropagation();
-    }).not.toThrow();
-  });
 });

apps/web/src/hooks/timelineTouch.ts

@@ -9,15 +9,6 @@ export type TouchDecisionState = {
   decided: boolean;
 };
 
-export type TouchMouseDownEvent = {
-  button: number;
-  clientX: number;
-  currentTarget?: EventTarget | null;
-  shiftKey: boolean;
-  preventDefault: () => void;
-  stopPropagation: () => void;
-};
-
 type TouchLike = {
   clientX: number;
   clientY: number;
@@ -36,20 +27,6 @@ export function getTouchPoint(event: TouchEventLike): TouchPoint {
   };
 }
 
-export function createTouchMouseDownEvent(
-  point: TouchPoint,
-  currentTarget?: EventTarget | null,
-): TouchMouseDownEvent {
-  return {
-    button: 0,
-    clientX: point.clientX,
-    currentTarget: currentTarget ?? null,
-    shiftKey: false,
-    preventDefault: () => {},
-    stopPropagation: () => {},
-  };
-}
-
 export function resolveTouchDragDecision(
   state: TouchDecisionState,
   point: TouchPoint,

apps/web/src/hooks/timelineTouchAdapters.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { createTouchCanvasPointerEvent, createTouchMouseDownEvent } from "./timelineTouchAdapters.js";
+
+describe("timelineTouchAdapters", () => {
+  it("creates a primary-button mouse-down adapter for touch handlers", () => {
+    const currentTarget = new EventTarget();
+
+    expect(createTouchMouseDownEvent({ clientX: 42, clientY: 17 }, currentTarget)).toMatchObject({
+      button: 0,
+      clientX: 42,
+      currentTarget,
+      shiftKey: false,
+    });
+  });
+
+  it("allows missing targets when creating a touch mouse-down adapter", () => {
+    const event = createTouchMouseDownEvent({ clientX: 7, clientY: 9 });
+
+    expect(event.currentTarget).toBeNull();
+    expect(() => {
+      event.preventDefault();
+      event.stopPropagation();
+    }).not.toThrow();
+  });
+
+  it("creates a canvas pointer event with both coordinates preserved", () => {
+    expect(createTouchCanvasPointerEvent({ clientX: 21, clientY: 34 })).toEqual({
+      clientX: 21,
+      clientY: 34,
+    });
+  });
+});

apps/web/src/hooks/timelineTouchAdapters.ts

@@ -0,0 +1,36 @@
+import type { TouchPoint } from "./timelineTouch.js";
+
+export type TouchMouseDownEvent = {
+  button: number;
+  clientX: number;
+  currentTarget?: EventTarget | null;
+  shiftKey: boolean;
+  preventDefault: () => void;
+  stopPropagation: () => void;
+};
+
+export type TouchCanvasPointerEvent = {
+  clientX: number;
+  clientY: number;
+};
+
+export function createTouchMouseDownEvent(
+  point: TouchPoint,
+  currentTarget?: EventTarget | null,
+): TouchMouseDownEvent {
+  return {
+    button: 0,
+    clientX: point.clientX,
+    currentTarget: currentTarget ?? null,
+    shiftKey: false,
+    preventDefault: () => {},
+    stopPropagation: () => {},
+  };
+}
+
+export function createTouchCanvasPointerEvent(point: TouchPoint): TouchCanvasPointerEvent {
+  return {
+    clientX: point.clientX,
+    clientY: point.clientY,
+  };
+}

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(createTouchCanvasPointerEvent(getTouchPoint(e)));
-      await onCanvasMouseUp({ clientX, clientY } as React.MouseEvent);
     },
     [onCanvasMouseUp],
   );

scripts/check-architecture-guardrails.mjs

@@ -127,10 +127,6 @@ export const rules = [
         pattern: /\bexport function getTouchPoint\b/,
         message: "timeline touch helpers must keep touch coordinate fallback centralized",
       },
-      {
-        pattern: /\bexport function createTouchMouseDownEvent\b/,
-        message: "timeline touch helpers must keep touch-to-mouse adapter wiring centralized",
-      },
       {
         pattern: /\bexport function resolveTouchDragDecision\b/,
         message: "timeline touch helpers must keep scroll-vs-drag disambiguation centralized",
@@ -138,6 +134,21 @@ export const rules = [
     ],
     forbidden: [],
   },
+  {
+    file: "apps/web/src/hooks/timelineTouchAdapters.ts",
+    maxLines: 60,
+    required: [
+      {
+        pattern: /\bexport function createTouchMouseDownEvent\b/,
+        message: "timeline touch adapter helpers must keep touch-to-mouse adapter wiring centralized",
+      },
+      {
+        pattern: /\bexport function createTouchCanvasPointerEvent\b/,
+        message: "timeline touch adapter helpers must keep canvas pointer adapter wiring centralized",
+      },
+    ],
+    forbidden: [],
+  },
   {
     file: "apps/web/src/hooks/timelineMultiSelect.ts",
     maxLines: 90,
@@ -307,6 +318,10 @@ export const rules = [
         pattern: /from "\.\/timelineTouch\.js"/,
         message: "timeline drag must keep touch fallback and drag disambiguation delegated to the extracted helper module",
       },
+      {
+        pattern: /from "\.\/timelineTouchAdapters\.js"/,
+        message: "timeline drag must keep touch pointer adapter wiring delegated to the extracted helper module",
+      },
       {
         pattern: /from "\.\/timelineMultiSelect\.js"/,
         message: "timeline drag must keep multi-select rectangle lifecycle delegated to the extracted helper module",
@@ -354,8 +369,8 @@ export const rules = [
         message: "timeline drag must not re-inline touch coordinate fallback helpers",
       },
       {
-        pattern: /as unknown as React\.MouseEvent/,
+        pattern: /as (?:unknown as )?React\.MouseEvent/,
-        message: "timeline drag must not re-inline synthetic touch mouse-down adapters",
+        message: "timeline drag must not re-inline synthetic touch pointer adapters",
       },
       {
         pattern: /\bfunction (?:hasAllocationDateChange|shouldTreatAllocationDragAsClick|requiresAllocationFragmentExtraction|buildAllocationMovedSnapshot|reconcileOptimisticEntries)\b/,

scripts/check-architecture-guardrails.test.mjs

@@ -72,6 +72,7 @@ describe("architecture guardrails", () => {
     const dragRule = rules.find((rule) => rule.file === "apps/web/src/hooks/useTimelineDrag.ts");
     const livePreviewRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineLivePreview.ts");
     const touchRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineTouch.ts");
+    const touchAdaptersRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineTouchAdapters.ts");
     const multiSelectRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineMultiSelect.ts");
     const rangeRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineRangeSelection.ts");
     const optimisticRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineOptimisticAllocations.ts");
@@ -86,6 +87,7 @@ describe("architecture guardrails", () => {
     assert.ok(dragRule);
     assert.ok(livePreviewRule);
     assert.ok(touchRule);
+    assert.ok(touchAdaptersRule);
     assert.ok(multiSelectRule);
     assert.ok(rangeRule);
     assert.ok(optimisticRule);
@@ -100,6 +102,7 @@ describe("architecture guardrails", () => {
     assert.deepEqual(evaluateRule(dragRule, "function clearLivePreview() {}\n"), [
       "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep live preview behavior delegated to the extracted helper module",
       "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep touch fallback and drag disambiguation delegated to the extracted helper module",
+      "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep touch pointer adapter wiring delegated to the extracted helper module",
       "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep multi-select rectangle lifecycle delegated to the extracted helper module",
       "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep range preview and finalization delegated to the extracted helper module",
       "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep optimistic allocation reconciliation delegated to the extracted helper module",
@@ -118,10 +121,14 @@ describe("architecture guardrails", () => {
     ]);
 
     assert.deepEqual(evaluateRule(touchRule, "export function getTouchPoint() {}\n"), [
-      "apps/web/src/hooks/timelineTouch.ts: missing guardrail anchor: timeline touch helpers must keep touch-to-mouse adapter wiring centralized",
       "apps/web/src/hooks/timelineTouch.ts: missing guardrail anchor: timeline touch helpers must keep scroll-vs-drag disambiguation centralized",
     ]);
 
+    assert.deepEqual(evaluateRule(touchAdaptersRule, ""), [
+      "apps/web/src/hooks/timelineTouchAdapters.ts: missing guardrail anchor: timeline touch adapter helpers must keep touch-to-mouse adapter wiring centralized",
+      "apps/web/src/hooks/timelineTouchAdapters.ts: missing guardrail anchor: timeline touch adapter helpers must keep canvas pointer adapter wiring centralized",
+    ]);
+
     assert.deepEqual(evaluateRule(multiSelectRule, "export function createMultiSelectState() {}\n"), [
       "apps/web/src/hooks/timelineMultiSelect.ts: missing guardrail anchor: timeline multi-select helpers must keep minimal-drag reset logic centralized",
       "apps/web/src/hooks/timelineMultiSelect.ts: missing guardrail anchor: timeline multi-select helpers must keep right-click release completion centralized",
@@ -175,6 +182,7 @@ describe("architecture guardrails", () => {
       ),
       [
         "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep live preview behavior delegated to the extracted helper module",
+        "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep touch pointer adapter wiring delegated to the extracted helper module",
         "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep multi-select rectangle lifecycle delegated to the extracted helper module",
         "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep range preview and finalization delegated to the extracted helper module",
         "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep optimistic allocation reconciliation delegated to the extracted helper module",
@@ -184,7 +192,7 @@ describe("architecture guardrails", () => {
         "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep allocation multi-drag rules delegated to the extracted helper module",
         "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep allocation drag bootstrap delegated to the extracted helper module",
         "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep project drag bootstrap and mutation gating delegated to the extracted helper module",
-        "apps/web/src/hooks/useTimelineDrag.ts: forbidden pattern matched: timeline drag must not re-inline synthetic touch mouse-down adapters",
+        "apps/web/src/hooks/useTimelineDrag.ts: forbidden pattern matched: timeline drag must not re-inline synthetic touch pointer adapters",
       ],
     );
   });