@mostajs/menu-html 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# @mostajs/menu-html
+
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+
+Menu de navigation **server-rendered (no-build)**, **patron dialecte** (un menu par application : Salsabil, AgoraScope, CRM, MostaGare — sélectionnable/extensible) + **accessibilité** (WCAG 2.2 / WAI-ARIA : skip link, `aria-current`, disclosure clavier, focus visible, contraste, gros texte, cible 24px) + **responsive** (hamburger mobile, tablette, PC). Métier "menu" séparé du layout (`@mostajs/app-shell-ui`).

package/llms.txt

@@ -0,0 +1,17 @@
+# @mostajs/menu-html — fiche LLM
+> Menu de navigation server-rendered (no-build), patron DIALECTE (un menu par app) + ACCESSIBILITÉ (WCAG/ARIA).
+
+## EXPORTS
+registerMenuDialect(d)/getMenuDialect(key)/listMenuDialects()/clearMenuDialects() — registre (effet de bord builtin)
+renderMenu(dialectKey,{can,role,current,a11y:{contrast,large,simple},showcaseAll,mainId}) -> {html(=hamburger+nav),skip,brand,tagline}
+menuScript() -> <script> (bascule hamburger mobile + aria-expanded + Échap) — inclure une fois
+menuStyles() -> <style> (RESPONSIVE mobile/PC/tablette + skip-link, focus visible, contraste, gros texte, cible 24px) · menuCatalog() -> [{key,app,count}]
+
+## DIALECTES BUILTIN
+salsabil, agorascope, crm, mostagare (modifiables/extensibles via registerMenuDialect).
+
+## ACCESSIBILITÉ (WCAG 2.2 / WAI-ARIA APG)
+nav landmark + aria-label · skip link (2.4.1) · aria-current=page (lien actif) · groupes = disclosure <details> (clavier natif) · focus visible (2.4.7) · variantes contraste (1.4.3/1.4.11) + gros texte (1.4.4) · prefers-reduced-motion. item.perm filtré par can(role,perm).
+
+## RESPONSIVE
+Hamburger accessible (<640px), nav verticale + sous-menus en pile sur mobile, compact tablette, confort PC. Inclure menuScript() une fois.

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@mostajs/menu-html",
+  "version": "0.1.0",
+  "description": "Menu de navigation server-rendered (no-build), patron dialecte (un menu par application) + accessibilité (WCAG/ARIA : skip link, aria-current, disclosure clavier, contraste, gros texte).",
+  "author": "Dr Hamid MADANI <drmdh@msn.com>",
+  "license": "AGPL-3.0-or-later",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "llms.txt"
+  ],
+  "keywords": [
+    "menu",
+    "navigation",
+    "accessibilite",
+    "a11y",
+    "wcag",
+    "aria",
+    "dialect",
+    "mostajs"
+  ],
+  "devDependencies": {
+    "@mostajs/mjs-unit": "^0.3.0"
+  },
+  "scripts": {
+    "test": "node test-scripts/unit/menu-html.test.mjs && node examples/run.mjs"
+  }
+}

package/src/dialects/index.js

