Context
apps/ui/src/components/metagraphed/charts/ holds 12 chart primitives: activity-heatmap.tsx, bar-mini.tsx, donut.tsx, economics-mini.tsx, latency-heatmap.tsx, spark-legend.tsx, sparkline.tsx, stat-tile.tsx, stat-with-spark.tsx, subnet-pulse-grid.tsx, treemap-mini.tsx, validator-subnet-heatmap.tsx. These are pure rendering components (numeric/series props in, SVG or DOM out) with no data-fetching or routing of their own — strong extraction candidates, but confirm each against #A's audit (e.g. a heatmap that assumes a specific bucket shape from one API response is a "needs a small refactor" case, not a blocker).
Depends on #A (audit), #B (scaffold), #C (tokens); can land in parallel with #E once #D has proven the pattern.
Requirements
- Migrate the chart components #A marked
extractable, plus apps/ui/src/components/metagraphed/states/registry-empty.tsx (the one existing empty-state pattern, natural companion to this batch) if the audit confirms it's presentational.
- Update every import site across
apps/ui/src/**.
- Charts reference the categorical
--chart-1..6 token ramp from #C — confirm they resolve correctly once tokens live in packages/ui-kit rather than apps/ui.
- Visual regression pass (before/after screenshots) — charts are the highest-risk category for silent rendering differences (SVG viewBox, responsive sizing) after a package-boundary move.
Deliverable
A merged PR migrating the audited chart set into packages/ui-kit, all call sites updated, no visual regressions.
Expected outcome
Chart primitives — arguably the most reusable, most Claude-Design-relevant category (data viz building blocks) — are real, buildable, standalone components.
Context
apps/ui/src/components/metagraphed/charts/holds 12 chart primitives:activity-heatmap.tsx,bar-mini.tsx,donut.tsx,economics-mini.tsx,latency-heatmap.tsx,spark-legend.tsx,sparkline.tsx,stat-tile.tsx,stat-with-spark.tsx,subnet-pulse-grid.tsx,treemap-mini.tsx,validator-subnet-heatmap.tsx. These are pure rendering components (numeric/series props in, SVG or DOM out) with no data-fetching or routing of their own — strong extraction candidates, but confirm each against #A's audit (e.g. a heatmap that assumes a specific bucket shape from one API response is a "needs a small refactor" case, not a blocker).Depends on #A (audit), #B (scaffold), #C (tokens); can land in parallel with #E once #D has proven the pattern.
Requirements
extractable, plusapps/ui/src/components/metagraphed/states/registry-empty.tsx(the one existing empty-state pattern, natural companion to this batch) if the audit confirms it's presentational.apps/ui/src/**.--chart-1..6token ramp from #C — confirm they resolve correctly once tokens live inpackages/ui-kitrather thanapps/ui.Deliverable
A merged PR migrating the audited chart set into
packages/ui-kit, all call sites updated, no visual regressions.Expected outcome
Chart primitives — arguably the most reusable, most Claude-Design-relevant category (data viz building blocks) — are real, buildable, standalone components.