basalt-ui 1.30.2 → 1.32.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;AAIrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAI/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;AA+SD,eAAO,MAAM,YAAY,EAAuB,OAAO,iBAAiB,CAAA"}

package/dist/charts/kinds/MirroredBars.js

@@ -6,19 +6,14 @@ import { assertRequiredProps } from "../../common/validate.js";
 import { VX, alpha } from "../../tokens/index.js";
 import { useBandPlot } from "../hooks/useBandPlot.js";
 import { probeAxisLabels } from "../layout/auto-margin.js";
-import { AxisBottomDate, AxisLeftNumeric } from "../primitives/Axes.js";
+import { AxisLeftNumeric } from "../primitives/Axes.js";
 import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
-import {
-  ChartTooltipFloat,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow
-} from "../primitives/ChartTooltip.js";
+import { TooltipRows } from "../primitives/ChartTooltip.js";
 import { Crosshair } from "../primitives/Crosshair.js";
 import { HatchPattern, hatchFill, hatchSizeFor } from "../primitives/HatchPattern.js";
-import { HoverOverlay } from "../primitives/HoverOverlay.js";
 import { deriveTooltipRows } from "../series.js";
 import { fmtAxisDate } from "../utils/format.js";
+import { BandAxisOverlay, BandTooltip, clampFraction } from "./band-chrome.js";
 const DEFAULT_UP_FRACTION = 0.35;
 const DEFAULT_PANE_TICKS = 3;
 function assertPaneKey(side, key, resolved, series) {
@@ -107,7 +102,7 @@ function MirroredBarsPlot(props) {
     ...marginOverride !== void 0 && { margin: marginOverride },
     ...tooltip !== void 0 && { tooltip }
   });
-  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band;
+  const { bands, margin, plotWidth, point, crosshairX, step, bandWidth } = band;
   const barBand = Math.max(plot.height - margin.top - margin.bottom, 2);
   const upHeight = Math.max(Math.round(barBand * upFraction), 1);
   const downHeight = Math.max(barBand - upHeight, 1);
@@ -198,8 +193,6 @@ function MirroredBarsPlot(props) {
     hatchId
   ]);
   if (plotWidth <= 0 || bands.length === 0) return null;
-  const cfg = tooltip === false ? void 0 : tooltip;
-  const badge = cfg?.label === void 0 || point === null ? null : cfg.label(point);
   const visibleSeries = series.filter((s) => !hidden.has(s.key)).map((s) => {
     if (s.formatValue !== void 0) return s;
     if (s.key === up.key) return { ...s, formatValue: (v) => up.format(v) };
@@ -208,108 +201,72 @@ 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 }
-          }
-        )
-      ] })
-    ] }),
-    band.showTooltip && point !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: band.tooltipAnchor, ariaLive: band.ariaLive, children: [
-      /* @__PURE__ */ jsx(
-        TooltipHeader,
-        {
-          date: getX(point),
-          ...cfg?.formatHeader !== void 0 && {
-            format: (key) => cfg.formatHeader?.(key, point) ?? key
-          },
-          ...badge !== null && { label: badge.text, labelColor: badge.color }
-        }
-      ),
-      /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        cfg?.prependRows?.(point, { hidden }),
-        rows.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
-        )),
-        cfg?.extraRows?.(point, { hidden })
-      ] })
-    ] })
+    /* @__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(
+              BandAxisOverlay,
+              {
+                band,
+                height: barBand,
+                getX,
+                formatX,
+                ariaLabel
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(BandTooltip, { band, tooltip, getX, hidden, children: /* @__PURE__ */ jsx(TooltipRows, { rows }) })
   ] });
 }
-function clampFraction(value) {
-  if (value === void 0 || !Number.isFinite(value)) return 0;
-  return Math.min(Math.max(value, 0), 1);
-}
 function finiteOrNull(v) {
   return v === null || v === void 0 || Number.isNaN(v) ? null : v;
 }

