feat(fp): WP-09 — pure-logic closure: dates + missing command specs

Consolidate four hand-rolled nl-NL date formatters (tasks.ts, aanvraag-
block, letter-preview, aanvraag-view -- one more than the WP found) into
one shared/kernel/datum.ts::formatDatumNl, spec-pinned and empty-safe.
Add the two missing command specs CLAUDE.md's testing rule calls for:
draft-sync.spec.ts (debounce coalescing + trailing-call + submit Result
shape, via fake timers) and submit-change-request.spec.ts. Remove the
unused RemoteData.map3 (updating the three docs that mentioned it); the
variant input on confirmation.component.ts was already gone. Documents
both stale-WP-text corrections in the backlog file.

This closes out backlog Phase 1 (FP/DDD core, WP-05..09).

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

@@ -3,6 +3,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import { HeadingComponent } from '@shared/ui/heading/heading.component';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { PlaceholderChipComponent } from '@shared/ui/placeholder-chip/placeholder-chip.component';
+import { formatDatumNl } from '@shared/kernel/datum';
 import { Paragraph } from '@shared/kernel/rich-text';
 import { Brief, LetterBlock } from '@brief/domain/brief';
 import { Diagnostic } from '@brief/domain/placeholders';
@@ -152,11 +153,7 @@ 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 = formatDatumNl(new Date());
 
   private defs = computed(() => new Map(this.brief().placeholders.map((p) => [p.key, p])));
   private worst = computed(() => {

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

@@ -0,0 +1,99 @@
+import { ApplicationRef, signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ApplicationsAdapter } from '@registratie/infrastructure/applications.adapter';
+import { createDraftSync, DraftSnapshot } from './draft-sync';
+
+function setup(adapter: Partial<ApplicationsAdapter>) {
+  const navigate = vi.fn().mockResolvedValue(true);
+  TestBed.configureTestingModule({
+    providers: [
+      { provide: ApplicationsAdapter, useValue: adapter },
+      { provide: Router, useValue: { navigate } },
+      { provide: ActivatedRoute, useValue: { snapshot: { queryParamMap: { get: () => null } } } },
+    ],
+  });
+  const snap = signal<DraftSnapshot | null>(null);
+  const onResume = vi.fn();
+  const draftSync = TestBed.runInInjectionContext(() =>
+    createDraftSync({
+      type: 'registratie',
+      snapshot: () => snap(),
+      onResume,
+      enabled: () => true,
+    }),
+  );
+  TestBed.inject(ApplicationRef).tick(); // flush the effect's initial run
+  return { draftSync, snap, navigate, onResume };
+}
+
+const tick = () => TestBed.inject(ApplicationRef).tick();
+
+describe('createDraftSync', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('coalesces rapid snapshot changes into ONE debounced sync of the latest value', async () => {
+    const create = vi.fn().mockResolvedValue('a1');
+    const syncDraft = vi.fn().mockResolvedValue(undefined);
+    const { snap } = setup({ create, syncDraft });
+
+    snap.set({ draft: { step: 1 }, stepIndex: 0, stepCount: 3, documentIds: [] });
+    tick();
+    snap.set({ draft: { step: 1, x: 'a' }, stepIndex: 0, stepCount: 3, documentIds: [] });
+    tick();
+    snap.set({ draft: { step: 1, x: 'ab' }, stepIndex: 0, stepCount: 3, documentIds: [] });
+    tick();
+
+    // still inside the 600ms debounce window — nothing has synced yet
+    await vi.advanceTimersByTimeAsync(500);
+    expect(syncDraft).not.toHaveBeenCalled();
+
+    await vi.advanceTimersByTimeAsync(200);
+    expect(create).toHaveBeenCalledTimes(1); // one Concept created, not three
+    expect(syncDraft).toHaveBeenCalledTimes(1); // one sync, not three
+    expect(syncDraft).toHaveBeenCalledWith(
+      'a1',
+      expect.objectContaining({ draft: { step: 1, x: 'ab' } }), // the LAST snapshot wins
+    );
+  });
+
+  it('a trailing change after the debounce fires schedules its own sync', async () => {
+    const create = vi.fn().mockResolvedValue('a1');
+    const syncDraft = vi.fn().mockResolvedValue(undefined);
+    const { snap } = setup({ create, syncDraft });
+
+    snap.set({ draft: { step: 1 }, stepIndex: 0, stepCount: 3, documentIds: [] });
+    tick();
+    await vi.advanceTimersByTimeAsync(600);
+    expect(syncDraft).toHaveBeenCalledTimes(1);
+
+    snap.set({ draft: { step: 2 }, stepIndex: 1, stepCount: 3, documentIds: [] });
+    tick();
+    await vi.advanceTimersByTimeAsync(600);
+    expect(syncDraft).toHaveBeenCalledTimes(2);
+    expect(syncDraft).toHaveBeenLastCalledWith('a1', expect.objectContaining({ stepIndex: 1 }));
+  });
+
+  describe('submit', () => {
+    it('resolves ok with the server response on success', async () => {
+      const create = vi.fn().mockResolvedValue('a1');
+      const submit = vi.fn().mockResolvedValue({ id: 'a1', autoApprovable: true });
+      const { draftSync } = setup({ create, submit });
+
+      const r = await draftSync.submit({});
+      expect(r).toEqual({ ok: true, value: { id: 'a1', autoApprovable: true } });
+      expect(submit).toHaveBeenCalledWith('a1', {});
+    });
+
+    it('folds a rejected submit into a Result error, never throwing', async () => {
+      const create = vi.fn().mockResolvedValue('a1');
+      const submit = vi.fn().mockRejectedValue(new Error('boom'));
+      const { draftSync } = setup({ create, submit });
+
+      const r = await draftSync.submit({});
+      expect(r.ok).toBe(false);
+    });
+  });
+});

src/app/registratie/application/submit-change-request.spec.ts

@@ -0,0 +1,40 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, it, expect } from 'vitest';
+import { Valid } from '@registratie/domain/change-request.machine';
+import { ChangeRequestAdapter } from '@registratie/infrastructure/change-request.adapter';
+import { createSubmitChangeRequest } from './submit-change-request';
+import { parsePostcode } from '@registratie/domain/value-objects/postcode';
+
+const postcode = parsePostcode('2514 EA');
+if (!postcode.ok) throw new Error('fixture postcode should parse');
+
+const data: Valid = { straat: 'Lange Voorhout 9', postcode: postcode.value, woonplaats: 'Den Haag' };
+
+function setup(adapter: Partial<ChangeRequestAdapter>) {
+  TestBed.configureTestingModule({ providers: [{ provide: ChangeRequestAdapter, useValue: adapter }] });
+  return TestBed.runInInjectionContext(() => createSubmitChangeRequest());
+}
+
+describe('createSubmitChangeRequest', () => {
+  it('resolves ok with the referentie on success', async () => {
+    const submit = setup({ changeRequest: () => Promise.resolve('BIG-2026-000123') });
+    const r = await submit(data);
+    expect(r).toEqual({ ok: true, value: 'BIG-2026-000123' });
+  });
+
+  it('folds a rejected call into a Result error, never throwing', async () => {
+    const submit = setup({
+      changeRequest: () => Promise.reject(new Error('network kaput')),
+    });
+    const r = await submit(data);
+    expect(r.ok).toBe(false);
+  });
+
+  it('surfaces a ProblemDetails detail message when the server rejects with one', async () => {
+    const submit = setup({
+      changeRequest: () => Promise.reject({ detail: 'Postcode komt niet overeen met de straat.' }),
+    });
+    const r = await submit(data);
+    expect(r).toEqual({ ok: false, error: 'Postcode komt niet overeen met de straat.' });
+  });
+});

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

