basalt-ui 1.41.0 → 2.0.1

package/src/charts/index.ts

@@ -1,185 +1,48 @@
 /**
- * `./charts` — Mantine-free visx chart system (ZERO `@mantine/*` imports, lint-enforced).
- *
- * Re-exports the framework token layer (so chart consumers have one import surface), the chart
- * theme context, the shared cursor (module-level store — charts sync with no provider; see
- * `docs/CHARTS-SPEC.md` §3), the primitives, kinds, sparklines, hooks, utils, and a curated set of
- * raw @visx primitives for bespoke charts.
- *
- * The framework ships ONLY generic primitives + framework palette data — no domain series tree
- * (apps rebuild that app-side with `seriesTokens` / `groupTokens` against their own series maps).
- * Grounded in argo `packages/charts/src/index.ts`.
+ * `basalt-ui/charts` — the chart layer on TanStack Charts (`docs/V2-SPEC.md` § 9). Mantine-free:
+ * the rung (`CartesianChart`), the kinds (`Lines`, `Bars`, `StackedArea`, `Sparkline`, `BandStrip`, `Donut`, `Heatmap`, `DualPanel`, `MirroredBars`), the card (`ChartCard`) and the shared
+ * cursor (`chartCursor`). Engine marks for `CartesianChart`'s `marks` are imported from the allowed
+ * `@tanstack/charts/*` subpaths directly; tokens come from `basalt-ui/tokens`, formatters from
+ * `basalt-ui/format`. Nothing here re-exports either, or the engine.
  */
