@epilot/spark-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/components/sankey-chart.cjs

@@ -0,0 +1,221 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+const require_components_typography = require("./typography.cjs");
+const require_components_number_flow = require("./number-flow.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _visx_group = require("@visx/group");
+let _visx_sankey = require("@visx/sankey");
+let cnfast = require("cnfast");
+//#region src/components/sankey-chart.tsx
+const SANKEY_CATEGORY_COLORS = {
+	solar: "var(--orange-a9)",
+	battery: "var(--green-a9)",
+	grid: "var(--blue-9)",
+	home: "var(--spark-9)",
+	floor: "var(--gray-a9)",
+	device: "var(--gray-a8)"
+};
+const DEFAULT_HEIGHT = 260;
+const DEFAULT_NODE_WIDTH = 12;
+const DEFAULT_NODE_PADDING = 10;
+const DEFAULT_LABEL_PADDING = 96;
+const LEFT_INSET = 4;
+const TOP_INSET = 8;
+const LABEL_GAP = 8;
+/** Approx. cap/ascender height of the node name above its alphabetic baseline. */
+const LABEL_NAME_HEIGHT = 11;
+/** Vertical offset of the value box relative to the name baseline. Negative pulls
+* the value up toward the name to tighten the gap between them. */
+const LABEL_VALUE_GAP = -4;
+/** Height of the value box rendered below the node name. */
+const VALUE_HEIGHT = 16;
+const DEFAULT_COLOR = "var(--gray-a9)";
+const ANIMATION_DURATION_MS = 500;
+function resolveNodeColor(node, categoryColors, defaultColor) {
+	if (node.color) return node.color;
+	if (node.category && categoryColors?.[node.category]) return categoryColors[node.category];
+	return defaultColor;
+}
+function easeOutCubic(t) {
+	return 1 - (1 - t) ** 3;
+}
+function linkKey(link) {
+	return `${link.source}-${link.target}`;
+}
+/**
+* Interpolates link values toward `links` over ~500ms so visx re-layouts each
+* frame, smoothly tweening node rects and link paths.
+*/
+function useAnimatedLinks(links) {
+	const [animated, setAnimated] = (0, react.useState)(links);
+	const animatedRef = (0, react.useRef)(links);
+	(0, react.useEffect)(() => {
+		const fromByKey = new Map(animatedRef.current.map((l) => [linkKey(l), l]));
+		const start = performance.now();
+		let raf = 0;
+		const tick = (now) => {
+			const t = Math.min(1, (now - start) / ANIMATION_DURATION_MS);
+			const eased = easeOutCubic(t);
+			const next = links.map((toLink) => {
+				const fromValue = fromByKey.get(linkKey(toLink))?.value ?? toLink.value;
+				return {
+					...toLink,
+					value: Math.round(fromValue + (toLink.value - fromValue) * eased)
+				};
+			});
+			animatedRef.current = next;
+			setAnimated(next);
+			if (t < 1) raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [links]);
+	return animated;
+}
+function SankeyChart({ nodes, links, categoryColors = SANKEY_CATEGORY_COLORS, defaultColor = DEFAULT_COLOR, valueSuffix, valueFormat, height = DEFAULT_HEIGHT, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, labelPadding = DEFAULT_LABEL_PADDING, title, className }) {
+	const containerRef = (0, react.useRef)(null);
+	const [width, setWidth] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		const element = containerRef.current;
+		if (!element) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			setWidth(entry.contentRect.width);
+		});
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
+	}, []);
+	const animatedLinks = useAnimatedLinks(links);
+	const nodeIds = (0, react.useMemo)(() => new Set(nodes.map((node) => node.id)), [nodes]);
+	const visibleLinks = (0, react.useMemo)(() => animatedLinks.filter((link) => link.value > 0 && nodeIds.has(link.source) && nodeIds.has(link.target)), [animatedLinks, nodeIds]);
+	const visibleNodes = (0, react.useMemo)(() => {
+		const referencedIds = /* @__PURE__ */ new Set();
+		for (const link of visibleLinks) {
+			referencedIds.add(link.source);
+			referencedIds.add(link.target);
+		}
+		return nodes.filter((node) => referencedIds.has(node.id));
+	}, [nodes, visibleLinks]);
+	const colorById = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const node of nodes) map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor));
+		return map;
+	}, [
+		categoryColors,
+		defaultColor,
+		nodes
+	]);
+	const orderById = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		visibleNodes.forEach((node, index) => map.set(node.id, index));
+		return map;
+	}, [visibleNodes]);
+	const nodeSort = (0, react.useMemo)(() => (a, b) => (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0), [orderById]);
+	const graph = (0, react.useMemo)(() => ({
+		nodes: visibleNodes.map((node) => ({ ...node })),
+		links: visibleLinks.map((link) => ({ ...link }))
+	}), [visibleNodes, visibleLinks]);
+	const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET);
+	const innerHeight = Math.max(0, height - TOP_INSET * 2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("flex w-full flex-col gap-2 py-2", className),
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: containerRef,
+			className: "w-full",
+			style: { height },
+			children: width > 0 && innerWidth > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width,
+				height,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
+					left: LEFT_INSET,
+					top: TOP_INSET,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_sankey.Sankey, {
+						root: graph,
+						size: [innerWidth, innerHeight],
+						nodeWidth,
+						nodePadding,
+						nodeAlign: _visx_sankey.sankeyJustify,
+						nodeId: (node) => node.id,
+						nodeSort,
+						children: ({ graph: laidOut, createPath }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
+							className: "visx-sankey-links",
+							children: laidOut.links.map((link, index) => {
+								const sourceId = typeof link.source === "object" ? link.source.id : String(link.source);
+								const stroke = link.color ?? colorById.get(sourceId) ?? defaultColor;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+									d: createPath(link) ?? "",
+									fill: "none",
+									stroke,
+									strokeOpacity: .32,
+									strokeWidth: Math.max(1, link.width ?? 0)
+								}, `sankey-link-${index}`);
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_group.Group, {
+							className: "visx-sankey-nodes",
+							children: laidOut.nodes.map((node, index) => {
+								if (node.x0 === void 0 || node.x1 === void 0 || node.y0 === void 0 || node.y1 === void 0) return null;
+								const w = node.x1 - node.x0;
+								const h = node.y1 - node.y0;
+								const fill = colorById.get(node.id) ?? defaultColor;
+								const labelX = node.x1 + LABEL_GAP;
+								const labelY = Math.min(Math.max(node.y0 + h / 2 - 4, LABEL_NAME_HEIGHT - TOP_INSET), innerHeight + TOP_INSET - VALUE_HEIGHT);
+								const labelAnchor = "start";
+								const primaryDy = 0;
+								const valueWidth = Math.max(40, labelPadding - LABEL_GAP - 4);
+								const valueHeight = VALUE_HEIGHT;
+								const valueY = labelY + LABEL_VALUE_GAP;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+										x: node.x0,
+										y: node.y0,
+										width: w,
+										height: Math.max(1, h),
+										fill,
+										rx: 2
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+										x: labelX,
+										y: labelY + primaryDy,
+										textAnchor: labelAnchor,
+										dominantBaseline: "alphabetic",
+										fontSize: 11,
+										fontWeight: 600,
+										fill: "var(--gray-a12)",
+										children: node.label
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("foreignObject", {
+										x: labelX,
+										y: valueY,
+										width: valueWidth,
+										height: valueHeight,
+										style: { overflow: "visible" },
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											style: {
+												lineHeight: 1.2,
+												overflow: "visible"
+											},
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
+												value: node.value ?? 0,
+												...valueSuffix !== void 0 && { suffix: valueSuffix },
+												...valueFormat !== void 0 && { format: valueFormat },
+												className: "text-[10px] text-gray-light tabular-nums"
+											})
+										})
+									})
+								] }, `sankey-node-${index}`);
+							})
+						})] })
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+exports.SANKEY_CATEGORY_COLORS = SANKEY_CATEGORY_COLORS;
+exports.SankeyChart = SankeyChart;
+
+//# sourceMappingURL=sankey-chart.cjs.map

