@mundogamernetwork/shared-ui 1.3.7 → 1.4.1

package/components/indie-wall/StepPackage.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { locale } = useI18n()
+
 const props = defineProps<{
 	tiers: any[]
 	selectedTierId: number | null
@@ -7,6 +9,14 @@ const props = defineProps<{
 	currency: string
 }>()
 
+function formatMoney(amount: number, currency?: string | null) {
+	try {
+		return new Intl.NumberFormat(locale.value, { style: 'currency', currency: currency || 'USD' }).format(amount)
+	} catch {
+		return `${currency || ''} ${Number(amount).toFixed(2)}`.trim()
+	}
+}
+
 const emit = defineEmits<{
 	(e: 'select-tier', tierId: number | null, pixelCount: number): void
 	(e: 'set-custom', qty: number): void
@@ -51,7 +61,7 @@ function tierUnavailable(tier: any) {
 			>
 				<img v-if="tier.image_url" :src="tier.image_url" alt="" class="sw-tier-img" />
 				<span class="sw-card-title">{{ tier.name }}</span>
-				<span class="sw-card-price">{{ currency }} {{ Number(tier.price).toFixed(2) }}</span>
+				<span class="sw-card-price">{{ formatMoney(Number(tier.price), tier.currency || currency) }}</span>
 				<span class="sw-card-pixels">{{ tier.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
 				<p v-if="tier.description" class="sw-card-desc">{{ tier.description }}</p>
 				<span v-if="tier.max_quantity" class="sw-card-stock">
@@ -65,10 +75,10 @@ function tierUnavailable(tier: any) {
 				<div class="sw-custom-row">
 					<input v-model.number="localQty" type="number" min="1" class="sw-custom-input" />
 					<span class="sw-custom-x">×</span>
-					<span class="sw-custom-price">{{ currency }} {{ Number(pixelPrice).toFixed(2) }}</span>
+					<span class="sw-custom-price">{{ formatMoney(Number(pixelPrice), currency) }}</span>
 				</div>
 				<div class="sw-custom-total">
-					= {{ currency }} {{ (Math.max(1, localQty) * pixelPrice).toFixed(2) }}
+					= {{ formatMoney(Math.max(1, localQty) * pixelPrice, currency) }}
 				</div>
 				<button type="button" class="sw-custom-cta" @click="pickCustom">
 					{{ $t('tv.dashboard.indie_wall.step_package_custom_cta') }}

package/components/indie-wall/StepPay.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { locale } = useI18n()
+
 const props = defineProps<{
 	wall: any
 	selectedGoal: any | null
@@ -30,6 +32,14 @@ const total = computed(() => {
 })
 const agreed = ref(false)
 const agreedRights = ref(false)
+
+function formatMoney(amount: number, currency?: string | null) {
+	try {
+		return new Intl.NumberFormat(locale.value, { style: 'currency', currency: currency || 'USD' }).format(amount)
+	} catch {
+		return `${currency || ''} ${Number(amount).toFixed(2)}`.trim()
+	}
+}
 </script>
 
 <template>
@@ -96,7 +106,7 @@ const agreedRights = ref(false)
 
 		<div class="sw-total">
 			<span>{{ $t('tv.dashboard.indie_wall.step_pay_total') }}</span>
-			<strong>{{ wall?.currency }} {{ total.toFixed(2) }}</strong>
+			<strong>{{ formatMoney(total, selectedTier?.currency || wall?.currency) }}</strong>
 		</div>
 
 		<label class="sw-agree">

package/components/indie-wall/SupportStepper.vue

@@ -204,7 +204,11 @@ async function confirm() {
 </script>
 
 <template>
-	<div :class="['ss-overlay', { 'ss-overlay--drawer': drawer }]" @click.self="close">
+	<!-- No @click.self="close" on the backdrop: this is a checkout flow, and on
+	mobile a stray tap near the edges (e.g. reaching past a keyboard-shifted
+	viewport for the Continue button) must not silently discard a guest's
+	in-progress entry. Closing is only via the explicit × button. -->
+	<div :class="['ss-overlay', { 'ss-overlay--drawer': drawer }]">
 		<div :class="['ss-modal', { 'ss-modal--drawer': drawer }]">
 			<button class="ss-close" type="button" aria-label="Close" @click="close">×</button>
 
@@ -318,6 +322,10 @@ async function confirm() {
 	display: flex; align-items: center; gap: 6px;
 	font-size: 0.78rem; color: var(--secondary-info-fg, #aaa);
 	background: #13161C; padding: 6px 10px; border: 1px solid #1e2028;
+	// .ss-close is absolutely positioned at top:10/right:10 over the modal's
+	// padded corner; this bar starts at the padding edge (top:24) so without
+	// clearance its top ~14px sits directly under the close button.
+	margin-top: 20px;
 	strong { color: var(--chip-text, #D297FF); font-weight: 600; }
 }
 

package/components/ui/MgHeaderUIUser.vue

@@ -40,6 +40,15 @@ const login = () => {
 	window.location.href = `${accountsBaseUrl}/login?redirect_to=${redirectTo}`;
 };
 
+// Computed in script rather than read inline in the template: a bare `window`
+// reference in the template crashes the render (it's not part of the
+// script-setup bindings the compiled render function has access to, and it's
+// undefined during SSR), which took down this whole dropdown for every
+// signed-out visitor.
+const registerHref = computed(
+	() => `${accountsBaseUrl}/register?redirect_to=${encodeURIComponent(import.meta.client ? window.location.href : "")}`,
+);
+
 const handleLogout = async () => {
 	await performLogout(`${accountsBaseUrl}/login`);
 };
@@ -60,7 +69,7 @@ const handleLogout = async () => {
 					<div>
 						<p class="d-flex">
 							{{ $t("header.login.register_message") }}
-							<a :href="`${accountsBaseUrl}/register?redirect_to=${encodeURIComponent(window.location.href)}`" class="ms-1">
+							<a :href="registerHref" class="ms-1">
 								{{ $t("header.login.btn_register") }}
 							</a>
 						</p>

package/locales/de.json

@@ -207,7 +207,8 @@
       "resources_title": "Ressourcen",
       "press_kit_link": "Presse-Kit",
       "review_guideline": "Review-Richtlinie",
-      "embargo_date": "Sperrfrist"
+      "embargo_date": "Sperrfrist",
+      "pr_contact_label": "PR-Kontakt"
     },
     "materials": {
       "title": "Submit material",

package/locales/en.json

@@ -207,7 +207,8 @@
       "resources_title": "Resources",
       "press_kit_link": "Press Kit",
       "review_guideline": "Review guideline",
-      "embargo_date": "Embargo date"
+      "embargo_date": "Embargo date",
+      "pr_contact_label": "PR contact"
     },
     "materials": {
       "title": "Submit material",

package/locales/pt-BR.json

@@ -207,7 +207,8 @@
       "resources_title": "Recursos",
       "press_kit_link": "Press Kit",
       "review_guideline": "Diretriz de review",
-      "embargo_date": "Data de embargo"
+      "embargo_date": "Data de embargo",
+      "pr_contact_label": "Contato de imprensa"
     },
     "materials": {
       "title": "Submit material",

package/locales/ro.json

@@ -207,7 +207,8 @@
       "resources_title": "Resurse",
       "press_kit_link": "Press Kit",
       "review_guideline": "Ghid de recenzie",
-      "embargo_date": "Data embargo"
+      "embargo_date": "Data embargo",
+      "pr_contact_label": "Contact PR"
     },
     "materials": {
       "title": "Submit material",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.3.7",
+  "version": "1.4.1",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/[slug].vue

@@ -631,7 +631,11 @@ onMounted(async () => {
 
 				<!-- Cover when no game details -->
 				<div class="featured-cover" v-if="campaign?.cover">
-					<img :src="campaign.cover" :alt="campaign.name" />
+					<img
+						:src="campaign.cover"
+						:alt="campaign.name"
+						:style="{ objectPosition: `${(campaign.cover_focal_x ?? 0.5) * 100}% ${(campaign.cover_focal_y ?? 0.5) * 100}%` }"
+					/>
 				</div>
 
 				<div class="cards">
@@ -782,10 +786,10 @@ onMounted(async () => {
 								<div class="tag" :class="{ active: campaign?.streamer_type === 1 }">
 									<MGIcon icon="community" /> {{ $t("keys.campaigns.campaign.requirement.all") }}
 								</div>
-								<div class="tag" :class="{ active: campaign?.streamer_type === 2 || campaign?.streamer_type === 1 }">
+								<div class="tag" :class="{ active: campaign?.streamer_type === 2 }">
 									<MGIcon icon="verified" /> {{ $t("keys.campaigns.campaign.requirement.official") }}
 								</div>
-								<div class="tag" :class="{ active: campaign?.streamer_type === 3 || campaign?.streamer_type === 1 }">
+								<div class="tag" :class="{ active: campaign?.streamer_type === 3 }">
 									<MGIcon icon="partner" /> {{ $t("keys.campaigns.campaign.requirement.affiliate") }}
 								</div>
 							</div>
@@ -896,6 +900,20 @@ onMounted(async () => {
 										{{ campaign.email }}
 									</div>
 								</div>
+								<div class="badge-tag" v-if="campaign?.pr_contact_name || campaign?.pr_contact_email">
+									<div class="texts">
+										<div class="small">{{ $t("keys.campaigns.pr_contact_label") }}</div>
+										<template v-if="campaign.pr_contact_name && campaign.pr_contact_email">
+											{{ campaign.pr_contact_name }} — {{ campaign.pr_contact_email }}
+										</template>
+										<template v-else>{{ campaign.pr_contact_name || campaign.pr_contact_email }}</template>
+									</div>
+								</div>
+								<a v-if="campaign?.press_kit_link" :href="campaign.press_kit_link" target="_blank" rel="noopener noreferrer">
+									<div class="badge-tag">
+										<div class="texts">{{ $t("keys.campaigns.press_kit_link") }}</div>
+									</div>
+								</a>
 								<a v-if="campaign?.twitter" :href="campaign.twitter" target="_blank" rel="noopener noreferrer">
 									<div class="badge-tag w-48"><MGIcon icon="twitter-v2" /></div>
 								</a>
@@ -1044,7 +1062,7 @@ onMounted(async () => {
 		max-height: 400px;
 		overflow: hidden;
 		margin-bottom: 24px;
-		img { width: 100%; height: 400px; object-fit: cover; object-position: center top; }
+		img { width: 100%; height: 400px; object-fit: cover; }
 	}
 
 	.state.error {

package/pages/key-campaigns/index.vue

@@ -27,7 +27,11 @@
 									<div class="texts">{{ slide.name }}</div>
 									<nuxt-link :to="`/${locale}/key-campaigns/${slide.slug}`">
 										<button class="btn primary">{{ $t("keys.campaigns.details") }}</button>
-										<img :src="slide.cover" :alt="slide.name" />
+										<img
+											:src="slide.cover"
+											:alt="slide.name"
+											:style="{ objectPosition: `${slide.coverFocalX * 100}% ${slide.coverFocalY * 100}%` }"
+										/>
 									</nuxt-link>
 								</div>
 							</div>
@@ -62,27 +66,23 @@
 
 								<template v-if="platformList.length">
 									<span class="filter-divider">|</span>
-									<select
-										class="platform-select"
-										:value="activePlatformFilter ?? ''"
-										@change="setPlatformFilter(($event.target as HTMLSelectElement).value ? Number(($event.target as HTMLSelectElement).value) : null)"
-									>
-										<option value="">{{ $t("keys.campaigns.all") }}</option>
-										<option v-for="platform in platformList" :key="platform.id" :value="platform.id">
-											{{ platformAbbr(platform.name) }}
-										</option>
-									</select>
+									<FormAppSelect
+										id="keyCampaignsPlatformFilter"
+										:model="activePlatformFilter ?? ''"
+										@update:model="(val) => setPlatformFilter(val ? Number(val) : null)"
+										:label="$t('keys.campaigns.all')"
+										:options="platformList.map((p) => [p.id, platformAbbr(p.name)])"
+									/>
 								</template>
 							</div>
 							<div class="bar">
-								<select
-									class="platform-select sort-mode-select"
-									:value="sortMode"
-									@change="setSortMode(($event.target as HTMLSelectElement).value as 'recent' | 'popular')"
-								>
-									<option value="recent">{{ $t("keys.campaigns.sort_recent") }}</option>
-									<option value="popular">{{ $t("keys.campaigns.sort_popular") }}</option>
-								</select>
+								<FormSortInput
+									id="keyCampaignsSortFilter"
+									:model="sortMode === 'popular' ? 'desc' : 'asc'"
+									@update:model="(val: 'asc' | 'desc') => setSortMode(val === 'desc' ? 'popular' : 'recent')"
+									asc-label="keys.campaigns.sort_recent"
+									desc-label="keys.campaigns.sort_popular"
+								/>
 								<div class="search-box">
 									<input
 										type="text"
@@ -190,23 +190,22 @@
 													<span class="lock-cta">{{ $t("keys.campaigns.exclusive_upgrade_cta") }}</span>
 												</div>
 
-												<div class="title">
-													<div class="days" v-if="card.time > 0 && card.user_can_access">
-														<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
-													</div>
-													<div class="days" v-else></div>
-													<span>
-														<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
-															<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="var(--key-accent, var(--key-accent, var(--primary, #D297FF)))" />
-														</svg>
-														{{ card.type }}
-													</span>
-												</div>
 											</div>
 										</nuxt-link>
 									</div>
 
 									<div class="text">
+										<div class="card-meta-row">
+											<div class="days" v-if="card.time > 0 && card.user_can_access">
+												<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
+											</div>
+											<span>
+												<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+													<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="var(--key-accent, var(--key-accent, var(--primary, #D297FF)))" />
+												</svg>
+												{{ card.type }}
+											</span>
+										</div>
 										<div v-if="card.platforms && card.platforms.length" class="card-platforms">
 											<span v-for="p in card.platforms" :key="p" class="card-platform-tag">
 												{{ platformAbbr(p) }}
@@ -531,6 +530,10 @@ async function loadFeaturedCampaigns() {
 			.map((item: any) => ({
 				id: item.id,
 				cover: item.game?.url_banner_src || item.cover_src,
+				// Only applies to the cover_src fallback — the game's own
+				// url_banner_src is already banner-shaped and needs no repositioning.
+				coverFocalX: item.game?.url_banner_src ? 0.5 : (item.cover_focal_x ?? 0.5),
+				coverFocalY: item.game?.url_banner_src ? 0.5 : (item.cover_focal_y ?? 0.5),
 				name: item.name,
 				slug: item.slug,
 			}))
@@ -1074,13 +1077,24 @@ onUnmounted(() => {
 			.header {
 				width: 100%;
 				display: flex;
+				align-items: center;
 				padding: 24px 0;
 				justify-content: space-between;
+				flex-wrap: wrap;
+				row-gap: 12px;
 
 				.header-left {
 					display: flex;
+					align-items: center;
 					gap: 12px;
 					button { height: 44px; }
+
+					// FormAppSelect ships at 32px (its own default look on other
+					// pages) — bump to match the 44px filter pills/search box so
+					// the toolbar reads as one consistent row instead of controls
+					// bobbing at two different heights.
+					:deep(.select-wrapper) { display: flex; align-items: center; height: 44px; }
+					:deep(.select-wrapper select) { height: 44px; }
 				}
 
 				.header-left .btn.tertiary.active {
@@ -1088,24 +1102,6 @@ onUnmounted(() => {
 					color: var(--key-accent-ink, #13161C);
 				}
 
-				.platform-select {
-					background: transparent;
-					border: 1px solid var(--secondary-info-fg);
-					color: var(--title-fg);
-					font-size: 0.875rem;
-					padding: 4px 6px;
-					height: 44px;
-					max-width: 140px;
-					cursor: pointer;
-
-					option {
-						background: var(--bg-primary, var(--key-accent-ink, #13161C));
-						color: var(--title-fg);
-					}
-
-					&:focus { outline: none; border-color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
-				}
-
 				.filter-divider {
 					display: flex;
 					align-items: center;
@@ -1118,12 +1114,11 @@ onUnmounted(() => {
 					position: relative;
 					display: flex;
 					align-items: center;
-					gap: 8px;
+					gap: 12px;
 
-					.sort-mode-select {
-						flex-shrink: 0;
-						height: 44px;
-					}
+					// Same 32px→44px fix as the platform select, so the sort
+					// control lines up with the search box beside it.
+					:deep(.sort-input) { height: 44px; padding-top: 0; }
 				}
 
 				.search-box {
@@ -1201,39 +1196,31 @@ onUnmounted(() => {
 						}
 					}
 
-					.title {
-						position: absolute;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						display: flex;
-						padding: 8px 16px;
-						align-items: center;
-						background: rgba(13, 13, 13, 0.82);
-						backdrop-filter: blur(2px);
-						width: 100%;
-						justify-content: space-between;
-						z-index: 2;
-
-						.days {
-							font-size: 12px;
-							color: var(--title-fg);
+					.text {
+						.card-meta-row {
 							display: flex;
 							align-items: center;
-							gap: 4px;
-							span { color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); font-size: 16px; font-weight: 600; }
-						}
+							justify-content: space-between;
+							gap: 8px;
 
-						span {
-							font-size: 12px;
-							color: var(--secondary-info-fg);
-							display: flex;
-							align-items: center;
-							gap: 4px;
+							.days {
+								font-size: 12px;
+								color: var(--title-fg);
+								display: flex;
+								align-items: center;
+								gap: 4px;
+								span { color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); font-size: 16px; font-weight: 600; }
+							}
+
+							span {
+								font-size: 12px;
+								color: var(--secondary-info-fg);
+								display: flex;
+								align-items: center;
+								gap: 4px;
+							}
 						}
-					}
 
-					.text {
 						color: var(--title-fg);
 						font-size: 16px;
 						font-weight: 600;

package/pages/media-kit/[slug].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { fetchPublicMediaKit, trackMediaKitEvent } from '../../services/mediaKitService';
-import { fetchStreamerActiveWalls } from '../../services/indieWallService';
+import MediaKitWallBlock from '../../components/indie-wall/MediaKitWallBlock.vue';
 
 const route = useRoute();
 const slug = computed(() => route.params.slug as string);
@@ -8,7 +8,6 @@ const slug = computed(() => route.params.slug as string);
 const kit = ref<Record<string, any> | null>(null);
 const loading = ref(true);
 const error = ref(false);
-const walls = ref<any[]>([]);
 
 const userId = computed(() => kit.value?.user_id);
 const streamer = computed(() => kit.value?.streamer ?? {});
@@ -26,7 +25,6 @@ const template = computed(() => kit.value?.template || 'creator');
 const platforms = computed(() => kit.value?.platforms ?? []);
 const totalFollowers = computed(() => kit.value?.total_followers ?? 0);
 const isPremium = computed(() => kit.value?.is_premium ?? false);
-const mediaKitWall = computed(() => walls.value.find((w: any) => w.show_on_media_kit) ?? null);
 
 const PLATFORM_LABEL: Record<string, string> = {
 	instagram: 'Instagram', tiktok: 'TikTok', youtube: 'YouTube', twitch: 'Twitch', x: 'X',
@@ -46,27 +44,49 @@ const scheduleByDay = computed(() => {
 	return [0, 1, 2, 3, 4, 5, 6].map((d) => ({ d, key: DOW[d], slot: map[d] || null }));
 });
 
-onMounted(async () => {
-	try {
-		const { data } = await fetchPublicMediaKit(slug.value);
-		kit.value = data?.data || data;
-		if (kit.value?.user_id) {
-			trackMediaKitEvent(kit.value.user_id, { type: 'view', referrer: document.referrer || undefined }).catch(() => {});
-		}
-	} catch {
-		error.value = true;
-	} finally {
-		loading.value = false;
+// SSR-safe fetch so bots/link-preview scrapers (which don't run JS) get the
+// real creator data for the SEO tags below, instead of the site-wide default.
+const { data: ssrKitData } = await useAsyncData(
+	`media-kit-${slug.value}`,
+	() => fetchPublicMediaKit(slug.value).then(r => r.data?.data || r.data).catch(() => null),
+);
+if (ssrKitData.value) kit.value = ssrKitData.value;
+else error.value = true;
+loading.value = false;
+
+onMounted(() => {
+	if (kit.value?.user_id) {
+		trackMediaKitEvent(kit.value.user_id, { type: 'view', referrer: document.referrer || undefined }).catch(() => {});
 	}
 });
 
-watch(userId, async (id) => {
-	if (!id) return;
-	try {
-		const res = await fetchStreamerActiveWalls(id);
-		walls.value = res.data?.data ?? res.data ?? [];
-	} catch { walls.value = []; }
-}, { immediate: true });
+const requestUrl = useRequestURL();
+const seoTitle = computed(() => streamer.value?.name ? `${streamer.value.name} — Mundo Gamer Media Kit` : 'Mundo Gamer Media Kit');
+const seoDescription = computed(() => streamer.value?.bio || '');
+const seoImage = computed(() => streamer.value?.avatar || '');
+
+// Raw useHead meta-array form, not useSeoMeta — see the matching comment in
+// shared-ui/pages/mural/[slug].vue for why (useSeoMeta's og:*/twitter:*/
+// description overrides were silently dropped in this app).
+useHead(() => ({
+	title: seoTitle.value,
+	link: [{ rel: 'canonical', href: requestUrl.href }],
+	meta: [
+		{ name: 'description', content: seoDescription.value },
+		{ property: 'og:title', content: seoTitle.value },
+		{ property: 'og:description', content: seoDescription.value },
+		// Only override the image when the creator actually has an avatar —
+		// an empty string would replace (not fall back to) the site default.
+		...(seoImage.value ? [{ property: 'og:image', content: seoImage.value }] : []),
+		{ property: 'og:type', content: 'profile' },
+		{ property: 'og:url', content: requestUrl.href },
+		{ property: 'og:site_name', content: 'Mundo Gamer Media Kit' },
+		{ name: 'twitter:card', content: 'summary_large_image' },
+		{ name: 'twitter:title', content: seoTitle.value },
+		{ name: 'twitter:description', content: seoDescription.value },
+		...(seoImage.value ? [{ name: 'twitter:image', content: seoImage.value }] : []),
+	],
+}));
 
 function fmt(n: number) {
 	if (!n) return '0';
@@ -252,20 +272,9 @@ function onDownload() {
 					</div>
 				</section>
 
-				<!-- IndieWall / mural -->
-				<section v-if="mediaKitWall" class="kit-block" data-sec="support">
-					<h2>{{ $t('kit.media.support') }}</h2>
-					<div class="mk-indiewall">
-						<div>
-							<div class="iw-name">{{ mediaKitWall.name }}</div>
-							<div v-if="mediaKitWall.description" class="iw-desc">{{ mediaKitWall.description }}</div>
-							<div class="iw-stats">
-								<div class="s"><div class="v">{{ mediaKitWall.currency }} {{ Number(mediaKitWall.raised_amount || 0).toFixed(2) }}</div><div class="l">{{ $t('kit.media.raised') }}</div></div>
-								<div class="s"><div class="v">{{ mediaKitWall.supporters_count ?? 0 }}</div><div class="l">{{ $t('kit.media.supporters') }}</div></div>
-							</div>
-						</div>
-						<a :href="mediaKitWall.mural_url" target="_blank" rel="noopener" class="kit-btn kit-btn-primary" @click="track('click')">{{ $t('kit.media.view_wall') }}</a>
-					</div>
+				<!-- IndieWall / mural — self-contained widget (own fetch, realtime, stepper) -->
+				<section v-if="userId" class="kit-block" data-sec="support">
+					<MediaKitWallBlock :user-id="userId" />
 				</section>
 
 				<footer class="mk-footer">
@@ -701,24 +710,6 @@ function onDownload() {
 	&:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
 }
 
-/* IndieWall */
-.mk-indiewall {
-	background: linear-gradient(120deg, rgba(168, 85, 247, .1), rgba(107, 21, 172, .05));
-	border: 1px solid var(--kit-accent);
-	padding: 24px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: 20px;
-	flex-wrap: wrap;
-
-	.iw-name { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 19px; }
-	.iw-desc { color: #b4b4c2; font-size: 13px; margin-top: 4px; }
-	.iw-stats { display: flex; gap: 26px; margin-top: 10px; }
-	.iw-stats .v { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 20px; color: var(--kit-accent); }
-	.iw-stats .l { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); }
-}
-
 /* Reach / platform breakdown */
 .mk-total-reach {
 	font-family: 'Rajdhani', sans-serif;