web-player: P9 — tarjetas y grids (MediaCard)

MediaCard pasa a construir su propio arte (src/trackIds vía Artwork
size="fill", o un snippet art a medida) y su botón de reproducir
(onPlay, con scrim y PlayButton glass en hover) en vez de depender de
que cada wrapper le pase un snippet. Sustituye a AlbumCard,
PlaylistCard y MixTile, que se borran junto con MediaGrid.svelte (sus
grids pasan a los @utility grid-cards/grid-cards-lg/grid-tiles/
grid-wide de P1).

format.ts gana albumMeta() y playlistMeta() (antes cálculos ad-hoc
dentro de cada tarjeta). El tile de género en Explorar pasa de un
style= con el gradiente inline a la receta @utility genre-tile
+ --tile-hue. De paso, corrige la pluralización "seguidor/es" del
perfil de usuario que quedó suelta.

Delta documentado: el hover-zoom del arte y el scrim+PlayButton (antes
exclusivos de MixTile) pasan a ser comportamiento de MediaCard
condicionado a la prop onPlay — se aplicarían a cualquier tarjeta
futura que la use, por consistencia.

Verificado con npm run check/build; sin QA visual autenticada (Docker
no disponible en esta sesión).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web-player/src/lib/components/ui/MediaCard.svelte

@@ -1,30 +1,59 @@
-<script lang="ts" module>
-	export const mediaCardArt =
-		'aspect-square w-full rounded-art transition duration-300 ease-out';
-</script>
-
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import Artwork from './Artwork.svelte';
+	import PlayButton from './PlayButton.svelte';
 
 	interface Props {
 		href: string;
 		title: string;
 		subtitle?: string | null;
-		index?: number;
+		src?: string | null;
+		trackIds?: (string | number)[];
+		onPlay?: (event: MouseEvent) => void;
+		art?: Snippet;
 		oncontextmenu?: (event: MouseEvent) => void;
-		art: Snippet<[string]>;
+		index?: number;
 	}
 
-	let { href, title, subtitle, index = 0, oncontextmenu, art }: Props = $props();
+	let {
+		href,
+		title,
+		subtitle,
+		src,
+		trackIds = [],
+		onPlay,
+		art,
+		oncontextmenu,
+		index = 0
+	}: Props = $props();
 </script>
 
-<a
-	{href}
-	class="group animate-enter min-w-0 text-left"
-	style="animation-delay:{index * 45}ms"
-	{oncontextmenu}
->
-	{@render art(mediaCardArt)}
+<a {href} class="group animate-enter min-w-0 text-left" style="--i:{index}" {oncontextmenu}>
+	<div class="relative">
+		{#if art}
+			{@render art()}
+		{:else}
+			<Artwork
+				{src}
+				{trackIds}
+				size="fill"
+				alt={title}
+				class="rounded-art transition duration-300 group-hover:scale-105"
+			/>
+		{/if}
+		{#if onPlay}
+			<div
+				class="pointer-events-none absolute inset-0 rounded-art bg-linear-to-b from-transparent from-45% to-scrim/40"
+			></div>
+			<PlayButton
+				variant="glass"
+				size="sm"
+				onclick={onPlay}
+				label="Reproducir {title}"
+				class="absolute right-2.5 bottom-2.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+			/>
+		{/if}
+	</div>
 	<div class="mt-2.5 truncate text-sm text-fg">{title}</div>
 	{#if subtitle}
 		<div class="mt-0.5 truncate text-xs text-fg-3">{subtitle}</div>