package/dist/components/sankey-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-chart.cjs","names":["SectionTitle","Group","Sankey","sankeyJustify","NumberFlow"],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  home: 'var(--spark-9)',\n  floor: 'var(--gray-a9)',\n  device: 'var(--gray-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\n/** Approx. cap/ascender height of the node name above its alphabetic baseline. */\nconst LABEL_NAME_HEIGHT = 11\n/** Vertical offset of the value box relative to the name baseline. Negative pulls\n * the value up toward the name to tighten the gap between them. */\nconst LABEL_VALUE_GAP = -4\n/** Height of the value box rendered below the node name. */\nconst VALUE_HEIGHT = 16\nconst DEFAULT_COLOR = 'var(--gray-a9)'\nconst ANIMATION_DURATION_MS = 500\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction easeOutCubic(t: number) {\n  return 1 - (1 - t) ** 3\n}\n\nfunction linkKey(link: SankeyChartLink) {\n  return `${link.source}-${link.target}`\n}\n\n/**\n * Interpolates link values toward `links` over ~500ms so visx re-layouts each\n * frame, smoothly tweening node rects and link paths.\n */\nfunction useAnimatedLinks(links: SankeyChartLink[]): SankeyChartLink[] {\n  const [animated, setAnimated] = useState<SankeyChartLink[]>(links)\n  const animatedRef = useRef<SankeyChartLink[]>(links)\n\n  useEffect(() => {\n    const fromByKey = new Map(animatedRef.current.map((l) => [linkKey(l), l]))\n    const start = performance.now()\n    let raf = 0\n\n    const tick = (now: number) => {\n      const t = Math.min(1, (now - start) / ANIMATION_DURATION_MS)\n      const eased = easeOutCubic(t)\n      const next = links.map((toLink) => {\n        const fromValue = fromByKey.get(linkKey(toLink))?.value ?? toLink.value\n        return {\n          ...toLink,\n          value: Math.round(fromValue + (toLink.value - fromValue) * eased),\n        }\n      })\n      animatedRef.current = next\n      setAnimated(next)\n      if (t < 1) raf = requestAnimationFrame(tick)\n    }\n\n    raf = requestAnimationFrame(tick)\n    return () => cancelAnimationFrame(raf)\n  }, [links])\n\n  return animated\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const animatedLinks = useAnimatedLinks(links)\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop links whose endpoints aren't in the current node set. `animatedLinks`\n  // lags `nodes` by a frame while tweening, so during a node add/remove a link\n  // can momentarily reference a node that no longer exists — which makes\n  // d3-sankey throw `missing: <id>`.\n  const visibleLinks = useMemo(\n    () =>\n      animatedLinks.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [animatedLinks, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <svg width={width} height={height}>\n            <Group left={LEFT_INSET} top={TOP_INSET}>\n              <Sankey<SankeyDatumNode, SankeyDatumLink>\n                root={graph}\n                size={[innerWidth, innerHeight]}\n                nodeWidth={nodeWidth}\n                nodePadding={nodePadding}\n                nodeAlign={sankeyJustify}\n                nodeId={(node) => node.id}\n                nodeSort={nodeSort}\n              >\n                {({ graph: laidOut, createPath }) => (\n                  <>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node, index) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        const labelX = node.x1 + LABEL_GAP\n                        // Center the name+value label on the node, then clamp it\n                        // vertically so a node flush against an edge (e.g. a tiny\n                        // \"grid\" node at the top) doesn't push its name past the\n                        // chart bounds and get clipped. The name's ascenders sit\n                        // above labelY; the value box sits below it.\n                        const labelY = Math.min(\n                          Math.max(\n                            node.y0 + h / 2 - 4,\n                            LABEL_NAME_HEIGHT - TOP_INSET,\n                          ),\n                          innerHeight + TOP_INSET - VALUE_HEIGHT,\n                        )\n                        const labelAnchor = 'start' as const\n                        const primaryDy = 0\n                        const valueWidth = Math.max(\n                          40,\n                          labelPadding - LABEL_GAP - 4,\n                        )\n                        const valueHeight = VALUE_HEIGHT\n                        const valueY = labelY + LABEL_VALUE_GAP\n\n                        return (\n                          <Group key={`sankey-node-${index}`}>\n                            <rect\n                              x={node.x0}\n                              y={node.y0}\n                              width={w}\n                              height={Math.max(1, h)}\n                              fill={fill}\n                              rx={2}\n                            />\n                            <text\n                              x={labelX}\n                              y={labelY + primaryDy}\n                              textAnchor={labelAnchor}\n                              dominantBaseline=\"alphabetic\"\n                              fontSize={11}\n                              fontWeight={600}\n                              fill=\"var(--gray-a12)\"\n                            >\n                              {node.label}\n                            </text>\n                            <foreignObject\n                              x={labelX}\n                              y={valueY}\n                              width={valueWidth}\n                              height={valueHeight}\n                              style={{ overflow: 'visible' }}\n                            >\n                              <div\n                                style={{\n                                  lineHeight: 1.2,\n                                  overflow: 'visible',\n                                }}\n                              >\n                                <NumberFlow\n                                  value={node.value ?? 0}\n                                  {...(valueSuffix !== undefined && {\n                                    suffix: valueSuffix,\n                                  })}\n                                  {...(valueFormat !== undefined && {\n                                    format: valueFormat,\n                                  })}\n                                  className=\"text-[10px] text-gray-light tabular-nums\"\n                                />\n                              </div>\n                            </foreignObject>\n                          </Group>\n                        )\n                      })}\n                    </Group>\n                  </>\n                )}\n              </Sankey>\n            </Group>\n          </svg>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}

