astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/charts/SlopeChart.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * SlopeChart — Before/after comparison of several items between two points in
+ * time. Rising lines use the positive status color, falling lines the negative.
+ *
+ * @param {string} fromLabel - Left column label.
+ * @param {string} toLabel - Right column label.
+ * @param {Array<{label: string, from: number, to: number}>} items - Items to compare.
+ * @param {string} highlight - Optional item label to emphasise (others dim).
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, formatValue, POSITIVE, NEGATIVE } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  fromLabel?: string;
+  toLabel?: string;
+  items?: Array<{ label: string; from: number; to: number }>;
+  highlight?: string;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Conversion rate by plan',
+  subtitle = 'Q1 vs Q2',
+  fromLabel = 'Q1',
+  toLabel = 'Q2',
+  items = [
+    { label: 'Enterprise', from: 7.8, to: 9.6 },
+    { label: 'Team', from: 6.1, to: 6.9 },
+    { label: 'Pro', from: 5.4, to: 4.6 },
+    { label: 'Starter', from: 3.2, to: 4.1 },
+    { label: 'Free trial', from: 2.4, to: 1.9 },
+  ],
+  highlight,
+  prefix = '',
+  suffix = '%',
+  height = 300,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 34, b: 20 };
+const x0 = 190;
+const x1 = W - 190;
+const vals = items.flatMap((i) => [i.from, i.to]);
+const y = scaleLinear(Math.min(...vals), Math.max(...vals), H - m.b, m.t);
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{
+    headers: ['Item', fromLabel, toLabel, 'Change'],
+    rows: items.map((it) => [it.label, fmt(it.from), fmt(it.to), `${it.to >= it.from ? '+' : ''}${(it.to - it.from).toFixed(1)}`]),
+  }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: slope chart from ${fromLabel} to ${toLabel}`}>
+    <line class="cf-axis" x1={x0} x2={x0} y1={m.t - 8} y2={H - m.b + 8} />
+    <line class="cf-axis" x1={x1} x2={x1} y1={m.t - 8} y2={H - m.b + 8} />
+    <text class="cf-label cf-label--strong" x={x0} y={14} text-anchor="middle">{fromLabel}</text>
+    <text class="cf-label cf-label--strong" x={x1} y={14} text-anchor="middle">{toLabel}</text>
+
+    {items.map((it) => {
+      const up = it.to >= it.from;
+      const c = up ? POSITIVE : NEGATIVE;
+      const dim = highlight && highlight !== it.label;
+      return (
+        <g
+          class="cf-mark cf-dim"
+          tabindex="0"
+          role="img"
+          opacity={dim ? 0.35 : 1}
+          aria-label={`${it.label}: ${fmt(it.from)} to ${fmt(it.to)} (${up ? 'up' : 'down'})`}
+          data-tip-title={it.label}
+          data-tip={`${fromLabel}: ${fmt(it.from)}|${toLabel}: ${fmt(it.to)}|${c}::${up ? 'Up' : 'Down'} ${Math.abs(it.to - it.from).toFixed(1)}`}
+        >
+          <line x1={x0} y1={y(it.from)} x2={x1} y2={y(it.to)} stroke={c} stroke-width="2" />
+          <line x1={x0} y1={y(it.from)} x2={x1} y2={y(it.to)} stroke="transparent" stroke-width="14" />
+          <circle cx={x0} cy={y(it.from)} r="4.5" fill={c} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" />
+          <circle cx={x1} cy={y(it.to)} r="4.5" fill={c} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" />
+          <text class="cf-label" x={x0 - 12} y={y(it.from) + 4} text-anchor="end">{it.label} <tspan class="cf-label--strong">{fmt(it.from)}</tspan></text>
+          <text class="cf-label" x={x1 + 12} y={y(it.to) + 4}><tspan class="cf-label--strong">{fmt(it.to)}</tspan> {it.label}</text>
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/SparklineChart.astro

@@ -0,0 +1,87 @@
+---
+/**
+ * SparklineChart — Compact inline trend line for tables, KPI tiles and text.
+ * Marks the last point and optionally the min/max.
+ *
+ * @param {number[]} data - Values to plot.
+ * @param {string} label - Accessible description (e.g. 'Revenue, last 30 days').
+ * @param {string} variant - Visual style (line|area|bars).
+ * @param {string} size - Dimensions (sm|md|lg).
+ * @param {string} color - Stroke/fill color; defaults to trend status color.
+ * @param {boolean} showExtremes - Mark the min and max points.
+ * @param {string} className - Extra CSS class.
+ */
+import { scaleLinear, smoothPath, areaPath, POSITIVE, NEGATIVE, type Point } from './chart-utils';
+
+interface Props {
+  data?: number[];
+  label?: string;
+  variant?: 'line' | 'area' | 'bars';
+  size?: 'sm' | 'md' | 'lg';
+  color?: string;
+  showExtremes?: boolean;
+  className?: string;
+}
+
+const {
+  data = [12, 15, 11, 18, 17, 22, 19, 25, 24, 29, 27, 33],
+  label = 'Trend, last 12 periods',
+  variant = 'area',
+  size = 'md',
+  color,
+  showExtremes = false,
+  className = '',
+} = Astro.props;
+
+const dims = { sm: [80, 24], md: [140, 36], lg: [220, 56] }[size];
+const [W, H] = dims;
+const pad = 3;
+const trendUp = data[data.length - 1] >= data[0];
+const stroke = color ?? (trendUp ? POSITIVE : NEGATIVE);
+const y = scaleLinear(Math.min(...data), Math.max(...data), H - pad, pad);
+const x = (i: number) => pad + (i / Math.max(1, data.length - 1)) * (W - pad * 2);
+const pts: Point[] = data.map((v, i) => [x(i), y(v)]);
+const last = pts[pts.length - 1];
+const minI = data.indexOf(Math.min(...data));
+const maxI = data.indexOf(Math.max(...data));
+const barW = (W - pad * 2) / data.length - 2;
+const change = data[0] ? (((data[data.length - 1] - data[0]) / Math.abs(data[0])) * 100).toFixed(0) : '0';
+---
+
+<svg
+  class={`spark spark--${size} ${className}`}
+  viewBox={`0 0 ${W} ${H}`}
+  width={W}
+  height={H}
+  role="img"
+  aria-label={`${label}: from ${data[0]} to ${data[data.length - 1]} (${trendUp ? '+' : ''}${change}%)`}
+>
+  {variant === 'bars' ? (
+    data.map((v, i) => {
+      const top = y(v);
+      return <rect x={pad + i * (barW + 2)} y={top} width={Math.max(1, barW)} height={Math.max(1, H - pad - top)} rx="1.5" fill={stroke} opacity={i === data.length - 1 ? 1 : 0.55} />;
+    })
+  ) : (
+    <>
+      {variant === 'area' && <path d={areaPath(pts, H)} fill={stroke} fill-opacity="0.16" />}
+      <path d={smoothPath(pts)} fill="none" stroke={stroke} stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
+      {showExtremes && (
+        <>
+          <circle cx={pts[minI][0]} cy={pts[minI][1]} r="2.5" fill="var(--c-text-3, #8a8a8a)" />
+          <circle cx={pts[maxI][0]} cy={pts[maxI][1]} r="2.5" fill="var(--c-text-1, #fff)" />
+        </>
+      )}
+      <circle cx={last[0]} cy={last[1]} r="3" fill={stroke} stroke="var(--chart-surface, #0d0d0f)" stroke-width="1.5" />
+    </>
+  )}
+</svg>
+
+<style>
+  .spark {
+    display: inline-block;
+    vertical-align: middle;
+    overflow: visible;
+    max-width: 100%;
+    height: auto;
+  }
+</style>

package/src/components/lib/charts/StackedAreaChart.astro

@@ -0,0 +1,130 @@
+---
+/**
+ * StackedAreaChart — Stacked (or 100% normalised) SVG area chart for showing how
+ * parts contribute to a changing total over time.
+ *
+ * @param {string[]} categories - X-axis labels.
+ * @param {Array<{name: string, data: number[]}>} series - Stacked layers, bottom first (max 8).
+ * @param {boolean} normalized - Show each period as 100% share instead of absolute totals.
+ * @param {string} curve - Interpolation (smooth|linear|step).
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { colorAt, scaleLinear, niceTicks, bandPath, curvePath, formatValue, type Point } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: string[];
+  series?: Array<{ name: string; data: number[] }>;
+  normalized?: boolean;
+  curve?: 'smooth' | 'linear' | 'step';
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Traffic by channel',
+  subtitle = 'Sessions per month, stacked',
+  categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+  series = [
+    { name: 'Organic', data: [320, 340, 390, 420, 460, 480, 530, 560, 610] },
+    { name: 'Paid', data: [180, 210, 200, 240, 260, 250, 270, 300, 290] },
+    { name: 'Referral', data: [90, 110, 120, 130, 125, 150, 170, 160, 190] },
+  ],
+  normalized = false,
+  curve = 'smooth',
+  prefix = '',
+  suffix = '',
+  height = 280,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 12, r: 16, b: 28, l: 44 };
+const n = categories.length;
+const totals = categories.map((_, i) => series.reduce((a, s) => a + (s.data[i] ?? 0), 0));
+const val = (si: number, i: number) => {
+  const v = series[si].data[i] ?? 0;
+  return normalized ? (v / (totals[i] || 1)) * 100 : v;
+};
+const ticks = normalized ? [0, 25, 50, 75, 100] : niceTicks(0, Math.max(...totals), 4);
+const y = scaleLinear(0, ticks[ticks.length - 1], H - m.b, m.t);
+const x = (i: number) => m.l + (n <= 1 ? 0 : (i / (n - 1)) * (W - m.l - m.r));
+const step = n > 1 ? (W - m.l - m.r) / (n - 1) : W;
+
+const running = categories.map(() => 0);
+const layers = series.slice(0, 8).map((s, si) => {
+  const lower: Point[] = categories.map((_, i) => [x(i), y(running[i])]);
+  categories.forEach((_, i) => { running[i] += val(si, i); });
+  const upper: Point[] = categories.map((_, i) => [x(i), y(running[i])]);
+  return { name: s.name, color: colorAt(si, colors), d: bandPath(upper, lower, curve), top: curvePath(upper, curve) };
+});
+
+const fmt = (v: number) => (normalized ? `${v.toFixed(0)}%` : formatValue(v, prefix, suffix));
+const fmtRaw = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={layers.map((l) => ({ label: l.name, color: l.color }))}
+  table={{
+    headers: ['Period', ...series.map((s) => s.name), 'Total'],
+    rows: categories.map((c, i) => [c, ...series.map((s) => fmtRaw(s.data[i])), fmtRaw(totals[i])]),
+  }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: stacked area chart`}>
+    {ticks.map((t) => (
+      <g>
+        <line class="cf-grid" x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} />
+        <text class="cf-label" x={m.l - 8} y={y(t) + 4} text-anchor="end">{fmt(t)}</text>
+      </g>
+    ))}
+    {categories.map((c, i) => <text class="cf-label" x={x(i)} y={H - 8} text-anchor="middle">{c}</text>)}
+
+    {layers.map((l) => (
+      <g aria-hidden="true">
+        <path d={l.d} fill={l.color} fill-opacity="0.32" />
+        <path d={l.top} fill="none" stroke={l.color} stroke-width="2" />
+      </g>
+    ))}
+
+    {categories.map((c, i) => (
+      <g class="cf-hit-group">
+        <line class="cf-cross" x1={x(i)} x2={x(i)} y1={m.t} y2={H - m.b} />
+        <rect
+          class="cf-hit"
+          x={x(i) - step / 2}
+          y={m.t}
+          width={step}
+          height={H - m.t - m.b}
+          tabindex="0"
+          role="img"
+          aria-label={`${c}: ${series.map((s) => `${s.name} ${fmtRaw(s.data[i])}`).join(', ')}; total ${fmtRaw(totals[i])}`}
+          data-tip-title={`${c} · ${fmtRaw(totals[i])}`}
+          data-tip={[...layers].reverse().map((l, ri) => {
+            const si = layers.length - 1 - ri;
+            return `${l.color}::${l.name}: ${fmtRaw(series[si].data[i])}${normalized ? ` (${val(si, i).toFixed(0)}%)` : ''}`;
+          }).join('|')}
+        />
+      </g>
+    ))}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/StackedBarChart.astro

