basalt-ui 1.41.0 → 2.0.0

package/dist/charts/index.js

@@ -1,202 +1,30 @@
-import {
-  VX,
-  alpha,
-  buildPaletteCss,
-  seriesTokens,
-  defineSeries,
-  groupTokens,
-  chartMargin
-} from "../tokens/index.js";
-import { VxThemeProvider, useVxTheme } from "./theme.js";
-import { ChartCursorScope, useCursorState } from "./cursor/scope.js";
-import {
-  createCursorStore,
-  globalCursorStore
-} from "./cursor/store.js";
-import {
-  curveFor,
-  deriveLegend,
-  deriveTooltipRows
-} from "./series.js";
-import {
-  CartesianChart,
-  resolveAxisDomain
-} from "./primitives/CartesianChart.js";
-import {
-  ChartFrame,
-  resolveLegend
-} from "./primitives/ChartFrame.js";
-import {
-  ChartCenter,
-  ChartPending,
-  ChartEmpty,
-  ChartError,
-  resolveChartState
-} from "./primitives/ChartPending.js";
-import { Crosshair, SeriesDot } from "./primitives/Crosshair.js";
-import { HatchPattern, hatchFill, hatchSizeFor } from "./primitives/HatchPattern.js";
-import { ChartCard } from "./primitives/ChartCard.js";
-import { ChartLegend } from "./primitives/ChartLegend.js";
-import {
-  ChartTooltipFloat,
-  TooltipHeader,
-  TooltipRow,
-  TooltipBody
-} from "./primitives/ChartTooltip.js";
-import {
-  AxisBottomDate,
-  AxisBottomNumeric,
-  AxisLeftNumeric,
-  AxisRightNumeric
-} from "./primitives/Axes.js";
-import { HoverOverlay } from "./primitives/HoverOverlay.js";
-import { ZoneRects } from "./primitives/ZoneRects.js";
-import { XZoneRects } from "./primitives/XZoneRects.js";
-import { AreaGradient, areaFillUrl } from "./primitives/AreaGradient.js";
-import { useChartCursor } from "./hooks/useChartCursor.js";
-import {
-  foldBands
-} from "./hooks/useBandPlot.js";
-import { useChartSize } from "./hooks/useChartSize.js";
-import {
-  fmtAxisDate,
-  fmtTooltipDate,
-  fmtCompact,
-  fmtPercent,
-  fmtCurrency,
-  fmtInt,
-  formatters
-} from "./utils/format.js";
-import { smartTicks, smartTicksEvery, xLabelPxFor, autoXLabelRotate } from "./utils/ticks.js";
-import { autoMargin, probeAxisLabels } from "./layout/auto-margin.js";
-import { measureText, maxTextWidth } from "./utils/measure-text.js";
-import {
-  ZonedLine
-} from "./kinds/ZonedLine.js";
-import { Bars } from "./kinds/Bars.js";
-import { StackedArea } from "./kinds/StackedArea.js";
-import { Donut } from "./kinds/Donut.js";
-import { MultiLine } from "./kinds/MultiLine.js";
-import { DualPanel } from "./kinds/DualPanel.js";
-import { Heatmap } from "./kinds/Heatmap.js";
+import { CartesianChart } from "./CartesianChart.js";
+import { Lines } from "./Lines.js";
+import { Bars } from "./Bars.js";
+import { StackedArea } from "./StackedArea.js";
+import { Sparkline } from "./Sparkline.js";
 import {
   BandStrip
-} from "./kinds/BandStrip.js";
-import { MirroredBars } from "./kinds/MirroredBars.js";
-import {
-  LineSparkline,
-  BarSparkline
-} from "./sparklines/index.js";
-import { Group } from "@visx/group";
-import { GridRows, GridColumns } from "@visx/grid";
-import { scaleLinear, scaleBand, scalePoint, scaleTime } from "@visx/scale";
-import { LinePath, Bar, AreaClosed, AreaStack, BarStack, BarGroup, Line, Pie } from "@visx/shape";
-import { Threshold } from "@visx/threshold";
-import {
-  curveMonotoneX,
-  curveLinear,
-  curveCatmullRom,
-  curveStep,
-  curveStepAfter,
-  curveStepBefore,
-  curveBasis
-} from "@visx/curve";
+} from "./BandStrip.js";
+import { Donut } from "./Donut.js";
+import { Heatmap } from "./Heatmap.js";
+import { DualPanel } from "./DualPanel.js";
+import {
+  MirroredBars
+} from "./MirroredBars.js";
+import { ChartCard } from "./ChartCard.js";
+import { chartCursor } from "./cursor.js";
 export {
-  AreaClosed,
-  AreaGradient,
-  AreaStack,
-  AxisBottomDate,
-  AxisBottomNumeric,
-  AxisLeftNumeric,
-  AxisRightNumeric,
   BandStrip,
-  Bar,
-  BarGroup,
-  BarSparkline,
-  BarStack,
   Bars,
   CartesianChart,
   ChartCard,
-  ChartCenter,
-  ChartCursorScope,
-  ChartEmpty,
-  ChartError,
-  ChartFrame,
-  ChartLegend,
-  ChartPending,
-  ChartTooltipFloat,
-  Crosshair,
   Donut,
   DualPanel,
-  GridColumns,
-  GridRows,
-  Group,
-  HatchPattern,
   Heatmap,
-  HoverOverlay,
-  Line,
-  LinePath,
-  LineSparkline,
+  Lines,
   MirroredBars,
-  MultiLine,
-  Pie,
-  SeriesDot,
+  Sparkline,
   StackedArea,
-  Threshold,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow,
-  VX,
-  VxThemeProvider,
-  XZoneRects,
-  ZoneRects,
-  ZonedLine,
-  alpha,
-  areaFillUrl,
-  autoMargin,
-  autoXLabelRotate,
-  buildPaletteCss,
-  chartMargin,
-  createCursorStore,
-  curveBasis,
-  curveCatmullRom,
-  curveFor,
-  curveLinear,
-  curveMonotoneX,
-  curveStep,
-  curveStepAfter,
-  curveStepBefore,
-  defineSeries,
-  deriveLegend,
-  deriveTooltipRows,
-  fmtAxisDate,
-  fmtCompact,
-  fmtCurrency,
-  fmtInt,
-  fmtPercent,
-  fmtTooltipDate,
-  foldBands,
-  formatters,
-  globalCursorStore,
-  groupTokens,
-  hatchFill,
-  hatchSizeFor,
-  maxTextWidth,
-  measureText,
-  probeAxisLabels,
-  resolveAxisDomain,
-  resolveChartState,
-  resolveLegend,
-  scaleBand,
-  scaleLinear,
-  scalePoint,
-  scaleTime,
-  seriesTokens,
-  smartTicks,
-  smartTicksEvery,
-  useChartCursor,
-  useChartSize,
-  useCursorState,
-  useVxTheme,
-  xLabelPxFor
+  chartCursor
 };

