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

package/dist/components/siyahi/status-alert.d.ts

@@ -0,0 +1,15 @@
+import { Tone } from "../../lib/tone.js";
+import { Alert } from "../ui/alert.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/status-alert.d.ts
+export interface StatusAlertProps extends Omit<ComponentProps<typeof Alert>, "variant"> {
+  /** neutral for information, warning for a caution, negative for an error, positive for a success. */
+  tone?: Tone;
+}
+/**
+ * A notice the reader must not miss: the whole card takes its tone, a faint wash inside a border of the same colour,
+ * with the tone's icon. Title and description stay in the text colours so they read on the wash. Never mark a notice
+ * with a single coloured edge. Put an AlertTitle and an AlertDescription inside.
+ */
+export declare function StatusAlert({ tone, className, children, ...props }: StatusAlertProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/status-alert.js

@@ -0,0 +1,29 @@
+import { Alert } from "../ui/alert.js";
+import { TONES } from "../../lib/tone.js";
+import { cn } from "cn";
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LightbulbIcon, TriangleAlertIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/status-alert.tsx
+const ICONS = {
+	neutral: InfoIcon,
+	accent: LightbulbIcon,
+	warning: TriangleAlertIcon,
+	positive: CircleCheckIcon,
+	negative: CircleAlertIcon
+};
+/**
+* A notice the reader must not miss: the whole card takes its tone, a faint wash inside a border of the same colour,
+* with the tone's icon. Title and description stay in the text colours so they read on the wash. Never mark a notice
+* with a single coloured edge. Put an AlertTitle and an AlertDescription inside.
+*/
+function StatusAlert({ tone = "neutral", className, children, ...props }) {
+	const Icon = ICONS[tone];
+	return /* @__PURE__ */ jsxs(Alert, {
+		"data-tone": tone,
+		className: cn("gap-x-3 px-4 py-3", TONES[tone].box, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Icon, { className: TONES[tone].ink }), children]
+	});
+}
+//#endregion
+export { StatusAlert };

package/dist/components/siyahi/status-badge.d.ts

@@ -0,0 +1,15 @@
+import { Tone } from "../../lib/tone.js";
+import { Badge } from "../ui/badge.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/status-badge.d.ts
+export interface StatusBadgeProps extends Omit<ComponentProps<typeof Badge>, "variant"> {
+  /** positive for done or paid, warning for pending, negative for failed, accent for new, neutral for a draft. */
+  tone?: Tone;
+}
+/**
+ * A state, such as Paid, Pending or Failed: the badge takes its tone's wash and border, and a dot in the tone's
+ * colour marks it. The label stays in the text colour, since small coloured text on its own wash falls under 4.5:1.
+ * Categories (a team, a region) are not states: they stay outline badges.
+ */
+export declare function StatusBadge({ tone, className, children, ...props }: StatusBadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/status-badge.js

@@ -0,0 +1,24 @@
+import { Badge } from "../ui/badge.js";
+import { TONES } from "../../lib/tone.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/status-badge.tsx
+/**
+* A state, such as Paid, Pending or Failed: the badge takes its tone's wash and border, and a dot in the tone's
+* colour marks it. The label stays in the text colour, since small coloured text on its own wash falls under 4.5:1.
+* Categories (a team, a region) are not states: they stay outline badges.
+*/
+function StatusBadge({ tone = "neutral", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		"data-tone": tone,
+		className: cn(TONES[tone].box, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("size-1.5 rounded-full", TONES[tone].dot)
+		}), children]
+	});
+}
+//#endregion
+export { StatusBadge };

