@langchain/macaw-components 1.0.0-beta.1 → 1.0.0-beta.6

package/dist/components/SankeyChart/SankeyChart.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes } from 'react';
+import { type ChartLegendProps } from '../ChartLegend/index.js';
+import type { SankeyChartAlignment, SankeyChartInteractionProps, SankeyChartLayoutLink, SankeyChartLayoutNode, SankeyChartLink, SankeyChartNode, SankeyChartSlots } from './SankeyChart.types.js';
+export type SankeyChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'aria-label'> & SankeyChartInteractionProps & {
+    nodes: readonly SankeyChartNode[];
+    links: readonly SankeyChartLink[];
+    /** Column assignment strategy. Defaults to `justified`. */
+    alignment?: SankeyChartAlignment;
+    /** Vertical gap between nodes in one column, in SVG pixels. Defaults to 12. */
+    nodePadding?: number;
+    /** Controlled legend filter. An empty set renders every node. */
+    selectedIds?: ReadonlySet<string>;
+    /** Emphasizes one node and the links touching it; dims the rest. */
+    activeNodeId?: string | null;
+    /** Emphasizes one link and its endpoint nodes; dims the rest. */
+    activeLinkId?: string | null;
+    /** Emphasizes marks represented by one external legend item. Built-in legends set this automatically. */
+    activeLegendItemId?: string | null;
+    /** Minimum plot width before scrolling. Defaults to 160; 0 allows smaller plots. Stage spacing is always preserved. */
+    minimumPlotWidth?: number;
+    /** Animates the diagram unless reduced motion is preferred. Defaults to true. */
+    shouldAnimate?: boolean;
+    /** Set false to drop the marks while a parent is actively resizing. Defaults to true. */
+    isRendering?: boolean;
+    /** Defaults to true when the chart has more than one node. */
+    showLegend?: boolean;
+    /** Forwarded to the rendered `ChartLegend`. Inert when there is no legend. */
+    legendProps?: Omit<ChartLegendProps, 'items'>;
+    slots?: SankeyChartSlots;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    /** Overrides the node's accessible name. Defaults to its ariaLabel, text label, then ID. */
+    getNodeAriaLabel?: (node: SankeyChartLayoutNode) => string | undefined;
+    /** Names a link and makes it a keyboard target. Actionable/focusable links default to endpoints and value. */
+    getLinkAriaLabel?: (link: SankeyChartLayoutLink) => string | undefined;
+};
+/**
+ * Renders weighted flows with automatic columns and source-colored links.
+ * Consumers own data, value formatting, tooltips, and navigation; compose with
+ * ChartCard, ChartTooltip, and ChartLegend. Slots customize SVG labels and overlays.
+ */
+export declare const SankeyChart: ({ nodes, links, alignment, nodePadding, selectedIds, activeNodeId, activeLinkId, activeLegendItemId, minimumPlotWidth, shouldAnimate, isRendering, showLegend, legendProps, slots, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, getNodeAriaLabel, getLinkAriaLabel, onNodePointerMove, onNodePointerOut, onNodeActivate, onNodeFocus, onNodeBlur, onLinkPointerMove, onLinkPointerOut, onLinkActivate, onLinkFocus, onLinkBlur, ...rest }: SankeyChartProps) => import("react").JSX.Element;

package/dist/components/SankeyChart/SankeyChart.js

