@camstack/addon-pipeline-orchestrator 0.1.22 → 0.1.23

package/dist/_stub.js

@@ -1,24 +1,24 @@
-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 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";
+import { _ as t, a as c, b as De } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.mjs-Cg6QsnjR.mjs";
+import { _ as Te } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.mjs-DoWbefqS.mjs";
+import { _ as xe, a as Oe, b as je, c as fe, d as he, e as We, f as me, g as ue, h as Be, i as ge, j as Me, k as qe, l as Ue, m as ee, n as te, o as ne, p as He, q as Ve, r as Ge, s as Ye, t as ze, u as Xe, v as Ke } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.mjs-DEuqbomC.mjs";
+import { a as Ie, b as pe, c as G, d as H, e as X, f as Se, g as se, h as T } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react__loadShare__.mjs-0qpbQxoV.mjs";
+import { _ as Qe } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_types__loadShare__.mjs-C4HmLg0z.mjs";
+import { _ as V, a as Je, b as ae, c as ie, d as et, e as tt, f as le } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react_mf_2_konva__loadShare__.mjs-DSZIXeAx.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 rt = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ot = (e) => e.replace(
+const nt = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), rt = (e) => e.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (o, r, l) => l ? l.toUpperCase() : r.toLowerCase()
-), ke = (e) => {
-  const o = ot(e);
-  return o.charAt(0).toUpperCase() + o.slice(1);
-}, 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")
+  (i, r, u) => u ? u.toUpperCase() : r.toLowerCase()
+), _e = (e) => {
+  const i = rt(e);
+  return i.charAt(0).toUpperCase() + i.slice(1);
+}, $e = (...e) => e.filter((i, r, u) => !!i && i.trim() !== "" && u.indexOf(i) === r).join(" ").trim(), ot = (e) => {
+  for (const i in e)
+    if (i.startsWith("aria-") || i === "role" || i === "title")
       return !0;
 };
 /**
@@ -27,7 +27,7 @@ const rt = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ot = (
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var it = {
+var st = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -44,32 +44,32 @@ 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 = $e(
+const at = Ie(
   ({
     color: e = "currentColor",
-    size: o = 24,
+    size: i = 24,
     strokeWidth: r = 2,
-    absoluteStrokeWidth: l,
-    className: p = "",
-    children: i,
-    iconNode: c,
-    ...s
-  }, h) => ge(
+    absoluteStrokeWidth: u,
+    className: f = "",
+    children: s,
+    iconNode: l,
+    ...a
+  }, g) => pe(
     "svg",
     {
-      ref: h,
-      ...it,
-      width: o,
-      height: o,
+      ref: g,
+      ...st,
+      width: i,
+      height: i,
       stroke: e,
-      strokeWidth: l ? Number(r) * 24 / Number(o) : r,
-      className: Pe("lucide", p),
-      ...!i && !st(s) && { "aria-hidden": "true" },
-      ...s
+      strokeWidth: u ? Number(r) * 24 / Number(i) : r,
+      className: $e("lucide", f),
+      ...!s && !ot(a) && { "aria-hidden": "true" },
+      ...a
     },
     [
-      ...c.map(([n, S]) => ge(n, S)),
-      ...Array.isArray(i) ? i : [i]
+      ...l.map(([n, F]) => pe(n, F)),
+      ...Array.isArray(s) ? s : [s]
     ]
   )
 );
@@ -79,20 +79,20 @@ const at = $e(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const j = (e, o) => {
-  const r = $e(
-    ({ className: l, ...p }, i) => ge(at, {
-      ref: i,
-      iconNode: o,
-      className: Pe(
-        `lucide-${rt(ke(e))}`,
+const O = (e, i) => {
+  const r = Ie(
+    ({ className: u, ...f }, s) => pe(at, {
+      ref: s,
+      iconNode: i,
+      className: $e(
+        `lucide-${nt(_e(e))}`,
         `lucide-${e}`,
-        l
+        u
       ),
-      ...p
+      ...f
     })
   );
-  return r.displayName = ke(e), r;
+  return r.displayName = _e(e), r;
 };
 /**
  * @license lucide-react v0.511.0 - ISC
@@ -100,7 +100,7 @@ const j = (e, o) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const lt = [
+const it = [
   [
     "path",
     {
@@ -108,21 +108,21 @@ const lt = [
       key: "169zse"
     }
   ]
-], ct = j("activity", lt);
+], lt = O("activity", it);
 /**
  * @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 = j("check", dt);
+const ct = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], dt = O("check", ct);
 /**
  * @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 ft = [
+const ut = [
   ["path", { d: "M12 20v2", key: "1lh1kg" }],
   ["path", { d: "M12 2v2", key: "tus03m" }],
   ["path", { d: "M17 20v2", key: "1rnc9c" }],
@@ -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 = j("cpu", ft);
+], pt = O("cpu", ut);
 /**
  * @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 mt = [
+const ft = [
   [
     "path",
     {
@@ -153,24 +153,24 @@ const mt = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], ht = j("eye", mt);
+], ht = O("eye", 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 gt = [
+const mt = [
   ["path", { d: "m12 14 4-4", key: "9kzdfg" }],
   ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0", key: "19p75a" }]
-], bt = j("gauge", gt);
+], gt = O("gauge", mt);
 /**
  * @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 yt = [
+const bt = [
   [
     "path",
     {
@@ -178,31 +178,31 @@ const yt = [
       key: "yt0hxn"
     }
   ]
-], xt = j("hexagon", yt);
+], yt = O("hexagon", bt);
 /**
  * @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" }]], _t = j("minus", vt);
+const xt = [["path", { d: "M5 12h14", key: "1ays0h" }]], _t = O("minus", xt);
 /**
  * @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 kt = [
+const vt = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
-], wt = j("plus", kt);
+], kt = O("plus", 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 Nt = [
+const wt = [
   [
     "path",
     {
@@ -212,167 +212,167 @@ 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 = j("save", Nt);
+], Nt = O("save", wt);
 /**
  * @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 = [
+const Ct = [
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
   ["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" }]
-], ve = j("trash-2", Dt);
+], be = O("trash-2", Ct);
 /**
  * @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 St = [
+const Dt = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], Ee = j("x", St);
+], Ze = O("x", Dt);
 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(It, { deviceId: e.deviceId });
 }
 function It({ deviceId: e }) {
-  _e(
+  xe(
     ["pipelineOrchestrator", "getPipelineAssignment"],
     ["pipeline.camera-assigned", "pipeline.camera-unassigned", "pipeline.camera-updated"]
-  ), _e(
+  ), xe(
     ["pipelineRunner", "getCameraMetrics"],
     ["pipeline.camera-metrics-snapshot"]
   );
-  const { data: o } = Be(
+  const { data: i } = Oe(
     { deviceId: e },
     { staleTime: 3e4 }
-  ), r = o?.agentNodeId ?? null, p = typeof r == "string" && r.length > 0 && !r.startsWith("addon:") ? r : void 0, { data: i } = qe(
+  ), r = i?.agentNodeId ?? null, f = typeof r == "string" && r.length > 0 && !r.startsWith("addon:") ? r : void 0, { data: s } = je(
     {
       deviceId: e,
-      ...p ? { nodeId: p } : {}
+      ...f ? { nodeId: f } : {}
     },
     { staleTime: 2e3, retry: !1 }
-  ), c = ae(), s = le(c.trpcClient, e), { data: h } = je({
+  ), l = fe(), a = he(l.trpcClient, e), { data: g } = Te({
     queryKey: ["device", e, "pipelineAnalytics.getActiveTracks"],
-    queryFn: () => s?.pipelineAnalytics?.getActiveTracks({}) ?? [],
-    enabled: !!s,
+    queryFn: () => a?.pipelineAnalytics?.getActiveTracks({}) ?? [],
+    enabled: !!a,
     refetchInterval: 5e3,
     retry: !1
-  }), 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: [
+  }), n = s?.phase ?? null, F = s?.detectionMode ?? null, d = Number(s?.actualFps ?? 0), $ = Number(s?.configuredFps ?? 0), b = Number(s?.avgInferenceTimeMs ?? 0), k = Number(s?.queueDepth ?? 0), Z = Number(s?.droppedFrames ?? 0), L = We(n ?? "watching"), S = g?.length ?? 0;
+  return /* @__PURE__ */ t("div", { className: "@container", style: { containerType: "inline-size" }, children: /* @__PURE__ */ c("div", { className: "grid grid-cols-1 @[360px]:grid-cols-2 @[720px]:grid-cols-4 gap-3", children: [
     /* @__PURE__ */ t(
-      ie,
+      re,
       {
-        icon: ct,
+        icon: lt,
         label: "Phase",
-        value: _.label,
-        color: _.textColor,
-        subtext: S ?? void 0
+        value: L.label,
+        color: L.textColor,
+        subtext: F ?? void 0
       }
     ),
     /* @__PURE__ */ t(
-      ie,
+      re,
       {
-        icon: bt,
+        icon: gt,
         label: "Detection FPS",
         value: `${d.toFixed(1)}`,
-        subtext: Z > 0 ? `target: ${Z}` : void 0
+        subtext: $ > 0 ? `target: ${$}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      ie,
+      re,
       {
         icon: pt,
         label: "Inference",
         value: `${b.toFixed(1)} ms`,
-        subtext: m > 0 ? `queue: ${m}` : void 0
+        subtext: k > 0 ? `queue: ${k}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      ie,
+      re,
       {
         icon: ht,
         label: "Active Tracks",
-        value: String(M),
-        subtext: w > 0 ? `dropped: ${w}` : void 0
+        value: String(S),
+        subtext: Z > 0 ? `dropped: ${Z}` : void 0
       }
     )
   ] }) });
 }
