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

package/dist/components/siyahi/scatter-chart.js

@@ -0,0 +1,395 @@
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card.js";
+import { ChartContainer } from "../ui/chart.js";
+import { LOG_BLOCKED, useAxisScale } from "./scale-toggle.js";
+import { useLocale } from "./siyahi-provider.js";
+import { fitsLog, ticksFor } from "../../lib/ticks.js";
+import { corners, dotSizes, placeLabels, quadrantSplit } from "../../lib/scatter.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { CartesianGrid, DefaultZIndexes, ReferenceLine, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZIndexLayer, usePlotArea, useXAxisScale, useYAxisScale } from "recharts";
+//#region src/components/siyahi/scatter-chart.tsx
+const RADIUS = 5;
+const EDGE = 1.5;
+const SIZED_FILL = .3;
+const RING = 3;
+const NAME_BAND = 42;
+const TICK = { className: "fill-muted-foreground font-mono" };
+const AXIS_TITLE = "fill-muted-foreground text-xs";
+const keyOf = (point) => point.key ?? point.name;
+const MONO_WIDTH = 7.2;
+/** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
+function ScatterChartCard({ title, description, action, points, height, xLabel, yLabel, xScale = "linear", xScaleToggle = false, yScale = "linear", yScaleToggle = false, xFormatter, yFormatter, labels = 12, details, selected = null, onSelect, footer, quadrants, sizeLabel = "Size", sizeFormatter }) {
+	const { numberLocale } = useLocale();
+	const plotRef = useRef(null);
+	const [focusedKey, setFocusedKey] = useState(null);
+	const keyed = useRef(null);
+	useEffect(() => {
+		const key = keyed.current;
+		if (key === null) return;
+		const frame = requestAnimationFrame(() => {
+			const dot = plotRef.current?.querySelector(`[data-key="${CSS.escape(key)}"]`);
+			if (dot && document.activeElement !== dot) dot.focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	});
+	const onBlur = (event) => {
+		if (plotRef.current?.contains(event.relatedTarget)) return;
+		const left = event.target;
+		requestAnimationFrame(() => {
+			if (left.isConnected) keyed.current = null;
+		});
+	};
+	const formatX = useMemo(() => xFormatter ?? new Intl.NumberFormat(numberLocale).format, [xFormatter, numberLocale]);
+	const formatY = useMemo(() => yFormatter ?? new Intl.NumberFormat(numberLocale).format, [yFormatter, numberLocale]);
+	const formatSize = useMemo(() => sizeFormatter ?? new Intl.NumberFormat(numberLocale).format, [sizeFormatter, numberLocale]);
+	const drawn = useMemo(() => points.filter((p) => p.y !== null && Number.isFinite(p.y) && Number.isFinite(p.x)), [points]);
+	const both = xScaleToggle && yScaleToggle;
+	const across = useAxisScale({
+		initial: xScale,
+		toggle: xScaleToggle,
+		label: `${xLabel} scale`,
+		caption: both ? xLabel : void 0,
+		logBlocked: fitsLog(drawn.map((p) => p.x)) ? void 0 : LOG_BLOCKED
+	});
+	const up = useAxisScale({
+		initial: yScale,
+		toggle: yScaleToggle,
+		label: `${yLabel} scale`,
+		caption: both ? yLabel : void 0,
+		logBlocked: fitsLog(drawn.map((p) => p.y ?? 0)) ? void 0 : LOG_BLOCKED
+	});
+	const order = useMemo(() => drawn.toSorted((a, b) => a.x - b.x || (a.y ?? 0) - (b.y ?? 0)), [drawn]);
+	const { radiusOf, sized } = dotSizes(drawn, RADIUS);
+	const painted = sized ? drawn.toSorted((a, b) => radiusOf(b) - radiusOf(a)) : drawn;
+	const split = quadrantSplit(quadrants, across.scale, up.scale);
+	const xs = [...drawn.map((p) => p.x), ...split ? [split.x] : []];
+	const ys = [...drawn.map((p) => p.y ?? 0), ...split ? [split.y] : []];
+	const reach = sized ? 23 : 0;
+	const names = split?.labels;
+	const band = (named) => named ? NAME_BAND + Math.max(reach, 6.5) : reach;
+	const xTicks = ticksFor(across.scale, Math.min(...xs), Math.max(...xs));
+	const yTicks = ticksFor(up.scale, Math.min(...ys), Math.max(...ys));
+	const lastX = xTicks.at(-1);
+	const endRoom = Math.max(16, lastX === void 0 ? 0 : Math.ceil(formatX(lastX).length * MONO_WIDTH / 2) + 4 - reach);
+	const crossesZero = ys.some((y) => y < 0) && ys.some((y) => y > 0);
+	const selectedKey = selected ? keyOf(selected) : null;
+	const rows = details ?? ((p) => [
+		[xLabel, formatX(p.x)],
+		[yLabel, p.y === null ? "—" : formatY(p.y)],
+		...p.size === void 0 ? [] : [[sizeLabel, formatSize(p.size)]]
+	]);
+	const first = order[0];
+	const focusKey = order.some((p) => keyOf(p) === focusedKey) ? focusedKey : selectedKey ?? (first ? keyOf(first) : null);
+	const onKeyDown = (event, point) => {
+		if (!onSelect) return;
+		const key = keyOf(point);
+		keyed.current = key;
+		const at = order.findIndex((p) => keyOf(p) === key);
+		const to = {
+			ArrowRight: at + 1,
+			ArrowUp: at + 1,
+			ArrowLeft: at - 1,
+			ArrowDown: at - 1,
+			Home: 0,
+			End: order.length - 1
+		}[event.key];
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			onSelect(key === selectedKey ? null : point);
+		} else if (event.key === "Escape") onSelect(null);
+		else if (to !== void 0) {
+			event.preventDefault();
+			const next = order[Math.max(0, Math.min(order.length - 1, to))];
+			if (!next) return;
+			keyed.current = keyOf(next);
+			setFocusedKey(keyOf(next));
+		}
+	};
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsxs(CardHeader, { children: [
+			/* @__PURE__ */ jsx(CardTitle, { children: title }),
+			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+			(action || across.buttons || up.buttons) && /* @__PURE__ */ jsxs(CardAction, {
+				className: "flex flex-wrap items-center gap-x-3 gap-y-2",
+				children: [
+					action,
+					across.buttons,
+					up.buttons
+				]
+			})
+		] }),
+		/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
+			ref: plotRef,
+			"data-slot": "scatter-chart",
+			role: onSelect ? "group" : "img",
+			"aria-label": `${xLabel} against ${yLabel}`,
+			onClick: () => onSelect?.(null),
+			onBlur,
+			children: /* @__PURE__ */ jsx(ChartContainer, {
+				config: {},
+				className: "aspect-auto w-full",
+				style: { height },
+				children: /* @__PURE__ */ jsxs(ScatterChart, {
+					margin: {
+						top: 12,
+						right: endRoom,
+						left: 0
+					},
+					accessibilityLayer: false,
+					children: [
+						/* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+						/* @__PURE__ */ jsx(XAxis, {
+							type: "number",
+							dataKey: "x",
+							scale: across.scale,
+							domain: xTicks.length > 0 ? [xTicks[0] ?? "auto", xTicks.at(-1) ?? "auto"] : [(low) => Math.min(low, ...xs), (high) => Math.max(high, ...xs)],
+							ticks: xTicks.length > 0 ? xTicks : void 0,
+							niceTicks: xTicks.length > 0 ? void 0 : "snap125",
+							padding: reach > 0 ? {
+								left: reach,
+								right: reach
+							} : void 0,
+							tickLine: false,
+							axisLine: false,
+							tickMargin: 8,
+							tick: TICK,
+							tickFormatter: (value) => formatX(value),
+							height: 48,
+							label: {
+								value: xLabel,
+								position: "insideBottom",
+								className: AXIS_TITLE
+							}
+						}),
+						/* @__PURE__ */ jsx(YAxis, {
+							type: "number",
+							dataKey: "y",
+							scale: up.scale,
+							domain: [yTicks[0] ?? "auto", yTicks.at(-1) ?? "auto"],
+							ticks: yTicks,
+							padding: {
+								top: band(Boolean(names?.topLeft || names?.topRight)),
+								bottom: band(Boolean(names?.bottomLeft || names?.bottomRight))
+							},
+							tickLine: false,
+							axisLine: false,
+							width: "auto",
+							tick: TICK,
+							tickFormatter: (value) => formatY(value),
+							label: {
+								value: yLabel,
+								angle: -90,
+								position: "insideLeft",
+								style: { textAnchor: "middle" },
+								className: AXIS_TITLE
+							}
+						}),
+						split ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(ReferenceLine, {
+								x: split.x,
+								stroke: "var(--muted-foreground)",
+								strokeDasharray: "4 4"
+							}),
+							/* @__PURE__ */ jsx(ReferenceLine, {
+								y: split.y,
+								stroke: "var(--muted-foreground)",
+								strokeDasharray: "4 4"
+							}),
+							/* @__PURE__ */ jsx(QuadrantNames, { quadrants: split })
+						] }) : crossesZero && /* @__PURE__ */ jsx(ReferenceLine, {
+							y: 0,
+							stroke: "var(--border)"
+						}),
+						/* @__PURE__ */ jsx(Tooltip, {
+							cursor: false,
+							isAnimationActive: false,
+							content: /* @__PURE__ */ jsx(PointTooltip, { details: rows })
+						}),
+						/* @__PURE__ */ jsx(Scatter, {
+							data: painted,
+							fill: "var(--chart-1)",
+							isAnimationActive: false,
+							shape: /* @__PURE__ */ jsx(Dot, {
+								selectedKey,
+								focusKey: onSelect ? focusKey : null,
+								describe: (p) => [p.name, ...rows(p).map(([label, value]) => `${label} ${value}`)].join(", "),
+								onSelect,
+								onKeyDown,
+								radiusOf,
+								sized
+							})
+						}),
+						/* @__PURE__ */ jsx(PointLabels, {
+							points: drawn,
+							limit: labels,
+							radiusOf,
+							quadrants: split
+						})
+					]
+				})
+			})
+		}) }),
+		footer && /* @__PURE__ */ jsx(CardFooter, {
+			className: "flex-col items-start gap-2 text-sm",
+			children: footer
+		})
+	] });
+}
+/** The hovered point's name, then its rows. Recharts passes the hovered point in as payload. */
+function PointTooltip({ active, payload, details }) {
+	const point = active ? payload?.[0]?.payload : void 0;
+	if (!point) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid min-w-32 gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-medium",
+			children: point.name
+		}), details(point).map(([label, value]) => /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between gap-4",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "font-mono font-medium text-foreground tabular-nums",
+				children: value
+			})]
+		}, label))]
+	});
+}
+/** One point's dot. A ring marks the selected one; with onSelect it is a button Tab and the arrow keys reach. */
+function Dot({ cx, cy, payload, index, "data-recharts-item-id": itemId, selectedKey, focusKey, describe, onSelect, onKeyDown, radiusOf, sized }) {
+	if (cx === void 0 || cy === void 0 || !payload) return null;
+	const key = keyOf(payload);
+	const isSelected = key === selectedKey;
+	const r = radiusOf(payload) + (isSelected ? 2 : 0);
+	const dot = /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r,
+		fill: "var(--chart-1)",
+		fillOpacity: sized ? SIZED_FILL : 1,
+		stroke: isSelected ? "var(--foreground)" : sized ? "var(--chart-1)" : "var(--card)",
+		strokeWidth: isSelected ? 2 : EDGE,
+		"data-slot": "scatter-point",
+		"data-key": key,
+		"data-selected": isSelected || void 0,
+		"data-recharts-item-id": itemId,
+		"data-recharts-item-index": index,
+		role: onSelect ? "button" : void 0,
+		tabIndex: onSelect ? key === focusKey ? 0 : -1 : void 0,
+		"aria-label": describe(payload),
+		"aria-pressed": onSelect ? isSelected : void 0,
+		className: onSelect ? "cursor-pointer" : void 0,
+		onKeyDown: (event) => onKeyDown(event, payload),
+		onClick: (event) => {
+			if (!onSelect) return;
+			event.stopPropagation();
+			onSelect(isSelected ? null : payload);
+		}
+	});
+	if (!sized) return dot;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: r + EDGE / 2 + RING / 2,
+		fill: "none",
+		stroke: "var(--card)",
+		strokeWidth: RING
+	}), dot] });
+}
+/** A name's width in the labels' type, measured on a canvas once per font and name. */
+const widths = /* @__PURE__ */ new Map();
+let canvas;
+/** The labels' type as the page sets it: text-xs is three quarters of the root size, which a reader may enlarge. */
+function labelType() {
+	if (typeof document === "undefined") return {
+		size: 12,
+		measure: (text) => text.length * 7
+	};
+	const size = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) * .75;
+	const font = `500 ${size}px ${getComputedStyle(document.body).fontFamily}`;
+	canvas ??= document.createElement("canvas").getContext("2d");
+	const measure = (text) => {
+		const id = `${font}\n${text}`;
+		let width = widths.get(id);
+		if (width === void 0 && canvas) {
+			canvas.font = font;
+			width = canvas.measureText(text).width;
+			widths.set(id, width);
+		}
+		return width ?? text.length * size * .6;
+	};
+	return {
+		size,
+		measure
+	};
+}
+/** The leading points' names, placed from the axes' scales once the chart has laid them out. */
+/** Where the quadrants' split lines cross, in pixels, once the axes are laid out. */
+function useSplit(quadrants) {
+	const x = useXAxisScale();
+	const y = useYAxisScale();
+	return quadrants && x && y ? {
+		x: Number(x(quadrants.x)),
+		y: Number(y(quadrants.y))
+	} : null;
+}
+/** The quadrants' names, muted, in the plot's corners. */
+function QuadrantNames({ quadrants }) {
+	const plot = usePlotArea();
+	const split = useSplit(quadrants);
+	if (!plot) return null;
+	return /* @__PURE__ */ jsx(ZIndexLayer, {
+		zIndex: DefaultZIndexes.label,
+		children: /* @__PURE__ */ jsx("g", {
+			"data-slot": "scatter-quadrant-names",
+			pointerEvents: "none",
+			children: corners(plot, quadrants.labels, split, labelType()).map(({ key, lines, x, y, line }) => /* @__PURE__ */ jsx("text", {
+				x,
+				y,
+				className: "fill-muted-foreground stroke-card text-xs font-medium",
+				style: { paintOrder: "stroke" },
+				strokeWidth: 3,
+				strokeLinejoin: "round",
+				children: lines.map((text, index) => /* @__PURE__ */ jsx("tspan", {
+					x,
+					dy: index === 0 ? 0 : line,
+					children: text
+				}, text))
+			}, key))
+		})
+	});
+}
+function PointLabels({ points, limit, radiusOf, quadrants }) {
+	const x = useXAxisScale();
+	const y = useYAxisScale();
+	const plot = usePlotArea();
+	const split = useSplit(quadrants);
+	if (!x || !y || !plot || limit <= 0) return null;
+	const type = labelType();
+	const candidates = points.map((p) => ({
+		key: keyOf(p),
+		text: p.name,
+		cx: Number(x(p.x)),
+		cy: Number(y(p.y)),
+		r: radiusOf(p) + EDGE
+	}));
+	return /* @__PURE__ */ jsx(ZIndexLayer, {
+		zIndex: DefaultZIndexes.label,
+		children: /* @__PURE__ */ jsx("g", {
+			"data-slot": "scatter-labels",
+			pointerEvents: "none",
+			children: placeLabels(candidates, plot, limit, type, corners(plot, quadrants?.labels, split, type).map(({ box }) => box)).map((label) => /* @__PURE__ */ jsx("text", {
+				x: label.x,
+				y: label.y,
+				className: "fill-foreground stroke-card text-xs font-medium",
+				style: { paintOrder: "stroke" },
+				strokeWidth: 3,
+				strokeLinejoin: "round",
+				children: label.text
+			}, label.key))
+		})
+	});
+}
+//#endregion
+export { ScatterChartCard };

