@siyahi/ui 0.1.9-next.2 → 0.1.9-next.21

package/dist/lib/chart-frame.js

@@ -1,12 +1,36 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card.js";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "../components/ui/chart.js";
+import { cn } from "./utils.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
+import { useMemo } from "react";
+import { CartesianGrid, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAxisTicks, useYAxisTicks } from "recharts";
 //#region src/lib/chart-frame.tsx
 const AXIS_TITLE = "fill-muted-foreground text-xs";
 const TICK = { className: "fill-muted-foreground font-mono" };
 const NO_LINES = [];
+/**
+* The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
+* zero, since each bar's own Cell follows its sign but the chip follows the Bar.
+*/
+function seriesFill(item, data) {
+	const values = data.map((row) => row[item.key]).filter((value) => Number.isFinite(value)).map(Number);
+	return item.negativeColor && values.length > 0 && values.every((value) => value < 0) ? item.negativeColor : item.color;
+}
+/**
+* A Line or Area's dots: one solid dot on the latest point, ringed in the card's colour so it stands clear of the
+* grid, and none elsewhere. The eye lands on now, where a reader starts.
+*/
+function endDot(color, count) {
+	return ({ cx, cy, index }) => index === count - 1 && cx !== void 0 && cy !== void 0 ? /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: 4,
+		fill: color,
+		stroke: "var(--card)",
+		strokeWidth: 2
+	}, "end") : /* @__PURE__ */ jsx("g", {}, index);
+}
 /** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
 function seriesRow(series, formatValue) {
 	return (value, _name, item) => {
@@ -28,170 +52,270 @@ function seriesRow(series, formatValue) {
 		] });
 	};
 }
-const CHAR_WIDTH = 6.6;
-/** Squeezes a line into its column with SVG's own textLength when it would run into the next one. */
-const fitTo = (text, room) => room > 0 && text.length * CHAR_WIDTH > room ? {
-	textLength: room,
-	lengthAdjust: "spacingAndGlyphs"
-} : {};
 /**
-* An x tick with a second line from its row. Under a column the lines hang below the axis; beside a horizontal
-* bar they straddle its middle. Both lines are set in Geist, not Mono: a name with a figure under it reads as a
-* label, as in BarList, and sector names in Mono would take most of a phone's width.
+* A value-axis tick formatted against the axis' largest tick, so every label shares one unit: ₹1.6L down to ₹0.4L,
+* never ₹80,000 halfway up. Recharts' tickFormatter sees one value at a time; the axis' ticks come from its hooks.
+* The rest of Recharts' tick props pass on as its own tick does, including the class it measures an auto width by.
+*/
+function ValueTick({ payload, axis, formatter, ...tick }) {
+	const xTicks = useXAxisTicks();
+	const yTicks = useYAxisTicks();
+	const value = Number(payload?.value);
+	const scale = Math.max(Math.abs(value), ...((axis === "x" ? xTicks : yTicks) ?? []).map((t) => Math.abs(Number(t.value))));
+	return /* @__PURE__ */ jsx(Text, {
+		...tick,
+		children: formatter(value, scale)
+	});
+}
+const GEIST_WIDTH = 6.6;
+const MONO_WIDTH = 7.2;
+/**
+* Room to keep right of the plot when every named tick is drawn: half the last label, which centres on the
+* domain's right end, and at least 24px.
+*/
+function endRoom(xFormatter, xTicks) {
+	const last = xTicks.at(-1);
+	return Math.max(24, Math.ceil((last === void 0 ? 0 : xFormatter(last).length * MONO_WIDTH) / 2) + 4);
+}
+/**
+* An x tick with a second line or explicit position: Recharts'
+* own ticks would rather drop a label than let it run into the next. With a detail, the second line comes from the
+* tick's row; under a column the lines hang below the axis, and beside a horizontal bar they straddle its middle.
+* A two-line tick is set in Geist, not Mono: a name with a figure under it reads as a label, as in BarList, and
+* sector names in Mono would take most of a phone's width.
 */
