basalt-ui 1.14.0 → 1.15.0

package/dist/charts/kinds/StackedArea.js

@@ -1,150 +1,92 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } 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 { AreaStack } 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 { useHoverSync } from "../hooks/useHoverSync.js";
-import { deriveTooltipRows } from "../series.js";
-import { VX } from "../../tokens/index.js";
-import { smartTicks, smartTicksEvery } from "../utils/ticks.js";
+import { memo, useCallback, useMemo } from "react";
+import { CartesianChart } from "../primitives/CartesianChart.js";
 function StackedAreaInner(props) {
-  const { series, chartId, height, legend, ariaLabel, isPending } = props;
-  const [highlightedKey, setHighlightedKey] = useState(null);
+  const { data, chartId, getX, series, y, xTicks, height, legend, ariaLabel, isPending } = props;
+  const yConfig = useMemo(() => {
+    const base = y ?? {};
+    if (base.domain !== void 0 && base.domain !== "auto") return base;
+    const pad = base.autoPad ?? 1.1;
+    return {
+      ...base,
+      // Sums the VISIBLE bands only, so toggling one off in the legend shrinks the axis instead
+      // of leaving a permanent empty gap above the stack.
+      domain: (rows, visible) => {
+        let maxTotal = 0;
+        for (const d of rows) {
+          let total = 0;
+          for (const s of visible) total += s.getValue(d) ?? 0;
+          if (total > maxTotal) maxTotal = total;
+        }
+        return [0, Math.max(maxTotal, base.autoMaxFloor ?? maxTotal) * pad];
+      }
+    };
+  }, [y]);
+  const stackedCursorValue = useCallback(
+    (d, s, visible) => {
+      let total = 0;
+      for (let i = visible.length - 1; i >= 0; i--) {
+        const band = visible[i];
+        total += band.getValue(d) ?? 0;
+        if (band.key === s.key) return total;
+      }
+      return null;
+    },
+    []
+  );
+  const reversedSeries = useMemo(() => series.toReversed(), [series]);
   return /* @__PURE__ */ jsx(
-    ChartFrame,
+    CartesianChart,
     {
-      series,
+      data,
       chartId,
+      getX,
+      series: reversedSeries,
+      y: yConfig,
+      cursorValue: stackedCursorValue,
+      ...xTicks !== void 0 && { xTicks },
       ...height !== void 0 && { height },
+      ...legend !== void 0 && { legend },
       ...ariaLabel !== void 0 && { ariaLabel },
       ...isPending !== void 0 && { isPending },
-      legend: resolveLegend(legend, {
-        highlighted: highlightedKey,
-        onHighlight: setHighlightedKey
-      }),
-      children: (plot) => /* @__PURE__ */ jsx(StackedAreaPlot, { ...props, plot, highlightedKey })
+      children: (ctx) => /* @__PURE__ */ jsx(StackedAreaMarks, { getX, ctx })
     }
   );
 }
