@mostajs/crud-ui 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 Format [Keep a Changelog](https://keepachangelog.com/fr/1.0.0/) · [SemVer](https://semver.org/lang/fr/).
 Auteur : Dr Hamid MADANI <drmdh@msn.com>
 
+## [0.2.0] — 2026-10-08
+
+### Added
+- `panel({ labels })` : `{ fiche, actions, ajouter, creer }` fournis par l'app — « Actions » et « 📋 Fiche »
+  restaient en français dans une page anglaise ou arabe.
+- `panel({ style: 'classes' })` : aucun style en ligne, panneau enveloppé dans `.cu-panel` ; `detailLink(href, label, { style })`.
+- `CU_CSS` : feuille du mode `classes` sur les jetons de Palette Studio (`--brand`, `--link`, `--ink`, `--line`,
+  `--surface`, `--surface-alt`), avec replis ; couvre le balisage d'`@mostajs/app-shell-ui` (table, h1, .sub, .back, .act).
+- `panel({ cell })` : rendu d'une cellule délégué à l'app (transmis à `table`).
+
+### Fixed
+- Dépendances `workspace:^` remplacées par des plages publiables (`npm publish` ne les réécrit pas).
+
+### Tests
+- `test-scripts/unit/style.test.mjs` (T-STY-1 à 4).
+
 ## [0.1.0] — 2026-06-20
 
 ### Added

package/README.md

@@ -44,6 +44,11 @@ Génère : formulaire `POST /m/companies/create`, table avec lien détail `GET /
 
 > **Sécurité** : valeurs/route/labels échappés (via `app-shell-ui`). `note`/`extra`/`create.extra` = HTML brut (responsabilité de l'appelant).
 
+## Habillage et langue (0.2.0)
+`panel({ labels: { fiche, actions, ajouter, creer }, style: 'classes', cell })` : libellés fournis par l'app
+(défauts français), aucun style en ligne en mode `classes` (poser `CU_CSS`, sur les jetons de Palette Studio),
+rendu de cellule délégué.
+
 ## Tests & exemple
 
 ```bash

package/llms.txt

@@ -13,11 +13,16 @@ PRINCIPE
 COMPOSE
   @mostajs/app-shell-ui  OBLIGATOIRE (dep). Fournit table/form/pageTitle/back/esc + thème.
 
+HABILLAGE ET LANGUE (0.2.0)
+  panel({ …, labels:{fiche,actions,ajouter,creer}, style:'inline'|'classes', cell?(row,col) }) ; détails :
+  style 'classes' → aucun style en ligne, enveloppe .cu-panel ; poser CU_CSS (jetons Palette Studio) ou sa feuille.
+  Sans labels, les libellés par défaut sont FRANÇAIS : une app multilingue les fournit toujours.
+
 EXPORTS (".", "./html")
   panel({ title?, sub?, back?={href,label}, note?, rows, cols?, hidden?=['id','_status'], routeBase='',
           detail?=false|(row)=>href, actions?=[{id,label,show?(row)}], create?={fields,title?,submit?,enctype?,extra?},
           extra?, empty? }) -> htmlString   // CORPS du panneau (à enrober via app-shell-ui.page())
-  detailLink(href, label?='📋 Fiche') ; actionForm(routeBase, action, row) ; actionsCell(routeBase, actions, row)
+  detailLink(href, label?='📋 Fiche', {style}?) ; CU_CSS ; actionForm(routeBase, action, row) ; actionsCell(routeBase, actions, row)
 
 DÉTAILS
   - create.fields = format app-shell-ui `form` ({name,label,type?,value?,required?,options?,list?}) ; l'app résout les

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/crud-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Panneau CRUD générique (rendu HTML-string, zéro dépendance) : spec déclaratif + lignes → formulaire de création + table (lien détail + actions POST). Compose @mostajs/app-shell-ui. Membre de mosta-ui-html-stack.",
   "license": "AGPL-3.0-or-later",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",
@@ -16,6 +16,11 @@
     ".": "./src/html/index.js",
     "./html": "./src/html/index.js"
   },
+  "scripts": {
+    "test": "bash test-scripts/run-tests.sh",
+    "example": "node examples/run.mjs",
+    "clean": "rm -f examples/out.html test-report.html"
+  },
   "keywords": [
     "mostajs",
     "ui",
@@ -30,11 +35,14 @@
     "@mostajs/app-shell-ui": "^0.1.0"
   },
   "devDependencies": {
-    "@mostajs/mjs-unit": "^0.3.0"
+    "@mostajs/mjs-unit": "^0.7.0"
   },
-  "scripts": {
-    "test": "bash test-scripts/run-tests.sh",
-    "example": "node examples/run.mjs",
-    "clean": "rm -f examples/out.html test-report.html"
+  "mostajs": {
+    "niveau": "N2",
+    "nature": "compose",
+    "reutilisabilite": "multi-domaine",
+    "depend_de": [
+      "@mostajs/app-shell-ui"
+    ]
   }
-}
+}

package/src/html/index.js

@@ -1,2 +1,2 @@
 // @mostajs/crud-ui — barrel ./html. Author: Dr Hamid MADANI <drmdh@msn.com>
-export { panel, detailLink, actionForm, actionsCell } from './panel.js';
+export { panel, detailLink, actionForm, actionsCell, CU_CSS } from './panel.js';

