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>
2026-07-03 23:32:19 +02:00
parent cbf697b8fa
commit 8b19fad558
56 changed files with 1578 additions and 1470 deletions
--- a/src/app/auth/ui/login-form/login-form.stories.ts
+++ b/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;
--- a/src/app/brief/ui/letter-composer/letter-composer.stories.ts
+++ b/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;
--- a/src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.stories.ts
+++ b/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.
--- a/src/app/herregistratie/ui/intake-wizard/intake-wizard.stories.ts
+++ b/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()] })],
--- a/src/app/registratie/ui/aanvraag-block/aanvraag-block.stories.ts
+++ b/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) => ({
--- a/src/app/registratie/ui/address-fields/address-fields.stories.ts
+++ b/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) => ({
--- a/src/app/registratie/ui/change-request-form/change-request-form.stories.ts
+++ b/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()] })],
--- a/src/app/registratie/ui/registratie-wizard/registratie-wizard.stories.ts
+++ b/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()] })],
 };
--- a/src/app/registratie/ui/registration-summary/registration-summary.stories.ts
+++ b/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;
--- a/src/app/registratie/ui/registration-table/registration-table.stories.ts
+++ b/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;
--- a/src/app/shared/layout/breadcrumb/breadcrumb.stories.ts
+++ b/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) => ({
--- a/src/app/shared/layout/page-shell/page-shell.stories.ts
+++ b/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([])] }),
--- a/src/app/shared/layout/site-footer/site-footer.stories.ts
+++ b/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 />` }),
 };
--- a/src/app/shared/layout/site-header/site-header.stories.ts
+++ b/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) => ({
--- a/src/app/shared/layout/wizard-shell/wizard-shell.stories.ts
+++ b/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,
--- a/src/app/shared/ui/alert/alert.stories.ts
+++ b/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,
--- a/src/app/shared/ui/application-link/application-link.stories.ts
+++ b/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) => ({
--- a/src/app/shared/ui/application-list/application-list.stories.ts
+++ b/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([])] }),
--- a/src/app/shared/ui/async/async.stories.ts
+++ b/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.
--- a/src/app/shared/ui/button/button.stories.ts
+++ b/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,
--- a/src/app/shared/ui/card/card.stories.ts
+++ b/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,
--- a/src/app/shared/ui/checkbox/checkbox.stories.ts
+++ b/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,
--- a/src/app/shared/ui/choice-link/choice-link.stories.ts
+++ b/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) => ({
--- a/src/app/shared/ui/choice-list/choice-list.stories.ts
+++ b/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([])] }),
--- a/src/app/shared/ui/confirmation/confirmation.stories.ts
+++ b/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,
--- a/src/app/shared/ui/data-block/data-block.stories.ts
+++ b/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) => ({
--- a/src/app/shared/ui/data-row/data-row.stories.ts
+++ b/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,
--- a/src/app/shared/ui/debug-state/debug-state.stories.ts
+++ b/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,
--- a/src/app/shared/ui/form-field/form-field.stories.ts
+++ b/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) => ({
--- a/src/app/shared/ui/heading/heading.stories.ts
+++ b/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,
--- a/src/app/shared/ui/link/link.stories.ts
+++ b/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) => ({
--- a/src/app/shared/ui/placeholder-chip/placeholder-chip.stories.ts
+++ b/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,
--- a/src/app/shared/ui/radio-group/radio-group.stories.ts
+++ b/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,
--- a/src/app/shared/ui/review-section/review-section.stories.ts
+++ b/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) => ({
--- a/src/app/shared/ui/rich-text-editor/rich-text-editor.stories.ts
+++ b/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,
--- a/src/app/shared/ui/skeleton/skeleton.stories.ts
+++ b/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: {
--- a/src/app/shared/ui/spinner/spinner.stories.ts
+++ b/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,
--- a/src/app/shared/ui/status-badge/status-badge.stories.ts
+++ b/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,
--- a/src/app/shared/ui/stepper/stepper.stories.ts
+++ b/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,
--- a/src/app/shared/ui/task-list/task-list.stories.ts
+++ b/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) => ({
--- a/src/app/shared/ui/text-input/text-input.stories.ts
+++ b/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,
--- a/src/app/shared/ui/upload/delivery-channel-toggle/delivery-channel-toggle.stories.ts
+++ b/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,
--- a/src/app/shared/ui/upload/document-category/document-category.stories.ts
+++ b/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,
--- a/src/app/shared/ui/upload/document-chip/document-chip.stories.ts
+++ b/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,
--- a/src/app/shared/ui/upload/document-upload/document-upload.stories.ts
+++ b/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,
--- a/src/app/shared/ui/upload/file-input/file-input.stories.ts
+++ b/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,
--- a/src/app/shared/ui/upload/single-upload/single-upload.stories.ts
+++ b/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,
--- a/src/app/shared/ui/upload/upload-progress-bar/upload-progress-bar.stories.ts
+++ b/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,
--- a/src/app/shared/ui/upload/upload-status-icon/upload-status-icon.stories.ts
+++ b/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,
--- a/src/docs/atomic-design.mdx
+++ b/src/docs/atomic-design.mdx
@@ -81,8 +81,8 @@ composes atoms; it adds no new visual primitives of its own.

 ### Organism — `document-upload`

-`shared/ui/upload/document-upload` composes molecules (a file input, status banner,
-progress bar, chips) into a section that owns real upload behaviour.
+`shared/ui/upload/document-upload` composes molecules (a file input, alert, progress bar,
+chips) into a section that owns real upload behaviour.

 <Canvas of={DocumentUploadStories.Default} />

--- a/src/docs/layers.mdx
+++ b/src/docs/layers.mdx
@@ -0,0 +1,83 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Foundations/Layers & Contexts" />
+
+# Layers & contexts
+
+This sidebar is laid out to **be** the architecture, not just document it: **Foundations**
+(this curriculum) → **Design System** (reusable, domain-free) → **Domein** (the six DDD
+contexts). If a component lives under a context's `ui/`, it's in Domein; everything else
+in `shared/ui`/`shared/layout` is Design System. See [Atomic design](?path=/docs/foundations-atomic-design--docs)
+for the Atoms → Molecules → Organisms → Templates ladder inside Design System.
+
+## Six contexts, one direction
+
+```
+src/app/<context>/<layer>/
+```
+
+Contexts: `shared` (the base layer — depends on nothing), `auth`, `registratie`,
+`herregistratie`, `brief` (letter-composition teaching slice), `showcase` (teaching page,
+sanctioned to read every context — nothing imports it).
+
+**Dependencies only point inward and in one declared direction between contexts:**
+
+```
+herregistratie → registratie → shared
+auth           → shared
+brief          → shared
+```
+
+Never the other way — `registratie` may not import `herregistratie`, and no context but
+`shared` is imported by everyone.
+
+## Five layers, one direction
+
+| Layer | Job | Angular allowed? |
+| --- | --- | --- |
+| `domain/` | business rules + data types | **No — pure TS.** |
+| `application/` | coordinate state/tasks (stores, commands) | yes (signals) |
+| `infrastructure/` | where data comes from (HTTP adapters) | yes (HTTP) |
+| `contracts/` | wire DTOs (the FE⇄BE seam) | no |
+| `ui/` | how it looks (components, pages) | yes |
+
+`ui → application → domain`; `ui`/`layout` never import `infrastructure/` directly — they
+reach data through an application store or command.
+
+## This is enforced, not just written down
+
+`eslint.config.mjs` fails the build on every rule above:
+
+- `domain/` importing `@angular/*` at all (any context).
+- `shared/` importing a feature context (`@auth/*`, `@registratie/*`, `@herregistratie/*`,
+  `@brief/*`) — the base layer depends on nothing.
+- `registratie/` importing `@herregistratie/*`/`@brief/*`, `auth/`/`brief/` importing a
+  sibling context — the cross-context direction above.
+- `contracts/**` importing **anything** — not Angular, not an alias, not even a relative
+  path (ADR-0001's wire seam has to stay a pure DTO shape).
+- `ui/**`/`layout/**` importing `*/infrastructure/*` — the anti-corruption boundary
+  (ADR-0001) stays behind a store/command, so a page can never bypass it and hand-recompute
+  a business rule the backend already decided.
+- The generated `ApiClient` imported as a value outside an `infrastructure/` adapter
+  (type-only DTO imports are exempt — they grant no network access).
+
+Two components get a documented exemption from the "nothing reaches across" rule:
+`shared/ui/debug-state` (reads every root store, for the dev-only state panel) and
+`showcase/` (reads every context, for side-by-side teaching pages). Both exemptions live
+next to the rule they break, in `eslint.config.mjs`, so they can't rot silently.
+
+## The English/Dutch seam
+
+Shared/reusable UI is named in **English** (language-agnostic: `button`, `wizard-shell`);
+domain contexts are named in **Dutch** (`registratie`, `herregistratie`, `*.machine.ts`).
+Pick the language by which side of the seam the code is on — it's the same seam this
+sidebar's Design System/Domein split makes visible.
+
+## See it in the sidebar
+
+Compare a Design System primitive with the same shape reused across contexts:
+
+- [Design System → Molecules → Application Link](?path=/story/design-system-molecules-application-link--navigatie) —
+  domain-free, the caller supplies heading/subtitle/cta.
+- [Domein → Registratie → Aanvraag Block](?path=/story/domein-registratie-aanvraag-block--concept) —
+  a context-specific organism composed from Design System atoms/molecules.