feat(showcase): PII section — mask + elfproef parse (WP-42, mask/parse half)

Add a "PII — maskeren & parsen" section to /concepts demonstrating the WP-40 pieces
with FP + atomic design, framed for AVG art. 9 / data-minimisation: a live
<app-masked-value> atom (masked BSN that reveals on click; real reveal is step-up +
audited in behandel-scherm) and a live parseBsn elfproef parse. Both show the real
linked source via the WP-39 snippet mechanism (new showcase regions in bsn.ts + pii.ts,
registered in gen-snippets.mjs). Delivers WP-42's showcase demo; the persisted-audit
half stays pending WP-41.

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

src/app/shared/kernel/bsn.ts

@@ -11,6 +11,7 @@ export type Bsn = Brand<string, 'Bsn'>;
 // Positional weights for the elfproef: 9·d1 + 8·d2 + … + 2·d8 − 1·d9 ≡ 0 (mod 11).
 const WEIGHTS = [9, 8, 7, 6, 5, 4, 3, 2, -1];
 
+// #region showcase:parseBsn
 export function parseBsn(raw: string): Result<string, Bsn> {
   const t = raw.trim();
   if (!/^\d{9}$/.test(t)) {
@@ -22,5 +23,6 @@ export function parseBsn(raw: string): Result<string, Bsn> {
       $localize`:@@validation.bsnElfproef:Dit is geen geldig BSN (klopt niet met de elfproef).`,
     );
   }
-  return ok(t as Bsn);
+  return ok(t as Bsn); // holding a Bsn is proof it passed the elfproef
 }
+// #endregion showcase:parseBsn

src/app/shared/kernel/pii.ts

@@ -5,6 +5,7 @@
  */
 export const REDACTED = '‹redacted›';
 
+// #region showcase:mask
 /** Keep the last `keep` characters, mask the rest with `*`. */
 export function maskTail(value: string, keep: number): string {
   if (value.length <= keep) return '*'.repeat(value.length);
@@ -15,3 +16,4 @@ export function maskTail(value: string, keep: number): string {
 export function maskBsn(value: string): string {
   return maskTail(value, 3);
 }
+// #endregion showcase:mask

src/app/showcase/concepts.page.ts

@@ -11,6 +11,9 @@ import { HerregistratieWizardComponent } from '@herregistratie/ui/herregistratie
 import { IntakeWizardComponent } from '@herregistratie/ui/intake-wizard/intake-wizard.component';
 import { Registration } from '@registratie/domain/registration';
 import { parsePostcode } from '@registratie/domain/value-objects/postcode';
+import { parseBsn } from '@shared/kernel/bsn';
+import { maskBsn } from '@shared/kernel/pii';
+import { MaskedValueComponent } from '@shared/ui/masked-value/masked-value.component';
 import { SNIPPETS } from './snippets.generated';
 import { highlightTs } from './highlight-ts';
 
@@ -39,6 +42,7 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
     RegistrationSummaryComponent,
     HerregistratieWizardComponent,
     IntakeWizardComponent,
+    MaskedValueComponent,
   ],
   styles: [
     `
@@ -371,6 +375,65 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
           </div>
         </div>
       </section>
+
+      <!-- 6. PII: mask + parse -->
+      <section class="section">
+        <app-heading [level]="2">6 · PII — maskeren & parsen</app-heading>
+        <p class="lead">
+          Een BSN is bijzondere persoonsgegevens (AVG art. 9). Dataminimalisatie: standaard
+          gemaskeerd tonen, alleen tonen na een vastgelegde handeling; en "parse, don't validate" op
+          het gevoeligste veld — een pure functie die de <em>elfproef</em> afdwingt.
+        </p>
+        <div class="cols">
+          <div class="card card--good">
+            <p class="tag good">Maskeren — atom</p>
+            <p>
+              BSN:
+              <app-masked-value
+                [value]="bsnShown()"
+                [canReveal]="true"
+                revealLabel="Toon BSN"
+                (reveal)="bsnRevealed.set(true)"
+              />
+            </p>
+            <figure class="linked">
+              <pre [innerHTML]="code['mask']"></pre>
+              <figcaption class="src">↳ {{ src['mask'] }}</figcaption>
+            </figure>
+            <p class="note">
+              Standaard gemaskeerd; het echte tonen is step-up-geverifieerd én vastgelegd (zie het
+              behandelscherm). De atom bevat de maskeer-detectie — geen los <code>*</code>-gesnuffel
+              bij elke gebruiker.
+            </p>
+          </div>
+          <div class="card">
+            <p class="tag good">Parse (elfproef) → Result</p>
+            <app-text-input
+              inputId="bsn"
+              [ngModel]="bsnRaw()"
+              (ngModelChange)="bsnRaw.set($event)"
+              name="bsn"
+              placeholder="Typ een BSN, bijv. 123456782"
+            />
+            @let b = bsnParsed();
+            @if (bsnRaw()) {
+              <div animate.enter="app-item-enter">
+                @if (b.ok) {
+                  <p class="tag good">ok</p>
+                  <pre>Bsn ="{{ b.value }}"</pre>
+                } @else {
+                  <p class="tag bad">err</p>
+                  <pre>{{ b.error }}</pre>
+                }
+              </div>
+            }
+            <figure class="linked">
+              <pre [innerHTML]="code['parseBsn']"></pre>
+              <figcaption class="src">↳ {{ src['parseBsn'] }}</figcaption>
+            </figure>
+          </div>
+        </div>
+      </section>
     </app-page-shell>
   `,
 })
