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

package/dist/components/line-chart.cjs

@@ -1,7 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
+const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
@@ -91,7 +93,7 @@ const LEGEND_COLORS = [
 	"var(--orange-9)",
 	"var(--red-9)"
 ];
-const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defaultCurve = "monotone", showGrid = true, showTooltip: enableTooltip = true, className, xTickCount = 5, yTickCount = 4, formatDate = defaultFormatDate, formatTooltipDate, formatValue = defaultFormatValue, yDomain, referenceLines, topContent }) => {
+const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defaultCurve = "monotone", showGrid = true, showTooltip: enableTooltip = true, className, xTickCount = 5, yTickCount = 4, formatDate = defaultFormatDate, formatTooltipDate, formatValue = defaultFormatValue, yAxisUnit, yDomain, referenceLines, topContent }) => {
 	const { showTooltip, hideTooltip, tooltipData, tooltipLeft, tooltipTop, tooltipOpen } = (0, _visx_tooltip.useTooltip)();
 	const innerWidth = Math.max(0, width - margin.left - margin.right);
 	const innerHeight = Math.max(0, height - margin.top - margin.bottom);
@@ -100,17 +102,28 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 		range: [0, innerWidth],
 		domain: (0, _visx_vendor_d3_array.extent)(allData, (d) => d.date)
 	}), [allData, innerWidth]);
+	const yAxisScale = (0, react.useMemo)(() => {
+		if (yAxisUnit === void 0) return null;
+		let min = 0;
+		let max = 0;
+		for (const d of allData) {
+			if (d.value < min) min = d.value;
+			if (d.value > max) max = d.value;
+		}
+		return require_utils_chart_scale.buildYAxisScale(min, max);
+	}, [allData, yAxisUnit]);
 	const yScale = (0, react.useMemo)(() => (0, _visx_scale.scaleLinear)({
 		range: [innerHeight, 0],
-		domain: yDomain ?? computeYDomain(allData),
-		nice: !yDomain
+		domain: yDomain ?? (yAxisScale ? [yAxisScale.min, yAxisScale.max] : computeYDomain(allData)),
+		nice: !yDomain && !yAxisScale
 	}), [
 		allData,
 		innerHeight,
-		yDomain
+		yDomain,
+		yAxisScale
 	]);
 	const xTicks = xScale.ticks(xTickCount);
-	const yTicks = yScale.ticks(yTickCount);
+	const yTicks = yAxisScale ? yAxisScale.ticks : yScale.ticks(yTickCount);
 	const handleTooltip = (0, react.useCallback)((event) => {
 		if (!enableTooltip) return;
 		const point = (0, _visx_event.localPoint)(event);
@@ -150,6 +163,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 			value: formatValue(d.value)
 		}];
 	}) : [];
+	const reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
 	const [tooltipRef, tooltipSize] = require_components_chart.useMeasuredSize();
 	const tooltipPos = require_components_chart.clampTooltipPosition({
 		anchorX: tooltipLeft ?? 0,
@@ -173,7 +187,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 					top: margin.top,
 					children: [
 						showGrid && yTicks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-							className: "stroke-slate-a4",
+							className: "stroke-gray-a4",
 							strokeDasharray: "4,4",
 							x1: 0,
 							x2: innerWidth,
@@ -181,7 +195,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 							y2: yScale(tick)
 						}, `grid-y-${tick}`)),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-							className: "stroke-slate-a6",
+							className: "stroke-gray-a6",
 							x1: 0,
 							x2: innerWidth,
 							y1: innerHeight,
@@ -211,22 +225,50 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 							}, ref.key);
 						}),
 						xTicks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
-							className: "fill-slate-a11 text-xs",
 							dy: "1em",
+							fill: "var(--neutral-a11)",
+							fontSize: 10,
 							textAnchor: "middle",
 							x: xScale(tick),
 							y: innerHeight + 8,
 							children: formatDate(tick)
 						}, `x-${tick.valueOf()}`)),
