@camstack/ui-library 1.2.304 → 1.2.306

package/dist/index.cjs

@@ -888,6 +888,19 @@ var Cat = require_createLucideIcon.createLucideIcon("cat", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var ChartLine = require_createLucideIcon.createLucideIcon("chart-line", [["path", {
+	d: "M3 3v16a2 2 0 0 0 2 2h16",
+	key: "c24i48"
+}], ["path", {
+	d: "m19 9-5 5-4-4-3 3",
+	key: "2osh9i"
+}]]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Check = require_createLucideIcon.createLucideIcon("check", [["path", {
 	d: "M20 6 9 17l-5-5",
 	key: "1gmf2c"
@@ -2233,6 +2246,26 @@ var Heater = require_createLucideIcon.createLucideIcon("heater", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var History = require_createLucideIcon.createLucideIcon("history", [
+	["path", {
+		d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+		key: "1357e3"
+	}],
+	["path", {
+		d: "M3 3v5h5",
+		key: "1xhq8a"
+	}],
+	["path", {
+		d: "M12 7v5l4 2",
+		key: "1fdv2h"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var House = require_createLucideIcon.createLucideIcon("house", [["path", {
 	d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8",
 	key: "5wwlr5"
@@ -5819,7 +5852,7 @@ function allDeviceTypeFilterOptions(t = defaultUiText) {
 */
 var fullTable;
 var pending;
-var failure;
+var failure$1;
 var version = 0;
 var listeners$1 = /* @__PURE__ */ new Set();
 function publish() {
@@ -5836,12 +5869,12 @@ function lucideExportName(key) {
 */
 function loadIconGlyphs() {
 	if (fullTable !== void 0) return Promise.resolve();
-	if (failure !== void 0) return Promise.reject(failure);
-	pending ??= Promise.resolve().then(() => require("./icons-B1AFXUaZ.cjs")).then((module) => {
+	if (failure$1 !== void 0) return Promise.reject(failure$1);
+	pending ??= Promise.resolve().then(() => require("./icons-BTux33dH.cjs")).then((module) => {
 		fullTable = module;
 		publish();
 	}, (error) => {
-		failure = error;
+		failure$1 = error;
 		publish();
 		throw error;
 	});
@@ -5849,7 +5882,7 @@ function loadIconGlyphs() {
 }
 /** Has the lazy glyph chunk failed to load? (Then only the fast table answers.) */
 function iconGlyphsFailed() {
-	return failure !== void 0;
+	return failure$1 !== void 0;
 }
 /** Is the full table loaded? */
 function iconGlyphsLoaded() {
@@ -5866,7 +5899,7 @@ function resolveDisplayIcon(name) {
 	const fast = FAST_ICON_GLYPHS[key];
 	if (fast !== void 0) return fast;
 	if (fullTable !== void 0) return fullTable[lucideExportName(key)];
-	if (failure === void 0) loadIconGlyphs().catch(() => void 0);
+	if (failure$1 === void 0) loadIconGlyphs().catch(() => void 0);
 }
 function subscribe(listener) {
 	listeners$1.add(listener);
@@ -9588,7 +9621,7 @@ var TILE_ROW_PX = 32;
 /** Matches the `h-72` of the scroll area. */
 var VIEWPORT_PX = 288;
 var OVERSCAN_PX = 96;
-function chunk(keys) {
+function chunk$1(keys) {
 	const rows = [];
 	for (let i = 0; i < keys.length; i += TILES_PER_ROW) rows.push(keys.slice(i, i + TILES_PER_ROW));
 	return rows;
@@ -9598,7 +9631,7 @@ function heightOf(row) {
 }
 /** An empty query shows every category as a section; a query shows one ranked list. */
 function buildRows(query, extraWords) {
-	if (query.trim().length > 0) return chunk((0, _camstack_types.searchIcons)(query, extraWords).map((h) => h.entry.key)).map((row, i) => ({
+	if (query.trim().length > 0) return chunk$1((0, _camstack_types.searchIcons)(query, extraWords).map((h) => h.entry.key)).map((row, i) => ({
 		kind: "tiles",
 		id: `r${i}`,
 		keys: row
@@ -9609,7 +9642,7 @@ function buildRows(query, extraWords) {
 			kind: "header",
 			id: `h-${category}`,
 			category
-		}, ...chunk(keys).map((row, i) => ({
+		}, ...chunk$1(keys).map((row, i) => ({
 			kind: "tiles",
 			id: `${category}-${i}`,
 			keys: row
@@ -10754,6 +10787,8 @@ var useDeviceHistoryListNodeSeries = trpc.deviceHistory.listNodeSeries.useQuery;
 var useDeviceHistoryQuery = trpc.deviceHistory.query.useQuery;
 /** Generated alias around `trpc.deviceHistory.queryNode.useQuery`. */
 var useDeviceHistoryQueryNode = trpc.deviceHistory.queryNode.useQuery;
+/** Generated alias around `trpc.deviceHistory.queryMany.useQuery`. */
+var useDeviceHistoryQueryMany = trpc.deviceHistory.queryMany.useQuery;
 /** Generated alias around `trpc.deviceHistory.declareSeries.useMutation`. */
 var useDeviceHistoryDeclareSeries = trpc.deviceHistory.declareSeries.useMutation;
 /** Generated alias around `trpc.deviceHistory.record.useMutation`. */
@@ -20883,7 +20918,7 @@ function bucketMsForSpan(spanMs) {
 * - `pct` is via pctForMs (first=0, last=100).
 * - `label` is a localised HH:MM clock string.
 */
-function axisTicks(fromMs, toMs, count) {
+function axisTicks$1(fromMs, toMs, count) {
 	if (count <= 1) return [{
 		pct: 0,
 		label: new Date(fromMs).toLocaleTimeString(void 0, {
@@ -21089,43 +21124,1193 @@ function ErrorBox({ message, title, onRetry, action, variant = "danger", classNa
 	});
 }
 //#endregion
+//#region src/composites/charts/chart-palette.ts
+/**
+* The chart family's colours — theme tokens only.
+*
+* Categorical identity comes from the eight `--color-chart-series-*` tokens in
+* `tailwind/camstack-theme.css`, in FIXED order (a blue, b magenta, c yellow,
+* d aqua, e orange, f violet, g green, h red). A series keeps its slot for as
+* long as it is on screen: the caller assigns the index, never the rank, so a
+* filter that hides one series does not repaint the others.
+*
+* Past eight, a slot is reused with a dash pattern (composite encoding) — a
+* generated ninth hue would be indistinguishable from one of the eight.
+*
+* Canvas cannot read `var(--…)`, so a token is resolved through
+* `getComputedStyle` at DRAW time: a theme switch (`.dark` / `.light` on
+* `<html>`) followed by a redraw picks the new value up with no re-creation.
+*/
+/** The categorical slots, in their fixed order. */
+var CHART_SERIES_TOKENS = [
+	"chart-series-a",
+	"chart-series-b",
+	"chart-series-c",
+	"chart-series-d",
+	"chart-series-e",
+	"chart-series-f",
+	"chart-series-g",
+	"chart-series-h"
+];
+/** Dash patterns (canvas `setLineDash`, CSS px) for the 1st, 2nd and 3rd lap of the palette. */
+var DASH_LAPS = [
+	[],
+	[6, 4],
+	[2, 3]
+];
+/** The style of the series at `index` (0-based, its stable identity slot). */
+function chartSeriesStyle(index) {
+	const i = Math.max(0, Math.floor(index));
+	return {
+		token: CHART_SERIES_TOKENS[i % CHART_SERIES_TOKENS.length] ?? "chart-series-a",
+		dash: DASH_LAPS[Math.floor(i / CHART_SERIES_TOKENS.length) % DASH_LAPS.length] ?? []
+	};
+}
+/** Spelled out so Tailwind finds every class (a built class name emits no rule). */
+var SWATCH_FILL = {
+	"chart-series-a": "bg-chart-series-a",
+	"chart-series-b": "bg-chart-series-b",
+	"chart-series-c": "bg-chart-series-c",
+	"chart-series-d": "bg-chart-series-d",
+	"chart-series-e": "bg-chart-series-e",
+	"chart-series-f": "bg-chart-series-f",
+	"chart-series-g": "bg-chart-series-g",
+	"chart-series-h": "bg-chart-series-h",
+	border: "bg-border"
+};
+var SWATCH_LINE = {
+	"chart-series-a": "border-chart-series-a",
+	"chart-series-b": "border-chart-series-b",
+	"chart-series-c": "border-chart-series-c",
+	"chart-series-d": "border-chart-series-d",
+	"chart-series-e": "border-chart-series-e",
+	"chart-series-f": "border-chart-series-f",
+	"chart-series-g": "border-chart-series-g",
+	"chart-series-h": "border-chart-series-h",
+	border: "border-border"
+};
+/** The utility that fills a swatch with `token`. */
+function swatchFillClass(token) {
+	return SWATCH_FILL[token];
+}
+/** The utility that colours a dashed swatch's line with `token`. */
+function swatchLineClass(token) {
+	return SWATCH_LINE[token];
+}
+/**
+* Resolve a theme token to the colour the canvas paints. Reads the computed
+* value of `--color-<token>` on the chart's own root (so a scoped theme block
+* wins); answers `transparent` when the document has no value (a test DOM).
+*/
+function resolveChartColor(token, el) {
+	if (typeof window === "undefined" || typeof getComputedStyle !== "function") return "transparent";
+	const root = el ?? document.documentElement;
+	const value = getComputedStyle(root).getPropertyValue(`--color-${token}`).trim();
+	return value.length > 0 ? value : "transparent";
+}
+var SIX_DIGIT_HEX = /^#[0-9a-f]{6}$/i;
+/**
+* `color` with `alpha` (0..1). A resolved token is a six-digit hex, which
+* becomes the eight-digit form every canvas accepts; anything else falls back
+* to `color-mix`.
+*/
+function withAlpha(color, alpha) {
+	const a = Math.min(1, Math.max(0, alpha));
+	if (SIX_DIGIT_HEX.test(color)) return `${color}${Math.round(a * 255).toString(16).padStart(2, "0")}`;
+	return `color-mix(in srgb, ${color} ${String(Math.round(a * 100))}%, transparent)`;
+}
+//#endregion
+//#region src/composites/charts/chart-frame.tsx
+function ChartFrame({ title, actions, readoutTime, legend, summary, footer, placeholder, controls, className, children }) {
+	const single = legend.length === 1 ? legend[0] : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+		className: cn("min-w-0 m-0", className),
+		"data-chart-frame": "",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-baseline justify-between gap-2 mb-1 min-w-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
+					className: "text-[10px] uppercase tracking-wider text-foreground-subtle truncate min-w-0",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 shrink-0",
+					children: [
+						readoutTime && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] tabular-nums text-foreground-subtle",
+							children: readoutTime
+						}),
+						single?.value !== void 0 && placeholder === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegendValue, { entry: single }),
+						actions
+					]
+				})]
+			}),
+			placeholder ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "img",
+				"aria-label": summary,
+				className: "min-w-0",
+				children
+			}),
+			placeholder === void 0 && controls,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "sr-only",
+				children: summary
+			}),
+			legend.length > 1 && placeholder === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "flex flex-wrap items-center gap-x-3 gap-y-0.5 mt-1 list-none p-0 m-0",
+				children: legend.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					className: "min-w-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegendItem, { entry })
+				}, entry.id))
+			}),
+			footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-1 text-[10px] text-foreground-subtle",
+				children: footer
+			})
+		]
+	});
+}
+/** The swatch: a filled square, or a dashed bar for a dashed series. */
+function ChartSwatch({ token, dashed }) {
+	return dashed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: cn("inline-block h-0 w-3 border-t-2 border-dashed shrink-0", swatchLineClass(token))
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: cn("inline-block h-2 w-2 rounded-[2px] shrink-0", swatchFillClass(token))
+	});
+}
+function LegendItem({ entry }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: cn("inline-flex items-center gap-1 text-[10px] min-w-0", entry.muted ? "text-foreground-subtle" : "text-foreground-muted"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartSwatch, {
+				token: entry.token,
+				dashed: entry.dashed
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "truncate",
+				children: entry.label
+			}),
+			entry.value !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "tabular-nums text-foreground",
+				children: entry.value
+			})
+		]
+	});
+}
+function LegendValue({ entry }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "inline-flex items-center gap-1 text-[11px] tabular-nums text-foreground",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartSwatch, {
+			token: entry.token,
+			dashed: entry.dashed
+		}), entry.value]
+	});
+}
+/** The plot-sized box for an empty or pending chart: a dashed outline and one line of text. */
+function ChartPlaceholder({ message, height }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn(height === "sm" ? "h-8" : height === "md" ? "h-24" : "h-40", "flex items-center justify-center rounded border border-dashed border-border text-[10px] text-foreground-subtle text-center px-2"),
+		children: message
+	});
+}
+//#endregion
+//#region src/composites/charts/chart-data.ts
+/** Join several series onto one x array, inserting a `null` inside every hole wider than its `gapMs`. */
+function alignSeries(inputs) {
+	const sorted = inputs.map((s) => [...s.points].sort((a, b) => a.t - b.t));
+	const breaks = sorted.map((pts, i) => gapBreaks(pts, inputs[i]?.gapMs));
+	const xset = /* @__PURE__ */ new Set();
+	for (const pts of sorted) for (const p of pts) xset.add(p.t);
+	for (const b of breaks) for (const t of b) xset.add(t);
+	const xs = [...xset].sort((a, b) => a - b);
+	const index = /* @__PURE__ */ new Map();
+	xs.forEach((x, i) => index.set(x, i));
+	const blank = () => xs.map(() => void 0);
+	const ys = [];
+	const mins = [];
+	const maxs = [];
+	sorted.forEach((pts, si) => {
+		const y = blank();
+		const lo = blank();
+		const hi = blank();
+		for (const t of breaks[si] ?? []) {
+			const i = index.get(t);
+			if (i !== void 0) {
+				y[i] = null;
+				lo[i] = null;
+				hi[i] = null;
+			}
+		}
+		for (const p of pts) {
+			const i = index.get(p.t);
+			if (i === void 0) continue;
+			y[i] = p.v;
+			if (p.min !== void 0) lo[i] = p.min;
+			if (p.max !== void 0) hi[i] = p.max;
+		}
+		ys.push(y);
+		mins.push(lo);
+		maxs.push(hi);
+	});
+	return {
+		xs,
+		ys,
+		mins,
+		maxs
+	};
+}
+/** The x of a `null` placed inside every hole: one millisecond after the sample before it. */
+function gapBreaks(points, gapMs) {
+	if (gapMs === void 0 || !(gapMs > 0)) return [];
+	const out = [];
+	for (let i = 1; i < points.length; i++) {
+		const prev = points[i - 1];
+		const cur = points[i];
+		if (prev && cur && cur.t - prev.t > gapMs) out.push(prev.t + 1);
+	}
+	return out;
+}
+/**
+* The holes every series shares (the intersection), so the chart shades only
+* what NOBODY measured. Series without `gapMs` never contribute a hole and so
+* make the intersection empty: a held value is not unmeasured.
+*/
+function sharedGapSpans(inputs) {
+	if (inputs.length === 0) return [];
+	let acc = null;
+	for (const s of inputs) {
+		const own = ownGaps(s);
+		acc = acc === null ? own : intersectSpans(acc, own);
+		if (acc.length === 0) return [];
+	}
+	return acc ?? [];
+}
+function ownGaps(s) {
+	const gapMs = s.gapMs;
+	if (gapMs === void 0 || !(gapMs > 0)) return [];
+	const pts = [...s.points].sort((a, b) => a.t - b.t);
+	const out = [];
+	for (let i = 1; i < pts.length; i++) {
+		const prev = pts[i - 1];
+		const cur = pts[i];
+		if (prev && cur && cur.t - prev.t > gapMs) out.push({
+			from: prev.t,
+			to: cur.t
+		});
+	}
+	return out;
+}
+function intersectSpans(a, b) {
+	const out = [];
+	for (const x of a) for (const y of b) {
+		const from = Math.max(x.from, y.from);
+		const to = Math.min(x.to, y.to);
+		if (to > from) out.push({
+			from,
+			to
+		});
+	}
+	return out;
+}
+/**
+* Cumulative sums for a stacked area: `out[i] = ys[0] + … + ys[i]`. A stack
+* level is unknown (`null`) as soon as any layer under it is unknown, and an
+* alignment filler stays a filler.
+*/
+function stackSeries(ys) {
+	const out = [];
+	ys.forEach((row, si) => {
+		const below = si === 0 ? null : out[si - 1];
+		out.push(row.map((v, i) => {
+			if (v === void 0) return void 0;
+			if (v === null) return null;
+			if (below === null || below === void 0) return v;
+			const b = below[i];
+			if (b === null) return null;
+			if (b === void 0) return v;
+			return b + v;
+		}));
+	});
+	return out;
+}
+/**
+* The value a reader sees at index `idx`: the nearest sample at or before it
+* that is not an alignment filler. A `null` there is answered as unknown.
+*/
+function valueAtOrBefore(xs, ys, idx) {
+	for (let i = Math.min(idx, xs.length - 1); i >= 0; i--) {
+		const v = ys[i];
+		if (v !== void 0) return v;
+	}
+	return null;
+}
+/**
+* Turn change points into segments clipped to [from, to]. `before` is the
+* state in force when the window opens (the last change before it); without
+* it the window starts unknown until the first change.
+*/
+function segmentsFromChanges(changes, from, to, before = null) {
+	const sorted = [...changes].filter((c) => c.t < to).sort((a, b) => a.t - b.t);
+	const out = [];
+	let cursor = from;
+	let state = before;
+	for (const c of sorted) {
+		if (c.t <= from) {
+			state = c.state;
+			continue;
+		}
+		if (c.state === state) continue;
+		out.push({
+			from: cursor,
+			to: c.t,
+			state
+		});
+		cursor = c.t;
+		state = c.state;
+	}
+	if (to > cursor) out.push({
+		from: cursor,
+		to,
+		state
+	});
+	return out.filter((s) => s.to > s.from && s.state !== null);
+}
+/** Total milliseconds per state over the segments (unknown spans are not counted). */
+function timeInState(segments) {
+	const out = /* @__PURE__ */ new Map();
+	for (const s of segments) {
+		if (s.state === null) continue;
+		out.set(s.state, (out.get(s.state) ?? 0) + Math.max(0, s.to - s.from));
+	}
+	return out;
+}
+/** The state in force at `t`, or `null` when nothing was recorded there. */
+function stateAt(segments, t) {
+	for (const s of segments) if (t >= s.from && t < s.to) return s.state;
+	return null;
+}
+var MINUTE$1 = 6e4;
+var HOUR = 60 * MINUTE$1;
+var DAY = 24 * HOUR;
+/** `2h 14m`, `3d 4h`, `45s` — two units at most, for a legend. */
+function formatSpan(ms) {
+	if (!(ms > 0)) return "0s";
+	if (ms < MINUTE$1) return `${String(Math.round(ms / 1e3))}s`;
+	if (ms < HOUR) return `${String(Math.floor(ms / MINUTE$1))}m`;
+	if (ms < DAY) {
+		const h = Math.floor(ms / HOUR);
+		const m = Math.floor(ms % HOUR / MINUTE$1);
+		return m > 0 ? `${String(h)}h ${String(m)}m` : `${String(h)}h`;
+	}
+	const d = Math.floor(ms / DAY);
+	const h = Math.floor(ms % DAY / HOUR);
+	return h > 0 ? `${String(d)}d ${String(h)}h` : `${String(d)}d`;
+}
+var TIME_HM = {
+	hour: "2-digit",
+	minute: "2-digit"
+};
+var TIME_HMS = {
+	hour: "2-digit",
+	minute: "2-digit",
+	second: "2-digit"
+};
+var DATE_DM = {
+	day: "2-digit",
+	month: "short"
+};
+var DATE_MY = {
+	month: "short",
+	year: "2-digit"
+};
+/**
+* A wall-clock label at the precision the window's length justifies:
+* seconds under ten minutes, `HH:MM` within two days, the date past that,
+* month + year past ~4 months.
+*/
+function formatTimeLabel(t, spanMs) {
+	const d = new Date(t);
+	if (spanMs < 10 * MINUTE$1) return d.toLocaleTimeString(void 0, TIME_HMS);
+	if (spanMs <= 2 * DAY) return d.toLocaleTimeString(void 0, TIME_HM);
+	if (spanMs <= 120 * DAY) return d.toLocaleDateString(void 0, DATE_DM);
+	return d.toLocaleDateString(void 0, DATE_MY);
+}
+/** A cursor readout time: always the full instant at the window's precision. */
+function formatCursorTime(t, spanMs) {
+	const d = new Date(t);
+	if (spanMs <= 2 * DAY) return d.toLocaleTimeString(void 0, spanMs < 10 * MINUTE$1 ? TIME_HMS : TIME_HM);
+	return `${d.toLocaleDateString(void 0, DATE_DM)} ${d.toLocaleTimeString(void 0, TIME_HM)}`;
+}
+//#endregion
+//#region src/composites/charts/chart-scale.ts
+var LINEAR_MAX_MANTISSAS = [
+	1,
+	2,
+	5,
+	10
+];
+var BYTE_MAX_MANTISSAS = [
+	1,
+	2,
+	4,
+	8,
+	16,
+	32,
+	64,
+	128,
+	256,
+	512,
+	1024
+];
+/** Steps a reader adds up without arithmetic; 1.25 / 1.66 are what an equal split of anything gives. */
+var READABLE_STEP_MANTISSAS = [
+	1,
+	1.5,
+	2,
+	2.5,
+	3,
+	4,
+	5
+];
+/** Interval counts to try, in preference order: four is as many gridlines as a short plot keeps legible. */
+var AXIS_INTERVAL_CANDIDATES = [
+	4,
+	3,
+	5,
+	2
+];
+var MANTISSA_EPSILON = 1e-9;
+function isReadableStep(step, scale) {
+	if (!Number.isFinite(step) || step <= 0) return false;
+	if (scale === "bytes") {
+		if (!Number.isInteger(step)) return false;
+		const mantissa = step / 1024 ** Math.floor(Math.log(step) / Math.log(1024));
+		return READABLE_STEP_MANTISSAS.some((m) => Math.abs(mantissa - m) < MANTISSA_EPSILON);
+	}
+	const mantissa = step / 10 ** Math.floor(Math.log10(step));
+	return READABLE_STEP_MANTISSAS.some((m) => Math.abs(mantissa - m) < MANTISSA_EPSILON);
+}
+/**
+* Nice upper bound of a value axis that starts at zero. `floor` is returned
+* VERBATIM when nothing exceeds it, so an idle series keeps the scale the
+* caller chose instead of a 0–0.3 axis on which noise looks like load.
+*/
+function niceMax(values, floor, scale = "linear") {
+	let max = 0;
+	for (const v of values) if (v !== null && Number.isFinite(v) && v > max) max = v;
+	if (max <= floor) return floor;
+	if (scale === "bytes") {
+		const magnitude = 1024 ** Math.floor(Math.log(max) / Math.log(1024));
+		for (const mantissa of BYTE_MAX_MANTISSAS) {
+			const candidate = mantissa * magnitude;
+			if (candidate >= max) return candidate;
+		}
+		return 1024 * magnitude;
+	}
+	const magnitude = 10 ** Math.floor(Math.log10(max));
+	for (const mantissa of LINEAR_MAX_MANTISSAS) {
+		const candidate = mantissa * magnitude;
+		if (candidate >= max) return candidate;
+	}
+	return 10 * magnitude;
+}
+/** Gridline values for an axis topping out at `max`, ascending, `max` last; zero is the baseline, not a tick. */
+function axisTicks(max, scale = "linear") {
+	if (!Number.isFinite(max) || max <= 0) return [];
+	const intervals = AXIS_INTERVAL_CANDIDATES.find((d) => isReadableStep(max / d, scale)) ?? AXIS_INTERVAL_CANDIDATES[AXIS_INTERVAL_CANDIDATES.length - 1] ?? 2;
+	const step = max / intervals;
+	const ticks = [];
+	for (let i = 1; i <= intervals; i++) ticks.push(step * i);
+	return ticks;
+}
+/**
+* Nice [min, max] for a series that need NOT start at zero (a temperature, a
+* dBFS level): the data range padded by a tenth and rounded outward to a
+* readable step. A flat series gets a ±1 window so it is not a degenerate axis.
+*/
+function niceRange(values) {
+	let lo = Number.POSITIVE_INFINITY;
+	let hi = Number.NEGATIVE_INFINITY;
+	for (const v of values) {
+		if (v === null || !Number.isFinite(v)) continue;
+		if (v < lo) lo = v;
+		if (v > hi) hi = v;
+	}
+	if (!Number.isFinite(lo) || !Number.isFinite(hi)) return null;
+	if (hi - lo < 1e-9) return [lo - 1, hi + 1];
+	const pad = (hi - lo) * .1;
+	const span = hi - lo + 2 * pad;
+	const magnitude = 10 ** Math.floor(Math.log10(span / 4));
+	const step = [
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].map((m) => m * magnitude).find((st) => span / st <= 6) ?? magnitude * 10;
+	return [Math.floor((lo - pad) / step) * step, Math.ceil((hi + pad) / step) * step];
+}
+/**
+* How many sampling intervals of silence make a HOLE rather than a late tick:
+* past any plausible delivery jitter, well inside the shortest outage worth seeing.
+*/
+var GAP_INTERVAL_FACTOR = 2.5;
+/** The gap threshold for a series sampled every `intervalMs` — derived, never a literal. */
+function gapThresholdMs(intervalMs) {
+	return intervalMs * GAP_INTERVAL_FACTOR;
+}
+//#endregion
+//#region src/composites/charts/chart-uplot.ts
+var AXIS_FONT_PX = 10;
+function axisFont() {
+	const family = typeof document !== "undefined" && document.body ? getComputedStyle(document.body).fontFamily : "sans-serif";
+	return `${String(AXIS_FONT_PX)}px ${family}`;
+}
+/** The x axis: wall-clock time under the plot, at the window's precision. */
+function timeAxis(spanMs, show = true) {
+	return {
+		show,
+		scale: "x",
+		side: 2,
+		size: show ? 22 : 0,
+		gap: 4,
+		font: axisFont(),
+		stroke: () => resolveChartColor("foreground-subtle"),
+		grid: { show: false },
+		ticks: {
+			show,
+			stroke: () => resolveChartColor("border"),
+			width: 1,
+			size: 3
+		},
+		space: 70,
+		values: (_u, splits) => splits.map((t) => formatTimeLabel(t, spanMs()))
+	};
+}
+/** A y scale's range from the values it carries, per the axis spec. */
+function valueRange(values, spec) {
+	if (spec.fixed) return spec.fixed;
+	const defined = values.filter((v) => typeof v === "number" && Number.isFinite(v));
+	if ((spec.zeroBased ?? true) && defined.every((v) => v >= 0)) return [0, niceMax(defined, spec.floor ?? 0, spec.scale ?? "linear") || 1];
+	return niceRange(defined) ?? [0, 1];
+}
+/** Steps a reader adds up without arithmetic, as mantissas over a power of ten. */
+var READABLE_STEPS = [
+	1,
+	2,
+	2.5,
+	5
+];
+/** Tick positions for a value axis over `range`: readable steps, 3–6 intervals. */
+function valueSplits(range, spec) {
+	const [lo, hi] = range;
+	if (lo === 0 && hi > 0) return [...axisTicks(hi, spec.scale ?? "linear")];
+	const span = hi - lo;
+	if (!(span > 0)) return [lo];
+	const magnitude = 10 ** Math.floor(Math.log10(span / 4));
+	const step = [...READABLE_STEPS, 10].map((m) => m * magnitude).find((st) => span / st <= 6) ?? span / 4;
+	const out = [];
+	for (let v = Math.ceil(lo / step - 1e-9) * step; v <= hi + 1e-9; v += step) out.push(Math.round(v / step) * step);
+	return out;
+}
+/** One value axis. `side` 3 = left, 1 = right. */
+function valueAxis(scaleKey, side, format, showGrid) {
+	return {
+		scale: scaleKey,
+		side,
+		font: axisFont(),
+		size: (_u, values) => {
+			const longest = (values ?? []).reduce((m, v) => Math.max(m, String(v).length), 0);
+			return Math.max(28, Math.min(72, longest * 6 + 10));
+		},
+		gap: 4,
+		stroke: () => resolveChartColor("foreground-subtle"),
+		grid: {
+			show: showGrid,
+			stroke: () => withAlpha(resolveChartColor("foreground-subtle"), .18),
+			width: 1
+		},
+		ticks: { show: false },
+		values: (_u, splits) => splits.map((v) => format(v))
+	};
+}
+/** The cursor: a vertical crosshair, synced across every chart with the same key. */
+function chartCursor(syncKey) {
+	return {
+		y: false,
+		drag: {
+			x: false,
+			y: false,
+			setScale: false
+		},
+		points: {
+			size: 6,
+			width: 1.5
+		},
+		focus: { prox: 16 },
+		...syncKey !== void 0 ? { sync: {
+			key: syncKey,
+			setSeries: false
+		} } : {}
+	};
+}
+/**
+* Shade every hole nobody measured, UNDER the series, so an outage reads as
+* missing ground and never as a quiet period.
+*/
+function gapShadeHook(spans) {
+	return (u) => {
+		const list = spans();
+		if (list.length === 0) return;
+		const ctx = u.ctx;
+		ctx.save();
+		ctx.fillStyle = withAlpha(resolveChartColor("foreground-subtle"), .12);
+		for (const s of list) {
+			const x0 = u.valToPos(s.from, "x", true);
+			const x1 = u.valToPos(s.to, "x", true);
+			ctx.fillRect(x0, u.bbox.top, Math.max(1, x1 - x0), u.bbox.height);
+		}
+		ctx.restore();
+	};
+}
+var BYTE_UNITS = new Set([
+	"B",
+	"bytes",
+	"byte"
+]);
+/** Is this unit a byte count (binary axis and formatter)? */
+function isByteUnit(unit) {
+	return unit !== null && unit !== void 0 && BYTE_UNITS.has(unit);
+}
+/** Units that live far from zero: their axis is padded around the data instead. */
+var FLOATING_UNITS = new Set([
+	"°C",
+	"°F",
+	"K",
+	"dBFS",
+	"dB",
+	"dBm",
+	"hPa",
+	"mbar",
+	"inHg"
+]);
+/** The default axis spec for a unit. */
+function defaultAxisSpec(unit) {
+	if (isByteUnit(unit)) return { scale: "bytes" };
+	if (unit === "%") return { floor: 10 };
+	if (unit !== null && unit !== void 0 && FLOATING_UNITS.has(unit)) return { zeroBased: false };
+	return {};
+}
+/** Binary byte count: `512 B`, `3.4 MB`, `1.2 GB`. */
+function formatChartBytes(bytes) {
+	if (!Number.isFinite(bytes)) return "—";
+	if (Math.abs(bytes) < 1024) return `${String(Math.round(bytes))} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB",
+		"PB"
+	];
+	let value = bytes / 1024;
+	let unit = "KB";
+	for (const u of units) {
+		unit = u;
+		if (Math.abs(value) < 1024) break;
+		value /= 1024;
+	}
+	return `${Math.abs(value) < 100 ? value.toFixed(1) : value.toFixed(0)} ${unit}`;
+}
+/** A number at a precision its magnitude justifies. */
+function formatChartNumber(v) {
+	if (!Number.isFinite(v)) return "—";
+	const abs = Math.abs(v);
+	if (abs >= 1e3) return Math.round(v).toLocaleString();
+	if (abs >= 100) return v.toFixed(0);
+	if (abs >= 10) return trimZeros(v.toFixed(1));
+	if (abs >= 1) return trimZeros(v.toFixed(2));
+	if (abs === 0) return "0";
+	return trimZeros(v.toFixed(3));
+}
+function trimZeros(s) {
+	return s.includes(".") ? s.replace(/\.?0+$/, "") : s;
+}
+/** The default value formatter: bytes binary, `%` glued, any other unit after a space. */
+function formatChartValue(v, unit) {
+	if (isByteUnit(unit)) return formatChartBytes(v);
+	const n = formatChartNumber(v);
+	if (unit === null || unit === void 0 || unit === "" || unit === "count") return n;
+	if (unit === "%") return `${n}%`;
+	return `${n} ${unit}`;
+}
+//#endregion
+//#region src/composites/charts/chart-window.tsx
+function ChartWindowToggle({ options, value, onChange, ariaLabel, className }) {
+	if (options.length < 2) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		className: cn("inline-flex items-center gap-0.5 border border-border rounded-md p-0.5 bg-background", className),
+		children: options.map(({ id, label }) => {
+			const active = value === id;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": active,
+				onClick: () => onChange(id),
+				className: cn("px-2 py-0.5 rounded text-[10px] font-medium transition-colors", active ? "bg-primary/10 text-primary" : "text-foreground-subtle hover:text-foreground"),
+				children: label
+			}, id);
+		})
+	});
+}
+//#endregion
+//#region src/composites/charts/bar-series-model.ts
+/** Cumulative tops per layer, bottom layer first: `tops[l][i] = values[0..l]` summed. */
+function stackBuckets(buckets, layers) {
+	const tops = [];
+	for (let l = 0; l < layers; l++) tops.push(buckets.map((b) => {
+		let sum = null;
+		for (let k = 0; k <= l; k++) {
+			const v = b.values[k];
+			if (v === null || v === void 0) continue;
+			sum = (sum ?? 0) + v;
+		}
+		return sum;
+	}));
+	return tops;
+}
+/** Total per layer and overall over the window (unknown buckets add nothing). */
+function bucketTotals(buckets, layers) {
+	const perLayer = Array.from({ length: layers }, () => 0);
+	let known = false;
+	for (const b of buckets) for (let l = 0; l < layers; l++) {
+		const v = b.values[l];
+		if (v === null || v === void 0) continue;
+		known = true;
+		perLayer[l] = (perLayer[l] ?? 0) + v;
+	}
+	return {
+		perLayer,
+		total: perLayer.reduce((a, b) => a + b, 0),
+		known
+	};
+}
+/** Index of the bucket that holds `t`, or `null`. */
+function bucketIndexAt(buckets, bucketMs, t) {
+	for (let i = 0; i < buckets.length; i++) {
+		const b = buckets[i];
+		if (b && t >= b.t && t < b.t + bucketMs) return i;
+	}
+	return null;
+}
+//#endregion
+//#region src/composites/charts/uplot-host.tsx
+/**
+* The one place the chart family touches uPlot.
+*
+* - uPlot is imported LAZILY: its module reads `matchMedia` at load time, and
+*   a document without a 2D canvas (a test DOM, a print preview) has nothing
+*   for it to draw on. There the chart's DOM half — title, legend, readout and
+*   the accessible summary — still renders; only the plot is absent.
+* - Width follows the container (`ResizeObserver`); the height is the caller's.
+* - A theme switch (`.dark` / `.light` on `<html>`) only REDRAWS: every colour
+*   is a function that resolves its token at draw time (`chart-palette.ts`).
+* - `optionsKey` decides when the plot is rebuilt (series set, axes); new
+*   `data` under the same key is a cheap `setData`.
+*/
+var ctorPromise = null;
+/** A 2D canvas this document can draw on — false in a test DOM. */
+function canDrawCanvas() {
+	if (typeof document === "undefined" || typeof window === "undefined") return false;
+	if (typeof window.matchMedia !== "function") return false;
+	try {
+		return document.createElement("canvas").getContext("2d") !== null;
+	} catch {
+		return false;
+	}
+}
+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 }) {
+	const hostRef = (0, react$1.useRef)(null);
+	const plotRef = (0, react$1.useRef)(null);
+	const [ctor, setCtor] = (0, react$1.useState)(null);
+	const latest = (0, react$1.useRef)({
+		buildOptions,
+		data,
+		onInstance
+	});
+	latest.current = {
+		buildOptions,
+		data,
+		onInstance
+	};
+	(0, react$1.useEffect)(() => {
+		let alive = true;
+		loadUPlot().then((c) => {
+			if (alive && c !== null) setCtor(() => c);
+		});
+		return () => {
+			alive = false;
+		};
+	}, []);
+	(0, react$1.useEffect)(() => {
+		const el = hostRef.current;
+		if (ctor === null || el === null) return;
+		const width = Math.max(1, Math.floor(el.clientWidth));
+		const u = new ctor({
+			...latest.current.buildOptions(width, ctor),
+			width,
+			height
+		}, latest.current.data, el);
+		plotRef.current = u;
+		latest.current.onInstance?.(u);
+		return () => {
+			latest.current.onInstance?.(null);
+			u.destroy();
+			plotRef.current = null;
+		};
+	}, [
+		ctor,
+		optionsKey,
+		height
+	]);
+	(0, react$1.useEffect)(() => {
+		plotRef.current?.setData(data);
+	}, [data]);
+	(0, react$1.useEffect)(() => {
+		const el = hostRef.current;
+		if (el === null || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver((entries) => {
+			const w = Math.floor(entries[0]?.contentRect.width ?? 0);
+			const u = plotRef.current;
+			if (u !== null && w > 0 && w !== u.width) u.setSize({
+				width: w,
+				height
+			});
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [height]);
+	(0, react$1.useEffect)(() => {
+		if (typeof MutationObserver === "undefined") return;
+		const mo = new MutationObserver(() => plotRef.current?.redraw(false, true));
+		mo.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		return () => mo.disconnect();
+	}, []);
+	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": ""
+	});
+}
+//#endregion
+//#region src/composites/charts/BarSeries.tsx
+/**
+* BarSeries — bucketed counts or deltas on wall time (uPlot), optionally
+* stacked, with a window total (kWh per hour with the day's sum, detections
+* per 5 minutes by class, event density under a recording timeline).
+*
+* Bars sit on their bucket's real span, so a missing bucket is a missing bar
+* and never a zero bar. `compact` drops the frame and axes for a strip that
+* 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 }) {
+	const t = useUiText();
+	const plotHeight = height ?? (compact ? 24 : 100);
+	const isStacked = stacked ?? layers.length > 1;
+	const fmt = (0, react$1.useCallback)((v) => (formatValue ?? formatChartValue)(v, unit), [formatValue, unit]);
+	const tops = (0, react$1.useMemo)(() => isStacked ? stackBuckets(buckets, layers.length) : layers.map((_l, li) => buckets.map((b) => b.values[li] ?? null)), [
+		buckets,
+		layers,
+		isStacked
+	]);
+	const totals = (0, react$1.useMemo)(() => bucketTotals(buckets, layers.length), [buckets, layers.length]);
+	const [cursorIdx, setCursorIdx] = (0, react$1.useState)(null);
+	const live = (0, react$1.useRef)({
+		buckets,
+		tops,
+		range,
+		selectedIndex,
+		onSelect,
+		bucketLabel,
+		fmt
+	});
+	live.current = {
+		buckets,
+		tops,
+		range,
+		selectedIndex,
+		onSelect,
+		bucketLabel,
+		fmt
+	};
+	const optionsKey = `${layers.map((l) => `${l.id}:${l.colorIndex}`).join(",")}#${compact ? "C" : ""}#${isStacked ? "S" : ""}#${syncKey ?? ""}#${String(bucketMs)}`;
+	const data = (0, react$1.useMemo)(() => {
+		const top = tops.at(-1) ?? [];
+		const peak = isStacked ? top : buckets.map((_b, i) => Math.max(...tops.map((row) => row[i] ?? 0)));
+		return [buckets.map((b) => b.t), peak.map((v) => v ?? null)];
+	}, [
+		buckets,
+		tops,
+		isStacked,
+		selectedIndex
+	]);
+	const buildOptions = (0, react$1.useCallback)(() => {
+		const spec = { floor: 0 };
+		return {
+			ms: 1,
+			legend: { show: false },
+			padding: compact ? [
+				0,
+				0,
+				0,
+				0
+			] : [
+				8,
+				30,
+				0,
+				0
+			],
+			scales: {
+				x: {
+					time: true,
+					range: () => [live.current.range.from, live.current.range.to]
+				},
+				y: { range: (self) => {
+					const r = valueRange([...self.data[1] ?? []], spec);
+					return [r[0], r[1]];
+				} }
+			},
+			axes: compact ? [{
+				show: false,
+				scale: "x"
+			}, {
+				show: false,
+				scale: "y"
+			}] : [timeAxis(() => live.current.range.to - live.current.range.from), {
+				...valueAxis("y", 3, (v) => live.current.fmt(v), true),
+				splits: (_s, _i, min, max) => valueSplits([min, max], spec)
+			}],
+			series: [{}, {
+				scale: "y",
+				stroke: () => "transparent",
+				points: { show: false },
+				paths: () => null
+			}],
+			cursor: {
+				...chartCursor(syncKey),
+				points: { show: false }
+			},
+			hooks: {
+				draw: [(u) => {
+					const { buckets: bs, tops: ts, selectedIndex: sel } = live.current;
+					const ctx = u.ctx;
+					const baseY = u.valToPos(0, "y", true);
+					const minPx = minBarFraction * u.bbox.height;
+					const gap = Math.max(1, Math.round(devicePixelRatio));
+					ctx.save();
+					bs.forEach((b, i) => {
+						const x0 = u.valToPos(b.t, "x", true);
+						const x1 = u.valToPos(b.t + bucketMs, "x", true);
+						const w = Math.max(1, x1 - x0 - gap);
+						let prevY = baseY;
+						layers.forEach((layer, li) => {
+							const top = ts[li]?.[i];
+							if (top === null || top === void 0) return;
+							if (!(top > (isStacked && li > 0 ? ts[li - 1]?.[i] ?? 0 : 0))) return;
+							let yTop = u.valToPos(top, "y", true);
+							const yBottom = isStacked ? prevY : baseY;
+							if (li === layers.length - 1 && baseY - yTop < minPx) yTop = baseY - minPx;
+							ctx.fillStyle = resolveChartColor(chartSeriesStyle(layer.colorIndex).token);
+							const h = Math.max(1, yBottom - yTop - (isStacked && li > 0 ? gap : 0));
+							ctx.fillRect(x0, yTop, w, h);
+							prevY = yTop;
+						});
+						if (sel === i) {
+							ctx.strokeStyle = resolveChartColor("primary");
+							ctx.lineWidth = gap * 1.5;
+							ctx.strokeRect(x0, u.bbox.top + gap, w, u.bbox.height - 2 * gap);
+						}
+					});
+					ctx.restore();
+				}],
+				setCursor: [(u) => {
+					const left = u.cursor.left ?? -1;
+					const idx = left < 0 ? null : bucketIndexAt(live.current.buckets, bucketMs, u.posToVal(left, "x"));
+					setCursorIdx(idx);
+					const b = idx === null ? void 0 : live.current.buckets[idx];
+					const label = b === void 0 || idx === null ? "" : live.current.bucketLabel?.(b, idx) ?? "";
+					u.over.title = label;
+				}],
+				ready: [(u) => {
+					u.over.addEventListener("click", () => {
+						const left = u.cursor.left ?? -1;
+						if (left < 0) return;
+						const idx = bucketIndexAt(live.current.buckets, bucketMs, u.posToVal(left, "x"));
+						if (idx !== null) live.current.onSelect?.(idx);
+					});
+				}]
+			}
+		};
+	}, [optionsKey, minBarFraction]);
+	const span = range.to - range.from;
+	const hovered = cursorIdx === null ? void 0 : buckets[cursorIdx];
+	const legend = layers.map((l, li) => {
+		const v = hovered ? hovered.values[li] : totals.known ? totals.perLayer[li] : void 0;
+		return {
+			id: l.id,
+			label: l.label,
+			token: chartSeriesStyle(l.colorIndex).token,
+			value: v === null || v === void 0 ? hovered ? "—" : void 0 : fmt(v)
+		};
+	});
+	const summary = t("uiLibrary.charts.barSummary", "{{title}}, {{from}} to {{to}}: total {{total}}", {
+		title,
+		from: formatTimeLabel(range.from, span),
+		to: formatTimeLabel(range.to, span),
+		total: totals.known ? fmt(totals.total) : t("uiLibrary.charts.unknown", "unknown")
+	});
+	const buttons = onSelect !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "sr-only",
+		children: buckets.map((b, i) => {
+			const sum = b.values.reduce((a, v) => a + (v ?? 0), 0);
+			if (sum <= 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"data-testid": bucketTestId,
+				"aria-pressed": selectedIndex === i,
+				onClick: () => onSelect(i),
+				children: bucketLabel?.(b, i) ?? `${formatTimeLabel(b.t, span)} ${fmt(sum)}`
+			}, b.t);
+		})
+	}) : null;
+	const plot = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UPlotHost, {
+		optionsKey,
+		buildOptions,
+		data,
+		height: plotHeight
+	});
+	if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("relative min-w-0", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "img",
+			"aria-label": summary,
+			children: plot
+		}), buttons]
+	});
+	const totalLine = showTotal && totals.known ? t("uiLibrary.charts.total", "Total {{value}}", { value: fmt(totals.total) }) : null;
+	const empty = !totals.known;
+	const sizeClass = plotHeight <= 64 ? "sm" : plotHeight <= 120 ? "md" : "lg";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartFrame, {
+		title,
+		actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			totalLine && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[11px] tabular-nums text-foreground",
+				children: totalLine
+			}),
+			windowToggle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartWindowToggle, { ...windowToggle }),
+			actions
+		] }),
+		readoutTime: hovered ? formatCursorTime(hovered.t, span) : null,
+		legend: layers.length > 1 || hovered ? legend : [],
+		summary,
+		footer,
+		placeholder: pending ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPlaceholder, {
+			message: t("uiLibrary.charts.loading", "Loading…"),
+			height: sizeClass
+		}) : empty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPlaceholder, {
+			message: emptyMessage ?? t("uiLibrary.charts.empty", "Nothing was recorded in this window."),
+			height: sizeClass
+		}) : void 0,
+		controls: buttons,
+		className,
+		children: plot
+	});
+}
+//#endregion
 //#region src/composites/cap-settings/EventHeatmap.tsx
