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

package/dist/SankeyChart-E68mYEs2.js

@@ -1,856 +0,0 @@
-import { Colors } from "./tokens.es.js";
-import { t as cn } from "./utils-DQx8TpNT.js";
-import { n as hashLabel } from "./colors-ClOUYXq0.js";
-import { ChartTooltip } from "./components/ChartTooltip.es.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-E68mYEs2.js.map