@mostajs/pdf-sign-ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog — @mostajs/pdf-sign-ui
+
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com>
+
+Le format suit [Keep a Changelog](https://keepachangelog.com/fr/) ; versionnage [SemVer](https://semver.org/lang/fr/).
+
+## [0.1.0] — 2026-07-01
+
+### Ajouté
+
+- Logique **headless** de la couche de présentation de `@mostajs/pdf-sign` : `validateSignForm`, `buildSignRequest`, `buildEngineViewModel`, `buildVerifyViewModel`, `createPdfSignUiController`.
+- Préréglages de documents officiels (générique, cadré SIH) : `DOCUMENT_PRESETS`, `listPresets`, `getPreset` — clinique / administratif / financier CNAS-CASNOS.
+- Contrôleur orchestrant un `service` injecté (moteur in-process ou handlers).
+- Composants **React** (`@mostajs/pdf-sign-ui/react`, peer `react` optionnelle) : `<EngineBadge>`, `<SignForm>` (préréglage + métadonnées + permissions + cachet image), `<VerifyPanel>` (tableau des signatures). En `React.createElement` (sans JSX à transpiler).
+- Passthrough `field.stampImage` dans `buildSignRequest` (cachet visible image).
+- Tests `@mostajs/mjs-unit` (headless + rendu SSR React) et exemple `examples/verify-viewmodel.mjs`.

package/README.md

@@ -0,0 +1,92 @@
+# @mostajs/pdf-sign-ui
+
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com>
+**Licence** : AGPL-3.0-or-later
+
+Couche de **présentation** de [`@mostajs/pdf-sign`](../mosta-pdf-sign). Logique **headless** (framework-agnostique, zéro dépendance, testable sans navigateur) : validation du formulaire de signature, préréglages de documents officiels, view-models d'état moteur et de vérification, contrôleur orchestrant le moteur.
+
+Le module ne signe pas lui-même : il pilote `@mostajs/pdf-sign` via un **`service` injecté** (in-process ou handlers HTTP).
+
+## Cadrage SIH (générique, surchargeable)
+
+Des préréglages couvrent les documents à valeur probante d'un SIH — tout en restant génériques :
+
+- **clinique** : `crh`, `cro`, `imagerie`, `biologie`
+- **administratif** : `ordonnance`, `certificat_sejour`, `dossier_sortie`
+- **financier / CNAS-CASNOS** : `facture`, `bordereau`, `prise_en_charge`
+
+Chaque préréglage propose un motif (`reason`) et une recommandation `restrict` (permissions AES-256, moteur pyhanko). L'appelant peut tout surcharger.
+
+## API
+
+```js
+import {
+  validateSignForm, buildSignRequest, buildVerifyViewModel,
+  buildEngineViewModel, createPdfSignUiController, listPresets,
+} from "@mostajs/pdf-sign-ui";
+import * as engine from "@mostajs/pdf-sign"; // service in-process
+
+const ctl = createPdfSignUiController({ service: engine, t: monI18n });
+
+// Bandeau moteur
+console.log(ctl.engines.label, ctl.engines.canRestrict);
+
+// Soumission d'un formulaire (validation intégrée)
+const res = await ctl.submit({
+  input: "crh.pdf", output: "crh.signe.pdf",
+  p12: "praticien.p12", passphrase: process.env.P12_PASS,
+  preset: "crh",           // motif + permissions par défaut
+  name: "Dr H. Madani", location: "Alger, DZ",
+});
+if (!res.ok) console.error(res.errors); else console.log(res.result);
+
+// Vérification (view-model prêt pour un tableau)
+console.log(ctl.verify("crh.signe.pdf", { trustPem: "ac-racine.pem" }));
+```
+
+### Fonctions pures (sans contrôleur)
+
+```js
+const { valid, errors } = validateSignForm(formData, { engines: { node: true, pyhanko: true } });
+const signOptions = buildSignRequest(formData);        // → SignOptions de @mostajs/pdf-sign
+const vm = buildVerifyViewModel(verifyResult);          // → { signed, status, rows[] }
+const badge = buildEngineViewModel(detectEnginesResult);
+```
+
+## Contrat du `service`
+
+`createPdfSignUiController` exige un objet exposant :
+
+| Méthode | Signature | Origine |
+|---|---|---|
+| `signPdf(opts)` | `Promise<SignResult>` | `@mostajs/pdf-sign` |
+| `verifyPdf(opts)` | `VerifyResult` | `@mostajs/pdf-sign` |
+| `detectEngines()` | `EngineAvailability` | `@mostajs/pdf-sign` |
+
+En architecture web, ces méthodes peuvent être des appels à des handlers serveur (le moteur — Node + Python — reste côté serveur).
+
+## Composants React (`@mostajs/pdf-sign-ui/react`)
+
+Peer optionnelle `react >=18`. Composants en `React.createElement` (aucune syntaxe JSX ; un bundler résout les `.jsx`), pilotés par la logique headless.
+
+| Composant | Rôle |
+|---|---|
+| `<EngineBadge availability|engines t />` | bandeau d'état du moteur (PAdES / permissions disponibles) |
+| `<SignForm service t presets initialData onSigned />` | formulaire de signature : préréglage de document, certificat, métadonnées, moteur, permissions, cachet image ; validation intégrée |
+| `<VerifyPanel service t input trustPem auto />` | vérification d'un PDF + tableau des signatures (intègre / valide / confiance / signataire) |
+
+```jsx
+import { SignForm, VerifyPanel, EngineBadge } from "@mostajs/pdf-sign-ui/react";
+
+<SignForm service={engine} t={t} onSigned={(r) => console.log(r)} />
+<VerifyPanel service={engine} t={t} trustPem="ac-racine.pem" />
+```
+
+Le `service` est le même contrat que le contrôleur (`signPdf`/`verifyPdf`/`detectEngines`). En web, ce sont typiquement des appels aux handlers serveur (le moteur Node + Python reste côté serveur).
+
+## Tests
+
+```bash
+npm test         # logique headless (@mostajs/mjs-unit)
+npm run test:react  # rendu SSR des composants (react + react-dom requis)
+```

package/llms.txt

@@ -0,0 +1,43 @@
+# @mostajs/pdf-sign-ui — fiche LLM
+> Couche de PRÉSENTATION de @mostajs/pdf-sign : logique HEADLESS (validation du formulaire de signature, préréglages de documents officiels/SIH, view-models moteur & vérification, contrôleur orchestrant un `service` injecté). Framework-agnostique, zéro dépendance, testable sans navigateur. IMPLÉMENTÉ 0.1.0.
+
+- Version: 0.1.0 · Licence: AGPL-3.0-or-later · Auteur: Dr Hamid MADANI <drmdh@msn.com>
+- Chemin: mostajs/mosta-pdf-sign-stack/mosta-pdf-sign-ui · Moteur: ../mosta-pdf-sign
+
+## RÔLE
+Présentation UNIQUEMENT. Ne signe pas : orchestre @mostajs/pdf-sign via un `service` injecté
+(in-process ou handlers). Générique ; le cadrage SIH est apporté par des préréglages surchargables.
+
+## EXPORTS ("@mostajs/pdf-sign-ui")
+- validateSignForm(data,{engines,t}) -> {valid,errors}   — input/p12/passphrase requis ; permissions ⇒ pyhanko
+- buildSignRequest(data) -> SignOptions   — applique préréglage (reason+restrict), surchargé par la saisie, élague les vides
+- buildEngineViewModel(availability,{t}) -> {node,pyhanko,canRestrict,canPades,label,hint}
+- buildVerifyViewModel(verifyResult,{t}) -> {signed,engine,status,rows[{field,intact,valid,trusted,signer,status}]}
+- createPdfSignUiController({service,t}) -> { availability, engines, submit(form), verify(input,opts) }
+- DOCUMENT_PRESETS / listPresets() / getPreset(key)
+
+## PRÉRÉGLAGES (générique, cadré SIH — surchargables)
+clinique: crh, cro, imagerie, biologie · administratif: ordonnance, certificat_sejour, dossier_sortie
+financier/CNAS-CASNOS: facture, bordereau, prise_en_charge. Chaque preset = { reason, restrict }.
+restrict:true ⇒ moteur pyhanko requis (permissions AES-256).
+
+## CONTRÔLEUR
+createPdfSignUiController EXIGE `service` = { signPdf, verifyPdf, detectEngines } (sinon throw).
+submit(form) : valide → buildSignRequest → service.signPdf ; renvoie {ok,errors?|result?}.
+verify(input) : service.verifyPdf → buildVerifyViewModel.
+
+## DÉPEND DE
+- @mostajs/pdf-sign (peer OPTIONNELLE) — pour les types et le service in-process. La logique headless
+  tourne sans lui (service simulé / handlers).
+
+## EXPORTS REACT ("@mostajs/pdf-sign-ui/react" — peer react optionnelle)
+- <EngineBadge availability|engines t />   — bandeau capacités moteur
+- <SignForm service t presets initialData onSigned />   — formulaire (preset+meta+permissions+cachet image), validation intégrée
+- <VerifyPanel service t input trustPem auto />   — vérif + tableau des signatures
+Composants en React.createElement (pas de JSX à transpiler ; bundler pour les .jsx). SSR-testés (5 tests).
+
+## PIÈGES
+- Le cœur Node ne gère pas les permissions : validateSignForm rejette permissions+engine:node.
+- box = [x1,y1,x2,y2] nombres finis ; sinon rejet. t (i18n) optionnel → identité.
+- Composants React sans build JSX (React.createElement) : Node natif ne charge pas .jsx → test via loader (test:react) ; en prod un bundler résout .jsx.
+- field.stampImage propagé par buildSignRequest (cachet image, moteur pyhanko).

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@mostajs/pdf-sign-ui",
+  "version": "0.1.0",
+  "description": "Couche de présentation de @mostajs/pdf-sign — logique headless (validation du formulaire de signature, préréglages de documents officiels/SIH, view-models de vérification, contrôleur). Framework-agnostique, zéro dépendance.",
+  "license": "AGPL-3.0-or-later",
+  "author": "Dr Hamid MADANI <drmdh@msn.com>",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./react": "./src/react/index.js"
+  },
+  "files": ["src", "README.md", "llms.txt", "CHANGELOG.md"],
+  "scripts": {
+    "test": "node test-scripts/headless.test.mjs",
+    "test:react": "node --experimental-loader ./test-scripts/jsx-loader.mjs test-scripts/react.test.mjs",
+    "example": "node examples/verify-viewmodel.mjs"
+  },
+  "peerDependencies": {
+    "@mostajs/pdf-sign": "^0.1.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@mostajs/pdf-sign": { "optional": true },
+    "react": { "optional": true }
+  },
+  "keywords": ["mostajs", "pdf", "signature", "ui", "headless", "sih", "pades"]
+}

