@mundogamernetwork/shared-ui 1.3.7 → 1.4.0

package/components/form/AppSelect.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { defineEmits, defineProps, ref, watch } from "vue";
+
+interface SelectProps {
+	id: string;
+	label: string;
+	options: Array<any[] | { value: any; label: string }>;
+	disabled?: boolean;
+	model: any;
+}
+
+const emit = defineEmits(["update:model"]);
+const props = defineProps<SelectProps>();
+const selectModel = ref(props.model);
+
+watch(selectModel, () => {
+	emit("update:model", selectModel.value);
+});
+</script>
+
+<template>
+	<div
+		:class="{
+			'select-wrapper': true,
+			disabled: typeof props?.disabled !== 'undefined' ? props.disabled : false,
+		}"
+	>
+		<span class="before"></span>
+		<select
+			:id="props.id"
+			v-model="selectModel"
+			:name="props.id"
+			:class="{ filled: props.model !== '' && props.model !== null }"
+			:aria-label="$t(props.label)"
+			:placeholder="$t(props.label)"
+			:disabled="
+				typeof props?.disabled !== 'undefined' ? props.disabled : false
+			"
+		>
+			<option value="" disabled>
+				{{ $t(props.label) }}
+			</option>
+
+			<option
+				v-for="(opt, key) in props.options"
+				:key="`select-${id}-option-${key}`"
+				:value="Array.isArray(opt) ? opt[0] : opt.value"
+			>
+				{{ Array.isArray(opt) ? opt[1] : opt.label }}
+			</option>
+		</select>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.select-wrapper {
+	position: relative;
+	border-bottom: 1px solid var(--input-border-color);
+	cursor: pointer;
+
+	&.disabled {
+		cursor: default;
+		filter: contrast(0.3) brightness(0.7);
+	}
+
+	&:not(.disabled) .before {
+		position: absolute;
+		bottom: -1px;
+		left: 0;
+		display: inline-block;
+		width: 0;
+		height: 2px;
+		background-color: var(--input-active-border-color);
+		z-index: 2;
+		transition: 0.2s ease-in-out;
+	}
+
+	&:has(select:focus):not(.disabled) .before,
+	&:has(select:focus-visible):not(.disabled) .before,
+	&:has(select:active):not(.disabled) .before {
+		width: 100%;
+	}
+
+	select {
+		height: 32px;
+		padding: 0.25rem 0.75rem;
+		padding-left: 0;
+		padding-bottom: 0;
+		border: 0;
+		background: var(--input-bg);
+		font-size: 0.75rem;
+		font-weight: 400;
+		color: var(--input-fg);
+
+		&:not(.filled) {
+			color: var(--input-placeholder-fg);
+		}
+
+		&:focus,
+		&:focus-visible,
+		&:active {
+			outline: 0;
+			box-shadow: none;
+		}
+
+		option{
+			color: #000;
+		}
+	}
+}
+</style>

package/components/form/SortInput.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { defineEmits, defineProps, ref, watch } from "vue";
+
+interface SortInputProps {
+	id: string;
+	ascLabel: string;
+	descLabel: string;
+	model: "asc" | "desc";
+	disabled?: boolean;
+}
+
+const emit = defineEmits(["update:model"]);
+const props = defineProps<SortInputProps>();
+const sortModel = ref(props.model);
+
+watch(sortModel, () => {
+	emit("update:model", sortModel);
+});
+
+const toggleSort = () => {
+	if (!props?.disabled) {
+		sortModel.value = sortModel.value === "desc" ? "asc" : "desc";
+	}
+};
+</script>
+
+<template>
+	<span
+		:id="props.id"
+		:class="{
+			'sort-input': true,
+			disabled: typeof props?.disabled !== 'undefined' ? props.disabled : false,
+		}"
+		@click="toggleSort"
+	>
+		<span class="before" />
+
+		{{ $t(sortModel === "asc" ? props.ascLabel : props.descLabel) }}
+		<img
+			src="/imgs/sort-active.png"
+			width="20"
+			height="20"
+			aria-hidden="true"
+			:class="{ 'ms-auto': true, reversed: sortModel === 'asc' }"
+		/>
+	</span>
+</template>
+
+<style lang="scss" scoped>
+.sort-input {
+	position: relative;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 32px;
+	min-width: 116px;
+	padding-top: 0.25rem;
+
+	border-bottom: 1px solid var(--input-border-color);
+	color: var(--input-placeholder-fg);
+	font-size: 0.75rem;
+	font-weight: 400;
+	cursor: pointer;
+
+	&.disabled {
+		cursor: default;
+		filter: contrast(0.3) brightness(0.7);
+		pointer-events: none;
+		user-select: none;
+	}
+
+	&:not(.disabled) .before {
+		position: absolute;
+		bottom: -1px;
+		left: 0;
+		display: inline-block;
+		width: 0;
+		height: 2px;
+		background-color: var(--input-active-border-color);
+		z-index: 2;
+		transition: 0.2s ease-in-out;
+	}
+
+	&:active:not(.disabled) .before,
+	&:focus:not(.disabled) .before,
+	&:focus-visible:not(.disabled) .before {
+		width: 100%;
+	}
+
+	img {
+		transition: 0.15s ease-in-out;
+
+		&.reversed {
+			transform: rotate(180deg);
+		}
+	}
+}
+</style>

