feat(fp): WP-14 — Storybook taxonomy reorg + Layers MDX

Retitle all 49 stories into a sidebar that makes the DDD seam visible:
Foundations (curriculum) -> Design System (Atoms/Molecules/Organisms/
Templates/Devtools, everything in shared/ui + shared/layout) -> Domein
(Registratie/Herregistratie/Auth/Brief, everything in a context's ui/).
Pin the order via storySort. Add layers.mdx explaining the split and
linking the enforcing eslint rules; document the story-title convention
in CLAUDE.md. Fix a stale "status banner" reference in atomic-design.mdx
left over from WP-13's upload-status-banner deletion.

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

src/app/auth/ui/login-form/login-form.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { LoginFormComponent } from './login-form.component';
 
 const meta: Meta<LoginFormComponent> = {
-  title: 'Organisms/Login Form',
+  title: 'Domein/Auth/Login Form',
   component: LoginFormComponent,
 };
 export default meta;

src/app/brief/ui/letter-composer/letter-composer.stories.ts

@@ -118,7 +118,7 @@ const render = (b: Brief, decisions: BriefDecisions) => ({
 });
 
 const meta: Meta<LetterComposerComponent> = {
-  title: 'Organisms/Letter Composer',
+  title: 'Domein/Brief/Letter Composer',
   component: LetterComposerComponent,
 };
 export default meta;

src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.stories.ts

@@ -10,7 +10,7 @@ import { Uren } from '@registratie/domain/value-objects/uren';
 const validData = { uren: 4160 as Uren, jaren: 5, punten: 200, documents: [] };
 
 const meta: Meta<HerregistratieWizardComponent> = {
-  title: 'Herregistratie/Wizard',
+  title: 'Domein/Herregistratie/Wizard',
   component: HerregistratieWizardComponent,
   // The wizard injects BigProfileStore (for the optimistic cross-page flag),
   // which creates httpResources — so the story needs an HttpClient.

src/app/herregistratie/ui/intake-wizard/intake-wizard.stories.ts

@@ -9,7 +9,7 @@ import { Uren } from '@registratie/domain/value-objects/uren';
 const validData = { werktBuitenland: false, uren: 4160 as Uren, punten: 200 as Uren };
 
 const meta: Meta<IntakeWizardComponent> = {
-  title: 'Herregistratie/IntakeWizard',
+  title: 'Domein/Herregistratie/IntakeWizard',
   component: IntakeWizardComponent,
   // Injects BigProfileStore (optimistic flag) which creates httpResources.
   decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],

src/app/registratie/ui/aanvraag-block/aanvraag-block.stories.ts

@@ -14,7 +14,7 @@ const base = {
 } satisfies Omit<Aanvraag, 'status'>;
 
 const meta: Meta<AanvraagBlockComponent> = {
-  title: 'Organisms/Aanvraag Block',
+  title: 'Domein/Registratie/Aanvraag Block',
   component: AanvraagBlockComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/registratie/ui/address-fields/address-fields.stories.ts

@@ -3,7 +3,7 @@ import { moduleMetadata } from '@storybook/angular';
 import { AddressFieldsComponent } from './address-fields.component';
 
 const meta: Meta<AddressFieldsComponent> = {
-  title: 'Organisms/Address Fields',
+  title: 'Domein/Registratie/Address Fields',
   component: AddressFieldsComponent,
   decorators: [moduleMetadata({ imports: [AddressFieldsComponent] })],
   render: (args) => ({

src/app/registratie/ui/change-request-form/change-request-form.stories.ts

@@ -12,7 +12,7 @@ const validData = {
 };
 
 const meta: Meta<ChangeRequestFormComponent> = {
-  title: 'Organisms/Change Request Form',
+  title: 'Domein/Registratie/Change Request Form',
   component: ChangeRequestFormComponent,
   // The form injects ApiClient (over HttpClient) for the submit command.
   decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],

src/app/registratie/ui/registratie-wizard/registratie-wizard.stories.ts

@@ -46,7 +46,7 @@ const validData: ValidRegistratie = {
 };
 
 const meta: Meta<RegistratieWizardComponent> = {
-  title: 'Registratie/RegistratieWizard',
+  title: 'Domein/Registratie/RegistratieWizard',
   component: RegistratieWizardComponent,
   decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],
 };

src/app/registratie/ui/registration-summary/registration-summary.stories.ts

@@ -11,7 +11,7 @@ const base = {
 } satisfies Omit<Registration, 'status'>;
 
 const meta: Meta<RegistrationSummaryComponent> = {
-  title: 'Organisms/Registration Summary',
+  title: 'Domein/Registratie/Registration Summary',
   component: RegistrationSummaryComponent,
 };
 export default meta;

src/app/registratie/ui/registration-table/registration-table.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { RegistrationTableComponent } from './registration-table.component';
 
 const meta: Meta<RegistrationTableComponent> = {
-  title: 'Organisms/Registration Table',
+  title: 'Domein/Registratie/Registration Table',
   component: RegistrationTableComponent,
 };
 export default meta;

src/app/shared/layout/breadcrumb/breadcrumb.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { BreadcrumbComponent } from './breadcrumb.component';
 
 const meta: Meta<BreadcrumbComponent> = {
-  title: 'Layout/Breadcrumb',
+  title: 'Design System/Molecules/Breadcrumb',
   component: BreadcrumbComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/layout/page-shell/page-shell.stories.ts

@@ -5,7 +5,7 @@ import { PageShellComponent } from './page-shell.component';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 
 const meta: Meta<PageShellComponent> = {
-  title: 'Templates/PageShell',
+  title: 'Design System/Templates/PageShell',
   component: PageShellComponent,
   decorators: [
     applicationConfig({ providers: [provideRouter([])] }),

src/app/shared/layout/site-footer/site-footer.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { SiteFooterComponent } from './site-footer.component';
 
 const meta: Meta<SiteFooterComponent> = {
-  title: 'Layout/Site Footer',
+  title: 'Design System/Organisms/Site Footer',
   component: SiteFooterComponent,
   render: () => ({ template: `<app-site-footer />` }),
 };

src/app/shared/layout/site-header/site-header.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { SiteHeaderComponent } from './site-header.component';
 
 const meta: Meta<SiteHeaderComponent> = {
-  title: 'Layout/Site Header',
+  title: 'Design System/Organisms/Site Header',
   component: SiteHeaderComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/layout/wizard-shell/wizard-shell.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { WizardShellComponent } from './wizard-shell.component';
 
 const meta: Meta<WizardShellComponent> = {
-  title: 'Templates/WizardShell',
+  title: 'Design System/Templates/WizardShell',
   component: WizardShellComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/alert/alert.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { AlertComponent } from './alert.component';
 
 const meta: Meta<AlertComponent> = {
-  title: 'Atoms/Alert',
+  title: 'Design System/Atoms/Alert',
   component: AlertComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/application-link/application-link.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { ApplicationLinkComponent } from './application-link.component';
 
 const meta: Meta<ApplicationLinkComponent> = {
-  title: 'Molecules/Application Link',
+  title: 'Design System/Molecules/Application Link',
   component: ApplicationLinkComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/ui/application-list/application-list.stories.ts

@@ -5,7 +5,7 @@ import { ApplicationListComponent } from './application-list.component';
 import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
 
 const meta: Meta<ApplicationListComponent> = {
-  title: 'Molecules/Application List',
+  title: 'Design System/Molecules/Application List',
   component: ApplicationListComponent,
   decorators: [
     applicationConfig({ providers: [provideRouter([])] }),

src/app/shared/ui/async/async.stories.ts

@@ -17,7 +17,7 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
 }
 
 const meta: Meta = {
-  title: 'Molecules/Async States',
+  title: 'Design System/Molecules/Async States',
   decorators: [moduleMetadata({ imports: [...ASYNC, SkeletonComponent] })],
   render: (args) => ({
     // isEmpty is a function — Storybook strips function args, so set it here.

src/app/shared/ui/button/button.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { ButtonComponent } from './button.component';
 
 const meta: Meta<ButtonComponent> = {
-  title: 'Atoms/Button',
+  title: 'Design System/Atoms/Button',
   component: ButtonComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/card/card.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { CardComponent } from './card.component';
 
 const meta: Meta<CardComponent> = {
-  title: 'Molecules/Card',
+  title: 'Design System/Molecules/Card',
   component: CardComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/checkbox/checkbox.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { CheckboxComponent } from './checkbox.component';
 
 const meta: Meta<CheckboxComponent> = {
-  title: 'Atoms/Checkbox',
+  title: 'Design System/Atoms/Checkbox',
   component: CheckboxComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/choice-link/choice-link.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { ChoiceLinkComponent } from './choice-link.component';
 
 const meta: Meta<ChoiceLinkComponent> = {
-  title: 'Molecules/Choice Link',
+  title: 'Design System/Molecules/Choice Link',
   component: ChoiceLinkComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/ui/choice-list/choice-list.stories.ts

@@ -5,7 +5,7 @@ import { ChoiceListComponent } from './choice-list.component';
 import { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';
 
 const meta: Meta<ChoiceListComponent> = {
-  title: 'Molecules/Choice List',
+  title: 'Design System/Molecules/Choice List',
   component: ChoiceListComponent,
   decorators: [
     applicationConfig({ providers: [provideRouter([])] }),

src/app/shared/ui/confirmation/confirmation.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { ConfirmationComponent } from './confirmation.component';
 
 const meta: Meta<ConfirmationComponent> = {
-  title: 'Molecules/Confirmation',
+  title: 'Design System/Molecules/Confirmation',
   component: ConfirmationComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/data-block/data-block.stories.ts

@@ -4,7 +4,7 @@ import { DataBlockComponent } from './data-block.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 
 const meta: Meta<DataBlockComponent> = {
-  title: 'Molecules/Data Block',
+  title: 'Design System/Molecules/Data Block',
   component: DataBlockComponent,
   decorators: [moduleMetadata({ imports: [DataRowComponent] })],
   render: (args) => ({

src/app/shared/ui/data-row/data-row.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { DataRowComponent } from './data-row.component';
 
 const meta: Meta<DataRowComponent> = {
-  title: 'Molecules/Data Row',
+  title: 'Design System/Molecules/Data Row',
   component: DataRowComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/debug-state/debug-state.stories.ts

@@ -3,7 +3,7 @@ import { DebugStateComponent } from './debug-state.component';
 
 // Devtools, not a design-system atom — titled accordingly.
 const meta: Meta<DebugStateComponent> = {
-  title: 'Devtools/State debug',
+  title: 'Design System/Devtools/State debug',
   component: DebugStateComponent,
   parameters: {
     cibgGap: true,

src/app/shared/ui/form-field/form-field.stories.ts

@@ -4,7 +4,7 @@ import { FormFieldComponent } from './form-field.component';
 import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
 
 const meta: Meta<FormFieldComponent> = {
-  title: 'Molecules/Form Field',
+  title: 'Design System/Molecules/Form Field',
   component: FormFieldComponent,
   decorators: [moduleMetadata({ imports: [TextInputComponent] })],
   render: (args) => ({

src/app/shared/ui/heading/heading.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { HeadingComponent } from './heading.component';
 
 const meta: Meta<HeadingComponent> = {
-  title: 'Atoms/Heading',
+  title: 'Design System/Atoms/Heading',
   component: HeadingComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/link/link.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { LinkComponent } from './link.component';
 
 const meta: Meta<LinkComponent> = {
-  title: 'Atoms/Link',
+  title: 'Design System/Atoms/Link',
   component: LinkComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/ui/placeholder-chip/placeholder-chip.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { PlaceholderChipComponent } from './placeholder-chip.component';
 
 const meta: Meta<PlaceholderChipComponent> = {
-  title: 'Atoms/Placeholder Chip',
+  title: 'Design System/Atoms/Placeholder Chip',
   component: PlaceholderChipComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/radio-group/radio-group.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { RadioGroupComponent } from './radio-group.component';
 
 const meta: Meta<RadioGroupComponent> = {
-  title: 'Atoms/RadioGroup',
+  title: 'Design System/Atoms/RadioGroup',
   component: RadioGroupComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/review-section/review-section.stories.ts

@@ -4,7 +4,7 @@ import { ReviewSectionComponent } from './review-section.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 
 const meta: Meta<ReviewSectionComponent> = {
-  title: 'Molecules/Review Section',
+  title: 'Design System/Molecules/Review Section',
   component: ReviewSectionComponent,
   decorators: [moduleMetadata({ imports: [DataRowComponent] })],
   render: (args) => ({

src/app/shared/ui/rich-text-editor/rich-text-editor.stories.ts

@@ -28,7 +28,7 @@ const placeholders = [
 ];
 
 const meta: Meta<RichTextEditorComponent> = {
-  title: 'Molecules/Rich Text Editor',
+  title: 'Design System/Molecules/Rich Text Editor',
   component: RichTextEditorComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/skeleton/skeleton.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { SkeletonComponent } from './skeleton.component';
 
 const meta: Meta<SkeletonComponent> = {
-  title: 'Atoms/Skeleton',
+  title: 'Design System/Atoms/Skeleton',
   component: SkeletonComponent,
   args: { delay: 0 },
   parameters: {

src/app/shared/ui/spinner/spinner.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { SpinnerComponent } from './spinner.component';
 
 const meta: Meta<SpinnerComponent> = {
-  title: 'Atoms/Spinner',
+  title: 'Design System/Atoms/Spinner',
   component: SpinnerComponent,
   parameters: {
     cibgGap: true,

src/app/shared/ui/status-badge/status-badge.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { StatusBadgeComponent } from './status-badge.component';
 
 const meta: Meta<StatusBadgeComponent> = {
-  title: 'Shared UI/Status Badge',
+  title: 'Design System/Atoms/Status Badge',
   component: StatusBadgeComponent,
   parameters: {
     cibgGap: true,

src/app/shared/ui/stepper/stepper.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { StepperComponent } from './stepper.component';
 
 const meta: Meta<StepperComponent> = {
-  title: 'Molecules/Stepper',
+  title: 'Design System/Molecules/Stepper',
   component: StepperComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/task-list/task-list.stories.ts

@@ -4,7 +4,7 @@ import { provideRouter } from '@angular/router';
 import { TaskListComponent } from './task-list.component';
 
 const meta: Meta<TaskListComponent> = {
-  title: 'Molecules/Task List',
+  title: 'Design System/Molecules/Task List',
   component: TaskListComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({

src/app/shared/ui/text-input/text-input.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { TextInputComponent } from './text-input.component';
 
 const meta: Meta<TextInputComponent> = {
-  title: 'Atoms/Text Input',
+  title: 'Design System/Atoms/Text Input',
   component: TextInputComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/delivery-channel-toggle/delivery-channel-toggle.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { DeliveryChannelToggleComponent } from './delivery-channel-toggle.component';
 
 const meta: Meta<DeliveryChannelToggleComponent> = {
-  title: 'Atoms/DeliveryChannelToggle',
+  title: 'Design System/Atoms/DeliveryChannelToggle',
   component: DeliveryChannelToggleComponent,
   render: (args) => ({
     props: args,

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

@@ -3,7 +3,7 @@ import type { DocumentCategory, Upload } from '@shared/upload/upload.machine';
 import { DocumentCategoryComponent } from './document-category.component';
 
 const meta: Meta<DocumentCategoryComponent> = {
-  title: 'Organisms/DocumentCategory',
+  title: 'Design System/Organisms/DocumentCategory',
   component: DocumentCategoryComponent,
   render: (args) => ({
     props: args,

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

@@ -3,7 +3,7 @@ import type { UploadStatus } from '@shared/upload/upload.machine';
 import { DocumentChipComponent } from './document-chip.component';
 
 const meta: Meta<DocumentChipComponent> = {
-  title: 'Atoms/DocumentChip',
+  title: 'Design System/Atoms/DocumentChip',
   component: DocumentChipComponent,
   render: (args) => ({
     props: args,

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

@@ -3,7 +3,7 @@ import type { UploadState } from '@shared/upload/upload.machine';
 import { DocumentUploadComponent } from './document-upload.component';
 
 const meta: Meta<DocumentUploadComponent> = {
-  title: 'Organisms/DocumentUpload',
+  title: 'Design System/Organisms/DocumentUpload',
   component: DocumentUploadComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/file-input/file-input.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { FileInputComponent } from './file-input.component';
 
 const meta: Meta<FileInputComponent> = {
-  title: 'Atoms/FileInput',
+  title: 'Design System/Atoms/FileInput',
   component: FileInputComponent,
   render: (args) => ({
     props: args,

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

@@ -3,7 +3,7 @@ import type { Upload } from '@shared/upload/upload.machine';
 import { SingleUploadComponent } from './single-upload.component';
 
 const meta: Meta<SingleUploadComponent> = {
-  title: 'Molecules/SingleUpload',
+  title: 'Design System/Molecules/SingleUpload',
   component: SingleUploadComponent,
   render: (args) => ({
     props: args,

src/app/shared/ui/upload/upload-progress-bar/upload-progress-bar.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { UploadProgressBarComponent } from './upload-progress-bar.component';
 
 const meta: Meta<UploadProgressBarComponent> = {
-  title: 'Atoms/UploadProgressBar',
+  title: 'Design System/Atoms/UploadProgressBar',
   component: UploadProgressBarComponent,
   render: (args) => ({
     props: args,

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { UploadStatusIconComponent } from './upload-status-icon.component';
 
 const meta: Meta<UploadStatusIconComponent> = {
-  title: 'Atoms/UploadStatusIcon',
+  title: 'Design System/Atoms/UploadStatusIcon',
   component: UploadStatusIconComponent,
   render: (args) => ({
     props: args,