@epilot/spark-ui 0.20.0 → 0.21.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"power-history-chart.js","names":["React","valueFormat"],"sources":["../../src/components/power-history-chart.tsx"],"sourcesContent":["import { curveMonotoneX } from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { scaleLinear } from '@visx/scale'\nimport { Area, LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useAnimatedChartDomain, useChartZoom } from '../hooks/use-chart-zoom'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  buildYAxisScale,\n  formatYAxisTick,\n  measureYAxisGutter,\n} from '../utils/chart-scale'\nimport { buildTimeTicks } from '../utils/chart-time-ticks'\nimport type { TimeDomain } from '../utils/chart-zoom'\nimport { cn } from '../utils/cn'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport {\n  ChartTooltipCard,\n  type ChartTooltipRow,\n  ChartZoomResetButton,\n  clampTooltipPosition,\n  useMeasuredSize,\n} from './chart'\nimport { SeriesLegend, type SeriesLegendItem } from './series-legend'\nimport { SectionTitle } from './typography'\n\nexport interface PowerHistoryPoint {\n  /** Epoch milliseconds. */\n  t: number\n  solar: number\n  /** Signed: positive = import, negative = feed-in. */\n  grid: number\n  /** Signed: positive = discharge, negative = charge. */\n  battery: number\n  consumption: number\n}\n\nexport interface PowerHistoryChartProps {\n  data: PowerHistoryPoint[]\n  /** Axis/tooltip unit, e.g. \"kW\". */\n  unit: string\n  formatX: (t: number) => string\n  /** Tooltip time formatter. Defaults to `formatX`; use to keep the tooltip's\n   * full clock time when the axis ticks are compact (hour-only). */\n  formatTooltipX?: (t: number) => string\n  formatValue?: (value: number) => string\n  labels: {\n    solar: string\n    grid: string\n    battery: string\n    consumption: string\n  }\n  /** Series to drop entirely (no legend entry, area, or tooltip row). */\n  omitSeries?: readonly PowerHistorySeriesKey[]\n  /** Epoch ms to mark with the current-time dashed line (omit to hide). */\n  highlightAt?: number\n  title?: string\n  className?: string\n  height?: number\n  zoomable?: boolean\n  zoomResetLabel?: string\n  zoomDomain?: TimeDomain | null\n  onZoomDomainChange?: (domain: TimeDomain | null) => void\n}\n\nconst AREA_KEYS = ['solar', 'grid', 'battery'] as const\n\n// All toggleable series, in legend order. The areas (solar/grid/battery) plus\n// the consumption overlay line.\nconst SERIES_KEYS = ['solar', 'grid', 'battery', 'consumption'] as const\nexport type PowerHistorySeriesKey = (typeof SERIES_KEYS)[number]\ntype SeriesKey = PowerHistorySeriesKey\n\nconst SERIES_COLORS = {\n  solar: 'var(--orange-a9)',\n  grid: 'var(--blue-9)',\n  battery: 'var(--green-a9)',\n  consumption: 'var(--neutral-12)',\n} as const\n\nconst PADDING_TOP = 20\nconst PADDING_BOTTOM = 28\nconst PADDING_RIGHT = 8\nconst X_TICK_COUNT = 6\nconst DEFAULT_HEIGHT = 260\nconst DETAILED_X_AXIS_THRESHOLD = 6 * 60 * 60 * 1000\n\nconst tBisector = bisector<PowerHistoryPoint, number>((d) => d.t)\n\nfunction touchDistance(a: React.Touch, b: React.Touch): number {\n  return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY)\n}\n\nfunction touchMidpoint(\n  a: React.Touch,\n  b: React.Touch,\n): {\n  clientX: number\n  clientY: number\n} {\n  return {\n    clientX: (a.clientX + b.clientX) / 2,\n    clientY: (a.clientY + b.clientY) / 2,\n  }\n}\n\n/**\n * Diverging \"power sources\" area chart over a continuous time axis: solar\n * (orange), grid (blue) and battery (green) areas around a zero baseline, with\n * consumption overlaid as a line. Negative values (grid feed-in, battery\n * charging) dip below zero. For instantaneous power (day view). A legend at the\n * top toggles each series on/off; the y-axis rescales to the visible ones. visx.\n */\nexport function PowerHistoryChart({\n  data,\n  unit,\n  formatX,\n  formatTooltipX,\n  formatValue,\n  labels,\n  omitSeries,\n  highlightAt,\n  title,\n  className,\n  height = DEFAULT_HEIGHT,\n  zoomable = false,\n  zoomResetLabel,\n  zoomDomain,\n  onZoomDomainChange,\n}: PowerHistoryChartProps) {\n  const plotClipId = React.useId()\n  const fmtTooltipX = formatTooltipX ?? formatX\n  const containerRef = useRef<HTMLDivElement>(null)\n  const reducedMotion = useReducedMotion()\n  const [width, setWidth] = useState(0)\n  const [hiddenSeries, setHiddenSeries] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n  const omitted = useMemo(() => new Set<SeriesKey>(omitSeries), [omitSeries])\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 isHidden = useCallback(\n    (key: SeriesKey) => omitted.has(key) || hiddenSeries.has(key),\n    [hiddenSeries, omitted],\n  )\n\n  const {\n    showTooltip,\n    hideTooltip,\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n  } = useTooltip<PowerHistoryPoint>()\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 fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const tMin = data.length ? (data[0]?.t ?? 0) : 0\n  const tMax = data.length ? (data[data.length - 1]?.t ?? 0) : 0\n  const fullDomain = useMemo((): TimeDomain | null => {\n    if (data.length === 0) return null\n    return [tMin, tMax]\n  }, [data.length, tMin, tMax])\n\n  const zoom = useChartZoom({\n    enabled: zoomable,\n    fullDomain,\n    zoomDomain,\n    onZoomDomainChange,\n  })\n\n  const viewMin = zoom.zoomWindow?.[0] ?? tMin\n  const viewMax = zoom.zoomWindow?.[1] ?? tMax\n\n  const visibleData = useMemo(\n    () => data.filter((d) => d.t >= viewMin && d.t <= viewMax),\n    [data, viewMin, viewMax],\n  )\n\n  const { yMin, yMax } = useMemo(() => {\n    let min = 0\n    let max = 0\n    for (const d of visibleData) {\n      if (!isHidden('solar')) max = Math.max(max, d.solar)\n      if (!isHidden('consumption')) max = Math.max(max, d.consumption)\n      if (!isHidden('grid')) {\n        max = Math.max(max, d.grid)\n        min = Math.min(min, d.grid)\n      }\n      if (!isHidden('battery')) {\n        max = Math.max(max, d.battery)\n        min = Math.min(min, d.battery)\n      }\n    }\n    return { yMin: min, yMax: max }\n  }, [visibleData, isHidden])\n\n  const {\n    ticks: yTicks,\n    min: lo,\n    max: hi,\n  } = useMemo(() => buildYAxisScale(yMin, yMax), [yMin, yMax])\n  const displayedYDomain = useAnimatedChartDomain([lo, hi], {\n    animateChanges: zoom.isPinching,\n    reducedMotion,\n  })\n\n  const gutter = useMemo(\n    () => measureYAxisGutter(yTicks, formatYAxisTick),\n    [yTicks],\n  )\n\n  const plotRight = Math.max(gutter, width - PADDING_RIGHT)\n\n  const xScale = useMemo(\n    () =>\n      scaleLinear<number>({\n        domain: [viewMin, viewMax === viewMin ? viewMin + 1 : viewMax],\n        range: [gutter, plotRight],\n      }),\n    [viewMin, viewMax, plotRight, gutter],\n  )\n\n  const plotHeight = Math.max(0, height - PADDING_BOTTOM - PADDING_TOP)\n  const plotWidth = Math.max(0, plotRight - gutter)\n\n  const yScale = useMemo(\n    () =>\n      scaleLinear<number>({\n        domain: [\n          displayedYDomain[0],\n          displayedYDomain[1] === displayedYDomain[0]\n            ? displayedYDomain[0] + 1\n            : displayedYDomain[1],\n        ],\n        range: [height - PADDING_BOTTOM, PADDING_TOP],\n      }),\n    [displayedYDomain, height],\n  )\n\n  const xTicks = useMemo(\n    () => buildTimeTicks(viewMin, viewMax, X_TICK_COUNT),\n    [viewMin, viewMax],\n  )\n  const formatAxisX =\n    zoom.isZoomed && viewMax - viewMin <= DETAILED_X_AXIS_THRESHOLD\n      ? fmtTooltipX\n      : formatX\n\n  const domainXFromEvent = useCallback(\n    (\n      event:\n        | React.MouseEvent<SVGRectElement>\n        | React.PointerEvent<SVGRectElement>\n        | React.TouchEvent<SVGRectElement>,\n    ) => {\n      const point = localPoint(event)\n      if (!point) return null\n      return xScale.invert(point.x)\n    },\n    [xScale],\n  )\n\n  const handleTooltip = useCallback(\n    (\n      event:\n        | React.TouchEvent<SVGRectElement>\n        | React.MouseEvent<SVGRectElement>,\n    ) => {\n      if (zoom.isBrushing || zoom.isPanning) return\n      const point = localPoint(event)\n      if (!point || data.length === 0) return\n\n      const xMs = xScale.invert(point.x)\n      const index = tBisector.left(data, xMs, 1)\n      const d0 = data[index - 1]\n      const d1 = data[index]\n      if (!d0) return\n\n      const d = d1 && xMs - d0.t > d1.t - xMs ? d1 : d0\n      showTooltip({\n        tooltipData: d,\n        tooltipLeft: xScale(d.t),\n        tooltipTop: PADDING_TOP,\n      })\n    },\n    [data, showTooltip, xScale, zoom.isBrushing, zoom.isPanning],\n  )\n\n  const legendItems: SeriesLegendItem[] = SERIES_KEYS.filter(\n    (key) => !omitted.has(key),\n  ).map((key) => ({\n    id: key,\n    label: labels[key],\n    color: SERIES_COLORS[key],\n  }))\n\n  const tooltipRows: ChartTooltipRow[] = tooltipData\n    ? SERIES_KEYS.filter((key) => !isHidden(key)).map((key) => ({\n        key,\n        label: labels[key],\n        color: SERIES_COLORS[key],\n        value: fmtValue(tooltipData[key]),\n      }))\n    : []\n\n  const showHighlight =\n    highlightAt !== undefined &&\n    highlightAt >= viewMin &&\n    highlightAt <= viewMax\n\n  const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n  const tooltipPos = clampTooltipPosition({\n    anchorX: tooltipLeft ?? 0,\n    anchorY: tooltipTop ?? PADDING_TOP,\n    width,\n    height,\n    tipWidth: tooltipSize.width,\n    tipHeight: tooltipSize.height,\n    placement: 'beside',\n  })\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n      <SeriesLegend\n        items={legendItems}\n        hiddenIds={hiddenSeries}\n        onToggle={toggleSeries}\n      />\n      <span className=\"px-1 text-xs text-gray-light\">{unit}</span>\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && (\n          <svg width={width} height={height}>\n            <defs>\n              {AREA_KEYS.map((key) => (\n                <linearGradient\n                  key={key}\n                  id={`power-history-fill-${key}`}\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stopColor={SERIES_COLORS[key]}\n                    stopOpacity={0.35}\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={SERIES_COLORS[key]}\n                    stopOpacity={0.04}\n                  />\n                </linearGradient>\n              ))}\n              <clipPath id={plotClipId}>\n                <rect\n                  height={plotHeight}\n                  width={plotWidth}\n                  x={gutter}\n                  y={PADDING_TOP}\n                />\n              </clipPath>\n            </defs>\n\n            {yTicks.map((tick) => {\n              const y = yScale(tick)\n              return (\n                <g key={`y-tick-${tick}`}>\n                  <line\n                    x1={gutter}\n                    x2={plotRight}\n                    y1={y}\n                    y2={y}\n                    stroke=\"var(--neutral-a4)\"\n                    strokeWidth={1}\n                  />\n                  <text\n                    x={gutter - 7}\n                    y={y + 3}\n                    textAnchor=\"end\"\n                    fill=\"var(--neutral-a11)\"\n                    fontSize={10}\n                  >\n                    {formatYAxisTick(tick)}\n                  </text>\n                </g>\n              )\n            })}\n\n            <g clipPath={`url(#${plotClipId})`} data-testid=\"chart-plot-clip\">\n              {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n                <Area<PowerHistoryPoint>\n                  key={`area-${key}`}\n                  data={data}\n                  x={(d) => xScale(d.t)}\n                  y0={yScale(0)}\n                  y1={(d) => yScale(d[key])}\n                  curve={curveMonotoneX}\n                  fill={`url(#power-history-fill-${key})`}\n                  stroke=\"transparent\"\n                />\n              ))}\n\n              {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n                <LinePath<PowerHistoryPoint>\n                  key={`line-${key}`}\n                  data={data}\n                  x={(d) => xScale(d.t)}\n                  y={(d) => yScale(d[key])}\n                  curve={curveMonotoneX}\n                  stroke={SERIES_COLORS[key]}\n                  strokeWidth={1.5}\n                  fill=\"none\"\n                />\n              ))}\n\n              {!isHidden('consumption') && (\n                <LinePath<PowerHistoryPoint>\n                  data={data}\n                  x={(d) => xScale(d.t)}\n                  y={(d) => yScale(d.consumption)}\n                  curve={curveMonotoneX}\n                  stroke={SERIES_COLORS.consumption}\n                  strokeWidth={1.5}\n                  fill=\"none\"\n                />\n              )}\n            </g>\n\n            <line\n              x1={gutter}\n              x2={plotRight}\n              y1={yScale(0)}\n              y2={yScale(0)}\n              stroke=\"var(--neutral-a6)\"\n              strokeWidth={1}\n            />\n\n            {showHighlight && (\n              <line\n                x1={xScale(highlightAt)}\n                x2={xScale(highlightAt)}\n                y1={PADDING_TOP}\n                y2={height - PADDING_BOTTOM}\n                stroke=\"var(--spark-a9)\"\n                strokeWidth={1.5}\n                strokeDasharray=\"5 4\"\n                pointerEvents=\"none\"\n              />\n            )}\n\n            {xTicks.map((tick, index) => (\n              <text\n                key={`x-tick-${tick}`}\n                x={xScale(tick)}\n                y={height - PADDING_BOTTOM + 16}\n                textAnchor={\n                  index === 0\n                    ? 'start'\n                    : index === xTicks.length - 1\n                      ? 'end'\n                      : 'middle'\n                }\n                fill=\"var(--neutral-a11)\"\n                fontSize={10}\n              >\n                {formatAxisX(tick)}\n              </text>\n            ))}\n\n            {tooltipOpen &&\n              tooltipData &&\n              !zoom.isBrushing &&\n              !zoom.isPanning && (\n                <>\n                  <line\n                    x1={xScale(tooltipData.t)}\n                    x2={xScale(tooltipData.t)}\n                    y1={PADDING_TOP}\n                    y2={height - PADDING_BOTTOM}\n                    stroke=\"var(--neutral-a6)\"\n                    strokeDasharray=\"4 4\"\n                    pointerEvents=\"none\"\n                  />\n                  {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n                    <circle\n                      key={`dot-${key}`}\n                      cx={xScale(tooltipData.t)}\n                      cy={yScale(tooltipData[key])}\n                      r={3.5}\n                      fill={SERIES_COLORS[key]}\n                      stroke=\"white\"\n                      strokeWidth={1.5}\n                      pointerEvents=\"none\"\n                    />\n                  ))}\n                  {!isHidden('consumption') && (\n                    <circle\n                      cx={xScale(tooltipData.t)}\n                      cy={yScale(tooltipData.consumption)}\n                      r={3.5}\n                      fill={SERIES_COLORS.consumption}\n                      stroke=\"white\"\n                      strokeWidth={1.5}\n                      pointerEvents=\"none\"\n                    />\n                  )}\n                </>\n              )}\n\n            {zoom.brushBand && (\n              <rect\n                data-testid=\"chart-brush-band\"\n                x={Math.min(\n                  xScale(zoom.brushBand[0]),\n                  xScale(zoom.brushBand[1]),\n                )}\n                y={PADDING_TOP}\n                width={Math.abs(\n                  xScale(zoom.brushBand[1]) - xScale(zoom.brushBand[0]),\n                )}\n                height={plotHeight}\n                fill=\"var(--spark-a4)\"\n                pointerEvents=\"none\"\n              />\n            )}\n\n            <rect\n              x={gutter}\n              y={PADDING_TOP}\n              width={plotWidth}\n              height={plotHeight}\n              fill=\"transparent\"\n              style={zoomable ? { touchAction: 'pan-y' } : undefined}\n              onMouseLeave={() => {\n                if (!zoom.isBrushing) hideTooltip()\n              }}\n              onMouseMove={(event) => {\n                if (zoom.isBrushing) {\n                  const domainX = domainXFromEvent(event)\n                  if (domainX != null) zoom.onPointerMove(domainX)\n                  return\n                }\n                handleTooltip(event)\n              }}\n              onPointerDown={(event) => {\n                if (!zoomable || event.pointerType === 'touch') return\n                if (event.button !== 0) return\n                const domainX = domainXFromEvent(event)\n                if (domainX == null) return\n                event.currentTarget.setPointerCapture?.(event.pointerId)\n                hideTooltip()\n                zoom.onPointerDown(domainX)\n              }}\n              onPointerMove={(event) => {\n                if (!zoomable) return\n                const domainX = domainXFromEvent(event)\n                if (domainX != null) zoom.onPointerMove(domainX)\n              }}\n              onPointerUp={(event) => {\n                if (!zoomable) return\n                const domainX = domainXFromEvent(event)\n                if (domainX != null) zoom.onPointerUp(domainX)\n                else zoom.onPointerCancel()\n              }}\n              onPointerCancel={() => {\n                zoom.onPointerCancel()\n              }}\n              onDoubleClick={() => {\n                if (zoomable) zoom.onDoubleClick()\n              }}\n              onTouchStart={(event) => {\n                if (!zoomable) return\n                if (event.touches.length === 2) {\n                  const [a, b] = [event.touches[0], event.touches[1]]\n                  if (!a || !b) return\n                  const point = localPoint(\n                    event.currentTarget,\n                    touchMidpoint(a, b) as MouseEvent,\n                  )\n                  if (!point) return\n                  const midpoint = Math.min(\n                    1,\n                    Math.max(0, (point.x - gutter) / plotWidth),\n                  )\n                  zoom.onPinchStart(touchDistance(a, b), midpoint)\n                  hideTooltip()\n                  return\n                }\n                if (event.touches.length === 1 && zoom.isZoomed) {\n                  const point = localPoint(event)\n                  if (!point) return\n                  zoom.onPanStart({\n                    x: (point.x - gutter) / plotWidth,\n                    y: (point.y - PADDING_TOP) / plotHeight,\n                  })\n                  hideTooltip()\n                }\n              }}\n              onTouchMove={(event) => {\n                if (zoomable && event.touches.length === 2) {\n                  const [a, b] = [event.touches[0], event.touches[1]]\n                  if (!a || !b) return\n                  const point = localPoint(\n                    event.currentTarget,\n                    touchMidpoint(a, b) as MouseEvent,\n                  )\n                  if (!point) return\n                  const midpoint = Math.min(\n                    1,\n                    Math.max(0, (point.x - gutter) / plotWidth),\n                  )\n                  zoom.onPinchMove(touchDistance(a, b), midpoint)\n                  return\n                }\n                if (event.touches.length === 1 && zoom.isZoomed) {\n                  const point = localPoint(event)\n                  if (!point) return\n                  zoom.onPanMove({\n                    x: (point.x - gutter) / plotWidth,\n                    y: (point.y - PADDING_TOP) / plotHeight,\n                  })\n                  return\n                }\n                if (event.touches.length === 1) handleTooltip(event)\n              }}\n              onTouchEnd={(event) => {\n                if (zoomable && event.touches.length < 2) zoom.onPinchEnd()\n                if (event.touches.length === 0) {\n                  if (zoomable) zoom.onPanEnd()\n                  if (zoomable) zoom.onTap()\n                  hideTooltip()\n                }\n              }}\n              onTouchCancel={() => {\n                zoom.onPinchEnd()\n                zoom.onPanEnd()\n              }}\n            />\n          </svg>\n        )}\n\n        {zoom.isZoomed && zoomResetLabel && (\n          <ChartZoomResetButton\n            label={zoomResetLabel}\n            onReset={zoom.resetZoom}\n          />\n        )}\n\n        <div\n          ref={tooltipRef}\n          className=\"pointer-events-none absolute z-10\"\n          style={{\n            left: tooltipPos.left,\n            top: tooltipPos.top,\n            opacity:\n              tooltipOpen && tooltipData && !zoom.isPanning && !zoom.isBrushing\n                ? 1\n                : 0,\n            transition: reducedMotion\n              ? 'opacity 140ms ease-out'\n              : 'left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out',\n          }}\n        >\n          {tooltipData && (\n            <ChartTooltipCard\n              label={fmtTooltipX(tooltipData.t)}\n              rows={tooltipRows}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/power-network.cjs

@@ -0,0 +1,559 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
+const require_components_skeleton = require("./skeleton.cjs");
+const require_components_typography = require("./typography.cjs");
+const require_components_number_flow = require("./number-flow.cjs");
+let react = require("react");
+let _epilot_spark_icons = require("@epilot/spark-icons");
+let react_jsx_runtime = require("react/jsx-runtime");
+let cn = require("cn");
+//#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-gray-a9 bg-gray-a1 shadow-gray-a3",
+		flowStroke: "var(--neutral-a9)",
+		initialDashGap: 9
+	}
+};
+const DEVICE_FLOW_STROKE = "var(--neutral-a9)";
+const DEVICE_INITIAL_DASH_GAP = 9;
+const IDLE_STROKE = "var(--neutral-a6)";
+const SKELETON_STROKE = "var(--neutral-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 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 reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
+	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 idlePathRefs = (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 || reducedMotion) 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(-5.5 * 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));
+				idlePathRefs.current[id]?.setAttribute("opacity", (1 - current.opacity).toFixed(3));
+				currentFlowVisualsRef.current[id] = current;
+			}
+			frameId = window.requestAnimationFrame(animate);
+		};
+		frameId = window.requestAnimationFrame(animate);
+		return () => window.cancelAnimationFrame(frameId);
+	}, [loading, reducedMotion]);
+	(0, react.useEffect)(() => {
+		if (loading || !reducedMotion) return;
+		for (const connectorPath of connectorPathsRef.current) {
+			const target = targetFlowVisualsRef.current[connectorPath.id];
+			const pathElement = flowPathRefs.current[connectorPath.id];
+			if (!target || !pathElement) continue;
+			pathElement.setAttribute("stroke-dasharray", `${FLOW_DASH_SOLID} ${target.gap.toFixed(3)}`);
+			pathElement.setAttribute("stroke-dashoffset", "0");
+			pathElement.setAttribute("opacity", target.opacity.toFixed(3));
+			idlePathRefs.current[connectorPath.id]?.setAttribute("opacity", (1 - target.opacity).toFixed(3));
+		}
+	}, [
+		loading,
+		reducedMotion,
+		nodes,
+		totalSourceWatts
+	]);
+	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, cn.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: IDLE_STROKE,
+							strokeWidth: STROKE_WIDTH,
+							strokeLinecap: "round",
+							ref: (el) => {
+								idlePathRefs.current[path.id] = el;
+							},
+							opacity: 1,
+							style: reducedMotion ? { transition: "opacity 300ms ease" } : void 0
+						}), /* @__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,
+							style: reducedMotion ? { transition: "opacity 300ms ease" } : void 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, cn.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, cn.cn)("flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]", className),
+		children
+	});
+}
+function PowerSource({ id: idProp, watts, icon, variant = "neutral", className, progress, standby = false }) {
+	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 isColored = watts !== 0 || standby;
+	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, cn.cn)("flex flex-col items-center justify-center gap-1 transition-opacity duration-500", !isColored && "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, cn.cn)("relative flex aspect-square items-center justify-center rounded-full border p-4 shadow-sm", isColored ? 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: isColored ? 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-full 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, cn.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-full border border-gray bg-gray-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-full 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 reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
+	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)(() => {
+		if (reducedMotion) {
+			animatedAutarkyRef.current = targetAutarky;
+			setAnimatedAutarky(targetAutarky);
+			return;
+		}
+		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, reducedMotion]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: anchorRef,
+		className: (0, cn.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(--neutral-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-full border border-gray-a5 shadow-sm shadow-gray-a1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Home, { className: "[--spark-icon-size:14px]" }), /* @__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, cn.cn)("mx-auto size-[78px] animate-pulse rounded-full 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