@mostajs/schema-form 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog — @mostajs/schema-form
 
+## 0.4.1 — 2026-10-09
+
+**Corrigé** (audit du 09/10/2026) : `name`, `opts.id`, `opts.action`, `min`, `max`, `step`, `rows` sont échappés —
+une valeur d'attribut ne peut plus fermer la balise. Essai T-STY-5.
+
+## 0.4.0 — 08/10/2026
+
+**L'habillage devient malléable** (demande du fondateur) : un style imposé en ligne ne se surchargeait qu'à
+coups de `!important`.
+
+**Ajouté**
+- `opts.style` de `renderForm` / `renderField` : `'inline'` (défaut, rendu inchangé) ou `'classes'` (AUCUN
+  `style="…"` ; la page habille).
+- Classes stables `sf-*` sur chaque élément, **dans les deux modes** : `sf-form`, `sf-section`, `sf-legend`,
+  `sf-field`, `sf-label`, `sf-req`, `sf-help`, `sf-input`, `sf-textarea`, `sf-check`, `sf-check-label`,
+  `sf-montant`, `sf-devise`, `sf-localized`, `sf-loc`, `sf-loc-tag`, `sf-couleur`, `sf-item`, `sf-item-legend`,
+  `sf-add`, `sf-remove`, `sf-submit`, `sf-title`.
+- `SF_CSS` : la feuille du mode `classes`, sur les jetons de Palette Studio (`--brand`, `--ink`, `--text`,
+  `--line`, `--field-border`, `--surface`, `--text-on-brand`, `--error-text`), avec replis ; `--sf-radius`
+  et les autres `--sf-*` se surchargent.
+- `opts.classe` : une classe ajoutée à `sf-form`.
+
+**Corrigé**
+- Les libellés écrits par le module (« Oui », « Enregistrer », « + Ajouter », « Retirer ») restaient en
+  français dans une page anglaise ou arabe : ils suivent désormais `locale` (fr, en, ar).
+- Un formulaire en `locale: 'ar'` porte `dir="rtl"` ; dans un champ `localized`, chaque saisie garde le sens de SA
+  langue (`dir="ltr"` pour fr et en, même dans une page arabe).
+- La devise d'un montant ne se coupe plus (`white-space:nowrap`).
+- `moduleInfo.version` annonçait encore 0.1.0.
+
+**Essais** : `test-scripts/style.test.mjs` (T-STY-1 à 4) ; surface publique : `SF_CSS` ajouté.
+
+
 ## 0.2.0 — 17/08/2026
 
 **Version incrémentée pour trois capacités qui existaient déjà en local sans avoir été publiées.**

package/README.md

