basalt-ui 1.41.0 → 2.0.0

package/src/charts/primitives/ChartTooltip.tsx

@@ -1,265 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react'
-import { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react'
-import { createPortal } from 'react-dom'
-import { VX } from '../../tokens'
-import type { TooltipRowData } from '../series'
-import { fmtTooltipDate } from '../utils/format'
-import { useChartMetrics } from './chart-tier'
-
-// Panel bg + shadow-card, radius 8 (docs/DESIGN-SPEC.md §5's "Tooltip/popover/menu" idiom) — the
-// same depth-via-shadow treatment as ChartCard, never a `border` property. Surfaces resolve per
-// theme via CSS vars, so this is a static object (no useMemo/hook needed).
-const TOOLTIP_STYLES: CSSProperties = {
-  position: 'fixed',
-  pointerEvents: 'none',
-  zIndex: VX.zIndexFloating,
-  backgroundColor: VX.surface.panel,
-  borderRadius: 'var(--vx-radius-floating)',
-  padding: '0',
-  fontSize: VX.text.xs,
-  lineHeight: '18px',
-  color: VX.ink,
-  boxShadow: VX.shadowCard,
-}
-
-/** Tooltip header — shows formatted date + optional right-aligned label with color. */
-export function TooltipHeader({
-  date,
-  label,
-  labelColor,
-  format = fmtTooltipDate,
-}: {
-  date: string
-  label?: string
-  labelColor?: string
-  /** Overrides `fmtTooltipDate` for the header text. Default: today's `fmtTooltipDate` behavior,
-   * unchanged. The seam exists because `fmtTooltipDate` regexes `YYYY-MM-DD` out of the key and
-   * builds a LOCAL `Date`, so a UTC ISO domain key names the wrong day next to `formatX`/the
-   * tooltip badge, which both resolve locally — a caller with a UTC key needs to supply its own. */
-  format?: (date: string) => string
-}) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: 16,
-        padding: '6px 10px',
-        borderBottom: `1px solid ${VX.divider}`,
-      }}
-    >
-      <span
-        style={{
-          fontSize: VX.text.micro,
-          fontWeight: 600,
-          fontFamily: 'var(--basalt-font-mono)',
-          color: VX.ink,
-        }}
-      >
-        {format(date)}
-      </span>
-      {label !== undefined && (
-        <span
-          style={{
-            fontSize: VX.text.micro,
-            fontWeight: 500,
-            fontFamily: 'var(--basalt-font-mono)',
-            color: labelColor,
-          }}
-        >
-          {label}
-        </span>
-      )}
-    </div>
-  )
-}
-
-/** Tooltip row — swatch + label + value. */
-export function TooltipRow({
-  color,
-  label,
-  value,
-  valueColor,
-  shape,
-  strokeWidth,
-  dashed,
-}: {
-  color: string
-  label: string
-  value: string
-  valueColor?: string
-  shape?: 'dot' | 'line' | 'bar'
-  strokeWidth?: number
-  /** Render the line swatch as dashed (only applies to shape='line'). */
-  dashed?: boolean
-}) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: 16,
-        padding: '0 10px',
-      }}
-    >
-      <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-        {shape === 'line' ? (
-          <svg width={12} height={10} style={{ flexShrink: 0 }}>
-            <line
-              x1={0}
-              y1={5}
-              x2={12}
-              y2={5}
-              stroke={color}
-              strokeWidth={strokeWidth ?? VX.lineWidth}
-              strokeDasharray={dashed ? VX.dashArray : undefined}
-            />
-          </svg>
-        ) : (
-          <span
-            style={{
-              width: 8,
-              height: 8,
-              borderRadius: 2, // theme-allow raw-surface — sub-scale tooltip micro-corner, below the 4px radius floor
-              backgroundColor: color,
-              flexShrink: 0,
-            }}
-          />
-        )}
-        {label}
-      </span>
-      <span style={{ fontWeight: 400, fontFamily: 'var(--basalt-font-mono)', color: valueColor }}>
-        {value}
-      </span>
-    </div>
-  )
-}
-
-/** The derived rows (`deriveTooltipRows`), one {@link TooltipRow} each. */
-export function TooltipRows({ rows }: { rows: readonly TooltipRowData[] }) {
-  return 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 })}
-    />
-  ))
-}
-
-export function TooltipBody({ children }: { children: ReactNode }) {
-  return <div style={{ padding: '5px 0' }}>{children}</div>
-}
-
-/**
- * "Am I on the client?", answered SYNCHRONOUSLY and hydration-safely.
- *
- * `useSyncExternalStore` is the one hook whose server snapshot React honours during BOTH
- * `renderToString` and the hydration pass, so the server sees `false` and the client's very first
- * render already sees `true` — no effect, no extra frame, and therefore no one-frame flash of a
- * missing tooltip on a hover that has already happened. An `useEffect`-set flag would be correct
- * on the server and a render late on the client. The store never emits, so nothing ever
- * re-subscribes.
- */
-const neverSubscribe = () => () => {}
-const onClient = () => true
-const onServer = () => false
-const useIsClient = (): boolean => useSyncExternalStore(neverSubscribe, onClient, onServer)
-
-/** Gap between the anchor point and the tooltip box, and the minimum distance kept from the
- * viewport edge. */
-const TOOLTIP_GAP = 12
-const VIEWPORT_MARGIN = 8
-
-/**
- * Floating tooltip positioned against a viewport-space anchor, with flip + clamp handled once for
- * every chart instead of per call site (this used to be recomputed inside each chart's own `useChartTooltip`, and only for
- * charts that remembered to use it).
- *
- * The box is measured after mount via `useLayoutEffect`, so the first paint of a given tooltip is
- * hidden rather than misplaced — a tooltip that flashes at the wrong corner reads as a bug.
- *
- * **It renders NOTHING on the server.** `createPortal` throws outright in `react-dom/server`
- * ("Portals are not currently supported by the server renderer"), and an unconditional portal made
- * this the single component in the package that could not be server-rendered. The guard is
- * {@link useIsClient}, not a `typeof document` check: under a DOM-preloaded test runner `document`
- * exists while `renderToString` still refuses portals. A tooltip is a hover artifact with nothing
- * to emit server-side, so rendering nothing is the whole fix, not a degradation.
- */
-export function ChartTooltipFloat({
-  anchor,
-  ariaLive = true,
-  children,
-}: {
-  anchor: { x: number; y: number } | null
-  /** Whether this tooltip announces itself to screen readers on every position change. Default
-   * true. Pass false for a cursor FOLLOWER's tooltip — N followers on a shared-cursor page all
-   * announcing on every pointer move would make the page unusable with a screen reader; only the
-   * cursor SOURCE should be `aria-live`. */
-  ariaLive?: boolean
-  children: ReactNode
-}) {
-  const ref = useRef<HTMLDivElement>(null)
-  const [box, setBox] = useState<{ width: number; height: number } | null>(null)
-  const isClient = useIsClient()
-  const { tooltipMinWidth } = useChartMetrics()
-
-  useLayoutEffect(() => {
-    const el = ref.current
-    if (el === null) return
-    const { offsetWidth, offsetHeight } = el
-    setBox((prev) =>
-      prev !== null && prev.width === offsetWidth && prev.height === offsetHeight
-        ? prev
-        : { width: offsetWidth, height: offsetHeight },
-    )
-  }, [children, anchor])
-
-  if (anchor === null) return null
-  // The SSR guard — see the component doc. A `typeof document` check does NOT cover this: under a
-  // jsdom/happy-dom-preloaded test runner `document` exists while `renderToString` still refuses
-  // portals, which is exactly how this shipped.
-  if (!isClient) return null
-
-  const width = box?.width ?? 0
-  const height = box?.height ?? 0
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-
-  // An anchor outside the viewport means the chart that owns it has scrolled off-screen. Clamping
-  // would paint a follower's box over unrelated chrome (the bottom nav — `R2C-3`); render nothing
-  // instead.
-  if (anchor.y < 0 || anchor.y > vh) return null
-
-  const flipsLeft = anchor.x + TOOLTIP_GAP + width + VIEWPORT_MARGIN > vw
-  const left = flipsLeft
-    ? Math.max(VIEWPORT_MARGIN, anchor.x - TOOLTIP_GAP - width)
-    : anchor.x + TOOLTIP_GAP
-  const top = Math.min(
-    Math.max(VIEWPORT_MARGIN, anchor.y - TOOLTIP_GAP),
-    Math.max(VIEWPORT_MARGIN, vh - height - VIEWPORT_MARGIN),
-  )
-
-  return createPortal(
-    <div
-      ref={ref}
-      role="tooltip"
-      {...(ariaLive && { 'aria-live': 'polite' as const })}
-      style={{
-        ...TOOLTIP_STYLES,
-        minWidth: tooltipMinWidth,
-        left,
-        top,
-        visibility: box === null ? 'hidden' : 'visible',
-      }}
-    >
-      {children}
-    </div>,
-    document.body,
-  )
-}

