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/beheer/src/ui/audit.page.ts

@@ -1,9 +1,9 @@
 import { Component, computed, effect, inject } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { ButtonComponent } from '@shared/ui/button/button.component';
-import { ASYNC } from '@shared/ui/async/async.component';
+import { AlertComponent } from '@shared/ui/atoms/alert/alert.component';
+import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
+import { ASYNC } from '@shared/ui/molecules/async/async.component';
 import { AccessStore } from '@shared/application/access.store';
 import { successOr } from '@shared/application/remote-data';
 import { AuditStore } from '@beheer/application/audit.store';

libs/beheer/src/ui/feature-flags.page.ts

@@ -1,8 +1,8 @@
 import { Component, computed, inject, signal } from '@angular/core';
 import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { ButtonComponent } from '@shared/ui/button/button.component';
-import { ASYNC } from '@shared/ui/async/async.component';
+import { AlertComponent } from '@shared/ui/atoms/alert/alert.component';
+import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
+import { ASYNC } from '@shared/ui/molecules/async/async.component';
 import { AccessStore } from '@shared/application/access.store';
 import { FeatureFlagStore } from '@shared/application/feature-flags.store';
 

libs/beheer/src/ui/stamdata-table-editor/stamdata-table-editor.component.ts

@@ -1,5 +1,5 @@
 import { Component, computed, input, output } from '@angular/core';
-import { ButtonComponent } from '@shared/ui/button/button.component';
+import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
 import { ChangeCounts, StamColumn, StamRow, StamTable, activeOn } from '@beheer/domain/stamdata';
 
 interface DisplayRow {

libs/beheer/src/ui/stamdata.page.ts

@@ -1,8 +1,8 @@
 import { Component, computed, effect, inject } from '@angular/core';
 import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { ButtonComponent } from '@shared/ui/button/button.component';
-import { ASYNC } from '@shared/ui/async/async.component';
+import { AlertComponent } from '@shared/ui/atoms/alert/alert.component';
+import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
+import { ASYNC } from '@shared/ui/molecules/async/async.component';
 import { AccessStore } from '@shared/application/access.store';
 import { StamdataStore } from '@beheer/application/stamdata.store';
 import { StamdataTableEditorComponent } from '@beheer/ui/stamdata-table-editor/stamdata-table-editor.component';

libs/shared/docs/a11y.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas } from '@storybook/addon-docs/blocks';
-import * as AlertStories from '../src/ui/alert/alert.stories';
-import * as FormFieldStories from '../src/ui/form-field/form-field.stories';
+import * as AlertStories from '../src/ui/atoms/alert/alert.stories';
+import * as FormFieldStories from '../src/ui/molecules/form-field/form-field.stories';
 
 <Meta title="Foundations/Accessibility" />
 

libs/shared/docs/atomic-design.mdx

@@ -1,8 +1,8 @@
 import { Meta, Canvas } from '@storybook/addon-docs/blocks';
-import * as ButtonStories from '../src/ui/button/button.stories';
-import * as FormFieldStories from '../src/ui/form-field/form-field.stories';
+import * as ButtonStories from '../src/ui/atoms/button/button.stories';
+import * as FormFieldStories from '../src/ui/molecules/form-field/form-field.stories';
 import * as PageShellStories from '../src/layout/page-shell/page-shell.stories';
-import * as DocumentUploadStories from '../src/ui/upload/document-upload/document-upload.stories';
+import * as DocumentUploadStories from '../src/ui/organisms/upload/document-upload/document-upload.stories';
 
 <Meta title="Foundations/Atomic Design" />
 

libs/shared/docs/fp-in-ui.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas } from '@storybook/addon-docs/blocks';
-import * as AsyncStories from '../src/ui/async/async.stories';
+import * as AsyncStories from '../src/ui/molecules/async/async.stories';
 
 <Meta title="Foundations/FP in the UI" />
 

libs/shared/docs/remote-data.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas } from '@storybook/addon-docs/blocks';
-import * as AsyncStories from '../src/ui/async/async.stories';
+import * as AsyncStories from '../src/ui/molecules/async/async.stories';
 
 <Meta title="Foundations/RemoteData & Async" />
 

libs/shared/src/layout/page-shell/page-shell.component.ts

