@camstack/addon-pipeline-orchestrator 0.1.27 → 0.1.28

package/dist/_stub.js

@@ -1,8 +1,8 @@
-import { _ as t, a as i, b as X } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.mjs-Cg6QsnjR.mjs";
-import { _ as B } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.mjs-DoWbefqS.mjs";
-import { _ as V, a as re, b as oe, c as O, d as q, e as ae, f as U, g as P, h as se, i as z, j as J, k as ie, l as le, m as A, n as F, o as T, p as ce, q as de, r as ue, s as pe, t as me, u as fe, v as he, w as ge } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.mjs-B1VWqPID.mjs";
-import { a as Y, b as K, c as Z, d as R, e as be, f as xe, g as w } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react__loadShare__.mjs-ZXZUECVq.mjs";
-import { _ as ye } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_types__loadShare__.mjs-CP1zJ0aB.mjs";
+import { _ as t, a as i, b as J } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.mjs-Cg6QsnjR.mjs";
+import { _ as T } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.mjs-DoWbefqS.mjs";
+import { _ as Q, a as re, b as oe, c as B, d as U, e as ae, f as z, g as K, h as se, i as V, j as Y, k as ie, l as le, m as R, n as E, o as L, p as ce, q as de, r as ue, s as pe, t as me, u as fe, v as he, w as ge } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.mjs-Bau3YeQq.mjs";
+import { a as ee, b as O, c as M, d as j, e as be, f as ye, g as w } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare__react__loadShare__.mjs-B9__gOco.mjs";
+import { _ as xe } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__loadShare___mf_0_camstack_mf_1_types__loadShare__.mjs-C507UJJC.mjs";
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -11,11 +11,11 @@ import { _ as ye } from "./__mfe_internal__addon_pipeline_orchestrator_widgets__
  */
 const _e = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ve = (e) => e.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (o, n, p) => p ? p.toUpperCase() : n.toLowerCase()
