@mechane-ai/elements 0.5.1 → 0.7.0

package/dist/charts/cartesian.js

@@ -1,9 +1,9 @@
-import { i as e, n as t, r as n, t as r } from "../categorical-values-BfAEQUd0.js";
-import { a as i, i as a, n as o, o as s, r as c, t as l } from "../chart-frame-bX0VLC_W.js";
-import { n as u, r as d, t as f } from "../chart-input--VSrlMl-.js";
+import { i as e, n as t, r as n, t as r } from "../categorical-values-75J0TUkR.js";
+import { a as i, i as a, n as o, o as s, r as c, t as l } from "../chart-frame--DOsZKwP.js";
+import { n as u, r as d, t as f } from "../chart-input-C-g586YE.js";
 import { t as p } from "../plot-width--OgdohB5.js";
-import { b as m } from "../src-CbYaLvhD.js";
-import { h } from "../src-CjnbzSgq.js";
+import { b as m } from "../src-BkCsvZGi.js";
+import { h } from "../src-DjTM64tN.js";
 import { colors as g } from "../tokens.js";
 import * as _ from "@stylexjs/stylex";
 import { useEffect as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
@@ -14,8 +14,8 @@ import { AreaClosed as O, Bar as k, LinePath as A } from "@visx/shape";
 var ee = { plot: {
 	kqGvvJ: "x1we84gm",
 	$$css: !0
-} };
-function j({ categories: e, series: n, domain: r, mode: i }) {
+} }, j = /* @__PURE__ */ new Set(["Enter", " "]);
+function M({ categories: e, series: n, domain: r, mode: i }) {
 	if (e.length > t.items || n.length > t.series) return `Choose a window with at most ${t.items} categories and ${t.series} series.`;
 	if (!d(r) || r[0] > 0 || r[1] < 0) return "The bar domain must be finite, increasing, and include zero.";
 	if (!u(e) || !u(n)) return "Bar categories and series require unique identifiers.";
@@ -28,92 +28,154 @@ function j({ categories: e, series: n, domain: r, mode: i }) {
 	}
 	if (i === "stacked" && e.some((e, t) => n.reduce((e, n) => e + (n.values[t] ?? 0), 0) > r[1])) return "Stacked bar totals must fit the supplied domain.";
 }