@@ -0,0 +1,69 @@
+// Dialectes de menu builtin (un par application) — enregistrés par EFFET DE BORD. @author Dr Hamid MADANI <drmdh@msn.com>
+import { registerMenuDialect as M } from '../registry.js';
+
+M({ key: 'salsabil', app: 'Salsabil', brand: '🌿 Salsabil', tagline: 'Association caritative',
+  items: [
+    { href: '/espace', essential: true, label: 'Espace', icon: '🏠' },
+    { href: '/m/beneficiaries', essential: true, label: 'Bénéficiaires', icon: '👪', perm: 'beneficiaries:read' },
+    { href: '/m/medical-cases', label: 'Dossiers médicaux', icon: '🏥', perm: 'medical-cases:read' },
+    { href: '/m/donors', label: 'Donateurs', icon: '🤝', perm: 'donors:read' },
+    { href: '/m/aids', label: 'Aides', icon: '💶', perm: 'aid-grants:read' },
+    { href: '/m/certificates', label: 'Attestations', icon: '🎖', perm: 'certificates:read' },
+    { href: '/m/compta', label: 'Compta', icon: '📒', perm: 'aid-grants:read' },
+    { href: '/m/queue', label: 'Accueil/File', icon: '🏥', perm: 'queue:read' },
+    { href: '/m/stocks', label: 'Stocks', icon: '📦', perm: 'beneficiaries:read' },
+    { href: '/dashboard', essential: true, label: 'Tableau de bord', icon: '📊', perm: 'reporting:read' },
+    { href: '/m/admin/users', label: 'Utilisateurs', icon: '👤', perm: 'users:read' },
+    { href: '/m/admin/rbac', label: 'Rôles & permissions', icon: '🔐', perm: 'admin:read' },
+    { href: '/m/admin/badge', label: 'Badge (config)', icon: '🪪', perm: 'admin:read' },
+    { href: '/license', label: 'Licence', icon: '📜', perm: 'reporting:read' },
+  ],
+  public: [{ href: '/aide', label: 'Aide', icon: '❓' }, { href: '/apropos', label: 'À propos', icon: 'ℹ️' }] });
+
+M({ key: 'agorascope', app: 'AgoraScope', brand: '🏛️ AgoraScope', tagline: "veille d'appels d'offres",
+  items: [
+    { href: '/', essential: true, label: 'Tableau de bord', icon: '📊' },
+    { href: '/clients', essential: true, label: 'Clients', icon: '👥' },
+    { href: '/tenders', essential: true, label: "Appels d'offres", icon: '📋' },
+    { href: '/discover', essential: true, label: 'Découverte', icon: '🔎' },
+    { href: '/optimize', label: 'Portefeuille', icon: '🎯' },
+    { href: '/responses', label: 'Réponses', icon: '📝' },
+    { href: '/benchmark', label: 'Benchmark', icon: '📐' },
+    { href: '/settings/providers', label: 'Fournisseurs', icon: '🔌', perm: 'admin:read' },
+  ] });
+
+M({ key: 'crm', app: 'CRM / TRADING', brand: '💼 CRM', tagline: 'gestion commerciale',
+  items: [
+    { href: '/', essential: true, label: 'Tableau de bord', icon: '▦' },
+    { href: '/commandes', essential: true, label: 'Commandes', icon: '🧾' },
+    { href: '/proformats', label: 'Proformats', icon: '📄' },
+    { href: '/clients', essential: true, label: 'Clients', icon: '👥' },
+    { href: '/employes', label: 'Employés', icon: '🧑‍💼' },
+    { href: '/fournisseurs', label: 'Fournisseurs', icon: '🏭' },
+    { href: '/assistant', label: 'Mon assistant', icon: '💬' },
+    { href: '/admin', label: 'Configuration', icon: '⚙', perm: 'app.config', children: [
+      { href: '/admin/roles', label: 'Rôles', icon: '🧑‍💼', perm: 'app.config' },
+      { href: '/admin/permissions', label: 'Permissions', icon: '🔐', perm: 'app.config' },
+      { href: '/admin/workflows', label: 'Workflows', icon: '🔀', perm: 'app.config' },
+      { href: '/admin/audit', label: 'Audit', icon: '📋', perm: 'app.config' },
+    ] },
+  ],
+  public: [{ href: '/aide', label: 'Aide', icon: '❓' }, { href: '/about', label: 'À propos', icon: 'ℹ️' }] });
+
+M({ key: 'mostagare', app: 'MostaGare', brand: '🚌 MostaGare', tagline: 'transport voyageurs',
+  items: [
+    { href: '/dashboard', essential: true, label: 'Tableau de bord', icon: '📊' },
+    { href: '/exploitation', essential: true, label: 'Exploitation', icon: '🚍', perm: 'sales.view', children: [
+      { href: '/sales', label: 'Ventes', icon: '🎫', perm: 'sales.view' },
+      { href: '/departures', label: 'Départs', icon: '🛫', perm: 'sales.view' },
+      { href: '/planning', label: 'Planning', icon: '🗓', perm: 'sales.view' },
+    ] },
+    { href: '/configuration', label: 'Configuration', icon: '⚙', perm: 'clients.view', children: [
+      { href: '/clients', essential: true, label: 'Clients', icon: '👥', perm: 'clients.view' },
+      { href: '/destinations', label: 'Destinations', icon: '📍', perm: 'clients.view' },
+    ] },
+    { href: '/accounting', label: 'Comptabilité', icon: '💰', perm: 'accounting.view' },
+    { href: '/admin', label: 'Administration', icon: '🛡', perm: 'users.view', children: [
+      { href: '/admin/users', label: 'Utilisateurs', icon: '👤', perm: 'users.view' },
+    ] },
+  ] });

