feat(brief): letter composition + two-person approval (teaching slice)

New `brief` context — a letter-composition feature with a drafter/approver
approval workflow, built as a teaching vertical slice on the repo's existing
FP + Elm + atomic-design patterns (see plan in ~/.claude/plans).

Domain (pure):
- Rich text as a serialisable value tree (placeholders are first-class nodes),
  moved to @shared/kernel/rich-text.ts so the shared editor can use it.
- lintPlaceholders: a pure, total content -> Diagnostic[] linter, derived never stored.
- brief.machine.ts: status sum-type with guarded transitions; frozen-snapshot =
  deep value copy; derived diagnostics/editability. Full specs.

Backend (.NET stub):
- BriefStore + seed, GET/PUT /brief and submit/approve/reject/send endpoints,
  role via X-Role header (mirrors X-Admin), transition + approver!=drafter guards,
  audit logging. Regenerated typed client via gen:api. +6 backend tests.

Seam:
- brief.adapter.ts maps flat wire unions <-> domain discriminated unions at the
  parse boundary (+ spec).

UI (atomic):
- shared atoms: checkbox, placeholder-chip; molecule: rich-text-editor (no-dep
  contenteditable, DOM<->RichTextBlock round-trip tested).
- brief/ui: letter-block, passage-picker, diagnostics-panel, rejection-comments,
  letter-section, letter-composer, letter-preview, brief.page + /brief route.
- Dev-only ?role=drafter|approver toggle + roleInterceptor; dashboard nav link.

Enforcement: @brief/* alias + eslint layer boundary (brief depends only on shared).

Also included (same session):
- Value-object specs (postcode/uren/big-nummer) — closes the "domain must have a spec" gap.
- src/docs/ Storybook MDX foundation pages (atomic design, tokens, FP-in-UI).
- .storybook/tsconfig.json: add @angular/localize to types (Storybook was fully
  broken — $localize unresolved — dev + build).

Verified: 168 FE tests, 68 backend tests, lint/build/check:tokens green,
Storybook boots, end-to-end HTTP smoke (self-approve 403, approver 200, full flow).

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

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

@@ -0,0 +1,53 @@
+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 { ButtonComponent } from '@shared/ui/button/button.component';
+import { LetterBlock } from '@brief/domain/brief';
+
+/** Molecule: one block in a section — its editor plus provenance + block controls.
+    Presentational: emits content/remove/move events; the section maps them to messages. */
+@Component({
+  selector: 'app-letter-block',
+  imports: [RichTextEditorComponent, ButtonComponent],
+  styles: [`
+    :host{display:block}
+    .block{border-inline-start:3px 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>
+          </span>
+        }
+      </div>
+      <app-rich-text-editor
+        [content]="block().content"
+        [placeholders]="placeholders()"
+        [editable]="editable()"
+        (contentChanged)="contentChanged.emit($event)" />
+    </div>
+  `,
+})
+export class LetterBlockComponent {
+  block = input.required<LetterBlock>();
+  placeholders = input<readonly PlaceholderOption[]>([]);
+  editable = input(false);
+  contentChanged = output<RichTextBlock>();
+  removed = output<void>();
+  moved = output<-1 | 1>();
+
+  protected provenance = computed(() => {
+    const b = this.block();
+    if (b.type === 'freeText') return $localize`:@@brief.provenance.free:Vrije tekst`;
+    return b.edited
+      ? $localize`:@@brief.provenance.edited:Aangepaste standaardtekst`
+      : $localize`:@@brief.provenance.standard:Standaardtekst`;
+  });
+}