@camstack/addon-post-analysis 1.2.612 → 1.2.614

package/dist/pipeline-analytics/_stub.js

@@ -1,13 +1,13 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare__react__loadShare__.js-C0AuF9av.mjs";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare__react__loadShare__.js-Cx9AsA5q.mjs";
 import { t as o } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.js-B3Wx5J80.mjs";
-import { a as s, c, i as l, n as u, o as d, r as f, s as p, t as m } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.js-DbUPeg6m.mjs";
-import { n as h, r as g, t as _ } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.js-Bm-iyjmq.mjs";
-import { t as v } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare___mf_0_camstack_mf_1_types__loadShare__.js-7dLQKt_H.mjs";
+import { a as s, c, d as l, f as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.js-BB2kgLY1.mjs";
+import { n as x, t as S } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.js-CkwmHEi0.mjs";
+import { t as C } from "./_virtual_mf___mfe_internal__addon_pipeline_analytics_widgets__loadShare___mf_0_camstack_mf_1_types__loadShare__.js-mydSlNUz.mjs";
 //#region ../../node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
-var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), b = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), x = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), S = (e) => {
-	let t = x(e);
+var w = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), T = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), E = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), D = (e) => {
+	let t = E(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
-}, C = {
+}, O = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -17,31 +17,31 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, w = (e) => {
+}, k = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
 	return !1;
-}, T = n(({ color: e = "currentColor", size: t = 24, strokeWidth: n = 2, absoluteStrokeWidth: r, className: i = "", children: o, iconNode: s, ...c }, l) => a("svg", {
+}, A = n(({ color: e = "currentColor", size: t = 24, strokeWidth: n = 2, absoluteStrokeWidth: r, className: i = "", children: o, iconNode: s, ...c }, l) => a("svg", {
 	ref: l,
-	...C,
+	...O,
 	width: t,
 	height: t,
 	stroke: e,
 	strokeWidth: r ? Number(n) * 24 / Number(t) : n,
-	className: y("lucide", i),
-	...!o && !w(c) && { "aria-hidden": "true" },
+	className: w("lucide", i),
+	...!o && !k(c) && { "aria-hidden": "true" },
 	...c
-}, [...s.map(([e, t]) => a(e, t)), ...Array.isArray(o) ? o : [o]])), E = (e, t) => {
-	let r = n(({ className: n, ...r }, i) => a(T, {
+}, [...s.map(([e, t]) => a(e, t)), ...Array.isArray(o) ? o : [o]])), j = (e, t) => {
+	let r = n(({ className: n, ...r }, i) => a(A, {
 		ref: i,
 		iconNode: t,
-		className: y(`lucide-${b(S(e))}`, `lucide-${e}`, n),
+		className: w(`lucide-${T(D(e))}`, `lucide-${e}`, n),
 		...r
 	}));
-	return r.displayName = S(e), r;
-}, D = E("activity", [["path", {
+	return r.displayName = D(e), r;
+}, M = j("activity", [["path", {
 	d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
 	key: "169zse"
-}]]), O = E("boxes", [
+}]]), N = j("boxes", [
 	["path", {
 		d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z",
 		key: "lc1i9w"
@@ -90,7 +90,7 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 		d: "M12 13.5V8",
 		key: "1io7kd"
 	}]
-]), k = E("eye", [["path", {
+]), ee = j("eye", [["path", {
 	d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
 	key: "1nclc0"
 }], ["circle", {
@@ -98,7 +98,7 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 	cy: "12",
 	r: "3",
 	key: "1v7zrd"
-}]]), A = E("layers", [
+}]]), P = j("layers", [
 	["path", {
 		d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
 		key: "zw3jo"
@@ -111,7 +111,7 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 		d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
 		key: "kqbvx6"
 	}]
-]), j = E("map-pin-off", [
+]), te = j("map-pin-off", [
 	["path", {
 		d: "M12.75 7.09a3 3 0 0 1 2.16 2.16",
 		key: "1d4wjd"
@@ -132,7 +132,7 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 		d: "M9.13 9.13a3 3 0 0 0 3.74 3.74",
 		key: "13wojd"
 	}]
-]), M = E("mic-off", [
+]), ne = j("mic-off", [
 	["path", {
 		d: "M12 19v3",
 		key: "npa21l"
@@ -157,7 +157,7 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 		d: "M9 9v3a3 3 0 0 0 5.12 2.12",
 		key: "r2i35w"
 	}]
-]), N = E("mic", [
+]), re = j("mic", [
 	["path", {
 		d: "M12 19v3",
 		key: "npa21l"
@@ -174,14 +174,15 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 		rx: "3",
 		key: "s6n7sd"
 	}]
-]), { useT: P } = c("pipeline-analytics", {
+]), { useT: F } = g("pipeline-analytics", {
 	en: {
 		missingDevice: "{{name}} requires a deviceId",
 		common: {
 			loading: "Loading…",
 			resolving: "Resolving device…",
 			justNow: "just now",
-			secondsAgo: "{{seconds}}s ago"
+			secondsAgo: "{{seconds}}s ago",
+			timeWindow: "Time window"
 		},
 		audioMetrics: {
 			title: "Audio Metrics",
@@ -210,51 +211,45 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 		audioHistory: {
 			title: "Audio Level History",
 			empty: "No audio history yet — analytics pipeline must be active.",
-			ariaLabel: "Audio dBFS history",
 			peakWindow: "peak (window)",
-			avgWindow: "avg (window)",
 			samples: "{{count}} samples · ~{{seconds}}s spacing",
-			peak: "peak {{value}} dB"
+			peak: "peak {{value}} dB",
+			level: "Level",
+			lineTitle: "Level (dBFS)",
+			classHits: "Class hits: {{list}}"
 		},
 		occupancyHistory: {
 			title: "Occupancy History",
 			filterByClass: "Filter by detected class",
 			allClasses: "All classes",
 			empty: "No occupancy history yet — analytics pipeline must be active.",
-			ariaLabel: "Frame occupancy history",
-			objects_one: "{{count}} object",
-			objects_other: "{{count}} objects",
-			class: "Class",
-			all: "all",
-			bucket: "Bucket",
 			buckets_one: "{{count}} bucket · 5 min resolution",
 			buckets_other: "{{count}} buckets · 5 min resolution",
-			peak: "peak {{value}} obj"
+			peak: "peak {{value}} obj",
+			lineTitle: "Objects in frame (bucket maximum)"
 		},
 		motionHistory: {
 			title: "Motion History",
 			empty: "No motion events in the selected window.",
-			ariaLabel: "Motion event histogram",
 			events_one: "{{count}} event",
 			events_other: "{{count}} events",
-			bucket: "Bucket",
-			count: "Count",
 			summary_one: "{{count}} event · {{bucket}} buckets",
 			summary_other: "{{count}} events · {{bucket}} buckets",
-			peak: "peak {{value}}/bucket"
+			peak: "peak {{value}}/bucket",
+			barsTitle: "Events per {{bucket}}"
 		},
 		detectionHistory: {
 			title: "Detection History",
 			filterByClass: "Filter by detected class",
 			allClasses: "All classes",
 			empty: "No detection events in the selected window.",
-			ariaLabel: "Detection event histogram",
 			detections_one: "{{count}} detection",
 			detections_other: "{{count}} detections",
 			other: "other",
 			summary_one: "{{count}} detection · {{bucket}} buckets",
 			summary_other: "{{count}} detections · {{bucket}} buckets",
-			peak: "peak {{value}}/bucket"
+			peak: "peak {{value}}/bucket",
+			barsTitle: "Detections per {{bucket}}"
 		}
 	},
 	it: {
@@ -263,7 +258,8 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 			loading: "Caricamento…",
 			resolving: "Risoluzione del dispositivo…",
 			justNow: "adesso",
-			secondsAgo: "{{seconds}}s fa"
+			secondsAgo: "{{seconds}}s fa",
+			timeWindow: "Finestra temporale"
 		},
 		audioMetrics: {
 			title: "Metriche audio",
@@ -292,170 +288,48 @@ var y = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) =
 		audioHistory: {
 			title: "Storico livello audio",
 			empty: "Ancora nessuno storico audio: la pipeline di analisi deve essere attiva.",
-			ariaLabel: "Storico dBFS audio",
 			peakWindow: "picco (finestra)",
-			avgWindow: "media (finestra)",
 			samples: "{{count}} campioni · intervallo ~{{seconds}}s",
-			peak: "picco {{value}} dB"
+			peak: "picco {{value}} dB",
+			level: "Livello",
+			lineTitle: "Livello (dBFS)",
+			classHits: "Classi rilevate: {{list}}"
 		},
 		occupancyHistory: {
 			title: "Storico occupazione",
 			filterByClass: "Filtra per classe rilevata",
 			allClasses: "Tutte le classi",
 			empty: "Ancora nessuno storico di occupazione: la pipeline di analisi deve essere attiva.",
-			ariaLabel: "Storico occupazione del fotogramma",
-			objects_one: "{{count}} oggetto",
-			objects_other: "{{count}} oggetti",
-			class: "Classe",
-			all: "tutte",
-			bucket: "Intervallo",
 			buckets_one: "{{count}} intervallo · risoluzione 5 min",
 			buckets_other: "{{count}} intervalli · risoluzione 5 min",
-			peak: "picco {{value}} ogg."
+			peak: "picco {{value}} ogg.",
+			lineTitle: "Oggetti nell'inquadratura (massimo per intervallo)"
 		},
 		motionHistory: {
 			title: "Storico movimento",
 			empty: "Nessun evento di movimento nella finestra selezionata.",
-			ariaLabel: "Istogramma degli eventi di movimento",
 			events_one: "{{count}} evento",
 			events_other: "{{count}} eventi",
-			bucket: "Intervallo",
-			count: "Conteggio",
 			summary_one: "{{count}} evento · intervalli da {{bucket}}",
 			summary_other: "{{count}} eventi · intervalli da {{bucket}}",
-			peak: "picco {{value}}/intervallo"
+			peak: "picco {{value}}/intervallo",
+			barsTitle: "Eventi ogni {{bucket}}"
 		},
 		detectionHistory: {
 			title: "Storico rilevamenti",
 			filterByClass: "Filtra per classe rilevata",
 			allClasses: "Tutte le classi",
 			empty: "Nessun evento di rilevamento nella finestra selezionata.",
-			ariaLabel: "Istogramma degli eventi di rilevamento",
 			detections_one: "{{count}} rilevamento",
 			detections_other: "{{count}} rilevamenti",
 			other: "altro",
 			summary_one: "{{count}} rilevamento · intervalli da {{bucket}}",
 			summary_other: "{{count}} rilevamenti · intervalli da {{bucket}}",
-			peak: "picco {{value}}/intervallo"
+			peak: "picco {{value}}/intervallo",
+			barsTitle: "Rilevamenti ogni {{bucket}}"
 		}
 	}
-});
-//#endregion
-//#region src/pipeline-analytics/widgets/chart-utils.tsx
-function F({ presets: e, value: t, onChange: n }) {
-	return /* @__PURE__ */ h("div", {
-		className: "flex items-center gap-1 border border-border rounded-md p-0.5 bg-background",
-		children: e.map(({ id: e, label: r }) => /* @__PURE__ */ h("button", {
-			type: "button",
-			onClick: () => n(e),
-			className: `px-2 py-0.5 rounded text-[10px] font-medium transition-colors ${t === e ? "bg-primary/10 text-primary" : "text-foreground-subtle hover:text-foreground"}`,
-			children: r
-		}, e))
-	});
-}
-function I(t = 0) {
-	let n = e(null), [a, o] = r(0);
-	return i(() => {
-		let e = n.current;
-		if (!e) return;
-		let r = (e) => o(Math.max(t, Math.floor(e)));
-		r(e.clientWidth);
-		let i = new ResizeObserver((e) => {
-			let t = e[0];
-			t && r(t.contentRect.width);
-		});
-		return i.observe(e), () => i.disconnect();
-	}, [t]), [n, a];
-}
-function L(e, t) {
-	let n = new Date(e), r = String(n.getHours()).padStart(2, "0"), i = String(n.getMinutes()).padStart(2, "0");
-	return t <= 1440 * 60 * 1e3 ? `${r}:${i}` : `${String(n.getDate()).padStart(2, "0")}/${String(n.getMonth() + 1).padStart(2, "0")} ${r}:${i}`;
-}
-function ee(e, t, n, r, i) {
-	if (t <= 1) return r;
-	let a = n - r - i;
-	return r + e / (t - 1) * a;
-}
-function te(e, t, n, r, i, a) {
-	if (t <= e) return [];
-	let o = t - e, s = [], c = n - r - i;
-	for (let t = 0; t < a; t++) {
-		let n = t / Math.max(1, a - 1), i = e + o * n;
-		s.push({
-			x: r + n * c,
-			label: L(i, o)
-		});
-	}
-	return s;
-}
-var ne = [
-	"#3b82f6",
-	"#a855f7",
-	"#10b981",
-	"#f59e0b",
-	"#ec4899",
-	"#14b8a6",
-	"#6366f1",
-	"#ef4444"
-];
-function re(e) {
-	return ne[e % ne.length] ?? "#64748b";
-}
-function ie() {
-	let [e, t] = r(null);
-	return {
-		state: e,
-		bindHover: t
-	};
-}
-function R({ state: e, containerWidth: t }) {
-	if (!e) return null;
-	let n = Math.max(114, t - 110 - 4), r = Math.max(114, Math.min(n, e.anchorX)), i = e.anchorX - r;
-	return /* @__PURE__ */ g("div", {
-		role: "tooltip",
-		style: {
-			position: "absolute",
-			left: r,
-			top: e.anchorY,
-			transform: "translate(-50%, calc(-100% - 8px))",
-			pointerEvents: "none"
-		},
-		className: "z-10 rounded-md border border-border bg-surface shadow-lg px-2.5 py-1.5 text-[10px] text-foreground min-w-[140px] max-w-[240px]",
-		children: [
-			/* @__PURE__ */ h("div", {
-				className: "font-semibold mb-1 truncate",
-				children: e.title
-			}),
-			/* @__PURE__ */ h("div", {
-				className: "space-y-0.5",
-				children: e.rows.map((e, t) => /* @__PURE__ */ g("div", {
-					className: "flex items-center justify-between gap-2",
-					children: [/* @__PURE__ */ g("span", {
-						className: "flex items-center gap-1 text-foreground-subtle truncate",
-						children: [e.colour && /* @__PURE__ */ h("span", {
-							className: "inline-block h-1.5 w-1.5 rounded-sm flex-shrink-0",
-							style: { backgroundColor: e.colour }
-						}), /* @__PURE__ */ h("span", {
-							className: "truncate",
-							children: e.label
-						})]
-					}), /* @__PURE__ */ h("span", {
-						className: "tabular-nums",
-						children: e.value
-					})]
-				}, t))
-			}),
-			/* @__PURE__ */ h("span", {
-				"aria-hidden": !0,
-				style: { left: `calc(50% + ${i}px)` },
-				className: "absolute -bottom-1 -translate-x-1/2 h-2 w-2 rotate-45 bg-surface border-r border-b border-border"
-			})
-		]
-	});
-}
-//#endregion
-//#region src/pipeline-analytics/widgets/AudioHistoryChart.tsx
-var z = {
+}), I = {
 	"5m": {
 		label: "5 min",
 		windowSec: 300,
@@ -474,410 +348,253 @@ var z = {
 		sampleEveryMs: 6e4,
 		pollIntervalMs: 3e5
 	}
-}, ae = [
+}, ie = [
 	{
 		id: "5m",
-		label: z["5m"].label
+		label: I["5m"].label
 	},
 	{
 		id: "1h",
-		label: z["1h"].label
+		label: I["1h"].label
 	},
 	{
 		id: "24h",
-		label: z["24h"].label
+		label: I["24h"].label
 	}
-], B = 140, V = {
-	top: 16,
-	right: 12,
-	bottom: 24,
-	left: 38
-}, oe = {
-	speech: "#3b82f6",
-	music: "#a855f7",
-	dog_bark: "#ec4899",
-	glass_break: "#f43f5e",
-	alarm: "#f59e0b",
-	baby_cry: "#10b981"
-};
-function se(e) {
-	return e ? oe[e.toLowerCase()] ?? "#6366f1" : "#71717a";
-}
-function ce({ deviceId: n }) {
-	let { t: i } = P(), a = m(l().trpcClient, n), [s, c] = r("5m"), u = z[s], [d, f] = I(), p = ie(), v = e(null), y = (e) => {
-		let t = v.current;
-		if (!t) return e;
-		let n = t.getBoundingClientRect();
-		return n.width === 0 ? e : e / f * n.width;
-	}, b = o({
+], ae = (e) => e in I, oe = 120, L = "dBFS";
+function se({ deviceId: n }) {
+	let { t: i } = F(), a = t(), c = y(s().trpcClient, n), [u, d] = r("5m"), m = I[u], h = o({
 		queryKey: [
 			"audio-metrics",
 			n,
 			"history",
-			s
+			u
 		],
-		queryFn: async () => a ? await a.audioMetrics?.getHistory({
-			windowSec: u.windowSec,
-			sampleEveryMs: u.sampleEveryMs
+		queryFn: async () => c ? await c.audioMetrics?.getHistory({
+			windowSec: m.windowSec,
+			sampleEveryMs: m.sampleEveryMs
 		}) ?? null : null,
-		enabled: !!a,
-		refetchInterval: u.pollIntervalMs,
-		staleTime: Math.max(1e3, u.pollIntervalMs / 2)
-	}), x = b.data, S = x?.points ?? [], C = t(() => pe(S), [S]), w = t(() => de(S, f, C), [
-		S,
-		f,
-		C
-	]), T = t(() => fe(S, f, C), [
-		S,
-		f,
-		C
-	]), E = t(() => me(C), [C]), O = t(() => he(S, f), [S, f]);
-	return /* @__PURE__ */ g("div", {
-		className: "rounded-lg border border-border bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ g("div", {
-			className: "border-b border-border px-4 py-2 flex items-center justify-between gap-3",
-			children: [/* @__PURE__ */ g("div", {
-				className: "flex items-center gap-1.5",
-				children: [/* @__PURE__ */ h(D, { className: "h-3.5 w-3.5 text-foreground-subtle" }), /* @__PURE__ */ h("h2", {
-					className: "text-xs font-semibold text-foreground uppercase tracking-wider",
-					children: i("audioHistory.title")
-				})]
-			}), /* @__PURE__ */ h(F, {
-				presets: ae,
-				value: s,
-				onChange: c
-			})]
-		}), /* @__PURE__ */ g("div", {
-			ref: d,
-			className: "p-3 min-w-0 relative",
-			children: [S.length === 0 ? /* @__PURE__ */ h("div", {
-				className: "flex items-center justify-center h-32 text-[11px] text-foreground-subtle italic",
-				children: b.isLoading ? i("common.loading") : i("audioHistory.empty")
-			}) : f === 0 ? /* @__PURE__ */ h("div", { className: "h-32" }) : /* @__PURE__ */ g(_, { children: [/* @__PURE__ */ g("svg", {
-				ref: v,
-				role: "img",
-				"aria-label": i("audioHistory.ariaLabel"),
-				width: "100%",
-				height: B,
-				viewBox: `0 0 ${f} ${B}`,
-				preserveAspectRatio: "none",
-				className: "block",
-				onMouseLeave: () => p.bindHover(null),
-				children: [
-					E.map(({ y: e, label: t }, n) => /* @__PURE__ */ g("g", { children: [/* @__PURE__ */ h("line", {
-						x1: V.left,
-						x2: f - V.right,
-						y1: e,
-						y2: e,
-						stroke: "currentColor",
-						strokeOpacity: .08,
-						strokeWidth: .5
-					}), /* @__PURE__ */ h("text", {
-						x: V.left - 6,
-						y: e + 3,
-						textAnchor: "end",
-						className: "text-[9px] fill-foreground-subtle",
-						children: t
-					})] }, `y-${n}`)),
-					O.map(({ x: e, label: t }, n) => /* @__PURE__ */ h("text", {
-						x: e,
-						y: B - V.bottom + 12,
-						textAnchor: "middle",
-						className: "text-[9px] fill-foreground-subtle",
-						children: t
-					}, `x-${n}`)),
-					T && /* @__PURE__ */ h("path", {
-						d: T,
-						fill: "none",
-						stroke: "currentColor",
-						strokeOpacity: .25,
-						strokeWidth: 1,
-						strokeDasharray: "3 2"
-					}),
-					w && /* @__PURE__ */ h("path", {
-						d: w,
-						fill: "none",
-						stroke: "currentColor",
-						className: "text-primary",
-						strokeWidth: 1.5
-					}),
-					S.map((e, t) => e.topClass === null ? null : /* @__PURE__ */ h("circle", {
-						cx: H(t, S.length, f),
-						cy: le(e.dbfs, C),
-						r: 3,
-						fill: se(e.topClass),
-						stroke: "#000",
-						strokeOpacity: .3,
-						strokeWidth: .5
-					}, `dot-${t}`)),
-					S.map((e, t) => {
-						let n = H(t, S.length, f), r = le(e.dbfs, C), a = B - V.top - V.bottom, o = S.length > 1 ? (f - V.left - V.right) / (S.length - 1) : 24;
-						return /* @__PURE__ */ h("rect", {
-							x: n - o / 2,
-							y: V.top,
-							width: Math.max(2, o),
-							height: a,
-							fill: "transparent",
-							onMouseEnter: () => {
-								p.bindHover({
-									anchorX: y(n),
-									anchorY: r,
-									title: `${ge(e.ts)} · ${e.dbfs?.toFixed(1) ?? "—"} dB`,
-									rows: [
-										{
-											label: i("audioHistory.peakWindow"),
-											value: `${e.peakDbfs.toFixed(1)} dB`
-										},
-										{
-											label: i("audioHistory.avgWindow"),
-											value: `${e.avgDbfs.toFixed(1)} dB`
-										},
-										...e.topClass === null ? [] : [{
-											label: e.topClass,
-											value: e.topScore == null ? "—" : `${(e.topScore * 100).toFixed(0)}%`,
-											colour: se(e.topClass)
-										}]
-									]
-								});
-							}
-						}, `hit-${t}`);
-					})
-				]
-			}), /* @__PURE__ */ h(R, {
-				state: p.state,
-				containerWidth: f
-			})] }), S.length > 0 && /* @__PURE__ */ g("div", {
-				className: "flex items-center justify-between text-[10px] text-foreground-subtle mt-1",
-				children: [/* @__PURE__ */ h("span", { children: i("audioHistory.samples", {
-					count: S.length,
-					seconds: Math.round((x?.effectiveSampleEveryMs ?? u.sampleEveryMs) / 1e3)
-				}) }), /* @__PURE__ */ h("span", { children: i("audioHistory.peak", { value: S.reduce((e, t) => Math.max(e, t.peakDbfs), -Infinity).toFixed(1) }) })]
-			})]
-		})]
+		enabled: !!c,
+		refetchInterval: m.pollIntervalMs,
+		staleTime: Math.max(1e3, m.pollIntervalMs / 2)
+	}), g = h.data, _ = e(() => g?.points ?? [], [g]), v = g?.effectiveSampleEveryMs ?? m.sampleEveryMs, b = h.dataUpdatedAt > 0 ? h.dataUpdatedAt : Date.now(), C = b - m.windowSec * 1e3, w = e(() => {
+		let e = p(v);
+		return [{
+			id: "level",
+			label: i("audioHistory.level"),
+			unit: L,
+			colorIndex: 0,
+			gapMs: e,
+			points: _.map((e) => ({
+				t: e.ts,
+				v: e.dbfs
+			}))
+		}, {
+			id: "peak",
+			label: i("audioHistory.peakWindow"),
+			unit: L,
+			colorIndex: 1,
+			gapMs: e,
+			points: _.map((e) => ({
+				t: e.ts,
+				v: e.peakDbfs
+			}))
+		}];
+	}, [
+		_,
+		v,
+		i
+	]), T = e(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of _) t.topClass !== null && e.set(t.topClass, (e.get(t.topClass) ?? 0) + 1);
+		return [...e.entries()].toSorted(([, e], [, t]) => t - e);
+	}, [_]), E = _.reduce((e, t) => Math.max(e, t.peakDbfs), -Infinity);
+	return /* @__PURE__ */ S(f, {
+		headingId: a,
+		title: i("audioHistory.title"),
+		icon: M,
+		children: /* @__PURE__ */ S("div", {
+			className: "p-3 min-w-0",
+			children: /* @__PURE__ */ S(l, {
+				title: i("audioHistory.lineTitle"),
+				series: _.length === 0 ? [] : w,
+				range: {
+					from: C,
+					to: b
+				},
+				height: oe,
+				pending: h.isLoading,
+				emptyMessage: i("audioHistory.empty"),
+				windowToggle: {
+					options: ie,
+					value: u,
+					onChange: (e) => {
+						ae(e) && d(e);
+					},
+					ariaLabel: i("common.timeWindow")
+				},
+				footer: _.length > 0 ? /* @__PURE__ */ x("div", {
+					className: "space-y-0.5",
+					children: [/* @__PURE__ */ x("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ S("span", { children: i("audioHistory.samples", {
+							count: _.length,
+							seconds: Math.round(v / 1e3)
+						}) }), /* @__PURE__ */ S("span", { children: i("audioHistory.peak", { value: E.toFixed(1) }) })]
+					}), T.length > 0 && /* @__PURE__ */ S("div", { children: i("audioHistory.classHits", { list: T.map(([e, t]) => `${e} ×${String(t)}`).join(", ") }) })]
+				}) : void 0
+			})
+		})
 	});
 }
