refactor: move libs/shared/src/ui/ into atoms/molecules/organisms (RD-27)

The folder now equals the layer, as CLAUDE.md decision 2 requires. 33
directories move by git mv (25 flat, plus upload/'s 8 subfolders split
across all three layers). 28 distinct @shared/ui/* specifiers rewrite
across 73 files, longest-first. Five relative imports inside upload/
become @shared/ui aliases because their sibling now lives in a
different layer; two stay relative because both ends stay in the same
layer. Four .mdx docs get their seven broken story imports fixed;
atomic-design.mdx's page-shell import is untouched, because layout/
does not move.

No component, template, story title, or layer-tag comment changes.
That is RD-28's job.

Verified against the ticket's acceptance commands: the 26 flat
directories become exactly 3 layer folders with the counts the ticket
names, only three @shared/ui/* prefixes remain (atoms, molecules,
organisms), the .mdx import count holds at 7, and the relative-import
count inside ui/ drops from 7 to 2 as decision 4 requires. The
@shared/ui/ occurrence count moves from 200 to 205: decision 4
mandates turning 5 of those 7 relative imports into @shared/ui/*
aliases, which decision 3's "200 before, 200 after" check does not
account for. The 5-occurrence gap is exactly the 5 conversions decision
4 names, not a lost or duplicated specifier.

npm run ci --full passes: lint, typecheck, dep:check, format, tokens,
seam, both apps' + both libraries' tests, both apps' localized build,
audit, backend tests, all three generated-artifact drift checks, and
both Storybook instances' build + axe-core a11y suite (67+45 suites,
198+112 tests, all green).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

libs/shared/src/ui/atoms/alert/alert.component.ts

@@ -0,0 +1,50 @@
+import { Component, input } from '@angular/core';
+
+type AlertType = 'info' | 'ok' | 'warning' | 'error';
+
+// visually-hidden alternative for the status icon (CIBG a11y requirement).
+const ICON_LABELS: Record<AlertType, string> = {
+  info: $localize`:@@alert.icon.info:Informatie`,
+  ok: $localize`:@@alert.icon.ok:Gelukt`,
+  warning: $localize`:@@alert.icon.warning:Waarschuwing`,
+  error: $localize`:@@alert.icon.error:Foutmelding`,
+};
+
+/** Atom: alert/message banner — the CIBG Huisstijl "melding"
+    (designsystem.cibg.nl/componenten/meldingen). Thin wrapper over the vendored
+    `.feedback feedback-*` classes: the design system owns surface + icon; we add
+    only the icon's a11y label and a content wrapper (`.feedback` is a flex row).
+    Errors are `role="alert"` (assertive — interrupts) since they need immediate
+    attention; other variants stay `role="status"` (polite) so success/info banners
+    don't interrupt what the user is doing. */
+@Component({
+  selector: 'app-alert',
+  styles: [
+    `
+      .feedback > div {
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+    `,
+  ],
+  template: `
+    <div
+      class="feedback"
+      [class.feedback-info]="type() === 'info'"
+      [class.feedback-success]="type() === 'ok'"
+      [class.feedback-warning]="type() === 'warning'"
+      [class.feedback-error]="type() === 'error'"
+      [attr.role]="type() === 'error' ? 'alert' : 'status'"
+      aria-atomic="true"
+    >
+      <span class="icon"
+        ><span class="visually-hidden">{{ iconLabels[type()] }}</span></span
+      >
+      <div><ng-content /></div>
+    </div>
+  `,
+})
+export class AlertComponent {
+  type = input<AlertType>('info');
+  protected readonly iconLabels = ICON_LABELS;
+}