basalt-ui 1.15.0 → 1.16.0

package/dist/charts/primitives/CartesianChart.js

@@ -154,17 +154,19 @@ function CartesianPlot({
     () => probeAxisLabels({
       domain: leftDomain,
       ticks: leftTicks,
+      nice: y?.nice ?? false,
       ...y?.format !== void 0 && { format: y.format }
     }),
-    [leftDomain, leftTicks, y?.format]
+    [leftDomain, leftTicks, y?.format, y?.nice]
   );
   const { labels: rightLabels, format: rightFormat } = useMemo(
     () => rightDomain === null ? { labels: [], format: (v) => String(v) } : probeAxisLabels({
       domain: rightDomain,
       ticks: rightTicks,
+      nice: y2?.nice ?? false,
       ...y2?.format !== void 0 && { format: y2.format }
     }),
-    [rightDomain, rightTicks, y2?.format]
+    [rightDomain, rightTicks, y2?.format, y2?.nice]
   );
   const xLabels = useMemo(() => keys.map(formatX), [keys, formatX]);
   const margin = useMemo(
@@ -183,12 +185,20 @@ function CartesianPlot({
     [keys, xMax]
   );
   const yScale = useMemo(
-    () => scaleLinear({ domain: leftDomain, range: [yMax, 0] }),
-    [leftDomain, yMax]
+    () => scaleLinear({
+      domain: leftDomain,
+      range: [yMax, 0],
+      ...y?.nice === true && { nice: true }
+    }),
+    [leftDomain, yMax, y?.nice]
   );
   const y2Scale = useMemo(
-    () => rightDomain === null ? null : scaleLinear({ domain: rightDomain, range: [yMax, 0] }),
-    [rightDomain, yMax]
+    () => rightDomain === null ? null : scaleLinear({
+      domain: rightDomain,
+      range: [yMax, 0],
+      ...y2?.nice === true && { nice: true }
+    }),
+    [rightDomain, yMax, y2?.nice]
   );
   const tickValues = useMemo(
     () => xTicks === void 0 ? smartTicks(keys, xMax) : smartTicksEvery(keys, xTicks),
@@ -325,7 +335,7 @@ function CartesianPlot({
         }
       ),
       /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        tooltipCfg?.prependRows?.(point),
+        tooltipCfg?.prependRows?.(point, { visible, hidden }),
         rows.map((row) => /* @__PURE__ */ jsx(
           TooltipRow,
           {
@@ -338,7 +348,7 @@ function CartesianPlot({
           },
           row.key
         )),
-        tooltipCfg?.extraRows?.(point)
+        tooltipCfg?.extraRows?.(point, { visible, hidden })
       ] })
     ] })
   ] });

package/dist/charts/primitives/CartesianChart.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.test.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/CartesianChart.test.ts"],"names":[],"mappings":""}
+{"version":3,"file":"CartesianChart.test.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/CartesianChart.test.tsx"],"names":[],"mappings":""}

package/dist/charts/primitives/ChartLegend.d.ts

