@wyxos/vibe 5.7.1 → 5.8.0

package/lib/index.js

@@ -71,7 +71,7 @@ var B = {
 	key: 0,
 	class: "load-more-status",
 	role: "status"
-}, H = ["disabled"], ee = {
+}, ee = ["disabled"], H = {
 	key: 2,
 	class: "end-feed"
 }, U = ["disabled"], W = /* @__PURE__ */ d({
@@ -97,7 +97,7 @@ var B = {
 			type: "button",
 			disabled: e.loadMoreLocked,
 			onClick: i
-		}, T(e.hasError ? "Try again" : e.loadMoreLocked ? "Loading paused" : "Load more"), 9, H)) : (b(), s("div", ee, [n[1] ||= c("p", {
+		}, T(e.hasError ? "Try again" : e.loadMoreLocked ? "Loading paused" : "Load more"), 9, ee)) : (b(), s("div", H, [n[1] ||= c("p", {
 			class: "end-feed-message",
 			role: "status"
 		}, " You've reached the end. ", -1), c("button", {
@@ -108,7 +108,7 @@ var B = {
 			onClick: n[0] ||= (e) => t.$emit("retryEnd")
 		}, " Check for more ", 8, U)]))])) : o("", !0);
 	}
-}), te = /* @__PURE__ */ d({
+}), G = /* @__PURE__ */ d({
 	__name: "FeedFooter",
 	props: {
 		actions: {},
@@ -164,7 +164,7 @@ var B = {
 			"show-load-more"
 		]));
 	}
-}), G = ["role"], K = { class: "gallery-status" }, ne = /* @__PURE__ */ d({
+}), K = ["role"], q = { class: "gallery-status" }, te = /* @__PURE__ */ d({
 	__name: "FeedStatus",
 	props: {
 		actions: {},
@@ -178,7 +178,7 @@ var B = {
 		return (n, u) => (b(), s("main", {
 			class: "gallery-shell",
 			role: r.state.error ? "alert" : r.state.isLoading ? "status" : void 0
-		}, [c("p", K, [r.state.error ? (b(), s(e, { key: 0 }, [l(" Unable to load media. ")], 64)) : r.state.isLoading ? (b(), s(e, { key: 1 }, [l(" Loading media… ")], 64)) : (b(), s(e, { key: 2 }, [l(" No media found. ")], 64))]), t.feedFooter ? (b(), a(te, {
+		}, [c("p", q, [r.state.error ? (b(), s(e, { key: 0 }, [l(" Unable to load media. ")], 64)) : r.state.isLoading ? (b(), s(e, { key: 1 }, [l(" Loading media… ")], 64)) : (b(), s(e, { key: 2 }, [l(" No media found. ")], 64))]), t.feedFooter ? (b(), a(G, {
 			key: 0,
 			actions: t.actions,
 			"can-retry-end": t.canRetryEnd,
@@ -200,32 +200,32 @@ var B = {
 			"is-loading",
 			"load-more-locked",
 			"state"
-		])) : o("", !0)], 8, G));
+		])) : o("", !0)], 8, K));
 	}
 });
