basalt-ui 1.31.0 → 1.32.1

package/src/charts/kinds/BandStrip.tsx

@@ -8,21 +8,15 @@ import type { ChartMargin } from '../../tokens'
 import type { CursorResolution } from '../cursor/resolve'
 import { useBandPlot } from '../hooks/useBandPlot'
 import type { BandFold, BandTooltipConfig } from '../hooks/useBandPlot'
-import { AxisBottomDate } from '../primitives/Axes'
 import { ChartFrame, resolveLegend } from '../primitives/ChartFrame'
 import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
-import {
-  ChartTooltipFloat,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow,
-} from '../primitives/ChartTooltip'
+import { TooltipRow } from '../primitives/ChartTooltip'
 import { Crosshair } from '../primitives/Crosshair'
 import { HatchPattern, hatchFill, hatchSizeFor } from '../primitives/HatchPattern'
-import { HoverOverlay } from '../primitives/HoverOverlay'
 import type { ChartState } from '../primitives/ChartPending'
 import type { ChartLegendConfig, SeriesStyle } from '../series'
 import { fmtAxisDate } from '../utils/format'
+import { BandAxisOverlay, BandTooltip, clampFraction } from './band-chrome'
 import { isDev } from '../../common/is-dev'
 
 /**
@@ -256,7 +250,7 @@ function BandStripPlot<T>(props: BandStripPlotProps<T>) {
     ...(tooltip !== undefined && { tooltip }),
   })
 
-  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band
+  const { bands, margin, plotWidth, point, crosshairX, step, bandWidth } = band
   const stripHeight = Math.max(plot.height - margin.top - margin.bottom, 1)
   const hatchId = `${chartId}-band-absent`
   if (absentState !== undefined && !styleByKey.has(absentState)) {
@@ -351,8 +345,6 @@ function BandStripPlot<T>(props: BandStripPlotProps<T>) {
 
   if (plotWidth <= 0 || bands.length === 0) return null
 
-  const cfg = tooltip === false ? undefined : tooltip
-  const badge = cfg?.label === undefined || point === null ? null : cfg.label(point)
   const row = point === null ? null : deriveBandRow(getBand(point), styleByKey, hidden, point)
 
   return (
@@ -383,69 +375,31 @@ function BandStripPlot<T>(props: BandStripPlotProps<T>) {
 
           {crosshairX !== null && <Crosshair x={crosshairX} top={0} bottom={stripHeight} />}
 
-          <AxisBottomDate
-            top={stripHeight}
-            scale={scale}
-            tickValues={band.tickValues}
-            tickFormat={(v) => formatX(String(v))}
-            anchorTerminals={band.xAnchorTerminals}
-            {...(band.xWrapWidth !== undefined && { wrapWidth: band.xWrapWidth })}
-          />
-
-          <HoverOverlay
-            width={plotWidth}
+          <BandAxisOverlay
+            band={band}
             height={stripHeight}
-            onMove={cursor.onPointerMove}
-            onDown={cursor.onPointerDown}
-            onUp={cursor.onPointerUp}
-            onLeave={cursor.onPointerLeave}
-            onKeyDown={cursor.onKeyDown}
-            onBlur={cursor.onBlur}
-            valueMax={Math.max(bands.length - 1, 0)}
-            {...(point !== null && {
-              valueNow: bands.indexOf(point),
-              valueText: formatX(getX(point)),
-            })}
-            {...(ariaLabel !== undefined && { ariaLabel })}
+            getX={getX}
+            formatX={formatX}
+            ariaLabel={ariaLabel}
           />
         </Group>
       </svg>
 
-      {band.showTooltip && point !== null && (
-        <ChartTooltipFloat anchor={band.tooltipAnchor} ariaLive={band.ariaLive}>
-          <TooltipHeader
-            date={getX(point)}
-            {...(cfg?.formatHeader !== undefined && {
-              format: (key: string) => cfg.formatHeader?.(key, point) ?? key,
-            })}
-            {...(badge !== null && { label: badge.text, labelColor: badge.color })}
+      <BandTooltip band={band} tooltip={tooltip} getX={getX} hidden={hidden}>
+        {row !== null && (
+          <TooltipRow
+            color={row.color}
+            label={row.label}
+            value={row.value}
+            shape={row.shape}
+            dashed={row.dashed}
           />
-          <TooltipBody>
-            {cfg?.prependRows?.(point, { hidden })}
-            {row !== null && (
-              <TooltipRow
-                color={row.color}
-                label={row.label}
-                value={row.value}
-                shape={row.shape}
-                dashed={row.dashed}
-              />
-            )}
-            {cfg?.extraRows?.(point, { hidden })}
-          </TooltipBody>
-        </ChartTooltipFloat>
-      )}
+        )}
+      </BandTooltip>
     </>
   )
 }
 
-/** A 0..1 share. Non-finite (a 0/0 fold count) reads as "nothing is absent" — the conservative
- * end, since the alternative is a band that does not render at all. */
-function clampFraction(value: number | undefined): number {
-  if (value === undefined || !Number.isFinite(value)) return 0
-  return Math.min(Math.max(value, 0), 1)
-}
-
 /**
  * The strip's one derived row: the hovered band's STATE, named and formatted by its own `series`
  * entry. A strip cannot show a row for a state it does not draw, and cannot name a state the

package/src/charts/kinds/DualPanel.tsx

@@ -13,11 +13,12 @@ import {
   TooltipBody,
   TooltipHeader,
   TooltipRow,
+  TooltipRows,
 } from '../primitives/ChartTooltip'
 import { ChartFrame, resolveLegend } from '../primitives/ChartFrame'
 import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
 import { Crosshair, SeriesDot } from '../primitives/Crosshair'
-import { HoverOverlay } from '../primitives/HoverOverlay'
+import { cursorSliderProps, HoverOverlay } from '../primitives/HoverOverlay'
 import { ZoneRects } from '../primitives/ZoneRects'
 import type { ZoneSpec } from '../primitives/ZoneRects'
 import type { ChartState } from '../primitives/ChartPending'
@@ -595,18 +596,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
           <HoverOverlay
             width={xMax}
             height={topH + PANE_GAP}
-            onMove={cursor.onPointerMove}
-            onDown={cursor.onPointerDown}
-            onUp={cursor.onPointerUp}
-            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 })}
+            {...cursorSliderProps({ cursor, data, getX, formatX, ariaLabel })}
           />
         </Group>
 
@@ -688,17 +678,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             })()}
           />
           <TooltipBody>
-            {deriveTooltipRows(visibleSeries, point, formatTop).map((row) => (
-              <TooltipRow
-                key={row.key}
-                color={row.color}
-                label={row.label}
-                value={row.value}
-                shape={row.shape}
-                dashed={row.dashed}
-                {...(row.strokeWidth !== undefined && { strokeWidth: row.strokeWidth })}
-              />
-            ))}
+            <TooltipRows rows={deriveTooltipRows(visibleSeries, point, formatTop)} />
             {barVisible &&
               (() => {
                 const v = getBar(point)

package/src/charts/kinds/MirroredBars.tsx

@@ -10,22 +10,17 @@ import type { CursorResolution } from '../cursor/resolve'
 import { useBandPlot } from '../hooks/useBandPlot'
 import type { BandFold, BandTooltipConfig } from '../hooks/useBandPlot'
 import { probeAxisLabels } from '../layout/auto-margin'
-import { AxisBottomDate, AxisLeftNumeric } from '../primitives/Axes'
+import { AxisLeftNumeric } from '../primitives/Axes'
 import { ChartFrame, resolveLegend } from '../primitives/ChartFrame'
 import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
-import {
-  ChartTooltipFloat,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow,
-} from '../primitives/ChartTooltip'
+import { TooltipRows } from '../primitives/ChartTooltip'
 import { Crosshair } from '../primitives/Crosshair'
 import { HatchPattern, hatchFill, hatchSizeFor } from '../primitives/HatchPattern'
-import { HoverOverlay } from '../primitives/HoverOverlay'
 import type { ChartState } from '../primitives/ChartPending'
 import { deriveTooltipRows } from '../series'
 import type { ChartLegendConfig, ChartSeries } from '../series'
 import { fmtAxisDate } from '../utils/format'
+import { BandAxisOverlay, BandTooltip, clampFraction } from './band-chrome'
 
 /** One of the two panes. Each resolves its own domain — that is the whole point of the kind. */
 export type MirroredBarPane = {
@@ -242,7 +237,7 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
     ...(tooltip !== undefined && { tooltip }),
   })
 
