@camstack/ui-library 1.2.329 → 1.2.331

package/dist/index.cjs

@@ -22518,6 +22518,641 @@ function bucketIndexAt(buckets, bucketMs, t) {
 	}
 	return null;
 }
+var UNKNOWN$1 = "—";
+var NO_INFERENCE = new Set([
+	"information",
+	"duration",
+	"duration-ms",
+	"none",
+	"device",
+	"count",
+	"index",
+	"ratio",
+	"humidity",
+	"percentage"
+]);
+var HIDDEN_INTERACTION = {
+	selection: {
+		visible: false,
+		dataX: null,
+		anchorX: 0,
+		anchorY: 0,
+		pinned: false
+	},
+	gesture: null,
+	lockHorizontalScroll: false
+};
+var TOOLTIP_SIDES = [
+	{
+		placed: "right",
+		vertical: "above"
+	},
+	{
+		placed: "left",
+		vertical: "above"
+	},
+	{
+		placed: "right",
+		vertical: "below"
+	},
+	{
+		placed: "left",
+		vertical: "below"
+	}
+];
+/** Index of the sample closest to `x`. A tie keeps the earlier sample. */
+function nearestPointIndex(xs, x) {
+	if (xs.length === 0 || !Number.isFinite(x)) return null;
+	let lo = 0;
+	let hi = xs.length - 1;
+	while (lo < hi) {
+		const mid = Math.floor((lo + hi) / 2);
+		if ((xs[mid] ?? 0) < x) lo = mid + 1;
+		else hi = mid;
+	}
+	const right = lo;
+	const left = Math.max(0, right - 1);
+	return Math.abs((xs[left] ?? 0) - x) <= Math.abs((xs[right] ?? 0) - x) ? left : right;
+}
+/** Data x for a pointer inside the plot. `null` when it is outside and clamping is off. */
+function dataXFromPointer(input) {
+	if (!(input.plotWidth > 0) || !Number.isFinite(input.localX)) return null;
+	const rel = input.localX - input.plotLeft;
+	if (!input.clamp && (rel < 0 || rel > input.plotWidth)) return null;
+	const clamped = Math.min(input.plotWidth, Math.max(0, rel));
+	return input.xMin + clamped / input.plotWidth * (input.xMax - input.xMin);
+}
+/** Bucket that contains `dataX`, or the nearest one when `dataX` falls in a gap. */
+function bucketSelectionIndex(buckets, bucketMs, dataX) {
+	if (buckets.length === 0 || !Number.isFinite(dataX)) return null;
+	let best = 0;
+	let bestDist = Number.POSITIVE_INFINITY;
+	for (let i = 0; i < buckets.length; i++) {
+		const start = buckets[i]?.t;
+		if (start === void 0) continue;
+		const end = start + bucketMs;
+		if (dataX >= start && dataX < end) return i;
+		const dist = dataX < start ? start - dataX : dataX - end;
+		if (dist < bestDist) {
+			bestDist = dist;
+			best = i;
+		}
+	}
+	return best;
+}
+/** Next keyboard stop. A null current starts at the first or last stop. */
+function stepStop(stops, current, direction) {
+	if (stops.length === 0) return null;
+	const ordered = [...stops].sort((a, b) => a - b);
+	if (current === null || !Number.isFinite(current)) return direction > 0 ? ordered[0] ?? null : ordered[ordered.length - 1] ?? null;
+	let idx = 0;
+	let best = Number.POSITIVE_INFINITY;
+	for (let i = 0; i < ordered.length; i++) {
+		const dist = Math.abs((ordered[i] ?? 0) - current);
+		if (dist < best) {
+			best = dist;
+			idx = i;
+		}
+	}
+	const next = idx + direction;
+	if (next < 0 || next >= ordered.length) return ordered[idx] ?? null;
+	return ordered[next] ?? null;
+}
+function shown(dataX, anchorX, anchorY, pinned) {
+	return {
+		visible: true,
+		dataX,
+		anchorX,
+		anchorY,
+		pinned
+	};
+}
+function resting(selection, gesture, lock) {
+	return {
+		selection,
+		gesture,
+		lockHorizontalScroll: lock
+	};
+}
+function lockAxis(gesture, x, y) {
+	if (gesture.axis !== "pending") return gesture.axis;
+	const dx = Math.abs(x - gesture.originX);
+	const dy = Math.abs(y - gesture.originY);
+	if (dx < 10 && dy < 10) return "pending";
+	return dx >= dy ? "x" : "y";
+}
+function onDown(state, event) {
+	if (event.kind === "mouse") return state;
+	return resting(state.selection, {
+		kind: event.kind,
+		originX: event.x,
+		originY: event.y,
+		axis: "pending"
+	}, false);
+}
+function onMove(state, event) {
+	if (event.kind === "mouse") {
+		if (event.dataX === null) return state.selection.pinned ? state : HIDDEN_INTERACTION;
+		return resting(shown(event.dataX, event.x, event.y, false), null, false);
+	}
+	const gesture = state.gesture;
+	if (gesture === null) return state;
+	const axis = lockAxis(gesture, event.x, event.y);
+	const nextGesture = {
+		...gesture,
+		axis
+	};
+	if (axis !== "x" || event.dataX === null) return resting(state.selection, nextGesture, false);
+	return resting(shown(event.dataX, event.x, event.y, true), nextGesture, true);
+}
+function onUp(state, event) {
+	if (event.kind === "mouse" || state.gesture === null) return state;
+	if (state.gesture.axis === "y" || state.gesture.axis === "x") return resting(state.selection, null, false);
+	if (state.selection.visible && state.selection.pinned) return HIDDEN_INTERACTION;
+	if (event.dataX === null) return HIDDEN_INTERACTION;
+	return resting(shown(event.dataX, event.x, event.y, true), null, false);
+}
+/** Pointer, keyboard and dismiss rules for one chart. */
+function reduceChartInteraction(state, event) {
+	switch (event.type) {
+		case "hide":
+		case "outside": return HIDDEN_INTERACTION;
+		case "leave": return state.selection.pinned ? resting(state.selection, null, false) : HIDDEN_INTERACTION;
+		case "hover": return resting(shown(event.dataX, event.anchorX, event.anchorY, false), null, false);
+		case "key": return resting(shown(event.dataX, event.anchorX, event.anchorY, true), null, false);
+		case "down": return onDown(state, event);
+		case "move": return onMove(state, event);
+		case "up": return onUp(state, event);
+		default: return event;
+	}
+}
+function quantityFromUnit(unit) {
+	if (unit === null || unit === void 0 || unit.length === 0) return void 0;
+	let found;
+	for (const key of Object.keys(_camstack_types.QUANTITY_BASE)) {
+		if (!(0, _camstack_types.isReadingQuantity)(key) || NO_INFERENCE.has(key)) continue;
+		if (_camstack_types.QUANTITY_BASE[key] !== unit) continue;
+		if (found !== void 0) return void 0;
+		found = key;
+	}
+	return found;
+}
+function withUnit(text, unit, unknown) {
+	if (text.length === 0) return unknown;
+	if (unit.length === 0) return text;
+	if (unit === "%") return `${text}%`;
+	return `${text} ${unit}`;
+}
+/** One sample, with its unit. Missing samples are an em dash, never zero. */
+function formatTooltipValue(input) {
+	const unknown = input.unknownLabel ?? UNKNOWN$1;
+	if (input.value === null || !Number.isFinite(input.value)) return unknown;
+	const quantity = input.quantity === "device" ? void 0 : input.quantity ?? quantityFromUnit(input.unit);
+	if (quantity === void 0) return formatChartValue(input.value, input.unit ?? null);
+	const rendered = (0, _camstack_types.formatReading)({
+		value: input.value,
+		quantity,
+		preference: input.preference,
+		precision: input.precision
+	});
+	return withUnit(rendered.text, rendered.unit, unknown);
+}
+function liveText(heading, lines) {
+	if (lines.length === 0) return heading;
+	return `${heading}, ${lines.map((line) => `${line.label} ${line.value}`).join(", ")}`;
+}
+function asBody(heading, lines) {
+	return {
+		heading,
+		lines,
+		liveText: liveText(heading, lines)
+	};
+}
+/** Time plus one line per visible series. */
+function lineTooltipBody(input) {
+	const lines = input.series.filter((sample) => sample.visible !== false).map((sample) => ({
+		id: sample.id,
+		label: sample.label,
+		value: formatTooltipValue({
+			value: sample.value,
+			quantity: sample.quantity,
+			unit: sample.unit,
+			precision: sample.precision,
+			preference: input.preference
+		})
+	}));
+	return asBody(input.timeLabel, lines);
+}
+/** The state in force at `t`, and how long that span lasts. */
+function stateSpanAt(segments, t) {
+	for (const segment of segments) if (t >= segment.from && t < segment.to) return {
+		state: segment.state,
+		spanMs: Math.max(0, segment.to - segment.from)
+	};
+	return null;
+}
+function stateTooltipValue(stateLabel, spanMs) {
+	if (stateLabel === null || stateLabel.length === 0) return UNKNOWN$1;
+	if (spanMs === null || !(spanMs > 0)) return stateLabel;
+	return `${stateLabel} · ${formatSpan(spanMs)}`;
+}
+/** One row per state series: the label and the span under the pointer. */
+function stateTooltipBody(input) {
+	const lines = input.rows.map((row) => ({
+		id: row.id,
+		label: row.label,
+		value: stateTooltipValue(row.stateLabel, row.spanMs)
+	}));
+	return asBody(input.timeLabel, lines);
+}
+/** `start – end` for one bar bucket, at the window's time precision. */
+function barRangeLabel(start, bucketMs, spanMs) {
+	return `${formatCursorTime(start, spanMs)} – ${formatCursorTime(start + bucketMs, spanMs)}`;
+}
+/** The bucket's range, and each layer's value with its unit. */
+function barTooltipBody(input) {
+	const lines = input.layers.map((layer) => ({
+		id: layer.id,
+		label: layer.label,
+		value: formatTooltipValue({
+			value: layer.value,
+			quantity: layer.quantity,
+			unit: layer.unit,
+			precision: layer.precision,
+			preference: input.preference
+		})
+	}));
+	return asBody(input.rangeLabel, lines);
+}
+function sideOrigin(side, input, gap) {
+	return {
+		left: side.placed === "right" ? input.anchorX + gap : input.anchorX - gap - input.tooltipWidth,
+		top: side.vertical === "above" ? input.anchorY - gap - input.tooltipHeight : input.anchorY + gap
+	};
+}
+function insideBounds(left, top, input) {
+	const pad = 4;
+	return left >= pad && top >= pad && left + input.tooltipWidth <= input.boundsWidth - pad && top + input.tooltipHeight <= input.boundsHeight - pad;
+}
+function coversPoint(left, top, input) {
+	return input.anchorX >= left && input.anchorX <= left + input.tooltipWidth && input.anchorY >= top && input.anchorY <= top + input.tooltipHeight;
+}
+function clampOrigin(left, top, input) {
+	const pad = 4;
+	const maxLeft = Math.max(pad, input.boundsWidth - pad - input.tooltipWidth);
+	const maxTop = Math.max(pad, input.boundsHeight - pad - input.tooltipHeight);
+	return {
+		left: Math.min(Math.max(left, pad), maxLeft),
+		top: Math.min(Math.max(top, pad), maxTop)
+	};
+}
+/**
+* Place the tooltip beside the point, inside the chart. The first side that
+* fits and does not cover the point wins; the edges flip before the corners.
+*/
+function placeChartTooltip(input) {
+	const gap = input.gap ?? 12;
+	let fallback = null;
+	for (const side of TOOLTIP_SIDES) {
+		const origin = sideOrigin(side, input, gap);
+		const clamped = clampOrigin(origin.left, origin.top, input);
+		const placement = {
+			...side,
+			...clamped
+		};
+		if (fallback === null && !coversPoint(clamped.left, clamped.top, input)) fallback = placement;
+		if (insideBounds(origin.left, origin.top, input) && !coversPoint(origin.left, origin.top, input)) return {
+			...side,
+			...origin
+		};
+	}
+	if (fallback !== null) return fallback;
+	const first = TOOLTIP_SIDES[0] ?? {
+		placed: "right",
+		vertical: "above"
+	};
+	const clamped = clampOrigin(sideOrigin(first, input, gap).left, sideOrigin(first, input, gap).top, input);
+	return {
+		...first,
+		...clamped
+	};
+}
+//#endregion
+//#region src/composites/charts/chart-tooltip-host.tsx
+/**
+* One tooltip for every chart. The plot stays in `UPlotHost`; this shell
+* tracks the pointer, a touch scrub and the arrow keys, and draws the
+* readout inside the chart.
+*/
+function pointerKind(pointerType) {
+	return pointerType === "mouse" ? "mouse" : "touch";
+}
+function pointerSample(clientX, clientY, shell, plot, spec, clamp) {
+	const box = shell.getBoundingClientRect();
+	const anchorX = clientX - box.left;
+	const anchorY = clientY - box.top;
+	if (plot !== null) {
+		const over = plot.over.getBoundingClientRect();
+		const left = clientX - over.left;
+		const top = clientY - over.top;
+		const minX = plot.bbox.left;
+		const maxX = plot.bbox.left + plot.bbox.width;
+		const inside = left >= minX && left <= maxX && top >= plot.bbox.top && top <= plot.bbox.top + plot.bbox.height;
+		if (!inside && !clamp) return {
+			dataX: null,
+			anchorX,
+			anchorY,
+			inside: false
+		};
+		return {
+			dataX: plot.posToVal(Math.min(maxX, Math.max(minX, left)), "x"),
+			anchorX,
+			anchorY,
+			inside
+		};
+	}
+	const dataX = dataXFromPointer({
+		localX: anchorX,
+		plotLeft: 0,
+		plotWidth: box.width,
+		xMin: spec.xMin,
+		xMax: spec.xMax,
+		clamp
+	});
+	return {
+		dataX,
+		anchorX,
+		anchorY,
+		inside: dataX !== null
+	};
+}
+function anchorForDataX(dataX, shell, plot, spec) {
+	if (plot !== null && shell !== null) {
+		const over = plot.over.getBoundingClientRect();
+		const box = shell.getBoundingClientRect();
+		return {
+			x: over.left - box.left + plot.valToPos(dataX, "x"),
+			y: over.top - box.top + plot.bbox.top + plot.bbox.height / 2
+		};
+	}
+	const width = shell?.getBoundingClientRect().width ?? 0;
+	const height = shell?.getBoundingClientRect().height ?? 0;
+	const span = spec.xMax - spec.xMin;
+	const frac = span === 0 ? 0 : (dataX - spec.xMin) / span;
+	return {
+		x: Math.min(1, Math.max(0, frac)) * width,
+		y: height / 2
+	};
+}
+function movePlotCursor(plot, dataX) {
+	if (plot === null) return;
+	if (dataX === null) {
+		plot.setCursor({
+			left: -10,
+			top: -10
+		});
+		return;
+	}
+	plot.setCursor({
+		left: plot.valToPos(dataX, "x"),
+		top: plot.bbox.top + plot.bbox.height / 2
+	});
+}
+function ChartTooltipCard({ view }) {
+	const ref = (0, react$1.useRef)(null);
+	(0, react$1.useLayoutEffect)(() => {
+		const el = ref.current;
+		if (el === null) return;
+		const placed = placeChartTooltip({
+			anchorX: view.anchorX,
+			anchorY: view.anchorY,
+			tooltipWidth: el.offsetWidth,
+			tooltipHeight: el.offsetHeight,
+			boundsWidth: view.boundsWidth,
+			boundsHeight: view.boundsHeight
+		});
+		el.style.left = `${String(placed.left)}px`;
+		el.style.top = `${String(placed.top)}px`;
+	}, [view]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		role: "tooltip",
+		"data-chart-tooltip": "",
+		className: "pointer-events-none absolute z-20 max-w-64 rounded-md border border-border bg-background-elevated px-2 py-1 text-foreground shadow-md",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "m-0 text-[10px] tabular-nums text-foreground-subtle",
+			children: view.body.heading
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "m-0 list-none p-0",
+			children: view.body.lines.map((line) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "flex items-baseline justify-between gap-3 text-xs",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "min-w-0 truncate text-foreground-muted",
+					children: line.label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "shrink-0 tabular-nums",
+					children: line.value
+				})]
+			}, line.id))
+		})]
+	});
+}
+function ChartTooltipShell({ spec, plotRef, kind, label, inline = false, children }) {
+	const shellRef = (0, react$1.useRef)(null);
+	const specRef = (0, react$1.useRef)(spec);
+	specRef.current = spec;
+	const interactionRef = (0, react$1.useRef)(HIDDEN_INTERACTION);
+	const dataXRef = (0, react$1.useRef)(null);
+	const [view, setView] = (0, react$1.useState)(null);
+	const pinned = view !== null && interactionRef.current.selection.pinned;
+	const commit = (0, react$1.useCallback)((next) => {
+		interactionRef.current = next;
+		const current = specRef.current;
+		const shell = shellRef.current;
+		const dataX = next.selection.visible ? next.selection.dataX : null;
+		const body = current !== null && dataX !== null ? current.resolve(dataX) : null;
+		if (body === null || dataX === null) {
+			setView(null);
+			if (dataXRef.current !== null) {
+				dataXRef.current = null;
+				current?.onDataX?.(null);
+			}
+			return;
+		}
+		setView({
+			body,
+			anchorX: next.selection.anchorX,
+			anchorY: next.selection.anchorY,
+			boundsWidth: shell?.getBoundingClientRect().width ?? 0,
+			boundsHeight: shell?.getBoundingClientRect().height ?? 0
+		});
+		if (dataXRef.current !== dataX) {
+			dataXRef.current = dataX;
+			current?.onDataX?.(dataX);
+		}
+	}, []);
+	(0, react$1.useEffect)(() => {
+		const shell = shellRef.current;
+		if (shell === null) return;
+		const sample = (event, clamp) => {
+			const current = specRef.current;
+			if (current === null) return null;
+			return pointerSample(event.clientX, event.clientY, shell, plotRef.current, current, clamp);
+		};
+		const onDown = (event) => {
+			if (pointerKind(event.pointerType) === "mouse") return;
+			const at = sample(event, false);
+			if (at === null) return;
+			commit(reduceChartInteraction(interactionRef.current, {
+				type: "down",
+				kind: "touch",
+				x: at.anchorX,
+				y: at.anchorY,
+				dataX: at.dataX
+			}));
+		};
+		const onMove = (event) => {
+			const kind = pointerKind(event.pointerType);
+			const scrubbing = interactionRef.current.gesture?.axis === "x";
+			const at = sample(event, kind !== "mouse" && scrubbing);
+			if (at === null) return;
+			if (kind === "mouse") {
+				if (!at.inside || at.dataX === null) {
+					commit(reduceChartInteraction(interactionRef.current, { type: "leave" }));
+					if (!interactionRef.current.selection.visible) movePlotCursor(plotRef.current, null);
+					return;
+				}
+				commit(reduceChartInteraction(interactionRef.current, {
+					type: "hover",
+					dataX: at.dataX,
+					anchorX: at.anchorX,
+					anchorY: at.anchorY
+				}));
+				movePlotCursor(plotRef.current, at.dataX);
+				return;
+			}
+			const next = reduceChartInteraction(interactionRef.current, {
+				type: "move",
+				kind: "touch",
+				x: at.anchorX,
+				y: at.anchorY,
+				dataX: at.dataX
+			});
+			if (next.lockHorizontalScroll) {
+				event.preventDefault();
+				if (event.pointerId !== 0 && !shell.hasPointerCapture(event.pointerId)) shell.setPointerCapture(event.pointerId);
+			}
+			commit(next);
+			if (next.selection.dataX !== null && next.selection.visible) movePlotCursor(plotRef.current, next.selection.dataX);
+		};
+		const onUp = (event) => {
+			if (pointerKind(event.pointerType) === "mouse") return;
+			const at = sample(event, interactionRef.current.gesture?.axis === "x");
+			if (at === null) return;
+			const next = reduceChartInteraction(interactionRef.current, {
+				type: "up",
+				kind: "touch",
+				x: at.anchorX,
+				y: at.anchorY,
+				dataX: at.dataX
+			});
+			commit(next);
+			movePlotCursor(plotRef.current, next.selection.visible ? next.selection.dataX : null);
+		};
+		const onLeave = (event) => {
+			if (pointerKind(event.pointerType) !== "mouse") return;
+			const next = reduceChartInteraction(interactionRef.current, { type: "leave" });
+			commit(next);
+			if (!next.selection.visible) movePlotCursor(plotRef.current, null);
+		};
+		shell.addEventListener("pointerdown", onDown);
+		shell.addEventListener("pointermove", onMove);
+		shell.addEventListener("pointerup", onUp);
+		shell.addEventListener("pointercancel", onUp);
+		shell.addEventListener("pointerleave", onLeave);
+		return () => {
+			shell.removeEventListener("pointerdown", onDown);
+			shell.removeEventListener("pointermove", onMove);
+			shell.removeEventListener("pointerup", onUp);
+			shell.removeEventListener("pointercancel", onUp);
+			shell.removeEventListener("pointerleave", onLeave);
+		};
+	}, [commit, plotRef]);
+	(0, react$1.useEffect)(() => {
+		if (!pinned) return;
+		const onDoc = (event) => {
+			const shell = shellRef.current;
+			if (shell !== null && event.target instanceof Node && shell.contains(event.target)) return;
+			commit(reduceChartInteraction(interactionRef.current, { type: "outside" }));
+			movePlotCursor(plotRef.current, null);
+		};
+		document.addEventListener("pointerdown", onDoc, true);
+		return () => document.removeEventListener("pointerdown", onDoc, true);
+	}, [
+		commit,
+		pinned,
+		plotRef
+	]);
+	const onKeyDown = (event) => {
+		const current = specRef.current;
+		if (current === null) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			commit(reduceChartInteraction(interactionRef.current, { type: "hide" }));
+			movePlotCursor(plotRef.current, null);
+			return;
+		}
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		const from = interactionRef.current.selection.visible ? interactionRef.current.selection.dataX : null;
+		const dataX = stepStop(current.stops, from, event.key === "ArrowRight" ? 1 : -1);
+		if (dataX === null) return;
+		const anchor = anchorForDataX(dataX, shellRef.current, plotRef.current, current);
+		commit(reduceChartInteraction(interactionRef.current, {
+			type: "key",
+			dataX,
+			anchorX: anchor.x,
+			anchorY: anchor.y
+		}));
+		movePlotCursor(plotRef.current, dataX);
+	};
+	const setShell = (el) => {
+		shellRef.current = el;
+	};
+	const className = cn("relative min-w-0 touch-pan-y outline-none focus-visible:ring-2 focus-visible:ring-primary", inline ? "inline-block w-full" : "w-full");
+	const tooltip = view !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTooltipCard, { view }) : null;
+	const live = view !== null && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "sr-only",
+		"aria-live": "polite",
+		"data-chart-tooltip-live": "",
+		children: view.body.liveText
+	}), document.body) : null;
+	const shared = {
+		className,
+		"data-chart-shell": "",
+		"data-chart-kind": kind,
+		tabIndex: spec === null ? void 0 : 0,
+		"aria-label": label,
+		onKeyDown
+	};
+	return inline ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		ref: setShell,
+		...shared,
+		children: [
+			children,
+			tooltip,
+			live
+		]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: setShell,
+		...shared,
+		children: [
+			children,
+			tooltip,
+			live
+		]
+	});
+}
 //#endregion
 //#region src/composites/charts/uplot-host.tsx
 /**
@@ -22548,7 +23183,7 @@ function loadUPlot() {
 	if (ctorPromise === null) ctorPromise = canDrawCanvas() ? Promise.resolve().then(() => require("./uPlot.esm-BbxBUnav.cjs")).then((m) => m.default).catch(() => null) : Promise.resolve(null);
 	return ctorPromise;
 }
-function UPlotHost({ optionsKey, buildOptions, data, height, onInstance, className, inline = false }) {
+function UPlotHost({ optionsKey, buildOptions, data, height, onInstance, className, inline = false, tooltip = null, kind, label }) {
 	const hostRef = (0, react$1.useRef)(null);
 	const plotRef = (0, react$1.useRef)(null);
 	const [ctor, setCtor] = (0, react$1.useState)(null);
@@ -22580,6 +23215,8 @@ function UPlotHost({ optionsKey, buildOptions, data, height, onInstance, classNa
 			width,
 			height
 		}, latest.current.data, el);
+		u.over.style.touchAction = "pan-y";
+		u.root.style.touchAction = "pan-y";
 		plotRef.current = u;
 		latest.current.onInstance?.(u);
 		return () => {
@@ -22621,14 +23258,21 @@ function UPlotHost({ optionsKey, buildOptions, data, height, onInstance, classNa
 	const setHost = (el) => {
 		hostRef.current = el;
 	};
-	return inline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		ref: setHost,
-		className: className ?? "block w-full min-w-0",
-		"data-chart-plot": ""
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: setHost,
-		className: className ?? "w-full min-w-0",
-		"data-chart-plot": ""
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTooltipShell, {
+		spec: tooltip,
+		plotRef,
+		kind,
+		label,
+		inline,
+		children: inline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			ref: setHost,
+			className: className ?? "block w-full min-w-0",
+			"data-chart-plot": ""
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: setHost,
+			className: className ?? "w-full min-w-0",
+			"data-chart-plot": ""
+		})
 	});
 }
 //#endregion
@@ -22643,7 +23287,7 @@ function UPlotHost({ optionsKey, buildOptions, data, height, onInstance, classNa
 * lives inside another control; there a bucket can be selected (`onSelect`)
 * and every bucket is also a real button for keyboard and screen readers.
 */
