basalt-ui 1.41.0 → 2.0.1

package/src/charts/series.ts

@@ -1,276 +0,0 @@
-/**
- * The series descriptor — single source of truth for color + line-style + label + accessor.
- * Legend + tooltip rows are *derived* from it, never hand-authored in parallel. Mantine-free.
- *
- * Generalizes `MultiLineSeries<T>` (`kinds/MultiLine.tsx`) into the shared spine consumed by
- * every kind. `LegendPlacement` also lives here so `ChartLegend` and the future `ChartFrame`
- * share one definition.
- */
-
-import {
-  curveLinear,
-  curveMonotoneX,
-  curveStep,
-  curveStepAfter,
-  curveStepBefore,
-} from '@visx/curve'
-import type { LegendEntry } from './primitives/ChartLegend'
-
-/**
- * Default stroke width for plotted line overlays in `DualPanel` / `MultiLine` / `ZonedLine` —
- * thinner than the generic `VX.lineWidth` per the 2026-07 modern-zinc redesign
- * (`docs/DESIGN-SPEC.md` §5, "tertiary/line overlay ... at 1.9px stroke"). `VX.lineWidth` itself
- * stays the "one width everywhere" default for `Bars`' line overlays, legend line swatches, and
- * `TooltipRow`'s generic fallback — this constant only overrides the three kinds it's imported by.
- */
-export const LINE_OVERLAY_STROKE_WIDTH = 1.9
-
-/** Governs BOTH the plotted mark and the legend swatch shape. */
-export type SeriesMark = 'line' | 'bar' | 'area'
-
-/** Only meaningful for `mark: 'line'`. */
-export type SeriesDash = 'solid' | 'dashed'
-
-/**
- * The interpolation between two plotted points. Named rather than a raw d3 `CurveFactory` so the
- * set is closed, serializable, and identical across every kind — a chart cannot pick a curve the
- * legend swatch and the sibling chart next to it do not also understand.
- *
- * - `monotone` (default, today's behaviour everywhere) — smoothed, overshoot-free.
- * - `linear` — straight segments. The honest choice when the points are samples, not a signal.
- * - `step` / `stepAfter` / `stepBefore` — the value HOLDS between samples and changes at one x.
- *   Reach for these when the quantity is piecewise-constant (a price tier, a config value, a
- *   discrete state): a smoothed curve through them draws intermediate values that never existed.
- *   `stepAfter` holds the value forward from its own x, `stepBefore` holds it back from the next,
- *   `step` changes at the midpoint.
- */
-export type SeriesCurve = 'monotone' | 'linear' | 'step' | 'stepAfter' | 'stepBefore'
-
-/** d3's curve-factory shape, taken from a curve we already import rather than from
- * `@visx/vendor/d3-shape` — that package is a transitive of `@visx/curve`, not one of the nine
- * exact-pinned peers, so naming it in an import would add an undeclared dependency. */
-type CurveFactory = typeof curveMonotoneX
-
-const CURVES: Record<SeriesCurve, CurveFactory> = {
-  monotone: curveMonotoneX,
-  linear: curveLinear,
-  step: curveStep,
-  stepAfter: curveStepAfter,
-  stepBefore: curveStepBefore,
-}
-
-/**
- * The d3 curve factory for a {@link SeriesCurve}. `undefined` resolves to `curveMonotoneX` — the
- * value every kind hard-coded before this seam existed, so an omitted `curve` moves nothing.
- * Exported for a hand-composed plot that draws its own `LinePath` from the same `series` array.
- */
-export function curveFor(curve?: SeriesCurve): CurveFactory {
-  return curve === undefined ? curveMonotoneX : CURVES[curve]
-}
-
-/** Drives legend grouping/dividers. */
-export type SeriesRole = 'series' | 'overlay' | 'reference'
-
-/** Where the derived legend renders relative to the plot. */
-export type LegendPlacement = 'top' | 'bottom' | 'left' | 'right'
-
-/**
- * Consumer-facing legend config exposed by every kind's `legend` prop — the subset of
- * `ChartFrame`'s legend object a consumer may set directly. Deliberately excludes
- * `highlighted`/`onHighlight`, which the kind injects itself (its own hover-dim state).
- * `legend={false}` on a kind disables the legend entirely (the sparkline escape).
- */
-export type ChartLegendConfig = {
-  /** Default 'bottom'. */
-  placement?: LegendPlacement
-  /** Visually separate role: series | overlay | reference. */
-  groups?: boolean
-  /**
-   * @deprecated Removed in 1.32.0 — the legend fits by measured width and folds overflow into an
-   * `All N` disclosure on its own. An explicit value still wins this release (entry count).
-   */
-  maxRows?: number
-  /** Clicking an entry hides that series. Default: on whenever there is more than one entry. */
-  toggle?: boolean
-}
-
-/** Visual identity of a series — everything the legend + tooltip swatch need. No accessors, no `T`. */
-export type SeriesStyle = {
-  key: string
-  label: string
-  /** A --vx-* ref (VX.series.*), never a raw hex. */
-  color: string
-  mark: SeriesMark
-  /** Default 'solid'. */
-  dash?: SeriesDash
-  /**
-   * Interpolation between points for the line/area shapes this series draws. Default `'monotone'`
-   * — today's behaviour, unchanged, everywhere. See {@link SeriesCurve} for when a step curve is
-   * the honest one. Silently no-ops on `mark: 'bar'`, which has nothing to interpolate.
-   */
-  curve?: SeriesCurve
-  /** Default VX.lineWidth (one width, everywhere). */
-  strokeWidth?: number
-  /** bar/area: the swatch honors this so it cannot lie. */
-  fillOpacity?: number
-  /**
-   * A MARK property — dims the plotted stroke, e.g. a faint moving-average companion line. The
-   * legend swatch honors it too (parity with `fillOpacity`, which it already honors — a swatch
-   * that lies is the thing the derived-legend rule exists to prevent). The TOOLTIP ROW swatch and
-   * the CROSSHAIR DOT deliberately do NOT honor it: those are 12px value-readout chips where a
-   * sub-1 opacity reads as a rendering bug, not as data.
-   *
-   * Applies to STROKES only, so it silently no-ops on a `mark: 'bar'`/`'area'` series — a bar
-   * swatch has no stroke to dim. Dim those with `fillOpacity` instead. This bites the
-   * zone/reference-legend idiom in particular (`mark: 'bar'`, `getValue: () => null`), where
-   * reaching for `strokeOpacity` looks right and does nothing.
-   */
-  strokeOpacity?: number
-  /** Which y-axis this series is measured against. Default 'left'. `'right'` is what makes a
-   * chart dual-axis — `CartesianChart` reads it for the crosshair dots and the tooltip. */
-  axis?: 'left' | 'right'
-  /** Default 'series'. */
-  role?: SeriesRole
-  /** Default true; false = companion folded under `parent`. */
-  legend?: boolean
-  /**
-   * Default true; false = drawn and legended, but NEVER listed as a tooltip row. The replacement
-   * for the per-kind `hideBarTooltipRows` escape the old layer had: it belongs to the series, not to the kind, so
-   * one series can opt out without the kind growing a prop for it.
-   */
-  tooltip?: boolean
-  /** e.g. an MA line names its parent so hover-dimming keeps the pair. */
-  parent?: string
-  /** Short qualifier rendered after the label in muted text — e.g. a flat-at-zero series that is
-   * invisible in the plot. */
-  note?: string
-}
-
-/** Full descriptor = visual identity + data accessors. Generic over the point type. */
-export type ChartSeries<T> = SeriesStyle & {
-  /**
-   * null = an ABSENCE, never a zero: a real gap in the line/area (`defined`, not a straight
-   * interpolation across the hole) plus a skipped tooltip row and no crosshair dot. In a STACKED
-   * kind the absence is contagious — a band with no value leaves no cumulative total, so the whole
-   * stack gaps at that x (`StackedArea`'s JSDoc has the accounting).
-   */
-  getValue: (d: T) => number | null
-  /** Per-series override of the shared tooltip/value formatter. Receives the hovered datum
-   * alongside the value so a row can read fields beyond the plotted number (e.g. `97.5 kg (92.5 ×
-   * 3)`). */
-  formatValue?: (v: number, d: T) => string
-  /** PR star / status dot. Return null for no marker at that point. `ring` defaults true (today's
-   * punched-out stroke, unchanged); `false` omits the stroke entirely. `fillOpacity` defaults 1. */
-  getMarker?: (d: T) => { color?: string; r?: number; fillOpacity?: number; ring?: boolean } | null
-}
-
-/** A single derived tooltip row, ready for `TooltipRow`. */
-export type TooltipRowData = {
-  key: string
-  label: string
-  color: string
-  value: string
-  shape: 'line' | 'bar'
-  dashed: boolean
-  strokeWidth?: number
-}
-
-const shapeFor = (mark: SeriesMark): 'line' | 'bar' => (mark === 'line' ? 'line' : 'bar')
-
-function legendEntryFor(s: SeriesStyle): LegendEntry {
-  return {
-    key: s.key,
-    label: s.label,
-    color: s.color,
-    shape: shapeFor(s.mark),
-    dashed: s.dash === 'dashed',
-    ...(s.strokeWidth !== undefined && { strokeWidth: s.strokeWidth }),
-    ...(s.fillOpacity !== undefined && { fillOpacity: s.fillOpacity }),
-    ...(s.strokeOpacity !== undefined && { strokeOpacity: s.strokeOpacity }),
-    ...(s.role !== undefined && { role: s.role }),
-    ...(s.note !== undefined && { note: s.note }),
-  }
-}
-
-/**
- * Derive the legend from a series-style array — the enforcement that the legend can never drift
- * from what's plotted. Groups by `role` (series → overlay → reference) via `ChartLegend`'s own
- * `groups` rendering.
- *
- * `legend === false`: dropped entirely, UNLESS `parent` names another series in the array — then
- * it is folded into that parent's `LegendEntry.children` as a subordinate dashed sub-entry (e.g.
- * an MA companion), rather than vanishing. A series with `legend !== false` always renders as a
- * normal top-level entry.
- */
-export function deriveLegend(series: readonly SeriesStyle[]): LegendEntry[] {
-  const entries: LegendEntry[] = []
-  const byKey = new Map<string, LegendEntry>()
-
-  for (const s of series) {
-    if (s.legend === false) continue
-    const entry = legendEntryFor(s)
-    entries.push(entry)
-    byKey.set(s.key, entry)
-  }
-
-  for (const s of series) {
-    if (s.legend !== false || s.parent === undefined) continue
-    const parent = byKey.get(s.parent)
-    if (parent === undefined) continue
-    parent.children ??= []
-    parent.children.push(legendEntryFor(s))
-  }
-
-  return entries
-}
-
-/**
- * Derive tooltip rows from a series descriptor array + the hovered datum. Skips rows where
- * `getValue(datum) === null` or `tooltip === false`; honors per-series `formatValue` over the
- * shared `fallbackFormat`.
- * Kinds pass `series.toReversed()` for stacked charts so the tooltip stack matches the visual stack.
- */
-export function deriveTooltipRows<T>(
-  series: readonly ChartSeries<T>[],
-  datum: T,
-  fallbackFormat: (v: number) => string,
-): TooltipRowData[] {
-  const rows: TooltipRowData[] = []
-  for (const s of series) {
-    if (s.tooltip === false) continue
-    const value = s.getValue(datum)
-    if (value === null) continue
-    const format: (v: number, d: T) => string = s.formatValue ?? fallbackFormat
-    rows.push({
-      key: s.key,
-      label: s.label,
-      color: s.color,
-      value: format(value, datum),
-      shape: shapeFor(s.mark),
-      dashed: s.dash === 'dashed',
-      ...(s.strokeWidth !== undefined && { strokeWidth: s.strokeWidth }),
-    })
-  }
-  return rows
-}
-
-/**
- * Coerces a `ChartSeries.getValue` result into what a plotted point stores as its y: `null`,
- * `undefined` and `NaN` all collapse to `null`, which downstream `definedOn` reads as a
- * documented gap rather than a value to plot. Shared by `MultiLine`'s `seriesPoints` and
- * `ZonedLine`'s `linePoints` — both used to reimplement this coercion independently.
- */
-export function toPlotPoint(v: number | null | undefined): number | null {
-  return v === null || v === undefined || Number.isNaN(v) ? null : v
-}
-
-/**
- * A `defined` predicate for `LinePath`/`AreaClosed`/`Threshold`, bound to one y-scale. A null
- * `__y` is a documented gap (`ChartSeries.getValue`), and a non-positive value on a log scale maps
- * to `NaN` via the scale itself — without excluding both, d3's generators either draw an
- * interpolated straight line across the hole or blank the entire path from that point on (SVG's
- * `NaN` path-command handling). Shared by `MultiLine` and `ZonedLine`.
- */
-export function definedOn(scale: (y: number) => number): (d: { __y: number | null }) => boolean {
-  return (d) => d.__y !== null && Number.isFinite(scale(d.__y))
-}