-var KIND_BG = {
-	motion: "bg-emerald-500",
-	object: "bg-violet-500",
-	audio: "bg-orange-500"
+/** Stack order, bottom first; the categorical slots keep motion green, object violet, audio orange. */
+var KINDS = [
+	"motion",
+	"object",
+	"audio"
+];
+var KIND_SLOT = {
+	motion: 6,
+	object: 5,
+	audio: 4
 };
+/** A non-empty bucket is never thinner than this fraction of the strip. */
+var MIN_BAR_FRACTION = .15;
+/**
+* Event-density strip under a recording timeline: one stacked bar per bucket
+* (motion / object / audio), height normalised to the busiest bucket, on the
+* timeline's own window. A click (or the bucket's button, for keyboard and
+* screen readers) selects the bucket — it drives the drill-down strip.
+*/
 function EventHeatmap({ windowFrom, windowTo, buckets, selectedIndex, onSelectBucket }) {
 	const t = useUiText();
-	const peak = buckets.reduce((m, b) => Math.max(m, b.total), 0);
-	const firstBucket = buckets[0];
-	const bucketWidthPct = firstBucket ? pctForMs(firstBucket.endMs, windowFrom, windowTo) - pctForMs(firstBucket.startMs, windowFrom, windowTo) : 0;
+	const nonEmpty = (0, react$1.useMemo)(() => buckets.filter((b) => b.total > 0 && b.dominant !== null), [buckets]);
+	const bars = (0, react$1.useMemo)(() => nonEmpty.map((b) => ({
+		t: b.startMs,
+		values: KINDS.map((k) => b.counts[k])
+	})), [nonEmpty]);
+	const layers = (0, react$1.useMemo)(() => KINDS.map((k) => ({
+		id: k,
+		label: t(`uiLibrary.eventHeatmap.kind.${k}`, k),
+		colorIndex: KIND_SLOT[k]
+	})), [t]);
+	const first = buckets[0];
+	const bucketMs = first ? Math.max(1, first.endMs - first.startMs) : 1;
+	const selectedPos = selectedIndex === null ? null : nonEmpty.findIndex((b) => b.index === selectedIndex);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "relative h-6 rounded bg-background/40",
-		children: buckets.map((b) => {
-			if (b.total === 0 || b.dominant === null) return null;
-			const heightPct = peak > 0 ? Math.max(15, b.total / peak * 100) : 0;
-			const left = pctForMs(b.startMs, windowFrom, windowTo);
-			const selected = b.index === selectedIndex;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				"data-testid": "heatmap-bar",
-				title: t("uiLibrary.eventHeatmap.bucketTitle", "{{time}} · motion {{motion}} · object {{object}}", {
+		className: "rounded bg-background/40",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarSeries, {
+			compact: true,
+			title: t("uiLibrary.eventHeatmap.title", "Event density"),
+			layers,
+			buckets: bars,
+			bucketMs,
+			range: {
+				from: windowFrom,
+				to: windowTo
+			},
+			stacked: true,
+			minBarFraction: MIN_BAR_FRACTION,
+			selectedIndex: selectedPos === null || selectedPos < 0 ? null : selectedPos,
+			onSelect: (pos) => {
+				const b = nonEmpty[pos];
+				if (b) onSelectBucket(b.index);
+			},
+			bucketTestId: "heatmap-bar",
+			bucketLabel: (_bar, pos) => {
+				const b = nonEmpty[pos];
+				if (!b) return "";
+				return t("uiLibrary.eventHeatmap.bucketTitle", "{{time}} · motion {{motion}} · object {{object}}", {
 					time: new Date(b.startMs).toLocaleTimeString(void 0, {
 						hour: "2-digit",
 						minute: "2-digit"
 					}),
 					motion: b.counts.motion,
 					object: b.counts.object
-				}),
-				onClick: () => onSelectBucket(b.index),
-				className: `absolute bottom-0 rounded-t-sm transition-opacity ${KIND_BG[b.dominant]} ${selected ? "opacity-100 ring-1 ring-amber-400" : "opacity-80 hover:opacity-100"}`,
-				style: {
-					left: `${left}%`,
-					width: `${Math.max(.6, bucketWidthPct)}%`,
-					height: `${heightPct}%`
-				}
-			}, b.index);
+				});
+			}
 		})
 	});
 }