package/components/indie-wall/MediaKitWallBlock.vue

@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import { fetchStreamerActiveWalls, fetchPublicWallGoals, getWallSupporters } from '../../services/indieWallService'
+import MuralCanvas from './MuralCanvas.vue'
+import SupportStepper from './SupportStepper.vue'
+
+const props = defineProps<{ userId: number | string }>()
+const localePath = useLocalePath()
+const authStore = useAuthStore()
+
+const wall = ref<any>(null)
+const goals = ref<any[]>([])
+const supporters = ref<any[]>([])
+const loading = ref(true)
+
+const showStepper = ref(false)
+const stepperStartStep = ref<1 | 2 | 3 | 4 | 5>(1)
+const stepperInitialSelection = ref<{ x: number; y: number; w: number; h: number } | null>(null)
+
+const detailPixel = ref<any | null>(null)
+
+const totalPotential = computed(() =>
+	(wall.value?.width ?? 0) * (wall.value?.height ?? 0) * (Number(wall.value?.pixel_price) || 0)
+)
+
+const raisedPercent = computed(() => {
+	if (!totalPotential.value) return 0
+	return Math.min(100, (Number(wall.value?.raised_amount || 0) / totalPotential.value) * 100)
+})
+
+const tiersData = computed<any[]>(() => wall.value?.tiers?.data ?? wall.value?.tiers ?? [])
+const mgcBalance = computed(() => Number(authStore.user?.mgc_balance ?? 0))
+
+const wallUrl = computed(() => {
+	if (!wall.value) return '#'
+	return localePath(`/${wall.value.url_prefix || 'mural'}/${wall.value.slug}`)
+})
+
+function onTapEmpty(coord: { x: number; y: number }) {
+	stepperInitialSelection.value = { x: coord.x, y: coord.y, w: 1, h: 1 }
+	stepperStartStep.value = 1
+	showStepper.value = true
+}
+
+function onTapSupporter(s: any) {
+	detailPixel.value = s
+}
+
+function openStepper() {
+	stepperInitialSelection.value = null
+	stepperStartStep.value = 1
+	showStepper.value = true
+}
+
+async function onStepperSuccess() {
+	showStepper.value = false
+	await reloadSupporters()
+}
+
+async function reloadSupporters() {
+	if (!wall.value) return
+	const supRes = await getWallSupporters(wall.value.slug || wall.value.id, { per_page: 500 })
+	supporters.value = (supRes.data?.data ?? []).filter((p: any) => p.status)
+}
+
+const hoverTip = ref<{ supporter: any; x: number; y: number } | null>(null)
+
+const supporterToast = ref<{ name: string; amount: string; currency: string } | null>(null)
+let toastDismissTimer: ReturnType<typeof setTimeout> | null = null
+
+function showSupporterToast(pixel: any) {
+	if (toastDismissTimer) clearTimeout(toastDismissTimer)
+	const name = pixel.is_anonymous ? 'Anonymous' : (pixel.title || pixel.user?.name || 'Anonymous')
+	const currency = wall.value?.currency ?? 'USD'
+	const amount = Number(pixel.amount_paid || 0).toFixed(2)
+	supporterToast.value = { name, amount, currency }
+	toastDismissTimer = setTimeout(() => { supporterToast.value = null }, 6000)
+}
+
+function onHoverSupporter(payload: { supporter: any | null; clientX: number; clientY: number }) {
+	hoverTip.value = payload.supporter
+		? { supporter: payload.supporter, x: payload.clientX, y: payload.clientY }
+		: null
+}
+
+function supporterDisplayName(s: any): string {
+	if (s.is_anonymous) return 'Anonymous'
+	return s.title || s.user?.name || 'Anonymous'
+}
+
+async function load() {
+	loading.value = true
+	try {
+		const res = await fetchStreamerActiveWalls(props.userId)
+		const list = res.data?.data ?? res.data ?? []
+		const first = Array.isArray(list) ? list.find((w: any) => w.show_on_media_kit) ?? list[0] : null
+		if (!first) return
+		wall.value = first
+		const [goalsRes, supRes] = await Promise.all([
+			fetchPublicWallGoals(first.slug || first.id).catch(() => ({ data: { data: [] } })),
+			getWallSupporters(first.slug || first.id, { per_page: 500 }),
+		])
+		goals.value = goalsRes.data?.data || []
+		supporters.value = (supRes.data?.data ?? []).filter((p: any) => p.status)
+	} catch {
+		// no wall — renders nothing
+	} finally {
+		loading.value = false
+	}
+}
+
+function onPixelConfirmed(payload: any) {
+	const pixel = payload?.pixel
+	if (!pixel || !wall.value || Number(pixel.indie_wall_id) !== Number(wall.value.id)) return
+
+	if (payload?.wall) {
+		wall.value.raised_amount = payload.wall.raised_amount ?? wall.value.raised_amount
+		wall.value.used_pixels = payload.wall.used_pixels ?? wall.value.used_pixels
+	}
+
+	showSupporterToast(pixel)
+
+	// Re-fetch full supporter list to get image_url — the WS payload omits it
+	// intentionally to stay under Pusher's 10 KB message limit.
+	reloadSupporters()
+}
+let echoChannel: any = null
+function subscribeWall(wallId: number | string) {
+	const echo = (window as any).Echo
+	if (!echo) return
+	try {
+		echoChannel = echo.channel(`indie-wall.${wallId}`)
+		echoChannel.listen('.pixel.confirmed', onPixelConfirmed)
+	} catch { /* ignore */ }
+}
+function unsubscribeWall(wallId: number | string) {
+	try { (window as any).Echo?.leave?.(`indie-wall.${wallId}`) } catch { /* ignore */ }
+	echoChannel = null
+}
+
+watch(wall, (newWall, oldWall) => {
+	if (oldWall?.id && oldWall.id !== newWall?.id) unsubscribeWall(oldWall.id)
+	if (newWall?.id) subscribeWall(newWall.id)
+})
+
+onMounted(load)
+onUnmounted(() => {
+	if (wall.value?.id) unsubscribeWall(wall.value.id)
+	if (toastDismissTimer) clearTimeout(toastDismissTimer)
+})
+</script>
+
+<template>
+	<div v-if="!loading && wall" class="mkw-block">
+		<h2 class="mkw-section-title">{{ $t('kit.media.support') }}</h2>
+
+		<div class="mkw-card">
+			<div class="mkw-meta">
+				<div class="mkw-info">
+					<span class="mkw-name">{{ wall.name }}</span>
+					<p v-if="wall.description" class="mkw-desc">{{ wall.description }}</p>
+				</div>
+				<div class="mkw-meta-actions">
+					<button type="button" class="mkw-cta" @click="openStepper">
+						{{ $t('kit.media.support') }}
+					</button>
+					<NuxtLink :to="wallUrl" class="mkw-link">
+						{{ $t('kit.media.view_wall') }}
+					</NuxtLink>
+				</div>
+			</div>
+
+			<div class="mkw-progress-row">
+				<span class="mkw-raised">
+					{{ wall.currency }} {{ Number(wall.raised_amount || 0).toFixed(2) }} {{ $t('kit.media.raised') }}
+				</span>
+				<span v-if="totalPotential > 0" class="mkw-total">
+					/ {{ wall.currency }} {{ totalPotential.toFixed(2) }}
+				</span>
+				<span class="mkw-pct">{{ raisedPercent.toFixed(0) }}%</span>
+			</div>
+			<div class="mkw-bar">
+				<div class="mkw-bar-fill" :style="{ width: raisedPercent + '%' }" />
+			</div>
+
+			<div class="mkw-canvas-area">
+				<div class="mkw-hint-row">
+					<span class="mkw-hint">{{ $t('tv.dashboard.indie_wall.mural_click_hint') }}</span>
+					<span class="mkw-availability">
+						{{ Math.max(0, (wall.total_pixels || 0) - (wall.used_pixels || 0)) }}
+						/ {{ wall.total_pixels || 0 }}
+						{{ $t('tv.dashboard.indie_wall.pixels_available') }}
+					</span>
+				</div>
+				<MuralCanvas
+					:wall="wall"
+					:supporters="supporters"
+					:selection="null"
+					:interactive="true"
+					:height="300"
+					@tap-empty="onTapEmpty"
+					@tap-supporter="onTapSupporter"
+					@hover-supporter="onHoverSupporter"
+				/>
+				<Transition name="mkw-toast">
+					<div v-if="supporterToast" class="mkw-supporter-toast">
+						<span class="mkw-toast-icon">★</span>
+						<div class="mkw-toast-text">
+							<strong>{{ supporterToast.name }}</strong>
+							<span>{{ $t('tv.dashboard.indie_wall.just_supported') }} · {{ supporterToast.currency }} {{ supporterToast.amount }}</span>
+						</div>
+						<button class="mkw-toast-close" type="button" @click="supporterToast = null">×</button>
+					</div>
+				</Transition>
+			</div>
+		</div>
+
+		<Teleport to="body">
+			<Transition name="mkw-fade">
+				<div
+					v-if="hoverTip"
+					class="mkw-hover-tip"
+					:style="{ left: (hoverTip.x + 14) + 'px', top: (hoverTip.y + 14) + 'px' }"
+				>
+					<div class="mkw-tip-swatch" :style="{ background: hoverTip.supporter.background_color || '#D297FF' }">
+						<img v-if="hoverTip.supporter.image_url" :src="hoverTip.supporter.image_url" alt="" />
+					</div>
+					<div class="mkw-tip-info">
+						<strong>{{ supporterDisplayName(hoverTip.supporter) }}</strong>
+						<span v-if="hoverTip.supporter.supporter_message">"{{ hoverTip.supporter.supporter_message }}"</span>
+						<small>{{ wall.currency }} {{ Number(hoverTip.supporter.amount_paid || 0).toFixed(2) }} · {{ hoverTip.supporter.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</small>
+					</div>
+				</div>
+			</Transition>
+
+			<Transition name="mkw-fade">
+				<SupportStepper
+					v-if="showStepper && wall"
+					:wall="wall"
+					:goals="goals"
+					:tiers="tiersData"
+					:supporters="supporters"
+					:mgc-balance="mgcBalance"
+					:start-step="stepperStartStep"
+					:initial-selection="stepperInitialSelection"
+					@close="showStepper = false"
+					@support-success="onStepperSuccess"
+				/>
+			</Transition>
+
+			<Transition name="mkw-fade">
+				<div v-if="detailPixel" class="mkw-detail-overlay" @click.self="detailPixel = null">
+					<div class="mkw-detail-box">
+						<button class="mkw-detail-close" type="button" @click="detailPixel = null">×</button>
+						<div class="mkw-detail-swatch" :style="{ background: detailPixel.background_color || '#D297FF' }">
+							<img v-if="detailPixel.image_url" :src="detailPixel.image_url" alt="" />
+						</div>
+						<p class="mkw-detail-name">{{ supporterDisplayName(detailPixel) }}</p>
+						<p v-if="detailPixel.supporter_message" class="mkw-detail-msg">"{{ detailPixel.supporter_message }}"</p>
+						<div class="mkw-detail-meta">
+							<span>{{ $t('tv.dashboard.indie_wall.mural_position') }}: ({{ detailPixel.x }}, {{ detailPixel.y }})</span>
+							<span>{{ detailPixel.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+							<span>{{ wall.currency }} {{ Number(detailPixel.amount_paid).toFixed(2) }}</span>
+						</div>
+						<p v-if="detailPixel.link">
+							<a :href="detailPixel.link" target="_blank" rel="noopener" class="mkw-detail-link">{{ detailPixel.link }}</a>
+						</p>
+					</div>
+				</div>
+			</Transition>
+		</Teleport>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.mkw-block { margin-bottom: 16px; }
+
+.mkw-section-title {
+	font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
+	color: var(--kit-muted); font-weight: 700; margin-bottom: 16px;
+	display: flex; align-items: center; gap: 12px;
+	&::after { content: ""; flex: 1; height: 1px; background: var(--kit-line); }
+}
+
+.mkw-card {
+	background: var(--kit-surface, #191B20);
+	border: 1px solid var(--kit-line, rgba(128, 128, 128, 0.15));
+	padding: 16px;
+}
+
+.mkw-meta {
+	display: flex; align-items: flex-start; justify-content: space-between;
+	gap: 12px; margin-bottom: 12px;
+	@media (max-width: 576px) { flex-direction: column; }
+}
+
+.mkw-info { flex: 1; min-width: 0; }
+.mkw-name {
+	font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 19px;
+	color: var(--kit-text, #fff); display: block;
+}
+.mkw-desc {
+	font-size: 13px; color: var(--kit-muted, #888); margin: 4px 0 0;
+	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+
+.mkw-meta-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; }
+
+.mkw-cta {
+	display: inline-flex; align-items: center; justify-content: center;
+	background: var(--kit-accent, #D297FF); color: var(--kit-accent-ink, #13161C);
+	font-weight: 700; font-size: 13px; padding: 8px 14px; border: none;
+	white-space: nowrap; cursor: pointer; text-transform: uppercase;
+	&:hover { filter: brightness(1.1); }
+}
+
+.mkw-link {
+	font-size: 11px; color: var(--kit-accent, #D297FF);
+	text-decoration: none; text-align: center;
+	&:hover { text-decoration: underline; }
+}
+
+.mkw-progress-row {
+	display: flex; align-items: baseline; gap: 6px; font-size: 12px; margin-bottom: 5px;
+}
+.mkw-raised { color: var(--kit-accent, #D297FF); font-weight: 700; }
+.mkw-total { color: var(--kit-muted, #888); font-size: 11px; }
+.mkw-pct { color: var(--kit-muted, #888); font-size: 11px; margin-left: auto; }
+
+.mkw-bar { height: 3px; background: var(--kit-surface-2, rgba(128, 128, 128, 0.15)); margin-bottom: 14px; overflow: hidden; }
+.mkw-bar-fill { height: 100%; background: var(--kit-accent, #D297FF); transition: width 0.5s ease; min-width: 2px; }
+
+.mkw-canvas-area { display: flex; flex-direction: column; gap: 6px; }
+.mkw-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.mkw-hint { font-size: 11px; color: var(--kit-muted, #888); }
+.mkw-availability { font-size: 11px; color: var(--kit-accent, #D297FF); font-weight: 600; }
+
+.mkw-hover-tip {
+	position: fixed; z-index: 9999; pointer-events: none;
+	background: #191B20; border: 1px solid #272930; padding: 8px 10px;
+	display: flex; gap: 8px; max-width: 260px; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
+}
+.mkw-tip-swatch {
+	width: 26px; height: 26px; flex-shrink: 0; overflow: hidden;
+	img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
+}
+.mkw-tip-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.mkw-tip-info strong { color: #fff; font-size: 12px; }
+.mkw-tip-info span {
+	color: #888; font-size: 11px; font-style: italic;
+	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.mkw-tip-info small { color: var(--kit-accent, #D297FF); font-size: 11px; margin-top: 2px; }
+
+.mkw-detail-overlay {
+	position: fixed; inset: 0; background: rgba(0,0,0,0.72);
+	display: flex; align-items: center; justify-content: center; z-index: 9998; padding: 16px;
+}
+.mkw-detail-box { background: #191B20; border: 1px solid #272930; padding: 24px; width: 100%; max-width: 320px; position: relative; }
+.mkw-detail-close {
+	position: absolute; top: 10px; right: 10px; background: #272930; border: none; color: #fff;
+	width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+	cursor: pointer; font-size: 1rem; line-height: 1;
+}
+.mkw-detail-swatch {
+	width: 44px; height: 44px; margin-bottom: 12px; overflow: hidden;
+	img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
+}
+.mkw-detail-name { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
+.mkw-detail-msg { color: #aaa; font-size: 0.85rem; font-style: italic; margin-bottom: 12px; line-height: 1.4; }
+.mkw-detail-meta { display: flex; flex-direction: column; gap: 3px; color: #666; font-size: 0.75rem; margin-bottom: 8px; }
+.mkw-detail-link {
+	color: var(--kit-accent, #D297FF); font-size: 0.75rem; word-break: break-all; text-decoration: none;
+	&:hover { text-decoration: underline; }
+}
+
+.mkw-fade-enter-active, .mkw-fade-leave-active { transition: opacity 0.12s; }
+.mkw-fade-enter-from, .mkw-fade-leave-to { opacity: 0; }
+
+.mkw-supporter-toast {
+	display: flex; align-items: center; gap: 10px;
+	background: #1a1200; border: 1px solid var(--kit-accent, #D297FF); padding: 10px 12px;
+	margin-top: 10px; position: relative;
+}
+.mkw-toast-icon { color: var(--kit-accent, #D297FF); font-size: 1rem; flex-shrink: 0; line-height: 1; }
+.mkw-toast-text {
+	display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
+	strong { color: #fff; font-size: 0.82rem; font-weight: 700; }
+	span { color: var(--kit-accent, #D297FF); font-size: 0.75rem; }
+}
+.mkw-toast-close {
+	background: none; border: none; color: #888; cursor: pointer; font-size: 1rem;
+	line-height: 1; padding: 0; flex-shrink: 0;
+	&:hover { color: #fff; }
+}
+.mkw-toast-enter-active { transition: opacity 0.2s, transform 0.2s; }
+.mkw-toast-leave-active { transition: opacity 0.3s; }
+.mkw-toast-enter-from { opacity: 0; transform: translateY(-6px); }
+.mkw-toast-leave-to { opacity: 0; }
+</style>

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.0",
   "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"
@@ -531,6 +531,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,
 			}))
@@ -1088,24 +1092,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;
@@ -1119,11 +1105,6 @@ onUnmounted(() => {
 					display: flex;
 					align-items: center;
 					gap: 8px;
-
-					.sort-mode-select {
-						flex-shrink: 0;
-						height: 44px;
-					}
 				}
 
 				.search-box {

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;

package/pages/mural/[slug].vue

@@ -4,7 +4,7 @@ import SupportStepper from '../../components/indie-wall/SupportStepper.vue'
 import MuralCanvas from '../../components/indie-wall/MuralCanvas.vue'
 import IndieWallLeaderboard from '../../components/indie-wall/IndieWallLeaderboard.vue'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const wallSlug = route.params.slug as string
@@ -142,6 +142,15 @@ const goals = ref<any[]>([])
 const supporters = ref<any[]>([])
 const loading = ref(true)
 
+// SSR-safe fetch so bots/link-preview scrapers (which don't run JS) get the
+// real wall data for the SEO tags below, without waiting for the client-side
+// onMounted → loadWall() refresh (which still runs for goals/supporters/WS).
+const { data: ssrWallData } = await useAsyncData(
+    `mural-wall-${wallSlug}`,
+    () => fetchPublicWall(wallSlug).then(r => r.data?.data || r.data).catch(() => null),
+)
+if (ssrWallData.value) wall.value = ssrWallData.value
+
 // ── Stepper state ──────────────────────────────────────────────────────────
 const showStepper = ref(false)
 const stepperStartStep = ref<1 | 2 | 3 | 4 | 5>(1)
@@ -163,6 +172,15 @@ const progressPercent = computed(() => {
     return total > 0 ? Math.min(100, ((wall.value.used_pixels || 0) / total) * 100) : 0
 })
 
+// Locale-aware currency symbol + consistent decimals (was raw "BRL 500" string concat).
+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()
+    }
+}
+
 // ── Load ────────────────────────────────────────────────────────────────────
 async function loadWall() {
     loading.value = true
@@ -248,9 +266,39 @@ function supporterDisplayName(s: any): string {
     return s.title || s.user?.name || t('tv.dashboard.indie_wall.anonymous')
 }
 
-useHead({
-    title: computed(() => wall.value?.name ? `Mural · ${wall.value.name}` : 'Mural'),
-})
+const requestUrl = useRequestURL()
+const seoTitle = computed(() => wall.value?.name ? `${wall.value.name} · Mundo Gamer Wall` : 'Mundo Gamer Wall')
+const seoDescription = computed(() => wall.value?.description || wall.value?.long_description?.replace(/\n+/g, ' ').slice(0, 160) || '')
+const seoImage = computed(() => wall.value?.cover_image_url || wall.value?.logo_url || '')
+
+// Raw useHead meta-array form — matches the exact mechanism the site-wide
+// defaults in nuxt.config.ts use, and is proven to reliably override by
+// name/property key in this app. useSeoMeta was tried first but its og:*/
+// twitter:*/description overrides were silently dropped here (stray
+// duplicate `unhead`/`@vueuse/head` deps in community-frontend/package.json
+// likely cause a resolution conflict) — only `title` and `ogUrl` came
+// through. Do not switch this back to useSeoMeta without first removing
+// those stray deps and re-verifying against raw SSR HTML (curl), not just
+// the browser, since hydration can mask a server-side-only failure.
+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 wall actually has one — an empty
+        // string would replace (not fall back to) the site default image.
+        ...(seoImage.value ? [{ property: 'og:image', content: seoImage.value }] : []),
+        { property: 'og:type', content: 'website' },
+        { property: 'og:url', content: requestUrl.href },
+        { property: 'og:site_name', content: 'Mundo Gamer Wall' },
+        { 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 }] : []),
+    ],
+}))
 
 onMounted(async () => {
     await loadWall()
@@ -318,11 +366,15 @@ onUnmounted(() => {
             <div class="hero-overlay">
                 <img v-if="wall.logo_url" :src="wall.logo_url" class="hero-logo" alt="" />
                 <h1 class="hero-title">{{ wall.name }}</h1>
+                <div v-if="wall.owner_nickname || wall.owner_name" class="hero-owner">
+                    <img v-if="wall.owner_avatar_url" :src="wall.owner_avatar_url" class="hero-owner-avatar" alt="" />
+                    <span class="hero-owner-name">{{ $t('tv.dashboard.indie_wall.mural_by', { name: wall.owner_nickname || wall.owner_name }) }}</span>
+                </div>
                 <p v-if="wall.description" class="hero-desc">{{ wall.description }}</p>
 
                 <div class="hero-stats">
                     <div class="hero-stat">
-                        <span class="hero-stat-value">{{ wall.currency }} {{ Number(wall.raised_amount || 0).toFixed(2) }}</span>
+                        <span class="hero-stat-value">{{ formatMoney(Number(wall.raised_amount || 0), wall.currency) }}</span>
                         <span class="hero-stat-label">{{ $t('tv.dashboard.indie_wall.raised') }}</span>
                     </div>
                     <div class="hero-stat-divider" />
@@ -372,7 +424,7 @@ onUnmounted(() => {
                                 {{ $t('tv.dashboard.indie_wall.reached') }}
                             </span>
                             <span v-else-if="goal.target_amount > 0" class="goal-amount">
-                                {{ wall.currency }} {{ Number(goal.target_amount).toFixed(0) }}
+                                {{ formatMoney(Number(goal.target_amount), wall.currency) }}
                             </span>
                             <span v-else class="goal-amount">
                                 {{ goal.target_pixels }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}
@@ -396,7 +448,7 @@ onUnmounted(() => {
                             <div class="goal-progress-fill" :style="{ width: (goal.progress_percent || 0) + '%' }" />
                             <span class="goal-progress-text">
                                 <template v-if="goal.target_amount > 0">
-                                    {{ $t('tv.dashboard.indie_wall.goal_card_missing_amount', { currency: wall.currency, amount: Math.max(0, goal.target_amount - (goal.current_amount || 0)).toFixed(0) }) }}
+                                    {{ $t('tv.dashboard.indie_wall.goal_card_missing_amount', { amount: formatMoney(Math.max(0, goal.target_amount - (goal.current_amount || 0)), wall.currency) }) }}
                                 </template>
                                 <template v-else>
                                     {{ $t('tv.dashboard.indie_wall.goal_card_missing', { count: Math.max(0, (goal.target_pixels || 0) - (goal.current_pixels || 0)) }) }}
@@ -433,7 +485,7 @@ onUnmounted(() => {
                 >
                     <img v-if="tier.image_url" :src="tier.image_url" class="tier-img" alt="" />
                     <h3 class="tier-name">{{ tier.name }}</h3>
-                    <div class="tier-price">{{ tier.currency || wall.currency }} {{ Number(tier.price).toFixed(2) }}</div>
+                    <div class="tier-price">{{ formatMoney(Number(tier.price), tier.currency || wall.currency) }}</div>
                     <p class="tier-pixels">{{ tier.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</p>
                     <p v-if="tier.description" class="tier-desc">{{ tier.description }}</p>
                     <div v-if="tier.max_quantity" class="tier-stock">
@@ -484,7 +536,7 @@ onUnmounted(() => {
                                 <span class="supp-name">{{ supporterDisplayName(s) }}</span>
                                 <span v-if="!s.is_anonymous && !s.user && s.guest_email" class="supp-email">{{ s.guest_email }}</span>
                             </div>
-                            <span class="supp-amount">{{ wall.currency }} {{ Number(s.amount_paid || 0).toFixed(2) }}</span>
+                            <span class="supp-amount">{{ formatMoney(Number(s.amount_paid || 0), wall.currency) }}</span>
                         </div>
                         <p v-if="s.message || s.supporter_message" class="supp-msg">"{{ s.message || s.supporter_message }}"</p>
                     </div>
@@ -568,7 +620,7 @@ onUnmounted(() => {
                     <p class="hover-tip-name">{{ supporterDisplayName(hoverTip.supporter) }}</p>
                     <p v-if="hoverTip.supporter.supporter_message" class="hover-tip-msg">"{{ hoverTip.supporter.supporter_message }}"</p>
                     <div class="hover-tip-badges">
-                        <span class="hover-tip-amount">{{ wall.currency }} {{ Number(hoverTip.supporter.amount_paid || 0).toFixed(2) }}</span>
+                        <span class="hover-tip-amount">{{ formatMoney(Number(hoverTip.supporter.amount_paid || 0), wall.currency) }}</span>
                         <span class="hover-tip-pixels">{{ hoverTip.supporter.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
                     </div>
                 </div>
@@ -592,7 +644,7 @@ onUnmounted(() => {
                         <div class="detail-amount-row">
                             <span class="detail-amount-label">{{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
                             <span class="detail-amount-value">
-                                <span v-if="wall">{{ wall.currency }}</span> {{ Number(detailPixel.amount_paid).toFixed(2) }}
+                                {{ formatMoney(Number(detailPixel.amount_paid), wall?.currency) }}
                             </span>
                         </div>
                         <div class="detail-chips">
@@ -647,6 +699,9 @@ onUnmounted(() => {
     margin-bottom: 16px; border: 2px solid rgba(255,255,255,0.1);
 }
 .hero-title { font-size: 2rem; font-weight: 800; color: var(--title-fg, #fff); margin: 0 0 12px; letter-spacing: -0.5px; }
+.hero-owner { display: flex; align-items: center; gap: 8px; margin: -6px 0 12px; }
+.hero-owner-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
+.hero-owner-name { color: rgba(255,255,255,0.75); font-size: 0.9rem; font-weight: 500; }
 .hero-desc { color: rgba(255,255,255,0.65); font-size: 1rem; max-width: 600px; line-height: 1.6; margin: 0 0 24px; }
 .hero-stats { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; }
 .hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }

package/pages/presskit/game/[slug].vue

@@ -179,27 +179,32 @@ function track(type: 'click' | 'download' | 'contact') {
 
 const requestUrl = useRequestURL();
 
-const seoTitle = computed(() => kit.value ? `${kit.value.name} — Press Kit` : 'Press Kit');
+const seoTitle = computed(() => kit.value ? `${kit.value.name} — Mundo Gamer Press Kit` : 'Mundo Gamer Press Kit');
 const seoDescription = computed(() => kit.value?.tagline || kit.value?.description?.replace(/<[^>]*>/g, '').slice(0, 160) || '');
 const seoImage = computed(() => kit.value?.hero_image_url || kit.value?.cover_image_url || kit.value?.logo_url || '');
 
+// 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 get 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 kit actually has one — an empty
+		// string would replace (not fall back to) the site default image.
+		...(seoImage.value ? [{ property: 'og:image', content: seoImage.value }] : []),
+		{ property: 'og:type', content: 'article' },
+		{ property: 'og:url', content: requestUrl.href },
+		{ property: 'og:site_name', content: 'Mundo Gamer Press 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 }] : []),
+	],
 }));
-
-useSeoMeta({
-	title: () => seoTitle.value,
-	description: () => seoDescription.value,
-	ogTitle: () => seoTitle.value,
-	ogDescription: () => seoDescription.value,
-	ogImage: () => seoImage.value,
-	ogType: 'article',
-	ogUrl: () => requestUrl.href,
-	twitterCard: 'summary_large_image',
-	twitterTitle: () => seoTitle.value,
-	twitterDescription: () => seoDescription.value,
-	twitterImage: () => seoImage.value,
-});
 </script>
 
 <template>

package/services/campaignService.ts

@@ -297,6 +297,8 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		name: k.name,
 		slug: k.slug,
 		cover: k.cover_src,
+		cover_focal_x: k.cover_focal_x ?? 0.5,
+		cover_focal_y: k.cover_focal_y ?? 0.5,
 		game_cover: k.game?.url_cover_src,
 		game_slug: k.game?.slug,
 		time_to_expire: k.time_to_expire,
@@ -307,6 +309,8 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		email: k.company?.email,
 		twitter: k.company?.twitter,
 		logo: k.company?.thumbnail_url,
+		pr_contact_name: k.supplier_pr?.name ?? null,
+		pr_contact_email: k.supplier_pr?.email ?? null,
 		status: k.status,
 		quantity: k.quantity,
 		available_count: k.available_count ?? 0,