From a985ff4fb30377f42f2269da70e539e4334429ca Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:09:36 +0200
Subject: [PATCH 01/50] Move rune-based state modules into lib/state

---
 web-player/src/lib/components/Sidebar.svelte  |   4 +-
 web-player/src/lib/components/TabsBar.svelte  |   2 +-
 web-player/src/lib/components/TopBar.svelte   |   2 +-
 .../src/lib/components/ui/BackLink.svelte     |   2 +-
 .../src/lib/player/queuePanel.svelte.ts       |   2 +-
 web-player/src/lib/state/menus.svelte.ts      |  25 +++++
 web-player/src/lib/state/navigation.svelte.ts | 101 ++++++++++++++++++
 web-player/src/lib/state/playlists.svelte.ts  |   3 +
 web-player/src/lib/state/toggle.svelte.ts     |  18 ++++
 .../src/routes/(app)/explore/+page.svelte     |   4 +-
 .../src/routes/(app)/mixes/[id]/+page.svelte  |   2 +-
 .../src/routes/(app)/playlists/+page.svelte   |   2 +-
 web-player/src/routes/+layout.svelte          |   4 +-
 web-player/src/routes/+page.svelte            |   2 +-
 14 files changed, 160 insertions(+), 13 deletions(-)
 create mode 100644 web-player/src/lib/state/menus.svelte.ts
 create mode 100644 web-player/src/lib/state/navigation.svelte.ts
 create mode 100644 web-player/src/lib/state/playlists.svelte.ts
 create mode 100644 web-player/src/lib/state/toggle.svelte.ts

diff --git a/web-player/src/lib/components/Sidebar.svelte b/web-player/src/lib/components/Sidebar.svelte
index cc8e462..adfa974 100644
--- a/web-player/src/lib/components/Sidebar.svelte
+++ b/web-player/src/lib/components/Sidebar.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { isSectionActive, appNavLinks } from '$lib/navigation.svelte';
+	import { isSectionActive, appNavLinks } from '$lib/state/navigation.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import { createPlaylistModal } from '$lib/playlists.svelte';
+	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import type { SessionUser } from '$lib/types';
 	import ListRow from './ui/ListRow.svelte';
 	import IconButton from './ui/IconButton.svelte';
diff --git a/web-player/src/lib/components/TabsBar.svelte b/web-player/src/lib/components/TabsBar.svelte
index f801359..9bf19b0 100644
--- a/web-player/src/lib/components/TabsBar.svelte
+++ b/web-player/src/lib/components/TabsBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { isSectionActive, appNavLinks } from '$lib/navigation.svelte';
+	import { isSectionActive, appNavLinks } from '$lib/state/navigation.svelte';
 	import type { SessionUser } from '$lib/types';
 
 	interface Props {
diff --git a/web-player/src/lib/components/TopBar.svelte b/web-player/src/lib/components/TopBar.svelte
index 114963d..f5147bf 100644
--- a/web-player/src/lib/components/TopBar.svelte
+++ b/web-player/src/lib/components/TopBar.svelte
@@ -3,7 +3,7 @@
 	import { page } from '$app/state';
 	import type { SessionUser } from '$lib/types';
 	import { SEARCH_DEBOUNCE_MS, SEARCH_MIN_LENGTH } from '$lib/config';
-	import { searchHref } from '$lib/navigation.svelte';
+	import { searchHref } from '$lib/state/navigation.svelte';
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
diff --git a/web-player/src/lib/components/ui/BackLink.svelte b/web-player/src/lib/components/ui/BackLink.svelte
index 6a5a614..2143aa2 100644
--- a/web-player/src/lib/components/ui/BackLink.svelte
+++ b/web-player/src/lib/components/ui/BackLink.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
-	import { previousPage } from '$lib/navigation.svelte';
+	import { previousPage } from '$lib/state/navigation.svelte';
 
 	interface Props {
 		href: string;
diff --git a/web-player/src/lib/player/queuePanel.svelte.ts b/web-player/src/lib/player/queuePanel.svelte.ts
index 78da1f2..1213a88 100644
--- a/web-player/src/lib/player/queuePanel.svelte.ts
+++ b/web-player/src/lib/player/queuePanel.svelte.ts
@@ -1,3 +1,3 @@
-import { createToggle } from '../toggle.svelte';
+import { createToggle } from '../state/toggle.svelte';
 
 export const queuePanel = createToggle();
diff --git a/web-player/src/lib/state/menus.svelte.ts b/web-player/src/lib/state/menus.svelte.ts
new file mode 100644
index 0000000..c2959b0
--- /dev/null
+++ b/web-player/src/lib/state/menus.svelte.ts
@@ -0,0 +1,25 @@
+import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+import { player, toQueueItem, type ApiTrackLike } from '../player/player.svelte';
+
+export type TrackMenuState = { track: ApiTrackLike } & MenuPosition;
+
+export function createTrackMenu() {
+	let state = $state<TrackMenuState | null>(null);
+
+	return {
+		get state() {
+			return state;
+		},
+		open(event: MouseEvent, track: ApiTrackLike) {
+			state = { track, ...contextMenuPosition(event) };
+		},
+		close() {
+			state = null;
+		},
+		playNext() {
+			if (!state) return;
+			player.playNextItem(toQueueItem(state.track));
+			state = null;
+		}
+	};
+}
diff --git a/web-player/src/lib/state/navigation.svelte.ts b/web-player/src/lib/state/navigation.svelte.ts
new file mode 100644
index 0000000..0d32598
--- /dev/null
+++ b/web-player/src/lib/state/navigation.svelte.ts
@@ -0,0 +1,101 @@
+import { afterNavigate } from '$app/navigation';
+import type { LucideIcon } from '@lucide/svelte';
+import Home from '@lucide/svelte/icons/house';
+import Compass from '@lucide/svelte/icons/compass';
+import ListMusic from '@lucide/svelte/icons/list-music';
+import Heart from '@lucide/svelte/icons/heart';
+import Disc from '@lucide/svelte/icons/disc-2';
+import Folder from '@lucide/svelte/icons/folder';
+import Upload from '@lucide/svelte/icons/upload';
+import type { SessionUser } from '../types';
+
+const HISTORY_INDEX = 'sveltekit:history';
+
+const LABELS: [RegExp, string][] = [
+	[/^\/$/, 'Volver al inicio'],
+	[/^\/explore\/?$/, 'Volver a explorar'],
+	[/^\/playlists\/[^/]+/, 'Volver a la lista'],
+	[/^\/playlists\/?$/, 'Volver a tus listas'],
+	[/^\/albums\/[^/]+/, 'Volver al álbum'],
+	[/^\/albums\/?$/, 'Volver a tus álbumes'],
+	[/^\/library\/?$/, 'Volver a tus canciones'],
+	[/^\/upload\/?$/, 'Volver a subir música'],
+	[/^\/mixes\/[^/]+/, 'Volver a la mezcla']
+];
+
+export interface PageRef {
+	url: string;
+	label: string;
+}
+
+const visited = new Map<number, PageRef>();
+let index = $state(-1);
+
+function labelFor(pathname: string): string | null {
+	for (const [pattern, label] of LABELS) {
+		if (pattern.test(pathname)) return label;
+	}
+	return null;
+}
+
+function historyIndex(): number | null {
+	const value = history.state?.[HISTORY_INDEX];
+	return typeof value === 'number' ? value : null;
+}
+
+export function trackNavigation() {
+	afterNavigate((nav) => {
+		const at = historyIndex();
+		if (at === null) return;
+		const url = nav.to?.url;
+		const label = url ? labelFor(url.pathname) : null;
+		if (url && label) visited.set(at, { url: url.pathname + url.search, label });
+		else visited.delete(at);
+		index = at;
+	});
+}
+
+export function previousPage(): PageRef | null {
+	return visited.get(index - 1) ?? null;
+}
+
+export function isSectionActive(href: string, pathname: string, section?: string | null): boolean {
+	if (section !== undefined) return section === href;
+	return href === '/' ? pathname === '/' : pathname.startsWith(href);
+}
+
+export function searchHref(query: string): string {
+	return query ? `/explore?q=${encodeURIComponent(query)}` : '/explore';
+}
+
+export interface AppNavLink {
+	href: string;
+	label: string;
+	icon: LucideIcon;
+	count?: number;
+	primary: boolean;
+}
+
+export interface AppNavCounts {
+	playlists?: number;
+	liked?: number;
+}
+
+export function appNavLinks(user: SessionUser | null, counts: AppNavCounts = {}): AppNavLink[] {
+	if (!user) return [{ href: '/explore', label: 'Descubrir', icon: Compass, primary: true }];
+	return [
+		{ href: '/', label: 'Inicio', icon: Home, primary: true },
+		{ href: '/explore', label: 'Descubrir', icon: Compass, primary: true },
+		{
+			href: '/playlists',
+			label: 'Playlists',
+			icon: ListMusic,
+			count: counts.playlists,
+			primary: true
+		},
+		{ href: '/liked', label: 'Me gusta', icon: Heart, count: counts.liked, primary: true },
+		{ href: '/albums', label: 'Mis álbumes', icon: Disc, primary: false },
+		{ href: '/library', label: 'Canciones subidas', icon: Folder, primary: false },
+		{ href: '/upload', label: 'Subir música', icon: Upload, primary: false }
+	];
+}
diff --git a/web-player/src/lib/state/playlists.svelte.ts b/web-player/src/lib/state/playlists.svelte.ts
new file mode 100644
index 0000000..ef78ebd
--- /dev/null
+++ b/web-player/src/lib/state/playlists.svelte.ts
@@ -0,0 +1,3 @@
+import { createToggle } from './toggle.svelte';
+
+export const createPlaylistModal = createToggle();
diff --git a/web-player/src/lib/state/toggle.svelte.ts b/web-player/src/lib/state/toggle.svelte.ts
new file mode 100644
index 0000000..bee2e96
--- /dev/null
+++ b/web-player/src/lib/state/toggle.svelte.ts
@@ -0,0 +1,18 @@
+export function createToggle(initial = false) {
+	let open = $state(initial);
+
+	return {
+		get open() {
+			return open;
+		},
+		show() {
+			open = true;
+		},
+		close() {
+			open = false;
+		},
+		toggle() {
+			open = !open;
+		}
+	};
+}
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index b5ed32e..3e896c2 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -16,8 +16,8 @@
 	import Chip from '$lib/components/ui/Chip.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
-	import { searchHref } from '$lib/navigation.svelte';
-	import { createTrackMenu } from '$lib/menus.svelte';
+	import { searchHref } from '$lib/state/navigation.svelte';
+	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ListEnd from '@lucide/svelte/icons/list-end';
diff --git a/web-player/src/routes/(app)/mixes/[id]/+page.svelte b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
index 41c417b..b49981b 100644
--- a/web-player/src/routes/(app)/mixes/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
@@ -19,7 +19,7 @@
 	import TrackList from '$lib/components/ui/TrackList.svelte';
 	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
-	import { createTrackMenu } from '$lib/menus.svelte';
+	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { mixItemTrack } from '$lib/mixes';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/playlists/+page.svelte b/web-player/src/routes/(app)/playlists/+page.svelte
index 97a64d4..c40795b 100644
--- a/web-player/src/routes/(app)/playlists/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/+page.svelte
@@ -5,7 +5,7 @@
 	import MediaCard from '$lib/components/ui/MediaCard.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
-	import { createPlaylistModal } from '$lib/playlists.svelte';
+	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import { fmtDurationLong, plural, playlistMeta } from '$lib/format';
 
 	let { data } = $props();
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index 5ef2834..41bbae9 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -14,11 +14,11 @@
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import { createPlaylistModal } from '$lib/playlists.svelte';
+	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import { ACCENT_HUE } from '$lib/theme/color';
 	import { buildThemeTokens, applyThemeTokens, tokensToCss } from '$lib/theme/tokens';
 	import { themeMode } from '$lib/theme/mode.svelte';
-	import { trackNavigation } from '$lib/navigation.svelte';
+	import { trackNavigation } from '$lib/state/navigation.svelte';
 	import { page } from '$app/state';
 
 	let { children, data } = $props();
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 391eb5f..a3f0da3 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -26,7 +26,7 @@
 	import Button from '$lib/components/ui/Button.svelte';
 	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
-	import { createTrackMenu } from '$lib/menus.svelte';
+	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { HOME_CONTINUE_LIMIT, HOME_POPULAR_MAX } from '$lib/config';
 
 	let { data } = $props();
-- 
2.54.0


From 6e9883018a1ebf7de54099afa5437f040a8d16a7 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:09:37 +0200
Subject: [PATCH 02/50] Add folder structure reorganization plan

---
 web-player/docs/folder-structure-plan.md | 127 +++++++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 web-player/docs/folder-structure-plan.md

diff --git a/web-player/docs/folder-structure-plan.md b/web-player/docs/folder-structure-plan.md
new file mode 100644
index 0000000..78e65ed
--- /dev/null
+++ b/web-player/docs/folder-structure-plan.md
@@ -0,0 +1,127 @@
+# Plan — Organización de carpetas (web-player)
+
+> Plan de trabajo para agentes/IA. Cubre la **estructura de directorios**, no el sistema de
+> diseño (para tokens/componentización visual ver `docs/frontend-refactor-plan.md`, P0–P14,
+> que sigue siendo la referencia para radios/tamaños/tipografía/colores).
+> Basado en una lectura completa de `web-player/src` (2026-09-22, rama `web-player-ref`).
+
+## Cómo usar este documento
+
+1. Cada fase (F1…F7) es independiente y es **un commit**. No mezcles fases.
+2. Al mover archivos: actualizar todos los imports que los referencian (`grep` del nombre
+   viejo de ruta antes de dar la fase por cerrada).
+3. Cierre de cada fase: `npm run check` y `npm run lint` **limpios** (desde `web-player/`).
+4. Al terminar una fase, marca su casilla en la sección Registro.
+
+Orden recomendado: `F1 → F2 → F3 → F4 → F6` (independientes entre sí, pueden ir en
+cualquier orden). `F5` es opcional y requiere confirmación explícita del usuario antes de
+empezarla (cambia URLs públicas / config de Zitadel).
+
+---
+
+## Diagnóstico
+
+- `src/lib/` raíz tiene 12 archivos sueltos mezclando estado reactivo (runes), helpers de
+  dominio y utilidades genéricas.
+- `src/lib/components/` raíz tiene 4 componentes de layout/chrome sueltos (ni `ui/` ni
+  `player/`).
+- `src/lib/components/ui/` tiene 38 componentes en un único nivel, sin categorizar.
+- `src/routes/` reparte auth en cuatro sitios distintos (`/login`, `/logout`, `/auth/login`,
+  `/auth/callback`).
+
+---
+
+## F1 — Agrupar estado reactivo
+
+Crear `src/lib/state/` y mover:
+
+- `menus.svelte.ts`
+- `navigation.svelte.ts`
+- `playlists.svelte.ts`
+- `toggle.svelte.ts`
+
+`lib/player/*.svelte.ts` y `lib/theme/mode.svelte.ts` se quedan donde están (ya tienen
+dominio propio, no son huérfanos).
+
+**Cierre:** imports actualizados, `npm run check` y `npm run lint` limpios.
+
+## F2 — Agrupar helpers de dominio
+
+Crear `src/lib/data/` y mover:
+
+- `albums.ts`
+- `collections.ts`
+- `genres.ts`
+- `mixes.ts`
+- `recentlyPlayed.ts`
+- `search.ts`
+
+**Cierre:** igual que F1.
+
+## F3 — Utilidades genéricas
+
+- `format.ts` → `src/lib/utils/format.ts`.
+- `types.ts` se queda en la raíz de `lib/` (si crece mucho, pasar a `src/lib/types/index.ts`
+  en una fase futura — no crear la carpeta por adelantado).
+- `config.ts` se queda en la raíz de `lib/` (config global, un único archivo, no amerita
+  carpeta).
+
+**Cierre:** igual que F1.
+
+## F4 — Componentes de layout/chrome
+
+Crear `src/lib/components/layout/` y mover:
+
+- `MobileHeader.svelte`
+- `Sidebar.svelte`
+- `TabsBar.svelte`
+- `TopBar.svelte`
+
+**Cierre:** igual que F1.
+
+## F5 (opcional, requiere confirmación) — Consolidar rutas de auth
+
+Unificar `/login`, `/logout`, `/auth/login`, `/auth/callback` bajo `/auth/`:
+
+- `/auth` → page (login screen, hoy en `/login/+page.svelte`)
+- `/auth/login` → server endpoint (ya existe)
+- `/auth/logout` → server endpoint (hoy `/logout/+server.ts`)
+- `/auth/callback` → server endpoint (ya existe)
+
+**Cambia URLs públicas.** Si `AUTH_REDIRECT_URI` / `AUTH_POST_LOGOUT_URI` en la config de
+Zitadel apuntan a las rutas actuales, hay que actualizarlas ahí también antes de mergear.
+No empezar esta fase sin confirmación explícita.
+
+## F6 — Categorizar `components/ui/`
+
+38 componentes en un único nivel dificultan el escaneo visual y el autocompletado del
+editor. Agrupar por categoría funcional (no por jerarquía atómica estricta — sería excesivo
+para este tamaño):
+
+| Carpeta        | Componentes                                                                                                          | Criterio                                              |
+| -------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| `primitives/`  | Alert, BackLink, Button, Checkbox, Chip, EmptyState, Field, IconButton, InfiniteScroll, Input, Logo, SegmentedControl, Slider, Surface, Textarea | Piezas genéricas, sin conocimiento del dominio música |
+| `overlay/`     | AccountMenu, ConfirmDialog, ContextMenu, GlassMenu, MenuItem, Modal                                                    | Todo lo que flota encima del contenido                |
+| `media/`       | ArtistLink, Artwork, Avatar, EqBars, ExplicitBadge, ListRow, MediaCard, MediaIdentity, PlayButton, TrackList           | Específicos del dominio música/track                  |
+| `forms/`       | AlbumForm, CoverForm, ImageDropzone, PlaylistForm                                                                      | Formularios compuestos de entidad                     |
+| `layout/`      | Page, PageHeader, SectionHeading                                                                                       | Andamiaje de página (distinto de `components/layout/` de F4, que es el chrome global) |
+
+Sin barrels/`index.ts` — actualizar cada ruta de import directamente, no hace falta esa
+indirección para esto.
+
+Hacer **un sub-commit por categoría** (mover + actualizar imports + `npm run check`) en vez
+de mover las 38 de una vez, para mantener el diff revisable.
+
+**Cierre:** las 5 subcarpetas creadas, `ui/` raíz sin `.svelte` sueltos, imports
+actualizados, `npm run check` y `npm run lint` limpios.
+
+---
+
+## Registro
+
+- [ ] F1 — estado reactivo → `lib/state/`
+- [ ] F2 — helpers de dominio → `lib/data/`
+- [ ] F3 — utilidades genéricas (`format.ts` → `lib/utils/`)
+- [ ] F4 — componentes de layout/chrome → `components/layout/`
+- [ ] F5 — consolidar rutas de auth bajo `/auth/` (opcional, pendiente de confirmación)
+- [ ] F6 — categorizar `components/ui/` (primitives/overlay/media/forms/layout)
-- 
2.54.0


From ff5fa501af4bea9fb014aed08055c0d9568e6d4c Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:10:15 +0200
Subject: [PATCH 03/50] Remove leftover old paths from the lib/state move

---
 web-player/src/lib/albums.ts            |   8 --
 web-player/src/lib/collections.ts       |  24 ------
 web-player/src/lib/genres.ts            |  22 ------
 web-player/src/lib/menus.svelte.ts      |  25 ------
 web-player/src/lib/mixes.ts             |  18 -----
 web-player/src/lib/navigation.svelte.ts | 101 ------------------------
 web-player/src/lib/playlists.svelte.ts  |   3 -
 web-player/src/lib/recentlyPlayed.ts    |  22 ------
 web-player/src/lib/search.ts            |  74 -----------------
 web-player/src/lib/toggle.svelte.ts     |  18 -----
 10 files changed, 315 deletions(-)
 delete mode 100644 web-player/src/lib/albums.ts
 delete mode 100644 web-player/src/lib/collections.ts
 delete mode 100644 web-player/src/lib/genres.ts
 delete mode 100644 web-player/src/lib/menus.svelte.ts
 delete mode 100644 web-player/src/lib/mixes.ts
 delete mode 100644 web-player/src/lib/navigation.svelte.ts
 delete mode 100644 web-player/src/lib/playlists.svelte.ts
 delete mode 100644 web-player/src/lib/recentlyPlayed.ts
 delete mode 100644 web-player/src/lib/search.ts
 delete mode 100644 web-player/src/lib/toggle.svelte.ts

diff --git a/web-player/src/lib/albums.ts b/web-player/src/lib/albums.ts
deleted file mode 100644
index 9d85015..0000000
--- a/web-player/src/lib/albums.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { toQueueItems, type ApiTrackLike, type QueueItem } from '$lib/player/player.svelte';
-
-export async function fetchAlbumQueueItems(albumId: string): Promise<QueueItem[]> {
-	const res = await fetch(`/api/albums/${albumId}/tracks`);
-	if (!res.ok) return [];
-	const data = (await res.json()) as { items: ApiTrackLike[] };
-	return toQueueItems(data.items ?? []);
-}
diff --git a/web-player/src/lib/collections.ts b/web-player/src/lib/collections.ts
deleted file mode 100644
index 4a6fd65..0000000
--- a/web-player/src/lib/collections.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export function shuffle<T>(items: T[]): T[] {
-	const copy = [...items];
-	for (let i = copy.length - 1; i > 0; i--) {
-		const j = Math.floor(Math.random() * (i + 1));
-		[copy[i], copy[j]] = [copy[j], copy[i]];
-	}
-	return copy;
-}
-
-export function appendUnique<T>(
-	current: T[],
-	incoming: T[],
-	keyOf: (item: T) => string | number
-): T[] {
-	const seen = new Set(current.map(keyOf));
-	const added: T[] = [];
-	for (const item of incoming) {
-		const key = keyOf(item);
-		if (seen.has(key)) continue;
-		seen.add(key);
-		added.push(item);
-	}
-	return added.length > 0 ? [...current, ...added] : current;
-}
diff --git a/web-player/src/lib/genres.ts b/web-player/src/lib/genres.ts
deleted file mode 100644
index 8dbc9f2..0000000
--- a/web-player/src/lib/genres.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const GENRE_INFO: Record<string, { label: string; tagline: string }> = {
-	pop: { label: 'Pop', tagline: 'Éxitos que suenan en todas partes' },
-	rock: { label: 'Rock', tagline: 'Guitarras, actitud y ruido' },
-	reggaeton: { label: 'Reggaetón', tagline: 'El ritmo que no para' },
-	'lo-fi': { label: 'Lo-fi', tagline: 'Para concentrarte o relajarte' },
-	indie: { label: 'Indie', tagline: 'Voces fuera del radar' },
-	salsa: { label: 'Salsa', tagline: 'Para mover el cuerpo' },
-	'k-pop': { label: 'K-pop', tagline: 'Coreografías pegajosas' },
-	electrónica: { label: 'Electrónica', tagline: 'Beats para perderte' },
-	jazz: { label: 'Jazz', tagline: 'Improvisación y elegancia' },
-	baladas: { label: 'Baladas', tagline: 'Para sentir con calma' },
-	trap: { label: 'Trap', tagline: 'Autotune y bajos pesados' },
-	cumbia: { label: 'Cumbia', tagline: 'El sabor de siempre' },
-	'hip hop': { label: 'Hip hop', tagline: 'Rimas con actitud' },
-	'música clásica': { label: 'Clásica', tagline: 'Siglos de composición' }
-};
-
-export const genreTiles = Object.entries(GENRE_INFO).map(([query, info], i, all) => ({
-	query,
-	hue: Math.round((i * 360) / all.length),
-	...info
-}));
diff --git a/web-player/src/lib/menus.svelte.ts b/web-player/src/lib/menus.svelte.ts
deleted file mode 100644
index 864dcec..0000000
--- a/web-player/src/lib/menus.svelte.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/ContextMenu.svelte';
-import { player, toQueueItem, type ApiTrackLike } from './player/player.svelte';
-
-export type TrackMenuState = { track: ApiTrackLike } & MenuPosition;
-
-export function createTrackMenu() {
-	let state = $state<TrackMenuState | null>(null);
-
-	return {
-		get state() {
-			return state;
-		},
-		open(event: MouseEvent, track: ApiTrackLike) {
-			state = { track, ...contextMenuPosition(event) };
-		},
-		close() {
-			state = null;
-		},
-		playNext() {
-			if (!state) return;
-			player.playNextItem(toQueueItem(state.track));
-			state = null;
-		}
-	};
-}
diff --git a/web-player/src/lib/mixes.ts b/web-player/src/lib/mixes.ts
deleted file mode 100644
index e08ab79..0000000
--- a/web-player/src/lib/mixes.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { components } from '$lib/api/schema';
-import type { ApiTrackLike } from '$lib/player/player.svelte';
-
-export type Mix = components['schemas']['MixApplicationResponse'];
-export type MixItem = components['schemas']['MixItemApplicationResponse'];
-
-export function mixItemKey(item: MixItem): string {
-	return `mf:${item.trackId}`;
-}
-
-export function mixItemTrack(item: MixItem): ApiTrackLike {
-	return {
-		id: item.trackId,
-		title: item.title,
-		artist: item.artist,
-		listensCount: item.listensCount
-	};
-}
diff --git a/web-player/src/lib/navigation.svelte.ts b/web-player/src/lib/navigation.svelte.ts
deleted file mode 100644
index d5bb42d..0000000
--- a/web-player/src/lib/navigation.svelte.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { afterNavigate } from '$app/navigation';
-import type { LucideIcon } from '@lucide/svelte';
-import Home from '@lucide/svelte/icons/house';
-import Compass from '@lucide/svelte/icons/compass';
-import ListMusic from '@lucide/svelte/icons/list-music';
-import Heart from '@lucide/svelte/icons/heart';
-import Disc from '@lucide/svelte/icons/disc-2';
-import Folder from '@lucide/svelte/icons/folder';
-import Upload from '@lucide/svelte/icons/upload';
-import type { SessionUser } from './types';
-
-const HISTORY_INDEX = 'sveltekit:history';
-
-const LABELS: [RegExp, string][] = [
-	[/^\/$/, 'Volver al inicio'],
-	[/^\/explore\/?$/, 'Volver a explorar'],
-	[/^\/playlists\/[^/]+/, 'Volver a la lista'],
-	[/^\/playlists\/?$/, 'Volver a tus listas'],
-	[/^\/albums\/[^/]+/, 'Volver al álbum'],
-	[/^\/albums\/?$/, 'Volver a tus álbumes'],
-	[/^\/library\/?$/, 'Volver a tus canciones'],
-	[/^\/upload\/?$/, 'Volver a subir música'],
-	[/^\/mixes\/[^/]+/, 'Volver a la mezcla']
-];
-
-export interface PageRef {
-	url: string;
-	label: string;
-}
-
-const visited = new Map<number, PageRef>();
-let index = $state(-1);
-
-function labelFor(pathname: string): string | null {
-	for (const [pattern, label] of LABELS) {
-		if (pattern.test(pathname)) return label;
-	}
-	return null;
-}
-
-function historyIndex(): number | null {
-	const value = history.state?.[HISTORY_INDEX];
-	return typeof value === 'number' ? value : null;
-}
-
-export function trackNavigation() {
-	afterNavigate((nav) => {
-		const at = historyIndex();
-		if (at === null) return;
-		const url = nav.to?.url;
-		const label = url ? labelFor(url.pathname) : null;
-		if (url && label) visited.set(at, { url: url.pathname + url.search, label });
-		else visited.delete(at);
-		index = at;
-	});
-}
-
-export function previousPage(): PageRef | null {
-	return visited.get(index - 1) ?? null;
-}
-
-export function isSectionActive(href: string, pathname: string, section?: string | null): boolean {
-	if (section !== undefined) return section === href;
-	return href === '/' ? pathname === '/' : pathname.startsWith(href);
-}
-
-export function searchHref(query: string): string {
-	return query ? `/explore?q=${encodeURIComponent(query)}` : '/explore';
-}
-
-export interface AppNavLink {
-	href: string;
-	label: string;
-	icon: LucideIcon;
-	count?: number;
-	primary: boolean;
-}
-
-export interface AppNavCounts {
-	playlists?: number;
-	liked?: number;
-}
-
-export function appNavLinks(user: SessionUser | null, counts: AppNavCounts = {}): AppNavLink[] {
-	if (!user) return [{ href: '/explore', label: 'Descubrir', icon: Compass, primary: true }];
-	return [
-		{ href: '/', label: 'Inicio', icon: Home, primary: true },
-		{ href: '/explore', label: 'Descubrir', icon: Compass, primary: true },
-		{
-			href: '/playlists',
-			label: 'Playlists',
-			icon: ListMusic,
-			count: counts.playlists,
-			primary: true
-		},
-		{ href: '/liked', label: 'Me gusta', icon: Heart, count: counts.liked, primary: true },
-		{ href: '/albums', label: 'Mis álbumes', icon: Disc, primary: false },
-		{ href: '/library', label: 'Canciones subidas', icon: Folder, primary: false },
-		{ href: '/upload', label: 'Subir música', icon: Upload, primary: false }
-	];
-}
diff --git a/web-player/src/lib/playlists.svelte.ts b/web-player/src/lib/playlists.svelte.ts
deleted file mode 100644
index ef78ebd..0000000
--- a/web-player/src/lib/playlists.svelte.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createToggle } from './toggle.svelte';
-
-export const createPlaylistModal = createToggle();
diff --git a/web-player/src/lib/recentlyPlayed.ts b/web-player/src/lib/recentlyPlayed.ts
deleted file mode 100644
index 9b110d6..0000000
--- a/web-player/src/lib/recentlyPlayed.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { player, toQueueItems, type ApiTrackLike, type QueueItem } from '$lib/player/player.svelte';
-
-export function mergeRecentlyPlayed(history: ApiTrackLike[], limit: number): QueueItem[] {
-	const seen = new Set<string>();
-	const merged: QueueItem[] = [];
-
-	for (const t of player.recentlyPlayed) {
-		const id = String(t.id);
-		if (seen.has(id)) continue;
-		seen.add(id);
-		merged.push({ ...t, id });
-	}
-
-	for (const item of toQueueItems(history)) {
-		const id = String(item.id);
-		if (seen.has(id)) continue;
-		seen.add(id);
-		merged.push({ ...item, id });
-	}
-
-	return merged.slice(0, limit);
-}
diff --git a/web-player/src/lib/search.ts b/web-player/src/lib/search.ts
deleted file mode 100644
index fda4ac8..0000000
--- a/web-player/src/lib/search.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-export const SEARCH_FILTERS = ['Todo', 'Canciones', 'Álbumes', 'Playlists', 'Usuarios'] as const;
-export type SearchFilter = (typeof SEARCH_FILTERS)[number];
-export const SEARCH_GROUP_PREVIEW = 4;
-
-export function showGroup(filter: SearchFilter, label: Exclude<SearchFilter, 'Todo'>) {
-	return filter === 'Todo' || filter === label;
-}
-
-export function capped<T>(filter: SearchFilter, list: T[]) {
-	return filter === 'Todo' ? list.slice(0, SEARCH_GROUP_PREVIEW) : list;
-}
-
-export function matchPlaylists<T extends { name: string }>(playlists: T[], query: string): T[] {
-	return query ? playlists.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())) : [];
-}
-
-export function searchCounts(counts: {
-	tracks: number;
-	albums: number;
-	playlists: number;
-	users: number;
-}) {
-	return {
-		Canciones: counts.tracks,
-		Álbumes: counts.albums,
-		Playlists: counts.playlists,
-		Usuarios: counts.users
-	};
-}
-
-export function searchChips(counts: ReturnType<typeof searchCounts>) {
-	const total = counts.Canciones + counts.Álbumes + counts.Playlists + counts.Usuarios;
-	return SEARCH_FILTERS.map((label) => ({
-		label,
-		count: label === 'Todo' ? total : counts[label]
-	}));
-}
-
-export type TopResult<Track, Album, Playlist, User> =
-	| { kind: 'track'; track: Track }
-	| { kind: 'album'; album: Album }
-	| { kind: 'playlist'; playlist: Playlist }
-	| { kind: 'user'; user: User };
-
-export function findTopResult<
-	Track extends { title: string },
-	Album extends { title: string },
-	Playlist extends { name: string },
-	User extends { name: string }
->(params: {
-	query: string;
-	tracks: Track[];
-	albums: Album[];
-	playlists: Playlist[];
-	users: User[];
-}): TopResult<Track, Album, Playlist, User> | null {
-	const q = params.query.trim().toLowerCase();
-	const startsWithQuery = (value: string) => value.toLowerCase().startsWith(q);
-
-	const userHit = params.users.find((u) => startsWithQuery(u.name));
-	if (userHit) return { kind: 'user', user: userHit };
-	const trackHit = params.tracks.find((track) => startsWithQuery(track.title));
-	if (trackHit) return { kind: 'track', track: trackHit };
-	const albumHit = params.albums.find((album) => startsWithQuery(album.title));
-	if (albumHit) return { kind: 'album', album: albumHit };
-	const playlistHit = params.playlists.find((p) => startsWithQuery(p.name));
-	if (playlistHit) return { kind: 'playlist', playlist: playlistHit };
-
-	if (params.users.length) return { kind: 'user', user: params.users[0] };
-	if (params.tracks.length) return { kind: 'track', track: params.tracks[0] };
-	if (params.albums.length) return { kind: 'album', album: params.albums[0] };
-	if (params.playlists.length) return { kind: 'playlist', playlist: params.playlists[0] };
-	return null;
-}
diff --git a/web-player/src/lib/toggle.svelte.ts b/web-player/src/lib/toggle.svelte.ts
deleted file mode 100644
index bee2e96..0000000
--- a/web-player/src/lib/toggle.svelte.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export function createToggle(initial = false) {
-	let open = $state(initial);
-
-	return {
-		get open() {
-			return open;
-		},
-		show() {
-			open = true;
-		},
-		close() {
-			open = false;
-		},
-		toggle() {
-			open = !open;
-		}
-	};
-}
-- 
2.54.0


From 53fc24d4bcb09204ca56066dc54e34d02369f315 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:10:55 +0200
Subject: [PATCH 04/50] Move domain data helpers into lib/data

---
 web-player/src/lib/data/albums.ts             |  8 ++
 web-player/src/lib/data/collections.ts        | 24 ++++++
 web-player/src/lib/data/genres.ts             | 22 ++++++
 web-player/src/lib/data/mixes.ts              | 18 +++++
 web-player/src/lib/data/recentlyPlayed.ts     | 22 ++++++
 web-player/src/lib/data/search.ts             | 74 +++++++++++++++++++
 web-player/src/lib/player/player.svelte.ts    |  2 +-
 .../src/routes/(app)/explore/+page.svelte     |  8 +-
 .../src/routes/(app)/mixes/[id]/+page.svelte  |  2 +-
 web-player/src/routes/+page.svelte            |  4 +-
 10 files changed, 176 insertions(+), 8 deletions(-)
 create mode 100644 web-player/src/lib/data/albums.ts
 create mode 100644 web-player/src/lib/data/collections.ts
 create mode 100644 web-player/src/lib/data/genres.ts
 create mode 100644 web-player/src/lib/data/mixes.ts
 create mode 100644 web-player/src/lib/data/recentlyPlayed.ts
 create mode 100644 web-player/src/lib/data/search.ts

diff --git a/web-player/src/lib/data/albums.ts b/web-player/src/lib/data/albums.ts
new file mode 100644
index 0000000..9d85015
--- /dev/null
+++ b/web-player/src/lib/data/albums.ts
@@ -0,0 +1,8 @@
+import { toQueueItems, type ApiTrackLike, type QueueItem } from '$lib/player/player.svelte';
+
+export async function fetchAlbumQueueItems(albumId: string): Promise<QueueItem[]> {
+	const res = await fetch(`/api/albums/${albumId}/tracks`);
+	if (!res.ok) return [];
+	const data = (await res.json()) as { items: ApiTrackLike[] };
+	return toQueueItems(data.items ?? []);
+}
diff --git a/web-player/src/lib/data/collections.ts b/web-player/src/lib/data/collections.ts
new file mode 100644
index 0000000..4a6fd65
--- /dev/null
+++ b/web-player/src/lib/data/collections.ts
@@ -0,0 +1,24 @@
+export function shuffle<T>(items: T[]): T[] {
+	const copy = [...items];
+	for (let i = copy.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[copy[i], copy[j]] = [copy[j], copy[i]];
+	}
+	return copy;
+}
+
+export function appendUnique<T>(
+	current: T[],
+	incoming: T[],
+	keyOf: (item: T) => string | number
+): T[] {
+	const seen = new Set(current.map(keyOf));
+	const added: T[] = [];
+	for (const item of incoming) {
+		const key = keyOf(item);
+		if (seen.has(key)) continue;
+		seen.add(key);
+		added.push(item);
+	}
+	return added.length > 0 ? [...current, ...added] : current;
+}
diff --git a/web-player/src/lib/data/genres.ts b/web-player/src/lib/data/genres.ts
new file mode 100644
index 0000000..8dbc9f2
--- /dev/null
+++ b/web-player/src/lib/data/genres.ts
@@ -0,0 +1,22 @@
+export const GENRE_INFO: Record<string, { label: string; tagline: string }> = {
+	pop: { label: 'Pop', tagline: 'Éxitos que suenan en todas partes' },
+	rock: { label: 'Rock', tagline: 'Guitarras, actitud y ruido' },
+	reggaeton: { label: 'Reggaetón', tagline: 'El ritmo que no para' },
+	'lo-fi': { label: 'Lo-fi', tagline: 'Para concentrarte o relajarte' },
+	indie: { label: 'Indie', tagline: 'Voces fuera del radar' },
+	salsa: { label: 'Salsa', tagline: 'Para mover el cuerpo' },
+	'k-pop': { label: 'K-pop', tagline: 'Coreografías pegajosas' },
+	electrónica: { label: 'Electrónica', tagline: 'Beats para perderte' },
+	jazz: { label: 'Jazz', tagline: 'Improvisación y elegancia' },
+	baladas: { label: 'Baladas', tagline: 'Para sentir con calma' },
+	trap: { label: 'Trap', tagline: 'Autotune y bajos pesados' },
+	cumbia: { label: 'Cumbia', tagline: 'El sabor de siempre' },
+	'hip hop': { label: 'Hip hop', tagline: 'Rimas con actitud' },
+	'música clásica': { label: 'Clásica', tagline: 'Siglos de composición' }
+};
+
+export const genreTiles = Object.entries(GENRE_INFO).map(([query, info], i, all) => ({
+	query,
+	hue: Math.round((i * 360) / all.length),
+	...info
+}));
diff --git a/web-player/src/lib/data/mixes.ts b/web-player/src/lib/data/mixes.ts
new file mode 100644
index 0000000..e08ab79
--- /dev/null
+++ b/web-player/src/lib/data/mixes.ts
@@ -0,0 +1,18 @@
+import type { components } from '$lib/api/schema';
+import type { ApiTrackLike } from '$lib/player/player.svelte';
+
+export type Mix = components['schemas']['MixApplicationResponse'];
+export type MixItem = components['schemas']['MixItemApplicationResponse'];
+
+export function mixItemKey(item: MixItem): string {
+	return `mf:${item.trackId}`;
+}
+
+export function mixItemTrack(item: MixItem): ApiTrackLike {
+	return {
+		id: item.trackId,
+		title: item.title,
+		artist: item.artist,
+		listensCount: item.listensCount
+	};
+}
diff --git a/web-player/src/lib/data/recentlyPlayed.ts b/web-player/src/lib/data/recentlyPlayed.ts
new file mode 100644
index 0000000..9b110d6
--- /dev/null
+++ b/web-player/src/lib/data/recentlyPlayed.ts
@@ -0,0 +1,22 @@
+import { player, toQueueItems, type ApiTrackLike, type QueueItem } from '$lib/player/player.svelte';
+
+export function mergeRecentlyPlayed(history: ApiTrackLike[], limit: number): QueueItem[] {
+	const seen = new Set<string>();
+	const merged: QueueItem[] = [];
+
+	for (const t of player.recentlyPlayed) {
+		const id = String(t.id);
+		if (seen.has(id)) continue;
+		seen.add(id);
+		merged.push({ ...t, id });
+	}
+
+	for (const item of toQueueItems(history)) {
+		const id = String(item.id);
+		if (seen.has(id)) continue;
+		seen.add(id);
+		merged.push({ ...item, id });
+	}
+
+	return merged.slice(0, limit);
+}
diff --git a/web-player/src/lib/data/search.ts b/web-player/src/lib/data/search.ts
new file mode 100644
index 0000000..fda4ac8
--- /dev/null
+++ b/web-player/src/lib/data/search.ts
@@ -0,0 +1,74 @@
+export const SEARCH_FILTERS = ['Todo', 'Canciones', 'Álbumes', 'Playlists', 'Usuarios'] as const;
+export type SearchFilter = (typeof SEARCH_FILTERS)[number];
+export const SEARCH_GROUP_PREVIEW = 4;
+
+export function showGroup(filter: SearchFilter, label: Exclude<SearchFilter, 'Todo'>) {
+	return filter === 'Todo' || filter === label;
+}
+
+export function capped<T>(filter: SearchFilter, list: T[]) {
+	return filter === 'Todo' ? list.slice(0, SEARCH_GROUP_PREVIEW) : list;
+}
+
+export function matchPlaylists<T extends { name: string }>(playlists: T[], query: string): T[] {
+	return query ? playlists.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())) : [];
+}
+
+export function searchCounts(counts: {
+	tracks: number;
+	albums: number;
+	playlists: number;
+	users: number;
+}) {
+	return {
+		Canciones: counts.tracks,
+		Álbumes: counts.albums,
+		Playlists: counts.playlists,
+		Usuarios: counts.users
+	};
+}
+
+export function searchChips(counts: ReturnType<typeof searchCounts>) {
+	const total = counts.Canciones + counts.Álbumes + counts.Playlists + counts.Usuarios;
+	return SEARCH_FILTERS.map((label) => ({
+		label,
+		count: label === 'Todo' ? total : counts[label]
+	}));
+}
+
+export type TopResult<Track, Album, Playlist, User> =
+	| { kind: 'track'; track: Track }
+	| { kind: 'album'; album: Album }
+	| { kind: 'playlist'; playlist: Playlist }
+	| { kind: 'user'; user: User };
+
+export function findTopResult<
+	Track extends { title: string },
+	Album extends { title: string },
+	Playlist extends { name: string },
+	User extends { name: string }
+>(params: {
+	query: string;
+	tracks: Track[];
+	albums: Album[];
+	playlists: Playlist[];
+	users: User[];
+}): TopResult<Track, Album, Playlist, User> | null {
+	const q = params.query.trim().toLowerCase();
+	const startsWithQuery = (value: string) => value.toLowerCase().startsWith(q);
+
+	const userHit = params.users.find((u) => startsWithQuery(u.name));
+	if (userHit) return { kind: 'user', user: userHit };
+	const trackHit = params.tracks.find((track) => startsWithQuery(track.title));
+	if (trackHit) return { kind: 'track', track: trackHit };
+	const albumHit = params.albums.find((album) => startsWithQuery(album.title));
+	if (albumHit) return { kind: 'album', album: albumHit };
+	const playlistHit = params.playlists.find((p) => startsWithQuery(p.name));
+	if (playlistHit) return { kind: 'playlist', playlist: playlistHit };
+
+	if (params.users.length) return { kind: 'user', user: params.users[0] };
+	if (params.tracks.length) return { kind: 'track', track: params.tracks[0] };
+	if (params.albums.length) return { kind: 'album', album: params.albums[0] };
+	if (params.playlists.length) return { kind: 'playlist', playlist: params.playlists[0] };
+	return null;
+}
diff --git a/web-player/src/lib/player/player.svelte.ts b/web-player/src/lib/player/player.svelte.ts
index 6000680..3ffb930 100644
--- a/web-player/src/lib/player/player.svelte.ts
+++ b/web-player/src/lib/player/player.svelte.ts
@@ -1,7 +1,7 @@
 import { browser } from '$app/environment';
 import { DEFAULT_ACCENT } from '$lib/theme/color';
 import { extractAccent, type Accent } from '$lib/theme/palette';
-import { shuffle } from '$lib/collections';
+import { shuffle } from '$lib/data/collections';
 
 export interface PlayerTrack {
 	id: string | number;
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 3e896c2..8cfb94b 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItem } from '$lib/player/player.svelte';
-	import { fetchAlbumQueueItems } from '$lib/albums';
+	import { fetchAlbumQueueItems } from '$lib/data/albums';
 	import { fmtTime, fmtPlays, plural } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
@@ -21,8 +21,8 @@
 	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ListEnd from '@lucide/svelte/icons/list-end';
-	import { appendUnique } from '$lib/collections';
-	import { genreTiles } from '$lib/genres';
+	import { appendUnique } from '$lib/data/collections';
+	import { genreTiles } from '$lib/data/genres';
 	import {
 		type SearchFilter,
 		showGroup,
@@ -31,7 +31,7 @@
 		searchCounts,
 		searchChips,
 		findTopResult
-	} from '$lib/search';
+	} from '$lib/data/search';
 
 	type AlbumMenuState = { x: number; y: number; openLeft: boolean; albumId: string };
 
diff --git a/web-player/src/routes/(app)/mixes/[id]/+page.svelte b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
index b49981b..5f90955 100644
--- a/web-player/src/routes/(app)/mixes/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
@@ -20,7 +20,7 @@
 	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
-	import { mixItemTrack } from '$lib/mixes';
+	import { mixItemTrack } from '$lib/data/mixes';
 
 	let { data, form } = $props();
 
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index a3f0da3..d8bb115 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -13,8 +13,8 @@
 		type ApiTrackLike
 	} from '$lib/player/player.svelte';
 	import { pressable } from '$lib/actions/pressable';
-	import { mergeRecentlyPlayed } from '$lib/recentlyPlayed';
-	import { mixItemTrack } from '$lib/mixes';
+	import { mergeRecentlyPlayed } from '$lib/data/recentlyPlayed';
+	import { mixItemTrack } from '$lib/data/mixes';
 	import { fmtTime, fmtDurationLong, fmtPlays, plural } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import Artwork from '$lib/components/ui/Artwork.svelte';
-- 
2.54.0


From fe2f6a785aeb389cf66c6992554bcecf3653042f Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:11:30 +0200
Subject: [PATCH 05/50] Move format helpers into lib/utils

---
 web-player/src/lib/components/player/PlayerBar.svelte   | 2 +-
 web-player/src/lib/components/player/Queue.svelte       | 2 +-
 web-player/src/lib/components/ui/SectionHeading.svelte  | 2 +-
 web-player/src/lib/components/ui/TrackList.svelte       | 2 +-
 web-player/src/lib/{ => utils}/format.ts                | 0
 web-player/src/routes/(app)/albums/+page.svelte         | 2 +-
 web-player/src/routes/(app)/albums/[id]/+page.svelte    | 2 +-
 web-player/src/routes/(app)/explore/+page.svelte        | 2 +-
 web-player/src/routes/(app)/library/+page.svelte        | 2 +-
 web-player/src/routes/(app)/liked/+page.svelte          | 2 +-
 web-player/src/routes/(app)/mixes/[id]/+page.svelte     | 2 +-
 web-player/src/routes/(app)/playlists/+page.svelte      | 2 +-
 web-player/src/routes/(app)/playlists/[id]/+page.svelte | 2 +-
 web-player/src/routes/(app)/u/[id]/+page.svelte         | 2 +-
 web-player/src/routes/+page.svelte                      | 2 +-
 15 files changed, 14 insertions(+), 14 deletions(-)
 rename web-player/src/lib/{ => utils}/format.ts (100%)

diff --git a/web-player/src/lib/components/player/PlayerBar.svelte b/web-player/src/lib/components/player/PlayerBar.svelte
index f9ade54..33e5152 100644
--- a/web-player/src/lib/components/player/PlayerBar.svelte
+++ b/web-player/src/lib/components/player/PlayerBar.svelte
@@ -5,7 +5,7 @@
 	import IconButton from '$lib/components/ui/IconButton.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
-	import { fmtTime } from '$lib/format';
+	import { fmtTime } from '$lib/utils/format';
 	import Volume2 from '@lucide/svelte/icons/volume-2';
 	import ListMusic from '@lucide/svelte/icons/list-music';
 
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index e795d8f..1f07249 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -4,7 +4,7 @@
 	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
 	import ListRow from '$lib/components/ui/ListRow.svelte';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
-	import { fmtTime } from '$lib/format';
+	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
diff --git a/web-player/src/lib/components/ui/SectionHeading.svelte b/web-player/src/lib/components/ui/SectionHeading.svelte
index 50c79a9..2eb1835 100644
--- a/web-player/src/lib/components/ui/SectionHeading.svelte
+++ b/web-player/src/lib/components/ui/SectionHeading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { plural } from '$lib/format';
+	import { plural } from '$lib/utils/format';
 
 	interface Props {
 		title: string;
diff --git a/web-player/src/lib/components/ui/TrackList.svelte b/web-player/src/lib/components/ui/TrackList.svelte
index 2a71729..46b6243 100644
--- a/web-player/src/lib/components/ui/TrackList.svelte
+++ b/web-player/src/lib/components/ui/TrackList.svelte
@@ -32,7 +32,7 @@
 	import Hash from '@lucide/svelte/icons/hash';
 	import Play from '@lucide/svelte/icons/play';
 	import { player } from '$lib/player/player.svelte';
-	import { fmtTime, fmtDate } from '$lib/format';
+	import { fmtTime, fmtDate } from '$lib/utils/format';
 	import { pressable } from '$lib/actions/pressable';
 	import MediaIdentity from './MediaIdentity.svelte';
 	import EqBars from './EqBars.svelte';
diff --git a/web-player/src/lib/format.ts b/web-player/src/lib/utils/format.ts
similarity index 100%
rename from web-player/src/lib/format.ts
rename to web-player/src/lib/utils/format.ts
diff --git a/web-player/src/routes/(app)/albums/+page.svelte b/web-player/src/routes/(app)/albums/+page.svelte
index 4c89119..237f9ae 100644
--- a/web-player/src/routes/(app)/albums/+page.svelte
+++ b/web-player/src/routes/(app)/albums/+page.svelte
@@ -8,7 +8,7 @@
 	import Modal from '$lib/components/ui/Modal.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
-	import { albumMeta } from '$lib/format';
+	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
 
diff --git a/web-player/src/routes/(app)/albums/[id]/+page.svelte b/web-player/src/routes/(app)/albums/[id]/+page.svelte
index c00fe1a..055f9a3 100644
--- a/web-player/src/routes/(app)/albums/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/albums/[id]/+page.svelte
@@ -17,7 +17,7 @@
 	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import TrackList from '$lib/components/ui/TrackList.svelte';
-	import { albumMeta } from '$lib/format';
+	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
 
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 8cfb94b..3147b33 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -2,7 +2,7 @@
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItem } from '$lib/player/player.svelte';
 	import { fetchAlbumQueueItems } from '$lib/data/albums';
-	import { fmtTime, fmtPlays, plural } from '$lib/format';
+	import { fmtTime, fmtPlays, plural } from '$lib/utils/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';
diff --git a/web-player/src/routes/(app)/library/+page.svelte b/web-player/src/routes/(app)/library/+page.svelte
index 03faa12..48f937d 100644
--- a/web-player/src/routes/(app)/library/+page.svelte
+++ b/web-player/src/routes/(app)/library/+page.svelte
@@ -3,7 +3,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItems } from '$lib/player/player.svelte';
-	import { plural } from '$lib/format';
+	import { plural } from '$lib/utils/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
diff --git a/web-player/src/routes/(app)/liked/+page.svelte b/web-player/src/routes/(app)/liked/+page.svelte
index 362581b..c462761 100644
--- a/web-player/src/routes/(app)/liked/+page.svelte
+++ b/web-player/src/routes/(app)/liked/+page.svelte
@@ -3,7 +3,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import { player, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import { plural } from '$lib/format';
+	import { plural } from '$lib/utils/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
diff --git a/web-player/src/routes/(app)/mixes/[id]/+page.svelte b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
index 5f90955..b58c271 100644
--- a/web-player/src/routes/(app)/mixes/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
@@ -9,7 +9,7 @@
 		playShuffled,
 		toQueueItem
 	} from '$lib/player/player.svelte';
-	import { fmtTime, plural } from '$lib/format';
+	import { fmtTime, plural } from '$lib/utils/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
diff --git a/web-player/src/routes/(app)/playlists/+page.svelte b/web-player/src/routes/(app)/playlists/+page.svelte
index c40795b..415d2f3 100644
--- a/web-player/src/routes/(app)/playlists/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/+page.svelte
@@ -6,7 +6,7 @@
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import { createPlaylistModal } from '$lib/state/playlists.svelte';
-	import { fmtDurationLong, plural, playlistMeta } from '$lib/format';
+	import { fmtDurationLong, plural, playlistMeta } from '$lib/utils/format';
 
 	let { data } = $props();
 
diff --git a/web-player/src/routes/(app)/playlists/[id]/+page.svelte b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
index 70b8f85..5028998 100644
--- a/web-player/src/routes/(app)/playlists/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
@@ -15,7 +15,7 @@
 	import Button from '$lib/components/ui/Button.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import TrackList from '$lib/components/ui/TrackList.svelte';
-	import { playlistMeta } from '$lib/format';
+	import { playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
 
diff --git a/web-player/src/routes/(app)/u/[id]/+page.svelte b/web-player/src/routes/(app)/u/[id]/+page.svelte
index 16f9290..2f2f804 100644
--- a/web-player/src/routes/(app)/u/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/u/[id]/+page.svelte
@@ -9,7 +9,7 @@
 	import Avatar from '$lib/components/ui/Avatar.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import { plural, playlistMeta } from '$lib/format';
+	import { plural, playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
 
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index d8bb115..1047400 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -15,7 +15,7 @@
 	import { pressable } from '$lib/actions/pressable';
 	import { mergeRecentlyPlayed } from '$lib/data/recentlyPlayed';
 	import { mixItemTrack } from '$lib/data/mixes';
-	import { fmtTime, fmtDurationLong, fmtPlays, plural } from '$lib/format';
+	import { fmtTime, fmtDurationLong, fmtPlays, plural } from '$lib/utils/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import Artwork from '$lib/components/ui/Artwork.svelte';
 	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-- 
2.54.0


From 50618865e7ffdfde2d5aa18ce5e62561f3f6338c Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:12:11 +0200
Subject: [PATCH 06/50] Move app chrome components into components/layout

---
 .../lib/components/{ => layout}/MobileHeader.svelte    | 10 +++++-----
 .../src/lib/components/{ => layout}/Sidebar.svelte     |  6 +++---
 .../src/lib/components/{ => layout}/TabsBar.svelte     |  0
 .../src/lib/components/{ => layout}/TopBar.svelte      |  8 ++++----
 web-player/src/lib/components/player/PlayerDock.svelte |  2 +-
 web-player/src/routes/+layout.svelte                   |  6 +++---
 6 files changed, 16 insertions(+), 16 deletions(-)
 rename web-player/src/lib/components/{ => layout}/MobileHeader.svelte (84%)
 rename web-player/src/lib/components/{ => layout}/Sidebar.svelte (95%)
 rename web-player/src/lib/components/{ => layout}/TabsBar.svelte (100%)
 rename web-player/src/lib/components/{ => layout}/TopBar.svelte (94%)

diff --git a/web-player/src/lib/components/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte
similarity index 84%
rename from web-player/src/lib/components/MobileHeader.svelte
rename to web-player/src/lib/components/layout/MobileHeader.svelte
index f449659..3629bba 100644
--- a/web-player/src/lib/components/MobileHeader.svelte
+++ b/web-player/src/lib/components/layout/MobileHeader.svelte
@@ -3,11 +3,11 @@
 	import Upload from '@lucide/svelte/icons/upload';
 	import Folder from '@lucide/svelte/icons/folder';
 	import LogIn from '@lucide/svelte/icons/log-in';
-	import MenuItem from './ui/MenuItem.svelte';
-	import AccountMenu from './ui/AccountMenu.svelte';
-	import Avatar from './ui/Avatar.svelte';
-	import IconButton from './ui/IconButton.svelte';
-	import Logo from './ui/Logo.svelte';
+	import MenuItem from '../ui/MenuItem.svelte';
+	import AccountMenu from '../ui/AccountMenu.svelte';
+	import Avatar from '../ui/Avatar.svelte';
+	import IconButton from '../ui/IconButton.svelte';
+	import Logo from '../ui/Logo.svelte';
 
 	interface Props {
 		user: SessionUser | null;
diff --git a/web-player/src/lib/components/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
similarity index 95%
rename from web-player/src/lib/components/Sidebar.svelte
rename to web-player/src/lib/components/layout/Sidebar.svelte
index adfa974..b66d032 100644
--- a/web-player/src/lib/components/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -4,9 +4,9 @@
 	import { liked } from '$lib/player/liked.svelte';
 	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import type { SessionUser } from '$lib/types';
-	import ListRow from './ui/ListRow.svelte';
-	import IconButton from './ui/IconButton.svelte';
-	import Logo from './ui/Logo.svelte';
+	import ListRow from '../ui/ListRow.svelte';
+	import IconButton from '../ui/IconButton.svelte';
+	import Logo from '../ui/Logo.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
 
 	interface SidebarPlaylist {
diff --git a/web-player/src/lib/components/TabsBar.svelte b/web-player/src/lib/components/layout/TabsBar.svelte
similarity index 100%
rename from web-player/src/lib/components/TabsBar.svelte
rename to web-player/src/lib/components/layout/TabsBar.svelte
diff --git a/web-player/src/lib/components/TopBar.svelte b/web-player/src/lib/components/layout/TopBar.svelte
similarity index 94%
rename from web-player/src/lib/components/TopBar.svelte
rename to web-player/src/lib/components/layout/TopBar.svelte
index f5147bf..ed28306 100644
--- a/web-player/src/lib/components/TopBar.svelte
+++ b/web-player/src/lib/components/layout/TopBar.svelte
@@ -7,10 +7,10 @@
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-	import AccountMenu from './ui/AccountMenu.svelte';
-	import Avatar from './ui/Avatar.svelte';
-	import IconButton from './ui/IconButton.svelte';
-	import Button from './ui/Button.svelte';
+	import AccountMenu from '../ui/AccountMenu.svelte';
+	import Avatar from '../ui/Avatar.svelte';
+	import IconButton from '../ui/IconButton.svelte';
+	import Button from '../ui/Button.svelte';
 
 	interface Props {
 		user: SessionUser | null;
diff --git a/web-player/src/lib/components/player/PlayerDock.svelte b/web-player/src/lib/components/player/PlayerDock.svelte
index 4d7a111..5eece8e 100644
--- a/web-player/src/lib/components/player/PlayerDock.svelte
+++ b/web-player/src/lib/components/player/PlayerDock.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import PlayerBar from './PlayerBar.svelte';
-	import TabsBar from '../TabsBar.svelte';
+	import TabsBar from '../layout/TabsBar.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import type { SessionUser } from '$lib/types';
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index 41bbae9..530f756 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -6,9 +6,9 @@
 	import favicon from '$lib/assets/favicon.svg';
 	import PlayerDock from '$lib/components/player/PlayerDock.svelte';
 	import Queue from '$lib/components/player/Queue.svelte';
-	import Sidebar from '$lib/components/Sidebar.svelte';
-	import TopBar from '$lib/components/TopBar.svelte';
-	import MobileHeader from '$lib/components/MobileHeader.svelte';
+	import Sidebar from '$lib/components/layout/Sidebar.svelte';
+	import TopBar from '$lib/components/layout/TopBar.svelte';
+	import MobileHeader from '$lib/components/layout/MobileHeader.svelte';
 	import Modal from '$lib/components/ui/Modal.svelte';
 	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
 	import { player } from '$lib/player/player.svelte';
-- 
2.54.0


From 7fcf0645dabbdc7aac895766e7bec61d82797ce4 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:16:25 +0200
Subject: [PATCH 07/50] Categorize components/ui into primitives, overlay,
 media, forms and layout

Splits the flat 38-component ui/ folder into primitives/ (generic
controls), overlay/ (menus/modals), media/ (music-domain display
components), forms/ (composite entity forms) and layout/ (page
scaffolding), and updates every import path accordingly.
---
 .../lib/components/layout/MobileHeader.svelte | 10 +++----
 .../src/lib/components/layout/Sidebar.svelte  |  6 ++---
 .../src/lib/components/layout/TopBar.svelte   |  8 +++---
 .../lib/components/player/PlayerBar.svelte    |  4 +--
 .../lib/components/player/PlayerDock.svelte   |  2 +-
 .../src/lib/components/player/Queue.svelte    |  6 ++---
 .../lib/components/player/TrackInfo.svelte    |  8 +++---
 .../player/TransportControls.svelte           |  2 +-
 .../ui/{ => forms}/AlbumForm.svelte           |  6 ++---
 .../ui/{ => forms}/CoverForm.svelte           |  6 ++---
 .../ui/{ => forms}/ImageDropzone.svelte       |  0
 .../ui/{ => forms}/PlaylistForm.svelte        |  8 +++---
 .../components/ui/{ => layout}/Page.svelte    |  0
 .../ui/{ => layout}/PageHeader.svelte         |  0
 .../ui/{ => layout}/SectionHeading.svelte     |  0
 .../ui/{ => media}/ArtistLink.svelte          |  0
 .../components/ui/{ => media}/Artwork.svelte  |  0
 .../components/ui/{ => media}/Avatar.svelte   |  0
 .../components/ui/{ => media}/EqBars.svelte   |  0
 .../ui/{ => media}/ExplicitBadge.svelte       |  0
 .../components/ui/{ => media}/ListRow.svelte  |  0
 .../ui/{ => media}/MediaCard.svelte           |  0
 .../ui/{ => media}/MediaIdentity.svelte       |  0
 .../ui/{ => media}/PlayButton.svelte          |  0
 .../ui/{ => media}/TrackList.svelte           |  2 +-
 .../ui/{ => overlay}/AccountMenu.svelte       |  0
 .../ui/{ => overlay}/ConfirmDialog.svelte     |  2 +-
 .../ui/{ => overlay}/ContextMenu.svelte       |  2 +-
 .../ui/{ => overlay}/GlassMenu.svelte         |  0
 .../ui/{ => overlay}/MenuItem.svelte          |  0
 .../components/ui/{ => overlay}/Modal.svelte  |  2 +-
 .../ui/{ => primitives}/Alert.svelte          |  0
 .../ui/{ => primitives}/BackLink.svelte       |  0
 .../ui/{ => primitives}/Button.svelte         |  0
 .../ui/{ => primitives}/Checkbox.svelte       |  0
 .../ui/{ => primitives}/Chip.svelte           |  0
 .../ui/{ => primitives}/EmptyState.svelte     |  0
 .../ui/{ => primitives}/Field.svelte          |  0
 .../ui/{ => primitives}/IconButton.svelte     |  0
 .../ui/{ => primitives}/InfiniteScroll.svelte |  0
 .../ui/{ => primitives}/Input.svelte          |  0
 .../ui/{ => primitives}/Logo.svelte           |  0
 .../{ => primitives}/SegmentedControl.svelte  |  0
 .../ui/{ => primitives}/Slider.svelte         |  0
 .../ui/{ => primitives}/Surface.svelte        |  0
 .../ui/{ => primitives}/Textarea.svelte       |  0
 web-player/src/lib/state/menus.svelte.ts      |  2 +-
 .../src/routes/(app)/albums/+page.svelte      | 14 +++++-----
 .../src/routes/(app)/albums/[id]/+page.svelte | 22 ++++++++--------
 .../src/routes/(app)/explore/+page.svelte     | 26 +++++++++----------
 .../src/routes/(app)/library/+page.svelte     | 10 +++----
 .../src/routes/(app)/liked/+page.svelte       | 10 +++----
 .../src/routes/(app)/mixes/[id]/+page.svelte  | 16 ++++++------
 .../src/routes/(app)/playlists/+page.svelte   | 10 +++----
 .../routes/(app)/playlists/[id]/+page.svelte  | 18 ++++++-------
 .../src/routes/(app)/u/[id]/+page.svelte      | 14 +++++-----
 .../src/routes/(app)/upload/+page.svelte      | 18 ++++++-------
 web-player/src/routes/+error.svelte           |  2 +-
 web-player/src/routes/+layout.svelte          |  4 +--
 web-player/src/routes/+page.svelte            | 18 ++++++-------
 web-player/src/routes/login/+page.svelte      |  4 +--
 61 files changed, 131 insertions(+), 131 deletions(-)
 rename web-player/src/lib/components/ui/{ => forms}/AlbumForm.svelte (92%)
 rename web-player/src/lib/components/ui/{ => forms}/CoverForm.svelte (93%)
 rename web-player/src/lib/components/ui/{ => forms}/ImageDropzone.svelte (100%)
 rename web-player/src/lib/components/ui/{ => forms}/PlaylistForm.svelte (91%)
 rename web-player/src/lib/components/ui/{ => layout}/Page.svelte (100%)
 rename web-player/src/lib/components/ui/{ => layout}/PageHeader.svelte (100%)
 rename web-player/src/lib/components/ui/{ => layout}/SectionHeading.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/ArtistLink.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/Artwork.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/Avatar.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/EqBars.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/ExplicitBadge.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/ListRow.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/MediaCard.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/MediaIdentity.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/PlayButton.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/TrackList.svelte (98%)
 rename web-player/src/lib/components/ui/{ => overlay}/AccountMenu.svelte (100%)
 rename web-player/src/lib/components/ui/{ => overlay}/ConfirmDialog.svelte (93%)
 rename web-player/src/lib/components/ui/{ => overlay}/ContextMenu.svelte (98%)
 rename web-player/src/lib/components/ui/{ => overlay}/GlassMenu.svelte (100%)
 rename web-player/src/lib/components/ui/{ => overlay}/MenuItem.svelte (100%)
 rename web-player/src/lib/components/ui/{ => overlay}/Modal.svelte (97%)
 rename web-player/src/lib/components/ui/{ => primitives}/Alert.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/BackLink.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Button.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Checkbox.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Chip.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/EmptyState.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Field.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/IconButton.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/InfiniteScroll.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Input.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Logo.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/SegmentedControl.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Slider.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Surface.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Textarea.svelte (100%)

diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte
index 3629bba..e219c10 100644
--- a/web-player/src/lib/components/layout/MobileHeader.svelte
+++ b/web-player/src/lib/components/layout/MobileHeader.svelte
@@ -3,11 +3,11 @@
 	import Upload from '@lucide/svelte/icons/upload';
 	import Folder from '@lucide/svelte/icons/folder';
 	import LogIn from '@lucide/svelte/icons/log-in';
-	import MenuItem from '../ui/MenuItem.svelte';
-	import AccountMenu from '../ui/AccountMenu.svelte';
-	import Avatar from '../ui/Avatar.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Logo from '../ui/Logo.svelte';
+	import MenuItem from '../ui/overlay/MenuItem.svelte';
+	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
+	import Avatar from '../ui/media/Avatar.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Logo from '../ui/primitives/Logo.svelte';
 
 	interface Props {
 		user: SessionUser | null;
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index b66d032..d80d5d6 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -4,9 +4,9 @@
 	import { liked } from '$lib/player/liked.svelte';
 	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import type { SessionUser } from '$lib/types';
-	import ListRow from '../ui/ListRow.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Logo from '../ui/Logo.svelte';
+	import ListRow from '../ui/media/ListRow.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Logo from '../ui/primitives/Logo.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
 
 	interface SidebarPlaylist {
diff --git a/web-player/src/lib/components/layout/TopBar.svelte b/web-player/src/lib/components/layout/TopBar.svelte
index ed28306..667faac 100644
--- a/web-player/src/lib/components/layout/TopBar.svelte
+++ b/web-player/src/lib/components/layout/TopBar.svelte
@@ -7,10 +7,10 @@
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-	import AccountMenu from '../ui/AccountMenu.svelte';
-	import Avatar from '../ui/Avatar.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Button from '../ui/Button.svelte';
+	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
+	import Avatar from '../ui/media/Avatar.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Button from '../ui/primitives/Button.svelte';
 
 	interface Props {
 		user: SessionUser | null;
diff --git a/web-player/src/lib/components/player/PlayerBar.svelte b/web-player/src/lib/components/player/PlayerBar.svelte
index 33e5152..6b85a1e 100644
--- a/web-player/src/lib/components/player/PlayerBar.svelte
+++ b/web-player/src/lib/components/player/PlayerBar.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import TrackInfo from './TrackInfo.svelte';
 	import TransportControls from './TransportControls.svelte';
-	import Slider from '$lib/components/ui/Slider.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import Slider from '$lib/components/ui/primitives/Slider.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { fmtTime } from '$lib/utils/format';
diff --git a/web-player/src/lib/components/player/PlayerDock.svelte b/web-player/src/lib/components/player/PlayerDock.svelte
index 5eece8e..b50154a 100644
--- a/web-player/src/lib/components/player/PlayerDock.svelte
+++ b/web-player/src/lib/components/player/PlayerDock.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import PlayerBar from './PlayerBar.svelte';
 	import TabsBar from '../layout/TabsBar.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import type { SessionUser } from '$lib/types';
 
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 1f07249..86c1375 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
-	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import MediaIdentity from '$lib/components/ui/media/MediaIdentity.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';
diff --git a/web-player/src/lib/components/player/TrackInfo.svelte b/web-player/src/lib/components/player/TrackInfo.svelte
index 101787b..78fc802 100644
--- a/web-player/src/lib/components/player/TrackInfo.svelte
+++ b/web-player/src/lib/components/player/TrackInfo.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
-	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import ExplicitBadge from '$lib/components/ui/media/ExplicitBadge.svelte';
+	import ArtistLink from '$lib/components/ui/media/ArtistLink.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import Heart from '@lucide/svelte/icons/heart';
 
 	interface Props {
diff --git a/web-player/src/lib/components/player/TransportControls.svelte b/web-player/src/lib/components/player/TransportControls.svelte
index 61ec0c9..e2b7a7b 100644
--- a/web-player/src/lib/components/player/TransportControls.svelte
+++ b/web-player/src/lib/components/player/TransportControls.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
-	import PlayButton from '$lib/components/ui/PlayButton.svelte';
+	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import Repeat from '@lucide/svelte/icons/repeat';
 
diff --git a/web-player/src/lib/components/ui/AlbumForm.svelte b/web-player/src/lib/components/ui/forms/AlbumForm.svelte
similarity index 92%
rename from web-player/src/lib/components/ui/AlbumForm.svelte
rename to web-player/src/lib/components/ui/forms/AlbumForm.svelte
index 79f7691..3442c45 100644
--- a/web-player/src/lib/components/ui/AlbumForm.svelte
+++ b/web-player/src/lib/components/ui/forms/AlbumForm.svelte
@@ -2,9 +2,9 @@
 	import { untrack } from 'svelte';
 	import Disc3 from '@lucide/svelte/icons/disc-3';
 	import CoverForm from './CoverForm.svelte';
-	import Field from './Field.svelte';
-	import Input from './Input.svelte';
-	import Textarea from './Textarea.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Input from '../primitives/Input.svelte';
+	import Textarea from '../primitives/Textarea.svelte';
 	import { ALBUM_EARLIEST_YEAR } from '$lib/config';
 
 	interface Props {
diff --git a/web-player/src/lib/components/ui/CoverForm.svelte b/web-player/src/lib/components/ui/forms/CoverForm.svelte
similarity index 93%
rename from web-player/src/lib/components/ui/CoverForm.svelte
rename to web-player/src/lib/components/ui/forms/CoverForm.svelte
index cde587a..e298bc6 100644
--- a/web-player/src/lib/components/ui/CoverForm.svelte
+++ b/web-player/src/lib/components/ui/forms/CoverForm.svelte
@@ -3,9 +3,9 @@
 	import { enhance } from '$app/forms';
 	import type { LucideIcon } from '@lucide/svelte';
 	import ImageDropzone from './ImageDropzone.svelte';
-	import Button from './Button.svelte';
-	import Field from './Field.svelte';
-	import Alert from './Alert.svelte';
+	import Button from '../primitives/Button.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Alert from '../primitives/Alert.svelte';
 
 	interface Props {
 		action: string;
diff --git a/web-player/src/lib/components/ui/ImageDropzone.svelte b/web-player/src/lib/components/ui/forms/ImageDropzone.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/ImageDropzone.svelte
rename to web-player/src/lib/components/ui/forms/ImageDropzone.svelte
diff --git a/web-player/src/lib/components/ui/PlaylistForm.svelte b/web-player/src/lib/components/ui/forms/PlaylistForm.svelte
similarity index 91%
rename from web-player/src/lib/components/ui/PlaylistForm.svelte
rename to web-player/src/lib/components/ui/forms/PlaylistForm.svelte
index c9944b1..1ef7642 100644
--- a/web-player/src/lib/components/ui/PlaylistForm.svelte
+++ b/web-player/src/lib/components/ui/forms/PlaylistForm.svelte
@@ -2,10 +2,10 @@
 	import { untrack } from 'svelte';
 	import Music from '@lucide/svelte/icons/music';
 	import CoverForm from './CoverForm.svelte';
-	import Field from './Field.svelte';
-	import Input from './Input.svelte';
-	import Textarea from './Textarea.svelte';
-	import SegmentedControl from './SegmentedControl.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Input from '../primitives/Input.svelte';
+	import Textarea from '../primitives/Textarea.svelte';
+	import SegmentedControl from '../primitives/SegmentedControl.svelte';
 
 	const NAME_MAX_LENGTH = 60;
 	const DESCRIPTION_MAX_LENGTH = 300;
diff --git a/web-player/src/lib/components/ui/Page.svelte b/web-player/src/lib/components/ui/layout/Page.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Page.svelte
rename to web-player/src/lib/components/ui/layout/Page.svelte
diff --git a/web-player/src/lib/components/ui/PageHeader.svelte b/web-player/src/lib/components/ui/layout/PageHeader.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/PageHeader.svelte
rename to web-player/src/lib/components/ui/layout/PageHeader.svelte
diff --git a/web-player/src/lib/components/ui/SectionHeading.svelte b/web-player/src/lib/components/ui/layout/SectionHeading.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/SectionHeading.svelte
rename to web-player/src/lib/components/ui/layout/SectionHeading.svelte
diff --git a/web-player/src/lib/components/ui/ArtistLink.svelte b/web-player/src/lib/components/ui/media/ArtistLink.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/ArtistLink.svelte
rename to web-player/src/lib/components/ui/media/ArtistLink.svelte
diff --git a/web-player/src/lib/components/ui/Artwork.svelte b/web-player/src/lib/components/ui/media/Artwork.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Artwork.svelte
rename to web-player/src/lib/components/ui/media/Artwork.svelte
diff --git a/web-player/src/lib/components/ui/Avatar.svelte b/web-player/src/lib/components/ui/media/Avatar.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Avatar.svelte
rename to web-player/src/lib/components/ui/media/Avatar.svelte
diff --git a/web-player/src/lib/components/ui/EqBars.svelte b/web-player/src/lib/components/ui/media/EqBars.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/EqBars.svelte
rename to web-player/src/lib/components/ui/media/EqBars.svelte
diff --git a/web-player/src/lib/components/ui/ExplicitBadge.svelte b/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/ExplicitBadge.svelte
rename to web-player/src/lib/components/ui/media/ExplicitBadge.svelte
diff --git a/web-player/src/lib/components/ui/ListRow.svelte b/web-player/src/lib/components/ui/media/ListRow.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/ListRow.svelte
rename to web-player/src/lib/components/ui/media/ListRow.svelte
diff --git a/web-player/src/lib/components/ui/MediaCard.svelte b/web-player/src/lib/components/ui/media/MediaCard.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/MediaCard.svelte
rename to web-player/src/lib/components/ui/media/MediaCard.svelte
diff --git a/web-player/src/lib/components/ui/MediaIdentity.svelte b/web-player/src/lib/components/ui/media/MediaIdentity.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/MediaIdentity.svelte
rename to web-player/src/lib/components/ui/media/MediaIdentity.svelte
diff --git a/web-player/src/lib/components/ui/PlayButton.svelte b/web-player/src/lib/components/ui/media/PlayButton.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/PlayButton.svelte
rename to web-player/src/lib/components/ui/media/PlayButton.svelte
diff --git a/web-player/src/lib/components/ui/TrackList.svelte b/web-player/src/lib/components/ui/media/TrackList.svelte
similarity index 98%
rename from web-player/src/lib/components/ui/TrackList.svelte
rename to web-player/src/lib/components/ui/media/TrackList.svelte
index 46b6243..d48589f 100644
--- a/web-player/src/lib/components/ui/TrackList.svelte
+++ b/web-player/src/lib/components/ui/media/TrackList.svelte
@@ -36,7 +36,7 @@
 	import { pressable } from '$lib/actions/pressable';
 	import MediaIdentity from './MediaIdentity.svelte';
 	import EqBars from './EqBars.svelte';
-	import IconButton from './IconButton.svelte';
+	import IconButton from '../primitives/IconButton.svelte';
 
 	interface RowAction {
 		action?: string;
diff --git a/web-player/src/lib/components/ui/AccountMenu.svelte b/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/AccountMenu.svelte
rename to web-player/src/lib/components/ui/overlay/AccountMenu.svelte
diff --git a/web-player/src/lib/components/ui/ConfirmDialog.svelte b/web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
similarity index 93%
rename from web-player/src/lib/components/ui/ConfirmDialog.svelte
rename to web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
index c1c4188..233bba7 100644
--- a/web-player/src/lib/components/ui/ConfirmDialog.svelte
+++ b/web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Modal from './Modal.svelte';
-	import Button from './Button.svelte';
+	import Button from '../primitives/Button.svelte';
 
 	interface Props {
 		open: boolean;
diff --git a/web-player/src/lib/components/ui/ContextMenu.svelte b/web-player/src/lib/components/ui/overlay/ContextMenu.svelte
similarity index 98%
rename from web-player/src/lib/components/ui/ContextMenu.svelte
rename to web-player/src/lib/components/ui/overlay/ContextMenu.svelte
index c011305..664f21c 100644
--- a/web-player/src/lib/components/ui/ContextMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/ContextMenu.svelte
@@ -21,7 +21,7 @@
 	import { enhance } from '$app/forms';
 	import type { LucideIcon } from '@lucide/svelte';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import MediaIdentity from './MediaIdentity.svelte';
+	import MediaIdentity from '../media/MediaIdentity.svelte';
 	import GlassMenu from './GlassMenu.svelte';
 	import MenuItem from './MenuItem.svelte';
 
diff --git a/web-player/src/lib/components/ui/GlassMenu.svelte b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/GlassMenu.svelte
rename to web-player/src/lib/components/ui/overlay/GlassMenu.svelte
diff --git a/web-player/src/lib/components/ui/MenuItem.svelte b/web-player/src/lib/components/ui/overlay/MenuItem.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/MenuItem.svelte
rename to web-player/src/lib/components/ui/overlay/MenuItem.svelte
diff --git a/web-player/src/lib/components/ui/Modal.svelte b/web-player/src/lib/components/ui/overlay/Modal.svelte
similarity index 97%
rename from web-player/src/lib/components/ui/Modal.svelte
rename to web-player/src/lib/components/ui/overlay/Modal.svelte
index 1102471..c304c61 100644
--- a/web-player/src/lib/components/ui/Modal.svelte
+++ b/web-player/src/lib/components/ui/overlay/Modal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import X from '@lucide/svelte/icons/x';
-	import IconButton from './IconButton.svelte';
+	import IconButton from '../primitives/IconButton.svelte';
 
 	interface Props {
 		open: boolean;
diff --git a/web-player/src/lib/components/ui/Alert.svelte b/web-player/src/lib/components/ui/primitives/Alert.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Alert.svelte
rename to web-player/src/lib/components/ui/primitives/Alert.svelte
diff --git a/web-player/src/lib/components/ui/BackLink.svelte b/web-player/src/lib/components/ui/primitives/BackLink.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/BackLink.svelte
rename to web-player/src/lib/components/ui/primitives/BackLink.svelte
diff --git a/web-player/src/lib/components/ui/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Button.svelte
rename to web-player/src/lib/components/ui/primitives/Button.svelte
diff --git a/web-player/src/lib/components/ui/Checkbox.svelte b/web-player/src/lib/components/ui/primitives/Checkbox.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Checkbox.svelte
rename to web-player/src/lib/components/ui/primitives/Checkbox.svelte
diff --git a/web-player/src/lib/components/ui/Chip.svelte b/web-player/src/lib/components/ui/primitives/Chip.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Chip.svelte
rename to web-player/src/lib/components/ui/primitives/Chip.svelte
diff --git a/web-player/src/lib/components/ui/EmptyState.svelte b/web-player/src/lib/components/ui/primitives/EmptyState.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/EmptyState.svelte
rename to web-player/src/lib/components/ui/primitives/EmptyState.svelte
diff --git a/web-player/src/lib/components/ui/Field.svelte b/web-player/src/lib/components/ui/primitives/Field.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Field.svelte
rename to web-player/src/lib/components/ui/primitives/Field.svelte
diff --git a/web-player/src/lib/components/ui/IconButton.svelte b/web-player/src/lib/components/ui/primitives/IconButton.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/IconButton.svelte
rename to web-player/src/lib/components/ui/primitives/IconButton.svelte
diff --git a/web-player/src/lib/components/ui/InfiniteScroll.svelte b/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/InfiniteScroll.svelte
rename to web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte
diff --git a/web-player/src/lib/components/ui/Input.svelte b/web-player/src/lib/components/ui/primitives/Input.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Input.svelte
rename to web-player/src/lib/components/ui/primitives/Input.svelte
diff --git a/web-player/src/lib/components/ui/Logo.svelte b/web-player/src/lib/components/ui/primitives/Logo.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Logo.svelte
rename to web-player/src/lib/components/ui/primitives/Logo.svelte
diff --git a/web-player/src/lib/components/ui/SegmentedControl.svelte b/web-player/src/lib/components/ui/primitives/SegmentedControl.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/SegmentedControl.svelte
rename to web-player/src/lib/components/ui/primitives/SegmentedControl.svelte
diff --git a/web-player/src/lib/components/ui/Slider.svelte b/web-player/src/lib/components/ui/primitives/Slider.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Slider.svelte
rename to web-player/src/lib/components/ui/primitives/Slider.svelte
diff --git a/web-player/src/lib/components/ui/Surface.svelte b/web-player/src/lib/components/ui/primitives/Surface.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Surface.svelte
rename to web-player/src/lib/components/ui/primitives/Surface.svelte
diff --git a/web-player/src/lib/components/ui/Textarea.svelte b/web-player/src/lib/components/ui/primitives/Textarea.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Textarea.svelte
rename to web-player/src/lib/components/ui/primitives/Textarea.svelte
diff --git a/web-player/src/lib/state/menus.svelte.ts b/web-player/src/lib/state/menus.svelte.ts
index c2959b0..305c7ea 100644
--- a/web-player/src/lib/state/menus.svelte.ts
+++ b/web-player/src/lib/state/menus.svelte.ts
@@ -1,4 +1,4 @@
-import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
 import { player, toQueueItem, type ApiTrackLike } from '../player/player.svelte';
 
 export type TrackMenuState = { track: ApiTrackLike } & MenuPosition;
diff --git a/web-player/src/routes/(app)/albums/+page.svelte b/web-player/src/routes/(app)/albums/+page.svelte
index 237f9ae..aaf0870 100644
--- a/web-player/src/routes/(app)/albums/+page.svelte
+++ b/web-player/src/routes/(app)/albums/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Plus from '@lucide/svelte/icons/plus';
 	import Disc from '@lucide/svelte/icons/disc-3';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import AlbumForm from '$lib/components/ui/forms/AlbumForm.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/albums/[id]/+page.svelte b/web-player/src/routes/(app)/albums/[id]/+page.svelte
index 055f9a3..4915104 100644
--- a/web-player/src/routes/(app)/albums/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/albums/[id]/+page.svelte
@@ -6,17 +6,17 @@
 	import Pause from '@lucide/svelte/icons/pause';
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import BackLink from '$lib/components/ui/BackLink.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import ConfirmDialog from '$lib/components/ui/overlay/ConfirmDialog.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import AlbumForm from '$lib/components/ui/forms/AlbumForm.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 3147b33..860b4f4 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -3,22 +3,22 @@
 	import { player, toQueueItem } from '$lib/player/player.svelte';
 	import { fetchAlbumQueueItems } from '$lib/data/albums';
 	import { fmtTime, fmtPlays, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import Avatar from '$lib/components/ui/Avatar.svelte';
-	import PlayButton from '$lib/components/ui/PlayButton.svelte';
-	import EqBars from '$lib/components/ui/EqBars.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import Chip from '$lib/components/ui/Chip.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import Avatar from '$lib/components/ui/media/Avatar.svelte';
+	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
+	import EqBars from '$lib/components/ui/media/EqBars.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import Chip from '$lib/components/ui/primitives/Chip.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
 	import { searchHref } from '$lib/state/navigation.svelte';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
-	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ListEnd from '@lucide/svelte/icons/list-end';
 	import { appendUnique } from '$lib/data/collections';
diff --git a/web-player/src/routes/(app)/library/+page.svelte b/web-player/src/routes/(app)/library/+page.svelte
index 48f937d..1dc9858 100644
--- a/web-player/src/routes/(app)/library/+page.svelte
+++ b/web-player/src/routes/(app)/library/+page.svelte
@@ -4,11 +4,11 @@
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItems } from '$lib/player/player.svelte';
 	import { plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 
 	let { data } = $props();
 
diff --git a/web-player/src/routes/(app)/liked/+page.svelte b/web-player/src/routes/(app)/liked/+page.svelte
index c462761..0a110db 100644
--- a/web-player/src/routes/(app)/liked/+page.svelte
+++ b/web-player/src/routes/(app)/liked/+page.svelte
@@ -4,11 +4,11 @@
 	import { player, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
 	import { plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 
 	const tracks = $derived(liked.list);
 	const listTracks = $derived(tracks.map((track) => ({ ...track, addedAt: track.likedAt })));
diff --git a/web-player/src/routes/(app)/mixes/[id]/+page.svelte b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
index b58c271..fc77fc9 100644
--- a/web-player/src/routes/(app)/mixes/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
@@ -10,14 +10,14 @@
 		toQueueItem
 	} from '$lib/player/player.svelte';
 	import { fmtTime, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import BackLink from '$lib/components/ui/BackLink.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
-	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
+	import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { mixItemTrack } from '$lib/data/mixes';
diff --git a/web-player/src/routes/(app)/playlists/+page.svelte b/web-player/src/routes/(app)/playlists/+page.svelte
index 415d2f3..b4e0f83 100644
--- a/web-player/src/routes/(app)/playlists/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import ListMusic from '@lucide/svelte/icons/list-music';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import { fmtDurationLong, plural, playlistMeta } from '$lib/utils/format';
 
diff --git a/web-player/src/routes/(app)/playlists/[id]/+page.svelte b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
index 5028998..0bd6168 100644
--- a/web-player/src/routes/(app)/playlists/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
@@ -6,15 +6,15 @@
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
 	import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import ConfirmDialog from '$lib/components/ui/overlay/ConfirmDialog.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 	import { playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/u/[id]/+page.svelte b/web-player/src/routes/(app)/u/[id]/+page.svelte
index 2f2f804..1c57924 100644
--- a/web-player/src/routes/(app)/u/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/u/[id]/+page.svelte
@@ -2,13 +2,13 @@
 	import { untrack } from 'svelte';
 	import { enhance } from '$app/forms';
 	import ListMusic from '@lucide/svelte/icons/list-music';
-	import Page from '$lib/components/ui/Page.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Avatar from '$lib/components/ui/Avatar.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Avatar from '$lib/components/ui/media/Avatar.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { plural, playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte
index 98bc20b..80ce79d 100644
--- a/web-player/src/routes/(app)/upload/+page.svelte
+++ b/web-player/src/routes/(app)/upload/+page.svelte
@@ -4,15 +4,15 @@
 	import Music from '@lucide/svelte/icons/music';
 	import ImageIcon from '@lucide/svelte/icons/image';
 	import Check from '@lucide/svelte/icons/check';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Surface from '$lib/components/ui/Surface.svelte';
-	import ImageDropzone from '$lib/components/ui/ImageDropzone.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Field from '$lib/components/ui/Field.svelte';
-	import Input from '$lib/components/ui/Input.svelte';
-	import Checkbox from '$lib/components/ui/Checkbox.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Surface from '$lib/components/ui/primitives/Surface.svelte';
+	import ImageDropzone from '$lib/components/ui/forms/ImageDropzone.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Field from '$lib/components/ui/primitives/Field.svelte';
+	import Input from '$lib/components/ui/primitives/Input.svelte';
+	import Checkbox from '$lib/components/ui/primitives/Checkbox.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 
 	type Status = 'idle' | 'uploading' | 'done' | 'error';
 	type StepState = 'idle' | 'active' | 'done';
diff --git a/web-player/src/routes/+error.svelte b/web-player/src/routes/+error.svelte
index 6913cf3..6597497 100644
--- a/web-player/src/routes/+error.svelte
+++ b/web-player/src/routes/+error.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 </script>
 
 <div class="animate-enter mx-auto my-[14vh] max-w-prose-sm text-center">
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index 530f756..ff77a72 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -9,8 +9,8 @@
 	import Sidebar from '$lib/components/layout/Sidebar.svelte';
 	import TopBar from '$lib/components/layout/TopBar.svelte';
 	import MobileHeader from '$lib/components/layout/MobileHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { liked } from '$lib/player/liked.svelte';
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 1047400..686e113 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -16,15 +16,15 @@
 	import { mergeRecentlyPlayed } from '$lib/data/recentlyPlayed';
 	import { mixItemTrack } from '$lib/data/mixes';
 	import { fmtTime, fmtDurationLong, fmtPlays, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EqBars from '$lib/components/ui/EqBars.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EqBars from '$lib/components/ui/media/EqBars.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { HOME_CONTINUE_LIMIT, HOME_POPULAR_MAX } from '$lib/config';
diff --git a/web-player/src/routes/login/+page.svelte b/web-player/src/routes/login/+page.svelte
index 32427e4..26f0586 100644
--- a/web-player/src/routes/login/+page.svelte
+++ b/web-player/src/routes/login/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Button from '$lib/components/ui/Button.svelte';
-	import Logo from '$lib/components/ui/Logo.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Logo from '$lib/components/ui/primitives/Logo.svelte';
 
 	let { data } = $props();
 
-- 
2.54.0


From 76f7535ffa66c86dbb3751011a4c3b1e2ccb7618 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:16:37 +0200
Subject: [PATCH 08/50] Update folder structure plan registro after F1-F4/F6

---
 web-player/docs/folder-structure-plan.md | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web-player/docs/folder-structure-plan.md b/web-player/docs/folder-structure-plan.md
index 78e65ed..d34e867 100644
--- a/web-player/docs/folder-structure-plan.md
+++ b/web-player/docs/folder-structure-plan.md
@@ -109,8 +109,12 @@ para este tamaño):
 Sin barrels/`index.ts` — actualizar cada ruta de import directamente, no hace falta esa
 indirección para esto.
 
-Hacer **un sub-commit por categoría** (mover + actualizar imports + `npm run check`) en vez
-de mover las 38 de una vez, para mantener el diff revisable.
+Idealmente un sub-commit por categoría, pero en la práctica hay imports relativos
+(`./X.svelte`) que cruzan categorías (p. ej. `AlbumForm` → `CoverForm`+`Field`+`Input`, que
+caen en `forms/`+`primitives/`), así que mover una categoría a la vez deja `npm run check`
+roto a mitad de camino. Se hizo en **un único commit** que mueve las 38 a la vez y reescribe
+todos los imports (internos y externos) — sigue siendo revisable porque son solo
+renames + cambios de ruta de import, sin lógica nueva.
 
 **Cierre:** las 5 subcarpetas creadas, `ui/` raíz sin `.svelte` sueltos, imports
 actualizados, `npm run check` y `npm run lint` limpios.
@@ -119,9 +123,9 @@ actualizados, `npm run check` y `npm run lint` limpios.
 
 ## Registro
 
-- [ ] F1 — estado reactivo → `lib/state/`
-- [ ] F2 — helpers de dominio → `lib/data/`
-- [ ] F3 — utilidades genéricas (`format.ts` → `lib/utils/`)
-- [ ] F4 — componentes de layout/chrome → `components/layout/`
+- [x] F1 — estado reactivo → `lib/state/`
+- [x] F2 — helpers de dominio → `lib/data/`
+- [x] F3 — utilidades genéricas (`format.ts` → `lib/utils/`)
+- [x] F4 — componentes de layout/chrome → `components/layout/`
 - [ ] F5 — consolidar rutas de auth bajo `/auth/` (opcional, pendiente de confirmación)
-- [ ] F6 — categorizar `components/ui/` (primitives/overlay/media/forms/layout)
+- [x] F6 — categorizar `components/ui/` (primitives/overlay/media/forms/layout)
-- 
2.54.0


From fbb102ffbd571aa6801c135926f0d852aa494acb Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:20:46 +0200
Subject: [PATCH 09/50] Consolidate auth routes under /auth and rename /u to
 /user

Moves the login screen from /login to /auth, logout from /logout to
/auth/logout (alongside the existing /auth/login and /auth/callback
endpoints), and the public profile route from /u/[id] to /user/[id].

AUTH_REDIRECT_URI and AUTH_POST_LOGOUT_URI already point at
/auth/callback and / respectively, so no Zitadel config change is
needed for the auth move.
---
 web-player/docs/paginas.md                        | 15 ++++++++-------
 .../src/lib/components/ui/media/ArtistLink.svelte |  2 +-
 .../lib/components/ui/overlay/AccountMenu.svelte  |  4 ++--
 web-player/src/lib/server/api.ts                  |  4 ++--
 web-player/src/routes/(app)/explore/+page.svelte  |  4 ++--
 .../routes/(app)/{u => user}/[id]/+page.server.ts |  0
 .../routes/(app)/{u => user}/[id]/+page.svelte    |  0
 web-player/src/routes/+layout.server.ts           |  4 ++--
 web-player/src/routes/+layout.svelte              |  2 +-
 .../src/routes/{login => auth}/+page.server.ts    |  0
 .../src/routes/{login => auth}/+page.svelte       |  0
 .../src/routes/{ => auth}/logout/+server.ts       |  0
 12 files changed, 18 insertions(+), 17 deletions(-)
 rename web-player/src/routes/(app)/{u => user}/[id]/+page.server.ts (100%)
 rename web-player/src/routes/(app)/{u => user}/[id]/+page.svelte (100%)
 rename web-player/src/routes/{login => auth}/+page.server.ts (100%)
 rename web-player/src/routes/{login => auth}/+page.svelte (100%)
 rename web-player/src/routes/{ => auth}/logout/+server.ts (100%)

diff --git a/web-player/docs/paginas.md b/web-player/docs/paginas.md
index 744d8f6..c2b6688 100644
--- a/web-player/docs/paginas.md
+++ b/web-player/docs/paginas.md
@@ -46,7 +46,7 @@ src/routes/
     library/            /library     Tu biblioteca      ⬜
     playlists/          /playlists   Tus playlists      ⬜
       [id]/             /playlists/:id  Detalle playlist ⬜
-  login  logout  auth/callback       Auth (endpoints)   ✅
+  auth  auth/login  auth/logout  auth/callback  Auth (página + endpoints)   ✅
   api/tracks/[id]/stream             Proxy de stream    ✅
 ```
 
@@ -66,10 +66,11 @@ Página de entrada para no autenticados. Vender el producto y llevar a registro/
 
 ## 2. Login / Auth ✅ (endpoints)
 
-No es una página visual propia: `/login` inicia el flujo OIDC de Zitadel y redirige.
-`?mode=register` arranca en registro; `?returnTo=` vuelve a la ruta pedida tras entrar.
-`/logout` cierra sesión. `/auth/callback` intercambia el código y crea la cookie
-cifrada `mf_session`. La UI de credenciales la sirve Zitadel, no Musify.
+`/auth` es la pantalla de login de Musify; sus botones llevan a `/auth/login`, que inicia
+el flujo OIDC de Zitadel y redirige. `?mode=register` arranca en registro; `?returnTo=`
+vuelve a la ruta pedida tras entrar. `/auth/logout` cierra sesión. `/auth/callback`
+intercambia el código y crea la cookie cifrada `mf_session`. La UI de credenciales la
+sirve Zitadel, no Musify.
 
 ## 3. Explorar / Buscar `/explore` ✅ (app)
 
@@ -101,7 +102,7 @@ Contenido de la página:
 - **Pipeline visible**: pasos Subir → Procesar → Publicar con su estado.
 - **Barra de progreso** de subida y estado de procesado.
 - **Estados**: vacío, archivo seleccionado, subiendo, procesando, publicado, error.
-- **Requiere sesión** (al cablear: redirigir a `/login?returnTo=/upload`).
+- **Requiere sesión** (al cablear: redirigir a `/auth?returnTo=/upload`).
 
 ## 5. Tu biblioteca `/library` ⬜ (app)
 
@@ -133,7 +134,7 @@ Listado de las playlists del usuario.
 - **Acciones del dueño**: editar (`PUT`), borrar (`DELETE`) la playlist, reordenar (futuro).
 - **Añadir tracks**: desde explorar/biblioteca (`POST /playlists/{id}/tracks/{trackId}`).
 
-## 8. Perfil de usuario `/users/[id]` ⬜ (futuro)
+## 8. Perfil de usuario `/user/[id]` ⬜ (futuro)
 
 Vista pública de un usuario: avatar, nombre, sus canciones y playlists públicas
 (`GET /users/{id}`, `GET /tracks/users/{id}`, `GET /playlists/users/{id}`).
diff --git a/web-player/src/lib/components/ui/media/ArtistLink.svelte b/web-player/src/lib/components/ui/media/ArtistLink.svelte
index 3410faf..859ca0f 100644
--- a/web-player/src/lib/components/ui/media/ArtistLink.svelte
+++ b/web-player/src/lib/components/ui/media/ArtistLink.svelte
@@ -11,7 +11,7 @@
 {#if name}
 	{#if ownerUserId}
 		<a
-			href="/u/{ownerUserId}"
+			href="/user/{ownerUserId}"
 			onclick={(e) => e.stopPropagation()}
 			class="block max-w-full truncate hover:text-fg-2 hover:underline {klass}"
 		>
diff --git a/web-player/src/lib/components/ui/overlay/AccountMenu.svelte b/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
index 1fa050a..9554336 100644
--- a/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
@@ -45,7 +45,7 @@
 
 	{#if open}
 		<GlassMenu class="absolute top-full right-0 z-(--z-menu) mt-2 overflow-hidden {WIDTH[width]}">
-			<MenuItem icon={User} label="Ver perfil" href="/u/{user.sub}" onclick={close} />
+			<MenuItem icon={User} label="Ver perfil" href="/user/{user.sub}" onclick={close} />
 			{@render extraItems?.({ close })}
 			{#if accountUrl}
 				<MenuItem
@@ -61,7 +61,7 @@
 				label={themeMode.current === 'dark' ? 'Modo blanco' : 'Modo oscuro'}
 				onclick={() => themeMode.toggle()}
 			/>
-			<form method="POST" action="/logout" data-sveltekit-reload>
+			<form method="POST" action="/auth/logout" data-sveltekit-reload>
 				<MenuItem icon={LogOut} label="Cerrar sesión" type="submit" />
 			</form>
 		</GlassMenu>
diff --git a/web-player/src/lib/server/api.ts b/web-player/src/lib/server/api.ts
index aa709f0..8b79eda 100644
--- a/web-player/src/lib/server/api.ts
+++ b/web-player/src/lib/server/api.ts
@@ -19,7 +19,7 @@ export function createApiClient({ fetch, accessToken }: ApiClientOptions) {
 
 export function requireUser(locals: App.Locals, url: URL): SessionUser {
 	if (!locals.user)
-		redirect(302, `/login?returnTo=${encodeURIComponent(url.pathname + url.search)}`);
+		redirect(302, `/auth?returnTo=${encodeURIComponent(url.pathname + url.search)}`);
 	return locals.user;
 }
 
@@ -30,7 +30,7 @@ export function optionalUser(
 ): SessionUser | null {
 	if (locals.user) return locals.user;
 	if (!allowAnonymousListening)
-		redirect(302, `/login?returnTo=${encodeURIComponent(url.pathname + url.search)}`);
+		redirect(302, `/auth?returnTo=${encodeURIComponent(url.pathname + url.search)}`);
 	return null;
 }
 
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 860b4f4..4f1ec39 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -131,7 +131,7 @@
 		if (!topResult || topResult.kind === 'track') return undefined;
 		if (topResult.kind === 'album') return `/albums/${topResult.album.id}`;
 		if (topResult.kind === 'playlist') return `/playlists/${topResult.playlist.id}`;
-		return `/u/${topResult.user.id}`;
+		return `/user/${topResult.user.id}`;
 	});
 
 	function togglePlay(index: number) {
@@ -400,7 +400,7 @@
 					<ul class="flex flex-col gap-1">
 						{#each capped(sfilter, users) as u (u.id)}
 							<li>
-								<ListRow title={u.name} href="/u/{u.id}" size="lg">
+								<ListRow title={u.name} href="/user/{u.id}" size="lg">
 									{#snippet art()}
 										<Avatar name={u.name} src={u.profilePictureUrl} size="md" />
 									{/snippet}
diff --git a/web-player/src/routes/(app)/u/[id]/+page.server.ts b/web-player/src/routes/(app)/user/[id]/+page.server.ts
similarity index 100%
rename from web-player/src/routes/(app)/u/[id]/+page.server.ts
rename to web-player/src/routes/(app)/user/[id]/+page.server.ts
diff --git a/web-player/src/routes/(app)/u/[id]/+page.svelte b/web-player/src/routes/(app)/user/[id]/+page.svelte
similarity index 100%
rename from web-player/src/routes/(app)/u/[id]/+page.svelte
rename to web-player/src/routes/(app)/user/[id]/+page.svelte
diff --git a/web-player/src/routes/+layout.server.ts b/web-player/src/routes/+layout.server.ts
index d44cc77..6bda544 100644
--- a/web-player/src/routes/+layout.server.ts
+++ b/web-player/src/routes/+layout.server.ts
@@ -5,7 +5,7 @@ import { createApiClient } from '$lib/server/api';
 import { authConfig } from '$lib/server/config';
 import { LIKED_TRACKS_PAGE_SIZE } from '$lib/config';
 
-const PUBLIC_PATHS = new Set(['/login']);
+const PUBLIC_PATHS = new Set(['/auth']);
 const SIDEBAR_PLAYLISTS_LIMIT = 8;
 
 async function fetchSidebarPlaylists(
@@ -43,7 +43,7 @@ export const load: LayoutServerLoad = async ({ locals, url, fetch }) => {
 	const allowAnonymousListening = await getAllowAnonymousListening(fetch);
 
 	if (!locals.user && !allowAnonymousListening && !PUBLIC_PATHS.has(url.pathname)) {
-		redirect(302, `/login?returnTo=${encodeURIComponent(url.pathname + url.search)}`);
+		redirect(302, `/auth?returnTo=${encodeURIComponent(url.pathname + url.search)}`);
 	}
 
 	const accountUrl = authConfig.issuer
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index ff77a72..e51811c 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -29,7 +29,7 @@
 		if (data.likedTracks?.length) liked.hydrate(data.likedTracks);
 	});
 
-	const isAuthPage = $derived(page.url.pathname === '/login');
+	const isAuthPage = $derived(page.url.pathname === '/auth');
 	const hasTrack = $derived(player.currentId !== null);
 
 	const initialThemeCss = `:root{${tokensToCss(buildThemeTokens(ACCENT_HUE, 'dark'))}}:root[data-theme='light']{${tokensToCss(buildThemeTokens(ACCENT_HUE, 'light'))}}`;
diff --git a/web-player/src/routes/login/+page.server.ts b/web-player/src/routes/auth/+page.server.ts
similarity index 100%
rename from web-player/src/routes/login/+page.server.ts
rename to web-player/src/routes/auth/+page.server.ts
diff --git a/web-player/src/routes/login/+page.svelte b/web-player/src/routes/auth/+page.svelte
similarity index 100%
rename from web-player/src/routes/login/+page.svelte
rename to web-player/src/routes/auth/+page.svelte
diff --git a/web-player/src/routes/logout/+server.ts b/web-player/src/routes/auth/logout/+server.ts
similarity index 100%
rename from web-player/src/routes/logout/+server.ts
rename to web-player/src/routes/auth/logout/+server.ts
-- 
2.54.0


From 3bb4e66ad0422a99e8b77ed9de72b2afdb5a0feb Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:21:00 +0200
Subject: [PATCH 10/50] Reflect completed auth/user route consolidation in docs

---
 web-player/CLAUDE.md                     |  2 +-
 web-player/docs/folder-structure-plan.md | 22 ++++++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index bd69e59..1d3c95b 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -26,7 +26,7 @@ npm run lint:tokens # scripts/check-tokens.mjs — guardrail del sistema de dise
 - **Svelte 5 runes siempre:** `$props()` con `interface Props`, `$state`, `$derived`, `$effect`. Nada de `export let` ni `$:`. `{#each}` siempre con clave.
 - **Server-only bajo `$lib/server/`**; nunca importado desde cliente.
 - Datos SSR vía `load` en `+page.server.ts`/`+layout.server.ts` → prop `data`.
-- Enlaces a endpoints `+server.ts` (login/logout) llevan `data-sveltekit-reload`.
+- Enlaces a endpoints `+server.ts` (`/auth/login`, `/auth/logout`) llevan `data-sveltekit-reload`.
 - Reutiliza los tokens/recetas del sistema de diseño; extrae a `$lib/components/ui/` lo que se repita.
 
 ## Estilos
diff --git a/web-player/docs/folder-structure-plan.md b/web-player/docs/folder-structure-plan.md
index d34e867..6c1f98a 100644
--- a/web-player/docs/folder-structure-plan.md
+++ b/web-player/docs/folder-structure-plan.md
@@ -79,18 +79,20 @@ Crear `src/lib/components/layout/` y mover:
 
 **Cierre:** igual que F1.
 
-## F5 (opcional, requiere confirmación) — Consolidar rutas de auth
+## F5 — Consolidar rutas de auth y perfil de usuario
 
-Unificar `/login`, `/logout`, `/auth/login`, `/auth/callback` bajo `/auth/`:
+Unificar `/login`, `/logout`, `/auth/login`, `/auth/callback` bajo `/auth/`, y renombrar
+`/u/[id]` a `/user/[id]`:
 
-- `/auth` → page (login screen, hoy en `/login/+page.svelte`)
-- `/auth/login` → server endpoint (ya existe)
-- `/auth/logout` → server endpoint (hoy `/logout/+server.ts`)
-- `/auth/callback` → server endpoint (ya existe)
+- `/auth` → page (login screen, antes `/login/+page.svelte`)
+- `/auth/login` → server endpoint (ya existía)
+- `/auth/logout` → server endpoint (antes `/logout/+server.ts`)
+- `/auth/callback` → server endpoint (ya existía)
+- `/user/[id]` → page (antes `/u/[id]`)
 
-**Cambia URLs públicas.** Si `AUTH_REDIRECT_URI` / `AUTH_POST_LOGOUT_URI` en la config de
-Zitadel apuntan a las rutas actuales, hay que actualizarlas ahí también antes de mergear.
-No empezar esta fase sin confirmación explícita.
+**Cambia URLs públicas.** Se verificó `.env.example`: `AUTH_REDIRECT_URI` ya apunta a
+`/auth/callback` y `AUTH_POST_LOGOUT_URI` a `/`, ninguno de los dos cambia con esta fase,
+así que no hace falta tocar la config de Zitadel.
 
 ## F6 — Categorizar `components/ui/`
 
@@ -127,5 +129,5 @@ actualizados, `npm run check` y `npm run lint` limpios.
 - [x] F2 — helpers de dominio → `lib/data/`
 - [x] F3 — utilidades genéricas (`format.ts` → `lib/utils/`)
 - [x] F4 — componentes de layout/chrome → `components/layout/`
-- [ ] F5 — consolidar rutas de auth bajo `/auth/` (opcional, pendiente de confirmación)
+- [x] F5 — consolidar rutas de auth bajo `/auth/` y `/u/[id]` → `/user/[id]`
 - [x] F6 — categorizar `components/ui/` (primitives/overlay/media/forms/layout)
-- 
2.54.0


From 5f2b5bd5a237d94ecb1491bf20d99dfa1d81047e Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:24:07 +0200
Subject: [PATCH 11/50] Translate CLAUDE.md to English and document new folder
 structure

Fixes the stale /login reference (now /auth) and adds a Folder
structure section covering lib/state, lib/data, lib/utils,
components/layout and the ui/ category split from the recent
reorganization.
---
 web-player/CLAUDE.md | 79 +++++++++++++++++++++++++++-----------------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index 1d3c95b..831f86f 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -1,56 +1,73 @@
 # Musify — web-player
 
-Web pública de Musify (carpeta `web-player/`). Para diseño y recetas de UI usa el skill **`musify-web`**.
+Musify's public web app (`web-player/` folder). For design and UI recipes, use the **`musify-web`** skill.
 
 ## Stack
 
-SvelteKit 2 (`adapter-node`) · Svelte 5 **runes** · Tailwind 4 · TypeScript strict · auth OIDC Zitadel (`openid-client` + `jose`).
+SvelteKit 2 (`adapter-node`) · Svelte 5 **runes** · Tailwind 4 · TypeScript strict · Zitadel OIDC auth (`openid-client` + `jose`).
 
-No hay `svelte.config.js` (config inline en `vite.config.ts`) ni `tailwind.config.js` (config en `src/routes/layout.css`).
+There is no `svelte.config.js` (config is inline in `vite.config.ts`) nor `tailwind.config.js` (config lives in `src/routes/layout.css`).
 
-## Comandos
+## Commands
 
 ```sh
-npm run dev         # servidor de desarrollo (puerto 5173)
+npm run dev         # dev server (port 5173)
 npm run build
-npm run check       # svelte-check — debe salir 0 errores antes de cerrar un cambio
-npm run format      # prettier --write .
-npm run lint        # prettier --check . && eslint . && npm run lint:tokens
-npm run lint:tokens # scripts/check-tokens.mjs — guardrail del sistema de diseño (ver abajo)
+npm run check        # svelte-check — must exit 0 errors before closing a change
+npm run format        # prettier --write .
+npm run lint          # prettier --check . && eslint . && npm run lint:tokens
+npm run lint:tokens   # scripts/check-tokens.mjs — design-system guardrail (see below)
 ```
 
-## Reglas
+## Rules
 
-- **Sin comentarios** en el código salvo que sean imprescindibles.
-- `npm run lint` y `npm run check` deben salir limpios antes de cerrar un cambio.
-- **Svelte 5 runes siempre:** `$props()` con `interface Props`, `$state`, `$derived`, `$effect`. Nada de `export let` ni `$:`. `{#each}` siempre con clave.
-- **Server-only bajo `$lib/server/`**; nunca importado desde cliente.
-- Datos SSR vía `load` en `+page.server.ts`/`+layout.server.ts` → prop `data`.
-- Enlaces a endpoints `+server.ts` (`/auth/login`, `/auth/logout`) llevan `data-sveltekit-reload`.
-- Reutiliza los tokens/recetas del sistema de diseño; extrae a `$lib/components/ui/` lo que se repita.
+- **No comments** in code unless essential.
+- `npm run lint` and `npm run check` must exit clean before closing a change.
+- **Always Svelte 5 runes:** `$props()` with `interface Props`, `$state`, `$derived`, `$effect`. No `export let` or `$:`. `{#each}` always keyed.
+- **Server-only code under `$lib/server/`**; never imported from client code.
+- SSR data via `load` in `+page.server.ts`/`+layout.server.ts` → `data` prop.
+- Links to `+server.ts` endpoints (`/auth/login`, `/auth/logout`) carry `data-sveltekit-reload`.
+- Reuse design-system tokens/recipes; extract to `$lib/components/ui/` whatever repeats.
 
-## Estilos
+## Folder structure
 
-El sistema de diseño vive en `src/routes/layout.css` (tokens `@theme` + recetas `@utility`) y `src/lib/theme/` (`theme.css` para neutros estáticos, `tokens.ts` para los tokens dinámicos por hue de usuario). `scripts/check-tokens.mjs` (`npm run lint:tokens`, parte de `lint`) falla si `src/**/*.svelte` reintroduce lo que el refactor de `docs/frontend-refactor-plan.md` (P0–P14) eliminó — léelo antes de añadir un valor arbitrario o un radio/tamaño "de fábrica".
+Full rationale and history in `docs/folder-structure-plan.md`.
 
-- **Radios:** siempre `rounded-tag/thumb/control/art/art-lg/panel/panel-lg` (o `rounded-full` para píldoras/círculos). Nunca `rounded-sm/md/lg/xl/2xl/3xl` ni `rounded` a secas.
-- **Tamaños cuadrados:** `size-*` en vez de `h-N w-N` repetido (icon: `size-icon-xs/sm/md/lg/xl`; portadas: `size-cover-xs…hero`).
-- **Tipografía:** recetas `text-display-1/2/3/4`, `text-eyebrow`, `text-body`, `text-count`; tracking con `tracking-display`/`tracking-eyebrow`, no `tracking-[…]` suelto.
-- **Espaciado:** escala de Tailwind en pasos de `.5` (evita cuartos como `.25`/`.75`; solo aceptables si el token semántico lo pide, p. ej. `mb-4.5` en `SectionHeading`).
-- **Colores:** siempre `--mf-*`/`text-*`/`bg-*`/`border-*` de `theme.css`/`tokens.ts`. Nunca hex ni `rgba()` literales en un `.svelte` (esos literales solo existen como fuente de verdad dentro de `theme.css`/`tokens.ts`).
-- **`style="…"` y arbitrarios `-[…]`:** solo la lista blanca de B.4 en `docs/frontend-refactor-plan.md` (stagger `--i`, hue de tile, posición de menú, anchos/alturas dinámicos vía `var(--mf-*)`, `text-[clamp(…)]`, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, paddings en `vh` para centrado vertical). Todo lo demás, a un token.
-- Componentes base a reutilizar antes de crear uno nuevo: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
-- Gaps conocidos y aceptados (documentados en `scripts/check-tokens.mjs`): `strokeWidth={n}` en iconos no está unificado (13 valores distintos repartidos por casi todos los componentes; migrarlo a las recetas `stroke-thin/regular/bold` de forma segura requeriría poder verificar visualmente que `lucide-svelte` respeta `stroke-width` por CSS, así que se dejó fuera de esta pasada).
+- `src/lib/state/` — reactive rune-based state (`*.svelte.ts` with no other home; player state stays in `$lib/player/`, theme mode in `$lib/theme/`).
+- `src/lib/data/` — client-side domain/data helpers (albums, collections, genres, mixes, recentlyPlayed, search).
+- `src/lib/utils/` — generic, domain-agnostic utilities (e.g. `format.ts`).
+- `src/lib/components/layout/` — app chrome (Sidebar, TopBar, TabsBar, MobileHeader).
+- `src/lib/components/player/` — player UI (PlayerBar, PlayerDock, Queue, TrackInfo, TransportControls).
+- `src/lib/components/ui/` — design-system components, split by category:
+  - `primitives/` — generic controls with no music-domain knowledge (Button, Input, Chip, Slider, …).
+  - `overlay/` — anything that floats above content (Modal, ContextMenu, AccountMenu, …).
+  - `media/` — music-domain display components (Artwork, TrackList, MediaCard, PlayButton, …).
+  - `forms/` — composite entity forms (AlbumForm, PlaylistForm, CoverForm, ImageDropzone).
+  - `layout/` — page-level scaffolding (Page, PageHeader, SectionHeading) — distinct from `components/layout/`, which is the global app chrome.
+- Auth routes live under `src/routes/auth/` (`+page.svelte` = login screen, `login/`, `logout/`, `callback/` = OIDC endpoints). Public user profile is `src/routes/(app)/user/[id]/`.
+
+## Styles
+
+The design system lives in `src/routes/layout.css` (`@theme` tokens + `@utility` recipes) and `src/lib/theme/` (`theme.css` for static neutrals, `tokens.ts` for user-hue-dependent dynamic tokens). `scripts/check-tokens.mjs` (`npm run lint:tokens`, part of `lint`) fails if `src/**/*.svelte` reintroduces what the `docs/frontend-refactor-plan.md` (P0–P14) refactor removed — read it before adding an arbitrary value or a "stock" radius/size.
+
+- **Radii:** always `rounded-tag/thumb/control/art/art-lg/panel/panel-lg` (or `rounded-full` for pills/circles). Never `rounded-sm/md/lg/xl/2xl/3xl` or bare `rounded`.
+- **Square sizes:** `size-*` instead of repeated `h-N w-N` (icons: `size-icon-xs/sm/md/lg/xl`; covers: `size-cover-xs…hero`).
+- **Typography:** recipes `text-display-1/2/3/4`, `text-eyebrow`, `text-body`, `text-count`; tracking via `tracking-display`/`tracking-eyebrow`, not a loose `tracking-[…]`.
+- **Spacing:** Tailwind scale in `.5` steps (avoid quarters like `.25`/`.75`; only acceptable if the semantic token calls for it, e.g. `mb-4.5` in `SectionHeading`).
+- **Colors:** always `--mf-*`/`text-*`/`bg-*`/`border-*` from `theme.css`/`tokens.ts`. Never literal hex or `rgba()` in a `.svelte` file (those literals only exist as the source of truth inside `theme.css`/`tokens.ts`).
+- **`style="…"` and arbitrary `-[…]` values:** only the whitelist in section B.4 of `docs/frontend-refactor-plan.md` (stagger `--i`, tile hue, menu position, dynamic widths/heights via `var(--mf-*)`, `text-[clamp(…)]`, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, `vh` paddings for vertical centering). Everything else goes to a token.
+- Base components to reuse before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
+- Known, accepted gaps (documented in `scripts/check-tokens.mjs`): `strokeWidth={n}` on icons isn't unified (13 distinct values spread across almost every component; safely migrating it to `stroke-thin/regular/bold` recipes would require visually verifying that `lucide-svelte` respects `stroke-width` via CSS, so it was left out of that pass).
 
 ## Auth
 
-`hooks.server.ts` valida la cookie de sesión cifrada (`mf_session`), refresca el `access_token` y puebla `locals.user` / `locals.accessToken`. Para proteger una ruta, comprueba `locals.user` en su `load` y redirige a `/login?returnTo=…`. Para el backend, envía `locals.accessToken` como Bearer hacia `API_BASE_URL`.
+`hooks.server.ts` validates the encrypted session cookie (`mf_session`), refreshes the `access_token`, and populates `locals.user` / `locals.accessToken`. To protect a route, check `locals.user` in its `load` and redirect to `/auth?returnTo=…`. For the backend, send `locals.accessToken` as a Bearer token to `API_BASE_URL`.
 
-Variables de entorno en `.env` (ver `.env.example`): `ZITADEL_*`, `AUTH_REDIRECT_URI`, `AUTH_POST_LOGOUT_URI`, `SESSION_SECRET`, `API_BASE_URL`.
+Environment variables in `.env` (see `.env.example`): `ZITADEL_*`, `AUTH_REDIRECT_URI`, `AUTH_POST_LOGOUT_URI`, `SESSION_SECRET`, `API_BASE_URL`.
 
 ## Backend API
 
-Cliente tipado con `openapi-fetch` sobre el OpenAPI de `Musify.Api`. En un `load`/action server:
+Typed client via `openapi-fetch` over `Musify.Api`'s OpenAPI spec. In a server `load`/action:
 
 ```ts
 import { createApiClient } from '$lib/server/api';
@@ -58,4 +75,4 @@ const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefine
 const { data, error: err } = await api.GET('/tracks');
 ```
 
-Devuelve `{ data, error }` (estilo ErrorOr), no lanza. Los tipos viven en `src/lib/api/schema.d.ts` y se regeneran con `npm run gen:api` (requiere la API dev levantada en `API_BASE_URL`, que expone `/openapi/v1.json` solo en Development).
+Returns `{ data, error }` (ErrorOr-style), never throws. Types live in `src/lib/api/schema.d.ts` and are regenerated with `npm run gen:api` (requires the dev API running at `API_BASE_URL`, which exposes `/openapi/v1.json` only in Development).
-- 
2.54.0


From a3ec9d19d3b6eec032ff832f478f8d24edf863d2 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:29:50 +0200
Subject: [PATCH 12/50] Translate paginas.md to English, clean up CLAUDE.md
 tone, drop finished plan

Rewrites CLAUDE.md without em dashes and with plainer phrasing, and
translates docs/paginas.md to English the same way. The folder
structure plan is done, so it gets removed instead of kept around as
a stale reference.
---
 web-player/CLAUDE.md                     |  74 +++++----
 web-player/docs/folder-structure-plan.md | 133 ----------------
 web-player/docs/paginas.md               | 188 ++++++++++-------------
 3 files changed, 114 insertions(+), 281 deletions(-)
 delete mode 100644 web-player/docs/folder-structure-plan.md

diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index 831f86f..114b991 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -1,22 +1,22 @@
-# Musify — web-player
+# Musify: web-player
 
 Musify's public web app (`web-player/` folder). For design and UI recipes, use the **`musify-web`** skill.
 
 ## Stack
 
-SvelteKit 2 (`adapter-node`) · Svelte 5 **runes** · Tailwind 4 · TypeScript strict · Zitadel OIDC auth (`openid-client` + `jose`).
+SvelteKit 2 (`adapter-node`), Svelte 5 **runes**, Tailwind 4, TypeScript strict, Zitadel OIDC auth (`openid-client` + `jose`).
 
-There is no `svelte.config.js` (config is inline in `vite.config.ts`) nor `tailwind.config.js` (config lives in `src/routes/layout.css`).
+There's no `svelte.config.js` (config is inline in `vite.config.ts`) and no `tailwind.config.js` (config lives in `src/routes/layout.css`).
 
 ## Commands
 
 ```sh
-npm run dev         # dev server (port 5173)
+npm run dev          # dev server (port 5173)
 npm run build
-npm run check        # svelte-check — must exit 0 errors before closing a change
-npm run format        # prettier --write .
-npm run lint          # prettier --check . && eslint . && npm run lint:tokens
-npm run lint:tokens   # scripts/check-tokens.mjs — design-system guardrail (see below)
+npm run check         # svelte-check, must exit 0 errors before closing a change
+npm run format         # prettier --write .
+npm run lint            # prettier --check . && eslint . && npm run lint:tokens
+npm run lint:tokens      # scripts/check-tokens.mjs, the design system guardrail (see below)
 ```
 
 ## Rules
@@ -24,50 +24,48 @@ npm run lint:tokens   # scripts/check-tokens.mjs — design-system guardrail (se
 - **No comments** in code unless essential.
 - `npm run lint` and `npm run check` must exit clean before closing a change.
 - **Always Svelte 5 runes:** `$props()` with `interface Props`, `$state`, `$derived`, `$effect`. No `export let` or `$:`. `{#each}` always keyed.
-- **Server-only code under `$lib/server/`**; never imported from client code.
-- SSR data via `load` in `+page.server.ts`/`+layout.server.ts` → `data` prop.
+- **Server only code goes under `$lib/server/`**, and it's never imported from client code.
+- SSR data comes through `load` in `+page.server.ts`/`+layout.server.ts` and lands in the `data` prop.
 - Links to `+server.ts` endpoints (`/auth/login`, `/auth/logout`) carry `data-sveltekit-reload`.
-- Reuse design-system tokens/recipes; extract to `$lib/components/ui/` whatever repeats.
+- Reuse design system tokens and recipes before writing new CSS. If something repeats, extract it to `$lib/components/ui/`.
 
 ## Folder structure
 
-Full rationale and history in `docs/folder-structure-plan.md`.
-
-- `src/lib/state/` — reactive rune-based state (`*.svelte.ts` with no other home; player state stays in `$lib/player/`, theme mode in `$lib/theme/`).
-- `src/lib/data/` — client-side domain/data helpers (albums, collections, genres, mixes, recentlyPlayed, search).
-- `src/lib/utils/` — generic, domain-agnostic utilities (e.g. `format.ts`).
-- `src/lib/components/layout/` — app chrome (Sidebar, TopBar, TabsBar, MobileHeader).
-- `src/lib/components/player/` — player UI (PlayerBar, PlayerDock, Queue, TrackInfo, TransportControls).
-- `src/lib/components/ui/` — design-system components, split by category:
-  - `primitives/` — generic controls with no music-domain knowledge (Button, Input, Chip, Slider, …).
-  - `overlay/` — anything that floats above content (Modal, ContextMenu, AccountMenu, …).
-  - `media/` — music-domain display components (Artwork, TrackList, MediaCard, PlayButton, …).
-  - `forms/` — composite entity forms (AlbumForm, PlaylistForm, CoverForm, ImageDropzone).
-  - `layout/` — page-level scaffolding (Page, PageHeader, SectionHeading) — distinct from `components/layout/`, which is the global app chrome.
-- Auth routes live under `src/routes/auth/` (`+page.svelte` = login screen, `login/`, `logout/`, `callback/` = OIDC endpoints). Public user profile is `src/routes/(app)/user/[id]/`.
+- `src/lib/state/` holds reactive rune based state (`*.svelte.ts` files that don't have a more specific home). Player state stays in `$lib/player/`, theme mode in `$lib/theme/`.
+- `src/lib/data/` holds client side domain helpers: albums, collections, genres, mixes, recentlyPlayed, search.
+- `src/lib/utils/` holds generic utilities with no domain knowledge, like `format.ts`.
+- `src/lib/components/layout/` holds the app chrome: Sidebar, TopBar, TabsBar, MobileHeader.
+- `src/lib/components/player/` holds the player UI: PlayerBar, PlayerDock, Queue, TrackInfo, TransportControls.
+- `src/lib/components/ui/` holds the design system components, split into five categories:
+  - `primitives/` for generic controls with no music domain knowledge (Button, Input, Chip, Slider, and so on).
+  - `overlay/` for anything that floats above the content (Modal, ContextMenu, AccountMenu, and so on).
+  - `media/` for music domain display components (Artwork, TrackList, MediaCard, PlayButton, and so on).
+  - `forms/` for composite entity forms (AlbumForm, PlaylistForm, CoverForm, ImageDropzone).
+  - `layout/` for page level scaffolding (Page, PageHeader, SectionHeading). This is different from `components/layout/` above, which is the global app chrome.
+- Auth routes live under `src/routes/auth/`: `+page.svelte` is the login screen, and `login/`, `logout/`, `callback/` are the OIDC endpoints. The public user profile route is `src/routes/(app)/user/[id]/`.
 
 ## Styles
 
-The design system lives in `src/routes/layout.css` (`@theme` tokens + `@utility` recipes) and `src/lib/theme/` (`theme.css` for static neutrals, `tokens.ts` for user-hue-dependent dynamic tokens). `scripts/check-tokens.mjs` (`npm run lint:tokens`, part of `lint`) fails if `src/**/*.svelte` reintroduces what the `docs/frontend-refactor-plan.md` (P0–P14) refactor removed — read it before adding an arbitrary value or a "stock" radius/size.
+The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utility` recipes) and in `src/lib/theme/` (`theme.css` for the static neutrals, `tokens.ts` for the dynamic tokens that depend on the user's hue). `scripts/check-tokens.mjs` (run as `npm run lint:tokens`, part of `lint`) fails if `src/**/*.svelte` brings back what the refactor in `docs/frontend-refactor-plan.md` (parts P0 through P14) removed, so read that doc before adding an arbitrary value or a stock radius or size.
 
-- **Radii:** always `rounded-tag/thumb/control/art/art-lg/panel/panel-lg` (or `rounded-full` for pills/circles). Never `rounded-sm/md/lg/xl/2xl/3xl` or bare `rounded`.
-- **Square sizes:** `size-*` instead of repeated `h-N w-N` (icons: `size-icon-xs/sm/md/lg/xl`; covers: `size-cover-xs…hero`).
-- **Typography:** recipes `text-display-1/2/3/4`, `text-eyebrow`, `text-body`, `text-count`; tracking via `tracking-display`/`tracking-eyebrow`, not a loose `tracking-[…]`.
-- **Spacing:** Tailwind scale in `.5` steps (avoid quarters like `.25`/`.75`; only acceptable if the semantic token calls for it, e.g. `mb-4.5` in `SectionHeading`).
-- **Colors:** always `--mf-*`/`text-*`/`bg-*`/`border-*` from `theme.css`/`tokens.ts`. Never literal hex or `rgba()` in a `.svelte` file (those literals only exist as the source of truth inside `theme.css`/`tokens.ts`).
-- **`style="…"` and arbitrary `-[…]` values:** only the whitelist in section B.4 of `docs/frontend-refactor-plan.md` (stagger `--i`, tile hue, menu position, dynamic widths/heights via `var(--mf-*)`, `text-[clamp(…)]`, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, `vh` paddings for vertical centering). Everything else goes to a token.
-- Base components to reuse before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
-- Known, accepted gaps (documented in `scripts/check-tokens.mjs`): `strokeWidth={n}` on icons isn't unified (13 distinct values spread across almost every component; safely migrating it to `stroke-thin/regular/bold` recipes would require visually verifying that `lucide-svelte` respects `stroke-width` via CSS, so it was left out of that pass).
+- **Radii:** always `rounded-tag/thumb/control/art/art-lg/panel/panel-lg` (or `rounded-full` for pills and circles). Never `rounded-sm/md/lg/xl/2xl/3xl` or a bare `rounded`.
+- **Square sizes:** use `size-*` instead of repeating `h-N w-N` (icons: `size-icon-xs/sm/md/lg/xl`; covers: `size-cover-xs` through `size-cover-hero`).
+- **Typography:** use the recipes `text-display-1/2/3/4`, `text-eyebrow`, `text-body`, `text-count`, with tracking through `tracking-display`/`tracking-eyebrow` rather than a loose `tracking-[…]`.
+- **Spacing:** stick to the Tailwind scale in `.5` steps and avoid quarters like `.25`/`.75`, unless the semantic token calls for it (for example `mb-4.5` in `SectionHeading`).
+- **Colors:** always use `--mf-*`/`text-*`/`bg-*`/`border-*` from `theme.css`/`tokens.ts`. Never a literal hex or `rgba()` inside a `.svelte` file; those literals only belong in `theme.css`/`tokens.ts` as the source of truth.
+- **Inline `style="…"` and arbitrary `-[…]` values:** only the ones whitelisted in section B.4 of `docs/frontend-refactor-plan.md` (the stagger variable `--i`, tile hue, menu position, dynamic widths and heights through `var(--mf-*)`, `text-[clamp(…)]`, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, and `vh` paddings for vertical centering). Everything else should become a token.
+- Reach for these base components before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
+- Known and accepted gap (documented in `scripts/check-tokens.mjs`): icon `strokeWidth={n}` isn't unified yet. There are 13 different values spread across almost every component, and migrating them to `stroke-thin/regular/bold` recipes safely would require visually confirming that `lucide-svelte` actually respects `stroke-width` through CSS, so that was left out of the last pass.
 
 ## Auth
 
-`hooks.server.ts` validates the encrypted session cookie (`mf_session`), refreshes the `access_token`, and populates `locals.user` / `locals.accessToken`. To protect a route, check `locals.user` in its `load` and redirect to `/auth?returnTo=…`. For the backend, send `locals.accessToken` as a Bearer token to `API_BASE_URL`.
+`hooks.server.ts` validates the encrypted session cookie (`mf_session`), refreshes the `access_token`, and fills `locals.user` and `locals.accessToken`. To protect a route, check `locals.user` in its `load` and redirect to `/auth?returnTo=…`. When talking to the backend, send `locals.accessToken` as a Bearer token to `API_BASE_URL`.
 
-Environment variables in `.env` (see `.env.example`): `ZITADEL_*`, `AUTH_REDIRECT_URI`, `AUTH_POST_LOGOUT_URI`, `SESSION_SECRET`, `API_BASE_URL`.
+Environment variables live in `.env` (see `.env.example`): `ZITADEL_*`, `AUTH_REDIRECT_URI`, `AUTH_POST_LOGOUT_URI`, `SESSION_SECRET`, `API_BASE_URL`.
 
 ## Backend API
 
-Typed client via `openapi-fetch` over `Musify.Api`'s OpenAPI spec. In a server `load`/action:
+Typed client via `openapi-fetch` over the `Musify.Api` OpenAPI spec. Inside a server `load` or action:
 
 ```ts
 import { createApiClient } from '$lib/server/api';
@@ -75,4 +73,4 @@ const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefine
 const { data, error: err } = await api.GET('/tracks');
 ```
 
-Returns `{ data, error }` (ErrorOr-style), never throws. Types live in `src/lib/api/schema.d.ts` and are regenerated with `npm run gen:api` (requires the dev API running at `API_BASE_URL`, which exposes `/openapi/v1.json` only in Development).
+It returns `{ data, error }` (ErrorOr style) and never throws. The types live in `src/lib/api/schema.d.ts` and get regenerated with `npm run gen:api` (this needs the dev API running at `API_BASE_URL`, which only exposes `/openapi/v1.json` in Development).
diff --git a/web-player/docs/folder-structure-plan.md b/web-player/docs/folder-structure-plan.md
deleted file mode 100644
index 6c1f98a..0000000
--- a/web-player/docs/folder-structure-plan.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# Plan — Organización de carpetas (web-player)
-
-> Plan de trabajo para agentes/IA. Cubre la **estructura de directorios**, no el sistema de
-> diseño (para tokens/componentización visual ver `docs/frontend-refactor-plan.md`, P0–P14,
-> que sigue siendo la referencia para radios/tamaños/tipografía/colores).
-> Basado en una lectura completa de `web-player/src` (2026-09-22, rama `web-player-ref`).
-
-## Cómo usar este documento
-
-1. Cada fase (F1…F7) es independiente y es **un commit**. No mezcles fases.
-2. Al mover archivos: actualizar todos los imports que los referencian (`grep` del nombre
-   viejo de ruta antes de dar la fase por cerrada).
-3. Cierre de cada fase: `npm run check` y `npm run lint` **limpios** (desde `web-player/`).
-4. Al terminar una fase, marca su casilla en la sección Registro.
-
-Orden recomendado: `F1 → F2 → F3 → F4 → F6` (independientes entre sí, pueden ir en
-cualquier orden). `F5` es opcional y requiere confirmación explícita del usuario antes de
-empezarla (cambia URLs públicas / config de Zitadel).
-
----
-
-## Diagnóstico
-
-- `src/lib/` raíz tiene 12 archivos sueltos mezclando estado reactivo (runes), helpers de
-  dominio y utilidades genéricas.
-- `src/lib/components/` raíz tiene 4 componentes de layout/chrome sueltos (ni `ui/` ni
-  `player/`).
-- `src/lib/components/ui/` tiene 38 componentes en un único nivel, sin categorizar.
-- `src/routes/` reparte auth en cuatro sitios distintos (`/login`, `/logout`, `/auth/login`,
-  `/auth/callback`).
-
----
-
-## F1 — Agrupar estado reactivo
-
-Crear `src/lib/state/` y mover:
-
-- `menus.svelte.ts`
-- `navigation.svelte.ts`
-- `playlists.svelte.ts`
-- `toggle.svelte.ts`
-
-`lib/player/*.svelte.ts` y `lib/theme/mode.svelte.ts` se quedan donde están (ya tienen
-dominio propio, no son huérfanos).
-
-**Cierre:** imports actualizados, `npm run check` y `npm run lint` limpios.
-
-## F2 — Agrupar helpers de dominio
-
-Crear `src/lib/data/` y mover:
-
-- `albums.ts`
-- `collections.ts`
-- `genres.ts`
-- `mixes.ts`
-- `recentlyPlayed.ts`
-- `search.ts`
-
-**Cierre:** igual que F1.
-
-## F3 — Utilidades genéricas
-
-- `format.ts` → `src/lib/utils/format.ts`.
-- `types.ts` se queda en la raíz de `lib/` (si crece mucho, pasar a `src/lib/types/index.ts`
-  en una fase futura — no crear la carpeta por adelantado).
-- `config.ts` se queda en la raíz de `lib/` (config global, un único archivo, no amerita
-  carpeta).
-
-**Cierre:** igual que F1.
-
-## F4 — Componentes de layout/chrome
-
-Crear `src/lib/components/layout/` y mover:
-
-- `MobileHeader.svelte`
-- `Sidebar.svelte`
-- `TabsBar.svelte`
-- `TopBar.svelte`
-
-**Cierre:** igual que F1.
-
-## F5 — Consolidar rutas de auth y perfil de usuario
-
-Unificar `/login`, `/logout`, `/auth/login`, `/auth/callback` bajo `/auth/`, y renombrar
-`/u/[id]` a `/user/[id]`:
-
-- `/auth` → page (login screen, antes `/login/+page.svelte`)
-- `/auth/login` → server endpoint (ya existía)
-- `/auth/logout` → server endpoint (antes `/logout/+server.ts`)
-- `/auth/callback` → server endpoint (ya existía)
-- `/user/[id]` → page (antes `/u/[id]`)
-
-**Cambia URLs públicas.** Se verificó `.env.example`: `AUTH_REDIRECT_URI` ya apunta a
-`/auth/callback` y `AUTH_POST_LOGOUT_URI` a `/`, ninguno de los dos cambia con esta fase,
-así que no hace falta tocar la config de Zitadel.
-
-## F6 — Categorizar `components/ui/`
-
-38 componentes en un único nivel dificultan el escaneo visual y el autocompletado del
-editor. Agrupar por categoría funcional (no por jerarquía atómica estricta — sería excesivo
-para este tamaño):
-
-| Carpeta        | Componentes                                                                                                          | Criterio                                              |
-| -------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
-| `primitives/`  | Alert, BackLink, Button, Checkbox, Chip, EmptyState, Field, IconButton, InfiniteScroll, Input, Logo, SegmentedControl, Slider, Surface, Textarea | Piezas genéricas, sin conocimiento del dominio música |
-| `overlay/`     | AccountMenu, ConfirmDialog, ContextMenu, GlassMenu, MenuItem, Modal                                                    | Todo lo que flota encima del contenido                |
-| `media/`       | ArtistLink, Artwork, Avatar, EqBars, ExplicitBadge, ListRow, MediaCard, MediaIdentity, PlayButton, TrackList           | Específicos del dominio música/track                  |
-| `forms/`       | AlbumForm, CoverForm, ImageDropzone, PlaylistForm                                                                      | Formularios compuestos de entidad                     |
-| `layout/`      | Page, PageHeader, SectionHeading                                                                                       | Andamiaje de página (distinto de `components/layout/` de F4, que es el chrome global) |
-
-Sin barrels/`index.ts` — actualizar cada ruta de import directamente, no hace falta esa
-indirección para esto.
-
-Idealmente un sub-commit por categoría, pero en la práctica hay imports relativos
-(`./X.svelte`) que cruzan categorías (p. ej. `AlbumForm` → `CoverForm`+`Field`+`Input`, que
-caen en `forms/`+`primitives/`), así que mover una categoría a la vez deja `npm run check`
-roto a mitad de camino. Se hizo en **un único commit** que mueve las 38 a la vez y reescribe
-todos los imports (internos y externos) — sigue siendo revisable porque son solo
-renames + cambios de ruta de import, sin lógica nueva.
-
-**Cierre:** las 5 subcarpetas creadas, `ui/` raíz sin `.svelte` sueltos, imports
-actualizados, `npm run check` y `npm run lint` limpios.
-
----
-
-## Registro
-
-- [x] F1 — estado reactivo → `lib/state/`
-- [x] F2 — helpers de dominio → `lib/data/`
-- [x] F3 — utilidades genéricas (`format.ts` → `lib/utils/`)
-- [x] F4 — componentes de layout/chrome → `components/layout/`
-- [x] F5 — consolidar rutas de auth bajo `/auth/` y `/u/[id]` → `/user/[id]`
-- [x] F6 — categorizar `components/ui/` (primitives/overlay/media/forms/layout)
diff --git a/web-player/docs/paginas.md b/web-player/docs/paginas.md
index c2b6688..0c402a5 100644
--- a/web-player/docs/paginas.md
+++ b/web-player/docs/paginas.md
@@ -1,160 +1,128 @@
-# Musify — Guía de páginas
+# Musify, page guide
 
-Documento vivo de qué debe contener cada página del frontend web. Sirve como mapa
-para priorizar features. El sistema de diseño (tokens, recetas, componentes) vive en
-el skill `musify-web`; aquí describimos **contenido y estructura**, no estilos.
+Living document describing what each page of the web frontend should contain. It works as a map for prioritizing features. The design system (tokens, recipes, components) lives in the `musify-web` skill; here we describe **content and structure**, not styling.
 
-Leyenda de estado: ✅ hecho · 🟡 parcial / maqueta · ⬜ pendiente.
+Status legend: ✅ done · 🟡 partial / mockup · ⬜ pending.
 
-> **Nota (rediseño app):** se está portando el prototipo `Musify.dc.html` (app: sidebar +
-> vistas + player persistente con acento dinámico por pista). La landing de marketing se
-> eliminó. Las secciones de abajo describen el diseño anterior y quedan pendientes de
-> actualizar a las vistas de la app (Inicio, Buscar, Biblioteca, Subir, Importar, Descargas,
-> Playlists). El **player** ya está hecho por componentes en `$lib/components/player/` con el
-> tema en `$lib/theme/` (`theme.css` paleta + `color.ts` acento/gradiente).
+> **Note (app redesign):** the `Musify.dc.html` prototype is being ported over (an app with a sidebar, views, and a persistent player with a dynamic accent per track). The marketing landing page was removed. The sections below still describe the older design and are pending an update to match the app views (Home, Search, Library, Upload, Import, Downloads, Playlists). The **player** is already built as components in `$lib/components/player/`, with its theme in `$lib/theme/` (`theme.css` for the palette, `color.ts` for the accent and gradient).
 
-## Inicio (app) `/` 🟡
+## Home (app) `/` 🟡
 
-- **Hero**: saludo + "Tu música. Sin límites." con color-wash del hue de la pista actual.
-- **Acceso rápido = escuchado recientemente** (`player.recentlyPlayed`, hoy en cliente).
-  Estado vacío con icono + CTA «Explorar».
-- **Tus playlists**: tarjetas mosaico de las playlists (hoy datos de muestra). Estado vacío.
+- **Hero**: a greeting plus "Your music. No limits." with a color wash taken from the current track's hue.
+- **Quick access, meaning recently played** (`player.recentlyPlayed`, client side for now). Empty state with an icon and an "Explore" CTA.
+- **Your playlists**: mosaic cards for the user's playlists (sample data for now). Has an empty state.
 
-### Backend pendiente (ASP.NET) para Inicio
+### Pending backend work (ASP.NET) for Home
 
-- **Escuchado recientemente**: registrar reproducciones por usuario (tabla de historial:
-  `userId`, `trackId`, `playedAt`) y exponer `GET /me/recently-played?limit=` (o
-  `/users/{id}/recently-played`) devolviendo pistas ordenadas por `playedAt` desc, sin
-  duplicados. El front lo cargaría en un `load` y lo pasaría al store en vez de `recentlyPlayed`.
-- **Playlists por última escucha**: añadir `lastPlayedAt` a la playlist (hoy el schema solo
-  tiene `createdAt`/`updatedAt`) y permitir ordenar `GET /playlists/users/{userId}` por ese
-  campo (p. ej. `?sort=lastPlayed`), para mostrar «tus últimas escuchadas».
-- Las pistas necesitarán **artista** y un **color/hue** (o portada real de la que extraerlo)
-  para el arte y el acento dinámico; hoy `TrackApplicationResponse` no trae artista ni color.
+- **Recently played**: track plays per user (a history table with `userId`, `trackId`, `playedAt`) and expose `GET /me/recently-played?limit=` (or `/users/{id}/recently-played`), returning tracks ordered by `playedAt` descending, with no duplicates. The frontend would load this in a `load` function and pass it to the store instead of using `recentlyPlayed`.
+- **Playlists by last listen**: add `lastPlayedAt` to the playlist (the schema currently only has `createdAt`/`updatedAt`) and allow sorting `GET /playlists/users/{userId}` by that field (for example `?sort=lastPlayed`), to show "your most recently played" playlists.
+- Tracks will need an **artist** and a **color/hue** (or a real cover to extract one from) for the artwork and the dynamic accent. Right now `TrackApplicationResponse` carries neither artist nor color.
 
-## Estructura de rutas
+## Route structure
 
-Rutas agrupadas para separar lo público de lo autenticado (los grupos no cambian la URL):
+Routes are grouped to separate the public experience from the authenticated one (the groups don't change the URL):
 
 ```
 src/routes/
-  (marketing)/        Público, sin sesión obligatoria
+  (marketing)/        Public, no session required
     +page.svelte        /            Landing            ✅
-  (app)/              Experiencia de la app
-    explore/            /explore     Explorar / buscar  ✅
-    upload/             /upload      Subir música       🟡 maqueta
-    library/            /library     Tu biblioteca      ⬜
-    playlists/          /playlists   Tus playlists      ⬜
-      [id]/             /playlists/:id  Detalle playlist ⬜
-  auth  auth/login  auth/logout  auth/callback  Auth (página + endpoints)   ✅
-  api/tracks/[id]/stream             Proxy de stream    ✅
+  (app)/              The app experience
+    explore/            /explore     Explore / search    ✅
+    upload/             /upload      Upload music         🟡 mockup
+    library/             /library     Your library          ⬜
+    playlists/            /playlists   Your playlists         ⬜
+      [id]/                /playlists/:id  Playlist detail    ⬜
+  auth  auth/login  auth/logout  auth/callback  Auth (page + endpoints)   ✅
+  api/tracks/[id]/stream             Stream proxy         ✅
 ```
 
-Componentes globales (en todas las páginas): **Navbar**, **Footer** y **PlayerBar**
-(barra de reproducción fija, aparece al reproducir).
+Global components (present on every page): **Navbar**, **Footer**, and **PlayerBar** (the fixed playback bar, shown while something is playing).
 
 ---
 
 ## 1. Landing `/` ✅ (marketing)
 
-Página de entrada para no autenticados. Vender el producto y llevar a registro/explorar.
+The entry page for logged out visitors. Its job is to sell the product and drive people to sign up or explore.
 
-- **Hero**: badge de estado (beta), título, subtítulo, CTAs primario (Empezar gratis →
-  registro) y secundario (Explorar canciones).
-- **Features**: 3 cards (escuchar, playlists, subir).
-- **Pendiente sugerido**: sección de capturas/demo, prueba social, FAQ corta.
+- **Hero**: a status badge (beta), a title, a subtitle, a primary CTA (Start for free, leading to sign up) and a secondary one (Explore songs).
+- **Features**: three cards covering listening, playlists, and uploading.
+- **Suggested next steps**: a screenshots or demo section, social proof, a short FAQ.
 
 ## 2. Login / Auth ✅ (endpoints)
 
-`/auth` es la pantalla de login de Musify; sus botones llevan a `/auth/login`, que inicia
-el flujo OIDC de Zitadel y redirige. `?mode=register` arranca en registro; `?returnTo=`
-vuelve a la ruta pedida tras entrar. `/auth/logout` cierra sesión. `/auth/callback`
-intercambia el código y crea la cookie cifrada `mf_session`. La UI de credenciales la
-sirve Zitadel, no Musify.
+`/auth` is Musify's login screen; its buttons lead to `/auth/login`, which kicks off the Zitadel OIDC flow and redirects. `?mode=register` starts on the sign up variant, and `?returnTo=` sends the user back to the route they came from once they're in. `/auth/logout` ends the session. `/auth/callback` exchanges the code and creates the encrypted `mf_session` cookie. The credentials UI itself is served by Zitadel, not by Musify.
 
-## 3. Explorar / Buscar `/explore` ✅ (app)
+## 3. Explore / Search `/explore` ✅ (app)
 
-Descubrimiento y búsqueda de canciones del catálogo.
+Discovery and search over the catalog.
 
-- **Buscador**: input de texto (`?q=`) que filtra por nombre en el backend.
-- **Contador de resultados** y **grid de tracks** (2→4 columnas): portada, título, fecha,
-  botón play/pausa en hover que encola y reproduce vía el player global.
-- **Paginación** anterior/siguiente (`?page=`, 24 por página).
-- **Estado vacío**: sin resultados / catálogo vacío.
-- **Pendiente sugerido**: filtros (más recientes, por usuario), skeletons de carga,
-  portada real del track (hoy la API de listado no devuelve la key de imagen).
+- **Search box**: a text input (`?q=`) that filters by name on the backend.
+- **Results count** and a **track grid** (2 to 4 columns): cover, title, date, and a play/pause button on hover that queues and plays through the global player.
+- **Pagination**: previous/next (`?page=`, 24 per page).
+- **Empty state**: no results, or an empty catalog.
+- **Suggested next steps**: filters (most recent, by user), loading skeletons, a real track cover (the listing API doesn't currently return the image key).
 
-## 4. Subir música `/upload` 🟡 maqueta (app)
+## 4. Upload music `/upload` 🟡 mockup (app)
 
-Alta de una canción nueva. Flujo real de backend (para cuando se cablee):
+Adding a new song. The real backend flow, for when it gets wired up:
 
-1. `POST /tracks/upload-urls` → URLs presignadas para portada y audio + `intentId`s.
-2. `PUT` de cada archivo a su URL presignada (subida directa al almacenamiento).
-3. `POST /tracks` con `title`, `pictureIntentId`, `audioIntentId`.
-4. El backend procesa el audio (transcodifica a DASH) de forma asíncrona.
+1. `POST /tracks/upload-urls` returns presigned URLs for cover and audio, plus `intentId`s.
+2. `PUT` each file to its presigned URL (a direct upload to storage).
+3. `POST /tracks` with `title`, `pictureIntentId`, `audioIntentId`.
+4. The backend processes the audio asynchronously (transcoding it to DASH).
 
-Contenido de la página:
+What the page needs:
 
-- **Zona de audio**: drag & drop o selector; muestra nombre y tamaño del archivo, validación
-  de tipo (audio) y tamaño.
-- **Portada**: selector de imagen con vista previa cuadrada.
-- **Metadatos**: título (obligatorio). Espacio para futuros campos (descripción, etc.).
-- **Pipeline visible**: pasos Subir → Procesar → Publicar con su estado.
-- **Barra de progreso** de subida y estado de procesado.
-- **Estados**: vacío, archivo seleccionado, subiendo, procesando, publicado, error.
-- **Requiere sesión** (al cablear: redirigir a `/auth?returnTo=/upload`).
+- **Audio zone**: drag and drop or a file picker, showing the file's name and size, with type (audio) and size validation.
+- **Cover**: an image picker with a square preview.
+- **Metadata**: title (required), with room for future fields like a description.
+- **Visible pipeline**: the Upload, Process, Publish steps and their status.
+- **Progress bar** for the upload and the processing state.
+- **States**: empty, file selected, uploading, processing, published, error.
+- **Requires a session** (once wired up: redirect to `/auth?returnTo=/upload`).
 
-## 5. Tu biblioteca `/library` ⬜ (app)
+## 5. Your library `/library` ⬜ (app)
 
-Panel personal del usuario autenticado: lo suyo en un sitio.
+The authenticated user's personal panel, everything of theirs in one place.
 
-- **Tabs / secciones**: «Tus canciones» (`GET /tracks/users/{userId}`) y «Tus playlists»
-  (`GET /playlists/users/{userId}`).
-- **Tus canciones**: lista con play, y acciones de gestión (borrar `DELETE /tracks/{id}`,
-  añadir a playlist).
-- **Tus playlists**: grid de portadas + botón «Crear playlist».
-- **Estado vacío** con CTA a subir / crear.
-- **Requiere sesión**.
+- **Tabs / sections**: "Your songs" (`GET /tracks/users/{userId}`) and "Your playlists" (`GET /playlists/users/{userId}`).
+- **Your songs**: a list with play, plus management actions (delete via `DELETE /tracks/{id}`, add to a playlist).
+- **Your playlists**: a grid of covers with a "Create playlist" button.
+- **Empty state** with a CTA to upload or create.
+- **Requires a session.**
 
 ## 6. Playlists `/playlists` ⬜ (app)
 
-Listado de las playlists del usuario.
+A listing of the user's playlists.
 
-- **Grid** de playlists (portada, nombre, nº de tracks) → enlaza al detalle.
-- **Crear playlist**: modal/página con nombre, descripción y portada
-  (`POST /playlists`, portada vía `POST /playlists/upload-picture`).
-- **Estado vacío** con CTA.
-- **Requiere sesión**.
+- **Grid** of playlists (cover, name, track count), linking to the detail page.
+- **Create playlist**: a modal or page with a name, description, and cover (`POST /playlists`, cover via `POST /playlists/upload-picture`).
+- **Empty state** with a CTA.
+- **Requires a session.**
 
-## 7. Detalle de playlist `/playlists/[id]` ⬜ (app)
+## 7. Playlist detail `/playlists/[id]` ⬜ (app)
 
-- **Cabecera**: portada grande, nombre, descripción, nº de tracks, botón «Reproducir todo».
-- **Lista de tracks** (`GET /playlists/{id}/tracks`, paginada): índice, título, fecha,
-  play, quitar de la playlist (`DELETE /playlists/{id}/tracks/{trackId}`).
-- **Acciones del dueño**: editar (`PUT`), borrar (`DELETE`) la playlist, reordenar (futuro).
-- **Añadir tracks**: desde explorar/biblioteca (`POST /playlists/{id}/tracks/{trackId}`).
+- **Header**: a large cover, name, description, track count, and a "Play all" button.
+- **Track list** (`GET /playlists/{id}/tracks`, paginated): index, title, date, play, and remove from the playlist (`DELETE /playlists/{id}/tracks/{trackId}`).
+- **Owner actions**: edit (`PUT`), delete (`DELETE`) the playlist, reorder (a future addition).
+- **Add tracks**: from explore or the library (`POST /playlists/{id}/tracks/{trackId}`).
 
-## 8. Perfil de usuario `/user/[id]` ⬜ (futuro)
+## 8. User profile `/user/[id]` ⬜ (future)
 
-Vista pública de un usuario: avatar, nombre, sus canciones y playlists públicas
-(`GET /users/{id}`, `GET /tracks/users/{id}`, `GET /playlists/users/{id}`).
+A public view of a user: avatar, name, their public songs and playlists (`GET /users/{id}`, `GET /tracks/users/{id}`, `GET /playlists/users/{id}`).
 
 ---
 
-## Player global (PlayerBar) ✅
+## Global player (PlayerBar) ✅
 
-Barra fija inferior visible al reproducir. Info de la pista, transporte
-(anterior/play-pausa/siguiente), barra de progreso y control de volumen. Encola listas
-desde cualquier grid (`player.playQueue`). Reproduce DASH vía el proxy
-`/api/tracks/:id/stream`, que pide manifiesto + ticket firmado al backend.
+A fixed bottom bar, visible while something is playing. Shows track info, transport controls (previous, play/pause, next), a progress bar, and volume control. Queues lists from any grid (`player.playQueue`). Plays DASH through the `/api/tracks/:id/stream` proxy, which requests a manifest and a signed ticket from the backend.
 
-## Backend disponible (resumen)
+## Available backend (summary)
 
-| Recurso   | Endpoints                                                               |
-| --------- | ----------------------------------------------------------------------- |
-| Tracks    | listar/buscar, detalle, por usuario, stream, crear, borrar, upload-urls |
-| Playlists | CRUD, tracks de la playlist, add/remove track, upload-picture           |
-| Users     | listar/buscar, detalle, crear                                           |
+| Resource  | Endpoints                                                            |
+| --------- | --------------------------------------------------------------------- |
+| Tracks    | list/search, detail, by user, stream, create, delete, upload-urls     |
+| Playlists | CRUD, playlist tracks, add/remove track, upload-picture               |
+| Users     | list/search, detail, create                                            |
 
-Cliente tipado en `$lib/server/api.ts` (`openapi-fetch`, estilo ErrorOr). Consumir en
-`load`/actions server, nunca desde cliente. Tipos en `src/lib/api/schema.d.ts`.
+Typed client in `$lib/server/api.ts` (`openapi-fetch`, ErrorOr style). Use it inside `load`/server actions, never from the client. Types live in `src/lib/api/schema.d.ts`.
-- 
2.54.0


From 7c9399a342cb754210ba5ab947f8da007acb0be9 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:35:36 +0200
Subject: [PATCH 13/50] Translate frontend-refactor-plan.md to English

Same content and structure, just in English now and reformatted with
prettier for consistent table alignment.
---
 web-player/docs/frontend-refactor-plan.md | 1385 +++++++++++----------
 1 file changed, 718 insertions(+), 667 deletions(-)

diff --git a/web-player/docs/frontend-refactor-plan.md b/web-player/docs/frontend-refactor-plan.md
index 8cc0074..f79a551 100644
--- a/web-player/docs/frontend-refactor-plan.md
+++ b/web-player/docs/frontend-refactor-plan.md
@@ -1,64 +1,64 @@
-# Plan — Refactor y unificación del frontend (web-player)
+# Plan: Frontend refactor and unification (web-player)
 
-> Plan de trabajo para agentes/IA con contexto limitado (~128k). Sustituye a
-> `design-system-refactor-plan.md` (cuyo contenido ya está mayormente aplicado).
-> Basado en una lectura completa de **todos** los `.svelte`, `.css` y `.ts` de cliente
-> de `web-player/src` (2026-09-18, rama `design-prot`).
+> Work plan for agents/AI with limited context (~128k). Replaces
+> `design-system-refactor-plan.md` (whose content is now mostly applied).
+> Based on a full read of **every** client `.svelte`, `.css` and `.ts` file
+> in `web-player/src` (2026-09-18, branch `design-prot`).
 
-## Cómo usar este documento
+## How to use this document
 
-1. **Lee siempre la sección A (Contexto común)** — es corta y todas las partes la asumen.
-2. Elige **una parte** (P0…P14). Cada parte indica: objetivo, prerrequisitos, archivos
-   a leer, tareas, API exacta de lo que se crea, tabla de mapeo y criterios de cierre.
-3. Una parte = un commit/PR. No mezcles partes.
-4. Si una parte necesita algo de otra (p. ej. un token o un helper) y **no existe
-   todavía**, créalo tú siguiendo la especificación de la sección B — están descritos con
-   ruta y API exactas para que cualquier parte pueda crearlos de forma idéntica.
-5. Al terminar una parte, marca su casilla en la sección D (Registro).
+1. **Always read section A (Common context)**, it's short and every part assumes it.
+2. Pick **one part** (P0 through P14). Each part lists: objective, prerequisites, files
+   to read, tasks, the exact API of what gets created, a mapping table, and closing criteria.
+3. One part equals one commit/PR. Don't mix parts.
+4. If a part needs something from another part (say, a token or a helper) and it
+   **doesn't exist yet**, create it yourself following the spec in section B. These are
+   described with exact paths and APIs so any part can create them identically.
+5. When you finish a part, check its box in section D (Log).
 
-Orden recomendado (las flechas son dependencias **blandas**, ver punto 4):
+Recommended order (the arrows are **soft** dependencies, see point 4):
 
 ```
 P0 → P1 → P2
         ↘ P3 (Artwork/Avatar) ─┐
-        ↘ P4 (Botones)  ───────┤
-        ↘ P5 (Helpers TS) ─────┼→ P6 (Menús) → P7 (Filas) → P8 (Tablas) → P9 (Tarjetas)
-                               └→ P10 (Cabeceras) → P11 (Formularios) → P12 (Chrome) → P13 (Páginas) → P14 (Barrido final)
+        ↘ P4 (Buttons)  ───────┤
+        ↘ P5 (TS helpers) ─────┼→ P6 (Menus) → P7 (Rows) → P8 (Tables) → P9 (Cards)
+                               └→ P10 (Headers) → P11 (Forms) → P12 (Chrome) → P13 (Pages) → P14 (Final sweep)
 ```
 
 ---
 
-## A. Contexto común (leer siempre)
+## A. Common context (always read)
 
-### A.1 Stack y reglas del proyecto (de `web-player/CLAUDE.md`)
+### A.1 Project stack and rules (from `web-player/CLAUDE.md`)
 
-- SvelteKit 2 + **Svelte 5 runes** (`$props()` con `interface Props`, `$state`,
-  `$derived`, `$effect`; nada de `export let` ni `$:`; `{#each}` siempre con clave).
-- **Tailwind 4**: no hay `tailwind.config.js`; la config vive en `src/routes/layout.css`
-  (`@theme`, `@utility`). Tokens de color crudos en `src/lib/theme/theme.css` (`--mf-*`),
-  tokens dinámicos por hue en `src/lib/theme/tokens.ts` (`buildThemeTokens`).
-- Sin comentarios en código salvo imprescindibles.
-- Cierre de cada parte: `npm run check` y `npm run lint` **limpios** (desde `web-player/`).
-- Iconos: `@lucide/svelte/icons/<nombre>`.
+- SvelteKit 2 + **Svelte 5 runes** (`$props()` with `interface Props`, `$state`,
+  `$derived`, `$effect`; no `export let` or `$:`; `{#each}` always keyed).
+- **Tailwind 4**: there's no `tailwind.config.js`; the config lives in `src/routes/layout.css`
+  (`@theme`, `@utility`). Raw color tokens in `src/lib/theme/theme.css` (`--mf-*`),
+  hue-dependent dynamic tokens in `src/lib/theme/tokens.ts` (`buildThemeTokens`).
+- No comments in code unless essential.
+- Closing out each part: `npm run check` and `npm run lint` must be **clean** (from `web-player/`).
+- Icons: `@lucide/svelte/icons/<name>`.
 
-### A.2 Gotchas conocidos (no reintroducirlos)
+### A.2 Known gotchas (don't reintroduce them)
 
-1. **Tokens animados por hue** (`--mf-bg`, `--mf-elevated`, `--mf-panel-bg`, `--mf-bar-bg`,
+1. **Hue-animated tokens** (`--mf-bg`, `--mf-elevated`, `--mf-panel-bg`, `--mf-bar-bg`,
    `--mf-hairline`, `--mf-hero-bg`, `--mf-modal-glow`, `--mf-spotlight-bg`,
-   `--mf-logo-grad`, `--mf-cover-grad`, `--mf-accent*`, `--mf-ambient`) se aplican como
-   **estilo inline** en `<html>` desde `+layout.svelte`. Un override en
-   `:root[data-theme='light']` **no gana**: la variante clara va en `buildThemeTokens()`.
-2. **Conflictos de clases Tailwind**: nunca `class="bg-a {cond ? 'bg-b' : ''}"`. Siempre
-   mutuamente excluyente: `class={cond ? 'bg-b' : 'bg-a'}`. Overrides de la clase base de
-   un componente compartido → prop/variante, no `!important`.
-3. Texto sin clase de tamaño hereda 16px del navegador. Todo texto visible debe tener una
-   receta tipográfica (ver B.1.6).
-4. `--mf-ink` es "texto sobre CTA" y se invierte en claro; `--mf-tile-shade`,
-   `--mf-cover-grad`, `--mf-liked-grad` son "arte" (no invertir).
-5. Referencia visual: **Inicio** (`src/routes/+page.svelte`). Un cambio de refactor no
-   debe cambiar el aspecto salvo donde la parte lo diga explícitamente (columna "Δ").
+   `--mf-logo-grad`, `--mf-cover-grad`, `--mf-accent*`, `--mf-ambient`) are applied as
+   an **inline style** on `<html>` from `+layout.svelte`. An override in
+   `:root[data-theme='light']` **doesn't win**: the light variant belongs in `buildThemeTokens()`.
+2. **Tailwind class conflicts**: never `class="bg-a {cond ? 'bg-b' : ''}"`. Always
+   mutually exclusive: `class={cond ? 'bg-b' : 'bg-a'}`. Overrides of a shared component's
+   base class go through a prop/variant, not `!important`.
+3. Text without a size class inherits the browser's 16px. All visible text needs a
+   typography recipe (see B.1.6).
+4. `--mf-ink` is "text on CTA" and inverts in light mode; `--mf-tile-shade`,
+   `--mf-cover-grad`, `--mf-liked-grad` are "artwork" (don't invert).
+5. Visual reference: **Home** (`src/routes/+page.svelte`). A refactor change shouldn't
+   change the look except where the part explicitly says so (the "Δ" column).
 
-### A.3 Verificación de cada parte
+### A.3 Verifying each part
 
 ```sh
 cd web-player
@@ -66,90 +66,90 @@ npm run check
 npm run lint
 ```
 
-Visual (Browser pane, `.claude/launch.json` → `musify-web`; login de dev en la memoria del
-proyecto): abre cada página tocada **y** Inicio; prueba estado activo (una canción
-sonando), hover, móvil (375px) y modo claro (menú de cuenta → "Modo blanco").
+Visual (Browser pane, `.claude/launch.json` → `musify-web`; dev login credentials are in the
+project's memory): open each touched page **and** Home; test the active state (a track
+playing), hover, mobile (375px) and light mode (account menu → "White mode").
 
-### A.4 Línea base medida (para saber si avanzas)
+### A.4 Measured baseline (to know if you're making progress)
 
-| Métrica                                           | Hoy                                     |
-| ------------------------------------------------- | --------------------------------------- |
-| Componentes `.svelte` (lib + rutas `components/`) | 61                                      |
-| Líneas `.svelte`/`.css`/`.ts` cliente             | ~8.700                                  |
-| Clases arbitrarias `x-[…]`                        | 44                                      |
-| Espaciados fraccionarios (`h-3.75`, `gap-2.75`…)  | ~190 apariciones, 60 valores distintos  |
-| Radios distintos usados                           | 13 (6 tokens + 7 de Tailwind por defecto) |
-| `strokeWidth` distintos                           | 13 valores                              |
-| Atributos `style="…"`                             | 24                                      |
-| Pluralizaciones a mano `=== 1 ?`                  | 15                                      |
-| Errores de `eslint`                               | 2 (`liked/+page.svelte`)                |
+| Metric                                           | Today                                |
+| ------------------------------------------------ | ------------------------------------ |
+| `.svelte` components (lib + route `components/`) | 61                                   |
+| Client `.svelte`/`.css`/`.ts` lines              | ~8,700                               |
+| Arbitrary classes `x-[…]`                        | 44                                   |
+| Fractional spacing (`h-3.75`, `gap-2.75`…)       | ~190 occurrences, 60 distinct values |
+| Distinct radii used                              | 13 (6 tokens + 7 Tailwind defaults)  |
+| Distinct `strokeWidth` values                    | 13 values                            |
+| `style="…"` attributes                           | 24                                   |
+| Hand-rolled pluralizations `=== 1 ?`             | 15                                   |
+| `eslint` errors                                  | 2 (`liked/+page.svelte`)             |
 
-Objetivo global: ~61 → ~45 componentes, −1.500/−2.000 líneas, 0 arbitrarios fuera de una
-lista blanca, 1 escala por dimensión.
+Overall goal: ~61 → ~45 components, −1,500/−2,000 lines, 0 arbitrary values outside an
+allow list, 1 scale per dimension.
 
 ---
 
-## B. Especificaciones compartidas (fuente única)
+## B. Shared specs (single source of truth)
 
-Cualquier parte que necesite algo de aquí y no exista, lo crea **exactamente así**.
+Any part that needs something from here and it doesn't exist yet creates it **exactly like this**.
 
-### B.1 Tokens (en `src/routes/layout.css`, dentro de `@theme`)
+### B.1 Tokens (in `src/routes/layout.css`, inside `@theme`)
 
-Tailwind 4 genera utilidades a partir de estos namespaces: `--radius-*` → `rounded-*`,
+Tailwind 4 generates utilities from these namespaces: `--radius-*` → `rounded-*`,
 `--spacing-*` → `size-* w-* h-* p-* m-* gap-*`, `--container-*` → `max-w-*`,
 `--tracking-*` → `tracking-*`, `--leading-*` → `leading-*`.
 
-#### B.1.1 Radios (`--radius-*`)
+#### B.1.1 Radii (`--radius-*`)
 
-| Token             | Valor      | Para qué                                  |
-| ----------------- | ---------- | ----------------------------------------- |
-| `rounded-tag`     | `0.25rem`  | badges, celdas mini (ExplicitBadge, índice) |
-| `rounded-thumb`   | `0.5rem`   | carátulas ≤ 36px, logo                    |
-| `rounded-control` | `0.625rem` | inputs, filas, items de menú, botones     |
-| `rounded-art`     | `0.8125rem`| carátulas 42–88px, tarjetas de grid       |
-| `rounded-art-lg`  | `1.125rem` | carátulas ≥ 136px, dropzones              |
-| `rounded-panel`   | `1.125rem` | contenedores, menús, modales, tiles       |
-| `rounded-panel-lg`| `1.375rem` | hero, spotlight, "mejor resultado"        |
-| `rounded-full`    | (Tailwind) | pastillas, avatares, botones redondos     |
+| Token              | Value       | What it's for                             |
+| ------------------ | ----------- | ----------------------------------------- |
+| `rounded-tag`      | `0.25rem`   | badges, mini cells (ExplicitBadge, index) |
+| `rounded-thumb`    | `0.5rem`    | covers ≤ 36px, logo                       |
+| `rounded-control`  | `0.625rem`  | inputs, rows, menu items, buttons         |
+| `rounded-art`      | `0.8125rem` | covers 42 to 88px, grid cards             |
+| `rounded-art-lg`   | `1.125rem`  | covers ≥ 136px, dropzones                 |
+| `rounded-panel`    | `1.125rem`  | containers, menus, modals, tiles          |
+| `rounded-panel-lg` | `1.375rem`  | hero, spotlight, "best match"             |
+| `rounded-full`     | (Tailwind)  | pills, avatars, round buttons             |
 
-Eliminar `--radius-art-round` (0 usos). Mapeo de lo existente:
+Remove `--radius-art-round` (0 uses). Mapping of what exists today:
 
-| Hoy                          | px | Usos | Pasa a            | Δ    |
-| ---------------------------- | -- | ---- | ----------------- | ---- |
-| `rounded-sm`, `rounded`      | 4  | 2    | `rounded-tag`     | 0    |
-| `rounded-md`                 | 6  | 1    | `rounded-thumb`   | +2px |
-| `rounded-lg`                 | 8  | 4    | `rounded-thumb`   | 0    |
-| `rounded-xl`                 | 12 | 6    | `rounded-control` | −2px |
-| `rounded-2xl`                | 16 | 8    | `rounded-art-lg` (arte) / `rounded-panel` (contenedor) | +2px |
-| `rounded-3xl`                | 24 | 1    | `rounded-panel-lg`| −2px |
+| Today                   | px  | Uses | Becomes                                                  | Δ    |
+| ----------------------- | --- | ---- | -------------------------------------------------------- | ---- |
+| `rounded-sm`, `rounded` | 4   | 2    | `rounded-tag`                                            | 0    |
+| `rounded-md`            | 6   | 1    | `rounded-thumb`                                          | +2px |
+| `rounded-lg`            | 8   | 4    | `rounded-thumb`                                          | 0    |
+| `rounded-xl`            | 12  | 6    | `rounded-control`                                        | −2px |
+| `rounded-2xl`           | 16  | 8    | `rounded-art-lg` (artwork) / `rounded-panel` (container) | +2px |
+| `rounded-3xl`           | 24  | 1    | `rounded-panel-lg`                                       | −2px |
 
-#### B.1.2 Tamaños de carátula/arte (`--spacing-cover-*`)
+#### B.1.2 Cover/artwork sizes (`--spacing-cover-*`)
 
-| Token            | Valor                          | Usos actuales que absorbe (Δ)                                   |
-| ---------------- | ------------------------------ | --------------------------------------------------------------- |
-| `cover-xs`       | `2.25rem` (36)                 | thumbs de menús `h-9`; sidebar `h-8.5` (+2)                      |
-| `cover-sm`       | `2.625rem` (42)                | filas de tabla `h-10.5`; cola y "Populares" `h-10` (+2); player móvil `h-11` (−2) |
-| `cover-md`       | `3rem` (48)                    | player escritorio `md:h-12`                                      |
-| `cover-lg`       | `3.5rem` (56)                  | "Continuar" `h-14`; filas de búsqueda `h-13` (+4); tarjeta playlist de Inicio `h-15.5` (−6) |
-| `cover-xl`       | `5.5rem` (88)                  | "Mejor resultado" `h-22`                                         |
-| `cover-2xl`      | `8.5rem` (136)                 | spotlight de Inicio `h-34`                                       |
-| `cover-hero`     | `9rem` (144)                   | cabeceras de colección, dropzones, avatar de perfil              |
-| `cover-hero-sm`  | `10.25rem` (164)               | cabeceras de colección a partir de `sm:`                         |
+| Token           | Value            | Current uses it absorbs (Δ)                                                     |
+| --------------- | ---------------- | ------------------------------------------------------------------------------- |
+| `cover-xs`      | `2.25rem` (36)   | menu thumbs `h-9`; sidebar `h-8.5` (+2)                                         |
+| `cover-sm`      | `2.625rem` (42)  | table rows `h-10.5`; queue and "Popular" `h-10` (+2); mobile player `h-11` (−2) |
+| `cover-md`      | `3rem` (48)      | desktop player `md:h-12`                                                        |
+| `cover-lg`      | `3.5rem` (56)    | "Continue" `h-14`; search rows `h-13` (+4); Home playlist card `h-15.5` (−6)    |
+| `cover-xl`      | `5.5rem` (88)    | "Best match" `h-22`                                                             |
+| `cover-2xl`     | `8.5rem` (136)   | Home spotlight `h-34`                                                           |
+| `cover-hero`    | `9rem` (144)     | collection headers, dropzones, profile avatar                                   |
+| `cover-hero-sm` | `10.25rem` (164) | collection headers from `sm:` up                                                |
 
-Uso: `size-cover-sm` (Tailwind 4 `size-*` = `width`+`height`). **Nunca** `h-X w-X` en
-pareja: siempre `size-*`.
+Usage: `size-cover-sm` (Tailwind 4's `size-*` = `width`+`height`). **Never** pair `h-X w-X`:
+always use `size-*`.
 
-#### B.1.3 Iconos (`--spacing-icon-*`) y trazo
+#### B.1.3 Icons (`--spacing-icon-*`) and stroke
 
-| Token      | Valor      | Absorbe                                        |
-| ---------- | ---------- | ---------------------------------------------- |
-| `icon-xs`  | `0.875rem` | `h-3.5` (14)                                   |
-| `icon-sm`  | `1rem`     | `h-3.75` (15), `h-4` (16), `h-4.25` (17)       |
-| `icon-md`  | `1.125rem` | `h-4.5` (18)                                   |
-| `icon-lg`  | `1.25rem`  | `h-5` (20), `h-6` (24, login móvil)            |
-| `icon-xl`  | `2.25rem`  | `h-9`/`h-10` (estados vacíos, dropzone, Me gusta) |
+| Token     | Value      | Absorbs                                      |
+| --------- | ---------- | -------------------------------------------- |
+| `icon-xs` | `0.875rem` | `h-3.5` (14)                                 |
+| `icon-sm` | `1rem`     | `h-3.75` (15), `h-4` (16), `h-4.25` (17)     |
+| `icon-md` | `1.125rem` | `h-4.5` (18)                                 |
+| `icon-lg` | `1.25rem`  | `h-5` (20), `h-6` (24, mobile login)         |
+| `icon-xl` | `2.25rem`  | `h-9`/`h-10` (empty states, dropzone, Liked) |
 
-Trazo: en `layout.css`, fuera de `@theme`:
+Stroke: in `layout.css`, outside `@theme`:
 
 ```css
 @layer base {
@@ -157,93 +157,117 @@ Trazo: en `layout.css`, fuera de `@theme`:
 		stroke-width: 1.8;
 	}
 }
-@utility stroke-thin { stroke-width: 1.3; }
-@utility stroke-regular { stroke-width: 1.8; }
-@utility stroke-bold { stroke-width: 2.5; }
+@utility stroke-thin {
+	stroke-width: 1.3;
+}
+@utility stroke-regular {
+	stroke-width: 1.8;
+}
+@utility stroke-bold {
+	stroke-width: 2.5;
+}
 ```
 
-La propiedad CSS `stroke-width` gana al atributo de presentación que pone Lucide, así que
-el prop `strokeWidth` deja de tener efecto: **se elimina de todos los usos**. Mapeo:
-`1–1.4` → `stroke-thin`, `1.5–2` → (nada, default), `2.5–3` → `stroke-bold`,
-`strokeWidth={0}` + `fill` → clase `stroke-0`. Verifica en el navegador (DevTools →
-Computed `stroke-width`) que el default aplica antes de migrar en masa.
+The CSS property `stroke-width` beats the presentation attribute Lucide sets, so the
+`strokeWidth` prop stops doing anything: **remove it from every use**. Mapping:
+`1 to 1.4` → `stroke-thin`, `1.5 to 2` → (nothing, default), `2.5 to 3` → `stroke-bold`,
+`strokeWidth={0}` + `fill` → the `stroke-0` class. Verify in the browser (DevTools →
+Computed `stroke-width`) that the default applies before migrating in bulk.
 
-#### B.1.4 Anchos (`--container-*`) y layout
+#### B.1.4 Widths (`--container-*`) and layout
 
-| Token                 | Valor    | Absorbe                                                   |
-| --------------------- | -------- | --------------------------------------------------------- |
-| `max-w-prose-sm`      | `26rem`  | `max-w-105` (error), `max-w-108` (hero p), `max-w-110`, `max-w-115` (sin resultados) |
-| `max-w-hero`          | `34rem`  | `max-w-135` (hero, seekbar)                               |
-| `max-w-search`        | `30rem`  | `max-w-120` (buscador TopBar)                             |
-| `max-w-cta`           | `20rem`  | `max-w-80` (botones login)                                |
+| Token            | Value   | Absorbs                                                                          |
+| ---------------- | ------- | -------------------------------------------------------------------------------- |
+| `max-w-prose-sm` | `26rem` | `max-w-105` (error), `max-w-108` (hero p), `max-w-110`, `max-w-115` (no results) |
+| `max-w-hero`     | `34rem` | `max-w-135` (hero, seekbar)                                                      |
+| `max-w-search`   | `30rem` | `max-w-120` (TopBar search box)                                                  |
+| `max-w-cta`      | `20rem` | `max-w-80` (login buttons)                                                       |
 
-Ya existen y se mantienen en `theme.css`: `--mf-sidebar-w`, `--mf-queue-w`, `--mf-nav-h`,
-`--mf-player-h`, `--mf-safe-b`. Añadir:
+Already exist and stay in `theme.css`: `--mf-sidebar-w`, `--mf-queue-w`, `--mf-nav-h`,
+`--mf-player-h`, `--mf-safe-b`. Add:
 
 ```css
---mf-player-side-w: 16rem;   /* w-64 de PlayerBar/PlayerExtras */
---mf-menu-w: 15rem;          /* w-60 de menús contextuales (= MENU_WIDTH 240) */
---mf-submenu-w: 16rem;       /* w-64 (= SUBMENU_WIDTH 256) */
---mf-range-h: 3.5px;         /* barra de progreso y volumen */
+--mf-player-side-w: 16rem; /* w-64 from PlayerBar/PlayerExtras */
+--mf-menu-w: 15rem; /* w-60 for context menus (= MENU_WIDTH 240) */
+--mf-submenu-w: 16rem; /* w-64 (= SUBMENU_WIDTH 256) */
+--mf-range-h: 3.5px; /* progress bar and volume */
 --mf-range-thumb: 11px;
 --mf-volume-w: 84px;
 ```
 
-Las constantes TS `MENU_WIDTH`/`SUBMENU_WIDTH` (duplicadas hoy en `TrackContextMenu` y
-`AlbumContextMenu`) pasan a `src/lib/config.ts` con un comentario-no: el nombre basta.
+The TS constants `MENU_WIDTH`/`SUBMENU_WIDTH` (currently duplicated in `TrackContextMenu`
+and `AlbumContextMenu`) move to `src/lib/config.ts`. No comment needed, the name speaks for itself.
 
-#### B.1.5 Capas (`z-index`)
+#### B.1.5 Layers (`z-index`)
 
-En `theme.css` `:root`: `--z-raised: 10; --z-sticky: 20; --z-backdrop: 30; --z-menu: 40;
---z-submenu: 50; --z-modal: 60; --z-grain: 80;`. Uso: `z-(--z-menu)`. Mapeo 1:1 con los
-valores actuales (`z-10`,`z-20`,`z-30`,`z-40`,`z-50`,`z-[60]`, `body::after` 80). Nota:
-`MobileHeader` y `PlayerDock` usan `z-40` pero son "sticky", no menú → `--z-sticky`
-(verificar que el menú de cuenta sigue encima del header: menú 40 > sticky 20).
+In `theme.css`'s `:root`: `--z-raised: 10; --z-sticky: 20; --z-backdrop: 30; --z-menu: 40;
+--z-submenu: 50; --z-modal: 60; --z-grain: 80;`. Usage: `z-(--z-menu)`. Maps 1:1 to the
+current values (`z-10`, `z-20`, `z-30`, `z-40`, `z-50`, `z-[60]`, `body::after` 80). Note:
+`MobileHeader` and `PlayerDock` use `z-40` but they're "sticky", not menus, so they get
+`--z-sticky` (verify the account menu still sits above the header: menu 40 > sticky 20).
 
-#### B.1.6 Tipografía (recetas `@utility` en `layout.css`)
+#### B.1.6 Typography (`@utility` recipes in `layout.css`)
 
-Escala tipográfica = la de Tailwind (`text-xs`…`text-4xl`), **sin tamaños arbitrarios**.
-Añadir en `@theme`: `--tracking-display: -0.02em; --tracking-eyebrow: 0.1em;
---leading-body: 1.65;`. Recetas (el color **no** va en la receta, se añade aparte):
+Type scale stays Tailwind's (`text-xs` through `text-4xl`), **no arbitrary sizes**.
+Add to `@theme`: `--tracking-display: -0.02em; --tracking-eyebrow: 0.1em;
+--leading-body: 1.65;`. Recipes (color is **not** part of the recipe, it's added separately):
 
 ```css
-@utility text-display-1 { @apply font-display text-3xl font-medium tracking-tight sm:text-4xl; }
-@utility text-display-2 { @apply font-display text-2xl font-medium tracking-tight; }
-@utility text-display-3 { @apply font-display text-xl font-medium tracking-display; }
-@utility text-display-4 { @apply font-display text-lg font-medium tracking-tight; }
-@utility text-eyebrow   { @apply text-xs font-medium tracking-widest uppercase; }
-@utility text-body      { @apply text-sm leading-body; }
-@utility text-count     { @apply text-xs tabular-nums; }
+@utility text-display-1 {
+	@apply font-display text-3xl font-medium tracking-tight sm:text-4xl;
+}
+@utility text-display-2 {
+	@apply font-display text-2xl font-medium tracking-tight;
+}
+@utility text-display-3 {
+	@apply font-display text-xl font-medium tracking-display;
+}
+@utility text-display-4 {
+	@apply font-display text-lg font-medium tracking-tight;
+}
+@utility text-eyebrow {
+	@apply text-xs font-medium tracking-widest uppercase;
+}
+@utility text-body {
+	@apply text-sm leading-body;
+}
+@utility text-count {
+	@apply text-xs tabular-nums;
+}
 ```
 
-> Si `@apply` con variante `sm:` dentro de `@utility` no compila, usa
+> If `@apply` with an `sm:` variant doesn't compile inside `@utility`, use
 > `@media (width >= 40rem) { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }`
-> como hace `page-x`.
+> the way `page-x` does.
 
-Mapeo de lo existente:
+Mapping of what exists today:
 
-| Patrón hoy                                                                                   | Receta                         |
-| -------------------------------------------------------------------------------------------- | ------------------------------ |
-| `font-display text-3xl … sm:text-4xl` (PageHeader, CollectionHeader, hero Inicio, h1 búsqueda `text-2xl sm:text-3xl font-semibold tracking-[-0.03em]`) | `text-display-1` (Δ búsqueda: +1 paso) |
-| `font-display text-2xl` (stats Inicio, título spotlight, "¡Subida!")                          | `text-display-2`               |
-| `font-display text-xl … tracking-[-0.02em]` (Modal, EmptyState, +error, "Sin resultados", diálogos de borrado) | `text-display-3` (todos `font-medium`) |
-| `font-display text-lg` (SectionHeading, "Mejor resultado", Queue "En cola" `text-base`)      | `text-display-4`               |
-| `text-xs font-medium tracking-widest uppercase` (+ variantes `tracking-[0.14em]`, `[0.16em]`, `tracking-wider`, `text-sm font-semibold`) | `text-eyebrow` |
-| `text-sm leading-[1.65] text-fg-2`                                                            | `text-body text-fg-2`          |
-| `text-xs text-muted tabular-nums`                                                             | `text-count text-muted`        |
-| `tracking-[-0.01em]` (MixTile)                                                                | quitar                         |
+| Current pattern                                                                                                                                    | Recipe                               |
+| -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| `font-display text-3xl … sm:text-4xl` (PageHeader, CollectionHeader, Home hero, search h1 `text-2xl sm:text-3xl font-semibold tracking-[-0.03em]`) | `text-display-1` (Δ search: +1 step) |
+| `font-display text-2xl` (Home stats, spotlight title, "Uploaded!")                                                                                 | `text-display-2`                     |
+| `font-display text-xl … tracking-[-0.02em]` (Modal, EmptyState, +error, "No results", delete dialogs)                                              | `text-display-3` (all `font-medium`) |
+| `font-display text-lg` (SectionHeading, "Best match", Queue "Up next" `text-base`)                                                                 | `text-display-4`                     |
+| `text-xs font-medium tracking-widest uppercase` (plus variants `tracking-[0.14em]`, `[0.16em]`, `tracking-wider`, `text-sm font-semibold`)         | `text-eyebrow`                       |
+| `text-sm leading-[1.65] text-fg-2`                                                                                                                 | `text-body text-fg-2`                |
+| `text-xs text-muted tabular-nums`                                                                                                                  | `text-count text-muted`              |
+| `tracking-[-0.01em]` (MixTile)                                                                                                                     | remove                               |
 
-#### B.1.7 Recetas de superficie y movimiento (`@utility` en `layout.css`)
+#### B.1.7 Surface and motion recipes (`@utility` in `layout.css`)
 
 ```css
-@utility theme-transition { transition: background 0.5s ease-out; }        /* 8× transition-[background] duration-500 */
-@utility glass-bar {                                                        /* PlayerBar ×2, TabsBar */
+@utility theme-transition {
+	transition: background 0.5s ease-out;
+} /* 8× transition-[background] duration-500 */
+@utility glass-bar {
+	/* PlayerBar ×2, TabsBar */
 	background-image: var(--mf-bar-bg);
 	border-top: 1px solid var(--mf-hairline);
 	backdrop-filter: blur(24px);
 	transition: background 0.5s ease-out;
 }
-@utility grid-cards {                                                       /* MediaGrid por defecto: 150/165 */
+@utility grid-cards {
+	/* MediaGrid default: 150/165 */
 	display: grid;
 	gap: --spacing(3);
 	grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
@@ -252,7 +276,8 @@ Mapeo de lo existente:
 		grid-template-columns: repeat(auto-fill, minmax(10.3125rem, 1fr));
 	}
 }
-@utility grid-cards-lg {                                                    /* /playlists y /u/[id]: 180/210 */
+@utility grid-cards-lg {
+	/* /playlists and /u/[id]: 180/210 */
 	display: grid;
 	gap: --spacing(3);
 	grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
@@ -261,671 +286,697 @@ Mapeo de lo existente:
 		grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr));
 	}
 }
-@utility grid-tiles {                                                       /* mixes de Inicio: 164 */
+@utility grid-tiles {
+	/* Home mixes: 164 */
 	display: grid;
 	gap: --spacing(5);
 	grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr));
 }
-@utility grid-wide {                                                        /* playlists de Inicio (258) y géneros (268) → 16.5rem, Δ ±6px */
+@utility grid-wide {
+	/* Home playlists (258) and genres (268) → 16.5rem, Δ ±6px */
 	display: grid;
 	gap: --spacing(3.5);
 	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
 }
 ```
 
-`.glass-panel` ya existe; `Modal` debe usarla en lugar de su `style=` inline duplicado.
+`.glass-panel` already exists; `Modal` should use it instead of its duplicated inline `style=`.
 
-Stagger (sustituye los 5 `style="animation-delay:…"` con 40 **o** 45ms):
+Stagger (replaces the 5 `style="animation-delay:…"` with 40 **or** 45ms):
 
 ```css
-.animate-enter { animation-delay: calc(min(var(--i, 0), 10) * 45ms); }
+.animate-enter {
+	animation-delay: calc(min(var(--i, 0), 10) * 45ms);
+}
 ```
 
-Uso: `style="--i:{i}"`. Único `style=` permitido junto con los de B.4.
+Usage: `style="--i:{i}"`. The only `style=` allowed alongside the ones in B.4.
 
-#### B.1.8 Colores: limpieza
+#### B.1.8 Colors: cleanup
 
-- Borrar utilidades sin uso: `--color-accent-dim`, `--color-accent-glow`,
-  `--color-accent-hair`, `--color-accent-line`, `--color-accent-muted` (0 usos como
-  clase; `--mf-accent-dim` sí se usa en `::selection`, se mantiene la variable `--mf-`).
-- `--color-on-accent` es alias de `--mf-on-art` (igual que `--color-on-art`) → borrar y
-  usar `on-art`. `--color-hover` = `--mf-surface-2` (igual que `surface-2`) → mantener
-  **solo** `hover` como semántico de hover y dejar `surface-2` para fondos en reposo.
-- `--mf-sidebar-bg` no lo usa ningún componente (Sidebar usa `bg-bg`) → borrar de
-  `theme.css` y de `buildThemeTokens`.
-- Botón: `--mf-btn-bg` = `--mf-surface-2`; `--mf-btn-secondary-bg` solo difiere en modo
-  claro. Exponer en `@theme` `--color-btn`, `--color-btn-hover`, `--color-btn-glass`,
-  `--color-btn-glass-hover` y eliminar los `bg-[var(--mf-btn-…)]` de `Button.svelte`.
-- Scrollbar: `rgba(255,255,255,.18/.32)` fijo en `layout.css` (roto en claro) → tokens
-  `--mf-scrollbar`, `--mf-scrollbar-hover` con variante en `:root[data-theme='light']`.
-- `MixTile`: `to-black/42`, `bg-ink/76`, `border-on-art/12` → `to-scrim/40`, receta de
-  `PlayButton` (B.3).
+- Delete unused utilities: `--color-accent-dim`, `--color-accent-glow`,
+  `--color-accent-hair`, `--color-accent-line`, `--color-accent-muted` (0 uses as a
+  class; `--mf-accent-dim` is used in `::selection`, so that variable stays).
+- `--color-on-accent` is an alias of `--mf-on-art` (same as `--color-on-art`), delete it and
+  use `on-art`. `--color-hover` = `--mf-surface-2` (same as `surface-2`), keep
+  only `hover` as the hover semantic and leave `surface-2` for resting-state backgrounds.
+- `--mf-sidebar-bg` isn't used by any component (Sidebar uses `bg-bg`), delete it from
+  `theme.css` and from `buildThemeTokens`.
+- Button: `--mf-btn-bg` = `--mf-surface-2`; `--mf-btn-secondary-bg` only differs in light
+  mode. Expose `--color-btn`, `--color-btn-hover`, `--color-btn-glass`,
+  `--color-btn-glass-hover` in `@theme` and remove the `bg-[var(--mf-btn-…)]` from `Button.svelte`.
+- Scrollbar: `rgba(255,255,255,.18/.32)` hardcoded in `layout.css` (broken in light mode) →
+  tokens `--mf-scrollbar`, `--mf-scrollbar-hover` with a variant in `:root[data-theme='light']`.
+- `MixTile`: `to-black/42`, `bg-ink/76`, `border-on-art/12` → `to-scrim/40`, `PlayButton`
+  recipe (B.3).
 
-### B.2 Helpers TypeScript (fuente única)
+### B.2 TypeScript helpers (single source of truth)
 
-| Archivo (nuevo)                     | API                                                                                                    | Sustituye                                                             |
-| ----------------------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- |
-| `src/lib/actions/pressable.ts`      | `pressable(node, fn)` → añade `role="button"`, `tabindex=0`, click + Enter/Espacio                      | 7 copias de `onkeydown` Enter/Space (Inicio ×5, Queue, TrackTitleCell) |
-| `src/lib/actions/clickOutside.ts`   | `clickOutside(node, fn)`                                                                               | `onDocumentClick` de `AccountMenu`                                    |
-| `src/lib/toggle.svelte.ts`          | `createToggle(initial=false)` → `{ get open, show(), close(), toggle() }`                               | `playlists.svelte.ts` y `player/queuePanel.svelte.ts` (idénticos)     |
-| `src/lib/format.ts` (ampliar)       | `plural(n, one, many)` → `"1 canción"`; `fmtCount(n,'canción','canciones')`; **minúscula siempre**     | 15 pluralizaciones a mano, con mayúsculas inconsistentes ("Canción"/"canción") |
-| `src/lib/navigation.svelte.ts` (ampliar) | `searchHref(q)`; `appNavLinks(user, counts?)` → `{href,label,icon,count?,primary:boolean}[]`       | `buildHref` en TopBar y explore; listas de links de Sidebar y TabsBar |
-| `src/lib/player/player.svelte.ts` (ampliar) | `isQueueCurrent(items)`, `playAllOrToggle(items)`, `playShuffled(items)`; renombrar `addToQueue` → `playNextItem` | `playAll`/`isCurrentQueue` en álbum, playlist, liked, mixes, spotlight de Inicio (5 copias) |
-| `src/lib/player/player.svelte.ts`   | `toQueueItem(track)` único (normaliza `duration`/`listensCount` a `number`)                             | mapeos a mano en `recentlyPlayed.ts` (×2), `liked.svelte.ts` (×2), `liked/+page`, `tracks.ts#targetForQueueItem` y los `Number(…)` dispersos |
-| `src/lib/menus.svelte.ts`           | `createTrackMenu()` → `{ state, open(e, track), close(), playNext() }`                                 | estado + handler de menú contextual en Inicio, Explorar, Mezcla       |
+| File (new)                                 | API                                                                                                            | Replaces                                                                                                                                                    |
+| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src/lib/actions/pressable.ts`             | `pressable(node, fn)` → adds `role="button"`, `tabindex=0`, click + Enter/Space                                | 7 copies of `onkeydown` Enter/Space (Home ×5, Queue, TrackTitleCell)                                                                                        |
+| `src/lib/actions/clickOutside.ts`          | `clickOutside(node, fn)`                                                                                       | `onDocumentClick` from `AccountMenu`                                                                                                                        |
+| `src/lib/toggle.svelte.ts`                 | `createToggle(initial=false)` → `{ get open, show(), close(), toggle() }`                                      | `playlists.svelte.ts` and `player/queuePanel.svelte.ts` (identical)                                                                                         |
+| `src/lib/format.ts` (extend)               | `plural(n, one, many)` → `"1 song"`; `fmtCount(n,'song','songs')`; **always lowercase**                        | 15 hand-rolled pluralizations, with inconsistent casing ("Song"/"song")                                                                                     |
+| `src/lib/navigation.svelte.ts` (extend)    | `searchHref(q)`; `appNavLinks(user, counts?)` → `{href,label,icon,count?,primary:boolean}[]`                   | `buildHref` in TopBar and explore; Sidebar and TabsBar link lists                                                                                           |
+| `src/lib/player/player.svelte.ts` (extend) | `isQueueCurrent(items)`, `playAllOrToggle(items)`, `playShuffled(items)`; rename `addToQueue` → `playNextItem` | `playAll`/`isCurrentQueue` in album, playlist, liked, mixes, Home spotlight (5 copies)                                                                      |
+| `src/lib/player/player.svelte.ts`          | single `toQueueItem(track)` (normalizes `duration`/`listensCount` to `number`)                                 | hand-rolled mappings in `recentlyPlayed.ts` (×2), `liked.svelte.ts` (×2), `liked/+page`, `tracks.ts#targetForQueueItem` and the scattered `Number(…)` calls |
+| `src/lib/menus.svelte.ts`                  | `createTrackMenu()` → `{ state, open(e, track), close(), playNext() }`                                         | context menu state + handler in Home, Explore, Mix                                                                                                          |
 
-### B.3 Componentes nuevos (API)
+### B.3 New components (API)
 
-| Componente (`$lib/components/ui/`) | Props                                                                                                                                         | Sustituye / absorbe |
-| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
-| `Artwork.svelte`                   | `src?`, `trackIds?: (string\|number)[]`, `size: 'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'hero'`, `shape?: 'auto'\|'round'`, `imageSize?: 'small'\|'medium'\|'large'` (auto por `size`), `fallback?: 'music'\|'gradient'\|'none'`, `class?`, `children?` (overlay) | `Cover`, `PlaylistArt`, `MixArt`; radio automático por tamaño (xs→thumb, sm–xl→art/control, 2xl/hero→art-lg). Prioridad: `src` → mosaico si ≥4 `trackIds` → primera carátula → fallback. Un único `onerror`. |
-| `Avatar.svelte`                    | `name`, `src?`, `size: 'sm'\|'md'\|'lg'\|'hero'`, `class?`                                                                                    | iniciales/imagen en TopBar, MobileHeader, Explorar (×2), `ArtistAvatar` |
-| `ListRow.svelte`                   | `href?` \| `onclick?`, `oncontextmenu?`, `active?`, `size?: 'sm'\|'md'\|'lg'`, `title`, `subtitle?`, `subtitleHref?`, `explicit?`, `meta?`, `leading?: Snippet`, `art: Snippet<[string]>` \| artwork props, `trailing?: Snippet` | `SearchResultRow` + 7 filas a mano (ver P7) |
-| `MediaIdentity.svelte`             | `title`, `subtitle?`, `subtitleHref?`, `explicit?`, `active?`, `art?: Snippet` \| `artwork` props, `titleClass?`                               | `TrackTitleCell` (renombrado + generalizado) y el bloque de `player/TrackInfo` |
-| `TrackList.svelte`                 | `tracks: TrackLike[]`, `columns?: ('album'\|'added'\|'uploaded'\|'plays')[]`, `index?`, `onPlay(i)`, `rowAction?: {action, icon, label}` \| `rowActionSnippet?`, `oncontextmenu?(e, track)` | `TrackTable`+`TrackRow`+`TrackIndexCell`+`TrackMeta` y las 6 tablas (P8) |
-| `ContextMenu.svelte`               | `x`, `y`, `openLeft`, `onClose`, `items: {icon,label,onclick}[]`, `playlistAction?: {action: string, fields: Record<string,string>, label}`, `playlists` | `TrackContextMenu` + `AlbumContextMenu` (90% idénticos) |
-| `PlayButton.svelte`                | `playing?`, `size: 'sm'\|'md'\|'lg'`, `variant: 'strong'\|'glass'`, `label`, `onclick?`, `as?: 'button'\|'span'`                                | play de TransportControls, "Mejor resultado", overlay de MixTile |
-| `ConfirmDialog.svelte`             | `open`, `onClose`, `title`, `description`, `confirmLabel`, `action` (form POST)                                                               | 2 modales de borrado con estilos distintos |
-| `Slider.svelte`                    | `value`, `max`, `label`, `oninput`, `variant: 'seek'\|'volume'`                                                                               | `SeekBar` (click-only) + `VolumeControl` (`<style>` propio) |
-| `Logo.svelte`                      | `size: 'sm'\|'lg'`                                                                                                                             | logo en Sidebar (sin marca), MobileHeader, login |
-| `Chip.svelte`                      | `selected?`, `count?`, `href?`\|`onclick?`                                                                                                    | chips de filtro y de géneros sugeridos en Explorar |
+| Component (`$lib/components/ui/`) | Props                                                                                                                                                                                                                                                           | Replaces / absorbs                                                                                                                                                                                               |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Artwork.svelte`                  | `src?`, `trackIds?: (string\|number)[]`, `size: 'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'hero'`, `shape?: 'auto'\|'round'`, `imageSize?: 'small'\|'medium'\|'large'` (auto from `size`), `fallback?: 'music'\|'gradient'\|'none'`, `class?`, `children?` (overlay) | `Cover`, `PlaylistArt`, `MixArt`; radius picked automatically by size (xs→thumb, sm to xl→art/control, 2xl/hero→art-lg). Priority: `src` → mosaic if ≥4 `trackIds` → first cover → fallback. A single `onerror`. |
+| `Avatar.svelte`                   | `name`, `src?`, `size: 'sm'\|'md'\|'lg'\|'hero'`, `class?`                                                                                                                                                                                                      | initials/image in TopBar, MobileHeader, Explore (×2), `ArtistAvatar`                                                                                                                                             |
+| `ListRow.svelte`                  | `href?` \| `onclick?`, `oncontextmenu?`, `active?`, `size?: 'sm'\|'md'\|'lg'`, `title`, `subtitle?`, `subtitleHref?`, `explicit?`, `meta?`, `leading?: Snippet`, `art: Snippet<[string]>` \| artwork props, `trailing?: Snippet`                                | `SearchResultRow` + 7 hand-rolled rows (see P7)                                                                                                                                                                  |
+| `MediaIdentity.svelte`            | `title`, `subtitle?`, `subtitleHref?`, `explicit?`, `active?`, `art?: Snippet` \| `artwork` props, `titleClass?`                                                                                                                                                | `TrackTitleCell` (renamed and generalized) and the `player/TrackInfo` block                                                                                                                                      |
+| `TrackList.svelte`                | `tracks: TrackLike[]`, `columns?: ('album'\|'added'\|'uploaded'\|'plays')[]`, `index?`, `onPlay(i)`, `rowAction?: {action, icon, label}` \| `rowActionSnippet?`, `oncontextmenu?(e, track)`                                                                     | `TrackTable`+`TrackRow`+`TrackIndexCell`+`TrackMeta` and the 6 tables (P8)                                                                                                                                       |
+| `ContextMenu.svelte`              | `x`, `y`, `openLeft`, `onClose`, `items: {icon,label,onclick}[]`, `playlistAction?: {action: string, fields: Record<string,string>, label}`, `playlists`                                                                                                        | `TrackContextMenu` + `AlbumContextMenu` (90% identical)                                                                                                                                                          |
+| `PlayButton.svelte`               | `playing?`, `size: 'sm'\|'md'\|'lg'`, `variant: 'strong'\|'glass'`, `label`, `onclick?`, `as?: 'button'\|'span'`                                                                                                                                                | play button in TransportControls, "Best match", MixTile overlay                                                                                                                                                  |
+| `ConfirmDialog.svelte`            | `open`, `onClose`, `title`, `description`, `confirmLabel`, `action` (form POST)                                                                                                                                                                                 | 2 delete modals with different styles                                                                                                                                                                            |
+| `Slider.svelte`                   | `value`, `max`, `label`, `oninput`, `variant: 'seek'\|'volume'`                                                                                                                                                                                                 | `SeekBar` (click-only) + `VolumeControl` (own `<style>`)                                                                                                                                                         |
+| `Logo.svelte`                     | `size: 'sm'\|'lg'`                                                                                                                                                                                                                                              | logo in Sidebar (text only), MobileHeader, login                                                                                                                                                                 |
+| `Chip.svelte`                     | `selected?`, `count?`, `href?`\|`onclick?`                                                                                                                                                                                                                      | filter chips and suggested genre chips in Explore                                                                                                                                                                |
 
-### B.4 Lista blanca de `style=` y arbitrarios (tras el refactor)
+### B.4 Allow list for `style=` and arbitrary values (after the refactor)
 
-Permitidos: `style="--i:{i}"` (stagger), gradientes de tile por hue en Explorar
-(`--tile-hue`), anchos de progreso (`width:{pct}%`), posición de menú (`left/top`).
-Arbitrarios permitidos: `text-[clamp(…)]` de login, `grid-cols-[auto_1fr]`,
-`max-h-[85dvh]`. Todo lo demás, a token.
+Allowed: `style="--i:{i}"` (stagger), per-hue tile gradients in Explore
+(`--tile-hue`), progress width (`width:{pct}%`), menu position (`left/top`).
+Allowed arbitrary values: `text-[clamp(…)]` on login, `grid-cols-[auto_1fr]`,
+`max-h-[85dvh]`. Everything else becomes a token.
 
 ---
 
-## C. Partes
+## C. Parts
 
-### P0 — Línea base y bugs sueltos (independiente, ~30 min)
+### P0: Baseline and loose bugs (independent, ~30 min)
 
-**Objetivo:** dejar `lint` en verde y corregir bugs detectados que no requieren refactor.
+**Objective:** get `lint` green and fix detected bugs that don't require a refactor.
 
-Tareas:
-1. `src/routes/(app)/liked/+page.svelte`: quitar imports `Play` y `Pause` (errores eslint).
-2. `src/lib/components/ui/MediaCard.svelte`: el título no tiene tamaño (hereda 16px) →
-   `text-sm` (igual que `MixTile`).
-3. `src/routes/+page.svelte`, filas del spotlight: `hover:bg-hover … {cond ? 'bg-accent-tint' : ''}`
-   → excluyente (`{cond ? 'bg-accent-tint' : 'hover:bg-hover'}`), igual que las otras filas.
-4. `src/routes/(app)/albums/[id]/+page.svelte` modal de borrado: `text-base text-fg-3` →
-   `text-sm leading-[1.65] text-fg-2` y título igual al de playlists (se unificará en P10).
-5. `Sidebar.svelte` (botón `+`) y `Queue.svelte` (cerrar): quitar `text-base` inútil.
-6. Borrar `src/lib/components/ui/Badge.svelte` (0 importadores).
-7. `Button.svelte`: `primary` y `secondary` son la **misma** clase. No cambiar aspecto;
-   solo dejar `const variants = { primary: subtle, secondary: subtle, … }` con un único
-   `subtle` y anotar en D que P4 decide si `primary` debe diferenciarse (**decisión de
-   producto, preguntar al usuario**).
+Tasks:
 
-Cierre: `npm run lint` 0 errores.
+1. `src/routes/(app)/liked/+page.svelte`: remove the `Play` and `Pause` imports (eslint errors).
+2. `src/lib/components/ui/MediaCard.svelte`: the title has no size class (inherits 16px) →
+   `text-sm` (same as `MixTile`).
+3. `src/routes/+page.svelte`, spotlight rows: `hover:bg-hover … {cond ? 'bg-accent-tint' : ''}`
+   → make it mutually exclusive (`{cond ? 'bg-accent-tint' : 'hover:bg-hover'}`), same as the other rows.
+4. `src/routes/(app)/albums/[id]/+page.svelte` delete modal: `text-base text-fg-3` →
+   `text-sm leading-[1.65] text-fg-2` and a title matching the playlist one (will be unified in P10).
+5. `Sidebar.svelte` (`+` button) and `Queue.svelte` (close): remove the useless `text-base`.
+6. Delete `src/lib/components/ui/Badge.svelte` (0 importers).
+7. `Button.svelte`: `primary` and `secondary` are the **same** class. Don't change the look;
+   just leave `const variants = { primary: subtle, secondary: subtle, … }` with a single
+   `subtle`, and note in D that P4 will decide whether `primary` should be differentiated
+   (**product decision, ask the user**).
+
+Closing: `npm run lint` 0 errors.
 
 ---
 
-### P1 — Tokens base (prerrequisito de P3–P14)
+### P1: Base tokens (prerequisite for P3 through P14)
 
-**Objetivo:** crear todo B.1 de forma **aditiva** (sin migrar componentes todavía, salvo
-lo indicado). Tras esta parte, nada cambia visualmente.
+**Objective:** create all of B.1 **additively** (without migrating components yet, except
+where noted). Nothing should change visually after this part.
 
-Leer: `src/routes/layout.css`, `src/lib/theme/theme.css`, `src/lib/theme/tokens.ts`.
+Read: `src/routes/layout.css`, `src/lib/theme/theme.css`, `src/lib/theme/tokens.ts`.
 
-Tareas:
-1. Añadir en `@theme`: radios B.1.1 (y borrar `--radius-art-round`), `--spacing-cover-*`
+Tasks:
+
+1. Add to `@theme`: radii B.1.1 (and delete `--radius-art-round`), `--spacing-cover-*`
    B.1.2, `--spacing-icon-*` B.1.3, `--container-*` B.1.4, `--tracking-*`/`--leading-*`
    B.1.6, `--color-btn*` B.1.8.
-2. Añadir en `theme.css` `:root`: variables de layout B.1.4 y z-index B.1.5.
-3. Añadir `@utility` de B.1.3 (stroke), B.1.6 (tipografía), B.1.7 (superficies, grids);
-   stagger en `.animate-enter`.
-4. Scrollbar a tokens con variante clara (B.1.8).
-5. Borrar utilidades de color sin uso y `--mf-sidebar-bg` (B.1.8). Antes de borrar cada
-   una: `grep -rn "<nombre>" src` = 0.
-6. Crear una página de prueba temporal **no commiteada** o usar DevTools para comprobar
-   que `size-cover-sm`, `rounded-thumb`, `max-w-hero`, `text-display-1`, `z-(--z-menu)`
-   y `stroke-thin` generan CSS (Tailwind 4 solo genera lo que ve usado: prueba con una
-   clase en un componente y revierte).
+2. Add to `theme.css`'s `:root`: layout variables from B.1.4 and z-index from B.1.5.
+3. Add the `@utility` recipes from B.1.3 (stroke), B.1.6 (typography), B.1.7 (surfaces, grids);
+   stagger in `.animate-enter`.
+4. Move the scrollbar to tokens with a light variant (B.1.8).
+5. Delete unused color utilities and `--mf-sidebar-bg` (B.1.8). Before deleting each
+   one: `grep -rn "<name>" src` = 0.
+6. Create a temporary, **uncommitted** test page, or use DevTools, to confirm
+   `size-cover-sm`, `rounded-thumb`, `max-w-hero`, `text-display-1`, `z-(--z-menu)`
+   and `stroke-thin` generate CSS (Tailwind 4 only generates what it sees used: test with a
+   class on a component and revert).
 
-Cierre: check+lint; captura de Inicio antes/después idéntica.
+Closing: check+lint; before/after screenshot of Home identical.
 
 ---
 
-### P2 — Tema: una sola fuente de verdad + sin parpadeo en modo claro
+### P2: Theme, single source of truth + no flash in light mode
 
-**Objetivo:** eliminar la duplicación `theme.css` ↔ `tokens.ts` y el flash oscuro al
-cargar con modo claro guardado.
+**Objective:** eliminate the `theme.css` ↔ `tokens.ts` duplication and the dark flash when
+loading with light mode saved.
 
-Hallazgos:
-- Los valores por defecto de los ~15 tokens dinámicos están escritos **dos veces**: en
-  `theme.css` (`:root`, hue 145) y en `buildThemeTokens()`. El bloque claro de
-  `theme.css` repite `--mf-bg`, `--mf-elevated`, `--mf-panel-bg`, `--mf-bar-bg`,
-  `--mf-hairline`, `--mf-hero-bg`, `--mf-spotlight-bg`, `--mf-modal-glow`, que luego
-  `tokens.ts` pisa inline.
-- `mode.svelte.ts` aplica `data-theme` solo tras hidratar → flash oscuro.
+Findings:
 
-Tareas:
-1. `src/app.html`: script inline en `<head>` que lea `localStorage['musify.theme']` y
-   ponga `document.documentElement.dataset.theme` antes del primer paint (try/catch).
-2. `+layout.svelte`: en `<svelte:head>`, emitir
+- The default values of the ~15 dynamic tokens are written **twice**: in
+  `theme.css` (`:root`, hue 145) and in `buildThemeTokens()`. The light block in
+  `theme.css` repeats `--mf-bg`, `--mf-elevated`, `--mf-panel-bg`, `--mf-bar-bg`,
+  `--mf-hairline`, `--mf-hero-bg`, `--mf-spotlight-bg`, `--mf-modal-glow`, which
+  `tokens.ts` then overrides inline anyway.
+- `mode.svelte.ts` only applies `data-theme` after hydration, causing a dark flash.
+
+Tasks:
+
+1. `src/app.html`: add an inline `<head>` script that reads `localStorage['musify.theme']`
+   and sets `document.documentElement.dataset.theme` before the first paint (try/catch).
+2. `+layout.svelte`: in `<svelte:head>`, emit
    `<style>:root{…buildThemeTokens(ACCENT_HUE,'dark')}:root[data-theme=light]{…buildThemeTokens(ACCENT_HUE,'light')}</style>`
-   (serializado con un helper `tokensToCss(tokens)` en `tokens.ts`).
-3. Borrar de `theme.css` todos los tokens que genera `buildThemeTokens` (dark y light).
-   `theme.css` queda solo con neutrales fijos, superficies, texto, layout y z-index.
-4. `+layout.svelte`: los dos `div` de fondo con `style=` → `@utility app-backdrop` /
-   `app-vignette` en `layout.css`. `main` con `padding-bottom: calc(…)` inline → clase
-   con `--mf-dock-h` que se activa con `data-has-track` en el propio `main`.
+   (serialized with a `tokensToCss(tokens)` helper in `tokens.ts`).
+3. Delete from `theme.css` every token that `buildThemeTokens` generates (dark and light).
+   `theme.css` is left with only fixed neutrals, surfaces, text, layout and z-index.
+4. `+layout.svelte`: the two background `div`s with `style=` → `@utility app-backdrop` /
+   `app-vignette` in `layout.css`. The `main` with an inline `padding-bottom: calc(…)` →
+   a class using `--mf-dock-h`, activated via `data-has-track` on `main` itself.
 
-Cierre: con modo claro guardado, recarga dura sin flash; cambio de pista sigue animando
-el hue; check+lint.
+Closing: with light mode saved, a hard reload shows no flash; track changes still animate
+the hue; check+lint.
 
 ---
 
-### P3 — `Artwork` y `Avatar` (arte unificado)
+### P3: `Artwork` and `Avatar` (unified artwork)
 
-**Objetivo:** un único componente de carátula y uno de avatar.
+**Objective:** a single cover component and a single avatar component.
 
-Hallazgos:
-- `Cover`, `PlaylistArt` y `MixArt` implementan la misma cascada (imagen → mosaico 2×2 →
-  primera carátula → placeholder). `MixArt` ≡ `PlaylistArt` con
+Findings:
+
+- `Cover`, `PlaylistArt` and `MixArt` implement the same cascade (image → 2×2 mosaic →
+  first cover → placeholder). `MixArt` is basically `PlaylistArt` with
   `trackIds = items.map(i => i.trackId)`.
-- `AlbumCard` pasa el **id del álbum** como `trackId` a `Cover` solo para poder usar `src`
-  (hack).
-- Avatar "imagen o inicial" reimplementado en `TopBar`, `MobileHeader`, Explorar (mejor
-  resultado + fila de usuario) y `ArtistAvatar` (con rayado).
-- Cada uso decide su propio radio (`rounded-lg`, `rounded-xl`, `rounded-2xl`,
-  `rounded-control`, `rounded-art-lg`…) y su tamaño (`h-8.5`, `h-9`, `h-10`, `h-10.5`,
+- `AlbumCard` passes the **album id** as `trackId` to `Cover` just to be able to use `src`
+  (a hack).
+- "Image or initial" avatars are reimplemented in `TopBar`, `MobileHeader`, Explore (best
+  match + user row) and `ArtistAvatar` (with a ring).
+- Each usage picks its own radius (`rounded-lg`, `rounded-xl`, `rounded-2xl`,
+  `rounded-control`, `rounded-art-lg`…) and its own size (`h-8.5`, `h-9`, `h-10`, `h-10.5`,
   `h-11 md:h-12`, `h-13`, `h-14`, `h-15.5`, `h-22`, `h-34`, `h-36 sm:h-41`).
 
-Tareas:
-1. Crear `Artwork.svelte` y `Avatar.svelte` según B.3 usando tokens B.1.1/B.1.2.
-   `size` decide dimensión **y** radio; `class` solo para layout (`shrink-0`, márgenes).
-2. Migrar **todos** los usos (buscar `Cover`, `PlaylistArt`, `MixArt`, `ArtistAvatar`,
-   `user.picture`, `profilePictureUrl`) aplicando la tabla B.1.2.
-3. `ArtistAvatar` → en `u/[id]/+page.svelte` usar `<Avatar size="hero">` (el nombre ya lo
-   muestra la cabecera; el label bajo el avatar era redundante — **Δ visible**, confirmar).
-4. Borrar `Cover.svelte`, `PlaylistArt.svelte`, `MixArt.svelte`, `ArtistAvatar.svelte`.
+Tasks:
 
-Cierre: `grep -rn "Cover\b\|PlaylistArt\|MixArt\|ArtistAvatar" src` solo en `Artwork`;
-visual en Inicio, Explorar (búsqueda), Sidebar, Cola, player, cabeceras.
+1. Create `Artwork.svelte` and `Avatar.svelte` per B.3 using tokens B.1.1/B.1.2.
+   `size` drives both dimension **and** radius; `class` is only for layout (`shrink-0`, margins).
+2. Migrate **every** usage (search for `Cover`, `PlaylistArt`, `MixArt`, `ArtistAvatar`,
+   `user.picture`, `profilePictureUrl`), applying the B.1.2 table.
+3. `ArtistAvatar`: on `u/[id]/+page.svelte`, use `<Avatar size="hero">` (the name is already
+   shown by the header; the label under the avatar was redundant, **visible Δ**, confirm this).
+4. Delete `Cover.svelte`, `PlaylistArt.svelte`, `MixArt.svelte`, `ArtistAvatar.svelte`.
+
+Closing: `grep -rn "Cover\b\|PlaylistArt\|MixArt\|ArtistAvatar" src` only matches inside
+`Artwork`; visual check on Home, Explore (search), Sidebar, Queue, player, headers.
 
 ---
 
-### P4 — Botones: `Button`, `IconButton`, `PlayButton`
+### P4: Buttons, `Button`, `IconButton`, `PlayButton`
 
-**Objetivo:** que no quede ningún `<button>` estilado a mano.
+**Objective:** no `<button>` left hand-styled.
 
-Hallazgos (botones hechos a mano): TopBar atrás/adelante (círculos `h-7.5`), limpiar
-búsqueda, login (`bg-accent-soft rounded-full`), MobileHeader login, Sidebar `+` ×2, Cola
-cerrar/"Vaciar", PlayerExtras cola, TransportControls (shuffle, prev, play, next, repeat),
-TrackInfo corazón, "Mejor resultado" (círculo `h-11.5`), MixTile overlay (`h-9.5`),
-`BackLink`. Overrides con `!`: Inicio `!bg-cta-strong !text-ink hover:!brightness-95` y
+Findings (hand-made buttons): TopBar back/forward (circles `h-7.5`), clear
+search, login (`bg-accent-soft rounded-full`), MobileHeader login, Sidebar `+` ×2, Queue
+close/"Clear", PlayerExtras queue, TransportControls (shuffle, prev, play, next, repeat),
+TrackInfo heart, "Best match" (circle `h-11.5`), MixTile overlay (`h-9.5`),
+`BackLink`. Overrides with `!`: Home `!bg-cta-strong !text-ink hover:!brightness-95` and
 `!font-normal`.
 
-Tareas:
-1. `Button.svelte`: variantes `subtle` (hoy primary/secondary), `glass` (hoy
-   `secondaryOnGlow`), `accent`, `strong` (cta-strong/ink — sustituye los `!`), `danger`.
-   Mantener alias `primary`/`secondary` solo si P0 no obtuvo decisión. Radio →
-   `rounded-control`. Quitar necesidad de `!font-normal` (peso normal en `glass`, o prop
-   `weight`).
-2. `IconButton.svelte`: añadir `shape: 'square'|'round'`, `size: 'xs'|'sm'|'md'|'lg'`,
+Tasks:
+
+1. `Button.svelte`: variants `subtle` (today primary/secondary), `glass` (today
+   `secondaryOnGlow`), `accent`, `strong` (cta-strong/ink, replaces the `!` overrides), `danger`.
+   Keep the `primary`/`secondary` aliases only if P0 didn't land a decision. Radius →
+   `rounded-control`. Remove the need for `!font-normal` (normal weight in `glass`, or a
+   `weight` prop).
+2. `IconButton.svelte`: add `shape: 'square'|'round'`, `size: 'xs'|'sm'|'md'|'lg'`,
    `tone: 'muted'|'subtle'|'plain'`, `pressed?: boolean` (→ `aria-pressed` + `text-accent`),
-   `href?`, `surface?: boolean` (fondo `surface-2`). Iconos con `size-icon-*`.
-3. Crear `PlayButton.svelte` (B.3); iconos play/pausa SVG de `TransportControls` pasan a
-   él (un único sitio para esos `<svg>`).
-4. Migrar todos los botones listados. `TopBar` "adelante" es un `<span>` decorativo
-   deshabilitado y `PlayerExtras` tiene un icono `AlignJustify` decorativo sin función:
-   **preguntar** si se eliminan (código muerto visual) o se mantienen por fidelidad al
-   prototipo.
+   `href?`, `surface?: boolean` (`surface-2` background). Icons with `size-icon-*`.
+3. Create `PlayButton.svelte` (B.3); play/pause SVG icons from `TransportControls` move
+   into it (one single place for those `<svg>`s).
+4. Migrate all listed buttons. `TopBar` "forward" is a disabled decorative `<span>` and
+   `PlayerExtras` has a decorative `AlignJustify` icon with no function:
+   **ask** whether to remove them (visually dead code) or keep them for fidelity to
+   the prototype.
 
-Cierre: `grep -rn "<button" src | grep -v "ui/\(Button\|IconButton\|PlayButton\|Chip\|ListRow\)"`
-→ solo casos justificados (dropzones, selector segmentado).
+Closing: `grep -rn "<button" src | grep -v "ui/\(Button\|IconButton\|PlayButton\|Chip\|ListRow\)"`
+→ only justified cases remain (dropzones, segmented control).
 
 ---
 
-### P5 — Helpers TypeScript
+### P5: TypeScript helpers
 
-**Objetivo:** crear B.2 y migrar sus usos (lógica, no estilos).
+**Objective:** create B.2 and migrate its usages (logic, not styles).
 
-Tareas:
-1. Crear `actions/pressable.ts`, `actions/clickOutside.ts`, `toggle.svelte.ts`.
-   `createPlaylistModal` y `queuePanel` → `createToggle()`; borrar los dos archivos viejos
-   o reducirlos a `export const queuePanel = createToggle()`.
-2. `format.ts`: `plural()`; migrar las 15 pluralizaciones (`grep -rn "=== 1 ?" src`).
-   Unificar a minúscula ("3 canciones") — **Δ visible** en Playlists/Inicio/liked.
+Tasks:
+
+1. Create `actions/pressable.ts`, `actions/clickOutside.ts`, `toggle.svelte.ts`.
+   `createPlaylistModal` and `queuePanel` → `createToggle()`; delete the two old files
+   or reduce them to `export const queuePanel = createToggle()`.
+2. `format.ts`: `plural()`; migrate the 15 hand-rolled pluralizations (`grep -rn "=== 1 ?" src`).
+   Unify to lowercase ("3 songs"), **visible Δ** on Playlists/Home/liked.
 3. `player.svelte.ts`: `toQueueItem`, `isQueueCurrent`, `playAllOrToggle`,
-   `playShuffled`; renombrar `addToQueue` → `playNextItem` (el nombre actual confunde:
-   inserta a continuación, no al final). Migrar álbum, playlist, liked, mixes, Inicio.
-4. `recentlyPlayed.ts` y `liked.svelte.ts`: usar `toQueueItem`.
-5. `tracks.ts`: el envoltorio `TrackTarget = { track }` + 8 accesores (`targetTitle`,
-   `targetArtist`, …) no aporta nada. Sustituir por el `ApiTrackLike` directo y borrar
-   accesores; dejar solo `isCurrent(track)` si hace falta. (Toca Inicio, Explorar,
-   Mezcla, menús: hacerlo en esta parte para no dejar mezcla de estilos.)
+   `playShuffled`; rename `addToQueue` → `playNextItem` (the current name is confusing:
+   it inserts next, not at the end). Migrate album, playlist, liked, mixes, Home.
+4. `recentlyPlayed.ts` and `liked.svelte.ts`: use `toQueueItem`.
+5. `tracks.ts`: the `TrackTarget = { track }` wrapper plus 8 accessors (`targetTitle`,
+   `targetArtist`, …) doesn't add anything. Replace with the `ApiTrackLike` object directly
+   and delete the accessors; keep only `isCurrent(track)` if needed. (This touches Home,
+   Explore, Mix, menus: do it in this part so there's no mix of styles left behind.)
 6. `navigation.svelte.ts`: `searchHref`, `appNavLinks`.
-7. `menus.svelte.ts`: `createTrackMenu()`; migrar Inicio, Explorar, Mezcla.
+7. `menus.svelte.ts`: `createTrackMenu()`; migrate Home, Explore, Mix.
 
-Cierre: check+lint; reproducir desde álbum, playlist, liked, mezcla, spotlight; menú
-contextual "Reproducir a continuación" sigue funcionando.
+Closing: check+lint; reproduce from album, playlist, liked, mix, spotlight; the
+"Play next" context menu action still works.
 
 ---
 
-### P6 — Menús: `ContextMenu` + `AccountMenu` + `GlassMenu`
+### P6: Menus, `ContextMenu` + `AccountMenu` + `GlassMenu`
 
-**Objetivo:** un solo menú contextual.
+**Objective:** a single context menu.
 
-Hallazgos: `TrackContextMenu` (109 líneas) y `AlbumContextMenu` (119) son copias:
-misma función de posicionamiento con las mismas constantes, mismo backdrop, mismo Escape,
-mismo submenú "Añadir a playlist" con `<form use:enhance>`; solo cambian los items y los
-campos ocultos. Sus items reimplementan a mano las clases de `MenuItem` (con
-`strokeWidth={2}` en vez de `1.8`). El item de playlist reimplementa `ListRow`.
+Findings: `TrackContextMenu` (109 lines) and `AlbumContextMenu` (119) are copies:
+same positioning function with the same constants, same backdrop, same Escape handling,
+same "Add to playlist" submenu with `<form use:enhance>`; only the items and hidden
+fields differ. Their items hand-reimplement `MenuItem`'s classes (with
+`strokeWidth={2}` instead of `1.8`). The playlist item reimplements `ListRow`.
 
-Tareas:
-1. Crear `ContextMenu.svelte` (B.3) usando `GlassMenu` + `MenuItem` + `Artwork size="xs"`
-   y anchos `--mf-menu-w`/`--mf-submenu-w`; `contextMenuPosition(event)` exportada del
-   módulo usando `MENU_WIDTH`/`SUBMENU_WIDTH` de `config.ts`.
-2. Sustituir usos en Inicio, Explorar (pista y álbum), Mezcla. Borrar los dos menús viejos.
-3. `AccountMenu`: usar `clickOutside`; eliminar el `div.relative` duplicado que
-   `TopBar`/`MobileHeader` ponen alrededor; `panelClass` → prop `width: 'sm'|'md'`.
-4. Añadir Escape a `AccountMenu` (hoy no cierra con Escape — mejora a11y).
+Tasks:
 
-Cierre: menú de pista y de álbum en Explorar, submenú abre a izquierda cerca del borde,
-móvil (submenú debajo), Escape cierra.
+1. Create `ContextMenu.svelte` (B.3) using `GlassMenu` + `MenuItem` + `Artwork size="xs"`
+   and widths `--mf-menu-w`/`--mf-submenu-w`; export `contextMenuPosition(event)` from
+   the module using `MENU_WIDTH`/`SUBMENU_WIDTH` from `config.ts`.
+2. Replace usages in Home, Explore (track and album), Mix. Delete the two old menus.
+3. `AccountMenu`: use `clickOutside`; remove the duplicated `div.relative` wrapper that
+   `TopBar`/`MobileHeader` put around it; `panelClass` → `width: 'sm'|'md'` prop.
+4. Add Escape support to `AccountMenu` (currently it doesn't close on Escape, an a11y improvement).
+
+Closing: track and album menus in Explore, submenu opens to the left near the edge,
+mobile (submenu below), Escape closes it.
 
 ---
 
-### P7 — Filas: `ListRow` + `MediaIdentity` + `EqBars`
+### P7: Rows, `ListRow` + `MediaIdentity` + `EqBars`
 
-**Objetivo:** una sola fila compacta para todas las listas que no son tabla.
+**Objective:** a single compact row for every list that isn't a table.
 
-Filas reimplementadas hoy (todas: arte + título + subtítulo + meta + estado activo):
+Rows reimplemented today (all of them: art + title + subtitle + meta + active state):
 
-| Dónde                                   | Tamaño   |
-| --------------------------------------- | -------- |
-| `SearchResultRow` (Explorar ×4 grupos)  | lg       |
-| Inicio "Continuar escuchando" (tarjeta) | lg, card |
-| Inicio "Populares" (índice/EQ + meta)   | sm       |
-| Inicio spotlight (índice, sin arte)     | sm       |
-| Inicio "Tus playlists" (tarjeta)        | lg, card |
-| `Queue` "Reproduciendo" + "A continuación" | sm    |
-| `Sidebar` playlists                     | xs       |
-| items de playlist de `ContextMenu`      | xs       |
+| Where                                 | Size     |
+| ------------------------------------- | -------- |
+| `SearchResultRow` (Explore ×4 groups) | lg       |
+| Home "Continue listening" (card)      | lg, card |
+| Home "Popular" (index/EQ + meta)      | sm       |
+| Home spotlight (index, no art)        | sm       |
+| Home "Your playlists" (card)          | lg, card |
+| `Queue` "Now playing" + "Up next"     | sm       |
+| `Sidebar` playlists                   | xs       |
+| `ContextMenu` playlist items          | xs       |
 
-Tareas:
-1. Renombrar/generalizar `TrackTitleCell` → `MediaIdentity` (B.3). Usar en
-   `player/TrackInfo` (sustituye su bloque cover+título+artista).
-2. Crear `ListRow` (B.3) sobre `MediaIdentity` + `pressable`; variante `card` = padding
-   `p-2.25 pr-3.5 rounded-art` (Continuar/Tus playlists).
-3. `NowPlaying` ≡ `EqBars` con overlay: añadir a `EqBars` prop `overlay` (fondo
-   `scrim/45`, color `on-art`) y borrar `NowPlaying`.
-4. Migrar todas las filas de la tabla. Borrar `SearchResultRow`.
+Tasks:
 
-Cierre: Inicio, Explorar, Cola, Sidebar sin cambios visibles salvo Δ de B.1.2; teclado
-(Tab + Enter) reproduce en todas las filas.
+1. Rename/generalize `TrackTitleCell` → `MediaIdentity` (B.3). Use it in
+   `player/TrackInfo` (replacing its cover+title+artist block).
+2. Create `ListRow` (B.3) on top of `MediaIdentity` + `pressable`; `card` variant = padding
+   `p-2.25 pr-3.5 rounded-art` (Continue/Your playlists).
+3. `NowPlaying` is basically `EqBars` with an overlay: add an `overlay` prop to `EqBars`
+   (background `scrim/45`, `on-art` color) and delete `NowPlaying`.
+4. Migrate every row in the table above. Delete `SearchResultRow`.
+
+Closing: Home, Explore, Queue, Sidebar unchanged visually except for the B.1.2 Δ; keyboard
+(Tab + Enter) plays from every row.
 
 ---
 
-### P8 — Tablas de pistas: `TrackList`
+### P8: Track tables, `TrackList`
 
-**Objetivo:** tablas declarativas; borrar 3 celdas y 3 componentes de ruta.
+**Objective:** declarative tables; delete 3 cells and 3 route components.
 
-Hallazgos:
-- 6 tablas (`library`, `liked`, `mixes/[id]`, `AlbumTrackTable`, `PlaylistTrackTable`,
-  `LibraryPicker`) repiten: `{@const active}`, `TrackIndexCell`, `TrackTitleCell`, N
-  `TrackMeta`, y un `<form method=POST use:enhance><input hidden trackId><IconButton revealOnHover>`.
-- Anchos de columna pasados desde cada página e **inconsistentes**: "Escuchas" `106px` en
-  unas y `100px` en otras.
-- La columna **"Álbum" siempre pinta "—"** (library, liked, playlist): placeholder sin
-  datos. **Decisión**: eliminarla (recomendado) o dejarla en el preset.
+Findings:
 
-Tareas:
-1. Crear `TrackList.svelte` (B.3) con presets de columna en el propio módulo:
-   `{ album: {label:'Álbum', width:'76px'}, added: {'Añadida','124px'}, uploaded: {'Subida','124px'}, plays: {'Escuchas','104px'} }`
-   y columnas fijas (`index 32px/28px`, título `minmax(180px,1fr)/minmax(120px,1fr)`,
-   duración `104px/52px`, acción `36px/32px`) como constantes del módulo.
-2. `rowAction={{ action: '?/removeTrack', icon: X, label: 'Quitar de la playlist' }}`
-   genera el form+IconButton; para liked (`onclick`) aceptar `rowAction.onclick`.
-3. Migrar las 6 tablas; inlinear `AlbumTrackTable`, `PlaylistTrackTable`, `LibraryPicker`
-   en sus páginas y borrarlos. Borrar `TrackRow`, `TrackIndexCell`, `TrackMeta`,
+- 6 tables (`library`, `liked`, `mixes/[id]`, `AlbumTrackTable`, `PlaylistTrackTable`,
+  `LibraryPicker`) repeat: `{@const active}`, `TrackIndexCell`, `TrackTitleCell`, N
+  `TrackMeta`s, and a `<form method=POST use:enhance><input hidden trackId><IconButton revealOnHover>`.
+- Column widths passed down from each page are **inconsistent**: "Plays" is `106px` in
+  some places and `100px` in others.
+- The "Album" column **always shows a placeholder dash**: it's a stand-in with no real data.
+  **Decision needed**: remove it (recommended) or leave it in the preset.
+
+Tasks:
+
+1. Create `TrackList.svelte` (B.3) with column presets in the module itself:
+   `{ album: {label:'Album', width:'76px'}, added: {'Added','124px'}, uploaded: {'Uploaded','124px'}, plays: {'Plays','104px'} }`
+   and fixed columns (`index 32px/28px`, title `minmax(180px,1fr)/minmax(120px,1fr)`,
+   duration `104px/52px`, action `36px/32px`) as module constants.
+2. `rowAction={{ action: '?/removeTrack', icon: X, label: 'Remove from playlist' }}`
+   generates the form+IconButton; for liked (`onclick`), accept `rowAction.onclick`.
+3. Migrate the 6 tables; inline `AlbumTrackTable`, `PlaylistTrackTable`, `LibraryPicker`
+   into their pages and delete them. Delete `TrackRow`, `TrackIndexCell`, `TrackMeta`,
    `TrackTable`.
-4. `LibraryPicker` usa overlay `NowPlaying` en vez de índice: `TrackList` con
-   `index={false}` muestra EQ sobre el arte (vía `Artwork` children).
+4. `LibraryPicker` uses the `NowPlaying` overlay instead of an index: `TrackList` with
+   `index={false}` shows the EQ over the art (via `Artwork` children).
 
-Cierre: las 6 páginas; hover revela acción; activo muestra EQ; móvil oculta metas.
+Closing: all 6 pages; hover reveals the action; the active track shows the EQ; mobile hides meta.
 
 ---
 
-### P9 — Tarjetas y grids
+### P9: Cards and grids
 
-**Objetivo:** una tarjeta, cero wrappers.
+**Objective:** one card, zero wrappers.
 
-Hallazgos: `AlbumCard` y `PlaylistCard` solo construyen el subtítulo y eligen el arte;
-`MixTile` es una `MediaCard` con overlay de play y tipografía distinta; `MediaGrid` es un
-`<div>` con variables inline; Inicio (mixes 164px, playlists 258px) y Explorar (géneros
-268px) escriben su propio `grid-cols-[repeat(auto-fill,minmax(…))]`.
+Findings: `AlbumCard` and `PlaylistCard` only build the subtitle and pick the art;
+`MixTile` is a `MediaCard` with a play overlay and different typography; `MediaGrid` is a
+`<div>` with inline variables; Home (mixes 164px, playlists 258px) and Explore (genres
+268px) each write their own `grid-cols-[repeat(auto-fill,minmax(…))]`.
 
-Tareas:
-1. `MediaCard`: props `href`, `title`, `subtitle?`, `onPlay?` (overlay `PlayButton
-   variant="glass"`), `art` snippet **o** props de `Artwork`, `oncontextmenu?`, `index`.
-   Tipografía fija (`text-sm text-fg` / `text-xs text-fg-3`).
-2. Helpers en `format.ts`: `albumMeta(album)`, `playlistMeta(playlist)`.
-3. Sustituir `AlbumCard`, `PlaylistCard`, `MixTile` por `MediaCard`; `MediaGrid` por
-   `grid-cards`/`grid-cards-lg`/`grid-tiles`/`grid-wide` (B.1.7). Borrar los 4 archivos.
-4. Tile de género de Explorar: `style` con `--tile-hue` y el gradiente en un `@utility
-   genre-tile` que lea `var(--tile-hue)`.
+Tasks:
 
-Cierre: /albums, /playlists, /u/[id], Inicio (mixes), Explorar (géneros).
+1. `MediaCard`: props `href`, `title`, `subtitle?`, `onPlay?` (`PlayButton variant="glass"`
+   overlay), `art` snippet **or** `Artwork` props, `oncontextmenu?`, `index`.
+   Fixed typography (`text-sm text-fg` / `text-xs text-fg-3`).
+2. Helpers in `format.ts`: `albumMeta(album)`, `playlistMeta(playlist)`.
+3. Replace `AlbumCard`, `PlaylistCard`, `MixTile` with `MediaCard`; replace `MediaGrid`
+   with `grid-cards`/`grid-cards-lg`/`grid-tiles`/`grid-wide` (B.1.7). Delete the 4 files.
+4. Explore's genre tile: the `style` with `--tile-hue` and its gradient move into a
+   `@utility genre-tile` that reads `var(--tile-hue)`.
+
+Closing: /albums, /playlists, /u/[id], Home (mixes), Explore (genres).
 
 ---
 
-### P10 — Cabeceras, diálogos y tipografía
+### P10: Headers, dialogs and typography
 
-**Objetivo:** 1 cabecera de página, 1 de sección, 1 diálogo de confirmación.
+**Objective:** 1 page header, 1 section header, 1 confirmation dialog.
 
-Hallazgos:
-- `PageHeader` ≡ `CollectionHeader` sin portada/eyebrow. La cabecera de búsqueda de
-  Explorar reimplementa ambos (eyebrow `text-sm font-semibold tracking-[0.16em]`).
-- `AlbumHeader`/`PlaylistHeader` (rutas) solo montan el meta y los botones.
-- Cada página decide el margen tras la cabecera (`mt-7 sm:mt-8`, `mt-6 sm:mt-8`, `mt-9`,
+Findings:
+
+- `PageHeader` is basically `CollectionHeader` without the cover/eyebrow. Explore's
+  search header reimplements both (eyebrow `text-sm font-semibold tracking-[0.16em]`).
+- `AlbumHeader`/`PlaylistHeader` (routes) just wire up the meta and the buttons.
+- Each page decides its own margin after the header (`mt-7 sm:mt-8`, `mt-6 sm:mt-8`, `mt-9`,
   `mt-10 sm:mt-12`…).
-- 2 diálogos de borrado con tipografías distintas.
-- `EmptyState` duplicado literalmente en Inicio ("Todavía no has escuchado nada" ×2).
+- 2 delete dialogs with different typography.
+- `EmptyState` literally duplicated in Home ("You haven't listened to anything yet" ×2).
 
-Tareas:
-1. Fusionar en `PageHeader`: `title`, `eyebrow?`, `description?`, `meta?`, `cover?`,
-   `actions?`, `align?`. **La cabecera fija su propio margen inferior** (`mb-7 sm:mb-8`);
-   quitar los `mt-*` de lo que venga después. Borrar `CollectionHeader`.
-2. Inlinear `AlbumHeader`/`PlaylistHeader` en sus páginas (con `plural()` y el `BackLink`)
-   y borrarlos. Iconos de botones: unificar (álbum tiene iconos, playlist no) →
-   **decisión**: con iconos en ambos (recomendado) o sin ellos.
-3. `SectionHeading`: prop `count?` que pinte la línea + "N resultados" (hoy repetido 4× en
-   Explorar) y `href?`/`linkLabel?` para "Ver todas".
-4. `ConfirmDialog` (B.3); migrar álbum y playlist. `Modal` usa `.glass-panel` y
-   `z-(--z-modal)`; su eyebrow y título con recetas.
-5. Aplicar recetas B.1.6 en: `EmptyState`, `+error.svelte`, "Sin resultados", hero de
-   Inicio, stats, `Queue`, `Sidebar` ("Tus playlists"), `PlaylistForm` (visibilidad).
-6. Inicio: estado vacío repetido → snippet local.
+Tasks:
 
-Cierre: todas las páginas con cabecera; diálogos de borrado idénticos.
+1. Merge into `PageHeader`: `title`, `eyebrow?`, `description?`, `meta?`, `cover?`,
+   `actions?`, `align?`. **The header owns its own bottom margin** (`mb-7 sm:mb-8`);
+   remove the `mt-*` from whatever follows it. Delete `CollectionHeader`.
+2. Inline `AlbumHeader`/`PlaylistHeader` into their pages (with `plural()` and the `BackLink`)
+   and delete them. Button icons: unify (album has icons, playlist doesn't), so
+   **decide**: icons on both (recommended) or on neither.
+3. `SectionHeading`: add a `count?` prop that renders the line + "N results" (currently
+   repeated 4× in Explore) and `href?`/`linkLabel?` for "View all".
+4. `ConfirmDialog` (B.3); migrate album and playlist. `Modal` uses `.glass-panel` and
+   `z-(--z-modal)`; its eyebrow and title use the recipes.
+5. Apply B.1.6 recipes in: `EmptyState`, `+error.svelte`, "No results", the Home
+   hero, stats, `Queue`, `Sidebar` ("Your playlists"), `PlaylistForm` (visibility).
+6. Home: replace the repeated empty state with a local snippet.
+
+Closing: every page has a header; delete dialogs look identical.
 
 ---
 
-### P11 — Formularios
+### P11: Forms
 
-**Objetivo:** un único esqueleto de formulario con portada.
+**Objective:** a single form skeleton with a cover.
 
-Hallazgos:
-- `AlbumForm` y `PlaylistForm` comparten: `use:enhance` con `submitting`,
+Findings:
+
+- `AlbumForm` and `PlaylistForm` share: `use:enhance` with `submitting`,
   `ImageDropzone gradient class="h-36 w-36 rounded-2xl"`, `Field`/`Input`/`Textarea`,
-  `Alert`, pie Cancelar/Enviar.
-- `upload/+page.svelte` reimplementa el selector de portada (label + input + preview +
-  gradiente) que ya hace `ImageDropzone`.
-- `Input` y `Textarea` repiten la misma cadena de clases.
-- Toggle Privada/Pública (`w-[calc(50%-4px)]`) y chips de Explorar: selectores de una
-  opción con estilos propios.
+  `Alert`, and a Cancel/Submit footer.
+- `upload/+page.svelte` reimplements the cover picker (label + input + preview +
+  gradient) that `ImageDropzone` already does.
+- `Input` and `Textarea` repeat the same class string.
+- The Private/Public toggle (`w-[calc(50%-4px)]`) and Explore's chips are both single-option
+  selectors with their own styles.
 
-Tareas:
-1. `CoverForm.svelte` (esqueleto): props `action`, `coverFallbackUrl?`, `coverIcon`,
+Tasks:
+
+1. `CoverForm.svelte` (skeleton): props `action`, `coverFallbackUrl?`, `coverIcon`,
    `requireCover?`, `formMessage?`, `submitLabel`, `submittingLabel`, `canSubmit`,
-   `helperText?`, `onCancel`, `onSuccess?`, snippet `fields`. `AlbumForm` y
-   `PlaylistForm` quedan como ~30 líneas de campos cada uno (o se inlinean en sus
-   páginas si solo se usan en un sitio: `AlbumForm` se usa en 2, `PlaylistForm` en 2 →
-   mantener).
-2. `ImageDropzone`: `size="hero"` usando `size-cover-hero` + `rounded-art-lg`; upload la
-   usa (Δ: icono de 64px → `icon-xl`).
-3. `@utility field-control` en `layout.css` con la cadena común de `Input`/`Textarea`.
-4. `SegmentedControl.svelte` (`options`, `value` bindable) para Privada/Pública; `Chip`
-   (B.3) para Explorar.
+   `helperText?`, `onCancel`, `onSuccess?`, `fields` snippet. `AlbumForm` and
+   `PlaylistForm` end up as ~30 lines of fields each (or get inlined into their
+   pages if only used in one place: `AlbumForm` is used in 2, `PlaylistForm` in 2, so
+   keep them as components).
+2. `ImageDropzone`: `size="hero"` using `size-cover-hero` + `rounded-art-lg`; upload
+   uses it (Δ: 64px icon → `icon-xl`).
+3. `@utility field-control` in `layout.css` with the shared `Input`/`Textarea` class string.
+4. `SegmentedControl.svelte` (`options`, bindable `value`) for Private/Public; `Chip`
+   (B.3) for Explore.
 
-Cierre: crear/editar álbum y playlist, subir canción (drag&drop incluido).
+Closing: create/edit album and playlist, upload a song (including drag & drop).
 
 ---
 
-### P12 — Chrome de la app (layout, navegación, reproductor)
+### P12: App chrome (layout, navigation, player)
 
-**Objetivo:** una sola definición de navegación y un reproductor más pequeño.
+**Objective:** a single navigation definition and a smaller player.
 
-Hallazgos:
-- `Sidebar` y `TabsBar` definen cada uno su lista de links + `isActive`.
-- `MobileHeader` compensa los links que faltan en `TabsBar` con items extra en el menú.
-- Logo: gradiente + texto en MobileHeader y login; solo texto en Sidebar.
-- `PlayerBar` repite dos veces la cadena de "barra de cristal" (igual que `TabsBar`).
-- `PlayerExtras` (22 líneas) solo compone volumen + botón de cola.
-- `SeekBar` es un `<button>` de click (sin teclado ni arrastre) con `h-[3.5px]`;
-  `VolumeControl` es un `<input range>` con `<style>` propio (`84px`, `11px`, `3.5px`).
-- `TrackInfo` duplica el bloque identidad de pista (→ `MediaIdentity`, P7).
+Findings:
 
-Tareas:
-1. `appNavLinks()` (B.2) en Sidebar y TabsBar (`primary` = los 4 de TabsBar).
-2. `Logo.svelte`; usar en Sidebar, MobileHeader y login (Δ: Sidebar gana el cuadrado
-   de gradiente — **confirmar**).
-3. `glass-bar` en PlayerBar ×2 y TabsBar; `theme-transition` en Sidebar, Queue, etc.
-4. Fusionar `PlayerExtras` dentro de `PlayerBar`; anchos laterales `--mf-player-side-w`.
-5. `Slider.svelte` (B.3) con `<input type="range">` estilado vía tokens
-   `--mf-range-h/--mf-range-thumb/--mf-volume-w`; sustituye `SeekBar` y `VolumeControl`
-   (mejora: arrastre y teclado en la barra de progreso). Borrar ambos.
-6. `TopBar`: usar `searchHref`, `IconButton`, `Avatar`; `max-w-search`.
-7. z-index de header/dock/menús con B.1.5.
+- `Sidebar` and `TabsBar` each define their own link list + `isActive`.
+- `MobileHeader` compensates for links missing from `TabsBar` with extra menu items.
+- Logo: gradient + text in MobileHeader and login; text-only in Sidebar.
+- `PlayerBar` repeats the "glass bar" string twice (same as `TabsBar`).
+- `PlayerExtras` (22 lines) only composes volume + queue button.
+- `SeekBar` is a click-only `<button>` (no keyboard, no dragging) with `h-[3.5px]`;
+  `VolumeControl` is a range `<input>` with its own `<style>` (`84px`, `11px`, `3.5px`).
+- `TrackInfo` duplicates the track identity block (→ `MediaIdentity`, P7).
 
-Cierre: navegación desktop/tablet/móvil, cola abre/cierra, seek por click, arrastre y
-flechas, volumen.
+Tasks:
+
+1. `appNavLinks()` (B.2) in Sidebar and TabsBar (`primary` = the 4 items from TabsBar).
+2. `Logo.svelte`; use it in Sidebar, MobileHeader and login (Δ: Sidebar gains the gradient
+   square, **confirm this**).
+3. `glass-bar` in PlayerBar ×2 and TabsBar; `theme-transition` in Sidebar, Queue, etc.
+4. Merge `PlayerExtras` into `PlayerBar`; side widths via `--mf-player-side-w`.
+5. `Slider.svelte` (B.3) with an `<input type="range">` styled through the
+   `--mf-range-h/--mf-range-thumb/--mf-volume-w` tokens; replaces `SeekBar` and `VolumeControl`
+   (bonus: dragging and keyboard support on the progress bar). Delete both.
+6. `TopBar`: use `searchHref`, `IconButton`, `Avatar`; `max-w-search`.
+7. Header/dock/menu z-index via B.1.5.
+
+Closing: desktop/tablet/mobile navigation, queue opens/closes, seek via click, drag and
+arrow keys, volume.
 
 ---
 
-### P13 — Páginas grandes: Explorar (602 líneas) e Inicio (466)
+### P13: Big pages, Explore (602 lines) and Home (466)
 
-**Objetivo:** que las páginas sean composición, no lógica ni marcado repetido. Hacer
-**después** de P7–P10 (usa `ListRow`, `SectionHeading count`, `PageHeader`).
+**Objective:** make these pages composition, not logic or repeated markup. Do this
+**after** P7 through P10 (uses `ListRow`, `SectionHeading count`, `PageHeader`).
+
+Explore:
 
-Explorar:
 1. `GENRE_INFO` + `genreTiles` → `src/lib/genres.ts`.
-2. Lógica de búsqueda (`topResult`, `searchCounts`, `searchChips`, `capped`,
-   `showGroup`, `playlistMatches`) → `src/lib/search.ts` (funciones puras).
-3. Los 4 bloques de grupo (Canciones/Álbumes/Usuarios/Playlists) → un `{#each groups}`
-   con `SectionHeading count` + `ListRow`.
-4. "Mejor resultado": un solo marcado con `Artwork`/`Avatar` según tipo + `PlayButton
-   as="span"`; eliminar el snippet duplicado button/a usando `ListRow`-like o
+2. Search logic (`topResult`, `searchCounts`, `searchChips`, `capped`,
+   `showGroup`, `playlistMatches`) → `src/lib/search.ts` (pure functions).
+3. The 4 group blocks (Songs/Albums/Users/Playlists) → a single `{#each groups}`
+   with `SectionHeading count` + `ListRow`.
+4. "Best match": a single markup block with `Artwork`/`Avatar` depending on type + `PlayButton
+as="span"`; eliminate the duplicated button/a snippet with a `ListRow`-like element or
    `<svelte:element this={href ? 'a' : 'button'}>`.
-5. Paginación `loadMore` → reutilizable si otra página la necesita; si no, dejar.
+5. `loadMore` pagination: reusable if another page needs it; if not, leave as is.
 
-Inicio:
-1. Usar `Page` en vez de `page-x pt-3 sm:pt-4 …` a mano; `gap-11.5` → token de sección
-   (`--spacing-section: 2.875rem`, `gap-section`).
-2. Stats ×3 idénticos → `{#each stats}`.
-3. Hero/spotlight: `style=` de fondo → `@utility hero-surface` / `spotlight-surface`.
-4. Filas → `ListRow` (si P7 no lo hizo ya).
+Home:
 
-Cierre: Explorar sin query, con query, filtros, sin resultados, scroll infinito; Inicio
-completo con y sin datos.
+1. Use `Page` instead of the hand-written `page-x pt-3 sm:pt-4 …`; `gap-11.5` → a section
+   token (`--spacing-section: 2.875rem`, `gap-section`).
+2. The 3 identical stats blocks → `{#each stats}`.
+3. Hero/spotlight: background `style=` → `@utility hero-surface` / `spotlight-surface`.
+4. Rows → `ListRow` (if P7 didn't already do it).
+
+Closing: Explore with no query, with a query, filters, no results, infinite scroll; Home
+complete with and without data.
 
 ---
 
-### P14 — Barrido final y guardarraíles
+### P14: Final sweep and guardrails
 
-**Objetivo:** que no vuelva a aparecer lo que se ha limpiado.
+**Objective:** make sure what's been cleaned up doesn't come back.
 
-Tareas:
-1. Script `web-player/scripts/check-tokens.mjs` + `npm run lint:tokens` (añadir a
-   `lint`). Falla si encuentra en `src/**/*.svelte`:
-   - `-\[` arbitrario fuera de la lista blanca B.4;
-   - `rounded-(sm|md|lg|xl|2xl|3xl)\b` o `rounded\b` a secas;
-   - `\b[hw]-\d` con su pareja en el mismo elemento (debe ser `size-*`);
-   - espaciado fraccionario `-\d+\.\d+` en `h-`/`w-`/`size-` (tamaños → tokens);
-   - `#[0-9a-f]{3,8}` en clases, `rgba(`, `strokeWidth=`, `text-base` sin receta;
-   - `style="` que no sea de la lista blanca.
-2. Espaciados fraccionarios restantes (`gap-2.75`, `py-1.75`, `mt-3.25`, `p-2.25`…): 
-   redondear al paso de 0.5 más cercano **o** a la escala entera cuando el Δ ≤ 1px.
-   Tabla guía: `.25/.75` → `.5` más cercano; `mt-0.75`→`mt-1`; `gap-1.75`→`gap-2`;
-   `p-4.25`→`p-4`; `mb-4.5` (SectionHeading) se mantiene (Δ 2px visible en todas las
-   secciones).
-3. Detector de huérfanos (repetir y borrar lo que salga):
+Tasks:
+
+1. Script `web-player/scripts/check-tokens.mjs` + `npm run lint:tokens` (add it to
+   `lint`). Fails if it finds any of the following in `src/**/*.svelte`:
+   - `-\[` arbitrary values outside the B.4 allow list;
+   - `rounded-(sm|md|lg|xl|2xl|3xl)\b` or a bare `rounded\b`;
+   - `\b[hw]-\d` paired with its counterpart on the same element (should be `size-*`);
+   - fractional spacing `-\d+\.\d+` in `h-`/`w-`/`size-` (sizes should be tokens);
+   - `#[0-9a-f]{3,8}` in classes, `rgba(`, `strokeWidth=`, `text-base` with no recipe;
+   - `style="` outside the allow list.
+2. Remaining fractional spacing (`gap-2.75`, `py-1.75`, `mt-3.25`, `p-2.25`…):
+   round to the nearest 0.5 step **or** to the whole-number scale when the Δ is ≤ 1px.
+   Guide table: `.25/.75` → nearest `.5`; `mt-0.75` → `mt-1`; `gap-1.75` → `gap-2`;
+   `p-4.25` → `p-4`; `mb-4.5` (SectionHeading) stays as is (Δ 2px, visible across all
+   sections).
+3. Orphan detector (run it repeatedly and delete whatever it flags):
    ```bash
    for f in $(find src/lib/components -name "*.svelte"); do n=$(basename "$f" .svelte); c=$(grep -rlw "$n" --include=*.svelte --include=*.ts src | grep -v "/$n.svelte$" | wc -l); [ "$c" -eq 0 ] && echo "$f"; done
    ```
-4. Actualizar `web-player/CLAUDE.md` → sección "Estilos" con: B.4, "usa `size-cover-*`,
-   `size-icon-*`, recetas `text-display-*`/`text-eyebrow`/`text-body`/`text-count`,
-   radios semánticos; componentes: `Artwork`, `Avatar`, `ListRow`, `TrackList`,
-   `MediaCard`, `PageHeader`, `ContextMenu`…". Borrar `docs/design-system-refactor-plan.md`.
-5. Recalcular la tabla A.4 y anotarla en D.
+4. Update `web-player/CLAUDE.md`, the "Styles" section, with: B.4, "use `size-cover-*`,
+   `size-icon-*`, the `text-display-*`/`text-eyebrow`/`text-body`/`text-count` recipes,
+   semantic radii; components: `Artwork`, `Avatar`, `ListRow`, `TrackList`,
+   `MediaCard`, `PageHeader`, `ContextMenu`…". Delete `docs/design-system-refactor-plan.md`.
+5. Recompute the A.4 table and log it in D.
 
 ---
 
-## D. Registro
+## D. Log
 
-| Parte | Estado | Commit | Notas / decisiones tomadas |
-| ----- | ------ | ------ | -------------------------- |
-| P0    | ✅     | (pendiente) | Button primary/secondary se mantienen iguales (decisión del usuario) |
-| P1    | ✅     | (pendiente) | Verificado con `build` (Tailwind compila `@apply sm:` dentro de `@utility`); sin QA visual autenticada (Docker no disponible en esta sesión) |
-| P2    | ✅     | (pendiente) | `<style>{expr}</style>` no interpola en Svelte (se trata como CSS del componente); solución: `{@html \`<style>${css}</style>\`}` |
-| P3    | ✅     | (pendiente) | Se quitó el nombre bajo el avatar de perfil (decisión tomada: redundante con el título de CollectionHeader). Se añadió `size="fill"` a Artwork (no está en la spec) para las tarjetas de grid fluidas (AlbumCard/PlaylistCard/MixTile), ya que P9 (MediaCard) aún no existe. SearchResultRow perdió su prop `kind`/radio-por-tipo (ahora el radio lo decide Artwork/Avatar). Sin QA visual autenticada (Docker no disponible) |
-| P4    | ✅     | (pendiente) | Decisión tomada sin bloquear: se elimina el botón "adelante" decorativo (TopBar) y el icono `AlignJustify` decorativo (PlayerExtras) por ser código muerto visual. `TransportControls` (shuffle/prev/next/repeat) se deja sin migrar a IconButton a propósito: son iconos sin chrome (sin fondo/hit-box), migrarlos habría añadido una píldora de hover no presente hoy — riesgo visual no verificable sin Docker |
-| P5    | 🟡     | (pendiente) | Hecho: pressable/clickOutside, toggle.svelte.ts, plural() (+minúsculas, Δ visible), helpers de player.svelte.ts (toQueueItem/isQueueCurrent/playAllOrToggle/playShuffled, addToQueue→playNextItem), navigation.svelte.ts (searchHref/appNavLinks — appNavLinks creado pero su migración a Sidebar/TabsBar se deja para P12 tal como indica esa parte), menus.svelte.ts (createTrackMenu, migrado en Inicio/Explorar/Mezcla). **Pendiente a propósito**: la tarea 5 (eliminar el envoltorio `TrackTarget` de tracks.ts y sus 8 accesores) se difiere — es el cambio de mayor riesgo del plan (toca tipos en Inicio/Explorar/Mezcla/menús de forma transversal) y no se pudo verificar visualmente sin Docker; abordarlo junto con P13 cuando se reescriban esas páginas |
-| P6    | ✅     | (pendiente) | z-index de AccountMenu unificado a z-(--z-menu) (antes z-20, ahora al mismo nivel que ContextMenu — Δ menor, mejora consistencia); sin QA visual autenticada (Docker no disponible) |
-| P7    | ✅     | (pendiente) | MediaIdentity queda "puro" (sin onClick) según spec; las 6 tablas de pista (P8) envuelven su propio `use:pressable` hasta que P8 las sustituya por TrackList. Deltas documentados: fila activa de Sidebar ahora usa bg-accent-tint/text-accent-soft (antes gris neutro, ahora consistente con el resto de filas activas); tarjeta "Tus playlists" de Inicio pierde la línea "por {tu nombre}" (redundante, siempre el propio usuario) y su radio pasa de rounded-panel a rounded-art (consistencia con la tarjeta "Continuar"); filas de Queue "A continuación" pierden el opacity-80 del arte (ListRow no expone esa personalización). Sin QA visual autenticada (Docker no disponible) |
-| P8    | ✅     | (pendiente) | Decisión tomada (recomendada por el propio plan, sin bloquear): se elimina la columna "Álbum" que siempre mostraba "—". TrackList unifica TrackTable+TrackRow+TrackIndexCell+TrackMeta; AlbumTrackTable/PlaylistTrackTable/LibraryPicker se inlinean en sus páginas y se borran. Sin QA visual autenticada (Docker no disponible) |
-| P9    | ✅     | (pendiente) | MediaCard gana hover-zoom del arte y scrim+PlayButton condicionados a `onPlay` (antes exclusivos de MixTile); ahora se aplicarían a cualquier card futura con onPlay, consistencia intencional. Sin QA visual autenticada (Docker no disponible) |
-| P10   | ✅     | (pendiente) | Decisión tomada (recomendada, sin bloquear): iconos en los botones de cabecera de playlist (antes solo álbum tenía). PlaylistHeader pierde su prop `id` sin usar tras inlinearlo. Explorar: la cabecera de "Resultados para…" ahora usa el `mb-7/8` de PageHeader en vez de un `mt-5` ajustado a mano antes de los chips de filtro — gap ligeramente mayor entre el resumen y los chips (Δ menor, documentado). Sin QA visual autenticada (Docker no disponible) |
-| P11   | ✅     | (pendiente) | CoverForm añade snippet `extra` (no está en la spec literal, solo `fields`) para el contenido a ancho completo bajo la fila portada+campos (descripción de álbum, selector de visibilidad de playlist) que no cabía en una única columna. Upload usa ImageDropzone con `onselect` (prop nueva) y se envuelve en `{#key}` para poder resetear tras publicar — Δ: el contenedor de portada pasa de 144/176px (móvil/desktop) a 144px fijo (size-cover-hero, sin variante desktop mayor), y el icono de posición vacía de 64px a 36px (icon-xl), tal como recomienda el plan. Sin QA visual autenticada (Docker no disponible) |
-| P12   | ✅     | (pendiente) | PlayerExtras se fusiona en PlayerBar (volumen/cola inline); Slider sustituye a SeekBar+VolumeControl (confirmado por grep que el modo `compact` de SeekBar era código muerto). Sidebar y TabsBar migran a `appNavLinks()` (P5). Decisión tomada (sin bloquear): Sidebar gana la marca-gradiente `Logo` que no tenía antes, para consistencia con MobileHeader/login. z-index de PlayerDock/MobileHeader corregido a `z-(--z-sticky)` (son barras fijas, no menús) y SegmentedControl a `z-(--z-raised)`, tal como indica B.1.5. `glass-bar`/`theme-transition` aplicados en PlayerBar (ambas variantes), TabsBar, Queue e Inicio (hero/spotlight), sustituyendo estilos duplicados. Sin QA visual autenticada (Docker no disponible); smoke test de `/login` sin errores de consola |
-| P13   | ✅     | (pendiente) | Se aborda junto con esta parte la tarea 5 diferida en P5: se elimina el envoltorio `TrackTarget` de `tracks.ts` y sus 8 accesores (`targetId`/`targetTitle`/`targetArtist`/`targetOwnerUserId`/`targetExplicit`/`targetListensCount`/`isTargetCurrent`/`queueItemForTarget`/`targetForQueueItem`); Explorar, Inicio, Mezcla, `menus.svelte.ts` y `mixes.ts` pasan a usar los objetos de pista (`ApiTrackLike`/`LocalTrack`) directamente, con `toQueueItem`/`trackFromQueueItem` (nuevo, en `player.svelte.ts`) como únicos conversores. TypeScript reveló que el campo `isExplicit` no existe en el schema real de `/tracks` — el badge "explicit" de Explorar ya era un no-op antes del refactor (siempre `undefined ?? false`); se retira el binding en vez de fingir soporte. Explorar: `GENRE_INFO`/`genreTiles` → `src/lib/genres.ts`; lógica de búsqueda (`showGroup`/`capped`/`matchPlaylists`/`searchCounts`/`searchChips`/`findTopResult`) → `src/lib/search.ts` (funciones puras, parametrizadas por `sfilter`/`query` en vez de cerrar sobre el estado del componente); "Mejor resultado" unifica el botón/enlace duplicado con `<svelte:element this={...}>`. Decisión tomada sin bloquear: **no** se colapsan los 4 bloques de grupo (Canciones/Álbumes/Usuarios/Playlists) en un único `{#each groups}` — cada grupo tiene snippets, contextmenu y props de `ListRow` genuinamente distintos (menú de pista vs. de álbum, overlay solo en canciones, trailing con formato distinto), y forzar una configuración genérica habría añadido más indirección de la que elimina. Inicio: usa `Page` (antes `page-x pt-3 sm:pt-4` a mano); stats ×3 → `{#each}`; fondos de hero/spotlight (`style=` con `var(--mf-hero-bg)`/`var(--mf-spotlight-bg)`) → utilities `hero-surface`/`spotlight-surface` (nuevas, en `layout.css`) y token `--spacing-section: 2.875rem` → `gap-section` sustituye `gap-11.5`. Sin QA visual autenticada (Docker no disponible); `/explore` sin sesión redirige a `/login` porque `+layout.server.ts` exige `allowAnonymousListening` desde el backend (inalcanzable sin Docker) — comportamiento preexistente, no una regresión; smoke test de `/login` sin errores de consola |
-| P14   | ✅     | (pendiente) | `scripts/check-tokens.mjs` (`npm run lint:tokens`, añadido a `lint`) escanea `src/**/*.svelte` y falla en: arbitrarios `-[…]` fuera de la lista blanca de B.4, `rounded-(sm/md/lg/xl/2xl/3xl)`/`rounded` a secas, pares `h-N w-N` (deberían ser `size-N`), espaciado fraccionario en cuartos (`.25`/`.75`), hex/`rgba()` literales. Se limpió el repo hasta dejarlo en 0 violaciones: ~40 pares `h-N w-N` → `size-N` (icons sobre todo, vía script puntual), ~26 espaciados en cuartos redondeados al entero más cercano (Δ≤1px, p. ej. `py-2.75`→`py-3`, `gap-1.75`→`gap-2`), 3 `rounded-sm/lg` + 1 `rounded` a secas → tokens (`rounded-tag`/`rounded-thumb`/`rounded-control`), 2 `tracking-[-0.02em]` → `tracking-display` (coincidían exactamente con el token ya existente y no se habían migrado), 1 `tracking-[0.14em]` en Explorar → receta `text-eyebrow`, `rounded-3xl` del hero de Inicio → `rounded-panel-lg` (consistente con la tarjeta de playlist destacada). Se retiraron las recetas `stroke-thin/regular/bold` (creadas en P1, 0 consumidores) — **decisión tomada, sin bloquear**: no se migra `strokeWidth={n}` (13 valores, en casi todos los componentes) a esas recetas por CSS porque no se puede verificar sin Docker que `lucide-svelte` respete `stroke-width` por clase en vez del prop, y una regresión ahí sería silenciosa en toda la app; el script documenta este gap explícitamente y no lo exige. Se abordó también junto con la tarea 5 diferida de P5 (ver P13). Detector de huérfanos: 0 componentes sin importadores (los 47 de `src/lib/components/` están todos en uso). `docs/design-system-refactor-plan.md` (plan anterior, superseded) borrado. `web-player/CLAUDE.md` gana sección "Estilos" con la lista blanca B.4, componentes base a reutilizar y el gap de `strokeWidth` documentado. Línea base recalculada (ver tabla debajo) |
+| Part | Status | Commit    | Notes / decisions made                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ---- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| P0   | ✅     | (pending) | Button primary/secondary stay identical (user's decision)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| P1   | ✅     | (pending) | Verified with `build` (Tailwind compiles `@apply sm:` inside `@utility`); no authenticated visual QA (Docker not available in this session)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| P2   | ✅     | (pending) | `<style>{expr}</style>` doesn't interpolate in Svelte (it's treated as the component's own CSS); solution: `{@html \`<style>${css}</style>\`}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| P3   | ✅     | (pending) | Removed the name under the profile avatar (decision made: redundant with CollectionHeader's title). Added `size="fill"` to Artwork (not in the spec) for the fluid grid cards (AlbumCard/PlaylistCard/MixTile), since P9 (MediaCard) doesn't exist yet. SearchResultRow lost its `kind`/radius-by-type prop (radius is now decided by Artwork/Avatar). No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| P4   | ✅     | (pending) | Decision made without blocking: removed the decorative "forward" button (TopBar) and the decorative `AlignJustify` icon (PlayerExtras) since they were visually dead code. `TransportControls` (shuffle/prev/next/repeat) is intentionally left unmigrated to IconButton: those are chromeless icons (no background/hit box), migrating them would have added a hover pill that doesn't exist today, a visual risk that couldn't be verified without Docker                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| P5   | 🟡     | (pending) | Done: pressable/clickOutside, toggle.svelte.ts, plural() (+ lowercase, visible Δ), player.svelte.ts helpers (toQueueItem/isQueueCurrent/playAllOrToggle/playShuffled, addToQueue→playNextItem), navigation.svelte.ts (searchHref/appNavLinks, appNavLinks created but its migration into Sidebar/TabsBar is left for P12 as that part specifies), menus.svelte.ts (createTrackMenu, migrated in Home/Explore/Mix). **Deliberately pending**: task 5 (removing the `TrackTarget` wrapper from tracks.ts and its 8 accessors) is deferred, it's the riskiest change in the plan (touches types across Home/Explore/Mix/menus) and couldn't be verified visually without Docker; tackle it together with P13 when those pages get rewritten                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| P6   | ✅     | (pending) | AccountMenu's z-index unified to z-(--z-menu) (was z-20, now at the same level as ContextMenu, a minor Δ that improves consistency); no authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| P7   | ✅     | (pending) | MediaIdentity stays "pure" (no onClick) per spec; the 6 track tables (P8) wrap their own `use:pressable` until P8 replaces them with TrackList. Documented deltas: Sidebar's active row now uses bg-accent-tint/text-accent-soft (was neutral gray, now consistent with other active rows); Home's "Your playlists" card loses the "by {your name}" line (redundant, it's always the current user) and its radius changes from rounded-panel to rounded-art (consistent with the "Continue" card); Queue's "Up next" rows lose the art's opacity-80 (ListRow doesn't expose that customization). No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| P8   | ✅     | (pending) | Decision made (recommended by the plan itself, non-blocking): removed the "Album" column that always showed a placeholder dash. TrackList unifies TrackTable+TrackRow+TrackIndexCell+TrackMeta; AlbumTrackTable/PlaylistTrackTable/LibraryPicker are inlined into their pages and deleted. No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| P9   | ✅     | (pending) | MediaCard gains the art's hover-zoom and scrim+PlayButton, conditioned on `onPlay` (previously exclusive to MixTile); this will now apply to any future card with onPlay, an intentional consistency choice. No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| P10  | ✅     | (pending) | Decision made (recommended, non-blocking): icons on playlist header buttons (previously only album had them). PlaylistHeader loses its unused `id` prop after being inlined. Explore: the "Results for…" header now uses PageHeader's `mb-7/8` instead of a hand-tuned `mt-5` before the filter chips, slightly larger gap between the summary and the chips (minor, documented Δ). No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| P11  | ✅     | (pending) | CoverForm adds an `extra` snippet (not in the literal spec, only `fields`) for full-width content below the cover+fields row (album description, playlist visibility selector) that didn't fit in a single column. Upload uses ImageDropzone with `onselect` (new prop) and wraps it in `{#key}` to be able to reset it after publishing, Δ: the cover container goes from 144/176px (mobile/desktop) to a fixed 144px (size-cover-hero, no larger desktop variant), and the empty-state icon goes from 64px to 36px (icon-xl), as the plan recommends. No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| P12  | ✅     | (pending) | PlayerExtras merges into PlayerBar (volume/queue inline); Slider replaces SeekBar+VolumeControl (confirmed via grep that SeekBar's `compact` mode was dead code). Sidebar and TabsBar migrate to `appNavLinks()` (P5). Decision made (non-blocking): Sidebar gains the gradient-branded `Logo` it didn't have before, for consistency with MobileHeader/login. PlayerDock/MobileHeader z-index fixed to `z-(--z-sticky)` (they're fixed bars, not menus) and SegmentedControl to `z-(--z-raised)`, as B.1.5 specifies. `glass-bar`/`theme-transition` applied on PlayerBar (both variants), TabsBar, Queue and Home (hero/spotlight), replacing duplicated styles. No authenticated visual QA (Docker not available); `/login` smoke test with no console errors                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| P13  | ✅     | (pending) | This part also tackles the task deferred in P5: removes the `TrackTarget` wrapper from `tracks.ts` and its 8 accessors (`targetId`/`targetTitle`/`targetArtist`/`targetOwnerUserId`/`targetExplicit`/`targetListensCount`/`isTargetCurrent`/`queueItemForTarget`/`targetForQueueItem`); Explore, Home, Mix, `menus.svelte.ts` and `mixes.ts` now use track objects (`ApiTrackLike`/`LocalTrack`) directly, with `toQueueItem`/`trackFromQueueItem` (new, in `player.svelte.ts`) as the only conversion functions. TypeScript revealed the `isExplicit` field doesn't exist in the real `/tracks` schema, Explore's "explicit" badge was already a no-op before the refactor (always `undefined ?? false`); the binding was removed instead of faking support for it. Explore: `GENRE_INFO`/`genreTiles` → `src/lib/genres.ts`; search logic (`showGroup`/`capped`/`matchPlaylists`/`searchCounts`/`searchChips`/`findTopResult`) → `src/lib/search.ts` (pure functions, parameterized by `sfilter`/`query` instead of closing over component state); "Best match" unifies the duplicated button/link with `<svelte:element this={...}>`. Decision made without blocking: the 4 group blocks (Songs/Albums/Users/Playlists) are **not** collapsed into a single `{#each groups}`, each group has genuinely different snippets, context menus and `ListRow` props (track menu vs. album menu, overlay only on songs, differently formatted trailing content), and forcing a generic configuration would have added more indirection than it removed. Home: uses `Page` (previously a hand-written `page-x pt-3 sm:pt-4`); the 3 stats blocks → `{#each}`; hero/spotlight backgrounds (`style=` with `var(--mf-hero-bg)`/`var(--mf-spotlight-bg)`) → new `hero-surface`/`spotlight-surface` utilities (in `layout.css`) and the `--spacing-section: 2.875rem` token → `gap-section` replaces `gap-11.5`. No authenticated visual QA (Docker not available); `/explore` without a session redirects to `/login` because `+layout.server.ts` requires `allowAnonymousListening` from the backend (unreachable without Docker), a pre-existing behavior, not a regression; `/login` smoke test with no console errors |
+| P14  | ✅     | (pending) | `scripts/check-tokens.mjs` (`npm run lint:tokens`, added to `lint`) scans `src/**/*.svelte` and fails on: `-[…]` arbitrary values outside the B.4 allow list, bare `rounded-(sm/md/lg/xl/2xl/3xl)`/`rounded`, `h-N w-N` pairs (should be `size-N`), fractional quarter spacing (`.25`/`.75`), literal hex/`rgba()` values. Cleaned the repo down to 0 violations: ~40 `h-N w-N` pairs → `size-N` (mostly icons, via a one-off script), ~26 quarter-spacing values rounded to the nearest whole number (Δ≤1px, e.g. `py-2.75`→`py-3`, `gap-1.75`→`gap-2`), 3 `rounded-sm/lg` + 1 bare `rounded` → tokens (`rounded-tag`/`rounded-thumb`/`rounded-control`), 2 `tracking-[-0.02em]` → `tracking-display` (matched the existing token exactly and hadn't been migrated), 1 `tracking-[0.14em]` in Explore → the `text-eyebrow` recipe, Home hero's `rounded-3xl` → `rounded-panel-lg` (consistent with the featured playlist card). Removed the `stroke-thin/regular/bold` recipes (created in P1, 0 consumers), **decision made, non-blocking**: `strokeWidth={n}` (13 values, across almost every component) isn't migrated to those CSS recipes because there's no way to verify without Docker that `lucide-svelte` respects `stroke-width` via class instead of the prop, and a regression there would be silent across the whole app; the script documents this gap explicitly and doesn't enforce it. Also tackled the task deferred from P5 (see P13). Orphan detector: 0 components with no importers (all 47 in `src/lib/components/` are in use). `docs/design-system-refactor-plan.md` (previous plan, superseded) deleted. `web-player/CLAUDE.md` gains a "Styles" section with the B.4 allow list, the base components to reuse, and the documented `strokeWidth` gap. Baseline recalculated (see table below)                                                                                                                                                                                                                                                                                                                                                                                       |
 
-Decisiones de producto pendientes (preguntar al usuario antes de la parte indicada):
-- P0/P4: ¿`Button` primary debe verse distinto de secondary?
-- P3: ¿quitar el nombre bajo el avatar de perfil?
-- P4: ¿eliminar el botón "adelante" decorativo y el icono `AlignJustify` del player?
-- P5: pluralizaciones en minúscula en toda la app.
-- P8: ¿eliminar la columna "Álbum" que siempre muestra "—"?
-- P10: ¿iconos en los botones de cabecera de álbum **y** playlist?
-- P12: ¿logo con cuadrado de gradiente también en la Sidebar?
+Pending product decisions (ask the user before the listed part):
 
-### D.1 Línea base recalculada (tras P14, cierre del refactor)
+- P0/P4: should `Button` primary look different from secondary?
+- P3: remove the name under the profile avatar?
+- P4: remove the decorative "forward" button and the `AlignJustify` icon from the player?
+- P5: lowercase pluralizations across the whole app.
+- P8: remove the "Album" column that always shows a placeholder dash?
+- P10: icons on album **and** playlist header buttons?
+- P12: gradient-square logo in the Sidebar too?
 
-Recalculada con los mismos criterios que A.4 (grep sobre `src/`), en la misma sesión de
-cierre de P14.
+### D.1 Recalculated baseline (after P14, closing out the refactor)
 
-| Métrica                                           | A.4 (antes) | Tras P14                                  |
-| -------------------------------------------------- | ----------- | ------------------------------------------ |
-| Componentes `.svelte` en `src/lib/components/`     | 61          | 47                                         |
-| Líneas `.svelte`/`.css`/`.ts` cliente              | ~8.700      | ~8.310 (−~390; el objetivo de −1.500/−2.000 ya se había alcanzado en P3–P11, antes de que P13 añadiera `genres.ts`/`search.ts` como código nuevo bien separado) |
-| Clases arbitrarias `x-[…]`                         | 44          | 11 (las 11 restantes, en la lista blanca de B.4) |
-| Espaciados fraccionarios en cuartos (`.25`/`.75`)  | ~190 apariciones | 0 (redondeados al entero más cercano, Δ≤1px) |
-| Radios distintos usados                            | 13          | 8 (7 tokens B.1.1 + `rounded-full`)        |
-| `strokeWidth` distintos                            | 13          | 12 (fuera de alcance, ver Registro P14 y CLAUDE.md) |
-| Atributos `style="…"`                              | 24          | 16 (en 12 archivos; todos dinámicos por instancia — stagger, posición de menú, `var(--mf-*)`, animación — ninguno con color/medida literal) |
-| Pluralizaciones a mano `=== 1 ?`                   | 15          | 2 (1 es la propia `plural()` en `format.ts`; 1 es concordancia de participio en `library` que `plural()` no puede cubrir) |
-| Errores de `eslint`                                | 2           | 0                                          |
-| `npm run lint:tokens` (nuevo, P14)                 | —           | 0 violaciones                              |
+Recalculated with the same criteria as A.4 (grep over `src/`), in the same session that closed out P14.
+
+| Metric                                        | A.4 (before)     | After P14                                                                                                                                               |
+| --------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.svelte` components in `src/lib/components/` | 61               | 47                                                                                                                                                      |
+| Client `.svelte`/`.css`/`.ts` lines           | ~8,700           | ~8,310 (−~390; the −1,500/−2,000 goal had already been reached in P3 through P11, before P13 added `genres.ts`/`search.ts` as new, well-separated code) |
+| Arbitrary classes `x-[…]`                     | 44               | 11 (the remaining 11 are all in the B.4 allow list)                                                                                                     |
+| Fractional quarter spacing (`.25`/`.75`)      | ~190 occurrences | 0 (rounded to the nearest whole number, Δ≤1px)                                                                                                          |
+| Distinct radii used                           | 13               | 8 (7 B.1.1 tokens + `rounded-full`)                                                                                                                     |
+| Distinct `strokeWidth` values                 | 13               | 12 (out of scope, see the P14 log entry and CLAUDE.md)                                                                                                  |
+| `style="…"` attributes                        | 24               | 16 (across 12 files; all dynamic per instance, stagger, menu position, `var(--mf-*)`, animation, none with a literal color/measurement)                 |
+| Hand-rolled pluralizations `=== 1 ?`          | 15               | 2 (1 is `plural()` itself in `format.ts`; 1 is a past-participle agreement in `library` that `plural()` can't cover)                                    |
+| `eslint` errors                               | 2                | 0                                                                                                                                                       |
+| `npm run lint:tokens` (new, P14)              | n/a              | 0 violations                                                                                                                                            |
 
 ---
 
-## E. Inventario completo (veredicto por archivo)
+## E. Full inventory (verdict per file)
 
-Leyenda: **=** se mantiene · **~** se modifica · **→X** se fusiona en X · **✕** se borra.
+Legend: **=** stays as is · **~** gets modified · **→X** merges into X · **✕** gets deleted.
 
 ### `src/lib/components/ui/`
 
-| Archivo              | Líneas | Veredicto | Parte | Motivo |
-| -------------------- | ------ | --------- | ----- | ------ |
-| AccountMenu          | 73  | ~            | P6  | `clickOutside`, Escape, ancho por prop |
-| AlbumCard            | 62  | ✕ →MediaCard | P9  | wrapper de meta + hack `trackId=albumId` |
-| AlbumForm            | 123 | ~ (CoverForm)| P11 | esqueleto compartido |
-| Alert                | 20  | =            |     | |
-| ArtistAvatar         | 36  | ✕ →Avatar    | P3  | |
-| BackLink             | 33  | ~            | P4  | `IconButton`/tokens; quitar `hover:text-accent-soft` duplicado |
-| Badge                | 23  | ✕            | P0  | 0 usos |
-| Button               | 66  | ~            | P0/P4 | variantes duplicadas, overrides `!` |
-| Checkbox             | 29  | ~            | P14 | `size-*`, tokens |
-| CollectionHeader     | 45  | ✕ →PageHeader| P10 | |
-| Cover                | 47  | ✕ →Artwork   | P3  | |
-| EmptyState           | 31  | ~            | P10 | recetas |
-| EqBars               | 23  | ~            | P7  | absorbe `NowPlaying` |
-| ExplicitBadge        | 13  | ~            | P1/P14 | `rounded-tag`, `size-4` |
-| Field                | 27  | =            |     | |
-| GlassMenu            | 15  | =            |     | base de menús |
-| IconButton           | 39  | ~            | P4  | shape/size/tone/pressed/href |
-| ImageDropzone        | 62  | ~            | P11 | `size="hero"`; usado por upload |
-| InfiniteScroll       | 39  | =            |     | |
-| Input                | 59  | ~            | P11 | `field-control` |
-| MediaCard            | 32  | ~            | P0/P9 | bug 16px; absorbe MixTile |
-| MediaGrid            | 27  | ✕ →`grid-*`  | P9  | |
-| MenuItem             | 48  | ~            | P6  | iconos `size-icon-md` |
-| MixArt               | 25  | ✕ →Artwork   | P3  | |
-| MixTile              | 51  | ✕ →MediaCard | P9  | |
-| Modal                | 106 | ~            | P10 | `.glass-panel`, z-token, recetas |
-| NowPlaying           | 20  | ✕ →EqBars    | P7  | |
-| Page                 | 14  | =            |     | Inicio debe usarlo (P13) |
-| PageHeader           | 26  | ~            | P10 | absorbe CollectionHeader |
-| PlaylistArt          | 61  | ✕ →Artwork   | P3  | |
-| PlaylistCard         | 23  | ✕ →MediaCard | P9  | |
-| PlaylistForm         | 161 | ~ (CoverForm)| P11 | + SegmentedControl |
-| SearchResultRow      | 78  | ✕ →ListRow   | P7  | |
-| SectionHeading       | 32  | ~            | P10 | `count`, "ver todas" |
-| Surface              | 17  | =            |     | (solo upload; aceptable) |
-| Textarea             | 28  | ~            | P11 | `field-control` |
-| TrackIndexCell       | 27  | ✕ →TrackList | P8  | |
-| TrackMeta            | 14  | ✕ →TrackList | P8  | |
-| TrackRow             | 27  | ✕ →TrackList | P8  | |
-| TrackTable           | 79  | ✕ →TrackList | P8  | |
-| TrackTitleCell       | 77  | → MediaIdentity | P7 | renombrar + generalizar |
-| **Nuevos**           |     | Artwork, Avatar, ListRow, MediaIdentity, TrackList, ContextMenu, PlayButton, ConfirmDialog, Slider, Logo, Chip, SegmentedControl, CoverForm | | |
+| File             | Lines | Verdict                                                                                                                                     | Part   | Reason                                                          |
+| ---------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------- |
+| AccountMenu      | 73    | ~                                                                                                                                           | P6     | `clickOutside`, Escape, width via prop                          |
+| AlbumCard        | 62    | ✕ →MediaCard                                                                                                                                | P9     | meta wrapper + the `trackId=albumId` hack                       |
+| AlbumForm        | 123   | ~ (CoverForm)                                                                                                                               | P11    | shared skeleton                                                 |
+| Alert            | 20    | =                                                                                                                                           |        |                                                                 |
+| ArtistAvatar     | 36    | ✕ →Avatar                                                                                                                                   | P3     |                                                                 |
+| BackLink         | 33    | ~                                                                                                                                           | P4     | `IconButton`/tokens; remove duplicated `hover:text-accent-soft` |
+| Badge            | 23    | ✕                                                                                                                                           | P0     | 0 uses                                                          |
+| Button           | 66    | ~                                                                                                                                           | P0/P4  | duplicated variants, `!` overrides                              |
+| Checkbox         | 29    | ~                                                                                                                                           | P14    | `size-*`, tokens                                                |
+| CollectionHeader | 45    | ✕ →PageHeader                                                                                                                               | P10    |                                                                 |
+| Cover            | 47    | ✕ →Artwork                                                                                                                                  | P3     |                                                                 |
+| EmptyState       | 31    | ~                                                                                                                                           | P10    | recipes                                                         |
+| EqBars           | 23    | ~                                                                                                                                           | P7     | absorbs `NowPlaying`                                            |
+| ExplicitBadge    | 13    | ~                                                                                                                                           | P1/P14 | `rounded-tag`, `size-4`                                         |
+| Field            | 27    | =                                                                                                                                           |        |                                                                 |
+| GlassMenu        | 15    | =                                                                                                                                           |        | menu base                                                       |
+| IconButton       | 39    | ~                                                                                                                                           | P4     | shape/size/tone/pressed/href                                    |
+| ImageDropzone    | 62    | ~                                                                                                                                           | P11    | `size="hero"`; used by upload                                   |
+| InfiniteScroll   | 39    | =                                                                                                                                           |        |                                                                 |
+| Input            | 59    | ~                                                                                                                                           | P11    | `field-control`                                                 |
+| MediaCard        | 32    | ~                                                                                                                                           | P0/P9  | 16px bug; absorbs MixTile                                       |
+| MediaGrid        | 27    | ✕ →`grid-*`                                                                                                                                 | P9     |                                                                 |
+| MenuItem         | 48    | ~                                                                                                                                           | P6     | `size-icon-md` icons                                            |
+| MixArt           | 25    | ✕ →Artwork                                                                                                                                  | P3     |                                                                 |
+| MixTile          | 51    | ✕ →MediaCard                                                                                                                                | P9     |                                                                 |
+| Modal            | 106   | ~                                                                                                                                           | P10    | `.glass-panel`, z-token, recipes                                |
+| NowPlaying       | 20    | ✕ →EqBars                                                                                                                                   | P7     |                                                                 |
+| Page             | 14    | =                                                                                                                                           |        | Home should use it (P13)                                        |
+| PageHeader       | 26    | ~                                                                                                                                           | P10    | absorbs CollectionHeader                                        |
+| PlaylistArt      | 61    | ✕ →Artwork                                                                                                                                  | P3     |                                                                 |
+| PlaylistCard     | 23    | ✕ →MediaCard                                                                                                                                | P9     |                                                                 |
+| PlaylistForm     | 161   | ~ (CoverForm)                                                                                                                               | P11    | + SegmentedControl                                              |
+| SearchResultRow  | 78    | ✕ →ListRow                                                                                                                                  | P7     |                                                                 |
+| SectionHeading   | 32    | ~                                                                                                                                           | P10    | `count`, "view all"                                             |
+| Surface          | 17    | =                                                                                                                                           |        | (upload only; acceptable)                                       |
+| Textarea         | 28    | ~                                                                                                                                           | P11    | `field-control`                                                 |
+| TrackIndexCell   | 27    | ✕ →TrackList                                                                                                                                | P8     |                                                                 |
+| TrackMeta        | 14    | ✕ →TrackList                                                                                                                                | P8     |                                                                 |
+| TrackRow         | 27    | ✕ →TrackList                                                                                                                                | P8     |                                                                 |
+| TrackTable       | 79    | ✕ →TrackList                                                                                                                                | P8     |                                                                 |
+| TrackTitleCell   | 77    | → MediaIdentity                                                                                                                             | P7     | rename + generalize                                             |
+| **New**          |       | Artwork, Avatar, ListRow, MediaIdentity, TrackList, ContextMenu, PlayButton, ConfirmDialog, Slider, Logo, Chip, SegmentedControl, CoverForm |        |                                                                 |
 
-### `src/lib/components/` y `player/`
+### `src/lib/components/` and `player/`
 
-| Archivo             | Líneas | Veredicto | Parte | Motivo |
-| ------------------- | ------ | --------- | ----- | ------ |
-| AlbumContextMenu    | 119 | ✕ →ContextMenu | P6 | copia de TrackContextMenu |
-| TrackContextMenu    | 109 | ✕ →ContextMenu | P6 | |
-| MobileHeader        | 70  | ~ | P6/P12 | Avatar, Logo, sin wrapper duplicado |
-| Sidebar             | 125 | ~ | P7/P12 | `appNavLinks`, `ListRow` |
-| TabsBar             | 50  | ~ | P12 | `appNavLinks`, `glass-bar` |
-| TopBar              | 140 | ~ | P4/P12 | IconButton, Avatar, `searchHref` |
-| player/PlayerBar    | 28  | ~ | P12 | `glass-bar`, absorbe PlayerExtras |
-| player/PlayerDock   | 29  | ~ | P12 | z-token |
-| player/PlayerExtras | 22  | ✕ →PlayerBar | P12 | |
-| player/Queue        | 111 | ~ | P7 | `ListRow`, recetas, `pressable` |
-| player/SeekBar      | 48  | ✕ →Slider | P12 | |
-| player/TrackInfo    | 65  | ~ | P7 | `MediaIdentity`, IconButton pressed |
-| player/TransportControls | 75 | ~ | P4 | `PlayButton`, `IconButton pressed` |
-| player/VolumeControl| 52  | ✕ →Slider | P12 | |
+| File                     | Lines | Verdict        | Part   | Reason                              |
+| ------------------------ | ----- | -------------- | ------ | ----------------------------------- |
+| AlbumContextMenu         | 119   | ✕ →ContextMenu | P6     | copy of TrackContextMenu            |
+| TrackContextMenu         | 109   | ✕ →ContextMenu | P6     |                                     |
+| MobileHeader             | 70    | ~              | P6/P12 | Avatar, Logo, no duplicated wrapper |
+| Sidebar                  | 125   | ~              | P7/P12 | `appNavLinks`, `ListRow`            |
+| TabsBar                  | 50    | ~              | P12    | `appNavLinks`, `glass-bar`          |
+| TopBar                   | 140   | ~              | P4/P12 | IconButton, Avatar, `searchHref`    |
+| player/PlayerBar         | 28    | ~              | P12    | `glass-bar`, absorbs PlayerExtras   |
+| player/PlayerDock        | 29    | ~              | P12    | z-token                             |
+| player/PlayerExtras      | 22    | ✕ →PlayerBar   | P12    |                                     |
+| player/Queue             | 111   | ~              | P7     | `ListRow`, recipes, `pressable`     |
+| player/SeekBar           | 48    | ✕ →Slider      | P12    |                                     |
+| player/TrackInfo         | 65    | ~              | P7     | `MediaIdentity`, IconButton pressed |
+| player/TransportControls | 75    | ~              | P4     | `PlayButton`, `IconButton pressed`  |
+| player/VolumeControl     | 52    | ✕ →Slider      | P12    |                                     |
 
-### Rutas
+### Routes
 
-| Archivo | Líneas | Veredicto | Parte | Motivo |
-| ------- | ------ | --------- | ----- | ------ |
-| `+layout.svelte` | 142 | ~ | P2 | tokens SSR, fondos a utilidades, padding del dock |
-| `+page.svelte` (Inicio) | 466 | ~ | P0/P5/P7/P13 | 4 filas a mano, stats ×3, vacío ×2, `style=` |
-| `+error.svelte` | 16 | ~ | P10 | recetas, `max-w-prose-sm` |
-| `login/+page.svelte` | 50 | ~ | P12 | `Logo`, `max-w-cta` |
-| `(app)/explore/+page.svelte` | 602 | ~ | P13 | dividir datos/lógica; 4 grupos → each |
-| `(app)/upload/+page.svelte` | 288 | ~ | P11 | `ImageDropzone`, recetas |
-| `(app)/library/+page.svelte` | 108 | ~ | P8 | `TrackList` |
-| `(app)/liked/+page.svelte` | 123 | ~ | P0/P5/P8/P10 | imports muertos, `playAllOrToggle`, `TrackList` |
-| `(app)/mixes/[id]/+page.svelte` | 134 | ~ | P5/P8/P10 | menú, `TrackList`, `PageHeader` |
-| `(app)/albums/+page.svelte` | 74 | ~ | P9 | `MediaCard` + `grid-cards` |
-| `(app)/albums/[id]/+page.svelte` | 91 | ~ | P8/P10 | inline header/tablas, `ConfirmDialog` |
-| `albums/[id]/components/AlbumHeader` | 82 | ✕ (inline) | P10 | |
-| `albums/[id]/components/AlbumTrackTable` | 64 | ✕ (inline) | P8 | |
-| `albums/[id]/components/LibraryPicker` | 65 | ✕ (inline) | P8 | |
-| `(app)/playlists/+page.svelte` | 62 | ~ | P9 | |
-| `(app)/playlists/[id]/+page.svelte` | 95 | ~ | P8/P10 | |
-| `playlists/[id]/components/PlaylistHeader` | 62 | ✕ (inline) | P10 | |
-| `playlists/[id]/components/PlaylistTrackTable` | 71 | ✕ (inline) | P8 | |
-| `(app)/u/[id]/+page.svelte` | 97 | ~ | P3/P9/P10 | Avatar, grid |
-| `routes/layout.css` | 238 | ~ | P1 | todos los tokens y recetas |
+| File                                           | Lines | Verdict    | Part         | Reason                                                 |
+| ---------------------------------------------- | ----- | ---------- | ------------ | ------------------------------------------------------ |
+| `+layout.svelte`                               | 142   | ~          | P2           | SSR tokens, backgrounds to utilities, dock padding     |
+| `+page.svelte` (Home)                          | 466   | ~          | P0/P5/P7/P13 | 4 hand-rolled rows, stats ×3, empty state ×2, `style=` |
+| `+error.svelte`                                | 16    | ~          | P10          | recipes, `max-w-prose-sm`                              |
+| `login/+page.svelte`                           | 50    | ~          | P12          | `Logo`, `max-w-cta`                                    |
+| `(app)/explore/+page.svelte`                   | 602   | ~          | P13          | split data/logic; 4 groups → each                      |
+| `(app)/upload/+page.svelte`                    | 288   | ~          | P11          | `ImageDropzone`, recipes                               |
+| `(app)/library/+page.svelte`                   | 108   | ~          | P8           | `TrackList`                                            |
+| `(app)/liked/+page.svelte`                     | 123   | ~          | P0/P5/P8/P10 | dead imports, `playAllOrToggle`, `TrackList`           |
+| `(app)/mixes/[id]/+page.svelte`                | 134   | ~          | P5/P8/P10    | menu, `TrackList`, `PageHeader`                        |
+| `(app)/albums/+page.svelte`                    | 74    | ~          | P9           | `MediaCard` + `grid-cards`                             |
+| `(app)/albums/[id]/+page.svelte`               | 91    | ~          | P8/P10       | inline header/tables, `ConfirmDialog`                  |
+| `albums/[id]/components/AlbumHeader`           | 82    | ✕ (inline) | P10          |                                                        |
+| `albums/[id]/components/AlbumTrackTable`       | 64    | ✕ (inline) | P8           |                                                        |
+| `albums/[id]/components/LibraryPicker`         | 65    | ✕ (inline) | P8           |                                                        |
+| `(app)/playlists/+page.svelte`                 | 62    | ~          | P9           |                                                        |
+| `(app)/playlists/[id]/+page.svelte`            | 95    | ~          | P8/P10       |                                                        |
+| `playlists/[id]/components/PlaylistHeader`     | 62    | ✕ (inline) | P10          |                                                        |
+| `playlists/[id]/components/PlaylistTrackTable` | 71    | ✕ (inline) | P8           |                                                        |
+| `(app)/u/[id]/+page.svelte`                    | 97    | ~          | P3/P9/P10    | Avatar, grid                                           |
+| `routes/layout.css`                            | 238   | ~          | P1           | all tokens and recipes                                 |
 
-### `src/lib/` (cliente)
+### `src/lib/` (client)
 
-| Archivo | Veredicto | Parte | Motivo |
-| ------- | --------- | ----- | ------ |
-| `theme/theme.css` | ~ | P1/P2 | quitar duplicados de `tokens.ts`, añadir layout/z |
-| `theme/tokens.ts` | ~ | P2 | `tokensToCss`, sin `--mf-sidebar-bg` |
-| `theme/palette.ts`, `theme/color.ts`, `theme/mode.svelte.ts` | = | | (`mode` pierde el flash con P2) |
-| `tracks.ts` | ~ | P5 | quitar envoltorio `TrackTarget` + 8 accesores |
-| `recentlyPlayed.ts` | ~ | P5 | `toQueueItem` |
-| `player/player.svelte.ts` | ~ | P5 | helpers de cola, `toQueueItem`, renombrar `addToQueue` |
-| `player/liked.svelte.ts` | ~ | P5 | `toQueueItem` |
-| `player/queuePanel.svelte.ts`, `playlists.svelte.ts` | → `toggle.svelte.ts` | P5 | idénticos |
-| `format.ts` | ~ | P5/P9 | `plural`, `albumMeta`, `playlistMeta` |
-| `navigation.svelte.ts` | ~ | P5 | `searchHref`, `appNavLinks` |
-| `config.ts` | ~ | P6 | `MENU_WIDTH`, `SUBMENU_WIDTH` |
-| `mixes.ts`, `albums.ts`, `collections.ts`, `types.ts` | = | | |
-| `lib/server/**`, `+page.server.ts`, `routes/api/**`, `auth/**`, `hooks.server.ts` | fuera de alcance | | no contienen UI ni estilos |
+| File                                                                              | Verdict              | Part  | Reason                                            |
+| --------------------------------------------------------------------------------- | -------------------- | ----- | ------------------------------------------------- |
+| `theme/theme.css`                                                                 | ~                    | P1/P2 | remove `tokens.ts` duplicates, add layout/z       |
+| `theme/tokens.ts`                                                                 | ~                    | P2    | `tokensToCss`, no `--mf-sidebar-bg`               |
+| `theme/palette.ts`, `theme/color.ts`, `theme/mode.svelte.ts`                      | =                    |       | (`mode` loses the flash with P2)                  |
+| `tracks.ts`                                                                       | ~                    | P5    | remove the `TrackTarget` wrapper + 8 accessors    |
+| `recentlyPlayed.ts`                                                               | ~                    | P5    | `toQueueItem`                                     |
+| `player/player.svelte.ts`                                                         | ~                    | P5    | queue helpers, `toQueueItem`, rename `addToQueue` |
+| `player/liked.svelte.ts`                                                          | ~                    | P5    | `toQueueItem`                                     |
+| `player/queuePanel.svelte.ts`, `playlists.svelte.ts`                              | → `toggle.svelte.ts` | P5    | identical                                         |
+| `format.ts`                                                                       | ~                    | P5/P9 | `plural`, `albumMeta`, `playlistMeta`             |
+| `navigation.svelte.ts`                                                            | ~                    | P5    | `searchHref`, `appNavLinks`                       |
+| `config.ts`                                                                       | ~                    | P6    | `MENU_WIDTH`, `SUBMENU_WIDTH`                     |
+| `mixes.ts`, `albums.ts`, `collections.ts`, `types.ts`                             | =                    |       |                                                   |
+| `lib/server/**`, `+page.server.ts`, `routes/api/**`, `auth/**`, `hooks.server.ts` | out of scope         |       | no UI or styles                                   |
-- 
2.54.0


From dd1cb8a5d1e1bc333d73157e31937bcaa85ddbf1 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 16:08:44 +0200
Subject: [PATCH 14/50] Clean up backend and web-player leftovers

Remove dead scaffold/config cruft and stale references left over from
recent refactors: dotnet's WebApi.http template file, the AppSettings
PascalCase/Dockerfile workaround (renamed to appsettings.json to match
convention), empty directories left behind by the auth-route and
folder-structure moves, a stale ESLint ignore, and the now-fully-applied
frontend refactor plan doc.
---
 .gitignore                                    |   3 +
 backend/Hosts/Musify.Api/WebApi.http          |   6 -
 ...ment.json => appsettings.Development.json} |   0
 .../{AppSettings.json => appsettings.json}    |   0
 ...ment.json => appsettings.Development.json} |   0
 .../{AppSettings.json => appsettings.json}    |   0
 backend/Musify.Api.Dockerfile                 |   4 -
 backend/Musify.Worker.Dockerfile              |   3 -
 deploy/README.md                              |   3 -
 deploy/compose.yml                            |   2 +-
 docs/development.md                           |   6 +-
 docs/media-processing.md                      |   2 +-
 web-player/CLAUDE.md                          |   4 +-
 web-player/docs/frontend-refactor-plan.md     | 982 ------------------
 web-player/eslint.config.js                   |   8 +-
 web-player/scripts/check-tokens.mjs           |   2 +-
 16 files changed, 12 insertions(+), 1013 deletions(-)
 delete mode 100644 backend/Hosts/Musify.Api/WebApi.http
 rename backend/Hosts/Musify.Api/{AppSettings.Development.json => appsettings.Development.json} (100%)
 rename backend/Hosts/Musify.Api/{AppSettings.json => appsettings.json} (100%)
 rename backend/Hosts/Musify.Worker/{AppSettings.Development.json => appsettings.Development.json} (100%)
 rename backend/Hosts/Musify.Worker/{AppSettings.json => appsettings.json} (100%)
 delete mode 100644 web-player/docs/frontend-refactor-plan.md

diff --git a/.gitignore b/.gitignore
index 151e9d4..f17bdc8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,9 @@ obj/
 *.userosscache
 .vs/
 artifacts/
+TestResults/
+*.trx
+*.coverage
 
 # Rider / VS
 .idea/
diff --git a/backend/Hosts/Musify.Api/WebApi.http b/backend/Hosts/Musify.Api/WebApi.http
deleted file mode 100644
index 213749e..0000000
--- a/backend/Hosts/Musify.Api/WebApi.http
+++ /dev/null
@@ -1,6 +0,0 @@
-@WebApi_HostAddress = http://localhost:5111
-
-GET {{WebApi_HostAddress}}/weatherforecast/
-Accept: application/json
-
-###
diff --git a/backend/Hosts/Musify.Api/AppSettings.Development.json b/backend/Hosts/Musify.Api/appsettings.Development.json
similarity index 100%
rename from backend/Hosts/Musify.Api/AppSettings.Development.json
rename to backend/Hosts/Musify.Api/appsettings.Development.json
diff --git a/backend/Hosts/Musify.Api/AppSettings.json b/backend/Hosts/Musify.Api/appsettings.json
similarity index 100%
rename from backend/Hosts/Musify.Api/AppSettings.json
rename to backend/Hosts/Musify.Api/appsettings.json
diff --git a/backend/Hosts/Musify.Worker/AppSettings.Development.json b/backend/Hosts/Musify.Worker/appsettings.Development.json
similarity index 100%
rename from backend/Hosts/Musify.Worker/AppSettings.Development.json
rename to backend/Hosts/Musify.Worker/appsettings.Development.json
diff --git a/backend/Hosts/Musify.Worker/AppSettings.json b/backend/Hosts/Musify.Worker/appsettings.json
similarity index 100%
rename from backend/Hosts/Musify.Worker/AppSettings.json
rename to backend/Hosts/Musify.Worker/appsettings.json
diff --git a/backend/Musify.Api.Dockerfile b/backend/Musify.Api.Dockerfile
index f27651e..2d35b60 100644
--- a/backend/Musify.Api.Dockerfile
+++ b/backend/Musify.Api.Dockerfile
@@ -12,10 +12,6 @@ RUN dotnet restore Hosts/Musify.Api/Api.csproj
 
 COPY . .
 RUN dotnet publish Hosts/Musify.Api/Api.csproj -c Release -o /app --no-restore
-# Config files are AppSettings*.json (PascalCase); on case-sensitive Linux the host
-# looks for appsettings*.json. Add lowercase copies so they get loaded.
-RUN cp /app/AppSettings.json /app/appsettings.json \
-    && cp /app/AppSettings.Development.json /app/appsettings.Development.json
 
 FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS runtime
 WORKDIR /app
diff --git a/backend/Musify.Worker.Dockerfile b/backend/Musify.Worker.Dockerfile
index b254969..dad7085 100644
--- a/backend/Musify.Worker.Dockerfile
+++ b/backend/Musify.Worker.Dockerfile
@@ -11,9 +11,6 @@ RUN dotnet restore Hosts/Musify.Worker/Worker.csproj
 
 COPY . .
 RUN dotnet publish Hosts/Musify.Worker/Worker.csproj -c Release -o /app --no-restore
-# AppSettings*.json (PascalCase) -> lowercase copies for case-sensitive Linux.
-RUN cp /app/AppSettings.json /app/appsettings.json \
-    && cp /app/AppSettings.Development.json /app/appsettings.Development.json
 
 FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS runtime
 WORKDIR /app
diff --git a/deploy/README.md b/deploy/README.md
index cf08e32..3bbd1c0 100644
--- a/deploy/README.md
+++ b/deploy/README.md
@@ -180,9 +180,6 @@ and `web-player/Dockerfile`.
   the comments in `.env.example`).
 - **Zitadel** runs `start-from-init`, which is idempotent: the same command
   works on an empty volume and on an existing one.
-- **`AppSettings*.json` are PascalCase** in `Musify.Api` and `Musify.Worker`;
-  on case-sensitive Linux the host looks for `appsettings*.json`, so their
-  Dockerfiles create lowercase copies at publish time.
 - **Re-running `zitadel-init`, `seaweedfs-init` or `migrate`** is safe: they
   reuse the existing project/apps/bucket by name, and `migrate` is a normal
   `dotnet ef database update`, a no-op once the schema is current.
diff --git a/deploy/compose.yml b/deploy/compose.yml
index 3a055aa..c36778f 100644
--- a/deploy/compose.yml
+++ b/deploy/compose.yml
@@ -19,7 +19,7 @@
 # file, so the apps start with real values. See deploy/README.md.
 
 # Backend settings that are identical for the API and the Worker. ASP.NET Core
-# maps `__` to `:`, so these override the matching AppSettings.json sections.
+# maps `__` to `:`, so these override the matching appsettings.json sections.
 # POSTGRES_HOST / RABBITMQ_HOST / JAEGER_HOST differ between environments
 # (host.docker.internal in dev, the container name over infra-net in prod,
 # see .env.example / .env.prod.example), same as PUBLIC_AUTH_URL/S3_PUBLIC_URL
diff --git a/docs/development.md b/docs/development.md
index 3775245..9f9824b 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -134,10 +134,10 @@ omits the `<Error>` list when there are no errors, unlike AWS S3), and
 (load → modify → save) because it ran before EF had detected the pending
 changes.
 
-## Config (AppSettings)
+## Config (appsettings)
 
-Convention: `AppSettings.json` is the template, with empty or neutral
-values; `AppSettings.Development.json` has the real dev values; in Docker
+Convention: `appsettings.json` is the template, with empty or neutral
+values; `appsettings.Development.json` has the real dev values; in Docker
 everything is overridden with environment variables (`Section__Key`) from
 `deploy/compose.yml`. To run `Musify.Api` from the IDE, the `Authentication`
 values go into user-secrets (not the repo). Copy them from `deploy/.env`
diff --git a/docs/media-processing.md b/docs/media-processing.md
index 8de9e30..8ee9836 100644
--- a/docs/media-processing.md
+++ b/docs/media-processing.md
@@ -36,7 +36,7 @@ Grouped by area:
 
 ## What the Worker needs configured
 
-The Worker registers: storage (S3), transcoder (ffmpeg), pictures, the DB, the MassTransit consumers, and the upload-intent jobs. Its `AppSettings` needs the right sections: `Bucket` (= `webapi-storage`, same as the API), `PlayList`, `Track`, `MassTransit`, `AudioTranscoder`, `UploadIntent`, `Workers` (temp directory), `InfrastructureStorage`, `Database`.
+The Worker registers: storage (S3), transcoder (ffmpeg), pictures, the DB, the MassTransit consumers, and the upload-intent jobs. Its `appsettings` needs the right sections: `Bucket` (= `webapi-storage`, same as the API), `PlayList`, `Track`, `MassTransit`, `AudioTranscoder`, `UploadIntent`, `Workers` (temp directory), `InfrastructureStorage`, `Database`.
 
 ## Background jobs
 
diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index 114b991..448fbcf 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -46,14 +46,14 @@ npm run lint:tokens      # scripts/check-tokens.mjs, the design system guardrail
 
 ## Styles
 
-The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utility` recipes) and in `src/lib/theme/` (`theme.css` for the static neutrals, `tokens.ts` for the dynamic tokens that depend on the user's hue). `scripts/check-tokens.mjs` (run as `npm run lint:tokens`, part of `lint`) fails if `src/**/*.svelte` brings back what the refactor in `docs/frontend-refactor-plan.md` (parts P0 through P14) removed, so read that doc before adding an arbitrary value or a stock radius or size.
+The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utility` recipes) and in `src/lib/theme/` (`theme.css` for the static neutrals, `tokens.ts` for the dynamic tokens that depend on the user's hue). `scripts/check-tokens.mjs` (run as `npm run lint:tokens`, part of `lint`) fails on a stock radius, an `h-N w-N` pair, fractional quarter spacing, a literal hex/`rgba()`, or an arbitrary `-[…]` value outside its whitelist, so check that script before adding one.
 
 - **Radii:** always `rounded-tag/thumb/control/art/art-lg/panel/panel-lg` (or `rounded-full` for pills and circles). Never `rounded-sm/md/lg/xl/2xl/3xl` or a bare `rounded`.
 - **Square sizes:** use `size-*` instead of repeating `h-N w-N` (icons: `size-icon-xs/sm/md/lg/xl`; covers: `size-cover-xs` through `size-cover-hero`).
 - **Typography:** use the recipes `text-display-1/2/3/4`, `text-eyebrow`, `text-body`, `text-count`, with tracking through `tracking-display`/`tracking-eyebrow` rather than a loose `tracking-[…]`.
 - **Spacing:** stick to the Tailwind scale in `.5` steps and avoid quarters like `.25`/`.75`, unless the semantic token calls for it (for example `mb-4.5` in `SectionHeading`).
 - **Colors:** always use `--mf-*`/`text-*`/`bg-*`/`border-*` from `theme.css`/`tokens.ts`. Never a literal hex or `rgba()` inside a `.svelte` file; those literals only belong in `theme.css`/`tokens.ts` as the source of truth.
-- **Inline `style="…"` and arbitrary `-[…]` values:** only the ones whitelisted in section B.4 of `docs/frontend-refactor-plan.md` (the stagger variable `--i`, tile hue, menu position, dynamic widths and heights through `var(--mf-*)`, `text-[clamp(…)]`, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, and `vh` paddings for vertical centering). Everything else should become a token.
+- **Inline `style="…"` and arbitrary `-[…]` values:** only the ones whitelisted in `scripts/check-tokens.mjs` (the stagger variable `--i`, tile hue, menu position, progress width, `text-[clamp(…)]`, `leading-[…]` on login's display type, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, `my-`/`py-[Ndvh]` for vertical centering, `transition-[filter]` on genre tiles, and `bg-[image:var(--mf-*)]`). Everything else should become a token.
 - Reach for these base components before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
 - Known and accepted gap (documented in `scripts/check-tokens.mjs`): icon `strokeWidth={n}` isn't unified yet. There are 13 different values spread across almost every component, and migrating them to `stroke-thin/regular/bold` recipes safely would require visually confirming that `lucide-svelte` actually respects `stroke-width` through CSS, so that was left out of the last pass.
 
diff --git a/web-player/docs/frontend-refactor-plan.md b/web-player/docs/frontend-refactor-plan.md
deleted file mode 100644
index f79a551..0000000
--- a/web-player/docs/frontend-refactor-plan.md
+++ /dev/null
@@ -1,982 +0,0 @@
-# Plan: Frontend refactor and unification (web-player)
-
-> Work plan for agents/AI with limited context (~128k). Replaces
-> `design-system-refactor-plan.md` (whose content is now mostly applied).
-> Based on a full read of **every** client `.svelte`, `.css` and `.ts` file
-> in `web-player/src` (2026-09-18, branch `design-prot`).
-
-## How to use this document
-
-1. **Always read section A (Common context)**, it's short and every part assumes it.
-2. Pick **one part** (P0 through P14). Each part lists: objective, prerequisites, files
-   to read, tasks, the exact API of what gets created, a mapping table, and closing criteria.
-3. One part equals one commit/PR. Don't mix parts.
-4. If a part needs something from another part (say, a token or a helper) and it
-   **doesn't exist yet**, create it yourself following the spec in section B. These are
-   described with exact paths and APIs so any part can create them identically.
-5. When you finish a part, check its box in section D (Log).
-
-Recommended order (the arrows are **soft** dependencies, see point 4):
-
-```
-P0 → P1 → P2
-        ↘ P3 (Artwork/Avatar) ─┐
-        ↘ P4 (Buttons)  ───────┤
-        ↘ P5 (TS helpers) ─────┼→ P6 (Menus) → P7 (Rows) → P8 (Tables) → P9 (Cards)
-                               └→ P10 (Headers) → P11 (Forms) → P12 (Chrome) → P13 (Pages) → P14 (Final sweep)
-```
-
----
-
-## A. Common context (always read)
-
-### A.1 Project stack and rules (from `web-player/CLAUDE.md`)
-
-- SvelteKit 2 + **Svelte 5 runes** (`$props()` with `interface Props`, `$state`,
-  `$derived`, `$effect`; no `export let` or `$:`; `{#each}` always keyed).
-- **Tailwind 4**: there's no `tailwind.config.js`; the config lives in `src/routes/layout.css`
-  (`@theme`, `@utility`). Raw color tokens in `src/lib/theme/theme.css` (`--mf-*`),
-  hue-dependent dynamic tokens in `src/lib/theme/tokens.ts` (`buildThemeTokens`).
-- No comments in code unless essential.
-- Closing out each part: `npm run check` and `npm run lint` must be **clean** (from `web-player/`).
-- Icons: `@lucide/svelte/icons/<name>`.
-
-### A.2 Known gotchas (don't reintroduce them)
-
-1. **Hue-animated tokens** (`--mf-bg`, `--mf-elevated`, `--mf-panel-bg`, `--mf-bar-bg`,
-   `--mf-hairline`, `--mf-hero-bg`, `--mf-modal-glow`, `--mf-spotlight-bg`,
-   `--mf-logo-grad`, `--mf-cover-grad`, `--mf-accent*`, `--mf-ambient`) are applied as
-   an **inline style** on `<html>` from `+layout.svelte`. An override in
-   `:root[data-theme='light']` **doesn't win**: the light variant belongs in `buildThemeTokens()`.
-2. **Tailwind class conflicts**: never `class="bg-a {cond ? 'bg-b' : ''}"`. Always
-   mutually exclusive: `class={cond ? 'bg-b' : 'bg-a'}`. Overrides of a shared component's
-   base class go through a prop/variant, not `!important`.
-3. Text without a size class inherits the browser's 16px. All visible text needs a
-   typography recipe (see B.1.6).
-4. `--mf-ink` is "text on CTA" and inverts in light mode; `--mf-tile-shade`,
-   `--mf-cover-grad`, `--mf-liked-grad` are "artwork" (don't invert).
-5. Visual reference: **Home** (`src/routes/+page.svelte`). A refactor change shouldn't
-   change the look except where the part explicitly says so (the "Δ" column).
-
-### A.3 Verifying each part
-
-```sh
-cd web-player
-npm run check
-npm run lint
-```
-
-Visual (Browser pane, `.claude/launch.json` → `musify-web`; dev login credentials are in the
-project's memory): open each touched page **and** Home; test the active state (a track
-playing), hover, mobile (375px) and light mode (account menu → "White mode").
-
-### A.4 Measured baseline (to know if you're making progress)
-
-| Metric                                           | Today                                |
-| ------------------------------------------------ | ------------------------------------ |
-| `.svelte` components (lib + route `components/`) | 61                                   |
-| Client `.svelte`/`.css`/`.ts` lines              | ~8,700                               |
-| Arbitrary classes `x-[…]`                        | 44                                   |
-| Fractional spacing (`h-3.75`, `gap-2.75`…)       | ~190 occurrences, 60 distinct values |
-| Distinct radii used                              | 13 (6 tokens + 7 Tailwind defaults)  |
-| Distinct `strokeWidth` values                    | 13 values                            |
-| `style="…"` attributes                           | 24                                   |
-| Hand-rolled pluralizations `=== 1 ?`             | 15                                   |
-| `eslint` errors                                  | 2 (`liked/+page.svelte`)             |
-
-Overall goal: ~61 → ~45 components, −1,500/−2,000 lines, 0 arbitrary values outside an
-allow list, 1 scale per dimension.
-
----
-
-## B. Shared specs (single source of truth)
-
-Any part that needs something from here and it doesn't exist yet creates it **exactly like this**.
-
-### B.1 Tokens (in `src/routes/layout.css`, inside `@theme`)
-
-Tailwind 4 generates utilities from these namespaces: `--radius-*` → `rounded-*`,
-`--spacing-*` → `size-* w-* h-* p-* m-* gap-*`, `--container-*` → `max-w-*`,
-`--tracking-*` → `tracking-*`, `--leading-*` → `leading-*`.
-
-#### B.1.1 Radii (`--radius-*`)
-
-| Token              | Value       | What it's for                             |
-| ------------------ | ----------- | ----------------------------------------- |
-| `rounded-tag`      | `0.25rem`   | badges, mini cells (ExplicitBadge, index) |
-| `rounded-thumb`    | `0.5rem`    | covers ≤ 36px, logo                       |
-| `rounded-control`  | `0.625rem`  | inputs, rows, menu items, buttons         |
-| `rounded-art`      | `0.8125rem` | covers 42 to 88px, grid cards             |
-| `rounded-art-lg`   | `1.125rem`  | covers ≥ 136px, dropzones                 |
-| `rounded-panel`    | `1.125rem`  | containers, menus, modals, tiles          |
-| `rounded-panel-lg` | `1.375rem`  | hero, spotlight, "best match"             |
-| `rounded-full`     | (Tailwind)  | pills, avatars, round buttons             |
-
-Remove `--radius-art-round` (0 uses). Mapping of what exists today:
-
-| Today                   | px  | Uses | Becomes                                                  | Δ    |
-| ----------------------- | --- | ---- | -------------------------------------------------------- | ---- |
-| `rounded-sm`, `rounded` | 4   | 2    | `rounded-tag`                                            | 0    |
-| `rounded-md`            | 6   | 1    | `rounded-thumb`                                          | +2px |
-| `rounded-lg`            | 8   | 4    | `rounded-thumb`                                          | 0    |
-| `rounded-xl`            | 12  | 6    | `rounded-control`                                        | −2px |
-| `rounded-2xl`           | 16  | 8    | `rounded-art-lg` (artwork) / `rounded-panel` (container) | +2px |
-| `rounded-3xl`           | 24  | 1    | `rounded-panel-lg`                                       | −2px |
-
-#### B.1.2 Cover/artwork sizes (`--spacing-cover-*`)
-
-| Token           | Value            | Current uses it absorbs (Δ)                                                     |
-| --------------- | ---------------- | ------------------------------------------------------------------------------- |
-| `cover-xs`      | `2.25rem` (36)   | menu thumbs `h-9`; sidebar `h-8.5` (+2)                                         |
-| `cover-sm`      | `2.625rem` (42)  | table rows `h-10.5`; queue and "Popular" `h-10` (+2); mobile player `h-11` (−2) |
-| `cover-md`      | `3rem` (48)      | desktop player `md:h-12`                                                        |
-| `cover-lg`      | `3.5rem` (56)    | "Continue" `h-14`; search rows `h-13` (+4); Home playlist card `h-15.5` (−6)    |
-| `cover-xl`      | `5.5rem` (88)    | "Best match" `h-22`                                                             |
-| `cover-2xl`     | `8.5rem` (136)   | Home spotlight `h-34`                                                           |
-| `cover-hero`    | `9rem` (144)     | collection headers, dropzones, profile avatar                                   |
-| `cover-hero-sm` | `10.25rem` (164) | collection headers from `sm:` up                                                |
-
-Usage: `size-cover-sm` (Tailwind 4's `size-*` = `width`+`height`). **Never** pair `h-X w-X`:
-always use `size-*`.
-
-#### B.1.3 Icons (`--spacing-icon-*`) and stroke
-
-| Token     | Value      | Absorbs                                      |
-| --------- | ---------- | -------------------------------------------- |
-| `icon-xs` | `0.875rem` | `h-3.5` (14)                                 |
-| `icon-sm` | `1rem`     | `h-3.75` (15), `h-4` (16), `h-4.25` (17)     |
-| `icon-md` | `1.125rem` | `h-4.5` (18)                                 |
-| `icon-lg` | `1.25rem`  | `h-5` (20), `h-6` (24, mobile login)         |
-| `icon-xl` | `2.25rem`  | `h-9`/`h-10` (empty states, dropzone, Liked) |
-
-Stroke: in `layout.css`, outside `@theme`:
-
-```css
-@layer base {
-	svg.lucide {
-		stroke-width: 1.8;
-	}
-}
-@utility stroke-thin {
-	stroke-width: 1.3;
-}
-@utility stroke-regular {
-	stroke-width: 1.8;
-}
-@utility stroke-bold {
-	stroke-width: 2.5;
-}
-```
-
-The CSS property `stroke-width` beats the presentation attribute Lucide sets, so the
-`strokeWidth` prop stops doing anything: **remove it from every use**. Mapping:
-`1 to 1.4` → `stroke-thin`, `1.5 to 2` → (nothing, default), `2.5 to 3` → `stroke-bold`,
-`strokeWidth={0}` + `fill` → the `stroke-0` class. Verify in the browser (DevTools →
-Computed `stroke-width`) that the default applies before migrating in bulk.
-
-#### B.1.4 Widths (`--container-*`) and layout
-
-| Token            | Value   | Absorbs                                                                          |
-| ---------------- | ------- | -------------------------------------------------------------------------------- |
-| `max-w-prose-sm` | `26rem` | `max-w-105` (error), `max-w-108` (hero p), `max-w-110`, `max-w-115` (no results) |
-| `max-w-hero`     | `34rem` | `max-w-135` (hero, seekbar)                                                      |
-| `max-w-search`   | `30rem` | `max-w-120` (TopBar search box)                                                  |
-| `max-w-cta`      | `20rem` | `max-w-80` (login buttons)                                                       |
-
-Already exist and stay in `theme.css`: `--mf-sidebar-w`, `--mf-queue-w`, `--mf-nav-h`,
-`--mf-player-h`, `--mf-safe-b`. Add:
-
-```css
---mf-player-side-w: 16rem; /* w-64 from PlayerBar/PlayerExtras */
---mf-menu-w: 15rem; /* w-60 for context menus (= MENU_WIDTH 240) */
---mf-submenu-w: 16rem; /* w-64 (= SUBMENU_WIDTH 256) */
---mf-range-h: 3.5px; /* progress bar and volume */
---mf-range-thumb: 11px;
---mf-volume-w: 84px;
-```
-
-The TS constants `MENU_WIDTH`/`SUBMENU_WIDTH` (currently duplicated in `TrackContextMenu`
-and `AlbumContextMenu`) move to `src/lib/config.ts`. No comment needed, the name speaks for itself.
-
-#### B.1.5 Layers (`z-index`)
-
-In `theme.css`'s `:root`: `--z-raised: 10; --z-sticky: 20; --z-backdrop: 30; --z-menu: 40;
---z-submenu: 50; --z-modal: 60; --z-grain: 80;`. Usage: `z-(--z-menu)`. Maps 1:1 to the
-current values (`z-10`, `z-20`, `z-30`, `z-40`, `z-50`, `z-[60]`, `body::after` 80). Note:
-`MobileHeader` and `PlayerDock` use `z-40` but they're "sticky", not menus, so they get
-`--z-sticky` (verify the account menu still sits above the header: menu 40 > sticky 20).
-
-#### B.1.6 Typography (`@utility` recipes in `layout.css`)
-
-Type scale stays Tailwind's (`text-xs` through `text-4xl`), **no arbitrary sizes**.
-Add to `@theme`: `--tracking-display: -0.02em; --tracking-eyebrow: 0.1em;
---leading-body: 1.65;`. Recipes (color is **not** part of the recipe, it's added separately):
-
-```css
-@utility text-display-1 {
-	@apply font-display text-3xl font-medium tracking-tight sm:text-4xl;
-}
-@utility text-display-2 {
-	@apply font-display text-2xl font-medium tracking-tight;
-}
-@utility text-display-3 {
-	@apply font-display text-xl font-medium tracking-display;
-}
-@utility text-display-4 {
-	@apply font-display text-lg font-medium tracking-tight;
-}
-@utility text-eyebrow {
-	@apply text-xs font-medium tracking-widest uppercase;
-}
-@utility text-body {
-	@apply text-sm leading-body;
-}
-@utility text-count {
-	@apply text-xs tabular-nums;
-}
-```
-
-> If `@apply` with an `sm:` variant doesn't compile inside `@utility`, use
-> `@media (width >= 40rem) { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }`
-> the way `page-x` does.
-
-Mapping of what exists today:
-
-| Current pattern                                                                                                                                    | Recipe                               |
-| -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
-| `font-display text-3xl … sm:text-4xl` (PageHeader, CollectionHeader, Home hero, search h1 `text-2xl sm:text-3xl font-semibold tracking-[-0.03em]`) | `text-display-1` (Δ search: +1 step) |
-| `font-display text-2xl` (Home stats, spotlight title, "Uploaded!")                                                                                 | `text-display-2`                     |
-| `font-display text-xl … tracking-[-0.02em]` (Modal, EmptyState, +error, "No results", delete dialogs)                                              | `text-display-3` (all `font-medium`) |
-| `font-display text-lg` (SectionHeading, "Best match", Queue "Up next" `text-base`)                                                                 | `text-display-4`                     |
-| `text-xs font-medium tracking-widest uppercase` (plus variants `tracking-[0.14em]`, `[0.16em]`, `tracking-wider`, `text-sm font-semibold`)         | `text-eyebrow`                       |
-| `text-sm leading-[1.65] text-fg-2`                                                                                                                 | `text-body text-fg-2`                |
-| `text-xs text-muted tabular-nums`                                                                                                                  | `text-count text-muted`              |
-| `tracking-[-0.01em]` (MixTile)                                                                                                                     | remove                               |
-
-#### B.1.7 Surface and motion recipes (`@utility` in `layout.css`)
-
-```css
-@utility theme-transition {
-	transition: background 0.5s ease-out;
-} /* 8× transition-[background] duration-500 */
-@utility glass-bar {
-	/* PlayerBar ×2, TabsBar */
-	background-image: var(--mf-bar-bg);
-	border-top: 1px solid var(--mf-hairline);
-	backdrop-filter: blur(24px);
-	transition: background 0.5s ease-out;
-}
-@utility grid-cards {
-	/* MediaGrid default: 150/165 */
-	display: grid;
-	gap: --spacing(3);
-	grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
-	@media (width >= 40rem) {
-		gap: --spacing(4);
-		grid-template-columns: repeat(auto-fill, minmax(10.3125rem, 1fr));
-	}
-}
-@utility grid-cards-lg {
-	/* /playlists and /u/[id]: 180/210 */
-	display: grid;
-	gap: --spacing(3);
-	grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
-	@media (width >= 40rem) {
-		gap: --spacing(4);
-		grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr));
-	}
-}
-@utility grid-tiles {
-	/* Home mixes: 164 */
-	display: grid;
-	gap: --spacing(5);
-	grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr));
-}
-@utility grid-wide {
-	/* Home playlists (258) and genres (268) → 16.5rem, Δ ±6px */
-	display: grid;
-	gap: --spacing(3.5);
-	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
-}
-```
-
-`.glass-panel` already exists; `Modal` should use it instead of its duplicated inline `style=`.
-
-Stagger (replaces the 5 `style="animation-delay:…"` with 40 **or** 45ms):
-
-```css
-.animate-enter {
-	animation-delay: calc(min(var(--i, 0), 10) * 45ms);
-}
-```
-
-Usage: `style="--i:{i}"`. The only `style=` allowed alongside the ones in B.4.
-
-#### B.1.8 Colors: cleanup
-
-- Delete unused utilities: `--color-accent-dim`, `--color-accent-glow`,
-  `--color-accent-hair`, `--color-accent-line`, `--color-accent-muted` (0 uses as a
-  class; `--mf-accent-dim` is used in `::selection`, so that variable stays).
-- `--color-on-accent` is an alias of `--mf-on-art` (same as `--color-on-art`), delete it and
-  use `on-art`. `--color-hover` = `--mf-surface-2` (same as `surface-2`), keep
-  only `hover` as the hover semantic and leave `surface-2` for resting-state backgrounds.
-- `--mf-sidebar-bg` isn't used by any component (Sidebar uses `bg-bg`), delete it from
-  `theme.css` and from `buildThemeTokens`.
-- Button: `--mf-btn-bg` = `--mf-surface-2`; `--mf-btn-secondary-bg` only differs in light
-  mode. Expose `--color-btn`, `--color-btn-hover`, `--color-btn-glass`,
-  `--color-btn-glass-hover` in `@theme` and remove the `bg-[var(--mf-btn-…)]` from `Button.svelte`.
-- Scrollbar: `rgba(255,255,255,.18/.32)` hardcoded in `layout.css` (broken in light mode) →
-  tokens `--mf-scrollbar`, `--mf-scrollbar-hover` with a variant in `:root[data-theme='light']`.
-- `MixTile`: `to-black/42`, `bg-ink/76`, `border-on-art/12` → `to-scrim/40`, `PlayButton`
-  recipe (B.3).
-
-### B.2 TypeScript helpers (single source of truth)
-
-| File (new)                                 | API                                                                                                            | Replaces                                                                                                                                                    |
-| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `src/lib/actions/pressable.ts`             | `pressable(node, fn)` → adds `role="button"`, `tabindex=0`, click + Enter/Space                                | 7 copies of `onkeydown` Enter/Space (Home ×5, Queue, TrackTitleCell)                                                                                        |
-| `src/lib/actions/clickOutside.ts`          | `clickOutside(node, fn)`                                                                                       | `onDocumentClick` from `AccountMenu`                                                                                                                        |
-| `src/lib/toggle.svelte.ts`                 | `createToggle(initial=false)` → `{ get open, show(), close(), toggle() }`                                      | `playlists.svelte.ts` and `player/queuePanel.svelte.ts` (identical)                                                                                         |
-| `src/lib/format.ts` (extend)               | `plural(n, one, many)` → `"1 song"`; `fmtCount(n,'song','songs')`; **always lowercase**                        | 15 hand-rolled pluralizations, with inconsistent casing ("Song"/"song")                                                                                     |
-| `src/lib/navigation.svelte.ts` (extend)    | `searchHref(q)`; `appNavLinks(user, counts?)` → `{href,label,icon,count?,primary:boolean}[]`                   | `buildHref` in TopBar and explore; Sidebar and TabsBar link lists                                                                                           |
-| `src/lib/player/player.svelte.ts` (extend) | `isQueueCurrent(items)`, `playAllOrToggle(items)`, `playShuffled(items)`; rename `addToQueue` → `playNextItem` | `playAll`/`isCurrentQueue` in album, playlist, liked, mixes, Home spotlight (5 copies)                                                                      |
-| `src/lib/player/player.svelte.ts`          | single `toQueueItem(track)` (normalizes `duration`/`listensCount` to `number`)                                 | hand-rolled mappings in `recentlyPlayed.ts` (×2), `liked.svelte.ts` (×2), `liked/+page`, `tracks.ts#targetForQueueItem` and the scattered `Number(…)` calls |
-| `src/lib/menus.svelte.ts`                  | `createTrackMenu()` → `{ state, open(e, track), close(), playNext() }`                                         | context menu state + handler in Home, Explore, Mix                                                                                                          |
-
-### B.3 New components (API)
-
-| Component (`$lib/components/ui/`) | Props                                                                                                                                                                                                                                                           | Replaces / absorbs                                                                                                                                                                                               |
-| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Artwork.svelte`                  | `src?`, `trackIds?: (string\|number)[]`, `size: 'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'hero'`, `shape?: 'auto'\|'round'`, `imageSize?: 'small'\|'medium'\|'large'` (auto from `size`), `fallback?: 'music'\|'gradient'\|'none'`, `class?`, `children?` (overlay) | `Cover`, `PlaylistArt`, `MixArt`; radius picked automatically by size (xs→thumb, sm to xl→art/control, 2xl/hero→art-lg). Priority: `src` → mosaic if ≥4 `trackIds` → first cover → fallback. A single `onerror`. |
-| `Avatar.svelte`                   | `name`, `src?`, `size: 'sm'\|'md'\|'lg'\|'hero'`, `class?`                                                                                                                                                                                                      | initials/image in TopBar, MobileHeader, Explore (×2), `ArtistAvatar`                                                                                                                                             |
-| `ListRow.svelte`                  | `href?` \| `onclick?`, `oncontextmenu?`, `active?`, `size?: 'sm'\|'md'\|'lg'`, `title`, `subtitle?`, `subtitleHref?`, `explicit?`, `meta?`, `leading?: Snippet`, `art: Snippet<[string]>` \| artwork props, `trailing?: Snippet`                                | `SearchResultRow` + 7 hand-rolled rows (see P7)                                                                                                                                                                  |
-| `MediaIdentity.svelte`            | `title`, `subtitle?`, `subtitleHref?`, `explicit?`, `active?`, `art?: Snippet` \| `artwork` props, `titleClass?`                                                                                                                                                | `TrackTitleCell` (renamed and generalized) and the `player/TrackInfo` block                                                                                                                                      |
-| `TrackList.svelte`                | `tracks: TrackLike[]`, `columns?: ('album'\|'added'\|'uploaded'\|'plays')[]`, `index?`, `onPlay(i)`, `rowAction?: {action, icon, label}` \| `rowActionSnippet?`, `oncontextmenu?(e, track)`                                                                     | `TrackTable`+`TrackRow`+`TrackIndexCell`+`TrackMeta` and the 6 tables (P8)                                                                                                                                       |
-| `ContextMenu.svelte`              | `x`, `y`, `openLeft`, `onClose`, `items: {icon,label,onclick}[]`, `playlistAction?: {action: string, fields: Record<string,string>, label}`, `playlists`                                                                                                        | `TrackContextMenu` + `AlbumContextMenu` (90% identical)                                                                                                                                                          |
-| `PlayButton.svelte`               | `playing?`, `size: 'sm'\|'md'\|'lg'`, `variant: 'strong'\|'glass'`, `label`, `onclick?`, `as?: 'button'\|'span'`                                                                                                                                                | play button in TransportControls, "Best match", MixTile overlay                                                                                                                                                  |
-| `ConfirmDialog.svelte`            | `open`, `onClose`, `title`, `description`, `confirmLabel`, `action` (form POST)                                                                                                                                                                                 | 2 delete modals with different styles                                                                                                                                                                            |
-| `Slider.svelte`                   | `value`, `max`, `label`, `oninput`, `variant: 'seek'\|'volume'`                                                                                                                                                                                                 | `SeekBar` (click-only) + `VolumeControl` (own `<style>`)                                                                                                                                                         |
-| `Logo.svelte`                     | `size: 'sm'\|'lg'`                                                                                                                                                                                                                                              | logo in Sidebar (text only), MobileHeader, login                                                                                                                                                                 |
-| `Chip.svelte`                     | `selected?`, `count?`, `href?`\|`onclick?`                                                                                                                                                                                                                      | filter chips and suggested genre chips in Explore                                                                                                                                                                |
-
-### B.4 Allow list for `style=` and arbitrary values (after the refactor)
-
-Allowed: `style="--i:{i}"` (stagger), per-hue tile gradients in Explore
-(`--tile-hue`), progress width (`width:{pct}%`), menu position (`left/top`).
-Allowed arbitrary values: `text-[clamp(…)]` on login, `grid-cols-[auto_1fr]`,
-`max-h-[85dvh]`. Everything else becomes a token.
-
----
-
-## C. Parts
-
-### P0: Baseline and loose bugs (independent, ~30 min)
-
-**Objective:** get `lint` green and fix detected bugs that don't require a refactor.
-
-Tasks:
-
-1. `src/routes/(app)/liked/+page.svelte`: remove the `Play` and `Pause` imports (eslint errors).
-2. `src/lib/components/ui/MediaCard.svelte`: the title has no size class (inherits 16px) →
-   `text-sm` (same as `MixTile`).
-3. `src/routes/+page.svelte`, spotlight rows: `hover:bg-hover … {cond ? 'bg-accent-tint' : ''}`
-   → make it mutually exclusive (`{cond ? 'bg-accent-tint' : 'hover:bg-hover'}`), same as the other rows.
-4. `src/routes/(app)/albums/[id]/+page.svelte` delete modal: `text-base text-fg-3` →
-   `text-sm leading-[1.65] text-fg-2` and a title matching the playlist one (will be unified in P10).
-5. `Sidebar.svelte` (`+` button) and `Queue.svelte` (close): remove the useless `text-base`.
-6. Delete `src/lib/components/ui/Badge.svelte` (0 importers).
-7. `Button.svelte`: `primary` and `secondary` are the **same** class. Don't change the look;
-   just leave `const variants = { primary: subtle, secondary: subtle, … }` with a single
-   `subtle`, and note in D that P4 will decide whether `primary` should be differentiated
-   (**product decision, ask the user**).
-
-Closing: `npm run lint` 0 errors.
-
----
-
-### P1: Base tokens (prerequisite for P3 through P14)
-
-**Objective:** create all of B.1 **additively** (without migrating components yet, except
-where noted). Nothing should change visually after this part.
-
-Read: `src/routes/layout.css`, `src/lib/theme/theme.css`, `src/lib/theme/tokens.ts`.
-
-Tasks:
-
-1. Add to `@theme`: radii B.1.1 (and delete `--radius-art-round`), `--spacing-cover-*`
-   B.1.2, `--spacing-icon-*` B.1.3, `--container-*` B.1.4, `--tracking-*`/`--leading-*`
-   B.1.6, `--color-btn*` B.1.8.
-2. Add to `theme.css`'s `:root`: layout variables from B.1.4 and z-index from B.1.5.
-3. Add the `@utility` recipes from B.1.3 (stroke), B.1.6 (typography), B.1.7 (surfaces, grids);
-   stagger in `.animate-enter`.
-4. Move the scrollbar to tokens with a light variant (B.1.8).
-5. Delete unused color utilities and `--mf-sidebar-bg` (B.1.8). Before deleting each
-   one: `grep -rn "<name>" src` = 0.
-6. Create a temporary, **uncommitted** test page, or use DevTools, to confirm
-   `size-cover-sm`, `rounded-thumb`, `max-w-hero`, `text-display-1`, `z-(--z-menu)`
-   and `stroke-thin` generate CSS (Tailwind 4 only generates what it sees used: test with a
-   class on a component and revert).
-
-Closing: check+lint; before/after screenshot of Home identical.
-
----
-
-### P2: Theme, single source of truth + no flash in light mode
-
-**Objective:** eliminate the `theme.css` ↔ `tokens.ts` duplication and the dark flash when
-loading with light mode saved.
-
-Findings:
-
-- The default values of the ~15 dynamic tokens are written **twice**: in
-  `theme.css` (`:root`, hue 145) and in `buildThemeTokens()`. The light block in
-  `theme.css` repeats `--mf-bg`, `--mf-elevated`, `--mf-panel-bg`, `--mf-bar-bg`,
-  `--mf-hairline`, `--mf-hero-bg`, `--mf-spotlight-bg`, `--mf-modal-glow`, which
-  `tokens.ts` then overrides inline anyway.
-- `mode.svelte.ts` only applies `data-theme` after hydration, causing a dark flash.
-
-Tasks:
-
-1. `src/app.html`: add an inline `<head>` script that reads `localStorage['musify.theme']`
-   and sets `document.documentElement.dataset.theme` before the first paint (try/catch).
-2. `+layout.svelte`: in `<svelte:head>`, emit
-   `<style>:root{…buildThemeTokens(ACCENT_HUE,'dark')}:root[data-theme=light]{…buildThemeTokens(ACCENT_HUE,'light')}</style>`
-   (serialized with a `tokensToCss(tokens)` helper in `tokens.ts`).
-3. Delete from `theme.css` every token that `buildThemeTokens` generates (dark and light).
-   `theme.css` is left with only fixed neutrals, surfaces, text, layout and z-index.
-4. `+layout.svelte`: the two background `div`s with `style=` → `@utility app-backdrop` /
-   `app-vignette` in `layout.css`. The `main` with an inline `padding-bottom: calc(…)` →
-   a class using `--mf-dock-h`, activated via `data-has-track` on `main` itself.
-
-Closing: with light mode saved, a hard reload shows no flash; track changes still animate
-the hue; check+lint.
-
----
-
-### P3: `Artwork` and `Avatar` (unified artwork)
-
-**Objective:** a single cover component and a single avatar component.
-
-Findings:
-
-- `Cover`, `PlaylistArt` and `MixArt` implement the same cascade (image → 2×2 mosaic →
-  first cover → placeholder). `MixArt` is basically `PlaylistArt` with
-  `trackIds = items.map(i => i.trackId)`.
-- `AlbumCard` passes the **album id** as `trackId` to `Cover` just to be able to use `src`
-  (a hack).
-- "Image or initial" avatars are reimplemented in `TopBar`, `MobileHeader`, Explore (best
-  match + user row) and `ArtistAvatar` (with a ring).
-- Each usage picks its own radius (`rounded-lg`, `rounded-xl`, `rounded-2xl`,
-  `rounded-control`, `rounded-art-lg`…) and its own size (`h-8.5`, `h-9`, `h-10`, `h-10.5`,
-  `h-11 md:h-12`, `h-13`, `h-14`, `h-15.5`, `h-22`, `h-34`, `h-36 sm:h-41`).
-
-Tasks:
-
-1. Create `Artwork.svelte` and `Avatar.svelte` per B.3 using tokens B.1.1/B.1.2.
-   `size` drives both dimension **and** radius; `class` is only for layout (`shrink-0`, margins).
-2. Migrate **every** usage (search for `Cover`, `PlaylistArt`, `MixArt`, `ArtistAvatar`,
-   `user.picture`, `profilePictureUrl`), applying the B.1.2 table.
-3. `ArtistAvatar`: on `u/[id]/+page.svelte`, use `<Avatar size="hero">` (the name is already
-   shown by the header; the label under the avatar was redundant, **visible Δ**, confirm this).
-4. Delete `Cover.svelte`, `PlaylistArt.svelte`, `MixArt.svelte`, `ArtistAvatar.svelte`.
-
-Closing: `grep -rn "Cover\b\|PlaylistArt\|MixArt\|ArtistAvatar" src` only matches inside
-`Artwork`; visual check on Home, Explore (search), Sidebar, Queue, player, headers.
-
----
-
-### P4: Buttons, `Button`, `IconButton`, `PlayButton`
-
-**Objective:** no `<button>` left hand-styled.
-
-Findings (hand-made buttons): TopBar back/forward (circles `h-7.5`), clear
-search, login (`bg-accent-soft rounded-full`), MobileHeader login, Sidebar `+` ×2, Queue
-close/"Clear", PlayerExtras queue, TransportControls (shuffle, prev, play, next, repeat),
-TrackInfo heart, "Best match" (circle `h-11.5`), MixTile overlay (`h-9.5`),
-`BackLink`. Overrides with `!`: Home `!bg-cta-strong !text-ink hover:!brightness-95` and
-`!font-normal`.
-
-Tasks:
-
-1. `Button.svelte`: variants `subtle` (today primary/secondary), `glass` (today
-   `secondaryOnGlow`), `accent`, `strong` (cta-strong/ink, replaces the `!` overrides), `danger`.
-   Keep the `primary`/`secondary` aliases only if P0 didn't land a decision. Radius →
-   `rounded-control`. Remove the need for `!font-normal` (normal weight in `glass`, or a
-   `weight` prop).
-2. `IconButton.svelte`: add `shape: 'square'|'round'`, `size: 'xs'|'sm'|'md'|'lg'`,
-   `tone: 'muted'|'subtle'|'plain'`, `pressed?: boolean` (→ `aria-pressed` + `text-accent`),
-   `href?`, `surface?: boolean` (`surface-2` background). Icons with `size-icon-*`.
-3. Create `PlayButton.svelte` (B.3); play/pause SVG icons from `TransportControls` move
-   into it (one single place for those `<svg>`s).
-4. Migrate all listed buttons. `TopBar` "forward" is a disabled decorative `<span>` and
-   `PlayerExtras` has a decorative `AlignJustify` icon with no function:
-   **ask** whether to remove them (visually dead code) or keep them for fidelity to
-   the prototype.
-
-Closing: `grep -rn "<button" src | grep -v "ui/\(Button\|IconButton\|PlayButton\|Chip\|ListRow\)"`
-→ only justified cases remain (dropzones, segmented control).
-
----
-
-### P5: TypeScript helpers
-
-**Objective:** create B.2 and migrate its usages (logic, not styles).
-
-Tasks:
-
-1. Create `actions/pressable.ts`, `actions/clickOutside.ts`, `toggle.svelte.ts`.
-   `createPlaylistModal` and `queuePanel` → `createToggle()`; delete the two old files
-   or reduce them to `export const queuePanel = createToggle()`.
-2. `format.ts`: `plural()`; migrate the 15 hand-rolled pluralizations (`grep -rn "=== 1 ?" src`).
-   Unify to lowercase ("3 songs"), **visible Δ** on Playlists/Home/liked.
-3. `player.svelte.ts`: `toQueueItem`, `isQueueCurrent`, `playAllOrToggle`,
-   `playShuffled`; rename `addToQueue` → `playNextItem` (the current name is confusing:
-   it inserts next, not at the end). Migrate album, playlist, liked, mixes, Home.
-4. `recentlyPlayed.ts` and `liked.svelte.ts`: use `toQueueItem`.
-5. `tracks.ts`: the `TrackTarget = { track }` wrapper plus 8 accessors (`targetTitle`,
-   `targetArtist`, …) doesn't add anything. Replace with the `ApiTrackLike` object directly
-   and delete the accessors; keep only `isCurrent(track)` if needed. (This touches Home,
-   Explore, Mix, menus: do it in this part so there's no mix of styles left behind.)
-6. `navigation.svelte.ts`: `searchHref`, `appNavLinks`.
-7. `menus.svelte.ts`: `createTrackMenu()`; migrate Home, Explore, Mix.
-
-Closing: check+lint; reproduce from album, playlist, liked, mix, spotlight; the
-"Play next" context menu action still works.
-
----
-
-### P6: Menus, `ContextMenu` + `AccountMenu` + `GlassMenu`
-
-**Objective:** a single context menu.
-
-Findings: `TrackContextMenu` (109 lines) and `AlbumContextMenu` (119) are copies:
-same positioning function with the same constants, same backdrop, same Escape handling,
-same "Add to playlist" submenu with `<form use:enhance>`; only the items and hidden
-fields differ. Their items hand-reimplement `MenuItem`'s classes (with
-`strokeWidth={2}` instead of `1.8`). The playlist item reimplements `ListRow`.
-
-Tasks:
-
-1. Create `ContextMenu.svelte` (B.3) using `GlassMenu` + `MenuItem` + `Artwork size="xs"`
-   and widths `--mf-menu-w`/`--mf-submenu-w`; export `contextMenuPosition(event)` from
-   the module using `MENU_WIDTH`/`SUBMENU_WIDTH` from `config.ts`.
-2. Replace usages in Home, Explore (track and album), Mix. Delete the two old menus.
-3. `AccountMenu`: use `clickOutside`; remove the duplicated `div.relative` wrapper that
-   `TopBar`/`MobileHeader` put around it; `panelClass` → `width: 'sm'|'md'` prop.
-4. Add Escape support to `AccountMenu` (currently it doesn't close on Escape, an a11y improvement).
-
-Closing: track and album menus in Explore, submenu opens to the left near the edge,
-mobile (submenu below), Escape closes it.
-
----
-
-### P7: Rows, `ListRow` + `MediaIdentity` + `EqBars`
-
-**Objective:** a single compact row for every list that isn't a table.
-
-Rows reimplemented today (all of them: art + title + subtitle + meta + active state):
-
-| Where                                 | Size     |
-| ------------------------------------- | -------- |
-| `SearchResultRow` (Explore ×4 groups) | lg       |
-| Home "Continue listening" (card)      | lg, card |
-| Home "Popular" (index/EQ + meta)      | sm       |
-| Home spotlight (index, no art)        | sm       |
-| Home "Your playlists" (card)          | lg, card |
-| `Queue` "Now playing" + "Up next"     | sm       |
-| `Sidebar` playlists                   | xs       |
-| `ContextMenu` playlist items          | xs       |
-
-Tasks:
-
-1. Rename/generalize `TrackTitleCell` → `MediaIdentity` (B.3). Use it in
-   `player/TrackInfo` (replacing its cover+title+artist block).
-2. Create `ListRow` (B.3) on top of `MediaIdentity` + `pressable`; `card` variant = padding
-   `p-2.25 pr-3.5 rounded-art` (Continue/Your playlists).
-3. `NowPlaying` is basically `EqBars` with an overlay: add an `overlay` prop to `EqBars`
-   (background `scrim/45`, `on-art` color) and delete `NowPlaying`.
-4. Migrate every row in the table above. Delete `SearchResultRow`.
-
-Closing: Home, Explore, Queue, Sidebar unchanged visually except for the B.1.2 Δ; keyboard
-(Tab + Enter) plays from every row.
-
----
-
-### P8: Track tables, `TrackList`
-
-**Objective:** declarative tables; delete 3 cells and 3 route components.
-
-Findings:
-
-- 6 tables (`library`, `liked`, `mixes/[id]`, `AlbumTrackTable`, `PlaylistTrackTable`,
-  `LibraryPicker`) repeat: `{@const active}`, `TrackIndexCell`, `TrackTitleCell`, N
-  `TrackMeta`s, and a `<form method=POST use:enhance><input hidden trackId><IconButton revealOnHover>`.
-- Column widths passed down from each page are **inconsistent**: "Plays" is `106px` in
-  some places and `100px` in others.
-- The "Album" column **always shows a placeholder dash**: it's a stand-in with no real data.
-  **Decision needed**: remove it (recommended) or leave it in the preset.
-
-Tasks:
-
-1. Create `TrackList.svelte` (B.3) with column presets in the module itself:
-   `{ album: {label:'Album', width:'76px'}, added: {'Added','124px'}, uploaded: {'Uploaded','124px'}, plays: {'Plays','104px'} }`
-   and fixed columns (`index 32px/28px`, title `minmax(180px,1fr)/minmax(120px,1fr)`,
-   duration `104px/52px`, action `36px/32px`) as module constants.
-2. `rowAction={{ action: '?/removeTrack', icon: X, label: 'Remove from playlist' }}`
-   generates the form+IconButton; for liked (`onclick`), accept `rowAction.onclick`.
-3. Migrate the 6 tables; inline `AlbumTrackTable`, `PlaylistTrackTable`, `LibraryPicker`
-   into their pages and delete them. Delete `TrackRow`, `TrackIndexCell`, `TrackMeta`,
-   `TrackTable`.
-4. `LibraryPicker` uses the `NowPlaying` overlay instead of an index: `TrackList` with
-   `index={false}` shows the EQ over the art (via `Artwork` children).
-
-Closing: all 6 pages; hover reveals the action; the active track shows the EQ; mobile hides meta.
-
----
-
-### P9: Cards and grids
-
-**Objective:** one card, zero wrappers.
-
-Findings: `AlbumCard` and `PlaylistCard` only build the subtitle and pick the art;
-`MixTile` is a `MediaCard` with a play overlay and different typography; `MediaGrid` is a
-`<div>` with inline variables; Home (mixes 164px, playlists 258px) and Explore (genres
-268px) each write their own `grid-cols-[repeat(auto-fill,minmax(…))]`.
-
-Tasks:
-
-1. `MediaCard`: props `href`, `title`, `subtitle?`, `onPlay?` (`PlayButton variant="glass"`
-   overlay), `art` snippet **or** `Artwork` props, `oncontextmenu?`, `index`.
-   Fixed typography (`text-sm text-fg` / `text-xs text-fg-3`).
-2. Helpers in `format.ts`: `albumMeta(album)`, `playlistMeta(playlist)`.
-3. Replace `AlbumCard`, `PlaylistCard`, `MixTile` with `MediaCard`; replace `MediaGrid`
-   with `grid-cards`/`grid-cards-lg`/`grid-tiles`/`grid-wide` (B.1.7). Delete the 4 files.
-4. Explore's genre tile: the `style` with `--tile-hue` and its gradient move into a
-   `@utility genre-tile` that reads `var(--tile-hue)`.
-
-Closing: /albums, /playlists, /u/[id], Home (mixes), Explore (genres).
-
----
-
-### P10: Headers, dialogs and typography
-
-**Objective:** 1 page header, 1 section header, 1 confirmation dialog.
-
-Findings:
-
-- `PageHeader` is basically `CollectionHeader` without the cover/eyebrow. Explore's
-  search header reimplements both (eyebrow `text-sm font-semibold tracking-[0.16em]`).
-- `AlbumHeader`/`PlaylistHeader` (routes) just wire up the meta and the buttons.
-- Each page decides its own margin after the header (`mt-7 sm:mt-8`, `mt-6 sm:mt-8`, `mt-9`,
-  `mt-10 sm:mt-12`…).
-- 2 delete dialogs with different typography.
-- `EmptyState` literally duplicated in Home ("You haven't listened to anything yet" ×2).
-
-Tasks:
-
-1. Merge into `PageHeader`: `title`, `eyebrow?`, `description?`, `meta?`, `cover?`,
-   `actions?`, `align?`. **The header owns its own bottom margin** (`mb-7 sm:mb-8`);
-   remove the `mt-*` from whatever follows it. Delete `CollectionHeader`.
-2. Inline `AlbumHeader`/`PlaylistHeader` into their pages (with `plural()` and the `BackLink`)
-   and delete them. Button icons: unify (album has icons, playlist doesn't), so
-   **decide**: icons on both (recommended) or on neither.
-3. `SectionHeading`: add a `count?` prop that renders the line + "N results" (currently
-   repeated 4× in Explore) and `href?`/`linkLabel?` for "View all".
-4. `ConfirmDialog` (B.3); migrate album and playlist. `Modal` uses `.glass-panel` and
-   `z-(--z-modal)`; its eyebrow and title use the recipes.
-5. Apply B.1.6 recipes in: `EmptyState`, `+error.svelte`, "No results", the Home
-   hero, stats, `Queue`, `Sidebar` ("Your playlists"), `PlaylistForm` (visibility).
-6. Home: replace the repeated empty state with a local snippet.
-
-Closing: every page has a header; delete dialogs look identical.
-
----
-
-### P11: Forms
-
-**Objective:** a single form skeleton with a cover.
-
-Findings:
-
-- `AlbumForm` and `PlaylistForm` share: `use:enhance` with `submitting`,
-  `ImageDropzone gradient class="h-36 w-36 rounded-2xl"`, `Field`/`Input`/`Textarea`,
-  `Alert`, and a Cancel/Submit footer.
-- `upload/+page.svelte` reimplements the cover picker (label + input + preview +
-  gradient) that `ImageDropzone` already does.
-- `Input` and `Textarea` repeat the same class string.
-- The Private/Public toggle (`w-[calc(50%-4px)]`) and Explore's chips are both single-option
-  selectors with their own styles.
-
-Tasks:
-
-1. `CoverForm.svelte` (skeleton): props `action`, `coverFallbackUrl?`, `coverIcon`,
-   `requireCover?`, `formMessage?`, `submitLabel`, `submittingLabel`, `canSubmit`,
-   `helperText?`, `onCancel`, `onSuccess?`, `fields` snippet. `AlbumForm` and
-   `PlaylistForm` end up as ~30 lines of fields each (or get inlined into their
-   pages if only used in one place: `AlbumForm` is used in 2, `PlaylistForm` in 2, so
-   keep them as components).
-2. `ImageDropzone`: `size="hero"` using `size-cover-hero` + `rounded-art-lg`; upload
-   uses it (Δ: 64px icon → `icon-xl`).
-3. `@utility field-control` in `layout.css` with the shared `Input`/`Textarea` class string.
-4. `SegmentedControl.svelte` (`options`, bindable `value`) for Private/Public; `Chip`
-   (B.3) for Explore.
-
-Closing: create/edit album and playlist, upload a song (including drag & drop).
-
----
-
-### P12: App chrome (layout, navigation, player)
-
-**Objective:** a single navigation definition and a smaller player.
-
-Findings:
-
-- `Sidebar` and `TabsBar` each define their own link list + `isActive`.
-- `MobileHeader` compensates for links missing from `TabsBar` with extra menu items.
-- Logo: gradient + text in MobileHeader and login; text-only in Sidebar.
-- `PlayerBar` repeats the "glass bar" string twice (same as `TabsBar`).
-- `PlayerExtras` (22 lines) only composes volume + queue button.
-- `SeekBar` is a click-only `<button>` (no keyboard, no dragging) with `h-[3.5px]`;
-  `VolumeControl` is a range `<input>` with its own `<style>` (`84px`, `11px`, `3.5px`).
-- `TrackInfo` duplicates the track identity block (→ `MediaIdentity`, P7).
-
-Tasks:
-
-1. `appNavLinks()` (B.2) in Sidebar and TabsBar (`primary` = the 4 items from TabsBar).
-2. `Logo.svelte`; use it in Sidebar, MobileHeader and login (Δ: Sidebar gains the gradient
-   square, **confirm this**).
-3. `glass-bar` in PlayerBar ×2 and TabsBar; `theme-transition` in Sidebar, Queue, etc.
-4. Merge `PlayerExtras` into `PlayerBar`; side widths via `--mf-player-side-w`.
-5. `Slider.svelte` (B.3) with an `<input type="range">` styled through the
-   `--mf-range-h/--mf-range-thumb/--mf-volume-w` tokens; replaces `SeekBar` and `VolumeControl`
-   (bonus: dragging and keyboard support on the progress bar). Delete both.
-6. `TopBar`: use `searchHref`, `IconButton`, `Avatar`; `max-w-search`.
-7. Header/dock/menu z-index via B.1.5.
-
-Closing: desktop/tablet/mobile navigation, queue opens/closes, seek via click, drag and
-arrow keys, volume.
-
----
-
-### P13: Big pages, Explore (602 lines) and Home (466)
-
-**Objective:** make these pages composition, not logic or repeated markup. Do this
-**after** P7 through P10 (uses `ListRow`, `SectionHeading count`, `PageHeader`).
-
-Explore:
-
-1. `GENRE_INFO` + `genreTiles` → `src/lib/genres.ts`.
-2. Search logic (`topResult`, `searchCounts`, `searchChips`, `capped`,
-   `showGroup`, `playlistMatches`) → `src/lib/search.ts` (pure functions).
-3. The 4 group blocks (Songs/Albums/Users/Playlists) → a single `{#each groups}`
-   with `SectionHeading count` + `ListRow`.
-4. "Best match": a single markup block with `Artwork`/`Avatar` depending on type + `PlayButton
-as="span"`; eliminate the duplicated button/a snippet with a `ListRow`-like element or
-   `<svelte:element this={href ? 'a' : 'button'}>`.
-5. `loadMore` pagination: reusable if another page needs it; if not, leave as is.
-
-Home:
-
-1. Use `Page` instead of the hand-written `page-x pt-3 sm:pt-4 …`; `gap-11.5` → a section
-   token (`--spacing-section: 2.875rem`, `gap-section`).
-2. The 3 identical stats blocks → `{#each stats}`.
-3. Hero/spotlight: background `style=` → `@utility hero-surface` / `spotlight-surface`.
-4. Rows → `ListRow` (if P7 didn't already do it).
-
-Closing: Explore with no query, with a query, filters, no results, infinite scroll; Home
-complete with and without data.
-
----
-
-### P14: Final sweep and guardrails
-
-**Objective:** make sure what's been cleaned up doesn't come back.
-
-Tasks:
-
-1. Script `web-player/scripts/check-tokens.mjs` + `npm run lint:tokens` (add it to
-   `lint`). Fails if it finds any of the following in `src/**/*.svelte`:
-   - `-\[` arbitrary values outside the B.4 allow list;
-   - `rounded-(sm|md|lg|xl|2xl|3xl)\b` or a bare `rounded\b`;
-   - `\b[hw]-\d` paired with its counterpart on the same element (should be `size-*`);
-   - fractional spacing `-\d+\.\d+` in `h-`/`w-`/`size-` (sizes should be tokens);
-   - `#[0-9a-f]{3,8}` in classes, `rgba(`, `strokeWidth=`, `text-base` with no recipe;
-   - `style="` outside the allow list.
-2. Remaining fractional spacing (`gap-2.75`, `py-1.75`, `mt-3.25`, `p-2.25`…):
-   round to the nearest 0.5 step **or** to the whole-number scale when the Δ is ≤ 1px.
-   Guide table: `.25/.75` → nearest `.5`; `mt-0.75` → `mt-1`; `gap-1.75` → `gap-2`;
-   `p-4.25` → `p-4`; `mb-4.5` (SectionHeading) stays as is (Δ 2px, visible across all
-   sections).
-3. Orphan detector (run it repeatedly and delete whatever it flags):
-   ```bash
-   for f in $(find src/lib/components -name "*.svelte"); do n=$(basename "$f" .svelte); c=$(grep -rlw "$n" --include=*.svelte --include=*.ts src | grep -v "/$n.svelte$" | wc -l); [ "$c" -eq 0 ] && echo "$f"; done
-   ```
-4. Update `web-player/CLAUDE.md`, the "Styles" section, with: B.4, "use `size-cover-*`,
-   `size-icon-*`, the `text-display-*`/`text-eyebrow`/`text-body`/`text-count` recipes,
-   semantic radii; components: `Artwork`, `Avatar`, `ListRow`, `TrackList`,
-   `MediaCard`, `PageHeader`, `ContextMenu`…". Delete `docs/design-system-refactor-plan.md`.
-5. Recompute the A.4 table and log it in D.
-
----
-
-## D. Log
-
-| Part | Status | Commit    | Notes / decisions made                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| ---- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| P0   | ✅     | (pending) | Button primary/secondary stay identical (user's decision)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| P1   | ✅     | (pending) | Verified with `build` (Tailwind compiles `@apply sm:` inside `@utility`); no authenticated visual QA (Docker not available in this session)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| P2   | ✅     | (pending) | `<style>{expr}</style>` doesn't interpolate in Svelte (it's treated as the component's own CSS); solution: `{@html \`<style>${css}</style>\`}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| P3   | ✅     | (pending) | Removed the name under the profile avatar (decision made: redundant with CollectionHeader's title). Added `size="fill"` to Artwork (not in the spec) for the fluid grid cards (AlbumCard/PlaylistCard/MixTile), since P9 (MediaCard) doesn't exist yet. SearchResultRow lost its `kind`/radius-by-type prop (radius is now decided by Artwork/Avatar). No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| P4   | ✅     | (pending) | Decision made without blocking: removed the decorative "forward" button (TopBar) and the decorative `AlignJustify` icon (PlayerExtras) since they were visually dead code. `TransportControls` (shuffle/prev/next/repeat) is intentionally left unmigrated to IconButton: those are chromeless icons (no background/hit box), migrating them would have added a hover pill that doesn't exist today, a visual risk that couldn't be verified without Docker                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| P5   | 🟡     | (pending) | Done: pressable/clickOutside, toggle.svelte.ts, plural() (+ lowercase, visible Δ), player.svelte.ts helpers (toQueueItem/isQueueCurrent/playAllOrToggle/playShuffled, addToQueue→playNextItem), navigation.svelte.ts (searchHref/appNavLinks, appNavLinks created but its migration into Sidebar/TabsBar is left for P12 as that part specifies), menus.svelte.ts (createTrackMenu, migrated in Home/Explore/Mix). **Deliberately pending**: task 5 (removing the `TrackTarget` wrapper from tracks.ts and its 8 accessors) is deferred, it's the riskiest change in the plan (touches types across Home/Explore/Mix/menus) and couldn't be verified visually without Docker; tackle it together with P13 when those pages get rewritten                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| P6   | ✅     | (pending) | AccountMenu's z-index unified to z-(--z-menu) (was z-20, now at the same level as ContextMenu, a minor Δ that improves consistency); no authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| P7   | ✅     | (pending) | MediaIdentity stays "pure" (no onClick) per spec; the 6 track tables (P8) wrap their own `use:pressable` until P8 replaces them with TrackList. Documented deltas: Sidebar's active row now uses bg-accent-tint/text-accent-soft (was neutral gray, now consistent with other active rows); Home's "Your playlists" card loses the "by {your name}" line (redundant, it's always the current user) and its radius changes from rounded-panel to rounded-art (consistent with the "Continue" card); Queue's "Up next" rows lose the art's opacity-80 (ListRow doesn't expose that customization). No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| P8   | ✅     | (pending) | Decision made (recommended by the plan itself, non-blocking): removed the "Album" column that always showed a placeholder dash. TrackList unifies TrackTable+TrackRow+TrackIndexCell+TrackMeta; AlbumTrackTable/PlaylistTrackTable/LibraryPicker are inlined into their pages and deleted. No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| P9   | ✅     | (pending) | MediaCard gains the art's hover-zoom and scrim+PlayButton, conditioned on `onPlay` (previously exclusive to MixTile); this will now apply to any future card with onPlay, an intentional consistency choice. No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| P10  | ✅     | (pending) | Decision made (recommended, non-blocking): icons on playlist header buttons (previously only album had them). PlaylistHeader loses its unused `id` prop after being inlined. Explore: the "Results for…" header now uses PageHeader's `mb-7/8` instead of a hand-tuned `mt-5` before the filter chips, slightly larger gap between the summary and the chips (minor, documented Δ). No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| P11  | ✅     | (pending) | CoverForm adds an `extra` snippet (not in the literal spec, only `fields`) for full-width content below the cover+fields row (album description, playlist visibility selector) that didn't fit in a single column. Upload uses ImageDropzone with `onselect` (new prop) and wraps it in `{#key}` to be able to reset it after publishing, Δ: the cover container goes from 144/176px (mobile/desktop) to a fixed 144px (size-cover-hero, no larger desktop variant), and the empty-state icon goes from 64px to 36px (icon-xl), as the plan recommends. No authenticated visual QA (Docker not available)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| P12  | ✅     | (pending) | PlayerExtras merges into PlayerBar (volume/queue inline); Slider replaces SeekBar+VolumeControl (confirmed via grep that SeekBar's `compact` mode was dead code). Sidebar and TabsBar migrate to `appNavLinks()` (P5). Decision made (non-blocking): Sidebar gains the gradient-branded `Logo` it didn't have before, for consistency with MobileHeader/login. PlayerDock/MobileHeader z-index fixed to `z-(--z-sticky)` (they're fixed bars, not menus) and SegmentedControl to `z-(--z-raised)`, as B.1.5 specifies. `glass-bar`/`theme-transition` applied on PlayerBar (both variants), TabsBar, Queue and Home (hero/spotlight), replacing duplicated styles. No authenticated visual QA (Docker not available); `/login` smoke test with no console errors                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| P13  | ✅     | (pending) | This part also tackles the task deferred in P5: removes the `TrackTarget` wrapper from `tracks.ts` and its 8 accessors (`targetId`/`targetTitle`/`targetArtist`/`targetOwnerUserId`/`targetExplicit`/`targetListensCount`/`isTargetCurrent`/`queueItemForTarget`/`targetForQueueItem`); Explore, Home, Mix, `menus.svelte.ts` and `mixes.ts` now use track objects (`ApiTrackLike`/`LocalTrack`) directly, with `toQueueItem`/`trackFromQueueItem` (new, in `player.svelte.ts`) as the only conversion functions. TypeScript revealed the `isExplicit` field doesn't exist in the real `/tracks` schema, Explore's "explicit" badge was already a no-op before the refactor (always `undefined ?? false`); the binding was removed instead of faking support for it. Explore: `GENRE_INFO`/`genreTiles` → `src/lib/genres.ts`; search logic (`showGroup`/`capped`/`matchPlaylists`/`searchCounts`/`searchChips`/`findTopResult`) → `src/lib/search.ts` (pure functions, parameterized by `sfilter`/`query` instead of closing over component state); "Best match" unifies the duplicated button/link with `<svelte:element this={...}>`. Decision made without blocking: the 4 group blocks (Songs/Albums/Users/Playlists) are **not** collapsed into a single `{#each groups}`, each group has genuinely different snippets, context menus and `ListRow` props (track menu vs. album menu, overlay only on songs, differently formatted trailing content), and forcing a generic configuration would have added more indirection than it removed. Home: uses `Page` (previously a hand-written `page-x pt-3 sm:pt-4`); the 3 stats blocks → `{#each}`; hero/spotlight backgrounds (`style=` with `var(--mf-hero-bg)`/`var(--mf-spotlight-bg)`) → new `hero-surface`/`spotlight-surface` utilities (in `layout.css`) and the `--spacing-section: 2.875rem` token → `gap-section` replaces `gap-11.5`. No authenticated visual QA (Docker not available); `/explore` without a session redirects to `/login` because `+layout.server.ts` requires `allowAnonymousListening` from the backend (unreachable without Docker), a pre-existing behavior, not a regression; `/login` smoke test with no console errors |
-| P14  | ✅     | (pending) | `scripts/check-tokens.mjs` (`npm run lint:tokens`, added to `lint`) scans `src/**/*.svelte` and fails on: `-[…]` arbitrary values outside the B.4 allow list, bare `rounded-(sm/md/lg/xl/2xl/3xl)`/`rounded`, `h-N w-N` pairs (should be `size-N`), fractional quarter spacing (`.25`/`.75`), literal hex/`rgba()` values. Cleaned the repo down to 0 violations: ~40 `h-N w-N` pairs → `size-N` (mostly icons, via a one-off script), ~26 quarter-spacing values rounded to the nearest whole number (Δ≤1px, e.g. `py-2.75`→`py-3`, `gap-1.75`→`gap-2`), 3 `rounded-sm/lg` + 1 bare `rounded` → tokens (`rounded-tag`/`rounded-thumb`/`rounded-control`), 2 `tracking-[-0.02em]` → `tracking-display` (matched the existing token exactly and hadn't been migrated), 1 `tracking-[0.14em]` in Explore → the `text-eyebrow` recipe, Home hero's `rounded-3xl` → `rounded-panel-lg` (consistent with the featured playlist card). Removed the `stroke-thin/regular/bold` recipes (created in P1, 0 consumers), **decision made, non-blocking**: `strokeWidth={n}` (13 values, across almost every component) isn't migrated to those CSS recipes because there's no way to verify without Docker that `lucide-svelte` respects `stroke-width` via class instead of the prop, and a regression there would be silent across the whole app; the script documents this gap explicitly and doesn't enforce it. Also tackled the task deferred from P5 (see P13). Orphan detector: 0 components with no importers (all 47 in `src/lib/components/` are in use). `docs/design-system-refactor-plan.md` (previous plan, superseded) deleted. `web-player/CLAUDE.md` gains a "Styles" section with the B.4 allow list, the base components to reuse, and the documented `strokeWidth` gap. Baseline recalculated (see table below)                                                                                                                                                                                                                                                                                                                                                                                       |
-
-Pending product decisions (ask the user before the listed part):
-
-- P0/P4: should `Button` primary look different from secondary?
-- P3: remove the name under the profile avatar?
-- P4: remove the decorative "forward" button and the `AlignJustify` icon from the player?
-- P5: lowercase pluralizations across the whole app.
-- P8: remove the "Album" column that always shows a placeholder dash?
-- P10: icons on album **and** playlist header buttons?
-- P12: gradient-square logo in the Sidebar too?
-
-### D.1 Recalculated baseline (after P14, closing out the refactor)
-
-Recalculated with the same criteria as A.4 (grep over `src/`), in the same session that closed out P14.
-
-| Metric                                        | A.4 (before)     | After P14                                                                                                                                               |
-| --------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.svelte` components in `src/lib/components/` | 61               | 47                                                                                                                                                      |
-| Client `.svelte`/`.css`/`.ts` lines           | ~8,700           | ~8,310 (−~390; the −1,500/−2,000 goal had already been reached in P3 through P11, before P13 added `genres.ts`/`search.ts` as new, well-separated code) |
-| Arbitrary classes `x-[…]`                     | 44               | 11 (the remaining 11 are all in the B.4 allow list)                                                                                                     |
-| Fractional quarter spacing (`.25`/`.75`)      | ~190 occurrences | 0 (rounded to the nearest whole number, Δ≤1px)                                                                                                          |
-| Distinct radii used                           | 13               | 8 (7 B.1.1 tokens + `rounded-full`)                                                                                                                     |
-| Distinct `strokeWidth` values                 | 13               | 12 (out of scope, see the P14 log entry and CLAUDE.md)                                                                                                  |
-| `style="…"` attributes                        | 24               | 16 (across 12 files; all dynamic per instance, stagger, menu position, `var(--mf-*)`, animation, none with a literal color/measurement)                 |
-| Hand-rolled pluralizations `=== 1 ?`          | 15               | 2 (1 is `plural()` itself in `format.ts`; 1 is a past-participle agreement in `library` that `plural()` can't cover)                                    |
-| `eslint` errors                               | 2                | 0                                                                                                                                                       |
-| `npm run lint:tokens` (new, P14)              | n/a              | 0 violations                                                                                                                                            |
-
----
-
-## E. Full inventory (verdict per file)
-
-Legend: **=** stays as is · **~** gets modified · **→X** merges into X · **✕** gets deleted.
-
-### `src/lib/components/ui/`
-
-| File             | Lines | Verdict                                                                                                                                     | Part   | Reason                                                          |
-| ---------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------- |
-| AccountMenu      | 73    | ~                                                                                                                                           | P6     | `clickOutside`, Escape, width via prop                          |
-| AlbumCard        | 62    | ✕ →MediaCard                                                                                                                                | P9     | meta wrapper + the `trackId=albumId` hack                       |
-| AlbumForm        | 123   | ~ (CoverForm)                                                                                                                               | P11    | shared skeleton                                                 |
-| Alert            | 20    | =                                                                                                                                           |        |                                                                 |
-| ArtistAvatar     | 36    | ✕ →Avatar                                                                                                                                   | P3     |                                                                 |
-| BackLink         | 33    | ~                                                                                                                                           | P4     | `IconButton`/tokens; remove duplicated `hover:text-accent-soft` |
-| Badge            | 23    | ✕                                                                                                                                           | P0     | 0 uses                                                          |
-| Button           | 66    | ~                                                                                                                                           | P0/P4  | duplicated variants, `!` overrides                              |
-| Checkbox         | 29    | ~                                                                                                                                           | P14    | `size-*`, tokens                                                |
-| CollectionHeader | 45    | ✕ →PageHeader                                                                                                                               | P10    |                                                                 |
-| Cover            | 47    | ✕ →Artwork                                                                                                                                  | P3     |                                                                 |
-| EmptyState       | 31    | ~                                                                                                                                           | P10    | recipes                                                         |
-| EqBars           | 23    | ~                                                                                                                                           | P7     | absorbs `NowPlaying`                                            |
-| ExplicitBadge    | 13    | ~                                                                                                                                           | P1/P14 | `rounded-tag`, `size-4`                                         |
-| Field            | 27    | =                                                                                                                                           |        |                                                                 |
-| GlassMenu        | 15    | =                                                                                                                                           |        | menu base                                                       |
-| IconButton       | 39    | ~                                                                                                                                           | P4     | shape/size/tone/pressed/href                                    |
-| ImageDropzone    | 62    | ~                                                                                                                                           | P11    | `size="hero"`; used by upload                                   |
-| InfiniteScroll   | 39    | =                                                                                                                                           |        |                                                                 |
-| Input            | 59    | ~                                                                                                                                           | P11    | `field-control`                                                 |
-| MediaCard        | 32    | ~                                                                                                                                           | P0/P9  | 16px bug; absorbs MixTile                                       |
-| MediaGrid        | 27    | ✕ →`grid-*`                                                                                                                                 | P9     |                                                                 |
-| MenuItem         | 48    | ~                                                                                                                                           | P6     | `size-icon-md` icons                                            |
-| MixArt           | 25    | ✕ →Artwork                                                                                                                                  | P3     |                                                                 |
-| MixTile          | 51    | ✕ →MediaCard                                                                                                                                | P9     |                                                                 |
-| Modal            | 106   | ~                                                                                                                                           | P10    | `.glass-panel`, z-token, recipes                                |
-| NowPlaying       | 20    | ✕ →EqBars                                                                                                                                   | P7     |                                                                 |
-| Page             | 14    | =                                                                                                                                           |        | Home should use it (P13)                                        |
-| PageHeader       | 26    | ~                                                                                                                                           | P10    | absorbs CollectionHeader                                        |
-| PlaylistArt      | 61    | ✕ →Artwork                                                                                                                                  | P3     |                                                                 |
-| PlaylistCard     | 23    | ✕ →MediaCard                                                                                                                                | P9     |                                                                 |
-| PlaylistForm     | 161   | ~ (CoverForm)                                                                                                                               | P11    | + SegmentedControl                                              |
-| SearchResultRow  | 78    | ✕ →ListRow                                                                                                                                  | P7     |                                                                 |
-| SectionHeading   | 32    | ~                                                                                                                                           | P10    | `count`, "view all"                                             |
-| Surface          | 17    | =                                                                                                                                           |        | (upload only; acceptable)                                       |
-| Textarea         | 28    | ~                                                                                                                                           | P11    | `field-control`                                                 |
-| TrackIndexCell   | 27    | ✕ →TrackList                                                                                                                                | P8     |                                                                 |
-| TrackMeta        | 14    | ✕ →TrackList                                                                                                                                | P8     |                                                                 |
-| TrackRow         | 27    | ✕ →TrackList                                                                                                                                | P8     |                                                                 |
-| TrackTable       | 79    | ✕ →TrackList                                                                                                                                | P8     |                                                                 |
-| TrackTitleCell   | 77    | → MediaIdentity                                                                                                                             | P7     | rename + generalize                                             |
-| **New**          |       | Artwork, Avatar, ListRow, MediaIdentity, TrackList, ContextMenu, PlayButton, ConfirmDialog, Slider, Logo, Chip, SegmentedControl, CoverForm |        |                                                                 |
-
-### `src/lib/components/` and `player/`
-
-| File                     | Lines | Verdict        | Part   | Reason                              |
-| ------------------------ | ----- | -------------- | ------ | ----------------------------------- |
-| AlbumContextMenu         | 119   | ✕ →ContextMenu | P6     | copy of TrackContextMenu            |
-| TrackContextMenu         | 109   | ✕ →ContextMenu | P6     |                                     |
-| MobileHeader             | 70    | ~              | P6/P12 | Avatar, Logo, no duplicated wrapper |
-| Sidebar                  | 125   | ~              | P7/P12 | `appNavLinks`, `ListRow`            |
-| TabsBar                  | 50    | ~              | P12    | `appNavLinks`, `glass-bar`          |
-| TopBar                   | 140   | ~              | P4/P12 | IconButton, Avatar, `searchHref`    |
-| player/PlayerBar         | 28    | ~              | P12    | `glass-bar`, absorbs PlayerExtras   |
-| player/PlayerDock        | 29    | ~              | P12    | z-token                             |
-| player/PlayerExtras      | 22    | ✕ →PlayerBar   | P12    |                                     |
-| player/Queue             | 111   | ~              | P7     | `ListRow`, recipes, `pressable`     |
-| player/SeekBar           | 48    | ✕ →Slider      | P12    |                                     |
-| player/TrackInfo         | 65    | ~              | P7     | `MediaIdentity`, IconButton pressed |
-| player/TransportControls | 75    | ~              | P4     | `PlayButton`, `IconButton pressed`  |
-| player/VolumeControl     | 52    | ✕ →Slider      | P12    |                                     |
-
-### Routes
-
-| File                                           | Lines | Verdict    | Part         | Reason                                                 |
-| ---------------------------------------------- | ----- | ---------- | ------------ | ------------------------------------------------------ |
-| `+layout.svelte`                               | 142   | ~          | P2           | SSR tokens, backgrounds to utilities, dock padding     |
-| `+page.svelte` (Home)                          | 466   | ~          | P0/P5/P7/P13 | 4 hand-rolled rows, stats ×3, empty state ×2, `style=` |
-| `+error.svelte`                                | 16    | ~          | P10          | recipes, `max-w-prose-sm`                              |
-| `login/+page.svelte`                           | 50    | ~          | P12          | `Logo`, `max-w-cta`                                    |
-| `(app)/explore/+page.svelte`                   | 602   | ~          | P13          | split data/logic; 4 groups → each                      |
-| `(app)/upload/+page.svelte`                    | 288   | ~          | P11          | `ImageDropzone`, recipes                               |
-| `(app)/library/+page.svelte`                   | 108   | ~          | P8           | `TrackList`                                            |
-| `(app)/liked/+page.svelte`                     | 123   | ~          | P0/P5/P8/P10 | dead imports, `playAllOrToggle`, `TrackList`           |
-| `(app)/mixes/[id]/+page.svelte`                | 134   | ~          | P5/P8/P10    | menu, `TrackList`, `PageHeader`                        |
-| `(app)/albums/+page.svelte`                    | 74    | ~          | P9           | `MediaCard` + `grid-cards`                             |
-| `(app)/albums/[id]/+page.svelte`               | 91    | ~          | P8/P10       | inline header/tables, `ConfirmDialog`                  |
-| `albums/[id]/components/AlbumHeader`           | 82    | ✕ (inline) | P10          |                                                        |
-| `albums/[id]/components/AlbumTrackTable`       | 64    | ✕ (inline) | P8           |                                                        |
-| `albums/[id]/components/LibraryPicker`         | 65    | ✕ (inline) | P8           |                                                        |
-| `(app)/playlists/+page.svelte`                 | 62    | ~          | P9           |                                                        |
-| `(app)/playlists/[id]/+page.svelte`            | 95    | ~          | P8/P10       |                                                        |
-| `playlists/[id]/components/PlaylistHeader`     | 62    | ✕ (inline) | P10          |                                                        |
-| `playlists/[id]/components/PlaylistTrackTable` | 71    | ✕ (inline) | P8           |                                                        |
-| `(app)/u/[id]/+page.svelte`                    | 97    | ~          | P3/P9/P10    | Avatar, grid                                           |
-| `routes/layout.css`                            | 238   | ~          | P1           | all tokens and recipes                                 |
-
-### `src/lib/` (client)
-
-| File                                                                              | Verdict              | Part  | Reason                                            |
-| --------------------------------------------------------------------------------- | -------------------- | ----- | ------------------------------------------------- |
-| `theme/theme.css`                                                                 | ~                    | P1/P2 | remove `tokens.ts` duplicates, add layout/z       |
-| `theme/tokens.ts`                                                                 | ~                    | P2    | `tokensToCss`, no `--mf-sidebar-bg`               |
-| `theme/palette.ts`, `theme/color.ts`, `theme/mode.svelte.ts`                      | =                    |       | (`mode` loses the flash with P2)                  |
-| `tracks.ts`                                                                       | ~                    | P5    | remove the `TrackTarget` wrapper + 8 accessors    |
-| `recentlyPlayed.ts`                                                               | ~                    | P5    | `toQueueItem`                                     |
-| `player/player.svelte.ts`                                                         | ~                    | P5    | queue helpers, `toQueueItem`, rename `addToQueue` |
-| `player/liked.svelte.ts`                                                          | ~                    | P5    | `toQueueItem`                                     |
-| `player/queuePanel.svelte.ts`, `playlists.svelte.ts`                              | → `toggle.svelte.ts` | P5    | identical                                         |
-| `format.ts`                                                                       | ~                    | P5/P9 | `plural`, `albumMeta`, `playlistMeta`             |
-| `navigation.svelte.ts`                                                            | ~                    | P5    | `searchHref`, `appNavLinks`                       |
-| `config.ts`                                                                       | ~                    | P6    | `MENU_WIDTH`, `SUBMENU_WIDTH`                     |
-| `mixes.ts`, `albums.ts`, `collections.ts`, `types.ts`                             | =                    |       |                                                   |
-| `lib/server/**`, `+page.server.ts`, `routes/api/**`, `auth/**`, `hooks.server.ts` | out of scope         |       | no UI or styles                                   |
diff --git a/web-player/eslint.config.js b/web-player/eslint.config.js
index 9ad9516..eeaed68 100644
--- a/web-player/eslint.config.js
+++ b/web-player/eslint.config.js
@@ -36,12 +36,6 @@ export default ts.config(
 		}
 	},
 	{
-		ignores: [
-			'build/',
-			'.svelte-kit/',
-			'static/',
-			'src/lib/api/schema.d.ts',
-			'design_handoff_musify_player/'
-		]
+		ignores: ['build/', '.svelte-kit/', 'static/', 'src/lib/api/schema.d.ts']
 	}
 );
diff --git a/web-player/scripts/check-tokens.mjs b/web-player/scripts/check-tokens.mjs
index 3c8349f..759a57c 100644
--- a/web-player/scripts/check-tokens.mjs
+++ b/web-player/scripts/check-tokens.mjs
@@ -71,7 +71,7 @@ for (const file of files) {
 if (violations.length > 0) {
 	console.error(`\n${violations.length} violación(es) del sistema de diseño:\n`);
 	for (const v of violations) console.error(`  ${v}`);
-	console.error('\nVer docs/frontend-refactor-plan.md, sección B.4.\n');
+	console.error('\nVer la lista blanca (ARBITRARY_WHITELIST) en este script, o CLAUDE.md.\n');
 	process.exit(1);
 }
 
-- 
2.54.0


From 717e93903897f551f1f3ee2041a847f7cf7c9d2f Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 16:29:58 +0200
Subject: [PATCH 15/50] Fix permanent login failure after Zitadel restarts

getOidcConfig() memoized the discovery promise even when it rejected,
so a single failed OIDC discovery (e.g. Zitadel not ready yet when the
dev server starts) permanently broke /auth/login until the process was
restarted. Clear the cached promise on rejection so it retries.
---
 web-player/src/lib/server/auth.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web-player/src/lib/server/auth.ts b/web-player/src/lib/server/auth.ts
index 3aaaee7..ac045e2 100644
--- a/web-player/src/lib/server/auth.ts
+++ b/web-player/src/lib/server/auth.ts
@@ -17,7 +17,7 @@ export interface Session extends SessionUser {
 	expiresAt: number;
 }
 
-let configPromise: Promise<client.Configuration>;
+let configPromise: Promise<client.Configuration> | undefined;
 export function getOidcConfig(): Promise<client.Configuration> {
 	configPromise ??= (async () => {
 		const issuer = new URL(authConfig.issuer);
@@ -28,7 +28,10 @@ export function getOidcConfig(): Promise<client.Configuration> {
 		return secret
 			? client.discovery(issuer, authConfig.clientId, secret, undefined, options)
 			: client.discovery(issuer, authConfig.clientId, undefined, client.None(), options);
-	})();
+	})().catch((exception) => {
+		configPromise = undefined;
+		throw exception;
+	});
 	return configPromise;
 }
 
-- 
2.54.0


From a9bfcbbe2f059e0da14e89ed98b78b4f3e8d49bb Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 16:42:56 +0200
Subject: [PATCH 16/50] Make the glass button variant more transparent and
 soften accent text

The secondary/glass Button variant used a flat, fairly opaque black or
white tint with no blur, so it didn't read as glass and clashed with
the hue-shifting hero background. Add a backdrop blur and a hairline
border (matching the app's existing glass-bar/glass-panel treatment)
and lower the tint opacity.

Wire up the already-computed but unused --mf-accent-muted token as
--color-accent-muted, and use it for the accent Button variant's text
instead of the higher-chroma --color-accent-soft, so it reads softer.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 5 +++--
 web-player/src/lib/theme/theme.css                        | 8 ++++----
 web-player/src/routes/layout.css                          | 1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index d7d4fdb..4bcd8f2 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -35,13 +35,14 @@
 	};
 
 	const subtle = 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg';
-	const glass = 'font-normal bg-btn-glass text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
+	const glass =
+		'font-normal border border-hairline bg-btn-glass backdrop-blur-md text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
 
 	const variants = {
 		primary: subtle,
 		secondary: subtle,
 		glass,
-		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
+		accent: 'bg-accent-btn text-accent-muted hover:bg-accent-btn-hover',
 		strong: 'bg-cta-strong text-ink hover:brightness-95',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index ec2380d..35bcc22 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -16,8 +16,8 @@
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
 	--mf-btn-bg: var(--mf-surface-2);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
-	--mf-btn-secondary-bg: rgba(255, 255, 255, 0.045);
-	--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.07);
+	--mf-btn-secondary-bg: rgba(255, 255, 255, 0.03);
+	--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.05);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
 	--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -84,8 +84,8 @@
 	--mf-surface-hover: #e8eceb;
 	--mf-btn-bg: var(--mf-surface-2);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
-	--mf-btn-secondary-bg: rgba(0, 0, 0, 0.09);
-	--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.14);
+	--mf-btn-secondary-bg: rgba(0, 0, 0, 0.055);
+	--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.09);
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);
 	--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 8c8ee99..ad1b318 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -20,6 +20,7 @@
 	--color-muted: var(--mf-text-4);
 	--color-accent: var(--mf-accent);
 	--color-accent-soft: var(--mf-accent-title);
+	--color-accent-muted: var(--mf-accent-muted);
 	--color-accent-tint: var(--mf-accent-soft-bg);
 	--color-accent-btn: var(--mf-accent-btn-bg);
 	--color-accent-btn-hover: var(--mf-accent-btn-bg-hover);
-- 
2.54.0


From c93f3d352cdbd504ae1652ced8abfd8085baf35b Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 16:45:33 +0200
Subject: [PATCH 17/50] Revert "Make the glass button variant more transparent
 and soften accent text"

This reverts commit f52efa0f870067146b78cc9b28547b394617fb1c.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 5 ++---
 web-player/src/lib/theme/theme.css                        | 8 ++++----
 web-player/src/routes/layout.css                          | 1 -
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index 4bcd8f2..d7d4fdb 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -35,14 +35,13 @@
 	};
 
 	const subtle = 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg';
-	const glass =
-		'font-normal border border-hairline bg-btn-glass backdrop-blur-md text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
+	const glass = 'font-normal bg-btn-glass text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
 
 	const variants = {
 		primary: subtle,
 		secondary: subtle,
 		glass,
-		accent: 'bg-accent-btn text-accent-muted hover:bg-accent-btn-hover',
+		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
 		strong: 'bg-cta-strong text-ink hover:brightness-95',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index 35bcc22..ec2380d 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -16,8 +16,8 @@
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
 	--mf-btn-bg: var(--mf-surface-2);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
-	--mf-btn-secondary-bg: rgba(255, 255, 255, 0.03);
-	--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.05);
+	--mf-btn-secondary-bg: rgba(255, 255, 255, 0.045);
+	--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.07);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
 	--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -84,8 +84,8 @@
 	--mf-surface-hover: #e8eceb;
 	--mf-btn-bg: var(--mf-surface-2);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
-	--mf-btn-secondary-bg: rgba(0, 0, 0, 0.055);
-	--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.09);
+	--mf-btn-secondary-bg: rgba(0, 0, 0, 0.09);
+	--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.14);
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);
 	--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index ad1b318..8c8ee99 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -20,7 +20,6 @@
 	--color-muted: var(--mf-text-4);
 	--color-accent: var(--mf-accent);
 	--color-accent-soft: var(--mf-accent-title);
-	--color-accent-muted: var(--mf-accent-muted);
 	--color-accent-tint: var(--mf-accent-soft-bg);
 	--color-accent-btn: var(--mf-accent-btn-bg);
 	--color-accent-btn-hover: var(--mf-accent-btn-bg-hover);
-- 
2.54.0


From 9064ef687cf86db47853ccae0fad84428e55fc37 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:10:26 +0200
Subject: [PATCH 18/50] Changes on the design

---
 web-player/src/lib/components/layout/Sidebar.svelte   | 10 +++-------
 .../src/lib/components/ui/primitives/Button.svelte    | 11 +++--------
 .../src/lib/components/ui/primitives/Logo.svelte      |  2 +-
 web-player/src/routes/(app)/albums/[id]/+page.svelte  |  8 --------
 web-player/src/routes/(app)/mixes/[id]/+page.svelte   |  4 ----
 .../src/routes/(app)/playlists/[id]/+page.svelte      |  8 --------
 web-player/src/routes/+page.svelte                    |  8 ++++----
 7 files changed, 11 insertions(+), 40 deletions(-)

diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index d80d5d6..5a3bbc7 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -34,10 +34,6 @@
 	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 theme-transition lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
-	<a href="/" class="px-3 pb-3">
-		<Logo size="sm" />
-	</a>
-
 	<nav class="flex flex-col gap-1">
 		{#each navLinks as link (link.href)}
 			{@const active = isActive(link.href)}
@@ -48,7 +44,7 @@
 					? 'bg-surface-2 text-fg'
 					: 'text-fg-2 hover:bg-hover hover:text-fg'}"
 			>
-				<link.icon class="size-4.5 shrink-0" strokeWidth={1.5} />
+				<link.icon class="size-icon-md shrink-0" strokeWidth={1.5} />
 				<span class="flex-1 truncate">{link.label}</span>
 				{#if link.count}
 					<span class="text-xs text-muted tabular-nums">{link.count}</span>
@@ -68,12 +64,12 @@
 					size="xs"
 					onclick={() => createPlaylistModal.show()}
 				>
-					<Plus class="size-icon-sm" strokeWidth={1.25} />
+					<Plus class="size-icon-sm text-muted" strokeWidth={1.25} />
 				</IconButton>
 			{/if}
 		</div>
 
-		<div class="flex flex-1 flex-col gap-px overflow-y-auto pb-4.5">
+		<div class="flex flex-1 flex-col gap-px overflow-y-auto pb-icon-md">
 			{#each playlists as playlist (playlist.id)}
 				{@const active = page.url.pathname === `/playlists/${playlist.id}`}
 				<ListRow
diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index d7d4fdb..3217b15 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -3,7 +3,7 @@
 	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
 
 	interface Props {
-		variant?: 'primary' | 'secondary' | 'glass' | 'accent' | 'strong' | 'danger';
+		variant?: 'primary' | 'secondary' | 'accent' | 'danger';
 		size?: 'sm' | 'md' | 'lg';
 		type?: 'button' | 'submit';
 		href?: string;
@@ -34,15 +34,10 @@
 		lg: 'px-6 py-3.5 text-sm'
 	};
 
-	const subtle = 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg';
-	const glass = 'font-normal bg-btn-glass text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
-
 	const variants = {
-		primary: subtle,
-		secondary: subtle,
-		glass,
+		primary: 'bg-cta-strong text-ink hover:brightness-95',
+		secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg',
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
-		strong: 'bg-cta-strong text-ink hover:brightness-95',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
 
diff --git a/web-player/src/lib/components/ui/primitives/Logo.svelte b/web-player/src/lib/components/ui/primitives/Logo.svelte
index b2f7174..09a1f13 100644
--- a/web-player/src/lib/components/ui/primitives/Logo.svelte
+++ b/web-player/src/lib/components/ui/primitives/Logo.svelte
@@ -17,6 +17,6 @@
 </script>
 
 <span class="flex items-center gap-3">
-	<span class="{MARK[size]} bg-[image:var(--mf-logo-grad)]"></span>
+	<span class="{MARK[size]} bg-(image:--mf-logo-grad)"></span>
 	<span class={TEXT[size]}>Musify</span>
 </span>
diff --git a/web-player/src/routes/(app)/albums/[id]/+page.svelte b/web-player/src/routes/(app)/albums/[id]/+page.svelte
index 4915104..4e65994 100644
--- a/web-player/src/routes/(app)/albums/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/albums/[id]/+page.svelte
@@ -2,10 +2,6 @@
 	import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import X from '@lucide/svelte/icons/x';
 	import Plus from '@lucide/svelte/icons/plus';
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
-	import SquarePencil from '@lucide/svelte/icons/square-pen';
-	import Trash from '@lucide/svelte/icons/trash';
 	import Page from '$lib/components/ui/layout/Page.svelte';
 	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
 	import Modal from '$lib/components/ui/overlay/Modal.svelte';
@@ -76,20 +72,16 @@
 		{#snippet actions()}
 			<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
 				{#if isCurrentQueue && player.playing}
-					<Pause class="size-4" strokeWidth={1.5} />
 					Pausar
 				{:else}
-					<Play class="size-4" strokeWidth={1.5} />
 					Reproducir
 				{/if}
 			</Button>
 			{#if isOwner}
 				<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
-					<SquarePencil class="size-4" strokeWidth={1.5} />
 					Editar
 				</Button>
 				<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
-					<Trash class="size-4" strokeWidth={1.5} />
 					Eliminar
 				</Button>
 			{/if}
diff --git a/web-player/src/routes/(app)/mixes/[id]/+page.svelte b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
index fc77fc9..6f1c7a2 100644
--- a/web-player/src/routes/(app)/mixes/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import {
 		player,
@@ -75,10 +73,8 @@
 		{#snippet actions()}
 			<Button size="sm" onclick={() => playAllOrToggle(queue)} disabled={queue.length === 0}>
 				{#if isCurrentQueue && player.playing}
-					<Pause class="size-4" strokeWidth={1.5} />
 					Pausar
 				{:else}
-					<Play class="size-4" strokeWidth={1.5} />
 					Reproducir
 				{/if}
 			</Button>
diff --git a/web-player/src/routes/(app)/playlists/[id]/+page.svelte b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
index 0bd6168..82b7d5b 100644
--- a/web-player/src/routes/(app)/playlists/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
 	import ListMusic from '@lucide/svelte/icons/list-music';
 	import X from '@lucide/svelte/icons/x';
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
-	import SquarePencil from '@lucide/svelte/icons/square-pen';
-	import Trash from '@lucide/svelte/icons/trash';
 	import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import Page from '$lib/components/ui/layout/Page.svelte';
 	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
@@ -66,19 +62,15 @@
 		{#snippet actions()}
 			<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
 				{#if isCurrentQueue && player.playing}
-					<Pause class="size-4" strokeWidth={1.5} />
 					Pausar
 				{:else}
-					<Play class="size-4" strokeWidth={1.5} />
 					Reproducir
 				{/if}
 			</Button>
 			<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
-				<SquarePencil class="size-4" strokeWidth={1.5} />
 				Editar
 			</Button>
 			<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
-				<Trash class="size-4" strokeWidth={1.5} />
 				Eliminar
 			</Button>
 		{/snippet}
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 686e113..3a9643f 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -151,12 +151,12 @@
 				</p>
 				<div class="mt-6.5 flex flex-wrap items-center gap-2.5">
 					{#if spotlight}
-						<Button variant="strong" onclick={playSpotlight}>
+						<Button variant="primary" onclick={playSpotlight}>
 							{heroPlaying ? 'Pausar' : 'Reanudar'}
 							{spotlight.name}
 						</Button>
 					{/if}
-					<Button href="/explore" variant="glass">Explorar música</Button>
+					<Button href="/explore" variant="secondary">Explorar música</Button>
 				</div>
 			</div>
 
@@ -242,7 +242,7 @@
 						</p>
 						<div class="mt-5 flex gap-2.5">
 							<Button variant="accent" onclick={playSpotlight}>Reproducir</Button>
-							<Button variant="glass" onclick={shuffleSpotlight}>Aleatorio</Button>
+							<Button variant="secondary" onclick={shuffleSpotlight}>Aleatorio</Button>
 						</div>
 					</div>
 					<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">
@@ -314,7 +314,7 @@
 							trackId={track.id}
 						>
 							{#snippet leading()}
-								<span class="flex h-3.5 w-4.5 shrink-0 items-end justify-center">
+								<span class="flex h-3.5 w-icon-md shrink-0 items-end justify-center">
 									{#if isCurrent}
 										<EqBars size={13} paused={!player.playing} />
 									{:else}
-- 
2.54.0


From 434b2c1305c929f06b5dc92aa34a2b1ce5bf886c Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:15:53 +0200
Subject: [PATCH 19/50] Make the secondary button adapt to shifting backgrounds

secondary used a flat, static tint that only worked over a plain
surface, so it looked out of place on the hero's hue-shifting gradient.
Add a backdrop blur (no border, per feedback) so it always reads
against whatever's actually behind it. Gave the button its own
background tokens instead of aliasing --mf-surface-2, and dropped the
now-unused --color-btn-glass tokens left over from the removed glass
variant.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 web-player/src/lib/theme/theme.css                        | 8 ++------
 web-player/src/routes/layout.css                          | 2 --
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index 3217b15..d25f4e1 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -36,7 +36,7 @@
 
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg',
+		secondary: 'bg-btn backdrop-blur-md text-fg-2 hover:bg-btn-hover hover:text-fg',
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index ec2380d..07e79ec 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -14,10 +14,8 @@
 	--mf-surface: rgba(255, 255, 255, 0.022);
 	--mf-surface-2: rgba(255, 255, 255, 0.045);
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
-	--mf-btn-bg: var(--mf-surface-2);
+	--mf-btn-bg: rgba(255, 255, 255, 0.06);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
-	--mf-btn-secondary-bg: rgba(255, 255, 255, 0.045);
-	--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.07);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
 	--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -82,10 +80,8 @@
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
 	--mf-surface-hover: #e8eceb;
-	--mf-btn-bg: var(--mf-surface-2);
+	--mf-btn-bg: rgba(0, 0, 0, 0.07);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
-	--mf-btn-secondary-bg: rgba(0, 0, 0, 0.09);
-	--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.14);
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);
 	--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 8c8ee99..425fe11 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -32,8 +32,6 @@
 	--color-danger-fg: oklch(88.5% 0.062 18.334);
 	--color-btn: var(--mf-btn-bg);
 	--color-btn-hover: var(--mf-btn-bg-hover);
-	--color-btn-glass: var(--mf-btn-secondary-bg);
-	--color-btn-glass-hover: var(--mf-btn-secondary-bg-hover);
 
 	--radius-tag: 0.25rem;
 	--radius-thumb: 0.5rem;
-- 
2.54.0


From 68b5709d889c32538822c55389130837c3b32234 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:23:57 +0200
Subject: [PATCH 20/50] Tie secondary button color to the page background
 instead of a flat tint

secondary was fully bg-transparent (invisible at rest) or a flat neutral
overlay (clashed next to accent-tinted buttons and looked different
depending on what surface it sat on). Use bg-elevated instead, which is
already derived from the same hue as --mf-bg, so the button is always a
faint, minimal step above whatever page background it's on, and shifts
with it automatically.

Drop the now-unused --color-btn/--mf-btn-bg tokens.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 web-player/src/lib/theme/theme.css                        | 2 --
 web-player/src/routes/layout.css                          | 1 -
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index d25f4e1..0fafc8c 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -36,7 +36,7 @@
 
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: 'bg-btn backdrop-blur-md text-fg-2 hover:bg-btn-hover hover:text-fg',
+		secondary: 'bg-elevated text-fg-2 hover:bg-btn-hover hover:text-fg',
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index 07e79ec..bdd79e8 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -14,7 +14,6 @@
 	--mf-surface: rgba(255, 255, 255, 0.022);
 	--mf-surface-2: rgba(255, 255, 255, 0.045);
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
-	--mf-btn-bg: rgba(255, 255, 255, 0.06);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
@@ -80,7 +79,6 @@
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
 	--mf-surface-hover: #e8eceb;
-	--mf-btn-bg: rgba(0, 0, 0, 0.07);
 	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 425fe11..24d2a6c 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -30,7 +30,6 @@
 	--color-on-art-2: var(--mf-on-art-2);
 	--color-danger: oklch(63.7% 0.15 25.331);
 	--color-danger-fg: oklch(88.5% 0.062 18.334);
-	--color-btn: var(--mf-btn-bg);
 	--color-btn-hover: var(--mf-btn-bg-hover);
 
 	--radius-tag: 0.25rem;
-- 
2.54.0


From 4fbd4fa81d9a47a65b7d4afbfdad42395306aead Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:31:22 +0200
Subject: [PATCH 21/50] Make secondary button translucent so it tracks whatever
 surface it's on

bg-elevated is fully opaque and only hue-matches --mf-bg (the plain
page background), so it stayed stark white on the hero/spotlight cards,
which use a separately-computed, more saturated gradient (--mf-hero-bg/
--mf-spotlight-bg). An opaque fill can never pick up that color no
matter what hue it's tied to.

Make it translucent (bg-elevated/45) with backdrop-blur-lg so it
samples and lightly tints whatever is actually behind it, hero card,
spotlight card, or plain background, instead of only matching one of
them.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index 0fafc8c..f85d018 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -36,7 +36,7 @@
 
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: 'bg-elevated text-fg-2 hover:bg-btn-hover hover:text-fg',
+		secondary: 'bg-elevated/45 backdrop-blur-lg text-fg-2 hover:bg-btn-hover hover:text-fg',
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
-- 
2.54.0


From b82fca0bc249535653419e6f45380d5af403679f Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:34:34 +0200
Subject: [PATCH 22/50] Drop backdrop-blur on secondary for a consistent
 hue-tied tint

Sampling whatever's behind the button via backdrop-filter meant two
secondary buttons could render differently depending on what happened
to be nearby (e.g. dark album art bleeding into the blur), so
"Explorar musica" and "Aleatorio" ended up visibly different colors
despite being the same variant. Replace it with a fixed, hue-tied
translucent tint (bg-accent-tint, the same token family accent already
uses) so every secondary button computes to the identical color, ties
into the same dynamic accent hue as the rest of the app, and reads as
a softer sibling of the accent button instead of an unrelated gray.

Hover now steps up to bg-accent-btn (same hue family, stronger) instead
of a flat, hue-agnostic gray. Removed the now-unused --mf-btn-bg-hover/
--color-btn-hover tokens.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 web-player/src/lib/theme/theme.css                        | 2 --
 web-player/src/routes/layout.css                          | 1 -
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index f85d018..ea89644 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -36,7 +36,7 @@
 
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: 'bg-elevated/45 backdrop-blur-lg text-fg-2 hover:bg-btn-hover hover:text-fg',
+		secondary: 'bg-accent-tint text-fg-2 hover:bg-accent-btn hover:text-fg',
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index bdd79e8..c397b6e 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -14,7 +14,6 @@
 	--mf-surface: rgba(255, 255, 255, 0.022);
 	--mf-surface-2: rgba(255, 255, 255, 0.045);
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
-	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
 	--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -79,7 +78,6 @@
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
 	--mf-surface-hover: #e8eceb;
-	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);
 	--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 24d2a6c..7191475 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -30,7 +30,6 @@
 	--color-on-art-2: var(--mf-on-art-2);
 	--color-danger: oklch(63.7% 0.15 25.331);
 	--color-danger-fg: oklch(88.5% 0.062 18.334);
-	--color-btn-hover: var(--mf-btn-bg-hover);
 
 	--radius-tag: 0.25rem;
 	--radius-thumb: 0.5rem;
-- 
2.54.0


From d6bff15f119f581800150597e94b55b5a93c866b Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:50:59 +0200
Subject: [PATCH 23/50] Replace secondary button's backdrop-blur with an
 equivalent fixed color

backdrop-blur samples whatever is actually behind the element, so two
secondary buttons with identical classes could render differently
depending on nearby content (e.g. dark album art bleeding into the
blur near the spotlight card). Replace it with a fixed color-mix that
reproduces the same result mathematically instead of sampling pixels:
45% --mf-elevated over the hero/spotlight surface's own tint color
(16% --mf-hero-tint over --mf-bg, the same ratio hero-surface itself
uses), computed via CSS color-mix() rather than a backdrop-filter.

Verified against the previous blur version: both now compute to the
identical color(srgb 0.9329 0.9611 0.9332), matching what the blurred
button rendered against the same hero background, but fixed so every
secondary button is now guaranteed pixel-identical regardless of what
happens to be nearby.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 web-player/src/lib/theme/tokens.ts                        | 1 +
 web-player/src/routes/layout.css                          | 6 ++++++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index ea89644..3217b15 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -36,7 +36,7 @@
 
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: 'bg-accent-tint text-fg-2 hover:bg-accent-btn hover:text-fg',
+		secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg',
 		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index faa255e..266cec8 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -55,6 +55,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-ambient': light
 			? 'none'
 			: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
+		'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
 		'--mf-hero-bg': light
 			? `linear-gradient(${tcLight(0.16, 55, h)}, ${tcLight(0.16, 55, h)})`
 			: `linear-gradient(105deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 37%, ${tc(0.03, 88, h)} 65%, rgba(6,6,9,0) 92%)`,
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 7191475..9a6cb67 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -30,6 +30,12 @@
 	--color-on-art-2: var(--mf-on-art-2);
 	--color-danger: oklch(63.7% 0.15 25.331);
 	--color-danger-fg: oklch(88.5% 0.062 18.334);
+	--color-btn: color-mix(
+		in srgb,
+		var(--mf-elevated) 45%,
+		color-mix(in srgb, var(--mf-hero-tint) 16%, var(--mf-bg))
+	);
+	--color-btn-hover: var(--mf-btn-bg-hover);
 
 	--radius-tag: 0.25rem;
 	--radius-thumb: 0.5rem;
-- 
2.54.0


From cd2131ef6fa856da45828cb68b57a3f6eea92210 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 17:55:39 +0200
Subject: [PATCH 24/50] Make the dynamic light-mode hue palette more pastel and
 colorful

The hue-driven light-mode tokens (page bg, hero/modal/spotlight
gradients, hairlines, logo/cover art gradients) leaned nearly
grayscale, with just a whisper of tint. Push tcLight()'s lightness
and chroma up together so every derived surface stays light and soft
but reads as an actual color instead of a faint gray wash, and bump
chroma on --mf-bg/--mf-elevated/--mf-panel-bg/--mf-bar-bg/--mf-hairline
and the logo/cover gradient stops the same way.

Scoped to light mode only: dark mode's accents are meant to read as
bright highlights against near-black surfaces, where a pastel wash
would just look washed out rather than colorful.
---
 web-player/src/lib/theme/tokens.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 266cec8..7d4b720 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -15,8 +15,8 @@ function tc(alpha: number, l: number, hue: number): string {
 
 function tcLight(alpha: number, l: number, hue: number): string {
 	const depth = (88 - l) / 58;
-	const lightness = 0.88 - 0.16 * depth;
-	const chroma = 0.03 + 0.11 * depth;
+	const lightness = 0.9 - 0.14 * depth;
+	const chroma = 0.05 + 0.13 * depth;
 	return `oklch(${r(lightness)} ${r(chroma)} ${r(hue, 1)} / ${alpha})`;
 }
 
@@ -47,11 +47,11 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-accent-hair': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.09)`,
 		'--mf-accent-btn-bg': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.15)`,
 		'--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`,
-		'--mf-bg': light ? `oklch(0.97 0.006 ${H})` : `oklch(0.068 0.008 ${H})`,
-		'--mf-elevated': light ? `oklch(0.99 0.003 ${H})` : `oklch(0.11 0.012 ${H})`,
-		'--mf-panel-bg': light ? `oklch(0.97 0.006 ${H} / 0.7)` : `oklch(0.09 0.01 ${H} / 0.28)`,
-		'--mf-bar-bg': light ? `oklch(0.97 0.006 ${H} / 0.9)` : `oklch(0.105 0.012 ${H} / 0.9)`,
-		'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.1)` : `oklch(0.62 0.03 ${H} / 0.08)`,
+		'--mf-bg': light ? `oklch(0.97 0.014 ${H})` : `oklch(0.068 0.008 ${H})`,
+		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.11 0.012 ${H})`,
+		'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.09 0.01 ${H} / 0.28)`,
+		'--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.105 0.012 ${H} / 0.9)`,
+		'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.03 ${H} / 0.08)`,
 		'--mf-ambient': light
 			? 'none'
 			: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
@@ -66,10 +66,10 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 			? `linear-gradient(${tcLight(0.16, 55, h)}, ${tcLight(0.16, 55, h)})`
 			: `linear-gradient(100deg, ${tc(0.28, 46, h)} 0%, ${tc(0.1, 74, h)} 40%, ${tc(0.03, 88, h)} 69%, rgba(6,6,9,0) 96%)`,
 		'--mf-logo-grad': light
-			? `linear-gradient(140deg, oklch(0.68 0.16 ${H}), oklch(0.5 0.14 ${H2}) 92%)`
+			? `linear-gradient(140deg, oklch(0.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
 			: `linear-gradient(140deg, oklch(0.78 0.15 ${H}), oklch(0.62 0.13 ${H2}) 92%)`,
 		'--mf-cover-grad': light
-			? `linear-gradient(150deg, oklch(0.62 0.14 ${H}), oklch(0.44 0.08 ${H}))`
+			? `linear-gradient(150deg, oklch(0.7 0.16 ${H}), oklch(0.54 0.11 ${H}))`
 			: `linear-gradient(150deg, oklch(0.5 0.13 ${H}), oklch(0.16 0.035 ${H}))`
 	};
 }
-- 
2.54.0


From 8d178884d4f0aafa0ff071f0f885ecd91b90f455 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 18:01:25 +0200
Subject: [PATCH 25/50] Sync sidebar/queue/player bar color transitions with
 the main background

Sidebar, Queue, PlayerBar, TabsBar, and the hero/spotlight surfaces all
had an extra CSS `transition: background 0.5s ease-out` (theme-transition/
glass-bar) layered on top of backgrounds that are already animated
frame-by-frame over 600ms by the hue-interpolation loop in +layout.svelte.
That extra transition made them visibly lag behind and take a different
amount of time than the main app-backdrop, which has no such transition
and therefore tracks the JS animation exactly. Drop the redundant
transition so every hue-driven surface updates in lockstep.

Also fixes a dangling --color-btn-hover: var(--mf-btn-bg-hover) that
referenced an undefined custom property (theme.css never defined
--mf-btn-bg-hover after an earlier partial commit), which silently
broke the secondary button's hover background.
---
 web-player/src/lib/components/layout/Sidebar.svelte | 2 +-
 web-player/src/lib/components/player/Queue.svelte   | 2 +-
 web-player/src/lib/theme/theme.css                  | 2 ++
 web-player/src/routes/+page.svelte                  | 4 ++--
 web-player/src/routes/layout.css                    | 4 ----
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index 5a3bbc7..06261ff 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <aside
-	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 theme-transition lg:flex"
+	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
 	<nav class="flex flex-col gap-1">
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 86c1375..22d620a 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -18,7 +18,7 @@
 {#if queuePanel.open}
 	<aside
 		transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
-		class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 theme-transition sm:flex"
+		class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
 		<div class="mb-5 flex items-center justify-between">
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index c397b6e..bdd79e8 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -14,6 +14,7 @@
 	--mf-surface: rgba(255, 255, 255, 0.022);
 	--mf-surface-2: rgba(255, 255, 255, 0.045);
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
+	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
 	--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -78,6 +79,7 @@
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
 	--mf-surface-hover: #e8eceb;
+	--mf-btn-bg-hover: var(--mf-surface-hover);
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);
 	--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 3a9643f..dfbc03b 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -135,7 +135,7 @@
 
 <Page>
 	<div
-		class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 theme-transition sm:px-9 sm:py-8.5"
+		class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5"
 	>
 		<div
 			class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
@@ -211,7 +211,7 @@
 		{#if spotlight}
 			<section>
 				<div
-					class="grid grid-cols-1 overflow-hidden rounded-panel-lg spotlight-surface theme-transition lg:grid-cols-2"
+					class="grid grid-cols-1 overflow-hidden rounded-panel-lg spotlight-surface lg:grid-cols-2"
 				>
 					<div class="flex flex-col justify-center p-8 sm:p-9">
 						<div
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 9a6cb67..c41fcbd 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -121,14 +121,10 @@
 	@apply text-xs tabular-nums;
 }
 
-@utility theme-transition {
-	transition: background 0.5s ease-out;
-}
 @utility glass-bar {
 	background-image: var(--mf-bar-bg);
 	border-top: 1px solid var(--mf-hairline);
 	backdrop-filter: blur(24px);
-	transition: background 0.5s ease-out;
 }
 @utility grid-cards {
 	display: grid;
-- 
2.54.0


From b168df6ca64002886f285eff5f6a089afcbaf6d8 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 18:06:11 +0200
Subject: [PATCH 26/50] Make the hero/spotlight surface tint more transparent

--mf-hero-bg/--mf-spotlight-bg's overlay tint was at 16% alpha, which
after the pastel lightness/chroma boost read as a fairly solid block
of color rather than a soft wash. Halve it to 8% so more of the plain
page background shows through underneath.

Keep the secondary button's color-mix ratio (in layout.css) in sync at
8% too, since it's built to replicate exactly what the surface behind
it looks like.
---
 web-player/src/lib/theme/tokens.ts | 4 ++--
 web-player/src/routes/layout.css   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 7d4b720..7026a17 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -57,13 +57,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 			: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
 		'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
 		'--mf-hero-bg': light
-			? `linear-gradient(${tcLight(0.16, 55, h)}, ${tcLight(0.16, 55, h)})`
+			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
 			: `linear-gradient(105deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 37%, ${tc(0.03, 88, h)} 65%, rgba(6,6,9,0) 92%)`,
 		'--mf-modal-glow': light
 			? `linear-gradient(135deg, ${tcLight(0.34, 42, h)} 0%, ${tcLight(0.2, 55, h)} 30%, ${tcLight(0.1, 70, h)} 55%, ${tcLight(0.04, 85, h)} 80%, ${tcLight(0.02, 88, h)} 100%)`
 			: `linear-gradient(135deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 28%, ${tc(0.03, 88, h)} 50%, rgba(6,6,9,0) 70%)`,
 		'--mf-spotlight-bg': light
-			? `linear-gradient(${tcLight(0.16, 55, h)}, ${tcLight(0.16, 55, h)})`
+			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
 			: `linear-gradient(100deg, ${tc(0.28, 46, h)} 0%, ${tc(0.1, 74, h)} 40%, ${tc(0.03, 88, h)} 69%, rgba(6,6,9,0) 96%)`,
 		'--mf-logo-grad': light
 			? `linear-gradient(140deg, oklch(0.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index c41fcbd..3c86f43 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -33,7 +33,7 @@
 	--color-btn: color-mix(
 		in srgb,
 		var(--mf-elevated) 45%,
-		color-mix(in srgb, var(--mf-hero-tint) 16%, var(--mf-bg))
+		color-mix(in srgb, var(--mf-hero-tint) 8%, var(--mf-bg))
 	);
 	--color-btn-hover: var(--mf-btn-bg-hover);
 
-- 
2.54.0


From 078f7ac6f6d64e71f8a31c3fcc11a597749e55af Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 18:08:58 +0200
Subject: [PATCH 27/50] Stop Button's generic transition from lagging its
 hue-driven background

Button used Tailwind's bare `transition` utility, whose default
property list includes background-color. Since the button's bg is a
CSS custom property recomputed every frame by the same 600ms hue
animation the main background uses, that extra transition smoothed it
on a different (~150ms) timing, so its color change didn't match the
page background's.

Add a btn-transition utility that mirrors Tailwind's default
transition list minus background-color, so the button's background
tracks the hue animation frame-for-frame like the rest of the app,
while hover/focus feedback (text color, ring, filter) still transitions
normally.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 web-player/src/routes/layout.css                          | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index 3217b15..dacd71e 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -42,7 +42,7 @@
 	};
 
 	const classes = $derived(
-		`inline-flex items-center justify-center gap-2 rounded-control transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
+		`inline-flex items-center justify-center gap-2 rounded-control btn-transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
 	);
 </script>
 
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 3c86f43..ffa5a8e 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -121,6 +121,11 @@
 	@apply text-xs tabular-nums;
 }
 
+@utility btn-transition {
+	transition-property: color, border-color, outline-color, opacity, box-shadow, filter;
+	transition-timing-function: var(--default-transition-timing-function);
+	transition-duration: var(--default-transition-duration);
+}
 @utility glass-bar {
 	background-image: var(--mf-bar-bg);
 	border-top: 1px solid var(--mf-hairline);
-- 
2.54.0


From aca4b73fac770cf88adac98ab71f842ba037ae2a Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 18:41:03 +0200
Subject: [PATCH 28/50] Match the accent button's background to the active-row
 highlight

Button's accent variant used bg-accent-btn (15% alpha) while the
active-track highlight in ListRow/TrackList uses bg-accent-tint (8%
alpha) with the same text-accent-soft title color, so a button like
"Reproducir" sat at a visibly different tint than the row it plays.
Use bg-accent-tint for accent's resting background too, so both read
as the same accent color; hover still steps up to bg-accent-btn-hover.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index dacd71e..45e4bed 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -37,7 +37,7 @@
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
 		secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg',
-		accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
+		accent: 'bg-accent-tint text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
 
-- 
2.54.0


From 6e86c3d2c5063dd07b3a92ed365730ac272c30fc Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 18:46:17 +0200
Subject: [PATCH 29/50] Carry track duration through the queue pipeline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ApiTrackLike/QueueItem had no duration field, so toQueueItem(s) always
dropped it and toTrack() hardcoded a new track's duration to 0, relying
entirely on the <audio> element's durationchange/loadedmetadata events
to fill it in once that track actually became current. Upcoming queue
rows never reach that point, so "A continuación" always showed a blank
duration even though the backend already returns it.

Add duration to both types, thread it through toQueueItems/toQueueItem/
trackFromQueueItem, and seed toTrack() from it. The real-time audio
sync still overwrites it once a track actually plays, so this only
fills the gap for tracks that haven't played yet.

Also map MixItemApplicationResponse's durationSeconds through
mixItemTrack, since mixes use a differently-named field.
---
 web-player/src/lib/data/mixes.ts           | 1 +
 web-player/src/lib/player/player.svelte.ts | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web-player/src/lib/data/mixes.ts b/web-player/src/lib/data/mixes.ts
index e08ab79..aa8d2ee 100644
--- a/web-player/src/lib/data/mixes.ts
+++ b/web-player/src/lib/data/mixes.ts
@@ -13,6 +13,7 @@ export function mixItemTrack(item: MixItem): ApiTrackLike {
 		id: item.trackId,
 		title: item.title,
 		artist: item.artist,
+		duration: item.durationSeconds,
 		listensCount: item.listensCount
 	};
 }
diff --git a/web-player/src/lib/player/player.svelte.ts b/web-player/src/lib/player/player.svelte.ts
index 3ffb930..7c503c4 100644
--- a/web-player/src/lib/player/player.svelte.ts
+++ b/web-player/src/lib/player/player.svelte.ts
@@ -23,6 +23,7 @@ export interface QueueItem {
 	id: string | number;
 	title: string;
 	artist?: string;
+	duration?: number | string;
 	explicit?: boolean;
 	ownerUserId?: string | number | null;
 	listensCount?: number | string;
@@ -32,6 +33,7 @@ export interface ApiTrackLike {
 	id: string | number;
 	title: string;
 	artist?: string | null;
+	duration?: number | string;
 	isExplicit?: boolean;
 	ownerUserId?: string | number | null;
 	listensCount?: number | string;
@@ -42,6 +44,7 @@ export function toQueueItems(tracks: ApiTrackLike[]): QueueItem[] {
 		id: track.id,
 		title: track.title,
 		artist: track.artist ?? undefined,
+		duration: track.duration,
 		explicit: track.isExplicit,
 		ownerUserId: track.ownerUserId,
 		listensCount: track.listensCount
@@ -57,6 +60,7 @@ export function trackFromQueueItem(item: QueueItem): ApiTrackLike {
 		id: item.id,
 		title: item.title,
 		artist: item.artist,
+		duration: item.duration,
 		isExplicit: item.explicit,
 		ownerUserId: item.ownerUserId,
 		listensCount: item.listensCount
@@ -101,7 +105,7 @@ function toTrack(item: QueueItem): PlayerTrack {
 		id: item.id,
 		title: item.title,
 		artist: item.artist ?? '',
-		duration: 0,
+		duration: Number(item.duration) || 0,
 		explicit: item.explicit,
 		ownerUserId: item.ownerUserId,
 		listensCount: item.listensCount
-- 
2.54.0


From fe21c1981049b5be14e3a4d84b89df0211f04e4d Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 18:57:16 +0200
Subject: [PATCH 30/50] Make dark mode more colorful and give chrome bars a
 full tint

Mirror the earlier light-mode pastel/colorful pass for dark mode:
boost tc()'s lightness and chroma, and richen --mf-bg/--mf-elevated/
--mf-panel-bg/--mf-bar-bg/--mf-hairline the same way, so dark mode
reads as colorful instead of near-grayscale.

Sidebar, Queue, and MobileHeader used bg-bg directly, so in dark mode
they stayed almost black regardless of hue. Add --mf-chrome-bg (an
alias to --mf-bg in light mode, a solid color-mix of --mf-hero-tint
into --mf-bg in dark mode) and switch those three to bg-chrome, so
they read as a full, solid colored bar in dark mode instead of a
fading gradient (per feedback: a whole bar, not a gradient).

Also fixes glass-bar (PlayerBar/TabsBar): it set
`background-image: var(--mf-bar-bg)`, but --mf-bar-bg is a plain
color, not a valid <image>, so the declaration was silently dropped
and these bars never actually showed their tint in either mode. Changed
to background-color.
---
 .../src/lib/components/layout/MobileHeader.svelte |  2 +-
 .../src/lib/components/layout/Sidebar.svelte      |  2 +-
 web-player/src/lib/components/player/Queue.svelte |  2 +-
 web-player/src/lib/theme/tokens.ts                | 15 ++++++++-------
 web-player/src/routes/layout.css                  |  3 ++-
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte
index e219c10..bb027d0 100644
--- a/web-player/src/lib/components/layout/MobileHeader.svelte
+++ b/web-player/src/lib/components/layout/MobileHeader.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-bg/85 page-x backdrop-blur-md sm:hidden"
+	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-chrome/85 page-x backdrop-blur-md sm:hidden"
 >
 	<a href="/">
 		<Logo size="sm" />
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index 06261ff..e835f10 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <aside
-	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 lg:flex"
+	class="hidden shrink-0 flex-col border-r border-hairline bg-chrome p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
 	<nav class="flex flex-col gap-1">
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 22d620a..dfa0c13 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -18,7 +18,7 @@
 {#if queuePanel.open}
 	<aside
 		transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
-		class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 sm:flex"
+		class="hidden shrink-0 flex-col border-l border-hairline bg-chrome px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
 		<div class="mb-5 flex items-center justify-between">
diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 7026a17..b85183a 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -8,8 +8,8 @@ function r(value: number, digits = 4): string {
 }
 
 function tc(alpha: number, l: number, hue: number): string {
-	const lightness = 0.34 - l / 380;
-	const chroma = Math.max(0, 0.11 - l / 1600);
+	const lightness = 0.37 - l / 380;
+	const chroma = Math.max(0, 0.15 - l / 1600);
 	return `oklch(${r(lightness)} ${r(chroma)} ${r(hue, 1)} / ${alpha})`;
 }
 
@@ -47,11 +47,12 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-accent-hair': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.09)`,
 		'--mf-accent-btn-bg': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.15)`,
 		'--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`,
-		'--mf-bg': light ? `oklch(0.97 0.014 ${H})` : `oklch(0.068 0.008 ${H})`,
-		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.11 0.012 ${H})`,
-		'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.09 0.01 ${H} / 0.28)`,
-		'--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.105 0.012 ${H} / 0.9)`,
-		'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.03 ${H} / 0.08)`,
+		'--mf-bg': light ? `oklch(0.97 0.014 ${H})` : `oklch(0.075 0.02 ${H})`,
+		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.025 ${H})`,
+		'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.1 0.022 ${H} / 0.28)`,
+		'--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.115 0.025 ${H} / 0.9)`,
+		'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.05 ${H} / 0.08)`,
+		'--mf-chrome-bg': light ? 'var(--mf-bg)' : `color-mix(in srgb, ${tc(1, 42, h)} 40%, var(--mf-bg))`,
 		'--mf-ambient': light
 			? 'none'
 			: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index ffa5a8e..8c13d4b 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -5,6 +5,7 @@
 	--font-display: 'Sora Variable', ui-sans-serif, system-ui, sans-serif;
 
 	--color-bg: var(--mf-bg);
+	--color-chrome: var(--mf-chrome-bg);
 	--color-elevated: var(--mf-elevated);
 	--color-surface: var(--mf-surface);
 	--color-surface-2: var(--mf-surface-2);
@@ -127,7 +128,7 @@
 	transition-duration: var(--default-transition-duration);
 }
 @utility glass-bar {
-	background-image: var(--mf-bar-bg);
+	background-color: var(--mf-bar-bg);
 	border-top: 1px solid var(--mf-hairline);
 	backdrop-filter: blur(24px);
 }
-- 
2.54.0


From 8deb762a52feba1bdaf1003397f6d66d9503218b Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 19:02:10 +0200
Subject: [PATCH 31/50] Revert chrome-bg: sidebar/queue should just be the
 tinted background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per feedback, the solid color-mix bar was wrong — sidebar, queue and
the mobile header should stay on the plain --mf-bg (the same subtly
hue-shifting black used everywhere else), exactly like light mode
already does, not a separately-boosted colored panel. Drop --mf-chrome-bg/
--color-chrome and switch those three back to bg-bg.

The general dark-mode richness bump (tc(), --mf-bg/--mf-elevated/etc.)
and the glass-bar background-color fix from the previous commit stay;
only the separate chrome treatment is reverted.
---
 web-player/src/lib/components/layout/MobileHeader.svelte | 2 +-
 web-player/src/lib/components/layout/Sidebar.svelte      | 2 +-
 web-player/src/lib/components/player/Queue.svelte        | 2 +-
 web-player/src/lib/theme/tokens.ts                       | 1 -
 web-player/src/routes/layout.css                         | 1 -
 5 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte
index bb027d0..e219c10 100644
--- a/web-player/src/lib/components/layout/MobileHeader.svelte
+++ b/web-player/src/lib/components/layout/MobileHeader.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-chrome/85 page-x backdrop-blur-md sm:hidden"
+	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-bg/85 page-x backdrop-blur-md sm:hidden"
 >
 	<a href="/">
 		<Logo size="sm" />
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index e835f10..06261ff 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <aside
-	class="hidden shrink-0 flex-col border-r border-hairline bg-chrome p-5 lg:flex"
+	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
 	<nav class="flex flex-col gap-1">
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index dfa0c13..22d620a 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -18,7 +18,7 @@
 {#if queuePanel.open}
 	<aside
 		transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
-		class="hidden shrink-0 flex-col border-l border-hairline bg-chrome px-4 pt-5 sm:flex"
+		class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
 		<div class="mb-5 flex items-center justify-between">
diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index b85183a..8ac8e77 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -52,7 +52,6 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.1 0.022 ${H} / 0.28)`,
 		'--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.115 0.025 ${H} / 0.9)`,
 		'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.05 ${H} / 0.08)`,
-		'--mf-chrome-bg': light ? 'var(--mf-bg)' : `color-mix(in srgb, ${tc(1, 42, h)} 40%, var(--mf-bg))`,
 		'--mf-ambient': light
 			? 'none'
 			: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 8c13d4b..1193b00 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -5,7 +5,6 @@
 	--font-display: 'Sora Variable', ui-sans-serif, system-ui, sans-serif;
 
 	--color-bg: var(--mf-bg);
-	--color-chrome: var(--mf-chrome-bg);
 	--color-elevated: var(--mf-elevated);
 	--color-surface: var(--mf-surface);
 	--color-surface-2: var(--mf-surface-2);
-- 
2.54.0


From 6be5c43e6d07e6b1ecb02a387329f838ccd52aeb Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 19:46:25 +0200
Subject: [PATCH 32/50] Let sidebar and queue show the same ambient backdrop as
 the center
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar and Queue painted their own opaque bg-bg, which sat in front of
the fixed, full-viewport app-backdrop div (z-index: -10) that carries
--mf-ambient's radial-gradient glow in dark mode. Since the main content
area has no background of its own, the glow only ever showed through
there — sidebar and queue blocked it with a flat, gradient-less fill of
the same base color.

Drop bg-bg from both so the same app-backdrop (color + ambient gradient)
shows through underneath them too. In light mode this is a no-op
(--mf-ambient is 'none' and app-backdrop's flat color already matches
what bg-bg painted), so only dark mode is visually affected.
---
 web-player/src/lib/components/layout/Sidebar.svelte | 2 +-
 web-player/src/lib/components/player/Queue.svelte   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index 06261ff..f4cf981 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <aside
-	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 lg:flex"
+	class="hidden shrink-0 flex-col border-r border-hairline p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
 	<nav class="flex flex-col gap-1">
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 22d620a..bf485f9 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -18,7 +18,7 @@
 {#if queuePanel.open}
 	<aside
 		transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
-		class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 sm:flex"
+		class="hidden shrink-0 flex-col border-l border-hairline px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
 		<div class="mb-5 flex items-center justify-between">
-- 
2.54.0


From d98d01ab204b9a5650a3c0009038279e0d002518 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 19:50:23 +0200
Subject: [PATCH 33/50] Make the dark-mode ambient glow more subtle and spread
 further

The two radial glows behind app-backdrop were fairly small (52%/38%
and 46%/34% ellipses) and faded out by half their radius, so they only
covered the top portion of the viewport at a fairly strong 0.26/0.2
alpha. Enlarge both ellipses and push the fade-out point out to 88%,
so the tint reaches much further across the screen like light mode's
flat wash does, while lowering the alpha so it reads as subtle instead
of a bright patch in the corners.
---
 web-player/src/lib/theme/tokens.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 8ac8e77..af96f66 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -54,7 +54,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.05 ${H} / 0.08)`,
 		'--mf-ambient': light
 			? 'none'
-			: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
+			: `radial-gradient(95% 85% at 20% 0%, ${tc(0.12, 30, h)}, transparent 88%), radial-gradient(90% 80% at 80% 0%, ${tc(0.09, 40, h)}, transparent 88%)`,
 		'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
 		'--mf-hero-bg': light
 			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
-- 
2.54.0


From 94f80c03c58fb50eb1ee6509fedf072ee5b8cd05 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 19:53:21 +0200
Subject: [PATCH 34/50] Make dark-mode hero/spotlight cards a solid color, not
 a fading gradient

--mf-hero-bg/--mf-spotlight-bg were multi-stop, directional gradients
in dark mode (fading from a vivid corner to transparent), unlike light
mode which uses the same color at both gradient stops so it reads as
flat. Match that: both now use a single tc() tone repeated at both
stops, so the hero and spotlight cards render as one solid tint in
dark mode too.
---
 web-player/src/lib/theme/tokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index af96f66..9275f0b 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -58,13 +58,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
 		'--mf-hero-bg': light
 			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
-			: `linear-gradient(105deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 37%, ${tc(0.03, 88, h)} 65%, rgba(6,6,9,0) 92%)`,
+			: `linear-gradient(${tc(0.2, 42, h)}, ${tc(0.2, 42, h)})`,
 		'--mf-modal-glow': light
 			? `linear-gradient(135deg, ${tcLight(0.34, 42, h)} 0%, ${tcLight(0.2, 55, h)} 30%, ${tcLight(0.1, 70, h)} 55%, ${tcLight(0.04, 85, h)} 80%, ${tcLight(0.02, 88, h)} 100%)`
 			: `linear-gradient(135deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 28%, ${tc(0.03, 88, h)} 50%, rgba(6,6,9,0) 70%)`,
 		'--mf-spotlight-bg': light
 			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
-			: `linear-gradient(100deg, ${tc(0.28, 46, h)} 0%, ${tc(0.1, 74, h)} 40%, ${tc(0.03, 88, h)} 69%, rgba(6,6,9,0) 96%)`,
+			: `linear-gradient(${tc(0.2, 42, h)}, ${tc(0.2, 42, h)})`,
 		'--mf-logo-grad': light
 			? `linear-gradient(140deg, oklch(0.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
 			: `linear-gradient(140deg, oklch(0.78 0.15 ${H}), oklch(0.62 0.13 ${H2}) 92%)`,
-- 
2.54.0


From 79698f22654f90433ea91bebba78c3ebea23ad4d Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 19:58:39 +0200
Subject: [PATCH 35/50] Brighten secondary button text for dark-mode legibility

secondary used text-fg-2 (--mf-text-2), which in dark mode is a fairly
dim mid-gray (#8a8a8e) that read poorly against the dark bg-btn fill,
even though the same class looks great in light mode where --mf-text-2
is a dark, high-contrast gray. Use text-fg instead, which is tuned
bright in dark mode and dark in light mode, so both modes get good
contrast from the same class. Drop the now-redundant hover:text-fg
since resting state already uses it.
---
 web-player/src/lib/components/ui/primitives/Button.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index 45e4bed..8933828 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -36,7 +36,7 @@
 
 	const variants = {
 		primary: 'bg-cta-strong text-ink hover:brightness-95',
-		secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg',
+		secondary: 'bg-btn text-fg hover:bg-btn-hover',
 		accent: 'bg-accent-tint text-accent-soft hover:bg-accent-btn-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
-- 
2.54.0


From 3ab43a2ef63cb6f746be01770d0a57748b22ff18 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:02:33 +0200
Subject: [PATCH 36/50] Dim the dark-mode primary button from pure white to a
 soft off-white

--mf-cta-strong-bg was #ffffff in dark mode, reading as too bright/
glaring against the dark surfaces around it. Use #e6e6e8 instead, a
still-white but slightly dimmed tone. Light mode's own value (#17171a,
already dark) is untouched.
---
 web-player/src/lib/theme/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index bdd79e8..6c24c18 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -24,7 +24,7 @@
 	--mf-on-art: #fefdfb;
 	--mf-on-art-2: #cac8c3;
 	--mf-ink: #0a0a0d;
-	--mf-cta-strong-bg: #ffffff;
+	--mf-cta-strong-bg: #e6e6e8;
 
 	--mf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 
-- 
2.54.0


From 2272a401bb61cf3fed6050a922ce7f182315b7f7 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:05:03 +0200
Subject: [PATCH 37/50] Dim the dark-mode primary button further

#e6e6e8 still read as too white per feedback. Use #c4c4c8, a clearly
gray tone instead of an off-white, while text-ink still contrasts
comfortably against it.
---
 web-player/src/lib/theme/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index 6c24c18..4ba3f03 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -24,7 +24,7 @@
 	--mf-on-art: #fefdfb;
 	--mf-on-art-2: #cac8c3;
 	--mf-ink: #0a0a0d;
-	--mf-cta-strong-bg: #e6e6e8;
+	--mf-cta-strong-bg: #c4c4c8;
 
 	--mf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 
-- 
2.54.0


From 94a1981a4cc5453bacf2dba66e710d142f1f3c52 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:14:46 +0200
Subject: [PATCH 38/50] Soften dark-mode accent colors (buttons and text)

Dark mode's accent chroma came from the ACCENT_CHROMA constant (0.145,
originally meant as a generic default), used unconditionally for every
accent-derived token regardless of the actual song's extracted vividness
- extractAccent() already clamps a song's real chroma to 0.045-0.11, but
buildThemeTokens() never used it, only the hue. That made every accent
button, ring and highlight uniformly vivid. Drop it to 0.09.

Also soften --mf-accent-title (the accent-colored track title text,
e.g. active rows) from 0.07 to 0.05 chroma, since that was called out
specifically as too strong.

Cleaned up the now-unused C/ACCENT_CHROMA import.
---
 web-player/src/lib/theme/tokens.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 9275f0b..b9fcddb 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -1,7 +1,6 @@
-import { ACCENT_CHROMA, ACCENT_LIGHTNESS } from './color';
+import { ACCENT_LIGHTNESS } from './color';
 
 const L = ACCENT_LIGHTNESS / 100;
-const C = ACCENT_CHROMA;
 
 function r(value: number, digits = 4): string {
 	return value.toFixed(digits);
@@ -32,9 +31,9 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 	const light = mode === 'light';
 
 	const accentL = light ? 0.52 : L;
-	const accentC = light ? 0.16 : C;
+	const accentC = light ? 0.16 : 0.09;
 	const titleL = light ? 0.4 : 0.87;
-	const titleC = light ? 0.13 : 0.07;
+	const titleC = light ? 0.13 : 0.05;
 	const mutedL = light ? 0.48 : 0.79;
 	const mutedC = light ? 0.06 : 0.035;
 
-- 
2.54.0


From 2138a4a890582b22a2a73ed5aa3ebf2d11e9cf49 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:19:58 +0200
Subject: [PATCH 39/50] Shrink menu item text and drop the border on the
 account dropdown

MenuItem used text-sm (14px) for its label, which read as oversized
for a dropdown; drop to text-xs (12px). This is a shared component
(AccountMenu, ContextMenu, MobileHeader's menu), so all of them get
the more compact sizing.

Add a border prop to GlassMenu (default true, unchanged for
ContextMenu) and set it false specifically on AccountMenu's dropdown,
per feedback that its border didn't fit.
---
 .../src/lib/components/ui/overlay/AccountMenu.svelte      | 5 ++++-
 web-player/src/lib/components/ui/overlay/GlassMenu.svelte | 8 ++++++--
 web-player/src/lib/components/ui/overlay/MenuItem.svelte  | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web-player/src/lib/components/ui/overlay/AccountMenu.svelte b/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
index 9554336..1ac82e6 100644
--- a/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
@@ -44,7 +44,10 @@
 	{@render trigger({ toggle, open })}
 
 	{#if open}
-		<GlassMenu class="absolute top-full right-0 z-(--z-menu) mt-2 overflow-hidden {WIDTH[width]}">
+		<GlassMenu
+			border={false}
+			class="absolute top-full right-0 z-(--z-menu) mt-2 overflow-hidden {WIDTH[width]}"
+		>
 			<MenuItem icon={User} label="Ver perfil" href="/user/{user.sub}" onclick={close} />
 			{@render extraItems?.({ close })}
 			{#if accountUrl}
diff --git a/web-player/src/lib/components/ui/overlay/GlassMenu.svelte b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
index 9b8652b..264a020 100644
--- a/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
@@ -4,12 +4,16 @@
 	interface Props {
 		class?: string;
 		style?: string;
+		border?: boolean;
 		children: Snippet;
 	}
 
-	let { class: klass = '', style = '', children }: Props = $props();
+	let { class: klass = '', style = '', border = true, children }: Props = $props();
 </script>
 
-<div class="glass-panel animate-pop rounded-panel border border-hairline p-1.5 {klass}" {style}>
+<div
+	class="glass-panel animate-pop rounded-panel p-1.5 {border ? 'border border-hairline' : ''} {klass}"
+	{style}
+>
 	{@render children()}
 </div>
diff --git a/web-player/src/lib/components/ui/overlay/MenuItem.svelte b/web-player/src/lib/components/ui/overlay/MenuItem.svelte
index e4743e7..c01c8c9 100644
--- a/web-player/src/lib/components/ui/overlay/MenuItem.svelte
+++ b/web-player/src/lib/components/ui/overlay/MenuItem.svelte
@@ -24,7 +24,7 @@
 	}: Props = $props();
 
 	const classes = $derived(
-		`flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-sm font-medium text-fg-2 transition hover:bg-hover ${klass}`
+		`flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-xs font-medium text-fg-2 transition hover:bg-hover ${klass}`
 	);
 </script>
 
-- 
2.54.0


From 8a748f2b3a0c835d493d159d58ada4dba18c8aa7 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:27:17 +0200
Subject: [PATCH 40/50] Darken hero/spotlight cards further and adapt accent
 buttons to match

Per feedback, --mf-hero-bg/--mf-spotlight-bg in dark mode were still
too bright: drop their tc() base lightness from 42 to 38 and alpha
from 0.2 to 0.1, so the cards read as a subtle wash close to the page
background instead of a distinct bright block.

That made bg-accent-tint (Button's accent variant, ListRow/TrackList's
active-row highlight) look comparatively too light against the now
much darker cards, since accentL was still 0.74. Drop dark's accentL
to 0.55 so every accent-derived surface (rings, accent-tint, accent-btn
hover) darkens to match. Text (titleL, still 0.87) is untouched since
it needs to stay legible regardless of how dark the surface under it
gets.

Cleaned up the now-unused ACCENT_LIGHTNESS import/L constant.
---
 web-player/src/lib/theme/tokens.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index b9fcddb..d6773e5 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -1,7 +1,3 @@
-import { ACCENT_LIGHTNESS } from './color';
-
-const L = ACCENT_LIGHTNESS / 100;
-
 function r(value: number, digits = 4): string {
 	return value.toFixed(digits);
 }
@@ -30,7 +26,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 	const H2 = r(h2, 1);
 	const light = mode === 'light';
 
-	const accentL = light ? 0.52 : L;
+	const accentL = light ? 0.52 : 0.55;
 	const accentC = light ? 0.16 : 0.09;
 	const titleL = light ? 0.4 : 0.87;
 	const titleC = light ? 0.13 : 0.05;
@@ -57,13 +53,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
 		'--mf-hero-bg': light
 			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
-			: `linear-gradient(${tc(0.2, 42, h)}, ${tc(0.2, 42, h)})`,
+			: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
 		'--mf-modal-glow': light
 			? `linear-gradient(135deg, ${tcLight(0.34, 42, h)} 0%, ${tcLight(0.2, 55, h)} 30%, ${tcLight(0.1, 70, h)} 55%, ${tcLight(0.04, 85, h)} 80%, ${tcLight(0.02, 88, h)} 100%)`
 			: `linear-gradient(135deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 28%, ${tc(0.03, 88, h)} 50%, rgba(6,6,9,0) 70%)`,
 		'--mf-spotlight-bg': light
 			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
-			: `linear-gradient(${tc(0.2, 42, h)}, ${tc(0.2, 42, h)})`,
+			: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
 		'--mf-logo-grad': light
 			? `linear-gradient(140deg, oklch(0.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
 			: `linear-gradient(140deg, oklch(0.78 0.15 ${H}), oklch(0.62 0.13 ${H2}) 92%)`,
-- 
2.54.0


From 93d4220f3abce0faee783c68be90d5a604a8b4f9 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:33:25 +0200
Subject: [PATCH 41/50] Make accent backgrounds solid so they don't stack on
 tinted surfaces

--mf-accent-soft-bg/--mf-accent-btn-bg/-hover were translucent alpha
overlays, so an accent-tinted element (e.g. the active-row highlight,
or the accent Button) rendered differently depending on what was
already underneath it: fine over the plain page background, but over
an already-tinted surface like the spotlight card, the two translucent
layers stacked and the combined result read brighter/more saturated
than intended.

Same fix as bg-btn earlier: replace the alpha overlay with a solid
color-mix() against --mf-bg, computed once, so the token always
renders identically regardless of what it's placed on top of. Verified
the active-row highlight and the accent button now compute to the
exact same color whether they sit on the plain background or on the
spotlight card.
---
 web-player/src/lib/theme/tokens.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index d6773e5..992eb44 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -37,11 +37,11 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-accent': `oklch(${r(accentL)} ${r(accentC)} ${H})`,
 		'--mf-accent-title': `oklch(${r(titleL)} ${r(titleC)} ${H})`,
 		'--mf-accent-muted': `oklch(${r(mutedL)} ${r(mutedC)} ${H})`,
-		'--mf-accent-soft-bg': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.08)`,
+		'--mf-accent-soft-bg': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 8%, var(--mf-bg))`,
 		'--mf-accent-line': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.2)`,
 		'--mf-accent-hair': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.09)`,
-		'--mf-accent-btn-bg': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.15)`,
-		'--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`,
+		'--mf-accent-btn-bg': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 15%, var(--mf-bg))`,
+		'--mf-accent-btn-bg-hover': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 24%, var(--mf-bg))`,
 		'--mf-bg': light ? `oklch(0.97 0.014 ${H})` : `oklch(0.075 0.02 ${H})`,
 		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.025 ${H})`,
 		'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.1 0.022 ${H} / 0.28)`,
-- 
2.54.0


From 1e3e46cfdc45bbed4bb3cb1a8cc99a61ef4d5fb4 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:38:03 +0200
Subject: [PATCH 42/50] Brighten dark-mode accentL back up slightly

0.55 (dropped from the original 0.74 to fix accent surfaces looking
too bright when stacked on the darkened spotlight/hero cards) made
bg-accent-tint on the plain page background barely visible. Split the
difference at 0.65, closer to how it looked originally.
---
 web-player/src/lib/theme/tokens.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 992eb44..0915482 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -26,7 +26,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 	const H2 = r(h2, 1);
 	const light = mode === 'light';
 
-	const accentL = light ? 0.52 : 0.55;
+	const accentL = light ? 0.52 : 0.65;
 	const accentC = light ? 0.16 : 0.09;
 	const titleL = light ? 0.4 : 0.87;
 	const titleC = light ? 0.13 : 0.05;
-- 
2.54.0


From c60704080b213805f9897994cf4b1253e0a0f7d6 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:40:23 +0200
Subject: [PATCH 43/50] Restore dark-mode accentL to its original 0.74

0.65 was still too dark per feedback. The original concern that made
us drop accentL from 0.74 (accent surfaces stacking too bright over
the darkened spotlight/hero cards) is already fixed architecturally by
the earlier color-mix() conversion, which makes bg-accent-tint/
bg-accent-btn a solid precomputed value that no longer stacks with
whatever's underneath. So there's no reason to keep accentL dimmed for
that reason anymore.
---
 web-player/src/lib/theme/tokens.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 0915482..add18ef 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -26,7 +26,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 	const H2 = r(h2, 1);
 	const light = mode === 'light';
 
-	const accentL = light ? 0.52 : 0.65;
+	const accentL = light ? 0.52 : 0.74;
 	const accentC = light ? 0.16 : 0.09;
 	const titleL = light ? 0.4 : 0.87;
 	const titleC = light ? 0.13 : 0.05;
-- 
2.54.0


From d7199b4d1d248afd247079524835cd0d8a3ad776 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 22:23:06 +0200
Subject: [PATCH 44/50] Changes on the colors

---
 web-player/src/lib/theme/tokens.ts | 12 ++++++------
 web-player/src/routes/+page.svelte |  4 ++--
 web-player/src/routes/layout.css   |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index add18ef..0d95606 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -26,10 +26,10 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 	const H2 = r(h2, 1);
 	const light = mode === 'light';
 
-	const accentL = light ? 0.52 : 0.74;
-	const accentC = light ? 0.16 : 0.09;
-	const titleL = light ? 0.4 : 0.87;
-	const titleC = light ? 0.13 : 0.05;
+	const accentL = light ? 0.8 : 0.8;
+	const accentC = light ? 0.4 : 0.2;
+	const titleL = light ? 0.5 : 0.8;
+	const titleC = light ? 0.1 : 0.05;
 	const mutedL = light ? 0.48 : 0.79;
 	const mutedC = light ? 0.06 : 0.035;
 
@@ -52,13 +52,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 			: `radial-gradient(95% 85% at 20% 0%, ${tc(0.12, 30, h)}, transparent 88%), radial-gradient(90% 80% at 80% 0%, ${tc(0.09, 40, h)}, transparent 88%)`,
 		'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
 		'--mf-hero-bg': light
-			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
+			? `linear-gradient(${tcLight(0.1, 55, h)}, ${tcLight(0.1, 55, h)})`
 			: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
 		'--mf-modal-glow': light
 			? `linear-gradient(135deg, ${tcLight(0.34, 42, h)} 0%, ${tcLight(0.2, 55, h)} 30%, ${tcLight(0.1, 70, h)} 55%, ${tcLight(0.04, 85, h)} 80%, ${tcLight(0.02, 88, h)} 100%)`
 			: `linear-gradient(135deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 28%, ${tc(0.03, 88, h)} 50%, rgba(6,6,9,0) 70%)`,
 		'--mf-spotlight-bg': light
-			? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
+			? `linear-gradient(${tcLight(0.1, 55, h)}, ${tcLight(0.1, 55, h)})`
 			: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
 		'--mf-logo-grad': light
 			? `linear-gradient(140deg, oklch(0.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index dfbc03b..2eb4efd 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -256,12 +256,12 @@
 								subtitleHref={track.ownerUserId}
 							>
 								{#snippet leading()}
-									<span class="w-5 shrink-0 text-center text-xs text-muted tabular-nums"
+									<span class="w-5 shrink-0 text-center text-xs text-fg-2 tabular-nums"
 										>{i + 1}</span
 									>
 								{/snippet}
 								{#snippet trailing()}
-									<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(seconds)}</span>
+									<span class="shrink-0 text-xs text-fg-2 tabular-nums">{fmtTime(seconds)}</span>
 								{/snippet}
 							</ListRow>
 						{:else}
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 1193b00..9b8b0d8 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -122,7 +122,7 @@
 }
 
 @utility btn-transition {
-	transition-property: color, border-color, outline-color, opacity, box-shadow, filter;
+	transition-property: color, background-color, border-color, outline-color, opacity, box-shadow, filter;
 	transition-timing-function: var(--default-transition-timing-function);
 	transition-duration: var(--default-transition-duration);
 }
-- 
2.54.0


From 2660c124d53968a837b4232f9522c60f95b696a0 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 01:33:25 +0200
Subject: [PATCH 45/50] Simplify design

---
 web-player/.prettierignore                    |  2 +
 web-player/.prettierrc                        |  1 +
 web-player/CLAUDE.md                          |  8 ++
 web-player/docs/paginas.md                    | 10 +--
 .../src/lib/components/layout/Sidebar.svelte  | 11 ++-
 .../src/lib/components/layout/TopBar.svelte   |  6 +-
 .../lib/components/player/PlayerBar.svelte    |  6 +-
 .../lib/components/player/PlayerDock.svelte   |  6 --
 .../src/lib/components/player/Queue.svelte    | 17 ++--
 .../lib/components/player/TrackInfo.svelte    |  2 +-
 .../player/TransportControls.svelte           |  6 +-
 .../lib/components/ui/forms/CoverForm.svelte  |  2 +-
 .../components/ui/forms/ImageDropzone.svelte  |  2 +-
 .../components/ui/forms/PlaylistForm.svelte   |  2 +-
 .../ui/layout/SectionHeading.svelte           |  6 +-
 .../lib/components/ui/media/Artwork.svelte    |  2 +-
 .../components/ui/media/ExplicitBadge.svelte  |  2 +-
 .../lib/components/ui/media/ListRow.svelte    |  2 +-
 .../lib/components/ui/media/MediaCard.svelte  |  6 +-
 .../components/ui/media/MediaIdentity.svelte  |  2 +-
 .../lib/components/ui/media/PlayButton.svelte |  4 +-
 .../lib/components/ui/media/TrackList.svelte  | 14 +--
 .../ui/overlay/ConfirmDialog.svelte           | 12 ++-
 .../components/ui/overlay/ContextMenu.svelte  |  4 +-
 .../lib/components/ui/overlay/Dialog.svelte   | 40 +++++++++
 .../components/ui/overlay/DialogHost.svelte   | 34 +++++++
 .../components/ui/overlay/GlassMenu.svelte    |  4 +-
 .../lib/components/ui/overlay/Modal.svelte    | 20 ++++-
 .../components/ui/primitives/BackLink.svelte  |  2 +-
 .../components/ui/primitives/Button.svelte    | 12 +--
 .../lib/components/ui/primitives/Chip.svelte  |  6 +-
 .../lib/components/ui/primitives/Field.svelte |  2 +-
 .../ui/primitives/IconButton.svelte           |  2 +-
 .../ui/primitives/InfiniteScroll.svelte       |  2 +-
 .../lib/components/ui/primitives/Input.svelte |  2 +-
 .../ui/primitives/SegmentedControl.svelte     |  4 +-
 web-player/src/lib/player/player.svelte.ts    | 21 +++--
 web-player/src/lib/state/dialog.svelte.ts     | 35 ++++++++
 web-player/src/lib/state/menus.svelte.ts      |  5 +-
 web-player/src/lib/theme/color.ts             |  4 +-
 web-player/src/lib/theme/theme.css            | 37 +++++---
 web-player/src/lib/theme/tokens.ts            | 89 ++++++++++---------
 .../src/routes/(app)/albums/[id]/+page.svelte |  4 +-
 .../src/routes/(app)/explore/+page.svelte     |  9 +-
 .../routes/(app)/playlists/[id]/+page.svelte  |  4 +-
 .../src/routes/(app)/upload/+page.svelte      | 10 +--
 web-player/src/routes/+layout.svelte          |  4 +
 web-player/src/routes/+page.svelte            | 14 ++-
 web-player/src/routes/layout.css              | 50 +++++++----
 49 files changed, 356 insertions(+), 195 deletions(-)
 create mode 100644 web-player/src/lib/components/ui/overlay/Dialog.svelte
 create mode 100644 web-player/src/lib/components/ui/overlay/DialogHost.svelte
 create mode 100644 web-player/src/lib/state/dialog.svelte.ts

diff --git a/web-player/.prettierignore b/web-player/.prettierignore
index 1f10deb..a69f55c 100644
--- a/web-player/.prettierignore
+++ b/web-player/.prettierignore
@@ -9,3 +9,5 @@ package
 package-lock.json
 src/lib/api/schema.d.ts
 static
+.agents
+skills-lock.json
diff --git a/web-player/.prettierrc b/web-player/.prettierrc
index 664d576..ee3f14c 100644
--- a/web-player/.prettierrc
+++ b/web-player/.prettierrc
@@ -3,6 +3,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
+	"endOfLine": "auto",
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"tailwindStylesheet": "./src/routes/layout.css",
 	"overrides": [
diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index 448fbcf..20035f7 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -57,6 +57,14 @@ The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utili
 - Reach for these base components before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
 - Known and accepted gap (documented in `scripts/check-tokens.mjs`): icon `strokeWidth={n}` isn't unified yet. There are 13 different values spread across almost every component, and migrating them to `stroke-thin/regular/bold` recipes safely would require visually confirming that `lucide-svelte` actually respects `stroke-width` through CSS, so that was left out of the last pass.
 
+## Motion
+
+Every animation follows one scale of three durations and one easing curve, all defined in `theme.css`. Fast (`--mf-motion-fast`, 150ms) is for hover, focus and press feedback: color, opacity and small scale changes. Plain `transition` or `transition-colors` already uses it because it is the Tailwind default, so never write `duration-150`. Base (`--mf-motion-base`, 200ms) is for things that appear on top of the page or move inside a control: modals, menus, the queue panel, `animate-pop`, `animate-fade` and the segmented control thumb. Slow (`--mf-motion-slow`, 300ms) is for content entering the page and larger movement: `animate-enter`, cover zoom on hover and the player dock padding.
+
+Entrances and movement always use `--mf-ease` (`ease-snappy` in Tailwind, `expoOut` in Svelte transitions), which feels immediate because most of the motion happens at the start. Color transitions keep the Tailwind default curve. Overlays must feel instant: the modal backdrop uses `transition:fade={{ duration: 200 }}` and the panel uses a local `pop` transition (opacity + scale + translateY, `expoOut`, 200ms) mirroring `animate-pop`'s keyframes — both directives so the modal fades and pops on close too, not just on open, and the whole thing settles in 200ms. Staggered lists use `--i` with 40ms steps capped at ten items.
+
+The only exceptions are looping indicators (equalizer bars, pulse, spin, sheen) and the accent hue crossfade in `+layout.svelte` (600ms), which is ambient and meant to be slow. Do not add new durations or curves; if something needs a different feel, pick the closest step of the scale. `prefers-reduced-motion` disables everything globally in `layout.css`.
+
 ## Auth
 
 `hooks.server.ts` validates the encrypted session cookie (`mf_session`), refreshes the `access_token`, and fills `locals.user` and `locals.accessToken`. To protect a route, check `locals.user` in its `load` and redirect to `/auth?returnTo=…`. When talking to the backend, send `locals.accessToken` as a Bearer token to `API_BASE_URL`.
diff --git a/web-player/docs/paginas.md b/web-player/docs/paginas.md
index 0c402a5..74c11e6 100644
--- a/web-player/docs/paginas.md
+++ b/web-player/docs/paginas.md
@@ -119,10 +119,10 @@ A fixed bottom bar, visible while something is playing. Shows track info, transp
 
 ## Available backend (summary)
 
-| Resource  | Endpoints                                                            |
-| --------- | --------------------------------------------------------------------- |
-| Tracks    | list/search, detail, by user, stream, create, delete, upload-urls     |
-| Playlists | CRUD, playlist tracks, add/remove track, upload-picture               |
-| Users     | list/search, detail, create                                            |
+| Resource  | Endpoints                                                         |
+| --------- | ----------------------------------------------------------------- |
+| Tracks    | list/search, detail, by user, stream, create, delete, upload-urls |
+| Playlists | CRUD, playlist tracks, add/remove track, upload-picture           |
+| Users     | list/search, detail, create                                       |
 
 Typed client in `$lib/server/api.ts` (`openapi-fetch`, ErrorOr style). Use it inside `load`/server actions, never from the client. Types live in `src/lib/api/schema.d.ts`.
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index f4cf981..a835f8b 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -6,7 +6,6 @@
 	import type { SessionUser } from '$lib/types';
 	import ListRow from '../ui/media/ListRow.svelte';
 	import IconButton from '../ui/primitives/IconButton.svelte';
-	import Logo from '../ui/primitives/Logo.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
 
 	interface SidebarPlaylist {
@@ -40,14 +39,14 @@
 			<a
 				href={link.href}
 				aria-current={active ? 'page' : undefined}
-				class="flex items-center gap-3 rounded-control px-3 py-2 text-sm transition-colors duration-150 {active
+				class="flex items-center gap-3 rounded-control px-3 py-2 text-sm transition-colors {active
 					? 'bg-surface-2 text-fg'
 					: 'text-fg-2 hover:bg-hover hover:text-fg'}"
 			>
 				<link.icon class="size-icon-md shrink-0" strokeWidth={1.5} />
 				<span class="flex-1 truncate">{link.label}</span>
 				{#if link.count}
-					<span class="text-xs text-muted tabular-nums">{link.count}</span>
+					<span class="text-xs text-fg-2 tabular-nums">{link.count}</span>
 				{/if}
 			</a>
 		{/each}
@@ -56,7 +55,7 @@
 	{#if user}
 		<div class="mx-3 mt-6 mb-3.5 h-px bg-line"></div>
 		<div class="flex items-center justify-between px-3 pb-1.5">
-			<span class="text-eyebrow text-muted">Tus playlists</span>
+			<span class="text-eyebrow text-fg-2">Tus playlists</span>
 			{#if playlists.length > 0}
 				<IconButton
 					label="Crear playlist"
@@ -64,7 +63,7 @@
 					size="xs"
 					onclick={() => createPlaylistModal.show()}
 				>
-					<Plus class="size-icon-sm text-muted" strokeWidth={1.25} />
+					<Plus class="size-icon-sm text-fg-2" strokeWidth={1.25} />
 				</IconButton>
 			{/if}
 		</div>
@@ -87,7 +86,7 @@
 				<button
 					type="button"
 					onclick={() => createPlaylistModal.show()}
-					class="flex items-center gap-2 rounded-control px-3 py-2 text-xs text-muted transition-colors hover:bg-hover hover:text-fg-2"
+					class="flex items-center gap-2 rounded-control px-3 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg-2"
 				>
 					<Plus class="size-3.5" strokeWidth={1.8} />
 					Crear tu primera lista
diff --git a/web-player/src/lib/components/layout/TopBar.svelte b/web-player/src/lib/components/layout/TopBar.svelte
index 667faac..897f2cb 100644
--- a/web-player/src/lib/components/layout/TopBar.svelte
+++ b/web-player/src/lib/components/layout/TopBar.svelte
@@ -69,21 +69,21 @@
 		<label
 			class="flex h-9.5 w-full items-center gap-2.5 rounded-control bg-surface-2 px-3.5 transition focus-within:bg-surface-hover"
 		>
-			<Search class="size-4 shrink-0 text-fg-3" strokeWidth={1.8} />
+			<Search class="size-4 shrink-0 text-fg-2" strokeWidth={1.8} />
 			<input
 				type="text"
 				bind:this={searchInput}
 				bind:value={query}
 				oninput={onInput}
 				placeholder="Canciones, artistas, álbumes o playlists"
-				class="w-full min-w-0 bg-transparent text-sm text-fg placeholder:text-muted focus:outline-none"
+				class="w-full min-w-0 bg-transparent text-sm text-fg placeholder:text-fg-2 focus:outline-none"
 			/>
 			{#if query}
 				<button
 					type="button"
 					onclick={clearQuery}
 					aria-label="Borrar búsqueda"
-					class="grid size-5 shrink-0 place-items-center rounded-full text-muted transition hover:text-fg"
+					class="grid size-5 shrink-0 place-items-center rounded-full text-fg-2 transition hover:text-fg"
 				>
 					<X class="size-3.5" />
 				</button>
diff --git a/web-player/src/lib/components/player/PlayerBar.svelte b/web-player/src/lib/components/player/PlayerBar.svelte
index 6b85a1e..3b14356 100644
--- a/web-player/src/lib/components/player/PlayerBar.svelte
+++ b/web-player/src/lib/components/player/PlayerBar.svelte
@@ -32,7 +32,7 @@
 	<div class="flex min-w-0 flex-1 flex-col items-center gap-2">
 		<TransportControls />
 		<div class="flex w-full max-w-hero items-center gap-3">
-			<span class="min-w-8 text-right text-xs text-fg-3 tabular-nums">
+			<span class="min-w-8 text-right text-xs text-fg-2 tabular-nums">
 				{fmtTime(player.progress)}
 			</span>
 			<Slider
@@ -42,13 +42,13 @@
 				oninput={seek}
 				variant="seek"
 			/>
-			<span class="min-w-8 text-xs text-fg-3 tabular-nums">
+			<span class="min-w-8 text-xs text-fg-2 tabular-nums">
 				{fmtTime(player.current.duration)}
 			</span>
 		</div>
 	</div>
 	<div class="hidden w-(--mf-player-side-w) shrink-0 items-center justify-end gap-3.5 sm:flex">
-		<Volume2 class="size-icon-sm shrink-0 text-fg-3" strokeWidth={1.8} />
+		<Volume2 class="size-icon-sm shrink-0 text-fg-2" strokeWidth={1.8} />
 		<Slider
 			value={player.volume}
 			max={100}
diff --git a/web-player/src/lib/components/player/PlayerDock.svelte b/web-player/src/lib/components/player/PlayerDock.svelte
index b50154a..cdfbade 100644
--- a/web-player/src/lib/components/player/PlayerDock.svelte
+++ b/web-player/src/lib/components/player/PlayerDock.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import PlayerBar from './PlayerBar.svelte';
 	import TabsBar from '../layout/TabsBar.svelte';
-	import Alert from '$lib/components/ui/primitives/Alert.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import type { SessionUser } from '$lib/types';
 
@@ -17,11 +16,6 @@
 <div
 	class="pointer-events-none fixed inset-x-0 bottom-0 z-(--z-sticky) flex flex-col lg:left-(--mf-sidebar-w)"
 >
-	{#if player.error}
-		<div class="pointer-events-auto px-4 pb-2.5">
-			<Alert tone="danger">{player.error}</Alert>
-		</div>
-	{/if}
 	{#if hasTrack}
 		<PlayerBar />
 	{/if}
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index bf485f9..26964d8 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -7,7 +7,7 @@
 	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
+	import { expoOut } from 'svelte/easing';
 
 	const upcoming = $derived.by(() => {
 		const idx = player.tracks.findIndex((t) => t.id === player.currentId);
@@ -17,7 +17,7 @@
 
 {#if queuePanel.open}
 	<aside
-		transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
+		transition:fly={{ x: 24, duration: 200, easing: expoOut }}
 		class="hidden shrink-0 flex-col border-l border-hairline px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
@@ -29,8 +29,8 @@
 		</div>
 
 		{#if player.current.id}
-			<p class="mb-3 text-eyebrow text-fg-3">Reproduciendo</p>
-			<div class="mb-6 rounded-control bg-accent-tint p-2.5">
+			<p class="mb-3 text-eyebrow text-fg-2">Reproduciendo</p>
+			<div class="mb-6 rounded-control surface-active p-2.5">
 				<MediaIdentity
 					trackId={player.current.id}
 					title={player.current.title}
@@ -42,12 +42,12 @@
 		{/if}
 
 		<div class="mb-3 flex items-center justify-between gap-3">
-			<span class="min-w-0 flex-1 truncate text-eyebrow text-fg-3"> A continuación </span>
+			<span class="min-w-0 flex-1 truncate text-eyebrow text-fg-2"> A continuación </span>
 			{#if upcoming.length > 0}
 				<button
 					type="button"
 					onclick={() => player.clearUpcoming()}
-					class="shrink-0 text-xs text-fg-3 transition-colors hover:text-fg"
+					class="shrink-0 text-xs text-fg-2 transition-colors hover:text-fg"
 				>
 					Vaciar
 				</button>
@@ -68,13 +68,12 @@
 				>
 					{#snippet trailing()}
 						{#if track.duration}
-							<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(track.duration)}</span
-							>
+							<span class="shrink-0 text-xs text-fg-2 tabular-nums">{fmtTime(track.duration)}</span>
 						{/if}
 					{/snippet}
 				</ListRow>
 			{:else}
-				<p class="px-2 py-6 text-center text-xs text-fg-3">No hay más canciones en la cola.</p>
+				<p class="px-2 py-6 text-center text-xs text-fg-2">No hay más canciones en la cola.</p>
 			{/each}
 		</div>
 	</aside>
diff --git a/web-player/src/lib/components/player/TrackInfo.svelte b/web-player/src/lib/components/player/TrackInfo.svelte
index 78fc802..b73caf7 100644
--- a/web-player/src/lib/components/player/TrackInfo.svelte
+++ b/web-player/src/lib/components/player/TrackInfo.svelte
@@ -49,7 +49,7 @@
 		<ArtistLink
 			name={player.current.artist || '—'}
 			ownerUserId={player.current.ownerUserId}
-			class="mt-0.5 text-xs text-fg-3"
+			class="mt-0.5 text-xs text-fg-2"
 		/>
 	</div>
 	{#if !compact}
diff --git a/web-player/src/lib/components/player/TransportControls.svelte b/web-player/src/lib/components/player/TransportControls.svelte
index e2b7a7b..d87b730 100644
--- a/web-player/src/lib/components/player/TransportControls.svelte
+++ b/web-player/src/lib/components/player/TransportControls.svelte
@@ -13,7 +13,7 @@
 	const sideClass = $derived(
 		compact
 			? 'grid size-10 place-items-center text-fg opacity-70 transition active:scale-90'
-			: 'flex text-fg-2 transition-colors hover:text-fg active:scale-90'
+			: 'flex text-fg-2 transition hover:text-fg active:scale-90'
 	);
 </script>
 
@@ -24,7 +24,7 @@
 			onclick={() => player.toggleShuffle()}
 			aria-pressed={player.shuffle}
 			aria-label="Aleatorio"
-			class="transition-colors hover:text-fg {player.shuffle ? 'text-accent' : 'text-fg-3'}"
+			class="transition-colors hover:text-fg {player.shuffle ? 'text-accent' : 'text-fg-2'}"
 		>
 			<Shuffle class="size-4" strokeWidth={1.8} />
 		</button>
@@ -56,7 +56,7 @@
 			onclick={() => player.toggleRepeat()}
 			aria-pressed={player.repeat}
 			aria-label="Repetir"
-			class="transition-colors hover:text-fg {player.repeat ? 'text-accent' : 'text-fg-3'}"
+			class="transition-colors hover:text-fg {player.repeat ? 'text-accent' : 'text-fg-2'}"
 		>
 			<Repeat class="size-4" strokeWidth={1.8} />
 		</button>
diff --git a/web-player/src/lib/components/ui/forms/CoverForm.svelte b/web-player/src/lib/components/ui/forms/CoverForm.svelte
index e298bc6..2b13fc6 100644
--- a/web-player/src/lib/components/ui/forms/CoverForm.svelte
+++ b/web-player/src/lib/components/ui/forms/CoverForm.svelte
@@ -80,7 +80,7 @@
 
 	<div class="flex items-center justify-between gap-4">
 		{#if helperText}
-			<p class="text-sm text-muted">{helperText}</p>
+			<p class="text-sm text-fg-2">{helperText}</p>
 		{:else}
 			<span></span>
 		{/if}
diff --git a/web-player/src/lib/components/ui/forms/ImageDropzone.svelte b/web-player/src/lib/components/ui/forms/ImageDropzone.svelte
index df5126b..3e41a63 100644
--- a/web-player/src/lib/components/ui/forms/ImageDropzone.svelte
+++ b/web-player/src/lib/components/ui/forms/ImageDropzone.svelte
@@ -68,6 +68,6 @@
 			class="h-full w-full object-cover"
 		/>
 	{:else}
-		<Icon class="size-icon-xl {gradient ? 'text-on-art/70' : 'text-muted'}" strokeWidth={1.3} />
+		<Icon class="size-icon-xl {gradient ? 'text-on-art/70' : 'text-fg-2'}" strokeWidth={1.3} />
 	{/if}
 </label>
diff --git a/web-player/src/lib/components/ui/forms/PlaylistForm.svelte b/web-player/src/lib/components/ui/forms/PlaylistForm.svelte
index 1ef7642..e298e74 100644
--- a/web-player/src/lib/components/ui/forms/PlaylistForm.svelte
+++ b/web-player/src/lib/components/ui/forms/PlaylistForm.svelte
@@ -88,7 +88,7 @@
 		<div class="flex items-center justify-between gap-4 rounded-art bg-surface px-4 py-3.5">
 			<div class="min-w-0">
 				<div class="text-sm font-medium text-fg-2">Visibilidad</div>
-				<div class="mt-0.5 text-xs text-muted">
+				<div class="mt-0.5 text-xs text-fg-2">
 					{visibility === 'private'
 						? 'Solo tú la ves en tu biblioteca'
 						: 'Cualquiera con el enlace puede verla'}
diff --git a/web-player/src/lib/components/ui/layout/SectionHeading.svelte b/web-player/src/lib/components/ui/layout/SectionHeading.svelte
index 2eb1835..d24a578 100644
--- a/web-player/src/lib/components/ui/layout/SectionHeading.svelte
+++ b/web-player/src/lib/components/ui/layout/SectionHeading.svelte
@@ -30,21 +30,21 @@
 		{title}
 	</h2>
 	{#if subtitle}
-		<p class="mt-1 text-xs text-fg-3">{subtitle}</p>
+		<p class="mt-1 text-xs text-fg-2">{subtitle}</p>
 	{/if}
 {/snippet}
 
 {#snippet autoActions()}
 	{#if count !== undefined}
 		<div class="h-px flex-1 self-center bg-line"></div>
-		<span class="shrink-0 text-xs text-muted tabular-nums">
+		<span class="shrink-0 text-xs text-fg-2 tabular-nums">
 			{plural(count, 'resultado', 'resultados')}
 		</span>
 	{/if}
 	{#if href}
 		<a
 			{href}
-			class="shrink-0 text-xs font-medium tracking-wider text-fg-3 uppercase transition-colors hover:text-fg"
+			class="shrink-0 text-xs font-medium tracking-wider text-fg-2 uppercase transition-colors hover:text-fg"
 		>
 			{linkLabel}
 		</a>
diff --git a/web-player/src/lib/components/ui/media/Artwork.svelte b/web-player/src/lib/components/ui/media/Artwork.svelte
index 471b578..65c27f2 100644
--- a/web-player/src/lib/components/ui/media/Artwork.svelte
+++ b/web-player/src/lib/components/ui/media/Artwork.svelte
@@ -118,7 +118,7 @@
 		/>
 	{:else if fallback === 'music'}
 		<div class="grid h-full w-full place-items-center bg-surface">
-			<svg viewBox="0 0 24 24" fill="currentColor" class="h-2/5 w-2/5 text-fg-3">
+			<svg viewBox="0 0 24 24" fill="currentColor" class="h-2/5 w-2/5 text-fg-2">
 				<path
 					d="M19.952 1.651a.75.75 0 0 1 .298.599V16.303a3 3 0 0 1-2.176 2.884l-1.32.377a2.553 2.553 0 1 1-1.401-4.909l2.311-.66a1.5 1.5 0 0 0 1.088-1.442V6.994l-9 2.572v9.737a3 3 0 0 1-2.176 2.884l-1.32.377a2.553 2.553 0 1 1-1.402-4.909l2.312-.66a1.5 1.5 0 0 0 1.088-1.442V5.25a.75.75 0 0 1 .544-.721l10.5-3a.75.75 0 0 1 .754.122Z"
 				/>
diff --git a/web-player/src/lib/components/ui/media/ExplicitBadge.svelte b/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
index fae1305..356e61d 100644
--- a/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
+++ b/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <span
-	class="grid size-4 shrink-0 place-items-center rounded-tag bg-fg-3 text-xs leading-4 font-bold text-bg {klass}"
+	class="grid size-4 shrink-0 place-items-center rounded-tag bg-fg-2 text-xs leading-4 font-bold text-bg {klass}"
 	title="Contenido explícito"
 	aria-label="Contenido explícito">E</span
 >
diff --git a/web-player/src/lib/components/ui/media/ListRow.svelte b/web-player/src/lib/components/ui/media/ListRow.svelte
index 818cbbd..8731151 100644
--- a/web-player/src/lib/components/ui/media/ListRow.svelte
+++ b/web-player/src/lib/components/ui/media/ListRow.svelte
@@ -50,7 +50,7 @@
 	const classes = $derived(
 		`flex items-center gap-3 text-left transition-colors ${
 			variant === 'card' ? 'rounded-art p-2 pr-3.5' : 'rounded-control p-2'
-		} ${active ? 'bg-accent-tint' : 'hover:bg-hover'} ${klass}`
+		} ${active ? 'surface-active' : 'hover:bg-hover'} ${klass}`
 	);
 </script>
 
diff --git a/web-player/src/lib/components/ui/media/MediaCard.svelte b/web-player/src/lib/components/ui/media/MediaCard.svelte
index 3472bd2..5d02147 100644
--- a/web-player/src/lib/components/ui/media/MediaCard.svelte
+++ b/web-player/src/lib/components/ui/media/MediaCard.svelte
@@ -38,7 +38,7 @@
 				{trackIds}
 				size="fill"
 				alt={title}
-				class="rounded-art transition duration-300 group-hover:scale-105"
+				class="rounded-art transition duration-300 ease-snappy group-hover:scale-105"
 			/>
 		{/if}
 		{#if onPlay}
@@ -50,12 +50,12 @@
 				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"
+				class="absolute right-2.5 bottom-2.5 opacity-0 transition-opacity 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>
+		<div class="mt-0.5 truncate text-xs text-fg-2">{subtitle}</div>
 	{/if}
 </a>
diff --git a/web-player/src/lib/components/ui/media/MediaIdentity.svelte b/web-player/src/lib/components/ui/media/MediaIdentity.svelte
index 9d1b76a..90f7165 100644
--- a/web-player/src/lib/components/ui/media/MediaIdentity.svelte
+++ b/web-player/src/lib/components/ui/media/MediaIdentity.svelte
@@ -63,6 +63,6 @@
 			>
 			{@render badge?.()}
 		</div>
-		<ArtistLink name={artist} {ownerUserId} class="mt-0.5 text-xs text-fg-3" />
+		<ArtistLink name={artist} {ownerUserId} class="mt-0.5 text-xs text-fg-2" />
 	</div>
 </div>
diff --git a/web-player/src/lib/components/ui/media/PlayButton.svelte b/web-player/src/lib/components/ui/media/PlayButton.svelte
index d98d3e8..aa560b7 100644
--- a/web-player/src/lib/components/ui/media/PlayButton.svelte
+++ b/web-player/src/lib/components/ui/media/PlayButton.svelte
@@ -26,12 +26,12 @@
 	};
 
 	const VARIANT: Record<'strong' | 'glass', string> = {
-		strong: 'bg-cta-strong text-ink hover:brightness-95',
+		strong: 'bg-cta-strong text-ink hover:bg-cta-strong-hover',
 		glass: 'border border-on-art/12 bg-ink/76 text-fg backdrop-blur'
 	};
 
 	const classes = $derived(
-		`grid shrink-0 place-items-center rounded-full transition duration-150 ${SIZE[size]} ${VARIANT[variant]} ${klass}`
+		`grid shrink-0 place-items-center rounded-full transition ${SIZE[size]} ${VARIANT[variant]} ${klass}`
 	);
 </script>
 
diff --git a/web-player/src/lib/components/ui/media/TrackList.svelte b/web-player/src/lib/components/ui/media/TrackList.svelte
index d48589f..083b80b 100644
--- a/web-player/src/lib/components/ui/media/TrackList.svelte
+++ b/web-player/src/lib/components/ui/media/TrackList.svelte
@@ -91,7 +91,7 @@
 
 <div class="overflow-x-auto {klass}">
 	<div
-		class="grid track-grid items-center gap-3 border-b border-line pr-4 pb-3 pl-2 text-sm text-fg-3 sm:gap-8 sm:pr-6 sm:pl-3"
+		class="grid track-grid items-center gap-3 border-b border-line pr-4 pb-3 pl-2 text-sm text-fg-2 sm:gap-8 sm:pr-6 sm:pl-3"
 		style="--mf-track-cols:{gridColumns}; --mf-track-cols-mobile:{gridColumnsMobile}"
 	>
 		{#if index}
@@ -106,13 +106,14 @@
 			<span></span>
 		{/if}
 	</div>
-	<div class="mt-1 flex flex-col gap-0.5">
+	<div class="mt-1 flex flex-col gap-0.5" role="list">
 		{#each tracks as track, i (track.id)}
 			{@const active = player.current.id === track.id}
 
 			<div
+				role="listitem"
 				class="group grid track-grid items-center gap-3 rounded-control py-3 pr-4 pl-2 transition-colors sm:gap-8 sm:pr-6 sm:pl-3 {active
-					? 'bg-accent-tint'
+					? 'surface-active'
 					: 'hover:bg-hover'}"
 				style="--mf-track-cols:{gridColumns}; --mf-track-cols-mobile:{gridColumnsMobile}"
 				oncontextmenu={oncontextmenu ? (event) => oncontextmenu(event, track, i) : undefined}
@@ -122,7 +123,7 @@
 						type="button"
 						onclick={() => onPlay(i)}
 						aria-label={active && player.playing ? 'Pausar' : 'Reproducir'}
-						class="relative grid size-8 place-items-center rounded-tag text-xs text-muted tabular-nums"
+						class="relative grid size-8 place-items-center rounded-tag text-xs text-fg-2 tabular-nums"
 					>
 						{#if active}
 							<EqBars paused={!player.playing} />
@@ -138,6 +139,7 @@
 					tabindex="0"
 					use:pressable={() => onPlay(i)}
 					onclick={(event) => event.stopPropagation()}
+					onkeydown={(event) => event.stopPropagation()}
 					class="flex min-w-0 flex-1 text-left"
 				>
 					<MediaIdentity
@@ -156,7 +158,7 @@
 					</MediaIdentity>
 				</div>
 				{#each columns as column (column)}
-					<span class="hidden truncate text-center text-xs text-muted tabular-nums sm:block">
+					<span class="hidden truncate text-center text-xs text-fg-2 tabular-nums sm:block">
 						{#if column === 'plays'}
 							{Number(track.listensCount ?? 0)}
 						{:else if column === 'added' && track.addedAt}
@@ -166,7 +168,7 @@
 						{/if}
 					</span>
 				{/each}
-				<span class="truncate text-center text-xs text-muted tabular-nums">
+				<span class="truncate text-center text-xs text-fg-2 tabular-nums">
 					{fmtTime(Number(track.duration))}
 				</span>
 				{#if rowAction}
diff --git a/web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte b/web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
index 233bba7..65a32f7 100644
--- a/web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
+++ b/web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Modal from './Modal.svelte';
+	import Dialog from './Dialog.svelte';
 	import Button from '../primitives/Button.svelte';
 
 	interface Props {
@@ -14,13 +14,11 @@
 	let { open, onClose, title, description, confirmLabel, action }: Props = $props();
 </script>
 
-<Modal {open} {onClose} maxWidth="max-w-sm">
-	<h2 class="text-display-3 text-fg">{title}</h2>
-	<p class="mt-2.5 text-body text-fg-2">{description}</p>
-	<div class="mt-6 flex items-center justify-end gap-3">
+<Dialog {open} {onClose} {title} {description}>
+	{#snippet actions()}
 		<Button variant="secondary" onclick={onClose}>Cancelar</Button>
 		<form method="POST" {action}>
 			<Button type="submit" variant="danger">{confirmLabel}</Button>
 		</form>
-	</div>
-</Modal>
+	{/snippet}
+</Dialog>
diff --git a/web-player/src/lib/components/ui/overlay/ContextMenu.svelte b/web-player/src/lib/components/ui/overlay/ContextMenu.svelte
index 664f21c..4fb29f8 100644
--- a/web-player/src/lib/components/ui/overlay/ContextMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/ContextMenu.svelte
@@ -63,7 +63,7 @@
 				class="flex items-center gap-3 rounded-control px-2 py-2.5 text-sm font-medium text-fg-2 transition group-hover/addmenu:bg-hover"
 			>
 				<span class="flex-1 cursor-default">{playlistAction.label}</span>
-				<ChevronRight class="size-icon-sm shrink-0 text-fg-3" />
+				<ChevronRight class="size-icon-sm shrink-0 text-fg-2" />
 			</div>
 			<div
 				class="invisible absolute top-0 z-(--z-submenu) opacity-0 transition group-hover/addmenu:visible group-hover/addmenu:opacity-100 max-sm:top-full max-sm:right-0 max-sm:left-0 max-sm:px-0 max-sm:pt-1.5 {openLeft
@@ -75,7 +75,7 @@
 				>
 					<div class="max-h-80 overflow-y-auto">
 						{#if playlists.length === 0}
-							<p class="px-2 py-2.5 text-sm text-fg-3">Todavía no tienes playlists.</p>
+							<p class="px-2 py-2.5 text-sm text-fg-2">Todavía no tienes playlists.</p>
 						{/if}
 						{#each playlists as playlist (playlist.id)}
 							<form
diff --git a/web-player/src/lib/components/ui/overlay/Dialog.svelte b/web-player/src/lib/components/ui/overlay/Dialog.svelte
new file mode 100644
index 0000000..e6e0d72
--- /dev/null
+++ b/web-player/src/lib/components/ui/overlay/Dialog.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import CircleAlert from '@lucide/svelte/icons/circle-alert';
+	import Modal from './Modal.svelte';
+
+	interface Props {
+		open: boolean;
+		onClose: () => void;
+		title: string;
+		description?: string;
+		tone?: 'neutral' | 'danger';
+		children?: Snippet;
+		actions?: Snippet;
+	}
+
+	let { open, onClose, title, description, tone = 'neutral', children, actions }: Props = $props();
+</script>
+
+<Modal
+	{open}
+	{onClose}
+	maxWidth="max-w-sm"
+	panelClass={tone === 'danger' ? 'glass-panel-danger' : ''}
+>
+	{#if tone === 'danger'}
+		<span class="mb-4 grid size-10 place-items-center rounded-full bg-danger/12 text-danger-fg">
+			<CircleAlert class="size-icon-md" strokeWidth={2} />
+		</span>
+	{/if}
+	<h2 class="text-display-3 text-fg">{title}</h2>
+	{#if description}
+		<p class="mt-2.5 text-body text-fg-2">{description}</p>
+	{/if}
+	{@render children?.()}
+	{#if actions}
+		<div class="mt-6 flex flex-wrap items-center justify-end gap-3">
+			{@render actions()}
+		</div>
+	{/if}
+</Modal>
diff --git a/web-player/src/lib/components/ui/overlay/DialogHost.svelte b/web-player/src/lib/components/ui/overlay/DialogHost.svelte
new file mode 100644
index 0000000..e239c2c
--- /dev/null
+++ b/web-player/src/lib/components/ui/overlay/DialogHost.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Dialog from './Dialog.svelte';
+	import Button from '../primitives/Button.svelte';
+	import { dialog, type DialogAction, type DialogOptions } from '$lib/state/dialog.svelte';
+
+	// Keep the last dialog's content so the exit transition doesn't render an empty panel.
+	let last = $state<DialogOptions | null>(null);
+	$effect.pre(() => {
+		if (dialog.current) last = dialog.current;
+	});
+	const current = $derived(dialog.current ?? last);
+	const buttons: DialogAction[] = $derived(
+		current?.actions?.length ? current.actions : [{ label: 'Entendido' }]
+	);
+</script>
+
+<Dialog
+	open={dialog.current !== null}
+	onClose={() => dialog.close()}
+	title={current?.title ?? ''}
+	description={current?.description}
+	tone={current?.tone}
+>
+	{#snippet actions()}
+		{#each buttons as action, i (action.label)}
+			<Button
+				variant={action.variant ?? (i === buttons.length - 1 ? 'primary' : 'secondary')}
+				onclick={() => dialog.run(action)}
+			>
+				{action.label}
+			</Button>
+		{/each}
+	{/snippet}
+</Dialog>
diff --git a/web-player/src/lib/components/ui/overlay/GlassMenu.svelte b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
index 264a020..af452f3 100644
--- a/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
@@ -12,7 +12,9 @@
 </script>
 
 <div
-	class="glass-panel animate-pop rounded-panel p-1.5 {border ? 'border border-hairline' : ''} {klass}"
+	class="glass-panel animate-pop rounded-panel p-1.5 {border
+		? 'border border-hairline'
+		: ''} {klass}"
 	{style}
 >
 	{@render children()}
diff --git a/web-player/src/lib/components/ui/overlay/Modal.svelte b/web-player/src/lib/components/ui/overlay/Modal.svelte
index c304c61..cdb0045 100644
--- a/web-player/src/lib/components/ui/overlay/Modal.svelte
+++ b/web-player/src/lib/components/ui/overlay/Modal.svelte
@@ -2,6 +2,9 @@
 	import type { Snippet } from 'svelte';
 	import X from '@lucide/svelte/icons/x';
 	import IconButton from '../primitives/IconButton.svelte';
+	import { fade } from 'svelte/transition';
+	import { expoOut } from 'svelte/easing';
+	import type { TransitionConfig } from 'svelte/transition';
 
 	interface Props {
 		open: boolean;
@@ -45,6 +48,15 @@
 		);
 	}
 
+	function pop(node: Element, { duration = 200 }: { duration?: number } = {}): TransitionConfig {
+		return {
+			duration,
+			easing: expoOut,
+			css: (t) =>
+				`opacity: ${t}; transform: scale(${0.98 + 0.02 * t}) translateY(${0.25 * (1 - t)}rem);`
+		};
+	}
+
 	function onWindowKeydown(event: KeyboardEvent) {
 		if (!open) return;
 		if (event.key === 'Escape') {
@@ -70,13 +82,15 @@
 
 {#if open}
 	<div
-		class="animate-fade fixed inset-0 z-(--z-modal) grid place-items-center bg-scrim/70 p-4 backdrop-blur-sm"
+		transition:fade={{ duration: 200 }}
+		class="fixed inset-0 z-(--z-modal) grid place-items-center bg-scrim/70 p-4 backdrop-blur-sm"
 		role="presentation"
 		onclick={onBackdropClick}
 	>
 		<div
 			bind:this={panel}
-			class="glass-panel animate-pop max-h-[85dvh] w-full overflow-y-auto {maxWidth} rounded-panel p-5 outline-none sm:p-6 {panelClass}"
+			transition:pop={{ duration: 200 }}
+			class="glass-panel max-h-[85dvh] w-full overflow-y-auto {maxWidth} rounded-panel p-5 outline-none sm:p-6 {panelClass}"
 			role="dialog"
 			aria-modal="true"
 			aria-label={title}
@@ -86,7 +100,7 @@
 				<div class="flex items-center justify-between gap-4">
 					<div class="min-w-0">
 						{#if eyebrow}
-							<p class="mb-2.5 text-eyebrow text-muted">
+							<p class="mb-2.5 text-eyebrow text-fg-2">
 								{eyebrow}
 							</p>
 						{/if}
diff --git a/web-player/src/lib/components/ui/primitives/BackLink.svelte b/web-player/src/lib/components/ui/primitives/BackLink.svelte
index 2143aa2..a1b7081 100644
--- a/web-player/src/lib/components/ui/primitives/BackLink.svelte
+++ b/web-player/src/lib/components/ui/primitives/BackLink.svelte
@@ -24,7 +24,7 @@
 <a
 	href={target.url}
 	{onclick}
-	class="inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
+	class="inline-flex items-center text-fg-2 transition-colors hover:text-accent-soft"
 >
 	<span class="grid size-8 place-items-center">
 		<ArrowLeft class="size-icon-sm" />
diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
index 8933828..5f2427e 100644
--- a/web-player/src/lib/components/ui/primitives/Button.svelte
+++ b/web-player/src/lib/components/ui/primitives/Button.svelte
@@ -29,20 +29,20 @@
 	}: Props = $props();
 
 	const sizes = {
-		sm: 'px-4 py-2.5 text-xs',
-		md: 'px-5 py-3 text-sm',
-		lg: 'px-6 py-3.5 text-sm'
+		sm: 'rounded-control px-4 py-2 text-xs',
+		md: 'rounded-btn-sm px-4.5 py-2.5 text-control-sm',
+		lg: 'rounded-btn px-6 py-3.5 text-sm'
 	};
 
 	const variants = {
-		primary: 'bg-cta-strong text-ink hover:brightness-95',
+		primary: 'bg-cta-strong text-ink hover:bg-cta-strong-hover',
 		secondary: 'bg-btn text-fg hover:bg-btn-hover',
-		accent: 'bg-accent-tint text-accent-soft hover:bg-accent-btn-hover',
+		accent: 'surface-active text-accent-soft hover:surface-active-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
 
 	const classes = $derived(
-		`inline-flex items-center justify-center gap-2 rounded-control btn-transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
+		`inline-flex items-center justify-center gap-2 font-medium btn-transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
 	);
 </script>
 
diff --git a/web-player/src/lib/components/ui/primitives/Chip.svelte b/web-player/src/lib/components/ui/primitives/Chip.svelte
index 548f531..e5155b5 100644
--- a/web-player/src/lib/components/ui/primitives/Chip.svelte
+++ b/web-player/src/lib/components/ui/primitives/Chip.svelte
@@ -15,9 +15,7 @@
 		href
 			? 'rounded-full border border-line-strong px-3.5 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg'
 			: `flex items-center gap-2 rounded-full px-3.5 py-2 text-xs font-medium transition ${
-					selected
-						? 'bg-cta-strong text-ink'
-						: 'bg-surface-2 text-fg-2 hover:bg-surface-hover hover:text-fg'
+					selected ? 'bg-cta-strong text-ink' : 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg'
 				}`
 	);
 </script>
@@ -25,7 +23,7 @@
 {#snippet content()}
 	{@render children()}
 	{#if count !== undefined}
-		<span class="tabular-nums {selected ? 'opacity-55' : 'text-muted'}">{count}</span>
+		<span class="tabular-nums {selected ? 'opacity-55' : 'text-fg-2'}">{count}</span>
 	{/if}
 {/snippet}
 
diff --git a/web-player/src/lib/components/ui/primitives/Field.svelte b/web-player/src/lib/components/ui/primitives/Field.svelte
index 3c796b2..c606ee9 100644
--- a/web-player/src/lib/components/ui/primitives/Field.svelte
+++ b/web-player/src/lib/components/ui/primitives/Field.svelte
@@ -20,7 +20,7 @@
 	{/if}
 	{@render children()}
 	{#if hint}
-		<div class="mt-2 flex items-center justify-between gap-3 text-xs text-muted">
+		<div class="mt-2 flex items-center justify-between gap-3 text-xs text-fg-2">
 			{@render hint()}
 		</div>
 	{/if}
diff --git a/web-player/src/lib/components/ui/primitives/IconButton.svelte b/web-player/src/lib/components/ui/primitives/IconButton.svelte
index ee60492..c3d9be5 100644
--- a/web-player/src/lib/components/ui/primitives/IconButton.svelte
+++ b/web-player/src/lib/components/ui/primitives/IconButton.svelte
@@ -41,7 +41,7 @@
 	};
 
 	const TEXT: Record<'muted' | 'subtle' | 'plain', string> = {
-		muted: 'text-muted hover:text-fg',
+		muted: 'text-fg-2 hover:text-fg',
 		subtle: 'text-fg-2 hover:text-fg',
 		plain: 'text-fg-2 hover:text-fg'
 	};
diff --git a/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte b/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte
index 140b4fe..e4e0cb8 100644
--- a/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte
+++ b/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte
@@ -34,6 +34,6 @@
 
 <div bind:this={sentinel} class="flex min-h-12 items-center justify-center py-8">
 	{#if loading}
-		<LoaderCircle class="size-5 animate-spin text-muted" />
+		<LoaderCircle class="size-5 animate-spin text-fg-2" />
 	{/if}
 </div>
diff --git a/web-player/src/lib/components/ui/primitives/Input.svelte b/web-player/src/lib/components/ui/primitives/Input.svelte
index 9d0d820..1ea8563 100644
--- a/web-player/src/lib/components/ui/primitives/Input.svelte
+++ b/web-player/src/lib/components/ui/primitives/Input.svelte
@@ -36,7 +36,7 @@
 
 <div class="relative w-full">
 	{#if Icon}
-		<span class="pointer-events-none absolute inset-y-0 left-4 grid place-items-center text-muted">
+		<span class="pointer-events-none absolute inset-y-0 left-4 grid place-items-center text-fg-2">
 			<Icon class="size-icon-lg" />
 		</span>
 	{/if}
diff --git a/web-player/src/lib/components/ui/primitives/SegmentedControl.svelte b/web-player/src/lib/components/ui/primitives/SegmentedControl.svelte
index 2a77974..7625ebd 100644
--- a/web-player/src/lib/components/ui/primitives/SegmentedControl.svelte
+++ b/web-player/src/lib/components/ui/primitives/SegmentedControl.svelte
@@ -16,7 +16,7 @@
 
 <div class="relative flex shrink-0 rounded-full bg-surface-2 p-1">
 	<div
-		class="absolute inset-y-1 left-1 rounded-full bg-fg transition-transform duration-300 ease-out"
+		class="absolute inset-y-1 left-1 rounded-full bg-fg transition-transform duration-200 ease-snappy"
 		style="width:calc((100% - 0.5rem) / {options.length}); transform:translateX(calc({index} * 100%))"
 	></div>
 	{#each options as option (option.value)}
@@ -26,7 +26,7 @@
 			class="relative z-(--z-raised) flex-1 px-4 py-1.5 text-center text-xs font-medium transition-colors {value ===
 			option.value
 				? 'text-ink'
-				: 'text-muted hover:text-fg-2'}"
+				: 'text-fg-2 hover:text-fg-2'}"
 		>
 			{option.label}
 		</button>
diff --git a/web-player/src/lib/player/player.svelte.ts b/web-player/src/lib/player/player.svelte.ts
index 7c503c4..41f3a50 100644
--- a/web-player/src/lib/player/player.svelte.ts
+++ b/web-player/src/lib/player/player.svelte.ts
@@ -2,6 +2,7 @@ import { browser } from '$app/environment';
 import { DEFAULT_ACCENT } from '$lib/theme/color';
 import { extractAccent, type Accent } from '$lib/theme/palette';
 import { shuffle } from '$lib/data/collections';
+import { dialog } from '$lib/state/dialog.svelte';
 
 export interface PlayerTrack {
 	id: string | number;
@@ -119,7 +120,6 @@ class PlayerState {
 	progress = $state(0);
 	volume = $state(browser ? Number(localStorage.getItem('player.volume') ?? 100) : 100);
 	loading = $state(false);
-	error = $state('');
 	recentlyPlayed = $state<PlayerTrack[]>([]);
 	playlists = $state<Playlist[]>([]);
 	shuffle = $state(false);
@@ -173,7 +173,7 @@ class PlayerState {
 			this.#stopProgressLoop();
 			this.loading = false;
 			this.playing = false;
-			this.error = 'No se pudo reproducir la pista.';
+			this.#fail();
 		});
 		this.#audio = audio;
 		this.#setupMediaSession(audio);
@@ -268,7 +268,6 @@ class PlayerState {
 		if (track) this.#syncMediaSessionMetadata(track);
 		const token = ++this.#loadToken;
 		this.loading = true;
-		this.error = '';
 		this.progress = 0;
 		try {
 			const src = await this.#resolveLocalSrc(String(id));
@@ -283,13 +282,23 @@ class PlayerState {
 			if (token !== this.#loadToken) return;
 			this.loading = false;
 			this.playing = false;
-			this.error =
-				exception instanceof Error && exception.message
+			if (exception instanceof DOMException && exception.name === 'AbortError') return;
+			this.#fail(
+				exception instanceof Error && !(exception instanceof DOMException)
 					? exception.message
-					: 'No se pudo reproducir la pista.';
+					: undefined
+			);
 		}
 	}
 
+	#fail(detail?: string) {
+		dialog.error(
+			'No se pudo reproducir la pista',
+			detail || 'El archivo no está disponible o su formato no es compatible.',
+			[{ label: 'Cerrar' }]
+		);
+	}
+
 	async #resolveLocalSrc(id: string): Promise<string> {
 		const res = await fetch(`/api/tracks/${id}/stream`);
 		if (!res.ok) throw new Error(await readErrorMessage(res));
diff --git a/web-player/src/lib/state/dialog.svelte.ts b/web-player/src/lib/state/dialog.svelte.ts
new file mode 100644
index 0000000..7f2d20f
--- /dev/null
+++ b/web-player/src/lib/state/dialog.svelte.ts
@@ -0,0 +1,35 @@
+export interface DialogAction {
+	label: string;
+	variant?: 'primary' | 'secondary' | 'accent' | 'danger';
+	onclick?: () => void;
+}
+
+export interface DialogOptions {
+	title: string;
+	description?: string;
+	tone?: 'neutral' | 'danger';
+	actions?: DialogAction[];
+}
+
+class DialogStore {
+	current = $state<DialogOptions | null>(null);
+
+	show(options: DialogOptions) {
+		this.current = options;
+	}
+
+	error(title: string, description?: string, actions?: DialogAction[]) {
+		this.show({ title, description, tone: 'danger', actions });
+	}
+
+	close() {
+		this.current = null;
+	}
+
+	run(action: DialogAction) {
+		this.close();
+		action.onclick?.();
+	}
+}
+
+export const dialog = new DialogStore();
diff --git a/web-player/src/lib/state/menus.svelte.ts b/web-player/src/lib/state/menus.svelte.ts
index 305c7ea..af9000f 100644
--- a/web-player/src/lib/state/menus.svelte.ts
+++ b/web-player/src/lib/state/menus.svelte.ts
@@ -1,4 +1,7 @@
-import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
+import {
+	contextMenuPosition,
+	type MenuPosition
+} from '$lib/components/ui/overlay/ContextMenu.svelte';
 import { player, toQueueItem, type ApiTrackLike } from '../player/player.svelte';
 
 export type TrackMenuState = { track: ApiTrackLike } & MenuPosition;
diff --git a/web-player/src/lib/theme/color.ts b/web-player/src/lib/theme/color.ts
index 0186c23..62588d8 100644
--- a/web-player/src/lib/theme/color.ts
+++ b/web-player/src/lib/theme/color.ts
@@ -1,5 +1,5 @@
 export const ACCENT_LIGHTNESS = 74;
-export const ACCENT_CHROMA = 0.145;
-export const ACCENT_HUE = 145;
+export const ACCENT_CHROMA = 0.06;
+export const ACCENT_HUE = 30;
 
 export const DEFAULT_ACCENT = `oklch(${ACCENT_LIGHTNESS}% ${ACCENT_CHROMA} ${ACCENT_HUE})`;
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index 4ba3f03..d703cf2 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -7,14 +7,14 @@
 	--mf-tile-shade-c: 0.035;
 
 	--mf-text: #d9d8dc;
-	--mf-text-2: #8a8a8e;
-	--mf-text-3: #7d7d81;
-	--mf-text-4: #646468;
+	--mf-text-2: #b1b0b5;
 
 	--mf-surface: rgba(255, 255, 255, 0.022);
-	--mf-surface-2: rgba(255, 255, 255, 0.045);
+	--mf-surface-2: rgba(255, 255, 255, 0.055);
 	--mf-surface-hover: rgba(255, 255, 255, 0.06);
-	--mf-btn-bg-hover: var(--mf-surface-hover);
+	--mf-row-hover: rgba(255, 255, 255, 0.035);
+	--mf-btn-bg: rgba(255, 255, 255, 0.055);
+	--mf-btn-bg-hover: rgba(255, 255, 255, 0.09);
 
 	--mf-border: rgba(255, 255, 255, 0.04);
 	--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -24,7 +24,14 @@
 	--mf-on-art: #fefdfb;
 	--mf-on-art-2: #cac8c3;
 	--mf-ink: #0a0a0d;
-	--mf-cta-strong-bg: #c4c4c8;
+	--mf-cta-strong-bg: #c6c4cb;
+	--mf-cta-strong-hover: #d8d7dc;
+	--mf-danger-fg: oklch(0.885 0.062 18.334);
+
+	--mf-motion-fast: 150ms;
+	--mf-motion-base: 200ms;
+	--mf-motion-slow: 300ms;
+	--mf-ease: cubic-bezier(0.16, 1, 0.3, 1);
 
 	--mf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 
@@ -71,15 +78,15 @@
 }
 
 :root[data-theme='light'] {
-	--mf-text: #17171a;
-	--mf-text-2: #4a4a4e;
-	--mf-text-3: #6b6b6f;
-	--mf-text-4: #8c8c90;
+	--mf-text: #17161c;
+	--mf-text-2: #5d5c66;
 
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
-	--mf-surface-hover: #e8eceb;
-	--mf-btn-bg-hover: var(--mf-surface-hover);
+	--mf-surface-hover: rgba(26, 24, 38, 0.06);
+	--mf-row-hover: rgba(26, 24, 38, 0.04);
+	--mf-btn-bg: rgba(255, 255, 255, 0.7);
+	--mf-btn-bg-hover: #ffffff;
 
 	--mf-scrollbar: rgba(0, 0, 0, 0.18);
 	--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
@@ -89,8 +96,10 @@
 	--mf-track: rgba(0, 0, 0, 0.12);
 
 	--mf-scrim: #ffffff;
-	--mf-ink: #ffffff;
-	--mf-cta-strong-bg: #17171a;
+	--mf-ink: #f7f6f9;
+	--mf-cta-strong-bg: #1b1a20;
+	--mf-cta-strong-hover: #2e2d36;
+	--mf-danger-fg: oklch(0.5 0.16 25);
 
 	--mf-tile-l: 0.58;
 	--mf-tile-c: 0.085;
diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 0d95606..7d25d83 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -2,70 +2,71 @@ function r(value: number, digits = 4): string {
 	return value.toFixed(digits);
 }
 
-function tc(alpha: number, l: number, hue: number): string {
-	const lightness = 0.37 - l / 380;
-	const chroma = Math.max(0, 0.15 - l / 1600);
-	return `oklch(${r(lightness)} ${r(chroma)} ${r(hue, 1)} / ${alpha})`;
-}
-
-function tcLight(alpha: number, l: number, hue: number): string {
-	const depth = (88 - l) / 58;
-	const lightness = 0.9 - 0.14 * depth;
-	const chroma = 0.05 + 0.13 * depth;
-	return `oklch(${r(lightness)} ${r(chroma)} ${r(hue, 1)} / ${alpha})`;
-}
-
 export interface ThemeTokens {
 	[cssVar: string]: string;
 }
 
 export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'): ThemeTokens {
 	const h = ((hue % 360) + 360) % 360;
-	const h2 = (h + 40) % 360;
 	const H = r(h, 1);
-	const H2 = r(h2, 1);
 	const light = mode === 'light';
 
-	const accentL = light ? 0.8 : 0.8;
-	const accentC = light ? 0.4 : 0.2;
-	const titleL = light ? 0.5 : 0.8;
-	const titleC = light ? 0.1 : 0.05;
-	const mutedL = light ? 0.48 : 0.79;
-	const mutedC = light ? 0.06 : 0.035;
+	const accentL = light ? 0.5 : 0.72;
+	const accentC = light ? 0.07 : 0.06;
+	const titleL = light ? 0.36 : 0.86;
+	const titleC = light ? 0.06 : 0.03;
+	const mutedL = light ? 0.42 : 0.8;
+	const mutedC = light ? 0.05 : 0.02;
+	const accent = `oklch(${r(accentL)} ${r(accentC)} ${H})`;
+
+	const g = (l1: number, c1: number, a1: number, l2: number, c2: number, a2: number) =>
+		`linear-gradient(90deg, oklch(${l1} ${c1} ${H} / ${a1}), oklch(${l2} ${c2} ${H} / ${a2}))`;
+	const gActive = light
+		? g(0.82, 0.05, 0.55, 0.87, 0.035, 0.36)
+		: g(0.46, 0.06, 0.34, 0.4, 0.045, 0.22);
+	const gHover = light
+		? g(0.86, 0.035, 0.38, 0.9, 0.025, 0.24)
+		: g(0.42, 0.045, 0.26, 0.38, 0.035, 0.17);
+	const glow = (l: number, c: number, a: number) => `oklch(${l} ${c} ${H} / ${a})`;
+	// Fixed danger hue so error dialogs read red whatever the theme hue is.
+	const dangerGlow = (l: number, c: number, a: number) => `oklch(${l} ${c} 25 / ${a})`;
 
 	return {
-		'--mf-accent': `oklch(${r(accentL)} ${r(accentC)} ${H})`,
+		'--mf-accent': accent,
 		'--mf-accent-title': `oklch(${r(titleL)} ${r(titleC)} ${H})`,
 		'--mf-accent-muted': `oklch(${r(mutedL)} ${r(mutedC)} ${H})`,
-		'--mf-accent-soft-bg': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 8%, var(--mf-bg))`,
+		'--mf-accent-soft-bg': `color-mix(in srgb, ${accent} 12%, var(--mf-bg))`,
 		'--mf-accent-line': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.2)`,
 		'--mf-accent-hair': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.09)`,
-		'--mf-accent-btn-bg': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 15%, var(--mf-bg))`,
-		'--mf-accent-btn-bg-hover': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 24%, var(--mf-bg))`,
-		'--mf-bg': light ? `oklch(0.97 0.014 ${H})` : `oklch(0.075 0.02 ${H})`,
-		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.025 ${H})`,
-		'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.1 0.022 ${H} / 0.28)`,
-		'--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.115 0.025 ${H} / 0.9)`,
-		'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.05 ${H} / 0.08)`,
+		'--mf-accent-btn-bg': `color-mix(in srgb, ${accent} 18%, var(--mf-bg))`,
+		'--mf-accent-btn-bg-hover': `color-mix(in srgb, ${accent} 26%, var(--mf-bg))`,
+		'--mf-g-active': gActive,
+		'--mf-g-hover': gHover,
+		'--mf-bg': light ? `oklch(0.975 0.012 ${H})` : `oklch(0.068 0.008 ${H})`,
+		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.012 ${H})`,
+		'--mf-panel-bg': light ? 'rgba(255, 255, 255, 0.28)' : 'rgba(0, 0, 0, 0.16)',
+		'--mf-bar-bg': light ? `oklch(0.99 0.01 ${H} / 0.86)` : `oklch(0.105 0.012 ${H} / 0.9)`,
+		'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.06)` : `oklch(0.62 0.02 ${H} / 0.05)`,
 		'--mf-ambient': light
-			? 'none'
-			: `radial-gradient(95% 85% at 20% 0%, ${tc(0.12, 30, h)}, transparent 88%), radial-gradient(90% 80% at 80% 0%, ${tc(0.09, 40, h)}, transparent 88%)`,
-		'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
+			? `radial-gradient(80% 70% at 12% 0%, ${glow(0.9, 0.05, 0.55)}, transparent 75%), radial-gradient(70% 60% at 88% 8%, ${glow(0.92, 0.035, 0.4)}, transparent 75%), radial-gradient(90% 70% at 50% 110%, ${glow(0.93, 0.03, 0.35)}, transparent 80%), linear-gradient(180deg, ${glow(0.96, 0.02, 0.4)}, transparent 60%)`
+			: `radial-gradient(75% 65% at 12% 0%, ${glow(0.3, 0.045, 0.5)}, transparent 75%), radial-gradient(65% 55% at 85% 5%, ${glow(0.24, 0.035, 0.35)}, transparent 75%), radial-gradient(90% 70% at 50% 105%, ${glow(0.18, 0.025, 0.3)}, transparent 80%), linear-gradient(180deg, ${glow(0.14, 0.02, 0.35)}, transparent 55%)`,
+		'--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`,
 		'--mf-hero-bg': light
-			? `linear-gradient(${tcLight(0.1, 55, h)}, ${tcLight(0.1, 55, h)})`
-			: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
+			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.96, 0.02, 0.4)} 60%)`
+			: `linear-gradient(120deg, ${glow(0.24, 0.04, 0.55)}, ${glow(0.14, 0.02, 0.35)} 60%, ${glow(0.12, 0.015, 0.25)})`,
 		'--mf-modal-glow': light
-			? `linear-gradient(135deg, ${tcLight(0.34, 42, h)} 0%, ${tcLight(0.2, 55, h)} 30%, ${tcLight(0.1, 70, h)} 55%, ${tcLight(0.04, 85, h)} 80%, ${tcLight(0.02, 88, h)} 100%)`
-			: `linear-gradient(135deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 28%, ${tc(0.03, 88, h)} 50%, rgba(6,6,9,0) 70%)`,
+			? `linear-gradient(135deg, ${glow(0.88, 0.05, 0.5)} 0%, ${glow(0.93, 0.03, 0.2)} 40%, transparent 75%)`
+			: `linear-gradient(135deg, ${glow(0.3, 0.045, 0.4)} 0%, ${glow(0.2, 0.03, 0.15)} 35%, transparent 70%)`,
+		'--mf-modal-glow-danger': light
+			? `linear-gradient(135deg, ${dangerGlow(0.86, 0.07, 0.55)} 0%, ${dangerGlow(0.92, 0.04, 0.22)} 40%, transparent 75%)`
+			: `linear-gradient(135deg, ${dangerGlow(0.34, 0.1, 0.45)} 0%, ${dangerGlow(0.22, 0.06, 0.18)} 35%, transparent 70%)`,
 		'--mf-spotlight-bg': light
-			? `linear-gradient(${tcLight(0.1, 55, h)}, ${tcLight(0.1, 55, h)})`
-			: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
-		'--mf-logo-grad': light
-			? `linear-gradient(140deg, oklch(0.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
-			: `linear-gradient(140deg, oklch(0.78 0.15 ${H}), oklch(0.62 0.13 ${H2}) 92%)`,
+			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)`
+			: `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`,
+		'--mf-logo-grad': `linear-gradient(${accent}, ${accent})`,
 		'--mf-cover-grad': light
-			? `linear-gradient(150deg, oklch(0.7 0.16 ${H}), oklch(0.54 0.11 ${H}))`
-			: `linear-gradient(150deg, oklch(0.5 0.13 ${H}), oklch(0.16 0.035 ${H}))`
+			? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
+			: `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))`
 	};
 }
 
diff --git a/web-player/src/routes/(app)/albums/[id]/+page.svelte b/web-player/src/routes/(app)/albums/[id]/+page.svelte
index 4e65994..98caf8f 100644
--- a/web-player/src/routes/(app)/albums/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/albums/[id]/+page.svelte
@@ -78,9 +78,7 @@
 				{/if}
 			</Button>
 			{#if isOwner}
-				<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
-					Editar
-				</Button>
+				<Button size="sm" variant="secondary" onclick={() => (editing = true)}>Editar</Button>
 				<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
 					Eliminar
 				</Button>
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 4f1ec39..4d90242 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -249,7 +249,7 @@
 				{/if}
 
 				<div class="flex h-22 min-w-0 flex-1 flex-col justify-center gap-3">
-					<div class="text-eyebrow leading-none font-semibold text-fg-3">
+					<div class="text-eyebrow leading-none font-semibold text-fg-2">
 						Mejor resultado · {TOP_RESULT_KIND_LABEL[topResult.kind]}
 					</div>
 					<div
@@ -264,7 +264,7 @@
 									: topResult.user.name}
 					</div>
 					{#if topResult.kind === 'track' && topResult.track.artist}
-						<div class="truncate text-sm leading-none text-fg-3">
+						<div class="truncate text-sm leading-none text-fg-2">
 							{topResult.track.artist}
 						</div>
 					{/if}
@@ -276,6 +276,7 @@
 			<svelte:element
 				this={topResult.kind === 'track' ? 'button' : 'a'}
 				type={topResult.kind === 'track' ? 'button' : undefined}
+				role={topResult.kind === 'track' ? 'button' : 'link'}
 				href={topResult.kind === 'track' ? undefined : topResultHref}
 				onclick={topResult.kind === 'track' ? playTopResult : undefined}
 				class="group/top animate-pop mt-6.5 flex w-full items-center gap-5 rounded-panel-lg bg-surface p-4.5 text-left transition hover:bg-surface-hover"
@@ -348,7 +349,7 @@
 											{/if}
 										{/snippet}
 										{#snippet trailing()}
-											<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
+											<span class="hidden shrink-0 text-xs text-fg-2 tabular-nums sm:block">
 												{fmtTime(seconds)} · {fmtPlays(track.listensCount)}
 											</span>
 										{/snippet}
@@ -383,7 +384,7 @@
 									oncontextmenu={(e) => openAlbumMenu(e, album.id)}
 								>
 									{#snippet trailing()}
-										<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
+										<span class="hidden shrink-0 text-xs text-fg-2 tabular-nums sm:block">
 											{Number(album.trackCount)} canciones
 										</span>
 									{/snippet}
diff --git a/web-player/src/routes/(app)/playlists/[id]/+page.svelte b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
index 82b7d5b..a466830 100644
--- a/web-player/src/routes/(app)/playlists/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
@@ -67,9 +67,7 @@
 					Reproducir
 				{/if}
 			</Button>
-			<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
-				Editar
-			</Button>
+			<Button size="sm" variant="secondary" onclick={() => (editing = true)}>Editar</Button>
 			<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
 				Eliminar
 			</Button>
diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte
index 80ce79d..ac12ca8 100644
--- a/web-player/src/routes/(app)/upload/+page.svelte
+++ b/web-player/src/routes/(app)/upload/+page.svelte
@@ -123,7 +123,7 @@
 						</span>
 						<span class="text-sm font-medium text-fg">{step.label}</span>
 					</div>
-					<p class="mt-2.5 text-xs text-muted">{step.hint}</p>
+					<p class="mt-2.5 text-xs text-fg-2">{step.hint}</p>
 				</Surface>
 			</li>
 		{/each}
@@ -191,7 +191,7 @@
 					aria-label="Seleccionar archivo de audio"
 				/>
 				{#if audioName === ''}
-					<Headphones class="size-9 text-muted sm:size-10" strokeWidth={1.4} />
+					<Headphones class="size-9 text-fg-2 sm:size-10" strokeWidth={1.4} />
 				{:else}
 					<Music class="size-9 text-accent-soft sm:size-10" strokeWidth={1.4} />
 				{/if}
@@ -199,12 +199,12 @@
 					<p class="mt-4 text-sm font-medium text-fg">
 						Arrastra tu audio aquí o haz clic para elegir
 					</p>
-					<p class="mt-1.5 text-xs text-muted">MP3, FLAC, WAV…</p>
+					<p class="mt-1.5 text-xs text-fg-2">MP3, FLAC, WAV…</p>
 				{:else}
 					<p class="mt-4 max-w-full truncate text-sm font-medium text-fg">
 						{audioName}
 					</p>
-					<p class="mt-1.5 text-xs text-muted">{formatSize(audioSize)} · Listo para subir</p>
+					<p class="mt-1.5 text-xs text-fg-2">{formatSize(audioSize)} · Listo para subir</p>
 				{/if}
 			</div>
 
@@ -251,7 +251,7 @@
 				<Surface padding="sm">
 					<div class="flex items-center justify-between text-sm">
 						<span class="font-medium text-fg">Subiendo y creando la pista…</span>
-						<span class="text-xs text-muted">un momento</span>
+						<span class="text-xs text-fg-2">un momento</span>
 					</div>
 					<div class="mt-3 h-2 overflow-hidden rounded-full bg-surface-2">
 						<div class="h-full w-full animate-pulse rounded-full bg-accent-soft"></div>
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index e51811c..9f41db5 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -10,6 +10,7 @@
 	import TopBar from '$lib/components/layout/TopBar.svelte';
 	import MobileHeader from '$lib/components/layout/MobileHeader.svelte';
 	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import DialogHost from '$lib/components/ui/overlay/DialogHost.svelte';
 	import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
@@ -87,6 +88,7 @@
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -- CSS generado a partir de números, sin entrada de usuario -->
 	{@html `<style>${initialThemeCss}</style>`}
 </svelte:head>
 
@@ -134,3 +136,5 @@
 		</Modal>
 	</div>
 {/if}
+
+<DialogHost />
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 2eb4efd..ee3d1e5 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -134,9 +134,7 @@
 </svelte:head>
 
 <Page>
-	<div
-		class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5"
-	>
+	<div class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5">
 		<div
 			class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
 		>
@@ -173,7 +171,7 @@
 					{#each statsList as stat (stat.label)}
 						<div>
 							<div class="text-display-2 text-fg">{stat.value}</div>
-							<div class="mt-1 text-xs text-fg-3">{stat.label}</div>
+							<div class="mt-1 text-xs text-fg-2">{stat.label}</div>
 						</div>
 					{/each}
 				</div>
@@ -245,7 +243,7 @@
 							<Button variant="secondary" onclick={shuffleSpotlight}>Aleatorio</Button>
 						</div>
 					</div>
-					<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">
+					<div class="flex flex-col gap-2 p-5.5 sm:p-6">
 						{#each spotlightRows as { track, seconds }, i (track.id)}
 							<ListRow
 								onclick={() => playSpotlightTrack(i)}
@@ -265,7 +263,7 @@
 								{/snippet}
 							</ListRow>
 						{:else}
-							<p class="p-2 text-sm text-fg-3">Esta playlist todavía no tiene canciones.</p>
+							<p class="p-2 text-sm text-fg-2">Esta playlist todavía no tiene canciones.</p>
 						{/each}
 					</div>
 				</div>
@@ -318,12 +316,12 @@
 									{#if isCurrent}
 										<EqBars size={13} paused={!player.playing} />
 									{:else}
-										<span class="text-xs text-muted tabular-nums">{i + 1}</span>
+										<span class="text-xs text-fg-2 tabular-nums">{i + 1}</span>
 									{/if}
 								</span>
 							{/snippet}
 							{#snippet trailing()}
-								<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
+								<span class="hidden shrink-0 text-xs text-fg-2 tabular-nums sm:block">
 									{fmtPlays(track.listensCount)}
 								</span>
 							{/snippet}
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 9b8b0d8..4d2eea9 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -9,15 +9,13 @@
 	--color-surface: var(--mf-surface);
 	--color-surface-2: var(--mf-surface-2);
 	--color-surface-hover: var(--mf-surface-hover);
-	--color-hover: var(--mf-surface-2);
+	--color-hover: var(--mf-row-hover);
 	--color-line: var(--mf-border);
 	--color-line-strong: var(--mf-border-strong);
 	--color-hairline: var(--mf-hairline);
 	--color-track: var(--mf-track);
 	--color-fg: var(--mf-text);
 	--color-fg-2: var(--mf-text-2);
-	--color-fg-3: var(--mf-text-3);
-	--color-muted: var(--mf-text-4);
 	--color-accent: var(--mf-accent);
 	--color-accent-soft: var(--mf-accent-title);
 	--color-accent-tint: var(--mf-accent-soft-bg);
@@ -29,17 +27,17 @@
 	--color-on-art: var(--mf-on-art);
 	--color-on-art-2: var(--mf-on-art-2);
 	--color-danger: oklch(63.7% 0.15 25.331);
-	--color-danger-fg: oklch(88.5% 0.062 18.334);
-	--color-btn: color-mix(
-		in srgb,
-		var(--mf-elevated) 45%,
-		color-mix(in srgb, var(--mf-hero-tint) 8%, var(--mf-bg))
-	);
+	--color-danger-fg: var(--mf-danger-fg);
+	--color-btn: var(--mf-btn-bg);
 	--color-btn-hover: var(--mf-btn-bg-hover);
+	--color-cta-strong-hover: var(--mf-cta-strong-hover);
+	--color-row-hover: var(--mf-row-hover);
 
 	--radius-tag: 0.25rem;
 	--radius-thumb: 0.5rem;
 	--radius-control: 0.625rem;
+	--radius-btn-sm: 0.6875rem;
+	--radius-btn: 0.75rem;
 	--radius-art: 0.8125rem;
 	--radius-art-lg: 1.125rem;
 	--radius-panel: 1.125rem;
@@ -66,6 +64,11 @@
 	--container-search: 30rem;
 	--container-cta: 20rem;
 
+	--text-control-sm: 0.78125rem;
+
+	--ease-snappy: var(--mf-ease);
+	--default-transition-duration: var(--mf-motion-fast);
+
 	--tracking-display: -0.02em;
 	--tracking-eyebrow: 0.1em;
 	--leading-body: 1.65;
@@ -122,7 +125,8 @@
 }
 
 @utility btn-transition {
-	transition-property: color, background-color, border-color, outline-color, opacity, box-shadow, filter;
+	transition-property:
+		color, background-color, border-color, outline-color, opacity, box-shadow, filter;
 	transition-timing-function: var(--default-transition-timing-function);
 	transition-duration: var(--default-transition-duration);
 }
@@ -184,7 +188,7 @@
 @utility app-main {
 	--mf-dock-h: 0px;
 	padding-bottom: calc(var(--mf-nav-h) + var(--mf-safe-b) + var(--mf-dock-h));
-	transition: padding 0.3s;
+	transition: padding var(--mf-motion-slow) var(--mf-ease);
 
 	&[data-has-track] {
 		--mf-dock-h: var(--mf-player-h);
@@ -197,6 +201,12 @@
 		oklch(var(--mf-tile-shade-l) var(--mf-tile-shade-c) var(--tile-hue))
 	);
 }
+@utility surface-active {
+	background-image: var(--mf-g-active);
+}
+@utility surface-active-hover {
+	background-image: var(--mf-g-hover);
+}
 @utility hero-surface {
 	background-image: var(--mf-hero-bg);
 }
@@ -211,7 +221,7 @@
 		);
 }
 @utility field-control {
-	@apply w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-muted focus:bg-surface-2 focus:outline-none;
+	@apply w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-fg-2 focus:bg-surface-2 focus:outline-none;
 }
 
 @layer base {
@@ -258,7 +268,7 @@ button:disabled {
 @keyframes pop-in {
 	from {
 		opacity: 0;
-		transform: scale(0.96) translateY(0.5rem);
+		transform: scale(0.98) translateY(0.25rem);
 	}
 	to {
 		opacity: 1;
@@ -307,16 +317,16 @@ button:disabled {
 }
 
 .animate-enter {
-	animation: fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
-	animation-delay: calc(min(var(--i, 0), 10) * 45ms);
+	animation: fade-up var(--mf-motion-slow) var(--mf-ease) both;
+	animation-delay: calc(min(var(--i, 0), 10) * 40ms);
 }
 
 .animate-pop {
-	animation: pop-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+	animation: pop-in var(--mf-motion-base) var(--mf-ease) both;
 }
 
 .animate-fade {
-	animation: fade-in 0.4s ease both;
+	animation: fade-in var(--mf-motion-base) var(--mf-ease) both;
 }
 
 .glass-panel {
@@ -324,7 +334,11 @@ button:disabled {
 	background-image: var(--mf-modal-glow);
 	backdrop-filter: blur(22px);
 	-webkit-backdrop-filter: blur(22px);
-	transition: background 0.6s;
+	transition: background var(--mf-motion-slow) var(--mf-ease);
+}
+
+.glass-panel.glass-panel-danger {
+	background-image: var(--mf-modal-glow-danger);
 }
 
 @media (prefers-reduced-motion: reduce) {
-- 
2.54.0


From 3d51f08e0bc0fd1b87977963295cd780a2ed7a4d Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 01:40:16 +0200
Subject: [PATCH 46/50] Changes on header

---
 .../src/lib/components/layout/MobileHeader.svelte      |  2 +-
 web-player/src/lib/components/layout/Sidebar.svelte    |  5 +++++
 .../src/lib/components/ui/primitives/Logo.svelte       | 10 +---------
 web-player/src/lib/theme/tokens.ts                     |  1 -
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte
index e219c10..26f9750 100644
--- a/web-player/src/lib/components/layout/MobileHeader.svelte
+++ b/web-player/src/lib/components/layout/MobileHeader.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-bg/85 page-x backdrop-blur-md sm:hidden"
+	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between bg-transparent page-x backdrop-blur-md sm:hidden"
 >
 	<a href="/">
 		<Logo size="sm" />
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index a835f8b..562c24d 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -7,6 +7,7 @@
 	import ListRow from '../ui/media/ListRow.svelte';
 	import IconButton from '../ui/primitives/IconButton.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
+	import Logo from '../ui/primitives/Logo.svelte';
 
 	interface SidebarPlaylist {
 		id: string;
@@ -33,6 +34,10 @@
 	class="hidden shrink-0 flex-col border-r border-hairline p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
+	<a href="/" class="mb-4">
+		<Logo size="sm" />
+	</a>
+
 	<nav class="flex flex-col gap-1">
 		{#each navLinks as link (link.href)}
 			{@const active = isActive(link.href)}
diff --git a/web-player/src/lib/components/ui/primitives/Logo.svelte b/web-player/src/lib/components/ui/primitives/Logo.svelte
index 09a1f13..a508b9a 100644
--- a/web-player/src/lib/components/ui/primitives/Logo.svelte
+++ b/web-player/src/lib/components/ui/primitives/Logo.svelte
@@ -5,18 +5,10 @@
 
 	let { size = 'sm' }: Props = $props();
 
-	const MARK: Record<'sm' | 'lg', string> = {
-		sm: 'size-5.5 rounded-thumb',
-		lg: 'size-8 rounded-control'
-	};
-
 	const TEXT: Record<'sm' | 'lg', string> = {
 		sm: 'font-display text-lg font-semibold tracking-tight text-fg',
 		lg: 'font-display text-[clamp(1.5rem,3vw,2.5rem)] font-semibold tracking-tight'
 	};
 </script>
 
-<span class="flex items-center gap-3">
-	<span class="{MARK[size]} bg-(image:--mf-logo-grad)"></span>
-	<span class={TEXT[size]}>Musify</span>
-</span>
+<span class={TEXT[size]}>Musify</span>
diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 7d25d83..b24f645 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -63,7 +63,6 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-spotlight-bg': light
 			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)`
 			: `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`,
-		'--mf-logo-grad': `linear-gradient(${accent}, ${accent})`,
 		'--mf-cover-grad': light
 			? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
 			: `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))`
-- 
2.54.0


From ba531b4f618e93b1e4c9fabe5ee2b7f201b4b266 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 05:28:11 +0200
Subject: [PATCH 47/50] Add actions

---
 .gitea/workflows/ci-cd.yml                   | 116 +++++++++++++++++++
 deploy/.env.prod.example                     |  27 +++--
 deploy/README.md                             |  67 ++++++++++-
 deploy/compose.prod.yml                      |   6 +-
 deploy/nginx/templates/default.conf.template |  30 ++---
 web-player/docs/paginas.md                   |   4 +-
 web-player/package-lock.json                 |  69 ++++++++---
 web-player/src/lib/api/schema.d.ts           |  50 +++++++-
 web-player/src/lib/player/player.svelte.ts   |  13 +++
 web-player/src/routes/+layout.server.ts      |  23 +++-
 web-player/src/routes/+layout.svelte         |  10 +-
 11 files changed, 358 insertions(+), 57 deletions(-)
 create mode 100644 .gitea/workflows/ci-cd.yml

diff --git a/.gitea/workflows/ci-cd.yml b/.gitea/workflows/ci-cd.yml
new file mode 100644
index 0000000..ccc168c
--- /dev/null
+++ b/.gitea/workflows/ci-cd.yml
@@ -0,0 +1,116 @@
+name: CI/CD
+
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: ['**']
+
+concurrency:
+  group: production-deploy
+  cancel-in-progress: false
+
+jobs:
+  backend-tests:
+    name: Backend tests (.NET)
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    defaults:
+      run:
+        working-directory: backend
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: '10.0.x'
+
+      - name: Restore
+        run: dotnet restore Musify.slnx
+
+      - name: Build
+        run: dotnet build Musify.slnx --no-restore -c Release
+
+      - name: Test
+        run: dotnet test Musify.slnx --no-build -c Release
+
+  web-player-checks:
+    name: web-player (check + lint)
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    defaults:
+      run:
+        working-directory: web-player
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: npm
+          cache-dependency-path: web-player/package-lock.json
+
+      - run: npm ci
+
+      - name: Type-check (svelte-check)
+        run: npm run check
+
+      - name: Lint (prettier + eslint + design tokens)
+        run: npm run lint
+
+  # Runs on the production host itself, through the existing self-hosted
+  # Gitea Actions runner (act_runner), which also carries a "production"
+  # label registered in native (non-docker) mode so its steps see the host's
+  # real Docker daemon directly (Docker socket + a bind-mounted deploy
+  # directory — see deploy/README.md for how that runner is set up).
+  #
+  # DEPLOY_PATH is the persistent clone already on that host (the one whose
+  # deploy/.env.prod is filled in and matches SharedServices/.env.prod) —
+  # deploy reuses it instead of a fresh checkout, since .env.prod is
+  # untracked and only lives there.
+  deploy:
+    name: Deploy to production
+    needs: [backend-tests, web-player-checks]
+    if: github.ref == 'refs/heads/master' && github.event_name == 'push'
+    runs-on: [production]
+    timeout-minutes: 20
+    env:
+      DEPLOY_PATH: /home/ubuntu/deploys/musify
+      COMPOSE: docker compose --env-file deploy/.env.prod -f deploy/compose.yml -f deploy/compose.prod.yml
+    steps:
+      - name: Pull latest master
+        run: |
+          set -euo pipefail
+          cd "$DEPLOY_PATH"
+          git fetch origin master
+          git reset --hard origin/master
+
+      - name: Migrate database, generate keys
+        run: |
+          set -euo pipefail
+          cd "$DEPLOY_PATH"
+          $COMPOSE up -d wait-for-postgres keys-init migrate
+
+      # zitadel-init/seaweedfs-init verify themselves through the PUBLIC
+      # auth./s3. URLs (see deploy/compose.yml), so they only succeed once a
+      # real domain is registered and nginx is serving it (see the TODO
+      # below and deploy/README.md). Tolerated for now so a red step here
+      # doesn't block the rest of the deploy; drop the `|| true` once that's
+      # in place, so a real regression here fails the job again.
+      - name: Create OIDC app + S3 bucket (pending public domain)
+        run: |
+          cd "$DEPLOY_PATH"
+          $COMPOSE up -d seaweedfs-init zitadel-init || echo "expected to fail until the production domain + nginx edge exist"
+
+      - name: Build and start apps
+        run: |
+          set -euo pipefail
+          cd "$DEPLOY_PATH"
+          $COMPOSE --profile apps up -d --build api worker gateway web-player
+
+      # TODO once a domain is registered and pointed at this server: merge
+      # Musify's vhosts (deploy/nginx/templates) into the existing
+      # gitea-nginx config instead of running the `nginx` service from
+      # compose.prod.yml, since gitea-nginx already owns host ports 80/443
+      # for gitea.ikerdemo.cat. See "Continuous deployment" in
+      # deploy/README.md.
diff --git a/deploy/.env.prod.example b/deploy/.env.prod.example
index 08029c1..e98fb5a 100644
--- a/deploy/.env.prod.example
+++ b/deploy/.env.prod.example
@@ -1,11 +1,14 @@
 # Production configuration for deploy/compose.yml + compose.prod.yml.
 # Copy to deploy/.env.prod, then:
 #
-#   1. replace every `example.com` with your domain,
+#   1. replace every `*.example.com` with your actual domains (each service
+#      below has its own, independent domain — they don't need to share a
+#      root, e.g. for DNS providers that don't allow multi-level
+#      subdomains),
 #   2. replace every CHANGE_ME with a strong random value
 #      (`openssl rand -hex 24`),
-#   3. point these DNS records at the server, all proxied/TLS-terminated the
-#      same way: example.com, www, api, auth, stream, s3.
+#   3. point each *_DOMAIN below at the server, proxied/TLS-terminated the
+#      same way.
 #
 # Requires ../../../Infrastructure running first, on the same Docker host,
 # with its own `infra-net` network already created. See
@@ -14,12 +17,18 @@
 
 DOTNET_ENVIRONMENT=Production
 
-# --- Domain ------------------------------------------------------------------
-# ROOT_DOMAIN drives the nginx vhosts; the URLs below must agree with it.
-ROOT_DOMAIN=example.com
-PUBLIC_WEB_URL=https://example.com
-PUBLIC_API_URL=https://api.example.com
-PUBLIC_STREAM_URL=https://stream.example.com
+# --- Domains -------------------------------------------------------------
+# Each *_DOMAIN drives its own nginx vhost (deploy/nginx/templates); the
+# PUBLIC_*_URL/S3_PUBLIC_URL below must agree with it (https://<domain>).
+WEB_DOMAIN=musify.example.com
+API_DOMAIN=musifyapi.example.com
+STREAM_DOMAIN=musifystream.example.com
+AUTH_DOMAIN=auth.example.com
+S3_DOMAIN=s3.example.com
+
+PUBLIC_WEB_URL=https://musify.example.com
+PUBLIC_API_URL=https://musifyapi.example.com
+PUBLIC_STREAM_URL=https://musifystream.example.com
 PUBLIC_AUTH_URL=https://auth.example.com
 S3_PUBLIC_URL=https://s3.example.com
 
diff --git a/deploy/README.md b/deploy/README.md
index 3bbd1c0..26522a2 100644
--- a/deploy/README.md
+++ b/deploy/README.md
@@ -125,14 +125,19 @@ cp deploy/.env.prod.example deploy/.env.prod
 
 Fill it in:
 
-1. Replace every `example.com` with your domain and every `CHANGE_ME` with a
-   random value (`openssl rand -hex 24`). `chmod 600 deploy/.env.prod`.
+1. Replace every `*.example.com` with your actual domains and every
+   `CHANGE_ME` with a random value (`openssl rand -hex 24`). Each of
+   `WEB_DOMAIN`/`API_DOMAIN`/`STREAM_DOMAIN`/`AUTH_DOMAIN`/`S3_DOMAIN` is
+   independent — they don't need to share a root domain (e.g.
+   `musify.example.com` + `musifyapi.example.com`, or sibling subdomains of
+   a domain whose DNS provider doesn't allow multi-level subdomains).
+   `chmod 600 deploy/.env.prod`.
 2. Drop **`deploy/nginx/certs/origin.pem` and `origin.key`**, the origin
    certificate nginx serves. The stack assumes Cloudflare in *Full (strict)*
    mode in front of it, so a Cloudflare Origin Certificate is enough; any
    certificate valid for the five hostnames works.
-3. Point `example.com`, `www`, `api`, `auth`, `stream` and `s3` at the server,
-   proxied and TLS-terminated the same way.
+3. Point the five `*_DOMAIN` values at the server, proxied and
+   TLS-terminated the same way.
 
 Then:
 
@@ -150,6 +155,60 @@ an update once the stack already exists).
 Only nginx publishes ports (80/443). Every other Musify service, and all of
 Infrastructure's, is reachable only on the internal `infra-net` network.
 
+### Continuous deployment
+
+`.gitea/workflows/ci-cd.yml` runs the backend and web-player checks on every
+push/PR, and on a successful push to `master` deploys automatically. The
+deploy job runs on `gitea-runner`, the existing self-hosted Gitea Actions
+runner on the production host itself (`gitea.ikerdemo.cat`, in
+`~/gitea/docker-compose.yml`), which also carries a `production:host`
+label registered directly in `~/gitea/runner-data/.runner` (act_runner
+reads `labels` from that file on every start, not from
+`GITEA_RUNNER_LABELS`, once a runner is already registered). Running in
+native mode means the label's steps execute inside the runner container
+itself rather than spinning up a fresh one — that container has
+`/var/run/docker.sock` mounted, so `docker`/`docker compose` there still
+control the host's real Docker daemon (sibling containers, "Docker outside
+of Docker"). Its compose service also bind-mounts `/home/ubuntu/deploys`
+into itself at the *same* path, which matters because compose's own
+relative bind mounts (`./keys`, `./nginx/...`) are resolved by the host
+daemon against that literal path — mounting it anywhere else would silently
+bind the wrong (empty) directory.
+
+`DEPLOY_PATH` (hardcoded in the workflow as `/home/ubuntu/deploys/musify`)
+is a persistent clone on that host, reused instead of a fresh checkout each
+run since `deploy/.env.prod` is untracked and only lives there.
+`/home/ubuntu/deploys/SharedServices` is the sibling clone of the
+`Infrastructure`/`SharedServices` repo, already running (`infra-net`
+created); its `.env.prod` shares the Postgres/RabbitMQ/S3 credentials with
+Musify's own `deploy/.env.prod` by design (see that repo's README).
+
+**Pending DNS on the registered domains:** `deploy/.env.prod`'s five
+`*_DOMAIN` values are set (`musify.ikerdemo.cat`, `musifyapi.ikerdemo.cat`,
+`musifystream.ikerdemo.cat`, `auth.ikerdemo.cat`, `s3.ikerdemo.cat` —
+siblings, not `api.musify.ikerdemo.cat`, because the DNS provider here
+doesn't allow multi-level subdomains), but no DNS record points any of them
+at the server yet, so:
+
+- `zitadel-init` and `seaweedfs-init` (they verify themselves through the
+  public `auth.`/`s3.` URLs) fail every deploy until those two resolve and
+  are actually reachable — the workflow tolerates this on purpose, see its
+  comments. Until then, `api`/`worker` build and start but can't do
+  anything OIDC- or storage-dependent (`AUTH_CLIENT_ID`/`WEB_CLIENT_ID`/
+  `WEB_CLIENT_SECRET` in `.env.prod` stay blank); `gateway`/`web-player`
+  are unaffected.
+- The `nginx` service from `compose.prod.yml` is intentionally **not**
+  brought up by the deploy job: it would try to publish host ports 80/443,
+  which `gitea-nginx` already owns for `gitea.ikerdemo.cat` (certbot). Once
+  the five DNS records above exist, merge Musify's vhosts
+  (`deploy/nginx/templates`) into `~/gitea/nginx/conf.d` instead — same
+  nginx, additional `server_name` blocks proxying to Musify's containers
+  over `infra-net` — rather than running a second nginx that would conflict
+  on those ports. That also needs a certificate valid for the 5 hostnames
+  (the existing setup uses certbot/Let's Encrypt, not the Cloudflare Origin
+  cert `compose.prod.yml`'s nginx assumes — reconcile whichever way when
+  that's set up).
+
 ---
 
 ## Layout
diff --git a/deploy/compose.prod.yml b/deploy/compose.prod.yml
index f4fd18d..623a4e5 100644
--- a/deploy/compose.prod.yml
+++ b/deploy/compose.prod.yml
@@ -33,7 +33,11 @@ services:
     environment:
       # The entrypoint renders /etc/nginx/templates/*.template with envsubst.
       # The filter keeps it from eating nginx's own $host / $remote_addr.
-      MUSIFY_ROOT_DOMAIN: ${ROOT_DOMAIN}
+      MUSIFY_WEB_DOMAIN: ${WEB_DOMAIN}
+      MUSIFY_API_DOMAIN: ${API_DOMAIN}
+      MUSIFY_STREAM_DOMAIN: ${STREAM_DOMAIN}
+      MUSIFY_AUTH_DOMAIN: ${AUTH_DOMAIN}
+      MUSIFY_S3_DOMAIN: ${S3_DOMAIN}
       MUSIFY_MAX_UPLOAD_SIZE: ${MAX_UPLOAD_SIZE:-1024m}
       NGINX_ENVSUBST_FILTER: ^MUSIFY_
     ports:
diff --git a/deploy/nginx/templates/default.conf.template b/deploy/nginx/templates/default.conf.template
index ed2ac8a..91d7ec8 100644
--- a/deploy/nginx/templates/default.conf.template
+++ b/deploy/nginx/templates/default.conf.template
@@ -1,6 +1,8 @@
 # Musify edge. The nginx entrypoint renders this with envsubst into
 # /etc/nginx/conf.d/default.conf (replacing the image's stock file) using the
-# MUSIFY_* variables set in compose.prod.yml.
+# MUSIFY_* variables set in compose.prod.yml. Each vhost has its own,
+# independent domain (see deploy/.env.prod.example) — they don't need to
+# share a root domain.
 #
 # Cloudflare (Full strict) terminates the public edge; this box only needs to
 # serve the Cloudflare Origin Certificate in nginx/certs/. Each vhost proxies to
@@ -17,9 +19,8 @@ map $http_upgrade $connection_upgrade {
 server {
     listen 80;
     listen [::]:80;
-    server_name ${MUSIFY_ROOT_DOMAIN} www.${MUSIFY_ROOT_DOMAIN}
-                api.${MUSIFY_ROOT_DOMAIN} auth.${MUSIFY_ROOT_DOMAIN}
-                stream.${MUSIFY_ROOT_DOMAIN} s3.${MUSIFY_ROOT_DOMAIN};
+    server_name ${MUSIFY_WEB_DOMAIN} ${MUSIFY_API_DOMAIN}
+                ${MUSIFY_AUTH_DOMAIN} ${MUSIFY_STREAM_DOMAIN} ${MUSIFY_S3_DOMAIN};
     return 301 https://$host$request_uri;
 }
 
@@ -28,7 +29,7 @@ server {
 server {
     listen 443 ssl;
     http2 on;
-    server_name ${MUSIFY_ROOT_DOMAIN};
+    server_name ${MUSIFY_WEB_DOMAIN};
     client_max_body_size ${MUSIFY_MAX_UPLOAD_SIZE};
 
     ssl_certificate     /etc/nginx/certs/origin.pem;
@@ -44,18 +45,7 @@ server {
 server {
     listen 443 ssl;
     http2 on;
-    server_name www.${MUSIFY_ROOT_DOMAIN};
-
-    ssl_certificate     /etc/nginx/certs/origin.pem;
-    ssl_certificate_key /etc/nginx/certs/origin.key;
-
-    return 301 https://${MUSIFY_ROOT_DOMAIN}$request_uri;
-}
-
-server {
-    listen 443 ssl;
-    http2 on;
-    server_name api.${MUSIFY_ROOT_DOMAIN};
+    server_name ${MUSIFY_API_DOMAIN};
 
     ssl_certificate     /etc/nginx/certs/origin.pem;
     ssl_certificate_key /etc/nginx/certs/origin.key;
@@ -71,7 +61,7 @@ server {
 server {
     listen 443 ssl;
     http2 on;
-    server_name stream.${MUSIFY_ROOT_DOMAIN};
+    server_name ${MUSIFY_STREAM_DOMAIN};
 
     ssl_certificate     /etc/nginx/certs/origin.pem;
     ssl_certificate_key /etc/nginx/certs/origin.key;
@@ -87,7 +77,7 @@ server {
 server {
     listen 443 ssl;
     http2 on;
-    server_name auth.${MUSIFY_ROOT_DOMAIN};
+    server_name ${MUSIFY_AUTH_DOMAIN};
 
     ssl_certificate     /etc/nginx/certs/origin.pem;
     ssl_certificate_key /etc/nginx/certs/origin.key;
@@ -104,7 +94,7 @@ server {
 server {
     listen 443 ssl;
     http2 on;
-    server_name s3.${MUSIFY_ROOT_DOMAIN};
+    server_name ${MUSIFY_S3_DOMAIN};
     client_max_body_size ${MUSIFY_MAX_UPLOAD_SIZE};
 
     ssl_certificate     /etc/nginx/certs/origin.pem;
diff --git a/web-player/docs/paginas.md b/web-player/docs/paginas.md
index 74c11e6..095282c 100644
--- a/web-player/docs/paginas.md
+++ b/web-player/docs/paginas.md
@@ -9,12 +9,12 @@ Status legend: ✅ done · 🟡 partial / mockup · ⬜ pending.
 ## Home (app) `/` 🟡
 
 - **Hero**: a greeting plus "Your music. No limits." with a color wash taken from the current track's hue.
-- **Quick access, meaning recently played** (`player.recentlyPlayed`, client side for now). Empty state with an icon and an "Explore" CTA.
+- **Quick access, meaning recently played** (`GET /users/{id}/listening-history` merged with `player.recentlyPlayed` via `mergeRecentlyPlayed`). Empty state with an icon and an "Explore" CTA.
 - **Your playlists**: mosaic cards for the user's playlists (sample data for now). Has an empty state.
+- **Resume on load**: the root layout fetches `GET /users/{id}/last-listened-track` and hydrates the player (`player.hydrate`) with it, paused, so the player bar isn't empty on a fresh session. Only applies when nothing is already loaded (won't override an in-progress session).
 
 ### Pending backend work (ASP.NET) for Home
 
-- **Recently played**: track plays per user (a history table with `userId`, `trackId`, `playedAt`) and expose `GET /me/recently-played?limit=` (or `/users/{id}/recently-played`), returning tracks ordered by `playedAt` descending, with no duplicates. The frontend would load this in a `load` function and pass it to the store instead of using `recentlyPlayed`.
 - **Playlists by last listen**: add `lastPlayedAt` to the playlist (the schema currently only has `createdAt`/`updatedAt`) and allow sorting `GET /playlists/users/{userId}` by that field (for example `?sort=lastPlayed`), to show "your most recently played" playlists.
 - Tracks will need an **artist** and a **color/hue** (or a real cover to extract one from) for the artwork and the dynamic accent. Right now `TrackApplicationResponse` carries neither artist nor color.
 
diff --git a/web-player/package-lock.json b/web-player/package-lock.json
index 29a198f..1e0fddf 100644
--- a/web-player/package-lock.json
+++ b/web-player/package-lock.json
@@ -39,6 +39,40 @@
 				"vite": "^8.0.16"
 			}
 		},
+		"node_modules/@emnapi/core": {
+			"version": "1.11.3",
+			"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.3.tgz",
+			"integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==",
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@emnapi/wasi-threads": "1.2.3",
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@emnapi/core/node_modules/@emnapi/wasi-threads": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
+			"integrity": "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==",
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@emnapi/runtime": {
+			"version": "1.11.3",
+			"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
+			"integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"node_modules/@emnapi/wasi-threads": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
@@ -1118,7 +1152,6 @@
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.69.1.tgz",
 			"integrity": "sha512-+nz8Fx/cElzb2ZPHC+6Ll3y3NEVIe4Na75PeplLlyTmd1dBXAjz2KR14y1ZgNjb2ThfAYzulu+PFy1UE3RCUzA==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@standard-schema/spec": "^1.0.0",
 				"@sveltejs/acorn-typescript": "^1.0.9",
@@ -1170,7 +1203,6 @@
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-7.1.2.tgz",
 			"integrity": "sha512-DrUBA2UXRfDmUX/ZTiEopd3X40yavsJF1FX2RygcuIScHL7o5YX1fMvoYnDhjeJQC4weCOklirpNWlcb2NiSeA==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"deepmerge": "^4.3.1",
 				"magic-string": "^0.30.21",
@@ -1408,6 +1440,27 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+			"version": "1.11.1",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/wasi-threads": "1.2.2",
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+			"version": "1.11.1",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
 			"version": "1.2.2",
 			"dev": true,
@@ -1544,7 +1597,6 @@
 			"integrity": "sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==",
 			"devOptional": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"undici-types": "~6.21.0"
 			}
@@ -1606,7 +1658,6 @@
 			"integrity": "sha512-KA0OshtlcCCXmbfqyZkM5pV3/WNraJf7DkJRLpyrmwPtud57H5BDX7C3k0LPSPxpprfRL+cJDGabF10mvNCoCw==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@typescript-eslint/scope-manager": "8.64.0",
 				"@typescript-eslint/types": "8.64.0",
@@ -1714,7 +1765,6 @@
 			"integrity": "sha512-qjhfuTfLXjA4IOzXvz0rTjT01BqEiIgPoUeMwiEjnaHKJMTNo8rH5pYW1a2L/0Dnux2fPC85AeyJoWaGa8WxTA==",
 			"devOptional": true,
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			},
@@ -1798,7 +1848,6 @@
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
 			"integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
 			"license": "MIT",
-			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -2033,7 +2082,6 @@
 			"integrity": "sha512-GVTD7s1vdIl6UYvAfriOPeY1Df8LIZjfofLvHwde+erDHGGuHyuM6xoxRxmHiebhYuD2p1vN4wWh0XzPARSGDQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"workspaces": [
 				"packages/*"
 			],
@@ -3112,7 +3160,6 @@
 				}
 			],
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.12",
 				"picocolors": "^1.1.1",
@@ -3246,7 +3293,6 @@
 			"integrity": "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
 			},
@@ -3263,7 +3309,6 @@
 			"integrity": "sha512-wXvbXMjSvb4C9ENWTHXyd+ihakKCsJ6rJhLP6/8HFNj4GkZr48jqL9PoKsl2sk7SyCZRTnJ7O2TTowUpOxP/KA==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=20"
 			},
@@ -3434,7 +3479,6 @@
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz",
 			"integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@types/estree": "1.0.9"
 			},
@@ -3569,7 +3613,6 @@
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.56.4.tgz",
 			"integrity": "sha512-/d0QHehmRuJW8gVz395MTkPcPozxzdjBMBE8oEYGz8O3b9KTMzzQ9ZHJQLuFKOHOPQbU6kx/X4iid/EBBzH7iw==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -3781,7 +3824,6 @@
 			"integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
 			"devOptional": true,
 			"license": "Apache-2.0",
-			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -3843,7 +3885,6 @@
 			"resolved": "https://registry.npmjs.org/vite/-/vite-8.1.3.tgz",
 			"integrity": "sha512-Ds+gBRbj0lwRO2Y5hwnUBdxSwlAve9LeRyU4sNnAr0ewW0gWF0n5bgXgUzbgZ49MV9BVUAQUFYVcDUcilUExMA==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"lightningcss": "^1.32.0",
 				"picomatch": "^4.0.4",
diff --git a/web-player/src/lib/api/schema.d.ts b/web-player/src/lib/api/schema.d.ts
index 3350e30..ce584cd 100644
--- a/web-player/src/lib/api/schema.d.ts
+++ b/web-player/src/lib/api/schema.d.ts
@@ -553,6 +553,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/users/{id}/last-listened-track": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+
+        get: operations["GetLastTrackListenedByUserId"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/users/{id}/listening-stats": {
         parameters: {
             query?: never;
@@ -560,7 +577,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+
         get: operations["GetListeningStats"];
         put?: never;
         post?: never;
@@ -2364,7 +2381,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2375,6 +2392,35 @@ export interface operations {
             };
         };
     };
+    GetLastTrackListenedByUserId: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                id: number | string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TrackApplicationResponse"];
+                };
+            };
+
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     GetUserProfile: {
         parameters: {
             query?: never;
diff --git a/web-player/src/lib/player/player.svelte.ts b/web-player/src/lib/player/player.svelte.ts
index 41f3a50..e34af4c 100644
--- a/web-player/src/lib/player/player.svelte.ts
+++ b/web-player/src/lib/player/player.svelte.ts
@@ -315,6 +315,15 @@ class PlayerState {
 		return `${url}${sep}t=${encodeURIComponent(ticket)}`;
 	}
 
+	hydrate(item: ApiTrackLike) {
+		if (this.currentId !== null || this.tracks.length > 0) return;
+		const track = toTrack(toQueueItem(item));
+		this.tracks = [track];
+		this.currentId = track.id;
+		this.#applyAccent(track.id);
+		this.#syncMediaSessionMetadata(track);
+	}
+
 	playlistTracks(ids: (string | number)[]): PlayerTrack[] {
 		return ids
 			.map((id) => this.tracks.find((t) => t.id === id))
@@ -384,6 +393,10 @@ class PlayerState {
 	toggle() {
 		const audio = this.#audioEl();
 		if (!audio || this.currentId === null) return;
+		if (!audio.src) {
+			this.#loadCurrent();
+			return;
+		}
 		if (audio.paused) audio.play().catch(() => {});
 		else audio.pause();
 	}
diff --git a/web-player/src/routes/+layout.server.ts b/web-player/src/routes/+layout.server.ts
index 6bda544..caf325d 100644
--- a/web-player/src/routes/+layout.server.ts
+++ b/web-player/src/routes/+layout.server.ts
@@ -39,6 +39,22 @@ async function fetchLikedTracks(fetchFn: typeof fetch, accessToken: string | nul
 	}
 }
 
+async function fetchLastPlayedTrack(
+	fetchFn: typeof fetch,
+	accessToken: string | null,
+	userId: string
+) {
+	try {
+		const api = createApiClient({ fetch: fetchFn, accessToken: accessToken ?? undefined });
+		const { data } = await api.GET('/users/{id}/last-listened-track', {
+			params: { path: { id: userId } }
+		});
+		return data ?? null;
+	} catch {
+		return null;
+	}
+}
+
 export const load: LayoutServerLoad = async ({ locals, url, fetch }) => {
 	const allowAnonymousListening = await getAllowAnonymousListening(fetch);
 
@@ -56,13 +72,15 @@ export const load: LayoutServerLoad = async ({ locals, url, fetch }) => {
 			allowAnonymousListening,
 			sidebarPlaylists: [],
 			likedTracks: [],
+			lastPlayedTrack: null,
 			accountUrl
 		};
 	}
 
-	const [sidebarPlaylists, likedTracks] = await Promise.all([
+	const [sidebarPlaylists, likedTracks, lastPlayedTrack] = await Promise.all([
 		fetchSidebarPlaylists(fetch, locals.accessToken, locals.user.sub),
-		fetchLikedTracks(fetch, locals.accessToken)
+		fetchLikedTracks(fetch, locals.accessToken),
+		fetchLastPlayedTrack(fetch, locals.accessToken, locals.user.sub)
 	]);
 
 	return {
@@ -70,6 +88,7 @@ export const load: LayoutServerLoad = async ({ locals, url, fetch }) => {
 		allowAnonymousListening,
 		sidebarPlaylists,
 		likedTracks,
+		lastPlayedTrack,
 		accountUrl
 	};
 };
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index 9f41db5..169fcc7 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -30,15 +30,19 @@
 		if (data.likedTracks?.length) liked.hydrate(data.likedTracks);
 	});
 
+	$effect(() => {
+		if (data.lastPlayedTrack) player.hydrate(data.lastPlayedTrack);
+	});
+
 	const isAuthPage = $derived(page.url.pathname === '/auth');
 	const hasTrack = $derived(player.currentId !== null);
 
 	const initialThemeCss = `:root{${tokensToCss(buildThemeTokens(ACCENT_HUE, 'dark'))}}:root[data-theme='light']{${tokensToCss(buildThemeTokens(ACCENT_HUE, 'light'))}}`;
 
-	let hadTrack = false;
+	let wasPlaying = false;
 	$effect(() => {
-		if (hasTrack && !hadTrack) queuePanel.show();
-		hadTrack = hasTrack;
+		if (player.playing && !wasPlaying) queuePanel.show();
+		wasPlaying = player.playing;
 	});
 
 	function isTypingTarget(target: EventTarget | null): boolean {
-- 
2.54.0


From 523318fc069acd415b669363a0d2a7dcc61455d9 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 16:00:39 +0200
Subject: [PATCH 48/50] Fix

---
 web-player/src/lib/server/config.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web-player/src/lib/server/config.ts b/web-player/src/lib/server/config.ts
index 75863b2..6f1420c 100644
--- a/web-player/src/lib/server/config.ts
+++ b/web-player/src/lib/server/config.ts
@@ -9,12 +9,17 @@ function positiveInt(value: string | undefined, fallback: number): number {
 	return Number.isInteger(parsed) && parsed > 0 ? parsed : fallback;
 }
 
+function required(name: string, value: string | undefined): string {
+	if (!value) throw new Error(`Missing required environment variable: ${name}`);
+	return value;
+}
+
 export const authConfig = {
 	get issuer() {
-		return env.ZITADEL_ISSUER;
+		return required('ZITADEL_ISSUER', env.ZITADEL_ISSUER);
 	},
 	get clientId() {
-		return env.ZITADEL_CLIENT_ID;
+		return required('ZITADEL_CLIENT_ID', env.ZITADEL_CLIENT_ID);
 	},
 	get clientSecret(): string | undefined {
 		const secret = env.ZITADEL_CLIENT_SECRET;
@@ -24,10 +29,10 @@ export const authConfig = {
 		return env.OIDC_SCOPE || DEFAULT_OIDC_SCOPE;
 	},
 	get redirectUri() {
-		return env.AUTH_REDIRECT_URI;
+		return required('AUTH_REDIRECT_URI', env.AUTH_REDIRECT_URI);
 	},
 	get postLogoutUri() {
-		return env.AUTH_POST_LOGOUT_URI;
+		return required('AUTH_POST_LOGOUT_URI', env.AUTH_POST_LOGOUT_URI);
 	},
 	get sessionSecret() {
 		return env.SESSION_SECRET;
-- 
2.54.0


From 8970f2941011e17e21a7a5e3fb02777fa3ed00cf Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 16:14:53 +0200
Subject: [PATCH 49/50] Refactor CI/CD job names for clarity and consistency

---
 .gitea/workflows/ci-cd.yml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.gitea/workflows/ci-cd.yml b/.gitea/workflows/ci-cd.yml
index ccc168c..8fa6424 100644
--- a/.gitea/workflows/ci-cd.yml
+++ b/.gitea/workflows/ci-cd.yml
@@ -12,7 +12,7 @@ concurrency:
 
 jobs:
   backend-tests:
-    name: Backend tests (.NET)
+    name: BackEnd
     runs-on: ubuntu-latest
     timeout-minutes: 20
     defaults:
@@ -35,7 +35,7 @@ jobs:
         run: dotnet test Musify.slnx --no-build -c Release
 
   web-player-checks:
-    name: web-player (check + lint)
+    name: WebPlayer
     runs-on: ubuntu-latest
     timeout-minutes: 15
     defaults:
@@ -52,10 +52,10 @@ jobs:
 
       - run: npm ci
 
-      - name: Type-check (svelte-check)
+      - name: Type-check
         run: npm run check
 
-      - name: Lint (prettier + eslint + design tokens)
+      - name: Lint
         run: npm run lint
 
   # Runs on the production host itself, through the existing self-hosted
@@ -69,7 +69,7 @@ jobs:
   # deploy reuses it instead of a fresh checkout, since .env.prod is
   # untracked and only lives there.
   deploy:
-    name: Deploy to production
+    name: Deploy
     needs: [backend-tests, web-player-checks]
     if: github.ref == 'refs/heads/master' && github.event_name == 'push'
     runs-on: [production]
@@ -97,7 +97,7 @@ jobs:
       # below and deploy/README.md). Tolerated for now so a red step here
       # doesn't block the rest of the deploy; drop the `|| true` once that's
       # in place, so a real regression here fails the job again.
-      - name: Create OIDC app + S3 bucket (pending public domain)
+      - name: Create OIDC app and S3 bucket
         run: |
           cd "$DEPLOY_PATH"
           $COMPOSE up -d seaweedfs-init zitadel-init || echo "expected to fail until the production domain + nginx edge exist"
-- 
2.54.0


From 5efd59826b7eeae60aee369648f6d670fa3bc0c6 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 16:56:27 +0200
Subject: [PATCH 50/50] Use the shared edge nginx instead of Musify's own

Remove deploy/nginx and the nginx service from compose.prod.yml: the
shared edge in Infrastructure owns ports 80/443 and serves every
domain. Make the deploy job fail when zitadel-init or seaweedfs-init
fail, and document the runner and edge setup.
---
 .gitea/workflows/ci-cd.yml                   |  27 ++---
 .gitignore                                   |   1 -
 deploy/.env.prod.example                     |  19 +--
 deploy/README.md                             | 118 +++++++------------
 deploy/compose.prod.yml                      |  43 +------
 deploy/nginx/snippets/proxy.conf             |   9 --
 deploy/nginx/templates/default.conf.template | 109 -----------------
 7 files changed, 67 insertions(+), 259 deletions(-)
 delete mode 100644 deploy/nginx/snippets/proxy.conf
 delete mode 100644 deploy/nginx/templates/default.conf.template

diff --git a/.gitea/workflows/ci-cd.yml b/.gitea/workflows/ci-cd.yml
index 8fa6424..af0d417 100644
--- a/.gitea/workflows/ci-cd.yml
+++ b/.gitea/workflows/ci-cd.yml
@@ -81,6 +81,7 @@ jobs:
       - name: Pull latest master
         run: |
           set -euo pipefail
+          git config --global --add safe.directory "$DEPLOY_PATH"
           cd "$DEPLOY_PATH"
           git fetch origin master
           git reset --hard origin/master
@@ -91,26 +92,24 @@ jobs:
           cd "$DEPLOY_PATH"
           $COMPOSE up -d wait-for-postgres keys-init migrate
 
-      # zitadel-init/seaweedfs-init verify themselves through the PUBLIC
-      # auth./s3. URLs (see deploy/compose.yml), so they only succeed once a
-      # real domain is registered and nginx is serving it (see the TODO
-      # below and deploy/README.md). Tolerated for now so a red step here
-      # doesn't block the rest of the deploy; drop the `|| true` once that's
-      # in place, so a real regression here fails the job again.
+      # Both jobs verify themselves through the public auth./s3. URLs, served
+      # by the shared edge nginx (Infrastructure's edge/), and are idempotent.
       - name: Create OIDC app and S3 bucket
         run: |
+          set -euo pipefail
           cd "$DEPLOY_PATH"
-          $COMPOSE up -d seaweedfs-init zitadel-init || echo "expected to fail until the production domain + nginx edge exist"
+          $COMPOSE up -d seaweedfs-init zitadel-init
+          for job in musify-seaweedfs-init musify-zitadel-init; do
+            code=$(docker wait "$job")
+            if [ "$code" != "0" ]; then
+              docker logs "$job"
+              echo "$job exited with $code"
+              exit 1
+            fi
+          done
 
       - name: Build and start apps
         run: |
           set -euo pipefail
           cd "$DEPLOY_PATH"
           $COMPOSE --profile apps up -d --build api worker gateway web-player
-
-      # TODO once a domain is registered and pointed at this server: merge
-      # Musify's vhosts (deploy/nginx/templates) into the existing
-      # gitea-nginx config instead of running the `nginx` service from
-      # compose.prod.yml, since gitea-nginx already owns host ports 80/443
-      # for gitea.ikerdemo.cat. See "Continuous deployment" in
-      # deploy/README.md.
diff --git a/.gitignore b/.gitignore
index f17bdc8..067b398 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,5 +28,4 @@ Thumbs.db
 # Deploy secrets and runtime state
 deploy/keys/
 deploy/secrets/
-deploy/nginx/certs/
 deploy/zitadel/.output/
diff --git a/deploy/.env.prod.example b/deploy/.env.prod.example
index e98fb5a..4b69699 100644
--- a/deploy/.env.prod.example
+++ b/deploy/.env.prod.example
@@ -7,8 +7,8 @@
 #      subdomains),
 #   2. replace every CHANGE_ME with a strong random value
 #      (`openssl rand -hex 24`),
-#   3. point each *_DOMAIN below at the server, proxied/TLS-terminated the
-#      same way.
+#   3. point each domain below at the server and add its vhost to the shared
+#      edge (Infrastructure's edge/conf.d).
 #
 # Requires ../../../Infrastructure running first, on the same Docker host,
 # with its own `infra-net` network already created. See
@@ -18,14 +18,9 @@
 DOTNET_ENVIRONMENT=Production
 
 # --- Domains -------------------------------------------------------------
-# Each *_DOMAIN drives its own nginx vhost (deploy/nginx/templates); the
-# PUBLIC_*_URL/S3_PUBLIC_URL below must agree with it (https://<domain>).
-WEB_DOMAIN=musify.example.com
-API_DOMAIN=musifyapi.example.com
-STREAM_DOMAIN=musifystream.example.com
-AUTH_DOMAIN=auth.example.com
-S3_DOMAIN=s3.example.com
-
+# Public URLs. They must match the vhosts of the shared edge nginx
+# (Infrastructure's edge/conf.d), which is what serves them; the domains are
+# independent, they don't need to share a root.
 PUBLIC_WEB_URL=https://musify.example.com
 PUBLIC_API_URL=https://musifyapi.example.com
 PUBLIC_STREAM_URL=https://musifystream.example.com
@@ -71,6 +66,4 @@ SESSION_SECRET=CHANGE_ME
 AUTH_ALLOW_INSECURE_HTTP=false
 
 # --- Misc --------------------------------------------------------------------
-AUTH_REQUIRE_HTTPS=true
-# Largest request body nginx accepts (audio uploads go through the web player).
-MAX_UPLOAD_SIZE=1024m
+AUTH_REQUIRE_HTTPS=true
\ No newline at end of file
diff --git a/deploy/README.md b/deploy/README.md
index 26522a2..e7be331 100644
--- a/deploy/README.md
+++ b/deploy/README.md
@@ -13,7 +13,7 @@ wherever you actually cloned it.
 |---|---|
 | `compose.yml` | Musify's own services, including the one-shot bootstrap jobs. No published ports, no domains, no environment-specific values. |
 | `compose.dev.yml` | Development overlay: publishes Musify's ports to the host. |
-| `compose.prod.yml` | Production overlay: adds the nginx edge and joins Infrastructure's `infra-net` network. |
+| `compose.prod.yml` | Production overlay: joins Infrastructure's `infra-net` network. |
 | `.env` / `.env.prod` | The values compose interpolates. Not versioned; templates in `.env.example` / `.env.prod.example`. |
 
 The four applications (`api`, `worker`, `gateway`, `web-player`) sit behind
@@ -113,31 +113,26 @@ SeaweedFS is done from the `Infrastructure` repo instead.
 
 ## Production
 
-On a server with a domain:
+Musify doesn't run its own nginx: the shared edge in Infrastructure
+(`edge/`) owns host ports 80/443, terminates TLS for every project's domains
+and proxies to Musify's containers over `infra-net`. On a server with
+domains:
 
 1. Bring up the `Infrastructure` repo first, with its own `.env.prod` filled
    in. It creates the `infra-net` network this stack joins.
-2. From this repository's root:
+2. Bring up its `edge/` (see Infrastructure's README) and add Musify's
+   vhosts and certificate there (`edge/conf.d/musify.conf`). The five
+   public hostnames (web, api, stream, auth, s3) are independent: they
+   don't need to share a root domain.
+3. From this repository's root:
 
 ```sh
 cp deploy/.env.prod.example deploy/.env.prod
 ```
 
-Fill it in:
-
-1. Replace every `*.example.com` with your actual domains and every
-   `CHANGE_ME` with a random value (`openssl rand -hex 24`). Each of
-   `WEB_DOMAIN`/`API_DOMAIN`/`STREAM_DOMAIN`/`AUTH_DOMAIN`/`S3_DOMAIN` is
-   independent — they don't need to share a root domain (e.g.
-   `musify.example.com` + `musifyapi.example.com`, or sibling subdomains of
-   a domain whose DNS provider doesn't allow multi-level subdomains).
-   `chmod 600 deploy/.env.prod`.
-2. Drop **`deploy/nginx/certs/origin.pem` and `origin.key`**, the origin
-   certificate nginx serves. The stack assumes Cloudflare in *Full (strict)*
-   mode in front of it, so a Cloudflare Origin Certificate is enough; any
-   certificate valid for the five hostnames works.
-3. Point the five `*_DOMAIN` values at the server, proxied and
-   TLS-terminated the same way.
+   Replace every `*.example.com` with your domains (they must match the
+   edge's vhosts) and every `CHANGE_ME` with a random value
+   (`openssl rand -hex 24`). `chmod 600 deploy/.env.prod`.
 
 Then:
 
@@ -146,68 +141,45 @@ docker compose --env-file deploy/.env.prod -f deploy/compose.yml -f deploy/compo
 docker compose --env-file deploy/.env.prod -f deploy/compose.yml -f deploy/compose.prod.yml --profile apps up -d --build
 ```
 
-The first command starts Musify's bootstrap jobs and the nginx edge; the
-second builds and starts the applications, already wired to the OIDC client
-ids the first one produced. Both are idempotent, so running them again
-deploys a new version (`... --profile apps up -d --build` alone is enough for
-an update once the stack already exists).
+The first command starts Musify's bootstrap jobs (`zitadel-init` and
+`seaweedfs-init` reach Zitadel/SeaweedFS through the public `auth.`/`s3.`
+URLs, so the edge has to be serving them by then); the second builds and
+starts the applications, already wired to the OIDC client ids the first one
+produced. Both are idempotent, so running them again deploys a new version
+(`... --profile apps up -d --build` alone is enough for an update once the
+stack already exists).
 
-Only nginx publishes ports (80/443). Every other Musify service, and all of
-Infrastructure's, is reachable only on the internal `infra-net` network.
+Nothing in this stack publishes a port; everything is reachable only on the
+internal `infra-net` network, through the edge.
 
 ### Continuous deployment
 
 `.gitea/workflows/ci-cd.yml` runs the backend and web-player checks on every
 push/PR, and on a successful push to `master` deploys automatically. The
-deploy job runs on `gitea-runner`, the existing self-hosted Gitea Actions
-runner on the production host itself (`gitea.ikerdemo.cat`, in
-`~/gitea/docker-compose.yml`), which also carries a `production:host`
-label registered directly in `~/gitea/runner-data/.runner` (act_runner
-reads `labels` from that file on every start, not from
-`GITEA_RUNNER_LABELS`, once a runner is already registered). Running in
-native mode means the label's steps execute inside the runner container
-itself rather than spinning up a fresh one — that container has
-`/var/run/docker.sock` mounted, so `docker`/`docker compose` there still
-control the host's real Docker daemon (sibling containers, "Docker outside
-of Docker"). Its compose service also bind-mounts `/home/ubuntu/deploys`
-into itself at the *same* path, which matters because compose's own
-relative bind mounts (`./keys`, `./nginx/...`) are resolved by the host
-daemon against that literal path — mounting it anywhere else would silently
-bind the wrong (empty) directory.
+deploy job runs on `gitea-runner`, the self-hosted Gitea Actions runner on
+the production host (`~/gitea/docker-compose.yml`), configured by
+`~/gitea/runner-data/config.yaml` (`CONFIG_FILE`): job containers are pinned
+to the `gitea_gitea` network so `actions/checkout` can resolve `gitea`,
+`ubuntu-latest` is `node:22` (JS actions need Node inside the job
+container), and a `production:host` label runs steps natively.
+
+Native mode means the label's steps execute inside the runner container
+itself rather than a fresh one. That container has `/var/run/docker.sock`
+mounted, so `docker`/`docker compose` there still control the host's real
+Docker daemon (sibling containers, "Docker outside of Docker"). Its compose
+service also bind-mounts `/home/ubuntu/deploys` into itself at the *same*
+path, which matters because compose's own relative bind mounts (`./keys`)
+are resolved by the host daemon against that literal path; mounting it
+anywhere else would silently bind the wrong (empty) directory.
 
 `DEPLOY_PATH` (hardcoded in the workflow as `/home/ubuntu/deploys/musify`)
 is a persistent clone on that host, reused instead of a fresh checkout each
 run since `deploy/.env.prod` is untracked and only lives there.
 `/home/ubuntu/deploys/SharedServices` is the sibling clone of the
-`Infrastructure`/`SharedServices` repo, already running (`infra-net`
-created); its `.env.prod` shares the Postgres/RabbitMQ/S3 credentials with
-Musify's own `deploy/.env.prod` by design (see that repo's README).
-
-**Pending DNS on the registered domains:** `deploy/.env.prod`'s five
-`*_DOMAIN` values are set (`musify.ikerdemo.cat`, `musifyapi.ikerdemo.cat`,
-`musifystream.ikerdemo.cat`, `auth.ikerdemo.cat`, `s3.ikerdemo.cat` —
-siblings, not `api.musify.ikerdemo.cat`, because the DNS provider here
-doesn't allow multi-level subdomains), but no DNS record points any of them
-at the server yet, so:
-
-- `zitadel-init` and `seaweedfs-init` (they verify themselves through the
-  public `auth.`/`s3.` URLs) fail every deploy until those two resolve and
-  are actually reachable — the workflow tolerates this on purpose, see its
-  comments. Until then, `api`/`worker` build and start but can't do
-  anything OIDC- or storage-dependent (`AUTH_CLIENT_ID`/`WEB_CLIENT_ID`/
-  `WEB_CLIENT_SECRET` in `.env.prod` stay blank); `gateway`/`web-player`
-  are unaffected.
-- The `nginx` service from `compose.prod.yml` is intentionally **not**
-  brought up by the deploy job: it would try to publish host ports 80/443,
-  which `gitea-nginx` already owns for `gitea.ikerdemo.cat` (certbot). Once
-  the five DNS records above exist, merge Musify's vhosts
-  (`deploy/nginx/templates`) into `~/gitea/nginx/conf.d` instead — same
-  nginx, additional `server_name` blocks proxying to Musify's containers
-  over `infra-net` — rather than running a second nginx that would conflict
-  on those ports. That also needs a certificate valid for the 5 hostnames
-  (the existing setup uses certbot/Let's Encrypt, not the Cloudflare Origin
-  cert `compose.prod.yml`'s nginx assumes — reconcile whichever way when
-  that's set up).
+`Infrastructure` repo (shared services + `edge/`), already running; its
+`.env.prod` shares the Postgres/RabbitMQ/S3 credentials with Musify's own
+`deploy/.env.prod` by design (see that repo's README). The edge is deployed
+from that repo, not from this pipeline.
 
 ---
 
@@ -218,13 +190,9 @@ deploy/
 ├─ compose.yml                     # Musify's own services: wait-for-postgres, keys-init,
 │                                   #   migrate, seaweedfs-init, zitadel-init, api/worker/gateway/web-player
 ├─ compose.dev.yml                 # dev overlay: host ports
-├─ compose.prod.yml                # prod overlay: nginx edge, joins infra-net
+├─ compose.prod.yml                # prod overlay: joins infra-net
 ├─ .env.example / .env.prod.example
-├─ keys/                           # RS256 stream-ticket key pair (generated)
-└─ nginx/
-   ├─ templates/default.conf.template # vhosts, rendered with the domain by envsubst
-   ├─ snippets/proxy.conf             # proxy headers shared by every vhost
-   └─ certs/                          # origin.pem + origin.key (not versioned)
+└─ keys/                           # RS256 stream-ticket key pair (generated)
 ```
 
 The application images are built from `backend/Musify.*.Dockerfile` (build
diff --git a/deploy/compose.prod.yml b/deploy/compose.prod.yml
index 623a4e5..53e497d 100644
--- a/deploy/compose.prod.yml
+++ b/deploy/compose.prod.yml
@@ -1,11 +1,10 @@
 name: musify-prod
 
-# Production overlay: adds the nginx edge and joins Infrastructure's shared
-# `infra-net` network so this project's containers can reach Postgres,
-# Zitadel, SeaweedFS, RabbitMQ and Jaeger by container name. None of them
-# run as part of this compose project anymore (see
-# ../../../Infrastructure/README.md, which must already be up). Nothing but
-# nginx publishes a port; every other service is reachable only on infra-net.
+# Production overlay: joins Infrastructure's shared `infra-net` network so
+# this project's containers can reach Postgres, Zitadel, SeaweedFS, RabbitMQ
+# and Jaeger by container name, and so the shared edge nginx (Infrastructure's
+# `edge/`, which owns host ports 80/443 and terminates TLS for every domain)
+# can reach api, gateway and web-player. Nothing here publishes a port.
 #
 #   docker compose --env-file deploy/.env.prod -f deploy/compose.yml -f deploy/compose.prod.yml up -d
 #   docker compose --env-file deploy/.env.prod -f deploy/compose.yml -f deploy/compose.prod.yml --profile apps up -d --build
@@ -20,35 +19,3 @@ services:
   zitadel-init:
     volumes:
       - ./.env.prod:/workspace/.env
-
-  # Every vhost proxies through `set $upstream ...; proxy_pass $upstream;`
-  # with the embedded Docker DNS resolver (see nginx/templates), so nginx
-  # does not need api/gateway/web-player to exist at its own startup, only
-  # at request time. That is what lets it start in the FIRST command
-  # (profile-gated services aren't part of that invocation yet) and still be
-  # reachable at the auth domain for zitadel-init to provision through.
-  nginx:
-    image: nginx:1.27-alpine
-    container_name: musify-nginx
-    environment:
-      # The entrypoint renders /etc/nginx/templates/*.template with envsubst.
-      # The filter keeps it from eating nginx's own $host / $remote_addr.
-      MUSIFY_WEB_DOMAIN: ${WEB_DOMAIN}
-      MUSIFY_API_DOMAIN: ${API_DOMAIN}
-      MUSIFY_STREAM_DOMAIN: ${STREAM_DOMAIN}
-      MUSIFY_AUTH_DOMAIN: ${AUTH_DOMAIN}
-      MUSIFY_S3_DOMAIN: ${S3_DOMAIN}
-      MUSIFY_MAX_UPLOAD_SIZE: ${MAX_UPLOAD_SIZE:-1024m}
-      NGINX_ENVSUBST_FILTER: ^MUSIFY_
-    ports:
-      - "80:80"
-      - "443:443"
-    volumes:
-      - ./nginx/templates:/etc/nginx/templates:ro
-      - ./nginx/snippets:/etc/nginx/snippets:ro
-      - ./nginx/certs:/etc/nginx/certs:ro
-      - nginx_cache:/var/cache/nginx
-    restart: unless-stopped
-
-volumes:
-  nginx_cache:
diff --git a/deploy/nginx/snippets/proxy.conf b/deploy/nginx/snippets/proxy.conf
deleted file mode 100644
index 934e050..0000000
--- a/deploy/nginx/snippets/proxy.conf
+++ /dev/null
@@ -1,9 +0,0 @@
-# Shared proxy settings for every Musify vhost.
-proxy_http_version 1.1;
-proxy_set_header Host              $host;
-proxy_set_header X-Real-IP         $remote_addr;
-proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
-proxy_set_header X-Forwarded-Proto https;
-proxy_set_header X-Forwarded-Host  $host;
-proxy_set_header Upgrade           $http_upgrade;
-proxy_set_header Connection        $connection_upgrade;
diff --git a/deploy/nginx/templates/default.conf.template b/deploy/nginx/templates/default.conf.template
deleted file mode 100644
index 91d7ec8..0000000
--- a/deploy/nginx/templates/default.conf.template
+++ /dev/null
@@ -1,109 +0,0 @@
-# Musify edge. The nginx entrypoint renders this with envsubst into
-# /etc/nginx/conf.d/default.conf (replacing the image's stock file) using the
-# MUSIFY_* variables set in compose.prod.yml. Each vhost has its own,
-# independent domain (see deploy/.env.prod.example) — they don't need to
-# share a root domain.
-#
-# Cloudflare (Full strict) terminates the public edge; this box only needs to
-# serve the Cloudflare Origin Certificate in nginx/certs/. Each vhost proxies to
-# a compose service by name through the embedded Docker DNS resolver, so nginx
-# re-resolves it instead of caching the IP of a container that may be recreated.
-
-resolver 127.0.0.11 valid=10s;
-
-map $http_upgrade $connection_upgrade {
-    default upgrade;
-    ''      close;
-}
-
-server {
-    listen 80;
-    listen [::]:80;
-    server_name ${MUSIFY_WEB_DOMAIN} ${MUSIFY_API_DOMAIN}
-                ${MUSIFY_AUTH_DOMAIN} ${MUSIFY_STREAM_DOMAIN} ${MUSIFY_S3_DOMAIN};
-    return 301 https://$host$request_uri;
-}
-
-# Web player (SvelteKit, adapter-node). Uploads are posted to its own form
-# actions, so it needs the large body size too.
-server {
-    listen 443 ssl;
-    http2 on;
-    server_name ${MUSIFY_WEB_DOMAIN};
-    client_max_body_size ${MUSIFY_MAX_UPLOAD_SIZE};
-
-    ssl_certificate     /etc/nginx/certs/origin.pem;
-    ssl_certificate_key /etc/nginx/certs/origin.key;
-
-    location / {
-        set $upstream http://web-player:3000;
-        proxy_pass $upstream;
-        include /etc/nginx/snippets/proxy.conf;
-    }
-}
-
-server {
-    listen 443 ssl;
-    http2 on;
-    server_name ${MUSIFY_API_DOMAIN};
-
-    ssl_certificate     /etc/nginx/certs/origin.pem;
-    ssl_certificate_key /etc/nginx/certs/origin.key;
-
-    location / {
-        set $upstream http://api:5111;
-        proxy_pass $upstream;
-        include /etc/nginx/snippets/proxy.conf;
-    }
-}
-
-# Audio bytes. Buffering off keeps range requests (seeking) responsive.
-server {
-    listen 443 ssl;
-    http2 on;
-    server_name ${MUSIFY_STREAM_DOMAIN};
-
-    ssl_certificate     /etc/nginx/certs/origin.pem;
-    ssl_certificate_key /etc/nginx/certs/origin.key;
-
-    location / {
-        set $upstream http://gateway:8081;
-        proxy_pass $upstream;
-        include /etc/nginx/snippets/proxy.conf;
-        proxy_buffering off;
-    }
-}
-
-server {
-    listen 443 ssl;
-    http2 on;
-    server_name ${MUSIFY_AUTH_DOMAIN};
-
-    ssl_certificate     /etc/nginx/certs/origin.pem;
-    ssl_certificate_key /etc/nginx/certs/origin.key;
-
-    location / {
-        set $upstream http://zitadel:8080;
-        proxy_pass $upstream;
-        include /etc/nginx/snippets/proxy.conf;
-        grpc_set_header Host $host;
-    }
-}
-
-# Presigned S3 PUT/GET straight from the browser.
-server {
-    listen 443 ssl;
-    http2 on;
-    server_name ${MUSIFY_S3_DOMAIN};
-    client_max_body_size ${MUSIFY_MAX_UPLOAD_SIZE};
-
-    ssl_certificate     /etc/nginx/certs/origin.pem;
-    ssl_certificate_key /etc/nginx/certs/origin.key;
-
-    location / {
-        set $upstream http://seaweedfs:8333;
-        proxy_pass $upstream;
-        include /etc/nginx/snippets/proxy.conf;
-        proxy_request_buffering off;
-    }
-}
-- 
2.54.0