package/dist/components/sankey-chart.d.cts

@@ -0,0 +1,58 @@
+"use client";
+
+import { t as Format } from "../number-flow-DMJouddg.cjs";
+import { SankeyLink, SankeyNode } from "@visx/sankey";
+
+//#region src/components/sankey-chart.d.ts
+declare const SANKEY_CATEGORY_COLORS: Record<string, string>;
+interface SankeyChartNode {
+  id: string;
+  label: string;
+  /** Optional category — used to colour the node and any outgoing links. */
+  category?: string;
+  /** Override the colour resolved from `category`. */
+  color?: string;
+}
+interface SankeyChartLink {
+  source: string;
+  target: string;
+  value: number;
+  /** Override the colour of the link. Defaults to the source node colour. */
+  color?: string;
+}
+interface SankeyChartProps {
+  nodes: SankeyChartNode[];
+  links: SankeyChartLink[];
+  /** Resolves a category to a colour. */
+  categoryColors?: Record<string, string>;
+  /** Fallback colour for nodes/links without a category. */
+  defaultColor?: string;
+  /** Suffix appended to each animated value label (e.g. " W"). */
+  valueSuffix?: string;
+  /** NumberFlow `format` for value labels. */
+  valueFormat?: Format;
+  height?: number;
+  nodeWidth?: number;
+  nodePadding?: number;
+  /** Reserved horizontal space on the right for labels. */
+  labelPadding?: number;
+  title?: string;
+  className?: string;
+}
+declare function SankeyChart({
+  nodes,
+  links,
+  categoryColors,
+  defaultColor,
+  valueSuffix,
+  valueFormat,
+  height,
+  nodeWidth,
+  nodePadding,
+  labelPadding,
+  title,
+  className
+}: SankeyChartProps): React.ReactElement;
+//#endregion
+export { SANKEY_CATEGORY_COLORS, SankeyChart, SankeyChartLink, SankeyChartNode, SankeyChartProps, type SankeyLink, type SankeyNode };
+//# sourceMappingURL=sankey-chart.d.cts.map

