basalt-ui 1.15.0 → 1.16.0

package/src/charts/kinds/DualPanel.tsx

@@ -5,6 +5,7 @@ import { scaleLinear, scalePoint } from '@visx/scale'
 import { Bar, LinePath } from '@visx/shape'
 import { Threshold } from '@visx/threshold'
 import { memo, useMemo } from 'react'
+import type { ReactNode } from 'react'
 import { AxisBottomDate, AxisLeftNumeric } from '../primitives/Axes'
 import {
   ChartTooltipFloat,
@@ -50,7 +51,20 @@ export type DualPanelProps<T> = {
   /** Top pane share of the inner plot height. Default 0.62. */
   topFraction?: number
   formatTop: (v: number) => string
+  /** Drives the bottom-pane TICKS. Also the tooltip-row fallback when `formatBar` is omitted. */
   formatBottom: (v: number) => string
+  /** Per-row tooltip formatter for the bottom-pane bar — overrides `formatBottom` for the tooltip
+   * row only (ticks keep reading `formatBottom`). Receives the hovered datum alongside the value,
+   * so a row can add a unit/decimal `formatBottom` can't (e.g. a velocity reading). */
+  formatBar?: (v: number, d: T) => string
+  /**
+   * Bottom-pane y-domain. Default `'auto'`: a symmetric `[-maxAbs, maxAbs]` computed from the
+   * data, `nice`d. A fixed tuple pins the domain instead (and is used verbatim, un-`nice`d).
+   */
+  bottomYDomain?: [number, number] | 'auto'
+  /** When `bottomYDomain` is `'auto'`: floors the symmetric max-abs so a plateau doesn't amplify
+   * to fill the whole pane (mirrors `AxisConfig.autoMaxFloor`). Ignored with a fixed tuple. */
+  bottomMaxAbsFloor?: number
   /** Tooltip badge — appears at the right of the tooltip header. */
   tooltipLabel?: (d: T) => { text: string; color: string } | null
   /** Legend config forwarded to `ChartFrame`; `false` disables the legend (sparkline escape).
@@ -136,6 +150,9 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     topFraction = 0.62,
     formatTop,
     formatBottom,
+    formatBar,
+    bottomYDomain = 'auto',
+    bottomMaxAbsFloor,
     tooltipLabel,
     plot,
   } = props
@@ -184,8 +201,11 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     [topDomain, useNiceTop, formatTop],
   )
 
-  // Bottom pane: symmetric signed domain around zero.
+  // Bottom pane: symmetric signed domain around zero — unless `bottomYDomain` pins a fixed tuple,
+  // in which case that domain ships verbatim (un-`nice`d, matching `topYDomain`'s fixed-tuple path).
+  const useNiceBottom = bottomYDomain === 'auto'
   const maxAbs = useMemo(() => {
+    if (bottomYDomain !== 'auto') return 0
     let m = 0
     for (const d of data) {
       const v = getBar(d)
@@ -193,18 +213,26 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
       const a = Math.abs(v)
       if (a > m) m = a
     }
-    return m === 0 ? 1 : m
-  }, [data, getBar])
+    const floored = bottomMaxAbsFloor !== undefined ? Math.max(m, bottomMaxAbsFloor) : m
+    return floored === 0 ? 1 : floored
+  }, [data, getBar, bottomYDomain, bottomMaxAbsFloor])
 
+  const bottomDomain = useMemo<[number, number]>(
+    () => (bottomYDomain === 'auto' ? [-maxAbs, maxAbs] : bottomYDomain),
+    [bottomYDomain, maxAbs],
+  )
+
+  // `bottomLabels`/`probeAxisLabels` measure whatever domain actually ships (fixed tuple or
+  // computed maxAbs), so the margin is never computed from ticks the axis never paints.
   const bottomLabels = useMemo(
     () =>
       probeAxisLabels({
-        domain: [-maxAbs, maxAbs],
+        domain: bottomDomain,
         ticks: 3,
         format: formatBottom,
-        nice: true,
+        nice: useNiceBottom,
       }).labels,
-    [maxAbs, formatBottom],
+    [bottomDomain, formatBottom, useNiceBottom],
   )
 
   // Full (untinned) x labels are enough to measure the bottom/right gutters — thinning only drops
@@ -242,8 +270,13 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
   )
 
   const bottomYScale = useMemo(
-    () => scaleLinear<number>({ domain: [-maxAbs, maxAbs], range: [bottomH, 0], nice: true }),
-    [maxAbs, bottomH],
+    () =>
+      scaleLinear<number>({
+        domain: bottomDomain,
+        range: [bottomH, 0],
+        ...(useNiceBottom && { nice: true }),
+      }),
+    [bottomDomain, bottomH, useNiceBottom],
   )
 
   const cursor = useChartCursor<T>({
@@ -334,6 +367,38 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     return out
   }, [data, visibleSeries])
 
+  // Per-point markers (PR star / status dots), memoized for the same reason as `histogramBars` /
+  // `lineValid` — the shared cursor re-renders every mounted chart on every pointer frame, and this
+  // walks every visible series' valid points calling the consumer's `getMarker` each time otherwise.
+  const markerNodes = useMemo<ReactNode[]>(
+    () =>
+      visibleSeries.flatMap((s) => {
+        const getMarker = s.getMarker
+        if (!getMarker) return [] as ReactNode[]
+        const pts = lineValid.get(s.key) ?? []
+        const markers: ReactNode[] = []
+        for (const p of pts) {
+          const m = getMarker(p.__d)
+          if (m === null) continue
+          const cx = xScale(getX(p.__d)) ?? 0
+          const cy = topYScale(p.__y)
+          markers.push(
+            <circle
+              key={`mk-${s.key}-${getX(p.__d)}`}
+              cx={cx}
+              cy={cy}
+              r={m.r ?? VX.dotR}
+              fill={m.color ?? s.color}
+              stroke={VX.dotStroke}
+              strokeWidth={2}
+            />,
+          )
+        }
+        return markers
+      }),
+    [visibleSeries, lineValid, xScale, topYScale, getX],
+  )
+
   const point = cursor.point
   const sx = point !== null ? (xScale(getX(point)) ?? 0) : 0
   const syncedBar = point !== null ? getBar(point) : null
@@ -386,11 +451,16 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
                 stroke={s.color}
                 strokeWidth={s.strokeWidth ?? VX.lineWidth}
                 strokeDasharray={s.dash === 'dashed' ? VX.dashArray : undefined}
+                strokeOpacity={s.strokeOpacity ?? 1}
                 curve={curveMonotoneX}
               />
             )
           })}
 
+          {/* Per-point markers (PR star / status dots) — plain-circle parity with MultiLine's
+              `getMarker` handling; DualPanel doesn't need the star-shape variant. */}
+          {markerNodes}
+
           {/* Dots only — the crosshair LINE is the single continuous span drawn below. */}
           {point !== null && (
             <>
@@ -507,11 +577,13 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
               (() => {
                 const v = getBar(point)
                 if (v === null || v === undefined || Number.isNaN(v)) return null
+                // `formatBar` overrides the tooltip row only — `formatBottom` keeps owning ticks.
+                const value = formatBar !== undefined ? formatBar(v, point) : formatBottom(v)
                 return (
                   <TooltipRow
                     color={v >= 0 ? barColorPositive : barColorNegative}
                     label={barLabel}
-                    value={formatBottom(v)}
+                    value={value}
                     shape="bar"
                   />
                 )

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

@@ -0,0 +1,37 @@
+/**
+ * `MultiLine` — the `strokeOpacity` wiring: `dimOpacity(s) * (s.strokeOpacity ?? 1)`. SSR harness
+ * (no hover needed), same pattern as `CartesianChart.test.tsx`'s `nice` assertions.
+ */
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MultiLine } from './MultiLine'
+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('MultiLine — 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: '#123456',
+        mark: 'line',
+        getValue: (d) => d.v,
+        strokeOpacity: 0.35,
+      },
+    ]
+
+    const html = renderToStaticMarkup(
+      <MultiLine<Row> data={rows} chartId="ml-opacity" getX={(d) => d.date} series={series} />,
+    )
+
+    expect(html).toContain('stroke="#123456"')
+    expect(html).toContain('stroke-opacity="0.35"')
+  })
+})

