basalt-ui 1.15.0 → 1.17.0

package/src/charts/kinds/StackedArea.test.tsx

@@ -0,0 +1,114 @@
+/**
+ * `StackedArea` — the `formatX` seam forwarded to `CartesianChart` (parity with the other
+ * `CartesianChart`-composing kinds). SSR harness, no hover needed.
+ */
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ChartCursorScope } from '../cursor/scope'
+import { CartesianChart } from '../primitives/CartesianChart'
+import { StackedArea } from './StackedArea'
+import type { ChartSeries } from '../series'
+
+type Row = { date: string; a: number; b: number }
+
+const rows: Row[] = [
+  { date: '2026-08-01', a: 10, b: 4 },
+  { date: '2026-08-02', a: 12, b: 6 },
+]
+
+const series: ChartSeries<Row>[] = [
+  { key: 'a', label: 'A', color: '#111', mark: 'area', getValue: (d) => d.a },
+  { key: 'b', label: 'B', color: '#222', mark: 'area', getValue: (d) => d.b },
+]
+
+describe('StackedArea — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const html = renderToStaticMarkup(
+      <StackedArea<Row>
+        data={rows}
+        chartId="sa-formatx"
+        getX={(d) => d.date}
+        series={series}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(html).toContain('X:2026-08-01')
+    expect(html).not.toContain('>01.08<')
+  })
+
+  test('omitting formatX keeps the default DD.MM rendering', () => {
+    const html = renderToStaticMarkup(
+      <StackedArea<Row> data={rows} chartId="sa-default" getX={(d) => d.date} series={series} />,
+    )
+    expect(html).toContain('>01.08<')
+  })
+})
+
+describe('StackedArea — cursorResolution threads through to sibling resolution', () => {
+  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a StackedArea sibling
+  // folded into 2 weekly buckets keyed by each week's leading day (Aug 01, Aug 08) — parity with
+  // `Bars.test.tsx`'s equivalent block. Proves the prop reaches THIS kind, not just
+  // `CartesianChart` (a kind dropping the forward would silently fall back to 'nearest').
+  type DailyRow = { date: string; v: number }
+
+  const dailyRows: DailyRow[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    v: i,
+  }))
+  const foldedRows: Row[] = [
+    { date: '2026-08-01', a: 0, b: 0 },
+    { date: '2026-08-08', a: 1, b: 1 },
+  ]
+  const dailySeries: ChartSeries<DailyRow>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+  const foldedSeries: ChartSeries<Row>[] = [
+    { key: 'a', label: 'A', color: '#111', mark: 'area', getValue: (d) => d.a },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<DailyRow>
+          data={dailyRows}
+          chartId="sa-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <StackedArea<Row>
+          data={foldedRows}
+          chartId="sa-folded"
+          getX={(d) => d.date}
+          series={foldedSeries}
+          ariaLabel="Folded"
+          {...(cursorResolution !== undefined && { cursorResolution })}
+        />
+      </ChartCursorScope>,
+    )
+  }
+
+  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
+  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
+  function driveDailyToAug05() {
+    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
+    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
+  }
+
+  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
+    renderPair('leading')
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+
+  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
+    renderPair()
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
+  })
+})

package/src/charts/kinds/StackedArea.tsx

@@ -1,6 +1,7 @@
 import { curveMonotoneX } from '@visx/curve'
 import { AreaStack } from '@visx/shape'
 import { memo, useCallback, useMemo } from 'react'
+import type { CursorResolution } from '../cursor/resolve'
 import { CartesianChart } from '../primitives/CartesianChart'
 import type { AxisConfig, PlotContext } from '../primitives/CartesianChart'
 import type { ChartLegendConfig, ChartSeries } from '../series'