-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: [
+function re({ icon: e, label: i, value: r, subtext: u, color: f }) {
+  return /* @__PURE__ */ c("div", { className: "rounded-lg border border-border bg-surface p-3 min-w-0", children: [
+    /* @__PURE__ */ c("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" }),
       /* @__PURE__ */ t(
         "span",
         {
           className: "text-[10px] text-foreground-subtle uppercase tracking-wider truncate",
-          title: o,
-          children: o
+          title: i,
+          children: i
         }
       )
     ] }),
     /* @__PURE__ */ t(
       "p",
       {
-        className: `text-lg font-semibold leading-tight truncate ${p ?? "text-foreground"}`,
+        className: `text-lg font-semibold leading-tight truncate ${f ?? "text-foreground"}`,
         title: r,
         children: r
       }
     ),
-    l && /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle mt-0.5 truncate", title: l, children: l })
+    u && /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle mt-0.5 truncate", title: u, children: u })
   ] });
 }
-const Zt = {
+const St = {
   polygon: "Polygon",
   tripwire: "Tripwire"
 }, $t = {
   polygon: "bg-info/10 text-info",
   tripwire: "bg-warning/10 text-warning"
 };
-function At({
+function Zt({
   zones: e,
-  selectedZoneId: o,
+  selectedZoneId: i,
   drawingKind: r,
-  onSelectZone: l,
-  onDeleteZone: p,
-  onStartDraw: i,
-  onCancelDraw: c
+  onSelectZone: u,
+  onDeleteZone: f,
+  onStartDraw: s,
+  onCancelDraw: l
 }) {
-  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: r ? /* @__PURE__ */ u(
+  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: r ? /* @__PURE__ */ c(
       "button",
       {
         type: "button",
-        onClick: c,
+        onClick: l,
         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(Ee, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ t(Ze, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ t("span", { children: "Cancel" })
         ]
       }
-    ) : /* @__PURE__ */ u(be, { children: [
+    ) : /* @__PURE__ */ c(De, { children: [
       /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          onClick: () => i("polygon"),
+          onClick: () => s("polygon"),
           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 polygon zone",
           "aria-label": "Add polygon zone",
-          children: /* @__PURE__ */ t(xt, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ t(yt, { className: "h-4 w-4" })
         }
       ),
       /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          onClick: () => i("tripwire"),
+          onClick: () => s("tripwire"),
           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",
@@ -380,30 +380,30 @@ function At({
         }
       )
     ] }) }),
-    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(
+    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 g = a.id === i;
+      return /* @__PURE__ */ c(
         "div",
         {
           className: [
             "flex items-center gap-1.5 rounded border px-1.5 py-1 cursor-pointer transition-colors",
-            h ? "border-primary/50 bg-primary/10" : "border-border bg-surface hover:bg-surface-hover"
+            g ? "border-primary/50 bg-primary/10" : "border-border bg-surface hover:bg-surface-hover"
           ].join(" "),
-          onClick: () => l(h ? null : s.id),
+          onClick: () => u(g ? null : a.id),
           children: [
             /* @__PURE__ */ t(
               "div",
               {
                 className: "h-2.5 w-2.5 rounded-sm flex-shrink-0",
-                style: { backgroundColor: s.color }
+                style: { backgroundColor: a.color }
               }
             ),
-            /* @__PURE__ */ t("span", { className: "flex-1 truncate text-[11px] font-medium text-foreground", children: s.name }),
+            /* @__PURE__ */ t("span", { className: "flex-1 truncate text-[11px] font-medium text-foreground", children: a.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[s.kind]}`,
-                children: Zt[s.kind]
+                className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium flex-shrink-0 ${$t[a.kind]}`,
+                children: St[a.kind]
               }
             ),
             /* @__PURE__ */ t(
@@ -413,19 +413,19 @@ function At({
                 title: "Delete zone",
                 className: "p-0.5 text-foreground-subtle hover:text-danger rounded transition-colors flex-shrink-0",
                 onClick: (n) => {
-                  n.stopPropagation(), p(s.id);
+                  n.stopPropagation(), f(a.id);
                 },
-                children: /* @__PURE__ */ t(ve, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ t(be, { className: "h-3 w-3" })
               }
             )
           ]
         },
-        s.id
+        a.id
       );
     }) })
   ] });
 }
