feat(fp): WP-27 — brief UX layer (undo/redo, standaardbrief, passage search, diff badges)

Brief letter-composition UX improvements:
- undo/redo history in the brief store (snapshot stacks, Ctrl/Cmd+Z) + retry-save
- "Standaardbrief invoegen" starter for empty sections; isDefault library passages
  (backend DTO/seed + adapter parse)
- passage-picker client-side search (rich-text textOf helper)
- rejection diff badges on the letter canvas + show/hide changes toggle
  (pure brief-diff domain fns + spec)

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

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

@@ -6,6 +6,7 @@ import {
   effect,
   inject,
   input,
+  linkedSignal,
   output,
   signal,
   viewChild,
@@ -21,6 +22,7 @@ import { OrgTemplate } from '@brief/domain/org-template';
 import { OrgTemplateTextField } from '@brief/domain/org-template.machine';
 import { Diagnostic } from '@brief/domain/placeholders';
 import { BriefMsg } from '@brief/domain/brief.machine';
+import { BlockDiffKind } from '@brief/domain/brief-diff';
 import { LetterSectionComponent } from '@brief/ui/letter-section/letter-section.component';
 
 /** A run of consecutive lines to render together: a list (bullet/number) or a single plain line. */
@@ -66,9 +68,40 @@ const A4_HEIGHT_PX = (297 * 96) / 25.4;
       }
       .toolbar {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--rhc-space-max-sm);
         margin-block-end: var(--rhc-space-max-sm);
       }
+      .zoom {
+        display: flex;
+        align-items: center;
+        gap: var(--rhc-space-max-sm);
+      }
+      .zoom-pct {
+        min-width: 3.5ch;
+        text-align: center;
+        color: var(--rhc-color-foreground-subtle);
+        font-variant-numeric: tabular-nums;
+      }
+      /* Rejection-diff badge (WP-27): a small pill above a changed/added block. */
+      .diff-block.diff-changed {
+        border-inline-start: 3px solid var(--rhc-color-oranje-500);
+        padding-inline-start: var(--rhc-space-max-sm);
+      }
+      .diff-badge {
+        display: inline-block;
+        margin-block-end: 1mm;
+        padding: 0 1.5mm;
+        border-radius: var(--rhc-border-radius-sm);
+        font-size: 7.5pt;
+        /* dark text, not white: oranje-500/groen-500 fail 4.5:1 contrast with white (WP-27 axe). */
+        color: var(--rhc-color-foreground-default);
+        background: var(--rhc-color-oranje-500);
+      }
+      .diff-badge.added {
+        background: var(--rhc-color-groen-500);
+      }
       /* Portal-side chrome around the letter surface (not part of the contract file). */
       .surface {
         background: var(--rhc-color-grijs-100);
@@ -139,20 +172,40 @@ const A4_HEIGHT_PX = (297 * 96) / 25.4;
       }
     </ng-template>
 