-						yTicks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
-							className: "fill-slate-a11 text-xs",
-							dx: "-0.5em",
-							dy: "0.32em",
-							textAnchor: "end",
-							x: -4,
-							y: yScale(tick),
-							children: formatValue(tick)
-						}, `y-${tick}`)),
+						yAxisUnit !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							stroke: "var(--neutral-a6)",
+							strokeWidth: 1,
+							x1: 0,
+							x2: 0,
+							y1: 0,
+							y2: innerHeight
+						}),
+						yTicks.map((tick) => {
+							const y = yScale(tick);
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [yAxisUnit !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								stroke: "var(--neutral-a8)",
+								strokeWidth: 1,
+								x1: -4,
+								x2: 0,
+								y1: y,
+								y2: y
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+								dy: "0.32em",
+								fill: "var(--neutral-a11)",
+								fontSize: 10,
+								textAnchor: "end",
+								x: yAxisUnit !== void 0 ? -7 : -4,
+								y,
+								children: yAxisUnit !== void 0 ? require_utils_chart_scale.formatYAxisTick(tick) : formatValue(tick)
+							})] }, `y-${tick}`);
+						}),
+						yAxisUnit !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+							fill: "var(--neutral-a11)",
+							fontSize: 10,
+							fontWeight: 600,
+							textAnchor: "start",
+							x: -margin.left,
+							y: -6,
+							children: yAxisUnit
+						}),
 						series.map((s, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.LinePath, {
 							className: (0, cnfast.cn)(LINE_COLORS[i % LINE_COLORS.length], s.className),
 							curve: resolveCurve(s.curve ?? defaultCurve),
@@ -249,7 +291,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 							y: 0
 						}),
 						tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-							className: "stroke-slate-a6",
+							className: "stroke-gray-a6",
 							pointerEvents: "none",
 							strokeDasharray: "4,4",
 							x1: xScale(tooltipData.date),
@@ -294,7 +336,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 					left: tooltipPos.left,
 					top: tooltipPos.top,
 					opacity: tooltipOpen && tooltipData ? 1 : 0,
-					transition: "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+					transition: reducedMotion ? "opacity 140ms ease-out" : "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
 				},
 				children: tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_chart.ChartTooltipCard, {
 					label: (formatTooltipDate ?? formatDate)(tooltipData.date),

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

@@ -1 +1 @@
-{"version":3,"file":"line-chart.cjs","names":["curveMonotoneX","curveStep","curveStepAfter","curveStepBefore","curveLinear","localeNumberFormat","useMeasuredSize","clampTooltipPosition","Group","LinePath","ChartTooltipCard"],"sources":["../../src/components/line-chart.tsx"],"sourcesContent":["import {\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n} from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { Group } from '@visx/group'\nimport { scaleLinear, scaleTime } from '@visx/scale'\nimport { LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector, extent } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\nimport { cn } from '../utils/cn'\nimport { localeNumberFormat } from '../utils/format'\nimport {\n  ChartTooltipCard,\n  type ChartTooltipRow,\n  clampTooltipPosition,\n  useMeasuredSize,\n} from './chart'\n\nexport interface LineChartDatum {\n  date: Date\n  value: number\n}\n\nexport type LineChartCurve =\n  | 'monotone'\n  | 'step'\n  | 'step-after'\n  | 'step-before'\n  | 'linear'\n\nexport interface LineChartSeries {\n  id: string\n  data: LineChartDatum[]\n  /** Label shown in the hover tooltip. Defaults to `id`. */\n  label?: React.ReactNode\n  className?: string\n  /** Curve interpolation type. Default: inherits from LineChartProps.curve */\n  curve?: LineChartCurve\n  /** Render as a dashed line */\n  dashed?: boolean\n  /** Custom dash pattern (e.g. \"8,4\" or \"4,2,1,2\"). Only applies when dashed is true. */\n  dashPattern?: string\n}\n\nexport interface LineChartProps {\n  series: LineChartSeries[]\n  width: number\n  height: number\n  margin?: { top: number; right: number; bottom: number; left: number }\n  /** Default curve for all series. Default: 'monotone' */\n  curve?: LineChartCurve\n  showGrid?: boolean\n  showTooltip?: boolean\n  className?: string\n  xTickCount?: number\n  yTickCount?: number\n  /** Fixes the y-axis to an explicit `[min, max]`. Defaults to the data extent. */\n  yDomain?: [number, number]\n  /** Formats the x-axis tick labels. */\n  formatDate?: (date: Date) => string\n  /** Formats the tooltip title. Defaults to `formatDate`. */\n  formatTooltipDate?: (date: Date) => string\n  formatValue?: (value: number) => string\n  /**\n   * Vertical reference markers positioned on the time axis (e.g. sunrise /\n   * sunset). Each renders a dashed line across the plot with an optional label.\n   */\n  referenceLines?: Array<{ key: string; date: Date; label?: React.ReactNode }>\n  /**\n   * HTML content pinned to the top of the plot at a given time (e.g. an hourly\n   * weather icon). Positioned by the same time scale as the series, so it lines\n   * up with the curve below it.\n   */\n  topContent?: Array<{ key: string; date: Date; content: React.ReactNode }>\n}\n\nconst DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 48 }\n\nconst CURVE_MAP = {\n  monotone: curveMonotoneX,\n  step: curveStep,\n  'step-after': curveStepAfter,\n  'step-before': curveStepBefore,\n  linear: curveLinear,\n} as const\n\nconst resolveCurve = (type: LineChartCurve) => CURVE_MAP[type]\n\nconst dateBisector = bisector<LineChartDatum, Date>((d) => d.date)\nconst bisectDate = (data: LineChartDatum[], x: Date, lo?: number) =>\n  dateBisector.left(data, x, lo)\n\n/** Whether `date` falls within a series' own x-range (data is sorted ascending). */\nfunction withinDomain(data: LineChartDatum[], date: Date): boolean {\n  const first = data[0]\n  const last = data[data.length - 1]\n  if (!first || !last) return false\n  const t = date.valueOf()\n  return t >= first.date.valueOf() && t <= last.date.valueOf()\n}\n\n/**\n * y-domain padded 10% beyond the data extent. The baseline is pinned to 0 so\n * all-positive series render from the axis up; a series that dips below 0\n * (signed grid / battery power) extends the domain downward to keep the zero\n * crossing visible.\n */\nfunction computeYDomain(data: LineChartDatum[]): [number, number] {\n  let min = 0\n  let max = 0\n  for (const d of data) {\n    if (d.value < min) min = d.value\n    if (d.value > max) max = d.value\n  }\n  if (min === max) return [min, min + 1]\n  return [min * 1.1, max * 1.1]\n}\n\nfunction nearestDatum(\n  data: LineChartDatum[],\n  date: Date,\n): LineChartDatum | undefined {\n  if (data.length === 0) return undefined\n  const index = bisectDate(data, date, 1)\n  const d0 = data[index - 1]\n  const d1 = data[index]\n  if (!d0) return d1\n  if (!d1) return d0\n  return date.valueOf() - d0.date.valueOf() > d1.date.valueOf() - date.valueOf()\n    ? d1\n    : d0\n}\n\nconst defaultFormatDate = (date: Date) =>\n  date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })\n\nconst defaultValueFormat = localeNumberFormat()\nconst defaultFormatValue = (value: number) => defaultValueFormat.format(value)\n\nconst LINE_COLORS = [\n  'stroke-spark-9',\n  'stroke-green-9',\n  'stroke-blue-9',\n  'stroke-orange-9',\n  'stroke-red-9',\n]\n\nconst DOT_COLORS = [\n  'fill-spark-9',\n  'fill-green-9',\n  'fill-blue-9',\n  'fill-orange-9',\n  'fill-red-9',\n]\n\n// CSS-var colours matching LINE_COLORS, used for the tooltip legend dots.\nconst LEGEND_COLORS = [\n  'var(--spark-9)',\n  'var(--green-9)',\n  'var(--blue-9)',\n  'var(--orange-9)',\n  'var(--red-9)',\n]\n\nconst LineChart: React.FC<LineChartProps> = ({\n  series,\n  width,\n  height,\n  margin = DEFAULT_MARGIN,\n  curve: defaultCurve = 'monotone',\n  showGrid = true,\n  showTooltip: enableTooltip = true,\n  className,\n  xTickCount = 5,\n  yTickCount = 4,\n  formatDate = defaultFormatDate,\n  formatTooltipDate,\n  formatValue = defaultFormatValue,\n  yDomain,\n  referenceLines,\n  topContent,\n}) => {\n  const {\n    showTooltip,\n    hideTooltip,\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n  } = useTooltip<{ date: Date }>()\n\n  const innerWidth = Math.max(0, width - margin.left - margin.right)\n  const innerHeight = Math.max(0, height - margin.top - margin.bottom)\n\n  const allData = useMemo(() => series.flatMap((s) => s.data), [series])\n\n  const xScale = useMemo(\n    () =>\n      scaleTime({\n        range: [0, innerWidth],\n        domain: extent(allData, (d) => d.date) as [Date, Date],\n      }),\n    [allData, innerWidth],\n  )\n\n  const yScale = useMemo(\n    () =>\n      scaleLinear({\n        range: [innerHeight, 0],\n        domain: yDomain ?? computeYDomain(allData),\n        nice: !yDomain,\n      }),\n    [allData, innerHeight, yDomain],\n  )\n\n  const xTicks = xScale.ticks(xTickCount)\n  const yTicks = yScale.ticks(yTickCount)\n\n  const handleTooltip = useCallback(\n    (\n      event:\n        | React.TouchEvent<SVGRectElement>\n        | React.MouseEvent<SVGRectElement>,\n    ) => {\n      if (!enableTooltip) return\n\n      const point = localPoint(event)\n      if (!point) return\n\n      const x0 = xScale.invert(point.x - margin.left)\n\n      // Snap to the data point closest to the cursor across all series, so the\n      // cursor line + tooltip line up with real values.\n      let anchorDate: Date | null = null\n      let bestDistance = Infinity\n      for (const s of series) {\n        const d = nearestDatum(s.data, x0)\n        if (!d) continue\n        const distance = Math.abs(d.date.valueOf() - x0.valueOf())\n        if (distance < bestDistance) {\n          bestDistance = distance\n          anchorDate = d.date\n        }\n      }\n\n      if (!anchorDate) return\n\n      showTooltip({\n        tooltipData: { date: anchorDate },\n        tooltipLeft: xScale(anchorDate) + margin.left,\n        tooltipTop: margin.top,\n      })\n    },\n    [enableTooltip, margin, series, showTooltip, xScale],\n  )\n\n  const tooltipRows: ChartTooltipRow[] = tooltipData\n    ? series.flatMap((s, i) => {\n        const d = nearestDatum(s.data, tooltipData.date)\n        if (!d || !withinDomain(s.data, tooltipData.date)) return []\n        return [\n          {\n            key: s.id,\n            label: s.label ?? s.id,\n            color: LEGEND_COLORS[i % LEGEND_COLORS.length] as string,\n            value: formatValue(d.value),\n          },\n        ]\n      })\n    : []\n\n  const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n  const tooltipPos = clampTooltipPosition({\n    anchorX: tooltipLeft ?? 0,\n    anchorY: tooltipTop ?? margin.top,\n    width,\n    height,\n    tipWidth: tooltipSize.width,\n    tipHeight: tooltipSize.height,\n    placement: 'beside',\n  })\n\n  if (width < 10 || height < 10) return null\n\n  return (\n    <div className={cn('relative', className)}>\n      <svg className=\"block\" height={height} width={width}>\n        <Group left={margin.left} top={margin.top}>\n          {/* Grid lines */}\n          {showGrid &&\n            yTicks.map((tick) => (\n              <line\n                className=\"stroke-slate-a4\"\n                key={`grid-y-${tick}`}\n                strokeDasharray=\"4,4\"\n                x1={0}\n                x2={innerWidth}\n                y1={yScale(tick)}\n                y2={yScale(tick)}\n              />\n            ))}\n\n          {/* X axis */}\n          <line\n            className=\"stroke-slate-a6\"\n            x1={0}\n            x2={innerWidth}\n            y1={innerHeight}\n            y2={innerHeight}\n          />\n\n          {/* Reference markers (e.g. sunrise / sunset) */}\n          {referenceLines?.map((ref) => {\n            const x = xScale(ref.date)\n            if (!Number.isFinite(x)) return null\n            // Sit the label beside the line, on whichever side keeps it in\n            // frame: right of a left-half marker, left of a right-half one.\n            const anchorEnd = x > innerWidth / 2\n            return (\n              <g key={ref.key} pointerEvents=\"none\">\n                <line\n                  className=\"stroke-orange-8\"\n                  strokeDasharray=\"3,3\"\n                  x1={x}\n                  x2={x}\n                  y1={0}\n                  y2={innerHeight}\n                />\n                {ref.label != null && (\n                  <text\n                    className=\"fill-orange-11 text-[10px]\"\n                    dy=\"0.9em\"\n                    textAnchor={anchorEnd ? 'end' : 'start'}\n                    x={x + (anchorEnd ? -4 : 4)}\n                    y={0}\n                  >\n                    {ref.label}\n                  </text>\n                )}\n              </g>\n            )\n          })}\n\n          {/* X axis labels */}\n          {xTicks.map((tick) => (\n            <text\n              className=\"fill-slate-a11 text-xs\"\n              dy=\"1em\"\n              key={`x-${tick.valueOf()}`}\n              textAnchor=\"middle\"\n              x={xScale(tick)}\n              y={innerHeight + 8}\n            >\n              {formatDate(tick)}\n            </text>\n          ))}\n\n          {/* Y axis labels */}\n          {yTicks.map((tick) => (\n            <text\n              className=\"fill-slate-a11 text-xs\"\n              dx=\"-0.5em\"\n              dy=\"0.32em\"\n              key={`y-${tick}`}\n              textAnchor=\"end\"\n              x={-4}\n              y={yScale(tick)}\n            >\n              {formatValue(tick)}\n            </text>\n          ))}\n\n          {/* Lines */}\n          {series.map((s, i) => (\n            <LinePath\n              className={cn(LINE_COLORS[i % LINE_COLORS.length], s.className)}\n              curve={resolveCurve(s.curve ?? defaultCurve)}\n              data={s.data}\n              fill=\"none\"\n              key={s.id}\n              strokeDasharray={s.dashed ? (s.dashPattern ?? '6,4') : undefined}\n              strokeWidth={2}\n              x={(d) => xScale(d.date)}\n              y={(d) => yScale(d.value)}\n            />\n          ))}\n\n          {/* Tooltip hover target */}\n          {enableTooltip && (\n            <rect\n              fill=\"transparent\"\n              height={innerHeight}\n              onMouseLeave={hideTooltip}\n              onMouseMove={handleTooltip}\n              onTouchEnd={hideTooltip}\n              onTouchMove={handleTooltip}\n              width={innerWidth}\n              x={0}\n              y={0}\n            />\n          )}\n\n          {/* Cursor line + a dot per series */}\n          {tooltipOpen && tooltipData && (\n            <>\n              <line\n                className=\"stroke-slate-a6\"\n                pointerEvents=\"none\"\n                strokeDasharray=\"4,4\"\n                x1={xScale(tooltipData.date)}\n                x2={xScale(tooltipData.date)}\n                y1={0}\n                y2={innerHeight}\n              />\n              {series.map((s, i) => {\n                const d = nearestDatum(s.data, tooltipData.date)\n                if (!d || !withinDomain(s.data, tooltipData.date)) return null\n                return (\n                  <circle\n                    key={s.id}\n                    className={cn(DOT_COLORS[i % DOT_COLORS.length])}\n                    cx={xScale(d.date)}\n                    cy={yScale(d.value)}\n                    pointerEvents=\"none\"\n                    r={4}\n                    stroke=\"white\"\n                    strokeWidth={2}\n                  />\n                )\n              })}\n            </>\n          )}\n        </Group>\n      </svg>\n\n      {topContent && topContent.length > 0 && (\n        <div className=\"pointer-events-none absolute inset-0\">\n          {topContent.map((item) => {\n            const x = xScale(item.date)\n            if (!Number.isFinite(x)) return null\n            return (\n              <div\n                key={item.key}\n                className=\"absolute -translate-x-1/2\"\n                style={{ left: margin.left + x, top: 0 }}\n              >\n                {item.content}\n              </div>\n            )\n          })}\n        </div>\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: tooltipOpen && tooltipData ? 1 : 0,\n          transition:\n            'left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out',\n        }}\n      >\n        {tooltipData && (\n          <ChartTooltipCard\n            label={(formatTooltipDate ?? formatDate)(tooltipData.date)}\n            rows={tooltipRows}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { LineChart }\n"],"mappings":";;;;;;;;;;;;;;;;;AAkFA,MAAM,iBAAiB;CAAE,KAAK;CAAI,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAI;AAEnE,MAAM,YAAY;CAChB,UAAUA,YAAAA;CACV,MAAMC,YAAAA;CACN,cAAcC,YAAAA;CACd,eAAeC,YAAAA;CACf,QAAQC,YAAAA;CACT;AAED,MAAM,gBAAgB,SAAyB,UAAU;AAEzD,MAAM,gBAAA,GAAA,sBAAA,WAA+C,MAAM,EAAE,KAAK;AAClE,MAAM,cAAc,MAAwB,GAAS,OACnD,aAAa,KAAK,MAAM,GAAG,GAAG;;AAGhC,SAAS,aAAa,MAAwB,MAAqB;CACjE,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,KAAK,KAAK,SAAS;AAChC,KAAI,CAAC,SAAS,CAAC,KAAM,QAAO;CAC5B,MAAM,IAAI,KAAK,SAAS;AACxB,QAAO,KAAK,MAAM,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK,SAAS;;;;;;;;AAS9D,SAAS,eAAe,MAA0C;CAChE,IAAI,MAAM;CACV,IAAI,MAAM;AACV,MAAK,MAAM,KAAK,MAAM;AACpB,MAAI,EAAE,QAAQ,IAAK,OAAM,EAAE;AAC3B,MAAI,EAAE,QAAQ,IAAK,OAAM,EAAE;;AAE7B,KAAI,QAAQ,IAAK,QAAO,CAAC,KAAK,MAAM,EAAE;AACtC,QAAO,CAAC,MAAM,KAAK,MAAM,IAAI;;AAG/B,SAAS,aACP,MACA,MAC4B;AAC5B,KAAI,KAAK,WAAW,EAAG,QAAO,KAAA;CAC9B,MAAM,QAAQ,WAAW,MAAM,MAAM,EAAE;CACvC,MAAM,KAAK,KAAK,QAAQ;CACxB,MAAM,KAAK,KAAK;AAChB,KAAI,CAAC,GAAI,QAAO;AAChB,KAAI,CAAC,GAAI,QAAO;AAChB,QAAO,KAAK,SAAS,GAAG,GAAG,KAAK,SAAS,GAAG,GAAG,KAAK,SAAS,GAAG,KAAK,SAAS,GAC1E,KACA;;AAGN,MAAM,qBAAqB,SACzB,KAAK,mBAAmB,KAAA,GAAW;CAAE,OAAO;CAAS,KAAK;CAAW,CAAC;AAExE,MAAM,qBAAqBC,qBAAAA,oBAAoB;AAC/C,MAAM,sBAAsB,UAAkB,mBAAmB,OAAO,MAAM;AAE9E,MAAM,cAAc;CAClB;CACA;CACA;CACA;CACA;CACD;AAED,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACD;AAGD,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACD;AAED,MAAM,aAAuC,EAC3C,QACA,OACA,QACA,SAAS,gBACT,OAAO,eAAe,YACtB,WAAW,MACX,aAAa,gBAAgB,MAC7B,WACA,aAAa,GACb,aAAa,GACb,aAAa,mBACb,mBACA,cAAc,oBACd,SACA,gBACA,iBACI;CACJ,MAAM,EACJ,aACA,aACA,aACA,aACA,YACA,iBAAA,GAAA,cAAA,aAC8B;CAEhC,MAAM,aAAa,KAAK,IAAI,GAAG,QAAQ,OAAO,OAAO,OAAO,MAAM;CAClE,MAAM,cAAc,KAAK,IAAI,GAAG,SAAS,OAAO,MAAM,OAAO,OAAO;CAEpE,MAAM,WAAA,GAAA,MAAA,eAAwB,OAAO,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC;CAEtE,MAAM,UAAA,GAAA,MAAA,gBAAA,GAAA,YAAA,WAEQ;EACR,OAAO,CAAC,GAAG,WAAW;EACtB,SAAA,GAAA,sBAAA,QAAe,UAAU,MAAM,EAAE,KAAK;EACvC,CAAC,EACJ,CAAC,SAAS,WAAW,CACtB;CAED,MAAM,UAAA,GAAA,MAAA,gBAAA,GAAA,YAAA,aAEU;EACV,OAAO,CAAC,aAAa,EAAE;EACvB,QAAQ,WAAW,eAAe,QAAQ;EAC1C,MAAM,CAAC;EACR,CAAC,EACJ;EAAC;EAAS;EAAa;EAAQ,CAChC;CAED,MAAM,SAAS,OAAO,MAAM,WAAW;CACvC,MAAM,SAAS,OAAO,MAAM,WAAW;CAEvC,MAAM,iBAAA,GAAA,MAAA,cAEF,UAGG;AACH,MAAI,CAAC,cAAe;EAEpB,MAAM,SAAA,GAAA,YAAA,YAAmB,MAAM;AAC/B,MAAI,CAAC,MAAO;EAEZ,MAAM,KAAK,OAAO,OAAO,MAAM,IAAI,OAAO,KAAK;EAI/C,IAAI,aAA0B;EAC9B,IAAI,eAAe;AACnB,OAAK,MAAM,KAAK,QAAQ;GACtB,MAAM,IAAI,aAAa,EAAE,MAAM,GAAG;AAClC,OAAI,CAAC,EAAG;GACR,MAAM,WAAW,KAAK,IAAI,EAAE,KAAK,SAAS,GAAG,GAAG,SAAS,CAAC;AAC1D,OAAI,WAAW,cAAc;AAC3B,mBAAe;AACf,iBAAa,EAAE;;;AAInB,MAAI,CAAC,WAAY;AAEjB,cAAY;GACV,aAAa,EAAE,MAAM,YAAY;GACjC,aAAa,OAAO,WAAW,GAAG,OAAO;GACzC,YAAY,OAAO;GACpB,CAAC;IAEJ;EAAC;EAAe;EAAQ;EAAQ;EAAa;EAAO,CACrD;CAED,MAAM,cAAiC,cACnC,OAAO,SAAS,GAAG,MAAM;EACvB,MAAM,IAAI,aAAa,EAAE,MAAM,YAAY,KAAK;AAChD,MAAI,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,YAAY,KAAK,CAAE,QAAO,EAAE;AAC5D,SAAO,CACL;GACE,KAAK,EAAE;GACP,OAAO,EAAE,SAAS,EAAE;GACpB,OAAO,cAAc,IAAI,cAAc;GACvC,OAAO,YAAY,EAAE,MAAM;GAC5B,CACF;GACD,GACF,EAAE;CAEN,MAAM,CAAC,YAAY,eAAeC,yBAAAA,iBAAiC;CACnE,MAAM,aAAaC,yBAAAA,qBAAqB;EACtC,SAAS,eAAe;EACxB,SAAS,cAAc,OAAO;EAC9B;EACA;EACA,UAAU,YAAY;EACtB,WAAW,YAAY;EACvB,WAAW;EACZ,CAAC;AAEF,KAAI,QAAQ,MAAM,SAAS,GAAI,QAAO;AAEtC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,YAAY,UAAU;YAAzC;GACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;IAAgB;IAAe;cAC5C,iBAAA,GAAA,kBAAA,MAACC,YAAAA,OAAD;KAAO,MAAM,OAAO;KAAM,KAAK,OAAO;eAAtC;MAEG,YACC,OAAO,KAAK,SACV,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WAAU;OAEV,iBAAgB;OAChB,IAAI;OACJ,IAAI;OACJ,IAAI,OAAO,KAAK;OAChB,IAAI,OAAO,KAAK;OAChB,EANK,UAAU,OAMf,CACF;MAGJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WAAU;OACV,IAAI;OACJ,IAAI;OACJ,IAAI;OACJ,IAAI;OACJ,CAAA;MAGD,gBAAgB,KAAK,QAAQ;OAC5B,MAAM,IAAI,OAAO,IAAI,KAAK;AAC1B,WAAI,CAAC,OAAO,SAAS,EAAE,CAAE,QAAO;OAGhC,MAAM,YAAY,IAAI,aAAa;AACnC,cACE,iBAAA,GAAA,kBAAA,MAAC,KAAD;QAAiB,eAAc;kBAA/B,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SACE,WAAU;SACV,iBAAgB;SAChB,IAAI;SACJ,IAAI;SACJ,IAAI;SACJ,IAAI;SACJ,CAAA,EACD,IAAI,SAAS,QACZ,iBAAA,GAAA,kBAAA,KAAC,QAAD;SACE,WAAU;SACV,IAAG;SACH,YAAY,YAAY,QAAQ;SAChC,GAAG,KAAK,YAAY,KAAK;SACzB,GAAG;mBAEF,IAAI;SACA,CAAA,CAEP;UApBI,IAAI,IAoBR;QAEN;MAGD,OAAO,KAAK,SACX,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WAAU;OACV,IAAG;OAEH,YAAW;OACX,GAAG,OAAO,KAAK;OACf,GAAG,cAAc;iBAEhB,WAAW,KAAK;OACZ,EANA,KAAK,KAAK,SAAS,GAMnB,CACP;MAGD,OAAO,KAAK,SACX,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WAAU;OACV,IAAG;OACH,IAAG;OAEH,YAAW;OACX,GAAG;OACH,GAAG,OAAO,KAAK;iBAEd,YAAY,KAAK;OACb,EANA,KAAK,OAML,CACP;MAGD,OAAO,KAAK,GAAG,MACd,iBAAA,GAAA,kBAAA,KAACC,YAAAA,UAAD;OACE,YAAA,GAAA,OAAA,IAAc,YAAY,IAAI,YAAY,SAAS,EAAE,UAAU;OAC/D,OAAO,aAAa,EAAE,SAAS,aAAa;OAC5C,MAAM,EAAE;OACR,MAAK;OAEL,iBAAiB,EAAE,SAAU,EAAE,eAAe,QAAS,KAAA;OACvD,aAAa;OACb,IAAI,MAAM,OAAO,EAAE,KAAK;OACxB,IAAI,MAAM,OAAO,EAAE,MAAM;OACzB,EALK,EAAE,GAKP,CACF;MAGD,iBACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,MAAK;OACL,QAAQ;OACR,cAAc;OACd,aAAa;OACb,YAAY;OACZ,aAAa;OACb,OAAO;OACP,GAAG;OACH,GAAG;OACH,CAAA;MAIH,eAAe,eACd,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WAAU;OACV,eAAc;OACd,iBAAgB;OAChB,IAAI,OAAO,YAAY,KAAK;OAC5B,IAAI,OAAO,YAAY,KAAK;OAC5B,IAAI;OACJ,IAAI;OACJ,CAAA,EACD,OAAO,KAAK,GAAG,MAAM;OACpB,MAAM,IAAI,aAAa,EAAE,MAAM,YAAY,KAAK;AAChD,WAAI,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,YAAY,KAAK,CAAE,QAAO;AAC1D,cACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;QAEE,YAAA,GAAA,OAAA,IAAc,WAAW,IAAI,WAAW,QAAQ;QAChD,IAAI,OAAO,EAAE,KAAK;QAClB,IAAI,OAAO,EAAE,MAAM;QACnB,eAAc;QACd,GAAG;QACH,QAAO;QACP,aAAa;QACb,EARK,EAAE,GAQP;QAEJ,CACD,EAAA,CAAA;MAEC;;IACJ,CAAA;GAEL,cAAc,WAAW,SAAS,KACjC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,WAAW,KAAK,SAAS;KACxB,MAAM,IAAI,OAAO,KAAK,KAAK;AAC3B,SAAI,CAAC,OAAO,SAAS,EAAE,CAAE,QAAO;AAChC,YACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAEE,WAAU;MACV,OAAO;OAAE,MAAM,OAAO,OAAO;OAAG,KAAK;OAAG;gBAEvC,KAAK;MACF,EALC,KAAK,IAKN;MAER;IACE,CAAA;GAGR,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO;KACL,MAAM,WAAW;KACjB,KAAK,WAAW;KAChB,SAAS,eAAe,cAAc,IAAI;KAC1C,YACE;KACH;cAEA,eACC,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;KACE,QAAQ,qBAAqB,YAAY,YAAY,KAAK;KAC1D,MAAM;KACN,CAAA;IAEA,CAAA;GACF"}
+{"version":3,"file":"line-chart.cjs","names":["curveMonotoneX","curveStep","curveStepAfter","curveStepBefore","curveLinear","localeNumberFormat","buildYAxisScale","useReducedMotion","useMeasuredSize","clampTooltipPosition","Group","formatYAxisTick","LinePath","ChartTooltipCard"],"sources":["../../src/components/line-chart.tsx"],"sourcesContent":["import {\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n} from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { Group } from '@visx/group'\nimport { scaleLinear, scaleTime } from '@visx/scale'\nimport { LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector, extent } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { buildYAxisScale, formatYAxisTick } from '../utils/chart-scale'\nimport { cn } from '../utils/cn'\nimport { localeNumberFormat } from '../utils/format'\nimport {\n  ChartTooltipCard,\n  type ChartTooltipRow,\n  clampTooltipPosition,\n  useMeasuredSize,\n} from './chart'\n\nexport interface LineChartDatum {\n  date: Date\n  value: number\n}\n\nexport type LineChartCurve =\n  | 'monotone'\n  | 'step'\n  | 'step-after'\n  | 'step-before'\n  | 'linear'\n\nexport interface LineChartSeries {\n  id: string\n  data: LineChartDatum[]\n  /** Label shown in the hover tooltip. Defaults to `id`. */\n  label?: React.ReactNode\n  className?: string\n  /** Curve interpolation type. Default: inherits from LineChartProps.curve */\n  curve?: LineChartCurve\n  /** Render as a dashed line */\n  dashed?: boolean\n  /** Custom dash pattern (e.g. \"8,4\" or \"4,2,1,2\"). Only applies when dashed is true. */\n  dashPattern?: string\n}\n\nexport interface LineChartProps {\n  series: LineChartSeries[]\n  width: number\n  height: number\n  margin?: { top: number; right: number; bottom: number; left: number }\n  /** Default curve for all series. Default: 'monotone' */\n  curve?: LineChartCurve\n  showGrid?: boolean\n  showTooltip?: boolean\n  className?: string\n  xTickCount?: number\n  yTickCount?: number\n  /** Fixes the y-axis to an explicit `[min, max]`. Defaults to the data extent. */\n  yDomain?: [number, number]\n  /** Formats the x-axis tick labels. */\n  formatDate?: (date: Date) => string\n  /** Formats the tooltip title. Defaults to `formatDate`. */\n  formatTooltipDate?: (date: Date) => string\n  formatValue?: (value: number) => string\n  /**\n   * Unit shown once at the top of the y-axis (e.g. \"kW\"). When set, y-axis tick\n   * labels render as plain numbers (matching BarChart / PowerHistoryChart)\n   * instead of repeating `formatValue` on every tick. `formatValue` still feeds\n   * the tooltip. Omit to keep the per-tick `formatValue` labels.\n   */\n  yAxisUnit?: string\n  /**\n   * Vertical reference markers positioned on the time axis (e.g. sunrise /\n   * sunset). Each renders a dashed line across the plot with an optional label.\n   */\n  referenceLines?: Array<{ key: string; date: Date; label?: React.ReactNode }>\n  /**\n   * HTML content pinned to the top of the plot at a given time (e.g. an hourly\n   * weather icon). Positioned by the same time scale as the series, so it lines\n   * up with the curve below it.\n   */\n  topContent?: Array<{ key: string; date: Date; content: React.ReactNode }>\n}\n\nconst DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 48 }\n\nconst CURVE_MAP = {\n  monotone: curveMonotoneX,\n  step: curveStep,\n  'step-after': curveStepAfter,\n  'step-before': curveStepBefore,\n  linear: curveLinear,\n} as const\n\nconst resolveCurve = (type: LineChartCurve) => CURVE_MAP[type]\n\nconst dateBisector = bisector<LineChartDatum, Date>((d) => d.date)\nconst bisectDate = (data: LineChartDatum[], x: Date, lo?: number) =>\n  dateBisector.left(data, x, lo)\n\n/** Whether `date` falls within a series' own x-range (data is sorted ascending). */\nfunction withinDomain(data: LineChartDatum[], date: Date): boolean {\n  const first = data[0]\n  const last = data[data.length - 1]\n  if (!first || !last) return false\n  const t = date.valueOf()\n  return t >= first.date.valueOf() && t <= last.date.valueOf()\n}\n\n/**\n * y-domain padded 10% beyond the data extent. The baseline is pinned to 0 so\n * all-positive series render from the axis up; a series that dips below 0\n * (signed grid / battery power) extends the domain downward to keep the zero\n * crossing visible.\n */\nfunction computeYDomain(data: LineChartDatum[]): [number, number] {\n  let min = 0\n  let max = 0\n  for (const d of data) {\n    if (d.value < min) min = d.value\n    if (d.value > max) max = d.value\n  }\n  if (min === max) return [min, min + 1]\n  return [min * 1.1, max * 1.1]\n}\n\nfunction nearestDatum(\n  data: LineChartDatum[],\n  date: Date,\n): LineChartDatum | undefined {\n  if (data.length === 0) return undefined\n  const index = bisectDate(data, date, 1)\n  const d0 = data[index - 1]\n  const d1 = data[index]\n  if (!d0) return d1\n  if (!d1) return d0\n  return date.valueOf() - d0.date.valueOf() > d1.date.valueOf() - date.valueOf()\n    ? d1\n    : d0\n}\n\nconst defaultFormatDate = (date: Date) =>\n  date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })\n\nconst defaultValueFormat = localeNumberFormat()\nconst defaultFormatValue = (value: number) => defaultValueFormat.format(value)\n\nconst LINE_COLORS = [\n  'stroke-spark-9',\n  'stroke-green-9',\n  'stroke-blue-9',\n  'stroke-orange-9',\n  'stroke-red-9',\n]\n\nconst DOT_COLORS = [\n  'fill-spark-9',\n  'fill-green-9',\n  'fill-blue-9',\n  'fill-orange-9',\n  'fill-red-9',\n]\n\n// CSS-var colours matching LINE_COLORS, used for the tooltip legend dots.\nconst LEGEND_COLORS = [\n  'var(--spark-9)',\n  'var(--green-9)',\n  'var(--blue-9)',\n  'var(--orange-9)',\n  'var(--red-9)',\n]\n\nconst LineChart: React.FC<LineChartProps> = ({\n  series,\n  width,\n  height,\n  margin = DEFAULT_MARGIN,\n  curve: defaultCurve = 'monotone',\n  showGrid = true,\n  showTooltip: enableTooltip = true,\n  className,\n  xTickCount = 5,\n  yTickCount = 4,\n  formatDate = defaultFormatDate,\n  formatTooltipDate,\n  formatValue = defaultFormatValue,\n  yAxisUnit,\n  yDomain,\n  referenceLines,\n  topContent,\n}) => {\n  const {\n    showTooltip,\n    hideTooltip,\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n  } = useTooltip<{ date: Date }>()\n\n  const innerWidth = Math.max(0, width - margin.left - margin.right)\n  const innerHeight = Math.max(0, height - margin.top - margin.bottom)\n\n  const allData = useMemo(() => series.flatMap((s) => s.data), [series])\n\n  const xScale = useMemo(\n    () =>\n      scaleTime({\n        range: [0, innerWidth],\n        domain: extent(allData, (d) => d.date) as [Date, Date],\n      }),\n    [allData, innerWidth],\n  )\n\n  // With a unit, the y-axis is generated by the shared scale util (nice ticks\n  // + rounded bounds) so it matches BarChart / PowerHistoryChart exactly.\n  const yAxisScale = useMemo(() => {\n    if (yAxisUnit === undefined) return null\n    let min = 0\n    let max = 0\n    for (const d of allData) {\n      if (d.value < min) min = d.value\n      if (d.value > max) max = d.value\n    }\n    return buildYAxisScale(min, max)\n  }, [allData, yAxisUnit])\n\n  const yScale = useMemo(\n    () =>\n      scaleLinear({\n        range: [innerHeight, 0],\n        domain:\n          yDomain ??\n          (yAxisScale\n            ? [yAxisScale.min, yAxisScale.max]\n            : computeYDomain(allData)),\n        nice: !yDomain && !yAxisScale,\n      }),\n    [allData, innerHeight, yDomain, yAxisScale],\n  )\n\n  const xTicks = xScale.ticks(xTickCount)\n  const yTicks = yAxisScale ? yAxisScale.ticks : yScale.ticks(yTickCount)\n\n  const handleTooltip = useCallback(\n    (\n      event:\n        | React.TouchEvent<SVGRectElement>\n        | React.MouseEvent<SVGRectElement>,\n    ) => {\n      if (!enableTooltip) return\n\n      const point = localPoint(event)\n      if (!point) return\n\n      const x0 = xScale.invert(point.x - margin.left)\n\n      // Snap to the data point closest to the cursor across all series, so the\n      // cursor line + tooltip line up with real values.\n      let anchorDate: Date | null = null\n      let bestDistance = Infinity\n      for (const s of series) {\n        const d = nearestDatum(s.data, x0)\n        if (!d) continue\n        const distance = Math.abs(d.date.valueOf() - x0.valueOf())\n        if (distance < bestDistance) {\n          bestDistance = distance\n          anchorDate = d.date\n        }\n      }\n\n      if (!anchorDate) return\n\n      showTooltip({\n        tooltipData: { date: anchorDate },\n        tooltipLeft: xScale(anchorDate) + margin.left,\n        tooltipTop: margin.top,\n      })\n    },\n    [enableTooltip, margin, series, showTooltip, xScale],\n  )\n\n  const tooltipRows: ChartTooltipRow[] = tooltipData\n    ? series.flatMap((s, i) => {\n        const d = nearestDatum(s.data, tooltipData.date)\n        if (!d || !withinDomain(s.data, tooltipData.date)) return []\n        return [\n          {\n            key: s.id,\n            label: s.label ?? s.id,\n            color: LEGEND_COLORS[i % LEGEND_COLORS.length] as string,\n            value: formatValue(d.value),\n          },\n        ]\n      })\n    : []\n\n  const reducedMotion = useReducedMotion()\n  const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n  const tooltipPos = clampTooltipPosition({\n    anchorX: tooltipLeft ?? 0,\n    anchorY: tooltipTop ?? margin.top,\n    width,\n    height,\n    tipWidth: tooltipSize.width,\n    tipHeight: tooltipSize.height,\n    placement: 'beside',\n  })\n\n  if (width < 10 || height < 10) return null\n\n  return (\n    <div className={cn('relative', className)}>\n      <svg className=\"block\" height={height} width={width}>\n        <Group left={margin.left} top={margin.top}>\n          {/* Grid lines */}\n          {showGrid &&\n            yTicks.map((tick) => (\n              <line\n                className=\"stroke-gray-a4\"\n                key={`grid-y-${tick}`}\n                strokeDasharray=\"4,4\"\n                x1={0}\n                x2={innerWidth}\n                y1={yScale(tick)}\n                y2={yScale(tick)}\n              />\n            ))}\n\n          {/* X axis */}\n          <line\n            className=\"stroke-gray-a6\"\n            x1={0}\n            x2={innerWidth}\n            y1={innerHeight}\n            y2={innerHeight}\n          />\n\n          {/* Reference markers (e.g. sunrise / sunset) */}\n          {referenceLines?.map((ref) => {\n            const x = xScale(ref.date)\n            if (!Number.isFinite(x)) return null\n            // Sit the label beside the line, on whichever side keeps it in\n            // frame: right of a left-half marker, left of a right-half one.\n            const anchorEnd = x > innerWidth / 2\n            return (\n              <g key={ref.key} pointerEvents=\"none\">\n                <line\n                  className=\"stroke-orange-8\"\n                  strokeDasharray=\"3,3\"\n                  x1={x}\n                  x2={x}\n                  y1={0}\n                  y2={innerHeight}\n                />\n                {ref.label != null && (\n                  <text\n                    className=\"fill-orange-11 text-[10px]\"\n                    dy=\"0.9em\"\n                    textAnchor={anchorEnd ? 'end' : 'start'}\n                    x={x + (anchorEnd ? -4 : 4)}\n                    y={0}\n                  >\n                    {ref.label}\n                  </text>\n                )}\n              </g>\n            )\n          })}\n\n          {/* X axis labels */}\n          {xTicks.map((tick) => (\n            <text\n              dy=\"1em\"\n              fill=\"var(--neutral-a11)\"\n              fontSize={10}\n              key={`x-${tick.valueOf()}`}\n              textAnchor=\"middle\"\n              x={xScale(tick)}\n              y={innerHeight + 8}\n            >\n              {formatDate(tick)}\n            </text>\n          ))}\n\n          {/* Y axis. With `yAxisUnit`, matches BarChart: a vertical axis line,\n              short tick marks, plain numeric ticks, and the unit as a bold\n              top-left header (top tick hidden). Without it, ticks repeat\n              `formatValue` and no axis line/marks are drawn. */}\n          {yAxisUnit !== undefined && (\n            <line\n              stroke=\"var(--neutral-a6)\"\n              strokeWidth={1}\n              x1={0}\n              x2={0}\n              y1={0}\n              y2={innerHeight}\n            />\n          )}\n          {yTicks.map((tick) => {\n            const y = yScale(tick)\n            return (\n              <g key={`y-${tick}`}>\n                {yAxisUnit !== undefined && (\n                  <line\n                    stroke=\"var(--neutral-a8)\"\n                    strokeWidth={1}\n                    x1={-4}\n                    x2={0}\n                    y1={y}\n                    y2={y}\n                  />\n                )}\n                <text\n                  dy=\"0.32em\"\n                  fill=\"var(--neutral-a11)\"\n                  fontSize={10}\n                  textAnchor=\"end\"\n                  x={yAxisUnit !== undefined ? -7 : -4}\n                  y={y}\n                >\n                  {yAxisUnit !== undefined\n                    ? formatYAxisTick(tick)\n                    : formatValue(tick)}\n                </text>\n              </g>\n            )\n          })}\n          {yAxisUnit !== undefined && (\n            <text\n              fill=\"var(--neutral-a11)\"\n              fontSize={10}\n              fontWeight={600}\n              textAnchor=\"start\"\n              x={-margin.left}\n              y={-6}\n            >\n              {yAxisUnit}\n            </text>\n          )}\n\n          {/* Lines */}\n          {series.map((s, i) => (\n            <LinePath\n              className={cn(LINE_COLORS[i % LINE_COLORS.length], s.className)}\n              curve={resolveCurve(s.curve ?? defaultCurve)}\n              data={s.data}\n              fill=\"none\"\n              key={s.id}\n              strokeDasharray={s.dashed ? (s.dashPattern ?? '6,4') : undefined}\n              strokeWidth={2}\n              x={(d) => xScale(d.date)}\n              y={(d) => yScale(d.value)}\n            />\n          ))}\n\n          {/* Tooltip hover target */}\n          {enableTooltip && (\n            <rect\n              fill=\"transparent\"\n              height={innerHeight}\n              onMouseLeave={hideTooltip}\n              onMouseMove={handleTooltip}\n              onTouchEnd={hideTooltip}\n              onTouchMove={handleTooltip}\n              width={innerWidth}\n              x={0}\n              y={0}\n            />\n          )}\n\n          {/* Cursor line + a dot per series */}\n          {tooltipOpen && tooltipData && (\n            <>\n              <line\n                className=\"stroke-gray-a6\"\n                pointerEvents=\"none\"\n                strokeDasharray=\"4,4\"\n                x1={xScale(tooltipData.date)}\n                x2={xScale(tooltipData.date)}\n                y1={0}\n                y2={innerHeight}\n              />\n              {series.map((s, i) => {\n                const d = nearestDatum(s.data, tooltipData.date)\n                if (!d || !withinDomain(s.data, tooltipData.date)) return null\n                return (\n                  <circle\n                    key={s.id}\n                    className={cn(DOT_COLORS[i % DOT_COLORS.length])}\n                    cx={xScale(d.date)}\n                    cy={yScale(d.value)}\n                    pointerEvents=\"none\"\n                    r={4}\n                    stroke=\"white\"\n                    strokeWidth={2}\n                  />\n                )\n              })}\n            </>\n          )}\n        </Group>\n      </svg>\n\n      {topContent && topContent.length > 0 && (\n        <div className=\"pointer-events-none absolute inset-0\">\n          {topContent.map((item) => {\n            const x = xScale(item.date)\n            if (!Number.isFinite(x)) return null\n            return (\n              <div\n                key={item.key}\n                className=\"absolute -translate-x-1/2\"\n                style={{ left: margin.left + x, top: 0 }}\n              >\n                {item.content}\n              </div>\n            )\n          })}\n        </div>\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: tooltipOpen && tooltipData ? 1 : 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={(formatTooltipDate ?? formatDate)(tooltipData.date)}\n            rows={tooltipRows}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { LineChart }\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2FA,MAAM,iBAAiB;CAAE,KAAK;CAAI,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAI;AAEnE,MAAM,YAAY;CAChB,UAAUA,YAAAA;CACV,MAAMC,YAAAA;CACN,cAAcC,YAAAA;CACd,eAAeC,YAAAA;CACf,QAAQC,YAAAA;CACT;AAED,MAAM,gBAAgB,SAAyB,UAAU;AAEzD,MAAM,gBAAA,GAAA,sBAAA,WAA+C,MAAM,EAAE,KAAK;AAClE,MAAM,cAAc,MAAwB,GAAS,OACnD,aAAa,KAAK,MAAM,GAAG,GAAG;;AAGhC,SAAS,aAAa,MAAwB,MAAqB;CACjE,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,KAAK,KAAK,SAAS;AAChC,KAAI,CAAC,SAAS,CAAC,KAAM,QAAO;CAC5B,MAAM,IAAI,KAAK,SAAS;AACxB,QAAO,KAAK,MAAM,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK,SAAS;;;;;;;;AAS9D,SAAS,eAAe,MAA0C;CAChE,IAAI,MAAM;CACV,IAAI,MAAM;AACV,MAAK,MAAM,KAAK,MAAM;AACpB,MAAI,EAAE,QAAQ,IAAK,OAAM,EAAE;AAC3B,MAAI,EAAE,QAAQ,IAAK,OAAM,EAAE;;AAE7B,KAAI,QAAQ,IAAK,QAAO,CAAC,KAAK,MAAM,EAAE;AACtC,QAAO,CAAC,MAAM,KAAK,MAAM,IAAI;;AAG/B,SAAS,aACP,MACA,MAC4B;AAC5B,KAAI,KAAK,WAAW,EAAG,QAAO,KAAA;CAC9B,MAAM,QAAQ,WAAW,MAAM,MAAM,EAAE;CACvC,MAAM,KAAK,KAAK,QAAQ;CACxB,MAAM,KAAK,KAAK;AAChB,KAAI,CAAC,GAAI,QAAO;AAChB,KAAI,CAAC,GAAI,QAAO;AAChB,QAAO,KAAK,SAAS,GAAG,GAAG,KAAK,SAAS,GAAG,GAAG,KAAK,SAAS,GAAG,KAAK,SAAS,GAC1E,KACA;;AAGN,MAAM,qBAAqB,SACzB,KAAK,mBAAmB,KAAA,GAAW;CAAE,OAAO;CAAS,KAAK;CAAW,CAAC;AAExE,MAAM,qBAAqBC,qBAAAA,oBAAoB;AAC/C,MAAM,sBAAsB,UAAkB,mBAAmB,OAAO,MAAM;AAE9E,MAAM,cAAc;CAClB;CACA;CACA;CACA;CACA;CACD;AAED,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACD;AAGD,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACD;AAED,MAAM,aAAuC,EAC3C,QACA,OACA,QACA,SAAS,gBACT,OAAO,eAAe,YACtB,WAAW,MACX,aAAa,gBAAgB,MAC7B,WACA,aAAa,GACb,aAAa,GACb,aAAa,mBACb,mBACA,cAAc,oBACd,WACA,SACA,gBACA,iBACI;CACJ,MAAM,EACJ,aACA,aACA,aACA,aACA,YACA,iBAAA,GAAA,cAAA,aAC8B;CAEhC,MAAM,aAAa,KAAK,IAAI,GAAG,QAAQ,OAAO,OAAO,OAAO,MAAM;CAClE,MAAM,cAAc,KAAK,IAAI,GAAG,SAAS,OAAO,MAAM,OAAO,OAAO;CAEpE,MAAM,WAAA,GAAA,MAAA,eAAwB,OAAO,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC;CAEtE,MAAM,UAAA,GAAA,MAAA,gBAAA,GAAA,YAAA,WAEQ;EACR,OAAO,CAAC,GAAG,WAAW;EACtB,SAAA,GAAA,sBAAA,QAAe,UAAU,MAAM,EAAE,KAAK;EACvC,CAAC,EACJ,CAAC,SAAS,WAAW,CACtB;CAID,MAAM,cAAA,GAAA,MAAA,eAA2B;AAC/B,MAAI,cAAc,KAAA,EAAW,QAAO;EACpC,IAAI,MAAM;EACV,IAAI,MAAM;AACV,OAAK,MAAM,KAAK,SAAS;AACvB,OAAI,EAAE,QAAQ,IAAK,OAAM,EAAE;AAC3B,OAAI,EAAE,QAAQ,IAAK,OAAM,EAAE;;AAE7B,SAAOC,0BAAAA,gBAAgB,KAAK,IAAI;IAC/B,CAAC,SAAS,UAAU,CAAC;CAExB,MAAM,UAAA,GAAA,MAAA,gBAAA,GAAA,YAAA,aAEU;EACV,OAAO,CAAC,aAAa,EAAE;EACvB,QACE,YACC,aACG,CAAC,WAAW,KAAK,WAAW,IAAI,GAChC,eAAe,QAAQ;EAC7B,MAAM,CAAC,WAAW,CAAC;EACpB,CAAC,EACJ;EAAC;EAAS;EAAa;EAAS;EAAW,CAC5C;CAED,MAAM,SAAS,OAAO,MAAM,WAAW;CACvC,MAAM,SAAS,aAAa,WAAW,QAAQ,OAAO,MAAM,WAAW;CAEvE,MAAM,iBAAA,GAAA,MAAA,cAEF,UAGG;AACH,MAAI,CAAC,cAAe;EAEpB,MAAM,SAAA,GAAA,YAAA,YAAmB,MAAM;AAC/B,MAAI,CAAC,MAAO;EAEZ,MAAM,KAAK,OAAO,OAAO,MAAM,IAAI,OAAO,KAAK;EAI/C,IAAI,aAA0B;EAC9B,IAAI,eAAe;AACnB,OAAK,MAAM,KAAK,QAAQ;GACtB,MAAM,IAAI,aAAa,EAAE,MAAM,GAAG;AAClC,OAAI,CAAC,EAAG;GACR,MAAM,WAAW,KAAK,IAAI,EAAE,KAAK,SAAS,GAAG,GAAG,SAAS,CAAC;AAC1D,OAAI,WAAW,cAAc;AAC3B,mBAAe;AACf,iBAAa,EAAE;;;AAInB,MAAI,CAAC,WAAY;AAEjB,cAAY;GACV,aAAa,EAAE,MAAM,YAAY;GACjC,aAAa,OAAO,WAAW,GAAG,OAAO;GACzC,YAAY,OAAO;GACpB,CAAC;IAEJ;EAAC;EAAe;EAAQ;EAAQ;EAAa;EAAO,CACrD;CAED,MAAM,cAAiC,cACnC,OAAO,SAAS,GAAG,MAAM;EACvB,MAAM,IAAI,aAAa,EAAE,MAAM,YAAY,KAAK;AAChD,MAAI,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,YAAY,KAAK,CAAE,QAAO,EAAE;AAC5D,SAAO,CACL;GACE,KAAK,EAAE;GACP,OAAO,EAAE,SAAS,EAAE;GACpB,OAAO,cAAc,IAAI,cAAc;GACvC,OAAO,YAAY,EAAE,MAAM;GAC5B,CACF;GACD,GACF,EAAE;CAEN,MAAM,gBAAgBC,iCAAAA,kBAAkB;CACxC,MAAM,CAAC,YAAY,eAAeC,yBAAAA,iBAAiC;CACnE,MAAM,aAAaC,yBAAAA,qBAAqB;EACtC,SAAS,eAAe;EACxB,SAAS,cAAc,OAAO;EAC9B;EACA;EACA,UAAU,YAAY;EACtB,WAAW,YAAY;EACvB,WAAW;EACZ,CAAC;AAEF,KAAI,QAAQ,MAAM,SAAS,GAAI,QAAO;AAEtC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,YAAY,UAAU;YAAzC;GACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;IAAgB;IAAe;cAC5C,iBAAA,GAAA,kBAAA,MAACC,YAAAA,OAAD;KAAO,MAAM,OAAO;KAAM,KAAK,OAAO;eAAtC;MAEG,YACC,OAAO,KAAK,SACV,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WAAU;OAEV,iBAAgB;OAChB,IAAI;OACJ,IAAI;OACJ,IAAI,OAAO,KAAK;OAChB,IAAI,OAAO,KAAK;OAChB,EANK,UAAU,OAMf,CACF;MAGJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WAAU;OACV,IAAI;OACJ,IAAI;OACJ,IAAI;OACJ,IAAI;OACJ,CAAA;MAGD,gBAAgB,KAAK,QAAQ;OAC5B,MAAM,IAAI,OAAO,IAAI,KAAK;AAC1B,WAAI,CAAC,OAAO,SAAS,EAAE,CAAE,QAAO;OAGhC,MAAM,YAAY,IAAI,aAAa;AACnC,cACE,iBAAA,GAAA,kBAAA,MAAC,KAAD;QAAiB,eAAc;kBAA/B,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SACE,WAAU;SACV,iBAAgB;SAChB,IAAI;SACJ,IAAI;SACJ,IAAI;SACJ,IAAI;SACJ,CAAA,EACD,IAAI,SAAS,QACZ,iBAAA,GAAA,kBAAA,KAAC,QAAD;SACE,WAAU;SACV,IAAG;SACH,YAAY,YAAY,QAAQ;SAChC,GAAG,KAAK,YAAY,KAAK;SACzB,GAAG;mBAEF,IAAI;SACA,CAAA,CAEP;UApBI,IAAI,IAoBR;QAEN;MAGD,OAAO,KAAK,SACX,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,IAAG;OACH,MAAK;OACL,UAAU;OAEV,YAAW;OACX,GAAG,OAAO,KAAK;OACf,GAAG,cAAc;iBAEhB,WAAW,KAAK;OACZ,EANA,KAAK,KAAK,SAAS,GAMnB,CACP;MAMD,cAAc,KAAA,KACb,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,QAAO;OACP,aAAa;OACb,IAAI;OACJ,IAAI;OACJ,IAAI;OACJ,IAAI;OACJ,CAAA;MAEH,OAAO,KAAK,SAAS;OACpB,MAAM,IAAI,OAAO,KAAK;AACtB,cACE,iBAAA,GAAA,kBAAA,MAAC,KAAD,EAAA,UAAA,CACG,cAAc,KAAA,KACb,iBAAA,GAAA,kBAAA,KAAC,QAAD;QACE,QAAO;QACP,aAAa;QACb,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,CAAA,EAEJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;QACE,IAAG;QACH,MAAK;QACL,UAAU;QACV,YAAW;QACX,GAAG,cAAc,KAAA,IAAY,KAAK;QAC/B;kBAEF,cAAc,KAAA,IACXC,0BAAAA,gBAAgB,KAAK,GACrB,YAAY,KAAK;QAChB,CAAA,CACL,EAAA,EAvBI,KAAK,OAuBT;QAEN;MACD,cAAc,KAAA,KACb,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,MAAK;OACL,UAAU;OACV,YAAY;OACZ,YAAW;OACX,GAAG,CAAC,OAAO;OACX,GAAG;iBAEF;OACI,CAAA;MAIR,OAAO,KAAK,GAAG,MACd,iBAAA,GAAA,kBAAA,KAACC,YAAAA,UAAD;OACE,YAAA,GAAA,OAAA,IAAc,YAAY,IAAI,YAAY,SAAS,EAAE,UAAU;OAC/D,OAAO,aAAa,EAAE,SAAS,aAAa;OAC5C,MAAM,EAAE;OACR,MAAK;OAEL,iBAAiB,EAAE,SAAU,EAAE,eAAe,QAAS,KAAA;OACvD,aAAa;OACb,IAAI,MAAM,OAAO,EAAE,KAAK;OACxB,IAAI,MAAM,OAAO,EAAE,MAAM;OACzB,EALK,EAAE,GAKP,CACF;MAGD,iBACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,MAAK;OACL,QAAQ;OACR,cAAc;OACd,aAAa;OACb,YAAY;OACZ,aAAa;OACb,OAAO;OACP,GAAG;OACH,GAAG;OACH,CAAA;MAIH,eAAe,eACd,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WAAU;OACV,eAAc;OACd,iBAAgB;OAChB,IAAI,OAAO,YAAY,KAAK;OAC5B,IAAI,OAAO,YAAY,KAAK;OAC5B,IAAI;OACJ,IAAI;OACJ,CAAA,EACD,OAAO,KAAK,GAAG,MAAM;OACpB,MAAM,IAAI,aAAa,EAAE,MAAM,YAAY,KAAK;AAChD,WAAI,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,YAAY,KAAK,CAAE,QAAO;AAC1D,cACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;QAEE,YAAA,GAAA,OAAA,IAAc,WAAW,IAAI,WAAW,QAAQ;QAChD,IAAI,OAAO,EAAE,KAAK;QAClB,IAAI,OAAO,EAAE,MAAM;QACnB,eAAc;QACd,GAAG;QACH,QAAO;QACP,aAAa;QACb,EARK,EAAE,GAQP;QAEJ,CACD,EAAA,CAAA;MAEC;;IACJ,CAAA;GAEL,cAAc,WAAW,SAAS,KACjC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,WAAW,KAAK,SAAS;KACxB,MAAM,IAAI,OAAO,KAAK,KAAK;AAC3B,SAAI,CAAC,OAAO,SAAS,EAAE,CAAE,QAAO;AAChC,YACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAEE,WAAU;MACV,OAAO;OAAE,MAAM,OAAO,OAAO;OAAG,KAAK;OAAG;gBAEvC,KAAK;MACF,EALC,KAAK,IAKN;MAER;IACE,CAAA;GAGR,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO;KACL,MAAM,WAAW;KACjB,KAAK,WAAW;KAChB,SAAS,eAAe,cAAc,IAAI;KAC1C,YAAY,gBACR,2BACA;KACL;cAEA,eACC,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;KACE,QAAQ,qBAAqB,YAAY,YAAY,KAAK;KAC1D,MAAM;KACN,CAAA;IAEA,CAAA;GACF"}

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

@@ -45,6 +45,13 @@ interface LineChartProps {
   /** Formats the tooltip title. Defaults to `formatDate`. */
   formatTooltipDate?: (date: Date) => string;
   formatValue?: (value: number) => string;
+  /**
+   * Unit shown once at the top of the y-axis (e.g. "kW"). When set, y-axis tick
+   * labels render as plain numbers (matching BarChart / PowerHistoryChart)
+   * instead of repeating `formatValue` on every tick. `formatValue` still feeds
+   * the tooltip. Omit to keep the per-tick `formatValue` labels.
+   */
+  yAxisUnit?: string;
   /**
    * Vertical reference markers positioned on the time axis (e.g. sunrise /
    * sunset). Each renders a dashed line across the plot with an optional label.

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

@@ -45,6 +45,13 @@ interface LineChartProps {
   /** Formats the tooltip title. Defaults to `formatDate`. */
   formatTooltipDate?: (date: Date) => string;
   formatValue?: (value: number) => string;
+  /**
+   * Unit shown once at the top of the y-axis (e.g. "kW"). When set, y-axis tick
+   * labels render as plain numbers (matching BarChart / PowerHistoryChart)
+   * instead of repeating `formatValue` on every tick. `formatValue` still feeds
+   * the tooltip. Omit to keep the per-tick `formatValue` labels.
+   */
+  yAxisUnit?: string;
   /**
    * Vertical reference markers positioned on the time axis (e.g. sunrise /
    * sunset). Each renders a dashed line across the plot with an optional label.

package/dist/components/line-chart.js

@@ -1,6 +1,8 @@
 "use client";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
+import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { useCallback, useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -88,7 +90,7 @@ const LEGEND_COLORS = [
 	"var(--orange-9)",
 	"var(--red-9)"
 ];
-const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defaultCurve = "monotone", showGrid = true, showTooltip: enableTooltip = true, className, xTickCount = 5, yTickCount = 4, formatDate = defaultFormatDate, formatTooltipDate, formatValue = defaultFormatValue, yDomain, referenceLines, topContent }) => {
+const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defaultCurve = "monotone", showGrid = true, showTooltip: enableTooltip = true, className, xTickCount = 5, yTickCount = 4, formatDate = defaultFormatDate, formatTooltipDate, formatValue = defaultFormatValue, yAxisUnit, yDomain, referenceLines, topContent }) => {
 	const { showTooltip, hideTooltip, tooltipData, tooltipLeft, tooltipTop, tooltipOpen } = useTooltip();
 	const innerWidth = Math.max(0, width - margin.left - margin.right);
 	const innerHeight = Math.max(0, height - margin.top - margin.bottom);
@@ -97,17 +99,28 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 		range: [0, innerWidth],
 		domain: extent(allData, (d) => d.date)
 	}), [allData, innerWidth]);
+	const yAxisScale = useMemo(() => {
+		if (yAxisUnit === void 0) return null;
+		let min = 0;
+		let max = 0;
+		for (const d of allData) {
+			if (d.value < min) min = d.value;
+			if (d.value > max) max = d.value;
+		}
+		return buildYAxisScale(min, max);
+	}, [allData, yAxisUnit]);
 	const yScale = useMemo(() => scaleLinear({
 		range: [innerHeight, 0],
-		domain: yDomain ?? computeYDomain(allData),
-		nice: !yDomain
+		domain: yDomain ?? (yAxisScale ? [yAxisScale.min, yAxisScale.max] : computeYDomain(allData)),
+		nice: !yDomain && !yAxisScale
 	}), [
 		allData,
 		innerHeight,
-		yDomain
+		yDomain,
+		yAxisScale
 	]);
 	const xTicks = xScale.ticks(xTickCount);
-	const yTicks = yScale.ticks(yTickCount);
+	const yTicks = yAxisScale ? yAxisScale.ticks : yScale.ticks(yTickCount);
 	const handleTooltip = useCallback((event) => {
 		if (!enableTooltip) return;
 		const point = localPoint(event);
@@ -147,6 +160,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 			value: formatValue(d.value)
 		}];
 	}) : [];
+	const reducedMotion = useReducedMotion();
 	const [tooltipRef, tooltipSize] = useMeasuredSize();
 	const tooltipPos = clampTooltipPosition({
 		anchorX: tooltipLeft ?? 0,
@@ -170,7 +184,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 					top: margin.top,
 					children: [
 						showGrid && yTicks.map((tick) => /* @__PURE__ */ jsx("line", {
-							className: "stroke-slate-a4",
+							className: "stroke-gray-a4",
 							strokeDasharray: "4,4",
 							x1: 0,
 							x2: innerWidth,
@@ -178,7 +192,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 							y2: yScale(tick)
 						}, `grid-y-${tick}`)),
 						/* @__PURE__ */ jsx("line", {
-							className: "stroke-slate-a6",
+							className: "stroke-gray-a6",
 							x1: 0,
 							x2: innerWidth,
 							y1: innerHeight,
@@ -208,22 +222,50 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 							}, ref.key);
 						}),
 						xTicks.map((tick) => /* @__PURE__ */ jsx("text", {
-							className: "fill-slate-a11 text-xs",
 							dy: "1em",
+							fill: "var(--neutral-a11)",
+							fontSize: 10,
 							textAnchor: "middle",
 							x: xScale(tick),
 							y: innerHeight + 8,
 							children: formatDate(tick)
 						}, `x-${tick.valueOf()}`)),
