basalt-ui 1.26.0 → 1.28.0

package/dist/charts/kinds/MultiLine.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { curveMonotoneX } from "@visx/curve";
 import { LinePath } from "@visx/shape";
 import { memo, useCallback, useMemo } from "react";
+import { assertRequiredProps } from "../../common/validate.js";
 import { CartesianChart } from "../primitives/CartesianChart.js";
-import { LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
+import { curveFor, definedOn, LINE_OVERLAY_STROKE_WIDTH, toPlotPoint } from "../series.js";
 import { VX } from "../../tokens/index.js";
 const STAR_R = 6;
 function starPath(cx, cy, r) {
@@ -17,14 +17,10 @@ function starPath(cx, cy, r) {
   return `M${pts.join("L")}Z`;
 }
 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;
+  return data.map((d) => ({ __d: d, __y: toPlotPoint(series.getValue(d)) }));
 }
 function MultiLineInner(props) {
+  assertRequiredProps("MultiLine", props, ["data", "getX", "series"]);
   const {
     data,
     chartId,
@@ -38,13 +34,17 @@ function MultiLineInner(props) {
     xTicks,
     xTickValues,
     formatX,
+    xLabelRotate,
     cursorResolution,
     tooltip,
     markerShape = "circle",
     height,
     legend,
     ariaLabel,
-    isPending
+    isPending,
+    state,
+    className,
+    style
   } = props;
   const styledSeries = useMemo(
     () => series.map((s) => ({ ...s, strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH })),
@@ -65,12 +65,16 @@ function MultiLineInner(props) {
       ...xTicks !== void 0 && { xTicks },
       ...xTickValues !== void 0 && { xTickValues },
       ...formatX !== void 0 && { formatX },
+      ...xLabelRotate !== void 0 && { xLabelRotate },
       ...cursorResolution !== void 0 && { cursorResolution },
       ...tooltip !== void 0 && { tooltip },
       ...height !== void 0 && { height },
       ...legend !== void 0 && { legend },
       ...ariaLabel !== void 0 && { ariaLabel },
       ...isPending !== void 0 && { isPending },
+      ...state !== void 0 && { state },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: (ctx) => /* @__PURE__ */ jsx(MultiLineMarks, { getX, markerShape, ctx })
     }
   );
@@ -102,10 +106,12 @@ function MultiLineMarks({
       const op = dimOpacity(s);
       const markers = [];
       for (const p of pointsBySeries.get(s.key) ?? []) {
+        if (p.__y === null) continue;
         const m = getMarker(p.__d);
         if (m === null) continue;
         const cx = xScale(getX(p.__d)) ?? 0;
         const cy = scale(p.__y);
+        if (!Number.isFinite(cy)) continue;
         const color = m.color ?? s.color;
         const r = m.r ?? (markerShape === "star" ? STAR_R : VX.dotR);
         const ring = m.ring ?? true;
@@ -140,20 +146,21 @@ function MultiLineMarks({
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     visible.map((s) => {
-      const valid = pointsBySeries.get(s.key) ?? [];
-      if (valid.length === 0) return null;
+      const pts = pointsBySeries.get(s.key) ?? [];
+      if (!pts.some((p) => p.__y !== null)) return null;
       const scale = scaleFor(s);
       return /* @__PURE__ */ jsx(
         LinePath,
         {
-          data: valid,
+          data: pts,
           x: (p) => xScale(getX(p.__d)) ?? 0,
-          y: (p) => scale(p.__y),
+          y: (p) => scale(p.__y ?? NaN),
+          defined: definedOn(scale),
           stroke: s.color,
           strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
           strokeDasharray: s.dash === "dashed" ? VX.dashArray : void 0,
           strokeOpacity: dimOpacity(s) * (s.strokeOpacity ?? 1),
-          curve: curveMonotoneX
+          curve: curveFor(s.curve)
         },
         `line-${s.key}`
       );
@@ -161,7 +168,9 @@ function MultiLineMarks({
     markerNodes
   ] });
 }
-const MultiLine = memo(MultiLineInner);
+const MultiLineMemo = memo(MultiLineInner);
+MultiLineMemo.displayName = "MultiLine";
+const MultiLine = MultiLineMemo;
 export {
   MultiLine
 };

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

@@ -1,7 +1,9 @@
+import type { BasaltProps } from '../../common/props.js';
 import type { CursorResolution } from '../cursor/resolve.js';
 import type { AxisConfig } from '../primitives/CartesianChart.js';
+import type { ChartState } from '../primitives/ChartPending.js';
 import type { ChartLegendConfig, ChartSeries } from '../series.js';
-export type StackedAreaProps<T> = {
+export type StackedAreaProps<T> = BasaltProps & {
     data: T[];
     /** Fixed height in pixels, forwarded to `CartesianChart`. Default 240. */
     height?: number;
@@ -13,8 +15,9 @@ export type StackedAreaProps<T> = {
     /** 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>;
+     * value. Pass a fixed tuple or your own function to override. No `scale` — stacking sums bar
+     * heights directly and a log axis has no additive zero to sum from. */
+    y?: Omit<AxisConfig<T>, 'scale'>;
     /** Exact number of x ticks. Default: as many as fit. Ignored when `xTickValues` is set. */
     xTicks?: number;
     /** Which domain keys get a tick, from the full key list and the resolved plot width. Takes
@@ -23,6 +26,9 @@ export type StackedAreaProps<T> = {
     xTickValues?: (keys: readonly string[], xMax: number) => readonly string[];
     /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
     formatX?: (key: string) => string;
+    /** Tilt the x tick labels 45° or 90°, or `0` to opt out of the phone tier's auto-rotation —
+     * see `CartesianChartProps.xLabelRotate`. */
+    xLabelRotate?: 0 | 45 | 90;
     /**
      * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
      * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
@@ -36,11 +42,20 @@ export type StackedAreaProps<T> = {
     ariaLabel?: string;
     /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
     isPending?: boolean;
+    /** The three "nothing to draw" states in one prop — pending → error → empty. See
+     * `ChartState`; `isPending` stays a supported alias for `state={{ pending: true }}`. */
+    state?: ChartState;
 };
 /**
  * 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.
  *
+ * **A stack is only as dense as its sparsest series.** A row where any VISIBLE band is null is
+ * dropped from the stack entirely — the bands break across that x, the crosshair reports no
+ * cumulative value there, and the axis domain ignores it. Toggling the sparse band off in the
+ * legend closes the gap, because density is measured against the visible set. A chart that needs
+ * a null band to read as zero must say so in its own `getValue`.
+ *
  * 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.
  *
@@ -51,11 +66,6 @@ export type StackedAreaProps<T> = {
  * to restore the original bottom-to-top stacking order for `AreaStack`'s `keys`.
  */
 declare function StackedAreaInner<T>(props: StackedAreaProps<T>): import("react").JSX.Element;
-/**
- * Hand-memoized: React Compiler does not process the shipped dist, so we wrap the
- * hot stacked-area kind in `React.memo` to retain the auto-memoization it had as source
- * (parity with ZonedLine / Bars / MultiLine).
- */
 export declare const StackedArea: typeof StackedAreaInner;
 export {};
 //# sourceMappingURL=StackedArea.d.ts.map

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":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,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,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;wBAEoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC1E,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,iFAAiF;IACjF,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,+BAiFtD;AA+CD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAA6B,OAAO,gBAAgB,CAAA"}
+{"version":3,"file":"StackedArea.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/StackedArea.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAE,UAAU,EAAe,MAAM,8BAA8B,CAAA;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,WAAW,GAAG;IAC9C,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;;;;2EAIuE;IACvE,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA;IAChC,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;wBAEoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC1E,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC;iDAC6C;IAC7C,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAA;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAaD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BA4GtD;AAoED,eAAO,MAAM,WAAW,EAAsB,OAAO,gBAAgB,CAAA"}

package/dist/charts/kinds/StackedArea.js

@@ -1,9 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import { curveMonotoneX } from "@visx/curve";
 import { AreaStack } from "@visx/shape";
 import { memo, useCallback, useMemo } from "react";
+import { assertRequiredProps } from "../../common/validate.js";
 import { CartesianChart } from "../primitives/CartesianChart.js";
+import { curveFor } from "../series.js";
+import { isDev } from "../../utils/is-dev.js";
+function rowIsDense(d, bands) {
+  return bands.every((s) => s.getValue(d) !== null);
+}
 function StackedAreaInner(props) {
+  assertRequiredProps("StackedArea", props, ["data", "getX", "series"]);
   const {
     data,
     chartId,
@@ -13,12 +19,21 @@ function StackedAreaInner(props) {
     xTicks,
     xTickValues,
     formatX,
+    xLabelRotate,
     cursorResolution,
     height,
     legend,
     ariaLabel,
-    isPending
+    isPending,
+    state,
+    className,
+    style
   } = props;
+  if (isDev() && y?.scale === "log") {
+    throw new Error(
+      'StackedArea: cannot use a log axis (y.scale: "log") \u2014 the stack sums band heights, and a log axis has no additive zero to sum from.'
+    );
+  }
   const yConfig = useMemo(() => {
     const base = y ?? {};
     if (base.domain !== void 0 && base.domain !== "auto") return base;
@@ -30,6 +45,7 @@ function StackedAreaInner(props) {
       domain: (rows, visible) => {
         let maxTotal = 0;
         for (const d of rows) {
+          if (!rowIsDense(d, visible)) continue;
           let total = 0;
           for (const s of visible) total += s.getValue(d) ?? 0;
           if (total > maxTotal) maxTotal = total;
@@ -40,6 +56,7 @@ function StackedAreaInner(props) {
   }, [y]);
   const stackedCursorValue = useCallback(
     (d, s, visible) => {
+      if (!rowIsDense(d, visible)) return null;
       let total = 0;
       for (let i = visible.length - 1; i >= 0; i--) {
         const band = visible[i];
@@ -63,11 +80,15 @@ function StackedAreaInner(props) {
       ...xTicks !== void 0 && { xTicks },
       ...xTickValues !== void 0 && { xTickValues },
       ...formatX !== void 0 && { formatX },
+      ...xLabelRotate !== void 0 && { xLabelRotate },
       ...cursorResolution !== void 0 && { cursorResolution },
       ...height !== void 0 && { height },
       ...legend !== void 0 && { legend },
       ...ariaLabel !== void 0 && { ariaLabel },
       ...isPending !== void 0 && { isPending },
+      ...state !== void 0 && { state },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: (ctx) => /* @__PURE__ */ jsx(StackedAreaMarks, { getX, ctx })
     }
   );
@@ -82,6 +103,7 @@ function StackedAreaMarks({ getX, ctx }) {
     };
   }, [visible]);
   const rows = useMemo(() => [...ctx.data], [ctx.data]);
+  const curve = curveFor(visible.find((s) => s.curve !== void 0)?.curve);
   return /* @__PURE__ */ jsx(
     AreaStack,
     {
@@ -91,7 +113,8 @@ function StackedAreaMarks({ getX, ctx }) {
       y0: (d) => yScale(d[0]) ?? 0,
       y1: (d) => yScale(d[1]) ?? 0,
       value: (d, key) => seriesByKey.get(key)?.getValue(d) ?? 0,
-      curve: curveMonotoneX,
+      defined: (d) => rowIsDense(d.data, visible),
+      curve,
       children: ({ stacks, path }) => stacks.map((stack) => /* @__PURE__ */ jsx(
         "path",
         {
@@ -105,7 +128,9 @@ function StackedAreaMarks({ getX, ctx }) {
     }
   );
 }
-const StackedArea = memo(StackedAreaInner);
+const StackedAreaMemo = memo(StackedAreaInner);
+StackedAreaMemo.displayName = "StackedArea";
+const StackedArea = StackedAreaMemo;
 export {
   StackedArea
 };

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

@@ -1,7 +1,9 @@
+import type { BasaltProps } from '../../common/props.js';
 import type { CursorResolution } from '../cursor/resolve.js';
 import type { CartesianTooltipConfig, AxisConfig } from '../primitives/CartesianChart.js';
 import type { XZoneSpec } from '../primitives/XZoneRects.js';
 import type { ZoneSpec } from '../primitives/ZoneRects.js';
+import type { ChartState } from '../primitives/ChartPending.js';
 import type { ChartLegendConfig, ChartSeries } from '../series.js';
 /** @deprecated Use ZoneSpec from primitives/ZoneRects. Kept as an alias for back-compat. */
 export type ZonedLineZone = ZoneSpec;
@@ -18,7 +20,7 @@ export type ZonedLineRefLine = {
     /** Solid by default; set true for a dashed line. */
     dashed?: boolean;
 };
-export type ZonedLineProps<T> = {
+export type ZonedLineProps<T> = BasaltProps & {
     data: T[];
     /** Fixed height in pixels, forwarded to `CartesianChart`. Default 240. */
     height?: number;
@@ -46,6 +48,9 @@ export type ZonedLineProps<T> = {
     xTickValues?: (keys: readonly string[], xMax: number) => readonly string[];
     /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
     formatX?: (key: string) => string;
+    /** Tilt the x tick labels 45° or 90°, or `0` to opt out of the phone tier's auto-rotation —
+     * see `CartesianChartProps.xLabelRotate`. */
+    xLabelRotate?: 0 | 45 | 90;
     /**
      * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
      * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
@@ -69,6 +74,9 @@ export type ZonedLineProps<T> = {
     ariaLabel?: string;
     /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
     isPending?: boolean;
+    /** The three "nothing to draw" states in one prop — pending → error → empty. See
+     * `ChartState`; `isPending` stays a supported alias for `state={{ pending: true }}`. */
+    state?: ChartState;
 };
 /**
  * Single-series line chart with zone backgrounds, threshold fills, an optional area gradient,
@@ -79,15 +87,11 @@ export type ZonedLineProps<T> = {
  * 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
- * visual gaps).
+ * X-axis is built from the full `data` array so the calendar is preserved even when the series has
+ * nulls; the line, the area fill and the threshold fills all BREAK at a null point, leaving a real
+ * gap rather than interpolating across it.
  */
 declare function ZonedLineInner<T>(props: ZonedLineProps<T>): import("react").JSX.Element;
-/**
- * Hand-memoized: React Compiler does not process the shipped dist, so the hot ZonedLine kind is
- * wrapped in `React.memo` to retain the auto-memoization it had as source (parity with Bars).
- */
 export declare const ZonedLine: typeof ZonedLineInner;
 export {};
 //# sourceMappingURL=ZonedLine.d.ts.map

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":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,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,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;wBAEoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC1E,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC;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,qGAAqG;IACrG,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,+BAiElD;AA+ED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}
+{"version":3,"file":"ZonedLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/ZonedLine.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,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;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,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,WAAW,GAAG;IAC5C,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,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;wBAEoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC1E,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC;iDAC6C;IAC7C,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAA;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC;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,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAeD;;;;;;;;;;;;GAYG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BA6ElD;AAyGD,eAAO,MAAM,SAAS,EAAoB,OAAO,cAAc,CAAA"}

package/dist/charts/kinds/ZonedLine.js

@@ -1,24 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { curveMonotoneX } from "@visx/curve";
 import { AreaClosed, LinePath } from "@visx/shape";
 import { Threshold } from "@visx/threshold";
 import { memo, useMemo } from "react";
+import { assertRequiredProps } from "../../common/validate.js";
 import { AreaGradient, areaFillUrl } from "../primitives/AreaGradient.js";
 import { CartesianChart } from "../primitives/CartesianChart.js";
-import { LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
+import { curveFor, definedOn, LINE_OVERLAY_STROKE_WIDTH, toPlotPoint } from "../series.js";
 import { VX } from "../../tokens/index.js";
-function validPoints(series, data) {
+function linePoints(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;
+  return data.map((d) => Object.assign({}, d, { __y: toPlotPoint(series.getValue(d)) }));
 }
 function ZonedLineInner(props) {
+  assertRequiredProps("ZonedLine", props, ["data", "getX", "series"]);
   const {
     data,
     chartId,
@@ -32,13 +26,17 @@ function ZonedLineInner(props) {
     xTicks,
     xTickValues,
     formatX,
+    xLabelRotate,
     cursorResolution,
     tooltip,
     areaFill,
     height,
     legend,
     ariaLabel,
-    isPending
+    isPending,
+    state,
+    className,
+    style
   } = props;
   const styledSeries = useMemo(
     () => series.map((s) => ({
@@ -61,12 +59,16 @@ function ZonedLineInner(props) {
       ...xTicks !== void 0 && { xTicks },
       ...xTickValues !== void 0 && { xTickValues },
       ...formatX !== void 0 && { formatX },
+      ...xLabelRotate !== void 0 && { xLabelRotate },
       ...cursorResolution !== void 0 && { cursorResolution },
       ...tooltip !== void 0 && { tooltip },
       ...height !== void 0 && { height },
       ...legend !== void 0 && { legend },
       ...ariaLabel !== void 0 && { ariaLabel },
       ...isPending !== void 0 && { isPending },
+      ...state !== void 0 && { state },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: (ctx) => /* @__PURE__ */ jsx(
         ZonedLineMarks,
         {
@@ -89,7 +91,10 @@ function ZonedLineMarks({
 }) {
   const { data, visible, xScale, yScale, yMax } = ctx;
   const primary = visible[0];
-  const valid = useMemo(() => validPoints(primary, data), [primary, data]);
+  const pts = useMemo(() => linePoints(primary, data), [primary, data]);
+  const defined = definedOn(yScale);
+  const curve = curveFor(primary?.curve);
+  const yOf = (d) => yScale(d.__y ?? NaN);
   const showArea = areaFill !== void 0 && areaFill !== false;
   const areaColor = typeof areaFill === "string" ? areaFill : primary?.color;
   const areaId = `${chartId}-area`;
@@ -98,13 +103,14 @@ function ZonedLineMarks({
       Threshold,
       {
         id: `${chartId}-thr-${i}`,
-        data: valid,
+        data: pts,
+        defined,
         x: (d) => xScale(getX(d)) ?? 0,
         y0: () => yScale(t.value),
-        y1: (d) => yScale(d.__y),
+        y1: yOf,
         clipAboveTo: 0,
         clipBelowTo: yMax,
-        curve: curveMonotoneX,
+        curve,
         belowAreaProps: { fill: t.side === "above" ? t.fill : "transparent" },
         aboveAreaProps: { fill: t.side === "below" ? t.fill : "transparent" }
       },
@@ -115,11 +121,12 @@ function ZonedLineMarks({
       /* @__PURE__ */ jsx(
         AreaClosed,
         {
-          data: valid,
+          data: pts,
+          defined,
           x: (d) => xScale(getX(d)) ?? 0,
-          y: (d) => yScale(d.__y),
+          y: yOf,
           yScale,
-          curve: curveMonotoneX,
+          curve,
           fill: areaFillUrl(areaId)
         }
       )
@@ -127,19 +134,22 @@ function ZonedLineMarks({
     primary && /* @__PURE__ */ jsx(
       LinePath,
       {
-        data: valid,
+        data: pts,
+        defined,
         x: (d) => xScale(getX(d)) ?? 0,
-        y: (d) => yScale(d.__y),
+        y: yOf,
         stroke: primary.color,
         strokeWidth: primary.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
         strokeDasharray: primary.dash === "dashed" ? VX.dashArray : void 0,
         strokeOpacity: primary.strokeOpacity ?? 1,
-        curve: curveMonotoneX
+        curve
       }
     )
   ] });
 }
-const ZonedLine = memo(ZonedLineInner);
+const ZonedLineMemo = memo(ZonedLineInner);
+ZonedLineMemo.displayName = "ZonedLine";
+const ZonedLine = ZonedLineMemo;
 export {
   ZonedLine
 };

package/dist/charts/layout/auto-margin.d.ts

@@ -9,6 +9,46 @@
  * See `docs/CHARTS-SPEC.md` §1.
  */
 import type { ChartMargin } from '../../tokens/index.js';
+/**
+ * The `dx`/`dy` nudge `primitives/Axes.tsx` paints a rotated tick label through — the d3 idiom
+ * that puts a 45° label under its tick's lower-left and centres a 90° one on its vertical line.
+ *
+ * It lives HERE, and the axis imports it, because it is the one number that must be in both
+ * places: the nudge was applied at paint and absent from the measure, so §1's measured-equals-
+ * painted law broke in exactly the rotated case §8 introduced (the first label crossed the SVG's
+ * left edge by 3.2px at 390 and 5.7px at 320, and every rotated label's descender row sat on the
+ * bottom clip line). Move a value here and the gutter moves with it.
+ */
+export declare const ROTATED_LABEL_OFFSET: Record<45 | 90, {
+    dx: number;
+    dy: number;
+}>;
+/**
+ * How far a rotated x label reaches LEFT of the plot's left edge, and how far BELOW the axis line —
+ * measured from the baseline point the axis anchors it at, through the same `dx`/`dy` the axis
+ * paints it with.
+ *
+ * `AxisBottomDate` anchors a rotated label at its right edge (`textAnchor: 'end'`) and rotates it
+ * counter-clockwise about that point, so the string runs down-and-to-the-LEFT from the tick it
+ * belongs to. The FIRST tick sits at the plot's left edge, so its label hangs into the left gutter;
+ * the LAST row of glyphs hangs below the axis. Rotating the label's box about its anchor gives both
+ * extents exactly:
+ *
+ * - left  = `cos θ · (width + ascent) − dx`  — zero at 90°, where the string runs straight down.
+ * - below = `tickLength + max(10, fontPx) + dy + sin θ · width + cos θ · descent`.
+ *
+ * Both carry {@link ROTATED_CLEARANCE} so the painted box clears the SVG's clip rather than
+ * touching it.
+ */
+export declare function rotatedLabelExtents(input: {
+    /** Width of the widest x tick label, already measured at the painted font. */
+    labelWidth: number;
+    fontPx: number;
+    rotate: number;
+}): {
+    left: number;
+    below: number;
+};
 export type AutoMarginInput = {
     /** Left-axis tick labels, already formatted. */
     left?: readonly string[];
@@ -18,21 +58,34 @@ export type AutoMarginInput = {
     bottom?: readonly string[];
     /** Degrees of counter-clockwise rotation applied to the x tick labels. Default 0. */
     rotate?: number;
-    /** Tick-label font size. Default `VX.axisFont`. */
+    /** Tick-label font size. Default `VX.axisFont`. A phone-tier chart passes its own smaller size
+     * (`chartTierMetrics().axisFont`) — the measured label must be the painted label. */
     fontPx?: number;
+    /**
+     * Per-side FLOORS. Default `VX.margin`. The phone tier passes its tightened set
+     * (`chartTierMetrics().margin`) so a static 44px left gutter does not spend an eighth of a 360px
+     * chart on a three-character label. The law itself does not move: a side may still only ever
+     * grow past its floor.
+     */
+    floor?: ChartMargin;
     /** Explicit per-side overrides — applied LAST, so an escape hatch always wins. */
     override?: Partial<ChartMargin>;
 };
 /**
  * Resolve the four margins from measured labels.
  *
- * Law, per side:
- * - `left` — widest left label + gap, floored at `VX.margin.left`.
- * - `right` — with a right axis: widest right label + gap. Without one: half the widest x label,
- *   so the LAST x tick (centered on the plot's right edge) cannot clip. Both floored at
- *   `VX.margin.right`.
- * - `bottom` — one label line (or the rotated bounding height) + gap, floored at
- *   `VX.margin.bottom`.
+ * Law, per side (the floors are `VX.margin` by default; a tier may tighten them via `floor`):
+ * - `left` — widest left label + gap, floored at `VX.margin.left`. When the x labels are ROTATED
+ *   they also reach into this gutter, so the left side additionally clears their leftward
+ *   extent — see {@link rotatedLabelExtents}.
+ * - `right` — with a right axis: widest right label + gap. Without one, and the x labels are NOT
+ *   rotated: half the widest x label, so the LAST x tick (centered on the plot's right edge)
+ *   cannot clip. Without one AND rotated: nothing — a rotated label is anchored at its right edge
+ *   (`textAnchor: 'end'`, same as {@link rotatedLabelExtents}), so it hangs left of its tick, not
+ *   right, and reserving half its width would pad a side nothing paints into. Every case is
+ *   floored at `VX.margin.right`.
+ * - `bottom` — one label line + gap; when ROTATED, the label's measured drop below the axis line
+ *   ({@link rotatedLabelExtents}) instead. Floored at `VX.margin.bottom`.
  * - `top` — `VX.margin.top`. Nothing measures into it; a chart that draws into the top gutter
  *   passes an override.
  */
@@ -53,6 +106,10 @@ export declare function probeAxisLabels(opts: {
     format?: (v: number) => string;
     /** Must match the real scale's `nice` — niceing changes which ticks exist. */
     nice?: boolean;
+    /** `'log'` measures through {@link logTickValues} instead of a linear probe scale — the same
+     * helper the axis paints from (CHARTS-SPEC §1: measured labels == painted labels). Default
+     * `'linear'`. */
+    scale?: 'linear' | 'log';
 }): {
     labels: string[];
     format: (v: number) => string;

package/dist/charts/layout/auto-margin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-margin.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/auto-margin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAa/C,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB,GAAG,WAAW,CA6BnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE;IACpC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,GAAG;IAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAAE,CAQtD"}
+{"version":3,"file":"auto-margin.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/auto-margin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAgC/C;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAG5E,CAAA;AASD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiBlC;AAUD,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;yFACqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB,GAAG,WAAW,CA8BnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE;IACpC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;qBAEiB;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACzB,GAAG;IAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAAE,CAatD"}