@seekalfred/primitives 0.7.1 → 0.7.3

package/dist/lib/use-copy-feedback.js

@@ -1,5 +1,18 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/lib/use-copy-feedback.ts
+/**
+* Runs a consumer's callback so that a throw inside it cannot reject the
+* promise our press handler fires and forgets (an unhandled rejection). The
+* error is reported the way an uncaught one would be, so it still shows up.
+*/
+function callSafely(callback) {
+	try {
+		callback();
+	} catch (error) {
+		if (typeof globalThis.reportError === "function") globalThis.reportError(error);
+		else console.error(error);
+	}
+}
 /** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */
 function useCopyFeedback(duration = 1900) {
 	const [state, setState] = useState("idle");
@@ -14,16 +27,17 @@ function useCopyFeedback(duration = 1900) {
 	}, []);
 	return {
 		state,
-		copy: useCallback(async (value) => {
+		copy: useCallback(async (value, onError) => {
 			if (timeout.current) clearTimeout(timeout.current);
 			try {
 				await navigator.clipboard.writeText(value);
 				setState("copied");
 				timeout.current = setTimeout(reset, duration);
 				return true;
-			} catch {
+			} catch (error) {
 				setState("error");
 				timeout.current = setTimeout(reset, duration);
+				callSafely(() => onError?.(error));
 				return false;
 			}
 		}, [duration, reset]),
@@ -31,6 +45,6 @@ function useCopyFeedback(duration = 1900) {
 	};
 }
 //#endregion
-export { useCopyFeedback };
+export { callSafely, useCopyFeedback };
 
 //# sourceMappingURL=use-copy-feedback.js.map

package/dist/lib/use-copy-feedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-copy-feedback.js","names":[],"sources":["../../src/lib/use-copy-feedback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type CopyFeedbackState = \"idle\" | \"copied\" | \"error\";\n\n/** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */\nexport function useCopyFeedback(duration = 1900) {\n  const [state, setState] = useState<CopyFeedbackState>(\"idle\");\n  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const reset = useCallback(() => {\n    if (timeout.current) clearTimeout(timeout.current);\n    timeout.current = null;\n    setState(\"idle\");\n  }, []);\n\n  useEffect(\n    () => () => {\n      if (timeout.current) clearTimeout(timeout.current);\n    },\n    [],\n  );\n\n  /** Resolves true if the text reached the clipboard. */\n  const copy = useCallback(\n    async (value: string) => {\n      if (timeout.current) clearTimeout(timeout.current);\n      try {\n        await navigator.clipboard.writeText(value);\n        setState(\"copied\");\n        timeout.current = setTimeout(reset, duration);\n        return true;\n      } catch {\n        setState(\"error\");\n        timeout.current = setTimeout(reset, duration);\n        return false;\n      }\n    },\n    [duration, reset],\n  );\n\n  return { state, copy, reset };\n}\n"],"mappings":";;;AAKA,SAAgB,gBAAgB,WAAW,MAAM;CAC/C,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,UAAU,OAA6C,IAAI;CAEjE,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;EACjD,QAAQ,UAAU;EAClB,SAAS,MAAM;CACjB,GAAG,CAAC,CAAC;CAEL,sBACc;EACV,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;CACnD,GACA,CAAC,CACH;CAoBA,OAAO;EAAE;EAAO,MAjBH,YACX,OAAO,UAAkB;GACvB,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;GACjD,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,SAAS,QAAQ;IACjB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT,QAAQ;IACN,SAAS,OAAO;IAChB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT;EACF,GACA,CAAC,UAAU,KAAK,CAGC;EAAG;CAAM;AAC9B"}
+{"version":3,"file":"use-copy-feedback.js","names":[],"sources":["../../src/lib/use-copy-feedback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type CopyFeedbackState = \"idle\" | \"copied\" | \"error\";\n\n/**\n * Runs a consumer's callback so that a throw inside it cannot reject the\n * promise our press handler fires and forgets (an unhandled rejection). The\n * error is reported the way an uncaught one would be, so it still shows up.\n */\nexport function callSafely(callback: () => void) {\n  try {\n    callback();\n  } catch (error) {\n    if (typeof globalThis.reportError === \"function\") globalThis.reportError(error);\n    else console.error(error);\n  }\n}\n\n/** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */\nexport function useCopyFeedback(duration = 1900) {\n  const [state, setState] = useState<CopyFeedbackState>(\"idle\");\n  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const reset = useCallback(() => {\n    if (timeout.current) clearTimeout(timeout.current);\n    timeout.current = null;\n    setState(\"idle\");\n  }, []);\n\n  useEffect(\n    () => () => {\n      if (timeout.current) clearTimeout(timeout.current);\n    },\n    [],\n  );\n\n  /** Resolves true if the text reached the clipboard. `onError` gets whatever the clipboard rejected with. */\n  const copy = useCallback(\n    async (value: string, onError?: (error: unknown) => void) => {\n      if (timeout.current) clearTimeout(timeout.current);\n      try {\n        await navigator.clipboard.writeText(value);\n        setState(\"copied\");\n        timeout.current = setTimeout(reset, duration);\n        return true;\n      } catch (error) {\n        setState(\"error\");\n        timeout.current = setTimeout(reset, duration);\n        callSafely(() => onError?.(error));\n        return false;\n      }\n    },\n    [duration, reset],\n  );\n\n  return { state, copy, reset };\n}\n"],"mappings":";;;;;;;AASA,SAAgB,WAAW,UAAsB;CAC/C,IAAI;EACF,SAAS;CACX,SAAS,OAAO;EACd,IAAI,OAAO,WAAW,gBAAgB,YAAY,WAAW,YAAY,KAAK;OACzE,QAAQ,MAAM,KAAK;CAC1B;AACF;;AAGA,SAAgB,gBAAgB,WAAW,MAAM;CAC/C,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,UAAU,OAA6C,IAAI;CAEjE,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;EACjD,QAAQ,UAAU;EAClB,SAAS,MAAM;CACjB,GAAG,CAAC,CAAC;CAEL,sBACc;EACV,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;CACnD,GACA,CAAC,CACH;CAqBA,OAAO;EAAE;EAAO,MAlBH,YACX,OAAO,OAAe,YAAuC;GAC3D,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;GACjD,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,SAAS,QAAQ;IACjB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT,SAAS,OAAO;IACd,SAAS,OAAO;IAChB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,iBAAiB,UAAU,KAAK,CAAC;IACjC,OAAO;GACT;EACF,GACA,CAAC,UAAU,KAAK,CAGC;EAAG;CAAM;AAC9B"}

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

