# 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