-function StackedAreaPlot(props) {
-  const {
-    data,
-    chartId,
-    getX,
-    series,
-    formatValue,
-    numTicksY = 5,
-    numTicksX,
-    yAutoMaxFloor,
-    plot,
-    highlightedKey
-  } = props;
-  const MARGIN = VX.margin;
-  const xMax = plot.width - MARGIN.left - MARGIN.right;
-  const yMax = plot.height - MARGIN.top - MARGIN.bottom;
-  const seriesByKey = useMemo(() => new Map(series.map((s) => [s.key, s])), [series]);
-  const groups = useMemo(() => series.map((s) => s.key), [series]);
-  const xScale = useMemo(
-    () => scalePoint({
-      domain: data.map(getX),
-      range: [0, xMax],
-      padding: 0
-    }),
-    [data, xMax, getX]
-  );
-  const yScale = useMemo(() => {
-    let maxTotal = 0;
-    for (const d of data) {
-      let total = 0;
-      for (const s of series) {
-        total += s.getValue(d) ?? 0;
-      }
-      if (total > maxTotal) maxTotal = total;
-    }
-    const upper = Math.max(maxTotal, yAutoMaxFloor ?? maxTotal) * 1.1;
-    return scaleLinear({ domain: [0, upper], range: [yMax, 0], nice: true });
-  }, [data, series, yMax, yAutoMaxFloor]);
-  const tooltipStyles = useTooltipStyles();
-  const { tip, tooltipRef, syncedPoint, isDirectHover, handleMouse, handleLeave } = useHoverSync(
+function StackedAreaMarks({ getX, ctx }) {
+  const { visible, xScale, yScale, highlighted } = ctx;
+  const { groups, seriesByKey } = useMemo(() => {
+    const stackOrder = visible.toReversed();
+    return {
+      groups: stackOrder.map((s) => s.key),
+      seriesByKey: new Map(stackOrder.map((s) => [s.key, s]))
+    };
+  }, [visible]);
+  const rows = useMemo(() => [...ctx.data], [ctx.data]);
+  return /* @__PURE__ */ jsx(
+    AreaStack,
     {
-      data,
-      chartId,
-      getKey: getX,
-      xScale,
-      marginLeft: MARGIN.left
-    }
-  );
-  const tickValues = useMemo(
-    () => numTicksX ? smartTicksEvery(data.map(getX), numTicksX) : smartTicks(data.map(getX), xMax),
-    [data, xMax, getX, numTicksX]
-  );
-  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(
-        AreaStack,
-        {
-          data,
-          keys: groups,
-          x: (d) => xScale(getX(d.data)) ?? 0,
-          y0: (d) => yScale(d[0]) ?? 0,
-          y1: (d) => yScale(d[1]) ?? 0,
-          value: (d, key) => seriesByKey.get(key)?.getValue(d) ?? 0,
-          curve: curveMonotoneX,
-          children: ({ stacks, path }) => stacks.map((stack) => /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: path(stack) || "",
-              fill: seriesByKey.get(stack.key)?.color,
-              stroke: "transparent",
-              fillOpacity: highlightedKey === null || highlightedKey === stack.key ? 1 : 0.25
-            },
-            `stack-${stack.key}`
-          ))
-        }
-      ),
-      syncedPoint && (() => {
-        const sx = xScale(getX(syncedPoint)) ?? 0;
-        let cum = 0;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Crosshair, { x: sx, top: 0, bottom: yMax }),
-          series.map((s) => {
-            cum += s.getValue(syncedPoint) ?? 0;
-            return /* @__PURE__ */ jsx(SeriesDot, { cx: sx, cy: yScale(cum), color: s.color }, `dot-${s.key}`);
-          })
-        ] });
-      })(),
-      /* @__PURE__ */ jsx(AxisLeftNumeric, { scale: yScale, numTicks: numTicksY, tickFormat: formatValue }),
-      /* @__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) }),
-      /* @__PURE__ */ jsx(TooltipBody, { children: deriveTooltipRows(series.toReversed(), tip.data, formatValue).map((row) => /* @__PURE__ */ jsx(
-        TooltipRow,
+      data: rows,
+      keys: groups,
+      x: (d) => xScale(getX(d.data)) ?? 0,
+      y0: (d) => yScale(d[0]) ?? 0,
+      y1: (d) => yScale(d[1]) ?? 0,
+      value: (d, key) => seriesByKey.get(key)?.getValue(d) ?? 0,
+      curve: curveMonotoneX,
+      children: ({ stacks, path }) => stacks.map((stack) => /* @__PURE__ */ jsx(
+        "path",
         {
-          color: row.color,
-          label: row.label,
-          value: row.value,
-          shape: row.shape
+          d: path(stack) || "",
+          fill: seriesByKey.get(stack.key)?.color,
+          stroke: "transparent",
+          fillOpacity: highlighted === null || highlighted === stack.key ? 1 : 0.25
         },
-        row.key
-      )) })
-    ] }) })
-  ] });
+        `stack-${stack.key}`
+      ))
+    }
+  );
 }
 const StackedArea = memo(StackedAreaInner);
 export {

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

@@ -1,4 +1,5 @@
-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';
 /** @deprecated Use ZoneSpec from primitives/ZoneRects. Kept as an alias for back-compat. */
@@ -16,49 +17,31 @@ export type ZonedLineRefLine = {
     /** Solid by default; set true for a dashed line. */
     dashed?: boolean;
 };
-export type ZonedLineTooltipLabel = {
-    text: string;
-    color: string;
-};
 export type ZonedLineProps<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;
     /** Single-series line — the sole source of truth for color, dash, legend, and tooltip row. Pass
-     * exactly one entry (kept as an array for parity with the other kinds and so `ChartFrame` /
+     * exactly one entry (kept as an array for parity with the other kinds and so `CartesianChart` /
      * `deriveLegend` / `deriveTooltipRows` can consume it directly). */
     series: ChartSeries<T>[];
-    /** Fixed y-domain (e.g. [0, 100]) or 'auto' to compute from data. */
-    yDomain: [number, number] | 'auto';
-    /**
-     * When yDomain is 'auto': the upper bound is at least this value (caps data max).
-     * e.g. yAutoMaxFloor=2 guarantees the y-axis always reaches 2 even if data is smaller.
-     */
-    yAutoMaxFloor?: number;
-    /**
-     * When yDomain is 'auto': the lower bound is at most this value.
-     * Default 0 — always includes zero when data is all positive. Pass a negative
-     * number (or Infinity to disable) for metrics that can legitimately swing both ways.
-     */
-    yAutoMinCeil?: number;
-    /** Padding multiplier applied to auto-computed bounds. Default 1.1. The lower bound always pads
-     * DOWN from `min(dataMin, yAutoMinCeil)` (never up, which would clip data) — see
-     * {@link padAutoLower}. */
-    yAutoPad?: number;
+    /** Y-axis. Collapses the old `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` / `yAutoPad` /
+     * `numTicksY` / `formatYTick` prop soup into one object. */
+    y?: AxisConfig<T>;
     zones?: ZonedLineZone[];
+    /** Vertical x-range overlays (time windows), rendered behind the line. Bounds are `getX`
+     * domain keys. */
+    xZones?: XZoneSpec[];
     thresholds?: ZonedLineThreshold[];
     refLines?: ZonedLineRefLine[];
-    numTicksY?: number;
-    numTicksX?: number;
-    /** Label shown at the right of the tooltip header (e.g. zone name with zone color). */
-    tooltipLabel?: (d: T) => ZonedLineTooltipLabel | null;
-    /** Formatter for the tooltip value. */
-    formatValue: (v: number) => string;
-    /** Optional extra tooltip rows (rendered after the main row). */
-    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 (e.g. zone name with zone color),
+     * `extraRows` for rows appended after the derived row. `false` disables the tooltip entirely. */
+    tooltip?: CartesianTooltipConfig<T> | false;
     /**
      * Opt-in soft gradient fill under the line. Pass a color token to tint the area
      * with that hue — the modern single-hue look. `true` falls back to the series color. Off by
@@ -66,21 +49,22 @@ export type ZonedLineProps<T> = {
      * via `--vx-area-top` / `--vx-area-bottom` (tunable in the dev theme lab).
      */
     areaFill?: string | boolean;
-    /** 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;
 };
 /**
- * Line chart with zone backgrounds, threshold fills, reference lines, and a
- * shared-cursor tooltip. Covers the line-with-zones pattern. Does NOT handle
- * dual-panel charts (keep those bespoke).
+ * Single-series line chart with zone backgrounds, threshold fills, an optional area gradient,
+ * reference lines, and a shared-cursor tooltip. Covers the line-with-zones pattern. Does NOT
+ * handle dual-panel charts (keep those bespoke).
  *
- * Composes `ChartFrame` for measuring + the derived legend — single-series, so the legend is
- * optional in practice but present by default (gained relative to the pre-redesign kind).
+ * Composes `CartesianChart` for measuring, scales, grid, zones/x-zones, axes, the shared cursor,
+ * and the derived tooltip — this kind draws ONLY the marks (thresholds, area fill, and the line).
+ * Single-series, so the legend is optional in practice but present by default.
  *
  * X-axis is built from the full `data` array so the calendar is preserved even
  * when the series has nulls; the line itself skips null points (creating

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

@@ -1 +1 @@
-{"version":3,"file":"ZonedLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/ZonedLine.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AActC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAGvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK/D,4FAA4F;AAC5F,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAA;AAEpC,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,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;;wEAEoE;IACpE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB,qEAAqE;IACrE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;+BAE2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAA;IACvB,UAAU,CAAC,EAAE,kBAAkB,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,qBAAqB,GAAG,IAAI,CAAA;IACrD,uCAAuC;IACvC,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,iEAAiE;IACjE,sBAAsB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAA;IAC5C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;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;;;;;;;;;;;GAWG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BAsBlD;AA2MD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}
+{"version":3,"file":"ZonedLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/ZonedLine.tsx"],"names":[],"mappings":"AAKA,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,4FAA4F;AAC5F,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAA;AAEpC,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,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;;wEAEoE;IACpE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB;gEAC4D;IAC5D,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IACjB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAA;IACvB;sBACkB;IAClB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB,UAAU,CAAC,EAAE,kBAAkB,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC7B,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;qGACiG;IACjG,OAAO,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IAC3C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;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;AAiBD;;;;;;;;;;;;GAYG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BA2DlD;AA8ED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}

package/dist/charts/kinds/ZonedLine.js

@@ -1,216 +1,135 @@
 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 { AreaClosed, LinePath } from "@visx/shape";
 import { Threshold } from "@visx/threshold";
 import { memo, useMemo } from "react";
 import { AreaGradient, areaFillUrl } from "../primitives/AreaGradient.js";
-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 { 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";
+function validPoints(series, data) {
+  if (!series) return [];
+  const out = [];
+  for (const d of data) {
+    const y = series.getValue(d);
+    if (y !== null && y !== void 0 && !Number.isNaN(y)) {
+      out.push(Object.assign({}, d, { __y: y }));
+    }
+  }
+  return out;
+}
 function ZonedLineInner(props) {
-  const { series, chartId, height, legend, ariaLabel, isPending } = props;
+  const {
+    data,
+    chartId,
+    getX,
+    series,
+    y,
+    zones,
+    xZones,
+    thresholds,
+    refLines,
+    xTicks,
+    tooltip,
+    areaFill,
+    height,
+    legend,
+    ariaLabel,
+    isPending
+  } = props;
   const styledSeries = useMemo(
-    () => series.map((s) => ({ ...s, strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH })),
+    () => series.map((s) => ({
+      ...s,
+      strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH
+    })),
     [series]
   );
   return /* @__PURE__ */ jsx(
-    ChartFrame,
+    CartesianChart,
     {
-      series: styledSeries,
+      data,
       chartId,
+      getX,
+      series: styledSeries,
+      ...y !== void 0 && { y },
+      ...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 },
-      legend: resolveLegend(legend),
-      children: (plot) => /* @__PURE__ */ jsx(ZonedLinePlot, { ...props, series: styledSeries, plot })
+      children: (ctx) => /* @__PURE__ */ jsx(
+        ZonedLineMarks,
+        {
+          getX,
+          chartId,
+          thresholds: thresholds ?? [],
+          areaFill,
+          ctx
+        }
+      )
     }
   );
 }
