basalt-ui 1.41.0 → 2.0.0

package/dist/charts/DualPanel.d.ts

@@ -0,0 +1,47 @@
+import type { ReactElement } from 'react';
+import type { CartesianChartProps, ChartSeries } from './types.js';
+/** A top-pane line. */
+export type DualPanelLine<T> = Pick<ChartSeries<T>, 'key' | 'label' | 'color' | 'getValue' | 'formatValue' | 'tooltip' | 'legend' | 'role' | 'note' | 'dash' | 'curve' | 'strokeWidth' | 'strokeOpacity' | 'getMarker'>;
+/** The bottom pane: one signed value as bars, coloured by sign. */
+export type DualPanelBar<T> = {
+    label: string;
+    getValue: (d: T) => number | null;
+    /** The fill above zero, and the legend swatch. */
+    positive: string;
+    /** The fill below zero. */
+    negative: string;
+    /** Tick and tooltip formatter. */
+    format: (v: number) => string;
+    /** The tooltip row's value, for a unit or a decimal `format` cannot carry. */
+    formatValue?: (v: number, d: T) => string;
+    /** Default `'auto'`: a symmetric `[-maxAbs, maxAbs]` from the data, rounded to nice ticks. A tuple
+     * is used verbatim. */
+    domain?: readonly [number, number] | 'auto';
+    /** When `'auto'`: floors `maxAbs`, so a plateau does not amplify to fill the pane. */
+    maxAbsFloor?: number;
+};
+export type DualPanelProps<T, X extends Date | number = Date | number> = Pick<CartesianChartProps<T, X>, 'ariaLabel' | 'data' | 'x' | 'formatX' | 'legend' | 'height' | 'state' | 'cursorGroup' | 'cursorResolution' | 'tooltip' | 'className' | 'style'> & {
+    /** The top pane's lines. */
+    series: readonly DualPanelLine<T>[];
+    /** Top pane y axis. Default domain `'auto'`: the visible lines' span plus 8%, rounded to nice
+     * ticks (not zero-based: the interesting range is often a narrow band far from zero). */
+    top?: {
+        domain?: readonly [number, number] | 'auto';
+        format?: (v: number) => string;
+    };
+    /**
+     * Shades the band between two top lines (by key), where both are visible. `aboveFill` colours the
+     * side where `to` runs above `from`; omitted, both sides take `fill`.
+     */
+    fillBetween?: {
+        from: string;
+        to: string;
+        fill: string;
+        aboveFill?: string;
+    };
+    bar: DualPanelBar<T>;
+    /** The top pane's share of the chart height. Default 0.62. */
+    topFraction?: number;
+};
+export declare function DualPanel<T, X extends Date | number = Date | number>(props: DualPanelProps<T, X>): ReactElement;
+//# sourceMappingURL=DualPanel.d.ts.map

package/dist/charts/DualPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualPanel.d.ts","sourceRoot":"","sources":["../../src/charts/DualPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AASzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAwB,MAAM,SAAS,CAAA;AAcrF,uBAAuB;AACvB,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,IAAI,CACjC,WAAW,CAAC,CAAC,CAAC,EACZ,KAAK,GACL,OAAO,GACP,OAAO,GACP,UAAU,GACV,aAAa,GACb,SAAS,GACT,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,aAAa,GACb,eAAe,GACf,WAAW,CACd,CAAA;AAED,mEAAmE;AACnE,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,CAAA;IACjC,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAA;IAChB,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAA;IAChB,kCAAkC;IAClC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC7B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACzC;2BACuB;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC3C,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,IAAI,IAAI,CAC3E,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,WAAW,GACX,MAAM,GACN,GAAG,GACH,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,aAAa,GACb,kBAAkB,GAClB,SAAS,GACT,WAAW,GACX,OAAO,CACV,GAAG;IACF,4BAA4B;IAC5B,MAAM,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAA;IACnC;6FACyF;IACzF,GAAG,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;KAAE,CAAA;IACrF;;;OAGG;IACH,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IACpB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAiBD,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,EAClE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAC1B,YAAY,CA4Md"}

