@siyahi/ui 0.1.9-next.3 → 0.1.9-next.30

package/dist/lib/chart-marks.d.ts

@@ -0,0 +1,83 @@
+import { ChartSeries } from "./chart-series.js";
+//#region src/lib/chart-marks.d.ts
+/** The colour a series takes when it is one of many drawn quietly behind the few a page names in colour. */
+export declare const QUIET = "var(--muted-foreground)";
+/** Quiet series first, so the named ones draw over them; otherwise the page's order. */
+export declare function drawOrder<T>(series: ChartSeries<T>): ChartSeries<T>;
+/** Room the names need right of the plot: the widest name as drawn, after its leader and colour square. */
+export declare function endLabelRoom(names: readonly string[]): number;
+/**
+ * Whether every line ends on the plot's right edge: each series has a value in the last row, there is more than one
+ * row, and a numeric x axis runs no further than the data. A line that stops short would need a long leader across
+ * the others to reach its name, so the chart keeps its legend then.
+ */
+export declare function linesEndAtEdge<T extends object, K extends keyof T>(data: readonly T[], xKey: K, series: ChartSeries<T>, xDomain?: readonly [number, number]): boolean;
+/**
+ * Whether the names fit at the line ends: a card at least 400px wide, names taking at most 30% of it, and a plot
+ * tall enough to hold them all 14px apart. Otherwise the chart keeps its legend below.
+ */
+export declare function endLabelsFit(names: readonly string[], width: number, plotHeight: number): boolean;
+/** A series' line end, in pixels, and the name it carries there. */
+export interface LineEnd {
+  /** The series' key: names can repeat, keys cannot. */
+  id: string;
+  name: string;
+  color: string;
+  x: number;
+  y: number;
+  /** A quiet (grey) series: its name is muted, with no colour square; its place says which line it is. */
+  quiet: boolean;
+}
+/** A name placed in the gutter right of the plot. */
+export interface PlacedEnd extends LineEnd {
+  /** The level it sits at, after names that would collide are spread apart. */
+  at: number;
+  /** The plot's right edge, where every name starts, whichever point its line ends on. */
+  gutter: number;
+  /** A leader joins the name to its line's end: moved off the end's level, or the line ends short of the edge. */
+  leader: boolean;
+}
+/** The part of the chart the series are drawn in, as Recharts' usePlotArea gives it. */
+export interface PlotBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+/**
+ * Where each name goes: every line's name at its end's level, spread to 14px apart, top to bottom, pushed back up
+ * from the plot's foot and never above its top. A point that maps to no number (a scale being replaced) is left out.
+ */
+export declare function placeEnds(lines: readonly LineEnd[], plot: PlotBox): PlacedEnd[];
+interface EndLabelsProps<T extends object, K extends keyof T> {
+  data: readonly T[];
+  xKey: K;
+  series: ChartSeries<T>;
+}
+/**
+ * Each series' name in the gutter right of the plot, in the text colour beside a square of the line's colour, in
+ * place of a legend the reader has to match colours against. A leader joins each name to its line's end where the
+ * name was moved off the end's level or the line ends short of the plot's edge. A quiet (grey) series' name is
+ * muted, with no square: its place beside its line's end says which line it is.
+ */
+export declare function EndLabels<T extends object, K extends keyof T>({ data, xKey, series }: EndLabelsProps<T, K>): import("react").JSX.Element | null;
+interface TimeMarksProps<T extends object, K extends keyof T> {
+  data: readonly T[];
+  xKey: K;
+  /** The x value from which the data is a forecast. */
+  forecastFrom?: T[K];
+  /** The x value of today. */
+  today?: T[K];
+  /** Prefix of the clip paths the series' actual and forecast copies use (`<id>-actual`, `<id>-forecast`). */
+  clipId: string;
+  /** Hatch the forecast stretch; a stack's fills already cover it, so a stacked chart only labels it. */
+  hatch: boolean;
+}
+/**
+ * A forecast stretch, from forecastFrom to the last point: a faint hatched band labelled FORECAST behind the lines,
+ * and the clip paths that keep each line solid before it and dashed after. And a "today" rule: 1px in the link
+ * colour with a small mono capital label.
+ */
+export declare function TimeMarks<T extends object, K extends keyof T>({ data, xKey, forecastFrom, today, clipId, hatch }: TimeMarksProps<T, K>): import("react").JSX.Element | null;
+//#endregion
+export {};

