@elabs-ai/components-data 4.2.0 → 5.0.0

package/src/data-table/cells/bar-cell.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { barGeometry } from "../cell-scales";
+
+/**
+ * A positive bar's fill: the diverging ramp's positive end — the brand-hue arm
+ * (117.6) that MIRRORS `BAR_CELL_NEGATIVE_COLOR`, so the two arms of a signed
+ * column are drawn at the same weight instead of one shouting over the other.
+ *
+ * NOT `--chart-1` (the first series colour) any more. `--chart-1` is a
+ * CATEGORICAL token — it answers "which series", it carries no contrast
+ * guarantee, and on `light` it is a signed-off 1.4.11 exemption (see
+ * `CHART_1411_EXEMPT` in packages/tokens/src/charts-contrast.test.ts): it
+ * measures 1.42:1 on `--card` and 1.30:1 on the bar's own `bg-muted` track, so
+ * the bar read as a wash exactly where its LENGTH is the whole message. The
+ * diverging ramp is the one gated ≥3:1 in every theme, including its mid step —
+ * measured 8.99:1 on `--card` in light and dark alike.
+ */
+export const BAR_CELL_POSITIVE_COLOR = "var(--chart-div-pos-2)";
+/** A negative bar's fill: the diverging ramp's negative end. */
+export const BAR_CELL_NEGATIVE_COLOR = "var(--chart-div-neg-2)";
+
+export interface BarCellProps extends HTMLAttributes<HTMLDivElement> {
+  /** The number the bar draws; `null` draws no bar. */
+  value: number | null;
+  /** The printed (formatted) value. Always in the accessible tree. */
+  label: string;
+  /** `[lo, hi]` of the track; always contains zero (see `barDomain`). */
+  domain: readonly [number, number];
+  /** `"regular"` (default): bar beside the value; `"slim"`: a thin bar under it. */
+  variant?: "regular" | "slim";
+  /** Paint the grey remainder of the track. */
+  track?: boolean;
+  /** A category colour (`var(--chart-N)`) that replaces the positive fill. */
+  fillColor?: string | null;
+  /** Paint a negative value in the negative token. Default `true`. */
+  negativeColor?: boolean;
+  /**
+   * Room reserved for the printed value, in `ch` (`labelBoxCh` over the whole
+   * column). Every bar in a column then shares one track length, so bar lengths
+   * compare down the column and a diverging column's zero rule keeps one x.
+   * Unset (or `"slim"`, where the bar sits under the value) leaves the value
+   * box to size itself.
+   */
+  labelWidth?: number;
+}
+
+/**
+ * An in-cell bar (CSS only). The bar grows from zero — toward inline-end for a
+ * positive value, toward inline-start for a negative one — inside a track that
+ * spans the column's shared domain. The value stays printed beside it.
+ */
+export const BarCell = forwardRef<HTMLDivElement, BarCellProps>(function BarCell(
+  {
+    value,
+    label,
+    domain,
+    variant = "regular",
+    track = false,
+    fillColor,
+    negativeColor = true,
+    labelWidth,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const geometry = barGeometry(value ?? Number.NaN, domain);
+  const fill =
+    geometry.negative && negativeColor
+      ? BAR_CELL_NEGATIVE_COLOR
+      : (fillColor ?? BAR_CELL_POSITIVE_COLOR);
+  const straddlesZero = domain[0] < 0 && domain[1] > 0;
+  const slim = variant === "slim";
+  return (
+    <div
+      ref={ref}
+      data-slot="bar-cell"
+      data-variant={variant}
+      data-negative={geometry.negative || undefined}
+      className={cn(
+        "flex min-w-0",
+        slim ? "flex-col items-stretch gap-1" : "items-center gap-2",
+        className,
+      )}
+      {...props}
+    >
+      {/*
+        The value box is a column-wide reservation (`labelWidth`), never this
+        row's own text width: `shrink-0` plus an explicit `width` keeps every
+        track in the column the same length, whatever the number reads.
+      */}
+      <span
+        data-slot="bar-cell-value"
+        className={cn("shrink-0 tabular-nums", !slim && "whitespace-nowrap text-end")}
+        style={!slim && labelWidth ? { width: `${labelWidth}ch` } : undefined}
+      >
+        {label}
+      </span>
+      <span
+        aria-hidden="true"
+        data-slot="bar-cell-track"
+        className={cn(
+          // The track grows along the PARENT's main axis, which the variant
+          // flips: a regular bar sits beside its value (row -> `flex-1` takes
+          // the spare width), a slim bar sits under it (column -> `flex-1`
+          // would resolve the HEIGHT to flex-basis 0 and erase the mark, so it
+          // spans the width and keeps its own height instead).
+          "relative block min-w-8 rounded-sm",
+          slim ? "h-1 w-full shrink-0" : "h-3 flex-1",
+          track && "bg-muted",
+        )}
+      >
+        {straddlesZero && (
+          <span
+            data-slot="bar-cell-zero"
+            className="absolute -inset-y-0.5 w-px bg-border-strong"
+            style={{ insetInlineStart: `${geometry.zero}%` }}
+          />
+        )}
+        <span
+          data-slot="bar-cell-bar"
+          className="absolute inset-y-0 rounded-sm"
+          style={{
+            insetInlineStart: `${geometry.start}%`,
+            width: `${geometry.size}%`,
+            backgroundColor: fill,
+          }}
+        />
+      </span>
+    </div>
+  );
+});

package/src/data-table/cells/category-legend.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { colorScaleFor } from "@elabs-ai/components-ui";
+import { CategoryLegend } from "./category-legend";
+
+const regions = colorScaleFor(["North", "South", "East", "South"], {
+  type: "stepped",
+  palette: "categorical",
+});
+
+describe("CategoryLegend", () => {
+  it("names every category beside its swatch, as one named group", () => {
+    const { container } = render(<CategoryLegend scale={regions} title="Region" />);
+    const group = screen.getByRole("group", { name: "Region" });
+    expect(group).toBeInTheDocument();
+    expect([...group.querySelectorAll("li")].map((li) => li.textContent)).toEqual([
+      "North",
+      "South",
+      "East",
+    ]);
+    // The swatch is the colour the cells are painted in, so a reader can match
+    // the two; it is decorative because the name beside it carries the meaning.
+    const swatches = container.querySelectorAll<HTMLElement>(
+      '[data-slot="category-legend-swatch"]',
+    );
+    expect(swatches).toHaveLength(3);
+    expect([...swatches].map((s) => s.style.backgroundColor)).toEqual(
+      regions.categories.map((c) => c.color),
+    );
+    expect(swatches[0]).toHaveAttribute("aria-hidden", "true");
+  });
+  it("renders nothing for a scale with no categories", () => {
+    const numeric = colorScaleFor([1, 2, 3], { type: "continuous" });
+    const { container } = render(<CategoryLegend scale={numeric} title="Rides" />);
+    expect(container.querySelector('[data-slot="category-legend"]')).toBeNull();
+  });
+});

package/src/data-table/cells/category-legend.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import type { ColorScale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+
+export interface CategoryLegendProps extends HTMLAttributes<HTMLDivElement> {
+  /** A categorical scale — its `categories`, in first-seen order. */
+  scale: ColorScale;
+  /** What the colours divide the rows BY (the `colorBy` key, or a nicer name). */
+  title?: string;
+  /** Print a category value; defaults to `String`. */
+  formatCategory?: (value: string | number) => string;
+}
+
+/**
+ * A `colorBy` column's colour key: one named swatch per category.
+ *
+ * A categorical fill answers "which group", and unlike a bar's length or a
+ * heatmap's ramp there is nothing in the cell to read it off. Without a key the
+ * category is carried by hue alone — unreadable to anyone who cannot separate
+ * those hues, and unnameable by everyone else (WCAG 1.4.1). This is the same
+ * key `HeatmapLegend` gives an ordered scale, for an unordered one.
+ */
+export const CategoryLegend = forwardRef<HTMLDivElement, CategoryLegendProps>(
+  function CategoryLegend({ scale, title, formatCategory = String, className, ...props }, ref) {
+    if (scale.categories.length === 0) return null;
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-label={title}
+        data-slot="category-legend"
+        className={cn("flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-meta", className)}
+        {...props}
+      >
+        {title && (
+          <span aria-hidden="true" className="text-muted-foreground">
+            {title}
+          </span>
+        )}
+        <ul className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+          {scale.categories.map((category) => (
+            <li key={String(category.value)} className="flex items-center gap-1">
+              <span
+                aria-hidden="true"
+                data-slot="category-legend-swatch"
+                className="block size-2.5 rounded-full"
+                style={{ backgroundColor: category.color }}
+              />
+              <span>{formatCategory(category.value)}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  },
+);

package/src/data-table/cells/columns-cell.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { ColumnsCell } from "./columns-cell";
+
+describe("ColumnsCell", () => {
+  it("draws one column per present value from a zero rule, heights never negative", () => {
+    const { container, getByText } = render(
+      <ColumnsCell
+        values={[
+          { key: "q1", value: 2 },
+          { key: "q2", value: null },
+          { key: "q3", value: -1 },
+        ]}
+        domain={{ min: -1, max: 4 }}
+        label="2, –, -1"
+        height={20}
+      />,
+    );
+    expect(getByText("2, –, -1")).toHaveClass("sr-only");
+    const rects = container.querySelectorAll("rect");
+    expect(rects).toHaveLength(2);
+    rects.forEach((r) => expect(Number(r.getAttribute("height"))).toBeGreaterThanOrEqual(0));
+    // 2 on [-1, 4] over 20 px → 8 px tall; -1 → 4 px.
+    expect(Number(rects[0]?.getAttribute("height"))).toBeCloseTo(8);
+    expect(Number(rects[1]?.getAttribute("height"))).toBeCloseTo(4);
+  });
+});

package/src/data-table/cells/columns-cell.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { NumericExtent } from "../cell-scales";
+import { BAR_CELL_NEGATIVE_COLOR, BAR_CELL_POSITIVE_COLOR } from "./bar-cell";
+
+/** The zero rule's width (px) — the charts hairline, mirrored. */
+export const COLUMNS_CELL_HAIRLINE_WIDTH = 0.65;
+const VIEW_WIDTH = 100;
+const GAP = 12; // % of a slot left empty between columns
+
+export interface ColumnsCellProps extends HTMLAttributes<HTMLDivElement> {
+  /** One entry per row key, in x order; a `null` value draws no column. */
+  values: readonly { key: string; value: number | null }[];
+  /** The value domain: this row's own extent or the column's. Zero is always added. */
+  domain: NumericExtent | null;
+  /** Every value as text, for screen readers, sorting and copy. */
+  label: string;
+  /** Drawing height in px. Default 24. */
+  height?: number;
+}
+
+/** In-cell mini columns: a ≤ 40-line inline SVG, columns grow from a zero rule. */
+export const ColumnsCell = forwardRef<HTMLDivElement, ColumnsCellProps>(function ColumnsCell(
+  { values, domain, label, height = 24, className, ...props },
+  ref,
+) {
+  const h = Math.max(0, height);
+  const lo = Math.min(0, domain?.min ?? 0);
+  const hi = Math.max(0, domain?.max ?? 0);
+  const span = hi - lo;
+  const y = (v: number) => (span > 0 ? ((hi - v) / span) * h : h);
+  const slot = values.length > 0 ? VIEW_WIDTH / values.length : 0;
+  const width = Math.max(0, slot * (1 - GAP / 100));
+  return (
+    <div
+      ref={ref}
+      data-slot="columns-cell"
+      className={cn("flex min-w-0 items-center", className)}
+      {...props}
+    >
+      <span className="sr-only">{label}</span>
+      <svg
+        aria-hidden="true"
+        data-slot="columns-cell-svg"
+        data-y-min={lo}
+        data-y-max={hi}
+        viewBox={`0 0 ${VIEW_WIDTH} ${h}`}
+        preserveAspectRatio="none"
+        className="block min-w-8 flex-1"
+        style={{ height: h }}
+      >
+        {values.map(({ key, value: v }, i) =>
+          v === null ? null : (
+            <rect
+              key={key}
+              data-slot="columns-cell-column"
+              x={i * slot + (slot - width) / 2}
+              y={Math.min(y(v), y(0))}
+              width={width}
+              height={Math.max(0, Math.abs(y(v) - y(0)))}
+              fill={v < 0 ? BAR_CELL_NEGATIVE_COLOR : BAR_CELL_POSITIVE_COLOR}
+            />
+          ),
+        )}
+        <line
+          x1={0}
+          x2={VIEW_WIDTH}
+          y1={y(0)}
+          y2={y(0)}
+          stroke="var(--chart-grid)"
+          strokeWidth={COLUMNS_CELL_HAIRLINE_WIDTH}
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    </div>
+  );
+});

package/src/data-table/cells/heatmap-cell.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { colorScaleFor } from "@elabs-ai/components-ui";
+import { HeatmapCell, HeatmapLegend, heatmapCellStyle } from "./heatmap-cell";
+
+describe("HeatmapCell", () => {
+  it("keeps the value for AT when hidden, and paints the td with a ramp token", () => {
+    render(<HeatmapCell label="42" hideValue />);
+    expect(screen.getByText("42")).toHaveClass("sr-only");
+    expect(heatmapCellStyle("var(--chart-seq-3)")).toEqual({
+      backgroundColor: "var(--chart-seq-3)",
+    });
+    expect(heatmapCellStyle(null)).toBeUndefined();
+  });
+  it("legend: one swatch per stepped class, a ramp strip for continuous", () => {
+    const values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const { container, rerender } = render(
+      <HeatmapLegend
+        scale={colorScaleFor(values, { type: "stepped", steps: 4 })}
+        title="Rides"
+        formatValue={String}
+      />,
+    );
+    expect(screen.getByRole("group", { name: "Rides" })).toBeInTheDocument();
+    expect(container.querySelectorAll('[data-slot="heatmap-legend-swatch"]')).toHaveLength(4);
+    rerender(
+      <HeatmapLegend scale={colorScaleFor(values, { type: "continuous" })} formatValue={String} />,
+    );
+    expect(container.querySelector('[data-slot="heatmap-legend-ramp"]')).not.toBeNull();
+  });
+});

package/src/data-table/cells/heatmap-cell.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { forwardRef, type CSSProperties, type HTMLAttributes } from "react";
+import type { ColorScale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+
+/**
+ * The `<td>` style that paints a heatmap cell: the value's ramp colour (a
+ * `var(--chart-seq-*)` / `var(--chart-div-*)` reference from `colorScaleFor`),
+ * so a theme flip re-colours it with no re-render. `null` (no data) paints
+ * nothing.
+ */
+export function heatmapCellStyle(color: string | null): CSSProperties | undefined {
+  return color ? { backgroundColor: color } : undefined;
+}
+
+export interface HeatmapCellProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The printed (formatted) value. Always in the accessible tree. */
+  label: string;
+  /** Hide the value visually; it stays for screen readers, sorting and copy. */
+  hideValue?: boolean;
+}
+
+/**
+ * A heatmap cell's content. The `<td>` carries the colour
+ * ({@link heatmapCellStyle}); a visible value sits on a card plate, so its ink
+ * reads on every ramp step in every theme without resolving the colour.
+ */
+export const HeatmapCell = forwardRef<HTMLSpanElement, HeatmapCellProps>(function HeatmapCell(
+  { label, hideValue = false, className, ...props },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      data-slot="heatmap-cell"
+      className={cn(
+        hideValue
+          ? "sr-only"
+          : "inline-block rounded-sm bg-card/85 px-1 text-foreground tabular-nums",
+        className,
+      )}
+      {...props}
+    >
+      {label}
+    </span>
+  );
+});
+
+export interface HeatmapLegendProps extends HTMLAttributes<HTMLDivElement> {
+  scale: ColorScale;
+  /** What the colours measure (the column's header). */
+  title?: string;
+  formatValue: (value: number) => string;
+}
+
+/**
+ * A heatmap column's colour key: one swatch per class (stepped) or a ramp
+ * strip (continuous), with the class bounds printed in the `text-meta` role.
+ */
+export const HeatmapLegend = forwardRef<HTMLDivElement, HeatmapLegendProps>(function HeatmapLegend(
+  { scale, title, formatValue, className, ...props },
+  ref,
+) {
+  const first = scale.steps[0];
+  const last = scale.steps[scale.steps.length - 1];
+  if (!first || !last) return null;
+  const continuous = scale.type === "continuous";
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-label={title}
+      data-slot="heatmap-legend"
+      data-scale-type={scale.type}
+      className={cn("flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-meta", className)}
+      {...props}
+    >
+      {title && (
+        <span aria-hidden="true" className="text-muted-foreground">
+          {title}
+        </span>
+      )}
+      {continuous ? (
+        <span className="flex min-w-0 items-center gap-1.5 tabular-nums">
+          <span>{formatValue(first.from)}</span>
+          <span
+            aria-hidden="true"
+            data-slot="heatmap-legend-ramp"
+            className="block h-2.5 w-24 rounded-sm"
+            style={{
+              backgroundImage: `linear-gradient(to right, ${scale.steps.map((s) => s.color).join(", ")})`,
+            }}
+          />
+          <span>{formatValue(last.to)}</span>
+        </span>
+      ) : (
+        <ul className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 tabular-nums">
+          {scale.steps.map((step) => (
+            <li key={`${step.from}-${step.to}`} className="flex items-center gap-1">
+              <span
+                aria-hidden="true"
+                data-slot="heatmap-legend-swatch"
+                className="block size-2.5 rounded-full"
+                style={{ backgroundColor: step.color }}
+              />
+              <span>
+                {formatValue(step.from)}–{formatValue(step.to)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+});

package/src/data-table/cells/markdown-cell.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MarkdownCell, isSafeCellUrl } from "./markdown-cell";
+
+describe("MarkdownCell", () => {
+  it("renders the safe inline subset as elements", () => {
+    const { container } = render(
+      <MarkdownCell text="**Oslo** is *big*, see [docs](https://example.com) and `x`, 10^2^" />,
+    );
+    expect(container.querySelector("strong")).toHaveTextContent("Oslo");
+    expect(container.querySelector("em")).toHaveTextContent("big");
+    expect(screen.getByRole("link", { name: "docs" })).toHaveAttribute(
+      "href",
+      "https://example.com",
+    );
+    expect(container.querySelector("code")).toHaveTextContent("x");
+    expect(container.querySelector("sup")).toHaveTextContent("2");
+  });
+  it("never links an unsafe URL and leaves raw HTML as text", () => {
+    const { container } = render(<MarkdownCell text="[x](javascript:alert(1)) <b>y</b>" />);
+    expect(container.querySelector("a")).toBeNull();
+    expect(container.querySelector("b")).toBeNull();
+    expect(container.textContent).toContain("<b>y</b>");
+    expect(isSafeCellUrl("//evil.example")).toBe(false);
+    expect(isSafeCellUrl("/path")).toBe(true);
+  });
+  it("images are off by default (alt text prints) and on with images", () => {
+    const { container, rerender } = render(
+      <MarkdownCell text="![flag](https://example.com/f.png)" />,
+    );
+    expect(container.querySelector("img")).toBeNull();
+    expect(container).toHaveTextContent("flag");
+    rerender(<MarkdownCell text="![flag](https://example.com/f.png)" images />);
+    expect(container.querySelector("img")).toHaveAttribute("alt", "flag");
+  });
+});

package/src/data-table/cells/markdown-cell.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Fragment, forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+
+/**
+ * Safe inline markdown for a table cell: `**bold**`, `*italic*` / `_italic_`,
+ * `` `code` ``, `[link](url)`, `^sup^` / `<sup>sup</sup>`, and — only with
+ * `images: true` — `![alt](src)`. Built as React elements, never HTML: there is
+ * no `innerHTML` sink, and a link or image URL that is not `http(s):`,
+ * `mailto:`, a path or a fragment renders as plain text.
+ */
+const TOKEN =
+  /\*\*([^*]+)\*\*|\*([^*]+)\*|_([^_]+)_|`([^`]+)`|!\[([^\]]*)\]\(([^)\s]+)\)|\[([^\]]+)\]\(([^)\s]+)\)|\^([^^]+)\^|<sup>(.*?)<\/sup>/g;
+
+/** `true` for a URL a cell may link to or load. */
+export function isSafeCellUrl(url: string): boolean {
+  return /^(https?:\/\/|mailto:|\/(?!\/)|#|\.{1,2}\/)/i.test(url.trim());
+}
+
+/** Parses `text` into React nodes. Exported for tests. */
+export function parseCellMarkdown(text: string, images = false, keyPrefix = "md"): ReactNode[] {
+  const out: ReactNode[] = [];
+  let last = 0;
+  let n = 0;
+  for (const m of text.matchAll(TOKEN)) {
+    const at = m.index ?? 0;
+    if (at > last) out.push(text.slice(last, at));
+    const key = `${keyPrefix}-${n++}`;
+    const [, bold, em1, em2, code, alt, src, linkText, href, sup1, sup2] = m;
+    if (bold !== undefined)
+      out.push(<strong key={key}>{parseCellMarkdown(bold, images, key)}</strong>);
+    else if ((em1 ?? em2) !== undefined)
+      out.push(<em key={key}>{parseCellMarkdown((em1 ?? em2) as string, images, key)}</em>);
+    else if (code !== undefined)
+      out.push(
+        <code key={key} className="rounded-sm bg-muted px-1 font-mono text-code">
+          {code}
+        </code>,
+      );
+    else if (src !== undefined)
+      out.push(
+        images && isSafeCellUrl(src) ? (
+          <img
+            key={key}
+            src={src}
+            alt={alt ?? ""}
+            className="inline-block h-4 w-auto align-text-bottom"
+          />
+        ) : (
+          <Fragment key={key}>{alt}</Fragment>
+        ),
+      );
+    else if (href !== undefined && linkText !== undefined)
+      out.push(
+        isSafeCellUrl(href) ? (
+          <a
+            key={key}
+            href={href}
+            className="rounded-sm text-link underline underline-offset-2 hover:text-foreground focus-ring"
+          >
+            {parseCellMarkdown(linkText, images, key)}
+          </a>
+        ) : (
+          <Fragment key={key}>{parseCellMarkdown(linkText, images, key)}</Fragment>
+        ),
+      );
+    else out.push(<sup key={key}>{(sup1 ?? sup2) as string}</sup>);
+    last = at + m[0].length;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+export interface MarkdownCellProps extends HTMLAttributes<HTMLSpanElement> {
+  text: string;
+  /** Render `![alt](src)` as an image. Default `false` (the alt text prints). */
+  images?: boolean;
+}
+
+/** A cell rendered from safe inline markdown (see {@link parseCellMarkdown}). */
+export const MarkdownCell = forwardRef<HTMLSpanElement, MarkdownCellProps>(function MarkdownCell(
+  { text, images = false, className, ...props },
+  ref,
+) {
+  return (
+    <span ref={ref} data-slot="markdown-cell" className={cn("break-words", className)} {...props}>
+      {parseCellMarkdown(text, images)}
+    </span>
+  );
+});

package/src/data-table/cells/sparkline-cell.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { SparklineCell } from "./sparkline-cell";
+
+describe("SparklineCell", () => {
+  it("keeps every value as text and draws against the given (shared) domain", () => {
+    const { container, getByText } = render(
+      <SparklineCell values={[1, null, 4]} domain={{ min: 0, max: 8 }} label="1, –, 4" fill />,
+    );
+    expect(getByText("1, –, 4")).toHaveClass("sr-only");
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+    expect(svg).toHaveAttribute("data-y-max", "8");
+    // A null breaks the line: two move-tos.
+    const d = container.querySelector('[data-slot="sparkline-cell-line"]')?.getAttribute("d") ?? "";
+    expect(d.match(/M/g)).toHaveLength(2);
+  });
+  it("prints end labels only when asked", () => {
+    const { container, getByText } = render(
+      <SparklineCell values={[1, 4]} domain={{ min: 1, max: 4 }} label="1, 4" ends={["1", "4"]} />,
+    );
+    expect(getByText("4", { selector: "span[aria-hidden]" })).toBeInTheDocument();
+    expect(container.querySelectorAll("span[aria-hidden]")).toHaveLength(2);
+  });
+  it("reserves one end-label box per column, so every row draws on the same x scale", () => {
+    const ends = (first: string, last: string) => {
+      const { container } = render(
+        <SparklineCell
+          values={[1, 4]}
+          domain={{ min: 1, max: 4 }}
+          label={`${first}, ${last}`}
+          ends={[first, last]}
+          endsWidth={[3, 4]}
+        />,
+      );
+      return [...container.querySelectorAll<HTMLElement>("span[aria-hidden]")].map(
+        (span) => span.style.width,
+      );
+    };
+    expect(ends("90", "110")).toEqual(["3ch", "4ch"]);
+    expect(ends("300", "380")).toEqual(["3ch", "4ch"]);
+  });
+});