humalis 1.1.0 → 1.3.0

package/dist/outils/developpement.js

@@ -3,6 +3,7 @@ import { existsSync, mkdirSync, readFileSync, statSync } from 'node:fs';
 import { createServer } from 'node:http';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { AIDE_REPERES } from '../cibles/commun/reperes.js';
 export function dependances(fichier, source) {
     return [...source.matchAll(/^\s*utiliser\s+(?:fichier|style)\s+"([^"]+)"/gmu)]
         .map((capture) => resolve(dirname(fichier), capture[1]));
@@ -72,7 +73,8 @@ export async function developper(fichier, port) {
         reponse.setHeader('Access-Control-Allow-Origin', '*');
         if (requete.url === '/diagnostics.js') {
             reponse.setHeader('Content-Type', 'text/javascript');
-            reponse.end(`let panneau=document.createElement('pre');panneau.style='position:fixed;inset:0 0 auto;z-index:999999;background:#420;color:white;padding:1rem;white-space:pre-wrap;display:none';document.body.append(panneau);setInterval(async()=>{let e=await(await fetch('http://localhost:${port + 1}/diagnostics')).text();panneau.textContent=e;panneau.style.display=e?'block':'none'},500);`);
+            // L'aide Alt + survol (le fichier et la ligne Humalis d'un élément), puis le panneau des erreurs.
+            reponse.end(AIDE_REPERES + `let panneau=document.createElement('pre');panneau.style='position:fixed;inset:0 0 auto;z-index:999999;background:#420;color:white;padding:1rem;white-space:pre-wrap;display:none';document.body.append(panneau);setInterval(async()=>{let e=await(await fetch('http://localhost:${port + 1}/diagnostics')).text();panneau.textContent=e;panneau.style.display=e?'block':'none'},500);`);
         }
         else {
             reponse.setHeader('Content-Type', 'text/plain; charset=utf-8');

package/dist/parser/miseEnPage.js

@@ -56,7 +56,7 @@ export function analyserStylePropre(flux, propriete) {
     return undefined;
 }
 const APPAREILS = ['telephone', 'tablette', 'ordinateur'];
-const DRAPEAUX = ['modifiable', 'ouvert', 'plusieurs', 'pourcentage', 'boucle'];
+const DRAPEAUX = ['modifiable', 'ouvert', 'plusieurs', 'pourcentage', 'boucle', 'fixe'];
 /** « sur telephone : », « sur tablette ou ordinateur : » (en tête de ligne, suivi d'un appareil). */
 export function estSurAppareil(flux) {
     return flux.verifier('MOT_CLE', 'sur') && estMot(flux.regarder(1)) && APPAREILS.includes(normaliser(flux.regarder(1).valeur));

package/dist/parser/parser.js

@@ -776,7 +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')) ||
+        (genre === 'menu' && (estLeMot(suivant, 'repliable') || estLeMot(suivant, 'vertical'))) ||
         ((genre === 'section' || GENRES_AVEC_TITRE.includes(genre)) && suivant.type === 'CHAINE'));
 }
 function analyserBlocMiseEnPage(flux) {
@@ -786,9 +786,15 @@ function analyserBlocMiseEnPage(flux) {
         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.
-    const repliable = genre === 'menu' && estLeMot(flux.actuel(), 'repliable');
-    if (repliable)
-        flux.avancer();
+    // « 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;
@@ -824,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 } : {}), ...(repliable ? { repliable } : {}), 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', '-');

package/dist/ri/construire.js

@@ -691,6 +691,9 @@ class Construction {
         // « 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,

package/dist/vocabulaire/table-ecran.js

@@ -100,6 +100,10 @@ export const ENTREES_ECRAN = [
     style('ombre', 'Une ombre sous l’élément : aucune, legere, moyenne ou forte.', PAGE('    bloc avec ombre legere :\n        texte "Poisson braisé"'), 'box-shadow', 'StyleSheet shadow* et elevation'),
     style('degrade', 'Un fond en dégradé entre deux couleurs : « degrade bleu vers violet », puis au besoin vertical ou horizontal (diagonal sinon).', PAGE('    bloc avec degrade bleu vers violet :\n        titre "Réservez" avec texte blanc'), 'linear-gradient', 'LinearGradient (expo-linear-gradient)', undefined, 'Deux couleurs seulement (de base ou du thème) ; un dégradé plus fin s’écrit en CSS.'),
     style('colle', 'L’élément reste collé en haut de l’écran quand on défile ; « colle en bas » le colle en bas.', PAGE('    bloc avec colle :\n        texte "Toujours visible"'), 'position: sticky', null, undefined, 'Sur le téléphone, seuls l’en-tête et le pied de page restent collés ; ailleurs, un avertissement le dit.'),
+    // ─── Défilement et hauteur (plan, apparence sans CSS) ────────────────
+    style('defilement', 'Le bloc défile seul, avec sa propre barre, sans faire bouger le reste de la page : « defilement interne ».', PAGE('    ligne avec hauteur ecran :\n        colonne avec defilement interne :\n            texte "Un long chapitre."'), 'overflow-y: auto', null, [...BLOCS, 'menu'], 'Sur le téléphone, toute la page défile : un avertissement le dit.'),
+    style('hauteur', 'Le bloc prend toute la hauteur de l’écran, sous l’en-tête : « hauteur ecran ».', PAGE('    ligne avec hauteur ecran :\n        colonne avec defilement interne :\n            texte "Un long chapitre."'), 'height: 100dvh', null, BLOCS, 'Sur le téléphone, toute la page défile : un avertissement le dit.'),
+    { ...style('fixe', 'L’en-tête ne bouge jamais : seule la zone en dessous défile, avec sa barre (« entete avec fixe : »).', 'entete avec fixe :\n    lien "Accueil" vers "accueil"\n\npage "accueil" :\n    titre "Accueil"', 'position: fixed', null, ['entete'], 'Seulement sur l’en-tête. Sur le téléphone, l’en-tête reste en haut comme avec « colle ».'), valeurLibre: true },
     style('sur', 'Dans un bloc « sur telephone : », les appareils où le contenu s’affiche.', PAGE('    sur telephone :\n        texte "Petit écran"'), 'display', 'SurAppareil (largeur de la fenêtre)', ['appareil']),
     // ─── La publication (plan 2026-10-30-qualite-publication, parties 3 à 5) ──
     {
@@ -389,6 +393,8 @@ export const ENTREES_ECRAN = [
     valeur('forte', ['ombre'], 'Une ombre marquée.', PAGE('    bloc avec ombre forte :\n        texte "a"'), ['fort']),
     valeur('douce', ['bordure', 'transition'], 'Des coins légèrement arrondis ; pour une transition, des changements adoucis (200 ms).', PAGE('    bloc avec bordure douce :\n        texte "a"'), ['doux']),
     valeur('ronde', ['bordure'], 'Une forme ronde : un cercle pour un élément carré.', PAGE('    bloc avec bordure ronde :\n        texte "a"'), ['rond']),
+    valeur('interne', ['defilement'], 'Le bloc a son propre défilement : « defilement interne ».', PAGE('    colonne avec defilement interne :\n        texte "a"')),
+    valeur('ecran', ['hauteur'], 'La hauteur de l’écran, moins celle de l’en-tête : « hauteur ecran ».', PAGE('    ligne avec hauteur ecran :\n        texte "a"'), [], 'écran'),
     valeur('haut', ['colle'], 'Collé en haut de l’écran (par défaut).', PAGE('    bloc avec colle :\n        texte "a"')),
     valeur('bas', ['colle'], 'Collé en bas de l’écran : « colle en bas ».', PAGE('    bloc avec colle en bas :\n        texte "a"')),
     valeur('telephone', ['sur'], 'Un écran de moins de 640 pixels de large.', PAGE('    sur telephone :\n        texte "a"'), ['telephones'], 'téléphone'),

package/docs/guide.en.md

@@ -187,8 +187,10 @@ 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. `avec niveau` (with level) still lets
-you choose.
+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" :
@@ -406,6 +408,11 @@ CSS can also come from a file: `utiliser style "./theme.css"` at the top of
 the file. CSS applies to the web, static and desktop targets; mobile only
 translates named styles (colour, background, size, position, border).
 
+`humalis verifier` warns when a class used with `avec style` is missing from
+the project's CSS and suggests a close name. It also warns when an
+`!important` rule targets a `.humalis-…` class: remove `!important` or use
+your own class.
+
 ---
 
 ## 6. Layout
@@ -444,6 +451,33 @@ Block settings: `largeur` (width: `etroite` narrow, `large` wide),
 `alignement centre` (centred), `degrade bleu vers violet` (gradient), `colle`
 (sticks to the top while scrolling).
 
+### A page that fits the screen
+
+`entete avec fixe :` (fixed header) keeps the header still: only the area below
+scrolls, with its own scrollbar. `hauteur ecran` (screen height) makes a block
+fill the screen under the header, and `defilement interne` (inner scrolling)
+gives a block its own scrolling without moving the rest. Together they make a
+documentation page: the table of contents and the text each scroll on their own,
+without a line of CSS.
+
+```humalis
+entete avec fixe :
+    lien "Home" vers "guide"
+
+page "guide" :
+    titre "The guide"
+    ligne avec hauteur ecran :
+        menu vertical avec defilement interne :
+            lien "Install" vers "guide"
+            lien "Pages" vers "guide"
+        colonne avec defilement interne :
+            texte "A long chapter that scrolls on its own."
+```
+
+On the static target, the scrollbar stays the window's. On a phone the whole page
+scrolls: `hauteur ecran` and `defilement interne` have no effect, and a warning
+says so.
+
 ### Depending on the device
 
 ```humalis
@@ -608,12 +642,23 @@ page "menu" :
 ```
 
 `fil d'Ariane` is a breadcrumb. In a `menu`, the link to the current page is
-marked as active. The links of a menu wrap when space runs out. A menu that
-your CSS turns into a column (`flex-direction: column`) keeps that wrapping: add
-`flex-wrap: nowrap` so it scrolls instead of starting a second column.
+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 :`).
 
-A `menu repliable :` (collapsible menu) folds behind a "Menu" button on a small
-screen (phone); choosing a link closes it. On a large screen it stays open:
+```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" :
@@ -1927,6 +1972,14 @@ For web and static, `--adresse https://…` gives the site's final address
 (sitemap, share links). For desktop, `--serveur https://…` gives the address
 of the server the application calls.
 
+With `humalis developper`, every element of the page carries its Humalis
+file and line: in the browser's inspector, a heading shows for example
+`data-humalis-source="pages/accueil.humalis:12"` (the path starts from the
+main file, the line is the one in that file). Hold the Alt key (Option on
+Mac) and hover over an element: a small label shows the same reference next
+to the cursor. `humalis compile` adds none of this: the published site stays
+identical.
+
 ### Error messages
 
 Messages are in French, with the line number, and often suggest the fix:

package/docs/guide.md

@@ -176,8 +176,10 @@ l'ordre des niveaux, sans en sauter : les lecteurs d'écran s'en servent pour
 parcourir la page.
 
 Dans un bloc placé sous un sous-titre, un `soustitre` descend d'un niveau tout
-seul : la carte d'une section devient un niveau 3. `avec niveau` reste possible
-pour choisir soi-même.
+seul : la carte d'une section devient un niveau 3. Dans une `section`, le premier
+sous-titre est le titre de la section, même rangé dans son propre bloc ; tous les
+autres sous-titres de la section descendent d'un niveau. `avec niveau` reste
+possible pour choisir soi-même.
 
 ```humalis
 page "accueil" :
@@ -387,6 +389,10 @@ Le CSS peut aussi venir d'un fichier : `utiliser style "./theme.css"` en haut du
 fichier. Le CSS s'applique au web, au statique et au desktop ; le mobile ne
 traduit que les styles nommés (couleur, fond, taille, position, bordure).
 
+`humalis verifier` avertit si une classe donnée par `avec style` est absente du CSS
+du projet et propose un nom proche. Il avertit aussi si une règle `!important`
+cible une classe `.humalis-…` : retirez `!important` ou utilisez votre propre classe.
+
 ---
 
 ## 6. La mise en page
@@ -422,6 +428,32 @@ Les réglages des blocs : `largeur` (`etroite`, `large`), `remplissage` et
 `moyenne`), `bordure douce`, `repartition entre`, `alignement centre`,
 `degrade bleu vers violet`, `colle` (reste en haut pendant le défilement).
 
+### Une page qui tient dans l'écran
+
+`entete avec fixe :` garde l'en-tête immobile : seule la zone en dessous défile,
+avec sa barre. `hauteur ecran` fait remplir l'écran à un bloc, sous l'en-tête, et
+`defilement interne` donne à un bloc son propre défilement, sans faire bouger le
+reste. Ensemble, ils font une page de documentation : le sommaire et le texte
+défilent chacun de leur côté, sans une ligne de CSS.
+
+```humalis
+entete avec fixe :
+    lien "Accueil" vers "guide"
+
+page "guide" :
+    titre "Le guide"
+    ligne avec hauteur ecran :
+        menu vertical avec defilement interne :
+            lien "Installer" vers "guide"
+            lien "Les pages" vers "guide"
+        colonne avec defilement interne :
+            texte "Un long chapitre, qui défile seul."
+```
+
+Sur le statique, la barre de défilement reste celle de la fenêtre. Sur le
+téléphone, toute la page défile : `hauteur ecran` et `defilement interne` n'ont
+pas d'effet, et un avertissement le dit.
+
 ### Selon l'appareil
 
 ```humalis
@@ -573,13 +605,23 @@ page "carte" :
 ```
 
 Dans un `menu`, le lien de la page où l'on est est marqué comme actif.
-Les liens d'un menu passent à la ligne quand la place manque. Un menu que ton
-CSS met en colonne (`flex-direction: column`) garde ce retour à la ligne :
-ajoute `flex-wrap: nowrap` pour qu'il défile au lieu d'ouvrir une deuxième
-colonne.
+Les liens d'un menu passent à la ligne quand la place manque. Un `menu
+vertical :` range ses liens en colonne, sans jamais ouvrir une deuxième colonne :
+un sommaire de hauteur limitée défile. Il se combine avec `repliable`
+(`menu vertical repliable :`).
 
-Un `menu repliable :` se range derrière un bouton « Menu » sur un petit écran
-(téléphone) ; un lien choisi referme le menu. Sur grand écran, il reste ouvert :
+```humalis
+page "guide" :
+    titre "Le guide"
+    menu vertical :
+        lien "Installer" vers "guide"
+        lien "Les pages" vers "guide"
+```
+
+Un `menu repliable :` se range derrière un bouton burger (nommé « Menu » pour les
+lecteurs d'écran) sur un petit écran (téléphone) ; l'icône devient une croix
+quand le menu est ouvert. Un lien choisi, un toucher à côté ou la touche Échap
+referment le menu. Sur grand écran, il reste ouvert :
 
 ```humalis
 page "accueil" :
@@ -1842,6 +1884,14 @@ Pour le web et le statique, `--adresse https://…` donne l'adresse finale du
 site (plan du site, liens de partage). Pour le desktop, `--serveur https://…`
 donne l'adresse du serveur que l'application appelle.
 
+Avec `humalis developper`, chaque élément de la page porte son fichier
+Humalis et sa ligne : dans l'inspecteur du navigateur, un titre montre par
+exemple `data-humalis-source="pages/accueil.humalis:12"` (le chemin part du
+fichier principal, la ligne est celle de ce fichier). Tiens la touche Alt
+(Option sur Mac) et survole un élément : une petite étiquette affiche ce
+même repère près du curseur. `humalis compile` n'ajoute rien de tout cela :
+le site publié reste identique.
+
 ### Les messages d'erreur
 
 Les messages sont en français, avec la ligne, et proposent souvent la

package/llms.txt

@@ -146,7 +146,8 @@ page "accueil" :
 - Un nom de classe CSS sans guillemets : il manque le nom de la classe CSS entre guillemets
 - « utiliser » sans « style » : il manque « style » après « utiliser »
 - Un chemin de fichier CSS sans guillemets : il manque le chemin du fichier CSS entre guillemets
-- Une classe CSS définie nulle part : n'est définie dans aucun bloc style
+- Un style CSS introuvable : n'est défini dans aucun CSS du projet
+- Une règle CSS écrase un style Humalis : le CSS écrase « humalis-page »
 - Une option de variable inconnue : n'est pas une option de variable
 - Un mot après « memorisee en » qui n’est pas « secret » : est attendu après « memorisee en »
 - Une variable en haut du fichier sans « avec partagee » : ajoutez « avec partagee »

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humalis",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Un seul langage, en français, pour créer une application complète : web, mobile, desktop et serveur",
   "type": "module",
   "bin": {