package/dist/components/sankey-chart.d.ts

@@ -0,0 +1,58 @@
+"use client";
+
+import { t as Format } from "../number-flow-DSbucQ_K.js";
+import { SankeyLink, SankeyNode } from "@visx/sankey";
+
+//#region src/components/sankey-chart.d.ts
+declare const SANKEY_CATEGORY_COLORS: Record<string, string>;
+interface SankeyChartNode {
+  id: string;
+  label: string;
+  /** Optional category — used to colour the node and any outgoing links. */
+  category?: string;
+  /** Override the colour resolved from `category`. */
+  color?: string;
+}
+interface SankeyChartLink {
+  source: string;
+  target: string;
+  value: number;
+  /** Override the colour of the link. Defaults to the source node colour. */
+  color?: string;
+}
+interface SankeyChartProps {
+  nodes: SankeyChartNode[];
+  links: SankeyChartLink[];
+  /** Resolves a category to a colour. */
+  categoryColors?: Record<string, string>;
+  /** Fallback colour for nodes/links without a category. */
+  defaultColor?: string;
+  /** Suffix appended to each animated value label (e.g. " W"). */
+  valueSuffix?: string;
+  /** NumberFlow `format` for value labels. */
+  valueFormat?: Format;
+  height?: number;
+  nodeWidth?: number;
+  nodePadding?: number;
+  /** Reserved horizontal space on the right for labels. */
+  labelPadding?: number;
+  title?: string;
+  className?: string;
+}
+declare function SankeyChart({
+  nodes,
+  links,
+  categoryColors,
+  defaultColor,
+  valueSuffix,
+  valueFormat,
+  height,
+  nodeWidth,
+  nodePadding,
+  labelPadding,
+  title,
+  className
+}: SankeyChartProps): React.ReactElement;
+//#endregion
+export { SANKEY_CATEGORY_COLORS, SankeyChart, SankeyChartLink, SankeyChartNode, SankeyChartProps, type SankeyLink, type SankeyNode };
+//# sourceMappingURL=sankey-chart.d.ts.map