package/dist/charts/DualPanel.js

@@ -0,0 +1,214 @@
+import { jsx } from "react/jsx-runtime";
+import { differenceY } from "@tanstack/charts/difference";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { ruleY } from "@tanstack/charts/rule";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { scaleUtc } from "d3-scale";
+import { useCallback, useMemo } from "react";
+import { VX, alpha } from "../tokens/index.js";
+import { resolveContainerClass } from "../tokens/size-classes.js";
+import { defaultFormatX, defaultNumberFormat, visibleSeries } from "./compile.js";
+import { barMark, emphasis, lineMark, markersOf, thinFill } from "./marks.js";
+import { PanelRung, paneX, paneY, rowsOf } from "./panel.js";
+import { xScaleFor } from "./scales.js";
+import { rowX } from "./types.js";
+const BAR_KEY = "__bar";
+const DEFAULT_TOP_FRACTION = 0.62;
+const PANE_GAP = 8;
+const BAR_OPACITY = 0.7;
+const TOP_PAD = 0.08;
+const TOP_TICKS = 4;
+const BAR_TICKS = 3;
+function spanDomain(values) {
+  if (values.length === 0) return [0, 1];
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const v of values) {
+    if (v < lo) lo = v;
+    if (v > hi) hi = v;
+  }
+  const span = hi - lo || Math.abs(hi) || 1;
+  return [lo - span * TOP_PAD, hi + span * TOP_PAD];
+}
+function DualPanel(props) {
+  const {
+    data,
+    x,
+    series,
+    top,
+    fillBetween,
+    bar,
+    topFraction = DEFAULT_TOP_FRACTION,
+    ...rung
+  } = props;
+  const { formatX } = rung;
+  if (series.some((s) => s.key === BAR_KEY))
+    throw new Error(`[basalt] DualPanel: the series key "${BAR_KEY}" is reserved for the bar`);
+  const lines = useMemo(
+    () => series.map((s) => ({ ...s, mark: "line" })),
+    [series]
+  );
+  const barSeries = useMemo(
+    () => ({
+      key: BAR_KEY,
+      label: bar.label,
+      color: bar.positive,
+      mark: "bar",
+      getValue: bar.getValue
+    }),
+    [bar.label, bar.positive, bar.getValue]
+  );
+  const all = useMemo(() => [...lines, barSeries], [lines, barSeries]);
+  const topFormat = top?.format ?? defaultNumberFormat;
+  const plan = useCallback(
+    ({ hidden, highlighted }) => {
+      const model = xScaleFor(data.map(x), false);
+      const [lo, hi] = model.extent ?? [0, 1];
+      const pad = model.step / 2;
+      const xScale = () => model.kind === "date" ? scaleUtc().domain([new Date(lo - pad), new Date(hi + pad)]) : scaleLinear().domain([lo - pad, hi + pad]);
+      const fillAt = (v) => ((v instanceof Date ? v.getTime() : v) - (lo - pad)) / (hi - lo + 2 * pad);
+      const format = (v) => formatX ? formatX(v) : defaultFormatX(v);
+      const visible = visibleSeries(lines, hidden);
+      const barOn = !hidden.has(BAR_KEY);
+      const rows = (s) => visible.includes(s) ? rowsOf(data, x, s) : [];
+      const fixedTop = top?.domain && top.domain !== "auto" ? top.domain : void 0;
+      const topDomain = fixedTop ?? spanDomain(
+        visible.flatMap(
+          (s) => data.flatMap((d) => {
+            const v = s.getValue(d);
+            return v !== null && Number.isFinite(v) ? [v] : [];
+          })
+        )
+      );
+      const topY = scaleLinear().domain([...topDomain]);
+      if (!fixedTop) topY.nice();
+      let maxAbs = 0;
+      for (const d of data) {
+        const v = bar.getValue(d);
+        if (v !== null && Number.isFinite(v)) maxAbs = Math.max(maxAbs, Math.abs(v));
+      }
+      maxAbs = Math.max(maxAbs, bar.maxAbsFloor ?? 0) || 1;
+      const fixedBar = bar.domain && bar.domain !== "auto" ? bar.domain : void 0;
+      const barScale = scaleLinear().domain(fixedBar ? [...fixedBar] : [-maxAbs, maxAbs]);
+      if (!fixedBar) barScale.nice();
+      const barDomain = fixedBar ?? [...barScale.domain()];
+      const fromLine = fillBetween && visible.find((s) => s.key === fillBetween.from);
+      const toLine = fillBetween && visible.find((s) => s.key === fillBetween.to);
+      const fill = fillBetween && fromLine && toLine ? { ...fillBetween, fromLine, toLine } : void 0;
+      const fillRows = [];
+      if (fill) {
+        for (const d of data) {
+          const a = fill.fromLine.getValue(d);
+          const b = fill.toLine.getValue(d);
+          if (a === null || b === null || !Number.isFinite(a) || !Number.isFinite(b)) continue;
+          fillRows.push({ x: x(d), from: a, to: b, series: fill.to, datum: d });
+        }
+      }
+      const topPane = ({ width, height: h }) => {
+        const cls = resolveContainerClass(width);
+        const plot = {
+          rows: (key) => {
+            const s = lines.find((l) => l.key === key);
+            if (!s) throw new Error(`[basalt] DualPanel: no series "${key}"`);
+            return rows(s);
+          },
+          visible,
+          highlighted,
+          containerClass: cls,
+          width,
+          height: h,
+          y2: void 0,
+          yDomain: topDomain,
+          y2Domain: void 0
+        };
+        return {
+          marks: [
+            ...fill ? [
+              decorative(
+                differenceY(
+                  thinFill(fillRows, width, (r) => fillAt(r.x)),
+                  {
+                    id: "fill-between",
+                    x: (r) => r.x,
+                    y1: (r) => r.from,
+                    y2: (r) => r.to,
+                    positiveFill: fill.aboveFill ?? fill.fill,
+                    negativeFill: fill.fill,
+                    fillOpacity: 1,
+                    stroke: "none",
+                    comparisonStroke: "none"
+                  }
+                )
+              )
+            ] : [],
+            ...visible.flatMap((s) => [lineMark(plot, s), ...markersOf(s, rows(s), void 0)])
+          ],
+          scales: {
+            x: { scale: xScale(), axis: false },
+            y: paneY({ scale: topY, domain: topDomain, format: topFormat, ticks: TOP_TICKS, cls })
+          }
+        };
+      };
+      const barPane = ({ width }) => {
+        const cls = resolveContainerClass(width);
+        const barRows = barOn ? rowsOf(data, x, barSeries) : [];
+        const dim = emphasis(highlighted, { key: BAR_KEY });
+        return {
+          marks: [
+            ruleY([0], { id: "zero", stroke: VX.axisStroke, strokeOpacity: 1, strokeWidth: 1 }),
+            barMark(barRows, {
+              id: "bars",
+              x: rowX,
+              y: "y",
+              fill: (row) => alpha((row.y ?? 0) >= 0 ? bar.positive : bar.negative, BAR_OPACITY * dim)
+            })
+          ],
+          scales: {
+            x: paneX({ scale: xScale(), model, format, cls }),
+            y: paneY({
+              scale: barScale,
+              domain: barDomain,
+              format: bar.format,
+              ticks: BAR_TICKS,
+              cls
+            })
+          }
+        };
+      };
+      return {
+        keys: model.values,
+        top: topPane,
+        bottom: barPane,
+        topFraction,
+        gap: PANE_GAP,
+        rows: (d) => {
+          const out = [];
+          for (const s of visible) {
+            const v2 = s.getValue(d);
+            if (s.tooltip === false || v2 === null || !Number.isFinite(v2)) continue;
+            out.push({
+              label: s.note === void 0 ? s.label : `${s.label} \xB7 ${s.note}`,
+              value: s.formatValue ? s.formatValue(v2, d) : topFormat(v2),
+              color: s.color,
+              ...highlighted === s.key && { active: true }
+            });
+          }
+          const v = barOn ? bar.getValue(d) : null;
+          if (v !== null && Number.isFinite(v))
+            out.push({
+              label: bar.label,
+              value: bar.formatValue ? bar.formatValue(v, d) : bar.format(v),
+              color: v >= 0 ? bar.positive : bar.negative,
+              ...highlighted === BAR_KEY && { active: true }
+            });
+          return out;
+        }
+      };
+    },
+    [data, x, lines, barSeries, top, fillBetween, bar, topFraction, topFormat, formatX]
+  );
+  return /* @__PURE__ */ jsx(PanelRung, { ...rung, series: all, plan });
+}
+export {
+  DualPanel
+};

