feat: export Recharts theme preset for consuming apps

Add rechartsTheme config object that maps design tokens to Recharts
component props, ensuring visual consistency without adding Recharts
as a dependency. Also export CHART_COLORS, ChartSeries, and DataPoint
types for public use. Document charting strategy in COMPONENT_GUIDE.md.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

COMPONENT_GUIDE.md

@@ -55,6 +55,7 @@
 - Time series → **LineChart**, **AreaChart**
 - Categorical comparison → **BarChart**
 - Inline trend → **Sparkline**
+- Advanced charts (treemap, radar, heatmap, pie, etc.) → **Recharts** with `rechartsTheme` (see [Charting Strategy](#charting-strategy))
 - Event log → **EventFeed**
 - Processing pipeline (Gantt view) → **ProcessorTimeline**
 - Processing pipeline (flow diagram) → **RouteFlow**
@@ -160,6 +161,53 @@ StatCard strip (top, recalculates per scope)
 URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/:instanceId
 ```
 
+## Charting Strategy
+
+The design system includes built-in **AreaChart**, **BarChart**, **LineChart**, and **Sparkline** components for standard use cases. For advanced chart types (treemap, radar, heatmap, pie, sankey, etc.), consuming apps should use **Recharts** directly with the design system's theme preset for visual consistency.
+
+**Recharts is the app's dependency, not the design system's.** The design system only exports a theme config object.
+
+### Setup in consuming app
+
+```bash
+npm install recharts
+```
+
+### Usage with theme preset
+
+```tsx
+import { rechartsTheme, CHART_COLORS } from '@cameleer/design-system'
+import {
+  ResponsiveContainer, LineChart, Line,
+  CartesianGrid, XAxis, YAxis, Tooltip, Legend,
+} from 'recharts'
+
+<ResponsiveContainer width="100%" height={300}>
+  <LineChart data={data}>
+    <CartesianGrid {...rechartsTheme.cartesianGrid} />
+    <XAxis dataKey="name" {...rechartsTheme.xAxis} />
+    <YAxis {...rechartsTheme.yAxis} />
+    <Tooltip {...rechartsTheme.tooltip} />
+    <Legend {...rechartsTheme.legend} />
+    <Line dataKey="value" stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
+    <Line dataKey="other" stroke={CHART_COLORS[1]} strokeWidth={2} dot={false} />
+  </LineChart>
+</ResponsiveContainer>
+```
+
+### Exports
+
+| Export | Description |
+|--------|-------------|
+| `rechartsTheme.cartesianGrid` | Dashed gridlines, subtle stroke |
+| `rechartsTheme.xAxis` | Mono font axis ticks, subtle color |
+| `rechartsTheme.yAxis` | Mono font axis ticks, no axis line |
+| `rechartsTheme.tooltip` | Surface bg, border, shadow, monospace values |
+| `rechartsTheme.legend` | Matching text size and color |
+| `rechartsTheme.colors` | The 8 `CHART_COLORS` (CSS variables with light/dark support) |
+| `CHART_COLORS` | Array of `var(--chart-1)` through `var(--chart-8)` |
+| `ChartSeries` / `DataPoint` | Type interfaces for chart data |
+
 ## Component Index
 
 | Component | Layer | When to use |