-function M({ title: e, description: t, categories: o, series: u, domain: d, mode: m = "grouped", formatValue: h, selection: g, height: v = 200 }) {
-	let y = j({
+function N({ title: e, description: t, categories: o, series: u, domain: d, mode: m = "grouped", formatValue: h, selection: g, height: v = 200 }) {
+	let b = M({
 		categories: o,
 		series: u,
 		domain: d,
 		mode: m
-	}), { ref: b, width: x } = p();
-	if (y !== void 0 || !Number.isFinite(v) || v < 48) return /* @__PURE__ */ w(f, {
+	}), { ref: x, width: O } = p(), A = y(), [N, P] = S(), F = o.findIndex((e) => e.id === N?.id), I = o[F];
+	if (b !== void 0 || !Number.isFinite(v) || v < 48) return /* @__PURE__ */ w(f, {
 		title: e,
 		description: t,
-		message: y ?? "Chart height must be at least 48 pixels."
+		message: b ?? "Chart height must be at least 48 pixels."
 	});
-	let S = v - 28, C = D({
+	let L = v - 28, R = D({
 		domain: [...d],
-		range: [S, 12]
-	}), O = Math.max(52, ...C.ticks(3).map((e) => h(e).length * 7 + 12)), A = Math.max(O + 1, x - 16), M = E({
+		range: [L, 12]
+	}), z = Math.max(52, ...R.ticks(3).map((e) => h(e).length * 7 + 12)), B = Math.max(z + 1, O - 16), V = E({
 		domain: o.map((e) => e.id),
-		range: [O, A],
+		range: [z, B],
 		padding: .3
-	}), N = E({
+	}), H = E({
 		domain: u.map((e) => e.id),
-		range: [0, M.bandwidth()],
+		range: [0, V.bandwidth()],
 		padding: .08
-	}), P = Math.max(1, Math.ceil(56 / M.step())), F = Math.max(1, Math.floor(M.step() * P / 12) - 1), I = u.map((e, t) => ({
+	}), U = Math.min(120, Math.max(40, ...o.map((e) => (e.axisLabel ?? e.label).length * 7))), W = Math.max(1, Math.ceil((U + 16) / V.step())), G = Math.max(1, Math.floor((V.step() * W - 16) / 7)), K = u.map((e, t) => ({
 		id: e.id,
 		label: e.label,
 		tone: n(e.tone, t)
 	}));
+	function q(e) {
+		let t = e.currentTarget.getBoundingClientRect(), n = (e.clientX - t.left) / t.width * O, r = Math.floor((n - z) / V.step()), i = o[Math.max(0, Math.min(o.length - 1, r))];
+		i !== void 0 && P({
+			id: i.id,
+			source: "pointer"
+		});
+	}
+	function J(e) {
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		if (e.key === "Escape") {
+			e.preventDefault(), e.stopPropagation(), P(void 0);
+			return;
+		}
+		if (j.has(e.key)) {
+			I !== void 0 && g !== void 0 && (e.preventDefault(), g.onSelect(I.id));
+			return;
+		}
+		let t = {
+			ArrowRight: Math.min(o.length - 1, F + 1),
+			ArrowLeft: Math.max(0, F - 1),
+			Home: 0,
+			End: o.length - 1
+		}[e.key], n = t === void 0 ? void 0 : o[t];
+		n !== void 0 && (e.preventDefault(), P({
+			id: n.id,
+			source: "keyboard"
+		}));
+	}
 	return /* @__PURE__ */ T(c, {
 		title: e,
 		description: t,
 		children: [
-			/* @__PURE__ */ w(a, { items: I }),
+			/* @__PURE__ */ w(a, { items: K }),
 			/* @__PURE__ */ w("div", {
-				ref: b,
+				ref: x,
 				..._.props(i.plot, ee.plot),
 				children: o.length === 0 || u.length === 0 ? /* @__PURE__ */ w("p", {
 					className: "x153jb6y x1ghz6dp xy8obcc",
 					children: "No categories"
 				}) : /* @__PURE__ */ T("svg", {
 					role: "img",
-					"aria-label": e,
-					viewBox: `0 0 ${x} ${v}`,
+					"aria-label": `${e}. Use arrow keys to inspect categories.${g === void 0 ? "" : " Press Enter to select."}`,
+					"aria-describedby": A,
+					tabIndex: 0,
+					viewBox: `0 0 ${O} ${v}`,
 					height: v,
-					..._.props(i.svg),
-					children: [C.ticks(3).map((e) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w("line", {
-						x1: O,
-						x2: A,
-						y1: C(e),
-						y2: C(e),
-						..._.props(i.grid)
-					}), /* @__PURE__ */ w("text", {
-						x: O - 8,
-						y: C(e),
-						textAnchor: "end",
-						dominantBaseline: "middle",
-						..._.props(i.label),
-						children: h(e)
-					})] }, e)), o.map((e, t) => /* @__PURE__ */ T("g", { children: [u.map((r, a) => {
-						let o = r.values[t];
-						if (o == null) return null;
-						let c = m === "stacked" ? u.slice(0, a).reduce((e, n) => e + (n.values[t] ?? 0), 0) : 0, l = C(c), d = C(c + o);
-						return /* @__PURE__ */ w(k, {
-							x: (M(e.id) ?? O) + (m === "stacked" ? 0 : N(r.id) ?? 0),
-							y: Math.min(l, d),
-							width: m === "stacked" ? M.bandwidth() : N.bandwidth(),
-							height: Math.max(+(o === 0), Math.abs(d - l)),
-							fill: s[n(r.tone, a)],
-							..._.props(g?.selectedId === e.id && i.selected),
-							children: /* @__PURE__ */ T("title", { children: [
-								e.label,
-								" · ",
-								r.label,
-								": ",
-								h(o)
-							] })
-						}, r.id);
-					}), t % P === 0 && /* @__PURE__ */ w("text", {
-						x: (M(e.id) ?? O) + M.bandwidth() / 2,
-						y: v - 4,
-						textAnchor: "middle",
-						..._.props(i.label),
-						children: e.label.length > F ? `${e.label.slice(0, F)}…` : e.label
-					})] }, e.id))]
+					onKeyDown: J,
+					onPointerMove: (e) => {
+						e.pointerType === "mouse" && q(e);
+					},
+					onPointerDown: q,
+					onPointerLeave: (e) => {
+						e.pointerType === "mouse" && N?.source === "pointer" && P(void 0);
+					},
+					onBlur: () => P(void 0),
+					onClick: () => {
+						I !== void 0 && g?.onSelect(I.id);
+					},
+					..._.props(i.svg, i.focus),
+					children: [
+						I !== void 0 && /* @__PURE__ */ w("rect", {
+							x: (V(I.id) ?? z) - (V.step() - V.bandwidth()) / 2,
+							y: 12,
+							width: V.step(),
+							height: L - 12,
+							className: "x2wnxhi"
+						}),
+						R.ticks(3).map((e) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w("line", {
+							x1: z,
+							x2: B,
+							y1: R(e),
+							y2: R(e),
+							..._.props(i.grid)
+						}), /* @__PURE__ */ w("text", {
+							x: z - 8,
+							y: R(e),
+							textAnchor: "end",
+							dominantBaseline: "middle",
+							..._.props(i.label),
+							children: h(e)
+						})] }, e)),
+						o.map((e, t) => {
+							let r = e.axisLabel ?? e.label;
+							return /* @__PURE__ */ T("g", { children: [u.map((r, a) => {
+								let o = r.values[t];
+								if (o == null) return null;
+								let c = m === "stacked" ? u.slice(0, a).reduce((e, n) => e + (n.values[t] ?? 0), 0) : 0, l = R(c), d = R(c + o), f = g?.selectedId === e.id || I?.id === e.id;
+								return /* @__PURE__ */ w(k, {
+									x: (V(e.id) ?? z) + (m === "stacked" ? 0 : H(r.id) ?? 0),
+									y: Math.min(l, d),
+									width: m === "stacked" ? V.bandwidth() : H.bandwidth(),
+									height: Math.max(+(o === 0), Math.abs(d - l)),
+									fill: s[n(r.tone, a)],
+									..._.props(f && i.selected)
+								}, r.id);
+							}), t % W === 0 && /* @__PURE__ */ w("text", {
+								x: (V(e.id) ?? z) + V.bandwidth() / 2,
+								y: v - 4,
+								textAnchor: "middle",
+								..._.props(i.label),
+								children: r.length > G ? `${r.slice(0, G - 1)}…` : r
+							})] }, e.id);
+						})
+					]
 				})
 			}),
+			o.length > 0 && u.length > 0 && /* @__PURE__ */ w("div", {
+				id: A,
+				"aria-live": N?.source === "keyboard" ? "polite" : "off",
+				className: "x78zum5 x1a02dak x1n8ia3y x1mqbd49 xy8obcc xas2l8k xss6m8b",
+				children: I === void 0 ? /* @__PURE__ */ w("span", {
+					className: "x153jb6y x1ghz6dp xy8obcc",
+					children: "Point, tap, or use the arrow keys to inspect values."
+				}) : /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("span", { children: I.label }), u.map((e) => /* @__PURE__ */ T("span", { children: [
+					e.label,
+					":",
+					" ",
+					e.values[F] === null || e.values[F] === void 0 ? "Unavailable" : h(e.values[F])
+				] }, e.id))] })
+			}),
 			/* @__PURE__ */ w(l, { children: /* @__PURE__ */ w(r, {
 				items: o.map((e, t) => ({
 					id: e.id,
@@ -127,12 +189,12 @@ function M({ title: e, description: t, categories: o, series: u, domain: d, mode
 	});
 }
 // packages/charts/src/cartesian/breakdown-bar.tsx
-var N = {
+var P = {
 	kzqmXN: "x5lhr3w",
 	kZKoxP: "x5yr21d",
 	$$css: !0
-}, P = { segment: (e, t) => [
-	N,
+}, F = { segment: (e, t) => [
+	P,
 	{
 		kWkggS: t == null ? t : "xl8spv7",
 		$$css: !0
@@ -142,7 +204,7 @@ var N = {
 		"--x-backgroundColor": t ?? void 0
 	}
 ] };
-function F({ title: t, description: i, items: a, total: o, formatValue: l, selection: u }) {
+function I({ title: t, description: i, items: a, total: o, formatValue: l, selection: u }) {
 	let d = e(a), p = a.reduce((e, t) => e + (t.value ?? 0), 0), m = 2 ** -52 * Math.max(p, o, 1) * a.length;
 	return d === void 0 ? !Number.isFinite(o) || o < 0 || p - o > m ? /* @__PURE__ */ w(f, {
 		title: t,
@@ -158,7 +220,7 @@ function F({ title: t, description: i, items: a, total: o, formatValue: l, selec
 			/* @__PURE__ */ w("div", {
 				"aria-hidden": !0,
 				className: "x78zum5 x170jfvy xb3r6kr x1r7kqkb xmkeg23 x1y0btm7 x1ey3b81 x1jfksii",
-				children: a.map((e, t) => e.value === null ? null : /* @__PURE__ */ w("span", { ..._.props(P.segment(o === 0 ? 0 : e.value / o * 100, s[n(e.tone, t)])) }, e.id))
+				children: a.map((e, t) => e.value === null ? null : /* @__PURE__ */ w("span", { ..._.props(F.segment(o === 0 ? 0 : e.value / o * 100, s[n(e.tone, t)])) }, e.id))
 			}),
 			/* @__PURE__ */ w(r, {
 				items: a.map((e, t) => ({
@@ -186,12 +248,12 @@ function F({ title: t, description: i, items: a, total: o, formatValue: l, selec
 	});
 }
 // packages/charts/src/cartesian/scatter-plot.tsx
-var I = 260, L = 56, R = 20, z = 12, B = 1e3, V = {
+var L = 260, R = 56, z = 20, B = 12, V = 1e3, H = {
 	kzqmXN: "x1xc55vz",
 	kZKoxP: "xdk7pt",
 	kaIpWk: "x16rqkct",
 	$$css: !0
-}, H = {
+}, U = {
 	brush: {
 		kFalU9: "xx69xxh",
 		kkrTdU: "xsid9ct",
@@ -228,7 +290,7 @@ var I = 260, L = 56, R = 20, z = 12, B = 1e3, V = {
 		"--x-top": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(t)
 	}],
 	dot: (e) => [
-		V,
+		H,
 		{
 			kWkggS: e == null ? e : "xl8spv7",
 			$$css: !0
@@ -243,8 +305,8 @@ var I = 260, L = 56, R = 20, z = 12, B = 1e3, V = {
 		$$css: !0
 	}
 };
-function U(e) {
-	let { title: t, description: n, points: r, xDomain: i, yDomain: a, xLabel: u, yLabel: d, formatX: m, formatY: h, selection: g, rangeSelection: v, emptyLabel: y } = e, { ref: b, width: x } = p(), S = K(e);
+function W(e) {
+	let { title: t, description: n, points: r, xDomain: i, yDomain: a, xLabel: u, yLabel: d, formatX: m, formatY: h, selection: g, rangeSelection: v, emptyLabel: y } = e, { ref: b, width: x } = p(), S = q(e);
 	if (S !== null) return /* @__PURE__ */ w(f, {
 		title: t,
 		description: n,
@@ -252,10 +314,10 @@ function U(e) {
 	});
 	let C = D({
 		domain: [...i],
-		range: [L, Math.max(L, x - R)]
+		range: [R, Math.max(R, x - z)]
 	}), E = D({
 		domain: [...a],
-		range: [216, z]
+		range: [216, B]
 	});
 	return /* @__PURE__ */ T(c, {
 		title: t,
@@ -267,7 +329,7 @@ function U(e) {
 			}) : /* @__PURE__ */ T("div", {
 				ref: b,
 				className: "x1n2onr6 xeuugli",
-				children: [/* @__PURE__ */ w(W, {
+				children: [/* @__PURE__ */ w(G, {
 					width: x,
 					scaleX: C,
 					scaleY: E,
@@ -280,15 +342,15 @@ function U(e) {
 						"aria-label": `${e.label}, ${u}: ${m(e.x)}, ${d}: ${h(e.y)}`,
 						"aria-pressed": g.selectedId === e.id,
 						onClick: () => g.onSelect(e.id),
-						..._.props(H.target, H.location(C(e.x), E(e.y))),
+						..._.props(U.target, U.location(C(e.x), E(e.y))),
 						children: /* @__PURE__ */ w("span", {
 							"aria-hidden": !0,
-							..._.props(H.dot(s[e.tone]), g.selectedId === e.id && H.selected)
+							..._.props(U.dot(s[e.tone]), g.selectedId === e.id && U.selected)
 						})
 					}, e.id))
 				})]
 			}),
-			v !== void 0 && /* @__PURE__ */ w(G, {
+			v !== void 0 && /* @__PURE__ */ w(K, {
 				...e,
 				rangeSelection: v
 			}),
@@ -308,7 +370,7 @@ function U(e) {
 		]
 	});
 }
-function W({ width: e, scaleX: t, scaleY: n, points: r, xLabel: a, yLabel: o, formatX: c, formatY: l, selection: u, rangeSelection: d }) {
+function G({ width: e, scaleX: t, scaleY: n, points: r, xLabel: a, yLabel: o, formatX: c, formatY: l, selection: u, rangeSelection: d }) {
 	let f = y(), [p, m] = S(null), h = p === null ? d?.value : {
 		x: [Math.min(p.start.x, p.end.x), Math.max(p.start.x, p.end.x)],
 		y: [Math.min(p.start.y, p.end.y), Math.max(p.start.y, p.end.y)]
@@ -317,13 +379,13 @@ function W({ width: e, scaleX: t, scaleY: n, points: r, xLabel: a, yLabel: o, fo
 		let i = r.currentTarget.getBoundingClientRect();
 		return {
 			x: t.copy().clamp(!0).invert((r.clientX - i.left) / i.width * e),
-			y: n.copy().clamp(!0).invert((r.clientY - i.top) / i.height * I)
+			y: n.copy().clamp(!0).invert((r.clientY - i.top) / i.height * L)
 		};
 	}
 	function v(t) {
 		if (d === void 0 || t.button !== 0 || t.pointerType === "touch") return;
-		let n = t.currentTarget.getBoundingClientRect(), r = (t.clientX - n.left) / n.width * e, i = (t.clientY - n.top) / n.height * I;
-		if (r < L || r > e - R || i < z || i > 216) return;
+		let n = t.currentTarget.getBoundingClientRect(), r = (t.clientX - n.left) / n.width * e, i = (t.clientY - n.top) / n.height * L;
+		if (r < R || r > e - z || i < B || i > 216) return;
 		let a = g(t);
 		t.currentTarget.setPointerCapture(t.pointerId), m({
 			start: a,
@@ -347,29 +409,29 @@ function W({ width: e, scaleX: t, scaleY: n, points: r, xLabel: a, yLabel: o, fo
 	}
 	return /* @__PURE__ */ T("svg", {
 		width: e,
-		height: I,
-		viewBox: `0 0 ${e} ${I}`,
+		height: L,
+		viewBox: `0 0 ${e} ${L}`,
 		"aria-hidden": !0,
 		onPointerDown: v,
 		onPointerMove: b,
 		onPointerUp: x,
 		onPointerCancel: () => m(null),
 		onLostPointerCapture: () => m(null),
-		..._.props(i.svg, d !== void 0 && H.brush),
+		..._.props(i.svg, d !== void 0 && U.brush),
 		children: [
 			/* @__PURE__ */ w("defs", { children: /* @__PURE__ */ w("clipPath", {
 				id: f,
 				children: /* @__PURE__ */ w("rect", {
-					x: L,
-					y: z,
-					width: Math.max(0, e - L - R),
+					x: R,
+					y: B,
+					width: Math.max(0, e - R - z),
 					height: 204
 				})
 			}) }),
 			t.ticks(5).map((e) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w("line", {
 				x1: t(e),
 				x2: t(e),
-				y1: z,
+				y1: B,
 				y2: 216,
 				..._.props(i.grid)
 			}), /* @__PURE__ */ w("text", {
@@ -380,8 +442,8 @@ function W({ width: e, scaleX: t, scaleY: n, points: r, xLabel: a, yLabel: o, fo
 				children: c(e)
 			})] }, e)),
 			n.ticks(4).map((t) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w("line", {
-				x1: L,
-				x2: e - R,
+				x1: R,
+				x2: e - z,
 				y1: n(t),
 				y2: n(t),
 				..._.props(i.grid)
@@ -393,7 +455,7 @@ function W({ width: e, scaleX: t, scaleY: n, points: r, xLabel: a, yLabel: o, fo
 				children: l(t)
 			})] }, t)),
 			/* @__PURE__ */ w("text", {
-				x: (L + e - R) / 2,
+				x: (R + e - z) / 2,
 				y: 256,
 				textAnchor: "middle",
 				..._.props(i.label),
@@ -425,7 +487,7 @@ function W({ width: e, scaleX: t, scaleY: n, points: r, xLabel: a, yLabel: o, fo
 		]
 	});
 }
-function G({ rangeSelection: e, xDomain: t, yDomain: n, xLabel: r, yLabel: i, formatX: a, formatY: o }) {
+function K({ rangeSelection: e, xDomain: t, yDomain: n, xLabel: r, yLabel: i, formatX: a, formatY: o }) {
 	let s = e.value ?? {
 		x: t,
 		y: n
@@ -510,9 +572,9 @@ function G({ rangeSelection: e, xDomain: t, yDomain: n, xLabel: r, yLabel: i, fo
 		]
 	});
 }
-function K({ points: e, xDomain: t, yDomain: n, rangeSelection: r }) {
+function q({ points: e, xDomain: t, yDomain: n, rangeSelection: r }) {
 	if (!d(t) || !d(n)) return "Scatter domains must contain finite, increasing endpoints.";
-	if (e.length > 1e3) return `This plot exceeds the ${B}-point render limit. Supply a smaller, labelled sample.`;
+	if (e.length > 1e3) return `This plot exceeds the ${V}-point render limit. Supply a smaller, labelled sample.`;
 	if (!u(e)) return "Scatter points must have unique identifiers.";
 	if (e.some((e) => !Number.isFinite(e.x) || !Number.isFinite(e.y))) return "Scatter coordinates must be finite.";
 	if (e.some((e) => {
@@ -523,13 +585,13 @@ function K({ points: e, xDomain: t, yDomain: n, rangeSelection: r }) {
 	let i = Number.isFinite(r.xStep) && r.xStep > 0 && r.xStep <= t[1] - t[0], a = Number.isFinite(r.yStep) && r.yStep > 0 && r.yStep <= n[1] - n[0];
 	if (!i || !a) return "Range selection steps must be finite, positive, and no larger than their domain span.";
 	let o = r.value;
-	return o === null ? null : !q(o.x, t) || !q(o.y, n) ? "The selected range must have finite, ordered bounds inside the declared domain." : null;
+	return o === null ? null : !J(o.x, t) || !J(o.y, n) ? "The selected range must have finite, ordered bounds inside the declared domain." : null;
 }
-function q(e, t) {
+function J(e, t) {
 	return !e.every(Number.isFinite) || e[0] > e[1] ? !1 : e[0] >= t[0] && e[1] <= t[1];
 }
 // packages/charts/src/cartesian/time-series-data.ts
-var J = {
+var Y = {
 	series: 12,
 	pointsPerSeries: 2e3,
 	markers: 200,
@@ -544,11 +606,11 @@ var J = {
 ];
 function re({ series: e, isStacked: t, markers: n }) {
 	let r = e[0]?.points.map((e) => e.timestamp) ?? [];
-	if (e.length > J.series || r.length > J.pointsPerSeries || n.length > J.markers) return `Choose a window with at most ${J.series} series, ${J.pointsPerSeries} observations per series, and ${J.markers} markers.`;
+	if (e.length > Y.series || r.length > Y.pointsPerSeries || n.length > Y.markers) return `Choose a window with at most ${Y.series} series, ${Y.pointsPerSeries} observations per series, and ${Y.markers} markers.`;
 	if (!u(e) || !u(n)) return "Series and markers require unique identifiers.";
 	for (let n of e) {
 		if (n.points.length !== r.length) return "Every series must supply the same observation timestamps.";
-		let e = se({
+		let e = X({
 			points: n.points,
 			timestamps: r,
 			isStacked: t
@@ -609,7 +671,7 @@ function oe(e, t) {
 		};
 	});
 }
-function se({ points: e, timestamps: t, isStacked: n }) {
+function X({ points: e, timestamps: t, isStacked: n }) {
 	for (let [r, i] of e.entries()) {
 		let a = e[r - 1], o = a !== void 0 && i.timestamp <= a.timestamp;
 		if (!Number.isFinite(i.timestamp) || i.timestamp !== t[r] || o) return "Observation timestamps must be finite, aligned, and strictly increasing.";
@@ -618,7 +680,7 @@ function se({ points: e, timestamps: t, isStacked: n }) {
 	}
 }
 // packages/charts/src/cartesian/time-series-line.tsx
-function ce({ series: e, x: t, y: n, inspectedTimestamp: r, pointRadius: a = 3 }) {
+function se({ series: e, x: t, y: n, inspectedTimestamp: r, pointRadius: a = 3 }) {
 	return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(A, {
 		data: [...e.points],
 		defined: (e) => e.value !== null,
@@ -638,8 +700,8 @@ function ce({ series: e, x: t, y: n, inspectedTimestamp: r, pointRadius: a = 3 }
 	}, r.timestamp))] });
 }
 // packages/charts/src/cartesian/sparkline.tsx
-function Y({ title: e, summary: t, unit: n, timestampUnit: r, series: i, valueDomain: a }) {
-	let o = y(), s = y(), c = le({
+function ce({ title: e, summary: t, unit: n, timestampUnit: r, series: i, valueDomain: a }) {
+	let o = y(), s = y(), c = Z({
 		title: e,
 		summary: t,
 		unit: n,
@@ -692,7 +754,7 @@ function Y({ title: e, summary: t, unit: n, timestampUnit: r, series: i, valueDo
 					"."
 				]
 			}),
-			m !== void 0 && /* @__PURE__ */ w(ce, {
+			m !== void 0 && /* @__PURE__ */ w(se, {
 				series: m,
 				x: f,
 				y: p,
@@ -701,7 +763,7 @@ function Y({ title: e, summary: t, unit: n, timestampUnit: r, series: i, valueDo
 		]
 	});
 }
-function le({ title: e, summary: t, unit: n, series: r, valueDomain: i }) {
+function Z({ title: e, summary: t, unit: n, series: r, valueDomain: i }) {
 	if (e.trim() === "" || t.trim() === "" || n.trim() === "") return "A trend requires a title, a readable summary, and a value unit.";
 	if (!d(i)) return "The displayed value domain must have finite, increasing bounds.";
 	let a = re({
@@ -713,7 +775,7 @@ function le({ title: e, summary: t, unit: n, series: r, valueDomain: i }) {
 	if (r.points.some((e) => e.value !== null && (e.value < i[0] || e.value > i[1]))) return "Every recorded value must be inside the declared value domain.";
 }
 // packages/charts/src/cartesian/time-series.tsx
-var ue = { plot: {
+var le = { plot: {
 	k7Eaqz: "xeuugli",
 	kInvED: "x1hl8ikr",
 	kZs9gx: "x19rmrnh",
@@ -721,21 +783,21 @@ var ue = { plot: {
 	kPJHz1: "x13qnu6",
 	$$css: !0
 } };
-function X(e) {
+function ue(e) {
 	return /* @__PURE__ */ w($, {
 		...e,
 		kind: "line",
 		stacked: !1
 	});
 }
-function Z({ stacked: e = !1, ...t }) {
+function Q({ stacked: e = !1, ...t }) {
 	return /* @__PURE__ */ w($, {
 		...t,
 		kind: "area",
 		stacked: e
 	});
 }
-function Q({ charts: e, ...t }) {
+function de({ charts: e, ...t }) {
 	let n = x(null), [r, i] = S(), a = JSON.stringify(e.map((e) => [
 		e.id,
 		e.title,
@@ -755,9 +817,9 @@ function Q({ charts: e, ...t }) {
 		title: "Small multiples",
 		message: "Charts need unique identifiers and aligned observation timestamps."
 	});
-	if (e.length > J.panels) return /* @__PURE__ */ w(f, {
+	if (e.length > Y.panels) return /* @__PURE__ */ w(f, {
 		title: "Small multiples",
-		message: `Choose at most ${J.panels} panels.`
+		message: `Choose at most ${Y.panels} panels.`
 	});
 	if (e.length === 0) return /* @__PURE__ */ w(c, {
 		title: "Small multiples",
@@ -827,27 +889,27 @@ function $({ title: e, description: t, series: n, timestampUnit: r, formatTimest
 			children: "No observations"
 		})
 	});
-	let W = m - 28, G = N[0]?.timestamp ?? 0, K = N.at(-1)?.timestamp ?? G, q = M.flatMap((e) => e.points.flatMap((e) => e.value === null ? [] : [e.value + e.base])), J = E === "area" ? Math.min(0, ...q) : Math.min(...q), te = E === "area" ? Math.max(0, ...q) : Math.max(...q), ne = q.length === 0 ? 0 : J, se = q.length === 0 ? 1 : te, Y = D({
-		domain: [...ae(ne, se, E === "area")],
+	let W = m - 28, G = N[0]?.timestamp ?? 0, K = N.at(-1)?.timestamp ?? G, q = M.flatMap((e) => e.points.flatMap((e) => e.value === null ? [] : [e.value + e.base])), J = E === "area" ? Math.min(0, ...q) : Math.min(...q), Y = E === "area" ? Math.max(0, ...q) : Math.max(...q), te = q.length === 0 ? 0 : J, ne = q.length === 0 ? 1 : Y, X = D({
+		domain: [...ae(te, ne, E === "area")],
 		range: [W, 12]
-	}), le = Y.ticks(3), X = ee ?? Math.max(52, ...le.map((e) => u(e).length * 7 + 12)), Z = Math.max(X + 1, F - 16), Q = D({
+	}), ce = X.ticks(3), Z = ee ?? Math.max(52, ...ce.map((e) => u(e).length * 7 + 12)), ue = Math.max(Z + 1, F - 16), Q = D({
 		domain: [...ae(G, K)],
-		range: [X, Z]
+		range: [Z, ue]
 	});
-	function $(e) {
+	function de(e) {
 		let t = I?.getBoundingClientRect();
 		if (t === void 0) return;
 		let n = Q.invert(e - t.left), r = N.find((e, t) => {
 			let r = N[t + 1];
 			return r === void 0 || n <= e.timestamp + (r.timestamp - e.timestamp) / 2;
 		});
-		r !== void 0 && de({
+		r !== void 0 && $({
 			signature: B,
 			timestamp: r.timestamp,
 			source: "pointer"
 		});
 	}
-	function de(e) {
+	function $(e) {
 		A === void 0 ? z(e) : A.onChange(e);
 	}
 	function fe(e) {
@@ -859,7 +921,7 @@ function $({ title: e, description: t, series: n, timestampUnit: r, formatTimest
 		};
 		switch (e.key) {
 			case "Escape":
-				e.preventDefault(), de(void 0);
+				e.preventDefault(), $(void 0);
 				break;
 			case "ArrowRight":
 			case "ArrowLeft":
@@ -867,7 +929,7 @@ function $({ title: e, description: t, series: n, timestampUnit: r, formatTimest
 			case "End": {
 				e.preventDefault();
 				let t = N[n[e.key]];
-				t !== void 0 && de({
+				t !== void 0 && $({
 					signature: B,
 					timestamp: t.timestamp,
 					source: "keyboard"
@@ -903,20 +965,20 @@ function $({ title: e, description: t, series: n, timestampUnit: r, formatTimest
 							height: m,
 							onKeyDown: fe,
 							onPointerMove: (e) => {
-								e.pointerType === "mouse" && $(e.clientX);
+								e.pointerType === "mouse" && de(e.clientX);
 							},
-							onPointerDown: (e) => $(e.clientX),
-							..._.props(i.svg, ue.plot),
+							onPointerDown: (e) => de(e.clientX),
+							..._.props(i.svg, le.plot),
 							children: [
-								le.map((e) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w("line", {
-									x1: X,
-									x2: Z,
-									y1: Y(e),
-									y2: Y(e),
+								ce.map((e) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w("line", {
+									x1: Z,
+									x2: ue,
+									y1: X(e),
+									y2: X(e),
 									..._.props(i.grid)
 								}), /* @__PURE__ */ w("text", {
-									x: X - 8,
-									y: Y(e),
+									x: Z - 8,
+									y: X(e),
 									textAnchor: "end",
 									dominantBaseline: "middle",
 									..._.props(i.label),
@@ -926,15 +988,15 @@ function $({ title: e, description: t, series: n, timestampUnit: r, formatTimest
 									data: [...e.points],
 									defined: (e) => e.value !== null,
 									x: (e) => Q(e.timestamp),
-									y0: (e) => Y(e.base),
-									y1: (e) => Y((e.value ?? 0) + e.base),
-									yScale: Y,
+									y0: (e) => X(e.base),
+									y1: (e) => X((e.value ?? 0) + e.base),
+									yScale: X,
 									fill: s[e.tone],
 									fillOpacity: k ? .65 : .15
-								}), /* @__PURE__ */ w(ce, {
+								}), /* @__PURE__ */ w(se, {
 									series: e,
 									x: Q,
-									y: Y,
+									y: X,
 									inspectedTimestamp: V?.timestamp
 								})] }, e.id)),
 								d.map((e) => /* @__PURE__ */ T("g", { children: [e.kind === "time" ? /* @__PURE__ */ w("line", {
@@ -945,7 +1007,7 @@ function $({ title: e, description: t, series: n, timestampUnit: r, formatTimest
 									className: "xhq4mlf x1ntoi03 x13efnbd"
 								}) : /* @__PURE__ */ w("circle", {
 									cx: Q(e.timestamp),
-									cy: Y(e.value + (M.find((t) => t.id === e.seriesId)?.points.find((t) => t.timestamp === e.timestamp)?.base ?? 0)),
+									cy: X(e.value + (M.find((t) => t.id === e.seriesId)?.points.find((t) => t.timestamp === e.timestamp)?.base ?? 0)),
 									r: 4,
 									fill: g.surface,
 									..._.props(i.selected)
@@ -958,13 +1020,13 @@ function $({ title: e, description: t, series: n, timestampUnit: r, formatTimest
 									className: "xhq4mlf x1ntoi03 x13efnbd"
 								}),
 								/* @__PURE__ */ w("text", {
-									x: X,
+									x: Z,
 									y: m - 4,
 									..._.props(i.label),
 									children: o(G)
 								}),
 								K !== G && /* @__PURE__ */ w("text", {
-									x: Z,
+									x: ue,
 									y: m - 4,
 									textAnchor: "end",
 									..._.props(i.label),
@@ -1037,4 +1099,4 @@ function $({ title: e, description: t, series: n, timestampUnit: r, formatTimest
 		})
 	});
 }
-export { Z as AreaChart, M as BarChart, F as BreakdownBar, X as LineChart, B as MAX_SCATTER_POINTS, U as ScatterPlot, Q as SmallMultiples, Y as Sparkline, J as timeSeriesLimits };
+export { Q as AreaChart, N as BarChart, I as BreakdownBar, ue as LineChart, V as MAX_SCATTER_POINTS, W as ScatterPlot, de as SmallMultiples, ce as Sparkline, Y as timeSeriesLimits };