package/src/html/panel.js

@@ -3,9 +3,34 @@
 // COMPOSE @mostajs/app-shell-ui (table/form/pageTitle/back/esc) — aucune primitive bas-niveau ni accès données ici.
 import { esc, table, form, pageTitle, back as backLink } from '@mostajs/app-shell-ui';
 
+/**
+ * 0.2.0 — DEUX HABILLAGES. `inline` (défaut, inchangé) : le lien porte son style. `classes` : aucun style en ligne,
+ * la page habille par les classes `cu-*` (avec `CU_CSS` ou sa propre feuille). Demande du fondateur, 08/10/2026 :
+ * un style imposé en ligne ne se surcharge qu'à coups de `!important`.
+ */
+const LIBELLES = { fiche: '📋 Fiche', actions: 'Actions', ajouter: '➕ Ajouter', creer: 'Créer' };
+
+/**
+ * La feuille du mode `classes`, sur les jetons de Palette Studio (ceux que pose @mostajs/wagon-ui), avec replis.
+ * Elle couvre aussi le balisage d'@mostajs/app-shell-ui que le panneau compose (table, h1, .sub, .back, .act).
+ */
+export const CU_CSS = `.cu-panel{--cu-accent:var(--brand,#1B3FA0);--cu-ink:var(--ink,var(--text,#16223f));--cu-line:var(--line,#e2e8f0);--cu-fond:var(--surface,#fff);--cu-doux:var(--surface-alt,#f8fafc);--cu-radius:1rem}
+.cu-panel h1{margin:.2rem 0 .3rem;color:var(--cu-ink)}
+.cu-panel .sub{margin:0 0 1rem;opacity:.7}
+.cu-panel a.back{display:inline-block;margin-bottom:.6rem;color:var(--link,var(--cu-accent));text-decoration:none;font-weight:600}
+.cu-panel table{width:100%;border-collapse:separate;border-spacing:0;background:var(--cu-fond);border:1px solid var(--cu-line);border-radius:var(--cu-radius);overflow:hidden}
+.cu-panel th{text-align:start;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;opacity:.7;background:var(--cu-doux);padding:.65rem .8rem;border-bottom:1px solid var(--cu-line)}
+.cu-panel td{padding:.65rem .8rem;border-bottom:1px solid var(--cu-line);vertical-align:middle}
+.cu-panel tr:last-child td{border-bottom:0}
+.cu-panel .cu-fiche{color:var(--link,var(--cu-accent));font-weight:600;text-decoration:none;white-space:nowrap}
+.cu-panel button.act{background:transparent;border:1px solid var(--cu-line);border-radius:999px;padding:.25rem .8rem;cursor:pointer;font:inherit}
+.cu-panel form{display:inline}`;
+
 /** Lien de détail (cellule de tête de ligne). */
-export function detailLink(href, label = '📋 Fiche') {
-  return `<a href="${esc(href)}" style="color:var(--blue);font-weight:600;text-decoration:none">${esc(label)}</a>`;
+export function detailLink(href, label = LIBELLES.fiche, { style = 'inline' } = {}) {
+  return style === 'classes'
+    ? `<a class="cu-fiche" href="${esc(href)}">${esc(label)}</a>`
+    : `<a href="${esc(href)}" style="color:var(--blue);font-weight:600;text-decoration:none">${esc(label)}</a>`;
 }
 
 /** Mini-formulaire POST pour une action de ligne → `${routeBase}/act/${action.id}`. */
@@ -24,20 +49,22 @@ export function actionsCell(routeBase, actions, row) {
  */
 export function panel({
   title, sub = '', back, note = '', rows = [], cols, hidden = ['id', '_status'],
-  routeBase = '', detail = false, actions, create, extra = '', empty,
+  routeBase = '', detail = false, actions, create, extra = '', empty, cell,
+  labels = {}, style = 'inline',
 } = {}) {
+  const L = { ...LIBELLES, ...labels };
   const parts = [];
   if (back) parts.push(backLink(back.href, back.label));
   if (title) parts.push(pageTitle(title, sub));
   if (note) parts.push(note);
   if (create) parts.push(form(create.fields, {
     action: `${routeBase}/create`, method: 'post',
-    title: create.title || '➕ Ajouter', submit: create.submit || 'Créer',
+    title: create.title || L.ajouter, submit: create.submit || L.creer,
     enctype: create.enctype, extra: create.extra,
   }));
-  const lead = detail ? (r) => detailLink(typeof detail === 'function' ? detail(r) : `${routeBase}/${r.id}`) : undefined;
-  const trail = actions ? { header: 'Actions', render: (r) => actionsCell(routeBase, actions, r) } : undefined;
-  parts.push(table(rows, { cols, hidden, lead, trail, empty }));
+  const lead = detail ? (r) => detailLink(typeof detail === 'function' ? detail(r) : `${routeBase}/${r.id}`, L.fiche, { style }) : undefined;
+  const trail = actions ? { header: L.actions, render: (r) => actionsCell(routeBase, actions, r) } : undefined;
+  parts.push(table(rows, { cols, hidden, lead, trail, empty, cell }));
   if (extra) parts.push(extra);
-  return parts.join('\n');
+  return style === 'classes' ? `<div class="cu-panel">${parts.join('\n')}</div>` : parts.join('\n');
 }