@@ -21318,7 +22503,7 @@ function ClipBandBar({ day, onDayChange, view, dayBounds, onViewChange, buckets,
 		dayBounds,
 		onViewChange
 	]);
-	const ticks = axisTicks(view.fromMs, view.toMs, 5);
+	const ticks = axisTicks$1(view.fromMs, view.toMs, 5);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-1",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineControls, {
@@ -26115,7 +27300,7 @@ function RecordingTimeline({ deviceId }) {
 	const coverageLoading = availabilityQuery.isLoading;
 	const densityLoading = eventDensityQuery.isLoading;
 	const drillLoading = (objectDrill.isLoading || motionDrill.isLoading || audioDrill.isLoading) && drillEnabled;
-	const ticks = (0, react$1.useMemo)(() => axisTicks(view.fromMs, view.toMs, 5), [view.fromMs, view.toMs]);
+	const ticks = (0, react$1.useMemo)(() => axisTicks$1(view.fromMs, view.toMs, 5), [view.fromMs, view.toMs]);
 	const displayPlayheadMs = framePush ? scrubState.scrubbing ? scrubState.scrubEpoch : scrubState.playheadEpoch : playheadMs;
 	const showRateToggle = framePush && (recordedMode === "playing" || recordedMode === "paused");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -29914,6 +31099,25 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 }
 //#endregion
 //#region src/composites/accelerator-label.ts
+var CORAL_UNIT = /^(usb|pci)(?::(\d+))?$/;
+/**
+* One Coral per node keeps the plain name; a second unit, or one on PCIe, says
+* which: `edgetpu:usb` "Coral Edge TPU", `edgetpu:usb:1` "Coral Edge TPU (USB 2)",
+* `edgetpu:pci` "Coral Edge TPU (PCIe)", `edgetpu:pci:1` "Coral Edge TPU (PCIe 2)".
+*/
+function coralNames(dev) {
+	const match = CORAL_UNIT.exec(dev);
+	if (match === null || match[1] === "usb" && match[2] === void 0) return {
+		label: "Coral Edge TPU",
+		short: "Coral"
+	};
+	const bus = match[1] === "pci" ? "PCIe" : "USB";
+	const unit = match[2] === void 0 ? bus : `${bus} ${Number(match[2]) + 1}`;
+	return {
+		label: `Coral Edge TPU (${unit})`,
+		short: `Coral ${unit}`
+	};
+}
 function names(device) {
 	const backend = device.backend.toLowerCase();
 	const dev = device.device.toLowerCase();
@@ -29929,10 +31133,7 @@ function names(device) {
 		label: "Intel iGPU",
 		short: "iGPU"
 	};
-	if (backend === "edgetpu") return {
-		label: "Coral Edge TPU",
-		short: "Coral"
-	};
+	if (backend === "edgetpu") return coralNames(dev);
 	if (backend === "coreml") return {
 		label: "Apple Neural Engine",
 		short: "ANE"
@@ -39832,6 +41033,202 @@ function useLiveBuffer(max) {
 		reset
 	]);
 }
+//#endregion
+//#region src/hooks/use-debounced-string.ts
+/**
+* useDebouncedString — return `value` after `delay` ms have passed
+* without further changes. Resets the timer on every change.
+*
+* Useful for search inputs that should NOT push to URL state on every
+* keystroke. The DOM input stays controlled by an external `value`
+* (caller's `useState`); this hook produces a debounced derivation.
+*/
+function useDebouncedString(value, delayMs) {
+	const [debounced, setDebounced] = (0, react$1.useState)(value);
+	(0, react$1.useEffect)(() => {
+		const t = setTimeout(() => setDebounced(value), delayMs);
+		return () => clearTimeout(t);
+	}, [value, delayMs]);
+	return debounced;
+}
+//#endregion
+//#region src/composites/log-history-paging.ts
+/**
+* Accumulate slices until `limit` entries, `done`, or an abort. An abort keeps
+* what was already collected and the cursor reached, so "Load older" resumes
+* where the scan stopped instead of starting again.
+*/
+async function collectPage(options) {
+	const { fetchSlice, limit, signal, onProgress } = options;
+	const entries = [];
+	let cursor = options.before;
+	let scannedBytes = 0;
+	let source;
+	for (;;) {
+		if (signal.aborted) return {
+			entries,
+			nextBefore: cursor ?? null,
+			done: false,
+			cancelled: true,
+			scannedBytes,
+			source
+		};
+		let page;
+		try {
+			page = await fetchSlice(cursor, Math.max(1, limit - entries.length), signal);
+		} catch (error) {
+			if (signal.aborted) return {
+				entries,
+				nextBefore: cursor ?? null,
+				done: false,
+				cancelled: true,
+				scannedBytes,
+				source
+			};
+			throw error;
+		}
+		entries.push(...page.entries);
+		scannedBytes += page.scannedBytes;
+		source = page.source;
+		onProgress?.(scannedBytes);
+		const exhausted = page.done || page.nextBefore === null;
+		if (page.cancelled === true) return {
+			entries,
+			nextBefore: page.nextBefore,
+			done: exhausted,
+			cancelled: true,
+			scannedBytes,
+			source
+		};
+		if (exhausted || entries.length >= limit) return {
+			entries,
+			nextBefore: page.nextBefore,
+			done: exhausted,
+			cancelled: false,
+			scannedBytes,
+			source
+		};
+		cursor = page.nextBefore ?? void 0;
+	}
+}
+/** Stable identity of an entry: the server id, else the legacy composite key. */
+function logEntryKey(entry) {
+	if (entry.id !== void 0 && entry.id !== "") return `id:${entry.id}`;
+	return `${entry.timestamp}|${entry.level}|${entry.scope ?? ""}|${entry.message}`;
+}
+/**
+* History (newest first, as paged) merged with live entries (arrival order),
+* deduped by key — a live entry wins (richer tags/meta) — and returned
+* chronologically, newest LAST. Ties keep insertion order.
+*/
+function mergeLogEntries(history, live) {
+	const byKey = /* @__PURE__ */ new Map();
+	for (const entry of history) byKey.set(logEntryKey(entry), entry);
+	for (const entry of live) byKey.set(logEntryKey(entry), entry);
+	return [...byKey.values()].toSorted((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+}
+//#endregion
+//#region src/hooks/use-log-history.ts
+/**
+* useLogHistory — pages the server-served log history (D898).
+*
+* The first page and every older page go through `collectPage`, which keeps
+* calling `logs.query` with `before: nextBefore` while the server answers a
+* short, not-done slice. Changing the filters aborts whatever is in flight and
+* restarts from the first page; `cancel()` aborts the scan but keeps what was
+* found and the cursor reached, so "Load older" resumes from there.
+*/
+var INITIAL = {
+	entries: [],
+	nextBefore: null,
+	done: false,
+	status: "loading",
+	scannedBytes: 0,
+	source: void 0,
+	error: null
+};
+function useLogHistory(query, limit) {
+	const utils = trpc.useUtils();
+	const [state, setState] = (0, react$1.useState)(INITIAL);
+	const stateRef = (0, react$1.useRef)(state);
+	stateRef.current = state;
+	const queryRef = (0, react$1.useRef)(query);
+	queryRef.current = query;
+	const abortRef = (0, react$1.useRef)(null);
+	const queryKey = JSON.stringify(query);
+	const run = (0, react$1.useCallback)(async (before, reset) => {
+		abortRef.current?.abort();
+		const controller = new AbortController();
+		abortRef.current = controller;
+		setState((prev) => ({
+			...reset ? INITIAL : prev,
+			status: "loading",
+			scannedBytes: 0,
+			error: null
+		}));
+		const fetchSlice = (cursor, remaining, signal) => utils.client.logs.query.query({
+			...queryRef.current,
+			limit: remaining,
+			...cursor !== void 0 ? { before: cursor } : {}
+		}, { signal });
+		try {
+			const out = await collectPage({
+				fetchSlice,
+				limit,
+				...before !== void 0 ? { before } : {},
+				signal: controller.signal,
+				onProgress: (scannedBytes) => {
+					if (abortRef.current === controller) setState((prev) => ({
+						...prev,
+						scannedBytes
+					}));
+				}
+			});
+			if (abortRef.current !== controller) return;
+			setState((prev) => ({
+				entries: reset ? out.entries : [...prev.entries, ...out.entries],
+				nextBefore: out.nextBefore,
+				done: out.done,
+				status: "idle",
+				scannedBytes: out.scannedBytes,
+				source: out.source ?? prev.source,
+				error: null
+			}));
+		} catch (error) {
+			if (abortRef.current !== controller) return;
+			setState((prev) => ({
+				...prev,
+				status: "idle",
+				error: error instanceof Error ? error.message : String(error)
+			}));
+		}
+	}, [utils, limit]);
+	(0, react$1.useEffect)(() => {
+		run(void 0, true);
+		return () => {
+			abortRef.current?.abort();
+			abortRef.current = null;
+		};
+	}, [run, queryKey]);
+	const loadOlder = (0, react$1.useCallback)(() => {
+		const current = stateRef.current;
+		if (current.status === "loading" || current.done) return;
+		run(current.nextBefore ?? void 0, false);
+	}, [run]);
+	const cancel = (0, react$1.useCallback)(() => {
+		abortRef.current?.abort();
+	}, []);
+	return {
+		entries: state.entries,
+		status: state.status,
+		done: state.done,
+		scannedBytes: state.scannedBytes,
+		source: state.source,
+		error: state.error,
+		loadOlder,
+		cancel
+	};
+}
 /**
 * True when the viewport is scrolled to (or within `threshold` px of) the
 * bottom of its content.
@@ -39888,12 +41285,6 @@ var LEVEL_STYLES = {
 		color: "text-gray-500"
 	}
 };
-var LEVEL_SEVERITY = {
-	debug: 0,
-	info: 1,
-	warn: 2,
-	error: 3
-};
 var LEVEL_OPTIONS = [
 	"debug",
 	"info",
@@ -39902,15 +41293,18 @@ var LEVEL_OPTIONS = [
 ];
 /** Max live entries kept in the ring buffer. */
 var MAX_LIVE_ENTRIES$1 = 500;
-function passesLevel(logLevel, filterLevel) {
-	if (!filterLevel) return true;
-	return (LEVEL_SEVERITY[logLevel] ?? 0) >= (LEVEL_SEVERITY[filterLevel] ?? 0);
-}
-function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight = "max-h-96", showScope = false, showDeviceChip = false, showFilters = true, limit = 100, liveBuffer: externalBuffer, onClose, className }) {
+/** Text filter debounce before it goes to the server. */
+var TEXT_DEBOUNCE_MS = 300;
+/** Distance from the top (px) that asks for the next older page. */
+var TOP_LOAD_THRESHOLD_PX = 24;
+var BYTES_PER_MB = 1024 * 1024;
+function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight = "max-h-96", showScope = false, showDeviceChip = false, showFilters = true, showSourceSelect, limit = 100, liveBuffer: externalBuffer, onClose, className }) {
 	const t = useUiText();
+	const sourceSelectOn = showSourceSelect ?? showFilters;
 	const [localAddonId, setLocalAddonId] = (0, react$1.useState)("");
 	const [localDeviceId, setLocalDeviceId] = (0, react$1.useState)("");
 	const [levelFilter, setLevelFilter] = (0, react$1.useState)(initialLevel ?? "info");
+	const [sourceChoice, setSourceChoice] = (0, react$1.useState)(void 0);
 	const agentId = propsAgentId;
 	const addonId = propsAddonId ?? (localAddonId || void 0);
 	const deviceId = propsDeviceId ?? (localDeviceId ? Number(localDeviceId) : void 0);
@@ -39955,48 +41349,63 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 			setExpandAll(false);
 		}
 	}, [scopeKey, buffer]);
