@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/SankeyCard/SankeyCard.js

@@ -0,0 +1,788 @@
+import { ArcVegaChart } from "../../lib/vega/ArcVegaChart.js";
+import { arcEmbedOptions } from "../../lib/vega/embed.js";
+import { formatDate } from "../../lib/vega/formatters.js";
+import { useChartTokens } from "../../lib/vega/tokens.js";
+import { ArcTooltipRows, useArcTooltipHandler } from "../../lib/vega/tooltip.js";
+import { SANKEY_NODES_DATASET, SANKEY_RIBBONS_DATASET, SANKEY_SELECTED_PARAM, buildSankeyPlotSpec } from "./SankeyCard.chart.js";
+import { buildSankeyChartDescription, buildSankeyDescription, buildSankeyInsight, createSankeyFormatters, deriveSankeyState, layoutSankey, normalizeSankey, resolveSankeyLabels } from "./SankeyCard.model.js";
+import { Fragment, forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AILoader, Alert, Badge, Box, Button, Popover, PopoverPopup, PopoverTitle, PopoverTrigger, Skeleton, SkeletonGroup, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow, Tooltip, TooltipPopup, TooltipTrigger, cn } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SankeyCard/SankeyCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		label: "text-xs",
+		body: "text-xs",
+		plot: 180,
+		nodeRow: 26,
+		nodeWidth: 10,
+		nodeGap: 8,
+		labelSpace: 72,
+		headingPx: 16,
+		insightLinePx: 18
+	},
+	md: {
+		padding: "md",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		body: "text-sm",
+		plot: 240,
+		nodeRow: 30,
+		nodeWidth: 12,
+		nodeGap: 10,
+		labelSpace: 92,
+		headingPx: 18,
+		insightLinePx: 20
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-3",
+		gapPx: 12,
+		label: "text-sm",
+		body: "text-sm",
+		plot: 320,
+		nodeRow: 34,
+		nodeWidth: 14,
+		nodeGap: 12,
+		labelSpace: 108,
+		headingPx: 20,
+		insightLinePx: 20
+	}
+};
+const PLOT_PAD_Y = 2;
+const labelClasses = "min-w-0 font-sans font-medium text-muted-foreground";
+const captionClasses = "font-sans text-xs text-muted-foreground";
+const headerControlClasses = "size-6 min-w-0 text-muted-foreground hover:text-foreground";
+const panelStateClasses = "w-full max-w-none gap-2 px-2 py-2 [--artwork-box:3rem]";
+const MISSING_NAME = "Flow";
+const EMPTY_PALETTE = [];
+const EMPTY_ROWS = [];
+/** A flow's or node's colour as a swatch, so identity never rests on colour alone — the name is always beside it. */
+function SankeySwatch({ label, color }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 items-center gap-2",
+		children: [/* @__PURE__ */ jsx("svg", {
+			width: "14",
+			height: "10",
+			viewBox: "0 0 14 10",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "shrink-0",
+			style: { color },
+			children: /* @__PURE__ */ jsx("rect", {
+				x: "0",
+				y: "1",
+				width: "14",
+				height: "8",
+				rx: "1",
+				fill: "currentColor",
+				fillOpacity: "0.7"
+			})
+		}), label]
+	});
+}
+function InfoIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 11v5M12 8h.01" })]
+	});
+}
+/** A generated insight: words as text, values in bold. */
+function InsightText({ segments }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: segments.map((segment, index) => typeof segment === "string" ? /* @__PURE__ */ jsx(Fragment, { children: segment }, index) : /* @__PURE__ */ jsx("strong", { children: segment.value }, index)) });
+}
+function useMergedRef(forwarded) {
+	const inner = useRef(null);
+	return [inner, useCallback((node) => {
+		inner.current = node;
+		if (typeof forwarded === "function") forwarded(node);
+		else if (forwarded) forwarded.current = node;
+	}, [forwarded])];
+}
+function usePlotWidth(ref, enabled) {
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		if (!enabled) return;
+		const node = ref.current;
+		if (!node) return;
+		let frame = 0;
+		const measure = () => setWidth((previous) => {
+			const next = Math.round(node.getBoundingClientRect().width);
+			return previous === next ? previous : next;
+		});
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		observer.observe(node);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [ref, enabled]);
+	return width;
+}
+/**
+* A flow panel — the tenth member of the analytics card family, and the only
+* one whose subject is the **edges of a graph** rather than a measure.
+*
+* `links` of `{ source, target, value }` become a sankey: stages as columns,
+* nodes as rects, and each flow as a ribbon whose thickness is its quantity.
+* It answers the one question no other card can — *what became of this
+* volume, and where did it leak* — because only a flow diagram draws an edge
+* as a quantity while keeping the chain intact.
+*
+* The card enforces what makes the form honest. A cycle is broken and
+* reported rather than drawn. Volume that arrives and does not leave shows as
+* unfilled node and is named, never balanced away. A graph with fewer than
+* two columns is refused, because a part-to-whole belongs in a `Progress`
+* bar. Colour defaults to a single emphasis hue, since thickness and position
+* already carry the comparison. And every quantity a ribbon encodes is also
+* text — in the tooltip, the flow table with its share of the source, and the
+* node table with in, out and what did not reconcile — which is what makes
+* the weakest channel in the family safe to use.
+*/
+const SankeyCard = forwardRef(({ label, name: nameProp, hint, links, nodes, align = "justify", color = "none", nodeOrder, maxNodesPerStage = 8, nodeLabels = "all", showValues = false, stages, nodeWidth: nodeWidthProp, nodeGap: nodeGapProp, curvature = .5, iterations = 6, height: heightProp, selectedNode, defaultSelectedNode, onNodeSelect, format = "compact", shareFormat = "percent:0", formatValue, expectedStages = 3, expectedNodes = 3, insight, status = "ready", filtered = false, stale = false, updatedAt, updatedAtFormat = "day", onRetry, onClearFilters, size = "md", titleLevel = 3, locale, timeZone, labels: labelOverrides, description, action, defaultTableOpen = false, hideTableToggle = false, hideNotes = false, onEmbed, patchSpec, render, className, ...rest }, forwardedRef) => {
+	const labels = useMemo(() => resolveSankeyLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const name = nameProp ?? (typeof label === "string" ? label : MISSING_NAME);
+	const id = useId();
+	const headingId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+	const hintId = `${id}-hint`;
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const plotRef = useRef(null);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const tokens = useChartTokens(rootRef);
+	const [selectedState, setSelectedState] = useState(defaultSelectedNode ?? null);
+	const selectedKey = selectedNode !== void 0 ? selectedNode : selectedState;
+	const selectNode = useCallback((key) => {
+		if (selectedNode === void 0) setSelectedState(key);
+		onNodeSelect?.(key);
+	}, [selectedNode, onNodeSelect]);
+	const palette = tokens?.category ?? EMPTY_PALETTE;
+	const summary = useMemo(() => tokens ? normalizeSankey(nodes, links, {
+		align,
+		nodeOrder,
+		color,
+		maxNodesPerStage,
+		palette,
+		emphasis: tokens.emphasis,
+		context: tokens.context,
+		positive: tokens.divergingPositive,
+		negative: tokens.divergingNegative,
+		otherLabel: labels.other
+	}) : null, [
+		tokens,
+		nodes,
+		links,
+		align,
+		nodeOrder,
+		color,
+		maxNodesPerStage,
+		palette,
+		labels.other
+	]);
+	const formatters = useMemo(() => createSankeyFormatters({
+		format,
+		shareFormat,
+		locale,
+		formatValue
+	}), [
+		format,
+		shareFormat,
+		locale,
+		formatValue
+	]);
+	const hasData = (links?.length ?? 0) > 0;
+	const hasFlow = (summary?.count ?? 0) > 0;
+	const state = deriveSankeyState({
+		status,
+		hasFlow,
+		hasData,
+		filtered,
+		stages: summary?.stages ?? 0,
+		count: summary?.count ?? 0
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const hasPlot = showContent && summary != null && summary.count > 0;
+	const asOfText = useMemo(() => {
+		if (updatedAt == null) return null;
+		return typeof updatedAtFormat === "function" ? updatedAtFormat(new Date(updatedAt)) : formatDate(updatedAt, {
+			granularity: updatedAtFormat,
+			locale,
+			timeZone
+		});
+	}, [
+		updatedAt,
+		updatedAtFormat,
+		locale,
+		timeZone
+	]);
+	const cardDescription = description ?? buildSankeyDescription({
+		name,
+		state,
+		summary,
+		formatters,
+		asOfText,
+		labels
+	});
+	const nodeWidth = nodeWidthProp ?? sizes.nodeWidth;
+	const nodeGap = nodeGapProp ?? sizes.nodeGap;
+	const columnCount = summary?.stages ?? Math.max(2, expectedStages);
+	const busiestColumn = Math.max(expectedNodes, ...summary?.columns.map((column) => column.length) ?? [0]);
+	const plotHeight = Math.max(heightProp ?? sizes.plot, busiestColumn * sizes.nodeRow);
+	const blockHeight = plotHeight + 4;
+	const labelEndsOutward = nodeLabels === "ends";
+	const drawLabels = nodeLabels !== "none";
+	const gutterLeft = nodeWidth / 2 + (drawLabels && labelEndsOutward ? sizes.labelSpace : 0);
+	const gutterRight = nodeWidth / 2 + (drawLabels ? sizes.labelSpace : 0);
+	const layout = useMemo(() => layoutSankey(summary, {
+		plotHeight,
+		nodeGap,
+		iterations,
+		curvature,
+		labels: nodeLabels,
+		formatValue: formatters.formatValue,
+		formatShare: formatters.formatShare,
+		missing: "—"
+	}), [
+		summary,
+		plotHeight,
+		nodeGap,
+		iterations,
+		curvature,
+		nodeLabels,
+		formatters
+	]);
+	const datasets = useMemo(() => ({
+		[SANKEY_RIBBONS_DATASET]: layout.ribbons.length > 0 ? layout.ribbons : EMPTY_ROWS,
+		[SANKEY_NODES_DATASET]: layout.nodes.length > 0 ? layout.nodes : EMPTY_ROWS
+	}), [layout]);
+	const frameWidth = usePlotWidth(plotRef, hasPlot);
+	const chartWidth = Math.max(0, frameWidth - gutterLeft - gutterRight);
+	const selectable = onNodeSelect != null || selectedNode === void 0;
+	const spec = useMemo(() => {
+		if (!tokens) return null;
+		const interior = columnCount > 1 ? `max(32, width / ${columnCount - 1} - ${nodeWidth + 14})` : String(sizes.labelSpace);
+		const built = buildSankeyPlotSpec({
+			height: plotHeight,
+			nodeWidth,
+			padLeft: gutterLeft,
+			padRight: gutterRight,
+			padTop: PLOT_PAD_Y,
+			padBottom: PLOT_PAD_Y,
+			labelLimit: labelEndsOutward ? String(Math.max(32, sizes.labelSpace - 6)) : `datum.last ? ${Math.max(32, sizes.labelSpace - 6)} : ${interior}`,
+			labels: drawLabels,
+			labelEndsOutward,
+			showValues,
+			tooltip: true,
+			selectable,
+			valueFormat: locale ? `${format}@${locale}` : format,
+			fromTitle: labels.tableFrom,
+			toTitle: labels.tableTo,
+			valueTitle: labels.tableValue,
+			locale
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		plotHeight,
+		nodeWidth,
+		gutterLeft,
+		gutterRight,
+		columnCount,
+		sizes.labelSpace,
+		drawLabels,
+		labelEndsOutward,
+		showValues,
+		selectable,
+		format,
+		locale,
+		labels.tableFrom,
+		labels.tableTo,
+		labels.tableValue,
+		patchSpec
+	]);
+	const signals = useMemo(() => selectable ? { [SANKEY_SELECTED_PARAM]: selectedKey ?? null } : void 0, [selectable, selectedKey]);
+	const chartDescription = summary && hasPlot ? buildSankeyChartDescription({
+		name,
+		summary,
+		formatters,
+		labels
+	}) : void 0;
+	const tooltipContent = useCallback(({ item }) => {
+		const datum = item.datum;
+		if (!datum) return null;
+		if (datum.sl != null && datum.tl != null) return /* @__PURE__ */ jsx(ArcTooltipRows, { rows: [
+			[/* @__PURE__ */ jsx(SankeySwatch, {
+				color: datum.c,
+				label: `${datum.sl} → ${datum.tl}`
+			}, "flow"), ""],
+			[labels.tableValue, formatters.formatValue(datum.v)],
+			[labels.shareTitle, datum.sh ?? "—"]
+		] });
+		if (datum.label != null) return /* @__PURE__ */ jsx(ArcTooltipRows, { rows: [[datum.label, datum.vt ?? "—"]] });
+		return null;
+	}, [
+		formatters,
+		labels.tableValue,
+		labels.shareTitle
+	]);
+	const { handler: tooltipHandler, tooltip } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltipHandler }), [tooltipHandler]);
+	const generatedInsight = useMemo(() => insight === void 0 ? buildSankeyInsight({
+		name,
+		summary,
+		formatters,
+		labels
+	}) : null, [
+		insight,
+		name,
+		summary,
+		formatters,
+		labels
+	]);
+	const showInsight = insight === void 0 ? generatedInsight != null : insight != null && insight !== false;
+	const selectedInfo = summary?.nodes.find((node) => node.key === selectedKey) ?? null;
+	const announcement = selectedInfo ? labels.selectedNode(selectedInfo.label) : "";
+	const notes = [];
+	if (summary) {
+		if (summary.cycles > 0) notes.push(labels.cyclesNote(summary.cycles));
+		if (summary.imbalanced.length > 0) {
+			const amount = summary.imbalanced.reduce((sum, node) => sum + Math.abs(node.imbalance), 0);
+			notes.push(labels.imbalanceNote(summary.imbalanced.length, formatters.formatValue(amount)));
+		}
+		if (summary.folded) notes.push(labels.foldedNote(labels.other));
+		if (layout.hairlines > 0) notes.push(labels.hairlineNote(layout.hairlines));
+		if (summary.overIdentity) notes.push(labels.overIdentityNote(3));
+		const otherRejects = summary.rejected.filter((entry) => entry.reason !== "cycle");
+		if (otherRejects.length > 0) notes.push(labels.rejectedNote(otherRejects.length));
+	}
+	const showNotes = !hideNotes && showContent && notes.length > 0;
+	const showStages = (stages?.length ?? 0) > 0;
+	const bodyMinHeight = (showStages ? sizes.headingPx + sizes.gapPx : 0) + blockHeight + (showInsight ? sizes.gapPx + sizes.insightLinePx * 2 : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: setRootRef,
+		render: render ?? /* @__PURE__ */ jsx("figure", {}),
+		padding: sizes.padding,
+		"aria-labelledby": headingId,
+		"aria-describedby": descriptionId,
+		"aria-busy": busy || void 0,
+		"data-status": status,
+		"data-state": state,
+		"data-size": size,
+		"data-align": align,
+		"data-color": color,
+		"data-labels": nodeLabels,
+		"data-stale": stale ? "" : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-selected": selectedInfo?.key,
+		"data-cycles": summary && summary.cycles > 0 ? String(summary.cycles) : void 0,
+		"data-imbalanced": summary && summary.imbalanced.length > 0 ? "" : void 0,
+		"data-folded": summary?.folded ? "" : void 0,
+		"data-hairlines": layout.hairlines > 0 ? String(layout.hairlines) : void 0,
+		"data-over-identity": summary?.overIdentity ? "" : void 0,
+		className: cn("relative flex min-w-0 flex-col", sizes.gap, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: setPopoverContainer,
+				className: "contents"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsx(HeadingTag, {
+					id: headingId,
+					className: cn(labelClasses, sizes.label, "truncate"),
+					"data-part": "label",
+					children: label
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [
+						stale && /* @__PURE__ */ jsx(Badge, {
+							variant: "warning",
+							appearance: "soft",
+							size: "sm",
+							"data-part": "stale",
+							children: labels.stale
+						}),
+						hint && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							delay: 150,
+							render: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								iconOnly: true,
+								"aria-label": labels.about(name),
+								"aria-describedby": hintId,
+								className: headerControlClasses
+							}),
+							children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" })
+						}), /* @__PURE__ */ jsx(TooltipPopup, {
+							side: "top",
+							sideOffset: 6,
+							container: popoverContainer,
+							children: /* @__PURE__ */ jsx("span", {
+								id: hintId,
+								children: hint
+							})
+						})] }),
+						!hideTableToggle && hasPlot && summary && /* @__PURE__ */ jsxs(Popover, {
+							defaultOpen: defaultTableOpen,
+							children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									iconOnly: true,
+									"aria-label": labels.showTable(name),
+									className: headerControlClasses
+								}),
+								children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" })
+							}), /* @__PURE__ */ jsxs(PopoverPopup, {
+								side: "bottom",
+								align: "end",
+								sideOffset: 8,
+								collisionPadding: 8,
+								container: popoverContainer,
+								className: "w-[min(38rem,var(--available-width))]",
+								"data-part": "popover",
+								children: [
+									/* @__PURE__ */ jsx(PopoverTitle, {
+										className: "sr-only",
+										children: labels.tableCaption(name)
+									}),
+									/* @__PURE__ */ jsxs(TableContainer, {
+										variant: "plain",
+										tabIndex: 0,
+										role: "region",
+										"aria-label": labels.tableCaption(name),
+										className: "max-h-[min(24rem,calc(var(--available-height)-5rem))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+										"data-part": "table",
+										children: [/* @__PURE__ */ jsxs(Table, {
+											size: "sm",
+											stickyHeader: true,
+											hoverable: false,
+											children: [
+												/* @__PURE__ */ jsx(TableCaption, {
+													side: "top",
+													className: "sr-only",
+													children: labels.flowsCaption(name)
+												}),
+												/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+													/* @__PURE__ */ jsx(TableHead, { children: labels.tableFrom }),
+													/* @__PURE__ */ jsx(TableHead, { children: labels.tableTo }),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableValue
+													}),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableShare
+													})
+												] }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: summary.links.map((link) => /* @__PURE__ */ jsxs(TableRow, {
+													"data-tone": link.tone,
+													children: [
+														/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(SankeySwatch, {
+															color: link.color,
+															label: link.sourceLabel
+														}) }),
+														/* @__PURE__ */ jsx(TableCell, { children: link.targetLabel }),
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums",
+															children: formatters.formatValue(link.value)
+														}),
+														/* @__PURE__ */ jsx(TableCell, {
+															className: "text-right tabular-nums text-muted-foreground",
+															children: formatters.formatShare(link.share)
+														})
+													]
+												}, link.id)) })
+											]
+										}), /* @__PURE__ */ jsxs(Table, {
+											size: "sm",
+											stickyHeader: true,
+											hoverable: false,
+											className: "mt-4",
+											children: [
+												/* @__PURE__ */ jsx(TableCaption, {
+													side: "top",
+													className: "sr-only",
+													children: labels.nodesCaption(name)
+												}),
+												/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+													/* @__PURE__ */ jsx(TableHead, { children: labels.tableNode }),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableStage
+													}),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableIn
+													}),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableOut
+													}),
+													/* @__PURE__ */ jsx(TableHead, {
+														className: "text-right",
+														children: labels.tableUnaccounted
+													})
+												] }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: summary.nodes.map((node) => {
+													const isSelected = node.key === selectedKey;
+													return /* @__PURE__ */ jsxs(TableRow, {
+														"data-selected": isSelected ? "" : void 0,
+														children: [
+															/* @__PURE__ */ jsxs(TableCell, { children: [selectable ? /* @__PURE__ */ jsx(Button, {
+																variant: "ghost",
+																size: "sm",
+																"aria-pressed": isSelected,
+																"aria-label": labels.selectNode(node.label),
+																onClick: () => selectNode(isSelected ? null : node.key),
+																className: cn("h-auto max-w-full justify-start px-1 py-0.5", isSelected && "font-semibold text-foreground"),
+																"data-part": "node-button",
+																children: /* @__PURE__ */ jsx(SankeySwatch, {
+																	color: node.color,
+																	label: /* @__PURE__ */ jsx("span", {
+																		className: "min-w-0 truncate",
+																		children: node.label
+																	})
+																})
+															}) : /* @__PURE__ */ jsx(SankeySwatch, {
+																color: node.color,
+																label: node.label
+															}), node.folded && node.members.length > 0 && /* @__PURE__ */ jsx("span", {
+																className: cn(captionClasses, "mt-0.5 block"),
+																"data-part": "fold-members",
+																children: labels.otherMembers(node.members.join(", "))
+															})] }),
+															/* @__PURE__ */ jsx(TableCell, {
+																className: "text-right tabular-nums text-muted-foreground",
+																children: node.depth + 1
+															}),
+															/* @__PURE__ */ jsx(TableCell, {
+																className: "text-right tabular-nums",
+																children: node.isSource ? "—" : formatters.formatValue(node.inValue)
+															}),
+															/* @__PURE__ */ jsx(TableCell, {
+																className: "text-right tabular-nums",
+																children: node.isSink ? "—" : formatters.formatValue(node.outValue)
+															}),
+															/* @__PURE__ */ jsx(TableCell, {
+																className: cn("text-right tabular-nums", node.imbalance !== 0 && !node.isSource && !node.isSink ? "font-medium text-chart-negative" : "text-muted-foreground"),
+																children: node.isSource || node.isSink || node.imbalance === 0 ? "—" : formatters.formatValue(node.imbalance)
+															})
+														]
+													}, node.key);
+												}) })
+											]
+										})]
+									}),
+									selectedInfo && /* @__PURE__ */ jsx(Button, {
+										variant: "secondary",
+										size: "sm",
+										onClick: () => selectNode(null),
+										className: "mt-3",
+										"data-part": "clear-selection",
+										children: labels.clearSelection
+									})
+								]
+							})]
+						}),
+						action
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "sr-only",
+				children: cardDescription
+			}),
+			selectable && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				"data-part": "announcement",
+				children: announcement
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex min-w-0 flex-col",
+				style: { minHeight: bodyMinHeight },
+				children: [
+					state === "loading" && /* @__PURE__ */ jsxs(SkeletonGroup, {
+						className: cn("flex flex-col", sizes.gap),
+						children: [
+							showStages && /* @__PURE__ */ jsx("div", {
+								className: "flex gap-2",
+								children: Array.from({ length: Math.max(2, expectedStages) }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "flex-1",
+									style: { height: sizes.headingPx }
+								}, index))
+							}),
+							/* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-full",
+								style: { height: blockHeight }
+							}),
+							showInsight && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "size-4 shrink-0"
+								}), /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "w-full",
+									style: { height: sizes.insightLinePx }
+								})]
+							})
+						]
+					}),
+					state === "error" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "server-error",
+						scope: "inline",
+						title: labels.error,
+						description: false,
+						action: onRetry ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: onRetry,
+							children: labels.retry
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "no-match" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "no-results",
+						scope: "inline",
+						title: labels.noMatch,
+						description: false,
+						action: onClearFilters ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "secondary",
+							onClick: onClearFilters,
+							children: labels.clearFilters
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "insufficient" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.insufficient,
+						description: false,
+						className: cn(panelStateClasses, "my-auto"),
+						"data-part": "insufficient"
+					}),
+					showContent && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-col", sizes.gap, state === "refreshing" && "bg-veil"),
+						children: [
+							showStages && /* @__PURE__ */ jsx("div", {
+								className: "relative",
+								style: {
+									height: sizes.headingPx,
+									marginLeft: gutterLeft,
+									marginRight: gutterRight
+								},
+								"data-part": "stages",
+								children: layout.columnCenters.map((center, index) => {
+									const heading = stages?.[index];
+									if (!heading) return null;
+									const first = index === 0;
+									const last = index === layout.columnCenters.length - 1;
+									return /* @__PURE__ */ jsx("span", {
+										className: cn(captionClasses, "absolute top-0 max-w-[9rem] truncate font-medium", first ? "text-left" : last ? "text-right" : "text-center"),
+										style: {
+											left: `${center * 100}%`,
+											transform: first ? "none" : last ? "translateX(-100%)" : "translateX(-50%)"
+										},
+										children: heading
+									}, index);
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								ref: plotRef,
+								className: "relative w-full",
+								style: { height: blockHeight },
+								"data-part": "plot-block",
+								children: hasPlot && chartWidth > 0 && spec && /* @__PURE__ */ jsx(ArcVegaChart, {
+									spec,
+									options: embedOptions,
+									datasets,
+									description: chartDescription,
+									width: chartWidth,
+									height: plotHeight,
+									signals,
+									onEmbed,
+									className: "absolute inset-0 [&_svg]:block [&_.vega-bindings:empty]:hidden",
+									"data-part": "plot",
+									fallback: /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "absolute inset-0"
+									})
+								})
+							}),
+							showNotes && /* @__PURE__ */ jsx(Alert, {
+								variant: "warning",
+								appearance: "soft",
+								role: "note",
+								"data-part": "notes",
+								children: notes.join(" ")
+							}),
+							showInsight && /* @__PURE__ */ jsxs("div", {
+								className: cn("flex items-start gap-2 font-sans text-foreground", sizes.body),
+								"data-part": "insight",
+								children: [/* @__PURE__ */ jsx(AILoader, {
+									size: "sm",
+									state: "default",
+									label: labels.insightMark,
+									className: cn("shrink-0", size === "sm" ? "" : "mt-0.5")
+								}), /* @__PURE__ */ jsx("p", {
+									className: "min-w-0 flex-1 text-xs leading-[1.8] [&_strong]:font-semibold [&_strong]:text-foreground",
+									children: insight === void 0 && generatedInsight ? /* @__PURE__ */ jsx(InsightText, { segments: generatedInsight }) : insight
+								})]
+							})
+						]
+					})
+				]
+			}),
+			asOfText && /* @__PURE__ */ jsxs("figcaption", {
+				className: cn(captionClasses, "text-right"),
+				"data-part": "as-of",
+				children: [
+					labels.asOf,
+					" ",
+					asOfText
+				]
+			}),
+			tooltip
+		]
+	});
+});
+SankeyCard.displayName = "SankeyCard";
+//#endregion
+export { SankeyCard };