basalt-ui 1.14.0 → 1.15.0

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

@@ -52,10 +52,11 @@ export type DonutProps<K extends string = SeriesKey> = {
 /**
  * Radial slice-share chart with a punched-out center label. Composes `ChartFrame` for a
  * categorical legend derived from the slices (one `SeriesStyle` per slice, `mark: 'bar'`) so the
- * legend can never drift from what's plotted. No crosshair — meaningless for a radial layout.
- * Hover stays local to the pie (dimming siblings on hover) rather than joining the shared
- * `HoverContext`: a date-keyed cursor has no counterpart on a donut, and cross-kind category sync
- * (donut ↔ bar, via the generalized key) is a distinct, deliberately deferred feature.
+ * legend can never drift from what's plotted — legend-hidden slices drop out of the ring, the
+ * center total, and the tooltip's "Share" row together (`docs/CHARTS-SPEC.md` §5). No crosshair —
+ * meaningless for a radial layout. Hover stays local to the pie (dimming siblings on hover) rather
+ * than joining the shared cursor: a date-keyed cursor has no counterpart on a donut, and cross-kind
+ * category sync (donut ↔ bar, via a generalized key) is a distinct, deliberately deferred feature.
  */
 declare function DonutInner<K extends string = SeriesKey>(props: DonutProps<K>): import("react").JSX.Element;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Donut.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C;;;;GAIG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,IAAI;IACrD,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAC/B,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,+BAoBrE;AAmJD;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAuB,OAAO,UAAU,CAAA"}
+{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Donut.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAKpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C;;;;GAIG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,IAAI;IACrD,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAC/B,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,+BAoBrE;AA2JD;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAuB,OAAO,UAAU,CAAA"}

package/dist/charts/kinds/Donut.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group } from "@visx/group";
 import { Pie } from "@visx/shape";
-import { memo, useMemo } from "react";
-import { ChartTooltip, TooltipBody, TooltipRow, useTooltipStyles } from "../primitives/ChartTooltip.js";
+import { memo, useMemo, useState } from "react";
+import { ChartTooltipFloat, TooltipBody, TooltipRow } from "../primitives/ChartTooltip.js";
 import { ChartFrame } from "../primitives/ChartFrame.js";
-import { useChartTooltip } from "../hooks/useChartTooltip.js";
 import { VX } from "../../tokens/index.js";
 function DonutInner(props) {
   const { data, height, colorForKey, seriesLabel = (k) => k, ariaLabel, isPending } = props;
@@ -38,21 +37,25 @@ function DonutPlot(props) {
     innerRatio = 0.6,
     padAngle = 0.01
   } = props;
-  const { width, height } = plot;
-  const tooltipStyles = useTooltipStyles();
-  const { tip, show, hide, tooltipRef } = useChartTooltip();
-  const hoveredKey = tip?.data.key ?? null;
+  const { width, height, hidden } = plot;
+  const [tip, setTip] = useState(null);
+  const hoveredKey = tip?.key ?? null;
+  const visibleData = useMemo(() => data.filter((d) => !hidden.has(d.key)), [data, hidden]);
   const radius = Math.min(width, height) / 2 - 4;
   const innerRadius = radius * innerRatio;
   const centerX = width / 2;
   const centerY = height / 2;
-  const total = useMemo(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const total = useMemo(() => visibleData.reduce((sum, d) => sum + d.value, 0), [visibleData]);
+  const show = (d, event) => {
+    setTip({ key: d.key, value: d.value, anchor: { x: event.clientX, y: event.clientY } });
+  };
+  const hide = () => setTip(null);
   return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx("svg", { width, height, children: /* @__PURE__ */ jsxs(Group, { left: centerX, top: centerY, children: [
       /* @__PURE__ */ jsx(
         Pie,
         {
-          data,
+          data: visibleData,
           pieValue: (d) => d.value,
           pieSortValues: () => 0,
           outerRadius: radius,
@@ -135,13 +138,13 @@ function DonutPlot(props) {
         children: centerContent
       }
     ),
-    /* @__PURE__ */ jsx(ChartTooltip, { tip, tooltipRef, styles: tooltipStyles, children: tip && /* @__PURE__ */ jsxs(TooltipBody, { children: [
+    tip !== null && /* @__PURE__ */ jsx(ChartTooltipFloat, { anchor: tip.anchor, children: /* @__PURE__ */ jsxs(TooltipBody, { children: [
       /* @__PURE__ */ jsx(
         TooltipRow,
         {
-          color: colorForKey(tip.data.key),
-          label: seriesLabel(tip.data.key),
-          value: formatValue(tip.data.value),
+          color: colorForKey(tip.key),
+          label: seriesLabel(tip.key),
+          value: formatValue(tip.value),
           shape: "bar"
         }
       ),
@@ -150,7 +153,7 @@ function DonutPlot(props) {
         {
           color: VX.grid,
           label: "Share",
-          value: `${total > 0 ? Math.round(tip.data.value / total * 100) : 0}%`,
+          value: `${total > 0 ? Math.round(tip.value / total * 100) : 0}%`,
           shape: "bar"
         }
       )

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

@@ -1 +1 @@
-{"version":3,"file":"DualPanel.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/DualPanel.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAGvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAe,MAAM,WAAW,CAAA;AAI5E,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;8DAC0D;IAC1D,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtC,2EAA2E;IAC3E,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACxD,wGAAwG;IACxG,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAClE,oDAAoD;IACpD,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAA;IACrB,8DAA8D;IAC9D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,CAAA;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAChC,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC/D;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAID;;;;;;;;;;;GAWG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BAmClD;AA+TD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}
+{"version":3,"file":"DualPanel.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/DualPanel.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAIvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAe,MAAM,WAAW,CAAA;AAK5E,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;8DAC0D;IAC1D,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtC,2EAA2E;IAC3E,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACxD,wGAAwG;IACxG,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAClE,oDAAoD;IACpD,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAA;IACrB,8DAA8D;IAC9D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,CAAA;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAChC,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC/D;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAID;;;;;;;;;;;GAWG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BAmClD;AA4ZD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}

package/dist/charts/kinds/DualPanel.js

@@ -8,19 +8,20 @@ import { Threshold } from "@visx/threshold";
 import { memo, useMemo } from "react";
 import { AxisBottomDate, AxisLeftNumeric } from "../primitives/Axes.js";
 import {
-  ChartTooltip,
+  ChartTooltipFloat,
   TooltipBody,
   TooltipHeader,
-  TooltipRow,
-  useTooltipStyles
+  TooltipRow
 } from "../primitives/ChartTooltip.js";
 import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
 import { Crosshair, SeriesDot } from "../primitives/Crosshair.js";
 import { HoverOverlay } from "../primitives/HoverOverlay.js";
 import { ZoneRects } from "../primitives/ZoneRects.js";
-import { useHoverSync } from "../hooks/useHoverSync.js";
+import { useChartCursor } from "../hooks/useChartCursor.js";
+import { autoMargin, probeAxisLabels } from "../layout/auto-margin.js";
 import { deriveTooltipRows, LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
 import { VX } from "../../tokens/index.js";
+import { fmtAxisDate } from "../utils/format.js";
 import { smartTicks } from "../utils/ticks.js";
 const PANE_GAP = 12;
 function DualPanelInner(props) {
@@ -69,24 +70,15 @@ function DualPanelPlot(props) {
     tooltipLabel,
     plot
   } = props;
-  const MARGIN = VX.margin;
-  const xMax = plot.width - MARGIN.left - MARGIN.right;
-  const plotH = plot.height - MARGIN.top - MARGIN.bottom - PANE_GAP;
-  const topH = Math.max(Math.round(plotH * topFraction), 1);
-  const bottomH = Math.max(plotH - topH, 1);
-  const bottomTop = topH + PANE_GAP;
-  const innerH = topH + PANE_GAP + bottomH;
-  const xScale = useMemo(
-    () => scalePoint({ domain: data.map(getX), range: [0, xMax], padding: 0.3 }),
-    [data, xMax, getX]
-  );
-  const topYScale = useMemo(() => {
-    if (topYDomain !== "auto") {
-      return scaleLinear({ domain: topYDomain, range: [topH, 0] });
-    }
+  const { hidden } = plot;
+  const visibleSeries = useMemo(() => series.filter((s) => !hidden.has(s.key)), [series, hidden]);
+  const barVisible = !hidden.has("__divergence");
+  const useNiceTop = topYDomain === "auto";
+  const topDomain = useMemo(() => {
+    if (topYDomain !== "auto") return topYDomain;
     let lo = Infinity;
     let hi = -Infinity;
-    for (const s of series) {
+    for (const s of visibleSeries) {
       for (const d of data) {
         const v = s.getValue(d);
         if (v === null || v === void 0 || Number.isNaN(v)) continue;
@@ -99,43 +91,101 @@ function DualPanelPlot(props) {
       hi = 1;
     }
     const span = hi - lo || Math.abs(hi) || 1;
-    return scaleLinear({
-      domain: [lo - span * 0.08, hi + span * 0.08],
-      range: [topH, 0],
-      nice: true
-    });
-  }, [data, series, topYDomain, topH]);
-  const bottomYScale = useMemo(() => {
-    let maxAbs = 0;
+    return [lo - span * 0.08, hi + span * 0.08];
+  }, [data, visibleSeries, topYDomain]);
+  const topLabels = useMemo(
+    () => probeAxisLabels({ domain: topDomain, ticks: 4, format: formatTop, nice: useNiceTop }).labels,
+    [topDomain, useNiceTop, formatTop]
+  );
+  const maxAbs = useMemo(() => {
+    let m = 0;
     for (const d of data) {
       const v = getBar(d);
       if (v === null || v === void 0 || Number.isNaN(v)) continue;
       const a = Math.abs(v);
-      if (a > maxAbs) maxAbs = a;
+      if (a > m) m = a;
     }
-    if (maxAbs === 0) maxAbs = 1;
-    return scaleLinear({
+    return m === 0 ? 1 : m;
+  }, [data, getBar]);
+  const bottomLabels = useMemo(
+    () => probeAxisLabels({
       domain: [-maxAbs, maxAbs],
-      range: [bottomH, 0],
+      ticks: 3,
+      format: formatBottom,
       nice: true
-    });
-  }, [data, getBar, bottomH]);
-  const tooltipStyles = useTooltipStyles();
-  const { tip, tooltipRef, syncedPoint, isDirectHover, handleMouse, handleLeave } = useHoverSync(
-    {
-      data,
-      chartId,
-      getKey: getX,
-      xScale,
-      marginLeft: MARGIN.left
-    }
+    }).labels,
+    [maxAbs, formatBottom]
+  );
+  const xLabelsAll = useMemo(() => data.map((d) => fmtAxisDate(getX(d))), [data, getX]);
+  const margin = useMemo(
+    () => autoMargin({ left: [...topLabels, ...bottomLabels], bottom: xLabelsAll }),
+    [topLabels, bottomLabels, xLabelsAll]
+  );
+  const xMax = Math.max(plot.width - margin.left - margin.right, 0);
+  const plotH = plot.height - margin.top - margin.bottom - PANE_GAP;
+  const topH = Math.max(Math.round(plotH * topFraction), 1);
+  const bottomH = Math.max(plotH - topH, 1);
+  const bottomTop = topH + PANE_GAP;
+  const innerH = topH + PANE_GAP + bottomH;
+  const xScale = useMemo(
+    () => scalePoint({ domain: data.map(getX), range: [0, xMax], padding: 0.3 }),
+    [data, xMax, getX]
   );
+  const topYScale = useMemo(
+    () => scaleLinear({
+      domain: topDomain,
+      range: [topH, 0],
+      ...useNiceTop && { nice: true }
+    }),
+    [topDomain, useNiceTop, topH]
+  );
+  const bottomYScale = useMemo(
+    () => scaleLinear({ domain: [-maxAbs, maxAbs], range: [bottomH, 0], nice: true }),
+    [maxAbs, bottomH]
+  );
+  const cursor = useChartCursor({
+    data,
+    chartId,
+    getKey: getX,
+    xScale,
+    marginLeft: margin.left
+  });
   const tickValues = useMemo(() => smartTicks(data.map(getX), xMax), [data, xMax, getX]);
   const barWidth = data.length > 0 ? Math.max(xMax / data.length * 0.6, 2) : 2;
+  const histogramBars = useMemo(() => {
+    if (!barVisible) return [];
+    const y0 = bottomYScale(0);
+    const bars = [];
+    for (const d of data) {
+      const v = getBar(d);
+      if (v === null || v === void 0 || Number.isNaN(v)) continue;
+      const cx = xScale(getX(d)) ?? 0;
+      const yVal = bottomYScale(v);
+      bars.push({
+        key: `bar-${getX(d)}`,
+        x: cx - barWidth / 2,
+        y: Math.min(y0, yVal),
+        width: barWidth,
+        height: Math.max(Math.abs(yVal - y0), 1),
+        fill: v >= 0 ? barColorPositive : barColorNegative
+      });
+    }
+    return bars;
+  }, [
+    barVisible,
+    data,
+    getBar,
+    getX,
+    xScale,
+    bottomYScale,
+    barWidth,
+    barColorPositive,
+    barColorNegative
+  ]);
   const fillPts = useMemo(() => {
     if (!fillBetween) return [];
-    const fromLine = series.find((s) => s.key === fillBetween.from);
-    const toLine = series.find((s) => s.key === fillBetween.to);
+    const fromLine = visibleSeries.find((s) => s.key === fillBetween.from);
+    const toLine = visibleSeries.find((s) => s.key === fillBetween.to);
     if (!fromLine || !toLine) return [];
     const out = [];
     for (const d of data) {
@@ -146,10 +196,10 @@ function DualPanelPlot(props) {
       out.push({ __d: d, __from: f, __to: t });
     }
     return out;
-  }, [data, fillBetween, series]);
+  }, [data, fillBetween, visibleSeries]);
   const lineValid = useMemo(() => {
     const out = /* @__PURE__ */ new Map();
-    for (const s of series) {
+    for (const s of visibleSeries) {
       const pts = [];
       for (const d of data) {
         const v = s.getValue(d);
@@ -158,12 +208,13 @@ function DualPanelPlot(props) {
       out.set(s.key, pts);
     }
     return out;
-  }, [data, series]);
-  const sx = syncedPoint ? xScale(getX(syncedPoint)) ?? 0 : 0;
-  const syncedBar = syncedPoint ? getBar(syncedPoint) : null;
+  }, [data, visibleSeries]);
+  const point = cursor.point;
+  const sx = point !== null ? xScale(getX(point)) ?? 0 : 0;
+  const syncedBar = point !== null ? getBar(point) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("svg", { width: plot.width, height: plot.height, children: [
-      /* @__PURE__ */ jsxs(Group, { left: MARGIN.left, top: MARGIN.top, children: [
+      /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
         /* @__PURE__ */ jsx(GridRows, { scale: topYScale, width: xMax, stroke: VX.grid, numTicks: 4 }),
         /* @__PURE__ */ jsx(ZoneRects, { zones: topZones, width: xMax, leftScale: topYScale }),
         fillBetween && fillPts.length > 0 && /* @__PURE__ */ jsx(
@@ -193,7 +244,7 @@ function DualPanelPlot(props) {
           },
           `top-ref-${i}`
         )),
-        series.map((s) => {
+        visibleSeries.map((s) => {
           const valid = lineValid.get(s.key) ?? [];
           if (valid.length === 0) return null;
           return /* @__PURE__ */ jsx(
@@ -210,8 +261,8 @@ function DualPanelPlot(props) {
             `top-line-${s.key}`
           );
         }),
-        syncedPoint && /* @__PURE__ */ jsx(Fragment, { children: series.map((s) => {
-          const v = s.getValue(syncedPoint);
+        point !== null && /* @__PURE__ */ jsx(Fragment, { children: visibleSeries.map((s) => {
+          const v = s.getValue(point);
           if (v === null || v === void 0 || Number.isNaN(v)) return null;
           return /* @__PURE__ */ jsx(SeriesDot, { cx: sx, cy: topYScale(v), color: s.color }, `top-dot-${s.key}`);
         }) }),
@@ -221,12 +272,14 @@ function DualPanelPlot(props) {
           {
             width: xMax,
             height: topH + PANE_GAP,
-            onMove: handleMouse,
-            onLeave: handleLeave
+            onMove: cursor.onPointerMove,
+            onLeave: cursor.onPointerLeave,
+            onKeyDown: cursor.onKeyDown,
+            onBlur: cursor.onBlur
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Group, { left: MARGIN.left, top: MARGIN.top + bottomTop, children: [
+      /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top + bottomTop, children: [
         /* @__PURE__ */ jsx(
           "line",
           {
@@ -238,61 +291,54 @@ function DualPanelPlot(props) {
             strokeWidth: 1
           }
         ),
-        data.map((d) => {
-          const v = getBar(d);
-          if (v === null || v === void 0 || Number.isNaN(v)) return null;
-          const cx = xScale(getX(d)) ?? 0;
-          const y0 = bottomYScale(0);
-          const yVal = bottomYScale(v);
-          return /* @__PURE__ */ jsx(
-            Bar,
-            {
-              x: cx - barWidth / 2,
-              y: Math.min(y0, yVal),
-              width: barWidth,
-              height: Math.max(Math.abs(yVal - y0), 1),
-              fill: v >= 0 ? barColorPositive : barColorNegative,
-              fillOpacity: 0.7,
-              rx: 1.4
-            },
-            `bar-${getX(d)}`
-          );
-        }),
-        syncedPoint && /* @__PURE__ */ jsx(Fragment, { children: syncedBar !== null && syncedBar !== void 0 && !Number.isNaN(syncedBar) && /* @__PURE__ */ jsx(
+        histogramBars.map((b) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            x: b.x,
+            y: b.y,
+            width: b.width,
+            height: b.height,
+            fill: b.fill,
+            fillOpacity: 0.7,
+            rx: 1.4
+          },
+          b.key
+        )),
+        barVisible && point !== null && syncedBar !== null && syncedBar !== void 0 && !Number.isNaN(syncedBar) && /* @__PURE__ */ jsx(
           SeriesDot,
           {
             cx: sx,
             cy: bottomYScale(syncedBar),
             color: syncedBar >= 0 ? barColorPositive : barColorNegative
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(AxisLeftNumeric, { scale: bottomYScale, numTicks: 3, tickFormat: formatBottom }),
         /* @__PURE__ */ jsx(AxisBottomDate, { top: bottomH, scale: xScale, tickValues }),
         /* @__PURE__ */ jsx(
           HoverOverlay,
           {
             width: xMax,
-            height: bottomH + MARGIN.bottom,
-            onMove: handleMouse,
-            onLeave: handleLeave
+            height: bottomH + margin.bottom,
+            onMove: cursor.onPointerMove,
+            onLeave: cursor.onPointerLeave
           }
         )
       ] }),
-      syncedPoint && /* @__PURE__ */ jsx(Group, { left: MARGIN.left, top: MARGIN.top, children: /* @__PURE__ */ jsx(Crosshair, { x: sx, top: 0, bottom: innerH }) })
+      point !== null && /* @__PURE__ */ jsx(Group, { left: margin.left, top: margin.top, children: /* @__PURE__ */ jsx(Crosshair, { x: sx, top: 0, bottom: innerH }) })
     ] }),
-    /* @__PURE__ */ jsx(ChartTooltip, { tip: isDirectHover ? tip : null, tooltipRef, styles: tooltipStyles, children: tip && isDirectHover && /* @__PURE__ */ jsxs(Fragment, { children: [
+    cursor.isSource && point !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: cursor.anchor, children: [
       /* @__PURE__ */ jsx(
         TooltipHeader,
         {
-          date: getX(tip.data),
+          date: getX(point),
           ...(() => {
-            const lbl = tooltipLabel?.(tip.data) ?? null;
+            const lbl = tooltipLabel?.(point) ?? null;
             return lbl !== null ? { label: lbl.text, labelColor: lbl.color } : {};
           })()
         }
       ),
       /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        deriveTooltipRows(series, tip.data, formatTop).map((row) => /* @__PURE__ */ jsx(
+        deriveTooltipRows(visibleSeries, point, formatTop).map((row) => /* @__PURE__ */ jsx(
           TooltipRow,
           {
             color: row.color,
@@ -304,8 +350,8 @@ function DualPanelPlot(props) {
           },
           row.key
         )),
-        (() => {
-          const v = getBar(tip.data);
+        barVisible && (() => {
+          const v = getBar(point);
           if (v === null || v === void 0 || Number.isNaN(v)) return null;
           return /* @__PURE__ */ jsx(
             TooltipRow,
@@ -318,7 +364,7 @@ function DualPanelPlot(props) {
           );
         })()
       ] })
-    ] }) })
+    ] })
   ] });
 }
 const DualPanel = memo(DualPanelInner);

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

@@ -7,8 +7,12 @@ type HeatmapCell = {
 };
 export type HeatmapProps<T> = {
     data: T[];
-    width: number;
-    height: number;
+    /** Fixed height in pixels. Used when neither `aspectRatio` nor `fill` is set. Default 240. */
+    height?: number;
+    /** height = Math.round(containerWidth / aspectRatio). Ignored when `fill` is set. */
+    aspectRatio?: number;
+    /** Fill the parent flex/grid cell's measured height instead of a fixed/derived one. */
+    fill?: boolean;
     chartId: string;
     /** Extracts the y-axis category (row) from a data point. */
     getRow: (d: T) => string;
@@ -41,21 +45,21 @@ export type HeatmapProps<T> = {
         min: string;
         max: string;
     };
-    /**
-     * The query behind this chart hasn't resolved yet. Renders `ChartPending` (see its JSDoc for the
-     * three-state rationale) over the full `width` × `height` box in place of the grid, suppressing
-     * the legend strip and every cell/label/tooltip along with it. Unlike the other six kinds,
-     * `Heatmap` doesn't compose `ChartFrame` (it takes `width`/`height` directly rather than
-     * measuring), so this is handled locally instead of forwarded.
-     */
+    /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="img"`). */
+    ariaLabel?: string;
+    /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
     isPending?: boolean;
 };
 /**
  * Category × category intensity grid. Each cell is a rounded rect filled with the base
  * color at an opacity derived from its value; empty cells stay a faint neutral track.
  * Generalizes argo's day-of-week × hour-of-day heatmap. Categorical axes are rendered as
- * plain themed `<text>` (cells are not date-categorical, so no useHoverSync / shared
- * cursor) — per-cell hover drives the local tooltip directly.
+ * plain themed `<text>` (cells are not date-categorical, so there's no shared cursor here) —
+ * per-cell hover drives the local tooltip directly.
+ *
+ * Composes `ChartFrame` purely for measuring (`height`/`aspectRatio`/`fill`, the same three
+ * sizing modes every other kind exposes) — `legend={false}` and an empty `series` opt out of
+ * `ChartFrame`'s own derived legend, since Heatmap already ships its own gradient strip.
  */
 declare function HeatmapInner<T>(props: HeatmapProps<T>): import("react").JSX.Element;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Heatmap.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,kFAAkF;AAClF,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE9D,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAC5B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,yCAAyC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClD,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAA;IAChD,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAgCD;;;;;;GAMG;AACH,iBAAS,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,+BAwK9C;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAyB,OAAO,YAAY,CAAA"}
+{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Heatmap.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAWpD,kFAAkF;AAClF,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAK9D,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAC5B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,8FAA8F;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,yCAAyC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClD,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAA;IAChD,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAgCD;;;;;;;;;;GAUG;AACH,iBAAS,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,+BAiB9C;AA6KD;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAyB,OAAO,YAAY,CAAA"}

package/dist/charts/kinds/Heatmap.js

@@ -1,15 +1,13 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Group } from "@visx/group";
-import { memo, useMemo } from "react";
+import { memo, useMemo, useState } from "react";
 import {
-  ChartTooltip,
+  ChartTooltipFloat,
   TooltipBody,
   TooltipHeader,
-  TooltipRow,
-  useTooltipStyles
+  TooltipRow
 } from "../primitives/ChartTooltip.js";
-import { ChartPending } from "../primitives/ChartPending.js";
-import { useChartTooltip } from "../hooks/useChartTooltip.js";
+import { ChartFrame } from "../primitives/ChartFrame.js";
 import { VX, alpha } from "../../tokens/index.js";
 function firstSeen(data, get) {
   const seen = /* @__PURE__ */ new Set();
@@ -31,10 +29,26 @@ const PAD_TOP = 8;
 const LEGEND_H = 8;
 const LEGEND_LABEL_H = 16;
 function HeatmapInner(props) {
+  const { chartId, height, aspectRatio, fill, ariaLabel, isPending } = props;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      series: [],
+      chartId,
+      legend: false,
+      ...height !== void 0 && { height },
+      ...aspectRatio !== void 0 && { aspectRatio },
+      ...fill !== void 0 && { fill },
+      ...ariaLabel !== void 0 && { ariaLabel },
+      ...isPending !== void 0 && { isPending },
+      children: (plot) => /* @__PURE__ */ jsx(HeatmapPlot, { ...props, plot })
+    }
+  );
+}
+function HeatmapPlot(props) {
   const {
     data,
-    width,
-    height,
+    plot,
     chartId,
     getRow,
     getCol,
@@ -49,11 +63,10 @@ function HeatmapInner(props) {
     rowLabel = (r) => r,
     colLabel = (c) => c,
     renderTooltip,
-    legend,
-    isPending
+    legend
   } = props;
-  const tooltipStyles = useTooltipStyles();
-  const { tip, show, hide, tooltipRef } = useChartTooltip();
+  const { width, height } = plot;
+  const [tip, setTip] = useState(null);
   const rows = useMemo(() => rowsProp ?? firstSeen(data, getRow), [rowsProp, data, getRow]);
   const cols = useMemo(() => colsProp ?? firstSeen(data, getCol), [colsProp, data, getCol]);
   const { lookup, max } = useMemo(() => {
@@ -66,20 +79,23 @@ function HeatmapInner(props) {
     }
     return { lookup: map, max: m };
   }, [data, getRow, getCol, getValue]);
-  if (isPending) return /* @__PURE__ */ jsx(ChartPending, { width, height });
   const legendH = legend ? LEGEND_H + LEGEND_LABEL_H : 0;
   const gridW = Math.max(0, width - PAD_LEFT);
   const gridH = Math.max(0, height - PAD_TOP - PAD_BOTTOM - legendH);
   const cellW = cols.length > 0 ? gridW / cols.length : 0;
   const cellH = rows.length > 0 ? gridH / rows.length : 0;
   const legendGradientId = `${chartId}-heat-legend`;
+  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__ */ 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 fill = has ? alpha(color, intensity(value, max)) : alpha(VX.neutral, 0.04);
+          const cellFill = has ? alpha(color, intensity(value, max)) : alpha(VX.neutral, 0.04);
           return /* @__PURE__ */ jsx(
             "rect",
             {
@@ -88,9 +104,9 @@ function HeatmapInner(props) {
               width: Math.max(0, cellW - cellGap),
               height: Math.max(0, cellH - cellGap),
               rx: cellRadius,
-              fill,
+              fill: cellFill,
               style: { cursor: has ? "pointer" : "default" },
-              onPointerMove: (e) => has && show({ row, col, value }, e),
+              onPointerMove: (e) => has && show(row, col, value, e),
               onPointerLeave: hide,
               onPointerCancel: hide
             },
@@ -156,8 +172,8 @@ function HeatmapInner(props) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx(ChartTooltip, { tip, tooltipRef, styles: tooltipStyles, children: tip !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(TooltipHeader, { date: rowLabel(tip.data.row), label: colLabel(tip.data.col) }),
+    tip !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: tip.anchor, children: [
+      /* @__PURE__ */ jsx(TooltipHeader, { date: rowLabel(tip.row), label: colLabel(tip.col) }),
       /* @__PURE__ */ jsxs(TooltipBody, { children: [
         /* @__PURE__ */ jsx(
           TooltipRow,
@@ -165,12 +181,12 @@ function HeatmapInner(props) {
             color: alpha(color, 0.9),
             shape: "bar",
             label: "Value",
-            value: formatValue(tip.data.value)
+            value: formatValue(tip.value)
           }
         ),
-        renderTooltip?.(tip.data)
+        renderTooltip?.(tip)
       ] })
-    ] }) })
+    ] })
   ] });
 }
 const Heatmap = memo(HeatmapInner);