-	const { data: initialLogs, isLoading } = trpc.logs.query.useQuery({
-		...tags ? { tags } : {},
-		limit
-	}, { staleTime: 3e4 });
-	trpc.logs.subscribe.useSubscription(tags ? { tags } : {}, { onData: (entry) => {
+	const debouncedText = useDebouncedString(searchText, TEXT_DEBOUNCE_MS).trim();
+	const sourcesQuery = trpc.logs.sources.useQuery(void 0, { staleTime: 6e4 });
+	const readableSources = (0, react$1.useMemo)(() => (sourcesQuery.data ?? []).filter((source) => source.readable), [sourcesQuery.data]);
+	const history = useLogHistory((0, react$1.useMemo)(() => ({
+		...sourceChoice ? { source: sourceChoice } : {},
+		level: levelFilter,
+		...debouncedText ? { text: debouncedText } : {},
+		...tags ? { tags } : {}
+	}), [
+		sourceChoice,
+		levelFilter,
+		debouncedText,
+		tags
+	]), limit);
+	trpc.logs.subscribe.useSubscription({
+		level: levelFilter,
+		...debouncedText ? { text: debouncedText } : {},
+		...tags ? { tags } : {}
+	}, { onData: (entry) => {
 		buffer.append(entry);
 	} });
+	const filterKey = `${sourceChoice ?? ""}|${levelFilter}|${debouncedText}`;
+	const prevFilterRef = (0, react$1.useRef)(filterKey);
+	(0, react$1.useEffect)(() => {
+		if (prevFilterRef.current === filterKey) return;
+		prevFilterRef.current = filterKey;
+		buffer.reset();
+		setFollow(true);
+	}, [filterKey, buffer]);
 	const allLogs = (0, react$1.useMemo)(() => {
-		const initial = (initialLogs ?? []).map((log) => ({
-			timestamp: log.timestamp,
-			level: log.level,
-			message: log.message,
-			scope: log.scope,
-			tags: log.tags,
-			meta: log.meta
-		}));
-		const byKey = /* @__PURE__ */ new Map();
-		for (const log of initial) byKey.set(`${log.timestamp}|${log.level}|${log.scope ?? ""}|${log.message}`, log);
-		for (const log of liveLogs) byKey.set(`${log.timestamp}|${log.level}|${log.scope ?? ""}|${log.message}`, log);
-		const merged = [...byKey.values()].toSorted((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
-		const levelFiltered = (clearedAt > 0 ? merged.filter((log) => new Date(log.timestamp).getTime() > clearedAt) : merged).filter((log) => passesLevel(log.level, levelFilter));
-		const needle = searchText.trim().toLowerCase();
-		if (!needle) return levelFiltered;
-		return levelFiltered.filter((log) => {
-			if (log.message.toLowerCase().includes(needle)) return true;
-			if (log.scope && log.scope.toLowerCase().includes(needle)) return true;
-			if (log.tags) {
-				for (const v of Object.values(log.tags)) if (v !== void 0 && String(v).toLowerCase().includes(needle)) return true;
-			}
-			if (log.meta) for (const v of Object.values(log.meta)) {
-				if (v === void 0 || v === null) continue;
-				if (formatMetaValue(v).toLowerCase().includes(needle)) return true;
-			}
-			return false;
-		});
+		const merged = mergeLogEntries(history.entries, liveLogs);
+		return clearedAt > 0 ? merged.filter((log) => new Date(log.timestamp).getTime() > clearedAt) : merged;
 	}, [
-		initialLogs,
+		history.entries,
 		liveLogs,
-		levelFilter,
-		clearedAt,
-		searchText
+		clearedAt
 	]);
+	const prependAnchorRef = (0, react$1.useRef)(null);
+	const requestOlder = (0, react$1.useCallback)(() => {
+		if (history.status === "loading" || history.done) return;
+		const el = scrollRef.current;
+		if (el) prependAnchorRef.current = {
+			height: el.scrollHeight,
+			top: el.scrollTop
+		};
+		history.loadOlder();
+	}, [history]);
+	(0, react$1.useLayoutEffect)(() => {
+		const anchor = prependAnchorRef.current;
+		const el = scrollRef.current;
+		if (!anchor || !el || history.status !== "idle") return;
+		prependAnchorRef.current = null;
+		const next = anchor.top + (el.scrollHeight - anchor.height);
+		if (Math.abs(next - el.scrollTop) < 1) return;
+		programmaticScrollRef.current = true;
+		el.scrollTop = next;
+	}, [history.status, history.entries.length]);
 	const scrollToBottom = (0, react$1.useCallback)((behavior) => {
 		const el = scrollRef.current;
 		if (!el) return;
@@ -40007,15 +41416,16 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 		});
 	}, []);
 	const [hasNewWhilePaused, setHasNewWhilePaused] = (0, react$1.useState)(false);
-	const prevLenRef = (0, react$1.useRef)(allLogs.length);
+	const lastKey = allLogs.length > 0 ? logEntryKey(allLogs[allLogs.length - 1]) : "";
+	const prevLastKeyRef = (0, react$1.useRef)(lastKey);
 	(0, react$1.useLayoutEffect)(() => {
-		const grew = allLogs.length > prevLenRef.current;
-		prevLenRef.current = allLogs.length;
-		if (!grew) return;
+		const newestChanged = lastKey !== "" && lastKey !== prevLastKeyRef.current;
+		prevLastKeyRef.current = lastKey;
+		if (!newestChanged) return;
 		if (follow) scrollToBottom();
 		else setHasNewWhilePaused(true);
 	}, [
-		allLogs.length,
+		lastKey,
 		follow,
 		scrollToBottom
 	]);
@@ -40035,8 +41445,9 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 		if (!el) return;
 		const pinned = isPinnedToBottom(el, 40);
 		setFollow((prev) => prev === pinned ? prev : pinned);
-	}, []);
-	const expandableKeys = (0, react$1.useMemo)(() => allLogs.filter((log) => log.tags && Object.keys(log.tags).length > 0 || log.meta && Object.keys(log.meta).length > 0).map((log) => `${log.timestamp}|${log.level}|${log.scope ?? ""}|${log.message}`), [allLogs]);
+		if (el.scrollTop <= TOP_LOAD_THRESHOLD_PX) requestOlder();
+	}, [requestOlder]);
+	const expandableKeys = (0, react$1.useMemo)(() => allLogs.filter((log) => log.tags && Object.keys(log.tags).length > 0 || log.meta && Object.keys(log.meta).length > 0).map(logEntryKey), [allLogs]);
 	const toggleExpandAll = (0, react$1.useCallback)(() => {
 		setExpandAll((prev) => {
 			if (prev) setExpandedRows(/* @__PURE__ */ new Set());
@@ -40083,7 +41494,7 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 			setTimeout(() => setCopiedRowKey((prev) => prev === key ? null : prev), 1200);
 		});
 	}, []);
-	const rowKey = (0, react$1.useCallback)((log) => `${log.timestamp}|${log.level}|${log.scope ?? ""}|${log.message}`, []);
+	const rowKey = logEntryKey;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("h-full min-h-0 flex flex-col", className),
 		onClick: (e) => e.stopPropagation(),
@@ -40118,6 +41529,23 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 								children: [l, "+"]
 							}, l))
 						}),
+						sourceSelectOn && readableSources.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "w-36",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+								"aria-label": t("uiLibrary.logStream.source", "Log source"),
+								className: "h-5 text-[10px]",
+								value: sourceChoice ?? readableSources.find((x) => x.isDefault)?.addonId ?? "",
+								onChange: (e) => setSourceChoice(e.target.value),
+								options: readableSources.map((x) => ({
+									value: x.addonId,
+									label: x.addonId
+								}))
+							})
+						}),
+						sourceSelectOn && readableSources.length <= 1 && history.source && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[9px] text-foreground-subtle",
+							children: t("uiLibrary.logStream.sourceName", "Source: {{name}}", { name: history.source })
+						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 							icon: ArrowDownToLine,
 							label: follow ? t("uiLibrary.logStream.following", "Following") : t("uiLibrary.logStream.paused", "Paused"),
@@ -40216,11 +41644,16 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 					onScroll: handleScroll,
 					className: cn("flex-1 min-h-0 overflow-auto font-mono text-[10px]", maxHeight),
 					children: [
-						isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center justify-center gap-2 py-6 text-foreground-subtle",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), t("uiLibrary.logStream.loading", "Loading logs...")]
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistoryEdge, {
+							status: history.status,
+							done: history.done,
+							scannedBytes: history.scannedBytes,
+							hasRows: allLogs.length > 0,
+							error: history.error,
+							onLoadOlder: requestOlder,
+							onCancel: history.cancel
 						}),
-						!isLoading && allLogs.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						history.status === "idle" && history.done && allLogs.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "py-4 text-center text-foreground-subtle",
 							children: t("uiLibrary.logStream.noLogs", "No logs found")
 						}),
@@ -40344,6 +41777,49 @@ function DeviceChip({ deviceId, deviceName }) {
 		children: label
 	});
 }
+/**
+* The top of the list: the state of the older-history scan. A scan that is
+* still looking (short page, source not done) says how much it has read and
+* can be cancelled; the end of the source is stated quietly.
+*/
+function HistoryEdge({ status, done, scannedBytes, hasRows, error, onLoadOlder, onCancel }) {
+	const t = useUiText();
+	if (status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-center gap-2 py-2 text-foreground-subtle",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }),
+			scannedBytes > 0 ? t("uiLibrary.logStream.searching", "Searching older logs… ({{mb}} MB scanned)", { mb: (scannedBytes / BYTES_PER_MB).toFixed(1) }) : t("uiLibrary.logStream.loading", "Loading logs..."),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				variant: "outline",
+				size: "sm",
+				onClick: onCancel,
+				children: t("uiLibrary.logStream.cancel", "Cancel")
+			})
+		]
+	});
+	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-center gap-2 py-2 text-danger",
+		children: [error, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			variant: "outline",
+			size: "sm",
+			onClick: onLoadOlder,
+			children: t("uiLibrary.logStream.retry", "Retry")
+		})]
+	});
+	if (done) return hasRows ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "py-2 text-center text-foreground-subtle",
+		children: t("uiLibrary.logStream.beginning", "Beginning of logs")
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex justify-center py-1.5",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			variant: "outline",
+			size: "sm",
+			onClick: onLoadOlder,
+			children: t("uiLibrary.logStream.loadOlder", "Load older")
+		})
+	});
+}
 function ScopeBadge$2({ label, value }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: "text-[9px] px-1.5 py-0.5 rounded-full bg-primary/10 text-primary font-medium",
@@ -51147,7 +52623,7 @@ function AlarmSegments({ state, availableModes, busy, onDisarm, onArm }) {
 		}, mode))]
 	});
 }
