Merge pull request 'Web Player Refactor' (#2) from web-player-ref into master

Reviewed-on: #2

.gitea/workflows/ci-cd.yml

@@ -0,0 +1,115 @@
+name: CI/CD
+
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: ['**']
+
+concurrency:
+  group: production-deploy
+  cancel-in-progress: false
+
+jobs:
+  backend-tests:
+    name: BackEnd
+    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: WebPlayer
+    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
+        run: npm run check
+
+      - name: Lint
+        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
+    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
+          git config --global --add safe.directory "$DEPLOY_PATH"
+          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
+
+      # 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
+          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

.gitignore

@@ -7,6 +7,9 @@ obj/
 *.userosscache
 .vs/
 artifacts/
+TestResults/
+*.trx
+*.coverage
 
 # Rider / VS
 .idea/
@@ -25,5 +28,4 @@ Thumbs.db
 # Deploy secrets and runtime state
 deploy/keys/
 deploy/secrets/
-deploy/nginx/certs/
 deploy/zitadel/.output/

backend/Hosts/Musify.Api/WebApi.http

@@ -1,6 +0,0 @@
-@WebApi_HostAddress = http://localhost:5111
-
-GET {{WebApi_HostAddress}}/weatherforecast/
-Accept: application/json
-
-###

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

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

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
+#   3. point each domain below at the server and add its vhost to the shared
-#      same way: example.com, www, api, auth, stream, s3.
+#      edge (Infrastructure's edge/conf.d).
 #
 # Requires ../../../Infrastructure running first, on the same Docker host,
 # with its own `infra-net` network already created. See
@@ -14,12 +17,13 @@
 
 DOTNET_ENVIRONMENT=Production
 
-# --- Domain ------------------------------------------------------------------
+# --- Domains -------------------------------------------------------------
-# ROOT_DOMAIN drives the nginx vhosts; the URLs below must agree with it.
+# Public URLs. They must match the vhosts of the shared edge nginx
-ROOT_DOMAIN=example.com
+# (Infrastructure's edge/conf.d), which is what serves them; the domains are
-PUBLIC_WEB_URL=https://example.com
+# independent, they don't need to share a root.
-PUBLIC_API_URL=https://api.example.com
+PUBLIC_WEB_URL=https://musify.example.com
-PUBLIC_STREAM_URL=https://stream.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
 
@@ -63,5 +67,3 @@ 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

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,26 +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:
+   Replace every `*.example.com` with your domains (they must match the
-
+   edge's vhosts) and every `CHANGE_ME` with a random value
-1. Replace every `example.com` with your domain and every `CHANGE_ME` with a
+   (`openssl rand -hex 24`). `chmod 600 deploy/.env.prod`.
-   random value (`openssl rand -hex 24`). `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.
 
 Then:
 
@@ -141,14 +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
+The first command starts Musify's bootstrap jobs (`zitadel-init` and
-second builds and starts the applications, already wired to the OIDC client
+`seaweedfs-init` reach Zitadel/SeaweedFS through the public `auth.`/`s3.`
-ids the first one produced. Both are idempotent, so running them again
+URLs, so the edge has to be serving them by then); the second builds and
-deploys a new version (`... --profile apps up -d --build` alone is enough for
+starts the applications, already wired to the OIDC client ids the first one
-an update once the stack already exists).
+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
+Nothing in this stack publishes a port; everything is reachable only on the
-Infrastructure's, is reachable only on the internal `infra-net` network.
+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 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` 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.
 
 ---
 
@@ -159,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)
+└─ 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)
 ```
 
 The application images are built from `backend/Musify.*.Dockerfile` (build
@@ -180,9 +207,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.

deploy/compose.prod.yml

@@ -1,11 +1,10 @@
 name: musify-prod
 
-# Production overlay: adds the nginx edge and joins Infrastructure's shared
+# Production overlay: joins Infrastructure's shared `infra-net` network so
-# `infra-net` network so this project's containers can reach Postgres,
+# this project's containers can reach Postgres, Zitadel, SeaweedFS, RabbitMQ
-# Zitadel, SeaweedFS, RabbitMQ and Jaeger by container name. None of them
+# and Jaeger by container name, and so the shared edge nginx (Infrastructure's
-# run as part of this compose project anymore (see
+# `edge/`, which owns host ports 80/443 and terminates TLS for every domain)
-# ../../../Infrastructure/README.md, which must already be up). Nothing but
+# can reach api, gateway and web-player. Nothing here publishes a port.
-# nginx publishes a port; every other service is reachable only on infra-net.
 #
 #   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,31 +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_ROOT_DOMAIN: ${ROOT_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:

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

deploy/nginx/snippets/proxy.conf

@@ -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;

deploy/nginx/templates/default.conf.template

@@ -1,119 +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.
-#
-# 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_ROOT_DOMAIN} www.${MUSIFY_ROOT_DOMAIN}
-                api.${MUSIFY_ROOT_DOMAIN} auth.${MUSIFY_ROOT_DOMAIN}
-                stream.${MUSIFY_ROOT_DOMAIN} s3.${MUSIFY_ROOT_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_ROOT_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 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};
-
-    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 stream.${MUSIFY_ROOT_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 auth.${MUSIFY_ROOT_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 s3.${MUSIFY_ROOT_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;
-    }
-}

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
+Convention: `appsettings.json` is the template, with empty or neutral
-values; `AppSettings.Development.json` has the real dev values; in Docker
+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`

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
 

web-player/.prettierignore

@@ -9,3 +9,5 @@ package
 package-lock.json
 src/lib/api/schema.d.ts
 static
+.agents
+skills-lock.json

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": [

web-player/CLAUDE.md

