@mostajs/wagon-ui 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@
 
 
 
+## 0.6.0 — 2026-10-09
+
+**Ajouté** : `creerWagonUi({ css })` — la feuille de style **de l'application** (sa configuration, de confiance),
+posée après la feuille de base et le thème, sur **toutes** les pages (y compris `pageDocumentation`) : une
+application peut enfin restyler les pages du wagon qu'elle ne rend pas (connexion, aide, à propos, pages légales).
+Le thème Palette Studio reste borné à `:root{…}`. Une feuille qui contient `</` est écartée entière. Essai T-WUI-25.
+
+## 0.5.3 — 2026-10-09
+
+**Ajouté** (audit de travel, référencement) : chaque page porte l'icône de l'onglet
+(`<link rel="icon" href="/favicon.svg">`, servie par le wagon 0.8) et, quand une image est connue, `og:image` —
+celle de la page (`page({ image })`), sinon celle de la marque (`marque.image`) ; un chemin du site devient absolu,
+toute autre adresse que https est ignorée. Essai T-WUI-24.
+
 ## 0.5.2 — 2026-10-09
 
 **Corrigé** (audit) : le menu des langues annonce aussi la langue COURANTE aux lecteurs d'écran

package/llms.txt

@@ -11,7 +11,7 @@ Rendre les écrans communs à tout SaaS, identiques d'un produit à l'autre, san
 
 ## API
 `creerWagonUi({ marque: { nom, auteur, symbole?, slogan?, courriel?, licence? }, couleurs?: { brand, lien, ornement, encre, surface }, langues?: ['fr','en','ar'], liens?: [{ href, libelle }], ressources?: [{ cle, limite, periode: 'jour'|'mois', libelle, parPeriode?, sansLimite?, aucun? }], textes?: { fr: { … } } })` → `ui` :
-- `ui.page({ actif, titre, contenu, lang, connecte?, base?, description? })` — la page entière ; `contenu` = HTML déjà rendu.
+- `ui.page({ actif, titre, contenu, lang, connecte?, base?, description?, image? })` — la page entière ; `contenu` = HTML déjà rendu.
 - `ui.accueil({ lang, titre, lede?, actions?: [{ href, libelle, principal? }], preuves?: [{ titre, texte }], note? })`
 - `ui.tarifs({ lang, paliers: [{ slug, name, price (centimes), active?, limits: { <limite>: n, maxCles } }], sousTitre?, inscriptionHref? })`
 - `ui.inscription({ lang, palier, erreur?, minMotDePasse?, methode?: 'motdepasse'|'code', action? })` · `ui.inscriptionFaite({ lang, cle?, base?, paiement?: { compteId, planSlug } })`
@@ -26,6 +26,8 @@ Rendre les écrans communs à tout SaaS, identiques d'un produit à l'autre, san
 `/`, `/tarifs`, `/aide`, `/apropos`, `/inscription` (POST : plan, nom, courriel, motdepasse), `/connexion` (POST : courriel, motdepasse), `/deconnexion`, `/compte`, `/compte/cles` (POST : libelle), `/compte/cles/revoquer` (POST : prefix), `/compte/portail` (POST), `/paiement` (POST : compte, plan), `/admin/plans` (POST), `/admin/usage`, `/mentions-legales`, `/cgu`, `/cgv`, `/confidentialite`.
 
 ## PIÈGES
+- 0.6.0 : `creerWagonUi({ css })` — feuille de l'application (de confiance) après base et thème, sur chaque page ; écartée si elle contient `</`.
+- 0.5.3 : icône `/favicon.svg` dans chaque page ; `og:image` depuis `page({ image })` ou `marque.image` (chemin du site ou https).
 - 0.5.1 : `page({ chemin })` — canonique et liens de langue sur la page réelle.
 - 0.5.0 : `creerWagonUi({ …, collant: true, appel: { href, libelle }, selecteurLangue: 'menu' })` — en-tête collant, bouton d'appel, langue en menu déroulant sans script ; défauts inchangés.
 - 0.4.0 : `tarifs.clesPluriel` n'existe plus → `tarifs.cles_one` / `tarifs.cles_other` (+ formes arabes) ; prix formatés par langue (« 9,99 € »).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/wagon-ui",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "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