package/src/headless.js

@@ -0,0 +1,195 @@
+// @mostajs/pdf-sign-ui — logique headless (framework-agnostique, zéro dépendance).
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// Couche de PRÉSENTATION de @mostajs/pdf-sign : valide un formulaire de signature,
+// construit les SignOptions, expose des view-models de vérification, orchestre via un
+// `service` injecté (in-process @mostajs/pdf-sign ou handlers HTTP). Ne signe pas elle-même.
+
+import { getPreset } from "./presets.js";
+
+/** Identité par défaut si aucune fonction de traduction n'est fournie. */
+const IDENTITY = (s) => s;
+
+/**
+ * Valide le formulaire de signature.
+ * @param {object} data  { input, p12, passphrase, passphraseFile, engine, box, page, permissions, preset }
+ * @param {object} [opts] { engines?: {node,pyhanko}, t?: (k)=>string }
+ * @returns {{ valid: boolean, errors: Record<string,string> }}
+ */
+export function validateSignForm(data = {}, opts = {}) {
+  const t = opts.t || IDENTITY;
+  const engines = opts.engines || { node: true, pyhanko: false };
+  const errors = {};
+
+  if (!data.input) errors.input = t("Le PDF à signer est requis.");
+  if (!data.p12) errors.p12 = t("Le certificat PKCS#12 est requis.");
+  if (!data.passphrase && !data.passphraseFile) {
+    errors.passphrase = t("La phrase secrète (ou son fichier) est requise.");
+  }
+
+  const engine = data.engine || "auto";
+  if (!["auto", "node", "pyhanko"].includes(engine)) {
+    errors.engine = t("Moteur inconnu (auto | node | pyhanko).");
+  }
+
+  const wantsPerms = data.permissions === true || (data.permissions && typeof data.permissions === "object");
+  if (wantsPerms) {
+    if (engine === "node") errors.permissions = t("Le cœur Node ne gère pas les permissions — choisir pyhanko.");
+    else if (!engines.pyhanko) errors.permissions = t("Permissions restrictives indisponibles : moteur pyhanko requis.");
+  }
+  if (engine === "pyhanko" && !engines.pyhanko) {
+    errors.engine = t("Moteur pyhanko indisponible sur ce serveur.");
+  }
+
+  if (data.box != null && !isBox(data.box)) {
+    errors.box = t("Boîte du cachet invalide : attendu [x1, y1, x2, y2] en points.");
+  }
+  if (data.page != null && (!Number.isInteger(Number(data.page)) || Number(data.page) < 0)) {
+    errors.page = t("Numéro de page invalide (entier ≥ 0).");
+  }
+
+  return { valid: Object.keys(errors).length === 0, errors };
+}
+
+function isBox(b) {
+  return Array.isArray(b) && b.length === 4 && b.every((n) => typeof n === "number" && Number.isFinite(n));
+}
+
+/**
+ * Construit les SignOptions (@mostajs/pdf-sign) à partir des données du formulaire.
+ * Applique le préréglage de document choisi (motif + permissions), surchargé par les champs saisis.
+ * @param {object} data
+ * @returns {import("@mostajs/pdf-sign").SignOptions}
+ */
+export function buildSignRequest(data = {}) {
+  const preset = data.preset ? getPreset(data.preset) : undefined;
+  const reason = data.reason || preset?.reason;
+
+  // permissions : objet explicite > drapeau restrict > préréglage
+  let permissions;
+  if (data.permissions && typeof data.permissions === "object") permissions = data.permissions;
+  else if (data.permissions === true || data.restrict === true) permissions = {};
+  else if (data.permissions === false || data.restrict === false) permissions = undefined;
+  else if (preset?.restrict) permissions = {};
+
+  /** @type {any} */
+  const req = {
+    input: data.input,
+    output: data.output,
+    p12: data.p12,
+    passphrase: data.passphrase,
+    passphraseFile: data.passphraseFile,
+    engine: data.engine || "auto",
+    meta: prune({
+      reason,
+      name: data.name,
+      location: data.location,
+      contact: data.contact,
+    }),
+    field: prune({ page: numOrUndef(data.page), box: isBox(data.box) ? data.box : undefined, stampImage: data.stampImage }),
+    permissions,
+  };
+  return prune(req);
+}
+
+function prune(obj) {
+  const out = {};
+  for (const [k, v] of Object.entries(obj)) if (v !== undefined) out[k] = v;
+  return out;
+}
+function numOrUndef(v) {
+  return v == null || v === "" ? undefined : Number(v);
+}
+
+/**
+ * View-model de l'état des moteurs (pour un bandeau/badge d'UI).
+ * @param {{ node: boolean, pyhanko: boolean, python?: string }} availability
+ * @param {object} [opts] { t }
+ */
+export function buildEngineViewModel(availability = { node: true, pyhanko: false }, opts = {}) {
+  const t = opts.t || IDENTITY;
+  const pyhanko = !!availability.pyhanko;
+  return {
+    node: !!availability.node,
+    pyhanko,
+    canRestrict: pyhanko,
+    canPades: pyhanko,
+    label: pyhanko ? t("PAdES + permissions (pyhanko)") : t("PKCS#7 (Node)"),
+    hint: pyhanko
+      ? t("Signature avancée et permissions restrictives disponibles.")
+      : t("Moteur pyhanko absent : signature simple uniquement (lancer setup-venv.sh pour PAdES)."),
+  };
+}
+
+/**
+ * View-model d'un résultat de vérification (lignes prêtes à afficher).
+ * @param {import("@mostajs/pdf-sign").VerifyResult} result
+ * @param {object} [opts] { t }
+ */
+export function buildVerifyViewModel(result, opts = {}) {
+  const t = opts.t || IDENTITY;
+  if (!result || !result.signed) {
+    return { signed: false, engine: result?.engine, status: t("Non signé"), rows: [] };
+  }
+  const rows = (result.signatures || []).map((s, i) => ({
+    field: s.field || `Signature${i + 1}`,
+    intact: s.intact,
+    valid: s.valid,
+    trusted: s.trusted,
+    signer: s.signer,
+    status: statusLabel(s, t),
+  }));
+  const allValid = rows.length > 0 && rows.every((r) => r.valid !== false && r.intact !== false);
+  return {
+    signed: true,
+    engine: result.engine,
+    status: allValid ? t("Signature(s) valide(s)") : t("Signature(s) à vérifier"),
+    rows,
+  };
+}
+
+function statusLabel(s, t) {
+  if (s.valid === false || s.intact === false) return t("Invalide");
+  if (s.trusted) return t("Valide et de confiance");
+  if (s.valid || s.intact) return t("Valide (confiance non établie)");
+  return t("Présente (non validée)");
+}
+
+/**
+ * Contrôleur UI : orchestre validation → signature → vérification via un `service` injecté.
+ * `service` doit exposer { signPdf, verifyPdf, detectEngines } (in-process @mostajs/pdf-sign
+ * ou handlers). EXIGE `service` (sinon throw), à l'image de createUsersUiController.
+ * @param {object} cfg { service, t? }
+ */
+export function createPdfSignUiController(cfg = {}) {
+  const { service, t = IDENTITY } = cfg;
+  if (!service || typeof service.signPdf !== "function") {
+    throw new Error("createPdfSignUiController : `service` avec signPdf/verifyPdf/detectEngines requis.");
+  }
+
+  const availability = typeof service.detectEngines === "function"
+    ? service.detectEngines()
+    : { node: true, pyhanko: false };
+
+  return {
+    availability,
+    engines: buildEngineViewModel(availability, { t }),
+
+    /** Valide puis signe. Renvoie { ok, errors?, result? }. */
+    async submit(formData) {
+      const { valid, errors } = validateSignForm(formData, { engines: availability, t });
+      if (!valid) return { ok: false, errors };
+      const result = await service.signPdf(buildSignRequest(formData));
+      return { ok: true, result };
+    },
+
+    /** Vérifie un PDF et renvoie un view-model d'affichage. */
+    verify(input, verifyOpts = {}) {
+      if (typeof service.verifyPdf !== "function") {
+        throw new Error("Le service ne fournit pas verifyPdf.");
+      }
+      const raw = service.verifyPdf({ input, ...verifyOpts });
+      return buildVerifyViewModel(raw, { t });
+    },
+  };
+}