-function messageOf(err) {
+function messageOf$1(err) {
 	return err instanceof Error ? err.message : String(err);
 }
 /**
@@ -51189,7 +52665,7 @@ function useAlarmControl(trpc, deviceId, optimistic) {
 		cap.disarm({}).catch((err) => {
 			if (latestCallRef.current !== call) return;
 			rollback();
-			setError(messageOf(err));
+			setError(messageOf$1(err));
 		});
 	};
 	const handleArm = (mode) => {
@@ -51199,7 +52675,7 @@ function useAlarmControl(trpc, deviceId, optimistic) {
 		cap.arm({ mode }).catch((err) => {
 			if (latestCallRef.current !== call) return;
 			rollback();
-			setError(messageOf(err));
+			setError(messageOf$1(err));
 		});
 	};
 	return {
@@ -52387,24 +53863,6 @@ function DeviceBatchActionsBar(props) {
 	})] });
 }
 //#endregion
-//#region src/hooks/use-debounced-string.ts
-/**
-* useDebouncedString — return `value` after `delay` ms have passed
-* without further changes. Resets the timer on every change.
-*
-* Useful for search inputs that should NOT push to URL state on every
-* keystroke. The DOM input stays controlled by an external `value`
-* (caller's `useState`); this hook produces a debounced derivation.
-*/
-function useDebouncedString(value, delayMs) {
-	const [debounced, setDebounced] = (0, react$1.useState)(value);
-	(0, react$1.useEffect)(() => {
-		const t = setTimeout(() => setDebounced(value), delayMs);
-		return () => clearTimeout(t);
-	}, [value, delayMs]);
-	return debounced;
-}
-//#endregion
 //#region src/hooks/use-persisted-page-size.ts
 /**
 * usePersistedPageSize — a "rows per page" choice remembered per viewer.
@@ -63810,6 +65268,1849 @@ 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 ?? "";
+}
+/** Units in order of first appearance — one value axis each. */
+function unitAxes(series) {
+	const out = [];
+	for (const s of series) {
+		const k = unitKey(s.unit);
+		if (!out.includes(k)) out.push(k);
+	}
+	return out;
+}
+/** Align, stack (non-compare series only) and find the shared holes. */
+function buildTimeSeriesModel(series, stacked) {
+	const aligned = alignSeries(series.map((s) => ({
+		points: s.points,
+		gapMs: s.gapMs
+	})));
+	let drawn = aligned.ys;
+	if (stacked) {
+		const primaryIdx = series.flatMap((s, i) => s.compare ? [] : [i]);
+		const stackedRows = stackSeries(primaryIdx.map((i) => aligned.ys[i] ?? []));
+		drawn = aligned.ys.map((row, i) => {
+			const at = primaryIdx.indexOf(i);
+			return at >= 0 ? stackedRows[at] ?? row : row;
+		});
+	}
+	const empty = !aligned.ys.some((row) => row.some((v) => typeof v === "number"));
+	return {
+		xs: aligned.xs,
+		raw: aligned.ys,
+		drawn,
+		mins: aligned.mins,
+		maxs: aligned.maxs,
+		units: unitAxes(series),
+		gaps: sharedGapSpans(series.filter((s) => !s.compare).map((s) => ({
+			points: s.points,
+			gapMs: s.gapMs
+		}))),
+		empty
+	};
+}
+/** The value per series a reader sees at `idx` (`null` = cursor off → the latest). */
+function readoutAt(model, idx) {
+	const at = idx ?? model.xs.length - 1;
+	return model.raw.map((row) => at < 0 ? null : valueAtOrBefore(model.xs, row, at));
+}
+/** The last known value of each series (for the accessible summary). */
+function latestValues(model) {
+	return readoutAt(model, null);
+}
+//#endregion
+//#region src/composites/charts/TimeSeriesChart.tsx
+/**
+* TimeSeriesChart — gauges and counters over wall time (uPlot).
+*
+* Lines, an optional min/max band, stacked areas, null gaps (a hole breaks
+* the line AND is shaded), one value axis per unit (left, right, left …),
+* a synced cursor across every chart sharing `syncKey`, an optional window
+* toggle. Identity is never colour alone: one series is named by the title,
+* two or more always carry a legend with direct values.
+*
+* A device page draws ONE unit per chart; overlaying units (several axes) is
+* 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 }) {
+	const t = useUiText();
+	const model = (0, react$1.useMemo)(() => buildTimeSeriesModel(series, stacked), [series, stacked]);
+	const [cursorIdx, setCursorIdx] = (0, react$1.useState)(null);
+	const modelRef = (0, react$1.useRef)(model);
+	modelRef.current = model;
+	const rangeRef = (0, react$1.useRef)(range);
+	rangeRef.current = range;
+	const fmt = (0, react$1.useCallback)((v, unit) => (formatValue ?? formatChartValue)(v, unit), [formatValue]);
+	const spanMs = () => {
+		const r = rangeRef.current;
+		if (r) return r.to - r.from;
+		const xs = modelRef.current.xs;
+		return xs.length > 1 ? (xs.at(-1) ?? 0) - (xs[0] ?? 0) : 0;
+	};
+	const unitOf = (s) => s.unit ?? null;
+	const specFor = (0, react$1.useCallback)((unit) => (axisFor ?? defaultAxisSpec)(unit === "" ? null : unit), [axisFor]);
+	const optionsKey = [
+		series.map((s) => `${s.id}|${unitKey(s.unit)}|${s.colorIndex}|${s.interpolation ?? ""}|${s.band ? 1 : 0}|${s.compare ? 1 : 0}`).join(","),
+		stacked ? "S" : "",
+		area ? "A" : "",
+		syncKey ?? "",
+		range ? "R" : ""
+	].join("#");
+	const data = (0, react$1.useMemo)(() => {
+		const ys = [];
+		series.forEach((s, i) => {
+			ys.push([...model.drawn[i] ?? []]);
+			if (s.band) {
+				ys.push([...model.mins[i] ?? []]);
+				ys.push([...model.maxs[i] ?? []]);
+			}
+		});
+		return [[...model.xs], ...ys];
+	}, [model, series]);
+	const buildOptions = (0, react$1.useCallback)((_width, lib) => {
+		const units = modelRef.current.units;
+		const scales = { x: {
+			time: true,
+			...rangeRef.current ? { range: () => [rangeRef.current?.from ?? 0, rangeRef.current?.to ?? 1] } : {}
+		} };
+		const axes = [timeAxis(spanMs)];
+		units.forEach((u, ui) => {
+			const key = `y:${u}`;
+			const spec = specFor(u);
+			scales[key] = { range: (self) => {
+				const vals = [];
+				self.series.forEach((s, si) => {
+					if (si === 0 || s.scale !== key) return;
+					for (const v of self.data[si] ?? []) vals.push(v);
+				});
+				const r = valueRange(vals, spec);
+				return [r[0], r[1]];
+			} };
+			const unit = u === "" ? null : u;
+			const ax = valueAxis(key, ui % 2 === 0 ? 3 : 1, (v) => fmt(v, unit), ui === 0);
+			axes.push({
+				...ax,
+				splits: (_self, _axisIdx, min, max) => valueSplits([min, max], spec)
+			});
+		});
+		const uSeries = [{}];
+		const bands = [];
+		const defs = series;
+		const primaryCount = defs.filter((d) => !d.compare).length;
+		let seriesIdx = 1;
+		let prevStackIdx = null;
+		defs.forEach((d) => {
+			const style = chartSeriesStyle(d.colorIndex);
+			const color = () => resolveChartColor(style.token);
+			const paths = d.interpolation === "step" ? lib.paths.stepped?.({ align: 1 }) : lib.paths.linear?.();
+			const isStacked = stacked && !d.compare;
+			const fillSingle = !stacked && area && primaryCount === 1 && !d.compare;
+			const line = {
+				label: d.label,
+				scale: `y:${unitKey(d.unit)}`,
+				stroke: d.compare ? () => withAlpha(color(), .6) : color,
+				width: d.compare ? 1.25 : 2,
+				dash: d.compare ? [4, 4] : style.dash.length > 0 ? [...style.dash] : void 0,
+				spanGaps: false,
+				points: { show: false },
+				...paths ? { paths } : {},
+				...isStacked && prevStackIdx === null ? {
+					fill: () => withAlpha(color(), .85),
+					fillTo: 0
+				} : {},
+				...fillSingle ? { fill: () => withAlpha(color(), .15) } : {}
+			};
+			uSeries.push(line);
+			const thisIdx = seriesIdx;
+			if (isStacked && prevStackIdx !== null) bands.push({
+				series: [thisIdx, prevStackIdx],
+				fill: () => withAlpha(color(), .85)
+			});
+			if (isStacked) prevStackIdx = thisIdx;
+			seriesIdx += 1;
+			if (d.band) {
+				const hidden = {
+					scale: `y:${unitKey(d.unit)}`,
+					stroke: () => "transparent",
+					width: 0,
+					points: { show: false },
+					spanGaps: false,
+					...paths ? { paths } : {}
+				};
+				uSeries.push({
+					...hidden,
+					label: `${d.label} min`
+				}, {
+					...hidden,
+					label: `${d.label} max`
+				});
+				bands.push({
+					series: [seriesIdx + 1, seriesIdx],
+					fill: () => withAlpha(color(), .15)
+				});
+				seriesIdx += 2;
+			}
+		});
+		return {
+			ms: 1,
+			legend: { show: false },
+			padding: [
+				8,
+				30,
+				0,
+				0
+			],
+			scales,
+			axes,
+			series: uSeries,
+			bands,
+			cursor: chartCursor(syncKey),
+			hooks: {
+				drawClear: [gapShadeHook(() => modelRef.current.gaps)],
+				setCursor: [(u) => setCursorIdx(u.cursor.idx ?? null)]
+			}
+		};
+	}, [
+		optionsKey,
+		fmt,
+		specFor
+	]);
+	const shown = readoutAt(model, cursorIdx);
+	const legend = series.map((s, i) => {
+		const style = chartSeriesStyle(s.colorIndex);
+		const v = shown[i];
+		return {
+			id: s.id,
+			label: s.label,
+			token: style.token,
+			dashed: s.compare === true || style.dash.length > 0,
+			muted: s.compare === true,
+			value: v === null || v === void 0 ? model.empty ? void 0 : "—" : fmt(v, unitOf(s))
+		};
+	});
+	const readoutTime = cursorIdx !== null && model.xs[cursorIdx] !== void 0 ? formatCursorTime(model.xs[cursorIdx] ?? 0, spanMs()) : null;
+	const summary = (0, react$1.useMemo)(() => {
+		const latest = latestValues(model);
+		const from = range?.from ?? model.xs[0];
+		const to = range?.to ?? model.xs.at(-1);
+		const parts = series.map((s, i) => {
+			const v = latest[i];
+			return `${s.label} ${v === null || v === void 0 ? t("uiLibrary.charts.unknown", "unknown") : fmt(v, unitOf(s))}`;
+		}).join("; ");
+		if (from === void 0 || to === void 0 || !(to > from)) return t("uiLibrary.charts.seriesSummaryNoRange", "{{title}}: {{parts}}", {
+			title,
+			parts
+		});
+		return t("uiLibrary.charts.seriesSummary", "{{title}}, {{from}} to {{to}}: {{parts}}", {
+			title,
+			from: formatTimeLabel(from, to - from),
+			to: formatTimeLabel(to, to - from),
+			parts
+		});
+	}, [
+		model,
+		series,
+		range,
+		title,
+		t,
+		fmt
+	]);
+	const toolbar = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [windowToggle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartWindowToggle, { ...windowToggle }), actions] });
+	const sizeClass = height <= 64 ? "sm" : height <= 120 ? "md" : "lg";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartFrame, {
+		title,
+		actions: toolbar,
+		readoutTime,
+		legend,
+		summary,
+		footer,
+		placeholder: pending ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPlaceholder, {
+			message: t("uiLibrary.charts.loading", "Loading…"),
+			height: sizeClass
+		}) : model.empty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPlaceholder, {
+			message: emptyMessage ?? t("uiLibrary.charts.empty", "Nothing was recorded in this window."),
+			height: sizeClass
+		}) : void 0,
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UPlotHost, {
+			optionsKey,
+			buildOptions,
+			data,
+			height
+		})
+	});
+}
+//#endregion
+//#region src/composites/charts/StateTimeline.tsx
+/**
+* StateTimeline — boolean and enum states as bands over wall time (uPlot).
+*
+* One row per state series. A state is a filled band in its categorical slot
+* (the ordinal of the value in its `states` list, so a colour follows the
+* state, never its rank); a boolean's `false` is a recessive fill, and a span
+* nothing was recorded for is left EMPTY — unknown never looks like a state.
+* The legend gives the time spent in each state over the window ("open
+* 2h 14m"), and the cursor (synced through `syncKey`) names the state under it.
+*/
+/** Pixel height of one row band — matches the `h-5` label cells. */
+var ROW_PX = 20;
+var AXIS_PX = 22;
+/** 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;
+	if (row.kind === "boolean") return state === row.states[1] ? { token: chartSeriesStyle(base).token } : { token: "border" };
+	return { token: chartSeriesStyle(base + Math.max(0, row.states.indexOf(state))).token };
+}
+function StateTimeline({ title, rows, range, syncKey, pending = false, emptyMessage, actions, className }) {
+	const t = useUiText();
+	const [cursorT, setCursorT] = (0, react$1.useState)(null);
+	const rowsRef = (0, react$1.useRef)(rows);
+	rowsRef.current = rows;
+	const rangeRef = (0, react$1.useRef)(range);
+	rangeRef.current = range;
+	const span = range.to - range.from;
+	const empty = rows.every((r) => r.segments.length === 0);
+	const labelOf = (row, s) => row.stateLabel?.(s) ?? s;
+	const optionsKey = `${rows.map((r) => `${r.id}:${r.states.join("|")}`).join(",")}#${syncKey ?? ""}`;
+	const data = (0, react$1.useMemo)(() => [[range.from, range.to], [null, null]], [range.from, range.to]);
+	const buildOptions = (0, react$1.useCallback)(() => ({
+		ms: 1,
+		legend: { show: false },
+		padding: [
+			0,
+			30,
+			0,
+			40
+		],
+		scales: {
+			x: {
+				time: true,
+				range: () => [rangeRef.current.from, rangeRef.current.to]
+			},
+			y: { range: () => [0, 1] }
+		},
+		axes: [timeAxis(() => rangeRef.current.to - rangeRef.current.from), {
+			show: false,
+			scale: "y"
+		}],
+		series: [{}, {
+			scale: "y",
+			stroke: () => "transparent",
+			points: { show: false }
+		}],
+		cursor: {
+			...chartCursor(syncKey),
+			points: { show: false }
+		},
+		hooks: {
+			draw: [(u) => {
+				const ctx = u.ctx;
+				const list = rowsRef.current;
+				const pr = u.bbox.height / Math.max(1, list.length);
+				ctx.save();
+				list.forEach((row, ri) => {
+					const y = u.bbox.top + ri * pr;
+					ctx.fillStyle = withAlpha(resolveChartColor("foreground-subtle"), .06);
+					ctx.fillRect(u.bbox.left, y + 2, u.bbox.width, pr - 4);
+					for (const seg of row.segments) {
+						if (seg.state === null) continue;
+						const x0 = u.valToPos(Math.max(seg.from, rangeRef.current.from), "x", true);
+						const x1 = u.valToPos(Math.min(seg.to, rangeRef.current.to), "x", true);
+						if (!(x1 > x0)) continue;
+						ctx.fillStyle = resolveChartColor(stateStyle(row, seg.state).token);
+						ctx.fillRect(x0, y + 2, Math.max(1, x1 - x0), pr - 4);
+					}
+				});
+				ctx.restore();
+			}],
+			setCursor: [(u) => {
+				const left = u.cursor.left ?? -1;
+				setCursorT(left < 0 ? null : u.posToVal(left, "x"));
+			}]
+		}
+	}), [optionsKey]);
+	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) => {
+			const ms = durations[i]?.get(s) ?? 0;
+			return ms > 0 ? `${labelOf(row, s)} ${formatSpan(ms)}` : null;
+		}).filter((p) => p !== null).join(", ");
+		return `${row.label}: ${parts.length > 0 ? parts : t("uiLibrary.charts.noState", "nothing recorded")}`;
+	}).join("; ");
+	const fullSummary = t("uiLibrary.charts.stateSummary", "{{title}}, {{from}} to {{to}}: {{parts}}", {
+		title,
+		from: formatTimeLabel(range.from, span),
+		to: formatTimeLabel(range.to, span),
+		parts: summary
+	});
+	const multi = rows.length > 1;
+	const placeholder = pending ? t("uiLibrary.charts.loading", "Loading…") : empty ? emptyMessage ?? t("uiLibrary.charts.empty", "Nothing was recorded in this window.") : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+		className: cn("min-w-0 m-0", className),
+		"data-chart-frame": "",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-baseline justify-between gap-2 mb-1 min-w-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
+					className: "text-[10px] uppercase tracking-wider text-foreground-subtle truncate min-w-0",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 shrink-0",
+					children: [cursorT !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[10px] tabular-nums text-foreground-subtle",
+						children: formatCursorTime(cursorT, span)
+					}), actions]
+				})]
+			}),
+			placeholder !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPlaceholder, {
+				message: placeholder,
+				height: "sm"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "img",
+				"aria-label": fullSummary,
+				className: "flex min-w-0",
+				children: [multi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "w-20 sm:w-28 shrink-0 pr-2",
+					"aria-hidden": "true",
+					children: rows.map((r) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "h-5 flex items-center text-[10px] text-foreground-muted truncate",
+						children: r.label
+					}, r.id))
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex-1 min-w-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UPlotHost, {
+						optionsKey,
+						buildOptions,
+						data,
+						height: rows.length * ROW_PX + AXIS_PX
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "sr-only",
+				children: fullSummary
+			}),
+			placeholder === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "mt-1 space-y-0.5 list-none p-0 m-0",
+				children: rows.map((row, i) => {
+					const now = cursorT === null ? null : stateAt(row.segments, cursorT);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: "flex flex-wrap items-center gap-x-3 gap-y-0.5 min-w-0",
+						children: [multi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] text-foreground-muted",
+							children: row.label
+						}), row.states.map((s) => {
+							const ms = durations[i]?.get(s) ?? 0;
+							if (ms === 0) return null;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: cn("inline-flex items-center gap-1 text-[10px]", now === s ? "text-foreground" : "text-foreground-muted"),
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartSwatch, { token: stateStyle(row, s).token }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labelOf(row, s) }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "tabular-nums text-foreground",
+										children: formatSpan(ms)
+									})
+								]
+							}, s);
+						})]
+					}, row.id);
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composites/charts/Sparkline.tsx
+/**
+* Sparkline — one series, no axes, no cursor: a trend beside a number in a
+* 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 }) {
+	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 },
+		cursor: { show: false },
+		padding: [
+			2,
+			1,
+			2,
+			1
+		],
+		scales: {
+			x: { time: false },
+			y: { range: (_u, min, max) => {
+				const lo = zeroBased ? Math.min(0, min) : min;
+				return [lo, max > lo ? max : lo + 1];
+			} }
+		},
+		axes: [{ show: false }, { show: false }],
+		series: [{}, {
+			stroke: () => resolveChartColor(token),
+			width: 1.5,
+			points: { show: false },
+			spanGaps: false,
+			...lib.paths.linear ? { paths: lib.paths.linear() } : {}
+		}]
+	}), [token, zeroBased]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		role: "img",
+		"aria-label": ariaLabel,
+		className: cn("inline-block align-middle", widthClassName, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UPlotHost, {
+			optionsKey: `${token}#${zeroBased ? "z" : ""}`,
+			buildOptions,
+			data,
+			height,
+			inline: true
+		})
+	});
+}
+//#endregion
+//#region src/composites/device-history/history-window.ts
+var HISTORY_WINDOW_IDS = [
+	"24h",
+	"7d",
+	"30d",
+	"1y",
+	"custom"
+];
+var H = 36e5;
+var D = 24 * H;
+var HISTORY_WINDOW_MS = {
+	"24h": D,
+	"7d": 7 * D,
+	"30d": 30 * D,
+	"1y": 365 * D
+};
+function isHistoryWindowId(v) {
+	return v !== null && v !== void 0 && HISTORY_WINDOW_IDS.includes(v);
+}
+/**
+* The window a preset means at `now`. `custom` without a valid range (from
+* before to) falls back to the last 24 hours rather than an empty window.
+*/
+function resolveHistoryWindow(id, now, custom) {
+	if (id === "custom") {
+		if (custom && custom.to > custom.from) return {
+			from: custom.from,
+			to: custom.to
+		};
+		return {
+			from: now - HISTORY_WINDOW_MS["24h"],
+			to: now
+		};
+	}
+	return {
+		from: now - HISTORY_WINDOW_MS[id],
+		to: now
+	};
+}
+/** The period of the same length just before `w`, and the shift that lays it over `w`. */
+function previousWindow(w) {
+	const span = w.to - w.from;
+	return {
+		window: {
+			from: w.from - span,
+			to: w.to - span
+		},
+		shiftMs: span
+	};
+}
+/** Encode a custom range for the URL: `<fromMs>-<toMs>`. */
+function encodeCustomWindow(w) {
+	return `${String(Math.round(w.from))}-${String(Math.round(w.to))}`;
+}
+function decodeCustomWindow(raw) {
+	if (!raw) return null;
+	const m = /^(\d+)-(\d+)$/.exec(raw);
+	if (!m) return null;
+	const from = Number(m[1]);
+	const to = Number(m[2]);
+	return to > from ? {
+		from,
+		to
+	} : null;
+}
+/** Milliseconds a rollup bucket of a resolution covers (`1d` is nominal across DST). */
+var RESOLUTION_BUCKET_MS = {
+	"5m": 5 * 6e4,
+	"1h": H,
+	"1d": D
+};
+//#endregion
+//#region src/composites/device-history/history-model.ts
+/**
+* The pure half of a device's History view: which charts a device's series
+* make, in which sections, and how a `query` answer becomes chart data.
+*
+* Grouping mirrors the State panel: one section per capability in
+* `HISTORY_CATALOG` order (its fields in catalog order), then one section per
+* producer addon, sorted. Inside a section: one line chart per UNIT (never
+* two units on one axis), one state timeline per boolean or enum, the
+* derived energy as bars. A camera's occupancy is ONE chart of every
+* (zone × class) scope.
+*/
+/** The producer series a camera's occupancy chart reads. */
+var OCCUPANCY_KEY = "addon:pipeline-analytics/occupancy";
+/** `cap:<capName>.<fieldPath>` → its parts; `null` for any other key. */
+function parseCapKey(key) {
+	if (!key.startsWith("cap:")) return null;
+	const body = key.slice(4);
+	const dot = body.indexOf(".");
+	if (dot <= 0) return null;
+	return {
+		cap: body.slice(0, dot),
+		field: body.slice(dot + 1)
+	};
+}
+/** `addon:<addonId>/<name>` → its parts; `null` for any other key. */
+function parseProducerKey(key) {
+	if (!key.startsWith("addon:")) return null;
+	const body = key.slice(6);
+	const slash = body.indexOf("/");
+	if (slash <= 0) return null;
+	return {
+		addonId: body.slice(0, slash),
+		name: body.slice(slash + 1)
+	};
+}
+var CATALOG_CAPS = Object.keys(_camstack_types.HISTORY_CATALOG);
+function capRank(cap) {
+	const i = CATALOG_CAPS.indexOf(cap);
+	return i < 0 ? CATALOG_CAPS.length : i;
+}
+function fieldRank(cap, field) {
+	const fields = Object.keys(_camstack_types.HISTORY_CATALOG[cap] ?? {});
+	const i = fields.indexOf(field);
+	return i < 0 ? fields.length : i;
+}
+var isState = (s) => s.kind === "boolean" || s.kind === "enum";
+/** One section's charts: a line chart per unit (first-seen order), then one timeline per state. */
+function chartsOf(sectionId, title, list) {
+	const out = [];
+	const byUnit = /* @__PURE__ */ new Map();
+	for (const s of list) {
+		if (s.key === _camstack_types.DEVICE_HISTORY_ENERGY_KEY) {
+			out.push({
+				type: "energy",
+				id: `${sectionId}:energy`,
+				title: s.displayName,
+				series: s
+			});
+			continue;
+		}
+		if (isState(s)) continue;
+		const u = s.unit ?? "";
+		byUnit.set(u, [...byUnit.get(u) ?? [], s]);
+	}
+	const lines = [...byUnit.entries()].map(([unit, series]) => {
+		const names = [...new Set(series.map((s) => s.displayName))];
+		return {
+			type: "lines",
+			id: `${sectionId}:unit:${unit}`,
+			title: names.length === 1 ? names[0] ?? title : unit === "" ? title : `${title} (${unit})`,
+			unit: unit === "" ? null : unit,
+			series
+		};
+	});
+	const states = list.filter(isState).map((s) => ({
+		type: "states",
+		id: `${sectionId}:state:${s.key}:${s.scope}`,
+		title: s.displayName,
+		series: s
+	}));
+	return [
+		...lines,
+		...out,
+		...states
+	];
+}
+/**
+* Group a device's series into sections. Energy (a derived key) joins the
+* `power-meter` section when the device has one, else gets its own.
+*/
+function groupDeviceSeries(series, capTitle) {
+	const caps = /* @__PURE__ */ new Map();
+	const producers = /* @__PURE__ */ new Map();
+	const occupancy = [];
+	let energy = null;
+	for (const s of series) {
+		if (s.key === _camstack_types.DEVICE_HISTORY_ENERGY_KEY) {
+			energy = s;
+			continue;
+		}
+		if (s.key === "addon:pipeline-analytics/occupancy") {
+			occupancy.push(s);
+			continue;
+		}
+		const cap = parseCapKey(s.key);
+		if (cap) {
+			caps.set(cap.cap, [...caps.get(cap.cap) ?? [], s]);
+			continue;
+		}
+		const addon = parseProducerKey(s.key)?.addonId ?? "other";
+		producers.set(addon, [...producers.get(addon) ?? [], s]);
+	}
+	if (energy !== null) if (caps.has("power-meter")) caps.set("power-meter", [...caps.get("power-meter") ?? [], energy]);
+	else caps.set("energy", [energy]);
+	const capSections = [...caps.entries()].sort(([a], [b]) => capRank(a) - capRank(b) || a.localeCompare(b)).map(([cap, list]) => {
+		const sorted = [...list].sort((x, y) => {
+			const fx = parseCapKey(x.key)?.field ?? "";
+			const fy = parseCapKey(y.key)?.field ?? "";
+			return fieldRank(cap, fx) - fieldRank(cap, fy) || x.scope.localeCompare(y.scope);
+		});
+		const id = `cap:${cap}`;
+		return {
+			id,
+			kind: "cap",
+			name: cap,
+			charts: chartsOf(id, capTitle(cap), sorted)
+		};
+	});
+	if (occupancy.length > 0) {
+		const list = producers.get("pipeline-analytics") ?? [];
+		producers.set("pipeline-analytics", list);
+	}
+	const producerSections = [...producers.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([addon, list]) => {
+		const id = `addon:${addon}`;
+		const charts = chartsOf(id, capTitle(addon), list);
+		return {
+			id,
+			kind: "producer",
+			name: addon,
+			charts: [...addon === "pipeline-analytics" && occupancy.length > 0 ? [{
+				type: "occupancy",
+				id: `${id}:occupancy`,
+				title: occupancy[0]?.displayName ?? "Occupancy",
+				series: [...occupancy].sort((a, b) => a.scope.localeCompare(b.scope))
+			}] : [], ...charts]
+		};
+	});
+	return [...capSections, ...producerSections].filter((s) => s.charts.length > 0);
+}
+/** The unique keys a set of charts reads (one `queryMany` item each: every scope comes back). */
+function chartKeys(charts) {
+	const keys = /* @__PURE__ */ new Set();
+	for (const c of charts) if (c.type === "lines" || c.type === "occupancy") for (const s of c.series) keys.add(s.key);
+	else keys.add(c.series.key);
+	return [...keys];
+}
+/** One series of a `query` answer, found by scope. */
+function seriesOf(result, scope) {
+	return result?.series.find((s) => s.scope === scope);
+}
+/** The number a line shows for a point: time-weighted mean, else mean, else the last value. */
+function levelOf(p, kind) {
+	if (kind === "counter") return p.last;
+	return p.twMean ?? p.mean ?? p.last;
+}
+/**
+* Line points for a gauge or counter. A rolled-up answer carries its
+* min/max (a band). A CAP series is change-only and held, so the window
+* opens on the value in force (`before`); a producer's buckets are not held
+* and an absent bucket is a hole.
+*/
+function linePoints(info, result, from) {
+	const s = seriesOf(result, info.scope);
+	const rollup = result !== void 0 && result.resolution !== "raw";
+	const held = info.source === "cap";
+	const points = (s?.points ?? []).map((p) => ({
+		t: p.t,
+		v: levelOf(p, info.kind),
+		...rollup && info.kind === "gauge" ? {
+			min: p.min,
+			max: p.max
+		} : {}
+	}));
+	if (held && s?.before && s.before.value !== null && (points[0]?.t ?? Infinity) > from) points.unshift({
+		t: from,
+		v: s.before.value
+	});
+	return {
+		points,
+		gapMs: held || result === void 0 ? void 0 : gapThresholdMs(result.resolution === "raw" ? 1e4 : RESOLUTION_BUCKET_MS[result.resolution]),
+		held
+	};
+}
+/** Shift every point by `shiftMs` (a previous period laid over the current one). */
+function shiftPoints(points, shiftMs) {
+	return points.map((p) => ({
+		...p,
+		t: p.t + shiftMs
+	}));
+}
+/** The state names a boolean series takes, `false` first. */
+var BOOLEAN_STATES = ["false", "true"];
+/**
+* A state series as segments plus the exact time spent in each state.
+*
+* Raw points are changes. A rollup bucket is drawn in its DOMINANT state
+* (the one held longest in it), while the totals add the bucket's real
+* per-state milliseconds — so "open 2h 14m" stays exact at any zoom.
+*/
+function stateRow(info, result, from, to) {
+	const states = info.kind === "boolean" ? BOOLEAN_STATES : info.values ?? [];
+	const s = seriesOf(result, info.scope);
+	const nameOf = (p) => info.kind === "boolean" ? p.last === null ? null : p.last >= .5 ? "true" : "false" : p.state;
+	if (result === void 0 || s === void 0) return {
+		segments: [],
+		totals: /* @__PURE__ */ new Map(),
+		states
+	};
+	const beforeState = s.before === null ? null : info.kind === "boolean" ? s.before.value === null ? null : s.before.value >= .5 ? "true" : "false" : s.before.state;
+	if (result.resolution === "raw") {
+		const segments = segmentsFromChanges(s.points.map((p) => ({
+			t: p.t,
+			state: nameOf(p)
+		})), from, to, beforeState);
+		const totals = /* @__PURE__ */ new Map();
+		for (const seg of segments) if (seg.state !== null) totals.set(seg.state, (totals.get(seg.state) ?? 0) + (seg.to - seg.from));
+		return {
+			segments,
+			totals,
+			states
+		};
+	}
+	const bucketMs = RESOLUTION_BUCKET_MS[result.resolution];
+	const totals = /* @__PURE__ */ new Map();
+	const segments = [];
+	for (const p of s.points) {
+		const end = Math.min(to, p.t + bucketMs);
+		const start = Math.max(from, p.t);
+		if (!(end > start)) continue;
+		const perState = bucketStates(p, info, bucketMs);
+		let dominant = null;
+		let best = -1;
+		for (const [name, ms] of perState) {
+			totals.set(name, (totals.get(name) ?? 0) + ms * ((end - start) / bucketMs));
+			if (ms > best) {
+				best = ms;
+				dominant = name;
+			}
+		}
+		const prev = segments.at(-1);
+		if (prev && prev.state === dominant && prev.to === start) segments[segments.length - 1] = {
+			...prev,
+			to: end
+		};
+		else segments.push({
+			from: start,
+			to: end,
+			state: dominant
+		});
+	}
+	return {
+		segments: segments.filter((x) => x.state !== null),
+		totals,
+		states
+	};
+}
+function bucketStates(p, info, bucketMs) {
+	if (info.kind === "boolean") {
+		const frac = p.twMean ?? p.mean;
+		if (frac === null) return p.last === null ? /* @__PURE__ */ new Map() : new Map([[p.last >= .5 ? "true" : "false", bucketMs]]);
+		return new Map([["true", frac * bucketMs], ["false", (1 - frac) * bucketMs]]);
+	}
+	if (p.states) return new Map(Object.entries(p.states));
+	return p.state === null ? /* @__PURE__ */ new Map() : new Map([[p.state, bucketMs]]);
+}
+/** Energy bars: one bucket per point, the kWh used in it (`delta`). */
+function energyBuckets(result) {
+	const s = result?.series[0];
+	const bucketMs = result === void 0 || result.resolution === "raw" ? RESOLUTION_BUCKET_MS["1h"] : RESOLUTION_BUCKET_MS[result.resolution];
+	return {
+		buckets: (s?.points ?? []).map((p) => ({
+			t: p.t,
+			values: [p.delta]
+		})),
+		bucketMs
+	};
+}
+function occupancyLines(series) {
+	return series.map((s) => {
+		const parsed = (0, _camstack_types.parseOccupancyScope)(s.scope);
+		return {
+			scope: s.scope,
+			zoneId: parsed.zoneId,
+			className: parsed.className
+		};
+	});
+}
+/** The filter values an occupancy chart offers: zones and classes that exist. */
+function occupancyFacets(lines) {
+	return {
+		zones: [...new Set(lines.map((l) => l.zoneId))].sort(),
+		classes: [...new Set(lines.flatMap((l) => l.className === void 0 ? [] : [l.className]))].sort()
+	};
+}
+/**
+* The lines a filter keeps. With no class picked the per-zone AGGREGATE lines
+* show (summing classes again would double count); a class shows that class
+* in every (or the picked) zone.
+*/
+function filterOccupancyLines(lines, filter) {
+	return lines.filter((l) => (filter.zone === null || l.zoneId === filter.zone) && (filter.className === null ? l.className === void 0 : l.className === filter.className));
+}
+//#endregion
+//#region src/composites/device-history/HistoryChart.tsx
+/**
+* One chart of a device's History view, from its spec and the reads.
+* Lines → `TimeSeriesChart`, states → `StateTimeline`, energy → `BarSeries`
+* with the window total, occupancy → one `TimeSeriesChart` of every
+* (zone × class) scope with zone and class filters.
+*
+* A read that failed says so in place of the chart; a read that answered no
+* point is the empty state — never a flat zero.
+*/
+var ALL = "__all__";
+/** Operator words for a boolean field's two states. */
+function booleanLabels(key, t) {
+	const field = key.split(".").at(-1) ?? "";
+	if (/open/i.test(field)) return {
+		on: t("uiLibrary.history.state.open", "open"),
+		off: t("uiLibrary.history.state.closed", "closed")
+	};
+	if (/online|connected/i.test(field)) return {
+		on: t("uiLibrary.history.state.online", "online"),
+		off: t("uiLibrary.history.state.offline", "offline")
+	};
+	if (/detected|tampered/i.test(field)) return {
+		on: t("uiLibrary.history.state.detected", "detected"),
+		off: t("uiLibrary.history.state.clear", "clear")
+	};
+	return {
+		on: t("uiLibrary.history.state.on", "on"),
+		off: t("uiLibrary.history.state.off", "off")
+	};
+}
+function failure(entry) {
+	return entry !== void 0 && !entry.ok ? entry.error : null;
+}
+function HistoryChart({ spec, entryFor, reads, window, compare, syncKey, actions }) {
+	const t = useUiText();
+	const pending = reads === null;
+	if (spec.type === "states") {
+		const entry = entryFor(spec.series.key, false);
+		const err = failure(entry);
+		if (err) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadFailed, {
+			title: spec.title,
+			error: err,
+			actions
+		});
+		const result = entry?.ok ? entry.result : void 0;
+		const row = stateRow(spec.series, result, window.from, window.to);
+		const labels = booleanLabels(spec.series.key, t);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateTimeline, {
+			title: spec.title,
+			range: window,
+			syncKey,
+			pending,
+			actions,
+			rows: [{
+				id: spec.id,
+				label: spec.title,
+				kind: spec.series.kind === "boolean" ? "boolean" : "enum",
+				states: row.states,
+				segments: row.segments,
+				totals: row.totals,
+				stateLabel: spec.series.kind === "boolean" ? (s) => s === "true" ? labels.on : labels.off : void 0
+			}]
+		});
+	}
+	if (spec.type === "energy") {
+		const entry = entryFor(spec.series.key, false);
+		const err = failure(entry);
+		if (err) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadFailed, {
+			title: spec.title,
+			error: err,
+			actions
+		});
+		const { buckets, bucketMs } = energyBuckets(entry?.ok ? entry.result : void 0);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarSeries, {
+			title: spec.title,
+			layers: [{
+				id: "kwh",
+				label: spec.title,
+				colorIndex: 4
+			}],
+			buckets,
+			bucketMs,
+			range: window,
+			unit: spec.series.unit ?? "kWh",
+			showTotal: true,
+			syncKey,
+			pending,
+			actions
+		});
+	}
+	if (spec.type === "occupancy") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OccupancyChart, {
+		spec,
+		entryFor,
+		reads,
+		window,
+		compare,
+		syncKey,
+		actions
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinesChart, {
+		title: spec.title,
+		series: spec.series,
+		entryFor,
+		reads,
+		window,
+		compare,
+		syncKey,
+		actions,
+		labelOf: (s) => spec.series.length > 1 || s.scope !== "" ? seriesLabel(s) : spec.title
+	});
+}
+function seriesLabel(s) {
+	return s.scope === "" ? s.displayName : `${s.displayName} · ${s.scope}`;
+}
+function LinesChart({ title, series, entryFor, reads, window, compare, syncKey, actions, labelOf, toolbar, colorOf }) {
+	const t = useUiText();
+	const errors = [...new Set(series.map((s) => failure(entryFor(s.key, false))).filter((e) => e !== null))];
+	const defs = (0, react$1.useMemo)(() => {
+		const out = [];
+		series.forEach((s, i) => {
+			const cur = entryFor(s.key, false);
+			const result = cur?.ok ? cur.result : void 0;
+			const shaped = linePoints(s, result, window.from);
+			const color = colorOf?.(s, i) ?? i;
+			const interpolation = shaped.held && result?.resolution === "raw" ? "step" : "linear";
+			out.push({
+				id: `${s.key}|${s.scope}`,
+				label: labelOf(s),
+				unit: s.unit,
+				colorIndex: color,
+				points: shaped.points,
+				gapMs: shaped.gapMs,
+				interpolation,
+				band: series.length === 1 && result !== void 0 && result.resolution !== "raw"
+			});
+			if (compare && reads?.previous) {
+				const prev = entryFor(s.key, true);
+				const prevResult = prev?.ok ? prev.result : void 0;
+				if (prevResult) {
+					const prevShaped = linePoints(s, prevResult, window.from - reads.shiftMs);
+					out.push({
+						id: `${s.key}|${s.scope}|previous`,
+						label: t("uiLibrary.history.previousOf", "{{label}} (previous period)", { label: labelOf(s) }),
+						unit: s.unit,
+						colorIndex: color,
+						points: shiftPoints(prevShaped.points, reads.shiftMs),
+						gapMs: prevShaped.gapMs,
+						interpolation,
+						compare: true
+					});
+				}
+			}
+		});
+		return out;
+	}, [
+		series,
+		entryFor,
+		window.from,
+		compare,
+		reads,
+		labelOf,
+		colorOf,
+		t
+	]);
+	if (errors.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadFailed, {
+		title,
+		error: errors.join("; "),
+		actions
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeSeriesChart, {
+		title,
+		series: defs,
+		range: window,
+		syncKey,
+		pending: reads === null,
+		actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [toolbar, actions] })
+	});
+}
+function OccupancyChart({ spec, entryFor, reads, window, compare, syncKey, actions }) {
+	const t = useUiText();
+	const [zone, setZone] = (0, react$1.useState)(ALL);
+	const [cls, setCls] = (0, react$1.useState)(ALL);
+	const lines = (0, react$1.useMemo)(() => occupancyLines(spec.series), [spec.series]);
+	const facets = (0, react$1.useMemo)(() => occupancyFacets(lines), [lines]);
+	const kept = new Set(filterOccupancyLines(lines, {
+		zone: zone === ALL ? null : zone,
+		className: cls === ALL ? null : cls
+	}).map((l) => l.scope));
+	const shown = spec.series.filter((s) => kept.has(s.scope));
+	const zoneName = (z) => z === "" ? t("uiLibrary.history.wholeFrame", "Whole frame") : z;
+	const labelOf = (s) => {
+		const l = lines.find((x) => x.scope === s.scope);
+		if (!l) return s.scope;
+		return l.className === void 0 ? zoneName(l.zoneId) : `${zoneName(l.zoneId)} · ${l.className}`;
+	};
+	const colorOf = (s) => {
+		const own = lines.find((l) => l.scope === s.scope);
+		const peers = lines.filter((l) => l.className === own?.className);
+		return Math.max(0, peers.findIndex((l) => l.scope === s.scope));
+	};
+	const toolbar = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [facets.zones.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+		"aria-label": t("uiLibrary.history.filterZone", "Zone"),
+		value: zone,
+		onChange: (e) => setZone(e.target.value),
+		className: "h-6 text-[10px] py-0",
+		options: [{
+			value: ALL,
+			label: t("uiLibrary.history.allZones", "All zones")
+		}, ...facets.zones.map((z) => ({
+			value: z,
+			label: zoneName(z)
+		}))]
+	}), facets.classes.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+		"aria-label": t("uiLibrary.history.filterClass", "Class"),
+		value: cls,
+		onChange: (e) => setCls(e.target.value),
+		className: "h-6 text-[10px] py-0",
+		options: [{
+			value: ALL,
+			label: t("uiLibrary.history.allClasses", "All classes")
+		}, ...facets.classes.map((c) => ({
+			value: c,
+			label: c
+		}))]
+	})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinesChart, {
+		title: spec.title,
+		series: shown,
+		entryFor,
+		reads,
+		window,
+		compare,
+		syncKey,
+		actions,
+		toolbar,
+		labelOf,
+		colorOf
+	});
+}
+function ReadFailed({ title, error, actions }) {
+	const t = useUiText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+		className: "min-w-0 m-0",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-baseline justify-between gap-2 mb-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
+				className: "text-[10px] uppercase tracking-wider text-foreground-subtle truncate",
+				children: title
+			}), actions]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPlaceholder, {
+			height: "md",
+			message: t("uiLibrary.history.readFailed", "This history could not be read: {{error}}", { error })
+		})]
+	});
+}
+//#endregion
+//#region src/composites/device-history/history-selection.ts
+/**
+* A history SELECTION — which series a chart overlays — and its two
+* spellings: the History page URL (`?s=` repeated) and the account
+* preference row of saved panels (`admin.history-panels`, D894).
+*
+* A series is (subject, key, scope). The subject is a device (by numeric id)
+* or a node (by id); the scope `''` is the series' aggregate.
+*/
+var HistorySubjectSchema = zod.z.discriminatedUnion("kind", [zod.z.object({
+	kind: zod.z.literal("device"),
+	deviceId: zod.z.number().int()
+}), zod.z.object({
+	kind: zod.z.literal("node"),
+	nodeId: zod.z.string().min(1)
+})]);
+var HistorySeriesRefSchema = zod.z.object({
+	subject: HistorySubjectSchema,
+	key: zod.z.string().min(1),
+	scope: zod.z.string()
+});
+/** The most series one overlay may carry — one `queryMany` batch. */
+var HISTORY_SELECTION_MAX = 24;
+/** Stable identity of a series ref (React key, dedup, colour slot). */
+function seriesRefId(ref) {
+	return `${ref.subject.kind === "device" ? `d:${String(ref.subject.deviceId)}` : `n:${ref.subject.nodeId}`}|${ref.key}|${ref.scope}`;
+}
+/** One `?s=` value: `d,<deviceId>,<key>,<scope>` or `n,<nodeId>,<key>,<scope>`, each part URI-encoded. */
+function encodeSeriesRef(ref) {
+	return [
+		...ref.subject.kind === "device" ? ["d", String(ref.subject.deviceId)] : ["n", ref.subject.nodeId],
+		ref.key,
+		ref.scope
+	].map((p) => encodeURIComponent(p)).join(",");
+}
+function decodeSeriesRef(raw) {
+	const parts = raw.split(",");
+	if (parts.length !== 4) return null;
+	let decoded;
+	try {
+		decoded = parts.map((p) => decodeURIComponent(p));
+	} catch {
+		return null;
+	}
+	const [kind, id, key, scope] = decoded;
+	if (key === void 0 || key === "" || scope === void 0 || id === void 0) return null;
+	if (kind === "d") {
+		const deviceId = Number(id);
+		if (!Number.isInteger(deviceId)) return null;
+		return {
+			subject: {
+				kind: "device",
+				deviceId
+			},
+			key,
+			scope
+		};
+	}
+	if (kind === "n" && id !== "") return {
+		subject: {
+			kind: "node",
+			nodeId: id
+		},
+		key,
+		scope
+	};
+	return null;
+}
+/** Unique refs, in order, capped at {@link HISTORY_SELECTION_MAX}. */
+function normalizeSelection(refs) {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const r of refs) {
+		const id = seriesRefId(r);
+		if (seen.has(id)) continue;
+		seen.add(id);
+		out.push(r);
+		if (out.length >= 24) break;
+	}
+	return out;
+}
+/** The History page path showing `refs` over `window`. */
+function historyPageHref(refs, window) {
+	const params = new URLSearchParams();
+	for (const r of normalizeSelection(refs)) params.append("s", encodeSeriesRef(r));
+	if (window !== void 0 && window !== "custom") params.set("window", window);
+	return `${HISTORY_PAGE_PATH}?${params.toString()}`;
+}
+/** The cross-device History page's route. */
+var HISTORY_PAGE_PATH = "/system/history";
+/** The account preference namespace that holds saved panels and hidden charts. */
+var HISTORY_PANELS_NAMESPACE = "admin.history-panels";
+var WindowIdSchema = zod.z.enum(HISTORY_WINDOW_IDS);
+var HistoryPanelSchema = zod.z.object({
+	id: zod.z.string().min(1),
+	name: zod.z.string().min(1).max(80),
+	window: WindowIdSchema,
+	selection: zod.z.array(HistorySeriesRefSchema).max(24)
+});
+var HistoryPanelsValueSchema = zod.z.object({
+	version: zod.z.literal(1),
+	panels: zod.z.array(HistoryPanelSchema).max(50),
+	hidden: zod.z.record(zod.z.string(), zod.z.array(zod.z.string()).max(200))
+});
+var EMPTY_HISTORY_PANELS = {
+	version: 1,
+	panels: [],
+	hidden: {}
+};
+/**
+* Read a stored row's value. A row this client cannot read (another
+* version, a hand edit) is answered as empty rather than throwing — and the
+* caller must not write over it blindly: `parsed: false` says so.
+*/
+function readHistoryPanels(value) {
+	if (value === void 0 || value === null) return {
+		value: EMPTY_HISTORY_PANELS,
+		parsed: true
+	};
+	const r = HistoryPanelsValueSchema.safeParse(value);
+	return r.success ? {
+		value: r.data,
+		parsed: true
+	} : {
+		value: EMPTY_HISTORY_PANELS,
+		parsed: false
+	};
+}
+/** A copy of `value` with chart `chartId` hidden (or shown again) on device `deviceId`. */
+function withHiddenChart(value, deviceId, chartId, hidden) {
+	const key = String(deviceId);
+	const current = value.hidden[key] ?? [];
+	const next = hidden ? current.includes(chartId) ? current : [...current, chartId] : current.filter((c) => c !== chartId);
+	const rest = Object.fromEntries(Object.entries(value.hidden).filter(([k]) => k !== key));
+	return {
+		...value,
+		hidden: next.length > 0 ? {
+			...rest,
+			[key]: next
+		} : rest
+	};
+}
+/** A copy of `value` with `panel` saved (replacing one with the same id). */
+function withPanel(value, panel) {
+	const others = value.panels.filter((p) => p.id !== panel.id);
+	return {
+		...value,
+		panels: [...others, panel]
+	};
+}
+function withoutPanel(value, panelId) {
+	return {
+		...value,
+		panels: value.panels.filter((p) => p.id !== panelId)
+	};
+}
+//#endregion
+//#region src/composites/device-history/HistoryWindowBar.tsx
+/** `datetime-local` value for an instant, in the browser's zone. */
+function toLocalInput(ms) {
+	const d = new Date(ms);
+	const pad = (n) => String(n).padStart(2, "0");
+	return `${String(d.getFullYear())}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function fromLocalInput(v) {
+	const ms = new Date(v).getTime();
+	return Number.isFinite(ms) ? ms : null;
+}
+function HistoryWindowBar({ value, onChange, custom, onCustomChange, compare, onCompareChange }) {
+	const t = useUiText();
+	const now = Date.now();
+	const range = custom ?? {
+		from: now - 864e5,
+		to: now
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-wrap items-center gap-x-3 gap-y-2 min-w-0",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartWindowToggle, {
+				ariaLabel: t("uiLibrary.history.window", "Time window"),
+				value,
+				onChange,
+				options: [
+					{
+						id: "24h",
+						label: t("uiLibrary.history.window24h", "24 h")
+					},
+					{
+						id: "7d",
+						label: t("uiLibrary.history.window7d", "7 d")
+					},
+					{
+						id: "30d",
+						label: t("uiLibrary.history.window30d", "30 d")
+					},
+					{
+						id: "1y",
+						label: t("uiLibrary.history.window1y", "1 y")
+					},
+					{
+						id: "custom",
+						label: t("uiLibrary.history.windowCustom", "Custom")
+					}
+				]
+			}),
+			value === "custom" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
+						type: "datetime-local",
+						"aria-label": t("uiLibrary.history.from", "From"),
+						className: "h-7 w-auto text-xs",
+						value: toLocalInput(range.from),
+						onChange: (e) => {
+							const from = fromLocalInput(e.target.value);
+							if (from !== null && from < range.to) onCustomChange({
+								from,
+								to: range.to
+							});
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[10px] text-foreground-subtle",
+						children: "–"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
+						type: "datetime-local",
+						"aria-label": t("uiLibrary.history.to", "To"),
+						className: "h-7 w-auto text-xs",
+						value: toLocalInput(range.to),
+						onChange: (e) => {
+							const to = fromLocalInput(e.target.value);
+							if (to !== null && to > range.from) onCustomChange({
+								from: range.from,
+								to
+							});
+						}
+					})
+				]
+			}),
+			compare !== void 0 && onCompareChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "inline-flex items-center gap-1.5 text-[11px] text-foreground-muted cursor-pointer select-none",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Checkbox, {
+					checked: compare,
+					onChange: (e) => onCompareChange(e.target.checked)
+				}), t("uiLibrary.history.compare", "Compare with previous period")]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composites/device-history/history-reads.ts
+/**
+* Batched history reads. `queryMany` answers up to 24 reads over one window
+* in one call — but it is admin-only (its subjects are nested where the
+* device scope gate cannot see them). A principal it refuses reads each
+* DEVICE series through `query` instead; a node series has no other door and
+* is reported as refused.
+*
+* Every item gets an entry, in order: an answer, or the error that item met.
+* A failed item never hides the others, and is never an empty series.
+*/
+var DEFAULT_MAX_POINTS = 800;
+/** Split into batches of at most `size`. */
+function chunk(items, size) {
+	const out = [];
+	for (let i = 0; i < items.length; i += size) out.push(items.slice(i, i + size));
+	return out;
+}
+/** Did the hub refuse this principal (rather than fail)? */
+function isRefusal(err) {
+	if (typeof err !== "object" || err === null) return false;
+	const data = "data" in err ? err.data : void 0;
+	const code = typeof data === "object" && data !== null && "code" in data ? data.code : void 0;
+	return code === "FORBIDDEN" || code === "UNAUTHORIZED";
+}
+function messageOf(err) {
+	return err instanceof Error ? err.message : String(err);
+}
+/** Read every item over one window; one entry per item, in order. */
+async function readHistory(reader, items, window) {
+	const maxPoints = window.maxPoints ?? DEFAULT_MAX_POINTS;
+	const out = [];
+	for (const batch of chunk(items, _camstack_types.DEVICE_HISTORY_QUERY_MANY_MAX_ITEMS)) try {
+		const r = await reader.queryMany({
+			items: [...batch],
+			from: window.from,
+			to: window.to,
+			resolution: "auto",
+			maxPoints
+		});
+		batch.forEach((_item, i) => {
+			out.push(r.results[i] ?? {
+				ok: false,
+				error: "no answer for this item"
+			});
+		});
+	} catch (err) {
+		if (!isRefusal(err)) {
+			const error = messageOf(err);
+			for (const _item of batch) out.push({
+				ok: false,
+				error
+			});
+			continue;
+		}
+		out.push(...await readOneByOne(reader, batch, window.from, window.to, maxPoints, messageOf(err)));
+	}
+	return out;
+}
+async function readOneByOne(reader, batch, from, to, maxPoints, refusal) {
+	return Promise.all(batch.map(async (item) => {
+		if (!("deviceId" in item)) return {
+			ok: false,
+			error: refusal
+		};
+		try {
+			return {
+				ok: true,
+				result: await reader.query({
+					deviceId: item.deviceId,
+					key: item.key,
+					...item.scope !== void 0 ? { scope: item.scope } : {},
+					from,
+					to,
+					resolution: "auto",
+					maxPoints
+				})
+			};
+		} catch (err) {
+			return {
+				ok: false,
+				error: messageOf(err)
+			};
+		}
+	}));
+}
+//#endregion
+//#region src/composites/device-history/use-device-history.ts
+/**
+* The data half of the History views: is device-history installed, which
+* series exist, and their reads over a window (plus the previous period when
+* comparing). Each stage keeps "not answered" apart from "answered nothing"
+* (D315): a pending list is never an empty one, a failed read is never a
+* flat line.
+*/
+var MINUTE = 6e4;
+/**
+* The instant a window ends at, rounded so the query key is stable between
+* renders and the view refreshes at a pace its width justifies.
+*/
+function anchorNow(now, spanMs) {
+	const step = spanMs <= HISTORY_WINDOW_MS["24h"] ? MINUTE : spanMs <= HISTORY_WINDOW_MS["7d"] ? 5 * MINUTE : spanMs <= HISTORY_WINDOW_MS["30d"] ? 15 * MINUTE : 60 * MINUTE;
+	return Math.ceil(now / step) * step;
+}
+/** The tRPC client as the two doors `readHistory` needs. */
+function useHistoryReader() {
+	const client = useSystem().trpcClient;
+	return (0, react$1.useMemo)(() => ({
+		queryMany: (input) => client.deviceHistory.queryMany.query(input),
+		query: (input) => client.deviceHistory.query.query(input)
+	}), [client]);
+}
+/** A device's series list, gated on device-history being present. */
+function useDeviceSeriesList(deviceId) {
+	const presence = useCapabilityPresence("device-history");
+	const client = useSystem().trpcClient;
+	const q = (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"device-history",
+			"listSeries",
+			deviceId
+		],
+		queryFn: () => client.deviceHistory.listSeries.query({ deviceId }),
+		enabled: presence === "present",
+		staleTime: 6e4
+	});
+	return {
+		presence,
+		list: q.status === "success" ? {
+			status: "ok",
+			data: q.data
+		} : q.status === "error" ? {
+			status: "error",
+			error: q.error.message
+		} : { status: "pending" }
+	};
+}
+/** Identity of a read item: subject + key (+ scope when narrowed). */
+function readItemId(item) {
+	return `${"deviceId" in item ? `d:${String(item.deviceId)}` : `n:${item.forNodeId}`}|${item.key}|${item.scope ?? "*"}`;
+}
+/** Read `items` over `window` (and the previous period when `compare`). */
+function useHistoryReads(items, window, compare, enabled = true) {
+	const reader = useHistoryReader();
+	const ids = items.map(readItemId);
+	const q = (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"device-history",
+			"reads",
+			ids,
+			window.from,
+			window.to,
+			compare
+		],
+		queryFn: async () => {
+			const prev = previousWindow(window);
+			const [cur, before] = await Promise.all([readHistory(reader, items, window), compare ? readHistory(reader, items, prev.window) : Promise.resolve(null)]);
+			const toMap = (entries) => new Map(entries.map((e, i) => [ids[i] ?? String(i), e]));
+			return {
+				current: toMap(cur),
+				previous: before === null ? null : toMap(before),
+				shiftMs: prev.shiftMs
+			};
+		},
+		enabled: enabled && items.length > 0,
+		staleTime: 3e4,
+		placeholderData: (previous) => previous
+	});
+	if (q.status === "success") return {
+		status: "ok",
+		data: q.data
+	};
+	if (q.status === "error") return {
+		status: "error",
+		error: q.error.message
+	};
+	return { status: "pending" };
+}
+//#endregion
+//#region src/composites/device-history/use-history-panels.ts
+/**
+* Saved history panels and hidden charts, in the signed-in user's ACCOUNT
+* preferences (D894): one row, namespace `admin.history-panels`, synced to
+* every device signed in as that user.
+*
+* A write is a compare-and-set on the revision it was based on; a conflict
+* re-applies the same change to the row as it now stands, once. A row this
+* client cannot read is never overwritten.
+*/
+var QUERY_KEY = ["preferences", HISTORY_PANELS_NAMESPACE];
+function useHistoryPanels() {
+	const client = useSystem().trpcClient;
+	const qc = (0, _tanstack_react_query.useQueryClient)();
+	const q = (0, _tanstack_react_query.useQuery)({
+		queryKey: QUERY_KEY,
+		queryFn: async () => {
+			const row = (await client.preferences.get.query({ namespaces: [HISTORY_PANELS_NAMESPACE] })).rows.find((x) => x.namespace === HISTORY_PANELS_NAMESPACE);
+			return row === void 0 ? null : {
+				value: row.value,
+				revision: row.revision
+			};
+		},
+		staleTime: 3e4
+	});
+	const row = q.data ?? null;
+	const parsed = readHistoryPanels(row?.value);
+	const update = (0, react$1.useCallback)(async (change) => {
+		const write = async (base, retry) => {
+			const current = readHistoryPanels(base?.value);
+			if (!current.parsed) throw new Error("history-panels: stored row is not readable");
+			const next = change(current.value);
+			const res = await client.preferences.put.mutate({
+				namespace: HISTORY_PANELS_NAMESPACE,
+				value: { ...next },
+				baseRevision: base?.revision ?? 0
+			});
+			if (res.status === "saved") {
+				qc.setQueryData(QUERY_KEY, {
+					value: res.row.value,
+					revision: res.row.revision
+				});
+				return;
+			}
+			const fresh = res.current === null ? null : {
+				value: res.current.value,
+				revision: res.current.revision
+			};
+			qc.setQueryData(QUERY_KEY, fresh);
+			if (!retry) throw new Error("history-panels: the row changed while saving");
+			await write(fresh, false);
+		};
+		await write(row, true);
+	}, [
+		client,
+		qc,
+		row
+	]);
+	return {
+		status: q.status === "success" ? "ok" : q.status === "error" ? "error" : "pending",
+		value: q.status === "success" ? parsed.value : EMPTY_HISTORY_PANELS,
+		writable: q.status === "success" && parsed.parsed,
+		update
+	};
+}
+//#endregion
+//#region src/composites/device-history/DeviceHistoryView.tsx
+/**
+* DeviceHistoryView — a device's recorded history (device-history, D850):
+* the device page's History tab, and — with `fixedWindow="24h"` — the last
+* day on a camera's Live Stats tab. One code path for both.
+*
+* Grouping mirrors the State panel: one collapsible section per capability
+* (catalog order), then per producer addon; inside, one chart per unit and
+* one timeline per state. Every chart shares one cursor. A chart's ⋯ menu
+* opens its series on the History page or hides it (remembered in the
+* user's account preferences).
+*
+* Absent and pending are different screens (D315): device-history not
+* installed, the list not answered yet, and "nothing recorded" each say so.
+*/
+/** `climate-control` → `Climate control`. */
+function humanizeName(name) {
+	const words = name.replace(/[-_]/g, " ").trim();
+	return words.length === 0 ? name : words.charAt(0).toUpperCase() + words.slice(1);
+}
+function refsOf(deviceId, spec) {
+	return (spec.type === "lines" || spec.type === "occupancy" ? spec.series : [spec.series]).map((s) => ({
+		subject: {
+			kind: "device",
+			deviceId
+		},
+		key: s.key,
+		scope: s.scope
+	}));
+}
+function DeviceHistoryView({ deviceId, fixedWindow, onNavigate }) {
+	const t = useUiText();
+	const [windowParam, setWindowParam] = useUrlQueryParam("hw");
+	const [customParam, setCustomParam] = useUrlQueryParam("hr");
+	const [compareParam, setCompareParam] = useUrlQueryParam("hc");
+	const windowId = fixedWindow ?? (isHistoryWindowId(windowParam) ? windowParam : "24h");
+	const custom = fixedWindow ? null : decodeCustomWindow(customParam);
+	const compare = fixedWindow === void 0 && compareParam === "1";
+	const spanGuess = resolveHistoryWindow(windowId, Date.now(), custom);
+	const range = resolveHistoryWindow(windowId, anchorNow(Date.now(), spanGuess.to - spanGuess.from), custom);
+	const { presence, list } = useDeviceSeriesList(deviceId);
+	const panels = useHistoryPanels();
+	const hidden = (0, react$1.useMemo)(() => new Set(panels.value.hidden[String(deviceId)] ?? []), [panels.value.hidden, deviceId]);
+	const [collapsed, setCollapsed] = (0, react$1.useState)(/* @__PURE__ */ new Set());
+	const sections = (0, react$1.useMemo)(() => list.status === "ok" ? groupDeviceSeries(list.data, humanizeName) : [], [list]);
+	const visible = (0, react$1.useMemo)(() => sections.map((s) => ({
+		...s,
+		charts: s.charts.filter((c) => !hidden.has(c.id))
+	})).filter((s) => s.charts.length > 0), [sections, hidden]);
+	const hiddenCount = sections.reduce((n, s) => n + s.charts.filter((c) => hidden.has(c.id)).length, 0);
+	const reads = useHistoryReads((0, react$1.useMemo)(() => chartKeys(visible.flatMap((s) => s.charts)).map((key) => ({
+		deviceId,
+		key
+	})), [visible, deviceId]), range, compare, list.status === "ok");
+	const readsData = reads.status === "ok" ? reads.data : null;
+	const entryFor = (0, react$1.useCallback)((key, previous) => {
+		const id = readItemId({
+			deviceId,
+			key
+		});
+		if (reads.status === "error") return {
+			ok: false,
+			error: reads.error
+		};
+		return (previous ? readsData?.previous : readsData?.current)?.get(id);
+	}, [
+		deviceId,
+		reads,
+		readsData
+	]);
+	const navigate = (0, react$1.useCallback)((path) => {
+		if (onNavigate) onNavigate(path);
+		else globalThis.location.assign(`${routerBasename()}${path}`);
+	}, [onNavigate]);
+	const setHidden = (chartId, hide) => {
+		if (!panels.writable) return;
+		panels.update((v) => withHiddenChart(v, deviceId, chartId, hide));
+	};
+	const showAllHidden = () => {
+		if (!panels.writable) return;
+		panels.update((v) => {
+			let next = v;
+			for (const id of hidden) next = withHiddenChart(next, deviceId, id, false);
+			return next;
+		});
+	};
+	if (presence === "pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistorySkeleton, {});
+	if (presence === "unknown") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+		title: t("uiLibrary.history.presenceUnknownTitle", "Could not reach the hub"),
+		message: t("uiLibrary.history.presenceUnknown", "The hub did not say whether device history is installed. Try again in a moment.")
+	});
+	if (presence === "absent") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
+		icon: History,
+		title: t("uiLibrary.history.absentTitle", "Device history is not running on this hub"),
+		description: t("uiLibrary.history.absent", "Nothing is recorded until the device-history system addon is enabled.")
+	});
+	if (list.status === "pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistorySkeleton, {});
+	if (list.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+		title: t("uiLibrary.history.listFailedTitle", "History could not be read"),
+		message: list.error
+	});
+	if (sections.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
+		icon: ChartLine,
+		title: t("uiLibrary.history.emptyTitle", "Nothing recorded for this device yet"),
+		description: t("uiLibrary.history.empty", "A value appears here once it changes, or at the next five-minute check.")
+	});
+	const syncKey = `device-history:${String(deviceId)}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: STACK_GAP,
+		children: [fixedWindow === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistoryWindowBar, {
+				value: windowId,
+				onChange: (id) => setWindowParam(id === "24h" ? null : id),
+				custom,
+				onCustomChange: (w) => setCustomParam(encodeCustomWindow(w)),
+				compare,
+				onCompareChange: (on) => setCompareParam(on ? "1" : null)
+			}), hiddenCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: showAllHidden,
+				disabled: !panels.writable,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EyeOff, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				}), t("uiLibrary.history.showHidden", {
+					one: "Show {{count}} hidden chart",
+					other: "Show {{count}} hidden charts"
+				}, { count: hiddenCount })]
+			})]
+		}), visible.map((section) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleCard, {
+				expanded: !collapsed.has(section.id),
+				onExpandedChange: (next) => setCollapsed((prev) => {
+					const s = new Set(prev);
+					if (next) s.delete(section.id);
+					else s.add(section.id);
+					return s;
+				}),
+				header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 min-w-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs font-semibold text-foreground truncate",
+						children: humanizeName(section.name)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[10px] text-foreground-subtle shrink-0",
+						children: t("uiLibrary.history.chartCount", {
+							one: "{{count}} chart",
+							other: "{{count}} charts"
+						}, { count: section.charts.length })
+					})]
+				}),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid grid-cols-1 gap-4 2xl:grid-cols-2",
+					children: section.charts.map((spec) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HistoryChart, {
+						spec,
+						entryFor,
+						reads: readsData,
+						window: range,
+						compare,
+						syncKey,
+						actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KebabMenu, {
+							title: t("uiLibrary.history.chartMenu", "Chart actions"),
+							items: [{
+								id: "open",
+								label: t("uiLibrary.history.openInHistory", "Open in History"),
+								icon: ChartLine,
+								onClick: () => navigate(historyPageHref(refsOf(deviceId, spec), windowId))
+							}, {
+								id: "hide",
+								label: t("uiLibrary.history.hide", "Hide"),
+								icon: EyeOff,
+								hidden: fixedWindow !== void 0,
+								disabled: !panels.writable,
+								onClick: () => setHidden(spec.id, true)
+							}]
+						})
+					}, spec.id))
+				})
+			}, section.id);
+		})]
+	});
+}
+function HistorySkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: STACK_GAP,
+		"aria-busy": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-7 w-72" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-40 w-full" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-40 w-full" })
+		]
+	});
+}
+//#endregion
 //#region src/contexts/zone-editing.tsx
 /**
 * Per-device zone-editing state shared between the player overlay
@@ -64669,6 +67970,7 @@ exports.AudioWaveform = AudioWaveform;
 exports.AutomationHeroCard = AutomationHeroCard;
 exports.AutomationInlineControl = AutomationInlineControl;
 exports.AutotrackSection = AutotrackSection;
+exports.BOOLEAN_STATES = BOOLEAN_STATES;
 exports.BTN_COMPACT = BTN_COMPACT;
 exports.BTN_COMPACT_DANGER = BTN_COMPACT_DANGER;
 exports.BTN_COMPACT_PRIMARY = BTN_COMPACT_PRIMARY;
@@ -64677,6 +67979,7 @@ exports.Baby = Baby;
 exports.BackToStepsButton = BackToStepsButton;
 exports.Badge = Badge;
 exports.Ban = Ban;
+exports.BarSeries = BarSeries;
 exports.Bath = Bath;
 exports.Battery = Battery;
 exports.BatteryBadge = BatteryBadge;
@@ -64701,6 +68004,7 @@ exports.Button = Button;
 exports.ButtonControl = ButtonControl;
 exports.ButtonHeroCard = ButtonHeroCard;
 exports.CENTER = CENTER;
+exports.CHART_SERIES_TOKENS = CHART_SERIES_TOKENS;
 exports.CHIP_ACTIVE = CHIP_ACTIVE;
 exports.CHIP_BASE = CHIP_BASE;
 exports.CHIP_INACTIVE = CHIP_INACTIVE;
@@ -64718,6 +68022,11 @@ exports.Car = Car;
 exports.Card = Card;
 exports.Cast = Cast;
 exports.Cat = Cat;
+exports.ChartFrame = ChartFrame;
+exports.ChartLine = ChartLine;
+exports.ChartPlaceholder = ChartPlaceholder;
+exports.ChartSwatch = ChartSwatch;
+exports.ChartWindowToggle = ChartWindowToggle;
 exports.Check = Check;
 exports.Checkbox = Checkbox;
 exports.ChevronDown = ChevronDown;
@@ -64800,6 +68109,7 @@ exports.DeviceExportPanel = DeviceExportPanel;
 exports.DeviceExportSetup = DeviceExportSetup;
 exports.DeviceFilterBar = DeviceFilterBar;
 exports.DeviceGrid = DeviceGrid;
+exports.DeviceHistoryView = DeviceHistoryView;
 exports.DeviceItem = DeviceItem;
 exports.DeviceList = DeviceList;
 exports.DeviceMultiSelectField = DeviceMultiSelectField;
@@ -64834,6 +68144,7 @@ exports.Droplets = Droplets;
 exports.DummyHeroCard = DummyHeroCard;
 exports.DummyInline = DummyInline;
 exports.EMPTY_DATA_TABLE_FILTER = EMPTY_DATA_TABLE_FILTER;
+exports.EMPTY_HISTORY_PANELS = EMPTY_HISTORY_PANELS;
 exports.EVENT_KIND_ICONS = EVENT_KIND_ICONS;
 exports.EllipsisVertical = EllipsisVertical;
 exports.EmptyState = EmptyState;
@@ -64869,6 +68180,7 @@ exports.FloatingPanel = FloatingPanel;
 exports.Footprints = Footprints;
 exports.FormField = FormField$1;
 exports.Funnel = Funnel;
+exports.GAP_INTERVAL_FACTOR = GAP_INTERVAL_FACTOR;
 exports.GRID_GAP = GRID_GAP;
 exports.GRID_PAIRED = GRID_PAIRED;
 exports.GRID_QUICK_STATS = GRID_QUICK_STATS;
@@ -64882,6 +68194,11 @@ exports.GripHorizontal = GripHorizontal;
 exports.GripTrack = GripTrack;
 exports.GroupedModelSelector = GroupedModelSelector;
 exports.GroupedTilePicker = GroupedTilePicker;
+exports.HISTORY_PAGE_PATH = HISTORY_PAGE_PATH;
+exports.HISTORY_PANELS_NAMESPACE = HISTORY_PANELS_NAMESPACE;
+exports.HISTORY_SELECTION_MAX = HISTORY_SELECTION_MAX;
+exports.HISTORY_WINDOW_IDS = HISTORY_WINDOW_IDS;
+exports.HISTORY_WINDOW_MS = HISTORY_WINDOW_MS;
 exports.HOST_WIDGETS = HOST_WIDGETS;
 exports.HUB_SESSION_RUN_MS = HUB_SESSION_RUN_MS;
 exports.Hammer = Hammer;
@@ -64889,6 +68206,9 @@ exports.Hand = Hand;
 exports.HardDrive = HardDrive;
 exports.Hash = Hash;
 exports.Heater = Heater;
+exports.History = History;
+exports.HistoryChart = HistoryChart;
+exports.HistoryWindowBar = HistoryWindowBar;
 exports.HlsVideo = HlsVideo;
 exports.House = House;
 exports.HoverZoomImage = HoverZoomImage;
@@ -64974,6 +68294,7 @@ exports.NodePicker = NodePicker;
 exports.NodeSelectField = NodeSelectField;
 exports.NotificationTargetSelectField = NotificationTargetSelectField;
 exports.NotificationTargetsField = NotificationTargetsField;
+exports.OCCUPANCY_KEY = OCCUPANCY_KEY;
 exports.OPTION_SELECT_SEARCH_MIN_OPTIONS = OPTION_SELECT_SEARCH_MIN_OPTIONS;
 exports.OfflineBadge = OfflineBadge;
 exports.OptionSelect = OptionSelect;
@@ -65029,6 +68350,7 @@ exports.QrCode = QrCode;
 exports.QrCode$1 = QrCode$1;
 exports.RECONNECT_POLICY = RECONNECT_POLICY;
 exports.RECORDED_PLAYBACK_MODES = RECORDED_PLAYBACK_MODES;
+exports.RESOLUTION_BUCKET_MS = RESOLUTION_BUCKET_MS;
 exports.RIGHT = RIGHT;
 exports.ROI_AREA_WARN_FRACTION = ROI_AREA_WARN_FRACTION;
 exports.ROLE_DESCRIPTOR = ROLE_DESCRIPTOR;
@@ -65116,11 +68438,13 @@ exports.SnapshotButton = SnapshotButton;
 exports.Snowflake = Snowflake;
 exports.SortHeaderButton = SortHeaderButton;
 exports.Sparkles = Sparkles;
+exports.Sparkline = Sparkline;
 exports.Sprout = Sprout;
 exports.Square = Square;
 exports.StableTabPanel = StableTabPanel;
 exports.Star = Star;
 exports.StatCard = StatCard;
+exports.StateTimeline = StateTimeline;
 exports.StateValuesStream = StateValuesStream;
 exports.StatusBadge = StatusBadge;
 exports.StepDetailDock = StepDetailDock;
@@ -65158,6 +68482,7 @@ exports.ThemeProvider = require_theme_index.ThemeProvider$1;
 exports.Thermometer = Thermometer;
 exports.ThermostatHeroCard = ThermostatHeroCard;
 exports.ThermostatInlineControl = ThermostatInlineControl;
+exports.TimeSeriesChart = TimeSeriesChart;
 exports.Timer = Timer;
 exports.TimezoneSelector = TimezoneSelector;
 exports.ToggleLeft = ToggleLeft;
@@ -65220,22 +68545,31 @@ exports.ZoomOut = ZoomOut;
 exports.acceleratorLabel = acceleratorLabel;
 exports.acceleratorShortLabel = acceleratorShortLabel;
 exports.agentColumnKey = agentColumnKey;
+exports.alignSeries = alignSeries;
 exports.allDeviceTypeFilterOptions = allDeviceTypeFilterOptions;
+exports.anchorNow = anchorNow;
 exports.applyFleetQueryDefaults = applyFleetQueryDefaults;
 exports.applyPickerFilters = applyPickerFilters;
 exports.ariaSortForColumn = ariaSortForColumn;
 exports.assignNodeColorId = _camstack_types.assignNodeColorId;
+exports.axisTicks = axisTicks;
 exports.badgeFor = badgeFor;
 exports.badgeFor$1 = badgeFor;
 exports.bindsToModel = bindsToModel;
+exports.booleanLabels = booleanLabels;
+exports.bucketTotals = bucketTotals;
 exports.buildColorByNodeId = buildColorByNodeId;
 exports.buildDataRecordRows = buildDataRecordRows;
 exports.buildPeerConnectionConfig = buildPeerConnectionConfig;
 exports.buildStepTreeFromSchema = buildStepTreeFromSchema;
+exports.buildTimeSeriesModel = buildTimeSeriesModel;
 exports.catalogHasDraft = catalogHasDraft;
+exports.chartKeys = chartKeys;
+exports.chartSeriesStyle = chartSeriesStyle;
 exports.childEntityId = childEntityId;
 exports.childListName = childListName;
 exports.chipOverflow = chipOverflow;
+exports.chunk = chunk;
 exports.classifyAddressScope = classifyAddressScope;
 exports.classifyCapability = classifyCapability;
 exports.classifySessionVerdict = classifySessionVerdict;
@@ -65263,6 +68597,9 @@ exports.dataRecordSearchText = dataRecordSearchText;
 exports.dataRecordType = dataRecordType;
 exports.dataTableFacetGroups = dataTableFacetGroups;
 exports.dataTableFacets = dataTableFacets;
+exports.decodeCustomWindow = decodeCustomWindow;
+exports.decodeSeriesRef = decodeSeriesRef;
+exports.defaultAxisSpec = defaultAxisSpec;
 exports.defaultOfField = defaultOfField;
 exports.defaultSelectClusterRoots = defaultSelectClusterRoots;
 exports.defaultSingleClusterRoot = defaultSingleClusterRoot;
@@ -65286,10 +68623,14 @@ exports.draftFromQuery = draftFromQuery;
 exports.effectivePageSize = effectivePageSize;
 exports.emptyDevicesWidens = emptyDevicesWidens;
 exports.emptySessionRun = emptySessionRun;
+exports.encodeCustomWindow = encodeCustomWindow;
+exports.encodeSeriesRef = encodeSeriesRef;
+exports.energyBuckets = energyBuckets;
 exports.ensureMfHostInit = ensureMfHostInit;
 exports.eventKindLabel = eventKindLabel;
 exports.filterDataTableRows = filterDataTableRows;
 exports.filterDeviceOptions = filterDeviceOptions;
+exports.filterOccupancyLines = filterOccupancyLines;
 exports.filterOptionSelectOptions = filterOptions;
 exports.filterPickerDevices = filterPickerDevices;
 exports.finalizeSessionRun = finalizeSessionRun;
@@ -65297,25 +68638,34 @@ exports.findTimezone = _camstack_types.findTimezone;
 exports.flattenPickerGrouping = flattenPickerGrouping;
 exports.flattenPickerRows = flattenPickerRows;
 exports.fleetViewOf = fleetViewOf;
+exports.formatChartBytes = formatChartBytes;
+exports.formatChartNumber = formatChartNumber;
+exports.formatChartValue = formatChartValue;
 exports.formatControlDateTime = formatControlDateTime;
 exports.formatLastSeen = formatLastSeen;
 exports.formatNumeric = formatNumeric;
 exports.formatSettingValue = formatSettingValue;
+exports.formatSpan = formatSpan;
+exports.formatTimeLabel = formatTimeLabel;
 exports.freezeVerdict = freezeVerdict;
 exports.fuzzyMatch = fuzzyMatch;
+exports.gapThresholdMs = gapThresholdMs;
 exports.getClassColor = getClassColor;
 exports.getPhaseVisual = getPhaseVisual;
 exports.groupAgentColumns = groupAgentColumns;
 exports.groupChildrenByLayout = groupChildrenByLayout;
+exports.groupDeviceSeries = groupDeviceSeries;
 exports.groupPickerDevices = groupPickerDevices;
 exports.groupPickerDevicesBy = groupPickerDevicesBy;
 exports.hardwareLabel = hardwareLabel;
+exports.historyPageHref = historyPageHref;
 exports.hubOrigin = hubOrigin;
 exports.hubPath = hubPath;
 exports.hubPath$1 = hubPath;
 exports.hubUrl = hubUrl;
 exports.hubWsUrl = hubWsUrl;
 exports.humanDuration = humanDuration;
+exports.humanizeName = humanizeName;
 exports.humidifierTint = humidifierTint;
 exports.iconGlyphsFailed = iconGlyphsFailed;
 exports.iconGlyphsLoaded = iconGlyphsLoaded;
@@ -65323,15 +68673,19 @@ exports.initialScrubState = initialScrubState;
 exports.insertAtSelection = insertAtSelection;
 exports.isAbsentProvider = isAbsentProvider;
 exports.isAbsentProvider$1 = isAbsentProvider;
+exports.isByteUnit = isByteUnit;
 exports.isDataTableFilterActive = isDataTableFilterActive;
 exports.isFieldVisible = isFieldVisible;
 exports.isGroupExpanded = isGroupExpanded;
+exports.isHistoryWindowId = isHistoryWindowId;
 exports.isKeychainFieldValue = isKeychainFieldValue;
 exports.isRedactedSecret = isRedactedSecret;
+exports.isRefusal = isRefusal;
 exports.isSecretField = isSecretField;
 exports.isValueField = isValueField;
 exports.lawnMowerActivityMeta = lawnMowerActivityMeta;
 exports.lightColors = require_theme_to_root_css.lightColors;
+exports.linePoints = linePoints;
 exports.loadIconGlyphs = loadIconGlyphs;
 exports.loadRemoteBundle = loadRemoteBundle;
 exports.lucideExportName = lucideExportName;
@@ -65348,11 +68702,16 @@ exports.nextReconnectAction = nextReconnectAction;
 exports.nextSort = nextSort;
 exports.nextSortDirection = nextSortDirection;
 exports.nextTableSort = nextTableSort;
+exports.niceMax = niceMax;
+exports.niceRange = niceRange;
 exports.nodeColorClass = nodeColorClass;
 exports.nodeSoftBgClass = nodeSoftBgClass;
 exports.nodeTextColorClass = nodeTextColorClass;
 exports.normalizeForSearch = normalizeForSearch;
 exports.normalizeLanguage = normalizeLanguage;
+exports.normalizeSelection = normalizeSelection;
+exports.occupancyFacets = occupancyFacets;
+exports.occupancyLines = occupancyLines;
 exports.offListSelections = offListSelections;
 exports.openTopLayer = openTopLayer;
 exports.optionSelectSearchText = optionSearchText;
@@ -65362,8 +68721,10 @@ exports.pageRows = pageRows;
 exports.pageSizeLabel = pageSizeLabel;
 exports.paginateRows = paginateRows;
 exports.parentDetailOf = parentDetailOf;
+exports.parseCapKey = parseCapKey;
 exports.parseIceCandidate = parseIceCandidate;
 exports.parsePickerGroupBy = parsePickerGroupBy;
+exports.parseProducerKey = parseProducerKey;
 exports.parseRecordedServerMessage = parseRecordedServerMessage;
 exports.partitionOptionSelectSelected = partitionSelected;
 exports.partitionSuggested = partitionSuggested;
@@ -65380,7 +68741,11 @@ exports.pickerSearchText = pickerSearchText;
 exports.pickerZoneFilterSuspended = pickerZoneFilterSuspended;
 exports.pinnedStreamChoices = pinnedStreamChoices;
 exports.placePopover = placePopover;
+exports.previousWindow = previousWindow;
 exports.providerIcons = providerIcons;
+exports.readHistory = readHistory;
+exports.readHistoryPanels = readHistoryPanels;
+exports.readItemId = readItemId;
 exports.readStoredGroupBy = readStoredGroupBy;
 exports.reduceSessionRun = reduceSessionRun;
 exports.registerAddonBundle = registerAddonBundle;
@@ -65396,6 +68761,7 @@ exports.resolveDisplayIcon = resolveDisplayIcon;
 exports.resolveEffectiveDefaultModel = resolveEffectiveDefaultModel;
 exports.resolveEffectiveStepModel = resolveEffectiveStepModel;
 exports.resolveEventKindIcon = resolveEventKindIcon;
+exports.resolveHistoryWindow = resolveHistoryWindow;
 exports.resolveOptionSelectSearchable = resolveSearchable;
 exports.resolveParentNames = resolveParentNames;
 exports.resolvePrimaryChild = resolvePrimaryChild;
@@ -65412,10 +68778,14 @@ exports.scrubReducer = scrubReducer;
 exports.searchSteps = searchSteps;
 exports.secretDisplayValue = secretDisplayValue;
 exports.secretSubmitValue = secretSubmitValue;
+exports.segmentsFromChanges = segmentsFromChanges;
 exports.selectPickerGroup = selectPickerGroup;
 exports.selectedDeviceOptions = selectedDeviceOptions;
 exports.serializeRecordedCommand = serializeRecordedCommand;
+exports.seriesRefId = seriesRefId;
 exports.settingsModelIdFor = settingsModelIdFor;
+exports.sharedGapSpans = sharedGapSpans;
+exports.shiftPoints = shiftPoints;
 exports.shouldCommit = shouldCommit;
 exports.shouldEmit = shouldEmit;
 exports.shouldShowAddNewFooter = shouldShowAddNewFooter;
@@ -65424,6 +68794,11 @@ exports.shouldUseSingleNode = shouldUseSingleNode;
 exports.showsNoCamerasHint = showsNoCamerasHint;
 exports.sortRows = sortRows;
 exports.sortRowsByColumn = sortRowsByColumn;
+exports.stackBuckets = stackBuckets;
+exports.stackSeries = stackSeries;
+exports.stateAt = stateAt;
+exports.stateRow = stateRow;
+exports.stateStyle = stateStyle;
 exports.statusIcons = statusIcons;
 exports.statusLine = statusLine;
 exports.statusLine$1 = statusLine;
@@ -65433,10 +68808,13 @@ exports.stepLocalFields = stepLocalFields;
 exports.stepModelOptions = stepModelOptions;
 exports.stripParentNamePrefix = stripParentNamePrefix;
 exports.summarizeHubCandidates = summarizeHubCandidates;
+exports.swatchFillClass = swatchFillClass;
+exports.swatchLineClass = swatchLineClass;
 exports.tabForSelector = tabForSelector;
 exports.tankAlert = tankAlert;
 exports.themeToCss = require_theme_to_root_css.themeToCss;
 exports.themeToRootCss = require_theme_to_root_css.themeToRootCss;
+exports.timeInState = timeInState;
 exports.toStationaryOverlayBox = toStationaryOverlayBox;
 exports.toggleDataTableFacet = toggleDataTableFacet;
 exports.toggleDataTableGroupFacet = toggleDataTableGroupFacet;
@@ -65446,6 +68824,7 @@ exports.trainingRefusalText = trainingRefusalText;
 exports.translateAddonKey = translateAddonKey;
 exports.trpc = trpc;
 exports.typeLabel = typeLabel;
+exports.unitAxes = unitAxes;
 exports.useAccessoriesGetStatus = useAccessoriesGetStatus;
 exports.useAccessoriesSetChildHidden = useAccessoriesSetChildHidden;
 exports.useAddonPagesListPages = useAddonPagesListPages;
@@ -65703,6 +69082,7 @@ exports.useDeviceHistoryGetStatus = useDeviceHistoryGetStatus;
 exports.useDeviceHistoryListNodeSeries = useDeviceHistoryListNodeSeries;
 exports.useDeviceHistoryListSeries = useDeviceHistoryListSeries;
 exports.useDeviceHistoryQuery = useDeviceHistoryQuery;
+exports.useDeviceHistoryQueryMany = useDeviceHistoryQueryMany;
 exports.useDeviceHistoryQueryNode = useDeviceHistoryQueryNode;
 exports.useDeviceHistoryRecord = useDeviceHistoryRecord;
 exports.useDeviceHistoryRecordBuckets = useDeviceHistoryRecordBuckets;
@@ -65826,6 +69206,7 @@ exports.useDeviceProviderTestCreationField = useDeviceProviderTestCreationField;
 exports.useDeviceProxy = useDeviceProxy;
 exports.useDeviceProxy$1 = useDeviceProxy;
 exports.useDeviceQuickDetailOpen = useDeviceQuickDetailOpen;
+exports.useDeviceSeriesList = useDeviceSeriesList;
 exports.useDeviceSnapshot = useDeviceSnapshot;
 exports.useDeviceSnapshotImage = useDeviceSnapshotImage;
 exports.useDeviceSnapshotImage$1 = useDeviceSnapshotImage;
@@ -65892,6 +69273,9 @@ exports.useFeatureProbeGetStatus = useFeatureProbeGetStatus;
 exports.useFloodGetStatus = useFloodGetStatus;
 exports.useGasGetStatus = useGasGetStatus;
 exports.useHeatingValveGetStatus = useHeatingValveGetStatus;
+exports.useHistoryPanels = useHistoryPanels;
+exports.useHistoryReader = useHistoryReader;
+exports.useHistoryReads = useHistoryReads;
 exports.useHumidifierGetStatus = useHumidifierGetStatus;
 exports.useHumidifierSetMode = useHumidifierSetMode;
 exports.useHumidifierSetOn = useHumidifierSetOn;
@@ -66742,6 +70126,9 @@ exports.waterHeaterPhase = waterHeaterPhase;
 exports.waterHeaterTint = waterHeaterTint;
 exports.weatherConditionMeta = weatherConditionMeta;
 exports.weatherTint = weatherTint;
+exports.withHiddenChart = withHiddenChart;
+exports.withPanel = withPanel;
 exports.withResolvedParentDetail = withResolvedParentDetail;
 exports.withUseRootModel = withUseRootModel;
+exports.withoutPanel = withoutPanel;
 exports.writeStoredGroupBy = writeStoredGroupBy;