@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/core/chart-frame.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { ChartEmpty, ChartSkeleton } from "./chart-states.js";
+import { resolveDrawingHeight, useChartSize } from "./use-chart-size.js";
+const FILL_MIN_HEIGHT = 120;
+function ChartFrame({
+  height,
+  aspectRatio,
+  labels,
+  loading,
+  empty,
+  skeleton = "bars",
+  legend,
+  legendPosition = "top",
+  legendAside = false,
+  table,
+  footer,
+  className,
+  children
+}) {
+  const [ref, size] = useChartSize();
+  const fill = height === "fill";
+  const drawingHeight = resolveDrawingHeight({
+    height,
+    aspectRatio,
+    width: size.width,
+    measured: size.height
+  });
+  const ready = !loading && !empty;
+  const legendNode = ready && legend ? legendAside ? /* @__PURE__ */ jsx("div", { className: "@lg/chart:order-last @lg/chart:w-44 @lg/chart:shrink-0 @lg/chart:[&_ul]:flex-col @lg/chart:[&_ul]:flex-nowrap @lg/chart:[&_ul]:items-start", children: legend }) : legend : null;
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/chart relative w-full min-w-0", fill && "h-full", className), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2",
+        fill && "h-full",
+        legendAside && "@lg/chart:flex-row @lg/chart:items-center @lg/chart:gap-4"
+      ),
+      children: [
+        legendPosition === "top" ? legendNode : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: cn(
+              "relative min-w-0",
+              fill ? "min-h-0 flex-1 basis-0 @lg/chart:self-stretch" : cn("w-full", legendAside && "@lg/chart:w-auto @lg/chart:flex-1")
+            ),
+            style: fill ? { minHeight: FILL_MIN_HEIGHT } : { height: drawingHeight },
+            children: loading ? /* @__PURE__ */ jsx(ChartSkeleton, { height: drawingHeight, label: labels.loading, shape: skeleton }) : empty ? /* @__PURE__ */ jsx(ChartEmpty, { height: drawingHeight, label: labels.empty }) : children(size.width, drawingHeight)
+          }
+        ),
+        ready ? footer : null,
+        legendPosition === "bottom" ? legendNode : null,
+        ready ? table : null
+      ]
+    }
+  ) });
+}
+export {
+  ChartFrame
+};

package/dist/charts/core/chart-states.d.ts

@@ -0,0 +1,16 @@
+export interface ChartSkeletonProps {
+    height: number;
+    label: string;
+    /** "bars" mimics columns, "line" a soft wave, "ring" a donut (for polar charts). */
+    shape?: "bars" | "line" | "ring";
+    className?: string;
+}
+/** Loading placeholder with the rough shape of the chart that is coming. */
+export declare function ChartSkeleton({ height, label, shape, className }: ChartSkeletonProps): import("react").JSX.Element;
+export interface ChartEmptyProps {
+    height: number;
+    label: string;
+    className?: string;
+}
+/** Shown when there is nothing to plot: keeps the chart's footprint, says why. */
+export declare function ChartEmpty({ height, label, className }: ChartEmptyProps): import("react").JSX.Element;