package/src/charts/primitives/Crosshair.tsx

@@ -1,43 +0,0 @@
-import type { ReactNode } from 'react'
-import { VX } from '../../tokens'
-import { useChartMetrics } from './chart-tier'
-
-/**
- * The shared vertical hover crosshair — one implementation for what used to be five hand-rolled
- * call sites (`MultiLine`, `ZonedLine`, `StackedArea`, `Bars`, `DualPanel`). `top`/`bottom` are the
- * plot-local y extent the line spans (usually `0` and the plot's `yMax`); `DualPanel` passes the
- * extent spanning both panes for its cross-pane crosshair.
- */
-export function Crosshair({
-  x,
-  top,
-  bottom,
-}: {
-  x: number
-  top: number
-  bottom: number
-}): ReactNode {
-  return <line x1={x} x2={x} y1={top} y2={bottom} stroke={VX.crosshair} strokeWidth={1} />
-}
-
-/**
- * The punched-out hover marker: a filled circle whose stroke is the chart background color, so it
- * reads as a "hole" cut into the line on both themes. Centralizes the `dotStroke = chart-bg` trick.
- *
- * The default radius tracks the ambient chart tier (`docs/CHARTS-SPEC.md` §8) — an explicit `r`
- * (a `getMarker`'s own radius) still wins.
- */
-export function SeriesDot({
-  cx,
-  cy,
-  color,
-  r,
-}: {
-  cx: number
-  cy: number
-  color: string
-  r?: number
-}): ReactNode {
-  const { dotR } = useChartMetrics()
-  return <circle cx={cx} cy={cy} r={r ?? dotR} fill={color} stroke={VX.dotStroke} strokeWidth={2} />
-}