-    @if (editableRegions() === 'none') {
+    @if (editableRegions() !== 'template') {
       <div class="toolbar">
-        <app-button
-          variant="subtle"
-          (click)="showSample.set(!showSample())"
-          [attr.aria-pressed]="showSample()"
-        >
-          {{ showSample() ? hideSampleLabel() : showSampleLabel() }}
-        </app-button>
+        <div class="zoom" role="group" [attr.aria-label]="zoomGroupLabel()">
+          <app-button
+            variant="subtle"
+            [disabled]="zoomLevel() <= 0.5"
+            [attr.aria-label]="zoomOutLabel()"
+            (click)="zoomBy(-0.1)"
+            >−</app-button
+          >
+          <span class="zoom-pct">{{ zoomPct() }}</span>
+          <app-button
+            variant="subtle"
+            [disabled]="zoomLevel() >= 1.5"
+            [attr.aria-label]="zoomInLabel()"
+            (click)="zoomBy(0.1)"
+            >+</app-button
+          >
+          <app-button variant="subtle" (click)="zoomLevel.set(1)">{{ zoomResetLabel() }}</app-button>
+        </div>
+        @if (editableRegions() === 'none') {
+          <app-button
+            variant="subtle"
+            (click)="showSample.set(!showSample())"
+            [attr.aria-pressed]="showSample()"
+          >
+            {{ showSample() ? hideSampleLabel() : showSampleLabel() }}
+          </app-button>
+        }
       </div>
     }
 
     <div class="surface">
-      <div class="letter" #page [style]="marginStyle()" [style.zoom]="zoom()">
+      <div class="letter" #page [style]="marginStyle()" [style.zoom]="zoomLevel()">
         <!-- div, not <header>/<footer>: the CIBG huisstijl styles those bare elements
              (robijn footer background) — the letter surface must stay letter.css-only. -->
         <div class="letter__letterhead" [class.from-template]="tintTemplate()">
@@ -211,7 +264,14 @@ const A4_HEIGHT_PX = (297 * 96) / 25.4;
               <section>
                 <h3>{{ section.title }}</h3>
                 @for (block of section.blocks; track block.blockId) {
-                  @for (seg of segmentsOf(block); track $index) {
+                  @let diffKind = showDiff() ? blockDiffs().get(block.blockId) : undefined;
+                  <div class="diff-block" [class.diff-changed]="!!diffKind">
+                    @if (diffKind) {
+                      <span class="diff-badge" [class.added]="diffKind === 'added'">{{
+                        diffLabel(diffKind)
+                      }}</span>
+                    }
+                    @for (seg of segmentsOf(block); track $index) {
                     @if (seg.list === 'bullet') {
                       <ul>
                         @for (para of seg.items; track $index) {
@@ -242,7 +302,8 @@ const A4_HEIGHT_PX = (297 * 96) / 25.4;
                         />
                       </p>
                     }
-                  }
+                    }
+                  </div>
                 }
               </section>
             }
@@ -315,7 +376,13 @@ export class LetterCanvasComponent {
   availablePassages = input<readonly LibraryPassage[]>([]);
   placeholders = input<readonly PlaceholderOption[]>([]);
   diagnostics = input<readonly Diagnostic[]>([]);
+  /** Initial zoom; the in-canvas controls take over from here (WP-27). */
   zoom = input(1);
+  /** Blocks changed/added/removed since the letter was rejected (WP-27); badged when
+      `showDiff` is on. Removed blocks aren't in the map's rendered set — they no longer
+      exist in the letter — the composer surfaces them as a count. */
+  blockDiffs = input<ReadonlyMap<string, BlockDiffKind>>(new Map());
+  showDiff = input(false);
   /** The org logo's content URL (letterhead), or null when none is set. */
   logoUrl = input<string | null>(null);
   edit = output<BriefMsg>();
@@ -343,10 +410,26 @@ export class LetterCanvasComponent {
   signatureRoleLabel = input($localize`:@@brief.canvas.signatureRole:Functie ondertekenaar`);
   footerContactLabel = input($localize`:@@brief.canvas.footerContact:Contactgegevens (voettekst)`);
   footerLegalLabel = input($localize`:@@brief.canvas.footerLegal:Juridische voettekst`);
+  zoomGroupLabel = input($localize`:@@brief.canvas.zoom:Zoomniveau`);
+  zoomInLabel = input($localize`:@@brief.canvas.zoomIn:Inzoomen`);
+  zoomOutLabel = input($localize`:@@brief.canvas.zoomOut:Uitzoomen`);
+  zoomResetLabel = input($localize`:@@brief.canvas.zoomReset:100%`);
+  addedLabel = input($localize`:@@brief.diff.added:nieuw`);
+  changedLabel = input($localize`:@@brief.diff.changed:gewijzigd sinds afwijzing`);
 
   protected showSample = signal(false);
   protected letterDate = formatDatumNl(new Date());
 
+  /** Zoom seeded from the input; the +/−/reset controls drive it from there. */
+  protected zoomLevel = linkedSignal(() => this.zoom());
+  protected zoomPct = computed(() => `${Math.round(this.zoomLevel() * 100)}%`);
+  protected zoomBy(delta: number) {
+    // clamp 0.5–1.5; round to avoid float drift accumulating on repeated clicks.
+    this.zoomLevel.update((z) => Math.round(Math.min(1.5, Math.max(0.5, z + delta)) * 10) / 10);
+  }
+  protected diffLabel = (kind: BlockDiffKind) =>
+    kind === 'added' ? this.addedLabel() : this.changedLabel();
+
   /** The letterhead/signature/footer are tinted "not yours" only while composing —
       in 'none' the whole surface is read-only, in 'template' they ARE the editable focus. */
   protected tintTemplate = computed(() => this.editableRegions() === 'content');

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

@@ -148,6 +148,19 @@ export const TemplateMode: Story = { args: { editableRegions: 'template' } };
 
 export const Zoomed: Story = { args: { editableRegions: 'none', zoom: 0.6 } };
 
+/** Approver's "Toon wijzigingen": blocks changed/added since rejection are badged (WP-27). */
+export const WithDiff: Story = {
+  args: {
+    editableRegions: 'none',
+    diagnostics: [],
+    showDiff: true,
+    blockDiffs: new Map([
+      ['local-1', 'added'],
+      ['local-2', 'changed'],
+    ]),
+  },
+};
+
 /** Long letter: the approximate ±page-break marks appear per A4 interval. */
 export const PageBreak: Story = {
   args: { editableRegions: 'none', brief: longBrief, diagnostics: [] },