style: format frontend, docs and skills with prettier; add .prettierignore

One-time prettier --write so the new format:check CI gate starts green.
.prettierignore excludes generated (api-client.ts, documentation.json),
vendored (public/cibg-huisstijl), and backend (dotnet format owns it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/app.config.ts

@@ -1,4 +1,9 @@
-import { ApplicationConfig, LOCALE_ID, isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core';
+import {
+  ApplicationConfig,
+  LOCALE_ID,
+  isDevMode,
+  provideBrowserGlobalErrorListeners,
+} from '@angular/core';
 import { provideRouter, withViewTransitions } from '@angular/router';
 import type { ActivatedRouteSnapshot } from '@angular/router';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
@@ -43,5 +48,5 @@ export const appConfig: ApplicationConfig = {
     provideApiClient(),
     { provide: SESSION_PORT, useExisting: SessionStore },
     { provide: LOCALE_ID, useValue: 'nl' },
-  ]
+  ],
 };

src/app/app.routes.ts

@@ -8,15 +8,53 @@ export const routes: Routes = [
     component: ShellComponent, // persistent header/footer; only children swap
     children: [
       { path: '', pathMatch: 'full', redirectTo: 'login' },
-      { path: 'login', loadComponent: () => import('@auth/ui/login.page').then(m => m.LoginPage) },
-      { path: 'dashboard', canActivate: [authGuard], loadComponent: () => import('@registratie/ui/dashboard.page').then(m => m.DashboardPage) },
-      { path: 'registratie', canActivate: [authGuard], loadComponent: () => import('@registratie/ui/registration-detail.page').then(m => m.RegistrationDetailPage) },
-      { path: 'aanvraag/:id', canActivate: [authGuard], loadComponent: () => import('@registratie/ui/aanvraag-detail.page').then(m => m.AanvraagDetailPage) },
-      { path: 'registreren', canActivate: [authGuard], loadComponent: () => import('@registratie/ui/registratie.page').then(m => m.RegistratiePage) },
-      { path: 'herregistratie', canActivate: [authGuard], loadComponent: () => import('@herregistratie/ui/herregistratie.page').then(m => m.HerregistratiePage) },
-      { path: 'intake', canActivate: [authGuard], loadComponent: () => import('@herregistratie/ui/intake.page').then(m => m.IntakePage) },
-      { path: 'brief', canActivate: [authGuard], loadComponent: () => import('@brief/ui/brief.page').then(m => m.BriefPage) },
-      { path: 'concepts', loadComponent: () => import('./showcase/concepts.page').then(m => m.ConceptsPage) },
+      {
+        path: 'login',
+        loadComponent: () => import('@auth/ui/login.page').then((m) => m.LoginPage),
+      },
+      {
+        path: 'dashboard',
+        canActivate: [authGuard],
+        loadComponent: () => import('@registratie/ui/dashboard.page').then((m) => m.DashboardPage),
+      },
+      {
+        path: 'registratie',
+        canActivate: [authGuard],
+        loadComponent: () =>
+          import('@registratie/ui/registration-detail.page').then((m) => m.RegistrationDetailPage),
+      },
+      {
+        path: 'aanvraag/:id',
+        canActivate: [authGuard],
+        loadComponent: () =>
+          import('@registratie/ui/aanvraag-detail.page').then((m) => m.AanvraagDetailPage),
+      },
+      {
+        path: 'registreren',
+        canActivate: [authGuard],
+        loadComponent: () =>
+          import('@registratie/ui/registratie.page').then((m) => m.RegistratiePage),
+      },
+      {
+        path: 'herregistratie',
+        canActivate: [authGuard],
+        loadComponent: () =>
+          import('@herregistratie/ui/herregistratie.page').then((m) => m.HerregistratiePage),
+      },
+      {
+        path: 'intake',
+        canActivate: [authGuard],
+        loadComponent: () => import('@herregistratie/ui/intake.page').then((m) => m.IntakePage),
+      },
+      {
+        path: 'brief',
+        canActivate: [authGuard],
+        loadComponent: () => import('@brief/ui/brief.page').then((m) => m.BriefPage),
+      },
+      {
+        path: 'concepts',
+        loadComponent: () => import('./showcase/concepts.page').then((m) => m.ConceptsPage),
+      },
       { path: '**', redirectTo: 'login' },
     ],
   },

src/app/auth/infrastructure/digid.adapter.ts

@@ -9,7 +9,8 @@ export class DigidAdapter {
   // Swap for a real OIDC redirect flow when there's a backend.
   async authenticate(bsn: string): Promise<Result<string, Session>> {
     const t = bsn.trim();
-    if (!/^\d{9}$/.test(t)) return err($localize`:@@validation.bsn:Voer een geldig BSN van 9 cijfers in.`);
+    if (!/^\d{9}$/.test(t))
+      return err($localize`:@@validation.bsn:Voer een geldig BSN van 9 cijfers in.`);
     return ok({ bsn: t, naam: 'Dr. A. (Anna) de Vries' });
   }
 }

src/app/auth/ui/login-form/login-form.component.ts

@@ -11,10 +11,19 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
   template: `
     <form (ngSubmit)="submitted.emit(bsn)" class="form-horizontal">
       <div class="form-header">
-        <div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
+        <div class="form-action">
+          <span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span>
+        </div>
       </div>
 
-      <app-form-field i18n-label="@@login.bsnLabel" label="BSN" fieldId="bsn" required i18n-description="@@login.bsnDescription" description="9 cijfers (demo: vul iets in)">
+      <app-form-field
+        i18n-label="@@login.bsnLabel"
+        label="BSN"
+        fieldId="bsn"
+        required
+        i18n-description="@@login.bsnDescription"
+        description="9 cijfers (demo: vul iets in)"
+      >
         <app-text-input inputId="bsn" [(ngModel)]="bsn" name="bsn" placeholder="123456789" />
       </app-form-field>
 
@@ -22,7 +31,9 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
         <app-text-input inputId="pw" type="password" [(ngModel)]="password" name="pw" />
       </app-form-field>
 
-      <app-button type="submit" variant="primary" i18n="@@login.submit">Inloggen met DigiD</app-button>
+      <app-button type="submit" variant="primary" i18n="@@login.submit"
+        >Inloggen met DigiD</app-button
+      >
     </form>
   `,
 })

src/app/auth/ui/login.page.ts

@@ -9,9 +9,16 @@ import { SessionStore } from '@auth/application/session.store';
   selector: 'app-login-page',
   imports: [PageShellComponent, AlertComponent, LoginFormComponent],
   template: `
-    <app-page-shell i18n-heading="@@login.heading" heading="Inloggen" width="narrow"
-      i18n-intro="@@login.intro" intro="Log in op uw persoonlijke BIG-register omgeving.">
-      @if (error()) { <app-alert type="error">{{ error() }}</app-alert> }
+    <app-page-shell
+      i18n-heading="@@login.heading"
+      heading="Inloggen"
+      width="narrow"
+      i18n-intro="@@login.intro"
+      intro="Log in op uw persoonlijke BIG-register omgeving."
+    >
+      @if (error()) {
+        <app-alert type="error">{{ error() }}</app-alert>
+      }
       <app-login-form (submitted)="login($event)" />
     </app-page-shell>
   `,

src/app/brief/application/brief.store.ts

@@ -3,7 +3,13 @@ import { Result } from '@shared/kernel/fp';
 import { createStore } from '@shared/application/store';
 import { Role } from '@shared/domain/role';
 import { currentRole } from '@shared/infrastructure/role';
-import { Brief, allDiagnostics, canSubmit, hasBlockingErrors, unresolvedPlaceholders } from '@brief/domain/brief';
+import {
+  Brief,
+  allDiagnostics,
+  canSubmit,
+  hasBlockingErrors,
+  unresolvedPlaceholders,
+} from '@brief/domain/brief';
 import { BriefMsg, BriefState, initial, reduce } from '@brief/domain/brief.machine';
 import { BriefAdapter } from '@brief/infrastructure/brief.adapter';
 
