humalis 1.0.3 → 1.1.0

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/cibles/web/widgets.js

@@ -185,7 +185,7 @@ export function dependancesDeDeveloppement(codes) {
 }
 const AVATAR_TSX = `import { useState } from 'react';
 
-/** Les initiales d'un nom : « Emch Kongo » donne « EK ». */
+/** Les initiales d'un nom : « Camille Martin » donne « CM ». */
 function initiales(nom: string): string {
   const mots = nom.trim().split(/\\s+/).filter(Boolean);
   return ((mots[0]?.[0] ?? '') + (mots.length > 1 ? (mots[mots.length - 1][0] ?? '') : '')).toUpperCase();

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.' },

package/dist/lexer/lexer.js

@@ -30,6 +30,23 @@ function motColle(ligne, debut, premier) {
     }
     return null;
 }
+/**
+ * Le guillemet qui ferme un {code "…"} ou un {accent "…"} commencé à `debut` : le premier « "} »
+ * où les accolades du contenu sont équilibrées ({code "{accent "…"}"}), sinon le premier « "} »
+ * ({code "{"}). -1 s'il n'y en a pas.
+ */
+function finDuMorceau(texte, debut) {
+    let profondeur = 0;
+    for (let j = debut; j < texte.length; j++) {
+        if (texte.startsWith('"}', j) && profondeur <= 0)
+            return j;
+        if (texte[j] === '{')
+            profondeur++;
+        if (texte[j] === '}')
+            profondeur--;
+    }
+    return texte.indexOf('"}', debut);
+}
 function decouperChaine(valeur, ligne, colonne) {
     const parties = [];
     let tampon = '';
@@ -42,6 +59,13 @@ function decouperChaine(valeur, ligne, colonne) {
             }
             i++;
             let nomVariable = '';
+            // {code "…"} et {accent "…"} : le morceau va jusqu'au premier « "} ».
+            const morceau = /^(code|accent)\s*"/.exec(valeur.slice(i));
+            const finMorceau = morceau ? finDuMorceau(valeur, i + morceau[0].length) : -1;
+            if (finMorceau >= 0) {
+                nomVariable = valeur.slice(i, finMorceau + 1);
+                i = finMorceau + 1;
+            }
             while (i < valeur.length && valeur[i] !== '}') {
                 nomVariable += valeur[i];
                 i++;
@@ -50,7 +74,21 @@ function decouperChaine(valeur, ligne, colonne) {
                 throw new ErreurLexicale('accolade non fermée dans la chaîne : il manque }', ligne, colonne);
             }
             i++;
-            parties.push({ type: 'variable', valeur: nomVariable.trim() });
+            const accent = /^accent\b(.*)$/s.exec(nomVariable.trim());
+            if (accent) {
+                const contenu = /^\s*"([\s\S]*)"\s*$/.exec(accent[1]);
+                if (!contenu)
+                    throw new ErreurLexicale('accent attend un texte entre guillemets : {accent "mot"}.', ligne, colonne);
+                parties.push({ type: 'accent', valeur: contenu[1] });
+            }
+            else if (/^code\s+\S/s.test(nomVariable.trim())) {
+                const contenu = /^code\s+"([\s\S]*)"\s*$/.exec(nomVariable.trim());
+                if (!contenu)
+                    throw new ErreurLexicale('code attend un texte entre guillemets : {code "titre"}.', ligne, colonne);
+                parties.push({ type: 'code', valeur: contenu[1] });
+            }
+            else
+                parties.push({ type: 'variable', valeur: nomVariable.trim() });
             continue;
         }
         tampon += valeur[i];
@@ -68,10 +106,52 @@ export function analyser(source) {
     for (let numLigne = 0; numLigne < lignes.length; numLigne++) {
         const ligne = lignes[numLigne];
         let i = 0;
+        // « code humalis : », « code : », et l'animation : « code humalis avec animation frappe au defilement : ».
+        const codeBrut = /^( *)(code)(?: +(?!avec\b)([\p{L}][\p{L}0-9_]*))?( +avec +animation +frappe(?: +au +d[eé]filement)?)? *: *$/u.exec(ligne);
+        if (codeBrut) {
+            const contenu = [];
+            const indentation = codeBrut[1].length;
+            if (indentation % 4 !== 0)
+                throw new ErreurLexicale('indentation incohérente : un multiple de 4 est attendu', numLigne + 1, 1);
+            const niveau = indentation / 4;
+            const courant = pile[pile.length - 1];
+            if (niveau > courant + 1)
+                throw new ErreurLexicale('indentation incohérente : un seul niveau à la fois', numLigne + 1, 1);
+            if (niveau === courant + 1) {
+                pile.push(niveau);
+                tokens.push({ type: 'INDENT', valeur: '', ligne: numLigne + 1, colonne: 1 });
+            }
+            else
+                while (pile.length > 1 && pile[pile.length - 1] > niveau) {
+                    pile.pop();
+                    tokens.push({ type: 'DEDENT', valeur: '', ligne: numLigne + 1, colonne: 1 });
+                }
+            if (pile[pile.length - 1] !== niveau)
+                throw new ErreurLexicale('indentation incohérente : ce niveau ne correspond à aucun bloc ouvert', numLigne + 1, 1);
+            while (numLigne + 1 < lignes.length) {
+                const suivante = lignes[numLigne + 1];
+                const marge = suivante.length - suivante.trimStart().length;
+                if (suivante.trim() !== '' && marge <= indentation)
+                    break;
+                contenu.push(lignes[++numLigne]);
+            }
+            while (contenu.length && contenu[contenu.length - 1].trim() === '')
+                contenu.pop();
+            const marge = Math.min(...contenu.filter((l) => l.trim() !== '').map((l) => l.length - l.trimStart().length));
+            const brut = contenu.map((l) => l.slice(Math.min(marge, l.length - l.trimStart().length))).join('\n');
+            const ligneDebut = numLigne - contenu.length + 1;
+            tokens.push({ type: 'MOT_CLE', valeur: 'code', ligne: ligneDebut, colonne: indentation + 1, reserve: false, original: 'code' }, ...(codeBrut[3] ? [{ type: 'IDENTIFIANT', valeur: codeBrut[3], ligne: ligneDebut, colonne: indentation + 6 }] : []), ...(codeBrut[4] ? codeBrut[4].trim().split(/ +/).map((mot) => ({ type: 'IDENTIFIANT', valeur: mot, ligne: ligneDebut, colonne: ligne.indexOf(codeBrut[4]) + 1 })) : []), { type: 'PONCTUATION', valeur: ':', ligne: ligneDebut, colonne: ligne.indexOf(':') + 1 }, { type: 'FIN_LIGNE', valeur: '', ligne: ligneDebut, colonne: ligne.length + 1 }, { type: 'CODE_BRUT', valeur: brut, ligne: ligneDebut + 1, colonne: 1 }, { type: 'FIN_LIGNE', valeur: '', ligne: numLigne + 1, colonne: 1 });
+            continue;
+        }
         // « style : » au début d'une ligne, hors de tout bloc : les lignes
         // indentées qui suivent sont du CSS, recopié tel quel. Il contient des
         // {, des : et des # qui ne doivent pas être lus comme du Humalis.
-        if (pile.length === 1 && /^style\s*:\s*$/i.test(ligne)) {
+        if (/^style\s*:\s*$/i.test(ligne)) {
+            // Juste après un bloc de haut de fichier (« theme : »), ce bloc se ferme ici.
+            while (pile.length > 1) {
+                pile.pop();
+                tokens.push({ type: 'DEDENT', valeur: '', ligne: numLigne + 1, colonne: 1 });
+            }
             const debut = numLigne;
             const contenu = [];
             while (numLigne + 1 < lignes.length && (lignes[numLigne + 1].trim() === '' || /^\s/.test(lignes[numLigne + 1]))) {
@@ -141,7 +221,30 @@ export function analyser(source) {
                 const debut = i;
                 i++;
                 let valeur = '';
-                while (i < ligne.length && ligne[i] !== '"') {
+                let profondeur = 0;
+                while (i < ligne.length && (ligne[i] !== '"' || (profondeur > 0 && ligne.indexOf('}', i + 1) >= 0))) {
+                    // {code "…"} et {accent "…"} : recopiés tels quels jusqu'au premier « "} »
+                    // (accolades, guillemets et antislashs compris).
+                    const morceau = /^\{(code|accent)\s*"/.exec(ligne.slice(i));
+                    const fin = morceau ? finDuMorceau(ligne, i + morceau[0].length) : -1;
+                    if (fin >= 0) {
+                        valeur += ligne.slice(i, fin + 2);
+                        i = fin + 2;
+                        continue;
+                    }
+                    // \" écrit un guillemet dans le texte ; tout autre antislash reste tel quel
+                    // (« \\ » aussi, en entier : un texte peut finir par lui, comme avant).
+                    if (ligne[i] === '\\' && ligne[i + 1] === '\\') {
+                        valeur += '\\\\';
+                        i += 2;
+                        continue;
+                    }
+                    if (ligne[i] === '\\' && ligne[i + 1] === '"')
+                        i++;
+                    if (ligne[i] === '{')
+                        profondeur++;
+                    if (ligne[i] === '}' && profondeur > 0)
+                        profondeur--;
                     valeur += ligne[i];
                     i++;
                 }