[Docs] Reintroduce states flow chart

[m-bert]

Description

This PR reintroduces states flow example to our docs.

Comparison

Before

before.mov

After

Screen.Recording.2026-07-28.at.10.59.25.mov

Test plan

Read docs 🤓

[Copilot]

Pull request overview

This PR reintroduces an interactive “state flow” diagram into the documentation, using a new v3-hooks-based example for current docs while keeping a legacy flow chart example wired into the versioned v2.x docs.

Changes:

• Added a new interactive “State flows” section to the “Handler State” docs page that embeds the updated flow diagram.
• Replaced the v2.x “states & events” embedded example to use the legacy flow chart implementation.
• Refactored/added example implementations and styling for both the new diagram and the legacy flow chart.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/docs-gesture-handler/versioned_docs/version-2.x/fundamentals/states-events.mdx	Points the v2.x page at the legacy flow chart example.
packages/docs-gesture-handler/src/examples/GestureStateFlowExampleLegacy/index.tsx	Adds the legacy interactive chart example entry point.
packages/docs-gesture-handler/src/examples/GestureStateFlowExampleLegacy/FlowChart.tsx	Import/type cleanup for the legacy flow chart rendering.
packages/docs-gesture-handler/src/examples/GestureStateFlowExampleLegacy/ChartManager.ts	Import/type cleanup for the legacy chart manager.
packages/docs-gesture-handler/src/examples/GestureStateFlowExampleLegacy/ChartItem.tsx	Import/type cleanup for chart item rendering.
packages/docs-gesture-handler/src/examples/GestureStateFlowExampleLegacy/Arrow.tsx	Adds SVG arrow rendering used by the legacy chart.
packages/docs-gesture-handler/src/examples/GestureStateFlowExample/styles.module.css	Adds CSS-module styling for the new diagram (including font imports).
packages/docs-gesture-handler/src/examples/GestureStateFlowExample/index.tsx	Reworks the main example to a v3-hooks-based interactive diagram for the docs site.
packages/docs-gesture-handler/docs/under-the-hood/state.mdx	Embeds the new “State flows” interactive diagram into the docs page.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[j-piasecki]

I'm not a fan of the yellow "start" label for UNDETERMINED. I feel like it's going back to onBegin/onStart confusion. What about something like "Waiting for input"?

[m-bert]

I'm not a fan of the yellow "start" label for UNDETERMINED. I feel like it's going back to onBegin/onStart confusion. What about something like "Waiting for input"?

I've removed legend as it doesn't bring any value to this example.

[j-piasecki]

Also the same comments about fonts and colors as in the other one.

[m-bert]

Also the same comments about fonts and colors as in the other one.

@j-piasecki as for the color, yes, it was predefined. Changed it in 7dfe41f.

As for the font, I asked what you think here. I think new one looks good and fits the example well. But if you think that we should use the one that we already have - I can change it.