@scalio-cloud/ui 0.28.0 → 0.29.0

package/README.md

@@ -325,6 +325,30 @@ const reset = factoryResetApi(api);   // once, outside the component
 `SettingsField` (label, field, help) and `SettingsRow` (title and help left, a switch or button right; `tone="danger"`)
 keep the fields inside a `SettingsSection` the same in every app.
 
+## Benachrichtigungen: E-Mail-Versand und E-Mail-Vorlagen (React)
+
+Since 0.29.0 (ADR 0069 W5) every app sends mail the same way. The server side is scalio-platform 0.8.0 `mail`
+(`Mailer.router`, mounted at `/api/mail`). Both blocks go into the settings group «Benachrichtigungen».
+
+```jsx
+import { MailTransport, MailTemplates, mailApi } from "@scalio-cloud/ui/react";
+import { RichTextEditor } from "@/components/RichTextEditor";   // optional, the app's own editor (Compass: react-quill-new)
+
+const mail = mailApi(api);   // once, outside the component; mailApi(api, "/admin/mail") for another prefix
+<MailTransport client={mail} lang={lang} notify={toast} graphHint={t("...Mail.Send and Mail.ReadWrite...")}>
+  <InboxSettings />           {/* optional blocks after «Testmail» */}
+</MailTransport>
+<MailTemplates client={mail} lang={lang} editor={RichTextEditor} />
+```
+
+`MailTransport` shows three blocks: «E-Mail-Versand» (off, SMTP or Microsoft 365, sender, language; secrets come back
+as a mask and the mask is sent back unchanged), «Testmail» (empty recipient: to me) and «Letzte Mails» (`outbox={false}`
+hides it). On a test instance the backend answers `test_mailbox: true` and the server fields are locked.
+`MailTemplates` picks mail and language, offers the placeholders as buttons, shows the preview of the real rendering
+in a sandboxed frame, and saves, tests («Test an mich») or resets to the built-in text. A switchable mail gets the
+checkbox «Diese Mail senden». The `editor` gets `{value, onChange, testId}`; without it a text field is used, so this
+package keeps no dependencies. With an editor, plain built-in texts are passed as paragraphs (`textToHtml`).
+
 ## Protokoll: Aktionen und Jobs (React)
 
 One menu item «Protokoll» with two tabs like Nexus (scalio-docs ADR 0070). The server side is scalio-platform

package/nav.css

@@ -745,3 +745,35 @@
 .scalio-jobs-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
 .scalio-jobs-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
 .scalio-jobs-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+