package/dist/components/siyahi/target-rows.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/target-rows.d.ts
+/** Where a row stands against its target. A warning is for a real problem, not merely a miss. */
+export interface TargetStatus {
+  kind: "met" | "missed" | "warning";
+  /** A few words: "On target", "2.1 pts under", "Rebalance". */
+  label: string;
+}
+export interface TargetRow {
+  label: ReactNode;
+  /** A muted line under the label, such as the asset class. */
+  detail?: ReactNode;
+  value: number;
+  target: number;
+  /** Qualitative ranges behind the bar as [from, to]; each later band draws a grey step darker, so nest them. */
+  bands?: [number, number][];
+  status?: TargetStatus;
+  /** Tells rows apart when labels are not plain unique text. */
+  key?: string;
+}
+export interface TargetRowsProps {
+  rows: TargetRow[];
+  /** The scale every row shares; by default 0 to the largest value, target or band edge. */
+  domain?: [number, number];
+  /** Writes the value and the target; useFormat().count by default. */
+  valueFormatter?: (value: number) => string;
+  className?: string;
+}
+/**
+ * Bullet rows: each row's label, value and status beside a track where the value is a solid bar, the target a tall
+ * tick and the qualitative ranges grey bands. On a narrow card the label and value stack above the track.
+ */
+export declare function TargetRows({ rows, domain, valueFormatter, className }: TargetRowsProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/target-rows.js

@@ -0,0 +1,97 @@
+import { useFormat } from "../../lib/format.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/target-rows.tsx
+const GLYPH = {
+	met: "✓",
+	missed: "—",
+	warning: "⚠"
+};
+const BAND_DEPTH = [
+	14,
+	26,
+	38
+];
+/**
+* Bullet rows: each row's label, value and status beside a track where the value is a solid bar, the target a tall
+* tick and the qualitative ranges grey bands. On a narrow card the label and value stack above the track.
+*/
+function TargetRows({ rows, domain, valueFormatter, className }) {
+	const f = useFormat();
+	const write = valueFormatter ?? f.count;
+	const [low, high] = domain ?? [0, Math.max(...rows.flatMap((row) => [
+		row.value,
+		row.target,
+		...row.bands?.flat() ?? []
+	]))];
+	const at = (value) => `${(Math.min(1, Math.max(0, (value - low) / (high - low || 1))) * 100).toFixed(2)}%`;
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "target-rows",
+		className: cn("@container/target divide-y", className),
+		children: rows.map((row, index) => /* @__PURE__ */ jsxs("li", {
+			"data-slot": "target-row",
+			className: "flex flex-col gap-3 py-3 @lg/target:flex-row @lg/target:items-center @lg/target:gap-6",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col text-sm @lg/target:w-64 @lg/target:shrink-0",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline justify-between gap-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: row.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-base font-semibold tabular-nums",
+							children: write(row.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between gap-3 text-muted-foreground",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: row.detail
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 tabular-nums",
+							children: ["Target ", write(row.target)]
+						})]
+					}),
+					row.status && /* @__PURE__ */ jsxs("span", {
+						"data-slot": "target-status",
+						"data-kind": row.status.kind,
+						className: "mt-1 flex gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: cn("w-4 text-center", row.status.kind === "warning" && "text-warning", row.status.kind === "missed" && "text-muted-foreground"),
+							children: GLYPH[row.status.kind]
+						}), row.status.label]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "relative h-5 rounded-sm bg-muted @lg/target:flex-1",
+				children: [
+					row.bands?.map(([from, to], step) => /* @__PURE__ */ jsx("div", {
+						"data-slot": "target-band",
+						className: "absolute inset-y-0",
+						style: {
+							left: at(Math.min(from, to)),
+							right: `calc(100% - ${at(Math.max(from, to))})`,
+							background: `color-mix(in oklab, var(--foreground) ${BAND_DEPTH[Math.min(step, BAND_DEPTH.length - 1)]}%, var(--muted))`
+						}
+					}, `${from}:${to}`)),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "target-value",
+						className: "absolute inset-y-1.5 left-0 bg-foreground",
+						style: { width: at(row.value) }
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "target-tick",
+						className: "absolute -inset-y-1 w-0.5 -translate-x-1/2 bg-foreground ring-1 ring-card",
+						style: { left: at(row.target) }
+					})
+				]
+			})]
+		}, row.key ?? (typeof row.label === "string" ? row.label : index)))
+	});
+}
+//#endregion
+export { TargetRows };

package/dist/components/siyahi/tone-progress.d.ts

@@ -9,7 +9,7 @@ export interface ToneProgressProps extends ComponentProps<typeof Progress> {
   /** The meaning colour of the bar: a gain's share in --positive, a loss's in --negative. */
   tone: keyof typeof TONE;
 }
-/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+/** shadcn's Progress with its bar in a meaning colour, such as each channel's share of profit or loss. */
 export declare function ToneProgress({ tone, className, ...props }: ToneProgressProps): import("react").JSX.Element;
 //#endregion
 export {};

package/dist/components/siyahi/tone-progress.js

