basalt-ui 1.13.0 → 1.15.0

package/dist/charts/kinds/MultiLine.d.ts

@@ -1,66 +1,58 @@
-import type { ReactNode } from 'react';
+import type { CartesianTooltipConfig, AxisConfig } from '../primitives/CartesianChart.js';
+import type { XZoneSpec } from '../primitives/XZoneRects.js';
 import type { ZoneSpec } from '../primitives/ZoneRects.js';
 import type { ChartLegendConfig, ChartSeries } from '../series.js';
 export type MultiLineProps<T> = {
     data: T[];
-    /** Fixed height in pixels, forwarded to the internal `ChartFrame`. Default 240. */
+    /** Fixed height in pixels, forwarded to `CartesianChart`. Default 240. */
     height?: number;
     chartId: string;
     /** Extracts the x-axis category (date string) from a data point. */
     getX: (d: T) => string;
-    /** 1+ line series sharing one y-axis — the single source of truth for color, dash, legend, and
-     * tooltip rows. */
+    /** 1+ line series sharing the y-axis(es) — the single source of truth for color, dash, legend,
+     * and tooltip rows. A series opts into the right axis with `axis: 'right'`. */
     series: ChartSeries<T>[];
-    /** Fixed y-domain (e.g. [-2.5, 2.5]) or 'auto' to compute from all series. */
-    yDomain: [number, number] | 'auto';
-    /** When 'auto': upper bound is at least this value. */
-    yAutoMaxFloor?: number;
-    /** When 'auto': lower bound is at most this value. Default 0. Pass `Infinity` to disable the
-     * forced zero baseline — the lower bound then pads DOWN from the raw data minimum instead. */
-    yAutoMinCeil?: number;
-    /** When 'auto': padding multiplier applied away from the domain. Default 1.1. The lower bound
-     * always pads DOWN from `min(dataMin, yAutoMinCeil)` (never up, which would clip data) — see
-     * {@link padAutoLower}. */
-    yAutoPad?: number;
-    /** Horizontal value-range overlays (target zones), rendered behind the lines on the left scale. */
+    /** Left y-axis. Collapses the old `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` / `yAutoPad` /
+     * `numTicksY` / `formatYTick` prop soup into one object. */
+    y?: AxisConfig<T>;
+    /** Right y-axis. Passing it is what makes the chart dual-axis — the margin widens by
+     * measurement, and `axis: 'right'` series read against it. */
+    y2?: AxisConfig<T>;
+    /** Horizontal value-range overlays (target zones), rendered behind the lines. */
     zones?: ZoneSpec[];
+    /** Vertical x-range overlays (time windows), rendered behind the lines. Bounds are `getX`
+     * domain keys. */
+    xZones?: XZoneSpec[];
     /** Horizontal reference lines. Solid by default; set dashed: true for a dashed line. */
     refLines?: {
         value: number;
         color: string;
         dashed?: boolean;
     }[];
-    numTicksX?: number;
-    numTicksY?: number;
-    /** Tooltip + (per-series) value formatter. */
-    formatValue: (v: number) => string;
-    /** Y-axis tick label formatter. Falls back to the scale's default. */
-    formatYTick?: (v: number) => string;
-    /** Label shown at the right of the tooltip header (e.g. status badge). */
-    tooltipLabel?: (d: T) => {
-        text: string;
-        color: string;
-    } | null;
-    /** Extra tooltip rows rendered after the per-series rows. */
-    renderExtraTooltipRows?: (d: T) => ReactNode;
+    /** Exact number of x ticks. Default: as many as fit. */
+    xTicks?: number;
+    /** Tooltip config — `label` for a right-aligned header badge, `extraRows` for rows appended
+     * after the derived per-series rows. `false` disables the tooltip entirely. */
+    tooltip?: CartesianTooltipConfig<T> | false;
     /** Marker glyph for per-point markers. Default 'circle'. */
     markerShape?: 'circle' | 'star';
-    /** Legend config forwarded to `ChartFrame`; `false` disables the legend (sparkline escape).
+    /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
      * Default `{ placement: 'bottom' }`. */
     legend?: ChartLegendConfig | false;
-    /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="img"`). */
+    /** Accessible text alternative, forwarded to `CartesianChart` as `aria-label` (+ `role="img"`). */
     ariaLabel?: string;
-    /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
+    /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
     isPending?: boolean;
 };
 /**
- * N series sharing one y-axis, with optional zones/reference lines, per-point markers
+ * N series sharing one or two y-axes, with optional zones/reference lines, per-point markers
  * (PR stars / status dots), a dashed companion line per series, legend-hover dimming, and a
  * shared-cursor tooltip. Generalizes the multi-line argo charts (e1RM trend, relative
  * progression, training load, fitness trends).
  *
- * Composes `ChartFrame` for measuring + the derived legend — `series` is the single array that
- * drives the plotted lines, the legend, and the tooltip rows.
+ * Composes `CartesianChart` for measuring, scales, grid, axes, cursor, and tooltip — this kind
+ * draws ONLY the marks (lines + per-point markers). `series` is the single array that drives the
+ * plotted lines, the legend, and the tooltip rows.
  *
  * X-axis is built from the full `data` array so the calendar is preserved even when a series
  * has nulls; each series line skips null points (creating visual gaps).

package/dist/charts/kinds/MultiLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MultiLine.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAGvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK/D,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;uBACmB;IACnB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB,8EAA8E;IAC9E,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;kGAC8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;+BAE2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB,wFAAwF;IACxF,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8CAA8C;IAC9C,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC/D,6DAA6D;IAC7D,sBAAsB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAA;IAC5C,4DAA4D;IAC5D,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC/B;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAgBD;;;;;;;;;;;GAWG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BAiClD;AAkPD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}
+{"version":3,"file":"MultiLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MultiLine.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAe,MAAM,8BAA8B,CAAA;AAEnG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;mFAC+E;IAC/E,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB;gEAC4D;IAC5D,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IACjB;kEAC8D;IAC9D,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IAClB,iFAAiF;IACjF,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB;sBACkB;IAClB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB,wFAAwF;IACxF,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/D,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;mFAC+E;IAC/E,OAAO,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IAC3C,4DAA4D;IAC5D,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC/B;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,mGAAmG;IACnG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AA4BD;;;;;;;;;;;;GAYG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BAgDlD;AAoGD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}

package/dist/charts/kinds/MultiLine.js

@@ -1,27 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { curveMonotoneX } from "@visx/curve";
-import { GridRows } from "@visx/grid";
-import { Group } from "@visx/group";
-import { scaleLinear, scalePoint } from "@visx/scale";
 import { LinePath } from "@visx/shape";
-import { memo, useMemo, useState } from "react";
-import { AxisBottomDate, AxisLeftNumeric } from "../primitives/Axes.js";
-import {
-  ChartTooltip,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow,
-  useTooltipStyles
-} from "../primitives/ChartTooltip.js";
-import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
-import { Crosshair, SeriesDot } from "../primitives/Crosshair.js";
-import { HoverOverlay } from "../primitives/HoverOverlay.js";
-import { ZoneRects } from "../primitives/ZoneRects.js";
-import { useHoverSync } from "../hooks/useHoverSync.js";
-import { deriveTooltipRows, LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
+import { memo, useMemo } from "react";
+import { CartesianChart } from "../primitives/CartesianChart.js";
+import { LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
 import { VX } from "../../tokens/index.js";
-import { padAutoLower } from "../utils/domain.js";
-import { smartTicks, smartTicksEvery } from "../utils/ticks.js";
 const STAR_R = 6;
 function starPath(cx, cy, r) {
   const inner = r * 0.4;
@@ -33,241 +16,135 @@ function starPath(cx, cy, r) {
   }
   return `M${pts.join("L")}Z`;
 }
-function MultiLineInner(props) {
-  const { series, chartId, height, legend, ariaLabel, isPending } = props;
-  const [highlightedKey, setHighlightedKey] = useState(null);
-  const styledSeries = useMemo(
-    () => series.map((s) => ({ ...s, strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH })),
-    [series]
-  );
-  return /* @__PURE__ */ jsx(
-    ChartFrame,
-    {
-      series: styledSeries,
-      chartId,
-      ...height !== void 0 && { height },
-      ...ariaLabel !== void 0 && { ariaLabel },
-      ...isPending !== void 0 && { isPending },
-      legend: resolveLegend(legend, {
-        highlighted: highlightedKey,
-        onHighlight: setHighlightedKey
-      }),
-      children: (plot) => /* @__PURE__ */ jsx(
-        MultiLinePlot,
-        {
-          ...props,
-          series: styledSeries,
-          plot,
-          highlightedKey
-        }
-      )
-    }
-  );
+function seriesPoints(series, data) {
+  const pts = [];
+  for (const d of data) {
+    const v = series.getValue(d);
+    if (v !== null && v !== void 0 && !Number.isNaN(v)) pts.push({ __d: d, __y: v });
+  }
+  return pts;
 }
-function MultiLinePlot(props) {
+function MultiLineInner(props) {
   const {
     data,
     chartId,
     getX,
     series,
-    yDomain,
-    yAutoPad = 1.1,
-    yAutoMaxFloor,
-    yAutoMinCeil = 0,
-    zones = [],
-    refLines = [],
-    numTicksX,
-    numTicksY = 5,
-    formatValue,
-    formatYTick,
-    tooltipLabel,
-    renderExtraTooltipRows,
+    y,
+    y2,
+    zones,
+    xZones,
+    refLines,
+    xTicks,
+    tooltip,
     markerShape = "circle",
-    plot,
-    highlightedKey
+    height,
+    legend,
+    ariaLabel,
+    isPending
   } = props;
-  const dimOpacity = (s) => highlightedKey === null || s.key === highlightedKey || s.parent === highlightedKey ? 1 : 0.25;
-  const MARGIN = VX.margin;
-  const xMax = plot.width - MARGIN.left - MARGIN.right;
-  const yMax = plot.height - MARGIN.top - MARGIN.bottom;
-  const xScale = useMemo(
-    () => scalePoint({
-      // Full calendar — axis does not compress across nulls.
-      domain: data.map(getX),
-      range: [0, xMax],
-      padding: 0.3
-    }),
-    [data, xMax, getX]
+  const styledSeries = useMemo(
+    () => series.map((s) => ({ ...s, strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH })),
+    [series]
   );
-  const yScale = useMemo(() => {
-    if (yDomain === "auto") {
-      let dataMax = -Infinity;
-      let dataMin = Infinity;
-      for (const d of data) {
-        for (const s of series) {
-          const v = s.getValue(d);
-          if (v === null || v === void 0 || Number.isNaN(v)) continue;
-          if (v > dataMax) dataMax = v;
-          if (v < dataMin) dataMin = v;
-        }
-      }
-      const safeMax = Number.isFinite(dataMax) ? dataMax : 0;
-      const safeMin = Number.isFinite(dataMin) ? dataMin : 0;
-      const upper = Math.max(safeMax, yAutoMaxFloor ?? safeMax) * yAutoPad;
-      const lower = padAutoLower(Math.min(safeMin, yAutoMinCeil), yAutoPad);
-      return scaleLinear({ domain: [lower, upper], range: [yMax, 0], nice: true });
-    }
-    return scaleLinear({ domain: yDomain, range: [yMax, 0] });
-  }, [data, series, yDomain, yMax, yAutoPad, yAutoMaxFloor, yAutoMinCeil]);
-  const tooltipStyles = useTooltipStyles();
-  const { tip, tooltipRef, syncedPoint, isDirectHover, handleMouse, handleLeave } = useHoverSync(
+  return /* @__PURE__ */ jsx(
+    CartesianChart,
     {
       data,
       chartId,
-      getKey: getX,
-      xScale,
-      marginLeft: MARGIN.left
+      getX,
+      series: styledSeries,
+      ...y !== void 0 && { y },
+      ...y2 !== void 0 && { y2 },
+      ...zones !== void 0 && { zones },
+      ...xZones !== void 0 && { xZones },
+      ...refLines !== void 0 && { refLines },
+      ...xTicks !== void 0 && { xTicks },
+      ...tooltip !== void 0 && { tooltip },
+      ...height !== void 0 && { height },
+      ...legend !== void 0 && { legend },
+      ...ariaLabel !== void 0 && { ariaLabel },
+      ...isPending !== void 0 && { isPending },
+      children: (ctx) => /* @__PURE__ */ jsx(MultiLineMarks, { getX, markerShape, ctx })
     }
   );
-  const tickValues = useMemo(
-    () => numTicksX ? smartTicksEvery(data.map(getX), numTicksX) : smartTicks(data.map(getX), xMax),
-    [data, xMax, getX, numTicksX]
-  );
-  const seriesPts = useMemo(() => {
-    const out = /* @__PURE__ */ new Map();
-    for (const s of series) {
-      const pts = [];
-      for (const d of data) {
-        const v = s.getValue(d);
-        if (v !== null && v !== void 0 && !Number.isNaN(v)) pts.push({ __d: d, __y: v });
-      }
-      out.set(s.key, pts);
-    }
-    return out;
-  }, [data, series]);
-  const tooltipLbl = tip ? tooltipLabel?.(tip.data) ?? null : null;
+}
+function MultiLineMarks({
+  getX,
+  markerShape,
+  ctx
+}) {
+  const { data, visible, xScale, yScale, y2Scale, highlighted } = ctx;
+  const pointsBySeries = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const s of visible) m.set(s.key, seriesPoints(s, data));
+    return m;
+  }, [visible, data]);
+  const dimOpacity = (s) => highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25;
+  const scaleFor = (s) => s.axis === "right" && y2Scale !== null ? y2Scale : yScale;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("svg", { width: plot.width, height: plot.height, children: /* @__PURE__ */ jsxs(Group, { left: MARGIN.left, top: MARGIN.top, children: [
-      /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: xMax, stroke: VX.grid, numTicks: numTicksY }),
-      /* @__PURE__ */ jsx(ZoneRects, { zones, width: xMax, leftScale: yScale }),
-      refLines.map((r, i) => /* @__PURE__ */ jsx(
-        "line",
+    visible.map((s) => {
+      const valid = pointsBySeries.get(s.key) ?? [];
+      if (valid.length === 0) return null;
+      const scale = scaleFor(s);
+      return /* @__PURE__ */ jsx(
+        LinePath,
         {
-          x1: 0,
-          x2: xMax,
-          y1: yScale(r.value),
-          y2: yScale(r.value),
-          stroke: r.color,
-          strokeDasharray: r.dashed ? VX.dashArray : void 0
+          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 : void 0,
+          strokeOpacity: dimOpacity(s),
+          curve: curveMonotoneX
         },
-        `ref-${i}`
-      )),
-      series.map((s) => {
-        const valid = seriesPts.get(s.key) ?? [];
-        if (valid.length === 0) return null;
-        return /* @__PURE__ */ jsx(
-          LinePath,
-          {
-            data: valid,
-            x: (p) => xScale(getX(p.__d)) ?? 0,
-            y: (p) => yScale(p.__y),
-            stroke: s.color,
-            strokeWidth: s.strokeWidth ?? VX.lineWidth,
-            strokeDasharray: s.dash === "dashed" ? VX.dashArray : void 0,
-            strokeOpacity: dimOpacity(s),
-            curve: curveMonotoneX
-          },
-          `line-${s.key}`
+        `line-${s.key}`
+      );
+    }),
+    visible.flatMap((s) => {
+      const getMarker = s.getMarker;
+      if (!getMarker) return [];
+      const scale = scaleFor(s);
+      const op = dimOpacity(s);
+      const markers = [];
+      for (const p of pointsBySeries.get(s.key) ?? []) {
+        const m = getMarker(p.__d);
+        if (m === null) continue;
+        const cx = xScale(getX(p.__d)) ?? 0;
+        const cy = scale(p.__y);
+        const color = m.color ?? s.color;
+        const r = m.r ?? (markerShape === "star" ? STAR_R : VX.dotR);
+        markers.push(
+          markerShape === "star" ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: starPath(cx, cy, r),
+              fill: color,
+              stroke: VX.dotStroke,
+              strokeWidth: 1.5,
+              fillOpacity: op,
+              strokeOpacity: op
+            },
+            `mk-${s.key}-${getX(p.__d)}`
+          ) : /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r,
+              fill: color,
+              stroke: VX.dotStroke,
+              strokeWidth: 2,
+              fillOpacity: op,
+              strokeOpacity: op
+            },
+            `mk-${s.key}-${getX(p.__d)}`
+          )
         );
-      }),
-      series.flatMap((s) => {
-        const getMarker = s.getMarker;
-        if (!getMarker) return [];
-        const op = dimOpacity(s);
-        const markers = [];
-        for (const p of seriesPts.get(s.key) ?? []) {
-          const m = getMarker(p.__d);
-          if (m === null) continue;
-          const cx = xScale(getX(p.__d)) ?? 0;
-          const cy = yScale(p.__y);
-          const color = m.color ?? s.color;
-          const r = m.r ?? (markerShape === "star" ? STAR_R : VX.dotR);
-          markers.push(
-            markerShape === "star" ? /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: starPath(cx, cy, r),
-                fill: color,
-                stroke: VX.dotStroke,
-                strokeWidth: 1.5,
-                fillOpacity: op,
-                strokeOpacity: op
-              },
-              `mk-${s.key}-${getX(p.__d)}`
-            ) : /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx,
-                cy,
-                r,
-                fill: color,
-                stroke: VX.dotStroke,
-                strokeWidth: 2,
-                fillOpacity: op,
-                strokeOpacity: op
-              },
-              `mk-${s.key}-${getX(p.__d)}`
-            )
-          );
-        }
-        return markers;
-      }),
-      syncedPoint && (() => {
-        const sx = xScale(getX(syncedPoint)) ?? 0;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Crosshair, { x: sx, top: 0, bottom: yMax }),
-          series.map((s) => {
-            const v = s.getValue(syncedPoint);
-            if (v === null || v === void 0 || Number.isNaN(v)) return null;
-            return /* @__PURE__ */ jsx(SeriesDot, { cx: sx, cy: yScale(v), color: s.color }, `dot-${s.key}`);
-          })
-        ] });
-      })(),
-      /* @__PURE__ */ jsx(
-        AxisLeftNumeric,
-        {
-          scale: yScale,
-          numTicks: numTicksY,
-          ...formatYTick !== void 0 && { tickFormat: formatYTick }
-        }
-      ),
-      /* @__PURE__ */ jsx(AxisBottomDate, { top: yMax, scale: xScale, tickValues }),
-      /* @__PURE__ */ jsx(HoverOverlay, { width: xMax, height: yMax, onMove: handleMouse, onLeave: handleLeave })
-    ] }) }),
-    /* @__PURE__ */ jsx(ChartTooltip, { tip: isDirectHover ? tip : null, tooltipRef, styles: tooltipStyles, children: tip && isDirectHover && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        TooltipHeader,
-        {
-          date: getX(tip.data),
-          ...tooltipLbl !== null && { label: tooltipLbl.text, labelColor: tooltipLbl.color }
-        }
-      ),
-      /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        deriveTooltipRows(series, tip.data, formatValue).map((row) => /* @__PURE__ */ jsx(
-          TooltipRow,
-          {
-            color: row.color,
-            label: row.label,
-            value: row.value,
-            shape: row.shape,
-            dashed: row.dashed,
-            ...row.strokeWidth !== void 0 && { strokeWidth: row.strokeWidth }
-          },
-          row.key
-        )),
-        renderExtraTooltipRows?.(tip.data)
-      ] })
-    ] }) })
+      }
+      return markers;
+    })
   ] });
 }
 const MultiLine = memo(MultiLineInner);

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

@@ -1,30 +1,41 @@
+import type { AxisConfig } from '../primitives/CartesianChart.js';
 import type { ChartLegendConfig, ChartSeries } from '../series.js';
 export type StackedAreaProps<T> = {
     data: T[];
-    /** Fixed height in pixels, forwarded to the internal `ChartFrame`. Default 240. */
+    /** Fixed height in pixels, forwarded to `CartesianChart`. Default 240. */
     height?: number;
     chartId: string;
     getX: (d: T) => string;
     /** The stacked bands, bottom to top — the single source of truth for color, legend, and tooltip
      * rows. Typically `mark: 'area'` (rendered as a `bar`-shaped legend/tooltip swatch). */
     series: ChartSeries<T>[];
-    formatValue: (v: number) => string;
-    yLabel?: string;
-    numTicksY?: number;
-    numTicksX?: number;
-    yAutoMaxFloor?: number;
-    /** Legend config forwarded to `ChartFrame`; `false` disables the legend (sparkline escape).
+    /** Axis config for ticks/format/grid. `domain` defaults to the summed per-point stack total
+     * (padded ×1.1, or `autoMaxFloor` if higher) rather than a per-series max — the seam a stacked
+     * chart needs, since the plotted quantity is the cumulative band top, not any one series' own
+     * value. Pass a fixed tuple or your own function to override. */
+    y?: AxisConfig<T>;
+    /** X tick count override. Default: as many as fit. */
+    xTicks?: number;
+    /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
      * Default `{ placement: 'bottom' }`. */
     legend?: ChartLegendConfig | false;
-    /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="img"`). */
+    /** Accessible text alternative, forwarded as `aria-label` (+ `role="img"`). */
     ariaLabel?: string;
