Add interactive playground / live code editor to documentation

[yuribodo]

Description

Documentation pages show static code snippets with Prism syntax highlighting but no way to edit props and see results live.

Options

• Sandpack (CodeSandbox) — full in-browser bundler, supports React
• react-live — lightweight live code editor with preview
• Custom — CodeMirror/Monaco editor + eval (more control, more work)

Features

• Editable code with syntax highlighting
• Live preview that updates on every keystroke
• Reset to original code button
• Copy code button
• Mobile-friendly layout (stacked editor + preview)
• Pre-loaded with all Mario Charts components

Tasks

• Evaluate and choose playground technology
• Integrate into documentation layout
• Add playground to at least 3 chart documentation pages
• Pre-configure with Mario Charts imports and Tailwind
• Add editable examples for common use cases
• Ensure dark mode works in playground
• Test on mobile browsers

Why this matters

Dramatically reduces time-to-understanding for new users. This is a key feature where shadcn documentation excels.