humalis 1.0.4 → 1.2.0

package/dist/parser/interactions.js

@@ -1,5 +1,6 @@
 import { normaliser } from '../lexer/motsCles.js';
 import { ErreurSyntaxique } from './erreurs.js';
+import { lireVersions } from './langues.js';
 /** Vrai si le token est ce mot, écrit comme mot-clé ou comme nom (sans accent ni majuscule). */
 function estLeMot(token, mot) {
     return (token.type === 'MOT_CLE' || token.type === 'IDENTIFIANT') && normaliser(token.original ?? token.valeur) === mot;
@@ -122,8 +123,11 @@ function analyserCopier(flux, outils) {
     if (flux.verifier('MOT_CLE', 'avec') && estLeMot(flux.regarder(1), 'message')) {
         flux.avancer();
         flux.avancer();
-        const message = flux.attendre('CHAINE', undefined, 'le texte du message entre guillemets (copier code avec message "Code copié")').valeur;
-        return { type: 'Copier', valeur, message, ligne: debut.ligne };
+        const jeton = flux.attendre('CHAINE', undefined, 'le texte du message entre guillemets (copier code avec message "Code copié")');
+        // « avec message "Copié" en anglais "Copied" » : les versions écrites à côté.
+        const versions = lireVersions(flux);
+        const texte = versions ? { texte: { type: 'Chaine', parties: jeton.parties ?? [], versions, ligne: jeton.ligne } } : {};
+        return { type: 'Copier', valeur, message: jeton.valeur, ...texte, ligne: debut.ligne };
     }
     if (estLeMot(flux.actuel(), 'sans') && estLeMot(flux.regarder(1), 'message')) {
         flux.avancer();

package/dist/parser/langues.js

@@ -85,5 +85,5 @@ export function estSelecteurLangue(flux) {
 }
 /** Le texte écrit, interpolations comprises (« {n article} dans le panier ») : la clé d'une traduction. */
 export function texteSource(parties) {
-    return parties.map((p) => (p.type === 'texte' ? p.valeur : `{${p.valeur}}`)).join('');
+    return parties.map((p) => (p.type === 'variable' ? `{${p.valeur}}` : p.valeur)).join('');
 }

package/dist/parser/medias.js

@@ -16,7 +16,12 @@ export function analyserOptionMedia(flux, nom) {
         const valeur = flux.avancer().valeur;
         if (estLeMot(flux.actuel(), 'defilement')) {
             flux.avancer();
-            return { propriete: 'animation', valeur, defilement: true };
+            // « … au defilement et en cascade » : les enfants du bloc, l'un après l'autre.
+            const enCascade = flux.actuel().valeur === 'et' && estLeMot(flux.regarder(1), 'en') && estLeMot(flux.regarder(2), 'cascade');
+            if (enCascade)
+                for (let i = 0; i < 3; i++)
+                    flux.avancer();
+            return { propriete: 'animation', valeur, defilement: true, ...(enCascade ? { cascade: true } : {}) };
         }
         return { propriete: 'animation', valeur };
     }

package/dist/parser/parser.js

@@ -398,6 +398,56 @@ function analyserBloc(flux) {
     return instructions;
 }
 function analyserInstruction(flux) {
+    if (estLeMot(flux.actuel(), 'tableau') && (flux.regarder(1).type === 'CHAINE' || flux.regarder(1).valeur === ':')) {
+        const debut = flux.avancer();
+        const legende = flux.verifier('PONCTUATION', ':') ? undefined : analyserValeur(flux);
+        flux.attendre('PONCTUATION', ':', 'deux-points après la légende du tableau');
+        flux.sauterFinsDeLigne();
+        const colonnes = [];
+        const rangees = [];
+        if (flux.accepter('INDENT')) {
+            flux.sauterFinsDeLigne();
+            while (!flux.verifier('DEDENT') && !flux.estFini()) {
+                const genre = flux.avancer();
+                if (!estLeMot(genre, 'colonnes') && !estLeMot(genre, 'rangee'))
+                    throw new ErreurSyntaxique('un tableau contient « colonnes » et « rangee ».', genre.ligne);
+                const cellules = [analyserValeur(flux)];
+                while (flux.accepter('PONCTUATION', ','))
+                    cellules.push(analyserValeur(flux));
+                if (estLeMot(genre, 'colonnes'))
+                    colonnes.push(...cellules);
+                else
+                    rangees.push(cellules);
+                flux.sauterFinsDeLigne();
+            }
+            flux.accepter('DEDENT');
+        }
+        return { type: 'TableauDocumentation', ...(legende ? { legende } : {}), colonnes, rangees, ligne: debut.ligne };
+    }
+    if (estLeMot(flux.actuel(), 'liste') && (flux.regarder(1).valeur === ':' || (estLeMot(flux.regarder(1), 'numerotee') && flux.regarder(2).valeur === ':'))) {
+        const debut = flux.avancer();
+        const numerotee = estLeMot(flux.actuel(), 'numerotee');
+        if (numerotee)
+            flux.avancer();
+        flux.attendre('PONCTUATION', ':', 'deux-points après « liste »');
+        return { type: 'Bloc', genre: numerotee ? 'listeNumerotee' : 'liste', styles: [], classes: [], corps: analyserBloc(flux), ligne: debut.ligne };
+    }
+    if (estLeMot(flux.actuel(), 'code') && estBlocDeCode(flux)) {
+        const debut = flux.avancer();
+        const langage = flux.verifier('PONCTUATION', ':') || estLeMot(flux.actuel(), 'avec') ? undefined : flux.avancer().valeur;
+        // « avec animation frappe » (au chargement), « … au defilement » (quand le bloc arrive à l'écran).
+        let frappe;
+        if (estLeMot(flux.actuel(), 'avec')) {
+            flux.avancer(); // avec
+            flux.avancer(); // animation
+            flux.avancer(); // frappe
+            frappe = estLeMot(flux.actuel(), 'au') ? (flux.avancer(), flux.avancer(), 'defilement') : 'chargement';
+        }
+        flux.attendre('PONCTUATION', ':', 'deux-points après « code »');
+        flux.accepter('FIN_LIGNE');
+        const code = flux.attendre('CODE_BRUT', undefined, 'les lignes du bloc de code').valeur;
+        return { type: 'CodeDocumentation', ...(langage ? { langage } : {}), ...(frappe ? { frappe } : {}), code, ligne: debut.ligne };
+    }
     if (estLeMot(flux.actuel(), 'en') && estLeMot(flux.regarder(1), 'supposant')) {
         const debut = flux.avancer();
         for (const motAttendu of ['supposant', 'que', 'ca', 'marche']) {
@@ -726,6 +776,7 @@ function estBlocMiseEnPage(flux) {
     const suivant = flux.regarder(1);
     return ((suivant.type === 'PONCTUATION' && suivant.valeur === ':') ||
         (suivant.type === 'MOT_CLE' && suivant.valeur === 'avec') ||
+        (genre === 'menu' && (estLeMot(suivant, 'repliable') || estLeMot(suivant, 'vertical'))) ||
         ((genre === 'section' || GENRES_AVEC_TITRE.includes(genre)) && suivant.type === 'CHAINE'));
 }
 function analyserBlocMiseEnPage(flux) {
@@ -734,6 +785,16 @@ function analyserBlocMiseEnPage(flux) {
     if (filAriane)
         flux.avancer();
     const genre = filAriane ? 'filAriane' : GENRES_BLOC.find((g) => estLeMot(debut, g));
+    // « menu repliable : » : sur un petit écran, un bouton « Menu » ouvre et ferme les liens.
+    // « menu vertical : » : les liens en colonne. Les deux se combinent, dans n'importe quel ordre.
+    let repliable = false;
+    let vertical = false;
+    while (genre === 'menu' && (estLeMot(flux.actuel(), 'repliable') || estLeMot(flux.actuel(), 'vertical'))) {
+        if (estLeMot(flux.avancer(), 'repliable'))
+            repliable = true;
+        else
+            vertical = true;
+    }
     // Le titre d'une section devient son premier élément : un « titre » comme les autres.
     const titre = [];
     let titreBloc;
@@ -769,7 +830,7 @@ function analyserBlocMiseEnPage(flux) {
         } while (flux.accepter('MOT_CLE', 'et'));
     }
     flux.attendre('PONCTUATION', ':', `deux-points à la fin de la ligne « ${genre} », puis son contenu en dessous, décalé`);
-    return { type: 'Bloc', genre, styles, classes, ...(titreBloc ? { titre: titreBloc } : {}), ...(ancre !== undefined ? { ancre } : {}), ...(nom !== undefined ? { nom } : {}), corps: [...titre, ...analyserBloc(flux)], ligne: debut.ligne };
+    return { type: 'Bloc', genre, styles, classes, ...(titreBloc ? { titre: titreBloc } : {}), ...(ancre !== undefined ? { ancre } : {}), ...(nom !== undefined ? { nom } : {}), ...(repliable ? { repliable } : {}), ...(vertical ? { vertical } : {}), corps: [...titre, ...analyserBloc(flux)], ligne: debut.ligne };
 }
 function lireNombre(flux, description) {
     const negatif = flux.accepter('PONCTUATION', '-');
@@ -936,7 +997,7 @@ function analyserAction(flux) {
     // « ajouter nom à panier » : « à » et « de » sont des mots de liaison
     // déjà écartés par le lexer ; « dans » reste permis.
     if (debut.valeur === 'ajouter' || debut.valeur === 'retirer') {
-        const valeur = analyserExpression(flux);
+        const valeur = analyserOperande(flux);
         flux.accepter('MOT_CLE', 'dans');
         const { nom } = flux.attendreNom('le nom de la liste');
         return {
@@ -1018,7 +1079,7 @@ function analyserAction(flux) {
             type: 'Affectation',
             nom,
             ...(champs.length > 0 ? { champs } : {}),
-            valeur: analyserExpression(flux),
+            valeur: analyserOperande(flux),
             ligne: debut.ligne,
         };
     }
@@ -1154,6 +1215,17 @@ function analyserComparaison(flux) {
             flux.avancer();
         return { type: 'Comparaison', gauche: { type: 'MouvementReduit', ligne: debut.ligne }, operateur: pas ? 'faux' : 'vrai', ligne: debut.ligne };
     }
+    // « theme est sombre », « theme est clair » (et « theme n'est pas sombre ») : le thème affiché.
+    if (estLeMot(flux.actuel(), 'theme') &&
+        flux.regarder(1).type === 'MOT_CLE' &&
+        flux.regarder(1).valeur === 'est' &&
+        (estLeMot(flux.regarder(2 + pas), 'sombre') || estLeMot(flux.regarder(2 + pas), 'clair'))) {
+        const debut = flux.avancer();
+        for (let i = 0; i < 1 + pas; i++)
+            flux.avancer();
+        const sombre = estLeMot(flux.avancer(), 'sombre');
+        return { type: 'Comparaison', gauche: { type: 'ThemeSombre', ligne: debut.ligne }, operateur: sombre !== Boolean(pas) ? 'vrai' : 'faux', ligne: debut.ligne };
+    }
     const gauche = analyserOperande(flux);
     // « panier contient "Livre" », « nom contient "Liv" ».
     if (estLeMot(flux.actuel(), 'contient')) {
@@ -1285,6 +1357,14 @@ function analyserApresEst(flux, gauche) {
     return { type: 'Comparaison', gauche, operateur, droite, ligne: gauche.ligne };
 }
 /** Variable ou champ de formulaire (« champ "email" »). */
+/** « code … : » est un bloc de code quand le lexer a recopié ses lignes (CODE_BRUT) juste après les deux-points. */
+function estBlocDeCode(flux) {
+    for (let decalage = 1; decalage <= 7; decalage++) {
+        if (flux.regarder(decalage).valeur === ':')
+            return flux.regarder(decalage + 2).type === 'CODE_BRUT' || flux.regarder(decalage + 1).type === 'CODE_BRUT';
+    }
+    return false;
+}
 export function analyserOperande(flux) {
     if (flux.verifier('MOT_CLE', 'champ') && flux.regarder(1).type === 'CHAINE') {
         const debut = flux.avancer();
@@ -1531,6 +1611,14 @@ function analyserValeur(flux) {
         flux.avancer();
         // « "Bienvenue" en anglais "Welcome" » : les versions écrites à côté.
         const versions = lireVersions(flux);
+        // « "GitHub" sans traduction » : le même texte dans toutes les langues (un nom propre).
+        if (estLeMot(flux.actuel(), 'sans') && estLeMot(flux.regarder(1), 'traduction')) {
+            const sans = flux.avancer();
+            flux.avancer();
+            if (versions)
+                throw new ErreurSyntaxique('ce texte a une version traduite et « sans traduction » : gardez l’un ou l’autre.', sans.ligne);
+            return { type: 'Chaine', parties: token.parties ?? [], sansTraduction: true, ligne: token.ligne };
+        }
         return { type: 'Chaine', parties: token.parties ?? [], ...(versions ? { versions } : {}), ligne: token.ligne };
     }
     if (token.type === 'NOMBRE') {

package/dist/parser/theme.js

@@ -107,14 +107,23 @@ export function analyserTheme(flux) {
     flux.accepter('DEDENT');
     return theme;
 }
-/** « changer theme par sombre » (ou par "sombre") : le choix du visiteur, gardé par son appareil. */
+/** « basculer theme » : le thème inverse de celui qu'on voit. */
+const estBasculerTheme = (flux) => estLeMot(flux.actuel(), 'basculer') && estLeMot(flux.regarder(1), 'theme');
+/** « changer theme par sombre » (ou par "sombre") : le choix du visiteur, gardé par son appareil ; ou « basculer theme ». */
 export function estChangerTheme(flux) {
+    if (estBasculerTheme(flux))
+        return true;
     if (!(flux.verifier('MOT_CLE', 'changer') && estLeMot(flux.regarder(1), 'theme') && flux.regarder(2).valeur === 'par'))
         return false;
     const valeur = flux.regarder(3);
     return valeur.type === 'CHAINE' || (estMot(valeur) && MODES.includes(normaliser(valeur.valeur)));
 }
 export function analyserChangerTheme(flux) {
+    if (estBasculerTheme(flux)) {
+        const debut = flux.avancer();
+        const mot = flux.avancer();
+        return { type: 'Action', action: 'changerTheme', arguments: [{ type: 'Chaine', parties: [{ type: 'texte', valeur: 'bascule' }], ligne: mot.ligne }], ligne: debut.ligne };
+    }
     const debut = flux.avancer();
     flux.avancer();
     flux.avancer();

package/dist/ri/construire.js

@@ -330,6 +330,12 @@ class Construction {
                 case 'Bloc':
                     noeuds.push(instruction.genre === 'carte' ? this.carte(instruction, gestionnaires) : this.bloc(instruction, gestionnaires));
                     break;
+                case 'CodeDocumentation':
+                    noeuds.push({ type: 'codeDocumentation', ...(instruction.langage ? { langage: instruction.langage } : {}), ...(instruction.frappe ? { frappe: instruction.frappe } : {}), code: instruction.code, ligne: instruction.ligne });
+                    break;
+                case 'TableauDocumentation':
+                    noeuds.push({ type: 'tableauDocumentation', legende: this.valeur(instruction.legende), colonnes: instruction.colonnes.map((c) => this.valeur(c)), rangees: instruction.rangees.map((r) => r.map((c) => this.valeur(c))), ligne: instruction.ligne });
+                    break;
                 case 'Formulaire':
                     noeuds.push({
                         type: 'formulaire',
@@ -578,7 +584,12 @@ class Construction {
                     });
                     break;
                 case 'Copier':
-                    actions.push({ type: 'copie', valeur: this.valeur(instruction.valeur), message: instruction.message === undefined ? 'Copié' : instruction.message });
+                    actions.push({
+                        type: 'copie',
+                        valeur: this.valeur(instruction.valeur),
+                        message: instruction.message === undefined ? 'Copié' : instruction.message,
+                        ...(instruction.texte ? { texte: this.valeur(instruction.texte) } : {}),
+                    });
                     break;
                 case 'Partager': {
                     const lien = instruction.lien;
@@ -648,6 +659,9 @@ class Construction {
             // « animation montee au defilement » : la marque que lit l'observateur du défilement.
             if (s.defilement)
                 options.push({ nom: 'animation', valeur: 'defilement' });
+            // « … et en cascade » : les enfants du bloc s'animent, l'un après l'autre.
+            if (s.cascade)
+                options.push({ nom: 'animation', valeur: 'cascade' });
         }
         return { options, reglages: reglages };
     }
@@ -674,6 +688,12 @@ class Construction {
     /** Un bloc de mise en page, ou un bloc d'éléments d'écran avec son état caché. */
     bloc(instruction, gestionnaires, groupe) {
         const { options, reglages } = this.separer(instruction.styles);
+        // « menu repliable » : la marque que lisent le CSS et le bouton « Menu ».
+        if (instruction.repliable)
+            options.push({ nom: 'menu', valeur: 'repliable' });
+        // « menu vertical » : la colonne que lit le CSS.
+        if (instruction.vertical)
+            options.push({ nom: 'menu', valeur: 'vertical' });
         const noeud = {
             type: 'bloc',
             genre: instruction.genre,
@@ -795,6 +815,10 @@ function traduireValeur(expression, analyse) {
             const parties = (liste) => liste.map((p) => {
                 if (p.type === 'texte')
                     return { texte: p.valeur };
+                if (p.type === 'accent')
+                    return { texte: p.valeur, accent: true };
+                if (p.type === 'code')
+                    return { texte: p.valeur, code: true };
                 const format = analyse.formats.get(p);
                 const pluriel = analyse.pluriels.get(p);
                 return {
@@ -892,6 +916,8 @@ function traduireValeur(expression, analyse) {
             return { type: 'erreurRequete', variable: expression.variable };
         case 'MouvementReduit':
             return { type: 'mouvementReduit' };
+        case 'ThemeSombre':
+            return { type: 'themeSombre' };
     }
 }
 /** Une durée écrite en chiffres, en millisecondes (l'analyse a refusé les autres là où il le faut). */

package/dist/vocabulaire/table-interactions.js

@@ -109,7 +109,7 @@ export const ENTREES_INTERACTIONS = [
         concept: 'action.copier',
         cibles: ecran('await copier(texte, afficherMessage) : navigator.clipboard.writeText, repli execCommand (src/humalis/presse-papier.ts)', 'await copier(texte, afficherMessage) : Clipboard.setStringAsync d’expo-clipboard', "await copier(texte) : navigator.clipboard.writeText, repli execCommand (humalis.js)"),
         couvre: ['web:navigator.clipboard.writeText', 'expo:expo-clipboard'],
-        description: 'Dans un événement : « copier code » met le texte dans le presse-papier, puis affiche « Copié » (ou « Copie impossible »). « avec message "Code copié" » change le texte, « sans message » le tait.',
+        description: 'Dans un événement : « copier code » met le texte dans le presse-papier, puis affiche « Copié » (ou « Copie impossible »). « avec message "Code copié" » change le texte (et « en anglais "Code copied" » le traduit), « sans message » le tait.',
         exemple: AU_CLIC('        copier code', '    variable code = "REY-2026"\n'),
     }),
     mot({
@@ -262,4 +262,19 @@ export const ENTREES_INTERACTIONS = [
         statut: 'supporte',
         etape: 9,
     },
+    {
+        mot: 'theme sombre',
+        accentue: 'thème sombre',
+        variantes: ['theme clair'],
+        categorie: 'comparaison',
+        concept: 'condition.themeSombre',
+        // Comme « mouvement est reduit » : une tournure lue dans une condition, jamais un mot-clé du lexer.
+        contextes: ['session'],
+        cibles: ecran("useThemeSombre() : data-theme de <html>, sinon matchMedia('(prefers-color-scheme: dark)'), suivi en direct", "useThemeSombre() : useColorScheme() === 'dark'", 'humalis.themeSombre() : data-theme de <html>, sinon le système, la page redessinée au changement'),
+        couvre: [],
+        description: 'La condition « theme est sombre » est vraie quand le thème affiché est sombre (choix du visiteur ou du projet, sinon le système) ; « theme est clair » et « theme n’est pas sombre » sont son contraire. « basculer theme » passe au thème inverse. Le HTML écrit d’avance la considère fausse.',
+        exemple: 'theme :\n    mode automatique\n\npage "accueil" :\n    titre "Accueil"\n    bouton "Changer de thème"\n    quand l\'utilisateur clique sur "Changer de thème" :\n        basculer theme\n    si theme est sombre :\n        texte "Bonne soirée"',
+        statut: 'supporte',
+        etape: 9,
+    },
 ];

package/dist/vocabulaire/table.js

@@ -2169,8 +2169,8 @@ export const VOCABULAIRE = [
         cibles: ecran('<ul> et ses <li>', 'FlatList', '<ul>'),
         couvre: ['html:ul', 'html:ol', 'html:li', 'html:menu', 'rn:FlatList'],
         description: 'Une liste à puces (ou numérotée). Ailleurs, « liste » reste un nom de variable possible.',
-        exemple: PAGE('    variable produits = ["Livre"]\n    liste produits'),
-        statut: 'prevu',
+        exemple: PAGE('    liste :\n        texte "Livre"'),
+        statut: 'supporte',
         etape: 1,
         note: 'L’élément n’est pas encore pris en charge. Comme type de champ d’une donnée du serveur, « liste de texte » marche déjà.',
     },
@@ -2183,8 +2183,8 @@ export const VOCABULAIRE = [
         cibles: ecran('<table> et ses lignes', 'une liste de lignes', '<table>'),
         couvre: ['html:table', 'html:thead', 'html:tbody', 'html:tr', 'html:td', 'html:th', 'html:caption'],
         description: 'Un tableau, décrit par ses colonnes et la liste qu’il affiche.',
-        exemple: PAGE('    tableau produits :\n        colonne "Nom" : nom'),
-        statut: 'prevu',
+        exemple: PAGE('    tableau "Produits" :\n        colonnes "Nom", "Prix"\n        rangee "Livre", "10"'),
+        statut: 'supporte',
         etape: 1,
     },
     {

package/docs/guide.en.md

@@ -103,6 +103,14 @@ Text that is displayed goes between quotes: `titre "Welcome"`. Without quotes,
 it is a variable name: `texte firstname` shows what the variable `firstname`
 contains.
 
+To put a quote inside a text, write `\"`:
+
+```humalis
+page "quote" :
+    titre "A quote"
+    texte "She said \"hello\" as she came in."
+```
+
 ### Accents are allowed, never required
 
 `si age est supérieur ou égal à 18` and `si age est superieur ou egal a 18`
@@ -178,6 +186,95 @@ page "menu" :
 Keep the levels in order, without skipping: screen readers use them to move
 through the page.
 
+Inside a block placed under a subtitle, a `soustitre` goes down one level on its
+own: a card in a section becomes level 3. In a `section`, the first subtitle is
+the section's title, even when it sits in its own block; every other subtitle of
+the section goes down one level. `avec niveau` (with level) still lets you
+choose.
+
+```humalis
+page "home" :
+    titre "Home"
+    section :
+        soustitre "Our pages"
+        grille :
+            bloc :
+                soustitre "Examples"
+                texte "Six apps to try."
+```
+
+In a `titre`, `soustitre`, or `texte`, `{accent "…"}` highlights a few words
+with the brand color. Screen readers and the browser tab still get plain text.
+
+```humalis
+page "offer" :
+    titre "A {accent "simple"} offer"
+    texte "Price: {accent "free"} forever"
+```
+
+### Lists
+
+`liste :` makes bullets; `liste numerotee :` numbers each item. Each instruction in the block becomes one item.
+
+```humalis
+page "guide" :
+    liste :
+        texte "Install Node.js"
+        texte "Create the project"
+    liste numerotee :
+        texte "Write the file"
+        texte "Compile"
+```
+
+### Code within a sentence
+
+In text, `{code "…"}` displays a short piece of code in a monospace font.
+
+```humalis
+page "guide" :
+    texte "Write {code "titre"} to add a heading."
+```
+
+### Code block
+
+`code language :` copies the indented lines without interpreting them; the language is optional.
+
+```humalis
+page "guide" :
+    code humalis :
+        page "home" :
+            titre "Welcome"
+```
+
+`avec animation frappe` ("with typing animation") writes the code letter by
+letter, with a cursor; `avec animation frappe au defilement` waits until the
+block scrolls into view. The real code stays in place while it types (screen
+readers, Copy button), and it shows at once if the person asked to reduce
+motion. On a phone, the code shows in full.
+
+```humalis
+page "home" :
+    code humalis avec animation frappe :
+        page "shop" :
+            titre "Our products"
+            bouton "Order"
+```
+
+### Table
+
+A table has a caption, columns, and rows of equal width. A translation may follow each cell.
+
+```humalis
+langues :
+    francais
+    anglais
+
+page "guide" :
+    tableau "Commands" en anglais "Commands" :
+        colonnes "Command", "Role" en anglais "Role"
+        rangee "humalis compile", "builds the project" en anglais "builds the project"
+```
+
 ### Image
 
 ```humalis
@@ -391,10 +488,35 @@ a light (`clair`) and dark (`sombre`) value; `police titres` is the headings
 font. Humalis checks contrast: a text colour too pale for its background is
 reported at compile time.
 
+A font can be shipped with the site, without relying on an outside service:
+`police titres "Space Grotesk" depuis "./polices/space-grotesk.woff2"` (`.woff2`,
+`.woff`, `.ttf` or `.otf` files).
+
+Visitors can also switch themes. `basculer theme` ("toggle theme") switches to
+the opposite of the theme being shown, and `si theme est sombre :` (or `clair`)
+reacts to the theme on screen:
+
+```humalis
+theme :
+    mode automatique
+
+page "home" :
+    titre "Home"
+    bouton "Change theme"
+    quand l'utilisateur clique sur "Change theme" :
+        basculer theme
+    si theme est sombre :
+        texte "Good evening"
+    sinon :
+        texte "Good day"
+```
+
 ### Shared header and footer
 
 `entete :` (header) and `pied :` (footer) appear on every page. A page can
-leave them out with `sans entete` or `sans pied`.
+leave them out with `sans entete` or `sans pied`. With a header, Humalis adds a
+"Skip to content" link on its own, hidden until the keyboard reaches it: it lets
+keyboard users jump past the header.
 
 ```humalis
 entete avec colle :
@@ -488,7 +610,32 @@ page "menu" :
 ```
 
 `fil d'Ariane` is a breadcrumb. In a `menu`, the link to the current page is
-marked as active.
+marked as active. The links of a menu wrap when space runs out. A `menu
+vertical :` stacks its links in a column and never starts a second column: a
+table of contents with a limited height scrolls. It combines with `repliable`
+(`menu vertical repliable :`).
+
+```humalis
+page "guide" :
+    titre "The guide"
+    menu vertical :
+        lien "Install" vers "guide"
+        lien "Pages" vers "guide"
+```
+
+A `menu repliable :` (collapsible menu) folds behind a burger button (named
+"Menu" for screen readers) on a small screen (phone); the icon turns into a cross
+while the menu is open. Choosing a link, tapping outside or pressing Escape
+closes it. On a large screen it stays open:
+
+```humalis
+page "home" :
+    menu repliable :
+        lien "Home" vers "home"
+        lien "The menu" vers "home"
+        lien "Book" vers "home"
+    titre "Home"
+```
 
 ---
 
@@ -535,6 +682,18 @@ Animations: `apparition` (fade in), `montee` (slide up), `agrandissement`
 `agrandi` (grow), `leve` (lift). Humalis respects the person's "reduce motion"
 setting.
 
+On a block, `et en cascade` ("and in a cascade") makes its children appear one
+after another:
+
+```humalis
+page "home" :
+    titre "Our dishes"
+    grille avec animation montee au defilement et en cascade :
+        texte "Soup of the day"
+        texte "Risotto"
+        texte "Apple pie"
+```
+
 ---
 
 ## 9. Variables and calculations
@@ -959,8 +1118,10 @@ Actions are written inside an event.
 | `afficher erreur "…"` | shows an error message |
 | `montrer "name"`, `cacher "name"` | shows or hides an element |
 | `changer x par …` | changes a variable |
+| `changer x par champ "Label"` | reads a field's current value into a variable |
 | `changer texte de "name" par "…"` | changes an element's text |
 | `ajouter … à list`, `retirer … de list` | changes a list |
+| `ajouter champ "Label" à list` | adds a field's current value to a list |
 | `rediriger vers "page"` | goes to a page |
 | `revenir vers "page"` | goes back, or to that page |
 | `envoyer requete vers "…"` | calls a server (see [the server](#22-connecting-pages-to-the-server)) |
@@ -981,6 +1142,22 @@ page "thanks" :
     titre "Thank you!"
 ```
 
+Inside an action, `champ "Label"` reads what the person entered when they click. A number field yields a number, a checkbox yields true or false, and other fields yield text. Use the base language label even when the field has a translation.
+
+```humalis
+page "tasks" :
+    variable tasks = ["Buy bread"]
+    variable latest = ""
+    champ "New task"
+    bouton "Add"
+    quand l'utilisateur clique sur "Add" :
+        ajouter champ "New task" à tasks
+        changer latest par champ "New task"
+    texte "Latest added: {latest}"
+    pour chaque task dans tasks :
+        texte task
+```
+
 ---
 
 ## 16. Messages, dialogs and questions
@@ -1617,9 +1794,13 @@ page "catalogue" :
 
 - `langues :` lists the languages (`francais`, `anglais`…).
 - `en francais "…"` gives another language's version of a text.
+- `sans traduction` ("without translation") keeps the same text in every
+  language, for a proper noun: `lien "GitHub" sans traduction vers "https://github.com"`.
 - `traductions francais :` translates a repeated text once.
 - `selecteur de langue` shows the language switcher; `changer langue par
   anglais` and `si langue est anglais :` are used in events.
+- The message of `copier` is translated like any other text:
+  `copier code avec message "Copied" en francais "Copié"`.
 - Humalis reports at compile time every text that lacks its translation.
   Humalis's own messages (required field, loading…) follow the language.