@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/SankeyChart/SankeyChart.js

@@ -0,0 +1,501 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  Layer,
+  Sankey as RechartsSankey
+} from "recharts";
+import { motion, useReducedMotion } from "motion/react";
+import { ChartContainer, colorStops, cssName } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
+import { LoadingIndicator } from "../lib/loading.js";
+import { ColorStops } from "../lib/paint.js";
+const LOADING_PULSE = 2;
+const SankeyChartContext = createContext(null);
+function useSankeyChart() {
+  const context = useContext(SankeyChartContext);
+  if (!context) throw new Error("A sankey chart part must be rendered inside <SankeyChart>");
+  return context;
+}
+function SankeyChart({
+  data,
+  config,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  sankeyProps,
+  nodeWidth = 10,
+  nodePadding = 10,
+  linkCurvature = 0.5,
+  iterations = 32,
+  sort = true,
+  align = "justify",
+  verticalAlign = "justify",
+  defaultSelectedNode = null,
+  onSelectionChange,
+  isLoading = false,
+  hideDataTable = false
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [selectedNode, setSelectedNode] = useState(defaultSelectedNode);
+  const selectNode = useCallback(
+    (name) => {
+      setSelectedNode(name);
+      if (!onSelectionChange) return;
+      onSelectionChange(name === null ? null : { name, value: nodeValue(data, name) });
+    },
+    [data, onSelectionChange]
+  );
+  const context = useMemo(
+    () => ({ data, config, chartId, isLoading, selectedNode, selectNode }),
+    [chartId, config, data, isLoading, selectNode, selectedNode]
+  );
+  const flows = useMemo(
+    () => data.links.map((link) => ({
+      from: String(data.nodes[link.source]?.name ?? link.source),
+      to: String(data.nodes[link.target]?.name ?? link.target),
+      value: link.value
+    })),
+    [data]
+  );
+  return /* @__PURE__ */ jsx(SankeyChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : {
+        rows: flows,
+        rowKey: "from",
+        columns: [
+          { key: "to", label: "To" },
+          { key: "value", label: "Value" }
+        ]
+      },
+      children: [
+        isLoading ? /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 500 250",
+            preserveAspectRatio: "xMidYMid meet",
+            width: "100%",
+            height: "100%",
+            "aria-hidden": true,
+            className: "absolute inset-0 text-(--ink)",
+            children: /* @__PURE__ */ jsx(LoadingSankey, {})
+          }
+        ) }) : /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(
+          RechartsSankey,
+          {
+            id: chartId,
+            data,
+            nodeWidth,
+            nodePadding,
+            linkCurvature,
+            iterations,
+            sort,
+            align,
+            verticalAlign,
+            ...resolveRenderers(children),
+            ...sankeyProps,
+            children: [
+              children,
+              /* @__PURE__ */ jsx("defs", { children: Object.entries(config).map(([key, series]) => /* @__PURE__ */ jsx(
+                "linearGradient",
+                {
+                  id: `${chartId}-node-${cssName(key)}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "1",
+                  children: /* @__PURE__ */ jsx(ColorStops, { dataKey: cssName(key), stops: colorStops(series) })
+                },
+                key
+              )) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+const Node = () => null;
+const NodeLabel = () => null;
+const Link = () => null;
+function Tooltip({ variant, roundness, defaultIndex }) {
+  const { isLoading } = useSankeyChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      defaultIndex,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { nameKey: "name", hideLabel: true, roundness, variant })
+    }
+  );
+}
+function Background({ variant = "dots" }) {
+  const { isLoading } = useSankeyChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+function nodeValue(data, name) {
+  const index = data.nodes.findIndex((node) => node.name === name);
+  if (index === -1) return 0;
+  const out = data.links.filter((link) => link.source === index).reduce((sum, link) => sum + link.value, 0);
+  const incoming = data.links.filter((link) => link.target === index).reduce((sum, link) => sum + link.value, 0);
+  return out > 0 ? out : incoming;
+}
+function resolveRenderers(children) {
+  let node = null;
+  let link = null;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === Node) node = child.props;
+    if (child.type === Link) link = child.props;
+  });
+  return {
+    node: (props) => /* @__PURE__ */ jsx(SankeyNodeShape, { ...props, nodeSlot: node }),
+    link: (props) => /* @__PURE__ */ jsx(SankeyLinkShape, { ...props, linkSlot: link })
+  };
+}
+function resolveNodeLabel(children) {
+  let label = null;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === NodeLabel) {
+      label = child.props;
+    }
+  });
+  return label;
+}
+function isConnected(data, selected, name) {
+  if (selected === null || selected === name) return true;
+  const selectedIndex = data.nodes.findIndex((node) => node.name === selected);
+  const nodeIndex = data.nodes.findIndex((node) => node.name === name);
+  return data.links.some(
+    (link) => link.source === selectedIndex && link.target === nodeIndex || link.source === nodeIndex && link.target === selectedIndex
+  );
+}
+function SankeyNodeShape({
+  x,
+  y,
+  width,
+  height,
+  payload,
+  nodeSlot
+}) {
+  const { config, chartId, data, selectedNode, selectNode } = useSankeyChart();
+  const radius = nodeSlot?.radius ?? 0;
+  const isClickable = nodeSlot?.isClickable ?? false;
+  const label = resolveNodeLabel(nodeSlot?.children);
+  const name = payload.name;
+  const value = payload.value;
+  const icon = payload.icon;
+  const dimmed = isClickable && !isConnected(data, selectedNode, name);
+  const painted = name in config;
+  const text = config[name]?.label ?? name;
+  const format = label?.valueFormatter ?? ((n) => n.toLocaleString());
+  const showValues = label?.showValues ?? false;
+  const centreX = x + width / 2;
+  const centreY = showValues ? y + height / 2 - 8 : y + height / 2;
+  const valueY = y + height / 2 + 8;
+  const outsideX = x + width + 8;
+  const outsideY = y + height / 2;
+  return /* @__PURE__ */ jsxs(Layer, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: radius,
+        ry: radius,
+        fill: painted ? `url(#${chartId}-node-${cssName(name)})` : "currentColor",
+        fillOpacity: dimmed ? 0.15 : 0.9,
+        className: "text-(--ink) transition-opacity duration-(--duration-base)",
+        style: isClickable ? { cursor: "pointer" } : void 0,
+        onClick: () => {
+          if (!isClickable) return;
+          selectNode(selectedNode === name ? null : name);
+        }
+      }
+    ),
+    label?.position === "inside" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: x + 1,
+          y: y + 1,
+          width: width - 2,
+          height: height - 2,
+          rx: Math.max(0, radius - 1),
+          ry: Math.max(0, radius - 1),
+          opacity: dimmed ? 0.3 : 1,
+          className: "fill-(--chart-surface)/60 transition-opacity duration-(--duration-base)",
+          style: { pointerEvents: "none" }
+        }
+      ),
+      icon && /* @__PURE__ */ jsx(
+        "foreignObject",
+        {
+          x: centreX - 8,
+          y: centreY - 30,
+          width: 16,
+          height: 16,
+          opacity: dimmed ? 0.3 : 1,
+          className: "transition-opacity duration-(--duration-base)",
+          style: { pointerEvents: "none" },
+          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-(--ink-2)", children: icon })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: centreX,
+          y: icon ? centreY - 4 : centreY,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          className: "fill-(--ink) text-[10px] font-medium transition-opacity duration-(--duration-base)",
+          opacity: dimmed ? 0.3 : 1,
+          style: { pointerEvents: "none" },
+          children: text
+        }
+      ),
+      showValues && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: centreX,
+          y: valueY,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          className: "fill-(--ink) font-mono text-xs font-medium tabular-nums transition-opacity duration-(--duration-base)",
+          opacity: dimmed ? 0.3 : 0.6,
+          style: { pointerEvents: "none" },
+          children: format(value)
+        }
+      )
+    ] }),
+    label?.position === "outside" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: outsideX,
+          y: outsideY - (showValues ? 8 : 0),
+          textAnchor: "start",
+          dominantBaseline: "middle",
+          className: "fill-(--ink) text-xs",
+          style: { pointerEvents: "none" },
+          children: text
+        }
+      ),
+      showValues && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: outsideX,
+          y: outsideY + 8,
+          textAnchor: "start",
+          dominantBaseline: "middle",
+          opacity: 0.5,
+          className: "fill-(--ink) font-mono text-xs tabular-nums",
+          style: { pointerEvents: "none" },
+          children: format(value)
+        }
+      )
+    ] })
+  ] });
+}
+function SankeyLinkShape({
+  sourceX,
+  targetX,
+  sourceY,
+  targetY,
+  sourceControlX,
+  targetControlX,
+  linkWidth,
+  index,
+  payload,
+  linkSlot
+}) {
+  const { config, chartId, selectedNode } = useSankeyChart();
+  const variant = linkSlot?.variant ?? "gradient";
+  const verticalPadding = linkSlot?.verticalPadding ?? 0;
+  const sourceName = payload.source.name;
+  const targetName = payload.target.name;
+  const lit = selectedNode === null || selectedNode === sourceName || selectedNode === targetName;
+  const half = Math.max(1, linkWidth - verticalPadding) / 2;
+  const band = `M${sourceX},${sourceY - half}
+    C${sourceControlX},${sourceY - half} ${targetControlX},${targetY - half} ${targetX},${targetY - half}
+    L${targetX},${targetY + half}
+    C${targetControlX},${targetY + half} ${sourceControlX},${sourceY + half} ${sourceX},${sourceY + half}
+    Z`;
+  const sourceColor = sourceName in config ? `var(--color-${cssName(sourceName)}-0)` : "currentColor";
+  const targetColor = targetName in config ? `var(--color-${cssName(targetName)}-0)` : "currentColor";
+  return /* @__PURE__ */ jsxs(Layer, { className: "text-(--ink)", children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      variant === "gradient" && /* @__PURE__ */ jsxs("linearGradient", { id: `${chartId}-link-${index}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: sourceColor, stopOpacity: 0.2 }),
+        /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: sourceColor, stopOpacity: 0.5 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: targetColor, stopOpacity: 0.2 })
+      ] }),
+      /* @__PURE__ */ jsxs("linearGradient", { id: `${chartId}-link-edge-${index}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--accent)", stopOpacity: 0 }),
+        /* @__PURE__ */ jsx("stop", { offset: "15%", stopColor: "var(--accent)", stopOpacity: 0.8 }),
+        /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "var(--accent)", stopOpacity: 1 }),
+        /* @__PURE__ */ jsx("stop", { offset: "85%", stopColor: "var(--accent)", stopOpacity: 0.8 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--accent)", stopOpacity: 0 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: band,
+        fill: linkFill(variant, chartId, index, config, sourceName, targetName),
+        fillOpacity: lit ? "calc(var(--chart-fill) * 2.6)" : "calc(var(--chart-fill) * 0.7)",
+        stroke: selectedNode !== null && lit ? `url(#${chartId}-link-edge-${index})` : "none",
+        strokeWidth: 1,
+        className: "transition-opacity duration-(--duration-base)"
+      }
+    )
+  ] });
+}
+function linkFill(variant, chartId, index, config, sourceName, targetName) {
+  switch (variant) {
+    case "gradient":
+      return `url(#${chartId}-link-${index})`;
+    case "source":
+      return sourceName in config ? `url(#${chartId}-node-${cssName(sourceName)})` : "currentColor";
+    case "target":
+      return targetName in config ? `url(#${chartId}-node-${cssName(targetName)})` : "currentColor";
+    default:
+      return "currentColor";
+  }
+}
+const SKELETON_NODES = [
+  { x: 30, y: 25, width: 12, height: 65, delay: 0 },
+  { x: 30, y: 110, width: 12, height: 50, delay: 0.3 },
+  { x: 30, y: 180, width: 12, height: 45, delay: 0.15 },
+  { x: 244, y: 20, width: 12, height: 55, delay: 0.45 },
+  { x: 244, y: 95, width: 12, height: 75, delay: 0.6 },
+  { x: 244, y: 190, width: 12, height: 40, delay: 0.25 },
+  { x: 458, y: 35, width: 12, height: 80, delay: 0.5 },
+  { x: 458, y: 135, width: 12, height: 90, delay: 0.1 }
+];
+const SKELETON_LINKS = [
+  { from: 0, to: 3, width: 26, delay: 0.2 },
+  { from: 0, to: 4, width: 18, delay: 0.7 },
+  { from: 1, to: 4, width: 24, delay: 0.4 },
+  { from: 1, to: 5, width: 12, delay: 0.9 },
+  { from: 2, to: 4, width: 16, delay: 0.1 },
+  { from: 2, to: 5, width: 14, delay: 0.55 },
+  { from: 3, to: 6, width: 22, delay: 0.35 },
+  { from: 3, to: 7, width: 18, delay: 0.8 },
+  { from: 4, to: 6, width: 28, delay: 0.05 },
+  { from: 4, to: 7, width: 32, delay: 0.65 },
+  { from: 5, to: 7, width: 16, delay: 0.45 }
+];
+function skeletonPath(fromIndex, toIndex) {
+  const from = SKELETON_NODES[fromIndex];
+  const to = SKELETON_NODES[toIndex];
+  const startX = from.x + from.width;
+  const startY = from.y + from.height / 2;
+  const endX = to.x;
+  const endY = to.y + to.height / 2;
+  return `M${startX},${startY} C${startX + (endX - startX) * 0.4},${startY} ${startX + (endX - startX) * 0.6},${endY} ${endX},${endY}`;
+}
+function LoadingSankey() {
+  const reduceMotion = useReducedMotion();
+  if (reduceMotion) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      SKELETON_LINKS.map((link) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: skeletonPath(link.from, link.to),
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: link.width,
+          opacity: 0.09
+        },
+        `${link.from}-${link.to}`
+      )),
+      SKELETON_NODES.map((node) => /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          rx: 2,
+          fill: "currentColor",
+          opacity: 0.25
+        },
+        `${node.x}-${node.y}`
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    SKELETON_LINKS.map((link, index) => /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        d: skeletonPath(link.from, link.to),
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: link.width,
+        initial: { opacity: 0.04 },
+        animate: { opacity: [0.04, 0.14, 0.04] },
+        transition: {
+          duration: LOADING_PULSE * (0.8 + index % 3 * 0.2),
+          delay: link.delay,
+          repeat: Infinity,
+          ease: "easeInOut"
+        }
+      },
+      `${link.from}-${link.to}`
+    )),
+    SKELETON_NODES.map((node, index) => /* @__PURE__ */ jsx(
+      motion.rect,
+      {
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+        rx: 2,
+        fill: "currentColor",
+        initial: { opacity: 0.15 },
+        animate: { opacity: [0.15, 0.4, 0.15] },
+        transition: {
+          duration: LOADING_PULSE * (0.9 + index % 4 * 0.1),
+          delay: node.delay,
+          repeat: Infinity,
+          ease: "easeInOut"
+        }
+      },
+      `${node.x}-${node.y}`
+    ))
+  ] });
+}
+SankeyChart.Node = Node;
+SankeyChart.NodeLabel = NodeLabel;
+SankeyChart.Link = Link;
+SankeyChart.Tooltip = Tooltip;
+SankeyChart.Background = Background;
+var SankeyChart_default = SankeyChart;
+export {
+  SankeyChart,
+  SankeyChart_default as default
+};
+//# sourceMappingURL=SankeyChart.js.map

