diff --git a/web/src/routes/playlists/[id]/+page.svelte b/web/src/routes/playlists/[id]/+page.svelte
index a2a0e627..86b547a6 100644
--- a/web/src/routes/playlists/[id]/+page.svelte
+++ b/web/src/routes/playlists/[id]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { goto } from '$app/navigation';
   import { Pencil, Trash2 } from 'lucide-svelte';
   import { useQueryClient } from '@tanstack/svelte-query';
@@ -18,7 +18,11 @@
   import { playQueue } from '$lib/player/store.svelte';
   import type { TrackRef } from '$lib/api/types';
 
-  const id = $derived($page.params.id);
+  // SvelteKit types page.params.id as string | undefined (the route
+  // could in principle render with the slot empty); empty-string fallback
+  // keeps every downstream call typed and falls back to a 404 if the
+  // operator ever lands here without a real id.
+  const id = $derived(page.params.id ?? '');
   const queryClient = useQueryClient();
   const playlistStore = $derived(createPlaylistQuery(id));
   const playlistQuery = $derived($playlistStore);
diff --git a/web/src/routes/playlists/[id]/playlist.test.ts b/web/src/routes/playlists/[id]/playlist.test.ts
index 49023af3..aafe04e2 100644
--- a/web/src/routes/playlists/[id]/playlist.test.ts
+++ b/web/src/routes/playlists/[id]/playlist.test.ts
@@ -1,11 +1,13 @@
 import { describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import { mockQuery } from '../../../test-utils/query';
-import { writable } from 'svelte/store';
 import type { PlaylistDetail } from '$lib/api/types';
 
-vi.mock('$app/stores', () => ({
-  page: writable({ params: { id: 'p1' } })
+// Project canonical: $app/state (rune-state), not $app/stores (legacy
+// reactive store). The page module exports an object with a `params`
+// getter rather than a Svelte store.
+vi.mock('$app/state', () => ({
+  page: { params: { id: 'p1' } }
 }));
 
 vi.mock('$app/navigation', () => ({ goto: vi.fn() }));