update library pages content

tests/helpers/data-validation.mjs

@@ -52,6 +52,8 @@ export function validateSiteContent(site) {
     "library.description",
     "library.summaryLabel",
     "library.tocLabel",
+    "library.tocTitle",
+    "library.tocDescription",
     "library.toolsLabel",
     "home.hero.eyebrow",
     "home.hero.title",

website/public/data/site.json

@@ -35,6 +35,8 @@
     "description": "Parcourez tous les outils disponibles avec des exemples basiques couvrant les listes simples, les catégories, les contenus sans catégorie, les médias, les tableaux et les suivis de session.",
     "summaryLabel": "Repères de la librairie",
     "tocLabel": "Sommaire des outils",
+    "tocTitle": "Sommaire",
+    "tocDescription": "Accédez directement à un exemple d’outil dans la page.",
     "toolsLabel": "Exemples d'outils disponibles",
     "summaryItems": [
       {
@@ -148,52 +150,57 @@
       {
         "icon": "notepad",
         "name": "Bloc notes",
-        "description": "Un espace texte simple pour garder des notes rapides, idées ou rappels pendant une session."
+        "description": "Rédigez des notes riches avec titres, listes, mise en forme et repères rapides pour garder vos infos de session au même endroit."
       },
       {
         "icon": "checklist",
         "name": "Checklist",
-        "description": "Une liste d’objectifs avec quantités pour suivre crafts, ressources, tâches ou préparatifs."
+        "description": "Suivez des objectifs en catégories ou hors catégorie, avec cases, quantités et descriptions utiles pour crafts, ressources ou préparatifs."
       },
       {
         "icon": "picture",
         "name": "Images",
-        "description": "Un espace pour conserver des images utiles, ajoutées par fichier ou collage depuis le presse-papiers."
+        "description": "Regroupez des captures, cartes ou références visuelles ajoutées par fichier ou collage, consultables sans quitter la toolbox."
       },
       {
         "icon": "map",
         "name": "Annotation d'images",
-        "description": "Une image unique annotable avec des marqueurs, pratique pour une carte, un plan ou un image important."
+        "description": "Ajoutez marqueurs et dessins sur une image unique pour préparer une carte, un plan de route ou une référence importante."
       },
       {
         "icon": "link",
         "name": "Liens",
-        "description": "Une liste de raccourcis vers des guides, builds, cartes interactives ou ressources externes."
+        "description": "Gardez vos raccourcis de session vers guides, builds, cartes interactives ou ressources externes, avec titres lisibles."
       },
       {
         "icon": "abacus",
         "name": "Compteurs",
-        "description": "Des compteurs personnalisables pour suivre scores, ressources, victoires, essais ou résultats."
+        "description": "Créez des compteurs ajustables pour suivre essais, ressources, scores, victoires ou stocks sans passer par un tableau."
+      },
+      {
+        "icon": "controller",
+        "name": "Combos",
+        "description": "Documentez des séquences de touches par catégorie, avec supports manette ou clavier/souris et étapes successives lisibles."
       },
       {
         "icon": "calculator",
         "name": "Calculateur",
-        "description": "Un calculateur avec résultats enregistrables et arborescence pour préparer des chaînes de craft ou de ressources."
+        "description": "Calculez des valeurs, enregistrez des résultats et construisez une arborescence pour comparer coûts, crafts ou conversions."
       },
       {
         "icon": "table",
         "name": "Tableau",
-        "description": "Une grille compacte avec formules et copie TSV pour comparer ressources, stocks, besoins ou valeurs."
+        "description": "Structurez des données en grille avec formules, lignes/colonnes ajustables et copie TSV pour comparer besoins ou valeurs."
       },
       {
         "icon": "clock",
         "name": "Timer",
-        "description": "Un espace pour préparer chronomètres à étapes et comptes à rebours multiples pendant une session."
+        "description": "Préparez chronomètres, étapes, comptes à rebours, alertes et intervalles récurrents pour suivre les temps importants."
       },
       {
         "icon": "tasklist",
         "name": "Planificateur de tâches",
-        "description": "Un suivi de tâches ponctuelles, quotidiennes ou hebdomadaires avec catégories et dépendances."
+        "description": "Organisez des tâches ponctuelles, quotidiennes ou hebdomadaires avec catégories, sous-tâches et dépendances parent/enfant."
       }
     ],
     "limitsTitle": "À retenir",

website/src/pages/LibraryPage.jsx

@@ -198,6 +198,11 @@ export function LibraryPage({ siteContent, actions }) {
       {libraryPayload && (
         <>
           <nav className="library-toc nebula-panel" aria-label={content.tocLabel || "Sommaire des outils"}>
+            <div className="library-toc-heading">
+              <h2>{content.tocTitle || "Sommaire"}</h2>
+              <p>{content.tocDescription || "Accédez directement à un exemple d’outil dans la page."}</p>
+            </div>
+            <div className="library-toc-links">
               {libraryPayload.toolbox.modules.map((module) => {
                 const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
                 const title = module.title || definition.label || "Outil";
@@ -218,6 +223,7 @@ export function LibraryPage({ siteContent, actions }) {
                   </a>
                 );
               })}
+            </div>
           </nav>
           <section className="library-tools" aria-label={content.toolsLabel}>
             {libraryPayload.toolbox.modules.map((module) => (

website/src/styles/_home.scss

@@ -250,14 +250,42 @@ span {
 }
 
 .library-toc {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  gap: var(--space-3);
-  gap: 8px;
   padding: var(--space-4);
   scroll-margin-top: var(--space-5);
 }
 
-.library-toc a {
+.library-toc-heading {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.library-toc-heading h2,
+.library-toc-heading p {
+  margin: 0;
+}
+
+.library-toc-heading h2 {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+}
+
+.library-toc-heading p {
+  max-width: 620px;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.library-toc-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.library-toc-links a {
   display: inline-flex;
   min-width: 0;
   min-height: 40px;
@@ -273,20 +301,20 @@ span {
   text-decoration: none;
 }
 
-.library-toc a:hover,
+.library-toc-links a:hover,
-.library-toc a:focus-visible {
+.library-toc-links a:focus-visible {
   border-color: rgba(246, 196, 83, 0.42);
   background: rgba(246, 196, 83, 0.08);
   color: var(--color-text-primary);
 }
 
-.library-toc .module-icon {
+.library-toc-links .module-icon {
   width: 28px;
   height: 28px;
   border-radius: var(--radius-sm);
 }
 
-.library-toc .module-icon-svg {
+.library-toc-links .module-icon-svg {
   width: 16px;
   height: 16px;
 }