humalis 1.0.3 → 1.1.0

package/dist/analyse/langues.js

@@ -55,8 +55,18 @@ function textesDesOptions(instruction, vus) {
             vus.push(serie.texteNom ? plat(serie.texteNom) : litteralDe(serie.nom, serie.ligne));
     }
 }
-/** Les textes que la personne voit : contenus d'éléments, titres de blocs, messages, aperçu. */
-function textesVisibles(instructions, vus) {
+/** « si langue est anglais : » (ou « n'est pas ») : ses deux branches sont chacune écrites dans une seule langue. */
+const testeLaLangue = (instruction) => {
+    if (instruction.type !== 'Condition')
+        return false;
+    const test = instruction.test;
+    return test.type === 'Comparaison' && test.gauche.type === 'Reference' && test.gauche.nom === 'langue' && test.droite?.type === 'Reference' && langueDuMot(test.droite.nom) !== undefined;
+};
+/**
+ * Les textes que la personne voit : contenus d'éléments, titres de blocs, messages, aperçu.
+ * Ceux d'une branche « si langue est … » vont aussi dans `uneLangue` : ils n'ont pas à être traduits.
+ */
+function textesVisibles(instructions, vus, uneLangue) {
     const ajouter = (e) => {
         if (e?.type === 'Chaine')
             vus.push(e);
@@ -86,12 +96,21 @@ function textesVisibles(instructions, vus) {
             ajouter(instruction.titre);
         for (const cle of ['corps', 'alors', 'sinon']) {
             const enfants = instruction[cle];
-            if (Array.isArray(enfants))
-                textesVisibles(enfants, vus);
+            if (!Array.isArray(enfants))
+                continue;
+            if (cle !== 'corps' && uneLangue && testeLaLangue(instruction)) {
+                const dedans = [];
+                textesVisibles(enfants, dedans, uneLangue);
+                for (const texte of dedans)
+                    uneLangue.add(texte);
+                vus.push(...dedans);
+            }
+            else
+                textesVisibles(enfants, vus, uneLangue);
         }
         if (instruction.type === 'Selon')
             for (const cas of instruction.cas)
-                textesVisibles(cas.corps, vus);
+                textesVisibles(cas.corps, vus, uneLangue);
     }
 }
 /** Tous les littéraux de texte d'un arbre, où qu'ils soient. */
@@ -235,17 +254,18 @@ export function analyserLangues(programme, diagnostics) {
     }
     // Les textes visibles : ceux des pages, des options et du bloc « site ».
     const visibles = [];
+    const uneLangue = new Set();
     const pages = programme.pages;
     for (const page of pages) {
-        textesVisibles(page.corps, visibles);
+        textesVisibles(page.corps, visibles, uneLangue);
         if (page.apercu)
-            textesVisibles([page.apercu], visibles);
+            textesVisibles([page.apercu], visibles, uneLangue);
     }
     for (const disposition of [programme.entete, programme.pied])
         if (disposition)
-            textesVisibles(disposition.corps, visibles);
+            textesVisibles(disposition.corps, visibles, uneLangue);
     for (const composant of programme.composants)
-        textesVisibles(composant.corps, visibles);
+        textesVisibles(composant.corps, visibles, uneLangue);
     for (const cle of ['nom', 'description']) {
         const valeur = programme.site?.[cle];
         if (valeur !== undefined)
@@ -298,7 +318,7 @@ export function analyserLangues(programme, diagnostics) {
     }
     // Les textes visibles sans version dans une langue déclarée.
     for (const texte of visibles) {
-        if (!aDesLettres(texte.parties))
+        if (!aDesLettres(texte.parties) || uneLangue.has(texte) || texte.sansTraduction)
             continue;
         const cle = texteSource(texte.parties);
         for (const langue of autres) {

package/dist/analyse/medias.js

@@ -27,6 +27,9 @@ export function verifierMouvement(styles, genre, dansFormulaire, ligne, s) {
         s.erreur('« au defilement » suit le nom d’une animation : « animation montee au defilement ».', ligne);
         return false;
     }
+    if (animation.cascade && !['bloc', 'section', 'ligne', 'colonne', 'grille'].includes(genre)) {
+        s.erreur('« en cascade » fait apparaître les enfants d’un bloc l’un après l’autre : il s’écrit sur un bloc (section, bloc, ligne, colonne ou grille).', ligne);
+    }
     if (genre === 'champ' || genre === 'formulaire' || dansFormulaire) {
         s.erreur('pas d’animation sur un champ, ni dans un formulaire : un champ qui bouge pendant qu’on écrit gêne la saisie.', ligne);
     }
@@ -191,7 +194,7 @@ function verifierReglagesGraphique(g, s) {
                 s.erreur(couleur.erreur, ligne);
                 continue;
             }
-            const mode = ['clair', 'sombre'].find((m) => contraste(couleur[m], FOND_PAGE[m]) < 3);
+            const mode = s.modes.find((m) => contraste(couleur[m], FOND_PAGE[m]) < 3);
             if (mode) {
                 const rapport = contraste(couleur[mode], FOND_PAGE[mode]).toFixed(1).replace('.', ',');
                 s.avertissement(`la couleur « ${couleur.nom} » se voit mal sur le fond de la page en mode ${mode} (contraste ${rapport} pour 1, il en faut au moins 3) : choisissez une couleur plus ${mode === 'clair' ? 'foncée' : 'claire'}.`, ligne);

package/dist/analyse/navigation.js

@@ -1,5 +1,6 @@
 import { simplifier } from './elements.js';
 import { proposerNom } from './suggestions.js';
+import { pascal } from '../cibles/web/noms.js';
 const SCHEMAS_PERMIS = ['http', 'https', 'mailto', 'tel'];
 /** Vrai si l'adresse est un schéma permis pour un lien externe (http, https, mailto, tel). */
 export function estAdresseExterne(valeur) {
@@ -88,6 +89,16 @@ export function analyserNavigation(programme, diagnostics) {
             }
         }
     }
+    // Une page devient un composant React nommé comme elle (« bac_a_sable » → BacASable) :
+    // un composant du même nom serait caché par la page qui l'affiche.
+    const composants = new Map([...programme.composants, ...programme.composantsReact].flatMap((c) => [[c.nom, c.nom], [pascal(c.nom), c.nom]]));
+    for (const page of programme.pages) {
+        const produit = pascal(page.nom);
+        const composant = composants.get(produit);
+        if (composant !== undefined) {
+            erreur(`la page « ${page.nom} » et le composant « ${composant} » auraient le même nom dans le code produit (${produit}) : renommez l'un des deux (par exemple le composant « ${composant}Bloc »).`, page.ligne);
+        }
+    }
     analyserSousPages(programme, erreur);
     analyserAncres(programme, diagnostics, erreur);
 }
@@ -228,4 +239,28 @@ function analyserAncres(programme, diagnostics, erreur) {
                 verifier(page, i.cible, i.ligne);
         });
     }
+    // L'en-tête et le pied sont sur chaque page : « carte#desserts » se vérifie comme ailleurs ;
+    // « #desserts » vise la page affichée, qui change : il faut au moins une page qui l'ait.
+    for (const disposition of [programme.entete, programme.pied]) {
+        if (!disposition)
+            continue;
+        const de = disposition.genre === 'entete' ? "de l'en-tête" : 'du pied de page';
+        parcourir(disposition.corps, (i) => {
+            if (i.type !== 'Element' || i.cible === undefined)
+                return;
+            const lue = lireCible(i.cible);
+            if (lue.ancre === undefined)
+                return;
+            if (lue.page !== undefined && lue.page !== '') {
+                const visee = pages.get(lue.page);
+                if (visee)
+                    verifier(visee, i.cible, i.ligne);
+                return;
+            }
+            const montrees = programme.pages.filter((p) => !(disposition.genre === 'entete' ? p.sansEntete : p.sansPied) && p.parametres.length === 0);
+            if (!montrees.some((p) => ancres.get(p.nom)?.includes(lue.ancre))) {
+                erreur(`l'ancre « ${lue.ancre} » ${de} n'existe dans aucune page : écrivez avec ancre "${lue.ancre}" sur l'élément ou le bloc où le lien doit mener, ou écrivez le nom de la page (par exemple "accueil#${lue.ancre}").`, i.ligne);
+            }
+        });
+    }
 }

package/dist/analyse/niveaux.js

@@ -0,0 +1,33 @@
+export function niveauxDesSousTitres(instructions, parent = 1) {
+    let dernier = parent;
+    const parcourir = (enfants) => {
+        for (const instruction of enfants) {
+            if (instruction.type === 'Element' && instruction.element === 'titre')
+                dernier = 1;
+            else if (instruction.type === 'Element' && instruction.element === 'soustitre') {
+                if (instruction.niveau === undefined) {
+                    const niveau = Math.min(parent + 1, 6);
+                    if (niveau !== 2)
+                        instruction.niveau = niveau;
+                    dernier = niveau;
+                }
+                else
+                    dernier = instruction.niveau;
+            }
+            else if (instruction.type === 'Bloc')
+                niveauxDesSousTitres(instruction.corps, dernier);
+            else {
+                // Les branches d'une condition, le corps d'une boucle ou d'un formulaire : le même niveau.
+                for (const cle of ['corps', 'alors', 'sinon']) {
+                    const suite = instruction[cle];
+                    if (Array.isArray(suite) && instruction.type !== 'Evenement')
+                        parcourir(suite);
+                }
+                if (instruction.type === 'Selon')
+                    for (const cas of instruction.cas)
+                        parcourir(cas.corps);
+            }
+        }
+    };
+    parcourir(instructions);
+}

package/dist/analyse/noms.js

@@ -12,7 +12,7 @@ export function avertirNomsDuLangage(programme) {
     const diagnostics = [];
     const avertir = (nom, ligne) => {
         const canonique = formeCanonique(nom);
-        if (canonique && MOTS_CONTEXTUELS.has(canonique)) {
+        if (canonique && canonique !== 'liste' && MOTS_CONTEXTUELS.has(canonique)) {
             diagnostics.push({
                 gravite: 'avertissement',
                 message: `la variable « ${nom} » porte le nom d'un mot du langage ; c'est permis, mais cela peut prêter à confusion.`,

package/dist/analyse/site.js

@@ -1,16 +1,36 @@
+import { langueDuMot } from '../i18n/langues.js';
 /** Le texte d'un littéral sans « {…} », sinon `undefined`. */
 export function texteLitteral(expression) {
     if (expression?.type !== 'Chaine' || !expression.parties.every((p) => p.type === 'texte'))
         return undefined;
     return expression.parties.map((p) => p.valeur).join('');
 }
-/** Le premier « titre » ou « texte » écrit dans la page, même dans un bloc de mise en page. */
-function premier(genre, instructions) {
+/**
+ * « si langue est anglais » : vrai si le test est vrai dans la langue `code`,
+ * faux sinon ; `undefined` pour un test qui ne porte pas sur la langue.
+ */
+function testDeLangue(test, code) {
+    if (test.type !== 'Comparaison' || test.gauche.type !== 'Reference' || test.gauche.nom !== 'langue' || test.droite?.type !== 'Reference')
+        return undefined;
+    if (test.operateur !== 'egal' && test.operateur !== 'different')
+        return undefined;
+    const langue = langueDuMot(test.droite.nom);
+    if (!langue)
+        return undefined;
+    return (langue.code === code) !== (test.operateur === 'different') !== Boolean(test.negation);
+}
+/**
+ * Le premier « titre » ou « texte » écrit dans la page, même dans un bloc de mise en page.
+ * Avec des langues, une branche « si langue est … » compte : celle de la langue de base.
+ */
+function premier(genre, instructions, langueDeBase) {
     for (const instruction of instructions) {
         if (instruction.type === 'Element' && instruction.element === genre)
             return instruction.contenu;
-        if (instruction.type === 'Bloc') {
-            const trouve = premier(genre, instruction.corps);
+        const vraie = instruction.type === 'Condition' && langueDeBase !== undefined ? testDeLangue(instruction.test, langueDeBase) : undefined;
+        const corps = instruction.type === 'Bloc' ? instruction.corps : instruction.type === 'Condition' && vraie !== undefined ? (vraie ? instruction.alors : instruction.sinon) : undefined;
+        if (corps) {
+            const trouve = premier(genre, corps, langueDeBase);
             if (trouve)
                 return trouve;
         }
@@ -18,10 +38,10 @@ function premier(genre, instructions) {
     return undefined;
 }
 /** Le titre et la description propres à la page : son aperçu, sinon son premier titre et son premier texte. */
-export function apercuDeLaPage(page) {
+export function apercuDeLaPage(page, langueDeBase) {
     return {
-        titre: page.apercu?.titre ?? premier('titre', page.corps),
-        description: page.apercu?.description ?? premier('texte', page.corps),
+        titre: page.apercu?.titre ?? premier('titre', page.corps, langueDeBase),
+        description: page.apercu?.description ?? premier('texte', page.corps, langueDeBase),
     };
 }
 export function analyserPublication(programme, diagnostics) {
@@ -43,10 +63,12 @@ export function analyserPublication(programme, diagnostics) {
         avertir(`l'image de partage « ${site.image} » est sur un autre site : si elle disparaît, l'aperçu des liens du site la perd. Préférez un fichier du projet.`, site.lignes.image ?? site.ligne);
     }
     const titres = new Map();
+    const premiereLangue = programme.langues?.langues[0];
+    const langueDeBase = premiereLangue ? langueDuMot(premiereLangue.mot)?.code : undefined;
     for (const page of programme.pages) {
         if (page.nom === 'introuvable')
             continue;
-        const { titre, description } = apercuDeLaPage(page);
+        const { titre, description } = apercuDeLaPage(page, langueDeBase);
         const ligneApercu = page.apercu?.ligne ?? page.ligne;
         const titreLu = texteLitteral(titre);
         const descriptionLue = texteLitteral(description);

package/dist/cibles/commun/colorerCode.js

@@ -0,0 +1,59 @@
+import { analyser } from '../../lexer/lexer.js';
+const echapper = (texte) => texte.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+/** Colore un exemple Humalis valide ; un exemple incomplet reste lisible sans couleur. */
+export function colorerCodeHumalis(code, langage) {
+    if (langage !== 'humalis')
+        return echapper(code);
+    try {
+        const tokens = analyser(code);
+        const lignes = code.split('\n');
+        const debuts = [];
+        let offset = 0;
+        for (const ligne of lignes) {
+            debuts.push(offset);
+            offset += ligne.length + 1;
+        }
+        const plages = [];
+        for (const token of tokens) {
+            if (!['MOT_CLE', 'CHAINE', 'NOMBRE'].includes(token.type))
+                continue;
+            const debut = debuts[token.ligne - 1] + token.colonne - 1;
+            let fin = debut + (token.original ?? token.valeur).length;
+            if (token.type === 'CHAINE') {
+                fin = debut + 1;
+                while (fin < code.length) {
+                    if (code[fin] === '"' && code[fin - 1] !== '\\') {
+                        fin++;
+                        break;
+                    }
+                    fin++;
+                }
+            }
+            plages.push({ debut, fin, classe: token.type === 'MOT_CLE' ? 'mot' : token.type === 'CHAINE' ? 'texte' : 'nombre' });
+        }
+        for (let index = 0; index < lignes.length; index++) {
+            const ligne = lignes[index];
+            for (let colonne = 0; colonne < ligne.length; colonne++) {
+                const debut = debuts[index] + colonne;
+                if (ligne[colonne] === '#' && !plages.some((p) => p.debut <= debut && debut < p.fin)) {
+                    plages.push({ debut, fin: debuts[index] + ligne.length, classe: 'commentaire' });
+                    break;
+                }
+            }
+        }
+        plages.sort((a, b) => a.debut - b.debut);
+        let rendu = '';
+        let position = 0;
+        for (const plage of plages) {
+            if (plage.debut < position)
+                continue;
+            rendu += echapper(code.slice(position, plage.debut));
+            rendu += `<span class="humalis-code-${plage.classe}">${echapper(code.slice(plage.debut, plage.fin))}</span>`;
+            position = plage.fin;
+        }
+        return rendu + echapper(code.slice(position));
+    }
+    catch {
+        return echapper(code);
+    }
+}

package/dist/cibles/commun/mouvement.js

@@ -31,8 +31,20 @@ function classesUtilisees(codes) {
             trouvees.add(`${m[1]}-${m[2]}`);
     return trouvees;
 }
+/**
+ * Les attributs d'un bloc « code … avec animation frappe » : sa classe, le moment de la frappe et une
+ * clé stable (la ligne et une empreinte du code), pour ne pas refaire la frappe quand la page se redessine.
+ */
+export function attributsFrappe(bloc) {
+    if (!bloc.frappe)
+        return undefined;
+    let empreinte = 0;
+    for (const lettre of bloc.code)
+        empreinte = (empreinte * 31 + lettre.charCodeAt(0)) >>> 0;
+    return { classe: 'humalis-animation-frappe', frappe: bloc.frappe, cle: `${bloc.ligne}-${empreinte.toString(36)}` };
+}
 /** Vrai si une page anime un élément « au defilement » (l'observateur doit alors être écrit). */
-export const animeAuDefilement = (codes) => codes.some((c) => c.includes('humalis-animation-defilement'));
+export const animeAuDefilement = (codes) => codes.some((c) => c.includes('humalis-animation-defilement') || c.includes('humalis-animation-frappe'));
 /** Le CSS du mouvement utilisé, rangé dans le bloc « no-preference » ; une chaîne vide s'il n'y en a pas. */
 export function cssMouvement(codes) {
     const utilisees = classesUtilisees(codes);
@@ -53,6 +65,15 @@ export function cssMouvement(codes) {
             regles.push('.humalis-animation-defilement:not([data-humalis-vu]) { animation: none; }');
             regles.push('.humalis-js .humalis-animation-defilement:not([data-humalis-vu]) { opacity: 0; }');
         }
+        else if (option === 'animation' && valeur === 'frappe') {
+            // « code … avec animation frappe » : le vrai code reste en place mais transparent (lecteurs d'écran,
+            // copie, taille du bloc) ; le script pose par-dessus une copie qui s'écrit lettre par lettre.
+            regles.push('.humalis-animation-frappe { position: relative; }');
+            regles.push('.humalis-js .humalis-animation-frappe:not([data-humalis-tape="fini"]) > code:not(.humalis-frappe-copie), .humalis-js .humalis-animation-frappe:not([data-humalis-tape="fini"]) > code:not(.humalis-frappe-copie) * { color: transparent; }');
+            regles.push('.humalis-frappe-copie { position: absolute; inset: 0; padding: inherit; overflow: hidden; pointer-events: none; }');
+            regles.push('.humalis-frappe-copie::after { content: ""; display: inline-block; width: 0.55em; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: currentColor; animation: humalis-curseur 1s steps(1) infinite; }');
+            regles.push('@keyframes humalis-curseur { 50% { opacity: 0; } }');
+        }
         else if (option === 'duree' && DUREES[valeur]) {
             regles.push(`${selecteur} { --humalis-duree: ${DUREES[valeur]}; }`);
         }
@@ -71,6 +92,16 @@ export function cssMouvement(codes) {
             regles.push(`${selecteur}:hover, ${selecteur}:focus-within, ${selecteur}:active { transform: scale(1.03); }`);
         }
     }
+    // « en cascade » : le bloc reste en place, ses enfants s'animent l'un après l'autre (80 ms d'écart).
+    if (utilisees.has('animation-cascade')) {
+        regles.push('.humalis-animation-cascade.humalis-animation-cascade { animation: none; }');
+        for (const valeur of Object.keys(ENTREES).filter((v) => utilisees.has(`animation-${v}`))) {
+            regles.push(`.humalis-animation-cascade.humalis-animation-${valeur} > * { animation: humalis-${valeur} var(--humalis-duree, 300ms) ease-out var(--humalis-delai, 0ms) backwards; }`);
+        }
+        for (let rang = 2; rang <= 12; rang++)
+            regles.push(`.humalis-animation-cascade > :nth-child(${rang}) { --humalis-delai: ${(rang - 1) * 80}ms; }`);
+        regles.push('.humalis-animation-cascade:not([data-humalis-vu]) > * { animation: none; }');
+    }
     if (regles.length === 0)
         return '';
     return `\n/* Le mouvement : seulement si l'appareil ne demande pas de réduire les animations. */\n${REQUETE_MOUVEMENT} {\n${regles.map((r) => `  ${r}`).join('\n')}\n}\n`;
@@ -127,10 +158,73 @@ export const OBSERVATEUR_DEFILEMENT = `function observerLeDefilement() {
   if (!('IntersectionObserver' in window)) return;
   const reduire = matchMedia('(prefers-reduced-motion: reduce)');
   const montrer = (element) => element.setAttribute('data-humalis-vu', '');
+  // « code … avec animation frappe » : une copie du code s'écrit par-dessus le vrai, puis s'efface.
+  // Chaque bloc garde où il en est : redessiné en cours de frappe, il reprend au même endroit ;
+  // déjà tapé (un retour sur la page), il est montré entier tout de suite.
+  const etats = new Map();
+  const taper = (pre) => {
+    const code = pre.querySelector(':scope > code');
+    const cle = pre.getAttribute('data-humalis-frappe-cle');
+    const etat = etats.get(cle) ?? { ecrites: 0, fini: false };
+    etats.set(cle, etat);
+    if (!code || reduire.matches || etat.fini) {
+      pre.setAttribute('data-humalis-tape', 'fini');
+      return;
+    }
+    const copie = code.cloneNode(true);
+    copie.className = 'humalis-frappe-copie';
+    copie.setAttribute('aria-hidden', 'true');
+    const morceaux = [];
+    const parcours = document.createTreeWalker(copie, NodeFilter.SHOW_TEXT);
+    while (parcours.nextNode()) {
+      const noeud = parcours.currentNode;
+      morceaux.push([noeud, noeud.data]);
+      noeud.data = '';
+    }
+    pre.append(copie);
+    pre.setAttribute('data-humalis-tape', 'en-cours');
+    // Les lettres déjà tapées sur le bloc d'avant reviennent d'un coup.
+    let deja = etat.ecrites;
+    for (const morceau of morceaux) {
+      const part = morceau[1].slice(0, deja);
+      morceau[0].data = part;
+      deja -= part.length;
+    }
+    // Une lettre toutes les 30 ms au plus, et pas plus de 5 secondes en tout ; une pause en fin de ligne.
+    const total = morceaux.reduce((somme, morceau) => somme + morceau[1].length, 0);
+    const pas = Math.max(8, Math.min(30, 5000 / Math.max(total, 1)));
+    let rang = 0;
+    let position = 0;
+    for (let reste = etat.ecrites; rang < morceaux.length && reste > 0; ) {
+      const pris = Math.min(reste, morceaux[rang][1].length);
+      reste -= pris;
+      if (pris === morceaux[rang][1].length) rang++;
+      else position = pris;
+    }
+    const suivante = () => {
+      if (!copie.isConnected) return;
+      while (rang < morceaux.length && position >= morceaux[rang][1].length) {
+        rang++;
+        position = 0;
+      }
+      if (rang >= morceaux.length || reduire.matches) {
+        etat.fini = true;
+        copie.remove();
+        pre.setAttribute('data-humalis-tape', 'fini');
+        return;
+      }
+      const lettre = morceaux[rang][1][position++];
+      morceaux[rang][0].data += lettre;
+      etat.ecrites++;
+      setTimeout(suivante, lettre === '\\n' ? pas * 6 : pas);
+    };
+    suivante();
+  };
   const observateur = new IntersectionObserver((entrees) => {
     for (const entree of entrees) {
       if (!entree.isIntersecting) continue;
-      montrer(entree.target);
+      if (entree.target.hasAttribute('data-humalis-frappe')) taper(entree.target);
+      else montrer(entree.target);
       observateur.unobserve(entree.target);
     }
   });
@@ -139,6 +233,12 @@ export const OBSERVATEUR_DEFILEMENT = `function observerLeDefilement() {
       if (reduire.matches) montrer(element);
       else observateur.observe(element);
     }
+    for (const pre of document.querySelectorAll('[data-humalis-frappe]:not([data-humalis-tape])')) {
+      if (pre.getAttribute('data-humalis-frappe') === 'defilement' && !reduire.matches) {
+        pre.setAttribute('data-humalis-tape', 'attente');
+        observateur.observe(pre);
+      } else taper(pre);
+    }
   };
   document.documentElement.classList.add('humalis-js');
   suivre();
@@ -148,9 +248,15 @@ export const OBSERVATEUR_DEFILEMENT = `function observerLeDefilement() {
 }`;
 /** src/humalis/mouvement.ts du web et du desktop : le même observateur, typé. */
 export const MOUVEMENT_WEB = `// Produit par Humalis : les animations « au defilement » se jouent quand l'élément entre à l'écran.
-${OBSERVATEUR_DEFILEMENT.replace('function observerLeDefilement() {', 'export function observerLeDefilement(): void {').replace('(element) =>', '(element: Element) =>')}
+${OBSERVATEUR_DEFILEMENT.replace('function observerLeDefilement() {', 'export function observerLeDefilement(): void {')
+    .replace('(element) =>', '(element: Element) =>')
+    .replace('const etats = new Map();', 'const etats = new Map<string | null, { ecrites: number; fini: boolean }>();')
+    .replace('(pre) =>', '(pre: Element) =>')
+    .replace('code.cloneNode(true);', 'code.cloneNode(true) as HTMLElement;')
+    .replace('const morceaux = [];', 'const morceaux: [Text, string][] = [];')
+    .replace('const noeud = parcours.currentNode;', 'const noeud = parcours.currentNode as Text;')}
 `;
 /** Le prérendu capture la page après le script : il retire les marques du mouvement (rien de caché sans JavaScript). */
 export const NETTOYAGE_PRERENDU = `  // Le script du mouvement marque la page (humalis-js, data-humalis-vu) : le HTML prérendu ne garde aucune de ces marques.
-  transformHtml: (html) => html.replace(/(<html[^>]*class="[^"]*)\\bhumalis-js\\b/, '$1').replace(/ data-humalis-vu=""/g, ''),
+  transformHtml: (html) => html.replace(/(<html[^>]*class="[^"]*)\\bhumalis-js\\b/, '$1').replace(/ data-humalis-vu=""/g, '').replace(/ data-humalis-tape="[a-z-]*"/g, '').replace(/<code class="humalis-frappe-copie"[\\s\\S]*?<\\/code>/g, ''),
 `;

package/dist/cibles/mobile/projet.js

@@ -885,6 +885,9 @@ function styles(formulaires = false, blocs = false, theme, codes = []) {
             `titre: { fontSize: 28, fontWeight: '700', color: '${encre}', marginVertical: 12 },`,
             `sousTitre: { fontSize: 22, fontWeight: '700', color: '${encre}', marginVertical: 10 },`,
             `texte: { fontSize: 16, lineHeight: 24, color: '${encre}', marginVertical: 6 },`,
+            ...(codes.some((c) => c.includes('s.accent')) ? [theme?.couleurs.some((c) => c.nom === 'marque')
+                    ? `accent: { color: '${theme.couleurs.find((c) => c.nom === 'marque')[mode === 'clair' ? 'clair' : 'sombre']}' },`
+                    : `accent: { fontWeight: '700' },`] : []),
             `bouton: { alignSelf: 'flex-start', paddingVertical: 8, paddingHorizontal: 16, marginVertical: 4, borderWidth: 1, borderColor: '${encre}', borderRadius: 6 },`,
             `texteBouton: { fontSize: 16, color: '${encre}' },`,
             `lien: { alignSelf: 'flex-start', fontSize: 16, color: '${bleu}', marginVertical: 12, textDecorationLine: 'underline' },`,
@@ -1046,10 +1049,12 @@ l'écraser.
 /** « changer theme par sombre » sur le téléphone : le réglage de l'application, pour cette session. */
 const THEME_MOBILE = `import { Appearance } from 'react-native';
 
-export type Theme = 'clair' | 'sombre' | 'automatique';
+export type Theme = 'clair' | 'sombre' | 'automatique' | 'bascule';
 
 /** Change le thème de l'application (le choix n'est pas gardé après la fermeture). */
-export function definirTheme(theme: Theme): void {
+export function definirTheme(demande: Theme): void {
+  // « basculer theme » : l'inverse du thème affiché.
+  const theme = demande === 'bascule' ? (Appearance.getColorScheme() === 'dark' ? 'clair' : 'sombre') : demande;
   Appearance.setColorScheme(theme === 'clair' ? 'light' : theme === 'sombre' ? 'dark' : 'unspecified');
 }
 `;

package/dist/cibles/mobile/rendu.js

@@ -13,7 +13,7 @@ const SANS_STYLE = new Set(['sur', 'degrade', 'colle', 'animation', 'duree', 'de
  * et « effet » sont sans effet sur le téléphone.
  */
 function ouvrirAnime(options) {
-    const animation = options.find((o) => o.nom === 'animation' && o.valeur !== 'defilement');
+    const animation = options.find((o) => o.nom === 'animation' && o.valeur !== 'defilement' && o.valeur !== 'cascade');
     if (!animation)
         return '';
     const duree = MILLISECONDES.duree[options.find((o) => o.nom === 'duree')?.valeur ?? 'moyenne'] ?? 300;
@@ -136,12 +136,15 @@ function elementMobile(el) {
     const options = stylesDe(el.options);
     // Le texte posé sur un fond prend la couleur d'encre de ce fond.
     const encres = el.options.filter((o) => o.nom === 'fond').map((o) => camel(`encre_${o.valeur}`));
+    const contenu = ['titre', 'soustitre', 'texte'].includes(el.genre)
+        ? el.contenu.replace(/<span className="humalis-accent">/g, '<Text style={s.accent}>').replace(/<code className="humalis-code-ligne">/g, '<Text style={{ fontFamily: "monospace" }}>').replace(/<\/(span|code)>/g, '</Text>')
+        : el.contenu;
     switch (el.genre) {
         case 'titre':
         case 'soustitre':
-            return `<Text ${id} accessibilityRole="header" ${style([el.niveau === 1 ? 'titre' : 'sousTitre', ...options, ...encres])}${evenements}>${el.contenu}</Text>`;
+            return `<Text ${id} accessibilityRole="header" ${style([el.niveau === 1 ? 'titre' : 'sousTitre', ...options, ...encres])}${evenements}>${contenu}</Text>`;
         case 'texte':
-            return `<Text ${id} ${style(['texte', ...options, ...encres])}${evenements}>${el.contenu}</Text>`;
+            return `<Text ${id} ${style(['texte', ...options, ...encres])}${evenements}>${contenu}</Text>`;
         case 'bouton': {
             // Le fond, la bordure et la position vont au bouton ; la couleur et la taille, à son texte.
             const duBouton = el.options.filter((o) => ['fond', 'bordure', 'position'].includes(o.nom)).map(nomStyle);

package/dist/cibles/statique/elements-js.js

@@ -60,7 +60,7 @@ ${formes}
         parties.push(`
   // ─── L'avatar : la photo, ou les initiales ──────────────────────────────
 
-  /** « Emch Kongo » donne « EK ». */
+  /** « Camille Martin » donne « CM ». */
   function initiales(nom) {
     const mots = String(nom).trim().split(/\\s+/).filter(Boolean);
     return ((mots[0]?.[0] ?? '') + (mots.length > 1 ? (mots[mots.length - 1][0] ?? '') : '')).toUpperCase();