package/dist/components/siyahi/siyahi-provider.d.ts

@@ -1,12 +1,25 @@
 import { SiyahiLocale } from "../../lib/locale.js";
 import { ReactNode } from "react";
 //#region src/components/siyahi/siyahi-provider.d.ts
+/**
+ * How a data block sits on the page. "ruled", the default: blocks filled with the card colour and parted by hairlines,
+ * with a rule above and below each group and none on its sides. "card": a filled square card in a hairline ring, 8px
+ * from the next, for a page of separate blocks. "open": no fill and no lines, the block's content level with the
+ * page's text.
+ */
+export type Surface = "ruled" | "card" | "open";
 export interface SiyahiProviderProps {
   /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
   locale?: Partial<SiyahiLocale>;
+  /**
+   * Set it on a nested provider for one part of a page. Left out, a provider keeps the surface around it, so a
+   * provider that only changes the locale changes nothing else; the outermost default is "ruled".
+   */
+  surface?: Surface;
   children: ReactNode;
 }
-/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
-export declare function SiyahiProvider({ locale, children }: SiyahiProviderProps): import("react").JSX.Element;
+/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
+export declare function SiyahiProvider({ locale, surface, children }: SiyahiProviderProps): import("react").JSX.Element;
 export declare function useLocale(): SiyahiLocale;
