astro-component-kit 0.3.1 → 0.4.0

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

@@ -0,0 +1,113 @@
+---
+/**
+ * RangeAreaChart — Min/max band with an average line. Ideal for temperatures,
+ * latency percentiles or price ranges.
+ *
+ * @param {string[]} categories - X-axis labels.
+ * @param {number[]} min - Lower bound per period.
+ * @param {number[]} max - Upper bound per period.
+ * @param {number[]} avg - Central value per period.
+ * @param {string} bandLabel - Legend label for the band.
+ * @param {string} lineLabel - Legend label for the line.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Hue for band and line.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, bandPath, smoothPath, formatValue, type Point } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: string[];
+  min?: number[];
+  max?: number[];
+  avg?: number[];
+  bandLabel?: string;
+  lineLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'API latency',
+  subtitle = 'p10–p90 band with median, last 10 days',
+  categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed'],
+  min = [42, 45, 40, 48, 52, 38, 36, 44, 47, 41],
+  max = [120, 135, 118, 160, 172, 98, 90, 126, 140, 115],
+  avg = [74, 80, 70, 92, 101, 62, 58, 78, 86, 72],
+  bandLabel = 'p10–p90',
+  lineLabel = 'Median',
+  prefix = '',
+  suffix = 'ms',
+  height = 260,
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 12, r: 16, b: 28, l: 48 };
+const n = categories.length;
+const ticks = niceTicks(Math.min(...min), Math.max(...max), 4);
+const y = scaleLinear(ticks[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 upper: Point[] = max.map((v, i) => [x(i), y(v)]);
+const lower: Point[] = min.map((v, i) => [x(i), y(v)]);
+const mid: Point[] = avg.map((v, i) => [x(i), y(v)]);
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={[{ label: bandLabel, color: `color-mix(in srgb, ${color} 35%, transparent)` }, { label: lineLabel, color }]}
+  table={{
+    headers: ['Period', 'Min', lineLabel, 'Max'],
+    rows: categories.map((c, i) => [c, fmt(min[i]), fmt(avg[i]), fmt(max[i])]),
+  }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: range band 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>)}
+
+    <path d={bandPath(upper, lower)} fill={color} fill-opacity="0.18" aria-hidden="true" />
+    <path d={smoothPath(mid)} fill="none" stroke={color} stroke-width="2" aria-hidden="true" />
+
+    {categories.map((c, i) => (
+      <g class="cf-hit-group">
+        <line class="cf-cross" x1={x(i)} x2={x(i)} y1={y(max[i])} y2={y(min[i])} />
+        <circle class="cf-cross" cx={x(i)} cy={y(avg[i])} r="4.5" fill={color} stroke="#fff" stroke-width="1.5" />
+        <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}: min ${fmt(min[i])}, ${lineLabel} ${fmt(avg[i])}, max ${fmt(max[i])}`}
+          data-tip-title={c}
+          data-tip={`Max: ${fmt(max[i])}|${color}::${lineLabel}: ${fmt(avg[i])}|Min: ${fmt(min[i])}`}
+        />
+      </g>
+    ))}
+  </svg>
+</ChartFrame>

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

@@ -0,0 +1,126 @@
+---
+/**
+ * RetentionCohortTable — Triangular cohort retention matrix. Each row is a
+ * signup cohort, each column a period since signup, shaded on a single-hue ramp.
+ *
+ * @param {Array<{cohort: string, size: number, retention: number[]}>} cohorts - Retention % per period (period 0 = 100).
+ * @param {string} periodLabel - Column prefix (e.g. 'Week', 'Month').
+ * @param {string} color - Ramp hue.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  cohorts?: Array<{ cohort: string; size: number; retention: number[] }>;
+  periodLabel?: string;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'User retention',
+  subtitle = 'Monthly cohorts, % still active',
+  cohorts = [
+    { cohort: 'May', size: 1240, retention: [100, 62, 48, 41, 37, 35] },
+    { cohort: 'Jun', size: 1410, retention: [100, 65, 51, 44, 40] },
+    { cohort: 'Jul', size: 1580, retention: [100, 68, 55, 47] },
+    { cohort: 'Aug', size: 1720, retention: [100, 71, 57] },
+    { cohort: 'Sep', size: 1890, retention: [100, 73] },
+    { cohort: 'Oct', size: 2050, retention: [100] },
+  ],
+  periodLabel = 'M',
+  color = 'var(--chart-3, #199e70)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const periods = Math.max(...cohorts.map((c) => c.retention.length));
+const cols = Array.from({ length: periods }, (_, i) => `${periodLabel}${i}`);
+const shade = (v: number) => `color-mix(in srgb, ${color} ${Math.round(10 + (v / 100) * 85)}%, #141416)`;
+const avg = cols.map((_, i) => {
+  const vals = cohorts.map((c) => c.retention[i]).filter((v) => v !== undefined);
+  return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : 0;
+});
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+>
+  <div class="rc">
+    <table class="rc__table">
+      <caption class="sr-only">{title}: retention percentage by cohort and period</caption>
+      <thead>
+        <tr>
+          <th scope="col">Cohort</th>
+          <th scope="col">Users</th>
+          {cols.map((c) => <th scope="col">{c}</th>)}
+        </tr>
+      </thead>
+      <tbody>
+        {cohorts.map((c) => (
+          <tr>
+            <th scope="row">{c.cohort}</th>
+            <td class="rc__size">{c.size.toLocaleString('en-US')}</td>
+            {cols.map((_, i) => {
+              const v = c.retention[i];
+              return v === undefined
+                ? <td class="rc__empty" aria-label="no data yet"></td>
+                : <td class="rc__cell" style={`background:${shade(v)}`} data-strong={v > 55 ? '' : undefined}>{v}%</td>;
+            })}
+          </tr>
+        ))}
+      </tbody>
+      <tfoot>
+        <tr>
+          <th scope="row">Average</th>
+          <td></td>
+          {avg.map((a) => <td class="rc__avg">{a.toFixed(0)}%</td>)}
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</ChartFrame>
+
+<style>
+  .rc { overflow-x: auto; }
+  .rc__table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 3px;
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+  }
+  .rc__table th {
+    padding: 0.4rem 0.5rem;
+    font-weight: 600;
+    color: var(--c-text-3, #8a8a8a);
+    text-align: center;
+    white-space: nowrap;
+  }
+  .rc__table tbody th, .rc__table tfoot th { text-align: left; color: var(--c-text-1, #fff); }
+  .rc__size { color: var(--c-text-2, #a3a3a3); text-align: right; padding-right: 0.6rem; }
+  .rc__cell {
+    min-width: 3rem;
+    padding: 0.55rem 0.4rem;
+    text-align: center;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.78);
+  }
+  .rc__cell[data-strong] { color: #fff; font-weight: 650; }
+  .rc__empty { background: rgba(255, 255, 255, 0.02); border-radius: 4px; }
+  .rc__avg { text-align: center; color: var(--c-text-1, #fff); font-weight: 600; padding-top: 0.5rem; }
+  .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;
+  }
+</style>

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

@@ -0,0 +1,128 @@
+---
+/**
+ * SankeyChart — Two-column flow diagram: sources on the left, targets on the
+ * right, ribbons whose thickness encodes the flow volume.
+ *
+ * @param {Array<{source: string, target: string, value: number}>} flows - Links between nodes.
+ * @param {string} suffix - Value suffix.
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string[]} colors - Optional per-source colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { colorAt, formatValue, sum } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  flows?: Array<{ source: string; target: string; value: number }>;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Where signups come from',
+  subtitle = 'Acquisition channel → plan chosen',
+  flows = [
+    { source: 'Organic', target: 'Free', value: 820 },
+    { source: 'Organic', target: 'Pro', value: 310 },
+    { source: 'Organic', target: 'Team', value: 90 },
+    { source: 'Paid ads', target: 'Free', value: 410 },
+    { source: 'Paid ads', target: 'Pro', value: 160 },
+    { source: 'Referral', target: 'Pro', value: 220 },
+    { source: 'Referral', target: 'Team', value: 140 },
+    { source: 'Partners', target: 'Team', value: 120 },
+    { source: 'Partners', target: 'Enterprise', value: 60 },
+  ],
+  prefix = '',
+  suffix = '',
+  height = 320,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const nodeW = 12;
+const gap = 14;
+const xL = 110;
+const xR = W - 110 - nodeW;
+const sources = [...new Set(flows.map((f) => f.source))];
+const targets = [...new Set(flows.map((f) => f.target))];
+const total = sum(flows.map((f) => f.value)) || 1;
+const scaleFor = (count: number) => (H - gap * (count - 1)) / total;
+const k = Math.min(scaleFor(sources.length), scaleFor(targets.length));
+
+const layout = (names: string[], key: 'source' | 'target') => {
+  const used = names.reduce((a, nm) => a + sum(flows.filter((f) => f[key] === nm).map((f) => f.value)) * k, 0) + gap * (names.length - 1);
+  let y = (H - used) / 2;
+  return Object.fromEntries(names.map((nm) => {
+    const v = sum(flows.filter((f) => f[key] === nm).map((f) => f.value));
+    const node = { y, h: v * k, v, offset: 0 };
+    y += v * k + gap;
+    return [nm, node];
+  }));
+};
+const L = layout(sources, 'source');
+const R = layout(targets, 'target');
+const srcColor = Object.fromEntries(sources.map((s, i) => [s, colorAt(i, colors)]));
+
+const links = flows.map((f) => {
+  const s = L[f.source];
+  const t = R[f.target];
+  const h = f.value * k;
+  const y0 = s.y + s.offset + h / 2;
+  const y1 = t.y + t.offset + h / 2;
+  s.offset += h;
+  t.offset += h;
+  const x0 = xL + nodeW;
+  const x1 = xR;
+  const mx = (x0 + x1) / 2;
+  return { ...f, h, d: `M${x0},${y0} C${mx},${y0} ${mx},${y1} ${x1},${y1}`, color: srcColor[f.source] };
+});
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['From', 'To', 'Value', 'Share'], rows: flows.map((f) => [f.source, f.target, fmt(f.value), `${((f.value / total) * 100).toFixed(1)}%`]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: flow from ${sources.length} sources to ${targets.length} targets`}>
+    {links.map((l) => (
+      <path class="cf-mark cf-dim sk__link" d={l.d} fill="none" stroke={l.color} stroke-opacity="0.38" stroke-width={Math.max(1, l.h)}
+        tabindex="0" role="img" aria-label={`${l.source} to ${l.target}: ${fmt(l.value)}`}
+        data-tip-title={`${l.source} → ${l.target}`} data-tip={`${l.color}::${fmt(l.value)} · ${((l.value / total) * 100).toFixed(1)}%`} />
+    ))}
+    {sources.map((s) => (
+      <g>
+        <rect x={xL} y={L[s].y} width={nodeW} height={L[s].h} rx="3" fill={srcColor[s]} />
+        <text class="cf-label cf-label--strong" x={xL - 8} y={L[s].y + L[s].h / 2} text-anchor="end">{s}</text>
+        <text class="cf-label" x={xL - 8} y={L[s].y + L[s].h / 2 + 14} text-anchor="end">{fmt(L[s].v)}</text>
+      </g>
+    ))}
+    {targets.map((t) => (
+      <g>
+        <rect x={xR} y={R[t].y} width={nodeW} height={R[t].h} rx="3" fill="var(--c-text-2, #a3a3a3)" />
+        <text class="cf-label cf-label--strong" x={xR + nodeW + 8} y={R[t].y + R[t].h / 2}>{t}</text>
+        <text class="cf-label" x={xR + nodeW + 8} y={R[t].y + R[t].h / 2 + 14}>{fmt(R[t].v)}</text>
+      </g>
+    ))}
+  </svg>
+</ChartFrame>
+
+<style>
+  .sk__link { transition: stroke-opacity 0.2s ease; }
+  .sk__link:hover, .sk__link:focus-visible { stroke-opacity: 0.7; }
+</style>

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

@@ -0,0 +1,139 @@
+---
+/**
+ * ScatterPlot — X/Y relationship plot for up to 3 groups, with an optional
+ * least-squares trend line and per-point tooltips.
+ *
+ * @param {Array<{name: string, points: Array<{x: number, y: number, label?: string}>}>} groups - Point groups (max 3).
+ * @param {string} xLabel - X-axis title.
+ * @param {string} yLabel - Y-axis title.
+ * @param {boolean} trend - Draw a linear regression line across all points.
+ * @param {string[]} colors - Optional per-group colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, colorAt, formatCompact } from './chart-utils';
+
+interface Pt { x: number; y: number; label?: string }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  groups?: Array<{ name: string; points: Pt[] }>;
+  xLabel?: string;
+  yLabel?: string;
+  trend?: boolean;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const gen = (seed: number, n: number, slope: number, base: number, noise: number): Pt[] =>
+  Array.from({ length: n }, (_, i) => {
+    const r = Math.sin((i + 1) * seed) * 10000;
+    const j = r - Math.floor(r);
+    const xv = 5 + ((i * 37) % 95);
+    return { x: xv, y: Math.round(base + slope * xv + (j - 0.5) * noise) };
+  });
+
+const {
+  title = 'Ad spend vs signups',
+  subtitle = 'Per campaign',
+  groups = [
+    { name: 'Search', points: gen(3.1, 16, 2.1, 20, 60) },
+    { name: 'Social', points: gen(7.7, 14, 1.3, 10, 70) },
+    { name: 'Video', points: gen(5.3, 10, 0.8, 30, 50) },
+  ],
+  xLabel = 'Spend ($k)',
+  yLabel = 'Signups',
+  trend = true,
+  height = 300,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 12, r: 16, b: 40, l: 52 };
+const all = groups.flatMap((g) => g.points);
+const xt = niceTicks(Math.min(0, ...all.map((p) => p.x)), Math.max(...all.map((p) => p.x)), 5);
+const yt = niceTicks(Math.min(0, ...all.map((p) => p.y)), Math.max(...all.map((p) => p.y)), 4);
+const x = scaleLinear(xt[0], xt[xt.length - 1], m.l, W - m.r);
+const y = scaleLinear(yt[0], yt[yt.length - 1], H - m.b, m.t);
+
+// Ordinary least squares over all points.
+const n = all.length;
+const mx = all.reduce((a, p) => a + p.x, 0) / n;
+const my = all.reduce((a, p) => a + p.y, 0) / n;
+const slope = all.reduce((a, p) => a + (p.x - mx) * (p.y - my), 0) / (all.reduce((a, p) => a + (p.x - mx) ** 2, 0) || 1);
+const icpt = my - slope * mx;
+const r2 = (() => {
+  const ssTot = all.reduce((a, p) => a + (p.y - my) ** 2, 0) || 1;
+  const ssRes = all.reduce((a, p) => a + (p.y - (icpt + slope * p.x)) ** 2, 0);
+  return 1 - ssRes / ssTot;
+})();
+const shapes = ['circle', 'square', 'diamond'];
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={groups.slice(0, 3).map((g, i) => ({ label: g.name, color: colorAt(i, colors) }))}
+  table={{ headers: ['Group', xLabel, yLabel], rows: groups.flatMap((g) => g.points.map((p) => [p.label ? `${g.name} · ${p.label}` : g.name, p.x, p.y])) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: scatter plot of ${n} points${trend ? `, trend R² ${r2.toFixed(2)}` : ''}`}>
+    {yt.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">{formatCompact(t)}</text>
+      </g>
+    ))}
+    {xt.map((t) => (
+      <g>
+        <line class="cf-grid" x1={x(t)} x2={x(t)} y1={m.t} y2={H - m.b} />
+        <text class="cf-label" x={x(t)} y={H - m.b + 16} text-anchor="middle">{formatCompact(t)}</text>
+      </g>
+    ))}
+    <text class="cf-label" x={(m.l + W - m.r) / 2} y={H - 4} text-anchor="middle">{xLabel}</text>
+    <text class="cf-label" transform={`translate(12 ${(m.t + H - m.b) / 2}) rotate(-90)`} text-anchor="middle">{yLabel}</text>
+
+    {trend && (
+      <g aria-hidden="true">
+        <line x1={x(xt[0])} y1={y(icpt + slope * xt[0])} x2={x(xt[xt.length - 1])} y2={y(icpt + slope * xt[xt.length - 1])}
+          stroke="var(--c-text-1, #fff)" stroke-opacity="0.45" stroke-width="1.5" />
+        <text class="cf-label" x={W - m.r} y={y(icpt + slope * xt[xt.length - 1]) - 8} text-anchor="end">R² {r2.toFixed(2)}</text>
+      </g>
+    )}
+
+    {groups.slice(0, 3).map((g, gi) => {
+      const col = colorAt(gi, colors);
+      return g.points.map((p) => {
+        const px = x(p.x);
+        const py = y(p.y);
+        const common = {
+          class: 'cf-mark cf-dim',
+          fill: col,
+          'fill-opacity': 0.85,
+          stroke: 'var(--chart-surface, #0d0d0f)',
+          'stroke-width': 1.5,
+          tabindex: 0,
+          role: 'img' as const,
+          'aria-label': `${g.name}${p.label ? ` ${p.label}` : ''}: ${xLabel} ${p.x}, ${yLabel} ${p.y}`,
+          'data-tip-title': p.label ?? g.name,
+          'data-tip': `${col}::${g.name}|${xLabel}: ${p.x}|${yLabel}: ${p.y}`,
+        };
+        return shapes[gi] === 'square'
+          ? <rect {...common} x={px - 5} y={py - 5} width="10" height="10" rx="2" />
+          : shapes[gi] === 'diamond'
+            ? <path {...common} d={`M${px},${py - 6.5} L${px + 6.5},${py} L${px},${py + 6.5} L${px - 6.5},${py} Z`} />
+            : <circle {...common} cx={px} cy={py} r="5.5" />;
+      });
+    })}
+  </svg>
+</ChartFrame>

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

@@ -0,0 +1,119 @@
+---
+/**
+ * SegmentedBarChart — A single tall part-to-whole bar with labelled segments
+ * and a breakdown list. A clearer alternative to a pie for ≤ 6 parts.
+ *
+ * @param {Array<{label: string, value: number}>} segments - Parts of the whole.
+ * @param {string} total - Optional formatted total for the header.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string[]} colors - Optional per-segment colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { colorAt, formatValue, sum } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  segments?: Array<{ label: string; value: number }>;
+  total?: string;
+  prefix?: string;
+  suffix?: string;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Storage usage',
+  subtitle = '512 GB plan',
+  segments = [
+    { label: 'Media', value: 182 },
+    { label: 'Backups', value: 96 },
+    { label: 'Databases', value: 64 },
+    { label: 'Logs', value: 38 },
+    { label: 'Other', value: 22 },
+  ],
+  total,
+  prefix = '',
+  suffix = ' GB',
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const tot = sum(segments.map((s) => s.value)) || 1;
+const fmt = (v: number) => formatValue(v, prefix, suffix, false);
+const segs = segments.slice(0, 8).map((s, i) => ({ ...s, pct: (s.value / tot) * 100, color: colorAt(i, colors) }));
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  value={total ?? fmt(tot)}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Segment', 'Value', 'Share'], rows: segs.map((s) => [s.label, fmt(s.value), `${s.pct.toFixed(1)}%`]) }}
+>
+  <div class="sb__bar" role="list" aria-label={`${title} breakdown`}>
+    {segs.map((s) => (
+      <span class="sb__seg cf-mark" role="listitem" tabindex="0" style={`flex-grow:${s.value}; background:${s.color}`}
+        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)}%`}>
+        {s.pct >= 9 && <span class="sb__pct">{s.pct.toFixed(0)}%</span>}
+      </span>
+    ))}
+  </div>
+  <ul class="sb__list">
+    {segs.map((s) => (
+      <li>
+        <span class="sb__dot" style={`background:${s.color}`} aria-hidden="true"></span>
+        <span class="sb__name">{s.label}</span>
+        <span class="sb__val">{fmt(s.value)}</span>
+      </li>
+    ))}
+  </ul>
+</ChartFrame>
+
+<style>
+  .sb__bar {
+    display: flex;
+    gap: 2px;
+    height: 44px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .sb__seg {
+    flex-basis: 0;
+    min-width: 4px;
+    display: flex;
+    align-items: center;
+    padding-left: 0.6rem;
+    transition: filter 0.2s ease;
+  }
+  .sb__seg:hover { filter: brightness(1.15); }
+  .sb__seg:focus-visible { outline: 2px solid var(--c-text-1, #fff); outline-offset: -2px; }
+  .sb__pct {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+  }
+  .sb__list {
+    list-style: none;
+    margin: 1rem 0 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 0.6rem 1.25rem;
+  }
+  .sb__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
+  .sb__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
+  .sb__name { color: var(--c-text-2, #a3a3a3); }
+  .sb__val { margin-left: auto; color: var(--c-text-1, #fff); font-weight: 600; font-variant-numeric: tabular-nums; }
+</style>