@camstack/ui-library 1.2.329 → 1.2.330

package/dist/index.js

@@ -5,7 +5,7 @@ import * as __mfHostReact from "react";
 import React, { Fragment, Suspense, cloneElement, createContext, createElement, forwardRef, lazy, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import * as __mfHostReactJsxRuntime from "react/jsx-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ALL_CAPABILITY_DEFINITIONS, CAM_PROFILE_ORDER, CLIP_STILL_DISPOSITION_HEADER, CLIP_STILL_REASON_CODE_HEADER, CLIP_STILL_REASON_HEADER, COMPOSER_ADDON_ID, CONTAINER_CHILD_PRIORITY, ConsumableLevelSchema, DEFAULT_DISPLAY_PREFERENCE, DEFAULT_EVENTS_BAND_BUFFER_SEC, DEVICE_HISTORY_ENERGY_KEY, DEVICE_HISTORY_QUERY_MANY_MAX_ITEMS, DEVICE_TYPE_CONTROL_KIND, DeviceExportStatusSchema, DeviceFeature, DeviceRole, DeviceType, EXTENSION_SLOTS, EXTENSION_SLOT_IDS, EventCategory, ExposedDeviceSchema, FIRST_LEVEL_MACRO_CLASSES, HISTORY_CATALOG, ICON_CATEGORIES, KNOWN_CAP_NAMES, MAX_SENSOR_TRIGGER_DEVICES, MODEL_PROVIDER_IDS, NAVIGATION_LIGHT_LEVEL_MAX, NAVIGATION_LIGHT_LEVEL_MIN, NODE_COLOR_IDS, NodeColorIdSchema, PALETTE_ENTRY_IDS, PET_FEEDER_MANUAL_FEED_MAX, PET_FEEDER_MANUAL_FEED_MIN, RECORDING_AUDIO_TRIGGER_OFFERED_DBFS, RECORDING_SOURCE_CAMSTACK_ADDON, REDACTED_SECRET, RecordingConfigSchema, RecordingStatusSchema, SECRET_CLEAR, SOURCE_CAP_ACTIVE_FIELD, STATIONARY_OVERLAY_STYLE, SUBJECT_PATH_DWELL_EPS, SUBJECT_PATH_FULL_FRAME_COVERAGE, SUBJECT_PATH_MAX_POINTS, TIMEZONES, USE_ROOT_MODEL_SETTING_KEY, assignNodeColorId, assignNodeColorId as assignNodeColorId$1, baseUnitOf, buildModelVariantGroups, buildSubjectPath, bundledCamstack, canConvertUnit, canonicalIconKey, clearModelBoundOverrides, clearModelBoundSetting, clusterStepSettingFieldsFor, collectModelBoundKeys, consumableFormOf, consumableKindOf, createDeviceProxy, createLazyTrpcSource, createSliceHandle, dehydrateSchema, deriveRecordingMode, describeModelVariant, displayUnitFor, effectiveStepSettings, findTimezone, formatParkedFor, formatReading, hasModelBoundOverrides, iconCategoryLabel, iconsInCategory, isDrawableSubjectPath, isKeychainStoredField, isModelScopedStepSettingKey, isReadingQuantity, isRootSuppliableStepId, isSecretClear, isSecretFieldView, isSecretMarker, modelBindingKey, normalizeUnit, paintHex, parseOccupancyScope, projectSubjectPath, publicEventCategories, resolveContainerPrimaryChild, resolveDeviceControlKind, resolveIconKey, resolveModelBoundSetting, resolveRecordingProfiles, resolveRootSupply, resolveVariantModelId, resolveViewableDeviceIds, searchIcons, selectAssignedProfileSlots, stepSettingSource, subjectPathSampleFromBox, subjectPathSvgPoints, tryConvertUnit, unitsForDimension, withFieldFrom, withoutField, writeModelBoundSetting } from "@camstack/types";
+import { ALL_CAPABILITY_DEFINITIONS, CAM_PROFILE_ORDER, CLIP_STILL_DISPOSITION_HEADER, CLIP_STILL_REASON_CODE_HEADER, CLIP_STILL_REASON_HEADER, COMPOSER_ADDON_ID, CONTAINER_CHILD_PRIORITY, ConsumableLevelSchema, DEFAULT_DISPLAY_PREFERENCE, DEFAULT_EVENTS_BAND_BUFFER_SEC, DEVICE_HISTORY_ENERGY_KEY, DEVICE_HISTORY_QUERY_MANY_MAX_ITEMS, DEVICE_TYPE_CONTROL_KIND, DeviceExportStatusSchema, DeviceFeature, DeviceRole, DeviceType, EXTENSION_SLOTS, EXTENSION_SLOT_IDS, EventCategory, ExposedDeviceSchema, FIRST_LEVEL_MACRO_CLASSES, HISTORY_CATALOG, ICON_CATEGORIES, KNOWN_CAP_NAMES, MAX_SENSOR_TRIGGER_DEVICES, MODEL_PROVIDER_IDS, NAVIGATION_LIGHT_LEVEL_MAX, NAVIGATION_LIGHT_LEVEL_MIN, NODE_COLOR_IDS, NodeColorIdSchema, PALETTE_ENTRY_IDS, PET_FEEDER_MANUAL_FEED_MAX, PET_FEEDER_MANUAL_FEED_MIN, QUANTITY_BASE, RECORDING_AUDIO_TRIGGER_OFFERED_DBFS, RECORDING_SOURCE_CAMSTACK_ADDON, REDACTED_SECRET, RecordingConfigSchema, RecordingStatusSchema, SECRET_CLEAR, SOURCE_CAP_ACTIVE_FIELD, STATIONARY_OVERLAY_STYLE, SUBJECT_PATH_DWELL_EPS, SUBJECT_PATH_FULL_FRAME_COVERAGE, SUBJECT_PATH_MAX_POINTS, TIMEZONES, USE_ROOT_MODEL_SETTING_KEY, assignNodeColorId, assignNodeColorId as assignNodeColorId$1, baseUnitOf, buildModelVariantGroups, buildSubjectPath, bundledCamstack, canConvertUnit, canonicalIconKey, clearModelBoundOverrides, clearModelBoundSetting, clusterStepSettingFieldsFor, collectModelBoundKeys, consumableFormOf, consumableKindOf, createDeviceProxy, createLazyTrpcSource, createSliceHandle, dehydrateSchema, deriveRecordingMode, describeModelVariant, displayUnitFor, effectiveStepSettings, findTimezone, formatParkedFor, formatReading, hasModelBoundOverrides, iconCategoryLabel, iconsInCategory, isDrawableSubjectPath, isKeychainStoredField, isModelScopedStepSettingKey, isReadingQuantity, isRootSuppliableStepId, isSecretClear, isSecretFieldView, isSecretMarker, modelBindingKey, normalizeUnit, paintHex, parseOccupancyScope, projectSubjectPath, publicEventCategories, resolveContainerPrimaryChild, resolveDeviceControlKind, resolveIconKey, resolveModelBoundSetting, resolveRecordingProfiles, resolveRootSupply, resolveVariantModelId, resolveViewableDeviceIds, searchIcons, selectAssignedProfileSlots, stepSettingSource, subjectPathSampleFromBox, subjectPathSvgPoints, tryConvertUnit, unitsForDimension, withFieldFrom, withoutField, writeModelBoundSetting } from "@camstack/types";
 import * as __mfHostTrpcReactQuery from "@trpc/react-query";
 import { createTRPCReact } from "@trpc/react-query";
 import * as __mfHostReactDOM from "react-dom";
@@ -22494,6 +22494,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(QUANTITY_BASE)) {
+		if (!isReadingQuantity(key) || NO_INFERENCE.has(key)) continue;
+		if (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 = 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 = useRef(null);
+	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__ */ 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__ */ jsx("p", {
+			className: "m-0 text-[10px] tabular-nums text-foreground-subtle",
+			children: view.body.heading
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "m-0 list-none p-0",
+			children: view.body.lines.map((line) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-baseline justify-between gap-3 text-xs",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate text-foreground-muted",
+					children: line.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 tabular-nums",
+					children: line.value
+				})]
+			}, line.id))
+		})]
+	});
+}
+function ChartTooltipShell({ spec, plotRef, kind, label, inline = false, children }) {
+	const shellRef = useRef(null);
+	const specRef = useRef(spec);
+	specRef.current = spec;
+	const interactionRef = useRef(HIDDEN_INTERACTION);
+	const dataXRef = useRef(null);
+	const [view, setView] = useState(null);
+	const pinned = view !== null && interactionRef.current.selection.pinned;
+	const commit = 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);
+		}
+	}, []);
+	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]);
+	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__ */ jsx(ChartTooltipCard, { view }) : null;
+	const live = view !== null && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ 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__ */ jsxs("span", {
+		ref: setShell,
+		...shared,
+		children: [
+			children,
+			tooltip,
+			live
+		]
+	}) : /* @__PURE__ */ jsxs("div", {
+		ref: setShell,
+		...shared,
+		children: [
+			children,
+			tooltip,
+			live
+		]
+	});
+}
 //#endregion
 //#region src/composites/charts/uplot-host.tsx
 /**
@@ -22524,7 +23159,7 @@ function loadUPlot() {
 	if (ctorPromise === null) ctorPromise = canDrawCanvas() ? import("./uPlot.esm-C_8LiAPm.js").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 = useRef(null);
 	const plotRef = useRef(null);
 	const [ctor, setCtor] = useState(null);
@@ -22556,6 +23191,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 () => {
@@ -22597,14 +23234,21 @@ function UPlotHost({ optionsKey, buildOptions, data, height, onInstance, classNa
 	const setHost = (el) => {
 		hostRef.current = el;
 	};
-	return inline ? /* @__PURE__ */ jsx("span", {
-		ref: setHost,
-		className: className ?? "block w-full min-w-0",
-		"data-chart-plot": ""
-	}) : /* @__PURE__ */ jsx("div", {
-		ref: setHost,
-		className: className ?? "w-full min-w-0",
-		"data-chart-plot": ""
+	return /* @__PURE__ */ jsx(ChartTooltipShell, {
+		spec: tooltip,
+		plotRef,
+		kind,
+		label,
+		inline,
+		children: inline ? /* @__PURE__ */ jsx("span", {
+			ref: setHost,
+			className: className ?? "block w-full min-w-0",
+			"data-chart-plot": ""
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: setHost,
+			className: className ?? "w-full min-w-0",
+			"data-chart-plot": ""
+		})
 	});
 }
 //#endregion
@@ -22619,7 +23263,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;
@@ -22631,6 +23275,37 @@ function BarSeries({ title, layers, buckets, bucketMs, range, unit = null, forma
 	]);
 	const totals = useMemo(() => bucketTotals(buckets, layers.length), [buckets, layers.length]);
 	const [cursorIdx, setCursorIdx] = useState(null);
+	const tooltip = 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 = useRef({
 		buckets,
 		tops,
@@ -22793,7 +23468,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__ */ jsxs("div", {
 		className: cn("relative min-w-0", className),
@@ -66218,10 +66896,6 @@ function RetrainReviewBadge({ kind, approximate = false, className, ...props })
 }
 //#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 ?? "";
@@ -66289,7 +66963,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 = useMemo(() => buildTimeSeriesModel(series, stacked), [series, stacked]);
 	const [cursorIdx, setCursorIdx] = useState(null);
@@ -66432,6 +67138,20 @@ function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacke
 		fmt,
 		specFor
 	]);
+	const tooltip = 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);
@@ -66493,7 +67213,10 @@ function TimeSeriesChart({ title, series, range, height = DEFAULT_HEIGHT, stacke
 			optionsKey,
 			buildOptions,
 			data,
-			height
+			height,
+			tooltip,
+			kind: "lines",
+			label: title
 		})
 	});
 }
@@ -66512,6 +67235,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;
@@ -66586,6 +67336,10 @@ function StateTimeline({ title, rows, range, syncKey, pending = false, emptyMess
 			}]
 		}
 	}), [optionsKey]);
+	const tooltip = useMemo(() => ({
+		...stateTooltip(rows, range),
+		onDataX: (dataX) => setCursorT(dataX)
+	}), [rows, range]);
 	const durations = useMemo(() => rows.map((r) => r.totals ?? timeInState(r.segments)), [rows]);
 	const summary = rows.map((row, i) => {
 		const parts = row.states.map((s) => {
@@ -66639,7 +67393,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
 					})
 				})]
 			}),
@@ -66684,7 +67441,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 = 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 = useMemo(() => [points.map((p) => p.x), points.map((p) => p.v)], [points]);
 	const buildOptions = useCallback((_w, lib) => ({
 		legend: { show: false },
@@ -66720,7 +67508,10 @@ function Sparkline({ points, ariaLabel, token = "chart-series-a", height = 32, w
 			buildOptions,
 			data,
 			height,
-			inline: true
+			inline: true,
+			tooltip,
+			kind: "spark",
+			label: ariaLabel
 		})
 	});
 }