@@ -1,2 +1,2 @@
-import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartSeries } from "./line-chart.js";
-export { LINE_CHART_DRAW_MS, LineChart, type LineChartDatum, type LineChartProps, type LineChartSeries };
+import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartReference, LineChartSeries } from "./line-chart.js";
+export { LINE_CHART_DRAW_MS, LineChart, type LineChartDatum, type LineChartProps, type LineChartReference, type LineChartSeries };

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

@@ -34,9 +34,36 @@ export interface LineChartDatum {
   label: string;
   /** Short label on the x axis. Leave it out to keep the axis quiet at that point. */
   axisLabel?: string;
-  /** One value per series key. A missing value counts as zero. */
-  values: Record<string, number | undefined>;
+  /**
+   * One value per series key. A missing value (`undefined` or `null`) counts as
+   * zero, unless the chart's `missing` is `"gap"`.
+   */
+  values: Record<string, number | null | undefined>;
 }
+/**
+ * A reference line: a horizontal line at a value (a target, a threshold), or a
+ * vertical line at one datum (today, a launch). Drawn dashed and quiet, behind
+ * the series, with its label at the line's end.
+ */
+export type LineChartReference = {
+  /** Stable identity. */
+  key: string;
+  /** Short text beside the line, such as "Target" or "Today". Also read to screen readers. */
+  label: string;
+} & ({
+  /**
+   * A value on the value axis: a horizontal line. The scale grows to keep it
+   * in view, even when every value is missing. A value that is not finite
+   * draws nothing. Read with `formatValue` (given the chart's first series)
+   * and `unit`, like the series.
+   */
+  value: number;
+  at?: never;
+} | {
+  /** The `key` of a datum: a vertical line at that point. A key not in `data` draws nothing. */
+  at: string;
+  value?: never;
+});
 export interface LineChartProps {
   data: LineChartDatum[];
   series: LineChartSeries[];
@@ -66,6 +93,19 @@ export interface LineChartProps {
   categoryLabel?: string;
   /** Smooth monotone curves that never swing past the data, or straight segments. @default "smooth" */
   curve?: "smooth" | "linear";
+  /**
+   * How a missing value (`undefined`, `null` or not a finite number) is drawn.
+   * `"zero"` counts it as zero, as before. `"gap"` breaks the line (and its
+   * area) there, leaves it out of the scale, hides the crosshair dot on it and
+   * reads it as `missingLabel` in the tooltip and the data table. A point with
+   * missing neighbours on both sides is drawn as a dot.
+   * @default "zero"
+   */
+  missing?: "zero" | "gap";
+  /** Read in place of a missing value when `missing` is `"gap"`. @default "No data" */
+  missingLabel?: string;
+  /** Reference lines: targets at a value, or markers such as "today" at a datum. */
+  references?: LineChartReference[];
   /** Extra classes for the root. Merged last. */
   className?: string;
 }

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

@@ -88,6 +88,61 @@ function curveFor(values, smooth) {
 	points.push([1, values[last]]);
 	return points;
 }
+/** Fills each missing value straight between its present neighbours (or with the nearest one at the ends), so a gapped line still has a shape to morph. */
+function fillGaps(values) {
+	const present = values.flatMap((value, index) => value === null ? [] : [index]);
+	if (!present.length) return values.map(() => 0);
+	return values.map((value, index) => {
+		if (value !== null) return value;
+		const after = present.find((at) => at > index);
+		const before = [...present].reverse().find((at) => at < index);
+		if (before === void 0) return values[after];
+		if (after === void 0) return values[before];
+		return values[before] + (values[after] - values[before]) * (index - before) / (after - before);
+	});
+}
+/** Where a line with missing values is not drawn: before its first value, after its last, and between two values with missing ones between them. */
+function breaksFor(values) {
+	const present = values.flatMap((value, index) => value === null ? [] : [index]);
+	if (!present.length) return values.length ? [[-Infinity, Infinity]] : [];
+	const last = values.length - 1;
+	if (last === 0) return [];
+	const breaks = [];
+	if (present[0] > 0) breaks.push([-Infinity, present[0] / last]);
+	for (let at = 1; at < present.length; at++) if (present[at] - present[at - 1] > 1) breaks.push([present[at - 1] / last, present[at] / last]);
+	if (present[present.length - 1] < last) breaks.push([present[present.length - 1] / last, Infinity]);
+	return breaks;
+}
+const EDGE = 1e-9;
+/** Radius of a lone point's dot, inside its 2px stroke. */
+const DOT = 1.5;
+const inBreak = (breaks, x) => breaks.some(([from, to]) => x > from + EDGE && x < to - EDGE);
+/** The drawn runs of a line, split at its gaps. A run of one point is a dot: a small closed circle the stroke fills out to about 5px. */
+function pathsFor(shape, breaks, toX, toY, bottom) {
+	const runs = [];
+	let run = null;
+	for (const [x, value] of shape) {
+		if (breaks.length && inBreak(breaks, x)) {
+			run = null;
+			continue;
+		}
+		if (!run) runs.push(run = []);
+		run.push(`${toX(x).toFixed(1)},${toY(value).toFixed(1)}`);
+	}
+	return {
+		line: runs.map((points) => {
+			if (points.length > 1) return `M${points.join("L")}`;
+			const [x, y] = points[0].split(",").map(Number);
+			return `M${(x - DOT).toFixed(1)},${y.toFixed(1)}a${DOT},${DOT} 0 1,0 ${DOT * 2},0a${DOT},${DOT} 0 1,0 -3,0`;
+		}).join(""),
+		area: runs.map((points) => {
+			const first = points[0].split(",")[0];
+			const lastX = points[points.length - 1].split(",")[0];
+			return `M${points.join("L")}L${lastX},${bottom}L${first},${bottom}Z`;
+		}).join("")
+	};
+}
+const isFiniteValue = (reference) => typeof reference.value === "number" && Number.isFinite(reference.value);
 /** Value of a sampled line at x, straight between samples. */
 function valueAt(shape, x) {
 	if (!shape.length) return 0;
@@ -112,7 +167,7 @@ function axisPicks(data, width) {
 	const stride = Math.ceil(labeled.length / room);
 	return labeled.reverse().filter((_, rank) => rank % stride === 0).reverse();
 }
-const LineChart = forwardRef(function LineChart({ data, series, label, unit = "", height = 220, formatValue, formatTick = (value) => COMPACT.format(value), hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, onActiveChange, loading = false, emptyLabel = "No data for this range", legend, categoryLabel = "Date", curve = "smooth", className }, ref) {
+const LineChart = forwardRef(function LineChart({ data, series, label, unit = "", height = 220, formatValue, formatTick = (value) => COMPACT.format(value), hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, onActiveChange, loading = false, emptyLabel = "No data for this range", legend, categoryLabel = "Date", curve = "smooth", missing = "zero", missingLabel = "No data", references, className }, ref) {
 	const figure = useRef(null);
 	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
 	const plot = useRef(null);
@@ -131,15 +186,33 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 	};
 	const visible = series.filter((line) => !hidden.includes(line.key));
 	const showLegend = legend ?? series.length > 1;
-	const signature = `${curve}|${series.map((line) => line.key).join(",")}|${data.map((item) => `${item.key}:${series.map((line) => item.values[line.key] ?? 0).join(",")}`).join(";")}`;
-	const targets = useMemo(() => new Map(series.map((line) => [line.key, curveFor(data.map((item) => item.values[line.key] ?? 0), curve === "smooth")])), [signature]);
+	const gaps = missing === "gap";
+	const read = (item, key) => {
+		const value = item.values[key];
+		if (!gaps) return value ?? 0;
+		return typeof value === "number" && Number.isFinite(value) ? value : null;
+	};
+	const signature = `${curve}|${missing}|${series.map((line) => line.key).join(",")}|${data.map((item) => `${item.key}:${series.map((line) => read(item, line.key)).join(",")}`).join(";")}`;
+	const targets = useMemo(() => new Map(series.map((line) => {
+		const values = data.map((item) => read(item, line.key));
+		return [line.key, {
+			shape: curveFor(fillGaps(values), curve === "smooth"),
+			breaks: breaksFor(values)
+		}];
+	})), [signature]);
 	let low = Infinity;
 	let high = -Infinity;
 	for (const line of visible) for (const item of data) {
-		const value = item.values[line.key] ?? 0;
+		const value = read(item, line.key);
+		if (value === null) continue;
 		low = Math.min(low, value);
 		high = Math.max(high, value);
 	}
+	for (const reference of references ?? []) {
+		if (!isFiniteValue(reference)) continue;
+		low = Math.min(low, reference.value);
+		high = Math.max(high, reference.value);
+	}
 	const range = Number.isFinite(low) ? niceScale(low, high) : null;
 	const [steady, setSteady] = useState(() => range ?? niceScale(0, 100));
 	if (range && (range.min !== steady.min || range.max !== steady.max)) setSteady(range);
@@ -160,6 +233,12 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 		max: steady.max
 	});
 	const cursor = useRef(1);
+	const referenceAt = (reference) => {
+		if (typeof reference.value === "number") return isFiniteValue(reference) ? null : void 0;
+		const at = data.findIndex((item) => item.key === reference.at);
+		return at < 0 ? void 0 : last > 0 ? at / last : .5;
+	};
+	const drawnReferences = (references ?? []).filter((reference) => referenceAt(reference) !== void 0);
 	const live = useRef({
 		series,
 		hidden
@@ -185,17 +264,26 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 			if (!track) continue;
 			const p = track.presence;
 			const y = (value) => toY(lo + (value - lo) * p);
-			const path = track.shape.length ? `M${track.shape.map(([x, value]) => `${(x * w).toFixed(1)},${y(value).toFixed(1)}`).join("L")}` : "";
 			const group = root.querySelector(`[data-series="${CSS.escape(line.key)}"]`);
-			group?.querySelector("[data-part=line]")?.setAttribute("d", path);
-			group?.querySelector("[data-part=area]")?.setAttribute("d", path ? `${path}L${w},${height}L0,${height}Z` : "");
+			if (track.breaks.length) {
+				const paths = pathsFor(track.shape, track.breaks, (x) => x * w, y, height);
+				group?.querySelector("[data-part=line]")?.setAttribute("d", paths.line);
+				group?.querySelector("[data-part=area]")?.setAttribute("d", paths.area);
+			} else {
+				const path = track.shape.length ? `M${track.shape.map(([x, value]) => `${(x * w).toFixed(1)},${y(value).toFixed(1)}`).join("L")}` : "";
+				group?.querySelector("[data-part=line]")?.setAttribute("d", path);
+				group?.querySelector("[data-part=area]")?.setAttribute("d", path ? `${path}L${w},${height}L0,${height}Z` : "");
+			}
 			if (group) group.style.opacity = String(p);
 			const dot = root.querySelector(`[data-dot="${CSS.escape(line.key)}"]`);
 			if (dot && track.shape.length) {
+				const gap = inBreak(track.breaks, at);
 				const cy = y(valueAt(track.shape, at));
 				dot.setAttribute("cx", (at * w).toFixed(1));
 				dot.setAttribute("cy", cy.toFixed(1));
-				if (p > .5) dotYs.push(cy);
+				if (gap) dot.setAttribute("data-gap", "");
+				else dot.removeAttribute("data-gap");
+				if (p > .5 && !gap) dotYs.push(cy);
 			}
 		}
 		for (const node of root.querySelectorAll("[data-grid]")) {
@@ -204,6 +292,20 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 			node.setAttribute("y2", yy);
 		}
 		for (const node of gutter.current?.querySelectorAll("[data-tick]") ?? []) node.style.translate = `0 ${Math.round(toY(Number(node.dataset.tick)))}px`;
+		for (const node of root.querySelectorAll("[data-reference-value]")) {
+			const yy = String(Math.round(toY(Number(node.dataset.referenceValue))) + .5);
+			node.setAttribute("y1", yy);
+			node.setAttribute("y2", yy);
+		}
+		for (const node of root.querySelectorAll("[data-reference-at]")) {
+			const xx = String(Math.round(Number(node.dataset.referenceAt) * w) + .5);
+			node.setAttribute("x1", xx);
+			node.setAttribute("x2", xx);
+		}
+		for (const node of plot.current?.querySelectorAll("[data-reference-label]") ?? []) {
+			const { referenceValue, referenceAt } = node.dataset;
+			node.style.translate = referenceValue !== void 0 ? `0 ${Math.round(toY(Number(referenceValue)))}px` : `${Math.round(Number(referenceAt) * w)}px 0`;
+		}
 		const cx = Math.round(at * w) + .5;
 		const cross = root.querySelector("[data-part=crosshair]");
 		cross?.setAttribute("x1", String(cx));
@@ -235,16 +337,18 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 	useIsomorphicLayoutEffect(paint);
 	useEffect(() => {
 		const moves = [];
-		for (const [key, target] of targets) {
+		for (const [key, { shape: target, breaks }] of targets) {
 			const track = tracks.current.get(key);
 			if (!track) {
 				tracks.current.set(key, {
 					shape: target,
+					breaks,
 					presence: live.current.hidden.includes(key) ? 0 : 1,
 					stop: null
 				});
 				continue;
 			}
+			track.breaks = breaks;
 			if (!track.shape.length || !target.length) {
 				track.shape = target;
 				continue;
@@ -375,11 +479,13 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 	const onPointerMove = (event) => {
 		if (!empty && (event.pointerType === "mouse" || event.buttons)) setActive(pointAt(event.clientX));
 	};
-	const format = (value, line) => `${formatValue ? formatValue(value, line) : GROUPED.format(value)}${unit ? ` ${unit}` : ""}`;
+	const formatNumber = (value, line) => `${formatValue ? formatValue(value, line) : GROUPED.format(value)}${unit ? ` ${unit}` : ""}`;
+	const format = (value, line) => value === null ? missingLabel : formatNumber(value, line);
+	const formatReference = (value) => series[0] ? formatNumber(value, series[0]) : `${GROUPED.format(value)}${unit ? ` ${unit}` : ""}`;
 	const reading = index === null ? null : data[index];
 	const shown = reading ?? data[last];
-	const valueText = reading ? `${reading.label}: ${visible.map((line) => `${line.label} ${format(reading.values[line.key] ?? 0, line)}`).join(", ")}` : empty ? emptyLabel : `${visible.length} of ${series.length} series shown`;
-	const summary = empty ? `${label}. ${emptyLabel}.` : `${label}, ${data[0].label} to ${data[last].label}. ${visible.map((line) => `${line.label}, latest ${format(data[last].values[line.key] ?? 0, line)}`).join(". ")}.`;
+	const valueText = reading ? `${reading.label}: ${visible.map((line) => `${line.label} ${format(read(reading, line.key), line)}`).join(", ")}` : empty ? emptyLabel : `${visible.length} of ${series.length} series shown`;
+	const summary = empty ? `${label}. ${emptyLabel}.` : `${label}, ${data[0].label} to ${data[last].label}. ${visible.map((line) => `${line.label}, latest ${format(read(data[last], line.key), line)}`).join(". ")}.${drawnReferences.map((reference) => typeof reference.value === "number" ? ` ${reference.label}: ${formatReference(reference.value)}.` : ` ${reference.label}: ${data.find((item) => item.key === reference.at).label}.`).join("")}`;
 	const picks = axisPicks(data, plotWidth);
 	const allHidden = !empty && visible.length === 0;
 	return /* @__PURE__ */ jsxs("figure", {
@@ -477,6 +583,19 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 										y1: height - .5,
 										y2: height - .5
 									}),
+									drawnReferences.map((reference) => typeof reference.value === "number" ? /* @__PURE__ */ jsx("line", {
+										"data-reference": reference.key,
+										"data-reference-value": reference.value,
+										className: "line-chart-reference",
+										x1: 0,
+										x2: "100%"
+									}, reference.key) : /* @__PURE__ */ jsx("line", {
+										"data-reference": reference.key,
+										"data-reference-at": referenceAt(reference),
+										className: "line-chart-reference",
+										y1: 8,
+										y2: height
+									}, reference.key)),
 									/* @__PURE__ */ jsx("line", {
 										"data-part": "crosshair",
 										className: "line-chart-crosshair",
@@ -508,6 +627,16 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 									}, line.key))
 								]
 							}),
+							drawnReferences.map((reference) => /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-slot": "line-chart-reference-label",
+								"data-reference-label": reference.key,
+								"data-reference-value": typeof reference.value === "number" ? reference.value : void 0,
+								"data-reference-at": typeof reference.value === "number" ? void 0 : referenceAt(reference),
+								"data-axis": typeof reference.value === "number" ? "value" : "category",
+								className: "line-chart-reference-label",
+								children: reference.label
+							}, reference.key)),
 							/* @__PURE__ */ jsxs("div", {
 								ref: tip,
 								"aria-hidden": "true",
@@ -530,7 +659,7 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 										}),
 										/* @__PURE__ */ jsx("span", {
 											className: "ms-2 flex-none whitespace-nowrap font-medium tabular-nums text-foreground",
-											children: format(shown?.values[line.key] ?? 0, line)
+											children: shown ? format(read(shown, line.key), line) : format(0, line)
 										})
 									]
 								}, line.key))]
@@ -593,7 +722,7 @@ const LineChart = forwardRef(function LineChart({ data, series, label, unit = ""
 					/* @__PURE__ */ jsx("tbody", { children: data.map((item) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
 						scope: "row",
 						children: item.label
-					}), series.map((line) => /* @__PURE__ */ jsx("td", { children: format(item.values[line.key] ?? 0, line) }, line.key))] }, item.key)) })
+					}), series.map((line) => /* @__PURE__ */ jsx("td", { children: format(read(item, line.key), line) }, line.key))] }, item.key)) })
 				] })
 			}),
 			/* @__PURE__ */ jsx("p", {