@wyxos/vibe 5.3.1 → 5.4.0

package/lib/index.js

@@ -15,6 +15,9 @@ function F(e, t) {
 //#endregion
 //#region src/core/runtime.ts
 function I(e) {
+	return r(() => Object.freeze([...e.items]));
+}
+function L(e, t = [...e.items]) {
 	return {
 		activeReelPostId: e.activeReelPostId,
 		autoScroll: { ...e.autoScroll },
@@ -27,7 +30,7 @@ function I(e) {
 		infiniteScroll: e.infiniteScroll,
 		isLoading: e.isLoading,
 		isLoadingMore: e.isLoadingMore,
-		items: [...e.items],
+		items: t,
 		layout: e.layout,
 		lifecycle: e.isLoading || e.isLoadingMore ? "loading" : e.error || e.nextPageError ? "error" : "loaded",
 		loadMoreLocked: e.loadMoreLocked,
@@ -43,17 +46,17 @@ function I(e) {
 }
 //#endregion
 //#region src/components/GalleryFooter.vue?vue&type=script&setup=true&lang.ts
-var L = {
+var R = {
 	key: 0,
 	class: "gallery-footer"
-}, R = {
+}, z = {
 	key: 0,
 	class: "load-more-status",
 	role: "status"
-}, z = ["disabled"], B = {
+}, B = ["disabled"], V = {
 	key: 2,
 	class: "end-feed"
-}, V = ["disabled"], H = /* @__PURE__ */ d({
+}, H = ["disabled"], U = /* @__PURE__ */ d({
 	__name: "GalleryFooter",
 	props: {
 		canRetryEnd: { type: Boolean },
@@ -69,14 +72,14 @@ var L = {
 		function i() {
 			n.loadMoreLocked || (n.hasNext ? r("loadMore") : r("retryEnd"));
 		}
-		return (t, n) => e.isLoading || e.hasError || e.hasNext && e.showLoadMore || !e.hasNext && e.canRetryEnd ? (b(), s("footer", L, [e.isLoading ? (b(), s("p", R, " Loading more… ")) : e.hasError || e.hasNext && e.showLoadMore ? (b(), s("button", {
+		return (t, n) => e.isLoading || e.hasError || e.hasNext && e.showLoadMore || !e.hasNext && e.canRetryEnd ? (b(), s("footer", R, [e.isLoading ? (b(), s("p", z, " Loading more… ")) : e.hasError || e.hasNext && e.showLoadMore ? (b(), s("button", {
 			key: 1,
 			"data-test": "load-more",
 			class: "load-more-button",
 			type: "button",
 			disabled: e.loadMoreLocked,
 			onClick: i
-		}, T(e.hasError ? "Try again" : e.loadMoreLocked ? "Loading paused" : "Load more"), 9, z)) : (b(), s("div", B, [n[1] ||= c("p", {
+		}, T(e.hasError ? "Try again" : e.loadMoreLocked ? "Loading paused" : "Load more"), 9, B)) : (b(), s("div", V, [n[1] ||= c("p", {
 			class: "end-feed-message",
 			role: "status"
 		}, " You've reached the end. ", -1), c("button", {
@@ -85,9 +88,9 @@ var L = {
 			type: "button",
 			disabled: e.loadMoreLocked,
 			onClick: n[0] ||= (e) => t.$emit("retryEnd")
-		}, " Check for more ", 8, V)]))])) : o("", !0);
+		}, " Check for more ", 8, H)]))])) : o("", !0);
 	}
-}), U = /* @__PURE__ */ d({
+}), W = /* @__PURE__ */ d({
 	__name: "FeedFooter",
 	props: {
 		actions: {},
@@ -124,7 +127,7 @@ var L = {
 			"can-retry-end",
 			"show-load-more",
 			"state"
-		])) : (b(), a(H, {
+		])) : (b(), a(U, {
 			key: 1,
 			"can-retry-end": e.canRetryEnd,
 			"has-error": e.hasError,
@@ -143,7 +146,7 @@ var L = {
 			"show-load-more"
 		]));
 	}
-}), W = ["role"], G = { class: "gallery-status" }, ee = /* @__PURE__ */ d({
+}), G = ["role"], K = { class: "gallery-status" }, ee = /* @__PURE__ */ d({
 	__name: "FeedStatus",
 	props: {
 		actions: {},
@@ -157,7 +160,7 @@ var L = {
 		return (n, u) => (b(), s("main", {
 			class: "gallery-shell",
 			role: r.state.error ? "alert" : r.state.isLoading ? "status" : void 0
-		}, [c("p", G, [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(U, {
+		}, [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(W, {
 			key: 0,
 			actions: t.actions,
 			"can-retry-end": t.canRetryEnd,
@@ -179,36 +182,36 @@ var L = {
 			"is-loading",
 			"load-more-locked",
 			"state"
-		])) : o("", !0)], 8, W));
+		])) : o("", !0)], 8, G));
 	}
 });
-function K(e) {
+function q(e) {
 	return e.scrollHeight - e.scrollTop - e.clientHeight <= 240;
 }
 //#endregion
 //#region src/core/masonry.ts
-function q(e) {
+function te(e) {
 	let t = e.preview.width ?? e.width, n = e.preview.height ?? e.height;
 	return !t || !n || t <= 0 || n <= 0 ? 1 : n / t;
 }
-function te(e) {
+function J(e) {
 	return e.reduce((t, n, r) => n < e[t] ? r : t, 0);
 }
 function ne(e) {
 	return Math.max(0, e.containerHeight) + Math.max(0, e.gap);
 }
-function re(e, t) {
+function Y(e, t) {
 	let n = Math.max(0, t.overscan), r = t.scrollTop - n, i = t.scrollTop + Math.max(0, t.viewportHeight) + n;
 	return e.reduce((e, t, n) => (t.y + t.height >= r && t.y <= i && e.push(n), e), []);
 }
-function ie(e, t, n) {
+function re(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 = te(c), n = s * q(e) + i, a = {
+		let t = J(c), n = s * te(e) + i, a = {
 			x: t * (s + r),
 			y: c[t],
 			width: s,
@@ -222,12 +225,27 @@ function ie(e, t, n) {
 		items: l
 	};
 }
+function ie(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 ae(e) {
+	let t = e?.overscan;
+	if (t) {
+		for (let [e, n] of [
+			["maximumPx", t.maximumPx],
+			["minimumPx", t.minimumPx],
+			["viewportMultiplier", t.viewportMultiplier]
+		]) if (n !== void 0 && (!Number.isFinite(n) || n < 0)) throw TypeError(`Vibe masonry overscan ${e} must be a non-negative number.`);
+		if (t.maximumPx !== void 0 && t.minimumPx !== void 0 && t.maximumPx < t.minimumPx) throw TypeError("Vibe masonry overscan maximumPx must be greater than or equal to minimumPx.");
+	}
+}
 //#endregion
 //#region src/core/scrollbar.ts
-function ae(e, t, n) {
+function oe(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function oe({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize: r, viewportSize: i }) {
+function se({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize: r, viewportSize: i }) {
 	let a = Math.max(0, e), o = Math.max(0, r), s = Math.max(0, i), c = Math.max(0, a - s);
 	if (!(c > 0 && o > 0)) return {
 		maximumScrollPosition: c,
@@ -236,23 +254,23 @@ function oe({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize:
 		thumbSize: o,
 		thumbTravel: 0
 	};
-	let l = ae(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
+	let l = oe(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
 	return {
 		maximumScrollPosition: c,
 		scrollable: !0,
-		thumbOffset: u * (ae(n, 0, c) / c),
+		thumbOffset: u * (oe(n, 0, c) / c),
 		thumbSize: l,
 		thumbTravel: u
 	};
 }
 //#endregion
 //#region src/components/GalleryScrollbar.vue?vue&type=script&setup=true&lang.ts
-var se = ["aria-hidden"], J = [
+var ce = ["aria-hidden"], le = [
 	"aria-controls",
 	"aria-valuemax",
 	"aria-valuenow",
 	"tabindex"
-], ce = 32, Y = 40, le = 120, ue = /* @__PURE__ */ d({
+], ue = 32, de = 40, fe = 120, pe = /* @__PURE__ */ d({
 	__name: "GalleryScrollbar",
 	props: {
 		contentSize: {},
@@ -274,16 +292,16 @@ var se = ["aria-hidden"], J = [
 		function k() {
 			g !== null && clearTimeout(g), g = setTimeout(() => {
 				g = null, o.value || (l.value = !1);
-			}, le);
+			}, fe);
 		}
 		function A() {
 			l.value = !0, k();
 		}
 		function j() {
 			let e = t.scrollElement, r = i.value;
-			return !e || !r ? n : oe({
+			return !e || !r ? n : se({
 				contentSize: e.scrollHeight,
-				minimumThumbSize: ce,
+				minimumThumbSize: ue,
 				scrollPosition: e.scrollTop,
 				trackSize: r.clientHeight,
 				viewportSize: e.clientHeight
@@ -336,7 +354,7 @@ var se = ["aria-hidden"], J = [
 		}
 		function z(e) {
 			if (!E.value) return;
-			let n = t.scrollElement?.clientHeight ?? 0, r = t.scrollElement?.scrollTop ?? 0, i = e.key === "ArrowUp" ? r - Y : e.key === "ArrowDown" ? r + Y : 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 - de : e.key === "ArrowDown" ? r + de : 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) {
@@ -382,15 +400,15 @@ var se = ["aria-hidden"], J = [
 			onPointerdown: I,
 			onPointermove: L,
 			onPointerup: R
-		}, null, 44, J)], 42, se));
+		}, null, 44, le)], 42, ce));
 	}
-}), de = (e) => {
+}), me = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
 	return !1;
-}, fe = (e) => e === "", pe = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), X = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), me = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), he = (e) => {
-	let t = me(e);
+}, he = (e) => e === "", X = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), ge = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), _e = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), ve = (e) => {
+	let t = _e(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
-}, ge = {
+}, ye = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -400,27 +418,27 @@ var se = ["aria-hidden"], J = [
 	"stroke-width": 2,
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, _e = ({ name: e, iconNode: t, absoluteStrokeWidth: n, "absolute-stroke-width": r, strokeWidth: i, "stroke-width": a, size: o = ge.width, color: s = ge.stroke, ...c }, { slots: l }) => p("svg", {
-	...ge,
+}, be = ({ name: e, iconNode: t, absoluteStrokeWidth: n, "absolute-stroke-width": r, strokeWidth: i, "stroke-width": a, size: o = ye.width, color: s = ye.stroke, ...c }, { slots: l }) => p("svg", {
+	...ye,
 	...c,
 	width: o,
 	height: o,
 	stroke: s,
-	"stroke-width": fe(n) || fe(r) || n === !0 || r === !0 ? Number(i || a || ge["stroke-width"]) * 24 / Number(o) : i || a || ge["stroke-width"],
-	class: pe("lucide", c.class, ...e ? [`lucide-${X(he(e))}-icon`, `lucide-${X(e)}`] : ["lucide-icon"]),
-	...!l.default && !de(c) && { "aria-hidden": "true" }
-}, [...t.map((e) => p(...e)), ...l.default ? [l.default()] : []]), ve = (e, t) => (n, { slots: r, attrs: i }) => p(_e, {
+	"stroke-width": he(n) || he(r) || n === !0 || r === !0 ? Number(i || a || ye["stroke-width"]) * 24 / Number(o) : i || a || ye["stroke-width"],
+	class: X("lucide", c.class, ...e ? [`lucide-${ge(ve(e))}-icon`, `lucide-${ge(e)}`] : ["lucide-icon"]),
+	...!l.default && !me(c) && { "aria-hidden": "true" }
+}, [...t.map((e) => p(...e)), ...l.default ? [l.default()] : []]), xe = (e, t) => (n, { slots: r, attrs: i }) => p(be, {
 	...i,
 	...n,
 	iconNode: t,
 	name: e
-}, r), ye = ve("chevron-left", [["path", {
+}, r), Se = xe("chevron-left", [["path", {
 	d: "m15 18-6-6 6-6",
 	key: "1wnfg3"
-}]]), be = ve("chevron-right", [["path", {
+}]]), Ce = xe("chevron-right", [["path", {
 	d: "m9 18 6-6-6-6",
 	key: "mthhwq"
-}]]), xe = ve("pause", [["rect", {
+}]]), we = xe("pause", [["rect", {
 	x: "14",
 	y: "3",
 	width: "5",
@@ -434,10 +452,10 @@ var se = ["aria-hidden"], J = [
 	height: "18",
 	rx: "1",
 	key: "1wsw3u"
-}]]), Se = ve("play", [["path", {
+}]]), Te = xe("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"
-}]]), Ce = ve("volume-2", [
+}]]), Ee = xe("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"
@@ -450,7 +468,7 @@ var se = ["aria-hidden"], J = [
 		d: "M19.364 18.364a9 9 0 0 0 0-12.728",
 		key: "ijwkga"
 	}]
-]), we = ve("volume-x", [
+]), De = xe("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"
@@ -469,32 +487,22 @@ var se = ["aria-hidden"], J = [
 		y2: "15",
 		key: "5ykzw1"
 	}]
-]), Te = {
+]), Oe = {
 	401: "Authentication required",
 	403: "Access forbidden",
 	404: "Preview not found",
 	419: "Session expired",
 	500: "Server error"
 };
-function Ee(e) {
+function ke(e) {
 	return e.match(/\/demo-errors\/(401|403|404|419|500)\//)?.[1] ?? "Error";
 }
-function De(e) {
-	return Te[Ee(e)] ?? "Preview unavailable";
-}
-//#endregion
-//#region src/core/mediaType.ts
-var Oe = /\.(aac|flac|m4a|mp3|mp4|mov|ogg|opus|wav|webm)$/i;
-function ke(e) {
-	try {
-		return Oe.test(new URL(e).pathname);
-	} catch {
-		return Oe.test(e.split("?")[0] ?? e);
-	}
+function Ae(e) {
+	return Oe[ke(e)] ?? "Preview unavailable";
 }
 //#endregion
 //#region src/components/CardRegion.vue
-var Ae = /* @__PURE__ */ d({
+var je = /* @__PURE__ */ d({
 	__name: "CardRegion",
 	props: {
 		index: {},
@@ -541,18 +549,18 @@ var Ae = /* @__PURE__ */ d({
 			"total"
 		]))], 38));
 	}
-}), je = [
+}), Me = [
 	"max",
 	"value",
 	"aria-valuetext",
 	"disabled"
-], Me = {
+], Ne = {
 	key: 0,
 	class: "media-controls-row"
-}, Ne = ["aria-label", "title"], Pe = { class: "media-controls-audio" }, Fe = ["aria-label", "title"], Ie = ["value", "aria-valuetext"], Le = {
+}, Pe = ["aria-label", "title"], Fe = { class: "media-controls-audio" }, Ie = ["aria-label", "title"], Le = ["value", "aria-valuetext"], Re = {
 	class: "media-control-time",
 	"aria-live": "off"
-}, Re = /* @__PURE__ */ d({
+}, ze = /* @__PURE__ */ d({
 	__name: "MediaControls",
 	props: {
 		currentTime: {},
@@ -600,35 +608,35 @@ var Ae = /* @__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, je), e.layout === "reel" ? (b(), s("div", Me, [
+		}, null, 44, Me), e.layout === "reel" ? (b(), s("div", Ne, [
 			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(xe), {
+			}, [e.playing ? (b(), a(E(we), {
 				key: 0,
 				size: 18,
 				fill: "currentColor"
-			})) : (b(), a(E(Se), {
+			})) : (b(), a(E(Te), {
 				key: 1,
 				size: 18,
 				fill: "currentColor"
-			}))], 8, Ne),
-			c("div", Pe, [c("button", {
+			}))], 8, Pe),
+			c("div", Fe, [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(we), {
+			}, [e.muted || e.volume === 0 ? (b(), a(E(De), {
 				key: 0,
 				size: 18
-			})) : (b(), a(E(Ce), {
+			})) : (b(), a(E(Ee), {
 				key: 1,
 				size: 18
-			}))], 8, Fe), c("input", {
+			}))], 8, Ie), c("input", {
 				class: "media-control-range media-control-volume",
 				type: "range",
 				min: "0",
@@ -639,14 +647,14 @@ var Ae = /* @__PURE__ */ d({
 				"aria-label": "Video volume",
 				"aria-valuetext": `${Math.round(e.volume * 100)} percent`,
 				onInput: n[3] ||= (e) => i("volumeChange", d(e))
-			}, null, 44, Ie)]),
-			c("output", Le, T(u(p.value)) + " / " + T(u(f.value)), 1)
+			}, null, 44, Le)]),
+			c("output", Re, T(u(p.value)) + " / " + T(u(f.value)), 1)
 		])) : o("", !0)], 34));
 	}
 });
 //#endregion
 //#region src/components/useReelVideoActivity.ts
