@camera.ui/server 2.2.5-beta.2 → 2.2.5-beta.4

package/dist/interface/ha/{ungrouped-DttNEB62.js → ungrouped-xyK1QrsM.js}

@@ -1,26 +1,23 @@
 import { Et as e, et as t, f as n, gt as r, i, m as a, rt as o } from "./ripple-ZDATPc2w.js";
-import { n as s } from "./virtualscroller-C5j7FXj4.js";
-import { D as c, G as l, H as u, Jt as d, K as f, M as p, N as m, Wt as h, Y as g, _t as _, d as v, f as y, gt as b, kt as x, l as S, lt as C, ot as w, p as T, q as E, qt as D, r as O, rt as k, u as A, ut as j, x as M, xt as N, y as P, z as ee } from "./runtime-core.esm-bundler-_TfE0DWz.js";
-import { t as te } from "./tooltip-Z7VN-E1u.js";
-import { $ as F, Bn as ne, Br as re, En as ie, Fn as ae, Hn as oe, In as se, Mn as ce, Nn as le, Pn as ue, ar as de, bi as fe, br as pe, ca as me, ct as he, dr as ge, er as _e, et as ve, ht as ye, it as be, lt as xe, mr as Se, nt as Ce, o as we, or as Te, rt as Ee, tt as De, ur as Oe, vr as ke, yr as I, zn as L } from "./api-BmYisoxj.js";
-import { _ as Ae, o as je } from "./intercomService-B7HkLs6z.js";
-import { n as Me } from "./vue-i18n-D5EAy78K.js";
-import { i as Ne } from "./alert-outline-FcLLjoOK.js";
-import { t as Pe } from "./eventIcons-BFNUgeGr.js";
-import { t as Fe } from "./spinner-DIILjDT9.js";
-import { t as Ie } from "./button-BouAFgf5.js";
-import { M as Le } from "./dist-C6MBHJhs.js";
-import { t as Re } from "./inputtext-C_ygnPrC.js";
-import { t as ze } from "./select-UR3ZRDew.js";
-import { t as Be } from "./ring-resize-Dr2PxWIg.js";
+import { n as s } from "./virtualscroller-B-UQZDMJ.js";
+import { A as c, D as l, G as u, H as d, Jt as f, K as p, M as m, N as h, Wt as g, Y as _, _t as v, d as y, f as b, gt as x, kt as S, l as C, lt as w, ot as ee, p as T, q as E, r as D, rt as O, st as te, u as k, ut as ne, x as A, xt as j, y as M, z as re } from "./runtime-core.esm-bundler-_TfE0DWz.js";
+import { $ as ie, Bn as ae, Br as oe, Cr as se, Gn as ce, Hn as le, Kn as ue, Ln as de, On as fe, Rn as pe, Un as me, _t as he, at as ge, bi as _e, et as ve, hr as ye, it as be, kn as xe, lr as Se, lt as Ce, mr as we, nt as Te, o as Ee, qn as De, rt as Oe, tt as ke, ur as Ae, ut as je, vr as Me, wr as N, zn as Ne } from "./api-BP7mlzjP.js";
+import { A as Pe, _ as Fe, o as Ie } from "./intercomService-B7HkLs6z.js";
+import { n as Le } from "./vue-i18n-D5EAy78K.js";
+import { i as Re } from "./alert-outline-FcLLjoOK.js";
+import { t as ze } from "./eventIcons-BFNUgeGr.js";
+import { t as Be } from "./spinner-DIILjDT9.js";
+import { M as Ve } from "./dist-C6MBHJhs.js";
+import { t as P } from "./inputtext-C_ygnPrC.js";
+import { t as F } from "./select-DV7p2EDj.js";
 //#region ~icons/tabler/user-edit