-const Pt = [
+const At = [
   "#3b82f6",
   // blue
   "#10b981",
@@ -443,10 +443,10 @@ const Pt = [
   "#ec4899"
   // pink
 ];
-function Et({ zone: e, onSave: o, onDiscard: r, onDelete: l }) {
-  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: [
+function Ft({ zone: e, onSave: i, onDiscard: r, onDelete: u }) {
+  const f = me(), s = (a) => f?.updateDraft({ name: a }), l = (a) => f?.updateDraft({ color: a });
+  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ t("h3", { className: "text-[10px] font-semibold text-foreground-subtle uppercase tracking-wider", children: "Editing" }),
       /* @__PURE__ */ t("span", { className: "inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium bg-surface border border-border text-foreground-subtle", children: e.kind === "tripwire" ? "Tripwire" : "Polygon" })
     ] }),
@@ -454,70 +454,70 @@ function Et({ zone: e, onSave: o, onDiscard: r, onDelete: l }) {
       "input",
       {
         type: "text",
-        className: he,
+        className: ue,
         value: e.name,
         autoFocus: !0,
-        onChange: (s) => i(s.target.value),
-        onKeyDown: (s) => {
-          s.key === "Enter" ? (s.preventDefault(), o()) : s.key === "Escape" && (s.preventDefault(), r());
+        onChange: (a) => s(a.target.value),
+        onKeyDown: (a) => {
+          a.key === "Enter" ? (a.preventDefault(), i()) : a.key === "Escape" && (a.preventDefault(), r());
         },
         placeholder: "Zone name"
       }
     ),
-    /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: Pt.map((s) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: At.map((a) => /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        title: s,
+        title: a,
         className: [
           "h-4 w-4 rounded border-2 cursor-pointer transition-transform hover:scale-110",
-          e.color === s ? "border-white scale-110" : "border-transparent"
+          e.color === a ? "border-white scale-110" : "border-transparent"
         ].join(" "),
-        style: { backgroundColor: s },
-        onClick: () => c(s)
+        style: { backgroundColor: a },
+        onClick: () => l(a)
       },
-      s
+      a
     )) }),
-    /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ t(
         "input",
         {
           type: "color",
           className: "h-6 w-6 rounded border border-border bg-background cursor-pointer p-0.5",
           value: e.color,
-          onChange: (s) => c(s.target.value)
+          onChange: (a) => l(a.target.value)
         }
       ),
       /* @__PURE__ */ t(
         "input",
         {
           type: "text",
-          className: `${he} font-mono`,
+          className: `${ue} font-mono`,
           value: e.color,
           placeholder: "#000000",
-          onChange: (s) => c(s.target.value)
+          onChange: (a) => l(a.target.value)
         }
       )
     ] }),
-    /* @__PURE__ */ u("p", { className: "text-[9px] text-foreground-subtle leading-tight", children: [
+    /* @__PURE__ */ c("p", { className: "text-[9px] text-foreground-subtle leading-tight", children: [
       e.kind === "tripwire" ? "2 points" : `${e.points.length} pts`,
       e.points.length > 0 && " · drag handles to reshape"
     ] }),
-    /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ u(
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ c(
         "button",
         {
           type: "button",
-          onClick: o,
+          onClick: i,
           className: "inline-flex items-center justify-center gap-1 rounded border border-primary/40 bg-primary/10 text-primary hover:bg-primary/20 transition-colors h-7 flex-1 text-[11px] font-medium",
           title: "Save changes (Enter)",
           children: [
-            /* @__PURE__ */ t(ut, { className: "h-3 w-3" }),
+            /* @__PURE__ */ t(dt, { className: "h-3 w-3" }),
             "Save"
           ]
         }
       ),
-      /* @__PURE__ */ u(
+      /* @__PURE__ */ c(
         "button",
         {
           type: "button",
@@ -525,30 +525,30 @@ 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(Ee, { className: "h-3 w-3" }),
+            /* @__PURE__ */ t(Ze, { className: "h-3 w-3" }),
             "Discard"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ c(
       "button",
       {
         type: "button",
-        onClick: l,
-        className: `${He} w-full`,
+        onClick: u,
+        className: `${Be} w-full`,
         children: [
-          /* @__PURE__ */ t(ve, { className: "h-3 w-3" }),
+          /* @__PURE__ */ t(be, { className: "h-3 w-3" }),
           "Delete"
         ]
       }
     )
   ] });
 }
-const Rt = Je.map(
+const Lt = Qe.map(
   (e) => ({ id: e.id, label: e.name })
 );
-function Lt(e) {
+function Et(e) {
   return {
     id: e.id,
     name: e.name ?? "",
@@ -558,26 +558,26 @@ function Lt(e) {
     enabled: e.enabled !== !1
   };
 }
-function Ft(e) {
-  const o = {
+function Pt(e) {
+  const i = {
     id: e.id,
     zoneIds: e.zoneIds,
     mode: e.mode,
     enabled: e.enabled
   };
-  return e.name && (o.name = e.name), e.classFilter.length > 0 && (o.classFilter = e.classFilter), o;
+  return e.name && (i.name = e.name), e.classFilter.length > 0 && (i.classFilter = e.classFilter), i;
 }
-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);
+function ve({ dev: e, stage: i, zones: r, title: u }) {
+  const f = ge(e?.state.zoneRules), s = G(
+    () => f?.[i] ?? [],
+    [f, i]
+  ), [l, a] = H([]), [g, n] = H(!1), [F, d] = H(!1), [$, b] = H(null);
   X(() => {
-    h || s(i.map(Lt));
-  }, [i, h]);
-  const m = () => {
-    s((v) => [
-      ...v,
+    g || a(s.map(Et));
+  }, [s, g]);
+  const k = () => {
+    a((m) => [
+      ...m,
       {
         id: crypto.randomUUID(),
         name: "",
@@ -587,98 +587,98 @@ function we({ dev: e, stage: o, zones: r, title: l }) {
         enabled: !0
       }
     ]), n(!0);
-  }, 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 };
+  }, Z = (m, _) => {
+    a(
+      (w) => w.map((N, B) => {
+        if (B !== m) return N;
+        const o = N.classFilter.includes(_) ? N.classFilter.filter((p) => p !== _) : [...N.classFilter, _];
+        return { ...N, classFilter: o };
       })
     ), n(!0);
-  }, _ = (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 };
+  }, L = (m, _) => {
+    a(
+      (w) => w.map((N, B) => {
+        if (B !== m) return N;
+        const o = N.zoneIds.includes(_) ? N.zoneIds.filter((p) => p !== _) : [...N.zoneIds, _];
+        return { ...N, zoneIds: o };
       })
     ), 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 () => {
+  }, S = (m) => {
+    a((_) => _.filter((w, N) => N !== m)), n(!0);
+  }, y = (m, _) => {
+    a((w) => w.map((N, B) => B === m ? { ...N, ..._ } : N)), n(!0);
+  }, h = async () => {
     if (e?.zoneRules) {
       d(!0), b(null);
       try {
-        await e.zoneRules.setRules({ stage: o, rules: c.map(Ft) }), n(!1);
-      } catch (v) {
-        b(v instanceof Error ? v.message : String(v));
+        await e.zoneRules.setRules({ stage: i, rules: l.map(Pt) }), n(!1);
+      } catch (m) {
+        b(m instanceof Error ? m.message : String(m));
       } finally {
         d(!1);
       }
     }
-  }, 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: `${Ie} truncate`, children: l ?? `${o === "motion" ? "Motion" : "Detection"} Rules` }),
-      /* @__PURE__ */ u("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-        /* @__PURE__ */ u(
+  }, Y = g && !!e?.zoneRules && !F;
+  return /* @__PURE__ */ c("div", { className: "rounded-md border border-border bg-surface/40 p-2.5", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-2 gap-2", children: [
+      /* @__PURE__ */ t("h3", { className: `${Me} truncate`, children: u ?? `${i === "motion" ? "Motion" : "Detection"} Rules` }),
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+        /* @__PURE__ */ c(
           "button",
           {
             type: "button",
-            onClick: m,
+            onClick: k,
             disabled: r.length === 0 || !e,
-            className: ze,
+            className: qe,
             title: "Add rule",
             children: [
-              /* @__PURE__ */ t(wt, { className: "h-2.5 w-2.5" }),
+              /* @__PURE__ */ t(kt, { className: "h-2.5 w-2.5" }),
               " Add"
             ]
           }
         ),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ c(
           "button",
           {
             type: "button",
             onClick: () => {
-              x();
+              h();
             },
-            disabled: !V,
-            className: Ve,
+            disabled: !Y,
+            className: Ue,
             children: [
-              /* @__PURE__ */ t(Ct, { className: "h-2.5 w-2.5" }),
-              S ? "…" : "Save"
+              /* @__PURE__ */ t(Nt, { className: "h-2.5 w-2.5" }),
+              F ? "…" : "Save"
             ]
           }
         )
       ] })
     ] }),
-    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(
+    l.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: l.map((m, _) => /* @__PURE__ */ c(
       "div",
       {
         className: "rounded border border-border/50 bg-background/40 px-2 py-1.5 flex flex-col gap-1.5 overflow-hidden",
         children: [
-          /* @__PURE__ */ u("div", { className: "grid grid-cols-[auto_1fr_auto] items-center gap-1.5", children: [
+          /* @__PURE__ */ c("div", { className: "grid grid-cols-[auto_1fr_auto] items-center gap-1.5", children: [
             /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 role: "switch",
-                "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: () => k(N, { enabled: !v.enabled }),
+                "aria-checked": m.enabled,
+                "aria-label": m.enabled ? "Disable rule" : "Enable rule",
+                title: m.enabled ? "Rule is active — click to disable" : "Rule is disabled — click to enable",
+                onClick: () => y(_, { enabled: !m.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"
+                  m.enabled ? "border-primary/50 bg-primary/20 text-primary" : "border-border bg-surface text-foreground-subtle"
                 ].join(" "),
                 children: /* @__PURE__ */ t(
                   "span",
                   {
                     className: [
                       "h-3 w-3 rounded-full transition-transform",
-                      v.enabled ? "translate-x-1.5 bg-primary" : "-translate-x-1.5 bg-foreground-subtle"
+                      m.enabled ? "translate-x-1.5 bg-primary" : "-translate-x-1.5 bg-foreground-subtle"
                     ].join(" ")
                   }
                 )
@@ -687,10 +687,10 @@ function we({ dev: e, stage: o, zones: r, title: l }) {
             /* @__PURE__ */ t(
               "input",
               {
-                className: `${he} min-w-0`,
+                className: `${ue} min-w-0`,
                 placeholder: "Rule name (optional)",
-                value: v.name,
-                onChange: (f) => k(N, { name: f.target.value })
+                value: m.name,
+                onChange: (w) => y(_, { name: w.target.value })
               }
             ),
             /* @__PURE__ */ t(
@@ -699,20 +699,20 @@ function we({ dev: e, stage: o, zones: r, title: l }) {
                 type: "button",
                 title: "Remove rule",
                 "aria-label": "Remove rule",
-                onClick: () => M(N),
+                onClick: () => S(_),
                 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(ve, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ t(be, { className: "h-3.5 w-3.5" })
               }
             )
           ] }),
-          /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+          /* @__PURE__ */ c("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: "Mode" }),
             /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: () => k(N, { mode: "include" }),
-                className: `${re} ${v.mode === "include" ? oe : se}`,
+                onClick: () => y(_, { mode: "include" }),
+                className: `${ee} ${m.mode === "include" ? te : ne}`,
                 children: "Include"
               }
             ),
@@ -720,299 +720,299 @@ function we({ dev: e, stage: o, zones: r, title: l }) {
               "button",
               {
                 type: "button",
-                onClick: () => k(N, { mode: "exclude" }),
-                className: `${re} ${v.mode === "exclude" ? oe : se}`,
+                onClick: () => y(_, { mode: "exclude" }),
+                className: `${ee} ${m.mode === "exclude" ? te : ne}`,
                 children: "Exclude"
               }
             )
           ] }),
-          /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+          /* @__PURE__ */ c("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((f) => {
-              const g = v.zoneIds.includes(f.id);
-              return /* @__PURE__ */ u(
+            r.length === 0 ? /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic", children: "none" }) : r.map((w) => {
+              const N = m.zoneIds.includes(w.id);
+              return /* @__PURE__ */ c(
                 "button",
                 {
                   type: "button",
-                  onClick: () => _(N, f.id),
-                  className: `${re} ${g ? oe : se}`,
+                  onClick: () => L(_, w.id),
+                  className: `${ee} ${N ? te : ne}`,
                   children: [
                     /* @__PURE__ */ t(
                       "span",
                       {
                         className: "h-2 w-2 rounded-sm",
-                        style: { backgroundColor: f.color || "#3b82f6" }
+                        style: { backgroundColor: w.color || "#3b82f6" }
                       }
                     ),
-                    /* @__PURE__ */ t("span", { className: "truncate max-w-[7rem]", children: f.name || f.id })
+                    /* @__PURE__ */ t("span", { className: "truncate max-w-[7rem]", children: w.name || w.id })
                   ]
                 },
-                f.id
+                w.id
               );
             })
           ] }),
-          /* @__PURE__ */ u("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+          /* @__PURE__ */ c("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((f) => {
-              const g = v.classFilter.includes(f.id);
+            Lt.map((w) => {
+              const N = m.classFilter.includes(w.id);
               return /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: () => w(N, f.id),
-                  className: `${re} ${g ? oe : se}`,
-                  children: f.label
+                  onClick: () => Z(_, w.id),
+                  className: `${ee} ${N ? te : ne}`,
+                  children: w.label
                 },
-                f.id
+                w.id
               );
             }),
-            v.classFilter.length === 0 && /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic ml-1", children: "any" })
+            m.classFilter.length === 0 && /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic ml-1", children: "any" })
           ] })
         ]
       },
-      v.id
+      m.id
     )) }),