+export declare function useSurface(): Surface;
 //#endregion

package/dist/components/siyahi/siyahi-provider.js

@@ -4,8 +4,9 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo } from "react";
 //#region src/components/siyahi/siyahi-provider.tsx
 const LocaleContext = createContext(defaultLocale);
-/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
-function SiyahiProvider({ locale, children }) {
+const SurfaceContext = createContext("ruled");
+/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
+function SiyahiProvider({ locale, surface, children }) {
 	const { numberLocale, currency, timeZone } = {
 		...defaultLocale,
 		...locale
@@ -19,13 +20,25 @@ function SiyahiProvider({ locale, children }) {
 		currency,
 		timeZone
 	]);
+	const around = use(SurfaceContext);
 	return /* @__PURE__ */ jsx(LocaleContext, {
 		value,
-		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
+		children: /* @__PURE__ */ jsx(SurfaceContext, {
+			value: surface ?? around,
+			children: /* @__PURE__ */ jsx(TooltipProvider, { children: surface ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "siyahi-provider",
+				"data-surface": surface,
+				className: "contents",
+				children
+			}) : children })
+		})
 	});
 }
 function useLocale() {
 	return use(LocaleContext);
 }
+function useSurface() {
+	return use(SurfaceContext);
+}
 //#endregion