package/dist/charts/legend.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The derived legend — HTML, Mantine-free, outside the engine. Entries come from `series` only (a
+ * legend cannot name what the plot does not draw); a companion (`legend: false` + `parent`) rides
+ * its parent's entry. Toggling an entry hides the series from the plot, the tooltip and the auto
+ * domain together; hovering one emphasizes it (the definition is rebuilt with `highlighted`).
+ */
+import type { ReactElement } from 'react';
+import type { ChartSeries } from './types.js';
+/** `auto` renders both swatches and lets the container decide: none, dots or chips (CSS). */
+export type LegendMode = 'dots' | 'chips' | 'auto';
+/** The entries a series list derives, in display order (by role when `groups`). */
+export declare function legendEntries<T>(series: readonly ChartSeries<T>[], groups: boolean): ChartSeries<T>[][];
+export type ChartLegendProps<T> = {
+    series: readonly ChartSeries<T>[];
+    hidden: ReadonlySet<string>;
+    mode: LegendMode;
+    groups: boolean;
+    toggle: boolean;
+    onToggle: (key: string) => void;
+    onHighlight: (key: string | null) => void;
+};
+export declare function ChartLegend<T>(props: ChartLegendProps<T>): ReactElement | null;
+//# sourceMappingURL=legend.d.ts.map

package/dist/charts/legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/charts/legend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AAGxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,6FAA6F;AAC7F,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAUlD,mFAAmF;AACnF,wBAAgB,aAAa,CAAC,CAAC,EAC7B,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,EACjC,MAAM,EAAE,OAAO,GACd,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAMpB;AA8FD,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACjC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC3B,IAAI,EAAE,UAAU,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,IAAI,CAmE9E"}

