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

package/dist/components/SankeyChart.es.js

@@ -1,707 +1,3 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useContext, createContext, useRef, useEffect, useMemo, useId } from 'react';
-import { b as buildSankeyHueMap, n as nodeColor, a as nodeColorVivid } from '../sankeyColor-CQ5nkgtL.js';
-export { h as hashHue } from '../sankeyColor-CQ5nkgtL.js';
-import { createPortal } from 'react-dom';
-import { ResponsiveContainer, Sankey as Sankey$1 } from 'recharts';
-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)
-  );
-}
-
-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 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
-}) {
-  const { graph, enabledColumns, hueMap, usesFixedGeometry } = useSankeyRenderContext();
-  const { chartContainerRef, fixedGeometry, labelWidths } = useSankeyChartMeasurements({
-    graph,
-    height,
-    margin,
-    usesFixedGeometry
-  });
-  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 = node ? graph.nodes.findIndex((candidate) => candidate.column.id === node.column.id) === props.index : false;
-            const nodeGeometry = node ? fixedGeometry?.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,
-                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 ? fixedGeometry?.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,
-  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 tooltipId = useId();
-  const [isHovered, setIsHovered] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState();
-  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 isTooltipVisible = Boolean(description && tooltipPosition && (isHovered || isFocused));
-  const showTooltipAt = (target) => {
-    const rect = target.getBoundingClientRect();
-    const placement = rect.top < 120 ? "below" : "above";
-    setTooltipPosition({
-      left: Math.min(Math.max(rect.left, 16), Math.max(window.innerWidth - 336, 16)),
-      top: placement === "above" ? rect.top - 8 : rect.bottom + 8,
-      placement
-    });
-  };
-  const handleKeyDown = (event) => {
-    if (event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    onSelect();
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    showColumnLabel && visibleColumnLabel ? /* @__PURE__ */ jsxs(
-      "text",
-      {
-        x: labelX,
-        y: 18,
-        textAnchor,
-        fill: nodeColor(hue),
-        fontSize: COLUMN_LABEL_FONT_SIZE,
-        fontWeight: 600,
-        children: [
-          visibleColumnLabel === columnLabel ? null : /* @__PURE__ */ jsx("title", { children: columnLabel }),
-          visibleColumnLabel
-        ]
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs(
-      "g",
-      {
-        "aria-describedby": description ? tooltipId : 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);
-          setIsFocused(true);
-          showTooltipAt(event.currentTarget);
-        },
-        onBlur: () => {
-          onFocusChange(void 0);
-          setIsFocused(false);
-        },
-        onMouseEnter: (event) => {
-          onHoverChange(name);
-          setIsHovered(true);
-          showTooltipAt(event.currentTarget);
-        },
-        onMouseLeave: () => {
-          onHoverChange(void 0);
-          setIsHovered(false);
-        },
-        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 && isTooltipVisible && tooltipPosition ? createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "aria-label": `${visibleDisplayLabel}: ${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: tooltipId,
-          role: "tooltip",
-          style: {
-            left: tooltipPosition.left,
-            maxWidth: "min(20rem, calc(100vw - 2rem))",
-            top: tooltipPosition.top,
-            transform: tooltipPosition.placement === "above" ? "translateY(-100%)" : void 0,
-            width: "max-content"
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "font-medium", children: visibleDisplayLabel }),
-            /* @__PURE__ */ jsx("div", { className: "text-neutral4 whitespace-pre-wrap", children: description })
-          ]
-        }
-      ),
-      document.body
-    ) : 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, SankeyChart, buildSankeyChartGraph, buildSankeyHueMap, getSankeyChartCurveSelection, getSankeyChartNodeSelection, getSankeyChartNodeWeights, getSankeyChartValue, nodeColor, nodeColorVivid, reorderSankeyChartColumns, useSankey };
+export { S as Sankey, a as SankeyChart, b as buildSankeyChartGraph, g as getSankeyChartCurveSelection, c as getSankeyChartNodeSelection, d as getSankeyChartNodeWeights, e as getSankeyChartValue, r as reorderSankeyChartColumns, u as useSankey } from '../sankey-chart-zhW_F0Rm.js';
+export { b as buildSankeyHueMap, h as hashHue, n as nodeColor, a as nodeColorVivid } from '../sankeyColor-CQ5nkgtL.js';
 //# sourceMappingURL=SankeyChart.es.js.map