@camstack/addon-pipeline-orchestrator 0.1.26 → 0.1.28

package/dist/_stub.js

@@ -1,24 +1,23 @@
-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";
+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
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const nt = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), rt = (e) => e.replace(
+const _e = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ve = (e) => e.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (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")
+  (o, n, d) => d ? d.toUpperCase() : n.toLowerCase()
+), W = (e) => {
+  const o = ve(e);
+  return o.charAt(0).toUpperCase() + o.slice(1);
+}, 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;
 };
 /**
@@ -27,7 +26,7 @@ const nt = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), rt = (
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var st = {
+var we = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -44,31 +43,31 @@ var st = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const at = Ie(
+const Ne = ee(
   ({
     color: e = "currentColor",
-    size: i = 24,
-    strokeWidth: r = 2,
-    absoluteStrokeWidth: u,
+    size: o = 24,
+    strokeWidth: n = 2,
+    absoluteStrokeWidth: d,
     className: f = "",
     children: s,
-    iconNode: l,
-    ...a
-  }, g) => pe(
+    iconNode: a,
+    ...r
+  }, h) => O(
     "svg",
     {
-      ref: g,
-      ...st,
-      width: i,
-      height: i,
+      ref: h,
+      ...we,
+      width: o,
+      height: o,
       stroke: e,
-      strokeWidth: u ? Number(r) * 24 / Number(i) : r,
-      className: $e("lucide", f),
-      ...!s && !ot(a) && { "aria-hidden": "true" },
-      ...a
+      strokeWidth: d ? Number(n) * 24 / Number(o) : n,
+      className: te("lucide", f),
+      ...!s && !ke(r) && { "aria-hidden": "true" },
+      ...r
     },
     [
-      ...l.map(([n, F]) => pe(n, F)),
+      ...a.map(([l, v]) => O(l, v)),
       ...Array.isArray(s) ? s : [s]
     ]
   )
@@ -79,20 +78,20 @@ const at = Ie(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const O = (e, i) => {
-  const r = Ie(
-    ({ className: u, ...f }, s) => pe(at, {
+const k = (e, o) => {
+  const n = ee(
+    ({ className: d, ...f }, s) => O(Ne, {
       ref: s,
-      iconNode: i,
-      className: $e(
-        `lucide-${nt(_e(e))}`,
+      iconNode: o,
+      className: te(
+        `lucide-${_e(W(e))}`,
         `lucide-${e}`,
-        u
+        d
       ),
       ...f
     })
   );
-  return r.displayName = _e(e), r;
+  return n.displayName = W(e), n;
 };
 /**
  * @license lucide-react v0.511.0 - ISC
@@ -100,7 +99,7 @@ const O = (e, i) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const it = [
+const Ce = [
   [
     "path",
     {
@@ -108,21 +107,21 @@ const it = [
       key: "169zse"
     }
   ]
-], lt = O("activity", it);
+], 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 ct = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], dt = O("check", ct);
+const Se = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], Me = k("check", Se);
 /**
  * @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 ut = [
+const $e = [
   ["path", { d: "M12 20v2", key: "1lh1kg" }],
   ["path", { d: "M12 2v2", key: "tus03m" }],
   ["path", { d: "M17 20v2", key: "1rnc9c" }],
@@ -137,14 +136,14 @@ const ut = [
   ["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 = O("cpu", ut);
+], 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 ft = [
+const Ie = [
   [
     "path",
     {
@@ -153,24 +152,24 @@ const ft = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], ht = O("eye", ft);
+], Ae = k("eye", Ie);
 /**
  * @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 Fe = [
   ["path", { d: "m12 14 4-4", key: "9kzdfg" }],
   ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0", key: "19p75a" }]
-], gt = O("gauge", mt);
+], Te = k("gauge", Fe);
 /**
  * @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 bt = [
+const Re = [
   [
     "path",
     {
@@ -178,31 +177,31 @@ const bt = [
       key: "yt0hxn"
     }
   ]
-], yt = O("hexagon", bt);
+], 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 xt = [["path", { d: "M5 12h14", key: "1ays0h" }]], _t = O("minus", xt);
+const Le = [["path", { d: "M5 12h14", key: "1ays0h" }]], je = k("minus", Le);
 /**
  * @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 = [
+const Pe = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
-], kt = O("plus", vt);
+], 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 wt = [
+const Ke = [
   [
     "path",
     {
@@ -212,107 +211,179 @@ const wt = [
   ],
   ["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" }]
-], Nt = O("save", wt);
+], 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 Ct = [
+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" }]
-], be = O("trash-2", Ct);
+], 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 Dt = [
+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 Ve = [
+  [
+    "path",
+    {
+      d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
+      key: "uqj9uw"
+    }
+  ],
+  ["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 = 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 Qe = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], 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 });
+], 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 It({ deviceId: e }) {
-  xe(
+function Ge({ deviceId: e }) {
+  Q(
     ["pipelineOrchestrator", "getPipelineAssignment"],
     ["pipeline.camera-assigned", "pipeline.camera-unassigned", "pipeline.camera-updated"]
-  ), xe(
+  ), Q(
     ["pipelineRunner", "getCameraMetrics"],
     ["pipeline.camera-metrics-snapshot"]
   );
-  const { data: i } = Oe(
+  const { data: o } = re(
     { deviceId: e },
     { staleTime: 3e4 }
-  ), r = i?.agentNodeId ?? null, f = typeof r == "string" && r.length > 0 && !r.startsWith("addon:") ? r : void 0, { data: s } = je(
+  ), n = o?.agentNodeId ?? null, f = typeof n == "string" && n.length > 0 && !n.startsWith("addon:") ? n : void 0, { data: s } = oe(
     {
       deviceId: e,
       ...f ? { nodeId: f } : {}
     },
     { staleTime: 2e3, retry: !1 }
-  ), l = fe(), a = he(l.trpcClient, e), { data: g } = Te({
+  ), a = B(), r = U(a.trpcClient, e), { data: h } = T({
     queryKey: ["device", e, "pipelineAnalytics.getActiveTracks"],
-    queryFn: () => a?.pipelineAnalytics?.getActiveTracks({}) ?? [],
-    enabled: !!a,
+    queryFn: () => r?.pipelineAnalytics?.getActiveTracks({}) ?? [],
+    enabled: !!r,
+    refetchInterval: 5e3,
+    retry: !1
+  }), { data: l } = T({
+    queryKey: ["device", e, "audioMetrics.getCurrentSnapshot"],
+    queryFn: () => r?.audioMetrics?.getCurrentSnapshot({}) ?? null,
+    enabled: !!r,
+    refetchInterval: 2e3,
+    retry: !1
+  }), { data: v } = T({
+    queryKey: ["recording.getStatus", e],
+    queryFn: async () => await a.trpcClient.recording.getStatus.query({ deviceId: e }),
     refetchInterval: 5e3,
     retry: !1
-  }), 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: [
+  }), { 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(
-      re,
+      I,
       {
-        icon: lt,
+        icon: De,
         label: "Phase",
-        value: L.label,
-        color: L.textColor,
-        subtext: F ?? void 0
+        value: g.label,
+        color: g.textColor,
+        subtext: D ?? void 0
       }
     ),
     /* @__PURE__ */ t(
-      re,
+      I,
       {
-        icon: gt,
+        icon: Te,
         label: "Detection FPS",
-        value: `${d.toFixed(1)}`,
-        subtext: $ > 0 ? `target: ${$}` : void 0
+        value: `${S.toFixed(1)}`,
+        subtext: u > 0 ? `target: ${u}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      re,
+      I,
       {
-        icon: pt,
+        icon: Ze,
         label: "Inference",
-        value: `${b.toFixed(1)} ms`,
-        subtext: k > 0 ? `queue: ${k}` : void 0
+        value: `${y.toFixed(1)} ms`,
+        subtext: _ > 0 ? `queue: ${_}` : void 0
       }
     ),
     /* @__PURE__ */ t(
-      re,
+      I,
       {
-        icon: ht,
+        icon: Ae,
         label: "Active Tracks",
-        value: String(S),
-        subtext: Z > 0 ? `dropped: ${Z}` : void 0
+        value: String(A),
+        subtext: p > 0 ? `dropped: ${p}` : void 0
+      }
+    ),
+    /* @__PURE__ */ t(
+      I,
+      {
+        icon: He,
+        label: "Current dB",
+        value: x
+      }
+    ),
+    /* @__PURE__ */ t(
+      I,
+      {
+        icon: ze,
+        label: "Recording",
+        value: P,
+        color: $ ? "text-success" : void 0,
+        subtext: F
       }
     )
-  ] }) });
+  ] });
 }
-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: [
+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" }),
       /* @__PURE__ */ t(
         "span",
         {
           className: "text-[10px] text-foreground-subtle uppercase tracking-wider truncate",
-          title: i,
-          children: i
+          title: o,
+          children: o
         }
       )
     ] }),
@@ -320,43 +391,43 @@ function re({ icon: e, label: i, value: r, subtext: u, color: f }) {
       "p",
       {
         className: `text-lg font-semibold leading-tight truncate ${f ?? "text-foreground"}`,
-        title: r,
-        children: r
+        title: n,
+        children: n
       }
     ),
-    u && /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle mt-0.5 truncate", title: u, children: u })
+    d && /* @__PURE__ */ t("p", { className: "text-[10px] text-foreground-subtle mt-0.5 truncate", title: d, children: d })
   ] });
 }
-const St = {
+const Je = {
   polygon: "Polygon",
   tripwire: "Tripwire"
-}, $t = {
+}, Ye = {
   polygon: "bg-info/10 text-info",
   tripwire: "bg-warning/10 text-warning"
 };
-function Zt({
+function et({
   zones: e,
-  selectedZoneId: i,
-  drawingKind: r,
-  onSelectZone: u,
+  selectedZoneId: o,
+  drawingKind: n,
+  onSelectZone: d,
   onDeleteZone: f,
   onStartDraw: s,
-  onCancelDraw: l
+  onCancelDraw: a
 }) {
-  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: r ? /* @__PURE__ */ c(
+  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: l,
+        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(Ze, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ t(ne, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ t("span", { children: "Cancel" })
         ]
       }
-    ) : /* @__PURE__ */ c(De, { children: [
+    ) : /* @__PURE__ */ i(J, { children: [
       /* @__PURE__ */ t(
         "button",
         {
@@ -365,7 +436,7 @@ function Zt({
           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(yt, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ t(Ee, { className: "h-4 w-4" })
         }
       ),
       /* @__PURE__ */ t(
@@ -376,34 +447,34 @@ function Zt({
           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(_t, { 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((a) => {
-      const g = a.id === i;
-      return /* @__PURE__ */ c(
+    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 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",
-            g ? "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: () => u(g ? null : a.id),
+          onClick: () => d(h ? null : r.id),
           children: [
             /* @__PURE__ */ t(
               "div",
               {
                 className: "h-2.5 w-2.5 rounded-sm flex-shrink-0",
-                style: { backgroundColor: a.color }
+                style: { backgroundColor: r.color }
               }
             ),
-            /* @__PURE__ */ t("span", { className: "flex-1 truncate text-[11px] font-medium text-foreground", children: a.name }),
+            /* @__PURE__ */ t("span", { className: "flex-1 truncate text-[11px] font-medium text-foreground", children: r.name }),
             /* @__PURE__ */ t(
               "span",
               {
-                className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium flex-shrink-0 ${$t[a.kind]}`,
-                children: St[a.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(
@@ -412,20 +483,20 @@ function Zt({
                 type: "button",
                 title: "Delete zone",
                 className: "p-0.5 text-foreground-subtle hover:text-danger rounded transition-colors flex-shrink-0",
-                onClick: (n) => {
-                  n.stopPropagation(), f(a.id);
+                onClick: (l) => {
+                  l.stopPropagation(), f(r.id);
                 },
-                children: /* @__PURE__ */ t(be, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ t(H, { className: "h-3 w-3" })
               }
             )
           ]
         },
-        a.id
+        r.id
       );
     }) })
   ] });
 }
