Cvcraft Cursor Rules

# Cursor Rules - CraftCV (Éditeur de CV en Svelte)

## Contexte projet
Tu travailles sur un éditeur visuel de CV 100% client-side, développé avec Svelte 4 + Vite (JavaScript vanilla).  
L’application doit permettre à un développeur de créer, modifier, sauvegarder et exporter des CV rapidement, avec une interface WYSIWYG.  
Aucune dépendance backend, tout est stocké en local (localStorage / IndexedDB).  
Le rendu du CV se fait dans le DOM (pas de Canvas).  
L’export PDF utilise `html2pdf.js` ou `window.print()` avec une feuille de style `@media print`.

## Tech Stack
- **Framework** : Svelte 4 (pas de SvelteKit, pas de TypeScript sauf si tu sais gérer)
- **Bundler** : Vite
- **Langage** : JavaScript avec JSDoc pour la documentation des fonctions
- **CSS** : CSS natif avec variables CSS, pas de framework lourd. Les composants Svelte utilisent <style> scopé.
- **Librairies externes** :
  - `SortableJS` (pour le drag & drop des sections et éléments)
  - `html2pdf.js` (export PDF)
  - `Font Awesome` (icônes)
- **Stockage** :
  - `localStorage` pour les sauvegardes rapides
  - `IndexedDB` (via `idb` wrapper) pour les projets plus volumineux
  - Téléchargement / import de fichier JSON

## Architecture des fichiers
src/
├── lib/
│   ├── components/
│   │   ├── Editor/
│   │   │   ├── EditorPane.svelte      (barre d'outils + palette)
│   │   │   ├── SectionList.svelte      (liste des sections avec drag)
│   │   │   ├── SectionItem.svelte      (une section éditable)
│   │   │   ├── TextEditor.svelte       (inline contenteditable)
│   │   │   ├── PhotoEditor.svelte      (upload/crop/position)
│   │   │   └── Toolbar.svelte          (boutons d'action)
│   │   ├── Preview/
│   │   │   ├── CvPreview.svelte        (wrapper du rendu)
│   │   │   └── CvSection.svelte        (section dans l'aperçu)
│   │   ├── Export/
│   │   │   ├── ExportPdf.svelte
│   │   │   └── ExportHtml.svelte
│   │   └── ui/                         (boutons, inputs, modales)
│   ├── stores/
│   │   ├── cvData.js                   (store Svelte pour le modèle du CV)
│   │   ├── uiState.js                  (état de l'interface)
│   │   └── history.js                  (gestion undo/redo)
│   ├── utils/
│   │   ├── pdfExport.js
│   │   ├── htmlExport.js
│   │   ├── defaultCv.js                (modèle JSON par défaut)
│   │   └── helpers.js
│   └── assets/                         (polices, icônes)
├── App.svelte
├── main.js
└── index.html

## Conventions de code
- Utiliser des stores Svelte pour l’état centralisé (`cvData`, `uiState`).
- Chaque section du CV est représentée par un objet JSON standard (voir plus bas).
- L’aperçu et l’éditeur partagent le même store `cvData` pour une synchronisation temps réel.
- Les composants d’édition modifient directement l’objet dans le store (reactivité Svelte).
- Pas de mutation directe, utiliser `$cvData = ...` ou des fonctions dans le store.
- Les styles de mise en page du CV sont stockés dans un objet `layout` séparé (colonnes, tailles, polices, couleurs).
- Les noms de variables en anglais, commentaires en français acceptés.
- Favoriser les composants réutilisables et les props.

## Comportement de l’IA
- Proposer du code complet, prêt à l’emploi, avec les imports nécessaires.
- Expliquer brièvement chaque bloc important en français.
- Respecter la structure de fichiers définie ci-dessus.
- Pour le drag & drop, utiliser `SortableJS` en suivant le pattern Svelte (actions).
- Gérer les cas d’erreur et les états vides.
- Toujours commenter les parties complexes.
- Si une fonctionnalité est demandée, l’implémenter entièrement dans les composants existants sans casser la réactivité.