@camstack/addon-pipeline 0.1.19 → 0.2.0

package/dist/stream-broker/_stub.js

@@ -1,752 +1,1836 @@
-import { _ as e, a as r, b as B } from "./__mfe_internal__addon_stream_broker_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.mjs-gBEZsQrp.mjs";
-import { _ as z, a as G } from "./__mfe_internal__addon_stream_broker_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.mjs-U1EUeEPs.mjs";
-import { a as R, b as S, c as k, d as y, e as I } from "./__mfe_internal__addon_stream_broker_widgets__loadShare__react__loadShare__.mjs-BsB2G7oY.mjs";
-import { _ as E, a as Q, b as W, c as X, d as T, e as Z, f as V, g as J, h as Y } from "./__mfe_internal__addon_stream_broker_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.mjs-BAv_5ISf.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 ee = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), te = (s) => s.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (n, o, i) => i ? i.toUpperCase() : o.toLowerCase()
-), A = (s) => {
-  const n = te(s);
-  return n.charAt(0).toUpperCase() + n.slice(1);
-}, L = (...s) => s.filter((n, o, i) => !!n && n.trim() !== "" && i.indexOf(n) === o).join(" ").trim(), se = (s) => {
-  for (const n in s)
-    if (n.startsWith("aria-") || n === "role" || n === "title")
-      return !0;
-};
-/**
- * @license lucide-react v0.511.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var re = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-/**
- * @license lucide-react v0.511.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const ne = R(
-  ({
-    color: s = "currentColor",
-    size: n = 24,
-    strokeWidth: o = 2,
-    absoluteStrokeWidth: i,
-    className: c = "",
-    children: t,
-    iconNode: l,
-    ...d
-  }, u) => S(
-    "svg",
-    {
-      ref: u,
-      ...re,
-      width: n,
-      height: n,
-      stroke: s,
-      strokeWidth: i ? Number(o) * 24 / Number(n) : o,
-      className: L("lucide", c),
-      ...!t && !se(d) && { "aria-hidden": "true" },
-      ...d
-    },
-    [
-      ...l.map(([a, m]) => S(a, m)),
-      ...Array.isArray(t) ? t : [t]
-    ]
-  )
-);
-/**
- * @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 _ = (s, n) => {
-  const o = R(
-    ({ className: i, ...c }, t) => S(ne, {
-      ref: t,
-      iconNode: n,
-      className: L(
-        `lucide-${ee(A(s))}`,
-        `lucide-${s}`,
-        i
-      ),
-      ...c
-    })
-  );
-  return o.displayName = A(s), o;
+import { a as e, i as t, n, o as r, r as i, t as a } from "./_virtual_mf___mfe_internal__addon_stream_broker_widgets__loadShare__react__loadShare__.js-C9j-2lBe.mjs";
+import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m, u as h } from "./_virtual_mf___mfe_internal__addon_stream_broker_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.js-C9WX5HNw.mjs";
+import { n as g, r as _, t as v } from "./_virtual_mf___mfe_internal__addon_stream_broker_widgets__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.js-XO0-Pyu6.mjs";
+import { n as y, t as b } from "./_virtual_mf___mfe_internal__addon_stream_broker_widgets__loadShare___mf_0_tanstack_mf_1_react_mf_2_query__loadShare__.js-BO7TIbJV.mjs";
+import { t as x } from "./_virtual_mf___mfe_internal__addon_stream_broker_widgets__loadShare___mf_0_camstack_mf_1_types__loadShare__.js-Tf-HACFd.mjs";
+//#region ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
+var S = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), C = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), w = (e) => {
+	let t = C(e);
+	return t.charAt(0).toUpperCase() + t.slice(1);
+}, T = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), E = (e) => {
+	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
+}, D = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, O = n(({ color: e = "currentColor", size: t = 24, strokeWidth: n = 2, absoluteStrokeWidth: r, className: i = "", children: o, iconNode: s, ...c }, l) => a("svg", {
+	ref: l,
+	...D,
+	width: t,
+	height: t,
+	stroke: e,
+	strokeWidth: r ? Number(n) * 24 / Number(t) : n,
+	className: T("lucide", i),
+	...!o && !E(c) && { "aria-hidden": "true" },
+	...c
+}, [...s.map(([e, t]) => a(e, t)), ...Array.isArray(o) ? o : [o]])), k = (e, t) => {
+	let r = n(({ className: n, ...r }, i) => a(O, {
+		ref: i,
+		iconNode: t,
+		className: T(`lucide-${S(w(e))}`, `lucide-${e}`, n),
+		...r
+	}));
+	return r.displayName = w(e), r;
+}, A = k("chevron-down", [["path", {
+	d: "m6 9 6 6 6-6",
+	key: "qrunsl"
+}]]), j = k("chevron-right", [["path", {
+	d: "m9 18 6-6-6-6",
+	key: "mthhwq"
+}]]), ee = k("plus", [["path", {
+	d: "M5 12h14",
+	key: "1ays0h"
+}], ["path", {
+	d: "M12 5v14",
+	key: "s699le"
+}]]), te = k("radio", [
+	["path", {
+		d: "M4.9 19.1C1 15.2 1 8.8 4.9 4.9",
+		key: "1vaf9d"
+	}],
+	["path", {
+		d: "M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5",
+		key: "u1ii0m"
+	}],
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "2",
+		key: "1c9p78"
+	}],
+	["path", {
+		d: "M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5",
+		key: "1j5fej"
+	}],
+	["path", {
+		d: "M19.1 4.9C23 8.8 23 15.1 19.1 19",
+		key: "10b0cb"
+	}]
+]), ne = k("x", [["path", {
+	d: "M18 6 6 18",
+	key: "1bl5f8"
+}], ["path", {
+	d: "m6 6 12 12",
+	key: "d8bk6v"
+}]]);
+//#endregion
+//#region src/stream-broker/widgets/GeometryBuilder.tsx
+function re(e) {
+	let t = [];
+	if (e.crop && t.push(`crop=${e.crop.w}:${e.crop.h}:${e.crop.x}:${e.crop.y}`), e.targetAspect && e.width !== void 0 && e.height !== void 0) {
+		let n = e.targetAspect.replace(":", "/");
+		e.mode === "pad" ? (t.push(`scale=${e.width}:${e.height}:force_original_aspect_ratio=decrease`), t.push(`pad=${e.width}:${e.height}:(ow-iw)/2:(oh-ih)/2`)) : (t.push(`scale=${e.width}:${e.height}:force_original_aspect_ratio=increase`), t.push(`crop=${e.width}:${e.height}`)), t.push(`setdar=${n}`);
+	}
+	return e.rotate === 90 ? t.push("transpose=1") : e.rotate === 270 ? t.push("transpose=2") : e.rotate === 180 && t.push("hflip", "vflip"), e.hflip && e.rotate !== 180 && t.push("hflip"), e.vflip && e.rotate !== 180 && t.push("vflip"), t.join(",");
+}
+function ie(e, t) {
+	let n = [];
+	for (let t = 0; t < e.length; t++) {
+		if (e[t] === "-vf") {
+			t++;
+			continue;
+		}
+		let r = e[t];
+		r !== void 0 && n.push(r);
+	}
+	return t.length > 0 && n.push("-vf", t), n;
+}
+var M = "text-[11px] uppercase tracking-wider text-foreground-subtle font-medium";
+function ae({ outputArgs: e, onChange: t }) {
+	let [n, i] = r(""), [a, o] = r("pad"), [s, c] = r("1920"), [l, u] = r("1080"), [d, f] = r(!1), [p, m] = r("0"), [h, y] = r("0"), [b, x] = r("0"), [S, C] = r("0"), [w, T] = r(0), [E, D] = r(!1), [O, k] = r(!1), A = re((() => {
+		let e = {
+			rotate: w,
+			hflip: E,
+			vflip: O
+		};
+		return n !== "" && (e.targetAspect = n, e.mode = a, e.width = Number(s), e.height = Number(l)), d && (e.crop = {
+			x: Number(p),
+			y: Number(h),
+			w: Number(b),
+			h: Number(S)
+		}), e;
+	})());
+	return /* @__PURE__ */ _("div", {
+		className: "space-y-2 rounded border border-border/50 bg-surface-2/30 px-3 py-2",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ _("span", {
+					className: M,
+					children: ["Geometry / zoom", /* @__PURE__ */ g("span", {
+						className: "ml-2 text-[10px] normal-case text-foreground-subtle italic",
+						children: "composes a single -vf into output args"
+					})]
+				}), /* @__PURE__ */ g("button", {
+					type: "button",
+					onClick: () => t(ie(e, A)),
+					className: "rounded-md border border-border bg-surface-hover px-2 py-0.5 text-[10px] font-medium text-foreground hover:bg-surface-hover/70 transition-colors",
+					children: "Apply geometry"
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ g("label", {
+						className: M,
+						htmlFor: "geom-aspect",
+						children: "Aspect"
+					}),
+					/* @__PURE__ */ _("select", {
+						id: "geom-aspect",
+						value: n,
+						onChange: (e) => i(e.target.value),
+						className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed appearance-none pr-6 min-w-[90px]",
+						children: [
+							/* @__PURE__ */ g("option", {
+								value: "",
+								children: "none"
+							}),
+							/* @__PURE__ */ g("option", {
+								value: "16:9",
+								children: "16:9"
+							}),
+							/* @__PURE__ */ g("option", {
+								value: "4:3",
+								children: "4:3"
+							}),
+							/* @__PURE__ */ g("option", {
+								value: "1:1",
+								children: "1:1"
+							})
+						]
+					}),
+					n !== "" && /* @__PURE__ */ _(v, { children: [
+						/* @__PURE__ */ _("select", {
+							"aria-label": "Aspect mode",
+							value: a,
+							onChange: (e) => o(e.target.value),
+							className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed appearance-none pr-6 min-w-[80px]",
+							children: [/* @__PURE__ */ g("option", {
+								value: "pad",
+								children: "pad"
+							}), /* @__PURE__ */ g("option", {
+								value: "crop",
+								children: "crop"
+							})]
+						}),
+						/* @__PURE__ */ g("input", {
+							type: "number",
+							"aria-label": "Aspect width",
+							value: s,
+							onChange: (e) => c(e.target.value),
+							className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed w-20 text-right"
+						}),
+						/* @__PURE__ */ g("span", {
+							className: "text-[11px] text-foreground-subtle",
+							children: "×"
+						}),
+						/* @__PURE__ */ g("input", {
+							type: "number",
+							"aria-label": "Aspect height",
+							value: l,
+							onChange: (e) => u(e.target.value),
+							className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed w-20 text-right"
+						})
+					] })
+				]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ _("label", {
+					className: "text-[11px] uppercase tracking-wider text-foreground-subtle font-medium inline-flex items-center gap-1",
+					children: [/* @__PURE__ */ g("input", {
+						type: "checkbox",
+						checked: d,
+						onChange: (e) => f(e.target.checked)
+					}), "Crop / zoom"]
+				}), d && /* @__PURE__ */ _(v, { children: [
+					/* @__PURE__ */ g("input", {
+						type: "number",
+						"aria-label": "Crop x",
+						value: p,
+						onChange: (e) => m(e.target.value),
+						className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed w-16 text-right",
+						placeholder: "x"
+					}),
+					/* @__PURE__ */ g("input", {
+						type: "number",
+						"aria-label": "Crop y",
+						value: h,
+						onChange: (e) => y(e.target.value),
+						className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed w-16 text-right",
+						placeholder: "y"
+					}),
+					/* @__PURE__ */ g("input", {
+						type: "number",
+						"aria-label": "Crop width",
+						value: b,
+						onChange: (e) => x(e.target.value),
+						className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed w-20 text-right",
+						placeholder: "w"
+					}),
+					/* @__PURE__ */ g("input", {
+						type: "number",
+						"aria-label": "Crop height",
+						value: S,
+						onChange: (e) => C(e.target.value),
+						className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed w-20 text-right",
+						placeholder: "h"
+					})
+				] })]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ g("label", {
+						className: M,
+						htmlFor: "geom-rotate",
+						children: "Rotate"
+					}),
+					/* @__PURE__ */ _("select", {
+						id: "geom-rotate",
+						value: String(w),
+						onChange: (e) => T(Number(e.target.value)),
+						className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed appearance-none pr-6 min-w-[80px]",
+						children: [
+							/* @__PURE__ */ g("option", {
+								value: "0",
+								children: "0°"
+							}),
+							/* @__PURE__ */ g("option", {
+								value: "90",
+								children: "90°"
+							}),
+							/* @__PURE__ */ g("option", {
+								value: "180",
+								children: "180°"
+							}),
+							/* @__PURE__ */ g("option", {
+								value: "270",
+								children: "270°"
+							})
+						]
+					}),
+					/* @__PURE__ */ _("label", {
+						className: "text-[11px] uppercase tracking-wider text-foreground-subtle font-medium inline-flex items-center gap-1",
+						children: [/* @__PURE__ */ g("input", {
+							type: "checkbox",
+							checked: E,
+							onChange: (e) => D(e.target.checked)
+						}), "hflip"]
+					}),
+					/* @__PURE__ */ _("label", {
+						className: "text-[11px] uppercase tracking-wider text-foreground-subtle font-medium inline-flex items-center gap-1",
+						children: [/* @__PURE__ */ g("input", {
+							type: "checkbox",
+							checked: O,
+							onChange: (e) => k(e.target.checked)
+						}), "vflip"]
+					})
+				]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "font-mono text-[10px] text-foreground-subtle break-all",
+				children: ["-vf ", A.length > 0 ? A : /* @__PURE__ */ g("span", {
+					className: "italic",
+					children: "(empty)"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/stream-broker/widgets/FfmpegParamsField.tsx
+var N = [
+	{
+		group: "Demuxer",
+		label: "-thread_queue_size 1024",
+		args: ["-thread_queue_size", "1024"],
+		description: "Larger input packet queue (helps with high-bitrate sources)"
+	},
+	{
+		group: "Demuxer",
+		label: "-fflags +genpts",
+		args: ["-fflags", "+genpts"],
+		description: "Generate PTS when the source lacks them"
+	},
+	{
+		group: "Demuxer",
+		label: "-re",
+		args: ["-re"],
+		description: "Read input at native frame rate (file replay)"
+	},
+	{
+		group: "Demuxer",
+		label: "-probesize 32",
+		args: ["-probesize", "32"],
+		description: "Minimal probe size — faster start"
+	},
+	{
+		group: "Demuxer",
+		label: "-analyzeduration 0",
+		args: ["-analyzeduration", "0"],
+		description: "Skip stream analysis — faster start"
+	},
+	{
+		group: "RTSP",
+		label: "-rtsp_transport tcp",
+		args: ["-rtsp_transport", "tcp"],
+		description: "Force TCP transport for RTSP source"
+	},
+	{
+		group: "RTSP",
+		label: "-stimeout 5000000",
+		args: ["-stimeout", "5000000"],
+		description: "Socket I/O timeout (microseconds, 5s)"
+	}
+], oe = [
+	{
+		group: "Muxer",
+		label: "-flush_packets 1",
+		args: ["-flush_packets", "1"],
+		description: "Flush each packet immediately"
+	},
+	{
+		group: "Muxer",
+		label: "-movflags +faststart",
+		args: ["-movflags", "+faststart"],
+		description: "Move MOOV atom to front (MP4)"
+	},
+	{
+		group: "Bitstream",
+		label: "-bsf:v h264_mp4toannexb",
+		args: ["-bsf:v", "h264_mp4toannexb"],
+		description: "Convert MP4-format H.264 to Annex-B"
+	},
+	{
+		group: "Bitstream",
+		label: "-bsf:v hevc_mp4toannexb",
+		args: ["-bsf:v", "hevc_mp4toannexb"],
+		description: "Convert MP4-format HEVC to Annex-B"
+	},
+	{
+		group: "x264",
+		label: "-x264-params keyint_min=15",
+		args: ["-x264-params", "keyint_min=15"],
+		description: "Force minimum keyframe interval to 15 frames"
+	},
+	{
+		group: "x264",
+		label: "-x264-params scenecut=0",
+		args: ["-x264-params", "scenecut=0"],
+		description: "Disable scene-change keyframes (predictable GOP)"
+	},
+	{
+		group: "x264",
+		label: "-x264-params nal-hrd=cbr",
+		args: ["-x264-params", "nal-hrd=cbr"],
+		description: "Force CBR HRD signalling (HomeKit-friendly)"
+	},
+	{
+		group: "x264",
+		label: "-aq-mode 3",
+		args: ["-aq-mode", "3"],
+		description: "Auto-variance adaptive quantisation (mode 3)"
+	},
+	{
+		group: "x265",
+		label: "-x265-params keyint=30",
+		args: ["-x265-params", "keyint=30"],
+		description: "Force maximum keyframe interval to 30 frames"
+	},
+	{
+		group: "x265",
+		label: "-x265-params no-scenecut=1",
+		args: ["-x265-params", "no-scenecut=1"],
+		description: "Disable scene-change keyframes"
+	},
+	{
+		group: "Global",
+		label: "-fps_mode passthrough",
+		args: ["-fps_mode", "passthrough"],
+		description: "Preserve source framerate exactly"
+	},
+	{
+		group: "Global",
+		label: "-copyts",
+		args: ["-copyts"],
+		description: "Preserve source timestamps"
+	}
+], se = {
+	video: { codec: "copy" },
+	audio: "passthrough"
+}, P = "w-full rounded border border-border bg-surface-2 px-2 py-1.5 text-[11px] font-mono text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 read-only:opacity-60 min-h-[60px] resize-y", F = "flex items-center justify-between gap-3 py-1.5", I = "text-[11px] uppercase tracking-wider text-foreground-subtle font-medium", L = "rounded-lg border border-border bg-surface overflow-hidden", R = "border-b border-border px-3 py-1.5 flex items-center justify-between bg-surface-hover/30", z = "text-[11px] font-semibold text-foreground uppercase tracking-wider";
+function ce({ config: t, value: n, onSave: i }) {
+	let [a, o] = r(!1), s = n ?? se, [c, l] = r(() => (s.inputArgs ?? []).join("\n")), [u, d] = r(() => (s.outputArgs ?? []).join("\n")), f = e(s);
+	f.current !== s && (f.current = s, l((s.inputArgs ?? []).join("\n")), d((s.outputArgs ?? []).join("\n")));
+	let p = (e) => {
+		i(e(s));
+	}, m = (e) => p((t) => ({
+		...t,
+		video: {
+			...t.video,
+			codec: e
+		}
+	})), h = (e) => p((t) => ({
+		...t,
+		video: {
+			...t.video,
+			width: e
+		}
+	})), y = (e) => p((t) => ({
+		...t,
+		video: {
+			...t.video,
+			height: e
+		}
+	})), b = (e) => p((t) => ({
+		...t,
+		video: {
+			...t.video,
+			fps: e
+		}
+	})), x = (e) => p((t) => ({
+		...t,
+		video: {
+			...t.video,
+			bitrateKbps: e
+		}
+	})), S = () => p((e) => ({
+		...e,
+		audio: "passthrough"
+	})), C = (e) => p((t) => ({
+		...t,
+		audio: typeof t.audio == "object" ? {
+			...t.audio,
+			codec: e
+		} : { codec: e }
+	})), w = (e) => p((t) => ({
+		...t,
+		audio: typeof t.audio == "object" ? {
+			...t.audio,
+			bitrateKbps: e
+		} : {
+			codec: "opus",
+			bitrateKbps: e
+		}
+	})), T = (e) => p((t) => ({
+		...t,
+		inputArgs: e.split("\n").map((e) => e.trim()).filter((e) => e.length > 0)
+	})), E = (e) => p((t) => ({
+		...t,
+		outputArgs: e.split("\n").map((e) => e.trim()).filter((e) => e.length > 0)
+	})), D = (e, t) => {
+		let n = t.args.join(" ");
+		if (e === "input") {
+			let e = c.length === 0 ? n : `${c}\n${n}`;
+			l(e), T(e);
+		} else {
+			let e = u.length === 0 ? n : `${u}\n${n}`;
+			d(e), E(e);
+		}
+	};
+	return /* @__PURE__ */ _("div", {
+		className: "space-y-3",
+		children: [
+			t.sourceParams !== void 0 && /* @__PURE__ */ _("div", {
+				className: L,
+				children: [/* @__PURE__ */ _("div", {
+					className: R,
+					children: [/* @__PURE__ */ g("h3", {
+						className: z,
+						children: "Source (probed)"
+					}), /* @__PURE__ */ g("span", {
+						className: "text-[10px] text-foreground-subtle italic",
+						children: "From the publisher"
+					})]
+				}), /* @__PURE__ */ g("div", {
+					className: "px-3 py-2 flex flex-wrap gap-1.5",
+					children: /* @__PURE__ */ g(le, { profile: t.sourceParams })
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "@container",
+				children: /* @__PURE__ */ _("div", {
+					className: "grid grid-cols-1 @[480px]:grid-cols-2 gap-3",
+					children: [/* @__PURE__ */ _("div", {
+						className: L,
+						children: [/* @__PURE__ */ g("div", {
+							className: R,
+							children: /* @__PURE__ */ g("h3", {
+								className: z,
+								children: "Video"
+							})
+						}), /* @__PURE__ */ _("div", {
+							className: "px-3 py-2 divide-y divide-border/30",
+							children: [/* @__PURE__ */ _("div", {
+								className: F,
+								children: [/* @__PURE__ */ g("label", {
+									htmlFor: `${t.fieldKey}-video-codec`,
+									className: I,
+									children: "Codec"
+								}), /* @__PURE__ */ _("select", {
+									id: `${t.fieldKey}-video-codec`,
+									value: s.video.codec,
+									onChange: (e) => m(e.target.value),
+									className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed read-only:opacity-60 read-only:cursor-not-allowed appearance-none pr-6 min-w-[120px]",
+									children: [
+										/* @__PURE__ */ g("option", {
+											value: "h264",
+											children: "h264"
+										}),
+										/* @__PURE__ */ g("option", {
+											value: "h265",
+											children: "h265"
+										}),
+										/* @__PURE__ */ g("option", {
+											value: "copy",
+											children: "copy (passthrough)"
+										})
+									]
+								})]
+							}), s.video.codec !== "copy" && /* @__PURE__ */ _(v, { children: [
+								/* @__PURE__ */ _("div", {
+									className: F,
+									children: [/* @__PURE__ */ g("label", {
+										htmlFor: `${t.fieldKey}-video-width`,
+										className: I,
+										children: "Width"
+									}), /* @__PURE__ */ g("input", {
+										id: `${t.fieldKey}-video-width`,
+										type: "number",
+										"aria-label": "Width",
+										value: s.video.width ?? "",
+										onChange: (e) => h(Number(e.target.value)),
+										className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed read-only:opacity-60 read-only:cursor-not-allowed w-24 text-right"
+									})]
+								}),
+								/* @__PURE__ */ _("div", {
+									className: F,
+									children: [/* @__PURE__ */ g("label", {
+										htmlFor: `${t.fieldKey}-video-height`,
+										className: I,
+										children: "Height"
+									}), /* @__PURE__ */ g("input", {
+										id: `${t.fieldKey}-video-height`,
+										type: "number",
+										value: s.video.height ?? "",
+										onChange: (e) => y(Number(e.target.value)),
+										className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed read-only:opacity-60 read-only:cursor-not-allowed w-24 text-right"
+									})]
+								}),
+								/* @__PURE__ */ _("div", {
+									className: F,
+									children: [/* @__PURE__ */ g("label", {
+										htmlFor: `${t.fieldKey}-video-fps`,
+										className: I,
+										children: "FPS"
+									}), /* @__PURE__ */ g("input", {
+										id: `${t.fieldKey}-video-fps`,
+										type: "number",
+										value: s.video.fps ?? "",
+										onChange: (e) => b(Number(e.target.value)),
+										className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed read-only:opacity-60 read-only:cursor-not-allowed w-24 text-right"
+									})]
+								}),
+								/* @__PURE__ */ _("div", {
+									className: F,
+									children: [/* @__PURE__ */ g("label", {
+										htmlFor: `${t.fieldKey}-video-bitrate`,
+										className: I,
+										children: "Bitrate (kbps)"
+									}), /* @__PURE__ */ g("input", {
+										id: `${t.fieldKey}-video-bitrate`,
+										type: "number",
+										value: s.video.bitrateKbps ?? "",
+										onChange: (e) => x(Number(e.target.value)),
+										className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed read-only:opacity-60 read-only:cursor-not-allowed w-24 text-right"
+									})]
+								})
+							] })]
+						})]
+					}), /* @__PURE__ */ _("div", {
+						className: L,
+						children: [/* @__PURE__ */ g("div", {
+							className: R,
+							children: /* @__PURE__ */ g("h3", {
+								className: z,
+								children: "Audio"
+							})
+						}), /* @__PURE__ */ g("div", {
+							className: "px-3 py-2",
+							children: s.audio === "passthrough" ? /* @__PURE__ */ _("div", {
+								className: "flex items-center justify-between gap-3",
+								children: [/* @__PURE__ */ g("span", {
+									className: "text-[11px] text-foreground-subtle italic",
+									children: "Source audio forwarded without re-encode."
+								}), /* @__PURE__ */ g("button", {
+									type: "button",
+									onClick: () => C("opus"),
+									className: "rounded-md border border-border bg-surface-hover px-2 py-1 text-[11px] text-foreground hover:bg-surface-hover/70 transition-colors",
+									children: "Switch to custom encode"
+								})]
+							}) : /* @__PURE__ */ _("div", {
+								className: "divide-y divide-border/30",
+								children: [
+									/* @__PURE__ */ _("div", {
+										className: F,
+										children: [/* @__PURE__ */ g("label", {
+											htmlFor: `${t.fieldKey}-audio-codec`,
+											className: I,
+											children: "Codec"
+										}), /* @__PURE__ */ _("select", {
+											id: `${t.fieldKey}-audio-codec`,
+											value: s.audio.codec,
+											onChange: (e) => C(e.target.value),
+											className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed read-only:opacity-60 read-only:cursor-not-allowed appearance-none pr-6 min-w-[120px]",
+											children: [
+												/* @__PURE__ */ g("option", {
+													value: "opus",
+													children: "opus"
+												}),
+												/* @__PURE__ */ g("option", {
+													value: "aac",
+													children: "aac"
+												}),
+												/* @__PURE__ */ g("option", {
+													value: "pcmu",
+													children: "pcmu"
+												}),
+												/* @__PURE__ */ g("option", {
+													value: "pcma",
+													children: "pcma"
+												}),
+												/* @__PURE__ */ g("option", {
+													value: "copy",
+													children: "copy (passthrough)"
+												})
+											]
+										})]
+									}),
+									/* @__PURE__ */ _("div", {
+										className: F,
+										children: [/* @__PURE__ */ g("label", {
+											htmlFor: `${t.fieldKey}-audio-bitrate`,
+											className: I,
+											children: "Bitrate (kbps)"
+										}), /* @__PURE__ */ g("input", {
+											id: `${t.fieldKey}-audio-bitrate`,
+											type: "number",
+											value: s.audio.bitrateKbps ?? "",
+											onChange: (e) => w(Number(e.target.value)),
+											className: "rounded border border-border bg-surface-2 px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 disabled:cursor-not-allowed read-only:opacity-60 read-only:cursor-not-allowed w-24 text-right"
+										})]
+									}),
+									/* @__PURE__ */ g("div", {
+										className: "pt-2",
+										children: /* @__PURE__ */ g("button", {
+											type: "button",
+											onClick: S,
+											className: "text-[11px] text-foreground-subtle hover:text-foreground underline-offset-2 hover:underline",
+											children: "Switch back to passthrough"
+										})
+									})
+								]
+							})
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ _("div", {
+				className: L,
+				children: [/* @__PURE__ */ _("button", {
+					type: "button",
+					onClick: () => o((e) => !e),
+					className: "w-full px-3 py-1.5 flex items-center justify-between bg-surface-hover/30 hover:bg-surface-hover transition-colors",
+					children: [/* @__PURE__ */ _("span", {
+						className: "inline-flex items-center gap-1.5 text-[11px] font-semibold text-foreground uppercase tracking-wider",
+						children: [g(a ? A : j, { className: "h-3 w-3" }), "Advanced — raw ffmpeg args"]
+					}), /* @__PURE__ */ _("span", {
+						className: "text-[10px] text-foreground-subtle italic",
+						children: [(s.inputArgs?.length ?? 0) + (s.outputArgs?.length ?? 0), " args"]
+					})]
+				}), a && /* @__PURE__ */ _("div", {
+					className: "px-3 py-2 space-y-3 border-t border-border/50",
+					children: [
+						/* @__PURE__ */ _("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ _("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ _("label", {
+									htmlFor: `${t.fieldKey}-input-args`,
+									className: I,
+									children: ["Input args", /* @__PURE__ */ g("span", {
+										className: "ml-2 text-[10px] normal-case text-foreground-subtle italic",
+										children: "one per line · inserted between globals and -i"
+									})]
+								}), /* @__PURE__ */ g(B, {
+									id: `${t.fieldKey}-input-picker`,
+									disabled: !1,
+									catalogue: N,
+									onPick: (e) => D("input", e)
+								})]
+							}), /* @__PURE__ */ g("textarea", {
+								id: `${t.fieldKey}-input-args`,
+								value: c,
+								onChange: (e) => l(e.target.value),
+								onBlur: (e) => T(e.target.value),
+								placeholder: "-thread_queue_size 1024",
+								className: P
+							})]
+						}),
+						/* @__PURE__ */ g(ae, {
+							outputArgs: s.outputArgs ?? [],
+							onChange: (e) => {
+								d(e.join("\n")), E(e.join("\n"));
+							}
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ _("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ _("label", {
+									htmlFor: `${t.fieldKey}-output-args`,
+									className: I,
+									children: ["Output args", /* @__PURE__ */ g("span", {
+										className: "ml-2 text-[10px] normal-case text-foreground-subtle italic",
+										children: "one per line · inserted before the final muxer"
+									})]
+								}), /* @__PURE__ */ g(B, {
+									id: `${t.fieldKey}-output-picker`,
+									disabled: !1,
+									catalogue: oe,
+									onPick: (e) => D("output", e)
+								})]
+							}), /* @__PURE__ */ g("textarea", {
+								id: `${t.fieldKey}-output-args`,
+								value: u,
+								onChange: (e) => d(e.target.value),
+								onBlur: (e) => E(e.target.value),
+								placeholder: "-bsf:v h264_mp4toannexb",
+								className: P
+							})]
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+function le({ profile: e }) {
+	let t = "inline-flex items-center gap-1 rounded-full bg-foreground-subtle/10 border border-border px-2 py-0.5 text-[11px] font-mono text-foreground-subtle", { video: n, audio: r } = e, i = n.width !== void 0 && n.height !== void 0 ? `${n.width}×${n.height}` : void 0;
+	return /* @__PURE__ */ _(v, { children: [
+		/* @__PURE__ */ _("span", {
+			className: t,
+			children: [/* @__PURE__ */ g("span", {
+				className: "opacity-60",
+				children: "codec"
+			}), n.codec]
+		}),
+		i !== void 0 && /* @__PURE__ */ _("span", {
+			className: t,
+			children: [/* @__PURE__ */ g("span", {
+				className: "opacity-60",
+				children: "res"
+			}), i]
+		}),
+		n.fps !== void 0 && /* @__PURE__ */ _("span", {
+			className: t,
+			children: [/* @__PURE__ */ g("span", {
+				className: "opacity-60",
+				children: "fps"
+			}), n.fps]
+		}),
+		n.bitrateKbps !== void 0 && /* @__PURE__ */ _("span", {
+			className: t,
+			children: [
+				/* @__PURE__ */ g("span", {
+					className: "opacity-60",
+					children: "bitrate"
+				}),
+				n.bitrateKbps,
+				"k"
+			]
+		}),
+		r === "passthrough" ? /* @__PURE__ */ _("span", {
+			className: t,
+			children: [/* @__PURE__ */ g("span", {
+				className: "opacity-60",
+				children: "audio"
+			}), "passthrough"]
+		}) : /* @__PURE__ */ _(v, { children: [
+			/* @__PURE__ */ _("span", {
+				className: t,
+				children: [/* @__PURE__ */ g("span", {
+					className: "opacity-60",
+					children: "audio"
+				}), r.codec]
+			}),
+			r.bitrateKbps !== void 0 && /* @__PURE__ */ _("span", {
+				className: t,
+				children: [
+					/* @__PURE__ */ g("span", {
+						className: "opacity-60",
+						children: "a-bitrate"
+					}),
+					r.bitrateKbps,
+					"k"
+				]
+			}),
+			r.sampleRateHz !== void 0 && /* @__PURE__ */ _("span", {
+				className: t,
+				children: [
+					/* @__PURE__ */ g("span", {
+						className: "opacity-60",
+						children: "a-sr"
+					}),
+					r.sampleRateHz,
+					"Hz"
+				]
+			}),
+			r.channels !== void 0 && /* @__PURE__ */ _("span", {
+				className: t,
+				children: [/* @__PURE__ */ g("span", {
+					className: "opacity-60",
+					children: "a-ch"
+				}), r.channels]
+			})
+		] })
+	] });
+}
+function ue(e) {
+	let t = e.config ?? {}, n = m(), [a, o] = r(() => t.initialValue), s = i((r) => {
+		if (o(r), e.deviceId === void 0) return;
+		let i = t.writerCapName, a = t.writerAddonId, s = t.fieldKey;
+		if (i === void 0 || a === void 0 || s === void 0) {
+			console.warn(`[ffmpeg-params] widgetConfig is missing writerCapName/writerAddonId/fieldKey — field ${s ?? "(unknown)"} cannot be saved. Fix the contribution builder.`);
+			return;
+		}
+		n.mutate({
+			deviceId: e.deviceId,
+			writerCapName: i,
+			writerAddonId: a,
+			key: s,
+			value: r ?? null
+		});
+	}, [
+		e.deviceId,
+		t.fieldKey,
+		t.writerCapName,
+		t.writerAddonId,
+		n
+	]);
+	if (e.deviceId === void 0) return /* @__PURE__ */ g("div", {
+		className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning",
+		children: "ffmpeg-params: no deviceId in widget context — this widget only renders inside a device tab."
+	});
+	let c = t.fieldKey;
+	return c === void 0 || c.length === 0 ? /* @__PURE__ */ g("div", {
+		className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning",
+		children: "ffmpeg-params: widgetConfig.fieldKey is required — fix the contribution builder."
+	}) : /* @__PURE__ */ g(ce, {
+		config: {
+			...t,
+			fieldKey: c
+		},
+		value: a,
+		onSave: s
+	});
+}
+function B({ id: e, disabled: n, catalogue: i, onPick: a }) {
+	let [o, s] = r(!1), c = t(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of i) {
+			let n = e.get(t.group) ?? [];
+			n.push(t), e.set(t.group, n);
+		}
+		return e;
+	}, [i]);
+	return /* @__PURE__ */ _("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ _("button", {
+			id: e,
+			type: "button",
+			disabled: n,
+			onClick: () => s((e) => !e),
+			className: "inline-flex items-center gap-1 rounded-md border border-border bg-surface-hover px-2 py-0.5 text-[10px] font-medium text-foreground-subtle hover:bg-surface-hover/70 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+			children: [/* @__PURE__ */ g(ee, { className: "h-3 w-3" }), "Add flag…"]
+		}), o && !n && /* @__PURE__ */ _(v, { children: [/* @__PURE__ */ g("div", {
+			className: "fixed inset-0 z-40",
+			onClick: () => s(!1),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ g("div", {
+			className: "absolute right-0 top-full z-50 mt-1 max-h-72 w-72 overflow-y-auto rounded-lg border border-border bg-surface shadow-lg",
+			role: "menu",
+			children: Array.from(c.entries()).map(([e, t]) => /* @__PURE__ */ _("div", {
+				className: "border-b border-border/30 last:border-b-0",
+				children: [/* @__PURE__ */ g("div", {
+					className: "sticky top-0 bg-surface-hover/80 backdrop-blur px-2 py-1 text-[9px] font-semibold uppercase tracking-wider text-foreground-subtle",
+					children: e
+				}), t.map((e) => /* @__PURE__ */ _("button", {
+					type: "button",
+					onClick: () => {
+						a(e), s(!1);
+					},
+					className: "w-full text-left px-2 py-1.5 hover:bg-surface-hover transition-colors group",
+					children: [/* @__PURE__ */ g("div", {
+						className: "font-mono text-[11px] text-foreground",
+						children: e.label
+					}), e.description !== void 0 && /* @__PURE__ */ g("div", {
+						className: "text-[10px] text-foreground-subtle leading-snug mt-0.5",
+						children: e.description
+					})]
+				}, e.label))]
+			}, e))
+		})] })]
+	});
+}
+//#endregion
+//#region src/stream-broker/widgets/format-ua.ts
+var V = 24;
+function H(e) {
+	return /\bEdg\b|\bEdgA\b|\bEdgiOS\b|Edge\//.test(e) ? "Edge" : /\bOPR\b|Opera/.test(e) ? "Opera" : /Firefox\/|\bFxiOS\b/.test(e) ? "Firefox" : /Chrome\/|\bCriOS\b/.test(e) ? "Chrome" : /Safari\//.test(e) ? "Safari" : null;
+}
+function de(e) {
+	return /iPhone|iPad|iPod|\biOS\b|CriOS|FxiOS/.test(e) ? "iOS" : /Mac OS X|Macintosh/.test(e) ? "macOS" : /Windows/.test(e) ? "Windows" : /Android/.test(e) ? "Android" : /Linux/.test(e) ? "Linux" : null;
+}
+function fe(e) {
+	let t = e.trim();
+	if (t.length === 0) return "";
+	let n = H(t), r = de(t);
+	return n && r ? `${n}/${r}` : n || r || (t.length > V ? `${t.slice(0, V)}…` : t);
+}
+//#endregion
+//#region src/stream-broker/widgets/StreamBrokerPanel.tsx
+function pe(e) {
+	let t = Math.floor(e / 1e3);
+	if (t < 60) return `${t}s`;
+	let n = Math.floor(t / 60);
+	return n < 60 ? `${n}m` : `${Math.floor(n / 60)}h ${n % 60}m`;
+}
+var U = {
+	high: "High",
+	mid: "Mid",
+	low: "Low"
+}, W = [
+	"high",
+	"mid",
+	"low"
+], me = {
+	alexa: "bg-blue-500/15 text-blue-400",
+	homekit: "bg-purple-500/15 text-purple-400",
+	"webrtc-browser": "bg-emerald-500/15 text-emerald-400",
+	"webrtc-mobile": "bg-emerald-500/15 text-emerald-400",
+	"webrtc-whep": "bg-emerald-500/15 text-emerald-400",
+	"rtsp-listen": "bg-warning/15 text-warning",
+	"derived-broker": "bg-amber-500/15 text-amber-400",
+	recording: "bg-rose-500/15 text-rose-400",
+	pipeline: "bg-cyan-500/15 text-cyan-400",
+	snapshot: "bg-cyan-500/15 text-cyan-400",
+	warmup: "bg-foreground-subtle/10 text-foreground-subtle",
+	unknown: "bg-foreground-subtle/10 text-foreground-subtle"
+}, G = {
+	alexa: "ALEXA",
+	homekit: "HOMEKIT",
+	"webrtc-browser": "BROWSER",
+	"webrtc-mobile": "MOBILE",
+	"webrtc-whep": "WHEP",
+	"rtsp-listen": "RTSP",
+	"derived-broker": "DERIVED",
+	recording: "RECORD",
+	pipeline: "PIPELINE",
+	snapshot: "SNAP",
+	warmup: "WARMUP",
+	unknown: "—"
 };
-/**
- * @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 ae = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], O = _("chevron-down", ae);
-/**
- * @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 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], j = _("chevron-right", oe);
-/**
- * @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 ie = [
-  ["path", { d: "M4.9 19.1C1 15.2 1 8.8 4.9 4.9", key: "1vaf9d" }],
-  ["path", { d: "M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5", key: "u1ii0m" }],
-  ["circle", { cx: "12", cy: "12", r: "2", key: "1c9p78" }],
-  ["path", { d: "M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5", key: "1j5fej" }],
-  ["path", { d: "M19.1 4.9C23 8.8 23 15.1 19.1 19", key: "10b0cb" }]
-], ce = _("radio", 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 de = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], le = _("x", de);
-function pe(s) {
-  const n = Math.floor(s / 1e3);
-  if (n < 60) return `${n}s`;
-  const o = Math.floor(n / 60);
-  return o < 60 ? `${o}m` : `${Math.floor(o / 60)}h ${o % 60}m`;
+function he(e) {
+	return G[e] ?? e.toUpperCase().slice(0, 8);
 }
-const F = {
-  high: "High",
-  mid: "Mid",
-  low: "Low"
-}, D = ["high", "mid", "low"];
-function ue(s) {
-  const n = s.config ?? {};
-  return s.deviceId === void 0 ? /* @__PURE__ */ e("div", { className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning", children: "StreamBrokerPanel requires a deviceId" }) : /* @__PURE__ */ e(
-    me,
-    {
-      deviceId: s.deviceId,
-      title: n.title,
-      variant: n.variant,
-      hideEmpty: n.hideEmpty
-    }
-  );
+function ge(e) {
+	return G[e] ?? e;
 }
-function me({
-  deviceId: s,
-  title: n = "Stream Brokers",
-  variant: o = "full",
-  hideEmpty: i = !1
-}) {
-  E(
-    ["streamBroker", "listAllProfileSlots"],
-    [
-      "device.streams-registered",
-      "device.streams-unregistered",
-      "device.registered",
-      "device.unregistered"
-    ]
-  );
-  const { data: c } = Q(
-    void 0,
-    { staleTime: 3e4 }
-  ), t = (c ?? []).filter((p) => p.deviceId === s && p.sourceCamStreamId !== null).slice().sort((p, N) => D.indexOf(p.profile) - D.indexOf(N.profile)), l = W(), d = X(l.trpcClient, s), { data: u } = z({
-    queryKey: ["device", s, "cameraStreams.getCameraStreams"],
-    queryFn: () => d?.cameraStreams?.getCameraStreams({}) ?? [],
-    enabled: !!d,
-    staleTime: 3e4
-  }), a = /* @__PURE__ */ new Map();
-  for (const p of u ?? []) a.set(p.camStreamId, p);
-  const m = new Set(
-    t.map((p) => p.sourceCamStreamId).filter((p) => p !== null)
-  ), f = (u ?? []).filter(
-    (p) => !m.has(p.camStreamId)
-  ), x = t.length > 0, h = f.length > 0;
-  return i && !x && !h ? null : o === "compact" ? x ? /* @__PURE__ */ e("div", { className: "divide-y divide-border/30", children: t.map((p) => /* @__PURE__ */ e(
-    P,
-    {
-      slot: p,
-      camStreams: a,
-      compact: !0
-    },
-    p.brokerId
-  )) }) : /* @__PURE__ */ e("div", { className: "text-[11px] text-foreground-subtle italic px-2 py-1", children: "No active profile slots" }) : /* @__PURE__ */ r("div", { className: "rounded-lg border border-border bg-surface overflow-hidden", children: [
-    /* @__PURE__ */ r("div", { className: "border-b border-border px-4 py-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ e("h2", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: n }),
-      x && /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium bg-foreground-subtle/10 text-foreground-subtle border border-border", children: [
-        t.length,
-        " assigned"
-      ] })
-    ] }),
-    x ? /* @__PURE__ */ e("div", { className: "divide-y divide-border/30", children: t.map((p) => /* @__PURE__ */ e(
-      P,
-      {
-        slot: p,
-        camStreams: a,
-        compact: !1
-      },
-      p.brokerId
-    )) }) : /* @__PURE__ */ r("div", { className: "px-4 py-6 flex flex-col items-center text-center text-foreground-subtle", children: [
-      /* @__PURE__ */ e(ce, { className: "h-5 w-5 mb-2 opacity-30" }),
-      /* @__PURE__ */ e("p", { className: "text-xs", children: "No profile slots assigned for this device" })
-    ] }),
-    h && /* @__PURE__ */ e(
-      fe,
-      {
-        deviceId: s,
-        camStreamIds: f.map((p) => p.camStreamId),
-        camStreams: a
-      }
-    )
-  ] });
+function _e(e) {
+	let t = e.config ?? {};
+	return e.deviceId === void 0 ? /* @__PURE__ */ g("div", {
+		className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning",
+		children: "StreamBrokerPanel requires a deviceId"
+	}) : /* @__PURE__ */ g(ve, {
+		deviceId: e.deviceId,
+		title: t.title,
+		variant: t.variant,
+		hideEmpty: t.hideEmpty
+	});
 }
-function fe({
-  deviceId: s,
-  camStreamIds: n,
-  camStreams: o
-}) {
-  const [i, c] = y(!1);
-  return /* @__PURE__ */ r("div", { className: "border-t border-border/50", children: [
-    /* @__PURE__ */ r(
-      "button",
-      {
-        type: "button",
-        onClick: () => c((t) => !t),
-        className: "w-full px-4 py-1.5 flex items-center justify-between bg-surface-hover/30 hover:bg-surface-hover transition-colors",
-        children: [
-          /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle", children: [
-            i ? /* @__PURE__ */ e(O, { className: "h-3 w-3" }) : /* @__PURE__ */ e(j, { className: "h-3 w-3" }),
-            "Other active streams"
-          ] }),
-          /* @__PURE__ */ e("span", { className: "rounded-full px-2 py-0.5 text-[10px] font-medium bg-foreground-subtle/10 text-foreground-subtle border border-border", children: n.length })
-        ]
-      }
-    ),
-    i && /* @__PURE__ */ e("div", { className: "divide-y divide-border/30", children: n.map((t) => /* @__PURE__ */ e(
-      he,
-      {
-        deviceId: s,
-        camStreamId: t,
-        camStreams: o
-      },
-      t
-    )) })
-  ] });
+function ve({ deviceId: e, title: t = "Stream Brokers", variant: n = "full", hideEmpty: r = !1 }) {
+	f(["streamBroker", "listAllProfileSlots"], [
+		"device.streams-registered",
+		"device.streams-unregistered",
+		"device.registered",
+		"device.unregistered"
+	]);
+	let { data: i } = s(void 0, { staleTime: 3e4 }), a = (i ?? []).filter((t) => t.deviceId === e && t.sourceCamStreamId !== null).slice().toSorted((e, t) => W.indexOf(e.profile) - W.indexOf(t.profile)), o = u(h().trpcClient, e), { data: c } = b({
+		queryKey: [
+			"device",
+			e,
+			"cameraStreams.getCameraStreams"
+		],
+		queryFn: () => o?.cameraStreams?.getCameraStreams({}) ?? [],
+		enabled: !!o,
+		staleTime: 3e4
+	}), l = /* @__PURE__ */ new Map();
+	for (let e of c ?? []) l.set(e.camStreamId, e);
+	let d = new Set(a.map((e) => e.sourceCamStreamId).filter((e) => e !== null)), p = (c ?? []).filter((e) => !d.has(e.camStreamId)), m = a.length > 0, v = p.length > 0;
+	return r && !m && !v ? null : n === "compact" ? m ? /* @__PURE__ */ g("div", {
+		className: "divide-y divide-border/30",
+		children: a.map((e) => /* @__PURE__ */ g(q, {
+			slot: e,
+			camStreams: l,
+			compact: !0
+		}, e.brokerId))
+	}) : /* @__PURE__ */ g("div", {
+		className: "text-[11px] text-foreground-subtle italic px-2 py-1",
+		children: "No active profile slots"
+	}) : /* @__PURE__ */ _("div", {
+		className: "rounded-lg border border-border bg-surface overflow-hidden",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "border-b border-border px-4 py-2 flex items-center justify-between",
+				children: [/* @__PURE__ */ g("h2", {
+					className: "text-xs font-semibold text-foreground uppercase tracking-wider",
+					children: t
+				}), m && /* @__PURE__ */ _("span", {
+					className: "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium bg-foreground-subtle/10 text-foreground-subtle border border-border",
+					children: [a.length, " assigned"]
+				})]
+			}),
+			m ? /* @__PURE__ */ g("div", {
+				className: "divide-y divide-border/30",
+				children: a.map((e) => /* @__PURE__ */ g(q, {
+					slot: e,
+					camStreams: l,
+					compact: !1
+				}, e.brokerId))
+			}) : /* @__PURE__ */ _("div", {
+				className: "px-4 py-6 flex flex-col items-center text-center text-foreground-subtle",
+				children: [/* @__PURE__ */ g(te, { className: "h-5 w-5 mb-2 opacity-30" }), /* @__PURE__ */ g("p", {
+					className: "text-xs",
+					children: "No profile slots assigned for this device"
+				})]
+			}),
+			v && /* @__PURE__ */ g(ye, {
+				deviceId: e,
+				camStreamIds: p.map((e) => e.camStreamId),
+				camStreams: l
+			})
+		]
+	});
 }
-function he({ deviceId: s, camStreamId: n, camStreams: o }) {
-  const i = `${s}/${n}`, t = T("stream-broker.metrics-snapshot", (u) => u.brokerId === i)?.stats, l = o.get(n), d = t?.status === "streaming";
-  return /* @__PURE__ */ r("div", { className: "px-4 py-2", children: [
-    /* @__PURE__ */ e("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ e(
-        "span",
-        {
-          className: `h-1.5 w-1.5 rounded-full ${d ? "bg-success" : "bg-foreground-subtle/40"}`
-        }
-      ),
-      /* @__PURE__ */ e("span", { className: "text-[11px] font-medium text-foreground", children: l?.label ?? n }),
-      l?.resolution && /* @__PURE__ */ r("span", { className: "text-[10px] text-foreground-subtle", children: [
-        l.resolution.width,
-        "×",
-        l.resolution.height
-      ] }),
-      /* @__PURE__ */ e("span", { className: `text-[10px] ${d ? "text-success" : "text-foreground-subtle"}`, children: t?.status ?? "idle" })
-    ] }) }),
-    t && d && /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-[10px]", children: [
-      /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-        /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "FPS:" }),
-        /* @__PURE__ */ e("span", { className: "text-foreground", children: t.inputFps.toFixed(1) })
-      ] }),
-      /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-        /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Bitrate:" }),
-        /* @__PURE__ */ e("span", { className: "text-foreground", children: t.bitrateKbps >= 1e3 ? `${(t.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${t.bitrateKbps} kbps` })
-      ] }),
-      /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-        /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Codec:" }),
-        /* @__PURE__ */ e("span", { className: "text-foreground", children: t.codec?.toUpperCase() ?? "—" })
-      ] }),
-      /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-        /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Pkts:" }),
-        /* @__PURE__ */ e("span", { className: "text-foreground", children: t.packetCount > 1e3 ? `${(t.packetCount / 1e3).toFixed(1)}k` : t.packetCount })
-      ] })
-    ] })
-  ] });
+function ye({ deviceId: e, camStreamIds: t, camStreams: n }) {
+	let [i, a] = r(!1);
+	return /* @__PURE__ */ _("div", {
+		className: "border-t border-border/50",
+		children: [/* @__PURE__ */ _("button", {
+			type: "button",
+			onClick: () => a((e) => !e),
+			className: "w-full px-4 py-1.5 flex items-center justify-between bg-surface-hover/30 hover:bg-surface-hover transition-colors",
+			children: [/* @__PURE__ */ _("span", {
+				className: "inline-flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
+				children: [g(i ? A : j, { className: "h-3 w-3" }), "Other active streams"]
+			}), /* @__PURE__ */ g("span", {
+				className: "rounded-full px-2 py-0.5 text-[10px] font-medium bg-foreground-subtle/10 text-foreground-subtle border border-border",
+				children: t.length
+			})]
+		}), i && /* @__PURE__ */ g("div", {
+			className: "divide-y divide-border/30",
+			children: t.map((t) => /* @__PURE__ */ g(be, {
+				deviceId: e,
+				camStreamId: t,
+				camStreams: n
+			}, t))
+		})]
+	});
 }