package/src/charts/primitives/HatchPattern.tsx

@@ -1,55 +0,0 @@
-import type { ReactNode } from 'react'
-import { alpha } from '../../tokens'
-
-/**
- * A diagonal-hatch `<pattern>` — the one fill that reads as **absence** rather than as a weak
- * measurement.
- *
- * A faint solid tint cannot do this job: it sits on the same perceptual axis as every other
- * intensity of the same hue, so "nothing was measured here" and "everything measured here was
- * fine" collapse into neighbouring steps of one ramp. Hatching is off that axis entirely and
- * survives being placed beside a colour ramp of the same hue.
- *
- * `id` must be unique per document — `BandStrip` / `MirroredBars` namespace theirs with `chartId`.
- * `opacity` is applied through `alpha()` on the stroke rather than as an `opacity` attribute, so
- * the hue keeps resolving per colour scheme.
- */
-export function HatchPattern({
-  id,
-  color,
-  opacity = 0.55,
-  size = 6,
-}: {
-  id: string
-  color: string
-  opacity?: number
-  size?: number
-}): ReactNode {
-  return (
-    <pattern
-      id={id}
-      width={size}
-      height={size}
-      patternUnits="userSpaceOnUse"
-      patternTransform="rotate(45)"
-    >
-      <line x1={0} y1={0} x2={0} y2={size} stroke={alpha(color, opacity)} strokeWidth={size / 3} />
-    </pattern>
-  )
-}
-
-/** `fill` value referencing a {@link HatchPattern} by id. */
-export function hatchFill(id: string): string {
-  return `url(#${id})`
-}
-
-/**
- * The pattern's own repeat, shrunk to fit the band it textures.
- *
- * Left at a fixed 6px a sub-pixel band draws less than one diagonal rule, so a fill/hatch split
- * inside one band antialiases into a single smudge no reader can tell from a fully-measured band.
- * Floored at 2 — below that the stroke has nothing to render on.
- */
-export function hatchSizeFor(bandWidth: number): number {
-  return Math.max(2, Math.min(6, Math.round(bandWidth)))
-}

package/src/charts/primitives/HoverOverlay.module.css

@@ -1,13 +0,0 @@
-/*
- * `HoverOverlay` — the transparent plot rect every cartesian kind scrubs through. A tap focuses it
- * on pointerdown, so the UA's own outline would ring the whole plot on every phone tap (`R2C-15`);
- * keyboard focus keeps a VX accent inset instead.
- */
-.overlay {
-  outline: none;
-}
-
-.overlay:focus-visible {
-  outline: 1px solid var(--vx-accent);
-  outline-offset: -1px;
-}

package/src/charts/primitives/HoverOverlay.module.css.d.ts

@@ -1,8 +0,0 @@
-/**
- * Typed CSS-module declaration — named string props, so dot access stays verbatim under the
- * package's strict flags.
- */
-declare const classes: {
-  readonly overlay: string
-}
-export default classes

package/src/charts/primitives/HoverOverlay.tsx

