[Docs] Reintroduce states flow chart (#4352)

## Description

This PR reintroduces states flow example to our docs.

## Comparison

### Before 


https://github.com/user-attachments/assets/2c552140-07b2-4710-ba8a-9d55821184fc

### After


https://github.com/user-attachments/assets/72efd799-2ce6-452c-b5cf-fba84520f441

## Test plan

Read docs 🤓

Author: m-bert

…ure-handler/docs/under-the-hood/state.md …re-handler/docs/under-the-hood/state.mdxpackages/docs-gesture-handler/docs/under-the-hood/state.md renamed to packages/docs-gesture-handler/docs/under-the-hood/state.mdx packages/docs-gesture-handler/docs/under-the-hood/state.md renamed to packages/docs-gesture-handler/docs/under-the-hood/state.mdx

@@ -4,16 +4,24 @@ title: Handler State
 sidebar_label: Handler State
 ---
 
+import GestureStateFlowExample from '@site/src/examples/GestureStateFlowExample';
+
 Gesture handlers can be treated as ["state machines"](https://en.wikipedia.org/wiki/Finite-state_machine).
 At any given time, each handler instance has an assigned state that can change when new touch events occur or can be forced to change by the touch system in certain circumstances.
 
 States manage the internal recognition process. You can hook into these transitions using specific gesture callbacks.
 
-| State              | Description                                                                              | Callback                                                                                                                                                                                                                                                                           |
-| :----------------- | :--------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`UNDETERMINED`** | The default initial state of every handler.                                              | —                                                                                                                                                                                                                                                                                  |
-| **`BEGAN`**        | The handler has started receiving touch data but hasn't yet met the activation criteria. | [`onBegin`](/docs/fundamentals/callbacks-events#onbegin)                                                                                                                                                                                                                           |
-| **`ACTIVE`**       | The gesture is recognized and activation criteria are met.                               | [`onActivate`](/docs/fundamentals/callbacks-events#onactivate) when it first transitions into the `ACTIVE` state. <br /><br /> [`onUpdate`](/docs/fundamentals/callbacks-events#onupdate) when it has new data about the gesture.                                                  |
-| **`END`**          | The user successfully completed the gesture.                                             | [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) with `event.canceled` set to `false`. <br/><br/> [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) with `event.canceled` set to `false`.                                                 |
+| State              | Description                                                                              | Callback                                                                                                                                                                                                                                                            |
+| :----------------- | :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`UNDETERMINED`** | The default initial state of every handler.                                              | —                                                                                                                                                                                                                                                                   |
+| **`BEGAN`**        | The handler has started receiving touch data but hasn't yet met the activation criteria. | [`onBegin`](/docs/fundamentals/callbacks-events#onbegin)                                                                                                                                                                                                            |
+| **`ACTIVE`**       | The gesture is recognized and activation criteria are met.                               | [`onActivate`](/docs/fundamentals/callbacks-events#onactivate) when it first transitions into the `ACTIVE` state. <br /><br /> [`onUpdate`](/docs/fundamentals/callbacks-events#onupdate) when it has new data about the gesture.                                   |
+| **`END`**          | The user successfully completed the gesture.                                             | [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) with `event.canceled` set to `false`. <br/><br/> [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) with `event.canceled` set to `false`.                                            |
 | **`FAILED`**       | The handler failed to recognize the gesture.                                             | [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) if the gesture was in `ACTIVE` state before, with `event.canceled` set to `true`. <br/><br/> [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) with `event.canceled` set to `true`. |
 | **`CANCELLED`**    | The system interrupted the gesture.                                                      | [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) if the gesture was in `ACTIVE` state before, with `event.canceled` set to `true`. <br/><br/> [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) with `event.canceled` set to `true`. |
+
+## State flows
+
+The most typical flow of state is when a gesture picks up on an initial touch event, then recognizes it, then acknowledges its ending and resets itself back to the initial state. Drag or hold the circle below to see how each state machine reacts.
+
+<GestureStateFlowExample />