[Web] Don't cancel buttons when pointer moves inside (#4100)

## Description

Prevents the buttons from being canceled when the pointer is moved
inside the button.

Note that this only works with a mouse, since the browser will cancel
any events with no `touchAction` during any drag gesture.

## Test plan

|Before|After|
|-|-|
|<video
src="https://github.com/user-attachments/assets/08b342f8-24cc-43e9-a240-844641f97552"
/>|<video
src="https://github.com/user-attachments/assets/5cdc15bf-2518-4602-a180-ffd4ae48745e"
/>|


<details>
<summary>Expand</summary>

```jsx
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Touchable } from 'react-native-gesture-handler';

export default function EmptyExample() {
  const [isActive, setIsActive] = useState(false);

  return (
    <View style={styles.container}>
      <Touchable
        style={[styles.button, isActive && styles.buttonActive]}
        onPress={() => console.log('pressed')}
        onPressIn={() => setIsActive(true)}
        onPressOut={() => setIsActive(false)}
        activeScale={1.2}>
        <Text style={styles.label}>{isActive ? 'Highlighted' : 'Press me'}</Text>
      </Touchable>
      <Text style={styles.hint}>
        Press the button, then slowly drag your pointer away from it.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    gap: 24,
  },
  button: {
    backgroundColor: '#ddd',
    paddingHorizontal: 32,
    paddingVertical: 16,
    borderRadius: 8,
  },
  buttonActive: {
    backgroundColor: '#f97316',
  },
  label: {
    fontSize: 20,
    fontWeight: '600',
  },
  hint: {
    textAlign: 'center',
    opacity: 0.6,
    fontSize: 14,
  },
});

```

</details>

Author: j-piasecki

packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts

@@ -109,12 +109,12 @@ export default class NativeViewGestureHandler extends GestureHandler {
     const dy = this.startY - lastCoords.y;
     const distSq = dx * dx + dy * dy;
 
-    if (distSq >= this.minDistSq) {
-      if (this.buttonRole && this.state === State.ACTIVE) {
-        this.cancel();
-      } else if (!this.buttonRole && this.state === State.BEGAN) {
-        this.activate();
-      }
+    if (
+      distSq >= this.minDistSq &&
+      !this.buttonRole &&
+      this.state === State.BEGAN
+    ) {
+      this.activate();
     }
   }
 

packages/react-native-gesture-handler/src/web/tools/PointerEventManager.ts

@@ -162,6 +162,18 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
 
     this.onPointerMoveOut(adaptedEvent);
+
+    // When the view is not capturing the pointer (e.g. when `role="button"`),
+    // `pointermove` stops firing once the pointer leaves the view's bounds, so
+    // the out-of-bounds detection in `pointerMoveCallback` never runs. Fall back
+    // to the DOM `pointerleave` event for any tracked, in-bounds pointer.
+    if (
+      this.trackedPointers.has(event.pointerId) &&
+      this.pointersInBounds.indexOf(event.pointerId) >= 0
+    ) {
+      this.onPointerLeave(adaptedEvent);
+      this.markAsOutOfBounds(event.pointerId);
+    }
   };
 
   private lostPointerCaptureCallback = (event: PointerEvent) => {