@@ -1,109 +0,0 @@
-import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from 'react'
-import type { ChartCursor } from '../hooks/useChartCursor'
-import styles from './HoverOverlay.module.css'
-
-/** Props of {@link HoverOverlay}. */
-export type HoverOverlayProps = {
-  width: number
-  height: number
-  onMove: PointerEventHandler<SVGRectElement>
-  /** Coarse-pointer tap: resolves + shows the tooltip immediately, with no preceding `pointermove`
-   * (`docs/CHARTS-SPEC.md` §4, Tooltip). The press is provisional; `onUp` commits it. */
-  onDown?: PointerEventHandler<SVGRectElement>
-  /** Commits the provisional touch press so the pin survives the lift. */
-  onUp?: PointerEventHandler<SVGRectElement>
-  onLeave: PointerEventHandler<SVGRectElement>
-  /** Present = the overlay is focusable and scrubs on ←/→. */
-  onKeyDown?: KeyboardEventHandler<SVGRectElement>
-  onBlur?: FocusEventHandler<SVGRectElement>
-  ariaLabel?: string
-  /** Index of the focused point — announced as the slider position. */
-  valueNow?: number
-  /** Last index of the domain. */
-  valueMax?: number
-  /** Human-readable label for the focused point (the formatted x key). */
-  valueText?: string
-}
-
-/**
- * Transparent <rect> that captures pointer events (mouse + touch + pen) for tooltip + crosshair
- * sync.
- *
- * With `onKeyDown` it also becomes the chart's keyboard affordance: the rect takes focus and
- * ←/→ scrub the cursor, so a chart's values are reachable without a pointer.
- */
-export function HoverOverlay({
-  width,
-  height,
-  onMove,
-  onDown,
-  onUp,
-  onLeave,
-  onKeyDown,
-  onBlur,
-  ariaLabel,
-  valueNow,
-  valueMax,
-  valueText,
-}: HoverOverlayProps) {
-  return (
-    // `touch-action: pan-y` lives on the plot's `<svg>` (each kind's own), NOT here: Chrome ignores
-    // `touch-action` on an SVG child `<rect>`, so the browser claims a horizontal pan and cancels
-    // the pointer (`R2C-2`). The `overlay` class owns the focus ring: no UA outline on tap, a VX
-    // accent inset under `:focus-visible` (`R2C-15`).
-    <rect
-      className={styles.overlay}
-      width={width}
-      height={height}
-      fill="transparent"
-      {...(onKeyDown !== undefined && {
-        tabIndex: 0,
-        // `slider`, not `application`: `application` would drop this node out of the screen
-        // reader's normal browse mode entirely, which is a far bigger hammer than an arrow-key
-        // scrub needs. A slider announces both the affordance and the focused point.
-        role: 'slider',
-        'aria-label': ariaLabel ?? 'Chart data — use arrow keys to scrub',
-        'aria-orientation': 'horizontal' as const,
-        'aria-valuemin': 0,
-        ...(valueMax !== undefined && { 'aria-valuemax': valueMax }),
-        // `aria-valuenow` is required on a slider: 0 (the first point) until the cursor lands on one.
-        'aria-valuenow': valueNow ?? 0,
-        ...(valueText !== undefined && { 'aria-valuetext': valueText }),
-        onKeyDown,
-        ...(onBlur !== undefined && { onBlur }),
-      })}
-      onPointerMove={onMove}
-      {...(onDown !== undefined && { onPointerDown: onDown })}
-      {...(onUp !== undefined && { onPointerUp: onUp })}
-      onPointerLeave={onLeave}
-      onPointerCancel={onLeave}
-    />
-  )
-}
-
-/**
- * Everything a FOCUSABLE overlay over indexed data takes besides its rect: the cursor's pointer and
- * keyboard handlers plus the slider label/position. `CartesianChart`, `DualPanel`'s top pane and
- * the banded kinds all wire it identically, so it is stated once.
- */
-export function cursorSliderProps<T>(input: {
-  cursor: ChartCursor<T>
-  data: readonly T[]
-  getX: (d: T) => string
-  formatX: (key: string) => string
-  ariaLabel: string | undefined
-}): Omit<HoverOverlayProps, 'width' | 'height'> {
-  const { cursor, data, getX, formatX, ariaLabel } = input
-  const { point } = cursor
-  return {
-    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 }),
-  }
-}

package/src/charts/primitives/XZoneRects.tsx