-    Z && /* @__PURE__ */ t("p", { className: "mt-2 text-[10px] text-danger", children: Z })
+    $ && /* @__PURE__ */ t("p", { className: "mt-2 text-[10px] text-danger", children: $ })
   ] });
 }
-function Q(e, o, r) {
-  return { x: e.x * o, y: e.y * r };
+function z(e, i, r) {
+  return { x: e.x * i, y: e.y * r };
 }
-function pe(e, o, r) {
-  return { x: e.x / o, y: e.y / r };
+function ce(e, i, r) {
+  return { x: e.x / i, y: e.y / r };
 }
-function Ne(e, o, r) {
-  return e.flatMap((l) => [l.x * o, l.y * r]);
+function ke(e, i, r) {
+  return e.flatMap((u) => [u.x * i, u.y * r]);
 }
-function Tt(e, o) {
+function Rt(e, i) {
   return e.color;
 }
-const Ot = "33", Wt = "66", Ce = 16, De = 9;
+const Tt = "33", Ot = "66", we = 16, Ne = 9;
 function jt({
   zones: e,
-  selectedZoneId: o,
+  selectedZoneId: i,
   onSelectZone: r,
-  onZonePointsChange: l,
-  onZoneComplete: p,
-  drawingKind: i,
-  backdrop: c,
-  transparent: s = !1
+  onZonePointsChange: u,
+  onZoneComplete: f,
+  drawingKind: s,
+  backdrop: l,
+  transparent: a = !1
 }) {
-  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);
+  const g = se(null), [n, F] = H({ w: 800, h: 450 }), [d, $] = H([]), [b, k] = H(null), [Z, L] = H(null), [S, y] = H(null);
   X(() => {
-    if (!M) return;
-    const a = e.find((D) => D.id === M.zoneId);
-    if (!a) {
-      k(null);
+    if (!S) return;
+    const o = e.find((v) => v.id === S.zoneId);
+    if (!o) {
+      y(null);
       return;
     }
-    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 });
+    if (o.points.length !== S.points.length) return;
+    o.points.every((v, x) => {
+      const E = S.points[x];
+      return Math.abs(v.x - E.x) < 1e-6 && Math.abs(v.y - E.y) < 1e-6;
+    }) && y(null);
+  }, [e, S]), X(() => {
+    const o = g.current;
+    if (!o) return;
+    const p = new ResizeObserver((v) => {
+      const x = v[0];
+      if (x) {
+        const { width: E, height: P } = x.contentRect;
+        F(a ? { w: E, h: P } : { w: E, h: E * 9 / 16 });
       }
     });
-    return y.observe(a), () => y.disconnect();
-  }, [s]);
-  const x = i !== null;
+    return p.observe(o), () => p.disconnect();
+  }, [a]);
+  const h = s !== null;
   X(() => {
-    !x && b !== null && m(null);
-  }, [x, b]);
-  const V = P(
-    (a) => {
-      if (!x) {
+    !h && b !== null && k(null);
+  }, [h, b]);
+  const Y = T(
+    (o) => {
+      if (!h) {
         r(null);
         return;
       }
-      const y = a.target.getStage();
-      if (!y) return;
-      const D = y.getPointerPosition();
-      if (!D) return;
-      const C = pe(D, n.w, n.h), T = i === "tripwire";
+      const p = o.target.getStage();
+      if (!p) return;
+      const v = p.getPointerPosition();
+      if (!v) return;
+      const x = ce(v, n.w, n.h), E = s === "tripwire";
       if (d.length === 0) {
-        Z([C]);
+        $([x]);
         return;
       }
-      if (T && d.length === 1) {
-        const O = [...d, C], H = {
+      if (E && d.length === 1) {
+        const P = [...d, x], q = {
           id: crypto.randomUUID(),
           name: "Tripwire",
           kind: "tripwire",
           color: "#f59e0b",
-          points: O
+          points: P
         };
-        p(H), Z([]);
+        f(q), $([]);
         return;
       }
-      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 = {
+      if (d.length >= 3 && !E) {
+        const P = z(d[0], n.w, n.h);
+        if (Math.hypot(v.x - P.x, v.y - P.y) < 12) {
+          const K = {
             id: crypto.randomUUID(),
             name: "Zone",
             kind: "polygon",
             color: "#3b82f6",
             points: d
           };
-          p(ee), Z([]);
+          f(K), $([]);
           return;
         }
       }
-      Z((O) => [...O, C]);
+      $((P) => [...P, x]);
     },
-    [x, d, n, i, p, r]
-  ), v = P(
-    (a) => {
-      if (!x || i === "tripwire" || d.length < 3) return;
-      a.cancelBubble = !0;
-      const y = {
+    [h, d, n, s, f, r]
+  ), m = T(
+    (o) => {
+      if (!h || s === "tripwire" || d.length < 3) return;
+      o.cancelBubble = !0;
+      const p = {
         id: crypto.randomUUID(),
         name: "Zone",
         kind: "polygon",
         color: "#3b82f6",
         points: d
       };
-      p(y), Z([]);
+      f(p), $([]);
     },
-    [x, i, d, p]
-  ), N = Y(null), f = Y(null);
+    [h, s, d, f]
+  ), _ = se(null), w = se(null);
   X(() => () => {
-    N.current !== null && cancelAnimationFrame(N.current);
+    _.current !== null && cancelAnimationFrame(_.current);
   }, []);
-  const g = P(
-    (a) => {
-      if (!x) return;
-      const y = a.target.getStage();
-      if (!y) return;
-      const D = y.getPointerPosition();
-      f.current = D ?? null, N.current === null && (N.current = requestAnimationFrame(() => {
-        N.current = null, m(f.current);
+  const N = T(
+    (o) => {
+      if (!h) return;
+      const p = o.target.getStage();
+      if (!p) return;
+      const v = p.getPointerPosition();
+      w.current = v ?? null, _.current === null && (_.current = requestAnimationFrame(() => {
+        _.current = null, k(w.current);
       }));
     },
-    [x]
-  ), 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}`)
+    [h]
+  ), B = [];
+  if (!a) {
+    for (let o = 1; o < we; o++) {
+      const p = n.w / we * o;
+      B.push(
+        /* @__PURE__ */ t(V, { points: [p, 0, p, n.h], stroke: "#ffffff", strokeWidth: 0.5, opacity: 0.08 }, `gv-${o}`)
       );
     }
-    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}`)
+    for (let o = 1; o < Ne; o++) {
+      const p = n.h / Ne * o;
+      B.push(
+        /* @__PURE__ */ t(V, { points: [0, p, n.w, p], stroke: "#ffffff", strokeWidth: 0.5, opacity: 0.08 }, `gh-${o}`)
       );
     }
   }
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: h,
-      className: s ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
-      style: { cursor: x ? "crosshair" : "default" },
+      ref: g,
+      className: a ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
+      style: { cursor: h ? "crosshair" : "default" },
       children: [
-        c && !s ? /* @__PURE__ */ t(
+        l && !a ? /* @__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: c
+            children: l
           }
         ) : null,
-        /* @__PURE__ */ u(
-          et,
+        /* @__PURE__ */ c(
+          Je,
           {
             width: n.w,
             height: n.h,
-            onClick: V,
-            onDblClick: v,
-            onMouseMove: g,
+            onClick: Y,
+            onDblClick: m,
+            onMouseMove: N,
             children: [
-              /* @__PURE__ */ u(de, { listening: !1, children: [
-                /* @__PURE__ */ t(G, { points: [0, 0, n.w, 0, n.w, n.h, 0, n.h, 0, 0], stroke: "transparent", strokeWidth: 0 }),
-                F
+              /* @__PURE__ */ c(ae, { listening: !1, children: [
+                /* @__PURE__ */ t(V, { points: [0, 0, n.w, 0, n.w, n.h, 0, n.h, 0, 0], stroke: "transparent", strokeWidth: 0 }),
+                B
               ] }),
-              /* @__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,
+              /* @__PURE__ */ t(ae, { children: e.map((o) => {
+                const p = o.id === i, v = Rt(o), x = S && S.zoneId === o.id ? S.points : o.points, E = ke(x, n.w, n.h), P = o.kind === "tripwire", q = p && !h, K = Z === o.id, Q = x.map((C) => C.x * n.w), J = x.map((C) => C.y * n.h), Ae = Q.length > 0 ? Math.min(...Q) : 0, Fe = Q.length > 0 ? Math.max(...Q) : 0, Le = J.length > 0 ? Math.min(...J) : 0, Ee = J.length > 0 ? Math.max(...J) : 0;
+                return /* @__PURE__ */ c(
+                  ie,
                   {
-                    onClick: (I) => {
-                      I.cancelBubble = !0, x || r(a.id);
+                    onClick: (C) => {
+                      C.cancelBubble = !0, h || r(o.id);
                     },
                     children: [
-                      /* @__PURE__ */ u(
-                        ue,
+                      /* @__PURE__ */ c(
+                        ie,
                         {
-                          draggable: H,
-                          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))
+                          draggable: q,
+                          dragBoundFunc: q ? (C) => ({
+                            x: Math.max(-Ae, Math.min(n.w - Fe, C.x)),
+                            y: Math.max(-Le, Math.min(n.h - Ee, C.y))
                           }) : void 0,
-                          onDragStart: H ? () => {
-                            _(a.id);
+                          onDragStart: q ? () => {
+                            L(o.id);
                           } : void 0,
-                          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);
+                          onDragEnd: q ? (C) => {
+                            const D = C.target, j = D.x() / n.w, U = D.y() / n.h;
+                            if (D.position({ x: 0, y: 0 }), L(null), j === 0 && U === 0) return;
+                            const W = o.points.map((I) => ({ x: I.x + j, y: I.y + U }));
+                            y({ zoneId: o.id, points: W }), u(o.id, W);
                           } : void 0,
-                          onMouseEnter: (I) => {
-                            if (!H) return;
-                            const $ = I.target.getStage();
-                            $ && ($.container().style.cursor = "move");
+                          onMouseEnter: (C) => {
+                            if (!q) return;
+                            const D = C.target.getStage();
+                            D && (D.container().style.cursor = "move");
                           },
-                          onMouseLeave: (I) => {
-                            if (!H) return;
-                            const $ = I.target.getStage();
-                            $ && ($.container().style.cursor = x ? "crosshair" : "default");
+                          onMouseLeave: (C) => {
+                            if (!q) return;
+                            const D = C.target.getStage();
+                            D && (D.container().style.cursor = h ? "crosshair" : "default");
                           },
                           children: [
-                            O ? /* @__PURE__ */ t(
-                              tt,
+                            P ? /* @__PURE__ */ t(
+                              et,
                               {
-                                points: T,
-                                stroke: D,
-                                strokeWidth: y ? 3 : 2,
-                                fill: D,
+                                points: E,
+                                stroke: v,
+                                strokeWidth: p ? 3 : 2,
+                                fill: v,
                                 pointerLength: 10,
                                 pointerWidth: 8,
-                                opacity: y ? 1 : 0.8
+                                opacity: p ? 1 : 0.8
                               }
                             ) : /* @__PURE__ */ t(
-                              G,
+                              V,
                               {
-                                points: T,
+                                points: E,
                                 closed: !0,
-                                fill: D + (y ? Wt : Ot),
-                                stroke: D,
-                                strokeWidth: y ? 2.5 : 1.5,
-                                opacity: y ? 1 : 0.85
+                                fill: v + (p ? Ot : Tt),
+                                stroke: v,
+                                strokeWidth: p ? 2.5 : 1.5,
+                                opacity: p ? 1 : 0.85
                               }
                             ),
-                            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);
+                            x.length > 0 && (() => {
+                              const C = x.reduce((A, M) => A + M.x, 0), D = x.reduce((A, M) => A + M.y, 0), j = C / x.length, U = D / x.length, W = z({ x: j, y: U }, n.w, n.h), I = Math.max(40, o.name.length * 11 * 0.62);
                               return /* @__PURE__ */ t(
-                                nt,
+                                tt,
                                 {
-                                  x: q.x - E / 2,
-                                  y: q.y - 7,
-                                  width: E,
+                                  x: W.x - I / 2,
+                                  y: W.y - 7,
+                                  width: I,
                                   align: "center",
-                                  text: a.name,
+                                  text: o.name,
                                   fontSize: 12,
-                                  fill: D,
+                                  fill: v,
                                   stroke: "#000000",
                                   strokeWidth: 3,
                                   fillAfterStrokeEnabled: !0,
@@ -1024,93 +1024,93 @@ function jt({
                           ]
                         }
                       ),
-                      y && !ee && C.map((I, $) => {
-                        const B = Q(I, n.w, n.h), z = O ? 2 : 3, q = C.length > z;
+                      p && !K && x.map((C, D) => {
+                        const j = z(C, n.w, n.h), U = P ? 2 : 3, W = x.length > U;
                         return /* @__PURE__ */ t(
-                          fe,
+                          le,
                           {
-                            x: B.x,
-                            y: B.y,
+                            x: j.x,
+                            y: j.y,
                             radius: 5,
-                            fill: D,
+                            fill: v,
                             stroke: "#ffffff",
                             strokeWidth: 1.5,
                             draggable: !0,
-                            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 };
+                            onDragMove: (I) => {
+                              const A = ce({ x: I.target.x(), y: I.target.y() }, n.w, n.h);
+                              y((M) => {
+                                const oe = (M && M.zoneId === o.id ? M.points : o.points).map((Pe, Re) => Re === D ? A : Pe);
+                                return { zoneId: o.id, points: oe };
                               });
                             },
-                            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);
+                            onDragEnd: (I) => {
+                              const A = ce({ x: I.target.x(), y: I.target.y() }, n.w, n.h), M = o.points.map((R, oe) => oe === D ? A : R);
+                              y({ zoneId: o.id, points: M }), u(o.id, M);
                             },
-                            onContextMenu: (E) => {
-                              if (E.evt.preventDefault(), E.cancelBubble = !0, !q) return;
-                              const R = a.points.filter((A, W) => W !== $);
-                              l(a.id, R);
+                            onContextMenu: (I) => {
+                              if (I.evt.preventDefault(), I.cancelBubble = !0, !W) return;
+                              const A = o.points.filter((M, R) => R !== D);
+                              u(o.id, A);
                             }
                           },
-                          `pt-${$}`
+                          `pt-${D}`
                         );
                       }),
-                      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);
+                      p && !K && !P && x.length >= 2 && x.map((C, D) => {
+                        const j = x[(D + 1) % x.length], U = (C.x + j.x) / 2, W = (C.y + j.y) / 2, I = z({ x: U, y: W }, n.w, n.h);
                         return /* @__PURE__ */ t(
-                          fe,
+                          le,
                           {
-                            x: E.x,
-                            y: E.y,
+                            x: I.x,
+                            y: I.y,
                             radius: 4,
                             fill: "#ffffff",
-                            stroke: D,
+                            stroke: v,
                             strokeWidth: 1.5,
                             opacity: 0.6,
-                            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");
+                            onMouseEnter: (A) => {
+                              const M = A.target;
+                              M.to({ radius: 6, opacity: 1, duration: 0.1 });
+                              const R = M.getStage();
+                              R && (R.container().style.cursor = "copy");
                             },
-                            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");
+                            onMouseLeave: (A) => {
+                              const M = A.target;
+                              M.to({ radius: 4, opacity: 0.6, duration: 0.1 });
+                              const R = M.getStage();
+                              R && (R.container().style.cursor = h ? "crosshair" : "default");
                             },
-                            onClick: (R) => {
-                              R.cancelBubble = !0;
-                              const A = $ + 1, W = [
-                                ...a.points.slice(0, A),
-                                { x: z, y: q },
-                                ...a.points.slice(A)
+                            onClick: (A) => {
+                              A.cancelBubble = !0;
+                              const M = D + 1, R = [
+                                ...o.points.slice(0, M),
+                                { x: U, y: W },
+                                ...o.points.slice(M)
                               ];
-                              l(a.id, W);
+                              u(o.id, R);
                             }
                           },
-                          `mid-${$}`
+                          `mid-${D}`
                         );
                       })
                     ]
                   },
-                  a.id
+                  o.id
                 );
               }) }),
-              /* @__PURE__ */ t(de, { listening: !1, children: x && d.length > 0 && /* @__PURE__ */ u(ue, { children: [
-                d.length >= 2 && i !== "tripwire" && /* @__PURE__ */ t(
-                  G,
+              /* @__PURE__ */ t(ae, { listening: !1, children: h && d.length > 0 && /* @__PURE__ */ c(ie, { children: [
+                d.length >= 2 && s !== "tripwire" && /* @__PURE__ */ t(
+                  V,
                   {
-                    points: Ne(d, n.w, n.h),
+                    points: ke(d, n.w, n.h),
                     stroke: "#6366f1",
                     strokeWidth: 1.5,
                     dash: [6, 3],
                     opacity: 0.8
                   }
                 ),
-                d.length === 1 && i === "tripwire" && b && /* @__PURE__ */ t(
-                  G,
+                d.length === 1 && s === "tripwire" && b && /* @__PURE__ */ t(
+                  V,
                   {
                     points: [
                       d[0].x * n.w,
@@ -1124,8 +1124,8 @@ function jt({
                     opacity: 0.7
                   }
                 ),
-                b && d.length >= 1 && i !== "tripwire" && /* @__PURE__ */ t(
-                  G,
+                b && d.length >= 1 && s !== "tripwire" && /* @__PURE__ */ t(
+                  V,
                   {
                     points: [
                       d[d.length - 1].x * n.w,
@@ -1139,32 +1139,32 @@ function jt({
                     opacity: 0.5
                   }
                 ),
-                d.map((a, y) => {
-                  const D = Q(a, n.w, n.h), C = y === 0;
+                d.map((o, p) => {
+                  const v = z(o, n.w, n.h), x = p === 0;
                   return /* @__PURE__ */ t(
-                    fe,
+                    le,
                     {
-                      x: D.x,
-                      y: D.y,
-                      radius: C && d.length >= 3 ? 7 : 4,
-                      fill: C && d.length >= 3 ? "#6366f1" : "#ffffff",
+                      x: v.x,
+                      y: v.y,
+                      radius: x && d.length >= 3 ? 7 : 4,
+                      fill: x && d.length >= 3 ? "#6366f1" : "#ffffff",
                       stroke: "#6366f1",
                       strokeWidth: 1.5,
                       opacity: 0.9
                     },
-                    y
+                    p
                   );
                 })
               ] }) })
             ]
           }
         ),
-        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
+        h ? /* @__PURE__ */ t("div", { className: "px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700", children: s === "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 = Ae(jt), qt = "#3b82f6", me = [
+const Wt = Se(jt), Bt = "#3b82f6", de = [
   "#3b82f6",
   "#10b981",
   "#f59e0b",
@@ -1176,22 +1176,22 @@ const Bt = Ae(jt), qt = "#3b82f6", me = [
   "#8b5cf6",
   "#14b8a6"
 ];
-function Ut(e) {
-  const o = new Set(e.map((r) => (r.color ?? "").toLowerCase()));
-  for (const r of me)
-    if (!o.has(r.toLowerCase())) return r;
-  return me[e.length % me.length];
+function qt(e) {
+  const i = new Set(e.map((r) => (r.color ?? "").toLowerCase()));
+  for (const r of de)
+    if (!i.has(r.toLowerCase())) return r;
+  return de[e.length % de.length];
 }
-function Ht(e) {
+function Ut(e) {
   return {
     id: e.id,
     name: e.name,
     kind: e.kind,
-    color: e.color || qt,
+    color: e.color || Bt,
     points: [...e.polygon]
   };
 }
-function Se(e) {
+function Ce(e) {
   return {
     id: e.id,
     name: e.name,
@@ -1200,74 +1200,74 @@ function Se(e) {
     color: e.color
   };
 }
-function zt({ deviceId: e }) {
-  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(
+function Ht({ deviceId: e }) {
+  const i = fe(), r = he(i.trpcClient, e), u = ge(r?.state.zones), f = G(() => u?.zones ?? [], [u]), s = me(), l = s?.drawingKind ?? null, a = s?.selectedZoneId ?? null, g = s?.editingDraft ?? null, n = G(() => f.map((b) => g && g.id === b.id ? {
+    id: g.id,
+    name: g.name,
+    kind: g.kind,
+    color: g.color,
+    points: [...g.points]
+  } : Ut(b)), [f, g]), F = T(
     async (b) => {
-      const m = { ...b, color: Ut(n) };
+      const k = { ...b, color: qt(n) };
       try {
-        await r?.zones?.addZone({ zone: Se(m) });
-      } catch (w) {
-        console.error("zones.addZone failed", w);
+        await r?.zones?.addZone({ zone: Ce(k) });
+      } catch (Z) {
+        console.error("zones.addZone failed", Z);
       }
-      i?.setSelectedZoneId(m.id), i?.setDrawingKind(null);
+      s?.setSelectedZoneId(k.id), s?.setDrawingKind(null);
     },
-    [r, n, i]
-  ), d = P(
-    async (b, m) => {
-      if (h && h.id === b) {
-        i?.updateDraft({ points: m });
+    [r, n, s]
+  ), d = T(
+    async (b, k) => {
+      if (g && g.id === b) {
+        s?.updateDraft({ points: k });
         return;
       }
-      const w = n.find((_) => _.id === b);
-      if (w)
+      const Z = n.find((L) => L.id === b);
+      if (Z)
         try {
-          await r?.zones?.updateZone({ zone: Se({ ...w, points: m }) });
-        } catch (_) {
-          console.error("zones.updateZone failed", _);
+          await r?.zones?.updateZone({ zone: Ce({ ...Z, points: k }) });
+        } catch (L) {
+          console.error("zones.updateZone failed", L);
         }
     },
-    [r, n, h, i]
-  ), Z = P(
+    [r, n, g, s]
+  ), $ = T(
     (b) => {
       if (b === null) {
-        i?.discardDraft(), i?.setSelectedZoneId(null);
+        s?.discardDraft(), s?.setSelectedZoneId(null);
         return;
       }
-      const m = n.find((w) => w.id === b);
-      if (!m) {
-        i?.setSelectedZoneId(b);
+      const k = n.find((Z) => Z.id === b);
+      if (!k) {
+        s?.setSelectedZoneId(b);
         return;
       }
-      i?.enterDraft({
-        id: m.id,
-        kind: m.kind,
-        name: m.name,
-        color: m.color,
-        points: m.points
+      s?.enterDraft({
+        id: k.id,
+        kind: k.kind,
+        name: k.name,
+        color: k.color,
+        points: k.points
       });
     },
-    [n, i]
+    [n, s]
   );
-  return n.length === 0 && c === null ? null : /* @__PURE__ */ t(
-    Bt,
+  return n.length === 0 && l === null ? null : /* @__PURE__ */ t(
+    Wt,
     {
       zones: n,
-      selectedZoneId: s,
-      onSelectZone: Z,
+      selectedZoneId: a,
+      onSelectZone: $,
       onZonePointsChange: d,
-      onZoneComplete: S,
-      drawingKind: c,
+      onZoneComplete: F,
+      drawingKind: l,
       transparent: !0
     }
   );
 }
-const Vt = Ae(zt), Gt = "#3b82f6";
+const Vt = Se(Ht), Gt = "#3b82f6";
 function Yt(e) {
   return {
     id: e.id,
@@ -1277,7 +1277,7 @@ function Yt(e) {
     points: [...e.polygon]
   };
 }
-function Xt(e) {
+function zt(e) {
   return {
     id: e.id,
     name: e.name,
@@ -1286,8 +1286,8 @@ function Xt(e) {
     color: e.color
   };
 }
-function Kt({ deviceId: e }) {
-  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(
+function Xt({ deviceId: e }) {
+  const i = fe(), r = he(i.trpcClient, e), u = ge(r?.state.zones), f = G(() => u?.zones ?? [], [u]), s = G(() => f.map(Yt), [f]), l = me(), a = l?.drawingKind ?? null, g = l?.selectedZoneId ?? null, n = l?.editingDraft ?? null, F = G(
     () => ({
       id: "zones",
       order: 100,
@@ -1296,325 +1296,117 @@ function Kt({ deviceId: e }) {
     }),
     [e]
   );
-  Ze(S);
-  const d = P(
-    (k) => {
-      if (k === null) {
-        c?.discardDraft(), c?.setSelectedZoneId(null);
+  He(F);
+  const d = T(
+    (y) => {
+      if (y === null) {
+        l?.discardDraft(), l?.setSelectedZoneId(null);
         return;
       }
-      const x = i.find((V) => V.id === k);
-      x && c?.enterDraft({
-        id: x.id,
-        kind: x.kind,
-        name: x.name,
-        color: x.color,
-        points: x.points
+      const h = s.find((Y) => Y.id === y);
+      h && l?.enterDraft({
+        id: h.id,
+        kind: h.kind,
+        name: h.name,
+        color: h.color,
+        points: h.points
       });
     },
-    [i, c]
-  ), Z = P(async () => {
-    const k = c?.editingDraft;
-    if (k) {
+    [s, l]
+  ), $ = T(async () => {
+    const y = l?.editingDraft;
+    if (y) {
       try {
         await r?.zones?.updateZone({
-          zone: Xt({
-            id: k.id,
-            kind: k.kind,
-            name: k.name,
-            color: k.color,
-            points: [...k.points]
+          zone: zt({
+            id: y.id,
+            kind: y.kind,
+            name: y.name,
+            color: y.color,
+            points: [...y.points]
           })
         });
-      } catch (x) {
-        console.error("zones.updateZone failed", x);
+      } catch (h) {
+        console.error("zones.updateZone failed", h);
       }
-      c?.discardDraft(), c?.setSelectedZoneId(null);
+      l?.discardDraft(), l?.setSelectedZoneId(null);
     }
-  }, [r, c]), b = P(() => {
-    c?.discardDraft(), c?.setSelectedZoneId(null);
-  }, [c]), m = P(
-    async (k) => {
+  }, [r, l]), b = T(() => {
+    l?.discardDraft(), l?.setSelectedZoneId(null);
+  }, [l]), k = T(
+    async (y) => {
       try {
-        await r?.zones?.removeZone({ zoneId: k });
-      } catch (x) {
-        console.error("zones.removeZone failed", x);
+        await r?.zones?.removeZone({ zoneId: y });
+      } catch (h) {
+        console.error("zones.removeZone failed", h);
       }
-      c?.selectedZoneId === k && c.setSelectedZoneId(null), c?.editingDraft?.id === k && c.discardDraft();
+      l?.selectedZoneId === y && l.setSelectedZoneId(null), l?.editingDraft?.id === y && l.discardDraft();
     },
-    [r, c]
-  ), w = P(
-    (k) => {
-      c?.startDrawing(k);
+    [r, l]
+  ), Z = T(
+    (y) => {
+      l?.startDrawing(y);
     },
-    [c]
-  ), _ = P(() => {
-    c?.setDrawingKind(null);
-  }, [c]), M = U(() => !n || !i.find((x) => x.id === n.id) ? null : {
+    [l]
+  ), L = T(() => {
+    l?.setDrawingKind(null);
+  }, [l]), S = G(() => !n || !s.find((h) => h.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: 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: [
+  }, [s, n]);
+  return /* @__PURE__ */ c("div", { className: Ve, children: [
+    /* @__PURE__ */ c("div", { className: Ge, children: [
+      /* @__PURE__ */ t("div", { className: Ye, children: /* @__PURE__ */ c("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ t("h2", { className: Me, children: "Detection Zones" }),
+        /* @__PURE__ */ c("p", { className: `${ze} 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: `${Ke} flex flex-col gap-3`, children: [
+      /* @__PURE__ */ c("div", { className: `${Xe} flex flex-col gap-3`, children: [
         /* @__PURE__ */ t(
-          At,
+          Zt,
           {
-            zones: i,
-            selectedZoneId: h,
-            drawingKind: s,
+            zones: s,
+            selectedZoneId: g,
+            drawingKind: a,
             onSelectZone: d,
-            onDeleteZone: m,
-            onStartDraw: w,
-            onCancelDraw: _
+            onDeleteZone: k,
+            onStartDraw: Z,
+            onCancelDraw: L
           }
         ),
-        M && /* @__PURE__ */ u(be, { children: [
+        S && /* @__PURE__ */ c(De, { children: [
           /* @__PURE__ */ t("div", { className: "border-t border-border" }),
           /* @__PURE__ */ t(
-            Et,
+            Ft,
             {
-              zone: M,
-              onSave: Z,
+              zone: S,
+              onSave: $,
               onDiscard: b,
-              onDelete: () => m(M.id)
+              onDelete: () => k(S.id)
             }
           )
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ u("div", { className: `grid grid-cols-1 2xl:grid-cols-2 ${Qe}`, children: [
-      /* @__PURE__ */ t(we, { dev: r, stage: "motion", zones: p }),
-      /* @__PURE__ */ t(we, { dev: r, stage: "detection", zones: p })
+    /* @__PURE__ */ c("div", { className: `grid grid-cols-1 2xl:grid-cols-2 ${Ke}`, children: [
+      /* @__PURE__ */ t(ve, { dev: r, stage: "motion", zones: f }),
+      /* @__PURE__ */ t(ve, { dev: r, stage: "detection", zones: f })
     ] })
   ] });
 }
-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, 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, 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, S]
-  ), Z = P(
-    (m) => () => {
-      c.current && (h.current.has(m) || (h.current.add(m), S(m, s.current)));
-    },
-    [S]
-  ), b = P(() => {
-    c.current && (c.current = !1, h.current = /* @__PURE__ */ new Set());
-  }, []);
-  return /* @__PURE__ */ t(
-    "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",
-          {
-            type: "button",
-            "aria-label": `motion cell ${String(w)}`,
-            "aria-pressed": _,
-            onPointerDown: d(w),
-            onPointerEnter: Z(w),
-            className: (
-              // High-contrast fills so the painted mask reads clearly
-              // over the live frame — selected cells are a strong
-              // primary wash, unselected a faint but visible tint.
-              _ ? "border border-primary/70 bg-primary/55 hover:bg-primary/65 transition-colors" : "border border-white/25 bg-white/10 hover:bg-white/20 transition-colors"
-            )
-          },
-          w
-        );
-      })
-    }
-  );
-}
-function en(e) {
-  const o = e instanceof Error ? e.message : String(e);
-  return o.includes("provider not available") || o.includes("motion-zones");
-}
-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 f = !1;
-    return (async () => {
-      try {
-        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);
-      }
-    })(), () => {
-      f = !0;
-    };
-  }, [r]);
-  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: { 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 {
-        Z(!1);
-      }
-    }
-  }, [s, r, l]), v = U(
-    () => !i && l && s ? {
-      id: "motion-zones",
-      order: 110,
-      // above the analytics zones overlay (order 100)
-      node: /* @__PURE__ */ t(Jt, { options: l, cells: s, onCellsChange: h })
-    } : null,
-    [i, l, s]
-  );
-  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",
-      " ",
-      /* @__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 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 });
+function Kt(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(Xt, { deviceId: e.deviceId });
 }
-const mn = {
+const ln = {
   "pipeline-quick-stats": Mt,
-  "zone-editor": Qt,
-  "motion-zones-editor": rn
+  "zone-editor": Kt
 };
 export {
-  mn as default
+  ln as default
 };