@siyahi/ui 0.1.9-next.33 → 0.1.9-next.35

package/dist/lib/chart-frame.js

@@ -5,34 +5,23 @@ import { useAxisScale } from "../components/siyahi/scale-toggle.js";
 import { StaleNote } from "../components/siyahi/stale-note.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { EndLabels, QUIET, TimeMarks, endLabelRoom, endLabelsFit, linesEndAtEdge } from "./chart-marks.js";
-import { fitsLog, logAxis } from "./ticks.js";
+import { fitsLog, linearAxis, logAxis } from "./ticks.js";
 import { useElementWidth } from "./use-element-width.js";
+import { useRenderWhenFontsLoad } from "./use-render-when-fonts-load.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useState } from "react";
-import { CartesianGrid, Line, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAxisTicks, useYAxisTicks } from "recharts";
+import { useId, useMemo, useState } from "react";
+import { BarChart, CartesianGrid, Line, 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 = [];
 const SERIES_LEGEND = /* @__PURE__ */ jsx(ChartLegendContent, { className: "flex-wrap gap-y-1" });
 /**
-* A bar's fill: a tint of its colour, inside a 1px edge of the full colour the bar is drawn with. A selection dims
-* the bars it leaves out to a fainter tint; their edges stay, so they keep 3:1 against the card.
+* A bar's fill: the theme's --bar-tint of its colour, inside a 1px edge of the full colour the bar is drawn with. A
+* selection dims the bars it leaves out to a fainter tint; their edges stay, so they keep 3:1 against the card.
 */
 function barFill(color, dim = false) {
-	return `color-mix(in oklab, ${color} ${dim ? 10 : 25}%, var(--card))`;
-}
-/** Renders the component again once the page's fonts load, so text measured on a canvas is measured in Geist. */
-function useRenderWhenFontsLoad() {
-	const [loaded, setLoaded] = useState(() => typeof document === "undefined" || document.fonts?.status === "loaded");
-	useEffect(() => {
-		if (loaded || !document.fonts) return;
-		let live = true;
-		document.fonts.ready.then(() => live && setLoaded(true));
-		return () => {
-			live = false;
-		};
-	}, [loaded]);
+	return `color-mix(in oklab, ${color} ${dim ? "10%" : "var(--bar-tint)"}, var(--card))`;
 }
 /**
 * The legend when some series are quiet: every series by name. The grey ones share a colour, so a legend square
@@ -83,6 +72,43 @@ function haloLine({ x1, y1, x2, y2, stroke, strokeDasharray }) {
 		strokeWidth: 1
 	})] });
 }
+const sum = (values) => values.reduce((total, value) => total + value, 0);
+/**
+* The values a value axis must reach: each one drawn, or a stack's running totals, where its segments end. A "sign"
+* stack runs a row's losses down from zero and its gains up, so the row reaches its two sums.
+*/
+function axisValues(data, series, stackOffset) {
+	return data.flatMap((row) => {
+		const values = series.map(({ key }) => row[key]).filter((value) => typeof value === "number" && Number.isFinite(value));
+		if (stackOffset === "none") {
+			let total = 0;
+			return [0, ...values.map((value) => total += value)];
+		}
+		if (stackOffset === "sign") return [sum(values.filter((value) => value < 0)), sum(values.filter((value) => value > 0))];
+		return values;
+	});
+}
+/** The value levels a page marks with reference lines. */
+const levelsOf = (lines) => lines.flatMap(({ y }) => y === void 0 ? [] : [y]);
+/**
+* A log value axis over the values and the page's levels above zero: a level at or under zero has no place on it, and
+* must not turn Log off.
+*/
+function logValueAxis(values, referenceLines, range) {
+	return logAxis([...values, ...levelsOf(referenceLines).filter((level) => level > 0)], range);
+}
+/**
+* A linear value axis that just covers what is drawn: the values (a stack's totals), the page's levels and ticks, and
+* zero under bars, so no bar hangs from its smallest loss and no level falls off the plot.
+*/
+function linearValueAxis(data, series, { stackOffset, referenceLines = NO_LINES, yTicks = [], bars = false }) {
+	return linearAxis([
+		...axisValues(data, series, stackOffset),
+		...levelsOf(referenceLines),
+		...yTicks,
+		...bars ? [0] : []
+	]);
+}
 /**
 * 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.
@@ -246,10 +272,10 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 	const { numberLocale } = useLocale();
 	const clipId = useId();
 	const [contentRef, contentWidth] = useElementWidth();
-	useRenderWhenFontsLoad();
 	const [raisedKey, setRaisedKey] = useState();
 	const names = endLabels ? series.map(({ label }) => label) : [];
 	const labelRoom = endLabels ? endLabelRoom(names) : 0;
+	useRenderWhenFontsLoad(() => endLabels ? endLabelRoom(names) : 0);
 	const plotHeight = height - 12 - (xTickDetail ? 40 : 30) - (xLabel ? 18 : 0);
 	const ends = endLabels && linesEndAtEdge(data, xKey, series, xDomain) && endLabelsFit(names, contentWidth, plotHeight);
 	const quiet = series.some(({ color }) => color === QUIET);
@@ -260,16 +286,20 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
-	const [low, high] = Array.isArray(yDomain) ? yDomain : [];
-	const range = typeof low === "number" && typeof high === "number" ? [low, high] : void 0;
-	const values = [...data.flatMap((row) => series.map(({ key }) => row[key])), ...range ?? []].filter((value) => typeof value === "number" && Number.isFinite(value));
+	const values = [...data.flatMap((row) => series.map(({ key }) => row[key])), ...yDomain ?? []].filter((value) => typeof value === "number" && Number.isFinite(value));
 	const valueAxis = useAxisScale({
 		initial: yScale,
 		toggle: yScaleToggle,
 		label: yLabel ? `${yLabel} scale` : "Value axis scale",
 		logBlocked: logBlocked ?? (fitsLog(values) ? void 0 : "Log needs every value above zero")
 	});
-	const log = valueAxis.scale === "log" ? logAxis(values, range) : void 0;
+	const log = valueAxis.scale === "log" ? logValueAxis(values, referenceLines, yDomain) : void 0;
+	const linear = log || yDomain !== void 0 ? void 0 : linearValueAxis(data, series, {
+		stackOffset,
+		referenceLines,
+		yTicks,
+		bars: Chart === BarChart
+	});
 	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;
@@ -336,10 +366,10 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 							}),
 							horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
 								type: "number",
-								niceTicks: "snap125",
+								niceTicks: linear ? void 0 : "snap125",
 								hide: !yTickFormatter,
-								domain: yDomain,
-								ticks: yTicks,
+								domain: linear?.domain ?? yDomain,
+								ticks: yTicks ?? linear?.ticks,
 								tickLine: false,
 								axisLine: false,
 								tickMargin: 8,
@@ -373,12 +403,12 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 								interval: xTickDetail || xTicks ? 0 : void 0
 							}), /* @__PURE__ */ jsx(YAxis, {
 								scale: valueAxis.scale,
-								niceTicks: log ? void 0 : "snap125",
+								niceTicks: log || linear ? void 0 : "snap125",
 								tickLine: false,
 								axisLine: false,
 								width: "auto",
-								domain: log?.domain ?? yDomain,
-								ticks: log?.ticks ?? yTicks,
+								domain: log?.domain ?? linear?.domain ?? yDomain,
+								ticks: log?.ticks ?? yTicks ?? linear?.ticks,
 								label: yLabel ? {
 									value: yLabel,
 									angle: -90,
@@ -477,4 +507,4 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 	});
 }
 //#endregion
-export { ChartFrame, QuietLegend, barFill, endDot, seriesFill, seriesRow };
+export { ChartFrame, QuietLegend, axisValues, barFill, endDot, linearValueAxis, logValueAxis, seriesFill, seriesRow };

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

@@ -64,8 +64,9 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
    */
   yTickFormatter?: ((value: number, scale: number) => string) | undefined;
   /**
-   * 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.
+   * A fixed range for the value axis, such as [0, 100] for a percentage. By default the axis ends on the round
+   * ticks that just cover the data (a 46,800 peak ends at 50,000), a stack's totals for a stack, and a bar chart's
+   * always reaches zero.
    */
   yDomain?: [number, number] | undefined;
   /** Where the value axis puts its ticks, such as [0, 25, 50, 75, 100]. */

package/dist/lib/ticks.d.ts

@@ -10,6 +10,15 @@ export declare function logTicks(min: number, max: number): number[];
  * noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
  */
 export declare function linearTicks(min: number, max: number, count?: number): number[];
+/**
+ * A value axis' ends and ticks: the round ticks that just cover the values, and their outer two as the ends. About
+ * six, not five, so a 46,800 peak ends at 50,000 by 10,000s rather than at 60,000 by 20,000s. None when the values
+ * span no range (no values, or one), which leaves the axis to the chart.
+ */
+export declare function linearAxis(values: readonly number[]): {
+  domain: [number, number];
+  ticks: number[];
+} | undefined;
 /** How an axis spaces its values: evenly, or by powers of ten for values that run from tiny to large. */
 export type AxisScale = "linear" | "log";
 /** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */

package/dist/lib/ticks.js

@@ -39,6 +39,29 @@ function linearTicks(min, max, count = 5) {
 	const last = Math.ceil(max / step - 1e-9);
 	return Array.from({ length: last - first + 1 }, (_, i) => clean((first + i) * step));
 }
+/** The smallest and largest value, by a loop: Math.min(...values) overflows the call stack past about 100,000. */
+function extent(values) {
+	let low = Number.POSITIVE_INFINITY;
+	let high = Number.NEGATIVE_INFINITY;
+	for (const value of values) {
+		low = Math.min(low, value);
+		high = Math.max(high, value);
+	}
+	return [low, high];
+}
+/**
+* A value axis' ends and ticks: the round ticks that just cover the values, and their outer two as the ends. About
+* six, not five, so a 46,800 peak ends at 50,000 by 10,000s rather than at 60,000 by 20,000s. None when the values
+* span no range (no values, or one), which leaves the axis to the chart.
+*/
+function linearAxis(values) {
+	const ticks = linearTicks(...extent(values), 6);
+	const [low, high] = [ticks[0], ticks.at(-1)];
+	return low !== void 0 && high !== void 0 && low < high ? {
+		domain: [low, high],
+		ticks
+	} : void 0;
+}
 /** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */
 const ticksFor = (scale, min, max) => scale === "log" ? logTicks(min, max) : linearTicks(min, max);
 /** A log axis has no place for zero or below, so it can draw a set of values only when every one is above zero. */
@@ -55,8 +78,7 @@ function logAxis(values, range) {
 			ticks: logTicks(low, high).filter((tick) => tick >= low && tick <= high)
 		};
 	}