package/dist/charts/legend.js

@@ -0,0 +1,160 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { VX } from "../tokens/index.js";
+import classes from "./chart-legend.module.css";
+const ROLE_ORDER = ["series", "overlay", "reference"];
+const DOTS_GAP = 38;
+function legendEntries(series, groups) {
+  const entries = series.filter((s) => s.legend !== false);
+  if (!groups) return entries.length ? [entries] : [];
+  return ROLE_ORDER.map((role) => entries.filter((s) => (s.role ?? "series") === role)).filter(
+    (g) => g.length > 0
+  );
+}
+const rowBaseStyle = {
+  border: 0,
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  flexWrap: "wrap",
+  alignItems: "center",
+  rowGap: 4,
+  fontSize: VX.legendFontSize,
+  color: VX.ink2,
+  lineHeight: 1.35
+};
+const rowStyle = { ...rowBaseStyle, display: "flex" };
+const autoRowStyle = {
+  ...rowBaseStyle,
+  "--bc-legend-gap": `${VX.legendGap}px`,
+  "--bc-dots-gap": `${DOTS_GAP}px`
+};
+const dividerStyle = { width: 1, alignSelf: "stretch", background: VX.divider };
+const buttonStyle = {
+  all: "unset",
+  // `all: unset` would also drop styles.css's `position: relative` (an inline style outranks the
+  // layer), and the `[data-basalt-hit]::after` overlay would anchor to an ancestor — over the plot.
+  position: "relative",
+  // theme-allow raw-surface — an invisible 1px: the edge the `[data-basalt-hit]` overlap cap assumes every control carries (styles.css)
+  border: "1px solid transparent",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+  cursor: "pointer",
+  borderRadius: VX.radiusCtrl
+};
+const noteStyle = { color: VX.axis };
+function Swatch({ s, mode }) {
+  if (mode === "auto")
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Swatch, { s, mode: "dots" }),
+      /* @__PURE__ */ jsx(Swatch, { s, mode: "chips" })
+    ] });
+  if (mode === "dots")
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: classes.dot,
+        style: { width: 8, height: 8, borderRadius: "50%", background: s.color, flex: "none" }
+      }
+    );
+  if ((s.mark ?? "line") === "line")
+    return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: classes.chip, width: 16, height: 8, style: { flex: "none" }, children: /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: 1,
+        x2: 15,
+        y1: 4,
+        y2: 4,
+        stroke: s.color,
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeOpacity: s.strokeOpacity ?? 1,
+        ...s.dash === "dashed" && { strokeDasharray: "4 3" }
+      }
+    ) });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: classes.chip,
+      style: {
+        width: 10,
+        height: 10,
+        // theme-allow raw-surface — swatch geometry, not a surface corner
+        borderRadius: 2,
+        background: s.color,
+        opacity: s.fillOpacity ?? 1,
+        flex: "none"
+      }
+    }
+  );
+}
+function ChartLegend(props) {
+  const groups = legendEntries(props.series, props.groups);
+  if (groups.length === 0) return null;
+  const auto = props.mode === "auto";
+  const gap = props.mode === "dots" ? DOTS_GAP : VX.legendGap;
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "aria-label": "Legend",
+      "data-basalt-chart-legend": props.mode,
+      ...auto && { className: classes.auto },
+      style: auto ? (
+        // `display` and the gaps are the stylesheet's: the container picks them by width.
+        autoRowStyle
+      ) : {
+        ...rowStyle,
+        columnGap: gap,
+        // Caps each entry's `[data-basalt-hit]` overlay at the real gap between entries.
+        ...{ "--vx-hit-gap": `${gap}px` }
+      },
+      children: groups.map((group, gi) => [
+        gi > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: dividerStyle }, `divider-${gi}`),
+        ...group.map((s) => {
+          const off = props.hidden.has(s.key);
+          const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Swatch, { s, mode: props.mode }),
+            /* @__PURE__ */ jsx("span", { children: s.label }),
+            s.note !== void 0 && /* @__PURE__ */ jsx("span", { style: noteStyle, children: s.note })
+          ] });
+          const itemStyle = { ...buttonStyle, opacity: off ? 0.4 : 1 };
+          if (!props.toggle)
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-legend-key": s.key,
+                style: itemStyle,
+                onMouseEnter: () => props.onHighlight(s.key),
+                onMouseLeave: () => props.onHighlight(null),
+                children: content
+              },
+              s.key
+            );
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-legend-key": s.key,
+              "data-basalt-hit": "",
+              "aria-pressed": !off,
+              style: itemStyle,
+              onClick: () => props.onToggle(s.key),
+              onMouseEnter: () => props.onHighlight(s.key),
+              onMouseLeave: () => props.onHighlight(null),
+              onFocus: () => props.onHighlight(s.key),
+              onBlur: () => props.onHighlight(null),
+              children: content
+            },
+            s.key
+          );
+        })
+      ])
+    }
+  );
+}
+export {
+  ChartLegend,
+  legendEntries
+};