-  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band
+  const { bands, margin, plotWidth, point, crosshairX, step, bandWidth } = band
 
   // ── Pass 2: the pane rects, now that the plot height is known ───────────────────────────────
   const barBand = Math.max(plot.height - margin.top - margin.bottom, 2)
@@ -346,8 +341,6 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
 
   if (plotWidth <= 0 || bands.length === 0) return null
 
-  const cfg = tooltip === false ? undefined : tooltip
-  const badge = cfg?.label === undefined || point === null ? null : cfg.label(point)
   // Each pane's row falls back to ITS OWN axis formatter, never the other pane's — the two panes
   // are in different units by construction (an explicit per-series `formatValue` still wins).
   const visibleSeries = series
@@ -419,70 +412,23 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
 
           {crosshairX !== null && <Crosshair x={crosshairX} top={0} bottom={barBand} />}
 
-          <AxisBottomDate
-            top={barBand}
-            scale={scale}
-            tickValues={band.tickValues}
-            tickFormat={(v) => formatX(String(v))}
-            anchorTerminals={band.xAnchorTerminals}
-            {...(band.xWrapWidth !== undefined && { wrapWidth: band.xWrapWidth })}
-          />
-
-          <HoverOverlay
-            width={plotWidth}
+          <BandAxisOverlay
+            band={band}
             height={barBand}
