frontend/src/lib/document/EnrichmentBlock.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { navigating } from '$app/stores';
+import { navigating } from '$app/state';
 import DashboardNeedsMetadata from './DashboardNeedsMetadata.svelte';
 import UploadSuccessBanner from './UploadSuccessBanner.svelte';
 
@@ -18,7 +18,7 @@ interface Props {
 
 let { topDocs, totalCount, bannerCount, onBannerClose }: Props = $props();
 
-const showSkeleton = $derived(!!$navigating && topDocs.length === 0);
+const showSkeleton = $derived(!!navigating.type && topDocs.length === 0);
 const showBlock = $derived(topDocs.length > 0 || bannerCount > 0 || showSkeleton);
 </script>
 

frontend/src/lib/document/EnrichmentBlock.svelte.spec.ts

@@ -2,19 +2,23 @@ import { describe, it, expect, afterEach, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 
-// The store must live in a separate module because vi.mock factories are
-// hoisted and cannot reference top-level variables defined in this file.
-import { navigatingStore } from './__mocks__/navigatingStore';
 import EnrichmentBlock from './EnrichmentBlock.svelte';
 
-vi.mock('$app/stores', async () => {
-	const mod = await import('./__mocks__/navigatingStore');
-	return { navigating: mod.navigatingStore };
-});
+// Hoist the mutable navigation reference so vi.mock's factory (also hoisted)
+// can read it via a getter. Sync factory, no dynamic import: ADR-012 invariant.
+const { mockNavigating } = vi.hoisted(() => ({
+	mockNavigating: { type: null as string | null }
+}));
+
+vi.mock('$app/state', () => ({
+	get navigating() {
+		return mockNavigating;
+	}
+}));
 
 afterEach(() => {
 	cleanup();
-	navigatingStore.set(null);
+	mockNavigating.type = null;
 });
 
 type Doc = { id: string; title: string; uploadedAt: string };
@@ -65,8 +69,8 @@ describe('EnrichmentBlock', () => {
 		await expect.element(page.getByTestId('dashboard-needs-metadata')).toBeInTheDocument();
 	});
 
-	it('renders the skeleton when $navigating is active and topDocs is empty', async () => {
-		navigatingStore.set({ type: 'link' });
+	it('renders the skeleton when navigation is active and topDocs is empty', async () => {
+		mockNavigating.type = 'link';
 		render(EnrichmentBlock, {
 			topDocs: [],
 			totalCount: 0,
@@ -76,8 +80,8 @@ describe('EnrichmentBlock', () => {
 		await expect.element(page.getByTestId('enrichment-block-skeleton')).toBeInTheDocument();
 	});
 
-	it('does not render the skeleton when topDocs is non-empty even during $navigating', async () => {
-		navigatingStore.set({ type: 'link' });
+	it('does not render the skeleton when topDocs is non-empty even during navigation', async () => {
+		mockNavigating.type = 'link';
 		render(EnrichmentBlock, {
 			topDocs: [doc('d1')],
 			totalCount: 1,

frontend/src/lib/document/__mocks__/navigatingStore.ts

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const navigatingStore = writable<unknown | null>(null);