-function q(e) {
+function J(e) {
 	return e.scrollHeight - e.scrollTop - e.clientHeight <= 240;
 }
 //#endregion
 //#region src/core/masonry.ts
-function re(e) {
+function Y(e) {
 	let t = e.preview.width ?? e.width, n = e.preview.height ?? e.height;
 	return !t || !n || t <= 0 || n <= 0 ? 1 : n / t;
 }
-function J(e) {
+function ne(e) {
 	return e.reduce((t, n, r) => n < e[t] ? r : t, 0);
 }
-function ie(e) {
+function re(e) {
 	return Math.max(0, e.containerHeight) + Math.max(0, e.gap);
 }
-function ae(e, t, n) {
+function ie(e, t, n) {
 	if (t <= 0 || e.length === 0) return {
 		columns: 0,
 		height: 0,
 		items: []
 	};
 	let r = Math.max(0, n.gap), i = Number.isFinite(n.additionalHeight) ? Math.max(0, n.additionalHeight ?? 0) : 0, a = Math.max(1, n.minColumnWidth), o = Math.max(1, Math.floor((t + r) / (a + r))), s = (t - r * (o - 1)) / o, c = Array.from({ length: o }, () => 0), l = e.map((e) => {
-		let t = J(c), n = s * re(e) + i, a = {
+		let t = ne(c), n = s * Y(e) + i, a = {
 			x: t * (s + r),
 			y: c[t],
 			width: s,
@@ -241,7 +241,7 @@ function ae(e, t, n) {
 }
 //#endregion
 //#region src/core/masonryViewportIndex.ts
-function oe(e, t) {
+function ae(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	return e.forEach((e, r) => {
 		let i = n.get(e.x) ?? [];
@@ -252,7 +252,7 @@ function oe(e, t) {
 		}), n.set(e.x, i);
 	}), { columns: [...n.entries()].sort(([e], [t]) => e - t).map(([, e]) => e.sort((e, t) => e.top - t.top || e.index - t.index)) };
 }
-function Y(e, t) {
+function X(e, t) {
 	let n = 0, r = 0, i = e.length;
 	for (; r < i;) {
 		let a = Math.floor((r + i) / 2);
@@ -263,10 +263,10 @@ function Y(e, t) {
 		inspected: n
 	};
 }
-function X(e, t) {
+function oe(e, t) {
 	let n = Math.max(0, t.overscan), r = t.scrollTop - n, i = t.scrollTop + Math.max(0, t.viewportHeight) + n, a = [], o = 0;
 	return e.columns.forEach((e) => {
-		let t = Y(e, r);
+		let t = X(e, r);
 		o += t.inspected;
 		for (let n = t.index; n < e.length; n += 1) {
 			let t = e[n];
@@ -278,14 +278,14 @@ function X(e, t) {
 		inspected: o
 	};
 }
-function Z(e) {
+function se(e) {
 	return e?.minColumnWidth ?? 240;
 }
-function se(e, t) {
+function ce(e, t) {
 	let n = e?.overscan?.minimumPx ?? 800, r = e?.overscan?.viewportMultiplier ?? 1.5, i = Math.max(n, t * r), a = e?.overscan?.maximumPx;
 	return a === void 0 ? i : Math.min(i, a);
 }
-function ce(e) {
+function le(e) {
 	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) {
@@ -299,7 +299,7 @@ function ce(e) {
 }
 //#endregion
 //#region src/core/scrollbar.ts
-function le(e, t, n) {
+function Z(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
 function ue({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize: r, viewportSize: i }) {
@@ -311,23 +311,23 @@ function ue({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize:
 		thumbSize: o,
 		thumbTravel: 0
 	};
-	let l = le(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
+	let l = Z(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
 	return {
 		maximumScrollPosition: c,
 		scrollable: !0,
-		thumbOffset: u * (le(n, 0, c) / c),
+		thumbOffset: u * (Z(n, 0, c) / c),
 		thumbSize: l,
 		thumbTravel: u
 	};
 }
 //#endregion
 //#region src/components/GalleryScrollbar.vue?vue&type=script&setup=true&lang.ts
-var de = ["aria-hidden"], fe = [
+var Q = ["aria-hidden"], de = [
 	"aria-controls",
 	"aria-valuemax",
 	"aria-valuenow",
 	"tabindex"
-], pe = 32, me = 40, he = 120, ge = /* @__PURE__ */ d({
+], fe = 32, pe = 40, me = 120, he = /* @__PURE__ */ d({
 	__name: "GalleryScrollbar",
 	props: {
 		contentSize: {},
@@ -349,7 +349,7 @@ var de = ["aria-hidden"], fe = [
 		function k() {
 			g !== null && clearTimeout(g), g = setTimeout(() => {
 				g = null, o.value || (l.value = !1);
-			}, he);
+			}, me);
 		}
 		function A() {
 			l.value = !0, k();
@@ -358,7 +358,7 @@ var de = ["aria-hidden"], fe = [
 			let e = t.scrollElement, r = i.value;
 			return !e || !r ? n : ue({
 				contentSize: e.scrollHeight,
-				minimumThumbSize: pe,
+				minimumThumbSize: fe,
 				scrollPosition: e.scrollTop,
 				trackSize: r.clientHeight,
 				viewportSize: e.clientHeight
@@ -411,7 +411,7 @@ var de = ["aria-hidden"], fe = [
 		}
 		function z(e) {
 			if (!E.value) return;
-			let n = t.scrollElement?.clientHeight ?? 0, r = t.scrollElement?.scrollTop ?? 0, i = e.key === "ArrowUp" ? r - me : e.key === "ArrowDown" ? r + me : e.key === "PageUp" ? r - n : e.key === "PageDown" ? r + n : e.key === "Home" ? 0 : e.key === "End" ? a.value.maximumScrollPosition : null;
+			let n = t.scrollElement?.clientHeight ?? 0, r = t.scrollElement?.scrollTop ?? 0, i = e.key === "ArrowUp" ? r - pe : e.key === "ArrowDown" ? r + pe : 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 B(e) {
@@ -457,15 +457,15 @@ var de = ["aria-hidden"], fe = [
 			onPointerdown: I,
 			onPointermove: L,
 			onPointerup: R
-		}, null, 44, fe)], 42, de));
+		}, null, 44, de)], 42, Q));
 	}
-}), _e = (e) => {
+}), ge = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
 	return !1;
-}, ve = (e) => e === "", ye = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), be = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), xe = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), Se = (e) => {
-	let t = xe(e);
+}, _e = (e) => e === "", ve = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), ye = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), be = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), xe = (e) => {
+	let t = be(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
-}, Ce = {
+}, Se = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -475,27 +475,27 @@ var de = ["aria-hidden"], fe = [
 	"stroke-width": 2,
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, we = ({ name: e, iconNode: t, absoluteStrokeWidth: n, "absolute-stroke-width": r, strokeWidth: i, "stroke-width": a, size: o = Ce.width, color: s = Ce.stroke, ...c }, { slots: l }) => p("svg", {
-	...Ce,
+}, Ce = ({ name: e, iconNode: t, absoluteStrokeWidth: n, "absolute-stroke-width": r, strokeWidth: i, "stroke-width": a, size: o = Se.width, color: s = Se.stroke, ...c }, { slots: l }) => p("svg", {
+	...Se,
 	...c,
 	width: o,
 	height: o,
 	stroke: s,
-	"stroke-width": ve(n) || ve(r) || n === !0 || r === !0 ? Number(i || a || Ce["stroke-width"]) * 24 / Number(o) : i || a || Ce["stroke-width"],
-	class: ye("lucide", c.class, ...e ? [`lucide-${be(Se(e))}-icon`, `lucide-${be(e)}`] : ["lucide-icon"]),
-	...!l.default && !_e(c) && { "aria-hidden": "true" }
-}, [...t.map((e) => p(...e)), ...l.default ? [l.default()] : []]), Te = (e, t) => (n, { slots: r, attrs: i }) => p(we, {
+	"stroke-width": _e(n) || _e(r) || n === !0 || r === !0 ? Number(i || a || Se["stroke-width"]) * 24 / Number(o) : i || a || Se["stroke-width"],
+	class: ve("lucide", c.class, ...e ? [`lucide-${ye(xe(e))}-icon`, `lucide-${ye(e)}`] : ["lucide-icon"]),
+	...!l.default && !ge(c) && { "aria-hidden": "true" }
+}, [...t.map((e) => p(...e)), ...l.default ? [l.default()] : []]), we = (e, t) => (n, { slots: r, attrs: i }) => p(Ce, {
 	...i,
 	...n,
 	iconNode: t,
 	name: e
-}, r), Ee = Te("chevron-left", [["path", {
+}, r), Te = we("chevron-left", [["path", {
 	d: "m15 18-6-6 6-6",
 	key: "1wnfg3"
-}]]), De = Te("chevron-right", [["path", {
+}]]), Ee = we("chevron-right", [["path", {
 	d: "m9 18 6-6-6-6",
 	key: "mthhwq"
-}]]), Oe = Te("pause", [["rect", {
+}]]), De = we("pause", [["rect", {
 	x: "14",
 	y: "3",
 	width: "5",
@@ -509,10 +509,10 @@ var de = ["aria-hidden"], fe = [
 	height: "18",
 	rx: "1",
 	key: "1wsw3u"
-}]]), ke = Te("play", [["path", {
+}]]), Oe = we("play", [["path", {
 	d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
 	key: "10ikf1"
-}]]), Ae = Te("volume-2", [
+}]]), ke = we("volume-2", [
 	["path", {
 		d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
 		key: "uqj9uw"
@@ -525,7 +525,7 @@ var de = ["aria-hidden"], fe = [
 		d: "M19.364 18.364a9 9 0 0 0 0-12.728",
 		key: "ijwkga"
 	}]
-]), je = Te("volume-x", [
+]), Ae = we("volume-x", [
 	["path", {
 		d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
 		key: "uqj9uw"
@@ -544,22 +544,22 @@ var de = ["aria-hidden"], fe = [
 		y2: "15",
 		key: "5ykzw1"
 	}]
-]), Me = {
+]), je = {
 	401: "Authentication required",
 	403: "Access forbidden",
 	404: "Preview not found",
 	419: "Session expired",
 	500: "Server error"
 };
-function Ne(e) {
+function Me(e) {
 	return e.match(/\/demo-errors\/(401|403|404|419|500)\//)?.[1] ?? "Error";
 }
-function Pe(e) {
-	return Me[Ne(e)] ?? "Preview unavailable";
+function Ne(e) {
+	return je[Me(e)] ?? "Preview unavailable";
 }
 //#endregion
 //#region src/components/CardRegion.vue
-var Fe = /* @__PURE__ */ d({
+var Pe = /* @__PURE__ */ d({
 	__name: "CardRegion",
 	props: {
 		index: {},
@@ -606,18 +606,65 @@ var Fe = /* @__PURE__ */ d({
 			"total"
 		]))], 38));
 	}
-}), Ie = [
+}), Fe = ["aria-busy", "aria-label"], Ie = { class: "media-error-code" }, Le = ["disabled"], Re = /* @__PURE__ */ d({
+	__name: "MediaError",
+	props: {
+		component: {},
+		label: {},
+		retrying: { type: Boolean },
+		status: {}
+	},
+	emits: ["retry"],
+	setup(t, { emit: n }) {
+		let r = t, i = n;
+		function o() {
+			r.retrying || i("retry");
+		}
+		return (n, r) => (b(), s("div", {
+			"data-test": "media-error",
+			class: "media-error",
+			role: "group",
+			"aria-busy": t.retrying,
+			"aria-label": `${t.status} ${t.label}`
+		}, [t.component ? (b(), s("div", {
+			key: 0,
+			class: "media-error-component",
+			onClick: r[0] ||= j(() => {}, ["stop"]),
+			onKeydown: r[1] ||= j(() => {}, ["stop"])
+		}, [(b(), a(C(t.component), {
+			label: t.label,
+			retry: o,
+			retrying: t.retrying,
+			status: t.status
+		}, null, 8, [
+			"label",
+			"retrying",
+			"status"
+		]))], 32)) : (b(), s(e, { key: 1 }, [
+			c("strong", Ie, T(t.status), 1),
+			c("span", null, T(t.label), 1),
+			c("button", {
+				"data-test": "media-retry",
+				class: "media-error-retry",
+				type: "button",
+				disabled: t.retrying,
+				onClick: j(o, ["stop"]),
+				onKeydown: r[2] ||= j(() => {}, ["stop"])
+			}, T(t.retrying ? "Retrying…" : "Retry"), 41, Le)
+		], 64))], 8, Fe));
+	}
+}), ze = [
 	"max",
 	"value",
 	"aria-valuetext",
 	"disabled"
-], Le = {
+], Be = {
 	key: 0,
 	class: "media-controls-row"
-}, Re = ["aria-label", "title"], ze = { class: "media-controls-audio" }, Be = ["aria-label", "title"], Ve = ["value", "aria-valuetext"], He = {
+}, Ve = ["aria-label", "title"], He = { class: "media-controls-audio" }, Ue = ["aria-label", "title"], We = ["value", "aria-valuetext"], Ge = {
 	class: "media-control-time",
 	"aria-live": "off"
-}, Ue = /* @__PURE__ */ d({
+}, Ke = /* @__PURE__ */ d({
 	__name: "MediaControls",
 	props: {
 		currentTime: {},
@@ -665,35 +712,35 @@ var Fe = /* @__PURE__ */ d({
 			"aria-valuetext": `${u(p.value)} of ${u(f.value)}`,
 			disabled: f.value <= 0,
 			onInput: n[0] ||= (e) => i("seek", d(e))
-		}, null, 44, Ie), e.layout === "reel" ? (b(), s("div", Le, [
+		}, null, 44, ze), e.layout === "reel" ? (b(), s("div", Be, [
 			c("button", {
 				type: "button",
 				class: "media-control-button media-control-playback",
 				"aria-label": e.playing ? "Pause video" : "Play video",
 				title: e.playing ? "Pause" : "Play",
 				onClick: n[1] ||= (e) => i("togglePlayback")
-			}, [e.playing ? (b(), a(E(Oe), {
+			}, [e.playing ? (b(), a(E(De), {
 				key: 0,
 				size: 18,
 				fill: "currentColor"
-			})) : (b(), a(E(ke), {
+			})) : (b(), a(E(Oe), {
 				key: 1,
 				size: 18,
 				fill: "currentColor"
-			}))], 8, Re),
-			c("div", ze, [c("button", {
+			}))], 8, Ve),
+			c("div", He, [c("button", {
 				type: "button",
 				class: "media-control-button",
 				"aria-label": e.muted ? "Unmute video" : "Mute video",
 				title: e.muted ? "Unmute" : "Mute",
 				onClick: n[2] ||= (e) => i("toggleMute")
-			}, [e.muted || e.volume === 0 ? (b(), a(E(je), {
+			}, [e.muted || e.volume === 0 ? (b(), a(E(Ae), {
 				key: 0,
 				size: 18
-			})) : (b(), a(E(Ae), {
+			})) : (b(), a(E(ke), {
 				key: 1,
 				size: 18
-			}))], 8, Be), c("input", {
+			}))], 8, Ue), c("input", {
 				class: "media-control-range media-control-volume",
 				type: "range",
 				min: "0",
@@ -704,14 +751,77 @@ var Fe = /* @__PURE__ */ d({
 				"aria-label": "Video volume",
 				"aria-valuetext": `${Math.round(e.volume * 100)} percent`,
 				onInput: n[3] ||= (e) => i("volumeChange", d(e))
-			}, null, 44, Ve)]),
-			c("output", He, T(u(p.value)) + " / " + T(u(f.value)), 1)
+			}, null, 44, We)]),
+			c("output", Ge, T(u(p.value)) + " / " + T(u(f.value)), 1)
 		])) : o("", !0)], 34));
 	}
-});
+}), qe = {
+	lastAudibleVolume: 1,
+	muted: !1,
+	volume: 1
+};
+function Je(e, t) {
+	return typeof e == "number" && Number.isFinite(e) ? Math.min(1, Math.max(0, e)) : t;
+}
+function Ye(e, t = qe) {
+	let n = Je(e?.volume, t.volume), r = Je(e?.lastAudibleVolume, n > 0 ? n : t.lastAudibleVolume);
+	return {
+		lastAudibleVolume: r > 0 ? r : qe.lastAudibleVolume,
+		muted: typeof e?.muted == "boolean" ? e.muted : n === 0 || t.muted,
+		volume: n
+	};
+}
+//#endregion
+//#region src/components/useMediaCardAudio.ts
+function Xe(e) {
+	let t = Ye(e.reelAudioState()), n = e.layout() === "reel" && e.reelAudioState(), r = w(n ? t.muted : e.mediaCard()?.videoMuted ?? e.layout() === "masonry"), i = w(n ? t.volume : 1), a = n ? t.lastAudibleVolume : 1;
+	function o() {
+		let t = e.videoElement.value, n = e.reelAudioState();
+		if (!t || e.layout() !== "reel" || !n) return;
+		let o = Ye(n);
+		a = o.lastAudibleVolume, i.value = o.volume, r.value = o.muted, t.volume = o.volume, t.muted = e.active() === !1 ? !0 : o.muted;
+	}
+	function s(e, t) {
+		t && (r.value = e.muted), i.value = e.volume, e.volume > 0 && (a = e.volume);
+	}
+	function c(t) {
+		if (e.layout() !== "reel") return;
+		let n = Ye({
+			lastAudibleVolume: a,
+			muted: t.muted,
+			volume: t.volume
+		});
+		r.value = n.muted, i.value = n.volume, a = n.lastAudibleVolume, e.onChange(n);
+	}
+	function l(t) {
+		let n = e.videoElement.value;
+		if (!n || !Number.isFinite(t)) return;
+		let r = Math.min(1, Math.max(0, t));
+		n.volume = r, n.muted = r === 0, r > 0 && (a = r), s(n, !0), c(n);
+	}
+	function u() {
+		let t = e.videoElement.value;
+		t && (t.muted && t.volume === 0 && (t.volume = a), t.muted = !t.muted, s(t, !0), c(t));
+	}
+	return O([
+		e.active,
+		e.layout,
+		() => e.reelAudioState()?.lastAudibleVolume,
+		() => e.reelAudioState()?.muted,
+		() => e.reelAudioState()?.volume,
+		e.videoElement
+	], o, { immediate: !0 }), {
+		apply: o,
+		setVolume: l,
+		sync: s,
+		toggleMute: u,
+		videoIsMuted: r,
+		videoVolume: i
+	};
+}
 //#endregion
 //#region src/components/useReelVideoActivity.ts
-function We(e) {
+function Ze(e) {
 	let t = r(() => e.layout() !== "reel" || e.active() === !0), n = r(() => t.value ? e.videoIsMuted.value : !0);
 	function i() {
 		if (!t.value) {
@@ -745,21 +855,21 @@ function We(e) {
 }
 //#endregion
 //#region src/core/mediaType.ts
-var Ge = /\.(aac|flac|m4a|mp3|mp4|mov|ogg|opus|wav|webm)$/i;
-function Ke(e) {
+var Qe = /\.(aac|flac|m4a|mp3|mp4|mov|ogg|opus|wav|webm)$/i;
+function $e(e) {
 	try {
-		return Ge.test(new URL(e).pathname);
+		return Qe.test(new URL(e).pathname);
 	} catch {
-		return Ge.test(e.split("?")[0] ?? e);
+		return Qe.test(e.split("?")[0] ?? e);
 	}
 }
-function qe(e, t) {
-	return e === void 0 ? Ke(t) : e === "video";
+function et(e, t) {
+	return e === void 0 ? $e(t) : e === "video";
 }
 //#endregion
 //#region src/components/useMediaLoading.ts
-function Je(e) {
-	let t = r(() => qe(e.mediaType(), e.mediaSource())), n = r(() => e.layout() === "masonry" && e.fetchPriority() === "low" ? "lazy" : "eager"), i = r(() => e.layout() === "reel" && !e.active() ? "none" : e.fetchPriority() === "high" ? "auto" : e.layout() === "masonry" ? "none" : "metadata");
+function tt(e) {
+	let t = r(() => et(e.mediaType(), e.mediaSource())), n = r(() => e.layout() === "masonry" && e.fetchPriority() === "low" ? "lazy" : "eager"), i = r(() => e.layout() === "reel" && !e.active() ? "none" : e.fetchPriority() === "high" ? "auto" : e.layout() === "masonry" ? "none" : "metadata");
 	return O(i, (t, n) => {
 		n !== "none" || t === "none" || m(() => e.videoElement.value?.load());
 	}), {
@@ -770,64 +880,65 @@ function Je(e) {
 }
 //#endregion
 //#region src/components/useMediaReadiness.ts
-function Ye(e) {
-	let t = w(null), n = w(null), i = w(0), a = w(0), o = w(!0), s = w(!1), c = null, l = !1, u = r(() => s.value ? "error" : o.value ? "loading" : e.previewState());
-	function d() {
-		c !== null && clearTimeout(c), c = null;
+function nt(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() {
+		l !== null && clearTimeout(l), l = null;
 	}
-	function f(e) {
+	function p(e) {
 		return Number(e.currentTarget.dataset.sourceGeneration) === i.value;
 	}
-	function p() {
-		d(), c = setTimeout(() => _(), 15e3);
+	function h() {
+		f(), l = setTimeout(() => y(), 15e3);
 	}
-	function h(t) {
-		t && !f(t) || (d(), o.value = !1, s.value = !1, e.onReady(e.mediaIndex()));
+	function g(t) {
+		t && !p(t) || (f(), o.value = !1, s.value = !1, c.value = !1, e.onReady(e.mediaIndex()));
 	}
-	function g() {
+	function _() {
 		let e = t.value;
 		if (e?.complete) {
-			e.naturalWidth > 0 ? h() : _();
+			e.naturalWidth > 0 ? g() : y();
 			return;
 		}
 		let r = n.value;
 		if (r && r.readyState >= HTMLMediaElement.HAVE_METADATA) {
-			h();
+			g();
 			return;
 		}
-		p();
+		h();
 	}
-	function _(t) {
-		if (!(t && !f(t))) {
-			if (d(), !t && a.value === 0) {
-				a.value = 1, i.value += 1, o.value = !0, m(g);
+	function y(t) {
+		if (!(t && !p(t))) {
+			if (f(), !t && a.value === 0) {
+				a.value = 1, i.value += 1, o.value = !0, m(_);
 				return;
 			}
-			o.value = !1, s.value = !0, e.onError(e.mediaIndex());
+			o.value = !1, s.value = !0, c.value = !1, e.onError(e.mediaIndex());
 		}
 	}
-	function y() {
-		a.value = 0, s.value = !1, o.value = !0, i.value += 1, m(g);
+	function b() {
+		c.value || d.value !== "error" || (a.value = 0, s.value = !0, o.value = !0, c.value = !0, i.value += 1, m(_));
 	}
-	function b(e) {
-		f(e) && o.value && p();
+	function x(e) {
+		p(e) && o.value && h();
 	}
 	return O(e.identity, () => {
-		d(), i.value += 1, a.value = 0, o.value = l || e.previewState() === "loading", s.value = !1, l = !0, m(g);
-	}, { immediate: !0 }), v(d), {
-		effectivePreviewState: u,
-		failSourceAttempt: _,
+		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,
 		imageElement: t,
-		markSourceReady: h,
-		noteSourceActivity: b,
-		retrySource: y,
+		markSourceReady: g,
+		noteSourceActivity: x,
+		retrySource: b,
+		retrying: c,
 		sourceGeneration: i,
 		videoElement: n
 	};
 }
 //#endregion
 //#region src/components/MediaCard.vue?vue&type=script&setup=true&lang.ts
-var Xe = [
+var rt = [
 	"data-post-id",
 	"data-media-index",
 	"aria-hidden",
@@ -835,12 +946,12 @@ var Xe = [
 	"inert",
 	"role",
 	"tabindex"
-], Ze = { class: "media-card-content" }, Qe = ["data-media-direction"], $e = ["data-media-index"], et = {
+], it = { class: "media-card-content" }, at = ["data-media-direction"], ot = ["data-media-index"], st = {
 	key: 0,
 	"data-test": "media-loading",
 	class: "media-loading",
 	"aria-hidden": "true"
-}, tt = ["aria-label"], nt = { class: "media-error-code" }, rt = [
+}, ct = [
 	"data-source-generation",
 	"src",
 	"width",
@@ -849,14 +960,14 @@ var Xe = [
 	"loop",
 	"muted",
 	"preload"
-], it = [
+], lt = [
 	"data-source-generation",
 	"src",
 	"width",
 	"height",
 	"fetchpriority",
 	"loading"
-], at = ["aria-label"], ot = ["aria-label"], st = ["aria-label"], ct = 40, lt = 160, ut = 24, dt = /* @__PURE__ */ d({
+], ut = ["aria-label"], dt = ["aria-label"], ft = ["aria-label"], pt = 40, mt = 160, ht = 24, gt = /* @__PURE__ */ d({
 	__name: "MediaCard",
 	props: {
 		active: { type: Boolean },
@@ -877,6 +988,7 @@ var Xe = [
 		mediaSource: {},
 		previewState: {},
 		reelControlsTarget: {},
+		reelAudioState: {},
 		stationaryReelControls: { type: Boolean },
 		total: {}
 	},
@@ -885,137 +997,135 @@ var Xe = [
 		"ended",
 		"error",
 		"mediaChange",
-		"ready"
+		"ready",
+		"reelAudioChange"
 	],
 	setup(e, { emit: i }) {
 		let l = e, d = null, f = 0, p = !1, m = null, g = null, y = w("next"), x = i;
 		function S(e = !1, t = "pointer") {
 			e && x("activate", t);
 		}
-		let C = r(() => P(l.item)), D = r(() => F(l.item, l.mediaIndex)), O = r(() => I(l.item, D.value)), M = r(() => N(O.value, l.mediaSource ?? "preview")), L = r(() => M.value.src), R = r(() => M.value.type), z = r(() => M.value.width), B = r(() => M.value.height), { effectivePreviewState: V, failSourceAttempt: H, imageElement: ee, markSourceReady: U, noteSourceActivity: W, retrySource: te, sourceGeneration: G, videoElement: K } = Ye({
-			identity: () => `${l.item.postId}:${D.value}:${l.mediaSource ?? "preview"}:${L.value}:${R.value ?? ""}`,
-			mediaIndex: () => D.value,
+		let C = r(() => P(l.item)), T = r(() => F(l.item, l.mediaIndex)), D = r(() => I(l.item, T.value)), O = r(() => N(D.value, l.mediaSource ?? "preview")), M = r(() => O.value.src), L = r(() => O.value.type), R = r(() => O.value.width), z = r(() => O.value.height), { effectivePreviewState: B, failSourceAttempt: V, imageElement: ee, markSourceReady: H, noteSourceActivity: U, retrySource: W, retrying: G, sourceGeneration: K, videoElement: q } = nt({
+			identity: () => `${l.item.postId}:${T.value}:${l.mediaSource ?? "preview"}:${M.value}:${L.value ?? ""}`,
+			mediaIndex: () => T.value,
 			onError: (e) => x("error", e),
 			onReady: (e) => x("ready", e),
 			previewState: () => l.previewState
-		}), ne = w(0), q = w(0), re = w(l.mediaCard?.videoMuted ?? l.layout === "masonry"), J = w(!1), ie = w(1), ae = 1, { effectiveMuted: oe, onPlaying: Y, playbackAllowed: X } = We({
+		}), te = w(0), J = w(0), Y = w(!1), { apply: ne, setVolume: re, sync: ie, toggleMute: ae, videoIsMuted: X, videoVolume: oe } = Xe({
 			active: () => l.active,
 			layout: () => l.layout,
-			videoElement: K,
-			videoIsMuted: re,
-			videoIsPlaying: J
+			mediaCard: () => l.mediaCard,
+			onChange: (e) => x("reelAudioChange", e),
+			reelAudioState: () => l.reelAudioState,
+			videoElement: q
+		}), { effectiveMuted: se, onPlaying: ce, playbackAllowed: le } = Ze({
+			active: () => l.active,
+			layout: () => l.layout,
+			videoElement: q,
+			videoIsMuted: X,
+			videoIsPlaying: Y
 		}), Z = r(() => l.interactive && !!(l.cardHeader || l.cardFooter));
-		function se(e) {
+		function ue(e) {
 			return e.detail === 0 ? "keyboard" : "pointer";
 		}
-		function ce(e, t) {
+		function Q(e, t) {
 			let n = C.value.length, r = (e + n) % n;
-			r !== D.value && (y.value = e < D.value ? "previous" : "next", x("mediaChange", r), t && t.detail > 0 && t.currentTarget?.blur());
+			r !== T.value && (y.value = e < T.value ? "previous" : "next", x("mediaChange", r), t && t.detail > 0 && t.currentTarget?.blur());
 		}
-		function le(e, t, n) {
+		function de(e, t, n) {
 			return t === 1 ? e * 16 : t === 2 ? e * n : e;
 		}
-		function ue() {
+		function fe() {
 			f = 0, p = !1, d !== null && clearTimeout(d), d = null;
 		}
-		function de() {
-			d !== null && clearTimeout(d), d = setTimeout(ue, lt);
+		function pe() {
+			d !== null && clearTimeout(d), d = setTimeout(fe, mt);
 		}
-		function fe(e) {
+		function me(e) {
 			if (C.value.length <= 1) return;
-			let t = e.currentTarget?.clientWidth || 1, n = le(e.deltaX, e.deltaMode, t);
-			if (n === 0 || (e.preventDefault(), de(), p) || (f += n, Math.abs(f) < ut)) return;
+			let t = e.currentTarget?.clientWidth || 1, n = de(e.deltaX, e.deltaMode, t);
+			if (n === 0 || (e.preventDefault(), pe(), p) || (f += n, Math.abs(f) < ht)) return;
 			let r = Math.sign(f);
-			f = 0, p = !0, ce(D.value + r);
+			f = 0, p = !0, Q(T.value + r);
 		}
-		function pe(e) {
+		function he(e) {
 			let t = e.touches[0];
 			l.layout !== "reel" || !t || (m = t.clientX, g = t.clientY);
 		}
-		function me(e) {
+		function ge(e) {
 			let t = e.changedTouches[0];
 			if (m === null || g === null || !t) return;
 			let n = m - t.clientX, r = g - t.clientY;
-			m = null, g = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < ct || ce(D.value + Math.sign(n)));
+			m = null, g = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < pt || Q(T.value + Math.sign(n)));
 		}
-		let { imageLoading: he, mediaIsTimed: ge, videoPreload: _e } = Je({
+		let { imageLoading: _e, mediaIsTimed: ve, videoPreload: ye } = tt({
 			active: () => l.active,
 			fetchPriority: () => l.fetchPriority,
 			layout: () => l.layout,
-			mediaSource: () => L.value,
-			mediaType: () => R.value,
-			videoElement: K
-		}), ve = r(() => l.layout === "reel" && l.stationaryReelControls === !0), ye = r(() => ge.value && V.value === "ready" && (!ve.value || !!(l.active && l.reelControlsTarget))), be = r(() => `${l.item.postId}:${D.value}:${L.value}`);
-		function xe(e) {
-			l.layout === "reel" && (e.stopPropagation(), Se());
+			mediaSource: () => M.value,
+			mediaType: () => L.value,
+			videoElement: q
+		}), be = r(() => l.layout === "reel" && l.stationaryReelControls === !0), xe = r(() => ve.value && B.value === "ready" && (!be.value || !!(l.active && l.reelControlsTarget))), Se = r(() => `${l.item.postId}:${T.value}:${M.value}`);
+		function Ce(e) {
+			l.layout === "reel" && (e.stopPropagation(), we());
 		}
-		async function Se() {
-			if (!(!K.value || !X.value)) {
-				if (J.value) {
-					K.value.pause();
+		async function we() {
+			if (!(!q.value || !le.value)) {
+				if (Y.value) {
+					q.value.pause();
 					return;
 				}
 				try {
-					await K.value.play();
+					await q.value.play();
 				} catch {
-					J.value = !1;
+					Y.value = !1;
 				}
 			}
 		}
-		function Ce(e) {
+		function De(e) {
 			return Number.isFinite(e) ? Math.max(0, e) : 0;
 		}
-		function we(e) {
-			let t = e?.currentTarget ?? K.value;
-			t && (ne.value = Ce(t.currentTime), q.value = Ce(t.duration), X.value && (re.value = t.muted), ie.value = t.volume, t.volume > 0 && (ae = t.volume));
-		}
-		function Te(e) {
-			we(e), U(e);
-		}
-		function Oe() {
-			J.value = !1, x("ended", D.value);
+		function Oe(e) {
+			let t = e?.currentTarget ?? q.value;
+			t && (te.value = De(t.currentTime), J.value = De(t.duration), ie(t, le.value));
 		}
 		function ke(e) {
-			let t = K.value;
-			!t || !Number.isFinite(e) || (t.currentTime = Math.min(Ce(t.duration), Math.max(0, e)), ne.value = t.currentTime);
+			ne(), Oe(e), H(e);
 		}
-		function Ae(e) {
-			let t = K.value;
-			if (!t || !Number.isFinite(e)) return;
-			let n = Math.min(1, Math.max(0, e));
-			t.volume = n, t.muted = n === 0, n > 0 && (ae = n), we();
+		function Ae() {
+			Y.value = !1, x("ended", T.value);
 		}
-		function je() {
-			let e = K.value;
-			e && (e.muted && e.volume === 0 && (e.volume = ae), e.muted = !e.muted, we());
+		function je(e) {
+			let t = q.value;
+			!t || !Number.isFinite(e) || (t.currentTime = Math.min(De(t.duration), Math.max(0, e)), te.value = t.currentTime);
 		}
 		return v(() => {
-			ue();
+			fe();
 		}), (r, i) => (b(), s("article", {
 			"data-post-id": e.item.postId,
-			"data-media-index": D.value,
+			"data-media-index": T.value,
 			class: h(["media-card", {
 				"media-card--entering": e.entering,
 				"media-card--leaving": e.leaving,
-				"media-card--error": E(V) === "error",
+				"media-card--error": E(B) === "error",
 				"media-card--transparent-chrome": e.mediaCard?.header?.background === "transparent" || e.mediaCard?.footer?.background === "transparent" || e.cardHeader?.background === "transparent" || e.cardFooter?.background === "transparent"
 			}]),
 			style: _(e.itemStyle),
 			"aria-hidden": e.leaving || void 0,
-			"aria-busy": E(V) === "loading",
+			"aria-busy": E(B) === "loading" || E(G),
 			inert: e.leaving || void 0,
 			role: e.interactive && !e.leaving && !Z.value ? "button" : void 0,
 			tabindex: e.interactive && !e.leaving && !Z.value ? 0 : void 0,
-			onClick: i[15] ||= (t) => S(e.interactive && !Z.value, se(t)),
-			onKeydown: [i[16] ||= A((t) => S(e.interactive && !Z.value, "keyboard"), ["enter"]), i[17] ||= A(j((t) => S(e.interactive && !Z.value, "keyboard"), ["prevent"]), ["space"])]
-		}, [c("div", Ze, [
-			e.cardHeader ? (b(), a(Fe, {
+			onClick: i[14] ||= (t) => S(e.interactive && !Z.value, ue(t)),
+			onKeydown: [i[15] ||= A((t) => S(e.interactive && !Z.value, "keyboard"), ["enter"]), i[16] ||= A(j((t) => S(e.interactive && !Z.value, "keyboard"), ["prevent"]), ["space"])]
+		}, [c("div", it, [
+			e.cardHeader ? (b(), a(Pe, {
 				key: 0,
 				index: e.index,
 				item: e.item,
 				layout: e.layout,
 				"loaded-count": e.loadedCount,
-				"media-index": D.value,
+				"media-index": T.value,
 				"media-source": e.mediaSource,
 				placement: "header",
 				region: e.cardHeader,
@@ -1035,96 +1145,98 @@ var Xe = [
 			c("div", {
 				class: h(["media-card-media", { "media-card-media--carousel": e.layout === "reel" && C.value.length > 1 }]),
 				"data-media-direction": y.value,
-				onWheel: fe,
-				onTouchstartPassive: pe,
-				onTouchendPassive: me
+				onWheel: me,
+				onTouchstartPassive: he,
+				onTouchendPassive: ge
 			}, [
-				u(n, { name: `media-slide-${y.value}` }, {
+				u(n, {
+					css: !E(G),
+					name: `media-slide-${y.value}`
+				}, {
 					default: k(() => [(b(), s("div", {
-						key: `${e.item.postId}:${O.value.src}:${e.mediaSource ?? "preview"}:${E(G)}`,
+						key: `${e.item.postId}:${D.value.src}:${e.mediaSource ?? "preview"}:${E(K)}`,
 						class: "media-card-frame",
-						"data-media-index": D.value
-					}, [E(V) === "loading" ? (b(), s("div", et, [...i[18] ||= [c("span", { class: "media-loading-shimmer" }, null, -1)]])) : E(V) === "error" ? (b(), s("div", {
+						"data-media-index": T.value
+					}, [E(B) === "loading" ? (b(), s("div", st, [...i[17] ||= [c("span", { class: "media-loading-shimmer" }, null, -1)]])) : E(B) === "error" ? (b(), a(Re, {
 						key: 1,
-						"data-test": "media-error",
-						class: "media-error",
-						role: "img",
-						"aria-label": `${E(Ne)(L.value)} ${E(Pe)(L.value)}`
-					}, [
-						c("strong", nt, T(E(Ne)(L.value)), 1),
-						c("span", null, T(E(Pe)(L.value)), 1),
-						c("button", {
-							type: "button",
-							"data-test": "media-retry",
-							onClick: i[0] ||= j((...e) => E(te) && E(te)(...e), ["stop"])
-						}, "Retry")
-					], 8, tt)) : o("", !0), E(ge) ? (b(), s("video", {
+						component: e.mediaCard?.error?.component,
+						label: E(Ne)(M.value),
+						retrying: E(G),
+						status: E(Me)(M.value),
+						onRetry: E(W)
+					}, null, 8, [
+						"component",
+						"label",
+						"retrying",
+						"status",
+						"onRetry"
+					])) : o("", !0), E(ve) ? (b(), s("video", {
 						key: 2,
 						ref_key: "videoElement",
-						ref: K,
-						"data-source-generation": E(G),
+						ref: q,
+						"data-source-generation": E(K),
 						class: h(["media-preview", {
-							"media-preview--ready": E(V) === "ready",
+							"media-preview--ready": E(B) === "ready",
 							"media-preview--reel-video": e.layout === "reel"
 						}]),
-						src: L.value,
-						width: z.value ?? void 0,
-						height: B.value ?? void 0,
-						autoplay: E(X),
+						src: M.value,
+						width: R.value ?? void 0,
+						height: z.value ?? void 0,
+						autoplay: E(le),
 						loop: !e.advanceOnMediaEnd,
-						muted: E(oe),
+						muted: E(se),
 						playsinline: "",
-						preload: E(_e),
-						onLoadedmetadata: Te,
-						onProgress: i[1] ||= (...e) => E(W) && E(W)(...e),
-						onLoadeddata: i[2] ||= (...e) => E(W) && E(W)(...e),
-						onCanplay: i[3] ||= (...e) => E(W) && E(W)(...e),
-						onDurationchange: we,
-						onTimeupdate: we,
-						onVolumechange: we,
-						onPlaying: i[4] ||= (...e) => E(Y) && E(Y)(...e),
-						onPause: i[5] ||= (e) => J.value = !1,
-						onEnded: Oe,
-						onClick: xe,
-						onError: i[6] ||= (...e) => E(H) && E(H)(...e)
-					}, null, 42, rt)) : (b(), s("img", {
+						preload: E(ye),
+						onLoadedmetadata: ke,
+						onProgress: i[0] ||= (...e) => E(U) && E(U)(...e),
+						onLoadeddata: i[1] ||= (...e) => E(U) && E(U)(...e),
+						onCanplay: i[2] ||= (...e) => E(U) && E(U)(...e),
+						onDurationchange: Oe,
+						onTimeupdate: Oe,
+						onVolumechange: Oe,
+						onPlaying: i[3] ||= (...e) => E(ce) && E(ce)(...e),
+						onPause: i[4] ||= (e) => Y.value = !1,
+						onEnded: Ae,
+						onClick: Ce,
+						onError: i[5] ||= (...e) => E(V) && E(V)(...e)
+					}, null, 42, ct)) : (b(), s("img", {
 						key: 3,
 						ref_key: "imageElement",
 						ref: ee,
-						"data-source-generation": E(G),
-						class: h(["media-preview", { "media-preview--ready": E(V) === "ready" }]),
-						src: L.value,
-						width: z.value ?? void 0,
-						height: B.value ?? void 0,
+						"data-source-generation": E(K),
+						class: h(["media-preview", { "media-preview--ready": E(B) === "ready" }]),
+						src: M.value,
+						width: R.value ?? void 0,
+						height: z.value ?? void 0,
 						fetchpriority: e.fetchPriority,
 						alt: "",
 						decoding: "async",
-						loading: E(he),
-						onLoad: i[7] ||= (...e) => E(U) && E(U)(...e),
-						onError: i[8] ||= (...e) => E(H) && E(H)(...e)
-					}, null, 42, it))], 8, $e))]),
+						loading: E(_e),
+						onLoad: i[6] ||= (...e) => E(H) && E(H)(...e),
+						onError: i[7] ||= (...e) => E(V) && E(V)(...e)
+					}, null, 42, lt))], 8, ot))]),
 					_: 1
-				}, 8, ["name"]),
+				}, 8, ["css", "name"]),
 				(b(), a(t, {
-					disabled: !ve.value || !e.reelControlsTarget,
+					disabled: !be.value || !e.reelControlsTarget,
 					to: e.reelControlsTarget ?? "body"
 				}, [u(n, {
 					name: "vibe-reel-media-controls",
-					css: ve.value
+					css: be.value
 				}, {
-					default: k(() => [ye.value ? (b(), a(Ue, {
-						key: be.value,
-						"current-time": ne.value,
-						"data-control-post-id": ve.value ? e.item.postId : void 0,
-						duration: q.value,
+					default: k(() => [xe.value ? (b(), a(Ke, {
+						key: Se.value,
+						"current-time": te.value,
+						"data-control-post-id": be.value ? e.item.postId : void 0,
+						duration: J.value,
 						layout: e.layout,
-						muted: re.value,
-						playing: J.value,
-						volume: ie.value,
-						onSeek: ke,
-						onToggleMute: je,
-						onTogglePlayback: Se,
-						onVolumeChange: Ae
+						muted: E(X),
+						playing: Y.value,
+						volume: E(oe),
+						onSeek: je,
+						onToggleMute: E(ae),
+						onTogglePlayback: we,
+						onVolumeChange: E(re)
 					}, null, 8, [
 						"current-time",
 						"data-control-post-id",
@@ -1132,7 +1244,9 @@ var Xe = [
 						"layout",
 						"muted",
 						"playing",
-						"volume"
+						"volume",
+						"onToggleMute",
+						"onVolumeChange"
 					])) : o("", !0)]),
 					_: 1
 				}, 8, ["css"])], 8, ["disabled", "to"])),
@@ -1144,31 +1258,31 @@ var Xe = [
 					type: "button",
 					class: "media-carousel-control media-carousel-control--previous",
 					"aria-label": `Previous media for post ${e.item.postId}`,
-					onClick: i[9] ||= j((e) => ce(D.value - 1, e), ["stop"]),
-					onKeydown: i[10] ||= j(() => {}, ["stop"])
-				}, [u(E(Ee), { size: 20 })], 40, at), c("button", {
+					onClick: i[8] ||= j((e) => Q(T.value - 1, e), ["stop"]),
+					onKeydown: i[9] ||= j(() => {}, ["stop"])
+				}, [u(E(Te), { size: 20 })], 40, ut), c("button", {
 					type: "button",
 					class: "media-carousel-control media-carousel-control--next",
 					"aria-label": `Next media for post ${e.item.postId}`,
-					onClick: i[11] ||= j((e) => ce(D.value + 1, e), ["stop"]),
-					onKeydown: i[12] ||= j(() => {}, ["stop"])
-				}, [u(E(De), { size: 20 })], 40, ot)], 2)) : o("", !0),
+					onClick: i[10] ||= j((e) => Q(T.value + 1, e), ["stop"]),
+					onKeydown: i[11] ||= j(() => {}, ["stop"])
+				}, [u(E(Ee), { size: 20 })], 40, dt)], 2)) : o("", !0),
 				Z.value ? (b(), s("button", {
 					key: 1,
 					class: "media-card-activator",
 					type: "button",
 					"aria-label": `Open post ${e.item.postId}`,
-					onClick: i[13] ||= j((e) => r.$emit("activate", se(e)), ["stop"]),
-					onKeydown: i[14] ||= j(() => {}, ["stop"])
-				}, null, 40, st)) : o("", !0)
-			], 42, Qe),
-			e.cardFooter ? (b(), a(Fe, {
+					onClick: i[12] ||= j((e) => r.$emit("activate", ue(e)), ["stop"]),
+					onKeydown: i[13] ||= j(() => {}, ["stop"])
+				}, null, 40, ft)) : o("", !0)
+			], 42, at),
+			e.cardFooter ? (b(), a(Pe, {
 				key: 1,
 				index: e.index,
 				item: e.item,
 				layout: e.layout,
 				"loaded-count": e.loadedCount,
-				"media-index": D.value,
+				"media-index": T.value,
 				"media-source": e.mediaSource,
 				placement: "footer",
 				region: e.cardFooter,
@@ -1185,12 +1299,12 @@ var Xe = [
 				"style",
 				"total"
 			])) : o("", !0)
-		])], 46, Xe));
+		])], 46, rt));
 	}
-}), ft = { class: "masonry-feed-shell" }, pt = ["aria-hidden", "inert"], mt = {
+}), _t = { class: "masonry-feed-shell" }, vt = ["aria-hidden", "inert"], yt = {
 	key: 0,
 	class: "masonry-feed-status-overlay"
-}, ht = 6, gt = 12, _t = 250, vt = /* @__PURE__ */ d({
+}, bt = 6, xt = 12, St = 250, Ct = /* @__PURE__ */ d({
 	__name: "MasonryFeed",
 	props: {
 		enteringPostIds: {},
@@ -1213,6 +1327,7 @@ var Xe = [
 		mediaIndices: {},
 		nextPageError: { type: Boolean },
 		previewStates: {},
+		reelAudioState: {},
 		state: {},
 		total: {}
 	},
@@ -1226,19 +1341,19 @@ var Xe = [
 		"visible"
 	],
 	setup(t, { expose: n, emit: i }) {
-		let l = 0, d = t, f = i, p = w(null), m = `vibe-masonry-${D()}`, g = w(null), y = w(0), x = w(ht), C = w(0), T = w(0), k = w(0), A = w([]), j = w([]), M = 0, N = null, P = null, F = null, I = null, R = r(() => ae(d.items, y.value, {
+		let l = 0, d = t, f = i, p = w(null), m = `vibe-masonry-${D()}`, g = w(null), y = w(0), x = w(bt), C = w(0), T = w(0), k = w(0), A = w([]), j = w([]), M = 0, N = null, P = null, F = null, I = null, R = r(() => ie(d.items, y.value, {
 			additionalHeight: (d.cardHeader?.height ?? 0) + (d.cardFooter?.height ?? 0),
 			gap: x.value,
-			minColumnWidth: Z(d.masonry)
+			minColumnWidth: se(d.masonry)
 		})), z = r(() => {
 			if (d.leavingPostIds.size === 0) return null;
 			let e = d.items.flatMap((e, t) => d.leavingPostIds.has(e.postId) ? [] : [{
 				index: t,
 				item: e
-			}]), t = ae(e.map(({ item: e }) => e), y.value, {
+			}]), t = ie(e.map(({ item: e }) => e), y.value, {
 				additionalHeight: (d.cardHeader?.height ?? 0) + (d.cardFooter?.height ?? 0),
 				gap: x.value,
-				minColumnWidth: Z(d.masonry)
+				minColumnWidth: se(d.masonry)
 			});
 			return {
 				indices: e.map(({ index: e }) => e),
@@ -1251,50 +1366,50 @@ var Xe = [
 				...t.layout,
 				items: d.items.map((n, r) => d.leavingPostIds.has(n.postId) ? e.items[r] : t.positions.get(n.postId) ?? e.items[r])
 			} : e;
-		}), V = r(() => oe(R.value.items)), H = r(() => {
+		}), V = r(() => ae(R.value.items)), ee = r(() => {
 			let e = z.value;
-			return e ? oe(e.layout.items, e.indices) : null;
-		}), ee = r(() => Math.max(T.value, d.leavingPostIds.size === 0 ? B.value.height : R.value.height)), U = r(() => ({ height: `${ee.value}px` })), W = r(() => !d.infiniteScroll || C.value > 0 && k.value + B.value.height <= C.value + 1), G = r(() => new Set(A.value)), K = r(() => j.value.flatMap((e) => {
+			return e ? ae(e.layout.items, e.indices) : null;
+		}), H = r(() => Math.max(T.value, d.leavingPostIds.size === 0 ? B.value.height : R.value.height)), U = r(() => ({ height: `${H.value}px` })), W = r(() => !d.infiniteScroll || C.value > 0 && k.value + B.value.height <= C.value + 1), K = r(() => new Set(A.value)), q = r(() => j.value.flatMap((e) => {
 			let t = d.items[e];
 			return t ? [{
-				fetchPriority: G.value.has(e) ? "high" : "low",
+				fetchPriority: K.value.has(e) ? "high" : "low",
 				index: e,
 				item: t
 			}] : [];
 		}));
-		function ne(e, t) {
+		function te(e, t) {
 			return [...new Set([...e, ...t])].sort((e, t) => e - t);
 		}
-		function re(e, t) {
+		function Y(e, t) {
 			return e.length === t.length && e.every((e, n) => e === t[n]);
 		}
-		function J(e) {
+		function ne(e) {
 			let t = {
 				scrollTop: M - k.value,
 				viewportHeight: C.value
-			}, n = H.value, r = X(n ?? V.value, {
+			}, n = ee.value, r = oe(n ?? V.value, {
 				...t,
 				overscan: e
 			}).indices;
-			return ne(r, d.leavingPostIds.size === 0 ? [] : X(V.value, {
+			return te(r, d.leavingPostIds.size === 0 ? [] : oe(V.value, {
 				...t,
 				overscan: e
 			}).indices);
 		}
-		function Y() {
-			let e = J(0), t = J(se(d.masonry, C.value));
-			re(A.value, e) || (A.value = e), re(j.value, t) || (j.value = t);
+		function X() {
+			let e = ne(0), t = ne(ce(d.masonry, C.value));
+			Y(A.value, e) || (A.value = e), Y(j.value, t) || (j.value = t);
 		}
-		function ce() {
+		function le() {
 			if (I !== null) return;
 			I = -1;
 			let e = requestAnimationFrame(() => {
-				I = null, Y();
+				I = null, X();
 			});
 			I !== null && (I = e);
 		}
-		let le = /* @__PURE__ */ new Set();
-		O(() => [...G.value].flatMap((e) => {
+		let Z = /* @__PURE__ */ new Set();
+		O(() => [...K.value].flatMap((e) => {
 			let t = d.items[e];
 			if (!t) return [];
 			let n = d.mediaIndices.get(t.postId) ?? 0, r = L(t.postId, n);
@@ -1306,8 +1421,8 @@ var Xe = [
 		}), (e) => {
 			let t = new Set(e.map(({ key: e }) => e));
 			e.forEach(({ key: e, mediaIndex: t, postId: n }) => {
-				le.has(e) || f("visible", n, t);
-			}), le = t;
+				Z.has(e) || f("visible", n, t);
+			}), Z = t;
 		}, {
 			immediate: !0,
 			flush: "post"
@@ -1315,7 +1430,7 @@ var Xe = [
 		function ue(e) {
 			let t = B.value.items[e], n = d.items[e]?.postId;
 			if (!t) return {};
-			let r = n !== void 0 && d.enteringPostIds.has(n), i = n !== void 0 && d.leavingPostIds.has(n), a = r || i ? ie({
+			let r = n !== void 0 && d.enteringPostIds.has(n), i = n !== void 0 && d.leavingPostIds.has(n), a = r || i ? re({
 				containerHeight: Math.max(T.value, R.value.height),
 				gap: x.value
 			}) : 0, o = n === void 0 ? 0 : i ? d.removalDelays.get(n) ?? 0 : r ? d.entryDelays.get(n) ?? 0 : 0;
@@ -1326,52 +1441,52 @@ var Xe = [
 				transform: `translate3d(${t.x}px, ${t.y + a}px, 0)`
 			};
 		}
-		function de() {
+		function Q() {
 			let e = p.value;
 			if (!e) return;
 			M = e.scrollTop, C.value = e.clientHeight;
 			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, Y());
+			r && (k.value = r.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop, X());
 		}
-		function fe(e) {
+		function de(e) {
 			let t = e.ownerDocument.documentElement.clientWidth;
-			y.value = e.clientWidth, x.value = Math.min(gt, Math.max(ht, t * .0075)), de();
+			y.value = e.clientWidth, x.value = Math.min(xt, Math.max(bt, t * .0075)), Q();
 		}
-		function pe(e) {
+		function fe(e) {
 			let t = e.currentTarget;
-			t && (M = t.scrollTop, ce(), Date.now() >= l && !d.loadMoreLocked && d.infiniteScroll && q(t) && f("loadMore"));
+			t && (M = t.scrollTop, le(), Date.now() >= l && !d.loadMoreLocked && d.infiniteScroll && J(t) && f("loadMore"));
 		}
-		function me() {
+		function pe() {
 			let e = p.value;
-			Date.now() >= l && !d.loadMoreLocked && e && q(e) && f("loadMore");
+			Date.now() >= l && !d.loadMoreLocked && e && J(e) && f("loadMore");
 		}
 		O(() => d.items.length, (e, t) => {
-			e > 0 && e < t && (l = Date.now() + _t);
+			e > 0 && e < t && (l = Date.now() + St);
 		});
-		function he() {
+		function me() {
 			return p.value;
 		}
 		return O(g, (e) => {
-			N?.disconnect(), N = null, F !== null && cancelAnimationFrame(F), e && (fe(e), !(typeof ResizeObserver > "u") && (N = new ResizeObserver(([t]) => {
+			N?.disconnect(), N = null, F !== null && cancelAnimationFrame(F), e && (de(e), !(typeof ResizeObserver > "u") && (N = new ResizeObserver(([t]) => {
 				let n = t?.contentRect.width ?? e.clientWidth;
 				Math.abs(n - y.value) < .5 || (F = requestAnimationFrame(() => {
-					F = null, fe(e);
+					F = null, de(e);
 				}));
 			}), N.observe(e)));
 		}), O(p, (e) => {
-			P?.disconnect(), P = null, e && (de(), !(typeof ResizeObserver > "u") && (P = new ResizeObserver(de), P.observe(e)));
+			P?.disconnect(), P = null, e && (Q(), !(typeof ResizeObserver > "u") && (P = new ResizeObserver(Q), P.observe(e)));
 		}), O([
 			R,
 			B,
 			() => d.masonry
-		], Y, { flush: "post" }), v(() => {
+		], X, { flush: "post" }), v(() => {
 			N?.disconnect(), P?.disconnect(), F !== null && cancelAnimationFrame(F), I !== null && cancelAnimationFrame(I);
 		}), n({
-			getScrollElement: he,
-			loadIfNearBottom: me
-		}), (n, r) => (b(), s("div", ft, [
+			getScrollElement: me,
+			loadIfNearBottom: pe
+		}), (n, r) => (b(), s("div", _t, [
 			c("main", {
 				id: m,
 				ref_key: "galleryElement",
@@ -1380,14 +1495,14 @@ var Xe = [
 				"data-layout-mode": "masonry",
 				"aria-hidden": t.suspended || void 0,
 				inert: t.suspended || void 0,
-				onScrollPassive: pe
+				onScrollPassive: fe
 			}, [c("section", {
 				ref_key: "masonryElement",
 				ref: g,
 				class: h(["masonry", { "masonry--ready": y.value > 0 }]),
 				style: _(U.value),
 				"aria-label": "Media gallery"
-			}, [(b(!0), s(e, null, S(K.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(dt, {
+			}, [(b(!0), s(e, null, S(q.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(gt, {
 				key: n.postId,
 				class: "masonry-item",
 				entering: t.enteringPostIds.has(n.postId),
@@ -1427,8 +1542,8 @@ var Xe = [
 				"onMediaChange",
 				"onReady",
 				"onError"
-			]))), 128))], 6)], 42, pt),
-			t.feedFooter || t.isLoadingMore || t.nextPageError || t.hasNext && W.value || !t.hasNext && t.canRetryEnd ? (b(), s("div", mt, [u(te, {
+			]))), 128))], 6)], 42, vt),
+			t.feedFooter || t.isLoadingMore || t.nextPageError || t.hasNext && W.value || !t.hasNext && t.canRetryEnd ? (b(), s("div", yt, [u(G, {
 				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
 				"feed-footer": t.feedFooter,
@@ -1451,7 +1566,7 @@ var Xe = [
 				"show-load-more",
 				"state"
 			])])) : o("", !0),
-			u(ge, {
+			u(he, {
 				"content-size": B.value.height,
 				"controls-id": m,
 				"scroll-element": p.value,
@@ -1463,8 +1578,8 @@ var Xe = [
 			])
 		]));
 	}
-}), yt = 300;
-function bt(e, t, n) {
+}), wt = 300;
+function Tt(e, t, n) {
 	let r = e.scrollTop;
 	if (n || Math.abs(r - t) <= 1) return e.scrollTop = t, Promise.resolve();
 	e.setAttribute("data-transitioning", "");
@@ -1472,7 +1587,7 @@ function bt(e, t, n) {
 	return new Promise((n) => {
 		let o = (s) => {
 			a += 1;
-			let c = Math.max(s - i, 1e3 / 60 * a), l = Math.min(1, c / yt), u = 1 - (1 - l) ** 3;
+			let c = Math.max(s - i, 1e3 / 60 * a), l = Math.min(1, c / wt), u = 1 - (1 - l) ** 3;
 			if (e.scrollTop = r + (t - r) * u, l < 1) {
 				requestAnimationFrame(o);
 				return;
@@ -1484,7 +1599,7 @@ function bt(e, t, n) {
 }
 //#endregion
 //#region src/components/ReelAutoAdvanceProgress.vue?vue&type=script&setup=true&lang.ts
-var xt = ["aria-label"], St = /* @__PURE__ */ d({
+var Et = ["aria-label"], Dt = /* @__PURE__ */ d({
 	__name: "ReelAutoAdvanceProgress",
 	props: {
 		durationMs: {},
@@ -1502,9 +1617,9 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 			class: "reel-auto-advance-progress",
 			style: _(a.value),
 			onAnimationend: n[0] ||= (e) => i("complete")
-		}, null, 36)], 8, xt));
+		}, null, 36)], 8, Et));
 	}
-}), Ct = { class: "reel-viewport" }, wt = ["data-active-post-id", "data-active-media-index"], Tt = ["role", "data-status"], Et = 2, Dt = 300, Ot = 250, kt = /* @__PURE__ */ d({
+}), Ot = { class: "reel-viewport" }, kt = ["data-active-post-id", "data-active-media-index"], At = ["role", "data-status"], jt = 300, Mt = 250, Nt = /* @__PURE__ */ d({
 	__name: "ReelFeed",
 	props: {
 		initialPostId: {},
@@ -1528,6 +1643,7 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 		mediaIndices: {},
 		nextPageError: { type: Boolean },
 		previewStates: {},
+		reelAudioState: {},
 		state: {},
 		total: {}
 	},
@@ -1537,12 +1653,13 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 		"loadMore",
 		"mediaChange",
 		"ready",
+		"reelAudioChange",
 		"retryEnd",
 		"retryForward"
 	],
 	setup(t, { expose: n, emit: i }) {
 		let l = 0, u = t, d = i, f = w(null), p = w(null), g = u.initialPostId === null || u.initialPostId === void 0 ? -1 : u.items.findIndex((e) => e.postId === u.initialPostId), x = w(Math.max(0, g)), C = w(!1), D = w(!1), k = 0, A = null, j = null, M = null, F = r(() => ({ gridTemplateRows: `repeat(${u.items.length}, 100cqh)` })), R = r(() => {
-			let e = Math.max(0, x.value - Et), t = Math.min(u.items.length - 1, x.value + Et);
+			let e = Math.max(0, x.value - 2), t = Math.min(u.items.length - 1, x.value + 2);
 			return u.items.slice(e, t + 1).map((t, n) => ({
 				fetchPriority: e + n === x.value ? "high" : "low",
 				index: e + n,
@@ -1551,10 +1668,10 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 		}), z = r(() => u.items[x.value]?.postId), B = r(() => u.items[x.value]), V = r(() => {
 			let e = z.value;
 			return e === void 0 ? 0 : u.mediaIndices.get(e) ?? 0;
-		}), H = r(() => {
+		}), ee = r(() => {
 			let e = z.value;
 			return e === void 0 ? "loading" : u.previewStates.get(L(e, V.value)) ?? "loading";
-		}), ee = r(() => B.value ? I(B.value, V.value) : null), U = r(() => ee.value ? N(ee.value, u.mediaSource ?? "preview") : null), W = r(() => H.value === "ready" && !!(U.value && qe(U.value.type, U.value.src))), G = r(() => [
+		}), H = r(() => B.value ? I(B.value, V.value) : null), U = r(() => H.value ? N(H.value, u.mediaSource ?? "preview") : null), W = r(() => ee.value === "ready" && !!(U.value && et(U.value.type, U.value.src))), K = r(() => [
 			z.value,
 			V.value,
 			u.items.length,
@@ -1562,52 +1679,52 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 			u.reelAutoAdvance.enabled,
 			u.reelAutoAdvance.includePostItems,
 			u.reelAutoAdvance.intervalMs
-		].join(":")), K = r(() => {
+		].join(":")), q = r(() => {
 			let e = B.value, t = !!(e && u.reelAutoAdvance.includePostItems && V.value < P(e).length - 1), n = u.reelAutoAdvance.intervalMs / 1e3;
 			return `Auto advance to the next ${t ? "post item" : "post"} in ${n}s`;
-		}), ne = r(() => u.reelAutoAdvance.enabled && u.reelForward.status === "idle" && B.value !== void 0 && H.value !== "loading" && !W.value), re = r(() => !u.infiniteScroll || u.items.length <= 1), J = r(() => u.reelForward.status === "loading" ? "Loading the next media…" : u.reelForward.status === "error" ? "Unable to load the next media." : "You reached the end of this feed.");
-		function ie(e) {
+		}), te = r(() => u.reelAutoAdvance.enabled && u.reelForward.status === "idle" && B.value !== void 0 && ee.value !== "loading" && !W.value), Y = r(() => !u.infiniteScroll || u.items.length <= 1), ne = r(() => u.reelForward.status === "loading" ? "Loading the next media…" : u.reelForward.status === "error" ? "Unable to load the next media." : "You reached the end of this feed.");
+		function re(e) {
 			return { gridRow: `${e + 1}` };
 		}
-		function ae(e) {
+		function ie(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 ae(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 = ae(t)), Date.now() >= l && !u.loadMoreLocked && u.infiniteScroll && q(t) && d("loadMore");
+			C.value = u.items.length > 0 && t.scrollTop > r + 1, D.value || (x.value = ie(t)), Date.now() >= l && !u.loadMoreLocked && u.infiniteScroll && J(t) && d("loadMore");
 		}
-		function Y() {
+		function X() {
 			let e = f.value;
-			e && (C.value = !1, se(!0), k = e.clientHeight, e.scrollTop = x.value * k, j !== null && cancelAnimationFrame(j), j = requestAnimationFrame(() => {
+			e && (C.value = !1, ce(!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());
+			}), oe());
 		}
-		function X() {
+		function oe() {
 			M !== null && clearTimeout(M), M = setTimeout(() => {
 				M = null;
 				let e = f.value;
-				e && (k = e.clientHeight, e.scrollTop = x.value * k), se(!1);
+				e && (k = e.clientHeight, e.scrollTop = x.value * k), ce(!1);
 			}, 120);
 		}
-		function Z() {
-			se(!0);
+		function se() {
+			ce(!0);
 			let e = f.value;
-			e && (k = e.clientHeight, e.scrollTop = x.value * k), X();
+			e && (k = e.clientHeight, e.scrollTop = x.value * k), oe();
 		}
-		function se(e) {
+		function ce(e) {
 			D.value = e, f.value?.toggleAttribute("data-resizing", e);
 		}
-		function ce() {
+		function le() {
 			let e = f.value;
-			Date.now() >= l && !u.loadMoreLocked && e && q(e) && d("loadMore");
+			Date.now() >= l && !u.loadMoreLocked && e && J(e) && d("loadMore");
 		}
 		O(() => u.items.length, (e, t) => {
-			e > 0 && e < t && (l = Date.now() + Ot);
+			e > 0 && e < t && (l = Date.now() + Mt);
 		});
-		function le(e) {
+		function Z(e) {
 			let t = B.value;
 			if (!t) return !1;
 			let n = P(t).length;
@@ -1617,32 +1734,32 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 		}
 		function ue(e) {
 			let t = x.value + e;
-			return !f.value || t < 0 || t >= u.items.length ? !1 : (me(t), !0);
+			return !f.value || t < 0 || t >= u.items.length ? !1 : (pe(t), !0);
 		}
-		function de(e, t) {
+		function Q(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 && me(n), !0);
+			return !f.value || !r || t < 0 || t > r.items.length ? !1 : ((u.mediaIndices.get(e) ?? 0) !== t && d("mediaChange", e, t), n !== x.value && pe(n), !0);
 		}
-		function fe() {
+		function de() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
-		function pe(e) {
+		function fe(e) {
 			let t = f.value;
 			if (!t) return Promise.resolve();
 			let n = e * (k || t.clientHeight);
-			return x.value = e, bt(t, n, fe());
+			return x.value = e, Tt(t, n, de());
 		}
-		function me(e) {
-			pe(e);
+		function pe(e) {
+			fe(e);
 		}
-		async function he(e) {
+		async function me(e) {
 			let t = u.items.findIndex((t) => t.postId === e);
-			return t < 0 || t === x.value ? !1 : (await pe(t), !0);
+			return t < 0 || t === x.value ? !1 : (await fe(t), !0);
 		}
-		async function ge(e) {
-			return le(e) ? (fe() || await new Promise((e) => setTimeout(e, Dt)), !0) : !1;
+		async function he(e) {
+			return Z(e) ? (de() || await new Promise((e) => setTimeout(e, jt)), !0) : !1;
 		}
-		function _e() {
+		function ge() {
 			if (!u.reelAutoAdvance.enabled) return;
 			let e = B.value;
 			if (!e) return;
@@ -1655,31 +1772,31 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				u.hasNext && !u.loadMoreLocked && d("loadMore");
 				return;
 			}
-			u.reelAutoAdvance.includePostItems && (u.mediaIndices.get(n.postId) ?? 0) !== 0 && d("mediaChange", n.postId, 0), me(t);
+			u.reelAutoAdvance.includePostItems && (u.mediaIndices.get(n.postId) ?? 0) !== 0 && d("mediaChange", n.postId, 0), pe(t);
 		}
-		function ve(e, t) {
-			!u.reelAutoAdvance.enabled || e !== z.value || t !== V.value || !W.value || _e();
+		function _e(e, t) {
+			!u.reelAutoAdvance.enabled || e !== z.value || t !== V.value || !W.value || ge();
 		}
 		return O(f, (e) => {
-			A?.disconnect(), A = null, e && (k = e.clientHeight, !(typeof ResizeObserver > "u") && (A = new ResizeObserver(Y), A.observe(e)));
+			A?.disconnect(), A = null, e && (k = e.clientHeight, !(typeof ResizeObserver > "u") && (A = new ResizeObserver(X), 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(), Y();
+			x.value = n >= 0 ? n : Math.min(x.value, Math.max(0, e - 1)), await m(), X();
 		}), O(z, (e) => {
 			e !== void 0 && d("activeChange", e);
 		}, { immediate: !0 }), y(() => {
-			window.addEventListener("resize", Z), window.addEventListener("orientationchange", Z), g >= 0 && m(Y);
+			window.addEventListener("resize", se), window.addEventListener("orientationchange", se), g >= 0 && m(X);
 		}), v(() => {
-			window.removeEventListener("resize", Z), window.removeEventListener("orientationchange", Z), A?.disconnect(), j !== null && cancelAnimationFrame(j), M !== null && clearTimeout(M);
+			window.removeEventListener("resize", se), window.removeEventListener("orientationchange", se), A?.disconnect(), j !== null && cancelAnimationFrame(j), M !== null && clearTimeout(M);
 		}), n({
 			activeIndex: x,
 			activePostId: z,
-			changeActiveMedia: le,
-			loadIfNearBottom: ce,
+			changeActiveMedia: Z,
+			loadIfNearBottom: le,
 			moveActivePost: ue,
-			navigateToItem: de,
-			transitionActiveMedia: ge,
-			transitionActivePost: he
+			navigateToItem: Q,
+			transitionActiveMedia: he,
+			transitionActivePost: me
 		}), (n, r) => (b(), s("main", {
 			class: h(["reel-shell", {
 				"reel-shell--has-footer": !!t.cardFooter,
@@ -1687,7 +1804,7 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 			}]),
 			"data-layout-mode": "reel"
 		}, [
-			t.cardHeader && B.value && t.reelForward.status === "idle" ? (b(), a(Fe, {
+			t.cardHeader && B.value && t.reelForward.status === "idle" ? (b(), a(Pe, {
 				key: 0,
 				index: x.value,
 				item: B.value,
@@ -1709,28 +1826,28 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				"style",
 				"total"
 			])) : o("", !0),
-			c("div", Ct, [c("div", {
+			c("div", Ot, [c("div", {
 				ref_key: "galleryElement",
 				ref: f,
 				class: "gallery-shell reel-feed",
 				"data-active-post-id": z.value,
 				"data-active-media-index": V.value,
-				onScrollPassive: oe
+				onScrollPassive: ae
 			}, [t.reelForward.status === "idle" ? (b(), s("section", {
 				key: 1,
 				class: "reel-track",
 				style: _(F.value),
 				"aria-label": "Media gallery"
-			}, [(b(!0), s(e, null, S(R.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(dt, {
+			}, [(b(!0), s(e, null, S(R.value, ({ fetchPriority: e, item: n, index: i }) => (b(), a(gt, {
 				key: n.postId,
-				active: r === x.value && !C.value,
-				"advance-on-media-end": u.reelAutoAdvance.enabled && r === x.value,
+				active: i === x.value && !C.value,
+				"advance-on-media-end": u.reelAutoAdvance.enabled && i === x.value,
 				class: "reel-item",
 				entering: !1,
 				"fetch-priority": e,
-				index: r,
+				index: i,
 				item: n,
-				"item-style": ie(r),
+				"item-style": re(i),
 				"media-card": t.mediaCard,
 				layout: "reel",
 				"loaded-count": t.items.length,
@@ -1738,11 +1855,13 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				"media-source": t.mediaSource,
 				"preview-state": t.previewStates.get(E(L)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
 				"reel-controls-target": p.value,
+				"reel-audio-state": t.reelAudioState,
 				"stationary-reel-controls": "",
 				total: t.total,
 				onMediaChange: (e) => d("mediaChange", n.postId, e),
-				onEnded: (e) => ve(n.postId, e),
+				onEnded: (e) => _e(n.postId, e),
 				onReady: (e) => d("ready", n.postId, e),
+				onReelAudioChange: r[1] ||= (e) => d("reelAudioChange", e),
 				onError: (e) => d("error", n.postId, e)
 			}, null, 8, [
 				"active",
@@ -1757,6 +1876,7 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				"media-source",
 				"preview-state",
 				"reel-controls-target",
+				"reel-audio-state",
 				"total",
 				"onMediaChange",
 				"onEnded",
@@ -1767,12 +1887,12 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				class: "reel-forward-status",
 				role: t.reelForward.status === "error" ? "alert" : "status",
 				"data-status": t.reelForward.status
-			}, [c("p", null, T(J.value), 1), t.reelForward.status === "error" || t.reelForward.status === "end" ? (b(), s("button", {
+			}, [c("p", null, T(ne.value), 1), t.reelForward.status === "error" || t.reelForward.status === "end" ? (b(), s("button", {
 				key: 0,
 				class: "reel-forward-retry",
 				type: "button",
 				onClick: r[0] ||= (e) => d("retryForward")
-			}, " Retry ")) : o("", !0)], 8, Tt)), t.reelForward.status === "idle" ? (b(), a(te, {
+			}, " Retry ")) : o("", !0)], 8, At)), t.reelForward.status === "idle" ? (b(), a(G, {
 				key: 2,
 				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
@@ -1781,10 +1901,10 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				"has-next": t.hasNext,
 				"is-loading": t.isLoadingMore,
 				"load-more-locked": t.loadMoreLocked,
-				"show-load-more": re.value,
+				"show-load-more": Y.value,
 				state: t.state,
-				onLoadMore: r[1] ||= (e) => d("loadMore"),
-				onRetryEnd: r[2] ||= (e) => d("retryEnd")
+				onLoadMore: r[2] ||= (e) => d("loadMore"),
+				onRetryEnd: r[3] ||= (e) => d("retryEnd")
 			}, null, 8, [
 				"actions",
 				"can-retry-end",
@@ -1795,13 +1915,13 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				"load-more-locked",
 				"show-load-more",
 				"state"
-			])) : o("", !0)], 40, wt), c("div", {
+			])) : o("", !0)], 40, kt), c("div", {
 				ref_key: "reelControlsElement",
 				ref: p,
 				class: "reel-media-controls-host",
 				"data-test": "reel-media-controls-host"
 			}, null, 512)]),
-			t.cardFooter && B.value && t.reelForward.status === "idle" ? (b(), a(Fe, {
+			t.cardFooter && B.value && t.reelForward.status === "idle" ? (b(), a(Pe, {
 				key: 1,
 				index: x.value,
 				item: B.value,
@@ -1823,24 +1943,24 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				"style",
 				"total"
 			])) : o("", !0),
-			ne.value ? (b(), a(St, {
-				key: G.value,
+			te.value ? (b(), a(Dt, {
+				key: K.value,
 				"duration-ms": t.reelAutoAdvance.intervalMs,
-				label: K.value,
-				onComplete: _e
+				label: q.value,
+				onComplete: ge
 			}, null, 8, ["duration-ms", "label"])) : o("", !0)
 		], 2));
 	}
-}), At = ["data-info-sheet-open", "data-info-sheet-mode"], jt = ["aria-hidden", "inert"], Mt = {
+}), Pt = ["data-info-sheet-open", "data-info-sheet-mode"], Ft = ["aria-hidden", "inert"], It = {
 	key: 0,
 	class: "reel-info-sheet-layer",
 	"data-test": "reel-info-sheet"
-}, Nt = [
+}, Lt = [
 	"role",
 	"aria-modal",
 	"tabindex",
 	"data-active-post-id"
-], Pt = /* @__PURE__ */ d({
+], Rt = /* @__PURE__ */ d({
 	__name: "ReelLayout",
 	props: {
 		forwardIndex: { default: null },
@@ -1870,6 +1990,7 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 		mediaIndices: {},
 		nextPageError: { type: Boolean },
 		previewStates: {},
+		reelAudioState: {},
 		state: {},
 		total: {}
 	},
@@ -1880,6 +2001,7 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 		"loadMore",
 		"mediaChange",
 		"ready",
+		"reelAudioChange",
 		"retryEnd",
 		"retryForward"
 	],
@@ -1930,10 +2052,10 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 		function V(e, t) {
 			d("error", e, t);
 		}
-		function H(e, t) {
+		function ee(e, t) {
 			d("mediaChange", e, t);
 		}
-		function ee(e, t) {
+		function H(e, t) {
 			d("ready", e, t);
 		}
 		return O(() => ({
@@ -1965,7 +2087,7 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 			class: "reel-layout-main",
 			"aria-hidden": e.infoSheetOverlay && A.value || void 0,
 			inert: e.infoSheetOverlay && A.value || void 0
-		}, [u(kt, {
+		}, [u(Nt, {
 			ref_key: "reelFeed",
 			ref: p,
 			"can-retry-end": e.canRetryEnd,
@@ -1985,16 +2107,18 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 			"next-page-error": e.nextPageError,
 			"preview-states": e.previewStates,
 			"reel-auto-advance": e.reelAutoAdvance,
+			"reel-audio-state": e.reelAudioState,
 			"reel-forward": e.reelForward,
 			state: e.state,
 			total: e.total,
 			onActiveChange: r[0] ||= (e) => d("activeChange", e),
 			onError: V,
 			onLoadMore: r[1] ||= (e) => d("loadMore"),
-			onMediaChange: H,
-			onReady: ee,
+			onMediaChange: ee,
+			onReady: H,
 			onRetryEnd: r[2] ||= (e) => d("retryEnd"),
-			onRetryForward: r[3] ||= (e) => d("retryForward")
+			onRetryForward: r[3] ||= (e) => d("retryForward"),
+			onReelAudioChange: r[4] ||= (e) => d("reelAudioChange", e)
 		}, null, 8, [
 			"can-retry-end",
 			"card-footer",
@@ -2013,11 +2137,12 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 			"next-page-error",
 			"preview-states",
 			"reel-auto-advance",
+			"reel-audio-state",
 			"reel-forward",
 			"state",
 			"total"
-		])], 8, jt), u(n, { name: "vibe-info-sheet" }, {
-			default: k(() => [A.value && e.infoSheet && j.value ? (b(), s("div", Mt, [c("aside", {
+		])], 8, Ft), u(n, { name: "vibe-info-sheet" }, {
+			default: k(() => [A.value && e.infoSheet && j.value ? (b(), s("div", It, [c("aside", {
 				ref_key: "sheetElement",
 				ref: _,
 				class: "reel-info-sheet",
@@ -2026,14 +2151,14 @@ var xt = ["aria-label"], St = /* @__PURE__ */ d({
 				"aria-modal": e.infoSheetOverlay ? "true" : void 0,
 				tabindex: e.infoSheetOverlay ? -1 : void 0,
 				"data-active-post-id": T.value?.postId
-			}, [(b(), a(C(e.infoSheet.component), g(f(j.value)), null, 16))], 8, Nt)])) : o("", !0)]),
+			}, [(b(), a(C(e.infoSheet.component), g(f(j.value)), null, 16))], 8, Lt)])) : o("", !0)]),
 			_: 1
-		})], 10, At));
+		})], 10, Pt));
 	}
 });
 //#endregion
 //#region src/core/mediaLifecycle.ts
-function Ft(e, t, n, r, i) {
+function zt(e, t, n, r, i) {
 	let a = e.items.findIndex((e) => e.postId === t), o = e.items[a];
 	if (!o) return null;
 	let s = F(o, n), c = I(o, s);
@@ -2049,7 +2174,7 @@ function Ft(e, t, n, r, i) {
 		postIndex: a
 	};
 }
-function It(e, t) {
+function Bt(e, t) {
 	O(() => {
 		let t = e.layout === "reel" || e.reelOrigin === "masonry" ? e.activeReelPostId : null;
 		return {
@@ -2059,20 +2184,20 @@ function It(e, t) {
 		};
 	}, (n, r) => {
 		if (n.postId === null || n.postId === r?.postId && n.mediaIndex === r.mediaIndex && n.origin === r.origin) return;
-		let i = Ft(e, n.postId, n.mediaIndex, "reel", n.origin);
+		let i = zt(e, n.postId, n.mediaIndex, "reel", n.origin);
 		i && t(i);
 	}, { flush: "sync" });
 }
 //#endregion
 //#region src/components/useMediaLifecycle.ts
-function Lt(e, t) {
+function Vt(e, t) {
 	let n = w(/* @__PURE__ */ new Map()), i = w(/* @__PURE__ */ new Map()), a = w(/* @__PURE__ */ new Map()), o = () => e.reelMediaSource === "preview" ? n : e.reelMediaSource === "mobile" ? a : i, s = r(() => o().value);
 	function c(e, t, n, r) {
 		let i = L(t, n);
 		e.value.get(i) !== r && (e.value = new Map(e.value).set(i, r));
 	}
 	function l(t, n, r, i) {
-		return Ft(e, t, n, r, i);
+		return zt(e, t, n, r, i);
 	}
 	function u(e, n, r, i) {
 		let a = l(e, n, r, i);
@@ -2094,7 +2219,7 @@ function Lt(e, t) {
 		let r = l(e, n, "masonry", null);
 		r && t.visible(r);
 	}
-	return It(e, t.reelChange), O(() => {
+	return Bt(e, t.reelChange), O(() => {
 		let t = e.layout === "reel" || e.reelOrigin === "masonry" ? e.activeReelPostId : null, n = t === null ? 0 : e.mediaIndices.get(t) ?? 0;
 		return {
 			mediaIndex: n,
@@ -2119,16 +2244,16 @@ function Lt(e, t) {
 }
 //#endregion
 //#region src/core/reelEscapeStack.ts
-var Rt = [];
-function zt(e) {
-	return Rt.push(e), () => {
-		let t = Rt.indexOf(e);
-		t >= 0 && Rt.splice(t, 1);
+var Ht = [];
+function Ut(e) {
+	return Ht.push(e), () => {
+		let t = Ht.indexOf(e);
+		t >= 0 && Ht.splice(t, 1);
 	};
 }
-function Bt(e) {
+function Wt(e) {
 	if (!e.isActive()) return !1;
-	let t = Rt.filter((e) => e.isActive()), n = e.element();
+	let t = Ht.filter((e) => e.isActive()), n = e.element();
 	return n !== null && t.some((t) => {
 		if (t === e) return !1;
 		let r = t.element();
@@ -2144,14 +2269,14 @@ function Bt(e) {
 }
 //#endregion
 //#region src/components/useReelKeyboard.ts
-function Vt(e) {
+function Gt(e) {
 	let t = {
 		element: e.element,
 		isActive: () => e.state.layout === "reel" || e.state.reelOrigin === "masonry"
 	}, n = null;
 	function r(n) {
 		let r = t.isActive();
-		if (n.key === "Escape" && r && !Bt(t)) return;
+		if (n.key === "Escape" && r && !Wt(t)) return;
 		if (n.key === "Escape" && e.state.reelOrigin === "masonry") {
 			n.preventDefault(), e.state.reelInfoSheetOverlay && e.state.reelInfoSheet.enabled && e.setReelInfoSheet(!1), e.closeMasonryReel();
 			return;
@@ -2171,14 +2296,14 @@ function Vt(e) {
 		a !== 0 && e.reelRenderer()?.changeActiveMedia?.(a) && n.preventDefault();
 	}
 	y(() => {
-		n = zt(t), window.addEventListener("keydown", r);
+		n = Ut(t), window.addEventListener("keydown", r);
 	}), v(() => {
 		window.removeEventListener("keydown", r), n?.(), n = null;
 	});
 }
 //#endregion
 //#region src/components/VibeSurface.vue?vue&type=script&setup=true&lang.ts
-var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
+var Kt = 35, qt = 420, Jt = /* @__PURE__ */ d({
 	__name: "VibeSurface",
 	props: {
 		canRetryEnd: { type: Boolean },
@@ -2189,6 +2314,7 @@ var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
 		mediaCard: {},
 		masonry: {},
 		reelInfoSheet: {},
+		reelAudioState: {},
 		state: {}
 	},
 	emits: [
@@ -2200,74 +2326,75 @@ var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
 		"openReel",
 		"reelMediaChange",
 		"reelInfoSheetChange",
+		"reelAudioChange",
 		"retryEnd",
 		"retryForward"
 	],
 	setup(t, { expose: i, emit: c }) {
-		let l = t, d = c, f = w(null), p = w(null), h = w(null), g = w(null), y = w({}), x = w(!1), S = w(/* @__PURE__ */ new Set()), C = w(/* @__PURE__ */ new Map()), T = w(/* @__PURE__ */ new Set()), D = w(/* @__PURE__ */ new Map()), A = r(() => Object.freeze([...l.state.items])), j = r(() => z(l.state, A.value)), { markMasonryVisible: M, markPreviewError: N, markPreviewReady: I, markReelError: L, markReelReady: R, originalStates: B, previewStates: V, reelStates: H } = Lt(l.state, {
+		let l = t, d = c, f = w(null), p = w(null), h = w(null), g = w(null), y = w({}), x = w(!1), S = w(/* @__PURE__ */ new Set()), C = w(/* @__PURE__ */ new Map()), T = w(/* @__PURE__ */ new Set()), D = w(/* @__PURE__ */ new Map()), A = r(() => Object.freeze([...l.state.items])), j = r(() => z(l.state, A.value)), { markMasonryVisible: M, markPreviewError: N, markPreviewReady: I, markReelError: L, markReelReady: R, originalStates: B, previewStates: V, reelStates: ee } = Vt(l.state, {
 			ready: (e) => d("mediaReady", e),
 			reelChange: (e) => d("reelMediaChange", e),
 			visible: (e) => d("mediaVisible", e)
-		}), ee = new Set(l.state.items.map((e) => e.postId)), U = null, W = null, te = !1;
-		function G() {
+		}), H = 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 K() {
+		function q() {
 			U !== null && cancelAnimationFrame(U), U = requestAnimationFrame(() => {
 				U = requestAnimationFrame(() => {
 					U = null, S.value = /* @__PURE__ */ new Set();
 				});
 			});
 		}
-		function q(e, t) {
+		function J(e, t) {
 			let n = l.state.items.find((t) => t.postId === e);
 			if (!n) return;
 			let r = F(n, t);
 			(l.state.mediaIndices.get(e) ?? 0) !== r && (l.state.mediaIndices = new Map(l.state.mediaIndices).set(e, r));
 		}
-		async function re() {
+		async function Y() {
 			await m(), (l.state.layout === "reel" || l.state.reelOrigin === "masonry" ? p.value : f.value)?.loadIfNearBottom();
 		}
-		function J(e) {
+		function ne(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 ie(e) {
+		function re(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 ae(e) {
+		function ie(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 = P(t).findIndex((t) => t.mediaId === e.mediaId);
 			return n < 0 ? "not-found" : p.value?.navigateToItem?.(e.postId, n) ? "navigated" : "reel-inactive";
 		}
-		function oe() {
+		function ae() {
 			return l.state.layout !== "masonry" || l.state.reelOrigin === "masonry" ? null : f.value?.getScrollElement?.() ?? null;
 		}
-		function Y(e, t) {
-			W = e, te = t === "keyboard", y.value = ce(e), d("openReel", e), m(() => h.value?.focus());
+		function X(e, t) {
+			W = e, G = t === "keyboard", y.value = le(e), d("openReel", e), m(() => h.value?.focus());
 		}
-		function X(e) {
+		function oe(e) {
 			let t = g.value?.querySelectorAll(".masonry-feed [data-post-id]") ?? [];
 			return Array.from(t).find((t) => t.dataset.postId === String(e)) ?? null;
 		}
-		function Z(e, t) {
-			if (l.state.layout !== "masonry" || l.state.reelOrigin !== null || G()) return 0;
-			let n = [...new Set(e)], r = n.filter(X);
+		function se(e, t) {
+			if (l.state.layout !== "masonry" || l.state.reelOrigin !== null || K()) return 0;
+			let n = [...new Set(e)], r = n.filter(oe);
 			if (r.length === 0) return 0;
-			let i = new Map(D.value), a = t?.staggerMs ?? Ht;
+			let i = new Map(D.value), a = t?.staggerMs ?? Kt;
 			return r.forEach((e, t) => {
 				i.set(e, t * a);
-			}), S.value = new Set([...S.value].filter((e) => !r.includes(e))), T.value = new Set([...T.value, ...n]), D.value = i, Ut + (r.length - 1) * a;
+			}), S.value = new Set([...S.value].filter((e) => !r.includes(e))), T.value = new Set([...T.value, ...n]), D.value = i, qt + (r.length - 1) * a;
 		}
-		function se(e, t) {
-			let n = X(e), r = n?.querySelector(".media-card-activator") ?? n;
+		function ce(e, t) {
+			let n = oe(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 ce(e) {
-			let t = g.value, n = X(e);
+		function le(e) {
+			let t = g.value, n = oe(e);
 			if (t === null || n === null) return {};
 			let r = t.getBoundingClientRect(), i = n.getBoundingClientRect();
 			return {
@@ -2277,48 +2404,48 @@ var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
 				"--vibe-reel-origin-left": `${Math.max(0, i.left - r.left)}px`
 			};
 		}
-		function le() {
+		function Z() {
 			l.state.reelOrigin === "masonry" && (W ??= l.state.activeReelPostId, x.value = !0, d("closeReel"));
 		}
 		function ue() {
-			let e = W, t = te;
-			x.value = !1, W = null, te = !1, y.value = {}, m(() => {
-				e !== null && se(e, t);
+			let e = W, t = G;
+			x.value = !1, W = null, G = !1, y.value = {}, m(() => {
+				e !== null && ce(e, t);
 			});
 		}
-		return Vt({
-			closeMasonryReel: le,
+		return Gt({
+			closeMasonryReel: Z,
 			element: () => g.value,
 			isReelLeaving: () => x.value,
 			reelRenderer: () => p.value,
 			setReelInfoSheet: (e) => d("reelInfoSheetChange", e),
 			state: l.state
 		}), O(() => l.state.items.map((e) => e.postId), (e) => {
-			let t = e.filter((e) => !ee.has(e)), n = new Set(e);
-			if (ee = new Set(e), T.value = new Set([...T.value].filter((e) => n.has(e))), D.value = new Map([...D.value].filter(([e]) => n.has(e))), t.length === 0 || G()) return;
+			let t = e.filter((e) => !H.has(e)), n = new Set(e);
+			if (H = new Set(e), T.value = new Set([...T.value].filter((e) => n.has(e))), D.value = new Map([...D.value].filter(([e]) => n.has(e))), t.length === 0 || K()) return;
 			let r = /* @__PURE__ */ new Map();
 			e.forEach((e) => {
 				let t = C.value.get(e);
 				t !== void 0 && r.set(e, t);
 			}), t.forEach((e, t) => {
-				r.set(e, t * Ht);
-			}), C.value = r, S.value = new Set([...S.value, ...t]), K();
+				r.set(e, t * Kt);
+			}), C.value = r, S.value = new Set([...S.value, ...t]), q();
 		}, { flush: "sync" }), v(() => {
 			U !== null && cancelAnimationFrame(U);
 		}), i({
-			changeActiveReelMedia: J,
-			getAutoScrollElement: oe,
-			loadIfNearBottom: re,
-			moveActiveReelPost: ie,
-			navigateToReelItem: ae,
-			startItemRemoval: Z,
+			changeActiveReelMedia: ne,
+			getAutoScrollElement: ae,
+			loadIfNearBottom: Y,
+			moveActiveReelPost: re,
+			navigateToReelItem: ie,
+			startItemRemoval: se,
 			transitionActiveReelMedia: (e) => p.value?.transitionActiveMedia?.(e) ?? Promise.resolve(!1),
 			transitionActiveReelPost: (e) => p.value?.transitionActivePost?.(e) ?? Promise.resolve(!1)
 		}), (r, i) => (b(), s("div", {
 			ref_key: "surfaceElement",
 			ref: g,
 			class: "vibe-surface"
-		}, [t.state.layout === "reel" && (t.state.items.length > 0 || t.state.reelForward.status !== "idle") ? (b(), a(Pt, {
+		}, [t.state.layout === "reel" && (t.state.items.length > 0 || t.state.reelForward.status !== "idle") ? (b(), a(Rt, {
 			key: 0,
 			ref_key: "reelRenderer",
 			ref: p,
@@ -2343,8 +2470,9 @@ var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
 			"info-sheet-overlay": t.state.reelInfoSheetOverlay,
 			"next-page-error": !!t.state.nextPageError,
 			origin: "reel",
-			"preview-states": E(H),
+			"preview-states": E(ee),
 			"reel-auto-advance": t.state.reelAutoAdvance,
+			"reel-audio-state": t.reelAudioState,
 			"reel-forward": t.state.reelForward,
 			state: j.value,
 			total: t.state.total,
@@ -2352,24 +2480,25 @@ var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
 			onCloseInfoSheet: i[1] ||= (e) => d("reelInfoSheetChange", !1),
 			onError: E(L),
 			onLoadMore: i[2] ||= (e) => d("loadMore"),
-			onMediaChange: q,
+			onMediaChange: J,
 			onReady: E(R),
 			onRetryEnd: i[3] ||= (e) => d("retryEnd"),
-			onRetryForward: i[4] ||= (e) => d("retryForward")
-		}, null, 8, /* @__PURE__ */ "can-retry-end.has-next.card-footer.card-header.feed-footer.feed-footer-actions.forward-index.forward-item.media-card.infinite-scroll.is-loading-more.items.load-more-locked.media-source.media-indices.initial-post-id.info-sheet.info-sheet-enabled.info-sheet-overlay.next-page-error.preview-states.reel-auto-advance.reel-forward.state.total.onError.onReady".split("."))) : t.state.error || t.state.isLoading || t.state.items.length === 0 && t.state.reelForward.status === "idle" ? (b(), a(ne, {
+			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(te, {
 			key: 1,
 			actions: t.feedFooterActions,
 			"can-retry-end": t.canRetryEnd,
 			"feed-footer": t.feedFooter,
 			state: j.value,
-			onLoadMore: i[5] ||= (e) => d("loadMore"),
-			onRetryEnd: i[6] ||= (e) => d("retryEnd")
+			onLoadMore: i[6] ||= (e) => d("loadMore"),
+			onRetryEnd: i[7] ||= (e) => d("retryEnd")
 		}, null, 8, [
 			"actions",
 			"can-retry-end",
 			"feed-footer",
 			"state"
-		])) : (b(), s(e, { key: 2 }, [u(vt, {
+		])) : (b(), s(e, { key: 2 }, [u(Ct, {
 			ref_key: "masonryRenderer",
 			ref: f,
 			"can-retry-end": t.canRetryEnd,
@@ -2394,12 +2523,12 @@ var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
 			suspended: t.state.reelOrigin === "masonry" || x.value,
 			state: j.value,
 			total: t.state.total,
-			onActivate: Y,
+			onActivate: X,
 			onError: E(N),
-			onLoadMore: i[7] ||= (e) => d("loadMore"),
-			onMediaChange: q,
+			onLoadMore: i[8] ||= (e) => d("loadMore"),
+			onMediaChange: J,
 			onReady: E(I),
-			onRetryEnd: i[8] ||= (e) => d("retryEnd"),
+			onRetryEnd: i[9] ||= (e) => d("retryEnd"),
 			onVisible: E(M)
 		}, null, 8, [
 			"can-retry-end",
@@ -2441,7 +2570,7 @@ var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
 				"aria-modal": "true",
 				tabindex: "-1",
 				style: _(y.value)
-			}, [u(Pt, {
+			}, [u(Rt, {
 				ref_key: "reelRenderer",
 				ref: p,
 				"can-retry-end": t.canRetryEnd,
@@ -2467,51 +2596,53 @@ var Ht = 35, Ut = 420, Wt = /* @__PURE__ */ d({
 				origin: "masonry",
 				"preview-states": E(B),
 				"reel-auto-advance": t.state.reelAutoAdvance,
+				"reel-audio-state": t.reelAudioState,
 				"reel-forward": t.state.reelForward,
 				state: j.value,
 				total: t.state.total,
-				onActiveChange: i[9] ||= (e) => d("activeReelChange", e),
-				onCloseInfoSheet: i[10] ||= (e) => d("reelInfoSheetChange", !1),
+				onActiveChange: i[10] ||= (e) => d("activeReelChange", e),
+				onCloseInfoSheet: i[11] ||= (e) => d("reelInfoSheetChange", !1),
 				onError: E(L),
-				onLoadMore: i[11] ||= (e) => d("loadMore"),
-				onMediaChange: q,
+				onLoadMore: i[12] ||= (e) => d("loadMore"),
+				onMediaChange: J,
 				onReady: E(R),
-				onRetryEnd: i[12] ||= (e) => d("retryEnd"),
-				onRetryForward: i[13] ||= (e) => d("retryForward")
-			}, 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-forward.state.total.onError.onReady".split("."))], 4)) : o("", !0)]),
+				onRetryEnd: i[13] ||= (e) => d("retryEnd"),
+				onRetryForward: i[14] ||= (e) => d("retryForward"),
+				onReelAudioChange: i[15] ||= (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("."))], 4)) : o("", !0)]),
 			_: 1
 		})], 64))], 512));
 	}
 });
 //#endregion
 //#region src/core/page.ts
-function Gt(e) {
+function Yt(e) {
 	if (!e || typeof e != "object" || !Array.isArray(e.items)) throw TypeError("Vibe loadPage must resolve to a page with an items array.");
 	if (e.current !== void 0 && e.current !== null && typeof e.current != "string" && typeof e.current != "number") throw TypeError("Vibe page current must be a string, number, null, or undefined.");
 	if (e.next !== null && typeof e.next != "string" && typeof e.next != "number") throw TypeError("Vibe page next must be a string, number, or null.");
 	if (e.total !== void 0 && (!Number.isFinite(e.total) || e.total < 0)) throw TypeError("Vibe page total must be a non-negative number when provided.");
 	return e;
 }
-function Q(e, t) {
+function $(e, t) {
 	let n = new Set(e.map((e) => e.postId));
 	return [...e, ...t.filter((e) => n.has(e.postId) ? !1 : (n.add(e.postId), !0))];
 }
-function Kt(e) {
+function Xt(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function qt(e) {
-	return e.mediaId === void 0 ? `source:${e.src}\u0000${e.preview.src}` : `id:${Kt(e.mediaId)}`;
+function Zt(e) {
+	return e.mediaId === void 0 ? `source:${e.src}\u0000${e.preview.src}` : `id:${Xt(e.mediaId)}`;
 }
-function Jt(e, t) {
-	let n = [...e], r = new Map(e.map((e, t) => [Kt(e.postId), t]));
+function Qt(e, t) {
+	let n = [...e], r = new Map(e.map((e, t) => [Xt(e.postId), t]));
 	return t.forEach((e) => {
-		let t = Kt(e.postId), i = r.get(t);
+		let t = Xt(e.postId), i = r.get(t);
 		if (i === void 0) {
 			r.set(t, n.length), n.push(e);
 			return;
 		}
-		let a = n[i], o = new Set([a, ...a.items].map(qt)), s = [e, ...e.items].filter((e) => {
-			let t = qt(e);
+		let a = n[i], o = new Set([a, ...a.items].map(Zt)), s = [e, ...e.items].filter((e) => {
+			let t = Zt(e);
 			return o.has(t) ? !1 : (o.add(t), !0);
 		});
 		s.length > 0 && (n[i] = {
@@ -2520,14 +2651,14 @@ function Jt(e, t) {
 		});
 	}), n;
 }
-function Yt(e) {
+function $t(e) {
 	return Object.prototype.hasOwnProperty.call(e, "current") ? e.current ?? null : e.next;
 }
 //#endregion
 //#region src/core/appendPage.ts
-function Xt(e, t, n, r) {
-	let i = Gt(e), a = n.filterItems(i.items), o = Yt(i);
-	t.items = Jt(t.items, a), t.next = i.next, i.total !== void 0 && (t.total = i.total), r(o), n.recordPages([{
+function en(e, t, n, r) {
+	let i = Yt(e), a = n.filterItems(i.items), o = $t(i);
+	t.items = Qt(t.items, a), t.next = i.next, i.total !== void 0 && (t.total = i.total), r(o), n.recordPages([{
 		contributionIds: a.map(({ postId: e }) => e),
 		cursor: o,
 		next: i.next,
@@ -2536,32 +2667,32 @@ function Xt(e, t, n, r) {
 }
 //#endregion
 //#region src/core/requestDelay.ts
-var Zt = 2e3, Qt = 1e4, $t = 250, en = {
+var tn = 2e3, nn = 1e4, rn = 250, an = {
 	delayRemainingMs: null,
 	nextRequestAt: null
 };
-function tn(e, t) {
+function on(e, t) {
 	return e === void 0 ? t : Math.floor(e);
 }
-function nn(e, t) {
+function sn(e, t) {
 	for (let [n, r] of [["delayStepMs", e.delayStepMs], ["delayMaxMs", e.delayMaxMs]]) if (r !== void 0 && (!Number.isFinite(r) || r < 0)) throw TypeError(`Vibe ${t} ${n} must be a non-negative number.`);
 }
-function rn(e, t = {}) {
-	let n = tn(t.delayStepMs, Zt), r = tn(t.delayMaxMs, Qt);
+function cn(e, t = {}) {
+	let n = on(t.delayStepMs, tn), r = on(t.delayMaxMs, nn);
 	return Math.min(Math.max(0, e) * n, r);
 }
-function $(e) {
-	if (e == null || !Number.isFinite(e)) return { ...en };
+function ln(e) {
+	if (e == null || !Number.isFinite(e)) return { ...an };
 	let t = Math.max(0, Math.floor(e - Date.now()));
 	return t > 0 ? {
 		delayRemainingMs: t,
 		nextRequestAt: e
-	} : { ...en };
+	} : { ...an };
 }
-async function an({ delayMs: e, onChange: t, signal: n }) {
+async function un({ delayMs: e, onChange: t, signal: n }) {
 	if (n.aborted) throw new DOMException("Aborted", "AbortError");
 	if (e <= 0) {
-		t({ ...en });
+		t({ ...an });
 		return;
 	}
 	let r = Date.now() + e;
@@ -2569,9 +2700,9 @@ async function an({ delayMs: e, onChange: t, signal: n }) {
 		delayRemainingMs: e,
 		nextRequestAt: r
 	}), await new Promise((i, a) => {
-		let o = !1, s = setInterval(f, $t), c = setTimeout(() => u(), e);
+		let o = !1, s = setInterval(f, rn), c = setTimeout(() => u(), e);
 		function l() {
-			clearInterval(s), clearTimeout(c), n.removeEventListener("abort", d), t({ ...en });
+			clearInterval(s), clearTimeout(c), n.removeEventListener("abort", d), t({ ...an });
 		}
 		function u(e) {
 			o || (o = !0, l(), e ? a(e) : i());
@@ -2580,42 +2711,42 @@ async function an({ delayMs: e, onChange: t, signal: n }) {
 			u(new DOMException("Aborted", "AbortError"));
 		}
 		function f() {
-			let e = $(r);
+			let e = ln(r);
 			t(e), e.delayRemainingMs === null && u();
 		}
 		n.addEventListener("abort", d, { once: !0 });
 	});
 }
-var on = class {
+var dn = class {
 	interval = null;
 	constructor(e) {
 		this.onChange = e;
 	}
 	clear() {
-		this.interval !== null && clearInterval(this.interval), this.interval = null, this.onChange({ ...en });
+		this.interval !== null && clearInterval(this.interval), this.interval = null, this.onChange({ ...an });
 	}
 	sync(e) {
 		this.clear();
-		let t = $(e);
+		let t = ln(e);
 		this.onChange(t), t.delayRemainingMs !== null && (this.interval = setInterval(() => {
-			let t = $(e);
+			let t = ln(e);
 			this.onChange(t), t.delayRemainingMs === null && this.clear();
-		}, $t));
+		}, rn));
 	}
 };
-function sn(e, t = !0) {
+function fn(e, t = !0) {
 	return e.maxAdditionalPages === "unlimited" ? Infinity : (e.maxAdditionalPages ?? 10) + (t ? 1 : 0);
 }
-function cn(e) {
+function pn(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function ln(e, t) {
+function mn(e, t) {
 	if (!Number.isInteger(e) || e <= 0) throw TypeError(`Vibe ${t} must be a positive integer.`);
 }
-function un(e) {
+function hn(e) {
 	if (!e) return;
-	if (ln(e.pageSize, "autofill pageSize"), e.strategy === "frontend") {
-		nn(e, "frontend autofill");
+	if (mn(e.pageSize, "autofill pageSize"), e.strategy === "frontend") {
+		sn(e, "frontend autofill");
 		let t = e.maxAdditionalPages;
 		if (t !== void 0 && t !== "unlimited" && (!Number.isInteger(t) || t < 0)) throw TypeError("Vibe autofill maxAdditionalPages must be a non-negative integer or \"unlimited\".");
 		return;
@@ -2627,7 +2758,7 @@ function un(e) {
 		if (t.pageSize !== e.pageSize) throw TypeError("Vibe backend autofill initialSession pageSize must match autofill pageSize.");
 	}
 }
-function dn(e, t, n = !0) {
+function gn(e, t, n = !0) {
 	if (!e) return {
 		cycleId: null,
 		delayRemainingMs: null,
@@ -2644,7 +2775,7 @@ function dn(e, t, n = !0) {
 		status: "idle",
 		strategy: null
 	};
-	let r = e.strategy === "backend" ? t ?? (n ? e.initialSession : void 0) : void 0, i = r?.received ?? 0, a = $(r?.nextRequestAt);
+	let r = e.strategy === "backend" ? t ?? (n ? e.initialSession : void 0) : void 0, i = r?.received ?? 0, a = ln(r?.nextRequestAt);
 	return {
 		cycleId: r?.cycleId ?? null,
 		...a,
@@ -2661,7 +2792,7 @@ function dn(e, t, n = !0) {
 		strategy: e.strategy
 	};
 }
-function fn(e) {
+function _n(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -2669,9 +2800,9 @@ function fn(e) {
 		"waiting"
 	].includes(e.status);
 }
-async function pn(e, t, n) {
+async function vn(e, t, n) {
 	let r = t.autofill;
-	if (!fn(r) || !r.cycleId) return;
+	if (!_n(r) || !r.cycleId) return;
 	let i = {
 		cycleId: r.cycleId,
 		feedKey: r.feedKey ?? "",
@@ -2684,16 +2815,16 @@ async function pn(e, t, n) {
 		throw r.error = e, r.status = "error", e;
 	}
 }
-function mn(e, t, n) {
+function yn(e, t, n) {
 	return e?.strategy === "backend" && t.feedKey === e.feedKey && t.sessionId === n.sessionId;
 }
-async function hn({ existingItems: e, initialCursor: t, loadPage: n, maximumRequests: r, onCollection: i, onDelayChange: a, onProgress: o, options: s, receivedOffset: c = 0, requestOffset: l = 0, shouldPause: u = () => !1, signal: d }) {
-	let f = [], p = [...e], m = /* @__PURE__ */ new Set(), h = r ?? sn(s), g = t, _ = t, v = t, y = 0, b = [], x;
+async function bn({ existingItems: e, initialCursor: t, loadPage: n, maximumRequests: r, onCollection: i, onDelayChange: a, onProgress: o, options: s, receivedOffset: c = 0, requestOffset: l = 0, shouldPause: u = () => !1, signal: d }) {
+	let f = [], p = [...e], m = /* @__PURE__ */ new Set(), h = r ?? fn(s), g = t, _ = t, v = t, y = 0, b = [], x;
 	for (; y < h;) {
-		let e = cn(g);
+		let e = pn(g);
 		if (m.has(e)) throw Error("Vibe autofill received a repeated cursor.");
-		if (m.add(e), await an({
-			delayMs: rn(l + y, s),
+		if (m.add(e), await un({
+			delayMs: cn(l + y, s),
 			onChange: a,
 			signal: d
 		}), y > 0 && u()) return {
@@ -2707,12 +2838,12 @@ async function hn({ existingItems: e, initialCursor: t, loadPage: n, maximumRequ
 			status: "paused",
 			total: x
 		};
-		let t = Gt(await n({
+		let t = Yt(await n({
 			cursor: g,
 			signal: d
 		}));
 		y += 1, _ = g;
-		let r = Q(p, t.items).slice(p.length);
+		let r = $(p, t.items).slice(p.length);
 		b.push({
 			contributionIds: r.map(({ postId: e }) => e),
 			cursor: g,
@@ -2764,12 +2895,12 @@ async function hn({ existingItems: e, initialCursor: t, loadPage: n, maximumRequ
 }
 //#endregion
 //#region src/core/autofillController.ts
-var gn = class {
+var xn = class {
 	collection = null;
 	cycle = 0;
 	delayCountdown;
 	constructor(e) {
-		this.context = e, this.delayCountdown = new on((t) => Object.assign(e.state.autofill, t)), this.syncCountdown();
+		this.context = e, this.delayCountdown = new dn((t) => Object.assign(e.state.autofill, t)), this.syncCountdown();
 	}
 	beginCycle() {
 		let { options: e, state: t } = this.context;
@@ -2777,14 +2908,14 @@ var gn = class {
 		this.clear();
 		let n = `vibe-autofill-${Date.now().toString(36)}-${++this.cycle}`;
 		return t.autofill = {
-			...dn(e, void 0, !1),
+			...gn(e, void 0, !1),
 			cycleId: n,
 			status: "filling"
 		}, n;
 	}
 	async cancel() {
 		let { cancelRequest: e, options: t, state: n } = this.context;
-		await pn(t, n, e), this.commitCollection();
+		await vn(t, n, e), this.commitCollection();
 	}
 	captureCollection(e, t) {
 		t && (this.collection = e);
@@ -2806,36 +2937,36 @@ var gn = class {
 		let { onLastCursor: e, options: t, state: n } = this.context;
 		if (t?.strategy !== "frontend") return !1;
 		let r = this.collection;
-		return this.collection = null, r ? (n.items = Q(n.items, r.items), e(r.lastCursor), this.context.onPages(r.pages), n.next = r.next, r.total !== void 0 && (n.total = r.total), Object.assign(n.autofill, {
+		return this.collection = null, r ? (n.items = $(n.items, r.items), e(r.lastCursor), this.context.onPages(r.pages), n.next = r.next, r.total !== void 0 && (n.total = r.total), Object.assign(n.autofill, {
 			missing: r.missing,
 			received: r.received,
 			requests: r.requests
 		}), !0) : !1;
 	}
-}, _n = 100;
-function vn(e, t) {
+}, Sn = 100;
+function Cn(e, t) {
 	if (!Number.isFinite(t) || t <= 0) throw TypeError(`Vibe ${e} must be a positive number.`);
 }
-function yn(e, t, n) {
+function wn(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function bn(e) {
+function Tn(e) {
 	if (!e) return;
 	let t = e.minSpeedPxPerSecond ?? 20, n = e.maxSpeedPxPerSecond ?? 240;
-	if (vn("autoScroll.minSpeedPxPerSecond", t), vn("autoScroll.maxSpeedPxPerSecond", n), t > n) throw TypeError("Vibe autoScroll.minSpeedPxPerSecond cannot exceed maxSpeedPxPerSecond.");
-	e.speedPxPerSecond !== void 0 && vn("autoScroll.speedPxPerSecond", e.speedPxPerSecond);
+	if (Cn("autoScroll.minSpeedPxPerSecond", t), Cn("autoScroll.maxSpeedPxPerSecond", n), t > n) throw TypeError("Vibe autoScroll.minSpeedPxPerSecond cannot exceed maxSpeedPxPerSecond.");
+	e.speedPxPerSecond !== void 0 && Cn("autoScroll.speedPxPerSecond", e.speedPxPerSecond);
 }
-function xn(e) {
+function En(e) {
 	let t = e?.minSpeedPxPerSecond ?? 20, n = e?.maxSpeedPxPerSecond ?? 240;
 	return {
 		enabled: e?.enabled ?? !1,
 		maxSpeedPxPerSecond: n,
 		minSpeedPxPerSecond: t,
 		paused: !1,
-		speedPxPerSecond: yn(e?.speedPxPerSecond ?? 80, t, n)
+		speedPxPerSecond: wn(e?.speedPxPerSecond ?? 80, t, n)
 	};
 }
-var Sn = class {
+var Dn = class {
 	frame = null;
 	lastTimestamp = null;
 	mounted = !1;
@@ -2855,9 +2986,9 @@ var Sn = class {
 		this.options.state.enabled && (this.options.state.paused = e, this.lastTimestamp = null, e ? this.cancelFrame() : this.schedule());
 	}
 	setSpeed(e) {
-		vn("auto-scroll speed", e);
+		Cn("auto-scroll speed", e);
 		let t = this.options.state;
-		t.speedPxPerSecond = yn(e, t.minSpeedPxPerSecond, t.maxSpeedPxPerSecond);
+		t.speedPxPerSecond = wn(e, t.minSpeedPxPerSecond, t.maxSpeedPxPerSecond);
 	}
 	tick = (e) => {
 		this.frame = null;
@@ -2869,7 +3000,7 @@ var Sn = class {
 			return;
 		}
 		if (this.lastTimestamp !== null) {
-			let r = Math.min(_n, Math.max(0, e - this.lastTimestamp)), i = Math.max(0, n.scrollHeight - n.clientHeight);
+			let r = Math.min(Sn, Math.max(0, e - this.lastTimestamp)), i = Math.max(0, n.scrollHeight - n.clientHeight);
 			n.scrollTop = Math.min(i, n.scrollTop + t.speedPxPerSecond * r / 1e3);
 		}
 		this.lastTimestamp = e, this.schedule();
@@ -2883,13 +3014,13 @@ var Sn = class {
 };
 //#endregion
 //#region src/core/backendAutofill.ts
-async function Cn(e, t, n, r) {
+async function On(e, t, n, r) {
 	let i = await e.onUnderfilled(n);
 	if (!r()) return;
 	if (!i.sessionId.trim()) throw TypeError("Vibe backend autofill requires a sessionId.");
 	let a = Math.max(n.received, i.received ?? n.received);
 	Object.assign(t.autofill, {
-		...$(i.nextRequestAt),
+		...ln(i.nextRequestAt),
 		missing: Math.max(0, e.pageSize - a),
 		received: a,
 		sequence: i.sequence ?? 0,
@@ -2897,19 +3028,19 @@ async function Cn(e, t, n, r) {
 		status: "waiting"
 	});
 }
-function wn(e, t) {
-	["complete", "exhausted"].includes(t.status) && t.items && (e.items = Q(e.items, t.items)), t.next !== void 0 && (e.next = t.next), t.total !== void 0 && (e.total = t.total);
+function kn(e, t) {
+	["complete", "exhausted"].includes(t.status) && t.items && (e.items = $(e.items, t.items)), t.next !== void 0 && (e.next = t.next), t.total !== void 0 && (e.total = t.total);
 }
-function Tn(e, t, n) {
+function An(e, t, n) {
 	let r = t.autofill;
-	return !mn(e, n, r) || n.sequence <= r.sequence || ["cancelled", "cancelling"].includes(r.status) || ["complete", "exhausted"].includes(n.status) && n.next === void 0 ? !1 : (wn(t, n), Object.assign(r, $(n.status === "waiting" ? n.nextRequestAt : null)), r.error = n.error ?? null, r.missing = Math.max(0, (r.pageSize ?? 0) - n.received), r.received = n.received, n.requests !== void 0 && (r.requests = n.requests), r.sequence = n.sequence, r.status = n.status, !0);
+	return !yn(e, n, r) || n.sequence <= r.sequence || ["cancelled", "cancelling"].includes(r.status) || ["complete", "exhausted"].includes(n.status) && n.next === void 0 ? !1 : (kn(t, n), Object.assign(r, ln(n.status === "waiting" ? n.nextRequestAt : null)), r.error = n.error ?? null, r.missing = Math.max(0, (r.pageSize ?? 0) - n.received), r.received = n.received, n.requests !== void 0 && (r.requests = n.requests), r.sequence = n.sequence, r.status = n.status, !0);
 }
-function En(e, t, n) {
-	return e?.strategy !== "backend" || n.feedKey !== e.feedKey || n.pageSize !== e.pageSize ? !1 : (t.autofill = dn(e, n), wn(t, n), !0);
+function jn(e, t, n) {
+	return e?.strategy !== "backend" || n.feedKey !== e.feedKey || n.pageSize !== e.pageSize ? !1 : (t.autofill = gn(e, n), kn(t, n), !0);
 }
 //#endregion
 //#region src/core/backlogRestore.ts
-async function Dn(e, t, n) {
+async function Mn(e, t, n) {
 	if (!e) return;
 	let r = new AbortController();
 	n(r);
@@ -2924,7 +3055,7 @@ async function Dn(e, t, n) {
 }
 //#endregion
 //#region src/core/initialAutofill.ts
-async function On({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r, onPages: i, options: a, signal: o, state: s }) {
+async function Nn({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r, onPages: i, options: a, signal: o, state: s }) {
 	let c = a.autofill;
 	if (!c) return;
 	let l = s.items.length;
@@ -2937,7 +3068,7 @@ async function On({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r,
 		return;
 	}
 	if (c.strategy === "backend") {
-		await Cn(c, s, {
+		await On(c, s, {
 			cycleId: e,
 			feedKey: c.feedKey,
 			items: [...s.items],
@@ -2954,11 +3085,11 @@ async function On({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r,
 		s.autofill.status = "exhausted";
 		return;
 	}
-	let u = await hn({
+	let u = await bn({
 		existingItems: s.items,
 		initialCursor: s.next,
 		loadPage: a.loadPage,
-		maximumRequests: sn(c, !1),
+		maximumRequests: fn(c, !1),
 		onCollection: n,
 		onDelayChange: (e) => {
 			t() && Object.assign(s.autofill, e);
@@ -2972,7 +3103,7 @@ async function On({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r,
 		shouldPause: () => s.loadMoreLocked,
 		signal: o
 	});
-	t() && (s.items = Q(s.items, u.items), s.next = u.next, u.total !== void 0 && (s.total = u.total), r(u.lastCursor), i(u.pages), Object.assign(s.autofill, {
+	t() && (s.items = $(s.items, u.items), s.next = u.next, u.total !== void 0 && (s.total = u.total), r(u.lastCursor), i(u.pages), Object.assign(s.autofill, {
 		missing: u.missing,
 		received: u.received,
 		requests: u.requests,
@@ -2981,13 +3112,13 @@ async function On({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r,
 }
 //#endregion
 //#region src/core/fill.ts
-function kn(e) {
+function Pn(e) {
 	return "items" in e ? { items: e.items } : "pages" in e ? { pages: e.pages } : { until: "end" };
 }
-function An(e) {
+function Fn(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function jn(e) {
+function In(e) {
 	if (!e || typeof e != "object") throw TypeError("Vibe fill target must be an object.");
 	if ("pages" in e) {
 		if (!Number.isInteger(e.pages) || e.pages <= 0) throw TypeError("Vibe fill pages must be a positive integer.");
@@ -3000,21 +3131,21 @@ function jn(e) {
 	if ("until" in e && e.until === "end") return { until: "end" };
 	throw TypeError("Vibe fill target must be { items }, { pages }, or { until: 'end' }.");
 }
-function Mn(e) {
+function Ln(e) {
 	if (!e) return;
 	if (e.strategy === "frontend") {
-		nn(e, "frontend fill");
+		sn(e, "frontend fill");
 		return;
 	}
 	if (!e.feedKey.trim()) throw TypeError("Vibe backend fill requires a feedKey.");
 	let t = e.initialSession;
 	if (t) {
 		if (t.feedKey !== e.feedKey) throw TypeError("Vibe backend fill initialSession feedKey must match fill feedKey.");
-		jn(t.target);
+		In(t.target);
 	}
 }
-function Nn(e, t, n = !0) {
-	let r = e?.strategy === "backend" && n ? e.initialSession : void 0, i = t ?? r, a = $(i?.nextRequestAt);
+function Rn(e, t, n = !0) {
+	let r = e?.strategy === "backend" && n ? e.initialSession : void 0, i = t ?? r, a = ln(i?.nextRequestAt);
 	return {
 		completedPages: i?.completedPages ?? 0,
 		cycleId: i?.cycleId ?? null,
@@ -3027,10 +3158,10 @@ function Nn(e, t, n = !0) {
 		sessionId: i?.sessionId ?? null,
 		status: i?.status ?? "idle",
 		strategy: e?.strategy ?? null,
-		target: i ? kn(i.target) : null
+		target: i ? Pn(i.target) : null
 	};
 }
-function Pn(e) {
+function zn(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -3038,7 +3169,7 @@ function Pn(e) {
 		"waiting"
 	].includes(e.status);
 }
-async function Fn({ existingItems: e, initialCursor: t, loadPage: n, onCollection: r = () => void 0, onDelayChange: i, onProgress: a, options: o, shouldPause: s = () => !1, signal: c, target: l }) {
+async function Bn({ existingItems: e, initialCursor: t, loadPage: n, onCollection: r = () => void 0, onDelayChange: i, onProgress: a, options: o, shouldPause: s = () => !1, signal: c, target: l }) {
 	let u = [], d = [], f = [...e], p = /* @__PURE__ */ new Set(), m = 0, h = t, g = t, _ = t, v = 0, y;
 	if ("items" in l && f.length >= l.items) return {
 		completedPages: m,
@@ -3050,10 +3181,10 @@ async function Fn({ existingItems: e, initialCursor: t, loadPage: n, onCollectio
 		status: "complete"
 	};
 	for (; _ !== null;) {
-		let e = An(h);
+		let e = Fn(h);
 		if (p.has(e)) throw Error("Vibe fill received a repeated cursor.");
-		if (p.add(e), await an({
-			delayMs: rn(m, o),
+		if (p.add(e), await un({
+			delayMs: cn(m, o),
 			onChange: i,
 			signal: c
 		}), m > 0 && s()) return {
@@ -3066,12 +3197,12 @@ async function Fn({ existingItems: e, initialCursor: t, loadPage: n, onCollectio
 			status: "paused",
 			total: y
 		};
-		let t = Gt(await n({
+		let t = Yt(await n({
 			cursor: h,
 			signal: c
 		}));
 		m += 1, g = h;
-		let b = Q(f, t.items).slice(f.length);
+		let b = $(f, t.items).slice(f.length);
 		if (d.push({
 			contributionIds: b.map(({ postId: e }) => e),
 			cursor: h,
@@ -3134,12 +3265,12 @@ async function Fn({ existingItems: e, initialCursor: t, loadPage: n, onCollectio
 }
 //#endregion
 //#region src/core/backendFill.ts
-async function In(e, t, n, r) {
+async function Vn(e, t, n, r) {
 	let i = await e.onStart(n);
 	if (r()) {
 		if (!i.sessionId.trim()) throw TypeError("Vibe backend fill requires a sessionId.");
 		Object.assign(t.fill, {
-			...$(i.nextRequestAt),
+			...ln(i.nextRequestAt),
 			completedPages: i.completedPages ?? 0,
 			received: i.received ?? 0,
 			sequence: i.sequence ?? 0,
@@ -3148,23 +3279,23 @@ async function In(e, t, n, r) {
 		});
 	}
 }
-function Ln(e, t, n) {
+function Hn(e, t, n) {
 	return e?.strategy === "backend" && n.feedKey === e.feedKey && n.sessionId === t.fill.sessionId;
 }
-function Rn(e) {
+function Un(e) {
 	return Number.isInteger(e.completedPages) && e.completedPages >= 0 && Number.isInteger(e.received) && e.received >= 0 && Number.isInteger(e.sequence) && e.sequence >= 0;
 }
-function zn(e, t) {
+function Wn(e, t) {
 	if (!["complete", "exhausted"].includes(t.status)) return !0;
 	let n = e.fill.target;
 	return !n || !Array.isArray(t.items) || t.next === void 0 || t.lastCursor === void 0 ? !1 : t.status === "exhausted" ? "pages" in n && t.completedPages < n.pages && t.next === null : "pages" in n ? t.completedPages === n.pages : t.next === null;
 }
-function Bn(e, t, n) {
-	t.total !== void 0 && (e.total = t.total), ["complete", "exhausted"].includes(t.status) && (e.items = Q(e.items, t.items ?? []), e.next = t.next ?? null, n(t.lastCursor ?? null));
+function Gn(e, t, n) {
+	t.total !== void 0 && (e.total = t.total), ["complete", "exhausted"].includes(t.status) && (e.items = $(e.items, t.items ?? []), e.next = t.next ?? null, n(t.lastCursor ?? null));
 }
-function Vn(e, t, n, r) {
-	return !Ln(e, t, n) || !Rn(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !zn(t, n) ? !1 : (Bn(t, n, r), Object.assign(t.fill, {
-		...$(n.status === "waiting" ? n.nextRequestAt : null),
+function Kn(e, t, n, r) {
+	return !Hn(e, t, n) || !Un(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !Wn(t, n) ? !1 : (Gn(t, n, r), Object.assign(t.fill, {
+		...ln(n.status === "waiting" ? n.nextRequestAt : null),
 		completedPages: n.completedPages,
 		error: n.error ?? null,
 		received: n.received,
@@ -3172,45 +3303,45 @@ function Vn(e, t, n, r) {
 		status: n.status
 	}), !0);
 }
-function Hn(e, t, n, r) {
+function qn(e, t, n, r) {
 	if (e?.strategy !== "backend" || n.feedKey !== e.feedKey) return !1;
 	let i = t.fill;
-	return t.fill = Nn(e, n), !Rn(n) || !zn(t, n) ? (t.fill = i, !1) : (Bn(t, n, r), !0);
+	return t.fill = Rn(e, n), !Un(n) || !Wn(t, n) ? (t.fill = i, !1) : (Gn(t, n, r), !0);
 }
 //#endregion
 //#region src/core/fillController.ts
-var Un = class {
+var Jn = class {
 	abortController = null;
 	cycle = 0;
 	delayCountdown;
 	requestVersion = 0;
 	collection = null;
 	constructor(e) {
-		this.options = e, this.delayCountdown = new on((e) => {
+		this.options = e, this.delayCountdown = new dn((e) => {
 			Object.assign(this.options.state.fill, e);
 		}), this.syncBackendCountdown();
 	}
 	isActive() {
-		return Pn(this.options.state.fill);
+		return zn(this.options.state.fill);
 	}
 	applyUpdate(e) {
-		let t = Vn(this.options.fill, this.options.state, e, this.options.onLastCursor);
+		let t = Kn(this.options.fill, this.options.state, e, this.options.onLastCursor);
 		return t && this.syncBackendCountdown(), t;
 	}
 	restoreSession(e) {
-		let t = Hn(this.options.fill, this.options.state, e, this.options.onLastCursor);
+		let t = qn(this.options.fill, this.options.state, e, this.options.onLastCursor);
 		return t && this.syncBackendCountdown(), t;
 	}
 	async start(e, t = {}) {
 		let n = this.options.fill;
 		if (!n) throw Error("Vibe fill is not configured.");
 		if (this.isActive()) throw Error("Vibe fill is already active.");
-		let r = jn(e), i = jn(t.target ?? r), a = t.progressOffset ?? {
+		let r = In(e), i = In(t.target ?? r), a = t.progressOffset ?? {
 			completedPages: 0,
 			received: 0
 		}, o = t.cycleId ?? `vibe-fill-${Date.now().toString(36)}-${++this.cycle}`;
 		if (this.options.state.fill = {
-			...Nn(n, void 0, !1),
+			...Rn(n, void 0, !1),
 			completedPages: a.completedPages,
 			cycleId: o,
 			received: a.received,
@@ -3223,7 +3354,7 @@ var Un = class {
 		let s = ++this.requestVersion, c = new AbortController();
 		this.abortController = c;
 		try {
-			n.strategy === "frontend" ? await this.startFrontend(n, r, c, s, t.prepareFrontend !== !1, a) : (await In(n, this.options.state, {
+			n.strategy === "frontend" ? await this.startFrontend(n, r, c, s, t.prepareFrontend !== !1, a) : (await Vn(n, this.options.state, {
 				cycleId: o,
 				feedKey: n.feedKey,
 				items: [...this.options.state.items],
@@ -3241,7 +3372,7 @@ var Un = class {
 	}
 	async cancel() {
 		let { fill: e, state: t } = this.options;
-		if (!Pn(t.fill) || !t.fill.cycleId) return;
+		if (!zn(t.fill) || !t.fill.cycleId) return;
 		let n = {
 			cycleId: t.fill.cycleId,
 			feedKey: t.fill.feedKey ?? "",
@@ -3285,7 +3416,7 @@ var Un = class {
 		});
 	}
 	reset() {
-		this.abortLocalRequest(), this.delayCountdown.clear(), this.options.state.fill = Nn(this.options.fill, void 0, !1), this.collection = null;
+		this.abortLocalRequest(), this.delayCountdown.clear(), this.options.state.fill = Rn(this.options.fill, void 0, !1), this.collection = null;
 	}
 	destroy() {
 		this.abortLocalRequest(), this.delayCountdown.clear();
@@ -3320,7 +3451,7 @@ var Un = class {
 			s.fill.status = "until" in t ? "complete" : "exhausted";
 			return;
 		}
-		let c = await Fn({
+		let c = await Bn({
 			existingItems: s.items,
 			initialCursor: s.next,
 			loadPage: o,
@@ -3346,7 +3477,7 @@ var Un = class {
 			signal: n.signal,
 			target: t
 		});
-		this.isCurrent(r) && (s.items = Q(s.items, c.items), s.next = c.next, c.total !== void 0 && (s.total = c.total), this.options.onLastCursor(c.lastCursor), Object.assign(s.fill, {
+		this.isCurrent(r) && (s.items = $(s.items, c.items), s.next = c.next, c.total !== void 0 && (s.total = c.total), this.options.onLastCursor(c.lastCursor), Object.assign(s.fill, {
 			completedPages: a.completedPages + c.completedPages,
 			received: a.received + c.received,
 			status: c.status
@@ -3356,7 +3487,7 @@ var Un = class {
 		let e = this.collection;
 		if (this.collection = null, !e || this.options.fill?.strategy !== "frontend") return;
 		let t = this.options.state;
-		t.items = Q(t.items, e.items), t.next = e.next, e.total !== void 0 && (t.total = e.total), this.options.onLastCursor(e.lastCursor), this.options.onPages(e.pages), Object.assign(t.fill, {
+		t.items = $(t.items, e.items), t.next = e.next, e.total !== void 0 && (t.total = e.total), this.options.onLastCursor(e.lastCursor), this.options.onPages(e.pages), Object.assign(t.fill, {
 			completedPages: e.completedPages,
 			received: e.received
 		});
@@ -3368,7 +3499,7 @@ var Un = class {
 };
 //#endregion
 //#region src/core/fillReconciliation.ts
-async function Wn({ controller: e, isCurrent: t, loadPage: n, onDelayChange: r, setLastCursor: i, signal: a, state: o }) {
+async function Yn({ controller: e, isCurrent: t, loadPage: n, onDelayChange: r, setLastCursor: i, signal: a, state: o }) {
 	if (!e.needsReconciliation(o.items)) return "skipped";
 	let s = await e.reconcile({
 		existingItems: o.items,
@@ -3377,11 +3508,11 @@ async function Wn({ controller: e, isCurrent: t, loadPage: n, onDelayChange: r,
 		shouldPause: () => o.loadMoreLocked,
 		signal: a
 	});
-	return t() ? (o.items = Q(o.items, s.items), o.next = s.next, i(s.lastCursor), s.total !== void 0 && (o.total = s.total), e.completeReconciliation(s), s.status) : s.status;
+	return t() ? (o.items = $(o.items, s.items), o.next = s.next, i(s.lastCursor), s.total !== void 0 && (o.total = s.total), e.completeReconciliation(s), s.status) : s.status;
 }
 //#endregion
 //#region src/core/feedFooter.ts
-function Gn(e) {
+function Xn(e) {
 	return {
 		cancelAutofill: () => e.cancelAutofill(),
 		loadMore: () => e.loadNext(),
@@ -3393,64 +3524,64 @@ function Gn(e) {
 		retryFill: () => e.retryFill()
 	};
 }
-function Kn(e) {
+function Zn(e) {
 	if (!Number.isFinite(e) || e <= 0) throw TypeError("Vibe reelAutoAdvance.intervalMs must be a positive number.");
 }
-function qn(e) {
-	e?.intervalMs !== void 0 && Kn(e.intervalMs);
+function Qn(e) {
+	e?.intervalMs !== void 0 && Zn(e.intervalMs);
 }
-function Jn(e) {
+function $n(e) {
 	return {
 		enabled: e?.enabled ?? !1,
 		includePostItems: e?.includePostItems ?? !1,
 		intervalMs: e?.intervalMs ?? 5e3
 	};
 }
-function Yn(e, t) {
+function er(e, t) {
 	if (typeof t == "boolean") {
 		e.enabled = t;
 		return;
 	}
-	qn(t), t.enabled !== void 0 && (e.enabled = t.enabled), t.includePostItems !== void 0 && (e.includePostItems = t.includePostItems), t.intervalMs !== void 0 && (e.intervalMs = t.intervalMs);
+	Qn(t), t.enabled !== void 0 && (e.enabled = t.enabled), t.includePostItems !== void 0 && (e.includePostItems = t.includePostItems), t.intervalMs !== void 0 && (e.intervalMs = t.intervalMs);
 }
 //#endregion
 //#region src/core/reelInfoSheet.ts
-function Xn(e) {
+function tr(e) {
 	return { enabled: e?.enabled ?? !1 };
 }
-function Zn(e, t, n) {
+function nr(e, t, n) {
 	if (n && !t) throw Error("Vibe cannot enable reelInfoSheet without a configured component.");
 	e.enabled = n;
 }
 //#endregion
 //#region src/core/initialRuntimeState.ts
-function Qn(e, t) {
+function rr(e, t) {
 	let n = e.initialPage;
 	return {
 		activeReelPostId: null,
-		autoScroll: xn(e.autoScroll),
-		autofill: dn(e.autofill),
+		autoScroll: En(e.autoScroll),
+		autofill: gn(e.autofill),
 		current: n?.current ?? null,
 		error: null,
-		fill: Nn(e.fill),
+		fill: Rn(e.fill),
 		infiniteScroll: e.infiniteScroll ?? !0,
 		isLoading: !n,
 		isLoadingMore: !1,
-		items: n ? Q([], n.items) : [],
+		items: n ? $([], n.items) : [],
 		layout: t === "reel" ? "reel" : "masonry",
 		loadMoreLocked: !1,
 		mediaIndices: /* @__PURE__ */ new Map(),
 		next: n?.next ?? null,
 		nextPageError: null,
 		phoneMode: !1,
-		reelAutoAdvance: Jn(e.reelAutoAdvance),
+		reelAutoAdvance: $n(e.reelAutoAdvance),
 		reelForward: {
 			error: null,
 			status: "idle"
 		},
 		reelForwardIndex: null,
 		reelForwardItem: null,
-		reelInfoSheet: Xn(e.reelInfoSheet),
+		reelInfoSheet: tr(e.reelInfoSheet),
 		reelInfoSheetOverlay: !1,
 		reelMediaSource: "original",
 		reelOrigin: null,
@@ -3459,20 +3590,20 @@ function Qn(e, t) {
 }
 //#endregion
 //#region src/core/options.ts
-function $n(e, t) {
+function ir(e, t) {
 	if (t) {
 		if (!Number.isFinite(t.height) || t.height <= 0) throw TypeError(`Vibe ${e} height must be a positive number.`);
 		if (t.background !== void 0 && t.background !== "default" && t.background !== "transparent") throw TypeError(`Vibe ${e} background must be "default" or "transparent".`);
 	}
 }
-function er(e, t) {
+function ar(e, t) {
 	if (t) {
 		if (t.background !== void 0 && t.background !== "default" && t.background !== "transparent") throw TypeError(`Vibe mediaCard ${e} background must be "default" or "transparent".`);
 		for (let [n, r] of [["paddingX", t.paddingX], ["paddingY", t.paddingY]]) if (r !== void 0 && (!Number.isFinite(r) || r < 0)) throw TypeError(`Vibe mediaCard ${e} ${n} must be a non-negative number.`);
 	}
 }
-function tr(e) {
-	if (bn(e.autoScroll), $n("cardHeader", e.cardHeader), $n("cardFooter", e.cardFooter), er("header", e.mediaCard?.header), er("footer", e.mediaCard?.footer), un(e.autofill), Mn(e.fill), ce(e.masonry), qn(e.reelAutoAdvance), e.removalReconciliation) {
+function or(e) {
+	if (Tn(e.autoScroll), ir("cardHeader", e.cardHeader), ir("cardFooter", e.cardFooter), ar("header", e.mediaCard?.header), ar("footer", e.mediaCard?.footer), hn(e.autofill), Ln(e.fill), le(e.masonry), Qn(e.reelAutoAdvance), e.removalReconciliation) {
 		if (!Number.isInteger(e.removalReconciliation.pageSize) || e.removalReconciliation.pageSize <= 0) throw TypeError("Vibe removalReconciliation pageSize must be a positive integer.");
 		let t = e.removalReconciliation.maxReplayPages ?? 5;
 		if (!Number.isInteger(t) || t <= 0) throw TypeError("Vibe removalReconciliation maxReplayPages must be a positive integer.");
@@ -3487,7 +3618,7 @@ function tr(e) {
 	if (e.fill?.strategy === "frontend" && !e.loadPage) throw TypeError("Vibe frontend fill requires loadPage.");
 	if (e.fill?.strategy === "backend" && e.fill.initialSession && !e.initialPage) throw TypeError("Vibe backend fill restoration requires initialPage.");
 }
-function nr(e) {
+function sr(e) {
 	if (typeof e != "string") return e;
 	if (typeof document > "u") throw Error("Vibe cannot resolve a selector without a document.");
 	let t = document.querySelector(e);
@@ -3496,7 +3627,7 @@ function nr(e) {
 }
 //#endregion
 //#region src/core/pageRequest.ts
-async function rr({ append: e, autofillController: t, cursor: n, isCurrent: r, loadPage: i, onLastCursor: a, onPages: o, options: s, signal: c, state: l }) {
+async function cr({ append: e, autofillController: t, cursor: n, isCurrent: r, loadPage: i, onLastCursor: a, onPages: o, options: s, signal: c, state: l }) {
 	let u = s.autofill, d = e && u?.strategy === "frontend" && (l.autofill.status === "paused" || l.autofill.status === "error"), f = d ? {
 		received: l.autofill.received,
 		requests: l.autofill.requests
@@ -3508,11 +3639,11 @@ async function rr({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 	let m = !1;
 	try {
 		if (u?.strategy === "frontend") {
-			let s = await hn({
+			let s = await bn({
 				existingItems: e ? l.items : [],
 				initialCursor: n,
 				loadPage: i,
-				maximumRequests: f ? Math.max(0, sn(u) - f.requests) : void 0,
+				maximumRequests: f ? Math.max(0, fn(u) - f.requests) : void 0,
 				onCollection: (e) => t.captureCollection(e, r()),
 				onDelayChange: (e) => {
 					r() && Object.assign(l.autofill, e);
@@ -3527,7 +3658,7 @@ async function rr({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 				signal: c
 			});
 			if (!r()) return;
-			l.items = e ? Q(l.items, s.items) : [...s.items], a(s.lastCursor), l.next = s.next, s.total !== void 0 && (l.total = s.total), Object.assign(l.autofill, {
+			l.items = e ? $(l.items, s.items) : [...s.items], a(s.lastCursor), l.next = s.next, s.total !== void 0 && (l.total = s.total), Object.assign(l.autofill, {
 				missing: s.missing,
 				received: s.received,
 				requests: s.requests,
@@ -3535,12 +3666,12 @@ async function rr({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 			}), o(s.pages), t.clearCollection();
 			return;
 		}
-		let s = Gt(await i({
+		let s = Yt(await i({
 			cursor: n,
 			signal: c
 		}));
 		if (!r()) return;
-		let d = e ? l.items : [], h = Q(d, s.items), g = h.length - d.length;
+		let d = e ? l.items : [], h = $(d, s.items), g = h.length - d.length;
 		if (l.items = h, a(n), o([{
 			contributionIds: h.slice(d.length).map(({ postId: e }) => e),
 			cursor: n,
@@ -3555,7 +3686,7 @@ async function rr({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 				l.autofill.status = "complete";
 				return;
 			}
-			await Cn(u, l, {
+			await On(u, l, {
 				cycleId: p,
 				feedKey: u.feedKey,
 				items: h.slice(d.length),
@@ -3577,16 +3708,16 @@ async function rr({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 }
 //#endregion
 //#region src/core/removalReconciliationController.ts
-function ir(e) {
+function lr(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function ar(e) {
+function ur(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function or(e) {
+function dr(e) {
 	return e.map(({ postId: e }) => e);
 }
-var sr = class {
+var fr = class {
 	delay;
 	enabled;
 	maxReplayPages;
@@ -3605,7 +3736,7 @@ var sr = class {
 		e.status === "complete" && (this.pages = [...this.pages.slice(0, e.replaceFrom), ...e.pages].slice(-this.maxReplayPages), this.pending = null);
 	}
 	filterItems(e) {
-		return this.tombstones.size === 0 ? [...e] : e.filter(({ postId: e }) => !this.tombstones.has(ir(e)));
+		return this.tombstones.size === 0 ? [...e] : e.filter(({ postId: e }) => !this.tombstones.has(lr(e)));
 	}
 	needsReconciliation(e) {
 		return this.pending !== null || this.findUnderfilledPage(e) >= 0;
@@ -3618,45 +3749,45 @@ var sr = class {
 	}
 	recordInitialPage(e) {
 		e && this.recordPages([{
-			contributionIds: or(e.items),
-			cursor: Yt(e),
+			contributionIds: dr(e.items),
+			cursor: $t(e),
 			next: e.next,
-			returnedIds: or(e.items)
+			returnedIds: dr(e.items)
 		}]);
 	}
 	remove(e) {
-		e.forEach((e) => this.tombstones.add(ir(e)));
+		e.forEach((e) => this.tombstones.add(lr(e)));
 	}
 	reset() {
 		this.pages = [], this.pending = null, this.tombstones.clear();
 	}
 	restore(e) {
-		e.forEach((e) => this.tombstones.delete(ir(e)));
+		e.forEach((e) => this.tombstones.delete(lr(e)));
 	}
 	async reconcile({ existingItems: e, loadPage: t, onDelayChange: n = () => void 0, shouldPause: r = () => !1, signal: i }) {
 		let a = this.pending ?? this.createSession(e);
 		for (this.pending = a; a.remainingRequests > 0;) {
-			let e = ar(a.cursor);
+			let e = ur(a.cursor);
 			if (a.seenCursors.has(e)) throw Error("Vibe removal reconciliation received a repeated cursor.");
-			if (await an({
-				delayMs: rn(a.pages.length, this.delay),
+			if (await un({
+				delayMs: cn(a.pages.length, this.delay),
 				onChange: n,
 				signal: i
 			}), a.pages.length > 0 && r()) return this.result(a, "paused");
-			let o = Gt(await t({
+			let o = Yt(await t({
 				cursor: a.cursor,
 				signal: i
 			}));
 			a.seenCursors.add(e);
 			let s = this.filterItems(o.items), c = [];
 			if (s.forEach((e) => {
-				let t = ir(e.postId);
+				let t = lr(e.postId);
 				a.attributed.has(t) || (a.attributed.add(t), c.push(e.postId)), a.appended.has(t) || (a.appended.add(t), a.items.push(e));
 			}), a.pages.push({
 				contributionIds: c,
 				cursor: a.cursor,
 				next: o.next,
-				returnedIds: or(s)
+				returnedIds: dr(s)
 			}), a.lastCursor = a.cursor, a.next = o.next, --a.remainingRequests, o.total !== void 0 && (a.total = o.total), a.next === null ? a.remainingRequests = 0 : a.cursor = a.next, a.remainingRequests > 0 && r()) return this.result(a, "paused");
 		}
 		return this.result(a, "complete");
@@ -3664,9 +3795,9 @@ var sr = class {
 	createSession(e) {
 		let t = this.findUnderfilledPage(e), n = t < 0 ? [] : this.pages.slice(t), r = n[0];
 		if (!r) throw Error("Vibe has no underfilled provider page to reconcile.");
-		let i = new Set(n.flatMap(({ contributionIds: e }) => e.map(ir))), a = new Set(e.map(({ postId: e }) => ir(e)).filter((e) => !i.has(e)));
+		let i = new Set(n.flatMap(({ contributionIds: e }) => e.map(lr))), a = new Set(e.map(({ postId: e }) => lr(e)).filter((e) => !i.has(e)));
 		return {
-			appended: new Set(e.map(({ postId: e }) => ir(e))),
+			appended: new Set(e.map(({ postId: e }) => lr(e))),
 			attributed: new Set(a),
 			cursor: r.cursor,
 			items: [],
@@ -3691,11 +3822,11 @@ var sr = class {
 	}
 	findUnderfilledPage(e) {
 		if (!this.enabled || this.pages.length === 0) return -1;
-		let t = new Set(e.map(({ postId: e }) => ir(e)));
-		return this.pages.findIndex(({ contributionIds: e }) => e.filter((e) => t.has(ir(e))).length < this.pageSize);
+		let t = new Set(e.map(({ postId: e }) => lr(e)));
+		return this.pages.findIndex(({ contributionIds: e }) => e.filter((e) => t.has(lr(e))).length < this.pageSize);
 	}
 	recordPage(e) {
-		let t = ar(e.cursor), n = this.pages.findIndex(({ cursor: e }) => ar(e) === t);
+		let t = ur(e.cursor), n = this.pages.findIndex(({ cursor: e }) => ur(e) === t);
 		n >= 0 && (this.pages = this.pages.slice(0, n)), this.pages.push({
 			...e,
 			contributionIds: [...e.contributionIds],
@@ -3705,7 +3836,7 @@ var sr = class {
 };
 //#endregion
 //#region src/core/activeItemRemoval.ts
-function cr(e, t, n, r, i) {
+function pr(e, t, n, r, i) {
 	let a = new Set(t.map(({ item: e }) => e.postId));
 	if (e.activeReelPostId === null || !a.has(e.activeReelPostId)) return;
 	let o = e.items[Math.max(n, 0)];
@@ -3718,7 +3849,7 @@ function cr(e, t, n, r, i) {
 }
 //#endregion
 //#region src/core/exactMediaRemovalController.ts
-function lr(e, t) {
+function mr(e, t) {
 	let [n, ...r] = t;
 	if (!n) throw Error("Vibe items must contain at least one media asset.");
 	return {
@@ -3727,10 +3858,10 @@ function lr(e, t) {
 		items: r
 	};
 }
-function ur(e) {
+function hr(e) {
 	if (!Number.isInteger(e.mediaIndex) || e.mediaIndex < 0) throw TypeError("Vibe mediaIndex must be a non-negative integer.");
 }
-var dr = class {
+var gr = class {
 	generation = 0;
 	metadata = /* @__PURE__ */ new WeakMap();
 	state;
@@ -3738,7 +3869,7 @@ var dr = class {
 		this.options = e, this.state = e.state;
 	}
 	remove(e) {
-		ur(e);
+		hr(e);
 		let t = this.state.items.findIndex(({ postId: t }) => t === e.postId), n = this.state.items[t];
 		if (!n) return null;
 		let r = [...P(n)], i = r[e.mediaIndex];
@@ -3755,7 +3886,7 @@ var dr = class {
 			restored: !1
 		});
 		let o = this.state.mediaIndices.get(n.postId) ?? 0, s = this.isReelOpen() && this.state.activeReelPostId === n.postId, c = s && o === e.mediaIndex;
-		return r.splice(e.mediaIndex, 1), r.length > 0 ? (this.state.items[t] = lr(n, r), this.updateMediaIndexAfterRemoval(n.postId, e.mediaIndex, c), a) : (this.state.items.splice(t, 1), this.options.onPostRemoved(n.postId), this.state.mediaIndices.delete(n.postId), s && this.advanceFromRemovedPost(a, n), a);
+		return r.splice(e.mediaIndex, 1), r.length > 0 ? (this.state.items[t] = mr(n, r), this.updateMediaIndexAfterRemoval(n.postId, e.mediaIndex, c), a) : (this.state.items.splice(t, 1), this.options.onPostRemoved(n.postId), this.state.mediaIndices.delete(n.postId), s && this.advanceFromRemovedPost(a, n), a);
 	}
 	reset() {
 		this.generation += 1;
@@ -3781,7 +3912,7 @@ var dr = class {
 	}
 	restoreIntoPost(e, t) {
 		let n = this.state.items[e], r = [...P(n)], i = Math.min(t.mediaIndex, r.length);
-		if (r.splice(i, 0, t.media), this.state.items[e] = lr(n, r), this.state.activeReelPostId !== t.postId) return;
+		if (r.splice(i, 0, t.media), this.state.items[e] = mr(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);
 	}
@@ -3794,18 +3925,18 @@ var dr = class {
 };
 //#endregion
 //#region src/core/itemPlacement.ts
-function fr(e, t) {
+function _r(e, t) {
 	let n = new Set(t);
 	return e.flatMap((e, t) => n.has(e.postId) ? [{
 		index: t,
 		item: e
 	}] : []);
 }
-function pr(e, t) {
+function vr(e, t) {
 	let n = new Set(t.map(({ item: e }) => e.postId));
 	return e.filter((e) => !n.has(e.postId));
 }
-function mr(e, t) {
+function yr(e, t) {
 	t.forEach(({ index: e }) => {
 		if (!Number.isInteger(e) || e < 0) throw Error("Vibe item restore indexes must be non-negative integers.");
 	});
@@ -3816,7 +3947,7 @@ function mr(e, t) {
 }
 //#endregion
 //#region src/core/itemRemovalController.ts
-var hr = 20, gr = class {
+var br = 20, xr = class {
 	generation = 0;
 	historyLimit;
 	metadata = /* @__PURE__ */ new WeakMap();
@@ -3825,7 +3956,7 @@ var hr = 20, gr = class {
 	itemOrder;
 	stopItemsWatcher;
 	constructor(e) {
-		this.options = e, this.historyLimit = e.historyLimit ?? hr, this.state = e.state, this.itemOrder = this.state.items.map(({ postId: e }) => e), this.stopItemsWatcher = O(() => this.state.items, (e) => this.appendUnknownItems(e), { flush: "sync" });
+		this.options = e, this.historyLimit = e.historyLimit ?? br, this.state = e.state, this.itemOrder = this.state.items.map(({ postId: e }) => e), this.stopItemsWatcher = O(() => this.state.items, (e) => this.appendUnknownItems(e), { flush: "sync" });
 	}
 	destroy() {
 		this.reset(), this.stopItemsWatcher();
@@ -3839,7 +3970,7 @@ var hr = 20, gr = class {
 		let a = this.options.startRemoval(i, t);
 		if (a > 0 && await new Promise((e) => setTimeout(e, a)), this.metadata.get(r)?.generation !== this.generation) return r;
 		let o = this.state.items.findIndex((e) => e.postId === this.state.activeReelPostId), s = new Set(n.map(({ item: e }) => e.postId)), c = o < 0 ? 0 : this.state.items.slice(0, o).filter(({ postId: e }) => s.has(e)).length, l = Math.max(o - c, 0);
-		return this.state.items = pr(this.state.items, n), this.options.onItemsRemoved(r, n, l), this.record(r), r;
+		return this.state.items = vr(this.state.items, n), this.options.onItemsRemoved(r, n, l), this.record(r), r;
 	}
 	reset() {
 		this.generation += 1, this.history = [], this.itemOrder = [];
@@ -3850,7 +3981,7 @@ var hr = 20, gr = class {
 			this.restoreRemoval(t);
 			return;
 		}
-		let n = new Set(this.state.items.map(({ postId: e }) => e)), r = e.filter(({ item: e }) => n.has(e.postId) ? !1 : (n.add(e.postId), !0)), i = mr(this.state.items, r);
+		let n = new Set(this.state.items.map(({ postId: e }) => e)), r = e.filter(({ item: e }) => n.has(e.postId) ? !1 : (n.add(e.postId), !0)), i = yr(this.state.items, r);
 		this.registerExternalPlacements(r), this.state.items = i, r.length > 0 && this.options.onRemovalRestored(r);
 	}
 	restoreRemoval(e) {
@@ -3876,7 +4007,7 @@ var hr = 20, gr = class {
 	}
 	collectOrderedPlacements(e) {
 		let t = new Map(this.itemOrder.map((e, t) => [e, t]));
-		return fr(this.state.items, e).map((e) => ({
+		return _r(this.state.items, e).map((e) => ({
 			index: t.get(e.item.postId) ?? e.index,
 			item: e.item
 		}));
@@ -3907,7 +4038,7 @@ var hr = 20, gr = class {
 		let r = new Map(this.itemOrder.map((e, t) => [e, t]));
 		return this.state.items = [...this.state.items, ...n].sort((e, t) => (r.get(e.postId) ?? 2 ** 53 - 1) - (r.get(t.postId) ?? 2 ** 53 - 1)), !0;
 	}
-}, _r = class {
+}, Sr = class {
 	forward = null;
 	forwardPromise = null;
 	forwardVersion = 0;
@@ -3994,7 +4125,7 @@ var hr = 20, gr = class {
 			}
 		}
 	}
-}, vr = class {
+}, Cr = class {
 	generation = 0;
 	pending = Promise.resolve();
 	constructor(e) {
@@ -4044,24 +4175,24 @@ var hr = 20, gr = class {
 };
 //#endregion
 //#region src/core/removalControllers.ts
-function yr(e) {
-	let t = new _r(e), n = new vr({
+function wr(e) {
+	let t = new Sr(e), n = new Cr({
 		state: e.state,
 		transitionMedia: (t) => e.surface()?.transitionActiveReelMedia(t) ?? Promise.resolve(!1),
 		transitionPost: (t) => e.surface()?.transitionActiveReelPost(t) ?? Promise.resolve(!1)
 	});
 	return {
-		exactMediaRemoval: new dr({
+		exactMediaRemoval: new gr({
 			onActivate: e.onActivate,
 			onPostRemoved: (t) => e.onItemsRemoved([t]),
 			onPostRestored: (t) => e.onItemsRestored([t]),
 			reelForward: t,
 			state: e.state
 		}),
-		itemRemoval: new gr({
+		itemRemoval: new xr({
 			historyLimit: e.historyLimit,
 			onItemsRemoved: (n, r, i) => {
-				e.onItemsRemoved(r.map(({ item: e }) => e.postId)), cr(e.state, r, i, e.onActivate, (e, r) => t.start(n, e, r));
+				e.onItemsRemoved(r.map(({ item: e }) => e.postId)), pr(e.state, r, i, e.onActivate, (e, r) => t.start(n, e, r));
 			},
 			onRemovalRestored: (n) => {
 				e.onItemsRestored(n.map(({ item: e }) => e.postId));
@@ -4076,17 +4207,17 @@ function yr(e) {
 		reelRemoval: n
 	};
 }
-var br = 1.5;
-function xr(e) {
+var Tr = 1.5;
+function Er(e) {
 	let t = Math.min(e.screenWidth, e.screenHeight);
 	if (t > 0 && t < 600) return !0;
-	let n = Math.min(e.viewportWidth, e.viewportHeight), r = t >= n * br;
+	let n = Math.min(e.viewportWidth, e.viewportHeight), r = t >= n * Tr;
 	return !e.hasHover && n > 0 && n < 600 && r;
 }
-function Sr(e) {
-	return xr(e) ? "reel" : "masonry";
+function Dr(e) {
+	return Er(e) ? "reel" : "masonry";
 }
-function Cr(e) {
+function Or(e) {
 	let t = e.ownerDocument.defaultView, n = e.ownerDocument.documentElement;
 	return {
 		hasHover: typeof t?.matchMedia == "function" && t.matchMedia("(hover: hover)").matches,
@@ -4096,15 +4227,15 @@ function Cr(e) {
 		viewportWidth: n.clientWidth
 	};
 }
-function wr(e) {
-	return xr(Cr(e));
+function kr(e) {
+	return Er(Or(e));
 }
-function Tr(e) {
-	return Sr(Cr(e));
+function Ar(e) {
+	return Dr(Or(e));
 }
 //#endregion
 //#region src/core/responsiveLayoutController.ts
-var Er = class {
+var jr = class {
 	layoutMode;
 	resizeObserver = null;
 	target = null;
@@ -4129,10 +4260,24 @@ var Er = class {
 	}
 	handleResponsiveLayout = () => {
 		if (!this.target) return;
-		let e = Tr(this.target);
-		this.state.phoneMode = wr(this.target), this.state.reelInfoSheetOverlay = this.state.phoneMode, this.state.reelMediaSource = this.state.phoneMode ? "mobile" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
+		let e = Ar(this.target);
+		this.state.phoneMode = kr(this.target), this.state.reelInfoSheetOverlay = this.state.phoneMode, this.state.reelMediaSource = this.state.phoneMode ? "mobile" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
 	};
-}, Dr = class {
+}, Mr = class {
+	state;
+	constructor(e) {
+		this.options = e, this.state = x(Ye({
+			...e.initialReelAudioState,
+			muted: e.initialReelAudioState?.muted ?? e.mediaCard?.videoMuted ?? !1
+		}));
+	}
+	get() {
+		return { ...this.state };
+	}
+	set(e, t = !1) {
+		Object.assign(this.state, Ye(e, this.state)), t && this.options.onReelAudioStateChange?.(this.get());
+	}
+}, Nr = class {
 	routedReelPostId = null;
 	reelRouteIsActive = !1;
 	constructor(e, t) {
@@ -4159,7 +4304,7 @@ var Er = class {
 		let i = this.reelRouteIsActive ? "replace" : "push";
 		this.reelRouteIsActive = !0, this.routedReelPostId = e, this.options.router[i](r);
 	}
-}, Or = class {
+}, Pr = class {
 	app = null;
 	autoScroll;
 	autofillController;
@@ -4179,26 +4324,27 @@ var Er = class {
 	stopStateWatcher = null;
 	lastLoadedCursor = null;
 	notificationItems;
+	reelAudio;
 	state;
 	constructor(e) {
-		this.options = e, tr(e);
+		this.options = e, or(e);
 		let t = e.layout ?? "masonry";
-		this.state = x(Qn(e, t)), this.lastLoadedCursor = e.initialPage ? Yt(e.initialPage) : null, this.notificationItems = R(this.state), this.autoScroll = new Sn({
+		this.state = x(rr(e, t)), this.reelAudio = new Mr(e), this.lastLoadedCursor = e.initialPage ? $t(e.initialPage) : null, this.notificationItems = R(this.state), this.autoScroll = new Dn({
 			getScrollElement: () => this.surface?.getAutoScrollElement() ?? null,
 			state: this.state.autoScroll
-		}), this.autofillController = new gn({
+		}), this.autofillController = new xn({
 			cancelRequest: () => this.cancelRequest(),
 			onLastCursor: (e) => this.setCurrentCursor(e),
 			onPages: (e) => this.removalReconciliation.recordPages(e),
 			options: e.autofill,
 			state: this.state
-		}), this.removalReconciliation = new sr(e), this.removalReconciliation.recordInitialPage(e.initialPage), this.fillController = new Un({
+		}), this.removalReconciliation = new fr(e), this.removalReconciliation.recordInitialPage(e.initialPage), this.fillController = new Jn({
 			fill: e.fill,
 			loadPage: e.loadPage ? (e) => this.loadFilteredPage(e) : void 0,
 			needsFrontendPreparation: () => this.removalReconciliation.needsReconciliation(this.state.items),
 			onLastCursor: (e) => this.setCurrentCursor(e),
 			onPages: (e) => this.removalReconciliation.recordPages(e),
-			prepareFrontend: ({ isCurrent: t, onDelayChange: n, signal: r }) => Wn({
+			prepareFrontend: ({ isCurrent: t, onDelayChange: n, signal: r }) => Yn({
 				controller: this.removalReconciliation,
 				isCurrent: t,
 				loadPage: e.loadPage,
@@ -4208,8 +4354,8 @@ var Er = class {
 				state: this.state
 			}),
 			state: this.state
-		}), this.routing = new Dr(e.routing, this.state);
-		let n = yr({
+		}), this.routing = new Nr(e.routing, this.state);
+		let n = wr({
 			historyLimit: e.removalHistoryLimit,
 			onActivate: (e) => this.setActiveReelPost(e),
 			onItemsRemoved: (e) => this.removalReconciliation.remove(e),
@@ -4218,25 +4364,26 @@ var Er = class {
 			state: this.state,
 			surface: () => this.surface
 		});
-		this.exactMediaRemoval = n.exactMediaRemoval, this.itemRemoval = n.itemRemoval, this.reelForward = n.reelForward, this.reelRemoval = n.reelRemoval, this.responsiveLayout = new Er(t, this.state, () => {
+		this.exactMediaRemoval = n.exactMediaRemoval, this.itemRemoval = n.itemRemoval, this.reelForward = n.reelForward, this.reelRemoval = n.reelRemoval, this.responsiveLayout = new jr(t, this.state, () => {
 			this.routing.syncFeed();
 		}), this.startStateNotifications();
 	}
 	async mount() {
 		if (this.app) throw Error("Vibe is already mounted.");
 		this.startStateNotifications();
-		let e = nr(this.options.target);
-		this.responsiveLayout.mount(e), this.app = i(Wt, {
+		let e = sr(this.options.target);
+		this.responsiveLayout.mount(e), this.app = i(Jt, {
 			canRetryEnd: !!this.options.loadPage,
 			cardFooter: this.options.cardFooter,
 			cardHeader: this.options.cardHeader,
 			feedFooter: this.options.feedFooter,
-			feedFooterActions: Gn(this),
+			feedFooterActions: Xn(this),
 			mediaCard: this.options.mediaCard,
 			masonry: this.options.masonry,
 			onMediaReady: this.options.onMediaReady,
 			onMediaVisible: this.options.onMediaVisible,
 			onReelMediaChange: this.options.onReelMediaChange,
+			reelAudioState: this.reelAudio.state,
 			reelInfoSheet: this.options.reelInfoSheet,
 			state: this.state,
 			onActiveReelChange: (e) => {
@@ -4248,13 +4395,14 @@ var Er = class {
 			},
 			onOpenReel: (e) => this.openMasonryReel(e),
 			onReelInfoSheetChange: (e) => this.setReelInfoSheet(e),
+			onReelAudioChange: (e) => this.reelAudio.set(e, !0),
 			onRetryEnd: () => {
 				this.retryEnd();
 			},
 			onRetryForward: () => {
 				this.retryReelForward();
 			}
-		}), this.surface = this.app.mount(e), this.autoScroll.mount(), await Dn(this.options.restoreBacklog, (e) => this.appendPage(e), (e) => {
+		}), this.surface = this.app.mount(e), this.autoScroll.mount(), await Mn(this.options.restoreBacklog, (e) => this.appendPage(e), (e) => {
 			this.restoreController = e;
 		}), !this.options.initialPage && this.state.items.length === 0 ? await this.reload() : this.options.autofill && this.state.autofill.status === "idle" && !this.fillController.isActive() && !this.state.loadMoreLocked && await this.startInitialAutofill();
 	}
@@ -4264,6 +4412,12 @@ var Er = class {
 	getState() {
 		return z(this.state);
 	}
+	getReelAudioState() {
+		return this.reelAudio.get();
+	}
+	setReelAudioState(e) {
+		this.reelAudio.set(e);
+	}
 	removeMedia(e) {
 		return this.exactMediaRemoval.remove(e);
 	}
@@ -4319,7 +4473,7 @@ var Er = class {
 		this.autoScroll.setSpeed(e);
 	}
 	applyAutofillUpdate(e) {
-		let t = Tn(this.options.autofill, this.state, e);
+		let t = An(this.options.autofill, this.state, e);
 		return t && this.autofillController.syncCountdown(), t;
 	}
 	cancelAutofill() {
@@ -4330,7 +4484,7 @@ var Er = class {
 			await this.cancelFill();
 			return;
 		}
-		if (fn(this.state.autofill)) {
+		if (_n(this.state.autofill)) {
 			await this.cancelAutofill();
 			return;
 		}
@@ -4344,12 +4498,12 @@ var Er = class {
 	}
 	async fill(e) {
 		if (!this.state.loadMoreLocked) {
-			if (this.pendingRequest || fn(this.state.autofill)) throw Error("Vibe cannot fill while another page operation is active.");
+			if (this.pendingRequest || _n(this.state.autofill)) throw Error("Vibe cannot fill while another page operation is active.");
 			await this.fillController.start(e);
 		}
 	}
 	restoreAutofillSession(e) {
-		let t = En(this.options.autofill, this.state, e);
+		let t = jn(this.options.autofill, this.state, e);
 		return t && this.autofillController.syncCountdown(), t;
 	}
 	restoreFillSession(e) {
@@ -4359,14 +4513,14 @@ var Er = class {
 		return this.startLoadMore(() => this.loadNextSequence());
 	}
 	appendPage(e) {
-		Xt(e, this.state, this.removalReconciliation, (e) => this.setCurrentCursor(e));
+		en(e, this.state, this.removalReconciliation, (e) => this.setCurrentCursor(e));
 	}
 	replenishAfterRemoval() {
 		return this.startLoadMore(() => this.replenishAfterRemovalSequence());
 	}
 	async startLoadMore(e) {
 		if (this.pendingRequest) return this.pendingRequest;
-		if (this.state.loadMoreLocked || fn(this.state.autofill) || this.fillController.isActive() || !this.options.loadPage || this.state.next === null && !this.removalReconciliation.needsReconciliation(this.state.items)) return;
+		if (this.state.loadMoreLocked || _n(this.state.autofill) || this.fillController.isActive() || !this.options.loadPage || this.state.next === null && !this.removalReconciliation.needsReconciliation(this.state.items)) return;
 		this.state.isLoadingMore = !0, this.state.nextPageError = null;
 		let t = e();
 		return this.pendingRequest = t, t.finally(() => {
@@ -4381,12 +4535,12 @@ var Er = class {
 	}
 	async replaceFeed(e, t) {
 		if (!this.options.loadPage) throw Error(`Vibe cannot ${t} without loadPage.`);
-		return fn(this.state.autofill) && await this.cancelAutofill(), this.fillController.isActive() && await this.cancelFill(), this.cancelRequest(), this.state.autofill = dn(this.options.autofill, void 0, !1), this.fillController.reset(), this.reelForward.reset(), this.reelRemoval.reset(), this.exactMediaRemoval.reset(), this.itemRemoval.reset(), this.removalReconciliation.reset(), this.state.error = null, this.state.current = null, this.state.isLoading = !0, this.state.items = [], this.state.next = null, this.state.nextPageError = null, this.state.total = null, this.startRequest(e, !1);
+		return _n(this.state.autofill) && await this.cancelAutofill(), this.fillController.isActive() && await this.cancelFill(), this.cancelRequest(), this.state.autofill = gn(this.options.autofill, void 0, !1), this.fillController.reset(), this.reelForward.reset(), this.reelRemoval.reset(), this.exactMediaRemoval.reset(), this.itemRemoval.reset(), this.removalReconciliation.reset(), this.state.error = null, this.state.current = null, this.state.isLoading = !0, this.state.items = [], this.state.next = null, this.state.nextPageError = null, this.state.total = null, this.startRequest(e, !1);
 	}
 	async loadFilteredPage(e) {
 		let t = this.options.loadPage;
 		if (!t) throw Error("Vibe cannot load a page without loadPage.");
-		let n = Gt(await t(e));
+		let n = Yt(await t(e));
 		return {
 			...n,
 			items: this.removalReconciliation.filterItems(n.items)
@@ -4405,7 +4559,7 @@ var Er = class {
 		let t = ++this.requestVersion, n = new AbortController();
 		this.abortController = n;
 		try {
-			let r = await Wn({
+			let r = await Yn({
 				controller: this.removalReconciliation,
 				isCurrent: () => t === this.requestVersion,
 				loadPage: e,
@@ -4423,7 +4577,7 @@ var Er = class {
 	}
 	async retryEnd() {
 		if (this.pendingRequest) return this.pendingRequest;
-		if (!this.state.loadMoreLocked && !(fn(this.state.autofill) || this.fillController.isActive()) && !(this.state.next !== null || !this.options.loadPage)) return this.state.isLoadingMore = !0, this.state.nextPageError = null, this.startRequest(this.lastLoadedCursor, !0);
+		if (!this.state.loadMoreLocked && !(_n(this.state.autofill) || this.fillController.isActive()) && !(this.state.next !== null || !this.options.loadPage)) return this.state.isLoadingMore = !0, this.state.nextPageError = null, this.startRequest(this.lastLoadedCursor, !0);
 	}
 	setInfiniteScroll(e) {
 		this.state.infiniteScroll = e, e && m(() => this.surface?.loadIfNearBottom());
@@ -4447,10 +4601,10 @@ var Er = class {
 		this.state.total = e;
 	}
 	setReelAutoAdvance(e) {
-		Yn(this.state.reelAutoAdvance, e);
+		er(this.state.reelAutoAdvance, e);
 	}
 	setReelInfoSheet(e) {
-		Zn(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
+		nr(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
 	}
 	setLayout(e) {
 		this.responsiveLayout.setLayout(e);
@@ -4470,7 +4624,7 @@ var Er = class {
 	async fetchPage(e, t) {
 		if (!this.options.loadPage) return;
 		let n = ++this.requestVersion, r = new AbortController();
-		this.abortController = r, await rr({
+		this.abortController = r, await cr({
 			append: t,
 			autofillController: this.autofillController,
 			cursor: e,
@@ -4492,7 +4646,7 @@ var Er = class {
 	startInitialAutofill() {
 		let e = ++this.requestVersion, t = new AbortController(), n = this.autofillController.beginCycle();
 		this.abortController = t, this.state.isLoadingMore = !0;
-		let r = On({
+		let r = Nn({
 			cycleId: n,
 			isCurrent: () => e === this.requestVersion,
 			onCollection: (t) => this.autofillController.captureCollection(t, e === this.requestVersion),
@@ -4519,8 +4673,8 @@ var Er = class {
 		this.lastLoadedCursor = e, this.state.current = e;
 	}
 };
-function kr(e) {
-	return new Or(e);
+function Fr(e) {
+	return new Pr(e);
 }
 //#endregion
-export { kr as createVibe };
+export { Fr as createVibe };