-
-// ── Framework token surface (Mantine-free) ───────────────────────────────
-export {
-  VX,
-  alpha,
-  type ColorPair,
-  type SeriesMap,
-  buildPaletteCss,
-  seriesTokens,
-  defineSeries,
-  groupTokens,
-  chartMargin,
-  type ChartMargin,
-} from '../tokens'
-
-// ── Design seam type (type-only; erased at runtime — no @mantine value) ─
-export type { SeriesKey } from '../register'
-
-// ── Chart theme + shared cursor ──────────────────────────────────────────
-export { VxThemeProvider, useVxTheme, type VxTheme } from './theme'
-export { ChartCursorScope, type ChartCursorScopeProps, useCursorState } from './cursor/scope'
-export {
-  createCursorStore,
-  globalCursorStore,
-  type CursorState,
-  type CursorStore,
-} from './cursor/store'
-
-// ── Series descriptor (the legend/tooltip single source of truth) ────────
-export {
-  type SeriesMark,
-  type SeriesDash,
-  type SeriesCurve,
-  curveFor,
-  type SeriesRole,
-  type LegendPlacement,
-  type ChartLegendConfig,
-  type SeriesStyle,
-  type ChartSeries,
-  deriveLegend,
-  deriveTooltipRows,
-} from './series'
-
-// ── Primitives ───────────────────────────────────────────────────────────
-export {
-  CartesianChart,
-  resolveAxisDomain,
-  type CartesianChartProps,
-  type CartesianTooltipConfig,
-  type CartesianTooltipRowContext,
-  type AxisConfig,
-  type PlotContext,
-} from './primitives/CartesianChart'
-export {
-  ChartFrame,
-  type ChartFrameProps,
-  type ChartFrameLegend,
-  type ResponsiveChartHeight,
-  type PlotRect,
-  resolveLegend,
-} from './primitives/ChartFrame'
-export {
-  ChartCenter,
-  type ChartCenterProps,
-  ChartPending,
-  type ChartPendingProps,
-  ChartEmpty,
-  type ChartEmptyProps,
-  ChartError,
-  type ChartErrorProps,
-  type ChartState,
-  type ResolvedChartState,
-  resolveChartState,
-} from './primitives/ChartPending'
-export { Crosshair, SeriesDot } from './primitives/Crosshair'
-export { HatchPattern, hatchFill, hatchSizeFor } from './primitives/HatchPattern'
-export { ChartCard, type ChartCardProps, type ChartCardSlot } from './primitives/ChartCard'
-export { ChartLegend, type LegendEntry } from './primitives/ChartLegend'
-export {
-  ChartTooltipFloat,
-  TooltipHeader,
-  TooltipRow,
-  TooltipBody,
-} from './primitives/ChartTooltip'
-export {
-  AxisBottomDate,
-  AxisBottomNumeric,
-  AxisLeftNumeric,
-  AxisRightNumeric,
-} from './primitives/Axes'
-export { HoverOverlay } from './primitives/HoverOverlay'
-export { ZoneRects, type ZoneSpec } from './primitives/ZoneRects'
-export { XZoneRects, type XZoneSpec } from './primitives/XZoneRects'
-export { AreaGradient, areaFillUrl } from './primitives/AreaGradient'
-
-// ── Hooks ────────────────────────────────────────────────────────────────
-export { useChartCursor, type ChartCursor, type CursorAnchor } from './hooks/useChartCursor'
-export {
-  foldBands,
-  type BandFold,
-  type BandTooltipConfig,
-  type BandTooltipRowContext,
-} from './hooks/useBandPlot'
-export type { CursorResolution, DomainKind } from './cursor/resolve'
-export { useChartSize, type UseChartSizeResult, type ChartSize } from './hooks/useChartSize'
-
-// ── Utils ────────────────────────────────────────────────────────────────
-export {
-  fmtAxisDate,
-  fmtTooltipDate,
-  fmtCompact,
-  type FmtCompactOptions,
-  fmtPercent,
-  type FmtPercentOptions,
-  fmtCurrency,
-  type FmtCurrencyOptions,
-  fmtInt,
-  formatters,
-} from './utils/format'
-export { smartTicks, smartTicksEvery, xLabelPxFor, autoXLabelRotate } from './utils/ticks'
-export { autoMargin, probeAxisLabels, type AutoMarginInput } from './layout/auto-margin'
-export { measureText, maxTextWidth } from './utils/measure-text'
-
-// ── Kind components (owned by a sibling agent under ./kinds) ──────────────
-export {
-  ZonedLine,
-  type ZonedLineProps,
-  type ZonedLineThreshold,
-  type ZonedLineRefLine,
-} from './kinds/ZonedLine'
-
-export { Bars, type BarsProps, type BarsBar, type BarsLine, type BarsRefLine } from './kinds/Bars'
-
-export { StackedArea, type StackedAreaProps } from './kinds/StackedArea'
-export { Donut, type DonutProps, type DonutDatum } from './kinds/Donut'
-
-export { MultiLine, type MultiLineProps } from './kinds/MultiLine'
-export { DualPanel, type DualPanelProps } from './kinds/DualPanel'
-export { Heatmap, type HeatmapProps } from './kinds/Heatmap'
+export { CartesianChart } from './CartesianChart'
+export { Lines, type LinesProps } from './Lines'
+export { Bars, type BarsProps, type BarsBar, type BarsLine } from './Bars'
+export { StackedArea, type StackedAreaProps, type StackedAreaBand } from './StackedArea'
+export { Sparkline, type SparklineProps } from './Sparkline'
 export {
   BandStrip,
   type BandStripProps,
   type BandStripSeries,
   type BandSpan,
-} from './kinds/BandStrip'
-export { MirroredBars, type MirroredBarsProps, type MirroredBarPane } from './kinds/MirroredBars'
-
-// ── Sparklines ───────────────────────────────────────────────────────────
-export {
-  LineSparkline,
-  type LineSparklineProps,
-  BarSparkline,
-  type BarSparklineProps,
-} from './sparklines'
-
-// ── Re-exported visx primitives ──────────────────────────────────────────
-// Bespoke charts (genuinely unique compositions, per `agent/rules/basalt-charts.md` "Adding a
-// chart") need raw visx primitives. Re-exporting them keeps the dependency declared in one
-// place and preserves the rule that consumers only import from `basalt-ui/charts`.
-export { Group } from '@visx/group'
-export { GridRows, GridColumns } from '@visx/grid'
-export { scaleLinear, scaleBand, scalePoint, scaleTime } from '@visx/scale'
-export { LinePath, Bar, AreaClosed, AreaStack, BarStack, BarGroup, Line, Pie } from '@visx/shape'
-export { Threshold } from '@visx/threshold'
-export {
-  curveMonotoneX,
-  curveLinear,
-  curveCatmullRom,
-  curveStep,
-  curveStepAfter,
-  curveStepBefore,
-  curveBasis,
-} from '@visx/curve'
+  type BandFold,
+} from './BandStrip'
+export { Donut, type DonutProps, type DonutDatum } from './Donut'
+export { Heatmap, type HeatmapProps } from './Heatmap'
+export { DualPanel, type DualPanelProps, type DualPanelLine, type DualPanelBar } from './DualPanel'
+export {
+  MirroredBars,
+  type MirroredBarsProps,
+  type MirroredBarsSeries,
+  type MirroredBarPane,
+} from './MirroredBars'
+export { ChartCard, type ChartCardProps, type ChartCardSlot } from './ChartCard'
+export { chartCursor } from './cursor'
+export type {
+  AxisConfig,
+  CartesianChartProps,
+  ChartLegendConfig,
+  ChartMarks,
+  ChartSeries,
+  ChartState,
+  ChartTooltipConfig,
+  ChartTooltipRow,
+  ChartX,
+  CursorResolution,
+  PlotContext,
+  RefLine,
+  ResponsiveChartHeight,
+  Threshold,
+  XZoneSpec,
+  ZoneSpec,
+} from './types'

