basalt-ui 2.2.0 → 2.4.0

package/dist/charts/Heatmap.js

@@ -9,7 +9,7 @@ import { scaleQuantize } from "d3-scale";
 import { useId, useMemo } from "react";
 import { alpha, VX } from "../tokens/index.js";
 import { resolveContainerClass } from "../tokens/size-classes.js";
-import { strideTicks } from "./compile.js";
+import { engineRow, strideTicks } from "./compile.js";
 import { ChartEngine, idPrefixOf } from "./host.js";
 import { useCoarsePointer } from "../common/use-media-query.js";
 import { HEIGHT_MAX, HEIGHT_MIN } from "./box.js";
@@ -176,7 +176,7 @@ function Heatmap(props) {
               ...point.color && { color: point.color }
             }
           ];
-          return { title: header(c), rows: [...value, ...extra] };
+          return { title: header(c), rows: [...value, ...extra].map(engineRow) };
         }
       } : false
     };

package/dist/charts/Lines.js

@@ -8,7 +8,7 @@ import { VX } from "../tokens/index.js";
 import { CartesianRung } from "./CartesianChart.js";
 import { areaGradientId } from "./compile.js";
 import { chartCurve } from "./curves.js";
-import { lineMark, markersOf, yScaleOf } from "./marks.js";
+import { drawnRows, lineMark, markersOf, yScaleOf } from "./marks.js";
 import { rowX } from "./types.js";
 const MAX_END_LABELS = 3;
 const END_LABEL_MIN_GAP = 13;