-function ZonedLinePlot(props) {
-  const {
-    data,
-    chartId,
-    getX,
-    series,
-    yDomain,
-    yAutoPad = 1.1,
-    yAutoMaxFloor,
-    yAutoMinCeil = 0,
-    zones = [],
-    thresholds = [],
-    refLines = [],
-    numTicksY = 5,
-    numTicksX,
-    tooltipLabel,
-    formatValue,
-    renderExtraTooltipRows,
-    areaFill,
-    plot
-  } = props;
-  const primary = series[0];
-  const MARGIN = VX.margin;
-  const xMax = plot.width - MARGIN.left - MARGIN.right;
-  const yMax = plot.height - MARGIN.top - MARGIN.bottom;
+function ZonedLineMarks({
+  getX,
+  chartId,
+  thresholds,
+  areaFill,
+  ctx
+}) {
+  const { data, visible, xScale, yScale, yMax } = ctx;
+  const primary = visible[0];
+  const valid = useMemo(() => validPoints(primary, data), [primary, data]);
   const showArea = areaFill !== void 0 && areaFill !== false;
   const areaColor = typeof areaFill === "string" ? areaFill : primary?.color;
   const areaId = `${chartId}-area`;
-  const valid = useMemo(() => {
-    const out = [];
-    for (const d of data) {
-      const y = primary?.getValue(d) ?? null;
-      if (y !== null && y !== void 0 && !Number.isNaN(y)) {
-        out.push(Object.assign({}, d, { __y: y }));
-      }
-    }
-    return out;
-  }, [data, primary]);
-  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 yScale = useMemo(() => {
-    if (yDomain === "auto") {
-      const ys = valid.map((d) => d.__y);
-      const dataMax = ys.length ? Math.max(...ys) : 0;
-      const dataMin = ys.length ? Math.min(...ys) : 0;
-      const upper = Math.max(dataMax, yAutoMaxFloor ?? dataMax) * yAutoPad;
-      const lower = padAutoLower(Math.min(dataMin, yAutoMinCeil), yAutoPad);
-      return scaleLinear({ domain: [lower, upper], range: [yMax, 0], nice: true });
-    }
-    return scaleLinear({ domain: yDomain, range: [yMax, 0] });
-  }, [valid, yDomain, yMax, yAutoPad, yAutoMaxFloor, yAutoMinCeil]);
-  const tooltipStyles = useTooltipStyles();
-  const { tip, tooltipRef, syncedPoint, isDirectHover, handleMouse, handleLeave } = useHoverSync({
-    data: valid,
-    chartId,
-    getKey: getX,
-    xScale,
-    marginLeft: MARGIN.left
-  });
-  const tickValues = useMemo(
-    () => numTicksX ? smartTicksEvery(data.map(getX), numTicksX) : smartTicks(data.map(getX), xMax),
-    [data, xMax, getX, numTicksX]
-  );
-  const tooltipLbl = tip ? tooltipLabel?.(tip.data) ?? null : null;
   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 }),