@@ -0,0 +1,136 @@
+---
+/**
+ * StackedBarChart — Vertical or horizontal stacked bars, with an optional 100%
+ * mode. Segments are separated by a 2px surface gap instead of borders.
+ *
+ * @param {string[]} categories - Bar labels.
+ * @param {Array<{name: string, data: number[]}>} series - Stack layers (max 8).
+ * @param {boolean} horizontal - Draw bars horizontally.
+ * @param {boolean} normalized - Show each bar as a 100% share.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { colorAt, scaleLinear, niceTicks, formatValue } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: string[];
+  series?: Array<{ name: string; data: number[] }>;
+  horizontal?: boolean;
+  normalized?: boolean;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Tickets by status',
+  subtitle = 'Per sprint',
+  categories = ['S18', 'S19', 'S20', 'S21', 'S22', 'S23'],
+  series = [
+    { name: 'Done', data: [42, 48, 51, 46, 58, 63] },
+    { name: 'In review', data: [12, 9, 14, 11, 10, 8] },
+    { name: 'Blocked', data: [5, 7, 3, 6, 4, 2] },
+  ],
+  horizontal = false,
+  normalized = false,
+  prefix = '',
+  suffix = '',
+  height = 280,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = horizontal ? Math.max(height, categories.length * 40 + 40) : height;
+const m = horizontal ? { t: 8, r: 16, b: 24, l: 72 } : { t: 12, r: 12, b: 28, l: 44 };
+const totals = categories.map((_, i) => series.reduce((a, s) => a + (s.data[i] ?? 0), 0));
+const ticks = normalized ? [0, 25, 50, 75, 100] : niceTicks(0, Math.max(...totals), 4);
+const maxT = ticks[ticks.length - 1];
+const v = horizontal ? scaleLinear(0, maxT, m.l, W - m.r) : scaleLinear(0, maxT, H - m.b, m.t);
+const band = horizontal ? (H - m.t - m.b) / categories.length : (W - m.l - m.r) / categories.length;
+const thick = band * 0.6;
+const GAP = 2;
+const fmt = (n: number) => formatValue(n, prefix, suffix);
+const fmtAxis = (n: number) => (normalized ? `${n}%` : fmt(n));
+
+const bars = categories.map((c, ci) => {
+  let acc = 0;
+  const segs = series.slice(0, 8).map((s, si) => {
+    const raw = s.data[ci] ?? 0;
+    const val = normalized ? (raw / (totals[ci] || 1)) * 100 : raw;
+    const start = acc;
+    acc += val;
+    return { name: s.name, raw, val, start, end: acc, color: colorAt(si, colors) };
+  });
+  return { c, ci, segs };
+});
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={series.map((s, i) => ({ label: s.name, color: colorAt(i, colors) }))}
+  table={{ headers: ['Category', ...series.map((s) => s.name), 'Total'], rows: categories.map((c, i) => [c, ...series.map((s) => fmt(s.data[i])), fmt(totals[i])]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: ${normalized ? '100% ' : ''}stacked bar chart`}>
+    {ticks.map((t) => horizontal ? (
+      <g>
+        <line class={t === 0 ? 'cf-axis' : 'cf-grid'} x1={v(t)} x2={v(t)} y1={m.t} y2={H - m.b} />
+        <text class="cf-label" x={v(t)} y={H - 6} text-anchor="middle">{fmtAxis(t)}</text>
+      </g>
+    ) : (
+      <g>
+        <line class={t === 0 ? 'cf-axis' : 'cf-grid'} x1={m.l} x2={W - m.r} y1={v(t)} y2={v(t)} />
+        <text class="cf-label" x={m.l - 8} y={v(t) + 4} text-anchor="end">{fmtAxis(t)}</text>
+      </g>
+    ))}
+
+    {bars.map(({ c, ci, segs }) => {
+      const pos = (horizontal ? m.t : m.l) + ci * band + (band - thick) / 2;
+      return (
+        <g>
+          {horizontal
+            ? <text class="cf-label" x={m.l - 8} y={pos + thick / 2 + 4} text-anchor="end">{c}</text>
+            : <text class="cf-label" x={pos + thick / 2} y={H - 8} text-anchor="middle">{c}</text>}
+          {segs.map((s, si) => {
+            const a = v(s.start);
+            const b = v(s.end);
+            const isLast = si === segs.length - 1;
+            const len = Math.abs(b - a) - (isLast ? 0 : GAP);
+            if (!(len > 0)) return null;
+            const rect = horizontal
+              ? { x: a, y: pos, width: len, height: thick }
+              : { x: pos, y: b + (isLast ? 0 : GAP), width: thick, height: len };
+            return (
+              <rect
+                class="cf-mark cf-dim"
+                {...rect}
+                rx={isLast ? 3 : 0}
+                fill={s.color}
+                tabindex="0"
+                role="img"
+                aria-label={`${c}, ${s.name}: ${fmt(s.raw)}${normalized ? ` (${s.val.toFixed(0)}%)` : ''}`}
+                data-tip-title={c}
+                data-tip={`${s.color}::${s.name}: ${fmt(s.raw)}${normalized ? ` · ${s.val.toFixed(0)}%` : ''}`}
+              />
+            );
+          })}
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/SunburstChart.astro

@@ -0,0 +1,103 @@
+---
+/**
+ * SunburstChart — Two-level hierarchical donut: inner ring for parents, outer
+ * ring for children (shaded variants of the parent hue).
+ *
+ * @param {Array<{label: string, children: Array<{label: string, value: number}>}>} data - Hierarchy.
+ * @param {string} centerLabel - Caption in the middle.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string[]} colors - Optional per-parent colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { arcPath, colorAt, formatValue, sum } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  data?: Array<{ label: string; children: Array<{ label: string; value: number }> }>;
+  centerLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Cloud spend breakdown',
+  subtitle = 'Service → resource',
+  data = [
+    { label: 'Compute', children: [{ label: 'VMs', value: 4200 }, { label: 'Functions', value: 1800 }, { label: 'Containers', value: 2600 }] },
+    { label: 'Storage', children: [{ label: 'Object', value: 1900 }, { label: 'Block', value: 1100 }] },
+    { label: 'Network', children: [{ label: 'CDN', value: 1400 }, { label: 'Egress', value: 900 }] },
+    { label: 'Data', children: [{ label: 'Postgres', value: 1600 }, { label: 'Redis', value: 500 }] },
+  ],
+  centerLabel = 'Monthly spend',
+  prefix = '$',
+  suffix = '',
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const S = 300;
+const c = S / 2;
+const total = sum(data.flatMap((d) => d.children.map((ch) => ch.value))) || 1;
+const GAP = 0.01;
+let a = 0;
+const parents = data.slice(0, 8).map((d, pi) => {
+  const pv = sum(d.children.map((ch) => ch.value));
+  const a0 = a;
+  const sweep = (pv / total) * Math.PI * 2;
+  a += sweep;
+  const color = colorAt(pi, colors);
+  let ca = a0;
+  const kids = d.children.map((ch, ci) => {
+    const s = (ch.value / total) * Math.PI * 2;
+    const k0 = ca;
+    ca += s;
+    const mix = 100 - ci * (40 / Math.max(1, d.children.length - 1));
+    return { ...ch, d: arcPath(c, c, 146, 104, k0 + GAP / 2, k0 + s - GAP / 2), color: `color-mix(in srgb, ${color} ${mix}%, #0d0d0f)` };
+  });
+  return { label: d.label, value: pv, color, d: arcPath(c, c, 100, 62, a0 + GAP / 2, a0 + sweep - GAP / 2), kids };
+});
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+const pct = (v: number) => `${((v / total) * 100).toFixed(1)}%`;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={parents.map((p) => ({ label: p.label, color: p.color }))}
+  table={{ headers: ['Group', 'Item', 'Value', 'Share'], rows: parents.flatMap((p) => p.kids.map((k) => [p.label, k.label, fmt(k.value), pct(k.value)])) }}
+>
+  <div class="sbt">
+    <svg viewBox={`0 0 ${S} ${S}`} role="img" aria-label={`${title}: sunburst chart, total ${fmt(total)}`}>
+      {parents.map((p) => (
+        <g>
+          <path class="cf-mark cf-dim" d={p.d} fill={p.color} tabindex="0" role="img" aria-label={`${p.label}: ${fmt(p.value)} (${pct(p.value)})`}
+            data-tip-title={p.label} data-tip={`${p.color}::${fmt(p.value)} · ${pct(p.value)}`} />
+          {p.kids.map((k) => (
+            <path class="cf-mark cf-dim" d={k.d} fill={k.color} tabindex="0" role="img" aria-label={`${p.label} / ${k.label}: ${fmt(k.value)}`}
+              data-tip-title={`${p.label} › ${k.label}`} data-tip={`${k.color}::${fmt(k.value)} · ${pct(k.value)}`} />
+          ))}
+        </g>
+      ))}
+      <text x={c} y={c + 2} text-anchor="middle" class="sbt__total">{fmt(total)}</text>
+      <text x={c} y={c + 20} text-anchor="middle" class="cf-label">{centerLabel}</text>
+    </svg>
+  </div>
+</ChartFrame>
+
+<style>
+  .sbt { max-width: 340px; margin: 0 auto; }
+  .sbt__total { fill: var(--c-text-1, #fff); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
+</style>

package/src/components/lib/charts/TreemapChart.astro

@@ -0,0 +1,94 @@
+---
+/**
+ * TreemapChart — Squarified treemap where each rectangle's area is proportional
+ * to its value. Labels appear on tiles large enough to hold them.
+ *
+ * @param {Array<{label: string, value: number, group?: number}>} items - Tiles (group = color slot index).
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string[]} colors - Optional color overrides.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { squarify, colorAt, formatValue, sum } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ label: string; value: number; group?: number }>;
+  groups?: string[];
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Bundle size by module',
+  subtitle = 'Gzipped KB',
+  items = [
+    { label: 'react-dom', value: 42, group: 0 },
+    { label: 'astro runtime', value: 18, group: 1 },
+    { label: 'charts', value: 24, group: 2 },
+    { label: 'date-fns', value: 12, group: 0 },
+    { label: 'router', value: 9, group: 1 },
+    { label: 'icons', value: 15, group: 2 },
+    { label: 'i18n', value: 7, group: 1 },
+    { label: 'utils', value: 5, group: 2 },
+    { label: 'zod', value: 11, group: 0 },
+    { label: 'analytics', value: 6, group: 0 },
+  ],
+  groups = ['Vendor', 'Framework', 'App'],
+  prefix = '',
+  suffix = ' KB',
+  height = 320,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const rects = squarify(items.map((i) => i.value), { x: 0, y: 0, w: W, h: H });
+const total = sum(items.map((i) => i.value)) || 1;
+const fmt = (v: number) => formatValue(v, prefix, suffix, false);
+const GAP = 2;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={groups.map((g, i) => ({ label: g, color: colorAt(i, colors) }))}
+  table={{ headers: ['Item', 'Group', 'Value', 'Share'], rows: items.map((i) => [i.label, groups[i.group ?? 0] ?? '—', fmt(i.value), `${((i.value / total) * 100).toFixed(1)}%`]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: treemap of ${items.length} items`}>
+    {items.map((it, i) => {
+      const r = rects[i];
+      const c = colorAt(it.group ?? 0, colors);
+      const w = Math.max(0, r.w - GAP);
+      const h = Math.max(0, r.h - GAP);
+      const showLabel = w > 64 && h > 34;
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img" aria-label={`${it.label}: ${fmt(it.value)}`}
+          data-tip-title={it.label} data-tip={`${c}::${fmt(it.value)} · ${((it.value / total) * 100).toFixed(1)}%`}>
+          <rect x={r.x + GAP / 2} y={r.y + GAP / 2} width={w} height={h} rx="6" fill={c} fill-opacity="0.85" />
+          {showLabel && (
+            <>
+              <text x={r.x + 10} y={r.y + 20} fill="#fff" font-size="12" font-weight="650">{it.label}</text>
+              <text x={r.x + 10} y={r.y + 36} fill="rgb(var(--ink-rgb, 255 255 255) / 0.8)" font-size="11">{fmt(it.value)}</text>
+            </>
+          )}
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>