@mostajs/wagon-ui 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -4,6 +4,26 @@
 
 
 
+
+## 0.4.0 — 2026-10-08
+
+- **Les textes passent par `@mostajs/i18n`** (≥ 0.2.0) au lieu d'un traducteur maison : même ordre de résolution
+  (surcharges `textes` de l'application, catalogue de la langue, français), même API `ui.t(lang)(cle, vars)`.
+- **Pluriels CLDR** : `{n}` sert de compte. Fini « clé(s) active(s) », « restant(e)s » et la paire
+  `cles`/`clesPluriel` ; l'arabe a ses six formes — « بمفتاحين » pour deux, « 11 مفتاحًا » de 11 à 99, au lieu de
+  « مفتاح/مفاتيح ». Clés touchées : `tarifs.cles` (+ `tarifs.clesIllimitees`), `espace.appels`,
+  `espace.plafondAtteint`, `espace.restant` (« Reste : {n} »). ⚠️ Une application qui surchargeait `tarifs.clesPluriel`
+  dans `textes` doit passer à `tarifs.cles_other`.
+- **Prix formatés dans la langue** : « 9,99 € », « €9.99 », et en arabe `ar-DZ` aux chiffres latins — au lieu de
+  « 9.99 € » avec un point partout. `ui.euros(centimes, lang)` exposé (pour les suites de conformité).
+- Essais T-WUI-16 (catalogues vérifiés par `checkCatalogues`, clés construites `legal.*` comprises), T-WUI-17
+  (pluriels, duel arabe), T-WUI-18 (prix) ; T-WUI-7 compare désormais les clés LOGIQUES. Trois sabotages, détectés.
+
+## 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`,

package/llms.txt

@@ -20,12 +20,13 @@ Rendre les écrans communs à tout SaaS, identiques d'un produit à l'autre, san
 - `ui.adminPaliers({ lang, offres, message? })` — champs `<slug>.<limite>` et `<slug>.maxCles` (POST /admin/plans).
 - `ui.adminUsage({ lang, usage: { jours, totaux: { comptes, actifs, payants, erreurs, parRessource }, lignes: [{ nom, plan, actif, dernierJour, erreursFenetre, parRessource: { <cle>: { courant, limite, part, fenetre } } }] }, anonyme? })`
 - `ui.legal({ lang, doc: 'mentions-legales'|'cgu'|'cgv'|'confidentialite', html })` · `ui.introuvable({ lang })`
-- `ui.t(lang)(cle, vars)` · `CATALOGUES` · `dirDe(lang)` · `esc`
+- `ui.t(lang)(cle, vars)` (par @mostajs/i18n : `{n}` = compte, pluriels CLDR, six formes en arabe) · `ui.euros(centimes, lang)` · `CATALOGUES` · `dirDe(lang)` · `esc`
 
 ## ROUTES ATTENDUES (liens et formulaires des vues)
 `/`, `/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.4.0 : `tarifs.clesPluriel` n'existe plus → `tarifs.cles_one` / `tarifs.cles_other` (+ formes arabes) ; prix formatés par langue (« 9,99 € »).
 - `legal({ html })` n'échappe pas `html` : il doit venir des textes de l'éditeur (mostajs/templates), jamais d'un formulaire.
 - Les prix sont en CENTIMES. `-1` = sans limite ; `0` = non compris.
 - Une ressource sans `parPeriode` s'affiche « libellé : n ».

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/wagon-ui",
-  "version": "0.3.0",
+  "version": "0.4.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>",
@@ -68,5 +68,8 @@
   },
   "devDependencies": {
     "@mostajs/mjs-unit": "^0.7.0"
+  },
+  "dependencies": {
+    "@mostajs/i18n": "^0.2.0"
   }
 }

package/src/i18n/ar.js

@@ -26,8 +26,13 @@ export const ar = {
     "titre": "الأسعار",
     "parMois": "/شهريًّا",
     "gratuit": "مجّاني",
-    "cles": "مفتاح واجهة واحد",
-    "clesPluriel": "{n} مفاتيح واجهة",
+    "cles_zero": "بلا مفتاح واجهة",
+    "cles_one": "مفتاح واجهة واحد",
+    "cles_two": "مفتاحا واجهة",
+    "cles_few": "{n} مفاتيح واجهة",
+    "cles_many": "{n} مفتاحًا للواجهة",
+    "cles_other": "{n} مفتاح واجهة",
+    "clesIllimitees": "مفاتيح واجهة بلا حدّ",
     "choisir": "اختر هذه الخطّة",
     "commencer": "ابدأ مجّانًا",
     "encours": "الدفع غير متاح حاليًّا",
@@ -76,8 +81,18 @@ export const ar = {
     "revoquer": "إلغاء",
     "revoquee": "مُلغًى",
     "jamaisUtilisee": "لم يُستعمَل قطّ",
-    "appels": "{n} نداء",
-    "plafondAtteint": "تسمح خطّتك بـ {n} مفتاح/مفاتيح نشِطة.",
+    "appels_zero": "لا نداءات",
+    "appels_one": "نداء واحد",
+    "appels_two": "نداءان",
+    "appels_few": "{n} نداءات",
+    "appels_many": "{n} نداءً",
+    "appels_other": "{n} نداء",
+    "plafondAtteint_zero": "لا تسمح خطّتك بأيّ مفتاح نشِط.",
+    "plafondAtteint_one": "تسمح خطّتك بمفتاح نشِط واحد.",
+    "plafondAtteint_two": "تسمح خطّتك بمفتاحين نشِطين.",
+    "plafondAtteint_few": "تسمح خطّتك بـ {n} مفاتيح نشِطة.",
+    "plafondAtteint_many": "تسمح خطّتك بـ {n} مفتاحًا نشِطًا.",
+    "plafondAtteint_other": "تسمح خطّتك بـ {n} مفتاح نشِط.",
     "cleCreee": "أُنشئ المفتاح. انسخه: لن يُعرَض مرّة أخرى.",
     "gererAbonnement": "إدارة اشتراكي",
     "gererAide": "وسيلة الدفع والفواتير والإلغاء — لدى Stripe.",

package/src/i18n/en.js

@@ -26,8 +26,9 @@ export const en = {
     "titre": "Pricing",
     "parMois": "/month",
     "gratuit": "Free",
-    "cles": "{n} API key",
-    "clesPluriel": "{n} API keys",
+    "cles_one": "{n} API key",
+    "cles_other": "{n} API keys",
+    "clesIllimitees": "Unlimited API keys",
     "choisir": "Choose this plan",
     "commencer": "Start for free",
     "encours": "Payment is not available yet",
@@ -76,8 +77,10 @@ export const en = {
     "revoquer": "Revoke",
     "revoquee": "Revoked",
     "jamaisUtilisee": "never used",
-    "appels": "{n} calls",
-    "plafondAtteint": "Your plan allows {n} active key(s).",
+    "appels_one": "{n} call",
+    "appels_other": "{n} calls",
+    "plafondAtteint_one": "Your plan allows {n} active key.",
+    "plafondAtteint_other": "Your plan allows {n} active keys.",
     "cleCreee": "Key created. Copy it: it will not be shown again.",
     "gererAbonnement": "Manage my subscription",
     "gererAide": "Payment method, invoices, cancellation — at Stripe.",

package/src/i18n/fr.js

@@ -26,8 +26,9 @@ export const fr = {
     "titre": "Tarifs",
     "parMois": "/mois",
     "gratuit": "Gratuit",
-    "cles": "{n} clé d’API",
-    "clesPluriel": "{n} clés d’API",
+    "cles_one": "{n} clé d’API",
+    "cles_other": "{n} clés d’API",
+    "clesIllimitees": "Clés d’API sans limite",
     "choisir": "Choisir ce plan",
     "commencer": "Commencer gratuitement",
     "encours": "Paiement indisponible pour l’instant",
@@ -68,7 +69,7 @@ export const fr = {
     "votrePlan": "Votre plan",
     "consommationDuJour": "Aujourd’hui",
     "consommationDuMois": "Ce mois-ci",
-    "restant": "{n} restant(e)s",
+    "restant": "Reste : {n}",
     "illimite": "sans limite",
     "vosCles": "Vos clés d’API",
     "creerUneCle": "Créer une clé",
@@ -76,8 +77,10 @@ export const fr = {
     "revoquer": "Révoquer",
     "revoquee": "Révoquée",
     "jamaisUtilisee": "jamais utilisée",
-    "appels": "{n} appels",
-    "plafondAtteint": "Votre plan permet {n} clé(s) active(s).",
+    "appels_one": "{n} appel",
+    "appels_other": "{n} appels",
+    "plafondAtteint_one": "Votre plan permet {n} clé active.",
+    "plafondAtteint_other": "Votre plan permet {n} clés actives.",
     "cleCreee": "Clé créée. Copiez-la : elle ne sera plus affichée.",
     "gererAbonnement": "Gérer mon abonnement",
     "gererAide": "Moyen de paiement, factures, résiliation — chez Stripe.",

package/src/index.js

@@ -21,6 +21,7 @@
  * impression) ; le code reste de gauche à droite dans une page arabe ; une clé n'est montrée
  * qu'une fois ; la gestion de l'abonnement n'apparaît que si elle est possible.
  */
+import { createI18n, formatNumber, resolveFormatLocale } from '@mostajs/i18n';
 import { fr } from './i18n/fr.js';
 import { en } from './i18n/en.js';
 import { ar } from './i18n/ar.js';
@@ -37,7 +38,11 @@ const lien = (href) => {
   return /^(\/(?!\/)|https?:\/\/|mailto:|tel:|#|\?)/i.test(h) ? esc(h) : '#';
 };
 const NBSP = ' ';
-const euros = (centimes) => `${(Number(centimes) || 0) / 100}${NBSP}€`;
+/**
+ * Un prix en euros, formaté dans la langue (0.4.0) : « 9,99 € », « €9.99 », et en arabe la locale ar-DZ aux
+ * chiffres latins (@mostajs/i18n) — plus « 9.99 € » avec un point, en français comme ailleurs.
+ */
+const euros = (centimes, lang = 'fr') => formatNumber(resolveFormatLocale(lang), (Number(centimes) || 0) / 100, { style: 'currency', currency: 'EUR' });
 
 // 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.
@@ -107,11 +112,11 @@ img,pre{max-width:100%} pre{overflow-x:auto}
   .champs label{flex:1 1 100%}
   .grille-tarifs{grid-template-columns:1fr}
 }
-header.barre{max-width:none;background:var(--brand);border-bottom:0;padding:.8rem max(1rem,calc((100% - 920px)/2))}
-header.barre .brand,header.barre nav a,header.barre .moi a,header.barre .langues a,header.barre .langues b,header.barre .langues{color:var(--text-on-brand)}
-header.barre nav a{opacity:.9} header.barre nav a.on,header.barre nav a:hover{background:rgba(255,255,255,.16);opacity:1}
-header.barre .burger{color:var(--text-on-brand);border-color:rgba(255,255,255,.4)}
-header.barre + main{padding-top:1.2rem}`;
+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{…}. */
@@ -166,11 +171,26 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
   /** 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. */
+  /**
+   * Le traducteur d'une langue, par @mostajs/i18n (0.4.0) : surcharges de l'application, puis le catalogue, puis
+   * le français. Pluriels CLDR — `{n}` sert de compte : « 1 clé active », « 3 clés actives », et en arabe les six
+   * formes (« بمفتاحين » pour deux). Une clé absente se rend telle quelle, comme avant.
+   */
+  const i18n = Object.fromEntries(LANGUES.map((l) => [l, createI18n({
+    locale: l, fallback: 'fr',
+    bundles: [
+      { locale: 'fr', namespace: 'wagon', messages: CATALOGUES.fr },
+      ...(l === 'fr' ? [] : [{ locale: l, namespace: 'wagon', messages: CATALOGUES[l] }]),
+      ...['fr', l].filter((x, k, a) => a.indexOf(x) === k && textes[x]).map((x) => ({ locale: x, namespace: 'wagon', messages: textes[x] })),
+    ],
+  })]));
   function t(lang) {
     const L = LANGUES.includes(lang) ? lang : LANGUES[0];
-    const chercher = (cat, cle) => cle.split('.').reduce((o, k) => (o && typeof o === 'object' ? o[k] : undefined), cat);
-    return (cle, vars) => remplir(chercher(textes[L] ?? {}, cle) ?? chercher(CATALOGUES[L], cle) ?? chercher(CATALOGUES.fr, cle) ?? cle, vars);
+    return (cle, vars) => {
+      const v = vars && typeof vars.n === 'number' && vars.count === undefined ? { ...vars, count: vars.n } : vars;
+      const r = i18n[L].t(`wagon:${cle}`, v);
+      return r === `wagon:${cle}` ? cle : r;
+    };
   }
   const langueDe = (lang) => (LANGUES.includes(lang) ? lang : LANGUES[0]);
 
@@ -184,6 +204,8 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
 
   const ui = {
     t, dir: dirDe, langues: LANGUES, style: STYLE,
+    /** Un prix en euros dans la langue : `ui.euros(999, 'fr')` → « 9,99 € ». */
+    euros: (centimes, lang) => euros(centimes, langueDe(lang)),
 
     /**
      * La page entière. `contenu` est du HTML déjà rendu (par une vue de ce module, ou par la charge
@@ -206,7 +228,7 @@ export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar
       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>
-<header${entete === 'barre' ? ' class="barre"' : ''}><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>
+<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>`;
@@ -236,10 +258,10 @@ ${paliers.filter((p) => p.active !== false).map((p) => {
   const cles = p.limits?.maxCles;
   return `<section class="plan">
   <h2>${esc(p.name)}</h2>
-  <p class="prix">${gratuit ? esc(tr('tarifs.gratuit')) : `<b>${esc(euros(p.price))}</b><span class="hint">${esc(tr('tarifs.parMois'))}</span>`}</p>
+  <p class="prix">${gratuit ? esc(tr('tarifs.gratuit')) : `<b>${esc(euros(p.price, L))}</b><span class="hint">${esc(tr('tarifs.parMois'))}</span>`}</p>
   <ul>
     ${ressources.map((r) => `<li>${esc(ligneRessource(r, p.limits?.[r.limite], L))}</li>`).join('\n    ')}
-    ${cles !== undefined ? `<li>${esc(Number(cles) === -1 ? `${tr('tarifs.clesPluriel', { n: '∞' })}` : tr(Number(cles) > 1 ? 'tarifs.clesPluriel' : 'tarifs.cles', { n: cles }))}</li>` : ''}
+    ${cles !== undefined ? `<li>${esc(Number(cles) === -1 ? tr('tarifs.clesIllimitees') : tr('tarifs.cles', { n: Number(cles) }))}</li>` : ''}
   </ul>
   <p><a class="bouton" href="${lien(`${inscriptionHref}?plan=${encodeURIComponent(p.slug)}`)}">${esc(tr(gratuit ? 'tarifs.commencer' : 'tarifs.choisir'))}</a></p>
 </section>`;
@@ -258,7 +280,7 @@ ${erreur ? `<p class="msg">${esc(erreur)}</p>` : ''}
 <form method="post" action="${lien(action)}">
   <input type="hidden" name="plan" value="${esc(palier?.slug ?? '')}">
   <fieldset><legend>${esc(tr('inscription.plan'))}</legend>
-    <p><b>${esc(palier?.name ?? '')}</b> — ${gratuit ? esc(tr('tarifs.gratuit')) : `${esc(euros(palier.price))}${esc(tr('tarifs.parMois'))}`}</p>
+    <p><b>${esc(palier?.name ?? '')}</b> — ${gratuit ? esc(tr('tarifs.gratuit')) : `${esc(euros(palier.price, L))}${esc(tr('tarifs.parMois'))}`}</p>
   </fieldset>
   <div class="champs">
     <label>${esc(tr('inscription.nom'))}<input type="text" name="nom" required maxlength="80"></label>
@@ -335,7 +357,7 @@ ${erreur ? `<p class="msg">${esc(erreur)}</p>` : ''}
 ${erreur ? `<p class="msg">${esc(erreur)}</p>` : ''}
 ${cleNeuve ? `<p class="ok">${esc(tr('espace.cleCreee'))}</p><pre><code>${esc(cleNeuve)}</code></pre>` : ''}
 <h2>${esc(tr('espace.votrePlan'))}</h2>
-<p><b>${esc(v.plan?.name ?? '—')}</b>${Number(v.plan?.price) ? ` — ${esc(euros(v.plan.price))}${esc(tr('tarifs.parMois'))}` : ''}</p>
+<p><b>${esc(v.plan?.name ?? '—')}</b>${Number(v.plan?.price) ? ` — ${esc(euros(v.plan.price, L))}${esc(tr('tarifs.parMois'))}` : ''}</p>
 <ul class="jauges">
   ${ressources.map(jauge).join('\n  ')}
 </ul>