-function ze(e) {
+function Be(e) {
 	let t = r(() => e.layout() !== "reel" || e.active() === !0), n = r(() => t.value ? e.videoIsMuted.value : !0);
 	function i() {
 		if (!t.value) {
@@ -679,8 +687,30 @@ function ze(e) {
 	};
 }
 //#endregion
+//#region src/core/mediaType.ts
+var Ve = /\.(aac|flac|m4a|mp3|mp4|mov|ogg|opus|wav|webm)$/i;
+function He(e) {
+	try {
+		return Ve.test(new URL(e).pathname);
+	} catch {
+		return Ve.test(e.split("?")[0] ?? e);
+	}
+}
+//#endregion
+//#region src/components/useMediaLoading.ts
+function Ue(e) {
+	let t = r(() => He(e.mediaSource())), n = r(() => e.layout() === "masonry" && e.fetchPriority() === "low" ? "lazy" : "eager"), i = r(() => e.fetchPriority() === "high" ? "auto" : e.layout() === "masonry" ? "none" : "metadata");
+	return O(i, (t, n) => {
+		n !== "none" || t === "none" || m(() => e.videoElement.value?.load());
+	}), {
+		imageLoading: n,
+		mediaIsTimed: t,
+		videoPreload: i
+	};
+}
+//#endregion
 //#region src/components/MediaCard.vue?vue&type=script&setup=true&lang.ts
-var Be = [
+var We = [
 	"data-post-id",
 	"data-media-index",
 	"aria-hidden",
@@ -688,12 +718,12 @@ var Be = [
 	"inert",
 	"role",
 	"tabindex"
-], Ve = { class: "media-card-content" }, He = ["data-media-direction"], Ue = ["data-media-index"], We = {
+], Ge = { class: "media-card-content" }, Ke = ["data-media-direction"], qe = ["data-media-index"], Je = {
 	key: 0,
 	"data-test": "media-loading",
 	class: "media-loading",
 	"aria-hidden": "true"
-}, Ge = ["aria-label"], Ke = { class: "media-error-code" }, qe = [
+}, Ye = ["aria-label"], Xe = { class: "media-error-code" }, Ze = [
 	"src",
 	"width",
 	"height",
@@ -701,12 +731,13 @@ var Be = [
 	"loop",
 	"muted",
 	"preload"
-], Je = [
+], Qe = [
 	"src",
 	"width",
 	"height",
-	"fetchpriority"
-], Ye = ["aria-label"], Xe = ["aria-label"], Ze = ["aria-label"], Qe = 40, $e = 160, et = 24, tt = /* @__PURE__ */ d({
+	"fetchpriority",
+	"loading"
+], $e = ["aria-label"], et = ["aria-label"], tt = ["aria-label"], nt = 40, rt = 160, it = 24, at = /* @__PURE__ */ d({
 	__name: "MediaCard",
 	props: {
 		active: { type: Boolean },
@@ -742,7 +773,7 @@ var Be = [
 		function S(e = !1, t = "pointer") {
 			e && x("activate", t);
 		}
-		let C = r(() => M(l.item)), D = r(() => N(l.item, l.mediaIndex)), O = r(() => P(l.item, D.value)), F = r(() => l.mediaSource === "original" ? O.value.src : O.value.preview.src), I = r(() => l.mediaSource === "original" ? O.value.width : O.value.preview.width), L = r(() => l.mediaSource === "original" ? O.value.height : O.value.preview.height), R = w(null), z = w(0), B = w(0), V = w(l.mediaCard?.videoMuted ?? l.layout === "masonry"), H = w(!1), U = w(1), W = 1, { effectiveMuted: G, onPlaying: ee, playbackAllowed: K } = ze({
+		let C = r(() => M(l.item)), D = r(() => N(l.item, l.mediaIndex)), O = r(() => P(l.item, D.value)), F = r(() => l.mediaSource === "original" ? O.value.src : O.value.preview.src), I = r(() => l.mediaSource === "original" ? O.value.width : O.value.preview.width), L = r(() => l.mediaSource === "original" ? O.value.height : O.value.preview.height), R = w(null), z = w(0), B = w(0), V = w(l.mediaCard?.videoMuted ?? l.layout === "masonry"), H = w(!1), U = w(1), W = 1, { effectiveMuted: G, onPlaying: K, playbackAllowed: ee } = Be({
 			active: () => l.active,
 			layout: () => l.layout,
 			videoElement: R,
@@ -752,42 +783,47 @@ var Be = [
 		function te(e) {
 			return e.detail === 0 ? "keyboard" : "pointer";
 		}
-		function ne(e, t) {
+		function J(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());
 		}
-		function re(e, t, n) {
+		function ne(e, t, n) {
 			return t === 1 ? e * 16 : t === 2 ? e * n : e;
 		}
-		function ie() {
+		function Y() {
 			f = 0, p = !1, d !== null && clearTimeout(d), d = null;
 		}
-		function ae() {
-			d !== null && clearTimeout(d), d = setTimeout(ie, $e);
+		function re() {
+			d !== null && clearTimeout(d), d = setTimeout(Y, rt);
 		}
-		function oe(e) {
+		function ie(e) {
 			if (C.value.length <= 1) return;
-			let t = e.currentTarget?.clientWidth || 1, n = re(e.deltaX, e.deltaMode, t);
-			if (n === 0 || (e.preventDefault(), ae(), p) || (f += n, Math.abs(f) < et)) return;
+			let t = e.currentTarget?.clientWidth || 1, n = ne(e.deltaX, e.deltaMode, t);
+			if (n === 0 || (e.preventDefault(), re(), p) || (f += n, Math.abs(f) < it)) return;
 			let r = Math.sign(f);
-			f = 0, p = !0, ne(D.value + r);
+			f = 0, p = !0, J(D.value + r);
 		}
-		function se(e) {
+		function ae(e) {
 			let t = e.touches[0];
 			l.layout !== "reel" || !t || (m = t.clientX, g = t.clientY);
 		}
-		function J(e) {
+		function oe(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) < Qe || ne(D.value + Math.sign(n)));
+			m = null, g = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < nt || J(D.value + Math.sign(n)));
 		}
-		let ce = r(() => ke(F.value)), Y = r(() => l.layout === "reel" && l.stationaryReelControls === !0), le = r(() => ce.value && l.previewState === "ready" && (!Y.value || !!(l.active && l.reelControlsTarget))), ue = r(() => `${l.item.postId}:${D.value}:${F.value}`);
-		function de(e) {
-			l.layout === "reel" && (e.stopPropagation(), fe());
+		let { imageLoading: se, mediaIsTimed: ce, videoPreload: le } = Ue({
+			fetchPriority: () => l.fetchPriority,
+			layout: () => l.layout,
+			mediaSource: () => F.value,
+			videoElement: R
+		}), ue = r(() => l.layout === "reel" && l.stationaryReelControls === !0), de = r(() => ce.value && l.previewState === "ready" && (!ue.value || !!(l.active && l.reelControlsTarget))), fe = r(() => `${l.item.postId}:${D.value}:${F.value}`);
+		function pe(e) {
+			l.layout === "reel" && (e.stopPropagation(), me());
 		}
-		async function fe() {
-			if (!(!R.value || !K.value)) {
+		async function me() {
+			if (!(!R.value || !ee.value)) {
 				if (H.value) {
 					R.value.pause();
 					return;
@@ -799,35 +835,35 @@ var Be = [
 				}
 			}
 		}
-		function pe(e) {
+		function he(e) {
 			return Number.isFinite(e) ? Math.max(0, e) : 0;
 		}
 		function X(e) {
 			let t = e?.currentTarget ?? R.value;
-			t && (z.value = pe(t.currentTime), B.value = pe(t.duration), K.value && (V.value = t.muted), U.value = t.volume, t.volume > 0 && (W = t.volume));
+			t && (z.value = he(t.currentTime), B.value = he(t.duration), ee.value && (V.value = t.muted), U.value = t.volume, t.volume > 0 && (W = t.volume));
 		}
-		function me(e) {
+		function ge(e) {
 			X(e), x("ready", D.value);
 		}
-		function he() {
+		function _e() {
 			H.value = !1, x("ended", D.value);
 		}
-		function ge(e) {
+		function ve(e) {
 			let t = R.value;
-			!t || !Number.isFinite(e) || (t.currentTime = Math.min(pe(t.duration), Math.max(0, e)), z.value = t.currentTime);
+			!t || !Number.isFinite(e) || (t.currentTime = Math.min(he(t.duration), Math.max(0, e)), z.value = t.currentTime);
 		}
-		function _e(e) {
+		function ye(e) {
 			let t = R.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 && (W = n), X();
 		}
-		function ve() {
+		function be() {
 			let e = R.value;
 			e && (e.muted && e.volume === 0 && (e.volume = W), e.muted = !e.muted, X());
 		}
 		return v(() => {
-			ie();
+			Y();
 		}), (r, i) => (b(), s("article", {
 			"data-post-id": e.item.postId,
 			"data-media-index": D.value,
@@ -845,8 +881,8 @@ var Be = [
 			tabindex: e.interactive && !e.leaving && !q.value ? 0 : void 0,
 			onClick: i[11] ||= (t) => S(e.interactive && !q.value, te(t)),
 			onKeydown: [i[12] ||= A((t) => S(e.interactive && !q.value, "keyboard"), ["enter"]), i[13] ||= A(j((t) => S(e.interactive && !q.value, "keyboard"), ["prevent"]), ["space"])]
-		}, [c("div", Ve, [
-			e.cardHeader ? (b(), a(Ae, {
+		}, [c("div", Ge, [
+			e.cardHeader ? (b(), a(je, {
 				key: 0,
 				index: e.index,
 				item: e.item,
@@ -872,22 +908,22 @@ var Be = [
 			c("div", {
 				class: h(["media-card-media", { "media-card-media--carousel": e.layout === "reel" && C.value.length > 1 }]),
 				"data-media-direction": y.value,
-				onWheel: oe,
-				onTouchstartPassive: se,
-				onTouchendPassive: J
+				onWheel: ie,
+				onTouchstartPassive: ae,
+				onTouchendPassive: oe
 			}, [
 				u(n, { name: `media-slide-${y.value}` }, {
 					default: k(() => [(b(), s("div", {
 						key: `${e.item.postId}:${O.value.src}:${e.mediaSource ?? "preview"}`,
 						class: "media-card-frame",
 						"data-media-index": D.value
-					}, [e.previewState === "loading" ? (b(), s("div", We, [...i[14] ||= [c("span", { class: "media-loading-shimmer" }, null, -1)]])) : e.previewState === "error" ? (b(), s("div", {
+					}, [e.previewState === "loading" ? (b(), s("div", Je, [...i[14] ||= [c("span", { class: "media-loading-shimmer" }, null, -1)]])) : e.previewState === "error" ? (b(), s("div", {
 						key: 1,
 						"data-test": "media-error",
 						class: "media-error",
 						role: "img",
-						"aria-label": `${E(Ee)(F.value)} ${E(De)(F.value)}`
-					}, [c("strong", Ke, T(E(Ee)(F.value)), 1), c("span", null, T(E(De)(F.value)), 1)], 8, Ge)) : o("", !0), ce.value ? (b(), s("video", {
+						"aria-label": `${E(ke)(F.value)} ${E(Ae)(F.value)}`
+					}, [c("strong", Xe, T(E(ke)(F.value)), 1), c("span", null, T(E(Ae)(F.value)), 1)], 8, Ye)) : o("", !0), E(ce) ? (b(), s("video", {
 						key: 2,
 						ref_key: "videoElement",
 						ref: R,
@@ -898,21 +934,21 @@ var Be = [
 						src: F.value,
 						width: I.value ?? void 0,
 						height: L.value ?? void 0,
-						autoplay: E(K),
+						autoplay: E(ee),
 						loop: !e.advanceOnMediaEnd,
 						muted: E(G),
 						playsinline: "",
-						preload: e.fetchPriority === "high" ? "auto" : "metadata",
-						onLoadedmetadata: me,
+						preload: E(le),
+						onLoadedmetadata: ge,
 						onDurationchange: X,
 						onTimeupdate: X,
 						onVolumechange: X,
-						onPlaying: i[0] ||= (...e) => E(ee) && E(ee)(...e),
+						onPlaying: i[0] ||= (...e) => E(K) && E(K)(...e),
 						onPause: i[1] ||= (e) => H.value = !1,
-						onEnded: he,
-						onClick: de,
+						onEnded: _e,
+						onClick: pe,
 						onError: i[2] ||= (e) => r.$emit("error", D.value)
-					}, null, 42, qe)) : (b(), s("img", {
+					}, null, 42, Ze)) : (b(), s("img", {
 						key: 3,
 						class: h(["media-preview", { "media-preview--ready": e.previewState === "ready" }]),
 						src: F.value,
@@ -921,32 +957,32 @@ var Be = [
 						fetchpriority: e.fetchPriority,
 						alt: "",
 						decoding: "async",
-						loading: "eager",
+						loading: E(se),
 						onLoad: i[3] ||= (e) => r.$emit("ready", D.value),
 						onError: i[4] ||= (e) => r.$emit("error", D.value)
-					}, null, 42, Je))], 8, Ue))]),
+					}, null, 42, Qe))], 8, qe))]),
 					_: 1
 				}, 8, ["name"]),
 				(b(), a(t, {
-					disabled: !Y.value || !e.reelControlsTarget,
+					disabled: !ue.value || !e.reelControlsTarget,
 					to: e.reelControlsTarget ?? "body"
 				}, [u(n, {
 					name: "vibe-reel-media-controls",
-					css: Y.value
+					css: ue.value
 				}, {
-					default: k(() => [le.value ? (b(), a(Re, {
-						key: ue.value,
+					default: k(() => [de.value ? (b(), a(ze, {
+						key: fe.value,
 						"current-time": z.value,
-						"data-control-post-id": Y.value ? e.item.postId : void 0,
+						"data-control-post-id": ue.value ? e.item.postId : void 0,
 						duration: B.value,
 						layout: e.layout,
 						muted: V.value,
 						playing: H.value,
 						volume: U.value,
-						onSeek: ge,
-						onToggleMute: ve,
-						onTogglePlayback: fe,
-						onVolumeChange: _e
+						onSeek: ve,
+						onToggleMute: be,
+						onTogglePlayback: me,
+						onVolumeChange: ye
 					}, null, 8, [
 						"current-time",
 						"data-control-post-id",
@@ -966,15 +1002,15 @@ var Be = [
 					type: "button",
 					class: "media-carousel-control media-carousel-control--previous",
 					"aria-label": `Previous media for post ${e.item.postId}`,
-					onClick: i[5] ||= j((e) => ne(D.value - 1, e), ["stop"]),
+					onClick: i[5] ||= j((e) => J(D.value - 1, e), ["stop"]),
 					onKeydown: i[6] ||= j(() => {}, ["stop"])
-				}, [u(E(ye), { size: 20 })], 40, Ye), c("button", {
+				}, [u(E(Se), { size: 20 })], 40, $e), c("button", {
 					type: "button",
 					class: "media-carousel-control media-carousel-control--next",
 					"aria-label": `Next media for post ${e.item.postId}`,
-					onClick: i[7] ||= j((e) => ne(D.value + 1, e), ["stop"]),
+					onClick: i[7] ||= j((e) => J(D.value + 1, e), ["stop"]),
 					onKeydown: i[8] ||= j(() => {}, ["stop"])
-				}, [u(E(be), { size: 20 })], 40, Xe)], 2)) : o("", !0),
+				}, [u(E(Ce), { size: 20 })], 40, et)], 2)) : o("", !0),
 				q.value ? (b(), s("button", {
 					key: 1,
 					class: "media-card-activator",
@@ -982,9 +1018,9 @@ var Be = [
 					"aria-label": `Open post ${e.item.postId}`,
 					onClick: i[9] ||= j((e) => r.$emit("activate", te(e)), ["stop"]),
 					onKeydown: i[10] ||= j(() => {}, ["stop"])
-				}, null, 40, Ze)) : o("", !0)
-			], 42, He),
-			e.cardFooter ? (b(), a(Ae, {
+				}, null, 40, tt)) : o("", !0)
+			], 42, Ke),
+			e.cardFooter ? (b(), a(je, {
 				key: 1,
 				index: e.index,
 				item: e.item,
@@ -1007,18 +1043,19 @@ var Be = [
 				"style",
 				"total"
 			])) : o("", !0)
-		])], 46, Be));
+		])], 46, We));
 	}
-}), nt = { class: "masonry-feed-shell" }, rt = ["aria-hidden", "inert"], it = {
+}), ot = { class: "masonry-feed-shell" }, st = ["aria-hidden", "inert"], ct = {
 	key: 0,
 	class: "masonry-feed-status-overlay"
-}, at = 240, ot = 6, st = 12, ct = 800, lt = 1.5, ut = /* @__PURE__ */ d({
+}, lt = 240, ut = 6, dt = 12, ft = /* @__PURE__ */ d({
 	__name: "MasonryFeed",
 	props: {
 		enteringPostIds: {},
 		entryDelays: {},
 		leavingPostIds: { default: () => /* @__PURE__ */ new Set() },
 		removalDelays: { default: () => /* @__PURE__ */ new Map() },
+		masonry: {},
 		suspended: { type: Boolean },
 		canRetryEnd: { type: Boolean },
 		cardFooter: {},
@@ -1047,17 +1084,17 @@ var Be = [
 		"visible"
 	],
 	setup(t, { expose: n, emit: i }) {
-		let l = t, d = i, f = w(null), p = `vibe-masonry-${D()}`, m = w(null), g = w(0), y = w(ot), x = w(0), C = w(0), T = w(0), k = null, A = null, j = null, M = r(() => ie(l.items, g.value, {
+		let l = t, d = i, f = w(null), p = `vibe-masonry-${D()}`, m = w(null), g = w(0), y = w(ut), x = w(0), C = w(0), T = w(0), k = null, A = null, j = null, M = r(() => re(l.items, g.value, {
 			additionalHeight: (l.cardHeader?.height ?? 0) + (l.cardFooter?.height ?? 0),
 			gap: y.value,
-			minColumnWidth: at
+			minColumnWidth: lt
 		})), N = r(() => {
 			let e = M.value;
 			if (l.leavingPostIds.size === 0) return e;
-			let t = l.items.filter((e) => !l.leavingPostIds.has(e.postId)), n = ie(t, g.value, {
+			let t = l.items.filter((e) => !l.leavingPostIds.has(e.postId)), n = re(t, g.value, {
 				additionalHeight: (l.cardHeader?.height ?? 0) + (l.cardFooter?.height ?? 0),
 				gap: y.value,
-				minColumnWidth: at
+				minColumnWidth: lt
 			}), r = new Map(t.map((e, t) => [e.postId, n.items[t]]));
 			return {
 				...n,
@@ -1068,22 +1105,22 @@ var Be = [
 			let e = {
 				scrollTop: x.value - T.value,
 				viewportHeight: C.value
-			}, t = re(N.value.items, {
+			}, t = Y(N.value.items, {
 				...e,
 				overscan: 0
-			}), n = l.leavingPostIds.size === 0 ? [] : re(M.value.items, {
+			}), n = l.leavingPostIds.size === 0 ? [] : Y(M.value.items, {
 				...e,
 				overscan: 0
 			});
 			return new Set([...t, ...n]);
 		}), R = r(() => {
-			let e = Math.max(ct, C.value * lt), t = {
+			let e = ie(l.masonry, C.value), t = {
 				scrollTop: x.value - T.value,
 				viewportHeight: C.value
-			}, n = re(N.value.items, {
+			}, n = Y(N.value.items, {
 				...t,
 				overscan: e
-			}), r = l.leavingPostIds.size === 0 ? [] : re(M.value.items, {
+			}), r = l.leavingPostIds.size === 0 ? [] : Y(M.value.items, {
 				...t,
 				overscan: e
 			});
@@ -1137,17 +1174,17 @@ var Be = [
 		}
 		function H(e) {
 			let t = e.ownerDocument.documentElement.clientWidth;
-			g.value = e.clientWidth, y.value = Math.min(st, Math.max(ot, t * .0075)), V();
+			g.value = e.clientWidth, y.value = Math.min(dt, Math.max(ut, t * .0075)), V();
 		}
-		function W(e) {
+		function U(e) {
 			let t = e.currentTarget;
-			t && (x.value = t.scrollTop, !l.loadMoreLocked && l.infiniteScroll && K(t) && d("loadMore"));
+			t && (x.value = t.scrollTop, !l.loadMoreLocked && l.infiniteScroll && q(t) && d("loadMore"));
 		}
 		function G() {
 			let e = f.value;
-			!l.loadMoreLocked && e && K(e) && d("loadMore");
+			!l.loadMoreLocked && e && q(e) && d("loadMore");
 		}
-		function ee() {
+		function K() {
 			return f.value;
 		}
 		return O(m, (e) => {
@@ -1162,9 +1199,9 @@ var Be = [
 		}), v(() => {
 			k?.disconnect(), A?.disconnect(), j !== null && cancelAnimationFrame(j);
 		}), n({
-			getScrollElement: ee,
+			getScrollElement: K,
 			loadIfNearBottom: G
-		}), (n, r) => (b(), s("div", nt, [
+		}), (n, r) => (b(), s("div", ot, [
 			c("main", {
 				id: p,
 				ref_key: "galleryElement",
@@ -1173,14 +1210,14 @@ var Be = [
 				"data-layout-mode": "masonry",
 				"aria-hidden": t.suspended || void 0,
 				inert: t.suspended || void 0,
-				onScrollPassive: W
+				onScrollPassive: U
 			}, [c("section", {
 				ref_key: "masonryElement",
 				ref: m,
 				class: h(["masonry", { "masonry--ready": g.value > 0 }]),
 				style: _(P.value),
 				"aria-label": "Media gallery"
-			}, [(b(!0), s(e, null, S(R.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(tt, {
+			}, [(b(!0), s(e, null, S(R.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(at, {
 				key: n.postId,
 				class: "masonry-item",
 				entering: t.enteringPostIds.has(n.postId),
@@ -1220,8 +1257,8 @@ var Be = [
 				"onMediaChange",
 				"onReady",
 				"onError"
-			]))), 128))], 6)], 42, rt),
-			t.feedFooter || t.isLoadingMore || t.nextPageError || t.hasNext && I.value || !t.hasNext && t.canRetryEnd ? (b(), s("div", it, [u(U, {
+			]))), 128))], 6)], 42, st),
+			t.feedFooter || t.isLoadingMore || t.nextPageError || t.hasNext && I.value || !t.hasNext && t.canRetryEnd ? (b(), s("div", ct, [u(W, {
 				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
 				"feed-footer": t.feedFooter,
@@ -1244,7 +1281,7 @@ var Be = [
 				"show-load-more",
 				"state"
 			])])) : o("", !0),
-			u(ue, {
+			u(pe, {
 				"content-size": N.value.height,
 				"controls-id": p,
 				"scroll-element": f.value,
@@ -1256,8 +1293,8 @@ var Be = [
 			])
 		]));
 	}
-}), dt = 300;
-function ft(e, t, n) {
+}), pt = 300;
+function mt(e, t, n) {
 	let r = e.scrollTop;
 	if (n || Math.abs(r - t) <= 1) return e.scrollTop = t, Promise.resolve();
 	e.setAttribute("data-transitioning", "");
@@ -1265,7 +1302,7 @@ function ft(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 / dt), u = 1 - (1 - l) ** 3;
+			let c = Math.max(s - i, 1e3 / 60 * a), l = Math.min(1, c / pt), u = 1 - (1 - l) ** 3;
 			if (e.scrollTop = r + (t - r) * u, l < 1) {
 				requestAnimationFrame(o);
 				return;
@@ -1277,7 +1314,7 @@ function ft(e, t, n) {
 }
 //#endregion
 //#region src/components/ReelAutoAdvanceProgress.vue?vue&type=script&setup=true&lang.ts
-var pt = ["aria-label"], mt = /* @__PURE__ */ d({
+var ht = ["aria-label"], gt = /* @__PURE__ */ d({
 	__name: "ReelAutoAdvanceProgress",
 	props: {
 		durationMs: {},
@@ -1295,9 +1332,9 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 			class: "reel-auto-advance-progress",
 			style: _(a.value),
 			onAnimationend: n[0] ||= (e) => i("complete")
-		}, null, 36)], 8, pt));
+		}, null, 36)], 8, ht));
 	}
-}), ht = { class: "reel-viewport" }, gt = ["data-active-post-id", "data-active-media-index"], _t = ["role", "data-status"], vt = 2, yt = 300, bt = /* @__PURE__ */ d({
+}), _t = { class: "reel-viewport" }, vt = ["data-active-post-id", "data-active-media-index"], yt = ["role", "data-status"], bt = 2, xt = 300, St = /* @__PURE__ */ d({
 	__name: "ReelFeed",
 	props: {
 		initialPostId: {},
@@ -1335,7 +1372,7 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 	],
 	setup(t, { expose: n, emit: i }) {
 		let l = t, u = i, d = w(null), f = w(null), p = l.initialPostId === null || l.initialPostId === void 0 ? -1 : l.items.findIndex((e) => e.postId === l.initialPostId), g = w(Math.max(0, p)), x = w(!1), C = w(!1), D = 0, k = null, A = null, j = null, N = r(() => ({ gridTemplateRows: `repeat(${l.items.length}, 100cqh)` })), I = r(() => {
-			let e = Math.max(0, g.value - vt), t = Math.min(l.items.length - 1, g.value + vt);
+			let e = Math.max(0, g.value - bt), t = Math.min(l.items.length - 1, g.value + bt);
 			return l.items.slice(e, t + 1).map((t, n) => ({
 				fetchPriority: e + n === g.value ? "high" : "low",
 				index: e + n,
@@ -1352,7 +1389,7 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 			if (!e) return "";
 			let t = P(e, z.value);
 			return l.mediaSource === "original" ? t.src : t.preview.src;
-		}), H = r(() => B.value === "ready" && ke(V.value)), W = r(() => [
+		}), H = r(() => B.value === "ready" && He(V.value)), U = r(() => [
 			L.value,
 			z.value,
 			l.items.length,
@@ -1363,46 +1400,46 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 		].join(":")), G = r(() => {
 			let e = R.value, t = !!(e && l.reelAutoAdvance.includePostItems && z.value < M(e).length - 1), n = l.reelAutoAdvance.intervalMs / 1e3;
 			return `Auto advance to the next ${t ? "post item" : "post"} in ${n}s`;
-		}), ee = r(() => l.reelAutoAdvance.enabled && l.reelForward.status === "idle" && R.value !== void 0 && B.value !== "loading" && !H.value), q = r(() => !l.infiniteScroll || l.items.length <= 1), te = r(() => l.reelForward.status === "loading" ? "Loading the next media…" : l.reelForward.status === "error" ? "Unable to load the next media." : "You reached the end of this feed.");
-		function ne(e) {
+		}), K = r(() => l.reelAutoAdvance.enabled && l.reelForward.status === "idle" && R.value !== void 0 && B.value !== "loading" && !H.value), ee = r(() => !l.infiniteScroll || l.items.length <= 1), te = r(() => l.reelForward.status === "loading" ? "Loading the next media…" : l.reelForward.status === "error" ? "Unable to load the next media." : "You reached the end of this feed.");
+		function J(e) {
 			return { gridRow: `${e + 1}` };
 		}
-		function re(e) {
+		function ne(e) {
 			let t = D || e.clientHeight;
 			return t <= 0 || l.items.length === 0 ? 0 : Math.min(l.items.length - 1, Math.max(0, Math.round(e.scrollTop / t)));
 		}
-		function ie(e) {
+		function Y(e) {
 			let t = e.currentTarget;
 			if (!t) return;
 			let n = D || t.clientHeight, r = Math.max(0, l.items.length - 1) * n;
-			x.value = l.items.length > 0 && t.scrollTop > r + 1, C.value || (g.value = re(t)), !l.loadMoreLocked && l.infiniteScroll && K(t) && u("loadMore");
+			x.value = l.items.length > 0 && t.scrollTop > r + 1, C.value || (g.value = ne(t)), !l.loadMoreLocked && l.infiniteScroll && q(t) && u("loadMore");
 		}
-		function ae() {
+		function re() {
 			let e = d.value;
-			e && (x.value = !1, J(!0), D = e.clientHeight, e.scrollTop = g.value * D, A !== null && cancelAnimationFrame(A), A = requestAnimationFrame(() => {
+			e && (x.value = !1, oe(!0), D = e.clientHeight, e.scrollTop = g.value * D, A !== null && cancelAnimationFrame(A), A = requestAnimationFrame(() => {
 				e.scrollTop = g.value * e.clientHeight, D = e.clientHeight, A = null;
-			}), oe());
+			}), ie());
 		}
-		function oe() {
+		function ie() {
 			j !== null && clearTimeout(j), j = setTimeout(() => {
 				j = null;
 				let e = d.value;
-				e && (D = e.clientHeight, e.scrollTop = g.value * D), J(!1);
+				e && (D = e.clientHeight, e.scrollTop = g.value * D), oe(!1);
 			}, 120);
 		}
-		function se() {
-			J(!0);
+		function ae() {
+			oe(!0);
 			let e = d.value;
-			e && (D = e.clientHeight, e.scrollTop = g.value * D), oe();
+			e && (D = e.clientHeight, e.scrollTop = g.value * D), ie();
 		}
-		function J(e) {
+		function oe(e) {
 			C.value = e, d.value?.toggleAttribute("data-resizing", e);
 		}
-		function ce() {
+		function se() {
 			let e = d.value;
-			!l.loadMoreLocked && e && K(e) && u("loadMore");
+			!l.loadMoreLocked && e && q(e) && u("loadMore");
 		}
-		function Y(e) {
+		function ce(e) {
 			let t = R.value;
 			if (!t) return !1;
 			let n = M(t).length;
@@ -1425,19 +1462,19 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 			let t = d.value;
 			if (!t) return Promise.resolve();
 			let n = e * (D || t.clientHeight);
-			return g.value = e, ft(t, n, de());
+			return g.value = e, mt(t, n, de());
 		}
 		function pe(e) {
 			fe(e);
 		}
-		async function X(e) {
+		async function me(e) {
 			let t = l.items.findIndex((t) => t.postId === e);
 			return t < 0 || t === g.value ? !1 : (await fe(t), !0);
 		}
-		async function me(e) {
-			return Y(e) ? (de() || await new Promise((e) => setTimeout(e, yt)), !0) : !1;
+		async function he(e) {
+			return ce(e) ? (de() || await new Promise((e) => setTimeout(e, xt)), !0) : !1;
 		}
-		function he() {
+		function X() {
 			if (!l.reelAutoAdvance.enabled) return;
 			let e = R.value;
 			if (!e) return;
@@ -1453,28 +1490,28 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 			l.reelAutoAdvance.includePostItems && (l.mediaIndices.get(n.postId) ?? 0) !== 0 && u("mediaChange", n.postId, 0), pe(t);
 		}
 		function ge(e, t) {
-			!l.reelAutoAdvance.enabled || e !== L.value || t !== z.value || !H.value || he();
+			!l.reelAutoAdvance.enabled || e !== L.value || t !== z.value || !H.value || X();
 		}
 		return O(d, (e) => {
-			k?.disconnect(), k = null, e && (D = e.clientHeight, !(typeof ResizeObserver > "u") && (k = new ResizeObserver(ae), k.observe(e)));
+			k?.disconnect(), k = null, e && (D = e.clientHeight, !(typeof ResizeObserver > "u") && (k = new ResizeObserver(re), k.observe(e)));
 		}), O(() => l.items.length, async (e) => {
 			let t = l.initialPostId, n = t == null ? -1 : l.items.findIndex(({ postId: e }) => e === t);
-			g.value = n >= 0 ? n : Math.min(g.value, Math.max(0, e - 1)), await m(), ae();
+			g.value = n >= 0 ? n : Math.min(g.value, Math.max(0, e - 1)), await m(), re();
 		}), O(L, (e) => {
 			e !== void 0 && u("activeChange", e);
 		}, { immediate: !0 }), y(() => {
-			window.addEventListener("resize", se), window.addEventListener("orientationchange", se), p >= 0 && m(ae);
+			window.addEventListener("resize", ae), window.addEventListener("orientationchange", ae), p >= 0 && m(re);
 		}), v(() => {
-			window.removeEventListener("resize", se), window.removeEventListener("orientationchange", se), k?.disconnect(), A !== null && cancelAnimationFrame(A), j !== null && clearTimeout(j);
+			window.removeEventListener("resize", ae), window.removeEventListener("orientationchange", ae), k?.disconnect(), A !== null && cancelAnimationFrame(A), j !== null && clearTimeout(j);
 		}), n({
 			activeIndex: g,
 			activePostId: L,
-			changeActiveMedia: Y,
-			loadIfNearBottom: ce,
+			changeActiveMedia: ce,
+			loadIfNearBottom: se,
 			moveActivePost: le,
 			navigateToItem: ue,
-			transitionActiveMedia: me,
-			transitionActivePost: X
+			transitionActiveMedia: he,
+			transitionActivePost: me
 		}), (n, r) => (b(), s("main", {
 			class: h(["reel-shell", {
 				"reel-shell--has-footer": !!t.cardFooter,
@@ -1482,7 +1519,7 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 			}]),
 			"data-layout-mode": "reel"
 		}, [
-			t.cardHeader && R.value && t.reelForward.status === "idle" ? (b(), a(Ae, {
+			t.cardHeader && R.value && t.reelForward.status === "idle" ? (b(), a(je, {
 				key: 0,
 				index: g.value,
 				item: R.value,
@@ -1504,19 +1541,19 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 				"style",
 				"total"
 			])) : o("", !0),
-			c("div", ht, [c("div", {
+			c("div", _t, [c("div", {
 				ref_key: "galleryElement",
 				ref: d,
 				class: "gallery-shell reel-feed",
 				"data-active-post-id": L.value,
 				"data-active-media-index": z.value,
-				onScrollPassive: ie
+				onScrollPassive: Y
 			}, [t.reelForward.status === "idle" ? (b(), s("section", {
 				key: 1,
 				class: "reel-track",
 				style: _(N.value),
 				"aria-label": "Media gallery"
-			}, [(b(!0), s(e, null, S(I.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(tt, {
+			}, [(b(!0), s(e, null, S(I.value, ({ fetchPriority: e, item: n, index: r }) => (b(), a(at, {
 				key: n.postId,
 				active: r === g.value && !x.value,
 				"advance-on-media-end": l.reelAutoAdvance.enabled && r === g.value,
@@ -1525,7 +1562,7 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 				"fetch-priority": e,
 				index: r,
 				item: n,
-				"item-style": ne(r),
+				"item-style": J(r),
 				"media-card": t.mediaCard,
 				layout: "reel",
 				"loaded-count": t.items.length,
@@ -1567,7 +1604,7 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 				class: "reel-forward-retry",
 				type: "button",
 				onClick: r[0] ||= (e) => u("retryForward")
-			}, " Retry ")) : o("", !0)], 8, _t)), t.reelForward.status === "idle" ? (b(), a(U, {
+			}, " Retry ")) : o("", !0)], 8, yt)), t.reelForward.status === "idle" ? (b(), a(W, {
 				key: 2,
 				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
@@ -1576,7 +1613,7 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 				"has-next": t.hasNext,
 				"is-loading": t.isLoadingMore,
 				"load-more-locked": t.loadMoreLocked,
-				"show-load-more": q.value,
+				"show-load-more": ee.value,
 				state: t.state,
 				onLoadMore: r[1] ||= (e) => u("loadMore"),
 				onRetryEnd: r[2] ||= (e) => u("retryEnd")
@@ -1590,13 +1627,13 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 				"load-more-locked",
 				"show-load-more",
 				"state"
-			])) : o("", !0)], 40, gt), c("div", {
+			])) : o("", !0)], 40, vt), c("div", {
 				ref_key: "reelControlsElement",
 				ref: f,
 				class: "reel-media-controls-host",
 				"data-test": "reel-media-controls-host"
 			}, null, 512)]),
-			t.cardFooter && R.value && t.reelForward.status === "idle" ? (b(), a(Ae, {
+			t.cardFooter && R.value && t.reelForward.status === "idle" ? (b(), a(je, {
 				key: 1,
 				index: g.value,
 				item: R.value,
@@ -1618,24 +1655,24 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 				"style",
 				"total"
 			])) : o("", !0),
-			ee.value ? (b(), a(mt, {
-				key: W.value,
+			K.value ? (b(), a(gt, {
+				key: U.value,
 				"duration-ms": t.reelAutoAdvance.intervalMs,
 				label: G.value,
-				onComplete: he
+				onComplete: X
 			}, null, 8, ["duration-ms", "label"])) : o("", !0)
 		], 2));
 	}
-}), xt = ["data-info-sheet-open", "data-info-sheet-mode"], St = ["aria-hidden", "inert"], Ct = {
+}), Ct = ["data-info-sheet-open", "data-info-sheet-mode"], wt = ["aria-hidden", "inert"], Tt = {
 	key: 0,
 	class: "reel-info-sheet-layer",
 	"data-test": "reel-info-sheet"
-}, wt = [
+}, Et = [
 	"role",
 	"aria-modal",
 	"tabindex",
 	"data-active-post-id"
-], Tt = /* @__PURE__ */ d({
+], Dt = /* @__PURE__ */ d({
 	__name: "ReelLayout",
 	props: {
 		forwardIndex: { default: null },
@@ -1760,7 +1797,7 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 			class: "reel-layout-main",
 			"aria-hidden": e.infoSheetOverlay && A.value || void 0,
 			inert: e.infoSheetOverlay && A.value || void 0
-		}, [u(bt, {
+		}, [u(St, {
 			ref_key: "reelFeed",
 			ref: p,
 			"can-retry-end": e.canRetryEnd,
@@ -1811,8 +1848,8 @@ var pt = ["aria-label"], mt = /* @__PURE__ */ d({
 			"reel-forward",
 			"state",
 			"total"
-		])], 8, St), u(n, { name: "vibe-info-sheet" }, {
-			default: k(() => [A.value && e.infoSheet && j.value ? (b(), s("div", Ct, [c("aside", {
+		])], 8, wt), u(n, { name: "vibe-info-sheet" }, {
+			default: k(() => [A.value && e.infoSheet && j.value ? (b(), s("div", Tt, [c("aside", {
 				ref_key: "sheetElement",
 				ref: _,
 				class: "reel-info-sheet",
@@ -1821,14 +1858,14 @@ var pt = ["aria-label"], mt = /* @__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, wt)])) : o("", !0)]),
+			}, [(b(), a(C(e.infoSheet.component), g(f(j.value)), null, 16))], 8, Et)])) : o("", !0)]),
 			_: 1
-		})], 10, xt));
+		})], 10, Ct));
 	}
 });
 //#endregion
 //#region src/core/mediaLifecycle.ts
-function Et(e, t, n, r, i) {
+function Ot(e, t, n, r, i) {
 	let a = e.items.findIndex((e) => e.postId === t), o = e.items[a];
 	if (!o) return null;
 	let s = N(o, n), c = P(o, s);
@@ -1844,7 +1881,7 @@ function Et(e, t, n, r, i) {
 		postIndex: a
 	};
 }
-function Dt(e, t) {
+function kt(e, t) {
 	O(() => {
 		let t = e.layout === "reel" || e.reelOrigin === "masonry" ? e.activeReelPostId : null;
 		return {
@@ -1854,20 +1891,20 @@ function Dt(e, t) {
 		};
 	}, (n, r) => {
 		if (n.postId === null || n.postId === r?.postId && n.mediaIndex === r.mediaIndex && n.origin === r.origin) return;
-		let i = Et(e, n.postId, n.mediaIndex, "reel", n.origin);
+		let i = Ot(e, n.postId, n.mediaIndex, "reel", n.origin);
 		i && t(i);
 	}, { flush: "sync" });
 }
 //#endregion
 //#region src/components/useMediaLifecycle.ts
-function Ot(e, t) {
+function At(e, t) {
 	let n = w(/* @__PURE__ */ new Map()), i = w(/* @__PURE__ */ new Map()), a = r(() => e.reelMediaSource === "original" ? i.value : n.value);
 	function o(e, t, n, r) {
 		let i = F(t, n);
 		e.value.get(i) !== r && (e.value = new Map(e.value).set(i, r));
 	}
 	function s(t, n, r, i) {
-		return Et(e, t, n, r, i);
+		return Ot(e, t, n, r, i);
 	}
 	function c(e, n, r, i) {
 		let a = s(e, n, r, i);
@@ -1889,7 +1926,7 @@ function Ot(e, t) {
 		let r = s(e, n, "masonry", null);
 		r && t.visible(r);
 	}
-	return Dt(e, t.reelChange), O(() => {
+	return kt(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,
@@ -1914,16 +1951,16 @@ function Ot(e, t) {
 }
 //#endregion
 //#region src/core/reelEscapeStack.ts
-var kt = [];
-function At(e) {
-	return kt.push(e), () => {
-		let t = kt.indexOf(e);
-		t >= 0 && kt.splice(t, 1);
+var jt = [];
+function Mt(e) {
+	return jt.push(e), () => {
+		let t = jt.indexOf(e);
+		t >= 0 && jt.splice(t, 1);
 	};
 }
-function jt(e) {
+function Nt(e) {
 	if (!e.isActive()) return !1;
-	let t = kt.filter((e) => e.isActive()), n = e.element();
+	let t = jt.filter((e) => e.isActive()), n = e.element();
 	return n !== null && t.some((t) => {
 		if (t === e) return !1;
 		let r = t.element();
@@ -1939,14 +1976,14 @@ function jt(e) {
 }
 //#endregion
 //#region src/components/useReelKeyboard.ts
-function Mt(e) {
+function Pt(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 && !jt(t)) return;
+		if (n.key === "Escape" && r && !Nt(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;
@@ -1966,14 +2003,14 @@ function Mt(e) {
 		a !== 0 && e.reelRenderer()?.changeActiveMedia?.(a) && n.preventDefault();
 	}
 	y(() => {
-		n = At(t), window.addEventListener("keydown", r);
+		n = Mt(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 Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
+var Ft = 35, It = 420, Lt = /* @__PURE__ */ d({
 	__name: "VibeSurface",
 	props: {
 		canRetryEnd: { type: Boolean },
@@ -1982,6 +2019,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 		feedFooter: {},
 		feedFooterActions: {},
 		mediaCard: {},
+		masonry: {},
 		reelInfoSheet: {},
 		state: {}
 	},
@@ -1998,22 +2036,22 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 		"retryForward"
 	],
 	setup(t, { expose: i, emit: c }) {
-		let l = t, d = c, f = w(null), p = w(null), h = w(null), g = w(null), 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(() => I(l.state)), { markMasonryVisible: j, markPreviewError: P, markPreviewReady: F, markReelError: L, markReelReady: R, originalStates: z, previewStates: B, reelStates: V } = Ot(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(() => L(l.state, A.value)), { markMasonryVisible: P, markPreviewError: F, markPreviewReady: I, markReelError: R, markReelReady: z, originalStates: B, previewStates: V, reelStates: H } = At(l.state, {
 			ready: (e) => d("mediaReady", e),
 			reelChange: (e) => d("reelMediaChange", e),
 			visible: (e) => d("mediaVisible", e)
-		}), H = new Set(l.state.items.map((e) => e.postId)), U = null, W = null, G = !1;
-		function K() {
+		}), U = new Set(l.state.items.map((e) => e.postId)), W = null, G = null, K = !1;
+		function q() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
-		function q() {
-			U !== null && cancelAnimationFrame(U), U = requestAnimationFrame(() => {
-				U = requestAnimationFrame(() => {
-					U = null, S.value = /* @__PURE__ */ new Set();
+		function te() {
+			W !== null && cancelAnimationFrame(W), W = requestAnimationFrame(() => {
+				W = requestAnimationFrame(() => {
+					W = null, S.value = /* @__PURE__ */ new Set();
 				});
 			});
 		}
-		function te(e, t) {
+		function J(e, t) {
 			let n = l.state.items.find((t) => t.postId === e);
 			if (!n) return;
 			let r = N(n, t);
@@ -2022,46 +2060,46 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 		async function ne() {
 			await m(), (l.state.layout === "reel" || l.state.reelOrigin === "masonry" ? p.value : f.value)?.loadIfNearBottom();
 		}
-		function re(e) {
+		function Y(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 = M(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 se(e, t) {
-			W = e, G = t === "keyboard", y.value = le(e), d("openReel", e), m(() => h.value?.focus());
+		function oe(e, t) {
+			G = e, K = t === "keyboard", y.value = ue(e), d("openReel", e), m(() => h.value?.focus());
 		}
-		function J(e) {
+		function se(e) {
 			let t = g.value?.querySelectorAll(".masonry-feed [data-post-id]") ?? [];
 			return Array.from(t).find((t) => t.dataset.postId === String(e)) ?? null;
 		}
 		function ce(e) {
-			if (l.state.layout !== "masonry" || l.state.reelOrigin !== null || K()) return 0;
-			let t = [...new Set(e)], n = t.filter(J);
+			if (l.state.layout !== "masonry" || l.state.reelOrigin !== null || q()) return 0;
+			let t = [...new Set(e)], n = t.filter(se);
 			if (n.length === 0) return 0;
 			let r = new Map(D.value);
 			return n.forEach((e, t) => {
-				r.set(e, t * Nt);
-			}), S.value = new Set([...S.value].filter((e) => !n.includes(e))), T.value = new Set([...T.value, ...t]), D.value = r, Pt + (n.length - 1) * Nt;
+				r.set(e, t * Ft);
+			}), S.value = new Set([...S.value].filter((e) => !n.includes(e))), T.value = new Set([...T.value, ...t]), D.value = r, It + (n.length - 1) * Ft;
 		}
-		function Y(e, t) {
-			let n = J(e), r = n?.querySelector(".media-card-activator") ?? n;
+		function le(e, t) {
+			let n = se(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 le(e) {
-			let t = g.value, n = J(e);
+		function ue(e) {
+			let t = g.value, n = se(e);
 			if (t === null || n === null) return {};
 			let r = t.getBoundingClientRect(), i = n.getBoundingClientRect();
 			return {
@@ -2071,40 +2109,40 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 				"--vibe-reel-origin-left": `${Math.max(0, i.left - r.left)}px`
 			};
 		}
-		function ue() {
-			l.state.reelOrigin === "masonry" && (W ??= l.state.activeReelPostId, x.value = !0, d("closeReel"));
-		}
 		function de() {
-			let e = W, t = G;
-			x.value = !1, W = null, G = !1, y.value = {}, m(() => {
-				e !== null && Y(e, t);
+			l.state.reelOrigin === "masonry" && (G ??= l.state.activeReelPostId, x.value = !0, d("closeReel"));
+		}
+		function fe() {
+			let e = G, t = K;
+			x.value = !1, G = null, K = !1, y.value = {}, m(() => {
+				e !== null && le(e, t);
 			});
 		}
-		return Mt({
-			closeMasonryReel: ue,
+		return Pt({
+			closeMasonryReel: de,
 			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) => !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 t = e.filter((e) => !U.has(e)), n = new Set(e);
+			if (U = 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 || q()) 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 * Nt);
-			}), C.value = r, S.value = new Set([...S.value, ...t]), q();
+				r.set(e, t * Ft);
+			}), C.value = r, S.value = new Set([...S.value, ...t]), te();
 		}, { flush: "sync" }), v(() => {
-			U !== null && cancelAnimationFrame(U);
+			W !== null && cancelAnimationFrame(W);
 		}), i({
-			changeActiveReelMedia: re,
-			getAutoScrollElement: oe,
+			changeActiveReelMedia: Y,
+			getAutoScrollElement: ae,
 			loadIfNearBottom: ne,
-			moveActiveReelPost: ie,
-			navigateToReelItem: ae,
+			moveActiveReelPost: re,
+			navigateToReelItem: ie,
 			startItemRemoval: ce,
 			transitionActiveReelMedia: (e) => p.value?.transitionActiveMedia?.(e) ?? Promise.resolve(!1),
 			transitionActiveReelPost: (e) => p.value?.transitionActivePost?.(e) ?? Promise.resolve(!1)
@@ -2112,7 +2150,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 			ref_key: "surfaceElement",
 			ref: g,
 			class: "vibe-surface"
-		}, [t.state.layout === "reel" && (t.state.items.length > 0 || t.state.reelForward.status !== "idle") ? (b(), a(Tt, {
+		}, [t.state.layout === "reel" && (t.state.items.length > 0 || t.state.reelForward.status !== "idle") ? (b(), a(Dt, {
 			key: 0,
 			ref_key: "reelRenderer",
 			ref: p,
@@ -2137,17 +2175,17 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 			"info-sheet-overlay": t.state.reelInfoSheetOverlay,
 			"next-page-error": !!t.state.nextPageError,
 			origin: "reel",
-			"preview-states": E(V),
+			"preview-states": E(H),
 			"reel-auto-advance": t.state.reelAutoAdvance,
 			"reel-forward": t.state.reelForward,
-			state: A.value,
+			state: j.value,
 			total: t.state.total,
 			onActiveChange: i[0] ||= (e) => d("activeReelChange", e),
 			onCloseInfoSheet: i[1] ||= (e) => d("reelInfoSheetChange", !1),
-			onError: E(L),
+			onError: E(R),
 			onLoadMore: i[2] ||= (e) => d("loadMore"),
-			onMediaChange: te,
-			onReady: E(R),
+			onMediaChange: J,
+			onReady: E(z),
 			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(ee, {
@@ -2155,7 +2193,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 			actions: t.feedFooterActions,
 			"can-retry-end": t.canRetryEnd,
 			"feed-footer": t.feedFooter,
-			state: A.value,
+			state: j.value,
 			onLoadMore: i[5] ||= (e) => d("loadMore"),
 			onRetryEnd: i[6] ||= (e) => d("retryEnd")
 		}, null, 8, [
@@ -2163,7 +2201,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 			"can-retry-end",
 			"feed-footer",
 			"state"
-		])) : (b(), s(e, { key: 2 }, [u(ut, {
+		])) : (b(), s(e, { key: 2 }, [u(ft, {
 			ref_key: "masonryRenderer",
 			ref: f,
 			"can-retry-end": t.canRetryEnd,
@@ -2176,6 +2214,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 			"feed-footer": t.feedFooter,
 			"feed-footer-actions": t.feedFooterActions,
 			"media-card": t.mediaCard,
+			masonry: t.masonry,
 			"has-next": t.state.next !== null,
 			"infinite-scroll": t.state.infiniteScroll,
 			"is-loading-more": t.state.isLoadingMore,
@@ -2183,17 +2222,17 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 			"load-more-locked": t.state.loadMoreLocked,
 			"media-indices": t.state.mediaIndices,
 			"next-page-error": !!t.state.nextPageError,
-			"preview-states": E(B),
+			"preview-states": E(V),
 			suspended: t.state.reelOrigin === "masonry" || x.value,
-			state: A.value,
+			state: j.value,
 			total: t.state.total,
-			onActivate: se,
-			onError: E(P),
+			onActivate: oe,
+			onError: E(F),
 			onLoadMore: i[7] ||= (e) => d("loadMore"),
-			onMediaChange: te,
-			onReady: E(F),
+			onMediaChange: J,
+			onReady: E(I),
 			onRetryEnd: i[8] ||= (e) => d("retryEnd"),
-			onVisible: E(j)
+			onVisible: E(P)
 		}, null, 8, [
 			"can-retry-end",
 			"entering-post-ids",
@@ -2205,6 +2244,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 			"feed-footer",
 			"feed-footer-actions",
 			"media-card",
+			"masonry",
 			"has-next",
 			"infinite-scroll",
 			"is-loading-more",
@@ -2221,7 +2261,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 			"onVisible"
 		]), u(n, {
 			name: "vibe-reel-viewer",
-			onAfterLeave: de
+			onAfterLeave: fe
 		}, {
 			default: k(() => [t.state.reelOrigin === "masonry" ? (b(), s("section", {
 				key: 0,
@@ -2233,7 +2273,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 				"aria-modal": "true",
 				tabindex: "-1",
 				style: _(y.value)
-			}, [u(Tt, {
+			}, [u(Dt, {
 				ref_key: "reelRenderer",
 				ref: p,
 				"can-retry-end": t.canRetryEnd,
@@ -2257,17 +2297,17 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 				"media-source": "original",
 				"next-page-error": !!t.state.nextPageError,
 				origin: "masonry",
-				"preview-states": E(z),
+				"preview-states": E(B),
 				"reel-auto-advance": t.state.reelAutoAdvance,
 				"reel-forward": t.state.reelForward,
-				state: A.value,
+				state: j.value,
 				total: t.state.total,
 				onActiveChange: i[9] ||= (e) => d("activeReelChange", e),
 				onCloseInfoSheet: i[10] ||= (e) => d("reelInfoSheetChange", !1),
-				onError: E(L),
+				onError: E(R),
 				onLoadMore: i[11] ||= (e) => d("loadMore"),
-				onMediaChange: te,
-				onReady: E(R),
+				onMediaChange: J,
+				onReady: E(z),
 				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)]),
@@ -2277,7 +2317,7 @@ var Nt = 35, Pt = 420, Ft = /* @__PURE__ */ d({
 });
 //#endregion
 //#region src/core/page.ts
-function It(e) {
+function Rt(e) {
 	if (!e || typeof e != "object" || !Array.isArray(e.items)) throw TypeError("Vibe loadPage must resolve to a page with an items array.");
 	if (e.next !== null && typeof e.next != "string" && typeof e.next != "number") throw TypeError("Vibe page next must be a string, number, or null.");
 	if (e.total !== void 0 && (!Number.isFinite(e.total) || e.total < 0)) throw TypeError("Vibe page total must be a non-negative number when provided.");
@@ -2289,32 +2329,32 @@ function Z(e, t) {
 }
 //#endregion
 //#region src/core/requestDelay.ts
-var Lt = 2e3, Rt = 1e4, zt = 250, Bt = {
+var zt = 2e3, Bt = 1e4, Vt = 250, Ht = {
 	delayRemainingMs: null,
 	nextRequestAt: null
 };
-function Vt(e, t) {
+function Ut(e, t) {
 	return e === void 0 ? t : Math.floor(e);
 }
-function Ht(e, t) {
+function Wt(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 Ut(e, t = {}) {
-	let n = Vt(t.delayStepMs, Lt), r = Vt(t.delayMaxMs, Rt);
+function Gt(e, t = {}) {
+	let n = Ut(t.delayStepMs, zt), r = Ut(t.delayMaxMs, Bt);
 	return Math.min(Math.max(0, e) * n, r);
 }
 function Q(e) {
-	if (e == null || !Number.isFinite(e)) return { ...Bt };
+	if (e == null || !Number.isFinite(e)) return { ...Ht };
 	let t = Math.max(0, Math.floor(e - Date.now()));
 	return t > 0 ? {
 		delayRemainingMs: t,
 		nextRequestAt: e
-	} : { ...Bt };
+	} : { ...Ht };
 }
-async function Wt({ delayMs: e, onChange: t, signal: n }) {
+async function Kt({ delayMs: e, onChange: t, signal: n }) {
 	if (n.aborted) throw new DOMException("Aborted", "AbortError");
 	if (e <= 0) {
-		t({ ...Bt });
+		t({ ...Ht });
 		return;
 	}
 	let r = Date.now() + e;
@@ -2322,9 +2362,9 @@ async function Wt({ delayMs: e, onChange: t, signal: n }) {
 		delayRemainingMs: e,
 		nextRequestAt: r
 	}), await new Promise((i, a) => {
-		let o = !1, s = setInterval(f, zt), c = setTimeout(() => u(), e);
+		let o = !1, s = setInterval(f, Vt), c = setTimeout(() => u(), e);
 		function l() {
-			clearInterval(s), clearTimeout(c), n.removeEventListener("abort", d), t({ ...Bt });
+			clearInterval(s), clearTimeout(c), n.removeEventListener("abort", d), t({ ...Ht });
 		}
 		function u(e) {
 			o || (o = !0, l(), e ? a(e) : i());
@@ -2339,13 +2379,13 @@ async function Wt({ delayMs: e, onChange: t, signal: n }) {
 		n.addEventListener("abort", d, { once: !0 });
 	});
 }
-var Gt = class {
+var qt = class {
 	interval = null;
 	constructor(e) {
 		this.onChange = e;
 	}
 	clear() {
-		this.interval !== null && clearInterval(this.interval), this.interval = null, this.onChange({ ...Bt });
+		this.interval !== null && clearInterval(this.interval), this.interval = null, this.onChange({ ...Ht });
 	}
 	sync(e) {
 		this.clear();
@@ -2353,22 +2393,22 @@ var Gt = class {
 		this.onChange(t), t.delayRemainingMs !== null && (this.interval = setInterval(() => {
 			let t = Q(e);
 			this.onChange(t), t.delayRemainingMs === null && this.clear();
-		}, zt));
+		}, Vt));
 	}
 };
-function Kt(e, t = !0) {
+function Jt(e, t = !0) {
 	return e.maxAdditionalPages === "unlimited" ? Infinity : (e.maxAdditionalPages ?? 10) + (t ? 1 : 0);
 }
-function qt(e) {
+function Yt(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function Jt(e, t) {
+function Xt(e, t) {
 	if (!Number.isInteger(e) || e <= 0) throw TypeError(`Vibe ${t} must be a positive integer.`);
 }
-function Yt(e) {
+function Zt(e) {
 	if (!e) return;
-	if (Jt(e.pageSize, "autofill pageSize"), e.strategy === "frontend") {
-		Ht(e, "frontend autofill");
+	if (Xt(e.pageSize, "autofill pageSize"), e.strategy === "frontend") {
+		Wt(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;
@@ -2380,7 +2420,7 @@ function Yt(e) {
 		if (t.pageSize !== e.pageSize) throw TypeError("Vibe backend autofill initialSession pageSize must match autofill pageSize.");
 	}
 }
-function Xt(e, t, n = !0) {
+function Qt(e, t, n = !0) {
 	if (!e) return {
 		cycleId: null,
 		delayRemainingMs: null,
@@ -2414,7 +2454,7 @@ function Xt(e, t, n = !0) {
 		strategy: e.strategy
 	};
 }
-function Zt(e) {
+function $t(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -2422,9 +2462,9 @@ function Zt(e) {
 		"waiting"
 	].includes(e.status);
 }
-async function Qt(e, t, n) {
+async function en(e, t, n) {
 	let r = t.autofill;
-	if (!Zt(r) || !r.cycleId) return;
+	if (!$t(r) || !r.cycleId) return;
 	let i = {
 		cycleId: r.cycleId,
 		feedKey: r.feedKey ?? "",
@@ -2437,16 +2477,16 @@ async function Qt(e, t, n) {
 		throw r.error = e, r.status = "error", e;
 	}
 }
-function $t(e, t, n) {
+function tn(e, t, n) {
 	return e?.strategy === "backend" && t.feedKey === e.feedKey && t.sessionId === n.sessionId;
 }
-async function en({ 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 ?? Kt(s), g = t, _ = t, v = t, y = 0, b = [], x;
+async function nn({ 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 ?? Jt(s), g = t, _ = t, v = t, y = 0, b = [], x;
 	for (; y < h;) {
-		let e = qt(g);
+		let e = Yt(g);
 		if (m.has(e)) throw Error("Vibe autofill received a repeated cursor.");
-		if (m.add(e), await Wt({
-			delayMs: Ut(l + y, s),
+		if (m.add(e), await Kt({
+			delayMs: Gt(l + y, s),
 			onChange: a,
 			signal: d
 		}), y > 0 && u()) return {
@@ -2460,7 +2500,7 @@ async function en({ existingItems: e, initialCursor: t, loadPage: n, maximumRequ
 			status: "paused",
 			total: x
 		};
-		let t = It(await n({
+		let t = Rt(await n({
 			cursor: g,
 			signal: d
 		}));
@@ -2517,12 +2557,12 @@ async function en({ existingItems: e, initialCursor: t, loadPage: n, maximumRequ
 }
 //#endregion
 //#region src/core/autofillController.ts
-var tn = class {
+var rn = class {
 	collection = null;
 	cycle = 0;
 	delayCountdown;
 	constructor(e) {
-		this.context = e, this.delayCountdown = new Gt((t) => Object.assign(e.state.autofill, t)), this.syncCountdown();
+		this.context = e, this.delayCountdown = new qt((t) => Object.assign(e.state.autofill, t)), this.syncCountdown();
 	}
 	beginCycle() {
 		let { options: e, state: t } = this.context;
@@ -2530,14 +2570,14 @@ var tn = class {
 		this.clear();
 		let n = `vibe-autofill-${Date.now().toString(36)}-${++this.cycle}`;
 		return t.autofill = {
-			...Xt(e, void 0, !1),
+			...Qt(e, void 0, !1),
 			cycleId: n,
 			status: "filling"
 		}, n;
 	}
 	async cancel() {
 		let { cancelRequest: e, options: t, state: n } = this.context;
-		await Qt(t, n, e), this.commitCollection();
+		await en(t, n, e), this.commitCollection();
 	}
 	captureCollection(e, t) {
 		t && (this.collection = e);
@@ -2565,30 +2605,30 @@ var tn = class {
 			requests: r.requests
 		}));
 	}
-}, nn = 100;
-function rn(e, t) {
+}, an = 100;
+function on(e, t) {
 	if (!Number.isFinite(t) || t <= 0) throw TypeError(`Vibe ${e} must be a positive number.`);
 }
-function an(e, t, n) {
+function sn(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function on(e) {
+function cn(e) {
 	if (!e) return;
 	let t = e.minSpeedPxPerSecond ?? 20, n = e.maxSpeedPxPerSecond ?? 240;
-	if (rn("autoScroll.minSpeedPxPerSecond", t), rn("autoScroll.maxSpeedPxPerSecond", n), t > n) throw TypeError("Vibe autoScroll.minSpeedPxPerSecond cannot exceed maxSpeedPxPerSecond.");
-	e.speedPxPerSecond !== void 0 && rn("autoScroll.speedPxPerSecond", e.speedPxPerSecond);
+	if (on("autoScroll.minSpeedPxPerSecond", t), on("autoScroll.maxSpeedPxPerSecond", n), t > n) throw TypeError("Vibe autoScroll.minSpeedPxPerSecond cannot exceed maxSpeedPxPerSecond.");
+	e.speedPxPerSecond !== void 0 && on("autoScroll.speedPxPerSecond", e.speedPxPerSecond);
 }
-function sn(e) {
+function ln(e) {
 	let t = e?.minSpeedPxPerSecond ?? 20, n = e?.maxSpeedPxPerSecond ?? 240;
 	return {
 		enabled: e?.enabled ?? !1,
 		maxSpeedPxPerSecond: n,
 		minSpeedPxPerSecond: t,
 		paused: !1,
-		speedPxPerSecond: an(e?.speedPxPerSecond ?? 80, t, n)
+		speedPxPerSecond: sn(e?.speedPxPerSecond ?? 80, t, n)
 	};
 }
-var cn = class {
+var un = class {
 	frame = null;
 	lastTimestamp = null;
 	mounted = !1;
@@ -2608,9 +2648,9 @@ var cn = class {
 		this.options.state.enabled && (this.options.state.paused = e, this.lastTimestamp = null, e ? this.cancelFrame() : this.schedule());
 	}
 	setSpeed(e) {
-		rn("auto-scroll speed", e);
+		on("auto-scroll speed", e);
 		let t = this.options.state;
-		t.speedPxPerSecond = an(e, t.minSpeedPxPerSecond, t.maxSpeedPxPerSecond);
+		t.speedPxPerSecond = sn(e, t.minSpeedPxPerSecond, t.maxSpeedPxPerSecond);
 	}
 	tick = (e) => {
 		this.frame = null;
@@ -2622,7 +2662,7 @@ var cn = class {
 			return;
 		}
 		if (this.lastTimestamp !== null) {
-			let r = Math.min(nn, Math.max(0, e - this.lastTimestamp)), i = Math.max(0, n.scrollHeight - n.clientHeight);
+			let r = Math.min(an, 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();
@@ -2636,7 +2676,7 @@ var cn = class {
 };
 //#endregion
 //#region src/core/backendAutofill.ts
-async function ln(e, t, n, r) {
+async function dn(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.");
@@ -2650,19 +2690,19 @@ async function ln(e, t, n, r) {
 		status: "waiting"
 	});
 }
-function un(e, t) {
+function fn(e, t) {
 	["complete", "exhausted"].includes(t.status) && t.items && (e.items = Z(e.items, t.items)), t.next !== void 0 && (e.next = t.next), t.total !== void 0 && (e.total = t.total);
 }
-function dn(e, t, n) {
+function pn(e, t, n) {
 	let r = t.autofill;
-	return !$t(e, n, r) || n.sequence <= r.sequence || ["cancelled", "cancelling"].includes(r.status) || ["complete", "exhausted"].includes(n.status) && n.next === void 0 ? !1 : (un(t, n), Object.assign(r, Q(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 !tn(e, n, r) || n.sequence <= r.sequence || ["cancelled", "cancelling"].includes(r.status) || ["complete", "exhausted"].includes(n.status) && n.next === void 0 ? !1 : (fn(t, n), Object.assign(r, Q(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 fn(e, t, n) {
-	return e?.strategy !== "backend" || n.feedKey !== e.feedKey || n.pageSize !== e.pageSize ? !1 : (t.autofill = Xt(e, n), un(t, n), !0);
+function mn(e, t, n) {
+	return e?.strategy !== "backend" || n.feedKey !== e.feedKey || n.pageSize !== e.pageSize ? !1 : (t.autofill = Qt(e, n), fn(t, n), !0);
 }
 //#endregion
 //#region src/core/initialAutofill.ts
-async function pn({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r, onPages: i, options: a, signal: o, state: s }) {
+async function hn({ 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;
@@ -2675,7 +2715,7 @@ async function pn({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r,
 		return;
 	}
 	if (c.strategy === "backend") {
-		await ln(c, s, {
+		await dn(c, s, {
 			cycleId: e,
 			feedKey: c.feedKey,
 			items: [...s.items],
@@ -2692,11 +2732,11 @@ async function pn({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r,
 		s.autofill.status = "exhausted";
 		return;
 	}
-	let u = await en({
+	let u = await nn({
 		existingItems: s.items,
 		initialCursor: s.next,
 		loadPage: a.loadPage,
-		maximumRequests: Kt(c, !1),
+		maximumRequests: Jt(c, !1),
 		onCollection: n,
 		onDelayChange: (e) => {
 			t() && Object.assign(s.autofill, e);
@@ -2719,13 +2759,13 @@ async function pn({ cycleId: e, isCurrent: t, onCollection: n, onLastCursor: r,
 }
 //#endregion
 //#region src/core/fill.ts
-function mn(e) {
+function gn(e) {
 	return "pages" in e ? { pages: e.pages } : { until: "end" };
 }
-function hn(e) {
+function _n(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function gn(e) {
+function vn(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.");
@@ -2734,20 +2774,20 @@ function gn(e) {
 	if ("until" in e && e.until === "end") return { until: "end" };
 	throw TypeError("Vibe fill target must be { pages } or { until: 'end' }.");
 }
-function _n(e) {
+function yn(e) {
 	if (!e) return;
 	if (e.strategy === "frontend") {
-		Ht(e, "frontend fill");
+		Wt(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.");
-		gn(t.target);
+		vn(t.target);
 	}
 }
-function vn(e, t, n = !0) {
+function bn(e, t, n = !0) {
 	let r = e?.strategy === "backend" && n ? e.initialSession : void 0, i = t ?? r, a = Q(i?.nextRequestAt);
 	return {
 		completedPages: i?.completedPages ?? 0,
@@ -2761,10 +2801,10 @@ function vn(e, t, n = !0) {
 		sessionId: i?.sessionId ?? null,
 		status: i?.status ?? "idle",
 		strategy: e?.strategy ?? null,
-		target: i ? mn(i.target) : null
+		target: i ? gn(i.target) : null
 	};
 }
-function yn(e) {
+function xn(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -2772,13 +2812,13 @@ function yn(e) {
 		"waiting"
 	].includes(e.status);
 }
-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 }) {
+async function Sn({ 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;
 	for (; _ !== null;) {
-		let e = hn(h);
+		let e = _n(h);
 		if (p.has(e)) throw Error("Vibe fill received a repeated cursor.");
-		if (p.add(e), await Wt({
-			delayMs: Ut(m, o),
+		if (p.add(e), await Kt({
+			delayMs: Gt(m, o),
 			onChange: i,
 			signal: c
 		}), m > 0 && s()) return {
@@ -2791,7 +2831,7 @@ async function bn({ existingItems: e, initialCursor: t, loadPage: n, onCollectio
 			status: "paused",
 			total: y
 		};
-		let t = It(await n({
+		let t = Rt(await n({
 			cursor: h,
 			signal: c
 		}));
@@ -2859,7 +2899,7 @@ async function bn({ existingItems: e, initialCursor: t, loadPage: n, onCollectio
 }
 //#endregion
 //#region src/core/backendFill.ts
-async function xn(e, t, n, r) {
+async function Cn(e, t, n, r) {
 	let i = await e.onStart(n);
 	if (r()) {
 		if (!i.sessionId.trim()) throw TypeError("Vibe backend fill requires a sessionId.");
@@ -2873,22 +2913,22 @@ async function xn(e, t, n, r) {
 		});
 	}
 }
-function Sn(e, t, n) {
+function wn(e, t, n) {
 	return e?.strategy === "backend" && n.feedKey === e.feedKey && n.sessionId === t.fill.sessionId;
 }
-function Cn(e) {
+function Tn(e) {
 	return Number.isInteger(e.completedPages) && e.completedPages >= 0 && Number.isInteger(e.received) && e.received >= 0 && Number.isInteger(e.sequence) && e.sequence >= 0;
 }
-function wn(e, t) {
+function En(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 Tn(e, t, n) {
+function Dn(e, t, n) {
 	t.total !== void 0 && (e.total = t.total), ["complete", "exhausted"].includes(t.status) && (e.items = Z(e.items, t.items ?? []), e.next = t.next ?? null, n(t.lastCursor ?? null));
 }
-function En(e, t, n, r) {
-	return !Sn(e, t, n) || !Cn(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !wn(t, n) ? !1 : (Tn(t, n, r), Object.assign(t.fill, {
+function On(e, t, n, r) {
+	return !wn(e, t, n) || !Tn(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !En(t, n) ? !1 : (Dn(t, n, r), Object.assign(t.fill, {
 		...Q(n.status === "waiting" ? n.nextRequestAt : null),
 		completedPages: n.completedPages,
 		error: n.error ?? null,
@@ -2897,42 +2937,42 @@ function En(e, t, n, r) {
 		status: n.status
 	}), !0);
 }
-function Dn(e, t, n, r) {
+function kn(e, t, n, r) {
 	if (e?.strategy !== "backend" || n.feedKey !== e.feedKey) return !1;
 	let i = t.fill;
-	return t.fill = vn(e, n), !Cn(n) || !wn(t, n) ? (t.fill = i, !1) : (Tn(t, n, r), !0);
+	return t.fill = bn(e, n), !Tn(n) || !En(t, n) ? (t.fill = i, !1) : (Dn(t, n, r), !0);
 }
 //#endregion
 //#region src/core/fillController.ts
-var On = class {
+var An = class {
 	abortController = null;
 	cycle = 0;
 	delayCountdown;
 	requestVersion = 0;
 	collection = null;
 	constructor(e) {
-		this.options = e, this.delayCountdown = new Gt((e) => {
+		this.options = e, this.delayCountdown = new qt((e) => {
 			Object.assign(this.options.state.fill, e);
 		}), this.syncBackendCountdown();
 	}
 	isActive() {
-		return yn(this.options.state.fill);
+		return xn(this.options.state.fill);
 	}
 	applyUpdate(e) {
-		let t = En(this.options.fill, this.options.state, e, this.options.onLastCursor);
+		let t = On(this.options.fill, this.options.state, e, this.options.onLastCursor);
 		return t && this.syncBackendCountdown(), t;
 	}
 	restoreSession(e) {
-		let t = Dn(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;
 	}
 	async start(e) {
 		let t = this.options.fill;
 		if (!t) throw Error("Vibe fill is not configured.");
 		if (this.isActive()) throw Error("Vibe fill is already active.");
-		let n = gn(e), r = `vibe-fill-${Date.now().toString(36)}-${++this.cycle}`;
+		let n = vn(e), r = `vibe-fill-${Date.now().toString(36)}-${++this.cycle}`;
 		if (this.options.state.fill = {
-			...vn(t, void 0, !1),
+			...bn(t, void 0, !1),
 			cycleId: r,
 			status: "filling",
 			target: n
@@ -2943,7 +2983,7 @@ var On = class {
 		let i = ++this.requestVersion, a = new AbortController();
 		this.abortController = a;
 		try {
-			t.strategy === "frontend" ? await this.startFrontend(t, n, a, i) : (await xn(t, this.options.state, {
+			t.strategy === "frontend" ? await this.startFrontend(t, n, a, i) : (await Cn(t, this.options.state, {
 				cycleId: r,
 				feedKey: t.feedKey,
 				items: [...this.options.state.items],
@@ -2961,7 +3001,7 @@ var On = class {
 	}
 	async cancel() {
 		let { fill: e, state: t } = this.options;
-		if (!yn(t.fill) || !t.fill.cycleId) return;
+		if (!xn(t.fill) || !t.fill.cycleId) return;
 		let n = {
 			cycleId: t.fill.cycleId,
 			feedKey: t.fill.feedKey ?? "",
@@ -2975,7 +3015,7 @@ var On = class {
 		}
 	}
 	reset() {
-		this.abortLocalRequest(), this.delayCountdown.clear(), this.options.state.fill = vn(this.options.fill, void 0, !1), this.collection = null;
+		this.abortLocalRequest(), this.delayCountdown.clear(), this.options.state.fill = bn(this.options.fill, void 0, !1), this.collection = null;
 	}
 	destroy() {
 		this.abortLocalRequest(), this.delayCountdown.clear();
@@ -2991,7 +3031,7 @@ var On = class {
 		if (!i) throw Error("Vibe frontend fill requires loadPage.");
 		let a = this.options.state;
 		a.isLoadingMore = !0;
-		let o = await bn({
+		let o = await Sn({
 			existingItems: a.items,
 			initialCursor: a.next,
 			loadPage: i,
@@ -3031,7 +3071,7 @@ var On = class {
 };
 //#endregion
 //#region src/core/feedFooter.ts
-function kn(e) {
+function jn(e) {
 	return {
 		cancelAutofill: () => e.cancelAutofill(),
 		loadMore: () => e.loadNext(),
@@ -3039,45 +3079,45 @@ function kn(e) {
 		retryEnd: () => e.retryEnd()
 	};
 }
-function An(e) {
+function Mn(e) {
 	if (!Number.isFinite(e) || e <= 0) throw TypeError("Vibe reelAutoAdvance.intervalMs must be a positive number.");
 }
-function jn(e) {
-	e?.intervalMs !== void 0 && An(e.intervalMs);
+function Nn(e) {
+	e?.intervalMs !== void 0 && Mn(e.intervalMs);
 }
-function Mn(e) {
+function Pn(e) {
 	return {
 		enabled: e?.enabled ?? !1,
 		includePostItems: e?.includePostItems ?? !1,
 		intervalMs: e?.intervalMs ?? 5e3
 	};
 }
-function Nn(e, t) {
+function Fn(e, t) {
 	if (typeof t == "boolean") {
 		e.enabled = t;
 		return;
 	}
-	jn(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);
+	Nn(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 Pn(e) {
+function In(e) {
 	return { enabled: e?.enabled ?? !1 };
 }
-function Fn(e, t, n) {
+function Ln(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 In(e, t) {
+function Rn(e, t) {
 	let n = e.initialPage;
 	return {
 		activeReelPostId: null,
-		autoScroll: sn(e.autoScroll),
-		autofill: Xt(e.autofill),
+		autoScroll: ln(e.autoScroll),
+		autofill: Qt(e.autofill),
 		error: null,
-		fill: vn(e.fill),
+		fill: bn(e.fill),
 		infiniteScroll: e.infiniteScroll ?? !0,
 		isLoading: !n,
 		isLoadingMore: !1,
@@ -3088,14 +3128,14 @@ function In(e, t) {
 		next: n?.next ?? null,
 		nextPageError: null,
 		phoneMode: !1,
-		reelAutoAdvance: Mn(e.reelAutoAdvance),
+		reelAutoAdvance: Pn(e.reelAutoAdvance),
 		reelForward: {
 			error: null,
 			status: "idle"
 		},
 		reelForwardIndex: null,
 		reelForwardItem: null,
-		reelInfoSheet: Pn(e.reelInfoSheet),
+		reelInfoSheet: In(e.reelInfoSheet),
 		reelInfoSheetOverlay: !1,
 		reelMediaSource: "original",
 		reelOrigin: null,
@@ -3104,20 +3144,20 @@ function In(e, t) {
 }
 //#endregion
 //#region src/core/options.ts
-function Ln(e, t) {
+function zn(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 Rn(e, t) {
+function Bn(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 zn(e) {
-	if (on(e.autoScroll), Ln("cardHeader", e.cardHeader), Ln("cardFooter", e.cardFooter), Rn("header", e.mediaCard?.header), Rn("footer", e.mediaCard?.footer), Yt(e.autofill), _n(e.fill), jn(e.reelAutoAdvance), e.removalReconciliation) {
+function Vn(e) {
+	if (cn(e.autoScroll), zn("cardHeader", e.cardHeader), zn("cardFooter", e.cardFooter), Bn("header", e.mediaCard?.header), Bn("footer", e.mediaCard?.footer), Zt(e.autofill), yn(e.fill), ae(e.masonry), Nn(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.");
@@ -3131,7 +3171,7 @@ function zn(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 Bn(e) {
+function Hn(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);
@@ -3140,7 +3180,7 @@ function Bn(e) {
 }
 //#endregion
 //#region src/core/pageRequest.ts
-async function Vn({ append: e, autofillController: t, cursor: n, isCurrent: r, loadPage: i, onLastCursor: a, onPages: o, options: s, signal: c, state: l }) {
+async function Un({ 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", f = d ? {
 		received: l.autofill.received,
 		requests: l.autofill.requests
@@ -3152,11 +3192,11 @@ async function Vn({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 	let m = !1;
 	try {
 		if (u?.strategy === "frontend") {
-			let s = await en({
+			let s = await nn({
 				existingItems: e ? l.items : [],
 				initialCursor: n,
 				loadPage: i,
-				maximumRequests: f ? Math.max(0, Kt(u) - f.requests) : void 0,
+				maximumRequests: f ? Math.max(0, Jt(u) - f.requests) : void 0,
 				onCollection: (e) => t.captureCollection(e, r()),
 				onDelayChange: (e) => {
 					r() && Object.assign(l.autofill, e);
@@ -3179,7 +3219,7 @@ async function Vn({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 			}), o(s.pages), t.clearCollection();
 			return;
 		}
-		let s = It(await i({
+		let s = Rt(await i({
 			cursor: n,
 			signal: c
 		}));
@@ -3199,7 +3239,7 @@ async function Vn({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 				l.autofill.status = "complete";
 				return;
 			}
-			await ln(u, l, {
+			await dn(u, l, {
 				cycleId: p,
 				feedKey: u.feedKey,
 				items: h.slice(d.length),
@@ -3223,13 +3263,13 @@ async function Vn({ append: e, autofillController: t, cursor: n, isCurrent: r, l
 function $(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function Hn(e) {
+function Wn(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function Un(e) {
+function Gn(e) {
 	return e.map(({ postId: e }) => e);
 }
-var Wn = class {
+var Kn = class {
 	delay;
 	enabled;
 	maxReplayPages;
@@ -3271,14 +3311,14 @@ var Wn = class {
 	async reconcile({ existingItems: e, loadPage: t, shouldPause: n = () => !1, signal: r }) {
 		let i = this.pending ?? this.createSession(e);
 		for (this.pending = i; i.remainingRequests > 0;) {
-			let e = Hn(i.cursor);
+			let e = Wn(i.cursor);
 			if (i.seenCursors.has(e)) throw Error("Vibe removal reconciliation received a repeated cursor.");
-			if (await Wt({
-				delayMs: Ut(i.pages.length, this.delay),
+			if (await Kt({
+				delayMs: Gt(i.pages.length, this.delay),
 				onChange: () => void 0,
 				signal: r
 			}), i.pages.length > 0 && n()) return this.result(i, "paused");
-			let a = It(await t({
+			let a = Rt(await t({
 				cursor: i.cursor,
 				signal: r
 			}));
@@ -3291,7 +3331,7 @@ var Wn = class {
 				contributionIds: s,
 				cursor: i.cursor,
 				next: a.next,
-				returnedIds: Un(o)
+				returnedIds: Gn(o)
 			}), i.lastCursor = i.cursor, i.next = a.next, --i.remainingRequests, a.total !== void 0 && (i.total = a.total), i.next === null ? i.remainingRequests = 0 : i.cursor = i.next, i.remainingRequests > 0 && n()) return this.result(i, "paused");
 		}
 		return this.result(i, "complete");
@@ -3330,7 +3370,7 @@ var Wn = class {
 		return this.pages.findIndex(({ contributionIds: e }) => e.filter((e) => t.has($(e))).length < this.pageSize);
 	}
 	recordPage(e) {
-		let t = Hn(e.cursor), n = this.pages.findIndex(({ cursor: e }) => Hn(e) === t);
+		let t = Wn(e.cursor), n = this.pages.findIndex(({ cursor: e }) => Wn(e) === t);
 		n >= 0 && (this.pages = this.pages.slice(0, n)), this.pages.push({
 			...e,
 			contributionIds: [...e.contributionIds],
@@ -3340,7 +3380,7 @@ var Wn = class {
 };
 //#endregion
 //#region src/core/activeItemRemoval.ts
-function Gn(e, t, n, r, i) {
+function qn(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)];
@@ -3353,7 +3393,7 @@ function Gn(e, t, n, r, i) {
 }
 //#endregion
 //#region src/core/exactMediaRemovalController.ts
-function Kn(e, t) {
+function Jn(e, t) {
 	let [n, ...r] = t;
 	if (!n) throw Error("Vibe items must contain at least one media asset.");
 	return {
@@ -3362,10 +3402,10 @@ function Kn(e, t) {
 		items: r
 	};
 }
-function qn(e) {
+function Yn(e) {
 	if (!Number.isInteger(e.mediaIndex) || e.mediaIndex < 0) throw TypeError("Vibe mediaIndex must be a non-negative integer.");
 }
-var Jn = class {
+var Xn = class {
 	generation = 0;
 	metadata = /* @__PURE__ */ new WeakMap();
 	state;
@@ -3373,7 +3413,7 @@ var Jn = class {
 		this.options = e, this.state = e.state;
 	}
 	remove(e) {
-		qn(e);
+		Yn(e);
 		let t = this.state.items.findIndex(({ postId: t }) => t === e.postId), n = this.state.items[t];
 		if (!n) return null;
 		let r = [...M(n)], i = r[e.mediaIndex];
@@ -3390,7 +3430,7 @@ var Jn = 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] = Kn(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] = Jn(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;
@@ -3416,7 +3456,7 @@ var Jn = class {
 	}
 	restoreIntoPost(e, t) {
 		let n = this.state.items[e], r = [...M(n)], i = Math.min(t.mediaIndex, r.length);
-		if (r.splice(i, 0, t.media), this.state.items[e] = Kn(n, r), this.state.activeReelPostId !== t.postId) return;
+		if (r.splice(i, 0, t.media), this.state.items[e] = Jn(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);
 	}
@@ -3429,18 +3469,18 @@ var Jn = class {
 };
 //#endregion
 //#region src/core/itemPlacement.ts
-function Yn(e, t) {
+function Zn(e, t) {
 	let n = new Set(t);
 	return e.flatMap((e, t) => n.has(e.postId) ? [{
 		index: t,
 		item: e
 	}] : []);
 }
-function Xn(e, t) {
+function Qn(e, t) {
 	let n = new Set(t.map(({ item: e }) => e.postId));
 	return e.filter((e) => !n.has(e.postId));
 }
-function Zn(e, t) {
+function $n(e, t) {
 	t.forEach(({ index: e }) => {
 		if (!Number.isInteger(e) || e < 0) throw Error("Vibe item restore indexes must be non-negative integers.");
 	});
@@ -3451,7 +3491,7 @@ function Zn(e, t) {
 }
 //#endregion
 //#region src/core/itemRemovalController.ts
-var Qn = 20, $n = class {
+var er = 20, tr = class {
 	generation = 0;
 	historyLimit;
 	metadata = /* @__PURE__ */ new WeakMap();
@@ -3460,7 +3500,7 @@ var Qn = 20, $n = class {
 	itemOrder;
 	stopItemsWatcher;
 	constructor(e) {
-		this.options = e, this.historyLimit = e.historyLimit ?? Qn, 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 ?? er, 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();
@@ -3473,7 +3513,7 @@ var Qn = 20, $n = class {
 		let i = this.options.startRemoval(r);
 		if (i > 0 && await new Promise((e) => setTimeout(e, i)), this.metadata.get(n)?.generation !== this.generation) return n;
 		let a = this.state.items.findIndex((e) => e.postId === this.state.activeReelPostId), o = new Set(t.map(({ item: e }) => e.postId)), s = a < 0 ? 0 : this.state.items.slice(0, a).filter(({ postId: e }) => o.has(e)).length, c = Math.max(a - s, 0);
-		return this.state.items = Xn(this.state.items, t), this.options.onItemsRemoved(n, t, c), this.record(n), n;
+		return this.state.items = Qn(this.state.items, t), this.options.onItemsRemoved(n, t, c), this.record(n), n;
 	}
 	reset() {
 		this.generation += 1, this.history = [], this.itemOrder = [];
@@ -3484,7 +3524,7 @@ var Qn = 20, $n = class {
 			this.restoreRemoval(t);
 			return;
 		}
-		let n = Zn(this.state.items, e);
+		let n = $n(this.state.items, e);
 		this.registerExternalPlacements(e), this.state.items = n;
 	}
 	restoreRemoval(e) {
@@ -3510,7 +3550,7 @@ var Qn = 20, $n = class {
 	}
 	collectOrderedPlacements(e) {
 		let t = new Map(this.itemOrder.map((e, t) => [e, t]));
-		return Yn(this.state.items, e).map((e) => ({
+		return Zn(this.state.items, e).map((e) => ({
 			index: t.get(e.item.postId) ?? e.index,
 			item: e.item
 		}));
@@ -3541,7 +3581,7 @@ var Qn = 20, $n = 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;
 	}
-}, er = class {
+}, nr = class {
 	forward = null;
 	forwardPromise = null;
 	forwardVersion = 0;
@@ -3619,7 +3659,7 @@ var Qn = 20, $n = class {
 			}
 		}
 	}
-}, tr = class {
+}, rr = class {
 	generation = 0;
 	pending = Promise.resolve();
 	constructor(e) {
@@ -3669,24 +3709,24 @@ var Qn = 20, $n = class {
 };
 //#endregion
 //#region src/core/removalControllers.ts
-function nr(e) {
-	let t = new er(e), n = new tr({
+function ir(e) {
+	let t = new nr(e), n = new rr({
 		state: e.state,
 		transitionMedia: (t) => e.surface()?.transitionActiveReelMedia(t) ?? Promise.resolve(!1),
 		transitionPost: (t) => e.surface()?.transitionActiveReelPost(t) ?? Promise.resolve(!1)
 	});
 	return {
-		exactMediaRemoval: new Jn({
+		exactMediaRemoval: new Xn({
 			onActivate: e.onActivate,
 			onPostRemoved: (t) => e.onItemsRemoved([t]),
 			onPostRestored: (t) => e.onItemsRestored([t]),
 			reelForward: t,
 			state: e.state
 		}),
-		itemRemoval: new $n({
+		itemRemoval: new tr({
 			historyLimit: e.historyLimit,
 			onItemsRemoved: (n, r, i) => {
-				e.onItemsRemoved(r.map(({ item: e }) => e.postId)), Gn(e.state, r, i, e.onActivate, (e, r) => t.start(n, e, r));
+				e.onItemsRemoved(r.map(({ item: e }) => e.postId)), qn(e.state, r, i, e.onActivate, (e, r) => t.start(n, e, r));
 			},
 			onRemovalRestored: (n) => {
 				e.onItemsRestored(n.map(({ item: e }) => e.postId));
@@ -3701,17 +3741,17 @@ function nr(e) {
 		reelRemoval: n
 	};
 }
-var rr = 1.5;
-function ir(e) {
+var ar = 1.5;
+function or(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 * rr;
+	let n = Math.min(e.viewportWidth, e.viewportHeight), r = t >= n * ar;
 	return !e.hasHover && n > 0 && n < 600 && r;
 }
-function ar(e) {
-	return ir(e) ? "reel" : "masonry";
+function sr(e) {
+	return or(e) ? "reel" : "masonry";
 }
-function or(e) {
+function cr(e) {
 	let t = e.ownerDocument.defaultView, n = e.ownerDocument.documentElement;
 	return {
 		hasHover: typeof t?.matchMedia == "function" && t.matchMedia("(hover: hover)").matches,
@@ -3721,15 +3761,15 @@ function or(e) {
 		viewportWidth: n.clientWidth
 	};
 }
-function sr(e) {
-	return ir(or(e));
+function lr(e) {
+	return or(cr(e));
 }
-function cr(e) {
-	return ar(or(e));
+function ur(e) {
+	return sr(cr(e));
 }
 //#endregion
 //#region src/core/responsiveLayoutController.ts
-var lr = class {
+var dr = class {
 	layoutMode;
 	resizeObserver = null;
 	target = null;
@@ -3754,10 +3794,10 @@ var lr = class {
 	}
 	handleResponsiveLayout = () => {
 		if (!this.target) return;
-		let e = cr(this.target);
-		this.state.phoneMode = sr(this.target), this.state.reelInfoSheetOverlay = this.state.phoneMode, this.state.reelMediaSource = e === "reel" ? "preview" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
+		let e = ur(this.target);
+		this.state.phoneMode = lr(this.target), this.state.reelInfoSheetOverlay = this.state.phoneMode, this.state.reelMediaSource = e === "reel" ? "preview" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
 	};
-}, ur = class {
+}, fr = class {
 	routedReelPostId = null;
 	reelRouteIsActive = !1;
 	constructor(e, t) {
@@ -3784,7 +3824,7 @@ var lr = class {
 		let i = this.reelRouteIsActive ? "replace" : "push";
 		this.reelRouteIsActive = !0, this.routedReelPostId = e, this.options.router[i](r);
 	}
-}, dr = class {
+}, pr = class {
 	app = null;
 	autoScroll;
 	autofillController;
@@ -3802,14 +3842,15 @@ var lr = class {
 	surface = null;
 	stopStateWatcher = null;
 	lastLoadedCursor = null;
+	notificationItems;
 	state;
 	constructor(e) {
-		this.options = e, zn(e);
+		this.options = e, Vn(e);
 		let t = e.layout ?? "masonry";
-		this.state = x(In(e, t)), this.autoScroll = new cn({
+		this.state = x(Rn(e, t)), this.notificationItems = I(this.state), this.autoScroll = new un({
 			getScrollElement: () => this.surface?.getAutoScrollElement() ?? null,
 			state: this.state.autoScroll
-		}), this.autofillController = new tn({
+		}), this.autofillController = new rn({
 			cancelRequest: () => this.cancelRequest(),
 			onLastCursor: (e) => {
 				this.lastLoadedCursor = e;
@@ -3817,7 +3858,7 @@ var lr = class {
 			onPages: (e) => this.removalReconciliation.recordPages(e),
 			options: e.autofill,
 			state: this.state
-		}), this.removalReconciliation = new Wn(e), this.fillController = new On({
+		}), this.removalReconciliation = new Kn(e), this.fillController = new An({
 			fill: e.fill,
 			loadPage: e.loadPage ? (e) => this.loadFilteredPage(e) : void 0,
 			onLastCursor: (e) => {
@@ -3825,8 +3866,8 @@ var lr = class {
 			},
 			onPages: (e) => this.removalReconciliation.recordPages(e),
 			state: this.state
-		}), this.routing = new ur(e.routing, this.state);
-		let n = nr({
+		}), this.routing = new fr(e.routing, this.state);
+		let n = ir({
 			historyLimit: e.removalHistoryLimit,
 			loadNext: () => this.loadNext(),
 			onActivate: (e) => this.setActiveReelPost(e),
@@ -3836,21 +3877,22 @@ var lr = 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 lr(t, this.state, () => {
+		this.exactMediaRemoval = n.exactMediaRemoval, this.itemRemoval = n.itemRemoval, this.reelForward = n.reelForward, this.reelRemoval = n.reelRemoval, this.responsiveLayout = new dr(t, this.state, () => {
 			this.routing.syncFeed();
 		}), this.startStateNotifications();
 	}
 	async mount() {
 		if (this.app) throw Error("Vibe is already mounted.");
 		this.startStateNotifications();
-		let e = Bn(this.options.target);
-		this.responsiveLayout.mount(e), this.app = i(Ft, {
+		let e = Hn(this.options.target);
+		this.responsiveLayout.mount(e), this.app = i(Lt, {
 			canRetryEnd: !!this.options.loadPage,
 			cardFooter: this.options.cardFooter,
 			cardHeader: this.options.cardHeader,
 			feedFooter: this.options.feedFooter,
-			feedFooterActions: kn(this),
+			feedFooterActions: jn(this),
 			mediaCard: this.options.mediaCard,
+			masonry: this.options.masonry,
 			onMediaReady: this.options.onMediaReady,
 			onMediaVisible: this.options.onMediaVisible,
 			onReelMediaChange: this.options.onReelMediaChange,
@@ -3877,7 +3919,7 @@ var lr = class {
 		this.autoScroll.destroy(), this.fillController.destroy(), this.cancelRequest(), this.reelForward.reset(), this.reelRemoval.reset(), this.exactMediaRemoval.reset(), this.itemRemoval.destroy(), this.removalReconciliation.reset(), this.responsiveLayout.destroy(), this.stopStateWatcher?.(), this.stopStateWatcher = null, this.app?.unmount(), this.app = null, this.surface = null;
 	}
 	getState() {
-		return I(this.state);
+		return L(this.state);
 	}
 	removeMedia(e) {
 		return this.exactMediaRemoval.remove(e);
@@ -3931,7 +3973,7 @@ var lr = class {
 		this.autoScroll.setSpeed(e);
 	}
 	applyAutofillUpdate(e) {
-		let t = dn(this.options.autofill, this.state, e);
+		let t = pn(this.options.autofill, this.state, e);
 		return t && this.autofillController.syncCountdown(), t;
 	}
 	cancelAutofill() {
@@ -3942,7 +3984,7 @@ var lr = class {
 			await this.cancelFill();
 			return;
 		}
-		if (Zt(this.state.autofill)) {
+		if ($t(this.state.autofill)) {
 			await this.cancelAutofill();
 			return;
 		}
@@ -3956,12 +3998,12 @@ var lr = class {
 	}
 	async fill(e) {
 		if (!this.state.loadMoreLocked) {
-			if (this.pendingRequest || Zt(this.state.autofill)) throw Error("Vibe cannot fill while another page operation is active.");
+			if (this.pendingRequest || $t(this.state.autofill)) throw Error("Vibe cannot fill while another page operation is active.");
 			await this.fillController.start(e);
 		}
 	}
 	restoreAutofillSession(e) {
-		let t = fn(this.options.autofill, this.state, e);
+		let t = mn(this.options.autofill, this.state, e);
 		return t && this.autofillController.syncCountdown(), t;
 	}
 	restoreFillSession(e) {
@@ -3969,7 +4011,7 @@ var lr = class {
 	}
 	async loadNext() {
 		if (this.pendingRequest) return this.pendingRequest;
-		if (this.state.loadMoreLocked || Zt(this.state.autofill) || this.fillController.isActive() || !this.options.loadPage || this.state.next === null && !this.removalReconciliation.needsReconciliation(this.state.items)) return;
+		if (this.state.loadMoreLocked || $t(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 e = this.loadNextSequence();
 		return this.pendingRequest = e, e.finally(() => {
@@ -3984,12 +4026,12 @@ var lr = class {
 	}
 	async replaceFeed(e, t) {
 		if (!this.options.loadPage) throw Error(`Vibe cannot ${t} without loadPage.`);
-		return Zt(this.state.autofill) && await this.cancelAutofill(), this.fillController.isActive() && await this.cancelFill(), this.cancelRequest(), this.state.autofill = Xt(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.isLoading = !0, this.state.items = [], this.state.next = null, this.state.nextPageError = null, this.state.total = null, this.startRequest(e, !1);
+		return $t(this.state.autofill) && await this.cancelAutofill(), this.fillController.isActive() && await this.cancelFill(), this.cancelRequest(), this.state.autofill = Qt(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.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 = It(await t(e));
+		let n = Rt(await t(e));
 		return {
 			...n,
 			items: this.removalReconciliation.filterItems(n.items)
@@ -4019,7 +4061,7 @@ var lr = class {
 	}
 	async retryEnd() {
 		if (this.pendingRequest) return this.pendingRequest;
-		if (!this.state.loadMoreLocked && !(Zt(this.state.autofill) || this.fillController.isActive()) && !(this.state.next !== null || !this.options.loadPage)) return this.state.isLoadingMore = !0, this.state.nextPageError = null, this.startRequest(this.lastLoadedCursor, !0);
+		if (!this.state.loadMoreLocked && !($t(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());
@@ -4047,10 +4089,10 @@ var lr = class {
 		this.state.total = e;
 	}
 	setReelAutoAdvance(e) {
-		Nn(this.state.reelAutoAdvance, e);
+		Fn(this.state.reelAutoAdvance, e);
 	}
 	setReelInfoSheet(e) {
-		Fn(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
+		Ln(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
 	}
 	setLayout(e) {
 		this.responsiveLayout.setLayout(e);
@@ -4070,7 +4112,7 @@ var lr = class {
 	async fetchPage(e, t) {
 		if (!this.options.loadPage) return;
 		let n = ++this.requestVersion, r = new AbortController();
-		this.abortController = r, await Vn({
+		this.abortController = r, await Un({
 			append: t,
 			autofillController: this.autofillController,
 			cursor: e,
@@ -4094,7 +4136,7 @@ var lr = class {
 	startInitialAutofill() {
 		let e = ++this.requestVersion, t = new AbortController(), n = this.autofillController.beginCycle();
 		this.abortController = t, this.state.isLoadingMore = !0;
-		let r = pn({
+		let r = hn({
 			cycleId: n,
 			isCurrent: () => e === this.requestVersion,
 			onCollection: (t) => this.autofillController.captureCollection(t, e === this.requestVersion),
@@ -4114,14 +4156,14 @@ var lr = class {
 	}
 	startStateNotifications() {
 		let e = this.options.onStateChange;
-		!e || this.stopStateWatcher || (e(this.getState()), this.stopStateWatcher = O(this.state, () => e(this.getState()), {
+		!e || this.stopStateWatcher || (e(L(this.state, this.notificationItems.value)), this.stopStateWatcher = O(this.state, () => e(L(this.state, this.notificationItems.value)), {
 			deep: !0,
 			flush: "post"
 		}));
 	}
 };
-function fr(e) {
-	return new dr(e);
+function mr(e) {
+	return new pr(e);
 }
 //#endregion
-export { fr as createVibe };
+export { mr as createVibe };