chore(web): clear kit 3's alias and Vite's config-loader deprecations (#5021)

CI run 8789 warned on both:

- kit 3 deprecates `config.alias`. The $test-utils alias becomes a
  `#test-utils/*` subpath import, matching #lib, and its 43 import sites
  move with it.
- Vite's coming native config loader needs the extension on
  vitest.config.ts's import of vite.config.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/package.json

@@ -33,6 +33,7 @@
     "lucide-svelte": "^1.0.1"
   },
   "imports": {
-    "#lib/*": "./src/lib/*"
+    "#lib/*": "./src/lib/*",
+    "#test-utils/*": "./src/test-utils/*"
   }
 }

web/src/lib/components/AddToPlaylistMenu.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import { readable } from 'svelte/store';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const playlistsData = vi.hoisted(() => ({
   owned: [

web/src/lib/components/AdminTabs.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
-import { pageUrlModule } from '$test-utils/mocks/appState';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
 
 const state = vi.hoisted(() => ({
   pageUrl: new URL('http://localhost/admin')

web/src/lib/components/AlbumCard.test.ts

@@ -4,7 +4,7 @@ import type { AlbumRef, AlbumDetail, TrackRef } from '#lib/api/types.js';
 import { FALLBACK_COVER } from '#lib/media/covers.js';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { apiClientMock } from '../../test-utils/mocks/client';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 vi.mock('#lib/api/client.js', () => apiClientMock());
 vi.mock('#lib/player/store.svelte.js', () => ({

web/src/lib/components/AlbumMenu.test.ts

@@ -3,7 +3,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { emptyPlaylistsMock } from '../../test-utils/mocks/playlists';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTracks } from '$test-utils/fixtures/track';
+import { makeTracks } from '#test-utils/fixtures/track.js';
 
 vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
 

web/src/lib/components/ArtistCard.test.ts

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/svelte';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { apiClientMock } from '../../test-utils/mocks/client';
 import type { ArtistRef, TrackRef } from '#lib/api/types.js';
-import { makeTrack, makeTracks } from '$test-utils/fixtures/track';
+import { makeTrack, makeTracks } from '#test-utils/fixtures/track.js';
 
 vi.mock('#lib/api/client.js', () => apiClientMock());
 vi.mock('#lib/player/store.svelte.js', () => ({

web/src/lib/components/ArtistMenu.test.ts

@@ -3,7 +3,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { emptyPlaylistsMock } from '../../test-utils/mocks/playlists';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTracks } from '$test-utils/fixtures/track';
+import { makeTracks } from '#test-utils/fixtures/track.js';
 
 vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
 

web/src/lib/components/CompactTrackCard.test.ts

@@ -4,7 +4,7 @@ import type { TrackRef } from '#lib/api/types.js';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { emptyPlaylistsMock } from '../../test-utils/mocks/playlists';
 import { emptyQuarantineMock } from '../../test-utils/mocks/quarantine';
-import { makeTracks } from '$test-utils/fixtures/track';
+import { makeTracks } from '#test-utils/fixtures/track.js';
 
 vi.mock('#lib/api/likes.js', () => emptyLikesMock());
 

web/src/lib/components/DiscoverTabs.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
-import { pageUrlModule } from '$test-utils/mocks/appState';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
 
 const state = vi.hoisted(() => ({
   pageUrl: new URL('http://localhost/discover')

web/src/lib/components/FlagPopover.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
 import FlagPopover from './FlagPopover.svelte';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const invalidateMock = vi.fn();
 vi.mock('@tanstack/svelte-query', async (orig) => {

web/src/lib/components/HistoryRow.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
 import HistoryRow from './HistoryRow.svelte';
 import type { HistoryEvent } from '#lib/api/history.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const playQueue = vi.fn();
 

web/src/lib/components/PlayerBar.test.ts

@@ -3,7 +3,7 @@ import { render, screen, fireEvent, within } from '@testing-library/svelte';
 import type { TrackRef } from '#lib/api/types.js';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { emptyQuarantineMock } from '../../test-utils/mocks/quarantine';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 // Mutable state the mocked store reads from.
 const state = vi.hoisted(() => ({

web/src/lib/components/QueueDrawer.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 // QueueTrackRow (rendered inside QueueDrawer → QueueList) now renders a
 // LikeButton, which reads createLikedIdsQuery. Stub the likes API so the

web/src/lib/components/QueueTrackRow.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 // QueueTrackRow now renders a LikeButton, which reads createLikedIdsQuery.
 // Stub the likes API so the row doesn't need a real QueryClient in context.

web/src/lib/components/SearchInput.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
-import { pageUrlModule } from '$test-utils/mocks/appState';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
 
 const state = vi.hoisted(() => ({
   pageUrl: new URL('http://localhost/')

web/src/lib/components/TrackMenu.test.ts

@@ -3,7 +3,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { emptyPlaylistsMock } from '../../test-utils/mocks/playlists';
 import { emptyQuarantineMock } from '../../test-utils/mocks/quarantine';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 // Mutable mock-user handle so individual tests can flip is_admin / null
 // without re-importing the module under test.

web/src/lib/components/TrackRow.test.ts

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/svelte';
 import type { TrackRef } from '#lib/api/types.js';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { emptyQuarantineMock } from '../../test-utils/mocks/quarantine';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 vi.mock('#lib/player/store.svelte.js', () => ({
   playQueue: vi.fn(),

web/src/lib/player/events.svelte.test.ts

@@ -21,7 +21,7 @@ import {
 } from './store.svelte';
 import { api } from '#lib/api/client.js';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 function track(id: string, dur = 200): TrackRef {
   return makeTrack({

web/src/lib/player/gain.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from 'vitest';
 import { dbToLinear, gainDb, playingAsAlbum, MAX_BOOST_DB } from './gain';
 import type { NormalizationPrefs } from '#lib/api/normalization.js';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const prefs = (over: Partial<NormalizationPrefs> = {}): NormalizationPrefs => ({
   mode: 'auto',

web/src/lib/player/gainStage.svelte.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 vi.mock('#lib/auth/store.svelte.js', () => ({
   user: {

web/src/lib/player/mediaSession.svelte.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { flushSync } from 'svelte';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 function track(id: string): TrackRef {
   return makeTrack({

web/src/lib/player/persisted.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { readPersistedQueue, writePersistedQueue, clearPersistedQueue } from './persisted';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const sampleTrack = makeTrack();
 

web/src/lib/player/shortcuts.svelte.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { flushSync } from 'svelte';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 function track(id: string): TrackRef {
   return makeTrack({

web/src/lib/player/store.test.ts

@@ -19,7 +19,7 @@ import {
 } from './store.svelte';
 import type { TrackRef } from '#lib/api/types.js';
 import { writePersistedQueue, clearPersistedQueue } from './persisted';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 vi.mock('#lib/auth/store.svelte.js', () => ({
   user: {

web/src/lib/selection/store.svelte.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, beforeEach } from 'vitest';
 import type { TrackRef } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 import {
   selection, toggleOne, selectRange, clearSelection
 } from './store.svelte';

web/src/lib/utils/dayGroup.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { dayBucket, groupByDay } from './dayGroup';
 import type { HistoryEvent } from '#lib/api/history.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const NOW = new Date('2026-05-04T14:00:00Z');
 

web/src/routes/albums/[id]/album.test.ts

@@ -4,7 +4,7 @@ import { flushSync } from 'svelte';
 import { mockQuery } from '../../../test-utils/query';
 import { emptyLikesMock } from '../../../test-utils/mocks/likes';
 import type { AlbumDetail, TrackRef } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const state = vi.hoisted(() => ({ pageParams: { id: 'xyz' } as Record<string, string> }));
 

web/src/routes/library/genres/genres.test.ts

@@ -1,9 +1,9 @@
 import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/svelte';
-import { mockQuery } from '$test-utils/query';
-import { pageUrlModule } from '$test-utils/mocks/appState';
-import { apiClientMock } from '$test-utils/mocks/client';
-import { emptyLikesMock } from '$test-utils/mocks/likes';
+import { mockQuery } from '#test-utils/query.js';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
+import { apiClientMock } from '#test-utils/mocks/client.js';
+import { emptyLikesMock } from '#test-utils/mocks/likes.js';
 import type { AlbumRef } from '#lib/api/types.js';
 
 const pageState = vi.hoisted(() => ({

web/src/routes/library/history/page.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import HistoryPage from './+page.svelte';
 import type { HistoryEvent, HistoryResponse } from '#lib/api/history.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const mkTrack = (id: string) => makeTrack({ id: `track-${id}`, title: `Song ${id}` });
 

web/src/routes/library/liked/liked.test.ts

@@ -4,7 +4,7 @@ import { mockInfiniteQuery } from '../../../test-utils/query';
 import { apiClientMock } from '../../../test-utils/mocks/client';
 import type { ArtistRef, AlbumRef, TrackRef, Page } from '#lib/api/types.js';
 import { readable } from 'svelte/store';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 vi.mock('#lib/api/likes.js', () => ({
   createLikedIdsQuery: () => readable({

web/src/routes/library/years/years.test.ts

@@ -1,9 +1,9 @@
 import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/svelte';
-import { mockQuery } from '$test-utils/query';
-import { pageUrlModule } from '$test-utils/mocks/appState';
-import { apiClientMock } from '$test-utils/mocks/client';
-import { emptyLikesMock } from '$test-utils/mocks/likes';
+import { mockQuery } from '#test-utils/query.js';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
+import { apiClientMock } from '#test-utils/mocks/client.js';
+import { emptyLikesMock } from '#test-utils/mocks/likes.js';
 import type { AlbumRef } from '#lib/api/types.js';
 
 const pageState = vi.hoisted(() => ({

web/src/routes/login/login.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
-import { pageUrlModule } from '$test-utils/mocks/appState';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
 
 // vi.hoisted avoids the temporal-dead-zone hazard: mock factories are lazy
 // and can run before top-level `let` is initialized, since imports are

web/src/routes/search/albums/albums.test.ts

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/svelte';
 import { mockInfiniteQuery } from '../../../test-utils/query';
 import { emptyLikesMock } from '../../../test-utils/mocks/likes';
 import { apiClientMock } from '../../../test-utils/mocks/client';
-import { pageUrlModule } from '$test-utils/mocks/appState';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
 import type { AlbumRef, Page } from '#lib/api/types.js';
 
 const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/albums?q=miles') }));

web/src/routes/search/artists/artists.test.ts

@@ -2,7 +2,7 @@ import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
 import { mockInfiniteQuery } from '../../../test-utils/query';
 import { emptyLikesMock } from '../../../test-utils/mocks/likes';
-import { pageUrlModule } from '$test-utils/mocks/appState';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
 import type { ArtistRef, Page } from '#lib/api/types.js';
 
 const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/artists?q=miles') }));

web/src/routes/search/search.test.ts

@@ -3,9 +3,9 @@ import { render, screen } from '@testing-library/svelte';
 import { mockQuery } from '../../test-utils/query';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import { apiClientMock } from '../../test-utils/mocks/client';
-import { pageUrlModule } from '$test-utils/mocks/appState';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
 import type { ArtistRef, AlbumRef, SearchResponse } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const state = vi.hoisted(() => ({
   pageUrl: new URL('http://localhost/search')

web/src/routes/search/tracks/tracks.test.ts

@@ -3,9 +3,9 @@ import { render, screen, fireEvent } from '@testing-library/svelte';
 import { mockInfiniteQuery } from '../../../test-utils/query';
 import { emptyLikesMock } from '../../../test-utils/mocks/likes';
 import { emptyQuarantineMock } from '../../../test-utils/mocks/quarantine';
-import { pageUrlModule } from '$test-utils/mocks/appState';
+import { pageUrlModule } from '#test-utils/mocks/appState.js';
 import type { TrackRef, Page } from '#lib/api/types.js';
-import { makeTrack } from '$test-utils/fixtures/track';
+import { makeTrack } from '#test-utils/fixtures/track.js';
 
 const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/tracks?q=miles') }));
 

web/vite.config.ts

@@ -57,7 +57,7 @@ const injectGoTokensPlugin = {
 };
 
 // SvelteKit's options, which lived in svelte.config.js before kit 3. Exported
-// so vitest.config.ts runs the same kit setup (the $test-utils alias above all).
+// so vitest.config.ts runs the same kit setup.
 export const kitOptions = {
   preprocess: vitePreprocess(),
   adapter: adapter({
@@ -67,13 +67,7 @@ export const kitOptions = {
     precompress: false,
     strict: false
   }),
-  files: { assets: 'static' },
-  alias: {
-    // test-only helper barrel; resolves the same way #lib does so test
-    // files can import shared mock factories without ../../../ chains.
-    '$test-utils': 'src/test-utils',
-    '$test-utils/*': 'src/test-utils/*'
-  }
+  files: { assets: 'static' }
 };
 
 export default defineConfig({

web/vitest.config.ts

@@ -1,7 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { svelteTesting } from '@testing-library/svelte/vite';
 import { configDefaults, defineConfig } from 'vitest/config';
-import { kitOptions } from './vite.config';
+import { kitOptions } from './vite.config.ts';
 
 export default defineConfig({
   plugins: [sveltekit(kitOptions), svelteTesting()],