package/dist/charts/SankeyChart/SankeyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/SankeyChart/SankeyChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport {\n  Layer,\n  Sankey as RechartsSankey,\n  type SankeyData,\n  type SankeyLinkProps,\n  type SankeyNodeProps,\n  type SankeyProps,\n} from 'recharts'\nimport { motion, useReducedMotion } from 'motion/react'\nimport { ChartContainer, colorStops, cssName, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { LoadingIndicator } from '../lib/loading'\nimport { ColorStops } from '../lib/paint'\nimport type { ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/** One full skeleton pulse, in seconds. */\nconst LOADING_PULSE = 2\n\n/**\n * How a flow band is coloured.\n *\n * `gradient` fades from the source's colour to the target's, which is the one\n * that actually reads as flow. `source` and `target` attribute the whole band\n * to one end — useful when the question is \"where did this come from\" rather\n * than \"what became of it\". `solid` gives up colour entirely and lets the\n * node rectangles carry identity.\n */\nexport type SankeyLinkVariant = 'gradient' | 'solid' | 'source' | 'target'\n\n/** Where a node's label sits. */\nexport type SankeyLabelPosition = 'inside' | 'outside'\n\ninterface SankeyChartContextValue {\n  data: SankeyData\n  config: ChartConfig\n  chartId: string\n  isLoading: boolean\n  selectedNode: string | null\n  selectNode: (name: string | null) => void\n}\n\nconst SankeyChartContext = createContext<SankeyChartContextValue | null>(null)\n\nfunction useSankeyChart(): SankeyChartContextValue {\n  const context = useContext(SankeyChartContext)\n  if (!context) throw new Error('A sankey chart part must be rendered inside <SankeyChart>')\n  return context\n}\n\nexport interface SankeyChartProps {\n  /** The nodes and the links between them, in Recharts' own shape. */\n  data: SankeyData\n  /** Node names → their label and paint. */\n  config: ChartConfig\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts Sankey element. */\n  sankeyProps?: Omit<SankeyProps, 'data'>\n  /** How wide each node rectangle is, in pixels. */\n  nodeWidth?: number\n  /** Vertical gap between nodes in the same column, in pixels. */\n  nodePadding?: number\n  /** 0 draws straight links, 1 the fullest curve. */\n  linkCurvature?: number\n  /** Layout passes. More is tidier and slower. */\n  iterations?: number\n  /** Lets the layout reorder nodes for the fewest crossings. */\n  sort?: boolean\n  /** How nodes are placed along the flow axis. */\n  align?: 'left' | 'justify'\n  /** How nodes are distributed within a column. */\n  verticalAlign?: 'justify' | 'top'\n  /**\n   * The node lit on first render. Selecting one dims every flow it does not\n   * touch.\n   */\n  defaultSelectedNode?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selection: { name: string; value: number } | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n}\n\n/**\n * Where a quantity goes as it moves through stages — the shape for a funnel, a\n * budget, an energy or traffic breakdown.\n *\n * The only chart here whose data is a GRAPH rather than a table, so it takes\n * `{ nodes, links }` instead of rows, and the table view lists the flows rather\n * than the nodes.\n *\n * @example\n * <SankeyChart title=\"Traffic by source and outcome\" config={config} data={data}>\n *   <SankeyChart.Node radius={2}>\n *     <SankeyChart.NodeLabel position=\"outside\" showValues />\n *   </SankeyChart.Node>\n *   <SankeyChart.Link variant=\"gradient\" />\n *   <SankeyChart.Tooltip />\n * </SankeyChart>\n */\nexport function SankeyChart({\n  data,\n  config,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  sankeyProps,\n  nodeWidth = 10,\n  nodePadding = 10,\n  linkCurvature = 0.5,\n  iterations = 32,\n  sort = true,\n  align = 'justify',\n  verticalAlign = 'justify',\n  defaultSelectedNode = null,\n  onSelectionChange,\n  isLoading = false,\n  hideDataTable = false,\n}: SankeyChartProps) {\n  const chartId = useId().replace(/:/g, '')\n  const [selectedNode, setSelectedNode] = useState<string | null>(defaultSelectedNode)\n\n  const selectNode = useCallback(\n    (name: string | null) => {\n      setSelectedNode(name)\n      if (!onSelectionChange) return\n      onSelectionChange(name === null ? null : { name, value: nodeValue(data, name) })\n    },\n    [data, onSelectionChange],\n  )\n\n  const context = useMemo<SankeyChartContextValue>(\n    () => ({ data, config, chartId, isLoading, selectedNode, selectNode }),\n    [chartId, config, data, isLoading, selectNode, selectedNode],\n  )\n\n  // The flows, not the nodes: a link IS the fact a sankey states, and a table\n  // of node totals would lose every \"from → to\" the diagram is drawn to show.\n  const flows = useMemo(\n    () =>\n      data.links.map((link) => ({\n        from: String(data.nodes[link.source]?.name ?? link.source),\n        to: String(data.nodes[link.target]?.name ?? link.target),\n        value: link.value,\n      })),\n    [data],\n  )\n\n  return (\n    <SankeyChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: flows,\n                rowKey: 'from',\n                columns: [\n                  { key: 'to', label: 'To' },\n                  { key: 'value', label: 'Value' },\n                ],\n              }\n        }\n      >\n        {isLoading ? (\n          <div className=\"relative aspect-video w-full\">\n            <svg\n              viewBox=\"0 0 500 250\"\n              preserveAspectRatio=\"xMidYMid meet\"\n              width=\"100%\"\n              height=\"100%\"\n              aria-hidden\n              className=\"absolute inset-0 text-(--ink)\"\n            >\n              <LoadingSankey />\n            </svg>\n          </div>\n        ) : (\n          <ChartContainer config={config}>\n            <RechartsSankey\n              id={chartId}\n              data={data}\n              nodeWidth={nodeWidth}\n              nodePadding={nodePadding}\n              linkCurvature={linkCurvature}\n              iterations={iterations}\n              sort={sort}\n              align={align}\n              verticalAlign={verticalAlign}\n              {...resolveRenderers(children)}\n              {...sankeyProps}\n            >\n              {children}\n              <defs>\n                {Object.entries(config).map(([key, series]) => (\n                  <linearGradient\n                    key={key}\n                    id={`${chartId}-node-${cssName(key)}`}\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <ColorStops dataKey={cssName(key)} stops={colorStops(series)} />\n                  </linearGradient>\n                ))}\n              </defs>\n            </RechartsSankey>\n          </ChartContainer>\n        )}\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </SankeyChartContext.Provider>\n  )\n}\n\nexport interface NodeProps {\n  radius?: number\n  isClickable?: boolean\n  /** `<SankeyChart.NodeLabel>`. */\n  children?: ReactNode\n}\n\n/** How the node rectangles render. A slot: the root reads it. */\nconst Node: FC<NodeProps> = () => null\n\nexport interface NodeLabelProps {\n  position?: SankeyLabelPosition\n  /** Prints each node's total flow under its name. */\n  showValues?: boolean\n  valueFormatter?: (value: number) => string\n}\n\n/** Labels for the nodes. A slot, composed inside `<Node>`. */\nconst NodeLabel: FC<NodeLabelProps> = () => null\n\nexport interface LinkProps {\n  variant?: SankeyLinkVariant\n  /** Thins each band where it meets a node, so neighbours stay separable. */\n  verticalPadding?: number\n}\n\n/** How the flow bands render. A slot: the root reads it. */\nconst Link: FC<LinkProps> = () => null\n\n/** The hover panel. No heading: the node's own name is the row label. */\nfunction Tooltip({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) {\n  const { isLoading } = useSankeyChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      content={\n        <ChartTooltipContent nameKey=\"name\" hideLabel roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the diagram. */\nfunction Background({ variant = 'dots' }: { variant?: ChartBackgroundVariant }) {\n  const { isLoading } = useSankeyChart()\n  if (isLoading) return null\n  return <ChartBackground variant={variant} />\n}\n\n/** A node's total flow — outgoing, or incoming for a leaf. */\nfunction nodeValue(data: SankeyData, name: string): number {\n  const index = data.nodes.findIndex((node) => node.name === name)\n  if (index === -1) return 0\n\n  const out = data.links\n    .filter((link) => link.source === index)\n    .reduce((sum, link) => sum + link.value, 0)\n  const incoming = data.links\n    .filter((link) => link.target === index)\n    .reduce((sum, link) => sum + link.value, 0)\n\n  return out > 0 ? out : incoming\n}\n\n/** Turns the composed `<Node>` and `<Link>` slots into Recharts renderers. */\nfunction resolveRenderers(children: ReactNode): Pick<SankeyProps, 'node' | 'link'> {\n  let node: NodeProps | null = null\n  let link: LinkProps | null = null\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return\n    if (child.type === Node) node = (child as ReactElement<NodeProps>).props\n    if (child.type === Link) link = (child as ReactElement<LinkProps>).props\n  })\n\n  return {\n    node: (props: SankeyNodeProps) => <SankeyNodeShape {...props} nodeSlot={node} />,\n    link: (props: SankeyLinkProps) => <SankeyLinkShape {...props} linkSlot={link} />,\n  }\n}\n\n/** Reads the `<NodeLabel>` composed inside a `<Node>`, if any. */\nfunction resolveNodeLabel(children: ReactNode): NodeLabelProps | null {\n  let label: NodeLabelProps | null = null\n\n  Children.forEach(children, (child) => {\n    if (isValidElement(child) && child.type === NodeLabel) {\n      label = (child as ReactElement<NodeLabelProps>).props\n    }\n  })\n\n  return label\n}\n\n/** Whether a node is the selected one, or one hop from it. */\nfunction isConnected(data: SankeyData, selected: string | null, name: string): boolean {\n  if (selected === null || selected === name) return true\n\n  const selectedIndex = data.nodes.findIndex((node) => node.name === selected)\n  const nodeIndex = data.nodes.findIndex((node) => node.name === name)\n\n  return data.links.some(\n    (link) =>\n      (link.source === selectedIndex && link.target === nodeIndex) ||\n      (link.source === nodeIndex && link.target === selectedIndex),\n  )\n}\n\n/** One node rectangle, with its label and value. */\nfunction SankeyNodeShape({\n  x,\n  y,\n  width,\n  height,\n  payload,\n  nodeSlot,\n}: SankeyNodeProps & { nodeSlot: NodeProps | null }) {\n  const { config, chartId, data, selectedNode, selectNode } = useSankeyChart()\n\n  const radius = nodeSlot?.radius ?? 0\n  const isClickable = nodeSlot?.isClickable ?? false\n  const label = resolveNodeLabel(nodeSlot?.children)\n\n  const name = payload.name\n  const value = payload.value\n  const icon = (payload as { icon?: ReactNode }).icon\n\n  const dimmed = isClickable && !isConnected(data, selectedNode, name)\n  const painted = name in config\n  const text = config[name]?.label ?? name\n\n  const format = label?.valueFormatter ?? ((n: number) => n.toLocaleString())\n  const showValues = label?.showValues ?? false\n\n  const centreX = x + width / 2\n  const centreY = showValues ? y + height / 2 - 8 : y + height / 2\n  const valueY = y + height / 2 + 8\n  const outsideX = x + width + 8\n  const outsideY = y + height / 2\n\n  return (\n    <Layer>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        rx={radius}\n        ry={radius}\n        fill={painted ? `url(#${chartId}-node-${cssName(name)})` : 'currentColor'}\n        fillOpacity={dimmed ? 0.15 : 0.9}\n        className=\"text-(--ink) transition-opacity duration-(--duration-base)\"\n        style={isClickable ? { cursor: 'pointer' } : undefined}\n        onClick={() => {\n          if (!isClickable) return\n          selectNode(selectedNode === name ? null : name)\n        }}\n      />\n      {label?.position === 'inside' && (\n        <>\n          {/* A scrim inside the node, so the label reads against whatever the\n              node's own gradient happens to be under it. */}\n          <rect\n            x={x + 1}\n            y={y + 1}\n            width={width - 2}\n            height={height - 2}\n            rx={Math.max(0, radius - 1)}\n            ry={Math.max(0, radius - 1)}\n            opacity={dimmed ? 0.3 : 1}\n            className=\"fill-(--chart-surface)/60 transition-opacity duration-(--duration-base)\"\n            style={{ pointerEvents: 'none' }}\n          />\n          {icon && (\n            <foreignObject\n              x={centreX - 8}\n              y={centreY - 30}\n              width={16}\n              height={16}\n              opacity={dimmed ? 0.3 : 1}\n              className=\"transition-opacity duration-(--duration-base)\"\n              style={{ pointerEvents: 'none' }}\n            >\n              <div className=\"flex items-center justify-center text-(--ink-2)\">{icon}</div>\n            </foreignObject>\n          )}\n          <text\n            x={centreX}\n            y={icon ? centreY - 4 : centreY}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\"\n            className=\"fill-(--ink) text-[10px] font-medium transition-opacity duration-(--duration-base)\"\n            opacity={dimmed ? 0.3 : 1}\n            style={{ pointerEvents: 'none' }}\n          >\n            {text}\n          </text>\n          {showValues && (\n            <text\n              x={centreX}\n              y={valueY}\n              textAnchor=\"middle\"\n              dominantBaseline=\"middle\"\n              className=\"fill-(--ink) font-mono text-xs font-medium tabular-nums transition-opacity duration-(--duration-base)\"\n              opacity={dimmed ? 0.3 : 0.6}\n              style={{ pointerEvents: 'none' }}\n            >\n              {format(value)}\n            </text>\n          )}\n        </>\n      )}\n      {label?.position === 'outside' && (\n        <>\n          <text\n            x={outsideX}\n            y={outsideY - (showValues ? 8 : 0)}\n            textAnchor=\"start\"\n            dominantBaseline=\"middle\"\n            className=\"fill-(--ink) text-xs\"\n            style={{ pointerEvents: 'none' }}\n          >\n            {text}\n          </text>\n          {showValues && (\n            <text\n              x={outsideX}\n              y={outsideY + 8}\n              textAnchor=\"start\"\n              dominantBaseline=\"middle\"\n              opacity={0.5}\n              className=\"fill-(--ink) font-mono text-xs tabular-nums\"\n              style={{ pointerEvents: 'none' }}\n            >\n              {format(value)}\n            </text>\n          )}\n        </>\n      )}\n    </Layer>\n  )\n}\n\n/** One flow band. */\nfunction SankeyLinkShape({\n  sourceX,\n  targetX,\n  sourceY,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  index,\n  payload,\n  linkSlot,\n}: SankeyLinkProps & { linkSlot: LinkProps | null }) {\n  const { config, chartId, selectedNode } = useSankeyChart()\n\n  const variant = linkSlot?.variant ?? 'gradient'\n  const verticalPadding = linkSlot?.verticalPadding ?? 0\n\n  const sourceName = payload.source.name\n  const targetName = payload.target.name\n  const lit =\n    selectedNode === null || selectedNode === sourceName || selectedNode === targetName\n\n  const half = Math.max(1, linkWidth - verticalPadding) / 2\n\n  // Two mirrored cubics closed into a ribbon: the band has to be a filled shape\n  // rather than a thick stroke, because its width changes along its length.\n  const band = `M${sourceX},${sourceY - half}\n    C${sourceControlX},${sourceY - half} ${targetControlX},${targetY - half} ${targetX},${targetY - half}\n    L${targetX},${targetY + half}\n    C${targetControlX},${targetY + half} ${sourceControlX},${sourceY + half} ${sourceX},${sourceY + half}\n    Z`\n\n  const sourceColor = sourceName in config ? `var(--color-${cssName(sourceName)}-0)` : 'currentColor'\n  const targetColor = targetName in config ? `var(--color-${cssName(targetName)}-0)` : 'currentColor'\n\n  return (\n    <Layer className=\"text-(--ink)\">\n      <defs>\n        {variant === 'gradient' && (\n          <linearGradient id={`${chartId}-link-${index}`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" stopColor={sourceColor} stopOpacity={0.2} />\n            <stop offset=\"50%\" stopColor={sourceColor} stopOpacity={0.5} />\n            <stop offset=\"100%\" stopColor={targetColor} stopOpacity={0.2} />\n          </linearGradient>\n        )}\n        {/* The edge that traces a band connected to the selection. It fades out\n            at both ends so it reads as a highlight rather than as an outline. */}\n        <linearGradient id={`${chartId}-link-edge-${index}`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" stopColor=\"var(--accent)\" stopOpacity={0} />\n          <stop offset=\"15%\" stopColor=\"var(--accent)\" stopOpacity={0.8} />\n          <stop offset=\"50%\" stopColor=\"var(--accent)\" stopOpacity={1} />\n          <stop offset=\"85%\" stopColor=\"var(--accent)\" stopOpacity={0.8} />\n          <stop offset=\"100%\" stopColor=\"var(--accent)\" stopOpacity={0} />\n        </linearGradient>\n      </defs>\n      <path\n        d={band}\n        fill={linkFill(variant, chartId, index, config, sourceName, targetName)}\n        // Read from the ground rather than fixed: a band at 0.4 of ink over\n        // paper reads; the same 0.4 of paper-white over near-black does not.\n        fillOpacity={lit ? 'calc(var(--chart-fill) * 2.6)' : 'calc(var(--chart-fill) * 0.7)'}\n        stroke={selectedNode !== null && lit ? `url(#${chartId}-link-edge-${index})` : 'none'}\n        strokeWidth={1}\n        className=\"transition-opacity duration-(--duration-base)\"\n      />\n    </Layer>\n  )\n}\n\n/** The paint reference for a band, given its variant. */\nfunction linkFill(\n  variant: SankeyLinkVariant,\n  chartId: string,\n  index: number,\n  config: ChartConfig,\n  sourceName: string,\n  targetName: string,\n): string {\n  switch (variant) {\n    case 'gradient':\n      return `url(#${chartId}-link-${index})`\n    case 'source':\n      return sourceName in config ? `url(#${chartId}-node-${cssName(sourceName)})` : 'currentColor'\n    case 'target':\n      return targetName in config ? `url(#${chartId}-node-${cssName(targetName)})` : 'currentColor'\n    default:\n      return 'currentColor'\n  }\n}\n\n/** The skeleton's node columns. Fixed, so the shape reads as a sankey at once. */\nconst SKELETON_NODES = [\n  { x: 30, y: 25, width: 12, height: 65, delay: 0 },\n  { x: 30, y: 110, width: 12, height: 50, delay: 0.3 },\n  { x: 30, y: 180, width: 12, height: 45, delay: 0.15 },\n  { x: 244, y: 20, width: 12, height: 55, delay: 0.45 },\n  { x: 244, y: 95, width: 12, height: 75, delay: 0.6 },\n  { x: 244, y: 190, width: 12, height: 40, delay: 0.25 },\n  { x: 458, y: 35, width: 12, height: 80, delay: 0.5 },\n  { x: 458, y: 135, width: 12, height: 90, delay: 0.1 },\n]\n\nconst SKELETON_LINKS = [\n  { from: 0, to: 3, width: 26, delay: 0.2 },\n  { from: 0, to: 4, width: 18, delay: 0.7 },\n  { from: 1, to: 4, width: 24, delay: 0.4 },\n  { from: 1, to: 5, width: 12, delay: 0.9 },\n  { from: 2, to: 4, width: 16, delay: 0.1 },\n  { from: 2, to: 5, width: 14, delay: 0.55 },\n  { from: 3, to: 6, width: 22, delay: 0.35 },\n  { from: 3, to: 7, width: 18, delay: 0.8 },\n  { from: 4, to: 6, width: 28, delay: 0.05 },\n  { from: 4, to: 7, width: 32, delay: 0.65 },\n  { from: 5, to: 7, width: 16, delay: 0.45 },\n]\n\n/** A bezier from one skeleton node's right edge to another's left. */\nfunction skeletonPath(fromIndex: number, toIndex: number): string {\n  const from = SKELETON_NODES[fromIndex]!\n  const to = SKELETON_NODES[toIndex]!\n  const startX = from.x + from.width\n  const startY = from.y + from.height / 2\n  const endX = to.x\n  const endY = to.y + to.height / 2\n  return `M${startX},${startY} C${startX + (endX - startX) * 0.4},${startY} ${startX + (endX - startX) * 0.6},${endY} ${endX},${endY}`\n}\n\n/** The skeleton diagram: a fixed graph whose parts pulse out of phase. */\nfunction LoadingSankey() {\n  const reduceMotion = useReducedMotion()\n\n  if (reduceMotion) {\n    return (\n      <>\n        {SKELETON_LINKS.map((link) => (\n          <path\n            key={`${link.from}-${link.to}`}\n            d={skeletonPath(link.from, link.to)}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={link.width}\n            opacity={0.09}\n          />\n        ))}\n        {SKELETON_NODES.map((node) => (\n          <rect\n            key={`${node.x}-${node.y}`}\n            x={node.x}\n            y={node.y}\n            width={node.width}\n            height={node.height}\n            rx={2}\n            fill=\"currentColor\"\n            opacity={0.25}\n          />\n        ))}\n      </>\n    )\n  }\n\n  return (\n    <>\n      {SKELETON_LINKS.map((link, index) => (\n        <motion.path\n          key={`${link.from}-${link.to}`}\n          d={skeletonPath(link.from, link.to)}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={link.width}\n          initial={{ opacity: 0.04 }}\n          animate={{ opacity: [0.04, 0.14, 0.04] }}\n          transition={{\n            duration: LOADING_PULSE * (0.8 + (index % 3) * 0.2),\n            delay: link.delay,\n            repeat: Infinity,\n            ease: 'easeInOut',\n          }}\n        />\n      ))}\n      {SKELETON_NODES.map((node, index) => (\n        <motion.rect\n          key={`${node.x}-${node.y}`}\n          x={node.x}\n          y={node.y}\n          width={node.width}\n          height={node.height}\n          rx={2}\n          fill=\"currentColor\"\n          initial={{ opacity: 0.15 }}\n          animate={{ opacity: [0.15, 0.4, 0.15] }}\n          transition={{\n            duration: LOADING_PULSE * (0.9 + (index % 4) * 0.1),\n            delay: node.delay,\n            repeat: Infinity,\n            ease: 'easeInOut',\n          }}\n        />\n      ))}\n    </>\n  )\n}\n\nSankeyChart.Node = Node\nSankeyChart.NodeLabel = NodeLabel\nSankeyChart.Link = Link\nSankeyChart.Tooltip = Tooltip\nSankeyChart.Background = Background\n\nexport default SankeyChart\n"],"mappings":"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","names":[]}