-	const low = Math.min(...values);
-	const high = Math.max(...values);
+	const [low, high] = extent(values);
 	const ticks = logTicks(low, high);
 	return {
 		domain: [ticks[0] ?? low, ticks.at(-1) ?? high],
@@ -64,4 +86,4 @@ function logAxis(values, range) {
 	};
 }
 //#endregion
-export { fitsLog, linearTicks, logAxis, logTicks, ticksFor };
+export { fitsLog, linearAxis, linearTicks, logAxis, logTicks, ticksFor };

package/dist/lib/use-render-when-fonts-load.d.ts

@@ -0,0 +1,11 @@
+//#region src/lib/use-render-when-fonts-load.d.ts
+/** How many font loads the page has finished: a width a canvas measured before the last one may be the fallback's. */
+export declare function fontLoads(): number;
+/**
+ * Renders the component again when a font load changes what `measure` returns: the width of the component's own
+ * text, measured on a canvas. Any face may change it, whenever it loads: Geist after the fallback, a subset for other
+ * characters, another family. A load that changes nothing the component measures leaves it alone, as Recharts redraws
+ * a chart's marks on every render and their fade-in would play again.
+ */
+export declare function useRenderWhenFontsLoad(measure: () => number | string): void;
+//#endregion

package/dist/lib/use-render-when-fonts-load.js

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useReducer, useRef } from "react";
+//#region src/lib/use-render-when-fonts-load.ts
+let loads = 0;
+const counted = /* @__PURE__ */ new WeakSet();
+/** How many font loads the page has finished: a width a canvas measured before the last one may be the fallback's. */
+function fontLoads() {
+	if (typeof document !== "undefined" && document.fonts && !counted.has(document.fonts)) {
+		counted.add(document.fonts);
+		document.fonts.addEventListener("loadingdone", () => loads++);
+	}
+	return loads;
+}
+/**
+* Renders the component again when a font load changes what `measure` returns: the width of the component's own
+* text, measured on a canvas. Any face may change it, whenever it loads: Geist after the fallback, a subset for other
+* characters, another family. A load that changes nothing the component measures leaves it alone, as Recharts redraws
+* a chart's marks on every render and their fade-in would play again.
+*/
+function useRenderWhenFontsLoad(measure) {
+	const drawn = measure();
+	const seen = fontLoads();
+	const committed = useRef({
+		measure,
+		drawn
+	});
+	const [, render] = useReducer((count) => count + 1, 0);
+	useLayoutEffect(() => {
+		committed.current = {
+			measure,
+			drawn
+		};
+		if (fontLoads() !== seen && measure() !== drawn) render();
+	}, [
+		measure,
+		drawn,
+		seen
+	]);
+	useLayoutEffect(() => {
+		const fonts = document.fonts;
+		if (!fonts) return;
+		const recheck = () => {
+			if (committed.current.measure() !== committed.current.drawn) render();
+		};
+		fonts.addEventListener("loadingdone", recheck);
+		return () => fonts.removeEventListener("loadingdone", recheck);
+	}, []);
+}
+//#endregion
+export { fontLoads, useRenderWhenFontsLoad };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.33",
+  "version": "0.1.9-next.35",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",
@@ -22,7 +22,6 @@
     "agents",
     "dist",
     "styles",
-    "report.css",
     "registry.lock.json",
     "README.md",
     "DESIGN.md",
@@ -40,7 +39,6 @@
       "default": "./dist/index.js"
     },
     "./styles.css": "./styles/siyahi.css",
-    "./report.css": "./report.css",
     "./registry.lock.json": "./registry.lock.json",
     "./package.json": "./package.json"
   },
@@ -48,15 +46,19 @@
     "@base-ui/react": "^1.9.0",
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
+    "@shadcn/react": "^0.3.1",
     "@tanstack/react-table": "^9.3.1",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
     "cn": "^0.5.0",
     "d3-hierarchy": "^3.1.2",
     "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
     "lightweight-charts": "^5.2.1",
     "lucide-react": "^1.59.0",
     "react-day-picker": "^10.0.2",
+    "react-resizable-panels": "^4.21.0",
     "recharts": "3.8.0",
     "tw-animate-css": "^1.4.0"
   },