@wyxos/vibe 4.5.1 → 4.5.3

package/lib/index.js

@@ -85,7 +85,7 @@ var I = {
 			onClick: n[0] ||= (e) => t.$emit("retryEnd")
 		}, " Check for more ", 8, B)]))])) : a("", !0);
 	}
-}), ee = /* @__PURE__ */ u({
+}), H = /* @__PURE__ */ u({
 	__name: "FeedFooter",
 	props: {
 		actions: {},
@@ -136,7 +136,7 @@ var I = {
 			"load-more-locked"
 		]));
 	}
-}), H = ["role"], U = { class: "gallery-status" }, te = /* @__PURE__ */ u({
+}), U = ["role"], W = { class: "gallery-status" }, ee = /* @__PURE__ */ u({
 	__name: "FeedStatus",
 	props: {
 		actions: {},
@@ -150,7 +150,7 @@ var I = {
 		return (n, u) => (y(), o("main", {
 			class: "gallery-shell",
 			role: r.state.error ? "alert" : r.state.isLoading ? "status" : void 0
-		}, [s("p", U, [r.state.error ? (y(), o(e, { key: 0 }, [c(" Unable to load media. ")], 64)) : r.state.isLoading ? (y(), o(e, { key: 1 }, [c(" Loading media… ")], 64)) : (y(), o(e, { key: 2 }, [c(" No media found. ")], 64))]), t.feedFooter ? (y(), i(ee, {
+		}, [s("p", W, [r.state.error ? (y(), o(e, { key: 0 }, [c(" Unable to load media. ")], 64)) : r.state.isLoading ? (y(), o(e, { key: 1 }, [c(" Loading media… ")], 64)) : (y(), o(e, { key: 2 }, [c(" No media found. ")], 64))]), t.feedFooter ? (y(), i(H, {
 			key: 0,
 			actions: t.actions,
 			"can-retry-end": t.canRetryEnd,
@@ -171,36 +171,36 @@ var I = {
 			"is-loading",
 			"load-more-locked",
 			"state"
-		])) : a("", !0)], 8, H));
+		])) : a("", !0)], 8, U));
 	}
 });