package/dist/lib/chart-marks.js

@@ -0,0 +1,216 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { usePlotArea, useXAxisScale, useYAxisScale } from "recharts";
+//#region src/lib/chart-marks.tsx
+/** The colour a series takes when it is one of many drawn quietly behind the few a page names in colour. */
+const QUIET = "var(--muted-foreground)";
+/** Quiet series first, so the named ones draw over them; otherwise the page's order. */
+function drawOrder(series) {
+	return [...series.filter(({ color }) => color === QUIET), ...series.filter(({ color }) => color !== QUIET)];
+}
+const NAME_START = 24;
+const NAME_FONT = "500 11px \"Geist Variable\", \"Geist Fallback\", ui-sans-serif, sans-serif";
+const NAME_WIDTH_GUESS = 7.5;
+const NAME_GAP = 14;
+let measure;
+/** A name's width as the browser draws it, measured on a canvas; a wide guess where there is none. */
+function nameWidth(name) {
+	if (measure === void 0) measure = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+	if (!measure) return name.length * NAME_WIDTH_GUESS;
+	measure.font = NAME_FONT;
+	return measure.measureText(name).width;
+}
+/** Room the names need right of the plot: the widest name as drawn, after its leader and colour square. */
+function endLabelRoom(names) {
+	return Math.ceil(NAME_START + Math.max(0, ...names.map(nameWidth)) + 8);
+}
+/**
+* Whether every line ends on the plot's right edge: each series has a value in the last row, there is more than one
+* row, and a numeric x axis runs no further than the data. A line that stops short would need a long leader across
+* the others to reach its name, so the chart keeps its legend then.
+*/
+function linesEndAtEdge(data, xKey, series, xDomain) {
+	const last = data.at(-1);
+	if (!last || data.length < 2) return false;
+	if (xDomain && Number(last[xKey]) < xDomain[1]) return false;
+	return series.every(({ key }) => Number.isFinite(last[key]));
+}
+const END_LABELS_MIN_WIDTH = 400;
+/**
+* Whether the names fit at the line ends: a card at least 400px wide, names taking at most 30% of it, and a plot
+* tall enough to hold them all 14px apart. Otherwise the chart keeps its legend below.
+*/
+function endLabelsFit(names, width, plotHeight) {
+	return width >= END_LABELS_MIN_WIDTH && endLabelRoom(names) <= width * .3 && (names.length - 1) * NAME_GAP + 12 <= plotHeight;
+}
+/**
+* Where each name goes: every line's name at its end's level, spread to 14px apart, top to bottom, pushed back up
+* from the plot's foot and never above its top. A point that maps to no number (a scale being replaced) is left out.
+*/
+function placeEnds(lines, plot) {
+	const gutter = plot.x + plot.width;
+	const ends = [];
+	for (const end of lines) if (Number.isFinite(end.x) && Number.isFinite(end.y)) ends.push({
+		...end,
+		at: end.y,
+		gutter,
+		leader: false
+	});
+	ends.sort((a, b) => a.y - b.y);
+	let previous = -Infinity;
+	for (const end of ends) {
+		end.at = Math.max(end.y, previous + NAME_GAP);
+		previous = end.at;
+	}
+	let limit = plot.y + plot.height;
+	for (const end of ends.toReversed()) {
+		end.at = Math.min(end.at, limit);
+		limit = end.at - NAME_GAP;
+	}
+	for (const end of ends) {
+		end.at = Math.max(end.at, plot.y + 4);
+		end.leader = Math.abs(end.at - end.y) > 3 || end.x < gutter - 1;
+	}
+	return ends;
+}
+/**
+* Each series' name in the gutter right of the plot, in the text colour beside a square of the line's colour, in
+* place of a legend the reader has to match colours against. A leader joins each name to its line's end where the
+* name was moved off the end's level or the line ends short of the plot's edge. A quiet (grey) series' name is
+* muted, with no square: its place beside its line's end says which line it is.
+*/
+function EndLabels({ data, xKey, series }) {
+	const xScale = useXAxisScale();
+	const yScale = useYAxisScale();
+	const plot = usePlotArea();
+	if (!xScale || !yScale || !plot) return null;
+	const lines = [];
+	for (const { key, label, color } of series) {
+		const row = data.findLast((candidate) => Number.isFinite(candidate[key]));
+		const x = row && xScale(row[xKey]);
+		const y = row && yScale(row[key]);
+		if (x !== void 0 && y !== void 0) lines.push({
+			id: String(key),
+			name: label,
+			color,
+			x,
+			y,
+			quiet: color === QUIET
+		});
+	}
+	return /* @__PURE__ */ jsx("g", {
+		"data-slot": "end-labels",
+		children: placeEnds(lines, plot).map(({ gutter, ...end }) => /* @__PURE__ */ jsxs("g", { children: [
+			end.leader && /* @__PURE__ */ jsx("polyline", {
+				points: `${end.x + 4},${end.y} ${Math.max(end.x + 4, gutter) + 6},${end.at}`,
+				fill: "none",
+				stroke: end.color,
+				strokeOpacity: .55
+			}),
+			!end.quiet && /* @__PURE__ */ jsx("rect", {
+				x: gutter + 13,
+				y: end.at - 3.5,
+				width: 7,
+				height: 7,
+				fill: end.color
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: gutter + (end.quiet ? 13 : NAME_START),
+				y: end.at + 4,
+				className: end.quiet ? "fill-muted-foreground text-2xs" : "fill-foreground text-2xs font-medium",
+				children: end.name
+			})
+		] }, end.id))
+	});
+}
+const MARK_LABEL = "stroke-card font-mono text-2xs uppercase";
+const HALO = {
+	paintOrder: "stroke",
+	strokeWidth: 3,
+	strokeLinejoin: "round"
+};
+/**
+* A forecast stretch, from forecastFrom to the last point: a faint hatched band labelled FORECAST behind the lines,
+* and the clip paths that keep each line solid before it and dashed after. And a "today" rule: 1px in the link
+* colour with a small mono capital label.
+*/
+function TimeMarks({ data, xKey, forecastFrom, today, clipId, hatch }) {
+	const xScale = useXAxisScale();
+	const plot = usePlotArea();
+	if (!xScale || !plot) return null;
+	const top = plot.y;
+	const bottom = plot.y + plot.height;
+	const cut = forecastFrom === void 0 ? void 0 : xScale(forecastFrom);
+	const last = data.at(-1);
+	const end = (last && xScale(last[xKey])) ?? plot.x + plot.width;
+	const now = today === void 0 ? void 0 : xScale(today);
+	return /* @__PURE__ */ jsxs("g", {
+		"data-slot": "time-marks",
+		children: [cut !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("defs", { children: [
+				/* @__PURE__ */ jsx("clipPath", {
+					id: `${clipId}-actual`,
+					children: /* @__PURE__ */ jsx("rect", {
+						x: -1e4,
+						y: -1e4,
+						width: cut + 1e4,
+						height: 2e4
+					})
+				}),
+				/* @__PURE__ */ jsx("clipPath", {
+					id: `${clipId}-forecast`,
+					children: /* @__PURE__ */ jsx("rect", {
+						x: cut,
+						y: -1e4,
+						width: 2e4,
+						height: 2e4
+					})
+				}),
+				/* @__PURE__ */ jsx("pattern", {
+					id: `${clipId}-hatch`,
+					width: 7,
+					height: 7,
+					patternUnits: "userSpaceOnUse",
+					patternTransform: "rotate(45)",
+					children: /* @__PURE__ */ jsx("line", {
+						x1: 0,
+						y1: 0,
+						x2: 0,
+						y2: 7,
+						stroke: "var(--foreground)",
+						strokeOpacity: .16
+					})
+				})
+			] }),
+			hatch && /* @__PURE__ */ jsx("rect", {
+				x: cut,
+				y: top,
+				width: Math.max(0, end - cut),
+				height: plot.height,
+				fill: `url(#${clipId}-hatch)`
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: end - 4,
+				y: top + 12,
+				textAnchor: "end",
+				className: `${MARK_LABEL} fill-muted-foreground`,
+				style: HALO,
+				children: "Forecast"
+			})
+		] }), now !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("line", {
+			x1: now,
+			x2: now,
+			y1: top,
+			y2: bottom,
+			stroke: "var(--link)"
+		}), /* @__PURE__ */ jsx("text", {
+			x: now - 5,
+			y: top + 12,
+			textAnchor: "end",
+			className: `${MARK_LABEL} fill-link`,
+			style: HALO,
+			children: "Today"
+		})] })]
+	});
+}
+//#endregion
+export { EndLabels, QUIET, TimeMarks, drawOrder, endLabelRoom, endLabelsFit, linesEndAtEdge, placeEnds };