package/src/charts/legend.tsx

@@ -0,0 +1,204 @@
+/**
+ * The derived legend — HTML, Mantine-free, outside the engine. Entries come from `series` only (a
+ * legend cannot name what the plot does not draw); a companion (`legend: false` + `parent`) rides
+ * its parent's entry. Toggling an entry hides the series from the plot, the tooltip and the auto
+ * domain together; hovering one emphasizes it (the definition is rebuilt with `highlighted`).
+ */
+import type { CSSProperties, ReactElement } from 'react'
+import { VX } from '../tokens'
+import classes from './chart-legend.module.css'
+import type { ChartSeries } from './types'
+
+/** `auto` renders both swatches and lets the container decide: none, dots or chips (CSS). */
+export type LegendMode = 'dots' | 'chips' | 'auto'
+
+const ROLE_ORDER = ['series', 'overlay', 'reference'] as const
+
+/**
+ * Dots sit wider apart than chips: a dot is 8px, and two 44px coarse-pointer hit areas centred on
+ * 8px hosts only stop overlapping once the pitch clears 44 (44 − 8 − 2, plus headroom).
+ */
+const DOTS_GAP = 38
+
+/** The entries a series list derives, in display order (by role when `groups`). */
+export function legendEntries<T>(
+  series: readonly ChartSeries<T>[],
+  groups: boolean,
+): ChartSeries<T>[][] {
+  const entries = series.filter((s) => s.legend !== false)
+  if (!groups) return entries.length ? [entries] : []
+  return ROLE_ORDER.map((role) => entries.filter((s) => (s.role ?? 'series') === role)).filter(
+    (g) => g.length > 0,
+  )
+}
+
+// Everything but `display` and the gaps, which are the stylesheet's in `auto` mode.
+const rowBaseStyle: CSSProperties = {
+  border: 0,
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  rowGap: 4,
+  fontSize: VX.legendFontSize,
+  color: VX.ink2,
+  lineHeight: 1.35,
+}
+const rowStyle: CSSProperties = { ...rowBaseStyle, display: 'flex' }
+/** The gaps `chart-legend.module.css` reads, as custom properties. */
+type LegendVars = CSSProperties & Record<'--bc-legend-gap' | '--bc-dots-gap', string>
+const autoRowStyle: LegendVars = {
+  ...rowBaseStyle,
+  '--bc-legend-gap': `${VX.legendGap}px`,
+  '--bc-dots-gap': `${DOTS_GAP}px`,
+}
+const dividerStyle: CSSProperties = { width: 1, alignSelf: 'stretch', background: VX.divider }
+const buttonStyle: CSSProperties = {
+  all: 'unset',
+  // `all: unset` would also drop styles.css's `position: relative` (an inline style outranks the
+  // layer), and the `[data-basalt-hit]::after` overlay would anchor to an ancestor — over the plot.
+  position: 'relative',
+  // theme-allow raw-surface — an invisible 1px: the edge the `[data-basalt-hit]` overlap cap assumes every control carries (styles.css)
+  border: '1px solid transparent',
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 6,
+  cursor: 'pointer',
+  borderRadius: VX.radiusCtrl,
+}
+const noteStyle: CSSProperties = { color: VX.axis }
+
+type SwatchStyle = Pick<
+  ChartSeries<never>,
+  'color' | 'mark' | 'dash' | 'strokeOpacity' | 'fillOpacity'
+>
+
+function Swatch({ s, mode }: { s: SwatchStyle; mode: LegendMode }): ReactElement {
+  if (mode === 'auto')
+    return (
+      <>
+        <Swatch s={s} mode="dots" />
+        <Swatch s={s} mode="chips" />
+      </>
+    )
+  if (mode === 'dots')
+    return (
+      <span
+        aria-hidden
+        className={classes.dot}
+        // theme-allow raw-surface — a legend dot is a circle, not a surface corner
+        style={{ width: 8, height: 8, borderRadius: '50%', background: s.color, flex: 'none' }}
+      />
+    )
+  if ((s.mark ?? 'line') === 'line')
+    return (
+      <svg aria-hidden className={classes.chip} width={16} height={8} style={{ flex: 'none' }}>
+        <line
+          x1={1}
+          x2={15}
+          y1={4}
+          y2={4}
+          stroke={s.color}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeOpacity={s.strokeOpacity ?? 1}
+          {...(s.dash === 'dashed' && { strokeDasharray: '4 3' })}
+        />
+      </svg>
+    )
+  return (
+    <span
+      aria-hidden
+      className={classes.chip}
+      style={{
+        width: 10,
+        height: 10,
+        // theme-allow raw-surface — swatch geometry, not a surface corner
+        borderRadius: 2,
+        background: s.color,
+        opacity: s.fillOpacity ?? 1,
+        flex: 'none',
+      }}
+    />
+  )
+}
+
+export type ChartLegendProps<T> = {
+  series: readonly ChartSeries<T>[]
+  hidden: ReadonlySet<string>
+  mode: LegendMode
+  groups: boolean
+  toggle: boolean
+  onToggle: (key: string) => void
+  onHighlight: (key: string | null) => void
+}
+
+export function ChartLegend<T>(props: ChartLegendProps<T>): ReactElement | null {
+  const groups = legendEntries(props.series, props.groups)
+  if (groups.length === 0) return null
+  const auto = props.mode === 'auto'
+  const gap = props.mode === 'dots' ? DOTS_GAP : VX.legendGap
+  return (
+    <fieldset
+      aria-label="Legend"
+      data-basalt-chart-legend={props.mode}
+      {...(auto && { className: classes.auto })}
+      style={
+        auto
+          ? // `display` and the gaps are the stylesheet's: the container picks them by width.
+            autoRowStyle
+          : {
+              ...rowStyle,
+              columnGap: gap,
+              // Caps each entry's `[data-basalt-hit]` overlay at the real gap between entries.
+              ...({ '--vx-hit-gap': `${gap}px` } as CSSProperties),
+            }
+      }
+    >
+      {groups.map((group, gi) => [
+        gi > 0 && <span key={`divider-${gi}`} aria-hidden style={dividerStyle} />,
+        ...group.map((s) => {
+          const off = props.hidden.has(s.key)
+          const content = (
+            <>
+              <Swatch s={s} mode={props.mode} />
+              <span>{s.label}</span>
+              {s.note !== undefined && <span style={noteStyle}>{s.note}</span>}
+            </>
+          )
+          const itemStyle: CSSProperties = { ...buttonStyle, opacity: off ? 0.4 : 1 }
+          if (!props.toggle)
+            return (
+              <span
+                key={s.key}
+                data-legend-key={s.key}
+                style={itemStyle}
+                onMouseEnter={() => props.onHighlight(s.key)}
+                onMouseLeave={() => props.onHighlight(null)}
+              >
+                {content}
+              </span>
+            )
+          return (
+            <button
+              key={s.key}
+              type="button"
+              data-legend-key={s.key}
+              data-basalt-hit=""
+              aria-pressed={!off}
+              style={itemStyle}
+              onClick={() => props.onToggle(s.key)}
+              onMouseEnter={() => props.onHighlight(s.key)}
+              onMouseLeave={() => props.onHighlight(null)}
+              onFocus={() => props.onHighlight(s.key)}
+              onBlur={() => props.onHighlight(null)}
+            >
+              {content}
+            </button>
+          )
+        }),
+      ])}
+    </fieldset>
+  )
+}