@@ -1,132 +0,0 @@
-import type { scalePoint } from '@visx/scale'
-
-/**
- * The point-scale instance type, derived from `@visx/scale`'s own `scalePoint` return type.
- * Equivalent to d3's `ScalePoint<string>` but resolved through `@visx/scale` (an installed dep) so
- * it needs no `@types/d3-scale` and stays inside the visx-only-in-charts boundary.
- */
-type PointScale = ReturnType<typeof scalePoint<string>>
-
-export type XZoneSpec = {
-  /** Left edge — a domain key produced by the kind's `getX`. Omit for "start of the plot area". */
-  from?: string
-  /** 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'
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max)
-}
-
-/**
- * Resolves one zone bound (`from` or `to`) to a pixel x. `edgeSign` is `-1` for `from` (subtract
- * half a step) and `+1` for `to` (add half a step) — only consulted in `'edge'` mode.
- */
-function resolveBound({
-  key,
-  omittedEdge,
-  xScale,
-  align,
-  edgeSign,
-  rangeMin,
-  rangeMax,
-}: {
-  key: string | undefined
-  omittedEdge: number
-  xScale: PointScale
-  align: 'center' | 'edge'
-  edgeSign: -1 | 1
-  rangeMin: number
-  rangeMax: number
-}): number | undefined {
-  if (key === undefined) return omittedEdge
-  const center = xScale(key)
-  if (center === undefined) return undefined
-  if (align === 'center') return center
-  return clamp(center + edgeSign * (xScale.step() / 2), rangeMin, rangeMax)
-}
-
-/**
- * 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.
- *
- * 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, 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. 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 function XZoneRects({
-  zones,
-  height,
-  xScale,
-}: {
-  zones: XZoneSpec[]
-  /** Plot-area height (yMax); rects span from 0 to this. */
-  height: number
-  xScale: PointScale
-}) {
-  return (
-    <>
-      {zones.map((z, i) => {
-        const [rangeStart, rangeEnd] = xScale.range() as [number, number]
-        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 === undefined || xTo === undefined) return null
-        if (xTo <= xFrom) return null
-        return (
-          <rect
-            key={`xzone-${i}`}
-            x={xFrom}
-            y={0}
-            width={xTo - xFrom}
-            height={height}
-            fill={z.fill}
-          />
-        )
-      })}
-    </>
-  )
-}

package/src/charts/primitives/ZoneRects.tsx

@@ -1,67 +0,0 @@
-import type { scaleLinear } from '@visx/scale'
-
-/**
- * The linear-scale instance type, derived from `@visx/scale`'s own `scaleLinear` return type.
- * Equivalent to d3's `ScaleLinear<number, number>` but resolved through `@visx/scale` (an
- * installed dep) so it needs no `@types/d3-scale` and stays inside the visx-only-in-charts boundary.
- */
-type LinearScale = ReturnType<typeof scaleLinear<number>>
-
-export type ZoneSpec = {
-  /** Lower bound on the anchored axis. Use -Infinity for "bottom of axis". */
-  from: number
-  /** Upper bound. Use Infinity for "top of axis". */
-  to: number
-  fill: string
-  axisSide?: 'left' | 'right'
-}
-
-/**
- * Full-width horizontal zone backgrounds — one <rect> per zone, spanning
- * x=[0, width] and y=[scale(to), scale(from)]. Shared by every kind that
- * renders target-zone / threshold-zone bands.
- *
- * `Infinity` / `-Infinity` bounds clamp to the resolved domain of the
- * scale so "from: -Infinity" reads as "the bottom of this axis" regardless
- * of whether the domain is fixed or auto-computed.
- *
- * The wrapper picks left vs right scale per zone via `axisSide`; callers
- * on single-axis kinds just pass the same scale twice (or leave `rightScale`
- * undefined).
- */
-export function ZoneRects({
-  zones,
-  width,
-  leftScale,
-  rightScale,
-}: {
-  zones: ZoneSpec[]
-  /** Plot-area width (xMax); rects span from 0 to this. */
-  width: number
-  leftScale: LinearScale
-  /** Required only when any zone has axisSide='right'. */
-  rightScale?: LinearScale | null
-}) {
-  return (
-    <>
-      {zones.map((z, i) => {
-        const scale = z.axisSide === 'right' && rightScale ? rightScale : leftScale
-        const [domainMin, domainMax] = scale.domain() as [number, number]
-        const zTo = z.to === Infinity ? domainMax : z.to
-        const zFrom = z.from === -Infinity ? domainMin : z.from
-        const yTop = scale(zTo)
-        const yBottom = scale(zFrom)
-        return (
-          <rect
-            key={`zone-${i}`}
-            x={0}
-            y={yTop}
-            width={width}
-            height={yBottom - yTop}
-            fill={z.fill}
-          />
-        )
-      })}
-    </>
-  )
-}