@@ -21,6 +22,14 @@ export type StackedAreaProps<T> = {
   y?: AxisConfig<T>
   /** X tick count override. Default: as many as fit. */
   xTicks?: number
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
+  formatX?: (key: string) => string
+  /**
+   * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
+   * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
+   * keyed by its Monday) — see `CursorResolution`.
+   */
+  cursorResolution?: CursorResolution
   /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
@@ -44,7 +53,20 @@ export type StackedAreaProps<T> = {
  * to restore the original bottom-to-top stacking order for `AreaStack`'s `keys`.
  */
 function StackedAreaInner<T>(props: StackedAreaProps<T>) {
-  const { data, chartId, getX, series, y, xTicks, height, legend, ariaLabel, isPending } = props
+  const {
+    data,
+    chartId,
+    getX,
+    series,
+    y,
+    xTicks,
+    formatX,
+    cursorResolution,
+    height,
+    legend,
+    ariaLabel,
+    isPending,
+  } = props
 
   // The plotted quantity is the CUMULATIVE stack top, not any one series' value — the built-in
   // 'auto' domain (per-series max) would clip a multi-band stack. Skipped when the caller already
@@ -99,6 +121,8 @@ function StackedAreaInner<T>(props: StackedAreaProps<T>) {
       y={yConfig}
       cursorValue={stackedCursorValue}
       {...(xTicks !== undefined && { xTicks })}
+      {...(formatX !== undefined && { formatX })}
+      {...(cursorResolution !== undefined && { cursorResolution })}
       {...(height !== undefined && { height })}
       {...(legend !== undefined && { legend })}
       {...(ariaLabel !== undefined && { ariaLabel })}

package/src/charts/kinds/ZonedLine.test.tsx

@@ -0,0 +1,147 @@
+/**
+ * `ZonedLine` — the `strokeOpacity` wiring: `primary.strokeOpacity ?? 1`. SSR harness (no hover
+ * needed), same pattern as `CartesianChart.test.tsx`'s `nice` assertions.
+ */
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ChartCursorScope } from '../cursor/scope'
+import { CartesianChart } from '../primitives/CartesianChart'
+import { ZonedLine } from './ZonedLine'
+import type { ChartSeries } from '../series'
+
+type Row = { date: string; v: number }
+
+const rows: Row[] = [
+  { date: '2026-08-01', v: 10 },
+  { date: '2026-08-02', v: 12 },
+]
+
+describe('ZonedLine — series.strokeOpacity dims the plotted stroke', () => {
+  test('the line path carries the configured stroke-opacity attribute', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#654321',
+        mark: 'line',
+        getValue: (d) => d.v,
+        strokeOpacity: 0.5,
+      },
+    ]
+
+    const html = renderToStaticMarkup(
+      <ZonedLine<Row> data={rows} chartId="zl-opacity" getX={(d) => d.date} series={series} />,
+    )
+
+    expect(html).toContain('stroke="#654321"')
+    expect(html).toContain('stroke-opacity="0.5"')
+  })
+})
+
+describe('ZonedLine — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const series: ChartSeries<Row>[] = [
+      { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+    ]
+    const html = renderToStaticMarkup(
+      <ZonedLine<Row>
+        data={rows}
+        chartId="zl-formatx"
+        getX={(d) => d.date}
+        series={series}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(html).toContain('X:2026-08-01')
+    expect(html).not.toContain('>01.08<')
+  })
+})
+
+describe('ZonedLine — tooltip.formatHeader', () => {
+  test('overrides the tooltip header date text', async () => {
+    const series: ChartSeries<Row>[] = [
+      { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+    ]
+    render(
+      <ZonedLine<Row>
+        data={rows}
+        chartId="zl-formatheader"
+        getX={(d) => d.date}
+        series={series}
+        tooltip={{ formatHeader: (key) => `hdr:${key}` }}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(await screen.findByText('hdr:2026-08-01')).toBeTruthy()
+  })
+})
+
+describe('ZonedLine — cursorResolution threads through to sibling resolution', () => {
+  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a ZonedLine sibling folded
+  // into 2 weekly buckets keyed by each week's leading day (Aug 01, Aug 08) — parity with
+  // `Bars.test.tsx`'s equivalent block. Proves the prop reaches THIS kind, not just
+  // `CartesianChart` (a kind dropping the forward would silently fall back to 'nearest').
+  const dailyRows: Row[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    v: i,
+  }))
+  const foldedRows: Row[] = [
+    { date: '2026-08-01', v: 0 },
+    { date: '2026-08-08', v: 1 },
+  ]
+  const dailySeries: ChartSeries<Row>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+  const foldedSeries: ChartSeries<Row>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<Row>
+          data={dailyRows}
+          chartId="zl-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <ZonedLine<Row>
+          data={foldedRows}
+          chartId="zl-folded"
+          getX={(d) => d.date}
+          series={foldedSeries}
+          ariaLabel="Folded"
+          {...(cursorResolution !== undefined && { cursorResolution })}
+        />
+      </ChartCursorScope>,
+    )
+  }
+
+  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
+  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
+  function driveDailyToAug05() {
+    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
+    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
+  }
+
+  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
+    renderPair('leading')
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+
+  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
+    renderPair()
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
+  })
+})

package/src/charts/kinds/ZonedLine.tsx

