@camstack/addon-pipeline-orchestrator 0.1.18 → 0.1.21

package/dist/_stub.js

@@ -1,9 +1,9 @@
-import { _ as t, a as u, b as Ze } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.mjs-Cg6QsnjR.mjs";
-import { _ as He } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.mjs-DoWbefqS.mjs";
-import { _ as _e, a as ze, b as Ve, c as ie, d as ae, e as Ge, f as ye, g as ge, h as Ye, i as le, j as xe, k as Xe, l as Ke, m as ne, n as re, o as oe, p as Ie, q as $e, r as Pe, s as Ae, t as Ee, u as Re, v as Qe } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.mjs-XtEtGou1.mjs";
-import { a as Fe, b as be, c as V, d as L, e as K, f as ve, g as X, h as A } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react__loadShare__.mjs-0qpbQxoV.mjs";
+import { _ as t, a as u, b as be } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.mjs-Cg6QsnjR.mjs";
+import { _ as je } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.mjs-DoWbefqS.mjs";
+import { _ as _e, a as Be, b as qe, c as ae, d as le, e as Ue, f as ye, g as he, h as He, i as xe, j as Ie, k as ze, l as Ve, m as re, n as oe, o as se, p as Ze, q as Ge, r as Ye, s as Xe, t as J, u as Ke, v as Qe } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.mjs-DPoup41Y.mjs";
+import { a as $e, b as ge, c as U, d as L, e as X, f as Ae, g as Y, h as P } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react__loadShare__.mjs-0qpbQxoV.mjs";
 import { _ as Je } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_types__loadShare__.mjs-UNj4rttw.mjs";
-import { _ as Y, a as et, b as de, c as ue, d as tt, e as nt, f as fe } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react_mf_2_konva__loadShare__.mjs-CJUQOcTE.mjs";
+import { _ as G, a as et, b as de, c as ue, d as tt, e as nt, f as fe } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react_mf_2_konva__loadShare__.mjs-DSZIXeAx.mjs";
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -13,10 +13,10 @@ import { _ as Y, a as et, b as de, c as ue, d as tt, e as nt, f as fe } from "./
 const rt = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ot = (e) => e.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
   (o, r, l) => l ? l.toUpperCase() : r.toLowerCase()
