humalis 1.0.4 → 1.1.0

package/dist/cibles/web/ecran.js

@@ -2,6 +2,7 @@ import { verificationsDuChamp, messageEnCode, libellesEnLangues } from '../../i1
 import { titreComplet, adresseImage, sansBarreFinale } from '../publication.js';
 import { sousActions } from '../../ri/actions.js';
 import { nomDeLaCopie, estFichierLocal } from '../../ri/medias.js';
+import { estCombine } from '../../ri/types.js';
 import { simplifier } from '../../analyse/elements.js';
 import { lireCible } from '../../analyse/navigation.js';
 import { Ecrivain } from './ecrivain.js';
@@ -10,6 +11,8 @@ import { WIDGETS_WEB } from './widgets.js';
 import { baliseGraphique } from './graphique.js';
 import { typeTS, typeDe, expression, contenuJSX, condition, ficheAvec } from './valeurs.js';
 import { importsDesInteractions, decrireTouches } from './interactions.js';
+import { colorerCodeHumalis } from '../commun/colorerCode.js';
+import { attributsFrappe } from '../commun/mouvement.js';
 /** Les sortes de champ où l'on écrit une seule ligne : la touche Entrée y envoie le formulaire. */
 const UNE_LIGNE = new Set(['texte', 'email', 'telephone', 'nombre', 'date', 'heure', 'motDePasse', 'adresseWeb']);
 /** Un texte écrit en clair dans du JSX : tel quel, ou entre accolades s'il contient un caractère du JSX. */
@@ -152,7 +155,9 @@ export const RENDU_WEB = {
         ouvrir: (genre, options, classes, ancre) => {
             const toutes = [`humalis-${genre}`, ...options.map((o) => `humalis-${o.nom}-${o.valeur}`), ...classes];
             const balise = genre === 'section' ? 'section' : genre === 'menu' ? 'nav' : 'div';
-            return `<${balise} className="${toutes.join(' ')}"${ancre !== undefined ? ` id=${JSON.stringify(ancre)}` : ''}>`;
+            // « menu repliable » : le bouton « Menu » du petit écran (src/humalis/menu.ts).
+            const repliable = options.some((o) => o.nom === 'menu' && o.valeur === 'repliable');
+            return `<${balise} className="${toutes.join(' ')}"${ancre !== undefined ? ` id=${JSON.stringify(ancre)}` : ''}${repliable ? ' onClick={menuRepliable}' : ''}>${repliable ? '<button type="button" className="humalis-menu-bouton" aria-expanded="false">Menu</button>' : ''}`;
         },
         fermer: (genre) => (genre === 'section' ? '</section>' : genre === 'menu' ? '</nav>' : '</div>'),
     },
