Update packages

web-player/src/routes/(app)/explore/+page.svelte

@@ -412,11 +412,11 @@
 			{#each genreTiles as genre, i (genre.query)}
 				<a
 					href={buildHref(genre.query)}
-					class="animate-enter group relative flex h-28 flex-col gap-1 overflow-hidden rounded-2xl p-4.25 transition-[filter] hover:brightness-125"
+					class="animate-enter group relative flex h-28 flex-col gap-1 overflow-hidden rounded-2xl p-4.25 transition-[filter] hover:brightness-110"
 					style="animation-delay:{Math.min(i, 10) *
 						40}ms; background:linear-gradient(140deg, oklch(var(--mf-tile-l) var(--mf-tile-c) {genre.hue}), oklch(var(--mf-tile-shade-l) var(--mf-tile-shade-c) {genre.hue}))"
 				>
-					<div class="font-display text-base font-medium tracking-tight text-on-art">
+					<div class="text-on-art">
 						{genre.label}
 					</div>
 					<div class="text-xs text-on-art-2">{genre.tagline}</div>

web-player/src/routes/(app)/liked/+page.svelte

@@ -5,7 +5,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import { player, type QueueItem } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import { fmtDate } from '$lib/format';
+	import { fmtDate, fmtTime } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -48,7 +48,7 @@
 	<CollectionHeader
 		eyebrow="Colección"
 		title="Me gusta"