package/dist/charts/core/chart-states.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const SKELETON_BARS = [0.42, 0.66, 0.5, 0.82, 0.58, 0.74, 0.46, 0.9, 0.62, 0.7];
+function ChartSkeleton({ height, label, shape = "bars", className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label,
+      className: cn("relative flex w-full animate-pulse flex-col gap-3", className),
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-3 w-16 rounded-xs bg-surface-2" }),
+          /* @__PURE__ */ jsx("span", { className: "h-3 w-12 rounded-xs bg-surface-2" })
+        ] }),
+        shape === "ring" ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "aspect-square h-[78%] rounded-pill border-[18px] border-surface-2",
+            "aria-hidden": "true"
+          }
+        ) }) : shape === "line" ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "w-full flex-1",
+            viewBox: "0 0 100 40",
+            preserveAspectRatio: "none",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M0,30 C12,26 18,14 30,18 C42,22 48,8 60,10 C72,12 80,24 100,6 L100,40 L0,40 Z",
+                className: "fill-surface-2"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-end gap-[3%] border-b-divider px-[2%]", children: SKELETON_BARS.map((ratio) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex-1 rounded-t-[6px] bg-surface-2",
+            style: { height: `${ratio * 100}%` }
+          },
+          ratio
+        )) })
+      ]
+    }
+  );
+}
+function ChartEmpty({ height, label, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col items-center justify-center gap-2 rounded-event bg-[repeating-linear-gradient(to_bottom,transparent_0,transparent_calc(25%-1px),var(--chart-grid)_calc(25%-1px),var(--chart-grid)_25%)]",
+        className
+      ),
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "28", height: "28", viewBox: "0 0 24 24", className: "text-ink-3", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 19h16M7 15v2M11 11v6M15 13v4M19 8v9",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.8",
+            strokeLinecap: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "m-0 font-semibold text-[13px] text-ink-3", children: label })
+      ]
+    }
+  );
+}
+export {
+  ChartEmpty,
+  ChartSkeleton
+};

package/dist/charts/core/chord.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Chord diagram layout: groups around a circle, ribbons between them whose
+ * widths are the flows. Pure functions, unit tested in
+ * `test/graph-flow-parity.test.mjs`.
+ *
+ * `matrix[i][j]` is the flow from group `i` to group `j`. A group's arc spans
+ * its outflow (the row sum); each ribbon touches the source group with
+ * `matrix[i][j]` and the target group with `matrix[j][i]`, so a symmetric
+ * matrix gives ribbons of equal width at both ends.
+ */
+export interface ChordOptions {
+    /** Empty angle between neighbouring groups, radians. */
+    padAngle?: number;
+    /** Where the first group starts, radians, 0 at twelve o'clock clockwise. */
+    startAngle?: number;
+    /** Order of the groups around the circle. */
+    sortGroups?: "input" | "ascending" | "descending";
+    /** Order of the ribbon ends inside a group. */
+    sortSubgroups?: "input" | "ascending" | "descending";
+}
+export interface ChordGroup {
+    index: number;
+    startAngle: number;
+    endAngle: number;
+    /** Row sum: everything that leaves this group. */
+    value: number;
+}
+export interface ChordEnd {
+    /** The group this end belongs to. */
+    index: number;
+    /** The group at the other end. */
+    other: number;
+    startAngle: number;
+    endAngle: number;
+    value: number;
+}
+export interface Chord {
+    /** Larger end first. */
+    source: ChordEnd;
+    target: ChordEnd;
+    /** `source.value + target.value`, the weight of the whole ribbon. */
+    value: number;
+}
+export interface ChordLayout {
+    /** In input order (not drawing order). */
+    groups: ChordGroup[];
+    chords: Chord[];
+}
+export declare function chordLayout(matrix: ReadonlyArray<readonly number[]>, { padAngle, startAngle, sortGroups, sortSubgroups, }?: ChordOptions): ChordLayout;
+/**
+ * Closed ribbon between the two ends of a chord at `radius`: along the source
+ * arc, a curve through the centre to the target arc, along it, and back. A
+ * chord from a group to itself is a single loop.
+ */
+export declare function ribbonPath(chord: Chord, radius: number, cx?: number, cy?: number): string;
+/** Ribbons that touch a group (as source or target). */
+export declare function chordsOf(layout: ChordLayout, group: number): Chord[];
+/** Index of the group whose arc contains `angle`, or -1 (in the padding or outside). */
+export declare function groupAt(layout: ChordLayout, angle: number): number;

package/dist/charts/core/chord.js

