@mundogamernetwork/shared-ui 1.4.0 → 1.4.2

package/assets/kit/kit-base.css

@@ -890,6 +890,94 @@ body:has(.kit-press) {
 	margin-top: 32px;
 }
 
+/* ── Press Kit's own key request flow (separate from the KeyBrowser
+   ecosystem widget) — auth wall, status states, and the request form. ── */
+.kit-keys-mode-note {
+	font-size: 0.78rem;
+	color: var(--kit-muted, #8b92a0);
+	margin: -8px 0 0;
+}
+.kit-keys-loading {
+	height: 80px;
+	background: var(--kit-card, #1a1e27);
+	animation: kit-pulse 1.5s ease-in-out infinite;
+}
+@keyframes kit-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.kit-keys-authwall,
+.kit-keys-status {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 20px;
+	background: var(--kit-card, #1a1e27);
+	border: 1px solid var(--kit-line, #252a34);
+}
+.kit-keys-status p { margin: 0; color: var(--kit-text, #f4f6fa); font-size: 0.9rem; }
+.kit-keys-status.status-rejected p { color: var(--kit-muted, #8b92a0); }
+.kit-keys-code {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+.kit-keys-code code {
+	padding: 10px 16px;
+	background: var(--kit-bg, #13161c);
+	border: 1px dashed var(--kit-accent, #FDB215);
+	color: var(--kit-accent, #FDB215);
+	font-size: 0.95rem;
+	letter-spacing: 1px;
+}
+.kit-keys-form {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+.kit-keys-row {
+	display: flex;
+	gap: 14px;
+	flex-wrap: wrap;
+}
+.kit-keys-field {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	flex: 1;
+	min-width: 160px;
+}
+.kit-keys-field label {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	color: var(--kit-muted, #8b92a0);
+}
+.kit-keys-field select,
+.kit-keys-field textarea {
+	background: var(--kit-card, #1a1e27);
+	border: 1px solid var(--kit-line, #252a34);
+	color: var(--kit-text, #f4f6fa);
+	padding: 10px 12px;
+	font-size: 0.9rem;
+	font-family: inherit;
+	resize: vertical;
+}
+.kit-keys-field select:focus,
+.kit-keys-field textarea:focus {
+	outline: none;
+	border-color: var(--kit-accent, #FDB215);
+}
+.kit-keys-hint {
+	font-size: 0.75rem;
+	color: var(--kit-muted, #8b92a0);
+}
+.kit-keys-error {
+	font-size: 0.82rem;
+	color: #e74c3c;
+}
+.kit-keys-form .kit-btn {
+	align-self: flex-start;
+}
+
 /* ── Responsive ─────────────────────────────────────────────────────*/
 @media (max-width: 900px) {
 	.kit-layout {

package/components/indie-wall/MediaKitWallBlock.vue

@@ -6,6 +6,15 @@ import SupportStepper from './SupportStepper.vue'
 const props = defineProps<{ userId: number | string }>()
 const localePath = useLocalePath()
 const authStore = useAuthStore()
+const { locale } = useI18n()
+
+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 wall = ref<any>(null)
 const goals = ref<any[]>([])
@@ -64,14 +73,14 @@ async function reloadSupporters() {
 
 const hoverTip = ref<{ supporter: any; x: number; y: number } | null>(null)
 
-const supporterToast = ref<{ name: string; amount: string; currency: string } | null>(null)
+const supporterToast = ref<{ name: string; amount: number; 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)
+	const amount = Number(pixel.amount_paid || 0)
 	supporterToast.value = { name, amount, currency }
 	toastDismissTimer = setTimeout(() => { supporterToast.value = null }, 6000)
 }
@@ -171,10 +180,10 @@ onUnmounted(() => {
 
 			<div class="mkw-progress-row">
 				<span class="mkw-raised">
-					{{ wall.currency }} {{ Number(wall.raised_amount || 0).toFixed(2) }} {{ $t('kit.media.raised') }}
+					{{ formatMoney(Number(wall.raised_amount || 0), wall.currency) }} {{ $t('kit.media.raised') }}
 				</span>
 				<span v-if="totalPotential > 0" class="mkw-total">
-					/ {{ wall.currency }} {{ totalPotential.toFixed(2) }}
+					/ {{ formatMoney(totalPotential, wall.currency) }}
 				</span>
 				<span class="mkw-pct">{{ raisedPercent.toFixed(0) }}%</span>
 			</div>
@@ -206,7 +215,7 @@ onUnmounted(() => {
 						<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>
+							<span>{{ $t('tv.dashboard.indie_wall.just_supported') }} · {{ formatMoney(supporterToast.amount, supporterToast.currency) }}</span>
 						</div>
 						<button class="mkw-toast-close" type="button" @click="supporterToast = null">×</button>
 					</div>
@@ -227,7 +236,7 @@ onUnmounted(() => {
 					<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>
+						<small>{{ formatMoney(Number(hoverTip.supporter.amount_paid || 0), wall.currency) }} · {{ hoverTip.supporter.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</small>
 					</div>
 				</div>
 			</Transition>
@@ -259,7 +268,7 @@ onUnmounted(() => {
 						<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>
+							<span>{{ formatMoney(Number(detailPixel.amount_paid), wall.currency) }}</span>
 						</div>
 						<p v-if="detailPixel.link">
 							<a :href="detailPixel.link" target="_blank" rel="noopener" class="mkw-detail-link">{{ detailPixel.link }}</a>

package/components/indie-wall/StepCustomize.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<{
 	form: {
 		title: string
@@ -36,6 +38,12 @@ const messageError = ref('')
 const imageMissingError = ref('')
 const emailError = ref('')
 
+// Errors are (re)computed on submit in next(); clear them as soon as the user
+// edits the field so a corrected value doesn't keep showing a stale error.
+watch(() => local.guest_email, () => { emailError.value = '' })
+watch(() => local.title, () => { titleError.value = '' })
+watch(() => local.message, () => { messageError.value = '' })
+
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 const URL_REGEX = /^https?:\/\/.+\..+/
 

package/components/indie-wall/StepGoal.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { locale } = useI18n()
+
 defineProps<{
 	goals: any[]
 	selectedGoalId: number | null
@@ -14,6 +16,14 @@ function pick(goalId: number | null) {
 	emit('select', goalId)
 	emit('next')
 }
+
+function formatMoney(amount: number, currency?: string | null) {
+	try {
+		return new Intl.NumberFormat(locale.value, { style: 'currency', currency: currency || 'USD', maximumFractionDigits: 0 }).format(amount)
+	} catch {
+		return `${currency || ''} ${Number(amount).toFixed(0)}`.trim()
+	}
+}
 </script>
 
 <template>
@@ -34,7 +44,7 @@ function pick(goalId: number | null) {
 						{{ $t('tv.dashboard.indie_wall.reached') }}
 					</span>
 					<span v-else class="sw-goal-amount">
-						{{ currency }} {{ Number(goal.target_amount || 0).toFixed(0) }}
+						{{ formatMoney(Number(goal.target_amount || 0), currency) }}
 					</span>
 				</header>
 

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/package.json

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

package/pages/key-campaigns/index.vue

@@ -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) }}
@@ -1078,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 {
@@ -1104,7 +1114,11 @@ onUnmounted(() => {
 					position: relative;
 					display: flex;
 					align-items: center;
-					gap: 8px;
+					gap: 12px;
+
+					// 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 {
@@ -1182,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/mural/[slug].vue

@@ -209,6 +209,13 @@ async function loadWall() {
             stepperStartStep.value = 1
             showStepper.value = true
         }
+
+        // Deep-link from a supporter's own share link (?pixel=123): open their
+        // pixel detail automatically so the shared link lands on their spot.
+        if (route.query.pixel) {
+            const shared = supporters.value.find((s: any) => String(s.id) === String(route.query.pixel))
+            if (shared) detailPixel.value = shared
+        }
     } catch (err) {
         console.error(err)
     } finally {
@@ -232,8 +239,19 @@ function onCanvasTapEmpty(coord: { x: number; y: number }) {
     })
 }
 
-function onCanvasTapSupporter(s: any) {
+function openPixelDetail(s: any) {
     detailPixel.value = s
+    router.replace({ query: { ...route.query, pixel: s.id } })
+}
+
+function closePixelDetail() {
+    detailPixel.value = null
+    const { pixel: _omit, ...rest } = route.query
+    router.replace({ query: rest })
+}
+
+function onCanvasTapSupporter(s: any) {
+    openPixelDetail(s)
 }
 
 const hoverTip = ref<{ supporter: any; x: number; y: number } | null>(null)
@@ -267,10 +285,63 @@ function supporterDisplayName(s: any): string {
 }
 
 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) || '')
+
+// When a supporter's own pixel is open (either they just clicked it, or a
+// visitor followed that supporter's share link), the page's own title/
+// description swap to their name+message so *their* share card, not just
+// the wall's, reads correctly. Image stays the wall's own cover — pixel
+// images are inline base64, not real URLs, so crawlers can't fetch them.
+const seoTitle = computed(() => {
+    if (detailPixel.value && wall.value) {
+        return t('tv.dashboard.indie_wall.share_pixel_title', { name: supporterDisplayName(detailPixel.value), wall: wall.value.name })
+    }
+    return wall.value?.name ? `${wall.value.name} · Mundo Gamer Wall` : 'Mundo Gamer Wall'
+})
+const seoDescription = computed(() => {
+    if (detailPixel.value) {
+        return detailPixel.value.supporter_message
+            || (wall.value?.name ? t('tv.dashboard.indie_wall.share_pixel_default_desc', { wall: wall.value.name }) : '')
+    }
+    return 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 || '')
 
+// ── Per-supporter share link ────────────────────────────────────────────────
+const sharePixelUrl = computed(() => {
+    if (!detailPixel.value) return requestUrl.href
+    const base = `${requestUrl.origin}${route.path}`
+    return `${base}?pixel=${detailPixel.value.id}`
+})
+const shareText = computed(() => {
+    if (!detailPixel.value || !wall.value) return ''
+    return t('tv.dashboard.indie_wall.share_pixel_text', { name: supporterDisplayName(detailPixel.value), wall: wall.value.name })
+})
+const shareTwitterUrl = computed(() => `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText.value)}&url=${encodeURIComponent(sharePixelUrl.value)}`)
+const shareWhatsappUrl = computed(() => `https://wa.me/?text=${encodeURIComponent(`${shareText.value} ${sharePixelUrl.value}`)}`)
+const shareFacebookUrl = computed(() => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(sharePixelUrl.value)}`)
+
+const linkCopied = ref(false)
+async function copyShareLink() {
+    try {
+        await navigator.clipboard.writeText(sharePixelUrl.value)
+        linkCopied.value = true
+        setTimeout(() => { linkCopied.value = false }, 2000)
+    } catch { /* clipboard unavailable */ }
+}
+
+// "Create your own wall" footer CTA — same host map as the backend's
+// IndieWallController::resolverResponse, so it always points at whichever
+// platform (TV/Agency) actually owns this wall rather than a hardcoded host.
+const CREATE_WALL_HOST_MAP: Record<string, string> = {
+    MGTV: 'https://mundogamer.tv',
+    MGAG: 'https://mundogamer.agency',
+}
+const createWallUrl = computed(() => {
+    const shortName = wall.value?.origin_system?.short_name
+    const host = (shortName && CREATE_WALL_HOST_MAP[shortName]) || CREATE_WALL_HOST_MAP.MGTV
+    return `${host}/${locale.value}/dashboard/wall`
+})
+
 // 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:*/
@@ -523,7 +594,7 @@ onUnmounted(() => {
         <section v-if="supporters.length" class="section">
             <h2 class="section-title">{{ $t('tv.dashboard.indie_wall.recent_supporters') }}</h2>
             <div class="supporters-grid">
-                <div v-for="s in supporters.slice(0, 24)" :key="s.id" class="supp-card" @click="detailPixel = s">
+                <div v-for="s in supporters.slice(0, 24)" :key="s.id" class="supp-card" @click="openPixelDetail(s)">
                     <div class="supp-pixel">
                         <img v-if="s.image_url" :src="s.image_url" class="supp-pixel-img" alt="" />
                         <div v-else class="supp-pixel-swatch" :style="{ background: s.background_color || '#272930' }" />
@@ -549,6 +620,16 @@ onUnmounted(() => {
             <IndieWallLeaderboard :supporters="supporters" />
         </section>
 
+        <!-- ── Footer credit ─────────────────────────────────────────────────── -->
+        <footer class="mural-footer">
+            <p class="mural-footer-text">
+                {{ $t('tv.dashboard.indie_wall.footer_made_with') }} <strong>Mundo Gamer Wall</strong>
+            </p>
+            <a :href="createWallUrl" target="_blank" rel="noopener" class="mural-footer-cta">
+                {{ $t('tv.dashboard.indie_wall.footer_create_cta') }}
+            </a>
+        </footer>
+
     </div>
 
     <!-- ── Overlays ────────────────────────────────────────────────────────── -->
@@ -628,9 +709,9 @@ onUnmounted(() => {
         </Transition>
 
         <Transition name="fade">
-            <div v-if="detailPixel" class="detail-overlay" @click.self="detailPixel = null">
+            <div v-if="detailPixel" class="detail-overlay" @click.self="closePixelDetail">
                 <div class="detail-box">
-                    <button class="overlay-close" type="button" @click="detailPixel = null">×</button>
+                    <button class="overlay-close" type="button" @click="closePixelDetail">×</button>
                     <div
                         class="detail-hero"
                         :style="{ background: detailPixel.background_color || '#272930' }"
@@ -654,6 +735,24 @@ onUnmounted(() => {
                         <a v-if="detailPixel.link" :href="detailPixel.link" target="_blank" rel="noopener" class="detail-link">
                             {{ detailPixel.link }}
                         </a>
+
+                        <!-- ── Share this pixel ─────────────────────────────────────── -->
+                        <div class="detail-share">
+                            <p class="detail-share-title">{{ $t('tv.dashboard.indie_wall.share_pixel_cta') }}</p>
+                            <div class="detail-share-row">
+                                <a :href="shareTwitterUrl" target="_blank" rel="noopener" class="detail-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_twitter')">𝕏</a>
+                                <a :href="shareWhatsappUrl" target="_blank" rel="noopener" class="detail-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_whatsapp')">
+                                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.2h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z" opacity="0"/><path d="M9.2 6.8c-.2-.45-.42-.46-.62-.47h-.53c-.18 0-.48.07-.73.34-.25.27-.96.93-.96 2.28s.98 2.65 1.12 2.83c.14.18 1.9 3.03 4.7 4.14 2.32.92 2.8.74 3.3.7.5-.05 1.62-.66 1.85-1.3.23-.63.23-1.17.16-1.29-.07-.11-.25-.18-.53-.32-.27-.14-1.62-.8-1.87-.89-.25-.09-.43-.14-.62.14-.18.27-.7.89-.86 1.07-.16.18-.32.2-.59.07-.27-.14-1.15-.42-2.19-1.35-.81-.72-1.36-1.62-1.52-1.89-.16-.27-.02-.42.12-.55.13-.13.27-.33.4-.5.13-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.6-1.5-.85-2.05Z"/></svg>
+                                </a>
+                                <a :href="shareFacebookUrl" target="_blank" rel="noopener" class="detail-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_facebook')">f</a>
+                                <button type="button" class="detail-share-btn" @click="copyShareLink" :aria-label="$t('tv.dashboard.indie_wall.share_copy_link')">
+                                    {{ linkCopied ? '✓' : '🔗' }}
+                                </button>
+                            </div>
+                            <button type="button" class="detail-share-cta" @click="closePixelDetail(); openStepper({ startStep: 1 })">
+                                {{ $t('tv.dashboard.indie_wall.share_join_cta') }}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -985,6 +1084,32 @@ onUnmounted(() => {
     &:hover { text-decoration: underline; }
 }
 
+.detail-share {
+    margin-top: 16px; padding-top: 16px;
+    border-top: 1px solid #272930;
+}
+.detail-share-title {
+    margin: 0 0 8px; font-size: 0.78rem; color: var(--secondary-info-fg, #aaa);
+}
+.detail-share-row {
+    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
+}
+.detail-share-btn {
+    width: 34px; height: 34px; flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(255,255,255,0.06); border: 1px solid #272930;
+    color: var(--title-fg, #fff); font-size: 0.9rem; font-weight: 700;
+    cursor: pointer; text-decoration: none; transition: border-color 0.15s;
+    &:hover { border-color: var(--chip-text, #D297FF); }
+}
+.detail-share-cta {
+    width: 100%;
+    background: var(--chip-text, #D297FF); color: #13161C;
+    border: none; padding: 10px 14px; font-weight: 700; font-size: 0.85rem;
+    cursor: pointer; transition: opacity 0.15s;
+    &:hover { opacity: 0.88; }
+}
+
 .fade-enter-active, .fade-leave-active { transition: opacity 0.18s; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }
 
@@ -1102,6 +1227,28 @@ onUnmounted(() => {
     background: rgba(255,255,255,0.06); padding: 2px 6px;
 }
 
+// ── Footer credit ─────────────────────────────────────────────────────────
+.mural-footer {
+    display: flex; flex-direction: column; align-items: center; gap: 12px;
+    padding: 48px 16px; margin-top: 8px;
+    border-top: 1px solid #1e2028;
+    text-align: center;
+}
+.mural-footer-text {
+    font-size: 0.8rem; color: var(--secondary-info-fg, #888); margin: 0;
+    strong { color: var(--title-fg, #fff); }
+}
+.mural-footer-cta {
+    display: inline-block;
+    padding: 8px 20px;
+    border: 1px solid var(--chip-text, #D297FF);
+    color: var(--chip-text, #D297FF);
+    font-size: 0.8rem; font-weight: 600;
+    text-decoration: none;
+    transition: background 0.15s, color 0.15s;
+    &:hover { background: var(--chip-text, #D297FF); color: #13161C; }
+}
+
 @media (max-width: 640px) {
     .hero-title { font-size: 1.5rem; }
     .hero-stats { gap: 12px; }

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { trackPressKitEvent } from '../../../services/pressKitService';
+import { mgApiUrl } from '../../../services/httpService';
 
 definePageMeta({ layout: 'blank' });
 
 const route = useRoute();
 const slug = route.params.slug as string;
+const { t } = useI18n();
 
 const runtimeConfig = useRuntimeConfig();
 const cfg = (runtimeConfig.public?.mgSharedUi || {}) as Record<string, any>;
@@ -86,12 +88,87 @@ const layout = computed(() => kit.value?.layout || 'classic');
 const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
 const hasDownloadableAssets = computed(() => assets.value.length > 0);
 const canDownload = computed(() => allowDownload.value && hasDownloadableAssets.value);
+const zipDownloadUrl = computed(() => `${apiBase}/public/press-kits/${slug}/download${previewToken ? `?preview_token=${previewToken}` : ''}`);
 
 const keyPoolsVisible = ref(false);
 function onPoolsReady(count: number) {
 	keyPoolsVisible.value = count > 0;
 }
 
+// ── Press Kit's own key request flow ────────────────────────────────────────
+// Deliberately separate from the KeyBrowser widget above (that's the
+// ecosystem-wide Key Campaigns product). This talks to the Press-Kit-specific
+// pool/request endpoints and respects the studio's own `keys_public` setting
+// (instant auto-delivery vs. manual review, configured in the dashboard).
+const KEY_REQUEST_PLATFORMS = ['steam', 'epic', 'gog', 'xbox', 'psn', 'other'];
+const KEY_REQUEST_REGIONS = ['worldwide', 'NA', 'EU', 'BR', 'LATAM', 'APAC', 'other'];
+
+const requestForm = ref({ platform: 'steam', region: 'worldwide', objectives: '' });
+const myKeyRequest = ref<any>(null);
+const keyRequestLoaded = ref(false);
+const keyRequestAuthed = ref(true);
+const keyRequestSubmitting = ref(false);
+const keyRequestError = ref('');
+const keyCopied = ref(false);
+
+const showOwnKeySection = computed(() => !!kit.value?.has_available_keys || !!myKeyRequest.value);
+
+async function loadMyKeyRequest() {
+	try {
+		const res: any = await $fetch(`${apiBase}/public/press-kits/${slug}/my-request`, { credentials: 'include' });
+		myKeyRequest.value = res?.data || null;
+	} catch (err: any) {
+		if (err?.statusCode === 401 || err?.response?.status === 401) keyRequestAuthed.value = false;
+	} finally {
+		keyRequestLoaded.value = true;
+	}
+}
+
+function redirectToKeyLogin() {
+	window.location.href = mgApiUrl('login') + '?redirect_to=' + encodeURIComponent(window.location.href);
+}
+
+async function submitOwnKeyRequest() {
+	if (!keyRequestAuthed.value) {
+		redirectToKeyLogin();
+		return;
+	}
+	keyRequestError.value = '';
+	keyRequestSubmitting.value = true;
+	try {
+		await $fetch(`${apiBase}/public/press-kits/${slug}/request-key`, {
+			method: 'POST',
+			credentials: 'include',
+			body: {
+				platform: requestForm.value.platform,
+				region: requestForm.value.region,
+				objectives: requestForm.value.objectives,
+			},
+		});
+		await loadMyKeyRequest();
+	} catch (err: any) {
+		if (err?.statusCode === 401 || err?.response?.status === 401) {
+			keyRequestAuthed.value = false;
+		} else {
+			keyRequestError.value = err?.data?.message || t('kit.press.request_own_key_error');
+		}
+	} finally {
+		keyRequestSubmitting.value = false;
+	}
+}
+
+async function copyKeyCode(code: string) {
+	try {
+		await navigator.clipboard.writeText(code);
+		keyCopied.value = true;
+		setTimeout(() => { keyCopied.value = false; }, 2000);
+	} catch {}
+}
+
+onMounted(() => {
+	if (kit.value?.id) loadMyKeyRequest();
+});
+
 // Scroll state for sticky CTA + back-to-top
 const scrolled = ref(false);
 let heroHeight = 0;
@@ -189,6 +266,11 @@ const seoImage = computed(() => kit.value?.hero_image_url || kit.value?.cover_im
 useHead(() => ({
 	title: seoTitle.value,
 	link: [{ rel: 'canonical', href: requestUrl.href }],
+	// Studio's own GA4 tag, opt-in per kit — free feature, no plan gate.
+	script: kit.value?.analytics_ga_id ? [
+		{ src: `https://www.googletagmanager.com/gtag/js?id=${kit.value.analytics_ga_id}`, async: true },
+		{ innerHTML: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${kit.value.analytics_ga_id}');` },
+	] : [],
 	meta: [
 		{ name: 'description', content: seoDescription.value },
 		{ property: 'og:title', content: seoTitle.value },
@@ -252,7 +334,7 @@ useHead(() => ({
 						<p v-if="kit.developer" class="kit-kicker">{{ kit.developer }}</p>
 						<div class="kit-actions">
 							<template v-if="allowDownload">
-								<a v-if="canDownload" class="kit-btn kit-btn-primary" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
+								<a v-if="canDownload" class="kit-btn kit-btn-primary" :href="zipDownloadUrl" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
 								<span v-else class="kit-btn kit-btn-primary kit-btn-disabled" :title="$t('kit.press.no_assets')">{{ $t('kit.press.no_assets') }}</span>
 							</template>
 							<a v-if="kit.press_contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
@@ -279,7 +361,7 @@ useHead(() => ({
 				<span class="kit-stickybar-name">{{ kit.name }}</span>
 				<div class="kit-stickybar-actions">
 					<template v-if="allowDownload">
-						<a v-if="canDownload" class="kit-btn kit-btn-primary kit-btn-sm" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
+						<a v-if="canDownload" class="kit-btn kit-btn-primary kit-btn-sm" :href="zipDownloadUrl" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
 						<span v-else class="kit-btn kit-btn-primary kit-btn-sm kit-btn-disabled" :title="$t('kit.press.no_assets')">{{ $t('kit.press.no_assets') }}</span>
 					</template>
 					<a v-if="kit.press_contact_email" class="kit-btn kit-btn-ghost kit-btn-sm" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
@@ -420,6 +502,76 @@ useHead(() => ({
 							/>
 						</section>
 
+						<!-- Press Kit's own key request flow — separate product from the
+						     KeyBrowser ecosystem widget above. Respects the studio's own
+						     keys_public setting (instant auto-delivery vs. manual review). -->
+						<section v-if="showOwnKeySection" id="request-key" class="kit-block kit-keys-section">
+							<h2 class="kit-keys-title">{{ $t('kit.press.request_own_key_title') }}</h2>
+							<p class="kit-keys-desc">{{ $t('kit.press.request_own_key_desc') }}</p>
+							<p class="kit-keys-mode-note">
+								{{ kit.keys_public ? $t('kit.press.request_own_key_public_note') : $t('kit.press.request_own_key_moderated_note') }}
+							</p>
+
+							<div v-if="!keyRequestLoaded" class="kit-keys-loading" />
+
+							<template v-else>
+								<div v-if="!keyRequestAuthed && !myKeyRequest" class="kit-keys-authwall">
+									<p>{{ $t('kit.press.request_own_key_login_required') }}</p>
+									<button type="button" class="kit-btn kit-btn-primary" @click="redirectToKeyLogin">
+										{{ $t('kit.press.request_own_key_login_btn') }}
+									</button>
+								</div>
+
+								<div v-else-if="myKeyRequest" class="kit-keys-status" :class="`status-${myKeyRequest.status}`">
+									<p v-if="myKeyRequest.status === 'pending'">{{ $t('kit.press.request_own_key_status_pending') }}</p>
+									<template v-else-if="myKeyRequest.status === 'approved'">
+										<p>{{ $t('kit.press.request_own_key_status_approved') }}</p>
+										<div class="kit-keys-code">
+											<code>{{ myKeyRequest.key }}</code>
+											<button type="button" class="kit-btn kit-btn-ghost kit-btn-sm" @click="copyKeyCode(myKeyRequest.key)">
+												{{ keyCopied ? $t('kit.press.request_own_key_copied') : $t('kit.press.request_own_key_copy') }}
+											</button>
+										</div>
+									</template>
+									<p v-else-if="myKeyRequest.status === 'rejected'">{{ $t('kit.press.request_own_key_status_rejected') }}</p>
+								</div>
+
+								<form v-else class="kit-keys-form" @submit.prevent="submitOwnKeyRequest">
+									<div class="kit-keys-row">
+										<div class="kit-keys-field">
+											<label>{{ $t('kit.press.request_own_key_platform') }}</label>
+											<select v-model="requestForm.platform">
+												<option v-for="p in KEY_REQUEST_PLATFORMS" :key="p" :value="p">{{ p }}</option>
+											</select>
+										</div>
+										<div class="kit-keys-field">
+											<label>{{ $t('kit.press.request_own_key_region') }}</label>
+											<select v-model="requestForm.region">
+												<option v-for="r in KEY_REQUEST_REGIONS" :key="r" :value="r">{{ r }}</option>
+											</select>
+										</div>
+									</div>
+									<div class="kit-keys-field">
+										<label>{{ $t('kit.press.request_own_key_objectives') }}</label>
+										<textarea
+											v-model="requestForm.objectives"
+											rows="3"
+											:placeholder="$t('kit.press.request_own_key_objectives_placeholder')"
+										/>
+										<span class="kit-keys-hint">{{ $t('kit.press.request_own_key_objectives_hint') }}</span>
+									</div>
+									<div v-if="keyRequestError" class="kit-keys-error">{{ keyRequestError }}</div>
+									<button
+										type="submit"
+										class="kit-btn kit-btn-primary"
+										:disabled="keyRequestSubmitting || requestForm.objectives.trim().length < 20"
+									>
+										{{ keyRequestSubmitting ? $t('kit.press.request_own_key_submitting') : $t('kit.press.request_own_key_submit') }}
+									</button>
+								</form>
+							</template>
+						</section>
+
 						<section v-if="kit.press_contact_email" id="contact" class="kit-block">
 							<div class="kit-cta">
 								<h2>{{ $t('kit.press.covering', { name: kit.name }) }}</h2>
@@ -455,7 +607,7 @@ useHead(() => ({
 			</section>
 
 			<footer class="kit-footer">
-				<p class="kit-footer__text">{{ $t('kit.press.made_with') }} <strong>Mundo Gamer Agency</strong></p>
+				<p v-if="!kit.is_premium" class="kit-footer__text">{{ $t('kit.press.made_with') }} <strong>Mundo Gamer Agency</strong></p>
 				<a :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener" class="kit-footer__cta">{{ $t('kit.press.create_yours') }}</a>
 			</footer>
 		</template>