@camstack/addon-pipeline-analytics 0.1.1

package/dist/_stub.js

@@ -0,0 +1,1397 @@
+import { _ as r, a as i, b as ae } from "./__mfe_internal__addon_pipeline_analytics_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.mjs-BsyrX6NO.mjs";
+import { a as Ie, b as fe, c as K, d as H, e as ge, f as N } from "./__mfe_internal__addon_pipeline_analytics_widgets__loadShare__react__loadShare__.mjs-DuO9h7li.mjs";
+import { _ as le } from "./__mfe_internal__addon_pipeline_analytics_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.mjs-DoWbefqS.mjs";
+import { _ as z, a as Q, b as Be, c as ye } from "./__mfe_internal__addon_pipeline_analytics_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.mjs-D0mniK1l.mjs";
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Pe = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ze = (e) => e.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (t, o, n) => n ? n.toUpperCase() : o.toLowerCase()
+), Ne = (e) => {
+  const t = ze(e);
+  return t.charAt(0).toUpperCase() + t.slice(1);
+}, Ae = (...e) => e.filter((t, o, n) => !!t && t.trim() !== "" && n.indexOf(t) === o).join(" ").trim(), Xe = (e) => {
+  for (const t in e)
+    if (t.startsWith("aria-") || t === "role" || t === "title")
+      return !0;
+};
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var Ye = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const qe = Ie(
+  ({
+    color: e = "currentColor",
+    size: t = 24,
+    strokeWidth: o = 2,
+    absoluteStrokeWidth: n,
+    className: a = "",
+    children: s,
+    iconNode: d,
+    ...l
+  }, f) => fe(
+    "svg",
+    {
+      ref: f,
+      ...Ye,
+      width: t,
+      height: t,
+      stroke: e,
+      strokeWidth: n ? Number(o) * 24 / Number(t) : o,
+      className: Ae("lucide", a),
+      ...!s && !Xe(l) && { "aria-hidden": "true" },
+      ...l
+    },
+    [
+      ...d.map(([u, k]) => fe(u, k)),
+      ...Array.isArray(s) ? s : [s]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const W = (e, t) => {
+  const o = Ie(
+    ({ className: n, ...a }, s) => fe(qe, {
+      ref: s,
+      iconNode: t,
+      className: Ae(
+        `lucide-${Pe(Ne(e))}`,
+        `lucide-${e}`,
+        n
+      ),
+      ...a
+    })
+  );
+  return o.displayName = Ne(e), o;
+};
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ge = [
+  [
+    "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"
+    }
+  ]
+], Z = W("activity", Ge);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ue = [
+  [
+    "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"
+    }
+  ],
+  ["path", { d: "m7 16.5-4.74-2.85", key: "1o9zyk" }],
+  ["path", { d: "m7 16.5 5-3", key: "va8pkn" }],
+  ["path", { d: "M7 16.5v5.17", key: "jnp8gn" }],
+  [
+    "path",
+    {
+      d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z",
+      key: "8zsnat"
+    }
+  ],
+  ["path", { d: "m17 16.5-5-3", key: "8arw3v" }],
+  ["path", { d: "m17 16.5 4.74-2.85", key: "8rfmw" }],
+  ["path", { d: "M17 16.5v5.17", key: "k6z78m" }],
+  [
+    "path",
+    {
+      d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z",
+      key: "1xygjf"
+    }
+  ],
+  ["path", { d: "M12 8 7.26 5.15", key: "1vbdud" }],
+  ["path", { d: "m12 8 4.74-2.85", key: "3rx089" }],
+  ["path", { d: "M12 13.5V8", key: "1io7kd" }]
+], Ve = W("boxes", Ue);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ze = [
+  [
+    "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", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+], Ke = W("eye", Ze);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Qe = [
+  [
+    "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"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+      key: "1wduqc"
+    }
+  ],
+  [
+    "path",
+    {
+      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"
+    }
+  ]
+], re = W("layers", Qe);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Je = [
+  ["path", { d: "M12.75 7.09a3 3 0 0 1 2.16 2.16", key: "1d4wjd" }],
+  [
+    "path",
+    {
+      d: "M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568",
+      key: "12yil7"
+    }
+  ],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }],
+  ["path", { d: "M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533", key: "lhrkcz" }],
+  ["path", { d: "M9.13 9.13a3 3 0 0 0 3.74 3.74", key: "13wojd" }]
+], et = W("map-pin-off", Je);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const tt = [
+  ["line", { x1: "2", x2: "22", y1: "2", y2: "22", key: "a6p6uj" }],
+  ["path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2", key: "80xlxr" }],
+  ["path", { d: "M5 10v2a7 7 0 0 0 12 5", key: "p2k8kg" }],
+  ["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
+  ["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }],
+  ["line", { x1: "12", x2: "12", y1: "19", y2: "22", key: "x3vr5v" }]
+], nt = W("mic-off", tt);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const rt = [
+  ["path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z", key: "131961" }],
+  ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
+  ["line", { x1: "12", x2: "12", y1: "19", y2: "22", key: "x3vr5v" }]
+], ot = W("mic", rt);
+function ie({
+  presets: e,
+  value: t,
+  onChange: o
+}) {
+  return /* @__PURE__ */ r("div", { className: "flex items-center gap-1 border border-border rounded-md p-0.5 bg-background", children: e.map(({ id: n, label: a }) => /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      onClick: () => o(n),
+      className: `px-2 py-0.5 rounded text-[10px] font-medium transition-colors ${t === n ? "bg-primary/10 text-primary" : "text-foreground-subtle hover:text-foreground"}`,
+      children: a
+    },
+    n
+  )) });
+}
+function ce(e = 0) {
+  const t = K(null), [o, n] = H(0);
+  return ge(() => {
+    const a = t.current;
+    if (!a) return;
+    const s = (l) => n(Math.max(e, Math.floor(l)));
+    s(a.clientWidth);
+    const d = new ResizeObserver((l) => {
+      const f = l[0];
+      f && s(f.contentRect.width);
+    });
+    return d.observe(a), () => d.disconnect();
+  }, [e]), [t, o];
+}
+function st(e, t) {
+  const o = new Date(e), n = String(o.getHours()).padStart(2, "0"), a = String(o.getMinutes()).padStart(2, "0");
+  if (t <= 1440 * 60 * 1e3) return `${n}:${a}`;
+  const s = String(o.getDate()).padStart(2, "0"), d = String(o.getMonth() + 1).padStart(2, "0");
+  return `${s}/${d} ${n}:${a}`;
+}
+function Fe(e, t, o, n, a) {
+  if (t <= 1) return n;
+  const s = o - n - a;
+  return n + e / (t - 1) * s;
+}
+function ve(e, t, o, n, a, s) {
+  if (t <= e) return [];
+  const d = t - e, l = [], f = o - n - a;
+  for (let u = 0; u < s; u++) {
+    const k = u / Math.max(1, s - 1), $ = e + d * k;
+    l.push({
+      x: n + k * f,
+      label: st($, d)
+    });
+  }
+  return l;
+}
+const Me = [
+  "#3b82f6",
+  // blue-500
+  "#a855f7",
+  // purple-500
+  "#10b981",
+  // emerald-500
+  "#f59e0b",
+  // amber-500
+  "#ec4899",
+  // pink-500
+  "#14b8a6",
+  // teal-500
+  "#6366f1",
+  // indigo-500
+  "#ef4444"
+  // red-500
+];
+function pe(e) {
+  return Me[e % Me.length] ?? "#64748b";
+}
+function de() {
+  const [e, t] = H(null);
+  return { state: e, bindHover: t };
+}
+function ue({ state: e, containerWidth: t }) {
+  if (!e) return null;
+  const n = 220 / 2, a = n + 4, s = Math.max(a, t - n - 4), d = Math.max(a, Math.min(s, e.anchorX)), l = e.anchorX - d;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      role: "tooltip",
+      style: {
+        position: "absolute",
+        left: d,
+        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__ */ r("div", { className: "font-semibold mb-1 truncate", children: e.title }),
+        /* @__PURE__ */ r("div", { className: "space-y-0.5", children: e.rows.map((f, u) => /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ i("span", { className: "flex items-center gap-1 text-foreground-subtle truncate", children: [
+            f.colour && /* @__PURE__ */ r("span", { className: "inline-block h-1.5 w-1.5 rounded-sm flex-shrink-0", style: { backgroundColor: f.colour } }),
+            /* @__PURE__ */ r("span", { className: "truncate", children: f.label })
+          ] }),
+          /* @__PURE__ */ r("span", { className: "tabular-nums", children: f.value })
+        ] }, u)) }),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": !0,
+            style: { left: `calc(50% + ${l}px)` },
+            className: "absolute -bottom-1 -translate-x-1/2 h-2 w-2 rotate-45 bg-surface border-r border-b border-border"
+          }
+        )
+      ]
+    }
+  );
+}
+const J = {
+  "5m": { label: "5 min", windowSec: 300, sampleEveryMs: 1e3, pollIntervalMs: 5e3 },
+  "1h": { label: "1 h", windowSec: 3600, sampleEveryMs: 5e3, pollIntervalMs: 3e4 },
+  "24h": { label: "24 h", windowSec: 1440 * 60, sampleEveryMs: 6e4, pollIntervalMs: 3e5 }
+}, at = [
+  { id: "5m", label: J["5m"].label },
+  { id: "1h", label: J["1h"].label },
+  { id: "24h", label: J["24h"].label }
+], G = 140, S = { top: 16, right: 12, bottom: 24, left: 38 }, lt = {
+  speech: "#3b82f6",
+  music: "#a855f7",
+  dog_bark: "#ec4899",
+  glass_break: "#f43f5e",
+  alarm: "#f59e0b",
+  baby_cry: "#10b981"
+};
+function $e(e) {
+  return e ? lt[e.toLowerCase()] ?? "#6366f1" : "#71717a";
+}
+function it({ deviceId: e }) {
+  const t = z(), o = Q(t.trpcClient, e), [n, a] = H("5m"), s = J[n], [d, l] = ce(), f = de(), u = K(null), k = (m) => {
+    const h = u.current;
+    if (!h) return m;
+    const g = h.getBoundingClientRect();
+    return g.width === 0 ? m : m / l * g.width;
+  }, $ = le({
+    queryKey: ["audio-metrics", e, "history", n],
+    queryFn: async () => o ? await o.audioMetrics?.getHistory({
+      windowSec: s.windowSec,
+      sampleEveryMs: s.sampleEveryMs
+    }) ?? null : null,
+    enabled: !!o,
+    refetchInterval: s.pollIntervalMs,
+    staleTime: Math.max(1e3, s.pollIntervalMs / 2)
+  }), F = $.data, b = F?.points ?? [], x = N(() => ut(b), [b]), C = N(() => ct(b, l, x), [b, l, x]), y = N(() => dt(b, l, x), [b, l, x]), L = N(() => ht(x), [x]), D = N(() => mt(b, l), [b, l]);
+  return /* @__PURE__ */ i("div", { className: "rounded-lg border border-border bg-surface overflow-hidden", children: [
+    /* @__PURE__ */ i("div", { className: "border-b border-border px-4 py-2 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ r(Z, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+        /* @__PURE__ */ r("h2", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: "Audio Level History" })
+      ] }),
+      /* @__PURE__ */ r(ie, { presets: at, value: n, onChange: a })
+    ] }),
+    /* @__PURE__ */ i("div", { ref: d, className: "p-3 min-w-0 relative", children: [
+      b.length === 0 ? /* @__PURE__ */ r("div", { className: "flex items-center justify-center h-32 text-[11px] text-foreground-subtle italic", children: $.isLoading ? "Loading…" : "No audio history yet — analytics pipeline must be active." }) : l === 0 ? /* @__PURE__ */ r("div", { className: "h-32" }) : /* @__PURE__ */ i(ae, { children: [
+        /* @__PURE__ */ i(
+          "svg",
+          {
+            ref: u,
+            role: "img",
+            "aria-label": "Audio dBFS history",
+            width: "100%",
+            height: G,
+            viewBox: `0 0 ${l} ${G}`,
+            preserveAspectRatio: "none",
+            className: "block",
+            onMouseLeave: () => f.bindHover(null),
+            children: [
+              L.map(({ y: m, label: h }, g) => /* @__PURE__ */ i("g", { children: [
+                /* @__PURE__ */ r("line", { x1: S.left, x2: l - S.right, y1: m, y2: m, stroke: "currentColor", strokeOpacity: 0.08, strokeWidth: 0.5 }),
+                /* @__PURE__ */ r("text", { x: S.left - 6, y: m + 3, textAnchor: "end", className: "text-[9px] fill-foreground-subtle", children: h })
+              ] }, `y-${g}`)),
+              D.map(({ x: m, label: h }, g) => /* @__PURE__ */ r("text", { x: m, y: G - S.bottom + 12, textAnchor: "middle", className: "text-[9px] fill-foreground-subtle", children: h }, `x-${g}`)),
+              y && /* @__PURE__ */ r("path", { d: y, fill: "none", stroke: "currentColor", strokeOpacity: 0.25, strokeWidth: 1, strokeDasharray: "3 2" }),
+              C && /* @__PURE__ */ r("path", { d: C, fill: "none", stroke: "currentColor", className: "text-primary", strokeWidth: 1.5 }),
+              b.map((m, h) => {
+                if (m.topClass === null) return null;
+                const g = oe(h, b.length, l), _ = be(m.dbfs, x);
+                return /* @__PURE__ */ r(
+                  "circle",
+                  {
+                    cx: g,
+                    cy: _,
+                    r: 3,
+                    fill: $e(m.topClass),
+                    stroke: "#000",
+                    strokeOpacity: 0.3,
+                    strokeWidth: 0.5
+                  },
+                  `dot-${h}`
+                );
+              }),
+              b.map((m, h) => {
+                const g = oe(h, b.length, l), _ = be(m.dbfs, x), p = G - S.top - S.bottom, v = b.length > 1 ? (l - S.left - S.right) / (b.length - 1) : 24;
+                return /* @__PURE__ */ r(
+                  "rect",
+                  {
+                    x: g - v / 2,
+                    y: S.top,
+                    width: Math.max(2, v),
+                    height: p,
+                    fill: "transparent",
+                    onMouseEnter: () => {
+                      f.bindHover({
+                        anchorX: k(g),
+                        anchorY: _,
+                        title: `${Te(m.ts)} · ${m.dbfs?.toFixed(1) ?? "—"} dB`,
+                        rows: [
+                          { label: "peak (window)", value: `${m.peakDbfs.toFixed(1)} dB` },
+                          { label: "avg (window)", value: `${m.avgDbfs.toFixed(1)} dB` },
+                          ...m.topClass !== null ? [{
+                            label: m.topClass,
+                            value: m.topScore != null ? `${(m.topScore * 100).toFixed(0)}%` : "—",
+                            colour: $e(m.topClass)
+                          }] : []
+                        ]
+                      });
+                    }
+                  },
+                  `hit-${h}`
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(ue, { state: f.state, containerWidth: l })
+      ] }),
+      b.length > 0 && /* @__PURE__ */ i("div", { className: "flex items-center justify-between text-[10px] text-foreground-subtle mt-1", children: [
+        /* @__PURE__ */ i("span", { children: [
+          b.length,
+          " samples · ~",
+          Math.round((F?.effectiveSampleEveryMs ?? s.sampleEveryMs) / 1e3),
+          "s spacing"
+        ] }),
+        /* @__PURE__ */ i("span", { children: [
+          "peak ",
+          b.reduce((m, h) => Math.max(m, h.peakDbfs), -1 / 0).toFixed(1),
+          " dB"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function oe(e, t, o) {
+  if (t <= 1) return S.left;
+  const n = o - S.left - S.right;
+  return S.left + e / (t - 1) * n;
+}
+function be(e, t) {
+  return e === null || !Number.isFinite(e) ? se(t.min, t) : se(Math.max(t.min, Math.min(t.max, e)), t);
+}
+function se(e, t) {
+  const o = G - S.top - S.bottom, n = Math.max(1, t.max - t.min), a = (e - t.min) / n;
+  return S.top + (1 - a) * o;
+}
+function ct(e, t, o) {
+  if (e.length === 0) return null;
+  const n = [];
+  for (let a = 0; a < e.length; a++) {
+    const s = oe(a, e.length, t), d = be(e[a].dbfs, o);
+    n.push(`${a === 0 ? "M" : "L"} ${s.toFixed(1)} ${d.toFixed(1)}`);
+  }
+  return n.join(" ");
+}
+function dt(e, t, o) {
+  if (e.length === 0) return null;
+  const n = [];
+  for (let a = 0; a < e.length; a++) {
+    const s = oe(a, e.length, t), d = se(Math.max(o.min, Math.min(o.max, e[a].peakDbfs)), o);
+    n.push(`${a === 0 ? "M" : "L"} ${s.toFixed(1)} ${d.toFixed(1)}`);
+  }
+  return n.join(" ");
+}
+function ut(e) {
+  if (e.length === 0) return { min: -80, max: -40 };
+  let t = Number.POSITIVE_INFINITY, o = Number.NEGATIVE_INFINITY;
+  for (const s of e)
+    s.dbfs !== null && Number.isFinite(s.dbfs) && (t = Math.min(t, s.dbfs), o = Math.max(o, s.dbfs)), Number.isFinite(s.peakDbfs) && (t = Math.min(t, s.peakDbfs), o = Math.max(o, s.peakDbfs));
+  if (!Number.isFinite(t) || !Number.isFinite(o)) return { min: -80, max: -40 };
+  let n = Math.max(-100, Math.floor(t - 1)), a = Math.min(0, Math.ceil(o));
+  return a - n < 5 && (n = Math.max(-100, a - 5)), { min: n, max: a };
+}
+function ht(e) {
+  const t = [];
+  for (let o = 0; o < 4; o++) {
+    const n = o / 3, a = e.min + (e.max - e.min) * n;
+    t.push({
+      y: se(a, e),
+      label: `${Math.round(a)}`
+    });
+  }
+  return t;
+}
+function mt(e, t) {
+  if (e.length === 0) return [];
+  const o = e[0], n = e[e.length - 1], a = [], s = Math.min(5, e.length);
+  for (let d = 0; d < s; d++) {
+    const l = d / Math.max(1, s - 1), f = o.ts + (n.ts - o.ts) * l;
+    a.push({
+      x: S.left + l * (t - S.left - S.right),
+      label: Te(f)
+    });
+  }
+  return a;
+}
+function Te(e) {
+  const t = new Date(e), o = String(t.getHours()).padStart(2, "0"), n = String(t.getMinutes()).padStart(2, "0");
+  return `${o}:${n}`;
+}
+function xe(e) {
+  return !Number.isFinite(e) || e <= 0 ? 60 : e > 600 ? Math.round(e / 1e3) : Math.round(e);
+}
+function ft({
+  dev: e,
+  deviceId: t,
+  title: o = "Audio Metrics",
+  variant: n = "full"
+}) {
+  const a = z(), s = Be(
+    a.trpcClient,
+    e === void 0 && t !== void 0 ? t : null,
+    (f) => f.audioMetrics
+  ), d = ye(
+    e ? e.state.audioMetrics : void 0
+  ), l = e !== void 0 ? d : s;
+  return l ? /* @__PURE__ */ r(Ce, { title: o, variant: n, ts: l.ts, children: /* @__PURE__ */ i("div", { className: n === "compact" ? "space-y-2" : "grid grid-cols-1 2xl:grid-cols-3 gap-3", children: [
+    /* @__PURE__ */ r(bt, { snapshot: l }),
+    /* @__PURE__ */ r(xt, { snapshot: l }),
+    /* @__PURE__ */ r(gt, { snapshot: l })
+  ] }) }) : /* @__PURE__ */ r(Ce, { title: o, variant: n, children: /* @__PURE__ */ r(
+    pt,
+    {
+      icon: /* @__PURE__ */ r(nt, { className: "h-5 w-5 mb-2 opacity-30" }),
+      message: e || t !== void 0 ? "No audio data yet — analytics pipeline must be active and audio enabled for this device." : "Resolving device…"
+    }
+  ) });
+}
+function Ce({ title: e, variant: t, ts: o, children: n }) {
+  const a = o ? Math.max(0, Math.floor((Date.now() - o) / 1e3)) : null;
+  return /* @__PURE__ */ i("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__ */ i("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__ */ r("h2", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: e }),
+      a !== null && /* @__PURE__ */ r("span", { className: "text-[10px] text-foreground-subtle", children: a === 0 ? "just now" : `${a}s ago` })
+    ] }),
+    /* @__PURE__ */ r("div", { className: t === "compact" ? "" : "p-3", children: n })
+  ] });
+}
+function pt({ icon: e, message: t }) {
+  return /* @__PURE__ */ i("div", { className: "px-4 py-6 flex flex-col items-center text-center text-foreground-subtle", children: [
+    e,
+    /* @__PURE__ */ r("p", { className: "text-[11px]", children: t })
+  ] });
+}
+function bt({ snapshot: e }) {
+  const { dbfs: t } = e.level, o = Number.isFinite(t) ? t : -80, n = Math.max(-80, Math.min(0, o)), a = (n + 80) / 80 * 100, s = n > -10 ? "bg-danger" : n > -25 ? "bg-warning" : "bg-primary";
+  return /* @__PURE__ */ i("div", { className: "rounded-md border border-border/60 bg-background/40 px-3 py-2", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 mb-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle", children: [
+      /* @__PURE__ */ r(Z, { className: "h-3.5 w-3.5" }),
+      /* @__PURE__ */ r("span", { children: "Level" }),
+      /* @__PURE__ */ r("span", { className: "ml-auto text-base font-semibold text-foreground tabular-nums normal-case tracking-normal", children: Number.isFinite(t) ? `${t.toFixed(1)} dB` : "silent" })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "h-1.5 rounded-full bg-foreground-subtle/15 overflow-hidden", children: /* @__PURE__ */ r(
+      "div",
+      {
+        className: `h-full ${s} transition-all`,
+        style: { width: `${a}%` }
+      }
+    ) }),
+    /* @__PURE__ */ i("div", { className: "flex justify-between text-[9px] text-foreground-subtle mt-1 tabular-nums", children: [
+      /* @__PURE__ */ i("span", { children: [
+        "peak ",
+        Number.isFinite(e.peakDbfs) ? e.peakDbfs.toFixed(1) : "—",
+        " dB"
+      ] }),
+      /* @__PURE__ */ i("span", { children: [
+        "avg ",
+        e.avgDbfs.toFixed(1),
+        " dB"
+      ] }),
+      /* @__PURE__ */ i("span", { children: [
+        xe(e.windowSec),
+        "s window"
+      ] })
+    ] })
+  ] });
+}
+function xt({ snapshot: e }) {
+  const { current: t } = e;
+  return /* @__PURE__ */ i("div", { className: "rounded-md border border-border/60 bg-background/40 px-3 py-2", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 mb-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle", children: [
+      /* @__PURE__ */ r(ot, { className: "h-3.5 w-3.5" }),
+      /* @__PURE__ */ r("span", { children: "Now" })
+    ] }),
+    t ? /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ r("span", { className: "text-sm font-semibold text-foreground", children: t.className }),
+      /* @__PURE__ */ i("span", { className: "text-[10px] text-foreground-subtle tabular-nums", children: [
+        "score ",
+        (t.score * 100).toFixed(0),
+        "% — ",
+        Math.max(0, Math.floor((Date.now() - t.timestamp) / 1e3)),
+        "s ago"
+      ] })
+    ] }) : /* @__PURE__ */ r("span", { className: "text-[10px] text-foreground-subtle italic", children: "silence / unclassified" })
+  ] });
+}
+function gt({ snapshot: e }) {
+  return e.byClass.length === 0 ? /* @__PURE__ */ i("div", { className: "rounded-md border border-border/40 bg-background/20 px-3 py-2", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 mb-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle", children: [
+      /* @__PURE__ */ r(Z, { className: "h-3.5 w-3.5" }),
+      /* @__PURE__ */ i("span", { children: [
+        "Last ",
+        xe(e.windowSec),
+        "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ r("span", { className: "text-[10px] text-foreground-subtle italic", children: "no classified audio" })
+  ] }) : /* @__PURE__ */ i("div", { className: "rounded-md border border-border/60 bg-background/40", children: [
+    /* @__PURE__ */ i("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__ */ r(Z, { className: "h-3.5 w-3.5" }),
+      /* @__PURE__ */ i("span", { children: [
+        "Last ",
+        xe(e.windowSec),
+        "s"
+      ] }),
+      /* @__PURE__ */ r("span", { className: "ml-auto text-[10px] normal-case tracking-normal", children: e.byClass.length })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "divide-y divide-border/30", children: e.byClass.slice(0, 8).map((t) => /* @__PURE__ */ i("div", { className: "px-3 py-1.5 flex items-center justify-between text-xs", children: [
+      /* @__PURE__ */ r("span", { className: "font-medium text-foreground truncate", children: t.className }),
+      /* @__PURE__ */ i("span", { className: "flex items-center gap-2 tabular-nums text-foreground-subtle", children: [
+        /* @__PURE__ */ i("span", { children: [
+          t.hits,
+          "× hits"
+        ] }),
+        /* @__PURE__ */ i("span", { className: "rounded-full px-1.5 py-0.5 text-[10px] bg-primary/10 text-primary border border-primary/20", children: [
+          (t.peakScore * 100).toFixed(0),
+          "%"
+        ] })
+      ] })
+    ] }, t.className)) })
+  ] });
+}
+const ee = {
+  "5m": { label: "5 min", windowMs: 5 * 6e4, resolution: "minute", pollIntervalMs: 5e3 },
+  "30m": { label: "30 min", windowMs: 30 * 6e4, resolution: "minute", pollIntervalMs: 15e3 },
+  "1h": { label: "1 h", windowMs: 60 * 6e4, resolution: "5min", pollIntervalMs: 3e4 }
+}, yt = [
+  { id: "5m", label: ee["5m"].label },
+  { id: "30m", label: ee["30m"].label },
+  { id: "1h", label: ee["1h"].label }
+], P = 140, M = { top: 14, right: 12, bottom: 24, left: 32 }, R = "__all__";
+function vt({ deviceId: e }) {
+  const t = z(), o = Q(t.trpcClient, e), [n, a] = H("5m"), [s, d] = H(R), l = ee[n], [f, u] = ce(), k = de(), $ = K(null), F = (p) => {
+    const v = $.current;
+    if (!v) return p;
+    const c = v.getBoundingClientRect();
+    return c.width === 0 ? p : p / u * c.width;
+  }, b = ye(o?.state.zoneAnalytics), x = N(() => {
+    const p = /* @__PURE__ */ new Set();
+    if (b?.frame.byClass)
+      for (const v of Object.keys(b.frame.byClass)) p.add(v);
+    if (b?.zones)
+      for (const v of b.zones)
+        for (const c of Object.keys(v.byClass)) p.add(c);
+    return [...p].sort();
+  }, [b]);
+  ge(() => {
+    s !== R && !x.includes(s) && d(R);
+  }, [s, x]);
+  const C = le({
+    queryKey: ["zone-analytics", e, "cameraHistory", n, s],
+    queryFn: async () => {
+      if (!o) return [];
+      const p = Date.now();
+      return await o.zoneAnalytics?.getCameraHistory({
+        from: p - l.windowMs,
+        to: p,
+        resolution: l.resolution,
+        ...s === R ? {} : { className: s }
+      }) ?? [];
+    },
+    enabled: !!o,
+    refetchInterval: l.pollIntervalMs,
+    staleTime: Math.max(1e3, l.pollIntervalMs / 2)
+  }), y = C.data ?? [], L = C.dataUpdatedAt > 0 ? C.dataUpdatedAt : Date.now(), D = L - l.windowMs, m = N(() => {
+    if (y.length === 0) return 1;
+    const p = y.reduce((v, c) => Math.max(v, c.count), 0);
+    return Math.max(1, Math.ceil(p * 1.15));
+  }, [y]), h = N(
+    () => wt(y, u, m),
+    [y, u, m]
+  ), g = N(
+    () => ve(D, L, u, M.left, M.right, 5),
+    [D, L, u]
+  ), _ = N(() => kt(m), [m]);
+  return /* @__PURE__ */ i("div", { className: "rounded-lg border border-border bg-surface overflow-hidden", children: [
+    /* @__PURE__ */ i("div", { className: "border-b border-border px-4 py-2 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ r(re, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+        /* @__PURE__ */ r("h2", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: "Occupancy History" })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+        x.length > 0 && /* @__PURE__ */ i(
+          "select",
+          {
+            value: s,
+            onChange: (p) => d(p.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: "Filter by detected class",
+            children: [
+              /* @__PURE__ */ r("option", { value: R, children: "All classes" }),
+              x.map((p) => /* @__PURE__ */ r("option", { value: p, children: p }, p))
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(ie, { presets: yt, value: n, onChange: a })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { ref: f, className: "p-3 min-w-0 relative", children: [
+      y.length === 0 ? /* @__PURE__ */ r("div", { className: "flex items-center justify-center h-32 text-[11px] text-foreground-subtle italic", children: C.isLoading ? "Loading…" : "No occupancy history yet — analytics pipeline must be active." }) : u === 0 ? /* @__PURE__ */ r("div", { className: "h-32" }) : /* @__PURE__ */ i(ae, { children: [
+        /* @__PURE__ */ i(
+          "svg",
+          {
+            ref: $,
+            role: "img",
+            "aria-label": "Frame occupancy history",
+            width: "100%",
+            height: P,
+            viewBox: `0 0 ${u} ${P}`,
+            preserveAspectRatio: "none",
+            className: "block",
+            onMouseLeave: () => k.bindHover(null),
+            children: [
+              _.map(({ y: p, label: v }, c) => /* @__PURE__ */ i("g", { children: [
+                /* @__PURE__ */ r("line", { x1: M.left, x2: u - M.right, y1: p, y2: p, stroke: "currentColor", strokeOpacity: 0.08, strokeWidth: 0.5 }),
+                /* @__PURE__ */ r("text", { x: M.left - 6, y: p + 3, textAnchor: "end", className: "text-[9px] fill-foreground-subtle", children: v })
+              ] }, `y-${c}`)),
+              g.map(({ x: p, label: v }, c) => /* @__PURE__ */ r("text", { x: p, y: P - M.bottom + 12, textAnchor: "middle", className: "text-[9px] fill-foreground-subtle", children: v }, `x-${c}`)),
+              h && /* @__PURE__ */ r("path", { d: h, fill: "none", stroke: "currentColor", className: "text-primary", strokeWidth: 1.5 }),
+              y.map((p, v) => {
+                const c = Fe(v, y.length, u, M.left, M.right), w = Le(p.count, m), I = P - M.top - M.bottom, O = y.length > 1 ? (u - M.left - M.right) / (y.length - 1) : 24;
+                return /* @__PURE__ */ i("g", { children: [
+                  /* @__PURE__ */ r("circle", { cx: c, cy: w, r: 2, fill: "currentColor", className: "text-primary" }),
+                  /* @__PURE__ */ r(
+                    "rect",
+                    {
+                      x: c - O / 2,
+                      y: M.top,
+                      width: Math.max(2, O),
+                      height: I,
+                      fill: "transparent",
+                      onMouseEnter: () => {
+                        k.bindHover({
+                          anchorX: F(c),
+                          anchorY: w,
+                          title: `${Nt(p.ts)} · ${p.count} object${p.count === 1 ? "" : "s"}`,
+                          rows: [
+                            { label: "Class", value: s === R ? "all" : s },
+                            { label: "Bucket", value: l.resolution }
+                          ]
+                        });
+                      }
+                    }
+                  )
+                ] }, `${p.ts}-${v}`);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(ue, { state: k.state, containerWidth: u })
+      ] }),
+      y.length > 0 && /* @__PURE__ */ i("div", { className: "flex items-center justify-between text-[10px] text-foreground-subtle mt-1", children: [
+        /* @__PURE__ */ i("span", { children: [
+          y.length,
+          " bucket",
+          y.length === 1 ? "" : "s",
+          " · ",
+          l.resolution,
+          " resolution"
+        ] }),
+        /* @__PURE__ */ i("span", { children: [
+          "peak ",
+          y.reduce((p, v) => Math.max(p, v.count), 0),
+          " obj"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Le(e, t) {
+  const o = P - M.top - M.bottom, n = Math.min(1, e / t);
+  return M.top + (1 - n) * o;
+}
+function wt(e, t, o) {
+  if (e.length === 0) return null;
+  const n = [];
+  for (let a = 0; a < e.length; a++) {
+    const s = Fe(a, e.length, t, M.left, M.right), d = Le(e[a].count, o);
+    n.push(`${a === 0 ? "M" : "L"} ${s.toFixed(1)} ${d.toFixed(1)}`);
+  }
+  return n.join(" ");
+}
+function kt(e) {
+  const t = [];
+  for (let o = 0; o < 4; o++) {
+    const n = o / 3, a = Math.round(e * n), s = P - M.top - M.bottom;
+    t.push({
+      y: M.top + (1 - n) * s,
+      label: `${a}`
+    });
+  }
+  return t;
+}
+function Nt(e) {
+  const t = new Date(e), o = String(t.getHours()).padStart(2, "0"), n = String(t.getMinutes()).padStart(2, "0");
+  return `${o}:${n}`;
+}
+const te = {
+  "1h": { label: "1 h", windowMs: 60 * 6e4, bucketMs: 6e4, pollIntervalMs: 15e3 },
+  "6h": { label: "6 h", windowMs: 360 * 6e4, bucketMs: 5 * 6e4, pollIntervalMs: 6e4 },
+  "24h": { label: "24 h", windowMs: 1440 * 6e4, bucketMs: 15 * 6e4, pollIntervalMs: 3e5 }
+}, Mt = [
+  { id: "1h", label: te["1h"].label },
+  { id: "6h", label: te["6h"].label },
+  { id: "24h", label: te["24h"].label }
+], $t = 5e3, U = 140, T = { top: 14, right: 12, bottom: 24, left: 32 };
+function Ct({ deviceId: e }) {
+  const t = z(), o = Q(t.trpcClient, e), [n, a] = H("1h"), s = te[n], [d, l] = ce(), f = de(), u = K(null), k = (h) => {
+    const g = u.current;
+    if (!g) return h;
+    const _ = g.getBoundingClientRect();
+    return _.width === 0 ? h : h / l * _.width;
+  }, $ = le({
+    queryKey: ["pipeline-analytics", e, "motionEvents", n],
+    queryFn: async () => {
+      if (!o) return [];
+      const h = Date.now() - s.windowMs;
+      return await o.pipelineAnalytics?.getMotionEvents({
+        since: h,
+        limit: $t
+      }) ?? [];
+    },
+    enabled: !!o,
+    refetchInterval: s.pollIntervalMs,
+    staleTime: Math.max(1e3, s.pollIntervalMs / 2)
+  }), F = $.data ?? [], b = $.dataUpdatedAt > 0 ? $.dataUpdatedAt : Date.now(), x = b - s.windowMs, C = N(
+    () => _t(F, x, b, s.bucketMs),
+    [F, x, b, s.bucketMs]
+  ), y = N(() => {
+    if (C.length === 0) return 1;
+    const h = C.reduce((g, _) => Math.max(g, _.count), 0);
+    return Math.max(1, Math.ceil(h * 1.15));
+  }, [C]), L = N(
+    () => ve(x, b, l, T.left, T.right, 5),
+    [x, b, l]
+  ), D = N(() => It(y), [y]), m = F.length;
+  return /* @__PURE__ */ i("div", { className: "rounded-lg border border-border bg-surface overflow-hidden", children: [
+    /* @__PURE__ */ i("div", { className: "border-b border-border px-4 py-2 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ r(Z, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+        /* @__PURE__ */ r("h2", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: "Motion History" })
+      ] }),
+      /* @__PURE__ */ r(ie, { presets: Mt, value: n, onChange: a })
+    ] }),
+    /* @__PURE__ */ i("div", { ref: d, className: "p-3 min-w-0 relative", children: [
+      m === 0 ? /* @__PURE__ */ r("div", { className: "flex items-center justify-center h-32 text-[11px] text-foreground-subtle italic", children: $.isLoading ? "Loading…" : "No motion events in the selected window." }) : l === 0 ? /* @__PURE__ */ r("div", { className: "h-32" }) : /* @__PURE__ */ i(ae, { children: [
+        /* @__PURE__ */ i(
+          "svg",
+          {
+            ref: u,
+            role: "img",
+            "aria-label": "Motion event histogram",
+            width: "100%",
+            height: U,
+            viewBox: `0 0 ${l} ${U}`,
+            preserveAspectRatio: "none",
+            className: "block",
+            onMouseLeave: () => f.bindHover(null),
+            children: [
+              D.map(({ y: h, label: g }, _) => /* @__PURE__ */ i("g", { children: [
+                /* @__PURE__ */ r("line", { x1: T.left, x2: l - T.right, y1: h, y2: h, stroke: "currentColor", strokeOpacity: 0.08, strokeWidth: 0.5 }),
+                /* @__PURE__ */ r("text", { x: T.left - 6, y: h + 3, textAnchor: "end", className: "text-[9px] fill-foreground-subtle", children: g })
+              ] }, `y-${_}`)),
+              L.map(({ x: h, label: g }, _) => /* @__PURE__ */ r("text", { x: h, y: U - T.bottom + 12, textAnchor: "middle", className: "text-[9px] fill-foreground-subtle", children: g }, `x-${_}`)),
+              C.map((h, g) => {
+                const { x: _, w: p } = St(h.bucketStart, s.bucketMs, x, b, l), v = U - T.top - T.bottom, c = h.count / y * v, w = T.top + (v - c), I = h.bucketStart + s.bucketMs;
+                return /* @__PURE__ */ i("g", { children: [
+                  h.count > 0 && /* @__PURE__ */ r(
+                    "rect",
+                    {
+                      x: _,
+                      y: w,
+                      width: Math.max(1, p - 1),
+                      height: Math.max(1, c),
+                      fill: "currentColor",
+                      className: "text-primary",
+                      opacity: 0.85
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "rect",
+                    {
+                      x: _,
+                      y: T.top,
+                      width: Math.max(2, p),
+                      height: v,
+                      fill: "transparent",
+                      onMouseEnter: () => {
+                        f.bindHover({
+                          anchorX: k(_ + p / 2),
+                          anchorY: w,
+                          title: `${At(h.bucketStart, I)} · ${h.count} event${h.count === 1 ? "" : "s"}`,
+                          rows: [
+                            { label: "Bucket", value: _e(s.bucketMs) },
+                            { label: "Count", value: `${h.count}` }
+                          ]
+                        });
+                      }
+                    }
+                  )
+                ] }, `${h.bucketStart}-${g}`);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(ue, { state: f.state, containerWidth: l })
+      ] }),
+      m > 0 && /* @__PURE__ */ i("div", { className: "flex items-center justify-between text-[10px] text-foreground-subtle mt-1", children: [
+        /* @__PURE__ */ i("span", { children: [
+          m,
+          " event",
+          m === 1 ? "" : "s",
+          " · ",
+          _e(s.bucketMs),
+          " buckets"
+        ] }),
+        /* @__PURE__ */ i("span", { children: [
+          "peak ",
+          C.reduce((h, g) => Math.max(h, g.count), 0),
+          "/bucket"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function _t(e, t, o, n) {
+  if (o <= t) return [];
+  const a = Math.floor(t / n) * n, s = Math.floor(o / n) * n, d = /* @__PURE__ */ new Map();
+  for (let l = a; l <= s; l += n)
+    d.set(l, 0);
+  for (const l of e) {
+    if (l.timestamp < t || l.timestamp > o) continue;
+    const f = Math.floor(l.timestamp / n) * n;
+    d.set(f, (d.get(f) ?? 0) + 1);
+  }
+  return [...d.entries()].sort(([l], [f]) => l - f).map(([l, f]) => ({ bucketStart: l, count: f }));
+}
+function St(e, t, o, n, a) {
+  const s = Math.max(1, n - o), d = a - T.left - T.right, l = T.left + (e - o) / s * d, f = t / s * d;
+  return { x: l, w: f };
+}
+function It(e) {
+  const t = [];
+  for (let o = 0; o < 4; o++) {
+    const n = o / 3, a = Math.round(e * n), s = U - T.top - T.bottom;
+    t.push({
+      y: T.top + (1 - n) * s,
+      label: `${a}`
+    });
+  }
+  return t;
+}
+function At(e, t) {
+  const o = (n) => {
+    const a = new Date(n), s = String(a.getHours()).padStart(2, "0"), d = String(a.getMinutes()).padStart(2, "0");
+    return `${s}:${d}`;
+  };
+  return `${o(e)}–${o(t)}`;
+}
+function _e(e) {
+  return e >= 60 * 6e4 ? `${Math.round(e / 6e4 / 60)}h` : e >= 6e4 ? `${Math.round(e / 6e4)}m` : `${Math.round(e / 1e3)}s`;
+}
+const ne = {
+  "1h": { label: "1 h", windowMs: 60 * 6e4, bucketMs: 6e4, pollIntervalMs: 15e3 },
+  "6h": { label: "6 h", windowMs: 360 * 6e4, bucketMs: 5 * 6e4, pollIntervalMs: 6e4 },
+  "24h": { label: "24 h", windowMs: 1440 * 6e4, bucketMs: 15 * 6e4, pollIntervalMs: 3e5 }
+}, Ft = [
+  { id: "1h", label: ne["1h"].label },
+  { id: "6h", label: ne["6h"].label },
+  { id: "24h", label: ne["24h"].label }
+], Tt = 5e3, Lt = 4, j = "__other__", B = "__all__", V = 160, A = { top: 14, right: 12, bottom: 24, left: 32 };
+function Dt({ deviceId: e }) {
+  const t = z(), o = Q(t.trpcClient, e), [n, a] = H("1h"), [s, d] = H(B), l = ne[n], [f, u] = ce(), k = de(), $ = K(null), F = le({
+    queryKey: ["pipeline-analytics", e, "objectEvents", n],
+    queryFn: async () => {
+      if (!o) return [];
+      const c = Date.now() - l.windowMs;
+      return await o.pipelineAnalytics?.getObjectEvents({
+        since: c,
+        limit: Tt
+      }) ?? [];
+    },
+    enabled: !!o,
+    refetchInterval: l.pollIntervalMs,
+    staleTime: Math.max(1e3, l.pollIntervalMs / 2)
+  }), b = F.data ?? [], x = N(
+    () => s === B ? b : b.filter((c) => c.className === s),
+    [b, s]
+  ), C = F.dataUpdatedAt > 0 ? F.dataUpdatedAt : Date.now(), y = C - l.windowMs, L = N(() => {
+    const c = /* @__PURE__ */ new Set();
+    for (const w of b) c.add(w.className);
+    return s !== B && c.add(s), [...c].sort();
+  }, [b, s]);
+  ge(() => {
+    s !== B && b.length > 0 && !L.includes(s) && d(B);
+  }, [s, b, L]);
+  const D = N(() => Et(x, Lt), [x]), m = N(
+    () => Ht(x, y, C, l.bucketMs, D),
+    [x, y, C, l.bucketMs, D]
+  ), h = N(() => {
+    if (m.length === 0) return 1;
+    const c = m.reduce((w, I) => Math.max(w, I.total), 0);
+    return Math.max(1, Math.ceil(c * 1.15));
+  }, [m]), g = N(
+    () => ve(y, C, u, A.left, A.right, 5),
+    [y, C, u]
+  ), _ = N(() => Wt(h), [h]), p = N(() => {
+    const c = D.map((w) => w.className);
+    return x.some((w) => !D.some((I) => I.className === w.className)) && c.push(j), c;
+  }, [x, D]), v = (c) => {
+    const w = $.current;
+    if (!w) return c;
+    const I = w.getBoundingClientRect();
+    return I.width === 0 ? c : c / u * I.width;
+  };
+  return /* @__PURE__ */ i("div", { className: "rounded-lg border border-border bg-surface overflow-hidden", children: [
+    /* @__PURE__ */ i("div", { className: "border-b border-border px-4 py-2 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ r(Ke, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+        /* @__PURE__ */ r("h2", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: "Detection History" })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+        L.length > 0 && /* @__PURE__ */ i(
+          "select",
+          {
+            value: s,
+            onChange: (c) => d(c.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: "Filter by detected class",
+            children: [
+              /* @__PURE__ */ r("option", { value: B, children: "All classes" }),
+              L.map((c) => /* @__PURE__ */ r("option", { value: c, children: c }, c))
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(ie, { presets: Ft, value: n, onChange: a })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { ref: f, className: "p-3 min-w-0 relative", children: [
+      x.length === 0 ? /* @__PURE__ */ r("div", { className: "flex items-center justify-center h-32 text-[11px] text-foreground-subtle italic", children: F.isLoading ? "Loading…" : "No detection events in the selected window." }) : u === 0 ? /* @__PURE__ */ r("div", { className: "h-32" }) : /* @__PURE__ */ i(ae, { children: [
+        /* @__PURE__ */ i(
+          "svg",
+          {
+            ref: $,
+            role: "img",
+            "aria-label": "Detection event histogram",
+            width: "100%",
+            height: V,
+            viewBox: `0 0 ${u} ${V}`,
+            preserveAspectRatio: "none",
+            className: "block",
+            onMouseLeave: () => k.bindHover(null),
+            children: [
+              _.map(({ y: c, label: w }, I) => /* @__PURE__ */ i("g", { children: [
+                /* @__PURE__ */ r("line", { x1: A.left, x2: u - A.right, y1: c, y2: c, stroke: "currentColor", strokeOpacity: 0.08, strokeWidth: 0.5 }),
+                /* @__PURE__ */ r("text", { x: A.left - 6, y: c + 3, textAnchor: "end", className: "text-[9px] fill-foreground-subtle", children: w })
+              ] }, `y-${I}`)),
+              g.map(({ x: c, label: w }, I) => /* @__PURE__ */ r("text", { x: c, y: V - A.bottom + 12, textAnchor: "middle", className: "text-[9px] fill-foreground-subtle", children: w }, `x-${I}`)),
+              m.map((c, w) => {
+                if (c.total === 0) return null;
+                const { x: I, w: O } = jt(c.bucketStart, l.bucketMs, y, C, u), Y = V - A.top - A.bottom, Ee = c.total / h * Y, He = A.top + (Y - Ee);
+                let ke = 0;
+                const je = p.map((E, he) => {
+                  const q = c.byClass[E] ?? 0;
+                  if (q === 0) return null;
+                  const me = q / h * Y, Oe = A.top + (Y - ke - me);
+                  ke += me;
+                  const Re = E === j ? "#94a3b8" : pe(he);
+                  return /* @__PURE__ */ r(
+                    "rect",
+                    {
+                      x: I,
+                      y: Oe,
+                      width: Math.max(1, O - 1),
+                      height: Math.max(1, me),
+                      fill: Re,
+                      opacity: 0.9
+                    },
+                    `${c.bucketStart}-${E}`
+                  );
+                }).filter((E) => E !== null), We = c.bucketStart + l.bucketMs;
+                return /* @__PURE__ */ i("g", { children: [
+                  je,
+                  /* @__PURE__ */ r(
+                    "rect",
+                    {
+                      x: I,
+                      y: A.top,
+                      width: Math.max(2, O),
+                      height: Y,
+                      fill: "transparent",
+                      onMouseEnter: () => {
+                        k.bindHover({
+                          anchorX: v(I + O / 2),
+                          anchorY: He,
+                          title: `${Ot(c.bucketStart, We, l.bucketMs)} · ${c.total} detection${c.total === 1 ? "" : "s"}`,
+                          rows: p.map((E, he) => {
+                            const q = c.byClass[E] ?? 0;
+                            return q === 0 ? null : {
+                              label: E === j ? "other" : E,
+                              value: `${q}`,
+                              colour: E === j ? "#94a3b8" : pe(he)
+                            };
+                          }).filter((E) => E !== null)
+                        });
+                      }
+                    }
+                  )
+                ] }, `g-${c.bucketStart}-${w}`);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(ue, { state: k.state, containerWidth: u }),
+        /* @__PURE__ */ r(Bt, { stackOrder: p })
+      ] }),
+      x.length > 0 && /* @__PURE__ */ i("div", { className: "flex items-center justify-between text-[10px] text-foreground-subtle mt-1", children: [
+        /* @__PURE__ */ i("span", { children: [
+          x.length,
+          " detection",
+          x.length === 1 ? "" : "s",
+          " · ",
+          Rt(l.bucketMs),
+          " buckets"
+        ] }),
+        /* @__PURE__ */ i("span", { children: [
+          "peak ",
+          m.reduce((c, w) => Math.max(c, w.total), 0),
+          "/bucket"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Et(e, t) {
+  const o = /* @__PURE__ */ new Map();
+  for (const n of e)
+    o.set(n.className, (o.get(n.className) ?? 0) + 1);
+  return [...o.entries()].sort(([, n], [, a]) => a - n).slice(0, t).map(([n, a]) => ({ className: n, count: a }));
+}
+function Ht(e, t, o, n, a) {
+  if (o <= t) return [];
+  const s = new Set(a.map((u) => u.className)), d = Math.floor(t / n) * n, l = Math.floor(o / n) * n, f = /* @__PURE__ */ new Map();
+  for (let u = d; u <= l; u += n)
+    f.set(u, { total: 0, byClass: {} });
+  for (const u of e) {
+    if (u.timestamp < t || u.timestamp > o) continue;
+    const k = Math.floor(u.timestamp / n) * n, $ = f.get(k);
+    if (!$) continue;
+    $.total += 1;
+    const F = s.has(u.className) ? u.className : j;
+    $.byClass[F] = ($.byClass[F] ?? 0) + 1;
+  }
+  return [...f.entries()].sort(([u], [k]) => u - k).map(([u, k]) => ({
+    bucketStart: u,
+    total: k.total,
+    byClass: k.byClass
+  }));
+}
+function jt(e, t, o, n, a) {
+  const s = Math.max(1, n - o), d = a - A.left - A.right, l = A.left + (e - o) / s * d, f = t / s * d;
+  return { x: l, w: f };
+}
+function Wt(e) {
+  const t = [];
+  for (let o = 0; o < 4; o++) {
+    const n = o / 3, a = Math.round(e * n), s = V - A.top - A.bottom;
+    t.push({
+      y: A.top + (1 - n) * s,
+      label: `${a}`
+    });
+  }
+  return t;
+}
+function Ot(e, t, o) {
+  const n = (a) => {
+    const s = String(a.getHours()).padStart(2, "0"), d = String(a.getMinutes()).padStart(2, "0");
+    return `${s}:${d}`;
+  };
+  return o >= 60 * 6e4 ? `${n(new Date(e))}–${n(new Date(t))}` : `${n(new Date(e))}–${n(new Date(t))}`;
+}
+function Rt(e) {
+  return e >= 60 * 6e4 ? `${Math.round(e / 6e4 / 60)}h` : e >= 6e4 ? `${Math.round(e / 6e4)}m` : `${Math.round(e / 1e3)}s`;
+}
+function Bt({ stackOrder: e }) {
+  return e.length === 0 ? null : /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-2 mt-2 px-1", children: e.map((t, o) => {
+    const n = t === j ? "#94a3b8" : pe(o);
+    return /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1 text-[10px] text-foreground-subtle", children: [
+      /* @__PURE__ */ r("span", { className: "inline-block h-2 w-2 rounded-sm", style: { backgroundColor: n } }),
+      /* @__PURE__ */ r("span", { children: t === j ? "other" : t })
+    ] }, t);
+  }) });
+}
+function Pt({
+  dev: e,
+  deviceId: t,
+  title: o = "Live Occupancy",
+  variant: n = "full"
+}) {
+  const a = z(), s = Q(
+    a.trpcClient,
+    e === void 0 && t !== void 0 ? t : null
+  ), d = e ?? s, l = ye(d?.state.zoneAnalytics);
+  return l ? /* @__PURE__ */ r(Se, { title: o, variant: n, ts: l.ts, children: /* @__PURE__ */ i("div", { className: n === "compact" ? "space-y-2" : "grid grid-cols-1 2xl:grid-cols-3 gap-3", children: [
+    /* @__PURE__ */ r(Xt, { frame: l.frame }),
+    /* @__PURE__ */ r(qt, { snapshot: l }),
+    /* @__PURE__ */ r(Yt, { unzoned: l.unzoned })
+  ] }) }) : /* @__PURE__ */ r(Se, { title: o, variant: n, children: /* @__PURE__ */ r(zt, { message: d ? "No occupancy data yet — analytics pipeline must be active for this device." : "Resolving device…" }) });
+}
+function Se({ title: e, variant: t, ts: o, children: n }) {
+  const a = o ? Math.max(0, Math.floor((Date.now() - o) / 1e3)) : null;
+  return /* @__PURE__ */ i("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__ */ i("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__ */ r("h2", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: e }),
+      a !== null && /* @__PURE__ */ r("span", { className: "text-[10px] text-foreground-subtle", children: a === 0 ? "just now" : `${a}s ago` })
+    ] }),
+    /* @__PURE__ */ r("div", { className: t === "compact" ? "" : "p-3", children: n })
+  ] });
+}
+function zt({ message: e }) {
+  return /* @__PURE__ */ i("div", { className: "px-4 py-6 flex flex-col items-center text-center text-foreground-subtle", children: [
+    /* @__PURE__ */ r(re, { className: "h-5 w-5 mb-2 opacity-30" }),
+    /* @__PURE__ */ r("p", { className: "text-[11px]", children: e })
+  ] });
+}
+function Xt({ frame: e }) {
+  return /* @__PURE__ */ r(
+    we,
+    {
+      icon: /* @__PURE__ */ r(Ve, { className: "h-3.5 w-3.5" }),
+      label: "Frame total",
+      total: e.totalObjects,
+      byClass: e.byClass,
+      tone: "default"
+    }
+  );
+}
+function Yt({ unzoned: e }) {
+  return /* @__PURE__ */ r(
+    we,
+    {
+      icon: /* @__PURE__ */ r(et, { className: "h-3.5 w-3.5" }),
+      label: "Outside any zone",
+      total: e.totalObjects,
+      byClass: e.byClass,
+      tone: "muted"
+    }
+  );
+}
+function qt({ snapshot: e }) {
+  return e.zones.length === 0 ? /* @__PURE__ */ r(
+    we,
+    {
+      icon: /* @__PURE__ */ r(re, { className: "h-3.5 w-3.5" }),
+      label: "Per-zone",
+      total: 0,
+      byClass: {},
+      tone: "muted",
+      emptyMessage: "No zones defined for this camera."
+    }
+  ) : /* @__PURE__ */ i("div", { className: "rounded-md border border-border/60 bg-background/40", children: [
+    /* @__PURE__ */ i("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__ */ r(re, { className: "h-3.5 w-3.5" }),
+      /* @__PURE__ */ r("span", { children: "Per-zone" }),
+      /* @__PURE__ */ r("span", { className: "ml-auto text-[10px] normal-case tracking-normal", children: e.zones.length })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "divide-y divide-border/30", children: e.zones.map((t) => /* @__PURE__ */ i("div", { className: "px-3 py-2", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-1", children: [
+        /* @__PURE__ */ r("span", { className: "text-xs font-medium text-foreground truncate", children: t.zoneName }),
+        /* @__PURE__ */ r("span", { className: "rounded-full px-2 py-0.5 text-[10px] font-medium bg-foreground-subtle/10 text-foreground-subtle border border-border", children: t.totalObjects })
+      ] }),
+      /* @__PURE__ */ r(De, { byClass: t.byClass })
+    ] }, t.zoneId)) })
+  ] });
+}
+function we({ icon: e, label: t, total: o, byClass: n, tone: a, emptyMessage: s }) {
+  const d = Object.keys(n).length;
+  return /* @__PURE__ */ i("div", { className: a === "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__ */ i("div", { className: "flex items-center gap-1.5 mb-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle", children: [
+      e,
+      /* @__PURE__ */ r("span", { children: t }),
+      /* @__PURE__ */ r("span", { className: "ml-auto text-base font-semibold text-foreground tabular-nums normal-case tracking-normal", children: o })
+    ] }),
+    d === 0 ? /* @__PURE__ */ r("span", { className: "text-[10px] text-foreground-subtle italic", children: s ?? "no objects" }) : /* @__PURE__ */ r(De, { byClass: n })
+  ] });
+}
+function De({ byClass: e }) {
+  const t = N(
+    () => Object.entries(e).sort(([, o], [, n]) => n - o),
+    [e]
+  );
+  return t.length === 0 ? /* @__PURE__ */ r("span", { className: "text-[10px] text-foreground-subtle italic", children: "no objects" }) : /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1", children: t.map(([o, n]) => /* @__PURE__ */ i(
+    "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__ */ r("span", { children: o }),
+        /* @__PURE__ */ r("span", { className: "tabular-nums opacity-80", children: n })
+      ]
+    },
+    o
+  )) });
+}
+function X({ name: e }) {
+  return /* @__PURE__ */ i("div", { className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning", children: [
+    e,
+    " requires a deviceId"
+  ] });
+}
+function Gt(e) {
+  return e.deviceId === void 0 ? /* @__PURE__ */ r(X, { name: "AudioHistoryChart" }) : /* @__PURE__ */ r(it, { deviceId: e.deviceId });
+}
+function Ut(e) {
+  return e.deviceId === void 0 ? /* @__PURE__ */ r(X, { name: "AudioMetricsPanel" }) : /* @__PURE__ */ r(ft, { deviceId: e.deviceId });
+}
+function Vt(e) {
+  return e.deviceId === void 0 ? /* @__PURE__ */ r(X, { name: "OccupancyHistoryChart" }) : /* @__PURE__ */ r(vt, { deviceId: e.deviceId });
+}
+function Zt(e) {
+  return e.deviceId === void 0 ? /* @__PURE__ */ r(X, { name: "MotionHistoryChart" }) : /* @__PURE__ */ r(Ct, { deviceId: e.deviceId });
+}
+function Kt(e) {
+  return e.deviceId === void 0 ? /* @__PURE__ */ r(X, { name: "DetectionHistoryChart" }) : /* @__PURE__ */ r(Dt, { deviceId: e.deviceId });
+}
+function Qt(e) {
+  return e.deviceId === void 0 ? /* @__PURE__ */ r(X, { name: "LiveOccupancyPanel" }) : /* @__PURE__ */ r(Pt, { deviceId: e.deviceId });
+}
+const rn = {
+  "audio-history-chart": Gt,
+  "audio-metrics-panel": Ut,
+  "occupancy-history-chart": Vt,
+  "motion-history-chart": Zt,
+  "detection-history-chart": Kt,
+  "live-occupancy-panel": Qt
+};
+export {
+  rn as default
+};