Pane handles: extract shared useColResizeDrag pointer gesture

src/app/components/PaneSplitHandle.tsx

@@ -17,6 +17,7 @@
  */
 
 import { useRef } from 'react';
+import { useColResizeDrag } from '../hooks/useColResizeDrag';
 import { splitLibraryWidth, splitValue, usePanesStore } from '../stores/PanesStore';
 import styles from './ResizeHandle.module.css';
 
@@ -56,25 +57,10 @@ export function PaneSplitHandle({ label }: PaneSplitHandleProps) {
     usePanesStore.getState().setSplit(library, avail - library);
   };
 
-  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (e.button !== 0) return; // primary button only
-    e.preventDefault();
-    const startX = e.clientX;
-    const startLib = flanks().lib?.clientWidth ?? 0;
-
-    const onMove = (ev: PointerEvent) => applySplit(startLib + (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';
-  };
+  const onPointerDown = useColResizeDrag(
+    () => flanks().lib?.clientWidth ?? 0,
+    (startLib, delta) => applySplit(startLib + delta),
+  );
 
   // Keyboard per WAI-ARIA APG → Window Splitter: arrows nudge the library side;
   // Home/End jump to the library's smallest/largest allowed share of the span.