@@ -1,6 +1,6 @@
 import { Component, input } from '@angular/core';
-import { HeadingComponent } from '@shared/ui/heading/heading.component';
-import { LinkComponent } from '@shared/ui/link/link.component';
+import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
+import { LinkComponent } from '@shared/ui/atoms/link/link.component';
 
 /** Template: standard page body — optional back-link, a heading, optional intro,
     and projected content. The breadcrumb lives in the site header (blue bar), so

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { applicationConfig, moduleMetadata } from '@storybook/angular';
 import { provideRouter } from '@angular/router';
 import { PageShellComponent } from './page-shell.component';
-import { ButtonComponent } from '@shared/ui/button/button.component';
+import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
 
 const meta: Meta<PageShellComponent> = {
   title: 'Design System/Templates/PageShell',

libs/shared/src/layout/wizard-shell/wizard-shell.component.ts

@@ -9,10 +9,10 @@ import {
   viewChild,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ButtonComponent } from '@shared/ui/button/button.component';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
-import { StepperComponent } from '@shared/ui/stepper/stepper.component';
+import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
+import { AlertComponent } from '@shared/ui/atoms/alert/alert.component';
+import { SpinnerComponent } from '@shared/ui/atoms/spinner/spinner.component';
+import { StepperComponent } from '@shared/ui/molecules/stepper/stepper.component';
 import { whenTag } from '@shared/kernel/fp';
 
 /** CIBG procesnavigatie primary-button copy for a non-final step: "Naar stap 2 - Werk".

libs/shared/src/ui/atoms/masked-value/masked-value.component.ts

@@ -1,5 +1,5 @@
 import { Component, computed, input, output } from '@angular/core';
-import { ButtonComponent } from '@shared/ui/button/button.component';
+import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
 
 /**
  * Atom: a possibly-masked sensitive value (BSN, BIG-nummer, …) with an optional, audited

libs/shared/src/ui/molecules/application-list/application-list.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { applicationConfig, moduleMetadata } from '@storybook/angular';
 import { provideRouter } from '@angular/router';
 import { ApplicationListComponent } from './application-list.component';
-import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
+import { ApplicationLinkComponent } from '@shared/ui/molecules/application-link/application-link.component';
 
 const meta: Meta<ApplicationListComponent> = {
   title: 'Design System/Molecules/Application List',

libs/shared/src/ui/molecules/async/async.component.ts

@@ -9,9 +9,9 @@ import {
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import type { Resource } from '@angular/core';
-import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { ButtonComponent } from '@shared/ui/button/button.component';
+import { SpinnerComponent } from '@shared/ui/atoms/spinner/spinner.component';
+import { AlertComponent } from '@shared/ui/atoms/alert/alert.component';
+import { ButtonComponent } from '@shared/ui/atoms/button/button.component';
 import { RemoteData, fromResource, foldRemote } from '@shared/application/remote-data';
 
 /* Slot markers. Put on <ng-template> children of <app-async>. Generic so the

libs/shared/src/ui/molecules/async/async.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import type { Resource } from '@angular/core';
 import { ASYNC } from './async.component';
-import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
+import { SkeletonComponent } from '@shared/ui/atoms/skeleton/skeleton.component';
 
 /** Minimal fake of a signal Resource so the wrapper can be driven through every
     state in isolation (no HTTP). */

libs/shared/src/ui/molecules/choice-list/choice-list.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { applicationConfig, moduleMetadata } from '@storybook/angular';
 import { provideRouter } from '@angular/router';
 import { ChoiceListComponent } from './choice-list.component';