@@ -1,56 +1,79 @@
-# Musify — web-player
+# 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's no `svelte.config.js` (config is inline in `vite.config.ts`) and no `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 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 — guardrail del sistema de diseño (ver abajo)
+npm run lint:tokens      # scripts/check-tokens.mjs, the design system guardrail (see below)
 ```
 
-## Reglas
+## Rules
 
-- **Sin comentarios** en el código salvo que sean imprescindibles.
+- **No comments** in code unless essential.
-- `npm run lint` y `npm run check` deben salir limpios antes de cerrar un cambio.
+- `npm run lint` and `npm run check` must exit clean before closing a change.
-- **Svelte 5 runes siempre:** `$props()` con `interface Props`, `$state`, `$derived`, `$effect`. Nada de `export let` ni `$:`. `{#each}` siempre con clave.
+- **Always Svelte 5 runes:** `$props()` with `interface Props`, `$state`, `$derived`, `$effect`. No `export let` or `$:`. `{#each}` always keyed.
-- **Server-only bajo `$lib/server/`**; nunca importado desde cliente.
+- **Server only code goes under `$lib/server/`**, and it's never imported from client code.
-- Datos SSR vía `load` en `+page.server.ts`/`+layout.server.ts` → prop `data`.
+- SSR data comes through `load` in `+page.server.ts`/`+layout.server.ts` and lands in the `data` prop.
-- Enlaces a endpoints `+server.ts` (login/logout) llevan `data-sveltekit-reload`.
+- Links to `+server.ts` endpoints (`/auth/login`, `/auth/logout`) carry `data-sveltekit-reload`.
-- Reutiliza los tokens/recetas del sistema de diseño; extrae a `$lib/components/ui/` lo que se repita.
+- Reuse design system tokens and recipes before writing new CSS. If something repeats, extract it to `$lib/components/ui/`.
 
-## 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".
+- `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]/`.
 
-- **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.
+## Styles
-- **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.
+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.
-- **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`).
+- **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`.
-- **`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.
+- **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`).
-- Componentes base a reutilizar antes de crear uno nuevo: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
+- **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-[…]`.
-- 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).
+- **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 `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.
+
+## 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` 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 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`.
 
-Variables de entorno en `.env` (ver `.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
 
-Cliente tipado con `openapi-fetch` sobre el OpenAPI de `Musify.Api`. En un `load`/action server:
+Typed client via `openapi-fetch` over the `Musify.Api` OpenAPI spec. Inside a server `load` or action:
 
 ```ts
 import { createApiClient } from '$lib/server/api';
@@ -58,4 +81,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).
+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).

web-player/docs/frontend-refactor-plan.md

