@camstack/addon-pipeline 1.1.21 → 1.1.22

package/dist/stream-broker/_stub.js

@@ -1,8 +1,8 @@
-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-C0QtG7oR.mjs";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./_virtual_mf___mfe_internal__addon_stream_broker_widgets__loadShare___mf_0_camstack_mf_1_ui_mf_2_library__loadShare__.js-BC1Jt6G8.mjs";
+import { a as u, i as d, n as f, o as p, r as m, t as h } from "./_virtual_mf___mfe_internal__addon_stream_broker_widgets__loadShare__react__loadShare__.js-C9j-2lBe.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-BSWrW78G.mjs";
+import { t as x } from "./_virtual_mf___mfe_internal__addon_stream_broker_widgets__loadShare___mf_0_camstack_mf_1_types__loadShare__.js-BFeBlYRQ.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);
@@ -19,37 +19,37 @@ var S = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), C = (e) =
 	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,
+}, O = f(({ color: e = "currentColor", size: t = 24, strokeWidth: n = 2, absoluteStrokeWidth: r, className: i = "", children: a, iconNode: o, ...s }, c) => h("svg", {
+	ref: c,
 	...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, {
+	...!a && !E(s) && { "aria-hidden": "true" },
+	...s
+}, [...o.map(([e, t]) => h(e, t)), ...Array.isArray(a) ? a : [a]])), k = (e, t) => {
+	let n = f(({ className: n, ...r }, i) => h(O, {
 		ref: i,
 		iconNode: t,
 		className: T(`lucide-${S(w(e))}`, `lucide-${e}`, n),
 		...r
 	}));
-	return r.displayName = w(e), r;
+	return n.displayName = w(e), n;
 }, 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", {
+}]]), M = k("plus", [["path", {
 	d: "M5 12h14",
 	key: "1ays0h"
 }], ["path", {
 	d: "M12 5v14",
 	key: "s699le"
-}]]), te = k("radio", [
+}]]), ee = k("radio", [
 	["path", {
 		d: "M4.9 19.1C1 15.2 1 8.8 4.9 4.9",
 		key: "1vaf9d"
@@ -72,7 +72,7 @@ var S = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), C = (e) =
 		d: "M19.1 4.9C23 8.8 23 15.1 19.1 19",
 		key: "10b0cb"
 	}]
-]), ne = k("x", [["path", {
+]), te = k("x", [["path", {
 	d: "M18 6 6 18",
 	key: "1bl5f8"
 }], ["path", {
@@ -81,7 +81,7 @@ var S = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), C = (e) =
 }]]);
 //#endregion
 //#region src/stream-broker/widgets/GeometryBuilder.tsx
-function re(e) {
+function ne(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(":", "/");
@@ -89,7 +89,7 @@ function re(e) {
 	}
 	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) {
+function re(e, t) {
 	let n = [];
 	for (let t = 0; t < e.length; t++) {
 		if (e[t] === "-vf") {
@@ -101,16 +101,16 @@ function ie(e, t) {
 	}
 	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((() => {
+var N = "text-[11px] uppercase tracking-wider text-foreground-subtle font-medium";
+function ie({ outputArgs: e, onChange: t }) {
+	let [n, r] = p(""), [i, a] = p("pad"), [o, s] = p("1920"), [c, l] = p("1080"), [u, d] = p(!1), [f, m] = p("0"), [h, y] = p("0"), [b, x] = p("0"), [S, C] = p("0"), [w, T] = p(0), [E, D] = p(!1), [O, k] = p(!1), A = ne((() => {
 		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),
+		return n !== "" && (e.targetAspect = n, e.mode = i, e.width = Number(o), e.height = Number(c)), u && (e.crop = {
+			x: Number(f),
 			y: Number(h),
 			w: Number(b),
 			h: Number(S)
@@ -122,14 +122,14 @@ function ae({ outputArgs: e, onChange: t }) {
 			/* @__PURE__ */ _("div", {
 				className: "flex items-center justify-between",
 				children: [/* @__PURE__ */ _("span", {
-					className: M,
+					className: N,
 					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)),
+					onClick: () => t(re(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"
 				})]
@@ -138,14 +138,14 @@ function ae({ outputArgs: e, onChange: t }) {
 				className: "flex flex-wrap items-center gap-2",
 				children: [
 					/* @__PURE__ */ g("label", {
-						className: M,
+						className: N,
 						htmlFor: "geom-aspect",
 						children: "Aspect"
 					}),
 					/* @__PURE__ */ _("select", {
 						id: "geom-aspect",
 						value: n,
-						onChange: (e) => i(e.target.value),
+						onChange: (e) => r(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", {
@@ -169,8 +169,8 @@ function ae({ outputArgs: e, onChange: t }) {
 					n !== "" && /* @__PURE__ */ _(v, { children: [
 						/* @__PURE__ */ _("select", {
 							"aria-label": "Aspect mode",
-							value: a,
-							onChange: (e) => o(e.target.value),
+							value: i,
+							onChange: (e) => a(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",
@@ -183,8 +183,8 @@ function ae({ outputArgs: e, onChange: t }) {
 						/* @__PURE__ */ g("input", {
 							type: "number",
 							"aria-label": "Aspect width",
-							value: s,
-							onChange: (e) => c(e.target.value),
+							value: o,
+							onChange: (e) => s(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", {
@@ -194,8 +194,8 @@ function ae({ outputArgs: e, onChange: t }) {
 						/* @__PURE__ */ g("input", {
 							type: "number",
 							"aria-label": "Aspect height",
-							value: l,
-							onChange: (e) => u(e.target.value),
+							value: c,
+							onChange: (e) => l(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"
 						})
 					] })
@@ -207,14 +207,14 @@ function ae({ outputArgs: e, onChange: t }) {
 					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)
+						checked: u,
+						onChange: (e) => d(e.target.checked)
 					}), "Crop / zoom"]
-				}), d && /* @__PURE__ */ _(v, { children: [
+				}), u && /* @__PURE__ */ _(v, { children: [
 					/* @__PURE__ */ g("input", {
 						type: "number",
 						"aria-label": "Crop x",
-						value: p,
+						value: f,
 						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"
@@ -249,7 +249,7 @@ function ae({ outputArgs: e, onChange: t }) {
 				className: "flex flex-wrap items-center gap-2",
 				children: [
 					/* @__PURE__ */ g("label", {
-						className: M,
+						className: N,
 						htmlFor: "geom-rotate",
 						children: "Rotate"
 					}),
@@ -307,7 +307,7 @@ function ae({ outputArgs: e, onChange: t }) {
 }
 //#endregion
 //#region src/stream-broker/widgets/FfmpegParamsField.tsx
-var oe = [
+var ae = [
 	{
 		group: "Demuxer",
 		label: "-thread_queue_size 1024",
@@ -349,8 +349,20 @@ var oe = [
 		label: "-stimeout 5000000",
 		args: ["-stimeout", "5000000"],
 		description: "Socket I/O timeout (microseconds, 5s)"
+	},
+	{
+		group: "Timestamps",
+		label: "-use_wallclock_as_timestamps 1",
+		args: ["-use_wallclock_as_timestamps", "1"],
+		description: "Rewrite timestamps from wall-clock (fixes non-monotonic cloud sources)"
+	},
+	{
+		group: "Timestamps",
+		label: "-fflags +genpts+igndts",
+		args: ["-fflags", "+genpts+igndts"],
+		description: "Generate PTS + ignore DTS"
 	}
-], N = [
+], oe = [
 	{
 		group: "Muxer",
 		label: "-flush_packets 1",
@@ -422,56 +434,74 @@ var oe = [
 		label: "-copyts",
 		args: ["-copyts"],
 		description: "Preserve source timestamps"
+	},
+	{
+		group: "Timestamps",
+		label: "-avoid_negative_ts make_zero",
+		args: ["-avoid_negative_ts", "make_zero"],
+		description: "Shift timestamps so they start at zero"
+	},
+	{
+		group: "Audio",
+		label: "-af aresample=async=1",
+		args: ["-af", "aresample=async=1"],
+		description: "Resample audio to correct drift / gaps"
+	},
+	{
+		group: "Muxer",
+		label: "-muxdelay 0",
+		args: ["-muxdelay", "0"],
+		description: "No mux buffering delay"
 	}
 ], 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) => ({
+function ce({ config: e, value: t, onSave: n }) {
+	let [r, i] = p(!1), a = e.argsOnly === !0, o = t ?? se, [s, c] = p(() => (o.inputArgs ?? []).join("\n")), [l, d] = p(() => (o.outputArgs ?? []).join("\n")), f = u(o);
+	f.current !== o && (f.current = o, c((o.inputArgs ?? []).join("\n")), d((o.outputArgs ?? []).join("\n")));
+	let m = (e) => {
+		n(e(o));
+	}, h = (e) => m((t) => ({
 		...t,
 		video: {
 			...t.video,
 			codec: e
 		}
-	})), h = (e) => p((t) => ({
+	})), y = (e) => m((t) => ({
 		...t,
 		video: {
 			...t.video,
 			width: e
 		}
-	})), y = (e) => p((t) => ({
+	})), b = (e) => m((t) => ({
 		...t,
 		video: {
 			...t.video,
 			height: e
 		}
-	})), b = (e) => p((t) => ({
+	})), x = (e) => m((t) => ({
 		...t,
 		video: {
 			...t.video,
 			fps: e
 		}
-	})), x = (e) => p((t) => ({
+	})), S = (e) => m((t) => ({
 		...t,
 		video: {
 			...t.video,
 			bitrateKbps: e
 		}
-	})), S = () => p((e) => ({
+	})), C = () => m((e) => ({
 		...e,
 		audio: "passthrough"
-	})), C = (e) => p((t) => ({
+	})), w = (e) => m((t) => ({
 		...t,
 		audio: typeof t.audio == "object" ? {
 			...t.audio,
 			codec: e
 		} : { codec: e }
-	})), w = (e) => p((t) => ({
+	})), T = (e) => m((t) => ({
 		...t,
 		audio: typeof t.audio == "object" ? {
 			...t.audio,
@@ -480,26 +510,76 @@ function ce({ config: t, value: n, onSave: i }) {
 			codec: "opus",
 			bitrateKbps: e
 		}
-	})), T = (e) => p((t) => ({
+	})), E = (e) => m((t) => ({
 		...t,
 		inputArgs: e.split("\n").map((e) => e.trim()).filter((e) => e.length > 0)
-	})), E = (e) => p((t) => ({
+	})), D = (e) => m((t) => ({
 		...t,
 		outputArgs: e.split("\n").map((e) => e.trim()).filter((e) => e.length > 0)
-	})), D = (e, t) => {
+	})), O = (e, t) => {
 		let n = t.args.join(" ");
 		if (e === "input") {
-			let e = c.length === 0 ? n : `${c}\n${n}`;
-			l(e), T(e);
+			let e = s.length === 0 ? n : `${s}\n${n}`;
+			c(e), E(e);
 		} else {
-			let e = u.length === 0 ? n : `${u}\n${n}`;
-			d(e), E(e);
+			let e = l.length === 0 ? n : `${l}\n${n}`;
+			d(e), D(e);
 		}
-	};
+	}, k = /* @__PURE__ */ _("div", {
+		className: "space-y-1.5",
+		children: [/* @__PURE__ */ _("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ _("label", {
+				htmlFor: `${e.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: `${e.fieldKey}-input-picker`,
+				disabled: !1,
+				catalogue: ae,
+				onPick: (e) => O("input", e)
+			})]
+		}), /* @__PURE__ */ g("textarea", {
+			id: `${e.fieldKey}-input-args`,
+			value: s,
+			onChange: (e) => c(e.target.value),
+			onBlur: (e) => E(e.target.value),
+			placeholder: "-thread_queue_size 1024",
+			className: P
+		})]
+	}), M = /* @__PURE__ */ _("div", {
+		className: "space-y-1.5",
+		children: [/* @__PURE__ */ _("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ _("label", {
+				htmlFor: `${e.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: `${e.fieldKey}-output-picker`,
+				disabled: !1,
+				catalogue: oe,
+				onPick: (e) => O("output", e)
+			})]
+		}), /* @__PURE__ */ g("textarea", {
+			id: `${e.fieldKey}-output-args`,
+			value: l,
+			onChange: (e) => d(e.target.value),
+			onBlur: (e) => D(e.target.value),
+			placeholder: "-bsf:v h264_mp4toannexb",
+			className: P
+		})]
+	});
 	return /* @__PURE__ */ _("div", {
 		className: "space-y-3",
 		children: [
-			t.sourceParams !== void 0 && /* @__PURE__ */ _("div", {
+			e.sourceParams !== void 0 && /* @__PURE__ */ _("div", {
 				className: L,
 				children: [/* @__PURE__ */ _("div", {
 					className: R,
@@ -512,10 +592,10 @@ function ce({ config: t, value: n, onSave: i }) {
 					})]
 				}), /* @__PURE__ */ g("div", {
 					className: "px-3 py-2 flex flex-wrap gap-1.5",
-					children: /* @__PURE__ */ g(le, { profile: t.sourceParams })
+					children: /* @__PURE__ */ g(le, { profile: e.sourceParams })
 				})]
 			}),
-			/* @__PURE__ */ g("div", {
+			!a && /* @__PURE__ */ g("div", {
 				className: "@container",
 				children: /* @__PURE__ */ _("div", {
 					className: "grid grid-cols-1 @[480px]:grid-cols-2 gap-3",
@@ -532,13 +612,13 @@ function ce({ config: t, value: n, onSave: i }) {
 							children: [/* @__PURE__ */ _("div", {
 								className: F,
 								children: [/* @__PURE__ */ g("label", {
-									htmlFor: `${t.fieldKey}-video-codec`,
+									htmlFor: `${e.fieldKey}-video-codec`,
 									className: I,
 									children: "Codec"
 								}), /* @__PURE__ */ _("select", {
-									id: `${t.fieldKey}-video-codec`,
-									value: s.video.codec,
-									onChange: (e) => m(e.target.value),
+									id: `${e.fieldKey}-video-codec`,
+									value: o.video.codec,
+									onChange: (e) => h(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", {
@@ -555,61 +635,61 @@ function ce({ config: t, value: n, onSave: i }) {
 										})
 									]
 								})]
-							}), s.video.codec !== "copy" && /* @__PURE__ */ _(v, { children: [
+							}), o.video.codec !== "copy" && /* @__PURE__ */ _(v, { children: [
 								/* @__PURE__ */ _("div", {
 									className: F,
 									children: [/* @__PURE__ */ g("label", {
-										htmlFor: `${t.fieldKey}-video-width`,
+										htmlFor: `${e.fieldKey}-video-width`,
 										className: I,
 										children: "Width"
 									}), /* @__PURE__ */ g("input", {
-										id: `${t.fieldKey}-video-width`,
+										id: `${e.fieldKey}-video-width`,
 										type: "number",
 										"aria-label": "Width",
-										value: s.video.width ?? "",
-										onChange: (e) => h(Number(e.target.value)),
+										value: o.video.width ?? "",
+										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-height`,
+										htmlFor: `${e.fieldKey}-video-height`,
 										className: I,
 										children: "Height"
 									}), /* @__PURE__ */ g("input", {
-										id: `${t.fieldKey}-video-height`,
+										id: `${e.fieldKey}-video-height`,
 										type: "number",
-										value: s.video.height ?? "",
-										onChange: (e) => y(Number(e.target.value)),
+										value: o.video.height ?? "",
+										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-fps`,
+										htmlFor: `${e.fieldKey}-video-fps`,
 										className: I,
 										children: "FPS"
 									}), /* @__PURE__ */ g("input", {
-										id: `${t.fieldKey}-video-fps`,
+										id: `${e.fieldKey}-video-fps`,
 										type: "number",
-										value: s.video.fps ?? "",
-										onChange: (e) => b(Number(e.target.value)),
+										value: o.video.fps ?? "",
+										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: F,
 									children: [/* @__PURE__ */ g("label", {
-										htmlFor: `${t.fieldKey}-video-bitrate`,
+										htmlFor: `${e.fieldKey}-video-bitrate`,
 										className: I,
 										children: "Bitrate (kbps)"
 									}), /* @__PURE__ */ g("input", {
-										id: `${t.fieldKey}-video-bitrate`,
+										id: `${e.fieldKey}-video-bitrate`,
 										type: "number",
-										value: s.video.bitrateKbps ?? "",
-										onChange: (e) => x(Number(e.target.value)),
+										value: o.video.bitrateKbps ?? "",
+										onChange: (e) => S(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"
 									})]
 								})
@@ -625,14 +705,14 @@ function ce({ config: t, value: n, onSave: i }) {
 							})
 						}), /* @__PURE__ */ g("div", {
 							className: "px-3 py-2",
-							children: s.audio === "passthrough" ? /* @__PURE__ */ _("div", {
+							children: o.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"),
+									onClick: () => w("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"
 								})]
@@ -642,13 +722,13 @@ function ce({ config: t, value: n, onSave: i }) {
 									/* @__PURE__ */ _("div", {
 										className: F,
 										children: [/* @__PURE__ */ g("label", {
-											htmlFor: `${t.fieldKey}-audio-codec`,
+											htmlFor: `${e.fieldKey}-audio-codec`,
 											className: I,
 											children: "Codec"
 										}), /* @__PURE__ */ _("select", {
-											id: `${t.fieldKey}-audio-codec`,
-											value: s.audio.codec,
-											onChange: (e) => C(e.target.value),
+											id: `${e.fieldKey}-audio-codec`,
+											value: o.audio.codec,
+											onChange: (e) => w(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", {
@@ -677,14 +757,14 @@ function ce({ config: t, value: n, onSave: i }) {
 									/* @__PURE__ */ _("div", {
 										className: F,
 										children: [/* @__PURE__ */ g("label", {
-											htmlFor: `${t.fieldKey}-audio-bitrate`,
+											htmlFor: `${e.fieldKey}-audio-bitrate`,
 											className: I,
 											children: "Bitrate (kbps)"
 										}), /* @__PURE__ */ g("input", {
-											id: `${t.fieldKey}-audio-bitrate`,
+											id: `${e.fieldKey}-audio-bitrate`,
 											type: "number",
-											value: s.audio.bitrateKbps ?? "",
-											onChange: (e) => w(Number(e.target.value)),
+											value: o.audio.bitrateKbps ?? "",
+											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 read-only:opacity-60 read-only:cursor-not-allowed w-24 text-right"
 										})]
 									}),
@@ -692,7 +772,7 @@ function ce({ config: t, value: n, onSave: i }) {
 										className: "pt-2",
 										children: /* @__PURE__ */ g("button", {
 											type: "button",
-											onClick: S,
+											onClick: C,
 											className: "text-[11px] text-foreground-subtle hover:text-foreground underline-offset-2 hover:underline",
 											children: "Switch back to passthrough"
 										})
@@ -703,80 +783,54 @@ function ce({ config: t, value: n, onSave: i }) {
 					})]
 				})
 			}),
-			/* @__PURE__ */ _("div", {
+			a ? /* @__PURE__ */ _(v, { children: [/* @__PURE__ */ _("div", {
+				className: L,
+				children: [/* @__PURE__ */ g("div", {
+					className: R,
+					children: /* @__PURE__ */ g("h3", {
+						className: z,
+						children: "Input args"
+					})
+				}), /* @__PURE__ */ g("div", {
+					className: "px-3 py-2",
+					children: k
+				})]
+			}), /* @__PURE__ */ _("div", {
+				className: L,
+				children: [/* @__PURE__ */ g("div", {
+					className: R,
+					children: /* @__PURE__ */ g("h3", {
+						className: z,
+						children: "Output args"
+					})
+				}), /* @__PURE__ */ g("div", {
+					className: "px-3 py-2",
+					children: M
+				})]
+			})] }) : /* @__PURE__ */ _("div", {
 				className: L,
 				children: [/* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: () => o((e) => !e),
+					onClick: () => i((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"]
+						children: [g(r ? 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"]
+						children: [(o.inputArgs?.length ?? 0) + (o.outputArgs?.length ?? 0), " args"]
 					})]
-				}), a && /* @__PURE__ */ _("div", {
+				}), r && /* @__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: oe,
-									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 ?? [],
+						k,
+						/* @__PURE__ */ g(ie, {
+							outputArgs: o.outputArgs ?? [],
 							onChange: (e) => {
-								d(e.join("\n")), E(e.join("\n"));
+								d(e.join("\n")), D(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: N,
-									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
-							})]
-						})
+						M
 					]
 				})]
 			})
@@ -865,17 +919,17 @@ function le({ profile: e }) {
 	] });
 }
 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) {
+	let t = e.config ?? {}, n = c(), [r, i] = p(() => t.initialValue), a = m((r) => {
+		if (i(r), e.deviceId === void 0) return;
+		let a = t.writerCapName, o = t.writerAddonId, s = t.fieldKey;
+		if (a === void 0 || o === 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,
+			writerCapName: a,
+			writerAddonId: o,
 			key: s,
 			value: r ?? null
 		});
@@ -890,45 +944,45 @@ function ue(e) {
 		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", {
+	let o = t.fieldKey;
+	return o === void 0 || o.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
+			fieldKey: o
 		},
-		value: a,
-		onSave: s
+		value: r,
+		onSave: a
 	});
 }
-function B({ id: e, disabled: n, catalogue: i, onPick: a }) {
-	let [o, s] = r(!1), c = t(() => {
+function B({ id: e, disabled: t, catalogue: n, onPick: r }) {
+	let [i, a] = p(!1), o = d(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of i) {
+		for (let t of n) {
 			let n = e.get(t.group) ?? [];
 			n.push(t), e.set(t.group, n);
 		}
 		return e;
-	}, [i]);
+	}, [n]);
 	return /* @__PURE__ */ _("div", {
 		className: "relative",
 		children: [/* @__PURE__ */ _("button", {
 			id: e,
 			type: "button",
-			disabled: n,
-			onClick: () => s((e) => !e),
+			disabled: t,
+			onClick: () => a((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", {
+			children: [/* @__PURE__ */ g(M, { className: "h-3 w-3" }), "Add flag…"]
+		}), i && !t && /* @__PURE__ */ _(v, { children: [/* @__PURE__ */ g("div", {
 			className: "fixed inset-0 z-40",
-			onClick: () => s(!1),
+			onClick: () => a(!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", {
+			children: Array.from(o.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",
@@ -936,7 +990,7 @@ function B({ id: e, disabled: n, catalogue: i, onPick: a }) {
 				}), t.map((e) => /* @__PURE__ */ _("button", {
 					type: "button",
 					onClick: () => {
-						a(e), s(!1);
+						r(e), a(!1);
 					},
 					className: "w-full text-left px-2 py-1.5 hover:bg-surface-hover transition-colors group",
 					children: [/* @__PURE__ */ g("div", {
@@ -982,7 +1036,7 @@ var U = {
 	"high",
 	"mid",
 	"low"
-], G = {
+], 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",
@@ -995,7 +1049,7 @@ var U = {
 	snapshot: "bg-cyan-500/15 text-cyan-400",
 	warmup: "bg-foreground-subtle/10 text-foreground-subtle",
 	unknown: "bg-foreground-subtle/10 text-foreground-subtle"
-}, K = {
+}, G = {
 	alexa: "ALEXA",
 	homekit: "HOMEKIT",
 	"webrtc-browser": "BROWSER",
@@ -1009,48 +1063,48 @@ var U = {
 	warmup: "WARMUP",
 	unknown: "—"
 };
-function me(e) {
-	return K[e] ?? e.toUpperCase().slice(0, 8);
-}
 function he(e) {
-	return K[e] ?? e;
+	return G[e] ?? e.toUpperCase().slice(0, 8);
 }
 function ge(e) {
+	return G[e] ?? e;
+}
+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(_e, {
+	}) : /* @__PURE__ */ g(ve, {
 		deviceId: e.deviceId,
 		title: t.title,
 		variant: t.variant,
 		hideEmpty: t.hideEmpty
 	});
 }
-function _e({ deviceId: e, title: t = "Stream Brokers", variant: n = "full", hideEmpty: r = !1 }) {
-	f(["streamBroker", "listAllProfileSlots"], [
+function ve({ deviceId: e, title: n = "Stream Brokers", variant: r = "full", hideEmpty: a = !1 }) {
+	o(["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({
+	let { data: s } = t(void 0, { staleTime: 3e4 }), c = (s ?? []).filter((t) => t.deviceId === e && t.sourceCamStreamId !== null).slice().toSorted((e, t) => W.indexOf(e.profile) - W.indexOf(t.profile)), u = i(l().trpcClient, e), { data: d } = b({
 		queryKey: [
 			"device",
 			e,
 			"cameraStreams.getCameraStreams"
 		],
-		queryFn: () => o?.cameraStreams?.getCameraStreams({}) ?? [],
-		enabled: !!o,
+		queryFn: () => u?.cameraStreams?.getCameraStreams({}) ?? [],
+		enabled: !!u,
 		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", {
+	}), f = /* @__PURE__ */ new Map();
+	for (let e of d ?? []) f.set(e.camStreamId, e);
+	let p = new Set(c.map((e) => e.sourceCamStreamId).filter((e) => e !== null)), m = (d ?? []).filter((e) => !p.has(e.camStreamId)), h = c.length > 0, v = m.length > 0;
+	return a && !h && !v ? null : r === "compact" ? h ? /* @__PURE__ */ g("div", {
 		className: "divide-y divide-border/30",
-		children: a.map((e) => /* @__PURE__ */ g(J, {
+		children: c.map((e) => /* @__PURE__ */ g(q, {
 			slot: e,
-			camStreams: l,
+			camStreams: f,
 			compact: !0
 		}, e.brokerId))
 	}) : /* @__PURE__ */ g("div", {
@@ -1063,52 +1117,52 @@ function _e({ deviceId: e, title: t = "Stream Brokers", variant: n = "full", hid
 				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", {
+					children: n
+				}), h && /* @__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"]
+					children: [c.length, " assigned"]
 				})]
 			}),
-			m ? /* @__PURE__ */ g("div", {
+			h ? /* @__PURE__ */ g("div", {
 				className: "divide-y divide-border/30",
-				children: a.map((e) => /* @__PURE__ */ g(J, {
+				children: c.map((e) => /* @__PURE__ */ g(q, {
 					slot: e,
-					camStreams: l,
+					camStreams: f,
 					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", {
+				children: [/* @__PURE__ */ g(ee, { 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(ve, {
+			v && /* @__PURE__ */ g(ye, {
 				deviceId: e,
-				camStreamIds: p.map((e) => e.camStreamId),
-				camStreams: l
+				camStreamIds: m.map((e) => e.camStreamId),
+				camStreams: f
 			})
 		]
 	});
 }
-function ve({ deviceId: e, camStreamIds: t, camStreams: n }) {
-	let [i, a] = r(!1);
+function ye({ deviceId: e, camStreamIds: t, camStreams: n }) {
+	let [r, i] = p(!1);
 	return /* @__PURE__ */ _("div", {
 		className: "border-t border-border/50",
 		children: [/* @__PURE__ */ _("button", {
 			type: "button",
-			onClick: () => a((e) => !e),
+			onClick: () => i((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"]
+				children: [g(r ? 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", {
+		}), r && /* @__PURE__ */ g("div", {
 			className: "divide-y divide-border/30",
-			children: t.map((t) => /* @__PURE__ */ g(ye, {
+			children: t.map((t) => /* @__PURE__ */ g(be, {
 				deviceId: e,
 				camStreamId: t,
 				camStreams: n
@@ -1116,8 +1170,8 @@ function ve({ deviceId: e, camStreamIds: t, camStreams: n }) {
 		})]
 	});
 }
-function ye({ 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";
+function be({ deviceId: e, camStreamId: t, camStreams: r }) {
+	let i = x(e, t), a = n("stream-broker.metrics-snapshot", (e) => e.brokerId === i)?.stats, o = r.get(t), s = a?.status === "streaming";
 	return /* @__PURE__ */ _("div", {
 		className: "px-4 py-2",
 		children: [/* @__PURE__ */ g("div", {
@@ -1125,26 +1179,26 @@ function ye({ deviceId: e, camStreamId: t, camStreams: n }) {
 			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: `h-1.5 w-1.5 rounded-full ${s ? "bg-success" : "bg-foreground-subtle/40"}` }),
 					/* @__PURE__ */ g("span", {
 						className: "text-[11px] font-medium text-foreground",
-						children: a?.label ?? t
+						children: o?.label ?? t
 					}),
-					a?.resolution && /* @__PURE__ */ _("span", {
+					o?.resolution && /* @__PURE__ */ _("span", {
 						className: "text-[10px] text-foreground-subtle",
 						children: [
-							a.resolution.width,
+							o.resolution.width,
 							"×",
-							a.resolution.height
+							o.resolution.height
 						]
 					}),
 					/* @__PURE__ */ g("span", {
-						className: `text-[10px] ${o ? "text-success" : "text-foreground-subtle"}`,
-						children: i?.status ?? "idle"
+						className: `text-[10px] ${s ? "text-success" : "text-foreground-subtle"}`,
+						children: a?.status ?? "idle"
 					})
 				]
 			})
-		}), i && o && /* @__PURE__ */ _("div", {
+		}), a && s && /* @__PURE__ */ _("div", {
 			className: "flex flex-wrap gap-x-3 gap-y-1 text-[10px]",
 			children: [
 				/* @__PURE__ */ _("span", {
@@ -1154,7 +1208,7 @@ function ye({ deviceId: e, camStreamId: t, camStreams: n }) {
 						children: "FPS:"
 					}), /* @__PURE__ */ g("span", {
 						className: "text-foreground",
-						children: i.inputFps.toFixed(1)
+						children: a.inputFps.toFixed(1)
 					})]
 				}),
 				/* @__PURE__ */ _("span", {
@@ -1164,7 +1218,7 @@ function ye({ deviceId: e, camStreamId: t, camStreams: n }) {
 						children: "Bitrate:"
 					}), /* @__PURE__ */ g("span", {
 						className: "text-foreground",
-						children: i.bitrateKbps >= 1e3 ? `${(i.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${i.bitrateKbps} kbps`
+						children: a.bitrateKbps >= 1e3 ? `${(a.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${a.bitrateKbps} kbps`
 					})]
 				}),
 				/* @__PURE__ */ _("span", {
@@ -1174,7 +1228,7 @@ function ye({ deviceId: e, camStreamId: t, camStreams: n }) {
 						children: "Codec:"
 					}), /* @__PURE__ */ g("span", {
 						className: "text-foreground",
-						children: i.codec?.toUpperCase() ?? "—"
+						children: a.codec?.toUpperCase() ?? "—"
 					})]
 				}),
 				/* @__PURE__ */ _("span", {
@@ -1184,14 +1238,14 @@ function ye({ deviceId: e, camStreamId: t, camStreams: n }) {
 						children: "Pkts:"
 					}), /* @__PURE__ */ g("span", {
 						className: "text-foreground",
-						children: i.packetCount > 1e3 ? `${(i.packetCount / 1e3).toFixed(1)}k` : i.packetCount
+						children: a.packetCount > 1e3 ? `${(a.packetCount / 1e3).toFixed(1)}k` : a.packetCount
 					})]
 				})
 			]
 		})]
 	});
 }
-function q(e, t) {
+function K(e, t) {
 	let n = (e) => {
 		if (!e || typeof e != "object") return;
 		let r = e;
@@ -1212,29 +1266,29 @@ function q(e, t) {
 		if (t !== void 0) return t;
 	}
 }
-function J({ 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",
+function q({ slot: t, camStreams: i, compact: c }) {
+	let l = y(), u = n("stream-broker.metrics-snapshot", (e) => e.brokerId === t.brokerId)?.stats;
+	o(["streamBroker", "listClients"], ["stream-broker.metrics-snapshot"]);
+	let { data: d } = r({ brokerId: t.brokerId }, {
+		enabled: u?.status === "streaming",
 		staleTime: 2e3
-	}), { data: u } = d({ deviceId: e.deviceId }, { staleTime: 15e3 }), m = e.sourceCamStreamId ?? e.profile, h = !!(q(u, `preBufferEnabled:${m}`) ?? !0), b = q(u, `preBufferSec:${m}`), x = o({ onSuccess: () => {
-		r.invalidateQueries({ queryKey: [["streamBroker", "getDeviceSettingsContribution"]] });
-	} }), S = (t) => {
+	}), { data: f } = a({ deviceId: t.deviceId }, { staleTime: 15e3 }), p = t.sourceCamStreamId ?? t.profile, h = !!(K(f, `preBufferEnabled:${p}`) ?? !0), b = K(f, `preBufferSec:${p}`), x = e({ onSuccess: () => {
+		l.invalidateQueries({ queryKey: [["streamBroker", "getDeviceSettingsContribution"]] });
+	} }), S = (e) => {
 		x.mutate({
-			deviceId: e.deviceId,
-			patch: { [`preBufferEnabled:${m}`]: t }
+			deviceId: t.deviceId,
+			patch: { [`preBufferEnabled:${p}`]: e }
 		});
-	}, C = p({ onSuccess: () => {
-		r.invalidateQueries({ queryKey: [["streamBroker", "listClients"]] });
-	} }), w = i((t) => {
+	}, C = s({ onSuccess: () => {
+		l.invalidateQueries({ queryKey: [["streamBroker", "listClients"]] });
+	} }), w = m((e) => {
 		C.mutate({
-			brokerId: e.brokerId,
-			...t
+			brokerId: t.brokerId,
+			...e
 		});
-	}, [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;
+	}, [C, t.brokerId]), T = (t.sourceCamStreamId ? i.get(t.sourceCamStreamId) : void 0)?.resolution ?? t.resolution, E = u?.status === "streaming", D = T ? `${U[t.profile]} (${T.width}×${T.height})` : U[t.profile], O = u ? u.encodedSubscribers + u.decodedSubscribers + (u.rtspClients ?? 0) + (u.pipeClients ?? 0) : 0;
 	return /* @__PURE__ */ _("div", {
-		className: `@container ${n ? "px-3 py-1.5" : "px-4 py-2"}`,
+		className: `@container ${c ? "px-3 py-1.5" : "px-4 py-2"}`,
 		style: { containerType: "inline-size" },
 		children: [
 			/* @__PURE__ */ _("div", {
@@ -1242,26 +1296,26 @@ function J({ slot: e, camStreams: t, compact: n }) {
 				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: `h-1.5 w-1.5 rounded-full ${E ? t.profile === "high" ? "bg-success" : t.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"
+							children: u?.status ?? "loading"
 						}),
-						e.sourceCamStreamId && /* @__PURE__ */ _("span", {
+						t.sourceCamStreamId && /* @__PURE__ */ _("span", {
 							className: "text-[10px] text-foreground-subtle",
-							children: ["← ", e.sourceCamStreamId]
+							children: ["← ", t.sourceCamStreamId]
 						})
 					]
 				}), /* @__PURE__ */ g("span", {
 					className: "text-[10px] text-foreground-subtle",
-					children: a && a.uptimeMs > 0 ? pe(a.uptimeMs) : "—"
+					children: u && u.uptimeMs > 0 ? pe(u.uptimeMs) : "—"
 				})]
 			}),
-			a && E ? n ? /* @__PURE__ */ _("div", {
+			u && E ? c ? /* @__PURE__ */ _("div", {
 				className: "flex flex-wrap gap-x-3 gap-y-0.5 text-[10px]",
 				children: [
 					/* @__PURE__ */ _("span", {
@@ -1272,9 +1326,9 @@ function J({ slot: e, camStreams: t, compact: n }) {
 						}), /* @__PURE__ */ _("span", {
 							className: "text-foreground",
 							children: [
-								a.inputFps.toFixed(1),
+								u.inputFps.toFixed(1),
 								"/",
-								a.decodeFps.toFixed(1)
+								u.decodeFps.toFixed(1)
 							]
 						})]
 					}),
@@ -1285,7 +1339,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Bitrate:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground",
-							children: a.bitrateKbps >= 1e3 ? `${(a.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${a.bitrateKbps} kbps`
+							children: u.bitrateKbps >= 1e3 ? `${(u.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${u.bitrateKbps} kbps`
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1295,7 +1349,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Codec:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground",
-							children: a.codec?.toUpperCase() ?? "—"
+							children: u.codec?.toUpperCase() ?? "—"
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1314,8 +1368,8 @@ function J({ slot: e, camStreams: t, compact: n }) {
 								children: "("
 							}),
 							/* @__PURE__ */ g(Ce, {
-								count: a.encodedSubscribers + a.decodedSubscribers,
-								clients: s,
+								count: u.encodedSubscribers + u.decodedSubscribers,
+								clients: d,
 								onKill: w
 							}),
 							/* @__PURE__ */ g("span", {
@@ -1323,15 +1377,15 @@ function J({ slot: e, camStreams: t, compact: n }) {
 								children: "·"
 							}),
 							/* @__PURE__ */ g(Te, {
-								count: a.rtspClients ?? 0,
-								clients: s,
+								count: u.rtspClients ?? 0,
+								clients: d,
 								onKill: w
 							}),
 							/* @__PURE__ */ _("span", {
 								className: "text-foreground-subtle/70",
 								children: [
 									"· pipe ",
-									a.pipeClients ?? 0,
+									u.pipeClients ?? 0,
 									")"
 								]
 							})
@@ -1348,7 +1402,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "In:"
 						}), /* @__PURE__ */ _("span", {
 							className: "text-foreground",
-							children: [a.inputFps.toFixed(1), " fps"]
+							children: [u.inputFps.toFixed(1), " fps"]
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1358,7 +1412,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Dec:"
 						}), /* @__PURE__ */ _("span", {
 							className: "text-foreground",
-							children: [a.decodeFps.toFixed(1), " fps"]
+							children: [u.decodeFps.toFixed(1), " fps"]
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1368,7 +1422,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Bitrate:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground",
-							children: a.bitrateKbps >= 1e3 ? `${(a.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${a.bitrateKbps} kbps`
+							children: u.bitrateKbps >= 1e3 ? `${(u.bitrateKbps / 1e3).toFixed(1)} Mbps` : `${u.bitrateKbps} kbps`
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1378,7 +1432,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "IDR:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground",
-							children: a.idrIntervalMs > 0 ? `${(a.idrIntervalMs / 1e3).toFixed(1)}s` : "—"
+							children: u.idrIntervalMs > 0 ? `${(u.idrIntervalMs / 1e3).toFixed(1)}s` : "—"
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1388,7 +1442,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Codec:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground",
-							children: a.codec?.toUpperCase() ?? "—"
+							children: u.codec?.toUpperCase() ?? "—"
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1398,7 +1452,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Decoder:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground font-mono truncate",
-							children: a.decoderNodeId ?? /* @__PURE__ */ g("span", {
+							children: u.decoderNodeId ?? /* @__PURE__ */ g("span", {
 								className: "text-foreground-subtle italic",
 								children: "deferred"
 							})
@@ -1411,7 +1465,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Pipe:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground",
-							children: a.pipeClients ?? 0
+							children: u.pipeClients ?? 0
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1421,7 +1475,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Packets:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground",
-							children: a.packetCount > 1e3 ? `${(a.packetCount / 1e3).toFixed(1)}k` : a.packetCount
+							children: u.packetCount > 1e3 ? `${(u.packetCount / 1e3).toFixed(1)}k` : u.packetCount
 						})]
 					}),
 					/* @__PURE__ */ _("span", {
@@ -1431,10 +1485,10 @@ function J({ slot: e, camStreams: t, compact: n }) {
 							children: "Data:"
 						}), /* @__PURE__ */ g("span", {
 							className: "text-foreground",
-							children: a.totalBytes > 1048576 ? `${(a.totalBytes / 1048576).toFixed(1)} MB` : `${(a.totalBytes / 1024).toFixed(0)} KB`
+							children: u.totalBytes > 1048576 ? `${(u.totalBytes / 1048576).toFixed(1)} MB` : `${(u.totalBytes / 1024).toFixed(0)} KB`
 						})]
 					}),
-					a.audio && /* @__PURE__ */ _("div", {
+					u.audio && /* @__PURE__ */ _("div", {
 						className: "basis-full flex flex-wrap items-center gap-x-1.5 gap-y-0.5",
 						children: [
 							/* @__PURE__ */ g("span", {
@@ -1446,7 +1500,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 								children: [
 									/* @__PURE__ */ g("span", {
 										className: "text-foreground",
-										children: a.audio.codec.toUpperCase()
+										children: u.audio.codec.toUpperCase()
 									}),
 									/* @__PURE__ */ g("span", {
 										className: "text-foreground-subtle",
@@ -1454,7 +1508,7 @@ function J({ slot: e, camStreams: t, compact: n }) {
 									}),
 									/* @__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`
+										children: u.audio.sampleRate >= 1e3 ? `${(u.audio.sampleRate / 1e3).toFixed(u.audio.sampleRate % 1e3 == 0 ? 0 : 1)}kHz` : `${u.audio.sampleRate}Hz`
 									}),
 									/* @__PURE__ */ g("span", {
 										className: "text-foreground-subtle",
@@ -1462,20 +1516,20 @@ function J({ slot: e, camStreams: t, compact: n }) {
 									}),
 									/* @__PURE__ */ g("span", {
 										className: "text-foreground",
-										children: a.audio.channels === 1 ? "mono" : a.audio.channels === 2 ? "stereo" : `${a.audio.channels}ch`
+										children: u.audio.channels === 1 ? "mono" : u.audio.channels === 2 ? "stereo" : `${u.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"
+								className: `px-1 py-px rounded text-[8px] font-medium whitespace-nowrap ${u.audio.supported ? "bg-success/15 text-success" : "bg-amber-500/15 text-amber-500"}`,
+								children: u.audio.supported ? "decoded" : "no decoder"
 							})
 						]
 					})
 				]
-			}), /* @__PURE__ */ g(Se, {
-				clients: s,
-				encodedCount: a.encodedSubscribers,
+			}), /* @__PURE__ */ g(Z, {
+				clients: d,
+				encodedCount: u.encodedSubscribers,
 				onKill: w
 			})] }) : /* @__PURE__ */ g("p", {
 				className: "text-[10px] text-foreground-subtle italic",
@@ -1496,9 +1550,9 @@ function J({ slot: e, camStreams: t, compact: n }) {
 					/* @__PURE__ */ _("span", {
 						className: "text-foreground",
 						children: [
-							b ?? a?.preBufferSec ?? 0,
+							b ?? u?.preBufferSec ?? 0,
 							"s",
-							a && E ? ` (${a.preBufferPackets}p)` : ""
+							u && E ? ` (${u.preBufferPackets}p)` : ""
 						]
 					})
 				]
@@ -1506,67 +1560,67 @@ function J({ slot: e, camStreams: t, compact: n }) {
 		]
 	});
 }
-var be = 280, xe = 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), xe);
-	}, [f]);
+var xe = 280, Se = 120;
+function J({ trigger: e, content: t, widthClass: n }) {
+	let r = u(null), i = u(null), [a, o] = p(!1), [s, c] = p(!1), l = m(() => {
+		i.current &&= (clearTimeout(i.current), null);
+	}, []), d = m(() => {
+		l(), i.current = setTimeout(() => o(!1), Se);
+	}, [l]);
 	return /* @__PURE__ */ _("span", {
-		ref: o,
+		ref: r,
 		className: "relative inline-block",
-		onMouseEnter: i(() => {
-			f();
-			let e = o.current;
+		onMouseEnter: m(() => {
+			l();
+			let e = r.current;
 			if (e) {
 				let t = e.getBoundingClientRect(), n = window.innerHeight - t.bottom, r = t.top;
-				d(n < be && r > n);
+				c(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
+			o(!0);
+		}, [l]),
+		onMouseLeave: d,
+		children: [e, a && /* @__PURE__ */ g("div", {
+			className: `absolute left-0 ${s ? "bottom-full mb-1" : "top-full mt-1"} z-50 ${n} rounded-md border border-border bg-surface shadow-xl p-2 text-[10px] normal-case`,
+			onMouseEnter: l,
+			onMouseLeave: d,
+			children: t
 		})]
 	});
 }
-function X(e) {
+function Y(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 Z(e) {
+function X(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 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", {
+function Z({ clients: e, encodedCount: t, onKill: n }) {
+	let r = e?.decoded ?? [], i = e?.audio ?? [], a = e?.rtsp ?? [], o = e?.encoded ?? [], s = r.length + i.length + a.length + o.length, [c, l] = p(!0);
+	return s === 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),
+			onClick: () => l((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", {
+			children: [g(c ? A : j, { className: "h-3 w-3" }), /* @__PURE__ */ _("span", {
 				className: "uppercase tracking-wider",
 				children: [
 					"Subscribers (",
-					c,
+					s,
 					")"
 				]
 			})]
-		}), l && /* @__PURE__ */ _("div", {
+		}), c && /* @__PURE__ */ _("div", {
 			className: "mt-1 divide-y divide-border/20",
 			children: [
-				i.map((e, t) => /* @__PURE__ */ g(Q, {
+				r.map((e, t) => /* @__PURE__ */ g(Q, {
 					kind: "DECODED",
 					kindClass: "bg-success/10 text-success",
 					tag: e.tag || "unknown",
@@ -1584,7 +1638,7 @@ function Se({ clients: e, encodedCount: t, onKill: n }) {
 						handle: e.tag
 					}) : void 0
 				}, `d-${t}`)),
-				a.map((e, t) => /* @__PURE__ */ g(Q, {
+				i.map((e, t) => /* @__PURE__ */ g(Q, {
 					kind: "AUDIO",
 					kindClass: "bg-info/10 text-info",
 					tag: e.tag || "unknown",
@@ -1595,7 +1649,7 @@ function Se({ clients: e, encodedCount: t, onKill: n }) {
 						handle: e.tag
 					}) : void 0
 				}, `a-${t}`)),
-				o.map((e) => {
+				a.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",
@@ -1605,7 +1659,7 @@ function Se({ clients: e, encodedCount: t, onKill: n }) {
 							text: i + (e.muted ? " · muted" : ""),
 							className: a
 						},
-						metrics: [Z(e.bytesSent), `last rtp ${X(t)} ago`],
+						metrics: [X(e.bytesSent), `last rtp ${Y(t)} ago`],
 						age: Date.now() - e.connectedAt,
 						onKill: n ? () => n({
 							channel: "rtsp",
@@ -1613,19 +1667,19 @@ function Se({ clients: e, encodedCount: t, onKill: n }) {
 						}) : void 0
 					}, `r-${e.sessionId}`);
 				}),
-				s.map((e) => {
-					let t = e.attribution, n = G[t.kind] ?? "bg-foreground-subtle/10 text-foreground-subtle", r = t.sessionId ? t.sessionId.slice(0, 8) : null, i = [];
+				o.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(H(t.userAgent));
-					let a = i.length > 0 ? i.join(" · ") : he(t.kind), o = [];
+					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: me(t.kind),
+						kind: he(t.kind),
 						kindClass: n,
 						tag: a,
 						metrics: o,
 						age: Date.now() - e.subscribedAt
 					}, e.id);
 				}),
-				s.length === 0 && t > 0 && /* @__PURE__ */ _("div", {
+				o.length === 0 && t > 0 && /* @__PURE__ */ _("div", {
 					className: "py-0.5 text-[10px] text-foreground-subtle",
 					children: [
 						/* @__PURE__ */ g("span", {
@@ -1666,7 +1720,7 @@ function Q({ kind: e, kindClass: t, tag: n, state: r, metrics: i, age: a, onKill
 					children: e.text
 				})] }, t)), /* @__PURE__ */ _("span", {
 					className: "text-foreground-subtle/70",
-					children: ["· ", X(a)]
+					children: ["· ", Y(a)]
 				})]
 			}),
 			/* @__PURE__ */ g("div", {
@@ -1681,7 +1735,7 @@ function Ce({ count: e, clients: t, onKill: n }) {
 		className: `text-foreground ${o ? "underline decoration-dotted decoration-foreground-subtle/50 underline-offset-2 cursor-help" : ""}`,
 		children: e
 	});
-	return o ? /* @__PURE__ */ g(Y, {
+	return o ? /* @__PURE__ */ g(J, {
 		trigger: s,
 		content: /* @__PURE__ */ _(v, { children: [
 			r.length > 0 && /* @__PURE__ */ _("div", {
@@ -1709,7 +1763,7 @@ function Ce({ count: e, clients: t, onKill: n }) {
 								]
 							}),
 							/* @__PURE__ */ g("span", { children: "·" }),
-							/* @__PURE__ */ g("span", { children: X(Date.now() - e.subscribedAt) }),
+							/* @__PURE__ */ g("span", { children: Y(Date.now() - e.subscribedAt) }),
 							n && e.tag && /* @__PURE__ */ g($, { onClick: () => n({
 								channel: "decoded",
 								handle: e.tag
@@ -1733,7 +1787,7 @@ function Ce({ count: e, clients: t, onKill: n }) {
 						children: [
 							/* @__PURE__ */ _("span", { children: [e.chunksDelivered, " chunks"] }),
 							/* @__PURE__ */ g("span", { children: "·" }),
-							/* @__PURE__ */ g("span", { children: X(Date.now() - e.subscribedAt) }),
+							/* @__PURE__ */ g("span", { children: Y(Date.now() - e.subscribedAt) }),
 							n && e.tag && /* @__PURE__ */ g($, { onClick: () => n({
 								channel: "audio",
 								handle: e.tag
@@ -1773,7 +1827,7 @@ function $({ onClick: e }) {
 			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" })
+		children: /* @__PURE__ */ g(te, { className: "h-2.5 w-2.5" })
 	});
 }
 function Te({ count: e, clients: t, onKill: n }) {
@@ -1781,7 +1835,7 @@ function Te({ count: e, clients: t, onKill: n }) {
 		className: `text-foreground ${i ? "underline decoration-dotted decoration-foreground-subtle/50 underline-offset-2 cursor-help" : ""}`,
 		children: e
 	});
-	return i ? /* @__PURE__ */ g(Y, {
+	return i ? /* @__PURE__ */ g(J, {
 		trigger: a,
 		content: /* @__PURE__ */ _(v, { children: [/* @__PURE__ */ g("div", {
 			className: "text-foreground-subtle uppercase text-[9px] tracking-wider mb-1",
@@ -1808,15 +1862,15 @@ function Te({ count: e, clients: t, onKill: n }) {
 				}), /* @__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: [X(e.bytesSent), " sent"] }),
 						/* @__PURE__ */ _("span", { children: [
 							"connected ",
-							X(Date.now() - e.connectedAt),
+							Y(Date.now() - e.connectedAt),
 							" ago"
 						] }),
 						/* @__PURE__ */ _("span", { children: [
 							"last rtp ",
-							X(t),
+							Y(t),
 							" ago"
 						] })
 					]
@@ -1829,7 +1883,7 @@ function Te({ count: e, clients: t, onKill: n }) {
 //#endregion
 //#region src/stream-broker/widgets/index.tsx
 var Ee = {
-	"stream-broker-panel": ge,
+	"stream-broker-panel": _e,
 	"ffmpeg-params": ue
 };
 //#endregion