basalt-ui 1.14.0 → 1.16.0

package/src/charts/index.ts

@@ -2,8 +2,9 @@
  * `./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 hover context, the primitives, kinds, sparklines, hooks, utils,
- * and a curated set of raw @visx primitives for bespoke charts.
+ * 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).
@@ -20,15 +21,22 @@ export {
   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 + hover context ──────────────────────────────────────────
+// ── Chart theme + shared cursor ──────────────────────────────────────────
 export { VxThemeProvider, useVxTheme, type VxTheme } from './theme'
-export { HoverContext, DEFAULT_NO_OP_SET_HOVER, type HoverCtx } from './hover-context'
-export { ChartHoverSync, type ChartHoverSyncProps } from './hover-sync'
+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 {
@@ -44,8 +52,22 @@ export {
 } from './series'
 
 // ── Primitives ───────────────────────────────────────────────────────────
-export { ResponsiveChart, type ResponsiveChartProps } from './primitives/ResponsiveChart'
-export { ChartFrame, type ChartFrameProps, type ChartFrameLegend } from './primitives/ChartFrame'
+export {
+  CartesianChart,
+  resolveAxisDomain,
+  type CartesianChartProps,
+  type CartesianTooltipConfig,
+  type CartesianTooltipRowContext,
+  type AxisConfig,
+  type PlotContext,
+} from './primitives/CartesianChart'
+export {
+  ChartFrame,
+  type ChartFrameProps,
+  type ChartFrameLegend,
+  type PlotRect,
+  resolveLegend,
+} from './primitives/ChartFrame'
 export {
   ChartCenter,
   type ChartCenterProps,
@@ -56,25 +78,26 @@ export { Crosshair, SeriesDot } from './primitives/Crosshair'
 export { ChartCard } from './primitives/ChartCard'
 export { ChartLegend, type LegendEntry } from './primitives/ChartLegend'
 export {
-  ChartTooltip,
+  ChartTooltipFloat,
   TooltipHeader,
   TooltipRow,
   TooltipBody,
-  useTooltipStyles,
 } from './primitives/ChartTooltip'
 export { AxisBottomDate, 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 { useChartTooltip, type TooltipState } from './hooks/useChartTooltip'
-export { useHoverSync } from './hooks/useHoverSync'
+export { useChartCursor, type ChartCursor, type CursorAnchor } from './hooks/useChartCursor'
 export { useChartSize, type UseChartSizeResult, type ChartSize } from './hooks/useChartSize'
 
 // ── Utils ────────────────────────────────────────────────────────────────
 export { fmtAxisDate, fmtTooltipDate } from './utils/format'
-export { smartTicks } from './utils/ticks'
+export { smartTicks, smartTicksEvery } 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 {
@@ -83,7 +106,6 @@ export {
   type ZonedLineZone,
   type ZonedLineThreshold,
   type ZonedLineRefLine,
-  type ZonedLineTooltipLabel,
 } from './kinds/ZonedLine'
 
 export {
@@ -93,7 +115,6 @@ export {
   type BarsLine,
   type BarsZone,
   type BarsRefLine,
-  type BarsAxisConfig,
 } from './kinds/Bars'
 
 export { StackedArea, type StackedAreaProps } from './kinds/StackedArea'

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

@@ -0,0 +1,98 @@
+/**
+ * `Bars` — the `tooltip: false` seam threaded from `SeriesStyle.tooltip` through `BarsBar`/
+ * `BarsLine` (replacing the removed per-kind `hideBarTooltipRows`), plus the `BarsBar<T>`
+ * generic-default assignability guarantee. Real DOM harness (`tests/setup/dom.ts`): the cursor
+ * only advances via `useChartCursor`'s keyboard path (`ArrowRight` on the overlay's `role="slider"`),
+ * which is deterministic regardless of happy-dom's zeroed layout geometry — unlike the pointer path,
+ * which needs a real `getBoundingClientRect`.
+ */
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import { Bars } from './Bars'
+import type { BarsBar } from './Bars'
+
+type Row = { date: string; shown: number; quiet: number; trend: number }
+
+const rows: Row[] = [{ date: '2026-08-01', shown: 10, quiet: 5, trend: 7 }]
+
+describe('Bars — tooltip: false drops only that row', () => {
+  test('a quiet bar is drawn and legended but produces no tooltip row', async () => {
+    render(
+      <Bars<Row>
+        data={rows}
+        chartId="bars-tooltip"
+        getX={(d) => d.date}
+        getValue={(d, key) => d[key as 'shown' | 'quiet']}
+        positiveBars={[
+          { key: 'shown', label: 'Shown', color: '#111' },
+          { key: 'quiet', label: 'Quiet', color: '#222', tooltip: false },
+        ]}
+      />,
+    )
+
+    // Both series are legended regardless of the tooltip flag.
+    expect(screen.getByText('Shown')).toBeTruthy()
+    expect(screen.getByText('Quiet')).toBeTruthy()
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    // The tooltip row duplicates 'Shown' (legend + row); 'Quiet' stays legend-only. The tooltip
+    // anchor is set through a `requestAnimationFrame` coalesce, so wait for the SECOND 'Shown' to
+    // land rather than resolving on the legend's already-present first one.
+    await waitFor(() => expect(screen.getAllByText('Shown')).toHaveLength(2))
+    expect(screen.getAllByText('Quiet')).toHaveLength(1)
+  })
+})
+
+describe('Bars — lines[].tooltip: false drops only that row', () => {
+  test('a quiet line is drawn and legended but produces no tooltip row', async () => {
+    render(
+      <Bars<Row>
+        data={rows}
+        chartId="bars-line-tooltip"
+        getX={(d) => d.date}
+        getValue={(d, key) => d[key as 'shown' | 'quiet' | 'trend']}
+        positiveBars={[{ key: 'shown', label: 'Shown', color: '#111' }]}
+        lines={[{ key: 'trend', label: 'Trend', color: '#333', tooltip: false }]}
+      />,
+    )
+
+    // Both series are legended regardless of the tooltip flag.
+    expect(screen.getByText('Shown')).toBeTruthy()
+    expect(screen.getByText('Trend')).toBeTruthy()
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    // The tooltip row duplicates 'Shown' (legend + row); 'Trend' stays legend-only.
+    await waitFor(() => expect(screen.getAllByText('Shown')).toHaveLength(2))
+    expect(screen.getAllByText('Trend')).toHaveLength(1)
+  })
+})
+
+describe('Bars — lines[].strokeOpacity dims the plotted stroke', () => {
+  test('the line path carries the configured stroke-opacity attribute', () => {
+    const { container } = render(
+      <Bars<Row>
+        data={rows}
+        chartId="bars-line-opacity"
+        getX={(d) => d.date}
+        getValue={(d, key) => d[key as 'shown' | 'quiet' | 'trend']}
+        positiveBars={[{ key: 'shown', label: 'Shown', color: '#111' }]}
+        lines={[{ key: 'trend', label: 'Trend', color: '#333', strokeOpacity: 0.4 }]}
+      />,
+    )
+
+    const path = container.querySelector('path[stroke="#333"]')
+    expect(path?.getAttribute('stroke-opacity')).toBe('0.4')
+  })
+})
+
+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' }]
+    const typed: BarsBar<Row>[] = bars
+    expect(typed).toBe(bars)
+  })
+})