@@ -0,0 +1,104 @@
+import { polarPoint, TAU } from "./polar.js";
+const compare = (mode) => mode === "ascending" ? (a, b) => a - b : mode === "descending" ? (a, b) => b - a : null;
+function chordLayout(matrix, {
+  padAngle = 0.04,
+  startAngle = 0,
+  sortGroups = "input",
+  sortSubgroups = "input"
+} = {}) {
+  const n = matrix.length;
+  const cell = (i, j) => {
+    const value = matrix[i]?.[j] ?? 0;
+    return Number.isFinite(value) && value > 0 ? value : 0;
+  };
+  const rows = Array.from(
+    { length: n },
+    (_, i) => Array.from({ length: n }, (_2, j) => cell(i, j)).reduce((a, b) => a + b, 0)
+  );
+  const total = rows.reduce((a, b) => a + b, 0);
+  if (n === 0 || total <= 0) return { groups: [], chords: [] };
+  const pads = padAngle * n;
+  const k = Math.max(0, TAU - pads) / total;
+  const groupOrder = Array.from({ length: n }, (_, i) => i);
+  const byGroup = compare(sortGroups);
+  if (byGroup) groupOrder.sort((a, b) => byGroup(rows[a], rows[b]));
+  const bySub = compare(sortSubgroups);
+  const groups = new Array(n);
+  const ends = /* @__PURE__ */ new Map();
+  let angle = startAngle;
+  for (const i of groupOrder) {
+    const from = angle;
+    const order = Array.from({ length: n }, (_, j) => j);
+    if (bySub) order.sort((a, b) => bySub(cell(i, a), cell(i, b)));
+    for (const j of order) {
+      const value = cell(i, j);
+      ends.set(`${i}:${j}`, {
+        index: i,
+        other: j,
+        startAngle: angle,
+        endAngle: angle + value * k,
+        value
+      });
+      angle += value * k;
+    }
+    groups[i] = { index: i, startAngle: from, endAngle: angle, value: rows[i] };
+    angle += padAngle;
+  }
+  const chords = [];
+  for (let i = 0; i < n; i += 1) {
+    for (let j = 0; j <= i; j += 1) {
+      const a = ends.get(`${i}:${j}`);
+      const b = ends.get(`${j}:${i}`);
+      if (!(a.value > 0) && !(b.value > 0)) continue;
+      const [source, target] = a.value < b.value ? [b, a] : [a, b];
+      chords.push({ source, target, value: a.value + (i === j ? 0 : b.value) });
+    }
+  }
+  return { groups, chords };
+}
+const r2 = (n) => Math.round(n * 100) / 100;
+function arcTo(radius, from, to, cx, cy) {
+  const end = polarPoint(cx, cy, radius, to);
+  const large = Math.abs(to - from) > Math.PI ? 1 : 0;
+  return `A${r2(radius)},${r2(radius)} 0 ${large} 1 ${r2(end.x)},${r2(end.y)}`;
+}
+function ribbonPath(chord, radius, cx = 0, cy = 0) {
+  const { source: s, target: t } = chord;
+  const point = (angle) => {
+    const p = polarPoint(cx, cy, radius, angle);
+    return `${r2(p.x)},${r2(p.y)}`;
+  };
+  const centre = `${r2(cx)},${r2(cy)}`;
+  if (s.index === t.index) {
+    return `M${point(s.startAngle)}${arcTo(radius, s.startAngle, s.endAngle, cx, cy)}Q${centre} ${point(s.startAngle)}Z`;
+  }
+  return [
+    `M${point(s.startAngle)}`,
+    arcTo(radius, s.startAngle, s.endAngle, cx, cy),
+    `Q${centre} ${point(t.startAngle)}`,
+    arcTo(radius, t.startAngle, t.endAngle, cx, cy),
+    `Q${centre} ${point(s.startAngle)}`,
+    "Z"
+  ].join("");
+}
+function chordsOf(layout, group) {
+  return layout.chords.filter(
+    (chord) => chord.source.index === group || chord.target.index === group
+  );
+}
+function groupAt(layout, angle) {
+  const a = (angle % TAU + TAU) % TAU;
+  for (const group of layout.groups) {
+    const from = (group.startAngle % TAU + TAU) % TAU;
+    const span = group.endAngle - group.startAngle;
+    const offset = (a - from + TAU) % TAU;
+    if (offset <= span) return group.index;
+  }
+  return -1;
+}
+export {
+  chordLayout,
+  chordsOf,
+  groupAt,
+  ribbonPath
+};

