@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/src/charts/core/category-explorer.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { type KeyboardEvent, type PointerEvent, useState } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface CategoryExplorerOptions {
+  count: number;
+  /** Hidden categories are skipped by the keyboard and ignored by the pointer. */
+  isAvailable?: (index: number) => boolean;
+  /** Tooltip anchor (container pixels) when a category is chosen with the keyboard. */
+  anchor: (index: number) => { x: number; y: number } | null;
+}
+
+export interface CategoryExplorer {
+  /** Category under the pointer or the keyboard cursor. */
+  active: number | null;
+  /** Where the tooltip goes, relative to the chart container. */
+  position: { x: number; y: number } | null;
+  /** Spread on the `<svg>`; marks carry `data-category={index}`. */
+  pointerProps: {
+    onPointerMove: (event: PointerEvent<Element>) => void;
+    onPointerLeave: () => void;
+  };
+  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+/**
+ * Hover and keyboard cursor for charts whose marks belong to categories
+ * (units, cells, seats, rows). The pointer finds the category through the
+ * nearest `[data-category]` ancestor of the hovered mark, so no mark needs its
+ * own handlers; the keyboard moves between available categories.
+ */
+export function useCategoryExplorer({
+  count,
+  isAvailable = () => true,
+  anchor,
+}: CategoryExplorerOptions): CategoryExplorer {
+  const [active, setActive] = useState<number | null>(null);
+  const [pointer, setPointer] = useState<{ x: number; y: number } | null>(null);
+
+  const available: number[] = [];
+  for (let index = 0; index < count; index += 1) if (isAvailable(index)) available.push(index);
+
+  const clear = () => {
+    setActive(null);
+    setPointer(null);
+  };
+
+  const onPointerMove = (event: PointerEvent<Element>) => {
+    const target = event.target as Element | null;
+    const hit = target?.closest?.("[data-category]");
+    const index = hit ? Number(hit.getAttribute("data-category")) : Number.NaN;
+    if (!Number.isInteger(index) || !available.includes(index)) {
+      clear();
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    setActive(index);
+    setPointer({ x: event.clientX - rect.left, y: event.clientY - rect.top });
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (!available.length) return;
+    const at = active == null ? -1 : available.indexOf(active);
+    let next: number;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      next = Math.min(available.length - 1, at + 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      next = Math.max(0, at - 1);
+    } else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = available.length - 1;
+    else if (event.key === "Escape") {
+      clear();
+      return;
+    } else return;
+    event.preventDefault();
+    setPointer(null);
+    setActive(available[next] ?? null);
+  };
+
+  const shown = active != null && available.includes(active) ? active : null;
+  return {
+    active: shown,
+    position: shown == null ? null : (pointer ?? anchor(shown)),
+    pointerProps: { onPointerMove, onPointerLeave: clear },
+    onKeyDown,
+    onFocus: () => setActive((current) => current ?? available[0] ?? null),
+    onBlur: clear,
+  };
+}
+
+export interface CategorySliderProps {
+  explorer: CategoryExplorer;
+  label: string;
+  count: number;
+  /** What a screen reader hears for the current category. */
+  valueText: string;
+  className?: string;
+}
+
+/**
+ * Focusable keyboard layer laid over the drawing. It ignores the pointer
+ * (`pointer-events: none`), so hovering still reaches the marks underneath.
+ */
+export function CategorySlider({
+  explorer,
+  label,
+  count,
+  valueText,
+  className,
+}: CategorySliderProps) {
+  return (
+    <div
+      role="slider"
+      tabIndex={0}
+      aria-label={label}
+      aria-valuemin={1}
+      aria-valuemax={Math.max(1, count)}
+      aria-valuenow={(explorer.active ?? 0) + 1}
+      aria-valuetext={valueText}
+      onKeyDown={explorer.onKeyDown}
+      onFocus={explorer.onFocus}
+      onBlur={explorer.onBlur}
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-4",
+        className,
+      )}
+    />
+  );
+}