package/dist/charts/Heatmap.d.ts

@@ -0,0 +1,41 @@
+import type { ReactElement } from 'react';
+import type { BasaltProps } from '../common/props.js';
+import type { ChartState, ChartTooltipRow, ResponsiveChartHeight } from './types.js';
+export type HeatmapProps<T> = BasaltProps & {
+    /** The accessible name. Required. */
+    ariaLabel: string;
+    data: readonly T[];
+    /** The y band (a row) of a datum. */
+    getRow: (d: T) => string;
+    /** The x band (a column) of a datum. */
+    getCol: (d: T) => string;
+    /** The intensity; `null` is an absent cell (flat neutral), never a zero. */
+    getValue: (d: T) => number | null;
+    /** Explicit band order. Default: first seen in `data`. */
+    rows?: readonly string[];
+    cols?: readonly string[];
+    /** The ink at full intensity, a `VX.*` ref or a series token. Default `VX.line`. */
+    color?: string;
+    /** The value range the color scale spans. Default `[0, max]` of the data. */
+    domain?: readonly [number, number];
+    /** Tooltip, legend-end and `aria` value format. Default: the number as-is. */
+    formatValue?: (v: number) => string;
+    /** Band tick and tooltip header labels. Default: the band key. */
+    formatRow?: (row: string) => string;
+    formatCol?: (col: string) => string;
+    /** `false` hides the gradient legend; `label` titles it. */
+    legend?: false | {
+        label?: string;
+    };
+    /** Rows after the value row, per cell (a sample count, a failure reason). Called with the datum. */
+    tooltip?: false | {
+        rows?: (d: T) => readonly ChartTooltipRow[];
+    };
+    /** A fixed height, or one per container class. Default: by row count (160–420px). */
+    height?: number | ResponsiveChartHeight;
+    /** Fill the parent's height instead (the parent needs a definite height). Overrides `height`. */
+    matchHeight?: boolean;
+    state?: ChartState;
+};
+export declare function Heatmap<T>(props: HeatmapProps<T>): ReactElement;
+//# sourceMappingURL=Heatmap.d.ts.map

