Admin
d6bff15f11
backdrop-blur samples whatever is actually behind the element, so two secondary buttons with identical classes could render differently depending on nearby content (e.g. dark album art bleeding into the blur near the spotlight card). Replace it with a fixed color-mix that reproduces the same result mathematically instead of sampling pixels: 45% --mf-elevated over the hero/spotlight surface's own tint color (16% --mf-hero-tint over --mf-bg, the same ratio hero-surface itself uses), computed via CSS color-mix() rather than a backdrop-filter. Verified against the previous blur version: both now compute to the identical color(srgb 0.9329 0.9611 0.9332), matching what the blurred button rendered against the same hero background, but fixed so every secondary button is now guaranteed pixel-identical regardless of what happens to be nearby.
web-player
Musify's web client: SvelteKit 2 (adapter-node), Svelte 5 runes, Tailwind 4,
TypeScript. Authentication is server-side OIDC against Zitadel (openid-client
and jose) with an encrypted session cookie; the backend is called from load
functions and form actions through a typed openapi-fetch client.
Development
npm install
npm run dev # :5173
Configuration lives in .env (template in .env.example). Bring the
infrastructure stack up first (see ../deploy/README.md)
and copy the WEB_CLIENT_ID / WEB_CLIENT_SECRET it writes to deploy/.env
into this .env once, then run the dev server.
npm run check # svelte-check — must be clean before closing a change
npm run lint # prettier --check . && eslint .
npm run format # prettier --write .
npm run build # production build into build/
npm run gen:api # regenerate src/lib/api/schema.d.ts from the running API
Production
Built and run as a container by the production stack — see
../deploy/README.md. There the same variables come from
deploy/.env.prod through compose instead of from .env.
Conventions and the design system are documented in CLAUDE.md and
in the musify-web skill.