package/dist/lib/chart-series.d.ts

@@ -1,3 +1,4 @@
+import { AxisScale } from "./ticks.js";
 import { ReactNode } from "react";
 //#region src/lib/chart-series.d.ts
 /**
@@ -6,7 +7,7 @@ import { ReactNode } from "react";
  */
 export type ChartColor = "var(--chart-1)" | "var(--chart-2)" | "var(--chart-3)" | "var(--chart-4)" | "var(--chart-5)" | "var(--muted-foreground)" | "var(--positive)" | "var(--negative)";
 /** The fields of a row that hold numbers: the ones a series can plot. */
-type NumericKey<T> = { [K in keyof T]-?: T[K] extends number | null | undefined ? K : never; }[keyof T] & string;
+export type NumericKey<T> = { [K in keyof T]-?: T[K] extends number | null | undefined ? K : never; }[keyof T] & string;
 /** One series: the field it plots, its name in the legend and tooltip, and its colour. */
 export interface ChartSeriesItem<T> {
   key: NumericKey<T>;
@@ -49,21 +50,29 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   /** The field the x axis reads: a month, an hour of day, a price bucket. One row per value; a repeated value is hidden behind the first. */
   xKey: K;
   series: ChartSeries<NoInfer<T>>;
+  /** Categories to label, or tick positions with xDomain. Every named tick is drawn; other rows keep their marks and tooltips. */
+  xTicks?: readonly T[K][];
   /** The x axis ticks, and the tooltip's heading unless xTooltipFormatter is set. Defaults to the value as text. */
   xFormatter?: (value: T[K]) => string;
   /** The tooltip's heading, when it should say more than a tick: "19:34:13 IST, 10 s average" against "19:34". */
   xTooltipFormatter?: (value: T[K]) => string;
   /** A series' value in the tooltip, and the y axis unless yTickFormatter is set. Defaults to the locale's numbers. */
   valueFormatter?: (value: number) => string;
-  /** The y axis, when its ticks should be shorter than the tooltip's figures: moneyCompact against money. */
-  yTickFormatter?: (value: number) => string;
-  /** A fixed range for the value axis, such as [0, 100] for a percentage; by default it fits the data. */
+  /**
+   * The y axis, when its ticks should be shorter than the tooltip's figures: moneyCompact against money. It gets the
+   * axis' largest tick as `scale`, so moneyCompact writes every tick in one unit.
+   */
+  yTickFormatter?: (value: number, scale: number) => string;
+  /**
+   * A fixed range for the value axis, such as [0, 100] for a percentage. By default it fits the data; a bar
+   * chart's always reaches zero.
+   */
   yDomain?: [number, number];
   /** Where the value axis puts its ticks, such as [0, 25, 50, 75, 100]. */
   yTicks?: readonly number[];
-  /** Height of the plot and legend, in pixels. */
+  /** Height of the plot and legend, in pixels. Sideways bars grow when wrapped tick details need more room. */
   height: number;
-  /** A second line under each x tick, so a row's figure reads without a hover: "FY24" then "▲₹1.2L". */
+  /** A second line under each x tick, so a row's figure reads without a hover: "FY24" then "+₹1.2L". */
   xTickDetail?: (row: T) => string;
   /** A title under the x axis, such as "Hour of day (IST)". Not drawn on sideways bars. */
   xLabel?: string;
@@ -75,18 +84,41 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   placeholder?: ReactNode;
   /** Lines under the chart, such as a caption or a takeaway, in the card's footer. */
   footer?: ReactNode;
+  /**
+   * Marks the data as old, with since when, such as "3 Nov": the chart greys out and a small "Stale · 3 Nov" note
+   * sits under the title. The page decides; nothing is inferred from dates.
+   */
+  stale?: ReactNode;
+}
+/** What a chart of lines takes, LineChartCard and AreaChartCard: a forecast stretch and today. */
+export interface LineMarksProps<T extends object, K extends keyof T> {
+  /**
+   * The x value from which the data is a forecast, such as the last month-end: each line goes dashed from it, a faint
+   * hatched band labelled FORECAST covers the stretch, and the end dots are hollow.
+   */
+  forecastFrom?: NoInfer<T[K]>;
+  /** The x value of today: a 1px rule in the link colour with a small TODAY label. */
+  today?: NoInfer<T[K]>;
 }
 /** A numeric x axis, for samples in time or any measure where a mark can sit between two rows. */
 export interface NumericXProps {
   /** The x axis runs over this range of the xKey field, which must hold numbers; without it the axis is one slot per row. */
   xDomain?: [number, number];
-  /** Where the x axis puts its ticks, in the xKey field's units; give xDomain with it, so the axis is numeric. */
-  xTicks?: readonly number[];
+}
+/** A value axis that may run on a log scale: lines and areas, which need not start at zero as bars must. */
+export interface ValueScaleProps {
+  /**
+   * "log" spreads values across powers of ten, for values that run from tiny to large; the first selection when
+   * yScaleToggle is set. Log draws only when every value, and yDomain, is above zero; otherwise the axis is linear.
+   * On log the axis ticks at 1, 2 and 5 inside yDomain, if given, and yTicks is not used.
+   */
+  yScale?: AxisScale;
+  /** Linear and Log buttons for the value axis in the header, after the action, so a reader can switch. */
+  yScaleToggle?: boolean;
 }
 /**
  * How a line or an area's edge joins its points: "linear" draws straight segments, as measured samples should
  * be drawn; "monotone", the default, smooths between them without overshooting a point.
  */
 export type ChartCurve = "monotone" | "linear";