@@ -10,6 +10,9 @@ export type LegendEntry = {
     dashed?: boolean;
     /** bar swatch opacity — honored instead of a hardcoded value, so it cannot lie about the fill. */
     fillOpacity?: number;
+    /** line/splitLine swatch stroke opacity — parity with `fillOpacity` above, so a dimmed
+     * companion line's swatch cannot lie about its own opacity either. */
+    strokeOpacity?: number;
     /** Drives `groups` rendering (series → hairline divider → overlay → reference). */
     role?: SeriesRole;
     /** Companions folded under this entry via `parent` (`deriveLegend`) — rendered as compact,

package/dist/charts/primitives/ChartLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/ChartLegend.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE5D,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,WAAW,CAAA;IAC9C,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mFAAmF;IACnF,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;iFAC6E;IAC7E,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB;gCAC4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AA4ND;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAkB,EAClB,WAAW,EACX,MAAkB,EAClB,QAAQ,EACR,OAAY,EACZ,SAAoB,EACpB,MAAc,EACd,OAAO,GACR,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C,kCAAkC;IAClC,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC5B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,+BAmEA"}
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/ChartLegend.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE5D,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,WAAW,CAAA;IAC9C,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;0EACsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mFAAmF;IACnF,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;iFAC6E;IAC7E,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB;gCAC4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAgOD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAkB,EAClB,WAAW,EACX,MAAkB,EAClB,QAAQ,EACR,OAAY,EACZ,SAAoB,EACpB,MAAc,EACd,OAAO,GACR,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C,kCAAkC;IAClC,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC5B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,+BAmEA"}

package/dist/charts/primitives/ChartLegend.js

@@ -70,6 +70,7 @@ function LegendSwatch({ item, idPrefix }) {
           y2: 7,
           stroke: item.color,
           strokeWidth: item.strokeWidth ?? 2.5,
+          strokeOpacity: item.strokeOpacity ?? 1,
           strokeDasharray: item.dashed ? VX.dashArray : void 0
         }
       ),
@@ -82,6 +83,7 @@ function LegendSwatch({ item, idPrefix }) {
           y2: 7,
           stroke: item.secondColor,
           strokeWidth: item.strokeWidth ?? 2.5,
+          strokeOpacity: item.strokeOpacity ?? 1,
           strokeDasharray: item.dashed ? VX.dashArray : void 0
         }
       )
@@ -124,6 +126,7 @@ function LegendSwatch({ item, idPrefix }) {
       y2: 3,
       stroke: item.color,
       strokeWidth: item.strokeWidth ?? 3,
+      strokeOpacity: item.strokeOpacity ?? 1,
       strokeLinecap: "round",
       strokeDasharray: item.dashed ? VX.dashArray : void 0
     }
@@ -166,6 +169,7 @@ function LegendChildSwatch({ item }) {
       y2: 5,
       stroke: item.color,
       strokeWidth: item.strokeWidth ?? 2,
+      strokeOpacity: item.strokeOpacity ?? 1,
       strokeDasharray: item.dashed ? VX.dashArray : void 0
     }
   ) });

package/dist/charts/primitives/XZoneRects.d.ts

@@ -11,24 +11,38 @@ export type XZoneSpec = {
     /** Right edge — a domain key produced by the kind's `getX`. Omit for "end of the plot area". */
     to?: string;
     fill: string;
+    /**
+     * `'center'` (default, unchanged behaviour) resolves a present bound to `xScale(key)` — the
+     * point's own center, so a band reads "from this sample to that sample" rather than
+     * edge-to-edge. `'edge'` resolves a present `from` to `xScale(from) - step/2` and a present `to`
+     * to `xScale(to) + step/2` (`step` read from `xScale.step()`), so the band covers both terminal
+     * slots in full — a two-key band widens by exactly one step, and `from === to` renders one step
+     * wide instead of being skipped as degenerate. An omitted `from`/`to` still resolves to the plot
+     * edge (`xScale.range()[0]`/`[1]`) in both modes, unshifted — omission means "the plot's own
+     * edge", not "the first/last sample's edge". A resolved `'edge'` bound is clamped into the plot
+     * range so a band anchored at the first or last sample cannot paint outside the plot area.
+     */
+    align?: 'center' | 'edge';
 };
 /**
  * Vertical zone backgrounds (x-range overlays — twilight bands, a shaded time window) — one
  * <rect> per zone, spanning y=[0, height] and x=[scale(from), scale(to)]. The x analog of
  * `ZoneRects`, for a `scalePoint` x-axis instead of a `scaleLinear` y-axis.
  *
- * An omitted `from` resolves to `0` (start of the plot area); an omitted `to` resolves to
- * `xScale.range()[1]` (the plot's right edge). A present key resolves to `xScale(key)` — the
- * POINT CENTER, so a band reads as "from this sample to that sample", not edge-to-edge.
+ * Bound resolution depends on `XZoneSpec.align` (see its JSDoc for the full `'center'`/`'edge'`
+ * contract) — default `'center'` resolves a present key to the point's own center; `'edge'`
+ * widens by half a step at each present bound so the band covers the terminal slots in full.
  *
  * A key that is not in the scale's domain skips that band entirely (renders nothing for it) —
- * it is NEVER clamped to a plot edge. Clamping would silently paint a band across the whole
- * chart for a typo'd or stale key, which is the exact class of quiet lie the repo's "nothing to
- * draw is two different states" doctrine rejects: an unknown key must read as "not drawn", not
- * as "the whole plot".
+ * it is NEVER clamped to a plot edge, in either mode. Clamping an unknown key would silently
+ * paint a band across the whole chart for a typo'd or stale key, which is the exact class of
+ * quiet lie the repo's "nothing to draw is two different states" doctrine rejects: an unknown key
+ * must read as "not drawn", not as "the whole plot".
  *
  * A degenerate resolved range (right edge <= left edge, e.g. an inverted `from`/`to` pair) is
- * also skipped — no negative-width rect.
+ * also skipped — no negative-width rect. In `'center'` mode `from === to` is degenerate (skipped,
+ * today's behaviour); in `'edge'` mode it is NOT — the half-step widening on each side always
+ * produces a positive-width, one-step-wide rect.
  */
 export declare function XZoneRects({ zones, height, xScale, }: {
     zones: XZoneSpec[];

package/dist/charts/primitives/XZoneRects.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XZoneRects.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/XZoneRects.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C;;;;GAIG;AACH,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAA;AAEvD,MAAM,MAAM,SAAS,GAAG;IACtB,iGAAiG;IACjG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gGAAgG;IAChG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE;IACD,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,0DAA0D;IAC1D,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,UAAU,CAAA;CACnB,+BAsBA"}
+{"version":3,"file":"XZoneRects.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/XZoneRects.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C;;;;GAIG;AACH,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAA;AAEvD,MAAM,MAAM,SAAS,GAAG;IACtB,iGAAiG;IACjG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gGAAgG;IAChG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;CAC1B,CAAA;AAkCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE;IACD,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,0DAA0D;IAC1D,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,UAAU,CAAA;CACnB,+BAyCA"}

package/dist/charts/primitives/XZoneRects.js

@@ -1,4 +1,22 @@
 import { Fragment, jsx } from "react/jsx-runtime";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function resolveBound({
+  key,
+  omittedEdge,
+  xScale,
+  align,
+  edgeSign,
+  rangeMin,
+  rangeMax
+}) {
+  if (key === void 0) return omittedEdge;
+  const center = xScale(key);
+  if (center === void 0) return void 0;
+  if (align === "center") return center;
+  return clamp(center + edgeSign * (xScale.step() / 2), rangeMin, rangeMax);
+}
 function XZoneRects({
   zones,
   height,
@@ -6,8 +24,27 @@ function XZoneRects({
 }) {
   return /* @__PURE__ */ jsx(Fragment, { children: zones.map((z, i) => {
     const [rangeStart, rangeEnd] = xScale.range();
-    const xFrom = z.from === void 0 ? rangeStart : xScale(z.from);
-    const xTo = z.to === void 0 ? rangeEnd : xScale(z.to);
+    const rangeMin = Math.min(rangeStart, rangeEnd);
+    const rangeMax = Math.max(rangeStart, rangeEnd);
+    const align = z.align ?? "center";
+    const xFrom = resolveBound({
+      key: z.from,
+      omittedEdge: rangeStart,
+      xScale,
+      align,
+      edgeSign: -1,
+      rangeMin,
+      rangeMax
+    });
+    const xTo = resolveBound({
+      key: z.to,
+      omittedEdge: rangeEnd,
+      xScale,
+      align,
+      edgeSign: 1,
+      rangeMin,
+      rangeMax
+    });
     if (xFrom === void 0 || xTo === void 0) return null;
     if (xTo <= xFrom) return null;
     return /* @__PURE__ */ jsx(

package/dist/charts/series.d.ts

@@ -52,6 +52,14 @@ export type SeriesStyle = {
     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.
+     */
+    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';
@@ -75,8 +83,10 @@ export type SeriesStyle = {
 export type ChartSeries<T> = SeriesStyle & {
     /** null = line gap + skipped tooltip row. */
     getValue: (d: T) => number | null;
-    /** Per-series override of the shared tooltip/value formatter. */
-    formatValue?: (v: number) => string;
+    /** 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. */
     getMarker?: (d: T) => {
         color?: string;

package/dist/charts/series.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"series.d.ts","sourceRoot":"","sources":["../../src/charts/series.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"series.d.ts","sourceRoot":"","sources":["../../src/charts/series.ts"],"names":[],"mappings":"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"}

package/dist/charts/series.js

@@ -9,6 +9,7 @@ function legendEntryFor(s) {
     dashed: s.dash === "dashed",
     ...s.strokeWidth !== void 0 && { strokeWidth: s.strokeWidth },
     ...s.fillOpacity !== void 0 && { fillOpacity: s.fillOpacity },
+    ...s.strokeOpacity !== void 0 && { strokeOpacity: s.strokeOpacity },
     ...s.role !== void 0 && { role: s.role },
     ...s.note !== void 0 && { note: s.note }
   };
@@ -42,7 +43,7 @@ function deriveTooltipRows(series, datum, fallbackFormat) {
       key: s.key,
       label: s.label,
       color: s.color,
-      value: format(value),
+      value: format(value, datum),
       shape: shapeFor(s.mark),
       dashed: s.dash === "dashed",
       ...s.strokeWidth !== void 0 && { strokeWidth: s.strokeWidth }

package/llms.txt

@@ -1,4 +1,4 @@
-# basalt-ui v1.15.0
+# basalt-ui v1.16.0
 # Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets
 #
 # basalt-ui is an opinionated framework for Mantine-based React apps.
@@ -19,7 +19,7 @@
 # ./tokens.css subpath. Guide: docs/FRAMEWORK-FREE.md in the repo.
 
 Package: basalt-ui
-Version: 1.15.0
+Version: 1.16.0
 
 ## basalt-ui
 Import: import { ... } from 'basalt-ui'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basalt-ui",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets",
   "keywords": [
     "charts",

package/src/charts/index.ts

@@ -57,6 +57,7 @@ export {
   resolveAxisDomain,
   type CartesianChartProps,
   type CartesianTooltipConfig,
+  type CartesianTooltipRowContext,
   type AxisConfig,
   type PlotContext,
 } from './primitives/CartesianChart'

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)
+  })
+})

package/src/charts/kinds/Bars.tsx

@@ -10,7 +10,12 @@ import { LINE_OVERLAY_STROKE_WIDTH } from '../series'
 import type { ChartLegendConfig, ChartSeries } from '../series'
 import { padAutoLower } from '../utils/domain'
 
-export type BarsBar = {
+/**
+ * `T = unknown` is load-bearing, not a shortcut: it keeps a consumer's existing
+ * `const bars: BarsBar[] = [...]` compiling (and still assignable to `BarsBar<Row>[]`,
+ * contravariantly) even though the type is now generic over the datum.
+ */
+export type BarsBar<T = unknown> = {
   /** Field key — `getValue(d, key)` extracts the number (null = skip this slot, not domain hole). */
   key: string
   /** Tooltip + legend label. */
@@ -18,22 +23,30 @@ export type BarsBar = {
   /** Fill color (a resolved CSS color / token ref). Per `docs/DESIGN-SPEC.md` §5, the primary bar
    * series should typically resolve to `VX.accent`, a secondary companion to `VX.faint`. */
   color: string
-  /** Per-series tooltip value formatter — overrides the left/right axis's own format. */
-  formatValue?: (v: number) => string
+  /** Per-series tooltip value formatter — overrides the left/right axis's own format. Receives the
+   * hovered datum alongside the value. */
+  formatValue?: (v: number, d: T) => string
   /** Y axis to plot against. Honored only in grouped layout. Default 'left'. */
   axisSide?: 'left' | 'right'
   /** Relative width within the group (only honored in grouped layout). Default 1 — all bars equal. */
   weight?: number
+  /** Default true; false = drawn and legended, but never listed as a tooltip row — threads
+   * `SeriesStyle.tooltip` through `Bars`, replacing the removed per-kind `hideBarTooltipRows`. */
+  tooltip?: boolean
 }
 
-export type BarsLine = {
+export type BarsLine<T = unknown> = {
   key: string
   label: string
   color: string
   axisSide?: 'left' | 'right'
   strokeWidth?: number
   dashed?: boolean
-  formatValue?: (v: number) => string
+  formatValue?: (v: number, d: T) => string
+  /** Default true; false = drawn and legended, but never listed as a tooltip row. */
+  tooltip?: boolean
+  /** Dims the plotted stroke AND the legend swatch, never the tooltip row (`SeriesStyle.strokeOpacity`). */
+  strokeOpacity?: number
 }
 
 /** @deprecated Use ZoneSpec from primitives/ZoneRects. Kept as an alias. */
@@ -57,12 +70,12 @@ export type BarsProps<T> = {
   getValue: (d: T, key: string) => number | null
 
   /** 1+ bar series, stacked when ≥2, plotted above baseline (y >= 0). */
-  positiveBars: BarsBar[]
+  positiveBars: BarsBar<T>[]
   /** Optional bar series stacked below baseline (rendered as flipped negatives). */
-  negativeBars?: BarsBar[]
+  negativeBars?: BarsBar<T>[]
 
   /** 0–2 line overlays, each on left or right axis. */
-  lines?: BarsLine[]
+  lines?: BarsLine<T>[]
 
   /** Horizontal value-range overlays (target zones, optimal bands). */
   zones?: BarsZone[]
@@ -157,6 +170,7 @@ function BarsInner<T>(props: BarsProps<T>) {
         ...(b.axisSide !== undefined && { axis: b.axisSide }),
         getValue: (d: T) => getValue(d, b.key),
         ...(b.formatValue !== undefined && { formatValue: b.formatValue }),
+        ...(b.tooltip !== undefined && { tooltip: b.tooltip }),
       })),
     [positiveBars, negativeBars, getValue],
   )
@@ -173,6 +187,8 @@ function BarsInner<T>(props: BarsProps<T>) {
         ...(ln.axisSide !== undefined && { axis: ln.axisSide }),
         getValue: (d: T) => getValue(d, ln.key),
         ...(ln.formatValue !== undefined && { formatValue: ln.formatValue }),
+        ...(ln.tooltip !== undefined && { tooltip: ln.tooltip }),
+        ...(ln.strokeOpacity !== undefined && { strokeOpacity: ln.strokeOpacity }),
       })),
     [lines, getValue],
   )
@@ -294,9 +310,9 @@ type LinePt<T> = { __d: T; __y: number }
 type BarsMarksProps<T> = {
   getX: (d: T) => string
   getValue: (d: T, key: string) => number | null
-  positiveBars: BarsBar[]
-  negativeBars: BarsBar[]
-  lines: BarsLine[]
+  positiveBars: BarsBar<T>[]
+  negativeBars: BarsBar<T>[]
+  lines: BarsLine<T>[]
   barWidthRatio: number
   barLayout: 'stacked' | 'grouped'
   barOpacity?: (d: T, key: string) => number
@@ -485,7 +501,7 @@ function BarsMarks<T>({
             stroke={ln.color}
             strokeWidth={ln.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH}
             strokeDasharray={ln.dashed ? VX.dashArray : undefined}
-            strokeOpacity={dim(ln.key)}
+            strokeOpacity={dim(ln.key) * (ln.strokeOpacity ?? 1)}
             curve={curveMonotoneX}
           />
         )

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

@@ -0,0 +1,131 @@
+/**
+ * `DualPanel` — the bottom-pane domain seam (`bottomYDomain`/`bottomMaxAbsFloor`) and `formatBar`
+ * (tooltip-row-only override, `formatBottom` keeps owning the ticks). Same SSR harness as
+ * `ChartFrame.test.tsx` for the axis-only assertions (no hover needed); the `formatBar` case needs
+ * a live cursor, so it uses the real DOM harness + the overlay's keyboard path (parity with
+ * `Bars.test.tsx`) — DualPanel has two `HoverOverlay`s sharing one cursor, but only the TOP one is
+ * keyboard-focusable, so `getByRole('slider')` is unambiguous.
+ */
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { DualPanel } from './DualPanel'
+import type { ChartSeries } from '../series'
+
+type Row = { date: string; v: number; bar: number }
+
+const rows: Row[] = [{ date: '2026-08-01', v: 10, bar: 0.02 }]
+
+const series: ChartSeries<Row>[] = [
+  { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+]
+
+function renderStatic(bottomMaxAbsFloor?: number, bottomYDomain?: [number, number]): string {
+  return renderToStaticMarkup(
+    <DualPanel<Row>
+      data={rows}
+      chartId="dp-floor"
+      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)}
+      {...(bottomMaxAbsFloor !== undefined && { bottomMaxAbsFloor })}
+      {...(bottomYDomain !== undefined && { bottomYDomain })}
+    />,
+  )
+}
+
+describe('DualPanel — bottomMaxAbsFloor', () => {
+  test('floors the symmetric max-abs so a near-zero plateau does not amplify to full height', () => {
+    // The raw data's max abs is 0.02 — nowhere near the 0.5 floor, so "0.50" can only appear on
+    // the bottom axis once the floor widens the domain.
+    expect(renderStatic()).not.toContain('>0.50<')
+    expect(renderStatic(0.5)).toContain('>0.50<')
+  })
+})
+
+describe('DualPanel — per-point getMarker rendering', () => {
+  test('renders exactly one circle per non-null marker, honouring color/r overrides', () => {
+    const markerRows: Row[] = [
+      { date: '2026-08-01', v: 10, bar: 0.02 },
+      { date: '2026-08-02', v: 12, bar: 0.03 },
+      { date: '2026-08-03', v: 9, bar: 0.01 },
+    ]
+    const markerSeries: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) =>
+          d.date === '2026-08-01'
+            ? { color: '#f00', r: 9 }
+            : d.date === '2026-08-03'
+              ? { r: 3 }
+              : null,
+      },
+    ]
+
+    const { container } = render(
+      <DualPanel<Row>
+        data={markerRows}
+        chartId="dp-markers"
+        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)
+    expect(circles[0]?.getAttribute('fill')).toBe('#f00')
+    expect(circles[0]?.getAttribute('r')).toBe('9')
+    // No color override on the second marker — falls back to the series color.
+    expect(circles[1]?.getAttribute('fill')).toBe('#111')
+    expect(circles[1]?.getAttribute('r')).toBe('3')
+  })
+})
+
+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
+    // bottomYDomain to [-5, 5] must still paint it.
+    expect(renderStatic(undefined, [-5, 5])).toContain('>5.00<')
+    expect(renderStatic()).not.toContain('>5.00<')
+  })
+})
+
+describe('DualPanel — formatBar overrides only the tooltip row', () => {
+  test('the bar tooltip row reads formatBar, not formatBottom', async () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-formatbar"
+        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)}
+        formatBar={(v, d) => `${v.toFixed(3)} m/s (${d.date})`}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(await screen.findByText('0.020 m/s (2026-08-01)')).toBeTruthy()
+  })
+})