package/src/charts/marks.ts

@@ -0,0 +1,201 @@
+/**
+ * The line-overlay mark every kind draws the same way: `Lines`' series and `Bars`' line overlays.
+ * One place for stroke width, dash, curve, the right-axis binding and legend-hover emphasis (a
+ * companion keeps full strength while its `parent` is the highlighted entry).
+ */
+import { barY } from '@tanstack/charts/bar'
+import type { BarYOptions } from '@tanstack/charts/bar'
+import { dot } from '@tanstack/charts/dot'
+import { lineY } from '@tanstack/charts/line'
+import { decorative } from '@tanstack/charts/mark/decorative'
+import { VX } from '../tokens'
+import { chartCurve } from './curves'
+import { DASH, DIMMED, LINE_STROKE_WIDTH } from './theme'
+import { rowX } from './types'
+import type { ChartMarks, ChartSeries, ChartX, PlotContext, PlotRow } from './types'
+
+/** `'y2'` for a right-axis series on a chart that has one; otherwise the default axis. */
+export function yScaleOf<T, X extends ChartX>(
+  plot: PlotContext<T, X>,
+  s: Pick<ChartSeries<T>, 'axis'>,
+): 'y2' | undefined {
+  return s.axis === 'right' ? plot.y2 : undefined
+}
+
+/** `1`, or `DIMMED` while ANOTHER legend entry (not this series, not its parent) is hovered. */
+export function emphasis<T>(
+  highlighted: string | null,
+  s: Pick<ChartSeries<T>, 'key' | 'parent'>,
+): number {
+  return highlighted === null || highlighted === s.key || highlighted === s.parent ? 1 : DIMMED
+}
+
+export function lineMark<T, X extends ChartX>(
+  plot: PlotContext<T, X>,
+  s: ChartSeries<T>,
+): ChartMarks[number] {
+  const yScale = yScaleOf(plot, s)
+  return lineY(plot.rows(s.key), {
+    id: s.key,
+    x: rowX,
+    y: 'y',
+    z: 'series',
+    stroke: s.color,
+    strokeWidth: s.strokeWidth ?? LINE_STROKE_WIDTH,
+    strokeOpacity: (s.strokeOpacity ?? 1) * emphasis(plot.highlighted, s),
+    curve: chartCurve(s.curve ?? 'monotone'),
+    ...(s.dash === 'dashed' && { strokeDasharray: DASH }),
+    ...(yScale !== undefined && { yScale }),
+  })
+}
+
+type MarkerGroup<T, X extends ChartX> = {
+  color: string
+  opacity: number
+  ring: boolean
+  rows: (PlotRow<T, X> & { r: number })[]
+}
+
+/** A series' `getMarker` points as dots: one decorative mark per distinct paint. */
+export function markersOf<T, X extends ChartX>(
+  s: ChartSeries<T>,
+  rows: readonly PlotRow<T, X>[],
+  yScale: 'y2' | undefined,
+): ChartMarks {
+  const getMarker = s.getMarker
+  if (!getMarker) return []
+  // `dot.fill` is constant, so one decorative dot mark per distinct marker paint.
+  const groups: MarkerGroup<T, X>[] = []
+  for (const row of rows) {
+    if (row.y === null) continue
+    const m = getMarker(row.datum)
+    if (!m) continue
+    const paint = { color: m.color ?? s.color, opacity: m.fillOpacity ?? 1, ring: m.ring !== false }
+    let group = groups.find(
+      (g) => g.color === paint.color && g.opacity === paint.opacity && g.ring === paint.ring,
+    )
+    if (!group) {
+      group = { ...paint, rows: [] }
+      groups.push(group)
+    }
+    group.rows.push({ ...row, r: m.r ?? VX.dotR })
+  }
+  return groups.map((group, i) =>
+    decorative(
+      dot(group.rows, {
+        id: `${s.key}-marker-${i}`,
+        x: rowX,
+        y: 'y',
+        r: 'r',
+        fill: group.color,
+        fillOpacity: group.opacity,
+        ...(group.ring && { stroke: VX.surface.panel, strokeWidth: 1.5 }),
+        ...(yScale !== undefined && { yScale }),
+      }),
+    ),
+  )
+}
+
+/**
+ * A single-series `barY`. The engine stacks every `barY` that has no explicit extent, and a row with
+ * no `z`/`color` channel is its own series: an N-by-N matrix (a 5k-row `DualPanel` took 10 s). So
+ * the extent is explicit (`y1: 0`) unless the caller asks for a series (`z`, `color`) or a `layout`.
+ * Every bar that is not `Bars'` stacked/grouped one is drawn through this.
+ */
+const given = (v: unknown): boolean => v !== undefined && v !== null
+
+export function barMark<TDatum>(
+  rows: Iterable<TDatum>,
+  options: BarYOptions<TDatum> = {},
+): ChartMarks[number] {
+  // On values, not keys: `z: undefined` from a conditional spread asks for no series.
+  const seriesAsked = [options.z, options.color, options.layout].some(given)
+  const extentGiven = [options.y1, options.y2].some(given)
+  return barY(rows, seriesAsked || extentGiven ? options : { ...options, y1: 0 })
+}
+
+/** Rows per plot pixel beyond which {@link thinFill} thins. */
+const FILL_ROWS_PER_PX = 4
+
+type Extreme = { value: number; index: number }
+type Bucket = {
+  first: number
+  last: number
+  minFrom: Extreme
+  maxFrom: Extreme
+  minTo: Extreme
+  maxTo: Extreme
+  minGap: Extreme
+  maxGap: Extreme
+}
+
+const extreme = (value: number, index: number): Extreme => ({ value, index })
+const lower = (e: Extreme, value: number, index: number): void => {
+  if (value < e.value) Object.assign(e, { value, index })
+}
+const upper = (e: Extreme, value: number, index: number): void => {
+  if (value > e.value) Object.assign(e, { value, index })
+}
+
+/**
+ * A band fill drawn at `width` px: each pixel column of the plot keeps its first and last row and the
+ * rows holding the extremes of `from`, `to` and `to - from`, so the silhouette and every sign
+ * crossing survive while a 10k-row series stops costing the engine a scene point per row. `at` is a
+ * row's x as a plot fraction (0..1), so an irregularly sampled series (bursts, then a gap) is
+ * bucketed by where it is drawn, not by its array index. The series' own first and last row are
+ * always kept. Below {@link FILL_ROWS_PER_PX} rows per pixel, or for an unmeasured width, the rows
+ * come back unchanged. Order is preserved; pure in its inputs, so the server render and the first
+ * client render agree. Only for decorative fills: hover and focus must read the full series.
+ */
+export function thinFill<R extends { from: number; to: number }>(
+  rows: readonly R[],
+  width: number,
+  at: (row: R) => number,
+): R[] {
+  const buckets = Math.floor(width)
+  if (!(buckets >= 1) || rows.length <= buckets * FILL_ROWS_PER_PX) return rows.slice()
+  const kept = new Set<number>([0, rows.length - 1])
+  const columns = new Map<number, Bucket>()
+  for (const [i, r] of rows.entries()) {
+    const position = at(r)
+    // A gap (a non-finite value) breaks the fill and must stay where it is; it never seeds or wins an
+    // extremum. A row with no position cannot be placed in a column: keep it too.
+    if (!Number.isFinite(r.from) || !Number.isFinite(r.to) || !Number.isFinite(position)) {
+      kept.add(i)
+      continue
+    }
+    const column = Math.min(buckets - 1, Math.max(0, Math.floor(position * buckets)))
+    const gap = r.to - r.from
+    const b = columns.get(column)
+    if (!b) {
+      columns.set(column, {
+        first: i,
+        last: i,
+        minFrom: extreme(r.from, i),
+        maxFrom: extreme(r.from, i),
+        minTo: extreme(r.to, i),
+        maxTo: extreme(r.to, i),
+        minGap: extreme(gap, i),
+        maxGap: extreme(gap, i),
+      })
+      continue
+    }
+    b.last = i
+    lower(b.minFrom, r.from, i)
+    upper(b.maxFrom, r.from, i)
+    lower(b.minTo, r.to, i)
+    upper(b.maxTo, r.to, i)
+    lower(b.minGap, gap, i)
+    upper(b.maxGap, gap, i)
+  }
+  for (const b of columns.values()) {
+    for (const i of [b.first, b.last]) kept.add(i)
+    for (const e of [b.minFrom, b.maxFrom, b.minTo, b.maxTo, b.minGap, b.maxGap]) kept.add(e.index)
+  }
+  return [...kept]
+    .toSorted((p, q) => p - q)
+    .flatMap((i) => {
+      const row = rows[i]
+      return row === undefined ? [] : [row]
+    })
+}