{
  "examples": {
    "hero": {
      "title": "Galerie d'Exemples",
      "subtitle": "Découvrez comment les directives NoJS remplacent le boilerplate et donnent vie aux layouts en utilisant uniquement des attributs HTML sémantiques."
    },
    "cat1": { "title": "État & Binding", "subtitle": "Gestion d'état réactif avec mises à jour automatiques du DOM — sans câblage manuel." },
    "cat2": { "title": "Conditions & Boucles", "subtitle": "Contrôlez le rendu avec des attributs déclaratifs. Affichez, masquez, itérez et branchez — tout en HTML." },
    "cat3": { "title": "Récupération de Données", "subtitle": "Verbes HTTP intégrés avec états de chargement, gestion d'erreurs et cache — zéro boilerplate." },
    "cat4": { "title": "Routes & Templates", "subtitle": "Navigation client-side et composition de templates réutilisables sans étape de build." },
    "counter": {
      "badge": "Interactif",
      "name": "Compteur Simple",
      "desc": "Compteur réactif local. Se met à jour automatiquement lorsque les variables changent. Met en pause l'exécution et met en évidence les états proprement."
    },
    "binding": {
      "badge": "Bidirectionnel",
      "name": "Input Binding en Direct",
      "desc": "Liez un input à l'état avec <code>model</code> et affichez-le ailleurs avec <code>bind</code>. Les changements se propagent instantanément."
    },
    "computed": {
      "badge": "Dérivé",
      "name": "Valeurs Calculées",
      "desc": "Définissez des valeurs dérivées avec <code>computed</code> et <code>expr</code>. Elles se recalculent automatiquement quand les dépendances changent."
    },
    "search": {
      "badge": "Boucles & Filtres",
      "name": "Liste de Recherche Filtrée",
      "desc": "Filtrez les éléments d'un tableau de manière interactive en utilisant des bindings bidirectionnels d'input (<code>model</code>) et des boucles (<code>foreach</code>)."
    },
    "todo": {
      "badge": "CRUD",
      "name": "Liste de Tâches",
      "desc": "Ajoutez et supprimez des éléments avec <code>foreach</code>, <code>on:click</code> et les méthodes de tableau. CRUD complet en HTML pur."
    },
    "switchCase": {
      "badge": "Branchement",
      "name": "Switch / Case",
      "desc": "Affichez du contenu différent selon une valeur avec <code>switch</code>, <code>case</code> et <code>default</code> — comme un switch natif."
    },
    "fetch": {
      "badge": "HTTP / Fetching",
      "name": "API Fetcher avec Skeleton",
      "desc": "Récupérez et affichez des données d'une API. L'élément skeleton désigné maintient l'espace du layout et disparaît automatiquement à l'arrivée des données."
    },
    "formPost": {
      "badge": "Formulaires",
      "name": "Soumission de Formulaire",
      "desc": "Envoyez des données de formulaire avec <code>post</code> et <code>body</code>. Combinez avec <code>model</code> pour des champs réactifs et la validation inline."
    },
    "pagination": {
      "badge": "Pagination",
      "name": "Liste Charger Plus",
      "desc": "Paginez les résultats d'API avec <code>get-trigger</code>, <code>get-page</code> et <code>get-insert</code>. Ajoutez de nouveaux éléments au clic."
    },
    "query": {
      "badge": "HTTP / QUERY",
      "name": "Recherche avec QUERY",
      "desc": "Envoyez des filtres de recherche complexes avec <code>query</code> — une lecture HTTP sûre et cacheable qui transporte un body de requête (RFC 10008). Les champs du formulaire deviennent le body et les résultats s'affichent de façon réactive ; aucun token CSRF n'est ajouté."
    },
    "router": {
      "badge": "SPA",
      "name": "Routeur Basique",
      "desc": "Définissez des routes avec <code>route</code> et affichez-les dans <code>route-view</code>. Les liens actifs sont surlignés avec <code>route-active</code>."
    },
    "templates": {
      "badge": "Composition",
      "name": "Templates Réutilisables",
      "desc": "Composez l'UI avec <code>use</code> et <code>&lt;slot&gt;</code>. Passez des données via <code>state</code> — comme des composants, mais juste des templates HTML."
    },
    "dynamicStyles": {
      "badge": "Styles",
      "name": "Classes & Styles Dynamiques",
      "desc": "Basculez les classes avec <code>class-*</code> et définissez les styles inline avec <code>style-*</code>. Les deux réagissent automatiquement aux changements d'état."
    }
  }
}