package/src/charts/kinds/MultiLine.tsx

@@ -1,6 +1,6 @@
 import { curveMonotoneX } from '@visx/curve'
 import { LinePath } from '@visx/shape'
-import { memo, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import type { ReactNode } from 'react'
 import type { CartesianTooltipConfig, AxisConfig, PlotContext } from '../primitives/CartesianChart'
 import { CartesianChart } from '../primitives/CartesianChart'
@@ -163,35 +163,27 @@ function MultiLineMarks<T>({
   }, [visible, data])
 
   // A series stays at full opacity when nothing is highlighted, when it IS the highlighted series,
-  // or when it is a companion of the highlighted series (its `parent` matches).
-  const dimOpacity = (s: ChartSeries<T>): number =>
-    highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25
-
-  const scaleFor = (s: ChartSeries<T>) =>
-    s.axis === 'right' && y2Scale !== null ? y2Scale : yScale
+  // or when it is a companion of the highlighted series (its `parent` matches). `useCallback`
+  // (rather than a plain function) gives both a stable identity across renders where `highlighted`/
+  // `y2Scale` haven't changed, so `markerNodes` below can depend on THEM rather than the raw
+  // scale/highlighted values a closure would otherwise hide from the deps array.
+  const dimOpacity = useCallback(
+    (s: ChartSeries<T>): number =>
+      highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25,
+    [highlighted],
+  )
 
-  return (
-    <>
-      {visible.map((s) => {
-        const valid = pointsBySeries.get(s.key) ?? []
-        if (valid.length === 0) return null
-        const scale = scaleFor(s)
-        return (
-          <LinePath<LinePt<T>>
-            key={`line-${s.key}`}
-            data={valid}
-            x={(p) => xScale(getX(p.__d)) ?? 0}
-            y={(p) => scale(p.__y)}
-            stroke={s.color}
-            strokeWidth={s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH}
-            strokeDasharray={s.dash === 'dashed' ? VX.dashArray : undefined}
-            strokeOpacity={dimOpacity(s)}
-            curve={curveMonotoneX}
-          />
-        )
-      })}
+  const scaleFor = useCallback(
+    (s: ChartSeries<T>) => (s.axis === 'right' && y2Scale !== null ? y2Scale : yScale),
+    [y2Scale, yScale],
+  )
 
-      {visible.flatMap((s) => {
+  // Memoized for the same reason as `pointsBySeries` above — the shared cursor re-renders every
+  // mounted chart on every pointer frame, and this walks every visible series' points calling the
+  // consumer's `getMarker` each time otherwise.
+  const markerNodes = useMemo<ReactNode[]>(
+    () =>
+      visible.flatMap((s) => {
         const getMarker = s.getMarker
         if (!getMarker) return [] as ReactNode[]
         const scale = scaleFor(s)
@@ -231,7 +223,32 @@ function MultiLineMarks<T>({
           )
         }
         return markers
+      }),
+    [visible, pointsBySeries, xScale, getX, scaleFor, dimOpacity, markerShape],
+  )
+
+  return (
+    <>
+      {visible.map((s) => {
+        const valid = pointsBySeries.get(s.key) ?? []
+        if (valid.length === 0) return null
+        const scale = scaleFor(s)
+        return (
+          <LinePath<LinePt<T>>
+            key={`line-${s.key}`}
+            data={valid}
+            x={(p) => xScale(getX(p.__d)) ?? 0}
+            y={(p) => scale(p.__y)}
+            stroke={s.color}
+            strokeWidth={s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH}
+            strokeDasharray={s.dash === 'dashed' ? VX.dashArray : undefined}
+            strokeOpacity={dimOpacity(s) * (s.strokeOpacity ?? 1)}
+            curve={curveMonotoneX}
+          />
+        )
       })}
+
+      {markerNodes}
     </>
   )
 }

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

@@ -0,0 +1,37 @@
+/**
+ * `ZonedLine` — the `strokeOpacity` wiring: `primary.strokeOpacity ?? 1`. SSR harness (no hover
+ * needed), same pattern as `CartesianChart.test.tsx`'s `nice` assertions.
+ */
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+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"')
+  })
+})