package/src/charts/core/chart-frame.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "../../utils/cn.js";
+import { ChartEmpty, ChartSkeleton } from "./chart-states.js";
+import type { ChartLabels } from "./types.js";
+import { resolveDrawingHeight, useChartSize } from "./use-chart-size.js";
+
+/** Smallest drawing height while filling a parent that has no height of its own. */
+const FILL_MIN_HEIGHT = 120;
+
+export interface ChartFrameProps {
+  /**
+   * Height of the drawing area in pixels (legend and brush are extra), or
+   * `"fill"` to take whatever height the parent leaves after the legend and
+   * footer. The parent needs a definite height (fixed, flex or grid sized).
+   * A function derives the height from the measured width.
+   */
+  height: number | "fill" | ((width: number) => number);
+  /** Width / height ratio of the drawing. Wins over a pixel `height`; ignored with `"fill"`. */
+  aspectRatio?: number;
+  labels: ChartLabels;
+  loading?: boolean;
+  /** Nothing to plot: renders the empty state instead of `children`. */
+  empty?: boolean;
+  /** Skeleton silhouette while loading. */
+  skeleton?: "bars" | "line" | "ring";
+  legend?: ReactNode;
+  legendPosition?: "top" | "bottom";
+  /**
+   * Polar charts: when the container is wide (`@lg/chart`) the legend moves
+   * to a column beside the drawing instead of stacking above or below it.
+   */
+  legendAside?: boolean;
+  /** Accessible data table (usually `ChartDataTable`), rendered after the drawing. */
+  table?: ReactNode;
+  /** Content under the drawing, e.g. the brush. Hidden while loading or empty. */
+  footer?: ReactNode;
+  className?: string;
+  /** Receives the measured width and the drawing height (a fallback on the server). */
+  children: (width: number, height: number) => ReactNode;
+}
+
+/**
+ * Shared outer shell for every chart: measures its slot (width and, when
+ * filling, height), swaps in the loading or empty state, and places the
+ * legend, drawing, footer and the hidden data table in a consistent order.
+ * The root has no padding or margin: the drawing touches the container edges.
+ */
+export function ChartFrame({
+  height,
+  aspectRatio,
+  labels,
+  loading,
+  empty,
+  skeleton = "bars",
+  legend,
+  legendPosition = "top",
+  legendAside = false,
+  table,
+  footer,
+  className,
+  children,
+}: ChartFrameProps) {
+  const [ref, size] = useChartSize<HTMLDivElement>();
+  const fill = height === "fill";
+  const drawingHeight = resolveDrawingHeight({
+    height,
+    aspectRatio,
+    width: size.width,
+    measured: size.height,
+  });
+  const ready = !loading && !empty;
+  const legendNode =
+    ready && legend ? (
+      legendAside ? (
+        <div className="@lg/chart:order-last @lg/chart:w-44 @lg/chart:shrink-0 @lg/chart:[&_ul]:flex-col @lg/chart:[&_ul]:flex-nowrap @lg/chart:[&_ul]:items-start">
+          {legend}
+        </div>
+      ) : (
+        legend
+      )
+    ) : null;
+
+  return (
+    <div className={cn("@container/chart relative w-full min-w-0", fill && "h-full", className)}>
+      <div
+        className={cn(
+          "flex w-full min-w-0 flex-col gap-2",
+          fill && "h-full",
+          legendAside && "@lg/chart:flex-row @lg/chart:items-center @lg/chart:gap-4",
+        )}
+      >
+        {legendPosition === "top" ? legendNode : null}
+        <div
+          ref={ref}
+          className={cn(
+            "relative min-w-0",
+            fill
+              ? "min-h-0 flex-1 basis-0 @lg/chart:self-stretch"
+              : cn("w-full", legendAside && "@lg/chart:w-auto @lg/chart:flex-1"),
+          )}
+          style={fill ? { minHeight: FILL_MIN_HEIGHT } : { height: drawingHeight }}
+        >
+          {loading ? (
+            <ChartSkeleton height={drawingHeight} label={labels.loading} shape={skeleton} />
+          ) : empty ? (
+            <ChartEmpty height={drawingHeight} label={labels.empty} />
+          ) : (
+            children(size.width, drawingHeight)
+          )}
+        </div>
+        {ready ? footer : null}
+        {legendPosition === "bottom" ? legendNode : null}
+        {ready ? table : null}
+      </div>
+    </div>
+  );
+}

