feat(fp): WP-13 — CIBG-gap register + hygiene + MDX

Mark every hand-rolled shared/ui surface with a `// CIBG-GAP EXTENSION:`
comment + `cibgGap` story parameter (skeleton, spinner, rich-text-editor,
wizard-shell's error summary, application-link's non-navigating row,
debug-state, status-badge, card, placeholder-chip) so deviations from the
CIBG design system are auditable. Add the register MDX
(Foundations/CIBG Gap Register), cross-linked from ADR-0003. Delete the
near-identity upload-status-banner wrapper; its one consumer now uses
<app-alert> directly (a story added to keep the info-banner state covered).

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

src/app/shared/ui/upload/document-upload/document-upload.component.ts

@@ -1,14 +1,14 @@
 import { Component, input, output } from '@angular/core';
 import type { DeliveryChannel, UploadState } from '@shared/upload/upload.machine';
+import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { DocumentCategoryComponent } from '../document-category/document-category.component';
-import { UploadStatusBannerComponent } from '../upload-status-banner/upload-status-banner.component';
 
 /** Organism: the full document-upload step — the category list, or a load-error
     banner. Pure UI: re-exposes the category events, tagging each with its category
     where the parent needs it. The container wires these to the upload reducer. */
 @Component({
   selector: 'app-document-upload',
-  imports: [DocumentCategoryComponent, UploadStatusBannerComponent],
+  imports: [DocumentCategoryComponent, AlertComponent],
   styles: [
     `
       :host {
@@ -20,10 +20,10 @@ import { UploadStatusBannerComponent } from '../upload-status-banner/upload-stat
   ],
   template: `
     @if (state().categoriesError) {
-      <app-upload-status-banner type="error" [message]="state().categoriesError!" />
+      <app-alert type="error">{{ state().categoriesError }}</app-alert>
     } @else {
       @if (state().backgroundSyncAvailable === false && state().categories.length > 0) {
-        <app-upload-status-banner type="info" [message]="foregroundOnlyMessage" />
+        <app-alert type="info">{{ foregroundOnlyMessage }}</app-alert>
       }
       @for (c of state().categories; track c.categoryId) {
         <app-document-category

src/app/shared/ui/upload/document-upload/document-upload.stories.ts

@@ -56,3 +56,7 @@ export const Default: Story = { args: { state } };
 export const LoadError: Story = {
   args: { state: { ...state, categoriesError: 'De categorieën konden niet worden geladen.' } },
 };
+
+export const ForegroundOnly: Story = {
+  args: { state: { ...state, backgroundSyncAvailable: false } },
+};

src/app/shared/ui/upload/upload-status-banner/upload-status-banner.component.ts

@@ -1,25 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
-
-type BannerType = 'info' | 'warning' | 'error';
-type AlertType = 'info' | 'ok' | 'warning' | 'error';
-
-/** Molecule: a polite, announced status banner. Wraps the alert atom and maps the
-    banner type to an alert type. Pure UI: the container computes the message. */
-@Component({
-  selector: 'app-upload-status-banner',
-  imports: [AlertComponent],
-  template: `
-    <div aria-live="polite">
-      <app-alert [type]="alertType()">{{ message() }}</app-alert>
-    </div>
-  `,
-})
-export class UploadStatusBannerComponent {
-  message = input.required<string>();
-  type = input<BannerType>('info');
-
-  protected readonly alertType = computed<AlertType>(() =>
-    this.type() === 'info' ? 'info' : this.type(),
-  );
-}

src/app/shared/ui/upload/upload-status-banner/upload-status-banner.stories.ts

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { UploadStatusBannerComponent } from './upload-status-banner.component';
-
-const meta: Meta<UploadStatusBannerComponent> = {
-  title: 'Molecules/UploadStatusBanner',
-  component: UploadStatusBannerComponent,
-  render: (args) => ({
-    props: args,
-    template: `<app-upload-status-banner [message]="message" [type]="type" />`,
-  }),
-};
-export default meta;
-type Story = StoryObj<UploadStatusBannerComponent>;
-
-export const Info: Story = {
-  args: { type: 'info', message: 'Uw documenten worden geüpload.' },
-};
-
-export const Error: Story = {
-  args: { type: 'error', message: 'De categorieën konden niet worden geladen.' },
-};