package/dist/charts/core/color-scale.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Continuous and stepped color scales built only from tokens. Colors are
+ * `color-mix()` expressions over CSS variables, so they follow the theme
+ * (light/dark) and the active accent palette without any JavaScript.
+ */
+import { type ChartTone } from "./palette.js";
+/** Mixes `percent`% of `color` into `base` (the surface by default). */
+export declare function tint(color: string, percent: number, base?: string): string;
+/** Text color readable on a `tint(color, percent)` fill. */
+export declare function inkOn(percent: number): string;
+export interface ScaleColors {
+    /** Low end of a diverging scale. */
+    low?: string;
+    /** Neutral middle (diverging) or empty end (sequential). */
+    mid?: string;
+    /** High end; the brand by default. */
+    high?: string;
+}
+export declare const DEFAULT_SCALE_COLORS: Required<ScaleColors>;
+/** Clamped position of `value` in [min, max], 0-1. */
+export declare function normalize(value: number, min: number, max: number): number;
+export interface ColorStop {
+    color: string;
+    /** Strength 0-100 of the hue in the mix, for picking text color. */
+    strength: number;
+}
+/** Sequential scale: `mid` (empty) to `high`. */
+export declare function sequentialColor(value: number, [min, max]: readonly [number, number], colors?: ScaleColors): ColorStop;
+/** Diverging scale: `low` below `center`, `mid` at it, `high` above. */
+export declare function divergingColor(value: number, [min, max]: readonly [number, number], center?: number, colors?: ScaleColors): ColorStop;
+export interface ColorRange {
+    /** Inclusive lower bound; open when omitted. */
+    from?: number;
+    /** Exclusive upper bound; open when omitted. */
+    to?: number;
+    label: string;
+    /** CSS color; or use `tone`. */
+    color?: string;
+    tone?: ChartTone;
+}
+/** Index of the first range containing `value`, or -1. */
+export declare function rangeIndex(value: number, ranges: readonly ColorRange[]): number;
+/**
+ * Fill of a stepped range: its own `color`, a `tone` (its ink at 55% over the
+ * surface, readable with ink text in both themes), or a step of the brand
+ * scale by position.
+ */
+export declare function rangeColor(range: ColorRange, index: number, count: number): ColorStop;
+/** CSS gradient for a legend bar of a continuous scale. */
+export declare function scaleGradient(kind: "sequential" | "diverging", colors?: ScaleColors, direction?: string): string;

package/dist/charts/core/color-scale.js