-import { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';
+import { ChoiceLinkComponent } from '@shared/ui/molecules/choice-link/choice-link.component';
 
 const meta: Meta<ChoiceListComponent> = {
   title: 'Design System/Molecules/Choice List',

libs/shared/src/ui/molecules/data-block/data-block.component.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { HeadingComponent } from '@shared/ui/heading/heading.component';
+import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
 
 /** Molecule: CIBG Huisstijl **Datablock** (designsystem.cibg.nl/componenten/datablock)
     — THE way to show user/application data. A grey `.data-block` surface holds a white

libs/shared/src/ui/molecules/data-block/data-block.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { DataBlockComponent } from './data-block.component';
-import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
+import { DataRowComponent } from '@shared/ui/molecules/data-row/data-row.component';
 
 const meta: Meta<DataBlockComponent> = {
   title: 'Design System/Molecules/Data Block',

libs/shared/src/ui/molecules/form-field/form-field.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { expect, within } from 'storybook/test';
 import { FormFieldComponent } from './form-field.component';
-import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
+import { TextInputComponent } from '@shared/ui/atoms/text-input/text-input.component';
 
 const meta: Meta<FormFieldComponent> = {
   title: 'Design System/Molecules/Form Field',

libs/shared/src/ui/molecules/review-section/review-section.component.ts

@@ -1,6 +1,6 @@
 import { Component, input, output } from '@angular/core';
-import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
-import { HeadingComponent } from '@shared/ui/heading/heading.component';
+import { DataBlockComponent } from '@shared/ui/molecules/data-block/data-block.component';
+import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
 
 /** Molecule: one section of a CIBG Huisstijl "controlestap" (wizard review step) —
     a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a CIBG

libs/shared/src/ui/molecules/review-section/review-section.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { ReviewSectionComponent } from './review-section.component';
-import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
+import { DataRowComponent } from '@shared/ui/molecules/data-row/data-row.component';
 
 const meta: Meta<ReviewSectionComponent> = {
   title: 'Design System/Molecules/Review Section',

libs/shared/src/ui/molecules/task-list/task-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, input } from '@angular/core';
-import { ChoiceListComponent } from '@shared/ui/choice-list/choice-list.component';
-import { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';
+import { ChoiceListComponent } from '@shared/ui/molecules/choice-list/choice-list.component';
+import { ChoiceLinkComponent } from '@shared/ui/molecules/choice-link/choice-link.component';
 
 /** Presentational task shape — what "Wat moet ik regelen" renders. Domain-free so
     shared/ stays independent of any context (a context's task type that has these

libs/shared/src/ui/molecules/upload/single-upload/single-upload.component.ts

@@ -1,7 +1,7 @@
 import { Component, computed, input, output } from '@angular/core';
 import type { Upload } from '@shared/domain/upload.machine';
-import { DocumentChipComponent } from '../document-chip/document-chip.component';
-import { UploadProgressBarComponent } from '../upload-progress-bar/upload-progress-bar.component';
+import { DocumentChipComponent } from '@shared/ui/atoms/upload/document-chip/document-chip.component';
+import { UploadProgressBarComponent } from '@shared/ui/atoms/upload/upload-progress-bar/upload-progress-bar.component';
 
 /** Molecule: one row in a CIBG Bestand-upload file list — a `.file-container` `<li>`
     with the `.file` block (via document-chip), the `.actions` (retry/remove), and a

libs/shared/src/ui/organisms/upload/document-category/document-category.component.ts

@@ -1,8 +1,8 @@
 import { Component, computed, input, output } from '@angular/core';
 import type { DeliveryChannel, DocumentCategory, Upload } from '@shared/domain/upload.machine';
-import { DeliveryChannelToggleComponent } from '../delivery-channel-toggle/delivery-channel-toggle.component';
-import { FileInputComponent } from '../file-input/file-input.component';
-import { SingleUploadComponent } from '../single-upload/single-upload.component';
+import { DeliveryChannelToggleComponent } from '@shared/ui/atoms/upload/delivery-channel-toggle/delivery-channel-toggle.component';
+import { FileInputComponent } from '@shared/ui/atoms/upload/file-input/file-input.component';
+import { SingleUploadComponent } from '@shared/ui/molecules/upload/single-upload/single-upload.component';
 
 /** Organism: one document category (CIBG Bestand-upload) — its label/description, an
     optional delivery channel toggle, and (when digital) a validation message, the

libs/shared/src/ui/organisms/upload/document-upload/document-upload.component.ts

@@ -1,6 +1,6 @@
 import { Component, input, output } from '@angular/core';
 import type { DeliveryChannel, UploadState } from '@shared/domain/upload.machine';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
+import { AlertComponent } from '@shared/ui/atoms/alert/alert.component';
 import { DocumentCategoryComponent } from '../document-category/document-category.component';
 
 /** Organism: the full document-upload step — the category list, or a load-error