-		meta="{tracks.length} {tracks.length === 1 ? 'canción' : 'canciones'}"
+		meta="{tracks.length} {tracks.length === 1 ? 'Canción' : 'Canciones'}"
 		align="center"
 	>
 		{#snippet cover()}
@@ -60,13 +60,7 @@
 		{/snippet}
 		{#snippet actions()}
 			<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
-				{#if isCurrentQueue && player.playing}
-					<Pause class="h-4 w-4" strokeWidth={1.5} />
-					Pausar
-				{:else}
-					<Play class="h-4 w-4" strokeWidth={1.5} />
-					Reproducir
-				{/if}
+				{isCurrentQueue && player.playing ? 'Pausar' : 'Reproducir'}
 			</Button>
 		{/snippet}
 	</CollectionHeader>
@@ -103,7 +97,7 @@
 					<TrackMeta class="hidden sm:block">—</TrackMeta>
 					<TrackMeta class="hidden sm:block">{fmtDate(track.likedAt)}</TrackMeta>
 					<TrackMeta class="hidden sm:block">{Number(track.listensCount ?? 0)}</TrackMeta>
-					<TrackMeta>—</TrackMeta>
+					<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
 					<IconButton
 						label="Quitar de Me gusta"
 						size="sm"

web-player/src/routes/(app)/playlists/+page.svelte

@@ -30,7 +30,7 @@
 	>
 		{#snippet actions()}
 			{#if items.length > 0}
-				<Button onclick={() => createPlaylistModal.show()}>Crear lista</Button>
+				<Button onclick={() => createPlaylistModal.show()}>Crear nueva lista</Button>
 			{/if}
 		{/snippet}
 	</PageHeader>
@@ -55,7 +55,7 @@
 			description="Crea la primera y añádele canciones de tu biblioteca."
 		>
 			{#snippet actions()}
-				<Button onclick={() => createPlaylistModal.show()}>Crear lista</Button>
+				<Button onclick={() => createPlaylistModal.show()}>Crear nueva lista</Button>
 			{/snippet}
 		</EmptyState>
 	{/if}

web-player/src/routes/(app)/u/[id]/+page.svelte

@@ -9,6 +9,7 @@
 	import Button from '$lib/components/ui/Button.svelte';
 	import ArtistAvatar from '$lib/components/ui/ArtistAvatar.svelte';
 	import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte';
+	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 
 	let { data, form } = $props();
 
@@ -69,9 +70,7 @@
 	</CollectionHeader>
 
 	<div class="mt-9">
-		<h2 class="font-display text-lg font-semibold tracking-[-0.02em] text-fg">
-			Playlists públicas
-		</h2>
+		<SectionHeading title="Playlists públicas" subtitle="Creadas y compartidas por este usuario" />
 
 		{#if playlists.length > 0}
 			<MediaGrid min="210px" minMobile="180px" class="mt-6">

web-player/src/routes/(app)/upload/+page.svelte

@@ -112,7 +112,7 @@
 				<Surface padding="sm" class={stepClass(stepStates[i])}>
 					<div class="flex items-center gap-3">
 						<span
-							class="grid h-7 w-7 shrink-0 place-items-center rounded-full text-xs font-bold {stepStates[
+							class="grid h-7 w-7 shrink-0 place-items-center rounded-full text-sm {stepStates[
 								i
 							] === 'idle'
 								? 'bg-surface-2 text-fg-2'
@@ -228,7 +228,7 @@
 						{#if coverPreview !== ''}
 							<img src={coverPreview} alt="Portada" class="h-full w-full object-cover" />
 						{:else}
-							<ImageIcon class="h-11 w-11 text-on-art/70" strokeWidth={1.3} />
+							<ImageIcon class="h-16 w-16 text-on-art/60" strokeWidth={1} />
 						{/if}
 					</label>
 				</Field>

web-player/src/routes/+layout.svelte

@@ -126,7 +126,7 @@
 		<Modal
 			open={createPlaylistModal.open}
 			onClose={() => createPlaylistModal.close()}
-			title="Crear playlist"
+			title="Crear nueva playlist"
 		>
 			<PlaylistForm
 				action="/playlists?/create"

web-player/src/routes/+page.svelte

@@ -73,7 +73,7 @@
 		spotlightTrackCount === 0
 			? spotlightVisibilityLabel
 			: [
-					`${spotlightTrackCount} ${spotlightTrackCount === 1 ? 'canción' : 'canciones'}`,
+					`${spotlightTrackCount} ${spotlightTrackCount === 1 ? 'Canción' : 'Canciones'}`,
 					fmtDurationLong(spotlightDurationSeconds),
 					spotlightVisibilityLabel
 				].join(' · ')
@@ -159,7 +159,9 @@
 							{spotlight.name}
 						</Button>
 					{/if}
-					<Button href="/explore" variant="secondary" class="!font-normal">Explorar música</Button>
+					<Button href="/explore" variant="secondaryOnGlow" class="!font-normal"
+						>Explorar música</Button
+					>
 				</div>
 			</div>
 
@@ -244,7 +246,7 @@
 					<div
 						role="button"
 						tabindex="0"
-						class="flex w-fit items-center gap-6 self-start"
+						class="flex w-fit items-center gap-5 self-start sm:gap-6"
 						onclick={() => goto(`/playlists/${spotlight.id}`)}
 						onkeydown={(e) => onRowKeydown(e, () => goto(`/playlists/${spotlight.id}`))}
 					>
@@ -255,7 +257,7 @@
 							size="large"
 							class="h-34 w-34 shrink-0 rounded-2xl"
 						/>
-						<div class="flex min-w-0 flex-col gap-4">
+						<div class="flex min-w-0 flex-col gap-3">
 							<p class="text-xs font-medium tracking-widest text-fg-2 uppercase">
 								Playlist destacada
 							</p>
@@ -270,7 +272,7 @@
 					</p>
 					<div class="mt-5 flex gap-2.5">
 						<Button variant="accent" onclick={playSpotlight}>Reproducir</Button>
-						<Button variant="secondary" onclick={shuffleSpotlight}>Aleatorio</Button>
+						<Button variant="secondaryOnGlow" onclick={shuffleSpotlight}>Aleatorio</Button>
 					</div>
 				</div>
 				<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">
@@ -284,13 +286,15 @@
 								e.preventDefault();
 								playSpotlightTrack(i);
 							}}
-							class="flex items-center gap-3 rounded-control p-2 text-left transition-colors hover:bg-hover {isTargetCurrent(
+							class="flex items-center gap-4 rounded-control p-2 text-left transition-colors hover:bg-hover {isTargetCurrent(
 								target
 							)
 								? 'bg-accent-tint'
 								: ''}"
 						>
-							<span class="w-5 shrink-0 text-center text-xs text-muted tabular-nums">{i + 1}</span>
+							<span class="w-5 shrink-0  text-center text-xs text-muted tabular-nums"
+								>{i + 1}</span
+							>
 							<div class="min-w-0 flex-1">
 								<div
 									class="truncate text-sm {isTargetCurrent(target)
@@ -305,7 +309,9 @@
 									class="mt-0.5 text-xs text-fg-3"
 								/>
 							</div>
-							<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(seconds)}</span>
+							<span class="shrink-0 text-xs text-muted tabular-nums"
+								>{fmtTime(seconds)}</span
+							>
 						</div>
 					{:else}
 						<p class="p-2 text-sm text-fg-3">Esta playlist todavía no tiene canciones.</p>
@@ -421,7 +427,7 @@
 							class="h-15.5 w-15.5 shrink-0 rounded-control"
 						/>
 						<div class="min-w-0 flex-1">
-							<div class="truncate text-sm font-medium tracking-tight text-fg">
+							<div class="truncate text-sm tracking-tight text-fg">
 								{playlist.name}
 							</div>
 							{#if playlist.description}