@@ -0,0 +1,59 @@
+import { TONE_COLORS } from "./palette.js";
+function tint(color, percent, base = "var(--surface)") {
+  const p = Math.round(Math.min(100, Math.max(0, percent)));
+  if (p >= 100) return color;
+  if (p <= 0) return base;
+  return `color-mix(in oklab, ${color} ${p}%, ${base})`;
+}
+function inkOn(percent) {
+  return percent >= 80 ? "var(--surface)" : "var(--ink)";
+}
+const DEFAULT_SCALE_COLORS = {
+  low: "var(--chart-cat-1)",
+  mid: "var(--surface-2)",
+  high: "var(--accent-word)"
+};
+const FLOOR = 12;
+function normalize(value, min, max) {
+  if (max <= min) return 1;
+  return Math.min(1, Math.max(0, (value - min) / (max - min)));
+}
+function sequentialColor(value, [min, max], colors = {}) {
+  const { high, mid } = { ...DEFAULT_SCALE_COLORS, ...colors };
+  const strength = FLOOR + normalize(value, min, max) * (100 - FLOOR);
+  return { color: tint(high, strength, mid), strength };
+}
+function divergingColor(value, [min, max], center = 0, colors = {}) {
+  const { low, mid, high } = { ...DEFAULT_SCALE_COLORS, ...colors };
+  const reach = Math.max(center - min, max - center) || 1;
+  const t = Math.max(-1, Math.min(1, (value - center) / reach));
+  const strength = Math.abs(t) * 100;
+  return { color: tint(t < 0 ? low : high, strength, mid), strength };
+}
+function rangeIndex(value, ranges) {
+  return ranges.findIndex(
+    (range) => (range.from == null || value >= range.from) && (range.to == null || value < range.to)
+  );
+}
+function rangeColor(range, index, count) {
+  if (range.color) return { color: range.color, strength: 100 };
+  if (range.tone) return { color: tint(TONE_COLORS[range.tone].ink, 55), strength: 55 };
+  const strength = FLOOR + (index + 1) / Math.max(1, count) * (100 - FLOOR);
+  return { color: tint(DEFAULT_SCALE_COLORS.high, strength, DEFAULT_SCALE_COLORS.mid), strength };
+}
+function scaleGradient(kind, colors = {}, direction = "to right") {
+  const { low, mid, high } = { ...DEFAULT_SCALE_COLORS, ...colors };
+  if (kind === "diverging") return `linear-gradient(${direction}, ${low}, ${mid}, ${high})`;
+  return `linear-gradient(${direction}, ${tint(high, FLOOR, mid)}, ${high})`;
+}
+export {
+  DEFAULT_SCALE_COLORS,
+  divergingColor,
+  inkOn,
+  normalize,
+  rangeColor,
+  rangeIndex,
+  scaleGradient,
+  sequentialColor,
+  tint
+};

package/dist/charts/core/data-table.d.ts

@@ -0,0 +1,17 @@
+export interface ChartDataTableProps {
+    caption: string;
+    /** Header of the first column. */
+    categoryHeader: string;
+    /** Row headers, already formatted. */
+    categories: readonly string[];
+    columns: ReadonlyArray<{
+        id: string;
+        name: string;
+        values: ReadonlyArray<string>;
+    }>;
+}
+/**
+ * Visually hidden table with the same numbers as the chart, so the data is
+ * reachable by screen readers (and by copy/paste) without relying on color.
+ */
+export declare function ChartDataTable({ caption, categoryHeader, categories, columns, }: ChartDataTableProps): import("react").JSX.Element;

package/dist/charts/core/data-table.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartDataTable({
+  caption,
+  categoryHeader,
+  categories,
+  columns
+}) {
+  return (
+    // The wrapper clips: a table ignores `width: 1px`, so a wide one would still overflow the page.
+    /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxs("table", { children: [
+      /* @__PURE__ */ jsx("caption", { children: caption }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", children: categoryHeader }),
+        columns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", children: column.name }, column.id))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: categories.map((category, row) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: categories can repeat; rows follow the data order.
+        /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", children: category }),
+          columns.map((column) => /* @__PURE__ */ jsx("td", { children: column.values[row] ?? "" }, column.id))
+        ] }, row)
+      )) })
+    ] }) })
+  );
+}
+export {
+  ChartDataTable
+};

package/dist/charts/core/distribution/brush.d.ts

