@mastra/playground-ui 48.0.0-alpha.8 → 48.0.0

package/dist/sankey-chart-zhW_F0Rm.js

@@ -0,0 +1,915 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useContext, createContext, useId, useRef, useEffect, useMemo, useSyncExternalStore } from 'react';
+import { ResponsiveContainer, Sankey as Sankey$1 } from 'recharts';
+import { b as buildSankeyHueMap, n as nodeColor, a as nodeColorVivid } from './sankeyColor-CQ5nkgtL.js';
+import { createPortal } from 'react-dom';
+import { C as Colors } from './spacings-C87dXiT-.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const 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;
+  return void 0;
+}
+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()] };
+}
+const SANKEY_NODE_WIDTH = 7;
+const LABEL_CHARACTER_WIDTH_RATIO = 0.62;
+const LABEL_GUTTER = 16;
+const 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 - SANKEY_NODE_WIDTH) / (columnCount - 1);
+  const centered = Math.max(0, columnPitch - LABEL_GUTTER);
+  const edge = Math.max(0, columnPitch + SANKEY_NODE_WIDTH / 2 - LABEL_GUTTER - centered / 2);
+  return { centered, edge };
+}
+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) * 0.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, {
+      // ribbons anchor to their own nodes' columns: depth-based layouts (like
+      // the underlying recharts sankey) would otherwise stretch links of a
+      // disconnected graph across the full chart width
+      sourceX: sourceGeometry.x + SANKEY_NODE_WIDTH,
+      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]);
+}
+
+const SankeyControlsContext = createContext(void 0);
+const SankeyRenderContext = createContext(void 0);
+function Sankey({
+  data,
+  columns,
+  children,
+  columnOrder,
+  onColumnOrderChange,
+  visibleColumnIds,
+  onVisibleColumnIdsChange,
+  getRecordWeight,
+  getRecordLayoutWeight,
+  getRecordNodeId,
+  getRecordNodeLabel,
+  getRecordNodeValue,
+  getColumnHue
+}) {
+  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 defaultHueMap = buildSankeyHueMap(graph.nodes.map((node) => String(node.value)));
+  const hueMap = Object.fromEntries(
+    graph.nodes.map((node) => [
+      String(node.value),
+      getColumnHue?.(node.column) ?? defaultHueMap[String(node.value)] ?? 0
+    ])
+  );
+  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 reorderedEnabled = reorderSankeyChartColumns(enabledColumns, sourceIndex, destinationIndex);
+    const enabledIterator = reorderedEnabled[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, hueMap, 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)
+  );
+}
+
+const SANKEY_TOOLTIP_MAX_WIDTH_PX = 320;
+const TOOLTIP_TOP_FLIP_THRESHOLD = 120;
+const TOOLTIP_EDGE_INSET = 16;
+const TOOLTIP_RIGHT_INSET = SANKEY_TOOLTIP_MAX_WIDTH_PX + TOOLTIP_EDGE_INSET;
+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);
+    }
+  };
+}
+
+function SankeyPortalTooltip({
+  id,
+  title,
+  description,
+  position,
+  visible
+}) {
+  if (!visible || !position) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": `${title}: ${description}`,
+        className: "border-border1 bg-surface5 text-neutral6 shadow-elevated pointer-events-none fixed z-50 rounded-md border p-2 text-xs leading-4",
+        id,
+        role: "tooltip",
+        style: {
+          left: position.left,
+          maxWidth: `min(${SANKEY_TOOLTIP_MAX_WIDTH_PX}px, calc(100vw - 2rem))`,
+          top: position.top,
+          transform: position.placement === "above" ? "translateY(-100%)" : void 0,
+          width: "max-content"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "text-neutral4 whitespace-pre-wrap", children: description })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+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]);
+  const 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) - SANKEY_NODE_WIDTH,
+      nodePadding: 8
+    }) : void 0,
+    [graph, margin?.bottom, margin?.left, margin?.right, margin?.top, measuredHeight, measuredWidth, usesFixedGeometry]
+  );
+  const 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)
+  });
+  return { chartContainerRef, fixedGeometry, labelWidths };
+}
+
+const 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)
+  };
+}
+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;
+}
+class SankeyGeometryMotionStore {
+  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;
+}
+
+const NODE_LABEL_FONT_SIZE = 11;
+const COLUMN_LABEL_FONT_SIZE = 12;
+const 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
+}) {
+  const { graph, enabledColumns, hueMap, 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: "border-border1 text-ui-sm text-neutral3 flex items-center justify-center rounded-md border",
+      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$1,
+        {
+          data: graph,
+          nodeWidth: SANKEY_NODE_WIDTH,
+          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,
+                hueMap,
+                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 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,
+                hueMap,
+                highlighted: String(props.payload.source.name ?? "") === activeSourceName,
+                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,
+  hueMap,
+  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 hue = hueMap[name] ?? 0;
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onSelect();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showColumnLabel && visibleColumnLabel && columnLabel ? /* @__PURE__ */ jsx(
+      SankeyColumnHeader,
+      {
+        x: labelX,
+        textAnchor,
+        fill: nodeColor(hue),
+        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: "focus-visible:[&>rect]:stroke-neutral6 outline-hidden 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: nodeColor(hue) }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: labelX,
+              y: y - 24,
+              textAnchor,
+              fill: Colors.neutral5,
+              fontSize: NODE_LABEL_FONT_SIZE,
+              fontFamily: "var(--font-mono)",
+              children: visibleLabel
+            }
+          ),
+          /* @__PURE__ */ jsxs("text", { x: labelX, y: y - 8, textAnchor, fill: Colors.neutral3, fontSize: 9.5, children: [
+            value,
+            " (",
+            percentage,
+            "%)"
+          ] })
+        ]
+      }
+    ),
+    description ? /* @__PURE__ */ jsx(
+      SankeyPortalTooltip,
+      {
+        id: tooltip.id,
+        title: visibleDisplayLabel,
+        description,
+        position: tooltip.position,
+        visible: tooltip.isVisible
+      }
+    ) : null
+  ] });
+}
+function SankeyColumnHeader({
+  x,
+  textAnchor,
+  fill,
+  label,
+  fullLabel,
+  description
+}) {
+  const tooltip = useSankeyHoverTooltip(description !== void 0);
+  return /* @__PURE__ */ jsxs(Fragment, { 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,
+  hueMap,
+  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 vividGradientId = `${gradientId}-vivid`;
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onSelect();
+  };
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: sourceX, x2: targetX, children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: nodeColor(hueMap[sourceName] ?? 0) }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: nodeColor(hueMap[targetName] ?? 0) })
+      ] }),
+      /* @__PURE__ */ jsxs("linearGradient", { id: vividGradientId, gradientUnits: "userSpaceOnUse", x1: sourceX, x2: targetX, children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: nodeColorVivid(hueMap[sourceName] ?? 0) }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: nodeColorVivid(hueMap[targetName] ?? 0) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: path,
+        fill: `url(#${highlighted ? vividGradientId : gradientId})`,
+        fillOpacity: highlighted ? 0.75 : 0.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 { Sankey as S, SankeyChart as a, buildSankeyChartGraph as b, getSankeyChartNodeSelection as c, getSankeyChartNodeWeights as d, getSankeyChartValue as e, getSankeyChartCurveSelection as g, reorderSankeyChartColumns as r, useSankey as u };
+//# sourceMappingURL=sankey-chart-zhW_F0Rm.js.map