package/dist/components/sankey-chart.js

@@ -0,0 +1,218 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { SectionTitle } from "./typography.js";
+import NumberFlow from "./number-flow.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Group } from "@visx/group";
+import { Sankey, sankeyJustify } from "@visx/sankey";
+//#region src/components/sankey-chart.tsx
+const SANKEY_CATEGORY_COLORS = {
+	solar: "var(--orange-a9)",
+	battery: "var(--green-a9)",
+	grid: "var(--blue-9)",
+	home: "var(--spark-9)",
+	floor: "var(--gray-a9)",
+	device: "var(--gray-a8)"
+};
+const DEFAULT_HEIGHT = 260;
+const DEFAULT_NODE_WIDTH = 12;
+const DEFAULT_NODE_PADDING = 10;
+const DEFAULT_LABEL_PADDING = 96;
+const LEFT_INSET = 4;
+const TOP_INSET = 8;
+const LABEL_GAP = 8;
+/** Approx. cap/ascender height of the node name above its alphabetic baseline. */
+const LABEL_NAME_HEIGHT = 11;
+/** Vertical offset of the value box relative to the name baseline. Negative pulls
+* the value up toward the name to tighten the gap between them. */
+const LABEL_VALUE_GAP = -4;
+/** Height of the value box rendered below the node name. */
+const VALUE_HEIGHT = 16;
+const DEFAULT_COLOR = "var(--gray-a9)";
+const ANIMATION_DURATION_MS = 500;
+function resolveNodeColor(node, categoryColors, defaultColor) {
+	if (node.color) return node.color;
+	if (node.category && categoryColors?.[node.category]) return categoryColors[node.category];
+	return defaultColor;
+}
+function easeOutCubic(t) {
+	return 1 - (1 - t) ** 3;
+}
+function linkKey(link) {
+	return `${link.source}-${link.target}`;
+}
+/**
+* Interpolates link values toward `links` over ~500ms so visx re-layouts each
+* frame, smoothly tweening node rects and link paths.
+*/
+function useAnimatedLinks(links) {
+	const [animated, setAnimated] = useState(links);
+	const animatedRef = useRef(links);
+	useEffect(() => {
+		const fromByKey = new Map(animatedRef.current.map((l) => [linkKey(l), l]));
+		const start = performance.now();
+		let raf = 0;
+		const tick = (now) => {
+			const t = Math.min(1, (now - start) / ANIMATION_DURATION_MS);
+			const eased = easeOutCubic(t);
+			const next = links.map((toLink) => {
+				const fromValue = fromByKey.get(linkKey(toLink))?.value ?? toLink.value;
+				return {
+					...toLink,
+					value: Math.round(fromValue + (toLink.value - fromValue) * eased)
+				};
+			});
+			animatedRef.current = next;
+			setAnimated(next);
+			if (t < 1) raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [links]);
+	return animated;
+}
+function SankeyChart({ nodes, links, categoryColors = SANKEY_CATEGORY_COLORS, defaultColor = DEFAULT_COLOR, valueSuffix, valueFormat, height = DEFAULT_HEIGHT, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, labelPadding = DEFAULT_LABEL_PADDING, title, className }) {
+	const containerRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const element = containerRef.current;
+		if (!element) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			setWidth(entry.contentRect.width);
+		});
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
+	}, []);
+	const animatedLinks = useAnimatedLinks(links);
+	const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes]);
+	const visibleLinks = useMemo(() => animatedLinks.filter((link) => link.value > 0 && nodeIds.has(link.source) && nodeIds.has(link.target)), [animatedLinks, nodeIds]);
+	const visibleNodes = useMemo(() => {
+		const referencedIds = /* @__PURE__ */ new Set();
+		for (const link of visibleLinks) {
+			referencedIds.add(link.source);
+			referencedIds.add(link.target);
+		}
+		return nodes.filter((node) => referencedIds.has(node.id));
+	}, [nodes, visibleLinks]);
+	const colorById = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const node of nodes) map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor));
+		return map;
+	}, [
+		categoryColors,
+		defaultColor,
+		nodes
+	]);
+	const orderById = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		visibleNodes.forEach((node, index) => map.set(node.id, index));
+		return map;
+	}, [visibleNodes]);
+	const nodeSort = useMemo(() => (a, b) => (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0), [orderById]);
+	const graph = useMemo(() => ({
+		nodes: visibleNodes.map((node) => ({ ...node })),
+		links: visibleLinks.map((link) => ({ ...link }))
+	}), [visibleNodes, visibleLinks]);
+	const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET);
+	const innerHeight = Math.max(0, height - TOP_INSET * 2);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-2 py-2", className),
+		children: [title && /* @__PURE__ */ jsx(SectionTitle, { children: title }), /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "w-full",
+			style: { height },
+			children: width > 0 && innerWidth > 0 && /* @__PURE__ */ jsx("svg", {
+				width,
+				height,
+				children: /* @__PURE__ */ jsx(Group, {
+					left: LEFT_INSET,
+					top: TOP_INSET,
+					children: /* @__PURE__ */ jsx(Sankey, {
+						root: graph,
+						size: [innerWidth, innerHeight],
+						nodeWidth,
+						nodePadding,
+						nodeAlign: sankeyJustify,
+						nodeId: (node) => node.id,
+						nodeSort,
+						children: ({ graph: laidOut, createPath }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Group, {
+							className: "visx-sankey-links",
+							children: laidOut.links.map((link, index) => {
+								const sourceId = typeof link.source === "object" ? link.source.id : String(link.source);
+								const stroke = link.color ?? colorById.get(sourceId) ?? defaultColor;
+								return /* @__PURE__ */ jsx("path", {
+									d: createPath(link) ?? "",
+									fill: "none",
+									stroke,
+									strokeOpacity: .32,
+									strokeWidth: Math.max(1, link.width ?? 0)
+								}, `sankey-link-${index}`);
+							})
+						}), /* @__PURE__ */ jsx(Group, {
+							className: "visx-sankey-nodes",
+							children: laidOut.nodes.map((node, index) => {
+								if (node.x0 === void 0 || node.x1 === void 0 || node.y0 === void 0 || node.y1 === void 0) return null;
+								const w = node.x1 - node.x0;
+								const h = node.y1 - node.y0;
+								const fill = colorById.get(node.id) ?? defaultColor;
+								const labelX = node.x1 + LABEL_GAP;
+								const labelY = Math.min(Math.max(node.y0 + h / 2 - 4, LABEL_NAME_HEIGHT - TOP_INSET), innerHeight + TOP_INSET - VALUE_HEIGHT);
+								const labelAnchor = "start";
+								const primaryDy = 0;
+								const valueWidth = Math.max(40, labelPadding - LABEL_GAP - 4);
+								const valueHeight = VALUE_HEIGHT;
+								const valueY = labelY + LABEL_VALUE_GAP;
+								return /* @__PURE__ */ jsxs(Group, { children: [
+									/* @__PURE__ */ jsx("rect", {
+										x: node.x0,
+										y: node.y0,
+										width: w,
+										height: Math.max(1, h),
+										fill,
+										rx: 2
+									}),
+									/* @__PURE__ */ jsx("text", {
+										x: labelX,
+										y: labelY + primaryDy,
+										textAnchor: labelAnchor,
+										dominantBaseline: "alphabetic",
+										fontSize: 11,
+										fontWeight: 600,
+										fill: "var(--gray-a12)",
+										children: node.label
+									}),
+									/* @__PURE__ */ jsx("foreignObject", {
+										x: labelX,
+										y: valueY,
+										width: valueWidth,
+										height: valueHeight,
+										style: { overflow: "visible" },
+										children: /* @__PURE__ */ jsx("div", {
+											style: {
+												lineHeight: 1.2,
+												overflow: "visible"
+											},
+											children: /* @__PURE__ */ jsx(NumberFlow, {
+												value: node.value ?? 0,
+												...valueSuffix !== void 0 && { suffix: valueSuffix },
+												...valueFormat !== void 0 && { format: valueFormat },
+												className: "text-[10px] text-gray-light tabular-nums"
+											})
+										})
+									})
+								] }, `sankey-node-${index}`);
+							})
+						})] })
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { SANKEY_CATEGORY_COLORS, SankeyChart };
+
+//# sourceMappingURL=sankey-chart.js.map

package/dist/components/sankey-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  home: 'var(--spark-9)',\n  floor: 'var(--gray-a9)',\n  device: 'var(--gray-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\n/** Approx. cap/ascender height of the node name above its alphabetic baseline. */\nconst LABEL_NAME_HEIGHT = 11\n/** Vertical offset of the value box relative to the name baseline. Negative pulls\n * the value up toward the name to tighten the gap between them. */\nconst LABEL_VALUE_GAP = -4\n/** Height of the value box rendered below the node name. */\nconst VALUE_HEIGHT = 16\nconst DEFAULT_COLOR = 'var(--gray-a9)'\nconst ANIMATION_DURATION_MS = 500\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction easeOutCubic(t: number) {\n  return 1 - (1 - t) ** 3\n}\n\nfunction linkKey(link: SankeyChartLink) {\n  return `${link.source}-${link.target}`\n}\n\n/**\n * Interpolates link values toward `links` over ~500ms so visx re-layouts each\n * frame, smoothly tweening node rects and link paths.\n */\nfunction useAnimatedLinks(links: SankeyChartLink[]): SankeyChartLink[] {\n  const [animated, setAnimated] = useState<SankeyChartLink[]>(links)\n  const animatedRef = useRef<SankeyChartLink[]>(links)\n\n  useEffect(() => {\n    const fromByKey = new Map(animatedRef.current.map((l) => [linkKey(l), l]))\n    const start = performance.now()\n    let raf = 0\n\n    const tick = (now: number) => {\n      const t = Math.min(1, (now - start) / ANIMATION_DURATION_MS)\n      const eased = easeOutCubic(t)\n      const next = links.map((toLink) => {\n        const fromValue = fromByKey.get(linkKey(toLink))?.value ?? toLink.value\n        return {\n          ...toLink,\n          value: Math.round(fromValue + (toLink.value - fromValue) * eased),\n        }\n      })\n      animatedRef.current = next\n      setAnimated(next)\n      if (t < 1) raf = requestAnimationFrame(tick)\n    }\n\n    raf = requestAnimationFrame(tick)\n    return () => cancelAnimationFrame(raf)\n  }, [links])\n\n  return animated\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const animatedLinks = useAnimatedLinks(links)\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop links whose endpoints aren't in the current node set. `animatedLinks`\n  // lags `nodes` by a frame while tweening, so during a node add/remove a link\n  // can momentarily reference a node that no longer exists — which makes\n  // d3-sankey throw `missing: <id>`.\n  const visibleLinks = useMemo(\n    () =>\n      animatedLinks.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [animatedLinks, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <svg width={width} height={height}>\n            <Group left={LEFT_INSET} top={TOP_INSET}>\n              <Sankey<SankeyDatumNode, SankeyDatumLink>\n                root={graph}\n                size={[innerWidth, innerHeight]}\n                nodeWidth={nodeWidth}\n                nodePadding={nodePadding}\n                nodeAlign={sankeyJustify}\n                nodeId={(node) => node.id}\n                nodeSort={nodeSort}\n              >\n                {({ graph: laidOut, createPath }) => (\n                  <>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node, index) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        const labelX = node.x1 + LABEL_GAP\n                        // Center the name+value label on the node, then clamp it\n                        // vertically so a node flush against an edge (e.g. a tiny\n                        // \"grid\" node at the top) doesn't push its name past the\n                        // chart bounds and get clipped. The name's ascenders sit\n                        // above labelY; the value box sits below it.\n                        const labelY = Math.min(\n                          Math.max(\n                            node.y0 + h / 2 - 4,\n                            LABEL_NAME_HEIGHT - TOP_INSET,\n                          ),\n                          innerHeight + TOP_INSET - VALUE_HEIGHT,\n                        )\n                        const labelAnchor = 'start' as const\n                        const primaryDy = 0\n                        const valueWidth = Math.max(\n                          40,\n                          labelPadding - LABEL_GAP - 4,\n                        )\n                        const valueHeight = VALUE_HEIGHT\n                        const valueY = labelY + LABEL_VALUE_GAP\n\n                        return (\n                          <Group key={`sankey-node-${index}`}>\n                            <rect\n                              x={node.x0}\n                              y={node.y0}\n                              width={w}\n                              height={Math.max(1, h)}\n                              fill={fill}\n                              rx={2}\n                            />\n                            <text\n                              x={labelX}\n                              y={labelY + primaryDy}\n                              textAnchor={labelAnchor}\n                              dominantBaseline=\"alphabetic\"\n                              fontSize={11}\n                              fontWeight={600}\n                              fill=\"var(--gray-a12)\"\n                            >\n                              {node.label}\n                            </text>\n                            <foreignObject\n                              x={labelX}\n                              y={valueY}\n                              width={valueWidth}\n                              height={valueHeight}\n                              style={{ overflow: 'visible' }}\n                            >\n                              <div\n                                style={{\n                                  lineHeight: 1.2,\n                                  overflow: 'visible',\n                                }}\n                              >\n                                <NumberFlow\n                                  value={node.value ?? 0}\n                                  {...(valueSuffix !== undefined && {\n                                    suffix: valueSuffix,\n                                  })}\n                                  {...(valueFormat !== undefined && {\n                                    format: valueFormat,\n                                  })}\n                                  className=\"text-[10px] text-gray-light tabular-nums\"\n                                />\n                              </div>\n                            </foreignObject>\n                          </Group>\n                        )\n                      })}\n                    </Group>\n                  </>\n                )}\n              </Sankey>\n            </Group>\n          </svg>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}