# Session handoff — 2026-05-17

Récap consolidé du repo. Sert de point de reprise pour les sessions
futures (humain ou IA). Dernière mise à jour majeure : DS v0.4, Console
scaffold + polish, light mode bascule pastel lavande.

---

## URLs live

| | |
|---|---|
| **Landing prod** | https://lab.mercure.studio |
| **Variantes hero** | `?v=b` (vidéo) · `?v=c` (robot) · `?v=d` (robot + vidéo dans le M) |
| **Console product** | https://lab.mercure.studio/console/ (mock Fenêtres Summum) |
| **Design System docs** | https://lab.mercure.studio/design-system/ |
| **Stories** (Storybook-lite) | https://lab.mercure.studio/design-system/stories.html |
| **Tokens JSON** | https://lab.mercure.studio/design-system/tokens.json |
| **Vercel dashboard** | https://vercel.com/marco-drouins-projects/mercure-lab-export |
| **Sentry dashboard** | https://mercure-labs.sentry.io/projects/lab_website/ |
| **GitHub repo** (private) | https://github.com/mercure-labs/lab |
| **GitHub Actions** | https://github.com/mercure-labs/lab/actions |

---

## État livré

### Code

- **`lab.html` consolidé** — un seul fichier avec 3 hero `<template>` (B/C/D), switcher dans le nav, JS qui clone selon `?v=`. Spline + `lab-robot.js` chargés **conditionnellement**.

- **Design System v0.4.0** dans `design-system/` :
  - 121 tokens en `tokens.json` (primitives + sémantique + theme.light)
  - **26 composants** : glass, btn (+quiet), pill (6 variants), badge (7), eyebrow, h1-h3, lead, stat, field (input/select/textarea), nav, theme-toggle, modal, drawer, toast, tooltip, popover, radio, check, switch, slider, table, skeleton, avatar (sm/lg/status/group), state (empty/error), icon, **tabs** (v0.4), **segmented control** (v0.4), **stepper** (+vertical, v0.4), **progress** (+lg, indeterminate, v0.4), **code** (+inline, v0.4), **⌘K command palette** (v0.4)
  - 17 Stories interactives + 4 fichiers JS runtime (system, overlays, floating, stories)
  - Build pipeline `node build-tokens.mjs` → CSS, SCSS, JS ESM, Android XML, Tokens Studio JSON
  - 30 icônes Lucide whitelist (sprite SVG)
  - `prefers-reduced-motion` honoré (kill-switch CSS global + gates JS sur lab-b)

- **Console product** dans `console/` (livré 2026-05-17, polish + animations) :
  - 5 panels : Overview, CRM Sync, Automations, Team, Settings
  - Layout shell : sidebar 240px + topbar 56px + main scrollable, IntersectionObserver sync
  - **Overview polish** : aurora hero band (3 radial gradients + grain), gradient text sur hero stat, KPIs avec sparklines SVG (Catmull-Rom smoothing), 14-day chart SVG complet (area + line + grid + axis), 4 gauges circulaires (stroke-dasharray), stepper avec pulse, feed timeline avec connector
  - **Entrance animations** choreographiées : counter 0→14.2 sur 1.6s, sparklines draw-on, chart line stroke draw, gauges fill, KPI cards stagger rise
  - ⌘K palette avec 11 commandes console-specific
  - Sentry monitoring sur les 3 pages publiques

- **Light mode** repensé en **direction pastel lavande** (Sincra-inspired) :
  - `--mc-paper-1` passé de `#f4f3f6` cool gray à `#f5f2fc` lavender wash
  - Glass shadows douces diffuses (mauve cast au lieu de gray)
  - Cards qui flottent (white 78% + inset highlight + lift hover plus marqué)
  - Body bg avec radial gradients mauve/indigo full-page
  - Sidebar transparent + backdrop-blur
  - Lines lavender-tinted
  - **Dark reste 100% intact** = signature cinema Mercure

### Infra

- Repo Git sur `github.com/mercure-labs/lab` (private)
- Vercel deploy auto-push avec custom domain `lab.mercure.studio`
- GitHub Actions Playwright sur push/PR (cache npm + browsers, Node 24 opt-in)
- Branch protection sur `main` (PR obligatoire, 2 checks Playwright requis, admin bypass)
- Sentry monitoring (région DE, hasReplay + hasPerformance, loader CDN js-de)
- Sentry ↔ GitHub integration active

### Tests

**90 Playwright tests** sur 2 thèmes (chromium-dark + chromium-light) :
- `visual.spec.js` — DS docs + overlays + stories + a11y forms + v0.4 components + light mode contrast (45 cas)
- `lab.spec.js` — variantes b/c/d, conditional Spline/robot loading, DS tokens, glass migration, reduced-motion (30 cas)
- `console.spec.js` — shell, panels, ⌘K palette, switches, drawer, tabs, overview polish (sparklines, chart, gauges, gradient hero) (26 cas)

Tous verts en CI. 1 flaky occasionnel (`popover toggles`) qui passe en isolation.

---

## Décisions techniques notables

