@epilot/spark-ui 0.10.0

package/dist/components/reparent.js

@@ -0,0 +1,49 @@
+"use client";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/reparent.tsx
+const supportsMoveBefore = typeof Element !== "undefined" && "moveBefore" in Element.prototype;
+function useReparent() {
+	const [host, setHost] = React$1.useState(null);
+	React$1.useEffect(() => {
+		const el = document.createElement("div");
+		el.style.display = "contents";
+		setHost(el);
+		return () => el.remove();
+	}, []);
+	const park = React$1.useCallback(() => {
+		if (supportsMoveBefore && host?.isConnected) {
+			host.style.display = "none";
+			document.body.moveBefore(host, null);
+		}
+	}, [host]);
+	return React$1.useMemo(() => ({
+		host,
+		park
+	}), [host, park]);
+}
+function ReparentContent({ handle, children }) {
+	if (!handle.host) return null;
+	return createPortal(children, handle.host);
+}
+function ReparentSlot({ handle, ...props }) {
+	const ref = React$1.useRef(null);
+	const host = handle.host;
+	React$1.useLayoutEffect(() => {
+		const slot = ref.current;
+		if (!slot || !host) return;
+		host.style.display = "contents";
+		if (supportsMoveBefore && host.isConnected) slot.moveBefore(host, null);
+		else slot.appendChild(host);
+	}, [host]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "reparent-slot",
+		ref,
+		...props
+	});
+}
+//#endregion
+export { ReparentContent, ReparentSlot, supportsMoveBefore, useReparent };
+
+//# sourceMappingURL=reparent.js.map

package/dist/components/reparent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reparent.js","names":["React"],"sources":["../../src/components/reparent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\n// moveBefore ships in Chrome/Edge 133+, Firefox 144+; Safari has no state-preserving move\nconst supportsMoveBefore =\n  typeof Element !== 'undefined' && 'moveBefore' in Element.prototype\n\ntype MovableElement = Element & {\n  moveBefore: (node: Node, child: Node | null) => void\n}\n\ninterface ReparentHandle {\n  host: HTMLElement | null\n  park: () => void\n}\n\n// host created after mount so server and client hydrate the same (empty) markup\nfunction useReparent(): ReparentHandle {\n  const [host, setHost] = React.useState<HTMLElement | null>(null)\n  React.useEffect(() => {\n    const el = document.createElement('div')\n    el.style.display = 'contents'\n    setHost(el)\n    return () => el.remove()\n  }, [])\n  const park = React.useCallback(() => {\n    if (supportsMoveBefore && host?.isConnected) {\n      host.style.display = 'none'\n      ;(document.body as unknown as MovableElement).moveBefore(host, null)\n    }\n  }, [host])\n  return React.useMemo(() => ({ host, park }), [host, park])\n}\n\nfunction ReparentContent({\n  handle,\n  children,\n}: {\n  handle: ReparentHandle\n  children: React.ReactNode\n}) {\n  if (!handle.host) return null\n  return createPortal(children, handle.host)\n}\n\ninterface ReparentSlotProps extends React.ComponentProps<'div'> {\n  handle: ReparentHandle\n}\n\nfunction ReparentSlot({ handle, ...props }: ReparentSlotProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const host = handle.host\n  React.useLayoutEffect(() => {\n    const slot = ref.current\n    if (!slot || !host) return\n    host.style.display = 'contents'\n    if (supportsMoveBefore && host.isConnected) {\n      ;(slot as unknown as MovableElement).moveBefore(host, null)\n    } else {\n      slot.appendChild(host)\n    }\n  }, [host])\n  return <div data-slot=\"reparent-slot\" ref={ref} {...props} />\n}\n\nexport { ReparentContent, ReparentSlot, supportsMoveBefore, useReparent }\nexport type { ReparentHandle, ReparentSlotProps }\n"],"mappings":";;;;;AAIA,MAAM,qBACJ,OAAO,YAAY,eAAe,gBAAgB,QAAQ;AAY5D,SAAS,cAA8B;CACrC,MAAM,CAAC,MAAM,WAAWA,QAAM,SAA6B,IAAI;CAC/D,QAAM,gBAAgB;EACpB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,MAAM,UAAU;EACnB,QAAQ,EAAE;EACV,aAAa,GAAG,OAAO;CACzB,GAAG,CAAC,CAAC;CACL,MAAM,OAAOA,QAAM,kBAAkB;EACnC,IAAI,sBAAsB,MAAM,aAAa;GAC3C,KAAK,MAAM,UAAU;GACpB,SAAU,KAAmC,WAAW,MAAM,IAAI;EACrE;CACF,GAAG,CAAC,IAAI,CAAC;CACT,OAAOA,QAAM,eAAe;EAAE;EAAM;CAAK,IAAI,CAAC,MAAM,IAAI,CAAC;AAC3D;AAEA,SAAS,gBAAgB,EACvB,QACA,YAIC;CACD,IAAI,CAAC,OAAO,MAAM,OAAO;CACzB,OAAO,aAAa,UAAU,OAAO,IAAI;AAC3C;AAMA,SAAS,aAAa,EAAE,QAAQ,GAAG,SAA4B;CAC7D,MAAM,MAAMA,QAAM,OAAuB,IAAI;CAC7C,MAAM,OAAO,OAAO;CACpB,QAAM,sBAAsB;EAC1B,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,QAAQ,CAAC,MAAM;EACpB,KAAK,MAAM,UAAU;EACrB,IAAI,sBAAsB,KAAK,aAC5B,KAAoC,WAAW,MAAM,IAAI;OAE1D,KAAK,YAAY,IAAI;CAEzB,GAAG,CAAC,IAAI,CAAC;CACT,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAqB;EAAK,GAAI;CAAQ,CAAA;AAC9D"}