-const At = [
+const tt = [
   "#3b82f6",
   // blue
   "#10b981",
@@ -443,10 +514,10 @@ const At = [
   "#ec4899"
   // pink
 ];
-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: [
+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" }),
       /* @__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,101 +525,101 @@ function Ft({ zone: e, onSave: i, onDiscard: r, onDelete: u }) {
       "input",
       {
         type: "text",
-        className: ue,
+        className: K,
         value: e.name,
         autoFocus: !0,
-        onChange: (a) => s(a.target.value),
-        onKeyDown: (a) => {
-          a.key === "Enter" ? (a.preventDefault(), i()) : a.key === "Escape" && (a.preventDefault(), r());
+        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: At.map((a) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: tt.map((r) => /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        title: a,
+        title: r,
         className: [
           "h-4 w-4 rounded border-2 cursor-pointer transition-transform hover:scale-110",
-          e.color === a ? "border-white scale-110" : "border-transparent"
+          e.color === r ? "border-white scale-110" : "border-transparent"
         ].join(" "),
-        style: { backgroundColor: a },
-        onClick: () => l(a)
+        style: { backgroundColor: r },
+        onClick: () => a(r)
       },
-      a
+      r
     )) }),
-    /* @__PURE__ */ c("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ i("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: (a) => l(a.target.value)
+          onChange: (r) => a(r.target.value)
         }
       ),
       /* @__PURE__ */ t(
         "input",
         {
           type: "text",
-          className: `${ue} font-mono`,
+          className: `${K} font-mono`,
           value: e.color,
           placeholder: "#000000",
-          onChange: (a) => l(a.target.value)
+          onChange: (r) => a(r.target.value)
         }
       )
     ] }),
