# Sprint 11 — Spectrum UX port : 4 primitives + compact density global

**Base** : `origin/main` (PR #12 mergée — sprint 8 + 9 + 10 en).
**Branch** : `sprint/11-spectrum-ux`.
**Scope** : frontend-only sprint, 5 livrables coordonnés. Pas de backend, pas de schéma, pas de nouvelle API. Pas de modif tokens couleurs/spacing/font dans tailwind.config.

---

## Contexte

Analyse Spectrum (`/home/user/Documents/01_Projects/spectrum`) faite via workflow. Résultat : Spectrum n'a **pas de design system** (Tailwind raw + violet ramp + recipes inlinées 30× partout). Mimic est structurellement meilleur. On ne porte pas la philosophie Spectrum — on extrait **5 patterns isolés** qui survivent au brutalisme Mimic.

## Constraints absolues

1. **Primary `#024ad8` (Electric Blue) reste**. Pas de violet, pas de spectrum ramp.
2. **Brutalisme reste** : `rounded-none` sur containers (sauf status pills + tab count pills + avatars), zero `transition-*`, zero `shadow-*`, hairline 1px borders.
3. **Pas de modif `tailwind.config.*`** sauf si une nouvelle classe utility est strictement nécessaire (justifier dans le PR).
4. **DESIGN.md amendments additives uniquement** — pas de modif des tokens existants.
5. **Mono uniquement pour data** (IDs MITRE, dates ISO, commands, etc.) — rule sprint 7.

## Décisions binding (lockées par user)

- **Q1 → B** : Tabs primitive **+ consumer EngagementDetailPage** (3 tabs : Schedule / Description / Simulations au lieu du stack vertical actuel).
- **Q2 → B** : **Compact density GLOBAL** — toutes les tables passent à 32px row, pas opt-in. User accepte le tradeoff WCAG (touch target) sur Engagements list.
- **Q3 → A** : AlertBanner + refactor `SimulationFormPage` (Done banner + SOC-blocked banner).

---

## Livrables

### Livrable 1 — `Tabs` primitive + `useHashTab` hook + consumer

**Files** :
- `frontend/src/hooks/useHashTab.ts` (NEW) — ~30 LoC. Reads `window.location.hash`, falls back to default ID, listens to `hashchange`, updates URL without reload. TypeScript pur, zéro style.
- `frontend/src/components/Tabs.tsx` (NEW) — composant `<Tabs items={[{id, label, count?}]} activeId onChange />`. Underline variant.
- `frontend/src/styles/index.css` — nouvelles recipes :
  - `.tab-underline` — `text-graphite caption-bold cursor-pointer border-b-2 border-transparent hover:text-ink` (instantané, pas de transition)
  - `.tab-underline-active` — `text-primary border-primary` (override)
  - `.tab-count-pill` — `rounded-pill bg-cloud text-graphite text-[11px] px-xs py-0 font-mono`
  - `.tab-count-pill-active` — `bg-primary-soft text-primary` (override)
- `frontend/src/pages/EngagementDetailPage.tsx` — refactor en 3 tabs :
  - Tab 1 "Schedule" (id `schedule`, default) — dates + statut + bouton "Edit engagement"
  - Tab 2 "Description" (id `description`) — texte description
  - Tab 3 "Simulations" (id `simulations`) — la liste actuelle de simulations
  - Count pills sur tab 3 = nombre de simulations
  - Tabs branchées sur `useHashTab('schedule')`
- `DESIGN.md` — nouvelle subsection `### Navigation › Sub-page tabs` (additive)

**Brutalism check** :
- Tab : `border-b-2` only, pas de bg, pas de rounded, pas de transition
- Pill : `rounded-pill` autorisé (exception status pill DESIGN.md L125)
- Hover : `hover:text-ink` instantané

### Livrable 2 — `AlertBanner` component + 4 recipes

**Files** :
- `frontend/src/components/AlertBanner.tsx` (NEW) — `<AlertBanner variant="error|warn|success|info" title? children />`. Brutalist : border-l-4 strip semantic, fill `bg-paper`, border `border-hairline` partout sauf le strip gauche, `rounded-none`. Icon Lucide à gauche (`AlertCircle` error, `AlertTriangle` warn, `CheckCircle` success, `Info` info) à `size={16}`.
- `frontend/src/styles/index.css` — 4 nouvelles recipes :
  - `.alert-error` — `bg-paper border border-hairline border-l-4 border-l-bloom-deep px-md py-sm flex items-start gap-sm`
  - `.alert-warn` — same + `border-l-warn`
  - `.alert-success` — same + `border-l-success`
  - `.alert-info` — same + `border-l-primary`
- `frontend/src/pages/SimulationFormPage.tsx` — refactor 2 banners hand-rollés (~L300 Done banner + ~L310 SOC-blocked banner) → `<AlertBanner variant="success">` / `<AlertBanner variant="warn">`.
- `DESIGN.md` — extend `### Toast Notifications` avec subsection `### Inline Banners` (additive, mêmes 4 variants).

**Note** : `bloom-deep`, `warn`, `success`, `primary` sont les tokens existants — pas de nouveau token couleur.

### Livrable 3 — `BackLink` component (dédup)

**Files** :
- `frontend/src/components/BackLink.tsx` (NEW) — `<BackLink to="/engagements">Back to engagements</BackLink>`. Renders `← {children}` (ArrowLeft Lucide size=14, gap-xxs). Style : `text-graphite hover:text-primary caption-md` instantané.
- Refactor consumers (3 instances hand-rollées) :
  - `frontend/src/pages/EngagementDetailPage.tsx` (~L35)
  - `frontend/src/pages/SimulationFormPage.tsx` (back-link en edit mode)
  - `frontend/src/pages/TemplateFormPage.tsx` (back-link en edit mode)

### Livrable 4 — `.table-compact` recipe + apply GLOBAL

**Files** :
- `frontend/src/styles/index.css` — nouvelle recipe (mais appliquée comme default, pas opt-in cette sprint per user decision Q2-B) :
  - Soit : modifier la recipe `.card-product table` existante pour passer à 32px row, `caption-md` text, `py-xxs px-xs` cells, divider `border-hairline`.
  - Soit : ajouter `.table-compact` puis l'appliquer à TOUTES les list pages (Engagements, Templates, Users, etc.).
  - **Choix builder** : pick the cleaner path. Préférer modifier le default si toutes les tables doivent suivre, sinon `.table-compact` + apply partout.
- Apply sur :
  - `frontend/src/pages/EngagementsListPage.tsx`
  - `frontend/src/pages/TemplatesListPage.tsx`
  - `frontend/src/pages/UsersAdminPage.tsx`
  - `frontend/src/components/SimulationList.tsx` (utilisé dans EngagementDetailPage)
  - Toute autre table dans le code (grep `<table` dans `frontend/src/`)
- `DESIGN.md` — `### Data Tables` section : modifier la ligne "Row min-height 44px" → "Row min-height 32px (compact density, all surfaces)". Documenter le tradeoff WCAG (touch target dérogé en faveur de la densité opérateur — c'est un BAS tool, pas un site grand public).

**ATTENTION** : WCAG SC 2.5.5 (Target Size: Minimum) recommande 44×44. Tu déroges. Garder les boutons d'action des rows ≥ 24px d'icône avec padding pour préserver le hit area minimal. Tester en clavier + lecteur d'écran nicht regressé.

### Livrable 5 — DESIGN.md amendments + CHANGELOG

**Files** :
- `DESIGN.md` :
  - `### Navigation` : nouvelle subsection "Sub-page tabs" (livrable 1)
  - `### Toast Notifications` : nouvelle subsection "Inline Banners" (livrable 2)
  - `### Data Tables` : ligne row min-height passe à 32px + paragraphe rationale (livrable 4)
- `CHANGELOG.md` : entrée Sprint 11 listant chaque primitive + ses tokens DESIGN.md.

---

## Sequencing

1. **frontend-builder** : livrables 1 + 2 + 3 + 4 + 5 en cascade. Une seule passe. Commits atomiques :
   ```
   feat(frontend): add Tabs primitive + useHashTab hook
   feat(frontend): refactor EngagementDetailPage to 3-tab layout
   feat(frontend): add AlertBanner component + 4 semantic variants
   refactor(frontend): migrate SimulationFormPage banners to AlertBanner
   feat(frontend): add BackLink helper + dedup 3 hand-rolled instances
   feat(frontend): compact table density (32px row) global
   docs(design): add tabs / inline banners / compact-table-density to DESIGN.md
   ```
   (collapse OK si plus efficace ; ~5-7 commits attendus)
2. **design-reviewer** : visual + token compliance check. Focus :
   - Underline tabs : pas de transition, pas de bg fill, border-b instantané
   - Count pill : `rounded-pill` est dans l'exception DESIGN.md, OK
   - AlertBanner : `border-l-4` semantic OK, pas de shadow
   - BackLink : caption + icon align baseline
   - 32px tables : densité lisible ? Hit area boutons d'action OK ?
3. **code-reviewer** : sprint diff. Focus :
   - Aucune transition / shadow / rounded leak
   - useHashTab : `hashchange` listener cleanup dans useEffect return
   - Tabs : prop API stable, fallback default ID si hash invalide
   - AlertBanner : ARIA `role="alert"` ou `role="status"` selon variant
   - BackLink : `to` est `string` ou objet React Router ? Choisir un seul
4. **spec-reviewer** : `SPEC.md` n'a pas vocation à mentionner ces primitives, **skip ce sprint** sauf si tu détectes une feature côté backend qui aurait dérivé.

## Contraintes tests

- `vitest --run` baseline **212/212** doit tenir.
- **Ajouter 4 specs** (1 par new component) :
  - `Tabs.test.tsx` — active state, hash sync, count pill render
  - `AlertBanner.test.tsx` — 4 variants rendent les bonnes classes
  - `BackLink.test.tsx` — render + click navigation
  - `useHashTab.test.tsx` — hash read/write
- `tsc --noEmit` + `eslint --max-warnings=0` clean.
- Brutalism unit assertions : pour chaque new component, un test qui vérifie `expect(el).not.toHaveClass('rounded-md')` (sauf pill counter) + `.not.toHaveClass(/transition-/)` + `.not.toHaveClass(/shadow-/)`.

## Out of scope (explicite)

- ❌ Side nav / drawer / breadcrumb component — top nav + BackLink suffit
- ❌ Global engagement selector top-bar (Spectrum pattern rejeté)
- ❌ Editor dynamic-column grid — pas d'éditeur dans Mimic
- ❌ Dark mode rework
- ❌ Toast queue system (les toasts actuels via `useToast` restent)
- ❌ PDF/document deliverable
- ❌ Color palette changes
- ❌ Tokens spacing/typo dans tailwind.config

## Definition of Done

- ✅ 5 primitives livrées + EngagementDetailPage refactorée en tabs + SimulationFormPage banners migrés + BackLink dédup × 3
- ✅ vitest **212+/212+** (4 new specs ajoutées), tsc + lint clean
- ✅ pytest **469/469** intact (zéro backend touché)
- ✅ Toutes tables passent à 32px row density (validation visuelle)
- ✅ Design-reviewer APPROVED (brutalism check sur les 4 new recipes)
- ✅ Code-reviewer APPROVED
- ✅ DESIGN.md amendé (3 subsections additives)
- ✅ CHANGELOG.md entrée sprint 11
- ✅ PR ouverte sur Gitea avec body