@@ -1,3 +1,4 @@
+import { formatDatumNl } from '@shared/kernel/datum';
 import { Aanvraag, AanvraagStatus, AanvraagType } from './aanvraag';
 
 /** View-model mapping for an aanvraag: type → labels, status → label, and the fields
@@ -49,12 +50,6 @@ export interface AanvraagRow {
   status: string;
 }
 
-function formatNL(iso?: string): string {
-  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
     has no row — it renders as a resumable melding, see aanvraag-block). */
 export function submittedRow(a: Aanvraag): AanvraagRow {
@@ -63,7 +58,9 @@ export function submittedRow(a: Aanvraag): AanvraagRow {
   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:`);
+    parts.push(
+      $localize`:@@aanvraag.row.ingediend:ingediend op ${formatDatumNl(a.submittedAt)}:datum:`,
+    );
   if (s.tag === 'InBehandeling' && s.manual)
     parts.push(
       $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`,
@@ -88,7 +85,7 @@ export function detailRows(a: Aanvraag): { key: string; value: string }[] {
     },
     {
       key: $localize`:@@aanvraag.detail.ingediend:Ingediend op`,
-      value: a.submittedAt ? formatNL(a.submittedAt) : '—',
+      value: a.submittedAt ? formatDatumNl(a.submittedAt) : '—',
     },
   ];
   if (a.status.tag === 'Afgewezen') {

src/app/registratie/domain/tasks.ts

@@ -1,3 +1,4 @@
+import { formatDatumNl } from '@shared/kernel/datum';
 import { Registration } from './registration';
 import { herregistratieDeadline } from './registration.policy';
 
@@ -12,10 +13,6 @@ export interface PortalTask {
   actionLabel: string;
 }
 
-function formatNL(d: Date): string {
-  return d.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' });
-}
-
 /**
  * Derive the open tasks for a professional (pure). Eligibility is the server's
  * decision (`decisions.eligibleForHerregistratie`), passed in — the FE renders it,
@@ -33,7 +30,7 @@ export function tasksFromProfile(
     tasks.push({
       title: $localize`:@@task.herregistratie.title:Vraag uw herregistratie aan`,
       description: deadline
-        ? $localize`:@@task.herregistratie.deadline:Verleng uw registratie vóór ${formatNL(deadline)}:deadline:.`
+        ? $localize`:@@task.herregistratie.deadline:Verleng uw registratie vóór ${formatDatumNl(deadline)}:deadline:.`
         : $localize`:@@task.herregistratie.nodeadline:U kunt nu uw herregistratie aanvragen.`,
       to: '/herregistratie',
       actionLabel: $localize`:@@task.herregistratie.action:Herregistratie aanvragen`,

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

@@ -1,4 +1,5 @@
 import { Component, computed, input, output } from '@angular/core';
+import { formatDatumNl } from '@shared/kernel/datum';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { Aanvraag } from '@registratie/domain/aanvraag';
@@ -65,12 +66,6 @@ export class AanvraagBlockComponent {
   protected conceptText = computed(() => {
     const s = this.aanvraag().status;
     if (s.tag !== 'Concept') return '';
-    return $localize`:@@aanvraagBlock.conceptMelding:Deze aanvraag is nog niet volledig afgerond — u bent gebleven bij stap ${s.stepIndex + 1}:stap: van ${s.stepCount}:totaal:. Rond de aanvraag af vóór ${formatNL(this.deadline())}:datum:.`;
+    return $localize`:@@aanvraagBlock.conceptMelding:Deze aanvraag is nog niet volledig afgerond — u bent gebleven bij stap ${s.stepIndex + 1}:stap: van ${s.stepCount}:totaal:. Rond de aanvraag af vóór ${formatDatumNl(this.deadline())}:datum:.`;
   });
 }
-
-function formatNL(iso?: string): string {
-  return iso
-    ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })
-    : '';
-}

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

@@ -71,20 +71,6 @@ export function map2<E, A, B, R>(
   return { tag: 'Success', value: f(a.value, b.value) };
 }
 
-/** Combine three sources (built on map2). */
-export function map3<E, A, B, C, R>(
-  a: RemoteData<E, A>,
-  b: RemoteData<E, B>,
-  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),
-  );
-}
-
 /** Chain a second source that depends on the first one's value. */
 export function andThen<E, A, B>(
   rd: RemoteData<E, A>,

src/app/shared/kernel/datum.spec.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { formatDatumNl } from './datum';
+
+describe('formatDatumNl', () => {
+  it('formats a Date in long Dutch form', () => {
+    expect(formatDatumNl(new Date(2026, 6, 2))).toBe('2 juli 2026');
+  });
+
+  it('formats an ISO string the same way', () => {
+    expect(formatDatumNl('2026-07-02')).toBe('2 juli 2026');
+  });
+
+  it('is empty-safe: undefined, null, and empty string all yield the empty string', () => {
+    expect(formatDatumNl(undefined)).toBe('');
+    expect(formatDatumNl(null)).toBe('');
+    expect(formatDatumNl('')).toBe('');
+  });
+
+  it('returns empty for an unparseable string rather than "Invalid Date"', () => {
+    expect(formatDatumNl('not-a-date')).toBe('');
+  });
+});

src/app/shared/kernel/datum.ts

@@ -0,0 +1,16 @@
+/**
+ * The one hand-written date formatter for pure TS (non-template) code — a domain
+ * rule or a `$localize` string can't reach for Angular's `DatePipe`, so this covers
+ * that gap. Templates use `DatePipe` (`| date: 'longDate'`) instead; don't add a
+ * second hand-rolled formatter for either case.
+ */
+export function formatDatumNl(d: Date | string | undefined | null): string {
+  if (!d) return '';
+  const date = typeof d === 'string' ? new Date(d) : d;
+  if (Number.isNaN(date.getTime())) return '';
+  return new Intl.DateTimeFormat('nl-NL', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }).format(date);
+}

src/docs/remote-data.mdx

@@ -18,10 +18,10 @@ type RemoteData<E, T> = { tag: 'Loading' } | { tag: 'Empty' } | { tag: 'Failure'
 ## Combining sources
 
 Two or more independent fetches often need to render as ONE state (e.g. a registration
-call and a BRP call feeding the same page). `map`/`map2`/`map3`/`andThen` combine them
-with one precedence rule: **Failure beats Loading beats Empty beats Success** — if either
-source failed, the combined result is a failure; only when every source succeeded do you
-get a combined value.
+call and a BRP call feeding the same page). `map`/`map2`/`andThen` combine them with one
+precedence rule: **Failure beats Loading beats Empty beats Success** — if either source
+failed, the combined result is a failure; only when every source succeeded do you get a
+combined value.
 
 ```ts
 map2(registration, person, (reg, p) => ({ registration: reg, person: p }));