-function W(e) {
+function G(e) {
 	return e.scrollHeight - e.scrollTop - e.clientHeight <= 240;
 }
 //#endregion
 //#region src/core/masonry.ts
-function ne(e) {
+function te(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 re(e) {
+function ne(e) {
 	return e.reduce((t, n, r) => n < e[t] ? r : t, 0);
 }
-function ie(e) {
+function re(e) {
 	return Math.max(0, e.containerHeight) + Math.max(0, e.gap);
 }
-function G(e, t) {
+function K(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 K(e, t, n) {
+function q(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 = re(c), n = s * ne(e) + i, a = {
+		let t = ne(c), n = s * te(e) + i, a = {
 			x: t * (s + r),
 			y: c[t],
 			width: s,
@@ -216,10 +216,10 @@ function K(e, t, n) {
 }
 //#endregion
 //#region src/core/scrollbar.ts
-function q(e, t, n) {
+function J(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function J({ 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,
@@ -228,23 +228,23 @@ function J({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize:
 		thumbSize: o,
 		thumbTravel: 0
 	};
-	let l = q(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
+	let l = J(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
 	return {
 		maximumScrollPosition: c,
 		scrollable: !0,
-		thumbOffset: u * (q(n, 0, c) / c),
+		thumbOffset: u * (J(n, 0, c) / c),
 		thumbSize: l,
 		thumbTravel: u
 	};
 }
 //#endregion
 //#region src/components/GalleryScrollbar.vue?vue&type=script&setup=true&lang.ts
-var ae = ["aria-hidden"], oe = [
+var ie = ["aria-hidden"], ae = [
 	"aria-controls",
 	"aria-valuemax",
 	"aria-valuenow",
 	"tabindex"
-], Y = 32, X = 40, Z = 120, se = /* @__PURE__ */ u({
+], oe = 32, X = 40, Z = 120, se = /* @__PURE__ */ u({
 	__name: "GalleryScrollbar",
 	props: {
 		contentSize: {},
@@ -273,9 +273,9 @@ var ae = ["aria-hidden"], oe = [
 		}
 		function j() {
 			let e = t.scrollElement, n = i.value;
-			return !e || !n ? r : J({
+			return !e || !n ? r : Y({
 				contentSize: e.scrollHeight,
-				minimumThumbSize: Y,
+				minimumThumbSize: oe,
 				scrollPosition: e.scrollTop,
 				trackSize: n.clientHeight,
 				viewportSize: e.clientHeight
@@ -374,7 +374,7 @@ var ae = ["aria-hidden"], oe = [
 			onPointerdown: I,
 			onPointermove: L,
 			onPointerup: R
-		}, null, 44, oe)], 42, ae));
+		}, null, 44, ae)], 42, ie));
 	}
 }), ce = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
@@ -693,45 +693,45 @@ var Oe = /* @__PURE__ */ u({
 		function x(e = !1, t = "pointer") {
 			e && b("activate", t);
 		}
-		let S = n(() => j(c.item)), E = n(() => M(c.item, c.mediaIndex)), D = n(() => N(c.item, E.value)), P = n(() => c.mediaSource === "original" ? D.value.src : D.value.preview.src), F = n(() => c.mediaSource === "original" ? D.value.width : D.value.preview.width), I = n(() => c.mediaSource === "original" ? D.value.height : D.value.preview.height), L = C(null), R = C(0), z = C(0), B = C(!0), V = C(!1), ee = C(1), H = 1, U = n(() => c.interactive && !!(c.cardHeader || c.cardFooter));
-		function te(e) {
+		let S = n(() => j(c.item)), E = n(() => M(c.item, c.mediaIndex)), D = n(() => N(c.item, E.value)), P = n(() => c.mediaSource === "original" ? D.value.src : D.value.preview.src), F = n(() => c.mediaSource === "original" ? D.value.width : D.value.preview.width), I = n(() => c.mediaSource === "original" ? D.value.height : D.value.preview.height), L = C(null), R = C(0), z = C(0), B = C(!0), V = C(!1), H = C(1), U = 1, W = n(() => c.interactive && !!(c.cardHeader || c.cardFooter));
+		function ee(e) {
 			return e.detail === 0 ? "keyboard" : "pointer";
 		}
-		function W(e, t) {
+		function G(e, t) {
 			let n = S.value.length, r = (e + n) % n;
 			r !== E.value && (v.value = e < E.value ? "previous" : "next", b("mediaChange", r), t && t.detail > 0 && t.currentTarget?.blur());
 		}
-		function ne(e, t, n) {
+		function te(e, t, n) {
 			return t === 1 ? e * 16 : t === 2 ? e * n : e;
 		}
-		function re() {
+		function ne() {
 			d = 0, f = !1, u !== null && clearTimeout(u), u = null;
 		}
-		function ie() {
-			u !== null && clearTimeout(u), u = setTimeout(re, Xe);
+		function re() {
+			u !== null && clearTimeout(u), u = setTimeout(ne, Xe);
 		}
-		function G(e) {
+		function K(e) {
 			if (S.value.length <= 1) return;
-			let t = e.currentTarget?.clientWidth || 1, n = ne(e.deltaX, e.deltaMode, t);
-			if (n === 0 || (e.preventDefault(), ie(), f) || (d += n, Math.abs(d) < Ze)) return;
+			let t = e.currentTarget?.clientWidth || 1, n = te(e.deltaX, e.deltaMode, t);
+			if (n === 0 || (e.preventDefault(), re(), f) || (d += n, Math.abs(d) < Ze)) return;
 			let r = Math.sign(d);
-			d = 0, f = !0, W(E.value + r);
+			d = 0, f = !0, G(E.value + r);
 		}
-		function K(e) {
+		function q(e) {
 			let t = e.touches[0];
 			c.layout !== "reel" || !t || (p = t.clientX, h = t.clientY);
 		}
-		function q(e) {
+		function J(e) {
 			let t = e.changedTouches[0];
 			if (p === null || h === null || !t) return;
 			let n = p - t.clientX, r = h - t.clientY;
-			p = null, h = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < Ye || W(E.value + Math.sign(n)));
+			p = null, h = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < Ye || G(E.value + Math.sign(n)));
 		}
-		let J = n(() => De(P.value));
-		function ae(e) {
-			c.layout === "reel" && (e.stopPropagation(), oe());
+		let Y = n(() => De(P.value));
+		function ie(e) {
+			c.layout === "reel" && (e.stopPropagation(), ae());
 		}
-		async function oe() {
+		async function ae() {
 			if (L.value) {
 				if (V.value) {
 					L.value.pause();
@@ -744,12 +744,12 @@ var Oe = /* @__PURE__ */ u({
 				}
 			}
 		}
-		function Y(e) {
+		function oe(e) {
 			return Number.isFinite(e) ? Math.max(0, e) : 0;
 		}
 		function X(e) {
 			let t = e?.currentTarget ?? L.value;
-			t && (R.value = Y(t.currentTime), z.value = Y(t.duration), B.value = t.muted, ee.value = t.volume, t.volume > 0 && (H = t.volume));
+			t && (R.value = oe(t.currentTime), z.value = oe(t.duration), B.value = t.muted, H.value = t.volume, t.volume > 0 && (U = t.volume));
 		}
 		function Z(e) {
 			X(e), b("ready", E.value);
@@ -759,20 +759,20 @@ var Oe = /* @__PURE__ */ u({
 		}
 		function ce(e) {
 			let t = L.value;
-			!t || !Number.isFinite(e) || (t.currentTime = Math.min(Y(t.duration), Math.max(0, e)), R.value = t.currentTime);
+			!t || !Number.isFinite(e) || (t.currentTime = Math.min(oe(t.duration), Math.max(0, e)), R.value = t.currentTime);
 		}
 		function le(e) {
 			let t = L.value;
 			if (!t || !Number.isFinite(e)) return;
 			let n = Math.min(1, Math.max(0, e));
-			t.volume = n, t.muted = n === 0, n > 0 && (H = n), X();
+			t.volume = n, t.muted = n === 0, n > 0 && (U = n), X();
 		}
 		function ue() {
 			let e = L.value;
-			e && (e.muted && e.volume === 0 && (e.volume = H), e.muted = !e.muted, X());
+			e && (e.muted && e.volume === 0 && (e.volume = U), e.muted = !e.muted, X());
 		}
 		return _(() => {
-			re();
+			ne();
 		}), (n, r) => (y(), o("article", {
 			"data-post-id": e.item.postId,
 			"data-media-index": E.value,
@@ -786,10 +786,10 @@ var Oe = /* @__PURE__ */ u({
 			"aria-hidden": e.leaving || void 0,
 			"aria-busy": e.previewState === "loading",
 			inert: e.leaving || void 0,
-			role: e.interactive && !e.leaving && !U.value ? "button" : void 0,
-			tabindex: e.interactive && !e.leaving && !U.value ? 0 : void 0,
-			onClick: r[11] ||= (t) => x(e.interactive && !U.value, te(t)),
-			onKeydown: [r[12] ||= k((t) => x(e.interactive && !U.value, "keyboard"), ["enter"]), r[13] ||= k(A((t) => x(e.interactive && !U.value, "keyboard"), ["prevent"]), ["space"])]
+			role: e.interactive && !e.leaving && !W.value ? "button" : void 0,
+			tabindex: e.interactive && !e.leaving && !W.value ? 0 : void 0,
+			onClick: r[11] ||= (t) => x(e.interactive && !W.value, ee(t)),
+			onKeydown: [r[12] ||= k((t) => x(e.interactive && !W.value, "keyboard"), ["enter"]), r[13] ||= k(A((t) => x(e.interactive && !W.value, "keyboard"), ["prevent"]), ["space"])]
 		}, [s("div", Re, [
 			e.cardHeader ? (y(), i(Oe, {
 				key: 0,
@@ -817,13 +817,13 @@ var Oe = /* @__PURE__ */ u({
 			s("div", {
 				class: m(["media-card-media", { "media-card-media--carousel": e.layout === "reel" && S.value.length > 1 }]),
 				"data-media-direction": v.value,
-				onWheel: G,
-				onTouchstartPassive: K,
-				onTouchendPassive: q
+				onWheel: K,
+				onTouchstartPassive: q,
+				onTouchendPassive: J
 			}, [
 				l(t, { name: `media-slide-${v.value}` }, {
 					default: O(() => [(y(), o("div", {
-						key: `${e.item.postId}:${E.value}:${e.mediaSource ?? "preview"}`,
+						key: `${e.item.postId}:${D.value.src}:${e.mediaSource ?? "preview"}`,
 						class: "media-card-frame",
 						"data-media-index": E.value
 					}, [e.previewState === "loading" ? (y(), o("div", Ve, [...r[14] ||= [s("span", { class: "media-loading-shimmer" }, null, -1)]])) : e.previewState === "error" ? (y(), o("div", {
@@ -832,7 +832,7 @@ var Oe = /* @__PURE__ */ u({
 						class: "media-error",
 						role: "img",
 						"aria-label": `${T(we)(P.value)} ${T(Te)(P.value)}`
-					}, [s("strong", Ue, w(T(we)(P.value)), 1), s("span", null, w(T(Te)(P.value)), 1)], 8, He)) : a("", !0), J.value ? (y(), o("video", {
+					}, [s("strong", Ue, w(T(we)(P.value)), 1), s("span", null, w(T(Te)(P.value)), 1)], 8, He)) : a("", !0), Y.value ? (y(), o("video", {
 						key: 2,
 						ref_key: "videoElement",
 						ref: L,
@@ -855,7 +855,7 @@ var Oe = /* @__PURE__ */ u({
 						onPlaying: r[0] ||= (e) => V.value = !0,
 						onPause: r[1] ||= (e) => V.value = !1,
 						onEnded: se,
-						onClick: ae,
+						onClick: ie,
 						onError: r[2] ||= (e) => n.$emit("error", E.value)
 					}, null, 42, We)) : (y(), o("img", {
 						key: 3,
@@ -872,17 +872,17 @@ var Oe = /* @__PURE__ */ u({
 					}, null, 42, Ge))], 8, Be))]),
 					_: 1
 				}, 8, ["name"]),
-				J.value && e.previewState === "ready" ? (y(), i(Ie, {
+				Y.value && e.previewState === "ready" ? (y(), i(Ie, {
 					key: 0,
 					"current-time": R.value,
 					duration: z.value,
 					layout: e.layout,
 					muted: B.value,
 					playing: V.value,
-					volume: ee.value,
+					volume: H.value,
 					onSeek: ce,
 					onToggleMute: ue,
-					onTogglePlayback: oe,
+					onTogglePlayback: ae,
 					onVolumeChange: le
 				}, null, 8, [
 					"current-time",
@@ -900,21 +900,21 @@ var Oe = /* @__PURE__ */ u({
 					type: "button",
 					class: "media-carousel-control media-carousel-control--previous",
 					"aria-label": `Previous media for post ${e.item.postId}`,
-					onClick: r[5] ||= A((e) => W(E.value - 1, e), ["stop"]),
+					onClick: r[5] ||= A((e) => G(E.value - 1, e), ["stop"]),
 					onKeydown: r[6] ||= A(() => {}, ["stop"])
 				}, [l(T(_e), { size: 20 })], 40, Ke), s("button", {
 					type: "button",
 					class: "media-carousel-control media-carousel-control--next",
 					"aria-label": `Next media for post ${e.item.postId}`,
-					onClick: r[7] ||= A((e) => W(E.value + 1, e), ["stop"]),
+					onClick: r[7] ||= A((e) => G(E.value + 1, e), ["stop"]),
 					onKeydown: r[8] ||= A(() => {}, ["stop"])
 				}, [l(T(ve), { size: 20 })], 40, qe)], 2)) : a("", !0),
-				U.value ? (y(), o("button", {
+				W.value ? (y(), o("button", {
 					key: 2,
 					class: "media-card-activator",
 					type: "button",
 					"aria-label": `Open post ${e.item.postId}`,
-					onClick: r[9] ||= A((e) => n.$emit("activate", te(e)), ["stop"]),
+					onClick: r[9] ||= A((e) => n.$emit("activate", ee(e)), ["stop"]),
 					onKeydown: r[10] ||= A(() => {}, ["stop"])
 				}, null, 40, Je)) : a("", !0)
 			], 42, ze),
@@ -977,14 +977,14 @@ var Oe = /* @__PURE__ */ u({
 		"retryEnd"
 	],
 	setup(t, { expose: r, emit: a }) {
-		let c = t, u = a, d = C(null), f = `vibe-masonry-${E()}`, p = C(null), h = C(0), v = C(nt), b = C(0), S = C(0), w = C(0), O = null, k = null, A = null, j = n(() => K(c.items, h.value, {
+		let c = t, u = a, d = C(null), f = `vibe-masonry-${E()}`, p = C(null), h = C(0), v = C(nt), b = C(0), S = C(0), w = C(0), O = null, k = null, A = null, j = n(() => q(c.items, h.value, {
 			additionalHeight: (c.cardHeader?.height ?? 0) + (c.cardFooter?.height ?? 0),
 			gap: v.value,
 			minColumnWidth: tt
 		})), M = n(() => {
 			let e = j.value;
 			if (c.leavingPostIds.size === 0) return e;
-			let t = c.items.filter((e) => !c.leavingPostIds.has(e.postId)), n = K(t, h.value, {
+			let t = c.items.filter((e) => !c.leavingPostIds.has(e.postId)), n = q(t, h.value, {
 				additionalHeight: (c.cardHeader?.height ?? 0) + (c.cardFooter?.height ?? 0),
 				gap: v.value,
 				minColumnWidth: tt
@@ -997,16 +997,16 @@ var Oe = /* @__PURE__ */ u({
 			let e = Math.max(it, S.value * at), t = {
 				scrollTop: b.value - w.value,
 				viewportHeight: S.value
-			}, n = G(M.value.items, {
+			}, n = K(M.value.items, {
 				...t,
 				overscan: e
-			}), r = c.leavingPostIds.size === 0 ? [] : G(j.value.items, {
+			}), r = c.leavingPostIds.size === 0 ? [] : K(j.value.items, {
 				...t,
 				overscan: e
-			}), i = [...new Set([...n, ...r])].sort((e, t) => e - t), a = G(M.value.items, {
+			}), i = [...new Set([...n, ...r])].sort((e, t) => e - t), a = K(M.value.items, {
 				...t,
 				overscan: 0
-			}), o = c.leavingPostIds.size === 0 ? [] : G(j.value.items, {
+			}), o = c.leavingPostIds.size === 0 ? [] : K(j.value.items, {
 				...t,
 				overscan: 0
 			}), s = new Set([...a, ...o]);
@@ -1022,7 +1022,7 @@ var Oe = /* @__PURE__ */ u({
 		function I(e) {
 			let t = M.value.items[e], n = c.items[e]?.postId;
 			if (!t) return {};
-			let r = n !== void 0 && c.enteringPostIds.has(n), i = n !== void 0 && c.leavingPostIds.has(n), a = r || i ? ie({
+			let r = n !== void 0 && c.enteringPostIds.has(n), i = n !== void 0 && c.leavingPostIds.has(n), a = r || i ? re({
 				containerHeight: j.value.height,
 				gap: v.value
 			}) : 0, o = n === void 0 ? 0 : i ? c.removalDelays.get(n) ?? 0 : r ? c.entryDelays.get(n) ?? 0 : 0;
@@ -1046,11 +1046,11 @@ var Oe = /* @__PURE__ */ u({
 		}
 		function z(e) {
 			let t = e.currentTarget;
-			t && (b.value = t.scrollTop, !c.loadMoreLocked && c.infiniteScroll && W(t) && u("loadMore"));
+			t && (b.value = t.scrollTop, !c.loadMoreLocked && c.infiniteScroll && G(t) && u("loadMore"));
 		}
 		function B() {
 			let e = d.value;
-			!c.loadMoreLocked && e && W(e) && u("loadMore");
+			!c.loadMoreLocked && e && G(e) && u("loadMore");
 		}
 		function V() {
 			return d.value;
@@ -1124,7 +1124,7 @@ var Oe = /* @__PURE__ */ u({
 			"onMediaChange",
 			"onReady",
 			"onError"
-		]))), 128))], 6), l(ee, {
+		]))), 128))], 6), l(H, {
 			actions: t.feedFooterActions,
 			"can-retry-end": t.canRetryEnd,
 			"feed-footer": t.feedFooter,
@@ -1155,7 +1155,28 @@ var Oe = /* @__PURE__ */ u({
 			"suspended"
 		])]));
 	}
-}), st = ["aria-label"], ct = /* @__PURE__ */ u({
+}), st = 300;
+function ct(e, t, n) {
+	let r = e.scrollTop;
+	if (n || Math.abs(r - t) <= 1) return e.scrollTop = t, Promise.resolve();
+	e.setAttribute("data-transitioning", "");
+	let i = performance.now(), a = 0;
+	return new Promise((n) => {
+		let o = (s) => {
+			a += 1;
+			let c = Math.max(s - i, 1e3 / 60 * a), l = Math.min(1, c / st), u = 1 - (1 - l) ** 3;
+			if (e.scrollTop = r + (t - r) * u, l < 1) {
+				requestAnimationFrame(o);
+				return;
+			}
+			e.removeAttribute("data-transitioning"), e.scrollTop = t, n();
+		};
+		requestAnimationFrame(o);
+	});
+}
+//#endregion
+//#region src/components/ReelAutoAdvanceProgress.vue?vue&type=script&setup=true&lang.ts
+var lt = ["aria-label"], ut = /* @__PURE__ */ u({
 	__name: "ReelAutoAdvanceProgress",
 	props: {
 		durationMs: {},
@@ -1173,9 +1194,9 @@ var Oe = /* @__PURE__ */ u({
 			class: "reel-auto-advance-progress",
 			style: g(a.value),
 			onAnimationend: n[0] ||= (e) => i("complete")
-		}, null, 36)], 8, st));
+		}, null, 36)], 8, lt));
 	}
-}), lt = ["data-active-post-id", "data-active-media-index"], ut = ["role", "data-status"], dt = 2, ft = /* @__PURE__ */ u({
+}), dt = ["data-active-post-id", "data-active-media-index"], ft = ["role", "data-status"], pt = 2, mt = 300, ht = /* @__PURE__ */ u({
 	__name: "ReelFeed",
 	props: {
 		initialPostId: {},
@@ -1213,7 +1234,7 @@ var Oe = /* @__PURE__ */ u({
 	],
 	setup(t, { expose: r, emit: c }) {
 		let l = t, u = c, d = C(null), f = l.initialPostId === null || l.initialPostId === void 0 ? -1 : l.items.findIndex((e) => e.postId === l.initialPostId), h = C(Math.max(0, f)), b = C(!1), S = 0, E = null, O = null, k = null, A = n(() => ({ gridTemplateRows: `repeat(${l.items.length}, 100cqh)` })), M = n(() => {
-			let e = Math.max(0, h.value - dt), t = Math.min(l.items.length - 1, h.value + dt);
+			let e = Math.max(0, h.value - pt), t = Math.min(l.items.length - 1, h.value + pt);
 			return l.items.slice(e, t + 1).map((t, n) => ({
 				fetchPriority: e + n === h.value ? "high" : "low",
 				index: e + n,
@@ -1238,47 +1259,47 @@ var Oe = /* @__PURE__ */ u({
 			l.reelAutoAdvance.enabled,
 			l.reelAutoAdvance.includePostItems,
 			l.reelAutoAdvance.intervalMs
-		].join(":")), H = n(() => {
+		].join(":")), U = n(() => {
 			let e = I.value, t = !!(e && l.reelAutoAdvance.includePostItems && L.value < j(e).length - 1), n = l.reelAutoAdvance.intervalMs / 1e3;
 			return `Auto advance to the next ${t ? "post item" : "post"} in ${n}s`;
-		}), U = n(() => l.reelAutoAdvance.enabled && l.reelForward.status === "idle" && I.value !== void 0 && R.value !== "loading" && !B.value), te = n(() => 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 ne(e) {
+		}), W = n(() => l.reelAutoAdvance.enabled && l.reelForward.status === "idle" && I.value !== void 0 && R.value !== "loading" && !B.value), ee = n(() => 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 te(e) {
 			return { gridRow: `${e + 1}` };
 		}
-		function re(e) {
+		function ne(e) {
 			let t = S || 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 ie(e) {
+		function re(e) {
 			let t = e.currentTarget;
-			t && (b.value || (h.value = re(t)), !l.loadMoreLocked && l.infiniteScroll && W(t) && u("loadMore"));
+			t && (b.value || (h.value = ne(t)), !l.loadMoreLocked && l.infiniteScroll && G(t) && u("loadMore"));
 		}
-		function G() {
+		function K() {
 			let e = d.value;
-			e && (J(!0), S = e.clientHeight, e.scrollTop = h.value * S, O !== null && cancelAnimationFrame(O), O = requestAnimationFrame(() => {
+			e && (Y(!0), S = e.clientHeight, e.scrollTop = h.value * S, O !== null && cancelAnimationFrame(O), O = requestAnimationFrame(() => {
 				e.scrollTop = h.value * e.clientHeight, S = e.clientHeight, O = null;
-			}), K());
+			}), q());
 		}
-		function K() {
+		function q() {
 			k !== null && clearTimeout(k), k = setTimeout(() => {
 				k = null;
 				let e = d.value;
-				e && (S = e.clientHeight, e.scrollTop = h.value * S), J(!1);
+				e && (S = e.clientHeight, e.scrollTop = h.value * S), Y(!1);
 			}, 120);
 		}
-		function q() {
-			J(!0);
+		function J() {
+			Y(!0);
 			let e = d.value;
-			e && (S = e.clientHeight, e.scrollTop = h.value * S), K();
+			e && (S = e.clientHeight, e.scrollTop = h.value * S), q();
 		}
-		function J(e) {
+		function Y(e) {
 			b.value = e, d.value?.toggleAttribute("data-resizing", e);
 		}
-		function ae() {
+		function ie() {
 			let e = d.value;
-			!l.loadMoreLocked && e && W(e) && u("loadMore");
+			!l.loadMoreLocked && e && G(e) && u("loadMore");
 		}
-		function oe(e) {
+		function ae(e) {
 			let t = I.value;
 			if (!t) return !1;
 			let n = j(t).length;
@@ -1286,27 +1307,30 @@ var Oe = /* @__PURE__ */ u({
 			let r = (L.value + e + n) % n;
 			return u("mediaChange", t.postId, r), !0;
 		}
-		function Y(e) {
+		function oe(e) {
 			let t = h.value + e;
-			return !d.value || t < 0 || t >= l.items.length ? !1 : (Z(t), !0);
+			return !d.value || t < 0 || t >= l.items.length ? !1 : (se(t), !0);
 		}
 		function X() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
 		function Z(e) {
 			let t = d.value;
-			if (!t) return;
+			if (!t) return Promise.resolve();
 			let n = e * (S || t.clientHeight);
-			if (h.value = e, !X() && typeof t.scrollTo == "function") {
-				t.scrollTo({
-					behavior: "smooth",
-					top: n
-				});
-				return;
-			}
-			t.scrollTop = n;
+			return h.value = e, ct(t, n, X());
 		}
-		function se() {
+		function se(e) {
+			Z(e);
+		}
+		async function ce(e) {
+			let t = l.items.findIndex((t) => t.postId === e);
+			return t < 0 || t === h.value ? !1 : (await Z(t), !0);
+		}
+		async function le(e) {
+			return ae(e) ? (X() || await new Promise((e) => setTimeout(e, mt)), !0) : !1;
+		}
+		function ue() {
 			if (!l.reelAutoAdvance.enabled) return;
 			let e = I.value;
 			if (!e) return;
@@ -1319,27 +1343,30 @@ var Oe = /* @__PURE__ */ u({
 				l.hasNext && !l.loadMoreLocked && u("loadMore");
 				return;
 			}
-			l.reelAutoAdvance.includePostItems && (l.mediaIndices.get(n.postId) ?? 0) !== 0 && u("mediaChange", n.postId, 0), Z(t);
+			l.reelAutoAdvance.includePostItems && (l.mediaIndices.get(n.postId) ?? 0) !== 0 && u("mediaChange", n.postId, 0), se(t);
 		}
-		function ce(e, t) {
-			!l.reelAutoAdvance.enabled || e !== F.value || t !== L.value || !B.value || se();
+		function de(e, t) {
+			!l.reelAutoAdvance.enabled || e !== F.value || t !== L.value || !B.value || ue();
 		}
 		return D(d, (e) => {
-			E?.disconnect(), E = null, e && (S = e.clientHeight, !(typeof ResizeObserver > "u") && (E = new ResizeObserver(G), E.observe(e)));
-		}), D(() => l.items.length, async (e) => {
-			h.value = Math.min(h.value, Math.max(0, e - 1)), await p(), G();
+			E?.disconnect(), E = null, e && (S = e.clientHeight, !(typeof ResizeObserver > "u") && (E = new ResizeObserver(K), E.observe(e)));
+		}), D([() => l.items.length, () => l.initialPostId], async ([e, t]) => {
+			let n = t == null ? -1 : l.items.findIndex(({ postId: e }) => e === t);
+			h.value = n >= 0 ? n : Math.min(h.value, Math.max(0, e - 1)), await p(), K();
 		}), D(F, (e) => {
 			e !== void 0 && u("activeChange", e);
 		}, { immediate: !0 }), v(() => {
-			window.addEventListener("resize", q), window.addEventListener("orientationchange", q), f >= 0 && p(G);
+			window.addEventListener("resize", J), window.addEventListener("orientationchange", J), f >= 0 && p(K);
 		}), _(() => {
-			window.removeEventListener("resize", q), window.removeEventListener("orientationchange", q), E?.disconnect(), O !== null && cancelAnimationFrame(O), k !== null && clearTimeout(k);
+			window.removeEventListener("resize", J), window.removeEventListener("orientationchange", J), E?.disconnect(), O !== null && cancelAnimationFrame(O), k !== null && clearTimeout(k);
 		}), r({
 			activeIndex: h,
 			activePostId: F,
-			changeActiveMedia: oe,
-			loadIfNearBottom: ae,
-			moveActivePost: Y
+			changeActiveMedia: ae,
+			loadIfNearBottom: ie,
+			moveActivePost: oe,
+			transitionActiveMedia: le,
+			transitionActivePost: ce
 		}), (n, r) => (y(), o("main", {
 			class: m(["reel-shell", {
 				"reel-shell--has-footer": !!t.cardFooter,
@@ -1375,7 +1402,7 @@ var Oe = /* @__PURE__ */ u({
 				class: "gallery-shell reel-feed",
 				"data-active-post-id": F.value,
 				"data-active-media-index": L.value,
-				onScrollPassive: ie
+				onScrollPassive: re
 			}, [t.reelForward.status === "idle" ? (y(), o("section", {
 				key: 1,
 				class: "reel-track",
@@ -1389,7 +1416,7 @@ var Oe = /* @__PURE__ */ u({
 				"fetch-priority": e,
 				index: r,
 				item: n,
-				"item-style": ne(r),
+				"item-style": te(r),
 				"media-card": t.mediaCard,
 				layout: "reel",
 				"loaded-count": t.items.length,
@@ -1398,7 +1425,7 @@ var Oe = /* @__PURE__ */ u({
 				"preview-state": t.previewStates.get(T(P)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
 				total: t.total,
 				onMediaChange: (e) => u("mediaChange", n.postId, e),
-				onEnded: (e) => ce(n.postId, e),
+				onEnded: (e) => de(n.postId, e),
 				onReady: (e) => u("ready", n.postId, e),
 				onError: (e) => u("error", n.postId, e)
 			}, null, 8, [
@@ -1422,12 +1449,12 @@ var Oe = /* @__PURE__ */ u({
 				class: "reel-forward-status",
 				role: t.reelForward.status === "error" ? "alert" : "status",
 				"data-status": t.reelForward.status
-			}, [s("p", null, w(te.value), 1), t.reelForward.status === "error" || t.reelForward.status === "end" ? (y(), o("button", {
+			}, [s("p", null, w(ee.value), 1), t.reelForward.status === "error" || t.reelForward.status === "end" ? (y(), o("button", {
 				key: 0,
 				class: "reel-forward-retry",
 				type: "button",
 				onClick: r[0] ||= (e) => u("retryForward")
-			}, " Retry ")) : a("", !0)], 8, ut)), t.reelForward.status === "idle" ? (y(), i(ee, {
+			}, " Retry ")) : a("", !0)], 8, ft)), t.reelForward.status === "idle" ? (y(), i(H, {
 				key: 2,
 				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
@@ -1448,7 +1475,7 @@ var Oe = /* @__PURE__ */ u({
 				"is-loading",
 				"load-more-locked",
 				"state"
-			])) : a("", !0)], 40, lt),
+			])) : a("", !0)], 40, dt),
 			t.cardFooter && I.value && t.reelForward.status === "idle" ? (y(), i(Oe, {
 				key: 1,
 				index: h.value,
@@ -1471,24 +1498,24 @@ var Oe = /* @__PURE__ */ u({
 				"style",
 				"total"
 			])) : a("", !0),
-			U.value ? (y(), i(ct, {
+			W.value ? (y(), i(ut, {
 				key: V.value,
 				"duration-ms": t.reelAutoAdvance.intervalMs,
-				label: H.value,
-				onComplete: se
+				label: U.value,
+				onComplete: ue
 			}, null, 8, ["duration-ms", "label"])) : a("", !0)
 		], 2));
 	}
-}), pt = ["data-info-sheet-open", "data-info-sheet-mode"], mt = ["aria-hidden", "inert"], ht = {
+}), gt = ["data-info-sheet-open", "data-info-sheet-mode"], _t = ["aria-hidden", "inert"], vt = {
 	key: 0,
 	class: "reel-info-sheet-layer",
 	"data-test": "reel-info-sheet"
-}, gt = [
+}, yt = [
 	"role",
 	"aria-modal",
 	"tabindex",
 	"data-active-post-id"
-], _t = /* @__PURE__ */ u({
+], bt = /* @__PURE__ */ u({
 	__name: "ReelLayout",
 	props: {
 		forwardIndex: { default: null },
@@ -1566,13 +1593,19 @@ var Oe = /* @__PURE__ */ u({
 		function L(e) {
 			return g.value?.moveActivePost(e) ?? !1;
 		}
-		function R(e, t) {
+		function R(e) {
+			return g.value?.transitionActiveMedia(e) ?? Promise.resolve(!1);
+		}
+		function z(e) {
+			return g.value?.transitionActivePost(e) ?? Promise.resolve(!1);
+		}
+		function B(e, t) {
 			f("error", e, t);
 		}
-		function z(e, t) {
+		function V(e, t) {
 			f("mediaChange", e, t);
 		}
-		function B(e, t) {
+		function H(e, t) {
 			f("ready", e, t);
 		}
 		return D(() => ({
@@ -1592,7 +1625,9 @@ var Oe = /* @__PURE__ */ u({
 		}), r({
 			changeActiveMedia: F,
 			loadIfNearBottom: I,
-			moveActivePost: L
+			moveActivePost: L,
+			transitionActiveMedia: R,
+			transitionActivePost: z
 		}), (n, r) => (y(), o("section", {
 			class: m(["reel-layout", `reel-layout--${e.infoSheetOverlay ? "overlay" : "layout"}`]),
 			"data-info-sheet-open": A.value || void 0,
@@ -1601,7 +1636,7 @@ var Oe = /* @__PURE__ */ u({
 			class: "reel-layout-main",
 			"aria-hidden": e.infoSheetOverlay && A.value || void 0,
 			inert: e.infoSheetOverlay && A.value || void 0
-		}, [l(ft, {
+		}, [l(ht, {
 			ref_key: "reelFeed",
 			ref: g,
 			"can-retry-end": e.canRetryEnd,
@@ -1625,10 +1660,10 @@ var Oe = /* @__PURE__ */ u({
 			state: e.state,
 			total: e.total,
 			onActiveChange: r[0] ||= (e) => f("activeChange", e),
-			onError: R,
+			onError: B,
 			onLoadMore: r[1] ||= (e) => f("loadMore"),
-			onMediaChange: z,
-			onReady: B,
+			onMediaChange: V,
+			onReady: H,
 			onRetryEnd: r[2] ||= (e) => f("retryEnd"),
 			onRetryForward: r[3] ||= (e) => f("retryForward")
 		}, null, 8, [
@@ -1652,8 +1687,8 @@ var Oe = /* @__PURE__ */ u({
 			"reel-forward",
 			"state",
 			"total"
-		])], 8, mt), l(t, { name: "vibe-info-sheet" }, {
-			default: O(() => [A.value && e.infoSheet && M.value ? (y(), o("div", ht, [s("aside", {
+		])], 8, _t), l(t, { name: "vibe-info-sheet" }, {
+			default: O(() => [A.value && e.infoSheet && M.value ? (y(), o("div", vt, [s("aside", {
 				ref_key: "sheetElement",
 				ref: v,
 				class: "reel-info-sheet",
@@ -1662,11 +1697,11 @@ var Oe = /* @__PURE__ */ u({
 				"aria-modal": e.infoSheetOverlay ? "true" : void 0,
 				tabindex: e.infoSheetOverlay ? -1 : void 0,
 				"data-active-post-id": T.value?.postId
-			}, [(y(), i(S(e.infoSheet.component), h(d(M.value)), null, 16))], 8, gt)])) : a("", !0)]),
+			}, [(y(), i(S(e.infoSheet.component), h(d(M.value)), null, 16))], 8, yt)])) : a("", !0)]),
 			_: 1
-		})], 10, pt));
+		})], 10, gt));
 	}
-}), vt = 35, yt = 420, bt = /* @__PURE__ */ u({
+}), xt = 35, St = 420, Ct = /* @__PURE__ */ u({
 	__name: "VibeSurface",
 	props: {
 		canRetryEnd: { type: Boolean },
@@ -1692,63 +1727,63 @@ var Oe = /* @__PURE__ */ u({
 		function V() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
-		function ee() {
+		function H() {
 			R !== null && cancelAnimationFrame(R), R = requestAnimationFrame(() => {
 				R = requestAnimationFrame(() => {
 					R = null, w.value = /* @__PURE__ */ new Set();
 				});
 			});
 		}
-		function H(e, t, n) {
+		function U(e, t, n) {
 			let r = P(e, t);
 			A.value.get(r) !== n && (A.value = new Map(A.value).set(r, n));
 		}
-		function U(e, t, n) {
+		function W(e, t, n) {
 			let r = P(e, t);
 			j.value.get(r) !== n && (j.value = new Map(j.value).set(r, n));
 		}
-		function W(e, t) {
-			H(e, t, "error");
+		function G(e, t) {
+			U(e, t, "error");
+		}
+		function te(e, t) {
+			U(e, t, "ready");
 		}
 		function ne(e, t) {
-			H(e, t, "ready");
+			W(e, t, "error");
 		}
 		function re(e, t) {
-			U(e, t, "error");
+			W(e, t, "ready");
 		}
-		function ie(e, t) {
-			U(e, t, "ready");
-		}
-		function G(e, t) {
+		function K(e, t) {
 			if (u.state.reelMediaSource === "original") {
-				re(e, t);
+				ne(e, t);
 				return;
 			}
-			W(e, t);
+			G(e, t);
 		}
-		function K(e, t) {
+		function q(e, t) {
 			if (u.state.reelMediaSource === "original") {
-				ie(e, t);
+				re(e, t);
 				return;
 			}
-			ne(e, t);
+			te(e, t);
 		}
-		function q(e, t) {
+		function J(e, t) {
 			let n = u.state.items.find((t) => t.postId === e);
 			if (!n) return;
 			let r = M(n, t);
 			(u.state.mediaIndices.get(e) ?? 0) !== r && (u.state.mediaIndices = new Map(u.state.mediaIndices).set(e, r));
 		}
-		async function J() {
+		async function Y() {
 			await p(), (u.state.layout === "reel" || u.state.reelOrigin === "masonry" ? m.value : f.value)?.loadIfNearBottom();
 		}
-		function ae(e) {
+		function ie(e) {
 			return u.state.isLoading || u.state.items.length === 0 || u.state.layout !== "reel" && u.state.reelOrigin !== "masonry" ? !1 : m.value?.changeActiveMedia?.(e) ?? !1;
 		}
-		function oe(e) {
+		function ae(e) {
 			return u.state.isLoading || u.state.items.length === 0 || u.state.layout !== "reel" && u.state.reelOrigin !== "masonry" ? !1 : m.value?.moveActivePost?.(e) ?? !1;
 		}
-		function Y() {
+		function oe() {
 			return u.state.layout !== "masonry" || u.state.reelOrigin === "masonry" ? null : f.value?.getScrollElement?.() ?? null;
 		}
 		function X(e, t) {
@@ -1764,8 +1799,8 @@ var Oe = /* @__PURE__ */ u({
 			if (n.length === 0) return 0;
 			let r = new Map(k.value);
 			return n.forEach((e, t) => {
-				r.set(e, t * vt);
-			}), w.value = new Set([...w.value].filter((e) => !n.includes(e))), E.value = new Set([...E.value, ...t]), k.value = r, yt + (n.length - 1) * vt;
+				r.set(e, t * xt);
+			}), w.value = new Set([...w.value].filter((e) => !n.includes(e))), E.value = new Set([...E.value, ...t]), k.value = r, St + (n.length - 1) * xt;
 		}
 		function ce(e, t) {
 			let n = Z(e), r = n?.querySelector(".media-card-activator") ?? n;
@@ -1796,7 +1831,7 @@ var Oe = /* @__PURE__ */ u({
 		function fe(e) {
 			let t = u.state.layout === "reel" || u.state.reelOrigin === "masonry";
 			if (e.key === "Escape" && u.state.reelOrigin === "masonry") {
-				e.preventDefault(), ue();
+				e.preventDefault(), u.state.reelInfoSheetOverlay && u.state.reelInfoSheet.enabled && d("reelInfoSheetChange", !1), ue();
 				return;
 			}
 			if (e.key === "Escape" && t && u.state.reelInfoSheet.enabled) {
@@ -1821,21 +1856,23 @@ var Oe = /* @__PURE__ */ u({
 				let t = T.value.get(e);
 				t !== void 0 && r.set(e, t);
 			}), t.forEach((e, t) => {
-				r.set(e, t * vt);
-			}), T.value = r, w.value = new Set([...w.value, ...t]), ee();
+				r.set(e, t * xt);
+			}), T.value = r, w.value = new Set([...w.value, ...t]), H();
 		}, { flush: "sync" }), v(() => window.addEventListener("keydown", fe)), _(() => {
 			window.removeEventListener("keydown", fe), R !== null && cancelAnimationFrame(R);
 		}), s({
-			changeActiveReelMedia: ae,
-			getAutoScrollElement: Y,
-			loadIfNearBottom: J,
-			moveActiveReelPost: oe,
-			startItemRemoval: se
+			changeActiveReelMedia: ie,
+			getAutoScrollElement: oe,
+			loadIfNearBottom: Y,
+			moveActiveReelPost: ae,
+			startItemRemoval: se,
+			transitionActiveReelMedia: (e) => m.value?.transitionActiveMedia?.(e) ?? Promise.resolve(!1),
+			transitionActiveReelPost: (e) => m.value?.transitionActivePost?.(e) ?? Promise.resolve(!1)
 		}), (n, s) => (y(), o("div", {
 			ref_key: "surfaceElement",
 			ref: b,
 			class: "vibe-surface"
-		}, [r.state.layout === "reel" && (r.state.items.length > 0 || r.state.reelForward.status !== "idle") ? (y(), i(_t, {
+		}, [r.state.layout === "reel" && (r.state.items.length > 0 || r.state.reelForward.status !== "idle") ? (y(), i(bt, {
 			key: 0,
 			ref_key: "reelRenderer",
 			ref: m,
@@ -1867,10 +1904,10 @@ var Oe = /* @__PURE__ */ u({
 			total: r.state.total,
 			onActiveChange: s[0] ||= (e) => d("activeReelChange", e),
 			onCloseInfoSheet: s[1] ||= (e) => d("reelInfoSheetChange", !1),
-			onError: G,
+			onError: K,
 			onLoadMore: s[2] ||= (e) => d("loadMore"),
-			onMediaChange: q,
-			onReady: K,
+			onMediaChange: J,
+			onReady: q,
 			onRetryEnd: s[3] ||= (e) => d("retryEnd"),
 			onRetryForward: s[4] ||= (e) => d("retryForward")
 		}, null, 8, [
@@ -1899,7 +1936,7 @@ var Oe = /* @__PURE__ */ u({
 			"reel-forward",
 			"state",
 			"total"
-		])) : r.state.error || r.state.isLoading || r.state.items.length === 0 && r.state.reelForward.status === "idle" ? (y(), i(te, {
+		])) : r.state.error || r.state.isLoading || r.state.items.length === 0 && r.state.reelForward.status === "idle" ? (y(), i(ee, {
 			key: 1,
 			actions: r.feedFooterActions,
 			"can-retry-end": r.canRetryEnd,
@@ -1937,10 +1974,10 @@ var Oe = /* @__PURE__ */ u({
 			state: N.value,
 			total: r.state.total,
 			onActivate: X,
-			onError: W,
+			onError: G,
 			onLoadMore: s[7] ||= (e) => d("loadMore"),
-			onMediaChange: q,
-			onReady: ne,
+			onMediaChange: J,
+			onReady: te,
 			onRetryEnd: s[8] ||= (e) => d("retryEnd")
 		}, null, 8, [
 			"can-retry-end",
@@ -1978,7 +2015,7 @@ var Oe = /* @__PURE__ */ u({
 				"aria-modal": "true",
 				tabindex: "-1",
 				style: g(x.value)
-			}, [l(_t, {
+			}, [l(bt, {
 				ref_key: "reelRenderer",
 				ref: m,
 				"can-retry-end": r.canRetryEnd,
@@ -2009,10 +2046,10 @@ var Oe = /* @__PURE__ */ u({
 				total: r.state.total,
 				onActiveChange: s[9] ||= (e) => d("activeReelChange", e),
 				onCloseInfoSheet: s[10] ||= (e) => d("reelInfoSheetChange", !1),
-				onError: re,
+				onError: ne,
 				onLoadMore: s[11] ||= (e) => d("loadMore"),
-				onMediaChange: q,
-				onReady: ie,
+				onMediaChange: J,
+				onReady: re,
 				onRetryEnd: s[12] ||= (e) => d("retryEnd"),
 				onRetryForward: s[13] ||= (e) => d("retryForward")
 			}, null, 8, [
@@ -2047,7 +2084,7 @@ var Oe = /* @__PURE__ */ u({
 });
 //#endregion
 //#region src/core/page.ts
-function xt(e) {
+function wt(e) {
 	if (!e || typeof e != "object" || !Array.isArray(e.items)) throw TypeError("Vibe loadPage must resolve to a page with an items array.");
 	if (e.next !== null && typeof e.next != "string" && typeof e.next != "number") throw TypeError("Vibe page next must be a string, number, or null.");
 	if (e.total !== void 0 && (!Number.isFinite(e.total) || e.total < 0)) throw TypeError("Vibe page total must be a non-negative number when provided.");
@@ -2059,32 +2096,32 @@ function Q(e, t) {
 }
 //#endregion
 //#region src/core/requestDelay.ts
-var St = 2e3, Ct = 1e4, wt = 250, Tt = {
+var Tt = 2e3, Et = 1e4, Dt = 250, Ot = {
 	delayRemainingMs: null,
 	nextRequestAt: null
 };
-function Et(e, t) {
+function kt(e, t) {
 	return e === void 0 ? t : Math.floor(e);
 }
-function Dt(e, t) {
+function At(e, t) {
 	for (let [n, r] of [["delayStepMs", e.delayStepMs], ["delayMaxMs", e.delayMaxMs]]) if (r !== void 0 && (!Number.isFinite(r) || r < 0)) throw TypeError(`Vibe ${t} ${n} must be a non-negative number.`);
 }
-function Ot(e, t = {}) {
-	let n = Et(t.delayStepMs, St), r = Et(t.delayMaxMs, Ct);
+function jt(e, t = {}) {
+	let n = kt(t.delayStepMs, Tt), r = kt(t.delayMaxMs, Et);
 	return Math.min(Math.max(0, e) * n, r);
 }
 function $(e) {
-	if (e == null || !Number.isFinite(e)) return { ...Tt };
+	if (e == null || !Number.isFinite(e)) return { ...Ot };
 	let t = Math.max(0, Math.floor(e - Date.now()));
 	return t > 0 ? {
 		delayRemainingMs: t,
 		nextRequestAt: e
-	} : { ...Tt };
+	} : { ...Ot };
 }
-async function kt({ delayMs: e, onChange: t, signal: n }) {
+async function Mt({ delayMs: e, onChange: t, signal: n }) {
 	if (n.aborted) throw new DOMException("Aborted", "AbortError");
 	if (e <= 0) {
-		t({ ...Tt });
+		t({ ...Ot });
 		return;
 	}
 	let r = Date.now() + e;
@@ -2092,9 +2129,9 @@ async function kt({ delayMs: e, onChange: t, signal: n }) {
 		delayRemainingMs: e,
 		nextRequestAt: r
 	}), await new Promise((i, a) => {
-		let o = !1, s = setInterval(f, wt), c = setTimeout(() => u(), e);
+		let o = !1, s = setInterval(f, Dt), c = setTimeout(() => u(), e);
 		function l() {
-			clearInterval(s), clearTimeout(c), n.removeEventListener("abort", d), t({ ...Tt });
+			clearInterval(s), clearTimeout(c), n.removeEventListener("abort", d), t({ ...Ot });
 		}
 		function u(e) {
 			o || (o = !0, l(), e ? a(e) : i());
@@ -2109,13 +2146,13 @@ async function kt({ delayMs: e, onChange: t, signal: n }) {
 		n.addEventListener("abort", d, { once: !0 });
 	});
 }
-var At = class {
+var Nt = class {
 	interval = null;
 	constructor(e) {
 		this.onChange = e;
 	}
 	clear() {
-		this.interval !== null && clearInterval(this.interval), this.interval = null, this.onChange({ ...Tt });
+		this.interval !== null && clearInterval(this.interval), this.interval = null, this.onChange({ ...Ot });
 	}
 	sync(e) {
 		this.clear();
@@ -2123,22 +2160,22 @@ var At = class {
 		this.onChange(t), t.delayRemainingMs !== null && (this.interval = setInterval(() => {
 			let t = $(e);
 			this.onChange(t), t.delayRemainingMs === null && this.clear();
-		}, wt));
+		}, Dt));
 	}
 };
-function jt(e, t = !0) {
+function Pt(e, t = !0) {
 	return e.maxAdditionalPages === "unlimited" ? Infinity : (e.maxAdditionalPages ?? 10) + (t ? 1 : 0);
 }
-function Mt(e) {
+function Ft(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function Nt(e, t) {
+function It(e, t) {
 	if (!Number.isInteger(e) || e <= 0) throw TypeError(`Vibe ${t} must be a positive integer.`);
 }
-function Pt(e) {
+function Lt(e) {
 	if (!e) return;
-	if (Nt(e.pageSize, "autofill pageSize"), e.strategy === "frontend") {
-		Dt(e, "frontend autofill");
+	if (It(e.pageSize, "autofill pageSize"), e.strategy === "frontend") {
+		At(e, "frontend autofill");
 		let t = e.maxAdditionalPages;
 		if (t !== void 0 && t !== "unlimited" && (!Number.isInteger(t) || t < 0)) throw TypeError("Vibe autofill maxAdditionalPages must be a non-negative integer or \"unlimited\".");
 		return;
@@ -2150,7 +2187,7 @@ function Pt(e) {
 		if (t.pageSize !== e.pageSize) throw TypeError("Vibe backend autofill initialSession pageSize must match autofill pageSize.");
 	}
 }
-function Ft(e, t, n = !0) {
+function Rt(e, t, n = !0) {
 	if (!e) return {
 		cycleId: null,
 		delayRemainingMs: null,
@@ -2184,7 +2221,7 @@ function Ft(e, t, n = !0) {
 		strategy: e.strategy
 	};
 }
-function It(e) {
+function zt(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -2192,9 +2229,9 @@ function It(e) {
 		"waiting"
 	].includes(e.status);
 }
-async function Lt(e, t, n) {
+async function Bt(e, t, n) {
 	let r = t.autofill;
-	if (!It(r) || !r.cycleId) return;
+	if (!zt(r) || !r.cycleId) return;
 	let i = {
 		cycleId: r.cycleId,
 		feedKey: r.feedKey ?? "",
@@ -2207,20 +2244,20 @@ async function Lt(e, t, n) {
 		throw r.error = e, r.status = "error", e;
 	}
 }
-function Rt(e, t, n) {
+function Vt(e, t, n) {
 	return e?.strategy === "backend" && t.feedKey === e.feedKey && t.sessionId === n.sessionId;
 }
-async function zt({ existingItems: e, initialCursor: t, loadPage: n, maximumRequests: r, onDelayChange: i, onProgress: a, options: o, receivedOffset: s = 0, requestOffset: c = 0, signal: l }) {
-	let u = [], d = [...e], f = /* @__PURE__ */ new Set(), p = r ?? jt(o), m = t, h = t, g = 0, _;
+async function Ht({ existingItems: e, initialCursor: t, loadPage: n, maximumRequests: r, onDelayChange: i, onProgress: a, options: o, receivedOffset: s = 0, requestOffset: c = 0, signal: l }) {
+	let u = [], d = [...e], f = /* @__PURE__ */ new Set(), p = r ?? Pt(o), m = t, h = t, g = 0, _;
 	for (; g < p;) {
-		let e = Mt(m);
+		let e = Ft(m);
 		if (f.has(e)) throw Error("Vibe autofill received a repeated cursor.");
-		f.add(e), await kt({
-			delayMs: Ot(c + g, o),
+		f.add(e), await Mt({
+			delayMs: jt(c + g, o),
 			onChange: i,
 			signal: l
 		});
-		let t = xt(await n({
+		let t = wt(await n({
 			cursor: m,
 			signal: l
 		}));
@@ -2260,30 +2297,30 @@ async function zt({ existingItems: e, initialCursor: t, loadPage: n, maximumRequ
 		total: _
 	};
 }
-var Bt = 100;
-function Vt(e, t) {
+var Ut = 100;
+function Wt(e, t) {
 	if (!Number.isFinite(t) || t <= 0) throw TypeError(`Vibe ${e} must be a positive number.`);
 }
-function Ht(e, t, n) {
+function Gt(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function Ut(e) {
+function Kt(e) {
 	if (!e) return;
 	let t = e.minSpeedPxPerSecond ?? 20, n = e.maxSpeedPxPerSecond ?? 240;
-	if (Vt("autoScroll.minSpeedPxPerSecond", t), Vt("autoScroll.maxSpeedPxPerSecond", n), t > n) throw TypeError("Vibe autoScroll.minSpeedPxPerSecond cannot exceed maxSpeedPxPerSecond.");
-	e.speedPxPerSecond !== void 0 && Vt("autoScroll.speedPxPerSecond", e.speedPxPerSecond);
+	if (Wt("autoScroll.minSpeedPxPerSecond", t), Wt("autoScroll.maxSpeedPxPerSecond", n), t > n) throw TypeError("Vibe autoScroll.minSpeedPxPerSecond cannot exceed maxSpeedPxPerSecond.");
+	e.speedPxPerSecond !== void 0 && Wt("autoScroll.speedPxPerSecond", e.speedPxPerSecond);
 }
-function Wt(e) {
+function qt(e) {
 	let t = e?.minSpeedPxPerSecond ?? 20, n = e?.maxSpeedPxPerSecond ?? 240;
 	return {
 		enabled: e?.enabled ?? !1,
 		maxSpeedPxPerSecond: n,
 		minSpeedPxPerSecond: t,
 		paused: !1,
-		speedPxPerSecond: Ht(e?.speedPxPerSecond ?? 80, t, n)
+		speedPxPerSecond: Gt(e?.speedPxPerSecond ?? 80, t, n)
 	};
 }
-var Gt = class {
+var Jt = class {
 	frame = null;
 	lastTimestamp = null;
 	mounted = !1;
@@ -2303,9 +2340,9 @@ var Gt = class {
 		this.options.state.enabled && (this.options.state.paused = e, this.lastTimestamp = null, e ? this.cancelFrame() : this.schedule());
 	}
 	setSpeed(e) {
-		Vt("auto-scroll speed", e);
+		Wt("auto-scroll speed", e);
 		let t = this.options.state;
-		t.speedPxPerSecond = Ht(e, t.minSpeedPxPerSecond, t.maxSpeedPxPerSecond);
+		t.speedPxPerSecond = Gt(e, t.minSpeedPxPerSecond, t.maxSpeedPxPerSecond);
 	}
 	tick = (e) => {
 		this.frame = null;
@@ -2317,7 +2354,7 @@ var Gt = class {
 			return;
 		}
 		if (this.lastTimestamp !== null) {
-			let r = Math.min(Bt, Math.max(0, e - this.lastTimestamp)), i = Math.max(0, n.scrollHeight - n.clientHeight);
+			let r = Math.min(Ut, Math.max(0, e - this.lastTimestamp)), i = Math.max(0, n.scrollHeight - n.clientHeight);
 			n.scrollTop = Math.min(i, n.scrollTop + t.speedPxPerSecond * r / 1e3);
 		}
 		this.lastTimestamp = e, this.schedule();
@@ -2331,7 +2368,7 @@ var Gt = class {
 };
 //#endregion
 //#region src/core/backendAutofill.ts
-async function Kt(e, t, n, r) {
+async function Yt(e, t, n, r) {
 	let i = await e.onUnderfilled(n);
 	if (!r()) return;
 	if (!i.sessionId.trim()) throw TypeError("Vibe backend autofill requires a sessionId.");
@@ -2345,19 +2382,19 @@ async function Kt(e, t, n, r) {
 		status: "waiting"
 	});
 }
-function qt(e, t) {
+function Xt(e, t) {
 	["complete", "exhausted"].includes(t.status) && t.items && (e.items = Q(e.items, t.items)), t.next !== void 0 && (e.next = t.next), t.total !== void 0 && (e.total = t.total);
 }
-function Jt(e, t, n) {
+function Zt(e, t, n) {
 	let r = t.autofill;
-	return !Rt(e, n, r) || n.sequence <= r.sequence || ["cancelled", "cancelling"].includes(r.status) || ["complete", "exhausted"].includes(n.status) && n.next === void 0 ? !1 : (qt(t, n), Object.assign(r, $(n.status === "waiting" ? n.nextRequestAt : null)), r.error = n.error ?? null, r.missing = Math.max(0, (r.pageSize ?? 0) - n.received), r.received = n.received, n.requests !== void 0 && (r.requests = n.requests), r.sequence = n.sequence, r.status = n.status, !0);
+	return !Vt(e, n, r) || n.sequence <= r.sequence || ["cancelled", "cancelling"].includes(r.status) || ["complete", "exhausted"].includes(n.status) && n.next === void 0 ? !1 : (Xt(t, n), Object.assign(r, $(n.status === "waiting" ? n.nextRequestAt : null)), r.error = n.error ?? null, r.missing = Math.max(0, (r.pageSize ?? 0) - n.received), r.received = n.received, n.requests !== void 0 && (r.requests = n.requests), r.sequence = n.sequence, r.status = n.status, !0);
 }
-function Yt(e, t, n) {
-	return e?.strategy !== "backend" || n.feedKey !== e.feedKey || n.pageSize !== e.pageSize ? !1 : (t.autofill = Ft(e, n), qt(t, n), !0);
+function Qt(e, t, n) {
+	return e?.strategy !== "backend" || n.feedKey !== e.feedKey || n.pageSize !== e.pageSize ? !1 : (t.autofill = Rt(e, n), Xt(t, n), !0);
 }
 //#endregion
 //#region src/core/initialAutofill.ts
-async function Xt({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signal: i, state: a }) {
+async function $t({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signal: i, state: a }) {
 	let o = r.autofill;
 	if (!o) return;
 	let s = a.items.length;
@@ -2370,7 +2407,7 @@ async function Xt({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signa
 		return;
 	}
 	if (o.strategy === "backend") {
-		await Kt(o, a, {
+		await Yt(o, a, {
 			cycleId: e,
 			feedKey: o.feedKey,
 			items: [...a.items],
@@ -2387,11 +2424,11 @@ async function Xt({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signa
 		a.autofill.status = "exhausted";
 		return;
 	}
-	let c = await zt({
+	let c = await Ht({
 		existingItems: a.items,
 		initialCursor: a.next,
 		loadPage: r.loadPage,
-		maximumRequests: jt(o, !1),
+		maximumRequests: Pt(o, !1),
 		onDelayChange: (e) => {
 			t() && Object.assign(a.autofill, e);
 		},
@@ -2411,163 +2448,14 @@ async function Xt({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signa
 	}));
 }
 //#endregion
-//#region src/core/activeItemRemoval.ts
-function Zt(e, t, n, r, i) {
-	let a = new Set(n.map(({ item: e }) => e.postId));
-	if (e.activeReelPostId === null || !a.has(e.activeReelPostId)) return;
-	if (e.reelOrigin === "masonry") {
-		i();
-		return;
-	}
-	let o = e.items[Math.min(Math.max(r, 0), e.items.length - 1)];
-	e.activeReelPostId = o?.postId ?? null, o ? t.syncReel(o.postId) : t.syncFeed();
-}
-//#endregion
-//#region src/core/exactMediaRemovalController.ts
-function Qt(e, t) {
-	let [n, ...r] = t;
-	if (!n) throw Error("Vibe items must contain at least one media asset.");
-	return {
-		...e,
-		...n,
-		items: r
-	};
-}
-function $t(e) {
-	if (!Number.isInteger(e.mediaIndex) || e.mediaIndex < 0) throw TypeError("Vibe mediaIndex must be a non-negative integer.");
-}
-var en = class {
-	forward = null;
-	forwardPromise = null;
-	forwardVersion = 0;
-	generation = 0;
-	metadata = /* @__PURE__ */ new WeakMap();
-	state;
-	constructor(e) {
-		this.options = e, this.state = e.state;
-	}
-	remove(e) {
-		$t(e);
-		let t = this.state.items.findIndex(({ postId: t }) => t === e.postId), n = this.state.items[t];
-		if (!n) return null;
-		let r = [...j(n)], i = r[e.mediaIndex];
-		if (!i) return null;
-		let a = Object.freeze({
-			media: i,
-			mediaIndex: e.mediaIndex,
-			postId: e.postId,
-			postIndex: t
-		});
-		this.metadata.set(a, {
-			generation: this.generation,
-			originalItem: n,
-			restored: !1
-		});
-		let o = this.state.mediaIndices.get(n.postId) ?? 0, s = this.isReelOpen() && this.state.activeReelPostId === n.postId, c = s && o === e.mediaIndex;
-		return r.splice(e.mediaIndex, 1), r.length > 0 ? (this.state.items[t] = Qt(n, r), this.updateMediaIndexAfterRemoval(n.postId, e.mediaIndex, c), a) : (this.state.items.splice(t, 1), this.state.mediaIndices.delete(n.postId), s && this.advanceFromRemovedPost(a, n), a);
-	}
-	reset() {
-		this.generation += 1, this.forwardVersion += 1, this.forward = null, this.forwardPromise = null, this.clearForwardState();
-	}
-	restore(e) {
-		let t = this.metadata.get(e);
-		if (!t) throw TypeError("Vibe media removal does not belong to this instance.");
-		if (t.generation !== this.generation || t.restored) return !1;
-		t.restored = !0;
-		let n = this.state.items.findIndex(({ postId: t }) => t === e.postId);
-		return n >= 0 ? this.restoreIntoPost(n, e) : this.state.items.splice(Math.min(e.postIndex, this.state.items.length), 0, t.originalItem), this.forward?.removal === e && this.state.reelForward.status !== "idle" && (this.forwardVersion += 1, this.forward = null, this.clearForwardState(), this.state.mediaIndices.set(e.postId, e.mediaIndex), this.options.onActivate(e.postId)), !0;
-	}
-	retryForward() {
-		return !this.forward || this.state.reelForward.status === "idle" ? Promise.resolve() : (this.state.nextPageError = null, this.state.reelForward = {
-			error: null,
-			status: "loading"
-		}, this.startForwardRequest(this.state.next === null));
-	}
-	advanceFromRemovedPost(e, t) {
-		let n = this.state.items[e.postIndex];
-		if (n) {
-			this.options.onActivate(n.postId);
-			return;
-		}
-		this.forward = {
-			postIndex: e.postIndex,
-			removal: e,
-			version: ++this.forwardVersion
-		}, this.state.reelForward = {
-			error: null,
-			status: "loading"
-		}, this.state.reelForwardIndex = e.postIndex, this.state.reelForwardItem = t, this.startForwardRequest(!1);
-	}
-	clearForwardState() {
-		this.state.reelForward = {
-			error: null,
-			status: "idle"
-		}, this.state.reelForwardIndex = null, this.state.reelForwardItem = null;
-	}
-	isReelOpen() {
-		return this.state.layout === "reel" || this.state.reelOrigin === "masonry";
-	}
-	restoreIntoPost(e, t) {
-		let n = this.state.items[e], r = [...j(n)], i = Math.min(t.mediaIndex, r.length);
-		if (r.splice(i, 0, t.media), this.state.items[e] = Qt(n, r), this.state.activeReelPostId !== t.postId) return;
-		let a = this.state.mediaIndices.get(t.postId) ?? 0;
-		a >= i && this.state.mediaIndices.set(t.postId, a + 1);
-	}
-	startForwardRequest(e) {
-		if (this.forwardPromise) return this.forwardPromise;
-		let t = this.loadForward(e);
-		return this.forwardPromise = t, t.finally(() => {
-			this.forwardPromise === t && (this.forwardPromise = null, this.forward && this.state.reelForward.status === "loading" && this.startForwardRequest(!1));
-		});
-	}
-	async loadForward(e) {
-		let t = this.forward;
-		if (t) for (e && await this.options.retryEnd(); this.forward === t && t.version === this.forwardVersion;) {
-			let e = this.state.items[t.postIndex];
-			if (e) {
-				this.forward = null, this.clearForwardState(), this.options.onActivate(e.postId);
-				return;
-			}
-			if (this.state.nextPageError) {
-				this.state.reelForward = {
-					error: this.state.nextPageError,
-					status: "error"
-				};
-				return;
-			}
-			if (this.state.next === null) {
-				this.state.reelForward = {
-					error: null,
-					status: "end"
-				};
-				return;
-			}
-			let n = this.state.next;
-			if (await this.options.loadNext(), this.state.next === n && !this.state.nextPageError && !this.state.items[t.postIndex]) {
-				this.state.reelForward = {
-					error: /* @__PURE__ */ Error("Vibe could not advance while page loading is unavailable."),
-					status: "error"
-				};
-				return;
-			}
-		}
-	}
-	updateMediaIndexAfterRemoval(e, t, n) {
-		let r = this.state.items.find((t) => t.postId === e);
-		if (!r) return;
-		let i = j(r).length, a = this.state.mediaIndices.get(e) ?? 0, o = a;
-		n ? o = t < i ? t : 0 : t < a && (o = a - 1), this.state.mediaIndices.set(e, Math.min(o, i - 1));
-	}
-};
-//#endregion
 //#region src/core/fill.ts
-function tn(e) {
+function en(e) {
 	return "pages" in e ? { pages: e.pages } : { until: "end" };
 }
-function nn(e) {
+function tn(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function rn(e) {
+function nn(e) {
 	if (!e || typeof e != "object") throw TypeError("Vibe fill target must be an object.");
 	if ("pages" in e) {
 		if (!Number.isInteger(e.pages) || e.pages <= 0) throw TypeError("Vibe fill pages must be a positive integer.");
@@ -2576,20 +2464,20 @@ function rn(e) {
 	if ("until" in e && e.until === "end") return { until: "end" };
 	throw TypeError("Vibe fill target must be { pages } or { until: 'end' }.");
 }
-function an(e) {
+function rn(e) {
 	if (!e) return;
 	if (e.strategy === "frontend") {
-		Dt(e, "frontend fill");
+		At(e, "frontend fill");
 		return;
 	}
 	if (!e.feedKey.trim()) throw TypeError("Vibe backend fill requires a feedKey.");
 	let t = e.initialSession;
 	if (t) {
 		if (t.feedKey !== e.feedKey) throw TypeError("Vibe backend fill initialSession feedKey must match fill feedKey.");
-		rn(t.target);
+		nn(t.target);
 	}
 }
-function on(e, t, n = !0) {
+function an(e, t, n = !0) {
 	let r = e?.strategy === "backend" && n ? e.initialSession : void 0, i = t ?? r, a = $(i?.nextRequestAt);
 	return {
 		completedPages: i?.completedPages ?? 0,
@@ -2603,10 +2491,10 @@ function on(e, t, n = !0) {
 		sessionId: i?.sessionId ?? null,
 		status: i?.status ?? "idle",
 		strategy: e?.strategy ?? null,
-		target: i ? tn(i.target) : null
+		target: i ? en(i.target) : null
 	};
 }
-function sn(e) {
+function on(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -2614,17 +2502,17 @@ function sn(e) {
 		"waiting"
 	].includes(e.status);
 }
-async function cn({ existingItems: e, initialCursor: t, loadPage: n, onDelayChange: r, onProgress: i, options: a, signal: o, target: s }) {
+async function sn({ existingItems: e, initialCursor: t, loadPage: n, onDelayChange: r, onProgress: i, options: a, signal: o, target: s }) {
 	let c = [], l = [...e], u = /* @__PURE__ */ new Set(), d = 0, f = t, p = t, m = 0, h;
 	for (; p !== null;) {
-		let e = nn(f);
+		let e = tn(f);
 		if (u.has(e)) throw Error("Vibe fill received a repeated cursor.");
-		u.add(e), await kt({
-			delayMs: Ot(d, a),
+		u.add(e), await Mt({
+			delayMs: jt(d, a),
 			onChange: r,
 			signal: o
 		});
-		let t = xt(await n({
+		let t = wt(await n({
 			cursor: f,
 			signal: o
 		}));
@@ -2666,7 +2554,7 @@ async function cn({ existingItems: e, initialCursor: t, loadPage: n, onDelayChan
 }
 //#endregion
 //#region src/core/backendFill.ts
-async function ln(e, t, n, r) {
+async function cn(e, t, n, r) {
 	let i = await e.onStart(n);
 	if (r()) {
 		if (!i.sessionId.trim()) throw TypeError("Vibe backend fill requires a sessionId.");
@@ -2680,22 +2568,22 @@ async function ln(e, t, n, r) {
 		});
 	}
 }
-function un(e, t, n) {
+function ln(e, t, n) {
 	return e?.strategy === "backend" && n.feedKey === e.feedKey && n.sessionId === t.fill.sessionId;
 }
-function dn(e) {
+function un(e) {
 	return Number.isInteger(e.completedPages) && e.completedPages >= 0 && Number.isInteger(e.received) && e.received >= 0 && Number.isInteger(e.sequence) && e.sequence >= 0;
 }
-function fn(e, t) {
+function dn(e, t) {
 	if (!["complete", "exhausted"].includes(t.status)) return !0;
 	let n = e.fill.target;
 	return !n || !Array.isArray(t.items) || t.next === void 0 || t.lastCursor === void 0 ? !1 : t.status === "exhausted" ? "pages" in n && t.completedPages < n.pages && t.next === null : "pages" in n ? t.completedPages === n.pages : t.next === null;
 }
-function pn(e, t, n) {
+function fn(e, t, n) {
 	t.total !== void 0 && (e.total = t.total), ["complete", "exhausted"].includes(t.status) && (e.items = Q(e.items, t.items ?? []), e.next = t.next ?? null, n(t.lastCursor ?? null));
 }
-function mn(e, t, n, r) {
-	return !un(e, t, n) || !dn(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !fn(t, n) ? !1 : (pn(t, n, r), Object.assign(t.fill, {
+function pn(e, t, n, r) {
+	return !ln(e, t, n) || !un(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !dn(t, n) ? !1 : (fn(t, n, r), Object.assign(t.fill, {
 		...$(n.status === "waiting" ? n.nextRequestAt : null),
 		completedPages: n.completedPages,
 		error: n.error ?? null,
@@ -2704,41 +2592,41 @@ function mn(e, t, n, r) {
 		status: n.status
 	}), !0);
 }
-function hn(e, t, n, r) {
+function mn(e, t, n, r) {
 	if (e?.strategy !== "backend" || n.feedKey !== e.feedKey) return !1;
 	let i = t.fill;
-	return t.fill = on(e, n), !dn(n) || !fn(t, n) ? (t.fill = i, !1) : (pn(t, n, r), !0);
+	return t.fill = an(e, n), !un(n) || !dn(t, n) ? (t.fill = i, !1) : (fn(t, n, r), !0);
 }
 //#endregion
 //#region src/core/fillController.ts
-var gn = class {
+var hn = class {
 	abortController = null;
 	cycle = 0;
 	delayCountdown;
 	requestVersion = 0;
 	constructor(e) {
-		this.options = e, this.delayCountdown = new At((e) => {
+		this.options = e, this.delayCountdown = new Nt((e) => {
 			Object.assign(this.options.state.fill, e);
 		}), this.syncBackendCountdown();
 	}
 	isActive() {
-		return sn(this.options.state.fill);
+		return on(this.options.state.fill);
 	}
 	applyUpdate(e) {
-		let t = mn(this.options.fill, this.options.state, e, this.options.onLastCursor);
+		let t = pn(this.options.fill, this.options.state, e, this.options.onLastCursor);
 		return t && this.syncBackendCountdown(), t;
 	}
 	restoreSession(e) {
-		let t = hn(this.options.fill, this.options.state, e, this.options.onLastCursor);
+		let t = mn(this.options.fill, this.options.state, e, this.options.onLastCursor);
 		return t && this.syncBackendCountdown(), t;
 	}
 	async start(e) {
 		let t = this.options.fill;
 		if (!t) throw Error("Vibe fill is not configured.");
 		if (this.isActive()) throw Error("Vibe fill is already active.");
-		let n = rn(e), r = `vibe-fill-${Date.now().toString(36)}-${++this.cycle}`;
+		let n = nn(e), r = `vibe-fill-${Date.now().toString(36)}-${++this.cycle}`;
 		if (this.options.state.fill = {
-			...on(t, void 0, !1),
+			...an(t, void 0, !1),
 			cycleId: r,
 			status: "filling",
 			target: n
@@ -2749,7 +2637,7 @@ var gn = class {
 		let i = ++this.requestVersion, a = new AbortController();
 		this.abortController = a;
 		try {
-			t.strategy === "frontend" ? await this.startFrontend(t, n, a, i) : (await ln(t, this.options.state, {
+			t.strategy === "frontend" ? await this.startFrontend(t, n, a, i) : (await cn(t, this.options.state, {
 				cycleId: r,
 				feedKey: t.feedKey,
 				items: [...this.options.state.items],
@@ -2767,7 +2655,7 @@ var gn = class {
 	}
 	async cancel() {
 		let { fill: e, state: t } = this.options;
-		if (!sn(t.fill) || !t.fill.cycleId) return;
+		if (!on(t.fill) || !t.fill.cycleId) return;
 		let n = {
 			cycleId: t.fill.cycleId,
 			feedKey: t.fill.feedKey ?? "",
@@ -2781,7 +2669,7 @@ var gn = class {
 		}
 	}
 	reset() {
-		this.abortLocalRequest(), this.delayCountdown.clear(), this.options.state.fill = on(this.options.fill, void 0, !1);
+		this.abortLocalRequest(), this.delayCountdown.clear(), this.options.state.fill = an(this.options.fill, void 0, !1);
 	}
 	destroy() {
 		this.abortLocalRequest(), this.delayCountdown.clear();
@@ -2797,7 +2685,7 @@ var gn = class {
 		if (!i) throw Error("Vibe frontend fill requires loadPage.");
 		let a = this.options.state;
 		a.isLoadingMore = !0;
-		let o = await cn({
+		let o = await sn({
 			existingItems: a.items,
 			initialCursor: a.next,
 			loadPage: i,
@@ -2824,7 +2712,7 @@ var gn = class {
 };
 //#endregion
 //#region src/core/feedFooter.ts
-function _n(e) {
+function gn(e) {
 	return {
 		cancelAutofill: () => e.cancelAutofill(),
 		loadMore: () => e.loadNext(),
@@ -2832,45 +2720,45 @@ function _n(e) {
 		retryEnd: () => e.retryEnd()
 	};
 }
-function vn(e) {
+function _n(e) {
 	if (!Number.isFinite(e) || e <= 0) throw TypeError("Vibe reelAutoAdvance.intervalMs must be a positive number.");
 }
-function yn(e) {
-	e?.intervalMs !== void 0 && vn(e.intervalMs);
+function vn(e) {
+	e?.intervalMs !== void 0 && _n(e.intervalMs);
 }
-function bn(e) {
+function yn(e) {
 	return {
 		enabled: e?.enabled ?? !1,
 		includePostItems: e?.includePostItems ?? !1,
 		intervalMs: e?.intervalMs ?? 5e3
 	};
 }
-function xn(e, t) {
+function bn(e, t) {
 	if (typeof t == "boolean") {
 		e.enabled = t;
 		return;
 	}
-	yn(t), t.enabled !== void 0 && (e.enabled = t.enabled), t.includePostItems !== void 0 && (e.includePostItems = t.includePostItems), t.intervalMs !== void 0 && (e.intervalMs = t.intervalMs);
+	vn(t), t.enabled !== void 0 && (e.enabled = t.enabled), t.includePostItems !== void 0 && (e.includePostItems = t.includePostItems), t.intervalMs !== void 0 && (e.intervalMs = t.intervalMs);
 }
 //#endregion
 //#region src/core/reelInfoSheet.ts
-function Sn(e) {
+function xn(e) {
 	return { enabled: e?.enabled ?? !1 };
 }
-function Cn(e, t, n) {
+function Sn(e, t, n) {
 	if (n && !t) throw Error("Vibe cannot enable reelInfoSheet without a configured component.");
 	e.enabled = n;
 }
 //#endregion
 //#region src/core/initialRuntimeState.ts
-function wn(e, t) {
+function Cn(e, t) {
 	let n = e.initialPage;
 	return {
 		activeReelPostId: null,
-		autoScroll: Wt(e.autoScroll),
-		autofill: Ft(e.autofill),
+		autoScroll: qt(e.autoScroll),
+		autofill: Rt(e.autofill),
 		error: null,
-		fill: on(e.fill),
+		fill: an(e.fill),
 		infiniteScroll: e.infiniteScroll ?? !0,
 		isLoading: !n,
 		isLoadingMore: !1,
@@ -2880,14 +2768,14 @@ function wn(e, t) {
 		mediaIndices: /* @__PURE__ */ new Map(),
 		next: n?.next ?? null,
 		nextPageError: null,
-		reelAutoAdvance: bn(e.reelAutoAdvance),
+		reelAutoAdvance: yn(e.reelAutoAdvance),
 		reelForward: {
 			error: null,
 			status: "idle"
 		},
 		reelForwardIndex: null,
 		reelForwardItem: null,
-		reelInfoSheet: Sn(e.reelInfoSheet),
+		reelInfoSheet: xn(e.reelInfoSheet),
 		reelInfoSheetOverlay: !1,
 		reelMediaSource: "original",
 		reelOrigin: null,
@@ -2895,19 +2783,136 @@ function wn(e, t) {
 	};
 }
 //#endregion
-//#region src/core/itemPlacement.ts
+//#region src/core/options.ts
+function wn(e, t) {
+	if (t) {
+		if (!Number.isFinite(t.height) || t.height <= 0) throw TypeError(`Vibe ${e} height must be a positive number.`);
+		if (t.background !== void 0 && t.background !== "default" && t.background !== "transparent") throw TypeError(`Vibe ${e} background must be "default" or "transparent".`);
+	}
+}
 function Tn(e, t) {
+	if (t) {
+		if (t.background !== void 0 && t.background !== "default" && t.background !== "transparent") throw TypeError(`Vibe mediaCard ${e} background must be "default" or "transparent".`);
+		for (let [n, r] of [["paddingX", t.paddingX], ["paddingY", t.paddingY]]) if (r !== void 0 && (!Number.isFinite(r) || r < 0)) throw TypeError(`Vibe mediaCard ${e} ${n} must be a non-negative number.`);
+	}
+}
+function En(e) {
+	if (Kt(e.autoScroll), wn("cardHeader", e.cardHeader), wn("cardFooter", e.cardFooter), Tn("header", e.mediaCard?.header), Tn("footer", e.mediaCard?.footer), Lt(e.autofill), rn(e.fill), vn(e.reelAutoAdvance), e.removalHistoryLimit !== void 0 && (!Number.isInteger(e.removalHistoryLimit) || e.removalHistoryLimit < 0)) throw TypeError("Vibe removalHistoryLimit must be a non-negative integer.");
+	if (!e.initialPage && !e.loadPage) throw TypeError("Vibe requires either initialPage or loadPage.");
+	if (e.initialPage?.next !== null && !e.loadPage) throw TypeError("Vibe requires loadPage when initialPage has a next cursor.");
+	if (e.fill?.strategy === "frontend" && !e.loadPage) throw TypeError("Vibe frontend fill requires loadPage.");
+	if (e.fill?.strategy === "backend" && e.fill.initialSession && !e.initialPage) throw TypeError("Vibe backend fill restoration requires initialPage.");
+}
+function Dn(e) {
+	if (typeof e != "string") return e;
+	if (typeof document > "u") throw Error("Vibe cannot resolve a selector without a document.");
+	let t = document.querySelector(e);
+	if (!t) throw Error(`Vibe target not found: ${e}`);
+	return t;
+}
+//#endregion
+//#region src/core/activeItemRemoval.ts
+function On(e, t, n, r, i) {
+	let a = new Set(t.map(({ item: e }) => e.postId));
+	if (e.activeReelPostId === null || !a.has(e.activeReelPostId)) return;
+	let o = e.items[Math.max(n, 0)];
+	if (o) {
+		r(o.postId);
+		return;
+	}
+	let s = t.find(({ item: t }) => t.postId === e.activeReelPostId)?.item;
+	s && i(Math.max(n, 0), s);
+}
+//#endregion
+//#region src/core/exactMediaRemovalController.ts
+function kn(e, t) {
+	let [n, ...r] = t;
+	if (!n) throw Error("Vibe items must contain at least one media asset.");
+	return {
+		...e,
+		...n,
+		items: r
+	};
+}
+function An(e) {
+	if (!Number.isInteger(e.mediaIndex) || e.mediaIndex < 0) throw TypeError("Vibe mediaIndex must be a non-negative integer.");
+}
+var jn = class {
+	generation = 0;
+	metadata = /* @__PURE__ */ new WeakMap();
+	state;
+	constructor(e) {
+		this.options = e, this.state = e.state;
+	}
+	remove(e) {
+		An(e);
+		let t = this.state.items.findIndex(({ postId: t }) => t === e.postId), n = this.state.items[t];
+		if (!n) return null;
+		let r = [...j(n)], i = r[e.mediaIndex];
+		if (!i) return null;
+		let a = Object.freeze({
+			media: i,
+			mediaIndex: e.mediaIndex,
+			postId: e.postId,
+			postIndex: t
+		});
+		this.metadata.set(a, {
+			generation: this.generation,
+			originalItem: n,
+			restored: !1
+		});
+		let o = this.state.mediaIndices.get(n.postId) ?? 0, s = this.isReelOpen() && this.state.activeReelPostId === n.postId, c = s && o === e.mediaIndex;
+		return r.splice(e.mediaIndex, 1), r.length > 0 ? (this.state.items[t] = kn(n, r), this.updateMediaIndexAfterRemoval(n.postId, e.mediaIndex, c), a) : (this.state.items.splice(t, 1), this.state.mediaIndices.delete(n.postId), s && this.advanceFromRemovedPost(a, n), a);
+	}
+	reset() {
+		this.generation += 1;
+	}
+	restore(e) {
+		let t = this.metadata.get(e);
+		if (!t) throw TypeError("Vibe media removal does not belong to this instance.");
+		if (t.generation !== this.generation || t.restored) return !1;
+		t.restored = !0;
+		let n = this.state.items.findIndex(({ postId: t }) => t === e.postId);
+		return n >= 0 ? this.restoreIntoPost(n, e) : this.state.items.splice(Math.min(e.postIndex, this.state.items.length), 0, t.originalItem), this.options.reelForward.cancel(e) && (this.state.mediaIndices.set(e.postId, e.mediaIndex), this.options.onActivate(e.postId)), !0;
+	}
+	advanceFromRemovedPost(e, t) {
+		let n = this.state.items[e.postIndex];
+		if (n) {
+			this.options.onActivate(n.postId);
+			return;
+		}
+		this.options.reelForward.start(e, e.postIndex, t);
+	}
+	isReelOpen() {
+		return this.state.layout === "reel" || this.state.reelOrigin === "masonry";
+	}
+	restoreIntoPost(e, t) {
+		let n = this.state.items[e], r = [...j(n)], i = Math.min(t.mediaIndex, r.length);
+		if (r.splice(i, 0, t.media), this.state.items[e] = kn(n, r), this.state.activeReelPostId !== t.postId) return;
+		let a = this.state.mediaIndices.get(t.postId) ?? 0;
+		a >= i && this.state.mediaIndices.set(t.postId, a + 1);
+	}
+	updateMediaIndexAfterRemoval(e, t, n) {
+		let r = this.state.items.find((t) => t.postId === e);
+		if (!r) return;
+		let i = j(r).length, a = this.state.mediaIndices.get(e) ?? 0, o = a;
+		n ? o = t < i ? t : 0 : t < a && (o = a - 1), this.state.mediaIndices.set(e, Math.min(o, i - 1));
+	}
+};
+//#endregion
+//#region src/core/itemPlacement.ts
+function Mn(e, t) {
 	let n = new Set(t);
 	return e.flatMap((e, t) => n.has(e.postId) ? [{
 		index: t,
 		item: e
 	}] : []);
 }
-function En(e, t) {
+function Nn(e, t) {
 	let n = new Set(t.map(({ item: e }) => e.postId));
 	return e.filter((e) => !n.has(e.postId));
 }
-function Dn(e, t) {
+function Pn(e, t) {
 	t.forEach(({ index: e }) => {
 		if (!Number.isInteger(e) || e < 0) throw Error("Vibe item restore indexes must be non-negative integers.");
 	});
@@ -2918,7 +2923,7 @@ function Dn(e, t) {
 }
 //#endregion
 //#region src/core/itemRemovalController.ts
-var On = 20, kn = class {
+var Fn = 20, In = class {
 	generation = 0;
 	historyLimit;
 	metadata = /* @__PURE__ */ new WeakMap();
@@ -2927,7 +2932,7 @@ var On = 20, kn = class {
 	itemOrder;
 	stopItemsWatcher;
 	constructor(e) {
-		this.options = e, this.historyLimit = e.historyLimit ?? On, this.state = e.state, this.itemOrder = this.state.items.map(({ postId: e }) => e), this.stopItemsWatcher = D(() => this.state.items, (e) => this.appendUnknownItems(e), { flush: "sync" });
+		this.options = e, this.historyLimit = e.historyLimit ?? Fn, this.state = e.state, this.itemOrder = this.state.items.map(({ postId: e }) => e), this.stopItemsWatcher = D(() => this.state.items, (e) => this.appendUnknownItems(e), { flush: "sync" });
 	}
 	destroy() {
 		this.reset(), this.stopItemsWatcher();
@@ -2935,10 +2940,12 @@ var On = 20, kn = class {
 	async remove(e) {
 		let t = this.collectOrderedPlacements(e), n = this.createRemoval(t);
 		if (t.length === 0) return n;
-		let r = t.map(({ item: e }) => e.postId), i = this.options.startRemoval(r);
+		let r = t.map(({ item: e }) => e.postId);
+		if (await this.options.prepareRemoval(r), this.metadata.get(n)?.generation !== this.generation) return n;
+		let i = this.options.startRemoval(r);
 		if (i > 0 && await new Promise((e) => setTimeout(e, i)), this.metadata.get(n)?.generation !== this.generation) return n;
-		let a = this.state.items.findIndex((e) => e.postId === this.state.activeReelPostId);
-		return this.state.items = En(this.state.items, t), this.options.onItemsRemoved(t, a), this.record(n), n;
+		let a = this.state.items.findIndex((e) => e.postId === this.state.activeReelPostId), o = new Set(t.map(({ item: e }) => e.postId)), s = a < 0 ? 0 : this.state.items.slice(0, a).filter(({ postId: e }) => o.has(e)).length, c = Math.max(a - s, 0);
+		return this.state.items = Nn(this.state.items, t), this.options.onItemsRemoved(n, t, c), this.record(n), n;
 	}
 	reset() {
 		this.generation += 1, this.history = [], this.itemOrder = [];
@@ -2949,13 +2956,16 @@ var On = 20, kn = class {
 			this.restoreRemoval(t);
 			return;
 		}
-		let n = Dn(this.state.items, e);
+		let n = Pn(this.state.items, e);
 		this.registerExternalPlacements(e), this.state.items = n;
 	}
 	restoreRemoval(e) {
 		let t = this.metadata.get(e);
 		if (!t) throw TypeError("Vibe removal does not belong to this instance.");
-		return t.generation !== this.generation || t.restored ? !1 : (t.restored = !0, this.removeFromHistory(e), this.restoreOrderedPlacements(e));
+		if (t.generation !== this.generation || t.restored) return !1;
+		t.restored = !0, this.removeFromHistory(e);
+		let n = this.restoreOrderedPlacements(e);
+		return n && this.options.onRemovalRestored(e), n;
 	}
 	undoLast() {
 		for (; this.history.length > 0;) {
@@ -2972,7 +2982,7 @@ var On = 20, kn = class {
 	}
 	collectOrderedPlacements(e) {
 		let t = new Map(this.itemOrder.map((e, t) => [e, t]));
-		return Tn(this.state.items, e).map((e) => ({
+		return Mn(this.state.items, e).map((e) => ({
 			index: t.get(e.item.postId) ?? e.index,
 			item: e.item
 		}));
@@ -3003,46 +3013,174 @@ var On = 20, kn = class {
 		let r = new Map(this.itemOrder.map((e, t) => [e, t]));
 		return this.state.items = [...this.state.items, ...n].sort((e, t) => (r.get(e.postId) ?? 2 ** 53 - 1) - (r.get(t.postId) ?? 2 ** 53 - 1)), !0;
 	}
-};
-//#endregion
-//#region src/core/options.ts
-function An(e, t) {
-	if (t) {
-		if (!Number.isFinite(t.height) || t.height <= 0) throw TypeError(`Vibe ${e} height must be a positive number.`);
-		if (t.background !== void 0 && t.background !== "default" && t.background !== "transparent") throw TypeError(`Vibe ${e} background must be "default" or "transparent".`);
+}, Ln = class {
+	forward = null;
+	forwardPromise = null;
+	forwardVersion = 0;
+	state;
+	constructor(e) {
+		this.options = e, this.state = e.state;
 	}
-}
-function jn(e, t) {
-	if (t) {
-		if (t.background !== void 0 && t.background !== "default" && t.background !== "transparent") throw TypeError(`Vibe mediaCard ${e} background must be "default" or "transparent".`);
-		for (let [n, r] of [["paddingX", t.paddingX], ["paddingY", t.paddingY]]) if (r !== void 0 && (!Number.isFinite(r) || r < 0)) throw TypeError(`Vibe mediaCard ${e} ${n} must be a non-negative number.`);
+	start(e, t, n) {
+		this.forward = {
+			item: n,
+			postIndex: t,
+			token: e,
+			version: ++this.forwardVersion
+		}, this.state.reelForward = {
+			error: null,
+			status: "loading"
+		}, this.state.reelForwardIndex = t, this.state.reelForwardItem = n, this.startForwardRequest(!1);
 	}
+	cancel(e) {
+		if (this.forward?.token !== e || this.state.reelForward.status === "idle") return null;
+		let t = this.forward.item;
+		return this.forwardVersion += 1, this.forward = null, this.clearState(), t;
+	}
+	reset() {
+		this.forwardVersion += 1, this.forward = null, this.forwardPromise = null, this.clearState();
+	}
+	retry() {
+		return !this.forward || this.state.reelForward.status === "idle" ? Promise.resolve() : (this.state.nextPageError = null, this.state.reelForward = {
+			error: null,
+			status: "loading"
+		}, this.startForwardRequest(this.state.next === null));
+	}
+	clearState() {
+		this.state.reelForward = {
+			error: null,
+			status: "idle"
+		}, this.state.reelForwardIndex = null, this.state.reelForwardItem = null;
+	}
+	startForwardRequest(e) {
+		if (this.forwardPromise) return this.forwardPromise;
+		let t = this.loadForward(e);
+		return this.forwardPromise = t, t.finally(() => {
+			this.forwardPromise === t && (this.forwardPromise = null, this.forward && this.state.reelForward.status === "loading" && this.startForwardRequest(!1));
+		});
+	}
+	async loadForward(e) {
+		let t = this.forward;
+		if (t) for (e && await this.options.retryEnd(); this.forward === t && t.version === this.forwardVersion;) {
+			let e = this.state.items[t.postIndex];
+			if (e) {
+				this.forward = null, this.clearState(), this.options.onActivate(e.postId);
+				return;
+			}
+			if (this.state.nextPageError) {
+				this.state.reelForward = {
+					error: this.state.nextPageError,
+					status: "error"
+				};
+				return;
+			}
+			if (this.state.next === null) {
+				this.state.reelForward = {
+					error: null,
+					status: "end"
+				};
+				return;
+			}
+			let n = this.state.next;
+			if (await this.options.loadNext(), this.state.next === n && !this.state.nextPageError && !this.state.items[t.postIndex]) {
+				this.state.reelForward = {
+					error: /* @__PURE__ */ Error("Vibe could not advance while page loading is unavailable."),
+					status: "error"
+				};
+				return;
+			}
+		}
+	}
+}, Rn = class {
+	generation = 0;
+	pending = Promise.resolve();
+	constructor(e) {
+		this.options = e;
+	}
+	prepareItems(e) {
+		return this.serialize(() => this.preparePosts(e));
+	}
+	prepareMedia(e) {
+		return this.serialize(async () => {
+			let { state: t } = this.options;
+			if (!this.isReelActive() || t.activeReelPostId !== e.postId) return;
+			let n = t.items.find(({ postId: t }) => t === e.postId);
+			if (!n) return;
+			let r = t.mediaIndices.get(e.postId) ?? 0;
+			if (e.mediaIndex === r) {
+				if (j(n).length > 1) {
+					await this.options.transitionMedia(1);
+					return;
+				}
+				await this.preparePosts([e.postId]);
+			}
+		});
+	}
+	reset() {
+		this.generation += 1, this.pending = Promise.resolve();
+	}
+	async preparePosts(e) {
+		let { state: t } = this.options, n = t.activeReelPostId, r = new Set(e);
+		if (!this.isReelActive() || n === null || !r.has(n)) return;
+		let i = this.generation, a = t.items.findIndex(({ postId: e }) => e === n);
+		if (a < 0) return;
+		let o = this.nextSurvivor(a, r);
+		o && i === this.generation && t.activeReelPostId === n && await this.options.transitionPost(o.postId);
+	}
+	isReelActive() {
+		let { state: e } = this.options;
+		return e.layout === "reel" || e.reelOrigin === "masonry";
+	}
+	nextSurvivor(e, t) {
+		if (!(e < 0)) return this.options.state.items.slice(e + 1).find(({ postId: e }) => !t.has(e));
+	}
+	serialize(e) {
+		let t = this.pending.then(e, e);
+		return this.pending = t.catch(() => void 0), t;
+	}
+};
+//#endregion
+//#region src/core/removalControllers.ts
+function zn(e) {
+	let t = new Ln(e), n = new Rn({
+		state: e.state,
+		transitionMedia: (t) => e.surface()?.transitionActiveReelMedia(t) ?? Promise.resolve(!1),
+		transitionPost: (t) => e.surface()?.transitionActiveReelPost(t) ?? Promise.resolve(!1)
+	});
+	return {
+		exactMediaRemoval: new jn({
+			onActivate: e.onActivate,
+			reelForward: t,
+			state: e.state
+		}),
+		itemRemoval: new In({
+			historyLimit: e.historyLimit,
+			onItemsRemoved: (n, r, i) => {
+				On(e.state, r, i, e.onActivate, (e, r) => t.start(n, e, r));
+			},
+			onRemovalRestored: (n) => {
+				let r = t.cancel(n);
+				r && e.onActivate(r.postId);
+			},
+			prepareRemoval: (e) => n.prepareItems(e),
+			startRemoval: (t) => e.surface()?.startItemRemoval(t) ?? 0,
+			state: e.state
+		}),
+		reelForward: t,
+		reelRemoval: n
+	};
 }
-function Mn(e) {
-	if (Ut(e.autoScroll), An("cardHeader", e.cardHeader), An("cardFooter", e.cardFooter), jn("header", e.mediaCard?.header), jn("footer", e.mediaCard?.footer), Pt(e.autofill), an(e.fill), yn(e.reelAutoAdvance), e.removalHistoryLimit !== void 0 && (!Number.isInteger(e.removalHistoryLimit) || e.removalHistoryLimit < 0)) throw TypeError("Vibe removalHistoryLimit must be a non-negative integer.");
-	if (!e.initialPage && !e.loadPage) throw TypeError("Vibe requires either initialPage or loadPage.");
-	if (e.initialPage?.next !== null && !e.loadPage) throw TypeError("Vibe requires loadPage when initialPage has a next cursor.");
-	if (e.fill?.strategy === "frontend" && !e.loadPage) throw TypeError("Vibe frontend fill requires loadPage.");
-	if (e.fill?.strategy === "backend" && e.fill.initialSession && !e.initialPage) throw TypeError("Vibe backend fill restoration requires initialPage.");
-}
-function Nn(e) {
-	if (typeof e != "string") return e;
-	if (typeof document > "u") throw Error("Vibe cannot resolve a selector without a document.");
-	let t = document.querySelector(e);
-	if (!t) throw Error(`Vibe target not found: ${e}`);
-	return t;
-}
-var Pn = 1.5;
-function Fn(e) {
+var Bn = 1.5;
+function Vn(e) {
 	let t = Math.min(e.screenWidth, e.screenHeight);
 	if (t > 0 && t < 600) return !0;
-	let n = Math.min(e.viewportWidth, e.viewportHeight), r = t >= n * Pn;
+	let n = Math.min(e.viewportWidth, e.viewportHeight), r = t >= n * Bn;
 	return !e.hasHover && n > 0 && n < 600 && r;
 }
-function In(e) {
-	return Fn(e) ? "reel" : "masonry";
+function Hn(e) {
+	return Vn(e) ? "reel" : "masonry";
 }
-function Ln(e) {
+function Un(e) {
 	let t = e.ownerDocument.defaultView, n = e.ownerDocument.documentElement;
 	return {
 		hasHover: typeof t?.matchMedia == "function" && t.matchMedia("(hover: hover)").matches,
@@ -3052,15 +3190,15 @@ function Ln(e) {
 		viewportWidth: n.clientWidth
 	};
 }
-function Rn(e) {
-	return Fn(Ln(e));
+function Wn(e) {
+	return Vn(Un(e));
 }
-function zn(e) {
-	return In(Ln(e));
+function Gn(e) {
+	return Hn(Un(e));
 }
 //#endregion
 //#region src/core/responsiveLayoutController.ts
-var Bn = class {
+var Kn = class {
 	layoutMode;
 	resizeObserver = null;
 	target = null;
@@ -3085,10 +3223,10 @@ var Bn = class {
 	}
 	handleResponsiveLayout = () => {
 		if (!this.target) return;
-		let e = zn(this.target);
-		this.state.reelInfoSheetOverlay = Rn(this.target), this.state.reelMediaSource = e === "reel" ? "preview" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
+		let e = Gn(this.target);
+		this.state.reelInfoSheetOverlay = Wn(this.target), this.state.reelMediaSource = e === "reel" ? "preview" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
 	};
-}, Vn = class {
+}, qn = class {
 	routedReelPostId = null;
 	reelRouteIsActive = !1;
 	constructor(e, t) {
@@ -3115,7 +3253,7 @@ var Bn = class {
 		let i = this.reelRouteIsActive ? "replace" : "push";
 		this.reelRouteIsActive = !0, this.routedReelPostId = e, this.options.router[i](r);
 	}
-}, Hn = class {
+}, Jn = class {
 	app = null;
 	autoScroll;
 	autofillDelayCountdown;
@@ -3128,53 +3266,54 @@ var Bn = class {
 	fillController;
 	exactMediaRemoval;
 	itemRemoval;
+	reelForward;
+	reelRemoval;
 	surface = null;
 	stopStateWatcher = null;
 	lastLoadedCursor = null;
 	state;
 	constructor(e) {
-		this.options = e, Mn(e);
+		this.options = e, En(e);
 		let t = e.layout ?? "masonry";
-		this.state = b(wn(e, t)), this.autoScroll = new Gt({
+		this.state = b(Cn(e, t)), this.autoScroll = new Jt({
 			getScrollElement: () => this.surface?.getAutoScrollElement() ?? null,
 			state: this.state.autoScroll
-		}), this.autofillDelayCountdown = new At((e) => Object.assign(this.state.autofill, e)), this.syncAutofillCountdown(), this.fillController = new gn({
+		}), this.autofillDelayCountdown = new Nt((e) => Object.assign(this.state.autofill, e)), this.syncAutofillCountdown(), this.fillController = new hn({
 			fill: e.fill,
 			loadPage: e.loadPage,
 			onLastCursor: (e) => {
 				this.lastLoadedCursor = e;
 			},
 			state: this.state
-		}), this.routing = new Vn(e.routing, this.state), this.exactMediaRemoval = new en({
+		}), this.routing = new qn(e.routing, this.state);
+		let n = zn({
+			historyLimit: e.removalHistoryLimit,
 			loadNext: () => this.loadNext(),
 			onActivate: (e) => this.setActiveReelPost(e),
 			retryEnd: () => this.retryEnd(),
-			state: this.state
-		}), this.itemRemoval = new kn({
-			historyLimit: e.removalHistoryLimit,
-			onItemsRemoved: (e, t) => {
-				Zt(this.state, this.routing, e, t, () => this.closeMasonryReel());
-			},
-			startRemoval: (e) => this.surface?.startItemRemoval(e) ?? 0,
-			state: this.state
-		}), this.responsiveLayout = new Bn(t, this.state, () => {
+			state: this.state,
+			surface: () => this.surface
+		});
+		this.exactMediaRemoval = n.exactMediaRemoval, this.itemRemoval = n.itemRemoval, this.reelForward = n.reelForward, this.reelRemoval = n.reelRemoval, this.responsiveLayout = new Kn(t, this.state, () => {
 			this.routing.syncFeed();
 		}), this.startStateNotifications();
 	}
 	async mount() {
 		if (this.app) throw Error("Vibe is already mounted.");
 		this.startStateNotifications();
-		let e = Nn(this.options.target);
-		this.responsiveLayout.mount(e), this.app = r(bt, {
+		let e = Dn(this.options.target);
+		this.responsiveLayout.mount(e), this.app = r(Ct, {
 			canRetryEnd: !!this.options.loadPage,
 			cardFooter: this.options.cardFooter,
 			cardHeader: this.options.cardHeader,
 			feedFooter: this.options.feedFooter,
-			feedFooterActions: _n(this),
+			feedFooterActions: gn(this),
 			mediaCard: this.options.mediaCard,
 			reelInfoSheet: this.options.reelInfoSheet,
 			state: this.state,
-			onActiveReelChange: (e) => this.setActiveReelPost(e),
+			onActiveReelChange: (e) => {
+				this.state.reelForward.status === "idle" && this.setActiveReelPost(e);
+			},
 			onCloseReel: () => this.closeMasonryReel(),
 			onLoadMore: () => {
 				this.loadNext();
@@ -3190,7 +3329,7 @@ var Bn = class {
 		}), this.surface = this.app.mount(e), this.autoScroll.mount(), this.options.initialPage ? this.options.autofill && this.state.autofill.status === "idle" && !this.fillController.isActive() && await this.startInitialAutofill() : await this.reload();
 	}
 	destroy() {
-		this.autoScroll.destroy(), this.fillController.destroy(), this.cancelRequest(), this.exactMediaRemoval.reset(), this.itemRemoval.destroy(), this.responsiveLayout.destroy(), this.stopStateWatcher?.(), this.stopStateWatcher = null, this.app?.unmount(), this.app = null, this.surface = null;
+		this.autoScroll.destroy(), this.fillController.destroy(), this.cancelRequest(), this.reelForward.reset(), this.reelRemoval.reset(), this.exactMediaRemoval.reset(), this.itemRemoval.destroy(), this.responsiveLayout.destroy(), this.stopStateWatcher?.(), this.stopStateWatcher = null, this.app?.unmount(), this.app = null, this.surface = null;
 	}
 	getState() {
 		return F(this.state);
@@ -3198,6 +3337,9 @@ var Bn = class {
 	removeMedia(e) {
 		return this.exactMediaRemoval.remove(e);
 	}
+	removeMediaAnimated(e) {
+		return this.reelRemoval.prepareMedia(e).then(() => this.exactMediaRemoval.remove(e));
+	}
 	removeItems(e) {
 		return this.itemRemoval.remove(e);
 	}
@@ -3211,7 +3353,7 @@ var Bn = class {
 		return this.itemRemoval.restoreRemoval(e);
 	}
 	retryReelForward() {
-		return this.exactMediaRemoval.retryForward();
+		return this.reelForward.retry();
 	}
 	undoLastRemoval() {
 		return this.itemRemoval.undoLast();
@@ -3241,11 +3383,11 @@ var Bn = class {
 		this.autoScroll.setSpeed(e);
 	}
 	applyAutofillUpdate(e) {
-		let t = Jt(this.options.autofill, this.state, e);
+		let t = Zt(this.options.autofill, this.state, e);
 		return t && this.syncAutofillCountdown(), t;
 	}
 	async cancelAutofill() {
-		await Lt(this.options.autofill, this.state, () => this.cancelRequest());
+		await Bt(this.options.autofill, this.state, () => this.cancelRequest());
 	}
 	applyFillUpdate(e) {
 		return this.fillController.applyUpdate(e);
@@ -3254,11 +3396,11 @@ var Bn = class {
 		return this.fillController.cancel();
 	}
 	async fill(e) {
-		if (this.pendingRequest || It(this.state.autofill)) throw Error("Vibe cannot fill while another page operation is active.");
+		if (this.pendingRequest || zt(this.state.autofill)) throw Error("Vibe cannot fill while another page operation is active.");
 		await this.fillController.start(e);
 	}
 	restoreAutofillSession(e) {
-		let t = Yt(this.options.autofill, this.state, e);
+		let t = Qt(this.options.autofill, this.state, e);
 		return t && this.syncAutofillCountdown(), t;
 	}
 	restoreFillSession(e) {
@@ -3266,7 +3408,7 @@ var Bn = class {
 	}
 	async loadNext() {
 		if (this.pendingRequest) return this.pendingRequest;
-		if (!this.state.loadMoreLocked && !(It(this.state.autofill) || this.fillController.isActive()) && !(this.state.next === null || !this.options.loadPage)) return this.state.isLoadingMore = !0, this.state.nextPageError = null, this.startRequest(this.state.next, !0);
+		if (!this.state.loadMoreLocked && !(zt(this.state.autofill) || this.fillController.isActive()) && !(this.state.next === null || !this.options.loadPage)) return this.state.isLoadingMore = !0, this.state.nextPageError = null, this.startRequest(this.state.next, !0);
 	}
 	async refresh() {
 		return this.replaceFeed(this.state.next ?? this.lastLoadedCursor, "refresh");
@@ -3276,11 +3418,11 @@ var Bn = class {
 	}
 	async replaceFeed(e, t) {
 		if (!this.options.loadPage) throw Error(`Vibe cannot ${t} without loadPage.`);
-		return It(this.state.autofill) && await this.cancelAutofill(), this.fillController.isActive() && await this.cancelFill(), this.cancelRequest(), this.state.autofill = Ft(this.options.autofill, void 0, !1), this.fillController.reset(), this.exactMediaRemoval.reset(), this.itemRemoval.reset(), this.state.error = null, this.state.isLoading = !0, this.state.items = [], this.state.next = null, this.state.nextPageError = null, this.state.total = null, this.startRequest(e, !1);
+		return zt(this.state.autofill) && await this.cancelAutofill(), this.fillController.isActive() && await this.cancelFill(), this.cancelRequest(), this.state.autofill = Rt(this.options.autofill, void 0, !1), this.fillController.reset(), this.reelForward.reset(), this.reelRemoval.reset(), this.exactMediaRemoval.reset(), this.itemRemoval.reset(), this.state.error = null, this.state.isLoading = !0, this.state.items = [], this.state.next = null, this.state.nextPageError = null, this.state.total = null, this.startRequest(e, !1);
 	}
 	async retryEnd() {
 		if (this.pendingRequest) return this.pendingRequest;
-		if (!this.state.loadMoreLocked && !(It(this.state.autofill) || this.fillController.isActive()) && !(this.state.next !== null || !this.options.loadPage)) return this.state.isLoadingMore = !0, this.state.nextPageError = null, this.startRequest(this.lastLoadedCursor, !0);
+		if (!this.state.loadMoreLocked && !(zt(this.state.autofill) || this.fillController.isActive()) && !(this.state.next !== null || !this.options.loadPage)) return this.state.isLoadingMore = !0, this.state.nextPageError = null, this.startRequest(this.lastLoadedCursor, !0);
 	}
 	setInfiniteScroll(e) {
 		this.state.infiniteScroll = e, e && p(() => this.surface?.loadIfNearBottom());
@@ -3289,10 +3431,10 @@ var Bn = class {
 		this.state.loadMoreLocked !== e && (this.state.loadMoreLocked = e, !e && this.state.infiniteScroll && p(() => this.surface?.loadIfNearBottom()));
 	}
 	setReelAutoAdvance(e) {
-		xn(this.state.reelAutoAdvance, e);
+		bn(this.state.reelAutoAdvance, e);
 	}
 	setReelInfoSheet(e) {
-		Cn(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
+		Sn(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
 	}
 	setLayout(e) {
 		this.responsiveLayout.setLayout(e);
@@ -3316,7 +3458,7 @@ var Bn = class {
 		this.abortController = i;
 		try {
 			if (a?.strategy === "frontend") {
-				let o = await zt({
+				let o = await Ht({
 					existingItems: t ? this.state.items : [],
 					initialCursor: e,
 					loadPage: n,
@@ -3338,7 +3480,7 @@ var Bn = class {
 				});
 				return;
 			}
-			let c = xt(await n({
+			let c = wt(await n({
 				cursor: e,
 				signal: i.signal
 			}));
@@ -3353,7 +3495,7 @@ var Bn = class {
 					this.state.autofill.status = "complete";
 					return;
 				}
-				await Kt(a, this.state, {
+				await Yt(a, this.state, {
 					cycleId: o,
 					feedKey: a.feedKey,
 					items: u.slice(l.length),
@@ -3378,7 +3520,7 @@ var Bn = class {
 		this.autofillDelayCountdown.clear();
 		let t = `vibe-autofill-${Date.now().toString(36)}-${++this.autofillCycle}`;
 		return this.state.autofill = {
-			...Ft(e, void 0, !1),
+			...Rt(e, void 0, !1),
 			cycleId: t,
 			status: "filling"
 		}, t;
@@ -3396,7 +3538,7 @@ var Bn = class {
 	startInitialAutofill() {
 		let e = ++this.requestVersion, t = new AbortController(), n = this.beginAutofillCycle();
 		this.abortController = t, this.state.isLoadingMore = !0;
-		let r = Xt({
+		let r = $t({
 			cycleId: n,
 			isCurrent: () => e === this.requestVersion,
 			onLastCursor: (e) => {
@@ -3420,8 +3562,8 @@ var Bn = class {
 		}));
 	}
 };
-function Un(e) {
-	return new Hn(e);
+function Yn(e) {
+	return new Jn(e);
 }
 //#endregion
-export { Un as createVibe };
+export { Yn as createVibe };