improve notepad features and add drawing canvas

DESIGN_SYSTEM.md

@@ -179,8 +179,49 @@ Alertes timer :
 - le garde-fou bloque uniquement les comptes a rebours recurrents (`Pattern horaire`, `Intervalle`) si la repetition est inferieure a 5 minutes ;
 - un `Pattern horaire` comme `X:24:X` cible `hh:24:00` et se repete toutes les heures.
 
+### Bloc Notes Riche
+
+Le bloc notes utilise une edition directe en `contentEditable`, sans mode preview separe.
+
+Regles UI :
+
+- toolbar compacte en haut de l'outil ;
+- boutons courts pour gras, italique, souligne, paragraphes, titres et listes ;
+- couleurs texte et surlignage regroupees dans un dropdown unique avec icone arc-en-ciel et libelles de categories ;
+- date de derniere modification affichee en pied d'outil, sans prendre le dessus sur le contenu ;
+- switch de stockage des dessins en pied d'outil, avec icone sauvegarde et etat actif ;
+- placeholder integre dans la surface d'edition quand la note est vide ;
+- le HTML persiste doit rester nettoye via allowlist, jamais via HTML libre.
+
+### Calque De Dessin
+
+Les annotations dessinees utilisent un canvas transparent superpose au contenu annote.
+
+Regles UI :
+
+- le calque est inactif par defaut pour laisser le contenu editable ;
+- en mode dessin, les interactions pointer sont capturees par le canvas ;
+- les controles de dessin sont regroupes dans un panneau reutilisable vertical, colle a droite de la surface annotee ;
+- seuls les controles directement lies au dessin sont affiches quand le mode dessin est actif ;
+- les controles restent compacts : gommer, annuler, effacer, couleur et epaisseur via dropdowns ;
+- le mode temporaire privilegie le griffonnage de session et utilise `sessionStorage` ;
+- le mode permanent suit le stockage IndexedDB de l'outil ;
+- pour les surfaces scrollables, le canvas suit le contenu complet plutot que le viewport visible.
+- sur les annotations d'images, les traits utilisent des coordonnees en pourcentage et restent visibles dans l'aperçu reduit ; l'edition se fait uniquement en plein ecran et le switch de sauvegarde reste disponible dans la barre de dessin.
+
 ## 8. Tabs Et Switchs
 
+### Dropdowns Compacts
+
+Les menus flottants compacts d'icones, couleurs, epaisseurs ou actions rapides doivent reutiliser `CompactDropdown`.
+
+Regles :
+
+- conserver un trigger compact, idealement icone seule avec tooltip ;
+- fermer au clic exterieur, a `Escape`, a la selection et quand le focus sort du menu ;
+- garder le contenu interne libre pour supporter grilles d'icones, swatches, libelles de categories ou choix d'epaisseur ;
+- reutiliser les classes visuelles existantes du contexte quand le menu appartient a un outil precis.
+
 Tabs :
 
 - utiliser le composant commun quand un outil doit alterner entre plusieurs modes ;