@@ -1,931 +0,0 @@
-# Plan — Refactor y unificación del frontend (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`).
-
-## Cómo usar este documento
-
-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).
-
-Orden recomendado (las flechas son dependencias **blandas**, ver punto 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)
-```
-
----
-
-## A. Contexto común (leer siempre)
-
-### A.1 Stack y reglas del proyecto (de `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>`.
-
-### A.2 Gotchas conocidos (no reintroducirlos)
-
-1. **Tokens animados por hue** (`--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 "Δ").
-
-### A.3 Verificación de cada parte
-
-```sh
-cd web-player
-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").
-
-### A.4 Línea base medida (para saber si avanzas)
-
-| 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`)                |
-
-Objetivo global: ~61 → ~45 componentes, −1.500/−2.000 líneas, 0 arbitrarios fuera de una
-lista blanca, 1 escala por dimensión.
-
----
-
-## B. Especificaciones compartidas (fuente única)
-
-Cualquier parte que necesite algo de aquí y no exista, lo crea **exactamente así**.
-
-### B.1 Tokens (en `src/routes/layout.css`, dentro de `@theme`)
-
-Tailwind 4 genera utilidades a partir de estos namespaces: `--radius-*` → `rounded-*`,
-`--spacing-*` → `size-* w-* h-* p-* m-* gap-*`, `--container-*` → `max-w-*`,
-`--tracking-*` → `tracking-*`, `--leading-*` → `leading-*`.
-
-#### B.1.1 Radios (`--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     |
-
-Eliminar `--radius-art-round` (0 usos). Mapeo de lo existente:
-
-| 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 |
-
-#### B.1.2 Tamaños de carátula/arte (`--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:`                         |
-
-Uso: `size-cover-sm` (Tailwind 4 `size-*` = `width`+`height`). **Nunca** `h-X w-X` en
-pareja: siempre `size-*`.
-
-#### B.1.3 Iconos (`--spacing-icon-*`) y trazo
-
-| 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) |
-
-Trazo: en `layout.css`, fuera de `@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; }
-```
-
-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.
-
-#### B.1.4 Anchos (`--container-*`) y 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)                                |
-
-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:
-
-```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-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.
-
-#### B.1.5 Capas (`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).
-
-#### B.1.6 Tipografía (recetas `@utility` en `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):
-
-```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; }
-```
-
-> Si `@apply` con variante `sm:` dentro de `@utility` no compila, usa
-> `@media (width >= 40rem) { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }`
-> como hace `page-x`.
-
-Mapeo de lo existente:
-
-| 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                         |
-
-#### B.1.7 Recetas de superficie y movimiento (`@utility` en `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 por defecto: 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 y /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 {                                                       /* mixes de Inicio: 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 */
-	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.
-
-Stagger (sustituye los 5 `style="animation-delay:…"` con 40 **o** 45ms):
-
-```css
-.animate-enter { animation-delay: calc(min(var(--i, 0), 10) * 45ms); }
-```
-
-Uso: `style="--i:{i}"`. Único `style=` permitido junto con los de B.4.
-
-#### B.1.8 Colores: limpieza
-
-- 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).
-
-### B.2 Helpers TypeScript (fuente única)
-
-| 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       |
-
-### B.3 Componentes nuevos (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 |
-
-### B.4 Lista blanca de `style=` y arbitrarios (tras el 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.
-
----
-
-## C. Partes
-
-### P0 — Línea base y bugs sueltos (independiente, ~30 min)
-
-**Objetivo:** dejar `lint` en verde y corregir bugs detectados que no requieren 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**).
-
-Cierre: `npm run lint` 0 errores.
-
----
-
-### P1 — Tokens base (prerrequisito de P3–P14)
-
-**Objetivo:** crear todo B.1 de forma **aditiva** (sin migrar componentes todavía, salvo
-lo indicado). Tras esta parte, nada cambia visualmente.
-
-Leer: `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-*`
-   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).
-
-Cierre: check+lint; captura de Inicio antes/después idéntica.
-
----
-
-### P2 — Tema: una sola fuente de verdad + sin parpadeo en modo claro
-
-**Objetivo:** eliminar la duplicación `theme.css` ↔ `tokens.ts` y el flash oscuro al
-cargar con modo claro guardado.
-
-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.
-
-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
-   `<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`.
-
-Cierre: con modo claro guardado, recarga dura sin flash; cambio de pista sigue animando
-el hue; check+lint.
-
----
-
-### P3 — `Artwork` y `Avatar` (arte unificado)
-
-**Objetivo:** un único componente de carátula y uno de avatar.
-
-Hallazgos:
-- `Cover`, `PlaylistArt` y `MixArt` implementan la misma cascada (imagen → mosaico 2×2 →
-  primera carátula → placeholder). `MixArt` ≡ `PlaylistArt` con
-  `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`,
-  `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`.
-
-Cierre: `grep -rn "Cover\b\|PlaylistArt\|MixArt\|ArtistAvatar" src` solo en `Artwork`;
-visual en Inicio, Explorar (búsqueda), Sidebar, Cola, player, cabeceras.
-
----
-
-### P4 — Botones: `Button`, `IconButton`, `PlayButton`
-
-**Objetivo:** que no quede ningún `<button>` estilado a mano.
-
-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
-`!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'`,
-   `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.
-
-Cierre: `grep -rn "<button" src | grep -v "ui/\(Button\|IconButton\|PlayButton\|Chip\|ListRow\)"`
-→ solo casos justificados (dropzones, selector segmentado).
-
----
-
-### P5 — Helpers TypeScript
-
-**Objetivo:** crear B.2 y migrar sus usos (lógica, no estilos).
-
-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.
-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.)
-6. `navigation.svelte.ts`: `searchHref`, `appNavLinks`.
-7. `menus.svelte.ts`: `createTrackMenu()`; migrar Inicio, Explorar, Mezcla.
-
-Cierre: check+lint; reproducir desde álbum, playlist, liked, mezcla, spotlight; menú
-contextual "Reproducir a continuación" sigue funcionando.
-
----
-
-### P6 — Menús: `ContextMenu` + `AccountMenu` + `GlassMenu`
-
-**Objetivo:** un solo menú contextual.
-
-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`.
-
-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).
-
-Cierre: menú de pista y de álbum en Explorar, submenú abre a izquierda cerca del borde,
-móvil (submenú debajo), Escape cierra.
-
----
-
-### P7 — Filas: `ListRow` + `MediaIdentity` + `EqBars`
-
-**Objetivo:** una sola fila compacta para todas las listas que no son tabla.
-
-Filas reimplementadas hoy (todas: arte + título + subtítulo + meta + estado activo):
-
-| 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       |
-
-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`.
-
-Cierre: Inicio, Explorar, Cola, Sidebar sin cambios visibles salvo Δ de B.1.2; teclado
-(Tab + Enter) reproduce en todas las filas.
-
----
-
-### P8 — Tablas de pistas: `TrackList`
-
-**Objetivo:** tablas declarativas; borrar 3 celdas y 3 componentes de ruta.
-
-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.
-
-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`,
-   `TrackTable`.
-4. `LibraryPicker` usa overlay `NowPlaying` en vez de índice: `TrackList` con
-   `index={false}` muestra EQ sobre el arte (vía `Artwork` children).
-
-Cierre: las 6 páginas; hover revela acción; activo muestra EQ; móvil oculta metas.
-
----
-
-### P9 — Tarjetas y grids
-
-**Objetivo:** una tarjeta, cero 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(…))]`.
-
-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)`.
-
-Cierre: /albums, /playlists, /u/[id], Inicio (mixes), Explorar (géneros).
-
----
-
-### P10 — Cabeceras, diálogos y tipografía
-
-**Objetivo:** 1 cabecera de página, 1 de sección, 1 diálogo de confirmación.
-
-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`,
-  `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).
-
-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.
-
-Cierre: todas las páginas con cabecera; diálogos de borrado idénticos.
-
----
-
-### P11 — Formularios
-
-**Objetivo:** un único esqueleto de formulario con portada.
-
-Hallazgos:
-- `AlbumForm` y `PlaylistForm` comparten: `use:enhance` con `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.
-
-Tareas:
-1. `CoverForm.svelte` (esqueleto): 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.
-
-Cierre: crear/editar álbum y playlist, subir canción (drag&drop incluido).
-
----
-
-### P12 — Chrome de la app (layout, navegación, reproductor)
-
-**Objetivo:** una sola definición de navegación y un reproductor más pequeño.
-
-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).
-
-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.
-
-Cierre: navegación desktop/tablet/móvil, cola abre/cierra, seek por click, arrastre y
-flechas, volumen.
-
----
-
-### P13 — Páginas grandes: Explorar (602 líneas) e Inicio (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`).
-
-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
-   `<svelte:element this={href ? 'a' : 'button'}>`.
-5. Paginación `loadMore` → reutilizable si otra página la necesita; si no, dejar.
-
-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).
-
-Cierre: Explorar sin query, con query, filtros, sin resultados, scroll infinito; Inicio
-completo con y sin datos.
-
----
-
-### P14 — Barrido final y guardarraíles
-
-**Objetivo:** que no vuelva a aparecer lo que se ha limpiado.
-
-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):
-   ```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.
-
----
-
-## D. Registro
-
-| 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) |
-
-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?
-
-### D.1 Línea base recalculada (tras P14, cierre del refactor)
-
-Recalculada con los mismos criterios que A.4 (grep sobre `src/`), en la misma sesión de
-cierre de P14.
-
-| 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                              |
-
----
-
-## E. Inventario completo (veredicto por archivo)
-
-Leyenda: **=** se mantiene · **~** se modifica · **→X** se fusiona en X · **✕** se borra.
-
-### `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 | | |
-
-### `src/lib/components/` y `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 | |
-
-### Rutas
-
-| 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 |
-
-### `src/lib/` (cliente)
-
-| 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 |