package/src/index.js

@@ -0,0 +1,10 @@
+// @mostajs/pdf-sign-ui — point d'entrée (logique headless, framework-agnostique).
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+export {
+  validateSignForm,
+  buildSignRequest,
+  buildEngineViewModel,
+  buildVerifyViewModel,
+  createPdfSignUiController,
+} from "./headless.js";
+export { DOCUMENT_PRESETS, listPresets, getPreset } from "./presets.js";

package/src/presets.js

@@ -0,0 +1,35 @@
+// @mostajs/pdf-sign-ui — préréglages de documents officiels (générique, cadré SIH).
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// Chaque préréglage propose un `reason` (motif du cachet) et `restrict` (permissions
+// AES-256 recommandées). GÉNÉRIQUE : purement indicatif, l'appelant peut tout surcharger.
+// Les préréglages `restrict:true` exigent le moteur pyhanko.
+
+/** @typedef {{ key: string, label: string, category: string, reason: string, restrict: boolean }} DocumentPreset */
+
+/** @type {Record<string, DocumentPreset>} */
+export const DOCUMENT_PRESETS = {
+  // — Clinique —
+  crh: { key: "crh", label: "Compte rendu d'hospitalisation (CRH)", category: "clinique", reason: "Compte rendu d'hospitalisation", restrict: true },
+  cro: { key: "cro", label: "Compte rendu opératoire (CRO)", category: "clinique", reason: "Compte rendu opératoire", restrict: true },
+  imagerie: { key: "imagerie", label: "Compte rendu d'imagerie", category: "clinique", reason: "Compte rendu d'imagerie", restrict: true },
+  biologie: { key: "biologie", label: "Compte rendu de biologie", category: "clinique", reason: "Compte rendu de biologie", restrict: true },
+  // — Administratif —
+  ordonnance: { key: "ordonnance", label: "Ordonnance", category: "administratif", reason: "Ordonnance médicale", restrict: true },
+  certificat_sejour: { key: "certificat_sejour", label: "Certificat de séjour", category: "administratif", reason: "Certificat de séjour", restrict: true },
+  dossier_sortie: { key: "dossier_sortie", label: "Dossier de sortie", category: "administratif", reason: "Dossier de sortie", restrict: false },
+  // — Financier / CNAS-CASNOS —
+  facture: { key: "facture", label: "Facture (CNAS/CASNOS)", category: "financier", reason: "Facture — valeur probante", restrict: true },
+  bordereau: { key: "bordereau", label: "Bordereau de remboursement", category: "financier", reason: "Bordereau de remboursement", restrict: true },
+  prise_en_charge: { key: "prise_en_charge", label: "Prise en charge", category: "financier", reason: "Prise en charge", restrict: true },
+};
+
+/** Liste ordonnée des préréglages (pour peupler un menu déroulant). */
+export function listPresets() {
+  return Object.values(DOCUMENT_PRESETS);
+}
+
+/** Renvoie le préréglage pour une clé, ou `undefined`. */
+export function getPreset(key) {
+  return DOCUMENT_PRESETS[key];
+}