-function twoLineTick(data, xKey, xFormatter, detailOf, beside) {
-	return ({ x, y, width, visibleTicksCount, payload }) => {
+function fittedTick(data, xKey, xFormatter, detailOf, beside, labelWidth) {
+	const rows = /* @__PURE__ */ new Map();
+	for (const row of data) if (!rows.has(row[xKey])) rows.set(row[xKey], row);
+	return ({ x, y, payload }) => {
 		const value = payload?.value;
-		const row = data.find((r) => r[xKey] === value);
+		const row = rows.get(value);
 		const name = xFormatter(value);
-		const detail = row ? detailOf(row) : null;
-		const room = beside || !visibleTicksCount ? 0 : Number(width) / visibleTicksCount - 6;
+		const detail = row && detailOf ? detailOf(row) : null;
+		if (beside) return /* @__PURE__ */ jsxs("g", {
+			className: "fill-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Text, {
+				x,
+				y: Number(y) - (detail ? 4 : 0),
+				width: labelWidth,
+				maxLines: 2,
+				textAnchor: "end",
+				verticalAnchor: detail ? "end" : "middle",
+				lineHeight: 14,
+				style: { fontSize: "var(--text-xs)" },
+				"aria-label": name,
+				className: "recharts-cartesian-axis-tick-value fill-muted-foreground",
+				children: name
+			}), detail !== null && /* @__PURE__ */ jsx(Text, {
+				x,
+				y: Number(y) + 4,
+				width: labelWidth,
+				textAnchor: "end",
+				verticalAnchor: "start",
+				lineHeight: 14,
+				style: {
+					fontSize: "var(--text-xs)",
+					fontVariantNumeric: "tabular-nums"
+				},
+				"aria-label": detail,
+				className: "fill-muted-foreground tabular-nums",
+				children: detail
+			})]
+		});
 		return /* @__PURE__ */ jsxs("text", {
 			x,
 			y,
 			textAnchor: beside ? "end" : "middle",
-			className: "recharts-cartesian-axis-tick-value fill-muted-foreground",
+			className: cn("recharts-cartesian-axis-tick-value fill-muted-foreground", !detailOf && "font-mono"),
 			children: [/* @__PURE__ */ jsx("tspan", {
 				x,
-				dy: beside ? -4 : 12,
-				...fitTo(name, room),
+				dy: 12,
 				children: name
 			}), detail !== null && /* @__PURE__ */ jsx("tspan", {
 				x,
 				dy: 15,
 				className: "tabular-nums",
-				...fitTo(detail, room),
 				children: detail
 			})]
 		});
 	};
 }
+function HorizontalAxis({ data, xKey, xFormatter, xTickDetail, xTicks }) {
+	const width = Math.min(240, Math.floor((useChartWidth() ?? 320) * .45));
+	return /* @__PURE__ */ jsx(YAxis, {
+		dataKey: xKey,
+		type: "category",
+		width,
+		tickLine: false,
+		axisLine: false,
+		tickMargin: 8,
+		tickFormatter: xFormatter,
+		interval: 0,
+		ticks: xTicks,
+		tick: fittedTick(data, xKey, xFormatter, xTickDetail, true, width - 16)
+	});
+}
 /**
 * The card, axes, grid, tooltip and legend the three chart cards share. Both
 * axes keep Recharts' default ids: marks find their axes by id, and a page
 * that gave its category axis its own id (dash#88) got a plot split in two
 * and every tooltip headed with the series name instead of the category.
 */
-function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
 	const { numberLocale } = useLocale();
