@wyxos/vibe 5.4.0 → 5.4.1

package/lib/index.js

@@ -146,7 +146,7 @@ var R = {
 			"show-load-more"
 		]));
 	}
-}), G = ["role"], K = { class: "gallery-status" }, ee = /* @__PURE__ */ d({
+}), ee = ["role"], G = { class: "gallery-status" }, te = /* @__PURE__ */ d({
 	__name: "FeedStatus",
 	props: {
 		actions: {},
@@ -160,7 +160,7 @@ var R = {
 		return (n, u) => (b(), s("main", {
 			class: "gallery-shell",
 			role: r.state.error ? "alert" : r.state.isLoading ? "status" : void 0
-		}, [c("p", K, [r.state.error ? (b(), s(e, { key: 0 }, [l(" Unable to load media. ")], 64)) : r.state.isLoading ? (b(), s(e, { key: 1 }, [l(" Loading media… ")], 64)) : (b(), s(e, { key: 2 }, [l(" No media found. ")], 64))]), t.feedFooter ? (b(), a(W, {
+		}, [c("p", G, [r.state.error ? (b(), s(e, { key: 0 }, [l(" Unable to load media. ")], 64)) : r.state.isLoading ? (b(), s(e, { key: 1 }, [l(" Loading media… ")], 64)) : (b(), s(e, { key: 2 }, [l(" No media found. ")], 64))]), t.feedFooter ? (b(), a(W, {
 			key: 0,
 			actions: t.actions,
 			"can-retry-end": t.canRetryEnd,
@@ -182,36 +182,36 @@ var R = {
 			"is-loading",
 			"load-more-locked",
 			"state"
-		])) : o("", !0)], 8, G));
+		])) : o("", !0)], 8, ee));
 	}
 });