-), Q = (e) => {
+  (o, n, d) => d ? d.toUpperCase() : n.toLowerCase()
+), W = (e) => {
   const o = ve(e);
   return o.charAt(0).toUpperCase() + o.slice(1);
-}, ee = (...e) => e.filter((o, n, p) => !!o && o.trim() !== "" && p.indexOf(o) === n).join(" ").trim(), ke = (e) => {
+}, te = (...e) => e.filter((o, n, d) => !!o && o.trim() !== "" && d.indexOf(o) === n).join(" ").trim(), ke = (e) => {
   for (const o in e)
     if (o.startsWith("aria-") || o === "role" || o === "title")
       return !0;
@@ -43,32 +43,32 @@ var we = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ne = Y(
+const Ne = ee(
   ({
     color: e = "currentColor",
     size: o = 24,
     strokeWidth: n = 2,
-    absoluteStrokeWidth: p,
-    className: m = "",
-    children: a,
-    iconNode: s,
+    absoluteStrokeWidth: d,
+    className: f = "",
+    children: s,
+    iconNode: a,
     ...r
-  }, f) => K(
+  }, h) => O(
     "svg",
     {
-      ref: f,
+      ref: h,
       ...we,
       width: o,
       height: o,
       stroke: e,
-      strokeWidth: p ? Number(n) * 24 / Number(o) : n,
-      className: ee("lucide", m),
-      ...!a && !ke(r) && { "aria-hidden": "true" },
+      strokeWidth: d ? Number(n) * 24 / Number(o) : n,
+      className: te("lucide", f),
+      ...!s && !ke(r) && { "aria-hidden": "true" },
       ...r
     },
     [
-      ...s.map(([l, k]) => K(l, k)),
-      ...Array.isArray(a) ? a : [a]
+      ...a.map(([l, v]) => O(l, v)),
+      ...Array.isArray(s) ? s : [s]
     ]
   )
 );
@@ -78,20 +78,20 @@ const Ne = Y(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const v = (e, o) => {
-  const n = Y(
-    ({ className: p, ...m }, a) => K(Ne, {
-      ref: a,
+const k = (e, o) => {
+  const n = ee(
+    ({ className: d, ...f }, s) => O(Ne, {
+      ref: s,
       iconNode: o,
-      className: ee(
-        `lucide-${_e(Q(e))}`,
+      className: te(
+        `lucide-${_e(W(e))}`,
         `lucide-${e}`,
-        p
+        d
       ),
-      ...m
+      ...f
     })
   );
-  return n.displayName = Q(e), n;
+  return n.displayName = W(e), n;
 };
 /**
  * @license lucide-react v0.511.0 - ISC
@@ -107,14 +107,14 @@ const Ce = [
       key: "169zse"
     }
   ]
-], De = v("activity", Ce);
+], De = k("activity", Ce);
 /**
  * @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 Se = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], Ze = v("check", Se);
+const Se = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], Me = k("check", Se);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -136,14 +136,14 @@ const $e = [
   ["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" }]
-], Ie = v("cpu", $e);
+], Ze = k("cpu", $e);
 /**
  * @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 Me = [
+const Ie = [
   [
     "path",
     {
@@ -152,7 +152,7 @@ const Me = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], Ae = v("eye", Me);
+], Ae = k("eye", Ie);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -162,7 +162,7 @@ const Me = [
 const Fe = [
   ["path", { d: "m12 14 4-4", key: "9kzdfg" }],
   ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0", key: "19p75a" }]
-], Te = v("gauge", Fe);
+], Te = k("gauge", Fe);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -177,14 +177,14 @@ const Re = [
       key: "yt0hxn"
     }
   ]
-], Ee = v("hexagon", Re);
+], Ee = k("hexagon", Re);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const je = [["path", { d: "M5 12h14", key: "1ays0h" }]], Le = v("minus", je);
+const Le = [["path", { d: "M5 12h14", key: "1ays0h" }]], je = k("minus", Le);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -194,14 +194,14 @@ const je = [["path", { d: "M5 12h14", key: "1ays0h" }]], Le = v("minus", je);
 const Pe = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
-], Ke = v("plus", Pe);
+], qe = k("plus", Pe);
 /**
  * @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 Oe = [
+const Ke = [
   [
     "path",
     {
@@ -211,27 +211,43 @@ const Oe = [
   ],
   ["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" }]
-], qe = v("save", Oe);
+], Oe = k("save", Ke);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ue = [
+const Be = [
   ["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" }]
-], H = v("trash-2", Ue);
+], H = k("trash-2", Be);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ue = [
+  [
+    "path",
+    {
+      d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5",
+      key: "ftymec"
+    }
+  ],
+  ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", key: "158x01" }]
+], ze = k("video", Ue);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ze = [
+const Ve = [
   [
     "path",
     {
@@ -241,99 +257,124 @@ const ze = [
   ],
   ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
   ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
-], He = v("volume-2", ze);
+], He = k("volume-2", Ve);
 /**
  * @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 Be = [
+const Qe = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], te = v("x", Be);
-function Ve(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(Qe, { deviceId: e.deviceId });
+], ne = k("x", Qe);
+function We(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(Ge, { deviceId: e.deviceId });
 }
-function Qe({ deviceId: e }) {
-  V(
+function Ge({ deviceId: e }) {
+  Q(
     ["pipelineOrchestrator", "getPipelineAssignment"],
     ["pipeline.camera-assigned", "pipeline.camera-unassigned", "pipeline.camera-updated"]
-  ), V(
+  ), Q(
     ["pipelineRunner", "getCameraMetrics"],
     ["pipeline.camera-metrics-snapshot"]
   );
   const { data: o } = re(
     { deviceId: e },
     { staleTime: 3e4 }
-  ), n = o?.agentNodeId ?? null, m = typeof n == "string" && n.length > 0 && !n.startsWith("addon:") ? n : void 0, { data: a } = oe(
+  ), n = o?.agentNodeId ?? null, f = typeof n == "string" && n.length > 0 && !n.startsWith("addon:") ? n : void 0, { data: s } = oe(
     {
       deviceId: e,
-      ...m ? { nodeId: m } : {}
+      ...f ? { nodeId: f } : {}
     },
     { staleTime: 2e3, retry: !1 }
-  ), s = O(), r = q(s.trpcClient, e), { data: f } = B({
+  ), a = B(), r = U(a.trpcClient, e), { data: h } = T({
     queryKey: ["device", e, "pipelineAnalytics.getActiveTracks"],
     queryFn: () => r?.pipelineAnalytics?.getActiveTracks({}) ?? [],
     enabled: !!r,
     refetchInterval: 5e3,
     retry: !1
-  }), { data: l } = B({
+  }), { data: l } = T({
     queryKey: ["device", e, "audioMetrics.getCurrentSnapshot"],
     queryFn: () => r?.audioMetrics?.getCurrentSnapshot({}) ?? null,
     enabled: !!r,
     refetchInterval: 2e3,
     retry: !1
-  }), k = a?.phase ?? null, D = a?.detectionMode ?? null, N = Number(a?.actualFps ?? 0), C = Number(a?.configuredFps ?? 0), S = Number(a?.avgInferenceTimeMs ?? 0), c = Number(a?.queueDepth ?? 0), g = Number(a?.droppedFrames ?? 0), _ = ae(k ?? "watching"), u = f?.length ?? 0, h = l?.level.dbfs ?? null, $ = typeof h == "number" ? `${h.toFixed(1)} dBFS` : "—";
+  }), { data: v } = T({
+    queryKey: ["recording.getStatus", e],
+    queryFn: async () => await a.trpcClient.recording.getStatus.query({ deviceId: e }),
+    refetchInterval: 5e3,
+    retry: !1
+  }), { data: C } = T({
+    queryKey: ["recording.getDeviceConfig", e],
+    queryFn: async () => await a.trpcClient.recording.getDeviceConfig.query({ deviceId: e }),
+    staleTime: 3e4,
+    retry: !1
+  }), N = s?.phase ?? null, D = s?.detectionMode ?? null, S = Number(s?.actualFps ?? 0), u = Number(s?.configuredFps ?? 0), y = Number(s?.avgInferenceTimeMs ?? 0), _ = Number(s?.queueDepth ?? 0), p = Number(s?.droppedFrames ?? 0), g = ae(N ?? "watching"), A = h?.length ?? 0, c = l?.level.dbfs ?? null, x = typeof c == "number" ? `${c.toFixed(1)} dBFS` : "—", b = v?.enabled ?? !1, m = v?.activeMode ?? "off", $ = b && m !== "off", P = b ? m === "off" ? "Idle" : m === "continuous" ? "Continuous" : m === "onMotion" ? "On motion" : m === "onAudioThreshold" ? "On audio" : m : "Disabled", Z = (C?.profiles ?? []).join(", "), F = v ? `${Xe(v.storageBytes ?? 0)}${Z ? ` · ${Z}` : ""}` : void 0;
   return /* @__PURE__ */ i("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3", children: [
     /* @__PURE__ */ t(
-      M,
+      I,
       {
         icon: De,
         label: "Phase",
-        value: _.label,
-        color: _.textColor,
+        value: g.label,
+        color: g.textColor,
         subtext: D ?? void 0
       }
     ),
     /* @__PURE__ */ t(
-      M,
+      I,
       {
         icon: Te,
         label: "Detection FPS",
-        value: `${N.toFixed(1)}`,
-        subtext: C > 0 ? `target: ${C}` : void 0
+        value: `${S.toFixed(1)}`,
+        subtext: u > 0 ? `target: ${u}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      M,
+      I,
       {
-        icon: Ie,
+        icon: Ze,
         label: "Inference",
-        value: `${S.toFixed(1)} ms`,
-        subtext: c > 0 ? `queue: ${c}` : void 0
+        value: `${y.toFixed(1)} ms`,
+        subtext: _ > 0 ? `queue: ${_}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      M,
+      I,
       {
         icon: Ae,
         label: "Active Tracks",
-        value: String(u),
-        subtext: g > 0 ? `dropped: ${g}` : void 0
+        value: String(A),
+        subtext: p > 0 ? `dropped: ${p}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      M,
+      I,
       {
         icon: He,
         label: "Current dB",
-        value: $
+        value: x
+      }
+    ),
+    /* @__PURE__ */ t(
+      I,
+      {
+        icon: ze,
+        label: "Recording",
+        value: P,
+        color: $ ? "text-success" : void 0,
+        subtext: F
       }
     )
   ] });
 }
-function M({ icon: e, label: o, value: n, subtext: p, color: m }) {
+function Xe(e) {
+  if (!Number.isFinite(e) || e <= 0) return "0 B";
+  const o = ["B", "KB", "MB", "GB", "TB"], n = Math.min(o.length - 1, Math.floor(Math.log(e) / Math.log(1024))), d = e / 1024 ** n;
+  return `${n === 0 ? Math.round(d) : d.toFixed(1)} ${o[n]}`;
+}
+function I({ icon: e, label: o, value: n, subtext: d, color: f }) {
   return /* @__PURE__ */ i("div", { className: "rounded-lg border border-border bg-surface p-3 min-w-0", children: [
     /* @__PURE__ */ i("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" }),
@@ -349,49 +390,49 @@ function M({ icon: e, label: o, value: n, subtext: p, color: m }) {
     /* @__PURE__ */ t(
       "p",
       {
-        className: `text-lg font-semibold leading-tight truncate ${m ?? "text-foreground"}`,
+        className: `text-lg font-semibold leading-tight truncate ${f ?? "text-foreground"}`,
         title: n,
         children: n
       }
     ),
-    p && /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle mt-0.5 truncate", title: p, children: p })
+    d && /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle mt-0.5 truncate", title: d, children: d })
   ] });
 }
-const We = {
+const Je = {
   polygon: "Polygon",
   tripwire: "Tripwire"
-}, Ge = {
+}, Ye = {
   polygon: "bg-info/10 text-info",
   tripwire: "bg-warning/10 text-warning"
 };
-function Xe({
+function et({
   zones: e,
   selectedZoneId: o,
   drawingKind: n,
-  onSelectZone: p,
-  onDeleteZone: m,
-  onStartDraw: a,
-  onCancelDraw: s
+  onSelectZone: d,
+  onDeleteZone: f,
+  onStartDraw: s,
+  onCancelDraw: a
 }) {
   return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: n ? /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: s,
+        onClick: a,
         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(ne, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ t("span", { children: "Cancel" })
         ]
       }
-    ) : /* @__PURE__ */ i(X, { children: [
+    ) : /* @__PURE__ */ i(J, { children: [
       /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          onClick: () => a("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",
@@ -402,24 +443,24 @@ function Xe({
         "button",
         {
           type: "button",
-          onClick: () => a("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",
-          children: /* @__PURE__ */ t(Le, { className: "h-5 w-5 stroke-[2.5]" })
+          children: /* @__PURE__ */ t(je, { 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((r) => {
-      const f = r.id === o;
+      const h = r.id === o;
       return /* @__PURE__ */ i(
         "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: () => p(f ? null : r.id),
+          onClick: () => d(h ? null : r.id),
           children: [
             /* @__PURE__ */ t(
               "div",
@@ -432,8 +473,8 @@ function Xe({
             /* @__PURE__ */ t(
               "span",
               {
-                className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium flex-shrink-0 ${Ge[r.kind]}`,
-                children: We[r.kind]
+                className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium flex-shrink-0 ${Ye[r.kind]}`,
+                children: Je[r.kind]
               }
             ),
             /* @__PURE__ */ t(
@@ -443,7 +484,7 @@ function Xe({
                 title: "Delete zone",
                 className: "p-0.5 text-foreground-subtle hover:text-danger rounded transition-colors flex-shrink-0",
                 onClick: (l) => {
-                  l.stopPropagation(), m(r.id);
+                  l.stopPropagation(), f(r.id);
                 },
                 children: /* @__PURE__ */ t(H, { className: "h-3 w-3" })
               }
@@ -455,7 +496,7 @@ function Xe({
     }) })
   ] });
 }
-const Je = [
+const tt = [
   "#3b82f6",
   // blue
   "#10b981",
@@ -473,8 +514,8 @@ const Je = [
   "#ec4899"
   // pink
 ];
-function Ye({ zone: e, onSave: o, onDiscard: n, onDelete: p }) {
-  const m = U(), a = (r) => m?.updateDraft({ name: r }), s = (r) => m?.updateDraft({ color: r });
+function nt({ zone: e, onSave: o, onDiscard: n, onDelete: d }) {
+  const f = z(), s = (r) => f?.updateDraft({ name: r }), a = (r) => f?.updateDraft({ color: r });
   return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ t("h3", { className: "text-[10px] font-semibold text-foreground-subtle uppercase tracking-wider", children: "Editing" }),
@@ -484,17 +525,17 @@ function Ye({ zone: e, onSave: o, onDiscard: n, onDelete: p }) {
       "input",
       {
         type: "text",
-        className: P,
+        className: K,
         value: e.name,
         autoFocus: !0,
-        onChange: (r) => a(r.target.value),
+        onChange: (r) => s(r.target.value),
         onKeyDown: (r) => {
           r.key === "Enter" ? (r.preventDefault(), o()) : r.key === "Escape" && (r.preventDefault(), n());
         },
         placeholder: "Zone name"
       }
     ),
-    /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: Je.map((r) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: tt.map((r) => /* @__PURE__ */ t(
       "button",
       {
         type: "button",
@@ -504,7 +545,7 @@ function Ye({ zone: e, onSave: o, onDiscard: n, onDelete: p }) {
           e.color === r ? "border-white scale-110" : "border-transparent"
         ].join(" "),
         style: { backgroundColor: r },
-        onClick: () => s(r)
+        onClick: () => a(r)
       },
       r
     )) }),
@@ -515,17 +556,17 @@ function Ye({ zone: e, onSave: o, onDiscard: n, onDelete: p }) {
           type: "color",
           className: "h-6 w-6 rounded border border-border bg-background cursor-pointer p-0.5",
           value: e.color,
-          onChange: (r) => s(r.target.value)
+          onChange: (r) => a(r.target.value)
         }
       ),
       /* @__PURE__ */ t(
         "input",
         {
           type: "text",
-          className: `${P} font-mono`,
+          className: `${K} font-mono`,
           value: e.color,
           placeholder: "#000000",
-          onChange: (r) => s(r.target.value)
+          onChange: (r) => a(r.target.value)
         }
       )
     ] }),
@@ -542,7 +583,7 @@ function Ye({ zone: e, onSave: o, onDiscard: n, onDelete: p }) {
           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(Ze, { className: "h-3 w-3" }),
+            /* @__PURE__ */ t(Me, { className: "h-3 w-3" }),
             "Save"
           ]
         }
@@ -555,7 +596,7 @@ function Ye({ zone: e, onSave: o, onDiscard: n, onDelete: p }) {
           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(ne, { className: "h-3 w-3" }),
             "Discard"
           ]
         }
@@ -565,7 +606,7 @@ function Ye({ zone: e, onSave: o, onDiscard: n, onDelete: p }) {
       "button",
       {
         type: "button",
-        onClick: p,
+        onClick: d,
         className: `${se} w-full`,
         children: [
           /* @__PURE__ */ t(H, { className: "h-3 w-3" }),
@@ -575,10 +616,10 @@ function Ye({ zone: e, onSave: o, onDiscard: n, onDelete: p }) {
     )
   ] });
 }
-const et = ye.map(
+const rt = xe.map(
   (e) => ({ id: e.id, label: e.name })
 );
-function tt(e) {
+function ot(e) {
   return {
     id: e.id,
     name: e.name ?? "",
@@ -588,7 +629,7 @@ function tt(e) {
     enabled: e.enabled !== !1
   };
 }
-function nt(e) {
+function at(e) {
   const o = {
     id: e.id,
     zoneIds: e.zoneIds,
@@ -597,17 +638,17 @@ function nt(e) {
   };
   return e.name && (o.name = e.name), e.classFilter.length > 0 && (o.classFilter = e.classFilter), o;
 }
-function W({ dev: e, stage: o, zones: n, title: p }) {
-  const m = z(e?.state.zoneRules), a = Z(
-    () => m?.[o] ?? [],
-    [m, o]
-  ), [s, r] = R([]), [f, l] = R(!1), [k, D] = R(!1), [N, C] = R(null);
+function G({ dev: e, stage: o, zones: n, title: d }) {
+  const f = V(e?.state.zoneRules), s = M(
+    () => f?.[o] ?? [],
+    [f, o]
+  ), [a, r] = j([]), [h, l] = j(!1), [v, C] = j(!1), [N, D] = j(null);
   be(() => {
-    f || r(a.map(tt));
-  }, [a, f]);
+    h || r(s.map(ot));
+  }, [s, h]);
   const S = () => {
-    r((d) => [
-      ...d,
+    r((c) => [
+      ...c,
       {
         id: crypto.randomUUID(),
         name: "",
@@ -617,41 +658,41 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
         enabled: !0
       }
     ]), l(!0);
-  }, c = (d, y) => {
+  }, u = (c, x) => {
     r(
-      (b) => b.map((x, I) => {
-        if (I !== d) return x;
-        const E = x.classFilter.includes(y) ? x.classFilter.filter((j) => j !== y) : [...x.classFilter, y];
-        return { ...x, classFilter: E };
+      (b) => b.map((m, $) => {
+        if ($ !== c) return m;
+        const Z = m.classFilter.includes(x) ? m.classFilter.filter((F) => F !== x) : [...m.classFilter, x];
+        return { ...m, classFilter: Z };
       })
     ), l(!0);
-  }, g = (d, y) => {
+  }, y = (c, x) => {
     r(
-      (b) => b.map((x, I) => {
-        if (I !== d) return x;
-        const E = x.zoneIds.includes(y) ? x.zoneIds.filter((j) => j !== y) : [...x.zoneIds, y];
-        return { ...x, zoneIds: E };
+      (b) => b.map((m, $) => {
+        if ($ !== c) return m;
+        const Z = m.zoneIds.includes(x) ? m.zoneIds.filter((F) => F !== x) : [...m.zoneIds, x];
+        return { ...m, zoneIds: Z };
       })
     ), l(!0);
-  }, _ = (d) => {
-    r((y) => y.filter((b, x) => x !== d)), l(!0);
-  }, u = (d, y) => {
-    r((b) => b.map((x, I) => I === d ? { ...x, ...y } : x)), l(!0);
-  }, h = async () => {
+  }, _ = (c) => {
+    r((x) => x.filter((b, m) => m !== c)), l(!0);
+  }, p = (c, x) => {
+    r((b) => b.map((m, $) => $ === c ? { ...m, ...x } : m)), l(!0);
+  }, g = async () => {
     if (e?.zoneRules) {
-      D(!0), C(null);
+      C(!0), D(null);
       try {
-        await e.zoneRules.setRules({ stage: o, rules: s.map(nt) }), l(!1);
-      } catch (d) {
-        C(d instanceof Error ? d.message : String(d));
+        await e.zoneRules.setRules({ stage: o, rules: a.map(at) }), l(!1);
+      } catch (c) {
+        D(c instanceof Error ? c.message : String(c));
       } finally {
-        D(!1);
+        C(!1);
       }
     }
-  }, $ = f && !!e?.zoneRules && !k;
+  }, A = h && !!e?.zoneRules && !v;
   return /* @__PURE__ */ i("div", { className: "rounded-md border border-border bg-surface/40 p-2.5", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-2 gap-2", children: [
-      /* @__PURE__ */ t("h3", { className: `${J} truncate`, children: p ?? `${o === "motion" ? "Motion" : "Detection"} Rules` }),
+      /* @__PURE__ */ t("h3", { className: `${Y} truncate`, children: d ?? `${o === "motion" ? "Motion" : "Detection"} Rules` }),
       /* @__PURE__ */ i("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
         /* @__PURE__ */ i(
           "button",
@@ -662,7 +703,7 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
             className: ie,
             title: "Add rule",
             children: [
-              /* @__PURE__ */ t(Ke, { className: "h-2.5 w-2.5" }),
+              /* @__PURE__ */ t(qe, { className: "h-2.5 w-2.5" }),
               " Add"
             ]
           }
@@ -672,19 +713,19 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
           {
             type: "button",
             onClick: () => {
-              h();
+              g();
             },
-            disabled: !$,
+            disabled: !A,
             className: le,
             children: [
-              /* @__PURE__ */ t(qe, { className: "h-2.5 w-2.5" }),
-              k ? "…" : "Save"
+              /* @__PURE__ */ t(Oe, { className: "h-2.5 w-2.5" }),
+              v ? "…" : "Save"
             ]
           }
         )
       ] })
     ] }),
-    s.length === 0 ? /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle italic px-1 py-1.5 leading-tight", children: n.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: s.map((d, y) => /* @__PURE__ */ i(
+    a.length === 0 ? /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle italic px-1 py-1.5 leading-tight", children: n.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: a.map((c, x) => /* @__PURE__ */ i(
       "div",
       {
         className: "rounded border border-border/50 bg-background/40 px-2 py-1.5 flex flex-col gap-1.5 overflow-hidden",
@@ -695,20 +736,20 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
               {
                 type: "button",
                 role: "switch",
-                "aria-checked": d.enabled,
-                "aria-label": d.enabled ? "Disable rule" : "Enable rule",
-                title: d.enabled ? "Rule is active — click to disable" : "Rule is disabled — click to enable",
-                onClick: () => u(y, { enabled: !d.enabled }),
+                "aria-checked": c.enabled,
+                "aria-label": c.enabled ? "Disable rule" : "Enable rule",
+                title: c.enabled ? "Rule is active — click to disable" : "Rule is disabled — click to enable",
+                onClick: () => p(x, { enabled: !c.enabled }),
                 className: [
                   "inline-flex items-center justify-center h-5 w-9 rounded-full border transition-colors flex-shrink-0",
-                  d.enabled ? "border-primary/50 bg-primary/20 text-primary" : "border-border bg-surface text-foreground-subtle"
+                  c.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",
-                      d.enabled ? "translate-x-1.5 bg-primary" : "-translate-x-1.5 bg-foreground-subtle"
+                      c.enabled ? "translate-x-1.5 bg-primary" : "-translate-x-1.5 bg-foreground-subtle"
                     ].join(" ")
                   }
                 )
@@ -717,10 +758,10 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
             /* @__PURE__ */ t(
               "input",
               {
-                className: `${P} min-w-0`,
+                className: `${K} min-w-0`,
                 placeholder: "Rule name (optional)",
-                value: d.name,
-                onChange: (b) => u(y, { name: b.target.value })
+                value: c.name,
+                onChange: (b) => p(x, { name: b.target.value })
               }
             ),
             /* @__PURE__ */ t(
@@ -729,7 +770,7 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
                 type: "button",
                 title: "Remove rule",
                 "aria-label": "Remove rule",
-                onClick: () => _(y),
+                onClick: () => _(x),
                 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(H, { className: "h-3.5 w-3.5" })
               }
@@ -741,8 +782,8 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
               "button",
               {
                 type: "button",
-                onClick: () => u(y, { mode: "include" }),
-                className: `${A} ${d.mode === "include" ? F : T}`,
+                onClick: () => p(x, { mode: "include" }),
+                className: `${R} ${c.mode === "include" ? E : L}`,
                 children: "Include"
               }
             ),
@@ -750,8 +791,8 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
               "button",
               {
                 type: "button",
-                onClick: () => u(y, { mode: "exclude" }),
-                className: `${A} ${d.mode === "exclude" ? F : T}`,
+                onClick: () => p(x, { mode: "exclude" }),
+                className: `${R} ${c.mode === "exclude" ? E : L}`,
                 children: "Exclude"
               }
             )
@@ -759,13 +800,13 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
           /* @__PURE__ */ i("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" }),
             n.length === 0 ? /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic", children: "none" }) : n.map((b) => {
-              const x = d.zoneIds.includes(b.id);
+              const m = c.zoneIds.includes(b.id);
               return /* @__PURE__ */ i(
                 "button",
                 {
                   type: "button",
-                  onClick: () => g(y, b.id),
-                  className: `${A} ${x ? F : T}`,
+                  onClick: () => y(x, b.id),
+                  className: `${R} ${m ? E : L}`,
                   children: [
                     /* @__PURE__ */ t(
                       "span",
@@ -783,39 +824,39 @@ function W({ dev: e, stage: o, zones: n, title: p }) {
           ] }),
           /* @__PURE__ */ i("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" }),
-            et.map((b) => {
-              const x = d.classFilter.includes(b.id);
+            rt.map((b) => {
+              const m = c.classFilter.includes(b.id);
               return /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: () => c(y, b.id),
-                  className: `${A} ${x ? F : T}`,
+                  onClick: () => u(x, b.id),
+                  className: `${R} ${m ? E : L}`,
                   children: b.label
                 },
                 b.id
               );
             }),
-            d.classFilter.length === 0 && /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic ml-1", children: "any" })
+            c.classFilter.length === 0 && /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic ml-1", children: "any" })
           ] })
         ]
       },
-      d.id
+      c.id
     )) }),
     N && /* @__PURE__ */ t("p", { className: "mt-2 text-[10px] text-danger", children: N })
   ] });
 }
-function rt(e) {
+function st(e) {
   const o = e.kind === "tripwire" ? { kind: "line", points: e.points } : { kind: "polygon", points: e.points };
   return { id: e.id, label: e.name, color: e.color, shape: o };
 }
-function ot(e) {
+function it(e) {
   return e === "line" ? "tripwire" : "polygon";
 }
-function at(e) {
+function lt(e) {
   return e === "tripwire" ? "line" : "polygon";
 }
-const st = "#3b82f6", it = ["polygon", "line"], L = [
+const ct = "#3b82f6", dt = ["polygon", "line"], q = [
   "#3b82f6",
   "#10b981",
   "#f59e0b",
@@ -827,22 +868,22 @@ const st = "#3b82f6", it = ["polygon", "line"], L = [
   "#8b5cf6",
   "#14b8a6"
 ];
-function lt(e) {
+function ut(e) {
   const o = new Set(e.map((n) => (n.color ?? "").toLowerCase()));
-  for (const n of L)
+  for (const n of q)
     if (!o.has(n.toLowerCase())) return n;
-  return L[e.length % L.length];
+  return q[e.length % q.length];
 }
-function ct(e) {
+function pt(e) {
   return {
     id: e.id,
     name: e.name,
     kind: e.kind,
-    color: e.color || st,
+    color: e.color || ct,
     points: [...e.polygon]
   };
 }
-function G(e) {
+function X(e) {
   return {
     id: e.id,
     name: e.name,
@@ -851,101 +892,101 @@ function G(e) {
     color: e.color
   };
 }
-function dt({ deviceId: e }) {
-  const o = O(), n = q(o.trpcClient, e), p = z(n?.state.zones), m = Z(() => p?.zones ?? [], [p]), a = U(), s = a?.drawingKind ?? null, r = a?.selectedZoneId ?? null, f = a?.editingDraft ?? null, l = Z(() => m.map((c) => f && f.id === c.id ? {
-    id: f.id,
-    name: f.name,
-    kind: f.kind,
-    color: f.color,
-    points: [...f.points]
-  } : ct(c)), [m, f]), k = Z(() => l.map(rt), [l]), D = w(
-    async (c) => {
-      if (c.kind !== "polygon" && c.kind !== "line") return;
-      const g = {
+function mt({ deviceId: e }) {
+  const o = B(), n = U(o.trpcClient, e), d = V(n?.state.zones), f = M(() => d?.zones ?? [], [d]), s = z(), a = s?.drawingKind ?? null, r = s?.selectedZoneId ?? null, h = s?.editingDraft ?? null, l = M(() => f.map((u) => h && h.id === u.id ? {
+    id: h.id,
+    name: h.name,
+    kind: h.kind,
+    color: h.color,
+    points: [...h.points]
+  } : pt(u)), [f, h]), v = M(() => l.map(st), [l]), C = w(
+    async (u) => {
+      if (u.kind !== "polygon" && u.kind !== "line") return;
+      const y = {
         id: crypto.randomUUID(),
         name: "",
-        kind: ot(c.kind),
-        color: lt(l),
-        points: [...c.points]
+        kind: it(u.kind),
+        color: ut(l),
+        points: [...u.points]
       };
       try {
-        await n?.zones?.addZone({ zone: G(g) });
+        await n?.zones?.addZone({ zone: X(y) });
       } catch (_) {
         console.error("zones.addZone failed", _);
       }
-      a?.setSelectedZoneId(g.id), a?.setDrawingKind(null);
+      s?.setSelectedZoneId(y.id), s?.setDrawingKind(null);
     },
-    [n, l, a]
+    [n, l, s]
   ), N = w(
-    async (c, g) => {
-      const _ = g.map((h) => ({ x: h.x, y: h.y }));
-      if (f && f.id === c) {
-        a?.updateDraft({ points: _ });
+    async (u, y) => {
+      const _ = y.map((g) => ({ x: g.x, y: g.y }));
+      if (h && h.id === u) {
+        s?.updateDraft({ points: _ });
         return;
       }
-      const u = l.find((h) => h.id === c);
-      if (u)
+      const p = l.find((g) => g.id === u);
+      if (p)
         try {
-          await n?.zones?.updateZone({ zone: G({ ...u, points: _ }) });
-        } catch (h) {
-          console.error("zones.updateZone failed", h);
+          await n?.zones?.updateZone({ zone: X({ ...p, points: _ }) });
+        } catch (g) {
+          console.error("zones.updateZone failed", g);
         }
     },
-    [n, l, f, a]
-  ), C = w(
-    (c, g) => {
-      typeof c == "string" && (g.kind !== "polygon" && g.kind !== "line" || N(c, g.points));
+    [n, l, h, s]
+  ), D = w(
+    (u, y) => {
+      typeof u == "string" && (y.kind !== "polygon" && y.kind !== "line" || N(u, y.points));
     },
     [N]
   ), S = w(
-    (c) => {
-      if (c === null) {
-        a?.discardDraft(), a?.setSelectedZoneId(null);
+    (u) => {
+      if (u === null) {
+        s?.discardDraft(), s?.setSelectedZoneId(null);
         return;
       }
-      if (typeof c != "string") return;
-      const g = l.find((_) => _.id === c);
-      if (!g) {
-        a?.setSelectedZoneId(c);
+      if (typeof u != "string") return;
+      const y = l.find((_) => _.id === u);
+      if (!y) {
+        s?.setSelectedZoneId(u);
         return;
       }
-      a?.enterDraft({
-        id: g.id,
-        kind: g.kind,
-        name: g.name,
-        color: g.color,
-        points: g.points
+      s?.enterDraft({
+        id: y.id,
+        kind: y.kind,
+        name: y.name,
+        color: y.color,
+        points: y.points
       });
     },
-    [l, a]
+    [l, s]
   );
-  return l.length === 0 && s === null ? null : /* @__PURE__ */ t(
+  return l.length === 0 && a === null ? null : /* @__PURE__ */ t(
     ce,
     {
       transparent: !0,
-      items: k,
-      supportedShapes: it,
+      items: v,
+      supportedShapes: dt,
       selectedId: r,
       onSelect: S,
-      onShapeChange: C,
-      onDrawComplete: (c) => {
-        D(c);
+      onShapeChange: D,
+      onDrawComplete: (u) => {
+        C(u);
       },
-      drawingKind: s === null ? null : at(s)
+      drawingKind: a === null ? null : lt(a)
     }
   );
 }
-const ut = xe(dt), pt = "#3b82f6";
-function mt(e) {
+const ft = ye(mt), ht = "#3b82f6";
+function gt(e) {
   return {
     id: e.id,
     name: e.name,
     kind: e.kind,
-    color: e.color || pt,
+    color: e.color || ht,
     points: [...e.polygon]
   };
 }
-function ft(e) {
+function bt(e) {
   return {
     id: e.id,
     name: e.name,
@@ -954,81 +995,81 @@ function ft(e) {
     color: e.color
   };
 }
-function ht({ deviceId: e }) {
-  const o = O(), n = q(o.trpcClient, e), p = z(n?.state.zones), m = Z(() => p?.zones ?? [], [p]), a = Z(() => m.map(mt), [m]), s = U(), r = s?.drawingKind ?? null, f = s?.selectedZoneId ?? null, l = s?.editingDraft ?? null, k = Z(
+function yt({ deviceId: e }) {
+  const o = B(), n = U(o.trpcClient, e), d = V(n?.state.zones), f = M(() => d?.zones ?? [], [d]), s = M(() => f.map(gt), [f]), a = z(), r = a?.drawingKind ?? null, h = a?.selectedZoneId ?? null, l = a?.editingDraft ?? null, v = M(
     () => ({
       id: "zones",
       order: 100,
       // above PTZ overlay (order 0) so handles aren't occluded
-      node: /* @__PURE__ */ t(ut, { deviceId: e })
+      node: /* @__PURE__ */ t(ft, { deviceId: e })
     }),
     [e]
   );
-  de(k);
-  const D = w(
-    (u) => {
-      if (u === null) {
-        s?.discardDraft(), s?.setSelectedZoneId(null);
+  de(v);
+  const C = w(
+    (p) => {
+      if (p === null) {
+        a?.discardDraft(), a?.setSelectedZoneId(null);
         return;
       }
-      const h = a.find(($) => $.id === u);
-      h && s?.enterDraft({
-        id: h.id,
-        kind: h.kind,
-        name: h.name,
-        color: h.color,
-        points: h.points
+      const g = s.find((A) => A.id === p);
+      g && a?.enterDraft({
+        id: g.id,
+        kind: g.kind,
+        name: g.name,
+        color: g.color,
+        points: g.points
       });
     },
-    [a, s]
+    [s, a]
   ), N = w(async () => {
-    const u = s?.editingDraft;
-    if (u) {
+    const p = a?.editingDraft;
+    if (p) {
       try {
         await n?.zones?.updateZone({
-          zone: ft({
-            id: u.id,
-            kind: u.kind,
-            name: u.name,
-            color: u.color,
-            points: [...u.points]
+          zone: bt({
+            id: p.id,
+            kind: p.kind,
+            name: p.name,
+            color: p.color,
+            points: [...p.points]
           })
         });
-      } catch (h) {
-        console.error("zones.updateZone failed", h);
+      } catch (g) {
+        console.error("zones.updateZone failed", g);
       }
-      s?.discardDraft(), s?.setSelectedZoneId(null);
+      a?.discardDraft(), a?.setSelectedZoneId(null);
     }
-  }, [n, s]), C = w(() => {
-    s?.discardDraft(), s?.setSelectedZoneId(null);
-  }, [s]), S = w(
-    async (u) => {
+  }, [n, a]), D = w(() => {
+    a?.discardDraft(), a?.setSelectedZoneId(null);
+  }, [a]), S = w(
+    async (p) => {
       try {
-        await n?.zones?.removeZone({ zoneId: u });
-      } catch (h) {
-        console.error("zones.removeZone failed", h);
+        await n?.zones?.removeZone({ zoneId: p });
+      } catch (g) {
+        console.error("zones.removeZone failed", g);
       }
-      s?.selectedZoneId === u && s.setSelectedZoneId(null), s?.editingDraft?.id === u && s.discardDraft();
+      a?.selectedZoneId === p && a.setSelectedZoneId(null), a?.editingDraft?.id === p && a.discardDraft();
     },
-    [n, s]
-  ), c = w(
-    (u) => {
-      s?.startDrawing(u);
+    [n, a]
+  ), u = w(
+    (p) => {
+      a?.startDrawing(p);
     },
-    [s]
-  ), g = w(() => {
-    s?.setDrawingKind(null);
-  }, [s]), _ = Z(() => !l || !a.find((h) => h.id === l.id) ? null : {
+    [a]
+  ), y = w(() => {
+    a?.setDrawingKind(null);
+  }, [a]), _ = M(() => !l || !s.find((g) => g.id === l.id) ? null : {
     id: l.id,
     kind: l.kind,
     name: l.name,
     color: l.color,
     points: [...l.points]
-  }, [a, l]);
+  }, [s, l]);
   return /* @__PURE__ */ i("div", { className: ue, children: [
     /* @__PURE__ */ i("div", { className: pe, children: [
       /* @__PURE__ */ t("div", { className: me, children: /* @__PURE__ */ i("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ t("h2", { className: J, children: "Detection Zones" }),
+        /* @__PURE__ */ t("h2", { className: Y, children: "Detection Zones" }),
         /* @__PURE__ */ i("p", { className: `${fe} mt-0.5 leading-tight`, children: [
           "Pick a shape below or use the ",
           /* @__PURE__ */ t("strong", { className: "text-foreground", children: "Zones" }),
@@ -1037,25 +1078,25 @@ function ht({ deviceId: e }) {
       ] }) }),
       /* @__PURE__ */ i("div", { className: `${he} flex flex-col gap-3`, children: [
         /* @__PURE__ */ t(
-          Xe,
+          et,
           {
-            zones: a,
-            selectedZoneId: f,
+            zones: s,
+            selectedZoneId: h,
             drawingKind: r,
-            onSelectZone: D,
+            onSelectZone: C,
             onDeleteZone: S,
-            onStartDraw: c,
-            onCancelDraw: g
+            onStartDraw: u,
+            onCancelDraw: y
           }
         ),
-        _ && /* @__PURE__ */ i(X, { children: [
+        _ && /* @__PURE__ */ i(J, { children: [
           /* @__PURE__ */ t("div", { className: "border-t border-border" }),
           /* @__PURE__ */ t(
-            Ye,
+            nt,
             {
               zone: _,
               onSave: N,
-              onDiscard: C,
+              onDiscard: D,
               onDelete: () => S(_.id)
             }
           )
@@ -1063,18 +1104,18 @@ function ht({ deviceId: e }) {
       ] })
     ] }),
     /* @__PURE__ */ i("div", { className: `grid grid-cols-1 2xl:grid-cols-2 ${ge}`, children: [
-      /* @__PURE__ */ t(W, { dev: n, stage: "motion", zones: m }),
-      /* @__PURE__ */ t(W, { dev: n, stage: "detection", zones: m })
+      /* @__PURE__ */ t(G, { dev: n, stage: "motion", zones: f }),
+      /* @__PURE__ */ t(G, { dev: n, stage: "detection", zones: f })
     ] })
   ] });
 }
-function gt(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(ht, { deviceId: e.deviceId });
+function xt(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(yt, { deviceId: e.deviceId });
 }
-const kt = {
-  "pipeline-quick-stats": Ve,
-  "zone-editor": gt
+const Ct = {
+  "pipeline-quick-stats": We,
+  "zone-editor": xt
 };
 export {
-  kt as default
+  Ct as default
 };