@@ -34,7 +40,9 @@ export class BriefStore {
       treats as editable (draft, or rejected — which reopens to draft on the first edit). */
   readonly editable = computed(() => {
     const b = this.brief();
-    return !!b && (b.status.tag === 'draft' || b.status.tag === 'rejected') && this.role === 'drafter';
+    return (
+      !!b && (b.status.tag === 'draft' || b.status.tag === 'rejected') && this.role === 'drafter'
+    );
   });
   readonly diagnostics = computed(() => (this.brief() ? allDiagnostics(this.brief()!) : []));
   readonly unresolved = computed(() => (this.brief() ? unresolvedPlaceholders(this.brief()!) : []));
@@ -46,7 +54,12 @@ export class BriefStore {
 
   async load() {
     const r = await this.adapter.load();
-    if (r.ok) this.store.dispatch({ tag: 'BriefLoaded', brief: r.value.brief, availablePassages: r.value.availablePassages });
+    if (r.ok)
+      this.store.dispatch({
+        tag: 'BriefLoaded',
+        brief: r.value.brief,
+        availablePassages: r.value.availablePassages,
+      });
     else this.store.dispatch({ tag: 'BriefLoadFailed', reason: r.error });
   }
 
@@ -84,7 +97,12 @@ export class BriefStore {
     const r = await this.adapter.reset();
     this.busy.set(false);
     this.saveState.set('idle');
-    if (r.ok) this.store.dispatch({ tag: 'BriefLoaded', brief: r.value.brief, availablePassages: r.value.availablePassages });
+    if (r.ok)
+      this.store.dispatch({
+        tag: 'BriefLoaded',
+        brief: r.value.brief,
+        availablePassages: r.value.availablePassages,
+      });
     else this.lastError.set(r.error);
   }
 
@@ -119,7 +137,12 @@ export class BriefStore {
         this.store.dispatch({ tag: 'Approved', by: s.approvedBy, at: s.approvedAt });
         break;
       case 'rejected':
-        this.store.dispatch({ tag: 'Rejected', by: s.rejectedBy, at: s.rejectedAt, comments: s.comments });
+        this.store.dispatch({
+          tag: 'Rejected',
+          by: s.rejectedBy,
+          at: s.rejectedAt,
+          comments: s.comments,
+        });
         break;
       case 'sent':
         this.store.dispatch({ tag: 'Sent', at: s.sentAt });

src/app/brief/domain/brief.machine.spec.ts

@@ -9,7 +9,9 @@ const placeholders: PlaceholderDef[] = [
   { key: 'reden', label: 'Reden', autoResolvable: false },
 ];
 
-const text = (t: string): RichTextBlock => ({ paragraphs: [{ nodes: [{ type: 'text', text: t }] }] });
+const text = (t: string): RichTextBlock => ({
+  paragraphs: [{ nodes: [{ type: 'text', text: t }] }],
+});
 
 const libPassage = (id: string, sectionKey: string): LibraryPassage => ({
   passageId: id,
@@ -35,7 +37,10 @@ function briefWith(status: BriefStatus, sections?: Brief['sections']): Brief {
   };
 }
 
-const loaded = (status: BriefStatus = { tag: 'draft' }, sections?: Brief['sections']): BriefState => ({
+const loaded = (
+  status: BriefStatus = { tag: 'draft' },
+  sections?: Brief['sections'],
+): BriefState => ({
   tag: 'loaded',
   brief: briefWith(status, sections),
   availablePassages: [libPassage('p1', 'aanhef'), libPassage('p2', 'aanhef')],
@@ -46,14 +51,27 @@ const sectionBlocks = (s: BriefState, key: string) =>
 
 describe('brief.machine reduce', () => {
   it('BriefLoaded / BriefLoadFailed / Seed set state directly', () => {
-    expect(reduce(initialLoading(), { tag: 'BriefLoaded', brief: briefWith({ tag: 'draft' }), availablePassages: [] }).tag).toBe('loaded');
-    expect(reduce(initialLoading(), { tag: 'BriefLoadFailed', reason: 'x' })).toEqual({ tag: 'failed', reason: 'x' });
+    expect(
+      reduce(initialLoading(), {
+        tag: 'BriefLoaded',
+        brief: briefWith({ tag: 'draft' }),
+        availablePassages: [],
+      }).tag,
+    ).toBe('loaded');
+    expect(reduce(initialLoading(), { tag: 'BriefLoadFailed', reason: 'x' })).toEqual({
+      tag: 'failed',
+      reason: 'x',
+    });
     const seeded = loaded();
     expect(reduce(initialLoading(), { tag: 'Seed', state: seeded })).toBe(seeded);
   });
 
   it('PassagesInserted creates one frozen block per passage, in order, with local ids', () => {
-    const s = reduce(loaded(), { tag: 'PassagesInserted', sectionKey: 'aanhef', passages: [libPassage('p1', 'aanhef'), libPassage('p2', 'aanhef')] });
+    const s = reduce(loaded(), {
+      tag: 'PassagesInserted',
+      sectionKey: 'aanhef',
+      passages: [libPassage('p1', 'aanhef'), libPassage('p2', 'aanhef')],
+    });
     const blocks = sectionBlocks(s, 'aanhef');
     expect(blocks.map((b) => b.blockId)).toEqual(['local-1', 'local-2']);
     expect(blocks.every((b) => b.type === 'passage' && b.edited === false)).toBe(true);
@@ -62,7 +80,11 @@ describe('brief.machine reduce', () => {
 
   it('PassagesInserted deep-copies content — later library mutation does not leak in', () => {
     const passage = libPassage('p1', 'aanhef');
-    const s = reduce(loaded(), { tag: 'PassagesInserted', sectionKey: 'aanhef', passages: [passage] });
+    const s = reduce(loaded(), {
+      tag: 'PassagesInserted',
+      sectionKey: 'aanhef',
+      passages: [passage],
+    });
     // Mutate the source passage object after insertion.
     (passage.content.paragraphs[0].nodes as { type: 'text'; text: string }[])[0].text = 'HACKED';
     const block = sectionBlocks(s, 'aanhef')[0];
@@ -77,7 +99,11 @@ describe('brief.machine reduce', () => {
   });
 
   it('BlockContentEdited replaces content and marks a passage block edited', () => {
-    let s = reduce(loaded(), { tag: 'PassagesInserted', sectionKey: 'aanhef', passages: [libPassage('p1', 'aanhef')] });
+    let s = reduce(loaded(), {
+      tag: 'PassagesInserted',
+      sectionKey: 'aanhef',
+      passages: [libPassage('p1', 'aanhef')],
+    });
     s = reduce(s, { tag: 'BlockContentEdited', blockId: 'local-1', content: text('aangepast') });
     const block = sectionBlocks(s, 'aanhef')[0];
     expect(block.type === 'passage' && block.edited).toBe(true);
@@ -85,7 +111,11 @@ describe('brief.machine reduce', () => {
   });
 
   it('BlockRemoved and BlockMovedWithinSection reorder within a section', () => {
-    let s = reduce(loaded(), { tag: 'PassagesInserted', sectionKey: 'aanhef', passages: [libPassage('p1', 'aanhef'), libPassage('p2', 'aanhef')] });
+    let s = reduce(loaded(), {
+      tag: 'PassagesInserted',
+      sectionKey: 'aanhef',
+      passages: [libPassage('p1', 'aanhef'), libPassage('p2', 'aanhef')],
+    });
     s = reduce(s, { tag: 'BlockMovedWithinSection', blockId: 'local-1', toIndex: 1 });
     expect(sectionBlocks(s, 'aanhef').map((b) => b.blockId)).toEqual(['local-2', 'local-1']);
     s = reduce(s, { tag: 'BlockRemoved', blockId: 'local-2' });
@@ -94,17 +124,33 @@ describe('brief.machine reduce', () => {
 
   it('edits to a locked section are no-ops (insert, free-text, content, remove, move)', () => {
     const lockedSections: Brief['sections'] = [
-      { sectionKey: 'aanhef', title: 'Aanhef', required: true, locked: true, blocks: [{ type: 'freeText', blockId: 'local-1', content: text('vast') }] },
+      {
+        sectionKey: 'aanhef',
+        title: 'Aanhef',
+        required: true,
+        locked: true,
+        blocks: [{ type: 'freeText', blockId: 'local-1', content: text('vast') }],
+      },
       { sectionKey: 'kern', title: 'Kern', required: true, locked: false, blocks: [] },
     ];
     const s = loaded({ tag: 'draft' }, lockedSections);
     // The brief value is left untouched (withEdit reallocates state, but the guard returns
     // the same brief), so assert on deep equality of the section contents.
-    expect(reduce(s, { tag: 'PassagesInserted', sectionKey: 'aanhef', passages: [libPassage('p1', 'aanhef')] })).toEqual(s);
+    expect(
+      reduce(s, {
+        tag: 'PassagesInserted',
+        sectionKey: 'aanhef',
+        passages: [libPassage('p1', 'aanhef')],
+      }),
+    ).toEqual(s);
     expect(reduce(s, { tag: 'FreeTextBlockAdded', sectionKey: 'aanhef' })).toEqual(s);
-    expect(reduce(s, { tag: 'BlockContentEdited', blockId: 'local-1', content: text('gehackt') })).toEqual(s);
+    expect(
+      reduce(s, { tag: 'BlockContentEdited', blockId: 'local-1', content: text('gehackt') }),
+    ).toEqual(s);
     expect(reduce(s, { tag: 'BlockRemoved', blockId: 'local-1' })).toEqual(s);
-    expect(reduce(s, { tag: 'BlockMovedWithinSection', blockId: 'local-1', toIndex: 0 })).toEqual(s);
+    expect(reduce(s, { tag: 'BlockMovedWithinSection', blockId: 'local-1', toIndex: 0 })).toEqual(
+      s,
+    );
     // the unlocked section still accepts edits
     const edited = reduce(s, { tag: 'FreeTextBlockAdded', sectionKey: 'kern' });
     expect(sectionBlocks(edited, 'kern')).toHaveLength(1);
@@ -116,7 +162,12 @@ describe('brief.machine reduce', () => {
   });
 
   it('editing a rejected letter reopens it to draft', () => {
-    const s = loaded({ tag: 'rejected', rejectedBy: 'u2', rejectedAt: 't', comments: 'graag aanpassen' });
+    const s = loaded({
+      tag: 'rejected',
+      rejectedBy: 'u2',
+      rejectedAt: 't',
+      comments: 'graag aanpassen',
+    });
     const next = reduce(s, { tag: 'FreeTextBlockAdded', sectionKey: 'slot' });
     expect(next.tag === 'loaded' && next.brief.status.tag).toBe('draft');
     expect(sectionBlocks(next, 'slot')).toHaveLength(1);
@@ -128,7 +179,11 @@ describe('brief.machine reduce', () => {
     // fill the required section, then submit
     const filled = reduce(loaded(), { tag: 'FreeTextBlockAdded', sectionKey: 'aanhef' });
     const submitted = reduce(filled, { tag: 'Submitted', by: 'u1', at: 't' });
-    expect(submitted.tag === 'loaded' && submitted.brief.status).toEqual({ tag: 'submitted', submittedBy: 'u1', submittedAt: 't' });
+    expect(submitted.tag === 'loaded' && submitted.brief.status).toEqual({
+      tag: 'submitted',
+      submittedBy: 'u1',
+      submittedAt: 't',
+    });
   });
 
   it('approve/reject fire only from submitted; send only from approved', () => {
@@ -136,10 +191,19 @@ describe('brief.machine reduce', () => {
     // approve from draft is a no-op
     expect(reduce(loaded(), { tag: 'Approved', by: 'u2', at: 't' })).toEqual(loaded());
     const approved = reduce(submitted, { tag: 'Approved', by: 'u2', at: 't2' });
-    expect(approved.tag === 'loaded' && approved.brief.status).toEqual({ tag: 'approved', approvedBy: 'u2', approvedAt: 't2' });
+    expect(approved.tag === 'loaded' && approved.brief.status).toEqual({
+      tag: 'approved',
+      approvedBy: 'u2',
+      approvedAt: 't2',
+    });
     // reject carries comments
     const rejected = reduce(submitted, { tag: 'Rejected', by: 'u2', at: 't2', comments: 'nee' });
-    expect(rejected.tag === 'loaded' && rejected.brief.status).toEqual({ tag: 'rejected', rejectedBy: 'u2', rejectedAt: 't2', comments: 'nee' });
+    expect(rejected.tag === 'loaded' && rejected.brief.status).toEqual({
+      tag: 'rejected',
+      rejectedBy: 'u2',
+      rejectedAt: 't2',
+      comments: 'nee',
+    });
     // send only from approved
     expect(reduce(submitted, { tag: 'Sent', at: 't' })).toBe(submitted);
     const sent = reduce(approved, { tag: 'Sent', at: 't3' });

src/app/brief/domain/brief.machine.ts

@@ -1,5 +1,13 @@
 import { assertNever } from '@shared/kernel/fp';
-import { Brief, BriefStatus, LetterBlock, LetterSection, LibraryPassage, allBlocks, canSubmit } from './brief';
+import {
+  Brief,
+  BriefStatus,
+  LetterBlock,
+  LetterSection,
+  LibraryPassage,
+  allBlocks,
+  canSubmit,
+} from './brief';
 import { RichTextBlock, deepCopyBlock, emptyBlock } from '@shared/kernel/rich-text';
 
 /**
@@ -59,8 +67,15 @@ function nextLocalIndex(brief: Brief): number {
   return max + 1;
 }
 
-function mapSection(brief: Brief, sectionKey: string, f: (s: LetterSection) => LetterSection): Brief {
-  return { ...brief, sections: brief.sections.map((s) => (s.sectionKey === sectionKey ? f(s) : s)) };
+function mapSection(
+  brief: Brief,
+  sectionKey: string,
+  f: (s: LetterSection) => LetterSection,
+): Brief {
+  return {
+    ...brief,
+    sections: brief.sections.map((s) => (s.sectionKey === sectionKey ? f(s) : s)),
+  };
 }
 
 /** The section a block currently lives in, or undefined if the block is gone. */
@@ -86,7 +101,11 @@ function withEdit(s: BriefState, f: (b: Brief) => Brief): BriefState {
   return { ...s, brief };
 }
 
-function insertPassages(brief: Brief, sectionKey: string, passages: readonly LibraryPassage[]): Brief {
+function insertPassages(
+  brief: Brief,
+  sectionKey: string,
+  passages: readonly LibraryPassage[],
+): Brief {
   let idx = nextLocalIndex(brief);
   // The freeze happens HERE: each block gets a deep VALUE copy of the library content,
   // so later library edits can never mutate this letter (frozen snapshot).
@@ -102,7 +121,11 @@ function insertPassages(brief: Brief, sectionKey: string, passages: readonly Lib
 }
 
 function addFreeText(brief: Brief, sectionKey: string): Brief {
-  const block: LetterBlock = { type: 'freeText', blockId: `local-${nextLocalIndex(brief)}`, content: emptyBlock() };
+  const block: LetterBlock = {
+    type: 'freeText',
+    blockId: `local-${nextLocalIndex(brief)}`,
+    content: emptyBlock(),
+  };
   return mapSection(brief, sectionKey, (s) => ({ ...s, blocks: [...s.blocks, block] }));
 }
 
@@ -118,7 +141,11 @@ function editBlockContent(brief: Brief, blockId: string, content: RichTextBlock)
   );
 }
 
-function moveWithinSection(blocks: readonly LetterBlock[], blockId: string, toIndex: number): LetterBlock[] {
+function moveWithinSection(
+  blocks: readonly LetterBlock[],
+  blockId: string,
+  toIndex: number,
+): LetterBlock[] {
   const from = blocks.findIndex((b) => b.blockId === blockId);
   if (from === -1) return [...blocks];
   const clamped = Math.max(0, Math.min(toIndex, blocks.length - 1));
@@ -140,12 +167,18 @@ export function reduce(s: BriefState, m: BriefMsg): BriefState {
     // Section-level guard (defense-in-depth): locked sections never accept edits, even if a
     // Msg reaches the reducer. The UI already hides controls for locked sections.
     case 'PassagesInserted':
-      return withEdit(s, (b) => (isSectionEditable(b, m.sectionKey) ? insertPassages(b, m.sectionKey, m.passages) : b));
+      return withEdit(s, (b) =>
+        isSectionEditable(b, m.sectionKey) ? insertPassages(b, m.sectionKey, m.passages) : b,
+      );
     case 'FreeTextBlockAdded':
-      return withEdit(s, (b) => (isSectionEditable(b, m.sectionKey) ? addFreeText(b, m.sectionKey) : b));
+      return withEdit(s, (b) =>
+        isSectionEditable(b, m.sectionKey) ? addFreeText(b, m.sectionKey) : b,
+      );
     case 'BlockContentEdited':
       return withEdit(s, (b) =>
-        isSectionEditable(b, sectionKeyOfBlock(b, m.blockId)) ? editBlockContent(b, m.blockId, m.content) : b,
+        isSectionEditable(b, sectionKeyOfBlock(b, m.blockId))
+          ? editBlockContent(b, m.blockId, m.content)
+          : b,
       );
     case 'BlockRemoved':
       return withEdit(s, (b) =>
@@ -157,18 +190,34 @@ export function reduce(s: BriefState, m: BriefMsg): BriefState {
       return withEdit(s, (b) =>
         isSectionEditable(b, sectionKeyOfBlock(b, m.blockId))
           ? mapBlocks(b, (blocks) =>
-              blocks.some((x) => x.blockId === m.blockId) ? moveWithinSection(blocks, m.blockId, m.toIndex) : [...blocks],
+              blocks.some((x) => x.blockId === m.blockId)
+                ? moveWithinSection(blocks, m.blockId, m.toIndex)
+                : [...blocks],
             )
           : b,
       );
 
     case 'Submitted':
       // Guard the transition AND the completeness invariant.
-      return transition(s, 'draft', () => ({ tag: 'submitted', submittedBy: m.by, submittedAt: m.at }), canSubmit);
+      return transition(
+        s,
+        'draft',
+        () => ({ tag: 'submitted', submittedBy: m.by, submittedAt: m.at }),
+        canSubmit,
+      );
     case 'Approved':
-      return transition(s, 'submitted', () => ({ tag: 'approved', approvedBy: m.by, approvedAt: m.at }));
+      return transition(s, 'submitted', () => ({
+        tag: 'approved',
+        approvedBy: m.by,
+        approvedAt: m.at,
+      }));
     case 'Rejected':
-      return transition(s, 'submitted', () => ({ tag: 'rejected', rejectedBy: m.by, rejectedAt: m.at, comments: m.comments }));
+      return transition(s, 'submitted', () => ({
+        tag: 'rejected',
+        rejectedBy: m.by,
+        rejectedAt: m.at,
+        comments: m.comments,
+      }));
     case 'Sent':
       return transition(s, 'approved', () => ({ tag: 'sent', sentAt: m.at }));
 

src/app/brief/domain/brief.spec.ts

@@ -1,5 +1,12 @@
 import { describe, it, expect } from 'vitest';
-import { Brief, LetterBlock, allDiagnostics, canSubmit, hasBlockingErrors, unresolvedPlaceholders } from './brief';
+import {
+  Brief,
+  LetterBlock,
+  allDiagnostics,
+  canSubmit,
+  hasBlockingErrors,
+  unresolvedPlaceholders,
+} from './brief';
 import { PlaceholderDef } from './placeholders';
 import { RichTextBlock } from '@shared/kernel/rich-text';
 
@@ -19,21 +26,47 @@ const passage = (blockId: string, ...keys: string[]): LetterBlock => ({
 });
 
 function brief(sections: Brief['sections']): Brief {
-  return { briefId: 'b1', beroep: 'arts', templateId: 't1', placeholders, sections, status: { tag: 'draft' }, drafterId: 'u1' };
+  return {
+    briefId: 'b1',
+    beroep: 'arts',
+    templateId: 't1',
+    placeholders,
+    sections,
+    status: { tag: 'draft' },
+    drafterId: 'u1',
+  };
 }
 
 describe('brief selectors', () => {
   it('unresolvedPlaceholders returns deduped manual keys only (auto excluded)', () => {
     const b = brief([
-      { sectionKey: 's1', title: 'S1', required: true, locked: false, blocks: [passage('local-1', 'naam', 'reden')] },
-      { sectionKey: 's2', title: 'S2', required: false, locked: false, blocks: [passage('local-2', 'reden')] },
+      {
+        sectionKey: 's1',
+        title: 'S1',
+        required: true,
+        locked: false,
+        blocks: [passage('local-1', 'naam', 'reden')],
+      },
+      {
+        sectionKey: 's2',
+        title: 'S2',
+        required: false,
+        locked: false,
+        blocks: [passage('local-2', 'reden')],
+      },
     ]);
     expect(unresolvedPlaceholders(b)).toEqual(['reden']); // 'naam' is auto; 'reden' deduped
   });
 
   it('allDiagnostics flattens across sections and blocks', () => {
     const b = brief([
-      { sectionKey: 's1', title: 'S1', required: true, locked: false, blocks: [passage('local-1', 'reden', 'onbekend')] },
+      {
+        sectionKey: 's1',
+        title: 'S1',
+        required: true,
+        locked: false,
+        blocks: [passage('local-1', 'reden', 'onbekend')],
+      },
     ]);
     const codes = allDiagnostics(b).map((d) => d.code);
     expect(codes).toContain('unresolved-at-send'); // reden
@@ -42,8 +75,28 @@ describe('brief selectors', () => {
   });
 
   it('canSubmit is false when a required section is empty, true otherwise', () => {
-    expect(canSubmit(brief([{ sectionKey: 's1', title: 'S1', required: true, locked: false, blocks: [] }]))).toBe(false);
-    expect(canSubmit(brief([{ sectionKey: 's1', title: 'S1', required: false, locked: false, blocks: [] }]))).toBe(true);
-    expect(canSubmit(brief([{ sectionKey: 's1', title: 'S1', required: true, locked: false, blocks: [passage('local-1')] }]))).toBe(true);
+    expect(
+      canSubmit(
+        brief([{ sectionKey: 's1', title: 'S1', required: true, locked: false, blocks: [] }]),
+      ),
+    ).toBe(false);
+    expect(
+      canSubmit(
+        brief([{ sectionKey: 's1', title: 'S1', required: false, locked: false, blocks: [] }]),
+      ),
+    ).toBe(true);
+    expect(
+      canSubmit(
+        brief([
+          {
+            sectionKey: 's1',
+            title: 'S1',
+            required: true,
+            locked: false,
+            blocks: [passage('local-1')],
+          },
+        ]),
+      ),
+    ).toBe(true);
   });
 });

src/app/brief/domain/brief.ts

@@ -59,7 +59,12 @@ export type BriefStatus =
   | { readonly tag: 'draft' }
   | { readonly tag: 'submitted'; readonly submittedBy: string; readonly submittedAt: string }
   | { readonly tag: 'approved'; readonly approvedBy: string; readonly approvedAt: string }
-  | { readonly tag: 'rejected'; readonly rejectedBy: string; readonly rejectedAt: string; readonly comments: string }
+  | {
+      readonly tag: 'rejected';
+      readonly rejectedBy: string;
+      readonly rejectedAt: string;
+      readonly comments: string;
+    }
   | { readonly tag: 'sent'; readonly sentAt: string };
 
 export interface Brief {
@@ -81,7 +86,9 @@ export function allBlocks(brief: Brief): LetterBlock[] {
 /** Every diagnostic in the letter, in section→block→node order. This is what the
     diagnostics panel renders and what the send gate checks. */
 export function allDiagnostics(brief: Brief): Diagnostic[] {
-  return allBlocks(brief).flatMap((b) => lintPlaceholders(b.content, brief.placeholders, b.blockId));
+  return allBlocks(brief).flatMap((b) =>
+    lintPlaceholders(b.content, brief.placeholders, b.blockId),
+  );
 }
 
 export function hasBlockingErrors(diagnostics: readonly Diagnostic[]): boolean {

src/app/brief/domain/placeholders.spec.ts

@@ -9,8 +9,12 @@ const valid: PlaceholderDef[] = [
   { key: 'niet_invulbaar', label: 'Niet invulbaar', autoResolvable: true, fillable: false },
 ];
 
-const withPlaceholder = (key: string): RichTextBlock => ({ paragraphs: [{ nodes: [{ type: 'placeholder', key }] }] });
-const withText = (text: string): RichTextBlock => ({ paragraphs: [{ nodes: [{ type: 'text', text }] }] });
+const withPlaceholder = (key: string): RichTextBlock => ({
+  paragraphs: [{ nodes: [{ type: 'placeholder', key }] }],
+});
+const withText = (text: string): RichTextBlock => ({
+  paragraphs: [{ nodes: [{ type: 'text', text }] }],
+});
 
 describe('lintPlaceholders', () => {
   it('clean content (auto-resolvable, fillable, current key) yields no diagnostics', () => {
@@ -55,10 +59,17 @@ describe('lintPlaceholders', () => {
     const content: RichTextBlock = {
       paragraphs: [
         { nodes: [{ type: 'placeholder', key: 'onbekend' }] },
-        { nodes: [{ type: 'text', text: 'ok' }, { type: 'placeholder', key: 'reden' }] },
+        {
+          nodes: [
+            { type: 'text', text: 'ok' },
+            { type: 'placeholder', key: 'reden' },
+          ],
+        },
       ],
     };
-    const codes = lintPlaceholders(content, valid, 'b1').map((d) => `${d.code}@${d.location.paragraphIndex}.${d.location.nodeIndex}`);
+    const codes = lintPlaceholders(content, valid, 'b1').map(
+      (d) => `${d.code}@${d.location.paragraphIndex}.${d.location.nodeIndex}`,
+    );
     expect(codes).toEqual(['unknown-placeholder@0.0', 'unresolved-at-send@1.1']);
   });
 

src/app/brief/domain/placeholders.ts

@@ -77,7 +77,13 @@ function messageFor(code: DiagnosticCode, key?: string): string {
 }
 
 function diag(code: DiagnosticCode, location: DiagnosticLocation, key?: string): Diagnostic {
-  return { severity: severityOf(code), code, placeholderKey: key, location, message: messageFor(code, key) };
+  return {
+    severity: severityOf(code),
+    code,
+    placeholderKey: key,
+    location,
+    message: messageFor(code, key),
+  };
 }
 
 /**

src/app/brief/infrastructure/brief.adapter.spec.ts

@@ -19,14 +19,32 @@ const view: BriefViewDto = {
         title: 'Aanhef',
         required: true,
         blocks: [
-          { type: 'passage', blockId: 'local-1', content: { paragraphs: [{ nodes: [{ type: 'placeholder', key: 'naam' }] }] }, sourcePassageId: 'p1', sourceVersion: 2, edited: true },
-          { type: 'freeText', blockId: 'local-2', content: { paragraphs: [{ nodes: [{ type: 'text', text: 'hoi', marks: ['bold'] }] }] } },
+          {
+            type: 'passage',
+            blockId: 'local-1',
+            content: { paragraphs: [{ nodes: [{ type: 'placeholder', key: 'naam' }] }] },
+            sourcePassageId: 'p1',
+            sourceVersion: 2,
+            edited: true,
+          },
+          {
+            type: 'freeText',
+            blockId: 'local-2',
+            content: { paragraphs: [{ nodes: [{ type: 'text', text: 'hoi', marks: ['bold'] }] }] },
+          },
         ],
       },
     ],
   },
   availablePassages: [
-    { passageId: 'p1', scope: 'global', sectionKey: 'aanhef', label: 'Aanhef', content: { paragraphs: [{ nodes: [] }] }, version: 1 },
+    {
+      passageId: 'p1',
+      scope: 'global',
+      sectionKey: 'aanhef',
+      label: 'Aanhef',
+      content: { paragraphs: [{ nodes: [] }] },
+      version: 1,
+    },
   ],
 };
 
@@ -35,16 +53,31 @@ describe('brief.adapter parse boundary', () => {
     const r = parseBriefView(view);
     expect(r.ok).toBe(true);
     if (!r.ok) return;
-    expect(r.value.brief.status).toEqual({ tag: 'submitted', submittedBy: 'demo-drafter', submittedAt: '2026-07-01' });
+    expect(r.value.brief.status).toEqual({
+      tag: 'submitted',
+      submittedBy: 'demo-drafter',
+      submittedAt: '2026-07-01',
+    });
     const [passage, free] = r.value.brief.sections[0].blocks;
     expect(passage.type === 'passage' && passage.edited).toBe(true);
     expect(free.type).toBe('freeText');
-    expect(r.value.brief.placeholders[1]).toEqual({ key: 'code', label: 'Code', autoResolvable: true, fillable: false });
+    expect(r.value.brief.placeholders[1]).toEqual({
+      key: 'code',
+      label: 'Code',
+      autoResolvable: true,
+      fillable: false,
+    });
   });
 
   it('narrows node variants and rejects unknown ones', () => {
-    expect(parseNode({ type: 'text', text: 'x' })).toEqual({ ok: true, value: { type: 'text', text: 'x' } });
-    expect(parseNode({ type: 'placeholder', key: 'k' })).toEqual({ ok: true, value: { type: 'placeholder', key: 'k' } });
+    expect(parseNode({ type: 'text', text: 'x' })).toEqual({
+      ok: true,
+      value: { type: 'text', text: 'x' },
+    });
+    expect(parseNode({ type: 'placeholder', key: 'k' })).toEqual({
+      ok: true,
+      value: { type: 'placeholder', key: 'k' },
+    });
     expect(parseNode({ type: 'lineBreak' })).toEqual({ ok: true, value: { type: 'lineBreak' } });
     expect(parseNode({ type: 'text' }).ok).toBe(false); // missing text
     expect(parseNode({ type: 'bogus' } as never).ok).toBe(false);
@@ -87,13 +120,24 @@ describe('brief.adapter parse boundary', () => {
     const [aanhef, kern] = r.value.sections;
     expect(aanhef.locked).toBe(true);
     expect(kern.locked).toBe(false);
-    expect(aanhef.blocks[0].content.paragraphs.map((p) => p.list)).toEqual(['bullet', 'number', undefined]);
+    expect(aanhef.blocks[0].content.paragraphs.map((p) => p.list)).toEqual([
+      'bullet',
+      'number',
+      undefined,
+    ]);
   });
 
   it('rejects a passage block missing provenance', () => {
     const r = parseBrief({
       ...view.brief,
-      sections: [{ sectionKey: 's', title: 'S', required: false, blocks: [{ type: 'passage', blockId: 'b', content: { paragraphs: [] } }] }],
+      sections: [
+        {
+          sectionKey: 's',
+          title: 'S',
+          required: false,
+          blocks: [{ type: 'passage', blockId: 'b', content: { paragraphs: [] } }],
+        },
+      ],
     });
     expect(r.ok).toBe(false);
   });

src/app/brief/infrastructure/brief.adapter.ts

@@ -13,7 +13,14 @@ import {
   RichTextBlockDto,
   RichTextNodeDto,
 } from '@shared/infrastructure/api-client';
-import { Brief, BriefStatus, LetterBlock, LetterSection, LibraryPassage, PassageScope } from '@brief/domain/brief';
+import {
+  Brief,
+  BriefStatus,
+  LetterBlock,
+  LetterSection,
+  LibraryPassage,
+  PassageScope,
+} from '@brief/domain/brief';
 import { PlaceholderDef } from '@brief/domain/placeholders';
 import { Mark, Paragraph, RichTextBlock, RichTextNode } from '@shared/kernel/rich-text';
 
@@ -43,7 +50,10 @@ export class BriefAdapter {
   }
 
   async save(sections: readonly LetterSection[]): Promise<Result<string, Brief>> {
-    const r = await runSubmit(() => this.client.briefPUT({ sections: sections.map(sectionToDto) }), BRIEF_ACTION_FAILED);
+    const r = await runSubmit(
+      () => this.client.briefPUT({ sections: sections.map(sectionToDto) }),
+      BRIEF_ACTION_FAILED,
+    );
     return r.ok ? parseBrief(r.value) : r;
   }
 
@@ -83,10 +93,16 @@ export function parseNode(dto: RichTextNodeDto): Result<string, RichTextNode> {
     case 'text': {
       if (typeof dto.text !== 'string') return err('node: text missing text');
       const marks = dto.marks?.filter((m): m is Mark => MARKS.includes(m));
-      return ok(marks && marks.length ? { type: 'text', text: dto.text, marks } : { type: 'text', text: dto.text });
+      return ok(
+        marks && marks.length
+          ? { type: 'text', text: dto.text, marks }
+          : { type: 'text', text: dto.text },
+      );
     }
     case 'placeholder':
-      return typeof dto.key === 'string' ? ok({ type: 'placeholder', key: dto.key }) : err('node: placeholder missing key');
+      return typeof dto.key === 'string'
+        ? ok({ type: 'placeholder', key: dto.key })
+        : err('node: placeholder missing key');
     case 'lineBreak':
       return ok({ type: 'lineBreak' });
     default:
@@ -94,7 +110,9 @@ export function parseNode(dto: RichTextNodeDto): Result<string, RichTextNode> {
   }
 }
 
-export function parseBlockContent(dto: RichTextBlockDto | undefined): Result<string, RichTextBlock> {
+export function parseBlockContent(
+  dto: RichTextBlockDto | undefined,
+): Result<string, RichTextBlock> {
   if (!dto || !Array.isArray(dto.paragraphs)) return err('content: paragraphs not an array');
   const paragraphs: Paragraph[] = [];
   for (const p of dto.paragraphs) {
@@ -116,7 +134,8 @@ function parseBlock(dto: LetterBlockDto): Result<string, LetterBlock> {
   if (!content.ok) return content;
   switch (dto.type) {
     case 'passage':
-      if (typeof dto.sourcePassageId !== 'string' || typeof dto.sourceVersion !== 'number') return err('block: bad passage provenance');
+      if (typeof dto.sourcePassageId !== 'string' || typeof dto.sourceVersion !== 'number')
+        return err('block: bad passage provenance');
       return ok({
         type: 'passage',
         blockId: dto.blockId,
@@ -133,7 +152,11 @@ function parseBlock(dto: LetterBlockDto): Result<string, LetterBlock> {
 }
 
 function parseSection(dto: LetterSectionDto): Result<string, LetterSection> {
-  if (typeof dto.sectionKey !== 'string' || typeof dto.title !== 'string' || typeof dto.required !== 'boolean') {
+  if (
+    typeof dto.sectionKey !== 'string' ||
+    typeof dto.title !== 'string' ||
+    typeof dto.required !== 'boolean'
+  ) {
     return err('section: bad shape');
   }
   const blocks: LetterBlock[] = [];
@@ -142,11 +165,21 @@ function parseSection(dto: LetterSectionDto): Result<string, LetterSection> {
     if (!parsed.ok) return parsed;
     blocks.push(parsed.value);
   }
-  return ok({ sectionKey: dto.sectionKey, title: dto.title, required: dto.required, locked: dto.locked ?? false, blocks });
+  return ok({
+    sectionKey: dto.sectionKey,
+    title: dto.title,
+    required: dto.required,
+    locked: dto.locked ?? false,
+    blocks,
+  });
 }
 
 function parsePlaceholderDef(dto: PlaceholderDefDto): Result<string, PlaceholderDef> {
-  if (typeof dto.key !== 'string' || typeof dto.label !== 'string' || typeof dto.autoResolvable !== 'boolean') {
+  if (
+    typeof dto.key !== 'string' ||
+    typeof dto.label !== 'string' ||
+    typeof dto.autoResolvable !== 'boolean'
+  ) {
     return err('placeholder: bad shape');
   }
   return ok({
@@ -163,14 +196,26 @@ export function parseStatus(dto: BriefStatusDto | undefined): Result<string, Bri
     case 'draft':
       return ok({ tag: 'draft' });
     case 'submitted':
-      if (typeof dto.submittedBy !== 'string' || typeof dto.submittedAt !== 'string') return err('status: bad submitted');
+      if (typeof dto.submittedBy !== 'string' || typeof dto.submittedAt !== 'string')
+        return err('status: bad submitted');
       return ok({ tag: 'submitted', submittedBy: dto.submittedBy, submittedAt: dto.submittedAt });
     case 'approved':
-      if (typeof dto.approvedBy !== 'string' || typeof dto.approvedAt !== 'string') return err('status: bad approved');
+      if (typeof dto.approvedBy !== 'string' || typeof dto.approvedAt !== 'string')
+        return err('status: bad approved');
       return ok({ tag: 'approved', approvedBy: dto.approvedBy, approvedAt: dto.approvedAt });
     case 'rejected':
-      if (typeof dto.rejectedBy !== 'string' || typeof dto.rejectedAt !== 'string' || typeof dto.comments !== 'string') return err('status: bad rejected');
-      return ok({ tag: 'rejected', rejectedBy: dto.rejectedBy, rejectedAt: dto.rejectedAt, comments: dto.comments });
+      if (
+        typeof dto.rejectedBy !== 'string' ||
+        typeof dto.rejectedAt !== 'string' ||
+        typeof dto.comments !== 'string'
+      )
+        return err('status: bad rejected');
+      return ok({
+        tag: 'rejected',
+        rejectedBy: dto.rejectedBy,
+        rejectedAt: dto.rejectedAt,
+        comments: dto.comments,
+      });
     case 'sent':
       if (typeof dto.sentAt !== 'string') return err('status: bad sent');
       return ok({ tag: 'sent', sentAt: dto.sentAt });
@@ -180,8 +225,14 @@ export function parseStatus(dto: BriefStatusDto | undefined): Result<string, Bri
 }
 
 function parsePassage(dto: LibraryPassageDto): Result<string, LibraryPassage> {
-  if (typeof dto.passageId !== 'string' || (dto.scope !== 'global' && dto.scope !== 'beroep')) return err('passage: bad shape');
-  if (typeof dto.sectionKey !== 'string' || typeof dto.label !== 'string' || typeof dto.version !== 'number') return err('passage: bad shape');
+  if (typeof dto.passageId !== 'string' || (dto.scope !== 'global' && dto.scope !== 'beroep'))
+    return err('passage: bad shape');
+  if (
+    typeof dto.sectionKey !== 'string' ||
+    typeof dto.label !== 'string' ||
+    typeof dto.version !== 'number'
+  )
+    return err('passage: bad shape');
   const content = parseBlockContent(dto.content);
   if (!content.ok) return content;
   return ok({
@@ -196,7 +247,12 @@ function parsePassage(dto: LibraryPassageDto): Result<string, LibraryPassage> {
 }
 
 export function parseBrief(dto: BriefDto): Result<string, Brief> {
-  if (typeof dto.briefId !== 'string' || typeof dto.drafterId !== 'string' || typeof dto.beroep !== 'string' || typeof dto.templateId !== 'string') {
+  if (
+    typeof dto.briefId !== 'string' ||
+    typeof dto.drafterId !== 'string' ||
+    typeof dto.beroep !== 'string' ||
+    typeof dto.templateId !== 'string'
+  ) {
     return err('brief: missing ids');
   }
   const status = parseStatus(dto.status);
@@ -252,15 +308,33 @@ function nodeToDto(n: RichTextNode): RichTextNodeDto {
 }
 
 function contentToDto(content: RichTextBlock): RichTextBlockDto {
-  return { paragraphs: content.paragraphs.map((p) => ({ nodes: p.nodes.map(nodeToDto), ...(p.list ? { list: p.list } : {}) })) };
+  return {
+    paragraphs: content.paragraphs.map((p) => ({
+      nodes: p.nodes.map(nodeToDto),
+      ...(p.list ? { list: p.list } : {}),
+    })),
+  };
 }
 
 function blockToDto(b: LetterBlock): LetterBlockDto {
   return b.type === 'passage'
-    ? { type: 'passage', blockId: b.blockId, content: contentToDto(b.content), sourcePassageId: b.sourcePassageId, sourceVersion: b.sourceVersion, edited: b.edited }
+    ? {
+        type: 'passage',
+        blockId: b.blockId,
+        content: contentToDto(b.content),
+        sourcePassageId: b.sourcePassageId,
+        sourceVersion: b.sourceVersion,
+        edited: b.edited,
+      }
     : { type: 'freeText', blockId: b.blockId, content: contentToDto(b.content) };
 }
 
 function sectionToDto(s: LetterSection): LetterSectionDto {
-  return { sectionKey: s.sectionKey, title: s.title, required: s.required, locked: s.locked, blocks: s.blocks.map(blockToDto) };
+  return {
+    sectionKey: s.sectionKey,
+    title: s.title,
+    required: s.required,
+    locked: s.locked,
+    blocks: s.blocks.map(blockToDto),
+  };
 }

src/app/brief/ui/brief.page.ts

@@ -11,20 +11,38 @@ import { LetterComposerComponent } from '@brief/ui/letter-composer/letter-compos
     this just wires signals to the organism and events back to store commands. */
 @Component({
   selector: 'app-brief-page',
-  imports: [PageShellComponent, SpinnerComponent, AlertComponent, ButtonComponent, LetterComposerComponent],
-  styles: [`
-    .brief-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--rhc-space-max-md);margin-block-end:var(--rhc-space-max-lg)}
-    .save{color:var(--rhc-color-foreground-subtle);font-size:0.9em}
-  `],
+  imports: [
+    PageShellComponent,
+    SpinnerComponent,
+    AlertComponent,
+    ButtonComponent,
+    LetterComposerComponent,
+  ],
+  styles: [
+    `
+      .brief-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--rhc-space-max-md);
+        margin-block-end: var(--rhc-space-max-lg);
+      }
+      .save {
+        color: var(--rhc-color-foreground-subtle);
+        font-size: 0.9em;
+      }
+    `,
+  ],
   template: `
-    <app-page-shell
-      [heading]="heading"
-      [intro]="intro"
-      backLink="/dashboard">
-      @if (lastError(); as err) { <app-alert type="error">{{ err }}</app-alert> }
+    <app-page-shell [heading]="heading" [intro]="intro" backLink="/dashboard">
+      @if (lastError(); as err) {
+        <app-alert type="error">{{ err }}</app-alert>
+      }
 
       @switch (model().tag) {
-        @case ('loading') { <app-spinner /> }
+        @case ('loading') {
+          <app-spinner />
+        }
         @case ('failed') {
           <app-alert type="error">{{ failedText }}</app-alert>
           <app-button variant="secondary" (click)="reload()">{{ retryText }}</app-button>
@@ -32,7 +50,9 @@ import { LetterComposerComponent } from '@brief/ui/letter-composer/letter-compos
         @case ('loaded') {
           <div class="brief-toolbar">
             <span class="save" role="status" aria-live="polite">{{ saveText() }}</span>
-            <app-button variant="subtle" [disabled]="store.busy()" (click)="resetDemo()">{{ resetLabel }}</app-button>
+            <app-button variant="subtle" [disabled]="store.busy()" (click)="resetDemo()">{{
+              resetLabel
+            }}</app-button>
           </div>
           <app-letter-composer
             [brief]="brief()!"
@@ -46,7 +66,8 @@ import { LetterComposerComponent } from '@brief/ui/letter-composer/letter-compos
             (submit)="store.submit()"
             (approve)="store.approve()"
             (reject)="store.reject($event)"
-            (send)="store.send()" />
+            (send)="store.send()"
+          />
         }
       }
     </app-page-shell>
@@ -70,10 +91,14 @@ export class BriefPage {
   /** Debounced-save state, surfaced in a polite live region. */
   protected saveText = computed(() => {
     switch (this.store.saveState()) {
-      case 'saving': return this.savingText;
-      case 'saved': return this.savedText;
-      case 'error': return this.saveErrorText;
-      default: return '';
+      case 'saving':
+        return this.savingText;
+      case 'saved':
+        return this.savedText;
+      case 'error':
+        return this.saveErrorText;
+      default:
+        return '';
     }
   });
 

src/app/brief/ui/diagnostics-panel/diagnostics-panel.component.ts

@@ -8,17 +8,38 @@ import { Diagnostic } from '@brief/domain/placeholders';
 @Component({
   selector: 'app-diagnostics-panel',
   imports: [AlertComponent],
-  styles: [`
-    :host{display:block}
-    ul{margin:0;padding-inline-start:1.1rem;display:grid;gap:0.15rem}
-    button{background:none;border:0;padding:0;color:var(--rhc-color-foreground-link);cursor:pointer;text-align:start;text-decoration:underline}
-  `],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      ul {
+        margin: 0;
+        padding-inline-start: 1.1rem;
+        display: grid;
+        gap: 0.15rem;
+      }
+      button {
+        background: none;
+        border: 0;
+        padding: 0;
+        color: var(--rhc-color-foreground-link);
+        cursor: pointer;
+        text-align: start;
+        text-decoration: underline;
+      }
+    `,
+  ],
   template: `
     @if (errors().length) {
       <app-alert type="error">
         <strong>{{ errorsTitle() }}</strong>
         <ul>
-          @for (d of errors(); track $index) { <li><button type="button" (click)="locate.emit(d)">{{ d.message }}</button></li> }
+          @for (d of errors(); track $index) {
+            <li>
+              <button type="button" (click)="locate.emit(d)">{{ d.message }}</button>
+            </li>
+          }
         </ul>
       </app-alert>
     }
@@ -26,7 +47,11 @@ import { Diagnostic } from '@brief/domain/placeholders';
       <app-alert type="warning">
         <strong>{{ warningsTitle() }}</strong>
         <ul>
-          @for (d of warnings(); track $index) { <li><button type="button" (click)="locate.emit(d)">{{ d.message }}</button></li> }
+          @for (d of warnings(); track $index) {
+            <li>
+              <button type="button" (click)="locate.emit(d)">{{ d.message }}</button>
+            </li>
+          }
         </ul>
       </app-alert>
     }

src/app/brief/ui/letter-block/letter-block.component.ts

@@ -1,6 +1,9 @@
 import { Component, computed, input, output } from '@angular/core';
 import { RichTextBlock } from '@shared/kernel/rich-text';
-import { RichTextEditorComponent, PlaceholderOption } from '@shared/ui/rich-text-editor/rich-text-editor.component';
+import {
+  RichTextEditorComponent,
+  PlaceholderOption,
+} from '@shared/ui/rich-text-editor/rich-text-editor.component';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { LetterBlock } from '@brief/domain/brief';
 
@@ -9,21 +12,43 @@ import { LetterBlock } from '@brief/domain/brief';
 @Component({
   selector: 'app-letter-block',
   imports: [RichTextEditorComponent, ButtonComponent],
-  styles: [`
-    :host{display:block}
-    .block{border-inline-start:var(--rhc-border-width-lg) solid var(--rhc-color-border-subtle);padding-inline-start:var(--rhc-space-max-md)}
-    .meta{display:flex;justify-content:space-between;align-items:center;gap:var(--rhc-space-max-md);margin-block-end:var(--rhc-space-max-sm)}
-    .controls{display:flex;gap:var(--rhc-space-max-sm)}
-  `],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .block {
+        border-inline-start: var(--rhc-border-width-lg) solid var(--rhc-color-border-subtle);
+        padding-inline-start: var(--rhc-space-max-md);
+      }
+      .meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--rhc-space-max-md);
+        margin-block-end: var(--rhc-space-max-sm);
+      }
+      .controls {
+        display: flex;
+        gap: var(--rhc-space-max-sm);
+      }
+    `,
+  ],
   template: `
     <div class="block">
       <div class="meta">
         <span class="app-text-subtle">{{ provenance() }}</span>
         @if (editable()) {
           <span class="controls">
-            <app-button variant="subtle" (click)="moved.emit(-1)" i18n="@@brief.block.moveUp">Omhoog</app-button>
-            <app-button variant="subtle" (click)="moved.emit(1)" i18n="@@brief.block.moveDown">Omlaag</app-button>
-            <app-button variant="subtle" (click)="removed.emit()" i18n="@@brief.block.remove">Verwijderen</app-button>
+            <app-button variant="subtle" (click)="moved.emit(-1)" i18n="@@brief.block.moveUp"
+              >Omhoog</app-button
+            >
+            <app-button variant="subtle" (click)="moved.emit(1)" i18n="@@brief.block.moveDown"
+              >Omlaag</app-button
+            >
+            <app-button variant="subtle" (click)="removed.emit()" i18n="@@brief.block.remove"
+              >Verwijderen</app-button
+            >
           </span>
         }
       </div>
@@ -31,7 +56,8 @@ import { LetterBlock } from '@brief/domain/brief';
         [content]="block().content"
         [placeholders]="placeholders()"
         [editable]="editable()"
-        (contentChanged)="contentChanged.emit($event)" />
+        (contentChanged)="contentChanged.emit($event)"
+      />
     </div>
   `,
 })

src/app/brief/ui/letter-composer/letter-composer.component.ts

@@ -19,16 +19,44 @@ import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejecti
 @Component({
   selector: 'app-letter-composer',
   imports: [
-    HeadingComponent, StatusBadgeComponent, ButtonComponent, AlertComponent,
-    LetterSectionComponent, LetterPreviewComponent, DiagnosticsPanelComponent, RejectionCommentsComponent,
+    HeadingComponent,
+    StatusBadgeComponent,
+    ButtonComponent,
+    AlertComponent,
+    LetterSectionComponent,
+    LetterPreviewComponent,
+    DiagnosticsPanelComponent,
+    RejectionCommentsComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .head {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--rhc-space-max-md);
+        flex-wrap: wrap;
+        margin-block-end: var(--rhc-space-max-lg);
+      }
+      .sections {
+        display: grid;
+        gap: var(--rhc-space-max-2xl);
+      }
+      .panel {
+        margin-block: var(--rhc-space-max-xl);
+      }
+      .bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--rhc-space-max-md);
+        align-items: center;
+        margin-block-start: var(--rhc-space-max-xl);
+      }
+    `,
   ],
-  styles: [`
-    :host{display:block}
-    .head{display:flex;justify-content:space-between;align-items:center;gap:var(--rhc-space-max-md);flex-wrap:wrap;margin-block-end:var(--rhc-space-max-lg)}
-    .sections{display:grid;gap:var(--rhc-space-max-2xl)}
-    .panel{margin-block:var(--rhc-space-max-xl)}
-    .bar{display:flex;flex-wrap:wrap;gap:var(--rhc-space-max-md);align-items:center;margin-block-start:var(--rhc-space-max-xl)}
-  `],
   template: `
     <div class="head">
       <app-heading [level]="2">{{ title() }}</app-heading>
@@ -47,7 +75,8 @@ import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejecti
             [availablePassages]="availablePassages()"
             [placeholders]="menu()"
             [editable]="!section.locked"
-            (edit)="edit.emit($event)" />
+            (edit)="edit.emit($event)"
+          />
         }
       </div>
     } @else {
@@ -62,25 +91,41 @@ import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejecti
       @switch (status()) {
         @case ('draft') {
           @if (editable()) {
-            <app-button variant="primary" [disabled]="!canSubmit() || busy()" (click)="submit.emit()">{{ submitLabel() }}</app-button>
-            @if (!canSubmit()) { <span class="app-text-subtle">{{ submitHint() }}</span> }
+            <app-button
+              variant="primary"
+              [disabled]="!canSubmit() || busy()"
+              (click)="submit.emit()"
+              >{{ submitLabel() }}</app-button
+            >
+            @if (!canSubmit()) {
+              <span class="app-text-subtle">{{ submitHint() }}</span>
+            }
           }
         }
         @case ('rejected') {
           @if (editable()) {
-            <app-button variant="primary" [disabled]="!canSubmit() || busy()" (click)="submit.emit()">{{ resubmitLabel() }}</app-button>
+            <app-button
+              variant="primary"
+              [disabled]="!canSubmit() || busy()"
+              (click)="submit.emit()"
+              >{{ resubmitLabel() }}</app-button
+            >
           }
         }
         @case ('submitted') {
           @if (role() === 'approver') {
-            <app-button variant="primary" [disabled]="busy()" (click)="approve.emit()">{{ approveLabel() }}</app-button>
+            <app-button variant="primary" [disabled]="busy()" (click)="approve.emit()">{{
+              approveLabel()
+            }}</app-button>
             <app-rejection-comments mode="entry" [busy]="busy()" (reject)="reject.emit($event)" />
           } @else {
             <app-alert type="info">{{ awaitingText() }}</app-alert>
           }
         }
         @case ('approved') {
-          <app-button variant="primary" [disabled]="busy()" (click)="send.emit()">{{ sendLabel() }}</app-button>
+          <app-button variant="primary" [disabled]="busy()" (click)="send.emit()">{{
+            sendLabel()
+          }}</app-button>
         }
         @case ('sent') {
           <app-alert type="ok">{{ sentText() }}</app-alert>
@@ -108,10 +153,14 @@ export class LetterComposerComponent {
   title = input($localize`:@@brief.title:Brief aan de zorgverlener`);
   submitLabel = input($localize`:@@brief.submit:Indienen ter beoordeling`);
   resubmitLabel = input($localize`:@@brief.resubmit:Opnieuw indienen`);
-  submitHint = input($localize`:@@brief.submitHint:Vul eerst alle verplichte secties en los fouten op.`);
+  submitHint = input(
+    $localize`:@@brief.submitHint:Vul eerst alle verplichte secties en los fouten op.`,
+  );
   approveLabel = input($localize`:@@brief.approve:Goedkeuren`);
   sendLabel = input($localize`:@@brief.send:Versturen`);
-  awaitingText = input($localize`:@@brief.awaiting:De brief wacht op beoordeling door een collega.`);
+  awaitingText = input(
+    $localize`:@@brief.awaiting:De brief wacht op beoordeling door een collega.`,
+  );
   sentText = input($localize`:@@brief.sent:De brief is verzonden.`);
 
   protected status = computed(() => this.brief().status.tag);
@@ -130,21 +179,30 @@ export class LetterComposerComponent {
 
   protected statusLabel = computed(() => {
     switch (this.status()) {
-      case 'draft': return $localize`:@@brief.status.draft:Concept`;
-      case 'submitted': return $localize`:@@brief.status.submitted:Ter beoordeling`;
-      case 'approved': return $localize`:@@brief.status.approved:Goedgekeurd`;
-      case 'rejected': return $localize`:@@brief.status.rejected:Afgewezen`;
-      case 'sent': return $localize`:@@brief.status.sent:Verzonden`;
+      case 'draft':
+        return $localize`:@@brief.status.draft:Concept`;
+      case 'submitted':
+        return $localize`:@@brief.status.submitted:Ter beoordeling`;
+      case 'approved':
+        return $localize`:@@brief.status.approved:Goedgekeurd`;
+      case 'rejected':
+        return $localize`:@@brief.status.rejected:Afgewezen`;
+      case 'sent':
+        return $localize`:@@brief.status.sent:Verzonden`;
     }
   });
 
   protected statusColor = computed(() => {
     switch (this.status()) {
-      case 'draft': return 'var(--rhc-color-border-strong)';
-      case 'submitted': return 'var(--rhc-color-oranje-500)';
+      case 'draft':
+        return 'var(--rhc-color-border-strong)';
+      case 'submitted':
+        return 'var(--rhc-color-oranje-500)';
       case 'approved':
-      case 'sent': return 'var(--rhc-color-groen-500)';
-      case 'rejected': return 'var(--rhc-color-rood-500)';
+      case 'sent':
+        return 'var(--rhc-color-groen-500)';
+      case 'rejected':
+        return 'var(--rhc-color-rood-500)';
     }
   });
 }

src/app/brief/ui/letter-composer/letter-composer.stories.ts

@@ -4,8 +4,33 @@ import { Brief, BriefStatus, LibraryPassage } from '@brief/domain/brief';
 import { allDiagnostics } from '@brief/domain/brief';
 
 const passages: LibraryPassage[] = [
-  { passageId: 'p1', scope: 'global', sectionKey: 'aanhef', label: 'Standaard aanhef', version: 1, content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Geachte heer/mevrouw ' }, { type: 'placeholder', key: 'naam_zorgverlener' }, { type: 'text', text: ',' }] }] } },
-  { passageId: 'p2', scope: 'beroep', beroep: 'arts', sectionKey: 'kern', label: 'Toelichting arts', version: 1, content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Als arts ...' }] }] } },
+  {
+    passageId: 'p1',
+    scope: 'global',
+    sectionKey: 'aanhef',
+    label: 'Standaard aanhef',
+    version: 1,
+    content: {
+      paragraphs: [
+        {
+          nodes: [
+            { type: 'text', text: 'Geachte heer/mevrouw ' },
+            { type: 'placeholder', key: 'naam_zorgverlener' },
+            { type: 'text', text: ',' },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    passageId: 'p2',
+    scope: 'beroep',
+    beroep: 'arts',
+    sectionKey: 'kern',
+    label: 'Toelichting arts',
+    version: 1,
+    content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Als arts ...' }] }] },
+  },
 ];
 
 function brief(status: BriefStatus): Brief {
@@ -25,22 +50,69 @@ function brief(status: BriefStatus): Brief {
         title: 'Aanhef',
         required: true,
         locked: true,
-        blocks: [{ type: 'passage', blockId: 'local-1', sourcePassageId: 'p1', sourceVersion: 1, edited: false, content: passages[0].content }],
+        blocks: [
+          {
+            type: 'passage',
+            blockId: 'local-1',
+            sourcePassageId: 'p1',
+            sourceVersion: 1,
+            edited: false,
+            content: passages[0].content,
+          },
+        ],
       },
       {
         sectionKey: 'kern',
         title: 'Kern van het besluit',
         required: true,
         locked: false,
-        blocks: [{ type: 'freeText', blockId: 'local-2', content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Wij hebben besloten om reden ' }, { type: 'placeholder', key: 'reden_besluit' }, { type: 'text', text: '.' }] }] } }],
+        blocks: [
+          {
+            type: 'freeText',
+            blockId: 'local-2',
+            content: {
+              paragraphs: [
+                {
+                  nodes: [
+                    { type: 'text', text: 'Wij hebben besloten om reden ' },
+                    { type: 'placeholder', key: 'reden_besluit' },
+                    { type: 'text', text: '.' },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+      {
+        sectionKey: 'slot',
+        title: 'Slot',
+        required: false,
+        locked: true,
+        blocks: [
+          {
+            type: 'freeText',
+            blockId: 'local-3',
+            content: {
+              paragraphs: [{ nodes: [{ type: 'text', text: 'Met vriendelijke groet,' }] }],
+            },
+          },
+        ],
       },
-      { sectionKey: 'slot', title: 'Slot', required: false, locked: true, blocks: [{ type: 'freeText', blockId: 'local-3', content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Met vriendelijke groet,' }] }] } }] },
     ],
   };
 }
 
 const render = (b: Brief, editable: boolean, role: 'drafter' | 'approver') => ({
-  props: { brief: b, availablePassages: passages, diagnostics: allDiagnostics(b), editable, role, canSubmit: true, busy: false },
+  props: {
+    brief: b,
+    availablePassages: passages,
+    diagnostics: allDiagnostics(b),
+    editable,
+    role,
+    canSubmit: true,
+    busy: false,
+  },
   template: `<app-letter-composer [brief]="brief" [availablePassages]="availablePassages" [diagnostics]="diagnostics"
     [editable]="editable" [role]="role" [canSubmit]="canSubmit" [busy]="busy"></app-letter-composer>`,
 });
@@ -52,7 +124,30 @@ const meta: Meta<LetterComposerComponent> = {
 export default meta;
 type Story = StoryObj<LetterComposerComponent>;
 
-export const DraftDrafter: Story = { render: () => render(brief({ tag: 'draft' }), true, 'drafter') };
-export const SubmittedApprover: Story = { render: () => render(brief({ tag: 'submitted', submittedBy: 'demo-drafter', submittedAt: '2026-07-01' }), false, 'approver') };
-export const Rejected: Story = { render: () => render(brief({ tag: 'rejected', rejectedBy: 'demo-approver', rejectedAt: '2026-07-01', comments: 'Graag de aanhef formeler.' }), true, 'drafter') };
-export const Sent: Story = { render: () => render(brief({ tag: 'sent', sentAt: '2026-07-01' }), false, 'drafter') };
+export const DraftDrafter: Story = {
+  render: () => render(brief({ tag: 'draft' }), true, 'drafter'),
+};
+export const SubmittedApprover: Story = {
+  render: () =>
+    render(
+      brief({ tag: 'submitted', submittedBy: 'demo-drafter', submittedAt: '2026-07-01' }),
+      false,
+      'approver',
+    ),
+};
+export const Rejected: Story = {
+  render: () =>
+    render(
+      brief({
+        tag: 'rejected',
+        rejectedBy: 'demo-approver',
+        rejectedAt: '2026-07-01',
+        comments: 'Graag de aanhef formeler.',
+      }),
+      true,
+      'drafter',
+    ),
+};
+export const Sent: Story = {
+  render: () => render(brief({ tag: 'sent', sentAt: '2026-07-01' }), false, 'drafter'),
+};

src/app/brief/ui/letter-preview/letter-preview.component.ts

@@ -8,7 +8,10 @@ import { Brief, LetterBlock } from '@brief/domain/brief';
 import { Diagnostic } from '@brief/domain/placeholders';
 
 /** A run of consecutive lines to render together: a list (bullet/number) or a single plain line. */
-type PreviewSegment = { readonly list: 'bullet' | 'number' | null; readonly items: readonly Paragraph[] };
+type PreviewSegment = {
+  readonly list: 'bullet' | 'number' | null;
+  readonly items: readonly Paragraph[];
+};
 
 function groupParagraphs(paras: readonly Paragraph[]): PreviewSegment[] {
   const out: { list: 'bullet' | 'number' | null; items: Paragraph[] }[] = [];
@@ -34,25 +37,54 @@ const SAMPLE_VALUES: Record<string, string> = {
 @Component({
   selector: 'app-letter-preview',
   imports: [NgTemplateOutlet, HeadingComponent, ButtonComponent, PlaceholderChipComponent],
-  styles: [`
-    :host{display:block}
-    .toolbar{display:flex;justify-content:flex-end;margin-block-end:var(--rhc-space-max-sm)}
-    .letter{background:var(--rhc-color-wit);border:var(--rhc-border-width-sm) solid var(--rhc-color-border-default);border-radius:var(--rhc-border-radius-md);padding:var(--rhc-space-max-2xl)}
-    section{margin-block-end:var(--rhc-space-max-xl)}
-    p{margin:0 0 var(--rhc-space-max-sm)}
-    ul,ol{margin:0 0 var(--rhc-space-max-sm);padding-inline-start:1.4em}
-  `],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .toolbar {
+        display: flex;
+        justify-content: flex-end;
+        margin-block-end: var(--rhc-space-max-sm);
+      }
+      .letter {
+        background: var(--rhc-color-wit);
+        border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
+        border-radius: var(--rhc-border-radius-md);
+        padding: var(--rhc-space-max-2xl);
+      }
+      section {
+        margin-block-end: var(--rhc-space-max-xl);
+      }
+      p {
+        margin: 0 0 var(--rhc-space-max-sm);
+      }
+      ul,
+      ol {
+        margin: 0 0 var(--rhc-space-max-sm);
+        padding-inline-start: 1.4em;
+      }
+    `,
+  ],
   template: `
     <ng-template #line let-nodes>
       @for (node of nodes; track $index) {
         @switch (node.type) {
-          @case ('text') { <span>{{ node.text }}</span> }
-          @case ('lineBreak') { <br> }
+          @case ('text') {
+            <span>{{ node.text }}</span>
+          }
+          @case ('lineBreak') {
+            <br />
+          }
           @case ('placeholder') {
             @if (showSample() && autoFor(node.key)) {
               <span>{{ sampleFor(node.key) }}</span>
             } @else {
-              <app-placeholder-chip [label]="labelFor(node.key)" [autoResolvable]="autoFor(node.key)" [state]="stateFor(node.key)" />
+              <app-placeholder-chip
+                [label]="labelFor(node.key)"
+                [autoResolvable]="autoFor(node.key)"
+                [state]="stateFor(node.key)"
+              />
             }
           }
         }
@@ -60,7 +92,11 @@ const SAMPLE_VALUES: Record<string, string> = {
     </ng-template>
 
     <div class="toolbar">
-      <app-button variant="subtle" (click)="showSample.set(!showSample())" [attr.aria-pressed]="showSample()">
+      <app-button
+        variant="subtle"
+        (click)="showSample.set(!showSample())"
+        [attr.aria-pressed]="showSample()"
+      >
         {{ showSample() ? hideSampleLabel() : showSampleLabel() }}
       </app-button>
     </div>
@@ -72,11 +108,34 @@ const SAMPLE_VALUES: Record<string, string> = {
           @for (block of section.blocks; track block.blockId) {
             @for (seg of segmentsOf(block); track $index) {
               @if (seg.list === 'bullet') {
-                <ul>@for (para of seg.items; track $index) { <li><ng-container [ngTemplateOutlet]="line" [ngTemplateOutletContext]="{ $implicit: para.nodes }" /></li>}</ul>
+                <ul>
+                  @for (para of seg.items; track $index) {
+                    <li>
+                      <ng-container
+                        [ngTemplateOutlet]="line"
+                        [ngTemplateOutletContext]="{ $implicit: para.nodes }"
+                      />
+                    </li>
+                  }
+                </ul>
               } @else if (seg.list === 'number') {
-                <ol>@for (para of seg.items; track $index) { <li><ng-container [ngTemplateOutlet]="line" [ngTemplateOutletContext]="{ $implicit: para.nodes }" /></li>}</ol>
+                <ol>
+                  @for (para of seg.items; track $index) {
+                    <li>
+                      <ng-container
+                        [ngTemplateOutlet]="line"
+                        [ngTemplateOutletContext]="{ $implicit: para.nodes }"
+                      />
+                    </li>
+                  }
+                </ol>
               } @else {
-                <p><ng-container [ngTemplateOutlet]="line" [ngTemplateOutletContext]="{ $implicit: seg.items[0].nodes }" /></p>
+                <p>
+                  <ng-container
+                    [ngTemplateOutlet]="line"
+                    [ngTemplateOutletContext]="{ $implicit: seg.items[0].nodes }"
+                  />
+                </p>
               }
             }
           }
@@ -93,7 +152,11 @@ export class LetterPreviewComponent {
   hideSampleLabel = input($localize`:@@brief.preview.hideSample:Testwaarden verbergen`);
 
   protected showSample = signal(false);
-  private today = new Date().toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' });
+  private today = new Date().toLocaleDateString('nl-NL', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
 
   private defs = computed(() => new Map(this.brief().placeholders.map((p) => [p.key, p])));
   private worst = computed(() => {
@@ -110,5 +173,6 @@ export class LetterPreviewComponent {
   protected labelFor = (key: string) => this.defs().get(key)?.label ?? key;
   protected autoFor = (key: string) => this.defs().get(key)?.autoResolvable ?? false;
   protected stateFor = (key: string): 'ok' | 'warning' | 'error' => this.worst().get(key) ?? 'ok';
-  protected sampleFor = (key: string) => SAMPLE_VALUES[key] ?? (key === 'datum' ? this.today : this.labelFor(key));
+  protected sampleFor = (key: string) =>
+    SAMPLE_VALUES[key] ?? (key === 'datum' ? this.today : this.labelFor(key));
 }

src/app/brief/ui/letter-section/letter-section.component.ts

@@ -14,17 +14,36 @@ import { PassagePickerComponent } from '@brief/ui/passage-picker/passage-picker.
 @Component({
   selector: 'app-letter-section',
   imports: [ButtonComponent, HeadingComponent, LetterBlockComponent, PassagePickerComponent],
-  styles: [`
-    :host{display:block}
-    .blocks{display:grid;gap:var(--rhc-space-max-lg);margin-block:var(--rhc-space-max-md)}
-    .actions{display:flex;flex-wrap:wrap;gap:var(--rhc-space-max-sm)}
-    .required{color:var(--rhc-color-foreground-subtle)}
-    .empty{color:var(--rhc-color-foreground-subtle);font-style:italic}
-  `],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .blocks {
+        display: grid;
+        gap: var(--rhc-space-max-lg);
+        margin-block: var(--rhc-space-max-md);
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--rhc-space-max-sm);
+      }
+      .required {
+        color: var(--rhc-color-foreground-subtle);
+      }
+      .empty {
+        color: var(--rhc-color-foreground-subtle);
+        font-style: italic;
+      }
+    `,
+  ],
   template: `
     <app-heading [level]="3">
       {{ section().title }}
-      @if (section().required) { <span class="required">· {{ requiredLabel() }}</span> }
+      @if (section().required) {
+        <span class="required">· {{ requiredLabel() }}</span>
+      }
     </app-heading>
 
     <div class="blocks">
@@ -35,7 +54,8 @@ import { PassagePickerComponent } from '@brief/ui/passage-picker/passage-picker.
           [editable]="editable()"
           (contentChanged)="onContent(block.blockId, $event)"
           (removed)="edit.emit({ tag: 'BlockRemoved', blockId: block.blockId })"
-          (moved)="onMove(block.blockId, $event)" />
+          (moved)="onMove(block.blockId, $event)"
+        />
       } @empty {
         <p class="empty">{{ emptyLabel() }}</p>
       }
@@ -43,8 +63,14 @@ import { PassagePickerComponent } from '@brief/ui/passage-picker/passage-picker.
 
     @if (editable()) {
       <div class="actions">
-        <app-button variant="secondary" (click)="pickerOpen.set(!pickerOpen())">{{ addPassageLabel() }}</app-button>
-        <app-button variant="subtle" (click)="edit.emit({ tag: 'FreeTextBlockAdded', sectionKey: section().sectionKey })">{{ addFreeLabel() }}</app-button>
+        <app-button variant="secondary" (click)="pickerOpen.set(!pickerOpen())">{{
+          addPassageLabel()
+        }}</app-button>
+        <app-button
+          variant="subtle"
+          (click)="edit.emit({ tag: 'FreeTextBlockAdded', sectionKey: section().sectionKey })"
+          >{{ addFreeLabel() }}</app-button
+        >
       </div>
       @if (pickerOpen()) {
         <app-passage-picker [passages]="sectionPassages()" (insert)="onInsert($event)" />
@@ -65,7 +91,9 @@ export class LetterSectionComponent {
   addFreeLabel = input($localize`:@@brief.section.addFree:Vrije tekst toevoegen`);
 
   protected pickerOpen = signal(false);
-  protected sectionPassages = computed(() => this.availablePassages().filter((p) => p.sectionKey === this.section().sectionKey));
+  protected sectionPassages = computed(() =>
+    this.availablePassages().filter((p) => p.sectionKey === this.section().sectionKey),
+  );
 
   protected onContent(blockId: string, content: RichTextBlock) {
     this.edit.emit({ tag: 'BlockContentEdited', blockId, content });

src/app/brief/ui/passage-picker/passage-picker.component.ts

@@ -10,11 +10,26 @@ import { LibraryPassage } from '@brief/domain/brief';
 @Component({
   selector: 'app-passage-picker',
   imports: [FormsModule, CheckboxComponent, ButtonComponent],
-  styles: [`
-    :host{display:block;border:var(--rhc-border-width-sm) solid var(--rhc-color-border-default);border-radius:var(--rhc-border-radius-md);padding:var(--rhc-space-max-md)}
-    ul{list-style:none;margin:0 0 var(--rhc-space-max-md);padding:0;display:grid;gap:var(--rhc-space-max-sm)}
-    .scope{color:var(--rhc-color-foreground-subtle)}
-  `],
+  styles: [
+    `
+      :host {
+        display: block;
+        border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
+        border-radius: var(--rhc-border-radius-md);
+        padding: var(--rhc-space-max-md);
+      }
+      ul {
+        list-style: none;
+        margin: 0 0 var(--rhc-space-max-md);
+        padding: 0;
+        display: grid;
+        gap: var(--rhc-space-max-sm);
+      }
+      .scope {
+        color: var(--rhc-color-foreground-subtle);
+      }
+    `,
+  ],
   template: `
     <ul>
       @for (p of passages(); track p.passageId) {
@@ -22,12 +37,15 @@ import { LibraryPassage } from '@brief/domain/brief';
           <app-checkbox
             [label]="p.label"
             [ngModel]="!!checked()[p.passageId]"
-            (ngModelChange)="set(p.passageId, $event)" />
+            (ngModelChange)="set(p.passageId, $event)"
+          />
           <span class="scope"> · {{ p.scope === 'beroep' ? beroepLabel() : globalLabel() }}</span>
         </li>
       }
     </ul>
-    <app-button variant="secondary" [disabled]="count() === 0" (click)="add()">{{ addLabel() }} ({{ count() }})</app-button>
+    <app-button variant="secondary" [disabled]="count() === 0" (click)="add()"
+      >{{ addLabel() }} ({{ count() }})</app-button
+    >
   `,
 })
 export class PassagePickerComponent {

src/app/brief/ui/rejection-comments/rejection-comments.component.ts

@@ -8,18 +8,33 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
 @Component({
   selector: 'app-rejection-comments',
   imports: [FormsModule, AlertComponent, ButtonComponent],
-  styles: [`
-    :host{display:block}
-    textarea{inline-size:100%;box-sizing:border-box;min-block-size:4rem;margin-block:var(--rhc-space-max-sm)}
-    label{font-weight:600}
-  `],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      textarea {
+        inline-size: 100%;
+        box-sizing: border-box;
+        min-block-size: 4rem;
+        margin-block: var(--rhc-space-max-sm);
+      }
+      label {
+        font-weight: 600;
+      }
+    `,
+  ],
   template: `
     @if (mode() === 'show') {
-      <app-alert type="warning"><strong>{{ rejectedTitle() }}</strong> {{ comments() }}</app-alert>
+      <app-alert type="warning"
+        ><strong>{{ rejectedTitle() }}</strong> {{ comments() }}</app-alert
+      >
     } @else {
       <label for="reject-comments">{{ entryLabel() }}</label>
       <textarea id="reject-comments" [(ngModel)]="draft"></textarea>
-      <app-button variant="danger" [disabled]="!draft().trim() || busy()" (click)="submit()">{{ rejectLabel() }}</app-button>
+      <app-button variant="danger" [disabled]="!draft().trim() || busy()" (click)="submit()">{{
+        rejectLabel()
+      }}</app-button>
     }
   `,
 })

src/app/herregistratie/application/intake-policy.store.ts

@@ -15,5 +15,7 @@ export class IntakePolicyStore {
   private policy = inject(IntakePolicyAdapter);
   private policyRes = this.policy.policyResource();
 
-  readonly scholingThreshold = computed(() => this.policyRes.value()?.scholingThreshold ?? SCHOLING_THRESHOLD_DEFAULT);
+  readonly scholingThreshold = computed(
+    () => this.policyRes.value()?.scholingThreshold ?? SCHOLING_THRESHOLD_DEFAULT,
+  );
 }

src/app/herregistratie/domain/herregistratie.machine.spec.ts

@@ -1,11 +1,38 @@
 import { describe, it, expect } from 'vitest';
 import { ok, err } from '@shared/kernel/fp';
 import { initialUpload } from '@shared/upload/upload.machine';
-import { initial, next, back, gaNaarStap, submit, resolve, reduce, WizardState } from './herregistratie.machine';
+import {
+  initial,
+  next,
+  back,
+  gaNaarStap,
+  submit,
+  resolve,
+  reduce,
+  WizardState,
+} from './herregistratie.machine';
 
-const editing1 = (uren: string, jaren = '5', punten = ''): WizardState => ({ tag: 'Editing', step: 1, draft: { uren, jaren, punten }, errors: {}, upload: initialUpload });
-const editing2 = (uren: string, punten: string, jaren = '5'): WizardState => ({ tag: 'Editing', step: 2, draft: { uren, jaren, punten }, errors: {}, upload: initialUpload });
-const editing3 = (uren: string, punten: string, jaren = '5'): WizardState => ({ tag: 'Editing', step: 3, draft: { uren, jaren, punten }, errors: {}, upload: initialUpload });
+const editing1 = (uren: string, jaren = '5', punten = ''): WizardState => ({
+  tag: 'Editing',
+  step: 1,
+  draft: { uren, jaren, punten },
+  errors: {},
+  upload: initialUpload,
+});
+const editing2 = (uren: string, punten: string, jaren = '5'): WizardState => ({
+  tag: 'Editing',
+  step: 2,
+  draft: { uren, jaren, punten },
+  errors: {},
+  upload: initialUpload,
+});
+const editing3 = (uren: string, punten: string, jaren = '5'): WizardState => ({
+  tag: 'Editing',
+  step: 3,
+  draft: { uren, jaren, punten },
+  errors: {},
+  upload: initialUpload,
+});
 
 describe('wizard.machine', () => {
   it('next advances only when step 1 parses', () => {
@@ -76,19 +103,37 @@ describe('reduce (message-driven)', () => {
   });
 
   it('blocks submit until required documents are satisfied', () => {
-    const cat = { categoryId: 'bewijs', label: 'Bewijs', description: '', required: true, acceptedTypes: [], maxSizeMb: 10, multiple: false, allowPostDelivery: true };
-    let s = reduce(editing3('4160', '200'), { tag: 'Upload', msg: { type: 'CategoriesLoaded', categories: [cat] } });
+    const cat = {
+      categoryId: 'bewijs',
+      label: 'Bewijs',
+      description: '',
+      required: true,
+      acceptedTypes: [],
+      maxSizeMb: 10,
+      multiple: false,
+      allowPostDelivery: true,
+    };
+    let s = reduce(editing3('4160', '200'), {
+      tag: 'Upload',
+      msg: { type: 'CategoriesLoaded', categories: [cat] },
+    });
     s = reduce(s, { tag: 'Submit' });
     expect(s.tag).toBe('Editing');
     expect((s as any).errors.documenten).toBeTruthy();
-    s = reduce(s, { tag: 'Upload', msg: { type: 'DeliveryChannelChanged', categoryId: 'bewijs', channel: 'post' } });
+    s = reduce(s, {
+      tag: 'Upload',
+      msg: { type: 'DeliveryChannelChanged', categoryId: 'bewijs', channel: 'post' },
+    });
     s = reduce(s, { tag: 'Submit' });
     expect(s.tag).toBe('Submitting');
     expect((s as any).data.documents).toEqual([{ categoryId: 'bewijs', channel: 'post' }]);
   });
 
   it('SubmitFailed then Retry returns to Submitting with the same data', () => {
-    let s = reduce(reduce(editing3('4160', '200'), { tag: 'Submit' }), { tag: 'SubmitFailed', error: 'boom' });
+    let s = reduce(reduce(editing3('4160', '200'), { tag: 'Submit' }), {
+      tag: 'SubmitFailed',
+      error: 'boom',
+    });
     expect(s.tag).toBe('Failed');
     s = reduce(s, { tag: 'Retry' });
     expect(s.tag).toBe('Submitting');

src/app/herregistratie/domain/herregistratie.machine.ts

@@ -38,11 +38,23 @@ export type WizardState =
   | { tag: 'Submitted'; data: Valid }
   | { tag: 'Failed'; data: Valid; error: string };
 
-export const initial: WizardState = { tag: 'Editing', step: 1, draft: { uren: '', jaren: '', punten: '' }, errors: {}, upload: initialUpload };
+export const initial: WizardState = {
+  tag: 'Editing',
+  step: 1,
+  draft: { uren: '', jaren: '', punten: '' },
+  errors: {},
+  upload: initialUpload,
+};
 
 /** Has the user meaningfully started, so it's worth persisting as a Concept? */
 export function hasProgress(s: Extract<WizardState, { tag: 'Editing' }>): boolean {
-  return s.step > 1 || !!s.draft.uren || !!s.draft.jaren || !!s.draft.punten || deliveryRefs(s.upload).some((r) => r.channel === 'digital' && !!r.documentId);
+  return (
+    s.step > 1 ||
+    !!s.draft.uren ||
+    !!s.draft.jaren ||
+    !!s.draft.punten ||
+    deliveryRefs(s.upload).some((r) => r.channel === 'digital' && !!r.documentId)
+  );
 }
 
 /** Parse every field; on success hand back a Valid, else the per-field errors. */
@@ -58,7 +70,15 @@ function validate(draft: Draft, upload: UploadState): Result<StepErrors, Valid>
     errors.documenten = $localize`:@@validation.documenten:Lever de verplichte documenten aan (upload of kies "per post nasturen").`;
   }
   if (uren.ok && jaren.ok && punten.ok && !errors.documenten) {
-    return { ok: true, value: { uren: uren.value, jaren: jaren.value, punten: punten.value, documents: deliveryRefs(upload) } };
+    return {
+      ok: true,
+      value: {
+        uren: uren.value,
+        jaren: jaren.value,
+        punten: punten.value,
+        documents: deliveryRefs(upload),
+      },
+    };
   }
   return { ok: false, error: errors };
 }
@@ -110,7 +130,9 @@ export function upload(s: WizardState, msg: UploadMsg): WizardState {
 /** Resolve the async submit. Only meaningful while Submitting. */
 export function resolve(s: WizardState, r: Result<string, void>): WizardState {
   if (s.tag !== 'Submitting') return s;
-  return r.ok ? { tag: 'Submitted', data: s.data } : { tag: 'Failed', data: s.data, error: r.error };
+  return r.ok
+    ? { tag: 'Submitted', data: s.data }
+    : { tag: 'Failed', data: s.data, error: r.error };
 }
 
 /** Update one draft field while editing; ignored in any other state. */

src/app/herregistratie/domain/intake.machine.spec.ts

@@ -15,7 +15,13 @@ import {
   IntakeState,
 } from './intake.machine';
 
-const answering = (answers: Answers, cursor = 0, scholingThreshold = 1000): IntakeState => ({ tag: 'Answering', answers, cursor, errors: {}, scholingThreshold });
+const answering = (answers: Answers, cursor = 0, scholingThreshold = 1000): IntakeState => ({
+  tag: 'Answering',
+  answers,
+  cursor,
+  errors: {},
+  scholingThreshold,
+});
 
 describe('STEPS (fixed) and inline questions', () => {
   it('always has the same three steps', () => {
@@ -40,7 +46,9 @@ describe('STEPS (fixed) and inline questions', () => {
     expect(lageUren({ uren: '1500' }, 1000)).toBe(false);
     expect(lageUren({ uren: '1500' }, 2000)).toBe(true);
     // And the threshold from state flows through submit:
-    const lowThreshold = submit(answering({ buitenlandGewerkt: 'nee', uren: '1500', punten: '200' }, 0, 2000));
+    const lowThreshold = submit(
+      answering({ buitenlandGewerkt: 'nee', uren: '1500', punten: '200' }, 0, 2000),
+    );
     expect(lowThreshold.tag).toBe('Answering'); // scholing now required (1500 < 2000), unanswered → blocked
     expect((lowThreshold as any).errors.scholingGevolgd).toBeTruthy();
   });
@@ -61,7 +69,11 @@ describe('navigation', () => {
   });
 
   it('editing an answer leaves the cursor fixed (steps never collapse)', () => {
-    const edited = reduce(answering({ buitenlandGewerkt: 'ja' }, 1), { tag: 'SetAnswer', key: 'buitenlandGewerkt', value: 'nee' });
+    const edited = reduce(answering({ buitenlandGewerkt: 'ja' }, 1), {
+      tag: 'SetAnswer',
+      key: 'buitenlandGewerkt',
+      value: 'nee',
+    });
     expect((edited as any).cursor).toBe(1); // cursor untouched; only inline questions change
   });
 
@@ -89,7 +101,11 @@ describe('submit', () => {
 
   it('reaches Submitting ONLY with valid answers', () => {
     // Bad punten only blocks when scholing was followed (otherwise punten is ignored).
-    expect(submit(answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'ja', punten: 'x' })).tag).toBe('Answering');
+    expect(
+      submit(
+        answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'ja', punten: 'x' }),
+      ).tag,
+    ).toBe('Answering');
     const good = submit(answering(complete));
     expect(good.tag).toBe('Submitting');
     expect((good as any).data.uren).toBe(4160);
@@ -98,17 +114,23 @@ describe('submit', () => {
 
   it('punten is required only when aanvullende scholing was gevolgd', () => {
     // scholing = ja but punten missing -> blocked on punten.
-    const missing = submit(answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'ja' }));
+    const missing = submit(
+      answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'ja' }),
+    );
     expect(missing.tag).toBe('Answering');
     expect((missing as any).errors.punten).toBeTruthy();
     // scholing = nee -> punten not required, submits without it.
-    expect(submit(answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'nee' })).tag).toBe('Submitting');
+    expect(
+      submit(answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'nee' })).tag,
+    ).toBe('Submitting');
   });
 
   it('low hours requires the scholing answer before submit', () => {
     const noScholing = submit(answering({ buitenlandGewerkt: 'nee', uren: '500' }));
     expect(noScholing.tag).toBe('Answering'); // scholing question is required, unanswered
-    const withScholing = submit(answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'ja', punten: '200' }));
+    const withScholing = submit(
+      answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'ja', punten: '200' }),
+    );
     expect(withScholing.tag).toBe('Submitting');
     expect((withScholing as any).data.aanvullendeScholing).toBe(true);
     expect((withScholing as any).data.punten).toBe(200);

src/app/herregistratie/domain/intake.machine.ts

@@ -56,12 +56,24 @@ export const STEPS: StepId[] = ['buitenland', 'werk', 'review'];
 type Errors = Partial<Record<keyof Answers, string>>;
 
 export type IntakeState =
-  | { tag: 'Answering'; answers: Answers; cursor: number; errors: Errors; scholingThreshold: number }
+  | {
+      tag: 'Answering';
+      answers: Answers;
+      cursor: number;
+      errors: Errors;
+      scholingThreshold: number;
+    }
   | { tag: 'Submitting'; data: ValidIntake }
   | { tag: 'Submitted'; data: ValidIntake }
   | { tag: 'Failed'; data: ValidIntake; error: string };
 
-export const initial: IntakeState = { tag: 'Answering', answers: {}, cursor: 0, errors: {}, scholingThreshold: SCHOLING_THRESHOLD_DEFAULT };
+export const initial: IntakeState = {
+  tag: 'Answering',
+  answers: {},
+  cursor: 0,
+  errors: {},
+  scholingThreshold: SCHOLING_THRESHOLD_DEFAULT,
+};
 
 /** Which step the cursor currently points at (clamped to the fixed list). */
 export function currentStep(s: Extract<IntakeState, { tag: 'Answering' }>): StepId {
@@ -79,9 +91,11 @@ function validateStep(step: StepId, a: Answers, scholingThreshold: number): Resu
   const errors: Errors = {};
   switch (step) {
     case 'buitenland':
-      if (!a.buitenlandGewerkt) errors.buitenlandGewerkt = $localize`:@@validation.maakKeuze:Maak een keuze.`;
+      if (!a.buitenlandGewerkt)
+        errors.buitenlandGewerkt = $localize`:@@validation.maakKeuze:Maak een keuze.`;
       else if (a.buitenlandGewerkt === 'ja') {
-        if (!a.land || a.land.trim() === '') errors.land = $localize`:@@validation.land:Vul een land in.`;
+        if (!a.land || a.land.trim() === '')
+          errors.land = $localize`:@@validation.land:Vul een land in.`;
         const u = parseUren(a.buitenlandseUren ?? '');
         if (!u.ok) errors.buitenlandseUren = u.error;
       }
@@ -89,7 +103,8 @@ function validateStep(step: StepId, a: Answers, scholingThreshold: number): Resu
     case 'werk': {
       const u = parseUren(a.uren ?? '');
       if (!u.ok) errors.uren = u.error;
-      if (lageUren(a, scholingThreshold) && !a.scholingGevolgd) errors.scholingGevolgd = $localize`:@@validation.maakKeuze:Maak een keuze.`;
+      if (lageUren(a, scholingThreshold) && !a.scholingGevolgd)
+        errors.scholingGevolgd = $localize`:@@validation.maakKeuze:Maak een keuze.`;
       // Nascholingspunten are only asked (and required) when scholing was followed.
       if (a.scholingGevolgd === 'ja') {
         const p = parseUren(a.punten ?? '');
@@ -171,7 +186,9 @@ export function submit(s: IntakeState): IntakeState {
 
 export function resolve(s: IntakeState, r: Result<string, void>): IntakeState {
   if (s.tag !== 'Submitting') return s;
-  return r.ok ? { tag: 'Submitted', data: s.data } : { tag: 'Failed', data: s.data, error: r.error };
+  return r.ok
+    ? { tag: 'Submitted', data: s.data }
+    : { tag: 'Failed', data: s.data, error: r.error };
 }
 
 export type IntakeMsg =

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

@@ -3,12 +3,24 @@ import { FormsModule } from '@angular/forms';
 import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
 import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
+import {
+  WizardShellComponent,
+  WizardError,
+  WizardStatus,
+  naarStapLabel,
+} from '@shared/layout/wizard-shell/wizard-shell.component';
 import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
 import { createStore } from '@shared/application/store';
 import { whenTag } from '@shared/kernel/fp';
 import { BigProfileStore } from '@registratie/application/big-profile.store';
-import { WizardState, WizardMsg, Draft, initial, reduce, hasProgress } from '@herregistratie/domain/herregistratie.machine';
+import {
+  WizardState,
+  WizardMsg,
+  Draft,
+  initial,
+  reduce,
+  hasProgress,
+} from '@herregistratie/domain/herregistratie.machine';
 import { createDraftSync } from '@registratie/application/draft-sync';
 import { DocumentUploadComponent } from '@shared/ui/upload/document-upload/document-upload.component';
 import { createUploadController } from '@shared/upload/upload-controller';
@@ -23,13 +35,22 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
     the dashboard shows "in behandeling" immediately. */
 @Component({
   selector: 'app-herregistratie-wizard',
-  imports: [FormsModule, FormFieldComponent, TextInputComponent, AlertComponent, ConfirmationComponent, WizardShellComponent, DocumentUploadComponent],
+  imports: [
+    FormsModule,
+    FormFieldComponent,
+    TextInputComponent,
+    AlertComponent,
+    ConfirmationComponent,
+    WizardShellComponent,
+    DocumentUploadComponent,
+  ],
   template: `
     <app-wizard-shell
       [steps]="stepLabels"
       [current]="step() - 1"
       [stepTitle]="stepTitle()"
-      i18n-processName="@@herregWizard.processName" processName="Herregistratie aanvragen"
+      i18n-processName="@@herregWizard.processName"
+      processName="Herregistratie aanvragen"
       [status]="shellStatus()"
       [primaryLabel]="primaryLabel()"
       [canGoBack]="step() > 1"
@@ -39,23 +60,62 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
       (back)="dispatch({ tag: 'Back' })"
       (cancel)="restart()"
       (retry)="onRetry()"
-      (goToStep)="goToStep($event)">
-
+      (goToStep)="goToStep($event)"
+    >
       @switch (step()) {
         @case (1) {
-          <app-form-field i18n-label="@@herregWizard.urenLabel" label="Gewerkte uren (afgelopen 5 jaar)" fieldId="uren" required [error]="errUren()">
-            <app-text-input inputId="uren" [ngModel]="draft().uren" (ngModelChange)="dispatch({ tag: 'SetField', key: 'uren', value: $event })"
-              name="uren" [invalid]="!!errUren()" i18n-placeholder="@@herregWizard.urenPlaceholder" placeholder="bijv. 4160" />
+          <app-form-field
+            i18n-label="@@herregWizard.urenLabel"
+            label="Gewerkte uren (afgelopen 5 jaar)"
+            fieldId="uren"
+            required
+            [error]="errUren()"
+          >
+            <app-text-input
+              inputId="uren"
+              [ngModel]="draft().uren"
+              (ngModelChange)="dispatch({ tag: 'SetField', key: 'uren', value: $event })"
+              name="uren"
+              [invalid]="!!errUren()"
+              i18n-placeholder="@@herregWizard.urenPlaceholder"
+              placeholder="bijv. 4160"
+            />
           </app-form-field>
-          <app-form-field i18n-label="@@herregWizard.jarenLabel" label="Aantal jaren werkzaam" fieldId="jaren" required [error]="errJaren()">
-            <app-text-input inputId="jaren" [ngModel]="draft().jaren" (ngModelChange)="dispatch({ tag: 'SetField', key: 'jaren', value: $event })"
-              name="jaren" [invalid]="!!errJaren()" i18n-placeholder="@@herregWizard.jarenPlaceholder" placeholder="bijv. 5" />
+          <app-form-field
+            i18n-label="@@herregWizard.jarenLabel"
+            label="Aantal jaren werkzaam"
+            fieldId="jaren"
+            required
+            [error]="errJaren()"
+          >
+            <app-text-input
+              inputId="jaren"
+              [ngModel]="draft().jaren"
+              (ngModelChange)="dispatch({ tag: 'SetField', key: 'jaren', value: $event })"
+              name="jaren"
+              [invalid]="!!errJaren()"
+              i18n-placeholder="@@herregWizard.jarenPlaceholder"
+              placeholder="bijv. 5"
+            />
           </app-form-field>
         }
         @case (2) {
-          <app-form-field i18n-label="@@herregWizard.puntenLabel" label="Behaalde nascholingspunten" fieldId="punten" required [error]="errPunten()">
-            <app-text-input inputId="punten" [ngModel]="draft().punten" (ngModelChange)="dispatch({ tag: 'SetField', key: 'punten', value: $event })"
-              name="punten" [invalid]="!!errPunten()" i18n-placeholder="@@herregWizard.puntenPlaceholder" placeholder="bijv. 200" />
+          <app-form-field
+            i18n-label="@@herregWizard.puntenLabel"
+            label="Behaalde nascholingspunten"
+            fieldId="punten"
+            required
+            [error]="errPunten()"
+          >
+            <app-text-input
+              inputId="punten"
+              [ngModel]="draft().punten"
+              (ngModelChange)="dispatch({ tag: 'SetField', key: 'punten', value: $event })"
+              name="punten"
+              [invalid]="!!errPunten()"
+              i18n-placeholder="@@herregWizard.puntenPlaceholder"
+              placeholder="bijv. 200"
+            />
           </app-form-field>
         }
         @case (3) {
@@ -66,7 +126,8 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
             (removeUpload)="uploadCtl.onRemove($event)"
             (retryUpload)="uploadCtl.onRetry($event)"
             (deleteUpload)="uploadCtl.onDelete($event)"
-            (channelChange)="uploadCtl.onChannelChange($event.categoryId, $event.channel)" />
+            (channelChange)="uploadCtl.onChannelChange($event.categoryId, $event.channel)"
+          />
           @if (errDocumenten()) {
             <app-alert type="warning">{{ errDocumenten() }}</app-alert>
           }
@@ -74,7 +135,10 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
       }
 
       <div wizardSuccess>
-        <app-confirmation i18n-title="@@herregWizard.success.title" title="Uw aanvraag tot herregistratie is ontvangen" />
+        <app-confirmation
+          i18n-title="@@herregWizard.success.title"
+          title="Uw aanvraag tot herregistratie is ontvangen"
+        />
       </div>
     </app-wizard-shell>
   `,
@@ -102,7 +166,9 @@ export class HerregistratieWizardComponent {
     snapshot: () => {
       const s = this.state();
       if (s.tag !== 'Editing' || !hasProgress(s)) return null;
-      const documentIds = deliveryRefs(s.upload).filter((r) => r.channel === 'digital' && r.documentId).map((r) => r.documentId!);
+      const documentIds = deliveryRefs(s.upload)
+        .filter((r) => r.channel === 'digital' && r.documentId)
+        .map((r) => r.documentId!);
       return { draft: s, stepIndex: s.step - 1, stepCount: this.stepLabels.length, documentIds };
     },
     onResume: (draft) => this.dispatch({ tag: 'Seed', state: draft as WizardState }),
@@ -110,12 +176,22 @@ export class HerregistratieWizardComponent {
   });
 
   // Stepper labels + per-step heading titles (presentational only).
-  readonly stepLabels = [$localize`:@@herregWizard.step.werkervaring:Werkervaring`, $localize`:@@herregWizard.step.nascholing:Nascholing`, $localize`:@@herregWizard.step.documenten:Documenten`];
-  private stepTitles = [$localize`:@@herregWizard.title.werkervaring:Werkervaring (afgelopen 5 jaar)`, $localize`:@@herregWizard.title.nascholing:Nascholing`, $localize`:@@herregWizard.title.documenten:Documenten aanleveren`];
+  readonly stepLabels = [
+    $localize`:@@herregWizard.step.werkervaring:Werkervaring`,
+    $localize`:@@herregWizard.step.nascholing:Nascholing`,
+    $localize`:@@herregWizard.step.documenten:Documenten`,
+  ];
+  private stepTitles = [
+    $localize`:@@herregWizard.title.werkervaring:Werkervaring (afgelopen 5 jaar)`,
+    $localize`:@@herregWizard.title.nascholing:Nascholing`,
+    $localize`:@@herregWizard.title.documenten:Documenten aanleveren`,
+  ];
 
   private editing = computed(() => whenTag(this.state(), 'Editing'));
   protected step = computed(() => this.editing()?.step ?? 1);
-  protected draft = computed<Draft>(() => this.editing()?.draft ?? { uren: '', jaren: '', punten: '' });
+  protected draft = computed<Draft>(
+    () => this.editing()?.draft ?? { uren: '', jaren: '', punten: '' },
+  );
   protected upload = computed<UploadState>(() => this.editing()?.upload ?? initialUpload);
   protected errUren = computed(() => this.editing()?.errors.uren ?? '');
   protected errJaren = computed(() => this.editing()?.errors.jaren ?? '');
@@ -132,20 +208,28 @@ export class HerregistratieWizardComponent {
   protected stepTitle = computed(() => this.stepTitles[this.step() - 1]);
   protected primaryLabel = computed(() => {
     const step = this.step();
-    return step < 3 ? naarStapLabel(step + 1, this.stepLabels[step]) : $localize`:@@herregWizard.indienen:Herregistratie aanvragen`;
+    return step < 3
+      ? naarStapLabel(step + 1, this.stepLabels[step])
+      : $localize`:@@herregWizard.indienen:Herregistratie aanvragen`;
   });
 
   /** Stepper emits a 0-based index for an earlier (visited) step. */
   protected goToStep(index: number) {
     this.dispatch({ tag: 'GaNaarStap', step: (index + 1) as 1 | 2 | 3 });
   }
-  protected errorMessage = computed(() => $localize`:@@wizard.indienenMislukt:Indienen mislukt:` + ` ${this.failedError()}`);
+  protected errorMessage = computed(
+    () => $localize`:@@wizard.indienenMislukt:Indienen mislukt:` + ` ${this.failedError()}`,
+  );
   protected shellStatus = computed<WizardStatus>(() => {
     switch (this.state().tag) {
-      case 'Editing': return 'editing';
-      case 'Submitting': return 'submitting';
-      case 'Submitted': return 'submitted';
-      case 'Failed': return 'failed';
+      case 'Editing':
+        return 'editing';
+      case 'Submitting':
+        return 'submitting';
+      case 'Submitted':
+        return 'submitted';
+      case 'Failed':
+        return 'failed';
     }
   });
   /** Current step's field errors, flattened for the shell's error summary. */
@@ -160,7 +244,9 @@ export class HerregistratieWizardComponent {
     // An explicit seed (stories/tests) wins; otherwise resume the backend draft
     // (`?aanvraag=<id>`) or start fresh. Persistence is the draftSync controller's job.
     const seeded = this.seed();
-    queueMicrotask(() => (seeded !== initial ? this.dispatch({ tag: 'Seed', state: seeded }) : this.draftSync.resume()));
+    queueMicrotask(() =>
+      seeded !== initial ? this.dispatch({ tag: 'Seed', state: seeded }) : this.draftSync.resume(),
+    );
   }
 
   onPrimary() {

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

@@ -20,12 +20,55 @@ export default meta;
 type Story = StoryObj<HerregistratieWizardComponent>;
 
 // Each story seeds one state of the machine — one render per union variant.
-export const Step1: Story = { args: { seed: { tag: 'Editing', step: 1, draft: { uren: '', jaren: '', punten: '' }, errors: {}, upload: initialUpload } } };
-export const Step1Error: Story = {
-  args: { seed: { tag: 'Editing', step: 1, draft: { uren: 'abc', jaren: '', punten: '' }, errors: { uren: 'Vul een geheel aantal in (0 of meer).', jaren: 'Vul een geheel aantal in (0 of meer).' }, upload: initialUpload } satisfies WizardState },
+export const Step1: Story = {
+  args: {
+    seed: {
+      tag: 'Editing',
+      step: 1,
+      draft: { uren: '', jaren: '', punten: '' },
+      errors: {},
+      upload: initialUpload,
+    },
+  },
+};
+export const Step1Error: Story = {
+  args: {
+    seed: {
+      tag: 'Editing',
+      step: 1,
+      draft: { uren: 'abc', jaren: '', punten: '' },
+      errors: {
+        uren: 'Vul een geheel aantal in (0 of meer).',
+        jaren: 'Vul een geheel aantal in (0 of meer).',
+      },
+      upload: initialUpload,
+    } satisfies WizardState,
+  },
+};
+export const Step2: Story = {
+  args: {
+    seed: {
+      tag: 'Editing',
+      step: 2,
+      draft: { uren: '4160', jaren: '5', punten: '' },
+      errors: {},
+      upload: initialUpload,
+    },
+  },
+};
+export const Step3: Story = {
+  args: {
+    seed: {
+      tag: 'Editing',
+      step: 3,
+      draft: { uren: '4160', jaren: '5', punten: '200' },
+      errors: {},
+      upload: initialUpload,
+    },
+  },
 };
-export const Step2: Story = { args: { seed: { tag: 'Editing', step: 2, draft: { uren: '4160', jaren: '5', punten: '' }, errors: {}, upload: initialUpload } } };
-export const Step3: Story = { args: { seed: { tag: 'Editing', step: 3, draft: { uren: '4160', jaren: '5', punten: '200' }, errors: {}, upload: initialUpload } } };
 export const Submitting: Story = { args: { seed: { tag: 'Submitting', data: validData } } };
 export const Submitted: Story = { args: { seed: { tag: 'Submitted', data: validData } } };
-export const Failed: Story = { args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } } };
+export const Failed: Story = {
+  args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } },
+};

src/app/herregistratie/ui/herregistratie.page.ts

@@ -13,7 +13,11 @@ import { HerregistratieWizardComponent } from '@herregistratie/ui/herregistratie
   selector: 'app-herregistratie-page',
   imports: [PageShellComponent, AlertComponent, ...ASYNC, HerregistratieWizardComponent],
   template: `
-    <app-page-shell i18n-heading="@@herregistratie.heading" heading="Herregistratie aanvragen" backLink="/dashboard">
+    <app-page-shell
+      i18n-heading="@@herregistratie.heading"
+      heading="Herregistratie aanvragen"
+      backLink="/dashboard"
+    >
       <app-async [data]="eligibility()">
         <ng-template appAsyncLoaded let-eligible>
           @if (eligible) {

src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts

@@ -8,7 +8,12 @@ import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 import { ReviewSectionComponent } from '@shared/ui/review-section/review-section.component';
 import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
-import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
+import {
+  WizardShellComponent,
+  WizardError,
+  WizardStatus,
+  naarStapLabel,
+} from '@shared/layout/wizard-shell/wizard-shell.component';
 import { createStore } from '@shared/application/store';
 import { whenTag } from '@shared/kernel/fp';
 import { BigProfileStore } from '@registratie/application/big-profile.store';
@@ -34,13 +39,25 @@ import { IntakePolicyStore } from '@herregistratie/application/intake-policy.sto
     sessionStorage so a page reload keeps the user's progress (cleared on tab close). */
 @Component({
   selector: 'app-intake-wizard',
-  imports: [FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent, AlertComponent, DataRowComponent, ReviewSectionComponent, ConfirmationComponent, WizardShellComponent],
+  imports: [
+    FormsModule,
+    FormFieldComponent,
+    TextInputComponent,
+    RadioGroupComponent,
+    ButtonComponent,
+    AlertComponent,
+    DataRowComponent,
+    ReviewSectionComponent,
+    ConfirmationComponent,
+    WizardShellComponent,
+  ],
   template: `
     <app-wizard-shell
       [steps]="stepLabels"
       [current]="cursor()"
       [stepTitle]="stepTitle()"
-      i18n-processName="@@intake.processName" processName="Herregistratie-intake"
+      i18n-processName="@@intake.processName"
+      processName="Herregistratie-intake"
       [status]="shellStatus()"
       [primaryLabel]="primaryLabel()"
       [canGoBack]="cursor() > 0"
@@ -50,68 +67,186 @@ import { IntakePolicyStore } from '@herregistratie/application/intake-policy.sto
       (back)="dispatch({ tag: 'Back' })"
       (cancel)="restart()"
       (retry)="onRetry()"
-      (goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })">
-
+      (goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })"
+    >
       @switch (step()) {
         @case ('buitenland') {
-          <app-form-field i18n-label="@@intake.q.buitenland" label="Heeft u de afgelopen 5 jaar buiten Nederland gewerkt?" fieldId="buitenlandGewerkt" required [error]="err('buitenlandGewerkt')">
-            <app-radio-group name="buitenlandGewerkt" [options]="jaNee"
-              [ngModel]="answers().buitenlandGewerkt ?? ''" (ngModelChange)="set('buitenlandGewerkt', $event)" />
+          <app-form-field
+            i18n-label="@@intake.q.buitenland"
+            label="Heeft u de afgelopen 5 jaar buiten Nederland gewerkt?"
+            fieldId="buitenlandGewerkt"
+            required
+            [error]="err('buitenlandGewerkt')"
+          >
+            <app-radio-group
+              name="buitenlandGewerkt"
+              [options]="jaNee"
+              [ngModel]="answers().buitenlandGewerkt ?? ''"
+              (ngModelChange)="set('buitenlandGewerkt', $event)"
+            />
           </app-form-field>
           @if (answers().buitenlandGewerkt === 'ja') {
-            <app-form-field i18n-label="@@intake.q.land" label="In welk land?" fieldId="land" required [error]="err('land')">
-              <app-text-input inputId="land" [ngModel]="answers().land ?? ''" (ngModelChange)="set('land', $event)" name="land" i18n-placeholder="@@intake.q.landPlaceholder" placeholder="bijv. België" />
+            <app-form-field
+              i18n-label="@@intake.q.land"
+              label="In welk land?"
+              fieldId="land"
+              required
+              [error]="err('land')"
+            >
+              <app-text-input
+                inputId="land"
+                [ngModel]="answers().land ?? ''"
+                (ngModelChange)="set('land', $event)"
+                name="land"
+                i18n-placeholder="@@intake.q.landPlaceholder"
+                placeholder="bijv. België"
+              />
             </app-form-field>
-            <app-form-field i18n-label="@@intake.q.buitenlandseUren" label="Hoeveel uur heeft u daar gewerkt?" fieldId="buitenlandseUren" required [error]="err('buitenlandseUren')">
-              <app-text-input inputId="buitenlandseUren" [ngModel]="answers().buitenlandseUren ?? ''" (ngModelChange)="set('buitenlandseUren', $event)" name="buitenlandseUren" i18n-placeholder="@@intake.q.buitenlandseUrenPlaceholder" placeholder="bijv. 800" />
+            <app-form-field
+              i18n-label="@@intake.q.buitenlandseUren"
+              label="Hoeveel uur heeft u daar gewerkt?"
+              fieldId="buitenlandseUren"
+              required
+              [error]="err('buitenlandseUren')"
+            >
+              <app-text-input
+                inputId="buitenlandseUren"
+                [ngModel]="answers().buitenlandseUren ?? ''"
+                (ngModelChange)="set('buitenlandseUren', $event)"
+                name="buitenlandseUren"
+                i18n-placeholder="@@intake.q.buitenlandseUrenPlaceholder"
+                placeholder="bijv. 800"
+              />
             </app-form-field>
           }
         }
         @case ('werk') {
-          <app-form-field i18n-label="@@intake.q.urenNl" label="Gewerkte uren in Nederland (afgelopen 5 jaar)" fieldId="uren" required [error]="err('uren')">
-            <app-text-input inputId="uren" [ngModel]="answers().uren ?? ''" (ngModelChange)="set('uren', $event)" name="uren" i18n-placeholder="@@intake.q.urenNlPlaceholder" placeholder="bijv. 4160" />
+          <app-form-field
+            i18n-label="@@intake.q.urenNl"
+            label="Gewerkte uren in Nederland (afgelopen 5 jaar)"
+            fieldId="uren"
+            required
+            [error]="err('uren')"
+          >
+            <app-text-input
+              inputId="uren"
+              [ngModel]="answers().uren ?? ''"
+              (ngModelChange)="set('uren', $event)"
+              name="uren"
+              i18n-placeholder="@@intake.q.urenNlPlaceholder"
+              placeholder="bijv. 4160"
+            />
           </app-form-field>
           @if (scholingZichtbaar()) {
-            <app-form-field i18n-label="@@intake.q.scholing" label="U werkte relatief weinig uren. Heeft u aanvullende scholing gevolgd?" fieldId="scholingGevolgd" required [error]="err('scholingGevolgd')">
-              <app-radio-group name="scholingGevolgd" [options]="jaNee"
-                [ngModel]="answers().scholingGevolgd ?? ''" (ngModelChange)="set('scholingGevolgd', $event)" />
+            <app-form-field
+              i18n-label="@@intake.q.scholing"
+              label="U werkte relatief weinig uren. Heeft u aanvullende scholing gevolgd?"
+              fieldId="scholingGevolgd"
+              required
+              [error]="err('scholingGevolgd')"
+            >
+              <app-radio-group
+                name="scholingGevolgd"
+                [options]="jaNee"
+                [ngModel]="answers().scholingGevolgd ?? ''"
+                (ngModelChange)="set('scholingGevolgd', $event)"
+              />
             </app-form-field>
           }
           @if (answers().scholingGevolgd === 'ja') {
-            <app-form-field i18n-label="@@intake.q.punten" label="Behaalde nascholingspunten" fieldId="punten" required [error]="err('punten')">
-              <app-text-input inputId="punten" [ngModel]="answers().punten ?? ''" (ngModelChange)="set('punten', $event)" name="punten" i18n-placeholder="@@intake.q.puntenPlaceholder" placeholder="bijv. 200" />
+            <app-form-field
+              i18n-label="@@intake.q.punten"
+              label="Behaalde nascholingspunten"
+              fieldId="punten"
+              required
+              [error]="err('punten')"
+            >
+              <app-text-input
+                inputId="punten"
+                [ngModel]="answers().punten ?? ''"
+                (ngModelChange)="set('punten', $event)"
+                name="punten"
+                i18n-placeholder="@@intake.q.puntenPlaceholder"
+                placeholder="bijv. 200"
+              />
             </app-form-field>
           }
         }
         @case ('review') {
-          <app-alert type="info" i18n="@@intake.review.controleer">Controleer uw antwoorden en dien de aanvraag in.</app-alert>
-          <app-review-section i18n-heading="@@intake.sectie.buitenland" heading="Buitenland"
-            i18n-editAriaLabel="@@intake.buitenlandWijzigenAria" editAriaLabel="Wijzigen buitenland"
-            (edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
-            <div app-data-row i18n-key="@@intake.review.buitenNl" key="Buiten NL gewerkt" [value]="answers().buitenlandGewerkt ?? '—'"></div>
+          <app-alert type="info" i18n="@@intake.review.controleer"
+            >Controleer uw antwoorden en dien de aanvraag in.</app-alert
+          >
+          <app-review-section
+            i18n-heading="@@intake.sectie.buitenland"
+            heading="Buitenland"
+            i18n-editAriaLabel="@@intake.buitenlandWijzigenAria"
+            editAriaLabel="Wijzigen buitenland"
+            (edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })"
+          >
+            <div
+              app-data-row
+              i18n-key="@@intake.review.buitenNl"
+              key="Buiten NL gewerkt"
+              [value]="answers().buitenlandGewerkt ?? '—'"
+            ></div>
             @if (answers().buitenlandGewerkt === 'ja') {
-              <div app-data-row i18n-key="@@intake.review.land" key="Land" [value]="answers().land ?? ''"></div>
-              <div app-data-row i18n-key="@@intake.review.buitenlandseUren" key="Buitenlandse uren" [value]="answers().buitenlandseUren ?? ''"></div>
+              <div
+                app-data-row
+                i18n-key="@@intake.review.land"
+                key="Land"
+                [value]="answers().land ?? ''"
+              ></div>
+              <div
+                app-data-row
+                i18n-key="@@intake.review.buitenlandseUren"
+                key="Buitenlandse uren"
+                [value]="answers().buitenlandseUren ?? ''"
+              ></div>
             }
           </app-review-section>
-          <app-review-section class="app-section" i18n-heading="@@intake.sectie.werk" heading="Werk in Nederland"
-            i18n-editAriaLabel="@@intake.werkWijzigenAria" editAriaLabel="Wijzigen werk in Nederland"
-            (edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
-            <div app-data-row i18n-key="@@intake.review.urenNl" key="Uren NL" [value]="answers().uren ?? ''"></div>
+          <app-review-section
+            class="app-section"
+            i18n-heading="@@intake.sectie.werk"
+            heading="Werk in Nederland"
+            i18n-editAriaLabel="@@intake.werkWijzigenAria"
+            editAriaLabel="Wijzigen werk in Nederland"
+            (edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })"
+          >
+            <div
+              app-data-row
+              i18n-key="@@intake.review.urenNl"
+              key="Uren NL"
+              [value]="answers().uren ?? ''"
+            ></div>
             @if (scholingZichtbaar()) {
-              <div app-data-row i18n-key="@@intake.review.scholing" key="Aanvullende scholing" [value]="answers().scholingGevolgd ?? ''"></div>
+              <div
+                app-data-row
+                i18n-key="@@intake.review.scholing"
+                key="Aanvullende scholing"
+                [value]="answers().scholingGevolgd ?? ''"
+              ></div>
             }
             @if (answers().scholingGevolgd === 'ja') {
-              <div app-data-row i18n-key="@@intake.review.punten" key="Nascholingspunten" [value]="answers().punten ?? ''"></div>
+              <div
+                app-data-row
+                i18n-key="@@intake.review.punten"
+                key="Nascholingspunten"
+                [value]="answers().punten ?? ''"
+              ></div>
             }
           </app-review-section>
         }
       }
 
       <div wizardSuccess>
-        <app-confirmation i18n-title="@@intake.success.title" title="Uw aanvraag tot herregistratie is ontvangen">
+        <app-confirmation
+          i18n-title="@@intake.success.title"
+          title="Uw aanvraag tot herregistratie is ontvangen"
+        >
           <div class="app-section">
-            <app-button variant="secondary" (click)="restart()" i18n="@@intake.opnieuw">Opnieuw beginnen</app-button>
+            <app-button variant="secondary" (click)="restart()" i18n="@@intake.opnieuw"
+              >Opnieuw beginnen</app-button
+            >
           </div>
         </app-confirmation>
       </div>
@@ -151,13 +286,19 @@ export class IntakeWizardComponent {
   protected answers = computed<Answers>(() => this.answering()?.answers ?? {});
   protected step = computed<StepId>(() => STEPS[Math.min(this.cursor(), STEPS.length - 1)]);
   /** Server-owned threshold from the policy endpoint (mirrored into machine state). */
-  protected scholingThreshold = computed(() => this.answering()?.scholingThreshold ?? SCHOLING_THRESHOLD_DEFAULT);
+  protected scholingThreshold = computed(
+    () => this.answering()?.scholingThreshold ?? SCHOLING_THRESHOLD_DEFAULT,
+  );
   /** Whether the inline scholing question is shown (and required) in the 'werk' step. */
   protected scholingZichtbaar = computed(() => lageUren(this.answers(), this.scholingThreshold()));
   protected failedError = computed(() => whenTag(this.state(), 'Failed')?.error ?? '');
 
   // --- Presentational wiring for the shared wizard shell ---------------------
-  readonly stepLabels = [$localize`:@@intake.step.buitenland:Buitenland`, $localize`:@@intake.step.werk:Werk`, $localize`:@@intake.step.controle:Controle`];
+  readonly stepLabels = [
+    $localize`:@@intake.step.buitenland:Buitenland`,
+    $localize`:@@intake.step.werk:Werk`,
+    $localize`:@@intake.step.controle:Controle`,
+  ];
   private stepTitles: Record<StepId, string> = {
     buitenland: $localize`:@@intake.title.buitenland:Werken in het buitenland`,
     werk: $localize`:@@intake.title.werk:Werkervaring in Nederland`,
@@ -169,13 +310,19 @@ export class IntakeWizardComponent {
     const next = this.cursor() + 1;
     return naarStapLabel(next + 1, this.stepLabels[next]);
   });
-  protected errorMessage = computed(() => $localize`:@@wizard.indienenMislukt:Indienen mislukt:` + ` ${this.failedError()}`);
+  protected errorMessage = computed(
+    () => $localize`:@@wizard.indienenMislukt:Indienen mislukt:` + ` ${this.failedError()}`,
+  );
   protected shellStatus = computed<WizardStatus>(() => {
     switch (this.state().tag) {
-      case 'Answering': return 'editing';
-      case 'Submitting': return 'submitting';
-      case 'Submitted': return 'submitted';
-      case 'Failed': return 'failed';
+      case 'Answering':
+        return 'editing';
+      case 'Submitting':
+        return 'submitting';
+      case 'Submitted':
+        return 'submitted';
+      case 'Failed':
+        return 'failed';
     }
   });
   /** Current step's field errors, flattened for the shell's error summary. The
@@ -188,13 +335,16 @@ export class IntakeWizardComponent {
   });
 
   protected err = (k: keyof Answers) => this.answering()?.errors[k] ?? '';
-  protected set = (key: keyof Answers, value: string) => this.dispatch({ tag: 'SetAnswer', key, value });
+  protected set = (key: keyof Answers, value: string) =>
+    this.dispatch({ tag: 'SetAnswer', key, value });
 
   constructor() {
     // An explicit seed (stories/tests) wins; otherwise resume the backend draft
     // (`?aanvraag=<id>`) or start fresh. Persistence is the draftSync controller's job.
     const seeded = this.seed();
-    queueMicrotask(() => (seeded !== initial ? this.dispatch({ tag: 'Seed', state: seeded }) : this.draftSync.resume()));
+    queueMicrotask(() =>
+      seeded !== initial ? this.dispatch({ tag: 'Seed', state: seeded }) : this.draftSync.resume(),
+    );
     // Apply the server-owned threshold into machine state as it arrives. Track
     // only the policy value; untrack the dispatch (it reads the state signal
     // internally, which would otherwise make this effect loop on its own write).

src/app/herregistratie/ui/intake-wizard/intake-wizard.stories.ts

@@ -17,14 +17,26 @@ const meta: Meta<IntakeWizardComponent> = {
 export default meta;
 type Story = StoryObj<IntakeWizardComponent>;
 
-const answering = (answers: Answers, cursor = 0): IntakeState => ({ tag: 'Answering', answers, cursor, errors: {}, scholingThreshold: 1000 });
+const answering = (answers: Answers, cursor = 0): IntakeState => ({
+  tag: 'Answering',
+  answers,
+  cursor,
+  errors: {},
+  scholingThreshold: 1000,
+});
 
 export const Start: Story = { args: { seed: answering({}) } };
 // Inline reveal: country/hours appear within the buitenland step (cursor 0).
 export const AbroadBranch: Story = { args: { seed: answering({ buitenlandGewerkt: 'ja' }, 0) } };
 // Inline reveal: the scholing question appears within the werk step (cursor 1).
-export const LowHoursScholing: Story = { args: { seed: answering({ buitenlandGewerkt: 'nee', uren: '500' }, 1) } };
-export const Review: Story = { args: { seed: answering({ buitenlandGewerkt: 'nee', uren: '4160', punten: '200' }, 2) } };
+export const LowHoursScholing: Story = {
+  args: { seed: answering({ buitenlandGewerkt: 'nee', uren: '500' }, 1) },
+};
+export const Review: Story = {
+  args: { seed: answering({ buitenlandGewerkt: 'nee', uren: '4160', punten: '200' }, 2) },
+};
 export const Submitting: Story = { args: { seed: { tag: 'Submitting', data: validData } } };
 export const Submitted: Story = { args: { seed: { tag: 'Submitted', data: validData } } };
-export const Failed: Story = { args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } } };
+export const Failed: Story = {
+  args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } },
+};

src/app/herregistratie/ui/intake.page.ts

@@ -9,11 +9,14 @@ import { IntakeWizardComponent } from '@herregistratie/ui/intake-wizard/intake-w
   selector: 'app-intake-page',
   imports: [PageShellComponent, AlertComponent, IntakeWizardComponent],
   template: `
-    <app-page-shell i18n-heading="@@intake.heading" heading="Herregistratie — intake" backLink="/dashboard">
+    <app-page-shell
+      i18n-heading="@@intake.heading"
+      heading="Herregistratie — intake"
+      backLink="/dashboard"
+    >
       <app-alert type="info" i18n="@@intake.intro">
-        Een paar vragen bepalen welke gegevens we nodig hebben. Afhankelijk van uw
-        antwoorden verschijnen er extra vragen. Uw antwoorden blijven bewaard als u
-        de pagina herlaadt.
+        Een paar vragen bepalen welke gegevens we nodig hebben. Afhankelijk van uw antwoorden
+        verschijnen er extra vragen. Uw antwoorden blijven bewaard als u de pagina herlaadt.
       </app-alert>
       <div class="app-section">
         <app-intake-wizard />

src/app/registratie/application/applications.store.ts

@@ -1,7 +1,10 @@
 import { Injectable, inject, signal } from '@angular/core';
 import { RemoteData } from '@shared/application/remote-data';
 import { Aanvraag } from '@registratie/domain/aanvraag';
-import { ApplicationsAdapter, parseApplications } from '@registratie/infrastructure/applications.adapter';
+import {
+  ApplicationsAdapter,
+  parseApplications,
+} from '@registratie/infrastructure/applications.adapter';
 
 type Err = Error | undefined;
 
@@ -31,7 +34,11 @@ export class ApplicationsStore {
     if (this.state().tag !== 'Success') this.state.set({ tag: 'Loading' });
     try {
       const parsed = parseApplications(await this.adapter.list());
-      this.state.set(parsed.ok ? { tag: 'Success', value: parsed.value } : { tag: 'Failure', error: new Error(parsed.error) });
+      this.state.set(
+        parsed.ok
+          ? { tag: 'Success', value: parsed.value }
+          : { tag: 'Failure', error: new Error(parsed.error) },
+      );
     } catch (e) {
       this.state.set({ tag: 'Failure', error: e as Error });
     }

src/app/registratie/application/big-profile.store.ts

@@ -4,7 +4,11 @@ import { Aantekening } from '../domain/registration';
 import { BigProfile } from '../domain/big-profile';
 import { HerregistratieDecisions } from '../contracts/dashboard-view.dto';
 import { BigRegisterAdapter } from '../infrastructure/big-register.adapter';
-import { DashboardView, DashboardViewAdapter, parseDashboardView } from '../infrastructure/dashboard-view.adapter';
+import {
+  DashboardView,
+  DashboardViewAdapter,
+  parseDashboardView,
+} from '../infrastructure/dashboard-view.adapter';
 
 type Err = Error | undefined;
 
@@ -32,14 +36,20 @@ export class BigProfileStore {
     const rd = fromResource(this.viewRes);
     if (rd.tag !== 'Success') return rd;
     const parsed = parseDashboardView(rd.value);
-    return parsed.ok ? { tag: 'Success', value: parsed.value } : { tag: 'Failure', error: new Error(parsed.error) };
+    return parsed.ok
+      ? { tag: 'Success', value: parsed.value }
+      : { tag: 'Failure', error: new Error(parsed.error) };
   });
 
   /** Registration + person, from the single aggregated call. */
-  readonly profile = computed<RemoteData<Err, BigProfile>>(() => map(this.view(), (v) => v.profile));
+  readonly profile = computed<RemoteData<Err, BigProfile>>(() =>
+    map(this.view(), (v) => v.profile),
+  );
 
   /** Server-computed decisions (e.g. herregistratie eligibility) — rendered, not recomputed. */
-  readonly decisions = computed<RemoteData<Err, HerregistratieDecisions>>(() => map(this.view(), (v) => v.decisions));
+  readonly decisions = computed<RemoteData<Err, HerregistratieDecisions>>(() =>
+    map(this.view(), (v) => v.decisions),
+  );
 
   /** Specialisms/notes stay a separate stream (they have their own empty state). */
   readonly aantekeningen = computed<RemoteData<Err, Aantekening[]>>(() => {

src/app/registratie/application/draft-sync.ts

@@ -2,9 +2,15 @@ import { DestroyRef, effect, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Result } from '@shared/kernel/fp';
 import { runSubmit, SUBMIT_FAILED } from '@shared/application/submit';
-import type { SubmitApplicationRequest, SubmitApplicationResponse } from '@shared/infrastructure/api-client';
+import type {
+  SubmitApplicationRequest,
+  SubmitApplicationResponse,
+} from '@shared/infrastructure/api-client';
 import { AanvraagType } from '@registratie/domain/aanvraag';
-import { ApplicationsAdapter, parseApplications } from '@registratie/infrastructure/applications.adapter';
+import {
+  ApplicationsAdapter,
+  parseApplications,
+} from '@registratie/infrastructure/applications.adapter';
 
 /** What a wizard persists per step: the opaque machine snapshot + progress + docs. */
 export interface DraftSnapshot {
@@ -59,7 +65,12 @@ export function createDraftSync(deps: DraftSyncDeps) {
     ensuring ??= adapter.create(deps.type).then((newId) => {
       id = newId;
       // Stamp the id into the URL (no navigation) so a reload resumes this Concept.
-      void router!.navigate([], { relativeTo: route!, queryParams: { aanvraag: newId }, queryParamsHandling: 'merge', replaceUrl: true });
+      void router!.navigate([], {
+        relativeTo: route!,
+        queryParams: { aanvraag: newId },
+        queryParamsHandling: 'merge',
+        replaceUrl: true,
+      });
       return newId;
     });
     return ensuring;
@@ -78,7 +89,12 @@ export function createDraftSync(deps: DraftSyncDeps) {
     const snap = deps.snapshot();
     if (!snap) return;
     const theId = await ensureId();
-    await adapter.syncDraft(theId, { draft: snap.draft, stepIndex: snap.stepIndex, stepCount: snap.stepCount, documentIds: snap.documentIds });
+    await adapter.syncDraft(theId, {
+      draft: snap.draft,
+      stepIndex: snap.stepIndex,
+      stepCount: snap.stepCount,
+      documentIds: snap.documentIds,
+    });
   };
 
   // One effect watches the snapshot; each change resets a debounce timer. The timer's
@@ -117,7 +133,9 @@ export function createDraftSync(deps: DraftSyncDeps) {
   const findConcept = async (): Promise<string | undefined> => {
     try {
       const parsed = parseApplications(await adapter.list());
-      return parsed.ok ? parsed.value.find((a) => a.type === deps.type && a.status.tag === 'Concept')?.id : undefined;
+      return parsed.ok
+        ? parsed.value.find((a) => a.type === deps.type && a.status.tag === 'Concept')?.id
+        : undefined;
     } catch {
       return undefined;
     }
@@ -143,7 +161,12 @@ export function createDraftSync(deps: DraftSyncDeps) {
         if (existing) {
           await load(existing);
           // Stamp the id into the URL so a reload resumes the same Concept.
-          void router!.navigate([], { relativeTo: route!, queryParams: { aanvraag: existing }, queryParamsHandling: 'merge', replaceUrl: true });
+          void router!.navigate([], {
+            relativeTo: route!,
+            queryParams: { aanvraag: existing },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+          });
           return;
         }
         applyResume(null);
@@ -169,7 +192,13 @@ export function createDraftSync(deps: DraftSyncDeps) {
         id = undefined;
         ensuring = undefined;
       }
-      if (active()) void router!.navigate([], { relativeTo: route!, queryParams: { aanvraag: null }, queryParamsHandling: 'merge', replaceUrl: true });
+      if (active())
+        void router!.navigate([], {
+          relativeTo: route!,
+          queryParams: { aanvraag: null },
+          queryParamsHandling: 'merge',
+          replaceUrl: true,
+        });
     },
   };
 }

src/app/registratie/application/registratie-lookup.store.ts

@@ -36,19 +36,23 @@ export class RegistratieLookupStore {
 
   /** The address to prefill the draft with, once BRP resolves with a found address;
       null otherwise (loading, error, no address, malformed). */
-  readonly prefillAdres = computed<{ straat: string; postcode: string; woonplaats: string } | null>(() => {
-    const json = this.adresRes.value();
-    if (json === undefined) return null;
-    const parsed = parseBrpAddress(json);
-    return parsed.ok && parsed.value.gevonden && parsed.value.adres ? parsed.value.adres : null;
-  });
+  readonly prefillAdres = computed<{ straat: string; postcode: string; woonplaats: string } | null>(
+    () => {
+      const json = this.adresRes.value();
+      if (json === undefined) return null;
+      const parsed = parseBrpAddress(json);
+      return parsed.ok && parsed.value.gevonden && parsed.value.adres ? parsed.value.adres : null;
+    },
+  );
 
   /** The DUO lookup (diplomas + manual fallback), validated at the trust boundary. */
   readonly duoLookup = computed<RemoteData<Err, DuoLookupDto>>(() => {
     const rd = fromResource(this.diplomasRes);
     if (rd.tag !== 'Success') return rd;
     const parsed = parseDuoLookup(rd.value);
-    return parsed.ok ? { tag: 'Success', value: parsed.value } : { tag: 'Failure', error: new Error(parsed.error) };
+    return parsed.ok
+      ? { tag: 'Success', value: parsed.value }
+      : { tag: 'Failure', error: new Error(parsed.error) };
   });
 
   /** Reload the BRP lookup (e.g. when the wizard restarts) so the address re-prefills. */

src/app/registratie/domain/aanvraag-view.spec.ts

@@ -2,33 +2,57 @@ import { describe, it, expect } from 'vitest';
 import { submittedRow, detailRows, purposeLabel, statusLabel, TYPE_LABELS } from './aanvraag-view';
 import { Aanvraag } from './aanvraag';
 
-const base = { id: '1', type: 'herregistratie' as const, documentIds: [], createdAt: '', updatedAt: '', submittedAt: '2024-05-12' };
+const base = {
+  id: '1',
+  type: 'herregistratie' as const,
+  documentIds: [],
+  createdAt: '',
+  updatedAt: '',
+  submittedAt: '2024-05-12',
+};
 
 describe('submittedRow', () => {
   it('heading is the type, subtitle is the purpose', () => {
-    const row = submittedRow({ ...base, status: { tag: 'InBehandeling', referentie: 'R1', manual: false } } as Aanvraag);
+    const row = submittedRow({
+      ...base,
+      status: { tag: 'InBehandeling', referentie: 'R1', manual: false },
+    } as Aanvraag);
     expect(row.heading).toBe(TYPE_LABELS.herregistratie);
     expect(row.subtitle).toBe(purposeLabel('herregistratie'));
   });
 
   it('status line carries the status label, reference and submit date', () => {
-    const row = submittedRow({ ...base, status: { tag: 'InBehandeling', referentie: 'R1', manual: false } } as Aanvraag);
-    expect(row.status).toContain(statusLabel({ tag: 'InBehandeling', referentie: 'R1', manual: false }));
+    const row = submittedRow({
+      ...base,
+      status: { tag: 'InBehandeling', referentie: 'R1', manual: false },
+    } as Aanvraag);
+    expect(row.status).toContain(
+      statusLabel({ tag: 'InBehandeling', referentie: 'R1', manual: false }),
+    );
     expect(row.status).toContain('R1');
     expect(row.status).toContain('12 mei 2024');
   });
 
   it('manual review adds a note; rejection adds its reason', () => {
-    const manual = submittedRow({ ...base, status: { tag: 'InBehandeling', referentie: 'R1', manual: true } } as Aanvraag);
+    const manual = submittedRow({
+      ...base,
+      status: { tag: 'InBehandeling', referentie: 'R1', manual: true },
+    } as Aanvraag);
     expect(manual.status).toContain('handmatig');
-    const rejected = submittedRow({ ...base, status: { tag: 'Afgewezen', referentie: 'R2', reden: 'Onvoldoende uren' } } as Aanvraag);
+    const rejected = submittedRow({
+      ...base,
+      status: { tag: 'Afgewezen', referentie: 'R2', reden: 'Onvoldoende uren' },
+    } as Aanvraag);
     expect(rejected.status).toContain('Onvoldoende uren');
   });
 });
 
 describe('detailRows', () => {
   it('lists soort/waarvoor/status/referentie/ingediend, plus reason when rejected', () => {
-    const rows = detailRows({ ...base, status: { tag: 'Afgewezen', referentie: 'R2', reden: 'Onvoldoende uren' } } as Aanvraag);
+    const rows = detailRows({
+      ...base,
+      status: { tag: 'Afgewezen', referentie: 'R2', reden: 'Onvoldoende uren' },
+    } as Aanvraag);
     const values = rows.map((r) => r.value);
     expect(values).toContain(TYPE_LABELS.herregistratie);
     expect(values).toContain('R2');
@@ -37,7 +61,11 @@ describe('detailRows', () => {
   });
 
   it('reference falls back to em dash for a Concept', () => {
-    const rows = detailRows({ ...base, submittedAt: undefined, status: { tag: 'Concept', stepIndex: 0, stepCount: 3 } } as Aanvraag);
+    const rows = detailRows({
+      ...base,
+      submittedAt: undefined,
+      status: { tag: 'Concept', stepIndex: 0, stepCount: 3 },
+    } as Aanvraag);
     const ref = rows.find((r) => r.value === '—');
     expect(ref).toBeTruthy();
     expect(rows.length).toBe(5);

src/app/registratie/domain/aanvraag-view.ts

@@ -13,19 +13,26 @@ export const TYPE_LABELS: Record<AanvraagType, string> = {
 /** What the aanvraag is for (shown under the title). */
 export function purposeLabel(type: AanvraagType): string {
   switch (type) {
-    case 'registratie': return $localize`:@@aanvraag.purpose.registratie:Inschrijving in het BIG-register`;
-    case 'herregistratie': return $localize`:@@aanvraag.purpose.herregistratie:Verlenging van uw BIG-registratie`;
-    case 'intake': return $localize`:@@aanvraag.purpose.intake:Intake-vragenlijst voor uw herregistratie`;
+    case 'registratie':
+      return $localize`:@@aanvraag.purpose.registratie:Inschrijving in het BIG-register`;
+    case 'herregistratie':
+      return $localize`:@@aanvraag.purpose.herregistratie:Verlenging van uw BIG-registratie`;
+    case 'intake':
+      return $localize`:@@aanvraag.purpose.intake:Intake-vragenlijst voor uw herregistratie`;
   }
 }
 
 /** The status as a plain label (what state the aanvraag is in). */
 export function statusLabel(status: AanvraagStatus): string {
   switch (status.tag) {
-    case 'Concept': return $localize`:@@aanvraag.status.concept:Concept (nog niet ingediend)`;
-    case 'InBehandeling': return $localize`:@@aanvraag.status.inBehandeling:In behandeling`;
-    case 'Goedgekeurd': return $localize`:@@aanvraag.status.goedgekeurd:Goedgekeurd`;
-    case 'Afgewezen': return $localize`:@@aanvraag.status.afgewezen:Afgewezen`;
+    case 'Concept':
+      return $localize`:@@aanvraag.status.concept:Concept (nog niet ingediend)`;
+    case 'InBehandeling':
+      return $localize`:@@aanvraag.status.inBehandeling:In behandeling`;
+    case 'Goedgekeurd':
+      return $localize`:@@aanvraag.status.goedgekeurd:Goedgekeurd`;
+    case 'Afgewezen':
+      return $localize`:@@aanvraag.status.afgewezen:Afgewezen`;
   }
 }
 
@@ -43,7 +50,9 @@ export interface AanvraagRow {
 }
 
 function formatNL(iso?: string): string {
-  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
+  return iso
+    ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })
+    : '';
 }
 
 /** Fields for a submitted aanvraag's row in the dashboard "aanvragen" list (Concept
@@ -53,10 +62,18 @@ export function submittedRow(a: Aanvraag): AanvraagRow {
   const parts = [statusLabel(s)];
   const ref = referentie(s);
   if (ref) parts.push($localize`:@@aanvraag.row.ref:Referentie ${ref}:ref:`);
-  if (a.submittedAt) parts.push($localize`:@@aanvraag.row.ingediend:ingediend op ${formatNL(a.submittedAt)}:datum:`);
-  if (s.tag === 'InBehandeling' && s.manual) parts.push($localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`);
+  if (a.submittedAt)
+    parts.push($localize`:@@aanvraag.row.ingediend:ingediend op ${formatNL(a.submittedAt)}:datum:`);
+  if (s.tag === 'InBehandeling' && s.manual)
+    parts.push(
+      $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`,
+    );
   if (s.tag === 'Afgewezen') parts.push(s.reden);
-  return { heading: TYPE_LABELS[a.type], subtitle: purposeLabel(a.type), status: parts.join(' · ') };
+  return {
+    heading: TYPE_LABELS[a.type],
+    subtitle: purposeLabel(a.type),
+    status: parts.join(' · '),
+  };
 }
 
 /** Key/value rows for the case-detail page (CIBG Datablock). */
@@ -65,11 +82,20 @@ export function detailRows(a: Aanvraag): { key: string; value: string }[] {
     { key: $localize`:@@aanvraag.detail.soort:Soort aanvraag`, value: TYPE_LABELS[a.type] },
     { key: $localize`:@@aanvraag.detail.waarvoor:Waarvoor`, value: purposeLabel(a.type) },
     { key: $localize`:@@aanvraag.detail.status:Status`, value: statusLabel(a.status) },
-    { key: $localize`:@@aanvraag.detail.referentie:Referentie`, value: referentie(a.status) || '—' },
-    { key: $localize`:@@aanvraag.detail.ingediend:Ingediend op`, value: a.submittedAt ? formatNL(a.submittedAt) : '—' },
+    {
+      key: $localize`:@@aanvraag.detail.referentie:Referentie`,
+      value: referentie(a.status) || '—',
+    },
+    {
+      key: $localize`:@@aanvraag.detail.ingediend:Ingediend op`,
+      value: a.submittedAt ? formatNL(a.submittedAt) : '—',
+    },
   ];
   if (a.status.tag === 'Afgewezen') {
-    rows.push({ key: $localize`:@@aanvraag.detail.reden:Reden van afwijzing`, value: a.status.reden });
+    rows.push({
+      key: $localize`:@@aanvraag.detail.reden:Reden van afwijzing`,
+      value: a.status.reden,
+    });
   }
   return rows;
 }

src/app/registratie/domain/block-actions.spec.ts

@@ -3,11 +3,16 @@ import { blockActions } from './block-actions';
 
 describe('blockActions', () => {
   it('a Concept can be resumed or cancelled', () => {
-    expect(blockActions({ tag: 'Concept', stepIndex: 1, stepCount: 3 })).toEqual(['resume', 'cancel']);
+    expect(blockActions({ tag: 'Concept', stepIndex: 1, stepCount: 3 })).toEqual([
+      'resume',
+      'cancel',
+    ]);
   });
 
   it('an in-behandeling aanvraag only exposes its documents', () => {
-    expect(blockActions({ tag: 'InBehandeling', referentie: 'BIG-1', manual: true })).toEqual(['viewDocuments']);
+    expect(blockActions({ tag: 'InBehandeling', referentie: 'BIG-1', manual: true })).toEqual([
+      'viewDocuments',
+    ]);
   });
 
   it('resolved aanvragen have no actions', () => {

src/app/registratie/domain/change-request.machine.spec.ts

@@ -1,7 +1,9 @@
 import { describe, it, expect } from 'vitest';
 import { State, reduce, initial } from './change-request.machine';
 
-const editingWith = (draft: Partial<{ straat: string; postcode: string; woonplaats: string }>): State => ({
+const editingWith = (
+  draft: Partial<{ straat: string; postcode: string; woonplaats: string }>,
+): State => ({
   tag: 'Editing',
   draft: { straat: '', postcode: '', woonplaats: '', ...draft },
   errors: {},
@@ -23,13 +25,17 @@ describe('change-request reduce', () => {
   });
 
   it('Submit with a valid draft moves to Submitting with parsed (normalised) data', () => {
-    const s = reduce(editingWith({ straat: 'Lange Voorhout 9', postcode: '2514ea' }), { tag: 'Submit' });
+    const s = reduce(editingWith({ straat: 'Lange Voorhout 9', postcode: '2514ea' }), {
+      tag: 'Submit',
+    });
     expect(s.tag).toBe('Submitting');
     expect((s as Extract<State, { tag: 'Submitting' }>).data.postcode).toBe('2514 EA');
   });
 
   it('confirms and fails only from Submitting; Retry re-submits a failure', () => {
-    const submitting = reduce(editingWith({ straat: 'A 1', postcode: '2514 EA' }), { tag: 'Submit' });
+    const submitting = reduce(editingWith({ straat: 'A 1', postcode: '2514 EA' }), {
+      tag: 'Submit',
+    });
     const ok = reduce(submitting, { tag: 'SubmitConfirmed', referentie: 'BIG-2026-1' });
     expect(ok).toMatchObject({ tag: 'Submitted', referentie: 'BIG-2026-1' });
 
@@ -39,7 +45,9 @@ describe('change-request reduce', () => {
   });
 
   it('Reset returns to the initial editing state', () => {
-    const submitting = reduce(editingWith({ straat: 'A 1', postcode: '2514 EA' }), { tag: 'Submit' });
+    const submitting = reduce(editingWith({ straat: 'A 1', postcode: '2514 EA' }), {
+      tag: 'Submit',
+    });
     expect(reduce(submitting, { tag: 'Reset' })).toEqual(initial);
   });
 });

src/app/registratie/domain/change-request.machine.ts

@@ -43,7 +43,10 @@ function validate(draft: Draft): Result<Errors, Valid> {
   if (!straat) errors.straat = $localize`:@@validation.straat:Vul straat en huisnummer in.`;
   if (!postcode.ok) errors.postcode = postcode.error;
   if (straat && postcode.ok) {
-    return { ok: true, value: { straat, postcode: postcode.value, woonplaats: draft.woonplaats.trim() } };
+    return {
+      ok: true,
+      value: { straat, postcode: postcode.value, woonplaats: draft.woonplaats.trim() },
+    };
   }
   return { ok: false, error: errors };
 }
@@ -69,7 +72,9 @@ export function reduce(s: State, m: Msg): State {
     case 'Retry':
       return s.tag === 'Failed' ? { tag: 'Submitting', data: s.data } : s;
     case 'SubmitConfirmed':
-      return s.tag === 'Submitting' ? { tag: 'Submitted', data: s.data, referentie: m.referentie } : s;
+      return s.tag === 'Submitting'
+        ? { tag: 'Submitted', data: s.data, referentie: m.referentie }
+        : s;
     case 'SubmitFailed':
       return s.tag === 'Submitting' ? { tag: 'Failed', data: s.data, error: m.error } : s;
     case 'Reset':

src/app/registratie/domain/has-progress.spec.ts

@@ -1,8 +1,10 @@
 import { describe, it, expect } from 'vitest';
 import { hasProgress, initial, RegistratieState } from './registratie-wizard.machine';
 
-const invullen = (over: Partial<Extract<RegistratieState, { tag: 'Invullen' }>>) =>
-  ({ ...(initial as Extract<RegistratieState, { tag: 'Invullen' }>), ...over });
+const invullen = (over: Partial<Extract<RegistratieState, { tag: 'Invullen' }>>) => ({
+  ...(initial as Extract<RegistratieState, { tag: 'Invullen' }>),
+  ...over,
+});
 
 describe('hasProgress', () => {
   it('is false for a fresh wizard', () => {
@@ -10,13 +12,23 @@ describe('hasProgress', () => {
   });
 
   it('ignores an auto-prefilled BRP address at step 0', () => {
-    const s = invullen({ draft: { straat: 'Lange Voorhout 9', postcode: '2514 EA', woonplaats: 'Den Haag', adresHerkomst: 'brp', antwoorden: {} } });
+    const s = invullen({
+      draft: {
+        straat: 'Lange Voorhout 9',
+        postcode: '2514 EA',
+        woonplaats: 'Den Haag',
+        adresHerkomst: 'brp',
+        antwoorden: {},
+      },
+    });
     expect(hasProgress(s)).toBe(false);
   });
 
   it('is true once the user advances, picks correspondence/diploma, or is past step 0', () => {
     expect(hasProgress(invullen({ cursor: 1 }))).toBe(true);
-    expect(hasProgress(invullen({ draft: { correspondentie: 'post', antwoorden: {} } }))).toBe(true);
+    expect(hasProgress(invullen({ draft: { correspondentie: 'post', antwoorden: {} } }))).toBe(
+      true,
+    );
     expect(hasProgress(invullen({ draft: { diplomaId: 'd1', antwoorden: {} } }))).toBe(true);
   });
 });

src/app/registratie/domain/registratie-wizard.machine.spec.ts

@@ -29,8 +29,19 @@ const invullen = (draft: Partial<Draft>, cursor = 0): RegistratieState => ({
   upload: initialUpload,
 });
 
-const validAdres = { straat: 'Lange Voorhout 9', postcode: '2514 EA', woonplaats: 'Den Haag', correspondentie: 'post' as const, adresHerkomst: 'brp' as const };
-const validDraft: Partial<Draft> = { ...validAdres, diplomaId: 'd1', beroep: 'Arts', diplomaHerkomst: 'duo' };
+const validAdres = {
+  straat: 'Lange Voorhout 9',
+  postcode: '2514 EA',
+  woonplaats: 'Den Haag',
+  correspondentie: 'post' as const,
+  adresHerkomst: 'brp' as const,
+};
+const validDraft: Partial<Draft> = {
+  ...validAdres,
+  diplomaId: 'd1',
+  beroep: 'Arts',
+  diplomaHerkomst: 'duo',
+};
 
 describe('STEPS (fixed)', () => {
   it('always has the same three steps', () => {
@@ -106,7 +117,18 @@ describe('adres origin (BRP vs handmatig)', () => {
   });
 
   it('a manually entered address still submits (only manual diploma is gated)', () => {
-    const s = submit(invullen({ straat: 'Kerkstraat 1', postcode: '1234 AB', woonplaats: 'Utrecht', correspondentie: 'post', adresHerkomst: 'handmatig', diplomaId: 'd1', beroep: 'Arts', diplomaHerkomst: 'duo' }));
+    const s = submit(
+      invullen({
+        straat: 'Kerkstraat 1',
+        postcode: '1234 AB',
+        woonplaats: 'Utrecht',
+        correspondentie: 'post',
+        adresHerkomst: 'handmatig',
+        diplomaId: 'd1',
+        beroep: 'Arts',
+        diplomaHerkomst: 'duo',
+      }),
+    );
     expect(s.tag).toBe('Indienen');
     expect((s as any).data.adresHerkomst).toBe('handmatig');
   });
@@ -185,7 +207,12 @@ describe('submit', () => {
 describe('reduce (message-driven happy path)', () => {
   it('drives the full flow via messages', () => {
     let s: RegistratieState = initial;
-    s = reduce(s, { tag: 'PrefillAdres', straat: 'Lange Voorhout 9', postcode: '2514 EA', woonplaats: 'Den Haag' });
+    s = reduce(s, {
+      tag: 'PrefillAdres',
+      straat: 'Lange Voorhout 9',
+      postcode: '2514 EA',
+      woonplaats: 'Den Haag',
+    });
     s = reduce(s, { tag: 'SetCorrespondentie', value: 'post' });
     s = reduce(s, { tag: 'Next' });
     expect(currentStep(s as any)).toBe('beroep');
@@ -199,7 +226,10 @@ describe('reduce (message-driven happy path)', () => {
   });
 
   it('SubmitFailed then Retry returns to Indienen with the same data', () => {
-    let s = reduce(reduce(invullen(validDraft), { tag: 'Submit' }), { tag: 'SubmitFailed', error: 'boom' });
+    let s = reduce(reduce(invullen(validDraft), { tag: 'Submit' }), {
+      tag: 'SubmitFailed',
+      error: 'boom',
+    });
     expect(s.tag).toBe('Mislukt');
     s = reduce(s, { tag: 'Retry' });
     expect(s.tag).toBe('Indienen');
@@ -208,27 +238,51 @@ describe('reduce (message-driven happy path)', () => {
 });
 
 describe('inline document upload (beroep step)', () => {
-  const cat = { categoryId: 'diploma', label: 'Diploma', description: '', required: true, acceptedTypes: [], maxSizeMb: 10, multiple: false, allowPostDelivery: true };
+  const cat = {
+    categoryId: 'diploma',
+    label: 'Diploma',
+    description: '',
+    required: true,
+    acceptedTypes: [],
+    maxSizeMb: 10,
+    multiple: false,
+    allowPostDelivery: true,
+  };
 
   it('routes Upload messages through the upload reducer', () => {
-    const s = reduce(invullen(validDraft), { tag: 'Upload', msg: { type: 'CategoriesLoaded', categories: [cat] } });
+    const s = reduce(invullen(validDraft), {
+      tag: 'Upload',
+      msg: { type: 'CategoriesLoaded', categories: [cat] },
+    });
     expect((s as any).upload.categories).toHaveLength(1);
   });
 
   it('blocks the beroep step until a required category is satisfied', () => {
-    let s = reduce(invullen(validDraft, 1), { tag: 'Upload', msg: { type: 'CategoriesLoaded', categories: [cat] } });
+    let s = reduce(invullen(validDraft, 1), {
+      tag: 'Upload',
+      msg: { type: 'CategoriesLoaded', categories: [cat] },
+    });
     s = reduce(s, { tag: 'Next' }); // beroep → controle blocked
     expect(currentStep(s as any)).toBe('beroep');
     expect((s as any).errors.documenten).toBeTruthy();
     // choosing post delivery satisfies the requirement
-    s = reduce(s, { tag: 'Upload', msg: { type: 'DeliveryChannelChanged', categoryId: 'diploma', channel: 'post' } });
+    s = reduce(s, {
+      tag: 'Upload',
+      msg: { type: 'DeliveryChannelChanged', categoryId: 'diploma', channel: 'post' },
+    });
     s = reduce(s, { tag: 'Next' });
     expect(currentStep(s as any)).toBe('controle');
   });
 
   it('includes delivery refs in the submitted data', () => {
-    let s = reduce(invullen(validDraft), { tag: 'Upload', msg: { type: 'CategoriesLoaded', categories: [cat] } });
-    s = reduce(s, { tag: 'Upload', msg: { type: 'DeliveryChannelChanged', categoryId: 'diploma', channel: 'post' } });
+    let s = reduce(invullen(validDraft), {
+      tag: 'Upload',
+      msg: { type: 'CategoriesLoaded', categories: [cat] },
+    });
+    s = reduce(s, {
+      tag: 'Upload',
+      msg: { type: 'DeliveryChannelChanged', categoryId: 'diploma', channel: 'post' },
+    });
     const done = submit(s as any);
     expect(done.tag).toBe('Indienen');
     expect((done as any).data.documents).toEqual([{ categoryId: 'diploma', channel: 'post' }]);

src/app/registratie/domain/registratie-wizard.machine.ts

@@ -84,7 +84,13 @@ export type RegistratieState =
   | { tag: 'Mislukt'; data: ValidRegistratie; error: string };
 
 const emptyDraft: Draft = { antwoorden: {} };
-export const initial: RegistratieState = { tag: 'Invullen', draft: emptyDraft, cursor: 0, errors: {}, upload: initialUpload };
+export const initial: RegistratieState = {
+  tag: 'Invullen',
+  draft: emptyDraft,
+  cursor: 0,
+  errors: {},
+  upload: initialUpload,
+};
 
 /** Which step the cursor currently points at (clamped to the fixed list). */
 export function currentStep(s: Extract<RegistratieState, { tag: 'Invullen' }>): StepId {
@@ -112,11 +118,14 @@ function validateStep(step: StepId, d: Draft, upload: UploadState): Result<Error
   const errors: Errors = {};
   switch (step) {
     case 'adres': {
-      if (!d.straat || d.straat.trim() === '') errors.straat = $localize`:@@validation.straat2:Vul een straat en huisnummer in.`;
+      if (!d.straat || d.straat.trim() === '')
+        errors.straat = $localize`:@@validation.straat2:Vul een straat en huisnummer in.`;
       const pc = parsePostcode(d.postcode ?? '');
       if (!pc.ok) errors.postcode = pc.error;
-      if (!d.woonplaats || d.woonplaats.trim() === '') errors.woonplaats = $localize`:@@validation.woonplaats:Vul een woonplaats in.`;
-      if (!d.correspondentie) errors.correspondentie = $localize`:@@validation.maakKeuze:Maak een keuze.`;
+      if (!d.woonplaats || d.woonplaats.trim() === '')
+        errors.woonplaats = $localize`:@@validation.woonplaats:Vul een woonplaats in.`;
+      if (!d.correspondentie)
+        errors.correspondentie = $localize`:@@validation.maakKeuze:Maak een keuze.`;
       // E-mail is only required when 'email' is the chosen channel.
       if (d.correspondentie === 'email') {
         const e = parseEmail(d.email ?? '');
@@ -135,7 +144,8 @@ function validateStep(step: StepId, d: Draft, upload: UploadState): Result<Error
       // they're answered.
       const open: Record<string, string> = {};
       for (const id of d.vraagIds ?? []) {
-        if (!(d.antwoorden[id] ?? '').trim()) open[id] = $localize`:@@validation.beantwoordVraag:Beantwoord deze vraag.`;
+        if (!(d.antwoorden[id] ?? '').trim())
+          open[id] = $localize`:@@validation.beantwoordVraag:Beantwoord deze vraag.`;
       }
       if (Object.keys(open).length > 0) errors.antwoorden = open;
       // Required documents for this wizard attach to the beroep step (inline upload).
@@ -186,7 +196,8 @@ export function setField(s: RegistratieState, key: DraftField, value: string): R
   if (s.tag !== 'Invullen') return s;
   const draft: Draft = { ...s.draft, [key]: value };
   // Editing an address field means the user owns it now — not the BRP copy.
-  if (key === 'straat' || key === 'postcode' || key === 'woonplaats') draft.adresHerkomst = 'handmatig';
+  if (key === 'straat' || key === 'postcode' || key === 'woonplaats')
+    draft.adresHerkomst = 'handmatig';
   return { ...s, draft };
 }
 
@@ -196,16 +207,30 @@ export function setCorrespondentie(s: RegistratieState, value: Correspondentie):
 }
 
 /** Prefill the address from a BRP lookup and flag its origin (PRD §7). */
-export function prefillAdres(s: RegistratieState, straat: string, postcode: string, woonplaats: string): RegistratieState {
+export function prefillAdres(
+  s: RegistratieState,
+  straat: string,
+  postcode: string,
+  woonplaats: string,
+): RegistratieState {
   if (s.tag !== 'Invullen') return s;
   return { ...s, draft: { ...s.draft, straat, postcode, woonplaats, adresHerkomst: 'brp' } };
 }
 
 /** Pick a DUO diploma; the beroep is derived from it and the applicable policy
     questions (`vraagIds`) come with it (both server-computed, passed in). */
-export function kiesDiploma(s: RegistratieState, diplomaId: string, beroep: string, vraagIds: string[]): RegistratieState {
+export function kiesDiploma(
+  s: RegistratieState,
+  diplomaId: string,
+  beroep: string,
+  vraagIds: string[],
+): RegistratieState {
   if (s.tag !== 'Invullen') return s;
-  return { ...s, draft: { ...s.draft, diplomaId, beroep, vraagIds, diplomaHerkomst: 'duo' }, errors: {} };
+  return {
+    ...s,
+    draft: { ...s.draft, diplomaId, beroep, vraagIds, diplomaHerkomst: 'duo' },
+    errors: {},
+  };
 }
 
 /** Switch to manual diploma entry: the diploma isn't in DUO, so the MAXIMAL
@@ -213,7 +238,17 @@ export function kiesDiploma(s: RegistratieState, diplomaId: string, beroep: stri
     beroep is declared separately (declareerBeroep). */
 export function kiesHandmatig(s: RegistratieState, vraagIds: string[]): RegistratieState {
   if (s.tag !== 'Invullen') return s;
-  return { ...s, draft: { ...s.draft, diplomaId: 'handmatig', beroep: undefined, vraagIds, diplomaHerkomst: 'handmatig' }, errors: {} };
+  return {
+    ...s,
+    draft: {
+      ...s.draft,
+      diplomaId: 'handmatig',
+      beroep: undefined,
+      vraagIds,
+      diplomaHerkomst: 'handmatig',
+    },
+    errors: {},
+  };
 }
 
 /** Declare the beroep for a manually-entered diploma (chosen from a fixed list). */
@@ -260,7 +295,9 @@ export function upload(s: RegistratieState, msg: UploadMsg): RegistratieState {
 
 export function resolve(s: RegistratieState, r: Result<string, string>): RegistratieState {
   if (s.tag !== 'Indienen') return s;
-  return r.ok ? { tag: 'Ingediend', data: s.data, referentie: r.value } : { tag: 'Mislukt', data: s.data, error: r.error };
+  return r.ok
+    ? { tag: 'Ingediend', data: s.data, referentie: r.value }
+    : { tag: 'Mislukt', data: s.data, error: r.error };
 }
 
 export type RegistratieMsg =
@@ -308,7 +345,9 @@ export function reduce(s: RegistratieState, m: RegistratieMsg): RegistratieState
     case 'Retry':
       return s.tag === 'Mislukt' ? { tag: 'Indienen', data: s.data } : s;
     case 'SubmitConfirmed':
-      return s.tag === 'Indienen' ? { tag: 'Ingediend', data: s.data, referentie: m.referentie } : s;
+      return s.tag === 'Indienen'
+        ? { tag: 'Ingediend', data: s.data, referentie: m.referentie }
+        : s;
     case 'SubmitFailed':
       return s.tag === 'Indienen' ? { tag: 'Mislukt', data: s.data, error: m.error } : s;
     case 'Upload':

src/app/registratie/domain/registration.policy.spec.ts

@@ -3,8 +3,12 @@ import { Registration } from './registration';
 import { isHerregistratieEligible, statusColor } from './registration.policy';
 
 const reg = (status: Registration['status']): Registration => ({
-  bigNummer: '19012345601', naam: 'Test', beroep: 'Arts',
-  registratiedatum: '2012-09-01', geboortedatum: '1985-03-14', status,
+  bigNummer: '19012345601',
+  naam: 'Test',
+  beroep: 'Arts',
+  registratiedatum: '2012-09-01',
+  geboortedatum: '1985-03-14',
+  status,
 });
 
 describe('registration.policy', () => {
@@ -15,8 +19,18 @@ describe('registration.policy', () => {
   });
 
   it('struck-off / suspended registrations are never eligible', () => {
-    expect(isHerregistratieEligible(reg({ tag: 'Doorgehaald', doorgehaaldOp: '2024-05-01', reden: 'x' }), new Date('2027-01-01'))).toBe(false);
-    expect(isHerregistratieEligible(reg({ tag: 'Geschorst', geschorstTot: '2026-12-31', reden: 'x' }), new Date('2027-01-01'))).toBe(false);
+    expect(
+      isHerregistratieEligible(
+        reg({ tag: 'Doorgehaald', doorgehaaldOp: '2024-05-01', reden: 'x' }),
+        new Date('2027-01-01'),
+      ),
+    ).toBe(false);
+    expect(
+      isHerregistratieEligible(
+        reg({ tag: 'Geschorst', geschorstTot: '2026-12-31', reden: 'x' }),
+        new Date('2027-01-01'),
+      ),
+    ).toBe(false);
   });
 
   it('statusColor is total over the union', () => {

src/app/registratie/domain/registration.policy.ts

@@ -38,7 +38,11 @@ export function herregistratieDeadline(reg: Registration): Date | null {
     SERVER-OWNED RULE: this now runs on the backend (BFF), which ships the result
     as `decisions.eligibleForHerregistratie` in the dashboard view. Kept here as
     the reference implementation + unit test; the frontend no longer calls it. */
-export function isHerregistratieEligible(reg: Registration, today: Date, windowMonths = 12): boolean {
+export function isHerregistratieEligible(
+  reg: Registration,
+  today: Date,
+  windowMonths = 12,
+): boolean {
   const deadline = herregistratieDeadline(reg);
   if (!deadline) return false;
   const windowStart = new Date(deadline);

src/app/registratie/domain/tasks.spec.ts

@@ -24,7 +24,10 @@ describe('tasksFromProfile', () => {
   });
 
   it('surfaces a notice for a suspended registration (independent of eligibility)', () => {
-    const reg: Registration = { ...base, status: { tag: 'Geschorst', geschorstTot: '2027-01-01', reden: 'Onderzoek' } };
+    const reg: Registration = {
+      ...base,
+      status: { tag: 'Geschorst', geschorstTot: '2027-01-01', reden: 'Onderzoek' },
+    };
     const tasks = tasksFromProfile(reg, false);
     expect(tasks).toHaveLength(1);
     expect(tasks[0].title).toContain('geschorst');
@@ -32,7 +35,10 @@ describe('tasksFromProfile', () => {
   });
 
   it('surfaces a notice for a struck-off registration', () => {
-    const reg: Registration = { ...base, status: { tag: 'Doorgehaald', doorgehaaldOp: '2025-01-01', reden: 'Op eigen verzoek' } };
+    const reg: Registration = {
+      ...base,
+      status: { tag: 'Doorgehaald', doorgehaaldOp: '2025-01-01', reden: 'Op eigen verzoek' },
+    };
     const tasks = tasksFromProfile(reg, false);
     expect(tasks).toHaveLength(1);
     expect(tasks[0].title).toContain('doorgehaald');

src/app/registratie/domain/tasks.ts

@@ -22,7 +22,10 @@ function formatNL(d: Date): string {
  * it does not recompute the rule (ADR-0001). The deadline is still formatted
  * client-side for the task copy (presentation, not a rule).
  */
-export function tasksFromProfile(reg: Registration, eligibleForHerregistratie: boolean): PortalTask[] {
+export function tasksFromProfile(
+  reg: Registration,
+  eligibleForHerregistratie: boolean,
+): PortalTask[] {
   const tasks: PortalTask[] = [];
 
   if (eligibleForHerregistratie) {

src/app/registratie/domain/value-objects/big-nummer.ts

@@ -5,5 +5,7 @@ export type BigNummer = Brand<string, 'BigNummer'>;
 
 export function parseBigNummer(raw: string): Result<string, BigNummer> {
   const t = raw.trim();
-  return /^\d{11}$/.test(t) ? ok(t as BigNummer) : err($localize`:@@validation.bigNummer:Een BIG-nummer bestaat uit 11 cijfers.`);
+  return /^\d{11}$/.test(t)
+    ? ok(t as BigNummer)
+    : err($localize`:@@validation.bigNummer:Een BIG-nummer bestaat uit 11 cijfers.`);
 }

src/app/registratie/domain/value-objects/email.ts

@@ -13,7 +13,9 @@ export function parseEmail(raw: string): Result<string, Email> {
   // Deliberately lax: a single @ with non-empty, dot-bearing parts. Good enough
   // for instant feedback; the server re-validates.
   if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t)) {
-    return err($localize`:@@validation.email:Voer een geldig e-mailadres in, bijv. naam@voorbeeld.nl.`);
+    return err(
+      $localize`:@@validation.email:Voer een geldig e-mailadres in, bijv. naam@voorbeeld.nl.`,
+    );
   }
   return ok(t as Email);
 }

src/app/registratie/domain/value-objects/uren.spec.ts

@@ -3,7 +3,11 @@ import { parseUren } from './uren';
 
 describe('parseUren', () => {
   it('accepts non-negative whole numbers, including 0', () => {
-    for (const [raw, n] of [['0', 0], [' 40 ', 40], ['1000', 1000]] as const) {
+    for (const [raw, n] of [
+      ['0', 0],
+      [' 40 ', 40],
+      ['1000', 1000],
+    ] as const) {
       const r = parseUren(raw);
       expect(r.ok).toBe(true);
       if (r.ok) expect(r.value).toBe(n);

src/app/registratie/infrastructure/applications.adapter.spec.ts

@@ -1,14 +1,33 @@
 import { describe, it, expect } from 'vitest';
-import { parseAanvraagStatus, parseApplicationSummary, parseApplications, parseApplicationDetail } from './applications.adapter';
+import {
+  parseAanvraagStatus,
+  parseApplicationSummary,
+  parseApplications,
+  parseApplicationDetail,
+} from './applications.adapter';
 
-const concept = { id: 'a1', type: 'registratie', status: { tag: 'Concept', stepIndex: 1, stepCount: 4 }, documentIds: [], createdAt: '2026-07-01T10:00:00Z', updatedAt: '2026-07-01T10:05:00Z' };
+const concept = {
+  id: 'a1',
+  type: 'registratie',
+  status: { tag: 'Concept', stepIndex: 1, stepCount: 4 },
+  documentIds: [],
+  createdAt: '2026-07-01T10:00:00Z',
+  updatedAt: '2026-07-01T10:05:00Z',
+};
 
 describe('parseAanvraagStatus', () => {
   it('parses each tag with its required fields', () => {
-    expect(parseAanvraagStatus({ tag: 'Concept', stepIndex: 2, stepCount: 4 })).toEqual({ ok: true, value: { tag: 'Concept', stepIndex: 2, stepCount: 4 } });
-    expect(parseAanvraagStatus({ tag: 'InBehandeling', referentie: 'BIG-1', manual: true }).ok).toBe(true);
+    expect(parseAanvraagStatus({ tag: 'Concept', stepIndex: 2, stepCount: 4 })).toEqual({
+      ok: true,
+      value: { tag: 'Concept', stepIndex: 2, stepCount: 4 },
+    });
+    expect(
+      parseAanvraagStatus({ tag: 'InBehandeling', referentie: 'BIG-1', manual: true }).ok,
+    ).toBe(true);
     expect(parseAanvraagStatus({ tag: 'Goedgekeurd', referentie: 'BIG-1' }).ok).toBe(true);
-    expect(parseAanvraagStatus({ tag: 'Afgewezen', referentie: 'BIG-1', reden: 'geen uren' }).ok).toBe(true);
+    expect(
+      parseAanvraagStatus({ tag: 'Afgewezen', referentie: 'BIG-1', reden: 'geen uren' }).ok,
+    ).toBe(true);
   });
 
   it('rejects a missing status, unknown tag, and wrong-typed fields', () => {

src/app/registratie/infrastructure/applications.adapter.ts

@@ -9,7 +9,12 @@ import {
   SubmitApplicationRequest,
   SubmitApplicationResponse,
 } from '@shared/infrastructure/api-client';
-import { Aanvraag, AanvraagDetail, AanvraagStatus, AanvraagType } from '@registratie/domain/aanvraag';
+import {
+  Aanvraag,
+  AanvraagDetail,
+  AanvraagStatus,
+  AanvraagType,
+} from '@registratie/domain/aanvraag';
 
 /**
  * Infrastructure adapter for the backend-owned Aanvraag aggregate — the only place
@@ -54,20 +59,25 @@ export class ApplicationsAdapter {
 const AANVRAAG_TYPES: readonly string[] = ['registratie', 'herregistratie', 'intake'];
 
 /** Trust-boundary parse of the status union — the tag drives which fields must exist. */
-export function parseAanvraagStatus(s: AanvraagStatusDto | undefined): Result<string, AanvraagStatus> {
+export function parseAanvraagStatus(
+  s: AanvraagStatusDto | undefined,
+): Result<string, AanvraagStatus> {
   if (!s || typeof s.tag !== 'string') return err('aanvraag: missing status');
   switch (s.tag) {
     case 'Concept':
-      if (typeof s.stepIndex !== 'number' || typeof s.stepCount !== 'number') return err('aanvraag: bad Concept status');
+      if (typeof s.stepIndex !== 'number' || typeof s.stepCount !== 'number')
+        return err('aanvraag: bad Concept status');
       return ok({ tag: 'Concept', stepIndex: s.stepIndex, stepCount: s.stepCount });
     case 'InBehandeling':
-      if (typeof s.referentie !== 'string' || typeof s.manual !== 'boolean') return err('aanvraag: bad InBehandeling status');
+      if (typeof s.referentie !== 'string' || typeof s.manual !== 'boolean')
+        return err('aanvraag: bad InBehandeling status');
       return ok({ tag: 'InBehandeling', referentie: s.referentie, manual: s.manual });
     case 'Goedgekeurd':
       if (typeof s.referentie !== 'string') return err('aanvraag: bad Goedgekeurd status');
       return ok({ tag: 'Goedgekeurd', referentie: s.referentie });
     case 'Afgewezen':
-      if (typeof s.referentie !== 'string' || typeof s.reden !== 'string') return err('aanvraag: bad Afgewezen status');
+      if (typeof s.referentie !== 'string' || typeof s.reden !== 'string')
+        return err('aanvraag: bad Afgewezen status');
       return ok({ tag: 'Afgewezen', referentie: s.referentie, reden: s.reden });
     default:
       return err(`aanvraag: unknown status tag ${s.tag}`);
@@ -76,8 +86,10 @@ export function parseAanvraagStatus(s: AanvraagStatusDto | undefined): Result<st
 
 function parseCommon(dto: ApplicationSummaryDto): Result<string, Aanvraag> {
   if (typeof dto.id !== 'string') return err('aanvraag: missing id');
-  if (typeof dto.type !== 'string' || !AANVRAAG_TYPES.includes(dto.type)) return err(`aanvraag: bad type ${dto.type}`);
-  if (typeof dto.createdAt !== 'string' || typeof dto.updatedAt !== 'string') return err('aanvraag: missing timestamps');
+  if (typeof dto.type !== 'string' || !AANVRAAG_TYPES.includes(dto.type))
+    return err(`aanvraag: bad type ${dto.type}`);
+  if (typeof dto.createdAt !== 'string' || typeof dto.updatedAt !== 'string')
+    return err('aanvraag: missing timestamps');
   const status = parseAanvraagStatus(dto.status);
   if (!status.ok) return status;
   return ok({

src/app/registratie/infrastructure/big-register.adapter.ts

@@ -22,5 +22,9 @@ export class BigRegisterAdapter {
 
 /** Map the wire DTO (all fields optional) onto our domain type. */
 function toAantekening(n: AantekeningDto): Aantekening {
-  return { type: n.type as AantekeningType, omschrijving: n.omschrijving ?? '', datum: n.datum ?? '' };
+  return {
+    type: n.type as AantekeningType,
+    omschrijving: n.omschrijving ?? '',
+    datum: n.datum ?? '',
+  };
 }

src/app/registratie/infrastructure/brp.adapter.spec.ts

@@ -3,7 +3,10 @@ import { parseBrpAddress } from './brp.adapter';
 
 describe('parseBrpAddress (trust boundary)', () => {
   it('accepts a found address', () => {
-    const r = parseBrpAddress({ gevonden: true, adres: { straat: 'Lange Voorhout 9', postcode: '2514 EA', woonplaats: 'Den Haag' } });
+    const r = parseBrpAddress({
+      gevonden: true,
+      adres: { straat: 'Lange Voorhout 9', postcode: '2514 EA', woonplaats: 'Den Haag' },
+    });
     expect(r.ok).toBe(true);
     if (r.ok) expect(r.value.adres?.postcode).toBe('2514 EA');
   });

src/app/registratie/infrastructure/brp.adapter.ts

@@ -27,7 +27,12 @@ export function parseBrpAddress(json: unknown): Result<string, BrpAddressDto> {
   if (typeof dto.gevonden !== 'boolean') return err('brp-address: missing/invalid gevonden');
   if (dto.gevonden) {
     const a = dto.adres;
-    if (!a || typeof a.straat !== 'string' || typeof a.postcode !== 'string' || typeof a.woonplaats !== 'string') {
+    if (
+      !a ||
+      typeof a.straat !== 'string' ||
+      typeof a.postcode !== 'string' ||
+      typeof a.woonplaats !== 'string'
+    ) {
       return err('brp-address: missing/invalid adres');
     }
   }

src/app/registratie/infrastructure/dashboard-view.adapter.spec.ts

@@ -10,7 +10,11 @@ const valid = {
     geboortedatum: '1985-03-14',
     status: { tag: 'Geregistreerd', herregistratieDatum: '2027-03-01' },
   },
-  person: { naam: 'Dr. A. de Vries', geboortedatum: '1985-03-14', adres: { straat: 'X 1', postcode: '2514 EA', woonplaats: 'Den Haag' } },
+  person: {
+    naam: 'Dr. A. de Vries',
+    geboortedatum: '1985-03-14',
+    adres: { straat: 'X 1', postcode: '2514 EA', woonplaats: 'Den Haag' },
+  },
   decisions: { eligibleForHerregistratie: true, herregistratieReason: 'within window' },
 };
 
@@ -27,6 +31,8 @@ describe('parseDashboardView (trust boundary)', () => {
   it('rejects malformed responses instead of trusting them', () => {
     expect(parseDashboardView(null).ok).toBe(false);
     expect(parseDashboardView({ ...valid, registration: undefined }).ok).toBe(false);
-    expect(parseDashboardView({ ...valid, decisions: { eligibleForHerregistratie: 'yes' } }).ok).toBe(false);
+    expect(
+      parseDashboardView({ ...valid, decisions: { eligibleForHerregistratie: 'yes' } }).ok,
+    ).toBe(false);
   });
 });

src/app/registratie/infrastructure/dashboard-view.adapter.ts

@@ -1,6 +1,9 @@
 import { Injectable, inject, resource } from '@angular/core';
 import { Result, ok, err } from '@shared/kernel/fp';
-import { DashboardViewDto, HerregistratieDecisions } from '@registratie/contracts/dashboard-view.dto';
+import {
+  DashboardViewDto,
+  HerregistratieDecisions,
+} from '@registratie/contracts/dashboard-view.dto';
 import { Registration } from '@registratie/domain/registration';
 import { Person } from '@registratie/domain/person';
 import { BigProfile } from '@registratie/domain/big-profile';
@@ -49,7 +52,12 @@ export function parseDashboardView(json: unknown): Result<string, DashboardView>
   const dto = json as Partial<DashboardViewDto>;
 
   const reg = dto.registration;
-  if (!reg || typeof reg.bigNummer !== 'string' || !reg.status || typeof reg.status.tag !== 'string') {
+  if (
+    !reg ||
+    typeof reg.bigNummer !== 'string' ||
+    !reg.status ||
+    typeof reg.status.tag !== 'string'
+  ) {
     return err('dashboard-view: missing/invalid registration');
   }
   const person = dto.person;
@@ -72,10 +80,17 @@ export function parseDashboardView(json: unknown): Result<string, DashboardView>
     geboortedatum: reg.geboortedatum,
     status: reg.status,
   };
-  const persoon: Person = { naam: person.naam, geboortedatum: person.geboortedatum, adres: person.adres };
+  const persoon: Person = {
+    naam: person.naam,
+    geboortedatum: person.geboortedatum,
+    adres: person.adres,
+  };
 
   return ok({
     profile: { registration, person: persoon },
-    decisions: { eligibleForHerregistratie: d.eligibleForHerregistratie, herregistratieReason: d.herregistratieReason },
+    decisions: {
+      eligibleForHerregistratie: d.eligibleForHerregistratie,
+      herregistratieReason: d.herregistratieReason,
+    },
   });
 }

src/app/registratie/infrastructure/duo.adapter.spec.ts

@@ -3,8 +3,22 @@ import { parseDuoLookup } from './duo.adapter';
 
 const valid = {
   diplomas: [
-    { id: 'd1', naam: 'Geneeskunde', instelling: 'Universiteit Leiden', jaar: 2011, beroep: 'Arts', policyQuestions: [] },
-    { id: 'd2', naam: 'Medicine', instelling: 'University of Edinburgh', jaar: 2013, beroep: 'Arts', policyQuestions: [{ id: 'nl-taal', vraag: 'Toon taalvaardigheid', type: 'ja-nee' }] },
+    {
+      id: 'd1',
+      naam: 'Geneeskunde',
+      instelling: 'Universiteit Leiden',
+      jaar: 2011,
+      beroep: 'Arts',
+      policyQuestions: [],
+    },
+    {
+      id: 'd2',
+      naam: 'Medicine',
+      instelling: 'University of Edinburgh',
+      jaar: 2013,
+      beroep: 'Arts',
+      policyQuestions: [{ id: 'nl-taal', vraag: 'Toon taalvaardigheid', type: 'ja-nee' }],
+    },
   ],
   handmatig: {
     beroepen: ['Arts', 'Verpleegkundige'],
@@ -34,6 +48,14 @@ describe('parseDuoLookup (trust boundary)', () => {
     expect(parseDuoLookup({}).ok).toBe(false); // no diplomas
     expect(parseDuoLookup({ diplomas: [] }).ok).toBe(false); // no handmatig
     expect(parseDuoLookup({ diplomas: [{ id: 'd1' }], handmatig: valid.handmatig }).ok).toBe(false); // bad diploma
-    expect(parseDuoLookup({ diplomas: [], handmatig: { beroepen: ['Arts'], policyQuestions: [{ id: 'x', vraag: 'y', type: 'bogus' }] } }).ok).toBe(false); // bad question type
+    expect(
+      parseDuoLookup({
+        diplomas: [],
+        handmatig: {
+          beroepen: ['Arts'],
+          policyQuestions: [{ id: 'x', vraag: 'y', type: 'bogus' }],
+        },
+      }).ok,
+    ).toBe(false); // bad question type
   });
 });

src/app/registratie/infrastructure/duo.adapter.ts

@@ -1,6 +1,11 @@
 import { Injectable, inject, resource } from '@angular/core';
 import { Result, ok, err } from '@shared/kernel/fp';
-import { DuoLookupDto, DuoDiplomaDto, PolicyQuestionDto, ManualDiplomaPolicyDto } from '@registratie/contracts/duo-diplomas.dto';
+import {
+  DuoLookupDto,
+  DuoDiplomaDto,
+  PolicyQuestionDto,
+  ManualDiplomaPolicyDto,
+} from '@registratie/contracts/duo-diplomas.dto';
 import { ApiClient } from '@shared/infrastructure/api-client';
 
 /**
@@ -25,7 +30,12 @@ function parseQuestions(json: unknown): PolicyQuestionDto[] | null {
   for (const q of json) {
     if (typeof q !== 'object' || q === null) return null;
     const p = q as Partial<PolicyQuestionDto>;
-    if (typeof p.id !== 'string' || typeof p.vraag !== 'string' || (p.type !== 'ja-nee' && p.type !== 'tekst')) return null;
+    if (
+      typeof p.id !== 'string' ||
+      typeof p.vraag !== 'string' ||
+      (p.type !== 'ja-nee' && p.type !== 'tekst')
+    )
+      return null;
     out.push({ id: p.id, vraag: p.vraag, type: p.type });
   }
   return out;
@@ -43,10 +53,22 @@ export function parseDuoLookup(json: unknown): Result<string, DuoLookupDto> {
     if (typeof item !== 'object' || item === null) return err('duo-lookup: invalid diploma');
     const d = item as Partial<DuoDiplomaDto>;
     const vragen = parseQuestions(d.policyQuestions);
-    if (typeof d.id !== 'string' || typeof d.naam !== 'string' || typeof d.beroep !== 'string' || vragen === null) {
+    if (
+      typeof d.id !== 'string' ||
+      typeof d.naam !== 'string' ||
+      typeof d.beroep !== 'string' ||
+      vragen === null
+    ) {
       return err('duo-lookup: missing/invalid diploma fields');
     }
-    diplomas.push({ id: d.id, naam: d.naam, instelling: d.instelling ?? '', jaar: typeof d.jaar === 'number' ? d.jaar : 0, beroep: d.beroep, policyQuestions: vragen });
+    diplomas.push({
+      id: d.id,
+      naam: d.naam,
+      instelling: d.instelling ?? '',
+      jaar: typeof d.jaar === 'number' ? d.jaar : 0,
+      beroep: d.beroep,
+      policyQuestions: vragen,
+    });
   }
 
   const hm = dto.handmatig;

src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts

@@ -13,9 +13,16 @@ import { blockActions } from '@registratie/domain/block-actions';
 @Component({
   selector: 'app-aanvraag-block',
   imports: [ButtonComponent, AlertComponent],
-  styles: [`
-    .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}
-  `],
+  styles: [
+    `
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--rhc-space-max-md);
+        margin-block-start: var(--rhc-space-max-sm);
+      }
+    `,
+  ],
   template: `
     @if (aanvraag().status.tag === 'Concept') {
       <app-alert type="warning">
@@ -23,10 +30,14 @@ import { blockActions } from '@registratie/domain/block-actions';
         <p>{{ conceptText() }}</p>
         <div class="actions">
           @if (actions().includes('cancel')) {
-            <app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.verwijderen">Verwijderen</app-button>
+            <app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.verwijderen"
+              >Verwijderen</app-button
+            >
           }
           @if (actions().includes('resume')) {
-            <app-button (click)="resume.emit()" i18n="@@aanvraagBlock.openen">Aanvraag openen</app-button>
+            <app-button (click)="resume.emit()" i18n="@@aanvraagBlock.openen"
+              >Aanvraag openen</app-button
+            >
           }
         </div>
       </app-alert>
@@ -59,5 +70,7 @@ export class AanvraagBlockComponent {
 }
 
 function formatNL(iso?: string): string {
-  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
+  return iso
+    ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })
+    : '';
 }

src/app/registratie/ui/aanvraag-block/aanvraag-block.stories.ts

@@ -38,7 +38,36 @@ export const Concept: Story = {
   args: { aanvraag: { ...base, status: { tag: 'Concept', stepIndex: 1, stepCount: 3 } } },
   render: (args) => ({ props: args, template: `<app-aanvraag-block [aanvraag]="aanvraag" />` }),
 };
-export const InBehandelingAuto: Story = { args: { aanvraag: { ...base, status: { tag: 'InBehandeling', referentie: 'BIG-2026-456789', manual: false } } } };
-export const InBehandelingManual: Story = { args: { aanvraag: { ...base, type: 'registratie', status: { tag: 'InBehandeling', referentie: 'BIG-2026-456789', manual: true } } } };
-export const Goedgekeurd: Story = { args: { aanvraag: { ...base, status: { tag: 'Goedgekeurd', referentie: 'BIG-2026-456789' } } } };
-export const Afgewezen: Story = { args: { aanvraag: { ...base, type: 'herregistratie', status: { tag: 'Afgewezen', referentie: 'BIG-2026-456789', reden: 'Aanvraag afgewezen: geen gewerkte uren geregistreerd.' } } } };
+export const InBehandelingAuto: Story = {
+  args: {
+    aanvraag: {
+      ...base,
+      status: { tag: 'InBehandeling', referentie: 'BIG-2026-456789', manual: false },
+    },
+  },
+};
+export const InBehandelingManual: Story = {
+  args: {
+    aanvraag: {
+      ...base,
+      type: 'registratie',
+      status: { tag: 'InBehandeling', referentie: 'BIG-2026-456789', manual: true },
+    },
+  },
+};
+export const Goedgekeurd: Story = {
+  args: { aanvraag: { ...base, status: { tag: 'Goedgekeurd', referentie: 'BIG-2026-456789' } } },
+};
+export const Afgewezen: Story = {
+  args: {
+    aanvraag: {
+      ...base,
+      type: 'herregistratie',
+      status: {
+        tag: 'Afgewezen',
+        referentie: 'BIG-2026-456789',
+        reden: 'Aanvraag afgewezen: geen gewerkte uren geregistreerd.',
+      },
+    },
+  },
+};

src/app/registratie/ui/aanvraag-detail.page.ts

@@ -15,14 +15,28 @@ import { detailRows } from '@registratie/domain/aanvraag-view';
     handling is future work. The dashboard "Mijn aanvragen" rows link here. */
 @Component({
   selector: 'app-aanvraag-detail-page',
-  imports: [PageShellComponent, SkeletonComponent, AlertComponent, DataBlockComponent, DataRowComponent, ...ASYNC],
+  imports: [
+    PageShellComponent,
+    SkeletonComponent,
+    AlertComponent,
+    DataBlockComponent,
+    DataRowComponent,
+    ...ASYNC,
+  ],
   template: `
-    <app-page-shell i18n-heading="@@aanvraagDetail.heading" heading="Aanvraag" backLink="/dashboard">
+    <app-page-shell
+      i18n-heading="@@aanvraagDetail.heading"
+      heading="Aanvraag"
+      backLink="/dashboard"
+    >
       <app-async [data]="store.applications()">
         <ng-template appAsyncLoaded let-list>
           @let a = find($any(list));
           @if (a) {
-            <app-data-block i18n-ariaLabel="@@aanvraagDetail.ariaLabel" ariaLabel="Aanvraaggegevens">
+            <app-data-block
+              i18n-ariaLabel="@@aanvraagDetail.ariaLabel"
+              ariaLabel="Aanvraaggegevens"
+            >
               @for (row of rows(a); track row.key) {
                 <div app-data-row [key]="row.key" [value]="row.value"></div>
               }
@@ -31,7 +45,9 @@ import { detailRows } from '@registratie/domain/aanvraag-view';
               De volledige afhandeling van deze aanvraag is nog niet beschikbaar in deze POC.
             </app-alert>
           } @else {
-            <app-alert type="warning" i18n="@@aanvraagDetail.nietGevonden">Deze aanvraag is niet gevonden.</app-alert>
+            <app-alert type="warning" i18n="@@aanvraagDetail.nietGevonden"
+              >Deze aanvraag is niet gevonden.</app-alert
+            >
           }
         </ng-template>
         <ng-template appAsyncLoading>

src/app/registratie/ui/address-fields/address-fields.component.ts

@@ -19,27 +19,73 @@ export type AdresErrors = Partial<Record<keyof AdresValue, string>>;
 @Component({
   selector: 'app-address-fields',
   imports: [FormsModule, FormFieldComponent, TextInputComponent],
-  styles: [`
-    fieldset{border:0;margin:0;padding:0;min-inline-size:0}
-    legend{padding:0;font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-end:var(--rhc-space-max-md)}
-  `],
+  styles: [
+    `
+      fieldset {
+        border: 0;
+        margin: 0;
+        padding: 0;
+        min-inline-size: 0;
+      }
+      legend {
+        padding: 0;
+        font-weight: var(--rhc-text-font-weight-semi-bold);
+        margin-block-end: var(--rhc-space-max-md);
+      }
+    `,
+  ],
   template: `
     <fieldset>
       <legend>{{ legend() }}</legend>
-      <app-form-field i18n-label="@@address.straat" label="Straat en huisnummer" [fieldId]="idPrefix() + '-straat'" required [error]="errors().straat">
-        <app-text-input [inputId]="idPrefix() + '-straat'" [invalid]="!!errors().straat"
-          [ngModel]="value().straat" (ngModelChange)="fieldChange.emit({ key: 'straat', value: $event })"
-          name="straat" [ngModelOptions]="{ standalone: true }" />
+      <app-form-field
+        i18n-label="@@address.straat"
+        label="Straat en huisnummer"
+        [fieldId]="idPrefix() + '-straat'"
+        required
+        [error]="errors().straat"
+      >
+        <app-text-input
+          [inputId]="idPrefix() + '-straat'"
+          [invalid]="!!errors().straat"
+          [ngModel]="value().straat"
+          (ngModelChange)="fieldChange.emit({ key: 'straat', value: $event })"
+          name="straat"
+          [ngModelOptions]="{ standalone: true }"
+        />
       </app-form-field>
-      <app-form-field i18n-label="@@address.postcode" label="Postcode" [fieldId]="idPrefix() + '-postcode'" required [error]="errors().postcode">
-        <app-text-input [inputId]="idPrefix() + '-postcode'" [invalid]="!!errors().postcode"
-          [ngModel]="value().postcode" (ngModelChange)="fieldChange.emit({ key: 'postcode', value: $event })"
-          name="postcode" i18n-placeholder="@@address.postcodePlaceholder" placeholder="1234 AB" [ngModelOptions]="{ standalone: true }" />
+      <app-form-field
+        i18n-label="@@address.postcode"
+        label="Postcode"
+        [fieldId]="idPrefix() + '-postcode'"
+        required
+        [error]="errors().postcode"
+      >
+        <app-text-input
+          [inputId]="idPrefix() + '-postcode'"
+          [invalid]="!!errors().postcode"
+          [ngModel]="value().postcode"
+          (ngModelChange)="fieldChange.emit({ key: 'postcode', value: $event })"
+          name="postcode"
+          i18n-placeholder="@@address.postcodePlaceholder"
+          placeholder="1234 AB"
+          [ngModelOptions]="{ standalone: true }"
+        />
       </app-form-field>
-      <app-form-field i18n-label="@@address.woonplaats" label="Woonplaats" [fieldId]="idPrefix() + '-woonplaats'" required [error]="errors().woonplaats">
-        <app-text-input [inputId]="idPrefix() + '-woonplaats'" [invalid]="!!errors().woonplaats"
-          [ngModel]="value().woonplaats" (ngModelChange)="fieldChange.emit({ key: 'woonplaats', value: $event })"
-          name="woonplaats" [ngModelOptions]="{ standalone: true }" />
+      <app-form-field
+        i18n-label="@@address.woonplaats"
+        label="Woonplaats"
+        [fieldId]="idPrefix() + '-woonplaats'"
+        required
+        [error]="errors().woonplaats"
+      >
+        <app-text-input
+          [inputId]="idPrefix() + '-woonplaats'"
+          [invalid]="!!errors().woonplaats"
+          [ngModel]="value().woonplaats"
+          (ngModelChange)="fieldChange.emit({ key: 'woonplaats', value: $event })"
+          name="woonplaats"
+          [ngModelOptions]="{ standalone: true }"
+        />
       </app-form-field>
     </fieldset>
   `,

src/app/registratie/ui/address-fields/address-fields.stories.ts

@@ -20,12 +20,18 @@ const empty = { straat: '', postcode: '', woonplaats: '' };
 export const Default: Story = { args: { value: empty, errors: {} } };
 
 export const Prefilled: Story = {
-  args: { value: { straat: 'Stationsplein 1', postcode: '3511 ED', woonplaats: 'Utrecht' }, errors: {} },
+  args: {
+    value: { straat: 'Stationsplein 1', postcode: '3511 ED', woonplaats: 'Utrecht' },
+    errors: {},
+  },
 };
 
 export const WithErrors: Story = {
   args: {
     value: { straat: '', postcode: '12', woonplaats: '' },
-    errors: { straat: 'Vul een straat en huisnummer in.', postcode: 'Voer een geldige postcode in, bijv. 1234 AB.' },
+    errors: {
+      straat: 'Vul een straat en huisnummer in.',
+      postcode: 'Voer een geldige postcode in, bijv. 1234 AB.',
+    },
   },
 };

src/app/registratie/ui/change-request-form/change-request-form.component.ts

@@ -3,7 +3,11 @@ import { FormsModule } from '@angular/forms';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { HeadingComponent } from '@shared/ui/heading/heading.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { AddressFieldsComponent, AdresValue, AdresErrors } from '@registratie/ui/address-fields/address-fields.component';
+import {
+  AddressFieldsComponent,
+  AdresValue,
+  AdresErrors,
+} from '@registratie/ui/address-fields/address-fields.component';
 import { createStore } from '@shared/application/store';
 import { whenTag } from '@shared/kernel/fp';
 import { State, Msg, initial, reduce } from '@registratie/domain/change-request.machine';
@@ -21,25 +25,37 @@ import { createSubmitChangeRequest } from '@registratie/application/submit-chang
   template: `
     @if (state().tag === 'Submitted') {
       <app-alert type="ok" i18n="@@changeRequest.success">
-        Uw adreswijziging is ontvangen (referentie {{ referentie() }}). U ontvangt binnen 5 werkdagen bericht.
+        Uw adreswijziging is ontvangen (referentie {{ referentie() }}). U ontvangt binnen 5
+        werkdagen bericht.
       </app-alert>
       <div class="app-section">
-        <app-button variant="secondary" (click)="dispatch({ tag: 'Reset' })" i18n="@@changeRequest.nieuwe">Nieuwe wijziging doorgeven</app-button>
+        <app-button
+          variant="secondary"
+          (click)="dispatch({ tag: 'Reset' })"
+          i18n="@@changeRequest.nieuwe"
+          >Nieuwe wijziging doorgeven</app-button
+        >
       </div>
     } @else {
       <app-heading [level]="2" i18n="@@changeRequest.heading">Adreswijziging doorgeven</app-heading>
       <form (ngSubmit)="onSubmit()" class="form-horizontal app-section">
         <div class="form-header">
-          <div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
+          <div class="form-action">
+            <span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span>
+          </div>
         </div>
         <app-address-fields
           idPrefix="cr"
           [value]="adres()"
           [errors]="errors()"
-          (fieldChange)="dispatch({ tag: 'SetField', key: $event.key, value: $event.value })" />
+          (fieldChange)="dispatch({ tag: 'SetField', key: $event.key, value: $event.value })"
+        />
 
         @if (failedError()) {
-          <app-alert type="error"><ng-container i18n="@@changeRequest.failed">Het indienen is niet gelukt:</ng-container> {{ failedError() }}</app-alert>
+          <app-alert type="error"
+            ><ng-container i18n="@@changeRequest.failed">Het indienen is niet gelukt:</ng-container>
+            {{ failedError() }}</app-alert
+          >
         }
 
         <app-button type="submit" variant="primary" [disabled]="state().tag === 'Submitting'">

src/app/registratie/ui/change-request-form/change-request-form.stories.ts

@@ -5,7 +5,11 @@ import { ChangeRequestFormComponent } from './change-request-form.component';
 import { provideApiClient } from '@shared/infrastructure/api-client.provider';
 import { Postcode } from '@registratie/domain/value-objects/postcode';
 
-const validData = { straat: 'Lange Voorhout 9', postcode: '2514 EA' as Postcode, woonplaats: 'Den Haag' };
+const validData = {
+  straat: 'Lange Voorhout 9',
+  postcode: '2514 EA' as Postcode,
+  woonplaats: 'Den Haag',
+};
 
 const meta: Meta<ChangeRequestFormComponent> = {
   title: 'Organisms/Change Request Form',
@@ -17,16 +21,27 @@ export default meta;
 type Story = StoryObj<ChangeRequestFormComponent>;
 
 // One render per state of the machine.
-export const Empty: Story = { args: { seed: { tag: 'Editing', draft: { straat: '', postcode: '', woonplaats: '' }, errors: {} } } };
+export const Empty: Story = {
+  args: {
+    seed: { tag: 'Editing', draft: { straat: '', postcode: '', woonplaats: '' }, errors: {} },
+  },
+};
 export const WithErrors: Story = {
   args: {
     seed: {
       tag: 'Editing',
       draft: { straat: '', postcode: 'nope', woonplaats: '' },
-      errors: { straat: 'Vul straat en huisnummer in.', postcode: 'Voer een geldige postcode in, bijv. 1234 AB.' },
+      errors: {
+        straat: 'Vul straat en huisnummer in.',
+        postcode: 'Voer een geldige postcode in, bijv. 1234 AB.',
+      },
     },
   },
 };
 export const Submitting: Story = { args: { seed: { tag: 'Submitting', data: validData } } };
-export const Submitted: Story = { args: { seed: { tag: 'Submitted', data: validData, referentie: 'BIG-2026-123456' } } };
-export const Failed: Story = { args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } } };
+export const Submitted: Story = {
+  args: { seed: { tag: 'Submitted', data: validData, referentie: 'BIG-2026-123456' } },
+};
+export const Failed: Story = {
+  args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } },
+};

src/app/registratie/ui/dashboard.page.ts

@@ -25,91 +25,163 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
 @Component({
   selector: 'app-dashboard-page',
   imports: [
-    PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,
-    DataRowComponent, DataBlockComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,
+    PageShellComponent,
+    HeadingComponent,
+    AlertComponent,
+    SkeletonComponent,
+    DataRowComponent,
+    DataBlockComponent,
+    TaskListComponent,
+    ApplicationListComponent,
+    ApplicationLinkComponent,
     ...ASYNC,
-    RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
+    RegistrationSummaryComponent,
+    RegistrationTableComponent,
+    AanvraagBlockComponent,
   ],
   template: `
-    <app-page-shell i18n-heading="@@dashboard.heading" heading="Mijn overzicht" i18n-intro="@@dashboard.intro" intro="Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.">
-        <div class="app-stack">
-          @if (aanvragen().length) {
+    <app-page-shell
+      i18n-heading="@@dashboard.heading"
+      heading="Mijn overzicht"
+      i18n-intro="@@dashboard.intro"
+      intro="Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken."
+    >
+      <div class="app-stack">
+        @if (aanvragen().length) {
+          <section>
+            @for (a of concepten(); track a.id) {
+              <app-aanvraag-block
+                animate.enter="app-item-enter"
+                animate.leave="app-item-leave"
+                [aanvraag]="a"
+                (resume)="resume(a)"
+                (cancel)="cancelAanvraag(a)"
+              />
+            }
+            @if (ingediend().length) {
+              <app-heading [level]="2" class="app-section" i18n="@@dashboard.mijnAanvragen"
+                >Mijn aanvragen</app-heading
+              >
+              <app-application-list>
+                @for (a of ingediend(); track a.id) {
+                  @let row = submittedRow(a);
+                  <li
+                    app-application-link
+                    animate.enter="app-item-enter"
+                    animate.leave="app-item-leave"
+                    [heading]="row.heading"
+                    [subtitle]="row.subtitle"
+                    [status]="row.status"
+                    [to]="'/aanvraag/' + a.id"
+                  ></li>
+                }
+              </app-application-list>
+            }
+          </section>
+        }
+
+        @if (store.pendingHerregistratie()) {
+          <app-alert type="info" i18n="@@dashboard.pendingHerregistratie"
+            >Uw herregistratie-aanvraag is in behandeling.</app-alert
+          >
+        }
+
+        <app-async [data]="store.profile()">
+          <ng-template appAsyncLoaded let-p>
+            @let tasks = tasksFor($any(p).registration);
+
             <section>
-              @for (a of concepten(); track a.id) {
-                <app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
-              }
-              @if (ingediend().length) {
-                <app-heading [level]="2" class="app-section" i18n="@@dashboard.mijnAanvragen">Mijn aanvragen</app-heading>
-                <app-application-list>
-                  @for (a of ingediend(); track a.id) {
-                    @let row = submittedRow(a);
-                    <li app-application-link animate.enter="app-item-enter" animate.leave="app-item-leave" [heading]="row.heading" [subtitle]="row.subtitle" [status]="row.status" [to]="'/aanvraag/' + a.id"></li>
-                  }
-                </app-application-list>
+              @if (tasks.length) {
+                <app-task-list
+                  class="app-section"
+                  i18n-listHeading="@@dashboard.watMoetIkRegelen"
+                  listHeading="Wat moet ik regelen"
+                  [tasks]="tasks"
+                />
+              } @else {
+                <app-heading [level]="2" i18n="@@dashboard.watMoetIkRegelen"
+                  >Wat moet ik regelen</app-heading
+                >
+                <p class="app-text-subtle" i18n="@@dashboard.nietsOpenstaan">
+                  U heeft op dit moment niets openstaan.
+                </p>
               }
             </section>
-          }
 
-          @if (store.pendingHerregistratie()) {
-            <app-alert type="info" i18n="@@dashboard.pendingHerregistratie">Uw herregistratie-aanvraag is in behandeling.</app-alert>
-          }
+            <section>
+              <app-heading [level]="2" i18n="@@dashboard.mijnRegistratie"
+                >Mijn registratie</app-heading
+              >
+              <div class="app-section">
+                <app-registration-summary [reg]="$any(p).registration" />
+              </div>
+              <app-data-block
+                class="app-section"
+                i18n-heading="@@dashboard.persoonsgegevens"
+                heading="Persoonsgegevens (BRP)"
+              >
+                <div
+                  app-data-row
+                  i18n-key="@@dashboard.straat"
+                  key="Straat"
+                  [value]="$any(p).person.adres.straat"
+                ></div>
+                <div
+                  app-data-row
+                  i18n-key="@@dashboard.postcode"
+                  key="Postcode"
+                  [value]="$any(p).person.adres.postcode"
+                ></div>
+                <div
+                  app-data-row
+                  i18n-key="@@dashboard.woonplaats"
+                  key="Woonplaats"
+                  [value]="$any(p).person.adres.woonplaats"
+                ></div>
+              </app-data-block>
+            </section>
+          </ng-template>
+          <ng-template appAsyncLoading>
+            <app-skeleton height="2.5rem" [count]="6" />
+          </ng-template>
+        </app-async>
 
-          <app-async [data]="store.profile()">
-            <ng-template appAsyncLoaded let-p>
-              @let tasks = tasksFor($any(p).registration);
+        <section>
+          <app-heading [level]="2" i18n="@@dashboard.specialismen"
+            >Specialismen en aantekeningen</app-heading
+          >
+          <div class="app-section">
+            <app-async [data]="store.aantekeningen()">
+              <ng-template appAsyncLoaded let-r>
+                <app-registration-table [rows]="$any(r)" />
+              </ng-template>
+              <ng-template appAsyncLoading>
+                <app-skeleton height="2.5rem" [count]="3" />
+              </ng-template>
+              <ng-template appAsyncEmpty>
+                <p class="app-text-subtle" i18n="@@dashboard.geenSpecialismen">
+                  U heeft nog geen specialismen of aantekeningen.
+                </p>
+              </ng-template>
+            </app-async>
+          </div>
+        </section>
 
-              <section>
-                @if (tasks.length) {
-                  <app-task-list class="app-section" i18n-listHeading="@@dashboard.watMoetIkRegelen" listHeading="Wat moet ik regelen" [tasks]="tasks" />
-                } @else {
-                  <app-heading [level]="2" i18n="@@dashboard.watMoetIkRegelen">Wat moet ik regelen</app-heading>
-                  <p class="app-text-subtle" i18n="@@dashboard.nietsOpenstaan">U heeft op dit moment niets openstaan.</p>
-                }
-              </section>
-
-              <section>
-                <app-heading [level]="2" i18n="@@dashboard.mijnRegistratie">Mijn registratie</app-heading>
-                <div class="app-section">
-                  <app-registration-summary [reg]="$any(p).registration" />
-                </div>
-                <app-data-block class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
-                  <div app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat"></div>
-                  <div app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode"></div>
-                  <div app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats"></div>
-                </app-data-block>
-              </section>
-            </ng-template>
-            <ng-template appAsyncLoading>
-              <app-skeleton height="2.5rem" [count]="6" />
-            </ng-template>
-          </app-async>
-
-          <section>
-            <app-heading [level]="2" i18n="@@dashboard.specialismen">Specialismen en aantekeningen</app-heading>
-            <div class="app-section">
-              <app-async [data]="store.aantekeningen()">
-                <ng-template appAsyncLoaded let-r>
-                  <app-registration-table [rows]="$any(r)" />
-                </ng-template>
-                <ng-template appAsyncLoading>
-                  <app-skeleton height="2.5rem" [count]="3" />
-                </ng-template>
-                <ng-template appAsyncEmpty>
-                  <p class="app-text-subtle" i18n="@@dashboard.geenSpecialismen">U heeft nog geen specialismen of aantekeningen.</p>
-                </ng-template>
-              </app-async>
-            </div>
-          </section>
-
-          <section>
-            <app-heading [level]="2" i18n="@@dashboard.watWiltUDoen">Wat wilt u doen?</app-heading>
-            <app-application-list class="app-section">
-              @for (a of acties; track a.to) {
-                <li app-application-link [heading]="a.titel" [subtitle]="a.tekst" [cta]="a.actie" [to]="a.to"></li>
-              }
-            </app-application-list>
-          </section>
-        </div>
+        <section>
+          <app-heading [level]="2" i18n="@@dashboard.watWiltUDoen">Wat wilt u doen?</app-heading>
+          <app-application-list class="app-section">
+            @for (a of acties; track a.to) {
+              <li
+                app-application-link
+                [heading]="a.titel"
+                [subtitle]="a.tekst"
+                [cta]="a.actie"
+                [to]="a.to"
+              ></li>
+            }
+          </app-application-list>
+        </section>
+      </div>
     </app-page-shell>
   `,
 })
@@ -132,7 +204,12 @@ export class DashboardPage {
   protected aanvragen = computed<Aanvraag[]>(() => {
     const rd = this.apps.applications();
     if (rd.tag !== 'Success') return [];
-    const order: Record<Aanvraag['status']['tag'], number> = { Concept: 0, InBehandeling: 1, Goedgekeurd: 2, Afgewezen: 2 };
+    const order: Record<Aanvraag['status']['tag'], number> = {
+      Concept: 0,
+      InBehandeling: 1,
+      Goedgekeurd: 2,
+      Afgewezen: 2,
+    };
     return rd.value.slice().sort((a, b) => order[a.status.tag] - order[b.status.tag]);
   });
   /** A Concept ("lopende aanvraag") renders as a melding above the list; the rest
@@ -166,11 +243,41 @@ export class DashboardPage {
       componenten/aanvragen). The core portal sections live in the header nav now;
       the teaching pages (concepts/brief) are only reachable from here. */
   protected readonly acties = [
-    { to: '/registreren', titel: $localize`:@@dashboard.actie.inschrijven.titel:Inschrijven`, tekst: $localize`:@@dashboard.actie.inschrijven.tekst:Schrijf u in in het BIG-register via de registratiewizard.`, actie: $localize`:@@dashboard.actie.inschrijven.actie:Start inschrijving` },
-    { to: '/herregistratie', titel: $localize`:@@dashboard.actie.herregistratie.titel:Herregistratie aanvragen`, tekst: $localize`:@@dashboard.actie.herregistratie.tekst:Verleng uw registratie voor de komende periode.`, actie: $localize`:@@dashboard.actie.herregistratie.actie:Vraag aan` },
-    { to: '/intake', titel: $localize`:@@dashboard.actie.intake.titel:Herregistratie-intake`, tekst: $localize`:@@dashboard.actie.intake.tekst:Vragenlijst met vertakkingen.`, actie: $localize`:@@dashboard.actie.intake.actie:Start intake` },
-    { to: '/registratie', titel: $localize`:@@dashboard.actie.wijzigen.titel:Gegevens wijzigen`, tekst: $localize`:@@dashboard.actie.wijzigen.tekst:Bekijk uw gegevens of geef een wijziging door.`, actie: $localize`:@@dashboard.actie.wijzigen.actie:Bekijk gegevens` },
-    { to: '/concepts', titel: $localize`:@@dashboard.actie.concepten.titel:Functionele patronen`, tekst: $localize`:@@dashboard.actie.concepten.tekst:Bekijk de FP/TEA-bouwstenen van deze POC.`, actie: $localize`:@@dashboard.actie.concepten.actie:Bekijk patronen` },
-    { to: '/brief', titel: $localize`:@@dashboard.actie.brief.titel:Brief opstellen`, tekst: $localize`:@@dashboard.actie.brief.tekst:Stel een brief samen uit vaste en vrije onderdelen.`, actie: $localize`:@@dashboard.actie.brief.actie:Start brief` },
+    {
+      to: '/registreren',
+      titel: $localize`:@@dashboard.actie.inschrijven.titel:Inschrijven`,
+      tekst: $localize`:@@dashboard.actie.inschrijven.tekst:Schrijf u in in het BIG-register via de registratiewizard.`,
+      actie: $localize`:@@dashboard.actie.inschrijven.actie:Start inschrijving`,
+    },
+    {
+      to: '/herregistratie',
+      titel: $localize`:@@dashboard.actie.herregistratie.titel:Herregistratie aanvragen`,
+      tekst: $localize`:@@dashboard.actie.herregistratie.tekst:Verleng uw registratie voor de komende periode.`,
+      actie: $localize`:@@dashboard.actie.herregistratie.actie:Vraag aan`,
+    },
+    {
+      to: '/intake',
+      titel: $localize`:@@dashboard.actie.intake.titel:Herregistratie-intake`,
+      tekst: $localize`:@@dashboard.actie.intake.tekst:Vragenlijst met vertakkingen.`,
+      actie: $localize`:@@dashboard.actie.intake.actie:Start intake`,
+    },
+    {
+      to: '/registratie',
+      titel: $localize`:@@dashboard.actie.wijzigen.titel:Gegevens wijzigen`,
+      tekst: $localize`:@@dashboard.actie.wijzigen.tekst:Bekijk uw gegevens of geef een wijziging door.`,
+      actie: $localize`:@@dashboard.actie.wijzigen.actie:Bekijk gegevens`,
+    },
+    {
+      to: '/concepts',
+      titel: $localize`:@@dashboard.actie.concepten.titel:Functionele patronen`,
+      tekst: $localize`:@@dashboard.actie.concepten.tekst:Bekijk de FP/TEA-bouwstenen van deze POC.`,
+      actie: $localize`:@@dashboard.actie.concepten.actie:Bekijk patronen`,
+    },
+    {
+      to: '/brief',
+      titel: $localize`:@@dashboard.actie.brief.titel:Brief opstellen`,
+      tekst: $localize`:@@dashboard.actie.brief.tekst:Stel een brief samen uit vaste en vrije onderdelen.`,
+      actie: $localize`:@@dashboard.actie.brief.actie:Start brief`,
+    },
   ];
 }

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

@@ -9,7 +9,12 @@ import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 import { ReviewSectionComponent } from '@shared/ui/review-section/review-section.component';
 import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
-import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
+import {
+  WizardShellComponent,
+  WizardError,
+  WizardStatus,
+  naarStapLabel,
+} from '@shared/layout/wizard-shell/wizard-shell.component';
 import { ASYNC } from '@shared/ui/async/async.component';
 import { AddressFieldsComponent } from '@registratie/ui/address-fields/address-fields.component';
 import { createStore } from '@shared/application/store';
@@ -54,138 +59,291 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
 @Component({
   selector: 'app-registratie-wizard',
   imports: [
-    FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent,
-    AlertComponent, SkeletonComponent, DataRowComponent, ReviewSectionComponent, ConfirmationComponent, WizardShellComponent,
-    AddressFieldsComponent, DocumentUploadComponent, ...ASYNC,
+    FormsModule,
+    FormFieldComponent,
+    TextInputComponent,
+    RadioGroupComponent,
+    ButtonComponent,
+    AlertComponent,
+    SkeletonComponent,
+    DataRowComponent,
+    ReviewSectionComponent,
+    ConfirmationComponent,
+    WizardShellComponent,
+    AddressFieldsComponent,
+    DocumentUploadComponent,
+    ...ASYNC,
   ],
   template: `
     <app-wizard-shell
       [steps]="stepLabels"
       [current]="cursor()"
       [stepTitle]="stepTitle()"
-      i18n-processName="@@regWizard.processName" processName="Inschrijven in het BIG-register"
+      i18n-processName="@@regWizard.processName"
+      processName="Inschrijven in het BIG-register"
       [status]="shellStatus()"
       [primaryLabel]="primaryLabel()"
       [canGoBack]="cursor() > 0"
       [errors]="errorList()"
       [errorMessage]="errorMessage()"
-      i18n-submittingLabel="@@regWizard.submitting" submittingLabel="Uw registratie wordt verwerkt…"
+      i18n-submittingLabel="@@regWizard.submitting"
+      submittingLabel="Uw registratie wordt verwerkt…"
       (primary)="onPrimary()"
       (back)="dispatch({ tag: 'Back' })"
       (cancel)="restart()"
       (retry)="onRetry()"
-      (goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })">
-
+      (goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })"
+    >
       @switch (step()) {
         @case ('adres') {
-              @if (adresStatus() === 'laden') {
-                <app-skeleton height="2.5rem" [count]="4" />
-              } @else {
-                @switch (adresStatus()) {
-                  @case ('gevonden') {
-                    <app-alert type="info" i18n="@@regWizard.brpGevonden">Vooraf ingevuld op basis van de BRP. Controleer en pas zo nodig aan.</app-alert>
-                  }
-                  @case ('geen') {
-                    <app-alert type="warning" i18n="@@regWizard.brpGeen">We vonden geen adres in de BRP. Vul uw adres hieronder handmatig in.</app-alert>
-                  }
-                  @case ('fout') {
-                    <app-alert type="warning" i18n="@@regWizard.brpFout">We konden de BRP nu niet bereiken. Vul uw adres hieronder handmatig in.</app-alert>
-                  }
-                }
-                <app-address-fields
-                  [value]="{ straat: draft().straat ?? '', postcode: draft().postcode ?? '', woonplaats: draft().woonplaats ?? '' }"
-                  [errors]="{ straat: err('straat'), postcode: err('postcode'), woonplaats: err('woonplaats') }"
-                  (fieldChange)="set($event.key, $event.value)" />
-                <app-form-field i18n-label="@@regWizard.correspondentieLabel" label="Hoe wilt u correspondentie ontvangen?" fieldId="correspondentie" required [error]="err('correspondentie')">
-                  <app-radio-group name="correspondentie" [options]="kanalen" [invalid]="!!err('correspondentie')"
-                    [ngModel]="draft().correspondentie ?? ''" (ngModelChange)="setKanaal($event)" />
+          @if (adresStatus() === 'laden') {
+            <app-skeleton height="2.5rem" [count]="4" />
+          } @else {
+            @switch (adresStatus()) {
+              @case ('gevonden') {
+                <app-alert type="info" i18n="@@regWizard.brpGevonden"
+                  >Vooraf ingevuld op basis van de BRP. Controleer en pas zo nodig aan.</app-alert
+                >
+              }
+              @case ('geen') {
+                <app-alert type="warning" i18n="@@regWizard.brpGeen"
+                  >We vonden geen adres in de BRP. Vul uw adres hieronder handmatig in.</app-alert
+                >
+              }
+              @case ('fout') {
+                <app-alert type="warning" i18n="@@regWizard.brpFout"
+                  >We konden de BRP nu niet bereiken. Vul uw adres hieronder handmatig
+                  in.</app-alert
+                >
+              }
+            }
+            <app-address-fields
+              [value]="{
+                straat: draft().straat ?? '',
+                postcode: draft().postcode ?? '',
+                woonplaats: draft().woonplaats ?? '',
+              }"
+              [errors]="{
+                straat: err('straat'),
+                postcode: err('postcode'),
+                woonplaats: err('woonplaats'),
+              }"
+              (fieldChange)="set($event.key, $event.value)"
+            />
+            <app-form-field
+              i18n-label="@@regWizard.correspondentieLabel"
+              label="Hoe wilt u correspondentie ontvangen?"
+              fieldId="correspondentie"
+              required
+              [error]="err('correspondentie')"
+            >
+              <app-radio-group
+                name="correspondentie"
+                [options]="kanalen"
+                [invalid]="!!err('correspondentie')"
+                [ngModel]="draft().correspondentie ?? ''"
+                (ngModelChange)="setKanaal($event)"
+              />
+            </app-form-field>
+            @if (draft().correspondentie === 'email') {
+              <app-form-field
+                i18n-label="@@regWizard.emailLabel"
+                label="E-mailadres"
+                fieldId="email"
+                required
+                [error]="err('email')"
+              >
+                <app-text-input
+                  inputId="email"
+                  type="email"
+                  [invalid]="!!err('email')"
+                  [ngModel]="draft().email ?? ''"
+                  (ngModelChange)="set('email', $event)"
+                  name="email"
+                  i18n-placeholder="@@regWizard.emailPlaceholder"
+                  placeholder="naam@voorbeeld.nl"
+                />
+              </app-form-field>
+            }
+          }
+        }
+        @case ('beroep') {
+          <app-async [data]="lookupRd()">
+            <ng-template appAsyncLoaded let-data>
+              <app-form-field
+                i18n-label="@@regWizard.diplomaLabel"
+                label="Kies het diploma waarmee u zich wilt registreren"
+                fieldId="diploma"
+                required
+                [error]="err('diploma')"
+              >
+                <app-radio-group
+                  name="diploma"
+                  [options]="diplomaOptions($any(data))"
+                  [invalid]="!!err('diploma')"
+                  [ngModel]="diplomaKeuze()"
+                  (ngModelChange)="onDiplomaKeuze($any(data), $event)"
+                />
+              </app-form-field>
+
+              @if (handmatigActief()) {
+                <app-alert type="warning" i18n="@@regWizard.handmatigWaarschuwing"
+                  >Een handmatig ingevoerd diploma kan niet automatisch worden geverifieerd. Kies uw
+                  beroep en beantwoord de aanvullende vragen; uw aanvraag wordt daarna handmatig
+                  beoordeeld.</app-alert
+                >
+                <app-form-field
+                  i18n-label="@@regWizard.beroepLabel"
+                  label="Voor welk beroep wilt u zich registreren?"
+                  fieldId="hm-beroep"
+                  [error]="err('diploma')"
+                >
+                  <app-radio-group
+                    name="hm-beroep"
+                    [options]="beroepOptions($any(data))"
+                    [invalid]="!!err('diploma')"
+                    [ngModel]="draft().beroep ?? ''"
+                    (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })"
+                  />
                 </app-form-field>
-                @if (draft().correspondentie === 'email') {
-                  <app-form-field i18n-label="@@regWizard.emailLabel" label="E-mailadres" fieldId="email" required [error]="err('email')">
-                    <app-text-input inputId="email" type="email" [invalid]="!!err('email')" [ngModel]="draft().email ?? ''" (ngModelChange)="set('email', $event)" name="email" i18n-placeholder="@@regWizard.emailPlaceholder" placeholder="naam@voorbeeld.nl" />
-                  </app-form-field>
-                }
+              } @else if (draft().beroep) {
+                <dl class="mb-0 app-section">
+                  <div
+                    app-data-row
+                    i18n-key="@@regWizard.beroepAfgeleid"
+                    key="Beroep (afgeleid uit diploma)"
+                    [value]="draft().beroep ?? ''"
+                  ></div>
+                </dl>
               }
-            }
-            @case ('beroep') {
-              <app-async [data]="lookupRd()">
-                <ng-template appAsyncLoaded let-data>
-                  <app-form-field i18n-label="@@regWizard.diplomaLabel" label="Kies het diploma waarmee u zich wilt registreren" fieldId="diploma" required [error]="err('diploma')">
-                    <app-radio-group name="diploma" [options]="diplomaOptions($any(data))" [invalid]="!!err('diploma')"
-                      [ngModel]="diplomaKeuze()" (ngModelChange)="onDiplomaKeuze($any(data), $event)" />
-                  </app-form-field>
 
-                  @if (handmatigActief()) {
-                    <app-alert type="warning" i18n="@@regWizard.handmatigWaarschuwing">Een handmatig ingevoerd diploma kan niet automatisch worden geverifieerd. Kies uw beroep en beantwoord de aanvullende vragen; uw aanvraag wordt daarna handmatig beoordeeld.</app-alert>
-                    <app-form-field i18n-label="@@regWizard.beroepLabel" label="Voor welk beroep wilt u zich registreren?" fieldId="hm-beroep" [error]="err('diploma')">
-                      <app-radio-group name="hm-beroep" [options]="beroepOptions($any(data))" [invalid]="!!err('diploma')"
-                        [ngModel]="draft().beroep ?? ''" (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })" />
-                    </app-form-field>
-                  } @else if (draft().beroep) {
-                    <dl class="mb-0 app-section">
-                      <div app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''"></div>
-                    </dl>
+              @for (q of actieveVragen($any(data)); track q.id) {
+                <app-form-field
+                  [label]="q.vraag"
+                  [fieldId]="'vraag-' + q.id"
+                  [error]="vraagErr(q.id)"
+                >
+                  @if (q.type === 'ja-nee') {
+                    <app-radio-group
+                      [name]="'vraag-' + q.id"
+                      [options]="jaNee"
+                      [invalid]="!!vraagErr(q.id)"
+                      [ngModel]="antwoord(q.id)"
+                      (ngModelChange)="
+                        dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
+                      "
+                      [ngModelOptions]="{ standalone: true }"
+                    />
+                  } @else {
+                    <app-text-input
+                      [inputId]="'vraag-' + q.id"
+                      [invalid]="!!vraagErr(q.id)"
+                      [ngModel]="antwoord(q.id)"
+                      (ngModelChange)="
+                        dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
+                      "
+                      [ngModelOptions]="{ standalone: true }"
+                    />
                   }
-
-                  @for (q of actieveVragen($any(data)); track q.id) {
-                    <app-form-field [label]="q.vraag" [fieldId]="'vraag-' + q.id" [error]="vraagErr(q.id)">
-                      @if (q.type === 'ja-nee') {
-                        <app-radio-group [name]="'vraag-' + q.id" [options]="jaNee" [invalid]="!!vraagErr(q.id)"
-                          [ngModel]="antwoord(q.id)" (ngModelChange)="dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })" [ngModelOptions]="{ standalone: true }" />
-                      } @else {
-                        <app-text-input [inputId]="'vraag-' + q.id" [invalid]="!!vraagErr(q.id)" [ngModel]="antwoord(q.id)"
-                          (ngModelChange)="dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })" [ngModelOptions]="{ standalone: true }" />
-                      }
-                    </app-form-field>
-                  }
-                </ng-template>
-                <ng-template appAsyncLoading>
-                  <app-skeleton height="2.5rem" [count]="3" />
-                </ng-template>
-              </app-async>
-
-              <app-document-upload
-                class="app-section"
-                [state]="upload()"
-                [previewUrlFor]="previewUrlFor"
-                (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>
+                </app-form-field>
               }
+            </ng-template>
+            <ng-template appAsyncLoading>
+              <app-skeleton height="2.5rem" [count]="3" />
+            </ng-template>
+          </app-async>
+
+          <app-document-upload
+            class="app-section"
+            [state]="upload()"
+            [previewUrlFor]="previewUrlFor"
+            (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
+          >
+          <app-review-section
+            i18n-heading="@@regWizard.sectie.adres"
+            heading="Adres en correspondentie"
+            i18n-editAriaLabel="@@regWizard.adresWijzigenAria"
+            editAriaLabel="Wijzigen adresgegevens"
+            (edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })"
+          >
+            <div
+              app-data-row
+              i18n-key="@@regWizard.summary.adres"
+              key="Adres"
+              [value]="adresSamenvatting()"
+            ></div>
+            <div
+              app-data-row
+              i18n-key="@@regWizard.summary.herkomstAdres"
+              key="Herkomst adres"
+              [value]="adresHerkomstLabel()"
+            ></div>
+            <div
+              app-data-row
+              i18n-key="@@regWizard.summary.correspondentie"
+              key="Correspondentie"
+              [value]="correspondentieLabel()"
+            ></div>
+            @if (draft().correspondentie === 'email') {
+              <div
+                app-data-row
+                i18n-key="@@regWizard.summary.email"
+                key="E-mailadres"
+                [value]="draft().email ?? ''"
+              ></div>
             }
-            @case ('controle') {
-              <app-alert type="info" i18n="@@regWizard.controleer">Controleer uw gegevens en dien de registratie in.</app-alert>
-              <app-review-section i18n-heading="@@regWizard.sectie.adres" heading="Adres en correspondentie"
-                i18n-editAriaLabel="@@regWizard.adresWijzigenAria" editAriaLabel="Wijzigen adresgegevens"
-                (edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
-                <div app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()"></div>
-                <div app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()"></div>
-                <div app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()"></div>
-                @if (draft().correspondentie === 'email') {
-                  <div app-data-row i18n-key="@@regWizard.summary.email" key="E-mailadres" [value]="draft().email ?? ''"></div>
-                }
-              </app-review-section>
-              <app-review-section class="app-section" i18n-heading="@@regWizard.sectie.beroep" heading="Beroep en diploma"
-                i18n-editAriaLabel="@@regWizard.diplomaWijzigenAria" editAriaLabel="Wijzigen beroep en diploma"
-                (edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
-                <div app-data-row i18n-key="@@regWizard.summary.beroep" key="Beroep" [value]="draft().beroep ?? ''"></div>
-                <div app-data-row i18n-key="@@regWizard.summary.herkomstDiploma" key="Herkomst diploma" [value]="diplomaHerkomstLabel()"></div>
-                @for (item of samenvattingVragen(); track item.vraag) {
-                  <div app-data-row [key]="item.vraag" [value]="item.antwoord"></div>
-                }
-              </app-review-section>
+          </app-review-section>
+          <app-review-section
+            class="app-section"
+            i18n-heading="@@regWizard.sectie.beroep"
+            heading="Beroep en diploma"
+            i18n-editAriaLabel="@@regWizard.diplomaWijzigenAria"
+            editAriaLabel="Wijzigen beroep en diploma"
+            (edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })"
+          >
+            <div
+              app-data-row
+              i18n-key="@@regWizard.summary.beroep"
+              key="Beroep"
+              [value]="draft().beroep ?? ''"
+            ></div>
+            <div
+              app-data-row
+              i18n-key="@@regWizard.summary.herkomstDiploma"
+              key="Herkomst diploma"
+              [value]="diplomaHerkomstLabel()"
+            ></div>
+            @for (item of samenvattingVragen(); track item.vraag) {
+              <div app-data-row [key]="item.vraag" [value]="item.antwoord"></div>
+            }
+          </app-review-section>
         }
       }
 
       <div wizardSuccess>
-        <app-confirmation i18n-title="@@regWizard.success.title" title="Uw registratie is ontvangen">
-          <p class="app-section" i18n="@@regWizard.success.referentie">Uw referentienummer is {{ referentie() }}. Bewaar dit nummer voor uw administratie.</p>
+        <app-confirmation
+          i18n-title="@@regWizard.success.title"
+          title="Uw registratie is ontvangen"
+        >
+          <p class="app-section" i18n="@@regWizard.success.referentie">
+            Uw referentienummer is {{ referentie() }}. Bewaar dit nummer voor uw administratie.
+          </p>
           <div class="app-section">
-            <app-button variant="secondary" (click)="restart()" i18n="@@regWizard.nieuweRegistratie">Nieuwe registratie starten</app-button>
+            <app-button variant="secondary" (click)="restart()" i18n="@@regWizard.nieuweRegistratie"
+              >Nieuwe registratie starten</app-button
+            >
           </div>
         </app-confirmation>
       </div>
@@ -206,8 +364,16 @@ export class RegistratieWizardComponent {
   seed = input<RegistratieState>(initial);
 
   readonly kanalen = KANALEN;
-  readonly stepLabels = [$localize`:@@regWizard.step.adres:Adres`, $localize`:@@regWizard.step.beroep:Beroep`, $localize`:@@regWizard.step.controle:Controle`]; // short labels for the stepper
-  private stepTitles = [$localize`:@@regWizard.title.adres:Adres en correspondentievoorkeur`, $localize`:@@regWizard.title.beroep:Beroep op basis van uw diploma`, $localize`:@@regWizard.title.controle:Controleren en indienen`];
+  readonly stepLabels = [
+    $localize`:@@regWizard.step.adres:Adres`,
+    $localize`:@@regWizard.step.beroep:Beroep`,
+    $localize`:@@regWizard.step.controle:Controle`,
+  ]; // short labels for the stepper
+  private stepTitles = [
+    $localize`:@@regWizard.title.adres:Adres en correspondentievoorkeur`,
+    $localize`:@@regWizard.title.beroep:Beroep op basis van uw diploma`,
+    $localize`:@@regWizard.title.controle:Controleren en indienen`,
+  ];
   readonly state = this.store.model;
   readonly dispatch = this.store.dispatch;
 
@@ -234,14 +400,18 @@ export class RegistratieWizardComponent {
     snapshot: () => {
       const s = this.state();
       if (s.tag !== 'Invullen' || !hasProgress(s)) return null;
-      const documentIds = deliveryRefs(s.upload).filter((r) => r.channel === 'digital' && r.documentId).map((r) => r.documentId!);
+      const documentIds = deliveryRefs(s.upload)
+        .filter((r) => r.channel === 'digital' && r.documentId)
+        .map((r) => r.documentId!);
       return { draft: s, stepIndex: s.cursor, stepCount: STEPS.length, documentIds };
     },
     onResume: (draft) => this.dispatch({ tag: 'Seed', state: draft as RegistratieState }),
     enabled: () => this.seed() === initial,
   });
   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 stepTitle = computed(
+    () => this.stepTitles[Math.min(this.cursor(), this.stepTitles.length - 1)],
+  );
   protected referentie = computed(() => whenTag(this.state(), 'Ingediend')?.referentie ?? '');
   protected failedError = computed(() => whenTag(this.state(), 'Mislukt')?.error ?? '');
 
@@ -251,13 +421,21 @@ export class RegistratieWizardComponent {
     const next = this.cursor() + 1;
     return naarStapLabel(next + 1, this.stepLabels[next]);
   });
-  protected errorMessage = computed(() => $localize`:@@regWizard.indienenMislukt:Het indienen is niet gelukt:` + ` ${this.failedError()}`);
+  protected errorMessage = computed(
+    () =>
+      $localize`:@@regWizard.indienenMislukt:Het indienen is niet gelukt:` +
+      ` ${this.failedError()}`,
+  );
   protected shellStatus = computed<WizardStatus>(() => {
     switch (this.state().tag) {
-      case 'Invullen': return 'editing';
-      case 'Indienen': return 'submitting';
-      case 'Ingediend': return 'submitted';
-      case 'Mislukt': return 'failed';
+      case 'Invullen':
+        return 'editing';
+      case 'Indienen':
+        return 'submitting';
+      case 'Ingediend':
+        return 'submitted';
+      case 'Mislukt':
+        return 'failed';
     }
   });
   /** Current step's errors (incl. per-question), flattened for the error summary. */
@@ -274,12 +452,32 @@ export class RegistratieWizardComponent {
   });
   protected adresSamenvatting = computed(() => {
     const d = this.draft();
-    return [d.straat, [d.postcode, d.woonplaats].filter(Boolean).join(' ')].filter(Boolean).join(', ');
+    return [d.straat, [d.postcode, d.woonplaats].filter(Boolean).join(' ')]
+      .filter(Boolean)
+      .join(', ');
   });
   // Readable labels for the controle summary (instead of raw enum values).
-  protected adresHerkomstLabel = computed(() => ({ brp: $localize`:@@regWizard.herkomst.adresBrp:Automatisch uit de BRP`, handmatig: $localize`:@@regWizard.herkomst.adresHandmatig:Handmatig ingevoerd` }[this.draft().adresHerkomst ?? 'handmatig']));
-  protected correspondentieLabel = computed(() => ({ email: $localize`:@@regWizard.corr.email:Per e-mail`, post: $localize`:@@regWizard.corr.post:Per post` }[this.draft().correspondentie ?? 'post']));
-  protected diplomaHerkomstLabel = computed(() => ({ duo: $localize`:@@regWizard.herkomst.diplomaDuo:Geverifieerd via DUO`, handmatig: $localize`:@@regWizard.herkomst.diplomaHandmatig:Handmatig ingevoerd (wordt beoordeeld)` }[this.draft().diplomaHerkomst ?? 'handmatig']));
+  protected adresHerkomstLabel = computed(
+    () =>
+      ({
+        brp: $localize`:@@regWizard.herkomst.adresBrp:Automatisch uit de BRP`,
+        handmatig: $localize`:@@regWizard.herkomst.adresHandmatig:Handmatig ingevoerd`,
+      })[this.draft().adresHerkomst ?? 'handmatig'],
+  );
+  protected correspondentieLabel = computed(
+    () =>
+      ({
+        email: $localize`:@@regWizard.corr.email:Per e-mail`,
+        post: $localize`:@@regWizard.corr.post:Per post`,
+      })[this.draft().correspondentie ?? 'post'],
+  );
+  protected diplomaHerkomstLabel = computed(
+    () =>
+      ({
+        duo: $localize`:@@regWizard.herkomst.diplomaDuo:Geverifieerd via DUO`,
+        handmatig: $localize`:@@regWizard.herkomst.diplomaHandmatig:Handmatig ingevoerd (wordt beoordeeld)`,
+      })[this.draft().diplomaHerkomst ?? 'handmatig'],
+  );
 
   /** BRP lookup outcome (laden/gevonden/geen/fout) and the parsed DUO lookup, both
       served by the application facade — the wizard renders, it does not fetch/parse. */
@@ -295,23 +493,35 @@ export class RegistratieWizardComponent {
 
   readonly jaNee = JA_NEE;
 
-  protected err = (k: DraftField | 'correspondentie' | 'diploma' | 'documenten') => 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 antwoord = (id: string) => this.draft().antwoorden[id] ?? ''; // runtime guard: missing key → undefined
-  protected set = (key: DraftField, value: string) => this.dispatch({ tag: 'SetField', key, value });
-  protected setKanaal = (value: string) => this.dispatch({ tag: 'SetCorrespondentie', value: value as Correspondentie });
+  protected set = (key: DraftField, value: string) =>
+    this.dispatch({ tag: 'SetField', key, value });
+  protected setKanaal = (value: string) =>
+    this.dispatch({ tag: 'SetCorrespondentie', value: value as Correspondentie });
 
   /** True while the user is entering a diploma manually (not in the DUO list). */
   protected handmatigActief = computed(() => this.draft().diplomaHerkomst === 'handmatig');
   /** The radio selection: a diploma id, or the"not listed" sentinel in manual mode. */
-  protected diplomaKeuze = computed(() => (this.handmatigActief() ? HANDMATIG : this.draft().diplomaId ?? ''));
+  protected diplomaKeuze = computed(() =>
+    this.handmatigActief() ? HANDMATIG : (this.draft().diplomaId ?? ''),
+  );
 
   protected diplomaOptions = (data: DuoLookupDto) => [
-    ...data.diplomas.map((d) => ({ value: d.id, label: `${d.naam} — ${d.instelling} (${d.jaar})` })),
-    { value: HANDMATIG, label: $localize`:@@regWizard.diplomaNietBij:Mijn diploma staat er niet bij` },
+    ...data.diplomas.map((d) => ({
+      value: d.id,
+      label: `${d.naam} — ${d.instelling} (${d.jaar})`,
+    })),
+    {
+      value: HANDMATIG,
+      label: $localize`:@@regWizard.diplomaNietBij:Mijn diploma staat er niet bij`,
+    },
   ];
 
-  protected beroepOptions = (data: DuoLookupDto) => data.handmatig.beroepen.map((b) => ({ value: b, label: b }));
+  protected beroepOptions = (data: DuoLookupDto) =>
+    data.handmatig.beroepen.map((b) => ({ value: b, label: b }));
 
   /** The policy questions that apply to the current choice (server-decided). */
   protected actieveVragen = (data: DuoLookupDto): PolicyQuestionDto[] => {
@@ -324,24 +534,41 @@ export class RegistratieWizardComponent {
     const data = this.duoData();
     const d = this.draft();
     if (!data) return [] as { vraag: string; antwoord: string }[];
-    const alle = [...data.diplomas.flatMap((x) => x.policyQuestions), ...data.handmatig.policyQuestions];
-    return (d.vraagIds ?? []).map((id) => ({ vraag: alle.find((q) => q.id === id)?.vraag ?? id, antwoord: d.antwoorden[id] ?? '' }));
+    const alle = [
+      ...data.diplomas.flatMap((x) => x.policyQuestions),
+      ...data.handmatig.policyQuestions,
+    ];
+    return (d.vraagIds ?? []).map((id) => ({
+      vraag: alle.find((q) => q.id === id)?.vraag ?? id,
+      antwoord: d.antwoorden[id] ?? '',
+    }));
   });
 
   protected onDiplomaKeuze(data: DuoLookupDto, id: string) {
     if (id === HANDMATIG) {
-      this.dispatch({ tag: 'KiesHandmatig', vraagIds: data.handmatig.policyQuestions.map((q) => q.id) });
+      this.dispatch({
+        tag: 'KiesHandmatig',
+        vraagIds: data.handmatig.policyQuestions.map((q) => q.id),
+      });
       return;
     }
     const d = data.diplomas.find((x) => x.id === id);
-    if (d) this.dispatch({ tag: 'KiesDiploma', diplomaId: d.id, beroep: d.beroep, vraagIds: d.policyQuestions.map((q) => q.id) });
+    if (d)
+      this.dispatch({
+        tag: 'KiesDiploma',
+        diplomaId: d.id,
+        beroep: d.beroep,
+        vraagIds: d.policyQuestions.map((q) => q.id),
+      });
   }
 
   constructor() {
     // An explicit seed (stories/tests) wins; otherwise resume from the backend draft
     // (`?aanvraag=<id>`), or start fresh. Persistence is the draftSync controller's job.
     const seeded = this.seed();
-    queueMicrotask(() => (seeded !== initial ? this.dispatch({ tag: 'Seed', state: seeded }) : this.draftSync.resume()));
+    queueMicrotask(() =>
+      seeded !== initial ? this.dispatch({ tag: 'Seed', state: seeded }) : this.draftSync.resume(),
+    );
     // Prefill the address from the BRP lookup as it arrives. Track only the facade's
     // parsed prefill signal; untrack the dispatch (it reads the state signal, which
     // would otherwise make this effect loop on its own write). Don't clobber
@@ -352,7 +579,12 @@ export class RegistratieWizardComponent {
       untracked(() => {
         const s = this.state();
         if (s.tag !== 'Invullen' || s.draft.straat) return;
-        this.dispatch({ tag: 'PrefillAdres', straat: a.straat, postcode: a.postcode, woonplaats: a.woonplaats });
+        this.dispatch({
+          tag: 'PrefillAdres',
+          straat: a.straat,
+          postcode: a.postcode,
+          woonplaats: a.woonplaats,
+        });
       });
     });
     // A11y: focus management (step heading on step change, error summary on a
@@ -384,7 +616,10 @@ export class RegistratieWizardComponent {
   private async runIfIndienen() {
     const s = this.state();
     if (s.tag !== 'Indienen') return;
-    const r = await this.draftSync.submit({ diplomaHerkomst: s.data.diplomaHerkomst, documents: s.data.documents });
+    const r = await this.draftSync.submit({
+      diplomaHerkomst: s.data.diplomaHerkomst,
+      documents: s.data.documents,
+    });
     if (r.ok) this.dispatch({ tag: 'SubmitConfirmed', referentie: r.value.referentie ?? '' });
     else this.dispatch({ tag: 'SubmitFailed', error: r.error });
   }

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

@@ -3,14 +3,36 @@ import { applicationConfig } from '@storybook/angular';
 import { provideHttpClient } from '@angular/common/http';
 import { provideApiClient } from '@shared/infrastructure/api-client.provider';
 import { RegistratieWizardComponent } from './registratie-wizard.component';
-import { Draft, RegistratieState, ValidRegistratie } from '@registratie/domain/registratie-wizard.machine';
+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 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: {}, upload: initialUpload });
+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' },
@@ -34,10 +56,39 @@ type Story = StoryObj<RegistratieWizardComponent>;
 export const Adres: Story = { args: { seed: invullen(adres, 0) } };
 export const Beroep: Story = { args: { seed: invullen(filled, 1) } };
 /** English-language diploma → the Dutch-proficiency policy question appears. */
-export const BeroepEngelstalig: Story = { args: { seed: invullen({ ...adres, diplomaId: 'd2', beroep: 'Arts', diplomaHerkomst: 'duo', vraagIds: ['nl-taalvaardigheid'] }, 1) } };
+export const BeroepEngelstalig: Story = {
+  args: {
+    seed: invullen(
+      {
+        ...adres,
+        diplomaId: 'd2',
+        beroep: 'Arts',
+        diplomaHerkomst: 'duo',
+        vraagIds: ['nl-taalvaardigheid'],
+      },
+      1,
+    ),
+  },
+};
 /** Diploma not in DUO → declare beroep + the maximal policy-question set. */
-export const BeroepHandmatig: Story = { args: { seed: invullen({ ...adres, diplomaId: 'handmatig', diplomaHerkomst: 'handmatig', vraagIds: ['nl-taalvaardigheid', 'diploma-erkend', 'toelichting'] }, 1) } };
+export const BeroepHandmatig: Story = {
+  args: {
+    seed: invullen(
+      {
+        ...adres,
+        diplomaId: 'handmatig',
+        diplomaHerkomst: 'handmatig',
+        vraagIds: ['nl-taalvaardigheid', 'diploma-erkend', 'toelichting'],
+      },
+      1,
+    ),
+  },
+};
 export const Controle: Story = { args: { seed: invullen(filled, 2) } };
 export const Indienen: Story = { args: { seed: { tag: 'Indienen', data: validData } } };
-export const Ingediend: Story = { args: { seed: { tag: 'Ingediend', data: validData, referentie: 'BIG-2026-123456' } } };
-export const Mislukt: Story = { args: { seed: { tag: 'Mislukt', data: validData, error: 'Netwerkfout' } } };
+export const Ingediend: Story = {
+  args: { seed: { tag: 'Ingediend', data: validData, referentie: 'BIG-2026-123456' } },
+};
+export const Mislukt: Story = {
+  args: { seed: { tag: 'Mislukt', data: validData, error: 'Netwerkfout' } },
+};

src/app/registratie/ui/registratie.page.ts

@@ -12,11 +12,11 @@ import { RegistratieWizardComponent } from '@registratie/ui/registratie-wizard/r
     <app-page-shell
       i18n-heading="@@registratie.heading"
       heading="Inschrijven in het BIG-register"
-      backLink="/dashboard">
+      backLink="/dashboard"
+    >
       <app-alert type="info" i18n="@@registratie.intro">
-        In drie stappen schrijft u zich in: uw adres en correspondentievoorkeur, het
-        diploma waarmee u zich registreert, en een controle. Uw gegevens blijven bewaard
-        als u de pagina herlaadt.
+        In drie stappen schrijft u zich in: uw adres en correspondentievoorkeur, het diploma waarmee
+        u zich registreert, en een controle. Uw gegevens blijven bewaard als u de pagina herlaadt.
       </app-alert>
       <div class="app-section">
         <app-registratie-wizard />

src/app/registratie/ui/registration-detail.page.ts

@@ -9,11 +9,18 @@ import { BigProfileStore } from '@registratie/application/big-profile.store';
 @Component({
   selector: 'app-registration-detail-page',
   imports: [
-    PageShellComponent, SkeletonComponent, ...ASYNC,
-    RegistrationSummaryComponent, ChangeRequestFormComponent,
+    PageShellComponent,
+    SkeletonComponent,
+    ...ASYNC,
+    RegistrationSummaryComponent,
+    ChangeRequestFormComponent,
   ],
   template: `
-    <app-page-shell i18n-heading="@@registratieDetail.heading" heading="Mijn gegevens" backLink="/dashboard">
+    <app-page-shell
+      i18n-heading="@@registratieDetail.heading"
+      heading="Mijn gegevens"
+      backLink="/dashboard"
+    >
       <app-async [data]="store.profile()">
         <ng-template appAsyncLoaded let-p>
           <app-registration-summary [reg]="$any(p).registration" />

src/app/registratie/ui/registration-summary/registration-summary.component.ts

@@ -13,25 +13,60 @@ import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
   imports: [DatePipe, DataRowComponent, StatusBadgeComponent, DataBlockComponent],
   template: `
     <app-data-block i18n-ariaLabel="@@summary.ariaLabel" ariaLabel="Registratiegegevens">
-      <div app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer"></div>
+      <div
+        app-data-row
+        i18n-key="@@summary.bigNummer"
+        key="BIG-nummer"
+        [value]="reg().bigNummer"
+      ></div>
       <div app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam"></div>
       <div app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep"></div>
       <div app-data-row i18n-key="@@summary.status" key="Status">
         <app-status-badge [label]="label()" [color]="color()" />
       </div>
-      <div app-data-row i18n-key="@@summary.registratiedatum" key="Registratiedatum" [value]="reg().registratiedatum | date:'longDate'"></div>
+      <div
+        app-data-row
+        i18n-key="@@summary.registratiedatum"
+        key="Registratiedatum"
+        [value]="reg().registratiedatum | date: 'longDate'"
+      ></div>
       <!-- Each status variant renders only the row its own data supports. -->
       @switch (reg().status.tag) {
         @case ('Geregistreerd') {
-          <div app-data-row i18n-key="@@summary.uiterste" key="Uiterste herregistratie" [value]="$any(reg().status).herregistratieDatum | date:'longDate'"></div>
+          <div
+            app-data-row
+            i18n-key="@@summary.uiterste"
+            key="Uiterste herregistratie"
+            [value]="$any(reg().status).herregistratieDatum | date: 'longDate'"
+          ></div>
         }
         @case ('Geschorst') {
-          <div app-data-row i18n-key="@@summary.geschorstTot" key="Geschorst tot" [value]="$any(reg().status).geschorstTot | date:'longDate'"></div>
-          <div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden"></div>
+          <div
+            app-data-row
+            i18n-key="@@summary.geschorstTot"
+            key="Geschorst tot"
+            [value]="$any(reg().status).geschorstTot | date: 'longDate'"
+          ></div>
+          <div
+            app-data-row
+            i18n-key="@@summary.reden"
+            key="Reden"
+            [value]="$any(reg().status).reden"
+          ></div>
         }
         @case ('Doorgehaald') {
-          <div app-data-row i18n-key="@@summary.doorgehaaldOp" key="Doorgehaald op" [value]="$any(reg().status).doorgehaaldOp | date:'longDate'"></div>
-          <div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden"></div>
+          <div
+            app-data-row
+            i18n-key="@@summary.doorgehaaldOp"
+            key="Doorgehaald op"
+            [value]="$any(reg().status).doorgehaaldOp | date: 'longDate'"
+          ></div>
+          <div
+            app-data-row
+            i18n-key="@@summary.reden"
+            key="Reden"
+            [value]="$any(reg().status).reden"
+          ></div>
         }
       }
     </app-data-block>

src/app/registratie/ui/registration-summary/registration-summary.stories.ts

@@ -23,8 +23,18 @@ export const Geregistreerd: Story = {
   args: { reg: { ...base, status: { tag: 'Geregistreerd', herregistratieDatum: '2027-09-01' } } },
 };
 export const Geschorst: Story = {
-  args: { reg: { ...base, status: { tag: 'Geschorst', geschorstTot: '2026-12-31', reden: 'Lopend tuchtonderzoek' } } },
+  args: {
+    reg: {
+      ...base,
+      status: { tag: 'Geschorst', geschorstTot: '2026-12-31', reden: 'Lopend tuchtonderzoek' },
+    },
+  },
 };
 export const Doorgehaald: Story = {
-  args: { reg: { ...base, status: { tag: 'Doorgehaald', doorgehaaldOp: '2024-05-01', reden: 'Op eigen verzoek' } } },
+  args: {
+    reg: {
+      ...base,
+      status: { tag: 'Doorgehaald', doorgehaaldOp: '2024-05-01', reden: 'Op eigen verzoek' },
+    },
+  },
 };

src/app/registratie/ui/registration-table/registration-table.component.ts

@@ -21,7 +21,7 @@ import { Aantekening } from '@registratie/domain/registration';
             <tr>
               <td>{{ row.type }}</td>
               <td>{{ row.omschrijving }}</td>
-              <td>{{ row.datum | date:'mediumDate' }}</td>
+              <td>{{ row.datum | date: 'mediumDate' }}</td>
             </tr>
           }
         </tbody>

src/app/registratie/ui/registration-table/registration-table.stories.ts

@@ -12,7 +12,11 @@ export const Default: Story = {
   args: {
     rows: [
       { type: 'Specialisme', omschrijving: 'Huisartsgeneeskunde', datum: '2016-04-12' },
-      { type: 'Aantekening', omschrijving: 'Erkend opleider huisartsgeneeskunde', datum: '2019-01-08' },
+      {
+        type: 'Aantekening',
+        omschrijving: 'Erkend opleider huisartsgeneeskunde',
+        datum: '2019-01-08',
+      },
     ],
   },
 };

src/app/shared/application/remote-data.ts

@@ -78,7 +78,11 @@ export function map3<E, A, B, C, R>(
   c: RemoteData<E, C>,
   f: (a: A, b: B, c: C) => R,
 ): RemoteData<E, R> {
-  return map2(map2(a, b, (x, y) => [x, y] as const), c, ([x, y], z) => f(x, y, z));
+  return map2(
+    map2(a, b, (x, y) => [x, y] as const),
+    c,
+    ([x, y], z) => f(x, y, z),
+  );
 }
 
 /** Chain a second source that depends on the first one's value. */

src/app/shared/application/submit.ts

@@ -7,7 +7,10 @@ import { problemDetail } from '@shared/infrastructure/api-error';
  * its own payload mapping. The backend re-validates and returns a 422
  * ProblemDetails on rejection, surfaced here as the error string.
  */
-export async function runSubmit<T>(fn: () => Promise<T>, fallback: string): Promise<Result<string, T>> {
+export async function runSubmit<T>(
+  fn: () => Promise<T>,
+  fallback: string,
+): Promise<Result<string, T>> {
   try {
     return ok(await fn());
   } catch (e) {

src/app/shared/infrastructure/api-error.spec.ts

@@ -3,7 +3,9 @@ import { problemDetail, problemFieldErrors } from './api-error';
 
 describe('problemDetail', () => {
   it('extracts the detail from an RFC-7807 ProblemDetails', () => {
-    expect(problemDetail({ detail: 'Afgewezen: 0 uren.', status: 422 }, 'fallback')).toBe('Afgewezen: 0 uren.');
+    expect(problemDetail({ detail: 'Afgewezen: 0 uren.', status: 422 }, 'fallback')).toBe(
+      'Afgewezen: 0 uren.',
+    );
   });
 
   it('falls back when there is no detail', () => {
@@ -15,8 +17,9 @@ describe('problemDetail', () => {
 
 describe('problemFieldErrors (G4 seam)', () => {
   it('maps a ValidationProblemDetails errors dict to first-message-per-field', () => {
-    expect(problemFieldErrors({ errors: { straat: ['Verplicht.'], postcode: ['Ongeldig.', 'x'] } }))
-      .toEqual({ straat: 'Verplicht.', postcode: 'Ongeldig.' });
+    expect(
+      problemFieldErrors({ errors: { straat: ['Verplicht.'], postcode: ['Ongeldig.', 'x'] } }),
+    ).toEqual({ straat: 'Verplicht.', postcode: 'Ongeldig.' });
   });
 
   it('returns {} when there is no errors envelope (the current backend shape)', () => {

src/app/shared/infrastructure/role.ts

@@ -9,5 +9,7 @@ import { Role } from '@shared/domain/role';
  * the FE derives `editable` from it.
  */
 export function currentRole(): Role {
-  return new URLSearchParams(window.location.search).get('role') === 'approver' ? 'approver' : 'drafter';
+  return new URLSearchParams(window.location.search).get('role') === 'approver'
+    ? 'approver'
+    : 'drafter';
 }

src/app/shared/infrastructure/scenario.interceptor.ts

@@ -21,8 +21,11 @@ export const scenarioInterceptor: HttpInterceptorFn = (req, next) => {
       return of(new HttpResponse({ status: 200, body: '[]' })).pipe(delay(400));
     case 'error':
       return timer(400).pipe(
-        switchMap(() => throwError(() =>
-          new HttpErrorResponse({ status: 500, statusText: 'Demo-fout', url: req.url }))),
+        switchMap(() =>
+          throwError(
+            () => new HttpErrorResponse({ status: 500, statusText: 'Demo-fout', url: req.url }),
+          ),
+        ),
       );
     default:
       return next(req);

src/app/shared/infrastructure/scenario.ts

@@ -9,7 +9,15 @@ export type Scenario =
   | 'upload-slow'
   | 'upload-fail';
 
-const VALID: Scenario[] = ['default', 'slow', 'loading', 'empty', 'error', 'upload-slow', 'upload-fail'];
+const VALID: Scenario[] = [
+  'default',
+  'slow',
+  'loading',
+  'empty',
+  'error',
+  'upload-slow',
+  'upload-fail',
+];
 
 /** Reads ?scenario= from the URL so a demo can force each async state. */
 export function currentScenario(): Scenario {

src/app/shared/kernel/rich-text.spec.ts

@@ -1,10 +1,26 @@
 import { describe, it, expect } from 'vitest';
-import { RichTextBlock, deepCopyBlock, emptyBlock, isBlockEmpty, placeholderKeysIn } from './rich-text';
+import {
+  RichTextBlock,
+  deepCopyBlock,
+  emptyBlock,
+  isBlockEmpty,
+  placeholderKeysIn,
+} from './rich-text';
 
 const block = (): RichTextBlock => ({
   paragraphs: [
-    { nodes: [{ type: 'text', text: 'Beste ' }, { type: 'placeholder', key: 'naam' }] },
-    { nodes: [{ type: 'placeholder', key: 'datum' }, { type: 'placeholder', key: 'naam' }] },
+    {
+      nodes: [
+        { type: 'text', text: 'Beste ' },
+        { type: 'placeholder', key: 'naam' },
+      ],
+    },
+    {
+      nodes: [
+        { type: 'placeholder', key: 'datum' },
+        { type: 'placeholder', key: 'naam' },
+      ],
+    },
   ],
 });
 
@@ -16,7 +32,9 @@ describe('rich-text', () => {
 
   it('isBlockEmpty is false when any placeholder or non-blank text exists', () => {
     expect(isBlockEmpty({ paragraphs: [{ nodes: [{ type: 'text', text: '   ' }] }] })).toBe(true);
-    expect(isBlockEmpty({ paragraphs: [{ nodes: [{ type: 'placeholder', key: 'x' }] }] })).toBe(false);
+    expect(isBlockEmpty({ paragraphs: [{ nodes: [{ type: 'placeholder', key: 'x' }] }] })).toBe(
+      false,
+    );
     expect(isBlockEmpty({ paragraphs: [{ nodes: [{ type: 'text', text: 'hoi' }] }] })).toBe(false);
   });
 
@@ -31,7 +49,10 @@ describe('rich-text', () => {
     expect(copy).not.toBe(original);
     expect(copy.paragraphs[0]).not.toBe(original.paragraphs[0]);
     // Mutating the copy must not touch the original — proves no shared reference.
-    (copy.paragraphs[0].nodes as { type: 'text'; text: string }[])[0] = { type: 'text', text: 'CHANGED' };
+    (copy.paragraphs[0].nodes as { type: 'text'; text: string }[])[0] = {
+      type: 'text',
+      text: 'CHANGED',
+    };
     expect(placeholderKeysIn(original)).toEqual(['naam', 'datum', 'naam']);
     expect((original.paragraphs[0].nodes[0] as { text: string }).text).toBe('Beste ');
   });

src/app/shared/layout/breadcrumb/breadcrumb-trail.ts

@@ -3,13 +3,19 @@ import { BreadcrumbItem } from './breadcrumb.component';
 /** Route → breadcrumb label + parent. The app has a small fixed route set
     (see app.routes.ts), so a static map is enough — no per-page wiring.
     ponytail: static map, not a breadcrumb service; revisit if routes go dynamic. */
-interface Crumb { label: string; parent?: string }
+interface Crumb {
+  label: string;
+  parent?: string;
+}
 
 const ROUTES: Record<string, Crumb> = {
   '/dashboard': { label: $localize`:@@crumb.dashboard:Mijn overzicht` },
   '/registratie': { label: $localize`:@@crumb.registratie:Mijn gegevens`, parent: '/dashboard' },
   '/registreren': { label: $localize`:@@crumb.registreren:Inschrijven`, parent: '/dashboard' },
-  '/herregistratie': { label: $localize`:@@crumb.herregistratie:Herregistratie`, parent: '/dashboard' },
+  '/herregistratie': {
+    label: $localize`:@@crumb.herregistratie:Herregistratie`,
+    parent: '/dashboard',
+  },
   '/intake': { label: $localize`:@@crumb.intake:Herregistratie-intake`, parent: '/dashboard' },
   '/concepts': { label: $localize`:@@crumb.concepts:Functionele patronen`, parent: '/dashboard' },
 };

src/app/shared/layout/breadcrumb/breadcrumb.component.ts

@@ -16,7 +16,13 @@ export interface BreadcrumbItem {
   // — including this one, wherever it's mounted. Override it so the breadcrumb
   // never carries its own background (it should show whatever's behind it, e.g.
   // the titlebar's robijn fill).
-  styles: [`nav{background:none}`],
+  styles: [
+    `
+      nav {
+        background: none;
+      }
+    `,
+  ],
   template: `
     <nav i18n-aria-label="@@breadcrumb.aria" aria-label="Kruimelpad">
       <span class="visually-hidden" i18n="@@breadcrumb.hier">U bevindt zich hier:</span>

src/app/shared/layout/breadcrumb/breadcrumb.stories.ts

@@ -17,8 +17,19 @@ export default meta;
 type Story = StoryObj<BreadcrumbComponent>;
 
 export const TweeNiveaus: Story = {
-  args: { items: [{ label: 'Mijn omgeving', link: '/dashboard' }, { label: 'Inschrijven in het BIG-register' }] },
+  args: {
+    items: [
+      { label: 'Mijn omgeving', link: '/dashboard' },
+      { label: 'Inschrijven in het BIG-register' },
+    ],
+  },
 };
 export const DrieNiveaus: Story = {
-  args: { items: [{ label: 'Mijn omgeving', link: '/dashboard' }, { label: 'Registratie', link: '/registratie' }, { label: 'Inschrijven' }] },
+  args: {
+    items: [
+      { label: 'Mijn omgeving', link: '/dashboard' },
+      { label: 'Registratie', link: '/registratie' },
+      { label: 'Inschrijven' },
+    ],
+  },
 };

src/app/shared/layout/page-shell/page-shell.component.ts

@@ -9,16 +9,30 @@ import { LinkComponent } from '@shared/ui/link/link.component';
 @Component({
   selector: 'app-page-shell',
   imports: [HeadingComponent, LinkComponent],
-  styles: [`
-    :host{display:block}
-    .body--narrow{max-inline-size:var(--app-form-narrow)}
-    .back{margin:0 0 var(--rhc-space-max-lg)}
-    .intro{margin-block:var(--rhc-space-max-md) var(--rhc-space-max-2xl);max-inline-size:42rem;color:var(--rhc-color-foreground-subtle)}
-  `],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .body--narrow {
+        max-inline-size: var(--app-form-narrow);
+      }
+      .back {
+        margin: 0 0 var(--rhc-space-max-lg);
+      }
+      .intro {
+        margin-block: var(--rhc-space-max-md) var(--rhc-space-max-2xl);
+        max-inline-size: 42rem;
+        color: var(--rhc-color-foreground-subtle);
+      }
+    `,
+  ],
   template: `
     <div [class.body--narrow]="width() === 'narrow'">
       @if (backLink()) {
-        <p class="back"><app-link [to]="backLink()!">← {{ backLabel() }}</app-link></p>
+        <p class="back">
+          <app-link [to]="backLink()!">← {{ backLabel() }}</app-link>
+        </p>
       }
       <app-heading [level]="1">{{ heading() }}</app-heading>
       @if (intro()) {

src/app/shared/layout/shell/shell.component.ts

@@ -9,14 +9,41 @@ import { DebugStateComponent } from '@shared/ui/debug-state/debug-state.componen
 @Component({
   selector: 'app-shell',
   imports: [RouterOutlet, SiteHeaderComponent, SiteFooterComponent, DebugStateComponent],
-  styles: [`
-    :host{display:block}
-    .skip{position:absolute;left:var(--app-skip-link-offset);z-index:1030}
-    .skip:focus{left:var(--rhc-space-max-md);top:var(--rhc-space-max-md);background:var(--rhc-color-wit);padding:var(--rhc-space-max-sm) var(--rhc-space-max-md);border-radius:var(--rhc-border-radius-sm)}
-    .layout{display:flex;flex-direction:column;min-block-size:100vh}
-    .main{flex:1;inline-size:100%;box-sizing:border-box}
-    .content{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box}
-  `],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .skip {
+        position: absolute;
+        left: var(--app-skip-link-offset);
+        z-index: 1030;
+      }
+      .skip:focus {
+        left: var(--rhc-space-max-md);
+        top: var(--rhc-space-max-md);
+        background: var(--rhc-color-wit);
+        padding: var(--rhc-space-max-sm) var(--rhc-space-max-md);
+        border-radius: var(--rhc-border-radius-sm);
+      }
+      .layout {
+        display: flex;
+        flex-direction: column;
+        min-block-size: 100vh;
+      }
+      .main {
+        flex: 1;
+        inline-size: 100%;
+        box-sizing: border-box;
+      }
+      .content {
+        max-inline-size: var(--app-content-max);
+        margin-inline: auto;
+        padding: var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);
+        box-sizing: border-box;
+      }
+    `,
+  ],
   template: `
     <a href="#main" class="skip" i18n="@@shell.skipLink">Naar de inhoud</a>
     <div class="layout">

src/app/shared/layout/site-footer/site-footer.component.ts

@@ -6,35 +6,117 @@ import { Component } from '@angular/core';
     rijksoverheid.nl pages, not a fabricated dead-link forest. */
 @Component({
   selector: 'app-site-footer',
-  styles: [`
-    :host{display:block}
-    .bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}
-    .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}
-    .tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}
-    .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}
-    /* CIBG's vendored h2 tag rule (dark navy, for light backgrounds) beats inherited
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .bar {
+        background: var(--rhc-color-layout);
+        color: var(--rhc-color-foreground-on-primary);
+        margin-block-start: var(--rhc-space-max-5xl);
+        inline-size: 100%;
+      }
+      .inner {
+        max-inline-size: var(--app-content-max);
+        margin-inline: auto;
+        padding: var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);
+        box-sizing: border-box;
+        display: flex;
+        gap: var(--rhc-space-max-3xl);
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+      .tagline {
+        font-style: italic;
+        font-weight: var(--rhc-text-font-weight-semi-bold);
+        font-size: var(--rhc-text-font-size-lg);
+        max-inline-size: 18rem;
+      }
+      .ministry {
+        margin-block-start: var(--rhc-space-max-md);
+        font-size: var(--rhc-text-font-size-sm);
+        color: var(--rhc-color-foreground-on-primary);
+      }
+      /* CIBG's vendored h2 tag rule (dark navy, for light backgrounds) beats inherited
        color regardless of specificity — restate on-primary explicitly for this dark bar. */
-    .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em;color:var(--rhc-color-foreground-on-primary)}
-    .links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}
-    .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}
-    .links a:hover{text-decoration:underline}
-    /* CIBG's vendored .meta class (unrelated component, coincidental name) sets a
+      .col h2 {
+        margin: 0 0 var(--rhc-space-max-md);
+        font-size: var(--rhc-text-font-size-sm);
+        font-weight: var(--rhc-text-font-weight-bold);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: var(--rhc-color-foreground-on-primary);
+      }
+      .links {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--rhc-space-max-sm);
+        font-size: var(--rhc-text-font-size-sm);
+      }
+      .links a {
+        color: var(--rhc-color-foreground-on-primary);
+        text-decoration: none;
+      }
+      .links a:hover {
+        text-decoration: underline;
+      }
+      /* CIBG's vendored .meta class (unrelated component, coincidental name) sets a
        dark grey — override rather than rename to keep the CIBG-mirroring class name. */
-    .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid color-mix(in srgb, var(--rhc-color-foreground-on-primary) 25%, transparent);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85;color:var(--rhc-color-foreground-on-primary)}
-  `],
+      .meta {
+        inline-size: 100%;
+        border-block-start: var(--rhc-border-width-sm) solid
+          color-mix(in srgb, var(--rhc-color-foreground-on-primary) 25%, transparent);
+        margin-block-start: var(--rhc-space-max-xl);
+        padding-block-start: var(--rhc-space-max-lg);
+        font-size: var(--rhc-text-font-size-sm);
+        opacity: 0.85;
+        color: var(--rhc-color-foreground-on-primary);
+      }
+    `,
+  ],
   template: `
     <footer class="bar">
       <div class="inner">
         <div>
           <div class="tagline" i18n="@@footer.tagline">De Rijksoverheid. Voor Nederland.</div>
-          <div class="ministry" i18n="@@footer.ministry">CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</div>
+          <div class="ministry" i18n="@@footer.ministry">
+            CIBG — Ministerie van Volksgezondheid, Welzijn en Sport
+          </div>
         </div>
         <nav class="col" i18n-aria-label="@@footer.overSiteAria" aria-label="Over deze site">
           <h2 i18n="@@footer.overSite">Over deze site</h2>
           <ul class="links">
-            <li><a href="https://www.rijksoverheid.nl/privacy" rel="noopener" target="_blank" i18n="@@footer.privacy">Privacy</a></li>
-            <li><a href="https://www.rijksoverheid.nl/cookies" rel="noopener" target="_blank" i18n="@@footer.cookies">Cookies</a></li>
-            <li><a href="https://www.rijksoverheid.nl/toegankelijkheid" rel="noopener" target="_blank" i18n="@@footer.toegankelijkheid">Toegankelijkheid</a></li>
+            <li>
+              <a
+                href="https://www.rijksoverheid.nl/privacy"
+                rel="noopener"
+                target="_blank"
+                i18n="@@footer.privacy"
+                >Privacy</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://www.rijksoverheid.nl/cookies"
+                rel="noopener"
+                target="_blank"
+                i18n="@@footer.cookies"
+                >Cookies</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://www.rijksoverheid.nl/toegankelijkheid"
+                rel="noopener"
+                target="_blank"
+                i18n="@@footer.toegankelijkheid"
+                >Toegankelijkheid</a
+              >
+            </li>
           </ul>
         </nav>
         <div class="meta" i18n="@@footer.demo">Demo / POC — geen echte gegevens.</div>

src/app/shared/layout/site-header/site-header.component.ts

@@ -24,13 +24,25 @@ const NAV_ITEMS: readonly HeaderNavItem[] = [
 @Component({
   selector: 'app-site-header',
   imports: [RouterLink, RouterLinkActive, BreadcrumbComponent],
-  styles: [`
-    .logout{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;font:inherit;color:inherit}
-    /* CIBG's header nav has no bg by default in this build — the grey bar is ours.
+  styles: [
+    `
+      .logout {
+        background: none;
+        border: 0;
+        padding: 0;
+        cursor: pointer;
+        text-decoration: underline;
+        font: inherit;
+        color: inherit;
+      }
+      /* CIBG's header nav has no bg by default in this build — the grey bar is ours.
        (.titlebar keeps its own robijn fill — --ro-layout — untouched; the breadcrumb
        inside it has no background of its own, so the bar's colour shows through.) */
-    nav{background-color:var(--rhc-color-cool-grey-200)}
-  `],
+      nav {
+        background-color: var(--rhc-color-cool-grey-200);
+      }
+    `,
+  ],
   template: `
     <header>
       <div class="logo">
@@ -39,7 +51,9 @@ const NAV_ITEMS: readonly HeaderNavItem[] = [
             <figure class="logo__figure">
               <figcaption class="logo__text">
                 <span class="logo__sender" i18n="@@header.sender">BIG-register</span>
-                <span class="logo__ministry" i18n="@@header.ministry">Ministerie van Volksgezondheid, Welzijn en Sport</span>
+                <span class="logo__ministry" i18n="@@header.ministry"
+                  >Ministerie van Volksgezondheid, Welzijn en Sport</span
+                >
               </figcaption>
             </figure>
           </a>
@@ -49,12 +63,20 @@ const NAV_ITEMS: readonly HeaderNavItem[] = [
         <div class="container">
           <div class="row">
             <div class="title col-md-7">
-              @if (trail().length) { <app-breadcrumb [items]="trail()" /> }
+              @if (trail().length) {
+                <app-breadcrumb [items]="trail()" />
+              }
             </div>
             <div class="user-menu col-md-5">
               @if (session(); as s) {
-                <div><span class="login-name">{{ s.naam }}</span></div>
-                <div><button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">Uitloggen</button></div>
+                <div>
+                  <span class="login-name">{{ s.naam }}</span>
+                </div>
+                <div>
+                  <button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">
+                    Uitloggen
+                  </button>
+                </div>
               }
             </div>
           </div>
@@ -82,7 +104,10 @@ export class SiteHeaderComponent {
 
   readonly session = computed(() => this.sessionPort?.session() ?? null);
   private url = toSignal(
-    this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.router.url)),
+    this.router.events.pipe(
+      filter((e) => e instanceof NavigationEnd),
+      map(() => this.router.url),
+    ),
     { initialValue: this.router.url },
   );
   protected trail = computed(() => trailFor(this.url()));

src/app/shared/layout/wizard-shell/wizard-shell.component.ts

@@ -32,24 +32,49 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
 @Component({
   selector: 'app-wizard-shell',
   imports: [FormsModule, ButtonComponent, AlertComponent, SpinnerComponent, StepperComponent],
-  styles: [`
-    .es-title{margin:0 0 var(--rhc-space-max-sm)}
-    .es-list{margin:0;padding-inline-start:var(--rhc-space-max-xl)}
-    /* Default link color doesn't meet contrast on the error-alert's light-red surface. */
-    .es-list a{color:var(--rhc-color-lintblauw-700)}
-  `],
+  styles: [
+    `
+      .es-title {
+        margin: 0 0 var(--rhc-space-max-sm);
+      }
+      .es-list {
+        margin: 0;
+        padding-inline-start: var(--rhc-space-max-xl);
+      }
+      /* Default link color doesn't meet contrast on the error-alert's light-red surface. */
+      .es-list a {
+        color: var(--rhc-color-lintblauw-700);
+      }
+    `,
+  ],
   template: `
     @switch (status()) {
       @case ('editing') {
-        <app-stepper class="app-section" [steps]="steps()" [current]="current()"
-          [processName]="processName()" [stepTitle]="stepTitle()" (stepSelected)="goToStep.emit($event)" />
+        <app-stepper
+          class="app-section"
+          [steps]="steps()"
+          [current]="current()"
+          [processName]="processName()"
+          [stepTitle]="stepTitle()"
+          (stepSelected)="goToStep.emit($event)"
+        />
         @if (errors().length) {
-          <div #errorSummary tabindex="-1" role="alert" aria-labelledby="wizard-error-title" class="app-section">
+          <div
+            #errorSummary
+            tabindex="-1"
+            role="alert"
+            aria-labelledby="wizard-error-title"
+            class="app-section"
+          >
             <app-alert type="error">
-              <h3 id="wizard-error-title" class="es-title" i18n="@@wizard.errorTitle">Er ging iets mis met uw invoer</h3>
+              <h3 id="wizard-error-title" class="es-title" i18n="@@wizard.errorTitle">
+                Er ging iets mis met uw invoer
+              </h3>
               <ul class="es-list">
                 @for (e of errors(); track e.id) {
-                  <li><a [href]="'#' + e.id" (click)="goToField($event, e.id)">{{ e.message }}</a></li>
+                  <li>
+                    <a [href]="'#' + e.id" (click)="goToField($event, e.id)">{{ e.message }}</a>
+                  </li>
                 }
               </ul>
             </app-alert>
@@ -57,18 +82,35 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
         }
         <form (ngSubmit)="primary.emit()" class="form-horizontal app-section">
           <div class="form-header">
-            <div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
+            <div class="form-action">
+              <span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span>
+            </div>
           </div>
           <ng-content />
           <hr />
           <div class="d-flex flex-column flex-sm-row-reverse">
-            <div class="m-0"><app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button></div>
+            <div class="m-0">
+              <app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button>
+            </div>
             @if (canGoBack()) {
-              <app-button type="button" variant="subtle" class="me-auto" (click)="back.emit()" i18n="@@wizard.terugVorige">Terug naar vorige stap</app-button>
+              <app-button
+                type="button"
+                variant="subtle"
+                class="me-auto"
+                (click)="back.emit()"
+                i18n="@@wizard.terugVorige"
+                >Terug naar vorige stap</app-button
+              >
             }
           </div>
           <div class="app-section">
-            <app-button type="button" variant="subtle" (click)="cancel.emit()" i18n="@@wizard.annuleren">Annuleren</app-button>
+            <app-button
+              type="button"
+              variant="subtle"
+              (click)="cancel.emit()"
+              i18n="@@wizard.annuleren"
+              >Annuleren</app-button
+            >
           </div>
         </form>
       }
@@ -81,7 +123,9 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
       @case ('failed') {
         <app-alert type="error">{{ errorMessage() }}</app-alert>
         <div class="app-section">
-          <app-button variant="secondary" (click)="retry.emit()" i18n="@@wizard.opnieuwProberen">Opnieuw proberen</app-button>
+          <app-button variant="secondary" (click)="retry.emit()" i18n="@@wizard.opnieuwProberen"
+            >Opnieuw proberen</app-button
+          >
         </div>
       }
     }
@@ -125,7 +169,10 @@ export class WizardShellComponent {
     let firstStep = true;
     effect(() => {
       this.current();
-      if (firstStep) { firstStep = false; return; }
+      if (firstStep) {
+        firstStep = false;
+        return;
+      }
       untracked(() => queueMicrotask(() => this.stepper()?.focusTitle()));
     });
     // A11y: when validation errors first appear (after a failed submit), move
@@ -137,8 +184,13 @@ export class WizardShellComponent {
     let hadErrors = false;
     effect(() => {
       const has = this.errors().length > 0;
-      if (firstErr) { firstErr = false; hadErrors = has; return; }
-      if (has && !hadErrors) untracked(() => queueMicrotask(() => this.errorSummary()?.nativeElement.focus()));
+      if (firstErr) {
+        firstErr = false;
+        hadErrors = has;
+        return;
+      }
+      if (has && !hadErrors)
+        untracked(() => queueMicrotask(() => this.errorSummary()?.nativeElement.focus()));
       hadErrors = has;
     });
   }

src/app/shared/layout/wizard-shell/wizard-shell.stories.ts

@@ -21,8 +21,15 @@ type Story = StoryObj<WizardShellComponent>;
 
 const steps = ['Adres', 'Beroep', 'Controle'];
 const base = {
-  steps, current: 1, stepTitle: 'Beroep op basis van uw diploma', processName: 'Inschrijven in het BIG-register',
-  primaryLabel: 'Volgende', canGoBack: true, errors: [], errorMessage: '', goToStep: () => {},
+  steps,
+  current: 1,
+  stepTitle: 'Beroep op basis van uw diploma',
+  processName: 'Inschrijven in het BIG-register',
+  primaryLabel: 'Volgende',
+  canGoBack: true,
+  errors: [],
+  errorMessage: '',
+  goToStep: () => {},
 };
 
 export const Editing: Story = { args: { ...base, status: 'editing' } };
@@ -38,4 +45,6 @@ export const EditingMetFouten: Story = {
 };
 export const Submitting: Story = { args: { ...base, status: 'submitting' } };
 export const Submitted: Story = { args: { ...base, status: 'submitted' } };
-export const Failed: Story = { args: { ...base, status: 'failed', errorMessage: 'Het indienen is niet gelukt: netwerkfout.' } };
+export const Failed: Story = {
+  args: { ...base, status: 'failed', errorMessage: 'Het indienen is niet gelukt: netwerkfout.' },
+};

src/app/shared/ui/alert/alert.component.ts

@@ -16,7 +16,14 @@ const ICON_LABELS: Record<AlertType, string> = {
     only the icon's a11y label and a content wrapper (`.feedback` is a flex row). */
 @Component({
   selector: 'app-alert',
-  styles: [`.feedback>div{flex:1 1 auto;min-width:0}`],
+  styles: [
+    `
+      .feedback > div {
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+    `,
+  ],
   template: `
     <div
       class="feedback"
@@ -25,8 +32,11 @@ const ICON_LABELS: Record<AlertType, string> = {
       [class.feedback-warning]="type() === 'warning'"
       [class.feedback-error]="type() === 'error'"
       role="status"
-      aria-atomic="true">
-      <span class="icon"><span class="visually-hidden">{{ iconLabels[type()] }}</span></span>
+      aria-atomic="true"
+    >
+      <span class="icon"
+        ><span class="visually-hidden">{{ iconLabels[type()] }}</span></span
+      >
       <div><ng-content /></div>
     </div>
   `,

src/app/shared/ui/application-link/application-link.component.ts

@@ -14,13 +14,26 @@ import { RouterLink } from '@angular/router';
 @Component({
   selector: 'li[app-application-link]',
   imports: [RouterLink, NgTemplateOutlet],
-  styles: [`
-    /* The vendored .applications li a surface only styles <a>; mirror it from tokens
+  styles: [
+    `
+      /* The vendored .applications li a surface only styles <a>; mirror it from tokens
        for a non-navigating (informational) row so the card looks consistent. */
-    .static-row{display:flex;background:var(--rhc-color-wit);border-block-end:.065rem solid var(--rhc-color-border-subtle);padding:.75rem 2rem .75rem 1rem}
-    .content{flex:1 1 auto;min-inline-size:0}
-    .cta{margin-inline-start:auto;align-self:center}
-  `],
+      .static-row {
+        display: flex;
+        background: var(--rhc-color-wit);
+        border-block-end: 0.065rem solid var(--rhc-color-border-subtle);
+        padding: 0.75rem 2rem 0.75rem 1rem;
+      }
+      .content {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+      }
+      .cta {
+        margin-inline-start: auto;
+        align-self: center;
+      }
+    `,
+  ],
   template: `
     @if (to()) {
       <a [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
@@ -33,10 +46,16 @@ import { RouterLink } from '@angular/router';
     <ng-template #body>
       <div class="content">
         <h3 class="h3">{{ heading() }}</h3>
-        @if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
-        @if (status()) { <div class="status">{{ status() }}</div> }
+        @if (subtitle()) {
+          <div class="subtitle">{{ subtitle() }}</div>
+        }
+        @if (status()) {
+          <div class="status">{{ status() }}</div>
+        }
       </div>
-      @if (cta()) { <div class="cta">{{ cta() }}</div> }
+      @if (cta()) {
+        <div class="cta">{{ cta() }}</div>
+      }
     </ng-template>
   `,
 })

src/app/shared/ui/application-link/application-link.stories.ts

@@ -17,7 +17,11 @@ export default meta;
 type Story = StoryObj<ApplicationLinkComponent>;
 
 export const Navigatie: Story = {
-  args: { heading: 'Inschrijven', subtitle: 'Schrijf u in in het BIG-register.', to: '/registreren' },
+  args: {
+    heading: 'Inschrijven',
+    subtitle: 'Schrijf u in in het BIG-register.',
+    to: '/registreren',
+  },
 };
 export const Actie: Story = {
   args: { heading: 'Inschrijving', status: 'Stap 2 van 3', cta: 'Verder gaan', clickable: true },

src/app/shared/ui/async/async.component.ts

@@ -36,31 +36,41 @@ export class AsyncErrorDirective {
   imports: [NgTemplateOutlet, SpinnerComponent, AlertComponent, ButtonComponent],
   template: `
     <div aria-live="polite" [attr.aria-busy]="rd().tag === 'Loading' ? 'true' : null">
-    @switch (rd().tag) {
-      @case ('Loading') {
-        @if (loadingTpl()) { <ng-container [ngTemplateOutlet]="loadingTpl()!.tpl" /> }
-        @else { <app-spinner /> }
-      }
-      @case ('Failure') {
-        @if (errorTpl()) {
-          <ng-container [ngTemplateOutlet]="errorTpl()!.tpl"
-            [ngTemplateOutletContext]="{ $implicit: error(), retry: retry }" />
-        } @else {
-          <app-alert type="error">{{ errorText() }}</app-alert>
-          <div style="margin-top:1rem">
-            <app-button variant="secondary" (click)="retry()">{{ retryText() }}</app-button>
-          </div>
+      @switch (rd().tag) {
+        @case ('Loading') {
+          @if (loadingTpl()) {
+            <ng-container [ngTemplateOutlet]="loadingTpl()!.tpl" />
+          } @else {
+            <app-spinner />
+          }
+        }
+        @case ('Failure') {
+          @if (errorTpl()) {
+            <ng-container
+              [ngTemplateOutlet]="errorTpl()!.tpl"
+              [ngTemplateOutletContext]="{ $implicit: error(), retry: retry }"
+            />
+          } @else {
+            <app-alert type="error">{{ errorText() }}</app-alert>
+            <div style="margin-top:1rem">
+              <app-button variant="secondary" (click)="retry()">{{ retryText() }}</app-button>
+            </div>
+          }
+        }
+        @case ('Empty') {
+          @if (emptyTpl()) {
+            <ng-container [ngTemplateOutlet]="emptyTpl()!.tpl" />
+          } @else {
+            <p>{{ emptyText() }}</p>
+          }
+        }
+        @case ('Success') {
+          <ng-container
+            [ngTemplateOutlet]="loadedTpl().tpl"
+            [ngTemplateOutletContext]="{ $implicit: value() }"
+          />
         }
       }
-      @case ('Empty') {
-        @if (emptyTpl()) { <ng-container [ngTemplateOutlet]="emptyTpl()!.tpl" /> }
-        @else { <p>{{ emptyText() }}</p> }
-      }
-      @case ('Success') {
-        <ng-container [ngTemplateOutlet]="loadedTpl().tpl"
-          [ngTemplateOutletContext]="{ $implicit: value() }" />
-      }
-    }
     </div>
   `,
 })
@@ -94,10 +104,20 @@ export class AsyncComponent<T> {
   // value/error are pulled out via the exhaustive fold — only Success carries a
   // value, only Failure carries an error, so these can't lie.
   protected value = computed(() =>
-    foldRemote(this.rd(), { loading: () => undefined, empty: () => undefined, failure: () => undefined, success: (v) => v }),
+    foldRemote(this.rd(), {
+      loading: () => undefined,
+      empty: () => undefined,
+      failure: () => undefined,
+      success: (v) => v,
+    }),
   );
   protected error = computed(() =>
-    foldRemote(this.rd(), { loading: () => undefined, empty: () => undefined, failure: (e) => e, success: () => undefined }),
+    foldRemote(this.rd(), {
+      loading: () => undefined,
+      empty: () => undefined,
+      failure: (e) => e,
+      success: () => undefined,
+    }),
   );
 
   retry = () => {
@@ -110,6 +130,9 @@ export class AsyncComponent<T> {
 
 /** Convenience: import this array to get the wrapper + all slot directives. */
 export const ASYNC = [
-  AsyncComponent, AsyncLoadedDirective, AsyncLoadingDirective,
-  AsyncEmptyDirective, AsyncErrorDirective,
+  AsyncComponent,
+  AsyncLoadedDirective,
+  AsyncLoadingDirective,
+  AsyncEmptyDirective,
+  AsyncErrorDirective,
 ] as const;

src/app/shared/ui/async/async.stories.ts

@@ -37,7 +37,11 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const Loaded: Story = { args: { resource: fakeResource('resolved', ['Huisartsgeneeskunde', 'Spoedeisende hulp']) } };
+export const Loaded: Story = {
+  args: { resource: fakeResource('resolved', ['Huisartsgeneeskunde', 'Spoedeisende hulp']) },
+};
 export const Loading: Story = { args: { resource: fakeResource('loading') } };
 export const Empty: Story = { args: { resource: fakeResource('resolved', [] as string[]) } };
-export const ErrorState: Story = { args: { resource: fakeResource('error', undefined, new Error('Demo')) } };
+export const ErrorState: Story = {
+  args: { resource: fakeResource('error', undefined, new Error('Demo')) },
+};

src/app/shared/ui/button/button.component.ts

@@ -13,7 +13,8 @@ type Variant = 'primary' | 'secondary' | 'subtle' | 'danger';
       [class.btn-primary]="variant() === 'primary'"
       [class.btn-outline-primary]="variant() === 'secondary'"
       [class.btn-link]="variant() === 'subtle'"
-      [class.btn-danger]="variant() === 'danger'">
+      [class.btn-danger]="variant() === 'danger'"
+    >
       <ng-content />
     </button>
   `,