@@ -6,7 +6,7 @@ const TONE = {
 	positive: "**:data-[slot=progress-indicator]:bg-positive",
 	negative: "**:data-[slot=progress-indicator]:bg-negative"
 };
-/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+/** shadcn's Progress with its bar in a meaning colour, such as each channel's share of profit or loss. */
 function ToneProgress({ tone, className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress, {
 		"data-tone": tone,

package/dist/components/siyahi/treemap.d.ts

@@ -1,13 +1,13 @@
 //#region src/components/siyahi/treemap.d.ts
 export interface TreemapItem {
   name: string;
-  /** Tile area, such as the holding's value. Zero, negative and non-finite weights draw no tile. */
+  /** Tile area, such as a city's sales. Zero, negative and non-finite weights draw no tile. */
   weight: number;
   /** Signed change as a fraction; sets the heat. `null` when unknown: a muted tile marked "—". */
   change: number | null;
-  /** Unique key when names repeat, such as one symbol held at two brokers. Defaults to `name`. */
+  /** Unique key when names repeat, such as one city sold to online and in stores. Defaults to `name`. */
   key?: string;
-  /** Tiles of one group, such as a sector, sit together under the group's name, even a group of one. */
+  /** Tiles of one group, such as a region, sit together under the group's name, even a group of one. */
   group?: string;
 }
 export interface TreemapProps<T extends TreemapItem> {
@@ -15,7 +15,10 @@ export interface TreemapProps<T extends TreemapItem> {
   height: number;
   /** ±range: the change, as a fraction, that takes the deepest heat step. Default 0.05 (±5%); a range that is not a positive number uses the default. */
   range?: number;
-  /** Gets the item under the pointer, and null when the pointer moves onto a group's name or leaves the map. */
+  /**
+   * Gets the item under a mouse, and null when it moves onto a group's name or leaves the map. A tap fires no hover:
+   * on a touch screen it selects, so the page shows the tile in place rather than in a card at the finger.
+   */
   onHover?: (item: T | null) => void;
   /** The selected item, matched by key, whose tile carries a ring. Pass back what onSelect gave. */
   selected?: T | null;
@@ -26,7 +29,7 @@ export interface TreemapProps<T extends TreemapItem> {
    */
   onSelect?: (item: T | null) => void;
 }
-/** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
+/** Heat map of parts of a whole: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover, selected, onSelect }: TreemapProps<T>): import("react").JSX.Element;
 export interface TreemapLegendProps {
   /** The Treemap's own range, so each swatch matches its tiles. */

package/dist/components/siyahi/treemap.js

@@ -1,20 +1,18 @@
+import { useElementWidth } from "../../lib/use-element-width.js";
 import { useFormat } from "../../lib/format.js";
-import { heat, heatFill, heatRange, layout } from "../../lib/treemap.js";
+import { heat, heatFill, heatRange } from "../../lib/heat.js";
+import { fit, textWidth } from "../../lib/fit-text.js";
+import { layout } from "../../lib/treemap.js";
 import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useMemo, useState } from "react";
 //#region src/components/siyahi/treemap.tsx
-/** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
+/** Heat map of parts of a whole: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 function Treemap({ items, height, range, onHover, selected, onSelect }) {
-	const ref = useRef(null);
-	const [width, setWidth] = useState(0);
+	const [ref, width] = useElementWidth();
+	const [focusedKey, setFocusedKey] = useState(null);
 	const selectedKey = selected ? selected.key ?? selected.name : null;
 	const { pct } = useFormat();
-	useLayoutEffect(() => {
-		const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
-		if (ref.current) observer.observe(ref.current);
-		return () => observer.disconnect();
-	}, []);
 	const clearOutside = useEffectEvent((event) => {
 		const tile = event.target instanceof Element ? event.target.closest("[data-slot=\"treemap-tile\"]") : null;
 		if (!ref.current?.contains(tile)) onSelect?.(null);
@@ -25,8 +23,13 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		document.addEventListener("pointerdown", onPointerDown);
 		return () => document.removeEventListener("pointerdown", onPointerDown);
 	}, [selectedKey]);
-	const { groups, tiles } = layout(items, width, height);
-	const change = (value) => value === null ? "—" : `${value > 0 ? "▲ " : value < 0 ? "▼ " : ""}${pct(Math.abs(value))}`;
+	const { groups, tiles } = useMemo(() => layout(items, width, height), [
+		items,
+		width,
+		height
+	]);
+	const focusKey = tiles.some(({ item }) => (item.key ?? item.name) === focusedKey) ? focusedKey : tiles[0]?.item.key ?? tiles[0]?.item.name;
+	const change = (value) => value === null ? "—" : `${value > 0 ? "+" : value < 0 ? "−" : ""}${pct(Math.abs(value))}`;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "treemap",
@@ -34,32 +37,72 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		children: /* @__PURE__ */ jsxs("svg", {
 			width,
 			height,
-			role: "img",
-			"aria-label": "Treemap of holdings by weight and change",
+			role: onSelect ? "group" : "img",
+			"aria-label": "Treemap by weight and change",
 			className: "text-xs",
-			onPointerLeave: () => onHover?.(null),
+			onPointerLeave: (event) => event.pointerType === "mouse" && onHover?.(null),
 			children: [groups.map(({ group, ...box }) => /* @__PURE__ */ jsxs("svg", {
 				...box,
 				"data-slot": "treemap-group",
-				onPointerEnter: () => onHover?.(null),
-				children: [/* @__PURE__ */ jsx("rect", {
-					width: "100%",
-					height: "100%",
-					fill: "none",
-					pointerEvents: "all"
-				}), /* @__PURE__ */ jsx("text", {
-					x: 2,
-					y: 12,
-					className: "fill-muted-foreground font-medium",
-					children: group
-				})]
-			}, group)), tiles.map(({ item, ...box }) => {
+				onPointerEnter: (event) => event.pointerType === "mouse" && onHover?.(null),
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						width: "100%",
+						height: "100%",
+						fill: "none",
+						pointerEvents: "all"
+					}),
+					/* @__PURE__ */ jsx("title", { children: group }),
+					textWidth(group) <= box.width - 4 && /* @__PURE__ */ jsx("text", {
+						x: 2,
+						y: 12,
+						className: "fill-muted-foreground font-medium",
+						children: group
+					})
+				]
+			}, group)), tiles.map(({ item, ...box }, index) => {
 				const key = item.key ?? item.name;
 				return /* @__PURE__ */ jsxs("svg", {
 					...box,
 					"data-slot": "treemap-tile",
 					"data-selected": key === selectedKey || void 0,
-					onPointerEnter: () => onHover?.(item),
+					role: onSelect ? "button" : void 0,
+					tabIndex: onSelect ? key === focusKey ? 0 : -1 : void 0,
+					"aria-label": `${item.name}${item.group ? `, ${item.group}` : ""}, ${change(item.change)}`,
+					"aria-pressed": onSelect ? key === selectedKey : void 0,
+					onFocus: () => setFocusedKey(key),
+					onKeyDown: (event) => {
+						if (!onSelect) return;
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							onSelect(key === selectedKey ? null : item);
+						} else if (event.key === "Escape") onSelect(null);
+						else {
+							let next;
+							switch (event.key) {
+								case "Home":
+									next = 0;
+									break;
+								case "End":
+									next = tiles.length - 1;
+									break;
+								case "ArrowRight":
+								case "ArrowDown":
+									next = (index + 1) % tiles.length;
+									break;
+								case "ArrowLeft":
+								case "ArrowUp":
+									next = (index + tiles.length - 1) % tiles.length;
+									break;
+								default: return;
+							}
+							event.preventDefault();
+							const target = tiles[next]?.item;
+							if (target) setFocusedKey(target.key ?? target.name);
+							ref.current?.querySelectorAll("[data-slot=\"treemap-tile\"]")[next]?.focus();
+						}
+					},
+					onPointerEnter: (event) => event.pointerType === "mouse" && onHover?.(item),
 					onClick: () => onSelect?.(key === selectedKey ? null : item),
 					children: [
 						/* @__PURE__ */ jsx("rect", {
@@ -78,14 +121,14 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 							strokeWidth: 2,
 							className: "stroke-foreground"
 						}),
-						box.width > 56 && box.height > 36 && /* @__PURE__ */ jsxs("text", {
+						box.width >= MIN_LABEL_WIDTH && box.height >= MIN_LABEL_HEIGHT && /* @__PURE__ */ jsxs("text", {
 							x: 8,
 							y: 18,
 							className: "fill-foreground",
 							children: [/* @__PURE__ */ jsx("tspan", {
 								className: "font-medium",
-								children: item.name
-							}), /* @__PURE__ */ jsx("tspan", {
+								children: fit(item.name, box.width - 16)
+							}), box.height >= TWO_LINE_HEIGHT && /* @__PURE__ */ jsx("tspan", {
 								x: 8,
 								dy: 16,
 								children: change(item.change)
@@ -97,6 +140,9 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		})
 	});
 }
+const MIN_LABEL_WIDTH = 56;
+const MIN_LABEL_HEIGHT = 28;
+const TWO_LINE_HEIGHT = 44;
 function Swatch({ label, fill }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		"data-slot": "treemap-legend-swatch",
@@ -143,9 +189,9 @@ function TreemapLegend({ range, className }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex justify-between gap-2 tabular-nums",
 				children: [
-					/* @__PURE__ */ jsxs("span", { children: ["▼ over ", over] }),
+					/* @__PURE__ */ jsxs("span", { children: ["down over ", over] }),
 					/* @__PURE__ */ jsxs("span", { children: [pct(step, digits), " a step"] }),
-					/* @__PURE__ */ jsxs("span", { children: ["▲ over ", over] })
+					/* @__PURE__ */ jsxs("span", { children: ["up over ", over] })
 				]
 			}),
 			/* @__PURE__ */ jsxs("p", {

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

@@ -0,0 +1,51 @@
+import { SeriesChartProps } from "../../lib/chart-series.js";
+//#region src/components/siyahi/waterfall-chart.d.ts
+/**
+ * One bar of a waterfall. A change moves the running total by its value. A total draws the running total from zero;
+ * give it a value to set the total instead, as an opening balance does. Labels may repeat, such as "Balance" at
+ * both ends: each bar is placed by its position.
+ */
+export type WaterfallStep = {
+  kind: "change";
+  label: string;
+  value: number;
+} | {
+  kind: "total";
+  label: string;
+  value?: number;
+};
+/** A step as drawn: the running total after it, and the span its bar covers. */
+export interface WaterfallBar {
+  /** The step's position, as text: the category the bar is placed by. */
+  key: string;
+  label: string;
+  kind: "rise" | "fall" | "total";
+  /** How far the step moved the running total. */
+  change: number;
+  /** The running total after the step. */
+  level: number;
+  /** The bar's low and high ends, low first whichever way the step moved: Recharts reads a range that way. */
+  span: [number, number];
+  /** The bar picks up at the level the one before left, so a dashed line joins them. */
+  continues: boolean;
+}
+/** Walks the steps in order, keeping the running total. */
+export declare function waterfallBars(steps: readonly WaterfallStep[]): WaterfallBar[];
+export interface WaterfallChartCardProps extends Pick<SeriesChartProps<WaterfallBar, "key">, "title" | "description" | "action" | "height" | "valueFormatter" | "yTickFormatter" | "yLabel" | "referenceLines" | "placeholder" | "footer"> {
+  /** The bars in order: usually a total to start from, the changes, and a total to end on. */
+  steps: readonly WaterfallStep[];
+  /** Bars run sideways with the labels down the left, for long names such as product categories. */
+  horizontal?: boolean;
+  /** What the legend calls each kind of bar. */
+  labels?: {
+    rise: string;
+    fall: string;
+    total: string;
+  };
+}
+/**
+ * A running total bridged step by step: where it starts, each change that moved it, and where it ends, such as a
+ * year's profit built up month by month. Rises and falls float at the level the one before left; totals stand on zero.
+ */
+export declare function WaterfallChartCard({ steps, horizontal, labels, ...props }: WaterfallChartCardProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,147 @@
+import { useLocale } from "./siyahi-provider.js";
+import { ChartFrame, barFill } from "../../lib/chart-frame.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Bar, BarChart, Cell, ReferenceLine } from "recharts";
+//#region src/components/siyahi/waterfall-chart.tsx
+const span = (a, b) => [Math.min(a, b), Math.max(a, b)];
+/** Walks the steps in order, keeping the running total. */
+function waterfallBars(steps) {
+	let level = 0;
+	return steps.map((step, index) => {
+		const before = level;
+		const key = String(index);
+		if (step.kind === "total") {
+			level = step.value ?? level;
+			const continues = level === before;
+			return {
+				key,
+				label: step.label,
+				kind: "total",
+				change: level - before,
+				level,
+				span: span(0, level),
+				continues
+			};
+		}
+		level += step.value;
+		const kind = step.value < 0 ? "fall" : "rise";
+		return {
+			key,
+			label: step.label,
+			kind,
+			change: step.value,
+			level,
+			span: span(before, level),
+			continues: true
+		};
+	});
+}
+/**
+* The first step whose figure is not a number. Every bar after it stands on the running total, so a missing change
+* cannot be skipped without drawing wrong balances; the card says which step is missing instead.
+*/
+const unknownStep = (steps) => steps.find((step) => step.value !== void 0 && !Number.isFinite(step.value));
+const COLOR = {
+	rise: "var(--positive)",
+	fall: "var(--negative)",
+	total: "var(--chart-1)"
+};
+const LABELS = {
+	rise: "Increase",
+	fall: "Decrease",
+	total: "Total"
+};
+const MINUS = "−";
+const fill = (kind) => barFill(COLOR[kind]);
+function Legend({ labels }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center gap-4 pt-3",
+		children: [
+			"rise",
+			"fall",
+			"total"
+		].map((kind) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "size-2 shrink-0 rounded-xs border",
+				style: {
+					backgroundColor: fill(kind),
+					borderColor: COLOR[kind]
+				}
+			}), labels[kind]]
+		}, kind))
+	});
+}
+/**
+* A running total bridged step by step: where it starts, each change that moved it, and where it ends, such as a
+* year's profit built up month by month. Rises and falls float at the level the one before left; totals stand on zero.
+*/
+function WaterfallChartCard({ steps, horizontal = false, labels = LABELS, ...props }) {
+	const { numberLocale } = useLocale();
+	const bars = useMemo(() => waterfallBars(steps), [steps]);
+	const format = props.valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
+	const signed = (value) => `${value > 0 ? "+" : value < 0 ? MINUS : ""}${format(Math.abs(value))}`;
+	const names = new Map(bars.map((bar) => [bar.key, bar.label]));
+	const unknown = unknownStep(steps);
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		chart: BarChart,
+		...props,
+		placeholder: props.placeholder ?? (unknown && /* @__PURE__ */ jsxs("p", {
+			className: "text-sm text-muted-foreground",
+			children: [unknown.label, " has no figure, so the running total after it is unknown."]
+		})),
+		horizontal,
+		data: bars,
+		xKey: "key",
+		xFormatter: (key) => names.get(key) ?? key,
+		series: [{
+			key: "level",
+			label: labels.total,
+			color: COLOR.total
+		}],
+		legend: /* @__PURE__ */ jsx(Legend, { labels }),
+		tooltipRow: (_value, _name, item) => {
+			const bar = item.payload;
+			return (bar.kind === "total" ? [[labels.total, format(bar.level)]] : [[bar.kind === "rise" ? labels.rise : labels.fall, signed(bar.change)], ["Running total", format(bar.level)]]).map(([name, figure]) => /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "ml-auto font-mono font-medium text-foreground tabular-nums",
+					children: figure
+				})]
+			}, name));
+		},
+		children: [bars.slice(0, -1).map((bar, i) => {
+			const next = bars[i + 1];
+			if (!next.continues) return null;
+			const at = (key) => horizontal ? {
+				x: bar.level,
+				y: key
+			} : {
+				x: key,
+				y: bar.level
+			};
+			return /* @__PURE__ */ jsx(ReferenceLine, {
+				segment: [at(bar.key), at(next.key)],
+				stroke: "var(--muted-foreground)",
+				strokeDasharray: "2 2",
+				"data-slot": "waterfall-connector"
+			}, bar.key);
+		}), /* @__PURE__ */ jsx(Bar, {
+			dataKey: "span",
+			name: labels.total,
+			maxBarSize: horizontal ? 24 : 48,
+			isAnimationActive: false,
+			children: bars.map((bar) => /* @__PURE__ */ jsx(Cell, {
+				fill: fill(bar.kind),
+				stroke: COLOR[bar.kind],
+				strokeWidth: 1
+			}, bar.key))
+		})]
+	});
+}
+//#endregion
+export { WaterfallChartCard, waterfallBars };