package/src/charts/sparklines/BarSparkline.tsx

@@ -1,94 +0,0 @@
-import { scaleLinear } from '@visx/scale'
-import { useMemo } from 'react'
-import type { BasaltProps } from '../../common/props'
-import { VX } from '../../tokens'
-
-export type BarSparklineProps = BasaltProps & {
-  data: number[]
-  width: number
-  height: number
-  color?: string
-  /**
-   * Gap between two bars, in px. `1` is the shipped look; `2` at ~10 bars reads as a discrete series
-   * rather than a histogram, which is the KPI-card treatment.
-   *
-   * @default 1
-   */
-  barGap?: number
-  /**
-   * Bar corner radius, in px. `0` is the shipped look.
-   *
-   * @default 0
-   */
-  barRadius?: number
-  /**
-   * Paints the LAST bar in `emphasisColor` at full opacity — "this is where the series ends", the
-   * one reading a trend beside a KPI value is actually for. Off by default: a chart that means
-   * something by its final point must say so.
-   *
-   * @default false
-   */
-  emphasizeLast?: boolean
-  /** The emphasised bar's fill. @default `VX.accent` */
-  emphasisColor?: string
-  /** Accessible text alternative, applied as `aria-label` (+ `role="img"`) on the `<svg>`. */
-  ariaLabel?: string
-}
-
-/** Quiet inline bar trend — defaults to `VX.faint`, matching the sparkline family's restrained
- * identity (docs/DESIGN-SPEC.md §5). Every geometry option below defaults to the shipped look, so
- * an existing call site renders byte-identically. */
-export function BarSparkline({
-  data,
-  width,
-  height,
-  color,
-  barGap = 1,
-  barRadius = 0,
-  emphasizeLast = false,
-  emphasisColor,
-  ariaLabel,
-  className,
-  style,
-}: BarSparklineProps) {
-  const fillColor = color ?? VX.faint
-  const lastColor = emphasisColor ?? VX.accent
-  const a11yProps = ariaLabel !== undefined ? { role: 'img' as const, 'aria-label': ariaLabel } : {}
-
-  const yScale = useMemo(() => {
-    const max = Math.max(...data.filter((v) => isFinite(v)), 1)
-    return scaleLinear<number>({ domain: [0, max], range: [0, height] })
-  }, [data, height])
-
-  const rootProps = {
-    ...(className !== undefined && { className }),
-    ...(style !== undefined && { style }),
-  }
-
-  if (!data.length) return <svg width={width} height={height} {...rootProps} {...a11yProps} />
-
-  const step = width / data.length
-  const barWidth = Math.max(step - barGap, 1)
-  const lastIndex = data.length - 1
-
-  return (
-    <svg width={width} height={height} {...rootProps} {...a11yProps}>
-      {data.map((v, i) => {
-        const bh = Math.max(yScale(Math.max(v, 0)), 0)
-        const isLast = emphasizeLast && i === lastIndex
-        return (
-          <rect
-            key={i}
-            x={i * step}
-            y={height - bh}
-            width={barWidth}
-            height={bh}
-            {...(barRadius > 0 && { rx: barRadius })}
-            fill={isLast ? lastColor : fillColor}
-            fillOpacity={isLast ? 1 : 0.75}
-          />
-        )
-      })}
-    </svg>
-  )
-}