package/src/react/EngineBadge.jsx

@@ -0,0 +1,23 @@
+// @mostajs/pdf-sign-ui/react — <EngineBadge> : bandeau d'état des moteurs.
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+import React from 'react';
+import { buildEngineViewModel } from '../headless.js';
+
+/**
+ * Affiche le moteur actif et ses capacités (PAdES / permissions).
+ * @param {{ availability?: {node,pyhanko,python?}, engines?: object, t?: (k)=>string }} props
+ *   Fournir `availability` (sortie de detectEngines) OU `engines` (déjà construit, ex. controller.engines).
+ */
+export function EngineBadge({ availability, engines, t = (k) => k }) {
+  const vm = engines || buildEngineViewModel(availability || { node: true, pyhanko: false }, { t });
+  const cls = vm.pyhanko ? 'ok' : 'warn';
+  return React.createElement('div', { className: `mosta-pdf-sign-engine ${cls}`, role: 'status' },
+    React.createElement('strong', null, vm.label),
+    React.createElement('span', { className: 'mosta-pdf-sign-engine-hint' }, vm.hint),
+    React.createElement('ul', { className: 'mosta-pdf-sign-engine-caps' },
+      React.createElement('li', null, `${t('Signature avancée (PAdES)')} : ${vm.canPades ? '✓' : '—'}`),
+      React.createElement('li', null, `${t('Permissions AES-256')} : ${vm.canRestrict ? '✓' : '—'}`),
+    ),
+  );
+}
+export default EngineBadge;

