diff --git a/web-player/.prettierignore b/web-player/.prettierignore
index 1f10deb..a69f55c 100644
--- a/web-player/.prettierignore
+++ b/web-player/.prettierignore
@@ -9,3 +9,5 @@ package
package-lock.json
src/lib/api/schema.d.ts
static
+.agents
+skills-lock.json
diff --git a/web-player/.prettierrc b/web-player/.prettierrc
index 664d576..ee3f14c 100644
--- a/web-player/.prettierrc
+++ b/web-player/.prettierrc
@@ -3,6 +3,7 @@
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
+ "endOfLine": "auto",
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"tailwindStylesheet": "./src/routes/layout.css",
"overrides": [
diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index 448fbcf..20035f7 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -57,6 +57,14 @@ The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utili
- Reach for these base components before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
- Known and accepted gap (documented in `scripts/check-tokens.mjs`): icon `strokeWidth={n}` isn't unified yet. There are 13 different values spread across almost every component, and migrating them to `stroke-thin/regular/bold` recipes safely would require visually confirming that `lucide-svelte` actually respects `stroke-width` through CSS, so that was left out of the last pass.
+## Motion
+
+Every animation follows one scale of three durations and one easing curve, all defined in `theme.css`. Fast (`--mf-motion-fast`, 150ms) is for hover, focus and press feedback: color, opacity and small scale changes. Plain `transition` or `transition-colors` already uses it because it is the Tailwind default, so never write `duration-150`. Base (`--mf-motion-base`, 200ms) is for things that appear on top of the page or move inside a control: modals, menus, the queue panel, `animate-pop`, `animate-fade` and the segmented control thumb. Slow (`--mf-motion-slow`, 300ms) is for content entering the page and larger movement: `animate-enter`, cover zoom on hover and the player dock padding.
+
+Entrances and movement always use `--mf-ease` (`ease-snappy` in Tailwind, `expoOut` in Svelte transitions), which feels immediate because most of the motion happens at the start. Color transitions keep the Tailwind default curve. Overlays must feel instant: the modal backdrop uses `transition:fade={{ duration: 200 }}` and the panel uses a local `pop` transition (opacity + scale + translateY, `expoOut`, 200ms) mirroring `animate-pop`'s keyframes — both directives so the modal fades and pops on close too, not just on open, and the whole thing settles in 200ms. Staggered lists use `--i` with 40ms steps capped at ten items.
+
+The only exceptions are looping indicators (equalizer bars, pulse, spin, sheen) and the accent hue crossfade in `+layout.svelte` (600ms), which is ambient and meant to be slow. Do not add new durations or curves; if something needs a different feel, pick the closest step of the scale. `prefers-reduced-motion` disables everything globally in `layout.css`.
+
## Auth
`hooks.server.ts` validates the encrypted session cookie (`mf_session`), refreshes the `access_token`, and fills `locals.user` and `locals.accessToken`. To protect a route, check `locals.user` in its `load` and redirect to `/auth?returnTo=…`. When talking to the backend, send `locals.accessToken` as a Bearer token to `API_BASE_URL`.
diff --git a/web-player/docs/paginas.md b/web-player/docs/paginas.md
index 0c402a5..74c11e6 100644
--- a/web-player/docs/paginas.md
+++ b/web-player/docs/paginas.md
@@ -119,10 +119,10 @@ A fixed bottom bar, visible while something is playing. Shows track info, transp
## Available backend (summary)
-| Resource | Endpoints |
-| --------- | --------------------------------------------------------------------- |
-| Tracks | list/search, detail, by user, stream, create, delete, upload-urls |
-| Playlists | CRUD, playlist tracks, add/remove track, upload-picture |
-| Users | list/search, detail, create |
+| Resource | Endpoints |
+| --------- | ----------------------------------------------------------------- |
+| Tracks | list/search, detail, by user, stream, create, delete, upload-urls |
+| Playlists | CRUD, playlist tracks, add/remove track, upload-picture |
+| Users | list/search, detail, create |
Typed client in `$lib/server/api.ts` (`openapi-fetch`, ErrorOr style). Use it inside `load`/server actions, never from the client. Types live in `src/lib/api/schema.d.ts`.
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index f4cf981..a835f8b 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -6,7 +6,6 @@
import type { SessionUser } from '$lib/types';
import ListRow from '../ui/media/ListRow.svelte';
import IconButton from '../ui/primitives/IconButton.svelte';
- import Logo from '../ui/primitives/Logo.svelte';
import Plus from '@lucide/svelte/icons/plus';
interface SidebarPlaylist {
@@ -40,14 +39,14 @@
{link.label}
{#if link.count}
- {link.count}
+ {link.count}
{/if}
{/each}
@@ -56,7 +55,7 @@
{#if user}
- Tus playlists
+ Tus playlists
{#if playlists.length > 0}
createPlaylistModal.show()}
>
-
+
{/if}