-    /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
+    /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
     isPending?: boolean;
 };
 /**
  * Multi-series stacked-area chart with an optional derived legend (default on) and legend-hover
  * dimming. Each band's fillOpacity is dimmed when a different key is highlighted via the legend.
- * The tooltip renders rows in reversed (top-to-bottom) stack order so it matches the visual stack.
+ *
+ * Composes `CartesianChart` (`docs/CHARTS-SPEC.md` §2) — margin, scale, grid, axes, cursor, and
+ * tooltip are the primitive's job. This file draws only the `AreaStack` bands.
+ *
+ * The tooltip must render top-to-bottom (matching the visual stack read from the top), but the
+ * marks must stack bottom-to-top (matching `series`' own order) — the two can't share one order.
+ * `CartesianChart`'s `series` prop drives BOTH the derived tooltip rows and legend, so `series` is
+ * passed reversed to it (tooltip/legend read top-first); the marks then reverse `ctx.visible` back
+ * to restore the original bottom-to-top stacking order for `AreaStack`'s `keys`.
  */
 declare function StackedAreaInner<T>(props: StackedAreaProps<T>): import("react").JSX.Element;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"StackedArea.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/StackedArea.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAI/D,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;4FACwF;IACxF,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BAmBtD;AAiJD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAA6B,OAAO,gBAAgB,CAAA"}
+{"version":3,"file":"StackedArea.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/StackedArea.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAe,MAAM,8BAA8B,CAAA;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE/D,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;4FACwF;IACxF,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB;;;qEAGiE;IACjE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IACjB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BAgEtD;AA+CD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAA6B,OAAO,gBAAgB,CAAA"}