-      thresholds.map((t, i) => /* @__PURE__ */ jsx(
-        Threshold,
-        {
-          id: `${chartId}-thr-${i}`,
-          data: valid,
-          x: (d) => xScale(getX(d)) ?? 0,
-          y0: () => yScale(t.value),
-          y1: (d) => yScale(d.__y),
-          clipAboveTo: 0,
-          clipBelowTo: yMax,
-          curve: curveMonotoneX,
-          belowAreaProps: { fill: t.side === "above" ? t.fill : "transparent" },
-          aboveAreaProps: { fill: t.side === "below" ? t.fill : "transparent" }
-        },
-        `thr-${i}`
-      )),
-      showArea && areaColor !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(AreaGradient, { id: areaId, color: areaColor }) }),
-        /* @__PURE__ */ jsx(
-          AreaClosed,
-          {
-            data: valid,
-            x: (d) => xScale(getX(d)) ?? 0,
-            y: (d) => yScale(d.__y),
-            yScale,
-            curve: curveMonotoneX,
-            fill: areaFillUrl(areaId)
-          }
-        )
-      ] }),
-      refLines.map((r, i) => /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: 0,
-          x2: xMax,
-          y1: yScale(r.value),
-          y2: yScale(r.value),
-          stroke: r.color,
-          strokeDasharray: r.dashed ? VX.dashArray : void 0
-        },
-        `ref-${i}`
-      )),
-      primary && /* @__PURE__ */ jsx(
-        LinePath,
+    thresholds.map((t, i) => /* @__PURE__ */ jsx(
+      Threshold,
+      {
+        id: `${chartId}-thr-${i}`,
+        data: valid,
+        x: (d) => xScale(getX(d)) ?? 0,
+        y0: () => yScale(t.value),
+        y1: (d) => yScale(d.__y),
+        clipAboveTo: 0,
+        clipBelowTo: yMax,
+        curve: curveMonotoneX,
+        belowAreaProps: { fill: t.side === "above" ? t.fill : "transparent" },
+        aboveAreaProps: { fill: t.side === "below" ? t.fill : "transparent" }
+      },
+      `thr-${i}`
+    )),
+    showArea && areaColor !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(AreaGradient, { id: areaId, color: areaColor }) }),
+      /* @__PURE__ */ jsx(
+        AreaClosed,
         {
           data: valid,
           x: (d) => xScale(getX(d)) ?? 0,
           y: (d) => yScale(d.__y),
-          stroke: primary.color,
-          strokeWidth: primary.strokeWidth ?? VX.lineWidth,
-          strokeDasharray: primary.dash === "dashed" ? VX.dashArray : void 0,
-          curve: curveMonotoneX
-        }
-      ),
-      syncedPoint && primary && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Crosshair, { x: xScale(getX(syncedPoint)) ?? 0, top: 0, bottom: yMax }),
-        /* @__PURE__ */ jsx(
-          SeriesDot,
-          {
-            cx: xScale(getX(syncedPoint)) ?? 0,
-            cy: yScale(syncedPoint.__y),
-            color: primary.color
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(AxisLeftNumeric, { scale: yScale, numTicks: numTicksY }),
-      /* @__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 }
+          yScale,
+          curve: curveMonotoneX,
+          fill: areaFillUrl(areaId)
         }
-      ),
-      /* @__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)
-      ] })
-    ] }) })
+      )
+    ] }),
+    primary && /* @__PURE__ */ jsx(
+      LinePath,
+      {
+        data: valid,
+        x: (d) => xScale(getX(d)) ?? 0,
+        y: (d) => yScale(d.__y),
+        stroke: primary.color,
+        strokeWidth: primary.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
+        strokeDasharray: primary.dash === "dashed" ? VX.dashArray : void 0,
+        curve: curveMonotoneX
+      }
+    )
   ] });
 }
 const ZonedLine = memo(ZonedLineInner);