@@ -37,7 +37,12 @@ form.onsubmit = (e) => { e.preventDefault(); const values = readValues(new FormD
 
 ## Types de champs
 `text` · `textarea` · `number` · `boolean` · `select` · `color` · `date` ·
-`localized` (un input par locale, RTL pour `ar`) · `repeater` (liste d'objets, `itemFields`).
+`localized` (un input par locale, chacun dans le sens de sa langue) · `montant` · `fichier` · `repeater` (liste d'objets, `itemFields`).
+
+## Habillage (0.4.0)
+`renderForm(schema, values, { style: 'classes' })` ne pose **aucun style en ligne** : chaque élément porte sa
+classe `sf-*`, et la page habille avec `SF_CSS` (jetons de Palette Studio : `--brand`, `--ink`, `--line`…) ou
+sa propre feuille. Le mode par défaut (`inline`) est inchangé. Les libellés propres au module suivent `locale`.
 
 ## Positionnement
 - `@mostajs/settings` → réglages **clé-valeur plat** (reste le bon choix pour ça).

package/llms.txt

@@ -1,7 +1,7 @@
 # @mostajs/schema-form — fiche LLM
 > Interface de SAISIE générique pilotée par schéma (zéro-dép HTML), réutilisable par toute app.
 
-- Version : 0.1.0 · Licence : AGPL-3.0-or-later · Auteur : Dr Hamid MADANI <drmdh@msn.com>
+- Version : 0.4.0 · Licence : AGPL-3.0-or-later · Auteur : Dr Hamid MADANI <drmdh@msn.com>
 - Chemin : mostajs/mosta-ui-html-stack/mosta-schema-form · **Niveau** : N2 (composé/UI)
 - Zéro dépendance runtime. Généralise le SchemaForm de TicketFlow (cas C, règle d'or §0).
 
@@ -54,6 +54,13 @@ Repeater côté navigateur : câbler add (clone d'un `.sf-item`, réindexer `nam
 - ⚠️ `capture="environment"` ouvre l'**appareil photo** sur mobile, pas la galerie.
 - ⚠️ Les OCTETS ne passent pas par `readValues` : ils se lisent avec `@mostajs/form-data-extract`.
 
+## HABILLAGE (0.4.0)
+- `renderForm(schema, values, { style: 'classes' })` : AUCUN style en ligne ; classes `sf-*` sur chaque élément
+  (posées aussi en mode `inline`, le défaut). Poser `SF_CSS` dans la page, ou sa propre feuille.
+- `SF_CSS` lit les jetons de Palette Studio (`--brand`, `--ink`/`--text`, `--line`/`--field-border`, `--surface`,
+  `--text-on-brand`, `--error-text`) : dans une page de @mostajs/wagon-ui, le formulaire prend le thème du site.
+- Les libellés propres au module (Oui, Enregistrer, + Ajouter, Retirer) suivent `locale` ; `locale: 'ar'` → `dir="rtl"`.
+
 ## PIÈGES
 - **Zéro-dép, HTML-string** : `renderForm` rend une chaîne ; côté React, injecter ou porter en composants.
 - `readValues` : Array traité comme liste [name,value] (pas via `.entries()`), FormData via `.entries()`.
@@ -65,8 +72,8 @@ Repeater côté navigateur : câbler add (clone d'un `.sf-item`, réindexer `nam
 docs/00-CARTOGRAPHIE-ET-PROPOSITION.md · examples/demo.html · examples/qatraxflow-recette.schema.js.
 Compose (à terme) `@mostajs/ui` pour une variante React. Voisin : `@mostajs/settings`, `@mostajs/crud-ui`.
 
-## SURFACE PUBLIQUE (13 membres, figée par un essai — v0.2.0)
-SF_THEME · escapeHtml · getPath · setPath · label · moduleInfo · moduleName ·
+## SURFACE PUBLIQUE (14 membres, figée par un essai — v0.4.0)
+SF_CSS · SF_THEME · escapeHtml · getPath · setPath · label · moduleInfo · moduleName ·
 renderForm · renderField · readValues · **repeaterScript** · **affichageMontant** · **centimesDepuis**
 
 - repeaterScript() — SANS lui, le bouton « + Ajouter » d'un repeater ne fait RIEN. Le gabarit

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mostajs/schema-form",
-  "version": "0.3.0",
-  "description": "Interface de SAISIE générique pilotée par schéma (zéro-dép) : sections + champs typés (text/textarea/number/boolean/select/color/date/localized/repeater), chemins imbriqués, multilingue AR/FR/EN. Rendu HTML (renderForm) + relecture (readValues). Réutilisable par toute app @mostajs.",
+  "version": "0.4.1",
+  "description": "Interface de SAISIE g\u00e9n\u00e9rique pilot\u00e9e par sch\u00e9ma (z\u00e9ro-d\u00e9p) : sections + champs typ\u00e9s (text/textarea/number/boolean/select/color/date/localized/repeater), chemins imbriqu\u00e9s, multilingue AR/FR/EN. Rendu HTML (renderForm) + relecture (readValues). R\u00e9utilisable par toute app @mostajs.",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -16,6 +16,9 @@
     "LICENSE",
     "CHANGELOG.md"
   ],
+  "scripts": {
+    "test": "bash test-scripts/run-tests.sh"
+  },
   "devDependencies": {
     "@mostajs/mjs-unit": "^0.3.1"
   },
@@ -34,8 +37,5 @@
     "nature": "compose",
     "reutilisabilite": "multi-domaine",
     "depend_de": []
-  },
-  "scripts": {
-    "test": "bash test-scripts/run-tests.sh"
   }
-}
+}

package/src/index.js

@@ -9,7 +9,7 @@
  * 1er consommateur : MostaQatraxFlow (saisie de recette Condition→Exécution→Comportement→Logs).
  */
 
-export const moduleInfo = { name: '@mostajs/schema-form', version: '0.1.0' };
+export const moduleInfo = { name: '@mostajs/schema-form', version: '0.4.0' };
 export const SF_THEME = { blue: '#1E88E5', ink: '#1a2b45', line: '#e3e9f2', bg: '#f7f9fc' };
 const LOCALES = ['ar', 'fr', 'en'];
 
@@ -37,18 +37,86 @@ export function setPath(obj, path, value) {
 }
 
 /* ── rendu d'un champ ──────────────────────────────────────────────────────── */
+//
+// DEUX HABILLAGES (0.4.0), et une seule structure :
+//   - `inline` (défaut, inchangé depuis 0.1) : chaque élément porte son `style="…"` — le formulaire s'affiche
+//     correct n'importe où, sans feuille de style ;
+//   - `classes` : AUCUN style en ligne. Chaque élément porte sa classe `sf-*`, et c'est la page qui habille —
+//     avec `SF_CSS` (jetons de Palette Studio : --brand, --ink, --line…) ou avec sa propre feuille.
+// Les classes `sf-*` sont posées dans LES DEUX modes : une app peut surcharger le rendu en ligne sans changer
+// de mode. Un style en ligne imposé ne se surcharge, lui, qu'à coups de `!important` : c'est ce qui rendait
+// le module raide (demande du fondateur, 08/10/2026).
 const inputStyle = `width:100%;padding:.5rem;border:1px solid ${SF_THEME.line};border-radius:.4rem;font:inherit`;
+const STYLES = {
+  input: inputStyle,
+  textarea: `${inputStyle};font-family:ui-monospace,monospace`,
+  check: 'display:inline-flex;gap:.4rem;align-items:center',
+  montant: 'display:flex;gap:.4rem;align-items:center',
+  devise: 'opacity:.6;font-weight:600;white-space:nowrap;flex:none',
+  couleur: `height:2.2rem;width:3rem;border:1px solid ${SF_THEME.line};border-radius:.4rem`,
+  localized: 'display:flex;flex-direction:column;gap:.3rem',
+  loc: 'display:flex;gap:.4rem;align-items:center',
+  locTag: 'width:2rem;font-size:.72rem;opacity:.6;text-transform:uppercase',
+  add: `margin-top:.4rem;background:${SF_THEME.blue};color:#fff;border:0;border-radius:.4rem;padding:.35rem .8rem;cursor:pointer`,
+  item: `border:1px solid ${SF_THEME.line};border-radius:.5rem;padding:.6rem;margin-bottom:.5rem`,
+  itemLegend: 'font-size:.75rem;opacity:.6',
+  remove: 'background:#C62828;color:#fff;border:0;border-radius:.4rem;padding:.2rem .6rem;cursor:pointer;font-size:.75rem',
+  field: 'margin-bottom:.9rem',
+  fieldCheck: 'margin-bottom:.8rem',
+  checkLabel: `font-size:.85rem;color:${SF_THEME.ink};margin-top:.2rem;font-weight:600`,
+  label: `display:block;font-size:.85rem;font-weight:600;color:${SF_THEME.ink};margin-bottom:.25rem`,
+  req: 'color:#C62828',
+  help: 'font-size:.75rem;opacity:.6;margin-top:.2rem',
+  section: `border:1px solid ${SF_THEME.line};border-radius:.6rem;padding:1rem;margin-bottom:1rem`,
+  legend: `padding:0 .5rem;font-weight:700;color:${SF_THEME.blue}`,
+  submit: `background:${SF_THEME.blue};color:#fff;border:0;border-radius:.45rem;padding:.6rem 1.2rem;font-weight:600;cursor:pointer`,
+  title: `color:${SF_THEME.ink}`,
+};
+/** ` class="sf-…"` toujours ; ` style="…"` seulement en mode `inline`. */
+const at = (mode, cls, cle) => ` class="sf-${cls}"${mode === 'classes' || !STYLES[cle ?? cls] ? '' : ` style="${STYLES[cle ?? cls]}"`}`;
 
-function renderControl(f, value, name) {
+/** Les libellés que le module écrit lui-même, dans la langue du formulaire. */
+const MOTS = {
+  oui: { fr: 'Oui', en: 'Yes', ar: 'نعم' },
+  ajouter: { fr: '+ Ajouter', en: '+ Add', ar: '+ إضافة' },
+  retirer: { fr: 'Retirer', en: 'Remove', ar: 'حذف' },
+  enregistrer: { fr: 'Enregistrer', en: 'Save', ar: 'حفظ' },
+};
+
+/**
+ * La feuille de style du mode `classes`. Elle lit les jetons de Palette Studio (ceux que pose @mostajs/wagon-ui),
+ * avec des replis : posée dans une page qui n'en a aucun, elle donne le rendu de toujours. Une app change un
+ * jeton (`--sf-radius`, `--brand`…) sans réécrire une règle.
+ */
+export const SF_CSS = `.sf-form{--sf-accent:var(--brand,${SF_THEME.blue});--sf-ink:var(--ink,var(--text,${SF_THEME.ink}));--sf-line:var(--field-border,var(--line,${SF_THEME.line}));--sf-radius:.6rem;--sf-fond:var(--surface,#fff);--sf-erreur:var(--error-text,#C62828)}
+.sf-form .sf-field{margin-bottom:.9rem}
+.sf-form .sf-label{display:block;font-size:.85rem;font-weight:600;color:var(--sf-ink);margin-bottom:.25rem}
+.sf-form .sf-req{color:var(--sf-erreur)}
+.sf-form .sf-help{font-size:.75rem;opacity:.65;margin-top:.2rem}
+.sf-form .sf-input,.sf-form .sf-textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--sf-line);border-radius:var(--sf-radius);font:inherit;background:var(--sf-fond);color:var(--sf-ink)}
+.sf-form .sf-input:focus,.sf-form .sf-textarea:focus{outline:2px solid var(--sf-accent);outline-offset:1px}
+.sf-form .sf-check{display:inline-flex;gap:.4rem;align-items:center}
+.sf-form .sf-montant,.sf-form .sf-loc{display:flex;gap:.4rem;align-items:center}
+.sf-form .sf-localized{display:flex;flex-direction:column;gap:.3rem}
+.sf-form .sf-loc-tag{width:2rem;font-size:.72rem;opacity:.6;text-transform:uppercase}
+.sf-form .sf-devise{opacity:.65;font-weight:600;white-space:nowrap;flex:none}
+.sf-form .sf-couleur{height:2.2rem;width:3rem;border:1px solid var(--sf-line);border-radius:var(--sf-radius)}
+.sf-form .sf-section{border:1px solid var(--sf-line);border-radius:var(--sf-radius);padding:1rem;margin-bottom:1rem}
+.sf-form .sf-legend{padding:0 .5rem;font-weight:700;color:var(--sf-ink)}
+.sf-form .sf-item{border:1px solid var(--sf-line);border-radius:var(--sf-radius);padding:.6rem;margin-bottom:.5rem}
+.sf-form .sf-submit,.sf-form .sf-add{background:var(--sf-accent);color:var(--text-on-brand,#fff);border:0;border-radius:999px;padding:.6rem 1.3rem;font-weight:600;cursor:pointer}
+.sf-form .sf-remove{background:transparent;color:var(--sf-erreur);border:1px solid currentColor;border-radius:999px;padding:.2rem .7rem;cursor:pointer;font-size:.75rem}`;
+
+function renderControl(f, value, name, mode = 'inline', locale = 'fr') {
   const req = f.required ? ' required' : '';
-  const ph = f.placeholder ? ` placeholder="${escapeHtml(label(f.placeholder))}"` : '';
+  const ph = f.placeholder ? ` placeholder="${escapeHtml(label(f.placeholder, locale))}"` : '';
   switch (f.type) {
     case 'textarea':
-      return `<textarea name="${name}"${req}${ph} rows="${f.rows || 4}" style="${inputStyle};font-family:ui-monospace,monospace">${escapeHtml(value ?? '')}</textarea>`;
+      return `<textarea name="${escapeHtml(name)}"${req}${ph} rows="${escapeHtml(f.rows || 4)}"${at(mode, 'textarea')}>${escapeHtml(value ?? '')}</textarea>`;
     case 'number':
-      return `<input type="number" name="${name}"${req}${ph} value="${escapeHtml(value ?? '')}"${f.min != null ? ` min="${f.min}"` : ''}${f.max != null ? ` max="${f.max}"` : ''}${f.step != null ? ` step="${f.step}"` : ''} style="${inputStyle}">`;
+      return `<input type="number" name="${escapeHtml(name)}"${req}${ph} value="${escapeHtml(value ?? '')}"${f.min != null ? ` min="${escapeHtml(f.min)}"` : ''}${f.max != null ? ` max="${escapeHtml(f.max)}"` : ''}${f.step != null ? ` step="${escapeHtml(f.step)}"` : ''}${at(mode, 'input')}>`;
     case 'boolean':
-      return `<label style="display:inline-flex;gap:.4rem;align-items:center"><input type="checkbox" name="${name}" value="true"${value ? ' checked' : ''}> ${escapeHtml(label(f.help) || 'Oui')}</label>`;
+      return `<label${at(mode, 'check')}><input type="checkbox" name="${escapeHtml(name)}" value="true"${value ? ' checked' : ''}> ${escapeHtml(label(f.help, locale) || label(MOTS.oui, locale))}</label>`;
     // ── LE CHAMP FICHIER (0.3.0) ──────────────────────────────────────────
     //
     // ⚠️ `capture` ouvre l'APPAREIL PHOTO sur mobile, au lieu de la galerie. C'est ce qu'on veut
@@ -59,53 +127,52 @@ function renderControl(f, value, name) {
     // décide quel fichier est sélectionné (ce serait une exfiltration). Un formulaire de
     // modification doit donc afficher la pièce DÉJÀ envoyée à côté du champ, pas dedans.
     case 'fichier':
-      return `<input type="file" name="${name}"${req}`
+      return `<input type="file" name="${escapeHtml(name)}"${req}`
         + `${f.accept ? ` accept="${escapeHtml(f.accept)}"` : ''}`
         + `${f.capture ? ` capture="${escapeHtml(f.capture)}"` : ''}`
-        + `${f.multiple ? ' multiple' : ''} style="${inputStyle}">`;
+        + `${f.multiple ? ' multiple' : ''}${at(mode, 'input')}>`;
     case 'select':
-      return `<select name="${name}"${req} style="${inputStyle}">${(f.options || []).map((o) => `<option value="${escapeHtml(o.value)}"${String(value) === String(o.value) ? ' selected' : ''}>${escapeHtml(label(o.label ?? o.value))}</option>`).join('')}</select>`;
+      return `<select name="${escapeHtml(name)}"${req}${at(mode, 'input')}>${(f.options || []).map((o) => `<option value="${escapeHtml(o.value)}"${String(value) === String(o.value) ? ' selected' : ''}>${escapeHtml(label(o.label ?? o.value, locale))}</option>`).join('')}</select>`;
     case 'montant': {
       // Un texte, PAS un `number` : le contrôle numérique du navigateur rend un flottant, et un
       // flottant n'est pas un montant. La conversion en unités mineures se fait à la relecture,
       // par lecture de la CHAÎNE (voir centimesDepuis).
       const dec = f.decimales ?? 2;
       const aff = value === undefined || value === null || value === '' ? '' : affichageMontant(value, dec);
-      return `<div style="display:flex;gap:.4rem;align-items:center">
-        <input type="text" inputmode="decimal" name="${name}"${req} value="${escapeHtml(aff)}" placeholder="${escapeHtml(label(f.placeholder) || (dec ? '0,00' : '0'))}" style="${inputStyle}">
-        ${f.devise ? `<span style="opacity:.6;font-weight:600">${escapeHtml(f.devise)}</span>` : ''}</div>`;
+      return `<div${at(mode, 'montant')}>
+        <input type="text" inputmode="decimal" name="${escapeHtml(name)}"${req} value="${escapeHtml(aff)}" placeholder="${escapeHtml(label(f.placeholder, locale) || (dec ? '0,00' : '0'))}"${at(mode, 'input')}>
+        ${f.devise ? `<span${at(mode, 'devise')}>${escapeHtml(f.devise)}</span>` : ''}</div>`;
     }
     case 'color':
-      return `<input type="color" name="${name}" value="${escapeHtml(value || '#000000')}" style="height:2.2rem;width:3rem;border:1px solid ${SF_THEME.line};border-radius:.4rem">`;
+      return `<input type="color" name="${escapeHtml(name)}" value="${escapeHtml(value || '#000000')}"${at(mode, 'couleur')}>`;
     case 'date':
-      return `<input type="date" name="${name}"${req} value="${escapeHtml(value ?? '')}" style="${inputStyle}">`;
+      return `<input type="date" name="${escapeHtml(name)}"${req} value="${escapeHtml(value ?? '')}"${at(mode, 'input')}>`;
     case 'localized': {
       const locs = f.locales || LOCALES;
-      return `<div style="display:flex;flex-direction:column;gap:.3rem">${locs.map((lc) =>
-        `<div style="display:flex;gap:.4rem;align-items:center"><span style="width:2rem;font-size:.72rem;opacity:.6;text-transform:uppercase">${lc}</span><input name="${name}.${lc}"${lc === 'ar' ? ' dir="rtl"' : ''} value="${escapeHtml((value && value[lc]) ?? '')}" style="${inputStyle}"></div>`).join('')}</div>`;
+      return `<div${at(mode, 'localized')}>${locs.map((lc) =>
+        `<div${at(mode, 'loc')}><span${at(mode, 'loc-tag', 'locTag')}>${lc}</span><input name="${escapeHtml(`${name}.${lc}`)}" dir="${lc === 'ar' ? 'rtl' : 'ltr'}" value="${escapeHtml((value && value[lc]) ?? '')}"${at(mode, 'input')}></div>`).join('')}</div>`;
     }
     case 'repeater': {
       const arr = Array.isArray(value) ? value : [];
-      const items = arr.map((item, i) => renderRepeaterItem(f, item, `${name}[${i}]`, i)).join('');
+      const items = arr.map((item, i) => renderRepeaterItem(f, item, `${name}[${i}]`, i, mode, locale)).join('');
       // Un GABARIT accompagne toujours la liste, même vide : sans lui, « + Ajouter » n'aurait
       // rien à cloner, et une liste qu'on ne peut pas allonger n'est pas une liste — c'est un
       // formulaire figé qui en a l'air.
-      const gabarit = `<template class="sf-tpl">${renderRepeaterItem(f, {}, `${name}[__i__]`, 0)}</template>`;
-      return `<div class="sf-repeater" data-name="${name}">${items}${gabarit}<button type="button" class="sf-add" style="margin-top:.4rem;background:${SF_THEME.blue};color:#fff;border:0;border-radius:.4rem;padding:.35rem .8rem;cursor:pointer">${escapeHtml(label(f.addLabel) || '+ Ajouter')}</button></div>`;
+      const gabarit = `<template class="sf-tpl">${renderRepeaterItem(f, {}, `${name}[__i__]`, 0, mode, locale)}</template>`;
+      return `<div class="sf-repeater" data-name="${escapeHtml(name)}">${items}${gabarit}<button type="button"${at(mode, 'add')}>${escapeHtml(label(f.addLabel, locale) || label(MOTS.ajouter, locale))}</button></div>`;
     }
     default: // text
-      return `<input type="text" name="${name}"${req}${ph} value="${escapeHtml(value ?? '')}" style="${inputStyle}">`;
+      return `<input type="text" name="${escapeHtml(name)}"${req}${ph} value="${escapeHtml(value ?? '')}"${at(mode, 'input')}>`;
   }
 }
-function renderRepeaterItem(f, item, prefix, i) {
-  return `<fieldset class="sf-item" style="border:1px solid ${SF_THEME.line};border-radius:.5rem;padding:.6rem;margin-bottom:.5rem">
-    <legend style="font-size:.75rem;opacity:.6">#${i + 1}</legend>
-    ${(f.itemFields || []).map((sub) => renderField({ ...sub, path: sub.path || sub.name }, getPath(item, sub.path || sub.name), `${prefix}.${sub.path || sub.name}`)).join('')}
-    <button type="button" class="sf-remove" style="background:#C62828;color:#fff;border:0;border-radius:.4rem;padding:.2rem .6rem;cursor:pointer;font-size:.75rem">Retirer</button>
+function renderRepeaterItem(f, item, prefix, i, mode = 'inline', locale = 'fr') {
+  return `<fieldset${at(mode, 'item')}>
+    <legend${at(mode, 'item-legend', 'itemLegend')}>#${i + 1}</legend>
+    ${(f.itemFields || []).map((sub) => renderField({ ...sub, path: sub.path || sub.name }, getPath(item, sub.path || sub.name), `${prefix}.${sub.path || sub.name}`, locale, { style: mode })).join('')}
+    <button type="button"${at(mode, 'remove')}>${escapeHtml(label(MOTS.retirer, locale))}</button>
   </fieldset>`;
 }
 
-/** Rend un champ complet (label + contrôle). `name` = attribut name/chemin. */
 /**
  * Une saisie textuelle → un ENTIER d'unités mineures, **sans jamais passer par un flottant**.
  *
@@ -118,7 +185,7 @@ function renderRepeaterItem(f, item, prefix, i) {
  * Au-delà de `decimales`, l'arrondi est commercial (demi au-dessus), calculé sur la chaîne.
  */
 export function centimesDepuis(saisie, decimales = 2) {
-  const t = String(saisie ?? '').trim().replace(/[\s\u00a0\u202f]/g, '').replace(',', '.');
+  const t = String(saisie ?? '').trim().replace(/[\s  ]/g, '').replace(',', '.');
   if (t === '') return undefined;
   const m = /^(-?)(\d*)(?:\.(\d*))?$/.exec(t);
   if (!m || (!m[2] && !m[3])) return null;
@@ -144,26 +211,32 @@ export function affichageMontant(centimes, decimales = 2) {
     : `${signe}${brut.slice(0, -decimales)},${brut.slice(-decimales)}`;
 }
 
-export function renderField(f, value, name = f.path, locale = 'fr') {
-  if (f.type === 'boolean') return `<div class="sf-field" style="margin-bottom:.8rem">${renderControl(f, value, name)}${f.help ? '' : ''}<div style="font-size:.85rem;color:${SF_THEME.ink};margin-top:.2rem;font-weight:600">${escapeHtml(label(f.label, locale))}</div></div>`;
-  return `<div class="sf-field" style="margin-bottom:.9rem">
-    <label style="display:block;font-size:.85rem;font-weight:600;color:${SF_THEME.ink};margin-bottom:.25rem">${escapeHtml(label(f.label, locale))}${f.required ? ' <span style="color:#C62828">*</span>' : ''}</label>
-    ${renderControl(f, value, name)}
-    ${f.help && f.type !== 'boolean' ? `<div style="font-size:.75rem;opacity:.6;margin-top:.2rem">${escapeHtml(label(f.help, locale))}</div>` : ''}
+/** Rend un champ complet (label + contrôle). `name` = attribut name/chemin ; `opts.style` : 'inline' | 'classes'. */
+export function renderField(f, value, name = f.path, locale = 'fr', opts = {}) {
+  const mode = opts.style === 'classes' ? 'classes' : 'inline';
+  if (f.type === 'boolean') return `<div${at(mode, 'field', 'fieldCheck')}>${renderControl(f, value, name, mode, locale)}<div${at(mode, 'check-label', 'checkLabel')}>${escapeHtml(label(f.label, locale))}</div></div>`;
+  return `<div${at(mode, 'field')}>
+    <label${at(mode, 'label')}>${escapeHtml(label(f.label, locale))}${f.required ? ` <span${at(mode, 'req')}>*</span>` : ''}</label>
+    ${renderControl(f, value, name, mode, locale)}
+    ${f.help ? `<div${at(mode, 'help')}>${escapeHtml(label(f.help, locale))}</div>` : ''}
   </div>`;
 }
 
-/** Rend un formulaire complet depuis un schéma { title?, sections?[], fields?[] }. */
+/**
+ * Rend un formulaire complet depuis un schéma { title?, sections?[], fields?[] }.
+ * opts : id, action, locale, submitLabel (null = sans bouton), style ('inline' | 'classes'), classe (ajoutée à sf-form).
+ */
 export function renderForm(schema, values = {}, opts = {}) {
   const locale = opts.locale || 'fr';
+  const mode = opts.style === 'classes' ? 'classes' : 'inline';
   const sections = schema.sections || [{ fields: schema.fields || [] }];
   const body = sections.map((sec) => {
-    const inner = (sec.fields || []).map((f) => renderField(f, getPath(values, f.path), f.path, locale)).join('');
+    const inner = (sec.fields || []).map((f) => renderField(f, getPath(values, f.path), f.path, locale, { style: mode })).join('');
     if (!sec.label && !sec.id) return inner;
-    return `<fieldset style="border:1px solid ${SF_THEME.line};border-radius:.6rem;padding:1rem;margin-bottom:1rem">
-      <legend style="padding:0 .5rem;font-weight:700;color:${SF_THEME.blue}">${escapeHtml(label(sec.label, locale) || sec.id)}</legend>${inner}</fieldset>`;
+    return `<fieldset${at(mode, 'section')}>
+      <legend${at(mode, 'legend')}>${escapeHtml(label(sec.label, locale) || sec.id)}</legend>${inner}</fieldset>`;
   }).join('');
-  const submit = opts.submitLabel === null ? '' : `<button type="submit" style="background:${SF_THEME.blue};color:#fff;border:0;border-radius:.45rem;padding:.6rem 1.2rem;font-weight:600;cursor:pointer">${escapeHtml(opts.submitLabel || 'Enregistrer')}</button>`;
+  const submit = opts.submitLabel === null ? '' : `<button type="submit"${at(mode, 'submit')}>${escapeHtml(label(opts.submitLabel, locale) || label(MOTS.enregistrer, locale))}</button>`;
   // ── L'ENCTYPE EST POSÉ TOUT SEUL, ET C'EST LE POINT ───────────────────────
   //
   // ⚠️ Un formulaire qui porte un `<input type=file>` SANS `enctype="multipart/form-data"` envoie
@@ -174,8 +247,9 @@ export function renderForm(schema, values = {}, opts = {}) {
   // On ne le laisse donc pas à la charge de l'appelant : dès qu'un champ `fichier` figure au
   // schéma — y compris DANS un répéteur — l'attribut est posé.
   const aUnFichier = JSON.stringify(schema).includes('"fichier"');
-  return `<form class="sf-form"${opts.id ? ` id="${opts.id}"` : ''}${opts.action ? ` method="post" action="${opts.action}"` : ''}${aUnFichier ? ' enctype="multipart/form-data"' : ''}>
-    ${schema.title ? `<h2 style="color:${SF_THEME.ink}">${escapeHtml(label(schema.title, locale))}</h2>` : ''}${body}${submit}</form>`;
+  const classe = `sf-form${opts.classe ? ` ${escapeHtml(opts.classe)}` : ''}`;
+  return `<form class="${classe}"${opts.id ? ` id="${escapeHtml(opts.id)}"` : ''}${opts.action ? ` method="post" action="${escapeHtml(opts.action)}"` : ''}${aUnFichier ? ' enctype="multipart/form-data"' : ''}${locale === 'ar' ? ' dir="rtl"' : ''}>
+    ${schema.title ? `<h2${at(mode, 'title')}>${escapeHtml(label(schema.title, locale))}</h2>` : ''}${body}${submit}</form>`;
 }
 
 /* ── relecture des valeurs (FormData → objet imbriqué) ─────────────────────── */