-function M(s, n) {
-  const o = (i) => {
-    if (!i || typeof i != "object") return;
-    const c = i;
-    if (typeof c.key == "string" && c.key === n && "value" in c) return c.value;
-    if (c.type === "group" && Array.isArray(c.fields))
-      for (const t of c.fields) {
-        const l = o(t);
-        if (l !== void 0) return l;
-      }
-    else if (c.type === "sub-tabs" && Array.isArray(c.tabs)) {
-      for (const t of c.tabs)
-        if (Array.isArray(t.fields))
-          for (const l of t.fields) {
-            const d = o(l);
-            if (d !== void 0) return d;
-          }
-    }
-  };
-  for (const i of s?.sections ?? [])
-    if (Array.isArray(i.fields))
-      for (const c of i.fields) {
-        const t = o(c);
-        if (t !== void 0) return t;
-      }
+function be({ deviceId: e, camStreamId: t, camStreams: n }) {
+	let r = x(e, t), i = c("stream-broker.metrics-snapshot", (e) => e.brokerId === r)?.stats, a = n.get(t), o = i?.status === "streaming";
+	return /* @__PURE__ */ _("div", {
+		className: "px-4 py-2",
+		children: [/* @__PURE__ */ g("div", {
+			className: "flex items-center justify-between mb-1",
+			children: /* @__PURE__ */ _("div", {
+				className: "flex items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ g("span", { className: `h-1.5 w-1.5 rounded-full ${o ? "bg-success" : "bg-foreground-subtle/40"}` }),
+					/* @__PURE__ */ g("span", {
+						className: "text-[11px] font-medium text-foreground",
+						children: a?.label ?? t
+					}),
+					a?.resolution && /* @__PURE__ */ _("span", {
+						className: "text-[10px] text-foreground-subtle",
+						children: [
+							a.resolution.width,
+							"×",
+							a.resolution.height
+						]
+					}),
+					/* @__PURE__ */ g("span", {
+						className: `text-[10px] ${o ? "text-success" : "text-foreground-subtle"}`,
+						children: i?.status ?? "idle"
+					})
+				]
+			})
+		}), i && o && /* @__PURE__ */ _("div", {
+			className: "flex flex-wrap gap-x-3 gap-y-1 text-[10px]",
+			children: [
+				/* @__PURE__ */ _("span", {
+					className: "inline-flex whitespace-nowrap gap-1",
+					children: [/* @__PURE__ */ g("span", {
+						className: "text-foreground-subtle",
+						children: "FPS:"
+					}), /* @__PURE__ */ g("span", {
+						className: "text-foreground",
+						children: i.inputFps.toFixed(1)
+					})]
+				}),
+				/* @__PURE__ */ _("span", {
+					className: "inline-flex whitespace-nowrap gap-1",
+					children: [/* @__PURE__ */ g("span", {
+						className: "text-foreground-subtle",
+						children: "Bitrate:"
+					}), /* @__PURE__ */ g("span", {
+						className: "text-foreground",
+						children: i.bitrateKbps >= 1e3 ? `${(i.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${i.bitrateKbps} kbps`
+					})]
+				}),
+				/* @__PURE__ */ _("span", {
+					className: "inline-flex whitespace-nowrap gap-1",
+					children: [/* @__PURE__ */ g("span", {
+						className: "text-foreground-subtle",
+						children: "Codec:"
+					}), /* @__PURE__ */ g("span", {
+						className: "text-foreground",
+						children: i.codec?.toUpperCase() ?? "—"
+					})]
+				}),
+				/* @__PURE__ */ _("span", {
+					className: "inline-flex whitespace-nowrap gap-1",
+					children: [/* @__PURE__ */ g("span", {
+						className: "text-foreground-subtle",
+						children: "Pkts:"
+					}), /* @__PURE__ */ g("span", {
+						className: "text-foreground",
+						children: i.packetCount > 1e3 ? `${(i.packetCount / 1e3).toFixed(1)}k` : i.packetCount
+					})]
+				})
+			]
+		})]
+	});
 }