package/dist/charts/kinds/band-chrome.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { BandPlot, BandTooltipConfig } from '../hooks/useBandPlot.js';
+/**
+ * The chrome `BandStrip` and `MirroredBars` share around their own marks — the slot axis, the
+ * keyboard/pointer overlay and the tooltip shell — so the two `useBandPlot` kinds cannot drift in
+ * any of them. Internal; neither is exported from a barrel.
+ *
+ * theme-allow-file hand-rolled-plot — the slot axis and overlay of the two declared banded
+ * exceptions (`BandStrip`, `MirroredBars`), which carry the same waiver for the same reason.
+ */
+/** A 0..1 share. Non-finite (a 0/0 fold count) reads as "nothing is absent" — the conservative
+ * end, since the alternative is a band that does not render at all. */
+export declare function clampFraction(value: number | undefined): number;
+/** The slot axis under a `height`-tall band row, plus the hover/keyboard overlay over it. */
+export declare function BandAxisOverlay<T>({ band, height, getX, formatX, ariaLabel, }: {
+    band: BandPlot<T>;
+    height: number;
+    getX: (d: T) => string;
+    formatX: (key: string) => string;
+    ariaLabel: string | undefined;
+}): import("react").JSX.Element;
+/** The tooltip shell: header (+ badge), the consumer's prepended rows, the kind's own derived
+ * `children` rows, the consumer's extra rows. Renders nothing off-hover or with `tooltip: false`. */
+export declare function BandTooltip<T>({ band, tooltip, getX, hidden, children, }: {
+    band: BandPlot<T>;
+    tooltip: BandTooltipConfig<T> | false | undefined;
+    getX: (d: T) => string;
+    hidden: ReadonlySet<string>;
+    children: ReactNode;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=band-chrome.d.ts.map

package/dist/charts/kinds/band-chrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"band-chrome.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/band-chrome.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAKvE;;;;;;;GAOG;AAEH;uEACuE;AACvE,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG/D;AAED,6FAA6F;AAC7F,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,GACV,EAAE;IACD,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAChC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B,+BAkBA;AAED;qGACqG;AACrG,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IACjB,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,CAAA;IACjD,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC3B,QAAQ,EAAE,SAAS,CAAA;CACpB,sCAqBA"}

package/dist/charts/kinds/band-chrome.js

@@ -0,0 +1,71 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AxisBottomDate } from "../primitives/Axes.js";
+import { ChartTooltipFloat, TooltipBody, TooltipHeader } from "../primitives/ChartTooltip.js";
+import { cursorSliderProps, HoverOverlay } from "../primitives/HoverOverlay.js";
+function clampFraction(value) {
+  if (value === void 0 || !Number.isFinite(value)) return 0;
+  return Math.min(Math.max(value, 0), 1);
+}
+function BandAxisOverlay({
+  band,
+  height,
+  getX,
+  formatX,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AxisBottomDate,
+      {
+        top: height,
+        scale: band.scale,
+        tickValues: band.tickValues,
+        tickFormat: (v) => formatX(String(v)),
+        anchorTerminals: band.xAnchorTerminals,
+        ...band.xWrapWidth !== void 0 && { wrapWidth: band.xWrapWidth }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HoverOverlay,
+      {
+        width: band.plotWidth,
+        height,
+        ...cursorSliderProps({ cursor: band.cursor, data: band.bands, getX, formatX, ariaLabel })
+      }
+    )
+  ] });
+}
+function BandTooltip({
+  band,
+  tooltip,
+  getX,
+  hidden,
+  children
+}) {
+  const { point } = band;
+  if (!band.showTooltip || point === null) return null;
+  const cfg = tooltip === false ? void 0 : tooltip;
+  const badge = cfg?.label === void 0 ? null : cfg.label(point);
+  return /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: band.tooltipAnchor, ariaLive: band.ariaLive, children: [
+    /* @__PURE__ */ jsx(
+      TooltipHeader,
+      {
+        date: getX(point),
+        ...cfg?.formatHeader !== void 0 && {
+          format: (key) => cfg.formatHeader?.(key, point) ?? key
+        },
+        ...badge !== null && { label: badge.text, labelColor: badge.color }
+      }
+    ),
+    /* @__PURE__ */ jsxs(TooltipBody, { children: [
+      cfg?.prependRows?.(point, { hidden }),
+      children,
+      cfg?.extraRows?.(point, { hidden })
+    ] })
+  ] });
+}
+export {
+  BandAxisOverlay,
+  BandTooltip,
+  clampFraction
+};

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)),