+/* E-Mail-Versand and E-Mail-Vorlagen (ADR 0069 W5, react/mail.js) */
+.scalio-mail-providers { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; border: 0; }
+.scalio-mail-providers legend { width: 100%; margin-bottom: 0.5rem; }
+.scalio-mail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
+.scalio-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.scalio-mail-test { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
+.scalio-mail-test .scalio-input { flex: 1 1 15rem; width: auto; }
+.scalio-mail-outbox { overflow-x: auto; }
+.scalio-mail-outbox table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
+.scalio-mail-outbox td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
+.scalio-mail-outbox tr:last-child td { border-bottom: 0; }
+.scalio-mail-time { white-space: nowrap; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-mail-state { text-align: right; padding-right: 0 !important; }
+.scalio-settings-help.is-error { color: hsl(var(--destructive)); }
+.scalio-mail-tokens { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
+.scalio-mail-token {
+  padding: 0.125rem 0.5rem; border: 1px solid hsl(var(--primary) / 0.25); border-radius: 2px; background: hsl(var(--primary) / 0.06);
+  color: hsl(var(--primary)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; cursor: pointer;
+}
+.scalio-mail-token:hover { background: hsl(var(--primary) / 0.12); }
+.scalio-mail-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: -0.5rem; }
+.scalio-mail-editor { display: grid; grid-template-columns: 1fr; gap: 1rem; }
+.scalio-mail-editor.has-preview { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
+.scalio-mail-editor-pane { min-width: 0; }
+.scalio-mail-body { width: 100%; min-height: 20rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
+.scalio-mail-preview { display: flex; flex-direction: column; min-height: 20rem; border: 1px solid hsl(var(--border)); border-radius: 2px; overflow: hidden; }
+.scalio-mail-preview-head { display: flex; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-mail-preview-head strong { text-transform: uppercase; letter-spacing: 0.05em; }
+.scalio-mail-preview-subject { padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.875rem; }
+.scalio-mail-preview-subject span { font-weight: 600; }
+.scalio-mail-preview iframe { flex: 1; width: 100%; min-height: 16rem; border: 0; background: #fff; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,
@@ -67,8 +67,8 @@
     "node": ">=18"
   },
   "devDependencies": {
-    "jsdom": "25.0.1",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "jsdom": "30.1.3",
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
   }
 }

package/react/index.js

@@ -378,6 +378,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/mail.js

@@ -0,0 +1,473 @@
+"use strict";
+// Einstellungen -> Benachrichtigungen (ADR 0069 wartung/W5, Welle 2): «E-Mail-Versand» (MailTransport) and
+// «E-Mail-Vorlagen» (MailTemplates), the same in every app. Backend: scalio-platform `mail` (Mailer.router, /api/mail).
+// The rich text editor comes from the app (prop editor, e.g. react-quill-new like Compass); without it a text field.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { SettingsSection, SettingsField: Field } = require("./settings");
+
+const LABELS = {
+  de: {
+    transportTitle: "E-Mail-Versand",
+    transportHint: "Über welchen Server die App Mails schickt. Passwort und Client-Secret werden verschlüsselt gespeichert und nie angezeigt.",
+    provider: "Mails senden mit",
+    providers: { off: "Aus", smtp: "SMTP-Server", graph: "Microsoft 365" },
+    fromName: "Absendername",
+    fromAddress: "Absenderadresse",
+    language: "Sprache der Mails",
+    languageHint: "Gilt, wenn die App die Sprache der empfangenden Person nicht kennt.",
+    host: "Server",
+    port: "Port",
+    security: "Verbindungssicherheit",
+    securities: { starttls: "STARTTLS", ssl: "SSL/TLS", none: "Keine (nicht empfohlen)" },
+    username: "Benutzername",
+    password: "Passwort",
+    tenantId: "Tenant-ID",
+    clientId: "Client-ID der App",
+    clientSecret: "Client-Secret",
+    sender: "Postfach, das sendet",
+    graphHint: "Die App braucht die Anwendungsberechtigung Mail.Send. Beschränken Sie sie in Exchange Online mit «RBAC for Applications» auf das Postfach, das sendet.",
+    testMailbox: "Testinstanz: Mails gehen über das Testpostfach, die Einstellungen hier gelten nicht.",
+    save: "Speichern",
+    saved: "Gespeichert",
+    testTitle: "Testmail",
+    testHint: "Schickt sofort eine Mail mit den gespeicherten Einstellungen und zeigt den Fehler, wenn es nicht klappt.",
+    recipient: "Empfänger (leer: an mich)",
+    sendTest: "Testmail senden",
+    testSent: "Testmail gesendet an {to}",
+    outboxTitle: "Letzte Mails",
+    outboxHint: "Wartende Mails werden alle 30 Sekunden gesendet, bei Fehlern bis zu fünfmal.",
+    outboxEmpty: "Noch keine Mails.",
+    refresh: "Aktualisieren",
+    states: { pending: "Wartet", sent: "Gesendet", failed: "Fehlgeschlagen" },
+    templatesTitle: "E-Mail-Vorlagen",
+    templatesHint: "Betreff und Text jeder Mail pro Sprache. Platzhalter wie {name} werden beim Versand ersetzt. Ohne eigene Vorlage gilt der eingebaute Text.",
+    kind: "Mail",
+    lang: "Sprache",
+    languages: { de: "Deutsch", en: "Englisch" },
+    own: "eigene Vorlage",
+    builtIn: "Eingebauter Text. Speichern Sie, um ihn anzupassen.",
+    custom: "Eigene Vorlage für diese Sprache.",
+    enabled: "Diese Mail senden",
+    tokens: "Platzhalter (Klick fügt ein)",
+    subject: "Betreff",
+    body: "Text",
+    preview: "Vorschau",
+    showPreview: "Vorschau zeigen",
+    hidePreview: "Vorschau ausblenden",
+    sample: "Beispieldaten",
+    saveTemplate: "Vorlage speichern",
+    testToMe: "Test an mich",
+    resetTemplate: "Auf Standard zurücksetzen",
+    templateSaved: "Vorlage gespeichert",
+    templateReset: "Eingebauter Text gilt wieder",
+    off: "Der Versand ist ausgeschaltet. Vorlagen können Sie trotzdem bearbeiten.",
+  },
+  en: {
+    transportTitle: "E-mail sending",
+    transportHint: "Which server the app sends mail through. Password and client secret are stored encrypted and never shown.",
+    provider: "Send mail with",
+    providers: { off: "Off", smtp: "SMTP server", graph: "Microsoft 365" },
+    fromName: "Sender name",
+    fromAddress: "Sender address",
+    language: "Language of the mails",
+    languageHint: "Used when the app does not know the recipient's language.",
+    host: "Server",
+    port: "Port",
+    security: "Connection security",
+    securities: { starttls: "STARTTLS", ssl: "SSL/TLS", none: "None (not recommended)" },
+    username: "User name",
+    password: "Password",
+    tenantId: "Tenant ID",
+    clientId: "Client ID of the app",
+    clientSecret: "Client secret",
+    sender: "Mailbox that sends",
+    graphHint: "The app needs the application permission Mail.Send. Limit it to the sending mailbox with RBAC for Applications in Exchange Online.",
+    testMailbox: "Test instance: mails go through the test mailbox, the settings here do not apply.",
+    save: "Save",
+    saved: "Saved",
+    testTitle: "Test mail",
+    testHint: "Sends a mail at once with the saved settings and shows the error if it fails.",
+    recipient: "Recipient (empty: to me)",
+    sendTest: "Send test mail",
+    testSent: "Test mail sent to {to}",
+    outboxTitle: "Last mails",
+    outboxHint: "Waiting mails are sent every 30 seconds, after an error up to five times.",
+    outboxEmpty: "No mails yet.",
+    refresh: "Refresh",
+    states: { pending: "Waiting", sent: "Sent", failed: "Failed" },
+    templatesTitle: "E-mail templates",
+    templatesHint: "Subject and text of every mail per language. Placeholders like {name} are filled in when the mail is sent. Without an own template the built-in text applies.",
+    kind: "Mail",
+    lang: "Language",
+    languages: { de: "German", en: "English" },
+    own: "own template",
+    builtIn: "Built-in text. Save to change it.",
+    custom: "Own template for this language.",
+    enabled: "Send this mail",
+    tokens: "Placeholders (click to insert)",
+    subject: "Subject",
+    body: "Text",
+    preview: "Preview",
+    showPreview: "Show preview",
+    hidePreview: "Hide preview",
+    sample: "Sample data",
+    saveTemplate: "Save template",
+    testToMe: "Send test to me",
+    resetTemplate: "Reset to default",
+    templateSaved: "Template saved",
+    templateReset: "The built-in text applies again",
+    off: "Sending is switched off. You can still edit the templates.",
+  },
+};
+
+// Plain text (the built-in templates) for a rich text editor: paragraphs and line breaks, HTML escaped.
+function textToHtml(text) {
+  if (!text || /<[a-zA-Z/][^>]*>/.test(text)) return text || "";
+  const esc = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return esc.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${p.replace(/\n/g, "<br>")}</p>`).join("");
+}
+
+function mailLabels(lang, overrides) {
+  return Object.assign({}, LABELS[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (Array.isArray(d)) return d.map((x) => (x && x.msg) || String(x)).join(" ");
+  return (err && err.message) || String(err);
+}
+
+function fmtTime(iso, lang) {
+  try {
+    return new Date(iso).toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "short", timeStyle: "short" });
+  } catch (e) {
+    return iso || "";
+  }
+}
+
+// api: axios instance with the app's base URL (/api); base: where the app mounted Mailer.router.
+function mailApi(api, base) {
+  const b = base || "/mail";
+  const data = (r) => r.data;
+  const enc = encodeURIComponent;
+  return {
+    settings: () => api.get(`${b}/settings`).then(data),
+    save: (body) => api.put(`${b}/settings`, body).then(data),
+    test: (to) => api.post(`${b}/test`, { to: to || "" }).then(data),
+    outbox: () => api.get(`${b}/outbox`).then(data),
+    templates: () => api.get(`${b}/templates`).then(data),
+    saveTemplate: (kind, lang, body) => api.put(`${b}/templates/${enc(kind)}/${enc(lang)}`, body).then(data),
+    resetTemplate: (kind, lang) => api.delete(`${b}/templates/${enc(kind)}/${enc(lang)}`).then(data),
+    preview: (body) => api.post(`${b}/templates/preview`, body).then(data),
+    testTemplate: (body) => api.post(`${b}/templates/test`, body).then(data),
+  };
+}
+
+function useMessages(props) {
+  const [msg, setMsg] = React.useState(null);
+  const fmtErr = props.formatError || errorText;
+  return {
+    msg,
+    ok: (text) => (props.notify ? props.notify(text, "success") : setMsg({ tone: "ok", text })),
+    fail: (err) => {
+      const text = fmtErr(err);
+      if (props.notify) props.notify(text, "error");
+      else setMsg({ tone: "error", text });
+    },
+    clear: () => setMsg(null),
+  };
+}
+
+function Notice({ msg, testId }) {
+  if (!msg) return null;
+  return h("div", { className: `scalio-notice is-${msg.tone === "error" ? "error" : "ok"}`, role: msg.tone === "error" ? "alert" : "status", "data-testid": testId }, msg.text);
+}
+
+function input(id, value, onChange, extra) {
+  return h("input", Object.assign({ id, className: "scalio-input", value: value == null ? "" : value, "data-testid": id,
+    onChange: (e) => onChange(e.target.value) }, extra || {}));
+}
+
+function select(id, value, options, onChange, extra) {
+  return h("select", Object.assign({ id, className: "scalio-input", value, "data-testid": id, onChange: (e) => onChange(e.target.value) }, extra || {}),
+    options.map(([v, text]) => h("option", { key: v, value: v }, text)));
+}
+
+// Props: client (mailApi), lang, labels, notify(message, tone), formatError(err), graphHint (the app's own text for
+// the Graph permissions, e.g. Beacon also needs Mail.ReadWrite), children (more blocks after «Testmail», e.g. Beacon's
+// mail intake), outbox (false hides «Letzte Mails»).
+function MailTransport(props) {
+  const { client, lang } = props;
+  const L = mailLabels(lang, props.labels);
+  const m = useMessages(props);
+  const [form, setForm] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [to, setTo] = React.useState("");
+  const [testing, setTesting] = React.useState(false);
+  const [testMsg, setTestMsg] = React.useState(null);
+  const [rows, setRows] = React.useState([]);
+  const showOutbox = props.outbox !== false;
+
+  const loadOutbox = React.useCallback(() => {
+    if (!showOutbox) return Promise.resolve();
+    return client.outbox().then((r) => setRows(r || [])).catch(() => setRows([]));
+  }, [client, showOutbox]);
+  React.useEffect(() => {
+    let alive = true;
+    client.settings().then((d) => alive && setForm(d)).catch((e) => alive && m.fail(e));
+    loadOutbox();
+    return () => { alive = false; };
+  }, [client]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!form) return h(SettingsSection, { id: "mail", title: L.transportTitle, description: L.transportHint, testId: "mail-transport" }, h(Notice, { msg: m.msg, testId: "mail-message" }));
+
+  const set = (patch) => setForm(Object.assign({}, form, patch));
+  const part = (name, key) => (v) => set({ [name]: Object.assign({}, form[name], { [key]: v }) });
+  const locked = !!form.test_mailbox;
+
+  const save = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    m.clear();
+    try {
+      const body = { provider: form.provider, from_name: form.from_name, from_address: form.from_address, language: form.language };
+      if (form.provider === "smtp") body.smtp = Object.assign({}, form.smtp, { port: Number(form.smtp.port) || 587 });
+      if (form.provider === "graph") body.graph = form.graph;
+      setForm(await client.save(body));
+      m.ok(L.saved);
+    } catch (err) {
+      m.fail(err);
+    }
+    setBusy(false);
+  };
+  const test = async () => {
+    setTesting(true);
+    setTestMsg(null);
+    try {
+      const r = await client.test(to.trim());
+      const text = L.testSent.replace("{to}", (r && r.to) || to);
+      if (props.notify) props.notify(text, "success");
+      else setTestMsg({ tone: "ok", text });
+      loadOutbox();
+    } catch (err) {
+      const text = (props.formatError || errorText)(err);
+      if (props.notify) props.notify(text, "error");
+      else setTestMsg({ tone: "error", text });
+    }
+    setTesting(false);
+  };
+
+  const providers = ["off", "smtp", "graph"];
+  const transport = h(
+    SettingsSection,
+    { id: "mail", title: L.transportTitle, description: L.transportHint, testId: "mail-transport" },
+    h(
+      "form",
+      { className: "scalio-settings-form", onSubmit: save },
+      locked ? h("div", { className: "scalio-notice is-info", "data-testid": "mail-test-mailbox" }, L.testMailbox) : null,
+      h("fieldset", { className: "scalio-mail-providers", disabled: busy || locked },
+        h("legend", { className: "scalio-field-label" }, L.provider),
+        providers.map((id) => h("label", { key: id, className: "scalio-settings-check" },
+          h("input", { type: "radio", name: "mail-provider", checked: form.provider === id, "data-testid": `mail-provider-${id}`,
+            onChange: () => set({ provider: id }) }), h("span", null, L.providers[id])))),
+      form.provider !== "off"
+        ? h("div", { className: "scalio-mail-grid" },
+            h(Field, { id: "mail-from-name", label: L.fromName }, input("mail-from-name", form.from_name, (v) => set({ from_name: v }), { maxLength: 80, disabled: busy })),
+            form.provider === "smtp"
+              ? h(Field, { id: "mail-from", label: L.fromAddress }, input("mail-from", form.from_address, (v) => set({ from_address: v }),
+                  { type: "email", maxLength: 254, placeholder: "noreply@example.com", disabled: busy || locked }))
+              : null,
+            h(Field, { id: "mail-lang", label: L.language, hint: L.languageHint },
+              select("mail-lang", form.language, [["de", L.languages.de], ["en", L.languages.en]], (v) => set({ language: v }), { disabled: busy })))
+        : null,
+      form.provider === "smtp"
+        ? h("div", { className: "scalio-mail-grid", "data-testid": "mail-smtp" },
+            h(Field, { id: "mail-smtp-host", label: L.host }, input("mail-smtp-host", form.smtp.host, part("smtp", "host"), { maxLength: 253, placeholder: "smtp.example.com", disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-port", label: L.port }, input("mail-smtp-port", form.smtp.port, part("smtp", "port"), { type: "number", min: 1, max: 65535, disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-security", label: L.security },
+              select("mail-smtp-security", form.smtp.security, Object.keys(L.securities).map((k) => [k, L.securities[k]]), part("smtp", "security"), { disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-user", label: L.username }, input("mail-smtp-user", form.smtp.username, part("smtp", "username"), { maxLength: 200, autoComplete: "off", disabled: busy || locked })),
+            h(Field, { id: "mail-smtp-password", label: L.password }, input("mail-smtp-password", form.smtp.password, part("smtp", "password"),
+              { type: "password", maxLength: 500, autoComplete: "new-password", disabled: busy || locked })))
+        : null,
+      form.provider === "graph"
+        ? h("div", { "data-testid": "mail-graph" },
+            h("div", { className: "scalio-mail-grid" },
+              h(Field, { id: "mail-graph-tenant", label: L.tenantId }, input("mail-graph-tenant", form.graph.tenant_id, part("graph", "tenant_id"),
+                { maxLength: 36, placeholder: "00000000-0000-0000-0000-000000000000", className: "scalio-input scalio-mono", disabled: busy })),
+              h(Field, { id: "mail-graph-client", label: L.clientId }, input("mail-graph-client", form.graph.client_id, part("graph", "client_id"),
+                { maxLength: 36, placeholder: "00000000-0000-0000-0000-000000000000", className: "scalio-input scalio-mono", disabled: busy })),
+              h(Field, { id: "mail-graph-secret", label: L.clientSecret }, input("mail-graph-secret", form.graph.client_secret, part("graph", "client_secret"),
+                { type: "password", maxLength: 500, autoComplete: "new-password", disabled: busy })),
+              h(Field, { id: "mail-graph-sender", label: L.sender }, input("mail-graph-sender", form.graph.sender, part("graph", "sender"),
+                { type: "email", maxLength: 254, placeholder: "it@example.com", disabled: busy }))),
+            h("p", { className: "scalio-settings-help" }, props.graphHint || L.graphHint))
+        : null,
+      h(Notice, { msg: m.msg, testId: "mail-message" }),
+      h("div", { className: "scalio-settings-section-footer" },
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy || locked, "data-testid": "mail-save" },
+          h(Icons.Check, { className: "scalio-icon" }), L.save))
+    )
+  );
+
+  const testBlock = h(
+    SettingsSection,
+    { id: "mail-test", title: L.testTitle, description: L.testHint, testId: "mail-test-section" },
+    h("div", { className: "scalio-mail-test" },
+      input("mail-test-to", to, setTo, { type: "email", placeholder: L.recipient, "aria-label": L.recipient, maxLength: 254 }),
+      h("button", { type: "button", className: "scalio-btn", onClick: test, disabled: testing || form.provider === "off", "data-testid": "mail-test" },
+        h(Icons.CornerDownLeft, { className: "scalio-icon" }), L.sendTest)),
+    h(Notice, { msg: testMsg, testId: "mail-test-message" })
+  );
+
+  const outbox = showOutbox
+    ? h(
+        SettingsSection,
+        { id: "mail-outbox", title: L.outboxTitle, description: L.outboxHint, testId: "mail-outbox-section" },
+        h("div", { className: "scalio-settings-section-footer" },
+          h("button", { type: "button", className: "scalio-btn is-ghost", onClick: loadOutbox, "data-testid": "mail-outbox-refresh" }, L.refresh)),
+        rows.length === 0
+          ? h("p", { className: "scalio-settings-text", "data-testid": "mail-outbox-empty" }, L.outboxEmpty)
+          : h("div", { className: "scalio-mail-outbox" },
+              h("table", { "data-testid": "mail-outbox" },
+                h("tbody", null, rows.map((r) => h("tr", { key: r.id },
+                  h("td", { className: "scalio-mail-time" }, fmtTime(r.created_at, lang)),
+                  h("td", null, r.to),
+                  h("td", null, r.subject, r.error ? h("span", { className: "scalio-settings-help is-error" }, r.error) : null),
+                  h("td", { className: "scalio-mail-state" },
+                    h("span", { className: `scalio-badge is-${{ pending: "running", sent: "ok", failed: "error" }[r.status] || "neutral"}` },
+                      L.states[r.status] || r.status)))))))
+      )
+    : null;
+
+  return h(React.Fragment, null, transport, testBlock, props.children || null, outbox);
+}
+
+// Props: client (mailApi), lang, labels, notify, formatError, editor (the app's rich text editor: a component with
+// {value, onChange, testId}; without it a text field), delay (ms before the preview reloads, default 450).
+function MailTemplates(props) {
+  const { client, lang } = props;
+  const L = mailLabels(lang, props.labels);
+  const m = useMessages(props);
+  const [data, setData] = React.useState(null);
+  const [kind, setKind] = React.useState("");
+  const [tlang, setTlang] = React.useState("");
+  const [subject, setSubject] = React.useState("");
+  const [body, setBody] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [showPreview, setShowPreview] = React.useState(true);
+  const [preview, setPreview] = React.useState({ subject: "", html: "" });
+  const [provider, setProvider] = React.useState(null);
+  const delay = props.delay == null ? 450 : props.delay;
+
+  const apply = (d, k, l) => {
+    setData(d);
+    const kk = k || (d.kinds[0] && d.kinds[0].code) || "";
+    const ll = l || d.language || "de";
+    setKind(kk);
+    setTlang(ll);
+    const meta = d.kinds.find((x) => x.code === kk);
+    const t = meta && meta.texts[ll];
+    setSubject(t ? t.subject : "");
+    setBody(t ? (props.editor ? textToHtml(t.body) : t.body) : "");
+  };
+
+  React.useEffect(() => {
+    let alive = true;
+    client.templates().then((d) => alive && apply(d)).catch((e) => alive && m.fail(e));
+    if (client.settings) client.settings().then((s) => alive && setProvider(s.provider)).catch(() => {});
+    return () => { alive = false; };
+  }, [client]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(() => {
+    if (!showPreview || !kind || !tlang) return undefined;
+    let alive = true;
+    const t = setTimeout(() => {
+      client.preview({ kind, lang: tlang, subject, body }).then((p) => alive && setPreview(p)).catch(() => {});
+    }, delay);
+    return () => { alive = false; clearTimeout(t); };
+  }, [client, showPreview, kind, tlang, subject, body, delay]);
+
+  const section = (children) => h(SettingsSection, { id: "mail-templates", title: L.templatesTitle, description: L.templatesHint, testId: "mail-templates" }, children);
+  if (!data) return section(h(Notice, { msg: m.msg, testId: "mail-templates-message" }));
+
+  const meta = data.kinds.find((x) => x.code === kind) || data.kinds[0];
+  const text = meta.texts[tlang] || {};
+  const run = async (fn, okText) => {
+    setBusy(true);
+    m.clear();
+    try {
+      const r = await fn();
+      if (okText) m.ok(typeof okText === "function" ? okText(r) : okText);
+    } catch (err) {
+      m.fail(err);
+    }
+    setBusy(false);
+  };
+  const save = () => run(async () => apply(await client.saveTemplate(kind, tlang, { subject, body }), kind, tlang), L.templateSaved);
+  const reset = () => run(async () => apply(await client.resetTemplate(kind, tlang), kind, tlang), L.templateReset);
+  const testMe = () => run(() => client.testTemplate({ kind, lang: tlang, subject, body }), (r) => L.testSent.replace("{to}", (r && r.to) || ""));
+  const toggle = (on) => run(async () => {
+    await client.save({ notify: { [kind]: on } });
+    apply(await client.templates(), kind, tlang);
+  });
+  const insert = (tok) => setBody((b) => `${b || ""}{${tok}}`);
+
+  const Editor = props.editor;
+  const editor = Editor
+    ? h(Editor, { value: body, onChange: setBody, testId: "mail-template-body" })
+    : h("textarea", { id: "mail-template-body", className: "scalio-input scalio-textarea scalio-mail-body", rows: 14, value: body, maxLength: 50000,
+        "data-testid": "mail-template-body", onChange: (e) => setBody(e.target.value) });
+
+  return section(h(
+    "div",
+    { className: "scalio-settings-form" },
+    provider === "off" ? h("div", { className: "scalio-notice is-info", "data-testid": "mail-templates-off" }, L.off) : null,
+    h("div", { className: "scalio-mail-grid" },
+      h(Field, { id: "mail-template-kind", label: L.kind, hint: meta.description[lang === "en" ? "en" : "de"] },
+        select("mail-template-kind", meta.code, data.kinds.map((k) => [k.code, k.name[lang === "en" ? "en" : "de"] +
+          (Object.values(k.texts).some((t) => t.own) ? ` (${L.own})` : "")]), (v) => apply(data, v, tlang))),
+      h(Field, { id: "mail-template-lang", label: L.lang, hint: text.own ? L.custom : L.builtIn },
+        select("mail-template-lang", tlang, data.languages.map((l) => [l, (L.languages[l] || l) + (meta.texts[l] && meta.texts[l].own ? " ✓" : "")]),
+          (v) => apply(data, meta.code, v)))),
+    meta.switchable
+      ? h("label", { className: "scalio-settings-check" },
+          h("input", { type: "checkbox", checked: !!meta.enabled, disabled: busy, "data-testid": "mail-template-enabled", onChange: (e) => toggle(e.target.checked) }),
+          h("span", null, L.enabled))
+      : null,
+    h("div", null,
+      h("span", { className: "scalio-field-label" }, L.tokens),
+      h("div", { className: "scalio-mail-tokens" }, meta.tokens.map((tok) =>
+        h("button", { key: tok, type: "button", className: "scalio-mail-token", onClick: () => insert(tok), "data-testid": `mail-token-${tok}` }, `{${tok}}`)))),
+    h(Field, { id: "mail-template-subject", label: L.subject },
+      input("mail-template-subject", subject, setSubject, { maxLength: 300 })),
+    h("div", { className: "scalio-mail-editor-head" },
+      h("label", { className: "scalio-field-label", htmlFor: "mail-template-body" }, L.body),
+      h("button", { type: "button", className: "scalio-btn is-ghost", onClick: () => setShowPreview((v) => !v), "data-testid": "mail-preview-toggle" },
+        showPreview ? L.hidePreview : L.showPreview)),
+    h("div", { className: showPreview ? "scalio-mail-editor has-preview" : "scalio-mail-editor" },
+      h("div", { className: "scalio-mail-editor-pane" }, editor),
+      showPreview
+        ? h("div", { className: "scalio-mail-preview", "data-testid": "mail-preview" },
+            h("div", { className: "scalio-mail-preview-head" }, h("strong", null, L.preview), h("span", null, L.sample)),
+            h("div", { className: "scalio-mail-preview-subject" }, `${L.subject}: `, h("span", { "data-testid": "mail-preview-subject" }, preview.subject || "–")),
+            h("iframe", { title: L.preview, sandbox: "", "data-testid": "mail-preview-frame",
+              srcDoc: `<!doctype html><html><body style="margin:0;padding:16px;background:#fff;">${preview.html || ""}</body></html>` }))
+        : null),
+    h(Notice, { msg: m.msg, testId: "mail-templates-message" }),
+    h("div", { className: "scalio-settings-section-footer" },
+      text.own
+        ? h("button", { type: "button", className: "scalio-btn is-danger", onClick: reset, disabled: busy, "data-testid": "mail-template-reset" },
+            h(Icons.History, { className: "scalio-icon" }), L.resetTemplate)
+        : null,
+      h("button", { type: "button", className: "scalio-btn", onClick: testMe, disabled: busy || provider === "off", "data-testid": "mail-template-test" },
+        h(Icons.CornerDownLeft, { className: "scalio-icon" }), L.testToMe),
+      h("button", { type: "button", className: "scalio-btn is-primary", onClick: save, disabled: busy || !subject.trim() || !body.trim(), "data-testid": "mail-template-save" },
+        h(Icons.Check, { className: "scalio-icon" }), L.saveTemplate))
+  ));
+}
+
+module.exports = { MailTransport, MailTemplates, mailApi, mailLabels, textToHtml, MAIL_LABELS: LABELS };