@@ -0,0 +1,185 @@
+import { cn } from "../../utils/cn.js";
+import { getCategoricalFillChartColor } from "../../utils/chartColors.js";
+import { getAccessibleText } from "../ChartLegend/utils.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+import "./constants.js";
+import { getSankeyChartLayout } from "./SankeyChart.utils.js";
+import { AnimatedSankeyLink } from "./AnimatedSankeyLink.js";
+import { AnimatedSankeyNode } from "./AnimatedSankeyNode.js";
+import { SankeyNodeLabel } from "./SankeyNodeLabel.js";
+import { getSankeyNodeLabels } from "./SankeyNodeLabel.utils.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion, useSpring } from "@react-spring/web";
+import { useResizeObserver } from "@mantine/hooks";
+//#region packages/components/src/components/SankeyChart/SankeyChart.tsx
+/**
+* Renders weighted flows with automatic columns and source-colored links.
+* Consumers own data, value formatting, tooltips, and navigation; compose with
+* ChartCard, ChartTooltip, and ChartLegend. Slots customize SVG labels and overlays.
+*/
+var SankeyChart = ({ nodes, links, alignment = "justified", nodePadding, selectedIds, activeNodeId, activeLinkId, activeLegendItemId, minimumPlotWidth = 160, shouldAnimate = true, isRendering = true, showLegend, legendProps, slots, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, getNodeAriaLabel, getLinkAriaLabel, onNodePointerMove, onNodePointerOut, onNodeActivate, onNodeFocus, onNodeBlur, onLinkPointerMove, onLinkPointerOut, onLinkActivate, onLinkFocus, onLinkBlur, ...rest }) => {
+	const [containerRef, dimensions] = useResizeObserver();
+	const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState(null);
+	const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;
+	const normalizedNodes = useMemo(() => nodes.map((node, index) => ({
+		...node,
+		color: node.color ?? getCategoricalFillChartColor(index)
+	})), [nodes]);
+	const hasLabels = dimensions.width >= 480;
+	const chartMargin = {
+		top: 8,
+		right: (hasLabels ? 128 : 0) + 8,
+		bottom: 8,
+		left: (hasLabels ? 128 : 0) + 8
+	};
+	const innerWidth = dimensions.width === 0 ? 0 : Math.max(0, minimumPlotWidth, dimensions.width - chartMargin.left - chartMargin.right);
+	const innerHeight = Math.max(0, dimensions.height - chartMargin.top - chartMargin.bottom);
+	const hasData = nodes.length > 0;
+	const layout = useMemo(() => {
+		const selectedNodes = normalizedNodes.filter((node) => selectedIds?.has(node.id));
+		return getSankeyChartLayout({
+			nodes: selectedNodes.length > 0 ? selectedNodes : normalizedNodes,
+			links,
+			innerWidth,
+			innerHeight,
+			alignment,
+			nodePadding
+		});
+	}, [
+		normalizedNodes,
+		selectedIds,
+		links,
+		innerWidth,
+		innerHeight,
+		alignment,
+		nodePadding
+	]);
+	const chartWidth = dimensions.width === 0 ? 0 : layout.innerWidth + chartMargin.left + chartMargin.right;
+	const chartHeight = Math.max(dimensions.height, layout.innerHeight + chartMargin.top + chartMargin.bottom);
+	const animationKey = JSON.stringify([layout.nodes.map((node) => [
+		node.id,
+		node.x,
+		node.y0,
+		node.y1
+	]), layout.links.map((link) => [
+		link.id,
+		link.sourceId,
+		link.targetId,
+		link.value,
+		link.width,
+		link.y0,
+		link.y1
+	])]);
+	const [animation] = useSpring(() => ({
+		from: { progress: 0 },
+		to: { progress: hasData && isRendering ? 1 : 0 },
+		reset: true,
+		immediate: isReducedMotion
+	}), [
+		animationKey,
+		hasData,
+		isRendering,
+		isReducedMotion
+	]);
+	const drawnNodeIds = new Set(layout.nodes.map((node) => node.id));
+	const nodeLabels = getSankeyNodeLabels(layout.nodes, alignment);
+	const legendItems = normalizedNodes.map((node) => ({
+		id: node.id,
+		label: node.label,
+		"aria-label": node.ariaLabel,
+		markerColor: node.color,
+		selected: selectedIds?.has(node.id) ?? false
+	}));
+	const hasLegend = (showLegend ?? legendItems.length > 1) && legendItems.length > 0;
+	const requestedActiveId = (hasLegend ? activeBuiltInLegendItemId : null) ?? activeLegendItemId;
+	const activeId = requestedActiveId != null && drawnNodeIds.has(requestedActiveId) ? requestedActiveId : activeNodeId != null && drawnNodeIds.has(activeNodeId) ? activeNodeId : null;
+	const activeLink = activeLinkId == null ? null : layout.links.find((link) => link.id === activeLinkId) ?? null;
+	const isLinkDimmed = (link) => activeId != null ? link.sourceId !== activeId && link.targetId !== activeId : activeLink != null && link.id !== activeLink.id;
+	const isNodeDimmed = (node) => activeId != null ? node.id !== activeId : activeLink != null && node.id !== activeLink.sourceId && node.id !== activeLink.targetId;
+	const canDraw = dimensions.width > 0 && dimensions.height > 0 && hasData;
+	const plot = /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "relative min-h-0 min-w-0 flex-1 overflow-auto",
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				width: chartWidth,
+				height: chartHeight
+			},
+			children: /* @__PURE__ */ jsx("svg", {
+				width: chartWidth,
+				height: chartHeight,
+				role: hasData ? "graphics-document group" : "img",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				className: "block size-full",
+				children: canDraw && isRendering && /* @__PURE__ */ jsxs("g", {
+					transform: `translate(${chartMargin.left}, ${chartMargin.top})`,
+					children: [
+						layout.links.map((link) => /* @__PURE__ */ jsx(AnimatedSankeyLink, {
+							link,
+							animationProgress: animation.progress,
+							ariaLabel: getLinkAriaLabel?.(link) ?? (onLinkActivate != null || onLinkFocus != null ? `${link.source.ariaLabel ?? getAccessibleText(link.source.label) ?? link.sourceId} to ${link.target.ariaLabel ?? getAccessibleText(link.target.label) ?? link.targetId}: ${link.value}` : void 0),
+							isDimmed: isLinkDimmed(link),
+							isEmphasized: activeLink?.id === link.id || activeId != null && (link.sourceId === activeId || link.targetId === activeId),
+							onPointerMove: onLinkPointerMove,
+							onPointerOut: onLinkPointerOut,
+							onActivate: onLinkActivate,
+							onFocus: onLinkFocus,
+							onBlur: onLinkBlur
+						}, link.id)),
+						layout.nodes.map((node) => /* @__PURE__ */ jsx(AnimatedSankeyNode, {
+							node,
+							animationProgress: animation.progress,
+							ariaLabel: getNodeAriaLabel?.(node) ?? node.ariaLabel ?? getAccessibleText(node.label) ?? node.id,
+							isDimmed: isNodeDimmed(node),
+							onPointerMove: onNodePointerMove,
+							onPointerOut: onNodePointerOut,
+							onActivate: onNodeActivate,
+							onFocus: onNodeFocus,
+							onBlur: onNodeBlur
+						}, node.id)),
+						hasLabels && nodeLabels.map(({ node, isVisible, ...bounds }) => slots?.nodeLabel != null ? /* @__PURE__ */ jsx("g", { children: slots.nodeLabel({
+							node,
+							alignment,
+							...bounds
+						}) }, `label:${node.id}`) : isVisible ? /* @__PURE__ */ jsx(SankeyNodeLabel, {
+							node,
+							isDimmed: isNodeDimmed(node),
+							isActive: activeId === node.id,
+							...bounds
+						}, `label:${node.id}`) : null),
+						slots?.overlay?.({
+							nodes: layout.nodes,
+							links: layout.links,
+							innerWidth: layout.innerWidth,
+							innerHeight: layout.innerHeight
+						})
+					]
+				})
+			})
+		})
+	});
+	const legend = /* @__PURE__ */ jsx(ChartLegend, {
+		"aria-label": ariaLabel == null ? void 0 : `${ariaLabel} legend`,
+		...legendProps,
+		items: legendItems,
+		onItemActiveChange: (item) => {
+			setActiveBuiltInLegendItemId(item?.id ?? null);
+			legendProps?.onItemActiveChange?.(item);
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex size-full min-h-0 min-w-0 flex-col gap-space-2 @container", className),
+		...rest,
+		children: [plot, hasLegend && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: legend
+		})]
+	});
+};
+//#endregion
+export { SankeyChart };
+
+//# sourceMappingURL=SankeyChart.js.map