-function P({ slot: s, camStreams: n, compact: o }) {
-  const i = G(), t = T("stream-broker.metrics-snapshot", (b) => b.brokerId === s.brokerId)?.stats;
-  E(["streamBroker", "listClients"], ["stream-broker.metrics-snapshot"]);
-  const { data: l } = Z(
-    { brokerId: s.brokerId },
-    { enabled: t?.status === "streaming", staleTime: 2e3 }
-  ), { data: d } = V(
-    { deviceId: s.deviceId },
-    { staleTime: 15e3 }
-  ), u = s.sourceCamStreamId ?? s.profile, a = !!(M(d, `preBufferEnabled:${u}`) ?? !0), m = M(d, `preBufferSec:${u}`), f = J({
-    onSuccess: () => {
-      i.invalidateQueries({ queryKey: [["streamBroker", "getDeviceSettingsContribution"]] });
-    }
-  }), x = (b) => {
-    f.mutate({
-      deviceId: s.deviceId,
-      patch: { [`preBufferEnabled:${u}`]: b }
-    });
-  }, h = Y({
-    onSuccess: () => {
-      i.invalidateQueries({ queryKey: [["streamBroker", "listClients"]] });
-    }
-  }), p = k(
-    (b) => {
-      h.mutate({ brokerId: s.brokerId, ...b });
-    },
-    [h, s.brokerId]
-  ), w = (s.sourceCamStreamId ? n.get(s.sourceCamStreamId) : void 0)?.resolution ?? s.resolution, v = t?.status === "streaming", q = w ? `${F[s.profile]} (${w.width}×${w.height})` : F[s.profile], H = t ? t.encodedSubscribers + t.decodedSubscribers + (t.rtspClients ?? 0) + (t.pipeClients ?? 0) : 0;
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      className: `@container ${o ? "px-3 py-1.5" : "px-4 py-2"}`,
-      style: { containerType: "inline-size" },
-      children: [
-        /* @__PURE__ */ r("div", { className: "flex items-center justify-between mb-1.5", children: [
-          /* @__PURE__ */ r("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ e(
-              "span",
-              {
-                className: `h-1.5 w-1.5 rounded-full ${v ? s.profile === "high" ? "bg-success" : s.profile === "mid" ? "bg-warning" : "bg-foreground-subtle" : "bg-foreground-subtle/40"}`
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: "text-[11px] font-medium text-foreground", children: q }),
-            /* @__PURE__ */ e("span", { className: `text-[10px] ${v ? "text-success" : "text-foreground-subtle"}`, children: t?.status ?? "loading" }),
-            s.sourceCamStreamId && /* @__PURE__ */ r("span", { className: "text-[10px] text-foreground-subtle", children: [
-              "← ",
-              s.sourceCamStreamId
-            ] })
-          ] }),
-          /* @__PURE__ */ e("span", { className: "text-[10px] text-foreground-subtle", children: t && t.uptimeMs > 0 ? pe(t.uptimeMs) : "—" })
-        ] }),
-        t && v ? o ? /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-x-3 gap-y-0.5 text-[10px]", children: [
-          /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-            /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "FPS:" }),
-            /* @__PURE__ */ r("span", { className: "text-foreground", children: [
-              t.inputFps.toFixed(1),
-              "/",
-              t.decodeFps.toFixed(1)
-            ] })
-          ] }),
-          /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-            /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Bitrate:" }),
-            /* @__PURE__ */ e("span", { className: "text-foreground", children: t.bitrateKbps >= 1e3 ? `${(t.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${t.bitrateKbps} kbps` })
-          ] }),
-          /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-            /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Codec:" }),
-            /* @__PURE__ */ e("span", { className: "text-foreground", children: t.codec?.toUpperCase() ?? "—" })
-          ] }),
-          /* @__PURE__ */ r("span", { className: "inline-flex items-center whitespace-nowrap gap-1", children: [
-            /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Clients:" }),
-            /* @__PURE__ */ e("span", { className: "text-foreground font-semibold", children: H }),
-            /* @__PURE__ */ e("span", { className: "text-foreground-subtle/70", children: "(" }),
-            /* @__PURE__ */ e(Ne, { count: t.encodedSubscribers + t.decodedSubscribers, clients: l, onKill: p }),
-            /* @__PURE__ */ e("span", { className: "text-foreground-subtle/70", children: "·" }),
-            /* @__PURE__ */ e(ve, { count: t.rtspClients ?? 0, clients: l, onKill: p }),
-            /* @__PURE__ */ r("span", { className: "text-foreground-subtle/70", children: [
-              "· pipe ",
-              t.pipeClients ?? 0,
-              ")"
-            ] })
-          ] })
-        ] }) : /* @__PURE__ */ r(B, { children: [
-          /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-[10px]", children: [
-            /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "In:" }),
-              /* @__PURE__ */ r("span", { className: "text-foreground", children: [
-                t.inputFps.toFixed(1),
-                " fps"
-              ] })
-            ] }),
-            /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Dec:" }),
-              /* @__PURE__ */ r("span", { className: "text-foreground", children: [
-                t.decodeFps.toFixed(1),
-                " fps"
-              ] })
-            ] }),
-            /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Bitrate:" }),
-              /* @__PURE__ */ e("span", { className: "text-foreground", children: t.bitrateKbps >= 1e3 ? `${(t.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${t.bitrateKbps} kbps` })
-            ] }),
-            /* @__PURE__ */ r("span", { className: "hidden @[480px]:inline-flex whitespace-nowrap gap-1", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "IDR:" }),
-              /* @__PURE__ */ e("span", { className: "text-foreground", children: t.idrIntervalMs > 0 ? `${(t.idrIntervalMs / 1e3).toFixed(1)}s` : "—" })
-            ] }),
-            /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap gap-1", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Codec:" }),
-              /* @__PURE__ */ e("span", { className: "text-foreground", children: t.codec?.toUpperCase() ?? "—" })
-            ] }),
-            /* @__PURE__ */ r("span", { className: "hidden @[480px]:inline-flex whitespace-nowrap gap-1 max-w-full overflow-hidden", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Decoder:" }),
-              /* @__PURE__ */ e("span", { className: "text-foreground font-mono truncate", children: t.decoderNodeId ?? /* @__PURE__ */ e("span", { className: "text-foreground-subtle italic", children: "deferred" }) })
-            ] }),
-            /* @__PURE__ */ r("span", { className: "hidden @[640px]:inline-flex whitespace-nowrap gap-1", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Pipe:" }),
-              /* @__PURE__ */ e("span", { className: "text-foreground", children: t.pipeClients ?? 0 })
-            ] }),
-            /* @__PURE__ */ r("span", { className: "hidden @[640px]:inline-flex whitespace-nowrap gap-1", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Packets:" }),
-              /* @__PURE__ */ e("span", { className: "text-foreground", children: t.packetCount > 1e3 ? `${(t.packetCount / 1e3).toFixed(1)}k` : t.packetCount })
-            ] }),
-            /* @__PURE__ */ r("span", { className: "hidden @[640px]:inline-flex whitespace-nowrap gap-1", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Data:" }),
-              /* @__PURE__ */ e("span", { className: "text-foreground", children: t.totalBytes > 1048576 ? `${(t.totalBytes / 1048576).toFixed(1)} MB` : `${(t.totalBytes / 1024).toFixed(0)} KB` })
-            ] }),
-            t.audio && /* @__PURE__ */ r("div", { className: "basis-full flex flex-wrap items-center gap-x-1.5 gap-y-0.5", children: [
-              /* @__PURE__ */ e("span", { className: "text-foreground-subtle whitespace-nowrap", children: "Audio:" }),
-              /* @__PURE__ */ r("span", { className: "inline-flex whitespace-nowrap items-center gap-1.5", children: [
-                /* @__PURE__ */ e("span", { className: "text-foreground", children: t.audio.codec.toUpperCase() }),
-                /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "·" }),
-                /* @__PURE__ */ e("span", { className: "text-foreground", children: t.audio.sampleRate >= 1e3 ? `${(t.audio.sampleRate / 1e3).toFixed(t.audio.sampleRate % 1e3 === 0 ? 0 : 1)}kHz` : `${t.audio.sampleRate}Hz` }),
-                /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "·" }),
-                /* @__PURE__ */ e("span", { className: "text-foreground", children: t.audio.channels === 1 ? "mono" : t.audio.channels === 2 ? "stereo" : `${t.audio.channels}ch` })
-              ] }),
-              /* @__PURE__ */ e("span", { className: `px-1 py-px rounded text-[8px] font-medium whitespace-nowrap ${t.audio.supported ? "bg-success/15 text-success" : "bg-amber-500/15 text-amber-500"}`, children: t.audio.supported ? "decoded" : "no decoder" })
-            ] })
-          ] }),
-          /* @__PURE__ */ e(ge, { clients: l, encodedCount: t.encodedSubscribers, onKill: p })
-        ] }) : /* @__PURE__ */ e("p", { className: "text-[10px] text-foreground-subtle italic", children: "No demand — stream suspended" }),
-        /* @__PURE__ */ r("div", { className: "mt-1.5 flex items-center gap-1.5 text-[10px]", children: [
-          /* @__PURE__ */ e("span", { className: "text-foreground-subtle", children: "Buffer:" }),
-          /* @__PURE__ */ e(
-            we,
-            {
-              enabled: a,
-              onToggle: (b) => x(b),
-              disabled: f.isPending
-            }
-          ),
-          /* @__PURE__ */ r("span", { className: "text-foreground", children: [
-            m ?? t?.preBufferSec ?? 0,
-            "s",
-            t && v ? ` (${t.preBufferPackets}p)` : ""
-          ] })
-        ] })
-      ]
-    }
-  );
+function K(e, t) {
+	let n = (e) => {
+		if (!e || typeof e != "object") return;
+		let r = e;
+		if (typeof r.key == "string" && r.key === t && "value" in r) return r.value;
+		if (r.type === "group" && Array.isArray(r.fields)) for (let e of r.fields) {
+			let t = n(e);
+			if (t !== void 0) return t;
+		}
+		else if (r.type === "sub-tabs" && Array.isArray(r.tabs)) {
+			for (let e of r.tabs) if (Array.isArray(e.fields)) for (let t of e.fields) {
+				let e = n(t);
+				if (e !== void 0) return e;
+			}
+		}
+	};
+	for (let t of e?.sections ?? []) if (Array.isArray(t.fields)) for (let e of t.fields) {
+		let t = n(e);
+		if (t !== void 0) return t;
+	}
 }