-//#endregion
-export {};
+//#endregion

package/dist/lib/compact-columns.d.ts

@@ -0,0 +1,19 @@
+import { DataTableColumnDef } from "../components/registry/niko-table/types/index.js";
+import { ColumnVisibilityState, RowData } from "@tanstack/react-table";
+//#region src/lib/compact-columns.d.ts
+/** Reports the element's inner width whenever it changes. */
+export declare function useTableWidth(element: HTMLElement | null, onChange: (width: number) => void): void;
+/** Narrower than 40rem, the width a phone gives a table: freezing is suspended and toolbars fold. */
+export declare function isCompactWidth(width: number): boolean;
+export interface FittedColumns {
+  /** The caller's visibility with the columns that do not fit turned off. */
+  visibility: ColumnVisibilityState;
+  /** The columns turned off to fit; empty when everything fits. */
+  hidden: ReadonlySet<string>;
+}
+/**
+ * Which columns to hide so the table fits `width`: the rightmost columns without `meta.compact` go first. Null
+ * when no column sets `meta.compact`, so a table that never opted in keeps every column and scrolls.
+ */
+export declare function fitColumns<TData extends RowData>(columns: DataTableColumnDef<TData>[], order: string[], visibility: ColumnVisibilityState, width: number): FittedColumns | null;
+//#endregion