-var R = {
+var I = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function Ve(e, t) {
-	return u(), T("svg", R, [...t[0] ||= [A("path", {
+function He(e, t) {
+	return d(), T("svg", I, [...t[0] ||= [k("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -29,23 +26,23 @@ function Ve(e, t) {
 		d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h3.5m4.92.61a2.1 2.1 0 0 1 2.97 2.97L18 22h-3v-3z"
 	}, null, -1)]]);
 }
-var He = _({
+var Ue = v({
 	name: "tabler-user-edit",
-	render: Ve
-}), z = { class: "flex flex-col gap-4 w-full" }, B = {
+	render: He
+}), L = { class: "flex flex-col gap-4 w-full" }, R = {
 	key: 0,
 	class: "flex justify-center"
-}, V = ["src", "alt"], H = { class: "flex flex-col gap-2 w-full" }, U = { class: "cui-label" }, W = { class: "flex flex-col gap-2 w-full" }, G = {
+}, z = ["src", "alt"], B = { class: "flex flex-col gap-2 w-full" }, V = { class: "cui-label" }, H = { class: "flex flex-col gap-2 w-full" }, U = {
 	for: "reassignTarget",
 	class: "cui-label"
-}, Ue = /* @__PURE__ */ M({
+}, We = /* @__PURE__ */ A({
 	__name: "FaceReassign",
 	props: {
 		cropUrl: {},
 		oldName: {}
 	},
 	setup(e, { expose: t }) {
-		let n = e, { t: r } = Me(), { plugin: i } = Le("@camera.ui/camera-ui-nvr"), a = N(null), o = N([]), s = N(!0), c = S(() => n.oldName === "unknown" ? r("views.recordings.reassign_unknown_person") : n.oldName), l = S(() => {
+		let n = e, { t: r } = Le(), { plugin: i } = Ve("@camera.ui/camera-ui-nvr"), a = j(null), o = j([]), s = j(!0), c = C(() => n.oldName === "unknown" ? r("views.recordings.reassign_unknown_person") : n.oldName), l = C(() => {
 			let e = o.value.filter((e) => e !== n.oldName).map((e) => ({
 				label: e,
 				value: e
@@ -55,7 +52,7 @@ var He = _({
 				value: ""
 			}), e;
 		});
-		return ee(async () => {
+		return re(async () => {
 			try {
 				let e = await i.value?.listKnownFaces?.();
 				o.value = (e ?? []).map((e) => e.name);
@@ -63,30 +60,30 @@ var He = _({
 				s.value = !1;
 			}
 		}), t({ onConfirm: async () => a.value }), (e, t) => {
-			let r = Re, i = ze;
-			return u(), T("div", z, [
-				n.cropUrl ? (u(), T("div", B, [A("img", {
+			let r = P, i = F;
+			return d(), T("div", L, [
+				n.cropUrl ? (d(), T("div", R, [k("img", {
 					src: n.cropUrl,
-					alt: x(c),
+					alt: S(c),
 					class: "w-36 h-36 rounded-xl object-cover bg-neutral-900"
-				}, null, 8, V)])) : y("", !0),
-				A("div", H, [A("label", U, d(e.$t("views.recordings.reassign_current")), 1), P(r, {
-					"model-value": x(c),
+				}, null, 8, z)])) : b("", !0),
+				k("div", B, [k("label", V, f(e.$t("views.recordings.reassign_current")), 1), M(r, {
+					"model-value": S(c),
 					class: "w-full",
 					fluid: "",
 					disabled: ""
 				}, null, 8, ["model-value"])]),
-				A("div", W, [A("label", G, d(e.$t("views.recordings.reassign_new")), 1), P(i, {
+				k("div", H, [k("label", U, f(e.$t("views.recordings.reassign_new")), 1), M(i, {
 					id: "reassignTarget",
-					modelValue: x(a),
-					"onUpdate:modelValue": t[0] ||= (e) => b(a) ? a.value = e : null,
-					options: x(l),
+					modelValue: S(a),
+					"onUpdate:modelValue": t[0] ||= (e) => x(a) ? a.value = e : null,
+					options: S(l),
 					"option-label": "label",
 					"option-value": "value",
 					class: "w-full",
 					fluid: "",
-					loading: x(s),
-					disabled: x(s),
+					loading: S(s),
+					disabled: S(s),
 					placeholder: e.$t("views.faces.enter_or_pick_name")
 				}, null, 8, [
 					"modelValue",
@@ -98,28 +95,31 @@ var He = _({
 			]);
 		};
 	}
-}), We = ["src"], Ge = {
+}), Ge = {
+	key: 0,
+	class: "card-skeleton absolute inset-0 rounded-xl"
+}, Ke = {
 	key: 2,
 	class: "w-full h-full flex items-center justify-center bg-neutral-800/80"
-}, Ke = { class: "absolute top-0 left-0 right-0 p-2 bg-gradient-to-b from-black/80 to-transparent z-[3]" }, qe = { class: "flex items-center gap-1.5" }, Je = { class: "text-xs font-semibold text-white truncate min-w-0 flex-1" }, Ye = {
+}, qe = { class: "absolute top-0 left-0 right-0 p-2 bg-gradient-to-b from-black/80 to-transparent z-[3]" }, Je = { class: "flex items-center gap-1.5" }, Ye = { class: "text-xs font-semibold text-white truncate min-w-0 flex-1" }, Xe = {
 	key: 0,
 	class: "text-[10px] font-semibold text-white/80 bg-black/60 px-1.5 py-0.5 rounded-md shrink-0"
-}, Xe = { class: "text-[10px] text-white/70" }, Ze = { class: "block text-[11px] text-white font-medium truncate bg-black/50 rounded-md px-2 py-0.5" }, Qe = { class: "flex items-center gap-1 min-w-0" }, $e = ["title"], et = {
+}, Ze = ["title"], Qe = ["title", "disabled"], $e = { class: "text-[10px] text-white/70" }, et = ["aria-label"], tt = ["aria-label"], nt = { class: "block text-[11px] text-white font-medium truncate bg-black/50 rounded-md px-2 py-0.5" }, rt = { class: "flex items-center gap-1 min-w-0" }, it = ["title"], at = {
 	key: 0,
 	class: "flex items-center gap-0.5 shrink-0 opacity-85 group-hover:opacity-100 transition-opacity duration-200"
-}, tt = ["onClick"], nt = ["src", "alt"], rt = {
+}, ot = ["onClick"], st = ["src", "alt"], ct = {
 	key: 0,
 	class: "text-[10px] text-white/60 font-medium"
-}, it = {
+}, lt = {
 	key: 6,
 	class: "absolute inset-0 z-[4] flex items-center justify-center pointer-events-none"
-}, at = {
+}, ut = {
 	key: 7,
 	class: "absolute bottom-10 left-1/2 -translate-x-1/2 z-[4] pointer-events-none"
-}, ot = {
+}, dt = {
 	class: "text-[10px] font-semibold text-white bg-black/60 px-1.5 py-0.5 rounded-md whitespace-nowrap",
 	style: { "font-variant-numeric": "tabular-nums" }
-}, st = 24, ct = 30, lt = 22, ut = 28, dt = 8, ft = /*#__PURE__*/ I(/* @__PURE__ */ M({
+}, ft = 24, pt = 30, mt = 22, ht = 28, gt = 8, _t = 8, W = /*#__PURE__*/ N(/* @__PURE__ */ A({
 	__name: "RecordingCard",
 	props: {
 		event: {},
@@ -139,7 +139,7 @@ var He = _({
 		"openTrace"
 	],
 	setup(e, { emit: t }) {
-		let r = e, i = t, o = je(), s = fe(), { t: f } = Me(), p = re(), m = oe("@camera.ui/camera-ui-nvr"), { plugin: _ } = Le("@camera.ui/camera-ui-nvr"), b = ye(), { icons: E } = Pe(), D = m.getCachedThumbnails(r.event.id), M = D ? L(D, r.event, "card", r.segIndex).url ? "loaded" : "empty" : "loading", I = c(ae, void 0), Fe = k("rootRef"), Re = k("previewCanvasRef"), ze = k("footerRef"), Be = k("cardMenuRef"), R = N(!1), Ve = Ce(Fe, () => Bt(), () => $()), z = N(!1), B = N(D ?? null), V = N(M), H = N(!1), U = N(0), W = N(null), G = N(!1), { width: ft } = Ae(ze), pt = S(() => Oe(void 0, "admin")), K = S(() => W.value ?? r.event.favorite ?? !1), q = S(() => {
+		let r = e, i = t, o = Ie(), s = _e(), { t: c } = Le(), p = oe(), m = De("@camera.ui/camera-ui-nvr"), { plugin: v } = Ve("@camera.ui/camera-ui-nvr"), x = he(), { icons: w } = ze(), E = m.getCachedThumbnails(r.event.id), te = E ? pe(E, r.event, "card", r.segIndex).url ? "loaded" : "empty" : "loading", A = l(me, void 0), N = O("rootRef"), Fe = O("previewCanvasRef"), Be = O("footerRef"), P = O("cardMenuRef"), F = j(!1), I = j(!1), He = Oe(N, () => Gt(), () => $()), L = j(!1), R = j(E ?? null), z = j(te), B = j(!1), V = j(0), H = j(null), U = j(!1), W = j(0), vt = C(() => we(void 0, "admin")), G = C(() => H.value ?? r.event.favorite ?? !1), K = C(() => {
 			if (r.semanticScore == null) return;
 			let e = Math.max(0, Math.min(1, r.semanticScore));
 			return {
@@ -147,23 +147,23 @@ var He = _({
 				label: `${(e * 100).toFixed(0)}%`,
 				color: e >= .5 ? "bg-green-500/80" : e >= .25 ? "bg-yellow-500/80" : "bg-red-400/80"
 			};
-		}), J = S(() => B.value ? L(B.value, r.event, "card", r.segIndex) : null), Y = S(() => {
-			let e = r.segIndex ?? J.value?.segIndex;
+		}), q = C(() => R.value ? pe(R.value, r.event, "card", r.segIndex) : null), J = C(() => {
+			let e = r.segIndex ?? q.value?.segIndex;
 			return e === void 0 ? void 0 : r.event.segments?.[e];
-		}), mt = S(() => J.value?.url), ht = S(() => J.value?.label), gt = S(() => J.value?.type ?? r.event.types[0] ?? "motion"), _t = S(() => {
+		}), yt = C(() => q.value?.url), bt = C(() => q.value?.label), xt = C(() => q.value?.type ?? r.event.types[0] ?? "motion"), Y = C(() => {
 			if (r.hideSegmentBadge) return;
 			let e = r.event.segments?.length ?? 0;
 			return r.segIndex !== void 0 && e > 1 ? `${r.segIndex + 1}/${e}` : void 0;
-		}), X = S(() => {
-			let e = B.value, t = J.value?.url;
+		}), X = C(() => {
+			let e = R.value, t = q.value?.url;
 			if (!e || !t) return [];
 			let n = [{
 				url: t,
-				label: J.value?.label,
-				type: gt.value,
+				label: q.value?.label,
+				type: xt.value,
 				crop: !1
 			}];
-			for (let t of ne(e, r.segIndex)) {
+			for (let t of ce(e, r.segIndex)) {
 				if (n.some((e) => e.url === t.url)) continue;
 				let e = t.key.split(":")[0];
 				n.push({
@@ -175,9 +175,9 @@ var He = _({
 				});
 			}
 			if (r.segIndex === void 0) for (let t of Object.keys(e.cards ?? e.strips ?? {}).sort((e, t) => Number(e) - Number(t))) {
-				let i = _e(e.cards?.[t] ?? e.strips?.[t]);
+				let i = le(e.cards?.[t] ?? e.strips?.[t]);
 				if (!i || n.some((e) => e.url === i)) continue;
-				let a = be(r.event, t);
+				let a = ge(r.event, t);
 				n.push({
 					url: i,
 					label: a,
@@ -186,27 +186,27 @@ var He = _({
 				});
 			}
 			return n.length > 1 ? n : [];
-		}), vt = S(() => X.value.length > 1), yt = S(() => X.value.length ? Math.min(U.value, X.value.length - 1) : 0), Z = S(() => vt.value ? X.value[yt.value] : void 0), bt = S(() => !!Z.value?.crop), xt = S(() => Z.value?.url ?? mt.value), St = S(() => Z.value?.label ?? ht.value), Q = S(() => {
-			let e = Y.value;
-			return (e ? ce(r.event, e) : [...new Set(r.event.types)]).filter((e) => e !== "motion" && e !== "audio");
-		}), Ct = S(() => r.cameraName ?? r.event.cameraId), wt = S(() => X.value.map((e) => ({
+		}), St = C(() => X.value.length > 1), Ct = C(() => X.value.length ? Math.min(V.value, X.value.length - 1) : 0), Z = C(() => St.value ? X.value[Ct.value] : void 0), wt = C(() => !!Z.value?.crop), Tt = C(() => Z.value?.url ?? yt.value), Et = C(() => Z.value?.label ?? bt.value), Q = C(() => {
+			let e = J.value;
+			return (e ? ue(r.event, e) : [...new Set(r.event.types)]).filter((e) => e !== "motion" && e !== "audio");
+		}), Dt = C(() => r.cameraName ?? r.event.cameraId), Ot = C(() => X.value.map((e) => ({
 			url: e.url,
 			type: e.type
-		}))), Tt = S(() => Q.value.slice(0, Et.value.icons)), Et = S(() => {
-			let e = ft.value;
+		}))), kt = C(() => Q.value.slice(0, At.value.icons)), At = C(() => {
+			let e = W.value;
 			if (!e) return {
 				icons: 2,
 				tiles: 2
 			};
-			let t = e - dt;
-			r.selectionMode && (t -= ut);
-			let n = wt.value.length > 0 ? 52 : 0, i = It(Q.value.length, Math.max(0, t - n), st), a = Q.value.length > 0 ? Math.max(1, i) : 0, o = a * st + (a < Q.value.length ? lt : 0);
+			let t = e - gt;
+			r.selectionMode && (t -= ht);
+			let n = Ot.value.length > 0 ? 52 : 0, i = Vt(Q.value.length, Math.max(0, t - n), ft), a = Q.value.length > 0 ? Math.max(1, i) : 0, o = a * ft + (a < Q.value.length ? mt : 0);
 			return {
 				icons: a,
-				tiles: It(wt.value.length, Math.max(0, t - o), ct)
+				tiles: Vt(Ot.value.length, Math.max(0, t - o), pt)
 			};
-		}), Dt = S(() => Q.value.slice(Et.value.icons)), Ot = S(() => wt.value.slice(0, Et.value.tiles)), kt = S(() => wt.value.length - Et.value.tiles), At = S(() => {
-			let e = new Date(Y.value?.firstSeen ?? r.event.thumbnailAt ?? r.event.startTime), t = /* @__PURE__ */ new Date(), n = e.toDateString() === t.toDateString(), i = e.toLocaleTimeString([], {
+		}), jt = C(() => Q.value.slice(At.value.icons)), Mt = C(() => Ot.value.slice(0, At.value.tiles)), Nt = C(() => Ot.value.length - At.value.tiles), Pt = C(() => {
+			let e = new Date(J.value?.firstSeen ?? r.event.thumbnailAt ?? r.event.startTime), t = /* @__PURE__ */ new Date(), n = e.toDateString() === t.toDateString(), i = e.toLocaleTimeString([], {
 				hour: "2-digit",
 				minute: "2-digit"
 			});
@@ -214,37 +214,40 @@ var He = _({
 				month: "short",
 				day: "numeric"
 			})} ${i}`;
-		}), jt = S(() => !!(_.value && r.event.endTime && r.event.hasRecording !== !1)), Mt = S(() => I ? R.value ? f("views.recordings.no_preview") : z.value ? I.status.value === "unavailable" ? f("views.recordings.no_preview") : I.status.value === "playing" && I.previewTimeMs.value ? zt(I.previewTimeMs.value) : "" : "" : ""), Nt = S(() => {
+		}), Ft = C(() => !!(v.value && r.event.endTime && r.event.hasRecording !== !1)), It = C(() => A ? I.value ? c("views.recordings.no_preview") : L.value ? A.status.value === "unavailable" ? c("views.recordings.no_preview") : A.status.value === "playing" && A.previewTimeMs.value ? Wt(A.previewTimeMs.value) : "" : "" : ""), Lt = C(() => {
 			let e = Z.value;
 			if (e && e.type === "face") return e.label ? e.label : "unknown";
-		}), Pt = S(() => {
+		}), Rt = C(() => {
 			let e = [];
-			return pt.value && Nt.value !== void 0 && e.push({
+			return vt.value && Lt.value !== void 0 && e.push({
 				key: "reassign",
-				label: f("views.recordings.reassign_face"),
-				icon: He,
-				loading: G.value,
-				onClick: () => Kt()
+				label: c("views.recordings.reassign_face"),
+				icon: Ue,
+				loading: U.value,
+				onClick: () => Zt()
 			}), r.camera && e.push({
 				key: "trace",
-				label: f("views.recordings.open_trace"),
-				icon: he,
-				onClick: () => i("openTrace", Y.value?.firstSeen)
+				label: c("views.recordings.open_trace"),
+				icon: Ce,
+				onClick: () => i("openTrace", J.value?.firstSeen)
 			}), e.push({
 				key: "ask",
-				label: f("views.recordings.ask_assistant"),
-				icon: Ne,
-				onClick: () => Ft()
-			}), jt.value && e.push({
+				label: c("views.recordings.ask_assistant"),
+				icon: Re,
+				onClick: () => Bt()
+			}), Ft.value && e.push({
 				key: "download",
-				label: f("views.recordings.download"),
-				icon: xe,
-				loading: H.value,
-				onClick: () => Yt()
+				label: c("views.recordings.download"),
+				icon: je,
+				loading: B.value,
+				onClick: () => en()
 			}), e;
 		});
-		function Ft() {
-			let e = f("views.recordings.ask_assistant_prompt", {
+		function zt() {
+			xe(P.value?.hide);
+		}
+		function Bt() {
+			let e = c("views.recordings.ask_assistant_prompt", {
 				camera: r.cameraName ?? r.camera?.name ?? r.event.cameraId,
 				time: new Date(r.event.startTime).toLocaleString(),
 				id: r.event.id
@@ -254,308 +257,279 @@ var He = _({
 				query: { prompt: e }
 			});
 		}
-		function It(e, t, n) {
-			return e === 0 || t < n ? 0 : e * n <= t ? e : Math.max(0, Math.floor((t - lt) / n));
+		function Vt(e, t, n) {
+			return e === 0 || t < n ? 0 : e * n <= t ? e : Math.max(0, Math.floor((t - mt) / n));
 		}
-		function Lt(e) {
+		function Ht(e) {
 			let t = X.value.length;
-			t && ($(), U.value = (yt.value + e + t) % t);
+			t && ($(), V.value = (Ct.value + e + t) % t);
 		}
-		function Rt(e, t) {
-			vt.value && (t.stopPropagation(), $(), U.value = e);
+		function Ut(e, t) {
+			St.value && (t.stopPropagation(), $(), V.value = e);
 		}
 		function $() {
-			R.value = !1, I && z.value && (z.value = !1, I.onHoverEnd());
+			I.value = !1, A && L.value && (L.value = !1, A.onHoverEnd());
 		}
-		function zt(e) {
+		function Wt(e) {
 			let t = new Date(e);
 			return `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}:${String(t.getSeconds()).padStart(2, "0")}`;
 		}
-		function Bt() {
-			if (!I || yt.value > 0) return;
-			let e = Re.value;
+		function Gt() {
+			if (!A || Ct.value > 0) return;
+			let e = Fe.value;
 			if (!e) return;
-			let t = ue(r.event);
+			let t = de(r.event);
 			if (r.event.hasRecording === !1 || !t) {
-				R.value = !0;
+				I.value = !0;
 				return;
 			}
-			z.value = !0, I.onHoverStart(e, r.event.cameraId, r.event.id, r.event.startTime, t, r.camera?.zones?.privacy, se(r.event));
+			L.value = !0, A.onHoverStart(e, r.event.cameraId, r.event.id, r.event.startTime, t, r.camera?.zones?.privacy, ae(r.event));
 		}
-		function Vt() {
-			Ve.blocksMouseEnter() || Bt();
+		function Kt() {
+			He.blocksMouseEnter() || Gt();
 		}
-		function Ht() {
-			R.value = !1, I && (z.value = !1, I.onHoverEnd());
+		function qt() {
+			I.value = !1, A && (L.value = !1, A.onHoverEnd());
 		}
-		async function Ut(e = 2) {
+		async function Jt(e = 2) {
 			let t = await r.loadThumbnails(r.event.id, r.event.startTime);
 			if (t) {
-				B.value = t;
-				let e = L(t, r.event, "card");
-				V.value = e.url ? "loaded" : "empty";
-			} else if (e > 0) return await new Promise((e) => setTimeout(e, 500)), Ut(e - 1);
-			else V.value = r.event.state === "active" ? "loading" : "empty";
+				R.value = t;
+				let e = pe(t, r.event, "card");
+				z.value = e.url ? "loaded" : "empty";
+			} else if (e > 0) return await new Promise((e) => setTimeout(e, 500)), Jt(e - 1);
+			else z.value = r.event.state === "active" ? "loading" : "empty";
 		}
-		function Wt() {
-			if (!Ve.consumesClick()) {
+		function Yt() {
+			if (!He.consumesClick()) {
 				if (r.selectionMode) {
 					i("select");
 					return;
 				}
-				i("scrollToEvent", Y.value?.firstSeen ?? Ee(r.event));
+				i("scrollToEvent", J.value?.firstSeen ?? be(r.event));
 			}
 		}
-		function Gt(e) {
-			$(), Be.value?.toggleMenu(e);
+		async function Xt(e) {
+			$(), F.value || (F.value = !0, await h()), P.value?.toggleMenu(e);
 		}
-		function Kt() {
-			let e = Nt.value;
-			e !== void 0 && b.openComponentDialog(Ue, {
+		function Zt() {
+			let e = Lt.value;
+			e !== void 0 && x.openComponentDialog(We, {
 				data: {
-					title: f("views.recordings.reassign_face"),
-					confirmText: f("components.form.button.save"),
+					title: c("views.recordings.reassign_face"),
+					confirmText: c("components.form.button.save"),
 					contentProps: {
 						cropUrl: Z.value?.url,
 						oldName: e
 					}
 				},
-				onConfirm: (e) => qt(e)
+				onConfirm: (e) => Qt(e)
 			});
 		}
-		async function qt(e) {
-			let t = Nt.value;
-			if (t === void 0 || G.value) return;
-			let n = Z.value?.faceSeg ?? -1, i = _.value;
+		async function Qt(e) {
+			let t = Lt.value;
+			if (t === void 0 || U.value) return;
+			let n = Z.value?.faceSeg ?? -1, i = v.value;
 			if (i?.reassignEventFace) {
-				G.value = !0;
+				U.value = !0;
 				try {
-					await i.reassignEventFace(r.event.id, n, t, e) > 0 && le(r.event.id), s.add({
+					await i.reassignEventFace(r.event.id, n, t, e) > 0 && Ne(r.event.id), s.add({
 						severity: "success",
-						detail: f("views.recordings.reassign_done"),
+						detail: c("views.recordings.reassign_done"),
 						life: 3e3
 					});
 				} catch (e) {
 					s.add({
 						severity: "error",
-						detail: we(e),
+						detail: Ee(e),
 						life: 5e3
 					});
 				} finally {
-					G.value = !1;
+					U.value = !1;
 				}
 			}
 		}
-		async function Jt() {
-			let e = !K.value;
-			W.value = e;
+		async function $t() {
+			let e = !G.value;
+			H.value = e;
 			try {
 				await m.setEventFavorite(r.event.id, e);
 			} catch (e) {
-				W.value = null, s.add({
+				H.value = null, s.add({
 					severity: "error",
-					detail: we(e),
+					detail: Ee(e),
 					life: 5e3
 				});
 			}
 		}
-		async function Yt() {
-			if (H.value) return;
-			let e = _.value;
+		async function en() {
+			if (B.value) return;
+			let e = v.value;
 			if (e?.nvrExport && r.event.endTime) {
-				H.value = !0;
+				B.value = !0;
 				try {
 					let t = await e.nvrExport(r.event.cameraId, r.event.startTime * 1e3, r.event.endTime * 1e3);
-					await Se({
+					await Me({
 						url: t.url,
 						filename: t.filename
 					});
 				} catch (e) {
 					o.error("Download failed:", e), s.add({
 						severity: "error",
-						summary: f("views.recordings.download_failed"),
-						detail: we(e),
+						summary: c("views.recordings.download_failed"),
+						detail: Ee(e),
 						life: 5e3
 					});
 				} finally {
-					H.value = !1;
+					B.value = !1;
 				}
 			}
 		}
-		return w(() => m.storeVersion.value, () => {
+		return ee(() => m.storeVersion.value, () => {
 			let e = m.getCachedThumbnails(r.event.id);
 			if (!e) {
-				B.value && Ut();
+				R.value && Jt();
 				return;
 			}
-			B.value = e, L(e, r.event, "card").url && (V.value = "loaded");
-		}), ee(() => {
-			M === "loading" && Ut();
+			R.value = e, pe(e, r.event, "card").url && (z.value = "loaded");
+		}), Pe(Be, (e) => {
+			let t = e[0]?.contentRect.width ?? 0, n = Math.round(t / _t) * _t;
+			n !== W.value && (W.value = n);
+		}), re(() => {
+			te === "loading" && Jt();
 		}), (t, r) => {
-			let i = me, o = ke, s = F, c = ve, f = Ie, p = De, m = de, _ = Te, b = ge, S = pe, w = te;
-			return u(), T("div", {
+			let i = se, o = ie, s = ve, c = ke, l = Te, p = Se, m = Ae, h = ye;
+			return d(), T("div", {
 				ref_key: "rootRef",
-				ref: Fe,
+				ref: N,
 				class: "recording-card relative group cursor-pointer",
-				onClick: Wt,
-				onMouseenter: Vt,
-				onMouseleave: Ht
-			}, [A("div", {
-				class: h(["bg-neutral-900 w-full rounded-xl overflow-hidden relative transition-shadow duration-200", { "ring-2 ring-inset ring-primary/70": e.siblingActive }]),
+				onClickCapture: zt,
+				onClick: Yt,
+				onMouseenter: Kt,
+				onMouseleave: qt
+			}, [k("div", {
+				class: g(["bg-neutral-900 w-full rounded-xl overflow-hidden relative transition-shadow duration-200", { "ring-2 ring-inset ring-primary/70": e.siblingActive }]),
 				style: { "aspect-ratio": "1/1" }
 			}, [
-				x(V) === "loading" ? (u(), v(i, {
-					key: 0,
-					width: "100%",
-					height: "100%",
-					class: "rounded-xl"
-				})) : x(xt) ? (u(), T(O, { key: 1 }, [x(bt) ? (u(), T("img", {
-					key: 0,
-					src: x(xt),
-					"aria-hidden": "true",
-					class: "absolute inset-0 w-full h-full object-cover blur-xl scale-110 opacity-50 pointer-events-none"
-				}, null, 8, We)) : y("", !0), P(o, {
-					src: x(xt),
-					alt: x(Ct),
+				S(z) === "loading" ? (d(), T("div", Ge)) : S(Tt) ? (d(), y(i, {
+					key: 1,
+					src: S(Tt),
+					alt: S(Dt),
 					class: "pointer-events-none w-full h-full transition-transform duration-300 group-hover:scale-105",
-					"image-style": { objectFit: x(bt) ? "contain" : "cover" },
+					"image-style": { objectFit: S(wt) ? "contain" : "cover" },
 					"image-container-class": "w-full h-full"
 				}, null, 8, [
 					"src",
 					"alt",
 					"image-style"
-				])], 64)) : (u(), T("div", Ge, [(u(), v(g(x(E)[x(gt)] ?? x(E).motion), { class: "w-10 h-10 text-white/20" }))])),
-				x(I) ? j((u(), T("canvas", {
+				])) : (d(), T("div", Ke, [(d(), y(_(S(w)[S(xt)] ?? S(w).motion), { class: "w-10 h-10 text-white/20" }))])),
+				S(A) ? ne((d(), T("canvas", {
 					key: 3,
 					ref_key: "previewCanvasRef",
-					ref: Re,
+					ref: Fe,
 					class: "absolute inset-0 w-full h-full object-cover pointer-events-none z-[1]"
-				}, null, 512)), [[n, x(z)]]) : y("", !0),
-				r[2] ||= A("div", { class: "absolute inset-0 bg-transparent group-hover:bg-black/30 pointer-events-none transition-colors duration-200 z-[2]" }, null, -1),
-				A("div", Ke, [A("div", qe, [
-					A("p", Je, d(x(Ct)), 1),
-					x(_t) ? (u(), T("span", Ye, d(x(_t)), 1)) : y("", !0),
-					x(q) ? (u(), T("span", {
+				}, null, 512)), [[n, S(L)]]) : b("", !0),
+				r[2] ||= k("div", { class: "absolute inset-0 bg-transparent group-hover:bg-black/30 pointer-events-none transition-colors duration-200 z-[2]" }, null, -1),
+				k("div", qe, [k("div", Je, [
+					k("p", Ye, f(S(Dt)), 1),
+					S(Y) ? (d(), T("span", Xe, f(S(Y)), 1)) : b("", !0),
+					S(K) ? (d(), T("span", {
 						key: 1,
-						class: h(["text-[10px] font-bold text-white px-1.5 py-0.5 rounded-md shrink-0", x(q).color])
-					}, d(x(q).label), 3)) : y("", !0),
-					x(pt) && !e.selectionMode ? j((u(), v(f, {
+						class: g(["text-[10px] font-bold text-white px-1.5 py-0.5 rounded-md shrink-0", S(K).color])
+					}, f(S(K).label), 3)) : b("", !0),
+					S(vt) && !e.selectionMode ? (d(), T("button", {
 						key: 2,
-						rounded: "",
-						text: "",
-						severity: "secondary",
-						class: "!w-5 !h-5 !p-0 shrink-0 bg-black/60 hover:!bg-black/80",
-						onClick: a(Jt, ["stop"]),
+						title: S(G) ? t.$t("views.recordings.unfavorite") : t.$t("views.recordings.favorite"),
+						type: "button",
+						class: "card-icon-button w-5 h-5 shrink-0",
+						onClick: a($t, ["stop"]),
 						onMouseenter: $
-					}, {
-						icon: C(() => [x(K) ? (u(), v(s, {
-							key: 0,
-							class: "w-3 h-3 text-yellow-400"
-						})) : (u(), v(c, {
-							key: 1,
-							class: "w-3 h-3 text-white"
-						}))]),
-						_: 1
-					})), [[
-						w,
-						{ value: x(K) ? t.$t("views.recordings.unfavorite") : t.$t("views.recordings.favorite") },
-						void 0,
-						{ left: !0 }
-					]]) : y("", !0),
-					x(Pt).length > 0 && !e.selectionMode ? j((u(), v(f, {
+					}, [S(G) ? (d(), y(o, {
+						key: 0,
+						class: "w-3 h-3 text-yellow-400"
+					})) : (d(), y(s, {
+						key: 1,
+						class: "w-3 h-3 text-white"
+					}))], 40, Ze)) : b("", !0),
+					S(Rt).length > 0 && !e.selectionMode ? (d(), T("button", {
 						key: 3,
-						rounded: "",
-						text: "",
-						severity: "secondary",
-						loading: x(H) || x(G),
-						class: "!w-5 !h-5 !p-0 shrink-0 bg-black/60 hover:!bg-black/80",
-						onClick: a(Gt, ["stop"]),
+						title: t.$t("views.recordings.more_actions"),
+						type: "button",
+						class: "card-icon-button w-5 h-5 shrink-0",
+						disabled: S(B) || S(U),
+						onClick: a(Xt, ["stop"]),
 						onMouseenter: $
-					}, {
-						icon: C(() => [P(p, { class: "w-3 h-3 text-white" })]),
-						_: 1
-					}, 8, ["loading"])), [[
-						w,
-						{ value: t.$t("views.recordings.more_actions") },
-						void 0,
-						{ left: !0 }
-					]]) : y("", !0)
-				]), A("p", Xe, d(x(At)), 1)]),
-				x(X).length > 1 ? (u(), T(O, { key: 4 }, [P(f, {
-					rounded: "",
-					text: "",
-					severity: "secondary",
-					class: "carousel-nav !absolute left-1 top-1/2 -translate-y-1/2 z-[3] !w-7 !h-7 !p-0 bg-black/40 hover:!bg-black/60 transition-opacity duration-200",
+					}, [S(B) || S(U) ? (d(), y(c, {
+						key: 0,
+						class: "w-3 h-3 text-white"
+					})) : (d(), y(l, {
+						key: 1,
+						class: "w-3 h-3 text-white"
+					}))], 40, Qe)) : b("", !0)
+				]), k("p", $e, f(S(Pt)), 1)]),
+				S(X).length > 1 ? (d(), T(D, { key: 4 }, [k("button", {
+					type: "button",
+					class: "card-icon-button carousel-nav absolute left-1 top-1/2 -translate-y-1/2 z-[3] w-7 h-7 transition-opacity duration-200",
 					"aria-label": t.$t("views.recordings.prev_image"),
-					onClick: r[0] ||= a((e) => Lt(-1), ["stop"]),
+					onClick: r[0] ||= a((e) => Ht(-1), ["stop"]),
 					onMouseenter: $
-				}, {
-					icon: C(() => [P(m, { class: "w-5 h-5 text-white" })]),
-					_: 1
-				}, 8, ["aria-label"]), P(f, {
-					rounded: "",
-					text: "",
-					severity: "secondary",
-					class: "carousel-nav !absolute right-1 top-1/2 -translate-y-1/2 z-[3] !w-7 !h-7 !p-0 bg-black/40 hover:!bg-black/60 transition-opacity duration-200",
+				}, [M(p, { class: "w-5 h-5 text-white" })], 40, et), k("button", {
+					type: "button",
+					class: "card-icon-button carousel-nav absolute right-1 top-1/2 -translate-y-1/2 z-[3] w-7 h-7 transition-opacity duration-200",
 					"aria-label": t.$t("views.recordings.next_image"),
-					onClick: r[1] ||= a((e) => Lt(1), ["stop"]),
+					onClick: r[1] ||= a((e) => Ht(1), ["stop"]),
 					onMouseenter: $
-				}, {
-					icon: C(() => [P(_, { class: "w-5 h-5 text-white" })]),
-					_: 1
-				}, 8, ["aria-label"])], 64)) : y("", !0),
-				x(St) ? (u(), T("div", {
+				}, [M(m, { class: "w-5 h-5 text-white" })], 40, tt)], 64)) : b("", !0),
+				S(Et) ? (d(), T("div", {
 					key: 5,
-					class: h(["absolute left-1/2 -translate-x-1/2 z-[3] max-w-[85%] pointer-events-none transition-all duration-200", x(Mt) ? "bottom-16" : "bottom-10"])
-				}, [A("span", Ze, d(x(St)), 1)], 2)) : y("", !0),
-				A("div", {
+					class: g(["absolute left-1/2 -translate-x-1/2 z-[3] max-w-[85%] pointer-events-none transition-all duration-200", S(It) ? "bottom-16" : "bottom-10"])
+				}, [k("span", nt, f(S(Et)), 1)], 2)) : b("", !0),
+				k("div", {
 					ref_key: "footerRef",
-					ref: ze,
+					ref: Be,
 					class: "absolute bottom-2 left-2 right-2 flex items-center justify-between gap-2 z-[3]"
-				}, [A("div", Qe, [
-					e.selectionMode ? (u(), T("div", {
+				}, [k("div", rt, [
+					e.selectionMode ? (d(), T("div", {
 						key: 0,
-						class: h(["w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors shrink-0", e.selected ? "bg-primary border-primary" : "bg-black/40 border-white/80"])
-					}, [e.selected ? (u(), v(b, {
+						class: g(["w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors shrink-0", e.selected ? "bg-primary border-primary" : "bg-black/40 border-white/80"])
+					}, [e.selected ? (d(), y(h, {
 						key: 0,
 						class: "w-4 h-4 text-white"
-					})) : y("", !0)], 2)) : y("", !0),
-					(u(!0), T(O, null, l(x(Tt), (e) => (u(), T("div", {
+					})) : b("", !0)], 2)) : b("", !0),
+					(d(!0), T(D, null, u(S(kt), (e) => (d(), T("div", {
 						key: e,
 						class: "flex items-center justify-center w-5 h-5 rounded-md bg-black/60 shrink-0"
-					}, [(u(), v(g(x(E)[e] ?? x(E).motion), { class: "w-3 h-3 text-white/80" }))]))), 128)),
-					x(Dt).length > 0 ? (u(), T("span", {
+					}, [(d(), y(_(S(w)[e] ?? S(w).motion), { class: "w-3 h-3 text-white/80" }))]))), 128)),
+					S(jt).length > 0 ? (d(), T("span", {
 						key: 1,
-						title: x(Dt).join(", "),
+						title: S(jt).join(", "),
 						class: "text-[10px] text-white/60 font-medium shrink-0"
-					}, " +" + d(x(Dt).length), 9, $e)) : y("", !0)
-				]), x(Ot).length > 0 || x(kt) > 0 ? (u(), T("div", et, [(u(!0), T(O, null, l(x(Ot), (e, t) => (u(), T("div", {
+					}, " +" + f(S(jt).length), 9, it)) : b("", !0)
+				]), S(Mt).length > 0 || S(Nt) > 0 ? (d(), T("div", at, [(d(!0), T(D, null, u(S(Mt), (e, t) => (d(), T("div", {
 					key: t,
-					class: h(["w-7 h-7 rounded overflow-hidden border bg-neutral-800 cursor-pointer", t === x(yt) ? "border-primary/80" : "border-white/20"]),
-					onClick: (e) => Rt(t, e)
-				}, [A("img", {
+					class: g(["w-7 h-7 rounded overflow-hidden border bg-neutral-800 cursor-pointer", t === S(Ct) ? "border-primary/80" : "border-white/20"]),
+					onClick: (e) => Ut(t, e)
+				}, [k("img", {
 					src: e.url,
 					alt: e.type,
 					decoding: "async",
 					loading: "lazy",
 					class: "w-full h-full object-cover"
-				}, null, 8, nt)], 10, tt))), 128)), x(kt) > 0 ? (u(), T("span", rt, "+" + d(x(kt)), 1)) : y("", !0)])) : y("", !0)], 512),
-				x(I) && x(z) && x(I).isLoading.value ? (u(), T("div", it, [P(S, {
-					class: "w-[28px] h-[28px] m-0",
-					"stroke-width": "6"
-				})])) : y("", !0),
-				x(Mt) ? (u(), T("div", at, [A("span", ot, d(x(Mt)), 1)])) : y("", !0)
-			], 2), P(ie, {
+				}, null, 8, st)], 10, ot))), 128)), S(Nt) > 0 ? (d(), T("span", ct, "+" + f(S(Nt)), 1)) : b("", !0)])) : b("", !0)], 512),
+				S(A) && S(L) && S(A).isLoading.value ? (d(), T("div", lt, [M(c, { class: "w-7 h-7 text-white" })])) : b("", !0),
+				S(It) ? (d(), T("div", ut, [k("span", dt, f(S(It)), 1)])) : b("", !0)
+			], 2), S(F) ? (d(), y(fe, {
+				key: 0,
 				ref_key: "cardMenuRef",
-				ref: Be,
-				items: x(Pt),
+				ref: P,
+				items: S(Rt),
 				popover: { pt: { content: { class: "p-0! rounded-xl! overflow-hidden!" } } }
-			}, null, 8, ["items"])], 544);
+			}, null, 8, ["items"])) : b("", !0)], 544);
 		};
 	}
-}), [["__scopeId", "data-v-7ce0bd00"]]), pt = {
+}), [["__scopeId", "data-v-22b538a5"]]), vt = {
 	name: "VirtualScroller",
-	components: { SpinnerIcon: Fe },
+	components: { SpinnerIcon: Be },
 	extends: {
 		name: "BaseVirtualScroller",
 		extends: i,
@@ -694,7 +668,9 @@ var He = _({
 			d_loading: this.loading,
 			loaderArr: [],
 			spacerStyle: {},
-			contentStyle: {}
+			contentStyle: {},
+			observedWidth: 0,
+			observedHeight: 0
 		};
 	},
 	element: null,
@@ -779,7 +755,7 @@ var He = _({
 		!this.initialized && this.viewInit();
 	},
 	unmounted() {
-		this.unbindResizeListener(), this.initialized = !1;
+		this.unbindResizeListener(), this.unbindSizeObserver(), this.initialized = !1;
 	},
 	methods: {
 		resolveItemKey(e, t) {
@@ -787,7 +763,7 @@ var He = _({
 			return typeof n == "function" ? n(e, t) ?? t : typeof n == "string" && typeof e == "object" && e ? e[n] ?? t : t;
 		},
 		viewInit() {
-			r(this.element) && (this.setContentEl(this.content), this.init(), this.calculateAutoSize(), this.bindResizeListener(), this.defaultWidth = t(this.element), this.defaultHeight = o(this.element), this.defaultContentWidth = t(this.content), this.defaultContentHeight = o(this.content), this.initialized = !0);
+			r(this.element) && (this.setContentEl(this.content), this.bindSizeObserver(), this.init(), this.calculateAutoSize(), this.bindResizeListener(), this.defaultWidth = t(this.element), this.defaultHeight = o(this.element), this.defaultContentWidth = t(this.content), this.defaultContentHeight = o(this.content), this.initialized = !0);
 		},
 		init() {
 			this.disabled || (this.setSize(), this.calculateOptions(), this.setSpacerSize());
@@ -875,13 +851,13 @@ var He = _({
 			};
 		},
 		calculateNumItems() {
-			let e = this.isBoth(), t = this.isHorizontal(), n = this.itemSize, r = this.getContentPosition(), i = this.element ? this.element.offsetWidth - r.left : 0, a = this.element ? this.element.offsetHeight - r.top : 0, o = (e, t) => Math.ceil(e / (t || e)), s = (e) => Math.ceil(e / 2), c = e ? {
-				rows: o(a, n[0]),
-				cols: o(i, n[1])
-			} : o(t ? i : a, n);
+			let e = this.isBoth(), t = this.isHorizontal(), n = this.itemSize, r = this.getContentPosition(), i = this.observedWidth || (this.element ? this.element.offsetWidth : 0), a = this.observedHeight || (this.element ? this.element.offsetHeight : 0), o = i ? i - r.left : 0, s = a ? a - r.top : 0, c = (e, t) => Math.ceil(e / (t || e)), l = (e) => Math.ceil(e / 2), u = e ? {
+				rows: c(s, n[0]),
+				cols: c(o, n[1])
+			} : c(t ? o : s, n);
 			return {
-				numItemsInViewport: c,
-				numToleratedItems: this.d_numToleratedItems || (e ? [s(c.rows), s(c.cols)] : s(c))
+				numItemsInViewport: u,
+				numToleratedItems: this.d_numToleratedItems || (e ? [l(u.rows), l(u.cols)] : l(u))
 			};
 		},
 		calculateOptions() {
@@ -914,15 +890,16 @@ var He = _({
 		},
 		getContentPosition() {
 			if (this.content) {
+				if (this.cachedContentPosition && this.cachedContentElement === this.content) return this.cachedContentPosition;
 				let e = getComputedStyle(this.content), t = parseFloat(e.paddingLeft) + Math.max(parseFloat(e.left) || 0, 0), n = parseFloat(e.paddingRight) + Math.max(parseFloat(e.right) || 0, 0), r = parseFloat(e.paddingTop) + Math.max(parseFloat(e.top) || 0, 0), i = parseFloat(e.paddingBottom) + Math.max(parseFloat(e.bottom) || 0, 0);
-				return {
+				return this.cachedContentElement = this.content, this.cachedContentPosition = {
 					left: t,
 					right: n,
 					top: r,
 					bottom: i,
 					x: t + n,
 					y: r + i
-				};
+				}, this.cachedContentPosition;
 			}
 			return {
 				left: 0,
@@ -1061,6 +1038,15 @@ var He = _({
 		bindResizeListener() {
 			this.resizeListener || (this.resizeListener = this.onResize.bind(this), window.addEventListener("resize", this.resizeListener), window.addEventListener("orientationchange", this.resizeListener));
 		},
+		bindSizeObserver() {
+			this.sizeObserver || !this.element || typeof ResizeObserver > "u" || (this.sizeObserver = new ResizeObserver((e) => {
+				let t = e[0]?.borderBoxSize?.[0];
+				this.observedWidth = t ? t.inlineSize : e[0]?.contentRect.width ?? 0, this.observedHeight = t ? t.blockSize : e[0]?.contentRect.height ?? 0;
+			}), this.sizeObserver.observe(this.element));
+		},
+		unbindSizeObserver() {
+			this.sizeObserver &&= (this.sizeObserver.disconnect(), null);
+		},
 		unbindResizeListener() {
 			this.resizeListener &&= (window.removeEventListener("resize", this.resizeListener), window.removeEventListener("orientationchange", this.resizeListener), null);
 		},
@@ -1103,21 +1089,21 @@ var He = _({
 			this.content = e;
 		}
 	}
-}, K = ["tabindex"];
-function q(e, t, n, r, i, a) {
+}, G = ["tabindex"];
+function K(e, t, n, r, i, a) {
 	let o = E("SpinnerIcon");
-	return e.disabled ? (u(), T(O, { key: 1 }, [f(e.$slots, "default"), f(e.$slots, "content", {
+	return e.disabled ? (d(), T(D, { key: 1 }, [p(e.$slots, "default"), p(e.$slots, "content", {
 		items: e.items,
 		rows: e.items,
 		columns: a.loadedColumns
-	})], 64)) : (u(), T("div", p({
+	})], 64)) : (d(), T("div", m({
 		key: 0,
 		ref: a.elementRef,
 		class: a.containerClass,
 		tabindex: e.tabindex,
 		style: e.style
 	}, e.ptmi("root"), { onScroll: t[0] ||= (...e) => a.onScroll && a.onScroll(...e) }), [
-		f(e.$slots, "content", {
+		p(e.$slots, "content", {
 			styleClass: a.contentClass,
 			items: a.loadedItems,
 			getItemOptions: a.getOptions,
@@ -1132,162 +1118,144 @@ function q(e, t, n, r, i, a) {
 			vertical: a.isVertical(),
 			horizontal: a.isHorizontal(),
 			both: a.isBoth()
-		}, () => [A("div", p({
+		}, () => [k("div", m({
 			ref: a.contentRef,
 			class: a.contentClass,
 			style: i.contentStyle
-		}, e.ptm("content")), [(u(!0), T(O, null, l(a.loadedItems, (t, n) => f(e.$slots, "item", {
+		}, e.ptm("content")), [(d(!0), T(D, null, u(a.loadedItems, (t, n) => p(e.$slots, "item", {
 			item: t,
 			options: a.getOptions(n)
 		}, void 0, void 0, a.resolveItemKey(t, n))), 128))], 16)]),
-		e.showSpacer ? (u(), T("div", p({
+		e.showSpacer ? (d(), T("div", m({
 			key: 0,
 			class: "p-virtualscroller-spacer",
 			style: i.spacerStyle
-		}, e.ptm("spacer")), null, 16)) : y("", !0),
-		!e.loaderDisabled && e.showLoader && i.d_loading ? (u(), T("div", p({
+		}, e.ptm("spacer")), null, 16)) : b("", !0),
+		!e.loaderDisabled && e.showLoader && i.d_loading ? (d(), T("div", m({
 			key: 1,
 			class: a.loaderClass
-		}, e.ptm("loader")), [e.$slots && e.$slots.loader ? (u(!0), T(O, { key: 0 }, l(i.loaderArr, (t, n) => f(e.$slots, "loader", { options: a.getLoaderOptions(n, a.isBoth() && { numCols: e.d_numItemsInViewport.cols }) }, void 0, void 0, n)), 128)) : y("", !0), f(e.$slots, "loadingicon", {}, () => [P(o, p({
+		}, e.ptm("loader")), [e.$slots && e.$slots.loader ? (d(!0), T(D, { key: 0 }, u(i.loaderArr, (t, n) => p(e.$slots, "loader", { options: a.getLoaderOptions(n, a.isBoth() && { numCols: e.d_numItemsInViewport.cols }) }, void 0, void 0, n)), 128)) : b("", !0), p(e.$slots, "loadingicon", {}, () => [M(o, m({
 			spin: "",
 			class: "p-virtualscroller-loading-icon"
-		}, e.ptm("loadingIcon")), null, 16)])], 16)) : y("", !0)
-	], 16, K));
+		}, e.ptm("loadingIcon")), null, 16)])], 16)) : b("", !0)
+	], 16, G));
 }
-var J = /*#__PURE__*/ I(pt, [["render", q]]), Y = {
+var q = /*#__PURE__*/ N(vt, [["render", K]]), J = {
+	aspectRatio: 1,
+	gap: 8,
+	hasMore: !1,
+	loadMore: void 0,
+	itemKey: void 0
+}, yt = { class: "recordings-row" }, bt = {
 	key: 1,
 	class: "pointer-events-none absolute bottom-2 left-1/2 -translate-x-1/2 z-10 rounded-full bg-black/60 p-1.5"
-}, mt = /*#__PURE__*/ I(/* @__PURE__ */ M({
+}, xt = /*#__PURE__*/ N(/* @__PURE__ */ A({
 	__name: "CuiRecordingsGrid",
-	props: {
+	props: /*@__PURE__*/ c({
 		items: {},
 		minItemWidth: {},
-		aspectRatio: { default: 1 },
-		gap: { default: 8 },
-		hasMore: {
-			type: Boolean,
-			default: !1
-		},
-		loadMore: {
-			type: Function,
-			default: void 0
-		},
-		itemKey: {
-			type: Function,
-			default: void 0
-		}
-	},
+		aspectRatio: {},
+		gap: {},
+		hasMore: { type: Boolean },
+		loadMore: { type: Function },
+		itemKey: { type: Function }
+	}, J),
 	setup(e, { expose: t }) {
-		let n = e, r = k("containerRef"), { width: i, height: a } = Ae(r), o = S(() => a.value > 0 ? `${a.value}px` : void 0), s = S(() => {
+		let n = e, r = O("containerRef"), { width: i, height: a } = Fe(r), o = j(0), s = j(!1), c = null, l = !1, f = C(() => a.value > 0 ? `${a.value}px` : void 0), m = C(() => {
 			let e = i.value;
-			if (!e) return 0;
-			let t = n.gap;
-			return Math.max(1, Math.floor((e + t) / (n.minItemWidth + t)));
-		}), c = S(() => {
-			let e = i.value, t = s.value;
+			return e ? Math.max(1, Math.floor((e + n.gap) / (n.minItemWidth + n.gap))) : 0;
+		}), g = C(() => {
+			let e = i.value, t = m.value;
 			return !e || !t ? 0 : Math.floor((e - (t - 1) * n.gap) / t);
-		}), d = S(() => c.value ? Math.floor(c.value / n.aspectRatio) : 0), p = S(() => d.value ? d.value + n.gap : 0), h = S(() => {
-			let e = s.value;
+		}), _ = C(() => g.value ? Math.floor(g.value / n.aspectRatio) : 0), v = C(() => _.value ? _.value + n.gap : 0), x = C(() => {
+			let e = m.value;
 			if (!e) return [];
 			let t = [];
 			for (let r = 0; r < n.items.length; r += e) t.push(n.items.slice(r, r + e));
 			return t;
 		});
-		function g(e) {
+		function E(e) {
 			if (n.itemKey) return n.itemKey(e);
 			let t = e;
 			return t.id ?? t.key ?? JSON.stringify(e);
 		}
-		function _(e) {
+		function ne(e) {
 			let t = e;
-			if (t && t.length !== 0) return g(t[0]);
+			if (t && t.length !== 0) return E(t[0]);
 		}
-		let b = N(!1), E = null;
-		async function j() {
-			if (b.value || !n.hasMore || !n.loadMore || E !== null && n.items.length === E) return;
-			b.value = !0;
+		async function A() {
+			if (s.value || !n.hasMore || !n.loadMore || c !== null && n.items.length === c) return;
+			s.value = !0;
 			let e = n.items.length;
 			try {
 				await Promise.resolve(n.loadMore());
 			} finally {
-				b.value = !1, E = n.items.length === e ? e : null;
+				s.value = !1, c = n.items.length === e ? e : null;
 			}
 		}
-		let M = N(0);
-		function ee(e) {
+		function re(e) {
 			let t = e.target;
-			if (!t) return;
-			M.value = t.scrollTop;
-			let n = p.value * 3;
-			t.scrollTop + t.clientHeight >= t.scrollHeight - n && j();
+			t && (o.value = t.scrollTop, t.scrollTop + t.clientHeight >= t.scrollHeight - v.value * 3 && A());
 		}
-		function te() {
+		function ie() {
 			(r.value?.querySelector(".recordings-scroll"))?.scrollTo({
 				top: 0,
 				behavior: "smooth"
 			});
 		}
-		let F = !1;
-		return w([
+		return te(() => {
+			let e = r.value;
+			e && g.value && (e.style.setProperty("--cell-w", `${g.value}px`), e.style.setProperty("--cell-h", `${_.value}px`), e.style.setProperty("--cell-gap", `${n.gap}px`));
+		}), ee([
 			() => n.items.length,
 			a,
-			p,
+			v,
 			() => n.hasMore
 		], () => {
-			F || (F = !0, m(() => {
-				if (F = !1, !n.hasMore) return;
-				let e = a.value, t = h.value.length * p.value;
-				e > 0 && p.value > 0 && t < e + p.value && j();
+			l || (l = !0, h(() => {
+				l = !1, n.hasMore && v.value && a.value && x.value.length * v.value < a.value + v.value && A();
 			}));
 		}, { flush: "post" }), t({
-			scrollToTop: te,
-			scrollY: M
-		}), (t, n) => {
-			let i = J, a = Be;
-			return u(), T("div", {
+			scrollToTop: ie,
+			scrollY: o
+		}), (e, t) => {
+			let n = q, i = ke;
+			return d(), T("div", {
 				ref_key: "containerRef",
 				ref: r,
 				class: "recordings-grid-root relative"
-			}, [x(h).length > 0 && x(c) > 0 ? (u(), v(i, {
+			}, [S(x).length > 0 && S(g) > 0 ? (d(), y(n, {
 				key: 0,
-				items: x(h),
-				"item-size": x(p),
-				"scroll-height": x(o),
+				items: S(x),
+				"item-size": S(v),
+				"scroll-height": S(f),
+				"num-tolerated-items": S(2),
+				"item-key": ne,
 				orientation: "vertical",
 				class: "recordings-scroll",
-				"num-tolerated-items": 2,
-				"item-key": _,
-				onScroll: ee
+				onScroll: re
 			}, {
-				item: C(({ item: n }) => [A("div", {
-					class: "recordings-row",
-					style: D({
-						height: `${x(p)}px`,
-						gap: `${e.gap}px`
-					})
-				}, [(u(!0), T(O, null, l(n, (e) => (u(), T("div", {
-					key: g(e),
-					style: D({
-						width: `${x(c)}px`,
-						height: `${x(d)}px`
-					})
-				}, [f(t.$slots, "item", { item: e }, void 0, !0)], 4))), 128))], 4)]),
+				item: w(({ item: t }) => [k("div", yt, [(d(!0), T(D, null, u(t, (t) => (d(), T("div", {
+					key: E(t),
+					class: "recordings-cell"
+				}, [p(e.$slots, "item", { item: t }, void 0, !0)]))), 128))])]),
 				_: 3
 			}, 8, [
 				"items",
 				"item-size",
-				"scroll-height"
-			])) : y("", !0), x(b) ? (u(), T("div", Y, [P(a, {
+				"scroll-height",
+				"num-tolerated-items"
+			])) : b("", !0), S(s) ? (d(), T("div", bt, [M(i, {
 				width: "18px",
 				height: "18px",
 				class: "text-white"
-			})])) : y("", !0)], 512);
+			})])) : b("", !0)], 512);
 		};
 	}
-}), [["__scopeId", "data-v-57a2aa74"]]);
+}), [["__scopeId", "data-v-1270305c"]]);
 //#endregion
 //#region src/components/CuiRecordings/ungrouped.ts
-function ht(e) {
+function Y(e) {
 	if (e.episode) return e.episode.endTime;
 	if (e.segIndex !== void 0) {
 		let t = e.event.segments?.[e.segIndex];
@@ -1295,7 +1263,7 @@ function ht(e) {
 	}
 	return e.event.thumbnailAt ?? e.event.startTime;
 }
-function gt(e) {
+function X(e) {
 	let t = [];
 	for (let n of e) {
 		let e = n.segments ?? [];
@@ -1314,7 +1282,7 @@ function gt(e) {
 			});
 		});
 	}
-	return t.sort((e, t) => ht(t) - ht(e)), t;
+	return t.sort((e, t) => Y(t) - Y(e)), t;
 }
 //#endregion
-export { ft as i, ht as n, mt as r, gt as t };
+export { W as i, Y as n, xt as r, X as t };