-            onMove={cursor.onPointerMove}
-            onDown={cursor.onPointerDown}
-            onUp={cursor.onPointerUp}
-            onLeave={cursor.onPointerLeave}
-            onKeyDown={cursor.onKeyDown}
-            onBlur={cursor.onBlur}
-            valueMax={Math.max(bands.length - 1, 0)}
-            {...(point !== null && {
-              valueNow: bands.indexOf(point),
-              valueText: formatX(getX(point)),
-            })}
-            {...(ariaLabel !== undefined && { ariaLabel })}
+            getX={getX}
+            formatX={formatX}
+            ariaLabel={ariaLabel}
           />
         </Group>
       </svg>
 
-      {band.showTooltip && point !== null && (
-        <ChartTooltipFloat anchor={band.tooltipAnchor} ariaLive={band.ariaLive}>
-          <TooltipHeader
-            date={getX(point)}
-            {...(cfg?.formatHeader !== undefined && {
-              format: (key: string) => cfg.formatHeader?.(key, point) ?? key,
-            })}
-            {...(badge !== null && { label: badge.text, labelColor: badge.color })}
-          />
-          <TooltipBody>
-            {cfg?.prependRows?.(point, { hidden })}
-            {rows.map((row) => (
-              <TooltipRow
-                key={row.key}
-                color={row.color}
-                label={row.label}
-                value={row.value}
-                shape={row.shape}
-                dashed={row.dashed}
-                {...(row.strokeWidth !== undefined && { strokeWidth: row.strokeWidth })}
-              />
-            ))}
-            {cfg?.extraRows?.(point, { hidden })}
-          </TooltipBody>
-        </ChartTooltipFloat>
-      )}
+      <BandTooltip band={band} tooltip={tooltip} getX={getX} hidden={hidden}>
+        <TooltipRows rows={rows} />
+      </BandTooltip>
     </>
   )
 }
 
