[Docs] Add callbacks flow charts (#4354)

## Description

This PR adds interactive chart flows for gesture callbacks. They replace
old graphs.

## Gesture callbacks

### Before


https://github.com/user-attachments/assets/ff8769af-a998-401f-86dc-a5cf1bda21e5

### After


https://github.com/user-attachments/assets/fe47deba-9619-4699-bba8-59d64e67d6ce

## TouchEvent callbacks

### Before


https://github.com/user-attachments/assets/8e6dbf6c-fb25-411e-b995-5e361bdacf65

### After


https://github.com/user-attachments/assets/fa6d66aa-bdcb-4838-9e18-76c75f3df229

## Test plan

Read docs 🤓

Author: m-bert

packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx

@@ -5,7 +5,10 @@ sidebar_label: Gesture callbacks & events
 sidebar_position: 5
 ---
 
-import { GestureEventFlowChart, TouchEventFlowChart } from '@site/src/examples/CallbacksFlowCharts'
+import {
+  GestureCallbacksExample,
+  TouchCallbacksExample,
+} from '@site/src/examples/CallbacksFlowExamples';
 
 At any given time, each handler instance has an assigned [state](/docs/under-the-hood/state) that can change when new touch events occur or can be forced to change by the touch system under certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks).
 
@@ -15,7 +18,9 @@ When Reanimated is installed, all callbacks are automatically workletized. For m
 
 ### GestureEvent callbacks
 
-<GestureEventFlowChart />
+Drag or hold the circle below to see how the callback chain reacts.
+
+<GestureCallbacksExample />
 
 Note that some of these callbacks are complementary:
 
@@ -24,7 +29,9 @@ Note that some of these callbacks are complementary:
 
 ### TouchEvent callbacks
 
-<TouchEventFlowChart />
+Low-level `TouchEvent` callbacks are tied to raw pointer activity. Drag out of the card to cancel, or release inside it to see how the callback chain reacts.
+
+<TouchCallbacksExample />
 
 ## Callbacks
 
@@ -41,7 +48,7 @@ Called when a handler begins to recognize gestures. If `onBegin` was called, it
 ```ts
 onActivate: (event: GestureEvent<HandlerData>) => void
 ```
- 
+
 Called when activation criteria for the handler are met. If `onActivate` was called, it is guaranteed that `onDeactivate` will be called later.
 
 ### onUpdate
@@ -185,7 +192,7 @@ export type TouchData = {
 };
 `}/>
 
-`TouchEvent` carries information about raw touch events, like touching the screen or moving the finger. 
+`TouchEvent` carries information about raw touch events, like touching the screen or moving the finger.
 
 - `eventType` - Type of the current event - whether the finger was placed on the screen, moved, lifted or cancelled.
 
@@ -195,7 +202,7 @@ export type TouchData = {
 
 - `numberOfTouches` - Number representing the count of currently active touches.
 
-`TouchData` contains information about a single touch. 
+`TouchData` contains information about a single touch.
 
 - `id` - A number representing the id of the touch. It may be used to track the touch between events as the id will not change while it is being tracked.
 
@@ -210,4 +217,3 @@ export type TouchData = {
 :::danger
 Don't rely on the order of items in the `changedTouches`/`allTouches` arrays as it may change during the gesture, instead use the `id` attribute to track individual touches across events.
 :::
-

packages/docs-gesture-handler/package.json

@@ -54,8 +54,7 @@
     "react-native-worklets": "0.8.1",
     "source-map": "^0.7.4",
     "source-map-loader": "^4.0.1",
-    "usehooks-ts": "^2.9.1",
-    "vis-network": "^10.0.2"
+    "usehooks-ts": "^2.9.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.9.2",