@nodefony/devkit 10.0.0-beta.4 → 10.0.0-beta.5

package/dist/nodefony/mcp/profileReport.js

@@ -109,7 +109,7 @@ function gaps(report, ctx) {
 	if (report.requests === 0 && shot !== void 0) out.push("aucune réponse profilée" + (shot.client.failure === null ? "" : ` : ${shot.client.failure}`));
 	else if (report.requests === 0) out.push("aucune requête observée : l'application n'a reçu aucun trafic pendant la fenêtre (cet outil n'en génère pas — lancer la page, les tests ou une charge pendant l'observation)");
 	if (ctx.lost > 0) out.push(`${ctx.lost} profil(s) perdu(s) avant lecture (tampon du profileur débordé) : les chiffres portent sur un échantillon`);
-	if (report.untimed > 0) out.push(`${report.untimed} requête(s) sans durée (mesure des phases désactivée, ou requête interrompue)`);
+	if (report.untimed > 0) out.push(`${report.untimed} requête(s) sans durée (chronométrage coupé par timing.enabled: false)`);
 	if (ctx.interrupted) out.push(`${shot === void 0 ? "observation interrompue" : "tir interrompu"} après ${ms(ctx.elapsedMs / 1e3)} s : le serveur s'arrête (rechargement après une modification de fichier ?) — rappeler ` + (shot === void 0 ? "nodefony_observe" : "nodefony_profile_route") + " une fois le serveur redémarré, sans modifier de fichier pendant la mesure");
 	if (ctx.cancelled) out.push(shot === void 0 ? `observation abandonnée après ${ms(ctx.elapsedMs / 1e3)} s sur ${ms(ctx.windowMs / 1e3)} s` : `tir abandonné après ${ms(ctx.elapsedMs / 1e3)} s : ${shot.sent} requête(s) envoyée(s) sur ${shot.requested}`);
 	return out;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodefony/devkit",
-  "version": "10.0.0-beta.4",
+  "version": "10.0.0-beta.5",
   "type": "module",
   "description": "Outillage de développement d'une application Nodefony : carte de visite du projet et portes de découverte pour un agent de développement",
   "author": "Christophe CAMENSULI <ccamensuli@gmail.com>",
@@ -27,20 +27,20 @@
     "test:integration": "vitest run --config vitest.integration.config.ts"
   },
   "peerDependencies": {
-    "@nodefony/ai": "^10.0.0-beta.4",
-    "@nodefony/framework": "^10.0.0-beta.4",
-    "@nodefony/http": "^10.0.0-beta.4",
+    "@nodefony/ai": "^10.0.0-beta.5",
+    "@nodefony/framework": "^10.0.0-beta.5",
+    "@nodefony/http": "^10.0.0-beta.5",
     "lighthouse": "^13.0.0",
-    "nodefony": "^10.0.0-beta.4",
+    "nodefony": "^10.0.0-beta.5",
     "playwright": "^1.50.0",
     "zod": "^4.6.7"
   },
   "devDependencies": {
-    "@modelcontextprotocol/sdk": "1.32.1",
-    "@nodefony/ai": "^10.0.0-beta.4",
-    "@nodefony/framework": "^10.0.0-beta.4",
-    "@nodefony/http": "^10.0.0-beta.4",
-    "nodefony": "^10.0.0-beta.4"
+    "@modelcontextprotocol/sdk": "1.32.2",
+    "@nodefony/ai": "^10.0.0-beta.5",
+    "@nodefony/framework": "^10.0.0-beta.5",
+    "@nodefony/http": "^10.0.0-beta.5",
+    "nodefony": "^10.0.0-beta.5"
   },
   "dependencies": {
     "axe-core": "4.14.0",

package/skills/nodefony-add-crud/SKILL.md

@@ -195,7 +195,11 @@ refus tombe tout seul.
 
 ## Les trois vérités à savoir avant de livrer (SQL)
 
-1. **La table naît au prochain démarrage en développement** (`CREATE TABLE IF NOT EXISTS`).
+1. **La table existe dès la commande quand l'application versionne ses migrations** (toute
+   application `complete`) : `create entity` écrit ET applique la migration de la table neuve —
+   `--no-migrate` s'en dispense ; si des entités modifiées attendaient, la migration est écrite mais
+   PAS appliquée, et la sortie nomme les tables en trop. Sinon, la table naît au prochain démarrage
+   en développement (`CREATE TABLE IF NOT EXISTS`).
 2. **La modifier n'altère rien** — aucun `ALTER` n'est émis. Une colonne ajoutée à une entité déjà
    créée n'apparaîtra pas dans une base existante.
 3. **La production ne fabrique JAMAIS le schéma.** Elle l'applique par des migrations, écrites par