package/dist/components/SankeyChart/SankeyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyChart.js","names":[],"sources":["../../../src/components/SankeyChart/SankeyChart.tsx"],"sourcesContent":["import { useMemo, useState, type HTMLAttributes } from 'react';\n\nimport { useResizeObserver } from '@mantine/hooks';\nimport { useReducedMotion, useSpring } from '@react-spring/web';\n\nimport { getCategoricalFillChartColor } from '../../utils/chartColors';\nimport { cn } from '../../utils/cn';\nimport {\n  ChartLegend,\n  getAccessibleText,\n  type ChartLegendItem,\n  type ChartLegendProps,\n} from '../ChartLegend';\nimport { AnimatedSankeyLink } from './AnimatedSankeyLink';\nimport { AnimatedSankeyNode } from './AnimatedSankeyNode';\nimport {\n  SANKEY_MINIMUM_PLOT_WIDTH,\n  SANKEY_NODE_LABEL_WIDTH,\n} from './constants';\nimport type {\n  SankeyChartAlignment,\n  SankeyChartInteractionProps,\n  SankeyChartLayoutLink,\n  SankeyChartLayoutNode,\n  SankeyChartLink,\n  SankeyChartNode,\n  SankeyChartSlots,\n} from './SankeyChart.types';\nimport { getSankeyChartLayout } from './SankeyChart.utils';\nimport { SankeyNodeLabel } from './SankeyNodeLabel';\nimport { getSankeyNodeLabels } from './SankeyNodeLabel.utils';\n\nexport type SankeyChartProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'aria-label'\n> &\n  SankeyChartInteractionProps & {\n    nodes: readonly SankeyChartNode[];\n    links: readonly SankeyChartLink[];\n    /** Column assignment strategy. Defaults to `justified`. */\n    alignment?: SankeyChartAlignment;\n    /** Vertical gap between nodes in one column, in SVG pixels. Defaults to 12. */\n    nodePadding?: number;\n    /** Controlled legend filter. An empty set renders every node. */\n    selectedIds?: ReadonlySet<string>;\n    /** Emphasizes one node and the links touching it; dims the rest. */\n    activeNodeId?: string | null;\n    /** Emphasizes one link and its endpoint nodes; dims the rest. */\n    activeLinkId?: string | null;\n    /** Emphasizes marks represented by one external legend item. Built-in legends set this automatically. */\n    activeLegendItemId?: string | null;\n    /** Minimum plot width before scrolling. Defaults to 160; 0 allows smaller plots. Stage spacing is always preserved. */\n    minimumPlotWidth?: number;\n    /** Animates the diagram unless reduced motion is preferred. Defaults to true. */\n    shouldAnimate?: boolean;\n    /** Set false to drop the marks while a parent is actively resizing. Defaults to true. */\n    isRendering?: boolean;\n    /** Defaults to true when the chart has more than one node. */\n    showLegend?: boolean;\n    /** Forwarded to the rendered `ChartLegend`. Inert when there is no legend. */\n    legendProps?: Omit<ChartLegendProps, 'items'>;\n    slots?: SankeyChartSlots;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    /** Overrides the node's accessible name. Defaults to its ariaLabel, text label, then ID. */\n    getNodeAriaLabel?: (node: SankeyChartLayoutNode) => string | undefined;\n    /** Names a link and makes it a keyboard target. Actionable/focusable links default to endpoints and value. */\n    getLinkAriaLabel?: (link: SankeyChartLayoutLink) => string | undefined;\n  };\n\n/**\n * Renders weighted flows with automatic columns and source-colored links.\n * Consumers own data, value formatting, tooltips, and navigation; compose with\n * ChartCard, ChartTooltip, and ChartLegend. Slots customize SVG labels and overlays.\n */\nexport const SankeyChart = ({\n  nodes,\n  links,\n  alignment = 'justified',\n  nodePadding,\n  selectedIds,\n  activeNodeId,\n  activeLinkId,\n  activeLegendItemId,\n  minimumPlotWidth = SANKEY_MINIMUM_PLOT_WIDTH,\n  shouldAnimate = true,\n  isRendering = true,\n  showLegend,\n  legendProps,\n  slots,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  getNodeAriaLabel,\n  getLinkAriaLabel,\n  onNodePointerMove,\n  onNodePointerOut,\n  onNodeActivate,\n  onNodeFocus,\n  onNodeBlur,\n  onLinkPointerMove,\n  onLinkPointerOut,\n  onLinkActivate,\n  onLinkFocus,\n  onLinkBlur,\n  ...rest\n}: SankeyChartProps) => {\n  const [containerRef, dimensions] = useResizeObserver();\n  const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState<\n    string | null\n  >(null);\n  const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;\n\n  const normalizedNodes = useMemo(\n    () =>\n      nodes.map((node, index) => ({\n        ...node,\n        color: node.color ?? getCategoricalFillChartColor(index),\n      })),\n    [nodes]\n  );\n  // Labels sit beside the node rectangles: right of them for every column but\n  // the last, which flips left. Narrow containers skip the built-in labels\n  // entirely — the legend still names every node — so the plot keeps its width.\n  const hasLabels = dimensions.width >= 480;\n  const chartMargin = {\n    top: 8,\n    right: (hasLabels ? SANKEY_NODE_LABEL_WIDTH : 0) + 8,\n    bottom: 8,\n    left: (hasLabels ? SANKEY_NODE_LABEL_WIDTH : 0) + 8,\n  };\n  const innerWidth =\n    dimensions.width === 0\n      ? 0\n      : Math.max(\n          0,\n          minimumPlotWidth,\n          dimensions.width - chartMargin.left - chartMargin.right\n        );\n  const innerHeight = Math.max(\n    0,\n    dimensions.height - chartMargin.top - chartMargin.bottom\n  );\n  const hasData = nodes.length > 0;\n  const layout = useMemo(() => {\n    const selectedNodes = normalizedNodes.filter((node) =>\n      selectedIds?.has(node.id)\n    );\n    // Empty or stale selections show every node; the layout drops dangling links.\n    return getSankeyChartLayout({\n      nodes: selectedNodes.length > 0 ? selectedNodes : normalizedNodes,\n      links,\n      innerWidth,\n      innerHeight,\n      alignment,\n      nodePadding,\n    });\n  }, [\n    normalizedNodes,\n    selectedIds,\n    links,\n    innerWidth,\n    innerHeight,\n    alignment,\n    nodePadding,\n  ]);\n  const chartWidth =\n    dimensions.width === 0\n      ? 0\n      : layout.innerWidth + chartMargin.left + chartMargin.right;\n  const chartHeight = Math.max(\n    dimensions.height,\n    layout.innerHeight + chartMargin.top + chartMargin.bottom\n  );\n  const animationKey = JSON.stringify([\n    layout.nodes.map((node) => [node.id, node.x, node.y0, node.y1]),\n    layout.links.map((link) => [\n      link.id,\n      link.sourceId,\n      link.targetId,\n      link.value,\n      link.width,\n      link.y0,\n      link.y1,\n    ]),\n  ]);\n  const [animation] = useSpring(\n    () => ({\n      from: { progress: 0 },\n      to: { progress: hasData && isRendering ? 1 : 0 },\n      reset: true,\n      immediate: isReducedMotion,\n    }),\n    [animationKey, hasData, isRendering, isReducedMotion]\n  );\n\n  const drawnNodeIds = new Set(layout.nodes.map((node) => node.id));\n  const nodeLabels = getSankeyNodeLabels(layout.nodes, alignment);\n\n  const legendItems: readonly ChartLegendItem[] = normalizedNodes.map(\n    (node) => ({\n      id: node.id,\n      label: node.label,\n      'aria-label': node.ariaLabel,\n      markerColor: node.color,\n      selected: selectedIds?.has(node.id) ?? false,\n    })\n  );\n  const hasLegend =\n    (showLegend ?? legendItems.length > 1) && legendItems.length > 0;\n\n  const requestedActiveId =\n    (hasLegend ? activeBuiltInLegendItemId : null) ?? activeLegendItemId;\n  const activeId =\n    requestedActiveId != null && drawnNodeIds.has(requestedActiveId)\n      ? requestedActiveId\n      : activeNodeId != null && drawnNodeIds.has(activeNodeId)\n        ? activeNodeId\n        : null;\n  const activeLink =\n    activeLinkId == null\n      ? null\n      : (layout.links.find((link) => link.id === activeLinkId) ?? null);\n\n  const isLinkDimmed = (link: SankeyChartLayoutLink) =>\n    activeId != null\n      ? link.sourceId !== activeId && link.targetId !== activeId\n      : activeLink != null && link.id !== activeLink.id;\n\n  const isNodeDimmed = (node: SankeyChartLayoutNode) =>\n    activeId != null\n      ? node.id !== activeId\n      : activeLink != null &&\n        node.id !== activeLink.sourceId &&\n        node.id !== activeLink.targetId;\n\n  const canDraw = dimensions.width > 0 && dimensions.height > 0 && hasData;\n\n  const plot = (\n    <div\n      ref={containerRef}\n      className=\"relative min-h-0 min-w-0 flex-1 overflow-auto\"\n    >\n      <div style={{ width: chartWidth, height: chartHeight }}>\n        <svg\n          width={chartWidth}\n          height={chartHeight}\n          role={hasData ? 'graphics-document group' : 'img'}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className=\"block size-full\"\n        >\n          {canDraw && isRendering && (\n            <g transform={`translate(${chartMargin.left}, ${chartMargin.top})`}>\n              {layout.links.map((link) => (\n                <AnimatedSankeyLink\n                  key={link.id}\n                  link={link}\n                  animationProgress={animation.progress}\n                  ariaLabel={\n                    getLinkAriaLabel?.(link) ??\n                    (onLinkActivate != null || onLinkFocus != null\n                      ? `${link.source.ariaLabel ?? getAccessibleText(link.source.label) ?? link.sourceId} to ${link.target.ariaLabel ?? getAccessibleText(link.target.label) ?? link.targetId}: ${link.value}`\n                      : undefined)\n                  }\n                  isDimmed={isLinkDimmed(link)}\n                  isEmphasized={\n                    activeLink?.id === link.id ||\n                    (activeId != null &&\n                      (link.sourceId === activeId ||\n                        link.targetId === activeId))\n                  }\n                  onPointerMove={onLinkPointerMove}\n                  onPointerOut={onLinkPointerOut}\n                  onActivate={onLinkActivate}\n                  onFocus={onLinkFocus}\n                  onBlur={onLinkBlur}\n                />\n              ))}\n              {layout.nodes.map((node) => (\n                <AnimatedSankeyNode\n                  key={node.id}\n                  node={node}\n                  animationProgress={animation.progress}\n                  ariaLabel={\n                    getNodeAriaLabel?.(node) ??\n                    node.ariaLabel ??\n                    getAccessibleText(node.label) ??\n                    node.id\n                  }\n                  isDimmed={isNodeDimmed(node)}\n                  onPointerMove={onNodePointerMove}\n                  onPointerOut={onNodePointerOut}\n                  onActivate={onNodeActivate}\n                  onFocus={onNodeFocus}\n                  onBlur={onNodeBlur}\n                />\n              ))}\n              {hasLabels &&\n                nodeLabels.map(({ node, isVisible, ...bounds }) =>\n                  slots?.nodeLabel != null ? (\n                    <g key={`label:${node.id}`}>\n                      {slots.nodeLabel({\n                        node,\n                        alignment,\n                        ...bounds,\n                      })}\n                    </g>\n                  ) : isVisible ? (\n                    <SankeyNodeLabel\n                      key={`label:${node.id}`}\n                      node={node}\n                      isDimmed={isNodeDimmed(node)}\n                      isActive={activeId === node.id}\n                      {...bounds}\n                    />\n                  ) : null\n                )}\n              {slots?.overlay?.({\n                nodes: layout.nodes,\n                links: layout.links,\n                innerWidth: layout.innerWidth,\n                innerHeight: layout.innerHeight,\n              })}\n            </g>\n          )}\n        </svg>\n      </div>\n    </div>\n  );\n\n  const legend = (\n    <ChartLegend\n      aria-label={ariaLabel == null ? undefined : `${ariaLabel} legend`}\n      {...legendProps}\n      items={legendItems}\n      onItemActiveChange={(item) => {\n        setActiveBuiltInLegendItemId(item?.id ?? null);\n        legendProps?.onItemActiveChange?.(item);\n      }}\n    />\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex size-full min-h-0 min-w-0 flex-col gap-space-2 @container',\n        className\n      )}\n      {...rest}\n    >\n      {plot}\n      {hasLegend && <div className=\"shrink-0\">{legend}</div>}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/SankeyChart/SankeyChart.types.d.ts

@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react';
+export type SankeyChartNode = {
+    /** Stable ID. Must be unique within the chart. */
+    id: string;
+    label: ReactNode;
+    /** Plain-text name for assistive technology. Defaults to `label` when it is text, then `id`. */
+    ariaLabel?: string;
+    /** Use a design-system CSS chart color token. Defaults to a categorical fill by node order. */
+    color?: string;
+};
+export type SankeyChartLink = {
+    /** Unique ID. Defaults to `${sourceId}->${targetId}`, with numeric suffixes for collisions.
+     * Supply an ID to preserve a parallel link's identity across reordering. */
+    id?: string;
+    sourceId: string;
+    targetId: string;
+    value: number;
+    /** Use a design-system CSS chart color token. Defaults to the source node color. */
+    color?: string;
+};
+export type SankeyChartLayoutNode = {
+    id: string;
+    label: ReactNode;
+    ariaLabel?: string;
+    color: string;
+    /** Zero-based column, derived from the graph topology and alignment. */
+    depth: number;
+    /** Larger inflow/outflow total, capped at Number.MAX_VALUE on numeric overflow. */
+    value: number;
+    x: number;
+    y0: number;
+    y1: number;
+};
+export type SankeyChartLayoutLink = {
+    id: string;
+    sourceId: string;
+    targetId: string;
+    value: number;
+    color: string;
+    /** Link thickness in SVG pixels. */
+    width: number;
+    /** Vertical center of the link where it leaves the source node. */
+    y0: number;
+    /** Vertical center of the link where it enters the target node. */
+    y1: number;
+    source: SankeyChartLayoutNode;
+    target: SankeyChartLayoutNode;
+};
+export type SankeyChartLayout = {
+    nodes: readonly SankeyChartLayoutNode[];
+    links: readonly SankeyChartLayoutLink[];
+    /** Required plot width, expanded to keep adjacent stages apart. */
+    innerWidth: number;
+    /** Required plot height, expanded when minimum node heights cannot fit. */
+    innerHeight: number;
+};
+export type SankeyChartAlignment = 'justified' | 'center' | 'left' | 'right';
+/** Side of the node rectangle its label renders on. */
+export type SankeyChartLabelSide = 'right' | 'left';
+export type SankeyChartRenderProps = {
+    nodes: readonly SankeyChartLayoutNode[];
+    links: readonly SankeyChartLayoutLink[];
+    innerWidth: number;
+    innerHeight: number;
+};
+export type SankeyChartSlots = {
+    /** Renders SVG-compatible content above the links, nodes, and labels. */
+    overlay?: (props: SankeyChartRenderProps) => ReactNode;
+    /** Replaces the built-in node labels. Return SVG-compatible content. */
+    nodeLabel?: (props: {
+        node: SankeyChartLayoutNode;
+        alignment: SankeyChartAlignment;
+        side: SankeyChartLabelSide;
+        /** Available label bounds in plot coordinates. */
+        x: number;
+        width: number;
+    }) => ReactNode;
+};
+export type SankeyChartInteractionProps = {
+    onNodePointerMove?: (node: SankeyChartLayoutNode) => void;
+    onNodePointerOut?: () => void;
+    onNodeActivate?: (node: SankeyChartLayoutNode) => void;
+    onNodeFocus?: (node: SankeyChartLayoutNode) => void;
+    onNodeBlur?: () => void;
+    onLinkPointerMove?: (link: SankeyChartLayoutLink) => void;
+    onLinkPointerOut?: () => void;
+    onLinkActivate?: (link: SankeyChartLayoutLink) => void;
+    onLinkFocus?: (link: SankeyChartLayoutLink) => void;
+    onLinkBlur?: () => void;
+};

package/dist/components/SankeyChart/SankeyChart.utils.d.ts

@@ -0,0 +1,21 @@
+import type { SankeyChartAlignment, SankeyChartLayout, SankeyChartLink, SankeyChartNode } from './SankeyChart.types.js';
+/**
+ * Assigns columns, scales flow, and relaxes positions toward connected nodes.
+ * Nodes use the larger of inflow and outflow; crowded plots expand to fit.
+ */
+export declare const getSankeyChartLayout: ({ nodes, links, innerWidth: requestedInnerWidth, innerHeight: requestedInnerHeight, alignment, nodePadding, }: {
+    nodes: readonly SankeyChartNode[];
+    links: readonly SankeyChartLink[];
+    innerWidth: number;
+    innerHeight: number;
+    alignment?: SankeyChartAlignment;
+    nodePadding?: number;
+}) => SankeyChartLayout;
+/** Cubic bezier flow ribbon between a link's node edges. */
+export declare const getSankeyLinkPath: (link: {
+    sourceX: number;
+    targetX: number;
+    y0: number;
+    y1: number;
+    width: number;
+}) => string;