-	const formatValue = valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
+	const formatValue = useMemo(() => valueFormatter ?? new Intl.NumberFormat(numberLocale).format, [valueFormatter, numberLocale]);
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
 		label,
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
+	const detailedRows = horizontal && xTickDetail !== void 0;
+	const rowCount = (xTicks ?? data).length;
+	const plotClass = detailedRows ? "min-h-(--wrapped-chart-height) @min-[24rem]/chart:min-h-0" : void 0;
+	let minWidth;
+	if (!horizontal && (xTicks || xTickDetail)) {
+		const labelledValues = xTicks ?? data.map((row) => row[xKey]);
+		let tickWidth = 0;
+		for (const value of labelledValues) tickWidth = Math.max(tickWidth, xFormatter(value).length * MONO_WIDTH);
+		if (xTickDetail) for (const row of data) tickWidth = Math.max(tickWidth, xTickDetail(row).length * GEIST_WIDTH);
+		minWidth = Math.ceil((tickWidth + 12) * labelledValues.length + 64);
+	}
+	const plotStyle = {
+		height: detailedRows ? Math.max(height, rowCount * 72 + 48) : height,
+		minWidth,
+		...detailedRows ? { "--wrapped-chart-height": `${rowCount * 104 + 48}px` } : {}
+	};
 	return /* @__PURE__ */ jsxs(Card, { children: [
 		/* @__PURE__ */ jsxs(CardHeader, { children: [
 			/* @__PURE__ */ jsx(CardTitle, { children: title }),
 			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
 			action && /* @__PURE__ */ jsx(CardAction, { children: action })
 		] }),
-		/* @__PURE__ */ jsx(CardContent, { children: placeholder ? /* @__PURE__ */ jsx("div", {
-			"data-slot": "chart-placeholder",
-			className: "flex items-center justify-center",
-			style: { height },
-			children: placeholder
-		}) : /* @__PURE__ */ jsx(ChartContainer, {
-			config,
-			className: "aspect-auto w-full",
-			style: { height },
-			children: /* @__PURE__ */ jsxs(Chart, {
-				data,
-				layout: horizontal ? "vertical" : "horizontal",
-				stackOffset,
-				margin: {
-					left: 0,
-					right: 8
-				},
-				children: [
-					/* @__PURE__ */ jsx(CartesianGrid, {
-						vertical: horizontal,
-						horizontal: !horizontal,
-						strokeDasharray: "3 3"
-					}),
-					horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
-						type: "number",
-						hide: true,
-						domain: yDomain,
-						ticks: yTicks
-					}), /* @__PURE__ */ jsx(YAxis, {
-						dataKey: xKey,
-						type: "category",
-						width: "auto",
-						tickLine: false,
-						axisLine: false,
-						tickMargin: 8,
-						tickFormatter: (value) => xFormatter(value),
-						tick: xTickDetail ? twoLineTick(data, xKey, xFormatter, xTickDetail, horizontal) : TICK,
-						interval: 0
-					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
-						dataKey: xKey,
-						type: xDomain ? "number" : "category",
-						domain: xDomain,
-						ticks: xTicks,
-						height: (xTickDetail ? 40 : 30) + (xLabel ? 18 : 0),
-						label: xLabel ? {
-							value: xLabel,
-							position: "insideBottom",
-							className: AXIS_TITLE
-						} : void 0,
-						tickLine: false,
-						axisLine: false,
-						tickMargin: 8,
-						tickFormatter: (value) => xFormatter(value),
-						tick: xTickDetail ? twoLineTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
-						interval: xTickDetail ? 0 : void 0
-					}), /* @__PURE__ */ jsx(YAxis, {
-						tickLine: false,
-						axisLine: false,
-						width: "auto",
-						domain: yDomain,
-						ticks: yTicks,
-						label: yLabel ? {
-							value: yLabel,
-							angle: -90,
-							position: "insideLeft",
-							style: { textAnchor: "middle" },
-							className: AXIS_TITLE
-						} : void 0,
-						tickFormatter: (value) => (yTickFormatter ?? formatValue)(value),
-						tick: TICK
-					})] }),
-					crossesZero && (horizontal ? /* @__PURE__ */ jsx(ReferenceLine, {
-						x: 0,
-						stroke: "var(--border)"
-					}) : /* @__PURE__ */ jsx(ReferenceLine, {
-						y: 0,
-						stroke: "var(--border)"
-					})),
-					referenceLines.map(({ label, emphasis = "muted", labelPosition = "insideTopLeft", ...at }) => /* @__PURE__ */ jsx(ReferenceLine, {
-						...horizontal ? {
-							x: at.y,
-							y: at.x
-						} : at,
-						stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
-						strokeDasharray: at.y === void 0 ? void 0 : "4 4",
-						label: label === void 0 ? void 0 : {
-							value: label,
-							position: labelPosition,
-							className: "fill-muted-foreground text-xs"
-						}
-					}, `${at.x ?? ""}:${at.y ?? ""}:${label ?? ""}`)),
-					/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
-						labelFormatter: (_, payload) => {
-							const row = payload[0]?.payload;
-							return row ? xTooltipFormatter(row[xKey]) : null;
-						},
-						formatter: seriesRow(series, formatValue)
-					}) }),
-					children,
-					/* @__PURE__ */ jsx(ChartLegend, {
-						content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
-						itemSorter: null
-					})
-				]
+		/* @__PURE__ */ jsx(CardContent, {
+			className: "@container/chart overflow-x-auto",
+			role: minWidth ? "region" : void 0,
+			"aria-label": minWidth ? "Chart, scroll horizontally for all labelled values" : void 0,
+			tabIndex: minWidth ? 0 : void 0,
+			children: placeholder ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "chart-placeholder",
+				className: cn("flex items-center justify-center", plotClass),
+				style: plotStyle,
+				children: placeholder
+			}) : /* @__PURE__ */ jsx(ChartContainer, {
+				config,
+				className: cn("aspect-auto w-full", plotClass, onClick && "cursor-pointer"),
+				style: plotStyle,
+				children: /* @__PURE__ */ jsxs(Chart, {
+					data,
+					layout: horizontal ? "vertical" : "horizontal",
+					stackOffset,
+					onClick,
+					throttledEvents: onClick ? [] : void 0,
+					margin: {
+						top: 12,
+						left: 0,
+						right: !horizontal && xTicks ? endRoom(xFormatter, xTicks) : horizontal && yTickFormatter ? 28 : 8
+					},
+					children: [
+						/* @__PURE__ */ jsx(CartesianGrid, {
+							vertical: horizontal,
+							horizontal: !horizontal,
+							strokeDasharray: "3 3"
+						}),
+						horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+							type: "number",
+							niceTicks: "snap125",
+							hide: !yTickFormatter,
+							domain: yDomain,
+							ticks: yTicks,
+							tickLine: false,
+							axisLine: false,
+							tickMargin: 8,
+							tick: yTickFormatter ? /* @__PURE__ */ jsx(ValueTick, {
+								axis: "x",
+								formatter: yTickFormatter,
+								...TICK
+							}) : TICK
+						}), /* @__PURE__ */ jsx(HorizontalAxis, {
+							data,
+							xKey,
+							xFormatter,
+							xTickDetail,
+							xTicks
+						})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+							dataKey: xKey,
+							type: xDomain ? "number" : "category",
+							domain: xDomain,
+							ticks: xTicks,
+							height: (xTickDetail ? 40 : 30) + (xLabel ? 18 : 0),
+							label: xLabel ? {
+								value: xLabel,
+								position: "insideBottom",
+								className: AXIS_TITLE
+							} : void 0,
+							tickLine: false,
+							axisLine: false,
+							tickMargin: 8,
+							tickFormatter: (value) => xFormatter(value),
+							tick: xTickDetail || xTicks ? fittedTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
+							interval: xTickDetail || xTicks ? 0 : void 0
+						}), /* @__PURE__ */ jsx(YAxis, {
+							niceTicks: "snap125",
+							tickLine: false,
+							axisLine: false,
+							width: "auto",
+							domain: yDomain,
+							ticks: yTicks,
+							label: yLabel ? {
+								value: yLabel,
+								angle: -90,
+								position: "insideLeft",
+								style: { textAnchor: "middle" },
+								className: AXIS_TITLE
+							} : void 0,
+							tick: yTickFormatter ? /* @__PURE__ */ jsx(ValueTick, {
+								axis: "y",
+								formatter: yTickFormatter,
+								...TICK
+							}) : TICK,
+							tickFormatter: yTickFormatter ? void 0 : (value) => formatValue(value)
+						})] }),
+						crossesZero && (horizontal ? /* @__PURE__ */ jsx(ReferenceLine, {
+							x: 0,
+							stroke: "var(--border)"
+						}) : /* @__PURE__ */ jsx(ReferenceLine, {
+							y: 0,
+							stroke: "var(--border)"
+						})),
+						referenceLines.map(({ label, emphasis = "muted", labelPosition = "insideTopLeft", ...at }) => /* @__PURE__ */ jsx(ReferenceLine, {
+							...horizontal ? {
+								x: at.y,
+								y: at.x
+							} : at,
+							stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
+							strokeDasharray: at.y === void 0 ? void 0 : "4 4",
+							label: label === void 0 ? void 0 : {
+								value: label,
+								position: labelPosition,
+								className: "fill-muted-foreground text-xs"
+							}
+						}, `${at.x ?? ""}:${at.y ?? ""}:${label ?? ""}`)),
+						/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+							labelFormatter: (_, payload) => {
+								const row = payload[0]?.payload;
+								return row ? xTooltipFormatter(row[xKey]) : null;
+							},
+							formatter: seriesRow(series, formatValue)
+						}) }),
+						children,
+						/* @__PURE__ */ jsx(ChartLegend, {
+							content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
+							itemSorter: null
+						})
+					]
+				})
 			})
-		}) }),
+		}),
 		footer && /* @__PURE__ */ jsx(CardFooter, {
 			className: "flex-col items-start gap-2 text-sm",
 			children: footer
@@ -199,4 +323,4 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, t
 	] });
 }
 //#endregion
-export { ChartFrame, seriesRow };
+export { ChartFrame, endDot, seriesFill, seriesRow };

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

@@ -49,19 +49,27 @@ 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". */
   xTickDetail?: (row: T) => string;
@@ -80,8 +88,6 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
 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. */
-  xTicks?: readonly number[];
 }
 /**
  * How a line or an area's edge joins its points: "linear" draws straight segments, as measured samples should

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/format.d.ts

@@ -7,8 +7,12 @@ export declare function money(value: number, locale?: SiyahiLocale, fractionDigi
  * 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.
+ *
+ * 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;
 }