-						yTicks.map((tick) => /* @__PURE__ */ jsx("text", {
-							className: "fill-slate-a11 text-xs",
-							dx: "-0.5em",
-							dy: "0.32em",
-							textAnchor: "end",
-							x: -4,
-							y: yScale(tick),
-							children: formatValue(tick)
-						}, `y-${tick}`)),
+						yAxisUnit !== void 0 && /* @__PURE__ */ jsx("line", {
+							stroke: "var(--neutral-a6)",
+							strokeWidth: 1,
+							x1: 0,
+							x2: 0,
+							y1: 0,
+							y2: innerHeight
+						}),
+						yTicks.map((tick) => {
+							const y = yScale(tick);
+							return /* @__PURE__ */ jsxs("g", { children: [yAxisUnit !== void 0 && /* @__PURE__ */ jsx("line", {
+								stroke: "var(--neutral-a8)",
+								strokeWidth: 1,
+								x1: -4,
+								x2: 0,
+								y1: y,
+								y2: y
+							}), /* @__PURE__ */ jsx("text", {
+								dy: "0.32em",
+								fill: "var(--neutral-a11)",
+								fontSize: 10,
+								textAnchor: "end",
+								x: yAxisUnit !== void 0 ? -7 : -4,
+								y,
+								children: yAxisUnit !== void 0 ? formatYAxisTick(tick) : formatValue(tick)
+							})] }, `y-${tick}`);
+						}),
+						yAxisUnit !== void 0 && /* @__PURE__ */ jsx("text", {
+							fill: "var(--neutral-a11)",
+							fontSize: 10,
+							fontWeight: 600,
+							textAnchor: "start",
+							x: -margin.left,
+							y: -6,
+							children: yAxisUnit
+						}),
 						series.map((s, i) => /* @__PURE__ */ jsx(LinePath, {
 							className: cn(LINE_COLORS[i % LINE_COLORS.length], s.className),
 							curve: resolveCurve(s.curve ?? defaultCurve),
@@ -246,7 +288,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 							y: 0
 						}),
 						tooltipOpen && tooltipData && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("line", {
-							className: "stroke-slate-a6",
+							className: "stroke-gray-a6",
 							pointerEvents: "none",
 							strokeDasharray: "4,4",
 							x1: xScale(tooltipData.date),
@@ -291,7 +333,7 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
 					left: tooltipPos.left,
 					top: tooltipPos.top,
 					opacity: tooltipOpen && tooltipData ? 1 : 0,
-					transition: "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+					transition: reducedMotion ? "opacity 140ms ease-out" : "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
 				},
 				children: tooltipData && /* @__PURE__ */ jsx(ChartTooltipCard, {
 					label: (formatTooltipDate ?? formatDate)(tooltipData.date),

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

@@ -1 +1 @@
-{"version":3,"file":"line-chart.js","names":[],"sources":["../../src/components/line-chart.tsx"],"sourcesContent":["import {\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n} from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { Group } from '@visx/group'\nimport { scaleLinear, scaleTime } from '@visx/scale'\nimport { LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector, extent } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\nimport { cn } from '../utils/cn'\nimport { localeNumberFormat } from '../utils/format'\nimport {\n  ChartTooltipCard,\n  type ChartTooltipRow,\n  clampTooltipPosition,\n  useMeasuredSize,\n} from './chart'\n\nexport interface LineChartDatum {\n  date: Date\n  value: number\n}\n\nexport type LineChartCurve =\n  | 'monotone'\n  | 'step'\n  | 'step-after'\n  | 'step-before'\n  | 'linear'\n\nexport interface LineChartSeries {\n  id: string\n  data: LineChartDatum[]\n  /** Label shown in the hover tooltip. Defaults to `id`. */\n  label?: React.ReactNode\n  className?: string\n  /** Curve interpolation type. Default: inherits from LineChartProps.curve */\n  curve?: LineChartCurve\n  /** Render as a dashed line */\n  dashed?: boolean\n  /** Custom dash pattern (e.g. \"8,4\" or \"4,2,1,2\"). Only applies when dashed is true. */\n  dashPattern?: string\n}\n\nexport interface LineChartProps {\n  series: LineChartSeries[]\n  width: number\n  height: number\n  margin?: { top: number; right: number; bottom: number; left: number }\n  /** Default curve for all series. Default: 'monotone' */\n  curve?: LineChartCurve\n  showGrid?: boolean\n  showTooltip?: boolean\n  className?: string\n  xTickCount?: number\n  yTickCount?: number\n  /** Fixes the y-axis to an explicit `[min, max]`. Defaults to the data extent. */\n  yDomain?: [number, number]\n  /** Formats the x-axis tick labels. */\n  formatDate?: (date: Date) => string\n  /** Formats the tooltip title. Defaults to `formatDate`. */\n  formatTooltipDate?: (date: Date) => string\n  formatValue?: (value: number) => string\n  /**\n   * Vertical reference markers positioned on the time axis (e.g. sunrise /\n   * sunset). Each renders a dashed line across the plot with an optional label.\n   */\n  referenceLines?: Array<{ key: string; date: Date; label?: React.ReactNode }>\n  /**\n   * HTML content pinned to the top of the plot at a given time (e.g. an hourly\n   * weather icon). Positioned by the same time scale as the series, so it lines\n   * up with the curve below it.\n   */\n  topContent?: Array<{ key: string; date: Date; content: React.ReactNode }>\n}\n\nconst DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 48 }\n\nconst CURVE_MAP = {\n  monotone: curveMonotoneX,\n  step: curveStep,\n  'step-after': curveStepAfter,\n  'step-before': curveStepBefore,\n  linear: curveLinear,\n} as const\n\nconst resolveCurve = (type: LineChartCurve) => CURVE_MAP[type]\n\nconst dateBisector = bisector<LineChartDatum, Date>((d) => d.date)\nconst bisectDate = (data: LineChartDatum[], x: Date, lo?: number) =>\n  dateBisector.left(data, x, lo)\n\n/** Whether `date` falls within a series' own x-range (data is sorted ascending). */\nfunction withinDomain(data: LineChartDatum[], date: Date): boolean {\n  const first = data[0]\n  const last = data[data.length - 1]\n  if (!first || !last) return false\n  const t = date.valueOf()\n  return t >= first.date.valueOf() && t <= last.date.valueOf()\n}\n\n/**\n * y-domain padded 10% beyond the data extent. The baseline is pinned to 0 so\n * all-positive series render from the axis up; a series that dips below 0\n * (signed grid / battery power) extends the domain downward to keep the zero\n * crossing visible.\n */\nfunction computeYDomain(data: LineChartDatum[]): [number, number] {\n  let min = 0\n  let max = 0\n  for (const d of data) {\n    if (d.value < min) min = d.value\n    if (d.value > max) max = d.value\n  }\n  if (min === max) return [min, min + 1]\n  return [min * 1.1, max * 1.1]\n}\n\nfunction nearestDatum(\n  data: LineChartDatum[],\n  date: Date,\n): LineChartDatum | undefined {\n  if (data.length === 0) return undefined\n  const index = bisectDate(data, date, 1)\n  const d0 = data[index - 1]\n  const d1 = data[index]\n  if (!d0) return d1\n  if (!d1) return d0\n  return date.valueOf() - d0.date.valueOf() > d1.date.valueOf() - date.valueOf()\n    ? d1\n    : d0\n}\n\nconst defaultFormatDate = (date: Date) =>\n  date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })\n\nconst defaultValueFormat = localeNumberFormat()\nconst defaultFormatValue = (value: number) => defaultValueFormat.format(value)\n\nconst LINE_COLORS = [\n  'stroke-spark-9',\n  'stroke-green-9',\n  'stroke-blue-9',\n  'stroke-orange-9',\n  'stroke-red-9',\n]\n\nconst DOT_COLORS = [\n  'fill-spark-9',\n  'fill-green-9',\n  'fill-blue-9',\n  'fill-orange-9',\n  'fill-red-9',\n]\n\n// CSS-var colours matching LINE_COLORS, used for the tooltip legend dots.\nconst LEGEND_COLORS = [\n  'var(--spark-9)',\n  'var(--green-9)',\n  'var(--blue-9)',\n  'var(--orange-9)',\n  'var(--red-9)',\n]\n\nconst LineChart: React.FC<LineChartProps> = ({\n  series,\n  width,\n  height,\n  margin = DEFAULT_MARGIN,\n  curve: defaultCurve = 'monotone',\n  showGrid = true,\n  showTooltip: enableTooltip = true,\n  className,\n  xTickCount = 5,\n  yTickCount = 4,\n  formatDate = defaultFormatDate,\n  formatTooltipDate,\n  formatValue = defaultFormatValue,\n  yDomain,\n  referenceLines,\n  topContent,\n}) => {\n  const {\n    showTooltip,\n    hideTooltip,\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n  } = useTooltip<{ date: Date }>()\n\n  const innerWidth = Math.max(0, width - margin.left - margin.right)\n  const innerHeight = Math.max(0, height - margin.top - margin.bottom)\n\n  const allData = useMemo(() => series.flatMap((s) => s.data), [series])\n\n  const xScale = useMemo(\n    () =>\n      scaleTime({\n        range: [0, innerWidth],\n        domain: extent(allData, (d) => d.date) as [Date, Date],\n      }),\n    [allData, innerWidth],\n  )\n\n  const yScale = useMemo(\n    () =>\n      scaleLinear({\n        range: [innerHeight, 0],\n        domain: yDomain ?? computeYDomain(allData),\n        nice: !yDomain,\n      }),\n    [allData, innerHeight, yDomain],\n  )\n\n  const xTicks = xScale.ticks(xTickCount)\n  const yTicks = yScale.ticks(yTickCount)\n\n  const handleTooltip = useCallback(\n    (\n      event:\n        | React.TouchEvent<SVGRectElement>\n        | React.MouseEvent<SVGRectElement>,\n    ) => {\n      if (!enableTooltip) return\n\n      const point = localPoint(event)\n      if (!point) return\n\n      const x0 = xScale.invert(point.x - margin.left)\n\n      // Snap to the data point closest to the cursor across all series, so the\n      // cursor line + tooltip line up with real values.\n      let anchorDate: Date | null = null\n      let bestDistance = Infinity\n      for (const s of series) {\n        const d = nearestDatum(s.data, x0)\n        if (!d) continue\n        const distance = Math.abs(d.date.valueOf() - x0.valueOf())\n        if (distance < bestDistance) {\n          bestDistance = distance\n          anchorDate = d.date\n        }\n      }\n\n      if (!anchorDate) return\n\n      showTooltip({\n        tooltipData: { date: anchorDate },\n        tooltipLeft: xScale(anchorDate) + margin.left,\n        tooltipTop: margin.top,\n      })\n    },\n    [enableTooltip, margin, series, showTooltip, xScale],\n  )\n\n  const tooltipRows: ChartTooltipRow[] = tooltipData\n    ? series.flatMap((s, i) => {\n        const d = nearestDatum(s.data, tooltipData.date)\n        if (!d || !withinDomain(s.data, tooltipData.date)) return []\n        return [\n          {\n            key: s.id,\n            label: s.label ?? s.id,\n            color: LEGEND_COLORS[i % LEGEND_COLORS.length] as string,\n            value: formatValue(d.value),\n          },\n        ]\n      })\n    : []\n\n  const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n  const tooltipPos = clampTooltipPosition({\n    anchorX: tooltipLeft ?? 0,\n    anchorY: tooltipTop ?? margin.top,\n    width,\n    height,\n    tipWidth: tooltipSize.width,\n    tipHeight: tooltipSize.height,\n    placement: 'beside',\n  })\n\n  if (width < 10 || height < 10) return null\n\n  return (\n    <div className={cn('relative', className)}>\n      <svg className=\"block\" height={height} width={width}>\n        <Group left={margin.left} top={margin.top}>\n          {/* Grid lines */}\n          {showGrid &&\n            yTicks.map((tick) => (\n              <line\n                className=\"stroke-slate-a4\"\n                key={`grid-y-${tick}`}\n                strokeDasharray=\"4,4\"\n                x1={0}\n                x2={innerWidth}\n                y1={yScale(tick)}\n                y2={yScale(tick)}\n              />\n            ))}\n\n          {/* X axis */}\n          <line\n            className=\"stroke-slate-a6\"\n            x1={0}\n            x2={innerWidth}\n            y1={innerHeight}\n            y2={innerHeight}\n          />\n\n          {/* Reference markers (e.g. sunrise / sunset) */}\n          {referenceLines?.map((ref) => {\n            const x = xScale(ref.date)\n            if (!Number.isFinite(x)) return null\n            // Sit the label beside the line, on whichever side keeps it in\n            // frame: right of a left-half marker, left of a right-half one.\n            const anchorEnd = x > innerWidth / 2\n            return (\n              <g key={ref.key} pointerEvents=\"none\">\n                <line\n                  className=\"stroke-orange-8\"\n                  strokeDasharray=\"3,3\"\n                  x1={x}\n                  x2={x}\n                  y1={0}\n                  y2={innerHeight}\n                />\n                {ref.label != null && (\n                  <text\n                    className=\"fill-orange-11 text-[10px]\"\n                    dy=\"0.9em\"\n                    textAnchor={anchorEnd ? 'end' : 'start'}\n                    x={x + (anchorEnd ? -4 : 4)}\n                    y={0}\n                  >\n                    {ref.label}\n                  </text>\n                )}\n              </g>\n            )\n          })}\n\n          {/* X axis labels */}\n          {xTicks.map((tick) => (\n            <text\n              className=\"fill-slate-a11 text-xs\"\n              dy=\"1em\"\n              key={`x-${tick.valueOf()}`}\n              textAnchor=\"middle\"\n              x={xScale(tick)}\n              y={innerHeight + 8}\n            >\n              {formatDate(tick)}\n            </text>\n          ))}\n\n          {/* Y axis labels */}\n          {yTicks.map((tick) => (\n            <text\n              className=\"fill-slate-a11 text-xs\"\n              dx=\"-0.5em\"\n              dy=\"0.32em\"\n              key={`y-${tick}`}\n              textAnchor=\"end\"\n              x={-4}\n              y={yScale(tick)}\n            >\n              {formatValue(tick)}\n            </text>\n          ))}\n\n          {/* Lines */}\n          {series.map((s, i) => (\n            <LinePath\n              className={cn(LINE_COLORS[i % LINE_COLORS.length], s.className)}\n              curve={resolveCurve(s.curve ?? defaultCurve)}\n              data={s.data}\n              fill=\"none\"\n              key={s.id}\n              strokeDasharray={s.dashed ? (s.dashPattern ?? '6,4') : undefined}\n              strokeWidth={2}\n              x={(d) => xScale(d.date)}\n              y={(d) => yScale(d.value)}\n            />\n          ))}\n\n          {/* Tooltip hover target */}\n          {enableTooltip && (\n            <rect\n              fill=\"transparent\"\n              height={innerHeight}\n              onMouseLeave={hideTooltip}\n              onMouseMove={handleTooltip}\n              onTouchEnd={hideTooltip}\n              onTouchMove={handleTooltip}\n              width={innerWidth}\n              x={0}\n              y={0}\n            />\n          )}\n\n          {/* Cursor line + a dot per series */}\n          {tooltipOpen && tooltipData && (\n            <>\n              <line\n                className=\"stroke-slate-a6\"\n                pointerEvents=\"none\"\n                strokeDasharray=\"4,4\"\n                x1={xScale(tooltipData.date)}\n                x2={xScale(tooltipData.date)}\n                y1={0}\n                y2={innerHeight}\n              />\n              {series.map((s, i) => {\n                const d = nearestDatum(s.data, tooltipData.date)\n                if (!d || !withinDomain(s.data, tooltipData.date)) return null\n                return (\n                  <circle\n                    key={s.id}\n                    className={cn(DOT_COLORS[i % DOT_COLORS.length])}\n                    cx={xScale(d.date)}\n                    cy={yScale(d.value)}\n                    pointerEvents=\"none\"\n                    r={4}\n                    stroke=\"white\"\n                    strokeWidth={2}\n                  />\n                )\n              })}\n            </>\n          )}\n        </Group>\n      </svg>\n\n      {topContent && topContent.length > 0 && (\n        <div className=\"pointer-events-none absolute inset-0\">\n          {topContent.map((item) => {\n            const x = xScale(item.date)\n            if (!Number.isFinite(x)) return null\n            return (\n              <div\n                key={item.key}\n                className=\"absolute -translate-x-1/2\"\n                style={{ left: margin.left + x, top: 0 }}\n              >\n                {item.content}\n              </div>\n            )\n          })}\n        </div>\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: tooltipOpen && tooltipData ? 1 : 0,\n          transition:\n            'left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out',\n        }}\n      >\n        {tooltipData && (\n          <ChartTooltipCard\n            label={(formatTooltipDate ?? formatDate)(tooltipData.date)}\n            rows={tooltipRows}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { LineChart }\n"],"mappings":"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"}
+{"version":3,"file":"line-chart.js","names":[],"sources":["../../src/components/line-chart.tsx"],"sourcesContent":["import {\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n} from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { Group } from '@visx/group'\nimport { scaleLinear, scaleTime } from '@visx/scale'\nimport { LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector, extent } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { buildYAxisScale, formatYAxisTick } from '../utils/chart-scale'\nimport { cn } from '../utils/cn'\nimport { localeNumberFormat } from '../utils/format'\nimport {\n  ChartTooltipCard,\n  type ChartTooltipRow,\n  clampTooltipPosition,\n  useMeasuredSize,\n} from './chart'\n\nexport interface LineChartDatum {\n  date: Date\n  value: number\n}\n\nexport type LineChartCurve =\n  | 'monotone'\n  | 'step'\n  | 'step-after'\n  | 'step-before'\n  | 'linear'\n\nexport interface LineChartSeries {\n  id: string\n  data: LineChartDatum[]\n  /** Label shown in the hover tooltip. Defaults to `id`. */\n  label?: React.ReactNode\n  className?: string\n  /** Curve interpolation type. Default: inherits from LineChartProps.curve */\n  curve?: LineChartCurve\n  /** Render as a dashed line */\n  dashed?: boolean\n  /** Custom dash pattern (e.g. \"8,4\" or \"4,2,1,2\"). Only applies when dashed is true. */\n  dashPattern?: string\n}\n\nexport interface LineChartProps {\n  series: LineChartSeries[]\n  width: number\n  height: number\n  margin?: { top: number; right: number; bottom: number; left: number }\n  /** Default curve for all series. Default: 'monotone' */\n  curve?: LineChartCurve\n  showGrid?: boolean\n  showTooltip?: boolean\n  className?: string\n  xTickCount?: number\n  yTickCount?: number\n  /** Fixes the y-axis to an explicit `[min, max]`. Defaults to the data extent. */\n  yDomain?: [number, number]\n  /** Formats the x-axis tick labels. */\n  formatDate?: (date: Date) => string\n  /** Formats the tooltip title. Defaults to `formatDate`. */\n  formatTooltipDate?: (date: Date) => string\n  formatValue?: (value: number) => string\n  /**\n   * Unit shown once at the top of the y-axis (e.g. \"kW\"). When set, y-axis tick\n   * labels render as plain numbers (matching BarChart / PowerHistoryChart)\n   * instead of repeating `formatValue` on every tick. `formatValue` still feeds\n   * the tooltip. Omit to keep the per-tick `formatValue` labels.\n   */\n  yAxisUnit?: string\n  /**\n   * Vertical reference markers positioned on the time axis (e.g. sunrise /\n   * sunset). Each renders a dashed line across the plot with an optional label.\n   */\n  referenceLines?: Array<{ key: string; date: Date; label?: React.ReactNode }>\n  /**\n   * HTML content pinned to the top of the plot at a given time (e.g. an hourly\n   * weather icon). Positioned by the same time scale as the series, so it lines\n   * up with the curve below it.\n   */\n  topContent?: Array<{ key: string; date: Date; content: React.ReactNode }>\n}\n\nconst DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 48 }\n\nconst CURVE_MAP = {\n  monotone: curveMonotoneX,\n  step: curveStep,\n  'step-after': curveStepAfter,\n  'step-before': curveStepBefore,\n  linear: curveLinear,\n} as const\n\nconst resolveCurve = (type: LineChartCurve) => CURVE_MAP[type]\n\nconst dateBisector = bisector<LineChartDatum, Date>((d) => d.date)\nconst bisectDate = (data: LineChartDatum[], x: Date, lo?: number) =>\n  dateBisector.left(data, x, lo)\n\n/** Whether `date` falls within a series' own x-range (data is sorted ascending). */\nfunction withinDomain(data: LineChartDatum[], date: Date): boolean {\n  const first = data[0]\n  const last = data[data.length - 1]\n  if (!first || !last) return false\n  const t = date.valueOf()\n  return t >= first.date.valueOf() && t <= last.date.valueOf()\n}\n\n/**\n * y-domain padded 10% beyond the data extent. The baseline is pinned to 0 so\n * all-positive series render from the axis up; a series that dips below 0\n * (signed grid / battery power) extends the domain downward to keep the zero\n * crossing visible.\n */\nfunction computeYDomain(data: LineChartDatum[]): [number, number] {\n  let min = 0\n  let max = 0\n  for (const d of data) {\n    if (d.value < min) min = d.value\n    if (d.value > max) max = d.value\n  }\n  if (min === max) return [min, min + 1]\n  return [min * 1.1, max * 1.1]\n}\n\nfunction nearestDatum(\n  data: LineChartDatum[],\n  date: Date,\n): LineChartDatum | undefined {\n  if (data.length === 0) return undefined\n  const index = bisectDate(data, date, 1)\n  const d0 = data[index - 1]\n  const d1 = data[index]\n  if (!d0) return d1\n  if (!d1) return d0\n  return date.valueOf() - d0.date.valueOf() > d1.date.valueOf() - date.valueOf()\n    ? d1\n    : d0\n}\n\nconst defaultFormatDate = (date: Date) =>\n  date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })\n\nconst defaultValueFormat = localeNumberFormat()\nconst defaultFormatValue = (value: number) => defaultValueFormat.format(value)\n\nconst LINE_COLORS = [\n  'stroke-spark-9',\n  'stroke-green-9',\n  'stroke-blue-9',\n  'stroke-orange-9',\n  'stroke-red-9',\n]\n\nconst DOT_COLORS = [\n  'fill-spark-9',\n  'fill-green-9',\n  'fill-blue-9',\n  'fill-orange-9',\n  'fill-red-9',\n]\n\n// CSS-var colours matching LINE_COLORS, used for the tooltip legend dots.\nconst LEGEND_COLORS = [\n  'var(--spark-9)',\n  'var(--green-9)',\n  'var(--blue-9)',\n  'var(--orange-9)',\n  'var(--red-9)',\n]\n\nconst LineChart: React.FC<LineChartProps> = ({\n  series,\n  width,\n  height,\n  margin = DEFAULT_MARGIN,\n  curve: defaultCurve = 'monotone',\n  showGrid = true,\n  showTooltip: enableTooltip = true,\n  className,\n  xTickCount = 5,\n  yTickCount = 4,\n  formatDate = defaultFormatDate,\n  formatTooltipDate,\n  formatValue = defaultFormatValue,\n  yAxisUnit,\n  yDomain,\n  referenceLines,\n  topContent,\n}) => {\n  const {\n    showTooltip,\n    hideTooltip,\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n  } = useTooltip<{ date: Date }>()\n\n  const innerWidth = Math.max(0, width - margin.left - margin.right)\n  const innerHeight = Math.max(0, height - margin.top - margin.bottom)\n\n  const allData = useMemo(() => series.flatMap((s) => s.data), [series])\n\n  const xScale = useMemo(\n    () =>\n      scaleTime({\n        range: [0, innerWidth],\n        domain: extent(allData, (d) => d.date) as [Date, Date],\n      }),\n    [allData, innerWidth],\n  )\n\n  // With a unit, the y-axis is generated by the shared scale util (nice ticks\n  // + rounded bounds) so it matches BarChart / PowerHistoryChart exactly.\n  const yAxisScale = useMemo(() => {\n    if (yAxisUnit === undefined) return null\n    let min = 0\n    let max = 0\n    for (const d of allData) {\n      if (d.value < min) min = d.value\n      if (d.value > max) max = d.value\n    }\n    return buildYAxisScale(min, max)\n  }, [allData, yAxisUnit])\n\n  const yScale = useMemo(\n    () =>\n      scaleLinear({\n        range: [innerHeight, 0],\n        domain:\n          yDomain ??\n          (yAxisScale\n            ? [yAxisScale.min, yAxisScale.max]\n            : computeYDomain(allData)),\n        nice: !yDomain && !yAxisScale,\n      }),\n    [allData, innerHeight, yDomain, yAxisScale],\n  )\n\n  const xTicks = xScale.ticks(xTickCount)\n  const yTicks = yAxisScale ? yAxisScale.ticks : yScale.ticks(yTickCount)\n\n  const handleTooltip = useCallback(\n    (\n      event:\n        | React.TouchEvent<SVGRectElement>\n        | React.MouseEvent<SVGRectElement>,\n    ) => {\n      if (!enableTooltip) return\n\n      const point = localPoint(event)\n      if (!point) return\n\n      const x0 = xScale.invert(point.x - margin.left)\n\n      // Snap to the data point closest to the cursor across all series, so the\n      // cursor line + tooltip line up with real values.\n      let anchorDate: Date | null = null\n      let bestDistance = Infinity\n      for (const s of series) {\n        const d = nearestDatum(s.data, x0)\n        if (!d) continue\n        const distance = Math.abs(d.date.valueOf() - x0.valueOf())\n        if (distance < bestDistance) {\n          bestDistance = distance\n          anchorDate = d.date\n        }\n      }\n\n      if (!anchorDate) return\n\n      showTooltip({\n        tooltipData: { date: anchorDate },\n        tooltipLeft: xScale(anchorDate) + margin.left,\n        tooltipTop: margin.top,\n      })\n    },\n    [enableTooltip, margin, series, showTooltip, xScale],\n  )\n\n  const tooltipRows: ChartTooltipRow[] = tooltipData\n    ? series.flatMap((s, i) => {\n        const d = nearestDatum(s.data, tooltipData.date)\n        if (!d || !withinDomain(s.data, tooltipData.date)) return []\n        return [\n          {\n            key: s.id,\n            label: s.label ?? s.id,\n            color: LEGEND_COLORS[i % LEGEND_COLORS.length] as string,\n            value: formatValue(d.value),\n          },\n        ]\n      })\n    : []\n\n  const reducedMotion = useReducedMotion()\n  const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n  const tooltipPos = clampTooltipPosition({\n    anchorX: tooltipLeft ?? 0,\n    anchorY: tooltipTop ?? margin.top,\n    width,\n    height,\n    tipWidth: tooltipSize.width,\n    tipHeight: tooltipSize.height,\n    placement: 'beside',\n  })\n\n  if (width < 10 || height < 10) return null\n\n  return (\n    <div className={cn('relative', className)}>\n      <svg className=\"block\" height={height} width={width}>\n        <Group left={margin.left} top={margin.top}>\n          {/* Grid lines */}\n          {showGrid &&\n            yTicks.map((tick) => (\n              <line\n                className=\"stroke-gray-a4\"\n                key={`grid-y-${tick}`}\n                strokeDasharray=\"4,4\"\n                x1={0}\n                x2={innerWidth}\n                y1={yScale(tick)}\n                y2={yScale(tick)}\n              />\n            ))}\n\n          {/* X axis */}\n          <line\n            className=\"stroke-gray-a6\"\n            x1={0}\n            x2={innerWidth}\n            y1={innerHeight}\n            y2={innerHeight}\n          />\n\n          {/* Reference markers (e.g. sunrise / sunset) */}\n          {referenceLines?.map((ref) => {\n            const x = xScale(ref.date)\n            if (!Number.isFinite(x)) return null\n            // Sit the label beside the line, on whichever side keeps it in\n            // frame: right of a left-half marker, left of a right-half one.\n            const anchorEnd = x > innerWidth / 2\n            return (\n              <g key={ref.key} pointerEvents=\"none\">\n                <line\n                  className=\"stroke-orange-8\"\n                  strokeDasharray=\"3,3\"\n                  x1={x}\n                  x2={x}\n                  y1={0}\n                  y2={innerHeight}\n                />\n                {ref.label != null && (\n                  <text\n                    className=\"fill-orange-11 text-[10px]\"\n                    dy=\"0.9em\"\n                    textAnchor={anchorEnd ? 'end' : 'start'}\n                    x={x + (anchorEnd ? -4 : 4)}\n                    y={0}\n                  >\n                    {ref.label}\n                  </text>\n                )}\n              </g>\n            )\n          })}\n\n          {/* X axis labels */}\n          {xTicks.map((tick) => (\n            <text\n              dy=\"1em\"\n              fill=\"var(--neutral-a11)\"\n              fontSize={10}\n              key={`x-${tick.valueOf()}`}\n              textAnchor=\"middle\"\n              x={xScale(tick)}\n              y={innerHeight + 8}\n            >\n              {formatDate(tick)}\n            </text>\n          ))}\n\n          {/* Y axis. With `yAxisUnit`, matches BarChart: a vertical axis line,\n              short tick marks, plain numeric ticks, and the unit as a bold\n              top-left header (top tick hidden). Without it, ticks repeat\n              `formatValue` and no axis line/marks are drawn. */}\n          {yAxisUnit !== undefined && (\n            <line\n              stroke=\"var(--neutral-a6)\"\n              strokeWidth={1}\n              x1={0}\n              x2={0}\n              y1={0}\n              y2={innerHeight}\n            />\n          )}\n          {yTicks.map((tick) => {\n            const y = yScale(tick)\n            return (\n              <g key={`y-${tick}`}>\n                {yAxisUnit !== undefined && (\n                  <line\n                    stroke=\"var(--neutral-a8)\"\n                    strokeWidth={1}\n                    x1={-4}\n                    x2={0}\n                    y1={y}\n                    y2={y}\n                  />\n                )}\n                <text\n                  dy=\"0.32em\"\n                  fill=\"var(--neutral-a11)\"\n                  fontSize={10}\n                  textAnchor=\"end\"\n                  x={yAxisUnit !== undefined ? -7 : -4}\n                  y={y}\n                >\n                  {yAxisUnit !== undefined\n                    ? formatYAxisTick(tick)\n                    : formatValue(tick)}\n                </text>\n              </g>\n            )\n          })}\n          {yAxisUnit !== undefined && (\n            <text\n              fill=\"var(--neutral-a11)\"\n              fontSize={10}\n              fontWeight={600}\n              textAnchor=\"start\"\n              x={-margin.left}\n              y={-6}\n            >\n              {yAxisUnit}\n            </text>\n          )}\n\n          {/* Lines */}\n          {series.map((s, i) => (\n            <LinePath\n              className={cn(LINE_COLORS[i % LINE_COLORS.length], s.className)}\n              curve={resolveCurve(s.curve ?? defaultCurve)}\n              data={s.data}\n              fill=\"none\"\n              key={s.id}\n              strokeDasharray={s.dashed ? (s.dashPattern ?? '6,4') : undefined}\n              strokeWidth={2}\n              x={(d) => xScale(d.date)}\n              y={(d) => yScale(d.value)}\n            />\n          ))}\n\n          {/* Tooltip hover target */}\n          {enableTooltip && (\n            <rect\n              fill=\"transparent\"\n              height={innerHeight}\n              onMouseLeave={hideTooltip}\n              onMouseMove={handleTooltip}\n              onTouchEnd={hideTooltip}\n              onTouchMove={handleTooltip}\n              width={innerWidth}\n              x={0}\n              y={0}\n            />\n          )}\n\n          {/* Cursor line + a dot per series */}\n          {tooltipOpen && tooltipData && (\n            <>\n              <line\n                className=\"stroke-gray-a6\"\n                pointerEvents=\"none\"\n                strokeDasharray=\"4,4\"\n                x1={xScale(tooltipData.date)}\n                x2={xScale(tooltipData.date)}\n                y1={0}\n                y2={innerHeight}\n              />\n              {series.map((s, i) => {\n                const d = nearestDatum(s.data, tooltipData.date)\n                if (!d || !withinDomain(s.data, tooltipData.date)) return null\n                return (\n                  <circle\n                    key={s.id}\n                    className={cn(DOT_COLORS[i % DOT_COLORS.length])}\n                    cx={xScale(d.date)}\n                    cy={yScale(d.value)}\n                    pointerEvents=\"none\"\n                    r={4}\n                    stroke=\"white\"\n                    strokeWidth={2}\n                  />\n                )\n              })}\n            </>\n          )}\n        </Group>\n      </svg>\n\n      {topContent && topContent.length > 0 && (\n        <div className=\"pointer-events-none absolute inset-0\">\n          {topContent.map((item) => {\n            const x = xScale(item.date)\n            if (!Number.isFinite(x)) return null\n            return (\n              <div\n                key={item.key}\n                className=\"absolute -translate-x-1/2\"\n                style={{ left: margin.left + x, top: 0 }}\n              >\n                {item.content}\n              </div>\n            )\n          })}\n        </div>\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: tooltipOpen && tooltipData ? 1 : 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={(formatTooltipDate ?? formatDate)(tooltipData.date)}\n            rows={tooltipRows}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { LineChart }\n"],"mappings":"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"}

package/dist/components/metering-row.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { MaterialSymbolIconName } from "../icons/material-symbol.js";
-import { t as Tone } from "../tones-DyCkL71h.js";
+import { t as Tone } from "../tones-PXJGlSpe.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/metering-row.d.ts

package/dist/components/money-saved-block.cjs

@@ -51,7 +51,7 @@ const MoneySavedGaugeContent = ({ autarkyProgress, autarkyLabel, autarkyCaption
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				d: gaugeArcPath,
 				fill: "none",
-				stroke: "var(--gray-a5)",
+				stroke: "var(--neutral-a5)",
 				strokeWidth: gaugeStrokeWidth,
 				strokeLinecap: "round",
 				pathLength: 1

package/dist/components/money-saved-block.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"money-saved-block.cjs","names":["SectionTitle","StateValue","MaterialSymbol"],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--gray-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;EACG,CAAA;;AAIV,MAAM,qBAAqB,EAAE,eAA8C;AACzE,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA;;AAG9D,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAe,UAAwB,CAAA;;AAGhD,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,YAAD,EAAa,UAAsB,CAAA;;AAG5C,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,WAAU;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAc,CAAA,EACtE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAgB;GAAgB,CAAA,CAC3C;;;AAIX,MAAM,4BAA4B,EAChC,eAGI;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EACZ;EACG,CAAA;;AAIV,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;AACJ,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;IACpC,CAAA,CACE;;EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA;EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAmC;GAAsB,CAAA;EACxE,EAAA,CAAA"}
+{"version":3,"file":"money-saved-block.cjs","names":["SectionTitle","StateValue","MaterialSymbol"],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;EACG,CAAA;;AAIV,MAAM,qBAAqB,EAAE,eAA8C;AACzE,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA;;AAG9D,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAe,UAAwB,CAAA;;AAGhD,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,YAAD,EAAa,UAAsB,CAAA;;AAG5C,MAAM,mBAAmB,EAAE,eAA8C;AACvE,QACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,WAAU;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAc,CAAA,EACtE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAgB;GAAgB,CAAA,CAC3C;;;AAIX,MAAM,4BAA4B,EAChC,eAGI;AACJ,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EACZ;EACG,CAAA;;AAIV,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;AACJ,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;IACpC,CAAA,CACE;;EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA;EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAmC;GAAsB,CAAA;EACxE,EAAA,CAAA"}

package/dist/components/money-saved-block.js

@@ -49,7 +49,7 @@ const MoneySavedGaugeContent = ({ autarkyProgress, autarkyLabel, autarkyCaption
 			children: [/* @__PURE__ */ jsx("path", {
 				d: gaugeArcPath,
 				fill: "none",
-				stroke: "var(--gray-a5)",
+				stroke: "var(--neutral-a5)",
 				strokeWidth: gaugeStrokeWidth,
 				strokeLinecap: "round",
 				pathLength: 1