@wyxos/vibe 5.14.0 → 5.16.0

package/lib/index.js

@@ -48,7 +48,7 @@ function B(e) {
 		type: "image"
 	};
 }
-function V(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"
@@ -57,27 +57,27 @@ function V(e, t) {
 		type: "audio"
 	} : z(e, t);
 }
-function H(e) {
+function V(e) {
 	return [e, ...e.items];
 }
-function U(e, t) {
+function H(e, t) {
 	return Math.min(e.items.length, Math.max(0, t));
 }
-function W(e, t) {
-	return H(e)[U(e, t)] ?? e;
+function U(e, t) {
+	return V(e)[H(e, t)] ?? e;
 }
-function G(e, t) {
+function W(e, t) {
 	return `${String(e)}:${t}`;
 }
 //#endregion
 //#region src/core/runtime.ts
-function K(e) {
+function G(e) {
 	return r(() => Object.freeze([...e.items]));
 }
-function q(e, t, n) {
-	return n(J(e, t.value)), O(() => J(e, t.value), n, { flush: "post" });
+function K(e, t, n) {
+	return n(te(e, t.value)), O(() => te(e, t.value), n, { flush: "post" });
 }
-function J(e, t = [...e.items]) {
+function te(e, t = [...e.items]) {
 	return {
 		activeReelPostId: e.activeReelPostId,
 		autoScroll: { ...e.autoScroll },
@@ -107,17 +107,17 @@ function J(e, t = [...e.items]) {
 }
 //#endregion
 //#region src/components/GalleryFooter.vue?vue&type=script&setup=true&lang.ts
-var Y = {
+var q = {
 	key: 0,
 	class: "gallery-footer"
-}, ee = {
+}, J = {
 	key: 0,
 	class: "load-more-status",
 	role: "status"
-}, te = ["disabled"], ne = {
+}, ne = ["disabled"], re = {
 	key: 2,
 	class: "end-feed"
-}, re = ["disabled"], ie = /* @__PURE__ */ d({
+}, ie = ["disabled"], ae = /* @__PURE__ */ d({
 	__name: "GalleryFooter",
 	props: {
 		canRetryEnd: { type: Boolean },
@@ -133,14 +133,14 @@ var Y = {
 		function i() {
 			n.loadMoreLocked || (n.hasNext ? r("loadMore") : r("retryEnd"));
 		}
-		return (t, n) => e.isLoading || e.hasError || e.hasNext && e.showLoadMore || !e.hasNext && e.canRetryEnd ? (b(), s("footer", Y, [e.isLoading ? (b(), s("p", ee, " Loading more… ")) : e.hasError || e.hasNext && e.showLoadMore ? (b(), s("button", {
+		return (t, n) => e.isLoading || e.hasError || e.hasNext && e.showLoadMore || !e.hasNext && e.canRetryEnd ? (b(), s("footer", q, [e.isLoading ? (b(), s("p", J, " Loading more… ")) : e.hasError || e.hasNext && e.showLoadMore ? (b(), s("button", {
 			key: 1,
 			"data-test": "load-more",
 			class: "load-more-button",
 			type: "button",
 			disabled: e.loadMoreLocked,
 			onClick: i
-		}, T(e.hasError ? "Try again" : e.loadMoreLocked ? "Loading paused" : "Load more"), 9, te)) : (b(), s("div", ne, [n[1] ||= c("p", {
+		}, T(e.hasError ? "Try again" : e.loadMoreLocked ? "Loading paused" : "Load more"), 9, ne)) : (b(), s("div", re, [n[1] ||= c("p", {
 			class: "end-feed-message",
 			role: "status"
 		}, " You've reached the end. ", -1), c("button", {
@@ -149,9 +149,9 @@ var Y = {
 			type: "button",
 			disabled: e.loadMoreLocked,
 			onClick: n[0] ||= (e) => t.$emit("retryEnd")
-		}, " Check for more ", 8, re)]))])) : o("", !0);
+		}, " Check for more ", 8, ie)]))])) : o("", !0);
 	}
-}), ae = /* @__PURE__ */ d({
+}), oe = /* @__PURE__ */ d({
 	__name: "FeedFooter",
 	props: {
 		actions: {},
@@ -188,7 +188,7 @@ var Y = {
 			"can-retry-end",
 			"show-load-more",
 			"state"
-		])) : (b(), a(ie, {
+		])) : (b(), a(ae, {
 			key: 1,
 			"can-retry-end": e.canRetryEnd,
 			"has-error": e.hasError,
@@ -207,7 +207,7 @@ var Y = {
 			"show-load-more"
 		]));
 	}
-}), oe = ["role"], se = { class: "gallery-status" }, X = /* @__PURE__ */ d({
+}), se = ["role"], ce = { class: "gallery-status" }, le = /* @__PURE__ */ d({
 	__name: "FeedStatus",
 	props: {
 		actions: {},
@@ -221,7 +221,7 @@ var Y = {
 		return (n, u) => (b(), s("main", {
 			class: "gallery-shell",
 			role: r.state.error ? "alert" : r.state.isLoading || r.state.isLoadingMore ? "status" : void 0
-		}, [c("p", se, [r.state.error ? (b(), s(e, { key: 0 }, [l(" Unable to load media. ")], 64)) : r.state.isLoading || r.state.isLoadingMore ? (b(), s(e, { key: 1 }, [l(" Loading media… ")], 64)) : (b(), s(e, { key: 2 }, [l(" No media found. ")], 64))]), t.feedFooter ? (b(), a(ae, {
+		}, [c("p", ce, [r.state.error ? (b(), s(e, { key: 0 }, [l(" Unable to load media. ")], 64)) : r.state.isLoading || r.state.isLoadingMore ? (b(), s(e, { key: 1 }, [l(" Loading media… ")], 64)) : (b(), s(e, { key: 2 }, [l(" No media found. ")], 64))]), t.feedFooter ? (b(), a(oe, {
 			key: 0,
 			actions: t.actions,
 			"can-retry-end": t.canRetryEnd,
@@ -243,26 +243,26 @@ var Y = {
 			"is-loading",
 			"load-more-locked",
 			"state"
-		])) : o("", !0)], 8, oe));
+		])) : o("", !0)], 8, se));
 	}
 });
-function ce(e) {
-	return e.scrollHeight - e.scrollTop - e.clientHeight <= 240;
+function Y(e, t = 240) {
+	return e.scrollHeight - e.scrollTop - e.clientHeight <= t;
 }
 //#endregion
 //#region src/core/masonry.ts
-function Z(e) {
+function X(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 le(e) {
+function Z(e) {
 	return e.reduce((t, n, r) => n < e[t] ? r : t, 0);
 }
 function ue(e) {
 	return Math.max(0, e.containerHeight) + Math.max(0, e.gap);
 }
 var de = .8, fe = .5;
-function Q(e, t, n) {
+function pe(e, t, n) {
 	let r = Math.max(0, n.viewportHeight);
 	if (r === 0) return [];
 	let i = n.scrollTop, a = i + r;
@@ -273,7 +273,7 @@ function Q(e, t, n) {
 		return o + fe >= s;
 	});
 }
-function pe(e, t) {
+function Q(e, t) {
 	if (e <= 0) return null;
 	let n = Math.max(0, t.gap), r = Number.isFinite(t.additionalHeight) ? Math.max(0, t.additionalHeight ?? 0) : 0, i = Math.max(1, t.minColumnWidth), a = Math.max(1, Math.floor((e + n) / (i + n)));
 	return {
@@ -284,7 +284,7 @@ function pe(e, t) {
 	};
 }
 function me(e, t, n) {
-	let r = le(t), i = n.itemWidth * Z(e) + n.additionalHeight, a = {
+	let r = Z(t), i = n.itemWidth * X(e) + n.additionalHeight, a = {
 		x: r * (n.itemWidth + n.gap),
 		y: t[r],
 		width: n.itemWidth,
@@ -303,7 +303,7 @@ function ge(e, t) {
 	return e.length === 0 ? 0 : Math.max(0, Math.max(...e) - t);
 }
 function _e(e, t, n) {
-	let r = pe(t, n);
+	let r = Q(t, n);
 	if (!r || e.length === 0) return {
 		columns: 0,
 		height: 0,
@@ -317,7 +317,7 @@ function _e(e, t, n) {
 	};
 }
 function ve(e, t, n, r, i, a) {
-	let o = pe(t, n);
+	let o = Q(t, n);
 	if (!o || e.length === 0) return {
 		columns: 0,
 		height: 0,
@@ -333,7 +333,7 @@ function ve(e, t, n, r, i, a) {
 	};
 }
 function ye(e, t, n, r, i, a) {
-	let o = pe(t, n);
+	let o = Q(t, n);
 	if (!o || e.length === 0) return {
 		columns: 0,
 		fromIndex: 0,
@@ -470,6 +470,10 @@ function Oe(e, t) {
 	return a === void 0 ? i : Math.min(i, a);
 }
 function ke(e) {
+	for (let t of ["bottomSpacePx", "loadMoreThresholdPx"]) {
+		let n = e?.[t];
+		if (n !== void 0 && (!Number.isFinite(n) || n < 0)) throw TypeError(`Vibe masonry ${t} must be a finite non-negative number.`);
+	}
 	if (e?.minColumnWidth !== void 0 && (!Number.isFinite(e.minColumnWidth) || e.minColumnWidth <= 0)) throw TypeError("Vibe masonry minColumnWidth must be a positive number.");
 	let t = e?.overscan;
 	if (t) {
@@ -779,7 +783,7 @@ var rt = /* @__PURE__ */ d({
 		total: {}
 	},
 	setup(e) {
-		let t = e, n = r(() => U(t.item, t.mediaIndex)), i = r(() => H(t.item)), o = r(() => W(t.item, n.value)), c = r(() => ({
+		let t = e, n = r(() => H(t.item, t.mediaIndex)), i = r(() => V(t.item)), o = r(() => U(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`
@@ -997,7 +1001,7 @@ var rt = /* @__PURE__ */ d({
 function St(e) {
 	let t = w("next"), n = null, r = 0, i = !1, a = null, o = null;
 	function s(n, r) {
-		let i = H(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() {
@@ -1010,7 +1014,7 @@ function St(e) {
 		return t === 1 ? e * 16 : t === 2 ? e * n : e;
 	}
 	function d(t) {
-		if (H(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) < xt)) return;
 		let o = Math.sign(r);
@@ -1039,9 +1043,9 @@ function Dt(e, t) {
 	return `${t ? "timed" : "image"}:${e}`;
 }
 function Ot(e, t, n) {
-	let r = H(e);
+	let r = V(e);
 	if (r.length < 2) return [];
-	let i = U(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);
@@ -1147,56 +1151,59 @@ function Ft(e) {
 //#endregion
 //#region src/components/useMediaReadiness.ts
 function It(e) {
-	let t = w(null), n = w(null), i = w(0), a = w(0), o = w(!0), s = w(!1), c = w(!1), l = null, u = !1, d = r(() => c.value || s.value ? "error" : o.value ? "loading" : e.previewState());
-	function f() {
+	let t = w(null), n = w(null), i = w(0), a = w(0), o = w(!0), s = w(!1), c = w(!1), l = null, u = !1, d = !1, f = !1, p = r(() => c.value || s.value ? "error" : o.value ? "loading" : e.previewState());
+	function h() {
 		l !== null && clearTimeout(l), l = null;
 	}
-	function p(e) {
+	function g(e) {
 		return Number(e.currentTarget.dataset.sourceGeneration) === i.value;
 	}
-	function h() {
-		f(), l = setTimeout(() => y(), 15e3);
+	function _() {
+		h(), l = setTimeout(() => x(), 15e3);
 	}
-	function g(t) {
-		t && !p(t) || (f(), o.value = !1, s.value = !1, c.value = !1, e.onReady(e.mediaIndex()));
+	function y(t) {
+		t && !g(t) || (h(), o.value = !1, s.value = !1, c.value = !1, e.onReady(e.mediaIndex()));
 	}
-	function _() {
+	function b() {
+		if (f) return;
 		let e = t.value;
 		if (e?.complete) {
-			e.naturalWidth > 0 ? g() : y();
+			e.naturalWidth > 0 ? y() : x(void 0, !0);
 			return;
 		}
 		let r = n.value;
 		if (r && r.readyState >= HTMLMediaElement.HAVE_METADATA) {
-			g();
+			y();
 			return;
 		}
-		h();
+		_();
 	}
-	function y(t) {
-		if (!(t && !p(t))) {
-			if (f(), !t && a.value === 0) {
-				a.value = 1, i.value += 1, o.value = !0, m(_);
+	function x(t, n = !1) {
+		if (!f && !(t && !g(t)) && !(s.value && !c.value && (!t || d))) {
+			if (h(), !t && a.value === 0) {
+				a.value = 1, i.value += 1, o.value = !0, m(b);
 				return;
 			}
-			o.value = !1, s.value = !0, c.value = !1, e.onError(e.mediaIndex());
+			o.value = !1, s.value = !0, c.value = !1, d = !!t || n, e.onError(e.mediaIndex(), d);
 		}
 	}
-	function b() {
-		c.value || d.value !== "error" || (a.value = 0, s.value = !0, o.value = !0, c.value = !0, i.value += 1, m(_));
+	function S() {
+		c.value || p.value !== "error" || (d = !1, a.value = 0, s.value = !0, o.value = !0, c.value = !0, i.value += 1, m(b));
 	}
-	function x(e) {
-		p(e) && o.value && h();
+	function C(e) {
+		g(e) && o.value && _();
 	}
 	return O(e.identity, () => {
-		f(), i.value += 1, a.value = 0, o.value = u || e.previewState() === "loading", s.value = !1, c.value = !1, u = !0, m(_);
-	}, { immediate: !0 }), v(f), {
-		effectivePreviewState: d,
-		failSourceAttempt: y,
+		h(), i.value += 1, d = !1, a.value = 0, o.value = u || e.previewState() === "loading", s.value = !1, c.value = !1, u = !0, m(b);
+	}, { immediate: !0 }), v(() => {
+		f = !0, h();
+	}), {
+		effectivePreviewState: p,
+		failSourceAttempt: x,
 		imageElement: t,
-		markSourceReady: g,
-		noteSourceActivity: x,
-		retrySource: b,
+		markSourceReady: y,
+		noteSourceActivity: C,
+		retrySource: S,
 		retrying: c,
 		sourceGeneration: i,
 		mediaElement: n
@@ -1394,6 +1401,8 @@ var Wt = [
 	"muted",
 	"preload"
 ], Xt = ["aria-label", "disabled"], Zt = [
+	"data-cover-identity",
+	"data-source-generation",
 	"src",
 	"width",
 	"height",
@@ -1449,6 +1458,7 @@ var Wt = [
 		"activate",
 		"ended",
 		"error",
+		"mediaError",
 		"mediaChange",
 		"ready",
 		"reelAudioChange"
@@ -1458,10 +1468,18 @@ var Wt = [
 		function f(e = !1, t = "pointer") {
 			e && d("activate", t);
 		}
-		let p = r(() => H(l.item)), g = r(() => U(l.item, l.mediaIndex)), v = r(() => W(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(() => V(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 = w(!1), R = r(() => L.value ? null : F.value), { effectivePreviewState: G, failSourceAttempt: K, imageElement: q, markSourceReady: J, noteSourceActivity: Y, retrySource: ee, retrying: te, sourceGeneration: ne, mediaElement: re } = It({
+		let p = r(() => V(l.item)), g = r(() => H(l.item, l.mediaIndex)), v = r(() => U(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), W = r(() => R.value ? null : F.value), { effectivePreviewState: G, failSourceAttempt: K, imageElement: te, markSourceReady: q, noteSourceActivity: J, retrySource: ne, retrying: re, sourceGeneration: ie, mediaElement: ae } = It({
 			identity: () => `${l.item.postId}:${g.value}:${l.mediaSource ?? "preview"}:${D.value}:${M.value ?? ""}`,
 			mediaIndex: () => g.value,
-			onError: (e) => d("error", e),
+			onError: (e, t) => {
+				if (d("error", e), !t) return;
+				let n = l.mediaSource ?? "preview";
+				d("mediaError", {
+					mediaIndex: e,
+					source: n === "preview" && !S.value && v.value.preview ? "preview" : n === "mobile" && D.value === v.value.mobile?.src ? "mobile" : "original",
+					src: D.value
+				});
+			},
 			onReady: (e) => d("ready", e),
 			previewState: () => l.previewState
 		});
@@ -1474,47 +1492,51 @@ var Wt = [
 			mediaReady: () => G.value === "ready",
 			mediaSource: () => l.mediaSource ?? "preview"
 		});
-		let { currentTime: ie, duration: ae, effectiveMuted: oe, isMuted: se, isPlaying: X, onEnded: ce, onLoadedMetadata: Z, onPlaying: le, playbackAllowed: ue, seek: de, setVolume: fe, sync: Q, toggleMute: pe, togglePlayback: me, volume: he } = Ut({
+		let { currentTime: oe, duration: se, effectiveMuted: ce, isMuted: le, isPlaying: Y, onEnded: X, onLoadedMetadata: Z, onPlaying: ue, playbackAllowed: de, seek: fe, setVolume: pe, sync: Q, toggleMute: me, togglePlayback: he, volume: ge } = Ut({
 			active: () => l.active,
 			inViewport: () => l.inViewport === !0,
 			layout: () => l.layout,
 			mediaCard: () => l.mediaCard,
-			mediaElement: re,
+			mediaElement: ae,
 			onAudioChange: (e) => d("reelAudioChange", e),
 			onEnded: () => d("ended", g.value),
-			onReady: J,
+			onReady: q,
 			reelAudioState: () => l.reelAudioState
-		}), ge = r(() => l.interactive && !!(l.cardHeader || l.cardFooter));
-		function _e(e) {
+		}), _e = r(() => l.interactive && !!(l.cardHeader || l.cardFooter));
+		function ve(e) {
 			return e.detail === 0 ? "keyboard" : "pointer";
 		}
-		let { change: ve, direction: ye, onTouchEnd: be, onTouchStart: xe, onWheel: Se } = St({
+		let { change: ye, direction: be, onTouchEnd: xe, onTouchStart: Se, onWheel: Ce } = St({
 			item: () => l.item,
 			layout: () => l.layout,
 			mediaIndex: () => g.value,
 			onChange: (e) => d("mediaChange", e)
-		}), { imageLoading: Ce, mediaIsTimed: we, timedMediaPreload: Te } = Ft({
+		}), { imageLoading: we, mediaIsTimed: Te, timedMediaPreload: Ee } = Ft({
 			active: () => l.active,
 			fetchPriority: () => l.fetchPriority,
 			layout: () => l.layout,
 			mediaSource: () => D.value,
 			mediaType: () => M.value,
-			mediaElement: re
-		}), Ee = r(() => l.layout === "reel" && l.stationaryReelControls === !0), De = r(() => we.value && (!S.value || l.layout === "reel") && G.value === "ready" && (!Ee.value || !!(l.active && l.reelControlsTarget))), Oe = r(() => `${l.item.postId}:${g.value}:${D.value}`);
-		function ke(e) {
-			l.layout === "reel" && (e.stopPropagation(), me());
+			mediaElement: ae
+		}), De = r(() => l.layout === "reel" && l.stationaryReelControls === !0), Oe = r(() => Te.value && (!S.value || l.layout === "reel") && G.value === "ready" && (!De.value || !!(l.active && l.reelControlsTarget))), ke = r(() => `${l.item.postId}:${g.value}:${D.value}`);
+		function Ae(e) {
+			l.layout === "reel" && (e.stopPropagation(), he());
 		}
-		function Ae() {
-			L.value = !0, l.layout === "masonry" && J();
+		function je(e) {
+			e.currentTarget.dataset.coverIdentity !== L.value || R.value || (d("mediaError", {
+				mediaIndex: g.value,
+				source: "preview",
+				src: F.value?.src ?? ""
+			}), R.value = !0, l.layout === "masonry" && q());
 		}
-		return O(() => F.value?.src, () => {
-			L.value = !1;
+		return O(L, () => {
+			R.value = !1;
 		}), O([
 			S,
 			() => l.layout,
-			R
+			W
 		], ([e, t, n]) => {
-			e && t === "masonry" && !n && m(() => J());
+			e && t === "masonry" && !n && m(() => q());
 		}, { immediate: !0 }), (r, i) => (b(), s("article", {
 			"data-post-id": e.item.postId,
 			"data-media-index": g.value,
@@ -1526,12 +1548,12 @@ var Wt = [
 			}]),
 			style: _(e.itemStyle),
 			"aria-hidden": e.leaving || void 0,
-			"aria-busy": E(G) === "loading" || E(te),
+			"aria-busy": E(G) === "loading" || E(re),
 			inert: e.leaving || void 0,
-			role: e.interactive && !e.leaving && !ge.value ? "button" : void 0,
-			tabindex: e.interactive && !e.leaving && !ge.value ? 0 : void 0,
-			onClick: i[34] ||= (t) => f(e.interactive && !ge.value, _e(t)),
-			onKeydown: [i[35] ||= A((t) => f(e.interactive && !ge.value, "keyboard"), ["enter"]), i[36] ||= A(j((t) => f(e.interactive && !ge.value, "keyboard"), ["prevent"]), ["space"])]
+			role: e.interactive && !e.leaving && !_e.value ? "button" : void 0,
+			tabindex: e.interactive && !e.leaving && !_e.value ? 0 : void 0,
+			onClick: i[34] ||= (t) => f(e.interactive && !_e.value, ve(t)),
+			onKeydown: [i[35] ||= A((t) => f(e.interactive && !_e.value, "keyboard"), ["enter"]), i[36] ||= A(j((t) => f(e.interactive && !_e.value, "keyboard"), ["prevent"]), ["space"])]
 		}, [c("div", Gt, [
 			e.cardHeader ? (b(), a(rt, {
 				key: 0,
@@ -1558,17 +1580,17 @@ var Wt = [
 			])) : o("", !0),
 			c("div", {
 				class: h(["media-card-media", { "media-card-media--carousel": e.layout === "reel" && p.value.length > 1 }]),
-				"data-media-direction": E(ye),
-				onWheel: i[31] ||= (...e) => E(Se) && E(Se)(...e),
-				onTouchstartPassive: i[32] ||= (...e) => E(xe) && E(xe)(...e),
-				onTouchendPassive: i[33] ||= (...e) => E(be) && E(be)(...e)
+				"data-media-direction": E(be),
+				onWheel: i[31] ||= (...e) => E(Ce) && E(Ce)(...e),
+				onTouchstartPassive: i[32] ||= (...e) => E(Se) && E(Se)(...e),
+				onTouchendPassive: i[33] ||= (...e) => E(xe) && E(xe)(...e)
 			}, [
 				u(n, {
-					css: !E(te),
-					name: `media-slide-${E(ye)}`
+					css: !E(re),
+					name: `media-slide-${E(be)}`
 				}, {
 					default: k(() => [(b(), s("div", {
-						key: `${e.item.postId}:${v.value.src}:${e.mediaSource ?? "preview"}:${E(ne)}`,
+						key: `${e.item.postId}:${v.value.src}:${e.mediaSource ?? "preview"}:${E(ie)}`,
 						class: "media-card-frame",
 						"data-media-index": g.value
 					}, [
@@ -1576,9 +1598,9 @@ var Wt = [
 							key: 1,
 							component: e.mediaCard?.error?.component,
 							label: E(nt)(D.value),
-							retrying: E(te),
+							retrying: E(re),
 							status: E(tt)(D.value),
-							onRetry: E(ee)
+							onRetry: E(ne)
 						}, null, 8, [
 							"component",
 							"label",
@@ -1589,53 +1611,55 @@ var Wt = [
 						S.value && e.layout === "reel" ? (b(), s("audio", {
 							key: 2,
 							ref_key: "mediaElement",
-							ref: re,
-							"data-source-generation": E(ne),
+							ref: ae,
+							"data-source-generation": E(ie),
 							class: "media-audio-element",
 							src: D.value,
-							autoplay: E(ue),
+							autoplay: E(de),
 							loop: !e.advanceOnMediaEnd,
-							muted: E(oe),
-							preload: E(Te),
+							muted: E(ce),
+							preload: E(Ee),
 							onLoadedmetadata: i[0] ||= (...e) => E(Z) && E(Z)(...e),
-							onProgress: i[1] ||= (...e) => E(Y) && E(Y)(...e),
-							onLoadeddata: i[2] ||= (...e) => E(Y) && E(Y)(...e),
-							onCanplay: i[3] ||= (...e) => E(Y) && E(Y)(...e),
+							onProgress: i[1] ||= (...e) => E(J) && E(J)(...e),
+							onLoadeddata: i[2] ||= (...e) => E(J) && E(J)(...e),
+							onCanplay: i[3] ||= (...e) => E(J) && E(J)(...e),
 							onDurationchange: i[4] ||= (...e) => E(Q) && E(Q)(...e),
 							onTimeupdate: i[5] ||= (...e) => E(Q) && E(Q)(...e),
 							onVolumechange: i[6] ||= (...e) => E(Q) && E(Q)(...e),
-							onPlaying: i[7] ||= (...e) => E(le) && E(le)(...e),
-							onPause: i[8] ||= (e) => X.value = !1,
-							onEnded: i[9] ||= (...e) => E(ce) && E(ce)(...e),
+							onPlaying: i[7] ||= (...e) => E(ue) && E(ue)(...e),
+							onPause: i[8] ||= (e) => Y.value = !1,
+							onEnded: i[9] ||= (...e) => E(X) && E(X)(...e),
 							onError: i[10] ||= (...e) => E(K) && E(K)(...e)
 						}, null, 40, Yt)) : o("", !0),
 						S.value ? (b(), s("button", {
 							key: 3,
 							type: "button",
 							class: h(["media-audio-artwork media-preview", { "media-preview--ready": E(G) === "ready" }]),
-							"aria-label": e.layout === "reel" ? E(X) ? "Pause audio" : "Play audio" : "Audio",
+							"aria-label": e.layout === "reel" ? E(Y) ? "Pause audio" : "Play audio" : "Audio",
 							disabled: e.layout !== "reel",
-							onClick: ke
-						}, [R.value ? (b(), s("img", {
-							key: 0,
+							onClick: Ae
+						}, [W.value ? (b(), s("img", {
+							key: L.value,
+							"data-cover-identity": L.value,
+							"data-source-generation": E(ie),
 							class: "media-audio-cover",
-							src: R.value.src,
-							width: R.value.width ?? void 0,
-							height: R.value.height ?? void 0,
+							src: W.value.src,
+							width: W.value.width ?? void 0,
+							height: W.value.height ?? void 0,
 							fetchpriority: e.fetchPriority,
 							alt: "",
 							decoding: "async",
-							loading: E(Ce),
-							onLoad: i[11] ||= (t) => e.layout === "masonry" && E(J)(t),
-							onError: Ae
+							loading: E(we),
+							onLoad: i[11] ||= (t) => e.layout === "masonry" && E(q)(t),
+							onError: je
 						}, null, 40, Zt)) : (b(), s("span", Qt, [u(E(Ye), {
 							size: 64,
 							"stroke-width": 1.5
-						})]))], 10, Xt)) : E(we) ? (b(), s("video", {
+						})]))], 10, Xt)) : E(Te) ? (b(), s("video", {
 							key: 4,
 							ref_key: "mediaElement",
-							ref: re,
-							"data-source-generation": E(ne),
+							ref: ae,
+							"data-source-generation": E(ie),
 							class: h(["media-preview", {
 								"media-preview--ready": E(G) === "ready",
 								"media-preview--reel-video": e.layout === "reel"
@@ -1643,28 +1667,28 @@ var Wt = [
 							src: D.value,
 							width: N.value ?? void 0,
 							height: P.value ?? void 0,
-							autoplay: E(ue),
+							autoplay: E(de),
 							loop: !e.advanceOnMediaEnd,
-							muted: E(oe),
+							muted: E(ce),
 							playsinline: "",
-							preload: E(Te),
+							preload: E(Ee),
 							onLoadedmetadata: i[12] ||= (...e) => E(Z) && E(Z)(...e),
-							onProgress: i[13] ||= (...e) => E(Y) && E(Y)(...e),
-							onLoadeddata: i[14] ||= (...e) => E(Y) && E(Y)(...e),
-							onCanplay: i[15] ||= (...e) => E(Y) && E(Y)(...e),
+							onProgress: i[13] ||= (...e) => E(J) && E(J)(...e),
+							onLoadeddata: i[14] ||= (...e) => E(J) && E(J)(...e),
+							onCanplay: i[15] ||= (...e) => E(J) && E(J)(...e),
 							onDurationchange: i[16] ||= (...e) => E(Q) && E(Q)(...e),
 							onTimeupdate: i[17] ||= (...e) => E(Q) && E(Q)(...e),
 							onVolumechange: i[18] ||= (...e) => E(Q) && E(Q)(...e),
-							onPlaying: i[19] ||= (...e) => E(le) && E(le)(...e),
-							onPause: i[20] ||= (e) => X.value = !1,
-							onEnded: i[21] ||= (...e) => E(ce) && E(ce)(...e),
-							onClick: ke,
+							onPlaying: i[19] ||= (...e) => E(ue) && E(ue)(...e),
+							onPause: i[20] ||= (e) => Y.value = !1,
+							onEnded: i[21] ||= (...e) => E(X) && E(X)(...e),
+							onClick: Ae,
 							onError: i[22] ||= (...e) => E(K) && E(K)(...e)
 						}, null, 42, $t)) : S.value ? o("", !0) : (b(), s("img", {
 							key: 5,
 							ref_key: "imageElement",
-							ref: q,
-							"data-source-generation": E(ne),
+							ref: te,
+							"data-source-generation": E(ie),
 							class: h(["media-preview", { "media-preview--ready": E(G) === "ready" }]),
 							src: D.value,
 							width: N.value ?? void 0,
@@ -1672,8 +1696,8 @@ var Wt = [
 							fetchpriority: e.fetchPriority,
 							alt: "",
 							decoding: "async",
-							loading: E(Ce),
-							onLoad: i[23] ||= (...e) => E(J) && E(J)(...e),
+							loading: E(we),
+							onLoad: i[23] ||= (...e) => E(q) && E(q)(...e),
 							onError: i[24] ||= (...e) => E(K) && E(K)(...e)
 						}, null, 42, en))
 					], 8, qt))]),
@@ -1693,26 +1717,26 @@ var Wt = [
 					"media-source"
 				]),
 				(b(), a(t, {
-					disabled: !Ee.value || !e.reelControlsTarget,
+					disabled: !De.value || !e.reelControlsTarget,
 					to: e.reelControlsTarget ?? "body"
 				}, [u(n, {
 					name: "vibe-reel-media-controls",
-					css: Ee.value
+					css: De.value
 				}, {
-					default: k(() => [De.value ? (b(), a(gt, {
-						key: Oe.value,
-						"current-time": E(ie),
-						"data-control-post-id": Ee.value ? e.item.postId : void 0,
-						duration: E(ae),
+					default: k(() => [Oe.value ? (b(), a(gt, {
+						key: ke.value,
+						"current-time": E(oe),
+						"data-control-post-id": De.value ? e.item.postId : void 0,
+						duration: E(se),
 						layout: e.layout,
 						"media-type": S.value ? "audio" : "video",
-						muted: E(se),
-						playing: E(X),
-						volume: E(he),
-						onSeek: E(de),
-						onToggleMute: E(pe),
-						onTogglePlayback: E(me),
-						onVolumeChange: E(fe)
+						muted: E(le),
+						playing: E(Y),
+						volume: E(ge),
+						onSeek: E(fe),
+						onToggleMute: E(me),
+						onTogglePlayback: E(he),
+						onVolumeChange: E(pe)
 					}, null, 8, [
 						"current-time",
 						"data-control-post-id",
@@ -1737,21 +1761,21 @@ var Wt = [
 					type: "button",
 					class: "media-carousel-control media-carousel-control--previous",
 					"aria-label": `Previous media for post ${e.item.postId}`,
-					onClick: i[25] ||= j((e) => E(ve)(g.value - 1, e), ["stop"]),
+					onClick: i[25] ||= j((e) => E(ye)(g.value - 1, e), ["stop"]),
 					onKeydown: i[26] ||= j(() => {}, ["stop"])
 				}, [u(E(qe), { size: 20 })], 40, tn), c("button", {
 					type: "button",
 					class: "media-carousel-control media-carousel-control--next",
 					"aria-label": `Next media for post ${e.item.postId}`,
-					onClick: i[27] ||= j((e) => E(ve)(g.value + 1, e), ["stop"]),
+					onClick: i[27] ||= j((e) => E(ye)(g.value + 1, e), ["stop"]),
 					onKeydown: i[28] ||= j(() => {}, ["stop"])
 				}, [u(E(Je), { size: 20 })], 40, nn)], 2)) : o("", !0),
-				ge.value ? (b(), s("button", {
+				_e.value ? (b(), s("button", {
 					key: 1,
 					class: "media-card-activator",
 					type: "button",
 					"aria-label": `Open post ${e.item.postId}`,
-					onClick: i[29] ||= j((e) => r.$emit("activate", _e(e)), ["stop"]),
+					onClick: i[29] ||= j((e) => r.$emit("activate", ve(e)), ["stop"]),
 					onKeydown: i[30] ||= j(() => {}, ["stop"])
 				}, null, 40, rn)) : o("", !0)
 			], 42, Kt),
@@ -1788,7 +1812,7 @@ function on(e) {
 		return t.flatMap((t) => {
 			let n = e.items()[t];
 			if (!n) return [];
-			let r = e.mediaIndices().get(n.postId) ?? 0, i = G(n.postId, r);
+			let r = e.mediaIndices().get(n.postId) ?? 0, i = W(n.postId, r);
 			return e.previewStates().get(i) === "ready" ? [{
 				key: i,
 				mediaIndex: r,
@@ -1911,6 +1935,7 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 	emits: [
 		"activate",
 		"error",
+		"mediaError",
 		"fullyVisible",
 		"loadMore",
 		"mediaChange",
@@ -1931,53 +1956,53 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 			}, 0);
 			return Math.max(e, t);
 		}
-		function V() {
+		function ee() {
 			return M.value.reduce((e, t) => Math.max(e, t), -1);
 		}
-		let H = cn({
+		let V = cn({
 			additionalHeight: r(() => R.value.additionalHeight),
 			gap: x,
 			items: () => d.items,
 			minColumnWidth: r(() => R.value.minColumnWidth),
-			packThroughIndex: V,
+			packThroughIndex: ee,
 			packUntilBottom: B,
 			width: y
-		}), U = H.layout, W = H.viewportIndex, K = r(() => d.leavingPostIds.size === 0 ? null : ye(d.items, y.value, R.value, U.value, (e) => d.leavingPostIds.has(d.items[e].postId), {
-			throughIndex: V(),
+		}), H = V.layout, U = V.viewportIndex, G = 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()
-		})), q = r(() => {
-			let e = K.value;
+		})), K = r(() => {
+			let e = G.value;
 			return e ? {
 				columns: e.columns,
 				height: e.height,
 				items: e.items
-			} : U.value;
-		}), J = r(() => {
-			let e = K.value;
-			return e ? we(e.items, e.retainedIndices, W.value, e.fromIndex) : null;
-		}), Y = r(() => (U.value, Math.max(T.value, H.reservedHeight(), d.leavingPostIds.size === 0 ? q.value.height : U.value.height))), ee = r(() => ({ height: `${Y.value}px` })), te = r(() => !d.infiniteScroll || C.value > 0 && k.value + q.value.height <= C.value + 1), ne = r(() => new Set(j.value)), re = r(() => M.value.flatMap((e) => {
-			let t = d.items[e], n = q.value.items[e];
+			} : H.value;
+		}), te = r(() => {
+			let e = G.value;
+			return e ? we(e.items, e.retainedIndices, U.value, e.fromIndex) : null;
+		}), q = r(() => (H.value, Math.max(T.value, V.reservedHeight(), d.leavingPostIds.size === 0 ? K.value.height : H.value.height))), J = r(() => ({ height: `${q.value}px` })), ne = r(() => !d.infiniteScroll || C.value > 0 && k.value + K.value.height <= C.value + 1), re = r(() => new Set(j.value)), ie = r(() => M.value.flatMap((e) => {
+			let t = d.items[e], n = K.value.items[e];
 			return !t || !n || n.width <= 0 || n.height <= 0 ? [] : [{
-				fetchPriority: ne.value.has(e) ? "high" : "low",
+				fetchPriority: re.value.has(e) ? "high" : "low",
 				index: e,
 				item: t
 			}];
 		}));
-		function ie(e, t) {
+		function ae(e, t) {
 			return [...new Set([...e, ...t])].sort((e, t) => e - t);
 		}
-		function oe(e, t) {
+		function se(e, t) {
 			return e.length === t.length && e.every((e, n) => e === t[n]);
 		}
-		function se(e) {
+		function ce(e) {
 			let t = {
 				scrollTop: N - k.value,
 				viewportHeight: C.value
-			}, n = J.value, r = Ee(n ?? W.value, {
+			}, n = te.value, r = Ee(n ?? U.value, {
 				...t,
 				overscan: e
 			}).indices;
-			return ie(r, d.leavingPostIds.size === 0 ? [] : Ee(W.value, {
+			return ae(r, d.leavingPostIds.size === 0 ? [] : Ee(U.value, {
 				...t,
 				overscan: e
 			}).indices.filter((e) => {
@@ -1985,23 +2010,23 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 				return t !== void 0 && d.leavingPostIds.has(t.postId);
 			}));
 		}
-		function X() {
-			let e = se(0), t = se(Oe(d.masonry, C.value));
-			oe(j.value, e) || (j.value = e);
-			let n = Q(q.value.items, e.filter((e) => {
+		function le() {
+			let e = ce(0), t = ce(Oe(d.masonry, C.value));
+			se(j.value, e) || (j.value = e);
+			let n = pe(K.value.items, e.filter((e) => {
 				let t = d.items[e];
 				return t && !d.leavingPostIds.has(t.postId);
 			}), {
 				scrollTop: N - k.value,
 				viewportHeight: C.value
 			});
-			oe(A.value, n) || (A.value = n), oe(M.value, t) || (M.value = t);
+			se(A.value, n) || (A.value = n), se(M.value, t) || (M.value = t);
 		}
-		function Z() {
+		function X() {
 			if (L !== null) return;
 			L = -1;
 			let e = requestAnimationFrame(() => {
-				L = null, X();
+				L = null, le();
 			});
 			L !== null && (L = e);
 		}
@@ -2014,11 +2039,11 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 			previewStates: () => d.previewStates,
 			visibleIndices: () => j.value
 		});
-		function le(e) {
-			let t = q.value.items[e], n = d.items[e]?.postId;
+		function Z(e) {
+			let t = K.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 ? ue({
-				containerHeight: Math.max(T.value, U.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 {
@@ -2035,19 +2060,19 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 			let t = e.ownerDocument.defaultView?.getComputedStyle(e), n = (Number.parseFloat(t?.paddingTop ?? "") || 0) + (Number.parseFloat(t?.paddingBottom ?? "") || 0);
 			T.value = Math.max(0, e.clientHeight - n);
 			let r = g.value;
-			r && (k.value = r.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop, X());
+			r && (k.value = r.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop, le());
 		}
 		function fe(e) {
 			let t = e.ownerDocument.documentElement.clientWidth;
 			y.value = e.clientWidth, x.value = Math.min(pn, Math.max(fn, t * .0075)), de();
 		}
-		function pe(e) {
+		function Q(e) {
 			let t = e.currentTarget;
-			t && (N = t.scrollTop, H.ensurePackedThrough(B()), Z(), Date.now() >= l && !d.loadMoreLocked && d.infiniteScroll && ce(t) && f("loadMore"));
+			t && (N = t.scrollTop, V.ensurePackedThrough(B()), X(), Date.now() >= l && !d.loadMoreLocked && d.infiniteScroll && Y(t, d.masonry?.loadMoreThresholdPx) && f("loadMore"));
 		}
 		function me() {
 			let e = p.value;
-			Date.now() >= l && !d.loadMoreLocked && e && ce(e) && f("loadMore");
+			Date.now() >= l && !d.loadMoreLocked && e && Y(e, d.masonry?.loadMoreThresholdPx) && f("loadMore");
 		}
 		O(() => d.items.length, (e, t) => {
 			e > 0 && e < t && (l = Date.now() + mn);
@@ -2064,13 +2089,13 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 			}), P.observe(e)));
 		}), O(p, (e) => {
 			F?.disconnect(), F = null, e && (de(), !(typeof ResizeObserver > "u") && (F = new ResizeObserver(de), F.observe(e)));
-		}), O(q, (e) => {
+		}), O(K, (e) => {
 			z = e.items;
 		}, { flush: "sync" }), O([
-			U,
-			q,
+			H,
+			K,
 			() => d.masonry
-		], X, { flush: "post" }), v(() => {
+		], le, { flush: "post" }), v(() => {
 			P?.disconnect(), F?.disconnect(), I !== null && cancelAnimationFrame(I), L !== null && cancelAnimationFrame(L);
 		}), n({
 			getScrollElement: he,
@@ -2084,14 +2109,14 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 				"data-layout-mode": "masonry",
 				"aria-hidden": t.suspended || void 0,
 				inert: t.suspended || void 0,
-				onScrollPassive: pe
+				onScrollPassive: Q
 			}, [c("section", {
 				ref_key: "masonryElement",
 				ref: g,
 				class: h(["masonry", { "masonry--ready": y.value > 0 }]),
-				style: _(ee.value),
+				style: _(J.value),
 				"aria-label": "Media gallery"
-			}, [(b(!0), s(e, null, S(re.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(an, {
+			}, [(b(!0), s(e, null, S(ie.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(an, {
 				key: n.postId,
 				class: "masonry-item",
 				entering: t.enteringPostIds.has(n.postId),
@@ -2100,20 +2125,21 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 				"card-footer": t.cardFooter,
 				"card-header": t.cardHeader,
 				"media-card": t.mediaCard,
-				"in-viewport": ne.value.has(r),
+				"in-viewport": re.value.has(r),
 				index: r,
 				item: n,
-				"item-style": le(r),
+				"item-style": Z(r),
 				interactive: "",
 				layout: "masonry",
 				"loaded-count": t.items.length,
 				"media-index": t.mediaIndices.get(n.postId) ?? 0,
-				"preview-state": t.previewStates.get(E(G)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
+				"preview-state": t.previewStates.get(E(W)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
 				total: t.total,
 				onActivate: (e) => f("activate", n.postId, e),
 				onMediaChange: (e) => f("mediaChange", n.postId, e),
 				onReady: (e) => f("ready", n.postId, e),
-				onError: (e) => f("error", n.postId, e)
+				onError: (e) => f("error", n.postId, e),
+				onMediaError: (e) => f("mediaError", n.postId, e)
 			}, null, 8, [
 				"entering",
 				"leaving",
@@ -2132,9 +2158,15 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 				"onActivate",
 				"onMediaChange",
 				"onReady",
-				"onError"
-			]))), 128))], 6)], 42, un),
-			t.feedFooter || t.isLoadingMore || t.nextPageError || t.hasNext && te.value || !t.hasNext && t.canRetryEnd ? (b(), s("div", dn, [u(ae, {
+				"onError",
+				"onMediaError"
+			]))), 128))], 6), t.masonry?.bottomSpacePx ? (b(), s("div", {
+				key: 0,
+				class: "masonry-bottom-space",
+				"aria-hidden": "true",
+				style: _({ flex: `0 0 ${t.masonry.bottomSpacePx}px` })
+			}, null, 4)) : o("", !0)], 42, un),
+			t.feedFooter || t.isLoadingMore || t.nextPageError || t.hasNext && ne.value || !t.hasNext && t.canRetryEnd ? (b(), s("div", dn, [u(oe, {
 				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
 				"feed-footer": t.feedFooter,
@@ -2142,7 +2174,7 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 				"has-next": t.hasNext,
 				"is-loading": t.isLoadingMore,
 				"load-more-locked": t.loadMoreLocked,
-				"show-load-more": te.value,
+				"show-load-more": ne.value,
 				state: t.state,
 				onLoadMore: r[0] ||= (e) => f("loadMore"),
 				onRetryEnd: r[1] ||= (e) => f("retryEnd")
@@ -2158,7 +2190,7 @@ var ln = { class: "masonry-feed-shell" }, un = ["aria-hidden", "inert"], dn = {
 				"state"
 			])])) : o("", !0),
 			u(Le, {
-				"content-size": q.value.height,
+				"content-size": K.value.height,
 				"controls-id": m,
 				"scroll-element": p.value,
 				suspended: t.suspended
@@ -2241,6 +2273,7 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 	emits: [
 		"activeChange",
 		"error",
+		"mediaError",
 		"loadMore",
 		"mediaChange",
 		"ready",
@@ -2261,8 +2294,8 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 			return e === void 0 ? 0 : u.mediaIndices.get(e) ?? 0;
 		}), z = r(() => {
 			let e = F.value;
-			return e === void 0 ? "loading" : u.previewStates.get(G(e, R.value)) ?? "loading";
-		}), B = r(() => I.value ? W(I.value, R.value) : null), U = r(() => B.value ? V(B.value, u.mediaSource ?? "preview") : null), K = r(() => z.value === "ready" && !!(U.value && L(U.value.type, U.value.src))), q = r(() => [
+			return e === void 0 ? "loading" : u.previewStates.get(W(e, R.value)) ?? "loading";
+		}), B = r(() => I.value ? U(I.value, R.value) : null), H = r(() => B.value ? ee(B.value, u.mediaSource ?? "preview") : null), G = r(() => z.value === "ready" && !!(H.value && L(H.value.type, H.value.src))), K = r(() => [
 			F.value,
 			R.value,
 			u.items.length,
@@ -2270,47 +2303,47 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 			u.reelAutoAdvance.enabled,
 			u.reelAutoAdvance.includePostItems,
 			u.reelAutoAdvance.intervalMs
-		].join(":")), J = r(() => {
-			let e = I.value, t = !!(e && u.reelAutoAdvance.includePostItems && R.value < H(e).length - 1), n = u.reelAutoAdvance.intervalMs / 1e3;
+		].join(":")), te = r(() => {
+			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`;
-		}), Y = r(() => u.reelAutoAdvance.enabled && u.reelForward.status === "idle" && I.value !== void 0 && z.value !== "loading" && !K.value), ee = r(() => !u.infiniteScroll || u.items.length <= 1), te = r(() => u.reelForward.status === "end" && u.hasNext && !u.infiniteScroll && !u.loadMoreLocked), ne = r(() => u.reelForward.status === "loading" ? "Loading the next media…" : u.reelForward.status === "error" ? "Unable to load the next media." : te.value ? "Load the next page to continue." : "You reached the end of this feed.");
-		function re(e) {
+		}), q = r(() => u.reelAutoAdvance.enabled && u.reelForward.status === "idle" && I.value !== void 0 && z.value !== "loading" && !G.value), J = r(() => !u.infiniteScroll || u.items.length <= 1), ne = r(() => u.reelForward.status === "end" && u.hasNext && !u.infiniteScroll && !u.loadMoreLocked), re = r(() => u.reelForward.status === "loading" ? "Loading the next media…" : u.reelForward.status === "error" ? "Unable to load the next media." : ne.value ? "Load the next page to continue." : "You reached the end of this feed.");
+		function ie(e) {
 			return { gridRow: `${e + 1}` };
 		}
-		function ie(e) {
+		function ae(e) {
 			let t = k || e.clientHeight;
 			return t <= 0 || u.items.length === 0 ? 0 : Math.min(u.items.length - 1, Math.max(0, Math.round(e.scrollTop / t)));
 		}
-		function oe(e) {
+		function se(e) {
 			let t = e.currentTarget;
 			if (!t) return;
 			let n = k || t.clientHeight, r = Math.max(0, u.items.length - 1) * n;
-			C.value = u.items.length > 0 && t.scrollTop > r + 1, D.value || (x.value = ie(t)), Date.now() >= l && !u.loadMoreLocked && u.infiniteScroll && ce(t) && d("loadMore");
+			C.value = u.items.length > 0 && t.scrollTop > r + 1, D.value || (x.value = ae(t)), Date.now() >= l && !u.loadMoreLocked && u.infiniteScroll && Y(t) && d("loadMore");
 		}
-		function se() {
+		function ce() {
 			let e = f.value;
-			e && (C.value = !1, le(!0), k = e.clientHeight, e.scrollTop = x.value * k, j !== null && cancelAnimationFrame(j), j = requestAnimationFrame(() => {
+			e && (C.value = !1, Z(!0), k = e.clientHeight, e.scrollTop = x.value * k, j !== null && cancelAnimationFrame(j), j = requestAnimationFrame(() => {
 				e.scrollTop = x.value * e.clientHeight, k = e.clientHeight, j = null;
-			}), X());
+			}), le());
 		}
-		function X() {
+		function le() {
 			M !== null && clearTimeout(M), M = setTimeout(() => {
 				M = null;
 				let e = f.value;
-				e && (k = e.clientHeight, e.scrollTop = x.value * k), le(!1);
+				e && (k = e.clientHeight, e.scrollTop = x.value * k), Z(!1);
 			}, 120);
 		}
-		function Z() {
-			le(!0);
+		function X() {
+			Z(!0);
 			let e = f.value;
-			e && (k = e.clientHeight, e.scrollTop = x.value * k), X();
+			e && (k = e.clientHeight, e.scrollTop = x.value * k), le();
 		}
-		function le(e) {
+		function Z(e) {
 			D.value = e, f.value?.toggleAttribute("data-resizing", e);
 		}
 		function ue() {
 			let e = f.value;
-			Date.now() >= l && !u.loadMoreLocked && e && ce(e) && d("loadMore");
+			Date.now() >= l && !u.loadMoreLocked && e && Y(e) && d("loadMore");
 		}
 		O(() => u.items.length, (e, t) => {
 			e > 0 && e < t && (l = Date.now() + Tn);
@@ -2318,7 +2351,7 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 		function de(e) {
 			let t = I.value;
 			if (!t) return !1;
-			let n = H(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;
@@ -2327,18 +2360,18 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 			let t = x.value + e;
 			return !f.value || t < 0 || t >= u.items.length ? !1 : (he(t), !0);
 		}
-		function Q(e, t) {
+		function pe(e, t) {
 			let n = u.items.findIndex((t) => t.postId === e), r = u.items[n];
 			return !f.value || !r || t < 0 || t > r.items.length ? !1 : ((u.mediaIndices.get(e) ?? 0) !== t && d("mediaChange", e, t), n !== x.value && he(n), !0);
 		}
-		function pe() {
+		function Q() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
 		function me(e) {
 			let t = f.value;
 			if (!t) return Promise.resolve();
 			let n = e * (k || t.clientHeight);
-			return x.value = e, _n(t, n, pe());
+			return x.value = e, _n(t, n, Q());
 		}
 		function he(e) {
 			me(e);
@@ -2348,13 +2381,13 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 			return t < 0 || t === x.value ? !1 : (await me(t), !0);
 		}
 		async function _e(e) {
-			return de(e) ? (pe() || await new Promise((e) => setTimeout(e, wn)), !0) : !1;
+			return de(e) ? (Q() || await new Promise((e) => setTimeout(e, wn)), !0) : !1;
 		}
 		function ve() {
 			if (!u.reelAutoAdvance.enabled) return;
 			let e = I.value;
 			if (!e) return;
-			if (u.reelAutoAdvance.includePostItems && R.value < H(e).length - 1) {
+			if (u.reelAutoAdvance.includePostItems && R.value < V(e).length - 1) {
 				d("mediaChange", e.postId, R.value + 1);
 				return;
 			}
@@ -2366,26 +2399,26 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 			u.reelAutoAdvance.includePostItems && (u.mediaIndices.get(n.postId) ?? 0) !== 0 && d("mediaChange", n.postId, 0), he(t);
 		}
 		function ye(e, t) {
-			!u.reelAutoAdvance.enabled || e !== F.value || t !== R.value || !K.value || ve();
+			!u.reelAutoAdvance.enabled || e !== F.value || t !== R.value || !G.value || ve();
 		}
 		return O(f, (e) => {
-			A?.disconnect(), A = null, e && (k = e.clientHeight, !(typeof ResizeObserver > "u") && (A = new ResizeObserver(se), A.observe(e)));
+			A?.disconnect(), A = null, e && (k = e.clientHeight, !(typeof ResizeObserver > "u") && (A = new ResizeObserver(ce), A.observe(e)));
 		}), O(() => u.items.length, async (e) => {
 			let t = u.initialPostId, n = t == null ? -1 : u.items.findIndex(({ postId: e }) => e === t);
-			x.value = n >= 0 ? n : Math.min(x.value, Math.max(0, e - 1)), await m(), se();
+			x.value = n >= 0 ? n : Math.min(x.value, Math.max(0, e - 1)), await m(), ce();
 		}), O(F, (e) => {
 			e !== void 0 && d("activeChange", e);
 		}, { immediate: !0 }), y(() => {
-			window.addEventListener("resize", Z), window.addEventListener("orientationchange", Z), g >= 0 && m(se);
+			window.addEventListener("resize", X), window.addEventListener("orientationchange", X), g >= 0 && m(ce);
 		}), v(() => {
-			window.removeEventListener("resize", Z), window.removeEventListener("orientationchange", Z), A?.disconnect(), j !== null && cancelAnimationFrame(j), M !== null && clearTimeout(M);
+			window.removeEventListener("resize", X), window.removeEventListener("orientationchange", X), A?.disconnect(), j !== null && cancelAnimationFrame(j), M !== null && clearTimeout(M);
 		}), n({
 			activeIndex: x,
 			activePostId: F,
 			changeActiveMedia: de,
 			loadIfNearBottom: ue,
 			moveActivePost: fe,
-			navigateToItem: Q,
+			navigateToItem: pe,
 			transitionActiveMedia: _e,
 			transitionActivePost: ge
 		}), (n, r) => (b(), s("main", {
@@ -2423,7 +2456,7 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 				class: "gallery-shell reel-feed",
 				"data-active-post-id": F.value,
 				"data-active-media-index": R.value,
-				onScrollPassive: oe
+				onScrollPassive: se
 			}, [t.reelForward.status === "idle" ? (b(), s("section", {
 				key: 1,
 				class: "reel-track",
@@ -2438,13 +2471,13 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 				"fetch-priority": e,
 				index: i,
 				item: n,
-				"item-style": re(i),
+				"item-style": ie(i),
 				"media-card": t.mediaCard,
 				layout: "reel",
 				"loaded-count": t.items.length,
 				"media-index": t.mediaIndices.get(n.postId) ?? 0,
 				"media-source": t.mediaSource,
-				"preview-state": t.previewStates.get(E(G)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
+				"preview-state": t.previewStates.get(E(W)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
 				"reel-controls-target": p.value,
 				"reel-audio-state": t.reelAudioState,
 				"stationary-reel-controls": "",
@@ -2453,7 +2486,8 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 				onEnded: (e) => ye(n.postId, e),
 				onReady: (e) => d("ready", n.postId, e),
 				onReelAudioChange: r[1] ||= (e) => d("reelAudioChange", e),
-				onError: (e) => d("error", n.postId, e)
+				onError: (e) => d("error", n.postId, e),
+				onMediaError: (e) => d("mediaError", n.postId, e)
 			}, null, 8, [
 				"active",
 				"advance-on-media-end",
@@ -2472,19 +2506,20 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 				"onMediaChange",
 				"onEnded",
 				"onReady",
-				"onError"
+				"onError",
+				"onMediaError"
 			]))), 128))], 4)) : (b(), s("div", {
 				key: 0,
 				class: "reel-forward-status",
 				role: t.reelForward.status === "error" ? "alert" : "status",
 				"data-status": t.reelForward.status
-			}, [c("p", null, T(ne.value), 1), t.reelForward.status === "error" || t.reelForward.status === "end" ? (b(), s("button", {
+			}, [c("p", null, T(re.value), 1), t.reelForward.status === "error" || t.reelForward.status === "end" ? (b(), s("button", {
 				key: 0,
 				class: "reel-forward-retry",
 				type: "button",
 				disabled: t.loadMoreLocked,
 				onClick: r[0] ||= (e) => d("retryForward")
-			}, T(te.value ? "Load more" : "Retry"), 9, Cn)) : o("", !0)], 8, Sn)), t.reelForward.status === "idle" ? (b(), a(ae, {
+			}, T(ne.value ? "Load more" : "Retry"), 9, Cn)) : o("", !0)], 8, Sn)), t.reelForward.status === "idle" ? (b(), a(oe, {
 				key: 2,
 				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
@@ -2493,7 +2528,7 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 				"has-next": t.hasNext,
 				"is-loading": t.isLoadingMore,
 				"load-more-locked": t.loadMoreLocked,
-				"show-load-more": ee.value,
+				"show-load-more": J.value,
 				state: t.state,
 				onLoadMore: r[2] ||= (e) => d("loadMore"),
 				onRetryEnd: r[3] ||= (e) => d("retryEnd")
@@ -2535,10 +2570,10 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 				"style",
 				"total"
 			])) : o("", !0),
-			Y.value ? (b(), a(yn, {
-				key: q.value,
+			q.value ? (b(), a(yn, {
+				key: K.value,
 				"duration-ms": t.reelAutoAdvance.intervalMs,
-				label: J.value,
+				label: te.value,
 				onComplete: ve
 			}, null, 8, ["duration-ms", "label"])) : o("", !0)
 		], 2));
@@ -2590,6 +2625,7 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 		"activeChange",
 		"closeInfoSheet",
 		"error",
+		"mediaError",
 		"loadMore",
 		"mediaChange",
 		"ready",
@@ -2612,9 +2648,9 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 				item: e,
 				layout: "reel",
 				loadedCount: l.items.length,
-				mediaCount: H(e).length,
+				mediaCount: V(e).length,
 				mediaIndex: D.value,
-				mediaItem: W(e, D.value),
+				mediaItem: U(e, D.value),
 				mediaSource: l.mediaSource ?? "preview",
 				origin: l.origin,
 				total: l.total
@@ -2647,7 +2683,7 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 		function B(e, t) {
 			d("mediaChange", e, t);
 		}
-		function V(e, t) {
+		function ee(e, t) {
 			d("ready", e, t);
 		}
 		return O(() => ({
@@ -2705,12 +2741,13 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 			total: e.total,
 			onActiveChange: r[0] ||= (e) => d("activeChange", e),
 			onError: z,
-			onLoadMore: r[1] ||= (e) => d("loadMore"),
+			onMediaError: r[1] ||= (e, t) => d("mediaError", e, t),
+			onLoadMore: r[2] ||= (e) => d("loadMore"),
 			onMediaChange: B,
-			onReady: V,
-			onRetryEnd: r[2] ||= (e) => d("retryEnd"),
-			onRetryForward: r[3] ||= (e) => d("retryForward"),
-			onReelAudioChange: r[4] ||= (e) => d("reelAudioChange", e)
+			onReady: ee,
+			onRetryEnd: r[3] ||= (e) => d("retryEnd"),
+			onRetryForward: r[4] ||= (e) => d("retryForward"),
+			onReelAudioChange: r[5] ||= (e) => d("reelAudioChange", e)
 		}, null, 8, [
 			"can-retry-end",
 			"card-footer",
@@ -2753,7 +2790,7 @@ var vn = ["aria-label"], yn = /* @__PURE__ */ d({
 function Mn(e, t, n, r, i) {
 	let a = e.items.findIndex((e) => e.postId === t), o = e.items[a];
 	if (!o) return null;
-	let s = U(o, n), c = W(o, s);
+	let s = H(o, n), c = U(o, s);
 	return {
 		item: o,
 		layout: r,
@@ -2788,7 +2825,7 @@ function Pn(e, t) {
 		n.clear(), l.clear(), i.value = /* @__PURE__ */ new Map(), a.value = /* @__PURE__ */ new Map(), o.value = /* @__PURE__ */ new Map();
 	}
 	function d(e, t, n, r) {
-		let i = G(t, n);
+		let i = W(t, n);
 		e.value.get(i) !== r && (e.value = new Map(e.value).set(i, r));
 	}
 	function f(t, n, r, i) {
@@ -2798,32 +2835,39 @@ function Pn(e, t) {
 		let a = f(e, n, r, i);
 		a && t.ready(a);
 	}
-	function m(e, t) {
-		d(i, e, t, "error");
+	function m(n, r, i) {
+		let a = f(n, r.mediaIndex, i, i === "reel" ? e.reelOrigin ?? "reel" : null);
+		a && r.src && t.error({
+			...a,
+			...r
+		});
 	}
 	function h(e, t) {
-		d(i, e, t, "ready"), p(e, t, "masonry", null);
+		d(i, e, t, "error");
 	}
 	function g(e, t) {
+		d(i, e, t, "ready"), p(e, t, "masonry", null);
+	}
+	function _(e, t) {
 		d(s(), e, t, "error");
 	}
-	function _(t, n) {
+	function v(t, n) {
 		d(s(), t, n, "ready"), p(t, n, "reel", e.reelOrigin ?? "reel");
 	}
-	function v(e, n) {
-		let r = G(e, n);
+	function y(e, n) {
+		let r = W(e, n);
 		if (l.has(r)) return;
 		let i = f(e, n, "masonry", null);
 		i && (l.add(r), t.visible(i));
 	}
-	function y(e, r, i, a) {
-		let o = [i, G(e, r)].join(":");
+	function b(e, r, i, a) {
+		let o = [i, W(e, r)].join(":");
 		if (n.has(o)) return;
 		let s = f(e, r, i, a);
 		s && (n.add(o), t.fullyVisible(s));
 	}
-	function b(e, t) {
-		y(e, t, "masonry", null);
+	function x(e, t) {
+		b(e, t, "masonry", null);
 	}
 	return Nn(e, t.reelChange), O(() => {
 		let t = e.layout === "reel" || e.reelOrigin === "masonry" ? e.activeReelPostId : null, n = t === null ? 0 : e.mediaIndices.get(t) ?? 0;
@@ -2831,17 +2875,18 @@ function Pn(e, t) {
 			mediaIndex: n,
 			origin: e.reelOrigin ?? "reel",
 			postId: t,
-			ready: t !== null && c.value.get(G(t, n)) === "ready"
+			ready: t !== null && c.value.get(W(t, n)) === "ready"
 		};
 	}, (e, t) => {
-		e.postId === null || !e.ready || t?.ready && t.postId === e.postId && t.mediaIndex === e.mediaIndex && t.origin === e.origin || y(e.postId, e.mediaIndex, "reel", e.origin);
+		e.postId === null || !e.ready || t?.ready && t.postId === e.postId && t.mediaIndex === e.mediaIndex && t.origin === e.origin || b(e.postId, e.mediaIndex, "reel", e.origin);
 	}, { flush: "post" }), {
-		markMasonryFullyVisible: b,
-		markMasonryVisible: v,
-		markPreviewError: m,
-		markPreviewReady: h,
-		markReelError: g,
-		markReelReady: _,
+		markMediaError: m,
+		markMasonryFullyVisible: x,
+		markMasonryVisible: y,
+		markPreviewError: h,
+		markPreviewReady: g,
+		markReelError: _,
+		markReelReady: v,
 		originalStates: a,
 		previewStates: i,
 		reelStates: c,
@@ -2928,6 +2973,7 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 		"closeReel",
 		"loadMore",
 		"mediaFullyVisible",
+		"mediaError",
 		"mediaReady",
 		"mediaVisible",
 		"openReel",
@@ -2938,55 +2984,56 @@ var zn = 35, Bn = 420, Vn = /* @__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(() => J(l.state, T.value)), { markMasonryFullyVisible: A, markMasonryVisible: j, markPreviewError: M, markPreviewReady: N, markReelError: P, markReelReady: F, originalStates: I, previewStates: L, reelStates: R, resetMediaLifecycle: z } = Pn(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(() => te(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 } = Pn(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)
-		}), B = new Set(l.state.items.map((e) => e.postId)), V = null, W = null, G = !1;
+		}), ee = new Set(l.state.items.map((e) => e.postId)), U = null, W = null, G = !1;
 		function K() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
 		function q() {
-			V !== null && cancelAnimationFrame(V), V = requestAnimationFrame(() => {
-				V = requestAnimationFrame(() => {
-					V = null, y.value = /* @__PURE__ */ new Set();
+			U !== null && cancelAnimationFrame(U), U = requestAnimationFrame(() => {
+				U = requestAnimationFrame(() => {
+					U = null, y.value = /* @__PURE__ */ new Set();
 				});
 			});
 		}
-		function Y(e, t) {
+		function J(e, t) {
 			let n = l.state.items.find((t) => t.postId === e);
 			if (!n) return;
-			let r = U(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 ee() {
+		async function ne() {
 			await m(), (l.state.layout === "reel" || l.state.reelOrigin === "masonry" ? p.value : f.value)?.loadIfNearBottom();
 		}
-		function te(e) {
+		function re(e) {
 			return l.state.isLoading || l.state.items.length === 0 || l.state.layout !== "reel" && l.state.reelOrigin !== "masonry" ? !1 : p.value?.changeActiveMedia?.(e) ?? !1;
 		}
-		function ne(e) {
+		function ie(e) {
 			return l.state.isLoading || l.state.items.length === 0 || l.state.layout !== "reel" && l.state.reelOrigin !== "masonry" ? !1 : p.value?.moveActivePost?.(e) ?? !1;
 		}
-		function re(e) {
+		function ae(e) {
 			if (!(l.state.layout === "reel" || l.state.reelOrigin === "masonry") || l.state.isLoading) return "reel-inactive";
 			let t = l.state.items.find((t) => t.postId === e.postId);
 			if (!t) return "not-found";
-			let n = H(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 ie() {
+		function oe() {
 			return l.state.layout !== "masonry" || l.state.reelOrigin === "masonry" ? null : f.value?.getScrollElement?.() ?? null;
 		}
-		function ae(e, t) {
+		function se(e, t) {
 			W = e, G = t === "keyboard", d("openReel", e), m(() => h.value?.focus());
 		}
-		function oe(e) {
+		function ce(e) {
 			let t = g.value?.querySelectorAll(".masonry-feed [data-post-id]") ?? [];
 			return Array.from(t).find((t) => t.dataset.postId === String(e)) ?? null;
 		}
-		function se(e, t) {
+		function Y(e, t) {
 			if (l.state.layout !== "masonry" || l.state.reelOrigin !== null || K()) return 0;
 			let n = [...new Set(e)], r = new Set(Array.from(g.value?.querySelectorAll(".masonry-feed [data-post-id]") ?? [], (e) => e.dataset.postId)), i = n.filter((e) => r.has(String(e)));
 			if (i.length === 0) return 0;
@@ -2995,11 +3042,11 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 				a.set(e, t * o);
 			}), y.value = new Set([...y.value].filter((e) => !i.includes(e))), S.value = new Set([...S.value, ...n]), C.value = a, Bn + (i.length - 1) * o;
 		}
-		function ce() {
+		function X() {
 			S.value = /* @__PURE__ */ new Set(), C.value = /* @__PURE__ */ new Map();
 		}
 		async function Z(e, t) {
-			if (t.aborted || se(e, { staggerMs: 0 }) === 0 || (await m(), t.aborted)) return;
+			if (t.aborted || Y(e, { staggerMs: 0 }) === 0 || (await m(), t.aborted)) return;
 			let n = g.value?.querySelectorAll(".masonry-feed .media-card--leaving") ?? [], r = Array.from(n).flatMap((e) => (getComputedStyle(e).opacity, e.getAnimations?.().filter((e) => e.effect?.getTiming().iterations !== Infinity) ?? []));
 			await new Promise((e) => {
 				let n = () => {
@@ -3008,23 +3055,23 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 				t.addEventListener("abort", n, { once: !0 }), t.aborted ? n() : Promise.allSettled(r.map((e) => e.finished)).then(n);
 			});
 		}
-		function le(e, t) {
-			let n = oe(e), r = n?.querySelector(".media-card-activator") ?? n;
+		function ue(e, t) {
+			let n = ce(e), r = n?.querySelector(".media-card-activator") ?? n;
 			r && (r.classList.toggle("media-card-focus-silent", !t), t || r.addEventListener("blur", () => {
 				r.classList.remove("media-card-focus-silent");
 			}, { once: !0 }), r?.focus({ preventScroll: !0 }));
 		}
-		function ue() {
+		function de() {
 			l.state.reelOrigin === "masonry" && (W ??= l.state.activeReelPostId, _.value = !0, d("closeReel"));
 		}
-		function de() {
+		function fe() {
 			let e = W, t = G;
 			_.value = !1, W = null, G = !1, m(() => {
-				e !== null && le(e, t);
+				e !== null && ue(e, t);
 			});
 		}
 		return Rn({
-			closeMasonryReel: ue,
+			closeMasonryReel: de,
 			element: () => g.value,
 			isReelLeaving: () => _.value,
 			reelRenderer: () => p.value,
@@ -3034,8 +3081,8 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 			let e = l.state.items;
 			return [e, e.length];
 		}, ([e]) => {
-			let t = e.map((e) => e.postId), n = t.filter((e) => !B.has(e)), r = new Set(t);
-			if (B = new Set(t), S.value = new Set([...S.value].filter((e) => r.has(e))), C.value = new Map([...C.value].filter(([e]) => r.has(e))), n.length === 0 || K()) return;
+			let t = e.map((e) => e.postId), n = t.filter((e) => !ee.has(e)), r = new Set(t);
+			if (ee = new Set(t), S.value = new Set([...S.value].filter((e) => r.has(e))), C.value = new Map([...C.value].filter(([e]) => r.has(e))), n.length === 0 || K()) return;
 			let i = /* @__PURE__ */ new Map();
 			t.forEach((e) => {
 				let t = x.value.get(e);
@@ -3044,17 +3091,17 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 				i.set(e, t * zn);
 			}), x.value = i, y.value = new Set([...y.value, ...n]), q();
 		}, { flush: "sync" }), v(() => {
-			V !== null && cancelAnimationFrame(V);
+			U !== null && cancelAnimationFrame(U);
 		}), i({
 			animateItemRemoval: Z,
-			cancelItemRemoval: ce,
-			changeActiveReelMedia: te,
-			getAutoScrollElement: ie,
-			loadIfNearBottom: ee,
-			moveActiveReelPost: ne,
-			navigateToReelItem: re,
-			resetMediaLifecycle: z,
-			startItemRemoval: se,
+			cancelItemRemoval: X,
+			changeActiveReelMedia: re,
+			getAutoScrollElement: oe,
+			loadIfNearBottom: ne,
+			moveActiveReelPost: ie,
+			navigateToReelItem: ae,
+			resetMediaLifecycle: B,
+			startItemRemoval: Y,
 			transitionActiveReelMedia: (e) => p.value?.transitionActiveMedia?.(e) ?? Promise.resolve(!1),
 			transitionActiveReelPost: (e) => p.value?.transitionActivePost?.(e) ?? Promise.resolve(!1)
 		}), (r, i) => (b(), s("div", {
@@ -3086,7 +3133,7 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 			"info-sheet-overlay": t.state.reelInfoSheetOverlay,
 			"next-page-error": !!t.state.nextPageError,
 			origin: "reel",
-			"preview-states": E(R),
+			"preview-states": E(z),
 			"reel-auto-advance": t.state.reelAutoAdvance,
 			"reel-audio-state": t.reelAudioState,
 			"reel-forward": t.state.reelForward,
@@ -3094,21 +3141,22 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 			total: t.state.total,
 			onActiveChange: i[0] ||= (e) => d("activeReelChange", e),
 			onCloseInfoSheet: i[1] ||= (e) => d("reelInfoSheetChange", !1),
-			onError: E(P),
-			onLoadMore: i[2] ||= (e) => d("loadMore"),
-			onMediaChange: Y,
-			onReady: E(F),
-			onRetryEnd: i[3] ||= (e) => d("retryEnd"),
-			onRetryForward: i[4] ||= (e) => d("retryForward"),
-			onReelAudioChange: i[5] ||= (e) => d("reelAudioChange", e)
-		}, null, 8, /* @__PURE__ */ "can-retry-end.has-next.card-footer.card-header.feed-footer.feed-footer-actions.forward-index.forward-item.media-card.infinite-scroll.is-loading-more.items.load-more-locked.media-source.media-indices.initial-post-id.info-sheet.info-sheet-enabled.info-sheet-overlay.next-page-error.preview-states.reel-auto-advance.reel-audio-state.reel-forward.state.total.onError.onReady".split("."))) : t.state.error || t.state.isLoading || t.state.items.length === 0 && t.state.reelForward.status === "idle" ? (b(), a(X, {
+			onError: E(F),
+			onMediaError: i[2] ||= (e, t) => E(A)(e, t, "reel"),
+			onLoadMore: i[3] ||= (e) => d("loadMore"),
+			onMediaChange: J,
+			onReady: E(I),
+			onRetryEnd: i[4] ||= (e) => d("retryEnd"),
+			onRetryForward: i[5] ||= (e) => d("retryForward"),
+			onReelAudioChange: i[6] ||= (e) => d("reelAudioChange", e)
+		}, null, 8, /* @__PURE__ */ "can-retry-end.has-next.card-footer.card-header.feed-footer.feed-footer-actions.forward-index.forward-item.media-card.infinite-scroll.is-loading-more.items.load-more-locked.media-source.media-indices.initial-post-id.info-sheet.info-sheet-enabled.info-sheet-overlay.next-page-error.preview-states.reel-auto-advance.reel-audio-state.reel-forward.state.total.onError.onReady".split("."))) : t.state.error || t.state.isLoading || t.state.items.length === 0 && t.state.reelForward.status === "idle" ? (b(), a(le, {
 			key: 1,
 			actions: t.feedFooterActions,
 			"can-retry-end": t.canRetryEnd,
 			"feed-footer": t.feedFooter,
 			state: D.value,
-			onLoadMore: i[6] ||= (e) => d("loadMore"),
-			onRetryEnd: i[7] ||= (e) => d("retryEnd")
+			onLoadMore: i[7] ||= (e) => d("loadMore"),
+			onRetryEnd: i[8] ||= (e) => d("retryEnd")
 		}, null, 8, [
 			"actions",
 			"can-retry-end",
@@ -3135,21 +3183,22 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 			"load-more-locked": t.state.loadMoreLocked,
 			"media-indices": t.state.mediaIndices,
 			"next-page-error": !!t.state.nextPageError,
-			"preview-states": E(L),
+			"preview-states": E(R),
 			suspended: t.state.reelOrigin === "masonry" || _.value,
 			state: D.value,
 			total: t.state.total,
-			onActivate: ae,
-			onError: E(M),
-			onFullyVisible: E(A),
-			onLoadMore: i[8] ||= (e) => d("loadMore"),
-			onMediaChange: Y,
-			onReady: E(N),
-			onRetryEnd: i[9] ||= (e) => d("retryEnd"),
-			onVisible: E(j)
+			onActivate: se,
+			onError: E(N),
+			onMediaError: i[9] ||= (e, t) => E(A)(e, t, "masonry"),
+			onFullyVisible: E(j),
+			onLoadMore: i[10] ||= (e) => d("loadMore"),
+			onMediaChange: J,
+			onReady: E(P),
+			onRetryEnd: i[11] ||= (e) => d("retryEnd"),
+			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",
-			onAfterLeave: de
+			onAfterLeave: fe
 		}, {
 			default: k(() => [t.state.reelOrigin === "masonry" ? (b(), s("section", {
 				key: 0,
@@ -3184,21 +3233,22 @@ var zn = 35, Bn = 420, Vn = /* @__PURE__ */ d({
 				"media-source": "original",
 				"next-page-error": !!t.state.nextPageError,
 				origin: "masonry",
-				"preview-states": E(I),
+				"preview-states": E(L),
 				"reel-auto-advance": t.state.reelAutoAdvance,
 				"reel-audio-state": t.reelAudioState,
 				"reel-forward": t.state.reelForward,
 				state: D.value,
 				total: t.state.total,
-				onActiveChange: i[10] ||= (e) => d("activeReelChange", e),
-				onCloseInfoSheet: i[11] ||= (e) => d("reelInfoSheetChange", !1),
-				onError: E(P),
-				onLoadMore: i[12] ||= (e) => d("loadMore"),
-				onMediaChange: Y,
-				onReady: E(F),
-				onRetryEnd: i[13] ||= (e) => d("retryEnd"),
-				onRetryForward: i[14] ||= (e) => d("retryForward"),
-				onReelAudioChange: i[15] ||= (e) => d("reelAudioChange", e)
+				onActiveChange: i[12] ||= (e) => d("activeReelChange", e),
+				onCloseInfoSheet: i[13] ||= (e) => d("reelInfoSheetChange", !1),
+				onError: E(F),
+				onMediaError: i[14] ||= (e, t) => E(A)(e, t, "reel"),
+				onLoadMore: i[15] ||= (e) => d("loadMore"),
+				onMediaChange: J,
+				onReady: E(I),
+				onRetryEnd: i[16] ||= (e) => d("retryEnd"),
+				onRetryForward: i[17] ||= (e) => d("retryForward"),
+				onReelAudioChange: i[18] ||= (e) => d("reelAudioChange", e)
 			}, null, 8, /* @__PURE__ */ "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.onError.onReady".split("."))], 512)) : o("", !0)]),
 			_: 1
 		})], 64))], 512));
@@ -4331,7 +4381,7 @@ var ti = class {
 				let e = this.options.surface()?.getAutoScrollElement();
 				e && (e.scrollTop = 0);
 			}
-			e.mediaIndices = new Map(a.map((t) => [t.postId, U(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
 			});
@@ -4522,7 +4572,7 @@ var ui = class {
 		li(e);
 		let t = this.state.items.findIndex(({ postId: t }) => t === e.postId), n = this.state.items[t];
 		if (!n) return null;
-		let r = [...H(n)], i = r[e.mediaIndex];
+		let r = [...V(n)], i = r[e.mediaIndex];
 		if (!i) return null;
 		let a = Object.freeze({
 			media: i,
@@ -4561,7 +4611,7 @@ var ui = class {
 		return this.state.layout === "reel" || this.state.reelOrigin === "masonry";
 	}
 	restoreIntoPost(e, t) {
-		let n = this.state.items[e], r = [...H(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] = ci(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);
@@ -4569,7 +4619,7 @@ var ui = class {
 	updateMediaIndexAfterRemoval(e, t, n) {
 		let r = this.state.items.find((t) => t.postId === e);
 		if (!r) return;
-		let i = H(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));
 	}
 };
@@ -4801,7 +4851,7 @@ var mi = 20, hi = class {
 			if (!n) return;
 			let r = t.mediaIndices.get(e.postId) ?? 0;
 			if (e.mediaIndex === r) {
-				if (H(n).length > 1) {
+				if (V(n).length > 1) {
 					await this.options.transitionMedia(1);
 					return;
 				}
@@ -4970,7 +5020,7 @@ function Oi(e) {
 	return String(e);
 }
 function ki(e, t) {
-	let n = H(t).length;
+	let n = V(t).length;
 	(e.mediaIndices.get(t.postId) ?? 0) >= n && e.mediaIndices.set(t.postId, Math.max(0, n - 1));
 }
 function Ai(e, t) {
@@ -5015,7 +5065,7 @@ var ji = class {
 	constructor(e) {
 		this.options = e, Qr(e);
 		let t = e.layout ?? "masonry";
-		this.state = x(Yr(e, t)), this.reelAudio = new Ei(e), this.lastLoadedCursor = e.initialPage ? Kn(e.initialPage) : null, this.notificationItems = K(this.state), this.autoScroll = new yr({
+		this.state = x(Yr(e, t)), this.reelAudio = new Ei(e), this.lastLoadedCursor = e.initialPage ? Kn(e.initialPage) : null, this.notificationItems = G(this.state), this.autoScroll = new yr({
 			getScrollElement: () => this.surface?.getAutoScrollElement() ?? null,
 			state: this.state.autoScroll
 		}), this.autofillController = new pr({
@@ -5077,6 +5127,7 @@ var ji = class {
 			mediaCard: this.options.mediaCard,
 			masonry: this.options.masonry,
 			onMediaFullyVisible: this.options.onMediaFullyVisible,
+			onMediaError: this.options.onMediaError,
 			onMediaReady: this.options.onMediaReady,
 			onMediaVisible: this.options.onMediaVisible,
 			onReelMediaChange: this.options.onReelMediaChange,
@@ -5107,7 +5158,7 @@ var ji = class {
 		this.restoreController?.abort(), this.restoreController = null, this.autoScroll.destroy(), this.fillController.destroy(), this.cancelRequest(), this.reelForward.reset(), this.reelRemoval.reset(), this.exactMediaRemoval.reset(), this.itemRemoval.destroy(), this.removalReconciliation.reset(), this.responsiveLayout.destroy(), this.stopStateWatcher?.(), this.stopStateWatcher = null, this.app?.unmount(), this.app = null, this.surface = null;
 	}
 	getState() {
-		return J(this.state);
+		return te(this.state);
 	}
 	getReelAudioState() {
 		return this.reelAudio.get();
@@ -5369,7 +5420,7 @@ var ji = class {
 	}
 	startStateNotifications() {
 		let e = this.options.onStateChange;
-		!e || this.stopStateWatcher || (this.stopStateWatcher = q(this.state, this.notificationItems, e));
+		!e || this.stopStateWatcher || (this.stopStateWatcher = K(this.state, this.notificationItems, e));
 	}
 	setCurrentCursor(e) {
 		this.lastLoadedCursor = this.state.current = e;