-    /* @__PURE__ */ c("p", { className: "text-[9px] text-foreground-subtle leading-tight", children: [
+    /* @__PURE__ */ i("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__ */ c("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ c(
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ i(
         "button",
         {
           type: "button",
-          onClick: i,
+          onClick: o,
           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(dt, { className: "h-3 w-3" }),
+            /* @__PURE__ */ t(Me, { className: "h-3 w-3" }),
             "Save"
           ]
         }
       ),
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ i(
         "button",
         {
           type: "button",
-          onClick: r,
+          onClick: n,
           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(Ze, { className: "h-3 w-3" }),
+            /* @__PURE__ */ t(ne, { className: "h-3 w-3" }),
             "Discard"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: u,
-        className: `${Be} w-full`,
+        onClick: d,
+        className: `${se} w-full`,
         children: [
-          /* @__PURE__ */ t(be, { className: "h-3 w-3" }),
+          /* @__PURE__ */ t(H, { className: "h-3 w-3" }),
           "Delete"
         ]
       }
     )
   ] });
 }
-const Lt = Qe.map(
+const rt = xe.map(
   (e) => ({ id: e.id, label: e.name })
 );
-function Et(e) {
+function ot(e) {
   return {
     id: e.id,
     name: e.name ?? "",
@@ -558,127 +629,127 @@ function Et(e) {
     enabled: e.enabled !== !1
   };
 }
-function Pt(e) {
-  const i = {
+function at(e) {
+  const o = {
     id: e.id,
     zoneIds: e.zoneIds,
     mode: e.mode,
     enabled: e.enabled
   };
-  return e.name && (i.name = e.name), e.classFilter.length > 0 && (i.classFilter = e.classFilter), i;
+  return e.name && (o.name = e.name), e.classFilter.length > 0 && (o.classFilter = e.classFilter), o;
 }
-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(() => {
-    g || a(s.map(Et));
-  }, [s, g]);
-  const k = () => {
-    a((m) => [
-      ...m,
+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(() => {
+    h || r(s.map(ot));
+  }, [s, h]);
+  const S = () => {
+    r((c) => [
+      ...c,
       {
         id: crypto.randomUUID(),
         name: "",
-        zoneIds: r[0] ? [r[0].id] : [],
+        zoneIds: n[0] ? [n[0].id] : [],
         mode: "exclude",
         classFilter: [],
         enabled: !0
       }
-    ]), n(!0);
-  }, 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 };
+    ]), l(!0);
+  }, u = (c, x) => {
+    r(
+      (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 };
       })
-    ), n(!0);
-  }, 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 };
+    ), l(!0);
+  }, y = (c, x) => {
+    r(
+      (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 };
       })