package/skills/nodefony-browser/references/sondes.md

@@ -37,6 +37,11 @@ C'est au lecteur de juger — la sonde fournit, elle ne condamne pas ce qu'elle
 Un sélecteur par élément (`NF_BROWSER_PROBES=libellé=sélecteur,…`) ; pour chacun : texte, couleur,
 fond effectif, rapport de contraste, police, verdict WCAG, taille rendue.
 
+- **Un widget en Shadow DOM est invisible à un sélecteur nu** — la sonde rend `absent`, et l'on
+  conclut à tort que l'élément n'existe pas. `hôte >>> sélecteur` entre dans la racine fantôme
+  OUVERTE de l'hôte (`#ma-barre >>> .bouton`), segment après segment. Le fond effectif traverse la
+  frontière de la même façon : au-dessus de la racine fantôme, c'est l'hôte qui fait fond.
+
 - **Le fond effectif empile TOUTES les couches** jusqu'au premier ancêtre opaque, puis les compose.
   Deux erreurs à ne pas refaire : lire `backgroundColor` sur l'élément rend `rgba(0,0,0,0)` et un
   contraste faux ; s'arrêter à la première couche non transparente traite un voile à 13 % comme un
@@ -102,9 +107,16 @@ d'un `alt` restent un jugement humain.
 ## `rendu` — la page tient-elle dans son viewport, ses polices sont-elles là
 
 - `horizontalOverflow` : la page dépasse-t-elle la largeur de la fenêtre (le défilement
-  horizontal accidentel). C'est LUI qui porte le verdict.
+  horizontal accidentel). Il porte le verdict.
+- `horizontalScrollers` : les conteneurs défilants (`overflow-x: auto|scroll`) dont le contenu
+  déborde — une barre de défilement horizontale DANS la page, que `horizontalOverflow` ne voit
+  pas. Il porte AUSSI le verdict. Vécu : une barre de débogage en Shadow DOM débordait de 232 px
+  pendant que la page entière se déclarait saine. Cause fréquente : une infobulle invisible
+  (`visibility: hidden`) ancrée à gauche sur un bouton de droite — invisible, elle élargit quand
+  même la zone défilable.
 - `elementsOutsideViewport` : une **information**, pas un verdict — carrousels, tiroirs et textes
   destinés aux lecteurs d'écran sortent du viewport légitimement.
+- Les trois mesures descendent dans les **Shadow DOM ouverts**.
 - `fonts` : ce que `document.fonts` a RÉELLEMENT chargé (statut par famille + graisse). Une
   police en échec bascule le verdict — le texte s'affiche alors dans une police de repli, et toutes
   les mesures de taille en héritent.

package/skills/nodefony-browser/scripts/inspect.mjs

@@ -27,7 +27,8 @@
  *                        saisir, choisir, touche, voir, defiler, attendre. Un écran qui se déplie
  *                        au clic n'existe pas tant qu'on ne l'a pas ouvert.
  * `@env` NF_BROWSER_FULLPAGE 1 = capture la page ENTIÈRE (défaut : la fenêtre)
- * `@env` NF_BROWSER_PROBES sélecteurs CSS à sonder, séparés par des virgules (`libellé=sélecteur`)
+ * `@env` NF_BROWSER_PROBES sélecteurs CSS à sonder, séparés par des virgules (`libellé=sélecteur`) ;
+ *                        `hôte >>> sélecteur` entre dans le Shadow DOM ouvert de l'hôte
  * `@env` NF_BROWSER_WIDTHS largeurs de la famille responsive (défaut 360,768,1280)
  * `@env` NF_BROWSER_VIEWPORT écran mesuré : mobile, mobile-court, tablette, bureau (défaut), large, tres-large, ou LARGEURxHAUTEUR — sous 600 px, émulé en téléphone (tactile, densité 2)
  * `@env` NF_BROWSER_PRIMARY sélecteur de l'action principale pour la famille pli (défaut : le plus grand bouton de validation visible)