-function BarSeries({ title, layers, buckets, bucketMs, range, unit = null, formatValue, height, stacked, showTotal = false, syncKey, pending = false, emptyMessage, actions, footer, windowToggle, compact = false, minBarFraction = 0, selectedIndex = null, onSelect, bucketLabel, bucketTestId, className }) {
+function BarSeries({ title, layers, buckets, bucketMs, range, unit = null, formatValue, displayPreference, height, stacked, showTotal = false, syncKey, pending = false, emptyMessage, actions, footer, windowToggle, compact = false, minBarFraction = 0, selectedIndex = null, onSelect, bucketLabel, bucketTestId, className }) {
 	const t = useUiText();
 	const plotHeight = height ?? (compact ? 24 : 100);
 	const isStacked = stacked ?? layers.length > 1;
@@ -22655,6 +23299,37 @@ function BarSeries({ title, layers, buckets, bucketMs, range, unit = null, forma
 	]);
 	const totals = (0, react$1.useMemo)(() => bucketTotals(buckets, layers.length), [buckets, layers.length]);
 	const [cursorIdx, setCursorIdx] = (0, react$1.useState)(null);
+	const tooltip = (0, react$1.useMemo)(() => ({
+		xMin: range.from,
+		xMax: range.to,
+		stops: buckets.map((bucket) => bucket.t),
+		resolve: (dataX) => {
+			const index = bucketSelectionIndex(buckets, bucketMs, dataX);
+			if (index === null) return null;
+			const bucket = buckets[index];
+			if (bucket === void 0) return null;
+			return barTooltipBody({
+				rangeLabel: barRangeLabel(bucket.t, bucketMs, range.to - range.from),
+				preference: displayPreference,
+				layers: layers.map((layer, li) => ({
+					id: layer.id,
+					label: layer.label,
+					value: bucket.values[li] ?? null,
+					unit
+				}))
+			});
+		},
+		onDataX: (dataX) => {
+			setCursorIdx(dataX === null ? null : bucketSelectionIndex(buckets, bucketMs, dataX));
+		}
+	}), [
+		buckets,
+		bucketMs,
+		range,
+		layers,
+		unit,
+		displayPreference
+	]);
 	const live = (0, react$1.useRef)({
 		buckets,
 		tops,
@@ -22817,7 +23492,10 @@ function BarSeries({ title, layers, buckets, bucketMs, range, unit = null, forma
 		optionsKey,
 		buildOptions,
 		data,
-		height: plotHeight
+		height: plotHeight,
+		tooltip,
+		kind: "bars",
+		label: title
 	});
 	if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("relative min-w-0", className),
@@ -30636,8 +31314,21 @@ function AddonActionSelectField({ field, value, values, onChange, disabled, onAc
 	const [options, setOptions] = (0, react$1.useState)(null);
 	const params = resolveActionParams(field, values);
 	const missingParam = Object.keys(field.paramsFromForm ?? {}).some((k) => params[k] === void 0);
+	const valueKey = field.mapOption.value;
+	const labelKey = field.mapOption.label;
+	const descKey = field.mapOption.description;
+	const refreshKey = (field.refreshOn ?? Object.values(field.paramsFromForm ?? {})).map((k) => `${k}=${JSON.stringify(values[k])}`).join("|");
+	const onActionRef = (0, react$1.useRef)(onAction);
+	onActionRef.current = onAction;
+	const onChangeRef = (0, react$1.useRef)(onChange);
+	onChangeRef.current = onChange;
+	const paramsRef = (0, react$1.useRef)(params);
+	paramsRef.current = params;
+	const valueRef = (0, react$1.useRef)(value);
+	valueRef.current = value;
 	(0, react$1.useEffect)(() => {
-		if (!onAction || missingParam) {
+		const run = onActionRef.current;
+		if (!run || missingParam) {
 			setOptions(null);
 			setError(null);
 			return;
@@ -30645,7 +31336,8 @@ function AddonActionSelectField({ field, value, values, onChange, disabled, onAc
 		let cancelled = false;
 		setLoading(true);
 		setError(null);
-		onAction(field.action, field.key, params).then((res) => {
+		const requested = paramsRef.current;
+		run(field.action, field.key, requested).then((res) => {
 			if (cancelled) return;
 			const result = res;
 			let list = [];
@@ -30658,9 +31350,10 @@ function AddonActionSelectField({ field, value, values, onChange, disabled, onAc
 				}
 			}
 			setOptions(list);
-			if (field.hideWhenFewerThan !== void 0 && list.length === 1 && (typeof value !== "string" || value.length === 0)) {
+			const current = valueRef.current;
+			if (field.hideWhenFewerThan !== void 0 && list.length === 1 && (typeof current !== "string" || current.length === 0)) {
 				const only = list[0]?.[valueKey];
-				if (typeof only === "string" && only.length > 0) onChange(only);
+				if (typeof only === "string" && only.length > 0) onChangeRef.current(only);
 			}
 		}).catch((err) => {
 			if (cancelled) return;
@@ -30673,14 +31366,14 @@ function AddonActionSelectField({ field, value, values, onChange, disabled, onAc
 			cancelled = true;
 		};
 	}, [
-		(field.refreshOn ?? Object.values(field.paramsFromForm ?? {})).map((k) => `${k}=${JSON.stringify(values[k])}`).join("|"),
-		onAction,
+		refreshKey,
+		missingParam,
+		onAction !== void 0,
 		field.action,
-		field.key
+		field.key,
+		field.hideWhenFewerThan,
+		valueKey
 	]);
-	const valueKey = field.mapOption.value;
-	const labelKey = field.mapOption.label;
-	const descKey = field.mapOption.description;
 	if (!onAction && field.hideWhenFewerThan !== void 0) return null;
 	if (field.hideWhenFewerThan !== void 0 && options !== null && options.length < field.hideWhenFewerThan) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
@@ -66241,11 +66934,34 @@ function RetrainReviewBadge({ kind, approximate = false, className, ...props })
 	});
 }
 //#endregion
+//#region src/composites/view-switch.tsx
+function ViewSwitch({ options, value, onChange, ariaLabel, className, testId }) {
+	if (options.length < 2) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		"data-testid": testId,
+		className: cn("inline-flex shrink-0 items-center gap-0.5 rounded-md border border-border bg-background p-0.5", className),
+		children: options.map((option) => {
+			const active = value === option.id;
+			const Icon = option.icon;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": active,
+				"data-testid": testId === void 0 ? void 0 : `${testId}-${option.id}`,
+				onClick: () => onChange(option.id),
+				className: cn("inline-flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs font-medium transition-colors", active ? "bg-primary/10 text-primary" : "text-foreground-subtle hover:bg-surface-hover hover:text-foreground"),
+				children: [Icon !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": true
+				}) : null, option.label]
+			}, option.id);
+		})
+	});
+}
+//#endregion
 //#region src/composites/charts/time-series-model.ts
-/**
-* The pure half of `TimeSeriesChart`: which series go on which value axis,
-* the aligned data uPlot draws, and what the readout says at an index.
-*/
 /** The unit key a series lives on (`''` for no / unknown unit). */
 function unitKey(unit) {
 	return unit ?? "";
@@ -66313,7 +67029,39 @@ function latestValues(model) {
 * for the cross-device History page, where the reader chose the series.
 */
 var DEFAULT_HEIGHT = 120;
-function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacked = false, area = false, syncKey, formatValue, axisFor, emptyMessage, pending = false, actions, footer, windowToggle, className }) {
+function seriesSpan(range, xs) {
+	if (range !== void 0) return range.to - range.from;
+	if (xs.length < 2) return 0;
+	return (xs[xs.length - 1] ?? 0) - (xs[0] ?? 0);
+}
+function seriesTooltip(input) {
+	const span = seriesSpan(input.range, input.model.xs);
+	return {
+		xMin: input.range?.from ?? input.model.xs[0] ?? 0,
+		xMax: input.range?.to ?? input.model.xs.at(-1) ?? 0,
+		stops: input.model.xs,
+		resolve: (dataX) => {
+			const index = nearestPointIndex(input.model.xs, dataX);
+			if (index === null) return null;
+			const at = input.model.xs[index];
+			if (at === void 0) return null;
+			const values = readoutAt(input.model, index);
+			return lineTooltipBody({
+				timeLabel: formatCursorTime(at, span),
+				preference: input.preference,
+				series: input.series.map((sample, i) => ({
+					id: sample.id,
+					label: sample.label,
+					value: values[i] ?? null,
+					quantity: sample.quantity,
+					unit: sample.unit ?? null
+				}))
+			});
+		},
+		onDataX: input.onDataX
+	};
+}
+function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacked = false, area = false, syncKey, formatValue, displayPreference, axisFor, emptyMessage, pending = false, actions, footer, windowToggle, className }) {
 	const t = useUiText();
 	const model = (0, react$1.useMemo)(() => buildTimeSeriesModel(series, stacked), [series, stacked]);
 	const [cursorIdx, setCursorIdx] = (0, react$1.useState)(null);
@@ -66456,6 +67204,20 @@ function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacke
 		fmt,
 		specFor
 	]);
+	const tooltip = (0, react$1.useMemo)(() => seriesTooltip({
+		model,
+		series,
+		range,
+		preference: displayPreference,
+		onDataX: (dataX) => {
+			setCursorIdx(dataX === null ? null : nearestPointIndex(model.xs, dataX));
+		}
+	}), [
+		model,
+		series,
+		range,
+		displayPreference
+	]);
 	const shown = readoutAt(model, cursorIdx);
 	const legend = series.map((s, i) => {
 		const style = chartSeriesStyle(s.colorIndex);
@@ -66517,7 +67279,10 @@ function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacke
 			optionsKey,
 			buildOptions,
 			data,
-			height
+			height,
+			tooltip,
+			kind: "lines",
+			label: title
 		})
 	});
 }
@@ -66536,6 +67301,33 @@ function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacke
 /** Pixel height of one row band — matches the `h-5` label cells. */
 var ROW_PX = 20;
 var AXIS_PX = 22;
+function stateStops(rows, from, to) {
+	const found = new Set([from]);
+	for (const row of rows) for (const segment of row.segments) if (segment.from >= from && segment.from < to) found.add(segment.from);
+	return [...found].sort((a, b) => a - b);
+}
+function stateTooltip(rows, range) {
+	const span = range.to - range.from;
+	return {
+		xMin: range.from,
+		xMax: range.to,
+		stops: stateStops(rows, range.from, range.to),
+		resolve: (dataX) => stateTooltipBody({
+			timeLabel: formatCursorTime(dataX, span),
+			rows: rows.map((row) => {
+				const hit = stateSpanAt(row.segments, dataX);
+				const state = hit?.state ?? null;
+				const stateLabel = state === null ? null : row.stateLabel?.(state) ?? state;
+				return {
+					id: row.id,
+					label: row.label,
+					stateLabel,
+					spanMs: state === null ? null : hit?.spanMs ?? null
+				};
+			})
+		})
+	};
+}
 /** The colour role of a state on a row: a categorical slot, or the recessive "off". */
 function stateStyle(row, state) {
 	const base = row.colorIndex ?? 0;
@@ -66610,6 +67402,10 @@ function StateTimeline({ title, rows, range, syncKey, pending = false, emptyMess
 			}]
 		}
 	}), [optionsKey]);