package/src/react/SignForm.jsx

@@ -0,0 +1,113 @@
+// @mostajs/pdf-sign-ui/react — <SignForm> : formulaire de signature (wrapper headless).
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// Piloté par createPdfSignUiController : validation intégrée, préréglages de documents,
+// bascule permissions/moteur selon les capacités serveur. Le `service` (in-process ou
+// handlers) porte signPdf/verifyPdf/detectEngines.
+import React from 'react';
+import { createPdfSignUiController, validateSignForm } from '../headless.js';
+import { listPresets } from '../presets.js';
+import { EngineBadge } from './EngineBadge.jsx';
+
+const h = React.createElement;
+
+export function SignForm({ service, t = (k) => k, presets = listPresets(), initialData = {}, onSigned }) {
+  const controller = React.useMemo(() => createPdfSignUiController({ service, t }), [service]);
+  const engines = controller.engines;
+
+  const [form, setForm] = React.useState({
+    input: '', output: '', p12: '', passphrase: '', preset: '',
+    name: '', location: '', contact: '', reason: '',
+    engine: 'auto', restrict: false, stampImage: '', page: '', box: '',
+    ...initialData,
+  });
+  const [errors, setErrors] = React.useState({});
+  const [busy, setBusy] = React.useState(false);
+
+  const set = (k) => (e) => {
+    const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
+    setForm((f) => ({ ...f, [k]: v }));
+  };
+
+  const buildPayload = (f) => ({
+    ...f,
+    page: f.page === '' ? undefined : Number(f.page),
+    box: parseBox(f.box),
+    permissions: f.restrict ? {} : undefined,
+  });
+
+  const submit = async (e) => {
+    e.preventDefault();
+    const payload = buildPayload(form);
+    const v = validateSignForm(payload, { engines, t });
+    if (!v.valid) { setErrors(v.errors); return; }
+    setErrors({});
+    setBusy(true);
+    try {
+      const res = await controller.submit(payload);
+      if (!res.ok) { setErrors(res.errors); return; }
+      onSigned?.(res.result);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const field = (key, label, opts = {}) => h('label', { className: 'mosta-pdf-sign-field' },
+    h('span', null, t(label)),
+    h('input', { type: opts.type || 'text', value: form[key] ?? '', onChange: set(key), placeholder: opts.placeholder }),
+    errors[key] && h('span', { className: 'err' }, errors[key]),
+  );
+
+  return h('form', { onSubmit: submit, className: 'mosta-pdf-sign-form' },
+    h(EngineBadge, { engines, t }),
+
+    // Document (préréglage) — motif + permissions par défaut
+    h('label', { className: 'mosta-pdf-sign-field' },
+      h('span', null, t('Type de document')),
+      h('select', { value: form.preset, onChange: set('preset') },
+        h('option', { value: '' }, t('— libre —')),
+        presets.map((p) => h('option', { key: p.key, value: p.key }, p.label)),
+      ),
+    ),
+
+    field('input', 'PDF à signer', { placeholder: 'document.pdf' }),
+    field('output', 'PDF de sortie (optionnel)', { placeholder: 'document.signe.pdf' }),
+    field('p12', 'Certificat PKCS#12', { placeholder: 'cert.p12' }),
+    field('passphrase', 'Phrase secrète', { type: 'password' }),
+
+    field('reason', 'Motif (sinon celui du document)'),
+    field('name', 'Signataire'),
+    field('location', 'Lieu'),
+
+    // Moteur + permissions
+    h('label', { className: 'mosta-pdf-sign-field' },
+      h('span', null, t('Moteur')),
+      h('select', { value: form.engine, onChange: set('engine') },
+        h('option', { value: 'auto' }, t('auto')),
+        h('option', { value: 'node' }, t('node (PKCS#7)')),
+        h('option', { value: 'pyhanko', disabled: !engines.pyhanko }, t('pyhanko (PAdES)')),
+      ),
+    ),
+    h('label', { className: 'mosta-pdf-sign-check' },
+      h('input', { type: 'checkbox', checked: !!form.restrict, disabled: !engines.canRestrict, onChange: set('restrict') }),
+      h('span', null, t('Permissions restrictives (chiffrement AES-256)')),
+    ),
+    errors.permissions && h('span', { className: 'err' }, errors.permissions),
+
+    // Cachet visible
+    field('stampImage', 'Image du cachet (logo, optionnel)', { placeholder: 'logo.png' }),
+    field('box', 'Boîte du cachet x1,y1,x2,y2 (optionnel)', { placeholder: '320,40,575,140' }),
+    field('page', 'Page du cachet (0 = page 1)', { placeholder: '0' }),
+    errors.box && h('span', { className: 'err' }, errors.box),
+
+    h('button', { type: 'submit', disabled: busy }, busy ? t('Signature…') : t('Signer')),
+  );
+}
+
+function parseBox(s) {
+  if (!s || typeof s !== 'string') return undefined;
+  const n = s.split(',').map((x) => Number(x.trim()));
+  return n.length === 4 && n.every((v) => Number.isFinite(v)) ? n : undefined;
+}
+
+export default SignForm;

package/src/react/VerifyPanel.jsx

@@ -0,0 +1,60 @@
+// @mostajs/pdf-sign-ui/react — <VerifyPanel> : vérification et affichage des signatures.
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+import React from 'react';
+import { createPdfSignUiController } from '../headless.js';
+
+const h = React.createElement;
+
+/**
+ * Vérifie un PDF et affiche le view-model (statut + tableau des signatures).
+ * @param {{ service, t?, input?, trustPem?, auto?: boolean }} props
+ *   `auto` : vérifie automatiquement à l'affichage/à chaque changement d'`input`.
+ */
+export function VerifyPanel({ service, t = (k) => k, input = '', trustPem, auto = false }) {
+  const controller = React.useMemo(() => createPdfSignUiController({ service, t }), [service]);
+  const [path, setPath] = React.useState(input);
+  const [vm, setVm] = React.useState(null);
+  const [error, setError] = React.useState(null);
+
+  const run = React.useCallback((p) => {
+    const target = p ?? path;
+    if (!target) { setError(t('Indiquer un PDF à vérifier.')); return; }
+    setError(null);
+    try {
+      setVm(controller.verify(target, trustPem ? { trustPem } : {}));
+    } catch (e) {
+      setError(e?.message || String(e));
+      setVm(null);
+    }
+  }, [controller, path, trustPem, t]);
+
+  React.useEffect(() => { if (auto && input) run(input); }, [auto, input, run]);
+
+  const badge = (v) => v === true ? '✓' : v === false ? '✗' : '—';
+
+  return h('div', { className: 'mosta-pdf-sign-verify' },
+    h('div', { className: 'mosta-pdf-sign-verify-bar' },
+      h('input', { value: path, onChange: (e) => setPath(e.target.value), placeholder: t('document.signe.pdf') }),
+      h('button', { type: 'button', onClick: () => run() }, t('Vérifier')),
+    ),
+    error && h('p', { className: 'err' }, error),
+    vm && h('div', { className: `mosta-pdf-sign-verify-result ${vm.signed ? 'signed' : 'unsigned'}` },
+      h('p', { className: 'status' }, `${vm.status}${vm.engine ? ` · ${vm.engine}` : ''}`),
+      vm.rows.length > 0 && h('table', { className: 'mosta-pdf-sign-verify-table' },
+        h('thead', null, h('tr', null,
+          h('th', null, t('Champ')), h('th', null, t('Intègre')), h('th', null, t('Valide')),
+          h('th', null, t('Confiance')), h('th', null, t('Signataire')), h('th', null, t('Statut')),
+        )),
+        h('tbody', null, vm.rows.map((r, i) => h('tr', { key: r.field || i },
+          h('td', null, r.field),
+          h('td', null, badge(r.intact)),
+          h('td', null, badge(r.valid)),
+          h('td', null, badge(r.trusted)),
+          h('td', { className: 'signer' }, r.signer || '—'),
+          h('td', null, r.status),
+        ))),
+      ),
+    ),
+  );
+}
+export default VerifyPanel;

package/src/react/index.js

@@ -0,0 +1,5 @@
+// @mostajs/pdf-sign-ui/react — composants React (peer: react, @mostajs/pdf-sign)
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+export { EngineBadge } from './EngineBadge.jsx';
+export { SignForm } from './SignForm.jsx';
+export { VerifyPanel } from './VerifyPanel.jsx';