-export { SiyahiProvider, useLocale };
+export { SiyahiProvider, useLocale, useSurface };

package/dist/components/siyahi/slope-chart.d.ts

@@ -0,0 +1,35 @@
+//#region src/components/siyahi/slope-chart.d.ts
+export interface SlopeItem {
+  name: string;
+  /** The value on the left: before, or the comparison such as an index's weight. */
+  from: number;
+  /** The value on the right: after, or our own figure. */
+  to: number;
+  /** Unique key when names repeat. Defaults to `name`. */
+  key?: string;
+}
+export interface SlopeChartProps {
+  /** An item whose from or to is not a finite number is not drawn: say on the page how many are left out. */
+  items: readonly SlopeItem[];
+  /** Heads the left side, such as "Nifty 50" or "2025". */
+  fromLabel: string;
+  /** Heads the right side, such as "Portfolio" or "2026". */
+  toLabel: string;
+  /** Keys (or names) of the items to draw in the accent colour; the rest stay grey. */
+  highlighted?: readonly string[];
+  /** Writes each end's value; useFormat().pct by default. */
+  valueFormatter?: (value: number) => string;
+  className?: string;
+}
+/**
+ * Pushes labels apart so none sits closer than `gap` to the next, keeping their order and staying inside [min, max]:
+ * down from the top first, then back up from the bottom when the last one ran past it.
+ */
+export declare function spread(ys: readonly number[], gap: number, min: number, max: number): number[];
+/**
+ * Each item as a line from its value on the left to its value on the right, so rises, falls and crossings read at a
+ * glance: allocation against a target, a weight against an index's, or one year against the next. Lines are grey and
+ * the page picks the few to draw in the accent; names sit on the left, values at both ends, nudged apart when close.
+ */
+export declare function SlopeChart({ items: given, fromLabel, toLabel, highlighted, valueFormatter, className }: SlopeChartProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/slope-chart.js

@@ -0,0 +1,159 @@
+import { useElementWidth } from "../../lib/use-element-width.js";
+import { useFormat } from "../../lib/format.js";
+import { fit, textWidth } from "../../lib/fit-text.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/slope-chart.tsx
+const ROW = 18;
+const TOP = 32;
+const BOTTOM = 8;
+const GAP = 12;
+const NONE = [];
+/**
+* Pushes labels apart so none sits closer than `gap` to the next, keeping their order and staying inside [min, max]:
+* down from the top first, then back up from the bottom when the last one ran past it.
+*/
+function spread(ys, gap, min, max) {
+	const order = ys.map((y, index) => ({
+		y,
+		index
+	})).toSorted((a, b) => a.y - b.y);
+	let floor = min;
+	for (const label of order) {
+		label.y = Math.max(label.y, floor);
+		floor = label.y + gap;
+	}
+	let ceiling = max;
+	for (const label of order.toReversed()) {
+		label.y = Math.min(label.y, ceiling);
+		ceiling = label.y - gap;
+	}
+	const placed = Array.from({ length: ys.length }, () => 0);
+	for (const { y, index } of order) placed[index] = y;
+	return placed;
+}
+/**
+* Each item as a line from its value on the left to its value on the right, so rises, falls and crossings read at a
+* glance: allocation against a target, a weight against an index's, or one year against the next. Lines are grey and
+* the page picks the few to draw in the accent; names sit on the left, values at both ends, nudged apart when close.
+*/
+function SlopeChart({ items: given, fromLabel, toLabel, highlighted = NONE, valueFormatter, className }) {
+	const [ref, width] = useElementWidth();
+	const { pct } = useFormat();
+	const format = valueFormatter ?? ((value) => pct(value));
+	const items = given.filter(({ from, to }) => Number.isFinite(from) && Number.isFinite(to));
+	const height = TOP + Math.max(items.length * ROW * 1.5, 180) + BOTTOM;
+	const values = items.flatMap(({ from, to }) => [from, to]);
+	const low = Math.min(...values);
+	const high = Math.max(...values);
+	const y = (value) => high === low ? (TOP + height - BOTTOM) / 2 : TOP + (high - value) / (high - low) * (height - TOP - BOTTOM - ROW) + ROW / 2;
+	const rightTexts = [toLabel, ...items.map(({ to }) => format(to))];
+	const column = Math.min(Math.ceil(Math.max(...rightTexts.map(textWidth)) * 1.1) + 8, Math.round(width * .4));
+	const left = Math.min(Math.max(Math.round(width * .45), width - column - 96), 240);
+	const right = width - column;
+	const lefts = spread(items.map(({ from }) => y(from)), ROW, 41, height - BOTTOM - ROW / 2);
+	const rights = spread(items.map(({ to }) => y(to)), ROW, 41, height - BOTTOM - ROW / 2);
+	const marked = new Set(highlighted);
+	const isMarked = (item) => marked.has(item.key ?? item.name);
+	const order = items.map((item, index) => ({
+		item,
+		index
+	})).toSorted((a, b) => Number(isMarked(a.item)) - Number(isMarked(b.item)));
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "slope-chart",
+		className: cn("w-full max-w-2xl", className),
+		style: { height },
+		children: [width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			"aria-hidden": "true",
+			className: "text-xs",
+			children: [
+				/* @__PURE__ */ jsx("text", {
+					x: left,
+					y: 14,
+					textAnchor: "end",
+					className: "fill-muted-foreground font-medium",
+					children: fit(fromLabel, left)
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: right,
+					y: 14,
+					className: "fill-muted-foreground font-medium",
+					children: fit(toLabel, column)
+				}),
+				[left, right].map((x) => /* @__PURE__ */ jsx("line", {
+					x1: x,
+					x2: x,
+					y1: 26,
+					y2: height - BOTTOM,
+					className: "stroke-border"
+				}, x)),
+				order.map(({ item, index }) => {
+					const strong = isMarked(item);
+					const ink = strong ? "var(--chart-1)" : "var(--muted-foreground)";
+					const a = y(item.from);
+					const b = y(item.to);
+					return /* @__PURE__ */ jsxs("g", {
+						"data-slot": "slope-chart-item",
+						"data-highlighted": strong || void 0,
+						children: [
+							/* @__PURE__ */ jsx("title", { children: `${item.name}: ${format(item.from)} to ${format(item.to)}` }),
+							strong && /* @__PURE__ */ jsx("line", {
+								x1: left + GAP,
+								y1: a,
+								x2: right - GAP,
+								y2: b,
+								stroke: "var(--card)",
+								strokeWidth: 6.5,
+								strokeLinecap: "round"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: left + GAP,
+								y1: a,
+								x2: right - GAP,
+								y2: b,
+								stroke: ink,
+								strokeWidth: strong ? 2.5 : 1.5
+							}),
+							[[left + GAP, a], [right - GAP, b]].map(([cx, cy]) => /* @__PURE__ */ jsx("circle", {
+								cx,
+								cy,
+								r: strong ? 4 : 3,
+								fill: ink,
+								stroke: strong ? "var(--card)" : void 0,
+								strokeWidth: strong ? 2 : void 0
+							}, cx)),
+							/* @__PURE__ */ jsxs("text", {
+								x: left - 4,
+								y: lefts[index],
+								dominantBaseline: "central",
+								textAnchor: "end",
+								className: cn("tabular-nums", strong ? "fill-foreground font-medium" : "fill-muted-foreground"),
+								children: [
+									fit(item.name, left - 8 - textWidth(` ${format(item.from)}`)),
+									" ",
+									format(item.from)
+								]
+							}),
+							/* @__PURE__ */ jsx("text", {
+								x: right + 4,
+								y: rights[index],
+								dominantBaseline: "central",
+								className: cn("tabular-nums", strong ? "fill-foreground font-medium" : "fill-muted-foreground"),
+								children: format(item.to)
+							})
+						]
+					}, item.key ?? item.name);
+				})
+			]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "sr-only",
+			"aria-label": `${fromLabel} against ${toLabel}`,
+			children: items.map((item) => /* @__PURE__ */ jsx("li", { children: `${item.name}: ${fromLabel} ${format(item.from)}, ${toLabel} ${format(item.to)}` }, item.key ?? item.name))
+		})]
+	});
+}
+//#endregion
+export { SlopeChart, spread };

package/dist/components/siyahi/stale-note.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/stale-note.d.ts
+export interface StaleNoteProps {
+  /** Since when the data is old, as the page writes it: "3 Nov". */
+  since: ReactNode;
+}
+/** A small boxed mono capital note that a block's data is old: "Stale · 3 Nov". The block's own card greys out. */
+export declare function StaleNote({ since }: StaleNoteProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/stale-note.js

@@ -0,0 +1,12 @@
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/stale-note.tsx
+/** A small boxed mono capital note that a block's data is old: "Stale · 3 Nov". The block's own card greys out. */
+function StaleNote({ since }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "stale-note",
+		className: "w-fit border px-1.5 py-px font-mono text-2xs tracking-wider whitespace-nowrap text-muted-foreground uppercase",
+		children: ["Stale · ", since]
+	});
+}
+//#endregion
+export { StaleNote };