-function H(e, t, n) {
-	if (t <= 1) return V.left;
-	let r = n - V.left - V.right;
-	return V.left + e / (t - 1) * r;
-}
-function le(e, t) {
-	return ue(e === null || !Number.isFinite(e) ? t.min : Math.max(t.min, Math.min(t.max, e)), t);
-}
-function ue(e, t) {
-	let n = B - V.top - V.bottom, r = Math.max(1, t.max - t.min), i = (e - t.min) / r;
-	return V.top + (1 - i) * n;
-}
-function de(e, t, n) {
-	if (e.length === 0) return null;
-	let r = [];
-	for (let i = 0; i < e.length; i++) {
-		let a = H(i, e.length, t), o = le(e[i].dbfs, n);
-		r.push(`${i === 0 ? "M" : "L"} ${a.toFixed(1)} ${o.toFixed(1)}`);
-	}
-	return r.join(" ");
-}
-function fe(e, t, n) {
-	if (e.length === 0) return null;
-	let r = [];
-	for (let i = 0; i < e.length; i++) {
-		let a = H(i, e.length, t), o = ue(Math.max(n.min, Math.min(n.max, e[i].peakDbfs)), n);
-		r.push(`${i === 0 ? "M" : "L"} ${a.toFixed(1)} ${o.toFixed(1)}`);
-	}
-	return r.join(" ");
-}
-function pe(e) {
-	if (e.length === 0) return {
-		min: -80,
-		max: -40
-	};
-	let t = Infinity, n = -Infinity;
-	for (let r of e) r.dbfs !== null && Number.isFinite(r.dbfs) && (t = Math.min(t, r.dbfs), n = Math.max(n, r.dbfs)), Number.isFinite(r.peakDbfs) && (t = Math.min(t, r.peakDbfs), n = Math.max(n, r.peakDbfs));
-	if (!Number.isFinite(t) || !Number.isFinite(n)) return {
-		min: -80,
-		max: -40
-	};
-	let r = Math.max(-100, Math.floor(t - 1)), i = Math.min(0, Math.ceil(n));
-	return i - r < 5 && (r = Math.max(-100, i - 5)), {
-		min: r,
-		max: i
-	};
-}
-function me(e) {
-	let t = [];
-	for (let n = 0; n < 4; n++) {
-		let r = n / 3, i = e.min + (e.max - e.min) * r;
-		t.push({
-			y: ue(i, e),
-			label: `${Math.round(i)}`
-		});
-	}
-	return t;
-}
-function he(e, t) {
-	if (e.length === 0) return [];
-	let n = e[0], r = e[e.length - 1], i = [], a = Math.min(5, e.length);
-	for (let e = 0; e < a; e++) {
-		let o = e / Math.max(1, a - 1), s = n.ts + (r.ts - n.ts) * o;
-		i.push({
-			x: V.left + o * (t - V.left - V.right),
-			label: ge(s)
-		});
-	}
-	return i;
-}
-function ge(e) {
-	let t = new Date(e);
-	return `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
-}
 //#endregion
 //#region src/pipeline-analytics/widgets/AudioMetricsPanel.tsx
-function _e(e) {
+function R(e) {
 	return !Number.isFinite(e) || e <= 0 ? 60 : Math.round(e > 600 ? e / 1e3 : e);
 }
-function ve({ dev: e, deviceId: t, title: n, variant: r = "full" }) {
-	let { t: i } = P(), a = n ?? i("audioMetrics.title"), o = u(l().trpcClient, e === void 0 && t !== void 0 ? t : null, (e) => e.audioMetrics), s = f(e ? e.state.audioMetrics : void 0), c = e === void 0 ? o : s;
-	return c ? /* @__PURE__ */ h(ye, {
+function ce({ dev: e, deviceId: t, title: n, variant: r = "full" }) {
+	let { t: i } = F(), a = n ?? i("audioMetrics.title"), o = m(s().trpcClient, e === void 0 && t !== void 0 ? t : null, (e) => e.audioMetrics), c = _(e ? e.state.audioMetrics : void 0), l = e === void 0 ? o : c;
+	return l ? /* @__PURE__ */ S(z, {
 		title: a,
 		variant: r,
-		ts: c.ts,
-		children: /* @__PURE__ */ g("div", {
+		ts: l.ts,
+		children: /* @__PURE__ */ x("div", {
 			className: r === "compact" ? "space-y-2" : "grid grid-cols-1 2xl:grid-cols-3 gap-3",
 			children: [
-				/* @__PURE__ */ h(xe, { snapshot: c }),
-				/* @__PURE__ */ h(Se, { snapshot: c }),
-				/* @__PURE__ */ h(Ce, { snapshot: c })
+				/* @__PURE__ */ S(ue, { snapshot: l }),
+				/* @__PURE__ */ S(de, { snapshot: l }),
+				/* @__PURE__ */ S(fe, { snapshot: l })
 			]
 		})
-	}) : /* @__PURE__ */ h(ye, {
+	}) : /* @__PURE__ */ S(z, {
 		title: a,
 		variant: r,
-		children: /* @__PURE__ */ h(be, {
-			icon: /* @__PURE__ */ h(M, { className: "h-5 w-5 mb-2 opacity-30" }),
+		children: /* @__PURE__ */ S(le, {
+			icon: /* @__PURE__ */ S(ne, { className: "h-5 w-5 mb-2 opacity-30" }),
 			message: i(e || t !== void 0 ? "audioMetrics.noData" : "common.resolving")
 		})
 	});
 }
-function ye({ title: e, variant: t, ts: n, children: r }) {
-	let { t: i } = P(), a = n ? Math.max(0, Math.floor((Date.now() - n) / 1e3)) : null;
-	return /* @__PURE__ */ g("div", {
+function z({ title: e, variant: t, ts: n, children: r }) {
+	let { t: i } = F(), a = n ? Math.max(0, Math.floor((Date.now() - n) / 1e3)) : null;
+	return /* @__PURE__ */ x("div", {
 		className: t === "compact" ? "rounded-md border border-border/60 bg-surface/60 p-3" : "rounded-lg border border-border bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: t === "compact" ? "flex items-center justify-between mb-2" : "border-b border-border px-4 py-2 flex items-center justify-between",
-			children: [/* @__PURE__ */ h("h2", {
+			children: [/* @__PURE__ */ S("h2", {
 				className: "text-xs font-semibold text-foreground uppercase tracking-wider",
 				children: e
-			}), a !== null && /* @__PURE__ */ h("span", {
+			}), a !== null && /* @__PURE__ */ S("span", {
 				className: "text-[10px] text-foreground-subtle",
 				children: a === 0 ? i("common.justNow") : i("common.secondsAgo", { seconds: a })
 			})]
-		}), /* @__PURE__ */ h("div", {
+		}), /* @__PURE__ */ S("div", {
 			className: t === "compact" ? "" : "p-3",
 			children: r
 		})]
 	});
 }
-function be({ icon: e, message: t }) {
-	return /* @__PURE__ */ g("div", {
+function le({ icon: e, message: t }) {
+	return /* @__PURE__ */ x("div", {
 		className: "px-4 py-6 flex flex-col items-center text-center text-foreground-subtle",
-		children: [e, /* @__PURE__ */ h("p", {
+		children: [e, /* @__PURE__ */ S("p", {
 			className: "text-[11px]",
 			children: t
 		})]
 	});
 }
-function xe({ snapshot: e }) {
-	let { t } = P(), { dbfs: n } = e.level, r = Math.max(-80, Math.min(0, Number.isFinite(n) ? n : -80)), i = (r + 80) / 80 * 100, a = r > -10 ? "bg-danger" : r > -25 ? "bg-warning" : "bg-primary";
-	return /* @__PURE__ */ g("div", {
+function ue({ snapshot: e }) {
+	let { t } = F(), { dbfs: n } = e.level, r = Math.max(-80, Math.min(0, Number.isFinite(n) ? n : -80)), i = (r + 80) / 80 * 100, a = r > -10 ? "bg-danger" : r > -25 ? "bg-warning" : "bg-primary";
+	return /* @__PURE__ */ x("div", {
 		className: "rounded-md border border-border/60 bg-background/40 px-3 py-2",
 		children: [
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ x("div", {
 				className: "flex items-center gap-1.5 mb-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
 				children: [
-					/* @__PURE__ */ h(D, { className: "h-3.5 w-3.5" }),
-					/* @__PURE__ */ h("span", { children: t("audioMetrics.level") }),
-					/* @__PURE__ */ h("span", {
+					/* @__PURE__ */ S(M, { className: "h-3.5 w-3.5" }),
+					/* @__PURE__ */ S("span", { children: t("audioMetrics.level") }),
+					/* @__PURE__ */ S("span", {
 						className: "ml-auto text-base font-semibold text-foreground tabular-nums normal-case tracking-normal",
 						children: Number.isFinite(n) ? `${n.toFixed(1)} dB` : t("audioMetrics.silent")
 					})
 				]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ S("div", {
 				className: "h-1.5 rounded-full bg-foreground-subtle/15 overflow-hidden",
-				children: /* @__PURE__ */ h("div", {
+				children: /* @__PURE__ */ S("div", {
 					className: `h-full ${a} transition-all`,
 					style: { width: `${i}%` }
 				})
 			}),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ x("div", {
 				className: "flex justify-between text-[9px] text-foreground-subtle mt-1 tabular-nums",
 				children: [
-					/* @__PURE__ */ h("span", { children: t("audioMetrics.peak", { value: Number.isFinite(e.peakDbfs) ? e.peakDbfs.toFixed(1) : "—" }) }),
-					/* @__PURE__ */ h("span", { children: t("audioMetrics.avg", { value: e.avgDbfs.toFixed(1) }) }),
-					/* @__PURE__ */ h("span", { children: t("audioMetrics.window", { seconds: _e(e.windowSec) }) })
+					/* @__PURE__ */ S("span", { children: t("audioMetrics.peak", { value: Number.isFinite(e.peakDbfs) ? e.peakDbfs.toFixed(1) : "—" }) }),
+					/* @__PURE__ */ S("span", { children: t("audioMetrics.avg", { value: e.avgDbfs.toFixed(1) }) }),
+					/* @__PURE__ */ S("span", { children: t("audioMetrics.window", { seconds: R(e.windowSec) }) })
 				]
 			})
 		]
 	});
 }
-function Se({ snapshot: e }) {
-	let { t } = P(), { current: n } = e;
-	return /* @__PURE__ */ g("div", {
+function de({ snapshot: e }) {
+	let { t } = F(), { current: n } = e;
+	return /* @__PURE__ */ x("div", {
 		className: "rounded-md border border-border/60 bg-background/40 px-3 py-2",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "flex items-center gap-1.5 mb-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
-			children: [/* @__PURE__ */ h(N, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ h("span", { children: t("audioMetrics.now") })]
-		}), n ? /* @__PURE__ */ g("div", {
+			children: [/* @__PURE__ */ S(re, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ S("span", { children: t("audioMetrics.now") })]
+		}), n ? /* @__PURE__ */ x("div", {
 			className: "flex flex-col gap-1",
-			children: [/* @__PURE__ */ h("span", {
+			children: [/* @__PURE__ */ S("span", {
 				className: "text-sm font-semibold text-foreground",
 				children: n.className
-			}), /* @__PURE__ */ h("span", {
+			}), /* @__PURE__ */ S("span", {
 				className: "text-[10px] text-foreground-subtle tabular-nums",
 				children: t("audioMetrics.scoreAgo", {
 					score: (n.score * 100).toFixed(0),
 					seconds: Math.max(0, Math.floor((Date.now() - n.timestamp) / 1e3))
 				})
 			})]
-		}) : /* @__PURE__ */ h("span", {
+		}) : /* @__PURE__ */ S("span", {
 			className: "text-[10px] text-foreground-subtle italic",
 			children: t("audioMetrics.unclassified")
 		})]
 	});
 }
-function Ce({ snapshot: e }) {
-	let { t } = P();
-	return e.byClass.length === 0 ? /* @__PURE__ */ g("div", {
+function fe({ snapshot: e }) {
+	let { t } = F();
+	return e.byClass.length === 0 ? /* @__PURE__ */ x("div", {
 		className: "rounded-md border border-border/40 bg-background/20 px-3 py-2",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "flex items-center gap-1.5 mb-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
-			children: [/* @__PURE__ */ h(D, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ h("span", { children: t("audioMetrics.last", { seconds: _e(e.windowSec) }) })]
-		}), /* @__PURE__ */ h("span", {
+			children: [/* @__PURE__ */ S(M, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ S("span", { children: t("audioMetrics.last", { seconds: R(e.windowSec) }) })]
+		}), /* @__PURE__ */ S("span", {
 			className: "text-[10px] text-foreground-subtle italic",
 			children: t("audioMetrics.noClassified")
 		})]
-	}) : /* @__PURE__ */ g("div", {
+	}) : /* @__PURE__ */ x("div", {
 		className: "rounded-md border border-border/60 bg-background/40",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "px-3 py-1.5 border-b border-border/40 flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
 			children: [
-				/* @__PURE__ */ h(D, { className: "h-3.5 w-3.5" }),
-				/* @__PURE__ */ h("span", { children: t("audioMetrics.last", { seconds: _e(e.windowSec) }) }),
-				/* @__PURE__ */ h("span", {
+				/* @__PURE__ */ S(M, { className: "h-3.5 w-3.5" }),
+				/* @__PURE__ */ S("span", { children: t("audioMetrics.last", { seconds: R(e.windowSec) }) }),
+				/* @__PURE__ */ S("span", {
 					className: "ml-auto text-[10px] normal-case tracking-normal",
 					children: e.byClass.length
 				})
 			]
-		}), /* @__PURE__ */ h("div", {
+		}), /* @__PURE__ */ S("div", {
 			className: "divide-y divide-border/30",
-			children: e.byClass.slice(0, 8).map((e) => /* @__PURE__ */ g("div", {
+			children: e.byClass.slice(0, 8).map((e) => /* @__PURE__ */ x("div", {
 				className: "px-3 py-1.5 flex items-center justify-between text-xs",
-				children: [/* @__PURE__ */ h("span", {
+				children: [/* @__PURE__ */ S("span", {
 					className: "font-medium text-foreground truncate",
 					children: e.className
-				}), /* @__PURE__ */ g("span", {
+				}), /* @__PURE__ */ x("span", {
 					className: "flex items-center gap-2 tabular-nums text-foreground-subtle",
-					children: [/* @__PURE__ */ h("span", { children: t("audioMetrics.hits", { count: e.hits }) }), /* @__PURE__ */ g("span", {
+					children: [/* @__PURE__ */ S("span", { children: t("audioMetrics.hits", { count: e.hits }) }), /* @__PURE__ */ x("span", {
 						className: "rounded-full px-1.5 py-0.5 text-[10px] bg-primary/10 text-primary border border-primary/20",
 						children: [(e.peakScore * 100).toFixed(0), "%"]
 					})]
@@ -888,7 +605,7 @@ function Ce({ snapshot: e }) {
 }
 //#endregion
 //#region src/pipeline-analytics/widgets/OccupancyHistoryChart.tsx
-var we = 5 * 6e4, U = {
+var B = 5 * 6e4, V = {
 	"1h": {
 		label: "1 h",
 		windowMs: 60 * 6e4,
@@ -909,58 +626,48 @@ var we = 5 * 6e4, U = {
 		windowMs: 10080 * 6e4,
 		pollIntervalMs: 3e5
 	}
-}, Te = [
+}, pe = [
 	{
 		id: "1h",
-		label: U["1h"].label
+		label: V["1h"].label
 	},
 	{
 		id: "6h",
-		label: U["6h"].label
+		label: V["6h"].label
 	},
 	{
 		id: "24h",
-		label: U["24h"].label
+		label: V["24h"].label
 	},
 	{
 		id: "7d",
-		label: U["7d"].label
+		label: V["7d"].label
 	}
-], W = 140, G = {
-	top: 14,
-	right: 12,
-	bottom: 24,
-	left: 32
-}, K = "__all__";
-function Ee({ deviceId: n }) {
-	let { t: a } = P(), s = m(l().trpcClient, n), [c, u] = r("24h"), [d, p] = r(K), y = U[c], [b, x] = I(), S = ie(), C = e(null), w = (e) => {
-		let t = C.current;
-		if (!t) return e;
-		let n = t.getBoundingClientRect();
-		return n.width === 0 ? e : e / x * n.width;
-	}, T = f(s?.state.zoneAnalytics), E = t(() => {
+], me = (e) => e in V, he = 120, H = "__all__";
+function ge({ deviceId: n }) {
+	let { t: a } = F(), c = y(s().trpcClient, n), [u, d] = r("24h"), [m, h] = r(H), g = V[u], v = t(), w = _(c?.state.zoneAnalytics), T = e(() => {
 		let e = /* @__PURE__ */ new Set();
-		if (T?.frame.byClass) for (let t of Object.keys(T.frame.byClass)) e.add(t);
-		if (T?.zones) for (let t of T.zones) for (let n of Object.keys(t.byClass)) e.add(n);
+		if (w?.frame.byClass) for (let t of Object.keys(w.frame.byClass)) e.add(t);
+		if (w?.zones) for (let t of w.zones) for (let n of Object.keys(t.byClass)) e.add(n);
 		return [...e].toSorted();
-	}, [T]);
+	}, [w]);
 	i(() => {
-		d !== K && !E.includes(d) && p(K);
-	}, [d, E]);
-	let D = o({
+		m !== H && !T.includes(m) && h(H);
+	}, [m, T]);
+	let E = o({
 		queryKey: [
 			"pipeline-analytics",
 			n,
 			"occupancyLts",
-			c,
-			d
+			u,
+			m
 		],
 		queryFn: async () => {
-			if (!s) return [];
-			let e = Date.now(), t = Math.floor((e - y.windowMs) / we) * we;
-			return (await s.pipelineAnalytics?.readLongTermSeries({
+			if (!c) return [];
+			let e = Date.now(), t = Math.floor((e - g.windowMs) / B) * B;
+			return (await c.pipelineAnalytics?.readLongTermSeries({
 				series: "occupancy",
-				scope: d === K ? v() : v(void 0, d),
+				scope: m === H ? C() : C(void 0, m),
 				from: t,
 				to: e
 			}) ?? []).map((e) => ({
@@ -968,170 +675,102 @@ function Ee({ deviceId: n }) {
 				count: e.max
 			}));
 		},
-		enabled: !!s,
-		refetchInterval: y.pollIntervalMs,
-		staleTime: Math.max(1e3, y.pollIntervalMs / 2)
-	}), O = D.data ?? [], k = D.dataUpdatedAt > 0 ? D.dataUpdatedAt : Date.now(), j = k - y.windowMs, M = t(() => {
-		if (O.length === 0) return 1;
-		let e = O.reduce((e, t) => Math.max(e, t.count), 0);
-		return Math.max(1, Math.ceil(e * 1.15));
-	}, [O]), N = t(() => Oe(O, x, M), [
-		O,
-		x,
-		M
-	]), L = t(() => te(j, k, x, G.left, G.right, 5), [
-		j,
-		k,
-		x
-	]), ne = t(() => ke(M), [M]);
-	return /* @__PURE__ */ g("div", {
-		className: "rounded-lg border border-border bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ g("div", {
-			className: "border-b border-border px-4 py-2 flex items-center justify-between gap-3",
-			children: [/* @__PURE__ */ g("div", {
-				className: "flex items-center gap-1.5",
-				children: [/* @__PURE__ */ h(A, { className: "h-3.5 w-3.5 text-foreground-subtle" }), /* @__PURE__ */ h("h2", {
-					className: "text-xs font-semibold text-foreground uppercase tracking-wider",
-					children: a("occupancyHistory.title")
-				})]
-			}), /* @__PURE__ */ g("div", {
-				className: "flex items-center gap-2",
-				children: [E.length > 0 && /* @__PURE__ */ g("select", {
-					value: d,
-					onChange: (e) => p(e.target.value),
-					className: "text-[10px] px-1.5 py-0.5 rounded border border-border bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary/40",
-					title: a("occupancyHistory.filterByClass"),
-					children: [/* @__PURE__ */ h("option", {
-						value: K,
-						children: a("occupancyHistory.allClasses")
-					}), E.map((e) => /* @__PURE__ */ h("option", {
-						value: e,
-						children: e
-					}, e))]
-				}), /* @__PURE__ */ h(F, {
-					presets: Te,
-					value: c,
-					onChange: u
-				})]
-			})]
-		}), /* @__PURE__ */ g("div", {
-			ref: b,
-			className: "p-3 min-w-0 relative",
-			children: [O.length === 0 ? /* @__PURE__ */ h("div", {
-				className: "flex items-center justify-center h-32 text-[11px] text-foreground-subtle italic",
-				children: D.isLoading ? a("common.loading") : a("occupancyHistory.empty")
-			}) : x === 0 ? /* @__PURE__ */ h("div", { className: "h-32" }) : /* @__PURE__ */ g(_, { children: [/* @__PURE__ */ g("svg", {
-				ref: C,
-				role: "img",
-				"aria-label": a("occupancyHistory.ariaLabel"),
-				width: "100%",
-				height: W,
-				viewBox: `0 0 ${x} ${W}`,
-				preserveAspectRatio: "none",
-				className: "block",
-				onMouseLeave: () => S.bindHover(null),
-				children: [
-					ne.map(({ y: e, label: t }, n) => /* @__PURE__ */ g("g", { children: [/* @__PURE__ */ h("line", {
-						x1: G.left,
-						x2: x - G.right,
-						y1: e,
-						y2: e,
-						stroke: "currentColor",
-						strokeOpacity: .08,
-						strokeWidth: .5
-					}), /* @__PURE__ */ h("text", {
-						x: G.left - 6,
-						y: e + 3,
-						textAnchor: "end",
-						className: "text-[9px] fill-foreground-subtle",
-						children: t
-					})] }, `y-${n}`)),
-					L.map(({ x: e, label: t }, n) => /* @__PURE__ */ h("text", {
-						x: e,
-						y: W - G.bottom + 12,
-						textAnchor: "middle",
-						className: "text-[9px] fill-foreground-subtle",
-						children: t
-					}, `x-${n}`)),
-					N && /* @__PURE__ */ h("path", {
-						d: N,
-						fill: "none",
-						stroke: "currentColor",
-						className: "text-primary",
-						strokeWidth: 1.5
-					}),
-					O.map((e, t) => {
-						let n = ee(t, O.length, x, G.left, G.right), r = De(e.count, M), i = W - G.top - G.bottom, o = O.length > 1 ? (x - G.left - G.right) / (O.length - 1) : 24;
-						return /* @__PURE__ */ g("g", { children: [/* @__PURE__ */ h("circle", {
-							cx: n,
-							cy: r,
-							r: 2,
-							fill: "currentColor",
-							className: "text-primary"
-						}), /* @__PURE__ */ h("rect", {
-							x: n - o / 2,
-							y: G.top,
-							width: Math.max(2, o),
-							height: i,
-							fill: "transparent",
-							onMouseEnter: () => {
-								S.bindHover({
-									anchorX: w(n),
-									anchorY: r,
-									title: `${Ae(e.ts)} · ${a("occupancyHistory.objects", { count: e.count })}`,
-									rows: [{
-										label: a("occupancyHistory.class"),
-										value: d === K ? a("occupancyHistory.all") : d
-									}, {
-										label: a("occupancyHistory.bucket"),
-										value: "5 min"
-									}]
-								});
-							}
-						})] }, `${e.ts}-${t}`);
-					})
-				]
-			}), /* @__PURE__ */ h(R, {
-				state: S.state,
-				containerWidth: x
-			})] }), O.length > 0 && /* @__PURE__ */ g("div", {
-				className: "flex items-center justify-between text-[10px] text-foreground-subtle mt-1",
-				children: [/* @__PURE__ */ h("span", { children: a("occupancyHistory.buckets", { count: O.length }) }), /* @__PURE__ */ h("span", { children: a("occupancyHistory.peak", { value: O.reduce((e, t) => Math.max(e, t.count), 0) }) })]
-			})]
-		})]
+		enabled: !!c,
+		refetchInterval: g.pollIntervalMs,
+		staleTime: Math.max(1e3, g.pollIntervalMs / 2)
+	}), D = E.data ?? [], O = E.dataUpdatedAt > 0 ? E.dataUpdatedAt : Date.now(), k = O - g.windowMs, A = e(() => [{
+		id: m,
+		label: m === H ? a("occupancyHistory.allClasses") : m,
+		unit: null,
+		colorIndex: 0,
+		interpolation: "step",
+		gapMs: p(B),
+		points: D.map((e) => ({
+			t: e.ts,
+			v: e.count
+		}))
+	}], [
+		D,
+		m,
+		a
+	]), j = e(() => [{
+		value: H,
+		label: a("occupancyHistory.allClasses")
+	}, ...T.map((e) => ({
+		value: e,
+		label: e
+	}))], [T, a]);
+	return /* @__PURE__ */ S(f, {
+		headingId: v,
+		title: a("occupancyHistory.title"),
+		icon: P,
+		actions: T.length > 0 ? /* @__PURE__ */ S("div", {
+			className: "w-32",
+			children: /* @__PURE__ */ S(b, {
+				value: m,
+				onChange: (e) => h(e.target.value),
+				options: j,
+				"aria-label": a("occupancyHistory.filterByClass")
+			})
+		}) : void 0,
+		children: /* @__PURE__ */ S("div", {
+			className: "p-3 min-w-0",
+			children: /* @__PURE__ */ S(l, {
+				title: a("occupancyHistory.lineTitle"),
+				series: D.length === 0 ? [] : A,
+				range: {
+					from: k,
+					to: O
+				},
+				height: he,
+				pending: E.isLoading,
+				emptyMessage: a("occupancyHistory.empty"),
+				formatValue: (e) => String(Math.round(e)),
+				windowToggle: {
+					options: pe,
+					value: u,
+					onChange: (e) => {
+						me(e) && d(e);
+					},
+					ariaLabel: a("common.timeWindow")
+				},
+				footer: D.length > 0 ? /* @__PURE__ */ x("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ S("span", { children: a("occupancyHistory.buckets", { count: D.length }) }), /* @__PURE__ */ S("span", { children: a("occupancyHistory.peak", { value: D.reduce((e, t) => Math.max(e, t.count), 0) }) })]
+				}) : void 0
+			})
+		})
 	});
 }
-function De(e, t) {
-	let n = W - G.top - G.bottom, r = Math.min(1, e / t);
-	return G.top + (1 - r) * n;
-}
-function Oe(e, t, n) {
-	if (e.length === 0) return null;
-	let r = [];
-	for (let i = 0; i < e.length; i++) {
-		let a = ee(i, e.length, t, G.left, G.right), o = De(e[i].count, n);
-		r.push(`${i === 0 ? "M" : "L"} ${a.toFixed(1)} ${o.toFixed(1)}`);
+//#endregion
+//#region src/pipeline-analytics/widgets/chart-utils.tsx
+function _e(e, t, n, r) {
+	if (n <= t || !(r > 0)) return [];
+	let i = Math.floor(t / r) * r, a = Math.floor(n / r) * r, o = /* @__PURE__ */ new Map();
+	for (let e = i; e <= a; e += r) o.set(e, 0);
+	for (let i of e) {
+		if (i < t || i > n) continue;
+		let e = Math.floor(i / r) * r;
+		o.set(e, (o.get(e) ?? 0) + 1);
 	}
-	return r.join(" ");
+	return [...o.entries()].toSorted(([e], [t]) => e - t).map(([e, t]) => ({
+		bucketStart: e,
+		count: t
+	}));
 }
-function ke(e) {
-	let t = [];
-	for (let n = 0; n < 4; n++) {
-		let r = n / 3, i = Math.round(e * r), a = W - G.top - G.bottom;
-		t.push({
-			y: G.top + (1 - r) * a,
-			label: `${i}`
-		});
-	}
-	return t;
+function U(e, t) {
+	let n = (e) => {
+		let t = new Date(e);
+		return `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
+	};
+	return `${n(e)}–${n(t)}`;
 }