package/dist/components/sankey-chart.cjs

@@ -0,0 +1,187 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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)",
+	gridFeedIn: "var(--blue-7)",
+	home: "var(--spark-9)",
+	floor: "var(--neutral-a9)",
+	device: "var(--neutral-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(--neutral-a9)";
+function resolveNodeColor(node, categoryColors, defaultColor) {
+	if (node.color) return node.color;
+	if (node.category && categoryColors?.[node.category]) return categoryColors[node.category];
+	return defaultColor;
+}
+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, keepAtDepthIds, 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 nodeIds = (0, react.useMemo)(() => new Set(nodes.map((node) => node.id)), [nodes]);
+	const visibleLinks = (0, react.useMemo)(() => links.filter((link) => link.value > 0 && nodeIds.has(link.source) && nodeIds.has(link.target)), [links, 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 nodeAlign = (0, react.useMemo)(() => {
+		const keep = new Set(keepAtDepthIds);
+		return (node, n) => keep.has(node.id) ? node.depth ?? 0 : (0, _visx_sankey.sankeyJustify)(node, n);
+	}, [keepAtDepthIds]);
+	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,
+						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(--neutral-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","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  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-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  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\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(--neutral-a9)'\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 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  keepAtDepthIds,\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 nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, 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 nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\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={nodeAlign}\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(--neutral-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,66 @@
+"use client";
+
+import { t as Format } from "../number-flow-Bch81ixZ.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;
+  /**
+   * Node ids kept at their natural (computed) column instead of being pushed to
+   * the last column. By default `sankeyJustify` sends every node with no
+   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid
+   * feed-in) in a middle column alongside its siblings.
+   */
+  keepAtDepthIds?: readonly string[];
+  title?: string;
+  className?: string;
+}
+declare function SankeyChart({
+  nodes,
+  links,
+  categoryColors,
+  defaultColor,
+  valueSuffix,
+  valueFormat,
+  height,
+  nodeWidth,
+  nodePadding,
+  labelPadding,
+  keepAtDepthIds,
+  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,66 @@
+"use client";
+
+import { t as Format } from "../number-flow-Bch81ixZ.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;
+  /**
+   * Node ids kept at their natural (computed) column instead of being pushed to
+   * the last column. By default `sankeyJustify` sends every node with no
+   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid
+   * feed-in) in a middle column alongside its siblings.
+   */
+  keepAtDepthIds?: readonly string[];
+  title?: string;
+  className?: string;
+}
+declare function SankeyChart({
+  nodes,
+  links,
+  categoryColors,
+  defaultColor,
+  valueSuffix,
+  valueFormat,
+  height,
+  nodeWidth,
+  nodePadding,
+  labelPadding,
+  keepAtDepthIds,
+  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,185 @@
+"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)",
+	gridFeedIn: "var(--blue-7)",
+	home: "var(--spark-9)",
+	floor: "var(--neutral-a9)",
+	device: "var(--neutral-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(--neutral-a9)";
+function resolveNodeColor(node, categoryColors, defaultColor) {
+	if (node.color) return node.color;
+	if (node.category && categoryColors?.[node.category]) return categoryColors[node.category];
+	return defaultColor;
+}
+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, keepAtDepthIds, 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 nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes]);
+	const visibleLinks = useMemo(() => links.filter((link) => link.value > 0 && nodeIds.has(link.source) && nodeIds.has(link.target)), [links, 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 nodeAlign = useMemo(() => {
+		const keep = new Set(keepAtDepthIds);
+		return (node, n) => keep.has(node.id) ? node.depth ?? 0 : sankeyJustify(node, n);
+	}, [keepAtDepthIds]);
+	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,
+						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(--neutral-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  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-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  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\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(--neutral-a9)'\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 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  keepAtDepthIds,\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 nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, 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 nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\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={nodeAlign}\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(--neutral-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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"}