basalt-ui 1.30.2 → 1.31.0

package/dist/charts/kinds/Heatmap.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group } from "@visx/group";
-import { memo, useMemo, useState } from "react";
+import { memo, useMemo } from "react";
 import { assertRequiredProps } from "../../common/validate.js";
 import {
   ChartTooltipFloat,
@@ -9,7 +9,8 @@ import {
   TooltipRow
 } from "../primitives/ChartTooltip.js";
 import { ChartFrame } from "../primitives/ChartFrame.js";
-import { useChartTierMetrics } from "../primitives/chart-tier.js";
+import { useChartMetrics } from "../primitives/chart-tier.js";
+import { useDiscreteCursor } from "../hooks/use-discrete-cursor.js";
 import { maxTextWidth } from "../utils/measure-text.js";
 import { thinLabels, xLabelPxFor } from "../utils/ticks.js";
 import { VX, alpha } from "../../tokens/index.js";
@@ -75,8 +76,7 @@ function HeatmapPlot(props) {
     legend
   } = props;
   const { width, height } = plot;
-  const { axisFont } = useChartTierMetrics();
-  const [tip, setTip] = useState(null);
+  const { axisFont } = useChartMetrics();
   const rows = useMemo(() => rowsProp ?? firstSeen(data, getRow), [rowsProp, data, getRow]);
   const cols = useMemo(() => colsProp ?? firstSeen(data, getCol), [colsProp, data, getCol]);
   const { lookup, max } = useMemo(() => {
@@ -89,6 +89,27 @@ function HeatmapPlot(props) {
     }
     return { lookup: map, max: m };
   }, [data, getRow, getCol, getValue]);
+  const cellTargets = useMemo(() => {
+    const out = [];
+    for (const row of rows) {
+      for (const col of cols) out.push({ row, col, value: lookup.get(cellKey(row, col)) });
+    }
+    return out;
+  }, [rows, cols, lookup]);
+  const cursor = useDiscreteCursor({
+    targets: cellTargets,
+    getKey: (c) => cellKey(c.row, c.col),
+    columns: cols.length,
+    ariaLabel: "Heatmap cells \u2014 use arrow keys to navigate, Escape to dismiss"
+  });
+  const activeTip = cursor.tip !== null && cursor.tip.target.value !== void 0 ? {
+    anchor: cursor.tip.anchor,
+    cell: {
+      row: cursor.tip.target.row,
+      col: cursor.tip.target.col,
+      value: cursor.tip.target.value
+    }
+  } : null;
   const rowLabels = useMemo(() => rows.map(rowLabel), [rows, rowLabel]);
   const colLabels = useMemo(() => cols.map(colLabel), [cols, colLabel]);
   const legendH = legend ? LEGEND_H + LEGEND_LABEL_H : 0;
@@ -106,20 +127,22 @@ function HeatmapPlot(props) {
     () => thinLabels(rowLabels, cellH, labelLineHeight(axisFont)),
     [rowLabels, cellH, axisFont]
   );
-  const show = (row, col, value, event) => {
-    setTip({ row, col, value, anchor: { x: event.clientX, y: event.clientY } });
-  };
-  const hide = () => setTip(null);
   return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width, height, children: [
+    /* @__PURE__ */ jsxs("svg", { width, height, ...cursor.hostProps, children: [
       /* @__PURE__ */ jsx(Group, { left: PAD_LEFT, top: PAD_TOP, children: rows.flatMap(
         (row, ri) => cols.map((col, ci) => {
           const value = lookup.get(cellKey(row, col));
           const has = value !== void 0;
           const cellFill = has ? alpha(color, intensity(value, max)) : alpha(VX.neutral, 0.04);
+          const target = { row, col, value };
+          const isActive = cursor.tip?.target.row === row && cursor.tip?.target.col === col;
           return /* @__PURE__ */ jsx(
             "rect",
             {
+              id: cursor.optionId(target),
+              role: "option",
+              "aria-selected": isActive,
+              "aria-label": `${rowLabels[ri]}: ${colLabels[ci]}: ${value !== void 0 ? formatValue(value) : "no data"}`,
               x: ci * cellW + cellGap / 2,
               y: ri * cellH + cellGap / 2,
               width: Math.max(0, cellW - cellGap),
@@ -127,9 +150,7 @@ function HeatmapPlot(props) {
               rx: cellRadius,
               fill: cellFill,
               style: { cursor: has ? "pointer" : "default" },
-              onPointerMove: (e) => has && show(row, col, value, e),
-              onPointerLeave: hide,
-              onPointerCancel: hide
+              ...has ? cursor.pointerProps(target) : {}
             },
             cellKey(row, col)
           );
@@ -197,8 +218,8 @@ function HeatmapPlot(props) {
         )
       ] })
     ] }),
-    tip !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: tip.anchor, children: [
-      /* @__PURE__ */ jsx(TooltipHeader, { date: rowLabel(tip.row), label: colLabel(tip.col) }),
+    activeTip !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: activeTip.anchor, children: [
+      /* @__PURE__ */ jsx(TooltipHeader, { date: rowLabel(activeTip.cell.row), label: colLabel(activeTip.cell.col) }),
       /* @__PURE__ */ jsxs(TooltipBody, { children: [
         /* @__PURE__ */ jsx(
           TooltipRow,
@@ -206,10 +227,10 @@ function HeatmapPlot(props) {
             color: alpha(color, 0.9),
             shape: "bar",
             label: "Value",
-            value: formatValue(tip.value)
+            value: formatValue(activeTip.cell.value)
           }
         ),
-        renderTooltip?.(tip)
+        renderTooltip?.(activeTip.cell)
       ] })
     ] })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"MirroredBars.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MirroredBars.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAIvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAUrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,gGAAgG;AAChG,MAAM,MAAM,eAAe,GAAG;IAC5B;mEAC+D;IAC/D,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;sBACkB;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;oFACgF;IAChF,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,WAAW,GAAG;IAC/C,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,sFAAsF;IACtF,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;;;;;OAKG;IACH,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACjC,yCAAyC;IACzC,EAAE,EAAE,eAAe,CAAA;IACnB,yCAAyC;IACzC,IAAI,EAAE,eAAe,CAAA;IACrB;8FAC0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACpC;kCAC8B;IAC9B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC;kGAC8F;IAC9F,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC/E,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IACtC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC;gFAC4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AA8BD;;;;;;;;;;;;;GAaG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAwBxD;AAoVD,eAAO,MAAM,YAAY,EAAuB,OAAO,iBAAiB,CAAA"}
+{"version":3,"file":"MirroredBars.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MirroredBars.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAIvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAUrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,gGAAgG;AAChG,MAAM,MAAM,eAAe,GAAG;IAC5B;mEAC+D;IAC/D,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;sBACkB;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;oFACgF;IAChF,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,WAAW,GAAG;IAC/C,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,sFAAsF;IACtF,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;;;;;OAKG;IACH,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACjC,yCAAyC;IACzC,EAAE,EAAE,eAAe,CAAA;IACnB,yCAAyC;IACzC,IAAI,EAAE,eAAe,CAAA;IACrB;8FAC0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACpC;kCAC8B;IAC9B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC;kGAC8F;IAC9F,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC/E,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IACtC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC;gFAC4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AA8BD;;;;;;;;;;;;;GAaG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAwBxD;AAgWD,eAAO,MAAM,YAAY,EAAuB,OAAO,iBAAiB,CAAA"}

package/dist/charts/kinds/MirroredBars.js

@@ -208,74 +208,89 @@ function MirroredBarsPlot(props) {
   });
   const rows = point === null ? [] : deriveTooltipRows(visibleSeries, point, down.format);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("svg", { ref: band.svgRef, width: plot.width, height: plot.height, children: [
-      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-        HatchPattern,
-        {
-          id: hatchId,
-          color: absentColor,
-          opacity: 0.7,
-          size: hatchSizeFor(bandWidth)
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
-        bars,
-        upVisible && /* @__PURE__ */ jsx(
-          AxisLeftNumeric,
-          {
-            scale: upAxisScale,
-            numTicks: upTicks,
-            tickFormat: (v) => up.format(Number(v))
-          }
-        ),
-        downVisible && /* @__PURE__ */ jsx(Group, { top: baseline, children: /* @__PURE__ */ jsx(
-          AxisLeftNumeric,
-          {
-            scale: downScale,
-            numTicks: downTicks,
-            tickFormat: (v) => down.format(Number(v))
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: 0,
-            x2: plotWidth,
-            y1: baseline,
-            y2: baseline,
-            stroke: VX.axisStroke,
-            strokeWidth: 1
-          }
-        ),
-        crosshairX !== null && /* @__PURE__ */ jsx(Crosshair, { x: crosshairX, top: 0, bottom: barBand }),
-        /* @__PURE__ */ jsx(
-          AxisBottomDate,
-          {
-            top: barBand,
-            scale,
-            tickValues: band.tickValues,
-            tickFormat: (v) => formatX(String(v))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HoverOverlay,
-          {
-            width: plotWidth,
-            height: barBand,
-            onMove: cursor.onPointerMove,
-            onLeave: cursor.onPointerLeave,
-            onKeyDown: cursor.onKeyDown,
-            onBlur: cursor.onBlur,
-            valueMax: Math.max(bands.length - 1, 0),
-            ...point !== null && {
-              valueNow: bands.indexOf(point),
-              valueText: formatX(getX(point))
-            },
-            ...ariaLabel !== void 0 && { ariaLabel }
-          }
-        )
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: band.svgRef,
+        width: plot.width,
+        height: plot.height,
+        style: { touchAction: "pan-y" },
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+            HatchPattern,
+            {
+              id: hatchId,
+              color: absentColor,
+              opacity: 0.7,
+              size: hatchSizeFor(bandWidth)
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+            bars,
+            upVisible && band.yPlacement !== "none" && /* @__PURE__ */ jsx(
+              AxisLeftNumeric,
+              {
+                scale: upAxisScale,
+                numTicks: upTicks,
+                tickFormat: (v) => up.format(Number(v)),
+                inside: band.yPlacement === "inside"
+              }
+            ),
+            downVisible && band.yPlacement !== "none" && /* @__PURE__ */ jsx(Group, { top: baseline, children: /* @__PURE__ */ jsx(
+              AxisLeftNumeric,
+              {
+                scale: downScale,
+                numTicks: downTicks,
+                tickFormat: (v) => down.format(Number(v)),
+                inside: band.yPlacement === "inside"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: plotWidth,
+                y1: baseline,
+                y2: baseline,
+                stroke: VX.axisStroke,
+                strokeWidth: 1
+              }
+            ),
+            crosshairX !== null && /* @__PURE__ */ jsx(Crosshair, { x: crosshairX, top: 0, bottom: barBand }),
+            /* @__PURE__ */ jsx(
+              AxisBottomDate,
+              {
+                top: barBand,
+                scale,
+                tickValues: band.tickValues,
+                tickFormat: (v) => formatX(String(v)),
+                anchorTerminals: band.xAnchorTerminals,
+                ...band.xWrapWidth !== void 0 && { wrapWidth: band.xWrapWidth }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HoverOverlay,
+              {
+                width: plotWidth,
+                height: barBand,
+                onMove: cursor.onPointerMove,
+                onDown: cursor.onPointerDown,
+                onUp: cursor.onPointerUp,
+                onLeave: cursor.onPointerLeave,
+                onKeyDown: cursor.onKeyDown,
+                onBlur: cursor.onBlur,
+                valueMax: Math.max(bands.length - 1, 0),
+                ...point !== null && {
+                  valueNow: bands.indexOf(point),
+                  valueText: formatX(getX(point))
+                },
+                ...ariaLabel !== void 0 && { ariaLabel }
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     band.showTooltip && point !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: band.tooltipAnchor, ariaLive: band.ariaLive, children: [
       /* @__PURE__ */ jsx(
         TooltipHeader,

package/dist/charts/kinds/donut-layout.d.ts

@@ -0,0 +1,47 @@
+import type { ContainerClass } from '../../tokens/size-classes.js';
+/** Aspect (frame W/H) above which the legend moves beside the ring. */
+export declare const SIDE_LEGEND_ASPECT = 1.5;
+/** Aspect a side layout must fall below before it stacks again — the gap stops a legend whose own
+ * placement changes the measured height from flipping the layout back and forth. */
+export declare const STACK_LEGEND_ASPECT = 1.35;
+/** Most slices kept before the rest fold into "Other" (so 7 or more slices fold). */
+export declare const DONUT_MAX_SLICES = 6;
+export declare const OTHER_KEY = "__other";
+/** Side layout: the ring's diameter never exceeds this share of the frame width. */
+export declare const SIDE_RING_MAX_WIDTH_SHARE = 0.55;
+/** Space kept between the ring's outer edge and the plot box. */
+export declare const RING_PADDING = 4;
+export type DonutLayout = {
+    side: boolean;
+};
+/** Side legend only on a wide-enough frame (`micro`/`compact` always stack under the ring).
+ * `wasSide` applies hysteresis: an already-side layout stays side until W/H falls below
+ * {@link STACK_LEGEND_ASPECT}. */
+export declare function resolveDonutLayout(input: {
+    frameW: number;
+    frameH: number;
+    containerClass: ContainerClass;
+    wasSide?: boolean;
+}): DonutLayout;
+/** Ring outer radius: never negative and never wider than the plot; the side layout also caps the
+ * diameter at {@link SIDE_RING_MAX_WIDTH_SHARE} of the frame width. */
+export declare function resolveDonutRadius(input: {
+    plotW: number;
+    plotH: number;
+    frameW: number;
+    side: boolean;
+}): number;
+/** Share of `total` as a whole percent; an empty total is 0%. */
+export declare function sharePercent(value: number, total: number): number;
+/** The key for the synthesized "Other" bucket — {@link OTHER_KEY}, prefixed until no input key uses it. */
+export declare function resolveOtherKey(keys: readonly string[]): string;
+/** Keeps the top {@link DONUT_MAX_SLICES} by value (in original order) and sums the rest into one
+ * trailing "Other" entry. Non-finite and negative values count as 0. */
+export declare function foldOther<T extends {
+    key: string;
+    value: number;
+}>(slices: readonly T[]): {
+    kept: T[];
+    other: number | null;
+};
+//# sourceMappingURL=donut-layout.d.ts.map

package/dist/charts/kinds/donut-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-layout.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/donut-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,uEAAuE;AACvE,eAAO,MAAM,kBAAkB,MAAM,CAAA;AACrC;oFACoF;AACpF,eAAO,MAAM,mBAAmB,OAAO,CAAA;AACvC,qFAAqF;AACrF,eAAO,MAAM,gBAAgB,IAAI,CAAA;AACjC,eAAO,MAAM,SAAS,YAAY,CAAA;AAClC,oFAAoF;AACpF,eAAO,MAAM,yBAAyB,OAAO,CAAA;AAC7C,iEAAiE;AACjE,eAAO,MAAM,YAAY,IAAI,CAAA;AAE7B,MAAM,MAAM,WAAW,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAE3C;;kCAEkC;AAClC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,cAAc,CAAA;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,WAAW,CAMd;AAED;uEACuE;AACvE,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,OAAO,CAAA;CACd,GAAG,MAAM,CAMT;AAED,iEAAiE;AACjE,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEjE;AAKD,2GAA2G;AAC3G,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,CAK/D;AAED;wEACwE;AACxE,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAChE,MAAM,EAAE,SAAS,CAAC,EAAE,GACnB;IAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAarC"}

package/dist/charts/kinds/donut-layout.js

@@ -0,0 +1,52 @@
+const SIDE_LEGEND_ASPECT = 1.5;
+const STACK_LEGEND_ASPECT = 1.35;
+const DONUT_MAX_SLICES = 6;
+const OTHER_KEY = "__other";
+const SIDE_RING_MAX_WIDTH_SHARE = 0.55;
+const RING_PADDING = 4;
+function resolveDonutLayout(input) {
+  const { frameW, frameH, containerClass, wasSide = false } = input;
+  const roomy = containerClass !== "micro" && containerClass !== "compact";
+  if (!roomy || frameH <= 0) return { side: false };
+  const aspect = frameW / frameH;
+  return { side: wasSide ? aspect >= STACK_LEGEND_ASPECT : aspect > SIDE_LEGEND_ASPECT };
+}
+function resolveDonutRadius(input) {
+  const { plotW, plotH, frameW, side } = input;
+  const diameter = side ? Math.min(plotW, plotH, SIDE_RING_MAX_WIDTH_SHARE * frameW) : Math.min(plotW, plotH);
+  return Math.max(0, diameter / 2 - RING_PADDING);
+}
+function sharePercent(value, total) {
+  return total > 0 ? Math.round(value / total * 100) : 0;
+}
+const safeValue = (value) => Number.isFinite(value) && value > 0 ? value : 0;
+function resolveOtherKey(keys) {
+  const taken = new Set(keys);
+  let key = OTHER_KEY;
+  while (taken.has(key)) key = `_${key}`;
+  return key;
+}
+function foldOther(slices) {
+  const safe = slices.map((s) => ({ ...s, value: safeValue(s.value) }));
+  if (safe.length <= DONUT_MAX_SLICES) return { kept: safe, other: null };
+  const top = new Set(
+    safe.toSorted((a, b) => b.value - a.value).slice(0, DONUT_MAX_SLICES).map((s) => s.key)
+  );
+  return {
+    kept: safe.filter((s) => top.has(s.key)),
+    other: safe.reduce((sum, s) => top.has(s.key) ? sum : sum + s.value, 0)
+  };
+}
+export {
+  DONUT_MAX_SLICES,
+  OTHER_KEY,
+  RING_PADDING,
+  SIDE_LEGEND_ASPECT,
+  SIDE_RING_MAX_WIDTH_SHARE,
+  STACK_LEGEND_ASPECT,
+  foldOther,
+  resolveDonutLayout,
+  resolveDonutRadius,
+  resolveOtherKey,
+  sharePercent
+};

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

@@ -59,15 +59,20 @@ export type AutoMarginInput = {
     /** Degrees of counter-clockwise rotation applied to the x tick labels. Default 0. */
     rotate?: number;
     /** 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. */
+     * (`chartMetrics().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
+     * (`chartMetrics().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;
+    /** X labels anchored inward at the terminals (`AxisBottomDate anchorTerminals`): the last label
+     * no longer centres on the right edge, so the half-label right reservation is dropped. */
+    anchorTerminals?: boolean;
+    /** Lines the tallest (wrapped) x label takes. Default 1. */
+    bottomLines?: number;
     /** Explicit per-side overrides — applied LAST, so an escape hatch always wins. */
     override?: Partial<ChartMargin>;
 };

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;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"}
+{"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;qFACiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB;8FAC0F;IAC1F,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB,GAAG,WAAW,CA4CnE;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"}

package/dist/charts/layout/auto-margin.js

@@ -30,18 +30,27 @@ function rotatedLabelExtents(input) {
 const LOG_TICK_FORMAT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 20 });
 function autoMargin(input = {}) {
   const fontPx = input.fontPx ?? VX.axisFont;
-  const { left = [], right = [], bottom = [], rotate = 0, floor = VX.margin, override } = input;
+  const {
+    left = [],
+    right = [],
+    bottom = [],
+    rotate = 0,
+    floor = VX.margin,
+    anchorTerminals = false,
+    bottomLines = 1,
+    override
+  } = input;
   const leftWidth = maxTextWidth(left, fontPx);
   const rightWidth = maxTextWidth(right, fontPx);
   const bottomWidth = maxTextWidth(bottom, fontPx);
   const rotated = rotatedLabelExtents({ labelWidth: bottomWidth, fontPx, rotate });
-  const bottomExtent = rotate === 0 ? lineHeight(fontPx) + AXIS_TICK_GAP : rotated.below;
+  const bottomExtent = rotate === 0 ? lineHeight(fontPx) * Math.max(bottomLines, 1) + AXIS_TICK_GAP : rotated.below;
   return {
     top: override?.top ?? floor.top,
     right: override?.right ?? Math.ceil(
       Math.max(
         floor.right,
-        right.length > 0 ? rightWidth + AXIS_TICK_GAP : rotate === 0 ? bottomWidth / 2 : 0
+        right.length > 0 ? rightWidth + AXIS_TICK_GAP : rotate === 0 && !anchorTerminals ? bottomWidth / 2 : 0
       )
     ),
     bottom: override?.bottom ?? Math.ceil(Math.max(floor.bottom, bottomExtent)),

package/dist/charts/layout/end-labels.d.ts

@@ -0,0 +1,64 @@
+import type { ContainerClass } from '../../tokens/size-classes.js';
+import type { ChartSeries } from '../series.js';
+/** Space between the plot edge and an end label's first glyph. */
+export declare const END_LABEL_GAP = 6;
+/** End labels are for a handful of lines; past this the legend alone names them. */
+export declare const MAX_END_LABELS = 3;
+/** Line box of one end label, as a multiple of its font size — the collision gap. */
+export declare const END_LABEL_LINE_HEIGHT = 1.3;
+/**
+ * Greedy collision nudging for direct labels. Each `ys` entry is a label's preferred CENTRE; the
+ * result keeps input order and holds every label at least `minGap` from its neighbours, inside
+ * `[min, max]`. Sorted by y, each label yields to the one above it, then a backward pass pulls the
+ * stack up off the bottom edge. Returns `null` when the labels cannot all fit — the caller draws
+ * none (the legend still names every series) rather than a partial or overlapping set.
+ */
+export declare function nudgeLabels(input: {
+    ys: readonly number[];
+    minGap: number;
+    min: number;
+    max: number;
+}): number[] | null;
+/**
+ * The right gutter the end labels need: the widest label plus the gap. `null` when it would eat
+ * more than a quarter of the plot — a label longer than that has no honest place in a gutter.
+ */
+export declare function endLabelGutter(input: {
+    labels: readonly string[];
+    fontPx: number;
+    plotWidth: number;
+}): number | null;
+/** One drawn end label: the series it names and its nudged centre y. */
+export type EndLabel<T> = {
+    series: ChartSeries<T>;
+    y: number;
+};
+/**
+ * Whether and how a chart draws end-of-line labels. Eligible only on a wide container with one y
+ * axis, no consumer `margin.right`, no header legend already naming every series for free (R2C-10:
+ * end labels REPLACE the legend, they never duplicate it), and 2..{@link MAX_END_LABELS} visible
+ * series that are all lines — a single line has its own title doing that job already (the same law
+ * that already suppresses a single-entry legend, `ChartFrame.resolveLegend`'s JSDoc). Each label
+ * sits at its line's last non-null value, nudged apart; the plan is `null` — no gutter reserved,
+ * nothing drawn — when any rule fails, a series has no plottable value, the stack cannot fit, or
+ * the gutter would be too wide. The gutter is measured from the label text.
+ */
+export declare function planEndLabels<T>(input: {
+    containerClass: ContainerClass;
+    hasY2: boolean;
+    hasMarginRight: boolean;
+    /** A `ChartCard` header slot already named every visible series — end labels would only repeat
+     * it, at the cost of a right-hand gutter the header slot cost nothing (R2C-10). */
+    hasHeaderLegend: boolean;
+    visible: readonly ChartSeries<T>[];
+    data: readonly T[];
+    yScale: (value: number) => number;
+    yMax: number;
+    fontPx: number;
+    /** Plot width before any gutter is taken. */
+    plotWidth: number;
+}): {
+    gutter: number;
+    labels: EndLabel<T>[];
+} | null;
+//# sourceMappingURL=end-labels.d.ts.map

package/dist/charts/layout/end-labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"end-labels.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/end-labels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG5C,kEAAkE;AAClE,eAAO,MAAM,aAAa,IAAI,CAAA;AAE9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,IAAI,CAAA;AAE/B,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,MAAM,CAAA;AAKxC;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,EAAE,EAAE,SAAS,MAAM,EAAE,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,MAAM,EAAE,GAAG,IAAI,CAsBlB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;CAClB,GAAG,MAAM,GAAG,IAAI,CAMhB;AAED,wEAAwE;AACxE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;IAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE/D;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE;IACtC,cAAc,EAAE,cAAc,CAAA;IAC9B,KAAK,EAAE,OAAO,CAAA;IACd,cAAc,EAAE,OAAO,CAAA;IACvB;uFACmF;IACnF,eAAe,EAAE,OAAO,CAAA;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IAClC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAA;CAClB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;CAAE,GAAG,IAAI,CAuCnD"}

package/dist/charts/layout/end-labels.js

@@ -0,0 +1,76 @@
+import { measureText } from "../utils/measure-text.js";
+const END_LABEL_GAP = 6;
+const MAX_END_LABELS = 3;
+const END_LABEL_LINE_HEIGHT = 1.3;
+const MAX_GUTTER_SHARE = 0.25;
+function nudgeLabels(input) {
+  const { ys, minGap, min, max } = input;
+  if (ys.length === 0) return [];
+  if (ys.some((y) => !Number.isFinite(y))) return null;
+  if ((ys.length - 1) * minGap > max - min) return null;
+  const order = ys.map((y, i) => ({ y, i })).toSorted((a, b) => a.y - b.y);
+  let prev = Number.NEGATIVE_INFINITY;
+  const forward = order.map(({ y, i }) => {
+    prev = Math.max(y, min, prev + minGap);
+    return { i, y: prev };
+  });
+  let next = Number.POSITIVE_INFINITY;
+  const back = forward.toReversed().map(({ i, y }) => {
+    next = Math.min(y, max, next - minGap);
+    return { i, y: next };
+  });
+  if (next < min) return null;
+  return back.toSorted((a, b) => a.i - b.i).map((p) => p.y);
+}
+function endLabelGutter(input) {
+  const { labels, fontPx, plotWidth } = input;
+  if (labels.length === 0) return null;
+  const widest = labels.reduce((max, label) => Math.max(max, measureText(label, fontPx)), 0);
+  const gutter = Math.ceil(widest) + END_LABEL_GAP;
+  return gutter > plotWidth * MAX_GUTTER_SHARE ? null : gutter;
+}
+function planEndLabels(input) {
+  const {
+    containerClass,
+    hasY2,
+    hasMarginRight,
+    hasHeaderLegend,
+    visible,
+    data,
+    yScale,
+    yMax,
+    fontPx,
+    plotWidth
+  } = input;
+  if (containerClass !== "wide" || hasY2 || hasMarginRight || hasHeaderLegend) return null;
+  if (visible.length < 2 || visible.length > MAX_END_LABELS) return null;
+  if (!visible.every((s) => s.mark === "line")) return null;
+  const gutter = endLabelGutter({ labels: visible.map((s) => s.label), fontPx, plotWidth });
+  if (gutter === null) return null;
+  const placed = visible.flatMap((s) => {
+    const last = data.findLast((d) => s.getValue(d) !== null);
+    if (last === void 0) return [];
+    const value = s.getValue(last);
+    if (value === null) return [];
+    const y = yScale(value);
+    return Number.isFinite(y) ? [{ series: s, y }] : [];
+  });
+  if (placed.length !== visible.length) return null;
+  const lineHeight = Math.ceil(fontPx * END_LABEL_LINE_HEIGHT);
+  const ys = nudgeLabels({
+    ys: placed.map((p) => p.y),
+    minGap: lineHeight,
+    min: lineHeight / 2,
+    max: yMax - lineHeight / 2
+  });
+  if (ys === null) return null;
+  return { gutter, labels: placed.map((p, i) => ({ series: p.series, y: ys[i] ?? p.y })) };
+}
+export {
+  END_LABEL_GAP,
+  END_LABEL_LINE_HEIGHT,
+  MAX_END_LABELS,
+  endLabelGutter,
+  nudgeLabels,
+  planEndLabels
+};