-function Ae(e) {
-	let t = new Date(e);
-	return `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
+function W(e) {
+	return e >= 60 * 6e4 ? `${String(Math.round(e / 6e4 / 60))}h` : e >= 6e4 ? `${String(Math.round(e / 6e4))}m` : `${String(Math.round(e / 1e3))}s`;
 }
 //#endregion
 //#region src/pipeline-analytics/widgets/MotionHistoryChart.tsx
-var je = {
+var G = {
 	"1h": {
 		label: "1 h",
 		windowMs: 60 * 6e4,
@@ -1150,208 +789,93 @@ var je = {
 		bucketMs: 15 * 6e4,
 		pollIntervalMs: 3e5
 	}
-}, Me = [
+}, ve = [
 	{
 		id: "1h",
-		label: je["1h"].label
+		label: G["1h"].label
 	},
 	{
 		id: "6h",
-		label: je["6h"].label
+		label: G["6h"].label
 	},
 	{
 		id: "24h",
-		label: je["24h"].label
+		label: G["24h"].label
 	}
-], Ne = 5e3, q = 140, J = {
-	top: 14,
-	right: 12,
-	bottom: 24,
-	left: 32
-};
-function Pe({ deviceId: n }) {
-	let { t: i } = P(), a = m(l().trpcClient, n), [s, c] = r("1h"), u = je[s], [d, f] = I(), p = ie(), v = e(null), y = (e) => {
-		let t = v.current;
-		if (!t) return e;
-		let n = t.getBoundingClientRect();
-		return n.width === 0 ? e : e / f * n.width;
-	}, b = o({
+], ye = (e) => e in G, be = 5e3, xe = 120;
+function Se({ deviceId: n }) {
+	let { t: i } = F(), a = t(), c = y(s().trpcClient, n), [l, u] = r("1h"), d = G[l], p = o({
 		queryKey: [
 			"pipeline-analytics",
 			n,
 			"motionEvents",
-			s
+			l
 		],
 		queryFn: async () => {
-			if (!a) return [];
-			let e = Date.now() - u.windowMs;
-			return await a.pipelineAnalytics?.getMotionEvents({
+			if (!c) return [];
+			let e = Date.now() - d.windowMs;
+			return await c.pipelineAnalytics?.getMotionEvents({
 				since: e,
-				limit: Ne
+				limit: be
 			}) ?? [];
 		},
-		enabled: !!a,
-		refetchInterval: u.pollIntervalMs,
-		staleTime: Math.max(1e3, u.pollIntervalMs / 2)
-	}), x = b.data ?? [], S = b.dataUpdatedAt > 0 ? b.dataUpdatedAt : Date.now(), C = S - u.windowMs, w = t(() => Fe(x, C, S, u.bucketMs), [
-		x,
-		C,
-		S,
-		u.bucketMs
-	]), T = t(() => {
-		if (w.length === 0) return 1;
-		let e = w.reduce((e, t) => Math.max(e, t.count), 0);
-		return Math.max(1, Math.ceil(e * 1.15));
-	}, [w]), E = t(() => te(C, S, f, J.left, J.right, 5), [
-		C,
-		S,
-		f
-	]), O = t(() => Le(T), [T]), k = x.length;
-	return /* @__PURE__ */ g("div", {
-		className: "rounded-lg border border-border bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ g("div", {
-			className: "border-b border-border px-4 py-2 flex items-center justify-between gap-3",
-			children: [/* @__PURE__ */ g("div", {
-				className: "flex items-center gap-1.5",
-				children: [/* @__PURE__ */ h(D, { className: "h-3.5 w-3.5 text-foreground-subtle" }), /* @__PURE__ */ h("h2", {
-					className: "text-xs font-semibold text-foreground uppercase tracking-wider",
-					children: i("motionHistory.title")
-				})]
-			}), /* @__PURE__ */ h(F, {
-				presets: Me,
-				value: s,
-				onChange: c
-			})]
-		}), /* @__PURE__ */ g("div", {
-			ref: d,
-			className: "p-3 min-w-0 relative",
-			children: [k === 0 ? /* @__PURE__ */ h("div", {
-				className: "flex items-center justify-center h-32 text-[11px] text-foreground-subtle italic",
-				children: b.isLoading ? i("common.loading") : i("motionHistory.empty")
-			}) : f === 0 ? /* @__PURE__ */ h("div", { className: "h-32" }) : /* @__PURE__ */ g(_, { children: [/* @__PURE__ */ g("svg", {
-				ref: v,
-				role: "img",
-				"aria-label": i("motionHistory.ariaLabel"),
-				width: "100%",
-				height: q,
-				viewBox: `0 0 ${f} ${q}`,
-				preserveAspectRatio: "none",
-				className: "block",
-				onMouseLeave: () => p.bindHover(null),
-				children: [
-					O.map(({ y: e, label: t }, n) => /* @__PURE__ */ g("g", { children: [/* @__PURE__ */ h("line", {
-						x1: J.left,
-						x2: f - J.right,
-						y1: e,
-						y2: e,
-						stroke: "currentColor",
-						strokeOpacity: .08,
-						strokeWidth: .5
-					}), /* @__PURE__ */ h("text", {
-						x: J.left - 6,
-						y: e + 3,
-						textAnchor: "end",
-						className: "text-[9px] fill-foreground-subtle",
-						children: t
-					})] }, `y-${n}`)),
-					E.map(({ x: e, label: t }, n) => /* @__PURE__ */ h("text", {
-						x: e,
-						y: q - J.bottom + 12,
-						textAnchor: "middle",
-						className: "text-[9px] fill-foreground-subtle",
-						children: t
-					}, `x-${n}`)),
-					w.map((e, t) => {
-						let { x: n, w: r } = Ie(e.bucketStart, u.bucketMs, C, S, f), a = q - J.top - J.bottom, o = e.count / T * a, s = J.top + (a - o), c = e.bucketStart + u.bucketMs;
-						return /* @__PURE__ */ g("g", { children: [e.count > 0 && /* @__PURE__ */ h("rect", {
-							x: n,
-							y: s,
-							width: Math.max(1, r - 1),
-							height: Math.max(1, o),
-							fill: "currentColor",
-							className: "text-primary",
-							opacity: .85
-						}), /* @__PURE__ */ h("rect", {
-							x: n,
-							y: J.top,
-							width: Math.max(2, r),
-							height: a,
-							fill: "transparent",
-							onMouseEnter: () => {
-								p.bindHover({
-									anchorX: y(n + r / 2),
-									anchorY: s,
-									title: `${Re(e.bucketStart, c)} · ${i("motionHistory.events", { count: e.count })}`,
-									rows: [{
-										label: i("motionHistory.bucket"),
-										value: ze(u.bucketMs)
-									}, {
-										label: i("motionHistory.count"),
-										value: `${e.count}`
-									}]
-								});
-							}
-						})] }, `${e.bucketStart}-${t}`);
-					})
-				]
-			}), /* @__PURE__ */ h(R, {
-				state: p.state,
-				containerWidth: f
-			})] }), k > 0 && /* @__PURE__ */ g("div", {
-				className: "flex items-center justify-between text-[10px] text-foreground-subtle mt-1",
-				children: [/* @__PURE__ */ h("span", { children: i("motionHistory.summary", {
-					count: k,
-					bucket: ze(u.bucketMs)
-				}) }), /* @__PURE__ */ h("span", { children: i("motionHistory.peak", { value: w.reduce((e, t) => Math.max(e, t.count), 0) }) })]
-			})]
-		})]
+		enabled: !!c,
+		refetchInterval: d.pollIntervalMs,
+		staleTime: Math.max(1e3, d.pollIntervalMs / 2)
+	}), m = p.data ?? [], h = p.dataUpdatedAt > 0 ? p.dataUpdatedAt : Date.now(), g = h - d.windowMs, _ = e(() => _e(m.map((e) => e.timestamp), g, h, d.bucketMs).map((e) => ({
+		t: e.bucketStart,
+		values: [e.count]
+	})), [
+		m,
+		g,
+		h,
+		d.bucketMs
+	]), b = e(() => [{
+		id: "motion",
+		label: i("motionHistory.title"),
+		colorIndex: 0
+	}], [i]), C = _.reduce((e, t) => Math.max(e, t.values[0] ?? 0), 0), w = m.length, T = W(d.bucketMs);
+	return /* @__PURE__ */ S(f, {
+		headingId: a,
+		title: i("motionHistory.title"),
+		icon: M,
+		children: /* @__PURE__ */ S("div", {
+			className: "p-3 min-w-0",
+			children: /* @__PURE__ */ S(v, {
+				title: i("motionHistory.barsTitle", { bucket: T }),
+				layers: b,
+				buckets: w === 0 ? [] : _,
+				bucketMs: d.bucketMs,
+				range: {
+					from: g,
+					to: h
+				},
+				height: xe,
+				pending: p.isLoading,
+				emptyMessage: i("motionHistory.empty"),
+				windowToggle: {
+					options: ve,
+					value: l,
+					onChange: (e) => {
+						ye(e) && u(e);
+					},
+					ariaLabel: i("common.timeWindow")
+				},
+				bucketLabel: (e) => `${U(e.t, e.t + d.bucketMs)} · ${i("motionHistory.events", { count: e.values[0] ?? 0 })}`,
+				footer: w > 0 ? /* @__PURE__ */ x("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ S("span", { children: i("motionHistory.summary", {
+						count: w,
+						bucket: T
+					}) }), /* @__PURE__ */ S("span", { children: i("motionHistory.peak", { value: C }) })]
+				}) : void 0
+			})
+		})
 	});
 }
-function Fe(e, t, n, r) {
-	if (n <= t) return [];
-	let i = Math.floor(t / r) * r, a = Math.floor(n / r) * r, o = /* @__PURE__ */ new Map();
-	for (let e = i; e <= a; e += r) o.set(e, 0);
-	for (let i of e) {
-		if (i.timestamp < t || i.timestamp > n) continue;
-		let e = Math.floor(i.timestamp / r) * r;
-		o.set(e, (o.get(e) ?? 0) + 1);
-	}
-	return [...o.entries()].toSorted(([e], [t]) => e - t).map(([e, t]) => ({
-		bucketStart: e,
-		count: t
-	}));
-}
-function Ie(e, t, n, r, i) {
-	let a = Math.max(1, r - n), o = i - J.left - J.right;
-	return {
-		x: J.left + (e - n) / a * o,
-		w: t / a * o
-	};
-}
-function Le(e) {
-	let t = [];
-	for (let n = 0; n < 4; n++) {
-		let r = n / 3, i = Math.round(e * r), a = q - J.top - J.bottom;
-		t.push({
-			y: J.top + (1 - r) * a,
-			label: `${i}`
-		});
-	}
-	return t;
-}
-function Re(e, t) {
-	let n = (e) => {
-		let t = new Date(e);
-		return `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
-	};
-	return `${n(e)}–${n(t)}`;
-}
-function ze(e) {
-	return e >= 60 * 6e4 ? `${Math.round(e / 6e4 / 60)}h` : e >= 6e4 ? `${Math.round(e / 6e4)}m` : `${Math.round(e / 1e3)}s`;
-}
 //#endregion
 //#region src/pipeline-analytics/widgets/DetectionHistoryChart.tsx