-const xe = 280, be = 120;
-function K({ trigger: s, content: n, widthClass: o }) {
-  const i = I(null), c = I(null), [t, l] = y(!1), [d, u] = y(!1), a = k(() => {
-    c.current && (clearTimeout(c.current), c.current = null);
-  }, []), m = k(() => {
-    a(), c.current = setTimeout(() => l(!1), be);
-  }, [a]), f = k(() => {
-    a();
-    const h = i.current;
-    if (h) {
-      const p = h.getBoundingClientRect(), N = window.innerHeight - p.bottom, w = p.top;
-      u(N < xe && w > N);
-    }
-    l(!0);
-  }, [a]);
-  return /* @__PURE__ */ r(
-    "span",
-    {
-      ref: i,
-      className: "relative inline-block",
-      onMouseEnter: f,
-      onMouseLeave: m,
-      children: [
-        s,
-        t && /* @__PURE__ */ e(
-          "div",
-          {
-            className: `absolute left-0 ${d ? "bottom-full mb-1" : "top-full mt-1"} z-50 ${o} rounded-md border border-border bg-surface shadow-xl p-2 text-[10px] normal-case`,
-            onMouseEnter: a,
-            onMouseLeave: m,
-            children: n
-          }
-        )
-      ]
-    }
-  );
+function q({ slot: e, camStreams: t, compact: n }) {
+	let r = y(), a = c("stream-broker.metrics-snapshot", (t) => t.brokerId === e.brokerId)?.stats;
+	f(["streamBroker", "listClients"], ["stream-broker.metrics-snapshot"]);
+	let { data: s } = l({ brokerId: e.brokerId }, {
+		enabled: a?.status === "streaming",
+		staleTime: 2e3
+	}), { data: u } = d({ deviceId: e.deviceId }, { staleTime: 15e3 }), m = e.sourceCamStreamId ?? e.profile, h = !!(K(u, `preBufferEnabled:${m}`) ?? !0), b = K(u, `preBufferSec:${m}`), x = o({ onSuccess: () => {
+		r.invalidateQueries({ queryKey: [["streamBroker", "getDeviceSettingsContribution"]] });
+	} }), S = (t) => {
+		x.mutate({
+			deviceId: e.deviceId,
+			patch: { [`preBufferEnabled:${m}`]: t }
+		});
+	}, C = p({ onSuccess: () => {
+		r.invalidateQueries({ queryKey: [["streamBroker", "listClients"]] });
+	} }), w = i((t) => {
+		C.mutate({
+			brokerId: e.brokerId,
+			...t
+		});
+	}, [C, e.brokerId]), T = (e.sourceCamStreamId ? t.get(e.sourceCamStreamId) : void 0)?.resolution ?? e.resolution, E = a?.status === "streaming", D = T ? `${U[e.profile]} (${T.width}×${T.height})` : U[e.profile], O = a ? a.encodedSubscribers + a.decodedSubscribers + (a.rtspClients ?? 0) + (a.pipeClients ?? 0) : 0;
+	return /* @__PURE__ */ _("div", {
+		className: `@container ${n ? "px-3 py-1.5" : "px-4 py-2"}`,
+		style: { containerType: "inline-size" },
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center justify-between mb-1.5",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ g("span", { className: `h-1.5 w-1.5 rounded-full ${E ? e.profile === "high" ? "bg-success" : e.profile === "mid" ? "bg-warning" : "bg-foreground-subtle" : "bg-foreground-subtle/40"}` }),
+						/* @__PURE__ */ g("span", {
+							className: "text-[11px] font-medium text-foreground",
+							children: D
+						}),
+						/* @__PURE__ */ g("span", {
+							className: `text-[10px] ${E ? "text-success" : "text-foreground-subtle"}`,
+							children: a?.status ?? "loading"
+						}),
+						e.sourceCamStreamId && /* @__PURE__ */ _("span", {
+							className: "text-[10px] text-foreground-subtle",
+							children: ["← ", e.sourceCamStreamId]
+						})
+					]
+				}), /* @__PURE__ */ g("span", {
+					className: "text-[10px] text-foreground-subtle",
+					children: a && a.uptimeMs > 0 ? pe(a.uptimeMs) : "—"
+				})]
+			}),
+			a && E ? n ? /* @__PURE__ */ _("div", {
+				className: "flex flex-wrap gap-x-3 gap-y-0.5 text-[10px]",
+				children: [
+					/* @__PURE__ */ _("span", {
+						className: "inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "FPS:"
+						}), /* @__PURE__ */ _("span", {
+							className: "text-foreground",
+							children: [
+								a.inputFps.toFixed(1),
+								"/",
+								a.decodeFps.toFixed(1)
+							]
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Bitrate:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: a.bitrateKbps >= 1e3 ? `${(a.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${a.bitrateKbps} kbps`
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Codec:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: a.codec?.toUpperCase() ?? "—"
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "inline-flex items-center whitespace-nowrap gap-1",
+						children: [
+							/* @__PURE__ */ g("span", {
+								className: "text-foreground-subtle",
+								children: "Clients:"
+							}),
+							/* @__PURE__ */ g("span", {
+								className: "text-foreground font-semibold",
+								children: O
+							}),
+							/* @__PURE__ */ g("span", {
+								className: "text-foreground-subtle/70",
+								children: "("
+							}),
+							/* @__PURE__ */ g(Ce, {
+								count: a.encodedSubscribers + a.decodedSubscribers,
+								clients: s,
+								onKill: w
+							}),
+							/* @__PURE__ */ g("span", {
+								className: "text-foreground-subtle/70",
+								children: "·"
+							}),
+							/* @__PURE__ */ g(Te, {
+								count: a.rtspClients ?? 0,
+								clients: s,
+								onKill: w
+							}),
+							/* @__PURE__ */ _("span", {
+								className: "text-foreground-subtle/70",
+								children: [
+									"· pipe ",
+									a.pipeClients ?? 0,
+									")"
+								]
+							})
+						]
+					})
+				]
+			}) : /* @__PURE__ */ _(v, { children: [/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap gap-x-3 gap-y-1 text-[10px]",
+				children: [
+					/* @__PURE__ */ _("span", {
+						className: "inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "In:"
+						}), /* @__PURE__ */ _("span", {
+							className: "text-foreground",
+							children: [a.inputFps.toFixed(1), " fps"]
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Dec:"
+						}), /* @__PURE__ */ _("span", {
+							className: "text-foreground",
+							children: [a.decodeFps.toFixed(1), " fps"]
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Bitrate:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: a.bitrateKbps >= 1e3 ? `${(a.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${a.bitrateKbps} kbps`
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "hidden @[480px]:inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "IDR:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: a.idrIntervalMs > 0 ? `${(a.idrIntervalMs / 1e3).toFixed(1)}s` : "—"
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Codec:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: a.codec?.toUpperCase() ?? "—"
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "hidden @[480px]:inline-flex whitespace-nowrap gap-1 max-w-full overflow-hidden",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Decoder:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground font-mono truncate",
+							children: a.decoderNodeId ?? /* @__PURE__ */ g("span", {
+								className: "text-foreground-subtle italic",
+								children: "deferred"
+							})
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "hidden @[640px]:inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Pipe:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: a.pipeClients ?? 0
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "hidden @[640px]:inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Packets:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: a.packetCount > 1e3 ? `${(a.packetCount / 1e3).toFixed(1)}k` : a.packetCount
+						})]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "hidden @[640px]:inline-flex whitespace-nowrap gap-1",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground-subtle",
+							children: "Data:"
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: a.totalBytes > 1048576 ? `${(a.totalBytes / 1048576).toFixed(1)} MB` : `${(a.totalBytes / 1024).toFixed(0)} KB`
+						})]
+					}),
+					a.audio && /* @__PURE__ */ _("div", {
+						className: "basis-full flex flex-wrap items-center gap-x-1.5 gap-y-0.5",
+						children: [
+							/* @__PURE__ */ g("span", {
+								className: "text-foreground-subtle whitespace-nowrap",
+								children: "Audio:"
+							}),
+							/* @__PURE__ */ _("span", {
+								className: "inline-flex whitespace-nowrap items-center gap-1.5",
+								children: [
+									/* @__PURE__ */ g("span", {
+										className: "text-foreground",
+										children: a.audio.codec.toUpperCase()
+									}),
+									/* @__PURE__ */ g("span", {
+										className: "text-foreground-subtle",
+										children: "·"
+									}),
+									/* @__PURE__ */ g("span", {
+										className: "text-foreground",
+										children: a.audio.sampleRate >= 1e3 ? `${(a.audio.sampleRate / 1e3).toFixed(a.audio.sampleRate % 1e3 == 0 ? 0 : 1)}kHz` : `${a.audio.sampleRate}Hz`
+									}),
+									/* @__PURE__ */ g("span", {
+										className: "text-foreground-subtle",
+										children: "·"
+									}),
+									/* @__PURE__ */ g("span", {
+										className: "text-foreground",
+										children: a.audio.channels === 1 ? "mono" : a.audio.channels === 2 ? "stereo" : `${a.audio.channels}ch`
+									})
+								]
+							}),
+							/* @__PURE__ */ g("span", {
+								className: `px-1 py-px rounded text-[8px] font-medium whitespace-nowrap ${a.audio.supported ? "bg-success/15 text-success" : "bg-amber-500/15 text-amber-500"}`,
+								children: a.audio.supported ? "decoded" : "no decoder"
+							})
+						]
+					})
+				]
+			}), /* @__PURE__ */ g(Se, {
+				clients: s,
+				encodedCount: a.encodedSubscribers,
+				onKill: w
+			})] }) : /* @__PURE__ */ g("p", {
+				className: "text-[10px] text-foreground-subtle italic",
+				children: "No demand — stream suspended"
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "mt-1.5 flex items-center gap-1.5 text-[10px]",
+				children: [
+					/* @__PURE__ */ g("span", {
+						className: "text-foreground-subtle",
+						children: "Buffer:"
+					}),
+					/* @__PURE__ */ g(we, {
+						enabled: h,
+						onToggle: (e) => S(e),
+						disabled: x.isPending
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "text-foreground",
+						children: [
+							b ?? a?.preBufferSec ?? 0,
+							"s",
+							a && E ? ` (${a.preBufferPackets}p)` : ""
+						]
+					})
+				]
+			})
+		]
+	});
 }