package/src/charts/sparklines/LineSparkline.tsx

@@ -1,71 +0,0 @@
-import { curveMonotoneX } from '@visx/curve'
-import { Group } from '@visx/group'
-import { scaleLinear } from '@visx/scale'
-import { LinePath } from '@visx/shape'
-import { useMemo } from 'react'
-import type { BasaltProps } from '../../common/props'
-import { VX } from '../../tokens'
-
-export type LineSparklineProps = BasaltProps & {
-  data: number[]
-  width: number
-  height: number
-  color?: string
-  /** Accessible text alternative, applied as `aria-label` (+ `role="img"`) on the `<svg>`. */
-  ariaLabel?: string
-}
-
-/**
- * Quiet single-hue trend line (docs/DESIGN-SPEC.md §5: "single 1.6px faint line, no fill, no
- * axes, no dots"). Sparklines default to `VX.faint`, not the bolder `VX.line` used by full charts.
- */
-export function LineSparkline({
-  data,
-  width,
-  height,
-  color,
-  ariaLabel,
-  className,
-  style,
-}: LineSparklineProps) {
-  const strokeColor = color ?? VX.faint
-  const a11yProps = ariaLabel !== undefined ? { role: 'img' as const, 'aria-label': ariaLabel } : {}
-
-  const xScale = useMemo(
-    () => scaleLinear<number>({ domain: [0, Math.max(data.length - 1, 1)], range: [0, width] }),
-    [data.length, width],
-  )
-
-  const yScale = useMemo(() => {
-    const vals = data.filter((v) => isFinite(v))
-    if (!vals.length) return scaleLinear<number>({ domain: [0, 1], range: [height, 0] })
-    const min = Math.min(...vals)
-    const max = Math.max(...vals)
-    const pad = (max - min) * 0.1 || 1
-    return scaleLinear<number>({ domain: [min - pad, max + pad], range: [height, 0] })
-  }, [data, height])
-
-  const rootProps = {
-    ...(className !== undefined && { className }),
-    ...(style !== undefined && { style }),
-  }
-
-  if (data.length < 2) return <svg width={width} height={height} {...rootProps} {...a11yProps} />
-
-  const indexed = data.map((v, i) => ({ v, i }))
-
-  return (
-    <svg width={width} height={height} {...rootProps} {...a11yProps}>
-      <Group>
-        <LinePath<{ v: number; i: number }>
-          data={indexed}
-          x={(d) => xScale(d.i)}
-          y={(d) => yScale(d.v)}
-          stroke={strokeColor}
-          strokeWidth={1.6}
-          curve={curveMonotoneX}
-        />
-      </Group>
-    </svg>
-  )
-}

