refactor: split concepts.page into 6 sections, fix dead highlighting (RD-24)

The page held six teaching sections and a 142-line `styles:` block, at 471 effective lines against a limit of 250. It is now 36 lines of composition. Angular scopes a component's CSS to markup that component rendered, so the split had to move each rule to its owner. `concept-card` owns the card vocabulary and renders it. `.app-code`, `.app-lead`, `.app-cols` and `.app-note` become globals, because their targets are projected or arrive through `[innerHTML]`. That constraint exposed a live bug. The syntax-highlighting rules compiled to `pre[_ngcontent-%COMP%] .k[_ngcontent-%COMP%]`, but `highlight-ts` injects the `.k`/`.s`/`.c` spans through `[innerHTML]`, so they carry no scope attribute and the rule never matched. Keywords, strings and comments have always rendered in the plain foreground colour. The rules are global now, on five new `--app-code-*` tokens. Widen the colour guard while here: it scanned only `*.component.ts`, so every `*.page.ts`, `*.section.ts` and `*.step.ts` was invisible to it. That is how this page collected 21 hardcoded colours. One other file needed a fix. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-04 23:44:01 +02:00
parent d5a7a25a78
commit 630d68045f
13 changed files with 908 additions and 488 deletions
@@ -0,0 +1,102 @@
+import { Component, computed, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HeadingComponent } from '@shared/ui/heading/heading.component';
+import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
+import { MaskedValueComponent } from '@shared/ui/masked-value/masked-value.component';
+import { parseBsn } from '@shared/kernel/bsn';
+import { maskBsn } from '@shared/kernel/pii';
+import { ConceptCardComponent } from './concept-card.component';
+import { SNIPPETS } from './snippets.generated';
+import { highlightTs } from './highlight-ts';
+
+/** Section 6: PII — masking and parsing. A BSN (Dutch citizen service number) is
+    special-category personal data (GDPR art. 9): masked by default, revealed only after
+    a logged action; "parse, don't validate" on the most sensitive field — a pure function
+    enforces the checksum. Composition-only. The ok/err result nests its own
+    `<app-concept-card>` for its label, for the same reason section 2 does. */
+@Component({
+  selector: 'app-concepts-pii-section',
+  imports: [
+    FormsModule,
+    HeadingComponent,
+    TextInputComponent,
+    MaskedValueComponent,
+    ConceptCardComponent,
+  ],
+  template: `
+    <section class="app-section">
+      <app-heading [level]="2">6 · PII — maskeren & parsen</app-heading>
+      <p class="app-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="app-cols">
+        <app-concept-card
+          variant="good"
+          tag="Maskeren — atom"
+          [code]="code['mask']"
+          [src]="src['mask']"
+        >
+          <p>
+            BSN:
+            <app-masked-value
+              [value]="bsnShown()"
+              [canReveal]="true"
+              revealLabel="Toon BSN"
+              (reveal)="bsnRevealed.set(true)"
+            />
+          </p>
+          <p class="app-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>
+        </app-concept-card>
+        <app-concept-card
+          tag="Parse (elfproef) → Result"
+          [code]="code['parseBsn']"
+          [src]="src['parseBsn']"
+        >
+          <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">
+              <app-concept-card [variant]="b.ok ? 'good' : 'bad'" [tag]="b.ok ? 'ok' : 'err'">
+                @if (b.ok) {
+                  <pre class="app-code">Bsn ="{{ b.value }}"</pre>
+                } @else {
+                  <pre class="app-code">{{ b.error }}</pre>
+                }
+              </app-concept-card>
+            </div>
+          }
+        </app-concept-card>
+      </div>
+    </section>
+  `,
+})
+export class PiiSection {
+  // 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()));
+
+  protected readonly code: Record<string, string> = {
+    mask: highlightTs(SNIPPETS['mask']),
+    parseBsn: highlightTs(SNIPPETS['parseBsn']),
+  };
+  protected readonly src: Record<string, string> = {
+    mask: 'shared/kernel/pii.ts',
+    parseBsn: 'shared/kernel/bsn.ts',
+  };
+}