-var Be = {
+var K = {
 	"1h": {
 		label: "1 h",
 		windowMs: 60 * 6e4,
@@ -1370,415 +894,281 @@ var Be = {
 		bucketMs: 15 * 6e4,
 		pollIntervalMs: 3e5
 	}
-}, Ve = [
+}, Ce = [
 	{
 		id: "1h",
-		label: Be["1h"].label
+		label: K["1h"].label
 	},
 	{
 		id: "6h",
-		label: Be["6h"].label
+		label: K["6h"].label
 	},
 	{
 		id: "24h",
-		label: Be["24h"].label
+		label: K["24h"].label
 	}
-], He = 5e3, Ue = 4, Y = "__other__", X = "__all__", Z = 160, Q = {
-	top: 14,
-	right: 12,
-	bottom: 24,
-	left: 32
-};
-function We({ deviceId: n }) {
-	let { t: a } = P(), s = m(l().trpcClient, n), [c, u] = r("1h"), [d, f] = r(X), p = Be[c], [v, y] = I(), b = ie(), x = e(null), S = o({
+], we = (e) => e in K, Te = 5e3, Ee = 4, q = "__other__", J = "__all__", De = 140;
+function Oe({ deviceId: n }) {
+	let { t: a } = F(), c = t(), l = y(s().trpcClient, n), [u, d] = r("1h"), [p, m] = r(J), h = K[u], g = o({
 		queryKey: [
 			"pipeline-analytics",
 			n,
 			"objectEvents",
-			c
+			u
 		],
 		queryFn: async () => {
-			if (!s) return [];
-			let e = Date.now() - p.windowMs;
-			return await s.pipelineAnalytics?.getObjectEvents({
+			if (!l) return [];
+			let e = Date.now() - h.windowMs;
+			return await l.pipelineAnalytics?.getObjectEvents({
 				since: e,
-				limit: He
+				limit: Te
 			}) ?? [];
 		},
-		enabled: !!s,
-		refetchInterval: p.pollIntervalMs,
-		staleTime: Math.max(1e3, p.pollIntervalMs / 2)
-	}), C = S.data ?? [], w = t(() => d === X ? C : C.filter((e) => e.className === d), [C, d]), T = S.dataUpdatedAt > 0 ? S.dataUpdatedAt : Date.now(), E = T - p.windowMs, D = t(() => {
+		enabled: !!l,
+		refetchInterval: h.pollIntervalMs,
+		staleTime: Math.max(1e3, h.pollIntervalMs / 2)
+	}), _ = g.data ?? [], C = e(() => p === J ? _ : _.filter((e) => e.className === p), [_, p]), w = g.dataUpdatedAt > 0 ? g.dataUpdatedAt : Date.now(), T = w - h.windowMs, E = e(() => {
 		let e = /* @__PURE__ */ new Set();
-		for (let t of C) e.add(t.className);
-		return d !== X && e.add(d), [...e].toSorted();
-	}, [C, d]);
+		for (let t of _) e.add(t.className);
+		return p !== J && e.add(p), [...e].toSorted();
+	}, [_, p]);
 	i(() => {
-		d !== X && C.length > 0 && !D.includes(d) && f(X);
+		p !== J && _.length > 0 && !E.includes(p) && m(J);
 	}, [
-		d,
-		C,
-		D
+		p,
+		_,
+		E
 	]);
-	let O = t(() => Ge(w, Ue), [w]), A = t(() => Ke(w, E, T, p.bucketMs, O), [
-		w,
-		E,
-		T,
-		p.bucketMs,
-		O
-	]), j = t(() => {
-		if (A.length === 0) return 1;
-		let e = A.reduce((e, t) => Math.max(e, t.total), 0);
-		return Math.max(1, Math.ceil(e * 1.15));
-	}, [A]), M = t(() => te(E, T, y, Q.left, Q.right, 5), [
+	let D = e(() => {
+		let e = ke(C, Ee), t = e.toSorted();
+		return C.some((t) => !e.includes(t.className)) && t.push(q), t;
+	}, [C]), O = e(() => D.map((e) => ({
+		id: e,
+		label: e === q ? a("detectionHistory.other") : e,
+		colorIndex: e === q ? E.length : E.indexOf(e)
+	})), [
+		D,
 		E,
+		a
+	]), k = e(() => Ae(C, T, w, h.bucketMs, D), [
+		C,
 		T,
-		y
-	]), N = t(() => Je(j), [j]), L = t(() => {
-		let e = O.map((e) => e.className);
-		return w.some((e) => !O.some((t) => t.className === e.className)) && e.push(Y), e;
-	}, [w, O]), ee = (e) => {
-		let t = x.current;
-		if (!t) return e;
-		let n = t.getBoundingClientRect();
-		return n.width === 0 ? e : e / y * n.width;
-	};
-	return /* @__PURE__ */ g("div", {
-		className: "rounded-lg border border-border bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ g("div", {
-			className: "border-b border-border px-4 py-2 flex items-center justify-between gap-3",
-			children: [/* @__PURE__ */ g("div", {
-				className: "flex items-center gap-1.5",
-				children: [/* @__PURE__ */ h(k, { className: "h-3.5 w-3.5 text-foreground-subtle" }), /* @__PURE__ */ h("h2", {
-					className: "text-xs font-semibold text-foreground uppercase tracking-wider",
-					children: a("detectionHistory.title")
-				})]
-			}), /* @__PURE__ */ g("div", {
-				className: "flex items-center gap-2",
-				children: [D.length > 0 && /* @__PURE__ */ g("select", {
-					value: d,
-					onChange: (e) => f(e.target.value),
-					className: "text-[10px] px-1.5 py-0.5 rounded border border-border bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary/40",
-					title: a("detectionHistory.filterByClass"),
-					children: [/* @__PURE__ */ h("option", {
-						value: X,
-						children: a("detectionHistory.allClasses")
-					}), D.map((e) => /* @__PURE__ */ h("option", {
-						value: e,
-						children: e
-					}, e))]
-				}), /* @__PURE__ */ h(F, {
-					presets: Ve,
-					value: c,
-					onChange: u
-				})]
-			})]
-		}), /* @__PURE__ */ g("div", {
-			ref: v,
-			className: "p-3 min-w-0 relative",
-			children: [w.length === 0 ? /* @__PURE__ */ h("div", {
-				className: "flex items-center justify-center h-32 text-[11px] text-foreground-subtle italic",
-				children: S.isLoading ? a("common.loading") : a("detectionHistory.empty")
-			}) : y === 0 ? /* @__PURE__ */ h("div", { className: "h-32" }) : /* @__PURE__ */ g(_, { children: [
-				/* @__PURE__ */ g("svg", {
-					ref: x,
-					role: "img",
-					"aria-label": a("detectionHistory.ariaLabel"),
-					width: "100%",
-					height: Z,
-					viewBox: `0 0 ${y} ${Z}`,
-					preserveAspectRatio: "none",
-					className: "block",
-					onMouseLeave: () => b.bindHover(null),
-					children: [
-						N.map(({ y: e, label: t }, n) => /* @__PURE__ */ g("g", { children: [/* @__PURE__ */ h("line", {
-							x1: Q.left,
-							x2: y - Q.right,
-							y1: e,
-							y2: e,
-							stroke: "currentColor",
-							strokeOpacity: .08,
-							strokeWidth: .5
-						}), /* @__PURE__ */ h("text", {
-							x: Q.left - 6,
-							y: e + 3,
-							textAnchor: "end",
-							className: "text-[9px] fill-foreground-subtle",
-							children: t
-						})] }, `y-${n}`)),
-						M.map(({ x: e, label: t }, n) => /* @__PURE__ */ h("text", {
-							x: e,
-							y: Z - Q.bottom + 12,
-							textAnchor: "middle",
-							className: "text-[9px] fill-foreground-subtle",
-							children: t
-						}, `x-${n}`)),
-						A.map((e, t) => {
-							if (e.total === 0) return null;
-							let { x: n, w: r } = qe(e.bucketStart, p.bucketMs, E, T, y), i = Z - Q.top - Q.bottom, o = e.total / j * i, s = Q.top + (i - o), c = 0, l = L.map((t, a) => {
-								let o = e.byClass[t] ?? 0;
-								if (o === 0) return null;
-								let s = o / j * i, l = Q.top + (i - c - s);
-								c += s;
-								let u = t === Y ? "#94a3b8" : re(a);
-								return /* @__PURE__ */ h("rect", {
-									x: n,
-									y: l,
-									width: Math.max(1, r - 1),
-									height: Math.max(1, s),
-									fill: u,
-									opacity: .9
-								}, `${e.bucketStart}-${t}`);
-							}).filter((e) => e !== null), u = e.bucketStart + p.bucketMs;
-							return /* @__PURE__ */ g("g", { children: [l, /* @__PURE__ */ h("rect", {
-								x: n,
-								y: Q.top,
-								width: Math.max(2, r),
-								height: i,
-								fill: "transparent",
-								onMouseEnter: () => {
-									b.bindHover({
-										anchorX: ee(n + r / 2),
-										anchorY: s,
-										title: `${Ye(e.bucketStart, u, p.bucketMs)} · ${a("detectionHistory.detections", { count: e.total })}`,
-										rows: L.map((t, n) => {
-											let r = e.byClass[t] ?? 0;
-											return r === 0 ? null : {
-												label: t === Y ? a("detectionHistory.other") : t,
-												value: `${r}`,
-												colour: t === Y ? "#94a3b8" : re(n)
-											};
-										}).filter((e) => e !== null)
-									});
-								}
-							})] }, `g-${e.bucketStart}-${t}`);
-						})
-					]
-				}),
-				/* @__PURE__ */ h(R, {
-					state: b.state,
-					containerWidth: y
-				}),
-				/* @__PURE__ */ h(Ze, { stackOrder: L })
-			] }), w.length > 0 && /* @__PURE__ */ g("div", {
-				className: "flex items-center justify-between text-[10px] text-foreground-subtle mt-1",
-				children: [/* @__PURE__ */ h("span", { children: a("detectionHistory.summary", {
-					count: w.length,
-					bucket: Xe(p.bucketMs)
-				}) }), /* @__PURE__ */ h("span", { children: a("detectionHistory.peak", { value: A.reduce((e, t) => Math.max(e, t.total), 0) }) })]
-			})]
-		})]
+		w,
+		h.bucketMs,
+		D
+	]), A = k.reduce((e, t) => Math.max(e, t.values.reduce((e, t) => e + (t ?? 0), 0)), 0), j = W(h.bucketMs), M = e(() => [{
+		value: J,
+		label: a("detectionHistory.allClasses")
+	}, ...E.map((e) => ({
+		value: e,
+		label: e
+	}))], [E, a]);
+	return /* @__PURE__ */ S(f, {
+		headingId: c,
+		title: a("detectionHistory.title"),
+		icon: ee,
+		actions: E.length > 0 ? /* @__PURE__ */ S("div", {
+			className: "w-32",
+			children: /* @__PURE__ */ S(b, {
+				value: p,
+				onChange: (e) => m(e.target.value),
+				options: M,
+				"aria-label": a("detectionHistory.filterByClass")
+			})
+		}) : void 0,
+		children: /* @__PURE__ */ S("div", {
+			className: "p-3 min-w-0",
+			children: /* @__PURE__ */ S(v, {
+				title: a("detectionHistory.barsTitle", { bucket: j }),
+				layers: O,
+				buckets: C.length === 0 ? [] : k,
+				bucketMs: h.bucketMs,
+				range: {
+					from: T,
+					to: w
+				},
+				height: De,
+				stacked: !0,
+				pending: g.isLoading,
+				emptyMessage: a("detectionHistory.empty"),
+				windowToggle: {
+					options: Ce,
+					value: u,
+					onChange: (e) => {
+						we(e) && d(e);
+					},
+					ariaLabel: a("common.timeWindow")
+				},
+				bucketLabel: (e) => `${U(e.t, e.t + h.bucketMs)} · ${a("detectionHistory.detections", { count: e.values.reduce((e, t) => e + (t ?? 0), 0) })}`,
+				footer: C.length > 0 ? /* @__PURE__ */ x("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ S("span", { children: a("detectionHistory.summary", {
+						count: C.length,
+						bucket: j
+					}) }), /* @__PURE__ */ S("span", { children: a("detectionHistory.peak", { value: A }) })]
+				}) : void 0
+			})
+		})
 	});
 }
