fix: keep preventDefault working in the legacy mouse/touch bridge

src/components/SplitPane.tsx

@@ -302,11 +302,15 @@ export function SplitPane(props: SplitPaneProps) {
   const createMouseDownHandler = useCallback(
     (index: number) => (e: React.MouseEvent) => {
       // Create a synthetic pointer event from the mouse event
+      // Spreading a SyntheticEvent only copies own properties,
+      // so preventDefault and stopPropagation must be re-bound.
       const pointerEvent = {
         ...e,
         pointerId: 1,
         pointerType: 'mouse',
         nativeEvent: e.nativeEvent,
+        preventDefault: e.preventDefault.bind(e),
+        stopPropagation: e.stopPropagation.bind(e),
       } as unknown as React.PointerEvent;
       handlePointerDown(index)(pointerEvent);
     },
@@ -318,13 +322,16 @@ export function SplitPane(props: SplitPaneProps) {
       const touch = e.touches[0];
       if (!touch) return;
       // Create a synthetic pointer event from the touch event
+      // See createMouseDownHandler for why preventDefault/stopPropagation are re-bound.
       const pointerEvent = {
         ...e,
         clientX: touch.clientX,
         clientY: touch.clientY,
         pointerId: touch.identifier,
         pointerType: 'touch',
         nativeEvent: e.nativeEvent,
+        preventDefault: e.preventDefault.bind(e),
+        stopPropagation: e.stopPropagation.bind(e),
       } as unknown as React.PointerEvent;
       handlePointerDown(index)(pointerEvent);
     },

src/hooks/useResizer.ts

@@ -225,7 +225,11 @@ export function useResizer(options: UseResizerOptions): UseResizerResult {
       const element = e.currentTarget as HTMLElement;
 
       // Capture the pointer to receive all pointer events even if pointer leaves element
-      element.setPointerCapture(e.pointerId);
+      try {
+        element.setPointerCapture(e.pointerId);
+      } catch {
+        // Maybe a synthesized event, so ignore.
+      }
 
       const pointerType = e.pointerType as 'mouse' | 'touch' | 'pen';