package/src/charts/sparklines/index.ts

@@ -1,2 +0,0 @@
-export { LineSparkline, type LineSparklineProps } from './LineSparkline'
-export { BarSparkline, type BarSparklineProps } from './BarSparkline'

package/src/charts/theme.tsx

@@ -1,53 +0,0 @@
-import { createContext, useContext, useMemo } from 'react'
-import type { ReactNode } from 'react'
-
-type ColorScheme = 'light' | 'dark'
-
-export type VxTheme = {
-  colorScheme: ColorScheme
-  line: string
-  line2: string
-  axis: string
-  axisStroke: string
-  tooltipBg: string
-  tooltipText: string
-  tooltipMuted: string
-  tooltipBorder: string
-  tooltipShadow: string
-}
-
-/**
- * Theme-resolved neutrals are now CSS custom properties (see the token layer). They resolve per
- * Mantine color scheme in CSS, so these are static var refs — the provider keeps `colorScheme`
- * only for any non-color branching a chart may need.
- */
-const REFS = {
-  line: 'var(--vx-line)',
-  line2: 'var(--vx-line2)',
-  axis: 'var(--vx-axis)',
-  axisStroke: 'var(--vx-axis-stroke)',
-  tooltipBg: 'var(--vx-tooltip-bg)',
-  tooltipText: 'var(--vx-tooltip-text)',
-  tooltipMuted: 'var(--vx-tooltip-muted)',
-  tooltipBorder: 'var(--vx-tooltip-border)',
-  tooltipShadow: 'var(--vx-tooltip-shadow)',
-} as const
-
-const VxThemeContext = createContext<VxTheme | null>(null)
-
-export function VxThemeProvider({
-  colorScheme,
-  children,
-}: {
-  colorScheme: ColorScheme
-  children: ReactNode
-}) {
-  const value = useMemo<VxTheme>(() => ({ colorScheme, ...REFS }), [colorScheme])
-  return <VxThemeContext.Provider value={value}>{children}</VxThemeContext.Provider>
-}
-
-export function useVxTheme(): VxTheme {
-  const ctx = useContext(VxThemeContext)
-  if (!ctx) throw new Error('useVxTheme must be used inside <VxThemeProvider>')
-  return ctx
-}

