chore: état initial avant refonte (atlas SvelteKit v4.0.0)

Snapshot de l'existant avant application du playbook OKI : background shader Three.js, carte graphe 3D, timeline statique.
2026-07-21 13:10:12 -04:00
commit 93c577c5d3
80 changed files with 54745 additions and 0 deletions
@@ -0,0 +1,239 @@
+# Prompt : Migration "Le Grand Atlas du Fédiverse" vers PWA SvelteKit
+
+> Ce prompt est destiné a Kimi CLI. Il transforme le projet "Le Grand Atlas du Fédiverse v4.0" (actuellement React + Vite + Tailwind) en PWA SvelteKit 2 + Svelte 5, en respectant integralement la doctrine UI/UX OKI (document "UI UX souveraine Fondements.md").
+
+---
+
+## 1. CONTEXTE DU PROJET
+
+Le projet est une cartographie interactive du Fediverse (reseau social decentralise) :
+- **Site web** : https://vhgsr7e3fioam.kimi.page (reference visuelle)
+- **Donnees** : 105 logiciels, 12 protocoles, 14 categories, chronologie 2008-2026, ponts Nostr-ActivityPub
+- **Pages** : Accueil (hero shader + graphe 3D + timeline + catalogue + protocoles), page Nostr dediee, page SimpleX dediee
+- **Stack actuelle** : React 19 + Vite + Tailwind CSS + shadcn/ui + Three.js + D3 (a migrer)
+- **Licence** : CC BY-SA 4.0
+- **Langue** : Francais (avec preparation pour bilinguisme FR/créole)
+
+## 2. STACK CIBLE (OBLIGATOIRE — non negociable)
+
+```
+Svelte 5 (runes : $state, $derived, $effect)
+SvelteKit 2 (SSR par defaut, adapter-static pour PWA)
+CSS natif sur design tokens (PAS Tailwind, PAS shadcn, PAS framework CSS)
+Three.js + D3 (conserves pour le graphe 3D — lazy loaded)
+Bits UI ou Melt UI (headless uniquement — comportement + ARIA, pas de styles imposes)
+```
+
+**Pourquoi pas Tailwind** : redondant avec CSS scopé Svelte, disperse le design system dans les templates, court-circuite la comprehension de la cascade. Voir doctrine OKI §5.2.
+
+## 3. ARCHITECTURE CSS (OBLIGATOIRE)
+
+```
+src/styles/
+  tokens.css      /* custom properties oklch, typo fluide clamp(), espacements */
+  reset.css       /* reset moderne minimal */
+  base.css        /* HTML semantique, focus visible */
+  layouts.css     /* .stack, .cluster, .sidebar, .center (Every Layout) */
+  themes/
+    default.css   /* tokens couleurs du projet */
+
+src/app.css       /* @layer reset, tokens, base, layouts, components, utilities */
+```
+
+**Tokens couleurs (oklch, methodologie modus-vivendi)** :
+```css
+:root {
+  color-scheme: light dark;
+  --ink:       light-dark(oklch(22% 0.02 260), oklch(92% 0.01 260));
+  --surface:   light-dark(oklch(98% 0.005 90),  oklch(15% 0.02 260));
+  --surface-2: light-dark(oklch(95% 0.01 90),   oklch(20% 0.02 260));
+  --accent:    oklch(55% 0.2 350);    /* rose coral #F72585 */
+  --accent-2:  oklch(70% 0.15 250);  /* bleu #4CC9F0 */
+  --accent-3:  oklch(65% 0.18 80);   /* orange Nostr #F7931A */
+  --accent-4:  oklch(70% 0.15 160);  /* vert SimpleX #06D6A0 */
+  --muted:     oklch(70% 0.02 260);
+  --tap-target: 48px;
+  --measure: 65ch;
+  --text-1: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
+  --text-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
+  --text-3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
+  --text-4: clamp(2rem, 1.8rem + 1.2vw, 3rem);
+  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem;
+  --space-4: 1.5rem;  --space-5: 2.5rem; --space-6: 4rem;
+}
+```
+
+**Chaque composant Svelte utilise `<style>` scopé** et consomme les tokens — jamais de valeur brute.
+
+## 4. STRUCTURE SVELTEKIT
+
+```
+src/
+  routes/
+    +page.svelte              /* Accueil : hero + sections */
+    +page.ts                  /* prerender = true */
+    nostr/
+      +page.svelte
+    simplex/
+      +page.svelte
+    data/
+      +server.ts              /* API JSON pour les donnees */
+  lib/
+    components/
+      Header.svelte
+      Footer.svelte
+      HeroShader.svelte       /* Shader WebGL ocean */
+      NetworkGraph.svelte     /* Graphe 3D Three.js + D3 */
+      Timeline.svelte         /* Chronologie */
+      SoftwareCatalog.svelte  /* Catalogue filtrable */
+      ProtocolSection.svelte  /* Protocoles */
+      ProtocolStream.svelte   /* Data stream animé */
+    data/
+      fediverse.ts            /* 105 logiciels, protocoles, categories */
+      timeline.ts             /* 30 evenements 2008-2026 */
+      bridges.ts              /* Ponts Nostr-AP */
+    styles/
+      tokens.css, reset.css, base.css, layouts.css
+  app.html
+  app.css
+  service-worker.ts          /* PWA offline-first */
+static/
+  manifest.json              /* Web App Manifest */
+  icons/                     /* 192x192, 512x512 */
+```
+
+## 5. PWA OFFLINE-FIRST (OBLIGATOIRE)
+
+```typescript
+// src/service-worker.ts
+// Strategy : Cache-First pour les assets statiques
+//            Network-First pour les donnees JSON
+//            File d'attente pour les actions hors-ligne
+```
+
+- **Service Worker** : cache les pages visitées, les donnees JSON, les assets statiques
+- **Manifest** : `name: "Atlas Fediverse"`, `short_name: "Atlas"`, `display: standalone`, `theme_color: #001219`
+- **Icons** : generer a partir du SVG logo (globe + couleurs du projet)
+- **Offline** : le catalogue et les pages Nostr/SimpleX doivent fonctionner hors-ligne apres premiere visite
+- **Installable** : bouton "Installer" dans le header si beforeinstallprompt disponible
+
+## 6. PERFORMANCE (OBLIGATOIRE — seuils a respecter)
+
+| Métrique | Seuil |
+|----------|-------|
+| JS initial | < 100 Ko compressé (Three.js lazy loaded) |
+| CSS total | < 50 Ko |
+| Page totale | < 500 Ko |
+| Premier rendu | < 3s en Slow 4G |
+| Interactions | < 400 ms (skeleton screens si > 1s) |
+| Polices | ≤ 2 fichiers WOFF2, auto-hebergees, font-display: swap |
+
+**Lazy loading** : Three.js et D3 ne chargent que sur la route `/` (graphe 3D). Pages Nostr et SimpleX n'embarquent pas Three.js.
+
+## 7. ACCESSIBILITÉ (OBLIGATOIRE — WCAG 2.2 AA minimum)
+
+- [ ] Contraste 4.5:1 texte courant, 3:1 grand texte (palette oklch calculée)
+- [ ] Information jamais portee par la couleur seule (doubler par icone/texte/forme)
+- [ ] `prefers-color-scheme`, `prefers-reduced-motion`, `prefers-contrast` respectes
+- [ ] Tout en `rem`, jamais de `font-size` en `px` sur `html`
+- [ ] HTML semantique : landmarks, hiérarchie titres, `<button>` pour actions
+- [ ] Focus visible sur tous les elements interactifs
+- [ ] Ordre de tabulation logique
+- [ ] Navigation clavier complete (desktop) : `?` pour raccourcis, `/` pour recherche
+
+## 8. DOCTRINE MOBILE-FIRST (OBLIGATOIRE)
+
+- Actions primaires dans le **tiers inferieur** (barre de nav basse si justifiée)
+- Cibles tactiles **≥ 48 px**, espacement **≥ 8 px**, corps **≥ 16 px**
+- Une colonne, un flux : pas de multi-colonnes sur mobile
+- Valeur livree en < 5 secondes par ecran
+- Reprennabilite : etat sauvegarde (filtres catalogue, position scroll)
+- **Frugalite data** : lazy loading, AVIF/WebP, pas de police web au-dela de 2 fichiers
+
+## 9. ÉTHIQUE ATTENTIONNELLE (OBLIGATOIRE — calm technology)
+
+- [ ] **Pagination** ou marqueur "vous etes a jour" dans les listes (PAS de scroll infini)
+- [ ] Notifications : actionnables uniquement, jamais de re-engagement artificiel
+- [ ] Pas de compteurs anxiogenes masques/optionnels uniquement
+- [ ] Pas de dark patterns
+- [ ] Points d'arret naturels dans les flux
+
+## 10. DONNÉES (reutiliser telles quelles)
+
+Les fichiers de donnees du projet actuel sont dans `/public/data/` :
+- `fediverse.json` : 105 logiciels + protocoles + categories
+- `software.json`, `protocols.json`, `categories.json`, `network.json`
+
+Les importer comme modules JSON dans SvelteKit (`import data from './data.json' assert { type: 'json' }`).
+
+## 11. FEATURES A CONSERVER (parité fonctionnelle)
+
+### Page d'accueil (`/`)
+1. **Hero** : Shader WebGL ocean (Le réseau social, sans les chaînes) + CTA "Plonger"
+2. **Graphe 3D** : Three.js + D3-force, 105 noeuds colorés par categorie, survol tooltip, filtres par categorie
+3. **Timeline** : Chronologie verticale 2008-2026, filtres par type, alternance gauche/droite
+4. **Catalogue** : Grille logiciels, recherche instantanee, filtres categorie/statut, modal detail
+5. **Protocoles** : 12 protocoles en cartes, data stream animé en fond
+
+### Page Nostr (`/nostr`)
+- Hero, comment ca marche (3 etapes), 6 features, 15 clients, tableau comparatif AP vs Nostr
+
+### Page SimpleX (`/simplex`)
+- Hero, 3 etapes, 8 features, tableau comparatif (SimpleX vs Signal vs WhatsApp vs Matrix), cas d'usage
+
+### Global
+- Header fixe glassmorphism avec nav + liens Nostr/SimpleX
+- Footer avec credits CC BY-SA 4.0
+- Telechargement des donnees JSON / YAML
+- Infographie SVG/PDF telechargeable
+
+## 12. FEATURES A AJOUTER
+
+- [ ] **Bouton installer PWA** dans le header (detecter beforeinstallprompt)
+- [ ] **Indicateur offline** discret quand pas de connexion
+- [ ] **Marqueur "vous etes a jour"** en fin de catalogue (ethique attentionnelle)
+- [ ] **Raccourcis clavier** : `/` recherche, `?` aide, `j/k` navigation catalogue
+- [ ] **Preparation i18n** : structure de cles pour FR et créole (creole guadeloupeen)
+
+## 13. STEPS D'IMPLEMENTATION (ordre)
+
+1. **Init** : `npm create svelte@latest atlas-fediverse` → skeleton → TypeScript, ESLint, Prettier, Vitest
+2. **Config** : `svelte.config.js` avec `adapter-static`, prerender all routes
+3. **Styles** : Creer `src/styles/` (tokens, reset, base, layouts) + `app.css` avec `@layer`
+4. **Data** : Copier les fichiers de donnees JSON dans `src/lib/data/`, importer comme modules
+5. **Layout** : `+layout.svelte` avec Header + Footer, slot pour le contenu
+6. **Accueil** : Sections hero (sans shader d'abord), protocoles, timeline, catalogue
+7. **Graphe 3D** : Migrer NetworkGraph (Three.js + D3) — lazy loaded via `await import()`
+8. **Shader** : Migrer HeroShader (Three.js) — lazy loaded
+9. **Pages** : Nostr + SimpleX
+10. **PWA** : service-worker.ts, manifest.json, icons
+11. **Polish** : accessibilite, raccourcis clavier, reduced-motion, offline indicator
+12. **Build** : `npm run build` → verifiez les seuils perf (JS < 100Ko, page < 500Ko)
+
+## 14. VERIFICATION FINALE (checklist doctrine OKI)
+
+Avant de livrer, verifier :
+- [ ] Pas de Tailwind, pas de shadcn, pas de framework CSS — CSS natif + tokens uniquement
+- [ ] Svelte 5 runes utilises ($state, $derived, $effect) — pas de syntaxe Svelte 4
+- [ ] Service Worker fonctionnel, PWA installable, offline-first
+- [ ] JS initial < 100 Ko (sans Three.js qui est lazy loaded)
+- [ ] Page totale < 500 Ko
+- [ ] Contraste WCAG 2.2 AA verifie sur tous les textes
+- [ ] prefers-reduced-motion, prefers-color-scheme, prefers-contrast gérés
+- [ ] Navigation clavier complete
+- [ ] Cibles tactiles ≥ 48 px
+- [ ] Pas de scroll infini — pagination ou marqueur de fin
+- [ ] Polices auto-hebergees ≤ 2 fichiers WOFF2
+- [ ] Container queries pour le responsive des composants (pas seulement media queries)
+- [ ] Fonctionne a 50% de largeur d'ecran (multi-fenêtrage desktop)
+
+---
+
+## NOTES POUR KIMI CLI
+
+- Le projet actuel est accessible sur https://vhgsr7e3fioam.kimi.page pour reference visuelle
+- Les donnees JSON sont telechargeables depuis https://vhgsr7e3fioam.kimi.page/data/fediverse.json
+- Le code source React actuel est dans `/mnt/agents/output/app/src/` (reference pour les donnees et la logique, mais PAS pour le style — tout le CSS est a recrire selon la doctrine)
+- Le graphe 3D et le shader sont les composants les plus complexes — les migrer en dernier
+- Priorite : fonctionnel + beau + performant + accessible, dans cet ordre
+- Ne pas hesiter a simplifier visuellement si necessaire pour respecter les budgets perf