chart-sins/src/components/VegaChart.astro

---
// Build-time Vega-Lite renderer.
//
// Runs only during `astro build` (and dev SSR), never in the browser: it
// compiles a Vega-Lite spec to Vega with the site theme, renders it headlessly
// to a static SVG string, and inlines it. Zero client-side JavaScript, no Vega
// runtime shipped.
//
// The chart sits on a fixed light canvas (--chart-canvas) in both themes, so
// this single baked render keeps AA contrast in light and dark.
import type { TopLevelSpec } from 'vega-lite';
import { renderChartSvg } from '../lib/renderChart';

interface Props {
  spec: TopLevelSpec;
  title: string;
  caption?: string;
}

const { spec, title, caption } = Astro.props;

let svg = '';
let error: string | null = null;

try {
  svg = await renderChartSvg(spec);
} catch (e) {
  error = e instanceof Error ? e.message : String(e);
  console.error(`[VegaChart] failed to render "${title}": ${error}`);
}
---

<figure class="vega-chart" role="group" aria-label={title}>
  {error ? (
    <div class="vega-chart__error">
      <strong>Chart failed to render.</strong>
      <code>{error}</code>
    </div>
  ) : (
    <div class="vega-chart__svg" set:html={svg} />
  )}
  {caption && <figcaption>{caption}</figcaption>}
</figure>