package/src/charts/utils/domain.ts

@@ -1,41 +0,0 @@
-/**
- * Auto y-domain lower-bound padding — shared by every `yAutoMinCeil`/`autoMinCeil` idiom across
- * the kinds (MultiLine, ZonedLine, Bars' left/right axes).
- *
- * The lower bound must always pad AWAY from the data (`lower <= candidate`), never toward it —
- * a naive `candidate * pad` clips data whenever `candidate` is positive (padding a positive floor
- * UP moves it toward, and past, the data minimum). This is exactly the `yAutoMinCeil={Infinity}`
- * ("no forced zero baseline") idiom: `candidate` becomes the raw data minimum, which is usually
- * positive (e.g. a body-weight series bottoming out at 78), and the old multiplicative pad shoved
- * the axis floor above it.
- *
- * `candidate` is the caller's `Math.min(dataMin, ceil)` — the ceiling has already been applied.
- *  - `candidate === 0` (the common default-zero-baseline case: positive-only data with the
- *    default `ceil = 0`) stays exactly 0 — never pushed negative.
- *  - `candidate > 0` divides by `pad`, moving the floor DOWN toward (and below) the candidate.
- *  - `candidate < 0` multiplies by `pad`, moving the floor further DOWN (more negative) — the
- *    pre-existing, still-correct behavior for genuinely negative-swinging metrics.
- */
-export function padAutoLower(candidate: number, pad: number): number {
-  if (candidate === 0) return 0
-  return candidate > 0 ? candidate / pad : candidate * pad
-}
-
-/**
- * Auto y-domain upper-bound padding — the exact mirror of {@link padAutoLower}, sharing its
- * sign-safety: pad AWAY from zero (`upper >= candidate`), never toward it. `candidate` is the
- * caller's `Math.max(dataMax, floor)` — the `autoMaxFloor` clamp has already been applied, so
- * padding runs AFTER the floor, not before it. Applying the floor post-pad (the pre-existing bug)
- * lands a floored axis top exactly on the floor value with zero headroom — a target line pinned to
- * that floor then sits glued to the plot edge instead of getting the same breathing room every
- * other bound gets.
- *
- *  - `candidate === 0` stays exactly 0 — never pushed positive.
- *  - `candidate > 0` multiplies by `pad`, moving the ceiling further UP (away from zero).
- *  - `candidate < 0` divides by `pad`, moving the ceiling UP toward (and past) zero — the mirror of
- *    `padAutoLower`'s `candidate > 0` branch.
- */
-export function padAutoUpper(candidate: number, pad: number): number {
-  if (candidate === 0) return 0
-  return candidate > 0 ? candidate * pad : candidate / pad
-}