package/dist/lib/compact-columns.js

@@ -0,0 +1,55 @@
+import React from "react";
+//#region src/lib/compact-columns.ts
+const DEFAULT_SIZE = 150;
+/** Reports the element's inner width whenever it changes. */
+function useTableWidth(element, onChange) {
+	React.useLayoutEffect(() => {
+		if (!element) return;
+		const measure = () => {
+			if (element.clientWidth > 0) onChange(element.clientWidth);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [element, onChange]);
+}
+/** Narrower than 40rem, the width a phone gives a table: freezing is suspended and toolbars fold. */
+function isCompactWidth(width) {
+	if (width <= 0) return false;
+	return width < 40 * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+function columnId(column) {
+	if (column.id) return column.id;
+	const key = column.accessorKey;
+	return typeof key === "string" ? key.replaceAll(".", "_") : void 0;
+}
+/**
+* Which columns to hide so the table fits `width`: the rightmost columns without `meta.compact` go first. Null
+* when no column sets `meta.compact`, so a table that never opted in keeps every column and scrolls.
+*/
+function fitColumns(columns, order, visibility, width) {
+	if (width <= 0 || !columns.some((column) => column.meta?.compact)) return null;
+	const byId = new Map(columns.flatMap((column) => {
+		const id = columnId(column);
+		return id ? [[id, column]] : [];
+	}));
+	const shown = [...order.filter((id) => byId.has(id)), ...[...byId.keys()].filter((id) => !order.includes(id))].filter((id) => visibility[id] !== false);
+	let total = shown.reduce((sum, id) => sum + (byId.get(id)?.size ?? DEFAULT_SIZE), 0);
+	const hidden = /* @__PURE__ */ new Set();
+	for (const id of shown.toReversed()) {
+		if (total <= width) break;
+		const column = byId.get(id);
+		if (column?.meta?.compact) continue;
+		hidden.add(id);
+		total -= column?.size ?? DEFAULT_SIZE;
+	}
+	const fitted = { ...visibility };
+	for (const id of hidden) fitted[id] = false;
+	return {
+		visibility: fitted,
+		hidden
+	};
+}
+//#endregion
+export { fitColumns, isCompactWidth, useTableWidth };

package/dist/lib/fit-text.d.ts

@@ -0,0 +1,6 @@
+//#region src/lib/fit-text.d.ts
+/** About how wide a text-xs label draws, in pixels. */
+export declare const textWidth: (text: string) => number;
+/** The label, cut with an ellipsis when it would draw wider than `width` pixels at text-xs. */
+export declare function fit(text: string, width: number): string;
+//#endregion

package/dist/lib/fit-text.js

@@ -0,0 +1,11 @@
+//#region src/lib/fit-text.ts
+const CHAR_PX = 6.6;
+/** About how wide a text-xs label draws, in pixels. */
+const textWidth = (text) => text.length * CHAR_PX;
+/** The label, cut with an ellipsis when it would draw wider than `width` pixels at text-xs. */
+function fit(text, width) {
+	const room = Math.floor(width / CHAR_PX);
+	return text.length <= room ? text : `${text.slice(0, Math.max(room - 1, 1)).trimEnd()}…`;
+}
+//#endregion
+export { fit, textWidth };

package/dist/lib/format.d.ts

@@ -6,9 +6,13 @@ export declare function money(value: number, locale?: SiyahiLocale, fractionDigi
  * A short amount: ₹2.4L and ₹40Cr in en-IN, $2.4M in en-US. Indian readers
  * count in thousands up to a lakh, so in an Indian-region locale amounts under
  * one lakh print in full (₹99,999), never as ₹99.9K. Signed figures belong in
- * `Delta`, which adds the arrow.
+ * `Delta`, which adds the sign and a trend icon.
+ *
+ * Give `scale`, the largest amount on the same axis, and every tick takes that
+ * amount's unit, to two decimals so close ticks stay apart: ₹1.5L, ₹0.75L,
+ * ₹0, rather than switching to ₹75,000 halfway up.
  */
-export declare function moneyCompact(value: number, locale?: SiyahiLocale): string;
+export declare function moneyCompact(value: number, locale?: SiyahiLocale, scale?: number): string;
 /** A whole count with the locale's grouping: 1,53,110 in en-IN. */
 export declare function count(value: number, locale?: SiyahiLocale): string;
 /** A fraction as a percentage: 0.1234 is 12.3%. */
@@ -22,7 +26,8 @@ export declare function time(value: Date | number | string, locale?: SiyahiLocal
 export interface Formatters {
   count: (value: number) => string;
   money: (value: number, fractionDigits?: number) => string;
-  moneyCompact: (value: number) => string;
+  /** Pass `scale` on an axis so every tick shares one unit; a chart's yTickFormatter gets it as its second argument. */
+  moneyCompact: (value: number, scale?: number) => string;
   pct: (value: number, fractionDigits?: number) => string;
   time: (value: Date | number | string, options?: TimeOptions) => string;
 }

package/dist/lib/format.js

@@ -2,37 +2,69 @@ import { defaultLocale } from "./locale.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { useMemo } from "react";
 //#region src/lib/format.ts
+const numbers = /* @__PURE__ */ new Map();
+const clocks = /* @__PURE__ */ new Map();
+const regions = /* @__PURE__ */ new Map();
+function numberFormat(locale, options) {
+	const key = JSON.stringify([locale, options]);
+	let formatter = numbers.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, options);
+		numbers.set(key, formatter);
+	}
+	return formatter;
+}
 /** An amount in the locale's currency, whole units by default: ₹1,53,110. Signed figures belong in `Delta`. */
 function money(value, locale = defaultLocale, fractionDigits = 0) {
-	return new Intl.NumberFormat(locale.numberLocale, {
+	return numberFormat(locale.numberLocale, {
 		style: "currency",
 		currency: locale.currency,
 		minimumFractionDigits: fractionDigits,
 		maximumFractionDigits: fractionDigits
 	}).format(value);
 }
+const DIGITS = /* @__PURE__ */ new Set(["integer", "fraction"]);
+const NUMBER = /* @__PURE__ */ new Set([
+	"integer",
+	"group",
+	"decimal",
+	"fraction"
+]);
 /**
 * A short amount: ₹2.4L and ₹40Cr in en-IN, $2.4M in en-US. Indian readers
 * count in thousands up to a lakh, so in an Indian-region locale amounts under
 * one lakh print in full (₹99,999), never as ₹99.9K. Signed figures belong in
-* `Delta`, which adds the arrow.
+* `Delta`, which adds the sign and a trend icon.
+*
+* Give `scale`, the largest amount on the same axis, and every tick takes that
+* amount's unit, to two decimals so close ticks stay apart: ₹1.5L, ₹0.75L,
+* ₹0, rather than switching to ₹75,000 halfway up.
 */
-function moneyCompact(value, locale = defaultLocale) {
-	if (new Intl.Locale(locale.numberLocale).region === "IN" && Math.abs(value) < 1e5) return money(value, locale);
-	return new Intl.NumberFormat(locale.numberLocale, {
+function moneyCompact(value, locale = defaultLocale, scale) {
+	if (!regions.has(locale.numberLocale)) regions.set(locale.numberLocale, new Intl.Locale(locale.numberLocale).region);
+	if (regions.get(locale.numberLocale) === "IN" && (scale ?? Math.abs(value)) < 1e5) return money(value, locale);
+	const compact = numberFormat(locale.numberLocale, {
 		style: "currency",
 		currency: locale.currency,
 		notation: "compact",
 		maximumFractionDigits: 1
-	}).format(value);
+	});
+	if (scale === void 0 || value === 0) return compact.format(value);
+	const parts = compact.formatToParts(Math.sign(value) * scale);
+	const shown = Number(parts.flatMap((part) => part.type === "decimal" ? "." : DIGITS.has(part.type) ? part.value : []).join(""));
+	const unit = 10 ** Math.round(Math.log10(scale / shown));
+	if (unit === 1) return compact.format(value);
+	const digits = numberFormat(locale.numberLocale, { maximumFractionDigits: 2 }).format(Math.abs(value) / unit);
+	const first = parts.findIndex((part) => part.type === "integer");
+	return parts.flatMap((part, index) => index === first ? digits : NUMBER.has(part.type) ? [] : part.value).join("");
 }
 /** A whole count with the locale's grouping: 1,53,110 in en-IN. */
 function count(value, locale = defaultLocale) {
-	return new Intl.NumberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
+	return numberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
 }
 /** A fraction as a percentage: 0.1234 is 12.3%. */
 function pct(value, locale = defaultLocale, fractionDigits = 1) {
-	return new Intl.NumberFormat(locale.numberLocale, {
+	return numberFormat(locale.numberLocale, {
 		style: "percent",
 		minimumFractionDigits: fractionDigits,
 		maximumFractionDigits: fractionDigits
@@ -40,19 +72,25 @@ function pct(value, locale = defaultLocale, fractionDigits = 1) {
 }
 /** A 24-hour time in the locale's zone, with the zone written: 14:30 IST. */
 function time(value, locale = defaultLocale, { withDate = false } = {}) {
-	const date = withDate ? {
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	} : {};
-	return new Intl.DateTimeFormat(locale.numberLocale, {
-		...date,
+	const options = {
+		...withDate ? {
+			day: "numeric",
+			month: "short",
+			year: "numeric"
+		} : {},
 		hour: "2-digit",
 		minute: "2-digit",
 		hourCycle: "h23",
 		timeZone: locale.timeZone,
 		timeZoneName: "short"
-	}).format(new Date(value));
+	};
+	const key = JSON.stringify([locale.numberLocale, options]);
+	let formatter = clocks.get(key);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale.numberLocale, options);
+		clocks.set(key, formatter);
+	}
+	return formatter.format(new Date(value));
 }
 /** The formatters above, bound to the locale of the nearest `SiyahiProvider`. */
 function useFormat() {
@@ -60,7 +98,7 @@ function useFormat() {
 	return useMemo(() => ({
 		count: (value) => count(value, locale),
 		money: (value, fractionDigits) => money(value, locale, fractionDigits),
-		moneyCompact: (value) => moneyCompact(value, locale),
+		moneyCompact: (value, scale) => moneyCompact(value, locale, scale),
 		pct: (value, fractionDigits) => pct(value, locale, fractionDigits),
 		time: (value, options) => time(value, locale, options)
 	}), [locale]);

package/dist/lib/heat.d.ts

@@ -0,0 +1,7 @@
+//#region src/lib/heat.d.ts
+export declare const HEAT_STEPS = 5;
+/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
+export declare const heatRange: (range?: number) => number;
+export declare const heatFill: (side: "positive" | "negative", step: number) => string;
+export declare function heat(change: number | null, range?: number): string;
+//#endregion

package/dist/lib/heat.js

@@ -0,0 +1,14 @@
+//#region src/lib/heat.ts
+/** The signed heat scale a Treemap tile and a ChangeGrid cell share: five steps of gain or loss mixed into the card. */
+const DEFAULT_RANGE = .05;
+const HEAT_STEPS = 5;
+/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
+const heatRange = (range = DEFAULT_RANGE) => Number.isFinite(range) && range > 0 ? range : DEFAULT_RANGE;
+const heatFill = (side, step) => `color-mix(in oklab, var(--${side}) var(--heat-${step}), var(--card))`;
+function heat(change, range) {
+	if (!change || !Number.isFinite(change)) return "var(--muted)";
+	const step = Math.min(5, Math.ceil(Math.abs(change) / heatRange(range) * 5));
+	return heatFill(change > 0 ? "positive" : "negative", step);
+}
+//#endregion
+export { HEAT_STEPS, heat, heatFill, heatRange };