docs: single-source-of-truth code examples extracted from the Example app

**Is your feature request related to a problem? Please describe.**
Code examples shown in the docs are manually maintained as raw JavaScript string literals in docs/src/data/extendedExamples/ (e.g. BottomNavigationBar.js). These are completely disconnected from the real, runnable code in example/src/Examples/. When the Example app is updated, the docs silently drift and there's no mechanism to catch the discrepancy.

**Describe the solution you'd like**
Introduce named region markers in the Example app source files using the standard VS Code folding convention:
```
// #region docs:bottom-nav-static

// #endregion docs:bottom-nav-static
```
At docs build time (inside the existing component-docs-plugin or docusaurus.config.js), a small extraction utility reads those markers and replaces the hand-written string literals in extendedExamples. The rendered output and the component remain unchanged, only the data source changes.

For guide pages (.mdx under docs/docs/guides/), an optional remark plugin could allow inline references:

```
tsx snippet="bottom-nav-static" file="../../example/src/Examples/BottomNavigationExample.tsx"
```

**Additional context**
The repo already has a custom Docusaurus plugin (docs/component-docs-plugin/index.js) that runs at build time and has access to the filesystem, making it the natural place to wire in snippet extraction with minimal new infrastructure.

Start with docs/component-docs-plugin/index.js and docusaurus.config.js, then compare the hand-written examples in docs/src/data/extendedExamples/ with source files under example/src/Examples/. Define the extraction flow around the proposed region markers and verify that the rendered output and component remain unchanged; the optional MDX remark references are a separate scope.

Written by the indexing model from the issue text.