@wyxos/vibe 5.17.2 → 5.18.0

package/lib/index.js

@@ -28,7 +28,7 @@ function R(e) {
 		width: e.width
 	};
 }
-function ee(e, t) {
+function z(e, t) {
 	if (t === "preview" && e.preview) {
 		let t = I(e.type, e.src) === "audio" ? I(e.preview.type, e.preview.src) : e.preview.type ?? e.type;
 		return {
@@ -41,30 +41,30 @@ function ee(e, t) {
 		type: e.mobile.type ?? e.type
 	} : R(e);
 }
-function z(e) {
+function B(e) {
 	let t = e.preview;
 	return !t?.src || t.src === e.src || I(t.type, t.src) !== "image" ? null : {
 		...t,
 		type: "image"
 	};
 }
-function te(e, t) {
+function ee(e, t) {
 	return I(e.type, e.src) === "audio" ? t === "mobile" && e.mobile && I(e.mobile.type, e.mobile.src) === "audio" ? {
 		...e.mobile,
 		type: "audio"
 	} : {
 		...R(e),
 		type: "audio"
-	} : ee(e, t);
+	} : z(e, t);
 }
-function B(e) {
+function V(e) {
 	return [e, ...e.items];
 }
-function V(e, t) {
+function H(e, t) {
 	return Math.min(e.items.length, Math.max(0, t));
 }
-function H(e, t) {
-	return B(e)[V(e, t)] ?? e;
+function te(e, t) {
+	return V(e)[H(e, t)] ?? e;
 }
 function U(e, t) {
 	return `${String(e)}:${t}`;
@@ -597,12 +597,12 @@ var Me = ["aria-hidden"], Ne = [
 		function R(e) {
 			!o.value || e.pointerId !== d || (e.currentTarget.releasePointerCapture?.(e.pointerId), d = null, o.value = !1, C && (C = !1, M("content")), k());
 		}
-		function ee(e) {
+		function z(e) {
 			if (!E.value) return;
 			let n = t.scrollElement?.clientHeight ?? 0, r = t.scrollElement?.scrollTop ?? 0, i = e.key === "ArrowUp" ? r - Fe : e.key === "ArrowDown" ? r + Fe : e.key === "PageUp" ? r - n : e.key === "PageDown" ? r + n : e.key === "Home" ? 0 : e.key === "End" ? a.value.maximumScrollPosition : null;
 			i !== null && (e.preventDefault(), A(), P(i));
 		}
-		function z(e) {
+		function B(e) {
 			if (S?.disconnect(), !(typeof ResizeObserver > "u")) {
 				S = new ResizeObserver(() => M("content"));
 				for (let t of e.children) S.observe(t);
@@ -611,8 +611,8 @@ var Me = ["aria-hidden"], Ne = [
 		return O(() => t.scrollElement, (e, t) => {
 			t?.removeEventListener("scroll", N), x?.disconnect(), x = null, S?.disconnect(), S = null, T?.disconnect(), T = null, e?.addEventListener("scroll", N, { passive: !0 }), e && typeof ResizeObserver < "u" && (T = new ResizeObserver(() => {
 				A(), M("resize");
-			}), T.observe(e), z(e)), e && typeof MutationObserver < "u" && (x = new MutationObserver(() => {
-				z(e), M("content");
+			}), T.observe(e), B(e)), e && typeof MutationObserver < "u" && (x = new MutationObserver(() => {
+				B(e), M("content");
 			}), x.observe(e, { childList: !0 })), m(() => M("resize"));
 		}, { immediate: !0 }), O(() => t.contentSize, () => {
 			m(() => M("content"));
@@ -640,7 +640,7 @@ var Me = ["aria-hidden"], Ne = [
 			role: "scrollbar",
 			style: _(D.value),
 			tabindex: E.value ? 0 : -1,
-			onKeydown: ee,
+			onKeydown: z,
 			onPointercancel: R,
 			onPointerdown: I,
 			onPointermove: L,
@@ -779,7 +779,7 @@ var nt = /* @__PURE__ */ d({
 		total: {}
 	},
 	setup(e) {
-		let t = e, n = r(() => V(t.item, t.mediaIndex)), i = r(() => B(t.item)), o = r(() => H(t.item, n.value)), c = r(() => ({
+		let t = e, n = r(() => H(t.item, t.mediaIndex)), i = r(() => V(t.item)), o = r(() => te(t.item, n.value)), c = r(() => ({
 			height: `${t.region.height}px`,
 			paddingBlock: t.style?.paddingY === void 0 ? void 0 : `${t.style.paddingY}px`,
 			paddingInline: t.style?.paddingX === void 0 ? void 0 : `${t.style.paddingX}px`
@@ -1000,7 +1000,7 @@ var nt = /* @__PURE__ */ d({
 function xt(e) {
 	let t = w("next"), n = null, r = 0, i = !1, a = null, o = null;
 	function s(n, r) {
-		let i = B(e.item()).length, a = (n + i) % i;
+		let i = V(e.item()).length, a = (n + i) % i;
 		a !== e.mediaIndex() && (t.value = n < e.mediaIndex() ? "previous" : "next", e.onChange(a), r?.detail && r.detail > 0 && r.currentTarget?.blur());
 	}
 	function c() {
@@ -1013,7 +1013,7 @@ function xt(e) {
 		return t === 1 ? e * 16 : t === 2 ? e * n : e;
 	}
 	function d(t) {
-		if (B(e.item()).length <= 1) return;
+		if (V(e.item()).length <= 1) return;
 		let n = t.currentTarget, a = u(t.deltaX, t.deltaMode, n?.clientWidth || 1);
 		if (a === 0 || (t.preventDefault(), l(), i) || (r += a, Math.abs(r) < bt)) return;
 		let o = Math.sign(r);
@@ -1042,9 +1042,9 @@ function Et(e, t) {
 	return `${t ? "timed" : "image"}:${e}`;
 }
 function Dt(e, t, n) {
-	let r = B(e);
+	let r = V(e);
 	if (r.length < 2) return [];
-	let i = V(e, t), a = [];
+	let i = H(e, t), a = [];
 	for (let e = 1; e < r.length; e += 1) {
 		let t = i + e, n = i - e;
 		t < r.length && a.push(t), n >= 0 && a.push(n);
@@ -1053,7 +1053,7 @@ function Dt(e, t, n) {
 	return a.flatMap((e) => {
 		let t = r[e];
 		if (!t) return [];
-		let i = I(t.type, t.src) === "audio" ? z(t) : ee(t, n);
+		let i = I(t.type, t.src) === "audio" ? B(t) : z(t, n);
 		if (!i) return [];
 		let a = L(i.type, i.src), s = Et(i.src, a);
 		return o.has(s) ? [] : (o.add(s), [{
@@ -1470,7 +1470,7 @@ var Ut = [
 		function f(e = !1, t = "pointer") {
 			e && d("activate", t);
 		}
-		let p = r(() => B(l.item)), g = r(() => V(l.item, l.mediaIndex)), v = r(() => H(l.item, g.value)), y = r(() => ee(v.value, l.mediaSource ?? "preview")), x = r(() => I(v.value.type, v.value.src)), S = r(() => x.value === "audio"), C = r(() => te(v.value, l.mediaSource ?? "preview")), T = r(() => S.value ? C.value : y.value), D = r(() => T.value.src), M = r(() => I(T.value.type, T.value.src)), N = r(() => y.value.width), P = r(() => y.value.height), F = r(() => z(v.value)), L = r(() => `${l.item.postId}:${g.value}:${F.value?.src ?? ""}`), R = w(!1), U = r(() => R.value ? null : F.value), { effectivePreviewState: W, failSourceAttempt: G, imageElement: ne, markSourceReady: K, noteSourceActivity: q, retrySource: re, retrying: ie, sourceGeneration: ae, mediaElement: J } = Ft({
+		let p = r(() => V(l.item)), g = r(() => H(l.item, l.mediaIndex)), v = r(() => te(l.item, g.value)), y = r(() => z(v.value, l.mediaSource ?? "preview")), x = r(() => I(v.value.type, v.value.src)), S = r(() => x.value === "audio"), C = r(() => ee(v.value, l.mediaSource ?? "preview")), T = r(() => S.value ? C.value : y.value), D = r(() => T.value.src), M = r(() => I(T.value.type, T.value.src)), N = r(() => y.value.width), P = r(() => y.value.height), F = r(() => B(v.value)), L = r(() => `${l.item.postId}:${g.value}:${F.value?.src ?? ""}`), R = w(!1), U = r(() => R.value ? null : F.value), { effectivePreviewState: W, failSourceAttempt: G, imageElement: ne, markSourceReady: K, noteSourceActivity: q, retrySource: re, retrying: ie, sourceGeneration: ae, mediaElement: J } = Ft({
 			identity: () => `${l.item.postId}:${g.value}:${l.mediaSource ?? "preview"}:${D.value}:${M.value ?? ""}`,
 			mediaIndex: () => g.value,
 			onError: (e, t) => {
@@ -1951,39 +1951,39 @@ var cn = { class: "masonry-feed-shell" }, ln = ["aria-hidden", "inert"], un = {
 			additionalHeight: (d.cardHeader?.height ?? 0) + (d.cardFooter?.height ?? 0),
 			gap: x.value,
 			minColumnWidth: De(d.masonry)
-		})), ee = [];
-		function z() {
+		})), z = [];
+		function B() {
 			let e = N - k.value + C.value + Oe(d.masonry, C.value), t = M.value.reduce((e, t) => {
-				let n = ee[t];
+				let n = z[t];
 				return n ? Math.max(e, n.y + n.height) : e;
 			}, 0);
 			return Math.max(e, t);
 		}
-		function te() {
+		function ee() {
 			return M.value.reduce((e, t) => Math.max(e, t), -1);
 		}
-		let B = sn({
+		let V = sn({
 			additionalHeight: r(() => R.value.additionalHeight),
 			gap: x,
 			items: () => d.items,
 			minColumnWidth: r(() => R.value.minColumnWidth),
-			packThroughIndex: te,
-			packUntilBottom: z,
+			packThroughIndex: ee,
+			packUntilBottom: B,
 			width: y
-		}), V = B.layout, H = B.viewportIndex, W = r(() => d.leavingPostIds.size === 0 ? null : ye(d.items, y.value, R.value, V.value, (e) => d.leavingPostIds.has(d.items[e].postId), {
-			throughIndex: te(),
-			untilBottom: z()
+		}), H = V.layout, te = V.viewportIndex, W = r(() => d.leavingPostIds.size === 0 ? null : ye(d.items, y.value, R.value, H.value, (e) => d.leavingPostIds.has(d.items[e].postId), {
+			throughIndex: ee(),
+			untilBottom: B()
 		})), G = r(() => {
 			let e = W.value;
 			return e ? {
 				columns: e.columns,
 				height: e.height,
 				items: e.items
-			} : V.value;
+			} : H.value;
 		}), ne = r(() => {
 			let e = W.value;
-			return e ? we(e.items, e.retainedIndices, H.value, e.fromIndex) : null;
-		}), K = r(() => (V.value, Math.max(T.value, B.reservedHeight(), d.leavingPostIds.size === 0 ? G.value.height : V.value.height))), q = r(() => ({ height: `${K.value}px` })), re = r(() => !d.infiniteScroll || C.value > 0 && k.value + G.value.height <= C.value + 1), ie = r(() => new Set(j.value)), ae = r(() => M.value.flatMap((e) => {
+			return e ? we(e.items, e.retainedIndices, te.value, e.fromIndex) : null;
+		}), K = r(() => (H.value, Math.max(T.value, V.reservedHeight(), d.leavingPostIds.size === 0 ? G.value.height : H.value.height))), q = r(() => ({ height: `${K.value}px` })), re = r(() => !d.infiniteScroll || C.value > 0 && k.value + G.value.height <= C.value + 1), ie = r(() => new Set(j.value)), ae = r(() => M.value.flatMap((e) => {
 			let t = d.items[e], n = G.value.items[e];
 			return !t || !n || n.width <= 0 || n.height <= 0 ? [] : [{
 				fetchPriority: ie.value.has(e) ? "high" : "low",
@@ -2001,11 +2001,11 @@ var cn = { class: "masonry-feed-shell" }, ln = ["aria-hidden", "inert"], un = {
 			let t = {
 				scrollTop: N - k.value,
 				viewportHeight: C.value
-			}, n = ne.value, r = Ee(n ?? H.value, {
+			}, n = ne.value, r = Ee(n ?? te.value, {
 				...t,
 				overscan: e
 			}).indices;
-			return J(r, d.leavingPostIds.size === 0 ? [] : Ee(H.value, {
+			return J(r, d.leavingPostIds.size === 0 ? [] : Ee(te.value, {
 				...t,
 				overscan: e
 			}).indices.filter((e) => {
@@ -2046,7 +2046,7 @@ var cn = { class: "masonry-feed-shell" }, ln = ["aria-hidden", "inert"], un = {
 			let t = G.value.items[e], n = d.items[e]?.postId;
 			if (!t || t.width <= 0 || t.height <= 0) return {};
 			let r = n !== void 0 && d.enteringPostIds.has(n), i = n !== void 0 && d.leavingPostIds.has(n), a = r || i ? de({
-				containerHeight: Math.max(T.value, V.value.height),
+				containerHeight: Math.max(T.value, H.value.height),
 				gap: x.value
 			}) : 0, o = n === void 0 ? 0 : i ? d.removalDelays.get(n) ?? 0 : r ? d.entryDelays.get(n) ?? 0 : 0;
 			return {
@@ -2071,7 +2071,7 @@ var cn = { class: "masonry-feed-shell" }, ln = ["aria-hidden", "inert"], un = {
 		}
 		function Q(e) {
 			let t = e.currentTarget;
-			t && (N = t.scrollTop, B.ensurePackedThrough(z()), Y(), Date.now() >= l && !d.loadMoreLocked && d.infiniteScroll && ue(t, d.masonry?.loadMoreThresholdPx) && f("loadMore"));
+			t && (N = t.scrollTop, V.ensurePackedThrough(B()), Y(), Date.now() >= l && !d.loadMoreLocked && d.infiniteScroll && ue(t, d.masonry?.loadMoreThresholdPx) && f("loadMore"));
 		}
 		function me() {
 			let e = p.value;
@@ -2093,9 +2093,9 @@ var cn = { class: "masonry-feed-shell" }, ln = ["aria-hidden", "inert"], un = {
 		}), O(p, (e) => {
 			F?.disconnect(), F = null, e && (Z(), !(typeof ResizeObserver > "u") && (F = new ResizeObserver(Z), F.observe(e)));
 		}), O(G, (e) => {
-			ee = e.items;
+			z = e.items;
 		}, { flush: "sync" }), O([
-			V,
+			H,
 			G,
 			() => d.masonry
 		], le, { flush: "post" }), v(() => {
@@ -2294,10 +2294,10 @@ var _n = ["aria-label"], vn = /* @__PURE__ */ d({
 		}), F = r(() => u.items[x.value]?.postId), I = r(() => u.items[x.value]), R = r(() => {
 			let e = F.value;
 			return e === void 0 ? 0 : u.mediaIndices.get(e) ?? 0;
-		}), ee = r(() => {
+		}), z = r(() => {
 			let e = F.value;
 			return e === void 0 ? "loading" : u.previewStates.get(U(e, R.value)) ?? "loading";
-		}), z = r(() => I.value ? H(I.value, R.value) : null), V = r(() => z.value ? te(z.value, u.mediaSource ?? "preview") : null), W = r(() => ee.value === "ready" && !!(V.value && L(V.value.type, V.value.src))), G = r(() => [
+		}), B = r(() => I.value ? te(I.value, R.value) : null), H = r(() => B.value ? ee(B.value, u.mediaSource ?? "preview") : null), W = r(() => z.value === "ready" && !!(H.value && L(H.value.type, H.value.src))), G = r(() => [
 			F.value,
 			R.value,
 			u.items.length,
@@ -2306,9 +2306,9 @@ var _n = ["aria-label"], vn = /* @__PURE__ */ d({
 			u.reelAutoAdvance.includePostItems,
 			u.reelAutoAdvance.intervalMs
 		].join(":")), ne = r(() => {
-			let e = I.value, t = !!(e && u.reelAutoAdvance.includePostItems && R.value < B(e).length - 1), n = u.reelAutoAdvance.intervalMs / 1e3;
+			let e = I.value, t = !!(e && u.reelAutoAdvance.includePostItems && R.value < V(e).length - 1), n = u.reelAutoAdvance.intervalMs / 1e3;
 			return `Auto advance to the next ${t ? "post item" : "post"} in ${n}s`;
-		}), K = r(() => u.reelAutoAdvance.enabled && u.reelForward.status === "idle" && I.value !== void 0 && ee.value !== "loading" && !W.value), q = r(() => !u.infiniteScroll || u.items.length <= 1), re = r(() => u.reelForward.status === "end" && u.hasNext && !u.infiniteScroll && !u.loadMoreLocked), ie = r(() => u.reelForward.status === "loading" ? "Loading the next media…" : u.reelForward.status === "error" ? "Unable to load the next media." : re.value ? "Load the next page to continue." : "You reached the end of this feed.");
+		}), K = r(() => u.reelAutoAdvance.enabled && u.reelForward.status === "idle" && I.value !== void 0 && z.value !== "loading" && !W.value), q = r(() => !u.infiniteScroll || u.items.length <= 1), re = r(() => u.reelForward.status === "end" && u.hasNext && !u.infiniteScroll && !u.loadMoreLocked), ie = r(() => u.reelForward.status === "loading" ? "Loading the next media…" : u.reelForward.status === "error" ? "Unable to load the next media." : re.value ? "Load the next page to continue." : "You reached the end of this feed.");
 		function ae(e) {
 			return { gridRow: `${e + 1}` };
 		}
@@ -2353,7 +2353,7 @@ var _n = ["aria-label"], vn = /* @__PURE__ */ d({
 		function Z(e) {
 			let t = I.value;
 			if (!t) return !1;
-			let n = B(t).length;
+			let n = V(t).length;
 			if (n <= 1) return !1;
 			let r = (R.value + e + n) % n;
 			return d("mediaChange", t.postId, r), !0;
@@ -2389,7 +2389,7 @@ var _n = ["aria-label"], vn = /* @__PURE__ */ d({
 			if (!u.reelAutoAdvance.enabled) return;
 			let e = I.value;
 			if (!e) return;
-			if (u.reelAutoAdvance.includePostItems && R.value < B(e).length - 1) {
+			if (u.reelAutoAdvance.includePostItems && R.value < V(e).length - 1) {
 				d("mediaChange", e.postId, R.value + 1);
 				return;
 			}
@@ -2651,9 +2651,9 @@ var _n = ["aria-label"], vn = /* @__PURE__ */ d({
 				item: e,
 				layout: "reel",
 				loadedCount: l.items.length,
-				mediaCount: B(e).length,
+				mediaCount: V(e).length,
 				mediaIndex: D.value,
-				mediaItem: H(e, D.value),
+				mediaItem: te(e, D.value),
 				mediaSource: l.mediaSource ?? "preview",
 				origin: l.origin,
 				total: l.total
@@ -2680,13 +2680,13 @@ var _n = ["aria-label"], vn = /* @__PURE__ */ d({
 		function R(e) {
 			return p.value?.transitionActivePost(e) ?? Promise.resolve(!1);
 		}
-		function ee(e, t) {
+		function z(e, t) {
 			d("error", e, t);
 		}
-		function z(e, t) {
+		function B(e, t) {
 			d("mediaChange", e, t);
 		}
-		function te(e, t) {
+		function ee(e, t) {
 			d("ready", e, t);
 		}
 		return O(() => ({
@@ -2743,11 +2743,11 @@ var _n = ["aria-label"], vn = /* @__PURE__ */ d({
 			state: e.state,
 			total: e.total,
 			onActiveChange: r[0] ||= (e) => d("activeChange", e),
-			onError: ee,
+			onError: z,
 			onMediaError: r[1] ||= (e, t) => d("mediaError", e, t),
 			onLoadMore: r[2] ||= (e) => d("loadMore"),
-			onMediaChange: z,
-			onReady: te,
+			onMediaChange: B,
+			onReady: ee,
 			onRetryEnd: r[3] ||= (e) => d("retryEnd"),
 			onRetryForward: r[4] ||= (e) => d("retryForward"),
 			onReelAudioChange: r[5] ||= (e) => d("reelAudioChange", e)
@@ -2808,7 +2808,7 @@ var Fn = /* @__PURE__ */ jn(Mn, [["render", Pn]]);
 function In(e, t, n, r, i) {
 	let a = e.items.findIndex((e) => e.postId === t), o = e.items[a];
 	if (!o) return null;
-	let s = V(o, n), c = H(o, s);
+	let s = H(o, n), c = te(o, s);
 	return {
 		item: o,
 		layout: r,
@@ -2979,7 +2979,7 @@ function Un(e, t) {
 	let n = w("waiting"), i = typeof matchMedia == "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null, a = !1, o = null, s = r(() => {
 		let t = e.items.find((t) => t.postId === e.activeReelPostId);
 		if (!t) return null;
-		let n = e.mediaIndices.get(t.postId) ?? 0, r = H(t, n);
+		let n = e.mediaIndices.get(t.postId) ?? 0, r = te(t, n);
 		return JSON.stringify([
 			t.postId,
 			n,
@@ -3047,13 +3047,13 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 		"retryForward"
 	],
 	setup(t, { expose: i, emit: c }) {
-		let l = t, d = c, f = w(null), p = w(null), h = w(null), g = w(null), _ = w(!1), y = w(/* @__PURE__ */ new Set()), x = w(/* @__PURE__ */ new Map()), S = w(/* @__PURE__ */ new Set()), C = w(/* @__PURE__ */ new Map()), T = r(() => Object.freeze([...l.state.items])), D = r(() => ne(l.state, T.value)), { markMediaError: A, markMasonryFullyVisible: j, markMasonryVisible: M, markPreviewError: N, markPreviewReady: P, markReelError: F, markReelReady: I, originalStates: L, previewStates: R, reelStates: ee, resetMediaLifecycle: z } = Rn(l.state, {
+		let l = t, d = c, f = w(null), p = w(null), h = w(null), g = w(null), _ = w(!1), y = w(/* @__PURE__ */ new Set()), x = w(/* @__PURE__ */ new Map()), S = w(/* @__PURE__ */ new Set()), C = w(/* @__PURE__ */ new Map()), T = r(() => Object.freeze([...l.state.items])), D = r(() => ne(l.state, T.value)), { markMediaError: A, markMasonryFullyVisible: j, markMasonryVisible: M, markPreviewError: N, markPreviewReady: P, markReelError: F, markReelReady: I, originalStates: L, previewStates: R, reelStates: z, resetMediaLifecycle: B } = Rn(l.state, {
 			error: (e) => d("mediaError", e),
 			fullyVisible: (e) => d("mediaFullyVisible", e),
 			ready: (e) => d("mediaReady", e),
 			reelChange: (e) => d("reelMediaChange", e),
 			visible: (e) => d("mediaVisible", e)
-		}), { phase: te, finishSlide: H, finishFade: U, markSettled: W } = Un(l.state, h), G = new Set(l.state.items.map((e) => e.postId)), K = null, q = null, re = !1;
+		}), { phase: ee, finishSlide: te, finishFade: U, markSettled: W } = Un(l.state, h), G = new Set(l.state.items.map((e) => e.postId)), K = null, q = null, re = !1;
 		function ie() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
@@ -3067,7 +3067,7 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 		function J(e, t) {
 			let n = l.state.items.find((t) => t.postId === e);
 			if (!n) return;
-			let r = V(n, t);
+			let r = H(n, t);
 			(l.state.mediaIndices.get(e) ?? 0) !== r && (l.state.mediaIndices = new Map(l.state.mediaIndices).set(e, r));
 		}
 		async function oe() {
@@ -3083,7 +3083,7 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 			if (!(l.state.layout === "reel" || l.state.reelOrigin === "masonry") || l.state.isLoading) return "reel-inactive";
 			let t = l.state.items.find((t) => t.postId === e.postId);
 			if (!t) return "not-found";
-			let n = B(t).findIndex((t) => t.mediaId === e.mediaId);
+			let n = V(t).findIndex((t) => t.mediaId === e.mediaId);
 			return n < 0 ? "not-found" : p.value?.navigateToItem?.(e.postId, n) ? "navigated" : "reel-inactive";
 		}
 		function Y() {
@@ -3163,7 +3163,8 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 			loadIfNearBottom: oe,
 			moveActiveReelPost: ce,
 			navigateToReelItem: ue,
-			resetMediaLifecycle: z,
+			openReel: (e) => X(e, "keyboard"),
+			resetMediaLifecycle: B,
 			startItemRemoval: Z,
 			transitionActiveReelMedia: (e) => p.value?.transitionActiveMedia?.(e) ?? Promise.resolve(!1),
 			transitionActiveReelPost: (e) => p.value?.transitionActivePost?.(e) ?? Promise.resolve(!1)
@@ -3196,7 +3197,7 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 			"info-sheet-overlay": t.state.reelInfoSheetOverlay,
 			"next-page-error": !!t.state.nextPageError,
 			origin: "reel",
-			"preview-states": E(ee),
+			"preview-states": E(z),
 			"reel-auto-advance": t.state.reelAutoAdvance,
 			"reel-audio-state": t.reelAudioState,
 			"reel-forward": t.state.reelForward,
@@ -3261,7 +3262,7 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 			onVisible: E(M)
 		}, null, 8, /* @__PURE__ */ "can-retry-end.entering-post-ids.entry-delays.leaving-post-ids.removal-delays.card-footer.card-header.feed-footer.feed-footer-actions.media-card.masonry.has-next.infinite-scroll.is-loading-more.items.load-more-locked.media-indices.next-page-error.preview-states.suspended.state.total.onError.onFullyVisible.onReady.onVisible".split(".")), u(n, {
 			name: "vibe-reel-viewer",
-			onAfterEnter: E(H),
+			onAfterEnter: E(te),
 			onAfterLeave: he
 		}, {
 			default: k(() => [t.state.reelOrigin === "masonry" ? (b(), s("section", {
@@ -3269,7 +3270,7 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 				ref_key: "reelOverlay",
 				ref: h,
 				class: "vibe-reel-overlay",
-				"data-reel-entry": E(te),
+				"data-reel-entry": E(ee),
 				role: "dialog",
 				"aria-label": "Media viewer",
 				"aria-modal": "true",
@@ -3279,7 +3280,7 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 			}, [u(An, {
 				ref_key: "reelRenderer",
 				ref: p,
-				"entry-pending": E(te) !== "ready",
+				"entry-pending": E(ee) !== "ready",
 				"can-retry-end": t.canRetryEnd,
 				"card-footer": t.cardFooter,
 				"card-header": t.cardHeader,
@@ -3321,7 +3322,7 @@ var Wn = ["data-reel-entry"], Gn = 35, Kn = 420, qn = /* @__PURE__ */ d({
 				onRetryEnd: i[18] ||= (e) => d("retryEnd"),
 				onRetryForward: i[19] ||= (e) => d("retryForward"),
 				onReelAudioChange: i[20] ||= (e) => d("reelAudioChange", e)
-			}, null, 8, /* @__PURE__ */ "entry-pending.can-retry-end.card-footer.card-header.feed-footer.feed-footer-actions.forward-index.forward-item.media-card.has-next.infinite-scroll.initial-post-id.info-sheet.info-sheet-enabled.info-sheet-overlay.is-loading-more.items.load-more-locked.media-indices.next-page-error.preview-states.reel-auto-advance.reel-audio-state.reel-forward.state.total".split(".")), E(te) === "waiting" ? (b(), a(Fn, { key: 0 })) : o("", !0)], 40, Wn)) : o("", !0)]),
+			}, null, 8, /* @__PURE__ */ "entry-pending.can-retry-end.card-footer.card-header.feed-footer.feed-footer-actions.forward-index.forward-item.media-card.has-next.infinite-scroll.initial-post-id.info-sheet.info-sheet-enabled.info-sheet-overlay.is-loading-more.items.load-more-locked.media-indices.next-page-error.preview-states.reel-auto-advance.reel-audio-state.reel-forward.state.total".split(".")), E(ee) === "waiting" ? (b(), a(Fn, { key: 0 })) : o("", !0)], 40, Wn)) : o("", !0)]),
 			_: 1
 		}, 8, ["onAfterEnter"])], 64))], 512));
 	}
@@ -4457,7 +4458,7 @@ var si = class {
 				let e = this.options.surface()?.getAutoScrollElement();
 				e && (e.scrollTop = 0);
 			}
-			e.mediaIndices = new Map(a.map((t) => [t.postId, V(t, e.mediaIndices.get(t.postId) ?? 0)])), e.activeReelPostId !== null && !o.has(String(e.activeReelPostId)) && (e.activeReelPostId = null, e.reelOrigin = null), e.items = a, e.next = n.next, e.total = n.total ?? null, e.error = null, e.nextPageError = null, this.options.commit({
+			e.mediaIndices = new Map(a.map((t) => [t.postId, H(t, e.mediaIndices.get(t.postId) ?? 0)])), e.activeReelPostId !== null && !o.has(String(e.activeReelPostId)) && (e.activeReelPostId = null, e.reelOrigin = null), e.items = a, e.next = n.next, e.total = n.total ?? null, e.error = null, e.nextPageError = null, this.options.commit({
 				...n,
 				items: a
 			});
@@ -4648,7 +4649,7 @@ var gi = class {
 		hi(e);
 		let t = this.state.items.findIndex(({ postId: t }) => t === e.postId), n = this.state.items[t];
 		if (!n) return null;
-		let r = [...B(n)], i = r[e.mediaIndex];
+		let r = [...V(n)], i = r[e.mediaIndex];
 		if (!i) return null;
 		let a = Object.freeze({
 			media: i,
@@ -4687,7 +4688,7 @@ var gi = class {
 		return this.state.layout === "reel" || this.state.reelOrigin === "masonry";
 	}
 	restoreIntoPost(e, t) {
-		let n = this.state.items[e], r = [...B(n)], i = Math.min(t.mediaIndex, r.length);
+		let n = this.state.items[e], r = [...V(n)], i = Math.min(t.mediaIndex, r.length);
 		if (r.splice(i, 0, t.media), this.state.items[e] = mi(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);
@@ -4695,7 +4696,7 @@ var gi = class {
 	updateMediaIndexAfterRemoval(e, t, n) {
 		let r = this.state.items.find((t) => t.postId === e);
 		if (!r) return;
-		let i = B(r).length, a = this.state.mediaIndices.get(e) ?? 0, o = a;
+		let i = V(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));
 	}
 };
@@ -4927,7 +4928,7 @@ var bi = 20, xi = class {
 			if (!n) return;
 			let r = t.mediaIndices.get(e.postId) ?? 0;
 			if (e.mediaIndex === r) {
-				if (B(n).length > 1) {
+				if (V(n).length > 1) {
 					await this.options.transitionMedia(1);
 					return;
 				}
@@ -5091,31 +5092,36 @@ var ji = class {
 	}
 };
 //#endregion
+//#region src/core/reelViewer.ts
+function Pi(e, t, n) {
+	e.layout !== "masonry" || !e.items.some((e) => e.postId === n) || (e.activeReelPostId = n, e.reelOrigin = "masonry", t.syncReel(n));
+}
+//#endregion
 //#region src/core/updateItems.ts
-function Pi(e) {
+function Fi(e) {
 	return String(e);
 }
-function Fi(e, t) {
-	let n = B(t).length;
+function Ii(e, t) {
+	let n = V(t).length;
 	(e.mediaIndices.get(t.postId) ?? 0) >= n && e.mediaIndices.set(t.postId, Math.max(0, n - 1));
 }
-function Ii(e, t) {
+function Li(e, t) {
 	let n = /* @__PURE__ */ new Map();
-	if (t.forEach((e) => n.set(Pi(e.postId), e)), n.size === 0) return [];
+	if (t.forEach((e) => n.set(Fi(e.postId), e)), n.size === 0) return [];
 	let r = [], i = e.items.map((t) => {
-		let i = n.get(Pi(t.postId));
+		let i = n.get(Fi(t.postId));
 		if (!i) return t;
 		let a = {
 			...i,
 			postId: t.postId
 		};
-		return Fi(e, a), e.reelForwardItem && Pi(e.reelForwardItem.postId) === Pi(t.postId) && (e.reelForwardItem = a), r.push(t.postId), a;
+		return Ii(e, a), e.reelForwardItem && Fi(e.reelForwardItem.postId) === Fi(t.postId) && (e.reelForwardItem = a), r.push(t.postId), a;
 	});
 	return r.length > 0 && (e.items = i), r;
 }
 //#endregion
 //#region src/core/createVibe.ts
-var Li = class {
+var Ri = class {
 	app = null;
 	autoScroll;
 	autofillController;
@@ -5218,7 +5224,7 @@ var Li = class {
 			onLoadMore: () => {
 				this.loadNext();
 			},
-			onOpenReel: (e) => this.openMasonryReel(e),
+			onOpenReel: (e) => Pi(this.state, this.routing, e),
 			onReelInfoSheetChange: (e) => this.setReelInfoSheet(e),
 			onReelAudioChange: (e) => this.reelAudio.set(e, !0),
 			onRetryEnd: () => {
@@ -5262,7 +5268,7 @@ var Li = class {
 		return this.itemRemoval.restoreRemoval(e);
 	}
 	updateItems(e) {
-		return Ii(this.state, e);
+		return Li(this.state, e);
 	}
 	retryReelForward() {
 		return this.reelForward.retry();
@@ -5442,12 +5448,12 @@ var Li = class {
 	setLayout(e) {
 		this.responsiveLayout.setLayout(e);
 	}
+	openReel(e) {
+		this.state.layout !== "masonry" || !this.state.items.some((t) => t.postId === e) || this.surface?.openReel(e);
+	}
 	closeMasonryReel() {
 		this.state.reelOrigin === "masonry" && (this.state.activeReelPostId = null, this.state.reelOrigin = null, this.routing.syncFeed());
 	}
-	openMasonryReel(e) {
-		this.state.layout === "masonry" && this.state.items.some((t) => t.postId === e) && (this.state.activeReelPostId = e, this.state.reelOrigin = "masonry", this.routing.syncReel(e));
-	}
 	setActiveReelPost(e) {
 		this.state.layout !== "reel" && this.state.reelOrigin !== "masonry" || (this.state.activeReelPostId = e, this.routing.syncReel(e));
 	}
@@ -5502,6 +5508,6 @@ var Li = class {
 	setCurrentCursor(e) {
 		this.lastLoadedCursor = this.state.current = e;
 	}
-}, Ri = (e) => new Li(e);
+}, zi = (e) => new Ri(e);
 //#endregion
-export { Ri as createVibe };
+export { zi as createVibe };

package/lib/instance.d.ts

@@ -0,0 +1,49 @@
+import type { VibeAutofillSessionSnapshot, VibeBackendAutofillUpdate, VibeBackendFillUpdate, VibeFillSessionSnapshot, VibeFillTarget, VibeItem, VibeItemId, VibeItemPlacement, VibeLayoutMode, VibeMediaRemoval, VibeMediaTarget, VibePage, VibeReelAudioState, VibeReelAutoAdvanceOptions, VibeReelItemTarget, VibeReelNavigationResult, VibeRemoval, VibeState } from './types';
+export interface VibeInstance {
+    appendPage: (page: VibePage) => void;
+    applyAutofillUpdate: (update: VibeBackendAutofillUpdate) => boolean;
+    applyFillUpdate: (update: VibeBackendFillUpdate) => boolean;
+    cancelAutofill: () => Promise<void>;
+    cancelFill: () => Promise<void>;
+    cancelLoading: () => Promise<void>;
+    destroy: () => void;
+    fill: (target: VibeFillTarget) => Promise<void>;
+    getState: () => VibeState;
+    getReelAudioState: () => VibeReelAudioState;
+    loadNext: () => Promise<void>;
+    mount: () => Promise<void>;
+    navigateToReelItem: (target: VibeReelItemTarget) => VibeReelNavigationResult;
+    /** Open a loaded post as a closable viewer without switching the feed layout. */
+    openReel: (postId: VibeItemId) => void;
+    nextReelMediaItem: () => boolean;
+    nextReelPost: () => boolean;
+    pauseAutoScroll: () => void;
+    previousReelMediaItem: () => boolean;
+    previousReelPost: () => boolean;
+    replenishAfterRemoval: () => Promise<void>;
+    refresh: () => Promise<void>;
+    reload: () => Promise<void>;
+    replacePage: (page: VibePage, options?: import('./core/pageReplacement').VibePageReplacementOptions) => Promise<void>;
+    removeMedia: (target: VibeMediaTarget) => VibeMediaRemoval | null;
+    removeMediaAnimated?: (target: VibeMediaTarget) => Promise<VibeMediaRemoval | null>;
+    removeItems: (postIds: readonly VibeItemId[], options?: import('./core/itemRemovalOptions').VibeItemRemovalOptions) => Promise<VibeRemoval>;
+    resumeAutoScroll: () => void;
+    restoreAutofillSession: (snapshot: VibeAutofillSessionSnapshot) => boolean;
+    restoreFillSession: (snapshot: VibeFillSessionSnapshot) => boolean;
+    restoreItems: (placements: readonly VibeItemPlacement[]) => void;
+    restoreMediaRemoval: (removal: VibeMediaRemoval) => boolean;
+    restoreRemoval: (removal: VibeRemoval) => boolean;
+    retryReelForward: () => Promise<void>;
+    retryFill: () => Promise<void>;
+    setAutoScroll: (enabled: boolean, speedPxPerSecond?: number) => void;
+    setAutoScrollSpeed: (speedPxPerSecond: number) => void;
+    setInfiniteScroll: (enabled: boolean) => void;
+    setLayout: (layout: VibeLayoutMode) => void;
+    setLoadMoreLocked: (locked: boolean) => void;
+    setTotal: (total: number | null) => void;
+    setReelAutoAdvance: (update: boolean | VibeReelAutoAdvanceOptions) => void;
+    setReelAudioState: (state: VibeReelAudioState) => void;
+    setReelInfoSheet: (enabled: boolean) => void;
+    undoLastRemoval: () => VibeRemoval | null;
+    updateItems: (items: readonly VibeItem[]) => VibeItemId[];
+}

package/lib/types.d.ts

@@ -391,49 +391,4 @@ export interface VibeState {
     reelOrigin: 'masonry' | null;
     total: number | null;
 }
-export interface VibeInstance {
-    appendPage: (page: VibePage) => void;
-    applyAutofillUpdate: (update: VibeBackendAutofillUpdate) => boolean;
-    applyFillUpdate: (update: VibeBackendFillUpdate) => boolean;
-    cancelAutofill: () => Promise<void>;
-    cancelFill: () => Promise<void>;
-    cancelLoading: () => Promise<void>;
-    destroy: () => void;
-    fill: (target: VibeFillTarget) => Promise<void>;
-    getState: () => VibeState;
-    getReelAudioState: () => VibeReelAudioState;
-    loadNext: () => Promise<void>;
-    mount: () => Promise<void>;
-    navigateToReelItem: (target: VibeReelItemTarget) => VibeReelNavigationResult;
-    nextReelMediaItem: () => boolean;
-    nextReelPost: () => boolean;
-    pauseAutoScroll: () => void;
-    previousReelMediaItem: () => boolean;
-    previousReelPost: () => boolean;
-    replenishAfterRemoval: () => Promise<void>;
-    refresh: () => Promise<void>;
-    reload: () => Promise<void>;
-    replacePage: (page: VibePage, options?: import('./core/pageReplacement').VibePageReplacementOptions) => Promise<void>;
-    removeMedia: (target: VibeMediaTarget) => VibeMediaRemoval | null;
-    removeMediaAnimated?: (target: VibeMediaTarget) => Promise<VibeMediaRemoval | null>;
-    removeItems: (postIds: readonly VibeItemId[], options?: import('./core/itemRemovalOptions').VibeItemRemovalOptions) => Promise<VibeRemoval>;
-    resumeAutoScroll: () => void;
-    restoreAutofillSession: (snapshot: VibeAutofillSessionSnapshot) => boolean;
-    restoreFillSession: (snapshot: VibeFillSessionSnapshot) => boolean;
-    restoreItems: (placements: readonly VibeItemPlacement[]) => void;
-    restoreMediaRemoval: (removal: VibeMediaRemoval) => boolean;
-    restoreRemoval: (removal: VibeRemoval) => boolean;
-    retryReelForward: () => Promise<void>;
-    retryFill: () => Promise<void>;
-    setAutoScroll: (enabled: boolean, speedPxPerSecond?: number) => void;
-    setAutoScrollSpeed: (speedPxPerSecond: number) => void;
-    setInfiniteScroll: (enabled: boolean) => void;
-    setLayout: (layout: VibeLayoutMode) => void;
-    setLoadMoreLocked: (locked: boolean) => void;
-    setTotal: (total: number | null) => void;
-    setReelAutoAdvance: (update: boolean | VibeReelAutoAdvanceOptions) => void;
-    setReelAudioState: (state: VibeReelAudioState) => void;
-    setReelInfoSheet: (enabled: boolean) => void;
-    undoLastRemoval: () => VibeRemoval | null;
-    updateItems: (items: readonly VibeItem[]) => VibeItemId[];
-}
+export type { VibeInstance } from './instance';