Pane handles: extract shared useColResizeDrag pointer gesture

src/app/hooks/useColResizeDrag.ts

@@ -0,0 +1,39 @@
+/**
+ * useColResizeDrag — the shared pointer gesture behind the pane drag handles
+ * (ResizeHandle, PaneSplitHandle).
+ *
+ * Returns a `pointerdown` handler: on a primary-button press it measures the
+ * gesture's start value, then tracks the pointer on `window` (the pointer leaves
+ * the thin handle immediately) and feeds each horizontal delta to `apply`. While
+ * dragging, the body is forced to the `col-resize` cursor with text selection
+ * suppressed; release restores both and detaches the listeners.
+ *
+ * Only the gesture lives here — what "the start value" means (a pane width, a
+ * split position) and how a delta becomes layout is the caller's, as is the
+ * keyboard/ARIA half of the splitter contract (it differs per handle).
+ */
+
+export function useColResizeDrag(
+  measureStart: () => number,
+  apply: (start: number, deltaX: number) => void,
+): (e: React.PointerEvent<HTMLElement>) => void {
+  return (e) => {
+    if (e.button !== 0) return; // primary button only
+    e.preventDefault();
+    const startX = e.clientX;
+    const start = measureStart();
+
+    const onMove = (ev: PointerEvent) => apply(start, ev.clientX - startX);
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  };
+}