@scalio-cloud/ui 0.24.0 → 0.25.1

package/README.md

@@ -236,6 +236,18 @@ const users = usersApi(api);   // once, outside the component
 <MicrosoftConnection linked={user.microsoft} canUnlink={user.has_password} onLink={...} onUnlink={...} lang={lang} />
 ```
 
+### Rollen und Microsoft Entra (`RoleAdmin`, `RoleSourceSettings`)
+
+```jsx
+import { RoleAdmin, rolesApi, RoleSourceSettings } from "@scalio-cloud/ui/react";
+const roles = rolesApi(api);                               // Nexus: rolesApi(api, { permissions: "/permissions" })
+<RoleAdmin client={roles} lang={lang} notify={toast} confirm={confirm} onChange={reloadUsers} />
+<RoleSourceSettings value={source} tenants onSave={({ source, tenants }) => api.put("/users/role-source", { source, tenant_ids: tenants })} lang={lang} />
+```
+
+The backend is scalio-platform `roles_router` (0.3.0). Built-in roles are read-only; own roles never get the
+permissions the app keeps for administrators.
+
 ## Setup wizard (React)
 
 Einrichtungsassistent after the first sign-in, the same in every app (ADR 0060, UISPEC section 3). The app writes
@@ -323,12 +335,14 @@ see `fonts/licenses/`. Icons in `react/icons.js`: Lucide, ISC license, see `lice
 
 ## Release
 
-1. Change the files, add a line to `CHANGELOG.md`, bump `version` in `package.json` (semver; tag without `v`).
+1. Change the files and bump `version` in `package.json` (semver; tag without `v`).
 2. Merge to `main`, then release it: in the Scalio Dev cockpit (row Scalio UI, "Freigeben" with the version) or
    in GitHub (Actions -> publish -> Run workflow on main, or create the tag/release yourself). The `publish`
    workflow tests and publishes that version to npmjs.com via trusted publishing (no token; npm org
    `scalio-cloud`, trusted publisher Scalio-Cloud / scalio-ui / publish.yml) and, when started by hand or from
-   the cockpit, creates the tag and GitHub release with the CHANGELOG lines.
+   the cockpit, creates the tag and GitHub release with the CHANGELOG lines. The changelog lives in scalio-docs
+   `changelog/scalio-ui/` (ADR 0066): every change adds a file `changelog.d/<name>.md` there, and before the release a
+   docs PR runs `python3 tools/changelog.py --repo scalio-ui release <version>`.
 3. Apps update with `yarn upgrade @scalio-cloud/ui@<version>` in their own PR.
 
 `npm test` checks: light/dark variables match, the preset only uses defined variables, all font files exist,

package/nav.css

@@ -410,8 +410,9 @@
 .scalio-users-table tbody tr:hover { background: hsl(var(--muted) / 0.4); }
 .scalio-users-table tr.is-pending { background: rgb(217 119 6 / 0.05); }
 .scalio-users-table tr.is-locked .scalio-users-who { opacity: 0.6; }
-.scalio-users-hide-sm { display: none; }
+.scalio-users-hide-sm, .scalio-users-hide-md { display: none; }
 @media (min-width: 768px) { .scalio-users-hide-sm { display: table-cell; } }
+@media (min-width: 1536px) { .scalio-users-hide-md { display: table-cell; } }
 .scalio-users-who { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
 .scalio-users-avatar {
   display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0;
@@ -419,16 +420,20 @@
 }
 .scalio-users-who-text { min-width: 0; }
 .scalio-users-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-weight: 600; }
-.scalio-users-mail { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
+.scalio-users-mail { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }
+.scalio-users-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
 .scalio-users-you { font-size: 10px; font-weight: 700; text-transform: uppercase; color: hsl(var(--primary)); }
 .scalio-users-role { font-size: 0.8125rem; }
 .scalio-users-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
-.scalio-users-actions { text-align: right; white-space: nowrap; }
-.scalio-users-actions > * + * { margin-left: 0.375rem; }
+.scalio-users-actions { text-align: right; }
+.scalio-users-actions-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }
+.scalio-users-actions .scalio-btn { height: 2rem; }
+.scalio-users-actions .scalio-btn-icon { width: 2rem; }
 .scalio-users-select { height: 2rem; padding: 0 0.5rem; font-size: 0.8125rem; width: auto; }
 .scalio-users-empty, .scalio-users-loading { margin: 0; padding: 2rem 1rem; text-align: center; color: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--border)); border-radius: 2px; }
 .scalio-users-field { display: flex; flex-direction: column; gap: 0.25rem; }
 .scalio-users-field .scalio-field-label { margin-top: 0; }