@@ -0,0 +1,44 @@
+export interface BrushPoint {
+    x: number;
+    y: number;
+}
+/** Normalized rectangle in data units (x0 <= x1, y0 <= y1). An infinite edge means "unbounded". */
+export interface BrushRect {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+}
+export type BrushRange = readonly [number, number];
+export interface BrushRanges {
+    x: BrushRange | null;
+    y: BrushRange | null;
+}
+export type BrushKey = "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown";
+/** Rectangle spanned by two corners, whatever the drag direction. */
+export declare function rectFromCorners(a: BrushPoint, b: BrushPoint): BrushRect;
+/** Keeps the rectangle inside the plot domains; an unbounded edge becomes the domain edge. */
+export declare function clampRect(rect: BrushRect, xDomain: BrushRange, yDomain: BrushRange): BrushRect;
+/** One range filter per axis; an unbounded axis gives `null` and is not filtered. */
+export declare function rectToRanges(rect: BrushRect): BrushRanges;
+/** Rectangle of the active range filters; an axis nobody filters stays unbounded. */
+export declare function rangesToRect(x: BrushRange | null, y: BrushRange | null): BrushRect | null;
+export declare function rectContains(rect: BrushRect, x: number, y: number): boolean;
+/** True when the drag moved less than `min` pixels in both axes: it was a click. */
+export declare function isClick(a: BrushPoint, b: BrushPoint, min?: number): boolean;
+/** Brush that keyboard users start from: the middle half of both domains. */
+export declare function defaultBrush(xDomain: BrushRange, yDomain: BrushRange): BrushRect;
+/**
+ * Keyboard step. Arrows move the rectangle by 5 % of the domain; with `grow` they resize it instead
+ * (right and up make it larger, left and down smaller). It never leaves the domains and never
+ * collapses below one step.
+ */
+export declare function stepBrush(rect: BrushRect, key: BrushKey, grow: boolean, xDomain: BrushRange, yDomain: BrushRange, fraction?: number): BrushRect;
+export declare const TOUCH_BRUSH_DELAY = 350;
+export type TouchIntent = "wait" | "brush" | "scroll";
+/**
+ * What a touch that went down at `from` means once it is at `to` after `elapsed` ms. Moving more than
+ * a few pixels before the long-press delay is a scroll (the brush never starts); holding still past
+ * the delay arms the brush, and from then on every move is part of it.
+ */
+export declare function touchIntent(from: BrushPoint, to: BrushPoint, elapsed: number, delay?: number, slop?: number): TouchIntent;

package/dist/charts/core/distribution/brush.js