+	const tooltip = (0, react$1.useMemo)(() => ({
+		...stateTooltip(rows, range),
+		onDataX: (dataX) => setCursorT(dataX)
+	}), [rows, range]);
 	const durations = (0, react$1.useMemo)(() => rows.map((r) => r.totals ?? timeInState(r.segments)), [rows]);
 	const summary = rows.map((row, i) => {
 		const parts = row.states.map((s) => {
@@ -66663,7 +67459,10 @@ function StateTimeline({ title, rows, range, syncKey, pending = false, emptyMess
 						optionsKey,
 						buildOptions,
 						data,
-						height: rows.length * ROW_PX + AXIS_PX
+						height: rows.length * ROW_PX + AXIS_PX,
+						tooltip,
+						kind: "states",
+						label: title
 					})
 				})]
 			}),
@@ -66708,7 +67507,38 @@ function StateTimeline({ title, rows, range, syncKey, pending = false, emptyMess
 * row (a training job's mAP per epoch). The x is whatever the caller orders
 * by (an epoch, a time); the value next to it names what the line is.
 */
-function Sparkline({ points, ariaLabel, token = "chart-series-a", height = 32, widthClassName = "w-40", zeroBased = true, className }) {
+function Sparkline({ points, ariaLabel, token = "chart-series-a", height = 32, widthClassName = "w-40", zeroBased = true, unit = null, quantity, displayPreference, className }) {
+	const tooltip = (0, react$1.useMemo)(() => {
+		const xs = points.map((point) => point.x);
+		return {
+			xMin: xs[0] ?? 0,
+			xMax: xs.at(-1) ?? 0,
+			stops: xs,
+			resolve: (dataX) => {
+				const index = nearestPointIndex(xs, dataX);
+				if (index === null) return null;
+				const point = points[index];
+				if (point === void 0) return null;
+				return lineTooltipBody({
+					timeLabel: String(point.x),
+					preference: displayPreference,
+					series: [{
+						id: "value",
+						label: ariaLabel,
+						value: point.v,
+						unit,
+						quantity
+					}]
+				});
+			}
+		};
+	}, [
+		points,
+		ariaLabel,
+		unit,
+		quantity,
+		displayPreference
+	]);
 	const data = (0, react$1.useMemo)(() => [points.map((p) => p.x), points.map((p) => p.v)], [points]);
 	const buildOptions = (0, react$1.useCallback)((_w, lib) => ({
 		legend: { show: false },
@@ -66744,7 +67574,10 @@ function Sparkline({ points, ariaLabel, token = "chart-series-a", height = 32, w
 			buildOptions,
 			data,
 			height,
-			inline: true
+			inline: true,
+			tooltip,
+			kind: "spark",
+			label: ariaLabel
 		})
 	});
 }
@@ -69420,6 +70253,7 @@ exports.ValveHeroCard = ValveHeroCard;
 exports.ValveInlineControl = ValveInlineControl;
 exports.VersionBadge = VersionBadge;
 exports.Vibrate = Vibrate;
+exports.ViewSwitch = ViewSwitch;
 exports.VodPlaybackProvider = VodPlaybackProvider;
 exports.Volume2 = Volume2;
 exports.VolumeX = VolumeX;