-function Ge(e, t) {
+function ke(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	for (let t of e) n.set(t.className, (n.get(t.className) ?? 0) + 1);
-	return [...n.entries()].toSorted(([, e], [, t]) => t - e).slice(0, t).map(([e, t]) => ({
-		className: e,
-		count: t
-	}));
+	return [...n.entries()].toSorted(([, e], [, t]) => t - e).slice(0, t).map(([e]) => e);
 }
-function Ke(e, t, n, r, i) {
+function Ae(e, t, n, r, i) {
 	if (n <= t) return [];
-	let a = new Set(i.map((e) => e.className)), o = Math.floor(t / r) * r, s = Math.floor(n / r) * r, c = /* @__PURE__ */ new Map();
-	for (let e = o; e <= s; e += r) c.set(e, {
-		total: 0,
-		byClass: {}
-	});
+	let a = Math.floor(t / r) * r, o = Math.floor(n / r) * r, s = new Map(i.map((e, t) => [e, t])), c = s.get(q), l = /* @__PURE__ */ new Map();
+	for (let e = a; e <= o; e += r) l.set(e, i.map(() => 0));
 	for (let i of e) {
 		if (i.timestamp < t || i.timestamp > n) continue;
-		let e = Math.floor(i.timestamp / r) * r, o = c.get(e);
-		if (!o) continue;
-		o.total += 1;
-		let s = a.has(i.className) ? i.className : Y;
-		o.byClass[s] = (o.byClass[s] ?? 0) + 1;
+		let e = l.get(Math.floor(i.timestamp / r) * r), a = s.get(i.className) ?? c;
+		!e || a === void 0 || (e[a] = (e[a] ?? 0) + 1);
 	}
-	return [...c.entries()].toSorted(([e], [t]) => e - t).map(([e, t]) => ({
-		bucketStart: e,
-		total: t.total,
-		byClass: t.byClass
+	return [...l.entries()].toSorted(([e], [t]) => e - t).map(([e, t]) => ({
+		t: e,
+		values: t
 	}));
 }
-function qe(e, t, n, r, i) {
-	let a = Math.max(1, r - n), o = i - Q.left - Q.right;
-	return {
-		x: Q.left + (e - n) / a * o,
-		w: t / a * o
-	};
-}
-function Je(e) {
-	let t = [];
-	for (let n = 0; n < 4; n++) {
-		let r = n / 3, i = Math.round(e * r), a = Z - Q.top - Q.bottom;
-		t.push({
-			y: Q.top + (1 - r) * a,
-			label: `${i}`
-		});
-	}
-	return t;
-}
-function Ye(e, t, n) {
-	let r = (e) => `${String(e.getHours()).padStart(2, "0")}:${String(e.getMinutes()).padStart(2, "0")}`;
-	return `${r(new Date(e))}–${r(new Date(t))}`;
-}
-function Xe(e) {
-	return e >= 60 * 6e4 ? `${Math.round(e / 6e4 / 60)}h` : e >= 6e4 ? `${Math.round(e / 6e4)}m` : `${Math.round(e / 1e3)}s`;
-}
-function Ze({ stackOrder: e }) {
-	let { t } = P();
-	return e.length === 0 ? null : /* @__PURE__ */ h("div", {
-		className: "flex flex-wrap gap-2 mt-2 px-1",
-		children: e.map((e, n) => {
-			let r = e === Y ? "#94a3b8" : re(n), i = e === Y ? t("detectionHistory.other") : e;
-			return /* @__PURE__ */ g("span", {
-				className: "inline-flex items-center gap-1 text-[10px] text-foreground-subtle",
-				children: [/* @__PURE__ */ h("span", {
-					className: "inline-block h-2 w-2 rounded-sm",
-					style: { backgroundColor: r }
-				}), /* @__PURE__ */ h("span", { children: i })]
-			}, e);
-		})
-	});
-}
 //#endregion
 //#region src/pipeline-analytics/widgets/OccupancyPanel.tsx
-function Qe({ dev: e, deviceId: t, title: n, variant: r = "full" }) {
-	let { t: i } = P(), a = n ?? i("occupancy.title"), o = m(l().trpcClient, e === void 0 && t !== void 0 ? t : null), s = e ?? o, c = f(s?.state.zoneAnalytics);
-	return c ? /* @__PURE__ */ h($e, {
+function je({ dev: e, deviceId: t, title: n, variant: r = "full" }) {
+	let { t: i } = F(), a = n ?? i("occupancy.title"), o = y(s().trpcClient, e === void 0 && t !== void 0 ? t : null), c = e ?? o, l = _(c?.state.zoneAnalytics);
+	return l ? /* @__PURE__ */ S(Y, {
 		title: a,
 		variant: r,
-		ts: c.ts,
-		children: /* @__PURE__ */ g("div", {
+		ts: l.ts,
+		children: /* @__PURE__ */ x("div", {
 			className: r === "compact" ? "space-y-2" : "grid grid-cols-1 2xl:grid-cols-3 gap-3",
 			children: [
-				/* @__PURE__ */ h(tt, { frame: c.frame }),
-				/* @__PURE__ */ h(rt, { snapshot: c }),
-				/* @__PURE__ */ h(nt, { unzoned: c.unzoned })
+				/* @__PURE__ */ S(Ne, { frame: l.frame }),
+				/* @__PURE__ */ S(Fe, { snapshot: l }),
+				/* @__PURE__ */ S(Pe, { unzoned: l.unzoned })
 			]
 		})
-	}) : /* @__PURE__ */ h($e, {
+	}) : /* @__PURE__ */ S(Y, {
 		title: a,
 		variant: r,
-		children: /* @__PURE__ */ h(et, { message: i(s ? "occupancy.noData" : "common.resolving") })
+		children: /* @__PURE__ */ S(Me, { message: i(c ? "occupancy.noData" : "common.resolving") })
 	});
 }
-function $e({ title: e, variant: t, ts: n, children: r }) {
-	let { t: i } = P(), a = n ? Math.max(0, Math.floor((Date.now() - n) / 1e3)) : null;
-	return /* @__PURE__ */ g("div", {
+function Y({ title: e, variant: t, ts: n, children: r }) {
+	let { t: i } = F(), a = n ? Math.max(0, Math.floor((Date.now() - n) / 1e3)) : null;
+	return /* @__PURE__ */ x("div", {
 		className: t === "compact" ? "rounded-md border border-border/60 bg-surface/60 p-3" : "rounded-lg border border-border bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: t === "compact" ? "flex items-center justify-between mb-2" : "border-b border-border px-4 py-2 flex items-center justify-between",
-			children: [/* @__PURE__ */ h("h2", {
+			children: [/* @__PURE__ */ S("h2", {
 				className: "text-xs font-semibold text-foreground uppercase tracking-wider",
 				children: e
-			}), a !== null && /* @__PURE__ */ h("span", {
+			}), a !== null && /* @__PURE__ */ S("span", {
 				className: "text-[10px] text-foreground-subtle",
 				children: a === 0 ? i("common.justNow") : i("common.secondsAgo", { seconds: a })
 			})]
-		}), /* @__PURE__ */ h("div", {
+		}), /* @__PURE__ */ S("div", {
 			className: t === "compact" ? "" : "p-3",
 			children: r
 		})]
 	});
 }
-function et({ message: e }) {
-	return /* @__PURE__ */ g("div", {
+function Me({ message: e }) {
+	return /* @__PURE__ */ x("div", {
 		className: "px-4 py-6 flex flex-col items-center text-center text-foreground-subtle",
-		children: [/* @__PURE__ */ h(A, { className: "h-5 w-5 mb-2 opacity-30" }), /* @__PURE__ */ h("p", {
+		children: [/* @__PURE__ */ S(P, { className: "h-5 w-5 mb-2 opacity-30" }), /* @__PURE__ */ S("p", {
 			className: "text-[11px]",
 			children: e
 		})]
 	});
 }
-function tt({ frame: e }) {
-	let { t } = P();
-	return /* @__PURE__ */ h(it, {
-		icon: /* @__PURE__ */ h(O, { className: "h-3.5 w-3.5" }),
+function Ne({ frame: e }) {
+	let { t } = F();
+	return /* @__PURE__ */ S(X, {
+		icon: /* @__PURE__ */ S(N, { className: "h-3.5 w-3.5" }),
 		label: t("occupancy.frameTotal"),
 		total: e.totalObjects,
 		byClass: e.byClass,
 		tone: "default"
 	});
 }
-function nt({ unzoned: e }) {
-	let { t } = P();
-	return /* @__PURE__ */ h(it, {
-		icon: /* @__PURE__ */ h(j, { className: "h-3.5 w-3.5" }),
+function Pe({ unzoned: e }) {
+	let { t } = F();
+	return /* @__PURE__ */ S(X, {
+		icon: /* @__PURE__ */ S(te, { className: "h-3.5 w-3.5" }),
 		label: t("occupancy.outsideZone"),
 		total: e.totalObjects,
 		byClass: e.byClass,
 		tone: "muted"
 	});
 }
-function rt({ snapshot: e }) {
-	let { t } = P();
-	return e.zones.length === 0 ? /* @__PURE__ */ h(it, {
-		icon: /* @__PURE__ */ h(A, { className: "h-3.5 w-3.5" }),
+function Fe({ snapshot: e }) {
+	let { t } = F();
+	return e.zones.length === 0 ? /* @__PURE__ */ S(X, {
+		icon: /* @__PURE__ */ S(P, { className: "h-3.5 w-3.5" }),
 		label: t("occupancy.perZone"),
 		total: 0,
 		byClass: {},
 		tone: "muted",
 		emptyMessage: t("occupancy.noZones")
-	}) : /* @__PURE__ */ g("div", {
+	}) : /* @__PURE__ */ x("div", {
 		className: "rounded-md border border-border/60 bg-background/40",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "px-3 py-1.5 border-b border-border/40 flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
 			children: [
-				/* @__PURE__ */ h(A, { className: "h-3.5 w-3.5" }),
-				/* @__PURE__ */ h("span", { children: t("occupancy.perZone") }),
-				/* @__PURE__ */ h("span", {
+				/* @__PURE__ */ S(P, { className: "h-3.5 w-3.5" }),
+				/* @__PURE__ */ S("span", { children: t("occupancy.perZone") }),
+				/* @__PURE__ */ S("span", {
 					className: "ml-auto text-[10px] normal-case tracking-normal",
 					children: e.zones.length
 				})
 			]
-		}), /* @__PURE__ */ h("div", {
+		}), /* @__PURE__ */ S("div", {
 			className: "divide-y divide-border/30",
-			children: e.zones.map((e) => /* @__PURE__ */ g("div", {
+			children: e.zones.map((e) => /* @__PURE__ */ x("div", {
 				className: "px-3 py-2",
-				children: [/* @__PURE__ */ g("div", {
+				children: [/* @__PURE__ */ x("div", {
 					className: "flex items-center justify-between mb-1",
-					children: [/* @__PURE__ */ h("span", {
+					children: [/* @__PURE__ */ S("span", {
 						className: "text-xs font-medium text-foreground truncate",
 						children: e.zoneName
-					}), /* @__PURE__ */ h("span", {
+					}), /* @__PURE__ */ S("span", {
 						className: "rounded-full px-2 py-0.5 text-[10px] font-medium bg-foreground-subtle/10 text-foreground-subtle border border-border",
 						children: e.totalObjects
 					})]
-				}), /* @__PURE__ */ h(at, { byClass: e.byClass })]
+				}), /* @__PURE__ */ S(Z, { byClass: e.byClass })]
 			}, e.zoneId))
 		})]
 	});
 }
-function it({ icon: e, label: t, total: n, byClass: r, tone: i, emptyMessage: a }) {
-	let { t: o } = P(), s = Object.keys(r).length;
-	return /* @__PURE__ */ g("div", {
+function X({ icon: e, label: t, total: n, byClass: r, tone: i, emptyMessage: a }) {
+	let { t: o } = F(), s = Object.keys(r).length;
+	return /* @__PURE__ */ x("div", {
 		className: i === "muted" ? "rounded-md border border-border/40 bg-background/20 px-3 py-2" : "rounded-md border border-border/60 bg-background/40 px-3 py-2",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "flex items-center gap-1.5 mb-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
 			children: [
 				e,
-				/* @__PURE__ */ h("span", { children: t }),
-				/* @__PURE__ */ h("span", {
+				/* @__PURE__ */ S("span", { children: t }),
+				/* @__PURE__ */ S("span", {
 					className: "ml-auto text-base font-semibold text-foreground tabular-nums normal-case tracking-normal",
 					children: n
 				})
 			]
-		}), s === 0 ? /* @__PURE__ */ h("span", {
+		}), s === 0 ? /* @__PURE__ */ S("span", {
 			className: "text-[10px] text-foreground-subtle italic",
 			children: a ?? o("occupancy.noObjects")
-		}) : /* @__PURE__ */ h(at, { byClass: r })]
+		}) : /* @__PURE__ */ S(Z, { byClass: r })]
 	});
 }
-function at({ byClass: e }) {
-	let { t: n } = P(), r = t(() => Object.entries(e).sort(([, e], [, t]) => t - e), [e]);
-	return r.length === 0 ? /* @__PURE__ */ h("span", {
+function Z({ byClass: t }) {
+	let { t: n } = F(), r = e(() => Object.entries(t).sort(([, e], [, t]) => t - e), [t]);
+	return r.length === 0 ? /* @__PURE__ */ S("span", {
 		className: "text-[10px] text-foreground-subtle italic",
 		children: n("occupancy.noObjects")
-	}) : /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ S("div", {
 		className: "flex flex-wrap gap-1",
-		children: r.map(([e, t]) => /* @__PURE__ */ g("span", {
+		children: r.map(([e, t]) => /* @__PURE__ */ x("span", {
 			className: "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium bg-primary/10 text-primary border border-primary/20",
-			children: [/* @__PURE__ */ h("span", { children: e }), /* @__PURE__ */ h("span", {
+			children: [/* @__PURE__ */ S("span", { children: e }), /* @__PURE__ */ S("span", {
 				className: "tabular-nums opacity-80",
 				children: t
 			})]
@@ -1787,39 +1177,28 @@ function at({ byClass: e }) {
 }
 //#endregion
 //#region src/pipeline-analytics/widgets/LiveStatsTab.tsx
-function ot({ deviceId: e }) {
-	return /* @__PURE__ */ g("div", {
-		className: d,
+function Q({ deviceId: e }) {
+	return /* @__PURE__ */ x("div", {
+		className: c,
 		children: [
-			/* @__PURE__ */ g("div", {
-				className: `grid ${s}`,
+			/* @__PURE__ */ x("div", {
+				className: `grid ${h}`,
 				style: { gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 340px), 1fr))" },
-				children: [/* @__PURE__ */ h(p, {
+				children: [/* @__PURE__ */ S(u, {
 					widgetId: "pipeline-analytics/live-occupancy-panel",
 					host: "device-tab",
 					deviceId: e
-				}), /* @__PURE__ */ h(p, {
+				}), /* @__PURE__ */ S(u, {
 					widgetId: "pipeline-analytics/audio-metrics-panel",
 					host: "device-tab",
 					deviceId: e
 				})]
 			}),
-			/* @__PURE__ */ h(p, {
-				widgetId: "pipeline-analytics/audio-history-chart",
-				host: "device-tab",
-				deviceId: e
-			}),
-			/* @__PURE__ */ h(p, {
-				widgetId: "pipeline-analytics/occupancy-history-chart",
-				host: "device-tab",
-				deviceId: e
+			/* @__PURE__ */ S(d, {
+				deviceId: e,
+				fixedWindow: "24h"
 			}),
-			/* @__PURE__ */ h(p, {
-				widgetId: "pipeline-analytics/motion-history-chart",
-				host: "device-tab",
-				deviceId: e
-			}),
-			/* @__PURE__ */ h(p, {
+			/* @__PURE__ */ S(u, {
 				widgetId: "pipeline-analytics/detection-history-chart",
 				host: "device-tab",
 				deviceId: e
@@ -1830,41 +1209,41 @@ function ot({ deviceId: e }) {
 //#endregion
 //#region src/pipeline-analytics/widgets/index.tsx
 function $({ name: e }) {
-	let { t } = P();
-	return /* @__PURE__ */ h("div", {
+	let { t } = F();
+	return /* @__PURE__ */ S("div", {
 		className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning",
 		children: t("missingDevice", { name: e })
 	});
 }
-function st(e) {
-	return e.deviceId === void 0 ? /* @__PURE__ */ h($, { name: "AudioHistoryChart" }) : /* @__PURE__ */ h(ce, { deviceId: e.deviceId });
+function Ie(e) {
+	return e.deviceId === void 0 ? /* @__PURE__ */ S($, { name: "AudioHistoryChart" }) : /* @__PURE__ */ S(se, { deviceId: e.deviceId });
 }
-function ct(e) {
-	return e.deviceId === void 0 ? /* @__PURE__ */ h($, { name: "AudioMetricsPanel" }) : /* @__PURE__ */ h(ve, { deviceId: e.deviceId });
+function Le(e) {
+	return e.deviceId === void 0 ? /* @__PURE__ */ S($, { name: "AudioMetricsPanel" }) : /* @__PURE__ */ S(ce, { deviceId: e.deviceId });
 }
-function lt(e) {
-	return e.deviceId === void 0 ? /* @__PURE__ */ h($, { name: "OccupancyHistoryChart" }) : /* @__PURE__ */ h(Ee, { deviceId: e.deviceId });
+function Re(e) {
+	return e.deviceId === void 0 ? /* @__PURE__ */ S($, { name: "OccupancyHistoryChart" }) : /* @__PURE__ */ S(ge, { deviceId: e.deviceId });
 }
-function ut(e) {
-	return e.deviceId === void 0 ? /* @__PURE__ */ h($, { name: "MotionHistoryChart" }) : /* @__PURE__ */ h(Pe, { deviceId: e.deviceId });
+function ze(e) {
+	return e.deviceId === void 0 ? /* @__PURE__ */ S($, { name: "MotionHistoryChart" }) : /* @__PURE__ */ S(Se, { deviceId: e.deviceId });
 }
-function dt(e) {
-	return e.deviceId === void 0 ? /* @__PURE__ */ h($, { name: "DetectionHistoryChart" }) : /* @__PURE__ */ h(We, { deviceId: e.deviceId });
+function Be(e) {
+	return e.deviceId === void 0 ? /* @__PURE__ */ S($, { name: "DetectionHistoryChart" }) : /* @__PURE__ */ S(Oe, { deviceId: e.deviceId });
 }
-function ft(e) {
-	return e.deviceId === void 0 ? /* @__PURE__ */ h($, { name: "LiveOccupancyPanel" }) : /* @__PURE__ */ h(Qe, { deviceId: e.deviceId });
+function Ve(e) {
+	return e.deviceId === void 0 ? /* @__PURE__ */ S($, { name: "LiveOccupancyPanel" }) : /* @__PURE__ */ S(je, { deviceId: e.deviceId });
 }
-function pt(e) {
-	return e.deviceId === void 0 ? /* @__PURE__ */ h($, { name: "LiveStats" }) : /* @__PURE__ */ h(ot, { deviceId: e.deviceId });
+function He(e) {
+	return e.deviceId === void 0 ? /* @__PURE__ */ S($, { name: "LiveStats" }) : /* @__PURE__ */ S(Q, { deviceId: e.deviceId });
 }
-var mt = {
-	"audio-history-chart": st,
-	"audio-metrics-panel": ct,
-	"occupancy-history-chart": lt,
-	"motion-history-chart": ut,
-	"detection-history-chart": dt,
-	"live-occupancy-panel": ft,
-	"live-stats": pt
+var Ue = {
+	"audio-history-chart": Ie,
+	"audio-metrics-panel": Le,
+	"occupancy-history-chart": Re,
+	"motion-history-chart": ze,
+	"detection-history-chart": Be,
+	"live-occupancy-panel": Ve,
+	"live-stats": He
 };
 //#endregion
-export { mt as default };
+export { Ue as default };