-/** A 0..1 share, non-finite included — see `BandStrip`'s identical guard. */
-function clampFraction(value: number | undefined): number {
-  if (value === undefined || !Number.isFinite(value)) return 0
-  return Math.min(Math.max(value, 0), 1)
-}
-
 /** A drawable value, or null. See the call site for why NaN is not drawable. */
 function finiteOrNull(v: number | null | undefined): number | null {
   return v === null || v === undefined || Number.isNaN(v) ? null : v

package/src/charts/kinds/band-chrome.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react'
+import type { BandPlot, BandTooltipConfig } from '../hooks/useBandPlot'
+import { AxisBottomDate } from '../primitives/Axes'
+import { ChartTooltipFloat, TooltipBody, TooltipHeader } from '../primitives/ChartTooltip'
+import { cursorSliderProps, HoverOverlay } from '../primitives/HoverOverlay'
+
+/**
+ * The chrome `BandStrip` and `MirroredBars` share around their own marks — the slot axis, the
+ * keyboard/pointer overlay and the tooltip shell — so the two `useBandPlot` kinds cannot drift in
+ * any of them. Internal; neither is exported from a barrel.
+ *
+ * theme-allow-file hand-rolled-plot — the slot axis and overlay of the two declared banded
+ * exceptions (`BandStrip`, `MirroredBars`), which carry the same waiver for the same reason.
+ */
+
+/** A 0..1 share. Non-finite (a 0/0 fold count) reads as "nothing is absent" — the conservative
+ * end, since the alternative is a band that does not render at all. */
+export function clampFraction(value: number | undefined): number {
+  if (value === undefined || !Number.isFinite(value)) return 0
+  return Math.min(Math.max(value, 0), 1)
+}
+
+/** The slot axis under a `height`-tall band row, plus the hover/keyboard overlay over it. */
+export function BandAxisOverlay<T>({
+  band,
+  height,
+  getX,
+  formatX,
+  ariaLabel,
+}: {
+  band: BandPlot<T>
+  height: number
+  getX: (d: T) => string
+  formatX: (key: string) => string
+  ariaLabel: string | undefined
+}) {
+  return (
+    <>
+      <AxisBottomDate
+        top={height}
+        scale={band.scale}
+        tickValues={band.tickValues}
+        tickFormat={(v) => formatX(String(v))}
+        anchorTerminals={band.xAnchorTerminals}
+        {...(band.xWrapWidth !== undefined && { wrapWidth: band.xWrapWidth })}
+      />
+      <HoverOverlay
+        width={band.plotWidth}
+        height={height}
+        {...cursorSliderProps({ cursor: band.cursor, data: band.bands, getX, formatX, ariaLabel })}
+      />
+    </>
+  )
+}
+
+/** The tooltip shell: header (+ badge), the consumer's prepended rows, the kind's own derived
+ * `children` rows, the consumer's extra rows. Renders nothing off-hover or with `tooltip: false`. */
+export function BandTooltip<T>({
+  band,
+  tooltip,
+  getX,
+  hidden,
+  children,
+}: {
+  band: BandPlot<T>
+  tooltip: BandTooltipConfig<T> | false | undefined
+  getX: (d: T) => string
+  hidden: ReadonlySet<string>
+  children: ReactNode
+}) {
+  const { point } = band
+  if (!band.showTooltip || point === null) return null
+  const cfg = tooltip === false ? undefined : tooltip
+  const badge = cfg?.label === undefined ? null : cfg.label(point)
+  return (
+    <ChartTooltipFloat anchor={band.tooltipAnchor} ariaLive={band.ariaLive}>
+      <TooltipHeader
+        date={getX(point)}
+        {...(cfg?.formatHeader !== undefined && {
+          format: (key: string) => cfg.formatHeader?.(key, point) ?? key,
+        })}
+        {...(badge !== null && { label: badge.text, labelColor: badge.color })}
+      />
+      <TooltipBody>
+        {cfg?.prependRows?.(point, { hidden })}
+        {children}
+        {cfg?.extraRows?.(point, { hidden })}
+      </TooltipBody>
+    </ChartTooltipFloat>
+  )
+}

package/src/charts/primitives/CartesianChart.tsx

@@ -32,9 +32,9 @@ import {
 } from './chart-layout'
 import { useChartContainerClass, useChartMetrics } from './chart-tier'
 import type { ChartState } from './ChartPending'
-import { ChartTooltipFloat, TooltipBody, TooltipHeader, TooltipRow } from './ChartTooltip'
+import { ChartTooltipFloat, TooltipBody, TooltipHeader, TooltipRows } from './ChartTooltip'
 import { Crosshair, SeriesDot } from './Crosshair'
-import { HoverOverlay } from './HoverOverlay'
+import { cursorSliderProps, HoverOverlay } from './HoverOverlay'
 import { XZoneRects } from './XZoneRects'
 import type { XZoneSpec } from './XZoneRects'
 import { ZoneRects } from './ZoneRects'
@@ -405,46 +405,51 @@ function buildYScale<T>(
 }
 
 /**
- * `tickLabelPx`'s resolver, split out of a two-deep ternary: a 45° label projects wider than its
- * flat glyph box, so it measures through {@link rotatedXLabelPx} instead of the flat/wrapped
- * numbers every other rotation uses; a wrapped flat label (`wrapWidth` set) uses ITS width, an
- * unwrapped one the plain flat width. `rotate === 90` falls through to the flat/wrapped branch
- * unchanged — `wrapWidth` is only ever set for `rotate === 0` (see its own definition), so a 90°
- * axis always resolves to `flatLabelPx` here, matching the pre-split behaviour exactly.
+ * The x-axis margin ladder, as one pure decision. The flat (unrotated) margin is what every case
+ * resolves to except a rotated or wrapped axis, and it is what the rotation decision itself is
+ * measured against — deciding needs an `xMax`, and `xMax` needs a margin, so the flat pass breaks
+ * the loop. An explicit `xLabelRotate` always wins — including `0`, the documented "never rotate"
+ * opt-out; unset, only a categorical (band) axis wraps, and rotates only when even wrapped it
+ * doesn't fit (`planXLabels`) — a time or number domain only thins.
+ *
+ * Per rotation: 45° reuses its pre-measured margin and measures its tick room through
+ * {@link rotatedXLabelPx} (a rotated label projects wider than its glyph box); 90° measures fresh
+ * (one line box wide, so the flat label room governs its thinning); a wrapped flat axis re-measures
+ * for its extra line(s) and thins by the wrapped width.
  */
-function resolveTickLabelPx(input: {
-  rotate: 0 | 45 | 90
-  wrapWidth: number | undefined
-  xLabels: string[]
-  axisFont: number
+function resolveXAxisLayout(input: {
+  marginInput: AutoMarginInput
+  flatMargin: ChartMargin
+  rotated45Margin: ChartMargin
   flatLabelPx: number
-  wrappedLabelPx: number
-}): number {
-  const { rotate, wrapWidth, xLabels, axisFont, flatLabelPx, wrappedLabelPx } = input
-  if (rotate === 45) return rotatedXLabelPx(xLabels, axisFont)
-  return wrapWidth === undefined ? flatLabelPx : wrappedLabelPx
-}
-
-/**
- * `baseMargin`'s resolver, split out of the same two-deep ternary: an unrotated, unwrapped axis
- * keeps the already-measured flat margin; wrapping re-measures for the extra line(s)
- * (`bottomLines`); a 45° rotation reuses its own pre-measured margin ({@link rotated45Margin}); a
- * 90° one measures fresh (no pre-measured twin exists for it, unlike 45°).
- */
-function resolveBaseMargin(input: {
+  xLabels: string[]
+  fontPx: number
+  plotWidth: number
+  categorical: boolean
+  xLabelRotate: 0 | 45 | 90 | undefined
+}): {
+  baseMargin: ChartMargin
   rotate: 0 | 45 | 90
   wrapWidth: number | undefined
-  flatMargin: ChartMargin
-  rotated45Margin: ChartMargin
-  marginInput: AutoMarginInput
-  xPlanLines: number
-}): ChartMargin {
-  const { rotate, wrapWidth, flatMargin, rotated45Margin, marginInput, xPlanLines } = input
-  if (rotate === 45) return rotated45Margin
-  if (rotate === 90) return autoMargin({ ...marginInput, rotate })
-  return wrapWidth === undefined
-    ? flatMargin
-    : autoMargin({ ...marginInput, bottomLines: xPlanLines })
+  tickLabelPx: number
+} {
+  const { marginInput, flatMargin, rotated45Margin, flatLabelPx, xLabels, fontPx, categorical } =
+    input
+  const flatXMax = Math.max(input.plotWidth - flatMargin.left - flatMargin.right, 0)
+  const xPlan = planXLabels({ labels: xLabels, plotWidth: flatXMax, fontPx, categorical })
+  const rotate = input.xLabelRotate ?? (categorical ? xPlan.rotate : 0)
+  if (rotate === 45) {
+    const tickLabelPx = rotatedXLabelPx(xLabels, fontPx)
+    return { baseMargin: rotated45Margin, rotate, wrapWidth: undefined, tickLabelPx }
+  }
+  if (rotate === 90) {
+    const baseMargin = autoMargin({ ...marginInput, rotate })
+    return { baseMargin, rotate, wrapWidth: undefined, tickLabelPx: flatLabelPx }
+  }
+  if (!xPlan.wrap)
+    return { baseMargin: flatMargin, rotate, wrapWidth: undefined, tickLabelPx: flatLabelPx }
+  const baseMargin = autoMargin({ ...marginInput, bottomLines: xPlan.lines })
+  return { baseMargin, rotate, wrapWidth: xPlan.wrapPx, tickLabelPx: xPlan.labelPx }
 }
 
 /**
@@ -665,16 +670,16 @@ function CartesianPlot<T>({
   // the actual law: only a band (category) domain wraps or rotates; time and number domains thin.
   const categorical = tight && classifyDomain(keys) === 'band'
 
-  /** The horizontal room one x tick label needs: the widest string that could be painted, plus
-   * breathing space to its neighbour. Feeds `smartTicks`, which otherwise thinned the axis by a
-   * constant that knew nothing about the label. Measured at the tick font the axis will actually
-   * paint, which the tier moves (`docs/CHARTS-SPEC.md` §8). */
-  const xLabelPx = useMemo(() => xLabelPxFor(xLabels, tier.axisFont), [xLabels, tier.axisFont])
+  // The room one flat x tick label needs at the tick font the axis will actually paint
+  // (`docs/CHARTS-SPEC.md` §8) — keyed on the labels and font alone, so a y-label or margin change
+  // never re-measures every x label.
+  const flatLabelPx = useMemo(() => xLabelPxFor(xLabels, tier.axisFont), [xLabels, tier.axisFont])
 
-  /** Everything `autoMargin` measures except the rotation — shared by all three passes below so a
-   * measured label can never differ between the one that DECIDES and the one that PAINTS. */
-  const marginInput = useMemo(
-    () => ({
+  // Everything `autoMargin` measures except the rotation, measured once for every pass so a label
+  // can never differ between the one that DECIDES and the one that PAINTS — plus the 45° margin (a
+  // rotated label reaches into the left gutter).
+  const measured = useMemo(() => {
+    const marginInput: AutoMarginInput = {
       left: yPlacement === 'outside' ? leftLabels : [],
       right: rightLabels,
       bottom: xLabels,
@@ -684,61 +689,34 @@ function CartesianPlot<T>({
       floor: resolveMarginFloor(yPlacement, tier.margin),
       anchorTerminals: tight,
       ...(marginOverride !== undefined && { override: marginOverride }),
-    }),
-    [
-      leftLabels,
-      rightLabels,
-      xLabels,
-      tier.axisFont,
-      tier.margin,
-      marginOverride,
-      tight,
-      yPlacement,
-    ],
-  )
-
-  /** The margin an UNROTATED axis resolves to. It is the final margin in every case except an
-   * auto-rotated phone axis, and it is what the rotation decision itself is measured against —
-   * deciding needs an `xMax`, and `xMax` needs a margin, so the unrotated pass breaks the loop. */
-  const flatMargin = useMemo(() => autoMargin(marginInput), [marginInput])
-
-  /** And the margin a 45° axis would resolve to — the OTHER half of the decision, needed only for
-   * a categorical (band) domain that still overflows once wrapped (`planXLabels`'s own rotate
-   * case). A rotated label reaches into the left gutter, so rotating spends plot width. */
-  const rotated45Margin = useMemo(() => autoMargin({ ...marginInput, rotate: 45 }), [marginInput])
-
-  // An explicit `xLabelRotate` always wins — including `0`, which is the documented "never rotate"
-  // opt-out. Only an unset one falls through to the domain-driven default: a categorical (band)
-  // axis wraps before it rotates, and rotates only when even wrapped it doesn't fit
-  // (`planXLabels`). A time or number domain never wraps or rotates — it only thins.
-  const flatXMax = Math.max(plot.width - flatMargin.left - flatMargin.right, 0)
-  const xPlan = useMemo(
-    () => planXLabels({ labels: xLabels, plotWidth: flatXMax, fontPx: tier.axisFont, categorical }),
-    [xLabels, flatXMax, tier.axisFont, categorical],
-  )
-  const rotate = xLabelRotate ?? (categorical ? xPlan.rotate : 0)
-  const wrapWidth = rotate === 0 && xPlan.wrap ? xPlan.wrapPx : undefined
-  // A 90° label is one line box wide, so the constant floor governs it; a 45° one projects wider.
-  const tickLabelPx = resolveTickLabelPx({
-    rotate,
-    wrapWidth,
+    }
+    return {
+      marginInput,
+      flatMargin: autoMargin(marginInput),
+      rotated45Margin: autoMargin({ ...marginInput, rotate: 45 }),
+    }
+  }, [
+    leftLabels,
+    rightLabels,
     xLabels,
-    axisFont: tier.axisFont,
-    flatLabelPx: xLabelPx,
-    wrappedLabelPx: xPlan.labelPx,
-  })
-
-  const baseMargin = useMemo(
+    tier.axisFont,
+    tier.margin,
+    marginOverride,
+    tight,
+    yPlacement,
+  ])
+  const { baseMargin, rotate, wrapWidth, tickLabelPx } = useMemo(
     () =>
-      resolveBaseMargin({
-        rotate,
-        wrapWidth,
-        flatMargin,
-        rotated45Margin,
-        marginInput,
-        xPlanLines: xPlan.lines,
+      resolveXAxisLayout({
+        ...measured,
+        flatLabelPx,
+        xLabels,
+        fontPx: tier.axisFont,
+        plotWidth: plot.width,
+        categorical,
+        xLabelRotate,
       }),
-    [flatMargin, rotated45Margin, marginInput, rotate, wrapWidth, xPlan.lines],
+    [measured, flatLabelPx, xLabels, tier.axisFont, plot.width, categorical, xLabelRotate],
   )
 
   // End-of-line labels are planned FIRST, against the base margin: the right gutter is reserved
@@ -998,18 +976,7 @@ function CartesianPlot<T>({
           <HoverOverlay
             width={xMax}
             height={yMax}
-            onMove={cursor.onPointerMove}
-            onDown={cursor.onPointerDown}
-            onUp={cursor.onPointerUp}
-            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 })}
+            {...cursorSliderProps({ cursor: cursor, data: data, getX, formatX, ariaLabel })}
           />
         </Group>
       </svg>
@@ -1025,17 +992,7 @@ function CartesianPlot<T>({
           />
           <TooltipBody>
             {tooltipCfg?.prependRows?.(point, { visible, hidden })}
-            {rows.map((row) => (
-              <TooltipRow
-                key={row.key}
-                color={row.color}
-                label={row.label}
-                value={row.value}
-                shape={row.shape}
-                dashed={row.dashed}
-                {...(row.strokeWidth !== undefined && { strokeWidth: row.strokeWidth })}
-              />
-            ))}
+            <TooltipRows rows={rows} />
             {tooltipCfg?.extraRows?.(point, { visible, hidden })}
           </TooltipBody>
         </ChartTooltipFloat>