@@ -204,6 +209,7 @@ class GenerateurEcran {
     chemins;
     application;
     parametres;
+    listeEnCours;
     contexte = { types: new Map(), champs: new Map(), sortes: new Map() };
     /** Les champs qui ont une sorte ou des options, et le libellé de chaque champ (pour les messages). */
     saisies = new Map();
@@ -325,7 +331,7 @@ class GenerateurEcran {
         for (const g of this.ecran.gestionnaires)
             this.enregistrer(g, []);
         const composant = pascal(this.ecran.nom);
-        const { titre, description } = titreEtDescription(this.ecran);
+        const { titre, description } = titreEtDescription(this.ecran, this.application.langues);
         // Un composant reçoit ses paramètres comme des propriétés React, et ne
         // change pas le titre de la page qui l'affiche.
         const signature = this.parametres
@@ -392,7 +398,9 @@ class GenerateurEcran {
         const lues = [...new Set([...code.matchAll(/\bactuel\.current\.(\w+)/g)].map((m) => m[1]))];
         code = code.replace('  /*ACTUEL*/\n', lues.length > 0 ? `  const actuel = useActuel({ ${lues.join(', ')} });\n` : '');
         // « mouvement est reduit » : suivi en direct (src/humalis/temps.ts).
-        code = code.replace('  /*MOUVEMENT*/\n', /\bmouvementReduit\b/.test(code) ? '  const mouvementReduit = useMouvementReduit();\n' : '');
+        code = code.replace('  /*MOUVEMENT*/\n', (/\bmouvementReduit\b/.test(code) ? '  const mouvementReduit = useMouvementReduit();\n' : '') +
+            // « theme est sombre » : le thème affiché, suivi en direct.
+            (/\bthemeSombre\b/.test(code) ? '  const themeSombre = useThemeSombre();\n' : ''));
         // Sur le téléphone, « confirmer » vient d'un crochet : la question est une fenêtre de l'application.
         code = code.replace('  /*CONFIRMER*/\n', this.rendu.confirmationParCrochet && /\bconfirmer\(/.test(code) ? '  const confirmer = useConfirmer();\n' : '');
         code = code.replace('  /*PLANIFIER*/\n', (/\bplanifier\(/.test(code) ? '  const planifier = usePlanifier();\n' : '') + (/\bderniereRequete\(/.test(code) ? '  const derniereRequete = useDerniere();\n' : ''));
@@ -407,13 +415,16 @@ class GenerateurEcran {
     }
     /** Le premier titre (ou texte) de la page, s'il a des versions : il suit la langue (« t({ fr, en }) »). */
     traduit(genre) {
-        const valeur = this.application.langues ? premiereValeur(genre, this.ecran.vue) : undefined;
+        const valeur = this.application.langues ? premiereValeur(genre, this.ecran.vue, this.application.langues) : undefined;
         return valeur?.type === 'texte' && valeur.versions ? expression(valeur, this.contexte) : undefined;
     }
     // ─── Recensement : champs, cibles des événements, besoins ───────────────
     recenser(noeuds, boucles, formulaire) {
         for (const noeud of noeuds) {
             switch (noeud.type) {
+                case 'codeDocumentation':
+                    this.besoins.messages = true;
+                    break;
                 case 'element':
                     if (noeud.genre === 'champ') {
                         const libelle = texteDeBase(noeud.contenu) ?? noeud.id;
@@ -834,8 +845,8 @@ class GenerateurEcran {
             const code = expression(valeur, this.contexte);
             return complet && site?.nom ? `${code} + ${suffixe()}` : code;
         };
-        const titreCode = enCode(apercu?.titre ?? premiereValeur('titre', this.ecran.vue), true) ?? titreLitteral(titre);
-        const descriptionCode = enCode(apercu?.description ?? premiereValeur('texte', this.ecran.vue)) ??
+        const titreCode = enCode(apercu?.titre ?? premiereValeur('titre', this.ecran.vue, this.application.langues), true) ?? titreLitteral(titre);
+        const descriptionCode = enCode(apercu?.description ?? premiereValeur('texte', this.ecran.vue, this.application.langues)) ??
             (site?.descriptionLangues ? messageEnCode(site.descriptionLangues, chaine) : chaine(site?.description ?? description));
         const chemin = this.chemins.get(this.ecran.nom) ?? `/${simplifier(this.ecran.nom)}`;
         const image = apercu?.image ?? (site?.image !== undefined ? { type: 'texte', parties: [{ texte: site.image }] } : undefined);
@@ -1017,7 +1028,7 @@ class GenerateurEcran {
                     break;
                 case 'copie':
                     // « copier code » : le résultat est dit à la personne, sauf « sans message ».
-                    e.ligne(`await copier(${this.enTexte(action.valeur)}${action.message === null ? '' : `, afficherMessage${action.message === 'Copié' ? '' : `, ${chaine(action.message)}`}`});`);
+                    e.ligne(`await copier(${this.enTexte(action.valeur)}${action.message === null ? '' : `, afficherMessage${action.texte ? `, ${x(action.texte)}` : action.message === 'Copié' ? '' : `, ${chaine(action.message)}`}`});`);
                     break;
                 case 'partage': {
                     // La feuille de partage du système ; sans elle, le lien (ou le texte) est copié.
@@ -1437,6 +1448,50 @@ class GenerateurEcran {
     ecrireVue(e, noeuds) {
         for (const noeud of noeuds) {
             switch (noeud.type) {
+                case 'tableauDocumentation':
+                    if (this.application.rendu) {
+                        const mobile = (valeur) => contenuJSX(valeur, this.contexte)
+                            .replace(/<code className="humalis-code-ligne">/g, '<Text style={{ fontFamily: "monospace" }}>')
+                            .replace(/<span className="humalis-accent">/g, '<Text style={s.accent}>')
+                            .replace(/<\/(code|span)>/g, '</Text>');
+                        e.ligne('<ScrollView horizontal><View>');
+                        e.ligne(`<Text>${mobile(noeud.legende)}</Text>`);
+                        for (const ligne of [noeud.colonnes, ...noeud.rangees]) {
+                            e.ligne('<View style={{ flexDirection: "row" }}>');
+                            for (const cellule of ligne)
+                                e.ligne(`<Text style={{ minWidth: 120 }}>${mobile(cellule)}</Text>`);
+                            e.ligne('</View>');
+                        }
+                        e.ligne('</View></ScrollView>');
+                    }
+                    else {
+                        e.ligne('<div className="humalis-tableau-conteneur"><table><caption>');
+                        e.ligne(contenuJSX(noeud.legende, this.contexte));
+                        e.ligne('</caption><thead><tr>');
+                        for (const cellule of noeud.colonnes)
+                            e.ligne(`<th scope="col">${contenuJSX(cellule, this.contexte)}</th>`);
+                        e.ligne('</tr></thead><tbody>');
+                        for (const ligne of noeud.rangees) {
+                            e.ligne('<tr>');
+                            for (const cellule of ligne)
+                                e.ligne(`<td>${contenuJSX(cellule, this.contexte)}</td>`);
+                            e.ligne('</tr>');
+                        }
+                        e.ligne('</tbody></table></div>');
+                    }
+                    break;
+                case 'codeDocumentation':
+                    if (this.application.rendu)
+                        e.ligne(`<ScrollView horizontal><Text style={{ fontFamily: 'monospace' }}>{${chaine(noeud.code)}}</Text></ScrollView>`);
+                    else {
+                        const copie = this.application.langues ? `t({ fr: 'Copié', en: 'Copied' })` : `'Copié'`;
+                        const libelle = this.application.langues ? `{t({ fr: 'Copier', en: 'Copy' })}` : 'Copier';
+                        const frappe = attributsFrappe(noeud);
+                        const animation = frappe ? ` ${frappe.classe}` : '';
+                        const marques = frappe ? ` data-humalis-frappe="${frappe.frappe}" data-humalis-frappe-cle="${frappe.cle}"` : '';
+                        e.ligne(`<div className="humalis-bloc-code-conteneur"><pre className="humalis-bloc-code${animation}" data-langage=${chaine(noeud.langage ?? '')}${marques}><code dangerouslySetInnerHTML={{ __html: ${chaine(colorerCodeHumalis(noeud.code, noeud.langage))} }} /></pre><button type="button" onClick={() => void copier(${chaine(noeud.code)}, afficherMessage, ${copie})}>${libelle}</button></div>`);
+                    }
+                    break;
                 case 'element':
                     this.ecrireElement(e, noeud);
                     break;
@@ -1500,7 +1555,13 @@ class GenerateurEcran {
                         e.ligne(`{${liste}.map((${variable}, ${index}) => (`);
                         e.indenter(() => {
                             e.ligne(`<Fragment key={${index}}>`);
-                            e.indenter(() => this.ecrireVue(e, contenu));
+                            e.indenter(() => {
+                                if (this.listeEnCours)
+                                    e.ligne(this.application.rendu ? `<View style={{ flexDirection: "row" }}><Text>${this.listeEnCours === 'liste' ? '•' : `{${index} + 1}.`}</Text>` : '<li>');
+                                this.ecrireVue(e, contenu);
+                                if (this.listeEnCours)
+                                    e.ligne(this.application.rendu ? '</View>' : '</li>');
+                            });
                             e.ligne('</Fragment>');
                         });
                         e.ligne('))}');
@@ -1541,6 +1602,40 @@ class GenerateurEcran {
                     break;
                 }
                 case 'bloc':
+                    if (noeud.genre === 'liste' || noeud.genre === 'listeNumerotee') {
+                        if (this.application.rendu) {
+                            e.ligne('<View>');
+                            e.indenter(() => noeud.corps.forEach((enfant, index) => {
+                                if (enfant.type === 'repetition') {
+                                    this.listeEnCours = noeud.genre;
+                                    this.ecrireVue(e, [enfant]);
+                                    this.listeEnCours = undefined;
+                                    return;
+                                }
+                                e.ligne('<View style={{ flexDirection: "row" }}>');
+                                e.ligne(`<Text>${noeud.genre === 'liste' ? '•' : `${index + 1}.`}</Text>`);
+                                this.ecrireVue(e, [enfant]);
+                                e.ligne('</View>');
+                            }));
+                            e.ligne('</View>');
+                            break;
+                        }
+                        const balise = noeud.genre === 'liste' ? 'ul' : 'ol';
+                        e.ligne(`<${balise} className="humalis-liste">`);
+                        e.indenter(() => noeud.corps.forEach((enfant) => {
+                            if (enfant.type === 'repetition') {
+                                this.listeEnCours = noeud.genre;
+                                this.ecrireVue(e, [enfant]);
+                                this.listeEnCours = undefined;
+                                return;
+                            }
+                            e.ligne('<li>');
+                            e.indenter(() => this.ecrireVue(e, [enfant]));
+                            e.ligne('</li>');
+                        }));
+                        e.ligne(`</${balise}>`);
+                        break;
+                    }
                     if (COMPOSITES.has(noeud.genre)) {
                         this.ecrireComposite(e, noeud);
                         break;
@@ -1926,24 +2021,72 @@ function modifiees(actions, noms = new Set()) {
     }
     return noms;
 }
-/** La première valeur d'un élément de ce genre, affiché sans condition (même dans un bloc de mise en page). */
-function premiereValeur(genre, noeuds) {
+/**
+ * « si langue est anglais » : la branche montrée dans la langue `code` ;
+ * rien pour une condition qui ne porte pas sur la langue.
+ */
+function brancheDeLangue(noeud, code) {
+    if (noeud.type !== 'condition')
+        return undefined;
+    const test = noeud.test;
+    if (estCombine(test))
+        return undefined;
+    if (test.gauche.type !== 'variable' || test.gauche.nom !== 'langue' || (test.operateur !== 'egal' && test.operateur !== 'different'))
+        return undefined;
+    const visee = test.droite && texteDeBase(test.droite);
+    if (visee === undefined)
+        return undefined;
+    const vraie = (visee === code) !== (test.operateur === 'different') !== Boolean(test.negation);
+    return vraie ? noeud.alors : noeud.sinon;
+}
+/**
+ * La première valeur d'un élément de ce genre, affiché sans condition (même
+ * dans un bloc de mise en page), dans la langue `code` : avec des langues,
+ * une branche « si langue est … » compte.
+ */
+function premiereValeurEn(genre, noeuds, code) {
     for (const n of noeuds) {
         if (n.type === 'element' && n.genre === genre)
             return n.contenu;
-        if (n.type === 'bloc') {
-            const trouvee = premiereValeur(genre, n.corps);
+        const corps = n.type === 'bloc' ? n.corps : code !== undefined ? brancheDeLangue(n, code) : undefined;
+        if (corps) {
+            const trouvee = premiereValeurEn(genre, corps, code);
             if (trouvee)
                 return trouvee;
         }
     }
     return undefined;
 }
+/**
+ * La première valeur d'un élément de ce genre. Avec des langues, celle de la
+ * langue de base ; si les branches « si langue est … » en montrent une autre
+ * dans une autre langue, elle devient la version de cette langue.
+ */
+function premiereValeur(genre, noeuds, langues) {
+    if (!langues || langues.length === 0)
+        return premiereValeurEn(genre, noeuds);
+    const [base, ...autres] = langues;
+    const valeur = premiereValeurEn(genre, noeuds, base.code);
+    if (valeur?.type !== 'texte')
+        return valeur;
+    const versions = autres.flatMap(({ code }) => {
+        const autre = premiereValeurEn(genre, noeuds, code);
+        if (autre === valeur || autre?.type !== 'texte')
+            return [];
+        return [{ code, parties: autre.versions?.find((v) => v.code === code)?.parties ?? autre.parties }];
+    });
+    if (versions.length === 0)
+        return valeur;
+    // Les versions écrites avec « en anglais » restent, celles des branches les complètent.
+    const ecrites = (valeur.versions ?? []).filter((v) => v.code !== base.code && !versions.some((b) => b.code === v.code));
+    return { ...valeur, versions: [{ code: base.code, parties: valeur.parties }, ...ecrites, ...versions] };
+}
 /**
  * Le titre et la description de la page (décision W7) : le premier titre
  * et le premier texte écrits en clair, à défaut le nom de la page.
  */
-export function titreEtDescription(ecran) {
+export function titreEtDescription(ecran, langues) {
+    const base = langues?.[0]?.code;
     const premier = (genre, noeuds) => {
         for (const n of noeuds) {
             if (n.type === 'element' && n.genre === genre) {
@@ -1951,9 +2094,11 @@ export function titreEtDescription(ecran) {
                 if (texte)
                     return texte;
             }
-            // Toujours affiché : le contenu d'un bloc de mise en page compte aussi.
-            if (n.type === 'bloc') {
-                const texte = premier(genre, n.corps);
+            // Toujours affiché : le contenu d'un bloc de mise en page compte aussi, et
+            // avec des langues, la branche « si langue est … » de la langue de base.
+            const corps = n.type === 'bloc' ? n.corps : base !== undefined ? brancheDeLangue(n, base) : undefined;
+            if (corps) {
+                const texte = premier(genre, corps);
                 if (texte)
                     return texte;
             }

package/dist/cibles/web/interactions.js

@@ -39,12 +39,15 @@ export function fichiersDesInteractions(codes, plateforme = 'web') {
         fichiers.set('voir-plus.ts', plateforme === 'web' ? VOIR_PLUS_TS : VOIR_PLUS_MOBILE);
     if (emploie('deplacer'))
         fichiers.set('deplacer.ts', plateforme === 'web' ? DEPLACER_TS : DEPLACER_MOBILE);
+    if (emploie('menu'))
+        fichiers.set('menu.ts', MENU_TS);
     return fichiers;
 }
 /** Les outils de chaque fichier, pour écrire les imports d'une page. */
 export const OUTILS_INTERACTIONS = {
-    temps: ['useActuel', 'useMinuterie', 'usePlanifier', 'useMouvementReduit', 'useQuandChange', 'useQuandPause', 'useDerniere'],
+    temps: ['useActuel', 'useMinuterie', 'usePlanifier', 'useMouvementReduit', 'useThemeSombre', 'useQuandChange', 'useQuandPause', 'useDerniere'],
     'presse-papier': ['copier', 'partager', 'adresseAbsolue'],
+    menu: ['menuRepliable'],
     clavier: ['useRaccourcis', 'correspond', 'cliquer', 'focaliser'],
     confirmation: ['confirmer', 'useConfirmer'],
     fenetre: ['Fenetre'],
@@ -57,7 +60,9 @@ export function importsDesInteractions(code, dossier, outils = OUTILS_INTERACTIO
     for (const [fichier, noms] of Object.entries(outils)) {
         // « confirmer » vient de useConfirmer() quand la page le déclare (le téléphone).
         const declares = new Set([...code.matchAll(/\bconst (\w+) = use\w+\(/g)].map((m) => m[1]));
-        const employes = noms.filter((n) => !declares.has(n) && new RegExp(n === 'Fenetre' ? '<Fenetre\\b' : `\\b${n}\\(`).test(code));
+        // Fenetre est un composant ; menuRepliable est passé tel quel à onClick.
+        const motif = (n) => (n === 'Fenetre' ? '<Fenetre\\b' : n === 'menuRepliable' ? '\\{menuRepliable\\}' : `\\b${n}\\(`);
+        const employes = noms.filter((n) => !declares.has(n) && new RegExp(motif(n)).test(code));
         if (employes.length)
             lignes.push(`import { ${employes.join(', ')} } from '${dossier}/${fichier}';`);
     }
@@ -71,7 +76,7 @@ export function importsDesInteractions(code, dossier, outils = OUTILS_INTERACTIO
 function tempsTs(plateforme) {
     const web = plateforme === 'web';
     return `import { useCallback, useEffect, useLayoutEffect, useRef, useState${web ? ', useSyncExternalStore' : ''} } from 'react';
-${web ? '' : "import { AccessibilityInfo, AppState } from 'react-native';\n"}
+${web ? '' : "import { AccessibilityInfo, AppState, useColorScheme } from 'react-native';\n"}
 /**
  * Les dernières valeurs de la page, pour ce qui s'exécute plus tard (une
  * minuterie lancée par un clic, le bouton d'un message) : sans cela, il
@@ -195,6 +200,28 @@ export function useMouvementReduit(): boolean {
     // Le prérendu n'écrit aucun mouvement.
     () => false,
   );
+}
+
+/** « theme est sombre » : le thème affiché (choix du visiteur ou du projet, sinon le système), suivi en direct. */
+export function useThemeSombre(): boolean {
+  return useSyncExternalStore(
+    (changement) => {
+      const media = window.matchMedia('(prefers-color-scheme: dark)');
+      media.addEventListener('change', changement);
+      const observateur = new MutationObserver(changement);
+      observateur.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+      return () => {
+        media.removeEventListener('change', changement);
+        observateur.disconnect();
+      };
+    },
+    () => {
+      const choisi = document.documentElement.dataset.theme;
+      return choisi ? choisi === 'sombre' : window.matchMedia('(prefers-color-scheme: dark)').matches;
+    },
+    // Le prérendu ne connaît pas le thème du visiteur.
+    () => false,
+  );
 }`
         : `/** « mouvement est reduit » : la personne a demandé à son téléphone de réduire les animations, suivi en direct. */
 export function useMouvementReduit(): boolean {
@@ -205,6 +232,11 @@ export function useMouvementReduit(): boolean {
     return () => abonnement.remove();
   }, []);
   return reduit;
+}
+
+/** « theme est sombre » : le thème affiché par le téléphone, suivi en direct. */
+export function useThemeSombre(): boolean {
+  return useColorScheme() === 'dark';
 }`}
 
 /**
@@ -1041,3 +1073,18 @@ const CSS_DEPLACER = `.humalis-liste-deplacable { list-style: none; margin: 0; p
 .humalis-insertion-avant { box-shadow: 0 -3px 0 var(--humalis-bleu); }
 .humalis-insertion-apres { box-shadow: 0 3px 0 var(--humalis-bleu); }
 ${CSS_CACHE}`;
+/** `src/humalis/menu.ts` : « menu repliable », le bouton « Menu » d'un petit écran. */
+const MENU_TS = `/**
+ * « menu repliable » : le bouton « Menu » ouvre et ferme les liens (visible
+ * seulement sur un petit écran, par le CSS) ; un lien choisi referme le menu.
+ */
+export function menuRepliable(evenement: { target: EventTarget; currentTarget: EventTarget }): void {
+  const menu = evenement.currentTarget as HTMLElement;
+  const cible = evenement.target as Element;
+  const bouton = menu.querySelector(':scope > .humalis-menu-bouton');
+  const ouvrir = cible.closest('.humalis-menu-bouton') !== null && !menu.hasAttribute('data-ouvert');
+  if (!ouvrir && cible.closest('.humalis-menu-bouton, a') === null) return;
+  menu.toggleAttribute('data-ouvert', ouvrir);
+  bouton?.setAttribute('aria-expanded', String(ouvrir));
+}
+`;

package/dist/cibles/web/projet.js

@@ -98,6 +98,9 @@ export function genererProjetWeb(application, options) {
     }
     if (dispositions.entete || dispositions.pied)
         fichiers.set('src/Disposition.tsx', dispositionTsx(dispositions, application));
+    // Avec un en-tête, le clavier peut sauter directement au contenu de la page.
+    if (dispositions.entete)
+        fichiers.set('src/humalis/aller-au-contenu.tsx', ALLER_AU_CONTENU);
     const pages = application.ecrans.map((ecran) => ({ ecran, page: genererEcran(ecran, chemins, contexte) }));
     session ||= pages.some(({ page }) => page.session);
     // Une page réservée demande la session, même si elle ne la lit pas elle-même.
@@ -433,6 +436,24 @@ ${mouvement ? NETTOYAGE_PRERENDU : ''}};
 `;
 }
 /** Disposition.tsx : l'en-tête et le pied communs autour des pages, qui restent montés quand on change de page. */
+/** `src/humalis/aller-au-contenu.tsx` : le premier arrêt du clavier, qui saute l'en-tête. */
+const ALLER_AU_CONTENU = `/** Le lien « Aller au contenu » : caché tant qu'il n'a pas le focus du clavier, il saute l'en-tête. */
+export default function AllerAuContenu() {
+  return (
+    <a
+      className="humalis-aller-au-contenu"
+      href="#contenu"
+      onClick={(evenement) => {
+        const contenu = document.querySelector('main');
+        if (!contenu) return;
+        evenement.preventDefault();
+        contenu.setAttribute('tabindex', '-1');
+        contenu.focus();
+      }}
+    >Aller au contenu</a>
+  );
+}
+`;
 function dispositionTsx(d, application) {
     const balise = (genre, composant) => {
         const dispo = application.disposition[genre];
@@ -441,12 +462,12 @@ function dispositionTsx(d, application) {
         return `{${genre} && (\n        <${ouvre} className="${classes}">\n          <${composant} />\n        </${ferme}>\n      )}`;
     };
     return `import { Outlet } from 'react-router';
-${d.entete ? `import ${d.entete} from './composants/${d.entete}';\n` : ''}${d.pied ? `import ${d.pied} from './composants/${d.pied}';\n` : ''}
+${d.entete ? `import AllerAuContenu from './humalis/aller-au-contenu';\nimport ${d.entete} from './composants/${d.entete}';\n` : ''}${d.pied ? `import ${d.pied} from './composants/${d.pied}';\n` : ''}
 /** L'en-tête et le pied communs à toutes les pages : montés une fois, ils restent là quand on change de page. */
 export default function Disposition({ entete = true, pied = true }: { entete?: boolean; pied?: boolean }) {
   return (
     <>
-      ${d.entete ? balise('entete', d.entete) : '{entete && null}'}
+      ${d.entete ? `{entete && <AllerAuContenu />}\n      ${balise('entete', d.entete)}` : '{entete && null}'}
       <Outlet />
       ${d.pied ? balise('pied', d.pied) : '{pied && null}'}
     </>
@@ -512,6 +533,12 @@ ${session ? "import { Session } from './humalis/session';\n" : ''}${partage ? "i
 ${dispositions.entete || dispositions.pied ? "import Disposition from './Disposition';\n" : ''}${imports}
 import './humalis/styles.css';
 ${mouvement ? "import { observerLeDefilement } from './humalis/mouvement';\n" : ''}${feuilles.map((f) => `import './styles/${f}';\n`).join('')}
+// Un hébergeur statique sert /documentation/index.html pour /documentation/ :
+// le routeur lit l'adresse sans « index.html », comme le dossier.
+if (/\\/index\\.html$/.test(location.pathname)) {
+  history.replaceState(history.state, '', location.pathname.replace(/index\\.html$/, '') + location.search + location.hash);
+}
+
 createRoot(document.getElementById('racine')!).render(
   <StrictMode>
     <BrowserRouter>

package/dist/cibles/web/theme.js

@@ -102,14 +102,23 @@ export const SCRIPT_THEME = `try{var t=localStorage.getItem('${CLE_THEME}');if(t
 /** `src/humalis/theme.ts` du projet web : « changer theme par … ». */
 export function themeTs(defaut) {
     return `/** Le thème choisi par le visiteur (« changer theme par sombre »), gardé dans le navigateur. */
-export type Theme = 'clair' | 'sombre' | 'automatique';
+export type Theme = 'clair' | 'sombre' | 'automatique' | 'bascule';
 
 const CLE = '${CLE_THEME}';
 /** Le mode du projet quand le visiteur n'a rien choisi (bloc « theme : »). */
 const PAR_DEFAUT: 'clair' | 'sombre' | undefined = ${defaut ? `'${defaut}'` : 'undefined'};
 
-export function definirTheme(theme: Theme): void {
+/** Le thème affiché : le choix du visiteur ou du projet, sinon celui du système. */
+function themeAffiche(): 'clair' | 'sombre' {
+  const choisi = document.documentElement.dataset.theme;
+  if (choisi === 'clair' || choisi === 'sombre') return choisi;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'sombre' : 'clair';
+}
+
+export function definirTheme(demande: Theme): void {
   const racine = document.documentElement;
+  // « basculer theme » : l'inverse de ce qu'on voit.
+  const theme = demande === 'bascule' ? (themeAffiche() === 'sombre' ? 'clair' : 'sombre') : demande;
   try {
     if (theme === 'automatique') localStorage.removeItem(CLE);
     else localStorage.setItem(CLE, theme);

package/dist/cibles/web/valeurs.js

@@ -38,6 +38,7 @@ export function typeDe(valeur, contexte) {
         case 'utilisateur':
         case 'etatRequete':
         case 'mouvementReduit':
+        case 'themeSombre':
             return { genre: 'booleen' };
         case 'erreurRequete':
             return { genre: 'texte' };
@@ -150,6 +151,9 @@ export function expression(valeur, contexte) {
         case 'mouvementReduit':
             // « réduire les animations » du système, suivi en direct (src/humalis/temps.ts).
             return 'mouvementReduit';
+        case 'themeSombre':
+            // Le thème affiché, suivi en direct (src/humalis/temps.ts).
+            return 'themeSombre';
         case 'etatRequete':
             // L'état de la requête de la variable (src/humalis/serveur.ts) : chargement, erreur ou introuvable.
             return `${camel(valeur.variable)}Req.statut === '${valeur.etat}'`;
@@ -187,6 +191,19 @@ function texteTS(parties, contexte, langue) {
 }
 /** Le contenu d'un élément dans du JSX : `Bienvenue`, `{nom}`, `{panier.join(', ')}`. */
 export function contenuJSX(valeur, contexte) {
+    if (valeur.type === 'texte' && (valeur.parties.some((p) => 'texte' in p && (p.accent || p.code)) || valeur.versions?.some((v) => v.parties.some((p) => 'texte' in p && (p.accent || p.code))))) {
+        const enfants = (parties) => parties.map((p) => {
+            if ('texte' in p)
+                return p.accent
+                    ? `<span className="humalis-accent">{${chaine(p.texte)}}</span>`
+                    : p.code ? `<code className="humalis-code-ligne">{${chaine(p.texte)}}</code>`
+                        : `{${chaine(p.texte)}}`;
+            return contenuJSX({ type: 'texte', parties: [p] }, contexte);
+        }).join('');
+        if (valeur.versions)
+            return valeur.versions.map((v) => `{langue === ${chaine(v.code)} && <>${enfants(v.parties)}</>}`).join('');
+        return enfants(valeur.parties);
+    }
     if (valeur.type === 'texte' && !valeur.versions && valeur.parties.every((p) => 'texte' in p)) {
         const texte = valeur.parties.map((p) => ('texte' in p ? p.texte : '')).join('');
         // Les caractères qui ont un sens en JSX passent par une chaîne.

package/dist/i18n/messages.js

@@ -65,8 +65,10 @@ export const MESSAGES = [
     { fr: "Choisissez d'abord un fichier.", en: 'Choose a file first.' },
     { fr: 'AAAA-MM-JJ', en: 'YYYY-MM-DD' },
     { fr: 'Fermer le message', en: 'Close the message' },
+    { fr: 'Aller au contenu', en: 'Skip to content' },
     { fr: 'Fermer', en: 'Close' },
     { fr: 'Copié', en: 'Copied' },
+    { fr: 'Copier', en: 'Copy' },
     { fr: 'Copie impossible.', en: 'Could not copy.' },
     { fr: 'Lien copié : il ne reste qu’à le coller.', en: 'Link copied: paste it wherever you like.' },
     { fr: 'Texte copié : il ne reste qu’à le coller.', en: 'Text copied: paste it wherever you like.' },