-), we = (e) => {
+), ke = (e) => {
   const o = ot(e);
   return o.charAt(0).toUpperCase() + o.slice(1);
-}, Le = (...e) => e.filter((o, r, l) => !!o && o.trim() !== "" && l.indexOf(o) === r).join(" ").trim(), st = (e) => {
+}, Pe = (...e) => e.filter((o, r, l) => !!o && o.trim() !== "" && l.indexOf(o) === r).join(" ").trim(), st = (e) => {
   for (const o in e)
     if (o.startsWith("aria-") || o === "role" || o === "title")
       return !0;
@@ -44,31 +44,31 @@ var it = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const at = Fe(
+const at = $e(
   ({
     color: e = "currentColor",
     size: o = 24,
     strokeWidth: r = 2,
     absoluteStrokeWidth: l,
-    className: c = "",
+    className: p = "",
     children: i,
-    iconNode: d,
-    ...a
-  }, f) => be(
+    iconNode: c,
+    ...s
+  }, h) => ge(
     "svg",
     {
-      ref: f,
+      ref: h,
       ...it,
       width: o,
       height: o,
       stroke: e,
       strokeWidth: l ? Number(r) * 24 / Number(o) : r,
-      className: Le("lucide", c),
-      ...!i && !st(a) && { "aria-hidden": "true" },
-      ...a
+      className: Pe("lucide", p),
+      ...!i && !st(s) && { "aria-hidden": "true" },
+      ...s
     },
     [
-      ...d.map(([n, E]) => be(n, E)),
+      ...c.map(([n, S]) => ge(n, S)),
       ...Array.isArray(i) ? i : [i]
     ]
   )
@@ -79,20 +79,20 @@ const at = Fe(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const B = (e, o) => {
-  const r = Fe(
-    ({ className: l, ...c }, i) => be(at, {
+const j = (e, o) => {
+  const r = $e(
+    ({ className: l, ...p }, i) => ge(at, {
       ref: i,
       iconNode: o,
-      className: Le(
-        `lucide-${rt(we(e))}`,
+      className: Pe(
+        `lucide-${rt(ke(e))}`,
         `lucide-${e}`,
         l
       ),
-      ...c
+      ...p
     })
   );
-  return r.displayName = we(e), r;
+  return r.displayName = ke(e), r;
 };
 /**
  * @license lucide-react v0.511.0 - ISC
@@ -108,14 +108,14 @@ const lt = [
       key: "169zse"
     }
   ]
-], ct = B("activity", lt);
+], ct = j("activity", lt);
 /**
  * @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 dt = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], ut = B("check", dt);
+const dt = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], ut = j("check", dt);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -137,14 +137,14 @@ const ft = [
   ["path", { d: "M7 2v2", key: "1i4yhu" }],
   ["rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", key: "1vbyd7" }],
   ["rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", key: "z9xiuo" }]
-], pt = B("cpu", ft);
+], pt = j("cpu", ft);
 /**
  * @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 ht = [
+const mt = [
   [
     "path",
     {
@@ -153,7 +153,7 @@ const ht = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], mt = B("eye", ht);
+], ht = j("eye", mt);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -163,7 +163,7 @@ const ht = [
 const gt = [
   ["path", { d: "m12 14 4-4", key: "9kzdfg" }],
   ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0", key: "19p75a" }]
-], bt = B("gauge", gt);
+], bt = j("gauge", gt);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -178,24 +178,24 @@ const yt = [
       key: "yt0hxn"
     }
   ]
-], xt = B("hexagon", yt);
+], xt = j("hexagon", yt);
 /**
  * @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 vt = [["path", { d: "M5 12h14", key: "1ays0h" }]], kt = B("minus", vt);
+const vt = [["path", { d: "M5 12h14", key: "1ays0h" }]], _t = j("minus", vt);
 /**
  * @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 _t = [
+const kt = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
-], wt = B("plus", _t);
+], wt = j("plus", kt);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -212,7 +212,7 @@ const Nt = [
   ],
   ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
   ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
-], Ct = B("save", Nt);
+], Ct = j("save", Nt);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -225,7 +225,7 @@ const Dt = [
   ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
   ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
   ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
-], ke = B("trash-2", Dt);
+], ve = j("trash-2", Dt);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -235,11 +235,11 @@ const Dt = [
 const St = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], Te = B("x", St);
+], Ee = j("x", St);
 function Mt(e) {
-  return e.deviceId === void 0 ? /* @__PURE__ */ t("div", { className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning", children: "PipelineQuickStats requires a deviceId" }) : /* @__PURE__ */ t(Zt, { deviceId: e.deviceId });
+  return e.deviceId === void 0 ? /* @__PURE__ */ t("div", { className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning", children: "PipelineQuickStats requires a deviceId" }) : /* @__PURE__ */ t(It, { deviceId: e.deviceId });
 }
-function Zt({ deviceId: e }) {
+function It({ deviceId: e }) {
   _e(
     ["pipelineOrchestrator", "getPipelineAssignment"],
     ["pipeline.camera-assigned", "pipeline.camera-unassigned", "pipeline.camera-updated"]
@@ -247,63 +247,63 @@ function Zt({ deviceId: e }) {
     ["pipelineRunner", "getCameraMetrics"],
     ["pipeline.camera-metrics-snapshot"]
   );
-  const { data: o } = ze(
+  const { data: o } = Be(
     { deviceId: e },
     { staleTime: 3e4 }
-  ), r = o?.agentNodeId ?? null, c = typeof r == "string" && r.length > 0 && !r.startsWith("addon:") ? r : void 0, { data: i } = Ve(
+  ), r = o?.agentNodeId ?? null, p = typeof r == "string" && r.length > 0 && !r.startsWith("addon:") ? r : void 0, { data: i } = qe(
     {
       deviceId: e,
-      ...c ? { nodeId: c } : {}
+      ...p ? { nodeId: p } : {}
     },
     { staleTime: 2e3, retry: !1 }
-  ), d = ie(), a = ae(d.trpcClient, e), { data: f } = He({
+  ), c = ae(), s = le(c.trpcClient, e), { data: h } = je({
     queryKey: ["device", e, "pipelineAnalytics.getActiveTracks"],
-    queryFn: () => a?.pipelineAnalytics?.getActiveTracks({}) ?? [],
-    enabled: !!a,
+    queryFn: () => s?.pipelineAnalytics?.getActiveTracks({}) ?? [],
+    enabled: !!s,
     refetchInterval: 5e3,
     retry: !1
-  }), n = i?.phase ?? null, E = i?.detectionMode ?? null, p = Number(i?.actualFps ?? 0), M = Number(i?.configuredFps ?? 0), b = Number(i?.avgInferenceTimeMs ?? 0), k = Number(i?.queueDepth ?? 0), I = Number(i?.droppedFrames ?? 0), g = Ge(n ?? "watching"), h = f?.length ?? 0;
+  }), n = i?.phase ?? null, S = i?.detectionMode ?? null, d = Number(i?.actualFps ?? 0), Z = Number(i?.configuredFps ?? 0), b = Number(i?.avgInferenceTimeMs ?? 0), m = Number(i?.queueDepth ?? 0), w = Number(i?.droppedFrames ?? 0), _ = Ue(n ?? "watching"), M = h?.length ?? 0;
   return /* @__PURE__ */ t("div", { className: "@container", style: { containerType: "inline-size" }, children: /* @__PURE__ */ u("div", { className: "grid grid-cols-1 @[360px]:grid-cols-2 @[720px]:grid-cols-4 gap-3", children: [
     /* @__PURE__ */ t(
-      se,
+      ie,
       {
         icon: ct,
         label: "Phase",
-        value: g.label,
-        color: g.textColor,
-        subtext: E ?? void 0
+        value: _.label,
+        color: _.textColor,
+        subtext: S ?? void 0
       }
     ),
     /* @__PURE__ */ t(
-      se,
+      ie,
       {
         icon: bt,
         label: "Detection FPS",
-        value: `${p.toFixed(1)}`,
-        subtext: M > 0 ? `target: ${M}` : void 0
+        value: `${d.toFixed(1)}`,
+        subtext: Z > 0 ? `target: ${Z}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      se,
+      ie,
       {
         icon: pt,
         label: "Inference",
         value: `${b.toFixed(1)} ms`,
-        subtext: k > 0 ? `queue: ${k}` : void 0
+        subtext: m > 0 ? `queue: ${m}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      se,
+      ie,
       {
-        icon: mt,
+        icon: ht,
         label: "Active Tracks",
-        value: String(h),
-        subtext: I > 0 ? `dropped: ${I}` : void 0
+        value: String(M),
+        subtext: w > 0 ? `dropped: ${w}` : void 0
       }
     )
   ] }) });
 }
-function se({ icon: e, label: o, value: r, subtext: l, color: c }) {
+function ie({ icon: e, label: o, value: r, subtext: l, color: p }) {
   return /* @__PURE__ */ u("div", { className: "rounded-lg border border-border bg-surface p-3 min-w-0", children: [
     /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5 mb-1 min-w-0", children: [
       /* @__PURE__ */ t(e, { className: "h-3.5 w-3.5 text-foreground-subtle flex-shrink-0" }),
@@ -319,7 +319,7 @@ function se({ icon: e, label: o, value: r, subtext: l, color: c }) {
     /* @__PURE__ */ t(
       "p",
       {
-        className: `text-lg font-semibold leading-tight truncate ${c ?? "text-foreground"}`,
+        className: `text-lg font-semibold leading-tight truncate ${p ?? "text-foreground"}`,
         title: r,
         children: r
       }
@@ -327,36 +327,36 @@ function se({ icon: e, label: o, value: r, subtext: l, color: c }) {
     l && /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle mt-0.5 truncate", title: l, children: l })
   ] });
 }
-const It = {
+const Zt = {
   polygon: "Polygon",
   tripwire: "Tripwire"
 }, $t = {
   polygon: "bg-info/10 text-info",
   tripwire: "bg-warning/10 text-warning"
 };
-function Pt({
+function At({
   zones: e,
   selectedZoneId: o,
   drawingKind: r,
   onSelectZone: l,
-  onDeleteZone: c,
+  onDeleteZone: p,
   onStartDraw: i,
-  onCancelDraw: d
+  onCancelDraw: c
 }) {
   return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: r ? /* @__PURE__ */ u(
       "button",
       {
         type: "button",
-        onClick: d,
+        onClick: c,
         className: "inline-flex items-center justify-center gap-1 rounded border border-amber-500/30 bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 transition-colors h-8 px-3 text-[11px] font-medium",
         title: "Cancel drawing",
         children: [
-          /* @__PURE__ */ t(Te, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ t(Ee, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ t("span", { children: "Cancel" })
         ]
       }
-    ) : /* @__PURE__ */ u(Ze, { children: [
+    ) : /* @__PURE__ */ u(be, { children: [
       /* @__PURE__ */ t(
         "button",
         {
@@ -376,34 +376,34 @@ function Pt({
           className: "inline-flex items-center justify-center rounded border border-border bg-surface text-foreground-subtle hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-colors h-8 w-8",
           title: "Add tripwire",
           "aria-label": "Add tripwire",
-          children: /* @__PURE__ */ t(kt, { className: "h-5 w-5 stroke-[2.5]" })
+          children: /* @__PURE__ */ t(_t, { className: "h-5 w-5 stroke-[2.5]" })
         }
       )
     ] }) }),
-    e.length === 0 ? /* @__PURE__ */ t("p", { className: "text-center text-[10px] text-foreground-subtle py-3 leading-tight", children: 'No zones yet — pick "Zone" or "Tripwire" to draw.' }) : /* @__PURE__ */ t("div", { className: "flex flex-col gap-1", children: e.map((a) => {
-      const f = a.id === o;
+    e.length === 0 ? /* @__PURE__ */ t("p", { className: "text-center text-[10px] text-foreground-subtle py-3 leading-tight", children: 'No zones yet — pick "Zone" or "Tripwire" to draw.' }) : /* @__PURE__ */ t("div", { className: "flex flex-col gap-1", children: e.map((s) => {
+      const h = s.id === o;
       return /* @__PURE__ */ u(
         "div",
         {
           className: [
             "flex items-center gap-1.5 rounded border px-1.5 py-1 cursor-pointer transition-colors",
-            f ? "border-primary/50 bg-primary/10" : "border-border bg-surface hover:bg-surface-hover"
+            h ? "border-primary/50 bg-primary/10" : "border-border bg-surface hover:bg-surface-hover"
           ].join(" "),
-          onClick: () => l(f ? null : a.id),
+          onClick: () => l(h ? null : s.id),
           children: [
             /* @__PURE__ */ t(
               "div",
               {
                 className: "h-2.5 w-2.5 rounded-sm flex-shrink-0",
-                style: { backgroundColor: a.color }
+                style: { backgroundColor: s.color }
               }
             ),
-            /* @__PURE__ */ t("span", { className: "flex-1 truncate text-[11px] font-medium text-foreground", children: a.name }),
+            /* @__PURE__ */ t("span", { className: "flex-1 truncate text-[11px] font-medium text-foreground", children: s.name }),
             /* @__PURE__ */ t(
               "span",
               {
-                className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium flex-shrink-0 ${$t[a.kind]}`,
-                children: It[a.kind]
+                className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium flex-shrink-0 ${$t[s.kind]}`,
+                children: Zt[s.kind]
               }
             ),
             /* @__PURE__ */ t(
@@ -413,19 +413,19 @@ function Pt({
                 title: "Delete zone",
                 className: "p-0.5 text-foreground-subtle hover:text-danger rounded transition-colors flex-shrink-0",
                 onClick: (n) => {
-                  n.stopPropagation(), c(a.id);
+                  n.stopPropagation(), p(s.id);
                 },
-                children: /* @__PURE__ */ t(ke, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ t(ve, { className: "h-3 w-3" })
               }
             )
           ]
         },
-        a.id
+        s.id
       );
     }) })
   ] });
 }
-const At = [
+const Pt = [
   "#3b82f6",
   // blue
   "#10b981",
@@ -444,7 +444,7 @@ const At = [
   // pink
 ];
 function Et({ zone: e, onSave: o, onDiscard: r, onDelete: l }) {
-  const c = ye(), i = (a) => c?.updateDraft({ name: a }), d = (a) => c?.updateDraft({ color: a });
+  const p = ye(), i = (s) => p?.updateDraft({ name: s }), c = (s) => p?.updateDraft({ color: s });
   return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ u("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ t("h3", { className: "text-[10px] font-semibold text-foreground-subtle uppercase tracking-wider", children: "Editing" }),
@@ -454,29 +454,29 @@ function Et({ zone: e, onSave: o, onDiscard: r, onDelete: l }) {
       "input",
       {
         type: "text",
-        className: ge,
+        className: he,
         value: e.name,
         autoFocus: !0,
-        onChange: (a) => i(a.target.value),
-        onKeyDown: (a) => {
-          a.key === "Enter" ? (a.preventDefault(), o()) : a.key === "Escape" && (a.preventDefault(), r());
+        onChange: (s) => i(s.target.value),
+        onKeyDown: (s) => {
+          s.key === "Enter" ? (s.preventDefault(), o()) : s.key === "Escape" && (s.preventDefault(), r());
         },
         placeholder: "Zone name"
       }
     ),
-    /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: At.map((a) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: Pt.map((s) => /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        title: a,
+        title: s,
         className: [
           "h-4 w-4 rounded border-2 cursor-pointer transition-transform hover:scale-110",
-          e.color === a ? "border-white scale-110" : "border-transparent"
+          e.color === s ? "border-white scale-110" : "border-transparent"
         ].join(" "),
-        style: { backgroundColor: a },
-        onClick: () => d(a)
+        style: { backgroundColor: s },
+        onClick: () => c(s)
       },
-      a
+      s
     )) }),
     /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ t(
@@ -485,17 +485,17 @@ function Et({ zone: e, onSave: o, onDiscard: r, onDelete: l }) {
           type: "color",
           className: "h-6 w-6 rounded border border-border bg-background cursor-pointer p-0.5",
           value: e.color,
-          onChange: (a) => d(a.target.value)
+          onChange: (s) => c(s.target.value)
         }
       ),
       /* @__PURE__ */ t(
         "input",
         {
           type: "text",
-          className: `${ge} font-mono`,
+          className: `${he} font-mono`,
           value: e.color,
           placeholder: "#000000",
-          onChange: (a) => d(a.target.value)
+          onChange: (s) => c(s.target.value)
         }
       )
     ] }),
@@ -525,7 +525,7 @@ function Et({ zone: e, onSave: o, onDiscard: r, onDelete: l }) {
           className: "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors h-7 px-3 text-[11px] font-medium",
           title: "Discard changes (Esc)",
           children: [
-            /* @__PURE__ */ t(Te, { className: "h-3 w-3" }),
+            /* @__PURE__ */ t(Ee, { className: "h-3 w-3" }),
             "Discard"
           ]
         }
@@ -536,9 +536,9 @@ function Et({ zone: e, onSave: o, onDiscard: r, onDelete: l }) {
       {
         type: "button",
         onClick: l,
-        className: `${Ye} w-full`,
+        className: `${He} w-full`,
         children: [
-          /* @__PURE__ */ t(ke, { className: "h-3 w-3" }),
+          /* @__PURE__ */ t(ve, { className: "h-3 w-3" }),
           "Delete"
         ]
       }
@@ -548,7 +548,7 @@ function Et({ zone: e, onSave: o, onDiscard: r, onDelete: l }) {
 const Rt = Je.map(
   (e) => ({ id: e.id, label: e.name })
 );
-function Ft(e) {
+function Lt(e) {
   return {
     id: e.id,
     name: e.name ?? "",
@@ -558,7 +558,7 @@ function Ft(e) {
     enabled: e.enabled !== !1
   };
 }
-function Lt(e) {
+function Ft(e) {
   const o = {
     id: e.id,
     zoneIds: e.zoneIds,
@@ -567,16 +567,16 @@ function Lt(e) {
   };
   return e.name && (o.name = e.name), e.classFilter.length > 0 && (o.classFilter = e.classFilter), o;
 }
-function Ne({ dev: e, stage: o, zones: r, title: l }) {
-  const c = le(e?.state.zoneRules), i = V(
-    () => c?.[o] ?? [],
-    [c, o]
-  ), [d, a] = L([]), [f, n] = L(!1), [E, p] = L(!1), [M, b] = L(null);
-  K(() => {
-    f || a(i.map(Ft));
-  }, [i, f]);
-  const k = () => {
-    a((v) => [
+function we({ dev: e, stage: o, zones: r, title: l }) {
+  const p = xe(e?.state.zoneRules), i = U(
+    () => p?.[o] ?? [],
+    [p, o]
+  ), [c, s] = L([]), [h, n] = L(!1), [S, d] = L(!1), [Z, b] = L(null);
+  X(() => {
+    h || s(i.map(Lt));
+  }, [i, h]);
+  const m = () => {
+    s((v) => [
       ...v,
       {
         id: crypto.randomUUID(),
@@ -587,49 +587,49 @@ function Ne({ dev: e, stage: o, zones: r, title: l }) {
         enabled: !0
       }
     ]), n(!0);
-  }, I = (v, w) => {
-    a(
-      (C) => C.map((D, _) => {
-        if (_ !== v) return D;
-        const s = D.classFilter.includes(w) ? D.classFilter.filter((y) => y !== w) : [...D.classFilter, w];
-        return { ...D, classFilter: s };
+  }, w = (v, N) => {
+    s(
+      (f) => f.map((g, F) => {
+        if (F !== v) return g;
+        const a = g.classFilter.includes(N) ? g.classFilter.filter((y) => y !== N) : [...g.classFilter, N];
+        return { ...g, classFilter: a };
       })
     ), n(!0);
-  }, g = (v, w) => {
-    a(
-      (C) => C.map((D, _) => {
-        if (_ !== v) return D;
-        const s = D.zoneIds.includes(w) ? D.zoneIds.filter((y) => y !== w) : [...D.zoneIds, w];
-        return { ...D, zoneIds: s };
+  }, _ = (v, N) => {
+    s(
+      (f) => f.map((g, F) => {
+        if (F !== v) return g;
+        const a = g.zoneIds.includes(N) ? g.zoneIds.filter((y) => y !== N) : [...g.zoneIds, N];
+        return { ...g, zoneIds: a };
       })
     ), n(!0);
-  }, h = (v) => {
-    a((w) => w.filter((C, D) => D !== v)), n(!0);
-  }, m = (v, w) => {
-    a((C) => C.map((D, _) => _ === v ? { ...D, ...w } : D)), n(!0);
+  }, M = (v) => {
+    s((N) => N.filter((f, g) => g !== v)), n(!0);
+  }, k = (v, N) => {
+    s((f) => f.map((g, F) => F === v ? { ...g, ...N } : g)), n(!0);
   }, x = async () => {
     if (e?.zoneRules) {
-      p(!0), b(null);
+      d(!0), b(null);
       try {
-        await e.zoneRules.setRules({ stage: o, rules: d.map(Lt) }), n(!1);
+        await e.zoneRules.setRules({ stage: o, rules: c.map(Ft) }), n(!1);
       } catch (v) {
         b(v instanceof Error ? v.message : String(v));
       } finally {
-        p(!1);
+        d(!1);
       }
     }
-  }, G = f && !!e?.zoneRules && !E;
+  }, V = h && !!e?.zoneRules && !S;
   return /* @__PURE__ */ u("div", { className: "rounded-md border border-border bg-surface/40 p-2.5", children: [
     /* @__PURE__ */ u("div", { className: "flex items-center justify-between mb-2 gap-2", children: [
-      /* @__PURE__ */ t("h3", { className: `${xe} truncate`, children: l ?? `${o === "motion" ? "Motion" : "Detection"} Rules` }),
+      /* @__PURE__ */ t("h3", { className: `${Ie} truncate`, children: l ?? `${o === "motion" ? "Motion" : "Detection"} Rules` }),
       /* @__PURE__ */ u("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
         /* @__PURE__ */ u(
           "button",
           {
             type: "button",
-            onClick: k,
+            onClick: m,
             disabled: r.length === 0 || !e,
-            className: Xe,
+            className: ze,
             title: "Add rule",
             children: [
               /* @__PURE__ */ t(wt, { className: "h-2.5 w-2.5" }),
@@ -644,17 +644,17 @@ function Ne({ dev: e, stage: o, zones: r, title: l }) {
             onClick: () => {
               x();
             },
-            disabled: !G,
-            className: Ke,
+            disabled: !V,
+            className: Ve,
             children: [
               /* @__PURE__ */ t(Ct, { className: "h-2.5 w-2.5" }),
-              E ? "…" : "Save"
+              S ? "…" : "Save"
             ]
           }
         )
       ] })
     ] }),
-    d.length === 0 ? /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle italic px-1 py-1.5 leading-tight", children: r.length === 0 ? "Define a zone first — rules reference zone ids." : "No rules — every detection at this stage passes through." }) : /* @__PURE__ */ t("div", { className: "flex flex-col gap-1.5", children: d.map((v, w) => /* @__PURE__ */ u(
+    c.length === 0 ? /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle italic px-1 py-1.5 leading-tight", children: r.length === 0 ? "Define a zone first — rules reference zone ids." : "No rules — every detection at this stage passes through." }) : /* @__PURE__ */ t("div", { className: "flex flex-col gap-1.5", children: c.map((v, N) => /* @__PURE__ */ u(
       "div",
       {
         className: "rounded border border-border/50 bg-background/40 px-2 py-1.5 flex flex-col gap-1.5 overflow-hidden",
@@ -668,7 +668,7 @@ function Ne({ dev: e, stage: o, zones: r, title: l }) {
                 "aria-checked": v.enabled,
                 "aria-label": v.enabled ? "Disable rule" : "Enable rule",
                 title: v.enabled ? "Rule is active — click to disable" : "Rule is disabled — click to enable",
-                onClick: () => m(w, { enabled: !v.enabled }),
+                onClick: () => k(N, { enabled: !v.enabled }),
                 className: [
                   "inline-flex items-center justify-center h-5 w-9 rounded-full border transition-colors flex-shrink-0",
                   v.enabled ? "border-primary/50 bg-primary/20 text-primary" : "border-border bg-surface text-foreground-subtle"
@@ -687,10 +687,10 @@ function Ne({ dev: e, stage: o, zones: r, title: l }) {
             /* @__PURE__ */ t(
               "input",
               {
-                className: `${ge} min-w-0`,
+                className: `${he} min-w-0`,
                 placeholder: "Rule name (optional)",
                 value: v.name,
-                onChange: (C) => m(w, { name: C.target.value })
+                onChange: (f) => k(N, { name: f.target.value })
               }
             ),
             /* @__PURE__ */ t(
@@ -699,9 +699,9 @@ function Ne({ dev: e, stage: o, zones: r, title: l }) {
                 type: "button",
                 title: "Remove rule",
                 "aria-label": "Remove rule",
-                onClick: () => h(w),
+                onClick: () => M(N),
                 className: "flex items-center justify-center h-6 w-6 rounded text-foreground-subtle hover:text-danger hover:bg-danger/10 transition-colors flex-shrink-0",
-                children: /* @__PURE__ */ t(ke, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ t(ve, { className: "h-3.5 w-3.5" })
               }
             )
           ] }),
@@ -711,8 +711,8 @@ function Ne({ dev: e, stage: o, zones: r, title: l }) {
               "button",
               {
                 type: "button",
-                onClick: () => m(w, { mode: "include" }),
-                className: `${ne} ${v.mode === "include" ? re : oe}`,
+                onClick: () => k(N, { mode: "include" }),
+                className: `${re} ${v.mode === "include" ? oe : se}`,
                 children: "Include"
               }
             ),
@@ -720,50 +720,50 @@ function Ne({ dev: e, stage: o, zones: r, title: l }) {
               "button",
               {
                 type: "button",
-                onClick: () => m(w, { mode: "exclude" }),
-                className: `${ne} ${v.mode === "exclude" ? re : oe}`,
+                onClick: () => k(N, { mode: "exclude" }),
+                className: `${re} ${v.mode === "exclude" ? oe : se}`,
                 children: "Exclude"
               }
             )
           ] }),
           /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
             /* @__PURE__ */ t("span", { className: "text-[9px] uppercase tracking-wider text-foreground-subtle w-12 sm:w-14 flex-shrink-0", children: "Zones" }),
-            r.length === 0 ? /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic", children: "none" }) : r.map((C) => {
-              const D = v.zoneIds.includes(C.id);
+            r.length === 0 ? /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic", children: "none" }) : r.map((f) => {
+              const g = v.zoneIds.includes(f.id);
               return /* @__PURE__ */ u(
                 "button",
                 {
                   type: "button",
-                  onClick: () => g(w, C.id),
-                  className: `${ne} ${D ? re : oe}`,
+                  onClick: () => _(N, f.id),
+                  className: `${re} ${g ? oe : se}`,
                   children: [
                     /* @__PURE__ */ t(
                       "span",
                       {
                         className: "h-2 w-2 rounded-sm",
-                        style: { backgroundColor: C.color || "#3b82f6" }
+                        style: { backgroundColor: f.color || "#3b82f6" }
                       }
                     ),
-                    /* @__PURE__ */ t("span", { className: "truncate max-w-[7rem]", children: C.name || C.id })
+                    /* @__PURE__ */ t("span", { className: "truncate max-w-[7rem]", children: f.name || f.id })
                   ]
                 },
-                C.id
+                f.id
               );
             })
           ] }),
           /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
             /* @__PURE__ */ t("span", { className: "text-[9px] uppercase tracking-wider text-foreground-subtle w-12 sm:w-14 flex-shrink-0", children: "Class" }),
-            Rt.map((C) => {
-              const D = v.classFilter.includes(C.id);
+            Rt.map((f) => {
+              const g = v.classFilter.includes(f.id);
               return /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: () => I(w, C.id),
-                  className: `${ne} ${D ? re : oe}`,
-                  children: C.label
+                  onClick: () => w(N, f.id),
+                  className: `${re} ${g ? oe : se}`,
+                  children: f.label
                 },
-                C.id
+                f.id
               );
             }),
             v.classFilter.length === 0 && /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic ml-1", children: "any" })
@@ -772,7 +772,7 @@ function Ne({ dev: e, stage: o, zones: r, title: l }) {
       },
       v.id
     )) }),
-    M && /* @__PURE__ */ t("p", { className: "mt-2 text-[10px] text-danger", children: M })
+    Z && /* @__PURE__ */ t("p", { className: "mt-2 text-[10px] text-danger", children: Z })
   ] });
 }
 function Q(e, o, r) {
@@ -781,152 +781,152 @@ function Q(e, o, r) {
 function pe(e, o, r) {
   return { x: e.x / o, y: e.y / r };
 }
-function Ce(e, o, r) {
+function Ne(e, o, r) {
   return e.flatMap((l) => [l.x * o, l.y * r]);
 }
 function Tt(e, o) {
   return e.color;
 }
-const Ot = "33", jt = "66", De = 16, Se = 9;
-function Wt({
+const Ot = "33", Wt = "66", Ce = 16, De = 9;
+function jt({
   zones: e,
   selectedZoneId: o,
   onSelectZone: r,
   onZonePointsChange: l,
-  onZoneComplete: c,
+  onZoneComplete: p,
   drawingKind: i,
-  backdrop: d,
-  transparent: a = !1
+  backdrop: c,
+  transparent: s = !1
 }) {
-  const f = X(null), [n, E] = L({ w: 800, h: 450 }), [p, M] = L([]), [b, k] = L(null), [I, g] = L(null), [h, m] = L(null);
-  K(() => {
-    if (!h) return;
-    const s = e.find((S) => S.id === h.zoneId);
-    if (!s) {
-      m(null);
+  const h = Y(null), [n, S] = L({ w: 800, h: 450 }), [d, Z] = L([]), [b, m] = L(null), [w, _] = L(null), [M, k] = L(null);
+  X(() => {
+    if (!M) return;
+    const a = e.find((D) => D.id === M.zoneId);
+    if (!a) {
+      k(null);
       return;
     }
-    if (s.points.length !== h.points.length) return;
-    s.points.every((S, N) => {
-      const O = h.points[N];
-      return Math.abs(S.x - O.x) < 1e-6 && Math.abs(S.y - O.y) < 1e-6;
-    }) && m(null);
-  }, [e, h]), K(() => {
-    const s = f.current;
-    if (!s) return;
-    const y = new ResizeObserver((S) => {
-      const N = S[0];
-      if (N) {
-        const { width: O, height: j } = N.contentRect;
-        E(a ? { w: O, h: j } : { w: O, h: O * 9 / 16 });
+    if (a.points.length !== M.points.length) return;
+    a.points.every((D, C) => {
+      const T = M.points[C];
+      return Math.abs(D.x - T.x) < 1e-6 && Math.abs(D.y - T.y) < 1e-6;
+    }) && k(null);
+  }, [e, M]), X(() => {
+    const a = h.current;
+    if (!a) return;
+    const y = new ResizeObserver((D) => {
+      const C = D[0];
+      if (C) {
+        const { width: T, height: O } = C.contentRect;
+        S(s ? { w: T, h: O } : { w: T, h: T * 9 / 16 });
       }
     });
-    return y.observe(s), () => y.disconnect();
-  }, [a]);
+    return y.observe(a), () => y.disconnect();
+  }, [s]);
   const x = i !== null;
-  K(() => {
-    !x && b !== null && k(null);
+  X(() => {
+    !x && b !== null && m(null);
   }, [x, b]);
-  const G = A(
-    (s) => {
+  const V = P(
+    (a) => {
       if (!x) {
         r(null);
         return;
       }
-      const y = s.target.getStage();
+      const y = a.target.getStage();
       if (!y) return;
-      const S = y.getPointerPosition();
-      if (!S) return;
-      const N = pe(S, n.w, n.h), O = i === "tripwire";
-      if (p.length === 0) {
-        M([N]);
+      const D = y.getPointerPosition();
+      if (!D) return;
+      const C = pe(D, n.w, n.h), T = i === "tripwire";
+      if (d.length === 0) {
+        Z([C]);
         return;
       }
-      if (O && p.length === 1) {
-        const j = [...p, N], H = {
+      if (T && d.length === 1) {
+        const O = [...d, C], H = {
           id: crypto.randomUUID(),
           name: "Tripwire",
           kind: "tripwire",
           color: "#f59e0b",
-          points: j
+          points: O
         };
-        c(H), M([]);
+        p(H), Z([]);
         return;
       }
-      if (p.length >= 3 && !O) {
-        const j = Q(p[0], n.w, n.h);
-        if (Math.hypot(S.x - j.x, S.y - j.y) < 12) {
-          const J = {
+      if (d.length >= 3 && !T) {
+        const O = Q(d[0], n.w, n.h);
+        if (Math.hypot(D.x - O.x, D.y - O.y) < 12) {
+          const ee = {
             id: crypto.randomUUID(),
             name: "Zone",
             kind: "polygon",
             color: "#3b82f6",
-            points: p
+            points: d
           };
-          c(J), M([]);
+          p(ee), Z([]);
           return;
         }
       }
-      M((j) => [...j, N]);
+      Z((O) => [...O, C]);
     },
-    [x, p, n, i, c, r]
-  ), v = A(
-    (s) => {
-      if (!x || i === "tripwire" || p.length < 3) return;
-      s.cancelBubble = !0;
+    [x, d, n, i, p, r]
+  ), v = P(
+    (a) => {
+      if (!x || i === "tripwire" || d.length < 3) return;
+      a.cancelBubble = !0;
       const y = {
         id: crypto.randomUUID(),
         name: "Zone",
         kind: "polygon",
         color: "#3b82f6",
-        points: p
+        points: d
       };
-      c(y), M([]);
+      p(y), Z([]);
     },
-    [x, i, p, c]
-  ), w = X(null), C = X(null);
-  K(() => () => {
-    w.current !== null && cancelAnimationFrame(w.current);
+    [x, i, d, p]
+  ), N = Y(null), f = Y(null);
+  X(() => () => {
+    N.current !== null && cancelAnimationFrame(N.current);
   }, []);
-  const D = A(
-    (s) => {
+  const g = P(
+    (a) => {
       if (!x) return;
-      const y = s.target.getStage();
+      const y = a.target.getStage();
       if (!y) return;
-      const S = y.getPointerPosition();
-      C.current = S ?? null, w.current === null && (w.current = requestAnimationFrame(() => {
-        w.current = null, k(C.current);
+      const D = y.getPointerPosition();
+      f.current = D ?? null, N.current === null && (N.current = requestAnimationFrame(() => {
+        N.current = null, m(f.current);
       }));
     },
     [x]
-  ), _ = [];
-  if (!a) {
-    for (let s = 1; s < De; s++) {
-      const y = n.w / De * s;
-      _.push(
-        /* @__PURE__ */ t(Y, { points: [y, 0, y, n.h], stroke: "#ffffff", strokeWidth: 0.5, opacity: 0.08 }, `gv-${s}`)
+  ), F = [];
+  if (!s) {
+    for (let a = 1; a < Ce; a++) {
+      const y = n.w / Ce * a;
+      F.push(
+        /* @__PURE__ */ t(G, { points: [y, 0, y, n.h], stroke: "#ffffff", strokeWidth: 0.5, opacity: 0.08 }, `gv-${a}`)
       );
     }
-    for (let s = 1; s < Se; s++) {
-      const y = n.h / Se * s;
-      _.push(
-        /* @__PURE__ */ t(Y, { points: [0, y, n.w, y], stroke: "#ffffff", strokeWidth: 0.5, opacity: 0.08 }, `gh-${s}`)
+    for (let a = 1; a < De; a++) {
+      const y = n.h / De * a;
+      F.push(
+        /* @__PURE__ */ t(G, { points: [0, y, n.w, y], stroke: "#ffffff", strokeWidth: 0.5, opacity: 0.08 }, `gh-${a}`)
       );
     }
   }
   return /* @__PURE__ */ u(
     "div",
     {
-      ref: f,
-      className: a ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
+      ref: h,
+      className: s ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
       style: { cursor: x ? "crosshair" : "default" },
       children: [
-        d && !a ? /* @__PURE__ */ t(
+        c && !s ? /* @__PURE__ */ t(
           "div",
           {
             className: "absolute inset-0 pointer-events-none [&>*]:w-full [&>*]:h-full [&>img]:object-cover [&>video]:object-cover",
             style: { width: n.w, height: n.h },
-            children: d
+            children: c
           }
         ) : null,
         /* @__PURE__ */ u(
@@ -934,85 +934,85 @@ function Wt({
           {
             width: n.w,
             height: n.h,
-            onClick: G,
+            onClick: V,
             onDblClick: v,
-            onMouseMove: D,
+            onMouseMove: g,
             children: [
               /* @__PURE__ */ u(de, { listening: !1, children: [
-                /* @__PURE__ */ t(Y, { points: [0, 0, n.w, 0, n.w, n.h, 0, n.h, 0, 0], stroke: "transparent", strokeWidth: 0 }),
-                _
+                /* @__PURE__ */ t(G, { points: [0, 0, n.w, 0, n.w, n.h, 0, n.h, 0, 0], stroke: "transparent", strokeWidth: 0 }),
+                F
               ] }),
-              /* @__PURE__ */ t(de, { children: e.map((s) => {
-                const y = s.id === o, S = Tt(s), N = h && h.zoneId === s.id ? h.points : s.points, O = Ce(N, n.w, n.h), j = s.kind === "tripwire", H = y && !x, J = I === s.id, ee = N.map((Z) => Z.x * n.w), te = N.map((Z) => Z.y * n.h), Oe = ee.length > 0 ? Math.min(...ee) : 0, je = ee.length > 0 ? Math.max(...ee) : 0, We = te.length > 0 ? Math.min(...te) : 0, Be = te.length > 0 ? Math.max(...te) : 0;
+              /* @__PURE__ */ t(de, { children: e.map((a) => {
+                const y = a.id === o, D = Tt(a), C = M && M.zoneId === a.id ? M.points : a.points, T = Ne(C, n.w, n.h), O = a.kind === "tripwire", H = y && !x, ee = w === a.id, te = C.map((I) => I.x * n.w), ne = C.map((I) => I.y * n.h), Re = te.length > 0 ? Math.min(...te) : 0, Le = te.length > 0 ? Math.max(...te) : 0, Fe = ne.length > 0 ? Math.min(...ne) : 0, Te = ne.length > 0 ? Math.max(...ne) : 0;
                 return /* @__PURE__ */ u(
                   ue,
                   {
-                    onClick: (Z) => {
-                      Z.cancelBubble = !0, x || r(s.id);
+                    onClick: (I) => {
+                      I.cancelBubble = !0, x || r(a.id);
                     },
                     children: [
                       /* @__PURE__ */ u(
                         ue,
                         {
                           draggable: H,
-                          dragBoundFunc: H ? (Z) => ({
-                            x: Math.max(-Oe, Math.min(n.w - je, Z.x)),
-                            y: Math.max(-We, Math.min(n.h - Be, Z.y))
+                          dragBoundFunc: H ? (I) => ({
+                            x: Math.max(-Re, Math.min(n.w - Le, I.x)),
+                            y: Math.max(-Fe, Math.min(n.h - Te, I.y))
                           }) : void 0,
                           onDragStart: H ? () => {
-                            g(s.id);
+                            _(a.id);
                           } : void 0,
-                          onDragEnd: H ? (Z) => {
-                            const $ = Z.target, q = $.x() / n.w, z = $.y() / n.h;
-                            if ($.position({ x: 0, y: 0 }), g(null), q === 0 && z === 0) return;
-                            const U = s.points.map((R) => ({ x: R.x + q, y: R.y + z }));
-                            m({ zoneId: s.id, points: U }), l(s.id, U);
+                          onDragEnd: H ? (I) => {
+                            const $ = I.target, B = $.x() / n.w, z = $.y() / n.h;
+                            if ($.position({ x: 0, y: 0 }), _(null), B === 0 && z === 0) return;
+                            const q = a.points.map((E) => ({ x: E.x + B, y: E.y + z }));
+                            k({ zoneId: a.id, points: q }), l(a.id, q);
                           } : void 0,
-                          onMouseEnter: (Z) => {
+                          onMouseEnter: (I) => {
                             if (!H) return;
-                            const $ = Z.target.getStage();
+                            const $ = I.target.getStage();
                             $ && ($.container().style.cursor = "move");
                           },
-                          onMouseLeave: (Z) => {
+                          onMouseLeave: (I) => {
                             if (!H) return;
-                            const $ = Z.target.getStage();
+                            const $ = I.target.getStage();
                             $ && ($.container().style.cursor = x ? "crosshair" : "default");
                           },
                           children: [
-                            j ? /* @__PURE__ */ t(
+                            O ? /* @__PURE__ */ t(
                               tt,
                               {
-                                points: O,
-                                stroke: S,
+                                points: T,
+                                stroke: D,
                                 strokeWidth: y ? 3 : 2,
-                                fill: S,
+                                fill: D,
                                 pointerLength: 10,
                                 pointerWidth: 8,
                                 opacity: y ? 1 : 0.8
                               }
                             ) : /* @__PURE__ */ t(
-                              Y,
+                              G,
                               {
-                                points: O,
+                                points: T,
                                 closed: !0,
-                                fill: S + (y ? jt : Ot),
-                                stroke: S,
+                                fill: D + (y ? Wt : Ot),
+                                stroke: D,
                                 strokeWidth: y ? 2.5 : 1.5,
                                 opacity: y ? 1 : 0.85
                               }
                             ),
-                            N.length > 0 && (() => {
-                              const Z = N.reduce((F, P) => F + P.x, 0), $ = N.reduce((F, P) => F + P.y, 0), q = Z / N.length, z = $ / N.length, U = Q({ x: q, y: z }, n.w, n.h), R = Math.max(40, s.name.length * 11 * 0.62);
+                            C.length > 0 && (() => {
+                              const I = C.reduce((R, A) => R + A.x, 0), $ = C.reduce((R, A) => R + A.y, 0), B = I / C.length, z = $ / C.length, q = Q({ x: B, y: z }, n.w, n.h), E = Math.max(40, a.name.length * 11 * 0.62);
                               return /* @__PURE__ */ t(
                                 nt,
                                 {
-                                  x: U.x - R / 2,
-                                  y: U.y - 7,
-                                  width: R,
+                                  x: q.x - E / 2,
+                                  y: q.y - 7,
+                                  width: E,
                                   align: "center",
-                                  text: s.name,
+                                  text: a.name,
                                   fontSize: 12,
-                                  fill: S,
+                                  fill: D,
                                   stroke: "#000000",
                                   strokeWidth: 3,
                                   fillAfterStrokeEnabled: !0,
@@ -1024,70 +1024,70 @@ function Wt({
                           ]
                         }
                       ),
-                      y && !J && N.map((Z, $) => {
-                        const q = Q(Z, n.w, n.h), z = j ? 2 : 3, U = N.length > z;
+                      y && !ee && C.map((I, $) => {
+                        const B = Q(I, n.w, n.h), z = O ? 2 : 3, q = C.length > z;
                         return /* @__PURE__ */ t(
                           fe,
                           {
-                            x: q.x,
-                            y: q.y,
+                            x: B.x,
+                            y: B.y,
                             radius: 5,
-                            fill: S,
+                            fill: D,
                             stroke: "#ffffff",
                             strokeWidth: 1.5,
                             draggable: !0,
-                            onDragMove: (R) => {
-                              const F = pe({ x: R.target.x(), y: R.target.y() }, n.w, n.h);
-                              m((P) => {
-                                const ce = (P && P.zoneId === s.id ? P.points : s.points).map((qe, Ue) => Ue === $ ? F : qe);
-                                return { zoneId: s.id, points: ce };
+                            onDragMove: (E) => {
+                              const R = pe({ x: E.target.x(), y: E.target.y() }, n.w, n.h);
+                              k((A) => {
+                                const ce = (A && A.zoneId === a.id ? A.points : a.points).map((Oe, We) => We === $ ? R : Oe);
+                                return { zoneId: a.id, points: ce };
                               });
                             },
-                            onDragEnd: (R) => {
-                              const F = pe({ x: R.target.x(), y: R.target.y() }, n.w, n.h), P = s.points.map((W, ce) => ce === $ ? F : W);
-                              m({ zoneId: s.id, points: P }), l(s.id, P);
+                            onDragEnd: (E) => {
+                              const R = pe({ x: E.target.x(), y: E.target.y() }, n.w, n.h), A = a.points.map((W, ce) => ce === $ ? R : W);
+                              k({ zoneId: a.id, points: A }), l(a.id, A);
                             },
-                            onContextMenu: (R) => {
-                              if (R.evt.preventDefault(), R.cancelBubble = !0, !U) return;
-                              const F = s.points.filter((P, W) => W !== $);
-                              l(s.id, F);
+                            onContextMenu: (E) => {
+                              if (E.evt.preventDefault(), E.cancelBubble = !0, !q) return;
+                              const R = a.points.filter((A, W) => W !== $);
+                              l(a.id, R);
                             }
                           },
                           `pt-${$}`
                         );
                       }),
-                      y && !J && !j && N.length >= 2 && N.map((Z, $) => {
-                        const q = N[($ + 1) % N.length], z = (Z.x + q.x) / 2, U = (Z.y + q.y) / 2, R = Q({ x: z, y: U }, n.w, n.h);
+                      y && !ee && !O && C.length >= 2 && C.map((I, $) => {
+                        const B = C[($ + 1) % C.length], z = (I.x + B.x) / 2, q = (I.y + B.y) / 2, E = Q({ x: z, y: q }, n.w, n.h);
                         return /* @__PURE__ */ t(
                           fe,
                           {
-                            x: R.x,
-                            y: R.y,
+                            x: E.x,
+                            y: E.y,
                             radius: 4,
                             fill: "#ffffff",
-                            stroke: S,
+                            stroke: D,
                             strokeWidth: 1.5,
                             opacity: 0.6,
-                            onMouseEnter: (F) => {
-                              const P = F.target;
-                              P.to({ radius: 6, opacity: 1, duration: 0.1 });
-                              const W = P.getStage();
+                            onMouseEnter: (R) => {
+                              const A = R.target;
+                              A.to({ radius: 6, opacity: 1, duration: 0.1 });
+                              const W = A.getStage();
                               W && (W.container().style.cursor = "copy");
                             },
-                            onMouseLeave: (F) => {
-                              const P = F.target;
-                              P.to({ radius: 4, opacity: 0.6, duration: 0.1 });
-                              const W = P.getStage();
+                            onMouseLeave: (R) => {
+                              const A = R.target;
+                              A.to({ radius: 4, opacity: 0.6, duration: 0.1 });
+                              const W = A.getStage();
                               W && (W.container().style.cursor = x ? "crosshair" : "default");
                             },
-                            onClick: (F) => {
-                              F.cancelBubble = !0;
-                              const P = $ + 1, W = [
-                                ...s.points.slice(0, P),
-                                { x: z, y: U },
-                                ...s.points.slice(P)
+                            onClick: (R) => {
+                              R.cancelBubble = !0;
+                              const A = $ + 1, W = [
+                                ...a.points.slice(0, A),
+                                { x: z, y: q },
+                                ...a.points.slice(A)
                               ];
-                              l(s.id, W);
+                              l(a.id, W);
                             }
                           },
                           `mid-${$}`
@@ -1095,26 +1095,26 @@ function Wt({
                       })
                     ]
                   },
-                  s.id
+                  a.id
                 );
               }) }),
-              /* @__PURE__ */ t(de, { listening: !1, children: x && p.length > 0 && /* @__PURE__ */ u(ue, { children: [
-                p.length >= 2 && i !== "tripwire" && /* @__PURE__ */ t(
-                  Y,
+              /* @__PURE__ */ t(de, { listening: !1, children: x && d.length > 0 && /* @__PURE__ */ u(ue, { children: [
+                d.length >= 2 && i !== "tripwire" && /* @__PURE__ */ t(
+                  G,
                   {
-                    points: Ce(p, n.w, n.h),
+                    points: Ne(d, n.w, n.h),
                     stroke: "#6366f1",
                     strokeWidth: 1.5,
                     dash: [6, 3],
                     opacity: 0.8
                   }
                 ),
-                p.length === 1 && i === "tripwire" && b && /* @__PURE__ */ t(
-                  Y,
+                d.length === 1 && i === "tripwire" && b && /* @__PURE__ */ t(
+                  G,
                   {
                     points: [
-                      p[0].x * n.w,
-                      p[0].y * n.h,
+                      d[0].x * n.w,
+                      d[0].y * n.h,
                       b.x,
                       b.y
                     ],
@@ -1124,12 +1124,12 @@ function Wt({
                     opacity: 0.7
                   }
                 ),
-                b && p.length >= 1 && i !== "tripwire" && /* @__PURE__ */ t(
-                  Y,
+                b && d.length >= 1 && i !== "tripwire" && /* @__PURE__ */ t(
+                  G,
                   {
                     points: [
-                      p[p.length - 1].x * n.w,
-                      p[p.length - 1].y * n.h,
+                      d[d.length - 1].x * n.w,
+                      d[d.length - 1].y * n.h,
                       b.x,
                       b.y
                     ],
@@ -1139,15 +1139,15 @@ function Wt({
                     opacity: 0.5
                   }
                 ),
-                p.map((s, y) => {
-                  const S = Q(s, n.w, n.h), N = y === 0;
+                d.map((a, y) => {
+                  const D = Q(a, n.w, n.h), C = y === 0;
                   return /* @__PURE__ */ t(
                     fe,
                     {
-                      x: S.x,
-                      y: S.y,
-                      radius: N && p.length >= 3 ? 7 : 4,
-                      fill: N && p.length >= 3 ? "#6366f1" : "#ffffff",
+                      x: D.x,
+                      y: D.y,
+                      radius: C && d.length >= 3 ? 7 : 4,
+                      fill: C && d.length >= 3 ? "#6366f1" : "#ffffff",
                       stroke: "#6366f1",
                       strokeWidth: 1.5,
                       opacity: 0.9
@@ -1159,12 +1159,12 @@ function Wt({
             ]
           }
         ),
-        x ? /* @__PURE__ */ t("div", { className: "px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700", children: i === "tripwire" ? "Click to set start point, click again to complete the tripwire" : p.length < 3 ? "Click to add points (min 3). Double-click or click first point to close." : "Continue adding points. Double-click or click first point to close." }) : null
+        x ? /* @__PURE__ */ t("div", { className: "px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700", children: i === "tripwire" ? "Click to set start point, click again to complete the tripwire" : d.length < 3 ? "Click to add points (min 3). Double-click or click first point to close." : "Continue adding points. Double-click or click first point to close." }) : null
       ]
     }
   );
 }
-const Bt = ve(Wt), qt = "#3b82f6", he = [
+const Bt = Ae(jt), qt = "#3b82f6", me = [
   "#3b82f6",
   "#10b981",
   "#f59e0b",
@@ -1178,9 +1178,9 @@ const Bt = ve(Wt), qt = "#3b82f6", he = [
 ];
 function Ut(e) {
   const o = new Set(e.map((r) => (r.color ?? "").toLowerCase()));
-  for (const r of he)
+  for (const r of me)
     if (!o.has(r.toLowerCase())) return r;
-  return he[e.length % he.length];
+  return me[e.length % me.length];
 }
 function Ht(e) {
   return {
@@ -1191,7 +1191,7 @@ function Ht(e) {
     points: [...e.polygon]
   };
 }
-function Me(e) {
+function Se(e) {
   return {
     id: e.id,
     name: e.name,
@@ -1201,73 +1201,73 @@ function Me(e) {
   };
 }
 function zt({ deviceId: e }) {
-  const o = ie(), r = ae(o.trpcClient, e), l = le(r?.state.zones), c = V(() => l?.zones ?? [], [l]), i = ye(), d = i?.drawingKind ?? null, a = i?.selectedZoneId ?? null, f = i?.editingDraft ?? null, n = V(() => c.map((b) => f && f.id === b.id ? {
-    id: f.id,
-    name: f.name,
-    kind: f.kind,
-    color: f.color,
-    points: [...f.points]
-  } : Ht(b)), [c, f]), E = A(
+  const o = ae(), r = le(o.trpcClient, e), l = xe(r?.state.zones), p = U(() => l?.zones ?? [], [l]), i = ye(), c = i?.drawingKind ?? null, s = i?.selectedZoneId ?? null, h = i?.editingDraft ?? null, n = U(() => p.map((b) => h && h.id === b.id ? {
+    id: h.id,
+    name: h.name,
+    kind: h.kind,
+    color: h.color,
+    points: [...h.points]
+  } : Ht(b)), [p, h]), S = P(
     async (b) => {
-      const k = { ...b, color: Ut(n) };
+      const m = { ...b, color: Ut(n) };
       try {
-        await r?.zones?.addZone({ zone: Me(k) });
-      } catch (I) {
-        console.error("zones.addZone failed", I);
+        await r?.zones?.addZone({ zone: Se(m) });
+      } catch (w) {
+        console.error("zones.addZone failed", w);
       }
-      i?.setSelectedZoneId(k.id), i?.setDrawingKind(null);
+      i?.setSelectedZoneId(m.id), i?.setDrawingKind(null);
     },
     [r, n, i]
-  ), p = A(
-    async (b, k) => {
-      if (f && f.id === b) {
-        i?.updateDraft({ points: k });
+  ), d = P(
+    async (b, m) => {
+      if (h && h.id === b) {
+        i?.updateDraft({ points: m });
         return;
       }
-      const I = n.find((g) => g.id === b);
-      if (I)
+      const w = n.find((_) => _.id === b);
+      if (w)
         try {
-          await r?.zones?.updateZone({ zone: Me({ ...I, points: k }) });
-        } catch (g) {
-          console.error("zones.updateZone failed", g);
+          await r?.zones?.updateZone({ zone: Se({ ...w, points: m }) });
+        } catch (_) {
+          console.error("zones.updateZone failed", _);
         }
     },
-    [r, n, f, i]
-  ), M = A(
+    [r, n, h, i]
+  ), Z = P(
     (b) => {
       if (b === null) {
         i?.discardDraft(), i?.setSelectedZoneId(null);
         return;
       }
-      const k = n.find((I) => I.id === b);
-      if (!k) {
+      const m = n.find((w) => w.id === b);
+      if (!m) {
         i?.setSelectedZoneId(b);
         return;
       }
       i?.enterDraft({
-        id: k.id,
-        kind: k.kind,
-        name: k.name,
-        color: k.color,
-        points: k.points
+        id: m.id,
+        kind: m.kind,
+        name: m.name,
+        color: m.color,
+        points: m.points
       });
     },
     [n, i]
   );
-  return n.length === 0 && d === null ? null : /* @__PURE__ */ t(
+  return n.length === 0 && c === null ? null : /* @__PURE__ */ t(
     Bt,
     {
       zones: n,
-      selectedZoneId: a,
-      onSelectZone: M,
-      onZonePointsChange: p,
-      onZoneComplete: E,
-      drawingKind: d,
+      selectedZoneId: s,
+      onSelectZone: Z,
+      onZonePointsChange: d,
+      onZoneComplete: S,
+      drawingKind: c,
       transparent: !0
     }
   );
 }
-const Vt = ve(zt), Gt = "#3b82f6";
+const Vt = Ae(zt), Gt = "#3b82f6";
 function Yt(e) {
   return {
     id: e.id,
@@ -1287,7 +1287,7 @@ function Xt(e) {
   };
 }
 function Kt({ deviceId: e }) {
-  const o = ie(), r = ae(o.trpcClient, e), l = le(r?.state.zones), c = V(() => l?.zones ?? [], [l]), i = V(() => c.map(Yt), [c]), d = ye(), a = d?.drawingKind ?? null, f = d?.selectedZoneId ?? null, n = d?.editingDraft ?? null, E = V(
+  const o = ae(), r = le(o.trpcClient, e), l = xe(r?.state.zones), p = U(() => l?.zones ?? [], [l]), i = U(() => p.map(Yt), [p]), c = ye(), s = c?.drawingKind ?? null, h = c?.selectedZoneId ?? null, n = c?.editingDraft ?? null, S = U(
     () => ({
       id: "zones",
       order: 100,
@@ -1296,15 +1296,15 @@ function Kt({ deviceId: e }) {
     }),
     [e]
   );
-  Ie(E);
-  const p = A(
-    (m) => {
-      if (m === null) {
-        d?.discardDraft(), d?.setSelectedZoneId(null);
+  Ze(S);
+  const d = P(
+    (k) => {
+      if (k === null) {
+        c?.discardDraft(), c?.setSelectedZoneId(null);
         return;
       }
-      const x = i.find((G) => G.id === m);
-      x && d?.enterDraft({
+      const x = i.find((V) => V.id === k);
+      x && c?.enterDraft({
         id: x.id,
         kind: x.kind,
         name: x.name,
@@ -1312,226 +1312,146 @@ function Kt({ deviceId: e }) {
         points: x.points
       });
     },
-    [i, d]
-  ), M = A(async () => {
-    const m = d?.editingDraft;
-    if (m) {
+    [i, c]
+  ), Z = P(async () => {
+    const k = c?.editingDraft;
+    if (k) {
       try {
         await r?.zones?.updateZone({
           zone: Xt({
-            id: m.id,
-            kind: m.kind,
-            name: m.name,
-            color: m.color,
-            points: [...m.points]
+            id: k.id,
+            kind: k.kind,
+            name: k.name,
+            color: k.color,
+            points: [...k.points]
           })
         });
       } catch (x) {
         console.error("zones.updateZone failed", x);
       }
-      d?.discardDraft(), d?.setSelectedZoneId(null);
+      c?.discardDraft(), c?.setSelectedZoneId(null);
     }
-  }, [r, d]), b = A(() => {
-    d?.discardDraft(), d?.setSelectedZoneId(null);
-  }, [d]), k = A(
-    async (m) => {
+  }, [r, c]), b = P(() => {
+    c?.discardDraft(), c?.setSelectedZoneId(null);
+  }, [c]), m = P(
+    async (k) => {
       try {
-        await r?.zones?.removeZone({ zoneId: m });
+        await r?.zones?.removeZone({ zoneId: k });
       } catch (x) {
         console.error("zones.removeZone failed", x);
       }
-      d?.selectedZoneId === m && d.setSelectedZoneId(null), d?.editingDraft?.id === m && d.discardDraft();
+      c?.selectedZoneId === k && c.setSelectedZoneId(null), c?.editingDraft?.id === k && c.discardDraft();
     },
-    [r, d]
-  ), I = A(
-    (m) => {
-      d?.startDrawing(m);
+    [r, c]
+  ), w = P(
+    (k) => {
+      c?.startDrawing(k);
     },
-    [d]
-  ), g = A(() => {
-    d?.setDrawingKind(null);
-  }, [d]), h = V(() => !n || !i.find((x) => x.id === n.id) ? null : {
+    [c]
+  ), _ = P(() => {
+    c?.setDrawingKind(null);
+  }, [c]), M = U(() => !n || !i.find((x) => x.id === n.id) ? null : {
     id: n.id,
     kind: n.kind,
     name: n.name,
     color: n.color,
     points: [...n.points]
   }, [i, n]);
-  return /* @__PURE__ */ u("div", { className: $e, children: [
-    /* @__PURE__ */ u("div", { className: Pe, children: [
-      /* @__PURE__ */ t("div", { className: Ae, children: /* @__PURE__ */ u("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ t("h2", { className: xe, children: "Detection Zones" }),
-        /* @__PURE__ */ u("p", { className: `${Ee} mt-0.5 leading-tight`, children: [
+  return /* @__PURE__ */ u("div", { className: Ge, children: [
+    /* @__PURE__ */ u("div", { className: Ye, children: [
+      /* @__PURE__ */ t("div", { className: Xe, children: /* @__PURE__ */ u("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ t("h2", { className: Ie, children: "Detection Zones" }),
+        /* @__PURE__ */ u("p", { className: `${J} mt-0.5 leading-tight`, children: [
           "Pick a shape below or use the ",
           /* @__PURE__ */ t("strong", { className: "text-foreground", children: "Zones" }),
           " button on the live frame to draw new polygons or tripwires. Behaviour is set per-stage in the rules editors below — a zone with no rule is observed by analytics but never filters."
         ] })
       ] }) }),
-      /* @__PURE__ */ u("div", { className: `${Re} flex flex-col gap-3`, children: [
+      /* @__PURE__ */ u("div", { className: `${Ke} flex flex-col gap-3`, children: [
         /* @__PURE__ */ t(
-          Pt,
+          At,
           {
             zones: i,
-            selectedZoneId: f,
-            drawingKind: a,
-            onSelectZone: p,
-            onDeleteZone: k,
-            onStartDraw: I,
-            onCancelDraw: g
+            selectedZoneId: h,
+            drawingKind: s,
+            onSelectZone: d,
+            onDeleteZone: m,
+            onStartDraw: w,
+            onCancelDraw: _
           }
         ),
-        h && /* @__PURE__ */ u(Ze, { children: [
+        M && /* @__PURE__ */ u(be, { children: [
           /* @__PURE__ */ t("div", { className: "border-t border-border" }),
           /* @__PURE__ */ t(
             Et,
             {
-              zone: h,
-              onSave: M,
+              zone: M,
+              onSave: Z,
               onDiscard: b,
-              onDelete: () => k(h.id)
+              onDelete: () => m(M.id)
             }
           )
         ] })
       ] })
     ] }),
     /* @__PURE__ */ u("div", { className: `grid grid-cols-1 2xl:grid-cols-2 ${Qe}`, children: [
-      /* @__PURE__ */ t(Ne, { dev: r, stage: "motion", zones: c }),
-      /* @__PURE__ */ t(Ne, { dev: r, stage: "detection", zones: c })
+      /* @__PURE__ */ t(we, { dev: r, stage: "motion", zones: p }),
+      /* @__PURE__ */ t(we, { dev: r, stage: "detection", zones: p })
     ] })
   ] });
 }
 function Qt(e) {
   return e.deviceId === void 0 ? /* @__PURE__ */ t("div", { className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning", children: "ZoneEditor requires a deviceId" }) : /* @__PURE__ */ t(Kt, { deviceId: e.deviceId });
 }
-function Jt({
-  options: e,
-  cells: o,
-  enabled: r,
-  sensitivity: l,
-  saving: c,
-  dirty: i,
-  onCellsChange: d,
-  onEnabledChange: a,
-  onSensitivityChange: f,
-  onSave: n,
-  onCancel: E
-}) {
-  const { gridWidth: p, gridHeight: M } = e, b = p * M, k = X(!1), I = X(!0), g = X(/* @__PURE__ */ new Set()), [, h] = L(0), m = A(
-    (_, T) => {
-      if (_ < 0 || _ >= b || o[_] === T) return;
-      const s = [...o];
-      for (; s.length < b; ) s.push(!1);
-      s.length = b, s[_] = T, d(s);
+function Jt({ options: e, cells: o, onCellsChange: r }) {
+  const { gridWidth: l, gridHeight: p } = e, i = l * p, c = Y(!1), s = Y(!0), h = Y(/* @__PURE__ */ new Set()), [, n] = L(0), S = P(
+    (m, w) => {
+      if (m < 0 || m >= i || o[m] === w) return;
+      const _ = [...o];
+      for (; _.length < i; ) _.push(!1);
+      _.length = i, _[m] = w, r(_);
     },
-    [o, b, d]
-  ), x = A(
-    (_) => (T) => {
-      T.preventDefault();
-      const s = !o[_];
-      k.current = !0, I.current = s, g.current = /* @__PURE__ */ new Set([_]), m(_, s), h((y) => y + 1);
+    [o, i, r]
+  ), d = P(
+    (m) => (w) => {
+      w.preventDefault();
+      const _ = !o[m];
+      c.current = !0, s.current = _, h.current = /* @__PURE__ */ new Set([m]), S(m, _), n((M) => M + 1);
     },
-    [o, m]
-  ), G = A(
-    (_) => () => {
-      k.current && (g.current.has(_) || (g.current.add(_), m(_, I.current)));
+    [o, S]
+  ), Z = P(
+    (m) => () => {
+      c.current && (h.current.has(m) || (h.current.add(m), S(m, s.current)));
     },
-    [m]
-  ), v = A(() => {
-    k.current && (k.current = !1, g.current = /* @__PURE__ */ new Set());
-  }, []), { min: w, max: C, step: D } = e.sensitivity;
-  return /* @__PURE__ */ u(
+    [S]
+  ), b = P(() => {
+    c.current && (c.current = !1, h.current = /* @__PURE__ */ new Set());
+  }, []);
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: "absolute inset-0 select-none",
-      onPointerUp: v,
-      onPointerLeave: v,
-      children: [
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: "absolute inset-0 grid",
-            style: {
-              gridTemplateColumns: `repeat(${String(p)}, 1fr)`,
-              gridTemplateRows: `repeat(${String(M)}, 1fr)`
-            },
-            children: Array.from({ length: b }, (_, T) => {
-              const s = o[T] === !0;
-              return /* @__PURE__ */ t(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `motion cell ${String(T)}`,
-                  "aria-pressed": s,
-                  onPointerDown: x(T),
-                  onPointerEnter: G(T),
-                  className: s ? "border border-primary/40 bg-primary/30 hover:bg-primary/40 transition-colors" : "border border-white/15 bg-transparent hover:bg-white/10 transition-colors"
-                },
-                T
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ u(
-          "div",
+      className: "absolute inset-0 select-none grid",
+      style: {
+        gridTemplateColumns: `repeat(${String(l)}, 1fr)`,
+        gridTemplateRows: `repeat(${String(p)}, 1fr)`
+      },
+      onPointerUp: b,
+      onPointerLeave: b,
+      children: Array.from({ length: i }, (m, w) => {
+        const _ = o[w] === !0;
+        return /* @__PURE__ */ t(
+          "button",
           {
-            className: "absolute bottom-2 left-2 flex flex-col gap-2 rounded-md border border-border bg-surface/95 px-3 py-2 shadow-lg backdrop-blur",
-            onPointerDown: (_) => _.stopPropagation(),
-            children: [
-              /* @__PURE__ */ u("label", { className: "flex items-center gap-2 text-[11px] text-foreground", children: [
-                /* @__PURE__ */ t(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: r,
-                    onChange: (_) => a(_.target.checked),
-                    className: "h-3 w-3 accent-primary"
-                  }
-                ),
-                /* @__PURE__ */ t("span", { className: "font-medium", children: "Motion detection enabled" })
-              ] }),
-              /* @__PURE__ */ u("label", { className: "flex items-center gap-2 text-[11px] text-foreground", children: [
-                /* @__PURE__ */ t("span", { className: "w-20 shrink-0", children: "Sensitivity" }),
-                /* @__PURE__ */ t(
-                  "input",
-                  {
-                    type: "range",
-                    min: w,
-                    max: C,
-                    step: D,
-                    value: l,
-                    onChange: (_) => f(Number(_.target.value)),
-                    className: "h-1 w-32 accent-primary"
-                  }
-                ),
-                /* @__PURE__ */ t("span", { className: "w-8 shrink-0 text-right tabular-nums text-foreground-subtle", children: l })
-              ] }),
-              /* @__PURE__ */ u("div", { className: "flex items-center gap-2 pt-0.5", children: [
-                /* @__PURE__ */ t(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: n,
-                    disabled: c || !i,
-                    className: "rounded border border-primary/50 bg-primary/15 px-2 py-1 text-[11px] font-medium text-primary hover:bg-primary/25 disabled:opacity-40 transition-colors",
-                    children: c ? "Saving…" : "Save"
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: E,
-                    disabled: c,
-                    className: "rounded border border-border bg-surface px-2 py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
-                    children: "Cancel"
-                  }
-                ),
-                /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle", children: "Click or drag cells to paint the motion mask." })
-              ] })
-            ]
-          }
-        )
-      ]
+            type: "button",
+            "aria-label": `motion cell ${String(w)}`,
+            "aria-pressed": _,
+            onPointerDown: d(w),
+            onPointerEnter: Z(w),
+            className: _ ? "border border-primary/40 bg-primary/30 hover:bg-primary/40 transition-colors" : "border border-white/15 bg-transparent hover:bg-white/10 transition-colors"
+          },
+          w
+        );
+      })
     }
   );
 }
@@ -1539,117 +1459,157 @@ function en(e) {
   const o = e instanceof Error ? e.message : String(e);
   return o.includes("provider not available") || o.includes("motion-zones");
 }
-function tn({ deviceId: e }) {
-  const o = ie(), r = ae(o.trpcClient, e), l = le(r?.state.motionZones), [c, i] = L(null), [d, a] = L(!1), [f, n] = L(null), [E, p] = L(!1), M = X(!1);
-  K(() => {
+function Me(e, o) {
+  const r = o.gridWidth * o.gridHeight, l = new Array(r);
+  for (let p = 0; p < r; p += 1) l[p] = e[p] === !0;
+  return l;
+}
+function tn(e, o) {
+  if (e.length !== o.length) return !1;
+  for (let r = 0; r < e.length; r += 1) if (e[r] !== o[r]) return !1;
+  return !0;
+}
+function nn({ deviceId: e }) {
+  const o = ae(), r = le(o.trpcClient, e), [l, p] = L(null), [i, c] = L(!1), [s, h] = L(null), [n, S] = L(null), [d, Z] = L(!1), b = Y(!1);
+  X(() => {
     if (!r) return;
-    let g = !1;
+    let f = !1;
     return (async () => {
       try {
-        const h = await r.motionZones?.getOptions({});
-        if (g || !h || (i(h), M.current)) return;
-        const m = await r.motionZones?.getStatus({});
-        if (g || !m) return;
-        M.current = !0, n({
-          enabled: m.enabled,
-          sensitivity: m.sensitivity,
-          cells: me(m.cells, h)
-        });
-      } catch (h) {
-        if (g) return;
-        en(h) ? a(!0) : console.error("motion-zones load failed", h);
+        const g = await r.motionZones?.getOptions({});
+        if (f || !g || (p(g), b.current)) return;
+        const F = await r.motionZones?.getStatus({});
+        if (f || !F) return;
+        b.current = !0;
+        const K = Me(F.cells, g);
+        S(K), h(K);
+      } catch (g) {
+        if (f) return;
+        en(g) ? c(!0) : console.error("motion-zones load failed", g);
       }
     })(), () => {
-      g = !0;
+      f = !0;
     };
   }, [r]);
-  const b = V(() => !f || !l ? !1 : f.enabled !== l.enabled || f.sensitivity !== l.sensitivity || !nn(f.cells, l.cells), [f, l]), k = A(async () => {
-    if (!(!f || !r?.motionZones)) {
-      p(!0);
+  const m = U(
+    () => s !== null && n !== null && !tn(s, n),
+    [s, n]
+  ), w = U(
+    () => s ? s.reduce((f, g) => g ? f + 1 : f, 0) : 0,
+    [s]
+  ), _ = l ? l.gridWidth * l.gridHeight : 0, M = P((f) => {
+    _ > 0 && h(new Array(_).fill(f));
+  }, [_]), k = P(() => {
+    h((f) => f && f.map((g) => !g));
+  }, []), x = P(() => {
+    n && h([...n]);
+  }, [n]), V = P(async () => {
+    if (!(!s || !r?.motionZones || !l)) {
+      Z(!0);
       try {
-        await r.motionZones.setZone({
-          patch: {
-            enabled: f.enabled,
-            sensitivity: f.sensitivity,
-            cells: [...f.cells]
-          }
-        });
-        const g = await r.motionZones.getStatus({});
-        g && c && n({
-          enabled: g.enabled,
-          sensitivity: g.sensitivity,
-          cells: me(g.cells, c)
-        });
-      } catch (g) {
-        console.error("motion-zones.setZone failed", g);
+        await r.motionZones.setZone({ patch: { cells: [...s] } });
+        const f = await r.motionZones.getStatus({});
+        if (f) {
+          const g = Me(f.cells, l);
+          S(g), h(g);
+        }
+      } catch (f) {
+        console.error("motion-zones.setZone failed", f);
       } finally {
-        p(!1);
+        Z(!1);
       }
     }
-  }, [f, r, c]), I = A(() => {
-    !l || !c || n({
-      enabled: l.enabled,
-      sensitivity: l.sensitivity,
-      cells: me(l.cells, c)
-    });
-  }, [l, c]);
-  return d || !c || !f ? null : /* @__PURE__ */ t(
-    Jt,
-    {
-      options: c,
-      cells: f.cells,
-      enabled: f.enabled,
-      sensitivity: f.sensitivity,
-      saving: E,
-      dirty: b,
-      onCellsChange: (g) => n((h) => h && { ...h, cells: g }),
-      onEnabledChange: (g) => n((h) => h && { ...h, enabled: g }),
-      onSensitivityChange: (g) => n((h) => h && { ...h, sensitivity: g }),
-      onSave: k,
-      onCancel: I
-    }
-  );
-}
-function me(e, o) {
-  const r = o.gridWidth * o.gridHeight, l = new Array(r);
-  for (let c = 0; c < r; c += 1) l[c] = e[c] === !0;
-  return l;
-}
-function nn(e, o) {
-  if (e.length !== o.length) return !1;
-  for (let r = 0; r < e.length; r += 1)
-    if (e[r] !== o[r]) return !1;
-  return !0;
-}
-const rn = ve(tn);
-function on({ deviceId: e }) {
-  const o = V(
-    () => ({
+  }, [s, r, l]), v = U(
+    () => !i && l && s ? {
       id: "motion-zones",
       order: 110,
       // above the analytics zones overlay (order 100)
-      node: /* @__PURE__ */ t(rn, { deviceId: e })
-    }),
-    [e]
+      node: /* @__PURE__ */ t(Jt, { options: l, cells: s, onCellsChange: h })
+    } : null,
+    [i, l, s]
   );
-  return Ie(o), /* @__PURE__ */ t("div", { className: $e, children: /* @__PURE__ */ u("div", { className: Pe, children: [
-    /* @__PURE__ */ t("div", { className: Ae, children: /* @__PURE__ */ t("h2", { className: xe, children: "Motion Zones" }) }),
-    /* @__PURE__ */ t("div", { className: Re, children: /* @__PURE__ */ u("p", { className: `${Ee} leading-relaxed`, children: [
-      "The on-camera motion-detection grid is shown on the live frame while this section is open. Click or drag cells to paint the region the camera watches, toggle detection on or off, and tune sensitivity — then ",
+  return Ze(v), /* @__PURE__ */ t("div", { className: "flex flex-col gap-3", children: i ? /* @__PURE__ */ t("p", { className: `${J} leading-relaxed`, children: "This camera doesn't expose an on-board motion-detection grid." }) : !i && l !== null && s !== null ? /* @__PURE__ */ u(be, { children: [
+    /* @__PURE__ */ u("p", { className: `${J} leading-relaxed`, children: [
+      "Click or drag cells on the live frame to paint the region the camera watches for motion, then",
+      " ",
       /* @__PURE__ */ t("strong", { className: "text-foreground", children: "Save" }),
+      " to push the mask to the camera. Detection on/off and sensitivity are set in the",
       " ",
-      "to push the mask to the camera. Cameras without an on-board motion grid show no overlay."
-    ] }) })
-  ] }) });
+      /* @__PURE__ */ t("strong", { className: "text-foreground", children: "On-camera motion" }),
+      " section."
+    ] }),
+    /* @__PURE__ */ u("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: () => M(!0),
+          disabled: d,
+          className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+          children: "All on"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: () => M(!1),
+          disabled: d,
+          className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+          children: "All off"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: k,
+          disabled: d,
+          className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+          children: "Invert"
+        }
+      ),
+      /* @__PURE__ */ u("span", { className: `${J} ml-1 tabular-nums`, children: [
+        w,
+        " / ",
+        _,
+        " cells · ",
+        l.gridWidth,
+        "×",
+        l.gridHeight
+      ] }),
+      /* @__PURE__ */ t("span", { className: "flex-1" }),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: x,
+          disabled: d || !m,
+          className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+          children: "Revert"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: () => void V(),
+          disabled: d || !m,
+          className: "rounded-md border border-primary/50 bg-primary/15 px-2.5 py-1 text-[11px] font-medium text-primary hover:bg-primary/25 disabled:opacity-40 transition-colors",
+          children: d ? "Saving…" : "Save"
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ t("p", { className: `${J} leading-relaxed`, children: "Loading the camera's motion grid…" }) });
 }
-function sn(e) {
-  return e.deviceId === void 0 ? /* @__PURE__ */ t("div", { className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning", children: "MotionZonesEditor requires a deviceId" }) : /* @__PURE__ */ t(on, { deviceId: e.deviceId });
+function rn(e) {
+  return e.deviceId === void 0 ? /* @__PURE__ */ t("div", { className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning", children: "MotionZonesEditor requires a deviceId" }) : /* @__PURE__ */ t(nn, { deviceId: e.deviceId });
 }
-const gn = {
+const mn = {
   "pipeline-quick-stats": Mt,
   "zone-editor": Qt,
-  "motion-zones-editor": sn
+  "motion-zones-editor": rn
 };
 export {
-  gn as default
+  mn as default
 };