@wyxos/vibe 4.0.1 → 4.2.0

package/lib/index.js

@@ -1,44 +1,210 @@
-import { Fragment as e, Transition as t, computed as n, createApp as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, h as d, nextTick as f, normalizeClass as p, normalizeProps as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, openBlock as v, reactive as y, renderList as b, resolveDynamicComponent as x, shallowRef as S, toDisplayString as C, unref as w, useId as T, watch as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
+import { Fragment as e, Transition as t, computed as n, createApp as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, h as f, nextTick as p, normalizeClass as m, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as v, openBlock as y, reactive as b, renderList as x, resolveDynamicComponent as S, shallowRef as C, toDisplayString as w, unref as T, useId as E, watch as D, withCtx as O, withKeys as k, withModifiers as A } from "vue";
 //#region src/core/mediaAsset.ts
-function A(e) {
+function j(e) {
 	return [e, ...e.items];
 }
-function j(e, t) {
-	return Math.min(e.items.length, Math.max(0, t));
-}
 function M(e, t) {
-	return A(e)[j(e, t)] ?? e;
+	return Math.min(e.items.length, Math.max(0, t));
 }
 function N(e, t) {
+	return j(e)[M(e, t)] ?? e;
+}
+function P(e, t) {
 	return `${String(e)}:${t}`;
 }
-function P(e) {
+//#endregion
+//#region src/core/runtime.ts
+function F(e) {
+	return {
+		activeReelPostId: e.activeReelPostId,
+		autoScroll: { ...e.autoScroll },
+		autofill: { ...e.autofill },
+		error: e.error,
+		fill: {
+			...e.fill,
+			target: e.fill.target ? { ...e.fill.target } : null
+		},
+		infiniteScroll: e.infiniteScroll,
+		isLoading: e.isLoading,
+		isLoadingMore: e.isLoadingMore,
+		items: [...e.items],
+		layout: e.layout,
+		lifecycle: e.isLoading || e.isLoadingMore ? "loading" : e.error || e.nextPageError ? "error" : "loaded",
+		loadMoreLocked: e.loadMoreLocked,
+		next: e.next,
+		nextPageError: e.nextPageError,
+		reelAutoAdvance: { ...e.reelAutoAdvance },
+		reelInfoSheet: { ...e.reelInfoSheet },
+		reelOrigin: e.reelOrigin,
+		total: e.total
+	};
+}
+//#endregion
+//#region src/components/GalleryFooter.vue?vue&type=script&setup=true&lang.ts
+var I = {
+	key: 0,
+	class: "gallery-footer"
+}, L = {
+	key: 0,
+	class: "load-more-status",
+	role: "status"
+}, R = ["disabled"], z = {
+	key: 2,
+	class: "gallery-sentinel",
+	"aria-hidden": "true"
+}, B = {
+	key: 3,
+	class: "end-feed"
+}, V = ["disabled"], H = /* @__PURE__ */ u({
+	__name: "GalleryFooter",
+	props: {
+		canRetryEnd: { type: Boolean },
+		hasError: { type: Boolean },
+		hasNext: { type: Boolean },
+		infiniteScroll: { type: Boolean },
+		isLoading: { type: Boolean },
+		loadMoreLocked: { type: Boolean }
+	},
+	emits: ["loadMore", "retryEnd"],
+	setup(e, { emit: t }) {
+		let n = e, r = t;
+		function i() {
+			n.loadMoreLocked || (n.hasNext ? r("loadMore") : r("retryEnd"));
+		}
+		return (t, n) => e.hasNext || e.isLoading || e.hasError || e.canRetryEnd ? (y(), o("footer", I, [e.isLoading ? (y(), o("p", L, " Loading more… ")) : e.hasError || e.hasNext && (!e.infiniteScroll || e.loadMoreLocked) ? (y(), o("button", {
+			key: 1,
+			"data-test": "load-more",
+			class: "load-more-button",
+			type: "button",
+			disabled: e.loadMoreLocked,
+			onClick: i
+		}, w(e.hasError ? "Try again" : e.loadMoreLocked ? "Loading paused" : "Load more"), 9, R)) : e.hasNext ? (y(), o("span", z)) : (y(), o("div", B, [n[1] ||= s("p", {
+			class: "end-feed-message",
+			role: "status"
+		}, " You've reached the end. ", -1), s("button", {
+			"data-test": "retry-end",
+			class: "load-more-button",
+			type: "button",
+			disabled: e.loadMoreLocked,
+			onClick: n[0] ||= (e) => t.$emit("retryEnd")
+		}, " Check for more ", 8, V)]))])) : a("", !0);
+	}
+}), U = /* @__PURE__ */ u({
+	__name: "FeedFooter",
+	props: {
+		actions: {},
+		canRetryEnd: { type: Boolean },
+		feedFooter: {},
+		hasError: { type: Boolean },
+		hasNext: { type: Boolean },
+		infiniteScroll: { type: Boolean },
+		isLoading: { type: Boolean },
+		loadMoreLocked: { type: Boolean },
+		state: {}
+	},
+	emits: ["loadMore", "retryEnd"],
+	setup(e, { emit: t }) {
+		let n = e, r = t;
+		function a() {
+			n.actions?.cancelAutofill();
+		}
+		function o() {
+			n.actions?.retry();
+		}
+		return (t, n) => e.feedFooter && e.actions && e.state ? (y(), i(S(e.feedFooter.component), {
+			key: 0,
+			actions: e.actions,
+			state: e.state,
+			onAutofillCancel: a,
+			onLoadMore: n[0] ||= (e) => r("loadMore"),
+			onRetry: o,
+			onRetryEnd: n[1] ||= (e) => r("retryEnd")
+		}, null, 40, ["actions", "state"])) : (y(), i(H, {
+			key: 1,
+			"can-retry-end": e.canRetryEnd,
+			"has-error": e.hasError,
+			"has-next": e.hasNext,
+			"infinite-scroll": e.infiniteScroll,
+			"is-loading": e.isLoading,
+			"load-more-locked": e.loadMoreLocked,
+			onLoadMore: n[2] ||= (e) => r("loadMore"),
+			onRetryEnd: n[3] ||= (e) => r("retryEnd")
+		}, null, 8, [
+			"can-retry-end",
+			"has-error",
+			"has-next",
+			"infinite-scroll",
+			"is-loading",
+			"load-more-locked"
+		]));
+	}
+}), W = ["role"], ee = { class: "gallery-status" }, G = /* @__PURE__ */ u({
+	__name: "FeedStatus",
+	props: {
+		actions: {},
+		canRetryEnd: { type: Boolean },
+		feedFooter: {},
+		state: {}
+	},
+	emits: ["loadMore", "retryEnd"],
+	setup(t, { emit: n }) {
+		let r = t, l = n;
+		return (n, u) => (y(), o("main", {
+			class: "gallery-shell",
+			role: r.state.error ? "alert" : r.state.isLoading ? "status" : void 0
+		}, [s("p", ee, [r.state.error ? (y(), o(e, { key: 0 }, [c(" Unable to load media. ")], 64)) : r.state.isLoading ? (y(), o(e, { key: 1 }, [c(" Loading media… ")], 64)) : (y(), o(e, { key: 2 }, [c(" No media found. ")], 64))]), t.feedFooter ? (y(), i(U, {
+			key: 0,
+			actions: t.actions,
+			"can-retry-end": t.canRetryEnd,
+			"feed-footer": t.feedFooter,
+			"has-error": !!t.state.nextPageError,
+			"has-next": t.state.next !== null,
+			"infinite-scroll": t.state.infiniteScroll,
+			"is-loading": t.state.isLoadingMore,
+			"load-more-locked": t.state.loadMoreLocked,
+			state: t.state,
+			onLoadMore: u[0] ||= (e) => l("loadMore"),
+			onRetryEnd: u[1] ||= (e) => l("retryEnd")
+		}, null, 8, [
+			"actions",
+			"can-retry-end",
+			"feed-footer",
+			"has-error",
+			"has-next",
+			"infinite-scroll",
+			"is-loading",
+			"load-more-locked",
+			"state"
+		])) : a("", !0)], 8, W));
+	}
+});
+function K(e) {
 	return e.scrollHeight - e.scrollTop - e.clientHeight <= 240;
 }
 //#endregion
 //#region src/core/masonry.ts
-function F(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 I(e) {
+function ne(e) {
 	return e.reduce((t, n, r) => n < e[t] ? r : t, 0);
 }
-function L(e) {
+function re(e) {
 	return Math.max(0, e.containerHeight) + Math.max(0, e.gap);
 }
-function R(e, t) {
+function q(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 z(e, t, n) {
+function J(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 = I(c), n = s * F(e) + i, a = {
+		let t = ne(c), n = s * te(e) + i, a = {
 			x: t * (s + r),
 			y: c[t],
 			width: s,
@@ -54,10 +220,10 @@ function z(e, t, n) {
 }
 //#endregion
 //#region src/core/scrollbar.ts
-function B(e, t, n) {
+function Y(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function V({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize: r, viewportSize: i }) {
+function ie({ 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,
@@ -66,23 +232,23 @@ function V({ contentSize: e, minimumThumbSize: t, scrollPosition: n, trackSize:
 		thumbSize: o,
 		thumbTravel: 0
 	};
-	let l = B(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
+	let l = Y(s / a * o, Math.min(Math.max(0, t), o), o), u = Math.max(0, o - l);
 	return {
 		maximumScrollPosition: c,
 		scrollable: !0,
-		thumbOffset: u * (B(n, 0, c) / c),
+		thumbOffset: u * (Y(n, 0, c) / c),
 		thumbSize: l,
 		thumbTravel: u
 	};
 }
 //#endregion
 //#region src/components/GalleryScrollbar.vue?vue&type=script&setup=true&lang.ts
-var H = ["aria-hidden"], U = [
+var ae = ["aria-hidden"], X = [
 	"aria-controls",
 	"aria-valuemax",
 	"aria-valuenow",
 	"tabindex"
-], W = 32, G = 40, K = 120, ee = /* @__PURE__ */ l({
+], Z = 32, oe = 40, se = 120, ce = /* @__PURE__ */ u({
 	__name: "GalleryScrollbar",
 	props: {
 		contentSize: {},
@@ -97,23 +263,23 @@ var H = ["aria-hidden"], U = [
 			thumbOffset: 0,
 			thumbSize: 0,
 			thumbTravel: 0
-		}, i = S(null), a = S(r), c = S(!1), l = S(!1), u = S(!1), d = null, m = 0, _ = 0, y = null, b = null, x = null, C = null, w = !1, T = null, D = n(() => a.value.scrollable && !t.suspended), O = n(() => ({
+		}, i = C(null), a = C(r), c = C(!1), l = C(!1), u = C(!1), d = null, f = 0, h = 0, v = null, b = null, x = null, S = null, w = !1, T = null, E = n(() => a.value.scrollable && !t.suspended), O = n(() => ({
 			height: `${a.value.thumbSize}px`,
 			transform: `translate3d(0, ${a.value.thumbOffset}px, 0)`
 		}));
 		function k() {
-			y !== null && clearTimeout(y), y = setTimeout(() => {
-				y = null, c.value || (l.value = !1);
-			}, K);
+			v !== null && clearTimeout(v), v = setTimeout(() => {
+				v = null, c.value || (l.value = !1);
+			}, se);
 		}
 		function A() {
 			l.value = !0, k();
 		}
 		function j() {
 			let e = t.scrollElement, n = i.value;
-			return !e || !n ? r : V({
+			return !e || !n ? r : ie({
 				contentSize: e.scrollHeight,
-				minimumThumbSize: W,
+				minimumThumbSize: Z,
 				scrollPosition: e.scrollTop,
 				trackSize: n.clientHeight,
 				viewportSize: e.clientHeight
@@ -146,7 +312,7 @@ var H = ["aria-hidden"], U = [
 			n && (n.scrollTop = Math.min(a.value.maximumScrollPosition, Math.max(0, e)), M("scroll"));
 		}
 		function F(e) {
-			if (!D.value || e.target !== e.currentTarget) return;
+			if (!E.value || e.target !== e.currentTarget) return;
 			let t = i.value;
 			if (!t || a.value.thumbTravel <= 0) return;
 			e.preventDefault(), A();
@@ -154,47 +320,47 @@ var H = ["aria-hidden"], U = [
 			P(Math.min(1, Math.max(0, n / a.value.thumbTravel)) * a.value.maximumScrollPosition);
 		}
 		function I(e) {
-			D.value && (e.preventDefault(), e.stopPropagation(), e.currentTarget.setPointerCapture?.(e.pointerId), d = e.pointerId, m = e.clientY, _ = t.scrollElement?.scrollTop ?? 0, c.value = !0, l.value = !0, y !== null && clearTimeout(y), y = null);
+			E.value && (e.preventDefault(), e.stopPropagation(), e.currentTarget.setPointerCapture?.(e.pointerId), d = e.pointerId, f = e.clientY, h = t.scrollElement?.scrollTop ?? 0, c.value = !0, l.value = !0, v !== null && clearTimeout(v), v = null);
 		}
 		function L(e) {
 			if (!c.value || e.pointerId !== d || (e.preventDefault(), a.value.thumbTravel <= 0)) return;
-			let t = (e.clientY - m) / a.value.thumbTravel * a.value.maximumScrollPosition;
-			P(_ + t);
+			let t = (e.clientY - f) / a.value.thumbTravel * a.value.maximumScrollPosition;
+			P(h + t);
 		}
 		function R(e) {
 			!c.value || e.pointerId !== d || (e.currentTarget.releasePointerCapture?.(e.pointerId), d = null, c.value = !1, w && (w = !1, M("content")), k());
 		}
 		function z(e) {
-			if (!D.value) return;
-			let n = t.scrollElement?.clientHeight ?? 0, r = t.scrollElement?.scrollTop ?? 0, i = e.key === "ArrowUp" ? r - G : e.key === "ArrowDown" ? r + G : e.key === "PageUp" ? r - n : e.key === "PageDown" ? r + n : e.key === "Home" ? 0 : e.key === "End" ? a.value.maximumScrollPosition : null;
+			if (!E.value) return;
+			let n = t.scrollElement?.clientHeight ?? 0, r = t.scrollElement?.scrollTop ?? 0, i = e.key === "ArrowUp" ? r - oe : e.key === "ArrowDown" ? r + oe : 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) {
-			if (C?.disconnect(), !(typeof ResizeObserver > "u")) {
-				C = new ResizeObserver(() => M("content"));
-				for (let t of e.children) C.observe(t);
+			if (S?.disconnect(), !(typeof ResizeObserver > "u")) {
+				S = new ResizeObserver(() => M("content"));
+				for (let t of e.children) S.observe(t);
 			}
 		}
-		return E(() => t.scrollElement, (e, t) => {
-			t?.removeEventListener("scroll", N), x?.disconnect(), x = null, C?.disconnect(), C = null, T?.disconnect(), T = null, e?.addEventListener("scroll", N, { passive: !0 }), e && typeof ResizeObserver < "u" && (T = new ResizeObserver(() => {
+		return D(() => t.scrollElement, (e, t) => {
+			t?.removeEventListener("scroll", N), x?.disconnect(), x = null, S?.disconnect(), S = null, T?.disconnect(), T = null, e?.addEventListener("scroll", N, { passive: !0 }), e && typeof ResizeObserver < "u" && (T = new ResizeObserver(() => {
 				A(), M("resize");
 			}), T.observe(e), B(e)), e && typeof MutationObserver < "u" && (x = new MutationObserver(() => {
 				B(e), M("content");
-			}), x.observe(e, { childList: !0 })), f(() => M("resize"));
-		}, { immediate: !0 }), E(() => t.contentSize, () => {
-			f(() => M("content"));
-		}), g(() => {
-			t.scrollElement?.removeEventListener("scroll", N), x?.disconnect(), C?.disconnect(), T?.disconnect(), y !== null && clearTimeout(y), b !== null && cancelAnimationFrame(b);
-		}), (t, n) => (v(), o("div", {
+			}), x.observe(e, { childList: !0 })), p(() => M("resize"));
+		}, { immediate: !0 }), D(() => t.contentSize, () => {
+			p(() => M("content"));
+		}), _(() => {
+			t.scrollElement?.removeEventListener("scroll", N), x?.disconnect(), S?.disconnect(), T?.disconnect(), v !== null && clearTimeout(v), b !== null && cancelAnimationFrame(b);
+		}), (t, n) => (y(), o("div", {
 			ref_key: "trackElement",
 			ref: i,
-			class: p(["gallery-scrollbar", {
+			class: m(["gallery-scrollbar", {
 				"gallery-scrollbar--dragging": c.value,
 				"gallery-scrollbar--interacting": l.value,
 				"gallery-scrollbar--ready": u.value,
-				"gallery-scrollbar--visible": D.value
+				"gallery-scrollbar--visible": E.value
 			}]),
-			"aria-hidden": !D.value || void 0,
+			"aria-hidden": !E.value || void 0,
 			onPointerdown: F
 		}, [s("div", {
 			class: "gallery-scrollbar-thumb",
@@ -205,70 +371,22 @@ var H = ["aria-hidden"], U = [
 			"aria-valuemin": "0",
 			"aria-valuenow": Math.round(e.scrollElement?.scrollTop ?? 0),
 			role: "scrollbar",
-			style: h(O.value),
-			tabindex: D.value ? 0 : -1,
+			style: g(O.value),
+			tabindex: E.value ? 0 : -1,
 			onKeydown: z,
 			onPointercancel: R,
 			onPointerdown: I,
 			onPointermove: L,
 			onPointerup: R
-		}, null, 44, U)], 42, H));
-	}
-}), q = {
-	key: 0,
-	class: "gallery-footer"
-}, J = {
-	key: 0,
-	class: "load-more-status",
-	role: "status"
-}, Y = ["disabled"], te = {
-	key: 2,
-	class: "gallery-sentinel",
-	"aria-hidden": "true"
-}, ne = {
-	key: 3,
-	class: "end-feed"
-}, re = ["disabled"], ie = /* @__PURE__ */ l({
-	__name: "GalleryFooter",
-	props: {
-		canRetryEnd: { type: Boolean },
-		hasError: { type: Boolean },
-		hasNext: { type: Boolean },
-		infiniteScroll: { type: Boolean },
-		isLoading: { type: Boolean },
-		loadMoreLocked: { type: Boolean }
-	},
-	emits: ["loadMore", "retryEnd"],
-	setup(e, { emit: t }) {
-		let n = e, r = t;
-		function i() {
-			n.loadMoreLocked || (n.hasNext ? r("loadMore") : r("retryEnd"));
-		}
-		return (t, n) => e.hasNext || e.isLoading || e.hasError || e.canRetryEnd ? (v(), o("footer", q, [e.isLoading ? (v(), o("p", J, " Loading more… ")) : e.hasError || e.hasNext && (!e.infiniteScroll || e.loadMoreLocked) ? (v(), o("button", {
-			key: 1,
-			"data-test": "load-more",
-			class: "load-more-button",
-			type: "button",
-			disabled: e.loadMoreLocked,
-			onClick: i
-		}, C(e.hasError ? "Try again" : e.loadMoreLocked ? "Loading paused" : "Load more"), 9, Y)) : e.hasNext ? (v(), o("span", te)) : (v(), o("div", ne, [n[1] ||= s("p", {
-			class: "end-feed-message",
-			role: "status"
-		}, " You've reached the end. ", -1), s("button", {
-			"data-test": "retry-end",
-			class: "load-more-button",
-			type: "button",
-			disabled: e.loadMoreLocked,
-			onClick: n[0] ||= (e) => t.$emit("retryEnd")
-		}, " Check for more ", 8, re)]))])) : a("", !0);
+		}, null, 44, X)], 42, ae));
 	}
-}), ae = (e) => {
+}), le = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
 	return !1;
-}, X = (e) => e === "", Z = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), oe = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), se = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), ce = (e) => {
-	let t = se(e);
+}, ue = (e) => e === "", de = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), fe = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), pe = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), me = (e) => {
+	let t = pe(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
-}, le = {
+}, he = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -278,27 +396,27 @@ var H = ["aria-hidden"], U = [
 	"stroke-width": 2,
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, ue = ({ name: e, iconNode: t, absoluteStrokeWidth: n, "absolute-stroke-width": r, strokeWidth: i, "stroke-width": a, size: o = le.width, color: s = le.stroke, ...c }, { slots: l }) => d("svg", {
-	...le,
+}, ge = ({ name: e, iconNode: t, absoluteStrokeWidth: n, "absolute-stroke-width": r, strokeWidth: i, "stroke-width": a, size: o = he.width, color: s = he.stroke, ...c }, { slots: l }) => f("svg", {
+	...he,
 	...c,
 	width: o,
 	height: o,
 	stroke: s,
-	"stroke-width": X(n) || X(r) || n === !0 || r === !0 ? Number(i || a || le["stroke-width"]) * 24 / Number(o) : i || a || le["stroke-width"],
-	class: Z("lucide", c.class, ...e ? [`lucide-${oe(ce(e))}-icon`, `lucide-${oe(e)}`] : ["lucide-icon"]),
-	...!l.default && !ae(c) && { "aria-hidden": "true" }
-}, [...t.map((e) => d(...e)), ...l.default ? [l.default()] : []]), de = (e, t) => (n, { slots: r, attrs: i }) => d(ue, {
+	"stroke-width": ue(n) || ue(r) || n === !0 || r === !0 ? Number(i || a || he["stroke-width"]) * 24 / Number(o) : i || a || he["stroke-width"],
+	class: de("lucide", c.class, ...e ? [`lucide-${fe(me(e))}-icon`, `lucide-${fe(e)}`] : ["lucide-icon"]),
+	...!l.default && !le(c) && { "aria-hidden": "true" }
+}, [...t.map((e) => f(...e)), ...l.default ? [l.default()] : []]), _e = (e, t) => (n, { slots: r, attrs: i }) => f(ge, {
 	...i,
 	...n,
 	iconNode: t,
 	name: e
-}, r), fe = de("chevron-left", [["path", {
+}, r), ve = _e("chevron-left", [["path", {
 	d: "m15 18-6-6 6-6",
 	key: "1wnfg3"
-}]]), pe = de("chevron-right", [["path", {
+}]]), ye = _e("chevron-right", [["path", {
 	d: "m9 18 6-6-6-6",
 	key: "mthhwq"
-}]]), me = de("pause", [["rect", {
+}]]), be = _e("pause", [["rect", {
 	x: "14",
 	y: "3",
 	width: "5",
@@ -312,10 +430,10 @@ var H = ["aria-hidden"], U = [
 	height: "18",
 	rx: "1",
 	key: "1wsw3u"
-}]]), he = de("play", [["path", {
+}]]), xe = _e("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"
-}]]), ge = de("volume-2", [
+}]]), Se = _e("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"
@@ -328,7 +446,7 @@ var H = ["aria-hidden"], U = [
 		d: "M19.364 18.364a9 9 0 0 0 0-12.728",
 		key: "ijwkga"
 	}]
-]), _e = de("volume-x", [
+]), Ce = _e("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"
@@ -347,32 +465,32 @@ var H = ["aria-hidden"], U = [
 		y2: "15",
 		key: "5ykzw1"
 	}]
-]), ve = {
+]), we = {
 	401: "Authentication required",
 	403: "Access forbidden",
 	404: "Preview not found",
 	419: "Session expired",
 	500: "Server error"
 };
-function ye(e) {
+function Te(e) {
 	return e.match(/\/demo-errors\/(401|403|404|419|500)\//)?.[1] ?? "Error";
 }
-function be(e) {
-	return ve[ye(e)] ?? "Preview unavailable";
+function Ee(e) {
+	return we[Te(e)] ?? "Preview unavailable";
 }
 //#endregion
 //#region src/core/mediaType.ts
-var xe = /\.(aac|flac|m4a|mp3|mp4|mov|ogg|opus|wav|webm)$/i;
-function Se(e) {
+var De = /\.(aac|flac|m4a|mp3|mp4|mov|ogg|opus|wav|webm)$/i;
+function Oe(e) {
 	try {
-		return xe.test(new URL(e).pathname);
+		return De.test(new URL(e).pathname);
 	} catch {
-		return xe.test(e.split("?")[0] ?? e);
+		return De.test(e.split("?")[0] ?? e);
 	}
 }
 //#endregion
 //#region src/components/CardRegion.vue
-var Ce = /* @__PURE__ */ l({
+var ke = /* @__PURE__ */ u({
 	__name: "CardRegion",
 	props: {
 		index: {},
@@ -386,13 +504,13 @@ var Ce = /* @__PURE__ */ l({
 		total: {}
 	},
 	setup(e) {
-		let t = e, r = n(() => j(t.item, t.mediaIndex)), a = n(() => A(t.item)), s = n(() => M(t.item, r.value));
-		return (t, n) => (v(), o("div", {
-			class: p(["media-card-region", `media-card-${e.placement}`]),
-			style: h({ height: `${e.region.height}px` }),
-			onClick: n[0] ||= k(() => {}, ["stop"]),
-			onKeydown: n[1] ||= k(() => {}, ["stop"])
-		}, [(v(), i(x(e.region.component), {
+		let t = e, r = n(() => M(t.item, t.mediaIndex)), a = n(() => j(t.item)), s = n(() => N(t.item, r.value));
+		return (t, n) => (y(), o("div", {
+			class: m(["media-card-region", [`media-card-${e.placement}`, { "media-card-region--transparent": e.region.background === "transparent" }]]),
+			style: g({ height: `${e.region.height}px` }),
+			onClick: n[0] ||= A(() => {}, ["stop"]),
+			onKeydown: n[1] ||= A(() => {}, ["stop"])
+		}, [(y(), i(S(e.region.component), {
 			index: e.index,
 			item: e.item,
 			layout: e.layout,
@@ -414,18 +532,18 @@ var Ce = /* @__PURE__ */ l({
 			"total"
 		]))], 38));
 	}
-}), we = [
+}), Ae = [
 	"max",
 	"value",
 	"aria-valuetext",
 	"disabled"
-], Te = {
+], je = {
 	key: 0,
 	class: "media-controls-row"
-}, Ee = ["aria-label", "title"], De = { class: "media-controls-audio" }, Oe = ["aria-label", "title"], ke = ["value", "aria-valuetext"], Ae = {
+}, Me = ["aria-label", "title"], Ne = { class: "media-controls-audio" }, Pe = ["aria-label", "title"], Fe = ["value", "aria-valuetext"], Ie = {
 	class: "media-control-time",
 	"aria-live": "off"
-}, je = /* @__PURE__ */ l({
+}, Le = /* @__PURE__ */ u({
 	__name: "MediaControls",
 	props: {
 		currentTime: {},
@@ -453,93 +571,93 @@ var Ce = /* @__PURE__ */ l({
 		function d(e) {
 			return Number(e.target.value);
 		}
-		let f = n(() => Math.max(0, r.duration)), m = n(() => l(r.currentTime, f.value)), g = n(() => ({ "--media-range-progress": `${f.value > 0 ? m.value / f.value * 100 : 0}%` })), _ = n(() => ({ "--media-range-progress": `${l(r.volume) * 100}%` }));
-		return (t, n) => (v(), o("div", {
-			class: p(["media-controls", `media-controls--${e.layout}`]),
+		let f = n(() => Math.max(0, r.duration)), p = n(() => l(r.currentTime, f.value)), h = n(() => ({ "--media-range-progress": `${f.value > 0 ? p.value / f.value * 100 : 0}%` })), _ = n(() => ({ "--media-range-progress": `${l(r.volume) * 100}%` }));
+		return (t, n) => (y(), o("div", {
+			class: m(["media-controls", `media-controls--${e.layout}`]),
 			"aria-label": "Video controls",
-			onClick: n[4] ||= k(() => {}, ["stop"]),
-			onDblclick: n[5] ||= k(() => {}, ["stop"]),
-			onKeydown: n[6] ||= k(() => {}, ["stop"]),
-			onWheel: n[7] ||= k(() => {}, ["stop"])
+			onClick: n[4] ||= A(() => {}, ["stop"]),
+			onDblclick: n[5] ||= A(() => {}, ["stop"]),
+			onKeydown: n[6] ||= A(() => {}, ["stop"]),
+			onWheel: n[7] ||= A(() => {}, ["stop"])
 		}, [s("input", {
 			class: "media-control-range media-control-seek",
 			type: "range",
 			min: "0",
 			max: f.value || 0,
 			step: "0.1",
-			value: m.value,
-			style: h(g.value),
+			value: p.value,
+			style: g(h.value),
 			"aria-label": "Seek video",
-			"aria-valuetext": `${u(m.value)} of ${u(f.value)}`,
+			"aria-valuetext": `${u(p.value)} of ${u(f.value)}`,
 			disabled: f.value <= 0,
 			onInput: n[0] ||= (e) => c("seek", d(e))
-		}, null, 44, we), e.layout === "reel" ? (v(), o("div", Te, [
+		}, null, 44, Ae), e.layout === "reel" ? (y(), o("div", je, [
 			s("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) => c("togglePlayback")
-			}, [e.playing ? (v(), i(w(me), {
+			}, [e.playing ? (y(), i(T(be), {
 				key: 0,
 				size: 18,
 				fill: "currentColor"
-			})) : (v(), i(w(he), {
+			})) : (y(), i(T(xe), {
 				key: 1,
 				size: 18,
 				fill: "currentColor"
-			}))], 8, Ee),
-			s("div", De, [s("button", {
+			}))], 8, Me),
+			s("div", Ne, [s("button", {
 				type: "button",
 				class: "media-control-button",
 				"aria-label": e.muted ? "Unmute video" : "Mute video",
 				title: e.muted ? "Unmute" : "Mute",
 				onClick: n[2] ||= (e) => c("toggleMute")
-			}, [e.muted || e.volume === 0 ? (v(), i(w(_e), {
+			}, [e.muted || e.volume === 0 ? (y(), i(T(Ce), {
 				key: 0,
 				size: 18
-			})) : (v(), i(w(ge), {
+			})) : (y(), i(T(Se), {
 				key: 1,
 				size: 18
-			}))], 8, Oe), s("input", {
+			}))], 8, Pe), s("input", {
 				class: "media-control-range media-control-volume",
 				type: "range",
 				min: "0",
 				max: "1",
 				step: "0.05",
 				value: e.volume,
-				style: h(_.value),
+				style: g(_.value),
 				"aria-label": "Video volume",
 				"aria-valuetext": `${Math.round(e.volume * 100)} percent`,
 				onInput: n[3] ||= (e) => c("volumeChange", d(e))
-			}, null, 44, ke)]),
-			s("output", Ae, C(u(m.value)) + " / " + C(u(f.value)), 1)
+			}, null, 44, Fe)]),
+			s("output", Ie, w(u(p.value)) + " / " + w(u(f.value)), 1)
 		])) : a("", !0)], 34));
 	}
-}), Me = [
+}), Re = [
 	"data-post-id",
 	"data-media-index",
 	"aria-busy",
 	"role",
 	"tabindex"
-], Ne = { class: "media-card-content" }, Pe = ["data-media-direction"], Fe = ["data-media-index"], Ie = {
+], ze = { class: "media-card-content" }, Be = ["data-media-direction"], Ve = ["data-media-index"], He = {
 	key: 0,
 	"data-test": "media-loading",
 	class: "media-loading",
 	"aria-hidden": "true"
-}, Le = ["aria-label"], Re = { class: "media-error-code" }, ze = [
+}, Ue = ["aria-label"], We = { class: "media-error-code" }, Ge = [
 	"src",
 	"width",
 	"height",
 	"loop",
 	"muted",
 	"preload"
-], Be = [
+], Ke = [
 	"src",
 	"width",
 	"height",
 	"fetchpriority"
-], Ve = ["aria-label"], He = ["aria-label"], Ue = ["aria-label"], We = 40, Ge = 160, Ke = 24, qe = /* @__PURE__ */ l({
+], qe = ["aria-label"], Je = ["aria-label"], Ye = ["aria-label"], Xe = 40, Ze = 160, Qe = 24, $e = /* @__PURE__ */ u({
 	__name: "MediaCard",
 	props: {
 		advanceOnMediaEnd: { type: Boolean },
@@ -566,47 +684,47 @@ var Ce = /* @__PURE__ */ l({
 		"ready"
 	],
 	setup(e, { emit: r }) {
-		let l = e, u = null, d = 0, f = !1, m = null, _ = null, y = S("next"), b = r;
+		let c = e, u = null, d = 0, f = !1, p = null, h = null, v = C("next"), b = r;
 		function x(e = !1, t = "pointer") {
 			e && b("activate", t);
 		}
-		let T = n(() => A(l.item)), E = n(() => j(l.item, l.mediaIndex)), N = n(() => M(l.item, E.value)), P = n(() => l.mediaSource === "original" ? N.value.src : N.value.preview.src), F = n(() => l.mediaSource === "original" ? N.value.width : N.value.preview.width), I = n(() => l.mediaSource === "original" ? N.value.height : N.value.preview.height), L = S(null), R = S(0), z = S(0), B = S(!0), V = S(!1), H = S(1), U = 1, W = n(() => l.interactive && !!(l.cardHeader || l.cardFooter));
-		function G(e) {
+		let S = n(() => j(c.item)), E = n(() => M(c.item, c.mediaIndex)), D = n(() => N(c.item, E.value)), P = n(() => c.mediaSource === "original" ? D.value.src : D.value.preview.src), F = n(() => c.mediaSource === "original" ? D.value.width : D.value.preview.width), I = n(() => c.mediaSource === "original" ? D.value.height : D.value.preview.height), L = C(null), R = C(0), z = C(0), B = C(!0), V = C(!1), H = C(1), U = 1, W = n(() => c.interactive && !!(c.cardHeader || c.cardFooter));
+		function ee(e) {
 			return e.detail === 0 ? "keyboard" : "pointer";
 		}
-		function K(e, t) {
-			let n = T.value.length, r = (e + n) % n;
-			r !== E.value && (y.value = e < E.value ? "previous" : "next", b("mediaChange", r), t && t.detail > 0 && t.currentTarget?.blur());
+		function G(e, t) {
+			let n = S.value.length, r = (e + n) % n;
+			r !== E.value && (v.value = e < E.value ? "previous" : "next", b("mediaChange", r), t && t.detail > 0 && t.currentTarget?.blur());
 		}
-		function ee(e, t, n) {
+		function K(e, t, n) {
 			return t === 1 ? e * 16 : t === 2 ? e * n : e;
 		}
-		function q() {
+		function te() {
 			d = 0, f = !1, u !== null && clearTimeout(u), u = null;
 		}
-		function J() {
-			u !== null && clearTimeout(u), u = setTimeout(q, Ge);
+		function ne() {
+			u !== null && clearTimeout(u), u = setTimeout(te, Ze);
 		}
-		function Y(e) {
-			if (T.value.length <= 1) return;
-			let t = e.currentTarget?.clientWidth || 1, n = ee(e.deltaX, e.deltaMode, t);
-			if (n === 0 || (e.preventDefault(), J(), f) || (d += n, Math.abs(d) < Ke)) return;
+		function re(e) {
+			if (S.value.length <= 1) return;
+			let t = e.currentTarget?.clientWidth || 1, n = K(e.deltaX, e.deltaMode, t);
+			if (n === 0 || (e.preventDefault(), ne(), f) || (d += n, Math.abs(d) < Qe)) return;
 			let r = Math.sign(d);
-			d = 0, f = !0, K(E.value + r);
+			d = 0, f = !0, G(E.value + r);
 		}
-		function te(e) {
+		function q(e) {
 			let t = e.touches[0];
-			l.layout !== "reel" || !t || (m = t.clientX, _ = t.clientY);
+			c.layout !== "reel" || !t || (p = t.clientX, h = t.clientY);
 		}
-		function ne(e) {
+		function J(e) {
 			let t = e.changedTouches[0];
-			if (m === null || _ === null || !t) return;
-			let n = m - t.clientX, r = _ - t.clientY;
-			m = null, _ = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < We || K(E.value + Math.sign(n)));
+			if (p === null || h === null || !t) return;
+			let n = p - t.clientX, r = h - t.clientY;
+			p = null, h = null, !(Math.abs(n) <= Math.abs(r)) && (Math.abs(n) < Xe || G(E.value + Math.sign(n)));
 		}
-		let re = n(() => Se(P.value));
+		let Y = n(() => Oe(P.value));
 		function ie(e) {
-			l.layout === "reel" && (e.stopPropagation(), ae());
+			c.layout === "reel" && (e.stopPropagation(), ae());
 		}
 		async function ae() {
 			if (L.value) {
@@ -648,23 +766,23 @@ var Ce = /* @__PURE__ */ l({
 			let e = L.value;
 			e && (e.muted && e.volume === 0 && (e.volume = U), e.muted = !e.muted, Z());
 		}
-		return g(() => {
-			q();
-		}), (n, r) => (v(), o("article", {
+		return _(() => {
+			te();
+		}), (n, r) => (y(), o("article", {
 			"data-post-id": e.item.postId,
 			"data-media-index": E.value,
-			class: p(["media-card", {
+			class: m(["media-card", {
 				"media-card--entering": e.entering,
 				"media-card--error": e.previewState === "error"
 			}]),
-			style: h(e.itemStyle),
+			style: g(e.itemStyle),
 			"aria-busy": e.previewState === "loading",
 			role: e.interactive && !W.value ? "button" : void 0,
 			tabindex: e.interactive && !W.value ? 0 : void 0,
-			onClick: r[11] ||= (t) => x(e.interactive && !W.value, G(t)),
-			onKeydown: [r[12] ||= O((t) => x(e.interactive && !W.value, "keyboard"), ["enter"]), r[13] ||= O(k((t) => x(e.interactive && !W.value, "keyboard"), ["prevent"]), ["space"])]
-		}, [s("div", Ne, [
-			e.cardHeader ? (v(), i(Ce, {
+			onClick: r[11] ||= (t) => x(e.interactive && !W.value, ee(t)),
+			onKeydown: [r[12] ||= k((t) => x(e.interactive && !W.value, "keyboard"), ["enter"]), r[13] ||= k(A((t) => x(e.interactive && !W.value, "keyboard"), ["prevent"]), ["space"])]
+		}, [s("div", ze, [
+			e.cardHeader ? (y(), i(ke, {
 				key: 0,
 				index: e.index,
 				item: e.item,
@@ -686,28 +804,28 @@ var Ce = /* @__PURE__ */ l({
 				"total"
 			])) : a("", !0),
 			s("div", {
-				class: p(["media-card-media", { "media-card-media--carousel": e.layout === "reel" && T.value.length > 1 }]),
-				"data-media-direction": y.value,
-				onWheel: Y,
-				onTouchstartPassive: te,
-				onTouchendPassive: ne
+				class: m(["media-card-media", { "media-card-media--carousel": e.layout === "reel" && S.value.length > 1 }]),
+				"data-media-direction": v.value,
+				onWheel: re,
+				onTouchstartPassive: q,
+				onTouchendPassive: J
 			}, [
-				c(t, { name: `media-slide-${y.value}` }, {
-					default: D(() => [(v(), o("div", {
+				l(t, { name: `media-slide-${v.value}` }, {
+					default: O(() => [(y(), o("div", {
 						key: `${e.item.postId}:${E.value}:${e.mediaSource ?? "preview"}`,
 						class: "media-card-frame",
 						"data-media-index": E.value
-					}, [e.previewState === "loading" ? (v(), o("div", Ie, [...r[14] ||= [s("span", { class: "media-loading-shimmer" }, null, -1)]])) : e.previewState === "error" ? (v(), o("div", {
+					}, [e.previewState === "loading" ? (y(), o("div", He, [...r[14] ||= [s("span", { class: "media-loading-shimmer" }, null, -1)]])) : e.previewState === "error" ? (y(), o("div", {
 						key: 1,
 						"data-test": "media-error",
 						class: "media-error",
 						role: "img",
-						"aria-label": `${w(ye)(P.value)} ${w(be)(P.value)}`
-					}, [s("strong", Re, C(w(ye)(P.value)), 1), s("span", null, C(w(be)(P.value)), 1)], 8, Le)) : a("", !0), re.value ? (v(), o("video", {
+						"aria-label": `${T(Te)(P.value)} ${T(Ee)(P.value)}`
+					}, [s("strong", We, w(T(Te)(P.value)), 1), s("span", null, w(T(Ee)(P.value)), 1)], 8, Ue)) : a("", !0), Y.value ? (y(), o("video", {
 						key: 2,
 						ref_key: "videoElement",
 						ref: L,
-						class: p(["media-preview", {
+						class: m(["media-preview", {
 							"media-preview--ready": e.previewState === "ready",
 							"media-preview--reel-video": e.layout === "reel"
 						}]),
@@ -728,9 +846,9 @@ var Ce = /* @__PURE__ */ l({
 						onEnded: se,
 						onClick: ie,
 						onError: r[2] ||= (e) => n.$emit("error", E.value)
-					}, null, 42, ze)) : (v(), o("img", {
+					}, null, 42, Ge)) : (y(), o("img", {
 						key: 3,
-						class: p(["media-preview", { "media-preview--ready": e.previewState === "ready" }]),
+						class: m(["media-preview", { "media-preview--ready": e.previewState === "ready" }]),
 						src: P.value,
 						width: F.value ?? void 0,
 						height: I.value ?? void 0,
@@ -740,10 +858,10 @@ var Ce = /* @__PURE__ */ l({
 						loading: "eager",
 						onLoad: r[3] ||= (e) => n.$emit("ready", E.value),
 						onError: r[4] ||= (e) => n.$emit("error", E.value)
-					}, null, 42, Be))], 8, Fe))]),
+					}, null, 42, Ke))], 8, Ve))]),
 					_: 1
 				}, 8, ["name"]),
-				re.value && e.previewState === "ready" ? (v(), i(je, {
+				Y.value && e.previewState === "ready" ? (y(), i(Le, {
 					key: 0,
 					"current-time": R.value,
 					duration: z.value,
@@ -763,33 +881,33 @@ var Ce = /* @__PURE__ */ l({
 					"playing",
 					"volume"
 				])) : a("", !0),
-				T.value.length > 1 ? (v(), o("div", {
+				S.value.length > 1 ? (y(), o("div", {
 					key: 1,
-					class: p(["media-carousel-controls", { "media-carousel-controls--persistent": e.layout === "reel" }]),
+					class: m(["media-carousel-controls", { "media-carousel-controls--persistent": e.layout === "reel" }]),
 					"aria-label": "Media navigation"
 				}, [s("button", {
 					type: "button",
 					class: "media-carousel-control media-carousel-control--previous",
 					"aria-label": `Previous media for post ${e.item.postId}`,
-					onClick: r[5] ||= k((e) => K(E.value - 1, e), ["stop"]),
-					onKeydown: r[6] ||= k(() => {}, ["stop"])
-				}, [c(w(fe), { size: 20 })], 40, Ve), s("button", {
+					onClick: r[5] ||= A((e) => G(E.value - 1, e), ["stop"]),
+					onKeydown: r[6] ||= A(() => {}, ["stop"])
+				}, [l(T(ve), { size: 20 })], 40, qe), s("button", {
 					type: "button",
 					class: "media-carousel-control media-carousel-control--next",
 					"aria-label": `Next media for post ${e.item.postId}`,
-					onClick: r[7] ||= k((e) => K(E.value + 1, e), ["stop"]),
-					onKeydown: r[8] ||= k(() => {}, ["stop"])
-				}, [c(w(pe), { size: 20 })], 40, He)], 2)) : a("", !0),
-				W.value ? (v(), o("button", {
+					onClick: r[7] ||= A((e) => G(E.value + 1, e), ["stop"]),
+					onKeydown: r[8] ||= A(() => {}, ["stop"])
+				}, [l(T(ye), { size: 20 })], 40, Je)], 2)) : a("", !0),
+				W.value ? (y(), o("button", {
 					key: 2,
 					class: "media-card-activator",
 					type: "button",
 					"aria-label": `Open post ${e.item.postId}`,
-					onClick: r[9] ||= k((e) => n.$emit("activate", G(e)), ["stop"]),
-					onKeydown: r[10] ||= k(() => {}, ["stop"])
-				}, null, 40, Ue)) : a("", !0)
-			], 42, Pe),
-			e.cardFooter ? (v(), i(Ce, {
+					onClick: r[9] ||= A((e) => n.$emit("activate", ee(e)), ["stop"]),
+					onKeydown: r[10] ||= A(() => {}, ["stop"])
+				}, null, 40, Ye)) : a("", !0)
+			], 42, Be),
+			e.cardFooter ? (y(), i(ke, {
 				key: 1,
 				index: e.index,
 				item: e.item,
@@ -810,9 +928,9 @@ var Ce = /* @__PURE__ */ l({
 				"region",
 				"total"
 			])) : a("", !0)
-		])], 46, Me));
+		])], 46, Re));
 	}
-}), Je = { class: "masonry-feed-shell" }, Ye = ["aria-hidden", "inert"], Xe = 240, Ze = 6, Qe = 12, $e = 800, et = 1.5, tt = /* @__PURE__ */ l({
+}), et = { class: "masonry-feed-shell" }, tt = ["aria-hidden", "inert"], nt = 240, rt = 6, it = 12, at = 800, ot = 1.5, st = /* @__PURE__ */ u({
 	__name: "MasonryFeed",
 	props: {
 		enteringPostIds: {},
@@ -821,6 +939,8 @@ var Ce = /* @__PURE__ */ l({
 		canRetryEnd: { type: Boolean },
 		cardFooter: {},
 		cardHeader: {},
+		feedFooter: {},
+		feedFooterActions: {},
 		hasNext: { type: Boolean },
 		infiniteScroll: { type: Boolean },
 		isLoadingMore: { type: Boolean },
@@ -829,6 +949,7 @@ var Ce = /* @__PURE__ */ l({
 		mediaIndices: {},
 		nextPageError: { type: Boolean },
 		previewStates: {},
+		state: {},
 		total: {}
 	},
 	emits: [
@@ -840,23 +961,23 @@ var Ce = /* @__PURE__ */ l({
 		"retryEnd"
 	],
 	setup(t, { expose: r, emit: a }) {
-		let l = t, u = a, d = S(null), f = `vibe-masonry-${T()}`, m = S(null), _ = S(0), y = S(Ze), x = S(0), C = S(0), D = S(0), O = null, k = null, A = null, j = n(() => z(l.items, _.value, {
-			additionalHeight: (l.cardHeader?.height ?? 0) + (l.cardFooter?.height ?? 0),
-			gap: y.value,
-			minColumnWidth: Xe
-		})), M = n(() => ({ height: `${j.value.height}px` })), F = n(() => {
-			let e = Math.max($e, C.value * et), t = {
-				scrollTop: x.value - D.value,
-				viewportHeight: C.value
-			}, n = R(j.value.items, {
+		let c = t, u = a, d = C(null), f = `vibe-masonry-${E()}`, p = C(null), h = C(0), v = C(rt), b = C(0), S = C(0), w = C(0), O = null, k = null, A = null, j = n(() => J(c.items, h.value, {
+			additionalHeight: (c.cardHeader?.height ?? 0) + (c.cardFooter?.height ?? 0),
+			gap: v.value,
+			minColumnWidth: nt
+		})), M = n(() => ({ height: `${j.value.height}px` })), N = n(() => {
+			let e = Math.max(at, S.value * ot), t = {
+				scrollTop: b.value - w.value,
+				viewportHeight: S.value
+			}, n = q(j.value.items, {
 				...t,
 				overscan: e
-			}), r = new Set(R(j.value.items, {
+			}), r = new Set(q(j.value.items, {
 				...t,
 				overscan: 0
 			}));
 			return n.flatMap((e) => {
-				let t = l.items[e];
+				let t = c.items[e];
 				return t ? [{
 					fetchPriority: r.has(e) ? "high" : "low",
 					index: e,
@@ -864,15 +985,15 @@ var Ce = /* @__PURE__ */ l({
 				}] : [];
 			});
 		});
-		function I(e) {
-			let t = j.value.items[e], n = l.items[e]?.postId;
+		function F(e) {
+			let t = j.value.items[e], n = c.items[e]?.postId;
 			if (!t) return {};
-			let r = n !== void 0 && l.enteringPostIds.has(n) ? L({
+			let r = n !== void 0 && c.enteringPostIds.has(n) ? re({
 				containerHeight: j.value.height,
-				gap: y.value
+				gap: v.value
 			}) : 0;
 			return {
-				"--masonry-entry-delay": `${n === void 0 ? 0 : l.entryDelays.get(n) ?? 0}ms`,
+				"--masonry-entry-delay": `${n === void 0 ? 0 : c.entryDelays.get(n) ?? 0}ms`,
 				top: `${t.y}px`,
 				left: `${t.x}px`,
 				width: `${t.width}px`,
@@ -880,58 +1001,58 @@ var Ce = /* @__PURE__ */ l({
 				transform: `translate3d(0, ${r}px, 0)`
 			};
 		}
-		function B() {
+		function I() {
 			let e = d.value;
 			if (!e) return;
-			x.value = e.scrollTop, C.value = e.clientHeight;
-			let t = m.value;
-			t && (D.value = t.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop);
+			b.value = e.scrollTop, S.value = e.clientHeight;
+			let t = p.value;
+			t && (w.value = t.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop);
 		}
-		function V(e) {
+		function L(e) {
 			let t = e.ownerDocument.documentElement.clientWidth;
-			_.value = e.clientWidth, y.value = Math.min(Qe, Math.max(Ze, t * .0075)), B();
+			h.value = e.clientWidth, v.value = Math.min(it, Math.max(rt, t * .0075)), I();
 		}
-		function H(e) {
+		function R(e) {
 			let t = e.currentTarget;
-			t && (x.value = t.scrollTop, !l.loadMoreLocked && l.infiniteScroll && P(t) && u("loadMore"));
+			t && (b.value = t.scrollTop, !c.loadMoreLocked && c.infiniteScroll && K(t) && u("loadMore"));
 		}
-		function U() {
+		function z() {
 			let e = d.value;
-			!l.loadMoreLocked && e && P(e) && u("loadMore");
+			!c.loadMoreLocked && e && K(e) && u("loadMore");
 		}
-		function W() {
+		function B() {
 			return d.value;
 		}
-		return E(m, (e) => {
-			O?.disconnect(), O = null, A !== null && cancelAnimationFrame(A), e && (V(e), !(typeof ResizeObserver > "u") && (O = new ResizeObserver(([t]) => {
+		return D(p, (e) => {
+			O?.disconnect(), O = null, A !== null && cancelAnimationFrame(A), e && (L(e), !(typeof ResizeObserver > "u") && (O = new ResizeObserver(([t]) => {
 				let n = t?.contentRect.width ?? e.clientWidth;
-				Math.abs(n - _.value) < .5 || (A = requestAnimationFrame(() => {
-					A = null, V(e);
+				Math.abs(n - h.value) < .5 || (A = requestAnimationFrame(() => {
+					A = null, L(e);
 				}));
 			}), O.observe(e)));
-		}), E(d, (e) => {
-			k?.disconnect(), k = null, e && (B(), !(typeof ResizeObserver > "u") && (k = new ResizeObserver(B), k.observe(e)));
-		}), g(() => {
+		}), D(d, (e) => {
+			k?.disconnect(), k = null, e && (I(), !(typeof ResizeObserver > "u") && (k = new ResizeObserver(I), k.observe(e)));
+		}), _(() => {
 			O?.disconnect(), k?.disconnect(), A !== null && cancelAnimationFrame(A);
 		}), r({
-			getScrollElement: W,
-			loadIfNearBottom: U
-		}), (n, r) => (v(), o("div", Je, [s("main", {
+			getScrollElement: B,
+			loadIfNearBottom: z
+		}), (n, r) => (y(), o("div", et, [s("main", {
 			id: f,
 			ref_key: "galleryElement",
 			ref: d,
-			class: p(["gallery-shell masonry-feed", { "masonry-feed--suspended": t.suspended }]),
+			class: m(["gallery-shell masonry-feed", { "masonry-feed--suspended": t.suspended }]),
 			"data-layout-mode": "masonry",
 			"aria-hidden": t.suspended || void 0,
 			inert: t.suspended || void 0,
-			onScrollPassive: H
+			onScrollPassive: R
 		}, [s("section", {
 			ref_key: "masonryElement",
-			ref: m,
-			class: p(["masonry", { "masonry--ready": _.value > 0 }]),
-			style: h(M.value),
+			ref: p,
+			class: m(["masonry", { "masonry--ready": h.value > 0 }]),
+			style: g(M.value),
 			"aria-label": "Media gallery"
-		}, [(v(!0), o(e, null, b(F.value, ({ fetchPriority: e, item: n, index: r }) => (v(), i(qe, {
+		}, [(y(!0), o(e, null, x(N.value, ({ fetchPriority: e, item: n, index: r }) => (y(), i($e, {
 			key: n.postId,
 			class: "masonry-item",
 			entering: t.enteringPostIds.has(n.postId),
@@ -940,12 +1061,12 @@ var Ce = /* @__PURE__ */ l({
 			"card-header": t.cardHeader,
 			index: r,
 			item: n,
-			"item-style": I(r),
+			"item-style": F(r),
 			interactive: "",
 			layout: "masonry",
 			"loaded-count": t.items.length,
 			"media-index": t.mediaIndices.get(n.postId) ?? 0,
-			"preview-state": t.previewStates.get(w(N)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
+			"preview-state": t.previewStates.get(T(P)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
 			total: t.total,
 			onActivate: (e) => u("activate", n.postId, e),
 			onMediaChange: (e) => u("mediaChange", n.postId, e),
@@ -967,23 +1088,29 @@ var Ce = /* @__PURE__ */ l({
 			"onMediaChange",
 			"onReady",
 			"onError"
-		]))), 128))], 6), c(ie, {
+		]))), 128))], 6), l(U, {
+			actions: t.feedFooterActions,
 			"can-retry-end": t.canRetryEnd,
+			"feed-footer": t.feedFooter,
 			"has-error": t.nextPageError,
 			"has-next": t.hasNext,
 			"infinite-scroll": t.infiniteScroll,
 			"is-loading": t.isLoadingMore,
 			"load-more-locked": t.loadMoreLocked,
+			state: t.state,
 			onLoadMore: r[0] ||= (e) => u("loadMore"),
 			onRetryEnd: r[1] ||= (e) => u("retryEnd")
 		}, null, 8, [
+			"actions",
 			"can-retry-end",
+			"feed-footer",
 			"has-error",
 			"has-next",
 			"infinite-scroll",
 			"is-loading",
-			"load-more-locked"
-		])], 42, Ye), c(ee, {
+			"load-more-locked",
+			"state"
+		])], 42, tt), l(ce, {
 			"content-size": j.value.height,
 			"controls-id": f,
 			"scroll-element": d.value,
@@ -994,7 +1121,7 @@ var Ce = /* @__PURE__ */ l({
 			"suspended"
 		])]));
 	}
-}), nt = ["aria-label"], rt = /* @__PURE__ */ l({
+}), ct = ["aria-label"], lt = /* @__PURE__ */ u({
 	__name: "ReelAutoAdvanceProgress",
 	props: {
 		durationMs: {},
@@ -1003,18 +1130,18 @@ var Ce = /* @__PURE__ */ l({
 	emits: ["complete"],
 	setup(e, { emit: t }) {
 		let r = e, i = t, a = n(() => ({ "--vibe-reel-auto-advance-duration": `${r.durationMs}ms` }));
-		return (t, n) => (v(), o("div", {
+		return (t, n) => (y(), o("div", {
 			class: "reel-auto-advance",
 			"data-test": "reel-auto-advance",
 			role: "timer",
 			"aria-label": e.label
 		}, [s("span", {
 			class: "reel-auto-advance-progress",
-			style: h(a.value),
+			style: g(a.value),
 			onAnimationend: n[0] ||= (e) => i("complete")
-		}, null, 36)], 8, nt));
+		}, null, 36)], 8, ct));
 	}
-}), it = ["data-active-post-id", "data-active-media-index"], at = 2, ot = /* @__PURE__ */ l({
+}), ut = ["data-active-post-id", "data-active-media-index"], dt = 2, ft = /* @__PURE__ */ u({
 	__name: "ReelFeed",
 	props: {
 		initialPostId: {},
@@ -1023,6 +1150,8 @@ var Ce = /* @__PURE__ */ l({
 		canRetryEnd: { type: Boolean },
 		cardFooter: {},
 		cardHeader: {},
+		feedFooter: {},
+		feedFooterActions: {},
 		hasNext: { type: Boolean },
 		infiniteScroll: { type: Boolean },
 		isLoadingMore: { type: Boolean },
@@ -1031,6 +1160,7 @@ var Ce = /* @__PURE__ */ l({
 		mediaIndices: {},
 		nextPageError: { type: Boolean },
 		previewStates: {},
+		state: {},
 		total: {}
 	},
 	emits: [
@@ -1041,93 +1171,93 @@ var Ce = /* @__PURE__ */ l({
 		"ready",
 		"retryEnd"
 	],
-	setup(t, { expose: r, emit: l }) {
-		let u = t, d = l, m = S(null), y = u.initialPostId === null || u.initialPostId === void 0 ? -1 : u.items.findIndex((e) => e.postId === u.initialPostId), x = S(Math.max(0, y)), C = S(!1), T = 0, D = null, O = null, k = null, j = n(() => ({ gridTemplateRows: `repeat(${u.items.length}, 100cqh)` })), F = n(() => {
-			let e = Math.max(0, x.value - at), t = Math.min(u.items.length - 1, x.value + at);
+	setup(t, { expose: r, emit: c }) {
+		let u = t, d = c, f = C(null), h = u.initialPostId === null || u.initialPostId === void 0 ? -1 : u.items.findIndex((e) => e.postId === u.initialPostId), b = C(Math.max(0, h)), S = C(!1), w = 0, E = null, O = null, k = null, A = n(() => ({ gridTemplateRows: `repeat(${u.items.length}, 100cqh)` })), M = n(() => {
+			let e = Math.max(0, b.value - dt), t = Math.min(u.items.length - 1, b.value + dt);
 			return u.items.slice(e, t + 1).map((t, n) => ({
-				fetchPriority: e + n === x.value ? "high" : "low",
+				fetchPriority: e + n === b.value ? "high" : "low",
 				index: e + n,
 				item: t
 			}));
-		}), I = n(() => u.items[x.value]?.postId), L = n(() => u.items[x.value]), R = n(() => {
-			let e = I.value;
+		}), F = n(() => u.items[b.value]?.postId), I = n(() => u.items[b.value]), L = n(() => {
+			let e = F.value;
 			return e === void 0 ? 0 : u.mediaIndices.get(e) ?? 0;
+		}), R = n(() => {
+			let e = F.value;
+			return e === void 0 ? "loading" : u.previewStates.get(P(e, L.value)) ?? "loading";
 		}), z = n(() => {
 			let e = I.value;
-			return e === void 0 ? "loading" : u.previewStates.get(N(e, R.value)) ?? "loading";
-		}), B = n(() => {
-			let e = L.value;
 			if (!e) return "";
-			let t = M(e, R.value);
+			let t = N(e, L.value);
 			return u.mediaSource === "original" ? t.src : t.preview.src;
-		}), V = n(() => z.value === "ready" && Se(B.value)), H = n(() => [
-			I.value,
-			R.value,
+		}), B = n(() => R.value === "ready" && Oe(z.value)), V = n(() => [
+			F.value,
+			L.value,
 			u.items.length,
 			u.loadMoreLocked,
 			u.reelAutoAdvance.enabled,
 			u.reelAutoAdvance.includePostItems,
 			u.reelAutoAdvance.intervalMs
-		].join(":")), U = n(() => {
-			let e = L.value, t = !!(e && u.reelAutoAdvance.includePostItems && R.value < A(e).length - 1), n = u.reelAutoAdvance.intervalMs / 1e3;
+		].join(":")), H = n(() => {
+			let e = I.value, t = !!(e && u.reelAutoAdvance.includePostItems && L.value < j(e).length - 1), n = u.reelAutoAdvance.intervalMs / 1e3;
 			return `Auto advance to the next ${t ? "post item" : "post"} in ${n}s`;
-		}), W = n(() => u.reelAutoAdvance.enabled && L.value !== void 0 && z.value !== "loading" && !V.value);
-		function G(e) {
+		}), W = n(() => u.reelAutoAdvance.enabled && I.value !== void 0 && R.value !== "loading" && !B.value);
+		function ee(e) {
 			return { gridRow: `${e + 1}` };
 		}
-		function K(e) {
-			let t = T || e.clientHeight;
+		function G(e) {
+			let t = w || e.clientHeight;
 			return t <= 0 || u.items.length === 0 ? 0 : Math.min(u.items.length - 1, Math.max(0, Math.round(e.scrollTop / t)));
 		}
-		function ee(e) {
+		function te(e) {
 			let t = e.currentTarget;
-			t && (C.value || (x.value = K(t)), !u.loadMoreLocked && u.infiniteScroll && P(t) && d("loadMore"));
+			t && (S.value || (b.value = G(t)), !u.loadMoreLocked && u.infiniteScroll && K(t) && d("loadMore"));
 		}
-		function q() {
-			let e = m.value;
-			e && (te(!0), T = e.clientHeight, e.scrollTop = x.value * T, O !== null && cancelAnimationFrame(O), O = requestAnimationFrame(() => {
-				e.scrollTop = x.value * e.clientHeight, T = e.clientHeight, O = null;
-			}), J());
+		function ne() {
+			let e = f.value;
+			e && (J(!0), w = e.clientHeight, e.scrollTop = b.value * w, O !== null && cancelAnimationFrame(O), O = requestAnimationFrame(() => {
+				e.scrollTop = b.value * e.clientHeight, w = e.clientHeight, O = null;
+			}), re());
 		}
-		function J() {
+		function re() {
 			k !== null && clearTimeout(k), k = setTimeout(() => {
 				k = null;
-				let e = m.value;
-				e && (T = e.clientHeight, e.scrollTop = x.value * T), te(!1);
+				let e = f.value;
+				e && (w = e.clientHeight, e.scrollTop = b.value * w), J(!1);
 			}, 120);
 		}
-		function Y() {
-			te(!0);
-			let e = m.value;
-			e && (T = e.clientHeight, e.scrollTop = x.value * T), J();
+		function q() {
+			J(!0);
+			let e = f.value;
+			e && (w = e.clientHeight, e.scrollTop = b.value * w), re();
 		}
-		function te(e) {
-			C.value = e, m.value?.toggleAttribute("data-resizing", e);
+		function J(e) {
+			S.value = e, f.value?.toggleAttribute("data-resizing", e);
 		}
-		function ne() {
-			let e = m.value;
-			!u.loadMoreLocked && e && P(e) && d("loadMore");
+		function Y() {
+			let e = f.value;
+			!u.loadMoreLocked && e && K(e) && d("loadMore");
 		}
-		function re(e) {
-			let t = L.value;
+		function ie(e) {
+			let t = I.value;
 			if (!t) return !1;
-			let n = A(t).length;
+			let n = j(t).length;
 			if (n <= 1) return !1;
-			let r = (R.value + e + n) % n;
+			let r = (L.value + e + n) % n;
 			return d("mediaChange", t.postId, r), !0;
 		}
 		function ae(e) {
-			let t = x.value + e;
-			return !m.value || t < 0 || t >= u.items.length ? !1 : (Z(t), !0);
+			let t = b.value + e;
+			return !f.value || t < 0 || t >= u.items.length ? !1 : (Z(t), !0);
 		}
 		function X() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
 		function Z(e) {
-			let t = m.value;
+			let t = f.value;
 			if (!t) return;
-			let n = e * (T || t.clientHeight);
-			if (x.value = e, !X() && typeof t.scrollTo == "function") {
+			let n = e * (w || t.clientHeight);
+			if (b.value = e, !X() && typeof t.scrollTo == "function") {
 				t.scrollTo({
 					behavior: "smooth",
 					top: n
@@ -1138,13 +1268,13 @@ var Ce = /* @__PURE__ */ l({
 		}
 		function oe() {
 			if (!u.reelAutoAdvance.enabled) return;
-			let e = L.value;
+			let e = I.value;
 			if (!e) return;
-			if (u.reelAutoAdvance.includePostItems && R.value < A(e).length - 1) {
-				d("mediaChange", e.postId, R.value + 1);
+			if (u.reelAutoAdvance.includePostItems && L.value < j(e).length - 1) {
+				d("mediaChange", e.postId, L.value + 1);
 				return;
 			}
-			let t = x.value + 1, n = u.items[t];
+			let t = b.value + 1, n = u.items[t];
 			if (!n) {
 				u.hasNext && !u.loadMoreLocked && d("loadMore");
 				return;
@@ -1152,38 +1282,38 @@ var Ce = /* @__PURE__ */ l({
 			u.reelAutoAdvance.includePostItems && (u.mediaIndices.get(n.postId) ?? 0) !== 0 && d("mediaChange", n.postId, 0), Z(t);
 		}
 		function se(e, t) {
-			!u.reelAutoAdvance.enabled || e !== I.value || t !== R.value || !V.value || oe();
+			!u.reelAutoAdvance.enabled || e !== F.value || t !== L.value || !B.value || oe();
 		}
-		return E(m, (e) => {
-			D?.disconnect(), D = null, e && (T = e.clientHeight, !(typeof ResizeObserver > "u") && (D = new ResizeObserver(q), D.observe(e)));
-		}), E(() => u.items.length, async (e) => {
-			x.value = Math.min(x.value, Math.max(0, e - 1)), await f(), q();
-		}), E(I, (e) => {
+		return D(f, (e) => {
+			E?.disconnect(), E = null, e && (w = e.clientHeight, !(typeof ResizeObserver > "u") && (E = new ResizeObserver(ne), E.observe(e)));
+		}), D(() => u.items.length, async (e) => {
+			b.value = Math.min(b.value, Math.max(0, e - 1)), await p(), ne();
+		}), D(F, (e) => {
 			e !== void 0 && d("activeChange", e);
-		}, { immediate: !0 }), _(() => {
-			window.addEventListener("resize", Y), window.addEventListener("orientationchange", Y), y >= 0 && f(q);
-		}), g(() => {
-			window.removeEventListener("resize", Y), window.removeEventListener("orientationchange", Y), D?.disconnect(), O !== null && cancelAnimationFrame(O), k !== null && clearTimeout(k);
+		}, { immediate: !0 }), v(() => {
+			window.addEventListener("resize", q), window.addEventListener("orientationchange", q), h >= 0 && p(ne);
+		}), _(() => {
+			window.removeEventListener("resize", q), window.removeEventListener("orientationchange", q), E?.disconnect(), O !== null && cancelAnimationFrame(O), k !== null && clearTimeout(k);
 		}), r({
-			activeIndex: x,
-			activePostId: I,
-			changeActiveMedia: re,
-			loadIfNearBottom: ne,
+			activeIndex: b,
+			activePostId: F,
+			changeActiveMedia: ie,
+			loadIfNearBottom: Y,
 			moveActivePost: ae
-		}), (n, r) => (v(), o("main", {
-			class: p(["reel-shell", {
+		}), (n, r) => (y(), o("main", {
+			class: m(["reel-shell", {
 				"reel-shell--has-footer": !!t.cardFooter,
 				"reel-shell--has-header": !!t.cardHeader
 			}]),
 			"data-layout-mode": "reel"
 		}, [
-			t.cardHeader && L.value ? (v(), i(Ce, {
+			t.cardHeader && I.value ? (y(), i(ke, {
 				key: 0,
-				index: x.value,
-				item: L.value,
+				index: b.value,
+				item: I.value,
 				layout: "reel",
 				"loaded-count": t.items.length,
-				"media-index": R.value,
+				"media-index": L.value,
 				"media-source": t.mediaSource,
 				placement: "header",
 				region: t.cardHeader,
@@ -1199,29 +1329,29 @@ var Ce = /* @__PURE__ */ l({
 			])) : a("", !0),
 			s("div", {
 				ref_key: "galleryElement",
-				ref: m,
+				ref: f,
 				class: "gallery-shell reel-feed",
-				"data-active-post-id": I.value,
-				"data-active-media-index": R.value,
-				onScrollPassive: ee
+				"data-active-post-id": F.value,
+				"data-active-media-index": L.value,
+				onScrollPassive: te
 			}, [s("section", {
 				class: "reel-track",
-				style: h(j.value),
+				style: g(A.value),
 				"aria-label": "Media gallery"
-			}, [(v(!0), o(e, null, b(F.value, ({ fetchPriority: e, item: n, index: r }) => (v(), i(qe, {
+			}, [(y(!0), o(e, null, x(M.value, ({ fetchPriority: e, item: n, index: r }) => (y(), i($e, {
 				key: n.postId,
-				"advance-on-media-end": u.reelAutoAdvance.enabled && r === x.value,
+				"advance-on-media-end": u.reelAutoAdvance.enabled && r === b.value,
 				class: "reel-item",
 				entering: !1,
 				"fetch-priority": e,
 				index: r,
 				item: n,
-				"item-style": G(r),
+				"item-style": ee(r),
 				layout: "reel",
 				"loaded-count": t.items.length,
 				"media-index": t.mediaIndices.get(n.postId) ?? 0,
 				"media-source": t.mediaSource,
-				"preview-state": t.previewStates.get(w(N)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
+				"preview-state": t.previewStates.get(T(P)(n.postId, t.mediaIndices.get(n.postId) ?? 0)) ?? "loading",
 				total: t.total,
 				onMediaChange: (e) => d("mediaChange", n.postId, e),
 				onEnded: (e) => se(n.postId, e),
@@ -1242,30 +1372,36 @@ var Ce = /* @__PURE__ */ l({
 				"onEnded",
 				"onReady",
 				"onError"
-			]))), 128))], 4), c(ie, {
+			]))), 128))], 4), l(U, {
+				actions: t.feedFooterActions,
 				"can-retry-end": t.canRetryEnd,
+				"feed-footer": t.feedFooter,
 				"has-error": t.nextPageError,
 				"has-next": t.hasNext,
 				"infinite-scroll": t.infiniteScroll,
 				"is-loading": t.isLoadingMore,
 				"load-more-locked": t.loadMoreLocked,
+				state: t.state,
 				onLoadMore: r[0] ||= (e) => d("loadMore"),
 				onRetryEnd: r[1] ||= (e) => d("retryEnd")
 			}, null, 8, [
+				"actions",
 				"can-retry-end",
+				"feed-footer",
 				"has-error",
 				"has-next",
 				"infinite-scroll",
 				"is-loading",
-				"load-more-locked"
-			])], 40, it),
-			t.cardFooter && L.value ? (v(), i(Ce, {
+				"load-more-locked",
+				"state"
+			])], 40, ut),
+			t.cardFooter && I.value ? (y(), i(ke, {
 				key: 1,
-				index: x.value,
-				item: L.value,
+				index: b.value,
+				item: I.value,
 				layout: "reel",
 				"loaded-count": t.items.length,
-				"media-index": R.value,
+				"media-index": L.value,
 				"media-source": t.mediaSource,
 				placement: "footer",
 				region: t.cardFooter,
@@ -1279,24 +1415,24 @@ var Ce = /* @__PURE__ */ l({
 				"region",
 				"total"
 			])) : a("", !0),
-			W.value ? (v(), i(rt, {
-				key: H.value,
+			W.value ? (y(), i(lt, {
+				key: V.value,
 				"duration-ms": t.reelAutoAdvance.intervalMs,
-				label: U.value,
+				label: H.value,
 				onComplete: oe
 			}, null, 8, ["duration-ms", "label"])) : a("", !0)
 		], 2));
 	}
-}), st = ["data-info-sheet-open", "data-info-sheet-mode"], ct = ["aria-hidden", "inert"], lt = {
+}), pt = ["data-info-sheet-open", "data-info-sheet-mode"], mt = ["aria-hidden", "inert"], ht = {
 	key: 0,
 	class: "reel-info-sheet-layer",
 	"data-test": "reel-info-sheet"
-}, ut = [
+}, gt = [
 	"role",
 	"aria-modal",
 	"tabindex",
 	"data-active-post-id"
-], dt = /* @__PURE__ */ l({
+], _t = /* @__PURE__ */ u({
 	__name: "ReelLayout",
 	props: {
 		infoSheet: {},
@@ -1309,6 +1445,8 @@ var Ce = /* @__PURE__ */ l({
 		canRetryEnd: { type: Boolean },
 		cardFooter: {},
 		cardHeader: {},
+		feedFooter: {},
+		feedFooterActions: {},
 		hasNext: { type: Boolean },
 		infiniteScroll: { type: Boolean },
 		isLoadingMore: { type: Boolean },
@@ -1317,6 +1455,7 @@ var Ce = /* @__PURE__ */ l({
 		mediaIndices: {},
 		nextPageError: { type: Boolean },
 		previewStates: {},
+		state: {},
 		total: {}
 	},
 	emits: [
@@ -1328,82 +1467,84 @@ var Ce = /* @__PURE__ */ l({
 		"ready",
 		"retryEnd"
 	],
-	setup(e, { expose: r, emit: l }) {
-		let d = e, h = l, _ = S(null), y = S(null), b = null, C = n(() => {
-			let e = d.initialPostId === null || d.initialPostId === void 0 ? -1 : d.items.findIndex((e) => e.postId === d.initialPostId);
+	setup(e, { expose: r, emit: c }) {
+		let u = e, f = c, g = C(null), v = C(null), b = null, x = n(() => {
+			let e = u.initialPostId === null || u.initialPostId === void 0 ? -1 : u.items.findIndex((e) => e.postId === u.initialPostId);
 			return Math.max(0, e);
-		}), w = n(() => d.items[C.value]), T = n(() => {
+		}), w = n(() => u.items[x.value]), T = n(() => {
 			let e = w.value?.postId;
-			return e === void 0 ? 0 : d.mediaIndices.get(e) ?? 0;
-		}), O = n(() => !!(d.infoSheet && d.infoSheetEnabled && w.value)), k = n(() => {
+			return e === void 0 ? 0 : u.mediaIndices.get(e) ?? 0;
+		}), E = n(() => !!(u.infoSheet && u.infoSheetEnabled && w.value)), k = n(() => {
 			let e = w.value;
 			return e ? {
-				close: j,
-				index: C.value,
+				close: A,
+				index: x.value,
 				item: e,
 				layout: "reel",
-				loadedCount: d.items.length,
-				mediaCount: A(e).length,
+				loadedCount: u.items.length,
+				mediaCount: j(e).length,
 				mediaIndex: T.value,
-				mediaItem: M(e, T.value),
-				mediaSource: d.mediaSource ?? "preview",
-				origin: d.origin,
-				total: d.total
+				mediaItem: N(e, T.value),
+				mediaSource: u.mediaSource ?? "preview",
+				origin: u.origin,
+				total: u.total
 			} : null;
 		});
-		function j() {
-			h("closeInfoSheet");
+		function A() {
+			f("closeInfoSheet");
 		}
-		function N(e) {
-			return _.value?.changeActiveMedia(e) ?? !1;
+		function M(e) {
+			return g.value?.changeActiveMedia(e) ?? !1;
 		}
 		function P() {
-			_.value?.loadIfNearBottom();
+			g.value?.loadIfNearBottom();
 		}
 		function F(e) {
-			return _.value?.moveActivePost(e) ?? !1;
+			return g.value?.moveActivePost(e) ?? !1;
 		}
 		function I(e, t) {
-			h("error", e, t);
+			f("error", e, t);
 		}
 		function L(e, t) {
-			h("mediaChange", e, t);
+			f("mediaChange", e, t);
 		}
 		function R(e, t) {
-			h("ready", e, t);
+			f("ready", e, t);
 		}
-		return E(() => ({
-			overlay: d.infoSheetOverlay,
-			visible: O.value
+		return D(() => ({
+			overlay: u.infoSheetOverlay,
+			visible: E.value
 		}), async (e, t) => {
 			if (e.visible && !t?.visible) {
-				b = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.overlay && (await f(), y.value?.focus({ preventScroll: !0 }));
+				b = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.overlay && (await p(), v.value?.focus({ preventScroll: !0 }));
 				return;
 			}
 			if (!e.visible && t?.visible && b?.isConnected) {
 				let e = b;
-				b = null, await f(), e.focus({ preventScroll: !0 });
+				b = null, await p(), e.focus({ preventScroll: !0 });
 			}
-		}), g(() => {
+		}), _(() => {
 			b = null;
 		}), r({
-			changeActiveMedia: N,
+			changeActiveMedia: M,
 			loadIfNearBottom: P,
 			moveActivePost: F
-		}), (n, r) => (v(), o("section", {
-			class: p(["reel-layout", `reel-layout--${e.infoSheetOverlay ? "overlay" : "layout"}`]),
-			"data-info-sheet-open": O.value || void 0,
+		}), (n, r) => (y(), o("section", {
+			class: m(["reel-layout", `reel-layout--${e.infoSheetOverlay ? "overlay" : "layout"}`]),
+			"data-info-sheet-open": E.value || void 0,
 			"data-info-sheet-mode": e.infoSheetOverlay ? "overlay" : "layout"
 		}, [s("div", {
 			class: "reel-layout-main",
-			"aria-hidden": e.infoSheetOverlay && O.value || void 0,
-			inert: e.infoSheetOverlay && O.value || void 0
-		}, [c(ot, {
+			"aria-hidden": e.infoSheetOverlay && E.value || void 0,
+			inert: e.infoSheetOverlay && E.value || void 0
+		}, [l(ft, {
 			ref_key: "reelFeed",
-			ref: _,
+			ref: g,
 			"can-retry-end": e.canRetryEnd,
 			"card-footer": e.cardFooter,
 			"card-header": e.cardHeader,
+			"feed-footer": e.feedFooter,
+			"feed-footer-actions": e.feedFooterActions,
 			"has-next": e.hasNext,
 			"infinite-scroll": e.infiniteScroll,
 			"initial-post-id": e.initialPostId,
@@ -1415,17 +1556,20 @@ var Ce = /* @__PURE__ */ l({
 			"next-page-error": e.nextPageError,
 			"preview-states": e.previewStates,
 			"reel-auto-advance": e.reelAutoAdvance,
+			state: e.state,
 			total: e.total,
-			onActiveChange: r[0] ||= (e) => h("activeChange", e),
+			onActiveChange: r[0] ||= (e) => f("activeChange", e),
 			onError: I,
-			onLoadMore: r[1] ||= (e) => h("loadMore"),
+			onLoadMore: r[1] ||= (e) => f("loadMore"),
 			onMediaChange: L,
 			onReady: R,
-			onRetryEnd: r[2] ||= (e) => h("retryEnd")
+			onRetryEnd: r[2] ||= (e) => f("retryEnd")
 		}, null, 8, [
 			"can-retry-end",
 			"card-footer",
 			"card-header",
+			"feed-footer",
+			"feed-footer-actions",
 			"has-next",
 			"infinite-scroll",
 			"initial-post-id",
@@ -1437,38 +1581,30 @@ var Ce = /* @__PURE__ */ l({
 			"next-page-error",
 			"preview-states",
 			"reel-auto-advance",
+			"state",
 			"total"
-		])], 8, ct), c(t, { name: "vibe-info-sheet" }, {
-			default: D(() => [O.value && e.infoSheet && k.value ? (v(), o("div", lt, [s("aside", {
+		])], 8, mt), l(t, { name: "vibe-info-sheet" }, {
+			default: O(() => [E.value && e.infoSheet && k.value ? (y(), o("div", ht, [s("aside", {
 				ref_key: "sheetElement",
-				ref: y,
+				ref: v,
 				class: "reel-info-sheet",
 				role: e.infoSheetOverlay ? "dialog" : "complementary",
 				"aria-label": "Reel information",
 				"aria-modal": e.infoSheetOverlay ? "true" : void 0,
 				tabindex: e.infoSheetOverlay ? -1 : void 0,
 				"data-active-post-id": w.value?.postId
-			}, [(v(), i(x(e.infoSheet.component), m(u(k.value)), null, 16))], 8, ut)])) : a("", !0)]),
+			}, [(y(), i(S(e.infoSheet.component), h(d(k.value)), null, 16))], 8, gt)])) : a("", !0)]),
 			_: 1
-		})], 10, st));
+		})], 10, pt));
 	}
-}), ft = {
-	key: 0,
-	class: "gallery-shell",
-	role: "alert"
-}, pt = {
-	key: 1,
-	class: "gallery-shell",
-	role: "status"
-}, mt = {
-	key: 2,
-	class: "gallery-shell"
-}, ht = 35, gt = /* @__PURE__ */ l({
+}), vt = 35, yt = /* @__PURE__ */ u({
 	__name: "VibeSurface",
 	props: {
 		canRetryEnd: { type: Boolean },
 		cardFooter: {},
 		cardHeader: {},
+		feedFooter: {},
+		feedFooterActions: {},
 		reelInfoSheet: {},
 		state: {}
 	},
@@ -1480,85 +1616,85 @@ var Ce = /* @__PURE__ */ l({
 		"reelInfoSheetChange",
 		"retryEnd"
 	],
-	setup(r, { expose: l, emit: u }) {
-		let d = r, p = u, m = S(null), y = S(null), b = S(null), x = S(null), C = S({}), w = S(!1), T = S(/* @__PURE__ */ new Set()), O = S(/* @__PURE__ */ new Map()), k = S(/* @__PURE__ */ new Map()), A = S(/* @__PURE__ */ new Map()), M = S(/* @__PURE__ */ new Map()), P = n(() => d.state.reelMediaSource === "original" ? M.value : A.value), F = new Set(d.state.items.map((e) => e.postId)), I = null, L = null, R = !1;
-		function z() {
+	setup(r, { expose: s, emit: c }) {
+		let u = r, d = c, f = C(null), m = C(null), h = C(null), b = C(null), x = C({}), S = C(!1), w = C(/* @__PURE__ */ new Set()), T = C(/* @__PURE__ */ new Map()), E = C(/* @__PURE__ */ new Map()), k = C(/* @__PURE__ */ new Map()), A = C(/* @__PURE__ */ new Map()), j = n(() => F(u.state)), N = n(() => u.state.reelMediaSource === "original" ? A.value : k.value), I = new Set(u.state.items.map((e) => e.postId)), L = null, R = null, z = !1;
+		function B() {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		}
-		function B() {
-			I !== null && cancelAnimationFrame(I), I = requestAnimationFrame(() => {
-				I = requestAnimationFrame(() => {
-					I = null, T.value = /* @__PURE__ */ new Set();
+		function V() {
+			L !== null && cancelAnimationFrame(L), L = requestAnimationFrame(() => {
+				L = requestAnimationFrame(() => {
+					L = null, w.value = /* @__PURE__ */ new Set();
 				});
 			});
 		}
-		function V(e, t, n) {
-			let r = N(e, t);
-			A.value.get(r) !== n && (A.value = new Map(A.value).set(r, n));
-		}
 		function H(e, t, n) {
-			let r = N(e, t);
-			M.value.get(r) !== n && (M.value = new Map(M.value).set(r, n));
+			let r = P(e, t);
+			k.value.get(r) !== n && (k.value = new Map(k.value).set(r, n));
 		}
-		function U(e, t) {
-			V(e, t, "error");
+		function U(e, t, n) {
+			let r = P(e, t);
+			A.value.get(r) !== n && (A.value = new Map(A.value).set(r, n));
 		}
 		function W(e, t) {
-			V(e, t, "ready");
-		}
-		function G(e, t) {
 			H(e, t, "error");
 		}
-		function K(e, t) {
+		function ee(e, t) {
 			H(e, t, "ready");
 		}
-		function ee(e, t) {
-			if (d.state.reelMediaSource === "original") {
-				G(e, t);
-				return;
-			}
-			U(e, t);
+		function K(e, t) {
+			U(e, t, "error");
 		}
-		function q(e, t) {
-			if (d.state.reelMediaSource === "original") {
+		function te(e, t) {
+			U(e, t, "ready");
+		}
+		function ne(e, t) {
+			if (u.state.reelMediaSource === "original") {
 				K(e, t);
 				return;
 			}
 			W(e, t);
 		}
-		function J(e, t) {
-			let n = d.state.items.find((t) => t.postId === e);
+		function re(e, t) {
+			if (u.state.reelMediaSource === "original") {
+				te(e, t);
+				return;
+			}
+			ee(e, t);
+		}
+		function q(e, t) {
+			let n = u.state.items.find((t) => t.postId === e);
 			if (!n) return;
-			let r = j(n, t);
-			(k.value.get(e) ?? 0) !== r && (k.value = new Map(k.value).set(e, r));
+			let r = M(n, t);
+			(E.value.get(e) ?? 0) !== r && (E.value = new Map(E.value).set(e, r));
 		}
-		async function Y() {
-			await f(), (d.state.layout === "reel" || d.state.reelOrigin === "masonry" ? y.value : m.value)?.loadIfNearBottom();
+		async function J() {
+			await p(), (u.state.layout === "reel" || u.state.reelOrigin === "masonry" ? m.value : f.value)?.loadIfNearBottom();
 		}
-		function te(e) {
-			return d.state.isLoading || d.state.items.length === 0 || d.state.layout !== "reel" && d.state.reelOrigin !== "masonry" ? !1 : y.value?.changeActiveMedia?.(e) ?? !1;
+		function Y(e) {
+			return u.state.isLoading || u.state.items.length === 0 || u.state.layout !== "reel" && u.state.reelOrigin !== "masonry" ? !1 : m.value?.changeActiveMedia?.(e) ?? !1;
 		}
-		function ne(e) {
-			return d.state.isLoading || d.state.items.length === 0 || d.state.layout !== "reel" && d.state.reelOrigin !== "masonry" ? !1 : y.value?.moveActivePost?.(e) ?? !1;
+		function ie(e) {
+			return u.state.isLoading || u.state.items.length === 0 || u.state.layout !== "reel" && u.state.reelOrigin !== "masonry" ? !1 : m.value?.moveActivePost?.(e) ?? !1;
 		}
-		function re() {
-			return d.state.layout !== "masonry" || d.state.reelOrigin === "masonry" ? null : m.value?.getScrollElement?.() ?? null;
+		function ae() {
+			return u.state.layout !== "masonry" || u.state.reelOrigin === "masonry" ? null : f.value?.getScrollElement?.() ?? null;
 		}
-		function ie(e, t) {
-			L = e, R = t === "keyboard", C.value = Z(e), p("openReel", e), f(() => b.value?.focus());
+		function X(e, t) {
+			R = e, z = t === "keyboard", x.value = se(e), d("openReel", e), p(() => h.value?.focus());
 		}
-		function ae(e) {
-			let t = x.value?.querySelectorAll(".masonry-feed [data-post-id]") ?? [];
+		function Z(e) {
+			let t = b.value?.querySelectorAll(".masonry-feed [data-post-id]") ?? [];
 			return Array.from(t).find((t) => t.dataset.postId === String(e)) ?? null;
 		}
-		function X(e, t) {
-			let n = ae(e), r = n?.querySelector(".media-card-activator") ?? n;
+		function oe(e, t) {
+			let n = Z(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 Z(e) {
-			let t = x.value, n = ae(e);
+		function se(e) {
+			let t = b.value, n = Z(e);
 			if (t === null || n === null) return {};
 			let r = t.getBoundingClientRect(), i = n.getBoundingClientRect();
 			return {
@@ -1568,26 +1704,26 @@ var Ce = /* @__PURE__ */ l({
 				"--vibe-reel-origin-left": `${Math.max(0, i.left - r.left)}px`
 			};
 		}
-		function oe() {
-			d.state.reelOrigin === "masonry" && (L ??= d.state.activeReelPostId, w.value = !0, p("closeReel"));
+		function ce() {
+			u.state.reelOrigin === "masonry" && (R ??= u.state.activeReelPostId, S.value = !0, d("closeReel"));
 		}
-		function se() {
-			let e = L, t = R;
-			w.value = !1, L = null, R = !1, C.value = {}, f(() => {
-				e !== null && X(e, t);
+		function le() {
+			let e = R, t = z;
+			S.value = !1, R = null, z = !1, x.value = {}, p(() => {
+				e !== null && oe(e, t);
 			});
 		}
-		function ce(e) {
-			let t = d.state.layout === "reel" || d.state.reelOrigin === "masonry";
-			if (e.key === "Escape" && d.state.reelOrigin === "masonry") {
-				e.preventDefault(), oe();
+		function ue(e) {
+			let t = u.state.layout === "reel" || u.state.reelOrigin === "masonry";
+			if (e.key === "Escape" && u.state.reelOrigin === "masonry") {
+				e.preventDefault(), ce();
 				return;
 			}
-			if (e.key === "Escape" && t && d.state.reelInfoSheet.enabled) {
-				e.preventDefault(), p("reelInfoSheetChange", !1);
+			if (e.key === "Escape" && t && u.state.reelInfoSheet.enabled) {
+				e.preventDefault(), d("reelInfoSheetChange", !1);
 				return;
 			}
-			if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || w.value || d.state.layout !== "reel" && d.state.reelOrigin !== "masonry") return;
+			if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || S.value || u.state.layout !== "reel" && u.state.reelOrigin !== "masonry") return;
 			let n = e.target;
 			if (n instanceof HTMLElement && (n.isContentEditable || [
 				"INPUT",
@@ -1595,64 +1731,82 @@ var Ce = /* @__PURE__ */ l({
 				"TEXTAREA"
 			].includes(n.tagName))) return;
 			let r = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0;
-			r !== 0 && y.value?.changeActiveMedia?.(r) && e.preventDefault();
+			r !== 0 && m.value?.changeActiveMedia?.(r) && e.preventDefault();
 		}
-		return E(() => d.state.items.map((e) => e.postId), (e) => {
-			let t = e.filter((e) => !F.has(e));
-			if (F = new Set(e), t.length === 0 || z()) return;
+		return D(() => u.state.items.map((e) => e.postId), (e) => {
+			let t = e.filter((e) => !I.has(e));
+			if (I = new Set(e), t.length === 0 || B()) return;
 			let n = /* @__PURE__ */ new Map();
 			e.forEach((e) => {
-				let t = O.value.get(e);
+				let t = T.value.get(e);
 				t !== void 0 && n.set(e, t);
 			}), t.forEach((e, t) => {
-				n.set(e, t * ht);
-			}), O.value = n, T.value = new Set([...T.value, ...t]), B();
-		}, { flush: "sync" }), _(() => window.addEventListener("keydown", ce)), g(() => {
-			window.removeEventListener("keydown", ce), I !== null && cancelAnimationFrame(I);
-		}), l({
-			changeActiveReelMedia: te,
-			getAutoScrollElement: re,
-			loadIfNearBottom: Y,
-			moveActiveReelPost: ne
-		}), (n, l) => (v(), o("div", {
+				n.set(e, t * vt);
+			}), T.value = n, w.value = new Set([...w.value, ...t]), V();
+		}, { flush: "sync" }), v(() => window.addEventListener("keydown", ue)), _(() => {
+			window.removeEventListener("keydown", ue), L !== null && cancelAnimationFrame(L);
+		}), s({
+			changeActiveReelMedia: Y,
+			getAutoScrollElement: ae,
+			loadIfNearBottom: J,
+			moveActiveReelPost: ie
+		}), (n, s) => (y(), o("div", {
 			ref_key: "surfaceElement",
-			ref: x,
+			ref: b,
 			class: "vibe-surface"
-		}, [r.state.error ? (v(), o("main", ft, [...l[10] ||= [s("p", { class: "gallery-status" }, " Unable to load media. ", -1)]])) : r.state.isLoading ? (v(), o("main", pt, [...l[11] ||= [s("p", { class: "gallery-status" }, " Loading media… ", -1)]])) : r.state.items.length === 0 ? (v(), o("main", mt, [...l[12] ||= [s("p", { class: "gallery-status" }, " No media found. ", -1)]])) : r.state.layout === "reel" ? (v(), i(dt, {
-			key: 3,
+		}, [r.state.error || r.state.isLoading || r.state.items.length === 0 ? (y(), i(G, {
+			key: 0,
+			actions: r.feedFooterActions,
+			"can-retry-end": r.canRetryEnd,
+			"feed-footer": r.feedFooter,
+			state: j.value,
+			onLoadMore: s[0] ||= (e) => d("loadMore"),
+			onRetryEnd: s[1] ||= (e) => d("retryEnd")
+		}, null, 8, [
+			"actions",
+			"can-retry-end",
+			"feed-footer",
+			"state"
+		])) : r.state.layout === "reel" ? (y(), i(_t, {
+			key: 1,
 			ref_key: "reelRenderer",
-			ref: y,
+			ref: m,
 			"can-retry-end": r.canRetryEnd,
 			"has-next": r.state.next !== null,
 			"card-footer": r.cardFooter,
 			"card-header": r.cardHeader,
+			"feed-footer": r.feedFooter,
+			"feed-footer-actions": r.feedFooterActions,
 			"infinite-scroll": r.state.infiniteScroll,
 			"is-loading-more": r.state.isLoadingMore,
 			items: r.state.items,
 			"load-more-locked": r.state.loadMoreLocked,
 			"media-source": r.state.reelMediaSource,
-			"media-indices": k.value,
+			"media-indices": E.value,
 			"initial-post-id": r.state.activeReelPostId,
 			"info-sheet": r.reelInfoSheet,
 			"info-sheet-enabled": r.state.reelInfoSheet.enabled,
 			"info-sheet-overlay": r.state.reelInfoSheetOverlay,
 			"next-page-error": !!r.state.nextPageError,
 			origin: "reel",
-			"preview-states": P.value,
+			"preview-states": N.value,
 			"reel-auto-advance": r.state.reelAutoAdvance,
+			state: j.value,
 			total: r.state.total,
-			onActiveChange: l[0] ||= (e) => p("activeReelChange", e),
-			onCloseInfoSheet: l[1] ||= (e) => p("reelInfoSheetChange", !1),
-			onError: ee,
-			onLoadMore: l[2] ||= (e) => p("loadMore"),
-			onMediaChange: J,
-			onReady: q,
-			onRetryEnd: l[3] ||= (e) => p("retryEnd")
+			onActiveChange: s[2] ||= (e) => d("activeReelChange", e),
+			onCloseInfoSheet: s[3] ||= (e) => d("reelInfoSheetChange", !1),
+			onError: ne,
+			onLoadMore: s[4] ||= (e) => d("loadMore"),
+			onMediaChange: q,
+			onReady: re,
+			onRetryEnd: s[5] ||= (e) => d("retryEnd")
 		}, null, 8, [
 			"can-retry-end",
 			"has-next",
 			"card-footer",
 			"card-header",
+			"feed-footer",
+			"feed-footer-actions",
 			"infinite-scroll",
 			"is-loading-more",
 			"items",
@@ -1666,37 +1820,43 @@ var Ce = /* @__PURE__ */ l({
 			"next-page-error",
 			"preview-states",
 			"reel-auto-advance",
+			"state",
 			"total"
-		])) : (v(), o(e, { key: 4 }, [c(tt, {
+		])) : (y(), o(e, { key: 2 }, [l(st, {
 			ref_key: "masonryRenderer",
-			ref: m,
+			ref: f,
 			"can-retry-end": r.canRetryEnd,
-			"entering-post-ids": T.value,
-			"entry-delays": O.value,
+			"entering-post-ids": w.value,
+			"entry-delays": T.value,
 			"card-footer": r.cardFooter,
 			"card-header": r.cardHeader,
+			"feed-footer": r.feedFooter,
+			"feed-footer-actions": r.feedFooterActions,
 			"has-next": r.state.next !== null,
 			"infinite-scroll": r.state.infiniteScroll,
 			"is-loading-more": r.state.isLoadingMore,
 			items: r.state.items,
 			"load-more-locked": r.state.loadMoreLocked,
-			"media-indices": k.value,
+			"media-indices": E.value,
 			"next-page-error": !!r.state.nextPageError,
-			"preview-states": A.value,
-			suspended: r.state.reelOrigin === "masonry" || w.value,
+			"preview-states": k.value,
+			suspended: r.state.reelOrigin === "masonry" || S.value,
+			state: j.value,
 			total: r.state.total,
-			onActivate: ie,
-			onError: U,
-			onLoadMore: l[4] ||= (e) => p("loadMore"),
-			onMediaChange: J,
-			onReady: W,
-			onRetryEnd: l[5] ||= (e) => p("retryEnd")
+			onActivate: X,
+			onError: W,
+			onLoadMore: s[6] ||= (e) => d("loadMore"),
+			onMediaChange: q,
+			onReady: ee,
+			onRetryEnd: s[7] ||= (e) => d("retryEnd")
 		}, null, 8, [
 			"can-retry-end",
 			"entering-post-ids",
 			"entry-delays",
 			"card-footer",
 			"card-header",
+			"feed-footer",
+			"feed-footer-actions",
 			"has-next",
 			"infinite-scroll",
 			"is-loading-more",
@@ -1706,27 +1866,30 @@ var Ce = /* @__PURE__ */ l({
 			"next-page-error",
 			"preview-states",
 			"suspended",
+			"state",
 			"total"
-		]), c(t, {
+		]), l(t, {
 			name: "vibe-reel-viewer",
-			onAfterLeave: se
+			onAfterLeave: le
 		}, {
-			default: D(() => [r.state.reelOrigin === "masonry" ? (v(), o("section", {
+			default: O(() => [r.state.reelOrigin === "masonry" ? (y(), o("section", {
 				key: 0,
 				ref_key: "reelOverlay",
-				ref: b,
+				ref: h,
 				class: "vibe-reel-overlay",
 				role: "dialog",
 				"aria-label": "Media viewer",
 				"aria-modal": "true",
 				tabindex: "-1",
-				style: h(C.value)
-			}, [c(dt, {
+				style: g(x.value)
+			}, [l(_t, {
 				ref_key: "reelRenderer",
-				ref: y,
+				ref: m,
 				"can-retry-end": r.canRetryEnd,
 				"card-footer": r.cardFooter,
 				"card-header": r.cardHeader,
+				"feed-footer": r.feedFooter,
+				"feed-footer-actions": r.feedFooterActions,
 				"has-next": r.state.next !== null,
 				"infinite-scroll": r.state.infiniteScroll,
 				"initial-post-id": r.state.activeReelPostId,
@@ -1736,24 +1899,27 @@ var Ce = /* @__PURE__ */ l({
 				"is-loading-more": r.state.isLoadingMore,
 				items: r.state.items,
 				"load-more-locked": r.state.loadMoreLocked,
-				"media-indices": k.value,
+				"media-indices": E.value,
 				"media-source": "original",
 				"next-page-error": !!r.state.nextPageError,
 				origin: "masonry",
-				"preview-states": M.value,
+				"preview-states": A.value,
 				"reel-auto-advance": r.state.reelAutoAdvance,
+				state: j.value,
 				total: r.state.total,
-				onActiveChange: l[6] ||= (e) => p("activeReelChange", e),
-				onCloseInfoSheet: l[7] ||= (e) => p("reelInfoSheetChange", !1),
-				onError: G,
-				onLoadMore: l[8] ||= (e) => p("loadMore"),
-				onMediaChange: J,
-				onReady: K,
-				onRetryEnd: l[9] ||= (e) => p("retryEnd")
+				onActiveChange: s[8] ||= (e) => d("activeReelChange", e),
+				onCloseInfoSheet: s[9] ||= (e) => d("reelInfoSheetChange", !1),
+				onError: K,
+				onLoadMore: s[10] ||= (e) => d("loadMore"),
+				onMediaChange: q,
+				onReady: te,
+				onRetryEnd: s[11] ||= (e) => d("retryEnd")
 			}, null, 8, [
 				"can-retry-end",
 				"card-footer",
 				"card-header",
+				"feed-footer",
+				"feed-footer-actions",
 				"has-next",
 				"infinite-scroll",
 				"initial-post-id",
@@ -1767,6 +1933,7 @@ var Ce = /* @__PURE__ */ l({
 				"next-page-error",
 				"preview-states",
 				"reel-auto-advance",
+				"state",
 				"total"
 			])], 4)) : a("", !0)]),
 			_: 1
@@ -1775,7 +1942,7 @@ var Ce = /* @__PURE__ */ l({
 });
 //#endregion
 //#region src/core/page.ts
-function _t(e) {
+function bt(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.");
@@ -1787,32 +1954,32 @@ function Q(e, t) {
 }
 //#endregion
 //#region src/core/requestDelay.ts
-var vt = 2e3, yt = 1e4, bt = 250, xt = {
+var xt = 2e3, St = 1e4, Ct = 250, wt = {
 	delayRemainingMs: null,
 	nextRequestAt: null
 };
-function St(e, t) {
+function Tt(e, t) {
 	return e === void 0 ? t : Math.floor(e);
 }
-function Ct(e, t) {
+function Et(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 wt(e, t = {}) {
-	let n = St(t.delayStepMs, vt), r = St(t.delayMaxMs, yt);
+function Dt(e, t = {}) {
+	let n = Tt(t.delayStepMs, xt), r = Tt(t.delayMaxMs, St);
 	return Math.min(Math.max(0, e) * n, r);
 }
 function $(e) {
-	if (e == null || !Number.isFinite(e)) return { ...xt };
+	if (e == null || !Number.isFinite(e)) return { ...wt };
 	let t = Math.max(0, Math.floor(e - Date.now()));
 	return t > 0 ? {
 		delayRemainingMs: t,
 		nextRequestAt: e
-	} : { ...xt };
+	} : { ...wt };
 }
-async function Tt({ delayMs: e, onChange: t, signal: n }) {
+async function Ot({ delayMs: e, onChange: t, signal: n }) {
 	if (n.aborted) throw new DOMException("Aborted", "AbortError");
 	if (e <= 0) {
-		t({ ...xt });
+		t({ ...wt });
 		return;
 	}
 	let r = Date.now() + e;
@@ -1820,9 +1987,9 @@ async function Tt({ delayMs: e, onChange: t, signal: n }) {
 		delayRemainingMs: e,
 		nextRequestAt: r
 	}), await new Promise((i, a) => {
-		let o = !1, s = setInterval(f, bt), c = setTimeout(() => u(), e);
+		let o = !1, s = setInterval(f, Ct), c = setTimeout(() => u(), e);
 		function l() {
-			clearInterval(s), clearTimeout(c), n.removeEventListener("abort", d), t({ ...xt });
+			clearInterval(s), clearTimeout(c), n.removeEventListener("abort", d), t({ ...wt });
 		}
 		function u(e) {
 			o || (o = !0, l(), e ? a(e) : i());
@@ -1837,13 +2004,13 @@ async function Tt({ delayMs: e, onChange: t, signal: n }) {
 		n.addEventListener("abort", d, { once: !0 });
 	});
 }
-var Et = class {
+var kt = class {
 	interval = null;
 	constructor(e) {
 		this.onChange = e;
 	}
 	clear() {
-		this.interval !== null && clearInterval(this.interval), this.interval = null, this.onChange({ ...xt });
+		this.interval !== null && clearInterval(this.interval), this.interval = null, this.onChange({ ...wt });
 	}
 	sync(e) {
 		this.clear();
@@ -1851,21 +2018,24 @@ var Et = class {
 		this.onChange(t), t.delayRemainingMs !== null && (this.interval = setInterval(() => {
 			let t = $(e);
 			this.onChange(t), t.delayRemainingMs === null && this.clear();
-		}, bt));
+		}, Ct));
 	}
 };
-function Dt(e) {
+function At(e, t = !0) {
+	return e.maxAdditionalPages === "unlimited" ? Infinity : (e.maxAdditionalPages ?? 10) + (t ? 1 : 0);
+}
+function jt(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function Ot(e, t) {
+function Mt(e, t) {
 	if (!Number.isInteger(e) || e <= 0) throw TypeError(`Vibe ${t} must be a positive integer.`);
 }
-function kt(e) {
+function Nt(e) {
 	if (!e) return;
-	if (Ot(e.pageSize, "autofill pageSize"), e.strategy === "frontend") {
-		Ct(e, "frontend autofill");
+	if (Mt(e.pageSize, "autofill pageSize"), e.strategy === "frontend") {
+		Et(e, "frontend autofill");
 		let t = e.maxAdditionalPages;
-		if (t !== void 0 && (!Number.isInteger(t) || t < 0)) throw TypeError("Vibe autofill maxAdditionalPages must be a non-negative integer.");
+		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;
 	}
 	if (!e.feedKey.trim()) throw TypeError("Vibe backend autofill requires a feedKey.");
@@ -1875,7 +2045,7 @@ function kt(e) {
 		if (t.pageSize !== e.pageSize) throw TypeError("Vibe backend autofill initialSession pageSize must match autofill pageSize.");
 	}
 }
-function At(e, t, n = !0) {
+function Pt(e, t, n = !0) {
 	if (!e) return {
 		cycleId: null,
 		delayRemainingMs: null,
@@ -1909,7 +2079,7 @@ function At(e, t, n = !0) {
 		strategy: e.strategy
 	};
 }
-function jt(e) {
+function Ft(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -1917,9 +2087,9 @@ function jt(e) {
 		"waiting"
 	].includes(e.status);
 }
-async function Mt(e, t, n) {
+async function It(e, t, n) {
 	let r = t.autofill;
-	if (!jt(r) || !r.cycleId) return;
+	if (!Ft(r) || !r.cycleId) return;
 	let i = {
 		cycleId: r.cycleId,
 		feedKey: r.feedKey ?? "",
@@ -1932,20 +2102,20 @@ async function Mt(e, t, n) {
 		throw r.error = e, r.status = "error", e;
 	}
 }
-function Nt(e, t, n) {
+function Lt(e, t, n) {
 	return e?.strategy === "backend" && t.feedKey === e.feedKey && t.sessionId === n.sessionId;
 }
-async function Pt({ existingItems: e, initialCursor: t, loadPage: n, maximumRequests: r, onDelayChange: i, onProgress: a, options: o, receivedOffset: s = 0, requestOffset: c = 0, signal: l }) {
-	let u = [], d = [...e], f = /* @__PURE__ */ new Set(), p = r ?? 1 + (o.maxAdditionalPages ?? 10), m = t, h = t, g = 0, _;
+async function Rt({ existingItems: e, initialCursor: t, loadPage: n, maximumRequests: r, onDelayChange: i, onProgress: a, options: o, receivedOffset: s = 0, requestOffset: c = 0, signal: l }) {
+	let u = [], d = [...e], f = /* @__PURE__ */ new Set(), p = r ?? At(o), m = t, h = t, g = 0, _;
 	for (; g < p;) {
-		let e = Dt(m);
+		let e = jt(m);
 		if (f.has(e)) throw Error("Vibe autofill received a repeated cursor.");
-		f.add(e), await Tt({
-			delayMs: wt(c + g, o),
+		f.add(e), await Ot({
+			delayMs: Dt(c + g, o),
 			onChange: i,
 			signal: l
 		});
-		let t = _t(await n({
+		let t = bt(await n({
 			cursor: m,
 			signal: l
 		}));
@@ -1985,30 +2155,30 @@ async function Pt({ existingItems: e, initialCursor: t, loadPage: n, maximumRequ
 		total: _
 	};
 }
-var Ft = 100;
-function It(e, t) {
+var zt = 100;
+function Bt(e, t) {
 	if (!Number.isFinite(t) || t <= 0) throw TypeError(`Vibe ${e} must be a positive number.`);
 }
-function Lt(e, t, n) {
+function Vt(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function Rt(e) {
+function Ht(e) {
 	if (!e) return;
 	let t = e.minSpeedPxPerSecond ?? 20, n = e.maxSpeedPxPerSecond ?? 240;
-	if (It("autoScroll.minSpeedPxPerSecond", t), It("autoScroll.maxSpeedPxPerSecond", n), t > n) throw TypeError("Vibe autoScroll.minSpeedPxPerSecond cannot exceed maxSpeedPxPerSecond.");
-	e.speedPxPerSecond !== void 0 && It("autoScroll.speedPxPerSecond", e.speedPxPerSecond);
+	if (Bt("autoScroll.minSpeedPxPerSecond", t), Bt("autoScroll.maxSpeedPxPerSecond", n), t > n) throw TypeError("Vibe autoScroll.minSpeedPxPerSecond cannot exceed maxSpeedPxPerSecond.");
+	e.speedPxPerSecond !== void 0 && Bt("autoScroll.speedPxPerSecond", e.speedPxPerSecond);
 }
-function zt(e) {
+function Ut(e) {
 	let t = e?.minSpeedPxPerSecond ?? 20, n = e?.maxSpeedPxPerSecond ?? 240;
 	return {
 		enabled: e?.enabled ?? !1,
 		maxSpeedPxPerSecond: n,
 		minSpeedPxPerSecond: t,
 		paused: !1,
-		speedPxPerSecond: Lt(e?.speedPxPerSecond ?? 80, t, n)
+		speedPxPerSecond: Vt(e?.speedPxPerSecond ?? 80, t, n)
 	};
 }
-var Bt = class {
+var Wt = class {
 	frame = null;
 	lastTimestamp = null;
 	mounted = !1;
@@ -2028,9 +2198,9 @@ var Bt = class {
 		this.options.state.enabled && (this.options.state.paused = e, this.lastTimestamp = null, e ? this.cancelFrame() : this.schedule());
 	}
 	setSpeed(e) {
-		It("auto-scroll speed", e);
+		Bt("auto-scroll speed", e);
 		let t = this.options.state;
-		t.speedPxPerSecond = Lt(e, t.minSpeedPxPerSecond, t.maxSpeedPxPerSecond);
+		t.speedPxPerSecond = Vt(e, t.minSpeedPxPerSecond, t.maxSpeedPxPerSecond);
 	}
 	tick = (e) => {
 		this.frame = null;
@@ -2042,7 +2212,7 @@ var Bt = class {
 			return;
 		}
 		if (this.lastTimestamp !== null) {
-			let r = Math.min(Ft, Math.max(0, e - this.lastTimestamp)), i = Math.max(0, n.scrollHeight - n.clientHeight);
+			let r = Math.min(zt, 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();
@@ -2056,7 +2226,7 @@ var Bt = class {
 };
 //#endregion
 //#region src/core/backendAutofill.ts
-async function Vt(e, t, n, r) {
+async function Gt(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.");
@@ -2070,27 +2240,27 @@ async function Vt(e, t, n, r) {
 		status: "waiting"
 	});
 }
-function Ht(e, t) {
+function Kt(e, t) {
 	["complete", "exhausted"].includes(t.status) && t.items && (e.items = Q(e.items, t.items)), t.next !== void 0 && (e.next = t.next), t.total !== void 0 && (e.total = t.total);
 }
-function Ut(e, t, n) {
+function qt(e, t, n) {
 	let r = t.autofill;
-	return !Nt(e, n, r) || n.sequence <= r.sequence || ["cancelled", "cancelling"].includes(r.status) || ["complete", "exhausted"].includes(n.status) && n.next === void 0 ? !1 : (Ht(t, n), Object.assign(r, $(n.status === "waiting" ? n.nextRequestAt : null)), r.error = n.error ?? null, r.missing = Math.max(0, (r.pageSize ?? 0) - n.received), r.received = n.received, n.requests !== void 0 && (r.requests = n.requests), r.sequence = n.sequence, r.status = n.status, !0);
+	return !Lt(e, n, r) || n.sequence <= r.sequence || ["cancelled", "cancelling"].includes(r.status) || ["complete", "exhausted"].includes(n.status) && n.next === void 0 ? !1 : (Kt(t, n), Object.assign(r, $(n.status === "waiting" ? n.nextRequestAt : null)), r.error = n.error ?? null, r.missing = Math.max(0, (r.pageSize ?? 0) - n.received), r.received = n.received, n.requests !== void 0 && (r.requests = n.requests), r.sequence = n.sequence, r.status = n.status, !0);
 }
-function Wt(e, t, n) {
-	return e?.strategy !== "backend" || n.feedKey !== e.feedKey || n.pageSize !== e.pageSize ? !1 : (t.autofill = At(e, n), Ht(t, n), !0);
+function Jt(e, t, n) {
+	return e?.strategy !== "backend" || n.feedKey !== e.feedKey || n.pageSize !== e.pageSize ? !1 : (t.autofill = Pt(e, n), Kt(t, n), !0);
 }
-var Gt = 1.5;
-function Kt(e) {
+var Yt = 1.5;
+function Xt(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 * Gt;
+	let n = Math.min(e.viewportWidth, e.viewportHeight), r = t >= n * Yt;
 	return !e.hasHover && n > 0 && n < 600 && r;
 }
-function qt(e) {
-	return Kt(e) ? "reel" : "masonry";
+function Zt(e) {
+	return Xt(e) ? "reel" : "masonry";
 }
-function Jt(e) {
+function Qt(e) {
 	let t = e.ownerDocument.defaultView, n = e.ownerDocument.documentElement;
 	return {
 		hasHover: typeof t?.matchMedia == "function" && t.matchMedia("(hover: hover)").matches,
@@ -2100,15 +2270,15 @@ function Jt(e) {
 		viewportWidth: n.clientWidth
 	};
 }
-function Yt(e) {
-	return Kt(Jt(e));
+function $t(e) {
+	return Xt(Qt(e));
 }
-function Xt(e) {
-	return qt(Jt(e));
+function en(e) {
+	return Zt(Qt(e));
 }
 //#endregion
 //#region src/core/initialAutofill.ts
-async function Zt({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signal: i, state: a }) {
+async function tn({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signal: i, state: a }) {
 	let o = r.autofill;
 	if (!o) return;
 	let s = a.items.length;
@@ -2121,7 +2291,7 @@ async function Zt({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signa
 		return;
 	}
 	if (o.strategy === "backend") {
-		await Vt(o, a, {
+		await Gt(o, a, {
 			cycleId: e,
 			feedKey: o.feedKey,
 			items: [...a.items],
@@ -2138,11 +2308,11 @@ async function Zt({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signa
 		a.autofill.status = "exhausted";
 		return;
 	}
-	let c = await Pt({
+	let c = await Rt({
 		existingItems: a.items,
 		initialCursor: a.next,
 		loadPage: r.loadPage,
-		maximumRequests: o.maxAdditionalPages ?? 10,
+		maximumRequests: At(o, !1),
 		onDelayChange: (e) => {
 			t() && Object.assign(a.autofill, e);
 		},
@@ -2163,13 +2333,13 @@ async function Zt({ cycleId: e, isCurrent: t, onLastCursor: n, options: r, signa
 }
 //#endregion
 //#region src/core/fill.ts
-function Qt(e) {
+function nn(e) {
 	return "pages" in e ? { pages: e.pages } : { until: "end" };
 }
-function $t(e) {
+function rn(e) {
 	return `${typeof e}:${String(e)}`;
 }
-function en(e) {
+function an(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.");
@@ -2178,20 +2348,20 @@ function en(e) {
 	if ("until" in e && e.until === "end") return { until: "end" };
 	throw TypeError("Vibe fill target must be { pages } or { until: 'end' }.");
 }
-function tn(e) {
+function on(e) {
 	if (!e) return;
 	if (e.strategy === "frontend") {
-		Ct(e, "frontend fill");
+		Et(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.");
-		en(t.target);
+		an(t.target);
 	}
 }
-function nn(e, t, n = !0) {
+function sn(e, t, n = !0) {
 	let r = e?.strategy === "backend" && n ? e.initialSession : void 0, i = t ?? r, a = $(i?.nextRequestAt);
 	return {
 		completedPages: i?.completedPages ?? 0,
@@ -2205,10 +2375,10 @@ function nn(e, t, n = !0) {
 		sessionId: i?.sessionId ?? null,
 		status: i?.status ?? "idle",
 		strategy: e?.strategy ?? null,
-		target: i ? Qt(i.target) : null
+		target: i ? nn(i.target) : null
 	};
 }
-function rn(e) {
+function cn(e) {
 	return [
 		"cancelling",
 		"filling",
@@ -2216,17 +2386,17 @@ function rn(e) {
 		"waiting"
 	].includes(e.status);
 }
-async function an({ existingItems: e, initialCursor: t, loadPage: n, onDelayChange: r, onProgress: i, options: a, signal: o, target: s }) {
+async function ln({ existingItems: e, initialCursor: t, loadPage: n, onDelayChange: r, onProgress: i, options: a, signal: o, target: s }) {
 	let c = [], l = [...e], u = /* @__PURE__ */ new Set(), d = 0, f = t, p = t, m = 0, h;
 	for (; p !== null;) {
-		let e = $t(f);
+		let e = rn(f);
 		if (u.has(e)) throw Error("Vibe fill received a repeated cursor.");
-		u.add(e), await Tt({
-			delayMs: wt(d, a),
+		u.add(e), await Ot({
+			delayMs: Dt(d, a),
 			onChange: r,
 			signal: o
 		});
-		let t = _t(await n({
+		let t = bt(await n({
 			cursor: f,
 			signal: o
 		}));
@@ -2268,7 +2438,7 @@ async function an({ existingItems: e, initialCursor: t, loadPage: n, onDelayChan
 }
 //#endregion
 //#region src/core/backendFill.ts
-async function on(e, t, n, r) {
+async function un(e, t, n, r) {
 	let i = await e.onStart(n);
 	if (r()) {
 		if (!i.sessionId.trim()) throw TypeError("Vibe backend fill requires a sessionId.");
@@ -2282,22 +2452,22 @@ async function on(e, t, n, r) {
 		});
 	}
 }
-function sn(e, t, n) {
+function dn(e, t, n) {
 	return e?.strategy === "backend" && n.feedKey === e.feedKey && n.sessionId === t.fill.sessionId;
 }
-function cn(e) {
+function fn(e) {
 	return Number.isInteger(e.completedPages) && e.completedPages >= 0 && Number.isInteger(e.received) && e.received >= 0 && Number.isInteger(e.sequence) && e.sequence >= 0;
 }
-function ln(e, t) {
+function pn(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 un(e, t, n) {
+function mn(e, t, n) {
 	t.total !== void 0 && (e.total = t.total), ["complete", "exhausted"].includes(t.status) && (e.items = Q(e.items, t.items ?? []), e.next = t.next ?? null, n(t.lastCursor ?? null));
 }
-function dn(e, t, n, r) {
-	return !sn(e, t, n) || !cn(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !ln(t, n) ? !1 : (un(t, n, r), Object.assign(t.fill, {
+function hn(e, t, n, r) {
+	return !dn(e, t, n) || !fn(n) || n.sequence <= t.fill.sequence || ["cancelled", "cancelling"].includes(t.fill.status) || !pn(t, n) ? !1 : (mn(t, n, r), Object.assign(t.fill, {
 		...$(n.status === "waiting" ? n.nextRequestAt : null),
 		completedPages: n.completedPages,
 		error: n.error ?? null,
@@ -2306,41 +2476,41 @@ function dn(e, t, n, r) {
 		status: n.status
 	}), !0);
 }
-function fn(e, t, n, r) {
+function gn(e, t, n, r) {
 	if (e?.strategy !== "backend" || n.feedKey !== e.feedKey) return !1;
 	let i = t.fill;
-	return t.fill = nn(e, n), !cn(n) || !ln(t, n) ? (t.fill = i, !1) : (un(t, n, r), !0);
+	return t.fill = sn(e, n), !fn(n) || !pn(t, n) ? (t.fill = i, !1) : (mn(t, n, r), !0);
 }
 //#endregion
 //#region src/core/fillController.ts
-var pn = class {
+var _n = class {
 	abortController = null;
 	cycle = 0;
 	delayCountdown;
 	requestVersion = 0;
 	constructor(e) {
-		this.options = e, this.delayCountdown = new Et((e) => {
+		this.options = e, this.delayCountdown = new kt((e) => {
 			Object.assign(this.options.state.fill, e);
 		}), this.syncBackendCountdown();
 	}
 	isActive() {
-		return rn(this.options.state.fill);
+		return cn(this.options.state.fill);
 	}
 	applyUpdate(e) {
-		let t = dn(this.options.fill, this.options.state, e, this.options.onLastCursor);
+		let t = hn(this.options.fill, this.options.state, e, this.options.onLastCursor);
 		return t && this.syncBackendCountdown(), t;
 	}
 	restoreSession(e) {
-		let t = fn(this.options.fill, this.options.state, e, this.options.onLastCursor);
+		let t = gn(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 = en(e), r = `vibe-fill-${Date.now().toString(36)}-${++this.cycle}`;
+		let n = an(e), r = `vibe-fill-${Date.now().toString(36)}-${++this.cycle}`;
 		if (this.options.state.fill = {
-			...nn(t, void 0, !1),
+			...sn(t, void 0, !1),
 			cycleId: r,
 			status: "filling",
 			target: n
@@ -2351,7 +2521,7 @@ var pn = class {
 		let i = ++this.requestVersion, a = new AbortController();
 		this.abortController = a;
 		try {
-			t.strategy === "frontend" ? await this.startFrontend(t, n, a, i) : (await on(t, this.options.state, {
+			t.strategy === "frontend" ? await this.startFrontend(t, n, a, i) : (await un(t, this.options.state, {
 				cycleId: r,
 				feedKey: t.feedKey,
 				items: [...this.options.state.items],
@@ -2369,7 +2539,7 @@ var pn = class {
 	}
 	async cancel() {
 		let { fill: e, state: t } = this.options;
-		if (!rn(t.fill) || !t.fill.cycleId) return;
+		if (!cn(t.fill) || !t.fill.cycleId) return;
 		let n = {
 			cycleId: t.fill.cycleId,
 			feedKey: t.fill.feedKey ?? "",
@@ -2383,7 +2553,7 @@ var pn = class {
 		}
 	}
 	reset() {
-		this.abortLocalRequest(), this.delayCountdown.clear(), this.options.state.fill = nn(this.options.fill, void 0, !1);
+		this.abortLocalRequest(), this.delayCountdown.clear(), this.options.state.fill = sn(this.options.fill, void 0, !1);
 	}
 	destroy() {
 		this.abortLocalRequest(), this.delayCountdown.clear();
@@ -2399,7 +2569,7 @@ var pn = class {
 		if (!i) throw Error("Vibe frontend fill requires loadPage.");
 		let a = this.options.state;
 		a.isLoadingMore = !0;
-		let o = await an({
+		let o = await ln({
 			existingItems: a.items,
 			initialCursor: a.next,
 			loadPage: i,
@@ -2424,45 +2594,55 @@ var pn = class {
 		this.delayCountdown.sync(e.strategy === "backend" && e.status === "waiting" ? e.nextRequestAt : null);
 	}
 };
-function mn(e) {
+//#endregion
+//#region src/core/feedFooter.ts
+function vn(e) {
+	return {
+		cancelAutofill: () => e.cancelAutofill(),
+		loadMore: () => e.loadNext(),
+		retry: () => e.reload(),
+		retryEnd: () => e.retryEnd()
+	};
+}
+function yn(e) {
 	if (!Number.isFinite(e) || e <= 0) throw TypeError("Vibe reelAutoAdvance.intervalMs must be a positive number.");
 }
-function hn(e) {
-	e?.intervalMs !== void 0 && mn(e.intervalMs);
+function bn(e) {
+	e?.intervalMs !== void 0 && yn(e.intervalMs);
 }
-function gn(e) {
+function xn(e) {
 	return {
 		enabled: e?.enabled ?? !1,
 		includePostItems: e?.includePostItems ?? !1,
 		intervalMs: e?.intervalMs ?? 5e3
 	};
 }
-function _n(e, t) {
+function Sn(e, t) {
 	if (typeof t == "boolean") {
 		e.enabled = t;
 		return;
 	}
-	hn(t), t.enabled !== void 0 && (e.enabled = t.enabled), t.includePostItems !== void 0 && (e.includePostItems = t.includePostItems), t.intervalMs !== void 0 && (e.intervalMs = t.intervalMs);
+	bn(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 vn(e) {
+function Cn(e) {
 	return { enabled: e?.enabled ?? !1 };
 }
-function yn(e, t, n) {
+function wn(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 bn(e, t) {
+function Tn(e, t) {
 	let n = e.initialPage;
 	return {
 		activeReelPostId: null,
-		autoScroll: zt(e.autoScroll),
-		autofill: At(e.autofill),
+		autoScroll: Ut(e.autoScroll),
+		autofill: Pt(e.autofill),
 		error: null,
-		fill: nn(e.fill),
+		fill: sn(e.fill),
 		infiniteScroll: e.infiniteScroll ?? !0,
 		isLoading: !n,
 		isLoadingMore: !1,
@@ -2471,8 +2651,8 @@ function bn(e, t) {
 		loadMoreLocked: !1,
 		next: n?.next ?? null,
 		nextPageError: null,
-		reelAutoAdvance: gn(e.reelAutoAdvance),
-		reelInfoSheet: vn(e.reelInfoSheet),
+		reelAutoAdvance: xn(e.reelAutoAdvance),
+		reelInfoSheet: Cn(e.reelInfoSheet),
 		reelInfoSheetOverlay: !1,
 		reelMediaSource: "original",
 		reelOrigin: null,
@@ -2481,16 +2661,19 @@ function bn(e, t) {
 }
 //#endregion
 //#region src/core/options.ts
-function xn(e, t) {
-	if (t && (!Number.isFinite(t.height) || t.height <= 0)) throw TypeError(`Vibe ${e} height must be a positive number.`);
+function En(e, t) {
+	if (t) {
+		if (!Number.isFinite(t.height) || t.height <= 0) throw TypeError(`Vibe ${e} height must be a positive number.`);
+		if (t.background !== void 0 && t.background !== "default" && t.background !== "transparent") throw TypeError(`Vibe ${e} background must be "default" or "transparent".`);
+	}
 }
-function Sn(e) {
-	if (Rt(e.autoScroll), xn("cardHeader", e.cardHeader), xn("cardFooter", e.cardFooter), kt(e.autofill), tn(e.fill), hn(e.reelAutoAdvance), !e.initialPage && !e.loadPage) throw TypeError("Vibe requires either initialPage or loadPage.");
+function Dn(e) {
+	if (Ht(e.autoScroll), En("cardHeader", e.cardHeader), En("cardFooter", e.cardFooter), Nt(e.autofill), on(e.fill), bn(e.reelAutoAdvance), !e.initialPage && !e.loadPage) throw TypeError("Vibe requires either initialPage or loadPage.");
 	if (e.initialPage?.next !== null && !e.loadPage) throw TypeError("Vibe requires loadPage when initialPage has a next cursor.");
 	if (e.fill?.strategy === "frontend" && !e.loadPage) throw TypeError("Vibe frontend fill requires loadPage.");
 	if (e.fill?.strategy === "backend" && e.fill.initialSession && !e.initialPage) throw TypeError("Vibe backend fill restoration requires initialPage.");
 }
-function Cn(e) {
+function On(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);
@@ -2499,7 +2682,7 @@ function Cn(e) {
 }
 //#endregion
 //#region src/core/vibeRouting.ts
-var wn = class {
+var kn = class {
 	routedReelPostId = null;
 	reelRouteIsActive = !1;
 	constructor(e, t) {
@@ -2526,37 +2709,7 @@ var wn = class {
 		let i = this.reelRouteIsActive ? "replace" : "push";
 		this.reelRouteIsActive = !0, this.routedReelPostId = e, this.options.router[i](r);
 	}
-};
-//#endregion
-//#region src/core/runtime.ts
-function Tn(e) {
-	return {
-		activeReelPostId: e.activeReelPostId,
-		autoScroll: { ...e.autoScroll },
-		autofill: { ...e.autofill },
-		error: e.error,
-		fill: {
-			...e.fill,
-			target: e.fill.target ? { ...e.fill.target } : null
-		},
-		infiniteScroll: e.infiniteScroll,
-		isLoading: e.isLoading,
-		isLoadingMore: e.isLoadingMore,
-		items: [...e.items],
-		layout: e.layout,
-		lifecycle: e.isLoading || e.isLoadingMore ? "loading" : e.error || e.nextPageError ? "error" : "loaded",
-		loadMoreLocked: e.loadMoreLocked,
-		next: e.next,
-		nextPageError: e.nextPageError,
-		reelAutoAdvance: { ...e.reelAutoAdvance },
-		reelInfoSheet: { ...e.reelInfoSheet },
-		reelOrigin: e.reelOrigin,
-		total: e.total
-	};
-}
-//#endregion
-//#region src/core/createVibe.ts
-var En = class {
+}, An = class {
 	app = null;
 	autoScroll;
 	autofillDelayCountdown;
@@ -2574,26 +2727,28 @@ var En = class {
 	lastLoadedCursor = null;
 	state;
 	constructor(e) {
-		this.options = e, Sn(e), this.layoutMode = e.layout ?? "masonry", this.state = y(bn(e, this.layoutMode)), this.autoScroll = new Bt({
+		this.options = e, Dn(e), this.layoutMode = e.layout ?? "masonry", this.state = b(Tn(e, this.layoutMode)), this.autoScroll = new Wt({
 			getScrollElement: () => this.surface?.getAutoScrollElement() ?? null,
 			state: this.state.autoScroll
-		}), this.autofillDelayCountdown = new Et((e) => Object.assign(this.state.autofill, e)), this.syncAutofillCountdown(), this.fillController = new pn({
+		}), this.autofillDelayCountdown = new kt((e) => Object.assign(this.state.autofill, e)), this.syncAutofillCountdown(), this.fillController = new _n({
 			fill: e.fill,
 			loadPage: e.loadPage,
 			onLastCursor: (e) => {
 				this.lastLoadedCursor = e;
 			},
 			state: this.state
-		}), this.routing = new wn(e.routing, this.state), this.startStateNotifications();
+		}), this.routing = new kn(e.routing, this.state), this.startStateNotifications();
 	}
 	async mount() {
 		if (this.app) throw Error("Vibe is already mounted.");
 		this.startStateNotifications();
-		let e = Cn(this.options.target);
-		this.target = e, this.startResponsiveLayout(), this.app = r(gt, {
+		let e = On(this.options.target);
+		this.target = e, this.startResponsiveLayout(), this.app = r(yt, {
 			canRetryEnd: !!this.options.loadPage,
 			cardFooter: this.options.cardFooter,
 			cardHeader: this.options.cardHeader,
+			feedFooter: this.options.feedFooter,
+			feedFooterActions: vn(this),
 			reelInfoSheet: this.options.reelInfoSheet,
 			state: this.state,
 			onActiveReelChange: (e) => this.setActiveReelPost(e),
@@ -2612,7 +2767,7 @@ var En = class {
 		this.autoScroll.destroy(), this.fillController.destroy(), this.cancelRequest(), this.stopResponsiveLayout(), this.stopStateWatcher?.(), this.stopStateWatcher = null, this.app?.unmount(), this.app = null, this.surface = null, this.target = null;
 	}
 	getState() {
-		return Tn(this.state);
+		return F(this.state);
 	}
 	nextReelMediaItem() {
 		return this.surface?.changeActiveReelMedia(1) ?? !1;
@@ -2639,11 +2794,11 @@ var En = class {
 		this.autoScroll.setSpeed(e);
 	}
 	applyAutofillUpdate(e) {
-		let t = Ut(this.options.autofill, this.state, e);
+		let t = qt(this.options.autofill, this.state, e);
 		return t && this.syncAutofillCountdown(), t;
 	}
 	async cancelAutofill() {
-		await Mt(this.options.autofill, this.state, () => this.cancelRequest());
+		await It(this.options.autofill, this.state, () => this.cancelRequest());
 	}
 	applyFillUpdate(e) {
 		return this.fillController.applyUpdate(e);
@@ -2652,11 +2807,11 @@ var En = class {
 		return this.fillController.cancel();
 	}
 	async fill(e) {
-		if (this.pendingRequest || jt(this.state.autofill)) throw Error("Vibe cannot fill while another page operation is active.");
+		if (this.pendingRequest || Ft(this.state.autofill)) throw Error("Vibe cannot fill while another page operation is active.");
 		await this.fillController.start(e);
 	}
 	restoreAutofillSession(e) {
-		let t = Wt(this.options.autofill, this.state, e);
+		let t = Jt(this.options.autofill, this.state, e);
 		return t && this.syncAutofillCountdown(), t;
 	}
 	restoreFillSession(e) {
@@ -2664,27 +2819,27 @@ var En = class {
 	}
 	async loadNext() {
 		if (this.pendingRequest) return this.pendingRequest;
-		if (!this.state.loadMoreLocked && !(jt(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.state.next, !0);
+		if (!this.state.loadMoreLocked && !(Ft(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.state.next, !0);
 	}
 	async reload() {
 		if (!this.options.loadPage) throw Error("Vibe cannot reload without loadPage.");
-		return jt(this.state.autofill) && await this.cancelAutofill(), this.fillController.isActive() && await this.cancelFill(), this.cancelRequest(), this.state.autofill = At(this.options.autofill, void 0, !1), this.fillController.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(null, !1);
+		return Ft(this.state.autofill) && await this.cancelAutofill(), this.fillController.isActive() && await this.cancelFill(), this.cancelRequest(), this.state.autofill = Pt(this.options.autofill, void 0, !1), this.fillController.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(null, !1);
 	}
 	async retryEnd() {
 		if (this.pendingRequest) return this.pendingRequest;
-		if (!this.state.loadMoreLocked && !(jt(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 && !(Ft(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 && f(() => this.surface?.loadIfNearBottom());
+		this.state.infiniteScroll = e, e && p(() => this.surface?.loadIfNearBottom());
 	}
 	setLoadMoreLocked(e) {
-		this.state.loadMoreLocked !== e && (this.state.loadMoreLocked = e, !e && this.state.infiniteScroll && f(() => this.surface?.loadIfNearBottom()));
+		this.state.loadMoreLocked !== e && (this.state.loadMoreLocked = e, !e && this.state.infiniteScroll && p(() => this.surface?.loadIfNearBottom()));
 	}
 	setReelAutoAdvance(e) {
-		_n(this.state.reelAutoAdvance, e);
+		Sn(this.state.reelAutoAdvance, e);
 	}
 	setReelInfoSheet(e) {
-		yn(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
+		wn(this.state.reelInfoSheet, this.options.reelInfoSheet, e);
 	}
 	setLayout(e) {
 		e !== this.layoutMode && (this.layoutMode = e, e === "responsive" ? this.handleResponsiveLayout() : this.applyLayout(e));
@@ -2694,8 +2849,8 @@ var En = class {
 	}
 	handleResponsiveLayout = () => {
 		if (!this.target) return;
-		let e = Xt(this.target);
-		this.state.reelInfoSheetOverlay = Yt(this.target), this.state.reelMediaSource = e === "reel" ? "preview" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
+		let e = en(this.target);
+		this.state.reelInfoSheetOverlay = $t(this.target), this.state.reelMediaSource = e === "reel" ? "preview" : "original", this.layoutMode === "responsive" && this.applyLayout(e);
 	};
 	startResponsiveLayout() {
 		if (!this.target) return;
@@ -2727,7 +2882,7 @@ var En = class {
 		this.abortController = i;
 		try {
 			if (a?.strategy === "frontend") {
-				let o = await Pt({
+				let o = await Rt({
 					existingItems: t ? this.state.items : [],
 					initialCursor: e,
 					loadPage: n,
@@ -2749,7 +2904,7 @@ var En = class {
 				});
 				return;
 			}
-			let c = _t(await n({
+			let c = bt(await n({
 				cursor: e,
 				signal: i.signal
 			}));
@@ -2764,7 +2919,7 @@ var En = class {
 					this.state.autofill.status = "complete";
 					return;
 				}
-				await Vt(a, this.state, {
+				await Gt(a, this.state, {
 					cycleId: o,
 					feedKey: a.feedKey,
 					items: u.slice(l.length),
@@ -2789,7 +2944,7 @@ var En = class {
 		this.autofillDelayCountdown.clear();
 		let t = `vibe-autofill-${Date.now().toString(36)}-${++this.autofillCycle}`;
 		return this.state.autofill = {
-			...At(e, void 0, !1),
+			...Pt(e, void 0, !1),
 			cycleId: t,
 			status: "filling"
 		}, t;
@@ -2807,7 +2962,7 @@ var En = class {
 	startInitialAutofill() {
 		let e = ++this.requestVersion, t = new AbortController(), n = this.beginAutofillCycle();
 		this.abortController = t, this.state.isLoadingMore = !0;
-		let r = Zt({
+		let r = tn({
 			cycleId: n,
 			isCurrent: () => e === this.requestVersion,
 			onLastCursor: (e) => {
@@ -2825,14 +2980,14 @@ var En = class {
 	}
 	startStateNotifications() {
 		let e = this.options.onStateChange;
-		!e || this.stopStateWatcher || (e(this.getState()), this.stopStateWatcher = E(this.state, () => e(this.getState()), {
+		!e || this.stopStateWatcher || (e(this.getState()), this.stopStateWatcher = D(this.state, () => e(this.getState()), {
 			deep: !0,
 			flush: "post"
 		}));
 	}
 };
-function Dn(e) {
-	return new En(e);
+function jn(e) {
+	return new An(e);
 }
 //#endregion
-export { Dn as createVibe };
+export { jn as createVibe };