@@ -384,7 +385,14 @@ function isVisible(el) {
 function effectiveBackground(el) {
   const layers = [];
   let opaqueLayer = null;
-  for (let n = el; n; n = n.parentElement) {
+  // Un élément posé à la racine d'un Shadow DOM n'a pas de parent : son fond
+  // est celui de l'HÔTE, et la remontée continue de l'autre côté.
+  const up = (n) => {
+    if (n.parentElement) return n.parentElement;
+    const root = n.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+  };
+  for (let n = el; n; n = up(n)) {
     const bg = getComputedStyle(n).backgroundColor;
     if (!bg || bg.includes("transparent")) continue;
     const { a } = parseColor(bg);
@@ -550,18 +558,44 @@ function probeA11y() {
  * Famille rendu — la page tient-elle dans son viewport, ses polices sont-elles
  * VRAIMENT arrivées. Les éléments hors viewport sont une INFO, pas le verdict :
  * carrousels et textes pour lecteurs d'écran en produisent légitimement.
+ *
+ * Le débordement se cherche AUSSI dans les Shadow DOM ouverts, et dans chaque
+ * conteneur défilant : un widget isolé (une barre de débogage) peut porter sa
+ * propre barre de défilement horizontale sans que la page, elle, déborde d'un
+ * pixel — la mesure du document seul la déclarait saine.
  */
 function probeRendering() {
   const doc = document.scrollingElement ?? document.documentElement;
   const overflowPx = Math.max(0, doc.scrollWidth - window.innerWidth);
   const outsideViewport = [];
   let totalOutside = 0;
-  for (const el of document.querySelectorAll("body *")) {
+  const scrollersX = [];
+  let totalScrollersX = 0;
+  const all = (root, out) => {
+    for (const el of root.querySelectorAll("*")) {
+      out.push(el);
+      if (el.shadowRoot) all(el.shadowRoot, out);
+    }
+    return out;
+  };
+  for (const el of all(document.body, [])) {
     const r = el.getBoundingClientRect();
-    if (r.width > 0 && r.right > window.innerWidth + 1) {
+    if (r.width === 0) continue;
+    if (r.right > window.innerWidth + 1 && totalOutside < 200) {
       totalOutside += 1;
       if (outsideViewport.length < 3) outsideViewport.push(describeElement(el));
-      if (totalOutside >= 200) break;
+    }
+    const ox = getComputedStyle(el).overflowX;
+    if (
+      (ox === "auto" || ox === "scroll") &&
+      el.scrollWidth > el.clientWidth + 1
+    ) {
+      totalScrollersX += 1;
+      if (scrollersX.length < 3)
+        scrollersX.push({
+          element: describeElement(el),
+          overflowPx: el.scrollWidth - el.clientWidth,
+        });
     }
   }
   const families = {};
@@ -571,8 +605,12 @@ function probeRendering() {
     if (f.status === "error") failedFonts += 1;
   }
   return {
-    verdict: overflowPx > 0 || failedFonts > 0 ? "ALERTE" : "OK",
+    verdict:
+      overflowPx > 0 || totalScrollersX > 0 || failedFonts > 0
+        ? "ALERTE"
+        : "OK",
     horizontalOverflow: { present: overflowPx > 0, overflowPx },
+    horizontalScrollers: { total: totalScrollersX, examples: scrollersX },
     elementsOutsideViewport: { total: totalOutside, examples: outsideViewport },
     fonts: {
       status: document.fonts.status,
@@ -659,7 +697,16 @@ async function measurePage(args) {
       s.getAttribute("src"),
     ),
     probes: args.probes.map(({ label, sel }) => {
-      const el = document.querySelector(sel);
+      // `hôte >>> sélecteur` traverse un Shadow DOM ouvert (un widget isolé,
+      // une barre de débogage) : chaque segment se cherche dans la racine
+      // fantôme de l'élément trouvé par le précédent.
+      let el = null;
+      let scope = document;
+      for (const part of sel.split(">>>")) {
+        el = scope?.querySelector(part.trim()) ?? null;
+        scope = el?.shadowRoot ?? null;
+        if (el === null) break;
+      }
       if (!el) return { label, absent: true, selector: sel };
       const cs = getComputedStyle(el);
       const r = el.getBoundingClientRect();