-    ), n(!0);
-  }, 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 () => {
+    ), l(!0);
+  }, _ = (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), b(null);
+      C(!0), D(null);
       try {
-        await e.zoneRules.setRules({ stage: i, rules: l.map(Pt) }), n(!1);
-      } catch (m) {
-        b(m instanceof Error ? m.message : String(m));
+        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);
       }
     }
-  }, 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(
+  }, 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: `${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",
           {
             type: "button",
-            onClick: k,
-            disabled: r.length === 0 || !e,
-            className: qe,
+            onClick: S,
+            disabled: n.length === 0 || !e,
+            className: ie,
             title: "Add rule",
             children: [
-              /* @__PURE__ */ t(kt, { className: "h-2.5 w-2.5" }),
+              /* @__PURE__ */ t(qe, { className: "h-2.5 w-2.5" }),
               " Add"
             ]
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             onClick: () => {
-              h();
+              g();
             },
-            disabled: !Y,
-            className: Ue,
+            disabled: !A,
+            className: le,
             children: [
-              /* @__PURE__ */ t(Nt, { className: "h-2.5 w-2.5" }),
-              F ? "…" : "Save"
+              /* @__PURE__ */ t(Oe, { className: "h-2.5 w-2.5" }),
+              v ? "…" : "Save"
             ]
           }
         )
       ] })
     ] }),
-    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(
+    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",
         children: [
-          /* @__PURE__ */ c("div", { className: "grid grid-cols-[auto_1fr_auto] items-center gap-1.5", children: [
+          /* @__PURE__ */ i("div", { className: "grid grid-cols-[auto_1fr_auto] items-center gap-1.5", children: [
             /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 role: "switch",
-                "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 }),
+                "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",
-                  m.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",
-                      m.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(" ")
                   }
                 )
@@ -687,10 +758,10 @@ function ve({ dev: e, stage: i, zones: r, title: u }) {
             /* @__PURE__ */ t(
               "input",
               {
-                className: `${ue} min-w-0`,
+                className: `${K} min-w-0`,
                 placeholder: "Rule name (optional)",
-                value: m.name,
-                onChange: (w) => y(_, { name: w.target.value })
+                value: c.name,
+                onChange: (b) => p(x, { name: b.target.value })
               }
             ),
             /* @__PURE__ */ t(
@@ -699,20 +770,20 @@ function ve({ dev: e, stage: i, zones: r, title: u }) {
                 type: "button",
                 title: "Remove rule",
                 "aria-label": "Remove rule",
-                onClick: () => S(_),
+                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(be, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ t(H, { className: "h-3.5 w-3.5" })
               }
             )
           ] }),
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+          /* @__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: "Mode" }),
             /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: () => y(_, { mode: "include" }),
-                className: `${ee} ${m.mode === "include" ? te : ne}`,
+                onClick: () => p(x, { mode: "include" }),
+                className: `${R} ${c.mode === "include" ? E : L}`,
                 children: "Include"
               }
             ),
@@ -720,451 +791,72 @@ function ve({ dev: e, stage: i, zones: r, title: u }) {
               "button",
               {
                 type: "button",
-                onClick: () => y(_, { mode: "exclude" }),
-                className: `${ee} ${m.mode === "exclude" ? te : ne}`,
+                onClick: () => p(x, { mode: "exclude" }),
+                className: `${R} ${c.mode === "exclude" ? E : L}`,
                 children: "Exclude"
               }
             )
           ] }),
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+          /* @__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" }),
-            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(
+            n.length === 0 ? /* @__PURE__ */ t("span", { className: "text-[10px] text-foreground-subtle italic", children: "none" }) : n.map((b) => {
+              const m = c.zoneIds.includes(b.id);
+              return /* @__PURE__ */ i(
                 "button",
                 {
                   type: "button",
-                  onClick: () => L(_, w.id),
-                  className: `${ee} ${N ? te : ne}`,
+                  onClick: () => y(x, b.id),
+                  className: `${R} ${m ? E : L}`,
                   children: [
                     /* @__PURE__ */ t(
                       "span",
                       {
                         className: "h-2 w-2 rounded-sm",
-                        style: { backgroundColor: w.color || "#3b82f6" }
+                        style: { backgroundColor: b.color || "#3b82f6" }
                       }
                     ),
-                    /* @__PURE__ */ t("span", { className: "truncate max-w-[7rem]", children: w.name || w.id })
+                    /* @__PURE__ */ t("span", { className: "truncate max-w-[7rem]", children: b.name || b.id })
                   ]
                 },
-                w.id
+                b.id
               );
             })
           ] }),
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+          /* @__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" }),
-            Lt.map((w) => {
-              const N = m.classFilter.includes(w.id);
+            rt.map((b) => {
+              const m = c.classFilter.includes(b.id);
               return /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: () => Z(_, w.id),
-                  className: `${ee} ${N ? te : ne}`,
-                  children: w.label
+                  onClick: () => u(x, b.id),
+                  className: `${R} ${m ? E : L}`,
+                  children: b.label
                 },
-                w.id
+                b.id
               );
             }),
-            m.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" })
           ] })
         ]
       },
-      m.id
+      c.id
     )) }),
-    $ && /* @__PURE__ */ t("p", { className: "mt-2 text-[10px] text-danger", children: $ })
+    N && /* @__PURE__ */ t("p", { className: "mt-2 text-[10px] text-danger", children: N })
   ] });
 }
-function z(e, i, r) {
-  return { x: e.x * i, y: e.y * r };
-}
-function ce(e, i, r) {
-  return { x: e.x / i, y: e.y / r };
+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 ke(e, i, r) {
-  return e.flatMap((u) => [u.x * i, u.y * r]);
+function it(e) {
+  return e === "line" ? "tripwire" : "polygon";
 }
-function Rt(e, i) {
-  return e.color;
+function lt(e) {
+  return e === "tripwire" ? "line" : "polygon";
 }
-const Tt = "33", Ot = "66", we = 16, Ne = 9;
-function jt({
-  zones: e,
-  selectedZoneId: i,
-  onSelectZone: r,
-  onZonePointsChange: u,
-  onZoneComplete: f,
-  drawingKind: s,
-  backdrop: l,
-  transparent: a = !1
-}) {
-  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 (!S) return;
-    const o = e.find((v) => v.id === S.zoneId);
-    if (!o) {
-      y(null);
-      return;
-    }
-    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 p.observe(o), () => p.disconnect();
-  }, [a]);
-  const h = s !== null;
-  X(() => {
-    !h && b !== null && k(null);
-  }, [h, b]);
-  const Y = T(
-    (o) => {
-      if (!h) {
-        r(null);
-        return;
-      }
-      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) {
-        $([x]);
-        return;
-      }
-      if (E && d.length === 1) {
-        const P = [...d, x], q = {
-          id: crypto.randomUUID(),
-          name: "Tripwire",
-          kind: "tripwire",
-          color: "#f59e0b",
-          points: P
-        };
-        f(q), $([]);
-        return;
-      }
-      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
-          };
-          f(K), $([]);
-          return;
-        }
-      }
-      $((P) => [...P, x]);
-    },
-    [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
-      };
-      f(p), $([]);
-    },
-    [h, s, d, f]
-  ), _ = se(null), w = se(null);
-  X(() => () => {
-    _.current !== null && cancelAnimationFrame(_.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);
-      }));
-    },
-    [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 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__ */ c(
-    "div",
-    {
-      ref: g,
-      className: a ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
-      style: { cursor: h ? "crosshair" : "default" },
-      children: [
-        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: l
-          }
-        ) : null,
-        /* @__PURE__ */ c(
-          Je,
-          {
-            width: n.w,
-            height: n.h,
-            onClick: Y,
-            onDblClick: m,
-            onMouseMove: N,
-            children: [
-              /* @__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(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: (C) => {
-                      C.cancelBubble = !0, h || r(o.id);
-                    },
-                    children: [
-                      /* @__PURE__ */ c(
-                        ie,
-                        {
-                          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: q ? () => {
-                            L(o.id);
-                          } : void 0,
-                          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: (C) => {
-                            if (!q) return;
-                            const D = C.target.getStage();
-                            D && (D.container().style.cursor = "move");
-                          },
-                          onMouseLeave: (C) => {
-                            if (!q) return;
-                            const D = C.target.getStage();
-                            D && (D.container().style.cursor = h ? "crosshair" : "default");
-                          },
-                          children: [
-                            P ? /* @__PURE__ */ t(
-                              et,
-                              {
-                                points: E,
-                                stroke: v,
-                                strokeWidth: p ? 3 : 2,
-                                fill: v,
-                                pointerLength: 10,
-                                pointerWidth: 8,
-                                opacity: p ? 1 : 0.8
-                              }
-                            ) : /* @__PURE__ */ t(
-                              V,
-                              {
-                                points: E,
-                                closed: !0,
-                                fill: v + (p ? Ot : Tt),
-                                stroke: v,
-                                strokeWidth: p ? 2.5 : 1.5,
-                                opacity: p ? 1 : 0.85
-                              }
-                            ),
-                            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(
-                                tt,
-                                {
-                                  x: W.x - I / 2,
-                                  y: W.y - 7,
-                                  width: I,
-                                  align: "center",
-                                  text: o.name,
-                                  fontSize: 12,
-                                  fill: v,
-                                  stroke: "#000000",
-                                  strokeWidth: 3,
-                                  fillAfterStrokeEnabled: !0,
-                                  fontStyle: "bold",
-                                  listening: !1
-                                }
-                              );
-                            })()
-                          ]
-                        }
-                      ),
-                      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(
-                          le,
-                          {
-                            x: j.x,
-                            y: j.y,
-                            radius: 5,
-                            fill: v,
-                            stroke: "#ffffff",
-                            strokeWidth: 1.5,
-                            draggable: !0,
-                            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: (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: (I) => {
-                              if (I.evt.preventDefault(), I.cancelBubble = !0, !W) return;
-                              const A = o.points.filter((M, R) => R !== D);
-                              u(o.id, A);
-                            }
-                          },
-                          `pt-${D}`
-                        );
-                      }),
-                      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(
-                          le,
-                          {
-                            x: I.x,
-                            y: I.y,
-                            radius: 4,
-                            fill: "#ffffff",
-                            stroke: v,
-                            strokeWidth: 1.5,
-                            opacity: 0.6,
-                            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: (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: (A) => {
-                              A.cancelBubble = !0;
-                              const M = D + 1, R = [
-                                ...o.points.slice(0, M),
-                                { x: U, y: W },
-                                ...o.points.slice(M)
-                              ];
-                              u(o.id, R);
-                            }
-                          },
-                          `mid-${D}`
-                        );
-                      })
-                    ]
-                  },
-                  o.id
-                );
-              }) }),
-              /* @__PURE__ */ t(ae, { listening: !1, children: h && d.length > 0 && /* @__PURE__ */ c(ie, { children: [
-                d.length >= 2 && s !== "tripwire" && /* @__PURE__ */ t(
-                  V,
-                  {
-                    points: ke(d, n.w, n.h),
-                    stroke: "#6366f1",
-                    strokeWidth: 1.5,
-                    dash: [6, 3],
-                    opacity: 0.8
-                  }
-                ),
-                d.length === 1 && s === "tripwire" && b && /* @__PURE__ */ t(
-                  V,
-                  {
-                    points: [
-                      d[0].x * n.w,
-                      d[0].y * n.h,
-                      b.x,
-                      b.y
-                    ],
-                    stroke: "#f59e0b",
-                    strokeWidth: 1.5,
-                    dash: [6, 3],
-                    opacity: 0.7
-                  }
-                ),
-                b && d.length >= 1 && s !== "tripwire" && /* @__PURE__ */ t(
-                  V,
-                  {
-                    points: [
-                      d[d.length - 1].x * n.w,
-                      d[d.length - 1].y * n.h,
-                      b.x,
-                      b.y
-                    ],
-                    stroke: "#6366f1",
-                    strokeWidth: 1,
-                    dash: [4, 4],
-                    opacity: 0.5
-                  }
-                ),
-                d.map((o, p) => {
-                  const v = z(o, n.w, n.h), x = p === 0;
-                  return /* @__PURE__ */ t(
-                    le,
-                    {
-                      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
-                    },
-                    p
-                  );
-                })
-              ] }) })
-            ]
-          }
-        ),
-        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 Wt = Se(jt), Bt = "#3b82f6", de = [
+const ct = "#3b82f6", dt = ["polygon", "line"], q = [
   "#3b82f6",
   "#10b981",
   "#f59e0b",
@@ -1176,22 +868,22 @@ const Wt = Se(jt), Bt = "#3b82f6", de = [
   "#8b5cf6",
   "#14b8a6"
 ];
-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 ut(e) {
+  const o = new Set(e.map((n) => (n.color ?? "").toLowerCase()));
+  for (const n of q)
+    if (!o.has(n.toLowerCase())) return n;
+  return q[e.length % q.length];
 }
-function Ut(e) {
+function pt(e) {
   return {
     id: e.id,
     name: e.name,
     kind: e.kind,
-    color: e.color || Bt,
+    color: e.color || ct,
     points: [...e.polygon]
   };
 }
-function Ce(e) {
+function X(e) {
   return {
     id: e.id,
     name: e.name,
@@ -1200,84 +892,101 @@ function Ce(e) {
     color: e.color
   };
 }
-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 k = { ...b, color: qt(n) };
+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: it(u.kind),
+        color: ut(l),
+        points: [...u.points]
+      };
       try {
-        await r?.zones?.addZone({ zone: Ce(k) });
-      } catch (Z) {
-        console.error("zones.addZone failed", Z);
+        await n?.zones?.addZone({ zone: X(y) });
+      } catch (_) {
+        console.error("zones.addZone failed", _);
       }
-      s?.setSelectedZoneId(k.id), s?.setDrawingKind(null);
+      s?.setSelectedZoneId(y.id), s?.setDrawingKind(null);
     },
-    [r, n, s]
-  ), d = T(
-    async (b, k) => {
-      if (g && g.id === b) {
-        s?.updateDraft({ points: k });
+    [n, l, s]
+  ), N = w(
+    async (u, y) => {
+      const _ = y.map((g) => ({ x: g.x, y: g.y }));
+      if (h && h.id === u) {
+        s?.updateDraft({ points: _ });
         return;
       }
-      const Z = n.find((L) => L.id === b);
-      if (Z)
+      const p = l.find((g) => g.id === u);
+      if (p)
         try {
-          await r?.zones?.updateZone({ zone: Ce({ ...Z, points: k }) });
-        } catch (L) {
-          console.error("zones.updateZone failed", L);
+          await n?.zones?.updateZone({ zone: X({ ...p, points: _ }) });
+        } catch (g) {
+          console.error("zones.updateZone failed", g);
         }
     },
-    [r, n, g, s]
-  ), $ = T(
-    (b) => {
-      if (b === null) {
+    [n, l, h, s]
+  ), D = w(
+    (u, y) => {
+      typeof u == "string" && (y.kind !== "polygon" && y.kind !== "line" || N(u, y.points));
+    },
+    [N]
+  ), S = w(
+    (u) => {
+      if (u === null) {
         s?.discardDraft(), s?.setSelectedZoneId(null);
         return;
       }
-      const k = n.find((Z) => Z.id === b);
-      if (!k) {
-        s?.setSelectedZoneId(b);
+      if (typeof u != "string") return;
+      const y = l.find((_) => _.id === u);
+      if (!y) {
+        s?.setSelectedZoneId(u);
         return;
       }
       s?.enterDraft({
-        id: k.id,
-        kind: k.kind,
-        name: k.name,
-        color: k.color,
-        points: k.points
+        id: y.id,
+        kind: y.kind,
+        name: y.name,
+        color: y.color,
+        points: y.points
       });
     },
-    [n, s]
+    [l, s]
   );
-  return n.length === 0 && l === null ? null : /* @__PURE__ */ t(
-    Wt,
+  return l.length === 0 && a === null ? null : /* @__PURE__ */ t(
+    ce,
     {
-      zones: n,
-      selectedZoneId: a,
-      onSelectZone: $,
-      onZonePointsChange: d,
-      onZoneComplete: F,
-      drawingKind: l,
-      transparent: !0
+      transparent: !0,
+      items: v,
+      supportedShapes: dt,
+      selectedId: r,
+      onSelect: S,
+      onShapeChange: D,
+      onDrawComplete: (u) => {
+        C(u);
+      },
+      drawingKind: a === null ? null : lt(a)
     }
   );
 }
-const Vt = Se(Ht), Gt = "#3b82f6";
-function Yt(e) {
+const ft = ye(mt), ht = "#3b82f6";
+function gt(e) {
   return {
     id: e.id,
     name: e.name,
     kind: e.kind,
-    color: e.color || Gt,
+    color: e.color || ht,
     points: [...e.polygon]
   };
 }
-function zt(e) {
+function bt(e) {
   return {
     id: e.id,
     name: e.name,
@@ -1286,127 +995,127 @@ function zt(e) {
     color: e.color
   };
 }
-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(
+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(Vt, { deviceId: e })
+      node: /* @__PURE__ */ t(ft, { deviceId: e })
     }),
     [e]
   );
-  He(F);
-  const d = T(
-    (y) => {
-      if (y === null) {
-        l?.discardDraft(), l?.setSelectedZoneId(null);
+  de(v);
+  const C = w(
+    (p) => {
+      if (p === null) {
+        a?.discardDraft(), a?.setSelectedZoneId(null);
         return;
       }
-      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
+      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
       });
     },
-    [s, l]
-  ), $ = T(async () => {
-    const y = l?.editingDraft;
-    if (y) {
+    [s, a]
+  ), N = w(async () => {
+    const p = a?.editingDraft;
+    if (p) {
       try {
-        await r?.zones?.updateZone({
-          zone: zt({
-            id: y.id,
-            kind: y.kind,
-            name: y.name,
-            color: y.color,
-            points: [...y.points]
+        await n?.zones?.updateZone({
+          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);
       }
-      l?.discardDraft(), l?.setSelectedZoneId(null);
+      a?.discardDraft(), a?.setSelectedZoneId(null);
     }
-  }, [r, l]), b = T(() => {
-    l?.discardDraft(), l?.setSelectedZoneId(null);
-  }, [l]), k = T(
-    async (y) => {
+  }, [n, a]), D = w(() => {
+    a?.discardDraft(), a?.setSelectedZoneId(null);
+  }, [a]), S = w(
+    async (p) => {
       try {
-        await r?.zones?.removeZone({ zoneId: y });
-      } catch (h) {
-        console.error("zones.removeZone failed", h);
+        await n?.zones?.removeZone({ zoneId: p });
+      } catch (g) {
+        console.error("zones.removeZone failed", g);
       }
-      l?.selectedZoneId === y && l.setSelectedZoneId(null), l?.editingDraft?.id === y && l.discardDraft();
+      a?.selectedZoneId === p && a.setSelectedZoneId(null), a?.editingDraft?.id === p && a.discardDraft();
     },
-    [r, l]
-  ), Z = T(
-    (y) => {
-      l?.startDrawing(y);
+    [n, a]
+  ), u = w(
+    (p) => {
+      a?.startDrawing(p);
     },
-    [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]
-  }, [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: [
+    [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]
+  }, [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: 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" }),
           " 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__ */ c("div", { className: `${Xe} flex flex-col gap-3`, children: [
+      /* @__PURE__ */ i("div", { className: `${he} flex flex-col gap-3`, children: [
         /* @__PURE__ */ t(
-          Zt,
+          et,
           {
             zones: s,
-            selectedZoneId: g,
-            drawingKind: a,
-            onSelectZone: d,
-            onDeleteZone: k,
-            onStartDraw: Z,
-            onCancelDraw: L
+            selectedZoneId: h,
+            drawingKind: r,
+            onSelectZone: C,
+            onDeleteZone: S,
+            onStartDraw: u,
+            onCancelDraw: y
           }
         ),
-        S && /* @__PURE__ */ c(De, { children: [
+        _ && /* @__PURE__ */ i(J, { children: [
           /* @__PURE__ */ t("div", { className: "border-t border-border" }),
           /* @__PURE__ */ t(
-            Ft,
+            nt,
             {
-              zone: S,
-              onSave: $,
-              onDiscard: b,
-              onDelete: () => k(S.id)
+              zone: _,
+              onSave: N,
+              onDiscard: D,
+              onDelete: () => S(_.id)
             }
           )
         ] })
       ] })
     ] }),
-    /* @__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 })
+    /* @__PURE__ */ i("div", { className: `grid grid-cols-1 2xl:grid-cols-2 ${ge}`, children: [
+      /* @__PURE__ */ t(G, { dev: n, stage: "motion", zones: f }),
+      /* @__PURE__ */ t(G, { dev: n, stage: "detection", zones: f })
     ] })
   ] });
 }
-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 });
+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 ln = {
-  "pipeline-quick-stats": Mt,
-  "zone-editor": Kt
+const Ct = {
+  "pipeline-quick-stats": We,
+  "zone-editor": xt
 };
 export {
-  ln as default
+  Ct as default
 };