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

package/dist/components/power-history.js

@@ -0,0 +1,114 @@
+"use client";
+import { useContainerWidth } from "../hooks/use-container-width.js";
+import "../utils/chars.js";
+import { oneDecimalFormat } from "../utils/format.js";
+import { SeriesLegend } from "./series-legend.js";
+import { SectionTitle } from "./typography.js";
+import { LineChart } from "./line-chart.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/power-history.tsx
+/** Visual config (colors/classes) per series, independent of labels. */
+const SERIES_STYLE = [
+	{
+		id: "production",
+		color: "var(--orange-a9)",
+		strokeClass: "stroke-orange-a9"
+	},
+	{
+		id: "feedin",
+		color: "var(--green-a9)",
+		strokeClass: "stroke-green-a9"
+	},
+	{
+		id: "grid",
+		color: "var(--blue-11)",
+		strokeClass: "stroke-blue-11"
+	},
+	{
+		id: "consumption",
+		color: "var(--gray-a7)",
+		strokeClass: "stroke-gray-a7"
+	}
+];
+function PowerHistory({ solar, consumption, feedIn, grid, formatDate, title = "Power history", seriesLabels }) {
+	const [chartContainerRef, chartWidth] = useContainerWidth();
+	const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Set());
+	const toggleSeries = useCallback((id) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const dataById = useMemo(() => ({
+		production: solar,
+		feedin: feedIn,
+		grid,
+		consumption
+	}), [
+		consumption,
+		feedIn,
+		grid,
+		solar
+	]);
+	const labelById = useMemo(() => ({
+		production: seriesLabels?.production ?? "Production",
+		feedin: seriesLabels?.feedIn ?? "Feed in",
+		grid: seriesLabels?.grid ?? "Grid",
+		consumption: seriesLabels?.consumption ?? "Consumption"
+	}), [seriesLabels]);
+	const legendItems = useMemo(() => SERIES_STYLE.map((entry) => ({
+		id: entry.id,
+		label: labelById[entry.id],
+		color: entry.color
+	})), [labelById]);
+	const visibleSeries = useMemo(() => SERIES_STYLE.filter((entry) => !hiddenSeries.has(entry.id)).map((entry) => ({
+		id: entry.id,
+		data: dataById[entry.id],
+		curve: "monotone",
+		className: entry.strokeClass
+	})), [dataById, hiddenSeries]);
+	if (solar.every((s) => s.value === 0) && consumption.every((c) => c.value === 0) && feedIn.every((f) => f.value === 0) && grid.every((g) => g.value === 0)) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between",
+				children: /* @__PURE__ */ jsx(SectionTitle, { children: title })
+			}),
+			/* @__PURE__ */ jsx(SeriesLegend, {
+				items: legendItems,
+				hiddenIds: hiddenSeries,
+				onToggle: toggleSeries
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: chartContainerRef,
+				className: "w-full",
+				style: { minHeight: 200 },
+				children: chartWidth > 0 && visibleSeries.length > 0 && /* @__PURE__ */ jsx(LineChart, {
+					width: chartWidth,
+					height: 200,
+					margin: {
+						top: 8,
+						right: 8,
+						bottom: 28,
+						left: 8
+					},
+					series: visibleSeries,
+					showGrid: true,
+					showTooltip: true,
+					xTickCount: 5,
+					yTickCount: 4,
+					formatDate,
+					formatValue: (v) => `${oneDecimalFormat.format(v / 1e3)} kW`
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { PowerHistory as default };
+
+//# sourceMappingURL=power-history.js.map

package/dist/components/power-history.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"power-history.js","names":["kwFormat"],"sources":["../../src/components/power-history.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport { useContainerWidth } from '../hooks/use-container-width'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { oneDecimalFormat as kwFormat } from '../utils/format'\nimport { LineChart } from './line-chart'\nimport { SeriesLegend, type SeriesLegendItem } from './series-legend'\nimport { SectionTitle } from './typography'\n\ninterface PowerHistorySeries {\n  id: string\n  label: string\n  /** CSS color value (e.g. `var(--orange-a9)`). */\n  color: string\n  /** Tailwind stroke class applied to the line (e.g. `stroke-orange-a9`). */\n  strokeClass: string\n  data: { date: Date; value: number }[]\n}\n\n/** Visual config (colors/classes) per series, independent of labels. */\nconst SERIES_STYLE: ReadonlyArray<\n  Pick<PowerHistorySeries, 'id' | 'color' | 'strokeClass'>\n> = [\n  {\n    id: 'production',\n    color: 'var(--orange-a9)',\n    strokeClass: 'stroke-orange-a9',\n  },\n  {\n    id: 'feedin',\n    color: 'var(--green-a9)',\n    strokeClass: 'stroke-green-a9',\n  },\n  {\n    id: 'grid',\n    color: 'var(--blue-11)',\n    strokeClass: 'stroke-blue-11',\n  },\n  {\n    id: 'consumption',\n    color: 'var(--gray-a7)',\n    strokeClass: 'stroke-gray-a7',\n  },\n]\n\ninterface PowerHistorySeriesLabels {\n  production?: React.ReactNode\n  feedIn?: React.ReactNode\n  grid?: React.ReactNode\n  consumption?: React.ReactNode\n}\n\nexport default function PowerHistory({\n  solar,\n  consumption,\n  feedIn,\n  grid,\n  formatDate,\n  title = 'Power history',\n  seriesLabels,\n}: {\n  solar: { date: Date; value: number }[]\n  consumption: { date: Date; value: number }[]\n  feedIn: { date: Date; value: number }[]\n  grid: { date: Date; value: number }[]\n  formatDate: (date: Date) => string\n  /** Override the section title. Defaults to `\"Power history\"`. */\n  title?: React.ReactNode\n  /** Override the legend labels for each series. Each defaults to its English name. */\n  seriesLabels?: PowerHistorySeriesLabels\n}) {\n  const [chartContainerRef, chartWidth] = useContainerWidth<HTMLDivElement>()\n  const [hiddenSeries, setHiddenSeries] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n\n  const toggleSeries = useCallback((id: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const dataById = useMemo(\n    () => ({\n      production: solar,\n      feedin: feedIn,\n      grid,\n      consumption,\n    }),\n    [consumption, feedIn, grid, solar],\n  )\n\n  const labelById = useMemo<Record<string, React.ReactNode>>(\n    () => ({\n      production: seriesLabels?.production ?? 'Production',\n      feedin: seriesLabels?.feedIn ?? 'Feed in',\n      grid: seriesLabels?.grid ?? 'Grid',\n      consumption: seriesLabels?.consumption ?? 'Consumption',\n    }),\n    [seriesLabels],\n  )\n\n  const legendItems: SeriesLegendItem[] = useMemo(\n    () =>\n      SERIES_STYLE.map((entry) => ({\n        id: entry.id,\n        label: labelById[entry.id] as string,\n        color: entry.color,\n      })),\n    [labelById],\n  )\n\n  const visibleSeries = useMemo(\n    () =>\n      SERIES_STYLE.filter((entry) => !hiddenSeries.has(entry.id)).map(\n        (entry) => ({\n          id: entry.id,\n          data: dataById[entry.id as keyof typeof dataById],\n          curve: 'monotone' as const,\n          className: entry.strokeClass,\n        }),\n      ),\n    [dataById, hiddenSeries],\n  )\n\n  const dataEmpty =\n    solar.every((s) => s.value === 0) &&\n    consumption.every((c) => c.value === 0) &&\n    feedIn.every((f) => f.value === 0) &&\n    grid.every((g) => g.value === 0)\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n\n      <SeriesLegend\n        items={legendItems}\n        hiddenIds={hiddenSeries}\n        onToggle={toggleSeries}\n      />\n\n      <div\n        ref={chartContainerRef}\n        className=\"w-full\"\n        style={{ minHeight: 200 }}\n      >\n        {chartWidth > 0 && visibleSeries.length > 0 && (\n          <LineChart\n            width={chartWidth}\n            height={200}\n            margin={{ top: 8, right: 8, bottom: 28, left: 8 }}\n            series={visibleSeries}\n            showGrid\n            showTooltip\n            xTickCount={5}\n            yTickCount={4}\n            formatDate={formatDate}\n            formatValue={(v) => `${kwFormat.format(v / 1000)}${NARROW_NBSP}kW`}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,eAEF;CACF;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACd;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACd;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACd;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACd;CACF;AASD,SAAwB,aAAa,EACnC,OACA,aACA,QACA,MACA,YACA,QAAQ,iBACR,gBAWC;CACD,MAAM,CAAC,mBAAmB,cAAc,mBAAmC;CAC3E,MAAM,CAAC,cAAc,mBAAmB,+BAChC,IAAI,KAAK,CAChB;CAED,MAAM,eAAe,aAAa,OAAe;AAC/C,mBAAiB,SAAS;GACxB,MAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,OAAI,KAAK,IAAI,GAAG,CACd,MAAK,OAAO,GAAG;OAEf,MAAK,IAAI,GAAG;AAEd,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,WAAW,eACR;EACL,YAAY;EACZ,QAAQ;EACR;EACA;EACD,GACD;EAAC;EAAa;EAAQ;EAAM;EAAM,CACnC;CAED,MAAM,YAAY,eACT;EACL,YAAY,cAAc,cAAc;EACxC,QAAQ,cAAc,UAAU;EAChC,MAAM,cAAc,QAAQ;EAC5B,aAAa,cAAc,eAAe;EAC3C,GACD,CAAC,aAAa,CACf;CAED,MAAM,cAAkC,cAEpC,aAAa,KAAK,WAAW;EAC3B,IAAI,MAAM;EACV,OAAO,UAAU,MAAM;EACvB,OAAO,MAAM;EACd,EAAE,EACL,CAAC,UAAU,CACZ;CAED,MAAM,gBAAgB,cAElB,aAAa,QAAQ,UAAU,CAAC,aAAa,IAAI,MAAM,GAAG,CAAC,CAAC,KACzD,WAAW;EACV,IAAI,MAAM;EACV,MAAM,SAAS,MAAM;EACrB,OAAO;EACP,WAAW,MAAM;EAClB,EACF,EACH,CAAC,UAAU,aAAa,CACzB;AAQD,KALE,MAAM,OAAO,MAAM,EAAE,UAAU,EAAE,IACjC,YAAY,OAAO,MAAM,EAAE,UAAU,EAAE,IACvC,OAAO,OAAO,MAAM,EAAE,UAAU,EAAE,IAClC,KAAK,OAAO,MAAM,EAAE,UAAU,EAAE,CAEnB,QAAO;AAEtB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,cAAD,EAAA,UAAe,OAAqB,CAAA;IAChC,CAAA;GAEN,oBAAC,cAAD;IACE,OAAO;IACP,WAAW;IACX,UAAU;IACV,CAAA;GAEF,oBAAC,OAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO,EAAE,WAAW,KAAK;cAExB,aAAa,KAAK,cAAc,SAAS,KACxC,oBAAC,WAAD;KACE,OAAO;KACP,QAAQ;KACR,QAAQ;MAAE,KAAK;MAAG,OAAO;MAAG,QAAQ;MAAI,MAAM;MAAG;KACjD,QAAQ;KACR,UAAA;KACA,aAAA;KACA,YAAY;KACZ,YAAY;KACA;KACZ,cAAc,MAAM,GAAGA,iBAAS,OAAO,IAAI,IAAK;KAChD,CAAA;IAEA,CAAA;GACF"}

package/dist/components/power-network.cjs

@@ -0,0 +1,530 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_typography = require("./typography.cjs");
+const require_components_number_flow = require("./number-flow.cjs");
+const require_components_skeleton = require("./skeleton.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/power-network.tsx
+const SOURCE_VARIANTS = {
+	grid: {
+		activeClassName: "border-blue-a9 bg-blue-a1 shadow-blue-a4",
+		flowStroke: "var(--blue-11)",
+		initialDashGap: 10
+	},
+	solar: {
+		activeClassName: "border-orange-a9 bg-orange-a1 shadow-orange-a3",
+		flowStroke: "var(--orange-a9)",
+		initialDashGap: 5
+	},
+	battery: {
+		activeClassName: "border-green-a9 bg-green-a1 shadow-green-a3",
+		flowStroke: "var(--green-a9)",
+		initialDashGap: 7
+	},
+	neutral: {
+		activeClassName: "border-slate-a9 bg-slate-a1 shadow-slate-a3",
+		flowStroke: "var(--slate-a9)",
+		initialDashGap: 9
+	}
+};
+const DEVICE_FLOW_STROKE = "var(--slate-a9)";
+const DEVICE_INITIAL_DASH_GAP = 9;
+const SKELETON_STROKE = "var(--gray-a6)";
+const STROKE_WIDTH = 2;
+const STRAIGHT_TOLERANCE_PX = 3;
+const SOURCE_HOME_OFFSET_STEP_PX = 10;
+const DEVICE_HOME_OFFSET_STEP_PX = 10;
+const FLOW_DASH_SOLID = 1;
+const FLOW_GAP_MAX = 14;
+const FLOW_GAP_MIN = 5;
+const FLOW_SPEED_MIN = 10;
+const FLOW_SPEED_MAX = 56;
+const FLOW_SMOOTHING = 5.5;
+const PowerNetworkContext = (0, react.createContext)(null);
+function usePowerNetwork() {
+	const ctx = (0, react.useContext)(PowerNetworkContext);
+	if (!ctx) throw new Error("Power network sub-components must be used inside <PowerNetworkDiagram>.");
+	return ctx;
+}
+function anchorTop(rect, containerRect) {
+	return {
+		x: rect.left + rect.width / 2 - containerRect.left,
+		y: rect.top - containerRect.top
+	};
+}
+function anchorBottom(rect, containerRect) {
+	return {
+		x: rect.left + rect.width / 2 - containerRect.left,
+		y: rect.bottom - containerRect.top
+	};
+}
+function buildAdaptivePath(from, to) {
+	if (Math.abs(from.x - to.x) < STRAIGHT_TOLERANCE_PX) return `M ${from.x} ${from.y} L ${to.x} ${to.y}`;
+	const dy = to.y - from.y;
+	const c1y = from.y + dy * .56;
+	const c2y = to.y - dy * .58;
+	return `M ${from.x} ${from.y} C ${from.x} ${c1y} ${to.x} ${c2y} ${to.x} ${to.y}`;
+}
+function connectorPathsEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) {
+		const ap = a[i];
+		const bp = b[i];
+		if (!ap || !bp) return false;
+		if (ap.id !== bp.id || ap.d !== bp.d || ap.variant !== bp.variant || ap.kind !== bp.kind || ap.reversed !== bp.reversed) return false;
+	}
+	return true;
+}
+function PowerNetworkDiagram({ title, loading = false, className, children }) {
+	const containerRef = (0, react.useRef)(null);
+	const [nodes, setNodes] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const [connectorPaths, setConnectorPaths] = (0, react.useState)([]);
+	const connectorPathsRef = (0, react.useRef)([]);
+	const flowPathRefs = (0, react.useRef)({});
+	const currentFlowVisualsRef = (0, react.useRef)({});
+	const targetFlowVisualsRef = (0, react.useRef)({});
+	const register = (0, react.useCallback)((node) => {
+		setNodes((prev) => {
+			const existing = prev.get(node.id);
+			if (existing && existing.kind === node.kind && existing.variant === node.variant && existing.watts === node.watts && existing.element === node.element) return prev;
+			const next = new Map(prev);
+			next.set(node.id, node);
+			return next;
+		});
+	}, []);
+	const unregister = (0, react.useCallback)((id) => {
+		setNodes((prev) => {
+			if (!prev.has(id)) return prev;
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	const totalSourceWatts = (0, react.useMemo)(() => {
+		let total = 0;
+		for (const node of nodes.values()) if (node.kind === "source") total += node.watts;
+		return total;
+	}, [nodes]);
+	(0, react.useEffect)(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		let homeNode;
+		const sources = [];
+		const devices = [];
+		for (const node of nodes.values()) if (node.kind === "home") homeNode = node;
+		else if (node.element) if (node.kind === "source") sources.push(node);
+		else devices.push(node);
+		const updatePaths = () => {
+			if (!homeNode || !homeNode.element) {
+				setConnectorPaths((prev) => prev.length === 0 ? prev : []);
+				return;
+			}
+			const containerRect = container.getBoundingClientRect();
+			const homeRect = homeNode.element.getBoundingClientRect();
+			const homeTop = anchorTop(homeRect, containerRect);
+			const homeBottom = anchorBottom(homeRect, containerRect);
+			const next = [];
+			const sourceCount = sources.length;
+			const deviceCount = devices.length;
+			sources.forEach((source, index) => {
+				if (!source.element) return;
+				const from = anchorBottom(source.element.getBoundingClientRect(), containerRect);
+				const offsetX = SOURCE_HOME_OFFSET_STEP_PX * (index - (sourceCount - 1) / 2);
+				const to = {
+					x: homeTop.x + offsetX,
+					y: homeTop.y
+				};
+				next.push({
+					id: source.id,
+					d: buildAdaptivePath(from, to),
+					kind: "source",
+					variant: source.variant,
+					reversed: source.watts < 0
+				});
+			});
+			devices.forEach((device, index) => {
+				if (!device.element) return;
+				const to = anchorTop(device.element.getBoundingClientRect(), containerRect);
+				const offsetX = DEVICE_HOME_OFFSET_STEP_PX * (index - (deviceCount - 1) / 2);
+				const from = {
+					x: homeBottom.x + offsetX,
+					y: homeBottom.y
+				};
+				next.push({
+					id: device.id,
+					d: buildAdaptivePath(from, to),
+					kind: "device",
+					reversed: false
+				});
+			});
+			setConnectorPaths((prev) => connectorPathsEqual(prev, next) ? prev : next);
+		};
+		updatePaths();
+		const resizeObserver = new ResizeObserver(updatePaths);
+		resizeObserver.observe(container);
+		for (const node of nodes.values()) if (node.element) resizeObserver.observe(node.element);
+		window.addEventListener("resize", updatePaths);
+		return () => {
+			resizeObserver.disconnect();
+			window.removeEventListener("resize", updatePaths);
+		};
+	}, [nodes]);
+	(0, react.useEffect)(() => {
+		connectorPathsRef.current = connectorPaths;
+	}, [connectorPaths]);
+	(0, react.useEffect)(() => {
+		const targets = {};
+		const homeWatts = totalSourceWatts;
+		for (const node of nodes.values()) {
+			if (node.kind === "home") continue;
+			const watts = node.watts;
+			const relative = homeWatts > 0 ? Math.max(0, Math.min(1, Math.abs(watts) / homeWatts)) : 0;
+			targets[node.id] = {
+				gap: FLOW_GAP_MAX - (FLOW_GAP_MAX - FLOW_GAP_MIN) * relative,
+				speed: FLOW_SPEED_MIN + (FLOW_SPEED_MAX - FLOW_SPEED_MIN) * relative,
+				opacity: Math.abs(watts) > 0 ? 1 : 0
+			};
+		}
+		targetFlowVisualsRef.current = targets;
+	}, [nodes, totalSourceWatts]);
+	(0, react.useEffect)(() => {
+		if (loading) return;
+		let frameId = 0;
+		let lastFrameTime = performance.now();
+		const animate = (now) => {
+			const deltaSeconds = Math.max(.001, (now - lastFrameTime) / 1e3);
+			lastFrameTime = now;
+			const smoothing = 1 - Math.exp(-FLOW_SMOOTHING * deltaSeconds);
+			for (const connectorPath of connectorPathsRef.current) {
+				const id = connectorPath.id;
+				const target = targetFlowVisualsRef.current[id];
+				const pathElement = flowPathRefs.current[id];
+				if (!target || !pathElement) continue;
+				const current = currentFlowVisualsRef.current[id] ?? {
+					gap: target.gap,
+					offset: 0,
+					speed: target.speed,
+					opacity: target.opacity
+				};
+				current.gap += (target.gap - current.gap) * smoothing;
+				current.speed += (target.speed - current.speed) * smoothing;
+				current.opacity += (target.opacity - current.opacity) * smoothing;
+				const dashCycle = FLOW_DASH_SOLID + Math.max(.001, current.gap);
+				const direction = connectorPath.reversed ? 1 : -1;
+				current.offset = ((current.offset + direction * current.speed * deltaSeconds) % dashCycle + dashCycle) % dashCycle - dashCycle;
+				pathElement.setAttribute("stroke-dasharray", `${FLOW_DASH_SOLID} ${current.gap.toFixed(3)}`);
+				pathElement.setAttribute("stroke-dashoffset", current.offset.toFixed(3));
+				pathElement.setAttribute("opacity", current.opacity.toFixed(3));
+				currentFlowVisualsRef.current[id] = current;
+			}
+			frameId = window.requestAnimationFrame(animate);
+		};
+		frameId = window.requestAnimationFrame(animate);
+		return () => window.cancelAnimationFrame(frameId);
+	}, [loading]);
+	const contextValue = (0, react.useMemo)(() => ({
+		loading,
+		register,
+		unregister,
+		totalSourceWatts
+	}), [
+		loading,
+		register,
+		unregister,
+		totalSourceWatts
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PowerNetworkContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: containerRef,
+			className: (0, cnfast.cn)("@container relative flex flex-col", className),
+			children: [
+				title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children: title }),
+				connectorPaths.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					className: "pointer-events-none absolute inset-0 size-full",
+					children: connectorPaths.map((path) => {
+						if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: path.d,
+							fill: "none",
+							stroke: SKELETON_STROKE,
+							strokeWidth: STROKE_WIDTH,
+							strokeLinecap: "round"
+						}, path.id);
+						const flowStroke = path.kind === "source" && path.variant ? SOURCE_VARIANTS[path.variant].flowStroke : DEVICE_FLOW_STROKE;
+						const initialDashGap = path.kind === "source" && path.variant ? SOURCE_VARIANTS[path.variant].initialDashGap : DEVICE_INITIAL_DASH_GAP;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: path.d,
+							fill: "none",
+							stroke: "var(--gray-a1)",
+							strokeWidth: STROKE_WIDTH,
+							strokeLinecap: "round"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: path.d,
+							fill: "none",
+							stroke: flowStroke,
+							strokeWidth: STROKE_WIDTH,
+							strokeLinecap: "round",
+							ref: (el) => {
+								flowPathRefs.current[path.id] = el;
+							},
+							strokeDasharray: `${FLOW_DASH_SOLID} ${initialDashGap}`,
+							strokeDashoffset: 0,
+							opacity: 0
+						})] }, path.id);
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-col gap-y-14",
+					children
+				})
+			]
+		})
+	});
+}
+function PowerNetworkSources({ className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]", className),
+		children
+	});
+}
+function PowerNetworkDevices({ className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]", className),
+		children
+	});
+}
+function PowerSource({ id: idProp, watts, icon, variant = "neutral", className, progress }) {
+	const autoId = (0, react.useId)();
+	const id = idProp ?? autoId;
+	const { register, unregister, loading } = usePowerNetwork();
+	const [element, setElement] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!element) return;
+		register({
+			id,
+			kind: "source",
+			variant,
+			watts,
+			element
+		});
+	}, [
+		element,
+		register,
+		id,
+		variant,
+		watts
+	]);
+	(0, react.useEffect)(() => {
+		return () => unregister(id);
+	}, [unregister, id]);
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SourceSkeleton, { anchorRef: setElement });
+	const isActive = watts !== 0;
+	const variantStyles = SOURCE_VARIANTS[variant];
+	const clampedProgress = progress == null ? null : Math.max(0, Math.min(100, progress));
+	const showRing = clampedProgress != null;
+	const RING_RADIUS = 48;
+	const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+	const ringDash = clampedProgress != null ? clampedProgress / 100 * RING_CIRCUMFERENCE : 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("flex flex-col items-center justify-center gap-1 transition-opacity duration-500", !isActive && "opacity-45", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
+			value: Math.abs(watts),
+			suffix: "W",
+			className: "mt-1 text-sm leading-none font-medium"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: setElement,
+			className: (0, cnfast.cn)("relative flex aspect-square items-center justify-center rounded-circle border p-4 shadow-sm", isActive ? variantStyles.activeClassName : "border-gray bg-gray-a3 shadow-gray-a4 saturate-0"),
+			children: [showRing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				className: "pointer-events-none absolute inset-0 size-full -rotate-90",
+				viewBox: "0 0 100 100",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "50",
+					cy: "50",
+					r: RING_RADIUS,
+					fill: "none",
+					stroke: variantStyles.flowStroke,
+					strokeWidth: "4",
+					strokeLinecap: "round",
+					strokeDasharray: `${ringDash} ${RING_CIRCUMFERENCE}`,
+					opacity: isActive ? 1 : .5
+				})
+			}), icon]
+		})]
+	});
+}
+function SourceSkeleton({ anchorRef }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center justify-center gap-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-3.5 w-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: anchorRef,
+			className: "flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-7" })
+		})]
+	});
+}
+function PowerDevice({ id: idProp, watts, icon, className }) {
+	const autoId = (0, react.useId)();
+	const id = idProp ?? autoId;
+	const { register, unregister, loading } = usePowerNetwork();
+	const [element, setElement] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!element) return;
+		register({
+			id,
+			kind: "device",
+			watts,
+			element
+		});
+	}, [
+		element,
+		register,
+		id,
+		watts
+	]);
+	(0, react.useEffect)(() => {
+		return () => unregister(id);
+	}, [unregister, id]);
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceSkeleton, { anchorRef: setElement });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("flex flex-col items-center justify-center gap-1", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: setElement,
+			className: "flex aspect-square items-center justify-center rounded-circle border border-gray bg-slate-a1 p-4",
+			children: icon
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
+			value: watts,
+			suffix: "W",
+			className: "text-sm font-medium tabular-nums"
+		})]
+	});
+}
+function DeviceSkeleton({ anchorRef }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center justify-center gap-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: anchorRef,
+			className: "flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-5" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-3.5 w-10" })]
+	});
+}
+function PowerNetworkHome({ watts, autarky, className }) {
+	const autoId = (0, react.useId)();
+	const { register, unregister, loading, totalSourceWatts } = usePowerNetwork();
+	const [element, setElement] = (0, react.useState)(null);
+	const effectiveWatts = watts ?? totalSourceWatts;
+	(0, react.useEffect)(() => {
+		if (!element) return;
+		register({
+			id: autoId,
+			kind: "home",
+			watts: effectiveWatts,
+			element
+		});
+	}, [
+		element,
+		register,
+		autoId,
+		effectiveWatts
+	]);
+	(0, react.useEffect)(() => {
+		return () => unregister(autoId);
+	}, [unregister, autoId]);
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HomeSkeleton, {
+		anchorRef: setElement,
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HomeSection, {
+		anchorRef: setElement,
+		autarky: autarky ?? null,
+		watts: effectiveWatts,
+		className
+	});
+}
+function HomeSection({ anchorRef, autarky, className, watts }) {
+	const targetAutarky = autarky == null ? 0 : Math.max(0, Math.min(100, autarky * 100));
+	const [animatedAutarky, setAnimatedAutarky] = (0, react.useState)(targetAutarky);
+	const animatedAutarkyRef = (0, react.useRef)(animatedAutarky);
+	const nodeSize = 78;
+	const ringStrokeWidth = 2;
+	const radius = (nodeSize - ringStrokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const progressLength = animatedAutarky / 100 * circumference;
+	(0, react.useEffect)(() => {
+		animatedAutarkyRef.current = animatedAutarky;
+	}, [animatedAutarky]);
+	(0, react.useEffect)(() => {
+		let frameId = 0;
+		let lastTime = performance.now();
+		const animate = (now) => {
+			const deltaSeconds = Math.max(.001, (now - lastTime) / 1e3);
+			lastTime = now;
+			const smoothing = 1 - Math.exp(-7 * deltaSeconds);
+			const next = animatedAutarkyRef.current + (targetAutarky - animatedAutarkyRef.current) * smoothing;
+			animatedAutarkyRef.current = next;
+			setAnimatedAutarky(next);
+			if (Math.abs(targetAutarky - next) > .05) frameId = window.requestAnimationFrame(animate);
+			else {
+				animatedAutarkyRef.current = targetAutarky;
+				setAnimatedAutarky(targetAutarky);
+			}
+		};
+		frameId = window.requestAnimationFrame(animate);
+		return () => window.cancelAnimationFrame(frameId);
+	}, [targetAutarky]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: anchorRef,
+		className: (0, cnfast.cn)("relative mx-auto size-[78px]", className),
+		children: [autarky != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			className: "absolute inset-0 size-full -rotate-90",
+			viewBox: `0 0 ${nodeSize} ${nodeSize}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: nodeSize / 2,
+				cy: nodeSize / 2,
+				r: radius,
+				fill: "none",
+				stroke: "var(--gray-a5)",
+				strokeWidth: ringStrokeWidth
+			}), progressLength > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: nodeSize / 2,
+				cy: nodeSize / 2,
+				r: radius,
+				fill: "none",
+				stroke: "var(--green-a9)",
+				strokeLinecap: "round",
+				strokeWidth: ringStrokeWidth,
+				strokeDasharray: `${progressLength} ${circumference}`
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "absolute inset-0 flex flex-col items-center justify-center rounded-circle border border-gray-a5 shadow-sm shadow-gray-a1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+				className: "text-[14px]",
+				name: "home"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
+				value: watts,
+				suffix: "W",
+				className: "mt-1 text-sm leading-none font-medium"
+			})]
+		})]
+	});
+}
+function HomeSkeleton({ anchorRef, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: anchorRef,
+		className: (0, cnfast.cn)("mx-auto size-[78px] animate-pulse rounded-circle border border-gray motion-reduce:animate-none", className)
+	});
+}
+//#endregion
+exports.PowerDevice = PowerDevice;
+exports.PowerNetworkDevices = PowerNetworkDevices;
+exports.PowerNetworkDiagram = PowerNetworkDiagram;
+exports.PowerNetworkHome = PowerNetworkHome;
+exports.PowerNetworkSources = PowerNetworkSources;
+exports.PowerSource = PowerSource;
+
+//# sourceMappingURL=power-network.cjs.map