Upload feature (e): wire inline upload (registratie beroep) + documenten step (herregistratie)

- Fold UploadState into both wizard machines; route via { tag: 'Upload', msg }
- Gate step validation on requiredCategoriesSatisfied; include deliveryRefs in submit
- Shared createUploadController (effectful glue: categories, transport, focus-poll, File map)
- rejectReason pure format validator + specs; bump registratie storage key to v2

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

src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts

@@ -29,8 +29,11 @@ import {
 } from '@registratie/domain/registratie-wizard.machine';
 import { submitRegistratie } from '@registratie/application/submit-registratie';
 import { ApiClient } from '@shared/infrastructure/api-client';
+import { DocumentUploadComponent } from '@shared/ui/upload/document-upload/document-upload.component';
+import { createUploadController } from '@shared/upload/upload-controller';
+import { UploadState, initialUpload } from '@shared/upload/upload.machine';
 
-const STORAGE_KEY = 'registratie-v1'; // ponytail: bump the suffix if the persisted shape changes; no migration.
+const STORAGE_KEY = 'registratie-v2'; // ponytail: bump the suffix if the persisted shape changes; no migration.
 const KANALEN = [
   { value: 'email', label: $localize`:@@registratie.kanaalEmail:E-mail` },
   { value: 'post', label: $localize`:@@registratie.kanaalPost:Post` },
@@ -48,7 +51,7 @@ const HANDMATIG = '__handmatig__'; // sentinel option: "my diploma isn't listed"
   imports: [
     FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent,
     AlertComponent, SkeletonComponent, DataRowComponent, WizardShellComponent,
-    AddressFieldsComponent, ...ASYNC,
+    AddressFieldsComponent, DocumentUploadComponent, ...ASYNC,
   ],
   template: `
     <app-wizard-shell
@@ -133,6 +136,18 @@ const HANDMATIG = '__handmatig__'; // sentinel option: "my diploma isn't listed"
                   <app-skeleton height="2.5rem" [count]="3" />
                 </ng-template>
               </app-async>
+
+              <app-document-upload
+                class="app-section"
+                [state]="upload()"
+                (fileSelected)="uploadCtl.onFileSelected($event.categoryId, $event.files)"
+                (removeUpload)="uploadCtl.onRemove($event)"
+                (retryUpload)="uploadCtl.onRetry($event)"
+                (deleteUpload)="uploadCtl.onDelete($event)"
+                (channelChange)="uploadCtl.onChannelChange($event.categoryId, $event.channel)" />
+              @if (err('documenten')) {
+                <app-alert type="warning">{{ err('documenten') }}</app-alert>
+              }
             }
             @case ('controle') {
               <app-alert type="info" i18n="@@regWizard.controleer">Controleer uw gegevens en dien de registratie in.</app-alert>
@@ -186,6 +201,12 @@ export class RegistratieWizardComponent {
   private invullen = computed(() => whenTag(this.state(), 'Invullen'));
   protected cursor = computed(() => this.invullen()?.cursor ?? 0);
   protected draft = computed<Draft>(() => this.invullen()?.draft ?? { antwoorden: {} });
+  protected upload = computed<UploadState>(() => this.invullen()?.upload ?? initialUpload);
+  protected uploadCtl = createUploadController({
+    wizardId: 'registratie',
+    getUpload: () => this.upload(),
+    dispatch: (msg) => this.dispatch({ tag: 'Upload', msg }),
+  });
   protected step = computed<StepId>(() => STEPS[Math.min(this.cursor(), STEPS.length - 1)]);
   protected stepTitle = computed(() => this.stepTitles[Math.min(this.cursor(), this.stepTitles.length - 1)]);
   protected referentie = computed(() => whenTag(this.state(), 'Ingediend')?.referentie ?? '');
@@ -252,7 +273,7 @@ export class RegistratieWizardComponent {
 
   readonly jaNee = JA_NEE;
 
-  protected err = (k: DraftField | 'correspondentie' | 'diploma') => this.invullen()?.errors[k] ?? '';
+  protected err = (k: DraftField | 'correspondentie' | 'diploma' | 'documenten') => this.invullen()?.errors[k] ?? '';
   protected vraagErr = (id: string) => this.invullen()?.errors.antwoorden?.[id] ?? '';
   protected set = (key: DraftField, value: string) => this.dispatch({ tag: 'SetField', key, value });
   protected setKanaal = (value: string) => this.dispatch({ tag: 'SetCorrespondentie', value: value as Correspondentie });

src/app/registratie/ui/registratie-wizard/registratie-wizard.stories.ts

@@ -3,12 +3,13 @@ import { applicationConfig } from '@storybook/angular';
 import { provideHttpClient } from '@angular/common/http';
 import { RegistratieWizardComponent } from './registratie-wizard.component';
 import { Draft, RegistratieState, ValidRegistratie } from '@registratie/domain/registratie-wizard.machine';
+import { initialUpload } from '@shared/upload/upload.machine';
 import { Postcode } from '@registratie/domain/value-objects/postcode';
 
 const adres: Partial<Draft> = { straat: 'Lange Voorhout 9', postcode: '2514 EA', woonplaats: 'Den Haag', adresHerkomst: 'brp', correspondentie: 'post' };
 const filled: Partial<Draft> = { ...adres, diplomaId: 'd1', beroep: 'Arts', diplomaHerkomst: 'duo', vraagIds: [] };
 
-const invullen = (draft: Partial<Draft>, cursor = 0): RegistratieState => ({ tag: 'Invullen', draft: { antwoorden: {}, ...draft }, cursor, errors: {} });
+const invullen = (draft: Partial<Draft>, cursor = 0): RegistratieState => ({ tag: 'Invullen', draft: { antwoorden: {}, ...draft }, cursor, errors: {}, upload: initialUpload });
 
 const validData: ValidRegistratie = {
   adres: { straat: 'Lange Voorhout 9', postcode: '2514 EA' as Postcode, woonplaats: 'Den Haag' },
@@ -18,6 +19,7 @@ const validData: ValidRegistratie = {
   diplomaHerkomst: 'duo',
   beroep: 'Arts',
   antwoorden: {},
+  documents: [],
 };
 
 const meta: Meta<RegistratieWizardComponent> = {