@@ -172,7 +172,7 @@ 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 = {}, theme = null, entete = 'simple', collant = false, appel = null, selecteurLangue = 'liens' } = {}) {
+export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar'], liens = [], ressources = [], textes = {}, theme = null, entete = 'simple', collant = false, appel = null, selecteurLangue = 'liens', css = '' } = {}) {
   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]);
@@ -180,6 +180,9 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['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{…}. */
+  // 0.6.0 — la feuille DE L'APPLICATION (sa configuration, de confiance), après la base et le thème, sur chaque page.
+  // Elle ne peut pas fermer la balise <style> : une feuille qui contient « </ » est écartée entière.
+  const feuilleApp = typeof css === 'string' && css.trim() && !/<\//.test(css) ? `<style id="feuille-app">${css}</style>` : '';
   const themeCss = () => { try { const t = typeof theme === 'function' ? String(theme() ?? '') : ''; return THEME_SAIN.test(t) ? t : ''; } catch { return ''; } };
 
   /**
@@ -222,7 +225,7 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
      * La page entière. `contenu` est du HTML déjà rendu (par une vue de ce module, ou par la charge
      * utile). `base` — l'adresse publique — ajoute les en-têtes que lisent les moteurs et les aperçus.
      */
-    page({ actif = '/', chemin: cheminPage = '', titre = '', contenu = '', lang, connecte = false, base = '', description = '' }) {
+    page({ actif = '/', chemin: cheminPage = '', titre = '', contenu = '', lang, connecte = false, base = '', description = '', image = '' }) {
       const L = langueDe(lang); const tr = t(L);
       const nom = esc(marque.nom);
       const slogan = dansLangue(marque.slogan, L);
@@ -231,10 +234,13 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
       const ici = cheminPage || actif;
       const chemin = lien(ici);
       const canonique = base ? `${String(base).replace(/\/$/, '')}${ici === '/' ? '/' : ici}` : '';
+      // 0.5.3 — l'image de partage : celle de la page, sinon celle de la marque ; absolue (https ou chemin du site).
+      const img = String(image || marque.image || '');
+      const imagePartage = /^https:\/\//.test(img) ? img : img.startsWith('/') && !img.startsWith('//') && base ? `${String(base).replace(/\/$/, '')}${img}` : '';
       const tete = canonique ? `<meta name="description" content="${esc(description || slogan)}">
 <link rel="canonical" href="${esc(canonique)}">${LANGUES.map((l) => `<link rel="alternate" hreflang="${l}" href="${esc(canonique)}?lang=${l}">`).join('')}<link rel="alternate" hreflang="x-default" href="${esc(canonique)}">
 <meta property="og:type" content="website"><meta property="og:site_name" content="${nom}"><meta property="og:title" content="${esc(titre)} — ${nom}">
-<meta property="og:description" content="${esc(description || slogan)}"><meta property="og:url" content="${esc(canonique)}"><meta property="og:locale" content="${L}">` : '';
+<meta property="og:description" content="${esc(description || slogan)}"><meta property="og:url" content="${esc(canonique)}"><meta property="og:locale" content="${L}">${imagePartage ? `<meta property="og:image" content="${esc(imagePartage)}">` : ''}` : '';
       const nav = [...liens.map((x) => [x.href, dansLangue(x.libelle, L)]), ['/tarifs', tr('nav.tarifs')], ['/aide', tr('nav.aide')], ['/apropos', tr('nav.apropos')]];
       // 0.5 — le choix de langue en menu déroulant (`selecteurLangue: 'menu'`) : <details>, donc SANS script.
       const choixLangue = LANGUES.length < 2 ? '' : selecteurLangue === 'menu'
@@ -247,7 +253,7 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
       const boutonAppel = appel?.href ? `<a class="appel" href="${lien(appel.href)}">${esc(dansLangue(appel.libelle, L))}</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)} — ${nom}</title>
-${tete}<style>${STYLE}</style>${themeCss() ? `<style id="theme-palette">${themeCss()}</style>` : ''}</head><body>
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">${tete}<style>${STYLE}</style>${themeCss() ? `<style id="theme-palette">${themeCss()}</style>` : ''}${feuilleApp}</head><body>
 <header${classesTete ? ` class="${classesTete}"` : ''}><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>${boutonAppel}${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>
@@ -506,7 +512,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>${themeCss() ? `<style id="theme-palette">${themeCss()}</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>` : ''}${feuilleApp}</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>