package/src/charts/kinds/ZonedLine.tsx

@@ -228,6 +228,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.ts → CartesianChart.test.tsx}

@@ -1,6 +1,8 @@
+import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
 import type { ChartSeries } from '../series'
-import { resolveAxisDomain } from './CartesianChart'
+import { CartesianChart, resolveAxisDomain } from './CartesianChart'
 
 type Row = { date: string; a: number; b: number }
 
@@ -97,3 +99,62 @@ describe('resolveAxisDomain — degenerate input', () => {
     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('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')
+  })
+})

package/src/charts/primitives/CartesianChart.tsx

@@ -53,6 +53,23 @@ export type AxisConfig<T> = {
   format?: (v: number) => string
   /** Horizontal grid rules. Default: on for the left axis, off for the right. */
   grid?: boolean
+  /**
+   * Round the scale's domain outward to nice tick values (d3's `scale.nice()`). Threaded to BOTH
+   * `probeAxisLabels` (measurement) and the real `scaleLinear` (rendering) — they must agree, or
+   * the measured margin is computed from ticks the axis never paints.
+   *
+   * Default `false`, deliberately: flipping the default would move the domain of every
+   * already-migrated chart. Opt in per axis.
+   */
+  nice?: boolean
+}
+
+/** Handed to `prependRows`/`extraRows` alongside the hovered datum — the same `visible`/`hidden`
+ * the plot itself draws from, so a hand-authored row can't structurally desync from legend
+ * toggling. */
+export type CartesianTooltipRowContext<T> = {
+  visible: readonly ChartSeries<T>[]
+  hidden: ReadonlySet<string>
 }
 
 export type CartesianTooltipConfig<T> = {
@@ -65,10 +82,12 @@ export type CartesianTooltipConfig<T> = {
   follow?: boolean
   /** Right-aligned badge in the tooltip header (e.g. a status label). */
   label?: (d: T) => { text: string; color: string } | null
-  /** Rows rendered BEFORE the derived per-series rows (a total, a context line). */
-  prependRows?: (d: T) => ReactNode
-  /** Rows appended after the derived per-series rows. */
-  extraRows?: (d: T) => ReactNode
+  /** Rows rendered BEFORE the derived per-series rows (a total, a context line). The second
+   * argument carries the same `visible`/`hidden` the plot draws from, so a hand-authored row
+   * stays in sync with legend toggling instead of naming a series the plot no longer draws. */
+  prependRows?: (d: T, ctx: CartesianTooltipRowContext<T>) => ReactNode
+  /** Rows appended after the derived per-series rows. Same `ctx` as {@link prependRows}. */
+  extraRows?: (d: T, ctx: CartesianTooltipRowContext<T>) => ReactNode
 }
 
 /** Everything a mark renderer needs. Handed to `CartesianChart`'s child on every render. */
@@ -339,9 +358,10 @@ function CartesianPlot<T>({
       probeAxisLabels({
         domain: leftDomain,
         ticks: leftTicks,
+        nice: y?.nice ?? false,
         ...(y?.format !== undefined && { format: y.format }),
       }),
-    [leftDomain, leftTicks, y?.format],
+    [leftDomain, leftTicks, y?.format, y?.nice],
   )
 
   const { labels: rightLabels, format: rightFormat } = useMemo(
@@ -351,9 +371,10 @@ function CartesianPlot<T>({
         : probeAxisLabels({
             domain: rightDomain,
             ticks: rightTicks,
+            nice: y2?.nice ?? false,
             ...(y2?.format !== undefined && { format: y2.format }),
           }),
-    [rightDomain, rightTicks, y2?.format],
+    [rightDomain, rightTicks, y2?.format, y2?.nice],
   )
 
   const xLabels = useMemo(() => keys.map(formatX), [keys, formatX])
@@ -378,13 +399,24 @@ function CartesianPlot<T>({
     [keys, xMax],
   )
   const yScale = useMemo(
-    () => scaleLinear<number>({ domain: leftDomain, range: [yMax, 0] }),
-    [leftDomain, yMax],
+    () =>
+      scaleLinear<number>({
+        domain: leftDomain,
+        range: [yMax, 0],
+        ...(y?.nice === true && { nice: true }),
+      }),
+    [leftDomain, yMax, y?.nice],
   )
   const y2Scale = useMemo(
     () =>
-      rightDomain === null ? null : scaleLinear<number>({ domain: rightDomain, range: [yMax, 0] }),
-    [rightDomain, yMax],
+      rightDomain === null
+        ? null
+        : scaleLinear<number>({
+            domain: rightDomain,
+            range: [yMax, 0],
+            ...(y2?.nice === true && { nice: true }),
+          }),
+    [rightDomain, yMax, y2?.nice],
   )
 
   const tickValues = useMemo(
@@ -545,7 +577,7 @@ function CartesianPlot<T>({
             {...(badge !== null && { label: badge.text, labelColor: badge.color })}
           />
           <TooltipBody>
-            {tooltipCfg?.prependRows?.(point)}
+            {tooltipCfg?.prependRows?.(point, { visible, hidden })}
             {rows.map((row) => (
               <TooltipRow
                 key={row.key}
@@ -557,7 +589,7 @@ function CartesianPlot<T>({
                 {...(row.strokeWidth !== undefined && { strokeWidth: row.strokeWidth })}
               />
             ))}
-            {tooltipCfg?.extraRows?.(point)}
+            {tooltipCfg?.extraRows?.(point, { visible, hidden })}
           </TooltipBody>
         </ChartTooltipFloat>
       )}

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

@@ -46,3 +46,33 @@ describe('ChartLegend note', () => {
     expect(markup).toContain('est.')
   })
 })
+
+describe('ChartLegend strokeOpacity — the swatch cannot lie about a dimmed line', () => {
+  test('a line swatch honors a fractional strokeOpacity', () => {
+    const markup = render([{ ...BASE, shape: 'line', strokeOpacity: 0.4 }])
+    expect(markup).toContain('stroke-opacity="0.4"')
+  })
+
+  test('defaults to full opacity when unset', () => {
+    const markup = render([{ ...BASE, shape: 'line' }])
+    expect(markup).toContain('stroke-opacity="1"')
+  })
+
+  test('a folded MA-companion child swatch honors it too', () => {
+    const markup = render([
+      {
+        ...BASE,
+        children: [
+          {
+            key: 'ma',
+            label: '7d MA',
+            color: 'var(--vx-fill-2)',
+            shape: 'line',
+            strokeOpacity: 0.4,
+          },
+        ],
+      },
+    ])
+    expect(markup).toContain('stroke-opacity="0.4"')
+  })
+})

package/src/charts/primitives/ChartLegend.tsx

@@ -13,6 +13,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,
@@ -113,6 +116,7 @@ function LegendSwatch({ item, idPrefix }: { item: LegendEntry; idPrefix: string
           y2={7}
           stroke={item.color}
           strokeWidth={item.strokeWidth ?? 2.5}
+          strokeOpacity={item.strokeOpacity ?? 1}
           strokeDasharray={item.dashed ? VX.dashArray : undefined}
         />
         <line
@@ -122,6 +126,7 @@ function LegendSwatch({ item, idPrefix }: { item: LegendEntry; idPrefix: string
           y2={7}
           stroke={item.secondColor}
           strokeWidth={item.strokeWidth ?? 2.5}
+          strokeOpacity={item.strokeOpacity ?? 1}
           strokeDasharray={item.dashed ? VX.dashArray : undefined}
         />
       </svg>
@@ -173,6 +178,7 @@ function LegendSwatch({ item, idPrefix }: { item: LegendEntry; idPrefix: string
         y2={3}
         stroke={item.color}
         strokeWidth={item.strokeWidth ?? 3}
+        strokeOpacity={item.strokeOpacity ?? 1}
         strokeLinecap="round"
         strokeDasharray={item.dashed ? VX.dashArray : undefined}
       />
@@ -222,6 +228,7 @@ function LegendChildSwatch({ item }: { item: LegendEntry }) {
         y2={5}
         stroke={item.color}
         strokeWidth={item.strokeWidth ?? 2}
+        strokeOpacity={item.strokeOpacity ?? 1}
         strokeDasharray={item.dashed ? VX.dashArray : undefined}
       />
     </svg>

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

@@ -60,4 +60,64 @@ describe('XZoneRects', () => {
   test('an empty zones array renders no rects', () => {
     expect(render([])).not.toContain('<rect')
   })
+
+  // Mirrors XZoneRects' own bound resolution exactly (same clamp + sign math), so expectations
+  // never drift from the implementation's floating-point arithmetic.
+  function edgeBound(key: string, sign: 1 | -1): number {
+    const step = xScale.step()
+    const [rangeStart, rangeEnd] = xScale.range() as [number, number]
+    const rangeMin = Math.min(rangeStart, rangeEnd)
+    const rangeMax = Math.max(rangeStart, rangeEnd)
+    const center = xScale(key) as number
+    return Math.min(Math.max(center + sign * (step / 2), rangeMin), rangeMax)
+  }
+
+  test('align: "edge" widens a two-key band by exactly one step over center mode', () => {
+    const step = xScale.step()
+    const centerFrom = xScale('b') as number
+    const centerTo = xScale('c') as number
+    const centerMarkup = render([{ from: 'b', to: 'c', fill: 'red' }])
+    const edgeMarkup = render([{ from: 'b', to: 'c', fill: 'red', align: 'edge' }])
+    expect(centerMarkup).toContain(`width="${centerTo - centerFrom}"`)
+    const edgeFrom = edgeBound('b', -1)
+    const edgeTo = edgeBound('c', 1)
+    expect(edgeMarkup).toContain(`x="${edgeFrom}"`)
+    expect(edgeMarkup).toContain(`width="${edgeTo - edgeFrom}"`)
+    expect(edgeTo - edgeFrom).toBeCloseTo(centerTo - centerFrom + step, 10)
+  })
+
+  test('align: "edge" with from === to renders exactly one step wide, where center renders nothing', () => {
+    const step = xScale.step()
+    const centerMarkup = render([{ from: 'b', to: 'b', fill: 'red' }])
+    const edgeMarkup = render([{ from: 'b', to: 'b', fill: 'red', align: 'edge' }])
+    expect(centerMarkup).not.toContain('<rect')
+    const edgeFrom = edgeBound('b', -1)
+    const edgeTo = edgeBound('b', 1)
+    expect(edgeMarkup).toContain(`x="${edgeFrom}"`)
+    expect(edgeMarkup).toContain(`width="${edgeTo - edgeFrom}"`)
+    expect(edgeTo - edgeFrom).toBeCloseTo(step, 10)
+  })
+
+  test('an unknown key is skipped in both align modes', () => {
+    const centerMarkup = render([{ from: 'not-in-domain', to: 'c', fill: 'red' }])
+    const edgeMarkup = render([{ from: 'not-in-domain', to: 'c', fill: 'red', align: 'edge' }])
+    expect(centerMarkup).not.toContain('<rect')
+    expect(edgeMarkup).not.toContain('<rect')
+  })
+
+  test('align: "edge" clamps the widened left edge at the first sample into the plot range', () => {
+    const [rangeStart] = xScale.range() as [number, number]
+    const markup = render([{ from: 'a', to: 'a', fill: 'red', align: 'edge' }])
+    const edgeTo = edgeBound('a', 1)
+    expect(markup).toContain(`x="${rangeStart}"`)
+    expect(markup).toContain(`width="${edgeTo - rangeStart}"`)
+  })
+
+  test('align: "edge" clamps the widened right edge at the last sample into the plot range', () => {
+    const [, rangeEnd] = xScale.range() as [number, number]
+    const markup = render([{ from: 'd', to: 'd', fill: 'red', align: 'edge' }])
+    const edgeFrom = edgeBound('d', -1)
+    expect(markup).toContain(`x="${edgeFrom}"`)
+    expect(markup).toContain(`width="${rangeEnd - edgeFrom}"`)
+  })
 })