package/src/charts/utils/format.ts

@@ -1,19 +0,0 @@
-/**
- * Re-export shim. The implementation moved to `basalt-ui/format` (C5 consolidation, so
- * `money`/`percent`/`duration`/`clock`/… and the chart formatters share one implementation
- * instead of two). This file stays so every existing relative import inside `src/charts/**`
- * (`../utils/format`) keeps resolving unchanged.
- */
-export {
-  fmtAxisDate,
-  fmtTooltipDate,
-  fmtCompact,
-  type FmtCompactOptions,
-  fmtPercent,
-  type FmtPercentOptions,
-  fmtCurrency,
-  type FmtCurrencyOptions,
-  fmtInt,
-  formatters,
-  NON_FINITE,
-} from '../../format'

package/src/charts/utils/measure-text.ts

@@ -1,109 +0,0 @@
-/**
- * Text measurement for chart layout — the input to {@link autoMargin}.
- *
- * A static margin token cannot know how wide a tick label is, which is why charts used to have to be
- * hand-nudged whenever a label grew (`docs/CHARTS-SPEC.md` §1). This measures the strings that
- * will actually be painted, via an OFFSCREEN canvas 2D context: no element is attached, so there
- * is no layout thrash and no reflow — unlike an SVG `getBBox()` probe.
- *
- * Mantine-free and dependency-free by construction (`charts/**` boundary).
- */
-
-/** Fallback advance width per character, as a fraction of the font size, when no DOM is
- * available (SSR, `renderToStaticMarkup`). Mono faces sit near 0.6em; being deterministic matters
- * more than being exact, since the measured value is only ever a floor-raiser. */
-const FALLBACK_CHAR_RATIO = 0.6
-
-/** Last-resort family when the `--basalt-font-mono` custom property cannot be read. */
-const FALLBACK_MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace'
-
-/**
- * Cap on the memo table. Tick labels are low-cardinality per chart, but a long-lived SPA with a
- * live counter or currency axis mints a new string every update, and an unbounded module-level Map
- * would then grow for the life of the tab. On overflow the whole table is dropped rather than
- * evicted one by one: the working set is tiny and re-measuring it costs microseconds, so an LRU's
- * bookkeeping would cost more than the misses it avoids.
- */
-const CACHE_LIMIT = 2000
-
-const cache = new Map<string, number>()
-
-let ctx: CanvasRenderingContext2D | null | undefined
-let monoFamily: string | undefined
-
-function canvasContext(): CanvasRenderingContext2D | null {
-  if (ctx !== undefined) return ctx
-  if (typeof document === 'undefined') {
-    ctx = null
-    return ctx
-  }
-  ctx = document.createElement('canvas').getContext('2d')
-  // Webfonts swap in after first paint; measurements taken against the fallback face would then
-  // be stale (usually too narrow). Drop the cache once, when the real faces are ready.
-  // `?.` on every hop: a non-browser DOM harness can expose `document` with no `fonts`, or a
-  // `fonts` with no `ready` — neither is a reason to fail a measurement.
-  document.fonts?.ready?.then?.(() => cache.clear()).catch(() => {})
-  return ctx
-}
-
-/**
- * The resolved value of `--basalt-font-mono` — canvas needs a concrete family list, it cannot
- * resolve a CSS custom property. Read once from the document element.
- */
-export function monoFontFamily(): string {
-  if (monoFamily !== undefined) return monoFamily
-  if (typeof document === 'undefined' || typeof getComputedStyle !== 'function') {
-    monoFamily = FALLBACK_MONO
-    return monoFamily
-  }
-  const value = getComputedStyle(document.documentElement)
-    .getPropertyValue('--basalt-font-mono')
-    .trim()
-  monoFamily = value.length > 0 ? value : FALLBACK_MONO
-  return monoFamily
-}
-
-/**
- * Width in px of `text` at `fontPx` in the chart tick font. Memoized per `font|text` — a chart
- * re-measures the same ~10 tick labels on every resize, and the cache turns that into a Map hit.
- */
-export function measureText(text: string, fontPx: number, fontFamily?: string): number {
-  const family = fontFamily ?? monoFontFamily()
-  const font = `${fontPx}px ${family}`
-  const key = `${font}|${text}`
-  const hit = cache.get(key)
-  if (hit !== undefined) return hit
-
-  const c = canvasContext()
-  let width: number
-  if (c === null) {
-    width = text.length * fontPx * FALLBACK_CHAR_RATIO
-  } else {
-    c.font = font
-    width = c.measureText(text).width
-  }
-  if (cache.size >= CACHE_LIMIT) cache.clear()
-  cache.set(key, width)
-  return width
-}
-
-/** Widest of `texts` at `fontPx`. Returns 0 for an empty list. */
-export function maxTextWidth(
-  texts: readonly string[],
-  fontPx: number,
-  fontFamily?: string,
-): number {
-  let max = 0
-  for (const text of texts) {
-    const width = measureText(text, fontPx, fontFamily)
-    if (width > max) max = width
-  }
-  return max
-}
-
-/** Test seam — drops the memo table (and the resolved family) so a test can change fonts. */
-export function resetTextMetrics(): void {
-  cache.clear()
-  ctx = undefined
-  monoFamily = undefined
-}