web-player/docs/paginas.md

@@ -1,159 +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
+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.
-para priorizar features. El sistema de diseño (tokens, recetas, componentes) vive en
-el skill `musify-web`; aquí describimos **contenido y estructura**, no estilos.
 
-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 +
+> **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).
-> 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).
 
-## Inicio (app) `/` 🟡
+## Home (app) `/` 🟡
 
-- **Hero**: saludo + "Tu música. Sin límites." con color-wash del hue de la pista actual.
+- **Hero**: a greeting plus "Your music. No limits." with a color wash taken from the current track's hue.
-- **Acceso rápido = escuchado recientemente** (`player.recentlyPlayed`, hoy en cliente).
+- **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.
-  Estado vacío con icono + CTA «Explorar».
+- **Your playlists**: mosaic cards for the user's playlists (sample data for now). Has an empty state.
-- **Tus playlists**: tarjetas mosaico de las playlists (hoy datos de muestra). Estado vacío.
+- **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).
 
-### Backend pendiente (ASP.NET) para Inicio
+### Pending backend work (ASP.NET) for Home
 
-- **Escuchado recientemente**: registrar reproducciones por usuario (tabla de historial:
+- **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.
-  `userId`, `trackId`, `playedAt`) y exponer `GET /me/recently-played?limit=` (o
+- 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.
-  `/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.
 
-## 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
+  (app)/              The app experience
-    explore/            /explore     Explorar / buscar  ✅
+    explore/            /explore     Explore / search    ✅
-    upload/             /upload      Subir música       🟡 maqueta
+    upload/             /upload      Upload music         🟡 mockup
-    library/            /library     Tu biblioteca      ⬜
+    library/             /library     Your library          ⬜
-    playlists/          /playlists   Tus playlists      ⬜
+    playlists/            /playlists   Your playlists         ⬜
-      [id]/             /playlists/:id  Detalle playlist ⬜
+      [id]/                /playlists/:id  Playlist detail    ⬜
-  login  logout  auth/callback       Auth (endpoints)   ✅
+  auth  auth/login  auth/logout  auth/callback  Auth (page + endpoints)   ✅
-  api/tracks/[id]/stream             Proxy de stream    ✅
+  api/tracks/[id]/stream             Stream proxy         ✅
 ```
 
-Componentes globales (en todas las páginas): **Navbar**, **Footer** y **PlayerBar**
+Global components (present on every page): **Navbar**, **Footer**, and **PlayerBar** (the fixed playback bar, shown while something is playing).
-(barra de reproducción fija, aparece al reproducir).
 
 ---
 
 ## 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 →
+- **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).
-  registro) y secundario (Explorar canciones).
+- **Features**: three cards covering listening, playlists, and uploading.
-- **Features**: 3 cards (escuchar, playlists, subir).
+- **Suggested next steps**: a screenshots or demo section, social proof, a short FAQ.
-- **Pendiente sugerido**: sección de capturas/demo, prueba social, FAQ corta.
 
 ## 2. Login / Auth ✅ (endpoints)
 
-No es una página visual propia: `/login` inicia el flujo OIDC de Zitadel y redirige.
+`/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.
-`?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.
 
-## 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.
+- **Search box**: a text input (`?q=`) that filters by name on the backend.
-- **Contador de resultados** y **grid de tracks** (2→4 columnas): portada, título, fecha,
+- **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.
-  botón play/pausa en hover que encola y reproduce vía el player global.
+- **Pagination**: previous/next (`?page=`, 24 per page).
-- **Paginación** anterior/siguiente (`?page=`, 24 por página).
+- **Empty state**: no results, or an empty catalog.
-- **Estado vacío**: sin resultados / catálogo vacío.
+- **Suggested next steps**: filters (most recent, by user), loading skeletons, a real track cover (the listing API doesn't currently return the image key).
-- **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).
 