package/dist/charts/marks.d.ts

@@ -0,0 +1,25 @@
+import type { BarYOptions } from '@tanstack/charts/bar';
+import type { ChartMarks, ChartSeries, ChartX, PlotContext, PlotRow } from './types.js';
+/** `'y2'` for a right-axis series on a chart that has one; otherwise the default axis. */
+export declare function yScaleOf<T, X extends ChartX>(plot: PlotContext<T, X>, s: Pick<ChartSeries<T>, 'axis'>): 'y2' | undefined;
+/** `1`, or `DIMMED` while ANOTHER legend entry (not this series, not its parent) is hovered. */
+export declare function emphasis<T>(highlighted: string | null, s: Pick<ChartSeries<T>, 'key' | 'parent'>): number;
+export declare function lineMark<T, X extends ChartX>(plot: PlotContext<T, X>, s: ChartSeries<T>): ChartMarks[number];
+/** A series' `getMarker` points as dots: one decorative mark per distinct paint. */
+export declare function markersOf<T, X extends ChartX>(s: ChartSeries<T>, rows: readonly PlotRow<T, X>[], yScale: 'y2' | undefined): ChartMarks;
+export declare function barMark<TDatum>(rows: Iterable<TDatum>, options?: BarYOptions<TDatum>): ChartMarks[number];
+/**
+ * A band fill drawn at `width` px: each pixel column of the plot keeps its first and last row and the
+ * rows holding the extremes of `from`, `to` and `to - from`, so the silhouette and every sign
+ * crossing survive while a 10k-row series stops costing the engine a scene point per row. `at` is a
+ * row's x as a plot fraction (0..1), so an irregularly sampled series (bursts, then a gap) is
+ * bucketed by where it is drawn, not by its array index. The series' own first and last row are
+ * always kept. Below {@link FILL_ROWS_PER_PX} rows per pixel, or for an unmeasured width, the rows
+ * come back unchanged. Order is preserved; pure in its inputs, so the server render and the first
+ * client render agree. Only for decorative fills: hover and focus must read the full series.
+ */
+export declare function thinFill<R extends {
+    from: number;
+    to: number;
+}>(rows: readonly R[], width: number, at: (row: R) => number): R[];
+//# sourceMappingURL=marks.d.ts.map

package/dist/charts/marks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marks.d.ts","sourceRoot":"","sources":["../../src/charts/marks.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAQvD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEpF,0FAA0F;AAC1F,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC1C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAC9B,IAAI,GAAG,SAAS,CAElB;AAED,gGAAgG;AAChG,wBAAgB,QAAQ,CAAC,CAAC,EACxB,WAAW,EAAE,MAAM,GAAG,IAAI,EAC1B,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,GACxC,MAAM,CAER;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC1C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GAChB,UAAU,CAAC,MAAM,CAAC,CAcpB;AASD,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAC3C,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACjB,IAAI,EAAE,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAC9B,MAAM,EAAE,IAAI,GAAG,SAAS,GACvB,UAAU,CAiCZ;AAUD,wBAAgB,OAAO,CAAC,MAAM,EAC5B,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,EACtB,OAAO,GAAE,WAAW,CAAC,MAAM,CAAM,GAChC,UAAU,CAAC,MAAM,CAAC,CAKpB;AAyBD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAC7D,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,KAAK,EAAE,MAAM,EACb,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GACrB,CAAC,EAAE,CA+CL"}