@@ -2,6 +2,7 @@ import { curveMonotoneX } from '@visx/curve'
 import { AreaClosed, LinePath } from '@visx/shape'
 import { Threshold } from '@visx/threshold'
 import { memo, useMemo } from 'react'
+import type { CursorResolution } from '../cursor/resolve'
 import { AreaGradient, areaFillUrl } from '../primitives/AreaGradient'
 import type { CartesianTooltipConfig, AxisConfig, PlotContext } from '../primitives/CartesianChart'
 import { CartesianChart } from '../primitives/CartesianChart'
@@ -51,6 +52,14 @@ export type ZonedLineProps<T> = {
   refLines?: ZonedLineRefLine[]
   /** Exact number of x ticks. Default: as many as fit. */
   xTicks?: number
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
+  formatX?: (key: string) => string
+  /**
+   * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
+   * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
+   * keyed by its Monday) — see `CursorResolution`.
+   */
+  cursorResolution?: CursorResolution
   /** Tooltip config — `label` for a right-aligned header badge (e.g. zone name with zone color),
    * `extraRows` for rows appended after the derived row. `false` disables the tooltip entirely. */
   tooltip?: CartesianTooltipConfig<T> | false
@@ -110,6 +119,8 @@ function ZonedLineInner<T>(props: ZonedLineProps<T>) {
     thresholds,
     refLines,
     xTicks,
+    formatX,
+    cursorResolution,
     tooltip,
     areaFill,
     height,
@@ -140,6 +151,8 @@ function ZonedLineInner<T>(props: ZonedLineProps<T>) {
       {...(xZones !== undefined && { xZones })}
       {...(refLines !== undefined && { refLines })}
       {...(xTicks !== undefined && { xTicks })}
+      {...(formatX !== undefined && { formatX })}
+      {...(cursorResolution !== undefined && { cursorResolution })}
       {...(tooltip !== undefined && { tooltip })}
       {...(height !== undefined && { height })}
       {...(legend !== undefined && { legend })}
@@ -228,6 +241,7 @@ function ZonedLineMarks<T>({
           stroke={primary.color}
           strokeWidth={primary.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH}
           strokeDasharray={primary.dash === 'dashed' ? VX.dashArray : undefined}
+          strokeOpacity={primary.strokeOpacity ?? 1}
           curve={curveMonotoneX}
         />
       )}

package/src/charts/primitives/CartesianChart.test.tsx

@@ -0,0 +1,269 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ChartCursorScope } from '../cursor/scope'
+import type { ChartSeries } from '../series'
+import { CartesianChart, resolveAxisDomain } from './CartesianChart'
+
+type Row = { date: string; a: number; b: number }
+
+const rows: Row[] = [
+  { date: '2026-08-01', a: 10, b: 4 },
+  { date: '2026-08-02', a: 40, b: 6 },
+  { date: '2026-08-03', a: 25, b: 5 },
+]
+
+const seriesFor = (key: 'a' | 'b'): ChartSeries<Row> => ({
+  key,
+  label: key,
+  color: '#000',
+  mark: 'line',
+  getValue: (d) => d[key],
+})
+
+const both = [seriesFor('a'), seriesFor('b')]
+
+describe('resolveAxisDomain', () => {
+  test('a fixed tuple passes through untouched', () => {
+    expect(resolveAxisDomain({ domain: [0, 100] }, rows, both)).toEqual([0, 100])
+  })
+
+  test('auto pads the upper bound away from zero and keeps the zero baseline', () => {
+    const [min, max] = resolveAxisDomain(undefined, rows, both)
+    expect(min).toBe(0)
+    expect(max).toBeCloseTo(44, 5)
+  })
+
+  test('auto over an ALL-NEGATIVE series keeps the largest value inside the plot', () => {
+    // `max * pad` would push the upper bound to -5.5, i.e. below the largest datum, clipping it.
+    const negative: ChartSeries<Row>[] = [
+      { ...seriesFor('a'), getValue: (d) => -d.a },
+      { ...seriesFor('b'), getValue: (d) => -d.b },
+    ]
+    const [min, max] = resolveAxisDomain({ autoMinCeil: Infinity }, rows, negative)
+    expect(max).toBeGreaterThanOrEqual(-4)
+    expect(min).toBeLessThanOrEqual(-40)
+  })
+
+  test('autoMaxFloor raises a low upper bound, then pads it (mirrors autoMinCeil)', () => {
+    // The floor clamps the RAW upper bound first (44 -> 500), padding applies after: 500 * 1.1.
+    const [, max] = resolveAxisDomain({ autoMaxFloor: 500 }, rows, both)
+    expect(max).toBeCloseTo(550, 5)
+  })
+
+  test('autoMaxFloor at exactly the padded case (dataMax 3.2, pad 1.1, floor 6) yields 6.6', () => {
+    const single: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: () => 3.2 }]
+    const [, max] = resolveAxisDomain({ autoMaxFloor: 6, autoPad: 1.1 }, rows, single)
+    expect(max).toBeCloseTo(6.6, 5)
+  })
+
+  test('autoMaxFloor and autoMinCeil pad symmetrically — both clamp first, pad second', () => {
+    // Upper: floor 6 clamps 3.2 -> 6, then pads to 6.6 (multiply, away from zero).
+    const positive: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: () => 3.2 }]
+    const [, max] = resolveAxisDomain({ autoMaxFloor: 6, autoPad: 1.1 }, rows, positive)
+    expect(max).toBeCloseTo(6.6, 5)
+    // Lower: ceil -6 clamps -3.2 -> -6, then pads to -6.6 (multiply, away from zero) — the mirror.
+    const negative: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: () => -3.2 }]
+    const [min] = resolveAxisDomain({ autoMinCeil: -6, autoPad: 1.1 }, rows, negative)
+    expect(min).toBeCloseTo(-6.6, 5)
+  })
+
+  test('the domain follows the VISIBLE series — hiding the tall one shrinks the axis', () => {
+    const [, withBoth] = resolveAxisDomain(undefined, rows, both)
+    const [, onlyB] = resolveAxisDomain(undefined, rows, [seriesFor('b')])
+    expect(onlyB).toBeLessThan(withBoth)
+  })
+
+  test('a domain function receives the data AND the visible series', () => {
+    const domain = resolveAxisDomain(
+      { domain: (data, visible) => [0, data.length * visible.length] },
+      rows,
+      both,
+    )
+    expect(domain).toEqual([0, 6])
+  })
+
+  test('empty data falls back to a usable unit domain', () => {
+    expect(resolveAxisDomain(undefined, [], both)).toEqual([0, 1])
+  })
+})
+
+describe('resolveAxisDomain — autoMaxFloor composed with an all-negative series', () => {
+  // getValue -> -d.a - 20 over rows a=[10, 40, 25] yields [-30, -60, -45]: data max is -30, data
+  // min is -60 — deliberately NOT a flat series, so this exercises the real clamp-then-pad path
+  // rather than the degenerate flat-collapse branch covered separately below.
+  const allNegative: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: (d) => -d.a - 20 }]
+
+  test('a floor above the data max clamps to the floor, then pads TOWARD zero', () => {
+    const [, max] = resolveAxisDomain({ autoMaxFloor: -10 }, rows, allNegative)
+    // clamp: Math.max(-30, -10) = -10; padAutoUpper divides for a negative candidate (toward zero).
+    expect(max).toBeCloseTo(-10 / 1.1, 10)
+  })
+
+  test('without a floor, the existing all-negative behavior is unchanged', () => {
+    const [, max] = resolveAxisDomain(undefined, rows, allNegative)
+    // no floor -> candidate stays the raw data max, -30.
+    expect(max).toBeCloseTo(-30 / 1.1, 10)
+  })
+
+  test('autoMaxFloor / autoMinCeil clamp-then-pad symmetrically through resolveAxisDomain', () => {
+    // Mirror series: same magnitudes, positive instead of negative (data min 30, not data max -30).
+    const allPositive: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: (d) => d.a + 20 }]
+    const [, maxFromFloor] = resolveAxisDomain({ autoMaxFloor: -10 }, rows, allNegative)
+    const [minFromCeil] = resolveAxisDomain({ autoMinCeil: 10 }, rows, allPositive)
+    expect(maxFromFloor).toBeCloseTo(-minFromCeil, 10)
+  })
+})
+
+describe('resolveAxisDomain — overlay bounds', () => {
+  test('a zone past the data stretches the axis instead of clipping', () => {
+    const [, max] = resolveAxisDomain(undefined, rows, both, [0, 200])
+    expect(max).toBeGreaterThanOrEqual(200)
+  })
+
+  test('a reference line below the data lowers the floor', () => {
+    const [min] = resolveAxisDomain({ autoMinCeil: Infinity }, rows, both, [-30])
+    expect(min).toBeLessThanOrEqual(-30)
+  })
+
+  test('infinite bounds ("top/bottom of axis") are ignored, not blown up', () => {
+    const plain = resolveAxisDomain(undefined, rows, both)
+    expect(resolveAxisDomain(undefined, rows, both, [-Infinity, Infinity])).toEqual(plain)
+  })
+})
+
+describe('resolveAxisDomain — degenerate input', () => {
+  test('a flat all-zero series still gets a usable axis, not a zero-extent scale', () => {
+    const flat: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: () => 0 }]
+    const [min, max] = resolveAxisDomain(undefined, rows, flat)
+    expect(max).toBeGreaterThan(min)
+  })
+
+  test('a flat non-zero series is not collapsed onto its own value', () => {
+    const flat: ChartSeries<Row>[] = [{ ...seriesFor('a'), getValue: () => 7 }]
+    const [min, max] = resolveAxisDomain({ autoMinCeil: Infinity }, rows, flat)
+    expect(max).toBeGreaterThan(min)
+  })
+})
+
+describe('AxisConfig.nice — threaded to BOTH the probe and the real scale', () => {
+  // A fixed, deliberately non-round domain: d3's `.ticks()` never produces a tick past the raw
+  // domain max (95.7) without `nice`, but WITH `nice` the scale first rounds its domain outward
+  // (e.g. to 100), so a tick at "100" can only appear on the `nice: true` render.
+  function renderChart(nice: boolean): string {
+    return renderToStaticMarkup(
+      <CartesianChart<Row>
+        data={rows}
+        chartId="nice-test"
+        getX={(d) => d.date}
+        series={[seriesFor('a')]}
+        y={{ domain: [0, 95.7], ticks: 5, format: (v) => String(v), nice }}
+      >
+        {() => null}
+      </CartesianChart>,
+    )
+  }
+
+  test('nice: false never paints a tick past the raw domain max', () => {
+    expect(renderChart(false)).not.toContain('>100<')
+  })
+
+  test('nice: true rounds the scale outward — a tick beyond the raw domain max appears', () => {
+    expect(renderChart(true)).toContain('>100<')
+  })
+})
+
+describe('cursorResolution — threads through to sibling resolution (CartesianChart)', () => {
+  // Daily calendar Aug 01–14, plus a sibling folded into 2 weekly buckets keyed by each week's
+  // leading day (Aug 01, Aug 08) — the exact shape of the playground's "Weekly digest" pairing.
+  const dailyRows: Row[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    a: i,
+    b: i,
+  }))
+  const foldedRows: Row[] = [
+    { date: '2026-08-01', a: 0, b: 0 },
+    { date: '2026-08-08', a: 1, b: 1 },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<Row>
+          data={dailyRows}
+          chartId="daily"
+          getX={(d) => d.date}
+          series={[seriesFor('a')]}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <CartesianChart<Row>
+          data={foldedRows}
+          chartId="folded"
+          getX={(d) => d.date}
+          series={[seriesFor('a')]}
+          ariaLabel="Folded"
+          {...(cursorResolution !== undefined && { cursorResolution })}
+        >
+          {() => null}
+        </CartesianChart>
+      </ChartCursorScope>,
+    )
+  }
+
+  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (its midpoint is
+  // Aug 04) — via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
+  function driveDailyToAug05() {
+    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
+    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
+  }
+
+  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
+    renderPair('leading')
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    // Aug 05 is inside the Aug01-07 bucket — 'leading' must resolve to its leading key, Aug 01.
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+
+  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket — proves cursorResolution actually threads through, not just the resolver it wraps", () => {
+    renderPair()
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    // Aug 05 is closer to Aug 08 (distance 3) than Aug 01 (distance 4) — 'nearest' picks Aug 08.
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
+  })
+})
+
+describe('tooltip extraRows — ctx.visible/ctx.hidden track legend toggling', () => {
+  test('toggling a series off via its legend entry updates the ctx the row reads', async () => {
+    render(
+      <CartesianChart<Row>
+        data={rows}
+        chartId="extra-rows-ctx"
+        getX={(d) => d.date}
+        series={both}
+        tooltip={{
+          extraRows: (_d, ctx) => (
+            <div data-testid="extra-ctx">
+              visible:{ctx.visible.map((s) => s.key).join(',')}|hidden:
+              {[...ctx.hidden].join(',')}
+            </div>
+          ),
+        }}
+      >
+        {() => null}
+      </CartesianChart>,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect((await screen.findByTestId('extra-ctx')).textContent).toContain('visible:a,b|hidden:')
+
+    fireEvent.click(screen.getByRole('button', { name: 'b' }))
+
+    expect((await screen.findByTestId('extra-ctx')).textContent).toContain('visible:a|hidden:b')
+  })
+})