package/dist/charts/Heatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../../src/charts/Heatmap.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AASlD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEjF,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,WAAW,GAAG;IAC1C,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,qCAAqC;IACrC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,wCAAwC;IACxC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,CAAA;IACjC,0DAA0D;IAC1D,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACnC,oGAAoG;IACpG,OAAO,CAAC,EAAE,KAAK,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,eAAe,EAAE,CAAA;KAAE,CAAA;IACjE,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,iGAAiG;IACjG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAuBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,CAuM/D"}

package/dist/charts/Heatmap.js

@@ -0,0 +1,216 @@
+import { jsx } from "react/jsx-runtime";
+import { colorGradientLegend } from "@tanstack/charts/legend";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { cell } from "@tanstack/charts/rect";
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { tooltip as tooltipHost } from "@tanstack/charts/tooltip";
+import { portal } from "@tanstack/charts/tooltip/portal";
+import { scaleQuantize } from "d3-scale";
+import { useId, useMemo } from "react";
+import { alpha, VX } from "../tokens/index.js";
+import { resolveContainerClass } from "../tokens/size-classes.js";
+import { ChartEngine, idPrefixOf } from "./host.js";
+import { useCoarsePointer } from "../common/use-media-query.js";
+import { HEIGHT_MAX, HEIGHT_MIN } from "./box.js";
+import { ChartPlaceholder, resolveChartState } from "./state.js";
+import { AXIS_LINE, CHART_THEME } from "./theme.js";
+const LEVELS = 8;
+const MIN_LEVEL = 0.14;
+const ROW_PITCH = 26;
+const CHROME = 64;
+const CELL_INSET = 1;
+const identityLabel = (band) => band;
+const firstSeen = (keys) => [...new Set(keys)];
+const ramp = (color) => Array.from(
+  { length: LEVELS },
+  (_, i) => alpha(color, MIN_LEVEL + (1 - MIN_LEVEL) * i / (LEVELS - 1))
+);
+const fillStyle = { position: "relative", height: "100%", minHeight: HEIGHT_MIN };
+function Heatmap(props) {
+  const {
+    ariaLabel,
+    data,
+    getRow,
+    getCol,
+    getValue,
+    color = VX.line,
+    domain,
+    formatValue = String,
+    formatRow = identityLabel,
+    formatCol = identityLabel,
+    legend,
+    tooltip,
+    height,
+    matchHeight = false,
+    state,
+    className,
+    style
+  } = props;
+  const chartId = useId();
+  const showLegend = legend !== false;
+  const legendLabel = legend === false ? void 0 : legend?.label;
+  const showTooltip = tooltip !== false;
+  const tooltipRows = tooltip === false ? void 0 : tooltip?.rows;
+  const rows = useMemo(() => props.rows ?? firstSeen(data.map(getRow)), [props.rows, data, getRow]);
+  const cols = useMemo(() => props.cols ?? firstSeen(data.map(getCol)), [props.cols, data, getCol]);
+  const statedHeight = height ?? Math.min(Math.max(rows.length * ROW_PITCH + CHROME, HEIGHT_MIN), HEIGHT_MAX);
+  const coarse = useCoarsePointer();
+  const boxHeight = matchHeight ? "fill" : statedHeight;
+  const definition = useMemo(() => {
+    const byBand = /* @__PURE__ */ new Map();
+    for (const d of data) {
+      const row = getRow(d);
+      const inRow = byBand.get(row) ?? /* @__PURE__ */ new Map();
+      inRow.set(getCol(d), d);
+      byBand.set(row, inRow);
+    }
+    const present = [];
+    const absentWithDatum = [];
+    const absentEmpty = [];
+    let max = 0;
+    for (const [r, row] of rows.entries()) {
+      for (const [c, col] of cols.entries()) {
+        const datum = byBand.get(row)?.get(col);
+        const raw = datum === void 0 ? null : getValue(datum);
+        const value = raw !== null && Number.isFinite(raw) ? raw : null;
+        const cellAt = { id: r * cols.length + c, row, col, datum, value };
+        if (value !== null) {
+          present.push(cellAt);
+          max = Math.max(max, value);
+        } else if (datum === void 0) absentEmpty.push(cellAt);
+        else absentWithDatum.push(cellAt);
+      }
+    }
+    const [lo, hi] = domain ?? [0, max];
+    const scale = scaleQuantize().domain([lo, hi > lo ? hi : lo + 1]).range(ramp(color));
+    const header = (c) => `${formatRow(c.row)} \xB7 ${formatCol(c.col)}`;
+    return {
+      chart: ({ width }) => {
+        const ticks = { line: false, size: 0 };
+        const tickLabels = {
+          fontSize: resolveContainerClass(width) === "wide" ? VX.text.micro : VX.text.nano,
+          opacity: 1,
+          thin: true
+        };
+        const marks = [
+          decorative(
+            cell(absentEmpty, {
+              id: "absent-empty",
+              x: "col",
+              y: "row",
+              fill: VX.neutral,
+              fillOpacity: 0.12,
+              inset: CELL_INSET
+            })
+          ),
+          cell(absentWithDatum, {
+            id: "absent",
+            x: "col",
+            y: "row",
+            fill: VX.neutral,
+            fillOpacity: 0.12,
+            inset: CELL_INSET,
+            key: "id"
+          }),
+          cell(present, {
+            id: "cells",
+            x: "col",
+            y: "row",
+            color: "value",
+            inset: CELL_INSET,
+            key: "id"
+          })
+        ];
+        return {
+          marks,
+          scales: {
+            x: {
+              scale: scaleBand().domain(cols).paddingInner(0).paddingOuter(0),
+              axis: {
+                line: AXIS_LINE,
+                ticks: { values: cols, format: (v) => formatCol(String(v)), ...ticks },
+                tickLabels
+              }
+            },
+            y: {
+              scale: scaleBand().domain(rows).paddingInner(0).paddingOuter(0),
+              axis: {
+                line: false,
+                ticks: { values: rows, format: (v) => formatRow(String(v)), ...ticks },
+                tickLabels
+              }
+            }
+          },
+          color: {
+            scale,
+            ...showLegend && {
+              legend: colorGradientLegend({
+                steps: LEVELS,
+                format: formatValue,
+                placement: "bottom",
+                ...legendLabel !== void 0 && { label: legendLabel }
+              })
+            }
+          },
+          theme: CHART_THEME
+        };
+      },
+      tooltip: showTooltip ? {
+        use: tooltipHost,
+        portal,
+        content: (points) => {
+          const point = points[0];
+          const c = point?.datum;
+          if (!point || !c) return { rows: [] };
+          const extra = c.datum === void 0 ? [] : tooltipRows?.(c.datum) ?? [];
+          const value = c.value === null ? [{ label: "Value", value: "No data" }] : [
+            {
+              label: "Value",
+              value: formatValue(c.value),
+              ...point.color && { color: point.color }
+            }
+          ];
+          return { title: header(c), rows: [...value, ...extra] };
+        }
+      } : false
+    };
+  }, [
+    data,
+    rows,
+    cols,
+    getRow,
+    getCol,
+    getValue,
+    color,
+    domain,
+    formatValue,
+    formatRow,
+    formatCol,
+    legendLabel,
+    showLegend,
+    showTooltip,
+    tooltipRows
+  ]);
+  const resolved = resolveChartState(state);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-basalt-chart": "",
+      ...className !== void 0 && { className },
+      style: matchHeight ? { ...fillStyle, ...style } : style,
+      children: resolved === null ? /* @__PURE__ */ jsx(
+        ChartEngine,
+        {
+          definition,
+          ariaLabel,
+          height: boxHeight,
+          idPrefix: idPrefixOf(chartId),
+          coarse
+        }
+      ) : /* @__PURE__ */ jsx(ChartPlaceholder, { state, height: boxHeight })
+    }
+  );
+}
+export {
+  Heatmap
+};

