@camstack/ui-library 1.2.182 → 1.2.183

package/dist/composites/stream-debug/stream-debug-overlay.d.ts

@@ -17,6 +17,16 @@ import { WebrtcDebugStats } from './webrtc-debug-stats.js';
  *     (D393). In a tool whose whole job is telling a stalled decoder from a
  *     stalled transport, "nobody measured" and "measured nothing" are
  *     opposite conclusions.
+ *  4. It must not cover the picture, or the operator turns it off and the tool
+ *     is worth nothing. So it is a one-line PILL by default — the verdict and
+ *     the three numbers that carry it — and the full panel only when asked.
+ *     Collapsed it is small enough to live alongside the app's own overlays
+ *     (the audio meter, the box layer), which the operator positions freely
+ *     and which this used to sit on top of.
+ *
+ * Density follows from the same rule: a cumulative counter and its window
+ * share ONE row (`12345 +30`), because two rows saying almost the same thing
+ * is how a panel grows until it covers the video it is describing.
  */
 export interface StreamDebugOverlayProps {
     /** The client half. Null before the first successful poll. */

package/dist/index.cjs

@@ -27236,15 +27236,21 @@ var VERDICT_CLASS = {
 	"transport-stall": "bg-rose-500/30 text-rose-100",
 	"frozen-unknown": "bg-white/15 text-white/70"
 };
-function Row({ label, value, strong = false }) {
+function Row({ label, value, window, strong = false }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-baseline justify-between gap-3 leading-tight",
+		className: "flex items-baseline justify-between gap-2 leading-[1.25]",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "text-white/55 shrink-0",
 			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: strong ? "text-white font-semibold tabular-nums" : "text-white/90 tabular-nums",
-			children: value
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-baseline gap-1 text-right",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: strong ? "text-white font-semibold tabular-nums" : "text-white/90 tabular-nums",
+				children: value
+			}), window !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sky-300/80 tabular-nums",
+				children: window
+			})]
 		})]
 	});
 }
@@ -27261,16 +27267,45 @@ function SectionHeader({ title, measuredAt, now }) {
 		})]
 	});
 }
+/** The pill's dot: the verdict, in the one place that is always visible. */
+var VERDICT_DOT = {
+	unknown: "bg-white/50",
+	decoding: "bg-emerald-400",
+	"decoder-stall": "bg-amber-400",
+	"transport-stall": "bg-rose-400",
+	"frozen-unknown": "bg-white/50"
+};
 function StreamDebugOverlay(props) {
 	const { stats, server, serverError, serverWired, now, sessionId } = props;
 	const verdict = freezeVerdict(stats);
 	const win = stats?.window;
+	const [expanded, setExpanded] = (0, react$1.useState)(false);
+	const stale = stats !== null && now - stats.at > STALE_AFTER_MS;
+	if (!expanded) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: () => setExpanded(true),
+		className: "absolute bottom-10 left-2 z-20 transform-gpu flex items-center gap-1.5 rounded bg-neutral-950/90 ring-1 ring-white/20 px-1.5 py-0.5 text-[9px] font-mono text-white/85 tabular-nums select-text",
+		"data-testid": "stream-debug-pill",
+		title: verdict.label,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `h-1.5 w-1.5 rounded-full ${VERDICT_DOT[verdict.kind]}` }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: stats?.width !== null && stats?.width !== void 0 ? `${stats.width}×${stats.height}` : UNKNOWN }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [n(stats?.fps), "fps"] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [n(win?.kbps), "k"] }),
+			stale && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-amber-300",
+				children: "stale"
+			})
+		]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "absolute top-2 right-2 z-20 transform-gpu w-[15.5rem] max-h-[calc(100%-1rem)] overflow-y-auto rounded-md bg-neutral-950/95 ring-1 ring-white/25 shadow-lg px-2 py-1.5 text-[10px] font-mono text-white/90 select-text",
+		className: "absolute bottom-10 left-2 z-20 transform-gpu w-[13.5rem] max-h-[70%] overflow-y-auto rounded-md bg-neutral-950/95 ring-1 ring-white/25 shadow-lg px-1.5 py-1 text-[9px] font-mono text-white/90 select-text",
 		"data-testid": "stream-debug-overlay",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: `rounded px-1.5 py-1 mb-1 text-[10px] font-semibold ${VERDICT_CLASS[verdict.kind]}`,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => setExpanded(false),
