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-preview/letter-preview.component.ts

@@ -0,0 +1,65 @@
+import { Component, computed, input } from '@angular/core';
+import { HeadingComponent } from '@shared/ui/heading/heading.component';
+import { PlaceholderChipComponent } from '@shared/ui/placeholder-chip/placeholder-chip.component';
+import { Brief } from '@brief/domain/brief';
+import { Diagnostic } from '@brief/domain/placeholders';
+
+/** Organism: read-only rendering of the letter as the approver/recipient sees it.
+    Placeholders show as labelled chips (values are resolved server-side only at send);
+    a chip flagged by the linter shows its error/warning state. */
+@Component({
+  selector: 'app-letter-preview',
+  imports: [HeadingComponent, PlaceholderChipComponent],
+  styles: [`
+    :host{display:block}
+    .letter{background:var(--rhc-color-wit);border:1px 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)}
+  `],
+  template: `
+    <div class="letter">
+      @for (section of brief().sections; track section.sectionKey) {
+        <section>
+          <app-heading [level]="3">{{ section.title }}</app-heading>
+          @for (block of section.blocks; track block.blockId) {
+            @for (para of block.content.paragraphs; track $index) {
+              <p>
+                @for (node of para.nodes; track $index) {
+                  @switch (node.type) {
+                    @case ('text') { <span>{{ node.text }}</span> }
+                    @case ('lineBreak') { <br> }
+                    @case ('placeholder') {
+                      <app-placeholder-chip
+                        [label]="labelFor(node.key)"
+                        [autoResolvable]="autoFor(node.key)"
+                        [state]="stateFor(node.key)" />
+                    }
+                  }
+                }
+              </p>
+            }
+          }
+        </section>
+      }
+    </div>
+  `,
+})
+export class LetterPreviewComponent {
+  brief = input.required<Brief>();
+  diagnostics = input<readonly Diagnostic[]>([]);
+
+  private defs = computed(() => new Map(this.brief().placeholders.map((p) => [p.key, p])));
+  private worst = computed(() => {
+    const m = new Map<string, 'error' | 'warning'>();
+    for (const d of this.diagnostics()) {
+      if (!d.placeholderKey) continue;
+      if (d.severity === 'error') m.set(d.placeholderKey, 'error');
+      else if (!m.has(d.placeholderKey)) m.set(d.placeholderKey, 'warning');
+    }
+    return m;
+  });
+
+  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';
+}