-function q(e) {
+function K(e) {
 	return e.scrollHeight - e.scrollTop - e.clientHeight <= 240;
 }
 //#endregion
 //#region src/core/masonry.ts
-function te(e) {
+function ne(e) {
 	let t = e.preview.width ?? e.width, n = e.preview.height ?? e.height;
 	return !t || !n || t <= 0 || n <= 0 ? 1 : n / t;
 }
-function J(e) {
+function q(e) {
 	return e.reduce((t, n, r) => n < e[t] ? r : t, 0);
 }
-function ne(e) {
+function re(e) {
 	return Math.max(0, e.containerHeight) + Math.max(0, e.gap);
 }
-function Y(e, t) {
+function ie(e, t) {
 	let n = Math.max(0, t.overscan), r = t.scrollTop - n, i = t.scrollTop + Math.max(0, t.viewportHeight) + n;
 	return e.reduce((e, t, n) => (t.y + t.height >= r && t.y <= i && e.push(n), e), []);
 }
-function re(e, t, n) {
+function ae(e, t, n) {
 	if (t <= 0 || e.length === 0) return {
 		columns: 0,
 		height: 0,
 		items: []
 	};
 	let r = Math.max(0, n.gap), i = Number.isFinite(n.additionalHeight) ? Math.max(0, n.additionalHeight ?? 0) : 0, a = Math.max(1, n.minColumnWidth), o = Math.max(1, Math.floor((t + r) / (a + r))), s = (t - r * (o - 1)) / o, c = Array.from({ length: o }, () => 0), l = e.map((e) => {
-		let t = J(c), n = s * te(e) + i, a = {
+		let t = q(c), n = s * ne(e) + i, a = {
 			x: t * (s + r),
 			y: c[t],
 			width: s,
@@ -225,11 +225,11 @@ function re(e, t, n) {
 		items: l
 	};
 }
-function ie(e, t) {
+function oe(e, t) {
 	let n = e?.overscan?.minimumPx ?? 800, r = e?.overscan?.viewportMultiplier ?? 1.5, i = Math.max(n, t * r), a = e?.overscan?.maximumPx;
 	return a === void 0 ? i : Math.min(i, a);
 }
-function ae(e) {
+function J(e) {
 	let t = e?.overscan;
 	if (t) {
 		for (let [e, n] of [
@@ -242,10 +242,10 @@ function ae(e) {
 }
 //#endregion
 //#region src/core/scrollbar.ts
-function oe(e, t, n) {
+function se(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function se({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize: r, viewportSize: i }) {
+function Y({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize: r, viewportSize: i }) {
 	let a = Math.max(0, e), o = Math.max(0, r), s = Math.max(0, i), c = Math.max(0, a - s);
 	if (!(c > 0 && o > 0)) return {
 		maximumScrollPosition: c,
@@ -254,11 +254,11 @@ function se({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize:
 		thumbSize: o,
 		thumbTravel: 0
 	};
-	let l = oe(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
+	let l = se(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
 	return {
 		maximumScrollPosition: c,
 		scrollable: !0,
-		thumbOffset: u * (oe(n, 0, c) / c),
+		thumbOffset: u * (se(n, 0, c) / c),
 		thumbSize: l,
 		thumbTravel: u
 	};
@@ -299,7 +299,7 @@ var ce = ["aria-hidden"], le = [
 		}
 		function j() {
 			let e = t.scrollElement, r = i.value;
-			return !e || !r ? n : se({
+			return !e || !r ? n : Y({
 				contentSize: e.scrollHeight,
 				minimumThumbSize: ue,
 				scrollPosition: e.scrollTop,
@@ -773,47 +773,47 @@ var We = [
 		function S(e = !1, t = "pointer") {
 			e && x("activate", t);
 		}
-		let C = r(() => M(l.item)), D = r(() => N(l.item, l.mediaIndex)), O = r(() => P(l.item, D.value)), F = r(() => l.mediaSource === "original" ? O.value.src : O.value.preview.src), I = r(() => l.mediaSource === "original" ? O.value.width : O.value.preview.width), L = r(() => l.mediaSource === "original" ? O.value.height : O.value.preview.height), R = w(null), z = w(0), B = w(0), V = w(l.mediaCard?.videoMuted ?? l.layout === "masonry"), H = w(!1), U = w(1), W = 1, { effectiveMuted: G, onPlaying: K, playbackAllowed: ee } = Be({
+		let C = r(() => M(l.item)), D = r(() => N(l.item, l.mediaIndex)), O = r(() => P(l.item, D.value)), F = r(() => l.mediaSource === "original" ? O.value.src : O.value.preview.src), I = r(() => l.mediaSource === "original" ? O.value.width : O.value.preview.width), L = r(() => l.mediaSource === "original" ? O.value.height : O.value.preview.height), R = w(null), z = w(0), B = w(0), V = w(l.mediaCard?.videoMuted ?? l.layout === "masonry"), H = w(!1), U = w(1), W = 1, { effectiveMuted: ee, onPlaying: G, playbackAllowed: te } = Be({
 			active: () => l.active,
 			layout: () => l.layout,
 			videoElement: R,
 			videoIsMuted: V,
 			videoIsPlaying: H
-		}), q = r(() => l.interactive && !!(l.cardHeader || l.cardFooter));
-		function te(e) {
+		}), K = r(() => l.interactive && !!(l.cardHeader || l.cardFooter));
+		function ne(e) {
 			return e.detail === 0 ? "keyboard" : "pointer";
 		}
-		function J(e, t) {
+		function q(e, t) {
 			let n = C.value.length, r = (e + n) % n;
 			r !== D.value && (y.value = e < D.value ? "previous" : "next", x("mediaChange", r), t && t.detail > 0 && t.currentTarget?.blur());
 		}
-		function ne(e, t, n) {
+		function re(e, t, n) {
 			return t === 1 ? e * 16 : t === 2 ? e * n : e;
 		}
-		function Y() {
+		function ie() {
 			f = 0, p = !1, d !== null && clearTimeout(d), d = null;
 		}
-		function re() {
-			d !== null && clearTimeout(d), d = setTimeout(Y, rt);
+		function ae() {
+			d !== null && clearTimeout(d), d = setTimeout(ie, rt);
 		}
-		function ie(e) {
+		function oe(e) {
 			if (C.value.length <= 1) return;
-			let t = e.currentTarget?.clientWidth || 1, n = ne(e.deltaX, e.deltaMode, t);
-			if (n === 0 || (e.preventDefault(), re(), p) || (f += n, Math.abs(f) < it)) return;
+			let t = e.currentTarget?.clientWidth || 1, n = re(e.deltaX, e.deltaMode, t);
+			if (n === 0 || (e.preventDefault(), ae(), p) || (f += n, Math.abs(f) < it)) return;
 			let r = Math.sign(f);
-			f = 0, p = !0, J(D.value + r);
+			f = 0, p = !0, q(D.value + r);
 		}
-		function ae(e) {
+		function J(e) {
 			let t = e.touches[0];
 			l.layout !== "reel" || !t || (m = t.clientX, g = t.clientY);
 		}
-		function oe(e) {
+		function se(e) {
 			let t = e.changedTouches[0];
 			if (m === null || g === null || !t) return;
 			let n = m - t.clientX, r = g - t.clientY;
-			m = null, g = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < nt || J(D.value + Math.sign(n)));
+			m = null, g = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < nt || q(D.value + Math.sign(n)));
 		}
-		let { imageLoading: se, mediaIsTimed: ce, videoPreload: le } = Ue({
+		let { imageLoading: Y, mediaIsTimed: ce, videoPreload: le } = Ue({
 			fetchPriority: () => l.fetchPriority,
 			layout: () => l.layout,
 			mediaSource: () => F.value,
@@ -823,7 +823,7 @@ var We = [
 			l.layout === "reel" && (e.stopPropagation(), me());
 		}
 		async function me() {
-			if (!(!R.value || !ee.value)) {
+			if (!(!R.value || !te.value)) {
 				if (H.value) {
 					R.value.pause();
 					return;
@@ -840,7 +840,7 @@ var We = [
 		}
 		function X(e) {
 			let t = e?.currentTarget ?? R.value;
-			t && (z.value = he(t.currentTime), B.value = he(t.duration), ee.value && (V.value = t.muted), U.value = t.volume, t.volume > 0 && (W = t.volume));
+			t && (z.value = he(t.currentTime), B.value = he(t.duration), te.value && (V.value = t.muted), U.value = t.volume, t.volume > 0 && (W = t.volume));
 		}
 		function ge(e) {
 			X(e), x("ready", D.value);
@@ -863,7 +863,7 @@ var We = [
 			e && (e.muted && e.volume === 0 && (e.volume = W), e.muted = !e.muted, X());
 		}
 		return v(() => {
-			Y();
+			ie();
 		}), (r, i) => (b(), s("article", {
 			"data-post-id": e.item.postId,
 			"data-media-index": D.value,
@@ -877,10 +877,10 @@ var We = [
 			"aria-hidden": e.leaving || void 0,
 			"aria-busy": e.previewState === "loading",
 			inert: e.leaving || void 0,
-			role: e.interactive && !e.leaving && !q.value ? "button" : void 0,
-			tabindex: e.interactive && !e.leaving && !q.value ? 0 : void 0,
-			onClick: i[11] ||= (t) => S(e.interactive && !q.value, te(t)),
-			onKeydown: [i[12] ||= A((t) => S(e.interactive && !q.value, "keyboard"), ["enter"]), i[13] ||= A(j((t) => S(e.interactive && !q.value, "keyboard"), ["prevent"]), ["space"])]
+			role: e.interactive && !e.leaving && !K.value ? "button" : void 0,
+			tabindex: e.interactive && !e.leaving && !K.value ? 0 : void 0,
+			onClick: i[11] ||= (t) => S(e.interactive && !K.value, ne(t)),
+			onKeydown: [i[12] ||= A((t) => S(e.interactive && !K.value, "keyboard"), ["enter"]), i[13] ||= A(j((t) => S(e.interactive && !K.value, "keyboard"), ["prevent"]), ["space"])]
 		}, [c("div", Ge, [
 			e.cardHeader ? (b(), a(je, {
 				key: 0,
@@ -908,9 +908,9 @@ var We = [
 			c("div", {
 				class: h(["media-card-media", { "media-card-media--carousel": e.layout === "reel" && C.value.length > 1 }]),
 				"data-media-direction": y.value,
-				onWheel: ie,
-				onTouchstartPassive: ae,
-				onTouchendPassive: oe
+				onWheel: oe,
+				onTouchstartPassive: J,
+				onTouchendPassive: se
 			}, [
 				u(n, { name: `media-slide-${y.value}` }, {
 					default: k(() => [(b(), s("div", {
@@ -934,16 +934,16 @@ var We = [
 						src: F.value,
 						width: I.value ?? void 0,
 						height: L.value ?? void 0,
-						autoplay: E(ee),
+						autoplay: E(te),
 						loop: !e.advanceOnMediaEnd,
-						muted: E(G),
+						muted: E(ee),
 						playsinline: "",
 						preload: E(le),
 						onLoadedmetadata: ge,
 						onDurationchange: X,
 						onTimeupdate: X,
 						onVolumechange: X,
-						onPlaying: i[0] ||= (...e) => E(K) && E(K)(...e),
+						onPlaying: i[0] ||= (...e) => E(G) && E(G)(...e),
 						onPause: i[1] ||= (e) => H.value = !1,
 						onEnded: _e,
 						onClick: pe,
@@ -957,7 +957,7 @@ var We = [
 						fetchpriority: e.fetchPriority,
 						alt: "",
 						decoding: "async",
-						loading: E(se),
+						loading: E(Y),
 						onLoad: i[3] ||= (e) => r.$emit("ready", D.value),
 						onError: i[4] ||= (e) => r.$emit("error", D.value)
 					}, null, 42, Qe))], 8, qe))]),
@@ -1002,21 +1002,21 @@ var We = [
 					type: "button",
 					class: "media-carousel-control media-carousel-control--previous",
 					"aria-label": `Previous media for post ${e.item.postId}`,
-					onClick: i[5] ||= j((e) => J(D.value - 1, e), ["stop"]),
+					onClick: i[5] ||= j((e) => q(D.value - 1, e), ["stop"]),
 					onKeydown: i[6] ||= j(() => {}, ["stop"])
 				}, [u(E(Se), { size: 20 })], 40, $e), c("button", {
 					type: "button",
 					class: "media-carousel-control media-carousel-control--next",
 					"aria-label": `Next media for post ${e.item.postId}`,
-					onClick: i[7] ||= j((e) => J(D.value + 1, e), ["stop"]),
+					onClick: i[7] ||= j((e) => q(D.value + 1, e), ["stop"]),
 					onKeydown: i[8] ||= j(() => {}, ["stop"])
 				}, [u(E(Ce), { size: 20 })], 40, et)], 2)) : o("", !0),
-				q.value ? (b(), s("button", {
+				K.value ? (b(), s("button", {
 					key: 1,
 					class: "media-card-activator",
 					type: "button",
 					"aria-label": `Open post ${e.item.postId}`,
-					onClick: i[9] ||= j((e) => r.$emit("activate", te(e)), ["stop"]),
+					onClick: i[9] ||= j((e) => r.$emit("activate", ne(e)), ["stop"]),
 					onKeydown: i[10] ||= j(() => {}, ["stop"])
 				}, null, 40, tt)) : o("", !0)
 			], 42, Ke),
@@ -1084,14 +1084,14 @@ var We = [
 		"visible"
 	],
 	setup(t, { expose: n, emit: i }) {
-		let l = t, d = i, f = w(null), p = `vibe-masonry-${D()}`, m = w(null), g = w(0), y = w(ut), x = w(0), C = w(0), T = w(0), k = null, A = null, j = null, M = r(() => re(l.items, g.value, {
+		let l = t, d = i, f = w(null), p = `vibe-masonry-${D()}`, m = w(null), g = w(0), y = w(ut), x = w(0), C = w(0), T = w(0), k = w([]), A = w([]), j = 0, M = null, N = null, P = null, I = null, L = r(() => ae(l.items, g.value, {
 			additionalHeight: (l.cardHeader?.height ?? 0) + (l.cardFooter?.height ?? 0),
 			gap: y.value,
 			minColumnWidth: lt
-		})), N = r(() => {
-			let e = M.value;
+		})), R = r(() => {
+			let e = L.value;
 			if (l.leavingPostIds.size === 0) return e;
-			let t = l.items.filter((e) => !l.leavingPostIds.has(e.postId)), n = re(t, g.value, {
+			let t = l.items.filter((e) => !l.leavingPostIds.has(e.postId)), n = ae(t, g.value, {
 				additionalHeight: (l.cardHeader?.height ?? 0) + (l.cardFooter?.height ?? 0),
 				gap: y.value,
 				minColumnWidth: lt
@@ -1100,40 +1100,47 @@ var We = [
 				...n,
 				items: l.items.map((t, n) => l.leavingPostIds.has(t.postId) ? e.items[n] : r.get(t.postId) ?? e.items[n])
 			};
-		}), P = r(() => ({ height: `${l.leavingPostIds.size === 0 ? N.value.height : M.value.height}px` })), I = r(() => !l.infiniteScroll || C.value > 0 && T.value + N.value.height <= C.value + 1), L = r(() => {
-			if (l.suspended) return /* @__PURE__ */ new Set();
-			let e = {
-				scrollTop: x.value - T.value,
-				viewportHeight: C.value
-			}, t = Y(N.value.items, {
-				...e,
-				overscan: 0
-			}), n = l.leavingPostIds.size === 0 ? [] : Y(M.value.items, {
-				...e,
-				overscan: 0
-			});
-			return new Set([...t, ...n]);
-		}), R = r(() => {
-			let e = ie(l.masonry, C.value), t = {
-				scrollTop: x.value - T.value,
-				viewportHeight: C.value
-			}, n = Y(N.value.items, {
+		}), z = r(() => Math.max(C.value, l.leavingPostIds.size === 0 ? R.value.height : L.value.height)), B = r(() => ({ height: `${z.value}px` })), V = r(() => !l.infiniteScroll || x.value > 0 && T.value + R.value.height <= x.value + 1), H = r(() => new Set(k.value)), U = r(() => A.value.flatMap((e) => {
+			let t = l.items[e];
+			return t ? [{
+				fetchPriority: H.value.has(e) ? "high" : "low",
+				index: e,
+				item: t
+			}] : [];
+		}));
+		function ee(e, t) {
+			return [...new Set([...e, ...t])].sort((e, t) => e - t);
+		}
+		function G(e, t) {
+			return e.length === t.length && e.every((e, n) => e === t[n]);
+		}
+		function te(e) {
+			let t = {
+				scrollTop: j - T.value,
+				viewportHeight: x.value
+			};
+			return ee(ie(R.value.items, {
 				...t,
 				overscan: e
-			}), r = l.leavingPostIds.size === 0 ? [] : Y(M.value.items, {
+			}), l.leavingPostIds.size === 0 ? [] : ie(L.value.items, {
 				...t,
 				overscan: e
+			}));
+		}
+		function ne() {
+			let e = l.suspended ? [] : te(0), t = te(oe(l.masonry, x.value));
+			G(k.value, e) || (k.value = e), G(A.value, t) || (A.value = t);
+		}
+		function q() {
+			if (I !== null) return;
+			I = -1;
+			let e = requestAnimationFrame(() => {
+				I = null, ne();
 			});
-			return [...new Set([...n, ...r])].sort((e, t) => e - t).flatMap((e) => {
-				let t = l.items[e];
-				return t ? [{
-					fetchPriority: L.value.has(e) ? "high" : "low",
-					index: e,
-					item: t
-				}] : [];
-			});
-		}), z = /* @__PURE__ */ new Set();
-		O(() => [...L.value].flatMap((e) => {
+			I !== null && (I = e);
+		}
+		let J = /* @__PURE__ */ new Set();
+		O(() => [...H.value].flatMap((e) => {
 			let t = l.items[e];
 			if (!t) return [];
 			let n = l.mediaIndices.get(t.postId) ?? 0, r = F(t.postId, n);
@@ -1145,17 +1152,17 @@ var We = [
 		}), (e) => {
 			let t = new Set(e.map(({ key: e }) => e));
 			e.forEach(({ key: e, mediaIndex: t, postId: n }) => {
-				z.has(e) || d("visible", n, t);
-			}), z = t;
+				J.has(e) || d("visible", n, t);
+			}), J = t;
 		}, {
 			immediate: !0,
 			flush: "post"
 		});
-		function B(e) {
-			let t = N.value.items[e], n = l.items[e]?.postId;
+		function se(e) {
+			let t = R.value.items[e], n = l.items[e]?.postId;
 			if (!t) return {};
-			let r = n !== void 0 && l.enteringPostIds.has(n), i = n !== void 0 && l.leavingPostIds.has(n), a = r || i ? ne({
-				containerHeight: M.value.height,
+			let r = n !== void 0 && l.enteringPostIds.has(n), i = n !== void 0 && l.leavingPostIds.has(n), a = r || i ? re({
+				containerHeight: Math.max(C.value, L.value.height),
 				gap: y.value
 			}) : 0, o = n === void 0 ? 0 : i ? l.removalDelays.get(n) ?? 0 : r ? l.entryDelays.get(n) ?? 0 : 0;
 			return {
@@ -1165,42 +1172,49 @@ var We = [
 				transform: `translate3d(${t.x}px, ${t.y + a}px, 0)`
 			};
 		}
-		function V() {
+		function Y() {
 			let e = f.value;
 			if (!e) return;
-			x.value = e.scrollTop, C.value = e.clientHeight;
-			let t = m.value;
-			t && (T.value = t.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop);
+			j = e.scrollTop, x.value = e.clientHeight;
+			let t = e.ownerDocument.defaultView?.getComputedStyle(e), n = (Number.parseFloat(t?.paddingTop ?? "") || 0) + (Number.parseFloat(t?.paddingBottom ?? "") || 0);
+			C.value = Math.max(0, e.clientHeight - n);
+			let r = m.value;
+			r && (T.value = r.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop, ne());
 		}
-		function H(e) {
+		function ce(e) {
 			let t = e.ownerDocument.documentElement.clientWidth;
-			g.value = e.clientWidth, y.value = Math.min(dt, Math.max(ut, t * .0075)), V();
+			g.value = e.clientWidth, y.value = Math.min(dt, Math.max(ut, t * .0075)), Y();
 		}
-		function U(e) {
+		function le(e) {
 			let t = e.currentTarget;
-			t && (x.value = t.scrollTop, !l.loadMoreLocked && l.infiniteScroll && q(t) && d("loadMore"));
+			t && (j = t.scrollTop, q(), !l.loadMoreLocked && l.infiniteScroll && K(t) && d("loadMore"));
 		}
-		function G() {
+		function ue() {
 			let e = f.value;
-			!l.loadMoreLocked && e && q(e) && d("loadMore");
+			!l.loadMoreLocked && e && K(e) && d("loadMore");
 		}
-		function K() {
+		function de() {
 			return f.value;
 		}
 		return O(m, (e) => {
-			k?.disconnect(), k = null, j !== null && cancelAnimationFrame(j), e && (H(e), !(typeof ResizeObserver > "u") && (k = new ResizeObserver(([t]) => {
+			M?.disconnect(), M = null, P !== null && cancelAnimationFrame(P), e && (ce(e), !(typeof ResizeObserver > "u") && (M = new ResizeObserver(([t]) => {
 				let n = t?.contentRect.width ?? e.clientWidth;
-				Math.abs(n - g.value) < .5 || (j = requestAnimationFrame(() => {
-					j = null, H(e);
+				Math.abs(n - g.value) < .5 || (P = requestAnimationFrame(() => {
+					P = null, ce(e);
 				}));
-			}), k.observe(e)));
+			}), M.observe(e)));
 		}), O(f, (e) => {
-			A?.disconnect(), A = null, e && (V(), !(typeof ResizeObserver > "u") && (A = new ResizeObserver(V), A.observe(e)));
-		}), v(() => {
-			k?.disconnect(), A?.disconnect(), j !== null && cancelAnimationFrame(j);
+			N?.disconnect(), N = null, e && (Y(), !(typeof ResizeObserver > "u") && (N = new ResizeObserver(Y), N.observe(e)));
+		}), O([
+			L,
+			R,
+			() => l.suspended,
+			() => l.masonry
+		], ne, { flush: "post" }), v(() => {
+			M?.disconnect(), N?.disconnect(), P !== null && cancelAnimationFrame(P), I !== null && cancelAnimationFrame(I);
 		}), n({
-			getScrollElement: K,
-			loadIfNearBottom: G
+			getScrollElement: de,
+			loadIfNearBottom: ue
 		}), (n, r) => (b(), s("div", ot, [
 			c("main", {
 				id: p,
@@ -1210,14 +1224,14 @@ var We = [
 				"data-layout-mode": "masonry",
 				"aria-hidden": t.suspended || void 0,
 				inert: t.suspended || void 0,
-				onScrollPassive: U
+				onScrollPassive: le
 			}, [c("section", {
 				ref_key: "masonryElement",
 				ref: m,
 				class: h(["masonry", { "masonry--ready": g.value > 0 }]),
-				style: _(P.value),
+				style: _(B.value),
 				"aria-label": "Media gallery"
-			}, [(b(!0), s(e, null, S(R.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(at, {
+			}, [(b(!0), s(e, null, S(U.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(at, {
 				key: n.postId,
 				class: "masonry-item",
 				entering: t.enteringPostIds.has(n.postId),
@@ -1228,7 +1242,7 @@ var We = [
 				"media-card": t.mediaCard,
 				index: r,
 				item: n,
-				"item-style": B(r),
+				"item-style": se(r),
 				interactive: "",
 				layout: "masonry",
 				"loaded-count": t.items.length,
@@ -1258,7 +1272,7 @@ var We = [
 				"onReady",
 				"onError"
 			]))), 128))], 6)], 42, st),
-			t.feedFooter || t.isLoadingMore || t.nextPageError || t.hasNext && I.value || !t.hasNext && t.canRetryEnd ? (b(), s("div", ct, [u(W, {
+			t.feedFooter || t.isLoadingMore || t.nextPageError || t.hasNext && V.value || !t.hasNext && t.canRetryEnd ? (b(), s("div", ct, [u(W, {
 				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
 				"feed-footer": t.feedFooter,
@@ -1266,7 +1280,7 @@ var We = [
 				"has-next": t.hasNext,
 				"is-loading": t.isLoadingMore,
 				"load-more-locked": t.loadMoreLocked,
-				"show-load-more": I.value,
+				"show-load-more": V.value,
 				state: t.state,
 				onLoadMore: r[0] ||= (e) => d("loadMore"),
 				onRetryEnd: r[1] ||= (e) => d("retryEnd")
@@ -1282,7 +1296,7 @@ var We = [
 				"state"
 			])])) : o("", !0),
 			u(pe, {
-				"content-size": N.value.height,
+				"content-size": R.value.height,
 				"controls-id": p,
 				"scroll-element": f.value,
 				suspended: t.suspended
@@ -1397,47 +1411,47 @@ var ht = ["aria-label"], gt = /* @__PURE__ */ d({
 			l.reelAutoAdvance.enabled,
 			l.reelAutoAdvance.includePostItems,
 			l.reelAutoAdvance.intervalMs
-		].join(":")), G = r(() => {
+		].join(":")), ee = r(() => {
 			let e = R.value, t = !!(e && l.reelAutoAdvance.includePostItems && z.value < M(e).length - 1), n = l.reelAutoAdvance.intervalMs / 1e3;
 			return `Auto advance to the next ${t ? "post item" : "post"} in ${n}s`;
-		}), K = r(() => l.reelAutoAdvance.enabled && l.reelForward.status === "idle" && R.value !== void 0 && B.value !== "loading" && !H.value), ee = r(() => !l.infiniteScroll || l.items.length <= 1), te = r(() => l.reelForward.status === "loading" ? "Loading the next media…" : l.reelForward.status === "error" ? "Unable to load the next media." : "You reached the end of this feed.");
-		function J(e) {
+		}), G = r(() => l.reelAutoAdvance.enabled && l.reelForward.status === "idle" && R.value !== void 0 && B.value !== "loading" && !H.value), te = r(() => !l.infiniteScroll || l.items.length <= 1), ne = r(() => l.reelForward.status === "loading" ? "Loading the next media…" : l.reelForward.status === "error" ? "Unable to load the next media." : "You reached the end of this feed.");
+		function q(e) {
 			return { gridRow: `${e + 1}` };
 		}
-		function ne(e) {
+		function re(e) {
 			let t = D || e.clientHeight;
 			return t <= 0 || l.items.length === 0 ? 0 : Math.min(l.items.length - 1, Math.max(0, Math.round(e.scrollTop / t)));
 		}
-		function Y(e) {
+		function ie(e) {
 			let t = e.currentTarget;
 			if (!t) return;
 			let n = D || t.clientHeight, r = Math.max(0, l.items.length - 1) * n;
-			x.value = l.items.length > 0 && t.scrollTop > r + 1, C.value || (g.value = ne(t)), !l.loadMoreLocked && l.infiniteScroll && q(t) && u("loadMore");
+			x.value = l.items.length > 0 && t.scrollTop > r + 1, C.value || (g.value = re(t)), !l.loadMoreLocked && l.infiniteScroll && K(t) && u("loadMore");
 		}
-		function re() {
+		function ae() {
 			let e = d.value;
-			e && (x.value = !1, oe(!0), D = e.clientHeight, e.scrollTop = g.value * D, A !== null && cancelAnimationFrame(A), A = requestAnimationFrame(() => {
+			e && (x.value = !1, se(!0), D = e.clientHeight, e.scrollTop = g.value * D, A !== null && cancelAnimationFrame(A), A = requestAnimationFrame(() => {
 				e.scrollTop = g.value * e.clientHeight, D = e.clientHeight, A = null;
-			}), ie());
+			}), oe());
 		}
-		function ie() {
+		function oe() {
 			j !== null && clearTimeout(j), j = setTimeout(() => {
 				j = null;
 				let e = d.value;
-				e && (D = e.clientHeight, e.scrollTop = g.value * D), oe(!1);
+				e && (D = e.clientHeight, e.scrollTop = g.value * D), se(!1);
 			}, 120);
 		}
-		function ae() {
-			oe(!0);
+		function J() {
+			se(!0);
 			let e = d.value;
-			e && (D = e.clientHeight, e.scrollTop = g.value * D), ie();
+			e && (D = e.clientHeight, e.scrollTop = g.value * D), oe();
 		}
-		function oe(e) {
+		function se(e) {
 			C.value = e, d.value?.toggleAttribute("data-resizing", e);
 		}
-		function se() {
+		function Y() {
 			let e = d.value;
-			!l.loadMoreLocked && e && q(e) && u("loadMore");
+			!l.loadMoreLocked && e && K(e) && u("loadMore");
 		}
 		function ce(e) {
 			let t = R.value;
@@ -1493,21 +1507,21 @@ var ht = ["aria-label"], gt = /* @__PURE__ */ d({
 			!l.reelAutoAdvance.enabled || e !== L.value || t !== z.value || !H.value || X();
 		}
 		return O(d, (e) => {
-			k?.disconnect(), k = null, e && (D = e.clientHeight, !(typeof ResizeObserver > "u") && (k = new ResizeObserver(re), k.observe(e)));
+			k?.disconnect(), k = null, e && (D = e.clientHeight, !(typeof ResizeObserver > "u") && (k = new ResizeObserver(ae), k.observe(e)));
 		}), O(() => l.items.length, async (e) => {
 			let t = l.initialPostId, n = t == null ? -1 : l.items.findIndex(({ postId: e }) => e === t);
-			g.value = n >= 0 ? n : Math.min(g.value, Math.max(0, e - 1)), await m(), re();
+			g.value = n >= 0 ? n : Math.min(g.value, Math.max(0, e - 1)), await m(), ae();
 		}), O(L, (e) => {
 			e !== void 0 && u("activeChange", e);
 		}, { immediate: !0 }), y(() => {
-			window.addEventListener("resize", ae), window.addEventListener("orientationchange", ae), p >= 0 && m(re);
+			window.addEventListener("resize", J), window.addEventListener("orientationchange", J), p >= 0 && m(ae);
 		}), v(() => {
-			window.removeEventListener("resize", ae), window.removeEventListener("orientationchange", ae), k?.disconnect(), A !== null && cancelAnimationFrame(A), j !== null && clearTimeout(j);
+			window.removeEventListener("resize", J), window.removeEventListener("orientationchange", J), k?.disconnect(), A !== null && cancelAnimationFrame(A), j !== null && clearTimeout(j);
 		}), n({
 			activeIndex: g,
 			activePostId: L,
 			changeActiveMedia: ce,
-			loadIfNearBottom: se,
+			loadIfNearBottom: Y,
 			moveActivePost: le,
 			navigateToItem: ue,
 			transitionActiveMedia: he,
@@ -1547,7 +1561,7 @@ var ht = ["aria-label"], gt = /* @__PURE__ */ d({
 				class: "gallery-shell reel-feed",
 				"data-active-post-id": L.value,
 				"data-active-media-index": z.value,
-				onScrollPassive: Y
+				onScrollPassive: ie
 			}, [t.reelForward.status === "idle" ? (b(), s("section", {
 				key: 1,
 				class: "reel-track",
@@ -1562,7 +1576,7 @@ var ht = ["aria-label"], gt = /* @__PURE__ */ d({
 				"fetch-priority": e,
 				index: r,
 				item: n,
-				"item-style": J(r),
+				"item-style": q(r),
 				"media-card": t.mediaCard,
 				layout: "reel",
 				"loaded-count": t.items.length,
@@ -1599,7 +1613,7 @@ var ht = ["aria-label"], gt = /* @__PURE__ */ d({
 				class: "reel-forward-status",
 				role: t.reelForward.status === "error" ? "alert" : "status",
 				"data-status": t.reelForward.status
-			}, [c("p", null, T(te.value), 1), t.reelForward.status === "error" || t.reelForward.status === "end" ? (b(), s("button", {
+			}, [c("p", null, T(ne.value), 1), t.reelForward.status === "error" || t.reelForward.status === "end" ? (b(), s("button", {
 				key: 0,
 				class: "reel-forward-retry",
 				type: "button",
@@ -1613,7 +1627,7 @@ var ht = ["aria-label"], gt = /* @__PURE__ */ d({
 				"has-next": t.hasNext,
 				"is-loading": t.isLoadingMore,
 				"load-more-locked": t.loadMoreLocked,
-				"show-load-more": ee.value,
+				"show-load-more": te.value,
 				state: t.state,
 				onLoadMore: r[1] ||= (e) => u("loadMore"),
 				onRetryEnd: r[2] ||= (e) => u("retryEnd")
@@ -1655,10 +1669,10 @@ var ht = ["aria-label"], gt = /* @__PURE__ */ d({
 				"style",
 				"total"
 			])) : o("", !0),
-			K.value ? (b(), a(gt, {
+			G.value ? (b(), a(gt, {
 				key: U.value,
 				"duration-ms": t.reelAutoAdvance.intervalMs,
-				label: G.value,
+				label: ee.value,
 				onComplete: X
 			}, null, 8, ["duration-ms", "label"])) : o("", !0)
 		], 2));
@@ -2040,52 +2054,52 @@ var Ft = 35, It = 420, Lt = /* @__PURE__ */ d({
 			ready: (e) => d("mediaReady", e),
 			reelChange: (e) => d("reelMediaChange", e),
 			visible: (e) => d("mediaVisible", e)
-		}), U = new Set(l.state.items.map((e) => e.postId)), W = null, G = null, K = !1;
-		function q() {
+		}), U = new Set(l.state.items.map((e) => e.postId)), W = null, ee = null, G = !1;
+		function K() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
-		function te() {
+		function ne() {
 			W !== null && cancelAnimationFrame(W), W = requestAnimationFrame(() => {
 				W = requestAnimationFrame(() => {
 					W = null, S.value = /* @__PURE__ */ new Set();
 				});
 			});
 		}
-		function J(e, t) {
+		function q(e, t) {
 			let n = l.state.items.find((t) => t.postId === e);
 			if (!n) return;
 			let r = N(n, t);
 			(l.state.mediaIndices.get(e) ?? 0) !== r && (l.state.mediaIndices = new Map(l.state.mediaIndices).set(e, r));
 		}
-		async function ne() {
+		async function re() {
 			await m(), (l.state.layout === "reel" || l.state.reelOrigin === "masonry" ? p.value : f.value)?.loadIfNearBottom();
 		}
-		function Y(e) {
+		function ie(e) {
 			return l.state.isLoading || l.state.items.length === 0 || l.state.layout !== "reel" && l.state.reelOrigin !== "masonry" ? !1 : p.value?.changeActiveMedia?.(e) ?? !1;
 		}
-		function re(e) {
+		function ae(e) {
 			return l.state.isLoading || l.state.items.length === 0 || l.state.layout !== "reel" && l.state.reelOrigin !== "masonry" ? !1 : p.value?.moveActivePost?.(e) ?? !1;
 		}
-		function ie(e) {
+		function oe(e) {
 			if (!(l.state.layout === "reel" || l.state.reelOrigin === "masonry") || l.state.isLoading) return "reel-inactive";
 			let t = l.state.items.find((t) => t.postId === e.postId);
 			if (!t) return "not-found";
 			let n = M(t).findIndex((t) => t.mediaId === e.mediaId);
 			return n < 0 ? "not-found" : p.value?.navigateToItem?.(e.postId, n) ? "navigated" : "reel-inactive";
 		}
-		function ae() {
+		function J() {
 			return l.state.layout !== "masonry" || l.state.reelOrigin === "masonry" ? null : f.value?.getScrollElement?.() ?? null;
 		}
-		function oe(e, t) {
-			G = e, K = t === "keyboard", y.value = ue(e), d("openReel", e), m(() => h.value?.focus());
+		function se(e, t) {
+			ee = e, G = t === "keyboard", y.value = ue(e), d("openReel", e), m(() => h.value?.focus());
 		}
-		function se(e) {
+		function Y(e) {
 			let t = g.value?.querySelectorAll(".masonry-feed [data-post-id]") ?? [];
 			return Array.from(t).find((t) => t.dataset.postId === String(e)) ?? null;
 		}
 		function ce(e) {
-			if (l.state.layout !== "masonry" || l.state.reelOrigin !== null || q()) return 0;
-			let t = [...new Set(e)], n = t.filter(se);
+			if (l.state.layout !== "masonry" || l.state.reelOrigin !== null || K()) return 0;
+			let t = [...new Set(e)], n = t.filter(Y);
 			if (n.length === 0) return 0;
 			let r = new Map(D.value);
 			return n.forEach((e, t) => {
@@ -2093,13 +2107,13 @@ var Ft = 35, It = 420, Lt = /* @__PURE__ */ d({
 			}), S.value = new Set([...S.value].filter((e) => !n.includes(e))), T.value = new Set([...T.value, ...t]), D.value = r, It + (n.length - 1) * Ft;
 		}
 		function le(e, t) {
-			let n = se(e), r = n?.querySelector(".media-card-activator") ?? n;
+			let n = Y(e), r = n?.querySelector(".media-card-activator") ?? n;
 			r && (r.classList.toggle("media-card-focus-silent", !t), t || r.addEventListener("blur", () => {
 				r.classList.remove("media-card-focus-silent");
 			}, { once: !0 }), r?.focus({ preventScroll: !0 }));
 		}
 		function ue(e) {
-			let t = g.value, n = se(e);
+			let t = g.value, n = Y(e);
 			if (t === null || n === null) return {};
 			let r = t.getBoundingClientRect(), i = n.getBoundingClientRect();
 			return {
@@ -2110,11 +2124,11 @@ var Ft = 35, It = 420, Lt = /* @__PURE__ */ d({
 			};
 		}
 		function de() {
-			l.state.reelOrigin === "masonry" && (G ??= l.state.activeReelPostId, x.value = !0, d("closeReel"));
+			l.state.reelOrigin === "masonry" && (ee ??= l.state.activeReelPostId, x.value = !0, d("closeReel"));
 		}
 		function fe() {
-			let e = G, t = K;
-			x.value = !1, G = null, K = !1, y.value = {}, m(() => {
+			let e = ee, t = G;
+			x.value = !1, ee = null, G = !1, y.value = {}, m(() => {
 				e !== null && le(e, t);
 			});
 		}
@@ -2127,22 +2141,22 @@ var Ft = 35, It = 420, Lt = /* @__PURE__ */ d({
 			state: l.state
 		}), O(() => l.state.items.map((e) => e.postId), (e) => {
 			let t = e.filter((e) => !U.has(e)), n = new Set(e);
-			if (U = new Set(e), T.value = new Set([...T.value].filter((e) => n.has(e))), D.value = new Map([...D.value].filter(([e]) => n.has(e))), t.length === 0 || q()) return;
+			if (U = new Set(e), T.value = new Set([...T.value].filter((e) => n.has(e))), D.value = new Map([...D.value].filter(([e]) => n.has(e))), t.length === 0 || K()) return;
 			let r = /* @__PURE__ */ new Map();
 			e.forEach((e) => {
 				let t = C.value.get(e);
 				t !== void 0 && r.set(e, t);
 			}), t.forEach((e, t) => {
 				r.set(e, t * Ft);
-			}), C.value = r, S.value = new Set([...S.value, ...t]), te();
+			}), C.value = r, S.value = new Set([...S.value, ...t]), ne();
 		}, { flush: "sync" }), v(() => {
 			W !== null && cancelAnimationFrame(W);
 		}), i({
-			changeActiveReelMedia: Y,
-			getAutoScrollElement: ae,
-			loadIfNearBottom: ne,
-			moveActiveReelPost: re,
-			navigateToReelItem: ie,
+			changeActiveReelMedia: ie,
+			getAutoScrollElement: J,
+			loadIfNearBottom: re,
+			moveActiveReelPost: ae,
+			navigateToReelItem: oe,
 			startItemRemoval: ce,
 			transitionActiveReelMedia: (e) => p.value?.transitionActiveMedia?.(e) ?? Promise.resolve(!1),
 			transitionActiveReelPost: (e) => p.value?.transitionActivePost?.(e) ?? Promise.resolve(!1)
@@ -2184,11 +2198,11 @@ var Ft = 35, It = 420, Lt = /* @__PURE__ */ d({
 			onCloseInfoSheet: i[1] ||= (e) => d("reelInfoSheetChange", !1),
 			onError: E(R),
 			onLoadMore: i[2] ||= (e) => d("loadMore"),
-			onMediaChange: J,
+			onMediaChange: q,
 			onReady: E(z),
 			onRetryEnd: i[3] ||= (e) => d("retryEnd"),
 			onRetryForward: i[4] ||= (e) => d("retryForward")
-		}, null, 8, /* @__PURE__ */ "can-retry-end.has-next.card-footer.card-header.feed-footer.feed-footer-actions.forward-index.forward-item.media-card.infinite-scroll.is-loading-more.items.load-more-locked.media-source.media-indices.initial-post-id.info-sheet.info-sheet-enabled.info-sheet-overlay.next-page-error.preview-states.reel-auto-advance.reel-forward.state.total.onError.onReady".split("."))) : t.state.error || t.state.isLoading || t.state.items.length === 0 && t.state.reelForward.status === "idle" ? (b(), a(ee, {
+		}, null, 8, /* @__PURE__ */ "can-retry-end.has-next.card-footer.card-header.feed-footer.feed-footer-actions.forward-index.forward-item.media-card.infinite-scroll.is-loading-more.items.load-more-locked.media-source.media-indices.initial-post-id.info-sheet.info-sheet-enabled.info-sheet-overlay.next-page-error.preview-states.reel-auto-advance.reel-forward.state.total.onError.onReady".split("."))) : t.state.error || t.state.isLoading || t.state.items.length === 0 && t.state.reelForward.status === "idle" ? (b(), a(te, {
 			key: 1,
 			actions: t.feedFooterActions,
 			"can-retry-end": t.canRetryEnd,
@@ -2226,10 +2240,10 @@ var Ft = 35, It = 420, Lt = /* @__PURE__ */ d({
 			suspended: t.state.reelOrigin === "masonry" || x.value,
 			state: j.value,
 			total: t.state.total,
-			onActivate: oe,
+			onActivate: se,
 			onError: E(F),
 			onLoadMore: i[7] ||= (e) => d("loadMore"),
-			onMediaChange: J,
+			onMediaChange: q,
 			onReady: E(I),
 			onRetryEnd: i[8] ||= (e) => d("retryEnd"),
 			onVisible: E(P)
@@ -2306,7 +2320,7 @@ var Ft = 35, It = 420, Lt = /* @__PURE__ */ d({
 				onCloseInfoSheet: i[10] ||= (e) => d("reelInfoSheetChange", !1),
 				onError: E(R),
 				onLoadMore: i[11] ||= (e) => d("loadMore"),
-				onMediaChange: J,
+				onMediaChange: q,
 				onReady: E(z),
 				onRetryEnd: i[12] ||= (e) => d("retryEnd"),
 				onRetryForward: i[13] ||= (e) => d("retryForward")
@@ -3157,7 +3171,7 @@ function Bn(e, t) {
 	}
 }
 function Vn(e) {
-	if (cn(e.autoScroll), zn("cardHeader", e.cardHeader), zn("cardFooter", e.cardFooter), Bn("header", e.mediaCard?.header), Bn("footer", e.mediaCard?.footer), Zt(e.autofill), yn(e.fill), ae(e.masonry), Nn(e.reelAutoAdvance), e.removalReconciliation) {
+	if (cn(e.autoScroll), zn("cardHeader", e.cardHeader), zn("cardFooter", e.cardFooter), Bn("header", e.mediaCard?.header), Bn("footer", e.mediaCard?.footer), Zt(e.autofill), yn(e.fill), J(e.masonry), Nn(e.reelAutoAdvance), e.removalReconciliation) {
 		if (!Number.isInteger(e.removalReconciliation.pageSize) || e.removalReconciliation.pageSize <= 0) throw TypeError("Vibe removalReconciliation pageSize must be a positive integer.");
 		let t = e.removalReconciliation.maxReplayPages ?? 5;
 		if (!Number.isInteger(t) || t <= 0) throw TypeError("Vibe removalReconciliation maxReplayPages must be a positive integer.");