package/dist/charts/marks.js

@@ -0,0 +1,128 @@
+import { barY } from "@tanstack/charts/bar";
+import { dot } from "@tanstack/charts/dot";
+import { lineY } from "@tanstack/charts/line";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { VX } from "../tokens/index.js";
+import { chartCurve } from "./curves.js";
+import { DASH, DIMMED, LINE_STROKE_WIDTH } from "./theme.js";
+import { rowX } from "./types.js";
+function yScaleOf(plot, s) {
+  return s.axis === "right" ? plot.y2 : void 0;
+}
+function emphasis(highlighted, s) {
+  return highlighted === null || highlighted === s.key || highlighted === s.parent ? 1 : DIMMED;
+}
+function lineMark(plot, s) {
+  const yScale = yScaleOf(plot, s);
+  return lineY(plot.rows(s.key), {
+    id: s.key,
+    x: rowX,
+    y: "y",
+    z: "series",
+    stroke: s.color,
+    strokeWidth: s.strokeWidth ?? LINE_STROKE_WIDTH,
+    strokeOpacity: (s.strokeOpacity ?? 1) * emphasis(plot.highlighted, s),
+    curve: chartCurve(s.curve ?? "monotone"),
+    ...s.dash === "dashed" && { strokeDasharray: DASH },
+    ...yScale !== void 0 && { yScale }
+  });
+}
+function markersOf(s, rows, yScale) {
+  const getMarker = s.getMarker;
+  if (!getMarker) return [];
+  const groups = [];
+  for (const row of rows) {
+    if (row.y === null) continue;
+    const m = getMarker(row.datum);
+    if (!m) continue;
+    const paint = { color: m.color ?? s.color, opacity: m.fillOpacity ?? 1, ring: m.ring !== false };
+    let group = groups.find(
+      (g) => g.color === paint.color && g.opacity === paint.opacity && g.ring === paint.ring
+    );
+    if (!group) {
+      group = { ...paint, rows: [] };
+      groups.push(group);
+    }
+    group.rows.push({ ...row, r: m.r ?? VX.dotR });
+  }
+  return groups.map(
+    (group, i) => decorative(
+      dot(group.rows, {
+        id: `${s.key}-marker-${i}`,
+        x: rowX,
+        y: "y",
+        r: "r",
+        fill: group.color,
+        fillOpacity: group.opacity,
+        ...group.ring && { stroke: VX.surface.panel, strokeWidth: 1.5 },
+        ...yScale !== void 0 && { yScale }
+      })
+    )
+  );
+}
+const given = (v) => v !== void 0 && v !== null;
+function barMark(rows, options = {}) {
+  const seriesAsked = [options.z, options.color, options.layout].some(given);
+  const extentGiven = [options.y1, options.y2].some(given);
+  return barY(rows, seriesAsked || extentGiven ? options : { ...options, y1: 0 });
+}
+const FILL_ROWS_PER_PX = 4;
+const extreme = (value, index) => ({ value, index });
+const lower = (e, value, index) => {
+  if (value < e.value) Object.assign(e, { value, index });
+};
+const upper = (e, value, index) => {
+  if (value > e.value) Object.assign(e, { value, index });
+};
+function thinFill(rows, width, at) {
+  const buckets = Math.floor(width);
+  if (!(buckets >= 1) || rows.length <= buckets * FILL_ROWS_PER_PX) return rows.slice();
+  const kept = /* @__PURE__ */ new Set([0, rows.length - 1]);
+  const columns = /* @__PURE__ */ new Map();
+  for (const [i, r] of rows.entries()) {
+    const position = at(r);
+    if (!Number.isFinite(r.from) || !Number.isFinite(r.to) || !Number.isFinite(position)) {
+      kept.add(i);
+      continue;
+    }
+    const column = Math.min(buckets - 1, Math.max(0, Math.floor(position * buckets)));
+    const gap = r.to - r.from;
+    const b = columns.get(column);
+    if (!b) {
+      columns.set(column, {
+        first: i,
+        last: i,
+        minFrom: extreme(r.from, i),
+        maxFrom: extreme(r.from, i),
+        minTo: extreme(r.to, i),
+        maxTo: extreme(r.to, i),
+        minGap: extreme(gap, i),
+        maxGap: extreme(gap, i)
+      });
+      continue;
+    }
+    b.last = i;
+    lower(b.minFrom, r.from, i);
+    upper(b.maxFrom, r.from, i);
+    lower(b.minTo, r.to, i);
+    upper(b.maxTo, r.to, i);
+    lower(b.minGap, gap, i);
+    upper(b.maxGap, gap, i);
+  }
+  for (const b of columns.values()) {
+    for (const i of [b.first, b.last]) kept.add(i);
+    for (const e of [b.minFrom, b.maxFrom, b.minTo, b.maxTo, b.minGap, b.maxGap]) kept.add(e.index);
+  }
+  return [...kept].toSorted((p, q) => p - q).flatMap((i) => {
+    const row = rows[i];
+    return row === void 0 ? [] : [row];
+  });
+}
+export {
+  barMark,
+  emphasis,
+  lineMark,
+  markersOf,
+  thinFill,
+  yScaleOf
+};

