docs: update COMPONENT_GUIDE for ThemedChart migration

COMPONENT_GUIDE.md

@@ -54,8 +54,8 @@
 ### "I need to display data"
 - Key metrics → **StatCard** (with optional sparkline/trend)
 - Tabular data → **DataTable** (sortable, paginated)
-- Time series → **LineChart**, **AreaChart**
+- Time series → **ThemedChart** with `<Line>` or `<Area>`
-- Categorical comparison → **BarChart**
+- Categorical comparison → **ThemedChart** with `<Bar>`
 - Inline trend → **Sparkline**
 - Advanced charts (treemap, radar, heatmap, pie, etc.) → **Recharts** with `rechartsTheme` (see [Charting Strategy](#charting-strategy))
 - Event log → **EventFeed**
@@ -138,7 +138,7 @@ FormField wraps any input (Input, Textarea, Select, RadioGroup, etc.)
 ### KPI dashboard
 ```
 Row of StatCard components (each with optional Sparkline and trend)
-Below: charts (AreaChart, LineChart, BarChart)
+Below: charts (ThemedChart with Line, Area, or Bar)
 ```
 
 ### Master/detail management pattern
@@ -175,57 +175,54 @@ StatCard strip (top, recalculates per scope)
   → GroupCard grid (2-col for all, full-width for single app)
     Each GroupCard: header (app name + count) + meta (TPS, routes) + instance rows
     Instance rows: StatusDot + name + Badge + metrics
-    Single instance: expanded with LineChart panels
+    Single instance: expanded with ThemedChart panels
   → EventFeed (bottom, filtered by 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.
+The design system provides a **ThemedChart** wrapper component that applies consistent styling to Recharts charts. Recharts is bundled as a dependency — consumers do not need to install it separately.
 
-**Recharts is the app's dependency, not the design system's.** The design system only exports a theme config object.
+### Usage
-
-### Setup in consuming app
-
-```bash
-npm install recharts
-```
-
-### Usage with theme preset
 
 ```tsx
-import { rechartsTheme, CHART_COLORS } from '@cameleer/design-system'
+import { ThemedChart, Line, Area, ReferenceLine, CHART_COLORS } from '@cameleer/design-system'
-import {
-  ResponsiveContainer, LineChart, Line,
-  CartesianGrid, XAxis, YAxis, Tooltip, Legend,
-} from 'recharts'
 
-<ResponsiveContainer width="100%" height={300}>
+const data = metrics.map(m => ({ time: m.timestamp, cpu: m.value * 100 }))
-  <LineChart data={data}>
+
-    <CartesianGrid {...rechartsTheme.cartesianGrid} />
+<ThemedChart data={data} height={160} xDataKey="time" yLabel="%">
-    <XAxis dataKey="name" {...rechartsTheme.xAxis} />
+  <Area dataKey="cpu" stroke={CHART_COLORS[0]} fill={CHART_COLORS[0]} fillOpacity={0.1} />
-    <YAxis {...rechartsTheme.yAxis} />
+  <ReferenceLine y={85} stroke="var(--error)" strokeDasharray="5 3" label="Alert" />
-    <Tooltip {...rechartsTheme.tooltip} />
+</ThemedChart>
-    <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
+### ThemedChart Props
 
-| Export | Description |
+| Prop | Type | Default | Description |
-|--------|-------------|
+|------|------|---------|-------------|
-| `rechartsTheme.cartesianGrid` | Dashed gridlines, subtle stroke |
+| `data` | `Record<string, any>[]` | required | Flat array of data objects |
-| `rechartsTheme.xAxis` | Mono font axis ticks, subtle color |
+| `height` | `number` | `200` | Chart height in pixels |
-| `rechartsTheme.yAxis` | Mono font axis ticks, no axis line |
+| `xDataKey` | `string` | `"time"` | Key for x-axis values |
-| `rechartsTheme.tooltip` | Surface bg, border, shadow, monospace values |
+| `xType` | `'number' \| 'category'` | `"category"` | X-axis scale type |
-| `rechartsTheme.legend` | Matching text size and color |
+| `xTickFormatter` | `(value: any) => string` | — | Custom x-axis label formatter |
-| `rechartsTheme.colors` | The 8 `CHART_COLORS` (CSS variables with light/dark support) |
+| `yTickFormatter` | `(value: any) => string` | — | Custom y-axis label formatter |
+| `yLabel` | `string` | — | Y-axis label text |
+| `children` | `ReactNode` | required | Recharts elements (Line, Area, Bar, etc.) |
+| `className` | `string` | — | Container CSS class |
+
+### Available Recharts Re-exports
+
+`Line`, `Area`, `Bar`, `ReferenceLine`, `ReferenceArea`, `Legend`, `Brush`
+
+For chart types not covered (treemap, radar, pie, sankey), import from `recharts` directly and use `rechartsTheme` for consistent styling.
+
+### Theme Utilities
+
+| Export | Purpose |
+|--------|---------|
 | `CHART_COLORS` | Array of `var(--chart-1)` through `var(--chart-8)` |
-| `ChartSeries` / `DataPoint` | Type interfaces for chart data |
+| `rechartsTheme` | Pre-configured prop objects for Recharts sub-components |
 
 ## Component Index
 
@@ -234,11 +231,9 @@ import {
 | Accordion | composite | Multiple collapsible sections, single or multi-open mode |
 | Alert | primitive | Page-level attention banner with variant colors |
 | AlertDialog | composite | Confirmation dialog for destructive/important actions |
-| AreaChart | composite | Time series visualization with filled area |
 | Avatar | primitive | User representation with initials and color |
 | AvatarGroup | composite | Stacked overlapping avatars with overflow count |
 | Badge | primitive | Labeled status indicator with semantic colors |
-| BarChart | composite | Categorical data comparison, optional stacking |
 | Breadcrumb | composite | Navigation path showing current location |
 | Button | primitive | Action trigger (primary, secondary, danger, ghost) |
 | ButtonGroup | primitive | Multi-select toggle group with optional colored dot indicators. Props: items (value, label, color?), value (Set), onChange |
@@ -266,7 +261,7 @@ import {
 | KeyboardHint | primitive | Keyboard shortcut display |
 | KpiStrip | composite | Horizontal row of KPI cards with colored left border, trend, subtitle, optional sparkline |
 | Label | primitive | Form label with optional required asterisk |
-| LineChart | composite | Time series line visualization |
+| ThemedChart | composite | Recharts wrapper with themed axes, grid, and tooltip |
 | LogViewer | composite | Scrollable log output with timestamped, severity-colored monospace entries |
 | MenuItem | composite | Sidebar navigation item with health/count |
 | Modal | composite | Generic dialog overlay with backdrop |