@@ -80,7 +80,7 @@ function Lines(props) {
         if (!s.area) continue;
         out.push(
           decorative(
-            areaY(plot.rows(s.key), {
+            areaY(drawnRows(plot, s), {
               id: `${s.key}-area`,
               x: rowX,
               y2: "y",

package/dist/charts/MirroredBars.d.ts

@@ -6,11 +6,11 @@ export type MirroredBarPane = {
      * entry throws: the pane would vanish, which reads as a measured zero. */
     key: string;
     /** The pane's upper bound. `'auto'` (default) is its own visible maximum; a number pins it. */
-    max?: number | 'auto';
+    max?: number | 'auto' | undefined;
     /** When `'auto'`: floors the upper bound, so a quiet window does not amplify noise to full height. */
-    autoMaxFloor?: number;
+    autoMaxFloor?: number | undefined;
     /** Tick count for this pane's own axis. Default 3. */
-    ticks?: number;
+    ticks?: number | undefined;
     /** Tick and tooltip formatter, in the pane's OWN units. */
     format: (v: number) => string;
 };
@@ -24,21 +24,21 @@ export type MirroredBarsProps<T, X extends ChartX = ChartX> = Pick<CartesianChar
     /** Drawn below the baseline. */
     down: MirroredBarPane;
     /** The up pane's share of the height. Default 0.35: the pair is usually asymmetric. */
-    upFraction?: number;
+    upFraction?: number | undefined;
     /** 0..1 of a bar's width that no source sample covers, drawn neutral across both panes. */
-    getAbsentFraction?: (d: T) => number;
+    getAbsentFraction?: ((d: T) => number) | undefined;
     /** Per-datum bar opacity: a real but qualified measurement (a short bucket) drawn dimmer. */
-    getBarOpacity?: (d: T) => number;
+    getBarOpacity?: ((d: T) => number) | undefined;
     /**
      * Collapse adjacent data where one band per datum would be sub-pixel. `merge` is the consumer's
      * (max, sum, or a rate from summed parts) and must keep `group[0]`'s x, the slot start.
      */
     fold?: {
-        minBandPx?: number;
+        minBandPx?: number | undefined;
         merge: (group: T[]) => T;
-    };
+    } | undefined;
     /** Default `'leading'`: x is a slot's start. */
-    cursorResolution?: CartesianChartProps<T, X>['cursorResolution'];
+    cursorResolution?: CartesianChartProps<T, X>['cursorResolution'] | undefined;
 };
 export declare function MirroredBars<T, X extends ChartX = ChartX>(props: MirroredBarsProps<T, X>): ReactElement;
 //# sourceMappingURL=MirroredBars.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MirroredBars.d.ts","sourceRoot":"","sources":["../../src/charts/MirroredBars.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AASzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,EAAW,MAAM,SAAS,CAAA;AAEhF,4BAA4B;AAC5B,MAAM,MAAM,eAAe,GAAG;IAC5B;8EAC0E;IAC1E,GAAG,EAAE,MAAM,CAAA;IACX,+FAA+F;IAC/F,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,sGAAsG;IACtG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9B,CAAA;AAED,oGAAoG;AACpG,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CACtC,WAAW,CAAC,CAAC,CAAC,EACd,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAChG,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAChE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,WAAW,GACX,MAAM,GACN,GAAG,GACH,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,CACV,GAAG;IACF,qEAAqE;IACrE,MAAM,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAA;IACxC,gCAAgC;IAChC,EAAE,EAAE,eAAe,CAAA;IACnB,gCAAgC;IAChC,IAAI,EAAE,eAAe,CAAA;IACrB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACpC,6FAA6F;IAC7F,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,CAAA;KAAE,CAAA;IACvD,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;CACjE,CAAA;AAgDD,wBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC7B,YAAY,CAuKd"}
+{"version":3,"file":"MirroredBars.d.ts","sourceRoot":"","sources":["../../src/charts/MirroredBars.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AASzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,EAAW,MAAM,SAAS,CAAA;AAEhF,4BAA4B;AAC5B,MAAM,MAAM,eAAe,GAAG;IAC5B;8EAC0E;IAC1E,GAAG,EAAE,MAAM,CAAA;IACX,+FAA+F;IAC/F,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,sGAAsG;IACtG,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,2DAA2D;IAC3D,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9B,CAAA;AAED,oGAAoG;AACpG,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CACtC,WAAW,CAAC,CAAC,CAAC,EACd,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAChG,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAChE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,WAAW,GACX,MAAM,GACN,GAAG,GACH,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,CACV,GAAG;IACF,qEAAqE;IACrE,MAAM,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAA;IACxC,gCAAgC;IAChC,EAAE,EAAE,eAAe,CAAA;IACnB,gCAAgC;IAChC,IAAI,EAAE,eAAe,CAAA;IACrB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,GAAG,SAAS,CAAA;IAClD,6FAA6F;IAC7F,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,GAAG,SAAS,CAAA;IAC9C;;;OAGG;IACH,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,CAAA;KAAE,GAAG,SAAS,CAAA;IAC/E,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAA;CAC7E,CAAA;AAgDD,wBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC7B,YAAY,CAwKd"}

package/dist/charts/MirroredBars.js

@@ -6,7 +6,7 @@ import { scaleLinear } from "@tanstack/charts/scales/linear";
 import { useCallback, useMemo } from "react";
 import { VX, alpha } from "../tokens/index.js";
 import { resolveContainerClass } from "../tokens/size-classes.js";
-import { defaultFormatX, defaultNumberFormat, visibleSeries } from "./compile.js";
+import { defaultFormatX, defaultNumberFormat, seriesRow, visibleSeries } from "./compile.js";
 import { barMark, emphasis } from "./marks.js";
 import { PanelRung, paneX, paneY, rowsOf } from "./panel.js";
 import { xScaleFor } from "./scales.js";
@@ -161,12 +161,13 @@ function MirroredBars(props) {
             const v = s.getValue(d);
             if (s.tooltip === false || v === null || !Number.isFinite(v)) continue;
             const fallback = s.key === up.key ? up.format : s.key === down.key ? down.format : defaultNumberFormat;
-            out.push({
-              label: s.note === void 0 ? s.label : `${s.label} \xB7 ${s.note}`,
-              value: s.formatValue ? s.formatValue(v, d) : fallback(v),
-              color: s.color,
-              ...highlighted === s.key && { active: true }
-            });
+            out.push(
+              seriesRow(
+                s,
+                s.formatValue ? s.formatValue(v, d) : fallback(v),
+                highlighted === s.key
+              )
+            );
           }
           return out;
         }

package/dist/charts/Sparkline.d.ts

@@ -8,18 +8,18 @@ export type SparklineProps = BasaltProps & {
     /** Height in px. */
     height: number;
     /** Width in px. Default: the container's, measured by the host. */
-    width?: number;
+    width?: number | undefined;
     /** Default `'line'`. */
-    mark?: 'line' | 'bar';
+    mark?: 'line' | 'bar' | undefined;
     /** A `VX.*` ref or a series token. Default `VX.faint`. */
-    color?: string;
+    color?: string | undefined;
     /** Paints the last point in `emphasisColor` — the one reading a trend beside a KPI is for. */
-    emphasizeLast?: boolean;
+    emphasizeLast?: boolean | undefined;
     /** Default `VX.accent`. */
-    emphasisColor?: string;
+    emphasisColor?: string | undefined;
     /** Pending / error / empty, the same contract as every other kind. The placeholder fills the
      * sparkline's own `width` × `height`, so a loading tile does not shift when the trend lands. */
-    state?: ChartState;
+    state?: ChartState | undefined;
 };
 /** `useId` output (`«r1»`, `:r1:`) is not a safe SVG id fragment. */
 export declare function Sparkline(props: SparklineProps): ReactElement;

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

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/charts/Sparkline.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAQlD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IACvB,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;oGACgG;IAChG,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAiGD,qEAAqE;AAErE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAyC7D"}
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/charts/Sparkline.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAQlD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IACvB,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAAA;IACjC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC;oGACgG;IAChG,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;CAC/B,CAAA;AAiGD,qEAAqE;AAErE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAyC7D"}

package/dist/charts/StackedArea.d.ts

@@ -3,13 +3,13 @@ import type { CartesianChartProps, ChartSeries, ChartX } from './types.js';
 /** A band. Stacked areas read the left axis and draw no line, so the line fields are absent. */
 export type StackedAreaBand<T> = Pick<ChartSeries<T>, 'key' | 'label' | 'color' | 'getValue' | 'formatValue' | 'tooltip' | 'legend' | 'role' | 'note'> & {
     /** Default 0.85. */
-    fillOpacity?: number;
+    fillOpacity?: number | undefined;
 };
 export type StackedAreaProps<T, X extends ChartX = ChartX> = Omit<CartesianChartProps<T, X>, 'marks' | 'y' | 'y2' | 'series'> & {
     /** The bands, bottom to top. */
     series: readonly StackedAreaBand<T>[];
     /** No `scale`: a log axis has no additive zero to stack from. */
-    y?: Omit<NonNullable<CartesianChartProps<T, X>['y']>, 'scale'>;
+    y?: Omit<NonNullable<CartesianChartProps<T, X>['y']>, 'scale'> | undefined;
 };
 export declare function StackedArea<T, X extends ChartX = ChartX>(props: StackedAreaProps<T, X>): ReactElement;
 //# sourceMappingURL=StackedArea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StackedArea.d.ts","sourceRoot":"","sources":["../../src/charts/StackedArea.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,mBAAmB,EAAc,WAAW,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAIhG,gGAAgG;AAChG,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CACnC,WAAW,CAAC,CAAC,CAAC,EACd,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAChG,GAAG;IACF,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EACzB,OAAO,GAAG,GAAG,GAAG,IAAI,GAAG,QAAQ,CAChC,GAAG;IACF,gCAAgC;IAChC,MAAM,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACrC,iEAAiE;IACjE,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA;CAC/D,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACtD,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5B,YAAY,CAqCd"}
+{"version":3,"file":"StackedArea.d.ts","sourceRoot":"","sources":["../../src/charts/StackedArea.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,mBAAmB,EAAc,WAAW,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAIhG,gGAAgG;AAChG,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CACnC,WAAW,CAAC,CAAC,CAAC,EACd,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAChG,GAAG;IACF,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EACzB,OAAO,GAAG,GAAG,GAAG,IAAI,GAAG,QAAQ,CAChC,GAAG;IACF,gCAAgC;IAChC,MAAM,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACrC,iEAAiE;IACjE,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,CAAA;CAC3E,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACtD,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5B,YAAY,CAqCd"}

package/dist/charts/compile.d.ts

@@ -1,7 +1,7 @@
-import type { ChartGradient, ChartPositionScaleOptions, ChartValue, ResponsiveChartDefinition } from '@tanstack/charts/types/core';
+import type { ChartGradient, ChartPositionScaleOptions, ChartTooltipRow as EngineTooltipRow, ChartValue, ResponsiveChartDefinition } from '@tanstack/charts/types/core';
 import type { ContainerClass } from '../tokens/size-classes.js';
 import type { XScaleModel } from './scales.js';
-import type { AxisConfig, CartesianChartProps, ChartSeries, ChartX } from './types.js';
+import type { AxisConfig, CartesianChartProps, ChartSeries, ChartTooltipRow, ChartX, RefLine, ZoneSpec } from './types.js';
 /**
  * The compiled definition. Annotated on purpose: TanStack's inferred definition type names internal
  * modules (`dist/scene`, `cursor-host-contract`) and fails declaration emit (TS2883 / TS4058).
@@ -35,6 +35,19 @@ export declare function utcHeaderDate(d: Date): string;
  */
 export declare function dateTicks(domain: readonly [Date, Date], count: number, stepMs: number): Date[];
 export declare function defaultFormatX(v: ChartValue): string;
+/**
+ * A tooltip swatch is the engine's `background` shorthand, so a dashed one is a gradient: a 2px
+ * dashed line across the swatch's middle, in the row color.
+ */
+export declare const dashedSwatch: (color: string) => string;
+/** A basalt tooltip row as the engine's: the swatch shape folded into the row color. */
+export declare function engineRow(row: ChartTooltipRow & {
+    active?: boolean | undefined;
+}): EngineTooltipRow;
+/** A series row of a tooltip: the label with its note, the swatch following the series' dash. */
+export declare function seriesRow(s: Pick<ChartSeries<never>, 'label' | 'note' | 'color' | 'dash'>, value: string, active: boolean): EngineTooltipRow;
+/** Legend-only entries for the reference lines that name themselves, in line order. */
+export declare function refLegendSeries<T>(refLines: readonly RefLine[] | undefined): ChartSeries<T>[];
 /** The visible series: not toggled off, and not a companion whose parent is. */
 export declare function visibleSeries<T>(series: readonly ChartSeries<T>[], hidden: ReadonlySet<string>): ChartSeries<T>[];
 type YAxis = {
@@ -63,6 +76,16 @@ export declare function xGuide<X extends ChartX>(opts: {
 /** Gradient resource id for a series' area fill; the host's `idPrefix` scopes it per chart. */
 export declare const areaGradientId: (index: number) => string;
 export declare function areaGradient(index: number, color: string): ChartGradient;
+/**
+ * A series area filled by value zone: a vertical gradient whose stops sit at the zone boundaries.
+ * The engine writes `<linearGradient>` in the default `objectBoundingBox` units, so offsets are
+ * fractions of the AREA's own box, not of the plot: from the larger of the series' maximum and 0 down
+ * to the smaller of its minimum and 0, the baseline the area closes to even when the y domain
+ * excludes 0. A boundary at value `v` sits at `(ceiling - v) / (ceiling - floor)`. Hard edges:
+ * neighbouring zones meet at one offset; overlapping zones never run backwards. `null` when no zone
+ * reaches the area (the caller keeps the plain series-colour fade). Linear axes only.
+ */
+export declare function zoneAreaGradient(index: number, zones: readonly ZoneSpec[], values: readonly (number | null)[]): ChartGradient | null;
 export declare function compileCartesian<T, X extends ChartX>(input: CartesianInput<T, X>): CartesianDefinition;
 export {};
 //# sourceMappingURL=compile.d.ts.map

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

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

package/dist/charts/compile.js

@@ -1,7 +1,7 @@
 import { crosshair } from "@tanstack/charts/crosshair";
 import { decorative } from "@tanstack/charts/mark/decorative";
 import { rect } from "@tanstack/charts/rect";
-import { ruleY } from "@tanstack/charts/rule";
+import { ruleX, ruleY } from "@tanstack/charts/rule";
 import { scaleLinear } from "@tanstack/charts/scales/linear";
 import { scaleUtc } from "d3-scale";
 import { tooltip as tooltipHost } from "@tanstack/charts/tooltip";
@@ -9,6 +9,7 @@ import { portal } from "@tanstack/charts/tooltip/portal";
 import { fmtCompact } from "../format/number.js";
 import { VX } from "../tokens/index.js";
 import { cursorBinding, sourceOnlyFocus } from "./cursor.js";
+import { cursorDots } from "./marks.js";
 import { resolveContainerClass } from "../tokens/size-classes.js";
 import { resolveYDomain, xScaleFor, xZoneFractions, yScaleFor } from "./scales.js";
 import { AXIS_LINE, CHART_THEME, CROSSHAIR, DASH, GRID_LINE } from "./theme.js";
@@ -47,6 +48,43 @@ function defaultFormatX(v) {
   return String(v);
 }
 const clampTo = (v, [lo, hi]) => Math.min(Math.max(v, Math.min(lo, hi)), Math.max(lo, hi));
+const dashedSwatch = (color) => `repeating-linear-gradient(90deg, ${color} 0 2px, transparent 2px 4px) center / 100% 2px no-repeat`;
+function engineRow(row) {
+  const { label, value, color, swatch, active } = row;
+  return {
+    label,
+    value,
+    ...color !== void 0 && { color: swatch === "dashed" ? dashedSwatch(color) : color },
+    ...active && { active }
+  };
+}
+function seriesRow(s, value, active) {
+  return engineRow({
+    label: s.note === void 0 ? s.label : `${s.label} \xB7 ${s.note}`,
+    value,
+    color: s.color,
+    swatch: s.dash === "dashed" ? "dashed" : "solid",
+    active
+  });
+}
+const REF_KEY_PREFIX = "__ref-";
+const refLegendKey = (index) => `${REF_KEY_PREFIX}${index}`;
+function refLegendSeries(refLines) {
+  return (refLines ?? []).flatMap(
+    (r, i) => r.legend === void 0 ? [] : [
+      {
+        key: refLegendKey(i),
+        label: r.legend.label,
+        color: r.color,
+        role: "reference",
+        tooltip: false,
+        getValue: () => null,
+        ...r.legend.mark !== void 0 && { mark: r.legend.mark },
+        ...r.dashed && { dash: "dashed" }
+      }
+    ]
+  );
+}
 function visibleSeries(series, hidden) {
   return series.filter(
     (s) => !hidden.has(s.key) && !(s.parent !== void 0 && hidden.has(s.parent))
@@ -124,6 +162,54 @@ function areaGradient(index, color) {
     ]
   };
 }
+const areaTint = (color) => `color-mix(in srgb, ${color} var(--vx-area-top), transparent)`;
+function zoneAreaGradient(index, zones, values) {
+  let floor = 0;
+  let ceiling = 0;
+  for (const v of values) {
+    if (v === null || !Number.isFinite(v)) continue;
+    if (v < floor) floor = v;
+    if (v > ceiling) ceiling = v;
+  }
+  const span = ceiling - floor;
+  if (span <= 0) return null;
+  const offsetOf = (v) => (ceiling - Math.min(ceiling, Math.max(floor, v))) / span;
+  const reaching = zones.filter((z) => !Number.isNaN(z.from) && !Number.isNaN(z.to) && z.to > floor && z.from < ceiling).toSorted((p, q) => q.to - p.to);
+  let previous = 0;
+  const stops = reaching.flatMap(
+    (z) => [offsetOf(z.to), offsetOf(z.from)].map((raw) => {
+      previous = Math.max(previous, raw);
+      return { offset: previous, color: areaTint(z.fill) };
+    })
+  );
+  if (stops.length === 0) return null;
+  return { id: areaGradientId(index), x1: 0, y1: 0, x2: 0, y2: 1, stops };
+}
+let warnedLogZones = false;
+function guardLogZones(onLog) {
+  if (!onLog) return false;
+  const message = "area: 'zones' cannot use a log axis; use area: true";
+  if (process.env.NODE_ENV !== "production") throw new Error(message);
+  if (!warnedLogZones) console.error(message);
+  warnedLogZones = true;
+  return true;
+}
+function seriesAreaGradient(s, index, input, axes) {
+  const plain = areaGradient(
+    index,
+    typeof s.area === "string" && s.area !== "zones" ? s.area : s.color
+  );
+  if (s.area !== "zones") return plain;
+  const side = axes.onRight(s) ? "right" : "left";
+  const axisConfig = side === "right" ? input.y2 : input.y;
+  if (guardLogZones(axisConfig?.scale === "log")) return plain;
+  const zones = (input.zones ?? []).filter((z) => axes.scaleId(z.axisSide) === axes.scaleId(side));
+  return zoneAreaGradient(
+    index,
+    zones,
+    input.data.map((d) => s.getValue(d))
+  ) ?? plain;
+}
 const isBar = (s) => s.mark === "bar";
 const STACK_POSITIVE_KEY = "__stack+";
 const STACK_NEGATIVE_KEY = "__stack-";
@@ -193,27 +279,73 @@ function resolveAxes(input, visible) {
     scaleId: (side) => side === "right" && hasY2 ? "y2" : "y"
   };
 }
+const edgeSides = (edge, lower, upper) => ({
+  lower: edge !== void 0 && (edge.side === lower || edge.side === "both"),
+  upper: edge !== void 0 && (edge.side === upper || edge.side === "both")
+});
+const edgePaint = (edge) => ({
+  stroke: edge.color,
+  strokeOpacity: 1,
+  strokeWidth: edge.width ?? 1,
+  ...edge.dashed && { strokeDasharray: DASH }
+});
+const edgeRule = (position, [lo, hi], make) => position !== null && position > lo && position < hi ? [make(position)] : [];
 function underlayMarks(input, model, axes) {
   const fractionRows = [{ f0: 0, f1: 1 }];
-  const zones = (input.zones ?? []).map((z, i) => {
+  const zones = (input.zones ?? []).flatMap((z, i) => {
     const domain = axes.axisOf(z.axisSide).domain;
-    return decorative(
-      rect(fractionRows, {
-        id: `zone-${i}`,
-        x1: "f0",
-        x2: "f1",
-        y1: () => clampTo(z.from, domain),
-        y2: () => clampTo(z.to, domain),
-        xScale: "zx",
-        yScale: axes.scaleId(z.axisSide),
-        fill: z.fill,
-        inset: 0
-      })
+    const [lo, hi] = [Math.min(...domain), Math.max(...domain)];
+    const rule = (value, name) => edgeRule(
+      value,
+      [lo, hi],
+      (at) => decorative(
+        ruleY([at], {
+          id: `zone-${i}-${name}`,
+          yScale: axes.scaleId(z.axisSide),
+          ...z.edge && edgePaint(z.edge)
+        })
+      )
     );
+    const sides = edgeSides(z.edge, "bottom", "top");
+    return [
+      decorative(
+        rect(fractionRows, {
+          id: `zone-${i}`,
+          x1: "f0",
+          x2: "f1",
+          y1: () => clampTo(z.from, domain),
+          y2: () => clampTo(z.to, domain),
+          xScale: "zx",
+          yScale: axes.scaleId(z.axisSide),
+          fill: z.fill,
+          inset: 0
+        })
+      ),
+      ...sides.lower ? rule(Math.min(z.from, z.to), "bottom") : [],
+      ...sides.upper ? rule(Math.max(z.from, z.to), "top") : []
+    ];
   });
   const xZones = (input.xZones ?? []).flatMap((z, i) => {
     const f = xZoneFractions(z, model);
     if (!f) return [];
+    const sides = edgeSides(z.edge, "start", "end");
+    const widen = z.align === "edge" ? model.halfStep : 0;
+    const bound = (value, sign) => {
+      const fraction = value === void 0 ? null : model.fraction(value);
+      return fraction === null ? null : fraction + sign * widen;
+    };
+    const rule = (value, sign, name) => edgeRule(
+      bound(value, sign),
+      [0, 1],
+      (at) => decorative(
+        ruleX([at], {
+          id: `xzone-${i}-${name}`,
+          x: (v) => v,
+          xScale: "zx",
+          ...z.edge && edgePaint(z.edge)
+        })
+      )
+    );
     return [
       decorative(
         rect([{ f0: f[0], f1: f[1] }], {
@@ -226,20 +358,28 @@ function underlayMarks(input, model, axes) {
           fill: z.fill,
           inset: 0
         })
-      )
+      ),
+      // An omitted bound is the plot edge: nothing to draw a rule on.
+      ...sides.lower ? rule(z.from, -1, "start") : [],
+      ...sides.upper ? rule(z.to, 1, "end") : []
     ];
   });
   return [...zones, ...xZones];
 }
-const refLineMarks = (input, axes) => (input.refLines ?? []).map(
-  (r, i) => ruleY([r.value], {
-    id: `ref-${i}`,
-    stroke: r.color,
-    strokeOpacity: 1,
-    strokeWidth: 1,
-    yScale: axes.scaleId(r.axis),
-    ...r.dashed && { strokeDasharray: DASH }
-  })
+const refLineMarks = (input, axes) => (input.refLines ?? []).flatMap(
+  (r, i) => (
+    // A line that names itself in the legend can be toggled off there.
+    input.hidden?.has(refLegendKey(i)) ? [] : [
+      ruleY([r.value], {
+        id: `ref-${i}`,
+        stroke: r.color,
+        strokeOpacity: 1,
+        strokeWidth: 1,
+        yScale: axes.scaleId(r.axis),
+        ...r.dashed && { strokeDasharray: DASH }
+      })
+    ]
+  )
 );
 function buildScales(opts) {
   const { input, model, axes, formatX, cls, zoneScale } = opts;
@@ -294,6 +434,17 @@ function rowsOf(input, visibleKeys) {
     });
   };
 }
+function cursorDotMarks(input, visible, axes) {
+  return visible.flatMap((s) => {
+    const { cursorValue } = s;
+    if (!cursorValue) return [];
+    const rows = input.data.flatMap((d) => {
+      const y = cursorValue(d);
+      return y === null || !Number.isFinite(y) ? [] : [{ x: input.x(d), y, series: s.key, datum: d }];
+    });
+    return [cursorDots(s, rows, axes.onRight(s) ? "y2" : void 0)];
+  });
+}
 function tooltipSpec(opts) {
   const { input, axes, visible, keys, visibleKeys, formatX } = opts;
   const hidden = input.series.filter((s) => !visibleKeys.has(s.key));
@@ -314,19 +465,32 @@ function tooltipSpec(opts) {
       for (const s of rowSeries) {
         const v = s.getValue(d);
         if (v === null || !Number.isFinite(v)) continue;
-        rows.push({
-          label: s.note === void 0 ? s.label : `${s.label} \xB7 ${s.note}`,
-          value: s.formatValue ? s.formatValue(v, d) : axes.axisOf(axes.onRight(s) ? "right" : "left").format(v),
-          color: s.color,
-          ...input.highlighted === s.key && { active: true }
-        });
+        rows.push(
+          seriesRow(
+            s,
+            s.formatValue ? s.formatValue(v, d) : axes.axisOf(axes.onRight(s) ? "right" : "left").format(v),
+            input.highlighted === s.key
+          )
+        );
       }
       const extra = (input.tooltip || void 0)?.rows?.(d, { visible, hidden }) ?? [];
-      return { title: tooltipHeader(input, formatX, x, d), rows: [...rows, ...extra] };
+      return {
+        title: tooltipHeader(input, formatX, x, d),
+        rows: [...rows, ...extra.map(engineRow)]
+      };
     }
   };
 }
+function guardReservedKeys(series) {
+  if (process.env.NODE_ENV === "production") return;
+  const clash = series.find((s) => s.key.startsWith(REF_KEY_PREFIX));
+  if (clash)
+    throw new Error(
+      `[basalt] CartesianChart: the series key "${clash.key}" is reserved (\`${REF_KEY_PREFIX}\` prefix names reference-line legend entries)`
+    );
+}
 function compileCartesian(input) {
+  guardReservedKeys(input.series);
   const visible = visibleSeries(input.series, input.hidden ?? /* @__PURE__ */ new Set());
   const visibleKeys = new Set(visible.map((s) => s.key));
   const keys = new Set(input.series.map((s) => s.key));
@@ -334,10 +498,11 @@ function compileCartesian(input) {
   const axes = resolveAxes(input, visible);
   const under = underlayMarks(input, model, axes);
   const over = refLineMarks(input, axes);
+  const dots = cursorDotMarks(input, visible, axes);
   const rows = rowsOf(input, visibleKeys);
   const formatX = (v) => input.formatX ? input.formatX(v) : defaultFormatX(v);
   const gradients = input.series.flatMap(
-    (s, i) => s.area ? [areaGradient(i, typeof s.area === "string" ? s.area : s.color)] : []
+    (s, i) => s.area ? [seriesAreaGradient(s, i, input, axes)] : []
   );
   return {
     chart: ({ width, height }) => {
@@ -354,7 +519,7 @@ function compileCartesian(input) {
         y2Domain: axes.right?.domain
       });
       return {
-        marks: [...under, ...kindMarks, ...over, crosshair({ x: CROSSHAIR, y: false })],
+        marks: [...under, ...kindMarks, ...dots, ...over, crosshair({ x: CROSSHAIR, y: false })],
         scales: buildScales({ input, model, axes, formatX, cls, zoneScale: under.length > 0 }),
         theme: CHART_THEME,
         ...gradients.length > 0 && { gradients },
@@ -379,13 +544,18 @@ export {
   areaGradient,
   areaGradientId,
   compileCartesian,
+  dashedSwatch,
   dateTicks,
   defaultFormatX,
   defaultNumberFormat,
+  engineRow,
+  refLegendSeries,
+  seriesRow,
   strideTicks,
   utcAxisDate,
   utcHeaderDate,
   visibleSeries,
   xGuide,
-  yGuide
+  yGuide,
+  zoneAreaGradient
 };

package/dist/charts/index.d.ts

@@ -17,5 +17,6 @@ export { DualPanel, type DualPanelProps, type DualPanelLine, type DualPanelBar }
 export { MirroredBars, type MirroredBarsProps, type MirroredBarsSeries, type MirroredBarPane, } from './MirroredBars.js';
 export { ChartCard, type ChartCardProps, type ChartCardSlot } from './ChartCard.js';
 export { chartCursor } from './cursor.js';
+export { chartCurve, type CurveName } from './curves.js';
 export type { AxisConfig, CartesianChartProps, ChartLegendConfig, ChartMarks, ChartSeries, ChartState, ChartTooltipConfig, ChartTooltipRow, ChartX, CursorResolution, PlotContext, RefLine, ResponsiveChartHeight, Threshold, XZoneSpec, ZoneSpec, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5D,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,QAAQ,EACb,KAAK,QAAQ,GACd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AACnG,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,YAAY,EACV,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,SAAS,EACT,SAAS,EACT,QAAQ,GACT,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5D,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,QAAQ,EACb,KAAK,QAAQ,GACd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AACnG,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAA;AACrD,YAAY,EACV,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,SAAS,EACT,SAAS,EACT,QAAQ,GACT,MAAM,SAAS,CAAA"}

package/dist/charts/index.js

@@ -14,6 +14,7 @@ import {
 } from "./MirroredBars.js";
 import { ChartCard } from "./ChartCard.js";
 import { chartCursor } from "./cursor.js";
+import { chartCurve } from "./curves.js";
 export {
   BandStrip,
   Bars,
@@ -26,5 +27,6 @@ export {
   MirroredBars,
   Sparkline,
   StackedArea,
-  chartCursor
+  chartCursor,
+  chartCurve
 };

package/dist/charts/marks.d.ts

@@ -4,9 +4,17 @@ import type { ChartMarks, ChartSeries, ChartX, PlotContext, PlotRow } from './ty
 export declare function yScaleOf<T, X extends ChartX>(plot: PlotContext<T, X>, s: Pick<ChartSeries<T>, 'axis'>): 'y2' | undefined;
 /** `1`, or `DIMMED` while ANOTHER legend entry (not this series, not its parent) is hovered. */
 export declare function emphasis<T>(highlighted: string | null, s: Pick<ChartSeries<T>, 'key' | 'parent'>): number;
+/** The rows a series' line and area are drawn through: all of them, or only the non-null ones. */
+export declare function drawnRows<T, X extends ChartX>(plot: PlotContext<T, X>, s: Pick<ChartSeries<T>, 'key' | 'gaps'>): PlotRow<T, X>[];
 export declare function lineMark<T, X extends ChartX>(plot: PlotContext<T, X>, s: ChartSeries<T>): ChartMarks[number];
 /** A series' `getMarker` points as dots: one decorative mark per distinct paint. */
 export declare function markersOf<T, X extends ChartX>(s: ChartSeries<T>, rows: readonly PlotRow<T, X>[], yScale: 'y2' | undefined): ChartMarks;
+/**
+ * The cursor dot of a series the consumer draws itself (`ChartSeries.cursorValue`): a dot per datum,
+ * invisible until the cursor is on that datum's x. It is NOT decorative, so the engine counts it as
+ * a focus point and the shared cursor, the focus group and the tooltip reach the series.
+ */
+export declare function cursorDots<T, X extends ChartX>(s: ChartSeries<T>, rows: readonly PlotRow<T, X>[], yScale: 'y2' | undefined): ChartMarks[number];
 export declare function barMark<TDatum>(rows: Iterable<TDatum>, options?: BarYOptions<TDatum>): ChartMarks[number];
 /**
  * A band fill drawn at `width` px: each pixel column of the plot keeps its first and last row and the

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

@@ -1 +1 @@
-{"version":3,"file":"marks.d.ts","sourceRoot":"","sources":["../../src/charts/marks.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAQvD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEpF,0FAA0F;AAC1F,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC1C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAC9B,IAAI,GAAG,SAAS,CAElB;AAED,gGAAgG;AAChG,wBAAgB,QAAQ,CAAC,CAAC,EACxB,WAAW,EAAE,MAAM,GAAG,IAAI,EAC1B,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,GACxC,MAAM,CAER;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC1C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GAChB,UAAU,CAAC,MAAM,CAAC,CAcpB;AASD,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC3C,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACjB,IAAI,EAAE,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAC9B,MAAM,EAAE,IAAI,GAAG,SAAS,GACvB,UAAU,CAiCZ;AAUD,wBAAgB,OAAO,CAAC,MAAM,EAC5B,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,EACtB,OAAO,GAAE,WAAW,CAAC,MAAM,CAAM,GAChC,UAAU,CAAC,MAAM,CAAC,CAKpB;AAyBD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAC7D,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,KAAK,EAAE,MAAM,EACb,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GACrB,CAAC,EAAE,CA+CL"}
+{"version":3,"file":"marks.d.ts","sourceRoot":"","sources":["../../src/charts/marks.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAQvD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEpF,0FAA0F;AAC1F,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC1C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAC9B,IAAI,GAAG,SAAS,CAElB;AAED,gGAAgG;AAChG,wBAAgB,QAAQ,CAAC,CAAC,EACxB,WAAW,EAAE,MAAM,GAAG,IAAI,EAC1B,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,GACxC,MAAM,CAER;AAED,kGAAkG;AAClG,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC3C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,GACtC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAGjB;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC1C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GAChB,UAAU,CAAC,MAAM,CAAC,CAcpB;AASD,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC3C,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACjB,IAAI,EAAE,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAC9B,MAAM,EAAE,IAAI,GAAG,SAAS,GACvB,UAAU,CAiCZ;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC5C,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACjB,IAAI,EAAE,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAC9B,MAAM,EAAE,IAAI,GAAG,SAAS,GACvB,UAAU,CAAC,MAAM,CAAC,CAcpB;AAUD,wBAAgB,OAAO,CAAC,MAAM,EAC5B,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,EACtB,OAAO,GAAE,WAAW,CAAC,MAAM,CAAM,GAChC,UAAU,CAAC,MAAM,CAAC,CAKpB;AAyBD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAC7D,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,KAAK,EAAE,MAAM,EACb,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GACrB,CAAC,EAAE,CA+CL"}