@mundogamernetwork/shared-ui 1.16.16 → 1.16.19

package/components/indie-wall/MediaKitWallBlock.vue

@@ -45,6 +45,11 @@ const wallUrl = computed(() => {
 	return localePath(`/${wall.value.url_prefix || 'mural'}/${wall.value.slug}`)
 })
 
+const detailPixelPageUrl = computed(() => {
+	if (!wall.value || !detailPixel.value) return '#'
+	return localePath(`/${wall.value.url_prefix || 'mural'}/${wall.value.slug}/pixel/${detailPixel.value.id}`)
+})
+
 function onTapEmpty(coord: { x: number; y: number }) {
 	stepperInitialSelection.value = { x: coord.x, y: coord.y, w: 1, h: 1 }
 	stepperStartStep.value = 1
@@ -279,6 +284,9 @@ onUnmounted(() => {
 						<p v-if="detailPixel.link">
 							<a :href="detailPixel.link" target="_blank" rel="noopener" class="mkw-detail-link">{{ detailPixel.link }}</a>
 						</p>
+						<NuxtLink :to="detailPixelPageUrl" class="mkw-detail-share-link" @click="detailPixel = null">
+							{{ $t('tv.dashboard.indie_wall.share_view_page') }} →
+						</NuxtLink>
 					</div>
 				</div>
 			</Transition>
@@ -387,6 +395,13 @@ onUnmounted(() => {
 	color: var(--kit-accent, #D297FF); font-size: 0.75rem; word-break: break-all; text-decoration: none;
 	&:hover { text-decoration: underline; }
 }
+.mkw-detail-share-link {
+	display: block; margin-top: 10px; text-align: center;
+	border: 1px solid var(--kit-accent, #D297FF); color: var(--kit-accent, #D297FF);
+	font-size: 0.75rem; font-weight: 600; padding: 7px 10px; text-decoration: none;
+	transition: background 0.15s, color 0.15s;
+	&:hover { background: var(--kit-accent, #D297FF); color: var(--kit-accent-ink, #13161C); }
+}
 
 .mkw-fade-enter-active, .mkw-fade-leave-active { transition: opacity 0.12s; }
 .mkw-fade-enter-from, .mkw-fade-leave-to { opacity: 0; }

package/components/indie-wall/SupportStepper.vue

@@ -21,7 +21,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
 	(e: 'close'): void
-	(e: 'support-success'): void
+	(e: 'support-success', payload: { pixelId?: number | string }): void
 }>()
 
 const { t } = useI18n()
@@ -182,7 +182,10 @@ async function confirm() {
 			errorMsg.value = t('tv.dashboard.indie_wall.error_gateway')
 			return
 		}
-		emit('support-success')
+		// `pixel_id` is the field name used on the payer_action/redirect path
+		// above; the immediate-success path (no gateway redirect needed) returns
+		// the full created pixel record instead, so fall back to its `id`.
+		emit('support-success', { pixelId: data?.pixel_id ?? data?.id })
 		emit('close')
 	} catch (err: any) {
 		const apiError = err?.response?.data?.error

package/components/ui/MgHeaderAvatarToggle.vue

@@ -46,6 +46,7 @@ const initialized = computed(() => {
 			:width="props.size"
 			:height="props.size"
 			class="mg-avatar-img"
+			alt=""
 		/>
 		<template #fallback>
 			<div
@@ -81,5 +82,32 @@ const initialized = computed(() => {
 
 .mg-avatar-img {
 	display: block;
+	// Host apps wrap this in a fixed-size clickable link/button and expect
+	// the whole box to be clickable — the toggle handler lives on that
+	// wrapper, not here. Every host's own scoped `pointer-events: none` rule
+	// for this image (written against its OWN scope id) silently never
+	// matched: Vue's scoped-CSS attribute only reaches a child component's
+	// *root* node, and this <img> sits behind a v-if/v-else-if/v-else
+	// fragment here — one of several possible roots, not "the" root — so it
+	// never received the host's scope attribute. Click bubbling from the
+	// image up to the wrapper's handler still works regardless, but the
+	// image was still eating the browser's native hover/cursor/drag
+	// affordances (e.g. showing a "save image" cursor, or letting the
+	// browser start an image-drag mid-click) that a host expects its own
+	// wrapper to own. Setting it here — the actual owning component — means
+	// every host gets this for free instead of each one needing its own
+	// (broken) copy of the same rule.
+	pointer-events: none;
+	// `:width`/`:height` above render as HTML attributes, sized against the
+	// intended box — but a host's wrapper can end up 1-2px smaller once its
+	// own border/padding is applied (border-box sizing shrinks the content
+	// box the wrapper's `width: 100%` resolves against, while this image's
+	// pixel attributes don't know about that and keep its originally
+	// requested size), so the image quietly overflowed its own clickable
+	// wrapper on every side. Filling the wrapper via CSS instead keeps the
+	// image exactly inside whatever box the host actually gives it.
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }
 </style>

package/components/ui/MgHeaderUIUser.vue

@@ -529,6 +529,11 @@ const handleToggleOnline = () => {
 			// Was a hardcoded blue on every host — see the .no-avatar-wrapper
 			// comment above for why this fallback chain replaces it.
 			border: 1px solid var(--highlight-color, var(--header-active-fg, var(--active)));
+			// MGN is angular by brand decision — explicit like .avatar-img/
+			// .no-avatar-wrapper above, since some hosts' own global stylesheet
+			// (e.g. a Bootstrap import) sets a default radius on <a>/<button>
+			// that this class would otherwise silently inherit.
+			border-radius: 0;
 			font-weight: 400;
 			font-size: 0.75rem;
 			color: var(--active);

package/components/ui/MgPlatformSwitcherSidebar.vue

@@ -5,13 +5,23 @@
         <p class="sidebar-menu__intro">{{ $t('sidebar.platform_switcher_intro') }}</p>
         <ul class="menus">
           <li v-for="system in networkSystems" :key="system.id">
-            <a class="sidebar__logo" :href="system.domain" target="_blank" rel="noopener noreferrer" :aria-label="ariaLabelFor(system)">
+            <component
+              :is="system.comingSoon ? 'span' : 'a'"
+              class="sidebar__logo"
+              :class="{ 'sidebar__logo--disabled': system.comingSoon }"
+              :href="system.comingSoon ? undefined : system.domain"
+              :target="system.comingSoon ? undefined : '_blank'"
+              :rel="system.comingSoon ? undefined : 'noopener noreferrer'"
+              :aria-disabled="system.comingSoon || undefined"
+              :aria-label="ariaLabelFor(system)"
+            >
               <img :src="colorMode.value === 'light' ? system.logo_light : system.logo_dark" :alt="system.name" />
               <span class="sidebar__tooltip" role="tooltip">
                 <strong>{{ system.name }}</strong>
-                <span v-if="descriptionFor(system.slug)">{{ descriptionFor(system.slug) }}</span>
+                <span v-if="system.comingSoon">{{ $t('sidebar.coming_soon') }}</span>
+                <span v-else-if="descriptionFor(system.slug)">{{ descriptionFor(system.slug) }}</span>
               </span>
-            </a>
+            </component>
           </li>
         </ul>
       </div>
@@ -56,8 +66,15 @@ interface NetworkSystem {
   logo_light: string;
   status: number;
   slug: string;
+  comingSoon?: boolean;
 }
 
+// mundogamer.shop was lost/hijacked (now parked/serving unrelated content)
+// but mg_network_systems still carries it as an active prod_url — the API
+// can't be trusted for this one entry until that's fixed at the source, so
+// force it non-clickable here instead of linking out to it.
+const HIJACKED_SLUGS = new Set(['shop']);
+
 // Fallback data - previous static logos
 const fallbackSystems: NetworkSystem[] = [
   { id: 1, name: 'Mundo Gamer Academy', domain: 'https://mundogamer.academy', logo_dark: '/imgs/dark/academy.svg', logo_light: '/imgs/light/academy.svg', status: 1, slug: 'academy' },
@@ -67,7 +84,7 @@ const fallbackSystems: NetworkSystem[] = [
   { id: 5, name: 'Mundo Gamer Community', domain: 'https://mundogamer.community', logo_dark: '/imgs/dark/community.svg', logo_light: '/imgs/light/community.svg', status: 1, slug: 'community' },
   { id: 6, name: 'Mundo Gamer Jobs', domain: 'https://mundogamerjobs.com', logo_dark: '/imgs/dark/jobs.svg', logo_light: '/imgs/light/jobs.svg', status: 1, slug: 'jobs' },
   { id: 7, name: 'Mundo Gamer Network', domain: 'https://mundogamer.network', logo_dark: '/imgs/dark/network.svg', logo_light: '/imgs/light/network.svg', status: 1, slug: 'network' },
-  { id: 8, name: 'Mundo Gamer Shop', domain: 'https://mundogamer.shop', logo_dark: '/imgs/dark/shop.svg', logo_light: '/imgs/light/shop.svg', status: 1, slug: 'shop' },
+  { id: 8, name: 'Mundo Gamer Shop', domain: 'https://mundogamer.shop', logo_dark: '/imgs/dark/shop.svg', logo_light: '/imgs/light/shop.svg', status: 1, slug: 'shop', comingSoon: true },
   { id: 9, name: 'Mundo Gamer Token', domain: 'https://mundogamer.token', logo_dark: '/imgs/dark/token.svg', logo_light: '/imgs/light/token.svg', status: 1, slug: 'token' },
   { id: 10, name: 'Mundo Gamer TV', domain: 'https://mundogamer.tv', logo_dark: '/imgs/dark/tv.svg', logo_light: '/imgs/light/tv.svg', status: 1, slug: 'tv' },
 ];
@@ -104,7 +121,8 @@ async function fetchNetworkSystems() {
         logo_dark: slug ? `/imgs/dark/${slug}.svg` : (system.url_reduced_image_src || ''),
         logo_light: slug ? `/imgs/light/${slug}.svg` : (system.url_reduced_image_src || ''),
         status: system.status ? 1 : 0,
-        slug
+        slug,
+        comingSoon: HIJACKED_SLUGS.has(slug)
       };
     });
   } catch (error) {
@@ -124,6 +142,7 @@ function descriptionFor(slug: string): string {
 }
 
 function ariaLabelFor(system: NetworkSystem): string {
+  if (system.comingSoon) return `${system.name} — ${t('sidebar.coming_soon')}`;
   const description = descriptionFor(system.slug);
   return description ? `${system.name} — ${description}` : system.name;
 }
@@ -218,6 +237,11 @@ onMounted(() => {
     &__logo {
       position: relative;
       display: inline-flex;
+
+      &--disabled {
+        cursor: default;
+        opacity: 0.4;
+      }
     }
 
     &__tooltip {

package/locales/de.json

@@ -165,6 +165,7 @@
         "follow_campaign": "Benachrichtige mich bei Eröffnung",
         "following": "Du wirst benachrichtigt",
         "status_closed": "Closed",
+        "status_closed_action_pending": "Geschlossen — eine Aktion ist noch nötig",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
         "days": "days",
@@ -310,6 +311,7 @@
       "indie_wall": {
         "about_section": "Über die Wall",
         "anonymous": "Anonym",
+        "back_to_wall": "Zurück zur Wall",
         "cancel": "Abbrechen",
         "confirm_support": "Unterstützung bestätigen",
         "cta_create_btn": "Create my account",
@@ -374,14 +376,25 @@
         "reached": "Erreicht",
         "recent_supporters": "Recent supporters",
         "share_copy_link": "Copy link",
+        "share_download_image": "Bild herunterladen",
+        "share_generate_failed": "Das Video konnte nicht erstellt werden. Bitte versuche es erneut.",
+        "share_generate_video": "Enthüllungsvideo erstellen",
+        "share_generating": "Dein Video wird erstellt… das kann einen Moment dauern.",
         "share_join_cta": "Diese Wall ebenfalls unterstützen",
+        "share_link_copied": "Link kopiert!",
         "share_pixel_cta": "Diese Unterstützung teilen",
         "share_pixel_default_desc": "See who is supporting the {wall} wall.",
         "share_pixel_text": "{name} supported the {wall} wall. Join in and support too.",
         "share_pixel_title": "{name} supported {wall}",
+        "share_prompt_cta": "Mein Pixel teilen",
+        "share_prompt_desc": "Teile dein Pixel mit deinen Freunden und Followern.",
+        "share_prompt_skip": "Vielleicht später",
+        "share_prompt_title": "Deine Unterstützung ist live!",
         "share_via_facebook": "Share on Facebook",
         "share_via_twitter": "Share on X",
         "share_via_whatsapp": "Share on WhatsApp",
+        "share_video_ready": "Dein Enthüllungsvideo ist fertig!",
+        "share_view_page": "Freigabeseite ansehen",
         "sold": "sold",
         "spots_unit": "Pixel",
         "step_back": "Back",

package/locales/en.json

@@ -165,6 +165,7 @@
         "follow_campaign": "Notify me when it opens",
         "following": "You'll be notified",
         "status_closed": "Closed",
+        "status_closed_action_pending": "Closed — action needed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
         "days": "days",
@@ -310,6 +311,7 @@
       "indie_wall": {
         "about_section": "About the wall",
         "anonymous": "Anonymous",
+        "back_to_wall": "Back to the wall",
         "cancel": "Cancel",
         "confirm_support": "Confirm support",
         "cta_create_btn": "Create my account",
@@ -374,14 +376,25 @@
         "reached": "Reached",
         "recent_supporters": "Recent supporters",
         "share_copy_link": "Copy link",
+        "share_download_image": "Download image",
+        "share_generate_failed": "Could not generate the video. Please try again.",
+        "share_generate_video": "Generate reveal video",
+        "share_generating": "Generating your video… this can take a bit.",
         "share_join_cta": "Support this wall too",
+        "share_link_copied": "Link copied!",
         "share_pixel_cta": "Share this support",
         "share_pixel_default_desc": "See who is supporting the {wall} wall.",
         "share_pixel_text": "{name} supported the {wall} wall. Join in and support too.",
         "share_pixel_title": "{name} supported {wall}",
+        "share_prompt_cta": "Share your pixel",
+        "share_prompt_desc": "Share your pixel with your friends and followers.",
+        "share_prompt_skip": "Maybe later",
+        "share_prompt_title": "Your support is live!",
         "share_via_facebook": "Share on Facebook",
         "share_via_twitter": "Share on X",
         "share_via_whatsapp": "Share on WhatsApp",
+        "share_video_ready": "Your reveal video is ready!",
+        "share_view_page": "View share page",
         "sold": "sold",
         "spots_unit": "pixels",
         "step_back": "Back",

package/locales/es.json

@@ -165,6 +165,7 @@
         "follow_campaign": "Avísame cuando abra",
         "following": "Te avisaremos",
         "status_closed": "Cerrada",
+        "status_closed_action_pending": "Cerrada — tienes una acción pendiente",
         "status_ending": "Terminando pronto",
         "status_exhausted": "Agotada",
         "days": "días",
@@ -310,6 +311,7 @@
       "indie_wall": {
         "about_section": "Sobre este mural",
         "anonymous": "Anónimo",
+        "back_to_wall": "Volver al mural",
         "cancel": "Cancelar",
         "confirm_support": "Confirmar y Pagar",
         "cta_create_btn": "Crear Cuenta",
@@ -374,14 +376,25 @@
         "reached": "Alcanzada",
         "recent_supporters": "Seguidores Recientes",
         "share_copy_link": "Copiar enlace",
+        "share_download_image": "Descargar imagen",
+        "share_generate_failed": "No se pudo generar el video. Inténtalo de nuevo.",
+        "share_generate_video": "Generar video de revelación",
+        "share_generating": "Generando tu video… esto puede tardar un momento.",
         "share_join_cta": "Apoya este mural también",
+        "share_link_copied": "¡Enlace copiado!",
         "share_pixel_cta": "Comparte tu apoyo",
         "share_pixel_default_desc": "¡Únete para apoyar {wall}!",
         "share_pixel_text": "¡{name} está apoyando {wall}! Échale un vistazo:",
         "share_pixel_title": "{name} apoya {wall} · Mundo Gamer Wall",
+        "share_prompt_cta": "Compartir mi píxel",
+        "share_prompt_desc": "Comparte tu píxel con tus amigos y seguidores.",
+        "share_prompt_skip": "Quizás más tarde",
+        "share_prompt_title": "¡Tu apoyo ya está publicado!",
         "share_via_facebook": "Compartir en Facebook",
         "share_via_twitter": "Compartir en X",
         "share_via_whatsapp": "Compartir en WhatsApp",
+        "share_video_ready": "¡Tu video de revelación está listo!",
+        "share_view_page": "Ver página para compartir",
         "sold": "vendidos",
         "spots_unit": "píxeles",
         "step_back": "Volver",

package/locales/pt-BR.json

@@ -165,6 +165,7 @@
         "follow_campaign": "Me avise quando abrir",
         "following": "Você será avisado",
         "status_closed": "Closed",
+        "status_closed_action_pending": "Encerrada — falta uma ação sua",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
         "days": "days",
@@ -310,6 +311,7 @@
       "indie_wall": {
         "about_section": "Sobre o mural",
         "anonymous": "Anônimo",
+        "back_to_wall": "Voltar ao mural",
         "cancel": "Cancelar",
         "confirm_support": "Confirmar apoio",
         "cta_create_btn": "Criar minha conta",
@@ -374,14 +376,25 @@
         "reached": "Concluída",
         "recent_supporters": "Apoiadores recentes",
         "share_copy_link": "Copiar link",
+        "share_download_image": "Baixar imagem",
+        "share_generate_failed": "Não foi possível gerar o vídeo. Tente novamente.",
+        "share_generate_video": "Gerar vídeo de revelação",
+        "share_generating": "Gerando seu vídeo… isso pode levar um instante.",
         "share_join_cta": "Apoiar este mural também",
+        "share_link_copied": "Link copiado!",
         "share_pixel_cta": "Compartilhe este apoio",
         "share_pixel_default_desc": "Veja quem está apoiando o mural {wall}.",
         "share_pixel_text": "{name} apoiou o mural {wall}. Venha apoiar também.",
         "share_pixel_title": "{name} apoiou {wall}",
+        "share_prompt_cta": "Compartilhar meu pixel",
+        "share_prompt_desc": "Compartilhe seu pixel com seus amigos e seguidores.",
+        "share_prompt_skip": "Talvez depois",
+        "share_prompt_title": "Seu apoio está no ar!",
         "share_via_facebook": "Compartilhar no Facebook",
         "share_via_twitter": "Compartilhar no X",
         "share_via_whatsapp": "Compartilhar no WhatsApp",
+        "share_video_ready": "Seu vídeo de revelação está pronto!",
+        "share_view_page": "Ver página de compartilhamento",
         "sold": "vendidos",
         "spots_unit": "pixels",
         "step_back": "Voltar",

package/locales/ro.json

@@ -165,6 +165,7 @@
         "follow_campaign": "Anunță-mă când se deschide",
         "following": "Vei fi anunțat",
         "status_closed": "Closed",
+        "status_closed_action_pending": "Închisă — mai ai o acțiune de făcut",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
         "days": "days",
@@ -310,6 +311,7 @@
       "indie_wall": {
         "about_section": "Despre mural",
         "anonymous": "Anonim",
+        "back_to_wall": "Înapoi la mural",
         "cancel": "Anulează",
         "confirm_support": "Confirmă susținerea",
         "cta_create_btn": "Create my account",
@@ -374,14 +376,25 @@
         "reached": "Atins",
         "recent_supporters": "Recent supporters",
         "share_copy_link": "Copy link",
+        "share_download_image": "Descarcă imaginea",
+        "share_generate_failed": "Videoclipul nu a putut fi generat. Încearcă din nou.",
+        "share_generate_video": "Generează videoclipul de dezvăluire",
+        "share_generating": "Se generează videoclipul tău… poate dura puțin.",
         "share_join_cta": "Susține și tu acest mural",
+        "share_link_copied": "Link copiat!",
         "share_pixel_cta": "Distribuie această susținere",
         "share_pixel_default_desc": "See who is supporting the {wall} wall.",
         "share_pixel_text": "{name} supported the {wall} wall. Join in and support too.",
         "share_pixel_title": "{name} supported {wall}",
+        "share_prompt_cta": "Distribuie pixelul meu",
+        "share_prompt_desc": "Distribuie pixelul tău prietenilor și urmăritorilor tăi.",
+        "share_prompt_skip": "Poate mai târziu",
+        "share_prompt_title": "Susținerea ta este live!",
         "share_via_facebook": "Share on Facebook",
         "share_via_twitter": "Share on X",
         "share_via_whatsapp": "Share on WhatsApp",
+        "share_video_ready": "Videoclipul tău de dezvăluire este gata!",
+        "share_view_page": "Vezi pagina de distribuire",
         "sold": "sold",
         "spots_unit": "pixeli",
         "step_back": "Back",

package/package.json

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

package/pages/key-campaigns/.claude-flow/data/pending-insights.jsonl

@@ -0,0 +1 @@
+{"type":"edit","file":"/Users/guilhermecortez/Documents/GitHub/shared-ui/pages/key-campaigns/[slug].vue","timestamp":1788277610717,"sessionId":null}

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

@@ -356,6 +356,18 @@ const effectiveKeyStatus = computed(() => {
 const effectiveRequestId = computed(() => userRequestId.value ?? campaign.value?.request_id ?? null)
 const effectiveKeyItems = computed(() => userKeyItemId.value ?? campaign.value?.request_item_id ?? null)
 
+// A creator who already holds an approved-not-revealed (3) or waiting-material
+// (4) request still has something to do here even after the campaign itself
+// closes to new requests — reveal/send-materials submission is never actually
+// gated by the campaign's own end date (see key-materials.vue / backend). The
+// top status badge below used to just say "Closed" regardless, which read as
+// "too late" to a returning creator and buried the still-working action card
+// underneath it.
+const hasPendingObligation = computed(() => {
+	const status = effectiveKeyStatus.value
+	return status === 3 || status === 4
+})
+
 // ------------------------------------------------------------------
 // Restriction badges
 // ------------------------------------------------------------------
@@ -866,7 +878,9 @@ onMounted(async () => {
 										campaignNotYetOpen
 											? $t("keys.campaigns.campaign.status_upcoming")
 											: isCampaignExpired
-												? $t("keys.campaigns.campaign.status_closed")
+												? (hasPendingObligation
+													? $t("keys.campaigns.campaign.status_closed_action_pending")
+													: $t("keys.campaigns.campaign.status_closed"))
 												: (campaign?.available_count ?? 0) === 0
 													? $t("keys.campaigns.campaign.status_exhausted")
 													: hasNoDateLimit

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

@@ -244,7 +244,7 @@ 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:*/
+// shared-ui/pages/mural/[slug]/index.vue for why (useSeoMeta's og:*/twitter:*/
 // description overrides were silently dropped in this app).
 useHead(() => ({
 	title: seoTitle.value,

package/pages/mural/{[slug].vue → [slug]/index.vue}

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { fetchPublicWall, fetchPublicWallGoals, getWallSupporters } from '../../services/indieWallService'
-import SupportStepper from '../../components/indie-wall/SupportStepper.vue'
-import MuralCanvas from '../../components/indie-wall/MuralCanvas.vue'
-import IndieWallLeaderboard from '../../components/indie-wall/IndieWallLeaderboard.vue'
+import { fetchPublicWall, fetchPublicWallGoals, getWallSupporters } from '../../../services/indieWallService'
+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, locale } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const wallSlug = route.params.slug as string
 const authStore = useAuthStore()
+const localePath = useLocalePath()
 
 const preX = route.query.x !== undefined ? parseInt(route.query.x as string) : null
 const preY = route.query.y !== undefined ? parseInt(route.query.y as string) : null
@@ -83,6 +84,7 @@ function finalizePending(pixelId: number | string) {
         getWallSupporters(wallSlug, { per_page: 1000 }).then(res => {
             supporters.value = (res.data?.data ?? []).filter((s: any) => s.status !== false)
         }).catch(() => { /* keep current state if refresh fails */ })
+        openSharePrompt(pixelId)
     }
 }
 
@@ -267,7 +269,25 @@ function onStepperClose() {
 
 const showGuestCta = ref(false)
 
-async function onStepperSuccess() {
+const showSharePrompt = ref(false)
+const sharePromptPixelId = ref<number | string | null>(null)
+
+function openSharePrompt(pixelId: number | string | null | undefined) {
+    if (!pixelId) return
+    sharePromptPixelId.value = pixelId
+    showSharePrompt.value = true
+}
+
+function closeSharePrompt() {
+    showSharePrompt.value = false
+}
+
+const sharePromptUrl = computed(() => {
+    if (!sharePromptPixelId.value) return ''
+    return localePath(`/mural/${wallSlug}/pixel/${sharePromptPixelId.value}`)
+})
+
+async function onStepperSuccess(payload: { pixelId?: number | string } = {}) {
     showStepper.value = false
     if (isPopup.value) {
         notifyOpenerAndClose({ wallSlug })
@@ -275,6 +295,8 @@ async function onStepperSuccess() {
     }
     if (!authStore.signedIn) {
         showGuestCta.value = true
+    } else {
+        openSharePrompt(payload?.pixelId)
     }
     await loadWall()
 }
@@ -327,6 +349,12 @@ const sharePixelUrl = computed(() => {
     const base = `${requestUrl.origin}${route.path}`
     return `${base}?pixel=${detailPixel.value.id}`
 })
+// Link to the pixel's own dedicated, SEO-indexable share page (separate from
+// sharePixelUrl above, which is the ?pixel= deep link into this same page).
+const pixelPageUrl = computed(() => {
+    if (!detailPixel.value) return ''
+    return localePath(`/mural/${wallSlug}/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 })
@@ -682,6 +710,22 @@ onUnmounted(() => {
             </div>
         </Transition>
 
+        <Transition name="fade">
+            <div v-if="showSharePrompt" class="guest-cta-overlay" @click.self="closeSharePrompt">
+                <div class="guest-cta-box">
+                    <button class="guest-cta-dismiss" type="button" @click="closeSharePrompt">×</button>
+                    <h3 class="guest-cta-title">{{ $t('tv.dashboard.indie_wall.share_prompt_title') }}</h3>
+                    <p class="guest-cta-desc">{{ $t('tv.dashboard.indie_wall.share_prompt_desc') }}</p>
+                    <NuxtLink :to="sharePromptUrl" class="guest-cta-btn" @click="closeSharePrompt">
+                        {{ $t('tv.dashboard.indie_wall.share_prompt_cta') }}
+                    </NuxtLink>
+                    <button class="guest-cta-skip" type="button" @click="closeSharePrompt">
+                        {{ $t('tv.dashboard.indie_wall.share_prompt_skip') }}
+                    </button>
+                </div>
+            </div>
+        </Transition>
+
         <Transition name="fade">
             <SupportStepper
                 v-if="showStepper && wall"
@@ -755,6 +799,9 @@ onUnmounted(() => {
                         <!-- ── Share this pixel ─────────────────────────────────────── -->
                         <div class="detail-share">
                             <p class="detail-share-title">{{ $t('tv.dashboard.indie_wall.share_pixel_cta') }}</p>
+                            <NuxtLink :to="pixelPageUrl" class="detail-share-page-link" @click="closePixelDetail">
+                                {{ $t('tv.dashboard.indie_wall.share_view_page') }} →
+                            </NuxtLink>
                             <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')">
@@ -1111,6 +1158,16 @@ onUnmounted(() => {
 .detail-share-title {
     margin: 0 0 8px; font-size: 0.78rem; color: var(--secondary-info-fg, #aaa);
 }
+.detail-share-page-link {
+    display: block;
+    text-align: center;
+    border: 1px solid var(--chip-text, #D297FF);
+    color: var(--chip-text, #D297FF);
+    font-size: 0.78rem; font-weight: 600;
+    padding: 8px 10px; margin-bottom: 10px;
+    text-decoration: none; transition: background 0.15s, color 0.15s;
+    &:hover { background: var(--chip-text, #D297FF); color: #13161C; }
+}
 .detail-share-row {
     display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
 }

package/pages/mural/[slug]/pixel/[pixelId].vue

@@ -0,0 +1,456 @@
+<script setup lang="ts">
+import {
+	fetchPublicWall,
+	getWallPixel,
+	requestWallPixelShareRender,
+	pollWallPixelShareRender,
+} from '../../../../services/indieWallService'
+
+const { t, locale } = useI18n()
+const route = useRoute()
+const localePath = useLocalePath()
+const wallSlug = route.params.slug as string
+const pixelId = route.params.pixelId as string
+
+// SSR-safe fetch: the wall must be resolved first (its numeric id, not the
+// slug, is what the pixel/share-render endpoints key off — see
+// IndieWallController::showPixel / IndieWallPixelShareController, which
+// compare indie_wall_id directly and do not resolve a slug like show()/
+// supporters() do).
+const { data, error } = await useAsyncData(`mural-pixel-${wallSlug}-${pixelId}`, async () => {
+	const wallRes = await fetchPublicWall(wallSlug)
+	const wall = wallRes.data?.data || wallRes.data
+	if (!wall?.id) return null
+	const pixelRes = await getWallPixel(wall.id, pixelId)
+	const pixel = pixelRes.data?.data || pixelRes.data
+	if (!pixel?.id) return null
+	return { wall, pixel }
+})
+
+if (error.value || !data.value?.wall || !data.value?.pixel) {
+	throw createError({ statusCode: 404, statusMessage: 'Pixel not found' })
+}
+
+const wall = ref<any>(data.value.wall)
+const pixel = ref<any>(data.value.pixel)
+
+// ── Display helpers (duplicated from pages/mural/[slug]/index.vue rather
+// than shared, matching this repo's existing pattern in
+// components/indie-wall/MediaKitWallBlock.vue, which duplicates the same
+// small pure functions instead of extracting a composable). ─────────────────
+function supporterDisplayName(s: any): string {
+	if (!s) return t('tv.dashboard.indie_wall.anonymous')
+	if (s.is_anonymous) return t('tv.dashboard.indie_wall.anonymous')
+	return s.user?.nickname
+		|| s.user?.username
+		|| s.user?.full_name
+		|| s.user?.name
+		|| s.guest_name
+		|| t('tv.dashboard.indie_wall.anonymous')
+}
+
+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 displayName = computed(() => supporterDisplayName(pixel.value))
+
+// ── SEO ───────────────────────────────────────────────────────────────────
+const requestUrl = useRequestURL()
+
+const seoTitle = computed(() => t('tv.dashboard.indie_wall.share_pixel_title', {
+	name: displayName.value,
+	wall: wall.value?.name,
+}))
+const seoDescription = computed(() =>
+	pixel.value?.supporter_message
+	|| t('tv.dashboard.indie_wall.share_pixel_default_desc', { wall: wall.value?.name }),
+)
+// share_image_url (auto-generated branded reveal) takes priority, then the
+// pixel's own uploaded image, then the wall's cover/logo as a last resort.
+const seoImage = computed(() =>
+	pixel.value?.share_image_url
+	|| pixel.value?.image_url
+	|| wall.value?.cover_image_url
+	|| wall.value?.logo_url
+	|| '',
+)
+
+// Raw useHead meta-array form — same proven pattern as
+// pages/mural/[slug]/index.vue (see the comment there: useSeoMeta silently
+// dropped og:*/twitter:*/description overrides 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 },
+		...(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 }] : []),
+	],
+}))
+
+// ── Share: copy / native share the page link ────────────────────────────────
+const shareText = computed(() => t('tv.dashboard.indie_wall.share_pixel_text', {
+	name: displayName.value,
+	wall: wall.value?.name,
+}))
+const shareTwitterUrl = computed(() => `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText.value)}&url=${encodeURIComponent(requestUrl.href)}`)
+const shareWhatsappUrl = computed(() => `https://wa.me/?text=${encodeURIComponent(`${shareText.value} ${requestUrl.href}`)}`)
+const shareFacebookUrl = computed(() => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(requestUrl.href)}`)
+
+const linkCopied = ref(false)
+async function shareOrCopyLink() {
+	if (typeof navigator !== 'undefined' && (navigator as any).share) {
+		try {
+			await (navigator as any).share({ title: seoTitle.value, text: shareText.value, url: requestUrl.href })
+			return
+		} catch {
+			// user cancelled the native sheet, or it's unsupported for this
+			// context — fall back to clipboard copy below.
+		}
+	}
+	try {
+		await navigator.clipboard.writeText(requestUrl.href)
+		linkCopied.value = true
+		setTimeout(() => { linkCopied.value = false }, 2000)
+	} catch { /* clipboard unavailable */ }
+}
+
+// ── Download the pixel's own image ──────────────────────────────────────────
+const pixelDownloadImage = computed(() => pixel.value?.share_image_url || pixel.value?.image_url || '')
+
+// ── Generate-on-demand branded reveal video ─────────────────────────────────
+const renderState = ref<'idle' | 'rendering' | 'done' | 'failed'>('idle')
+const renderAssetUrl = ref<string | null>(null)
+let renderPollTimer: ReturnType<typeof setInterval> | null = null
+
+function stopRenderPolling() {
+	if (renderPollTimer) {
+		clearInterval(renderPollTimer)
+		renderPollTimer = null
+	}
+}
+
+function pollRenderJob(jobId: string) {
+	stopRenderPolling()
+	renderPollTimer = setInterval(async () => {
+		try {
+			const res = await pollWallPixelShareRender(wall.value.id, pixel.value.id, jobId)
+			const status = res.data?.status
+			if (status === 'done') {
+				renderAssetUrl.value = res.data?.assetUrl || null
+				renderState.value = renderAssetUrl.value ? 'done' : 'failed'
+				stopRenderPolling()
+			} else if (status === 'failed') {
+				renderState.value = 'failed'
+				stopRenderPolling()
+			}
+			// any other status (e.g. 'rendering') keeps the loop going
+		} catch {
+			// transient network hiccup on a single poll — keep trying
+		}
+	}, 3000)
+}
+
+async function generateReveal() {
+	if (!wall.value?.id || !pixel.value?.id || renderState.value === 'rendering') return
+	renderState.value = 'rendering'
+	renderAssetUrl.value = null
+	try {
+		const res = await requestWallPixelShareRender(wall.value.id, pixel.value.id, 'video')
+		const jobId = res.data?.jobId
+		if (!jobId) throw new Error('missing_job_id')
+		pollRenderJob(jobId)
+	} catch {
+		renderState.value = 'failed'
+	}
+}
+
+const renderAssetIsVideo = computed(() =>
+	!!renderAssetUrl.value && /\.(mp4|webm|mov)(\?|$)/i.test(renderAssetUrl.value),
+)
+
+onUnmounted(() => stopRenderPolling())
+
+// ── Back to wall ─────────────────────────────────────────────────────────────
+const backToWallUrl = computed(() => localePath(`/mural/${wallSlug}`))
+</script>
+
+<template>
+	<div class="pixel-page">
+		<NuxtLink :to="backToWallUrl" class="back-link">
+			← {{ $t('tv.dashboard.indie_wall.back_to_wall') }}
+		</NuxtLink>
+
+		<div class="pixel-card">
+			<div class="pixel-hero" :style="{ background: pixel.background_color || '#272930' }">
+				<img v-if="pixel.share_image_url || pixel.image_url" :src="pixel.share_image_url || pixel.image_url" alt="" />
+				<span v-else class="pixel-initial">{{ (displayName || '?')[0].toUpperCase() }}</span>
+			</div>
+
+			<div class="pixel-body">
+				<p class="pixel-name">{{ displayName }}</p>
+				<p v-if="pixel.title && pixel.title !== displayName" class="pixel-title">{{ pixel.title }}</p>
+				<p v-if="pixel.supporter_message" class="pixel-msg">"{{ pixel.supporter_message }}"</p>
+
+				<div class="pixel-amount-row">
+					<span class="pixel-amount-label">{{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+					<span class="pixel-amount-value">{{ formatMoney(Number(pixel.amount_paid), wall?.currency) }}</span>
+				</div>
+
+				<div class="pixel-chips">
+					<span class="pixel-chip">{{ pixel.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+					<span class="pixel-chip">{{ $t('tv.dashboard.indie_wall.mural_position') }} ({{ pixel.x }}, {{ pixel.y }})</span>
+				</div>
+
+				<a v-if="pixel.link" :href="pixel.link" target="_blank" rel="noopener" class="pixel-link">
+					{{ pixel.link }}
+				</a>
+
+				<p class="pixel-wall-context">
+					{{ $t('tv.dashboard.indie_wall.mural_by', { name: wall.owner_nickname || wall.owner_name || wall.name }) }}
+				</p>
+
+				<!-- ── Share ─────────────────────────────────────────────────── -->
+				<div class="pixel-share">
+					<p class="pixel-share-title">{{ $t('tv.dashboard.indie_wall.share_pixel_cta') }}</p>
+
+					<div class="pixel-share-row">
+						<a :href="shareTwitterUrl" target="_blank" rel="noopener" class="pixel-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_twitter')">𝕏</a>
+						<a :href="shareWhatsappUrl" target="_blank" rel="noopener" class="pixel-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="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="pixel-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_facebook')">f</a>
+						<button type="button" class="pixel-share-btn" @click="shareOrCopyLink" :aria-label="$t('tv.dashboard.indie_wall.share_copy_link')">
+							{{ linkCopied ? '✓' : '🔗' }}
+						</button>
+					</div>
+					<p v-if="linkCopied" class="pixel-share-copied">{{ $t('tv.dashboard.indie_wall.share_link_copied') }}</p>
+
+					<a
+						v-if="pixelDownloadImage"
+						:href="pixelDownloadImage"
+						download
+						target="_blank"
+						rel="noopener"
+						class="pixel-share-action"
+					>
+						{{ $t('tv.dashboard.indie_wall.share_download_image') }}
+					</a>
+
+					<button
+						type="button"
+						class="pixel-share-action"
+						:disabled="renderState === 'rendering'"
+						@click="generateReveal"
+					>
+						{{ renderState === 'rendering'
+							? $t('tv.dashboard.indie_wall.share_generating')
+							: $t('tv.dashboard.indie_wall.share_generate_video') }}
+					</button>
+
+					<p v-if="renderState === 'failed'" class="pixel-share-error">
+						{{ $t('tv.dashboard.indie_wall.share_generate_failed') }}
+					</p>
+
+					<div v-if="renderState === 'done' && renderAssetUrl" class="pixel-reveal-result">
+						<p class="pixel-reveal-title">{{ $t('tv.dashboard.indie_wall.share_video_ready') }}</p>
+						<video v-if="renderAssetIsVideo" :src="renderAssetUrl" controls class="pixel-reveal-media" />
+						<img v-else :src="renderAssetUrl" alt="" class="pixel-reveal-media" />
+						<a :href="renderAssetUrl" download target="_blank" rel="noopener" class="pixel-share-action">
+							{{ $t('tv.dashboard.indie_wall.share_download_image') }}
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.pixel-page {
+	max-width: 480px;
+	margin: 0 auto;
+	padding: 32px 16px 100px;
+}
+
+.back-link {
+	display: inline-block;
+	color: var(--secondary-info-fg, #aaa);
+	font-size: 0.82rem;
+	text-decoration: none;
+	margin-bottom: 20px;
+	&:hover { color: var(--title-fg, #fff); }
+}
+
+.pixel-card {
+	background: #13141A;
+	border: 1px solid rgba(107, 21, 172, 0.35);
+	overflow: hidden;
+	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(107, 21, 172, 0.1);
+}
+
+.pixel-hero {
+	width: 100%;
+	height: 260px;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #0d0f13;
+	img { max-width: 100%; max-height: 100%; object-fit: contain; }
+}
+.pixel-initial {
+	font-size: 5rem;
+	font-weight: 700;
+	color: rgba(255, 255, 255, 0.5);
+	line-height: 1;
+}
+
+.pixel-body { padding: 24px; }
+.pixel-name {
+	font-size: 1.3rem;
+	font-weight: 700;
+	color: var(--title-fg, #fff);
+	margin: 0 0 4px;
+}
+.pixel-title {
+	color: var(--secondary-info-fg, #aaa);
+	font-size: 0.85rem;
+	line-height: 1.35;
+	margin: 0 0 10px;
+}
+.pixel-msg {
+	color: var(--secondary-info-fg, #aaa);
+	font-size: 0.92rem;
+	font-style: italic;
+	line-height: 1.5;
+	margin: 0 0 16px;
+}
+.pixel-amount-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: rgba(107, 21, 172, 0.12);
+	border: 1px solid rgba(107, 21, 172, 0.25);
+	padding: 10px 14px;
+	margin-bottom: 12px;
+}
+.pixel-amount-label {
+	font-size: 12px;
+	color: var(--secondary-info-fg, #aaa);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+.pixel-amount-value {
+	font-weight: 700;
+	font-size: 1.15rem;
+	color: var(--chip-text, #D297FF);
+}
+.pixel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
+.pixel-chip {
+	font-size: 11px;
+	color: var(--secondary-info-fg, #aaa);
+	background: rgba(255, 255, 255, 0.05);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	padding: 3px 8px;
+}
+.pixel-link {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	color: var(--chip-text, #D297FF);
+	font-size: 0.8rem;
+	word-break: break-all;
+	text-decoration: none;
+	margin-bottom: 8px;
+	&:hover { text-decoration: underline; }
+}
+.pixel-wall-context {
+	color: var(--secondary-info-fg, #888);
+	font-size: 0.78rem;
+	margin: 0;
+}
+
+.pixel-share {
+	margin-top: 20px;
+	padding-top: 20px;
+	border-top: 1px solid #272930;
+}
+.pixel-share-title {
+	margin: 0 0 10px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--title-fg, #fff);
+}
+.pixel-share-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.pixel-share-btn {
+	width: 36px;
+	height: 36px;
+	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); }
+}
+.pixel-share-copied {
+	color: var(--chip-text, #D297FF);
+	font-size: 0.78rem;
+	margin: 0 0 10px;
+}
+.pixel-share-action {
+	display: block;
+	width: 100%;
+	text-align: center;
+	background: none;
+	border: 1px solid var(--chip-text, #D297FF);
+	color: var(--chip-text, #D297FF);
+	font-weight: 600;
+	font-size: 0.85rem;
+	padding: 10px 14px;
+	margin-top: 8px;
+	cursor: pointer;
+	text-decoration: none;
+	transition: background 0.15s, color 0.15s, opacity 0.15s;
+	&:hover:not(:disabled) { background: var(--chip-text, #D297FF); color: #13161C; }
+	&:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+.pixel-share-error {
+	color: #ff6b6b;
+	font-size: 0.78rem;
+	margin: 8px 0 0;
+}
+.pixel-reveal-result { margin-top: 16px; }
+.pixel-reveal-title {
+	margin: 0 0 8px;
+	font-size: 0.82rem;
+	font-weight: 600;
+	color: var(--title-fg, #fff);
+}
+.pixel-reveal-media {
+	width: 100%;
+	display: block;
+	background: #0d0f13;
+	border: 1px solid #272930;
+}
+</style>

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

@@ -409,7 +409,7 @@ const seoDescription = computed(() => kit.value?.tagline || kit.value?.descripti
 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:*/
+// shared-ui/pages/mural/[slug]/index.vue for why (useSeoMeta's og:*/twitter:*/
 // description overrides get silently dropped in this app).
 useHead(() => ({
 	title: seoTitle.value,

package/pages/wall/[slug]/pixel/[pixelId].vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const route = useRoute()
+const localePath = useLocalePath()
+const slug = route.params.slug as string
+const pixelId = route.params.pixelId as string
+const qs = Object.keys(route.query).length
+	? '?' + new URLSearchParams(route.query as Record<string, string>).toString()
+	: ''
+navigateTo(localePath(`/mural/${slug}/pixel/${pixelId}`) + qs, { replace: true })
+</script>
+
+<template><div /></template>

package/services/indieWallService.ts

@@ -172,3 +172,23 @@ export const listPayouts = (
 
 export const requestPayout = (wallId: number | string) =>
 	iw.post(`/api/v1/indie-walls/${wallId}/payouts`, {})
+
+// ── Pixel detail / share ─────────────────────────────────────────────────────
+
+export const getWallPixel = (wallId: number | string, pixelId: number | string) =>
+	iw.get(`/api/v1/indie-walls/${wallId}/pixels/${pixelId}`)
+
+export const requestWallPixelShareRender = (
+	wallId: number | string,
+	pixelId: number | string,
+	format: 'video' | 'image' = 'video',
+) =>
+	iw.post(`/api/v1/indie-walls/${wallId}/pixels/${pixelId}/share-render`, {
+		format: format === 'video' ? 'mp4' : 'png',
+	})
+
+export const pollWallPixelShareRender = (
+	wallId: number | string,
+	pixelId: number | string,
+	jobId: string,
+) => iw.get(`/api/v1/indie-walls/${wallId}/pixels/${pixelId}/share-render/${jobId}`)