basalt-ui 1.16.0 → 1.17.0

package/src/charts/hooks/useChartCursor.ts

@@ -1,6 +1,7 @@
 import { localPoint } from '@visx/event'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { KeyboardEvent, PointerEvent } from 'react'
+import type { CursorResolution } from '../cursor/resolve'
 import { buildDomainIndex, resolveCursorPoint } from '../cursor/resolve'
 import { useCursorState, useCursorStore } from '../cursor/scope'
 
@@ -38,6 +39,7 @@ export function useChartCursor<T>({
   getKey,
   xScale,
   marginLeft,
+  resolution = 'nearest',
 }: {
   data: readonly T[]
   chartId: string
@@ -45,6 +47,12 @@ export function useChartCursor<T>({
   /** Own x scale — maps a domain key to a plot-local x offset. */
   xScale: (key: string) => number | undefined
   marginLeft: number
+  /**
+   * How a sibling's broadcast key resolves against this chart's own points. Default `'nearest'`
+   * (point domains). Pass `'leading'` when `getKey` returns a bucket's leading edge (a weekly
+   * series keyed by its Monday, a monthly series keyed by its 1st) — see {@link CursorResolution}.
+   */
+  resolution?: CursorResolution
 }): ChartCursor<T> {
   const store = useCursorStore()
   const cursor = useCursorState()
@@ -58,7 +66,10 @@ export function useChartCursor<T>({
   const xScaleRef = useRef(xScale)
   xScaleRef.current = xScale
 
-  const index = useMemo(() => buildDomainIndex(data, getKeyRef.current), [data])
+  const index = useMemo(
+    () => buildDomainIndex(data, getKeyRef.current, resolution),
+    [data, resolution],
+  )
 
   const frameRef = useRef<number | null>(null)
   const pendingRef = useRef<CursorAnchor | null>(null)

package/src/charts/index.ts

@@ -91,6 +91,7 @@ export { AreaGradient, areaFillUrl } from './primitives/AreaGradient'
 
 // ── Hooks ────────────────────────────────────────────────────────────────
 export { useChartCursor, type ChartCursor, type CursorAnchor } from './hooks/useChartCursor'
+export type { CursorResolution } from './cursor/resolve'
 export { useChartSize, type UseChartSizeResult, type ChartSize } from './hooks/useChartSize'
 
 // ── Utils ────────────────────────────────────────────────────────────────

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

@@ -8,6 +8,9 @@
  */
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { describe, expect, test } from 'bun:test'
+import { ChartCursorScope } from '../cursor/scope'
+import { CartesianChart } from '../primitives/CartesianChart'
+import type { ChartSeries } from '../series'
 import { Bars } from './Bars'
 import type { BarsBar } from './Bars'
 
@@ -89,6 +92,88 @@ describe('Bars — lines[].strokeOpacity dims the plotted stroke', () => {
   })
 })
 
+describe('Bars — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const { container } = render(
+      <Bars<Row>
+        data={rows}
+        chartId="bars-formatx"
+        getX={(d) => d.date}
+        getValue={(d, key) => d[key as 'shown' | 'quiet' | 'trend']}
+        positiveBars={[{ key: 'shown', label: 'Shown', color: '#111' }]}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(container.innerHTML).toContain('X:2026-08-01')
+  })
+})
+
+describe('Bars — cursorResolution threads through to sibling resolution', () => {
+  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a Bars 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. 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')}`,
+    shown: i,
+    quiet: i,
+    trend: i,
+  }))
+  const foldedRows: Row[] = [
+    { date: '2026-08-01', shown: 0, quiet: 0, trend: 0 },
+    { date: '2026-08-08', shown: 1, quiet: 1, trend: 1 },
+  ]
+  const dailySeries: ChartSeries<Row>[] = [
+    { key: 'shown', label: 'Shown', color: '#111', mark: 'line', getValue: (d) => d.shown },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<Row>
+          data={dailyRows}
+          chartId="bars-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <Bars<Row>
+          data={foldedRows}
+          chartId="bars-folded"
+          getX={(d) => d.date}
+          getValue={(d, key) => d[key as 'shown']}
+          positiveBars={[{ key: 'shown', label: 'Shown', color: '#111' }]}
+          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')
+  })
+})
+
 describe('BarsBar<T> — the `= unknown` default stays assignable', () => {
   test('an existing untyped BarsBar[] array is assignable to BarsBar<Row>[] contravariantly', () => {
     const bars: BarsBar[] = [{ key: 'shown', label: 'Shown', color: '#111' }]

package/src/charts/kinds/Bars.tsx

@@ -1,6 +1,7 @@
 import { curveMonotoneX } from '@visx/curve'
 import { LinePath } from '@visx/shape'
 import { memo, useMemo } from 'react'
+import type { CursorResolution } from '../cursor/resolve'
 import { VX } from '../../tokens'
 import type { ChartMargin } from '../../tokens'
 import { CartesianChart } from '../primitives/CartesianChart'
@@ -108,6 +109,14 @@ export type BarsProps<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
 
   /** `false` disables the tooltip entirely (and with it the crosshair dots). */
   tooltip?: CartesianTooltipConfig<T> | false
@@ -152,6 +161,8 @@ function BarsInner<T>(props: BarsProps<T>) {
     barLayout = 'stacked',
     barOpacity,
     xTicks,
+    formatX,
+    cursorResolution,
     tooltip,
     margin,
     legend,
@@ -269,6 +280,8 @@ function BarsInner<T>(props: BarsProps<T>) {
       y={yConfig}
       {...(y2 !== undefined && { y2 })}
       {...(xTicks !== undefined && { xTicks })}
+      {...(formatX !== undefined && { formatX })}
+      {...(cursorResolution !== undefined && { cursorResolution })}
       {...(zones !== undefined && { zones })}
       {...(mappedRefLines !== undefined && { refLines: mappedRefLines })}
       {...(height !== undefined && { height })}

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

@@ -9,6 +9,8 @@
 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 { DualPanel } from './DualPanel'
 import type { ChartSeries } from '../series'
 
@@ -96,6 +98,236 @@ describe('DualPanel — per-point getMarker rendering', () => {
   })
 })
 
+describe('DualPanel — getMarker fillOpacity/ring', () => {
+  test('ring: false omits the stroke; fillOpacity defaults 1 and honors an override', () => {
+    const markerRows: Row[] = [
+      { date: '2026-08-01', v: 10, bar: 0.02 },
+      { date: '2026-08-02', v: 12, bar: 0.03 },
+    ]
+    const markerSeries: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) =>
+          d.date === '2026-08-01'
+            ? { ring: false, fillOpacity: 0.7 }
+            : d.date === '2026-08-02'
+              ? {}
+              : null,
+      },
+    ]
+
+    const { container } = render(
+      <DualPanel<Row>
+        data={markerRows}
+        chartId="dp-marker-ring"
+        getX={(d) => d.date}
+        series={markerSeries}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+      />,
+    )
+
+    const circles = container.querySelectorAll('circle')
+    expect(circles).toHaveLength(2)
+    // ring: false — no stroke attribute at all.
+    expect(circles[0]?.getAttribute('stroke')).toBeNull()
+    expect(circles[0]?.getAttribute('fill-opacity')).toBe('0.7')
+    // default marker — unchanged punched-out ring + full opacity.
+    expect(circles[1]?.getAttribute('stroke')).not.toBeNull()
+    expect(circles[1]?.getAttribute('fill-opacity')).toBe('1')
+  })
+})
+
+describe('DualPanel — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const { container } = render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-formatx"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(container.innerHTML).toContain('X:2026-08-01')
+  })
+})
+
+describe('DualPanel — formatX reaches the margin measurement, not just the axis', () => {
+  test('a formatter that widens x labels narrows the plot rect — the gutter grows to fit it', () => {
+    function xLabelGutterWidth(formatX?: (key: string) => string): number {
+      const { container, unmount } = render(
+        <DualPanel<Row>
+          data={rows}
+          chartId="dp-margin"
+          getX={(d) => d.date}
+          series={series}
+          getBar={(d) => d.bar}
+          barLabel="Bar"
+          barColorPositive="#0a0"
+          barColorNegative="#a00"
+          formatTop={(v) => String(v)}
+          formatBottom={(v) => v.toFixed(2)}
+          {...(formatX !== undefined && { formatX })}
+        />,
+      )
+      // The transparent HoverOverlay rects are drawn at exactly `width={xMax}` — `plot.width` is
+      // fixed under this DOM harness (no ResizeObserver, so `ChartFrame` falls back to its
+      // `minWidth` floor), so a narrower `xMax` here can only mean a wider measured margin.
+      const overlay = container.querySelector('rect[fill="transparent"]')
+      const width = Number(overlay?.getAttribute('width'))
+      unmount()
+      return width
+    }
+
+    const defaultWidth = xLabelGutterWidth()
+    const widenedWidth = xLabelGutterWidth(
+      (key) => `Extremely Long Formatted Axis Label ${key} With Lots Of Extra Padding Text`,
+    )
+    expect(widenedWidth).toBeLessThan(defaultWidth)
+  })
+})
+
+describe('DualPanel — tooltip.formatHeader', () => {
+  test('overrides the tooltip header date text', async () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-formatheader"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        formatHeader={(key) => `hdr:${key}`}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(await screen.findByText('hdr:2026-08-01')).toBeTruthy()
+  })
+})
+
+describe('DualPanel — ariaLabel reaches the slider, not only the frame', () => {
+  test('both the outer group and the focusable slider carry the name', () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-arialabel"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        ariaLabel="Latency"
+      />,
+    )
+
+    // The bug was precisely that the label stopped at the frame — assert both carry it.
+    expect(screen.getByRole('group', { name: 'Latency' })).toBeTruthy()
+    expect(screen.getByRole('slider', { name: 'Latency' })).toBeTruthy()
+  })
+})
+
+describe('DualPanel — slider value attributes', () => {
+  test('aria-valuemax is always present; aria-valuenow/valuetext appear only once a point is hovered', () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-slider-values"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    expect(slider.getAttribute('aria-valuemax')).toBe('0')
+    expect(slider.hasAttribute('aria-valuenow')).toBe(false)
+    expect(slider.hasAttribute('aria-valuetext')).toBe(false)
+
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(slider.getAttribute('aria-valuenow')).toBe('0')
+    expect(slider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+})
+
+describe('DualPanel — aria-valuetext reflects formatX', () => {
+  test('a custom formatX also drives the hovered slider value text, not just the axis', () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-slider-formatx"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(slider.getAttribute('aria-valuetext')).toBe('X:2026-08-01')
+  })
+})
+
+describe('DualPanel — only the top overlay is keyboard-focusable', () => {
+  test('renders exactly one role="slider" element — the bottom overlay stays pointer-only', () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-one-slider"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+      />,
+    )
+
+    // Two focusable tab stops for one logical x-axis is exactly what the pointer-only bottom
+    // overlay exists to prevent — this fails the moment a future edit adds onKeyDown there too.
+    expect(screen.getAllByRole('slider')).toHaveLength(1)
+  })
+})
+
 describe('DualPanel — fixed bottomYDomain ships verbatim (un-niced)', () => {
   test('bottom axis ticks come from the pinned domain, not the computed max-abs', () => {
     // Data's max abs is 0.02 — an auto domain would never produce a "5.00" tick. Pinning
@@ -129,3 +361,81 @@ describe('DualPanel — formatBar overrides only the tooltip row', () => {
     expect(await screen.findByText('0.020 m/s (2026-08-01)')).toBeTruthy()
   })
 })
+
+describe('DualPanel — cursorResolution threads through to sibling resolution', () => {
+  // `DualPanel` composes `ChartFrame` + `useChartCursor` directly rather than `CartesianChart`, so
+  // its forward runs through a different path than every other kind — verify it here rather than
+  // assuming the `CartesianChart`-composing pattern (`Bars.test.tsx`) ports verbatim.
+  //
+  // `DualPanel` forwards `ariaLabel` onto its own keyboard overlay (parity with every other kind),
+  // so the resolved bucket can be read straight off `aria-valuetext` — mirrors
+  // `Bars.test.tsx`'s cursorResolution assertions.
+  type DailyRow = { date: string; shown: number }
+  type FoldedRow = { date: string; v: number; bar: number }
+
+  const dailyRows: DailyRow[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    shown: i,
+  }))
+  const foldedRows: FoldedRow[] = [
+    { date: '2026-08-01', v: 0, bar: 5 },
+    { date: '2026-08-08', v: 1, bar: -5 },
+  ]
+  const dailySeries: ChartSeries<DailyRow>[] = [
+    { key: 'shown', label: 'Shown', color: '#111', mark: 'line', getValue: (d) => d.shown },
+  ]
+  const foldedSeries: ChartSeries<FoldedRow>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<DailyRow>
+          data={dailyRows}
+          chartId="dp-cursor-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <DualPanel<FoldedRow>
+          data={foldedRows}
+          chartId="dp-cursor-folded"
+          getX={(d) => d.date}
+          series={foldedSeries}
+          getBar={(d) => d.bar}
+          barLabel="Bar"
+          barColorPositive="#0a0"
+          barColorNegative="#a00"
+          formatTop={(v) => String(v)}
+          formatBottom={(v) => v.toFixed(2)}
+          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/DualPanel.tsx

@@ -18,6 +18,7 @@ import { Crosshair, SeriesDot } from '../primitives/Crosshair'
 import { HoverOverlay } from '../primitives/HoverOverlay'
 import { ZoneRects } from '../primitives/ZoneRects'
 import type { ZoneSpec } from '../primitives/ZoneRects'
+import type { CursorResolution } from '../cursor/resolve'
 import { useChartCursor } from '../hooks/useChartCursor'
 import { autoMargin, probeAxisLabels } from '../layout/auto-margin'
 import { deriveTooltipRows, LINE_OVERLAY_STROKE_WIDTH } from '../series'
@@ -32,6 +33,15 @@ export type DualPanelProps<T> = {
   height?: number
   chartId: string
   getX: (d: T) => string
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM) — same default `CartesianChart` uses,
+   * so omitting it is byte-identical to today's rendering. */
+  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
   /** 1+ line series in the top pane — the single source of truth for color, dash, legend, and
    * tooltip rows. E.g. acute (solid) / chronic (dashed). */
   series: ChartSeries<T>[]
@@ -67,6 +77,13 @@ export type DualPanelProps<T> = {
   bottomMaxAbsFloor?: number
   /** Tooltip badge — appears at the right of the tooltip header. */
   tooltipLabel?: (d: T) => { text: string; color: string } | null
+  /**
+   * Overrides the tooltip header's date text — the same seam `CartesianChart`'s
+   * `CartesianTooltipConfig.formatHeader` exposes, so the two don't diverge. Default:
+   * `TooltipHeader`'s own `fmtTooltipDate` behavior, unchanged. Receives the raw `getX` key
+   * alongside the hovered datum.
+   */
+  formatHeader?: (key: string, d: T) => string
   /** Legend config forwarded to `ChartFrame`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
@@ -138,6 +155,9 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     data,
     chartId,
     getX,
+    formatX = fmtAxisDate,
+    cursorResolution,
+    ariaLabel,
     series,
     topYDomain = 'auto',
     fillBetween,
@@ -154,6 +174,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     bottomYDomain = 'auto',
     bottomMaxAbsFloor,
     tooltipLabel,
+    formatHeader,
     plot,
   } = props
 
@@ -237,7 +258,9 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
 
   // Full (untinned) x labels are enough to measure the bottom/right gutters — thinning only drops
   // labels, never widens the max, so measuring against the full set is a safe over-estimate.
-  const xLabelsAll = useMemo(() => data.map((d) => fmtAxisDate(getX(d))), [data, getX])
+  // Uses the SAME `formatX` the real axis paints with (`AxisBottomDate` below), or the measured
+  // gutter would be computed from labels the axis never paints.
+  const xLabelsAll = useMemo(() => data.map((d) => formatX(getX(d))), [data, getX, formatX])
 
   const margin = useMemo(
     () => autoMargin({ left: [...topLabels, ...bottomLabels], bottom: xLabelsAll }),
@@ -285,6 +308,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     getKey: getX,
     xScale,
     marginLeft: margin.left,
+    ...(cursorResolution !== undefined && { resolution: cursorResolution }),
   })
 
   const tickValues = useMemo(() => smartTicks(data.map(getX), xMax), [data, xMax, getX])
@@ -382,6 +406,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
           if (m === null) continue
           const cx = xScale(getX(p.__d)) ?? 0
           const cy = topYScale(p.__y)
+          const ring = m.ring ?? true
           markers.push(
             <circle
               key={`mk-${s.key}-${getX(p.__d)}`}
@@ -389,8 +414,8 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
               cy={cy}
               r={m.r ?? VX.dotR}
               fill={m.color ?? s.color}
-              stroke={VX.dotStroke}
-              strokeWidth={2}
+              fillOpacity={m.fillOpacity ?? 1}
+              {...(ring && { stroke: VX.dotStroke, strokeWidth: 2 })}
             />,
           )
         }
@@ -484,6 +509,11 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
           {/* One HoverOverlay per pane, both driving the SAME shared cursor — snap-to-nearest is
               x-only, so either overlay yields the same point. The top overlay extends over the gutter
               (height = topH + PANE_GAP) so there's no dead zone between the panes. */}
+          {/* The focusable overlay is the ONE keyboard control for both panes, so it carries the
+              slider's label and value — parity with `CartesianChart`. Without them the frame's
+              `aria-label` announces the chart and the slider underneath it is an unnamed control
+              reporting no position: technically focusable, useless to read. The bottom overlay
+              stays pointer-only and therefore deliberately carries neither. */}
           <HoverOverlay
             width={xMax}
             height={topH + PANE_GAP}
@@ -491,6 +521,12 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             onLeave={cursor.onPointerLeave}
             onKeyDown={cursor.onKeyDown}
             onBlur={cursor.onBlur}
+            valueMax={Math.max(data.length - 1, 0)}
+            {...(point !== null && {
+              valueNow: data.indexOf(point),
+              valueText: formatX(getX(point)),
+            })}
+            {...(ariaLabel !== undefined && { ariaLabel })}
           />
         </Group>
 
@@ -531,7 +567,12 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             )}
 
           <AxisLeftNumeric scale={bottomYScale} numTicks={3} tickFormat={formatBottom} />
-          <AxisBottomDate top={bottomH} scale={xScale} tickValues={tickValues} />
+          <AxisBottomDate
+            top={bottomH}
+            scale={xScale}
+            tickValues={tickValues}
+            tickFormat={formatX}
+          />
           {/* Pointer only — deliberately NO `onKeyDown`, which is what makes an overlay focusable.
               Both panes scrub the same single x cursor, so a second tab stop would be a second
               control for one logical axis: a keyboard user would tab twice through one chart and
@@ -556,6 +597,9 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
         <ChartTooltipFloat anchor={cursor.anchor}>
           <TooltipHeader
             date={getX(point)}
+            {...(formatHeader !== undefined && {
+              format: (key: string) => formatHeader(key, point),
+            })}
             {...(() => {
               const lbl = tooltipLabel?.(point) ?? null
               return lbl !== null ? { label: lbl.text, labelColor: lbl.color } : {}