@mostajs/wagon-ui 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 **Auteur** : Dr Hamid MADANI <drmdh@msn.com>
 
 
+
+
+## 0.3.1 — 2026-10-02
+
+- **Correctif** : l'en-tête `entete: 'barre'` portait la classe `barre`, déjà prise par la jauge de consommation
+  (`.barre{width:9em;height:.55em;border-radius:99px}`) — l'en-tête s'affichait en pilule tronquée. Il porte
+  désormais la classe `bande` ; T-WUI-15 vérifie qu'aucune autre règle ne vise la classe de l'en-tête.
+## 0.3.0 — 2026-10-02
+
+- **Palette Studio** (palette.amia.fr) : les jetons portent désormais les noms de la palette (`--brand`, `--link`,
+  `--accent`, `--text`, `--text-muted`, `--surface-alt`, `--text-on-brand`…), les anciens noms en dérivent.
+  **Le texte ne prend jamais `--accent`** (souvent illisible : 2,65:1 pour #F472B6) — liens et titres prennent `--link`.
+- Option `theme: () => css` : le thème du projet, relu à chaque page et posé après la feuille de base ; refusé s'il
+  sort de `:root{…}` (aucune balise, aucun sélecteur).
+- Option `entete: 'barre'` : l'en-tête des pages prend le style de la documentation (bande de marque).
+- Essais T-WUI-13 à 15, écrits avant le code, chacun confronté à un sabotage.
+- ⚠️ Rupture mineure : `--accent` désignait la couleur des liens ; il désigne désormais l'ornement (comme dans la palette).
 ## 0.2.0 — 2026-10-02
 
 - **Affichage PC, tablette, mobile** : en-tête repliable derrière un **menu hamburger** (sans script : case à

package/llms.txt

@@ -31,3 +31,4 @@ Rendre les écrans communs à tout SaaS, identiques d'un produit à l'autre, san
 - Une ressource sans `parPeriode` s'affiche « libellé : n ».
 
 - 0.2 : `pageDocumentation({ lang, onglets, onglet, sections, actif, titre, sousTitre, contenu, sommaire, markdown, version, base, recherche, q })`, `rechercheDocumentation({ lang, q, resultats })` ; menu hamburger sans script dans `page()`.
+- 0.3 : `creerWagonUi({ …, theme: () => ':root{…}', entete: 'simple'|'barre' })` ; jetons aux noms de Palette Studio ; le texte prend `--link`, jamais `--accent`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/wagon-ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Les pages du wagon d'un SaaS — mise en page (langues, pied légal, en-têtes pour les moteurs), accueil, tarifs, inscription, connexion (mot de passe ou code), espace client (palier, jauges, clés, factures, gestion de l'abonnement), administration (paliers, usage), pages légales — en fr, en, ar. Extraites de mdseal, sans ce qu'il vend : l'identité et les ressources mesurées viennent de la configuration. Vues pures, zéro dépendance.",
   "license": "AGPL-3.0-or-later",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",

package/src/index.js

@@ -39,23 +39,27 @@ const lien = (href) => {
 const NBSP = ' ';
 const euros = (centimes) => `${(Number(centimes) || 0) / 100}${NBSP}€`;
 
-const DERIVES = '--survol:#eef2f9;--bordure:#cbd5e0;--doux:#475569;--fond-doux:#f1f5f9;'
-  + '--succes-fond:#f0fdf4;--succes-bord:#bbf7d0;--succes-texte:#166534;'
-  + '--erreur-fond:#fef2f2;--erreur-bord:#fecaca;--erreur-texte:#991b1b';
+// 0.3 : les jetons portent les NOMS de Palette Studio (palette.amia.fr) — un thème qui les redéfinit habille le site
+// entier ; les anciens noms en dérivent par var(), donc le suivent. Contrastes des replis vérifiés sur blanc.
+const DERIVES = '--line:#e2e8f0;--text-muted:#475569;--surface-alt:#f1f5f9;--hover:#eef2f9;--field-border:#cbd5e0;'
+  + '--success-bg:#f0fdf4;--success-text:#166534;--error-bg:#fef2f2;--error-text:#991b1b;'
+  + '--doux:var(--text-muted);--fond-doux:var(--surface-alt);--survol:var(--hover);--bordure:var(--field-border);'
+  + '--ink:var(--text);--ornement:var(--accent);--succes-fond:var(--success-bg);--succes-texte:var(--success-text);--succes-bord:#bbf7d0;'
+  + '--erreur-fond:var(--error-bg);--erreur-texte:var(--error-text);--erreur-bord:#fecaca';
 const REPLI = { brand: '#06284A', lien: '#2c5282', ornement: '#2c5282', encre: '#1a1a1a', surface: '#fff' };
 const COULEUR = /^#[0-9a-fA-F]{3,8}$/;
 
 /** La feuille de style de mdseal, sans ce qui servait la charge utile. Aucune couleur en dur. */
 function style(c) {
-  return `:root{--brand:${c.brand};--accent:${c.lien};--ornement:${c.ornement};--ink:${c.encre};--surface:${c.surface};--line:#e2e8f0;${DERIVES}}
+  return `:root{--brand:${c.brand};--link:${c.lien};--accent:${c.ornement};--text:${c.encre};--surface:${c.surface};--bg:${c.surface};--text-on-brand:#ffffff;${DERIVES}}
 *{box-sizing:border-box} body{font:15px/1.6 system-ui,sans-serif;margin:0;color:var(--ink);background:var(--surface)}
 header{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;max-width:920px;margin:0 auto;padding:1rem;border-bottom:3px solid var(--ornement)}
 .brand{font-weight:800;font-size:1.25rem;color:var(--brand);text-decoration:none}
-nav{display:flex;gap:.3rem;flex-wrap:wrap} nav a{color:var(--accent);text-decoration:none;padding:.3em .7em;border-radius:6px} nav a.on,nav a:hover{background:var(--survol)}
+nav{display:flex;gap:.3rem;flex-wrap:wrap} nav a{color:var(--link);text-decoration:none;padding:.3em .7em;border-radius:6px} nav a.on,nav a:hover{background:var(--survol)}
 main{max-width:920px;margin:0 auto;padding:0 1rem 2rem}
-h1{color:var(--brand)} h2{color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:.2em;margin-top:1.6em}
+h1{color:var(--brand)} h2{color:var(--link);border-bottom:1px solid var(--line);padding-bottom:.2em;margin-top:1.6em}
 h3{color:var(--brand);font-size:1.02rem;margin:1.2em 0 .3em}
-fieldset{border:1px solid var(--line);border-radius:8px;margin:.8em 0;padding:.6em 1em} legend{color:var(--accent);font-weight:700}
+fieldset{border:1px solid var(--line);border-radius:8px;margin:.8em 0;padding:.6em 1em} legend{color:var(--link);font-weight:700}
 input[type=text],input[type=email],input[type=password],input[type=number]{padding:5px 8px;border:1px solid var(--bordure);border-radius:6px;font-size:14px}
 input[type=text],input[type=email],input[type=password]{min-width:15em} input[type=number]{width:7em}
 .champs{display:flex;flex-wrap:wrap;gap:.8em 1.4em;align-items:flex-end}
@@ -82,14 +86,14 @@ pre,code,kbd,samp{direction:ltr;text-align:left;unicode-bidi:isolate} [dir="rtl"
 .jauges{list-style:none;padding:0} .jauges li{margin:.5em 0}
 .barre{display:inline-block;vertical-align:middle;width:9em;height:.55em;background:var(--line);border-radius:99px;margin-inline-start:.6em;overflow:hidden}
 .barre i{display:block;height:100%;background:var(--ornement)}
-.moi{margin-inline-start:auto;font-size:.9em} .moi a{color:var(--accent);text-decoration:none}
-.langues{margin-inline-start:.8em;font-size:.9em;color:var(--doux)} .langues a{color:var(--accent);text-decoration:none} .langues b{color:var(--brand)}
+.moi{margin-inline-start:auto;font-size:.9em} .moi a{color:var(--link);text-decoration:none}
+.langues{margin-inline-start:.8em;font-size:.9em;color:var(--doux)} .langues a{color:var(--link);text-decoration:none} .langues b{color:var(--brand)}
 .hint{color:var(--doux);font-size:.9em} footer{max-width:920px;margin:2rem auto 0;padding:1rem;border-top:1px solid var(--line);color:var(--doux);font-size:.9em}
-footer a{color:var(--accent)}
+footer a{color:var(--link)}
 .menu{display:flex;align-items:center;gap:1.2rem;flex:1 1 auto;flex-wrap:wrap}
 .bascule{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
 .burger{display:none;margin-inline-start:auto;font-size:1.5rem;line-height:1;cursor:pointer;padding:.2em .45em;border:1px solid var(--line);border-radius:6px;color:var(--brand);user-select:none}
-.bascule:focus-visible+.burger{outline:2px solid var(--accent);outline-offset:2px}
+.bascule:focus-visible+.burger{outline:2px solid var(--link);outline-offset:2px}
 table{display:block;max-width:100%;overflow-x:auto}
 img,pre{max-width:100%} pre{overflow-x:auto}
 @media (max-width: 760px){
@@ -102,8 +106,16 @@ img,pre{max-width:100%} pre{overflow-x:auto}
   input[type=text],input[type=email],input[type=password]{min-width:0;width:100%}
   .champs label{flex:1 1 100%}
   .grille-tarifs{grid-template-columns:1fr}
-}`;
 }
+header.bande{max-width:none;background:var(--brand);border-bottom:0;padding:.8rem max(1rem,calc((100% - 920px)/2))}
+header.bande .brand,header.bande nav a,header.bande .moi a,header.bande .langues a,header.bande .langues b,header.bande .langues{color:var(--text-on-brand)}
+header.bande nav a{opacity:.9} header.bande nav a.on,header.bande nav a:hover{background:rgba(255,255,255,.16);opacity:1}
+header.bande .burger{color:var(--text-on-brand);border-color:rgba(255,255,255,.4)}
+header.bande + main{padding-top:1.2rem}`;
+}
+
+/** Un thème de Palette Studio n'est accepté que s'il ne fait que redéfinir des jetons dans :root{…}. */
+const THEME_SAIN = /^\s*:root\s*\{[^{}<]*\}\s*$/;
 
 /** La documentation (0.2) : la mise en page des sites de référence d'API — onglets, barre latérale, sommaire. */
 const STYLE_DOC = `body{background:var(--surface)} .doc-tete{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 1.2rem;background:var(--brand);color:var(--surface)}
@@ -117,9 +129,9 @@ const STYLE_DOC = `body{background:var(--surface)} .doc-tete{display:flex;align-
 .laterale h3{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--doux);margin:1.4em 0 .4em} .laterale h3:first-child{margin-top:0}
 .laterale ul{list-style:none;margin:0;padding:0} .laterale a{display:block;padding:.35em .6em;border-radius:6px;color:var(--ink);text-decoration:none} .laterale a.on{background:var(--fond-doux);font-weight:600} .laterale a:hover{background:var(--survol)}
 .doc-corps{padding:1.6rem 2.2rem 3rem;min-width:0} .doc-corps h1{margin:.1em 0 .2em;font-size:2.1rem} .doc-corps .lede{font-size:1.12rem;color:var(--doux);margin:.2em 0 1em}
-.doc-corps hr{border:0;border-top:1px solid var(--line);margin:1.2em 0 1.6em} .doc-corps a.md{float:inline-end;font-size:.88em;border:1px solid var(--line);border-radius:6px;padding:.3em .7em;text-decoration:none;color:var(--accent)}
+.doc-corps hr{border:0;border-top:1px solid var(--line);margin:1.2em 0 1.6em} .doc-corps a.md{float:inline-end;font-size:.88em;border:1px solid var(--line);border-radius:6px;padding:.3em .7em;text-decoration:none;color:var(--link)}
 .sommaire{padding:1.6rem 1rem;position:sticky;top:0;align-self:start;font-size:.9em} .sommaire p{color:var(--doux);margin:0 0 .4em}
-.sommaire ul{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line)} .sommaire a{display:block;padding:.25em .8em;color:var(--doux);text-decoration:none} .sommaire a:hover{color:var(--accent)}
+.sommaire ul{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line)} .sommaire a{display:block;padding:.25em .8em;color:var(--doux);text-decoration:none} .sommaire a:hover{color:var(--link)}
 .doc-barre .burger{color:var(--surface);border-color:rgba(255,255,255,.4)}
 @media (max-width: 1100px){ .doc{grid-template-columns:15rem minmax(0,1fr)} .sommaire{display:none} }
 @media (max-width: 760px){
@@ -144,13 +156,15 @@ const DOCUMENTS_LEGAUX = Object.freeze([['mentions-legales', 'mentions'], ['cgu'
  *                 parPeriode?: string|object, sansLimite?: string|object, aucun?: string|object }>} [o.ressources]
  * @param {object} [o.textes]   surcharges des libellés, par langue : { fr: { tarifs: { note: '…' } } }
  */
-export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar'], liens = [], ressources = [], textes = {} } = {}) {
+export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar'], liens = [], ressources = [], textes = {}, theme = null, entete = 'simple' } = {}) {
   if (!String(marque?.nom ?? '').trim()) throw new Error('@mostajs/wagon-ui : `marque.nom` requis — le nom du service');
   if (!String(marque?.auteur ?? '').trim()) throw new Error('@mostajs/wagon-ui : `marque.auteur` requis — qui édite le service');
   const LANGUES = langues.filter((l) => CATALOGUES[l]);
   if (!LANGUES.length) throw new Error('@mostajs/wagon-ui : aucune langue connue (fr, en, ar)');
   const C = Object.fromEntries(Object.entries({ ...REPLI, ...couleurs }).map(([k, v]) => [k, COULEUR.test(String(v)) ? v : REPLI[k]]));
   const STYLE = style(C);
+  /** Le thème courant (Palette Studio), relu à chaque page ; rejeté s'il sort de :root{…}. */
+  const themeCss = () => { try { const t = typeof theme === 'function' ? String(theme() ?? '') : ''; return THEME_SAIN.test(t) ? t : ''; } catch { return ''; } };
 
   /** Le traducteur d'une langue : surcharges de l'application, puis le catalogue, puis le français. */
   function t(lang) {
@@ -191,8 +205,8 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
         : `<a href="${chemin}?lang=${l}" hreflang="${l}" lang="${l}" rel="alternate">${esc(LIBELLES_LANGUES[l])}</a>`)).join(' · ')}</span>`;
       return `<!doctype html><html lang="${L}" dir="${dirDe(L)}"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1"><title>${esc(titre)} — ${nom}</title>
-${tete}<style>${STYLE}</style></head><body>
-<header><a class="brand" href="/">${marque.symbole ? `${esc(marque.symbole)} ` : ''}${nom}</a><input type="checkbox" id="wagon-menu" class="bascule"><label for="wagon-menu" class="burger" aria-label="${esc(tr('layout.menu'))}">☰</label><div class="menu"><nav>${nav.map(([h, l]) => `<a href="${lien(h)}"${actif === h ? ' class="on"' : ''}>${esc(l)}</a>`).join('')}</nav><span class="moi"><a href="${connecte ? '/compte' : '/connexion'}">${esc(tr(connecte ? 'espace.compte' : 'espace.seConnecter'))}</a>${connecte ? ` · <a href="/deconnexion">${esc(tr('espace.seDeconnecter'))}</a>` : ''}</span>${choixLangue}</div></header>
+${tete}<style>${STYLE}</style>${themeCss() ? `<style id="theme-palette">${themeCss()}</style>` : ''}</head><body>
+<header${entete === 'barre' ? ' class="bande"' : ''}><a class="brand" href="/">${marque.symbole ? `${esc(marque.symbole)} ` : ''}${nom}</a><input type="checkbox" id="wagon-menu" class="bascule"><label for="wagon-menu" class="burger" aria-label="${esc(tr('layout.menu'))}">☰</label><div class="menu"><nav>${nav.map(([h, l]) => `<a href="${lien(h)}"${actif === h ? ' class="on"' : ''}>${esc(l)}</a>`).join('')}</nav><span class="moi"><a href="${connecte ? '/compte' : '/connexion'}">${esc(tr(connecte ? 'espace.compte' : 'espace.seConnecter'))}</a>${connecte ? ` · <a href="/deconnexion">${esc(tr('espace.seDeconnecter'))}</a>` : ''}</span>${choixLangue}</div></header>
 <main>${contenu}</main>
 <footer><b>${nom}</b>${slogan ? ` — ${esc(slogan)}` : ''} · ${esc(tr('layout.auteur'))} : <b>${esc(marque.auteur)}</b>${marque.courriel ? ` &lt;${esc(marque.courriel)}&gt;` : ''} · ${esc(marque.licence ?? 'AGPL-3.0')} · ${esc(tr('layout.propulse'))} <code>@mostajs/*</code><br><span class="legal">${DOCUMENTS_LEGAUX.map(([h, k]) => `<a href="/${h}">${esc(tr(`legal.${k}`))}</a>`).join(' · ')}</span></footer>
 </body></html>`;
@@ -450,7 +464,7 @@ ${anonyme ? `<h2>${esc(tr('usage.anonyme'))}</h2>
         : `<a href="${lien(p.href)}"${p.href === actif ? ' class="on" aria-current="page"' : ''}>${esc(p.titre)}</a>`);
       return `<!doctype html><html lang="${L}" dir="${dirDe(L)}"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1"><title>${esc(titre)} — ${esc(tr('doc.documentation'))} ${nom}</title>
-${canonique ? `<link rel="canonical" href="${esc(canonique)}">${sousTitre ? `<meta name="description" content="${esc(sousTitre)}">` : ''}` : ''}<style>${STYLE}${STYLE_DOC}</style></head><body>
+${canonique ? `<link rel="canonical" href="${esc(canonique)}">${sousTitre ? `<meta name="description" content="${esc(sousTitre)}">` : ''}` : ''}<style>${STYLE}${STYLE_DOC}</style>${themeCss() ? `<style id="theme-palette">${themeCss()}</style>` : ''}</head><body>
 <header class="doc-tete"><a class="brand" href="/">${marque.symbole ? `${esc(marque.symbole)} ` : ''}${nom}</a><span class="doc-mot">${esc(tr('doc.documentation'))}</span>${version ? `<span class="version">${esc(version)}</span>` : ''}<span class="moi"><a href="/">${esc(tr('doc.accueil'))}</a></span>${choixLangue}</header>
 <input type="checkbox" id="doc-menu" class="bascule">
 <div class="doc-barre"><label for="doc-menu" class="burger" aria-label="${esc(tr('layout.menu'))}">☰</label><nav class="onglets">${onglets.map((o) => `<a href="${lien(o.href)}"${o.href === onglet ? ' class="on"' : ''}>${esc(dansLangue(o.libelle, L))}</a>`).join('')}</nav><form class="recherche" method="get" action="${lien(recherche)}"><input type="search" name="q" value="${esc(q)}" placeholder="${esc(tr('doc.rechercher'))}" aria-label="${esc(tr('doc.rechercher'))}"></form></div>