humalis 1.2.0 → 1.3.0

package/README.en.md

@@ -4,6 +4,13 @@
 
 <p align="center"><a href="README.md">Français</a> · <strong>English</strong></p>
 
+<p align="center">
+  <a href="https://www.npmjs.com/package/humalis"><img src="https://img.shields.io/npm/v/humalis" alt="npm"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/license-Humalis%201.0-c1e928" alt="Licence"></a>
+  <a href="https://github.com/emch04/framework"><img src="https://img.shields.io/badge/server-Astratra-6f42c1" alt="Astratra"></a>
+  <a href="https://hub.xerj.org/contributors/emch04"><img src="https://hub.xerj.org/contributors/emch04/badge.svg" alt="XERJ Corpus Hub contributor"></a>
+</p>
+
 # Humalis
 
 **One language, in French, to build a complete application**: a website, a mobile app, a desktop app and its server, all from the same file.
@@ -59,7 +66,7 @@ humalis compile my-project.humalis --cible serveur --sortie my-project-server
 |---|---|
 | `web` | a React + Vite project, prerendered (one HTML page per address) |
 | `statique` | static HTML, CSS and JavaScript pages, no build step |
-| `serveur` | a Node server with the Astratra packs (login, permissions, sessions) |
+| `serveur` | a Node server with the [Astratra](https://github.com/emch04/framework) packs (login, permissions, sessions) |
 | `mobile` | an Expo app (iPhone, Android) |
 | `desktop` | an Electron app (Mac, Windows, Linux) |
 

package/README.md

@@ -4,6 +4,13 @@
 
 <p align="center"><strong>Français</strong> · <a href="README.en.md">English</a></p>
 
+<p align="center">
+  <a href="https://www.npmjs.com/package/humalis"><img src="https://img.shields.io/npm/v/humalis" alt="npm"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/licence-Humalis%201.0-c1e928" alt="Licence"></a>
+  <a href="https://github.com/emch04/framework"><img src="https://img.shields.io/badge/serveur-Astratra-6f42c1" alt="Astratra"></a>
+  <a href="https://hub.xerj.org/contributors/emch04"><img src="https://hub.xerj.org/contributors/emch04/badge.svg" alt="XERJ Corpus Hub contributor"></a>
+</p>
+
 # Humalis
 
 **Un seul langage, en français, pour créer une application complète** : un site web, une application mobile, une application de bureau et son serveur, à partir du même fichier.
@@ -57,7 +64,7 @@ humalis compile mon-projet.humalis --cible serveur --sortie mon-projet-serveur
 |---|---|
 | `web` | un projet React + Vite, prérendu (une page HTML par adresse) |
 | `statique` | des pages HTML, CSS et JavaScript, sans construction |
-| `serveur` | un serveur Node avec les packs Astratra (connexion, droits, sessions) |
+| `serveur` | un serveur Node avec les packs [Astratra](https://github.com/emch04/framework) (connexion, droits, sessions) |
 | `mobile` | une application Expo (iPhone, Android) |
 | `desktop` | une application Electron (Mac, Windows, Linux) |
 

package/dist/analyse/analyse.js

@@ -55,7 +55,7 @@ function modesVus(programme) {
         return ['clair', 'sombre'];
     return JSON.stringify(programme).includes('"action":"changerTheme"') ? ['clair', 'sombre'] : [mode];
 }
-export function analyserSens(programme) {
+export function analyserSens(programme, classesCss) {
     const resultat = {
         diagnostics: [],
         elements: new Map(),
@@ -105,11 +105,10 @@ export function analyserSens(programme) {
     filtresDesPages.clear();
     for (const p of programme.pages)
         filtresDesPages.set(p.nom, p.filtres ?? []);
-    // Les classes définies dans les blocs « style : ». Avec un fichier CSS
-    // séparé, que l'analyse ne lit pas, on ne vérifie rien.
-    const classes = programme.fichiersStyle.length > 0
+    // Un fichier CSS déclaré mais illisible rend la vérification des noms incertaine.
+    const classes = classesCss ?? (programme.fichiersStyle.length > 0
         ? undefined
-        : new Set(programme.styles.flatMap((b) => [...b.css.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g)].map((m) => m[1])));
+        : new Set(programme.styles.flatMap((b) => [...b.css.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g)].map((m) => m[1]))));
     // Les variables du haut du fichier sont partagées entre les pages : on
     // les analyse une fois, puis chaque page les voit (portée « application »).
     const globale = new AnalysePage({ type: 'Page', nom: '', parametres: [], corps: [], ligne: 0 }, nomsPages, resultat, classes);
@@ -935,7 +934,7 @@ class AnalysePage {
         }
         for (const classe of element.classes) {
             if (this.classesDefinies && !this.classesDefinies.has(classe)) {
-                this.avertissement(`la classe CSS « ${classe} » n'est définie dans aucun bloc style.`, element.ligne);
+                this.avertissement(`le style « ${classe} » n'est défini dans aucun CSS du projet.${proposerNom(classe, this.classesDefinies)}`, element.ligne);
             }
         }
         verifierElementEcran(element, this.signaler());
@@ -1110,7 +1109,7 @@ class AnalysePage {
         }
         for (const classe of bloc.classes) {
             if (this.classesDefinies && !this.classesDefinies.has(classe)) {
-                this.avertissement(`la classe CSS « ${classe} » n'est définie dans aucun bloc style.`, bloc.ligne);
+                this.avertissement(`le style « ${classe} » n'est défini dans aucun CSS du projet.${proposerNom(classe, this.classesDefinies)}`, bloc.ligne);
             }
         }
         verifierBlocEcran(bloc, this.pileBlocs[this.pileBlocs.length - 1], this.signaler());

package/dist/analyse/css.js

@@ -0,0 +1,28 @@
+/** Repère les classes dans les sélecteurs et les déclarations qui forcent les styles Humalis. */
+export function verifierCss(css, premiereLigne, fichier) {
+    const classes = new Set();
+    const diagnostics = [];
+    const sansCommentaires = css.replace(/\/\*[\s\S]*?\*\//g, (commentaire) => commentaire.replace(/[^\n]/g, ' '));
+    const regles = /([^{}]+)\{([^{}]*)\}/g;
+    for (const regle of sansCommentaires.matchAll(regles)) {
+        const selecteur = regle[1];
+        if (selecteur.trimStart().startsWith('@'))
+            continue;
+        const noms = [...selecteur.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g)].map((m) => m[1]);
+        for (const nom of noms)
+            classes.add(nom);
+        const humalis = noms.filter((nom) => nom.startsWith('humalis-'));
+        if (humalis.length === 0)
+            continue;
+        for (const declaration of regle[2].matchAll(/(?:^|;)\s*([\w-]+)\s*:\s*([^;]*!\s*important)\s*(?=;|$)/gi)) {
+            const avant = sansCommentaires.slice(0, regle.index + selecteur.length + 1 + (declaration.index ?? 0));
+            const ligne = premiereLigne + (avant.match(/\n/g)?.length ?? 0);
+            for (const nom of humalis)
+                diagnostics.push({
+                    gravite: 'avertissement', ligne, ...(fichier ? { fichier } : {}),
+                    message: `le CSS écrase « ${nom} » avec !important (${declaration[1]}) : les réglages Humalis de cet élément (remplissage, largeur…) ne s'appliqueront plus. Retirez !important, ou visez votre propre classe avec « avec style ».`,
+                });
+        }
+    }
+    return { classes, diagnostics };
+}

package/dist/cibles/commun/mouvement.js

@@ -256,6 +256,35 @@ ${OBSERVATEUR_DEFILEMENT.replace('function observerLeDefilement() {', 'export fu
     .replace('const morceaux = [];', 'const morceaux: [Text, string][] = [];')
     .replace('const noeud = parcours.currentNode;', 'const noeud = parcours.currentNode as Text;')}
 `;
+/**
+ * La hauteur de l'en-tête fixe ou collé, gardée dans --humalis-hauteur-entete : « entete avec fixe »
+ * place la zone qui défile dessous, « hauteur ecran » s'en sert pour remplir l'écran.
+ */
+export const SUIVI_ENTETE = `function suivreLaHauteurDeLEntete() {
+  const entete = () => document.querySelector('header.humalis-fixe-oui, header.humalis-colle-haut');
+  const regler = () => {
+    const e = entete();
+    document.documentElement.style.setProperty('--humalis-hauteur-entete', e ? e.offsetHeight + 'px' : '0px');
+  };
+  regler();
+  addEventListener('resize', regler);
+  if (!('ResizeObserver' in window)) return;
+  const observateur = new ResizeObserver(regler);
+  const suivre = () => {
+    const e = entete();
+    if (e) observateur.observe(e);
+    regler();
+  };
+  suivre();
+  // L'en-tête peut apparaître après le chargement (le web le dessine après le script).
+  new MutationObserver(suivre).observe(document.body, { childList: true, subtree: true });
+}`;
+/** Vrai si une page a besoin de la hauteur de l'en-tête. */
+export const suitLEntete = (codes) => codes.some((c) => c.includes('humalis-fixe-oui') || c.includes('humalis-hauteur-ecran'));
+/** src/humalis/entete.ts du web et du desktop : le même script, typé. */
+export const ENTETE_WEB = `// Produit par Humalis : la hauteur de l'en-tête, pour « entete avec fixe » et « hauteur ecran ».
+${SUIVI_ENTETE.replace('function suivreLaHauteurDeLEntete() {', 'export function suivreLaHauteurDeLEntete(): void {').replace("const entete = () => document.querySelector(", "const entete = () => document.querySelector<HTMLElement>(")}
+`;
 /** 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, '').replace(/ data-humalis-tape="[a-z-]*"/g, '').replace(/<code class="humalis-frappe-copie"[\\s\\S]*?<\\/code>/g, ''),

package/dist/cibles/commun/reperes.js

@@ -0,0 +1,70 @@
+/**
+ * Les repères du mode développement (« humalis developper ») : chaque
+ * élément de la page porte son fichier Humalis et sa ligne,
+ * `data-humalis-source="pages/accueil.humalis:12"`, pour que l'inspecteur
+ * du navigateur mène droit au code. Le chemin est relatif au fichier
+ * principal, comme l'auteur l'écrit ; la ligne est celle de ce fichier.
+ *
+ * Une compilation normale n'en reçoit aucun : les cibles ne les écrivent
+ * que si on leur donne la table des fichiers du projet (`sources`).
+ */
+import { DECALAGE, ligneLocale } from '../../fichiers.js';
+import { echapperAttribut } from '../statique/html.js';
+/**
+ * « pages/accueil.humalis:12 » : la ligne fusionnée du projet (k × DECALAGE
+ * + ligne, voir src/fichiers.ts) rendue à son fichier. `fichiers` est la
+ * liste rendue par compilerProjet, le principal en premier. Undefined si la
+ * ligne est inconnue (0) ou hors de la table.
+ */
+export function repereSource(ligne, fichiers) {
+    const locale = ligneLocale(ligne);
+    const fichier = fichiers[Math.floor(ligne / DECALAGE)];
+    return fichier === undefined || locale <= 0 ? undefined : `${fichier}:${locale}`;
+}
+/** L'attribut en HTML : ` data-humalis-source="…"`, la valeur échappée. */
+export function attributSourceHtml(repere) {
+    return ` data-humalis-source="${echapperAttribut(repere)}"`;
+}
+/**
+ * L'attribut en JSX. Une chaîne JSX entre guillemets lit les entités HTML
+ * (« &amp; ») et ne connaît pas l'échappement : dès qu'un caractère
+ * pourrait gêner, la valeur devient une expression JavaScript.
+ */
+export function attributSourceJsx(repere) {
+    return /^[\w./:@ -]*$/u.test(repere) ? ` data-humalis-source="${repere}"` : ` data-humalis-source={${JSON.stringify(repere)}}`;
+}
+/** Ajoute l'attribut juste après le nom de la balise ouvrante (`<h1 …`, `<Lien …`) ; un fragment (`<>`) reste tel quel. */
+export function marquerBalise(balise, attribut) {
+    return balise.replace(/^<[A-Za-z][\w.]*/, (debut) => debut + attribut);
+}
+/**
+ * L'aide du mode développement : la touche Alt (Option sur Mac) tenue, le
+ * survol d'un élément montre son repère dans une petite étiquette près du
+ * curseur. Du JavaScript simple, servi par « humalis developper » avec le
+ * panneau des erreurs ; il n'entre jamais dans le code produit.
+ */
+export const AIDE_REPERES = `(() => {
+  const etiquette = document.createElement('div');
+  etiquette.id = 'humalis-repere';
+  Object.assign(etiquette.style, {
+    position: 'fixed', zIndex: '999999', pointerEvents: 'none', display: 'none',
+    padding: '2px 6px', borderRadius: '4px', background: '#1d2b24', color: '#fff',
+    font: '12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace', whiteSpace: 'nowrap',
+  });
+  document.body.append(etiquette);
+  let dernier = null;
+  const cacher = () => { etiquette.style.display = 'none'; };
+  const montrer = (evenement) => {
+    const cible = evenement.target && evenement.target.closest ? evenement.target.closest('[data-humalis-source]') : null;
+    if (!evenement.altKey || !cible) return cacher();
+    etiquette.textContent = cible.getAttribute('data-humalis-source');
+    etiquette.style.left = (evenement.clientX + 12) + 'px';
+    etiquette.style.top = (evenement.clientY + 14) + 'px';
+    etiquette.style.display = 'block';
+  };
+  document.addEventListener('mousemove', (evenement) => { dernier = evenement; montrer(evenement); });
+  document.addEventListener('keydown', (evenement) => { if (evenement.key === 'Alt' && dernier) montrer({ altKey: true, target: dernier.target, clientX: dernier.clientX, clientY: dernier.clientY }); });
+  document.addEventListener('keyup', (evenement) => { if (evenement.key === 'Alt') cacher(); });
+  window.addEventListener('blur', cacher);
+})();
+`;

package/dist/cibles/mobile/projet.js

@@ -221,6 +221,12 @@ export function verifierPourLeMobile(application) {
     for (const ligne of lignesAvecReglage([...application.ecrans, ...application.composants].flatMap((e) => e.vue), 'colle')) {
         avertir(ligne, "« colle » n'a pas d'effet sur le téléphone, sauf pour l'en-tête et le pied de page.");
     }
+    // « defilement interne », « hauteur ecran » : sur un téléphone, toute la page défile.
+    for (const reglage of ['defilement', 'hauteur']) {
+        for (const ligne of lignesAvecReglage([...application.ecrans, ...application.composants].flatMap((e) => e.vue), reglage)) {
+            avertir(ligne, `« ${reglage === 'defilement' ? 'defilement interne' : 'hauteur ecran'} » n'a pas d'effet sur le téléphone : toute la page défile.`);
+        }
+    }
     // M7 : pas de souris ; les composants React sont recopiés tels quels.
     const gestionnaires = [...application.ecrans, ...application.composants].flatMap((e) => [
         ...e.gestionnaires,

package/dist/cibles/statique/page.js

@@ -11,6 +11,7 @@ import { verificationsDuChamp, messageEnCode, libellesEnLangues, messageEnLangue
 import { sousActions } from '../../ri/actions.js';
 import { colorerCodeHumalis } from '../commun/colorerCode.js';
 import { attributsFrappe } from '../commun/mouvement.js';
+import { repereSource } from '../commun/reperes.js';
 import { arbreWidget, arbreComposite, initiales } from './widgets.js';
 import { iconeHtml, etoilesHtml } from './html-elements.js';
 import { appelGraphique, htmlGraphique } from './graphique.js';
@@ -912,7 +913,7 @@ ${prise}${code}}
                 case 'bloc': {
                     if (noeud.genre === 'liste' || noeud.genre === 'listeNumerotee') {
                         const balise = noeud.genre === 'liste' ? 'ul' : 'ol';
-                        e.ligne(`creer('${balise}', { class: 'humalis-liste' },`);
+                        e.ligne(`creer('${balise}', { ${this.repereObjetJs(noeud.ligne)}class: 'humalis-liste' },`);
                         e.indenter(() => noeud.corps.forEach((enfant) => {
                             if (enfant.type === 'repetition') {
                                 const debut = `...${expressionJs(enfant.liste, this.contexte)}.flatMap((${nomJs(enfant.variable)}) => `;
@@ -931,7 +932,7 @@ ${prise}${code}}
                     const balise = BALISES_BLOC[noeud.genre] ?? 'div';
                     // « menu repliable » : le bouton « Menu » en premier enfant (l'écouteur est dans humalis.js).
                     const bouton = estRepliable(noeud) ? `creer('button', { type: 'button', class: 'humalis-menu-bouton', 'aria-expanded': 'false', 'aria-label': 'Menu' }, creer('span', { class: 'humalis-menu-icone', 'aria-hidden': 'true' })), ` : '';
-                    this.ecrireGroupe(e, noeud.corps, `creer('${balise}', { class: ${chaine(classesDuBloc(noeud))} }, ${bouton}...`, '),');
+                    this.ecrireGroupe(e, noeud.corps, `creer('${balise}', { ${this.repereObjetJs(noeud.ligne)}class: ${chaine(classesDuBloc(noeud))} }, ${bouton}...`, '),');
                     // « arrive en bas de » ce bloc : la sentinelle observée et le vrai bouton « Voir plus », tant que la condition est vraie.
                     const bas = noeud.id !== undefined ? this.basDesBlocs.get(noeud.id) : undefined;
                     if (bas) {
@@ -947,7 +948,7 @@ ${prise}${code}}
                 case 'formulaire': {
                     // Entrée ou le bouton envoient le formulaire, sans recharger la page.
                     const soumission = this.formulaires.get(noeud.id)?.soumission ?? '() => {}';
-                    const ouverture = `creer('form', { 'data-humalis': ${chaine(noeud.id)}, class: 'humalis-formulaire', novalidate: true, onsubmit: ${soumission} }, ...`;
+                    const ouverture = `creer('form', { ${this.repereObjetJs(noeud.ligne)}'data-humalis': ${chaine(noeud.id)}, class: 'humalis-formulaire', novalidate: true, onsubmit: ${soumission} }, ...`;
                     if (this.montres.has(noeud.id) || this.caches.has(noeud.id)) {
                         this.ecrireGroupe(e, noeud.corps, `...(visibilite[${chaine(noeud.id)}] ? [${ouverture}`, ')] : []),');
                     }
@@ -970,7 +971,7 @@ ${prise}${code}}
     /** `creer('p', { … }, contenu)`. */
     elementJs(noeud) {
         const commun = (avant = []) => {
-            const liste = [...avant, ["'data-humalis'", chaine(noeud.id)]];
+            const liste = [...this.repereJs(noeud.ligne), ...avant, ["'data-humalis'", chaine(noeud.id)]];
             const classes = this.classes(noeud);
             if (classes)
                 liste.push(['class', chaine(classes)]);
@@ -1051,7 +1052,7 @@ ${prise}${code}}
                 const parmi = saisie?.parmi ? expressionJs(saisie.parmi, this.contexte) : '[]';
                 const radio = `creer('input', { type: 'radio', name: ${chaine(noeud.id)}, value: valeur, checked: ${variable} === valeur, oninput: () => { ${variable} = valeur; } })`;
                 const classes = this.classes(noeud);
-                const groupe = [["'data-humalis'", chaine(noeud.id)], ['class', chaine(classes ? `${classes} humalis-choix` : 'humalis-choix')]];
+                const groupe = [...this.repereJs(noeud.ligne), ["'data-humalis'", chaine(noeud.id)], ['class', chaine(classes ? `${classes} humalis-choix` : 'humalis-choix')]];
                 return `creer('fieldset', ${objet(groupe)}, creer('legend', {}, ${libelle}), ...${parmi}.map((valeur) => creer('label', {}, ${radio}, valeur)))`;
             }
             case 'liste': {
@@ -1187,7 +1188,7 @@ ${prise}${code}}
                 case 'bloc': {
                     if (noeud.genre === 'liste' || noeud.genre === 'listeNumerotee') {
                         const balise = noeud.genre === 'liste' ? 'ul' : 'ol';
-                        lignes.push(`<${balise} class="humalis-liste">`);
+                        lignes.push(`<${balise}${attributs([this.repereHtml(noeud.ligne)])} class="humalis-liste">`);
                         for (const enfant of noeud.corps) {
                             if (enfant.type === 'repetition') {
                                 const valeurs = evaluer(enfant.liste, env);
@@ -1210,7 +1211,7 @@ ${prise}${code}}
                         break;
                     }
                     const balise = BALISES_BLOC[noeud.genre] ?? 'div';
-                    lignes.push(`<${balise}${attributs([['class', classesDuBloc(noeud)]])}>`);
+                    lignes.push(`<${balise}${attributs([this.repereHtml(noeud.ligne), ['class', classesDuBloc(noeud)]])}>`);
                     if (estRepliable(noeud))
                         lignes.push('<button type="button" class="humalis-menu-bouton" aria-expanded="false" aria-label="Menu"><span class="humalis-menu-icone" aria-hidden="true"></span></button>');
                     this.ecrireGroupeHtml(noeud.corps, env, lignes);
@@ -1227,7 +1228,7 @@ ${prise}${code}}
                     // Un formulaire que l'on montre est caché au départ.
                     if (this.montres.has(noeud.id))
                         break;
-                    lignes.push(`<form${attributs([['data-humalis', noeud.id], ['class', 'humalis-formulaire'], ['novalidate', 'true']])}>`);
+                    lignes.push(`<form${attributs([this.repereHtml(noeud.ligne), ['data-humalis', noeud.id], ['class', 'humalis-formulaire'], ['novalidate', 'true']])}>`);
                     this.ecrireGroupeHtml(noeud.corps, env, lignes);
                     lignes.push('</form>');
                     break;
@@ -1508,7 +1509,7 @@ ${prise}${code}}
         const saisie = noeud.saisie;
         const sorte = saisie?.sorte ?? 'texte';
         const libelle = saisie?.obligatoire ? `<span>${contenu}${ETOILE_HTML}</span>` : contenu;
-        const base = [['data-humalis', noeud.id], ['class', classes]];
+        const base = [this.repereHtml(noeud.ligne), ['data-humalis', noeud.id], ['class', classes]];
         const options = (liste) => [
             ...liste,
             ['required', saisie?.obligatoire ? 'true' : undefined],
@@ -1527,7 +1528,7 @@ ${prise}${code}}
                 const radios = parmi()
                     .map((v) => `<label><input${attributs([['type', 'radio'], ['name', noeud.id], ['value', v]])}>${echapperTexte(v)}</label>`)
                     .join('');
-                return `<fieldset${attributs([['data-humalis', noeud.id], ['class', classes ? `${classes} humalis-choix` : 'humalis-choix']])}><legend>${libelle}</legend>${radios}</fieldset>`;
+                return `<fieldset${attributs([this.repereHtml(noeud.ligne), ['data-humalis', noeud.id], ['class', classes ? `${classes} humalis-choix` : 'humalis-choix']])}><legend>${libelle}</legend>${radios}</fieldset>`;
             }
             case 'liste': {
                 const choix = parmi().map((v) => `<option${attributs([['value', v]])}>${echapperTexte(v)}</option>`).join('');
@@ -1542,9 +1543,22 @@ ${prise}${code}}
             }
         }
     }
+    /** Le mode développement : le fichier et la ligne Humalis de l'élément, en HTML (attributs() l'échappe ; absent sans le mode). */
+    repereHtml(ligne) {
+        return ['data-humalis-source', this.site.reperes ? repereSource(ligne, this.site.reperes) : undefined];
+    }
+    /** Le même repère pour creer() : rien sans le mode. */
+    repereJs(ligne) {
+        const repere = this.site.reperes ? repereSource(ligne, this.site.reperes) : undefined;
+        return repere === undefined ? [] : [["'data-humalis-source'", chaine(repere)]];
+    }
+    /** `'data-humalis-source': '…', ` au début d'un objet d'attributs écrit à la main. */
+    repereObjetJs(ligne) {
+        return this.repereJs(ligne).map(([nom, valeur]) => `${nom}: ${valeur}, `).join('');
+    }
     elementHtml(noeud, env) {
         const classes = this.classes(noeud) || undefined;
-        const commun = (avant = []) => attributs([...avant, ['data-humalis', noeud.id], ['class', classes], ...(noeud.annonce ? [['aria-live', 'polite'], ['aria-atomic', 'true']] : []), ...attributsRaccourci(noeud)]);
+        const commun = (avant = []) => attributs([this.repereHtml(noeud.ligne), ...avant, ['data-humalis', noeud.id], ['class', classes], ...(noeud.annonce ? [['aria-live', 'polite'], ['aria-atomic', 'true']] : []), ...attributsRaccourci(noeud)]);
         const lucideHtml = noeud.reglages?.icone ? chercherIcone(noeud.reglages.icone)?.lucide : undefined;
         const contenu = (lucideHtml ? iconeHtml(lucideHtml, 'humalis-icone') : '') + this.contenuAccentHtml(noeud.contenu, noeud.genre, env);
         switch (noeud.genre) {

package/dist/cibles/statique/projet.js

@@ -14,7 +14,7 @@ import { cssGraphique } from '../web/graphique.js';
 import { cssEcran } from '../web/css-ecran.js';
 import { cssElements } from '../web/css-elements.js';
 import { cssInteractions } from '../web/interactions.js';
-import { cssMouvement, animeAuDefilement, OBSERVATEUR_DEFILEMENT } from '../commun/mouvement.js';
+import { cssMouvement, animeAuDefilement, OBSERVATEUR_DEFILEMENT, SUIVI_ENTETE, suitLEntete } from '../commun/mouvement.js';
 import { cssTheme, changeLeTheme, modeParDefaut, SCRIPT_THEME, CLE_THEME } from '../web/theme.js';
 import { FORMAT_JS, FORMAT_JS_LANGUES, TAILLE_JS, DATES_JS } from '../format.js';
 import { CLE_LANGUE } from '../web/langue.js';
@@ -48,6 +48,7 @@ export function genererProjetStatique(application, options) {
         composants: new Map(application.composants.map((c) => [c.nom, c])),
         medias: options.medias,
         ...(application.langues ? { langues: application.langues } : {}),
+        ...(options.sources ? { reperes: options.sources } : {}),
     };
     const langue = application.langues?.[0].code;
     // Le CSS de l'utilisateur, recopié tel quel (décision W8), chargé après
@@ -137,6 +138,10 @@ ${fonctions.join('\n')}`);
     if ([...fichiers.values()].some((contenu) => contenu.includes('humalis-menu-bouton'))) {
         fichiers.set('humalis/humalis.js', `${fichiers.get('humalis/humalis.js')}\n${MENU_REPLIABLE_JS}`);
     }
+    // « entete avec fixe », « hauteur ecran » : la hauteur de l'en-tête, suivie par un petit script.
+    if (suitLEntete([...fichiers.values()])) {
+        fichiers.set('humalis/humalis.js', `${fichiers.get('humalis/humalis.js')}\n// La hauteur de l'en-tête, pour « entete avec fixe » et « hauteur ecran ».\n${SUIVI_ENTETE}\nsuivreLaHauteurDeLEntete();\n`);
+    }
     // L'observateur des animations « au defilement », seulement si une page en a : il pose humalis-js au chargement.
     if (animeAuDefilement([...fichiers.values()])) {
         fichiers.set('humalis/humalis.js', `${fichiers.get('humalis/humalis.js')}\n// Les animations « au defilement » attendent que l'élément entre à l'écran.\n${OBSERVATEUR_DEFILEMENT}\nobserverLeDefilement();\n`);

package/dist/cibles/web/css-ecran.js

@@ -24,7 +24,7 @@ const ANGLES = { diagonale: '135deg', vertical: '180deg', horizontal: '90deg' };
 /** Les classes `humalis-<réglage>-<valeur>` qui apparaissent dans le code produit. */
 export function reglagesUtilises(codes) {
     const trouves = new Set();
-    const motif = /humalis-(colonnes|espacement|remplissage|alignement|repartition|largeur|ombre|degrade|colle|bordure|sur)-([a-z0-9_-]+)/g;
+    const motif = /humalis-(colonnes|espacement|remplissage|alignement|repartition|largeur|ombre|degrade|colle|bordure|sur|defilement|hauteur|fixe)-([a-z0-9_-]+)/g;
     for (const code of codes)
         for (const m of code.matchAll(motif))
             trouves.add(`${m[1]}-${m[2]}`);
@@ -130,6 +130,24 @@ export function cssEcran(codes) {
             case 'sur':
                 appareil = true;
                 break;
+            case 'defilement':
+                // « defilement interne » : le bloc défile seul, sans entraîner la page ; une barre fine.
+                if (valeur === 'interne')
+                    regles.push(`${classe} { overflow-y: auto; overscroll-behavior: contain; min-height: 0; max-height: 100%; align-self: stretch; scrollbar-width: thin; }`);
+                break;
+            case 'hauteur':
+                // « hauteur ecran » : l'écran moins l'en-tête (mesuré par le script, 0 sans en-tête fixe ou collé).
+                if (valeur === 'ecran')
+                    regles.push(`${classe} { height: calc(100dvh - var(--humalis-hauteur-entete, 0px)); min-height: 0; overflow: auto; }`);
+                break;
+            case 'fixe':
+                // « entete avec fixe » : l'en-tête ne bouge pas ; sur le web, la racine devient la zone qui
+                // défile, sous l'en-tête ; sur le statique, la page laisse la place de l'en-tête.
+                regles.push(`header${classe} { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--humalis-page); }`);
+                regles.push('html:has(#racine > .humalis-fixe-oui), html:has(#racine > .humalis-fixe-oui) body { height: 100%; overflow: hidden; }');
+                regles.push('#racine:has(> .humalis-fixe-oui) { position: fixed; top: var(--humalis-hauteur-entete, 0px); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; }');
+                regles.push('body:has(header.humalis-fixe-oui) { padding-top: var(--humalis-hauteur-entete, 0px); }');
+                break;
         }
     }
     if (appareil) {

package/dist/cibles/web/ecran.js

@@ -13,6 +13,7 @@ import { typeTS, typeDe, expression, contenuJSX, condition, ficheAvec } from './
 import { importsDesInteractions, decrireTouches } from './interactions.js';
 import { colorerCodeHumalis } from '../commun/colorerCode.js';
 import { attributsFrappe } from '../commun/mouvement.js';
+import { repereSource, attributSourceJsx, marquerBalise } from '../commun/reperes.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. */
@@ -1621,7 +1622,7 @@ class GenerateurEcran {
                             break;
                         }
                         const balise = noeud.genre === 'liste' ? 'ul' : 'ol';
-                        e.ligne(`<${balise} className="humalis-liste">`);
+                        e.ligne(this.marquer(`<${balise} className="humalis-liste">`, noeud.ligne));
                         e.indenter(() => noeud.corps.forEach((enfant) => {
                             if (enfant.type === 'repetition') {
                                 this.listeEnCours = noeud.genre;
@@ -1640,7 +1641,7 @@ class GenerateurEcran {
                         this.ecrireComposite(e, noeud);
                         break;
                     }
-                    e.ligne(this.rendu.bloc.ouvrir(noeud.genre, noeud.options, noeud.classes, noeud.ancre));
+                    e.ligne(this.marquer(this.rendu.bloc.ouvrir(noeud.genre, noeud.options, noeud.classes, noeud.ancre), noeud.ligne));
                     // Des variables dans le bloc : écrites comme dans une condition.
                     e.indenter(() => noeud.corps.some((n) => n.type === 'locale') ? this.ecrireGroupe(e, noeud.corps) : this.ecrireVue(e, noeud.corps));
                     e.ligne(this.rendu.bloc.fermer(noeud.genre, noeud.options));
@@ -1668,7 +1669,7 @@ class GenerateurEcran {
                     break;
                 case 'formulaire': {
                     const ecrire = () => {
-                        e.ligne(this.rendu.formulaire.ouvrir(noeud.id, this.formulaires.get(noeud.id)?.soumission));
+                        e.ligne(this.marquer(this.rendu.formulaire.ouvrir(noeud.id, this.formulaires.get(noeud.id)?.soumission), noeud.ligne));
                         // Des variables dans le bloc : écrites comme dans une condition.
                         e.indenter(() => noeud.corps.some((n) => n.type === 'locale') ? this.ecrireGroupe(e, noeud.corps) : this.ecrireVue(e, noeud.corps));
                         e.ligne(this.rendu.formulaire.fermer);
@@ -1876,6 +1877,11 @@ class GenerateurEcran {
             ...(image.prioritaire ? { prioritaire: true } : {}),
         };
     }
+    /** Le mode développement (le web seulement) : la balise ouvrante porte le fichier et la ligne Humalis. */
+    marquer(balise, ligne) {
+        const repere = this.application.reperes && !this.application.rendu ? repereSource(ligne, this.application.reperes) : undefined;
+        return repere === undefined ? balise : marquerBalise(balise, attributSourceJsx(repere));
+    }
     ecrireElement(e, noeud) {
         const parAttribut = new Map(this.attributs.get(noeud.id) ?? []);
         // Dans un formulaire : un bouton sans clic propre l'envoie, une saisie d'une ligne aussi (touche du clavier).
@@ -1914,7 +1920,7 @@ class GenerateurEcran {
         const source = texteLitteral(noeud.contenu);
         const variable = this.contexte.champs.get(noeud.id) ?? '';
         const ouvert = this.ouvertes.get(noeud.id);
-        const balise = this.rendu.element({
+        const balise = this.marquer(this.rendu.element({
             genre: noeud.genre,
             id: noeud.id,
             options: noeud.options,
@@ -1949,7 +1955,7 @@ class GenerateurEcran {
             },
             envoie: noeud.genre === 'bouton' && formulaire !== undefined && !aSonClic,
             ...(noeud.image ? { image: this.image(noeud.image, noeud.contenu) } : {}),
-        });
+        }), noeud.ligne);
         if (this.montres.has(noeud.id) || this.caches.has(noeud.id)) {
             e.ligne(`{visibilite[${chaine(noeud.id)}] && ${balise}}`);
         }

package/dist/cibles/web/langue.js

@@ -51,6 +51,9 @@ ${entete(langues)}const CLE = ${chaine(CLE_LANGUE)};
  */
 function langueDeDepart(): Langue {
   if (typeof window === 'undefined') return LANGUES[0];
+  // Le prérendu (un navigateur automatisé) écrit les pages dans la langue de base du site,
+  // celle que les moteurs de recherche doivent lire, quelle que soit la langue de ce navigateur.
+  if (navigator.webdriver) return LANGUES[0];
   try {
     const gardee = localStorage.getItem(CLE);
     if (estLangue(gardee)) return gardee;

package/dist/cibles/web/projet.js

@@ -3,7 +3,7 @@ import { robotsTxt, manifeste, fichiersDuSite, balisesIcone, estExterne } from '
 import { sousActions } from '../../ri/actions.js';
 import { cssEcran } from './css-ecran.js';
 import { cssElements } from './css-elements.js';
-import { cssMouvement, animeAuDefilement, MOUVEMENT_WEB, NETTOYAGE_PRERENDU } from '../commun/mouvement.js';
+import { cssMouvement, animeAuDefilement, MOUVEMENT_WEB, NETTOYAGE_PRERENDU, ENTETE_WEB, suitLEntete } from '../commun/mouvement.js';
 import { fichiersDesElements, dependancesDesElements, dependancesDeDeveloppement } from './widgets.js';
 import { fichiersGraphique, cssGraphique } from './graphique.js';
 import { cssTheme, changeLeTheme, modeParDefaut, themeTs, SCRIPT_THEME } from './theme.js';
@@ -79,6 +79,7 @@ export function genererProjetWeb(application, options) {
         // Le bloc « site » ou un « apercu » : chaque page pose ses balises de partage.
         ...(application.site || application.ecrans.some((e) => e.apercu) ? { publication: { site: application.site, adresse: options.adresse } } : {}),
         ...(application.langues ? { langues: application.langues } : {}),
+        ...(options.sources ? { reperes: options.sources } : {}),
     };
     let session = false;
     for (const c of application.composants) {
@@ -199,6 +200,10 @@ export function genererProjetWeb(application, options) {
     const defilementAnime = animeAuDefilement(codes);
     if (defilementAnime)
         fichiers.set('src/humalis/mouvement.ts', MOUVEMENT_WEB);
+    // « entete avec fixe », « hauteur ecran » : la hauteur de l'en-tête, suivie par un petit script.
+    const enteteSuivie = suitLEntete(codes);
+    if (enteteSuivie)
+        fichiers.set('src/humalis/entete.ts', ENTETE_WEB);
     // Le CSS de l'utilisateur, recopié tel quel (décision W8), chargé après
     // celui de Humalis pour pouvoir le redéfinir.
     const feuilles = [];
@@ -225,7 +230,7 @@ export function genererProjetWeb(application, options) {
         ...(ecran.reservee ? { reservee: { qui: ecran.reservee.qui, sinon: chemins.get(ecran.reservee.sinon) ?? '/' } } : {}),
         sansEntete: ecran.sansEntete,
         sansPied: ecran.sansPied,
-    })), feuilles, application.partages.length > 0, session, introuvable?.page.composant, dispositions, utiliseDefilement, defilementAnime));
+    })), feuilles, application.partages.length > 0, session, introuvable?.page.composant, dispositions, utiliseDefilement, defilementAnime, enteteSuivie));
     for (const { page } of pages)
         fichiers.set(`src/pages/${page.composant}.tsx`, page.code);
     // Les images locales, recopiées là où le site les cherche (/images/…) : décision M5.
@@ -506,7 +511,7 @@ function lignesDeRoute(r, toutes, niveau, cheminParent) {
         lignes.push(`${espaces(0)}</Route>`);
     return lignes;
 }
-function mainTsx(routes, feuilles, partage, session, introuvable, dispositions = {}, defilement = false, mouvement = false) {
+function mainTsx(routes, feuilles, partage, session, introuvable, dispositions = {}, defilement = false, mouvement = false, entete = false) {
     const imports = routes.map((r) => `import ${r.composant} from './pages/${r.composant}';`).join('\n');
     // Les pages qui ont le même en-tête et le même pied partagent une disposition ; une sous-page suit son parent.
     const groupes = new Map();
@@ -532,7 +537,7 @@ import { Messages } from './humalis/messages';${defilement ? "\nimport { Defilem
 ${session ? "import { Session } from './humalis/session';\n" : ''}${partage ? "import { Partage } from './humalis/partage';\n" : ''}${routes.some((r) => r.reservee) ? "import { Reservee } from './humalis/reservee';\n" : ''}${introuvable ? `import ${introuvable} from './pages/${introuvable}';` : "import Introuvable from './Introuvable';"}
 ${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('')}
+${mouvement ? "import { observerLeDefilement } from './humalis/mouvement';\n" : ''}${entete ? "import { suivreLaHauteurDeLEntete } from './humalis/entete';\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)) {
@@ -548,7 +553,7 @@ ${routesTsx}
     </BrowserRouter>
   </StrictMode>,
 );
-${mouvement ? '\n// Les animations « au defilement » attendent que l\'élément entre à l\'écran.\nobserverLeDefilement();\n' : ''}`;
+${mouvement ? '\n// Les animations « au defilement » attendent que l\'élément entre à l\'écran.\nobserverLeDefilement();\n' : ''}${entete ? '\n// « entete avec fixe », « hauteur ecran » : la hauteur de l\'en-tête.\nsuivreLaHauteurDeLEntete();\n' : ''}`;
 }
 /**
  * Les aides de navigation du code produit : le lien « actif », le défilement

package/dist/cli.js

@@ -163,11 +163,16 @@ function compile(arguments_) {
     const medias = lireMedias(application, chemin);
     if (!medias)
         return 1;
-    const optionsWeb = { nom, adresse: adresse ?? 'http://localhost', source: basename(chemin), fichiersStyle, composantsReact, polices, images, medias };
+    // --diagnostics-port n'est passé que par « humalis developper » : le mode développement, où chaque
+    // élément porte son fichier et sa ligne Humalis (data-humalis-source). Jamais dans une compilation normale.
+    const portDiagnostics = option(arguments_, 'diagnostics-port');
+    const optionsWeb = {
+        nom, adresse: adresse ?? 'http://localhost', source: basename(chemin), fichiersStyle, composantsReact, polices, images, medias,
+        ...(portDiagnostics !== undefined ? { sources: fichiersDuProjet } : {}),
+    };
     const fichiers = composants
         ? genererComposantsWeb(application, optionsWeb)
         : genererProjetWeb(application, optionsWeb);
-    const portDiagnostics = option(arguments_, 'diagnostics-port');
     if (portDiagnostics !== undefined && fichiers.has('index.html')) {
         const index = fichiers.get('index.html');
         fichiers.set('index.html', index.replace('</body>', `<script type="module" src="http://localhost:${portDiagnostics}/diagnostics.js"></script></body>`));

package/dist/fichiers.js

@@ -5,6 +5,7 @@ import { ErreurSyntaxique } from './parser/erreurs.js';
 import { lireCsv } from './donnees/csv.js';
 import { lireJson } from './donnees/json.js';
 import { analyserSens } from './analyse/analyse.js';
+import { verifierCss } from './analyse/css.js';
 import { construireRepresentation } from './ri/construire.js';
 /**
  * Plusieurs fichiers (trou G4) : les lignes du k-ième fichier utilisé sont
@@ -158,7 +159,26 @@ export function compilerProjet(principal, lire, sourcePrincipale) {
     }
     if (diagnostics.some((d) => d.gravite === 'erreur'))
         return fin();
-    const analyse = analyserSens(programme);
+    const classesCss = new Set();
+    let cssIllisible = false;
+    for (const bloc of programme.styles) {
+        const resultat = verifierCss(bloc.css, bloc.ligne + 1);
+        for (const nom of resultat.classes)
+            classesCss.add(nom);
+        diagnostics.push(...resultat.diagnostics);
+    }
+    for (const fichier of programme.fichiersStyle) {
+        const contenu = lire(joindre(base, fichier.chemin));
+        if (contenu === undefined) {
+            cssIllisible = true;
+            continue;
+        }
+        const resultat = verifierCss(contenu, 1, fichier.chemin.replace(/^\.\//, ''));
+        for (const nom of resultat.classes)
+            classesCss.add(nom);
+        diagnostics.push(...resultat.diagnostics);
+    }
+    const analyse = analyserSens(programme, cssIllisible ? undefined : classesCss);
     diagnostics.push(...analyse.diagnostics);
     if (diagnostics.some((d) => d.gravite === 'erreur'))
         return fin();