1. **Vanilla stack** — pas de framework, pas de bundler. Build minimal en Node ESM.
2. **CSS shim retiré** — `lab-b.css` consomme directement les `--mc-*` tokens du DS.
3. **Templates HTML5** pour les 3 heros — pas d'iframe parasite sur variante non active.
4. **Sentry Loader Script** (auto-update, config dashboard) avec région DE.
5. **Light mode = teinte lavande pastel** (Sincra-style), **dark mode = cinema indigo/mauve/cyan** (signature Mercure).
6. **DS = source de vérité pour la Console** — la Console ajoute uniquement du layout shell custom (sidebar/topbar/main), tout le reste vient du DS.
7. **Spotlight délégué** dans `system.js` — un listener au lieu de 22+ per-card (corrige la critique d'arch initiale).
8. **Tokens Studio sync en pause** — paywall Pro €39/mo bloque les vraies features.
9. **Vercel ↔ Sentry marketplace skippé** — bénéfices marginaux sans build step.

---

## Ce qui reste à faire (backlog priorisé)

### 🔴 Décisions de direction visuelle (issu du feedback 2026-05-17)

- **Hubtown-style cinema variant** — Marco a partagé hubtown.co.in comme référence. Décision pending : faire une variante E du landing avec M filigrane centerpiece géant + atmospheric backdrop + statement massif + sidebar verticale + loader 0%→100% + scroll-snap full-screen. Effort : 4-6h en pur CSS/SVG, ou +4-6h pour Three.js par-dessus.

### 🟠 Polish à étendre

- **Console autres panels** (CRM Sync, Automations, Team, Settings) — actuellement standard, à polish au niveau d'Overview si on garde le projet vivant.
- **Lab-b.js scroll listeners consolidation** — 5+ handlers de section pourraient devenir un orchestrateur rAF unique.

### 🟡 Décisions de produit

- **Brockmann Regular + Bold** — acquérir les licences (~$300). En attente, `font-synthesis: weight` fait le pont.
- **Robot Spline custom Mercure** — Spline editor OU Three.js from scratch (~6h).
- **NPM publish private** — `@mercure-labs/design-system`, registry npmjs.com ($7/mo) OU GitHub Packages free.

### 🟢 Sub-produits Mercure

- **Watchtower variant DS** — palette navy/violet/cyan, mascotte "Le Gardien" (skills dédiés déjà configurés).
- **Academy / Prospero** — autres produits applicatifs, répéter l'exercice console.

### 🔵 Nouveau outil disponible

- **Claude Design** (Anthropic, lancé 17 avril 2026) — Pro tier minimum, génère slides/prototypes/one-pagers en consommant le DS du repo. Workflow proposé : Claude Design pour mockups visuels → Claude Code pour coder → Vercel deploy. À tester avec le repo `mercure-labs/lab`.

### ⏸️ En pause (raison documentée)

- **Figma Tokens Studio sync** — paywall Pro €39/mo bloque le multi-file + themes + variables export. `figma-tokens.json` est généré et committé pour quand un designer arrivera.
- **Vercel ↔ Sentry marketplace integration** — bénéfices marginaux sans build step.

---

## Commandes utiles

```bash
# Repo local
cd ~/Desktop/mercure-lab-export

# Serveur local
python3 -m http.server 8080
# → http://localhost:8080/lab.html?v=b
# → http://localhost:8080/console/
# → http://localhost:8080/design-system/

# Regenerate tokens
cd design-system && node build-tokens.mjs

# Run Playwright suite
cd design-system && npx playwright test
npx playwright test --grep "Console"   # filter
npx playwright show-report tests/.report

# Watch CI run
gh run list --workflow=playwright.yml --limit 5
gh run watch <run-id>

# Manual deploy (auto-deploy is wired via GitHub→Vercel for main)
vercel --prod --scope marco-drouins-projects
```

---

## Identifiants techniques (cf. memory)

- GitHub user : `mdrouin8`
- Vercel team slug : `marco-drouins-projects`
- Vercel project slug : `mercure-lab-export`
- Sentry org : `mercure-labs` (région DE, `https://de.sentry.io`)
- Sentry project : display `lab`, slug `lab_website`, ID `4511399653408849`
- Sentry DSN public : `258fee79688fe03d6b1dc67a9e0789f1@o4511362837839872.ingest.de.sentry.io/4511399653408849`

---

## Historique de session (récents)

Voir `design-system/CHANGELOG.md` pour le versioning du DS (v0.1 → v0.4) et `git log` pour l'historique complet. Highlights récents :

- **v0.4.0** — 6 nouveaux composants : tabs, segmented, stepper, progress, code, ⌘K palette
- **Light mode contrast fix** — `--mc-glass-bg` n'était plus white-on-white (8 surfaces touchées)
- **Light mode pastel pivot** — paper-* lavender + cards float + shadows mauve diffuses
- **Console scaffold + polish** — première fois que le DS est utilisé en condition produit applicatif
- **Console entrance animations** — counter, draw-on, fill-on, stagger choreography
- **Hubtown reference identifiée** pour potentielle variante E cinema du landing

## Notes pour la prochaine session

- Le user **n'aime pas le polish décoratif** (sparklines + gradients), il veut du **wow signature** (centerpiece géant, atmospheric, statement massif). Sa référence est Hubtown.
- Le user **valide les directions avant le code** quand il partage une URL/screenshot ref.
- Le user a Figma **Pro** (PAS Enterprise) — Variables REST API write est bloquée pour lui.
- Le user a **Claude Pro/Max/Team/Enterprise** suffisant pour Claude Design (research preview). Pas testé encore.