Full-width layout, page-shell template, httpResource async states, README

- Fix full-bleed header/footer (align-items:stretch + block hosts; centered
  content column via shared --app-content-max).
- New templates/page-shell (back-link + heading + intro + content, narrow mode);
  all pages refactored to compose it.
- Async state management with native httpResource + <app-async> wrapper that
  renders exactly one of loading/empty/error/loaded (impossible states
  unrepresentable); delayed spinner + skeleton atoms for slow/fast connections.
- Scenario interceptor (?scenario=slow|loading|empty|error) to demo every state.
- Storybook: spinner/skeleton/page-shell/async-states stories.
- README rewritten as a guide (atomic design, reuse benefits, state handling).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/pages/herregistratie/herregistratie.page.ts

@@ -1,10 +1,8 @@
 import { Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { PageLayoutComponent } from '../../templates/page-layout/page-layout.component';
-import { HeadingComponent } from '../../atoms/heading/heading.component';
+import { PageShellComponent } from '../../templates/page-shell/page-shell.component';
 import { AlertComponent } from '../../atoms/alert/alert.component';
 import { ButtonComponent } from '../../atoms/button/button.component';
-import { LinkComponent } from '../../atoms/link/link.component';
 import { FormFieldComponent } from '../../molecules/form-field/form-field.component';
 import { TextInputComponent } from '../../atoms/text-input/text-input.component';
 
@@ -13,14 +11,11 @@ import { TextInputComponent } from '../../atoms/text-input/text-input.component'
 @Component({
   selector: 'app-herregistratie-page',
   imports: [
-    FormsModule, PageLayoutComponent, HeadingComponent, AlertComponent,
-    ButtonComponent, LinkComponent, FormFieldComponent, TextInputComponent,
+    FormsModule, PageShellComponent, AlertComponent,
+    ButtonComponent, FormFieldComponent, TextInputComponent,
   ],
   template: `
-    <app-page-layout>
-      <p><app-link to="/dashboard">← Terug naar overzicht</app-link></p>
-      <app-heading [level]="1">Herregistratie aanvragen</app-heading>
-
+    <app-page-shell heading="Herregistratie aanvragen" backLink="/dashboard">
       <app-alert type="info">
         Uw huidige registratie verloopt op 1 september 2027. Vraag tijdig herregistratie aan.
       </app-alert>
@@ -42,7 +37,7 @@ import { TextInputComponent } from '../../atoms/text-input/text-input.component'
           </div>
         </form>
       }
-    </app-page-layout>
+    </app-page-shell>
   `,
 })
 export class HerregistratiePage {