-## 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.
+1. `POST /tracks/upload-urls` returns presigned URLs for cover and audio, plus `intentId`s.
-2. `PUT` de cada archivo a su URL presignada (subida directa al almacenamiento).
+2. `PUT` each file to its presigned URL (a direct upload to storage).
-3. `POST /tracks` con `title`, `pictureIntentId`, `audioIntentId`.
+3. `POST /tracks` with `title`, `pictureIntentId`, `audioIntentId`.
-4. El backend procesa el audio (transcodifica a DASH) de forma asíncrona.
+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
+- **Audio zone**: drag and drop or a file picker, showing the file's name and size, with type (audio) and size validation.
-  de tipo (audio) y tamaño.
+- **Cover**: an image picker with a square preview.
-- **Portada**: selector de imagen con vista previa cuadrada.
+- **Metadata**: title (required), with room for future fields like a description.
-- **Metadatos**: título (obligatorio). Espacio para futuros campos (descripción, etc.).
+- **Visible pipeline**: the Upload, Process, Publish steps and their status.
-- **Pipeline visible**: pasos Subir → Procesar → Publicar con su estado.
+- **Progress bar** for the upload and the processing state.
-- **Barra de progreso** de subida y estado de procesado.
+- **States**: empty, file selected, uploading, processing, published, error.
-- **Estados**: vacío, archivo seleccionado, subiendo, procesando, publicado, error.
+- **Requires a session** (once wired up: redirect to `/auth?returnTo=/upload`).
-- **Requiere sesión** (al cablear: redirigir a `/login?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»
+- **Tabs / sections**: "Your songs" (`GET /tracks/users/{userId}`) and "Your playlists" (`GET /playlists/users/{userId}`).
-  (`GET /playlists/users/{userId}`).
+- **Your songs**: a list with play, plus management actions (delete via `DELETE /tracks/{id}`, add to a playlist).
-- **Tus canciones**: lista con play, y acciones de gestión (borrar `DELETE /tracks/{id}`,
+- **Your playlists**: a grid of covers with a "Create playlist" button.
-  añadir a playlist).
+- **Empty state** with a CTA to upload or create.
-- **Tus playlists**: grid de portadas + botón «Crear playlist».
+- **Requires a session.**
-- **Estado vacío** con CTA a subir / crear.
-- **Requiere sesión**.
 
 ## 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.
+- **Grid** of playlists (cover, name, track count), linking to the detail page.
-- **Crear playlist**: modal/página con nombre, descripción y portada
+- **Create playlist**: a modal or page with a name, description, and cover (`POST /playlists`, cover via `POST /playlists/upload-picture`).
-  (`POST /playlists`, portada vía `POST /playlists/upload-picture`).
+- **Empty state** with a CTA.
-- **Estado vacío** con CTA.
+- **Requires a session.**
-- **Requiere sesión**.
 
-## 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».
+- **Header**: a large cover, name, description, track count, and a "Play all" button.
-- **Lista de tracks** (`GET /playlists/{id}/tracks`, paginada): índice, título, fecha,
+- **Track list** (`GET /playlists/{id}/tracks`, paginated): index, title, date, play, and remove from the playlist (`DELETE /playlists/{id}/tracks/{trackId}`).
-  play, quitar de la playlist (`DELETE /playlists/{id}/tracks/{trackId}`).
+- **Owner actions**: edit (`PUT`), delete (`DELETE`) the playlist, reorder (a future addition).
-- **Acciones del dueño**: editar (`PUT`), borrar (`DELETE`) la playlist, reordenar (futuro).
+- **Add tracks**: from explore or the library (`POST /playlists/{id}/tracks/{trackId}`).
-- **Añadir tracks**: desde explorar/biblioteca (`POST /playlists/{id}/tracks/{trackId}`).
 
-## 8. Perfil de usuario `/users/[id]` ⬜ (futuro)
+## 8. User profile `/user/[id]` ⬜ (future)
 
-Vista pública de un usuario: avatar, nombre, sus canciones y playlists públicas
+A public view of a user: avatar, name, their public songs and playlists (`GET /users/{id}`, `GET /tracks/users/{id}`, `GET /playlists/users/{id}`).
-(`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
+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.
-(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.
 
-## Backend disponible (resumen)
+## Available backend (summary)
 
-| Recurso   | Endpoints                                                               |
+| Resource  | Endpoints                                                         |
-| --------- | ----------------------------------------------------------------------- |
+| --------- | ----------------------------------------------------------------- |
-| Tracks    | listar/buscar, detalle, por usuario, stream, crear, borrar, upload-urls |
+| Tracks    | list/search, detail, by user, stream, create, delete, upload-urls |
-| Playlists | CRUD, tracks de la playlist, add/remove track, upload-picture           |
+| Playlists | CRUD, playlist tracks, add/remove track, upload-picture           |
-| Users     | listar/buscar, detalle, crear                                           |
+| Users     | list/search, detail, create                                       |
 
-Cliente tipado en `$lib/server/api.ts` (`openapi-fetch`, estilo ErrorOr). Consumir en
+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`.
-`load`/actions server, nunca desde cliente. Tipos en `src/lib/api/schema.d.ts`.

web-player/eslint.config.js

@@ -36,12 +36,6 @@ export default ts.config(
 		}
 	},
 	{
-		ignores: [
+		ignores: ['build/', '.svelte-kit/', 'static/', 'src/lib/api/schema.d.ts']
-			'build/',
-			'.svelte-kit/',
-			'static/',
-			'src/lib/api/schema.d.ts',
-			'design_handoff_musify_player/'
-		]
 	}
 );

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",

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);
 }
 

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;
@@ -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;

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 MenuItem from '../ui/overlay/MenuItem.svelte';
-	import AccountMenu from './ui/AccountMenu.svelte';
+	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
-	import Avatar from './ui/Avatar.svelte';
+	import Avatar from '../ui/media/Avatar.svelte';
-	import IconButton from './ui/IconButton.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
-	import Logo from './ui/Logo.svelte';
+	import Logo from '../ui/primitives/Logo.svelte';
 
 	interface Props {
 		user: SessionUser | null;
@@ -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" />

web-player/src/lib/components/layout/Sidebar.svelte

@@ -1,13 +1,13 @@
 <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 ListRow from '../ui/media/ListRow.svelte';
-	import IconButton from './ui/IconButton.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
-	import Logo from './ui/Logo.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
+	import Logo from '../ui/primitives/Logo.svelte';
 
 	interface SidebarPlaylist {
 		id: string;
@@ -31,10 +31,10 @@
 </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 p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
-	<a href="/" class="px-3 pb-3">
+	<a href="/" class="mb-4">
 		<Logo size="sm" />
 	</a>
 
@@ -44,14 +44,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-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>
+					<span class="text-xs text-fg-2 tabular-nums">{link.count}</span>
 				{/if}
 			</a>
 		{/each}
@@ -60,7 +60,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"
@@ -68,12 +68,12 @@
 					size="xs"
 					onclick={() => createPlaylistModal.show()}
 				>
-					<Plus class="size-icon-sm" strokeWidth={1.25} />
+					<Plus class="size-icon-sm text-fg-2" 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
@@ -91,7 +91,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

web-player/src/lib/components/layout/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 {

web-player/src/lib/components/layout/TopBar.svelte

@@ -3,14 +3,14 @@
 	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';
-	import AccountMenu from './ui/AccountMenu.svelte';
+	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
-	import Avatar from './ui/Avatar.svelte';
+	import Avatar from '../ui/media/Avatar.svelte';
-	import IconButton from './ui/IconButton.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
-	import Button from './ui/Button.svelte';
+	import Button from '../ui/primitives/Button.svelte';
 
 	interface Props {
 		user: SessionUser | null;
@@ -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>

web-player/src/lib/components/player/PlayerBar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import TrackInfo from './TrackInfo.svelte';
 	import TransportControls from './TransportControls.svelte';
-	import Slider from '$lib/components/ui/Slider.svelte';
+	import Slider from '$lib/components/ui/primitives/Slider.svelte';
-	import IconButton from '$lib/components/ui/IconButton.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/format';
+	import { fmtTime } from '$lib/utils/format';
 	import Volume2 from '@lucide/svelte/icons/volume-2';
 	import ListMusic from '@lucide/svelte/icons/list-music';
 
@@ -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}

web-player/src/lib/components/player/PlayerDock.svelte

@@ -1,7 +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';
 
@@ -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}

web-player/src/lib/components/player/Queue.svelte

@@ -1,13 +1,13 @@
 <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 MediaIdentity from '$lib/components/ui/media/MediaIdentity.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import IconButton from '$lib/components/ui/primitives/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';
+	import { expoOut } from 'svelte/easing';
 
 	const upcoming = $derived.by(() => {
 		const idx = player.tracks.findIndex((t) => t.id === player.currentId);
@@ -17,8 +17,8 @@
 
 {#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 bg-bg px-4 pt-5 theme-transition 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">
@@ -29,8 +29,8 @@
 		</div>
 
 		{#if player.current.id}
-			<p class="mb-3 text-eyebrow text-fg-3">Reproduciendo</p>
+			<p class="mb-3 text-eyebrow text-fg-2">Reproduciendo</p>
-			<div class="mb-6 rounded-control bg-accent-tint p-2.5">
+			<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>

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 Artwork from '$lib/components/ui/media/Artwork.svelte';
-	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
+	import ExplicitBadge from '$lib/components/ui/media/ExplicitBadge.svelte';
-	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
+	import ArtistLink from '$lib/components/ui/media/ArtistLink.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import Heart from '@lucide/svelte/icons/heart';
 
 	interface Props {
@@ -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}

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';
 
@@ -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>

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

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		class?: string;
-		style?: string;
-		children: Snippet;
-	}
-
-	let { class: klass = '', style = '', children }: Props = $props();
-</script>
-
-<div class="glass-panel animate-pop rounded-panel border border-hairline p-1.5 {klass}" {style}>
-	{@render children()}
-</div>

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 Field from '../primitives/Field.svelte';
-	import Input from './Input.svelte';
+	import Input from '../primitives/Input.svelte';
-	import Textarea from './Textarea.svelte';
+	import Textarea from '../primitives/Textarea.svelte';
 	import { ALBUM_EARLIEST_YEAR } from '$lib/config';
 
 	interface Props {

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 Button from '../primitives/Button.svelte';
-	import Field from './Field.svelte';
+	import Field from '../primitives/Field.svelte';
-	import Alert from './Alert.svelte';
+	import Alert from '../primitives/Alert.svelte';
 
 	interface Props {
 		action: string;
@@ -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}

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>

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 Field from '../primitives/Field.svelte';
-	import Input from './Input.svelte';
+	import Input from '../primitives/Input.svelte';
-	import Textarea from './Textarea.svelte';
+	import Textarea from '../primitives/Textarea.svelte';
-	import SegmentedControl from './SegmentedControl.svelte';
+	import SegmentedControl from '../primitives/SegmentedControl.svelte';
 
 	const NAME_MAX_LENGTH = 60;
 	const DESCRIPTION_MAX_LENGTH = 300;
@@ -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'}

web-player/src/lib/components/ui/layout/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;
@@ -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>

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}"
 		>

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"
 				/>

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
 >

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>
 

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>

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>

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>
 

web-player/src/lib/components/ui/media/TrackList.svelte

@@ -32,11 +32,11 @@
 	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';
-	import IconButton from './IconButton.svelte';
+	import IconButton from '../primitives/IconButton.svelte';
 
 	interface RowAction {
 		action?: string;
@@ -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}

web-player/src/lib/components/ui/overlay/AccountMenu.svelte

@@ -44,8 +44,11 @@
 	{@render trigger({ toggle, open })}
 
 	{#if open}
-		<GlassMenu class="absolute top-full right-0 z-(--z-menu) mt-2 overflow-hidden {WIDTH[width]}">
+		<GlassMenu
-			<MenuItem icon={User} label="Ver perfil" href="/u/{user.sub}" onclick={close} />
+			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}
 				<MenuItem
@@ -61,7 +64,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>

web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Modal from './Modal.svelte';
+	import Dialog from './Dialog.svelte';
-	import Button from './Button.svelte';
+	import Button from '../primitives/Button.svelte';
 
 	interface Props {
 		open: boolean;
@@ -14,13 +14,11 @@
 	let { open, onClose, title, description, confirmLabel, action }: Props = $props();
 </script>
 
-<Modal {open} {onClose} maxWidth="max-w-sm">
+<Dialog {open} {onClose} {title} {description}>
-	<h2 class="text-display-3 text-fg">{title}</h2>
+	{#snippet actions()}
-	<p class="mt-2.5 text-body text-fg-2">{description}</p>
-	<div class="mt-6 flex items-center justify-end gap-3">
 		<Button variant="secondary" onclick={onClose}>Cancelar</Button>
 		<form method="POST" {action}>
 			<Button type="submit" variant="danger">{confirmLabel}</Button>
 		</form>
-	</div>
+	{/snippet}
-</Modal>
+</Dialog>

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';
 
@@ -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

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>

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>

web-player/src/lib/components/ui/overlay/GlassMenu.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		border?: boolean;
+		children: Snippet;
+	}
+
+	let { class: klass = '', style = '', border = true, children }: Props = $props();
+</script>
+
+<div
+	class="glass-panel animate-pop rounded-panel p-1.5 {border
+		? 'border border-hairline'
+		: ''} {klass}"
+	{style}
+>
+	{@render children()}
+</div>

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>
 

web-player/src/lib/components/ui/overlay/Modal.svelte

@@ -1,7 +1,10 @@
 <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';
+	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}

web-player/src/lib/components/ui/primitives/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;
@@ -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" />

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;
@@ -29,25 +29,20 @@
 	}: Props = $props();
 
 	const sizes = {
-		sm: 'px-4 py-2.5 text-xs',
+		sm: 'rounded-control px-4 py-2 text-xs',
-		md: 'px-5 py-3 text-sm',
+		md: 'rounded-btn-sm px-4.5 py-2.5 text-control-sm',
-		lg: 'px-6 py-3.5 text-sm'
+		lg: 'rounded-btn 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,
+		primary: 'bg-cta-strong text-ink hover:bg-cta-strong-hover',
-		secondary: subtle,
+		secondary: 'bg-btn text-fg hover:bg-btn-hover',
-		glass,
+		accent: 'surface-active text-accent-soft hover:surface-active-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'
 	};
 
 	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 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>
 

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
+					selected ? 'bg-cta-strong text-ink' : 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg'
-						? 'bg-cta-strong text-ink'
-						: 'bg-surface-2 text-fg-2 hover:bg-surface-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}
 

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}

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'
 	};

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>

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}

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={TEXT[size]}>Musify</span>
-	<span class="{MARK[size]} bg-[image:var(--mf-logo-grad)]"></span>
-	<span class={TEXT[size]}>Musify</span>
-</span>

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>

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
 	};
 }

web-player/src/lib/player/player.svelte.ts

@@ -1,7 +1,8 @@
 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';
+import { dialog } from '$lib/state/dialog.svelte';
 
 export interface PlayerTrack {
 	id: string | number;
@@ -23,6 +24,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 +34,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 +45,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 +61,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 +106,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
@@ -115,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);
@@ -169,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);
@@ -264,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));
@@ -279,13 +282,23 @@ class PlayerState {
 			if (token !== this.#loadToken) return;
 			this.loading = false;
 			this.playing = false;
-			this.error =
+			if (exception instanceof DOMException && exception.name === 'AbortError') return;
-				exception instanceof Error && exception.message
+			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));
@@ -302,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))
@@ -371,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();
 	}

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();

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;
 }
 

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;
 }
 

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;

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();

web-player/src/lib/state/menus.svelte.ts

@@ -1,5 +1,8 @@
-import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+import {
-import { player, toQueueItem, type ApiTrackLike } from './player/player.svelte';
+	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;
 

web-player/src/lib/state/navigation.svelte.ts

@@ -7,7 +7,7 @@ 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';
+import type { SessionUser } from '../types';
 
 const HISTORY_INDEX = 'sveltekit:history';
 

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_CHROMA = 0.06;
-export const ACCENT_HUE = 145;
+export const ACCENT_HUE = 30;
 
 export const DEFAULT_ACCENT = `oklch(${ACCENT_LIGHTNESS}% ${ACCENT_CHROMA} ${ACCENT_HUE})`;

web-player/src/lib/theme/theme.css

@@ -7,17 +7,14 @@
 	--mf-tile-shade-c: 0.035;
 
 	--mf-text: #d9d8dc;
-	--mf-text-2: #8a8a8e;
+	--mf-text-2: #b1b0b5;
-	--mf-text-3: #7d7d81;
-	--mf-text-4: #646468;
 
 	--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: var(--mf-surface-2);
+	--mf-row-hover: rgba(255, 255, 255, 0.035);
-	--mf-btn-bg-hover: var(--mf-surface-hover);
+	--mf-btn-bg: rgba(255, 255, 255, 0.055);
-	--mf-btn-secondary-bg: rgba(255, 255, 255, 0.045);
+	--mf-btn-bg-hover: rgba(255, 255, 255, 0.09);
-	--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);
@@ -27,7 +24,14 @@
 	--mf-on-art: #fefdfb;
 	--mf-on-art-2: #cac8c3;
 	--mf-ink: #0a0a0d;
-	--mf-cta-strong-bg: #ffffff;
+	--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");
 
@@ -74,18 +78,15 @@
 }
 
 :root[data-theme='light'] {
-	--mf-text: #17171a;
+	--mf-text: #17161c;
-	--mf-text-2: #4a4a4e;
+	--mf-text-2: #5d5c66;
-	--mf-text-3: #6b6b6f;
-	--mf-text-4: #8c8c90;
 
 	--mf-surface: rgba(0, 0, 0, 0.035);
 	--mf-surface-2: rgba(0, 0, 0, 0.06);
-	--mf-surface-hover: #e8eceb;
+	--mf-surface-hover: rgba(26, 24, 38, 0.06);
-	--mf-btn-bg: var(--mf-surface-2);
+	--mf-row-hover: rgba(26, 24, 38, 0.04);
-	--mf-btn-bg-hover: var(--mf-surface-hover);
+	--mf-btn-bg: rgba(255, 255, 255, 0.7);
-	--mf-btn-secondary-bg: rgba(0, 0, 0, 0.09);
+	--mf-btn-bg-hover: #ffffff;
-	--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);
@@ -95,8 +96,10 @@
 	--mf-track: rgba(0, 0, 0, 0.12);
 
 	--mf-scrim: #ffffff;
-	--mf-ink: #ffffff;
+	--mf-ink: #f7f6f9;
-	--mf-cta-strong-bg: #17171a;
+	--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;

web-player/src/lib/theme/tokens.ts

@@ -1,75 +1,71 @@
-import { ACCENT_CHROMA, ACCENT_LIGHTNESS } from './color';
-
-const L = ACCENT_LIGHTNESS / 100;
-const C = ACCENT_CHROMA;
-
 function r(value: number, digits = 4): string {
 	return value.toFixed(digits);
 }
 
-function tc(alpha: number, l: number, hue: number): string {
-	const lightness = 0.34 - l / 380;
-	const chroma = Math.max(0, 0.11 - 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.88 - 0.16 * depth;
-	const chroma = 0.03 + 0.11 * 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.52 : L;
+	const accentL = light ? 0.5 : 0.72;
-	const accentC = light ? 0.16 : C;
+	const accentC = light ? 0.07 : 0.06;
-	const titleL = light ? 0.4 : 0.87;
+	const titleL = light ? 0.36 : 0.86;
-	const titleC = light ? 0.13 : 0.07;
+	const titleC = light ? 0.06 : 0.03;
-	const mutedL = light ? 0.48 : 0.79;
+	const mutedL = light ? 0.42 : 0.8;
-	const mutedC = light ? 0.06 : 0.035;
+	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': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.08)`,
+		'--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': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.15)`,
+		'--mf-accent-btn-bg': `color-mix(in srgb, ${accent} 18%, var(--mf-bg))`,
-		'--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`,
+		'--mf-accent-btn-bg-hover': `color-mix(in srgb, ${accent} 26%, var(--mf-bg))`,
-		'--mf-bg': light ? `oklch(0.97 0.006 ${H})` : `oklch(0.068 0.008 ${H})`,
+		'--mf-g-active': gActive,
-		'--mf-elevated': light ? `oklch(0.99 0.003 ${H})` : `oklch(0.11 0.012 ${H})`,
+		'--mf-g-hover': gHover,
-		'--mf-panel-bg': light ? `oklch(0.97 0.006 ${H} / 0.7)` : `oklch(0.09 0.01 ${H} / 0.28)`,
+		'--mf-bg': light ? `oklch(0.975 0.012 ${H})` : `oklch(0.068 0.008 ${H})`,
-		'--mf-bar-bg': light ? `oklch(0.97 0.006 ${H} / 0.9)` : `oklch(0.105 0.012 ${H} / 0.9)`,
+		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.012 ${H})`,
-		'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.1)` : `oklch(0.62 0.03 ${H} / 0.08)`,
+		'--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(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(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(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.16, 55, h)}, ${tcLight(0.16, 55, h)})`
+			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.96, 0.02, 0.4)} 60%)`
-			: `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(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, ${glow(0.88, 0.05, 0.5)} 0%, ${glow(0.93, 0.03, 0.2)} 40%, transparent 75%)`
-			: `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.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.16, 55, h)}, ${tcLight(0.16, 55, h)})`
+			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)`
-			: `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(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': light
-			? `linear-gradient(140deg, oklch(0.68 0.16 ${H}), oklch(0.5 0.14 ${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.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
-			: `linear-gradient(150deg, oklch(0.5 0.13 ${H}), oklch(0.16 0.035 ${H}))`
+			: `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))`
 	};
 }
 

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

@@ -1,14 +1,14 @@
 <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 Page from '$lib/components/ui/layout/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
-	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
+	import AlbumForm from '$lib/components/ui/forms/AlbumForm.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
-	import { albumMeta } from '$lib/format';
+	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
 

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

@@ -2,22 +2,18 @@
 	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 Page from '$lib/components/ui/layout/Page.svelte';
-	import Pause from '@lucide/svelte/icons/pause';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
-	import SquarePencil from '@lucide/svelte/icons/square-pen';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
-	import Trash from '@lucide/svelte/icons/trash';
+	import ConfirmDialog from '$lib/components/ui/overlay/ConfirmDialog.svelte';
-	import Page from '$lib/components/ui/Page.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
+	import AlbumForm from '$lib/components/ui/forms/AlbumForm.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
+	import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
-	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import { albumMeta } from '$lib/utils/format';
-	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';
 
 	let { data, form } = $props();
 
@@ -76,20 +72,14 @@
 		{#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)}>
+				<Button size="sm" variant="secondary" onclick={() => (editing = true)}>Editar</Button>
-					<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}

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

@@ -1,28 +1,28 @@
 <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 { fmtTime, fmtPlays, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
-	import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
+	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
-	import Avatar from '$lib/components/ui/Avatar.svelte';
+	import Avatar from '$lib/components/ui/media/Avatar.svelte';
-	import PlayButton from '$lib/components/ui/PlayButton.svelte';
+	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
-	import EqBars from '$lib/components/ui/EqBars.svelte';
+	import EqBars from '$lib/components/ui/media/EqBars.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
-	import Chip from '$lib/components/ui/Chip.svelte';
+	import Chip from '$lib/components/ui/primitives/Chip.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
-	import { searchHref } from '$lib/navigation.svelte';
+	import { searchHref } from '$lib/state/navigation.svelte';
-	import { createTrackMenu } from '$lib/menus.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/collections';
+	import { appendUnique } from '$lib/data/collections';
-	import { genreTiles } from '$lib/genres';
+	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 };
 
@@ -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) {
@@ -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}
@@ -400,7 +401,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}

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

@@ -3,12 +3,12 @@
 	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 Page from '$lib/components/ui/layout/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 
 	let { data } = $props();