astro-component-kit 0.3.1 → 0.4.0

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

@@ -0,0 +1,136 @@
+---
+/**
+ * LinearProgressGauge — Multi-segmented horizontal memory or budget progress bar with breakdown legend.
+ * 
+ * @param {string} title - Gauge header label. Default is 'Resource Allocation'.
+ * @param {Array<{label: string, value: number, color: string}>} segments - Proportion breakdown chunks.
+ * @param {string} total - Formatted total capacity string (e.g. '16 GB', '100%'). Default is '100%'.
+ */
+interface Props {
+  title?: string;
+  segments?: Array<{ label: string; value: number; color: string }>;
+  total?: string;
+}
+
+const {
+  title = 'System Resource Allocation',
+  segments = [
+    { label: 'SSR Execution', value: 45, color: '#d4a017' },
+    { label: 'Asset Caching', value: 25, color: '#38bdf8' },
+    { label: 'Edge Worker', value: 15, color: '#a855f7' },
+    { label: 'Free Headroom', value: 15, color: 'rgba(255,255,255,0.1)' },
+  ],
+  total = '100%',
+} = Astro.props;
+
+const totalSum = segments.reduce((acc, s) => acc + s.value, 0) || 100;
+---
+
+<div class="linear-gauge">
+  <div class="linear-gauge__header">
+    <span class="linear-gauge__title">{title}</span>
+    <span class="linear-gauge__total">{total}</span>
+  </div>
+
+  <div class="linear-gauge__bar" role="progressbar" aria-valuemax="100" aria-valuemin="0">
+    {segments.map((seg) => {
+      const pct = (seg.value / totalSum) * 100;
+      return (
+        <div
+          class="linear-gauge__chunk"
+          style={`width: ${pct}%; background-color: ${seg.color};`}
+          title={`${seg.label}: ${seg.value}%`}
+        />
+      );
+    })}
+  </div>
+
+  <div class="linear-gauge__legend">
+    {segments.map((seg) => (
+      <div class="legend-item">
+        <span class="legend-item__dot" style={`background-color: ${seg.color};`}></span>
+        <span class="legend-item__name">{seg.label}</span>
+        <span class="legend-item__val">{seg.value}%</span>
+      </div>
+    ))}
+  </div>
+</div>
+
+<style>
+  .linear-gauge {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    max-width: 440px;
+    padding: var(--sp-6, 1.5rem);
+    background: rgba(255, 255, 255, 0.02);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 20px);
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .linear-gauge__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .linear-gauge__title {
+    font-size: 0.88rem;
+    font-weight: 700;
+    color: var(--c-text-1, #ffffff);
+  }
+
+  .linear-gauge__total {
+    font-size: 0.82rem;
+    font-weight: 800;
+    color: var(--c-primary-light, #d4a017);
+  }
+
+  .linear-gauge__bar {
+    display: flex;
+    height: 10px;
+    border-radius: var(--r-full, 9999px);
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.05);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
+  }
+
+  .linear-gauge__chunk {
+    height: 100%;
+    transition: width 0.4s ease;
+  }
+
+  .linear-gauge__legend {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px 12px;
+    margin-top: 4px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.75rem;
+  }
+
+  .legend-item__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .legend-item__name {
+    color: var(--c-text-2, #a3a3a3);
+    flex: 1;
+  }
+
+  .legend-item__val {
+    font-weight: 700;
+    color: var(--c-text-1, #ffffff);
+  }
+</style>

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

@@ -0,0 +1,100 @@
+---
+/**
+ * LollipopChart — Lightweight alternative to a bar chart: a thin stem with a dot
+ * at the value. Optionally draws a target/benchmark line.
+ *
+ * @param {Array<{label: string, value: number}>} items - Values to plot.
+ * @param {number} target - Optional benchmark value.
+ * @param {string} targetLabel - Label for the benchmark line.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Stem/dot color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, formatValue } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ label: string; value: number }>;
+  target?: number;
+  targetLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Lighthouse performance',
+  subtitle = 'Score per page template',
+  items = [
+    { label: 'Home', value: 98 },
+    { label: 'Docs', value: 96 },
+    { label: 'Blog', value: 91 },
+    { label: 'Pricing', value: 88 },
+    { label: 'Dashboard', value: 74 },
+    { label: 'Checkout', value: 81 },
+    { label: 'Search', value: 69 },
+  ],
+  target = 90,
+  targetLabel = 'Goal',
+  prefix = '',
+  suffix = '',
+  height = 270,
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 16, r: 12, b: 30, l: 40 };
+const ticks = niceTicks(0, Math.max(...items.map((i) => i.value), target ?? 0), 4);
+const y = scaleLinear(0, ticks[ticks.length - 1], H - m.b, m.t);
+const band = (W - m.l - m.r) / items.length;
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Item', 'Value', targetLabel], rows: items.map((i) => [i.label, fmt(i.value), target !== undefined ? (i.value >= target ? 'Met' : 'Below') : '—']) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: lollipop chart`}>
+    {ticks.map((t) => (
+      <g>
+        <line class={t === 0 ? 'cf-axis' : '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>
+    ))}
+    {target !== undefined && (
+      <g aria-hidden="true">
+        <line x1={m.l} x2={W - m.r} y1={y(target)} y2={y(target)} stroke="var(--c-text-1, #fff)" stroke-opacity="0.55" stroke-width="1" stroke-dasharray="4 4" />
+        <text class="cf-label" x={W - m.r} y={y(target) - 6} text-anchor="end">{targetLabel} {fmt(target)}</text>
+      </g>
+    )}
+    {items.map((it, i) => {
+      const cx = m.l + i * band + band / 2;
+      const below = target !== undefined && target > it.value;
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img" aria-label={`${it.label}: ${fmt(it.value)}${below ? ', below goal' : ''}`}
+          data-tip-title={it.label} data-tip={`${color}::${fmt(it.value)}${target !== undefined ? `|${below ? 'Below' : 'Meets'} ${targetLabel.toLowerCase()}` : ''}`}>
+          <line x1={cx} x2={cx} y1={y(0)} y2={y(it.value)} stroke={color} stroke-width="2" stroke-opacity={below ? 0.5 : 1} />
+          <circle cx={cx} cy={y(it.value)} r="7" fill={below ? 'var(--chart-surface, #0d0d0f)' : color} stroke={color} stroke-width="2.5" />
+          <rect x={cx - band / 2} y={m.t} width={band} height={H - m.t - m.b} fill="transparent" />
+          <text class="cf-label" x={cx} y={H - 10} text-anchor="middle">{it.label}</text>
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

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

@@ -0,0 +1,122 @@
+---
+/**
+ * MeterGauge — Speedometer-style dial with labelled threshold zones and a
+ * needle. Zones use status colors and every zone is named in text.
+ *
+ * @param {number} value - Current reading.
+ * @param {number} min - Scale minimum.
+ * @param {number} max - Scale maximum.
+ * @param {Array<{to: number, label: string, tone: 'good'|'warn'|'bad'}>} zones - Ascending zones.
+ * @param {string} unit - Unit label.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { arcStroke, polar } from './chart-utils';
+
+interface Zone { to: number; label: string; tone: 'good' | 'warn' | 'bad' }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  value?: number;
+  min?: number;
+  max?: number;
+  zones?: Zone[];
+  unit?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'CPU load',
+  subtitle = 'Cluster average, live',
+  value = 68,
+  min = 0,
+  max = 100,
+  zones = [
+    { to: 60, label: 'Healthy', tone: 'good' },
+    { to: 85, label: 'Elevated', tone: 'warn' },
+    { to: 100, label: 'Critical', tone: 'bad' },
+  ],
+  unit = '%',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const toneColor = { good: 'var(--chart-pos, #34c38f)', warn: 'var(--chart-4, #c98500)', bad: 'var(--chart-neg, #f06a6a)' };
+const W = 280;
+const H = 170;
+const cx = W / 2;
+const cy = 150;
+const r = 112;
+const span = (Math.PI * 4) / 3; // 240°
+const start = -span / 2;
+const ang = (v: number) => start + ((Math.min(max, Math.max(min, v)) - min) / (max - min || 1)) * span;
+let prev = min;
+const arcs = zones.map((z) => {
+  const d = arcStroke(cx, cy - 20, r, ang(prev) + 0.015, ang(z.to) - 0.015);
+  prev = z.to;
+  return { ...z, d };
+});
+const current = zones.find((z) => value <= z.to) ?? zones[zones.length - 1];
+const [nx, ny] = polar(cx, cy - 20, r - 24, ang(value));
+const ticks = [min, min + (max - min) / 2, max];
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Zone', 'Up to'], rows: zones.map((z) => [z.label, `${z.to}${unit}`]) }}
+>
+  <div class="mg" role="meter" aria-valuemin={min} aria-valuemax={max} aria-valuenow={value} aria-valuetext={`${value}${unit}, ${current.label}`} aria-label={title}>
+    <svg viewBox={`0 0 ${W} ${H}`} aria-hidden="true">
+      {arcs.map((a) => <path d={a.d} fill="none" stroke={toneColor[a.tone]} stroke-width="14" stroke-linecap="butt" opacity={a.label === current.label ? 1 : 0.3} />)}
+      {ticks.map((t) => {
+        const [tx, ty] = polar(cx, cy - 20, r + 18, ang(t));
+        return <text class="cf-label" x={tx} y={ty + 4} text-anchor="middle">{t}</text>;
+      })}
+      <line class="mg__needle" x1={cx} y1={cy - 20} x2={nx} y2={ny} stroke="var(--c-text-1, #fff)" stroke-width="3" stroke-linecap="round" />
+      <circle cx={cx} cy={cy - 20} r="7" fill="var(--c-text-1, #fff)" />
+      <circle cx={cx} cy={cy - 20} r="3" fill="var(--chart-surface, #0d0d0f)" />
+    </svg>
+    <div class="mg__readout">
+      <span class="mg__value">{value}<small>{unit}</small></span>
+      <span class="mg__zone" style={`--mg-c:${toneColor[current.tone]}`}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
+          {current.tone === 'good' ? <path d="M20 6 9 17l-5-5" /> : <><circle cx="12" cy="12" r="9" /><path d="M12 8v4M12 16h.01" /></>}
+        </svg>
+        {current.label}
+      </span>
+    </div>
+  </div>
+</ChartFrame>
+
+<style>
+  .mg { max-width: 320px; margin: 0 auto; text-align: center; }
+  .mg__needle {
+    transform-origin: 140px 130px;
+    animation: mg-swing 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  }
+  @keyframes mg-swing { from { transform: rotate(-120deg); } }
+  .mg__readout { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: -0.75rem; }
+  .mg__value { font-size: 2rem; font-weight: 750; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; line-height: 1; }
+  .mg__value small { font-size: 1rem; color: var(--c-text-2, #a3a3a3); margin-left: 2px; }
+  .mg__zone {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--c-text-1, #fff);
+    background: color-mix(in srgb, var(--mg-c) 20%, transparent);
+  }
+  .mg__zone svg { color: var(--mg-c); }
+  @media (prefers-reduced-motion: reduce) { .mg__needle { animation: none; } }
+</style>

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

@@ -0,0 +1,125 @@
+---
+/**
+ * MetricDeltaTable — Comparison table with inline bars, current vs previous
+ * values and signed deltas with direction icons. A "table + chart" hybrid.
+ *
+ * @param {Array<{label: string, current: number, previous: number, invert?: boolean}>} rows - Metrics.
+ * @param {string} currentLabel - Header for current values.
+ * @param {string} previousLabel - Header for previous values.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Inline bar color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import SparklineChart from './SparklineChart.astro';
+import { formatValue } from './chart-utils';
+
+interface Row { label: string; current: number; previous: number; invert?: boolean; trend?: number[] }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  rows?: Row[];
+  currentLabel?: string;
+  previousLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Channel performance',
+  subtitle = 'Signups this month vs last month',
+  rows = [
+    { label: 'Organic search', current: 4820, previous: 4310, trend: [30, 34, 33, 38, 41, 44, 48] },
+    { label: 'Direct', current: 3120, previous: 3290, trend: [36, 35, 34, 33, 33, 32, 31] },
+    { label: 'Newsletter', current: 1840, previous: 1220, trend: [10, 12, 13, 14, 16, 17, 18] },
+    { label: 'Paid social', current: 1310, previous: 1480, trend: [16, 15, 15, 14, 14, 13, 13] },
+    { label: 'Partners', current: 960, previous: 710, trend: [6, 7, 7, 8, 8, 9, 10] },
+  ],
+  currentLabel = 'This month',
+  previousLabel = 'Last month',
+  prefix = '',
+  suffix = '',
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const max = Math.max(...rows.map((r) => r.current)) || 1;
+const fmt = (v: number) => formatValue(v, prefix, suffix, false);
+---
+
+<ChartFrame title={title} subtitle={subtitle} variant={variant} size={size} className={className}>
+  <div class="md">
+    <table class="md__table">
+      <thead>
+        <tr>
+          <th scope="col">Metric</th>
+          <th scope="col" class="md__num">{currentLabel}</th>
+          <th scope="col" class="md__num md__hide-sm">{previousLabel}</th>
+          <th scope="col" class="md__num">Change</th>
+          <th scope="col" class="md__hide-sm"><span class="sr-only">Trend</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((r) => {
+          const d = r.previous ? ((r.current - r.previous) / r.previous) * 100 : 0;
+          const up = d >= 0;
+          const good = r.invert ? !up : up;
+          return (
+            <tr>
+              <th scope="row">
+                <span class="md__label">{r.label}</span>
+                <span class="md__bar" aria-hidden="true"><span style={`width:${(r.current / max) * 100}%; background:${color}`}></span></span>
+              </th>
+              <td class="md__num md__strong">{fmt(r.current)}</td>
+              <td class="md__num md__hide-sm">{fmt(r.previous)}</td>
+              <td class="md__num">
+                <span class={`md__delta ${good ? 'md__delta--good' : 'md__delta--bad'}`}>
+                  <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d={up ? 'M5 1 L9 7 H1 Z' : 'M5 9 L9 3 H1 Z'} fill="currentColor" /></svg>
+                  <span class="sr-only">{up ? 'up' : 'down'}</span>
+                  {Math.abs(d).toFixed(1)}%
+                </span>
+              </td>
+              <td class="md__hide-sm">{r.trend && <SparklineChart data={r.trend} size="sm" variant="line" label={`${r.label} trend`} color={good ? 'var(--chart-pos, #34c38f)' : 'var(--chart-neg, #f06a6a)'} />}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  </div>
+</ChartFrame>
+
+<style>
+  .md { overflow-x: auto; }
+  .md__table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
+  .md__table th, .md__table td {
+    padding: 0.7rem 0.6rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    text-align: left;
+    vertical-align: middle;
+  }
+  .md__table thead th { font-size: 0.6875rem; font-weight: 600; color: var(--c-text-3, #8a8a8a); text-transform: uppercase; letter-spacing: 0.04em; }
+  .md__table tbody tr { transition: background 0.2s ease; }
+  .md__table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
+  .md__table tbody th { font-weight: 500; min-width: 9rem; }
+  .md__label { display: block; color: var(--c-text-1, #fff); margin-bottom: 0.35rem; }
+  .md__bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
+  .md__bar span { display: block; height: 100%; border-radius: 2px; }
+  .md__num { text-align: right !important; white-space: nowrap; color: var(--c-text-2, #a3a3a3); }
+  .md__strong { color: var(--c-text-1, #fff); font-weight: 650; }
+  .md__delta { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--c-text-1, #fff); font-weight: 600; }
+  .md__delta--good svg { color: var(--chart-pos, #34c38f); }
+  .md__delta--bad svg { color: var(--chart-neg, #f06a6a); }
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+  @media (max-width: 560px) { .md__hide-sm { display: none; } }
+</style>

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

@@ -0,0 +1,135 @@
+---
+/**
+ * PieChart — Pure SVG pie or donut with a 2px surface gap between slices,
+ * centre total, and a side breakdown with values. Best for ≤ 6 slices.
+ *
+ * @param {Array<{label: string, value: number}>} slices - Parts of the whole.
+ * @param {boolean} donut - Render as a donut with centre label.
+ * @param {string} centerLabel - Caption under the centre total.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string[]} colors - Optional per-slice 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;
+  slices?: Array<{ label: string; value: number }>;
+  donut?: boolean;
+  centerLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Revenue by plan',
+  subtitle = 'Share of MRR',
+  slices = [
+    { label: 'Enterprise', value: 48200 },
+    { label: 'Team', value: 31400 },
+    { label: 'Pro', value: 18900 },
+    { label: 'Starter', value: 7600 },
+  ],
+  donut = true,
+  centerLabel = 'Total MRR',
+  prefix = '$',
+  suffix = '',
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const S = 240;
+const c = S / 2;
+const rO = S / 2 - 4;
+const rI = donut ? rO * 0.62 : 0;
+const total = sum(slices.map((s) => s.value)) || 1;
+const GAP = 0.012; // radians of surface gap between slices
+let a = 0;
+const arcs = slices.slice(0, 8).map((s, i) => {
+  const sweep = (s.value / total) * Math.PI * 2;
+  const a0 = a + (slices.length > 1 ? GAP / 2 : 0);
+  const a1 = a + sweep - (slices.length > 1 ? GAP / 2 : 0);
+  a += sweep;
+  return { ...s, d: arcPath(c, c, rO, rI, a0, Math.max(a0, a1)), pct: (s.value / total) * 100, color: colorAt(i, colors) };
+});
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Slice', 'Value', 'Share'], rows: arcs.map((s) => [s.label, fmt(s.value), `${s.pct.toFixed(1)}%`]) }}
+>
+  <div class="pc">
+    <svg viewBox={`0 0 ${S} ${S}`} role="img" aria-label={`${title}: ${donut ? 'donut' : 'pie'} chart, total ${fmt(total)}`}>
+      {arcs.map((s) => (
+        <path class="cf-mark cf-dim pc__slice" d={s.d} fill={s.color} tabindex="0" role="img"
+          aria-label={`${s.label}: ${fmt(s.value)} (${s.pct.toFixed(1)}%)`}
+          data-tip-title={s.label} data-tip={`${s.color}::${fmt(s.value)} · ${s.pct.toFixed(1)}%`} />
+      ))}
+      {donut && (
+        <g aria-hidden="true">
+          <text x={c} y={c + 2} text-anchor="middle" class="pc__total">{fmt(total)}</text>
+          <text x={c} y={c + 22} text-anchor="middle" class="cf-label">{centerLabel}</text>
+        </g>
+      )}
+    </svg>
+    <ul class="pc__list">
+      {arcs.map((s) => (
+        <li>
+          <span class="pc__dot" style={`background:${s.color}`} aria-hidden="true"></span>
+          <span class="pc__name">{s.label}</span>
+          <span class="pc__pct">{s.pct.toFixed(0)}%</span>
+          <span class="pc__val">{fmt(s.value)}</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+</ChartFrame>
+
+<style>
+  .pc {
+    display: grid;
+    grid-template-columns: minmax(0, 240px) 1fr;
+    gap: 2rem;
+    align-items: center;
+  }
+  .pc__slice { transform-origin: center; transform-box: view-box; transition: transform 0.2s ease, opacity 0.2s ease; }
+  .pc__slice:hover, .pc__slice:focus-visible { transform: scale(1.03); }
+  .pc__total {
+    fill: var(--c-text-1, #fff);
+    font-size: 24px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+  .pc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
+  .pc__list li {
+    display: grid;
+    grid-template-columns: 10px 1fr auto auto;
+    align-items: center;
+    gap: 0.6rem;
+    font-size: 0.875rem;
+  }
+  .pc__dot { width: 10px; height: 10px; border-radius: 3px; }
+  .pc__name { color: var(--c-text-2, #a3a3a3); }
+  .pc__pct { color: var(--c-text-3, #8a8a8a); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
+  .pc__val { color: var(--c-text-1, #fff); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4rem; text-align: right; }
+  @media (max-width: 560px) {
+    .pc { grid-template-columns: 1fr; justify-items: center; }
+    .pc svg { max-width: 220px; }
+    .pc__list { width: 100%; }
+  }
+</style>