package/src/index.js

@@ -0,0 +1,106 @@
+// @mostajs/menu-html — menu de navigation server-rendered (no-build), patron DIALECTE (un menu par app)
+// + ACCESSIBILITÉ (WCAG/ARIA : nav landmark, skip link, aria-current, disclosure clavier, focus visible,
+// variantes contraste/gros texte). COMPOSE rien (autonome). @author Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0
+import './dialects/index.js'; // enregistre les dialectes builtin (effet de bord, comme @mostajs/llm)
+import { registerMenuDialect, getMenuDialect, listMenuDialects, clearMenuDialects } from './registry.js';
+export { registerMenuDialect, getMenuDialect, listMenuDialects, clearMenuDialects };
+
+const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const allowed = (it, can, role) => !it.perm || (typeof can === 'function' ? can(role, it.perm) : true);
+const isCurrent = (href, current) => href === current || (href !== '/' && current && current.startsWith(href));
+
+/** Styles (incl. accessibilité : skip-link, focus visible, contraste élevé, gros texte). À inclure une fois. */
+export function menuStyles() {
+  return `<style>
+  .mm-skip{position:absolute;left:-999px;top:0;z-index:100;background:#111;color:#fff;padding:8px 12px;border-radius:0 0 6px 0}
+  .mm-skip:focus{left:0}
+  .mm-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+  /* WCAG 2.2 — 2.5.8 cible ≥24px ; 2.4.11 focus non masqué (scroll-margin) */
+  .mm-nav a,.mm-grp>summary{min-height:24px;display:inline-flex;align-items:center;scroll-margin:80px}
+  .mm-nav a{color:inherit;text-decoration:none;padding:6px 10px;border-radius:6px}
+  .mm-nav a:hover{background:rgba(255,255,255,.12)}
+  .mm-nav a[aria-current=page]{background:rgba(255,255,255,.22);font-weight:600}
+  .mm-nav a:focus-visible,.mm-nav summary:focus-visible{outline:3px solid #fde047;outline-offset:2px}
+  .mm-grp{position:relative} .mm-grp>summary{cursor:pointer;list-style:none;padding:6px 10px;border-radius:6px}
+  .mm-grp>summary::-webkit-details-marker{display:none}
+  .mm-grp[open]>summary{background:rgba(255,255,255,.18)}
+  .mm-sub{position:absolute;background:#0f172a;border-radius:8px;padding:6px;min-width:200px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.3)}
+  .mm-sub a{display:block}
+  /* Accessibilité : préférences utilisateur + variantes */
+  .mm-a11y-contrast .mm-nav a{color:#fff} .mm-a11y-contrast .mm-nav a[aria-current=page]{background:#fff;color:#000}
+  .mm-a11y-large .mm-nav,.mm-a11y-large .mm-nav a{font-size:18px}
+  @media (prefers-reduced-motion:reduce){.mm-nav a,.mm-grp{transition:none}}
+  /* RESPONSIVE — bouton hamburger (mobile) + nav adaptative (PC/tablette/mobile) */
+  .mm-burger{display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;font-size:20px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:8px;cursor:pointer}
+  .mm-burger:focus-visible{outline:3px solid #fde047;outline-offset:2px}
+  @media (min-width:1024px){ .mm-nav{gap:8px} }                 /* PC : confort */
+  @media (max-width:1023px) and (min-width:641px){ .mm-nav a,.mm-grp>summary{padding:6px 8px} } /* tablette : compact */
+  @media (max-width:640px){                                     /* mobile : repli derrière le hamburger */
+    .mm-burger{display:inline-flex}
+    .mm-nav{display:none;flex-direction:column;align-items:stretch;width:100%;order:99}
+    .mm-nav.mm-open{display:flex}
+    .mm-nav a,.mm-grp,.mm-grp>summary{width:100%}
+    .mm-sub{position:static;box-shadow:none;min-width:0;padding-left:16px}  /* sous-menus en pile */
+  }
+  </style>`;
+}
+
+/** Lien (avec aria-current si actif). */
+function link(it, current) {
+  const cur = isCurrent(it.href, current) ? ' aria-current="page"' : '';
+  return `<a href="${esc(it.href)}"${cur}>${it.icon ? `<span aria-hidden="true">${esc(it.icon)}</span> ` : ''}${esc(it.label)}</a>`;
+}
+/** Groupe avec enfants → disclosure accessible (<details>, clavier natif). */
+function group(it, can, role, current) {
+  const kids = (it.children || []).filter((c) => allowed(c, can, role));
+  if (!kids.length) return allowed(it, can, role) ? link(it, current) : '';
+  const open = kids.some((c) => isCurrent(c.href, current)) ? ' open' : '';
+  return `<details class="mm-grp"${open}><summary>${it.icon ? `<span aria-hidden="true">${esc(it.icon)}</span> ` : ''}${esc(it.label)} ▾</summary>
+    <div class="mm-sub" role="group" aria-label="${esc(it.label)}">${kids.map((c) => link(c, current)).join('')}</div></details>`;
+}
+
+/**
+ * Rend le menu d'une application (par clé de dialecte).
+ * @param {string} dialectKey  'salsabil' | 'agorascope' | 'crm' | 'mostagare' | …
+ * @param {object} [opts] { can(role,perm), role, current, a11y:{contrast,large}, showcaseAll, mainId='main' }
+ * @returns {{ html, skip, brand }} html du <nav>, lien d'évitement, marque.
+ */
+export function renderMenu(dialectKey, { can, role, current = '', a11y = {}, showcaseAll = false, mainId = 'main' } = {}) {
+  const d = getMenuDialect(dialectKey);
+  if (!d) return { html: '', skip: '', brand: '' };
+  // Variante cognitive (a11y.simple) : n'afficher que les entrées essentielles (réduit la charge).
+  const essentialOk = (it) => !a11y.simple || it.essential;
+  const pass = (it) => (showcaseAll || allowed(it, can, role)) && essentialOk(it);
+  const items = d.items.filter((it) => pass(it) || (it.children || []).some((c) => pass(c)))
+    .map((it) => (it.children ? group(it, showcaseAll ? null : can, role, current) : link(it, current))).join('');
+  const pub = (d.public || []).map((it) => link(it, current)).join('');
+  const cls = ['mm-root', a11y.contrast ? 'mm-a11y-contrast' : '', a11y.large ? 'mm-a11y-large' : '', a11y.simple ? 'mm-a11y-simple' : ''].filter(Boolean).join(' ');
+  const navId = `mm-nav-${esc(dialectKey)}`;
+  // Hamburger accessible (visible mobile uniquement) — pilote l'ouverture de la nav.
+  const burger = `<button class="mm-burger" aria-expanded="false" aria-controls="${navId}" aria-label="Ouvrir le menu de navigation"><span aria-hidden="true">☰</span></button>`;
+  const html = `${burger}<nav id="${navId}" class="mm-nav ${cls}" role="navigation" aria-label="Navigation principale — ${esc(d.app)}">${items}${pub}</nav>`;
+  return { html, skip: `<a class="mm-skip" href="#${esc(mainId)}">Aller au contenu principal</a>`, brand: d.brand || d.app, tagline: d.tagline || '' };
+}
+
+/** Script minimal (à inclure une fois) : bascule le hamburger (mobile) + aria-expanded. Sans dépendance. */
+export function menuScript() {
+  return `<script>document.addEventListener('click',function(e){var b=e.target.closest&&e.target.closest('.mm-burger');if(!b)return;var n=document.getElementById(b.getAttribute('aria-controls'));if(!n)return;var open=n.classList.toggle('mm-open');b.setAttribute('aria-expanded',open?'true':'false');});document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.querySelectorAll('.mm-nav.mm-open').forEach(function(n){n.classList.remove('mm-open');var b=document.querySelector('[aria-controls='+n.id+']');if(b)b.setAttribute('aria-expanded','false');});}});</script>`;
+}
+
+/**
+ * Rend une nav accessible depuis un TABLEAU d'items déjà filtré (pour composer dans un layout, ex.
+ * @mostajs/app-shell-ui). item = { href, label, icon?, children? }. Ne filtre pas (l'appelant l'a fait).
+ * @returns {{ html, skip }}
+ */
+export function renderItems(items = [], { current = '', navEnd = [], a11y = {}, mainId = 'main', ariaLabel = 'Navigation principale', navId = 'mm-nav-shell' } = {}) {
+  const top = items.map((it) => ((it.children || []).length ? group(it, null, null, current) : link(it, current))).join('');
+  const end = navEnd.map((it) => link(it, current)).join('');
+  const cls = [a11y.contrast ? 'mm-a11y-contrast' : '', a11y.large ? 'mm-a11y-large' : ''].filter(Boolean).join(' ');
+  const burger = `<button class="mm-burger" aria-expanded="false" aria-controls="${esc(navId)}" aria-label="Ouvrir le menu de navigation"><span aria-hidden="true">☰</span></button>`;
+  const html = `${burger}<nav id="${esc(navId)}" class="mm-nav ${cls}" role="navigation" aria-label="${esc(ariaLabel)}">${top}<span style="flex:1"></span>${end}</nav>`;
+  return { html, skip: `<a class="mm-skip" href="#${esc(mainId)}">Aller au contenu principal</a>` };
+}
+
+/** Liste des menus disponibles (pour choisir lequel par application). */
+export const menuCatalog = () => listMenuDialects().map((d) => ({ key: d.key, app: d.app, count: d.items.length }));
+export default { renderMenu, renderItems, menuStyles, menuScript, menuCatalog, registerMenuDialect, getMenuDialect, listMenuDialects };

package/src/registry.js

@@ -0,0 +1,13 @@
+// @mostajs/menu-html — registre de DIALECTES de menu (un menu par application, patron @mostajs/llm).
+// @author Dr Hamid MADANI <drmdh@msn.com>
+const REGISTRY = new Map();
+/** Enregistre un dialecte de menu. d = { key, app, brand?, tagline?, items[], public?[] } ;
+ *  item = { href, label, perm?, icon?, children?[] }. */
+export function registerMenuDialect(d) {
+  if (!d?.key || !Array.isArray(d?.items)) throw new Error('menu dialect: { key, items[] } requis');
+  REGISTRY.set(d.key, { public: [], ...d });
+  return d;
+}
+export function getMenuDialect(key) { return REGISTRY.get(key) || null; }
+export function listMenuDialects() { return [...REGISTRY.values()]; }
+export function clearMenuDialects() { REGISTRY.clear(); }