+				className: `w-full text-left rounded px-1.5 py-0.5 mb-1 text-[9px] font-semibold ${VERDICT_CLASS[verdict.kind]}`,
 				children: verdict.label
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
@@ -27281,11 +27316,7 @@ function StreamDebugOverlay(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "framesDecoded",
 				value: n(stats?.framesDecoded),
-				strong: true
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.framesDecoded),
+				window: win?.framesDecoded === null ? void 0 : `+${n(win?.framesDecoded)}`,
 				strong: true
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
@@ -27294,40 +27325,28 @@ function StreamDebugOverlay(props) {
 				strong: true
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· total frozen",
+				label: "frozen",
 				value: n(stats?.totalFreezeMs, { suffix: "ms" }),
+				window: win?.freezeMs === null ? void 0 : `+${n(win?.freezeMs)}ms`,
 				strong: true
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.freezeMs, { suffix: "ms" })
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "pliCount",
 				value: n(stats?.pliCount),
+				window: win?.pliCount === null ? void 0 : `+${n(win?.pliCount)}`,
 				strong: true
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.pliCount)
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "framesDropped",
 				value: n(stats?.framesDropped)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "decode time",
+				label: "decode",
 				value: n(stats?.avgDecodeMs, {
 					digits: 1,
 					suffix: "ms"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.decodeMs, {
-					digits: 1,
-					suffix: "ms"
-				})
+				}),
+				window: win?.decodeMs === null ? void 0 : `${n(win?.decodeMs, { digits: 1 })}ms`
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
 				title: "picture",
@@ -27385,33 +27404,24 @@ function StreamDebugOverlay(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "packetsLost",
-				value: n(stats?.packetsLost)
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.packetsLost)
+				value: n(stats?.packetsLost),
+				window: win?.packetsLost === null ? void 0 : `+${n(win?.packetsLost)}`
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "loss",
 				value: n(stats?.lossPercent, {
 					digits: 2,
 					suffix: "%"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.lossPercent, {
+				}),
+				window: win?.lossPercent === null ? void 0 : n(win?.lossPercent, {
 					digits: 2,
 					suffix: "%"
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "nackCount",
-				value: n(stats?.nackCount)
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-				label: "· this window",
-				value: n(win?.nackCount)
+				value: n(stats?.nackCount),
+				window: win?.nackCount === null ? void 0 : `+${n(win?.nackCount)}`
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 				label: "candidate pair",

package/dist/index.js

@@ -27212,15 +27212,21 @@ var VERDICT_CLASS = {
 	"transport-stall": "bg-rose-500/30 text-rose-100",
 	"frozen-unknown": "bg-white/15 text-white/70"
 };
-function Row({ label, value, strong = false }) {
+function Row({ label, value, window, strong = false }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-baseline justify-between gap-3 leading-tight",
+		className: "flex items-baseline justify-between gap-2 leading-[1.25]",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "text-white/55 shrink-0",
 			children: label
-		}), /* @__PURE__ */ jsx("span", {
-			className: strong ? "text-white font-semibold tabular-nums" : "text-white/90 tabular-nums",
-			children: value
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex items-baseline gap-1 text-right",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: strong ? "text-white font-semibold tabular-nums" : "text-white/90 tabular-nums",
+				children: value
+			}), window !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-sky-300/80 tabular-nums",
+				children: window
+			})]
 		})]
 	});
 }
@@ -27237,16 +27243,45 @@ function SectionHeader({ title, measuredAt, now }) {
 		})]
 	});
 }