-function g(s) {
-  if (s < 1e3) return `${s}ms`;
-  const n = Math.floor(s / 1e3);
-  if (n < 60) return `${n}s`;
-  const o = Math.floor(n / 60);
-  return o < 60 ? `${o}m ${n % 60}s` : `${Math.floor(o / 60)}h ${o % 60}m`;
+var xe = 280, J = 120;
+function Y({ trigger: t, content: n, widthClass: a }) {
+	let o = e(null), s = e(null), [c, l] = r(!1), [u, d] = r(!1), f = i(() => {
+		s.current &&= (clearTimeout(s.current), null);
+	}, []), p = i(() => {
+		f(), s.current = setTimeout(() => l(!1), J);
+	}, [f]);
+	return /* @__PURE__ */ _("span", {
+		ref: o,
+		className: "relative inline-block",
+		onMouseEnter: i(() => {
+			f();
+			let e = o.current;
+			if (e) {
+				let t = e.getBoundingClientRect(), n = window.innerHeight - t.bottom, r = t.top;
+				d(n < xe && r > n);
+			}
+			l(!0);
+		}, [f]),
+		onMouseLeave: p,
+		children: [t, c && /* @__PURE__ */ g("div", {
+			className: `absolute left-0 ${u ? "bottom-full mb-1" : "top-full mt-1"} z-50 ${a} rounded-md border border-border bg-surface shadow-xl p-2 text-[10px] normal-case`,
+			onMouseEnter: f,
+			onMouseLeave: p,
+			children: n
+		})]
+	});
 }
-function U(s) {
-  return s < 1024 ? `${s} B` : s < 1048576 ? `${(s / 1024).toFixed(1)} KB` : s < 1073741824 ? `${(s / 1048576).toFixed(1)} MB` : `${(s / 1073741824).toFixed(2)} GB`;
+function X(e) {
+	if (e < 1e3) return `${e}ms`;
+	let t = Math.floor(e / 1e3);
+	if (t < 60) return `${t}s`;
+	let n = Math.floor(t / 60);
+	return n < 60 ? `${n}m ${t % 60}s` : `${Math.floor(n / 60)}h ${n % 60}m`;
 }
-function ge({ clients: s, encodedCount: n, onKill: o }) {
-  const i = s?.decoded ?? [], c = s?.audio ?? [], t = s?.rtsp ?? [], l = i.length + c.length + t.length + n, [d, u] = y(!0);
-  return l === 0 ? /* @__PURE__ */ e("div", { className: "mt-1.5 text-[10px] text-foreground-subtle italic", children: "No active subscribers" }) : /* @__PURE__ */ r("div", { className: "mt-1.5 border-t border-border/30 pt-1.5", children: [
-    /* @__PURE__ */ r(
-      "button",
-      {
-        type: "button",
-        onClick: () => u((a) => !a),
-        className: "flex items-center gap-1 text-[10px] text-foreground-subtle hover:text-foreground transition-colors",
-        children: [
-          d ? /* @__PURE__ */ e(O, { className: "h-3 w-3" }) : /* @__PURE__ */ e(j, { className: "h-3 w-3" }),
-          /* @__PURE__ */ r("span", { className: "uppercase tracking-wider", children: [
-            "Subscribers (",
-            l,
-            ")"
-          ] })
-        ]
-      }
-    ),
-    d && /* @__PURE__ */ r("div", { className: "mt-1 divide-y divide-border/20", children: [
-      i.map((a, m) => /* @__PURE__ */ e(
-        $,
-        {
-          kind: "DECODED",
-          kindClass: "bg-success/10 text-success",
-          tag: a.tag || "unknown",
-          metrics: [
-            `${a.maxFps.toFixed(0)}fps`,
-            `${a.framesDelivered} del`,
-            ...a.framesDropped > 0 ? [{ text: `${a.framesDropped} drop`, warn: !0 }] : []
-          ],
-          age: Date.now() - a.subscribedAt,
-          onKill: o && a.tag ? () => o({ channel: "decoded", handle: a.tag }) : void 0
-        },
-        `d-${m}`
-      )),
-      c.map((a, m) => /* @__PURE__ */ e(
-        $,
-        {
-          kind: "AUDIO",
-          kindClass: "bg-info/10 text-info",
-          tag: a.tag || "unknown",
-          metrics: [`${a.chunksDelivered} chunks`],
-          age: Date.now() - a.subscribedAt,
-          onKill: o && a.tag ? () => o({ channel: "audio", handle: a.tag }) : void 0
-        },
-        `a-${m}`
-      )),
-      t.map((a) => {
-        const m = Date.now() - a.lastRtpAt, f = m > 5e3, x = a.playing ? f ? "stalled" : "playing" : "paused", h = a.playing ? f ? "bg-amber-400/10 text-amber-400" : "bg-success/10 text-success" : "bg-foreground-subtle/10 text-foreground-subtle";
-        return /* @__PURE__ */ e(
-          $,
-          {
-            kind: "RTSP",
-            kindClass: "bg-warning/10 text-warning",
-            tag: a.remoteAddr,
-            state: { text: x + (a.muted ? " · muted" : ""), className: h },
-            metrics: [U(a.bytesSent), `last rtp ${g(m)} ago`],
-            age: Date.now() - a.connectedAt,
-            onKill: o ? () => o({ channel: "rtsp", handle: a.sessionId }) : void 0
-          },
-          `r-${a.sessionId}`
-        );
-      }),
-      n > 0 && /* @__PURE__ */ r("div", { className: "py-0.5 text-[10px] text-foreground-subtle", children: [
-        /* @__PURE__ */ e("span", { className: "inline-block px-1 rounded text-[9px] font-bold bg-foreground-subtle/10 text-foreground-subtle mr-2", children: "ENCODED" }),
-        n,
-        " callback subscriber(s)"
-      ] })
-    ] })
-  ] });
+function Z(e) {
+	return e < 1024 ? `${e} B` : e < 1048576 ? `${(e / 1024).toFixed(1)} KB` : e < 1073741824 ? `${(e / 1048576).toFixed(1)} MB` : `${(e / 1073741824).toFixed(2)} GB`;
 }
-function $({ kind: s, kindClass: n, tag: o, state: i, metrics: c, age: t, onKill: l }) {
-  return /* @__PURE__ */ r("div", { className: "flex items-center gap-2 py-0.5 text-[10px]", children: [
-    /* @__PURE__ */ e("span", { className: `inline-block px-1 rounded text-[9px] font-bold shrink-0 w-14 text-center ${n}`, children: s }),
-    /* @__PURE__ */ e("span", { className: "text-foreground font-medium truncate flex-1", children: o }),
-    i && /* @__PURE__ */ e("span", { className: `text-[9px] px-1 rounded shrink-0 ${i.className}`, children: i.text }),
-    /* @__PURE__ */ r("span", { className: "text-foreground-subtle flex items-center gap-1.5 shrink-0", children: [
-      c.map((d, u) => /* @__PURE__ */ r("span", { children: [
-        u > 0 && /* @__PURE__ */ e("span", { className: "mr-1.5 text-foreground-subtle/50", children: "·" }),
-        typeof d == "string" ? d : /* @__PURE__ */ e("span", { className: d.warn ? "text-amber-400" : "", children: d.text })
-      ] }, u)),
-      /* @__PURE__ */ r("span", { className: "text-foreground-subtle/70", children: [
-        "· ",
-        g(t)
-      ] })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "w-5 flex-shrink-0 flex items-center justify-end", children: l ? /* @__PURE__ */ e(C, { onClick: l }) : null })
-  ] });
+function Se({ clients: e, encodedCount: t, onKill: n }) {
+	let i = e?.decoded ?? [], a = e?.audio ?? [], o = e?.rtsp ?? [], s = e?.encoded ?? [], c = i.length + a.length + o.length + s.length, [l, u] = r(!0);
+	return c === 0 ? /* @__PURE__ */ g("div", {
+		className: "mt-1.5 text-[10px] text-foreground-subtle italic",
+		children: "No active subscribers"
+	}) : /* @__PURE__ */ _("div", {
+		className: "mt-1.5 border-t border-border/30 pt-1.5",
+		children: [/* @__PURE__ */ _("button", {
+			type: "button",
+			onClick: () => u((e) => !e),
+			className: "flex items-center gap-1 text-[10px] text-foreground-subtle hover:text-foreground transition-colors",
+			children: [g(l ? A : j, { className: "h-3 w-3" }), /* @__PURE__ */ _("span", {
+				className: "uppercase tracking-wider",
+				children: [
+					"Subscribers (",
+					c,
+					")"
+				]
+			})]
+		}), l && /* @__PURE__ */ _("div", {
+			className: "mt-1 divide-y divide-border/20",
+			children: [
+				i.map((e, t) => /* @__PURE__ */ g(Q, {
+					kind: "DECODED",
+					kindClass: "bg-success/10 text-success",
+					tag: e.tag || "unknown",
+					metrics: [
+						`${e.maxFps.toFixed(0)}fps`,
+						`${e.framesDelivered} del`,
+						...e.framesDropped > 0 ? [{
+							text: `${e.framesDropped} drop`,
+							warn: !0
+						}] : []
+					],
+					age: Date.now() - e.subscribedAt,
+					onKill: n && e.tag ? () => n({
+						channel: "decoded",
+						handle: e.tag
+					}) : void 0
+				}, `d-${t}`)),
+				a.map((e, t) => /* @__PURE__ */ g(Q, {
+					kind: "AUDIO",
+					kindClass: "bg-info/10 text-info",
+					tag: e.tag || "unknown",
+					metrics: [`${e.chunksDelivered} chunks`],
+					age: Date.now() - e.subscribedAt,
+					onKill: n && e.tag ? () => n({
+						channel: "audio",
+						handle: e.tag
+					}) : void 0
+				}, `a-${t}`)),
+				o.map((e) => {
+					let t = Date.now() - e.lastRtpAt, r = t > 5e3, i = e.playing ? r ? "stalled" : "playing" : "paused", a = e.playing ? r ? "bg-amber-400/10 text-amber-400" : "bg-success/10 text-success" : "bg-foreground-subtle/10 text-foreground-subtle";
+					return /* @__PURE__ */ g(Q, {
+						kind: "RTSP",
+						kindClass: "bg-warning/10 text-warning",
+						tag: e.remoteAddr,
+						state: {
+							text: i + (e.muted ? " · muted" : ""),
+							className: a
+						},
+						metrics: [Z(e.bytesSent), `last rtp ${X(t)} ago`],
+						age: Date.now() - e.connectedAt,
+						onKill: n ? () => n({
+							channel: "rtsp",
+							handle: e.sessionId
+						}) : void 0
+					}, `r-${e.sessionId}`);
+				}),
+				s.map((e) => {
+					let t = e.attribution, n = me[t.kind] ?? "bg-foreground-subtle/10 text-foreground-subtle", r = t.sessionId ? t.sessionId.slice(0, 8) : null, i = [];
+					t.label && i.push(t.label), r && i.push(`sess ${r}`), t.userId && i.push(`user ${t.userId.slice(0, 8)}`), t.remoteAddr && i.push(`@${t.remoteAddr}`), t.userAgent && i.push(fe(t.userAgent));
+					let a = i.length > 0 ? i.join(" · ") : ge(t.kind), o = [];
+					return t.media && o.push({ text: t.media }), t.targetCodec && o.push(t.targetCodec), t.transport && o.push(t.transport), o.push(`${e.packetsDelivered} pkts`), /* @__PURE__ */ g(Q, {
+						kind: he(t.kind),
+						kindClass: n,
+						tag: a,
+						metrics: o,
+						age: Date.now() - e.subscribedAt
+					}, e.id);
+				}),
+				s.length === 0 && t > 0 && /* @__PURE__ */ _("div", {
+					className: "py-0.5 text-[10px] text-foreground-subtle",
+					children: [
+						/* @__PURE__ */ g("span", {
+							className: "inline-block px-1 rounded text-[9px] font-bold bg-foreground-subtle/10 text-foreground-subtle mr-2",
+							children: "ENCODED"
+						}),
+						t,
+						" callback subscriber(s)"
+					]
+				})
+			]
+		})]
+	});
 }
-function Ne({ count: s, clients: n, onKill: o }) {
-  const i = n?.decoded ?? [], c = n?.audio ?? [], t = n ? n.encodedSubscribers : 0, l = i.length > 0 || c.length > 0 || t > 0, d = /* @__PURE__ */ e("span", { className: `text-foreground ${l ? "underline decoration-dotted decoration-foreground-subtle/50 underline-offset-2 cursor-help" : ""}`, children: s });
-  if (!l) return d;
-  const u = /* @__PURE__ */ r(B, { children: [
-    i.length > 0 && /* @__PURE__ */ r("div", { className: "mb-2", children: [
-      /* @__PURE__ */ e("div", { className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1", children: "Decoded subscribers" }),
-      i.map((a, m) => /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2 py-0.5", children: [
-        /* @__PURE__ */ e("span", { className: "text-foreground font-medium truncate", children: a.tag || "unknown" }),
-        /* @__PURE__ */ r("span", { className: "text-foreground-subtle text-[9px] flex items-center gap-1.5 shrink-0", children: [
-          /* @__PURE__ */ r("span", { children: [
-            a.maxFps.toFixed(0),
-            "fps"
-          ] }),
-          /* @__PURE__ */ e("span", { children: "·" }),
-          /* @__PURE__ */ r("span", { children: [
-            a.framesDelivered,
-            " del"
-          ] }),
-          a.framesDropped > 0 && /* @__PURE__ */ r("span", { className: "text-amber-400", children: [
-            "· ",
-            a.framesDropped,
-            " drop"
-          ] }),
-          /* @__PURE__ */ e("span", { children: "·" }),
-          /* @__PURE__ */ e("span", { children: g(Date.now() - a.subscribedAt) }),
-          o && a.tag && /* @__PURE__ */ e(C, { onClick: () => o({ channel: "decoded", handle: a.tag }) })
-        ] })
-      ] }, `d-${m}`))
-    ] }),
-    c.length > 0 && /* @__PURE__ */ r("div", { className: "mb-2", children: [
-      /* @__PURE__ */ e("div", { className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1", children: "Audio subscribers" }),
-      c.map((a, m) => /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2 py-0.5", children: [
-        /* @__PURE__ */ e("span", { className: "text-foreground font-medium truncate", children: a.tag || "unknown" }),
-        /* @__PURE__ */ r("span", { className: "text-foreground-subtle text-[9px] flex items-center gap-1.5 shrink-0", children: [
-          /* @__PURE__ */ r("span", { children: [
-            a.chunksDelivered,
-            " chunks"
-          ] }),
-          /* @__PURE__ */ e("span", { children: "·" }),
-          /* @__PURE__ */ e("span", { children: g(Date.now() - a.subscribedAt) }),
-          o && a.tag && /* @__PURE__ */ e(C, { onClick: () => o({ channel: "audio", handle: a.tag }) })
-        ] })
-      ] }, `a-${m}`))
-    ] }),
-    t > 0 && /* @__PURE__ */ r("div", { children: [
-      /* @__PURE__ */ e("div", { className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1", children: "Encoded" }),
-      /* @__PURE__ */ r("div", { className: "text-foreground", children: [
-        t,
-        " callback subscriber(s)"
-      ] })
-    ] })
-  ] });
-  return /* @__PURE__ */ e(K, { trigger: d, content: u, widthClass: "min-w-[260px] max-w-[360px]" });
+function Q({ kind: e, kindClass: t, tag: n, state: r, metrics: i, age: a, onKill: o }) {
+	return /* @__PURE__ */ _("div", {
+		className: "flex items-center gap-2 py-0.5 text-[10px]",
+		children: [
+			/* @__PURE__ */ g("span", {
+				className: `inline-block px-1 rounded text-[9px] font-bold shrink-0 w-14 text-center ${t}`,
+				children: e
+			}),
+			/* @__PURE__ */ g("span", {
+				className: "text-foreground font-medium truncate flex-1",
+				children: n
+			}),
+			r && /* @__PURE__ */ g("span", {
+				className: `text-[9px] px-1 rounded shrink-0 ${r.className}`,
+				children: r.text
+			}),
+			/* @__PURE__ */ _("span", {
+				className: "text-foreground-subtle flex items-center gap-1.5 shrink-0",
+				children: [i.map((e, t) => /* @__PURE__ */ _("span", { children: [t > 0 && /* @__PURE__ */ g("span", {
+					className: "mr-1.5 text-foreground-subtle/50",
+					children: "·"
+				}), typeof e == "string" ? e : /* @__PURE__ */ g("span", {
+					className: e.warn ? "text-amber-400" : "",
+					children: e.text
+				})] }, t)), /* @__PURE__ */ _("span", {
+					className: "text-foreground-subtle/70",
+					children: ["· ", X(a)]
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "w-5 flex-shrink-0 flex items-center justify-end",
+				children: o ? /* @__PURE__ */ g($, { onClick: o }) : null
+			})
+		]
+	});
 }
-function we({
-  enabled: s,
-  onToggle: n,
-  disabled: o
-}) {
-  return /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      role: "switch",
-      "aria-checked": s,
-      disabled: o,
-      onClick: () => n(!s),
-      className: `relative inline-flex h-3 w-6 shrink-0 items-center rounded-full transition-colors ${s ? "bg-success/60" : "bg-foreground-subtle/30"} ${o ? "opacity-50 cursor-wait" : "cursor-pointer"}`,
-      title: s ? "Pre-buffer enabled — click to disable" : "Pre-buffer disabled — click to enable",
-      children: /* @__PURE__ */ e(
-        "span",
-        {
-          className: `inline-block h-2.5 w-2.5 rounded-full bg-white shadow transition-transform ${s ? "translate-x-3" : "translate-x-0.5"}`
-        }
-      )
-    }
-  );
+function Ce({ count: e, clients: t, onKill: n }) {
+	let r = t?.decoded ?? [], i = t?.audio ?? [], a = t ? t.encodedSubscribers : 0, o = r.length > 0 || i.length > 0 || a > 0, s = /* @__PURE__ */ g("span", {
+		className: `text-foreground ${o ? "underline decoration-dotted decoration-foreground-subtle/50 underline-offset-2 cursor-help" : ""}`,
+		children: e
+	});
+	return o ? /* @__PURE__ */ g(Y, {
+		trigger: s,
+		content: /* @__PURE__ */ _(v, { children: [
+			r.length > 0 && /* @__PURE__ */ _("div", {
+				className: "mb-2",
+				children: [/* @__PURE__ */ g("div", {
+					className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1",
+					children: "Decoded subscribers"
+				}), r.map((e, t) => /* @__PURE__ */ _("div", {
+					className: "flex items-center justify-between gap-2 py-0.5",
+					children: [/* @__PURE__ */ g("span", {
+						className: "text-foreground font-medium truncate",
+						children: e.tag || "unknown"
+					}), /* @__PURE__ */ _("span", {
+						className: "text-foreground-subtle text-[9px] flex items-center gap-1.5 shrink-0",
+						children: [
+							/* @__PURE__ */ _("span", { children: [e.maxFps.toFixed(0), "fps"] }),
+							/* @__PURE__ */ g("span", { children: "·" }),
+							/* @__PURE__ */ _("span", { children: [e.framesDelivered, " del"] }),
+							e.framesDropped > 0 && /* @__PURE__ */ _("span", {
+								className: "text-amber-400",
+								children: [
+									"· ",
+									e.framesDropped,
+									" drop"
+								]
+							}),
+							/* @__PURE__ */ g("span", { children: "·" }),
+							/* @__PURE__ */ g("span", { children: X(Date.now() - e.subscribedAt) }),
+							n && e.tag && /* @__PURE__ */ g($, { onClick: () => n({
+								channel: "decoded",
+								handle: e.tag
+							}) })
+						]
+					})]
+				}, `d-${t}`))]
+			}),
+			i.length > 0 && /* @__PURE__ */ _("div", {
+				className: "mb-2",
+				children: [/* @__PURE__ */ g("div", {
+					className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1",
+					children: "Audio subscribers"
+				}), i.map((e, t) => /* @__PURE__ */ _("div", {
+					className: "flex items-center justify-between gap-2 py-0.5",
+					children: [/* @__PURE__ */ g("span", {
+						className: "text-foreground font-medium truncate",
+						children: e.tag || "unknown"
+					}), /* @__PURE__ */ _("span", {
+						className: "text-foreground-subtle text-[9px] flex items-center gap-1.5 shrink-0",
+						children: [
+							/* @__PURE__ */ _("span", { children: [e.chunksDelivered, " chunks"] }),
+							/* @__PURE__ */ g("span", { children: "·" }),
+							/* @__PURE__ */ g("span", { children: X(Date.now() - e.subscribedAt) }),
+							n && e.tag && /* @__PURE__ */ g($, { onClick: () => n({
+								channel: "audio",
+								handle: e.tag
+							}) })
+						]
+					})]
+				}, `a-${t}`))]
+			}),
+			a > 0 && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("div", {
+				className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1",
+				children: "Encoded"
+			}), /* @__PURE__ */ _("div", {
+				className: "text-foreground",
+				children: [a, " callback subscriber(s)"]
+			})] })
+		] }),
+		widthClass: "min-w-[260px] max-w-[360px]"
+	}) : s;
 }
-function C({ onClick: s }) {
-  return /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      title: "Force-disconnect this client",
-      onClick: (n) => {
-        n.stopPropagation(), s();
-      },
-      className: "inline-flex items-center justify-center h-4 w-4 rounded-sm border border-border/60 text-foreground-subtle hover:bg-red-500/10 hover:text-red-400 hover:border-red-500/40 transition-colors",
-      children: /* @__PURE__ */ e(le, { className: "h-2.5 w-2.5" })
-    }
-  );
+function we({ enabled: e, onToggle: t, disabled: n }) {
+	return /* @__PURE__ */ g("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": e,
+		disabled: n,
+		onClick: () => t(!e),
+		className: `relative inline-flex h-3 w-6 shrink-0 items-center rounded-full transition-colors ${e ? "bg-success/60" : "bg-foreground-subtle/30"} ${n ? "opacity-50 cursor-wait" : "cursor-pointer"}`,
+		title: e ? "Pre-buffer enabled — click to disable" : "Pre-buffer disabled — click to enable",
+		children: /* @__PURE__ */ g("span", { className: `inline-block h-2.5 w-2.5 rounded-full bg-white shadow transition-transform ${e ? "translate-x-3" : "translate-x-0.5"}` })
+	});
 }
-function ve({ count: s, clients: n, onKill: o }) {
-  const i = n?.rtsp ?? [], c = i.length > 0, t = /* @__PURE__ */ e("span", { className: `text-foreground ${c ? "underline decoration-dotted decoration-foreground-subtle/50 underline-offset-2 cursor-help" : ""}`, children: s });
-  if (!c) return t;
-  const l = /* @__PURE__ */ r(B, { children: [
-    /* @__PURE__ */ e("div", { className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1", children: "RTSP sessions" }),
-    i.map((d) => {
-      const u = Date.now() - d.lastRtpAt, a = u > 5e3;
-      return /* @__PURE__ */ r("div", { className: "py-1 border-b border-border/40 last:border-b-0", children: [
-        /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ e("span", { className: "text-foreground font-mono", children: d.remoteAddr }),
-          /* @__PURE__ */ r("span", { className: "flex items-center gap-1 shrink-0", children: [
-            /* @__PURE__ */ r("span", { className: `text-[9px] px-1 rounded ${d.playing ? a ? "bg-amber-400/10 text-amber-400" : "bg-success/10 text-success" : "bg-foreground-subtle/10 text-foreground-subtle"}`, children: [
-              d.playing ? a ? "stalled" : "playing" : "paused",
-              d.muted && " · muted"
-            ] }),
-            o && /* @__PURE__ */ e(C, { onClick: () => o({ channel: "rtsp", handle: d.sessionId }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2 text-foreground-subtle text-[9px] mt-0.5", children: [
-          /* @__PURE__ */ r("span", { children: [
-            U(d.bytesSent),
-            " sent"
-          ] }),
-          /* @__PURE__ */ r("span", { children: [
-            "connected ",
-            g(Date.now() - d.connectedAt),
-            " ago"
-          ] }),
-          /* @__PURE__ */ r("span", { children: [
-            "last rtp ",
-            g(u),
-            " ago"
-          ] })
-        ] })
-      ] }, d.sessionId);
-    })
-  ] });
-  return /* @__PURE__ */ e(K, { trigger: t, content: l, widthClass: "min-w-[300px] max-w-[420px]" });
+function $({ onClick: e }) {
+	return /* @__PURE__ */ g("button", {
+		type: "button",
+		title: "Force-disconnect this client",
+		onClick: (t) => {
+			t.stopPropagation(), e();
+		},
+		className: "inline-flex items-center justify-center h-4 w-4 rounded-sm border border-border/60 text-foreground-subtle hover:bg-red-500/10 hover:text-red-400 hover:border-red-500/40 transition-colors",
+		children: /* @__PURE__ */ g(ne, { className: "h-2.5 w-2.5" })
+	});
 }
-const $e = {
-  "stream-broker-panel": ue
-};
-export {
-  $e as default
+function Te({ count: e, clients: t, onKill: n }) {
+	let r = t?.rtsp ?? [], i = r.length > 0, a = /* @__PURE__ */ g("span", {
+		className: `text-foreground ${i ? "underline decoration-dotted decoration-foreground-subtle/50 underline-offset-2 cursor-help" : ""}`,
+		children: e
+	});
+	return i ? /* @__PURE__ */ g(Y, {
+		trigger: a,
+		content: /* @__PURE__ */ _(v, { children: [/* @__PURE__ */ g("div", {
+			className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1",
+			children: "RTSP sessions"
+		}), r.map((e) => {
+			let t = Date.now() - e.lastRtpAt, r = t > 5e3;
+			return /* @__PURE__ */ _("div", {
+				className: "py-1 border-b border-border/40 last:border-b-0",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ g("span", {
+						className: "text-foreground font-mono",
+						children: e.remoteAddr
+					}), /* @__PURE__ */ _("span", {
+						className: "flex items-center gap-1 shrink-0",
+						children: [/* @__PURE__ */ _("span", {
+							className: `text-[9px] px-1 rounded ${e.playing ? r ? "bg-amber-400/10 text-amber-400" : "bg-success/10 text-success" : "bg-foreground-subtle/10 text-foreground-subtle"}`,
+							children: [e.playing ? r ? "stalled" : "playing" : "paused", e.muted && " · muted"]
+						}), n && /* @__PURE__ */ g($, { onClick: () => n({
+							channel: "rtsp",
+							handle: e.sessionId
+						}) })]
+					})]
+				}), /* @__PURE__ */ _("div", {
+					className: "flex items-center justify-between gap-2 text-foreground-subtle text-[9px] mt-0.5",
+					children: [
+						/* @__PURE__ */ _("span", { children: [Z(e.bytesSent), " sent"] }),
+						/* @__PURE__ */ _("span", { children: [
+							"connected ",
+							X(Date.now() - e.connectedAt),
+							" ago"
+						] }),
+						/* @__PURE__ */ _("span", { children: [
+							"last rtp ",
+							X(t),
+							" ago"
+						] })
+					]
+				})]
+			}, e.sessionId);
+		})] }),
+		widthClass: "min-w-[300px] max-w-[420px]"
+	}) : a;
+}
+//#endregion
+//#region src/stream-broker/widgets/index.tsx
+var Ee = {
+	"stream-broker-panel": _e,
+	"ffmpeg-params": ue
 };
+//#endregion
+export { Ee as default };