@wyxos/vibe 4.5.1 → 4.5.2

package/lib/index.js

@@ -1326,8 +1326,9 @@ var Oe = /* @__PURE__ */ u({
 		}
 		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();
+		}), 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(), G();
 		}), D(F, (e) => {
 			e !== void 0 && u("activeChange", e);
 		}, { immediate: !0 }), v(() => {
@@ -1796,7 +1797,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) {
@@ -2411,163 +2412,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 Zt(e) {
 	return "pages" in e ? { pages: e.pages } : { until: "end" };
 }
-function nn(e) {
+function Qt(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function rn(e) {
+function $t(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,7 +2428,7 @@ 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 en(e) {
 	if (!e) return;
 	if (e.strategy === "frontend") {
 		Dt(e, "frontend fill");
@@ -2586,10 +2438,10 @@ function an(e) {
 	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);
+		$t(t.target);
 	}
 }
-function on(e, t, n = !0) {
+function tn(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 +2455,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 ? Zt(i.target) : null
 	};
 }
-function sn(e) {
+function nn(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -2614,10 +2466,10 @@ 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 rn({ 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 = Qt(f);
 		if (u.has(e)) throw Error("Vibe fill received a repeated cursor.");
 		u.add(e), await kt({
 			delayMs: Ot(d, a),
@@ -2666,7 +2518,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 an(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 +2532,22 @@ async function ln(e, t, n, r) {
 		});
 	}
 }
-function un(e, t, n) {
+function on(e, t, n) {
 	return e?.strategy === "backend" && n.feedKey === e.feedKey && n.sessionId === t.fill.sessionId;
 }
-function dn(e) {
+function sn(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 cn(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 ln(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 un(e, t, n, r) {
+	return !on(e, t, n) || !sn(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !cn(t, n) ? !1 : (ln(t, n, r), Object.assign(t.fill, {
 		...$(n.status === "waiting" ? n.nextRequestAt : null),
 		completedPages: n.completedPages,
 		error: n.error ?? null,
@@ -2704,14 +2556,14 @@ function mn(e, t, n, r) {
 		status: n.status
 	}), !0);
 }
-function hn(e, t, n, r) {
+function dn(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 = tn(e, n), !sn(n) || !cn(t, n) ? (t.fill = i, !1) : (ln(t, n, r), !0);
 }
 //#endregion
 //#region src/core/fillController.ts
-var gn = class {
+var fn = class {
 	abortController = null;
 	cycle = 0;
 	delayCountdown;
@@ -2722,23 +2574,23 @@ var gn = class {
 		}), this.syncBackendCountdown();
 	}
 	isActive() {
-		return sn(this.options.state.fill);
+		return nn(this.options.state.fill);
 	}
 	applyUpdate(e) {
-		let t = mn(this.options.fill, this.options.state, e, this.options.onLastCursor);
+		let t = un(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 = dn(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 = $t(e), r = `vibe-fill-${Date.now().toString(36)}-${++this.cycle}`;
 		if (this.options.state.fill = {
-			...on(t, void 0, !1),
+			...tn(t, void 0, !1),
 			cycleId: r,
 			status: "filling",
 			target: n
@@ -2749,7 +2601,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 an(t, this.options.state, {
 				cycleId: r,
 				feedKey: t.feedKey,
 				items: [...this.options.state.items],
@@ -2767,7 +2619,7 @@ var gn = class {
 	}
 	async cancel() {
 		let { fill: e, state: t } = this.options;
-		if (!sn(t.fill) || !t.fill.cycleId) return;
+		if (!nn(t.fill) || !t.fill.cycleId) return;
 		let n = {
 			cycleId: t.fill.cycleId,
 			feedKey: t.fill.feedKey ?? "",
@@ -2781,7 +2633,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 = tn(this.options.fill, void 0, !1);
 	}
 	destroy() {
 		this.abortLocalRequest(), this.delayCountdown.clear();
@@ -2797,7 +2649,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 rn({
 			existingItems: a.items,
 			initialCursor: a.next,
 			loadPage: i,
@@ -2824,7 +2676,7 @@ var gn = class {
 };
 //#endregion
 //#region src/core/feedFooter.ts
-function _n(e) {
+function pn(e) {
 	return {
 		cancelAutofill: () => e.cancelAutofill(),
 		loadMore: () => e.loadNext(),
@@ -2832,45 +2684,45 @@ function _n(e) {
 		retryEnd: () => e.retryEnd()
 	};
 }
-function vn(e) {
+function mn(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 hn(e) {
+	e?.intervalMs !== void 0 && mn(e.intervalMs);
 }
-function bn(e) {
+function gn(e) {
 	return {
 		enabled: e?.enabled ?? !1,
 		includePostItems: e?.includePostItems ?? !1,
 		intervalMs: e?.intervalMs ?? 5e3
 	};
 }
-function xn(e, t) {
+function _n(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);
+	hn(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 vn(e) {
 	return { enabled: e?.enabled ?? !1 };
 }
-function Cn(e, t, n) {
+function yn(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 bn(e, t) {
 	let n = e.initialPage;
 	return {
 		activeReelPostId: null,
 		autoScroll: Wt(e.autoScroll),
 		autofill: Ft(e.autofill),
 		error: null,
-		fill: on(e.fill),
+		fill: tn(e.fill),
 		infiniteScroll: e.infiniteScroll ?? !0,
 		isLoading: !n,
 		isLoadingMore: !1,
@@ -2880,14 +2732,14 @@ function wn(e, t) {
 		mediaIndices: /* @__PURE__ */ new Map(),
 		next: n?.next ?? null,
 		nextPageError: null,
-		reelAutoAdvance: bn(e.reelAutoAdvance),
+		reelAutoAdvance: gn(e.reelAutoAdvance),
 		reelForward: {
 			error: null,
 			status: "idle"
 		},
 		reelForwardIndex: null,
 		reelForwardItem: null,
-		reelInfoSheet: Sn(e.reelInfoSheet),
+		reelInfoSheet: vn(e.reelInfoSheet),
 		reelInfoSheetOverlay: !1,
 		reelMediaSource: "original",
 		reelOrigin: null,
@@ -2895,19 +2747,136 @@ function wn(e, t) {
 	};
 }
 //#endregion
+//#region src/core/options.ts
+function xn(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 Sn(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 Cn(e) {
+	if (Ut(e.autoScroll), xn("cardHeader", e.cardHeader), xn("cardFooter", e.cardFooter), Sn("header", e.mediaCard?.header), Sn("footer", e.mediaCard?.footer), Pt(e.autofill), en(e.fill), hn(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 wn(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 Tn(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 En(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 Dn(e) {
+	if (!Number.isInteger(e.mediaIndex) || e.mediaIndex < 0) throw TypeError("Vibe mediaIndex must be a non-negative integer.");
+}
+var On = class {
+	generation = 0;
+	metadata = /* @__PURE__ */ new WeakMap();
+	state;
+	constructor(e) {
+		this.options = e, this.state = e.state;
+	}
+	remove(e) {
+		Dn(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] = En(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] = En(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 Tn(e, t) {
+function kn(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 An(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 jn(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 +2887,7 @@ function Dn(e, t) {
 }
 //#endregion
 //#region src/core/itemRemovalController.ts
-var On = 20, kn = class {
+var Mn = 20, Nn = class {
 	generation = 0;
 	historyLimit;
 	metadata = /* @__PURE__ */ new WeakMap();
@@ -2927,7 +2896,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 ?? Mn, 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();
@@ -2937,8 +2906,8 @@ var On = 20, kn = class {
 		if (t.length === 0) return n;
 		let r = t.map(({ item: e }) => e.postId), 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 = An(this.state.items, t), this.options.onItemsRemoved(n, t, c), this.record(n), n;
 	}
 	reset() {
 		this.generation += 1, this.history = [], this.itemOrder = [];
@@ -2949,13 +2918,16 @@ var On = 20, kn = class {
 			this.restoreRemoval(t);
 			return;
 		}
-		let n = Dn(this.state.items, e);
+		let n = jn(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 +2944,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 kn(this.state.items, e).map((e) => ({
 			index: t.get(e.item.postId) ?? e.index,
 			item: e.item
 		}));
@@ -3003,46 +2975,121 @@ 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".`);
+}, Pn = 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);
 	}
-}
-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;
+	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;
+			}
+		}
+	}
+};
+//#endregion
+//#region src/core/removalControllers.ts
 function Fn(e) {
+	let t = new Pn(e);
+	return {
+		exactMediaRemoval: new On({
+			onActivate: e.onActivate,
+			reelForward: t,
+			state: e.state
+		}),
+		itemRemoval: new Nn({
+			historyLimit: e.historyLimit,
+			onItemsRemoved: (n, r, i) => {
+				Tn(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);
+			},
+			startRemoval: e.startRemoval,
+			state: e.state
+		}),
+		reelForward: t
+	};
+}
+var In = 1.5;
+function Ln(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 * In;
 	return !e.hasHover && n > 0 && n < 600 && r;
 }
-function In(e) {
-	return Fn(e) ? "reel" : "masonry";
+function Rn(e) {
+	return Ln(e) ? "reel" : "masonry";
 }
-function Ln(e) {
+function zn(e) {
 	let t = e.ownerDocument.defaultView, n = e.ownerDocument.documentElement;
 	return {
 		hasHover: typeof t?.matchMedia == "function" && t.matchMedia("(hover: hover)").matches,
@@ -3052,15 +3099,15 @@ function Ln(e) {
 		viewportWidth: n.clientWidth
 	};
 }
-function Rn(e) {
-	return Fn(Ln(e));
+function Bn(e) {
+	return Ln(zn(e));
 }
-function zn(e) {
-	return In(Ln(e));
+function Vn(e) {
+	return Rn(zn(e));
 }
 //#endregion
 //#region src/core/responsiveLayoutController.ts
-var Bn = class {
+var Hn = class {
 	layoutMode;
 	resizeObserver = null;
 	target = null;
@@ -3085,10 +3132,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 = Vn(this.target);
+		this.state.reelInfoSheetOverlay = Bn(this.target), this.state.reelMediaSource = e === "reel" ? "preview" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
 	};
-}, Vn = class {
+}, Un = class {
 	routedReelPostId = null;
 	reelRouteIsActive = !1;
 	constructor(e, t) {
@@ -3115,7 +3162,7 @@ var Bn = class {
 		let i = this.reelRouteIsActive ? "replace" : "push";
 		this.reelRouteIsActive = !0, this.routedReelPostId = e, this.options.router[i](r);
 	}
-}, Hn = class {
+}, Wn = class {
 	app = null;
 	autoScroll;
 	autofillDelayCountdown;
@@ -3128,53 +3175,53 @@ var Bn = class {
 	fillController;
 	exactMediaRemoval;
 	itemRemoval;
+	reelForward;
 	surface = null;
 	stopStateWatcher = null;
 	lastLoadedCursor = null;
 	state;
 	constructor(e) {
-		this.options = e, Mn(e);
+		this.options = e, Cn(e);
 		let t = e.layout ?? "masonry";
-		this.state = b(wn(e, t)), this.autoScroll = new Gt({
+		this.state = b(bn(e, t)), this.autoScroll = new Gt({
 			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 At((e) => Object.assign(this.state.autofill, e)), this.syncAutofillCountdown(), this.fillController = new fn({
 			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 Un(e.routing, this.state);
+		let n = Fn({
+			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, () => {
+		});
+		this.exactMediaRemoval = n.exactMediaRemoval, this.itemRemoval = n.itemRemoval, this.reelForward = n.reelForward, this.responsiveLayout = new Hn(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);
+		let e = wn(this.options.target);
 		this.responsiveLayout.mount(e), this.app = r(bt, {
 			canRetryEnd: !!this.options.loadPage,
 			cardFooter: this.options.cardFooter,
 			cardHeader: this.options.cardHeader,
 			feedFooter: this.options.feedFooter,
-			feedFooterActions: _n(this),
+			feedFooterActions: pn(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 +3237,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.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);
@@ -3211,7 +3258,7 @@ var Bn = class {
 		return this.itemRemoval.restoreRemoval(e);
 	}
 	retryReelForward() {
-		return this.exactMediaRemoval.retryForward();
+		return this.reelForward.retry();
 	}
 	undoLastRemoval() {
 		return this.itemRemoval.undoLast();
@@ -3276,7 +3323,7 @@ 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 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.reelForward.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;
@@ -3289,10 +3336,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);
+		_n(this.state.reelAutoAdvance, e);
 	}
 	setReelInfoSheet(e) {
-		Cn(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
+		yn(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
 	}
 	setLayout(e) {
 		this.responsiveLayout.setLayout(e);
@@ -3420,8 +3467,8 @@ var Bn = class {
 		}));
 	}
 };
-function Un(e) {
-	return new Hn(e);
+function Gn(e) {
+	return new Wn(e);
 }
 //#endregion
-export { Un as createVibe };
+export { Gn as createVibe };