+.scalio-dialog .scalio-input:disabled, .scalio-users .scalio-input:disabled { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); cursor: not-allowed; }
 .scalio-users-hint { margin: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
 .scalio-users-modes { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.5rem; }
 .scalio-users-modes legend { margin-bottom: 0.25rem; }
@@ -464,6 +469,23 @@
 .scalio-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
 .scalio-dialog-left { margin-right: auto; }
 
+/* Roles (RoleAdmin, RoleSourceSettings; scalio-docs concepts/app-roles.md) */
+.scalio-roles-table th.scalio-roles-col, .scalio-roles-cell { text-align: center; }
+.scalio-roles-table th.scalio-roles-col { min-width: 7.5rem; vertical-align: top; text-transform: none; letter-spacing: 0; }
+.scalio-roles-table th.scalio-roles-col.is-own { background: hsl(var(--primary) / 0.05); }
+.scalio-roles-perm { text-align: left; min-width: 14rem; }
+.scalio-roles-name { font-size: 0.8125rem; font-weight: 700; color: hsl(var(--foreground)); }
+.scalio-roles-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin-top: 0.25rem; font-size: 10px; font-weight: 500; color: hsl(var(--muted-foreground)); }
+.scalio-roles-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.125rem; margin-top: 0.375rem; }
+.scalio-roles-tool { height: 1.5rem; padding: 0 0.375rem; font-size: 10px; }
+.scalio-roles-tool.is-danger { color: hsl(var(--destructive)); }
+.scalio-roles-group td { padding-top: 1rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.4); }
+.scalio-roles-yes { color: #15803d; }
+.dark .scalio-roles-yes { color: #4ade80; }
+.scalio-roles-no { color: hsl(var(--muted-foreground)); }
+.scalio-roles-lic { margin-left: 0.375rem; }
+.scalio-roles-source { display: flex; flex-direction: column; gap: 0.875rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); font-size: 0.875rem; }
+
 /* Setup wizard (SetupWizard, ADR 0060): design of the Nexus wizard, first built in Kontor */
 .scalio-wizard-root { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(0 0 0 / 0.5); }
 .scalio-wizard {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "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,

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("./wizard"));
+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"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -208,6 +208,13 @@ const LABELS = {
       emergency: "Notfall-Administrator",
       locked: "Gesperrt",
       pending: "Wartet auf Freigabe",
+      invitedBadge: "Eingeladen",
+      inviteLinkTitle: "Einladung erstellt",
+      inviteLinkText: "Die Mail an {email} konnte nicht gesendet werden. Geben Sie diesen Link weiter; er gilt einmal.",
+      revokeInvite: "Einladung zurückziehen",
+      revokeTitle: "Einladung an {email} zurückziehen?",
+      revokeText: "Der Link in der Mail funktioniert danach nicht mehr.",
+      revoked: "Einladung zurückgezogen.",
       approve: "Freischalten",
       merge: "Zusammenführen",
       edit: "Bearbeiten",
@@ -593,6 +600,13 @@ const LABELS = {
       emergency: "Emergency administrator",
       locked: "Locked",
       pending: "Waiting for approval",
+      invitedBadge: "Invited",
+      inviteLinkTitle: "Invitation created",
+      inviteLinkText: "The mail to {email} could not be sent. Pass on this link; it works once.",
+      revokeInvite: "Withdraw invitation",
+      revokeTitle: "Withdraw the invitation to {email}?",
+      revokeText: "The link in the mail stops working.",
+      revoked: "Invitation withdrawn.",
       approve: "Approve",
       merge: "Merge",
       edit: "Edit",

package/react/roles.js

@@ -0,0 +1,384 @@
+"use strict";
+// Konten und Rollen -> Rollen and -> Microsoft Entra, the same in every Scalio app (scalio-docs concepts/app-roles.md,
+// roles/R1-R6). rolesApi(api, opts) maps the shared role API of scalio-platform `roles_router` (GET /roles/permissions,
+// GET/POST /roles, PATCH/DELETE /roles/{id}); RoleAdmin shows "welche Rolle darf was" (permissions as rows, roles as
+// columns), built-in roles read-only, own roles with checkboxes, add / copy / rename / delete. RoleSourceSettings is
+// the role source (Scalio app or Entra app roles) with the Entra values and, where the app has them, the tenant IDs.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+
+const TEXT = {
+  de: {
+    loading: "Wird geladen …",
+    permission: "Recht",
+    add: "Rolle anlegen",
+    addTitle: "Rolle anlegen",
+    name: "Name",
+    description: "Beschreibung (optional)",
+    copyFrom: "Rechte übernehmen von",
+    none: "keiner Rolle (leer beginnen)",
+    create: "Anlegen",
+    cancel: "Abbrechen",
+    save: "Speichern",
+    rename: "Umbenennen",
+    renameTitle: "Rolle umbenennen",
+    copy: "Kopieren",
+    copyOf: "Kopie von {name}",
+    remove: "Löschen",
+    removeTitle: "Rolle «{name}» löschen?",
+    removeText: "Konten mit dieser Rolle müssen vorher eine andere Rolle bekommen.",
+    builtin: "Eingebaut",
+    own: "Eigene Rolle",
+    users: "{n} Konten",
+    oneUser: "1 Konto",
+    license: "Zählt für die Lizenz",
+    licenseHint: "Rechte mit diesem Zeichen machen eine Rolle lizenzpflichtig.",
+    adminAll: "Alle Rechte, auch Einstellungen, Benutzer und Lizenz",
+    adminOnly: "Nur für Administratoren",
+    created: "Rolle «{name}» angelegt.",
+    saved: "Gespeichert.",
+    removed: "Rolle gelöscht.",
+    empty: "Noch keine eigenen Rollen. Mit «Rolle anlegen» stellen Sie eine Rolle aus einzelnen Rechten zusammen.",
+    readOnly: "Eingebaute Rollen sind fest. Für andere Rechte legen Sie eine eigene Rolle an, z. B. als Kopie.",
+    // RoleSourceSettings
+    source: "Rollen kommen aus",
+    sourceLocal: "dieser App",
+    sourceEntra: "Microsoft Entra ID (App-Rollen)",
+    hintLocal: "Sie vergeben die Rollen unter Benutzer. Werte für Entra ID, falls Sie später umstellen:",
+    hintEntra: "Ab der nächsten Anmeldung entscheiden die App-Rollen der Unternehmensanwendung «Scalio» für jedes Microsoft-Konto. Wer keine Rolle hat, kann sich nicht mehr anmelden. Eigene Rollen und lokale Konten vergeben Sie weiter hier. Werte:",
+    tenants: "Microsoft-Tenant-IDs",
+    tenantsHint: "Nur App-Rollen aus diesen Tenants zählen, durch Komma getrennt.",
+    entraConfirm: "Rollen aus Entra ID übernehmen?",
+    entraConfirmText: "Ab der nächsten Anmeldung entscheiden die App-Rollen in Entra ID für jedes Microsoft-Konto. Personen ohne Rolle können sich nicht mehr anmelden.",
+    entraAction: "Entra ID verwenden",
+  },
+  en: {
+    loading: "Loading …",
+    permission: "Permission",
+    add: "Add role",
+    addTitle: "Add role",
+    name: "Name",
+    description: "Description (optional)",
+    copyFrom: "Take permissions from",
+    none: "no role (start empty)",
+    create: "Add",
+    cancel: "Cancel",
+    save: "Save",
+    rename: "Rename",
+    renameTitle: "Rename role",
+    copy: "Copy",
+    copyOf: "Copy of {name}",
+    remove: "Delete",
+    removeTitle: "Delete the role “{name}”?",
+    removeText: "Accounts with this role need another role first.",
+    builtin: "Built-in",
+    own: "Own role",
+    users: "{n} accounts",
+    oneUser: "1 account",
+    license: "Counts for the license",
+    licenseHint: "Permissions with this mark make a role count for the license.",
+    adminAll: "Every permission, including settings, users and license",
+    adminOnly: "Administrators only",
+    created: "Role “{name}” added.",
+    saved: "Saved.",
+    removed: "Role deleted.",
+    empty: "No own roles yet. With “Add role” you put a role together from single permissions.",
+    readOnly: "Built-in roles are fixed. For other permissions add an own role, for example as a copy.",
+    source: "Roles come from",
+    sourceLocal: "this app",
+    sourceEntra: "Microsoft Entra ID (app roles)",
+    hintLocal: "You give roles under Users. Values for Entra ID, in case you switch later:",
+    hintEntra: "From the next sign-in, the app roles of the enterprise application “Scalio” decide for every Microsoft account. People without a role can no longer sign in. Own roles and local accounts are still given here. Values:",
+    tenants: "Microsoft tenant IDs",
+    tenantsHint: "Only app roles from these tenants count, separated by commas.",
+    entraConfirm: "Take roles from Entra ID?",
+    entraConfirmText: "From the next sign-in, the app roles in Entra ID decide for every Microsoft account. People without a role can no longer sign in.",
+    entraAction: "Use Entra ID",
+  },
+};
+
+function rolesText(lang, overrides) {
+  return Object.assign({}, TEXT[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function fill(text, values) {
+  return String(text || "").replace(/\{(\w+)\}/g, (m, k) => (values && values[k] !== undefined ? values[k] : m));
+}
+
+// A text that is either a string or {de, en}.
+function tr(value, lang) {
+  if (value && typeof value === "object") return value[lang === "en" ? "en" : "de"] || value.en || value.de || "";
+  return value || "";
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (d && typeof d.message === "string") return d.message;
+  if (Array.isArray(d)) return d.map((x) => (x && x.msg) || String(x)).join(" ");
+  return (err && err.message) || String(err);
+}
+
+function normalizeRole(d, builtin) {
+  return {
+    id: String(d.id),
+    name: d.name,
+    description: d.description || "",
+    builtin: d.builtin !== undefined ? !!d.builtin : !!builtin,
+    admin: !!(d.admin || d.isAdmin),
+    permissions: Array.isArray(d.permissions) ? d.permissions : [],
+    license: !!d.license,
+    users: typeof d.users === "number" ? d.users : null,
+  };
+}
+
+// api: axios instance with the app's base URL (/api). opts.base ("/roles"), opts.permissions (Nexus "/permissions").
+function rolesApi(api, opts) {
+  const base = (opts && opts.base) || "/roles";
+  const permsUrl = (opts && opts.permissions) || `${base}/permissions`;
+  const one = (id) => `${base}/${encodeURIComponent(id)}`;
+  return {
+    permissions: () => api.get(permsUrl).then((r) => ({ permissions: r.data.permissions || [], groups: r.data.groups || [] })),
+    list: () => api.get(base).then((r) => [
+      ...(r.data.builtin || []).map((d) => normalizeRole(d, true)),
+      ...(r.data.custom || []).map((d) => normalizeRole(d, false)),
+    ]),
+    create: (body) => api.post(base, body).then((r) => normalizeRole(r.data, false)),
+    update: (id, patch) => api.patch(one(id), patch).then((r) => normalizeRole(r.data, false)),
+    remove: (id) => api.delete(one(id)).then(() => true),
+  };
+}
+
+async function ask(confirm, title, text, action, danger) {
+  if (confirm) return !!(await confirm({ title, text, action, danger: danger !== false }));
+  return typeof window !== "undefined" && window.confirm ? window.confirm(title) : true;
+}
+
+function Dialog({ title, onClose, children, testId }) {
+  React.useEffect(() => {
+    const key = (e) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", key);
+    return () => document.removeEventListener("keydown", key);
+  }, [onClose]);
+  return h(
+    "div",
+    { className: "scalio-dialog-root" },
+    h("div", { className: "scalio-dialog-backdrop", onClick: onClose }),
+    h(
+      "div",
+      { className: "scalio-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, "data-testid": testId },
+      h(
+        "div",
+        { className: "scalio-dialog-head" },
+        h("div", { className: "scalio-dialog-title" }, title),
+        h("button", { type: "button", className: "scalio-btn is-ghost scalio-btn-icon", onClick: onClose, "aria-label": "×", "data-testid": "dialog-close" },
+          h(Icons.X, { className: "scalio-icon" }))
+      ),
+      children
+    )
+  );
+}
+
+// Props: client (rolesApi), lang, labels (overrides), notify(message, tone), confirm({title, text, action, danger}),
+// formatError(err), canEdit (default true), onChange() after every change, testId.
+function RoleAdmin(props) {
+  const lang = props.lang === "en" ? "en" : "de";
+  const L = rolesText(lang, props.labels);
+  const client = props.client;
+  const canEdit = props.canEdit !== false;
+  const [catalog, setCatalog] = React.useState(null);
+  const [roles, setRoles] = React.useState(null);
+  const [dialog, setDialog] = React.useState(null); // {mode: "add"|"rename", role}
+  const [form, setForm] = React.useState({ name: "", description: "", from: "" });
+  const [error, setError] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const fmt = props.formatError || errorText;
+  const say = (text, tone) => props.notify && props.notify(text, tone || "success");
+
+  const load = React.useCallback(() => {
+    return Promise.all([client.permissions(), client.list()])
+      .then(([c, r]) => { setCatalog(c); setRoles(r); })
+      .catch((e) => { setCatalog({ permissions: [], groups: [] }); setRoles([]); say(fmt(e), "error"); });
+  }, [client]);
+  React.useEffect(() => { load(); }, [load]);
+
+  const changed = () => { if (props.onChange) props.onChange(); return load(); };
+  const run = async (fn, okText, after) => {
+    setBusy(true);
+    setError("");
+    try {
+      const res = await fn();
+      if (okText) say(okText);
+      if (after) after(res);
+      await changed();
+      return true;
+    } catch (e) {
+      if (dialog) setError(fmt(e)); else say(fmt(e), "error");
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!catalog || !roles) return h("div", { className: "scalio-users-loading" }, L.loading);
+
+  const own = roles.filter((r) => !r.builtin);
+  const toggle = (role, key) => {
+    const has = role.permissions.includes(key);
+    const permissions = has ? role.permissions.filter((p) => p !== key) : [...role.permissions, key];
+    setRoles(roles.map((r) => (r.id === role.id ? Object.assign({}, r, { permissions }) : r)));
+    run(() => client.update(role.id, { permissions }), null);
+  };
+  const openAdd = (from) => {
+    setError("");
+    setForm({ name: from ? fill(L.copyOf, { name: tr(from.name, lang) }) : "", description: "", from: from ? from.id : "" });
+    setDialog({ mode: "add" });
+  };
+  const openRename = (role) => {
+    setError("");
+    setForm({ name: tr(role.name, lang), description: role.description || "", from: "" });
+    setDialog({ mode: "rename", role });
+  };
+  const close = () => { setDialog(null); setError(""); };
+  const submit = (e) => {
+    e.preventDefault();
+    const name = form.name.trim();
+    if (dialog.mode === "add") {
+      const src = roles.find((r) => r.id === form.from);
+      const permissions = src ? src.permissions : [];
+      run(() => client.create({ name, description: form.description.trim(), permissions }), fill(L.created, { name }), () => setDialog(null));
+    } else {
+      run(() => client.update(dialog.role.id, { name, description: form.description.trim() }), L.saved, () => setDialog(null));
+    }
+  };
+  const remove = async (role) => {
+    if (!(await ask(props.confirm, fill(L.removeTitle, { name: tr(role.name, lang) }), L.removeText, L.remove))) return;
+    run(() => client.remove(role.id), L.removed);
+  };
+
+  const groups = catalog.groups && catalog.groups.length ? catalog.groups : [""];
+  const byGroup = (g) => catalog.permissions.filter((p) => (p.group || "") === g || (!groups.includes(p.group || "") && g === groups[0]));
+  const usersText = (r) => (r.users === null ? "" : r.users === 1 ? L.oneUser : fill(L.users, { n: r.users }));
+
+  const head = h("tr", null,
+    h("th", { className: "scalio-roles-perm" }, L.permission),
+    roles.map((r) => h("th", { key: r.id, className: cx("scalio-roles-col", r.builtin ? "is-builtin" : "is-own"), "data-testid": `role-col-${r.id}` },
+      h("div", { className: "scalio-roles-name" }, tr(r.name, lang)),
+      h("div", { className: "scalio-roles-meta" },
+        h("span", null, r.builtin ? L.builtin : L.own),
+        usersText(r) ? h("span", null, usersText(r)) : null,
+        r.license ? h("span", { className: "scalio-badge is-warn", title: L.license, "data-testid": `role-license-${r.id}` }, "€") : null),
+      canEdit ? h("div", { className: "scalio-roles-tools" },
+        h("button", { type: "button", className: "scalio-btn is-ghost scalio-roles-tool", onClick: () => openAdd(r), disabled: busy, title: L.copy, "data-testid": `role-copy-${r.id}` }, L.copy),
+        !r.builtin ? h("button", { type: "button", className: "scalio-btn is-ghost scalio-roles-tool", onClick: () => openRename(r), disabled: busy, title: L.rename, "data-testid": `role-rename-${r.id}` }, L.rename) : null,
+        !r.builtin ? h("button", { type: "button", className: "scalio-btn is-ghost scalio-roles-tool is-danger", onClick: () => remove(r), disabled: busy, title: L.remove, "data-testid": `role-delete-${r.id}` }, L.remove) : null
+      ) : null)));
+
+  const cell = (r, p) => {
+    const has = r.admin || r.permissions.includes(p.key);
+    if (r.builtin || !canEdit) {
+      return h("td", { key: r.id, className: "scalio-roles-cell", "data-testid": `role-cell-${r.id}-${p.key}` },
+        has ? h(Icons.Check, { className: "scalio-icon scalio-roles-yes", "aria-label": "✓" }) : h("span", { className: "scalio-roles-no", "aria-label": "–" }, "–"));
+    }
+    return h("td", { key: r.id, className: "scalio-roles-cell" },
+      h("input", { type: "checkbox", checked: has, disabled: busy, onChange: () => toggle(r, p.key),
+        "aria-label": `${tr(r.name, lang)}: ${tr(p.label, lang)}`, "data-testid": `role-check-${r.id}-${p.key}` }));
+  };
+
+  const body = [];
+  groups.forEach((g) => {
+    const rows = byGroup(g);
+    if (!rows.length) return;
+    if (g) body.push(h("tr", { key: `g-${g}`, className: "scalio-roles-group" }, h("td", { colSpan: roles.length + 1 }, g)));
+    rows.forEach((p) => body.push(h("tr", { key: p.key, "data-testid": `role-row-${p.key}` },
+      h("td", { className: "scalio-roles-perm" }, tr(p.label, lang),
+        p.license ? h("span", { className: "scalio-badge is-warn scalio-roles-lic", title: L.license }, "€") : null),
+      roles.map((r) => cell(r, p)))));
+  });
+  body.push(h("tr", { key: "admin-only", className: "scalio-roles-group" }, h("td", { colSpan: roles.length + 1 }, L.adminOnly)));
+  body.push(h("tr", { key: "admin-row" },
+    h("td", { className: "scalio-roles-perm" }, L.adminAll),
+    roles.map((r) => h("td", { key: r.id, className: "scalio-roles-cell" },
+      r.admin ? h(Icons.Check, { className: "scalio-icon scalio-roles-yes", "aria-label": "✓" }) : h("span", { className: "scalio-roles-no" }, "–")))));
+
+  const dialogEl = dialog ? h(Dialog, { title: dialog.mode === "add" ? L.addTitle : L.renameTitle, onClose: close, testId: "role-dialog" },
+    h("form", { className: "scalio-dialog-body", onSubmit: submit },
+      h("div", { className: "scalio-users-field" },
+        h("label", { className: "scalio-field-label", htmlFor: "role-name" }, L.name),
+        h("input", { id: "role-name", className: "scalio-input", value: form.name, required: true, maxLength: 60, autoFocus: true,
+          onChange: (e) => setForm(Object.assign({}, form, { name: e.target.value })), "data-testid": "role-name" })),
+      h("div", { className: "scalio-users-field" },
+        h("label", { className: "scalio-field-label", htmlFor: "role-description" }, L.description),
+        h("input", { id: "role-description", className: "scalio-input", value: form.description, maxLength: 300,
+          onChange: (e) => setForm(Object.assign({}, form, { description: e.target.value })), "data-testid": "role-description" })),
+      dialog.mode === "add" ? h("div", { className: "scalio-users-field" },
+        h("label", { className: "scalio-field-label", htmlFor: "role-from" }, L.copyFrom),
+        h("select", { id: "role-from", className: "scalio-input", value: form.from, onChange: (e) => setForm(Object.assign({}, form, { from: e.target.value })), "data-testid": "role-from" },
+          h("option", { value: "" }, L.none),
+          roles.filter((r) => !r.admin).map((r) => h("option", { key: r.id, value: r.id }, tr(r.name, lang))))) : null,
+      error ? h("p", { className: "scalio-notice is-error scalio-users-error", role: "alert", "data-testid": "role-dialog-error" }, error) : null,
+      h("div", { className: "scalio-dialog-actions" },
+        h("button", { type: "button", className: "scalio-btn is-ghost", onClick: close }, L.cancel),
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy || !form.name.trim(), "data-testid": "role-save" },
+          dialog.mode === "add" ? L.create : L.save)))) : null;
+
+  return h("div", { className: "scalio-users scalio-roles", "data-testid": props.testId || "role-admin" },
+    h("div", { className: "scalio-users-bar" },
+      h("p", { className: "scalio-users-hint" }, own.length ? L.readOnly : L.empty),
+      canEdit ? h("button", { type: "button", className: "scalio-btn is-primary", onClick: () => openAdd(null), disabled: busy, "data-testid": "role-add" },
+        h(Icons.Plus, { className: "scalio-icon" }), L.add) : null),
+    h("div", { className: "scalio-users-table-wrap" },
+      h("table", { className: "scalio-users-table scalio-roles-table", "data-testid": "roles-table" },
+        h("thead", null, head), h("tbody", null, body))),
+    catalog.permissions.some((p) => p.license) ? h("p", { className: "scalio-users-hint" }, h("span", { className: "scalio-badge is-warn" }, "€"), " ", L.licenseHint) : null,
+    dialogEl);
+}
+
+// Props: value {source: "local"|"entra", values: [...], tenants?: [...]}, onSave({source, tenants}) -> Promise,
+// tenants (show the tenant field), lang, labels, confirm, notify, formatError, disabled, testId.
+function RoleSourceSettings(props) {
+  const lang = props.lang === "en" ? "en" : "de";
+  const L = rolesText(lang, props.labels);
+  const v = props.value || { source: "local", values: [] };
+  const [source, setSource] = React.useState(v.source || "local");
+  const [tenants, setTenants] = React.useState((v.tenants || []).join(", "));
+  const [busy, setBusy] = React.useState(false);
+  React.useEffect(() => { setSource(v.source || "local"); setTenants((v.tenants || []).join(", ")); }, [v.source, (v.tenants || []).join(",")]);
+  const dirty = source !== (v.source || "local") || (props.tenants && tenants !== (v.tenants || []).join(", "));
+  const save = async () => {
+    if (source === "entra" && v.source !== "entra" && !(await ask(props.confirm, L.entraConfirm, L.entraConfirmText, L.entraAction, false))) return;
+    setBusy(true);
+    try {
+      await props.onSave({ source, tenants: tenants.split(/[\s,;]+/).filter(Boolean) });
+      if (props.notify) props.notify(L.saved, "success");
+    } catch (e) {
+      if (props.notify) props.notify((props.formatError || errorText)(e), "error");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const values = (v.values || []).map((x) => (typeof x === "string" ? x : x.value || x.name)).filter(Boolean);
+  return h("div", { className: "scalio-roles-source", "data-testid": props.testId || "role-source" },
+    h("div", { className: "scalio-users-field" },
+      h("label", { className: "scalio-field-label", htmlFor: "role-source-select" }, L.source),
+      h("select", { id: "role-source-select", className: "scalio-input scalio-users-select", value: source, disabled: props.disabled || busy,
+        onChange: (e) => setSource(e.target.value), "data-testid": "role-source-select" },
+        h("option", { value: "local" }, L.sourceLocal),
+        h("option", { value: "entra" }, L.sourceEntra))),
+    props.tenants ? h("div", { className: "scalio-users-field" },
+      h("label", { className: "scalio-field-label", htmlFor: "role-source-tenants" }, L.tenants),
+      h("input", { id: "role-source-tenants", className: "scalio-input", value: tenants, disabled: props.disabled || busy,
+        onChange: (e) => setTenants(e.target.value), "data-testid": "role-source-tenants" }),
+      h("p", { className: "scalio-users-hint" }, L.tenantsHint)) : null,
+    h("p", { className: "scalio-users-hint", "data-testid": "role-source-hint" }, source === "entra" ? L.hintEntra : L.hintLocal, " ",
+      values.map((x, i) => h(React.Fragment, { key: x }, i ? ", " : "", h("code", null, x)))),
+    h("div", null,
+      h("button", { type: "button", className: "scalio-btn is-primary", onClick: save, disabled: props.disabled || busy || !dirty, "data-testid": "role-source-save" }, L.save)));
+}
+
+module.exports = { RoleAdmin, RoleSourceSettings, rolesApi, rolesText };

package/react/users.js

@@ -52,6 +52,10 @@ function normalizeUser(d) {
     name: pick(d, ["name"]) || "",
     role: pick(d, ["role"]) || "",
     pending: !!pick(d, ["access_pending", "accessPending", "pendingAccess"]),
+    // invited: the invitation mail is out, the person has not chosen a password yet. inviteOnly: the row is only an
+    // invitation (no account yet, Foundry): it can only be withdrawn.
+    invited: !!pick(d, ["invited", "invitePending"]),
+    inviteOnly: !!pick(d, ["invite_only", "inviteOnly"]),
     microsoft: !!pick(d, ["microsoft", "entra_linked", "external"]),
     managedBy: pick(d, ["managed_by", "roleManagedBy"]) || "",
     hasPassword: !!pick(d, ["has_password", "hasPassword"]),
@@ -72,7 +76,9 @@ function usersApi(api, opts) {
   const secret = (r) => pick(r.data, ["start_password", "startPassword"]) || "";
   return {
     list: () => api.get(base).then((r) => (Array.isArray(r.data) ? r.data : r.data.users || []).map(normalizeUser)),
-    create: (body) => api.post(base, body).then((r) => ({ user: normalizeUser(r.data.user || r.data), startPassword: secret(r) })),
+    // inviteLink: only when the invitation mail could not be sent (the admin passes the link on).
+    create: (body) => api.post(base, body).then((r) => ({ user: normalizeUser(r.data.user || r.data), startPassword: secret(r),
+      inviteLink: pick(r.data, ["invite_link", "inviteLink"]) || "" })),
     update: (id, patch) => api.patch(one(id), patch).then((r) => normalizeUser(r.data.user || r.data)),
     approve: (id, body) => api.post(`${one(id)}/approve`, body).then(() => true),
     merge: (id, into) => api.post(`${one(id)}/merge`, { into }).then(() => true),
@@ -191,6 +197,7 @@ function UserAdmin(props) {
     if (form.access !== null && form.access !== undefined) body.access = form.access;
     run(() => client.create(body), null, (res) => {
       if (res.startPassword) showSecret(res.user, res.startPassword, true);
+      else if (res.inviteLink) setDialog({ mode: "secret", user: res.user, password: res.inviteLink, link: true });
       else {
         say(form.signIn === "invite" ? fill(L.invited, { email: body.email }) : fill(L.created, { email: body.email }));
         close();
@@ -216,12 +223,14 @@ function UserAdmin(props) {
       removePassword: [L.removePasswordTitle, L.removePasswordText, L.removePasswordAction],
       mfa: [L.resetMfaTitle, L.resetMfaText, L.resetMfaAction],
       unlink: [L.unlinkTitle, L.unlinkText, L.unlinkAction],
-      remove: [L.removeTitle, L.removeText, L.removeAction] }[kind];
+      remove: [L.removeTitle, L.removeText, L.removeAction],
+      revoke: [L.revokeTitle, L.revokeText, L.revokeInvite] }[kind];
     if (!(await ask(confirm, fill(t[0], { email: u.email }), t[1], t[2], t[3]))) return;
     if (kind === "password") return run(() => client.newPassword(u.id), null, (pw) => showSecret(u, pw, false));
     if (kind === "removePassword") return run(() => client.removePassword(u.id), L.passwordRemoved);
     if (kind === "mfa") return run(() => client.resetMfa(u.id), L.mfaReset);
     if (kind === "unlink") return run(() => client.unlinkMicrosoft(u.id), L.unlinked);
+    if (kind === "revoke") return run(() => client.remove(u.id), L.revoked);
     return run(() => client.remove(u.id), L.removed);
   };
 
@@ -249,7 +258,7 @@ function UserAdmin(props) {
     h("select", Object.assign({ className: "scalio-input scalio-users-select", value, onChange: (e) => onChange(e.target.value) }, attrs),
       roles.map((r) => h("option", { key: r.value, value: r.value }, r.label)));
   const errorBox = error ? h("p", { className: "scalio-notice is-error scalio-users-error", role: "alert", "data-testid": "user-dialog-error" }, error) : null;
-  const mergeTargets = (u) => rows.filter((r) => r.id !== u.id && !r.pending && !r.microsoft);
+  const mergeTargets = (u) => rows.filter((r) => r.id !== u.id && !r.pending && !r.microsoft && !r.inviteOnly);
 
   const header = h(
     "div",
@@ -270,7 +279,7 @@ function UserAdmin(props) {
           h("thead", null, h("tr", null,
             h("th", null, L.user), h("th", null, L.role),
             props.accessColumn ? h("th", { className: "scalio-users-hide-sm" }, props.accessColumn.label) : null,
-            h("th", { className: "scalio-users-hide-sm" }, L.lastLogin), h("th", null))),
+            h("th", { className: "scalio-users-hide-md" }, L.lastLogin), h("th", null))),
           h("tbody", null, shown.map((u) => h(
             "tr",
             { key: u.id, "data-testid": `user-row-${u.email}`, className: cx(u.pending && "is-pending", !u.active && "is-locked") },
@@ -281,14 +290,16 @@ function UserAdmin(props) {
               h("div", { className: "scalio-users-who-text" },
                 h("div", { className: "scalio-users-name" },
                   u.name || u.email,
-                  u.id === me ? h("span", { className: "scalio-users-you" }, L.you) : null,
+                  u.id === me ? h("span", { className: "scalio-users-you" }, L.you) : null),
+                h("div", { className: "scalio-users-mail" }, u.email),
+                h("div", { className: "scalio-users-badges" },
                   u.microsoft ? badge("running", "Microsoft", `user-ms-${u.email}`) : null,
                   u.hasPassword ? badge("neutral", L.password, `user-pw-${u.email}`) : null,
                   u.managedBy === "entra" ? badge("running", L.managedByEntra, `user-entra-${u.email}`) : null,
                   u.emergency && u.role === adminRole ? badge("error", L.emergency, `user-emergency-${u.email}`) : null,
                   !u.active && !u.pending ? badge("neutral", L.locked, `user-locked-${u.email}`) : null,
-                  u.pending ? badge("warn", L.pending, `user-pending-${u.email}`) : null),
-                h("div", { className: "scalio-users-mail" }, u.email))
+                  u.invited || u.inviteOnly ? badge("warn", L.invitedBadge, `user-invited-${u.email}`) : null,
+                  u.pending ? badge("warn", L.pending, `user-pending-${u.email}`) : null))
             )),
             h("td", null, u.pending && u.managedBy !== "entra"
               ? roleSelect(pendingRole[u.id] || props.defaultRole || (roles[0] && roles[0].value), (v) => setPendingRole(Object.assign({}, pendingRole, { [u.id]: v })),
@@ -297,9 +308,12 @@ function UserAdmin(props) {
             props.accessColumn ? h("td", { className: "scalio-users-hide-sm" }, u.pending && props.accessField
               ? props.accessField(pendingAccess[u.id], (v) => setPendingAccess(Object.assign({}, pendingAccess, { [u.id]: v })), pendingRole[u.id] || props.defaultRole, u)
               : props.accessColumn.render(u)) : null,
-            h("td", { className: "scalio-users-hide-sm scalio-users-date" }, u.lastLogin ? fmtDate(u.lastLogin, lang) : "–"),
-            h("td", { className: "scalio-users-actions" }, u.pending
-              ? h(React.Fragment, null,
+            h("td", { className: "scalio-users-hide-md scalio-users-date" }, u.lastLogin ? fmtDate(u.lastLogin, lang) : "–"),
+            h("td", { className: "scalio-users-actions" }, u.inviteOnly
+              ? h("button", { type: "button", className: "scalio-btn is-ghost is-danger", onClick: () => action(u, "revoke"), disabled: busy,
+                  "data-testid": `user-revoke-${u.email}` }, L.revokeInvite)
+              : u.pending
+              ? h("div", { className: "scalio-users-actions-row" },
                   h("button", { type: "button", className: "scalio-btn is-primary", onClick: () => approve(u), disabled: busy, "data-testid": `user-approve-${u.email}` }, L.approve),
                   mergeTargets(u).length ? h("button", { type: "button", className: "scalio-btn", onClick: () => openMerge(u), "data-testid": `user-merge-${u.email}` }, L.merge) : null,
                   h("button", { type: "button", className: "scalio-btn is-ghost is-danger scalio-btn-icon", onClick: () => action(u, "remove"), title: L.removeAction,
@@ -407,9 +421,10 @@ function UserAdmin(props) {
       const c = typeof navigator !== "undefined" && navigator.clipboard;
       if (c) c.writeText(dialog.password).then(() => say(L.copied), () => null);
     };
-    body = h(Dialog, { title: dialog.created ? fill(L.createdTitle, { email: dialog.user.email }) : L.secretTitle, onClose: close, testId: "user-secret-dialog" },
+    const title = dialog.link ? L.inviteLinkTitle : dialog.created ? fill(L.createdTitle, { email: dialog.user.email }) : L.secretTitle;
+    body = h(Dialog, { title, onClose: close, testId: "user-secret-dialog" },
       h("div", { className: "scalio-dialog-body" },
-        h("p", { className: "scalio-users-hint" }, fill(L.secretText, { email: dialog.user.email })),
+        h("p", { className: "scalio-users-hint" }, fill(dialog.link ? L.inviteLinkText : L.secretText, { email: dialog.user.email })),
         h("div", { className: "scalio-users-secret", "data-testid": "user-start-password" }, dialog.password),
         h("div", { className: "scalio-dialog-actions" },
           h("button", { type: "button", className: "scalio-btn", onClick: copy, "data-testid": "user-copy-password" }, h(Icons.Copy, { className: "scalio-icon" }), L.copy),

package/CHANGELOG.md

@@ -1,248 +0,0 @@
-# Changelog
-
-## 0.24.0
-Einrichtungsassistent als Standard für alle Apps (scalio-docs ADR 0060, contract `interfaces/setup-wizard.md`).
-- New `SetupWizard`: the first-step dialog of Nexus and Kontor as a shared shell. Steps come as configuration
-  (`id`, `label`, `title`, `description`, `content`, `onNext`, `canNext`, `optional`); stepper on top, «Schritt n von
-  m», Zurück/Weiter, «Überspringen» for optional steps, errors of `onNext` keep the step open, short success message
-  at the end. Without `onClose` it cannot be closed; `wide` for steps with tables. Texts DE/EN in `labels.wizard`.
-- `setupWizardApi(api, {base})` for `GET/PUT /api/setup/wizard` (reads snake_case and camelCase), `useSetupWizard()`
-  (loads the state, opens once by itself at the saved step while the setup is needed, saves each step, completes),
-  `openSetupWizard()` and `SetupWizardButton` for Einstellungen.
-- Styles `.scalio-wizard*` in nav.css. No token changes, nothing changes until an app uses the wizard.
-
-## 0.23.0
-Benutzerverwaltung in allen Apps angleichen (scalio-docs ADR 0059, `users/B1`–`B6`, contract `interfaces/app-users.md`).
-- New `UserAdmin` for Konten und Rollen → Benutzer, the same in every app: list with search and badges (Microsoft,
-  Passwort, Rolle aus Entra, Notfall-Administrator, Gesperrt, Wartet auf Freigabe), «Benutzer hinzufügen» (Microsoft,
-  Passwort with a start password shown once, or invitation by e-mail), «Bearbeiten» (name and e-mail only for accounts
-  without Microsoft, role, access, lock, emergency administrator) with the actions new start password, remove password,
-  reset second factor, unlink Microsoft and delete; waiting accounts: role, access, «Freischalten», «Zusammenführen».
-  The app passes roles and an optional access column/field (customers, organisation).
-- `usersApi(api, {base})` for the shared routes (`/users`, Nexus `/admins`), reads snake_case and camelCase.
-- `MicrosoftConnection` for the profile section «Verknüpfungen» (link or unlink one's own Microsoft account).
-- New icons `Pencil`, `Link2`; modal dialog styles (`.scalio-dialog*`). No token changes, nothing changes until an app
-  uses the new components.
-
-## 0.22.0
-Login, Navigation und Banner vereinheitlichen (scalio-docs UISPEC section 3, ADR 0042 Nachtrag 2026-11-01).
-- **Notice in the look of the test mode banner:** thin frame in the tone, 3px bar on the left, tinted background,
-  icon in the tone, text in the normal text colour (also for errors). Colours: red = `error` (Fehler), orange = `warn`
-  (wichtig), green = `ok` (gute Meldung), blue = `info` (Aktion). New aliases `important`, `success`, `action`
-  (`noticeKind`). Banners keep the full frame; stacked banners share one line. Dark mode has its own tones.
-- `SelfTestBanner` is now a `Notice` banner (kind warn) and takes an optional `action` (e.g. link to «Tests»).
-- **Behaviour change:** `normalizeTheme()` returns `system` when nothing (or something unknown) is stored, so every
-  app starts like the device on the first visit and on the login page (before: `light`).
-- New `initialLang(stored, navLang)` / `browserLang()`: stored choice wins, otherwise German for a German browser and
-  English for everything else, the same in every app.
-- **Visible change:** every `Notice` gets the new frame and colours (info notices turn from Klein blue to a lighter
-  blue, error text is no longer red, only bar and icon). No token changes.
-
-## 0.21.0
-Testmodus (scalio-docs ADR 0053, package scalio-selftest).
-- `SelfTestPanel` for the page «Tests»: last runs with verdict, scope, source, version and counts; details per
-  section; «Neu fehlgeschlagen» and «Wieder in Ordnung» since the run before; «Jetzt ausführen» and «Abbrechen» with
-  live progress; schedule (scope and hour of the nightly run). `selftestApi(api)` maps the routes `/e2e/*`.
-- `SelfTestBanner`: hint «Testmodus (SAFE)» while the test mode is on.
-- CSS in `nav.css` (`.scalio-selftest*`).
-- **Visible change:** only in apps that show the new page. No token changes.
-
-## 0.20.0
-Scalio Ideen (ADR 0050): feature requests from the apps, votes and comments, kept centrally in Compass.
-- `supportApi(api, { ideas: true })` adds the routes of scalio-connect 0.8.0 (`ideas_router`). The support drawer then
-  gets a third tab «Ideen»: ideas of this app (most votes, newest, done), vote and take back, «Meine», idea page with
-  the answer from Scalio and comments, and «Idee vorschlagen» with similar ideas shown while typing.
-- With ideas on, the ticket category «Wunsch» leaves the ticket form. A self-hosted installation without a connection
-  shows a link to the public page (`<portal>/ideen`), also in the link-only support view.
-- New export `IdeasPanel`; CSS in `nav.css` (`.scalio-idea-*`, `.scalio-ideas*`).
-- **Visible change:** only in apps that pass `{ ideas: true }`. No token changes.
-
-## 0.19.0
-Settings card "Scalio Beacon" for the apps (Beacon phase 3, scalio-docs `concepts/beacon-suite.md`).
-- `BeaconConnection` with `peersApi(api)`: pair the installation with a Beacon instance (address + one-time code from
-  Beacon), show the pairing (address, version, last contact, queue), test it and disconnect. Routes from
-  scalio-connect 0.8.0 (`scalio_connect.peers.web.admin_router`).
-- Labels `beacon*` in German and English.
-- **Visible change:** none until an app shows the card. No token changes.
-
-## 0.18.1
-Page actions after Markus' feedback (2026-10-31, UISPEC section 2 "Page actions"). 0.18.0 was released before these
-changes were merged; apps use 0.18.1.
-- The slot is shown only when a page has actions and pushes the menu down; no reserved room, no separator line.
-- 0.25rem above the buttons, 0.875rem from the last button to the next section heading (half the usual gap).
-- Only Übersicht (first item of a first section without heading) is pinned; further items of that section stay in
-  the menu (Pulse: Geräte).
-- Buttons in the slot: same height (2.25rem), one line, long labels end with "…". Labels without "Neu" (README).
-- **Visible change:** only in apps that set `pageActions`. No token changes.
-
-## 0.18.0
-Page actions in the sidebar, first version (Markus 2026-10-31, reference Scalio Kontor; scalio-docs ADR 0042 Nachtrag).
-- New `react/actions.js`: `PageActions` puts a page's actions (Neu …, Import, Zurück) into a fixed slot in the
-  sidebar right below Übersicht from 768px; on phones they stay in the page header. `ActionSlot`, `useDesktop()`.
-- `Sidebar` gets `pageActions`: Übersicht pinned on top, then the slot (room for two buttons, line below), then the
-  sections. `shell.css`: an empty `.scalio-page-actions` is hidden. `react-dom` is an optional peer dependency.
-- **Visible change:** none until an app sets `pageActions`. No token changes.
-
-## 0.17.0
-Scalio Pulse is built (scalio-docs ADR 0043, P1 started 2026-10-31).
-- Product switcher: "Pulse" is no longer marked "bald"; it behaves like the other apps (link from `SCALIO_APP_LINKS`).
-- `manualUrl("pulse")`: docs.scaliopulse.com / devdocs.scaliopulse.com.
-- **Visible change:** after the upgrade, Pulse in the switcher loses the "bald" badge and is greyed out until the
-  instance has a link for it. No token changes.
-
-## 0.16.0
-Same profile page in every app, reference Scalio Nexus (Markus 2026-10-31, scalio-docs ADR 0042 Nachtrag).
-- New `react/profile.js`: `ProfileIdentity` (letters, name, email · role), `ThemeChoice` (Hell, Dunkel, System as
-  option cards), `LanguageChoice` (flags, `fixed` for an instance-wide language), `TimezoneChoice` (searchable
-  list, "Automatisch" = browser), `PasswordChange` (current, new, confirm; mismatch check, error from the API).
-- Helpers: `setUserTimezone`, `currentTz`, `browserTz`, `listTimezones`, `tzOffset` (apps format dates with
-  `currentTz()`), `applyTheme(mode)` / `resolveTheme` / `normalizeTheme` for light, dark and system.
-- Icons `Globe`, `Clock`; labels `profile_` (DE/EN). Default security hint now names authenticator app and passkeys.
-- **Visible change:** none until an app uses the new parts. No token changes.
-
-## 0.15.0
-New app Scalio Beacon (service desk, scalio-docs ADR 0044).
-- Product switcher: entry "Beacon" (icon `RadioTower`) between Citadel and Pulse, available like the others.
-- `manualUrl("beacon")`: docs.scaliobeacon.com / devdocs.scaliobeacon.com.
-- **Visible change:** every app shows "Beacon" in the switcher after its upgrade (greyed out until the instance
-  has a link in `SCALIO_APP_LINKS`). No token changes.
-
-## 0.14.0
-UI alignment round 1, follow-up (scalio-docs ADR 0042, Markus 2026-10-30).
-- `accountGroups({ lang, base, show })` and `accountArea(part)`: Konten und Rollen in the structure of the settings
-  page (groups Personen, Rechte, Sicherheit; one address per area, `/accounts/<area>`).
-- `SettingsLayout` takes `root` (e.g. "Konten und Rollen") for the crumb, title fallback and nav label.
-- `SubNav` with `value` and `onSelect` renders in-page tabs (buttons, `role="tablist"`).
-- New CSS classes `.scalio-tabs` / `.scalio-tab` in `nav.css`: in-page tabs (shadcn Tabs) look like the sub
-  navigation (underline, like Nexus "Gruppen").
-- **Visible change:** none until an app uses the new parts. No token changes.
-
-## 0.13.0
-UI alignment round 1 (scalio-docs ADR 0041).
-- `editionBadges(license, { admin, demo, lang })` and `EditionBadges`: edition badge next to the product name from the
-  scalio-license state (Free, plan, trial with days left, demo; read-only or grace for administrators). `Brand`
-  takes `brand.badges` and shows them on the name line.
-- `adminSection({ audit, accounts, settings })`: the sidebar section "Verwaltung" with fixed order, words and icons
-  (new inline icons `ScrollText`, `Users`, `Settings`, `Info`).
-- `ApiStatus` / `useApiStatus(check)`: nothing while the API answers, a red badge "API nicht erreichbar" when not.
-- `Notice` gets an icon, `action`, `onDismiss` ("Später") and `banner` (full width above the page).
-- `accountTabs()` (Benutzer, Rollen, Microsoft Entra, Anmeldung, Organisationen), `PasswordPolicySelect` and
-  `policyAllowed()`: "nur Notfall-Administrator" and "aus" stay disabled until an emergency administrator exists.
-- **Visible change:** existing `Notice` boxes get an icon in front and lay out as a row. Everything else only where
-  an app uses the new parts. No token changes.
-
-## 0.12.0
-- New manual button in `AppHeader` (prop `docsUrl`): a book icon between theme and support that opens the product
-  manual in a new tab; `DocsButton` on its own, `manualUrl(product, { stage, lang })` builds the address
-  (`devdocs.<domain>` on dev and test, `docs.<domain>` on production, demo and self-hosted, German under `/de/`).
-  **Visible change** only in apps that pass `docsUrl`; no token changes.
-
-## 0.11.0
-- Self-hosted support (ADR 0022, T11; needs scalio-connect 0.7.0 in the backend): `supportApi` gets `status()` and
-  `setButtonHidden(hidden)`. The support drawer asks `status()` first; a self-hosted installation without a
-  connection shows no form, only a note and the button "Zum Scalio-Portal" (`<portal>/support`). The card
-  "Support-Verbindung" gets the switch "Support-Knopf in der Kopfzeile ausblenden". **Visible change** only where
-  the backend reports `link_only` or the client has `setButtonHidden`; no token changes.
-
-## 0.10.0
-- `LicensePanel` takes more from an app's own `map`: a `hint` per usage bar (e.g. base + add-on seats), add-ons with
-  `badges`, `detail`, `tone` (`info`/`warn`) and `removable: false`, `addonErrors` (invalid add-ons, removable),
-  `addonsHidden`, `addonsReadOnly` and `keyReadOnly` (a note instead of the form) and a `copied` text per row.
-  Lets Nexus keep its trials, demo mode and badges on the shared panel. **No visible change** for apps that use
-  `mapScalioLicense`.
-
-## 0.9.0
-- New `CommandPalette` (⌘K / Strg+K): finds every page of the sidebar data (`nav`) plus extra `pages`, remembers the
-  last visited pages, and takes app commands as `groups` (Nexus: AI and guarded actions). Arrow keys, Enter, Esc,
-  no dialog library. Helpers `openCommandPalette()` (for the sidebar search button), `paletteShortcut(lang)`,
-  `paletteGroups`, `palettePages`. `LABELS` get the palette texts, `Icons` get History and CornerDownLeft.
-  **No visible change** until an app uses it; Nexus keeps its test ids (`command-palette-input`, `cmd-nav-*`).
-
-## 0.8.1
-- `SupportConnection` fills in the portal address of the instance's stage (`default_portal` from scalio-connect
-  0.5.0: dev -> portaldev, test -> portaltest, others -> portal.scaliocloud.com). **Visible change:** the address
-  field is no longer empty on the settings card. No change with older backends.
-
-## 0.8.0
-- New `SecurityFactors` (profile: authenticator app, backup codes, passkeys) with `securityApi(api, webauthn)`, and
-  `LicensePanel` (status, usage, add-ons, key) with `licenseApi(api)` and `mapScalioLicense`. They replace the copies
-  in Citadel, Foundry, Rosetta and Nexus. `LABELS` get `mfa` and `license` texts, `Icons` get Smartphone, KeyRound,
-  Trash, Copy, Puzzle, Plus, Alert, and `.scalio-btn` gets the variants `is-primary`, `is-ghost`, `is-danger`.
-  **No visible change** until an app uses the new blocks; then they look the same in every app.
-
-## 0.7.0
-- `SupportDrawer` takes `client` (from the new `supportApi(api)`) and `page`: tabs "Neue Anfrage" (category,
-  subject, description, technical details) and "Meine Tickets" (list, answers from support, reply, rating) for the
-  central support desk (ADR 0022). New settings card `SupportConnection` (portal address and one-time code, status,
-  check, disconnect). `LABELS` get the support texts. **Visible change only for apps that pass `client`**; without
-  it the drawer keeps its single form.
-
-## 0.6.2
-- **Visible change for apps using `SettingsLayout`:** the settings area uses the full width of the window (was at most
-  64rem), so wide screens show more cards side by side. No change for other apps.
-
-## 0.6.1
-- **Visible change for apps using `SettingsLayout`:** the settings page has no outer padding of its own any more;
-  the app's content area brings it (0.6.0 had both, so the page got a double margin). No change for other apps.
-
-## 0.6.0
-- New `SettingsLayout` and `SettingsSection` for the settings page (UISPEC "Einstellungen"): sub-navigation on
-  the left in fixed groups (Allgemein, app groups, Verbindungen, Benachrichtigungen, Sicherheit, System) with a
-  search, a select on phones, crumb and title of the area; areas look like the profile page. Below three areas
-  the sub-navigation is left out. `LABELS` gets the group names. No change for apps that do not use them.
-
-## 0.5.2
-- Navigation items take `match` (further paths that mark the item active), for one menu item over several pages.
-- New `SubNav` (tabs as links on top of a page) and `WorkspaceSwitcher` (Identity / HR in Nexus). No change for
-  apps that do not use them.
-
-## 0.5.1
-- Phones: the context select (tenant, customer) is hidden in the header below 640px, there is no room next to
-  the header buttons. `AppShell` takes `drawerTop` and shows it above the navigation in the phone drawer.
-
-## 0.5.0
-- **Visible change:** `rounded-sm` is now 2px as UISPEC says (was 0px from the preset). Buttons, fields, cards and
-  badges in Nexus, Citadel and Foundry get barely visible round corners; Rosetta already had 2px and can drop its
-  own `borderRadius` override.
-- New app frame in `@scalio-cloud/ui/react`: `AppShell`, `Sidebar` (navigation as data: sections, hidden items,
-  badges, search button, one main action, version), `NavDrawer` for phones, `ContextSelect` for tenant, customer or
-  organisation in the header.
-- Moved here from the apps: `ProductSwitcher` with `PRODUCTS`, `switcherHref`, `stageBadge`, `scalioFeatures`,
-  `useScalioApps`, and `SupportDrawer` (the app passes the send function). Same test ids as before.
-- Page blocks: `KpiTile`, `EmptyState`, `Loading`, `Notice`, `StatusBadge`; `PageHeader` takes `back`.
-- `LABELS` gets the shared navigation words (Übersicht, Verwaltung, Protokoll, Konten und Rollen, Einstellungen, ...).
-- New `nav.css` (imported by `index.css`). No other visual change for apps that do not use the new parts.
-
-## 0.4.1
-- No change to tokens, styles or components. CI and publish workflow on current action versions (past Node 20).
-
-## 0.4.0
-- New sign-in building blocks in `@scalio-cloud/ui/react`: `AuthLayout` (app brand on a dark grid on the left, form
-  on the right, language and optional theme top right, small brand above the form on phones), `AuthHeader`,
-  `MicrosoftButton`, `AuthDivider` ("oder mit E-Mail"), `AuthMessage`.
-- New `ProfileSection` and `PROFILE_SECTIONS` for the profile page (Konto, Darstellung, Sprache und Region,
-  Sicherheit, Verknüpfungen), title and hint on the left, content in a card on the right.
-- More shared words in `LABELS` (Anmelden, Passwort vergessen?, Passwort ändern, Zwei-Faktor-Anmeldung, ...).
-- New `auth.css` (imported by `index.css`). No visual change for apps that do not use the new components.
-
-## 0.3.0
-- New `@scalio-cloud/ui/react`: shared app header (`AppHeader` with status, language, theme, support and user menu
-  in a fixed order), `UserMenu`, `LanguageToggle`, `ThemeToggle`, `SupportButton`, `PageHeader`, `VersionTag`.
-  Only peer dependency is React (optional for apps that use just the tokens).
-- New `shell.css` (imported by `index.css`): styles for these parts with `scalio-*` classes. No visual change for
-  apps that do not use the components.
-
-## 0.2.0
-- Dark mode colours from Scalio Rosetta: sidebar and other `bg-muted` areas are now darker than the page
-  (before: lighter grey), primary blue in dark mode `223 100% 45%` (before: brighter `223 85% 62%`), card,
-  border and input slightly adjusted. Light mode unchanged.
-
-## 0.1.2
-- Published via npm trusted publishing (GitHub Actions OIDC), no npm token. Content unchanged.
-
-## 0.1.1
-- Published publicly on npmjs.com instead of GitHub Packages (no token needed to install). Content unchanged.
-
-## 0.1.0
-- First version: Control Room tokens (light/dark, taken 1:1 from Scalio Nexus), Tailwind preset, self-hosted
-  fonts Chivo / IBM Plex Sans / JetBrains Mono. Compiled against Nexus it gives the same CSS as Nexus's own config.