package/dist/charts/panel.d.ts

@@ -0,0 +1,56 @@
+import type { ChartBuildContext, ChartTooltipRow as EngineTooltipRow, ChartValue, StoredChartSpec } from '@tanstack/charts/types/core';
+import type { ReactElement } from 'react';
+import type { ChartShellProps } from './CartesianChart.js';
+import type { XScaleModel } from './scales.js';
+import type { ContainerClass } from '../tokens/size-classes.js';
+import type { CartesianChartProps, ChartMarks, ChartSeries, ChartX, PlotRow } from './types.js';
+/** One pane, built per container class: its marks and its scales (x, y, and any helper scale). */
+export type PaneBuilder = (ctx: ChartBuildContext) => {
+    marks: ChartMarks;
+    scales: StoredChartSpec['scales'];
+};
+/** Everything a composed kind compiles for one legend state. */
+export type PanelPlan<T> = {
+    /** Every x value the cursor can land on, for snapping a foreign cursor. */
+    keys: readonly ChartX[];
+    top: PaneBuilder;
+    bottom: PaneBuilder;
+    /** The top pane's share of the grid, 0..1. */
+    topFraction: number;
+    /** Space between the panes in px. */
+    gap: number;
+    /** The per-series tooltip rows for a hovered datum; `tooltip.rows` and the title are the rung's. */
+    rows: (d: T) => readonly EngineTooltipRow[];
+};
+export type PanelInput = {
+    hidden: ReadonlySet<string>;
+    highlighted: string | null;
+    /** The measured chart width, only when the rung is asked for it (`byWidth`), otherwise 0. */
+    width: number;
+};
+export type PanelRungProps<T, X extends ChartX> = Omit<ChartShellProps<T>, 'compile'> & Pick<CartesianChartProps<T, X>, 'formatX' | 'cursorGroup' | 'cursorResolution' | 'tooltip'> & {
+    plan: (input: PanelInput) => PanelPlan<T>;
+    /** Recompile on width changes: for a kind whose data depends on it (`fold`). */
+    byWidth?: boolean;
+};
+/** A pane's y axis: the scale and the rung's guide for it. */
+export declare const paneY: (opts: {
+    scale: ChartScale;
+    domain: readonly [number, number];
+    format: (v: number) => string;
+    ticks: number;
+    cls: ContainerClass;
+}) => StoredChartSpec["scales"][string];
+type ChartScale = NonNullable<StoredChartSpec['scales'][string]>['scale'];
+/** The shared x axis (drawn on the bottom pane only): the rung's ticks and format. */
+export declare const paneX: <X extends ChartX>(opts: {
+    scale: ChartScale;
+    model: XScaleModel<X>;
+    format: (v: ChartValue) => string;
+    cls: ContainerClass;
+}) => StoredChartSpec["scales"][string];
+/** One row per datum for a series: a `null` or non-finite value is kept as a gap. */
+export declare function rowsOf<T, X extends ChartX>(data: readonly T[], x: (d: T) => X, s: ChartSeries<T>): PlotRow<T, X>[];
+export declare function PanelRung<T, X extends ChartX>(props: PanelRungProps<T, X>): ReactElement;
+export {};
+//# sourceMappingURL=panel.d.ts.map

package/dist/charts/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/charts/panel.tsx"],"names":[],"mappings":"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"}