package/dist/charts/Lines.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+import type { CartesianChartProps, ChartX, Threshold } from './types.js';
+export type LinesProps<T, X extends ChartX = ChartX> = Omit<CartesianChartProps<T, X>, 'marks'> & {
+    /**
+     * Fills between the first visible series and a value, on one side of it. Unavailable on a string
+     * x: the engine's `differenceY` takes a Date or number x only.
+     */
+    thresholds?: [X] extends [string] ? never : readonly Threshold[];
+};
+export declare function Lines<T, X extends ChartX = ChartX>(props: LinesProps<T, X>): ReactElement;
+//# sourceMappingURL=Lines.d.ts.map

package/dist/charts/Lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lines.d.ts","sourceRoot":"","sources":["../../src/charts/Lines.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAOzC,OAAO,KAAK,EACV,mBAAmB,EAGnB,MAAM,EAGN,SAAS,EACV,MAAM,SAAS,CAAA;AAOhB,MAAM,MAAM,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG;IAChG;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,SAAS,SAAS,EAAE,CAAA;CACjE,CAAA;AA4CD,wBAAgB,KAAK,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CAgEzF"}

package/dist/charts/Lines.js

@@ -0,0 +1,114 @@
+import { jsx } from "react/jsx-runtime";
+import { areaY } from "@tanstack/charts/area";
+import { differenceY } from "@tanstack/charts/difference";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { text } from "@tanstack/charts/text";
+import { useCallback } from "react";
+import { VX } from "../tokens/index.js";
+import { CartesianRung } from "./CartesianChart.js";
+import { areaGradientId } from "./compile.js";
+import { chartCurve } from "./curves.js";
+import { lineMark, markersOf, yScaleOf } from "./marks.js";
+import { rowX } from "./types.js";
+const MAX_END_LABELS = 3;
+const END_LABEL_MIN_GAP = 13;
+const END_LABEL_DX = 6;
+const hasValue = (r) => r.y !== null;
+function endLabels(plot, lines) {
+  if (plot.containerClass !== "wide" || plot.y2 !== void 0) return [];
+  if (lines.length === 0 || lines.length > MAX_END_LABELS) return [];
+  const last = lines.flatMap((s) => {
+    const row = plot.rows(s.key).findLast(hasValue);
+    return row ? [{ s, row }] : [];
+  });
+  const domain = plot.yDomain;
+  const ys = last.map(({ row }) => {
+    if (row.y === null) return Number.NaN;
+    return (row.y - domain[0]) / (domain[1] - domain[0] || 1) * plot.height;
+  });
+  const sorted = ys.toSorted((a, b) => a - b);
+  if (sorted.some(
+    (y, i) => Number.isNaN(y) || i > 0 && y - sorted[i - 1] < END_LABEL_MIN_GAP
+  ))
+    return [];
+  return last.map(
+    ({ s, row }) => decorative(
+      text([row], {
+        id: `${s.key}-end-label`,
+        x: rowX,
+        y: "y",
+        text: () => s.label,
+        fill: s.color,
+        fontSize: VX.text.micro,
+        anchor: "start",
+        dx: END_LABEL_DX
+      })
+    )
+  );
+}
+function Lines(props) {
+  const { thresholds, ...rest } = props;
+  const { series } = props;
+  const marks = useCallback(
+    (plot) => {
+      const indexOf = new Map(series.map((s, i) => [s.key, i]));
+      const plotted = plot.visible.filter((s) => plot.rows(s.key).some(hasValue));
+      const primary = plotted[0];
+      const out = [];
+      if (primary && thresholds) {
+        const pts = plot.rows(primary.key).filter(hasValue);
+        thresholds.forEach((t, i) => {
+          out.push(
+            decorative(
+              differenceY(pts, {
+                id: `threshold-${i}`,
+                x: rowX,
+                y1: t.value,
+                y2: "y",
+                positiveFill: t.side === "above" ? t.fill : null,
+                negativeFill: t.side === "below" ? t.fill : null,
+                fillOpacity: 1,
+                stroke: "none",
+                comparisonStroke: "none",
+                ...yScaleOf(plot, primary) !== void 0 && { yScale: "y2" }
+              })
+            )
+          );
+        });
+      }
+      for (const s of plot.visible) {
+        if (!s.area) continue;
+        out.push(
+          decorative(
+            areaY(plot.rows(s.key), {
+              id: `${s.key}-area`,
+              x: rowX,
+              y2: "y",
+              y1: () => 0,
+              fill: `url(#${areaGradientId(indexOf.get(s.key) ?? 0)})`,
+              fillOpacity: 1,
+              curve: chartCurve(s.curve ?? "monotone"),
+              ...yScaleOf(plot, s) !== void 0 && { yScale: "y2" }
+            })
+          )
+        );
+      }
+      for (const s of plot.visible) {
+        out.push(lineMark(plot, s));
+        out.push(...markersOf(s, plot.rows(s.key), yScaleOf(plot, s)));
+      }
+      out.push(
+        ...endLabels(
+          plot,
+          plotted.filter((s) => s.role !== "reference")
+        )
+      );
+      return out;
+    },
+    [series, thresholds]
+  );
+  return /* @__PURE__ */ jsx(CartesianRung, { ...rest, marks });
+}
+export {
+  Lines
+};