+/** The pill's dot: the verdict, in the one place that is always visible. */
+var VERDICT_DOT = {
+	unknown: "bg-white/50",
+	decoding: "bg-emerald-400",
+	"decoder-stall": "bg-amber-400",
+	"transport-stall": "bg-rose-400",
+	"frozen-unknown": "bg-white/50"
+};
 function StreamDebugOverlay(props) {
 	const { stats, server, serverError, serverWired, now, sessionId } = props;
 	const verdict = freezeVerdict(stats);
 	const win = stats?.window;
+	const [expanded, setExpanded] = useState(false);
+	const stale = stats !== null && now - stats.at > STALE_AFTER_MS;
+	if (!expanded) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => setExpanded(true),
+		className: "absolute bottom-10 left-2 z-20 transform-gpu flex items-center gap-1.5 rounded bg-neutral-950/90 ring-1 ring-white/20 px-1.5 py-0.5 text-[9px] font-mono text-white/85 tabular-nums select-text",
+		"data-testid": "stream-debug-pill",
+		title: verdict.label,
+		children: [
+			/* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 rounded-full ${VERDICT_DOT[verdict.kind]}` }),
+			/* @__PURE__ */ jsx("span", { children: stats?.width !== null && stats?.width !== void 0 ? `${stats.width}×${stats.height}` : UNKNOWN }),
+			/* @__PURE__ */ jsxs("span", { children: [n(stats?.fps), "fps"] }),
+			/* @__PURE__ */ jsxs("span", { children: [n(win?.kbps), "k"] }),
+			stale && /* @__PURE__ */ jsx("span", {
+				className: "text-amber-300",
+				children: "stale"
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "absolute top-2 right-2 z-20 transform-gpu w-[15.5rem] max-h-[calc(100%-1rem)] overflow-y-auto rounded-md bg-neutral-950/95 ring-1 ring-white/25 shadow-lg px-2 py-1.5 text-[10px] font-mono text-white/90 select-text",
+		className: "absolute bottom-10 left-2 z-20 transform-gpu w-[13.5rem] max-h-[70%] overflow-y-auto rounded-md bg-neutral-950/95 ring-1 ring-white/25 shadow-lg px-1.5 py-1 text-[9px] font-mono text-white/90 select-text",
 		"data-testid": "stream-debug-overlay",
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: `rounded px-1.5 py-1 mb-1 text-[10px] font-semibold ${VERDICT_CLASS[verdict.kind]}`,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setExpanded(false),
+				className: `w-full text-left rounded px-1.5 py-0.5 mb-1 text-[9px] font-semibold ${VERDICT_CLASS[verdict.kind]}`,
 				children: verdict.label
 			}),
 			/* @__PURE__ */ jsx(SectionHeader, {
@@ -27257,11 +27292,7 @@ function StreamDebugOverlay(props) {
 			/* @__PURE__ */ jsx(Row, {
 				label: "framesDecoded",
 				value: n(stats?.framesDecoded),
-				strong: true
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.framesDecoded),
+				window: win?.framesDecoded === null ? void 0 : `+${n(win?.framesDecoded)}`,
 				strong: true
 			}),
 			/* @__PURE__ */ jsx(Row, {
@@ -27270,40 +27301,28 @@ function StreamDebugOverlay(props) {
 				strong: true
 			}),
 			/* @__PURE__ */ jsx(Row, {
-				label: "· total frozen",
+				label: "frozen",
 				value: n(stats?.totalFreezeMs, { suffix: "ms" }),
+				window: win?.freezeMs === null ? void 0 : `+${n(win?.freezeMs)}ms`,
 				strong: true
 			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.freezeMs, { suffix: "ms" })
-			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "pliCount",
 				value: n(stats?.pliCount),
+				window: win?.pliCount === null ? void 0 : `+${n(win?.pliCount)}`,
 				strong: true
 			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.pliCount)
-			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "framesDropped",
 				value: n(stats?.framesDropped)
 			}),
 			/* @__PURE__ */ jsx(Row, {
-				label: "decode time",
+				label: "decode",
 				value: n(stats?.avgDecodeMs, {
 					digits: 1,
 					suffix: "ms"
-				})
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.decodeMs, {
-					digits: 1,
-					suffix: "ms"
-				})
+				}),
+				window: win?.decodeMs === null ? void 0 : `${n(win?.decodeMs, { digits: 1 })}ms`
 			}),
 			/* @__PURE__ */ jsx(SectionHeader, {
 				title: "picture",
@@ -27361,33 +27380,24 @@ function StreamDebugOverlay(props) {
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "packetsLost",
-				value: n(stats?.packetsLost)
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.packetsLost)
+				value: n(stats?.packetsLost),
+				window: win?.packetsLost === null ? void 0 : `+${n(win?.packetsLost)}`
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "loss",
 				value: n(stats?.lossPercent, {
 					digits: 2,
 					suffix: "%"
-				})
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.lossPercent, {
+				}),
+				window: win?.lossPercent === null ? void 0 : n(win?.lossPercent, {
 					digits: 2,
 					suffix: "%"
 				})
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "nackCount",
-				value: n(stats?.nackCount)
-			}),
-			/* @__PURE__ */ jsx(Row, {
-				label: "· this window",
-				value: n(win?.nackCount)
+				value: n(stats?.nackCount),
+				window: win?.nackCount === null ? void 0 : `+${n(win?.nackCount)}`
 			}),
 			/* @__PURE__ */ jsx(Row, {
 				label: "candidate pair",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.182",
+  "version": "1.2.183",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",