package/src/charts/core/chart-states.tsx

@@ -0,0 +1,89 @@
+import { cn } from "../../utils/cn.js";
+
+const SKELETON_BARS = [0.42, 0.66, 0.5, 0.82, 0.58, 0.74, 0.46, 0.9, 0.62, 0.7];
+
+export interface ChartSkeletonProps {
+  height: number;
+  label: string;
+  /** "bars" mimics columns, "line" a soft wave, "ring" a donut (for polar charts). */
+  shape?: "bars" | "line" | "ring";
+  className?: string;
+}
+
+/** Loading placeholder with the rough shape of the chart that is coming. */
+export function ChartSkeleton({ height, label, shape = "bars", className }: ChartSkeletonProps) {
+  return (
+    <div
+      role="status"
+      aria-busy="true"
+      aria-label={label}
+      className={cn("relative flex w-full animate-pulse flex-col gap-3", className)}
+      style={{ height }}
+    >
+      <div className="flex gap-2">
+        <span className="h-3 w-16 rounded-xs bg-surface-2" />
+        <span className="h-3 w-12 rounded-xs bg-surface-2" />
+      </div>
+      {shape === "ring" ? (
+        <div className="flex flex-1 items-center justify-center">
+          <span
+            className="aspect-square h-[78%] rounded-pill border-[18px] border-surface-2"
+            aria-hidden="true"
+          />
+        </div>
+      ) : shape === "line" ? (
+        <svg
+          aria-hidden="true"
+          className="w-full flex-1"
+          viewBox="0 0 100 40"
+          preserveAspectRatio="none"
+        >
+          <path
+            d="M0,30 C12,26 18,14 30,18 C42,22 48,8 60,10 C72,12 80,24 100,6 L100,40 L0,40 Z"
+            className="fill-surface-2"
+          />
+        </svg>
+      ) : (
+        <div className="flex flex-1 items-end gap-[3%] border-b-divider px-[2%]">
+          {SKELETON_BARS.map((ratio) => (
+            <span
+              key={ratio}
+              className="flex-1 rounded-t-[6px] bg-surface-2"
+              style={{ height: `${ratio * 100}%` }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export interface ChartEmptyProps {
+  height: number;
+  label: string;
+  className?: string;
+}
+
+/** Shown when there is nothing to plot: keeps the chart's footprint, says why. */
+export function ChartEmpty({ height, label, className }: ChartEmptyProps) {
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col items-center justify-center gap-2 rounded-event bg-[repeating-linear-gradient(to_bottom,transparent_0,transparent_calc(25%-1px),var(--chart-grid)_calc(25%-1px),var(--chart-grid)_25%)]",
+        className,
+      )}
+      style={{ height }}
+    >
+      <svg aria-hidden="true" width="28" height="28" viewBox="0 0 24 24" className="text-ink-3">
+        <path
+          d="M4 19h16M7 15v2M11 11v6M15 13v4M19 8v9"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+        />
+      </svg>
+      <p className="m-0 font-semibold text-[13px] text-ink-3">{label}</p>
+    </div>
+  );
+}

package/src/charts/core/chord.ts

@@ -0,0 +1,176 @@
+/**
+ * Chord diagram layout: groups around a circle, ribbons between them whose
+ * widths are the flows. Pure functions, unit tested in
+ * `test/graph-flow-parity.test.mjs`.
+ *
+ * `matrix[i][j]` is the flow from group `i` to group `j`. A group's arc spans
+ * its outflow (the row sum); each ribbon touches the source group with
+ * `matrix[i][j]` and the target group with `matrix[j][i]`, so a symmetric
+ * matrix gives ribbons of equal width at both ends.
+ */
+
+import { polarPoint, TAU } from "./polar.js";
+
+export interface ChordOptions {
+  /** Empty angle between neighbouring groups, radians. */
+  padAngle?: number;
+  /** Where the first group starts, radians, 0 at twelve o'clock clockwise. */
+  startAngle?: number;
+  /** Order of the groups around the circle. */
+  sortGroups?: "input" | "ascending" | "descending";
+  /** Order of the ribbon ends inside a group. */
+  sortSubgroups?: "input" | "ascending" | "descending";
+}
+
+export interface ChordGroup {
+  index: number;
+  startAngle: number;
+  endAngle: number;
+  /** Row sum: everything that leaves this group. */
+  value: number;
+}
+
+export interface ChordEnd {
+  /** The group this end belongs to. */
+  index: number;
+  /** The group at the other end. */
+  other: number;
+  startAngle: number;
+  endAngle: number;
+  value: number;
+}
+
+export interface Chord {
+  /** Larger end first. */
+  source: ChordEnd;
+  target: ChordEnd;
+  /** `source.value + target.value`, the weight of the whole ribbon. */
+  value: number;
+}
+
+export interface ChordLayout {
+  /** In input order (not drawing order). */
+  groups: ChordGroup[];
+  chords: Chord[];
+}
+
+const compare = (mode: "input" | "ascending" | "descending") =>
+  mode === "ascending"
+    ? (a: number, b: number) => a - b
+    : mode === "descending"
+      ? (a: number, b: number) => b - a
+      : null;
+
+export function chordLayout(
+  matrix: ReadonlyArray<readonly number[]>,
+  {
+    padAngle = 0.04,
+    startAngle = 0,
+    sortGroups = "input",
+    sortSubgroups = "input",
+  }: ChordOptions = {},
+): ChordLayout {
+  const n = matrix.length;
+  const cell = (i: number, j: number) => {
+    const value = matrix[i]?.[j] ?? 0;
+    return Number.isFinite(value) && value > 0 ? value : 0;
+  };
+  const rows = Array.from({ length: n }, (_, i) =>
+    Array.from({ length: n }, (_, j) => cell(i, j)).reduce((a, b) => a + b, 0),
+  );
+  const total = rows.reduce((a, b) => a + b, 0);
+  if (n === 0 || total <= 0) return { groups: [], chords: [] };
+
+  const pads = padAngle * n;
+  const k = Math.max(0, TAU - pads) / total;
+  const groupOrder = Array.from({ length: n }, (_, i) => i);
+  const byGroup = compare(sortGroups);
+  if (byGroup) groupOrder.sort((a, b) => byGroup(rows[a] as number, rows[b] as number));
+  const bySub = compare(sortSubgroups);
+
+  const groups: ChordGroup[] = new Array(n);
+  const ends = new Map<string, ChordEnd>();
+  let angle = startAngle;
+  for (const i of groupOrder) {
+    const from = angle;
+    const order = Array.from({ length: n }, (_, j) => j);
+    if (bySub) order.sort((a, b) => bySub(cell(i, a), cell(i, b)));
+    for (const j of order) {
+      const value = cell(i, j);
+      ends.set(`${i}:${j}`, {
+        index: i,
+        other: j,
+        startAngle: angle,
+        endAngle: angle + value * k,
+        value,
+      });
+      angle += value * k;
+    }
+    groups[i] = { index: i, startAngle: from, endAngle: angle, value: rows[i] as number };
+    angle += padAngle;
+  }
+
+  const chords: Chord[] = [];
+  for (let i = 0; i < n; i += 1) {
+    for (let j = 0; j <= i; j += 1) {
+      const a = ends.get(`${i}:${j}`) as ChordEnd;
+      const b = ends.get(`${j}:${i}`) as ChordEnd;
+      if (!(a.value > 0) && !(b.value > 0)) continue;
+      const [source, target] = a.value < b.value ? [b, a] : [a, b];
+      chords.push({ source, target, value: a.value + (i === j ? 0 : b.value) });
+    }
+  }
+  return { groups, chords };
+}
+
+const r2 = (n: number) => Math.round(n * 100) / 100;
+
+function arcTo(radius: number, from: number, to: number, cx: number, cy: number): string {
+  const end = polarPoint(cx, cy, radius, to);
+  const large = Math.abs(to - from) > Math.PI ? 1 : 0;
+  return `A${r2(radius)},${r2(radius)} 0 ${large} 1 ${r2(end.x)},${r2(end.y)}`;
+}
+
+/**
+ * Closed ribbon between the two ends of a chord at `radius`: along the source
+ * arc, a curve through the centre to the target arc, along it, and back. A
+ * chord from a group to itself is a single loop.
+ */
+export function ribbonPath(chord: Chord, radius: number, cx = 0, cy = 0): string {
+  const { source: s, target: t } = chord;
+  const point = (angle: number) => {
+    const p = polarPoint(cx, cy, radius, angle);
+    return `${r2(p.x)},${r2(p.y)}`;
+  };
+  const centre = `${r2(cx)},${r2(cy)}`;
+  if (s.index === t.index) {
+    return `M${point(s.startAngle)}${arcTo(radius, s.startAngle, s.endAngle, cx, cy)}Q${centre} ${point(s.startAngle)}Z`;
+  }
+  return [
+    `M${point(s.startAngle)}`,
+    arcTo(radius, s.startAngle, s.endAngle, cx, cy),
+    `Q${centre} ${point(t.startAngle)}`,
+    arcTo(radius, t.startAngle, t.endAngle, cx, cy),
+    `Q${centre} ${point(s.startAngle)}`,
+    "Z",
+  ].join("");
+}
+
+/** Ribbons that touch a group (as source or target). */
+export function chordsOf(layout: ChordLayout, group: number): Chord[] {
+  return layout.chords.filter(
+    (chord) => chord.source.index === group || chord.target.index === group,
+  );
+}
+
+/** Index of the group whose arc contains `angle`, or -1 (in the padding or outside). */
+export function groupAt(layout: ChordLayout, angle: number): number {
+  const a = ((angle % TAU) + TAU) % TAU;
+  for (const group of layout.groups) {
+    const from = ((group.startAngle % TAU) + TAU) % TAU;
+    const span = group.endAngle - group.startAngle;
+    const offset = (a - from + TAU) % TAU;
+    if (offset <= span) return group.index;
+  }
+  return -1;
+}

package/src/charts/core/color-scale.ts

@@ -0,0 +1,117 @@
+/**
+ * Continuous and stepped color scales built only from tokens. Colors are
+ * `color-mix()` expressions over CSS variables, so they follow the theme
+ * (light/dark) and the active accent palette without any JavaScript.
+ */
+
+import { type ChartTone, TONE_COLORS } from "./palette.js";
+
+/** Mixes `percent`% of `color` into `base` (the surface by default). */
+export function tint(color: string, percent: number, base = "var(--surface)"): string {
+  const p = Math.round(Math.min(100, Math.max(0, percent)));
+  if (p >= 100) return color;
+  if (p <= 0) return base;
+  return `color-mix(in oklab, ${color} ${p}%, ${base})`;
+}
+
+/** Text color readable on a `tint(color, percent)` fill. */
+export function inkOn(percent: number): string {
+  return percent >= 80 ? "var(--surface)" : "var(--ink)";
+}
+
+export interface ScaleColors {
+  /** Low end of a diverging scale. */
+  low?: string;
+  /** Neutral middle (diverging) or empty end (sequential). */
+  mid?: string;
+  /** High end; the brand by default. */
+  high?: string;
+}
+
+export const DEFAULT_SCALE_COLORS: Required<ScaleColors> = {
+  low: "var(--chart-cat-1)",
+  mid: "var(--surface-2)",
+  high: "var(--accent-word)",
+};
+
+/** Lightest share of the color, so the smallest value still differs from an empty cell. */
+const FLOOR = 12;
+
+/** Clamped position of `value` in [min, max], 0-1. */
+export function normalize(value: number, min: number, max: number): number {
+  if (max <= min) return 1;
+  return Math.min(1, Math.max(0, (value - min) / (max - min)));
+}
+
+export interface ColorStop {
+  color: string;
+  /** Strength 0-100 of the hue in the mix, for picking text color. */
+  strength: number;
+}
+
+/** Sequential scale: `mid` (empty) to `high`. */
+export function sequentialColor(
+  value: number,
+  [min, max]: readonly [number, number],
+  colors: ScaleColors = {},
+): ColorStop {
+  const { high, mid } = { ...DEFAULT_SCALE_COLORS, ...colors };
+  const strength = FLOOR + normalize(value, min, max) * (100 - FLOOR);
+  return { color: tint(high, strength, mid), strength };
+}
+
+/** Diverging scale: `low` below `center`, `mid` at it, `high` above. */
+export function divergingColor(
+  value: number,
+  [min, max]: readonly [number, number],
+  center = 0,
+  colors: ScaleColors = {},
+): ColorStop {
+  const { low, mid, high } = { ...DEFAULT_SCALE_COLORS, ...colors };
+  const reach = Math.max(center - min, max - center) || 1;
+  const t = Math.max(-1, Math.min(1, (value - center) / reach));
+  const strength = Math.abs(t) * 100;
+  return { color: tint(t < 0 ? low : high, strength, mid), strength };
+}
+
+export interface ColorRange {
+  /** Inclusive lower bound; open when omitted. */
+  from?: number;
+  /** Exclusive upper bound; open when omitted. */
+  to?: number;
+  label: string;
+  /** CSS color; or use `tone`. */
+  color?: string;
+  tone?: ChartTone;
+}
+
+/** Index of the first range containing `value`, or -1. */
+export function rangeIndex(value: number, ranges: readonly ColorRange[]): number {
+  return ranges.findIndex(
+    (range) =>
+      (range.from == null || value >= range.from) && (range.to == null || value < range.to),
+  );
+}
+
+/**
+ * Fill of a stepped range: its own `color`, a `tone` (its ink at 55% over the
+ * surface, readable with ink text in both themes), or a step of the brand
+ * scale by position.
+ */
+export function rangeColor(range: ColorRange, index: number, count: number): ColorStop {
+  if (range.color) return { color: range.color, strength: 100 };
+  if (range.tone) return { color: tint(TONE_COLORS[range.tone].ink, 55), strength: 55 };
+  const strength = FLOOR + ((index + 1) / Math.max(1, count)) * (100 - FLOOR);
+  return { color: tint(DEFAULT_SCALE_COLORS.high, strength, DEFAULT_SCALE_COLORS.mid), strength };
+}
+
+/** CSS gradient for a legend bar of a continuous scale. */
+export function scaleGradient(
+  kind: "sequential" | "diverging",
+  colors: ScaleColors = {},
+  direction = "to right",
+): string {
+  const { low, mid, high } = { ...DEFAULT_SCALE_COLORS, ...colors };
+  if (kind === "diverging") return `linear-gradient(${direction}, ${low}, ${mid}, ${high})`;
+  return `linear-gradient(${direction}, ${tint(high, FLOOR, mid)}, ${high})`;
+}

package/src/charts/core/data-table.tsx

@@ -0,0 +1,49 @@
+export interface ChartDataTableProps {
+  caption: string;
+  /** Header of the first column. */
+  categoryHeader: string;
+  /** Row headers, already formatted. */
+  categories: readonly string[];
+  columns: ReadonlyArray<{ id: string; name: string; values: ReadonlyArray<string> }>;
+}
+
+/**
+ * Visually hidden table with the same numbers as the chart, so the data is
+ * reachable by screen readers (and by copy/paste) without relying on color.
+ */
+export function ChartDataTable({
+  caption,
+  categoryHeader,
+  categories,
+  columns,
+}: ChartDataTableProps) {
+  return (
+    // The wrapper clips: a table ignores `width: 1px`, so a wide one would still overflow the page.
+    <div className="sr-only">
+      <table>
+        <caption>{caption}</caption>
+        <thead>
+          <tr>
+            <th scope="col">{categoryHeader}</th>
+            {columns.map((column) => (
+              <th key={column.id} scope="col">
+                {column.name}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {categories.map((category, row) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: categories can repeat; rows follow the data order.
+            <tr key={row}>
+              <th scope="row">{category}</th>
+              {columns.map((column) => (
+                <td key={column.id}>{column.values[row] ?? ""}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}