@mastra/playground-ui 61.0.0 → 62.0.0-alpha.0

package/dist/sankey-chart-D4Idjtth.js

@@ -1,938 +0,0 @@
-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 { hashLabel } from './utils/colors.es.js';
-import { createPortal } from 'react-dom';
-import { C as ChartTooltip } from './chart-tooltip-84fl_3Wc.js';
-import { Colors, CHART_TICK_FONT_SIZE, CHART_LABEL_FONT_SIZE } from './tokens.es.js';
-import { c as cn } from './cn-65Adrsfj.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 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;
-}
-
-const SankeyControlsContext = createContext(void 0);
-const SankeyRenderContext = createContext(void 0);
-function Sankey({
-  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 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, 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)
-  );
-}
-
-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(
-      ChartTooltip,
-      {
-        "aria-label": `${title}: ${description}`,
-        className: "pointer-events-none fixed z-50 p-2",
-        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: "text-column", children: title }),
-          /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-muted-foreground", 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 = CHART_TICK_FONT_SIZE;
-const COLUMN_LABEL_FONT_SIZE = CHART_LABEL_FONT_SIZE;
-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,
-  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$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,
-                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, { 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
-  ] });
-}
-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,
-  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 ? 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, buildSankeyColorMap as c, getSankeyChartNodeSelection as d, getSankeyChartNodeWeights as e, getSankeyChartValue as f, getSankeyChartCurveSelection as g, reorderSankeyChartColumns as r, sankeySeriesColors as s, useSankey as u };
-//# sourceMappingURL=sankey-chart-D4Idjtth.js.map