@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/SankeyChart-lkM5cpOC.js

@@ -0,0 +1,856 @@
+import { n as hashLabel } from "./colors-ClOUYXq0.js";
+import { ChartTooltip } from "./components/ChartTooltip.es.js";
+import { Colors } from "./tokens.es.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ResponsiveContainer, Sankey } from "recharts";
+import { createPortal } from "react-dom";
+// src/ds/components/SankeyChart/sankey-chart-utils.ts
+var EMPTY_GRAPH = {
+	nodes: [],
+	links: []
+};
+function getSankeyChartValue(value) {
+	if (typeof value === "string") {
+		const trimmedValue = value.trim();
+		return trimmedValue.length > 0 ? trimmedValue : void 0;
+	}
+	if (typeof value === "number" && Number.isFinite(value)) return value;
+}
+function reorderSankeyChartColumns(columns, startIndex, endIndex) {
+	if (startIndex === endIndex || startIndex < 0 || endIndex < 0 || startIndex >= columns.length || endIndex >= columns.length) return columns;
+	const reorderedColumns = [...columns];
+	const [movedColumn] = reorderedColumns.splice(startIndex, 1);
+	if (!movedColumn) return columns;
+	reorderedColumns.splice(endIndex, 0, movedColumn);
+	return reorderedColumns;
+}
+function buildSankeyChartGraph(data, columns, getRecordWeight = () => 1, getRecordNodeId, getRecordNodeLabel, getRecordNodeValue, getRecordLayoutWeight) {
+	if (columns.length < 2 || data.length === 0) return EMPTY_GRAPH;
+	const nodes = [];
+	const nodeIndexes = /* @__PURE__ */ new Map();
+	const linksById = /* @__PURE__ */ new Map();
+	const getNode = (column, value, label, displayValue) => {
+		const id = createNodeId(column.id, value);
+		const existingIndex = nodeIndexes.get(id);
+		const existingNode = existingIndex === void 0 ? void 0 : nodes[existingIndex];
+		if (existingIndex !== void 0 && existingNode) return {
+			node: existingNode,
+			index: existingIndex
+		};
+		const node = {
+			id,
+			name: String(value),
+			label,
+			column,
+			value,
+			displayValue
+		};
+		const index = nodes.length;
+		nodes.push(node);
+		nodeIndexes.set(id, index);
+		return {
+			node,
+			index
+		};
+	};
+	for (let columnIndex = 0; columnIndex < columns.length - 1; columnIndex += 1) {
+		const sourceColumn = columns[columnIndex];
+		const targetColumn = columns[columnIndex + 1];
+		if (!sourceColumn || !targetColumn) continue;
+		for (const record of data) {
+			const displayWeight = getRecordWeight(record);
+			const layoutWeight = getRecordLayoutWeight?.(record) ?? displayWeight;
+			if (!Number.isFinite(displayWeight) || displayWeight < 0 || !Number.isFinite(layoutWeight) || layoutWeight < 0) continue;
+			const sourceRecordValue = getSankeyChartValue(record[sourceColumn.id]);
+			const targetRecordValue = getSankeyChartValue(record[targetColumn.id]);
+			if (sourceRecordValue === void 0 || targetRecordValue === void 0) continue;
+			const sourceValue = getRecordNodeId ? getSankeyChartValue(getRecordNodeId(record, sourceColumn)) : sourceRecordValue;
+			const targetValue = getRecordNodeId ? getSankeyChartValue(getRecordNodeId(record, targetColumn)) : targetRecordValue;
+			if (sourceValue === void 0 || targetValue === void 0) continue;
+			const sourceLabel = getRecordNodeLabel?.(record, sourceColumn) ?? String(sourceRecordValue);
+			const targetLabel = getRecordNodeLabel?.(record, targetColumn) ?? String(targetRecordValue);
+			const sourceDisplayValue = getRecordNodeValue?.(record, sourceColumn);
+			const targetDisplayValue = getRecordNodeValue?.(record, targetColumn);
+			const source = getNode(sourceColumn, sourceValue, sourceLabel, sourceDisplayValue !== void 0 && Number.isFinite(sourceDisplayValue) && sourceDisplayValue >= 0 ? sourceDisplayValue : void 0);
+			const target = getNode(targetColumn, targetValue, targetLabel, targetDisplayValue !== void 0 && Number.isFinite(targetDisplayValue) && targetDisplayValue >= 0 ? targetDisplayValue : void 0);
+			const id = `${source.node.id}->${target.node.id}`;
+			const existingLink = linksById.get(id);
+			if (existingLink) {
+				existingLink.value += layoutWeight;
+				existingLink.displayValue += displayWeight;
+				existingLink.records.push(record);
+			} else linksById.set(id, {
+				id,
+				source: source.index,
+				target: target.index,
+				value: layoutWeight,
+				displayValue: displayWeight,
+				sourceNode: source.node,
+				targetNode: target.node,
+				records: [record]
+			});
+		}
+	}
+	return {
+		nodes,
+		links: [...linksById.values()]
+	};
+}
+var LABEL_CHARACTER_WIDTH_RATIO = .62;
+var LABEL_GUTTER = 16;
+var LABEL_ELLIPSIS = "…";
+function getSankeyLabelWidths({ chartWidth, columnCount, marginLeft, marginRight }) {
+	if (chartWidth <= 0 || columnCount < 2) return {
+		centered: Number.POSITIVE_INFINITY,
+		edge: Number.POSITIVE_INFINITY
+	};
+	const columnPitch = (chartWidth - marginLeft - marginRight - 7) / (columnCount - 1);
+	const centered = Math.max(0, columnPitch - LABEL_GUTTER);
+	return {
+		centered,
+		edge: Math.max(0, columnPitch + 7 / 2 - LABEL_GUTTER - centered / 2)
+	};
+}
+function truncateSankeyLabel(label, { fontSize, maxWidth, maxCharacters = Number.POSITIVE_INFINITY }) {
+	const widthLimit = Number.isFinite(maxWidth) ? Math.floor(maxWidth / (fontSize * LABEL_CHARACTER_WIDTH_RATIO)) : Number.POSITIVE_INFINITY;
+	const limit = Math.min(widthLimit, maxCharacters);
+	if (label.length <= limit) return label;
+	if (limit <= 1) return LABEL_ELLIPSIS;
+	return `${label.slice(0, limit - 1).trimEnd()}${LABEL_ELLIPSIS}`;
+}
+function buildFixedSankeyGeometry(graph, { top, bottom, left, right, nodePadding }) {
+	const nodes = /* @__PURE__ */ new Map();
+	const nodesByColumn = /* @__PURE__ */ new Map();
+	const currentNodeWeights = getSankeyChartCurrentNodeWeights(graph);
+	for (const node of graph.nodes) {
+		const columnNodes = nodesByColumn.get(node.column.id) ?? [];
+		columnNodes.push(node);
+		nodesByColumn.set(node.column.id, columnNodes);
+	}
+	const columns = [...nodesByColumn.values()];
+	const slotHeights = columns.map((columnNodes) => Math.max(0, (bottom - top - nodePadding * Math.max(0, columnNodes.length - 1)) / columnNodes.length));
+	const maximumNodeHeight = Math.min(...slotHeights) * .6;
+	columns.forEach((columnNodes, columnIndex) => {
+		const slotHeight = slotHeights[columnIndex] ?? 0;
+		const columnTotal = columnNodes.reduce((total, node) => total + (node.displayValue ?? currentNodeWeights.get(node.id) ?? 0), 0);
+		const x = columns.length > 1 ? left + (right - left) * columnIndex / (columns.length - 1) : left;
+		columnNodes.forEach((node, index) => {
+			const value = node.displayValue ?? currentNodeWeights.get(node.id) ?? 0;
+			const centerY = top + index * (slotHeight + nodePadding) + slotHeight / 2;
+			const height = columnTotal > 0 ? maximumNodeHeight * (value / columnTotal) : 0;
+			nodes.set(node.id, {
+				x,
+				centerY,
+				y: centerY - height / 2,
+				height
+			});
+		});
+	});
+	const links = /* @__PURE__ */ new Map();
+	const outgoingTotals = /* @__PURE__ */ new Map();
+	const incomingTotals = /* @__PURE__ */ new Map();
+	for (const link of graph.links) {
+		outgoingTotals.set(link.sourceNode.id, (outgoingTotals.get(link.sourceNode.id) ?? 0) + link.displayValue);
+		incomingTotals.set(link.targetNode.id, (incomingTotals.get(link.targetNode.id) ?? 0) + link.displayValue);
+	}
+	const sourceOffsets = new Map([...nodes].map(([id, geometry]) => [id, geometry.y]));
+	const targetOffsets = new Map([...nodes].map(([id, geometry]) => [id, geometry.y]));
+	for (const link of graph.links) {
+		const sourceGeometry = nodes.get(link.sourceNode.id);
+		const targetGeometry = nodes.get(link.targetNode.id);
+		if (!sourceGeometry || !targetGeometry) continue;
+		const sourceTotal = outgoingTotals.get(link.sourceNode.id) ?? 0;
+		const targetTotal = incomingTotals.get(link.targetNode.id) ?? 0;
+		const sourceWidth = sourceTotal > 0 ? sourceGeometry.height * (link.displayValue / sourceTotal) : 0;
+		const targetWidth = targetTotal > 0 ? targetGeometry.height * (link.displayValue / targetTotal) : 0;
+		const sourceOffset = sourceOffsets.get(link.sourceNode.id) ?? sourceGeometry.y;
+		const targetOffset = targetOffsets.get(link.targetNode.id) ?? targetGeometry.y;
+		links.set(link.id, {
+			sourceX: sourceGeometry.x + 7,
+			targetX: targetGeometry.x,
+			sourceY: sourceOffset + sourceWidth / 2,
+			targetY: targetOffset + targetWidth / 2,
+			sourceWidth,
+			targetWidth
+		});
+		sourceOffsets.set(link.sourceNode.id, sourceOffset + sourceWidth);
+		targetOffsets.set(link.targetNode.id, targetOffset + targetWidth);
+	}
+	return {
+		nodes,
+		links
+	};
+}
+function getSankeyChartNodeWeights(graph) {
+	const incomingWeights = /* @__PURE__ */ new Map();
+	const outgoingWeights = /* @__PURE__ */ new Map();
+	for (const link of graph.links) {
+		outgoingWeights.set(link.sourceNode.id, (outgoingWeights.get(link.sourceNode.id) ?? 0) + link.value);
+		incomingWeights.set(link.targetNode.id, (incomingWeights.get(link.targetNode.id) ?? 0) + link.value);
+	}
+	return new Map(graph.nodes.map((node) => [node.id, Math.max(incomingWeights.get(node.id) ?? 0, outgoingWeights.get(node.id) ?? 0)]));
+}
+function getSankeyChartCurrentNodeWeights(graph) {
+	const incomingWeights = /* @__PURE__ */ new Map();
+	const outgoingWeights = /* @__PURE__ */ new Map();
+	for (const link of graph.links) {
+		outgoingWeights.set(link.sourceNode.id, (outgoingWeights.get(link.sourceNode.id) ?? 0) + link.displayValue);
+		incomingWeights.set(link.targetNode.id, (incomingWeights.get(link.targetNode.id) ?? 0) + link.displayValue);
+	}
+	return new Map(graph.nodes.map((node) => [node.id, Math.max(incomingWeights.get(node.id) ?? 0, outgoingWeights.get(node.id) ?? 0)]));
+}
+function getSankeyChartCurveSelection(link) {
+	return {
+		source: {
+			column: link.sourceNode.column,
+			value: link.sourceNode.value
+		},
+		target: {
+			column: link.targetNode.column,
+			value: link.targetNode.value
+		},
+		records: link.records
+	};
+}
+function getSankeyChartNodeSelection(node) {
+	return {
+		column: node.column,
+		value: node.value
+	};
+}
+function createNodeId(columnId, value) {
+	return JSON.stringify([
+		columnId,
+		typeof value,
+		value
+	]);
+}
+// src/ds/components/SankeyChart/sankeyColor.ts
+var sankeySeriesColors = [
+	"var(--chart-blue)",
+	"var(--chart-orange)",
+	"var(--chart-green)",
+	"var(--chart-purple)",
+	"var(--chart-pink)",
+	"var(--chart-red)",
+	"var(--chart-amber)",
+	"var(--chart-blue-deep)"
+];
+function buildSankeyColorMap(names) {
+	const colors = {};
+	for (const name of names) colors[name] = sankeySeriesColors[hashLabel(name) % sankeySeriesColors.length] ?? "var(--chart-blue)";
+	return colors;
+}
+// src/ds/components/SankeyChart/sankey-context.tsx
+var SankeyControlsContext = createContext(void 0);
+var SankeyRenderContext = createContext(void 0);
+function Sankey$1({ data, columns, children, columnOrder, onColumnOrderChange, visibleColumnIds, onVisibleColumnIdsChange, getRecordWeight, getRecordLayoutWeight, getRecordNodeId, getRecordNodeLabel, getRecordNodeValue, getColumnColor }) {
+	const columnIds = columns.map((column) => column.id);
+	const [internalOrder, setInternalOrder] = useState(columnIds);
+	const [internalVisibleIds, setInternalVisibleIds] = useState(columnIds);
+	const orderedColumns = orderColumns(columns, columnOrder ?? internalOrder);
+	const visibleIds = new Set(visibleColumnIds ?? internalVisibleIds);
+	const enabledColumns = orderedColumns.filter((column) => visibleIds.has(column.id));
+	const graph = buildSankeyChartGraph(data, enabledColumns, getRecordWeight, getRecordNodeId, getRecordNodeLabel, getRecordNodeValue, getRecordLayoutWeight);
+	const defaultColorMap = buildSankeyColorMap(graph.nodes.map((node) => String(node.value)));
+	const colorMap = Object.fromEntries(graph.nodes.map((node) => [String(node.value), getColumnColor?.(node.column) ?? defaultColorMap[String(node.value)] ?? "var(--chart-blue)"]));
+	const setVisibleColumns = (nextIds) => {
+		if (visibleColumnIds === void 0) setInternalVisibleIds(nextIds);
+		onVisibleColumnIdsChange?.(nextIds);
+	};
+	const setColumnOrder = (nextOrder) => {
+		if (columnOrder === void 0) setInternalOrder(nextOrder);
+		onColumnOrderChange?.(nextOrder);
+	};
+	const toggleColumn = (columnId) => {
+		const nextIds = visibleIds.has(columnId) ? orderedColumns.filter((column) => visibleIds.has(column.id) && column.id !== columnId).map((column) => column.id) : orderedColumns.filter((column) => visibleIds.has(column.id) || column.id === columnId).map((column) => column.id);
+		setVisibleColumns(nextIds);
+	};
+	const reorderColumns = (sourceIndex, destinationIndex) => {
+		const enabledIterator = reorderSankeyChartColumns(enabledColumns, sourceIndex, destinationIndex)[Symbol.iterator]();
+		const nextColumns = orderedColumns.map((column) => visibleIds.has(column.id) ? enabledIterator.next().value ?? column : column);
+		setColumnOrder(nextColumns.map((column) => column.id));
+	};
+	const controlColumns = orderedColumns.map((column) => ({
+		...column,
+		visible: visibleIds.has(column.id)
+	}));
+	return /* @__PURE__ */ jsx(SankeyControlsContext.Provider, {
+		value: {
+			columns: controlColumns,
+			toggleColumn,
+			reorderColumns
+		},
+		children: /* @__PURE__ */ jsx(SankeyRenderContext.Provider, {
+			value: {
+				graph,
+				enabledColumns,
+				colorMap,
+				usesFixedGeometry: getRecordLayoutWeight !== void 0
+			},
+			children
+		})
+	});
+}
+function useSankey() {
+	const context = useContext(SankeyControlsContext);
+	if (!context) throw new Error("useSankey must be used within Sankey");
+	return context;
+}
+function useSankeyRenderContext() {
+	const context = useContext(SankeyRenderContext);
+	if (!context) throw new Error("SankeyChart must be used within Sankey");
+	return context;
+}
+function orderColumns(columns, order) {
+	const positions = new Map(order.map((id, index) => [id, index]));
+	return [...columns].sort((left, right) => (positions.get(left.id) ?? columns.length) - (positions.get(right.id) ?? columns.length));
+}
+// src/ds/components/SankeyChart/use-sankey-hover-tooltip.ts
+var TOOLTIP_TOP_FLIP_THRESHOLD = 120;
+var TOOLTIP_EDGE_INSET = 16;
+var TOOLTIP_RIGHT_INSET = 336;
+function useSankeyHoverTooltip(enabled) {
+	const id = useId();
+	const [isHovered, setIsHovered] = useState(false);
+	const [isFocused, setIsFocused] = useState(false);
+	const [position, setPosition] = useState();
+	function showAt(target) {
+		if (!enabled) return;
+		const rect = target.getBoundingClientRect();
+		const placement = rect.top < TOOLTIP_TOP_FLIP_THRESHOLD ? "below" : "above";
+		setPosition({
+			left: Math.min(Math.max(rect.left, TOOLTIP_EDGE_INSET), Math.max(window.innerWidth - TOOLTIP_RIGHT_INSET, TOOLTIP_EDGE_INSET)),
+			top: placement === "above" ? rect.top - 8 : rect.bottom + 8,
+			placement
+		});
+	}
+	return {
+		id,
+		position,
+		isVisible: Boolean(enabled && position && (isHovered || isFocused)),
+		showOnHover(target) {
+			setIsHovered(true);
+			showAt(target);
+		},
+		hideOnLeave() {
+			setIsHovered(false);
+		},
+		showOnFocus(target) {
+			setIsFocused(true);
+			showAt(target);
+		},
+		hideOnBlur() {
+			setIsFocused(false);
+		}
+	};
+}
+// src/ds/components/SankeyChart/sankey-portal-tooltip.tsx
+function SankeyPortalTooltip({ id, title, description, position, visible }) {
+	if (!visible || !position) return null;
+	return createPortal(/* @__PURE__ */ jsxs(ChartTooltip, {
+		"aria-label": `${title}: ${description}`,
+		className: "pointer-events-none fixed z-50 p-2",
+		id,
+		role: "tooltip",
+		style: {
+			left: position.left,
+			maxWidth: `min(320px, calc(100vw - 2rem))`,
+			top: position.top,
+			transform: position.placement === "above" ? "translateY(-100%)" : void 0,
+			width: "max-content"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-column",
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: "whitespace-pre-wrap text-muted-foreground",
+			children: description
+		})]
+	}), document.body);
+}
+// src/ds/components/SankeyChart/use-sankey-chart-measurements.ts
+function useSankeyChartMeasurements({ graph, height, margin, usesFixedGeometry }) {
+	const chartContainerRef = useRef(null);
+	const [measuredHeight, setMeasuredHeight] = useState(typeof height === "number" ? height : 320);
+	const [measuredWidth, setMeasuredWidth] = useState(800);
+	useEffect(() => {
+		const element = chartContainerRef.current;
+		if (!element) return;
+		const updateDimensions = () => {
+			if (element.offsetHeight > 0) setMeasuredHeight(element.offsetHeight);
+			if (element.offsetWidth > 0) setMeasuredWidth(element.offsetWidth);
+		};
+		updateDimensions();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(updateDimensions);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [height]);
+	return {
+		chartContainerRef,
+		fixedGeometry: useMemo(() => usesFixedGeometry ? buildFixedSankeyGeometry(graph, {
+			top: Number(margin?.top ?? 64),
+			bottom: measuredHeight - Number(margin?.bottom ?? 12),
+			left: Number(margin?.left ?? 160),
+			right: measuredWidth - Number(margin?.right ?? 160) - 7,
+			nodePadding: 8
+		}) : void 0, [
+			graph,
+			margin?.bottom,
+			margin?.left,
+			margin?.right,
+			margin?.top,
+			measuredHeight,
+			measuredWidth,
+			usesFixedGeometry
+		]),
+		labelWidths: getSankeyLabelWidths({
+			chartWidth: measuredWidth,
+			columnCount: new Set(graph.nodes.map((node) => node.column.id)).size,
+			marginLeft: Number(margin?.left ?? 160),
+			marginRight: Number(margin?.right ?? 160)
+		})
+	};
+}
+// src/ds/components/SankeyChart/use-sankey-geometry-transition.ts
+var TRANSITION_DURATION_MS = 850;
+function mix(from, to, progress) {
+	return from + (to - from) * progress;
+}
+function interpolateNode(from, to, progress) {
+	return {
+		x: mix(from.x, to.x, progress),
+		y: mix(from.y, to.y, progress),
+		centerY: mix(from.centerY, to.centerY, progress),
+		height: mix(from.height, to.height, progress)
+	};
+}
+function interpolateLink(from, to, progress) {
+	return {
+		sourceX: mix(from.sourceX, to.sourceX, progress),
+		targetX: mix(from.targetX, to.targetX, progress),
+		sourceY: mix(from.sourceY, to.sourceY, progress),
+		targetY: mix(from.targetY, to.targetY, progress),
+		sourceWidth: mix(from.sourceWidth, to.sourceWidth, progress),
+		targetWidth: mix(from.targetWidth, to.targetWidth, progress)
+	};
+}
+/**
+* Preserves node identity while pairing replaced links by render order. That
+* synthetic pairing keeps every ribbon moving continuously through a reorder,
+* even though changing adjacency means the old and new links have different IDs.
+*/
+function interpolateSankeyGeometry(from, to, progress) {
+	const replacedPreviousLinks = [...from.links].filter(([id]) => !to.links.has(id)).map(([, link]) => link);
+	const nodes = /* @__PURE__ */ new Map();
+	const links = /* @__PURE__ */ new Map();
+	for (const [id, target] of to.nodes) nodes.set(id, interpolateNode(from.nodes.get(id) ?? target, target, progress));
+	let replacedLinkIndex = 0;
+	for (const [id, target] of to.links) {
+		const matchingSource = from.links.get(id);
+		const syntheticSource = matchingSource ? void 0 : replacedPreviousLinks[replacedLinkIndex++];
+		links.set(id, interpolateLink(matchingSource ?? syntheticSource ?? target, target, progress));
+	}
+	return {
+		nodes,
+		links
+	};
+}
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var SankeyGeometryMotionStore = class {
+	animationFrame = 0;
+	key;
+	listeners = /* @__PURE__ */ new Set();
+	snapshot;
+	target;
+	transition;
+	constructor(key, geometry) {
+		this.key = key;
+		this.snapshot = geometry;
+		this.target = geometry;
+	}
+	getSnapshot = () => this.snapshot;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	};
+	transitionTo(key, geometry) {
+		if (key === this.key && geometry === this.target) return;
+		const keyChanged = key !== this.key;
+		this.key = key;
+		this.target = geometry;
+		if (!keyChanged && geometry && this.transition) {
+			this.transition = {
+				...this.transition,
+				to: geometry
+			};
+			return;
+		}
+		cancelAnimationFrame(this.animationFrame);
+		this.animationFrame = 0;
+		if (!keyChanged || !geometry || !this.snapshot || prefersReducedMotion()) {
+			this.transition = void 0;
+			this.publish(geometry);
+			return;
+		}
+		this.transition = {
+			from: this.snapshot,
+			to: geometry,
+			startedAt: performance.now()
+		};
+		this.animationFrame = requestAnimationFrame(this.animate);
+	}
+	dispose() {
+		cancelAnimationFrame(this.animationFrame);
+		this.listeners.clear();
+	}
+	animate = (now) => {
+		const transition = this.transition;
+		if (!transition) return;
+		const elapsed = Math.min((now - transition.startedAt) / TRANSITION_DURATION_MS, 1);
+		const progress = 1 - (1 - elapsed) ** 3;
+		this.publish(interpolateSankeyGeometry(transition.from, transition.to, progress));
+		if (elapsed < 1) {
+			this.animationFrame = requestAnimationFrame(this.animate);
+			return;
+		}
+		this.transition = void 0;
+		this.animationFrame = 0;
+	};
+	publish(geometry) {
+		this.snapshot = geometry;
+		for (const listener of this.listeners) listener();
+	}
+};
+function useSankeyGeometryTransition({ geometry, transitionKey }) {
+	const [store] = useState(() => new SankeyGeometryMotionStore(transitionKey, geometry));
+	const animatedGeometry = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	useEffect(() => {
+		store.transitionTo(transitionKey, geometry);
+	}, [
+		geometry,
+		store,
+		transitionKey
+	]);
+	useEffect(() => () => store.dispose(), [store]);
+	return animatedGeometry;
+}
+// src/ds/components/SankeyChart/sankey-chart.tsx
+var NODE_LABEL_FONT_SIZE = 10;
+var COLUMN_LABEL_FONT_SIZE = 12;
+var NODE_LABEL_MAX_CHARACTERS = 23;
+function SankeyChart({ height = 320, className, margin = {
+	top: 64,
+	right: 160,
+	bottom: 12,
+	left: 160
+}, onCurveClick, onNodeClick, isNodeClickable, getColumnDescription, hideColumnLabels = false, geometryTransitionKey, getNodeColor, getLinkColor }) {
+	const { graph, enabledColumns, colorMap, usesFixedGeometry } = useSankeyRenderContext();
+	const { chartContainerRef, fixedGeometry, labelWidths } = useSankeyChartMeasurements({
+		graph,
+		height,
+		margin,
+		usesFixedGeometry
+	});
+	const animatedGeometry = useSankeyGeometryTransition({
+		geometry: fixedGeometry,
+		transitionKey: geometryTransitionKey
+	});
+	const [hoveredSourceName, setHoveredSourceName] = useState();
+	const [focusedSourceName, setFocusedSourceName] = useState();
+	const activeSourceName = hoveredSourceName ?? focusedSourceName;
+	const firstColumnId = enabledColumns[0]?.id;
+	const lastColumnId = enabledColumns.at(-1)?.id;
+	const nodeWeights = getSankeyChartNodeWeights(graph);
+	const columnTotals = /* @__PURE__ */ new Map();
+	for (const node of graph.nodes) {
+		const nodeValue = node.displayValue ?? nodeWeights.get(node.id) ?? 0;
+		columnTotals.set(node.column.id, (columnTotals.get(node.column.id) ?? 0) + nodeValue);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-w-0", className),
+		children: graph.links.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center rounded-md border border-border text-caption text-muted-foreground",
+			style: { height },
+			children: "Select at least two columns with data to display a flow"
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: chartContainerRef,
+			style: { height },
+			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				initialDimension: {
+					width: 800,
+					height: typeof height === "number" ? height : 320
+				},
+				children: /* @__PURE__ */ jsx(Sankey, {
+					data: graph,
+					nodeWidth: 7,
+					nodePadding: 56,
+					margin,
+					node: (props) => {
+						const node = graph.nodes[props.index];
+						const showColumnLabel = !hideColumnLabels && node ? graph.nodes.findIndex((candidate) => candidate.column.id === node.column.id) === props.index : false;
+						const nodeGeometry = node ? animatedGeometry?.nodes.get(node.id) : void 0;
+						const selection = node ? getSankeyChartNodeSelection(node) : void 0;
+						const clickable = Boolean(onNodeClick && selection && (isNodeClickable === void 0 || isNodeClickable(selection)));
+						return /* @__PURE__ */ jsx(SankeyNode, {
+							...props,
+							x: nodeGeometry?.x ?? props.x,
+							y: nodeGeometry?.y ?? props.y,
+							height: nodeGeometry?.height ?? props.height,
+							colorMap,
+							color: selection ? getNodeColor?.(selection) : void 0,
+							columnLabel: node?.column.label,
+							columnDescription: node ? getColumnDescription?.(node.column) : void 0,
+							label: node?.label,
+							nodeValue: node?.displayValue,
+							layoutValue: nodeGeometry ? void 0 : node ? nodeWeights.get(node.id) : void 0,
+							columnTotal: node ? columnTotals.get(node.column.id) ?? 0 : 0,
+							showColumnLabel,
+							isFirstColumn: node?.column.id === firstColumnId,
+							isLastColumn: node?.column.id === lastColumnId,
+							labelWidths,
+							onFocusChange: setFocusedSourceName,
+							onHoverChange: setHoveredSourceName,
+							clickable,
+							onSelect: () => {
+								if (selection && clickable) onNodeClick?.(selection);
+							}
+						});
+					},
+					link: (props) => {
+						const link = graph.links[props.index];
+						const selection = link ? getSankeyChartCurveSelection(link) : void 0;
+						const linkGeometry = link ? animatedGeometry?.links.get(link.id) : void 0;
+						const sourceX = linkGeometry?.sourceX ?? props.sourceX;
+						const targetX = linkGeometry?.targetX ?? props.targetX;
+						const fixedControlX = linkGeometry ? (sourceX + targetX) / 2 : void 0;
+						return /* @__PURE__ */ jsx(SankeyLink, {
+							...props,
+							sourceX,
+							targetX,
+							sourceControlX: fixedControlX ?? props.sourceControlX,
+							targetControlX: fixedControlX ?? props.targetControlX,
+							sourceY: linkGeometry?.sourceY ?? props.sourceY,
+							targetY: linkGeometry?.targetY ?? props.targetY,
+							sourceWidth: linkGeometry?.sourceWidth,
+							targetWidth: linkGeometry?.targetWidth,
+							colorMap,
+							highlighted: String(props.payload.source.name ?? "") === activeSourceName,
+							color: selection ? getLinkColor?.(selection) : void 0,
+							sourceColor: selection ? getNodeColor?.(selection.source) : void 0,
+							targetColor: selection ? getNodeColor?.(selection.target) : void 0,
+							displayValue: link?.displayValue,
+							layoutValue: link?.value,
+							onHoverChange: setHoveredSourceName,
+							clickable: onCurveClick !== void 0,
+							onSelect: () => {
+								if (link) onCurveClick?.(getSankeyChartCurveSelection(link));
+							}
+						});
+					}
+				})
+			})
+		})
+	});
+}
+function SankeyNode({ x, y, width, height, payload, colorMap, color, columnLabel, columnDescription, label, nodeValue, layoutValue, columnTotal, showColumnLabel, isFirstColumn, isLastColumn, labelWidths, clickable, onFocusChange, onHoverChange, onSelect }) {
+	const name = typeof payload.name === "string" || typeof payload.name === "number" ? String(payload.name) : "";
+	const displayLabel = label ?? name;
+	const descriptionIndex = displayLabel.indexOf("\n");
+	const visibleDisplayLabel = descriptionIndex >= 0 ? displayLabel.slice(0, descriptionIndex) : displayLabel;
+	const description = descriptionIndex >= 0 ? displayLabel.slice(descriptionIndex + 1) : void 0;
+	const accessibleLabel = displayLabel.replaceAll("\n", ". ");
+	const nodeLabelWidth = isFirstColumn || isLastColumn ? labelWidths.edge : labelWidths.centered;
+	const visibleLabel = truncateSankeyLabel(visibleDisplayLabel, {
+		fontSize: NODE_LABEL_FONT_SIZE,
+		maxWidth: nodeLabelWidth,
+		maxCharacters: NODE_LABEL_MAX_CHARACTERS
+	});
+	const visibleColumnLabel = columnLabel ? truncateSankeyLabel(columnLabel, {
+		fontSize: COLUMN_LABEL_FONT_SIZE,
+		maxWidth: nodeLabelWidth
+	}) : void 0;
+	const tooltip = useSankeyHoverTooltip(description !== void 0);
+	const numericValue = nodeValue ?? (typeof payload.value === "number" ? payload.value : Number(payload.value));
+	const value = Number.isFinite(numericValue) ? String(numericValue) : "";
+	const percentage = columnTotal > 0 && Number.isFinite(numericValue) ? Math.round(numericValue / columnTotal * 100) : 0;
+	const visibleHeight = scaleSankeyDimension(height, numericValue, layoutValue);
+	const visibleY = y + (height - visibleHeight) / 2;
+	const textAnchor = isFirstColumn ? "start" : isLastColumn ? "end" : "middle";
+	const labelX = isFirstColumn ? x : isLastColumn ? x + width : x + width / 2;
+	const nodeFill = colorMap[name] ?? "var(--chart-blue)";
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onSelect();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		showColumnLabel && visibleColumnLabel && columnLabel ? /* @__PURE__ */ jsx(SankeyColumnHeader, {
+			x: labelX,
+			textAnchor,
+			fill: color ? Colors.foreground : nodeFill,
+			label: visibleColumnLabel,
+			fullLabel: columnLabel,
+			description: columnDescription
+		}) : null,
+		/* @__PURE__ */ jsxs("g", {
+			"aria-describedby": description ? tooltip.id : void 0,
+			"aria-label": `${accessibleLabel}: ${value} ${numericValue === 1 ? "trace" : "traces"} (${percentage}%)`,
+			className: "outline-hidden focus-visible:[&>rect]:stroke-foreground focus-visible:[&>rect]:stroke-2",
+			onClick: clickable ? onSelect : void 0,
+			onKeyDown: clickable ? handleKeyDown : void 0,
+			role: clickable ? "button" : void 0,
+			onFocus: (event) => {
+				onFocusChange(name);
+				tooltip.showOnFocus(event.currentTarget);
+			},
+			onBlur: () => {
+				onFocusChange(void 0);
+				tooltip.hideOnBlur();
+			},
+			onMouseEnter: (event) => {
+				onHoverChange(name);
+				tooltip.showOnHover(event.currentTarget);
+			},
+			onMouseLeave: () => {
+				onHoverChange(void 0);
+				tooltip.hideOnLeave();
+			},
+			style: { cursor: clickable ? "pointer" : void 0 },
+			tabIndex: 0,
+			children: [
+				description ? null : /* @__PURE__ */ jsx("title", { children: displayLabel }),
+				/* @__PURE__ */ jsx("rect", {
+					x,
+					y: visibleY,
+					width,
+					height: visibleHeight,
+					rx: 3,
+					fill: color ?? nodeFill
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: labelX,
+					y: y - 24,
+					textAnchor,
+					fill: Colors.foreground,
+					fontSize: NODE_LABEL_FONT_SIZE,
+					fontFamily: "var(--font-mono)",
+					children: visibleLabel
+				}),
+				/* @__PURE__ */ jsxs("text", {
+					x: labelX,
+					y: y - 8,
+					textAnchor,
+					fill: Colors["muted-foreground"],
+					fontSize: 9.5,
+					children: [
+						value,
+						" (",
+						percentage,
+						"%)"
+					]
+				})
+			]
+		}),
+		description ? /* @__PURE__ */ jsx(SankeyPortalTooltip, {
+			id: tooltip.id,
+			title: visibleDisplayLabel,
+			description,
+			position: tooltip.position,
+			visible: tooltip.isVisible
+		}) : null
+	] });
+}
+/**
+* Column header text. Inert for node tooltips, but when the caller supplies a
+* column description it opens its own portal tooltip on hover or focus.
+*/
+function SankeyColumnHeader({ x, textAnchor, fill, label, fullLabel, description }) {
+	const tooltip = useSankeyHoverTooltip(description !== void 0);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("text", {
+		"aria-describedby": description ? tooltip.id : void 0,
+		"aria-label": description ? fullLabel : void 0,
+		role: description ? "img" : void 0,
+		x,
+		y: 18,
+		textAnchor,
+		fill,
+		fontSize: COLUMN_LABEL_FONT_SIZE,
+		fontWeight: 600,
+		tabIndex: description ? 0 : void 0,
+		onMouseEnter: description ? (event) => tooltip.showOnHover(event.currentTarget) : void 0,
+		onMouseLeave: description ? tooltip.hideOnLeave : void 0,
+		onFocus: description ? (event) => tooltip.showOnFocus(event.currentTarget) : void 0,
+		onBlur: description ? tooltip.hideOnBlur : void 0,
+		children: [label === fullLabel || description ? null : /* @__PURE__ */ jsx("title", { children: fullLabel }), label]
+	}), description ? /* @__PURE__ */ jsx(SankeyPortalTooltip, {
+		id: tooltip.id,
+		title: fullLabel,
+		description,
+		position: tooltip.position,
+		visible: tooltip.isVisible
+	}) : null] });
+}
+function scaleSankeyDimension(size, displayValue, layoutValue) {
+	if (displayValue === void 0 || layoutValue === void 0 || layoutValue <= 0) return size;
+	return size * Math.min(Math.max(displayValue / layoutValue, 0), 1);
+}
+function SankeyLink({ sourceX, targetX, sourceY, targetY, sourceControlX, targetControlX, linkWidth, index, payload, colorMap, color, sourceColor, targetColor, highlighted, displayValue, layoutValue, sourceWidth, targetWidth, clickable, onHoverChange, onSelect }) {
+	const visibleWidth = scaleSankeyDimension(linkWidth, displayValue, layoutValue);
+	const sourceHalfWidth = Math.max(0, sourceWidth ?? visibleWidth) / 2;
+	const targetHalfWidth = Math.max(0, targetWidth ?? visibleWidth) / 2;
+	const path = [
+		`M${sourceX},${sourceY - sourceHalfWidth}`,
+		`C${sourceControlX},${sourceY - sourceHalfWidth} ${targetControlX},${targetY - targetHalfWidth} ${targetX},${targetY - targetHalfWidth}`,
+		`L${targetX},${targetY + targetHalfWidth}`,
+		`C${targetControlX},${targetY + targetHalfWidth} ${sourceControlX},${sourceY + sourceHalfWidth} ${sourceX},${sourceY + sourceHalfWidth}`,
+		"Z"
+	].join(" ");
+	const sourceName = String(payload.source.name ?? "");
+	const targetName = String(payload.target.name ?? "");
+	const gradientId = `sankey-grad-${index}`;
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onSelect();
+	};
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+		id: gradientId,
+		gradientUnits: "userSpaceOnUse",
+		x1: sourceX,
+		x2: targetX,
+		children: [/* @__PURE__ */ jsx("stop", {
+			offset: "0%",
+			stopColor: sourceColor ?? colorMap[sourceName] ?? "var(--chart-blue)"
+		}), /* @__PURE__ */ jsx("stop", {
+			offset: "100%",
+			stopColor: targetColor ?? colorMap[targetName] ?? "var(--chart-blue)"
+		})]
+	}) }), /* @__PURE__ */ jsx("path", {
+		d: path,
+		fill: color ?? `url(#${gradientId})`,
+		fillOpacity: highlighted ? .75 : .32,
+		stroke: "none",
+		role: clickable ? "button" : void 0,
+		tabIndex: clickable ? 0 : void 0,
+		"aria-label": clickable ? "Select Sankey curve" : void 0,
+		onClick: clickable ? onSelect : void 0,
+		onKeyDown: clickable ? handleKeyDown : void 0,
+		onMouseEnter: () => onHoverChange(sourceName),
+		onMouseLeave: () => onHoverChange(void 0),
+		style: {
+			cursor: clickable ? "pointer" : void 0,
+			transition: "fill-opacity 0.18s ease"
+		}
+	})] });
+}
+export { sankeySeriesColors as a, getSankeyChartNodeSelection as c, reorderSankeyChartColumns as d, buildSankeyColorMap as i, getSankeyChartNodeWeights as l, Sankey$1 as n, buildSankeyChartGraph as o, useSankey as r, getSankeyChartCurveSelection as s, SankeyChart as t, getSankeyChartValue as u };
+
+//# sourceMappingURL=SankeyChart-lkM5cpOC.js.map