@@ -0,0 +1,89 @@
+function rectFromCorners(a, b) {
+  return {
+    x0: Math.min(a.x, b.x),
+    x1: Math.max(a.x, b.x),
+    y0: Math.min(a.y, b.y),
+    y1: Math.max(a.y, b.y)
+  };
+}
+const clamp = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
+function clampRect(rect, xDomain, yDomain) {
+  const [xLo, xHi] = [Math.min(...xDomain), Math.max(...xDomain)];
+  const [yLo, yHi] = [Math.min(...yDomain), Math.max(...yDomain)];
+  return {
+    x0: clamp(rect.x0, xLo, xHi),
+    x1: clamp(rect.x1, xLo, xHi),
+    y0: clamp(rect.y0, yLo, yHi),
+    y1: clamp(rect.y1, yLo, yHi)
+  };
+}
+function rectToRanges(rect) {
+  const bounded = (lo, hi) => Number.isFinite(lo) && Number.isFinite(hi) ? [Math.min(lo, hi), Math.max(lo, hi)] : null;
+  return { x: bounded(rect.x0, rect.x1), y: bounded(rect.y0, rect.y1) };
+}
+function rangesToRect(x, y) {
+  if (!x && !y) return null;
+  return {
+    x0: x ? Math.min(...x) : Number.NEGATIVE_INFINITY,
+    x1: x ? Math.max(...x) : Number.POSITIVE_INFINITY,
+    y0: y ? Math.min(...y) : Number.NEGATIVE_INFINITY,
+    y1: y ? Math.max(...y) : Number.POSITIVE_INFINITY
+  };
+}
+function rectContains(rect, x, y) {
+  return x >= rect.x0 && x <= rect.x1 && y >= rect.y0 && y <= rect.y1;
+}
+function isClick(a, b, min = 4) {
+  return Math.abs(a.x - b.x) < min && Math.abs(a.y - b.y) < min;
+}
+function defaultBrush(xDomain, yDomain) {
+  const middle = (domain) => {
+    const lo = Math.min(...domain);
+    const span = Math.max(...domain) - lo;
+    return [lo + span * 0.25, lo + span * 0.75];
+  };
+  const [x0, x1] = middle(xDomain);
+  const [y0, y1] = middle(yDomain);
+  return { x0, x1, y0, y1 };
+}
+const STEP = 0.05;
+function shift(lo, hi, delta, dLo, dHi) {
+  const size = hi - lo;
+  const start = clamp(lo + delta, dLo, dHi - size);
+  return [start, start + size];
+}
+function resize(lo, hi, delta, min, dHi) {
+  return [lo, clamp(hi + delta, Math.min(dHi, lo + min), dHi)];
+}
+function stepBrush(rect, key, grow, xDomain, yDomain, fraction = STEP) {
+  const [xLo, xHi] = [Math.min(...xDomain), Math.max(...xDomain)];
+  const [yLo, yHi] = [Math.min(...yDomain), Math.max(...yDomain)];
+  const dx = (xHi - xLo) * fraction;
+  const dy = (yHi - yLo) * fraction;
+  const horizontal = key === "ArrowLeft" || key === "ArrowRight";
+  const sign = key === "ArrowRight" || key === "ArrowUp" ? 1 : -1;
+  if (horizontal) {
+    const [x0, x1] = grow ? resize(rect.x0, rect.x1, sign * dx, dx, xHi) : shift(rect.x0, rect.x1, sign * dx, xLo, xHi);
+    return { ...rect, x0, x1 };
+  }
+  const [y0, y1] = grow ? resize(rect.y0, rect.y1, sign * dy, dy, yHi) : shift(rect.y0, rect.y1, sign * dy, yLo, yHi);
+  return { ...rect, y0, y1 };
+}
+const TOUCH_BRUSH_DELAY = 350;
+const TOUCH_SLOP = 10;
+function touchIntent(from, to, elapsed, delay = TOUCH_BRUSH_DELAY, slop = TOUCH_SLOP) {
+  if (elapsed >= delay) return "brush";
+  return Math.hypot(to.x - from.x, to.y - from.y) > slop ? "scroll" : "wait";
+}
+export {
+  TOUCH_BRUSH_DELAY,
+  clampRect,
+  defaultBrush,
+  isClick,
+  rangesToRect,
+  rectContains,
+  rectFromCorners,
+  rectToRanges,
+  stepBrush,
+  touchIntent
+};

package/dist/charts/core/distribution/dot-stack.d.ts

@@ -0,0 +1,39 @@
+export interface DotPosition {
+    /** Pixels from the left edge of the lane to the dot centre. */
+    x: number;
+    /** Pixels above the baseline to the dot centre. */
+    y: number;
+}
+export interface DotStack {
+    radius: number;
+    dots: DotPosition[];
+}
+export interface DotStackInput {
+    /** Observations in the bin. */
+    count: number;
+    /** Lane width in pixels. */
+    width: number;
+    /** Height in pixels the stack should fit (the bar it replaces). */
+    height: number;
+}
+export interface DotStackOptions {
+    maxRadius?: number;
+    minRadius?: number;
+    /** Space between neighbours in pixels (default 1). */
+    gap?: number;
+}
+/** Largest radius at which `count` dots fit a `width` x `height` box, or the minimum radius. */
+export declare function fitRadius(input: DotStackInput, options?: DotStackOptions): number;
+/**
+ * Dot-plot stack for one bin: dots fill rows from the baseline up, each row
+ * centred in the lane. A row never exceeds the lane width.
+ */
+export declare function packDots(count: number, width: number, radius: number, gap?: number): DotPosition[];
+/**
+ * Stacks for every bin with one shared radius (the smallest that makes the
+ * fullest bin fit), so all the dots of a histogram look alike.
+ */
+export declare function explodeBins(bins: readonly DotStackInput[], options?: DotStackOptions): {
+    radius: number;
+    stacks: DotPosition[][];
+};