@@ -394,6 +457,14 @@ export class ConceptsPage {
   raw = signal('');
   parsed = computed(() => parsePostcode(this.raw()));
 
+  // 6 · PII demo. Masked-by-default value that reveals locally (the real reveal is
+  // step-up-gated + audited elsewhere); plus a live elfproef parse mirroring the postcode demo.
+  demoBsn = '123456782';
+  bsnRevealed = signal(false);
+  bsnShown = computed(() => (this.bsnRevealed() ? this.demoBsn : maskBsn(this.demoBsn)));
+  bsnRaw = signal('');
+  bsnParsed = computed(() => parseBsn(this.bsnRaw()));
+
   // Deliberately-wrong illustrations (no real source to link — they show the anti-pattern).
   private readonly illustrations: Record<string, string> = {
     unionBad: `interface Registration {
@@ -419,5 +490,7 @@ errors     = signal<...>({});
     parse: 'registratie/domain/value-objects/postcode.ts',
     machine: 'registratie/domain/change-request.machine.ts',
     steps: 'herregistratie/domain/intake.machine.ts',
+    parseBsn: 'shared/kernel/bsn.ts',
+    mask: 'shared/kernel/pii.ts',
   };
 }

src/app/showcase/snippets.generated.ts

@@ -3,7 +3,9 @@
 export const SNIPPETS: Record<string, string> = {
   "fold": "/** Exhaustive fold: you must handle every case, checked at compile time. */\nexport function foldRemote<E, T, R>(\n  rd: RemoteData<E, T>,\n  h: { loading: () => R; empty: () => R; failure: (e: E) => R; success: (v: T) => R },\n): R {\n  switch (rd.tag) {\n    case 'Loading':\n      return h.loading();\n    case 'Empty':\n      return h.empty();\n    case 'Failure':\n      return h.failure(rd.error);\n    case 'Success':\n      return h.success(rd.value);\n    default:\n      return assertNever(rd); // add a variant → compile error until handled\n  }\n}",
   "machine": "export type ChangeRequestState =\n  | { tag: 'Editing'; draft: Draft; errors: Errors } // draft/errors exist ONLY while editing\n  | { tag: 'Submitting'; data: Valid } // carries the parsed value, no errors\n  | { tag: 'Submitted'; data: Valid; referentie: string }\n  | { tag: 'Failed'; data: Valid; error: string };",
+  "mask": "/** Keep the last `keep` characters, mask the rest with `*`. */\nexport function maskTail(value: string, keep: number): string {\n  if (value.length <= keep) return '*'.repeat(value.length);\n  return '*'.repeat(value.length - keep) + value.slice(-keep);\n}\n\n/** Mask a BSN / BIG-nummer for display: keep the last 3 digits, mask the rest. */\nexport function maskBsn(value: string): string {\n  return maskTail(value, 3);\n}",
   "parse": "export function parsePostcode(raw: string): Result<string, Postcode> {\n  const t = raw.trim().toUpperCase();\n  if (!/^[1-9]\\d{3}\\s?[A-Z]{2}$/.test(t)) {\n    return err($localize`:@@validation.postcode:Voer een geldige postcode in, bijv. 1234 AB.`);\n  }\n  // Normalise to \"1234 AB\" — the parser also cleans up.\n  return ok(t.replace(/^(\\d{4})\\s?([A-Z]{2})$/, '$1 $2') as Postcode);\n}",
+  "parseBsn": "export function parseBsn(raw: string): Result<string, Bsn> {\n  const t = raw.trim();\n  if (!/^\\d{9}$/.test(t)) {\n    return err($localize`:@@validation.bsn:Voer een geldig BSN van 9 cijfers in.`);\n  }\n  const sum = [...t].reduce((acc, ch, i) => acc + Number(ch) * WEIGHTS[i], 0);\n  if (t === '000000000' || sum % 11 !== 0) {\n    return err(\n      $localize`:@@validation.bsnElfproef:Dit is geen geldig BSN (klopt niet met de elfproef).`,\n    );\n  }\n  return ok(t as Bsn); // holding a Bsn is proof it passed the elfproef\n}",
   "steps": "/** The fixed step list. Number of steps never changes; questions reveal inline. */\nexport const STEPS: StepId[] = ['buitenland', 'werk', 'review'];",
   "union": "export type RegistrationStatus =\n  | { tag: 'Geregistreerd'; herregistratieDatum: string } // only this variant carries the date\n  | { tag: 'Geschorst'; geschorstTot: string; reden: string }\n  | { tag: 'Doorgehaald'; doorgehaaldOp: string; reden: string };",
 };